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

package/dist/components/ArchitectureMapHighlightLayers.d.ts

@@ -15,6 +15,7 @@ export interface ArchitectureMapHighlightLayersProps {
     zoomToPath?: string | null;
     onZoomComplete?: () => void;
     zoomAnimationSpeed?: number;
+    allowZoomToPath?: boolean;
     fullSize?: boolean;
     showGrid?: boolean;
     showFileNames?: boolean;
@@ -59,7 +60,7 @@ export interface ArchitectureMapHighlightLayersProps {
     buildingBorderRadius?: number;
     districtBorderRadius?: number;
 }
-declare function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers, onLayerToggle, focusDirectory, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom, zoomToPath, onZoomComplete, zoomAnimationSpeed, 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":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAQjF,OAAO,EAIL,cAAc,EAEf,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACvB,MAAM,iCAAiC,CAAC;AAWzC,MAAM,WAAW,mCAAmC;IAElD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAG9B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAG5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAGzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,gBAAgB,CAAC,EAAE;QACjB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,OAAO,CAAC,EAAE,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAA;SAAE,CAAC,CAAC;QAC/D,WAAW,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;KACxC,GAAG,IAAI,CAAC;IAGT,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;QAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QACf,eAAe,EAAE,YAAY,GAAG,IAAI,CAAC;QACrC,eAAe,EAAE,YAAY,GAAG,IAAI,CAAC;QACrC,QAAQ,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACnC,WAAW,EAAE;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QACrC,gBAAgB,EAAE;YAAE,IAAI,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC1B,KAAK,IAAI,CAAC;IAGX,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA6GD,iBAAS,mCAAmC,CAAC,EAC3C,QAAQ,EACR,eAAoB,EACpB,aAAa,EACb,cAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,UAAkB,EAClB,UAAiB,EACjB,cAAc,EACd,kBAAyB,EACzB,QAAgB,EAChB,QAAgB,EAChB,aAAqB,EACrB,SAAc,EACd,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,qBAA4B,EAC5B,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAyB,EACzB,iBAAwB,EACxB,mBAA0B,EAC1B,SAA2B,EAAE,yBAAyB;AACtD,OAAO,EACP,oBAAwB,EACxB,oBAAwB,GACzB,EAAE,mCAAmC,qBAk5CrC;AA0BD,eAAO,MAAM,8BAA8B,4CAAsC,CAAC"}
+{"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, zoomToPath = null, onZoomComplete, zoomAnimationSpeed = 0.12, 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
@@ -142,21 +202,34 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     });
     // 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]);
+    }, [enableZoom, allowZoomToPath]);
     // Animation loop for smooth zoom transitions
     (0, react_1.useEffect)(() => {
         if (!targetZoom)
@@ -194,6 +267,34 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         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);
+        }
+    }, [isAnimating, targetZoom, zoomState.scale]);
     const [hitTestCache, setHitTestCache] = (0, react_1.useState)(null);
     const calculateCanvasResolution = (fileCount, _cityBounds) => {
         const minSize = 400;
@@ -232,8 +333,8 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     }, [subdirectoryMode?.enabled, subdirectoryMode?.autoCenter, cityData, filteredCityData]);
     // Handle zoomToPath changes - calculate target zoom to frame the specified path
     (0, react_1.useEffect)(() => {
-        // Skip if zoom is not enabled or path hasn't changed
-        if (!enableZoom || zoomToPath === lastZoomToPathRef.current) {
+        // Skip if programmatic zoom is not allowed or path hasn't changed
+        if (!allowZoomToPath || zoomToPath === lastZoomToPathRef.current) {
             return;
         }
         lastZoomToPathRef.current = zoomToPath;
@@ -314,7 +415,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         });
     }, [
         zoomToPath,
-        enableZoom,
+        allowZoomToPath,
         filteredCityData,
         canvasSizingData,
         canvasSize,
@@ -323,19 +424,11 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     // 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);
             }
         });
@@ -348,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);
             }
         });
@@ -370,6 +456,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 zoomOffsetY: zoomState.offsetY,
             },
             abstractedPaths,
+            pathLookup,
             timestamp: Date.now(),
         };
     }, []);
@@ -394,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
@@ -407,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 => {
@@ -587,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,
@@ -605,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;
@@ -620,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,
     ]);
@@ -670,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
@@ -711,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ArchitectureMapHighlightLayers.tsx

@@ -50,6 +50,7 @@ export interface ArchitectureMapHighlightLayersProps {
   zoomToPath?: string | null; // When set, animates zoom to frame this directory/file
   onZoomComplete?: () => void; // Called when zoom animation completes
   zoomAnimationSpeed?: number; // Animation easing factor (0-1), default 0.12
+  allowZoomToPath?: boolean; // Allow programmatic zoomToPath even when enableZoom is false (default: true)
 
   // Display options
   fullSize?: boolean;
@@ -195,6 +196,78 @@ class SpatialGrid {
   }
 }
 
