@principal-ai/file-city-react 0.5.6 → 0.5.7

package/dist/components/ArchitectureMapHighlightLayers.js

@@ -1,45 +1,10 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArchitectureMapHighlightLayers = void 0;
-const react_1 = __importStar(require("react"));
-const industry_theme_1 = require("@principal-ade/industry-theme");
-const cityDataUtils_1 = require("../builder/cityDataUtils");
-const drawLayeredBuildings_1 = require("../render/client/drawLayeredBuildings");
-const fileColorHighlightLayers_1 = require("../utils/fileColorHighlightLayers");
-const fileTypeIcons_1 = require("../utils/fileTypeIcons");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { filterCityDataForSelectiveRender, filterCityDataForSubdirectory, filterCityDataForMultipleDirectories, } from '../builder/cityDataUtils';
+import { drawLayeredBuildings, drawLayeredDistricts, drawGrid, LayerIndex, } from '../render/client/drawLayeredBuildings';
+import { getDefaultFileColorConfig } from '../utils/fileColorHighlightLayers';
+import { extractIconConfig } from '../utils/fileTypeIcons';
 const DEFAULT_DISPLAY_OPTIONS = {
     showGrid: false,
     showConnections: true,
@@ -181,25 +146,25 @@ class PathHierarchyLookup {
 }
 function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers = [], onLayerToggle, focusDirectory = null, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom = false, zoomToPath = null, onZoomComplete, zoomAnimationSpeed = 0.12, allowZoomToPath = true, fullSize = false, showGrid = false, showFileNames = false, className = '', selectiveRender, canvasBackgroundColor, maxCanvasSize, hoverBorderColor, disableOpacityDimming = true, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls = false, showFileTypeIcons = true, showDirectoryLabels = true, transform = { rotation: 0 }, // Default to no rotation
 onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
-    const { theme } = (0, industry_theme_1.useTheme)();
+    const { theme } = useTheme();
     // Use theme colors as defaults, with prop overrides
     const resolvedCanvasBackgroundColor = canvasBackgroundColor ?? theme.colors.background;
     const resolvedHoverBorderColor = hoverBorderColor ?? theme.colors.text;
     const resolvedDefaultDirectoryColor = defaultDirectoryColor ?? theme.colors.backgroundSecondary;
     const resolvedDefaultBuildingColor = defaultBuildingColor ?? theme.colors.muted;
-    const canvasRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
     // Extract icon configuration from file color config
-    const iconMap = (0, react_1.useMemo)(() => {
-        const colorConfig = (0, fileColorHighlightLayers_1.getDefaultFileColorConfig)();
-        return (0, fileTypeIcons_1.extractIconConfig)(colorConfig);
+    const iconMap = useMemo(() => {
+        const colorConfig = getDefaultFileColorConfig();
+        return extractIconConfig(colorConfig);
     }, []);
-    const [interactionState, setInteractionState] = (0, react_1.useState)({
+    const [interactionState, setInteractionState] = useState({
         hoveredDistrict: null,
         hoveredBuilding: null,
         mousePos: { x: 0, y: 0 },
     });
-    const [zoomState, setZoomState] = (0, react_1.useState)({
+    const [zoomState, setZoomState] = useState({
         scale: 1,
         offsetX: 0,
         offsetY: 0,
@@ -208,19 +173,19 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         hasMouseMoved: false,
     });
     // Target zoom state for animated transitions
-    const [targetZoom, setTargetZoom] = (0, react_1.useState)(null);
+    const [targetZoom, setTargetZoom] = useState(null);
     // Stable zoom scale - only updates when animation completes or user stops zooming
     // Used for expensive calculations that shouldn't run every frame
-    const [stableZoomScale, setStableZoomScale] = (0, react_1.useState)(1);
-    const stableZoomTimeoutRef = (0, react_1.useRef)(null);
+    const [stableZoomScale, setStableZoomScale] = useState(1);
+    const stableZoomTimeoutRef = useRef(null);
     // Track if we're currently animating
     const isAnimating = targetZoom !== null;
     // Track the last zoomToPath to detect changes
-    const lastZoomToPathRef = (0, react_1.useRef)(null);
+    const lastZoomToPathRef = useRef(null);
     // Throttle ref for hover updates (improves performance with large datasets)
-    const lastHoverUpdateRef = (0, react_1.useRef)(0);
+    const lastHoverUpdateRef = useRef(0);
     const HOVER_THROTTLE_MS = 16; // ~60fps max for hover updates
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Reset user interaction state when enableZoom is disabled
         if (!enableZoom) {
             setZoomState(prev => ({
@@ -241,7 +206,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
     }, [enableZoom, allowZoomToPath]);
     // Animation loop for smooth zoom transitions
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!targetZoom)
             return;
         const animate = () => {
@@ -279,7 +244,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     }, [targetZoom, zoomState, zoomAnimationSpeed, onZoomComplete]);
     // Update stable zoom scale with debouncing
     // This ensures expensive calculations only run when zoom stabilizes
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Clear any pending timeout
         if (stableZoomTimeoutRef.current) {
             clearTimeout(stableZoomTimeoutRef.current);
@@ -299,13 +264,13 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         };
     }, [zoomState.scale, isAnimating]);
     // Immediately update stable zoom when animation completes
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!isAnimating && targetZoom === null) {
             // Animation just completed, update stable zoom immediately
             setStableZoomScale(zoomState.scale);
         }
     }, [isAnimating, targetZoom, zoomState.scale]);
-    const [hitTestCache, setHitTestCache] = (0, react_1.useState)(null);
+    const [hitTestCache, setHitTestCache] = useState(null);
     const calculateCanvasResolution = (fileCount, _cityBounds) => {
         const minSize = 400;
         const scaleFactor = Math.sqrt(fileCount / 5);
@@ -315,12 +280,12 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
         return { width: resolution, height: resolution };
     };
-    const [canvasSize, setCanvasSize] = (0, react_1.useState)(() => calculateCanvasResolution(cityData?.buildings?.length || 10, cityData?.bounds));
-    const [displayOptions] = (0, react_1.useState)({
+    const [canvasSize, setCanvasSize] = useState(() => calculateCanvasResolution(cityData?.buildings?.length || 10, cityData?.bounds));
+    const [displayOptions] = useState({
         ...DEFAULT_DISPLAY_OPTIONS,
         showGrid,
     });
-    const filteredCityData = (0, react_1.useMemo)(() => {
+    const filteredCityData = useMemo(() => {
         if (!cityData) {
             return undefined;
         }
@@ -329,23 +294,23 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             const autoCenter = subdirectoryMode.autoCenter === true;
             // Use new multi-filter function if filters are provided
             if (subdirectoryMode.filters && subdirectoryMode.filters.length > 0) {
-                processedData = (0, cityDataUtils_1.filterCityDataForMultipleDirectories)(cityData, subdirectoryMode.filters, autoCenter, subdirectoryMode.combineMode || 'union');
+                processedData = filterCityDataForMultipleDirectories(cityData, subdirectoryMode.filters, autoCenter, subdirectoryMode.combineMode || 'union');
             }
             else if (subdirectoryMode.rootPath) {
                 // Fallback to single path for backward compatibility
-                processedData = (0, cityDataUtils_1.filterCityDataForSubdirectory)(cityData, subdirectoryMode.rootPath, autoCenter);
+                processedData = filterCityDataForSubdirectory(cityData, subdirectoryMode.rootPath, autoCenter);
             }
         }
-        return (0, cityDataUtils_1.filterCityDataForSelectiveRender)(processedData, selectiveRender);
+        return filterCityDataForSelectiveRender(processedData, selectiveRender);
     }, [cityData, selectiveRender, subdirectoryMode]);
-    const canvasSizingData = (0, react_1.useMemo)(() => {
+    const canvasSizingData = useMemo(() => {
         if (subdirectoryMode?.enabled && subdirectoryMode.autoCenter !== true && cityData) {
             return cityData;
         }
         return filteredCityData;
     }, [subdirectoryMode?.enabled, subdirectoryMode?.autoCenter, cityData, filteredCityData]);
     // Handle zoomToPath changes - calculate target zoom to frame the specified path
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // Skip if programmatic zoom is not allowed or path hasn't changed
         if (!allowZoomToPath || zoomToPath === lastZoomToPathRef.current) {
             return;
@@ -435,7 +400,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         displayOptions.padding,
     ]);
     // Build hit test cache with spatial indexing
-    const buildHitTestCache = (0, react_1.useCallback)((cityData, scale, offsetX, offsetZ, zoomState, abstractedPaths) => {
+    const buildHitTestCache = useCallback((cityData, scale, offsetX, offsetZ, zoomState, abstractedPaths) => {
         const spatialGrid = new SpatialGrid(cityData.bounds);
         const pathLookup = new PathHierarchyLookup(abstractedPaths);
         // Only add visible buildings to spatial grid
@@ -474,19 +439,19 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         };
     }, []);
     // Update canvas size when city data changes
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (canvasSizingData) {
             const newSize = calculateCanvasResolution(canvasSizingData.buildings.length, canvasSizingData.bounds);
             setCanvasSize(newSize);
         }
     }, [canvasSizingData, subdirectoryMode]);
     // Separate stable and dynamic layers for performance optimization
-    const stableLayers = (0, react_1.useMemo)(() => highlightLayers.filter(layer => layer.dynamic !== true), [highlightLayers]);
-    const dynamicLayers = (0, react_1.useMemo)(() => highlightLayers.filter(layer => layer.dynamic === true), [highlightLayers]);
+    const stableLayers = useMemo(() => highlightLayers.filter(layer => layer.dynamic !== true), [highlightLayers]);
+    const dynamicLayers = useMemo(() => highlightLayers.filter(layer => layer.dynamic === true), [highlightLayers]);
     // Combine all layers for rendering (moved up so abstractionLayer can use it)
-    const allLayersWithoutAbstraction = (0, react_1.useMemo)(() => [...stableLayers, ...dynamicLayers], [stableLayers, dynamicLayers]);
+    const allLayersWithoutAbstraction = useMemo(() => [...stableLayers, ...dynamicLayers], [stableLayers, dynamicLayers]);
     // Calculate abstracted directories based on current zoom using tree structure
-    const abstractionLayer = (0, react_1.useMemo)(() => {
+    const abstractionLayer = useMemo(() => {
         // Find the abstraction layer in our highlight layers
         const abstractionLayerDef = highlightLayers.find(layer => layer.id === 'directory-abstraction' && layer.abstractionLayer);
         if (!abstractionLayerDef || !abstractionLayerDef.enabled || !filteredCityData) {
@@ -695,7 +660,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         allLayersWithoutAbstraction,
     ]);
     // Combine all layers for rendering, including calculated abstraction layer
-    const allLayers = (0, react_1.useMemo)(() => {
+    const allLayers = useMemo(() => {
         const layers = [...stableLayers, ...dynamicLayers];
         // Replace abstraction layer with calculated one if it exists
         if (abstractionLayer) {
@@ -707,9 +672,9 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         return layers;
     }, [stableLayers, dynamicLayers, abstractionLayer]);
     // Memoize layer index for O(1) path lookups - only rebuilds when layers change
-    const layerIndex = (0, react_1.useMemo)(() => new drawLayeredBuildings_1.LayerIndex(allLayers), [allLayers]);
+    const layerIndex = useMemo(() => new LayerIndex(allLayers), [allLayers]);
     // Memoize abstracted paths lookup - only recalculates when abstraction layer changes
-    const { abstractedPathsSet, abstractedPathLookup } = (0, react_1.useMemo)(() => {
+    const { abstractedPathsSet, abstractedPathLookup } = useMemo(() => {
         const pathsSet = new Set();
         const abstractionLayerDef = allLayers.find(l => l.id === 'directory-abstraction');
         if (abstractionLayerDef && abstractionLayerDef.enabled) {
@@ -725,7 +690,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         };
     }, [allLayers]);
     // Memoize visible districts - only recalculates when data or abstraction changes, NOT on hover
-    const visibleDistrictsMemo = (0, react_1.useMemo)(() => {
+    const visibleDistrictsMemo = useMemo(() => {
         if (!filteredCityData)
             return [];
         let districts = abstractedPathLookup.size > 0
@@ -759,7 +724,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         return districts;
     }, [filteredCityData, abstractedPathLookup, abstractedPathsSet]);
     // Memoize visible buildings - only recalculates when data or abstraction changes, NOT on hover
-    const visibleBuildingsMemo = (0, react_1.useMemo)(() => {
+    const visibleBuildingsMemo = useMemo(() => {
         if (!filteredCityData)
             return [];
         return abstractedPathLookup.size > 0
@@ -773,7 +738,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     // 1. The spatial grid only depends on buildings/districts and abstraction
     // 2. performHitTest calculates coordinates using the current zoomState directly
     // 3. This avoids expensive cache rebuilds during zoom animation
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!filteredCityData)
             return;
         const width = canvasRef.current?.clientWidth || canvasSize.width;
@@ -808,7 +773,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         abstractionLayer,
     ]);
     // Main canvas drawing with layer-based highlighting
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!canvasRef.current || !filteredCityData) {
             return;
         }
@@ -830,7 +795,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         ctx.fillStyle = resolvedCanvasBackgroundColor;
         ctx.fillRect(0, 0, displayWidth, displayHeight);
         if (displayOptions.showGrid) {
-            (0, drawLayeredBuildings_1.drawGrid)(ctx, displayWidth, displayHeight, displayOptions.gridSize);
+            drawGrid(ctx, displayWidth, displayHeight, displayOptions.gridSize);
         }
         const coordinateSystemData = subdirectoryMode?.enabled && subdirectoryMode.autoCenter !== true && cityData
             ? cityData
@@ -844,10 +809,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         });
         // Use memoized visible districts and buildings (pre-filtered, doesn't recalculate on hover)
         // Draw districts with layer support
-        (0, drawLayeredBuildings_1.drawLayeredDistricts)(ctx, visibleDistrictsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsSet, // Pass abstracted paths to skip labels
+        drawLayeredDistricts(ctx, visibleDistrictsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsSet, // Pass abstracted paths to skip labels
         showDirectoryLabels, districtBorderRadius, layerIndex);
         // Draw buildings with layer support
-        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius, layerIndex, // Pre-built index for O(1) lookups
+        drawLayeredBuildings(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius, layerIndex, // Pre-built index for O(1) lookups
         iconMap);
         // Performance monitoring end available for debugging
         // Performance stats available but not logged to reduce console noise
@@ -885,7 +850,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         iconMap,
     ]);
     // Optimized hit testing
-    const performHitTest = (0, react_1.useCallback)((canvasX, canvasY) => {
+    const performHitTest = useCallback((canvasX, canvasY) => {
         if (!hitTestCache || !filteredCityData) {
             return { hoveredBuilding: null, hoveredDistrict: null };
         }
@@ -953,7 +918,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     ]);
     // Mouse event handlers
     // Call onHover callback when interaction state changes
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onHover && interactionState) {
             const fileTooltip = interactionState.hoveredBuilding
                 ? {
@@ -977,7 +942,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
     }, [interactionState, onHover]);
     // Helper function to transform mouse coordinates based on rotation/flip
-    const transformMouseCoordinates = (0, react_1.useCallback)((x, y, canvasWidth, canvasHeight) => {
+    const transformMouseCoordinates = useCallback((x, y, canvasWidth, canvasHeight) => {
         const centerX = canvasWidth / 2;
         const centerY = canvasHeight / 2;
         // Translate to center
@@ -1006,7 +971,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         transformedY += centerY;
         return { x: transformedX, y: transformedY };
     }, [transform]);
-    const handleMouseMoveInternal = (0, react_1.useCallback)((e) => {
+    const handleMouseMoveInternal = useCallback((e) => {
         if (!canvasRef.current || !containerRef.current || !filteredCityData || zoomState.isDragging)
             return;
         // Throttle hover updates to improve performance with large datasets
@@ -1040,7 +1005,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             };
         });
     }, [filteredCityData, zoomState.isDragging, performHitTest, transformMouseCoordinates]);
-    const handleMouseMove = (0, react_1.useCallback)((e) => {
+    const handleMouseMove = useCallback((e) => {
         if (enableZoom && zoomState.isDragging) {
             const rawDeltaX = e.clientX - zoomState.lastMousePos.x;
             const rawDeltaY = e.clientY - zoomState.lastMousePos.y;
@@ -1099,7 +1064,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             }
         }
     };
-    const handleMouseLeave = (0, react_1.useCallback)(() => {
+    const handleMouseLeave = useCallback(() => {
         setInteractionState(prev => ({
             ...prev,
             hoveredDistrict: null,
@@ -1133,10 +1098,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             hasMouseMoved: false,
         }));
     };
-    const handleMouseUp = (0, react_1.useCallback)(() => {
+    const handleMouseUp = useCallback(() => {
         setZoomState(prev => ({ ...prev, isDragging: false }));
     }, []);
-    const interactionCursor = (0, react_1.useMemo)(() => {
+    const interactionCursor = useMemo(() => {
         if (enableZoom) {
             if (zoomState.isDragging) {
                 return 'grabbing';
@@ -1157,7 +1122,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         interactionState.hoveredDistrict,
     ]);
     if (!filteredCityData) {
-        return (react_1.default.createElement("div", { className: className, style: {
+        return (_jsxs("div", { className: className, style: {
                 width: '100%',
                 height: '100%',
                 minHeight: '250px',
@@ -1168,41 +1133,39 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 justifyContent: 'center',
                 position: 'relative',
                 overflow: 'hidden',
-            } },
-            react_1.default.createElement("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
-                    gridAutoRows: 'minmax(80px, 1fr)',
-                    gap: '20px',
-                    padding: '20px',
-                } }, Array.from({ length: 200 }).map((_, i) => (react_1.default.createElement("div", { key: i, style: {
-                    backgroundColor: resolvedDefaultBuildingColor,
-                    borderRadius: buildingBorderRadius,
-                    opacity: 0.6 + (i % 3) * 0.2,
-                } })))),
-            react_1.default.createElement("div", { style: {
-                    position: 'absolute',
-                    top: '35%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    zIndex: 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    color: theme.colors.textMuted,
-                    fontFamily: theme.fonts.body,
-                    fontSize: `${theme.fontSizes[3]}px`,
-                    fontWeight: theme.fontWeights.medium,
-                    backgroundColor: resolvedCanvasBackgroundColor,
-                    borderRadius: `${theme.radii[2]}px`,
-                    padding: `${theme.space[4]}px ${theme.space[5]}px`,
-                    textAlign: 'center',
-                    minWidth: '300px',
-                } }, "No city data available")));
+            }, children: [_jsx("div", { style: {
+                        position: 'absolute',
+                        inset: 0,
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(80px, 1fr))',
+                        gridAutoRows: 'minmax(80px, 1fr)',
+                        gap: '20px',
+                        padding: '20px',
+                    }, children: Array.from({ length: 200 }).map((_, i) => (_jsx("div", { style: {
+                            backgroundColor: resolvedDefaultBuildingColor,
+                            borderRadius: buildingBorderRadius,
+                            opacity: 0.6 + (i % 3) * 0.2,
+                        } }, i))) }), _jsx("div", { style: {
+                        position: 'absolute',
+                        top: '35%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        zIndex: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: theme.colors.textMuted,
+                        fontFamily: theme.fonts.body,
+                        fontSize: `${theme.fontSizes[3]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        backgroundColor: resolvedCanvasBackgroundColor,
+                        borderRadius: `${theme.radii[2]}px`,
+                        padding: `${theme.space[4]}px ${theme.space[5]}px`,
+                        textAlign: 'center',
+                        minWidth: '300px',
+                    }, children: "No city data available" })] }));
     }
-    return (react_1.default.createElement("div", { ref: containerRef, className: className, style: {
+    return (_jsxs("div", { ref: containerRef, className: className, style: {
             position: 'relative',
             width: '100%',
             height: '100%',
@@ -1224,65 +1187,59 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 }
                 return transforms.length > 0 ? transforms.join(' ') : undefined;
             })(),
-        } },
-        showLayerControls && highlightLayers.length > 0 && (react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                bottom: `${theme.space[4]}px`,
-                left: `${theme.space[4]}px`,
-                zIndex: 10,
-                display: 'flex',
-                flexDirection: 'column',
-                gap: `${theme.space[2]}px`,
-            } }, highlightLayers.map(layer => (react_1.default.createElement("button", { key: layer.id, onClick: () => onLayerToggle?.(layer.id, !layer.enabled), style: {
-                padding: `${theme.space[2]}px ${theme.space[3]}px`,
-                borderRadius: `${theme.radii[2]}px`,
-                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-                transition: 'all 0.2s ease',
-                display: 'flex',
-                alignItems: 'center',
-                gap: `${theme.space[2]}px`,
-                fontSize: `${theme.fontSizes[0]}px`,
-                fontWeight: theme.fontWeights.medium,
-                fontFamily: theme.fonts.body,
-                backgroundColor: layer.enabled
-                    ? theme.colors.backgroundSecondary
-                    : theme.colors.background,
-                color: layer.enabled ? theme.colors.text : theme.colors.textSecondary,
-                border: `2px solid ${layer.enabled ? layer.color : theme.colors.border}`,
-                minWidth: '120px',
-                cursor: 'pointer',
-            }, title: `Toggle ${layer.name}` },
-            react_1.default.createElement("div", { style: {
-                    width: '12px',
-                    height: '12px',
-                    borderRadius: '50%',
-                    backgroundColor: layer.color,
-                    opacity: layer.enabled ? 1 : 0.4,
-                    transition: 'opacity 0.2s ease',
-                } }),
-            react_1.default.createElement("span", { style: { textAlign: 'left', flex: 1 } }, layer.name),
-            layer.items && layer.items.length > 0 && (react_1.default.createElement("span", { style: {
-                    fontSize: `${theme.fontSizes[0]}px`,
-                    color: layer.enabled ? theme.colors.textSecondary : theme.colors.textMuted,
-                } }, layer.items.length))))))),
-        react_1.default.createElement("canvas", { ref: canvasRef, style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                objectFit: 'contain',
-                zIndex: 1,
-            } }),
-        react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                zIndex: 2,
-                cursor: interactionCursor,
-            }, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onMouseLeave: handleMouseLeave, onWheel: handleWheel })));
+        }, children: [showLayerControls && highlightLayers.length > 0 && (_jsx("div", { style: {
+                    position: 'absolute',
+                    bottom: `${theme.space[4]}px`,
+                    left: `${theme.space[4]}px`,
+                    zIndex: 10,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: `${theme.space[2]}px`,
+                }, children: highlightLayers.map(layer => (_jsxs("button", { onClick: () => onLayerToggle?.(layer.id, !layer.enabled), style: {
+                        padding: `${theme.space[2]}px ${theme.space[3]}px`,
+                        borderRadius: `${theme.radii[2]}px`,
+                        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: `${theme.space[2]}px`,
+                        fontSize: `${theme.fontSizes[0]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        fontFamily: theme.fonts.body,
+                        backgroundColor: layer.enabled
+                            ? theme.colors.backgroundSecondary
+                            : theme.colors.background,
+                        color: layer.enabled ? theme.colors.text : theme.colors.textSecondary,
+                        border: `2px solid ${layer.enabled ? layer.color : theme.colors.border}`,
+                        minWidth: '120px',
+                        cursor: 'pointer',
+                    }, title: `Toggle ${layer.name}`, children: [_jsx("div", { style: {
+                                width: '12px',
+                                height: '12px',
+                                borderRadius: '50%',
+                                backgroundColor: layer.color,
+                                opacity: layer.enabled ? 1 : 0.4,
+                                transition: 'opacity 0.2s ease',
+                            } }), _jsx("span", { style: { textAlign: 'left', flex: 1 }, children: layer.name }), layer.items && layer.items.length > 0 && (_jsx("span", { style: {
+                                fontSize: `${theme.fontSizes[0]}px`,
+                                color: layer.enabled ? theme.colors.textSecondary : theme.colors.textMuted,
+                            }, children: layer.items.length }))] }, layer.id))) })), _jsx("canvas", { ref: canvasRef, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    zIndex: 1,
+                } }), _jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 2,
+                    cursor: interactionCursor,
+                }, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onMouseLeave: handleMouseLeave, onWheel: handleWheel })] }));
 }
 function calculateScaleAndOffset(cityData, width, height, padding) {
     const cityWidth = cityData.bounds.maxX - cityData.bounds.minX;
@@ -1298,4 +1255,4 @@ function calculateScaleAndOffset(cityData, width, height, padding) {
     const offsetZ = (height - scaledCityHeight) / 2;
     return { scale, offsetX, offsetZ };
 }
-exports.ArchitectureMapHighlightLayers = ArchitectureMapHighlightLayersInner;
+export const ArchitectureMapHighlightLayers = ArchitectureMapHighlightLayersInner;