@principal-ai/file-city-react 0.3.0 → 0.4.1

package/dist/components/ArchitectureMapHighlightLayers.d.ts

@@ -12,6 +12,10 @@ export interface ArchitectureMapHighlightLayersProps {
     onDirectorySelect?: (directory: string | null) => void;
     onFileClick?: (path: string, type: 'file' | 'directory') => void;
     enableZoom?: boolean;
+    zoomToPath?: string | null;
+    onZoomComplete?: () => void;
+    zoomAnimationSpeed?: number;
+    allowZoomToPath?: boolean;
     fullSize?: boolean;
     showGrid?: boolean;
     showFileNames?: boolean;
@@ -56,7 +60,7 @@ export interface ArchitectureMapHighlightLayersProps {
     buildingBorderRadius?: number;
     districtBorderRadius?: number;
 }
-declare function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers, onLayerToggle, focusDirectory, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom, fullSize, showGrid, showFileNames, className, selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls, showFileTypeIcons, showDirectoryLabels, transform, // Default to no rotation
+declare function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers, onLayerToggle, focusDirectory, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom, zoomToPath, onZoomComplete, zoomAnimationSpeed, allowZoomToPath, fullSize, showGrid, showFileNames, className, selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls, showFileTypeIcons, showDirectoryLabels, transform, // Default to no rotation
 onHover, buildingBorderRadius, districtBorderRadius, }: ArchitectureMapHighlightLayersProps): React.JSX.Element;
 export declare const ArchitectureMapHighlightLayers: typeof ArchitectureMapHighlightLayersInner;
 export {};

package/dist/components/ArchitectureMapHighlightLayers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ArchitectureMapHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/components/ArchitectureMapHighlightLayers.tsx"],"names":[],"mappings":"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"}

package/dist/components/ArchitectureMapHighlightLayers.js

@@ -117,7 +117,67 @@ class SpatialGrid {
         this.grid.clear();
     }
 }
