@principal-ai/file-city-react 0.5.8 → 0.5.9

package/dist/components/FileCity3D/FileCity3D.d.ts

@@ -92,6 +92,10 @@ export interface FileCity3DProps {
     heightScaling?: HeightScaling;
     /** Scale factor for linear mode (height per line, default 0.05) */
     linearScale?: number;
+    /** Directory path to focus on - buildings outside will collapse */
+    focusDirectory?: string | null;
+    /** Callback when user clicks on a district to navigate */
+    onDirectorySelect?: (directory: string | null) => void;
 }
 /**
  * FileCity3D - 3D visualization of codebase structure
@@ -99,6 +103,6 @@ export interface FileCity3DProps {
  * Renders CityData as an interactive 3D city where buildings represent files
  * and their height corresponds to line count or file size.
  */
-export declare function FileCity3D({ cityData, width, height, onBuildingClick, className, style, animation, isGrown: externalIsGrown, onGrowChange, showControls, highlightLayers, isolationMode, dimOpacity, isLoading, loadingMessage, emptyMessage, heightScaling, linearScale, }: FileCity3DProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileCity3D({ cityData, width, height, onBuildingClick, className, style, animation, isGrown: externalIsGrown, onGrowChange, showControls, highlightLayers, isolationMode, dimOpacity, isLoading, loadingMessage, emptyMessage, heightScaling, linearScale, focusDirectory, onDirectorySelect, }: FileCity3DProps): import("react/jsx-runtime").JSX.Element;
 export default FileCity3D;
 //# sourceMappingURL=FileCity3D.d.ts.map

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

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

package/dist/components/FileCity3D/FileCity3D.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo, useRef, useState, useEffect, useCallback, } from 'react';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { useTheme } from '@principal-ade/industry-theme';
-import { animated } from '@react-spring/three';
+import { animated, useSpring } from '@react-spring/three';
 import { OrbitControls, PerspectiveCamera, Text, RoundedBox, } from '@react-three/drei';
 import { getFileConfig } from '@principal-ai/file-city-builder';
 import * as THREE from 'three';
@@ -195,7 +195,9 @@ function hasActiveHighlights(layers) {
 }
 // Animated RoundedBox wrapper
 const AnimatedRoundedBox = animated(RoundedBox);
