{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "floor-plan-explorer", "title": "Floor Plan Explorer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/floor-plan-explorer/FloorPlanExplorer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { useMemo } from 'react'\nimport { Bath, Bed, Building2, Check, Download } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { AvailableUnitsTable } from './AvailableUnitsTable'\nimport { FloorPlanCanvas } from './FloorPlanCanvas'\nimport { type AvailableUnit, type FloorPlanData, type RoomSpec } from './floor-plan-explorer-types'\n\nexport type { AvailableUnit, FloorPlanData, RoomSpec } from './floor-plan-explorer-types'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface FloorPlanExplorerProps {\n className?: string\n}\n\nconst floorPlans: Record = {\n 'plan-a': {\n id: 'plan-a',\n tabKey: 'plan-a',\n tabLabel: 'Plan A - 1 Bed / 1 Bath',\n marketingName: 'Plan A - The Urban Haven',\n tier: 'Urban Gallery Residence',\n beds: 1,\n baths: 1,\n totalAreaSqFt: 780,\n totalAreaSqM: 72.5,\n interiorSqFt: 735,\n exteriorSqFt: 45,\n ceilingHeight: `10' 0\" Finished`,\n exposure: 'East · Garden & Sunrise',\n startingRent: 3450,\n description:\n 'Artfully designed open-concept layout featuring oversized east-facing windows, gourmet galley kitchen with quartz surfaces, secluded bedroom suite with walk-in closet, and a private sunrise terrace.',\n highlights: [\n 'Floor-to-ceiling glass wall',\n 'European quartz kitchen island',\n 'Deep soaking tub & frameless shower',\n 'Private sunrise terrace',\n ],\n rooms: [\n {\n id: 'living',\n name: 'Living & Dining Room',\n shortLabel: 'Living / Dining',\n dimensionsImperial: `16' × 12'`,\n dimensionsMetric: '4.9m × 3.7m',\n areaSqFt: 192,\n areaSqM: 17.8,\n flooring: 'Wide Plank Natural White Oak',\n features: ['East Sunrise Exposure', '9-Foot Glazing Wall', 'Concealed Media Wiring'],\n pinX: 280,\n pinY: 175,\n rect: { x: 170, y: 90, w: 230, h: 170 },\n },\n {\n id: 'master-bed',\n name: 'Master Bedroom',\n shortLabel: 'Master Bed',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Plush Organic Wool Loop',\n features: ['Acoustic Insulation', 'Custom Closet Built-ins', 'Blackout Shade Pocket'],\n pinX: 505,\n pinY: 175,\n rect: { x: 410, y: 90, w: 190, h: 170 },\n },\n {\n id: 'kitchen',\n name: 'Gourmet Galley Kitchen',\n shortLabel: 'Kitchen',\n dimensionsImperial: `11' × 9'`,\n dimensionsMetric: '3.4m × 2.7m',\n areaSqFt: 99,\n areaSqM: 9.2,\n flooring: 'Calacatta Honed Quartzite',\n features: ['Integrated Bosch Appliances', 'Undermount LED Lights', 'Soft-Close Walnut Joinery'],\n pinX: 280,\n pinY: 330,\n rect: { x: 170, y: 270, w: 230, h: 120 },\n },\n {\n id: 'master-bath',\n name: 'Primary Full Bath',\n shortLabel: 'Full Bath',\n dimensionsImperial: `9' × 6'`,\n dimensionsMetric: '2.7m × 1.8m',\n areaSqFt: 54,\n areaSqM: 5.0,\n flooring: 'Matte Slate & Terrazzo',\n features: ['Kohler Undermount Sink', 'Frameless Glass Shower', 'Backlit Anti-Fog Vanity'],\n pinX: 505,\n pinY: 330,\n rect: { x: 410, y: 270, w: 190, h: 120 },\n },\n {\n id: 'balcony',\n name: 'Private Terrace',\n shortLabel: 'Terrace',\n dimensionsImperial: `9' × 5'`,\n dimensionsMetric: '2.7m × 1.5m',\n areaSqFt: 45,\n areaSqM: 4.2,\n flooring: 'Weathered Teak Decking',\n features: ['Architectural Steel Railing', 'Exterior Power Outlet', 'Garden Courtyard Vistas'],\n pinX: 105,\n pinY: 175,\n rect: { x: 50, y: 90, w: 110, h: 170 },\n },\n ],\n availableUnits: [\n {\n unitNumber: '304',\n floor: 3,\n view: 'Courtyard & Garden',\n monthlyRent: 3450,\n sqFt: 780,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: 'East',\n },\n {\n unitNumber: '604',\n floor: 6,\n view: 'Skyline Sunrise View',\n monthlyRent: 3650,\n sqFt: 780,\n status: 'available-soon',\n statusLabel: 'Available Oct 15',\n moveInDate: 'Oct 15, 2026',\n exposure: 'East / North',\n },\n {\n unitNumber: '904',\n floor: 9,\n view: 'High-Floor Park View',\n monthlyRent: 3800,\n sqFt: 780,\n status: 'leased',\n statusLabel: 'Leased',\n moveInDate: 'Occupied',\n exposure: 'East',\n },\n ],\n },\n 'plan-b': {\n id: 'plan-b',\n tabKey: 'plan-b',\n tabLabel: 'Plan B - 2 Bed / 2 Bath',\n marketingName: 'Plan B - The Skyline Suite',\n tier: 'Signature Corner Residence',\n beds: 2,\n baths: 2,\n totalAreaSqFt: 1420,\n totalAreaSqM: 132.0,\n interiorSqFt: 1360,\n exteriorSqFt: 60,\n ceilingHeight: `10' 6\" Finished`,\n exposure: 'Southwest · Bay & City Skyline',\n startingRent: 4850,\n description:\n 'Expansive dual-exposure residence centered around a dramatic living and entertaining salon with floor-to-ceiling panoramic glass, chef-grade kitchen island, split master and guest wings, and a sheltered private terrace.',\n highlights: [\n 'Dual-aspect corner positioning with 270° light',\n 'Chef island with 10-foot marble waterfall',\n 'Primary wing with dual walk-in closets',\n 'Dedicated foyer vestibule & utility pantry',\n ],\n rooms: [\n {\n id: 'living',\n name: 'Living Room',\n shortLabel: 'Living Room',\n dimensionsImperial: `18' × 14'`,\n dimensionsMetric: '5.5m × 4.3m',\n areaSqFt: 252,\n areaSqM: 23.4,\n flooring: 'Wide Plank European White Oak',\n features: ['Floor-to-Ceiling Corner Glazing', 'Motorized Solar Shades', 'Recessed Architectural Lighting'],\n pinX: 255,\n pinY: 160,\n rect: { x: 150, y: 75, w: 220, h: 175 },\n },\n {\n id: 'master-bed',\n name: 'Master Bedroom',\n shortLabel: 'Master Bed',\n dimensionsImperial: `15' × 12'`,\n dimensionsMetric: '4.6m × 3.7m',\n areaSqFt: 180,\n areaSqM: 16.7,\n flooring: 'New Zealand Wool Weave',\n features: ['South Bay Views', 'Direct En-Suite Access', 'Custom Millwork Wardrobe'],\n pinX: 455,\n pinY: 145,\n rect: { x: 380, y: 75, w: 155, h: 150 },\n },\n {\n id: 'kitchen',\n name: 'Chef Kitchen & Dining',\n shortLabel: 'Kitchen',\n dimensionsImperial: `12' × 10'`,\n dimensionsMetric: '3.7m × 3.0m',\n areaSqFt: 120,\n areaSqM: 11.1,\n flooring: 'Calacatta Honed Quartzite',\n features: ['Waterfall Marble Island', 'Sub-Zero & Wolf Appliances', 'Pantry Cabinetry'],\n pinX: 255,\n pinY: 325,\n rect: { x: 150, y: 260, w: 220, h: 135 },\n },\n {\n id: 'master-bath',\n name: 'Master Bath',\n shortLabel: 'Master Bath',\n dimensionsImperial: `10' × 8'`,\n dimensionsMetric: '3.0m × 2.4m',\n areaSqFt: 80,\n areaSqM: 7.4,\n flooring: 'Bianco Carrara Marble',\n features: ['Dual Floating Vanities', 'Walk-in Rain Shower', 'Acoustic Privacy Door'],\n pinX: 590,\n pinY: 145,\n rect: { x: 545, y: 75, w: 90, h: 150 },\n },\n {\n id: 'guest-bed',\n name: 'Guest Bedroom / Study',\n shortLabel: 'Guest Bed',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Wide Plank European White Oak',\n features: ['Multi-Function Home Office', 'South Window Exposure', 'Built-in Closet System'],\n pinX: 565,\n pinY: 320,\n rect: { x: 490, y: 245, w: 145, h: 150 },\n },\n {\n id: 'guest-bath',\n name: 'Guest Full Bath',\n shortLabel: 'Guest Bath',\n dimensionsImperial: `8' × 6'`,\n dimensionsMetric: '2.4m × 1.8m',\n areaSqFt: 48,\n areaSqM: 4.5,\n flooring: 'Smoked Gray Terrazzo',\n features: ['Full Soaking Tub', 'Modern Matte Black Fixtures', 'Linen Storage'],\n pinX: 430,\n pinY: 320,\n rect: { x: 380, y: 245, w: 100, h: 150 },\n },\n {\n id: 'balcony',\n name: 'Private Terrace',\n shortLabel: 'Terrace',\n dimensionsImperial: `10' × 6'`,\n dimensionsMetric: '3.0m × 1.8m',\n areaSqFt: 60,\n areaSqM: 5.6,\n flooring: 'Architectural Ipe Wood',\n features: ['Panoramic Bay Overlook', 'Weatherproof Recessed Sconces', 'Glass Wind Guard'],\n pinX: 90,\n pinY: 160,\n rect: { x: 40, y: 75, w: 100, h: 175 },\n },\n ],\n availableUnits: [\n {\n unitNumber: '402',\n floor: 4,\n view: 'South City View',\n monthlyRent: 4850,\n sqFt: 1420,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: 'South / West',\n },\n {\n unitNumber: '708',\n floor: 7,\n view: 'Bay & Marina View',\n monthlyRent: 5200,\n sqFt: 1420,\n status: 'available-soon',\n statusLabel: 'Available Sep 1',\n moveInDate: 'Sep 1, 2026',\n exposure: 'Bay View / South',\n },\n {\n unitNumber: '1102',\n floor: 11,\n view: 'Penthouse Level Panoramic',\n monthlyRent: 5600,\n sqFt: 1420,\n status: 'leased',\n statusLabel: 'Leased',\n moveInDate: 'Occupied',\n exposure: 'Panoramic South',\n },\n ],\n },\n 'plan-c': {\n id: 'plan-c',\n tabKey: 'plan-c',\n tabLabel: 'Plan C - 3 Bed Penthouse',\n marketingName: 'Plan C - The Grandview Penthouse',\n tier: 'Crown Estate Penthouse',\n beds: 3,\n baths: 3.5,\n totalAreaSqFt: 2250,\n totalAreaSqM: 209.0,\n interiorSqFt: 2090,\n exteriorSqFt: 160,\n ceilingHeight: `11' 8\" Finished`,\n exposure: '360° Panoramic · Harbor, Bay & Bridges',\n startingRent: 9400,\n description:\n 'A true architectural masterpiece occupying the top levels of the tower. Direct key-lock private elevator access opens into a sweeping grand salon with 11.5-foot ceilings, full culinary kitchen with butler pantry, spa sanctuary primary suite, and wraparound sky terrace.',\n highlights: [\n 'Private elevator vestibule with secure biometric access',\n 'Wraparound sky terrace with built-in gas fire table',\n 'Primary retreat with double walk-in dressing galleries',\n 'Butler service pantry with climate-controlled wine vault',\n ],\n rooms: [\n {\n id: 'grand-salon',\n name: 'Grand Salon & Living',\n shortLabel: 'Grand Salon',\n dimensionsImperial: `24' × 16'`,\n dimensionsMetric: '7.3m × 4.9m',\n areaSqFt: 384,\n areaSqM: 35.7,\n flooring: 'Herringbone European Oak',\n features: ['360° Bay Vista Glazing', 'Gas Linear Fireplace', 'Custom Architectural Coving'],\n pinX: 275,\n pinY: 155,\n rect: { x: 160, y: 85, w: 240, h: 150 },\n },\n {\n id: 'primary-suite',\n name: 'Primary Penthouse Suite',\n shortLabel: 'Primary Suite',\n dimensionsImperial: `18' × 14'`,\n dimensionsMetric: '5.5m × 4.3m',\n areaSqFt: 252,\n areaSqM: 23.4,\n flooring: 'Custom Silk-Wool Blend Weave',\n features: ['Harbor Sunrise Exposure', 'Sitting Lounge Area', 'Dual Walk-in Closets'],\n pinX: 480,\n pinY: 155,\n rect: { x: 410, y: 85, w: 140, h: 150 },\n },\n {\n id: 'spa-bath',\n name: 'Spa Sanctuary Primary Bath',\n shortLabel: 'Spa Bath',\n dimensionsImperial: `12' × 9'`,\n dimensionsMetric: '3.7m × 2.7m',\n areaSqFt: 108,\n areaSqM: 10.0,\n flooring: 'Bookmatched Calacatta Marble',\n features: ['Freestanding Oval Soaking Tub', 'Dual Steam Shower', 'Radiant Heated Flooring'],\n pinX: 595,\n pinY: 155,\n rect: { x: 560, y: 85, w: 80, h: 150 },\n },\n {\n id: 'dining',\n name: 'Formal Dining Gallery',\n shortLabel: 'Dining Room',\n dimensionsImperial: `15' × 12'`,\n dimensionsMetric: '4.6m × 3.7m',\n areaSqFt: 180,\n areaSqM: 16.7,\n flooring: 'Herringbone European Oak',\n features: ['Seating for 10-12 Guests', 'Integrated Bar Cabinetry', 'Designer Chandelier Anchor'],\n pinX: 235,\n pinY: 315,\n rect: { x: 160, y: 245, w: 150, h: 145 },\n },\n {\n id: 'kitchen',\n name: 'Culinary Kitchen & Pantry',\n shortLabel: 'Kitchen',\n dimensionsImperial: `16' × 11'`,\n dimensionsMetric: '4.9m × 3.4m',\n areaSqFt: 176,\n areaSqM: 16.3,\n flooring: 'Taj Mahal Quartzite',\n features: ['12-Foot Monolithic Island', 'Gaggenau 400 Series Suite', 'Butler Prep Scullery'],\n pinX: 95,\n pinY: 315,\n rect: { x: 40, y: 245, w: 110, h: 145 },\n },\n {\n id: 'bed-2',\n name: 'Bedroom Suite 2',\n shortLabel: 'Bed 2 Suite',\n dimensionsImperial: `14' × 12'`,\n dimensionsMetric: '4.3m × 3.7m',\n areaSqFt: 168,\n areaSqM: 15.6,\n flooring: 'Wide Plank European Oak',\n features: ['En-Suite Private Bath', 'South Window Bank', 'Deep Built-in Wardrobe'],\n pinX: 395,\n pinY: 315,\n rect: { x: 320, y: 245, w: 150, h: 145 },\n },\n {\n id: 'bed-3',\n name: 'Bedroom 3 / Executive Study',\n shortLabel: 'Bed 3 / Study',\n dimensionsImperial: `13' × 11'`,\n dimensionsMetric: '4.0m × 3.4m',\n areaSqFt: 143,\n areaSqM: 13.3,\n flooring: 'Custom Walnut Parquetry',\n features: ['Integrated Library Shelving', 'Acoustic Pocket Doors', 'Corner View Light'],\n pinX: 560,\n pinY: 315,\n rect: { x: 480, y: 245, w: 160, h: 145 },\n },\n {\n id: 'sky-terrace',\n name: 'Wraparound Sky Terrace',\n shortLabel: 'Sky Terrace',\n dimensionsImperial: `20' × 8'`,\n dimensionsMetric: '6.1m × 2.4m',\n areaSqFt: 160,\n areaSqM: 14.9,\n flooring: 'Porcelain Pavers & Teak',\n features: ['Integrated Linear Gas Hearth', 'Outdoor Audio Pre-Wire', 'Frameless Wind Barrier'],\n pinX: 340,\n pinY: 45,\n rect: { x: 160, y: 25, w: 360, h: 50 },\n },\n ],\n availableUnits: [\n {\n unitNumber: 'PH-01',\n floor: 14,\n view: '360° Bay & City Skyline',\n monthlyRent: 9400,\n sqFt: 2250,\n status: 'available-now',\n statusLabel: 'Available Now',\n moveInDate: 'Immediate',\n exposure: '360° Panoramic',\n },\n {\n unitNumber: 'PH-02',\n floor: 14,\n view: 'Harbor Sunrise & Marina',\n monthlyRent: 9100,\n sqFt: 2250,\n status: 'under-contract',\n statusLabel: 'Under Contract',\n moveInDate: 'Pending',\n exposure: 'East / South',\n },\n {\n unitNumber: 'PH-03',\n floor: 15,\n view: 'Crown Sky Penthouse with Spa',\n monthlyRent: 10500,\n sqFt: 2250,\n status: 'available-soon',\n statusLabel: 'Available Nov 1',\n moveInDate: 'Nov 1, 2026',\n exposure: 'Crown Panoramic',\n },\n ],\n },\n}\n\nexport function FloorPlanExplorer({ className }: FloorPlanExplorerProps) {\n const [activeTab, setActiveTab] = React.useState('plan-b')\n const [selectedRoomId, setSelectedRoomId] = React.useState('living')\n const [hoveredRoomId, setHoveredRoomId] = React.useState(null)\n const [selectedUnitNumber, setSelectedUnitNumber] = React.useState('402')\n const [showDimensions, setShowDimensions] = React.useState(true)\n const [showFurniture, setShowFurniture] = React.useState(true)\n const [showPins, setShowPins] = React.useState(true)\n const [unitSystem, setUnitSystem] = React.useState<'imperial' | 'metric'>('imperial')\n const [isDownloadingPdf, setIsDownloadingPdf] = React.useState(false)\n const [downloadSuccess, setDownloadSuccess] = React.useState(false)\n const [showTourSuccess, setShowTourSuccess] = React.useState(false)\n\n const currentPlan = useMemo(() => floorPlans[activeTab] || floorPlans['plan-b'], [activeTab])\n\n const activeRoom = useMemo(() => {\n if (hoveredRoomId) {\n return currentPlan.rooms.find((r) => r.id === hoveredRoomId) || null\n }\n if (selectedRoomId) {\n return currentPlan.rooms.find((r) => r.id === selectedRoomId) || null\n }\n return currentPlan.rooms[0] || null\n }, [hoveredRoomId, selectedRoomId, currentPlan])\n\n const handleSelectTab = (key: string) => {\n setActiveTab(key)\n const plan = floorPlans[key]\n if (plan) {\n setSelectedRoomId(plan.rooms[0]?.id || null)\n setHoveredRoomId(null)\n setSelectedUnitNumber(plan.availableUnits[0]?.unitNumber || '')\n }\n }\n\n const handleSelectRoom = (roomId: string) => {\n setSelectedRoomId((prev) => (prev === roomId ? null : roomId))\n }\n\n const handleDownloadPdf = () => {\n setIsDownloadingPdf(true)\n setDownloadSuccess(false)\n setTimeout(() => {\n setIsDownloadingPdf(false)\n setDownloadSuccess(true)\n setTimeout(() => {\n setDownloadSuccess(false)\n }, 4000)\n }, 900)\n }\n\n const handleScheduleTour = () => {\n setShowTourSuccess(true)\n setTimeout(() => {\n setShowTourSuccess(false)\n }, 4500)\n }\n\n return (\n
\n {/* Header: Building Title, Plan Switcher Tabs, Action Button */}\n
\n
\n
\n \n \n The Grandview Collection\n \n Tower West · Residences\n
\n

\n The Grandview Penthouse Collection · Floor Plan Explorer\n

\n

\n Interactive architectural layout inspector, dimensional specifications, and real-time residential unit\n availability.\n

\n
\n\n
\n \n {!downloadSuccess ? (\n \n ) : (\n \n )}\n \n {isDownloadingPdf ? 'Generating PDF...' : downloadSuccess ? 'PDF Downloaded' : 'Download PDF Floor Plan'}\n \n \n
\n
\n\n {/* Plan Selection Tabs Bar */}\n
\n \n \n \n Plan A - 1 Bed / 1 Bath\n \n \n Plan B - 2 Bed / 2 Bath\n \n \n Plan C - 3 Bed Penthouse\n \n \n \n\n
\n Units:\n
\n setUnitSystem('imperial')}\n >\n Sq Ft / ft\n \n setUnitSystem('metric')}\n >\n m² / m\n \n
\n
\n
\n\n {/* 2-Column Inspector: Left 2D CAD Blueprint Canvas, Right Specs & Availability */}\n
\n {/* Left Column: 2D Architectural Layout Canvas (7 cols) */}\n \n\n {/* Right Column: Unit Specs, Room Breakdown & Available Units Table (5 cols) */}\n
\n {/* Selected Plan Header Card with Total Area */}\n \n \n
\n \n {currentPlan.tier}\n \n
\n \n {currentPlan.beds} Bed\n ·\n \n {currentPlan.baths} Bath\n
\n
\n \n {currentPlan.marketingName}\n \n \n {currentPlan.description}\n \n \n\n \n {/* Total Area Hero Metric Box */}\n
\n