+/**
+ * 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 {
+  private abstractedPaths: Set<string>;
+
+  constructor(paths: Set<string> | string[]) {
+    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: string): boolean {
+    // 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: string): boolean {
+    return this.abstractedPaths.has(path);
+  }
+
+  /**
+   * Check if the path is a child (not itself) of any abstracted directory.
+   */
+  isChildOfAbstracted(path: string): boolean {
+    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(): number {
+    return this.abstractedPaths.size;
+  }
+
+  has(path: string): boolean {
+    return this.abstractedPaths.has(path);
+  }
+}
+
 interface HitTestCache {
   spatialGrid: SpatialGrid;
   transformParams: {
@@ -206,6 +279,7 @@ interface HitTestCache {
     zoomOffsetY: number;
   };
   abstractedPaths: Set<string>;
+  pathLookup: PathHierarchyLookup;
   timestamp: number;
 }
 
@@ -221,6 +295,7 @@ function ArchitectureMapHighlightLayersInner({
   zoomToPath = null,
   onZoomComplete,
   zoomAnimationSpeed = 0.12,
+  allowZoomToPath = true,
   fullSize = false,
   showGrid = false,
   showFileNames = false,
@@ -272,22 +347,37 @@ function ArchitectureMapHighlightLayersInner({
     offsetY: number;
   } | null>(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] = useState(1);
+  const stableZoomTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Track if we're currently animating
+  const isAnimating = targetZoom !== null;
+
   // Track the last zoomToPath to detect changes
   const lastZoomToPathRef = useRef<string | null>(null);
 
   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]);
+  }, [enableZoom, allowZoomToPath]);
 
   // Animation loop for smooth zoom transitions
   useEffect(() => {
@@ -332,6 +422,39 @@ function ArchitectureMapHighlightLayersInner({
     return () => cancelAnimationFrame(frameId);
   }, [targetZoom, zoomState, zoomAnimationSpeed, onZoomComplete]);
 
+  // Update stable zoom scale with debouncing
+  // This ensures expensive calculations only run when zoom stabilizes
+  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
+  useEffect(() => {
+    if (!isAnimating && targetZoom === null) {
+      // Animation just completed, update stable zoom immediately
+      setStableZoomScale(zoomState.scale);
+    }
+  }, [isAnimating, targetZoom, zoomState.scale]);
+
   const [hitTestCache, setHitTestCache] = useState<HitTestCache | null>(null);
 
   const calculateCanvasResolution = (
@@ -393,8 +516,8 @@ function ArchitectureMapHighlightLayersInner({
 
   // Handle zoomToPath changes - calculate target zoom to frame the specified path
   useEffect(() => {
-    // Skip if zoom is not enabled or path hasn't changed
-    if (!enableZoom || zoomToPath === lastZoomToPathRef.current) {
+    // Skip if programmatic zoom is not allowed or path hasn't changed
+    if (!allowZoomToPath || zoomToPath === lastZoomToPathRef.current) {
       return;
     }
 
@@ -498,7 +621,7 @@ function ArchitectureMapHighlightLayersInner({
     });
   }, [
     zoomToPath,
-    enableZoom,
+    allowZoomToPath,
     filteredCityData,
     canvasSizingData,
     canvasSize,
@@ -523,21 +646,12 @@ function ArchitectureMapHighlightLayersInner({
       abstractedPaths: Set<string>,
     ): HitTestCache => {
       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);
         }
       });
@@ -552,15 +666,7 @@ function ArchitectureMapHighlightLayersInner({
         // 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);
         }
       });
@@ -576,6 +682,7 @@ function ArchitectureMapHighlightLayersInner({
           zoomOffsetY: zoomState.offsetY,
         },
         abstractedPaths,
+        pathLookup,
         timestamp: Date.now(),
       };
     },
@@ -651,8 +758,9 @@ function ArchitectureMapHighlightLayersInner({
     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
     }
 
@@ -675,7 +783,8 @@ function ArchitectureMapHighlightLayersInner({
         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<string>();
@@ -873,7 +982,7 @@ function ArchitectureMapHighlightLayersInner({
     filteredCityData,
     canvasSize,
     displayOptions.padding,
-    zoomState.scale,
+    stableZoomScale, // Use stable zoom scale instead of live zoomState.scale
     subdirectoryMode,
     cityData,
     allLayersWithoutAbstraction,
@@ -895,6 +1004,10 @@ function ArchitectureMapHighlightLayersInner({
   }, [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
   useEffect(() => {
     if (!filteredCityData) return;
 
@@ -917,12 +1030,22 @@ function ArchitectureMapHighlightLayersInner({
       });
     }
 
+    // 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,
-      zoomState,
+      stableZoomState,
       abstractedPaths,
     );
     setHitTestCache(newCache);
@@ -930,7 +1053,7 @@ function ArchitectureMapHighlightLayersInner({
     filteredCityData,
     canvasSize,
     displayOptions.padding,
-    zoomState,
+    stableZoomScale, // Only rebuild when zoom stabilizes
     buildHitTestCache,
     abstractionLayer,
   ]);
@@ -994,12 +1117,15 @@ function ArchitectureMapHighlightLayersInner({
       });
     }
 
+    // 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
+      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 === '';
             }
@@ -1007,18 +1133,12 @@ function ArchitectureMapHighlightLayersInner({
             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;
 
@@ -1055,67 +1175,16 @@ function ArchitectureMapHighlightLayersInner({
       districtBorderRadius,
     );
 
-    // Get abstracted directory paths for filtering from the actual layers being rendered
-    const abstractedPaths = new Set<string>();
-    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
+    // Reuse the pathLookup created earlier for O(depth) containment checks
     const visibleBuildings =
-      abstractedPaths.size > 0
+      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
     drawLayeredBuildings(
       ctx,

package/src/stories/ArchitectureMapHighlightLayers.stories.tsx

@@ -311,6 +311,166 @@ export const WithBorderRadius: Story = {
   },
 };
 
+// Story with programmatic zoom only (no user interaction)
+// Demonstrates allowZoomToPath={true} with enableZoom={false}
+export const ProgrammaticZoomOnly: Story = {
+  render: function RenderProgrammaticZoomOnly() {
+    const [zoomToPath, setZoomToPath] = useState<string | null>(null);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const cityData = createSampleCityData();
+
+    // Get unique top-level directories for navigation buttons
+    const topLevelDirs = Array.from(
+      new Set(
+        cityData.districts
+          .map(d => d.path.split('/')[0])
+          .filter(Boolean),
+      ),
+    ).sort();
+
+    const handleZoomTo = (path: string | null) => {
+      setIsAnimating(true);
+      setZoomToPath(path);
+    };
+
+    const handleZoomComplete = () => {
+      setIsAnimating(false);
+    };
+
+    // Create highlight layer for the focused directory
+    const highlightLayers: HighlightLayer[] = zoomToPath
+      ? [
+          {
+            id: 'zoom-focus',
+            name: 'Zoom Focus',
+            enabled: true,
+            color: '#10b981',
+            priority: 1,
+            items: [{ path: zoomToPath, type: 'directory' }],
+          },
+        ]
+      : [];
+
+    return (
+      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        <ArchitectureMapHighlightLayers
+          cityData={cityData}
+          fullSize={true}
+          enableZoom={false} // User interactions disabled
+          allowZoomToPath={true} // But programmatic zoom works (this is the default)
+          zoomToPath={zoomToPath}
+          onZoomComplete={handleZoomComplete}
+          zoomAnimationSpeed={0.1}
+          highlightLayers={highlightLayers}
+        />
+        {/* Navigation Controls */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            zIndex: 100,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            padding: '16px',
+            borderRadius: '8px',
+            maxWidth: '220px',
+          }}
+        >
+          <div
+            style={{
+              color: '#10b981',
+              fontFamily: 'monospace',
+              fontSize: '12px',
+              fontWeight: 'bold',
+              marginBottom: '4px',
+            }}
+          >
+            Programmatic Zoom Only
+          </div>
+          <div
+            style={{
+              color: '#9ca3af',
+              fontFamily: 'monospace',
+              fontSize: '10px',
+              marginBottom: '8px',
+            }}
+          >
+            enableZoom=false, allowZoomToPath=true
+            <br />
+            (Try scroll/drag - they won't work)
+          </div>
+
+          {/* Reset button */}
+          <button
+            onClick={() => handleZoomTo(null)}
+            disabled={isAnimating}
+            style={{
+              padding: '8px 12px',
+              backgroundColor: zoomToPath === null ? '#10b981' : '#374151',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: isAnimating ? 'not-allowed' : 'pointer',
+              fontFamily: 'monospace',
+              fontSize: '12px',
+              opacity: isAnimating ? 0.6 : 1,
+            }}
+          >
+            Reset View
+          </button>
+
+          {/* Directory buttons */}
+          {topLevelDirs.map(dir => (
+            <button
+              key={dir}
+              onClick={() => handleZoomTo(dir)}
+              disabled={isAnimating}
+              style={{
+                padding: '8px 12px',
+                backgroundColor: zoomToPath === dir ? '#10b981' : '#374151',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: isAnimating ? 'not-allowed' : 'pointer',
+                fontFamily: 'monospace',
+                fontSize: '12px',
+                textAlign: 'left',
+                opacity: isAnimating ? 0.6 : 1,
+              }}
+            >
+              {dir}
+            </button>
+          ))}
+        </div>
+
+        {/* Status info */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 20,
+            left: 20,
+            zIndex: 100,
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            padding: '12px',
+            borderRadius: '8px',
+            color: 'white',
+            fontFamily: 'monospace',
+            fontSize: '11px',
+          }}
+        >
+          <div>Zoomed to: {zoomToPath || '(root)'}</div>
+          <div style={{ color: '#9ca3af', marginTop: '4px' }}>
+            {isAnimating ? 'Animating...' : 'Use buttons to navigate'}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
 // Story with animated zoom to directory
 export const AnimatedZoomToDirectory: Story = {
   render: function RenderAnimatedZoom() {