-function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration }) {
+// Animated meshStandardMaterial for opacity transitions
+const AnimatedMeshStandardMaterial = animated('meshStandardMaterial');
+function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration, heightMultipliersRef }) {
     const meshRef = useRef(null);
     const startTimeRef = useRef(null);
     const tempObject = useMemo(() => new THREE.Object3D(), []);
@@ -204,14 +206,14 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
     // Pre-compute edge data
     const edgeData = useMemo(() => {
         return buildings.flatMap((data) => {
-            const { width, depth, x, z, targetHeight, staggerDelayMs } = data;
+            const { width, depth, x, z, fullHeight, staggerDelayMs, buildingIndex } = data;
             const halfW = width / 2;
             const halfD = depth / 2;
             return [
-                { x: x - halfW, z: z - halfD, targetHeight, staggerDelayMs },
-                { x: x + halfW, z: z - halfD, targetHeight, staggerDelayMs },
-                { x: x - halfW, z: z + halfD, targetHeight, staggerDelayMs },
-                { x: x + halfW, z: z + halfD, targetHeight, staggerDelayMs },
+                { x: x - halfW, z: z - halfD, fullHeight, staggerDelayMs, buildingIndex },
+                { x: x + halfW, z: z - halfD, fullHeight, staggerDelayMs, buildingIndex },
+                { x: x - halfW, z: z + halfD, fullHeight, staggerDelayMs, buildingIndex },
+                { x: x + halfW, z: z + halfD, fullHeight, staggerDelayMs, buildingIndex },
             ];
         });
     }, [buildings]);
@@ -225,7 +227,9 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
         const currentTime = clock.elapsedTime * 1000;
         const animStartTime = startTimeRef.current ?? currentTime;
         edgeData.forEach((edge, idx) => {
-            const { x, z, targetHeight, staggerDelayMs } = edge;
+            const { x, z, fullHeight, staggerDelayMs, buildingIndex } = edge;
+            // Get height multiplier from shared ref (for collapse animation)
+            const heightMultiplier = heightMultipliersRef.current?.[buildingIndex] ?? 1;
             // Calculate per-building animation progress
             const elapsed = currentTime - animStartTime - staggerDelayMs;
             let animProgress = growProgress;
@@ -237,7 +241,8 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
             else if (growProgress > 0 && elapsed < 0) {
                 animProgress = 0;
             }
-            const height = animProgress * targetHeight + minHeight;
+            // Apply both grow animation and collapse multiplier
+            const height = animProgress * fullHeight * heightMultiplier + minHeight;
             const yPosition = height / 2 + baseOffset;
             tempObject.position.set(x, yPosition, z);
             tempObject.scale.set(0.3, height, 0.3); // Thin box for edge
@@ -250,24 +255,58 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
         return null;
     return (_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, numEdges], frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshBasicMaterial", { color: "#1a1a2e", transparent: true, opacity: 0.7 })] }));
 }
-function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, growProgress, animationConfig, highlightLayers, isolationMode, hasActiveHighlights, dimOpacity, heightScaling, linearScale, staggerIndices, }) {
+// Helper to check if a path is inside a directory
+function isPathInDirectory(path, directory) {
+    if (!directory)
+        return true;
+    return path === directory || path.startsWith(directory + '/');
+}
+function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, growProgress, animationConfig, heightScaling, linearScale, staggerIndices, focusDirectory, highlightLayers, isolationMode, }) {
     const meshRef = useRef(null);
     const startTimeRef = useRef(null);
     const tempObject = useMemo(() => new THREE.Object3D(), []);
     const tempColor = useMemo(() => new THREE.Color(), []);
+    // Track animated height multipliers for each building (for collapse animation)
+    const heightMultipliersRef = useRef(null);
+    const targetMultipliersRef = useRef(null);
+    // Check if highlight layers have any active items
+    const hasActiveHighlightLayers = useMemo(() => {
+        return highlightLayers.some(layer => layer.enabled && layer.items.length > 0);
+    }, [highlightLayers]);
+    // Initialize height multiplier arrays
+    useEffect(() => {
+        if (buildings.length > 0) {
+            if (!heightMultipliersRef.current || heightMultipliersRef.current.length !== buildings.length) {
+                heightMultipliersRef.current = new Float32Array(buildings.length).fill(1);
+                targetMultipliersRef.current = new Float32Array(buildings.length).fill(1);
+            }
+        }
+    }, [buildings.length]);
+    // Update target multipliers when focusDirectory or highlightLayers change
+    useEffect(() => {
+        if (!targetMultipliersRef.current)
+            return;
+        buildings.forEach((building, index) => {
+            let shouldCollapse = false;
+            // Priority 1: focusDirectory - collapse buildings outside
+            if (focusDirectory) {
+                const isInFocus = isPathInDirectory(building.path, focusDirectory);
+                shouldCollapse = !isInFocus;
+            }
+            // Priority 2: highlightLayers with collapse isolation mode
+            else if (hasActiveHighlightLayers && isolationMode === 'collapse') {
+                const highlight = getHighlightForPath(building.path, highlightLayers);
+                shouldCollapse = highlight === null;
+            }
+            targetMultipliersRef.current[index] = shouldCollapse ? 0.05 : 1;
+        });
+    }, [focusDirectory, buildings, highlightLayers, isolationMode, hasActiveHighlightLayers]);
     // Pre-compute building data
     const buildingData = useMemo(() => {
         return buildings.map((building, index) => {
             const [width, , depth] = building.dimensions;
-            const highlight = getHighlightForPath(building.path, highlightLayers);
-            const isHighlighted = highlight !== null;
-            const shouldDim = hasActiveHighlights && !isHighlighted;
-            const shouldCollapse = shouldDim && isolationMode === 'collapse';
-            const shouldHide = shouldDim && isolationMode === 'hide';
             const fullHeight = calculateBuildingHeight(building, heightScaling, linearScale);
-            const targetHeight = shouldCollapse ? 0.5 : fullHeight;
-            const baseColor = getColorForFile(building);
-            const color = isHighlighted ? highlight.color : baseColor;
+            const color = getColorForFile(building);
             const x = building.position.x - centerOffset.x;
             const z = building.position.z - centerOffset.z;
             const staggerIndex = staggerIndices[index] ?? index;
@@ -277,39 +316,30 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
                 index,
                 width,
                 depth,
-                targetHeight,
+                fullHeight,
                 color,
                 x,
                 z,
-                shouldHide,
-                shouldDim,
                 staggerDelayMs,
-                isHighlighted,
             };
         });
-    }, [
-        buildings,
-        centerOffset,
-        highlightLayers,
-        hasActiveHighlights,
-        isolationMode,
-        heightScaling,
-        linearScale,
-        staggerIndices,
-        animationConfig.staggerDelay,
-    ]);
-    const visibleBuildings = useMemo(() => buildingData.filter((b) => !b.shouldHide), [buildingData]);
+    }, [buildings, centerOffset, heightScaling, linearScale, staggerIndices, animationConfig.staggerDelay]);
     const minHeight = 0.3;
     const baseOffset = 0.2;
     const tension = animationConfig.tension || 120;
     const friction = animationConfig.friction || 14;
     const springDuration = Math.sqrt(1 / (tension * 0.001)) * friction * 20;
