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

package/dist/components/ArchitectureMapHighlightLayers.d.ts

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

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

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

package/dist/components/ArchitectureMapHighlightLayers.js

@@ -117,7 +117,7 @@ class SpatialGrid {
         this.grid.clear();
     }
 }
-function ArchitectureMapHighlightLayersInner({ cityData, highlightLayers = [], onLayerToggle, focusDirectory = null, rootDirectoryName, onDirectorySelect, onFileClick, enableZoom = false, fullSize = false, showGrid = false, showFileNames = false, className = '', selectiveRender, canvasBackgroundColor, hoverBorderColor, disableOpacityDimming = true, defaultDirectoryColor, defaultBuildingColor, subdirectoryMode, showLayerControls = false, showFileTypeIcons = true, showDirectoryLabels = true, transform = { rotation: 0 }, // Default to no rotation
+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
 onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     const { theme } = (0, industry_theme_1.useTheme)();
     // Use theme colors as defaults, with prop overrides
@@ -140,6 +140,10 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         lastMousePos: { x: 0, y: 0 },
         hasMouseMoved: false,
     });
+    // Target zoom state for animated transitions
+    const [targetZoom, setTargetZoom] = (0, react_1.useState)(null);
+    // Track the last zoomToPath to detect changes
+    const lastZoomToPathRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!enableZoom) {
             setZoomState(prev => ({
@@ -150,8 +154,46 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
                 isDragging: false,
                 hasMouseMoved: false,
             }));
+            setTargetZoom(null);
         }
     }, [enableZoom]);
+    // Animation loop for smooth zoom transitions
+    (0, react_1.useEffect)(() => {
+        if (!targetZoom)
+            return;
+        const animate = () => {
+            setZoomState(prev => {
+                const lerp = (a, b, t) => a + (b - a) * t;
+                const easing = zoomAnimationSpeed;
+                const newScale = lerp(prev.scale, targetZoom.scale, easing);
+                const newOffsetX = lerp(prev.offsetX, targetZoom.offsetX, easing);
+                const newOffsetY = lerp(prev.offsetY, targetZoom.offsetY, easing);
+                // Check if close enough to target (within 0.1% for scale, 0.5px for offset)
+                const scaleDone = Math.abs(newScale - targetZoom.scale) < 0.001;
+                const offsetXDone = Math.abs(newOffsetX - targetZoom.offsetX) < 0.5;
+                const offsetYDone = Math.abs(newOffsetY - targetZoom.offsetY) < 0.5;
+                if (scaleDone && offsetXDone && offsetYDone) {
+                    // Animation complete - set exact target values
+                    setTargetZoom(null);
+                    onZoomComplete?.();
+                    return {
+                        ...prev,
+                        scale: targetZoom.scale,
+                        offsetX: targetZoom.offsetX,
+                        offsetY: targetZoom.offsetY,
+                    };
+                }
+                return {
+                    ...prev,
+                    scale: newScale,
+                    offsetX: newOffsetX,
+                    offsetY: newOffsetY,
+                };
+            });
+        };
+        const frameId = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(frameId);
+    }, [targetZoom, zoomState, zoomAnimationSpeed, onZoomComplete]);
     const [hitTestCache, setHitTestCache] = (0, react_1.useState)(null);
     const calculateCanvasResolution = (fileCount, _cityBounds) => {
         const minSize = 400;
@@ -188,6 +230,96 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         }
         return filteredCityData;
     }, [subdirectoryMode?.enabled, subdirectoryMode?.autoCenter, cityData, filteredCityData]);