-function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers = [], onLayerToggle, focusDirectory = null, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom = false, fullSize = false, showGrid = false, showFileNames = false, className = '', selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming = true, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls = false, showFileTypeIcons = true, showDirectoryLabels = true, transform = { rotation: 0 }, // Default to no rotation
+/**
+ * Hierarchical path lookup for O(depth) containment checks instead of O(A) iteration.
+ * Given a set of abstracted paths, efficiently checks if a path is contained within any of them.
+ */
+class PathHierarchyLookup {
+    constructor(paths) {
+        this.abstractedPaths = paths instanceof Set ? paths : new Set(paths);
+    }
+    /**
+     * Check if the given path is inside any abstracted directory.
+     * Walks up the path hierarchy checking each ancestor.
+     * Complexity: O(depth) where depth is the path depth, instead of O(A) for each abstracted path.
+     */
+    isPathAbstracted(path) {
+        // Check for root abstraction
+        if (this.abstractedPaths.has('')) {
+            return true;
+        }
+        // Walk up the path hierarchy
+        let currentPath = path;
+        while (currentPath.includes('/')) {
+            currentPath = currentPath.substring(0, currentPath.lastIndexOf('/'));
+            if (this.abstractedPaths.has(currentPath)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Check if the path is a direct child of an abstracted directory
+     * (the path itself is abstracted, not just its ancestors).
+     */
+    isDirectlyAbstracted(path) {
+        return this.abstractedPaths.has(path);
+    }
+    /**
+     * Check if the path is a child (not itself) of any abstracted directory.
+     */
+    isChildOfAbstracted(path) {
+        if (!path)
+            return false;
+        // Check for root abstraction first
+        if (this.abstractedPaths.has('')) {
+            return true;
+        }
+        // Check each abstracted path to see if this path starts with it
+        for (const abstractedPath of this.abstractedPaths) {
+            if (abstractedPath && path.startsWith(abstractedPath + '/')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    get size() {
+        return this.abstractedPaths.size;
+    }
+    has(path) {
+        return this.abstractedPaths.has(path);
+    }
+}
+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, 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)();
     // Use theme colors as defaults, with prop overrides
@@ -140,18 +200,101 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         lastMousePos: { x: 0, y: 0 },
         hasMouseMoved: false,
     });
+    // Target zoom state for animated transitions
+    const [targetZoom, setTargetZoom] = (0, react_1.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);
+    // Track if we're currently animating
+    const isAnimating = targetZoom !== null;
+    // Track the last zoomToPath to detect changes
+    const lastZoomToPathRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        // Reset user interaction state when enableZoom is disabled
         if (!enableZoom) {
+            setZoomState(prev => ({
+                ...prev,
+                isDragging: false,
+                hasMouseMoved: false,
+            }));
+        }
+        // Only reset zoom position when both user zoom AND programmatic zoom are disabled
+        if (!enableZoom && !allowZoomToPath) {
             setZoomState(prev => ({
                 ...prev,
                 scale: 1,
                 offsetX: 0,
                 offsetY: 0,
-                isDragging: false,
-                hasMouseMoved: false,
             }));
+            setTargetZoom(null);
+        }
+    }, [enableZoom, allowZoomToPath]);
+    // Animation loop for smooth zoom transitions
+    (0, react_1.useEffect)(() => {
+        if (!targetZoom)
+            return;
+        const animate = () => {
+            setZoomState(prev => {
+                const lerp = (a, b, t) => a + (b - a) * t;
+                const easing = zoomAnimationSpeed;
+                const newScale = lerp(prev.scale, targetZoom.scale, easing);
+                const newOffsetX = lerp(prev.offsetX, targetZoom.offsetX, easing);
+                const newOffsetY = lerp(prev.offsetY, targetZoom.offsetY, easing);
+                // Check if close enough to target (within 0.1% for scale, 0.5px for offset)
+                const scaleDone = Math.abs(newScale - targetZoom.scale) < 0.001;
+                const offsetXDone = Math.abs(newOffsetX - targetZoom.offsetX) < 0.5;
+                const offsetYDone = Math.abs(newOffsetY - targetZoom.offsetY) < 0.5;
+                if (scaleDone && offsetXDone && offsetYDone) {
+                    // Animation complete - set exact target values
+                    setTargetZoom(null);
+                    onZoomComplete?.();
+                    return {
+                        ...prev,
+                        scale: targetZoom.scale,
+                        offsetX: targetZoom.offsetX,
+                        offsetY: targetZoom.offsetY,
+                    };
+                }
+                return {
+                    ...prev,
+                    scale: newScale,
+                    offsetX: newOffsetX,
+                    offsetY: newOffsetY,
+                };
+            });
+        };
+        const frameId = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(frameId);
+    }, [targetZoom, zoomState, zoomAnimationSpeed, onZoomComplete]);
+    // Update stable zoom scale with debouncing
+    // This ensures expensive calculations only run when zoom stabilizes
+    (0, react_1.useEffect)(() => {
+        // Clear any pending timeout
+        if (stableZoomTimeoutRef.current) {
+            clearTimeout(stableZoomTimeoutRef.current);
+        }
+        // If animating, wait for animation to complete
+        if (isAnimating) {
+            return;
+        }
+        // Debounce the stable zoom update (100ms after last zoom change)
+        stableZoomTimeoutRef.current = setTimeout(() => {
+            setStableZoomScale(zoomState.scale);
+        }, 100);
+        return () => {
+            if (stableZoomTimeoutRef.current) {
+                clearTimeout(stableZoomTimeoutRef.current);
+            }
+        };
+    }, [zoomState.scale, isAnimating]);
+    // Immediately update stable zoom when animation completes
+    (0, react_1.useEffect)(() => {
+        if (!isAnimating && targetZoom === null) {
+            // Animation just completed, update stable zoom immediately
+            setStableZoomScale(zoomState.scale);
         }
-    }, [enableZoom]);
+    }, [isAnimating, targetZoom, zoomState.scale]);
     const [hitTestCache, setHitTestCache] = (0, react_1.useState)(null);
     const calculateCanvasResolution = (fileCount, _cityBounds) => {
         const minSize = 400;
@@ -188,22 +331,104 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
         return filteredCityData;
     }, [subdirectoryMode?.enabled, subdirectoryMode?.autoCenter, cityData, filteredCityData]);