+    // Initialize all buildings (only on first render or when building data changes)
+    // DO NOT include focusDirectory here - that would bypass the animation
+    const initializedRef = useRef(false);
     useEffect(() => {
-        if (!meshRef.current)
+        if (!meshRef.current || buildingData.length === 0)
             return;
-        visibleBuildings.forEach((data, instanceIndex) => {
-            const { width, depth, x, z, color, targetHeight } = data;
-            const height = growProgress * targetHeight + minHeight;
+        buildingData.forEach((data, instanceIndex) => {
+            const { width, depth, x, z, color, fullHeight } = data;
+            // Use the current animated multiplier, or default to 1 on first render
+            const multiplier = heightMultipliersRef.current?.[instanceIndex] ?? 1;
+            const height = growProgress * fullHeight * multiplier + minHeight;
             const yPosition = height / 2 + baseOffset;
             tempObject.position.set(x, yPosition, z);
             tempObject.scale.set(width, height, depth);
@@ -322,24 +352,29 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
         if (meshRef.current.instanceColor) {
             meshRef.current.instanceColor.needsUpdate = true;
         }
-    }, [
-        visibleBuildings,
-        growProgress,
-        tempObject,
-        tempColor,
-        minHeight,
-        baseOffset,
-    ]);
+        initializedRef.current = true;
+    }, [buildingData, growProgress, tempObject, tempColor, minHeight, baseOffset]);
+    // Animate buildings each frame
     useFrame(({ clock }) => {
-        if (!meshRef.current)
+        if (!meshRef.current || buildingData.length === 0)
+            return;
+        if (!heightMultipliersRef.current || !targetMultipliersRef.current)
             return;
         if (startTimeRef.current === null && growProgress > 0) {
             startTimeRef.current = clock.elapsedTime * 1000;
         }
         const currentTime = clock.elapsedTime * 1000;
         const animStartTime = startTimeRef.current ?? currentTime;
-        visibleBuildings.forEach((data, instanceIndex) => {
-            const { width, depth, targetHeight, x, z, staggerDelayMs, shouldDim } = data;
+        // Animation speed for collapse/expand (lerp factor per frame)
+        const collapseSpeed = 0.08;
+        buildingData.forEach((data, instanceIndex) => {
+            const { width, depth, fullHeight, x, z, staggerDelayMs } = data;
+            // Animate height multiplier towards target
+            const currentMultiplier = heightMultipliersRef.current[instanceIndex];
+            const targetMultiplier = targetMultipliersRef.current[instanceIndex];
+            const newMultiplier = currentMultiplier + (targetMultiplier - currentMultiplier) * collapseSpeed;
+            heightMultipliersRef.current[instanceIndex] = newMultiplier;
+            // Calculate grow animation progress
             const elapsed = currentTime - animStartTime - staggerDelayMs;
             let animProgress = growProgress;
             if (growProgress > 0 && elapsed >= 0) {
@@ -350,7 +385,8 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             else if (growProgress > 0 && elapsed < 0) {
                 animProgress = 0;
             }
-            const height = animProgress * targetHeight + minHeight;
+            // Apply both grow animation and collapse multiplier
+            const height = animProgress * fullHeight * newMultiplier + minHeight;
             const yPosition = height / 2 + baseOffset;
             const isHovered = hoveredIndex === data.index;
             const scale = isHovered ? 1.05 : 1;
@@ -358,10 +394,15 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             tempObject.scale.set(width * scale, height, depth * scale);
             tempObject.updateMatrix();
             meshRef.current.setMatrixAt(instanceIndex, tempObject.matrix);
-            const opacity = shouldDim && isolationMode === 'transparent' ? dimOpacity : 1;
+            // Desaturate collapsed buildings
             tempColor.set(data.color);
-            if (opacity < 1) {
-                tempColor.multiplyScalar(opacity + 0.3);
+            if (newMultiplier < 0.5) {
+                // Lerp towards gray based on collapse amount
+                const grayAmount = 1 - newMultiplier * 2; // 0 at multiplier=0.5, 1 at multiplier=0
+                const gray = 0.3;
+                tempColor.r = tempColor.r * (1 - grayAmount) + gray * grayAmount;
+                tempColor.g = tempColor.g * (1 - grayAmount) + gray * grayAmount;
+                tempColor.b = tempColor.b * (1 - grayAmount) + gray * grayAmount;
             }
             if (isHovered) {
                 tempColor.multiplyScalar(1.2);
@@ -375,26 +416,32 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
     });
     const handlePointerMove = useCallback((e) => {
         e.stopPropagation();
-        if (e.instanceId !== undefined &&
-            e.instanceId < visibleBuildings.length) {
-            const data = visibleBuildings[e.instanceId];
+        if (e.instanceId !== undefined && e.instanceId < buildingData.length) {
+            const data = buildingData[e.instanceId];
             onHover?.(data.building);
         }
-    }, [visibleBuildings, onHover]);
+    }, [buildingData, onHover]);
     const handlePointerOut = useCallback(() => {
         onHover?.(null);
     }, [onHover]);
     const handleClick = useCallback((e) => {
         e.stopPropagation();
-        if (e.instanceId !== undefined &&
-            e.instanceId < visibleBuildings.length) {
-            const data = visibleBuildings[e.instanceId];
+        if (e.instanceId !== undefined && e.instanceId < buildingData.length) {
+            const data = buildingData[e.instanceId];
             onClick?.(data.building);
         }
-    }, [visibleBuildings, onClick]);
-    if (visibleBuildings.length === 0)
+    }, [buildingData, onClick]);
+    if (buildingData.length === 0)
         return null;
-    return (_jsxs("group", { children: [_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, visibleBuildings.length], onPointerMove: handlePointerMove, onPointerOut: handlePointerOut, onClick: handleClick, frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { metalness: 0.1, roughness: 0.35 })] }), _jsx(BuildingEdges, { buildings: visibleBuildings, growProgress: growProgress, minHeight: minHeight, baseOffset: baseOffset, springDuration: springDuration })] }));
+    return (_jsxs("group", { children: [_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, buildingData.length], onPointerMove: handlePointerMove, onPointerOut: handlePointerOut, onClick: handleClick, frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { metalness: 0.1, roughness: 0.35 })] }), _jsx(BuildingEdges, { buildings: buildingData.map(d => ({
+                    width: d.width,
+                    depth: d.depth,
+                    fullHeight: d.fullHeight,
+                    x: d.x,
+                    z: d.z,
+                    staggerDelayMs: d.staggerDelayMs,
+                    buildingIndex: d.index,
+                })), growProgress: growProgress, minHeight: minHeight, baseOffset: baseOffset, springDuration: springDuration, heightMultipliersRef: heightMultipliersRef })] }));
 }
 function AnimatedIcon({ x, z, targetHeight, iconSize, texture, opacity, growProgress, staggerDelayMs, springDuration, }) {
     const spriteRef = useRef(null);
@@ -496,10 +543,55 @@ let cameraResetFn = null;
 export function resetCamera() {
     cameraResetFn?.();
 }
-function AnimatedCamera({ citySize, isFlat }) {
+function AnimatedCamera({ citySize, isFlat, focusTarget }) {
     const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const controlsRef = useRef(null);
+    // Animated camera position and target
+    const targetPos = useMemo(() => {
+        if (focusTarget) {
+            // Position camera to look at focus target
+            const distance = Math.max(focusTarget.size * 2, 50);
+            const height = Math.max(focusTarget.size * 1.5, 40);
+            return {
+                x: focusTarget.x,
+                y: height,
+                z: focusTarget.z + distance,
+                targetX: focusTarget.x,
+                targetY: 0,
+                targetZ: focusTarget.z,
+            };
+        }
+        // Default: overview of entire city
+        const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
+        const targetZ = isFlat ? 0 : citySize * 1.3;
+        return {
+            x: 0,
+            y: targetHeight,
+            z: targetZ,
+            targetX: 0,
+            targetY: 0,
+            targetZ: 0,
+        };
+    }, [focusTarget, isFlat, citySize]);
+    // Spring animation for camera movement
+    const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
+        camX: targetPos.x,
+        camY: targetPos.y,
+        camZ: targetPos.z,
+        lookX: targetPos.targetX,
+        lookY: targetPos.targetY,
+        lookZ: targetPos.targetZ,
+        config: { tension: 60, friction: 20 },
+    });
+    // Update camera each frame based on spring values
+    useFrame(() => {
+        if (!controlsRef.current)
+            return;
+        camera.position.set(camX.get(), camY.get(), camZ.get());
+        controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
+        controlsRef.current.update();
+    });
     const resetToInitial = useCallback(() => {
         const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
         const targetZ = isFlat ? 0 : citySize * 1.3;
@@ -511,8 +603,10 @@ function AnimatedCamera({ citySize, isFlat }) {
         }
     }, [isFlat, citySize, camera]);
     useEffect(() => {
-        resetToInitial();
-    }, [resetToInitial]);
+        if (!focusTarget) {
+            resetToInitial();
+        }
+    }, [resetToInitial, focusTarget]);
     useEffect(() => {
         cameraResetFn = resetToInitial;
         return () => {
@@ -571,13 +665,132 @@ function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
             gap: 8,
         }, children: [_jsx("button", { onClick: onResetCamera, style: buttonStyle, children: "Reset View" }), _jsx("button", { onClick: onToggle, style: buttonStyle, children: isFlat ? 'Grow to 3D' : 'Flatten to 2D' })] }));
 }
