@principal-ai/file-city-react 0.4.2 → 0.4.4

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;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,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;AAsLD,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,eAAsB,EACtB,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,qBA65CrC;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

@@ -696,6 +696,8 @@ 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]);
     // Memoize abstracted paths lookup - only recalculates when abstraction layer changes
     const { abstractedPathsSet, abstractedPathLookup } = (0, react_1.useMemo)(() => {
         const pathsSet = new Set();
@@ -828,9 +830,9 @@ 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
-        showDirectoryLabels, districtBorderRadius);
+        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);
+        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius, layerIndex);
         // Performance monitoring end available for debugging
         // Performance stats available but not logged to reduce console noise
         // Uncomment for debugging: render time, buildings/districts counts, layer counts
@@ -863,6 +865,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         visibleDistrictsMemo,
         visibleBuildingsMemo,
         abstractedPathsSet,
+        layerIndex,
     ]);
     // Optimized hit testing
     const performHitTest = (0, react_1.useCallback)((canvasX, canvasY) => {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ArchitectureMapHighlightLayers, type ArchitectureMapHighlightLayersProps, } from './components/ArchitectureMapHighlightLayers';
-export { type LayerRenderStrategy, type LayerItem, type HighlightLayer, } from './render/client/drawLayeredBuildings';
+export { type LayerRenderStrategy, type LayerItem, type HighlightLayer, LayerIndex, } from './render/client/drawLayeredBuildings';
 export { type MapInteractionState, type MapDisplayOptions } from './types/react-types';
 export { filterCityDataForSelectiveRender, filterCityDataForSubdirectory, filterCityDataForMultipleDirectories, } from './builder/cityDataUtils';
 export { createFileColorHighlightLayers, getDefaultFileColorConfig, getFileColorMapping, } from './utils/fileColorHighlightLayers';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,8BAA8B,EAC9B,KAAK,mCAAmC,GACzC,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,cAAc,GACpB,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EACL,gCAAgC,EAChC,6BAA6B,EAC7B,oCAAoC,GACrC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,8BAA8B,EAC9B,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,QAAQ,EACR,UAAU,GACX,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG7F,YAAY,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,8BAA8B,EAC9B,KAAK,mCAAmC,GACzC,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,UAAU,GACX,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EACL,gCAAgC,EAChC,6BAA6B,EAC7B,oCAAoC,GACrC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,8BAA8B,EAC9B,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,kCAAkC,CAAC;AAG1C,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,QAAQ,EACR,UAAU,GACX,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG7F,YAAY,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/index.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = exports.CityViewWithReactFlow = exports.useCodeCityData = exports.MultiVersionCityBuilder = exports.getFileColorMapping = exports.getDefaultFileColorConfig = exports.createFileColorHighlightLayers = exports.filterCityDataForMultipleDirectories = exports.filterCityDataForSubdirectory = exports.filterCityDataForSelectiveRender = exports.ArchitectureMapHighlightLayers = void 0;
+exports.useTheme = exports.ThemeProvider = exports.CityViewWithReactFlow = exports.useCodeCityData = exports.MultiVersionCityBuilder = exports.getFileColorMapping = exports.getDefaultFileColorConfig = exports.createFileColorHighlightLayers = exports.filterCityDataForMultipleDirectories = exports.filterCityDataForSubdirectory = exports.filterCityDataForSelectiveRender = exports.LayerIndex = exports.ArchitectureMapHighlightLayers = void 0;
 // Main component export
 var ArchitectureMapHighlightLayers_1 = require("./components/ArchitectureMapHighlightLayers");
 Object.defineProperty(exports, "ArchitectureMapHighlightLayers", { enumerable: true, get: function () { return ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers; } });
+// Layer and rendering types
+var drawLayeredBuildings_1 = require("./render/client/drawLayeredBuildings");
+Object.defineProperty(exports, "LayerIndex", { enumerable: true, get: function () { return drawLayeredBuildings_1.LayerIndex; } });
 // Utility functions
 var cityDataUtils_1 = require("./builder/cityDataUtils");
 Object.defineProperty(exports, "filterCityDataForSelectiveRender", { enumerable: true, get: function () { return cityDataUtils_1.filterCityDataForSelectiveRender; } });

package/dist/render/client/drawLayeredBuildings.d.ts

@@ -32,6 +32,26 @@ export interface HighlightLayer {
     items: LayerItem[];
     dynamic?: boolean;
 }
+/**
+ * LayerIndex provides O(1) path lookups instead of O(n) iteration.
+ * This dramatically improves performance with large numbers of layer items.
+ */
+export declare class LayerIndex {
+    private exactIndex;
+    private directoryPaths;
+    private sortedCache;
+    constructor(layers: HighlightLayer[]);
+    private buildIndex;
+    /**
+     * Get all layer items that apply to a given path.
+     * For 'exact' mode: only matches the exact path.
+     * For 'children' mode: matches exact path OR parent directories that contain this path.
+     */
+    getItemsForPath(path: string, checkType?: 'exact' | 'children'): Array<{
+        layer: HighlightLayer;
+        item: LayerItem;
+    }>;
+}
 export declare function drawGrid(ctx: CanvasRenderingContext2D, width: number, height: number, gridSize: number): void;
 export declare function drawLayeredDistricts(ctx: CanvasRenderingContext2D, districts: CityDistrict[], worldToCanvas: (x: number, z: number) => {
     x: number;
@@ -43,9 +63,11 @@ layers: HighlightLayer[], hoveredDistrict?: CityDistrict | null, fullSize?: bool
     paddingLeft: number;
     paddingRight: number;
 }, abstractedPaths?: Set<string>, // Paths of directories that are abstracted (have covers)
-showDirectoryLabels?: boolean, borderRadius?: number): void;
+showDirectoryLabels?: boolean, borderRadius?: number, // Border radius for districts (default: sharp corners)
+layerIndex?: LayerIndex): void;
 export declare function drawLayeredBuildings(ctx: CanvasRenderingContext2D, buildings: CityBuilding[], worldToCanvas: (x: number, z: number) => {
     x: number;
     y: number;
-}, scale: number, layers: HighlightLayer[], hoveredBuilding?: CityBuilding | null, defaultBuildingColor?: string, showFileNames?: boolean, hoverBorderColor?: string, disableOpacityDimming?: boolean, showFileTypeIcons?: boolean, borderRadius?: number): void;
+}, scale: number, layers: HighlightLayer[], hoveredBuilding?: CityBuilding | null, defaultBuildingColor?: string, showFileNames?: boolean, hoverBorderColor?: string, disableOpacityDimming?: boolean, showFileTypeIcons?: boolean, borderRadius?: number, // Border radius for buildings (default: 0 - sharp corners)
+layerIndex?: LayerIndex): void;
 //# sourceMappingURL=drawLayeredBuildings.d.ts.map