+    // Handle zoomToPath changes - calculate target zoom to frame the specified path
+    (0, react_1.useEffect)(() => {
+        // Skip if programmatic zoom is not allowed or path hasn't changed
+        if (!allowZoomToPath || zoomToPath === lastZoomToPathRef.current) {
+            return;
+        }
+        lastZoomToPathRef.current = zoomToPath;
+        // If zoomToPath is null, reset to default view
+        if (zoomToPath === null) {
+            setTargetZoom({
+                scale: 1,
+                offsetX: 0,
+                offsetY: 0,
+            });
+            return;
+        }
+        // Need city data and canvas ref to calculate zoom
+        if (!filteredCityData || !canvasRef.current) {
+            return;
+        }
+        // Get actual display size - the canvas is resized to match this during render
+        // so canvas coordinates = display coordinates
+        const displayWidth = canvasRef.current.clientWidth || canvasSize.width;
+        const displayHeight = canvasRef.current.clientHeight || canvasSize.height;
+        if (!displayWidth || !displayHeight) {
+            return;
+        }
+        // Find the target - first check districts, then buildings
+        const normalizedPath = zoomToPath.replace(/^\/+|\/+$/g, '');
+        const targetDistrict = filteredCityData.districts.find(d => d.path === normalizedPath || d.path === zoomToPath);
+        const targetBuilding = filteredCityData.buildings.find(b => b.path === normalizedPath || b.path === zoomToPath);
+        if (!targetDistrict && !targetBuilding) {
+            return;
+        }
+        // Get the bounds to zoom to
+        let targetBounds;
+        if (targetDistrict) {
+            targetBounds = targetDistrict.worldBounds;
+        }
+        else if (targetBuilding) {
+            // Create bounds around the building with some padding
+            const [width, , depth] = targetBuilding.dimensions;
+            const padding = Math.max(width, depth) * 2;
+            targetBounds = {
+                minX: targetBuilding.position.x - width / 2 - padding,
+                maxX: targetBuilding.position.x + width / 2 + padding,
+                minZ: targetBuilding.position.z - depth / 2 - padding,
+                maxZ: targetBuilding.position.z + depth / 2 + padding,
+            };
+        }
+        else {
+            return;
+        }
+        // Use the same coordinate system as rendering
+        const coordinateData = canvasSizingData || filteredCityData;
+        const { scale: baseScale, offsetX: baseOffsetX, offsetZ: baseOffsetZ } = calculateScaleAndOffset(coordinateData, displayWidth, displayHeight, displayOptions.padding);
+        // Calculate target center in world coordinates
+        const targetCenterX = (targetBounds.minX + targetBounds.maxX) / 2;
+        const targetCenterZ = (targetBounds.minZ + targetBounds.maxZ) / 2;
+        // Calculate target size in screen coordinates (at base zoom)
+        const targetScreenWidth = (targetBounds.maxX - targetBounds.minX) * baseScale;
+        const targetScreenHeight = (targetBounds.maxZ - targetBounds.minZ) * baseScale;
+        // Calculate zoom scale to fit target with padding (80% of display)
+        const paddingFactor = 0.8;
+        const scaleToFitWidth = (displayWidth * paddingFactor) / targetScreenWidth;
+        const scaleToFitHeight = (displayHeight * paddingFactor) / targetScreenHeight;
+        const newZoomScale = Math.min(scaleToFitWidth, scaleToFitHeight, 5); // Cap at 5x
+        // Calculate the base screen position of target center (before zoom transform)
+        // This matches the worldToCanvas formula: ((x - bounds.minX) * scale + offsetX)
+        const baseScreenX = (targetCenterX - coordinateData.bounds.minX) * baseScale + baseOffsetX;
+        const baseScreenY = (targetCenterZ - coordinateData.bounds.minZ) * baseScale + baseOffsetZ;
+        // Calculate offset to center the target
+        // Full formula: screenPos = baseScreenPos * zoomScale + zoomOffset
+        // To center: displayCenter = baseScreen * zoomScale + zoomOffset
+        // Therefore: zoomOffset = displayCenter - baseScreen * zoomScale
+        const newOffsetX = displayWidth / 2 - baseScreenX * newZoomScale;
+        const newOffsetY = displayHeight / 2 - baseScreenY * newZoomScale;
+        setTargetZoom({
+            scale: newZoomScale,
+            offsetX: newOffsetX,
+            offsetY: newOffsetY,
+        });
+    }, [
+        zoomToPath,
+        allowZoomToPath,
+        filteredCityData,
+        canvasSizingData,
+        canvasSize,
+        displayOptions.padding,
+    ]);
     // Build hit test cache with spatial indexing
     const buildHitTestCache = (0, react_1.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
+        // Use PathHierarchyLookup for O(depth) checks instead of O(A) iteration
         cityData.buildings.forEach(building => {
-            // Check if this building is inside any abstracted directory
-            let currentPath = building.path;
-            let isAbstracted = false;
-            while (currentPath.includes('/')) {
-                currentPath = currentPath.substring(0, currentPath.lastIndexOf('/'));
-                if (abstractedPaths.has(currentPath)) {
-                    isAbstracted = true;
-                    break;
-                }
-            }
-            if (!isAbstracted) {
+            if (!pathLookup.isPathAbstracted(building.path)) {
                 spatialGrid.addBuilding(building);
             }
         });
@@ -216,14 +441,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
             // For hit testing, we need to include abstracted districts too
             // because they have visual covers that users can click on.
             // Only skip children of abstracted directories.
-            let isChildOfAbstracted = false;
-            for (const abstractedPath of abstractedPaths) {
-                if (abstractedPath && district.path.startsWith(abstractedPath + '/')) {
-                    isChildOfAbstracted = true;
-                    break;
-                }
-            }
-            if (!isChildOfAbstracted) {
+            if (!pathLookup.isChildOfAbstracted(district.path)) {
                 spatialGrid.addDistrict(district);
             }
         });
@@ -238,6 +456,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 zoomOffsetY: zoomState.offsetY,
             },
             abstractedPaths,