+    // Handle zoomToPath changes - calculate target zoom to frame the specified path
+    (0, react_1.useEffect)(() => {
+        // Skip if zoom is not enabled or path hasn't changed
+        if (!enableZoom || zoomToPath === lastZoomToPathRef.current) {
+            return;
+        }
+        lastZoomToPathRef.current = zoomToPath;
+        // If zoomToPath is null, reset to default view
+        if (zoomToPath === null) {
+            setTargetZoom({
+                scale: 1,
+                offsetX: 0,
+                offsetY: 0,
+            });
+            return;
+        }
+        // Need city data and canvas ref to calculate zoom
+        if (!filteredCityData || !canvasRef.current) {
+            return;
+        }
+        // Get actual display size - the canvas is resized to match this during render
+        // so canvas coordinates = display coordinates
+        const displayWidth = canvasRef.current.clientWidth || canvasSize.width;
+        const displayHeight = canvasRef.current.clientHeight || canvasSize.height;
+        if (!displayWidth || !displayHeight) {
+            return;
+        }
+        // Find the target - first check districts, then buildings
+        const normalizedPath = zoomToPath.replace(/^\/+|\/+$/g, '');
+        const targetDistrict = filteredCityData.districts.find(d => d.path === normalizedPath || d.path === zoomToPath);
+        const targetBuilding = filteredCityData.buildings.find(b => b.path === normalizedPath || b.path === zoomToPath);
+        if (!targetDistrict && !targetBuilding) {
+            return;
+        }
+        // Get the bounds to zoom to
+        let targetBounds;
+        if (targetDistrict) {
+            targetBounds = targetDistrict.worldBounds;
+        }
+        else if (targetBuilding) {
+            // Create bounds around the building with some padding
+            const [width, , depth] = targetBuilding.dimensions;
+            const padding = Math.max(width, depth) * 2;
+            targetBounds = {
+                minX: targetBuilding.position.x - width / 2 - padding,
+                maxX: targetBuilding.position.x + width / 2 + padding,
+                minZ: targetBuilding.position.z - depth / 2 - padding,
+                maxZ: targetBuilding.position.z + depth / 2 + padding,
+            };
+        }
+        else {
+            return;
+        }
+        // Use the same coordinate system as rendering
+        const coordinateData = canvasSizingData || filteredCityData;
+        const { scale: baseScale, offsetX: baseOffsetX, offsetZ: baseOffsetZ } = calculateScaleAndOffset(coordinateData, displayWidth, displayHeight, displayOptions.padding);
+        // Calculate target center in world coordinates
+        const targetCenterX = (targetBounds.minX + targetBounds.maxX) / 2;
+        const targetCenterZ = (targetBounds.minZ + targetBounds.maxZ) / 2;
+        // Calculate target size in screen coordinates (at base zoom)
+        const targetScreenWidth = (targetBounds.maxX - targetBounds.minX) * baseScale;
+        const targetScreenHeight = (targetBounds.maxZ - targetBounds.minZ) * baseScale;
+        // Calculate zoom scale to fit target with padding (80% of display)
+        const paddingFactor = 0.8;
+        const scaleToFitWidth = (displayWidth * paddingFactor) / targetScreenWidth;
+        const scaleToFitHeight = (displayHeight * paddingFactor) / targetScreenHeight;
+        const newZoomScale = Math.min(scaleToFitWidth, scaleToFitHeight, 5); // Cap at 5x
+        // Calculate the base screen position of target center (before zoom transform)
+        // This matches the worldToCanvas formula: ((x - bounds.minX) * scale + offsetX)
+        const baseScreenX = (targetCenterX - coordinateData.bounds.minX) * baseScale + baseOffsetX;
+        const baseScreenY = (targetCenterZ - coordinateData.bounds.minZ) * baseScale + baseOffsetZ;
+        // Calculate offset to center the target
+        // Full formula: screenPos = baseScreenPos * zoomScale + zoomOffset
+        // To center: displayCenter = baseScreen * zoomScale + zoomOffset
+        // Therefore: zoomOffset = displayCenter - baseScreen * zoomScale
+        const newOffsetX = displayWidth / 2 - baseScreenX * newZoomScale;
+        const newOffsetY = displayHeight / 2 - baseScreenY * newZoomScale;
+        setTargetZoom({
+            scale: newZoomScale,
+            offsetX: newOffsetX,
+            offsetY: newOffsetY,
+        });
+    }, [
+        zoomToPath,
+        enableZoom,
+        filteredCityData,
+        canvasSizingData,
+        canvasSize,
+        displayOptions.padding,
+    ]);
     // Build hit test cache with spatial indexing
     const buildHitTestCache = (0, react_1.useCallback)((cityData, scale, offsetX, offsetZ, zoomState, abstractedPaths) => {
         const spatialGrid = new SpatialGrid(cityData.bounds);

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

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

package/dist/stories/sample-data.js

@@ -2,267 +2,110 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createSampleCityData = createSampleCityData;
 exports.createSmallSampleCityData = createSmallSampleCityData;
-// Helper function to create sample city data for stories
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
+// Sample file structure representing a typical project
+const sampleFileStructure = [
+    // Source files
+    { path: 'src/index.ts', size: 1500 },
+    { path: 'src/App.tsx', size: 3200 },
+    { path: 'src/components/Header.tsx', size: 1800 },
+    { path: 'src/components/Footer.tsx', size: 1200 },
+    { path: 'src/components/Sidebar.tsx', size: 2100 },
+    { path: 'src/components/Card.tsx', size: 900 },
+    { path: 'src/components/Button.tsx', size: 600 },
+    { path: 'src/utils/helpers.ts', size: 2500 },
+    { path: 'src/utils/api.ts', size: 3100 },
+    { path: 'src/utils/validators.ts', size: 1400 },
+    { path: 'src/hooks/useAuth.ts', size: 800 },
+    { path: 'src/hooks/useData.ts', size: 1100 },
+    { path: 'src/styles/main.css', size: 4500 },
+    { path: 'src/styles/components.css', size: 2800 },
+    // Test files
+    { path: 'tests/unit/app.test.ts', size: 2200 },
+    { path: 'tests/unit/header.test.ts', size: 1600 },
+    { path: 'tests/unit/footer.test.tsx', size: 1400 },
+    { path: 'tests/integration/api.test.ts', size: 3400 },
+    { path: '__tests__/components.test.tsx', size: 2900 },
+    { path: '__tests__/utils.test.ts', size: 1900 },
+    // Config files
+    { path: 'package.json', size: 1200 },
+    { path: 'tsconfig.json', size: 800 },
+    { path: 'webpack.config.js', size: 2100 },
+    { path: '.eslintrc.js', size: 600 },
+    { path: '.prettierrc', size: 200 },
+    { path: 'README.md', size: 3500 },
+    // Documentation
+    { path: 'docs/README.md', size: 4200 },
+    { path: 'docs/API.md', size: 5100 },
+    { path: 'docs/CONTRIBUTING.md', size: 2300 },
+    // Build files
+    { path: 'dist/bundle.js', size: 45000 },
+    { path: 'dist/index.html', size: 800 },
+    { path: 'dist/styles.css', size: 12000 },
+    // Node modules (sample)
+    { path: 'node_modules/react/index.js', size: 8000 },
+    { path: 'node_modules/react/package.json', size: 1500 },
+    { path: 'node_modules/typescript/lib/typescript.js', size: 65000 },
+    { path: 'node_modules/@types/react/index.d.ts', size: 3200 },
+    // Deprecated files
+    { path: 'src/deprecated/OldComponent.tsx', size: 2400 },
+    { path: 'src/deprecated/LegacyAPI.ts', size: 3100 },
+];
+// Convert file structure to FileInfo objects
+function createFileInfoList(files) {
+    return files.map(file => ({
+        name: file.path.split('/').pop() || file.path,
+        path: file.path,
+        relativePath: file.path,
+        size: file.size,
+        extension: file.path.includes('.') ? '.' + (file.path.split('.').pop() || '') : '',
+        lastModified: new Date(),
+        isDirectory: false,
+    }));
+}
+// Cache the city data to avoid rebuilding on every render
+let cachedCityData = null;
+// Helper function to create sample city data for stories using the real treemap builder
 function createSampleCityData() {
-    const buildings = [];
-    const districts = [];
-    // Define file structure
-    const fileStructure = [
-        // Source files
-        { path: 'src/index.ts', size: 1500 },
-        { path: 'src/App.tsx', size: 3200 },
-        { path: 'src/components/Header.tsx', size: 1800 },
-        { path: 'src/components/Footer.tsx', size: 1200 },
-        { path: 'src/components/Sidebar.tsx', size: 2100 },
-        { path: 'src/components/Card.tsx', size: 900 },
-        { path: 'src/components/Button.tsx', size: 600 },
-        { path: 'src/utils/helpers.ts', size: 2500 },
-        { path: 'src/utils/api.ts', size: 3100 },
-        { path: 'src/utils/validators.ts', size: 1400 },
-        { path: 'src/hooks/useAuth.ts', size: 800 },
-        { path: 'src/hooks/useData.ts', size: 1100 },
-        { path: 'src/styles/main.css', size: 4500 },
-        { path: 'src/styles/components.css', size: 2800 },
-        // Test files
-        { path: 'tests/unit/app.test.ts', size: 2200 },
-        { path: 'tests/unit/header.test.ts', size: 1600 },
-        { path: 'tests/unit/footer.test.tsx', size: 1400 },
-        { path: 'tests/integration/api.test.ts', size: 3400 },
-        { path: '__tests__/components.test.tsx', size: 2900 },
-        { path: '__tests__/utils.test.ts', size: 1900 },
-        // Config files
-        { path: 'package.json', size: 1200 },
-        { path: 'tsconfig.json', size: 800 },
-        { path: 'webpack.config.js', size: 2100 },
-        { path: '.eslintrc.js', size: 600 },
-        { path: '.prettierrc', size: 200 },
-        { path: 'README.md', size: 3500 },
-        // Documentation
-        { path: 'docs/README.md', size: 4200 },
-        { path: 'docs/API.md', size: 5100 },
-        { path: 'docs/CONTRIBUTING.md', size: 2300 },
-        // Build files
-        { path: 'dist/bundle.js', size: 45000 },
-        { path: 'dist/index.html', size: 800 },
-        { path: 'dist/styles.css', size: 12000 },
-        // Node modules (sample)
-        { path: 'node_modules/react/index.js', size: 8000 },
-        { path: 'node_modules/react/package.json', size: 1500 },
-        { path: 'node_modules/typescript/lib/typescript.js', size: 65000 },
-        { path: 'node_modules/@types/react/index.d.ts', size: 3200 },
-        // Deprecated files
-        { path: 'src/deprecated/OldComponent.tsx', size: 2400 },
-        { path: 'src/deprecated/LegacyAPI.ts', size: 3100 },
-    ];
-    // Create a simple grid layout
-    let currentX = 0;
-    let currentZ = 0;
-    const spacing = 2;
-    const maxPerRow = 10;
-    let itemsInRow = 0;
-    // Group files by directory
-    const filesByDir = new Map();
-    fileStructure.forEach(file => {
-        const dir = file.path.includes('/') ? file.path.substring(0, file.path.lastIndexOf('/')) : '';
-        if (!filesByDir.has(dir)) {
-            filesByDir.set(dir, []);
-        }
-        const dirFiles = filesByDir.get(dir);
-        if (dirFiles) {
-            dirFiles.push(file);
-        }
-    });
-    // Track district bounds
-    const districtBounds = new Map();
-    // Process each directory group
-    const sortedDirs = Array.from(filesByDir.keys()).sort();
-    let districtStartX = 0;
-    sortedDirs.forEach(dir => {
-        const files = filesByDir.get(dir);
-        if (!files)
-            return;
-        const districtMinX = currentX;
-        const districtMinZ = currentZ;
-        files.forEach(file => {
-            const extension = file.path.includes('.') ? '.' + (file.path.split('.').pop() || '') : '';
-            // Calculate building dimensions based on file size
-            const height = Math.log(file.size + 1) * 2;
-            const width = Math.sqrt(file.size) / 10;
-            const depth = width;
-            buildings.push({
-                path: file.path,
-                position: {
-                    x: currentX + width / 2,
-                    y: height / 2,
-                    z: currentZ + depth / 2,
-                },
-                dimensions: [width, height, depth],
-                type: 'file',
-                fileExtension: extension,
-                size: file.size,
-                lastModified: new Date(),
-            });
-            // Update position for next building
-            currentX += width + spacing;
-            itemsInRow++;
-            if (itemsInRow >= maxPerRow) {
-                currentX = districtStartX;
-                currentZ += depth + spacing;
-                itemsInRow = 0;
-            }
-        });
-        // Create district bounds
-        if (dir) {
-            const districtMaxX = currentX > districtMinX ? currentX : districtMinX + 10;
-            const districtMaxZ = currentZ > districtMinZ ? currentZ + 5 : districtMinZ + 10;
-            districtBounds.set(dir, {
-                minX: districtMinX - 1,
-                maxX: districtMaxX + 1,
-                minZ: districtMinZ - 1,
-                maxZ: districtMaxZ + 1,
-            });
-            // Move to next district area
-            currentX = districtMaxX + spacing * 3;
-            if (currentX > 100) {
-                currentX = 0;
-                currentZ = districtMaxZ + spacing * 3;
-            }
-            districtStartX = currentX;
-            itemsInRow = 0;
-        }
-    });
-    // Create districts from bounds
-    const allPaths = new Set(districtBounds.keys());
-    const processedPaths = new Set();
-    // Helper to create all parent paths
-    const getParentPaths = (path) => {
-        const parts = path.split('/');
-        const parents = [];
-        for (let i = 1; i < parts.length; i++) {
-            parents.push(parts.slice(0, i).join('/'));
-        }
-        return parents;
-    };
-    // Add all parent paths to the set
-    allPaths.forEach(path => {
-        getParentPaths(path).forEach(parent => allPaths.add(parent));
+    if (cachedCityData) {
+        return cachedCityData;
+    }
+    const fileInfos = createFileInfoList(sampleFileStructure);
+    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, 'sample-project');
+    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    cachedCityData = builder.buildCityFromFileSystem(fileTree, '', {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingInner: 1,
+        paddingOuter: 3,
     });
-    // Create districts for all paths
-    allPaths.forEach(path => {
-        if (processedPaths.has(path))
-            return;
-        // Find all children of this path
-        const children = Array.from(districtBounds.keys()).filter(p => p.startsWith(path + '/') && !p.slice(path.length + 1).includes('/'));
-        let bounds;
-        if (districtBounds.has(path)) {
-            const pathBounds = districtBounds.get(path);
-            if (!pathBounds)
-                return;
-            bounds = pathBounds;
-        }
-        else if (children.length > 0) {
-            // Calculate bounds from children
-            const childBounds = children
-                .map(c => districtBounds.get(c))
-                .filter((b) => b !== undefined);
-            if (childBounds.length === 0)
-                return;
-            bounds = {
-                minX: Math.min(...childBounds.map(c => c.minX)),
-                maxX: Math.max(...childBounds.map(c => c.maxX)),
-                minZ: Math.min(...childBounds.map(c => c.minZ)),
-                maxZ: Math.max(...childBounds.map(c => c.maxZ)),
-            };
-        }
-        else {
-            return; // Skip if no bounds
-        }
-        const fileCount = buildings.filter(b => b.path === path || b.path.startsWith(path + '/')).length;
-        districts.push({
-            path,
-            worldBounds: bounds,
-            fileCount,
-            type: 'directory',
-        });
-        processedPaths.add(path);
-    });
-    // Calculate overall bounds
-    const allX = buildings.map(b => b.position.x);
-    const allZ = buildings.map(b => b.position.z);
-    const bounds = {
-        minX: Math.min(...allX) - 5,
-        maxX: Math.max(...allX) + 5,
-        minZ: Math.min(...allZ) - 5,
-        maxZ: Math.max(...allZ) + 5,
-    };
-    return {
-        buildings,
-        districts,
-        bounds,
-        metadata: {
-            totalFiles: buildings.length,
-            totalDirectories: districts.length,
-            analyzedAt: new Date(),
-            rootPath: '/',
-            layoutConfig: {
-                paddingTop: 2,
-                paddingBottom: 2,
-                paddingLeft: 2,
-                paddingRight: 2,
-                paddingInner: 1,
-                paddingOuter: 3,
-            },
-        },
-    };
+    return cachedCityData;
 }
+// Smaller sample file structure
+const smallFileStructure = [
+    { path: 'src/index.ts', size: 1500 },
+    { path: 'src/App.tsx', size: 3200 },
+    { path: 'src/utils/helpers.ts', size: 800 },
+    { path: 'package.json', size: 1200 },
+];
+let cachedSmallCityData = null;
 // Create a smaller sample for performance testing
 function createSmallSampleCityData() {
-    const buildings = [
-        {
-            path: 'index.ts',
-            position: { x: 5, y: 3, z: 5 },
-            dimensions: [4, 6, 4],
-            type: 'file',
-            fileExtension: '.ts',
-            size: 1500,
-            lastModified: new Date(),
-        },
-        {
-            path: 'App.tsx',
-            position: { x: 12, y: 4, z: 5 },
-            dimensions: [5, 8, 5],
-            type: 'file',
-            fileExtension: '.tsx',
-            size: 3200,
-            lastModified: new Date(),
-        },
-        {
-            path: 'utils/helpers.ts',
-            position: { x: 5, y: 2.5, z: 15 },
-            dimensions: [3, 5, 3],
-            type: 'file',
-            fileExtension: '.ts',
-            size: 800,
-            lastModified: new Date(),
-        },
-    ];
-    const districts = [
-        {
-            path: 'utils',
-            worldBounds: { minX: 2, maxX: 10, minZ: 12, maxZ: 20 },
-            fileCount: 1,
-            type: 'directory',
-        },
-    ];
-    return {
-        buildings,
-        districts,
-        bounds: { minX: 0, maxX: 20, minZ: 0, maxZ: 25 },
-        metadata: {
-            totalFiles: buildings.length,
-            totalDirectories: districts.length,
-            analyzedAt: new Date(),
-            rootPath: '/',
-        },
-    };
+    if (cachedSmallCityData) {
+        return cachedSmallCityData;
+    }
+    const fileInfos = createFileInfoList(smallFileStructure);
+    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, 'small-sample');
+    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    cachedSmallCityData = builder.buildCityFromFileSystem(fileTree, '', {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingInner: 1,
+        paddingOuter: 3,
+    });
+    return cachedSmallCityData;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,17 +21,13 @@
     "react": "^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.0",
-    "@storybook/addon-interactions": "^7.6.0",
-    "@storybook/addon-links": "^7.6.0",
-    "@storybook/blocks": "^7.6.0",
-    "@storybook/react": "^7.6.0",
-    "@storybook/react-vite": "^7.6.0",
-    "@storybook/test": "^7.6.0",
-    "@types/react": "^18.0.0",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-links": "^10.1.2",
+    "@storybook/react-vite": "^10.1.2",
+    "@types/react": "^19.0.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "storybook": "^7.6.0",
+    "storybook": "^10.1.2",
     "typescript": "^5.0.0",
     "vite": "^5.0.0"
   },