package/dist/render/client/drawLayeredBuildings.d.ts.map

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

package/dist/render/client/drawLayeredBuildings.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayerIndex = void 0;
 exports.drawGrid = drawGrid;
 exports.drawLayeredDistricts = drawLayeredDistricts;
 exports.drawLayeredBuildings = drawLayeredBuildings;
@@ -20,6 +21,87 @@ function pathMatchesItem(path, item, checkType = 'children') {
         }
     }
 }
+/**
+ * LayerIndex provides O(1) path lookups instead of O(n) iteration.
+ * This dramatically improves performance with large numbers of layer items.
+ */
+class LayerIndex {
+    constructor(layers) {
+        // Map from exact path to layer items (for file items)
+        this.exactIndex = new Map();
+        // Sorted list of directory paths for prefix matching
+        this.directoryPaths = [];
+        // Cache for sorted results by priority
+        this.sortedCache = new Map();
+        this.buildIndex(layers);
+    }
+    buildIndex(layers) {
+        for (const layer of layers) {
+            if (!layer.enabled)
+                continue;
+            for (const item of layer.items) {
+                const entry = { layer, item };
+                if (item.type === 'file') {
+                    // File items: exact match only
+                    const existing = this.exactIndex.get(item.path);
+                    if (existing) {
+                        existing.push(entry);
+                    }
+                    else {
+                        this.exactIndex.set(item.path, [entry]);
+                    }
+                }
+                else {
+                    // Directory items: need prefix matching
+                    this.directoryPaths.push({ path: item.path, layer, item });
+                }
+            }
+        }
+        // Sort directory paths by length (longest first) for correct matching
+        this.directoryPaths.sort((a, b) => b.path.length - a.path.length);
+    }
+    /**
+     * Get all layer items that apply to a given path.
+     * For 'exact' mode: only matches the exact path.
+     * For 'children' mode: matches exact path OR parent directories that contain this path.
+     */
+    getItemsForPath(path, checkType = 'children') {
+        // Check cache first
+        const cacheKey = `${path}:${checkType}`;
+        const cached = this.sortedCache.get(cacheKey);
+        if (cached)
+            return cached;
+        const matches = [];
+        // Check exact matches (file items)
+        const exactMatches = this.exactIndex.get(path);
+        if (exactMatches) {
+            matches.push(...exactMatches);
+        }
+        // Check directory matches
+        if (checkType === 'exact') {
+            // For exact mode, only match directories with exact path
+            for (const dir of this.directoryPaths) {
+                if (dir.path === path) {
+                    matches.push({ layer: dir.layer, item: dir.item });
+                }
+            }
+        }
+        else {
+            // For children mode, check if path is inside any directory
+            for (const dir of this.directoryPaths) {
+                if (path === dir.path || path.startsWith(dir.path + '/')) {
+                    matches.push({ layer: dir.layer, item: dir.item });
+                }
+            }
+        }
+        // Sort by priority (highest first)
+        const sorted = matches.sort((a, b) => b.layer.priority - a.layer.priority);
+        // Cache the result
+        this.sortedCache.set(cacheKey, sorted);
+        return sorted;
+    }
+}
+exports.LayerIndex = LayerIndex;
 // Helper function to draw rounded rectangles
 function drawRoundedRect(ctx, x, y, width, height, radius, fill, stroke) {
     ctx.beginPath();
@@ -339,12 +421,15 @@ function applyLayerRendering(ctx, bounds, layer, item, scale, borderRadius = 0)
 // Draw districts with layer support
 function drawLayeredDistricts(ctx, districts, worldToCanvas, scale, // This includes the zoom scale for text proportionality
 layers, hoveredDistrict, fullSize, defaultDirectoryColor, layoutConfig, abstractedPaths, // Paths of directories that are abstracted (have covers)
-showDirectoryLabels = true, borderRadius = 0) {
+showDirectoryLabels = true, borderRadius = 0, // Border radius for districts (default: sharp corners)
+layerIndex) {
+    // Build index once for all districts (O(n) instead of O(n²))
+    const index = layerIndex || new LayerIndex(layers);
     districts.forEach(district => {
         const districtPath = district.path || '';
         const isRoot = !districtPath || districtPath === '';
         // Check if this root district has layer matches (like covers) - if so, render it
-        const rootLayerMatches = getLayerItemsForPath(districtPath, layers, 'exact');
+        const rootLayerMatches = index.getItemsForPath(districtPath, 'exact');
         const hasLayerRendering = rootLayerMatches.length > 0;
         // Skip root districts unless they have layer rendering (covers, highlights, etc.)
         if (isRoot && !hasLayerRendering)
@@ -371,7 +456,7 @@ showDirectoryLabels = true, borderRadius = 0) {
         let opacity = 0.3;
         let borderOpacity = 0.6;
         // Check if district has layer highlighting - use exact matching for districts
-        const layerMatches = getLayerItemsForPath(districtPath, layers, 'exact');
+        const layerMatches = index.getItemsForPath(districtPath, 'exact');
         const hasLayerHighlight = layerMatches.length > 0;
         if (hasLayerHighlight) {
             opacity = 0.5;
@@ -551,7 +636,10 @@ function isReactFile(fileExtension) {
     return ext === '.jsx' || ext === '.tsx';
 }
 // Draw buildings with layer support
-function drawLayeredBuildings(ctx, buildings, worldToCanvas, scale, layers, hoveredBuilding, defaultBuildingColor, showFileNames, hoverBorderColor, disableOpacityDimming, showFileTypeIcons, borderRadius = 0) {
+function drawLayeredBuildings(ctx, buildings, worldToCanvas, scale, layers, hoveredBuilding, defaultBuildingColor, showFileNames, hoverBorderColor, disableOpacityDimming, showFileTypeIcons, borderRadius = 0, // Border radius for buildings (default: 0 - sharp corners)
+layerIndex) {
+    // Build index once for all buildings (O(n) instead of O(n²))
+    const index = layerIndex || new LayerIndex(layers);
     buildings.forEach(building => {
         const pos = worldToCanvas(building.position.x, building.position.z);
         // Calculate building dimensions
@@ -572,7 +660,7 @@ function drawLayeredBuildings(ctx, buildings, worldToCanvas, scale, layers, hove
             height: height,
         };
         // Get layer matches for this building - only check file items, not parent directories
-        const layerMatches = getLayerItemsForPath(building.path, layers).filter(match => match.item.type === 'file'); // Only apply file-specific highlights to buildings
+        const layerMatches = index.getItemsForPath(building.path).filter(match => match.item.type === 'file'); // Only apply file-specific highlights to buildings
         const hasLayerHighlight = layerMatches.length > 0;
         const isHovered = hoveredBuilding === building;
         // Building color

package/dist/stories/stress-test-data.d.ts

@@ -0,0 +1,17 @@
+import { CityData } from '@principal-ai/file-city-builder';
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+export declare function generateLargeFilePaths(fileCount: number): string[];
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+export declare function createStressTestCityData(fileCount?: number, useCache?: boolean): CityData;
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+export declare function clearStressTestCache(): void;
+//# sourceMappingURL=stress-test-data.d.ts.map

package/dist/stories/stress-test-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stress-test-data.d.ts","sourceRoot":"","sources":["../../src/stories/stress-test-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AA2CzC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoElE;AAoBD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,GAAE,MAAa,EAAE,QAAQ,GAAE,OAAc,GAAG,QAAQ,CAwBrG;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/stories/stress-test-data.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateLargeFilePaths = generateLargeFilePaths;
+exports.createStressTestCityData = createStressTestCityData;
+exports.clearStressTestCache = clearStressTestCache;
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
+// Common file extensions for realistic distribution
+const FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.md', '.test.ts', '.spec.tsx'];
+// Top-level source directories
+const TOP_LEVEL_DIRS = ['src', 'lib', 'packages', 'modules'];
+// Second-level directories (domain areas)
+const DOMAIN_DIRS = ['components', 'utils', 'services', 'hooks', 'types', 'helpers', 'core', 'api', 'features', 'pages'];
+// Third-level directories (categories within domains)
+const CATEGORY_DIRS = ['ui', 'forms', 'layout', 'navigation', 'data', 'auth', 'common', 'shared', 'internal', 'public'];
+// Fourth-level directories (specific feature areas)
+const FEATURE_DIRS = ['Button', 'Modal', 'Table', 'Card', 'Input', 'Select', 'Dialog', 'Menu', 'Tabs', 'List', 'Grid', 'Panel'];
+// Fifth-level directories (variants/subfeatures)
+const VARIANT_DIRS = ['variants', 'styles', 'hooks', 'utils', 'types', 'tests', '__tests__', 'stories', 'docs'];
+// File name prefixes for realistic naming
+const FILE_PREFIXES = ['index', 'main', 'handler', 'controller', 'service', 'helper', 'util', 'config', 'constants', 'types'];
+/**
+ * Seeded random number generator for consistent results
+ */
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+        return seed / 0x7fffffff;
+    };
+}
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+function generateLargeFilePaths(fileCount) {
+    const files = [];
+    const random = seededRandom(42); // Consistent seed for reproducible results
+    for (let i = 0; i < fileCount; i++) {
+        const extension = FILE_EXTENSIONS[i % FILE_EXTENSIONS.length];
+        // Determine nesting depth (0-5 levels) with weighted distribution
+        // More files at medium depths (2-3), fewer at extremes
+        const depthRoll = random();
+        let depth;
+        if (depthRoll < 0.1)
+            depth = 1; // 10% at depth 1
+        else if (depthRoll < 0.25)
+            depth = 2; // 15% at depth 2
+        else if (depthRoll < 0.50)
+            depth = 3; // 25% at depth 3
+        else if (depthRoll < 0.75)
+            depth = 4; // 25% at depth 4
+        else if (depthRoll < 0.90)
+            depth = 5; // 15% at depth 5
+        else
+            depth = 6; // 10% at depth 6
+        const pathParts = [];
+        // Level 1: Top-level directory
+        // Weight 'src' heavily so it contains ~50% of files (for stress testing large subdirectory zoom)
+        const topLevelRoll = random();
+        if (topLevelRoll < 0.5) {
+            pathParts.push('src'); // 50% of files in src
+        }
+        else if (topLevelRoll < 0.7) {
+            pathParts.push('lib'); // 20% in lib
+        }
+        else if (topLevelRoll < 0.85) {
+            pathParts.push('packages'); // 15% in packages
+        }
+        else {
+            pathParts.push('modules'); // 15% in modules
+        }
+        // Level 2: Domain directory
+        if (depth >= 2) {
+            pathParts.push(DOMAIN_DIRS[Math.floor(random() * DOMAIN_DIRS.length)]);
+        }
+        // Level 3: Category directory
+        if (depth >= 3) {
+            pathParts.push(CATEGORY_DIRS[Math.floor(random() * CATEGORY_DIRS.length)]);
+        }
+        // Level 4: Feature directory
+        if (depth >= 4) {
+            pathParts.push(FEATURE_DIRS[Math.floor(random() * FEATURE_DIRS.length)]);
+        }
+        // Level 5: Variant directory
+        if (depth >= 5) {
+            pathParts.push(VARIANT_DIRS[Math.floor(random() * VARIANT_DIRS.length)]);
+        }
+        // Level 6: Additional nesting for very deep files
+        if (depth >= 6) {
+            pathParts.push(`nested${Math.floor(random() * 5)}`);
+        }
+        // Generate filename
+        const prefix = FILE_PREFIXES[Math.floor(random() * FILE_PREFIXES.length)];
+        const suffix = Math.floor(i / 10); // Group files by suffix number
+        const fileName = `${prefix}${suffix}${extension}`;
+        pathParts.push(fileName);
+        files.push(pathParts.join('/'));
+    }
+    return files;
+}
+/**
+ * Convert file paths to FileInfo objects
+ */
+function createFileInfoList(paths) {
+    return paths.map(path => ({
+        name: path.split('/').pop() || path,
+        path: path,
+        relativePath: path,
+        size: 500 + Math.floor(Math.random() * 5000), // 500-5500 bytes
+        extension: path.includes('.') ? '.' + (path.split('.').pop() || '') : '',
+        lastModified: new Date(),
+        isDirectory: false,
+    }));
+}
+// Cache for stress test data to avoid regenerating
+const stressTestCache = new Map();
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+function createStressTestCityData(fileCount = 8000, useCache = true) {
+    if (useCache && stressTestCache.has(fileCount)) {
+        return stressTestCache.get(fileCount);
+    }
+    const filePaths = generateLargeFilePaths(fileCount);
+    const fileInfos = createFileInfoList(filePaths);
+    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, `stress-test-${fileCount}`);
+    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    const cityData = builder.buildCityFromFileSystem(fileTree, '', {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingInner: 1,
+        paddingOuter: 3,
+    });
+    if (useCache) {
+        stressTestCache.set(fileCount, cityData);
+    }
+    return cityData;
+}
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+function clearStressTestCache() {
+    stressTestCache.clear();
+}

package/package.json

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

package/src/components/ArchitectureMapHighlightLayers.tsx

@@ -12,6 +12,7 @@ import {
   drawGrid,
   HighlightLayer,
   LayerItem,
+  LayerIndex,
 } from '../render/client/drawLayeredBuildings';
 import {
   CityData,
@@ -1007,6 +1008,9 @@ function ArchitectureMapHighlightLayersInner({
     return layers;
   }, [stableLayers, dynamicLayers, abstractionLayer]);
 
+  // Memoize layer index for O(1) path lookups - only rebuilds when layers change
+  const layerIndex = useMemo(() => new LayerIndex(allLayers), [allLayers]);
+
   // Memoize abstracted paths lookup - only recalculates when abstraction layer changes
   const { abstractedPathsSet, abstractedPathLookup } = useMemo(() => {
     const pathsSet = new Set<string>();
@@ -1189,6 +1193,7 @@ function ArchitectureMapHighlightLayersInner({
       abstractedPathsSet, // Pass abstracted paths to skip labels
       showDirectoryLabels,
       districtBorderRadius,
+      layerIndex, // Pre-built index for O(1) lookups
     );
 
     // Draw buildings with layer support
@@ -1205,6 +1210,7 @@ function ArchitectureMapHighlightLayersInner({
       disableOpacityDimming,
       showFileTypeIcons,
       buildingBorderRadius,
+      layerIndex, // Pre-built index for O(1) lookups
     );
 
     // Performance monitoring end available for debugging
@@ -1239,6 +1245,7 @@ function ArchitectureMapHighlightLayersInner({
     visibleDistrictsMemo,
     visibleBuildingsMemo,
     abstractedPathsSet,
+    layerIndex,
   ]);
 
   // Optimized hit testing

package/src/index.ts

@@ -9,6 +9,7 @@ export {
   type LayerRenderStrategy,
   type LayerItem,
   type HighlightLayer,
+  LayerIndex,
 } from './render/client/drawLayeredBuildings';
 
 // React-specific types

package/src/render/client/drawLayeredBuildings.ts

@@ -66,6 +66,97 @@ function pathMatchesItem(
   }
 }
 
+/**
+ * LayerIndex provides O(1) path lookups instead of O(n) iteration.
+ * This dramatically improves performance with large numbers of layer items.
+ */
+export class LayerIndex {
+  // Map from exact path to layer items (for file items)
+  private exactIndex: Map<string, Array<{ layer: HighlightLayer; item: LayerItem }>> = new Map();
+  // Sorted list of directory paths for prefix matching
+  private directoryPaths: Array<{ path: string; layer: HighlightLayer; item: LayerItem }> = [];
+  // Cache for sorted results by priority
+  private sortedCache: Map<string, Array<{ layer: HighlightLayer; item: LayerItem }>> = new Map();
+
+  constructor(layers: HighlightLayer[]) {
+    this.buildIndex(layers);
+  }
+
+  private buildIndex(layers: HighlightLayer[]) {
+    for (const layer of layers) {
+      if (!layer.enabled) continue;
+
+      for (const item of layer.items) {
+        const entry = { layer, item };
+
+        if (item.type === 'file') {
+          // File items: exact match only
+          const existing = this.exactIndex.get(item.path);
+          if (existing) {
+            existing.push(entry);
+          } else {
+            this.exactIndex.set(item.path, [entry]);
+          }
+        } else {
+          // Directory items: need prefix matching
+          this.directoryPaths.push({ path: item.path, layer, item });
+        }
+      }
+    }
+
+    // Sort directory paths by length (longest first) for correct matching
+    this.directoryPaths.sort((a, b) => b.path.length - a.path.length);
+  }
+
+  /**
+   * Get all layer items that apply to a given path.
+   * For 'exact' mode: only matches the exact path.
+   * For 'children' mode: matches exact path OR parent directories that contain this path.
+   */
+  getItemsForPath(
+    path: string,
+    checkType: 'exact' | 'children' = 'children',
+  ): Array<{ layer: HighlightLayer; item: LayerItem }> {
+    // Check cache first
+    const cacheKey = `${path}:${checkType}`;
+    const cached = this.sortedCache.get(cacheKey);
+    if (cached) return cached;
+
+    const matches: Array<{ layer: HighlightLayer; item: LayerItem }> = [];
+
+    // Check exact matches (file items)
+    const exactMatches = this.exactIndex.get(path);
+    if (exactMatches) {
+      matches.push(...exactMatches);
+    }
+
+    // Check directory matches
+    if (checkType === 'exact') {
+      // For exact mode, only match directories with exact path
+      for (const dir of this.directoryPaths) {
+        if (dir.path === path) {
+          matches.push({ layer: dir.layer, item: dir.item });
+        }
+      }
+    } else {
+      // For children mode, check if path is inside any directory
+      for (const dir of this.directoryPaths) {
+        if (path === dir.path || path.startsWith(dir.path + '/')) {
+          matches.push({ layer: dir.layer, item: dir.item });
+        }
+      }
+    }
+
+    // Sort by priority (highest first)
+    const sorted = matches.sort((a, b) => b.layer.priority - a.layer.priority);
+
+    // Cache the result
+    this.sortedCache.set(cacheKey, sorted);
+
+    return sorted;
+  }
+}
+
 // Helper function to draw rounded rectangles
 function drawRoundedRect(
   ctx: CanvasRenderingContext2D,
@@ -496,13 +587,17 @@ export function drawLayeredDistricts(
   abstractedPaths?: Set<string>, // Paths of directories that are abstracted (have covers)
   showDirectoryLabels: boolean = true,
   borderRadius: number = 0, // Border radius for districts (default: sharp corners)
+  layerIndex?: LayerIndex, // Optional pre-built index for performance
 ) {
+  // Build index once for all districts (O(n) instead of O(n²))
+  const index = layerIndex || new LayerIndex(layers);
+
   districts.forEach(district => {
     const districtPath = district.path || '';
     const isRoot = !districtPath || districtPath === '';
 
     // Check if this root district has layer matches (like covers) - if so, render it
-    const rootLayerMatches = getLayerItemsForPath(districtPath, layers, 'exact');
+    const rootLayerMatches = index.getItemsForPath(districtPath, 'exact');
     const hasLayerRendering = rootLayerMatches.length > 0;
 
     // Skip root districts unless they have layer rendering (covers, highlights, etc.)
@@ -536,7 +631,7 @@ export function drawLayeredDistricts(
     let borderOpacity = 0.6;
 
     // Check if district has layer highlighting - use exact matching for districts
-    const layerMatches = getLayerItemsForPath(districtPath, layers, 'exact');
+    const layerMatches = index.getItemsForPath(districtPath, 'exact');
     const hasLayerHighlight = layerMatches.length > 0;
 
     if (hasLayerHighlight) {
@@ -805,7 +900,11 @@ export function drawLayeredBuildings(
   disableOpacityDimming?: boolean,
   showFileTypeIcons?: boolean,
   borderRadius: number = 0, // Border radius for buildings (default: 0 - sharp corners)
+  layerIndex?: LayerIndex, // Optional pre-built index for performance
 ) {
+  // Build index once for all buildings (O(n) instead of O(n²))
+  const index = layerIndex || new LayerIndex(layers);
+
   buildings.forEach(building => {
     const pos = worldToCanvas(building.position.x, building.position.z);
 
@@ -832,7 +931,7 @@ export function drawLayeredBuildings(
     };
 
     // Get layer matches for this building - only check file items, not parent directories
-    const layerMatches = getLayerItemsForPath(building.path, layers).filter(
+    const layerMatches = index.getItemsForPath(building.path).filter(
       match => match.item.type === 'file',
     ); // Only apply file-specific highlights to buildings
     const hasLayerHighlight = layerMatches.length > 0;

package/src/stories/StressTest.stories.tsx

@@ -0,0 +1,443 @@
+import React, { useMemo, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ArchitectureMapHighlightLayers } from '../components/ArchitectureMapHighlightLayers';
+import { HighlightLayer } from '../render/client/drawLayeredBuildings';
+import { createStressTestCityData } from './stress-test-data';
+
+// Wrapper component that regenerates cityData when fileCount changes
+// and includes the click-to-zoom panel
+function StressTestWrapper({
+  fileCount,
+  ...props
+}: {
+  fileCount: number;
+} & Omit<React.ComponentProps<typeof ArchitectureMapHighlightLayers>, 'cityData'>) {
+  const [zoomToPath, setZoomToPath] = useState<string | null>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const cityData = useMemo(() => {
+    console.log(`Generating city data for ${fileCount} files...`);
+    const start = performance.now();
+    const data = createStressTestCityData(fileCount, true);
+    const elapsed = performance.now() - start;
+    console.log(`Generated in ${elapsed.toFixed(2)}ms`);
+    return data;
+  }, [fileCount]);
+
+  // Get unique top-level directories for navigation buttons
+  const topLevelDirs = useMemo(() => {
+    return Array.from(
+      new Set(
+        cityData.districts
+          .map(d => d.path.split('/')[0])
+          .filter(Boolean),
+      ),
+    ).sort();
+  }, [cityData]);
+
+  // Get nested directories at different levels for navigation
+  const nestedDirs = useMemo(() => {
+    const allPaths = cityData.districts.map(d => d.path);
+
+    // Get depth-2 directories (e.g., src/components)
+    const depth2 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 2)),
+    ).sort().slice(0, 6);
+
+    // Get depth-3 directories (e.g., src/components/ui)
+    const depth3 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 3)),
+    ).sort().slice(0, 6);
+
+    // Get depth-4 directories (e.g., src/components/ui/Button)
+    const depth4 = Array.from(
+      new Set(allPaths.filter(p => p.split('/').length === 4)),
+    ).sort().slice(0, 4);
+
+    return { depth2, depth3, depth4 };
+  }, [cityData]);
+
+  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: '#3b82f6',
+          priority: 1,
+          items: [{ path: zoomToPath, type: 'directory' }],
+        },
+      ]
+    : [];
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <ArchitectureMapHighlightLayers
+        cityData={cityData}
+        zoomToPath={zoomToPath}
+        onZoomComplete={handleZoomComplete}
+        zoomAnimationSpeed={0.1}
+        highlightLayers={highlightLayers}
+        onFileClick={(path, type) => {
+          if (type === 'directory') {
+            handleZoomTo(path);
+          }
+        }}
+        {...props}
+      />
+
+      {/* 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',
+          maxHeight: 'calc(100vh - 100px)',
+          overflowY: 'auto',
+        }}
+      >
+        <div
+          style={{
+            color: '#3b82f6',
+            fontFamily: 'monospace',
+            fontSize: '12px',
+            fontWeight: 'bold',
+          }}
+        >
+          Stress Test: {fileCount.toLocaleString()} files
+        </div>
+        <div
+          style={{
+            color: '#9ca3af',
+            fontFamily: 'monospace',
+            fontSize: '10px',
+            marginBottom: '8px',
+          }}
+        >
+          {isAnimating ? 'Animating...' : 'Click to zoom'}
+        </div>
+
+        {/* Reset button */}
+        <button
+          onClick={() => handleZoomTo(null)}
+          disabled={isAnimating}
+          style={{
+            padding: '8px 12px',
+            backgroundColor: zoomToPath === null ? '#3b82f6' : '#374151',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: isAnimating ? 'not-allowed' : 'pointer',
+            fontFamily: 'monospace',
+            fontSize: '12px',
+            opacity: isAnimating ? 0.6 : 1,
+          }}
+        >
+          Reset View
+        </button>
+
+        {/* Top-level directory buttons */}
+        {topLevelDirs.map(dir => (
+          <button
+            key={dir}
+            onClick={() => handleZoomTo(dir)}
+            disabled={isAnimating}
+            style={{
+              padding: '8px 12px',
+              backgroundColor: zoomToPath === dir ? '#3b82f6' : '#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>
+        ))}
+
+        {/* Depth 2 directories (e.g., src/components) */}
+        {nestedDirs.depth2.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 2:
+            </div>
+            {nestedDirs.depth2.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#3b82f6' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Depth 3 directories (e.g., src/components/ui) */}
+        {nestedDirs.depth3.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 3:
+            </div>
+            {nestedDirs.depth3.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#10b981' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Depth 4 directories (e.g., src/components/ui/Button) */}
+        {nestedDirs.depth4.length > 0 && (
+          <div
+            style={{
+              borderTop: '1px solid #4b5563',
+              paddingTop: '8px',
+              marginTop: '4px',
+            }}
+          >
+            <div
+              style={{
+                color: '#9ca3af',
+                fontFamily: 'monospace',
+                fontSize: '10px',
+                marginBottom: '4px',
+              }}
+            >
+              Depth 4:
+            </div>
+            {nestedDirs.depth4.map(dir => (
+              <button
+                key={dir}
+                onClick={() => handleZoomTo(dir)}
+                disabled={isAnimating}
+                style={{
+                  padding: '6px 10px',
+                  backgroundColor: zoomToPath === dir ? '#f59e0b' : '#1f2937',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: isAnimating ? 'not-allowed' : 'pointer',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  textAlign: 'left',
+                  marginBottom: '4px',
+                  width: '100%',
+                  opacity: isAnimating ? 0.6 : 1,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={dir}
+              >
+                {dir}
+              </button>
+            ))}
+          </div>
+        )}
+      </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' }}>
+          Click directories in the map or use buttons above
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Performance/Stress Test',
+  component: StressTestWrapper,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    fileCount: {
+      control: { type: 'number', min: 100, max: 20000, step: 100 },
+      description: 'Number of files to generate for stress testing',
+    },
+  },
+} satisfies Meta<typeof StressTestWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Test subdirectory zoom with a large number of files.
+ * Use the fileCount control to adjust the number of files.
+ *
+ * Try clicking on directories to zoom in and test performance.
+ */
+export const SubdirectoryZoom: Story = {
+  args: {
+    fileCount: 8000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Smaller stress test starting point (1000 files)
+ */
+export const SmallStressTest: Story = {
+  args: {
+    fileCount: 1000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Medium stress test (5000 files)
+ */
+export const MediumStressTest: Story = {
+  args: {
+    fileCount: 5000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Large stress test (10000 files)
+ */
+export const LargeStressTest: Story = {
+  args: {
+    fileCount: 10000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};
+
+/**
+ * Extreme stress test (20000 files) - may be slow!
+ */
+export const ExtremeStressTest: Story = {
+  args: {
+    fileCount: 20000,
+    enableZoom: true,
+    showGrid: true,
+    showFileNames: false,
+    fullSize: true,
+  },
+};

package/src/stories/stress-test-data.ts

@@ -0,0 +1,176 @@
+import {
+  CityData,
+  CodeCityBuilderWithGrid,
+  buildFileSystemTreeFromFileInfoList,
+} from '@principal-ai/file-city-builder';
+
+interface FileInfo {
+  name: string;
+  path: string;
+  relativePath: string;
+  size: number;
+  extension: string;
+  lastModified: Date;
+  isDirectory: boolean;
+}
+
+// Common file extensions for realistic distribution
+const FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.md', '.test.ts', '.spec.tsx'];
+
+// Top-level source directories
+const TOP_LEVEL_DIRS = ['src', 'lib', 'packages', 'modules'];
+
+// Second-level directories (domain areas)
+const DOMAIN_DIRS = ['components', 'utils', 'services', 'hooks', 'types', 'helpers', 'core', 'api', 'features', 'pages'];
+
+// Third-level directories (categories within domains)
+const CATEGORY_DIRS = ['ui', 'forms', 'layout', 'navigation', 'data', 'auth', 'common', 'shared', 'internal', 'public'];
+
+// Fourth-level directories (specific feature areas)
+const FEATURE_DIRS = ['Button', 'Modal', 'Table', 'Card', 'Input', 'Select', 'Dialog', 'Menu', 'Tabs', 'List', 'Grid', 'Panel'];
+
+// Fifth-level directories (variants/subfeatures)
+const VARIANT_DIRS = ['variants', 'styles', 'hooks', 'utils', 'types', 'tests', '__tests__', 'stories', 'docs'];
+
+// File name prefixes for realistic naming
+const FILE_PREFIXES = ['index', 'main', 'handler', 'controller', 'service', 'helper', 'util', 'config', 'constants', 'types'];
+
+/**
+ * Seeded random number generator for consistent results
+ */
+function seededRandom(seed: number): () => number {
+  return () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+}
+
+/**
+ * Generate a large number of file paths with realistic nested directory structures
+ */
+export function generateLargeFilePaths(fileCount: number): string[] {
+  const files: string[] = [];
+  const random = seededRandom(42); // Consistent seed for reproducible results
+
+  for (let i = 0; i < fileCount; i++) {
+    const extension = FILE_EXTENSIONS[i % FILE_EXTENSIONS.length];
+
+    // Determine nesting depth (0-5 levels) with weighted distribution
+    // More files at medium depths (2-3), fewer at extremes
+    const depthRoll = random();
+    let depth: number;
+    if (depthRoll < 0.1) depth = 1;       // 10% at depth 1
+    else if (depthRoll < 0.25) depth = 2; // 15% at depth 2
+    else if (depthRoll < 0.50) depth = 3; // 25% at depth 3
+    else if (depthRoll < 0.75) depth = 4; // 25% at depth 4
+    else if (depthRoll < 0.90) depth = 5; // 15% at depth 5
+    else depth = 6;                        // 10% at depth 6
+
+    const pathParts: string[] = [];
+
+    // Level 1: Top-level directory
+    // Weight 'src' heavily so it contains ~50% of files (for stress testing large subdirectory zoom)
+    const topLevelRoll = random();
+    if (topLevelRoll < 0.5) {
+      pathParts.push('src'); // 50% of files in src
+    } else if (topLevelRoll < 0.7) {
+      pathParts.push('lib'); // 20% in lib
+    } else if (topLevelRoll < 0.85) {
+      pathParts.push('packages'); // 15% in packages
+    } else {
+      pathParts.push('modules'); // 15% in modules
+    }
+
+    // Level 2: Domain directory
+    if (depth >= 2) {
+      pathParts.push(DOMAIN_DIRS[Math.floor(random() * DOMAIN_DIRS.length)]);
+    }
+
+    // Level 3: Category directory
+    if (depth >= 3) {
+      pathParts.push(CATEGORY_DIRS[Math.floor(random() * CATEGORY_DIRS.length)]);
+    }
+
+    // Level 4: Feature directory
+    if (depth >= 4) {
+      pathParts.push(FEATURE_DIRS[Math.floor(random() * FEATURE_DIRS.length)]);
+    }
+
+    // Level 5: Variant directory
+    if (depth >= 5) {
+      pathParts.push(VARIANT_DIRS[Math.floor(random() * VARIANT_DIRS.length)]);
+    }
+
+    // Level 6: Additional nesting for very deep files
+    if (depth >= 6) {
+      pathParts.push(`nested${Math.floor(random() * 5)}`);
+    }
+
+    // Generate filename
+    const prefix = FILE_PREFIXES[Math.floor(random() * FILE_PREFIXES.length)];
+    const suffix = Math.floor(i / 10); // Group files by suffix number
+    const fileName = `${prefix}${suffix}${extension}`;
+
+    pathParts.push(fileName);
+    files.push(pathParts.join('/'));
+  }
+
+  return files;
+}
+
+/**
+ * Convert file paths to FileInfo objects
+ */
+function createFileInfoList(paths: string[]): FileInfo[] {
+  return paths.map(path => ({
+    name: path.split('/').pop() || path,
+    path: path,
+    relativePath: path,
+    size: 500 + Math.floor(Math.random() * 5000), // 500-5500 bytes
+    extension: path.includes('.') ? '.' + (path.split('.').pop() || '') : '',
+    lastModified: new Date(),
+    isDirectory: false,
+  }));
+}
+
+// Cache for stress test data to avoid regenerating
+const stressTestCache = new Map<number, CityData>();
+
+/**
+ * Create CityData with a large number of files for stress testing subdirectory zoom
+ *
+ * @param fileCount - Number of files to generate (default: 8000)
+ * @param useCache - Whether to cache results (default: true)
+ */
+export function createStressTestCityData(fileCount: number = 8000, useCache: boolean = true): CityData {
+  if (useCache && stressTestCache.has(fileCount)) {
+    return stressTestCache.get(fileCount)!;
+  }
+
+  const filePaths = generateLargeFilePaths(fileCount);
+  const fileInfos = createFileInfoList(filePaths);
+  const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos as any, `stress-test-${fileCount}`);
+
+  const builder = new CodeCityBuilderWithGrid();
+  const cityData = builder.buildCityFromFileSystem(fileTree, '', {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingInner: 1,
+    paddingOuter: 3,
+  });
+
+  if (useCache) {
+    stressTestCache.set(fileCount, cityData);
+  }
+
+  return cityData;
+}
+
+/**
+ * Clear the stress test cache (useful for testing memory)
+ */
+export function clearStressTestCache(): void {
+  stressTestCache.clear();
+}