+            pathLookup,
             timestamp: Date.now(),
         };
     }, []);
@@ -262,8 +481,9 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
         const config = abstractionLayerDef.abstractionConfig;
         // Disable abstraction when zoomed in beyond a certain threshold
+        // Use stableZoomScale to avoid recalculating during animation
         const maxZoomForAbstraction = config?.maxZoomLevel ?? 5.0;
-        if (zoomState.scale > maxZoomForAbstraction) {
+        if (stableZoomScale > maxZoomForAbstraction) {
             return null; // No abstractions when zoomed in
         }
         // Calculate which directories are too small at current zoom
@@ -275,7 +495,8 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 ? cityData
                 : filteredCityData;
             const { scale } = calculateScaleAndOffset(coordinateSystemData, displayWidth, displayHeight, displayOptions.padding);
-            const totalScale = scale * zoomState.scale;
+            // Use stableZoomScale for abstraction calculation to avoid recalculating during animation
+            const totalScale = scale * stableZoomScale;
             // Get all highlighted paths from enabled layers
             const highlightedPaths = new Set();
             allLayersWithoutAbstraction.forEach(layer => {
@@ -455,7 +676,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         filteredCityData,
         canvasSize,
         displayOptions.padding,
-        zoomState.scale,
+        stableZoomScale, // Use stable zoom scale instead of live zoomState.scale
         subdirectoryMode,
         cityData,
         allLayersWithoutAbstraction,
@@ -473,6 +694,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         return layers;
     }, [stableLayers, dynamicLayers, abstractionLayer]);
     // Update hit test cache when geometry or abstraction changes
+    // Note: We don't depend on zoomState here because:
+    // 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)(() => {
         if (!filteredCityData)
             return;
@@ -488,13 +713,22 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 }
             });
         }
-        const newCache = buildHitTestCache(filteredCityData, scale, offsetX, offsetZ, zoomState, abstractedPaths);
+        // Pass a stable zoom state for cache metadata (not used for coordinate calculations)
+        const stableZoomState = {
+            scale: stableZoomScale,
+            offsetX: 0,
+            offsetY: 0,
+            isDragging: false,
+            lastMousePos: { x: 0, y: 0 },
+            hasMouseMoved: false,
+        };
+        const newCache = buildHitTestCache(filteredCityData, scale, offsetX, offsetZ, stableZoomState, abstractedPaths);
         setHitTestCache(newCache);
     }, [
         filteredCityData,
         canvasSize,
         displayOptions.padding,
-        zoomState,
+        stableZoomScale, // Only rebuild when zoom stabilizes
         buildHitTestCache,
         abstractionLayer,
     ]);
@@ -538,27 +772,24 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 }
             });
         }
+        // Create PathHierarchyLookup for O(depth) containment checks
+        const pathLookup = new PathHierarchyLookup(abstractedPathsForDistricts);
         // Keep abstracted districts (for covers) but filter out their children
