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

package/src/components/FileCity3D/FileCity3D.tsx

@@ -7,22 +7,11 @@
  * Supports animated transition from 2D (flat) to 3D (grown buildings).
  */
 
-import React, {
-  useMemo,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-} from 'react';
+import React, { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import { Canvas, useFrame, ThreeEvent, useThree } from '@react-three/fiber';
-import { useTheme } from '@principal-ade/industry-theme';
+
 import { animated, useSpring, config } from '@react-spring/three';
-import {
-  OrbitControls,
-  PerspectiveCamera,
-  Text,
-  RoundedBox,
-} from '@react-three/drei';
+import { OrbitControls, PerspectiveCamera, Text, RoundedBox } from '@react-three/drei';
 import { getFileConfig } from '@principal-ai/file-city-builder';
 import type {
   CityData,
@@ -159,7 +148,7 @@ function isCodeFile(extension: string): boolean {
 function calculateBuildingHeight(
   building: CityBuilding,
   scaling: HeightScaling = 'logarithmic',
-  linearScale: number = 0.05
+  linearScale: number = 0.05,
 ): number {
   const minHeight = 2;
 
@@ -194,15 +183,23 @@ function calculateBuildingHeight(
 const LUCIDE_ICONS: Record<string, string> = {
   Atom: '<circle cx="12" cy="12" r="1"/><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"/><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"/>',
   Lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
-  EyeOff: '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>',
+  EyeOff:
+    '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>',
   Key: '<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/>',
-  GitBranch: '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
-  TestTube: '<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2"/><path d="M8.5 2h7"/><path d="M14.5 16h-5"/>',
-  FlaskConical: '<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>',
-  BookText: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/>',
-  BookOpen: '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
-  ScrollText: '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>',
-  Settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  GitBranch:
+    '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  TestTube:
+    '<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2"/><path d="M8.5 2h7"/><path d="M14.5 16h-5"/>',
+  FlaskConical:
+    '<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>',
+  BookText:
+    '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><path d="M8 11h8"/><path d="M8 7h6"/>',
+  BookOpen:
+    '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
+  ScrollText:
+    '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>',
+  Settings:
+    '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
   Home: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
 };
 
@@ -283,7 +280,7 @@ function getColorForFile(building: CityBuilding): string {
  */
 function getHighlightForPath(
   path: string,
-  layers: HighlightLayer[]
+  layers: HighlightLayer[],
 ): { color: string; opacity: number } | null {
   for (const layer of layers) {
     if (!layer.enabled) continue;
@@ -292,10 +289,7 @@ function getHighlightForPath(
       if (item.type === 'file' && item.path === path) {
         return { color: layer.color, opacity: layer.opacity ?? 1 };
       }
-      if (
-        item.type === 'directory' &&
-        (path === item.path || path.startsWith(item.path + '/'))
-      ) {
+      if (item.type === 'directory' && (path === item.path || path.startsWith(item.path + '/'))) {
         return { color: layer.color, opacity: layer.opacity ?? 1 };
       }
     }
@@ -304,12 +298,15 @@ function getHighlightForPath(
 }
 
 function hasActiveHighlights(layers: HighlightLayer[]): boolean {
-  return layers.some((layer) => layer.enabled && layer.items.length > 0);
+  return layers.some(layer => layer.enabled && layer.items.length > 0);
 }
 
 // Animated RoundedBox wrapper
 const AnimatedRoundedBox = animated(RoundedBox);
 
+// Animated meshStandardMaterial for opacity transitions
+const AnimatedMeshStandardMaterial = animated('meshStandardMaterial');
+
 // ============================================================================
 // Building Edges - Batched edge rendering for performance
 // ============================================================================
@@ -317,10 +314,11 @@ const AnimatedRoundedBox = animated(RoundedBox);
 interface BuildingEdgeData {
   width: number;
   depth: number;
-  targetHeight: number;
+  fullHeight: number;
   x: number;
   z: number;
   staggerDelayMs: number;
+  buildingIndex: number; // Index to look up height multiplier
 }
 
 interface BuildingEdgesProps {
@@ -329,9 +327,17 @@ interface BuildingEdgesProps {
   minHeight: number;
   baseOffset: number;
   springDuration: number;
+  heightMultipliersRef: React.MutableRefObject<Float32Array | null>;
 }
 
-function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration }: BuildingEdgesProps) {
+function BuildingEdges({
+  buildings,
+  growProgress,
+  minHeight,
+  baseOffset,
+  springDuration,
+  heightMultipliersRef,
+}: BuildingEdgesProps) {
   const meshRef = useRef<THREE.InstancedMesh>(null);
   const startTimeRef = useRef<number | null>(null);
   const tempObject = useMemo(() => new THREE.Object3D(), []);
@@ -341,16 +347,16 @@ 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;
+    return buildings.flatMap(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]);
@@ -367,7 +373,10 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
     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;
@@ -381,7 +390,8 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
         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);
@@ -416,13 +426,18 @@ interface InstancedBuildingsProps {
   hoveredIndex: number | null;
   growProgress: number;
   animationConfig: AnimationConfig;
-  highlightLayers: HighlightLayer[];
-  isolationMode: IsolationMode;
-  hasActiveHighlights: boolean;
-  dimOpacity: number;
   heightScaling: HeightScaling;
   linearScale: number;
   staggerIndices: number[];
+  focusDirectory: string | null;
+  highlightLayers: HighlightLayer[];
+  isolationMode: IsolationMode;
+}
+
+// Helper to check if a path is inside a directory
+function isPathInDirectory(path: string, directory: string | null): boolean {
+  if (!directory) return true;
+  return path === directory || path.startsWith(directory + '/');
 }
 
 function InstancedBuildings({
@@ -433,91 +448,116 @@ function InstancedBuildings({
   hoveredIndex,
   growProgress,
   animationConfig,
-  highlightLayers,
-  isolationMode,
-  hasActiveHighlights,
-  dimOpacity,
   heightScaling,
   linearScale,
   staggerIndices,
+  focusDirectory,
+  highlightLayers,
+  isolationMode,
 }: InstancedBuildingsProps) {
   const meshRef = useRef<THREE.InstancedMesh>(null);
   const startTimeRef = useRef<number | null>(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<Float32Array | null>(null);
+  const targetMultipliersRef = useRef<Float32Array | null>(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 fullHeight = calculateBuildingHeight(building, heightScaling, linearScale);
+      const color = getColorForFile(building);
 
       const x = building.position.x - centerOffset.x;
       const z = building.position.z - centerOffset.z;
 
       const staggerIndex = staggerIndices[index] ?? index;
-      const staggerDelayMs =
-        (animationConfig.staggerDelay || 15) * staggerIndex;
+      const staggerDelayMs = (animationConfig.staggerDelay || 15) * staggerIndex;
 
       return {
         building,
         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]
-  );
-
   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) return;
+    if (!meshRef.current || buildingData.length === 0) return;
+
+    buildingData.forEach((data, instanceIndex) => {
+      const { width, depth, x, z, color, fullHeight } = data;
 
-    visibleBuildings.forEach((data, instanceIndex) => {
-      const { width, depth, x, z, color, targetHeight } = data;
+      // Use the current animated multiplier, or default to 1 on first render
+      const multiplier = heightMultipliersRef.current?.[instanceIndex] ?? 1;
 
-      const height = growProgress * targetHeight + minHeight;
+      const height = growProgress * fullHeight * multiplier + minHeight;
       const yPosition = height / 2 + baseOffset;
 
       tempObject.position.set(x, yPosition, z);
@@ -534,17 +574,14 @@ function InstancedBuildings({
     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) return;
+    if (!meshRef.current || buildingData.length === 0) return;
+    if (!heightMultipliersRef.current || !targetMultipliersRef.current) return;
 
     if (startTimeRef.current === null && growProgress > 0) {
       startTimeRef.current = clock.elapsedTime * 1000;
@@ -553,10 +590,20 @@ function InstancedBuildings({
     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;
 
@@ -568,7 +615,8 @@ function InstancedBuildings({
         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;
@@ -580,11 +628,15 @@ function InstancedBuildings({
 
       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);
@@ -601,15 +653,12 @@ function InstancedBuildings({
   const handlePointerMove = useCallback(
     (e: ThreeEvent<PointerEvent>) => {
       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(() => {
@@ -619,25 +668,22 @@ function InstancedBuildings({
   const handleClick = useCallback(
     (e: ThreeEvent<MouseEvent>) => {
       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]
+    [buildingData, onClick],
   );
 
-  if (visibleBuildings.length === 0) return null;
+  if (buildingData.length === 0) return null;
 
   return (
     <group>
-      {/* Main building meshes */}
+      {/* All buildings - single mesh, original colors */}
       <instancedMesh
         ref={meshRef}
-        args={[undefined, undefined, visibleBuildings.length]}
+        args={[undefined, undefined, buildingData.length]}
         onPointerMove={handlePointerMove}
         onPointerOut={handlePointerOut}
         onClick={handleClick}
@@ -647,13 +693,22 @@ function InstancedBuildings({
         <meshStandardMaterial metalness={0.1} roughness={0.35} />
       </instancedMesh>
 
-      {/* Building edge outlines - batched into single geometry for performance */}
+      {/* Building edge outlines */}
       <BuildingEdges
-        buildings={visibleBuildings}
+        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}
       />
     </group>
   );
@@ -741,11 +796,7 @@ function AnimatedIcon({
   });
 
   return (
-    <sprite
-      ref={spriteRef}
-      position={[x, 0, z]}
-      scale={[iconSize, iconSize, 1]}
-    >
+    <sprite ref={spriteRef} position={[x, 0, z]} scale={[iconSize, iconSize, 1]}>
       <spriteMaterial
         ref={materialRef}
         map={texture}
@@ -806,49 +857,61 @@ function BuildingIcons({
         };
       })
       .filter(Boolean) as Array<{
-        building: CityBuilding;
-        config: FileConfigResult;
-        x: number;
-        z: number;
-        targetHeight: number;
-        shouldDim: boolean;
-        staggerDelayMs: number;
-      }>;
-  }, [buildings, centerOffset, highlightLayers, isolationMode, hasActiveHighlights, heightScaling, linearScale, staggerIndices, staggerDelay]);
+      building: CityBuilding;
+      config: FileConfigResult;
+      x: number;
+      z: number;
+      targetHeight: number;
+      shouldDim: boolean;
+      staggerDelayMs: number;
+    }>;
+  }, [
+    buildings,
+    centerOffset,
+    highlightLayers,
+    isolationMode,
+    hasActiveHighlights,
+    heightScaling,
+    linearScale,
+    staggerIndices,
+    staggerDelay,
+  ]);
 
   // Don't render if no progress yet
   if (growProgress < 0.1) return null;
 
   return (
     <>
-      {buildingsWithIcons.map(({ building, config, x, z, targetHeight, shouldDim, staggerDelayMs }) => {
-        const icon = config.icon!;
-        const texture = getIconTexture(icon.name, icon.color || '#ffffff');
-        if (!texture) return null;
-
-        // Icon size based on building dimensions
-        const [width] = building.dimensions;
-        const baseSize = Math.max(width * 0.8, 6);
-        const heightBoost = Math.min(targetHeight / 20, 3);
-        const iconSize = (baseSize + heightBoost) * (icon.size || 1);
-
-        const opacity = shouldDim && isolationMode === 'transparent' ? 0.3 : 1;
-
-        return (
-          <AnimatedIcon
-            key={building.path}
-            x={x}
-            z={z}
-            targetHeight={targetHeight}
-            iconSize={iconSize}
-            texture={texture}
-            opacity={opacity}
-            growProgress={growProgress}
-            staggerDelayMs={staggerDelayMs}
-            springDuration={springDuration}
-          />
-        );
-      })}
+      {buildingsWithIcons.map(
+        ({ building, config, x, z, targetHeight, shouldDim, staggerDelayMs }) => {
+          const icon = config.icon!;
+          const texture = getIconTexture(icon.name, icon.color || '#ffffff');
+          if (!texture) return null;
+
+          // Icon size based on building dimensions
+          const [width] = building.dimensions;
+          const baseSize = Math.max(width * 0.8, 6);
+          const heightBoost = Math.min(targetHeight / 20, 3);
+          const iconSize = (baseSize + heightBoost) * (icon.size || 1);
+
+          const opacity = shouldDim && isolationMode === 'transparent' ? 0.3 : 1;
+
+          return (
+            <AnimatedIcon
+              key={building.path}
+              x={x}
+              z={z}
+              targetHeight={targetHeight}
+              iconSize={iconSize}
+              texture={texture}
+              opacity={opacity}
+              growProgress={growProgress}
+              staggerDelayMs={staggerDelayMs}
+              springDuration={springDuration}
+            />
+          );
+        },
+      )}
     </>
   );
 }
@@ -860,11 +923,7 @@ interface DistrictFloorProps {
   opacity: number;
 }
 
-function DistrictFloor({
-  district,
-  centerOffset,
-  opacity,
-}: DistrictFloorProps) {
+function DistrictFloor({ district, centerOffset, opacity }: DistrictFloorProps) {
   const { worldBounds } = district;
   const width = worldBounds.maxX - worldBounds.minX;
   const depth = worldBounds.maxZ - worldBounds.minZ;
@@ -878,15 +937,8 @@ function DistrictFloor({
 
   return (
     <group position={[centerX, 0, centerZ]}>
-      <lineSegments
-        rotation={[-Math.PI / 2, 0, 0]}
-        position={[0, floorY, 0]}
-        renderOrder={-1}
-      >
-        <edgesGeometry
-          args={[new THREE.PlaneGeometry(width, depth)]}
-          attach="geometry"
-        />
+      <lineSegments rotation={[-Math.PI / 2, 0, 0]} position={[0, floorY, 0]} renderOrder={-1}>
+        <edgesGeometry args={[new THREE.PlaneGeometry(width, depth)]} attach="geometry" />
         <lineBasicMaterial color="#475569" depthWrite={false} />
       </lineSegments>
 
@@ -909,9 +961,16 @@ function DistrictFloor({
 }
 
 // Camera controller
+interface FocusTarget {
+  x: number;
+  z: number;
+  size: number; // Approximate size of the focused area
+}
+
 interface AnimatedCameraProps {
   citySize: number;
   isFlat: boolean;
+  focusTarget?: FocusTarget | null;
 }
 
 let cameraResetFn: (() => void) | null = null;
@@ -920,11 +979,59 @@ export function resetCamera() {
   cameraResetFn?.();
 }
 
-function AnimatedCamera({ citySize, isFlat }: AnimatedCameraProps) {
+function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps) {
   const { camera } = useThree();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const controlsRef = useRef<any>(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;
@@ -939,8 +1046,10 @@ function AnimatedCamera({ citySize, isFlat }: AnimatedCameraProps) {
   }, [isFlat, citySize, camera]);
 
   useEffect(() => {
-    resetToInitial();
-  }, [resetToInitial]);
+    if (!focusTarget) {
+      resetToInitial();
+    }
+  }, [resetToInitial, focusTarget]);
 
   useEffect(() => {
     cameraResetFn = resetToInitial;
@@ -974,8 +1083,7 @@ function InfoPanel({ building }: InfoPanelProps) {
 
   const fileName = building.path.split('/').pop();
   const dirPath = building.path.split('/').slice(0, -1).join('/');
-  const rawExt =
-    building.fileExtension || building.path.split('.').pop() || '';
+  const rawExt = building.fileExtension || building.path.split('.').pop() || '';
   const ext = rawExt.replace(/^\./, '');
   const isCode = isCodeFile(ext);
 
@@ -1010,9 +1118,7 @@ function InfoPanel({ building }: InfoPanelProps) {
         {building.lineCount !== undefined && (
           <span>{building.lineCount.toLocaleString()} lines</span>
         )}
-        {building.size !== undefined && (
-          <span>{(building.size / 1024).toFixed(1)} KB</span>
-        )}
+        {building.size !== undefined && <span>{(building.size / 1024).toFixed(1)} KB</span>}
       </div>
     </div>
   );
@@ -1025,11 +1131,7 @@ interface ControlsOverlayProps {
   onResetCamera: () => void;
 }
 
-function ControlsOverlay({
-  isFlat,
-  onToggle,
-  onResetCamera,
-}: ControlsOverlayProps) {
+function ControlsOverlay({ isFlat, onToggle, onResetCamera }: ControlsOverlayProps) {
   const buttonStyle = {
     background: 'rgba(15, 23, 42, 0.9)',
     border: '1px solid #334155',
@@ -1073,9 +1175,9 @@ interface CitySceneProps {
   animationConfig: AnimationConfig;
   highlightLayers: HighlightLayer[];
   isolationMode: IsolationMode;
-  dimOpacity: number;
   heightScaling: HeightScaling;
   linearScale: number;
+  focusDirectory: string | null;
 }
 
 function CityScene({
@@ -1087,27 +1189,177 @@ function CityScene({
   animationConfig,
   highlightLayers,
   isolationMode,
-  dimOpacity,
   heightScaling,
   linearScale,
+  focusDirectory,
 }: CitySceneProps) {
   const centerOffset = useMemo(
     () => ({
       x: (cityData.bounds.minX + cityData.bounds.maxX) / 2,
       z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2,
     }),
-    [cityData.bounds]
+    [cityData.bounds],
   );
 
   const citySize = Math.max(
     cityData.bounds.maxX - cityData.bounds.minX,
-    cityData.bounds.maxZ - cityData.bounds.minZ
+    cityData.bounds.maxZ - cityData.bounds.minZ,
   );
 
-  const activeHighlights = useMemo(
-    () => hasActiveHighlights(highlightLayers),
-    [highlightLayers]
-  );
+  const activeHighlights = useMemo(() => hasActiveHighlights(highlightLayers), [highlightLayers]);
+
+  // Helper to check if a path is inside a directory
+  const isPathInDirectory = useCallback((path: string, directory: string) => {
+    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<string | null>(null);
+  const [cameraFocusDirectory, setCameraFocusDirectory] = useState<string | null>(null);
+  const prevFocusDirectoryRef = useRef<string | null>(null);
+  const animationTimersRef = useRef<NodeJS.Timeout[]>([]);
+
+  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((): FocusTarget | null => {
+    // 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 (only if no focusDirectory is pending)
+    // Don't focus on highlights if we're waiting for cameraFocusDirectory to catch up
+    if (!activeHighlights || focusDirectory) 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,
+    focusDirectory,
+    activeHighlights,
+    cityData.buildings,
+    highlightLayers,
+    centerOffset,
+    isPathInDirectory,
+  ]);
 
   const staggerIndices = useMemo(() => {
     const centerX = (cityData.bounds.minX + cityData.bounds.maxX) / 2;
@@ -1116,8 +1368,7 @@ function CityScene({
     const withDistance = cityData.buildings.map((b, originalIndex) => ({
       originalIndex,
       distance: Math.sqrt(
-        Math.pow(b.position.x - centerX, 2) +
-          Math.pow(b.position.z - centerZ, 2)
+        Math.pow(b.position.x - centerX, 2) + Math.pow(b.position.z - centerZ, 2),
       ),
     }));
 
@@ -1133,7 +1384,7 @@ function CityScene({
 
   const hoveredIndex = useMemo(() => {
     if (!hoveredBuilding) return null;
-    return cityData.buildings.findIndex((b) => b.path === hoveredBuilding.path);
+    return cityData.buildings.findIndex(b => b.path === hoveredBuilding.path);
   }, [hoveredBuilding, cityData.buildings]);
 
   // Calculate spring duration for animation sync
@@ -1143,13 +1394,10 @@ function CityScene({
 
   return (
     <>
-      <AnimatedCamera citySize={citySize} isFlat={growProgress === 0} />
+      <AnimatedCamera citySize={citySize} isFlat={growProgress === 0} focusTarget={focusTarget} />
 
       <ambientLight intensity={1.2} />
-      <hemisphereLight
-        args={['#ddeeff', '#667788', 0.8]}
-        position={[0, citySize, 0]}
-      />
+      <hemisphereLight args={['#ddeeff', '#667788', 0.8]} position={[0, citySize, 0]} />
       <directionalLight
         position={[citySize, citySize * 1.5, citySize * 0.5]}
         intensity={2}
@@ -1160,12 +1408,9 @@ function CityScene({
         position={[-citySize * 0.5, citySize * 0.8, -citySize * 0.5]}
         intensity={1}
       />
-      <directionalLight
-        position={[citySize * 0.3, citySize, citySize]}
-        intensity={0.6}
-      />
+      <directionalLight position={[citySize * 0.3, citySize, citySize]} intensity={0.6} />
 
-      {cityData.districts.map((district) => (
+      {cityData.districts.map(district => (
         <DistrictFloor
           key={district.path}
           district={district}
@@ -1182,13 +1427,12 @@ function CityScene({
         hoveredIndex={hoveredIndex}
         growProgress={growProgress}
         animationConfig={animationConfig}
-        highlightLayers={highlightLayers}
-        isolationMode={isolationMode}
-        hasActiveHighlights={activeHighlights}
-        dimOpacity={dimOpacity}
         heightScaling={heightScaling}
         linearScale={linearScale}
         staggerIndices={staggerIndices}
+        focusDirectory={buildingFocusDirectory}
+        highlightLayers={highlightLayers}
+        isolationMode={isolationMode}
       />
 
       <BuildingIcons
@@ -1249,6 +1493,14 @@ 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;
+  /** Background color for the canvas container */
+  backgroundColor?: string;
+  /** Text color for secondary/placeholder text */
+  textColor?: string;
 }
 
 /**
@@ -1276,20 +1528,17 @@ export function FileCity3D({
   emptyMessage = 'No file tree data available',
   heightScaling = 'logarithmic',
   linearScale = 0.05,
+  focusDirectory = null,
+  onDirectorySelect,
+  backgroundColor = '#0f172a',
+  textColor = '#94a3b8',
 }: FileCity3DProps) {
-  const { theme } = useTheme();
-  const [hoveredBuilding, setHoveredBuilding] = useState<CityBuilding | null>(
-    null
-  );
+  const [hoveredBuilding, setHoveredBuilding] = useState<CityBuilding | null>(null);
   const [internalIsGrown, setInternalIsGrown] = useState(false);
 
-  const animationConfig = useMemo(
-    () => ({ ...DEFAULT_ANIMATION, ...animation }),
-    [animation]
-  );
+  const animationConfig = useMemo(() => ({ ...DEFAULT_ANIMATION, ...animation }), [animation]);
 
-  const isGrown =
-    externalIsGrown !== undefined ? externalIsGrown : internalIsGrown;
+  const isGrown = externalIsGrown !== undefined ? externalIsGrown : internalIsGrown;
   const setIsGrown = (value: boolean) => {
     setInternalIsGrown(value);
     onGrowChange?.(value);
@@ -1321,12 +1570,12 @@ export function FileCity3D({
           width,
           height,
           position: 'relative',
-          background: theme.colors.background,
+          background: backgroundColor,
           overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          color: theme.colors.textSecondary,
+          color: textColor,
           fontFamily: 'system-ui, sans-serif',
           fontSize: 14,
           ...style,
@@ -1345,12 +1594,12 @@ export function FileCity3D({
           width,
           height,
           position: 'relative',
-          background: theme.colors.background,
+          background: backgroundColor,
           overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          color: theme.colors.textSecondary,
+          color: textColor,
           fontFamily: 'system-ui, sans-serif',
           fontSize: 14,
           ...style,
@@ -1368,7 +1617,7 @@ export function FileCity3D({
         width,
         height,
         position: 'relative',
-        background: theme.colors.background,
+        background: backgroundColor,
         overflow: 'hidden',
         ...style,
       }}
@@ -1392,18 +1641,14 @@ export function FileCity3D({
           animationConfig={animationConfig}
           highlightLayers={highlightLayers}
           isolationMode={isolationMode}
-          dimOpacity={dimOpacity}
           heightScaling={heightScaling}
           linearScale={linearScale}
+          focusDirectory={focusDirectory}
         />
       </Canvas>
       <InfoPanel building={hoveredBuilding} />
       {showControls && (
-        <ControlsOverlay
-          isFlat={!isGrown}
-          onToggle={handleToggle}
-          onResetCamera={resetCamera}
-        />
+        <ControlsOverlay isFlat={!isGrown} onToggle={handleToggle} onResetCamera={resetCamera} />
       )}
     </div>
   );