-function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, growProgress, animationConfig, highlightLayers, isolationMode, dimOpacity, heightScaling, linearScale, }) {
+function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, growProgress, animationConfig, highlightLayers, isolationMode, heightScaling, linearScale, focusDirectory, }) {
     const centerOffset = useMemo(() => ({
         x: (cityData.bounds.minX + cityData.bounds.maxX) / 2,
         z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2,
     }), [cityData.bounds]);
     const citySize = Math.max(cityData.bounds.maxX - cityData.bounds.minX, cityData.bounds.maxZ - cityData.bounds.minZ);
     const activeHighlights = useMemo(() => hasActiveHighlights(highlightLayers), [highlightLayers]);
+    // Helper to check if a path is inside a directory
+    const isPathInDirectory = useCallback((path, directory) => {
+        if (!directory)
+            return true;
+        return path === directory || path.startsWith(directory + '/');
+    }, []);
+    // Three-phase animation when switching directories:
+    // Phase 1: Camera zooms out to overview
+    // Phase 2: Buildings collapse/expand
+    // Phase 3: Camera zooms into new directory
+    //
+    // We track two separate states:
+    // - buildingFocusDirectory: controls which buildings are collapsed (passed to InstancedBuildings)
+    // - cameraFocusDirectory: controls camera position (used for focusTarget calculation)
+    const [buildingFocusDirectory, setBuildingFocusDirectory] = useState(null);
+    const [cameraFocusDirectory, setCameraFocusDirectory] = useState(null);
+    const prevFocusDirectoryRef = useRef(null);
+    const animationTimersRef = useRef([]);
+    useEffect(() => {
+        // Clear any pending timers
+        animationTimersRef.current.forEach(clearTimeout);
+        animationTimersRef.current = [];
+        const prevFocus = prevFocusDirectoryRef.current;
+        prevFocusDirectoryRef.current = focusDirectory;
+        // No change
+        if (focusDirectory === prevFocus)
+            return;
+        // Case 1: Going from overview to a directory (null -> dir)
+        if (prevFocus === null && focusDirectory !== null) {
+            // Phase 1: Collapse buildings immediately
+            setBuildingFocusDirectory(focusDirectory);
+            // Phase 2: After collapse settles, zoom camera in
+            const timer = setTimeout(() => {
+                setCameraFocusDirectory(focusDirectory);
+            }, 600);
+            animationTimersRef.current.push(timer);
+            return;
+        }
+        // Case 2: Going from a directory to overview (dir -> null)
+        if (prevFocus !== null && focusDirectory === null) {
+            // Phase 1: Zoom camera out first
+            setCameraFocusDirectory(null);
+            // Phase 2: After zoom-out settles, expand buildings
+            const timer = setTimeout(() => {
+                setBuildingFocusDirectory(null);
+            }, 500);
+            animationTimersRef.current.push(timer);
+            return;
+        }
+        // Case 3: Switching between directories (dirA -> dirB)
+        if (prevFocus !== null && focusDirectory !== null) {
+            // Phase 1: Zoom camera out
+            setCameraFocusDirectory(null);
+            // Phase 2: After zoom-out, collapse/expand buildings
+            const timer1 = setTimeout(() => {
+                setBuildingFocusDirectory(focusDirectory);
+            }, 500);
+            // Phase 3: After collapse settles, zoom camera into new directory
+            const timer2 = setTimeout(() => {
+                setCameraFocusDirectory(focusDirectory);
+            }, 1100); // 500ms zoom-out + 600ms collapse
+            animationTimersRef.current.push(timer1, timer2);
+            return;
+        }
+    }, [focusDirectory]);
+    // Cleanup timers on unmount
+    useEffect(() => {
+        return () => {
+            animationTimersRef.current.forEach(clearTimeout);
+        };
+    }, []);
+    // Calculate focus target from cameraFocusDirectory (for camera)
+    const focusTarget = useMemo(() => {
+        // Use camera focus directory for camera movement
+        if (cameraFocusDirectory) {
+            const focusedBuildings = cityData.buildings.filter((building) => isPathInDirectory(building.path, cameraFocusDirectory));
+            if (focusedBuildings.length === 0)
+                return null;
+            let minX = Infinity, maxX = -Infinity;
+            let minZ = Infinity, maxZ = -Infinity;
+            for (const building of focusedBuildings) {
+                const x = building.position.x - centerOffset.x;
+                const z = building.position.z - centerOffset.z;
+                const [width, , depth] = building.dimensions;
+                minX = Math.min(minX, x - width / 2);
+                maxX = Math.max(maxX, x + width / 2);
+                minZ = Math.min(minZ, z - depth / 2);
+                maxZ = Math.max(maxZ, z + depth / 2);
+            }
+            const centerX = (minX + maxX) / 2;
+            const centerZ = (minZ + maxZ) / 2;
+            const size = Math.max(maxX - minX, maxZ - minZ);
+            return { x: centerX, z: centerZ, size };
+        }
+        // Priority 2: highlight layers
+        if (!activeHighlights)
+            return null;
+        const highlightedBuildings = cityData.buildings.filter((building) => {
+            const highlight = getHighlightForPath(building.path, highlightLayers);
+            return highlight !== null;
+        });
+        if (highlightedBuildings.length === 0)
+            return null;
+        let minX = Infinity, maxX = -Infinity;
+        let minZ = Infinity, maxZ = -Infinity;
+        for (const building of highlightedBuildings) {
+            const x = building.position.x - centerOffset.x;
+            const z = building.position.z - centerOffset.z;
+            const [width, , depth] = building.dimensions;
+            minX = Math.min(minX, x - width / 2);
+            maxX = Math.max(maxX, x + width / 2);
+            minZ = Math.min(minZ, z - depth / 2);
+            maxZ = Math.max(maxZ, z + depth / 2);
+        }
+        const centerX = (minX + maxX) / 2;
+        const centerZ = (minZ + maxZ) / 2;
+        const size = Math.max(maxX - minX, maxZ - minZ);
+        return { x: centerX, z: centerZ, size };
+    }, [cameraFocusDirectory, activeHighlights, cityData.buildings, highlightLayers, centerOffset, isPathInDirectory]);
     const staggerIndices = useMemo(() => {
         const centerX = (cityData.bounds.minX + cityData.bounds.maxX) / 2;
         const centerZ = (cityData.bounds.minZ + cityData.bounds.maxZ) / 2;
@@ -602,7 +815,7 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
     const tension = animationConfig.tension || 120;
     const friction = animationConfig.friction || 14;
     const springDuration = Math.sqrt(1 / (tension * 0.001)) * friction * 20;
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatedCamera, { citySize: citySize, isFlat: growProgress === 0 }), _jsx("ambientLight", { intensity: 1.2 }), _jsx("hemisphereLight", { args: ['#ddeeff', '#667788', 0.8], position: [0, citySize, 0] }), _jsx("directionalLight", { position: [citySize, citySize * 1.5, citySize * 0.5], intensity: 2, castShadow: true, "shadow-mapSize": [2048, 2048] }), _jsx("directionalLight", { position: [-citySize * 0.5, citySize * 0.8, -citySize * 0.5], intensity: 1 }), _jsx("directionalLight", { position: [citySize * 0.3, citySize, citySize], intensity: 0.6 }), cityData.districts.map((district) => (_jsx(DistrictFloor, { district: district, centerOffset: centerOffset, opacity: 1 }, district.path))), _jsx(InstancedBuildings, { buildings: cityData.buildings, centerOffset: centerOffset, onHover: onBuildingHover, onClick: onBuildingClick, hoveredIndex: hoveredIndex, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale, staggerIndices: staggerIndices }), _jsx(BuildingIcons, { buildings: cityData.buildings, centerOffset: centerOffset, growProgress: growProgress, heightScaling: heightScaling, linearScale: linearScale, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, staggerIndices: staggerIndices, springDuration: springDuration, staggerDelay: animationConfig.staggerDelay || 15 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatedCamera, { citySize: citySize, isFlat: growProgress === 0, focusTarget: focusTarget }), _jsx("ambientLight", { intensity: 1.2 }), _jsx("hemisphereLight", { args: ['#ddeeff', '#667788', 0.8], position: [0, citySize, 0] }), _jsx("directionalLight", { position: [citySize, citySize * 1.5, citySize * 0.5], intensity: 2, castShadow: true, "shadow-mapSize": [2048, 2048] }), _jsx("directionalLight", { position: [-citySize * 0.5, citySize * 0.8, -citySize * 0.5], intensity: 1 }), _jsx("directionalLight", { position: [citySize * 0.3, citySize, citySize], intensity: 0.6 }), cityData.districts.map((district) => (_jsx(DistrictFloor, { district: district, centerOffset: centerOffset, opacity: 1 }, district.path))), _jsx(InstancedBuildings, { buildings: cityData.buildings, centerOffset: centerOffset, onHover: onBuildingHover, onClick: onBuildingClick, hoveredIndex: hoveredIndex, growProgress: growProgress, animationConfig: animationConfig, heightScaling: heightScaling, linearScale: linearScale, staggerIndices: staggerIndices, focusDirectory: buildingFocusDirectory, highlightLayers: highlightLayers, isolationMode: isolationMode }), _jsx(BuildingIcons, { buildings: cityData.buildings, centerOffset: centerOffset, growProgress: growProgress, heightScaling: heightScaling, linearScale: linearScale, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, staggerIndices: staggerIndices, springDuration: springDuration, staggerDelay: animationConfig.staggerDelay || 15 })] }));
 }
 /**
  * FileCity3D - 3D visualization of codebase structure
@@ -610,7 +823,7 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
  * Renders CityData as an interactive 3D city where buildings represent files
  * and their height corresponds to line count or file size.
  */