-        let visibleDistricts = abstractedPathsForDistricts.size > 0
+        let visibleDistricts = pathLookup.size > 0
             ? filteredCityData.districts.filter(district => {
                 // Check for root abstraction first
-                if (abstractedPathsForDistricts.has('')) {
+                if (pathLookup.has('')) {
                     // If root is abstracted, only show root district
                     return !district.path || district.path === '';
                 }
                 if (!district.path)
                     return true; // Keep root
                 // Keep the abstracted district itself (we need it for the cover)
-                if (abstractedPathsForDistricts.has(district.path)) {
+                if (pathLookup.has(district.path)) {
                     return true;
                 }
-                // Filter out children of abstracted directories
-                for (const abstractedPath of abstractedPathsForDistricts) {
-                    if (district.path.startsWith(abstractedPath + '/')) {
-                        return false; // Skip child of abstracted directory
-                    }
-                }
-                return true;
+                // Filter out children of abstracted directories using O(depth) lookup
+                return !pathLookup.isChildOfAbstracted(district.path);
             })
             : filteredCityData.districts;
         // If root is abstracted and there's no root district, create one for the cover
@@ -579,57 +810,14 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         // Draw districts with layer support
         (0, drawLayeredBuildings_1.drawLayeredDistricts)(ctx, visibleDistricts, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsForDistricts, // Pass abstracted paths to skip labels
         showDirectoryLabels, districtBorderRadius);
-        // Get abstracted directory paths for filtering from the actual layers being rendered
-        const abstractedPaths = new Set();
-        const activeAbstractionLayer = allLayers.find(l => l.id === 'directory-abstraction');
-        if (activeAbstractionLayer && activeAbstractionLayer.enabled) {
-            activeAbstractionLayer.items.forEach(item => {
-                if (item.type === 'directory') {
-                    abstractedPaths.add(item.path);
-                }
-            });
-        }
         // Filter out buildings that are in abstracted directories
-        const visibleBuildings = abstractedPaths.size > 0
+        // Reuse the pathLookup created earlier for O(depth) containment checks
+        const visibleBuildings = pathLookup.size > 0
             ? filteredCityData.buildings.filter(building => {
-                // Check for root abstraction first
-                if (abstractedPaths.has('')) {
-                    // If root is abstracted, hide all buildings
-                    return false;
-                }
-                const buildingDir = building.path.substring(0, building.path.lastIndexOf('/')) || '';
-                // Simple direct check first
-                for (const abstractedPath of abstractedPaths) {
-                    if (buildingDir === abstractedPath) {
-                        return false;
-                    }
-                    // Also check if building is in a subdirectory of abstracted path
-                    if (buildingDir.startsWith(abstractedPath + '/')) {
-                        return false;
-                    }
-                }
-                return true;
+                // Use PathHierarchyLookup for efficient O(depth) check
+                return !pathLookup.isPathAbstracted(building.path);
             })
             : filteredCityData.buildings;
-        // Log only if we see buildings that should have been filtered
-        if (abstractedPaths.size > 0) {
-            const suspiciousBuildings = visibleBuildings.filter(building => {
-                const buildingDir = building.path.substring(0, building.path.lastIndexOf('/')) || '';
-                // Check if this building's parent is visually covered
-                for (const abstractedPath of abstractedPaths) {
-                    if (buildingDir === abstractedPath || buildingDir.startsWith(abstractedPath + '/')) {
-                        return true;
-                    }
-                }
-                return false;
-            });
-            if (suspiciousBuildings.length > 0) {
-                console.error(`[Building Filter] WARNING: ${suspiciousBuildings.length} buildings are being rendered in abstracted directories!`);
-                suspiciousBuildings.slice(0, 3).forEach(building => {
-                    console.error(`  - ${building.path}`);
-                });
-            }
-        }
         // Draw buildings with layer support
         (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildings, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius);
         // Performance monitoring end available for debugging

package/dist/stories/sample-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sample-data.d.ts","sourceRoot":"","sources":["../../src/stories/sample-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA8B,MAAM,iCAAiC,CAAC;AAGvF,wBAAgB,oBAAoB,IAAI,QAAQ,CAmP/C;AAGD,wBAAgB,yBAAyB,IAAI,QAAQ,CAmDpD"}
+{"version":3,"file":"sample-data.d.ts","sourceRoot":"","sources":["../../src/stories/sample-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AAqFzC,wBAAgB,oBAAoB,IAAI,QAAQ,CAmB/C;AAaD,wBAAgB,yBAAyB,IAAI,QAAQ,CAmBpD"}