Total Architectural Living Area

\n
\n \n {currentPlan.totalAreaSqFt.toLocaleString()}\n \n Sq Ft\n /\n \n {currentPlan.totalAreaSqM.toFixed(1)}\n \n m²\n
\n
\n \n Interior:{' '}\n {currentPlan.interiorSqFt} sq ft\n \n \n Terrace:{' '}\n {currentPlan.exteriorSqFt} sq ft\n \n
\n
\n\n {/* Room Breakdown List with Interactive Highlights */}\n
\n
\n

\n Room Breakdown & Dimensions\n

\n {currentPlan.rooms.length} Spaces\n
\n\n
\n {currentPlan.rooms.map((room) => (\n setHoveredRoomId(room.id)}\n onMouseLeave={() => setHoveredRoomId(null)}\n onClick={() => handleSelectRoom(room.id)}\n >\n
\n \n
\n

{room.name}

\n

{room.flooring}

\n
\n
\n\n
\n

\n {unitSystem === 'imperial' ? room.dimensionsImperial : room.dimensionsMetric}\n

\n

\n {unitSystem === 'imperial' ? `${room.areaSqFt} sq ft` : `${room.areaSqM} m²`}\n

\n
\n
\n ))}\n
\n
\n \n \n\n {/* Available Units in Building Table */}\n \n
\n
\n \n )\n}\n\nexport default FloorPlanExplorer\n", "type": "registry:block", "target": "~/components/blocks/floor-plan-explorer/FloorPlanExplorer.tsx" }, { "path": "packages/registry-react/blocks/floor-plan-explorer/FloorPlanCanvas.tsx", "content": "'use client'\n\nimport { Home, Layers, MapPin, Ruler } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\nimport { type FloorPlanData, type RoomSpec } from './floor-plan-explorer-types'\n\nexport function FloorPlanCanvas({\n plan,\n activeRoom,\n unitSystem,\n showDimensions,\n showFurniture,\n showPins,\n selectedRoomId,\n hoveredRoomId,\n onShowDimensionsChange,\n onShowFurnitureChange,\n onShowPinsChange,\n onHoverRoom,\n onSelectRoom,\n}: {\n plan: FloorPlanData\n activeRoom: RoomSpec | null\n unitSystem: 'imperial' | 'metric'\n showDimensions: boolean\n showFurniture: boolean\n showPins: boolean\n selectedRoomId: string | null\n hoveredRoomId: string | null\n onShowDimensionsChange: (visible: boolean) => void\n onShowFurnitureChange: (visible: boolean) => void\n onShowPinsChange: (visible: boolean) => void\n onHoverRoom: (roomId: string | null) => void\n onSelectRoom: (roomId: string) => void\n}) {\n return (\n <>\n {/* Left Column: 2D Architectural Layout Canvas (7 cols) */}\n
\n \n {/* Canvas Toolbar Header */}\n
\n
\n \n \n \n \n
\n

2D Architectural CAD Schematic

\n

Interactive room layout & dimensional spans

\n
\n
\n\n {/* Canvas View Options */}\n
\n onShowDimensionsChange(!showDimensions)}\n >\n \n Dimensions\n \n onShowFurnitureChange(!showFurniture)}\n >\n \n Fixtures\n \n onShowPinsChange(!showPins)}\n >\n \n Pins\n \n
\n
\n\n {/* Canvas Drawing Surface */}\n
\n \n \n {/* Blueprint Architectural Grid Pattern */}\n \n \n \n \n \n \n \n {/* Balcony / Terrace Wood Decking Pattern */}\n \n \n \n \n\n {/* Blueprint Grid Background */}\n \n\n {/* North Arrow Compass Widget */}\n \n \n \n \n \n N\n \n \n\n {/* Scale Indicator Bar */}\n \n \n \n \n \n \n 0\n \n \n 10'\n \n \n 20'\n \n \n Scale 1/4\" = 1'0\"\n \n \n\n {/* Architectural Rooms Layout Polygons */}\n \n {plan.rooms.map((room) => (\n onHoverRoom(room.id)}\n onMouseLeave={() => onHoverRoom(null)}\n onClick={() => onSelectRoom(room.id)}\n >\n {/* Room Floor Fill */}\n \n\n {/* Room Border Perimeter */}\n \n\n {/* Architectural Fixtures Silhouette Layer */}\n {showFurniture && (\n \n {/* Living Room: Sofa & Coffee Table */}\n {(room.id === 'living' || room.id === 'grand-salon') && (\n <>\n \n \n \n \n )}\n\n {/* Bedroom: Bed Silhouette & Pillows */}\n {(room.id === 'master-bed' ||\n room.id === 'guest-bed' ||\n room.id === 'primary-suite' ||\n room.id === 'bed-2') && (\n <>\n \n \n \n \n \n )}\n\n {/* Kitchen: Island & Cooktop / Prep Sink */}\n {room.id === 'kitchen' && (\n <>\n \n \n \n \n \n )}\n\n {/* Bathrooms: Tub / Shower & Vanity */}\n {(room.id === 'master-bath' || room.id === 'guest-bath' || room.id === 'spa-bath') && (\n <>\n \n \n \n )}\n\n {/* Balcony: Railing Post Accents */}\n {(room.id === 'balcony' || room.id === 'sky-terrace') && (\n \n )}\n \n )}\n\n {/* Dimension Leader Line Callouts */}\n {showDimensions && (\n \n \n {unitSystem === 'imperial' ? room.dimensionsImperial : room.dimensionsMetric}\n \n \n )}\n \n ))}\n \n\n {/* Outer Perimeter Heavy Structural Walls */}\n \n {/* Windows with Glass Double Thin Lines */}\n \n \n \n \n\n {/* Interactive Room Highlight Pins */}\n {showPins && (\n \n {plan.rooms.map((room) => (\n onHoverRoom(room.id)}\n onMouseLeave={() => onHoverRoom(null)}\n onClick={() => onSelectRoom(room.id)}\n >\n {/* Pulsing Halo on Selected */}\n {(selectedRoomId === room.id || hoveredRoomId === room.id) && (\n \n )}\n\n {/* Pin Badge Background Pill */}\n \n\n {/* Pin Label Text */}\n \n {room.shortLabel}\n \n \n ))}\n \n )}\n \n
\n\n {/* Canvas Footer Status / Active Room Info */}\n
\n
\n \n \n Active Focus: {activeRoom?.name || 'Overview'}\n \n \n {unitSystem === 'imperial' ? activeRoom?.dimensionsImperial : activeRoom?.dimensionsMetric} ·{' '}\n \n {unitSystem === 'imperial' ? `${activeRoom?.areaSqFt} Sq Ft` : `${activeRoom?.areaSqM} m²`}\n \n \n
\n\n
\n Finish:\n {activeRoom?.flooring}\n
\n
\n \n\n {/* Floor Plan Features / Highlights Strip */}\n
\n
\n