-export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, className, style, animation, isGrown: externalIsGrown, onGrowChange, showControls = true, highlightLayers = [], isolationMode = 'transparent', dimOpacity = 0.15, isLoading = false, loadingMessage = 'Loading file city...', emptyMessage = 'No file tree data available', heightScaling = 'logarithmic', linearScale = 0.05, }) {
+export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, className, style, animation, isGrown: externalIsGrown, onGrowChange, showControls = true, highlightLayers = [], isolationMode = 'transparent', dimOpacity = 0.15, isLoading = false, loadingMessage = 'Loading file city...', emptyMessage = 'No file tree data available', heightScaling = 'logarithmic', linearScale = 0.05, focusDirectory = null, onDirectorySelect, }) {
     const { theme } = useTheme();
     const [hoveredBuilding, setHoveredBuilding] = useState(null);
     const [internalIsGrown, setInternalIsGrown] = useState(false);
@@ -681,6 +894,6 @@ export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingC
                     left: 0,
                     width: '100%',
                     height: '100%',
-                }, children: _jsx(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale }) }), _jsx(InfoPanel, { building: hoveredBuilding }), showControls && (_jsx(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))] }));
+                }, children: _jsx(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, heightScaling: heightScaling, linearScale: linearScale, focusDirectory: focusDirectory }) }), _jsx(InfoPanel, { building: hoveredBuilding }), showControls && (_jsx(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))] }));
 }
 export default FileCity3D;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "type": "module",
   "description": "React components for File City visualization",
   "main": "dist/index.js",