Ceiling Height

\n

{plan.ceilingHeight}

\n
\n
\n

Outdoor Space

\n

\n {unitSystem === 'imperial'\n ? `${plan.exteriorSqFt} Sq Ft`\n : `${(plan.exteriorSqFt * 0.0929).toFixed(1)} m²`}\n

\n
\n
\n

Exposure

\n

{plan.exposure}

\n
\n
\n

Starting Rent

\n

\n ${plan.startingRent.toLocaleString()}\n /mo\n

\n
\n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/floor-plan-explorer/FloorPlanCanvas.tsx" }, { "path": "packages/registry-react/blocks/floor-plan-explorer/AvailableUnitsTable.tsx", "content": "'use client'\n\nimport { Calendar, CheckCircle2, FileText } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\nimport { type FloorPlanData } from './floor-plan-explorer-types'\n\nexport function AvailableUnitsTable({\n plan,\n selectedUnitNumber,\n tourSuccess,\n onSelectUnit,\n onScheduleTour,\n}: {\n plan: FloorPlanData\n selectedUnitNumber: string\n tourSuccess: boolean\n onSelectUnit: (unitNumber: string) => void\n onScheduleTour: () => void\n}) {\n return (\n <>\n {/* Available Units in Building Table */}\n \n \n
\n
\n \n Available Units in Building\n \n \n Real-time occupancy and lease rates for {plan.tabLabel}\n \n
\n \n {plan.availableUnits.filter((u) => u.status !== 'leased').length} Available\n \n
\n \n\n \n
\n \n \n \n Unit\n Floor & View\n Monthly Rent\n Status\n \n \n \n {plan.availableUnits.map((unit) => (\n onSelectUnit(unit.unitNumber)}\n >\n \n Unit {unit.unitNumber}\n \n \n
{unit.view}
\n
\n Floor {unit.floor} · {unit.exposure}\n
\n \n \n ${unit.monthlyRent.toLocaleString()}\n /mo\n \n \n {unit.status === 'available-now' && (\n \n {unit.statusLabel}\n \n )}\n {unit.status === 'available-soon' && (\n \n {unit.statusLabel}\n \n )}\n {unit.status === 'under-contract' && (\n \n {unit.statusLabel}\n \n )}\n {unit.status === 'leased' && (\n \n {unit.statusLabel}\n \n )}\n \n \n ))}\n \n
\n
\n \n\n \n
\n \n \n
\n\n {tourSuccess && (\n
\n \n \n Tour request received for Unit {selectedUnitNumber}. Leasing agent will contact you within 15 minutes.\n \n
\n )}\n\n

\n Self-guided tours and agent-accompanied showings available daily 9:00 AM – 7:00 PM.\n

\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/floor-plan-explorer/AvailableUnitsTable.tsx" }, { "path": "packages/registry-react/blocks/floor-plan-explorer/floor-plan-explorer-types.ts", "content": "export interface RoomSpec {\n id: string\n name: string\n shortLabel: string\n dimensionsImperial: string\n dimensionsMetric: string\n areaSqFt: number\n areaSqM: number\n flooring: string\n features: string[]\n pinX: number\n pinY: number\n rect: {\n x: number\n y: number\n w: number\n h: number\n }\n}\n\nexport interface AvailableUnit {\n unitNumber: string\n floor: number\n view: string\n monthlyRent: number\n sqFt: number\n status: 'available-now' | 'available-soon' | 'leased' | 'under-contract'\n statusLabel: string\n moveInDate: string\n exposure: string\n}\n\nexport interface FloorPlanData {\n id: string\n tabKey: string\n tabLabel: string\n marketingName: string\n tier: string\n beds: number\n baths: number\n totalAreaSqFt: number\n totalAreaSqM: number\n interiorSqFt: number\n exteriorSqFt: number\n ceilingHeight: string\n exposure: string\n startingRent: number\n description: string\n highlights: string[]\n rooms: RoomSpec[]\n availableUnits: AvailableUnit[]\n}\n", "type": "registry:block", "target": "~/components/blocks/floor-plan-explorer/floor-plan-explorer-types.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/tabs.json" ], "description": "Architectural unit floor plan inspector and residential layout explorer with 2D CAD-styled blueprint canvas, interactive room highlight pins, dimensional callouts, room breakdown specs, and building unit availability table.", "categories": [ "real-estate", "app", "hospitality", "dashboard" ] }