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

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

@@ -96,6 +96,10 @@ export interface FileCity3DProps {
     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;
 }
 /**
  * FileCity3D - 3D visualization of codebase structure
@@ -103,6 +107,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, focusDirectory, onDirectorySelect, }: 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, backgroundColor, textColor, }: 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

@@ -7,11 +7,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Supports animated transition from 2D (flat) to 3D (grown buildings).
  */
-import { useMemo, useRef, useState, useEffect, useCallback, } from 'react';
+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, useSpring } 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 * as THREE from 'three';
 const DEFAULT_ANIMATION = {
@@ -182,8 +181,7 @@ function getHighlightForPath(path, layers) {
             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 };
             }
         }
@@ -191,13 +189,13 @@ function getHighlightForPath(path, layers) {
     return null;
 }
 function hasActiveHighlights(layers) {
-    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');
-function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration, heightMultipliersRef }) {
+function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration, heightMultipliersRef, }) {
     const meshRef = useRef(null);
     const startTimeRef = useRef(null);
     const tempObject = useMemo(() => new THREE.Object3D(), []);
@@ -205,7 +203,7 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
     const numEdges = buildings.length * 4;
     // Pre-compute edge data
     const edgeData = useMemo(() => {
-        return buildings.flatMap((data) => {
+        return buildings.flatMap(data => {
             const { width, depth, x, z, fullHeight, staggerDelayMs, buildingIndex } = data;
             const halfW = width / 2;
             const halfD = depth / 2;
@@ -276,7 +274,8 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
     // Initialize height multiplier arrays
     useEffect(() => {
         if (buildings.length > 0) {
-            if (!heightMultipliersRef.current || heightMultipliersRef.current.length !== buildings.length) {
+            if (!heightMultipliersRef.current ||
+                heightMultipliersRef.current.length !== buildings.length) {
                 heightMultipliersRef.current = new Float32Array(buildings.length).fill(1);
                 targetMultipliersRef.current = new Float32Array(buildings.length).fill(1);
             }
@@ -323,7 +322,14 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
                 staggerDelayMs,
             };
         });
-    }, [buildings, centerOffset, heightScaling, linearScale, staggerIndices, animationConfig.staggerDelay]);
+    }, [
+        buildings,
+        centerOffset,
+        heightScaling,
+        linearScale,
+        staggerIndices,
+        animationConfig.staggerDelay,
+    ]);
     const minHeight = 0.3;
     const baseOffset = 0.2;
     const tension = animationConfig.tension || 120;
@@ -510,7 +516,17 @@ function BuildingIcons({ buildings, centerOffset, growProgress, heightScaling, l
             };
         })
             .filter(Boolean);
-    }, [buildings, centerOffset, highlightLayers, isolationMode, hasActiveHighlights, heightScaling, linearScale, staggerIndices, staggerDelay]);
+    }, [
+        buildings,
+        centerOffset,
+        highlightLayers,
+        isolationMode,
+        hasActiveHighlights,
+        heightScaling,
+        linearScale,
+        staggerIndices,
+        staggerDelay,
+    ]);
     // Don't render if no progress yet
     if (growProgress < 0.1)
         return null;
@@ -528,7 +544,7 @@ function BuildingIcons({ buildings, centerOffset, growProgress, heightScaling, l
             return (_jsx(AnimatedIcon, { x: x, z: z, targetHeight: targetHeight, iconSize: iconSize, texture: texture, opacity: opacity, growProgress: growProgress, staggerDelayMs: staggerDelayMs, springDuration: springDuration }, building.path));
         }) }));
 }
-function DistrictFloor({ district, centerOffset, opacity, }) {
+function DistrictFloor({ district, centerOffset, opacity }) {
     const { worldBounds } = district;
     const width = worldBounds.maxX - worldBounds.minX;
     const depth = worldBounds.maxZ - worldBounds.minZ;
@@ -642,9 +658,9 @@ function InfoPanel({ building }) {
                     marginTop: 4,
                     display: 'flex',
                     gap: 12,
-                }, children: [building.lineCount !== undefined && (_jsxs("span", { children: [building.lineCount.toLocaleString(), " lines"] })), building.size !== undefined && (_jsxs("span", { children: [(building.size / 1024).toFixed(1), " KB"] }))] })] }));
+                }, children: [building.lineCount !== undefined && (_jsxs("span", { children: [building.lineCount.toLocaleString(), " lines"] })), building.size !== undefined && _jsxs("span", { children: [(building.size / 1024).toFixed(1), " KB"] })] })] }));
 }
-function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
+function ControlsOverlay({ isFlat, onToggle, onResetCamera }) {
     const buttonStyle = {
         background: 'rgba(15, 23, 42, 0.9)',
         border: '1px solid #334155',
@@ -747,7 +763,7 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
     const focusTarget = useMemo(() => {
         // Use camera focus directory for camera movement
         if (cameraFocusDirectory) {
-            const focusedBuildings = cityData.buildings.filter((building) => isPathInDirectory(building.path, cameraFocusDirectory));
+            const focusedBuildings = cityData.buildings.filter(building => isPathInDirectory(building.path, cameraFocusDirectory));
             if (focusedBuildings.length === 0)
                 return null;
             let minX = Infinity, maxX = -Infinity;
@@ -766,10 +782,11 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
             const size = Math.max(maxX - minX, maxZ - minZ);
             return { x: centerX, z: centerZ, size };
         }
-        // Priority 2: highlight layers
-        if (!activeHighlights)
+        // 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 highlightedBuildings = cityData.buildings.filter(building => {
             const highlight = getHighlightForPath(building.path, highlightLayers);
             return highlight !== null;
         });
@@ -790,14 +807,21 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
         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]);
+    }, [
+        cameraFocusDirectory,
+        focusDirectory,
+        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;
         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)),
+            distance: Math.sqrt(Math.pow(b.position.x - centerX, 2) + Math.pow(b.position.z - centerZ, 2)),
         }));
         withDistance.sort((a, b) => a.distance - b.distance);
         const indices = new Array(cityData.buildings.length);
@@ -809,13 +833,13 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
     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
     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, 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 })] }));
+    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
@@ -823,8 +847,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, focusDirectory = null, onDirectorySelect, }) {
-    const { theme } = useTheme();
+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, backgroundColor = '#0f172a', textColor = '#94a3b8', }) {
     const [hoveredBuilding, setHoveredBuilding] = useState(null);
     const [internalIsGrown, setInternalIsGrown] = useState(false);
     const animationConfig = useMemo(() => ({ ...DEFAULT_ANIMATION, ...animation }), [animation]);
@@ -854,12 +877,12 @@ export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingC
                 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,
@@ -870,12 +893,12 @@ export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingC
                 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,
@@ -885,7 +908,7 @@ export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingC
             width,
             height,
             position: 'relative',
-            background: theme.colors.background,
+            background: backgroundColor,
             overflow: 'hidden',
             ...style,
         }, children: [_jsx(Canvas, { shadows: true, style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "type": "module",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
@@ -22,13 +22,11 @@
     "three": "^0.175.0"
   },
   "peerDependencies": {
-    "@principal-ade/industry-theme": ">=0.1.3",
     "@principal-ai/alexandria-core-library": ">=0.1.36",
     "@principal-ai/file-city-builder": ">=0.4.5",
     "react": "^19.0.0"
   },
   "devDependencies": {
-    "@principal-ade/industry-theme": "^0.1.8",
     "@principal-ai/alexandria-core-library": "^0.3.2",
     "@principal-ai/file-city-builder": "^0.4.5",
     "@storybook/addon-docs": "^10.1.2",

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,7 +298,7 @@ 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
@@ -336,7 +330,14 @@ interface BuildingEdgesProps {
   heightMultipliersRef: React.MutableRefObject<Float32Array | null>;
 }
 
-function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration, heightMultipliersRef }: 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(), []);
@@ -346,7 +347,7 @@ function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springD
 
   // Pre-compute edge data
   const edgeData = useMemo(() => {
-    return buildings.flatMap((data) => {
+    return buildings.flatMap(data => {
       const { width, depth, x, z, fullHeight, staggerDelayMs, buildingIndex } = data;
       const halfW = width / 2;
       const halfD = depth / 2;
@@ -471,7 +472,10 @@ function InstancedBuildings({
   // Initialize height multiplier arrays
   useEffect(() => {
     if (buildings.length > 0) {
-      if (!heightMultipliersRef.current || heightMultipliersRef.current.length !== buildings.length) {
+      if (
+        !heightMultipliersRef.current ||
+        heightMultipliersRef.current.length !== buildings.length
+      ) {
         heightMultipliersRef.current = new Float32Array(buildings.length).fill(1);
         targetMultipliersRef.current = new Float32Array(buildings.length).fill(1);
       }
@@ -525,7 +529,14 @@ function InstancedBuildings({
         staggerDelayMs,
       };
     });
-  }, [buildings, centerOffset, heightScaling, linearScale, staggerIndices, animationConfig.staggerDelay]);
+  }, [
+    buildings,
+    centerOffset,
+    heightScaling,
+    linearScale,
+    staggerIndices,
+    animationConfig.staggerDelay,
+  ]);
 
   const minHeight = 0.3;
   const baseOffset = 0.2;
@@ -588,7 +599,8 @@ function InstancedBuildings({
       // Animate height multiplier towards target
       const currentMultiplier = heightMultipliersRef.current![instanceIndex];
       const targetMultiplier = targetMultipliersRef.current![instanceIndex];
-      const newMultiplier = currentMultiplier + (targetMultiplier - currentMultiplier) * collapseSpeed;
+      const newMultiplier =
+        currentMultiplier + (targetMultiplier - currentMultiplier) * collapseSpeed;
       heightMultipliersRef.current![instanceIndex] = newMultiplier;
 
       // Calculate grow animation progress
@@ -646,7 +658,7 @@ function InstancedBuildings({
         onHover?.(data.building);
       }
     },
-    [buildingData, onHover]
+    [buildingData, onHover],
   );
 
   const handlePointerOut = useCallback(() => {
@@ -661,7 +673,7 @@ function InstancedBuildings({
         onClick?.(data.building);
       }
     },
-    [buildingData, onClick]
+    [buildingData, onClick],
   );
 
   if (buildingData.length === 0) return null;
@@ -784,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}
@@ -849,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}
+            />
+          );
+        },
+      )}
     </>
   );
 }
@@ -903,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;
@@ -921,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>
 
@@ -955,7 +964,7 @@ function DistrictFloor({
 interface FocusTarget {
   x: number;
   z: number;
-  size: number;  // Approximate size of the focused area
+  size: number; // Approximate size of the focused area
 }
 
 interface AnimatedCameraProps {
@@ -1074,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);
 
@@ -1110,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>
   );
@@ -1125,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',
@@ -1196,18 +1198,15 @@ function CityScene({
       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) => {
@@ -1291,14 +1290,16 @@ function CityScene({
   const focusTarget = useMemo((): FocusTarget | null => {
     // Use camera focus directory for camera movement
     if (cameraFocusDirectory) {
-      const focusedBuildings = cityData.buildings.filter((building) =>
-        isPathInDirectory(building.path, 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;
+      let minX = Infinity,
+        maxX = -Infinity;
+      let minZ = Infinity,
+        maxZ = -Infinity;
 
       for (const building of focusedBuildings) {
         const x = building.position.x - centerOffset.x;
@@ -1318,18 +1319,21 @@ function CityScene({
       return { x: centerX, z: centerZ, size };
     }
 
-    // Priority 2: highlight layers
-    if (!activeHighlights) return null;
+    // 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 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;
+    let minX = Infinity,
+      maxX = -Infinity;
+    let minZ = Infinity,
+      maxZ = -Infinity;
 
     for (const building of highlightedBuildings) {
       const x = building.position.x - centerOffset.x;
@@ -1347,7 +1351,15 @@ function CityScene({
     const size = Math.max(maxX - minX, maxZ - minZ);
 
     return { x: centerX, z: centerZ, size };
-  }, [cameraFocusDirectory, activeHighlights, cityData.buildings, highlightLayers, centerOffset, isPathInDirectory]);
+  }, [
+    cameraFocusDirectory,
+    focusDirectory,
+    activeHighlights,
+    cityData.buildings,
+    highlightLayers,
+    centerOffset,
+    isPathInDirectory,
+  ]);
 
   const staggerIndices = useMemo(() => {
     const centerX = (cityData.bounds.minX + cityData.bounds.maxX) / 2;
@@ -1356,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),
       ),
     }));
 
@@ -1373,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
@@ -1386,10 +1397,7 @@ function CityScene({
       <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}
@@ -1400,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}
@@ -1492,6 +1497,10 @@ export interface FileCity3DProps {
   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;
 }
 
 /**
@@ -1521,20 +1530,15 @@ export function FileCity3D({
   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);
@@ -1566,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,
@@ -1590,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,
@@ -1613,7 +1617,7 @@ export function FileCity3D({
         width,
         height,
         position: 'relative',
-        background: theme.colors.background,
+        background: backgroundColor,
         overflow: 'hidden',
         ...style,
       }}
@@ -1644,11 +1648,7 @@ export function FileCity3D({
       </Canvas>
       <InfoPanel building={hoveredBuilding} />
       {showControls && (
-        <ControlsOverlay
-          isFlat={!isGrown}
-          onToggle={handleToggle}
-          onResetCamera={resetCamera}
-        />
+        <ControlsOverlay isFlat={!isGrown} onToggle={handleToggle} onResetCamera={resetCamera} />
       )}
     </div>
   );

package/src/stories/FileCity3D.stories.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '@principal-ade/industry-theme';
-import { FileCity3D, type CityData, type CityBuilding, type CityDistrict, type HighlightLayer, type IsolationMode } from '../components/FileCity3D';
+import {
+  FileCity3D,
+  type CityData,
+  type CityBuilding,
+  type CityDistrict,
+  type HighlightLayer,
+  type IsolationMode,
+} from '../components/FileCity3D';
 
 const meta: Meta<typeof FileCity3D> = {
   title: 'Components/FileCity3D',
   component: FileCity3D,
-  decorators: [
-    (Story) => (
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
   parameters: {
     layout: 'fullscreen',
   },
@@ -40,7 +39,7 @@ function generateBuildings(
   startX: number,
   startZ: number,
   areaWidth: number,
-  areaDepth: number
+  areaDepth: number,
 ): CityBuilding[] {
   const buildings: CityBuilding[] = [];
   const allExtensions = [...CODE_EXTENSIONS, ...NON_CODE_EXTENSIONS];
@@ -56,9 +55,7 @@ function generateBuildings(
     const lineCount = isCode
       ? Math.floor(Math.exp(Math.random() * Math.log(3000 - 20) + Math.log(20)))
       : undefined;
-    const size = isCode
-      ? lineCount! * 40
-      : Math.floor(Math.random() * 200000) + 1000;
+    const size = isCode ? lineCount! * 40 : Math.floor(Math.random() * 200000) + 1000;
 
     buildings.push({
       path: `${basePath}/file${i}.${ext}`,
@@ -92,28 +89,44 @@ const sampleCityData: CityData = {
       worldBounds: { minX: -2, maxX: 42, minZ: -2, maxZ: 42 },
       fileCount: 12,
       type: 'directory',
-      label: { text: 'src', bounds: { minX: -2, maxX: 42, minZ: 42, maxZ: 46 }, position: 'bottom' },
+      label: {
+        text: 'src',
+        bounds: { minX: -2, maxX: 42, minZ: 42, maxZ: 46 },
+        position: 'bottom',
+      },
     },
     {
       path: 'src/components',
       worldBounds: { minX: 48, maxX: 82, minZ: -2, maxZ: 32 },
       fileCount: 8,
       type: 'directory',
-      label: { text: 'components', bounds: { minX: 48, maxX: 82, minZ: 32, maxZ: 36 }, position: 'bottom' },
+      label: {
+        text: 'components',
+        bounds: { minX: 48, maxX: 82, minZ: 32, maxZ: 36 },
+        position: 'bottom',
+      },
     },
     {
       path: 'src/utils',
       worldBounds: { minX: 48, maxX: 77, minZ: 38, maxZ: 67 },
       fileCount: 6,
       type: 'directory',
-      label: { text: 'utils', bounds: { minX: 48, maxX: 77, minZ: 67, maxZ: 71 }, position: 'bottom' },
+      label: {
+        text: 'utils',
+        bounds: { minX: 48, maxX: 77, minZ: 67, maxZ: 71 },
+        position: 'bottom',
+      },
     },
     {
       path: 'tests',
       worldBounds: { minX: -2, maxX: 32, minZ: 48, maxZ: 72 },
       fileCount: 5,
       type: 'directory',
-      label: { text: 'tests', bounds: { minX: -2, maxX: 32, minZ: 72, maxZ: 76 }, position: 'bottom' },
+      label: {
+        text: 'tests',
+        bounds: { minX: -2, maxX: 32, minZ: 72, maxZ: 76 },
+        position: 'bottom',
+      },
     },
   ],
   bounds: { minX: -5, maxX: 85, minZ: -5, maxZ: 80 },
@@ -164,7 +177,11 @@ function generateLargeCityData(): CityData {
     buildings,
     districts,
     bounds: { minX: -10, maxX: totalSize + 10, minZ: -10, maxZ: totalSize + 10 },
-    metadata: { totalFiles: buildings.length, totalDirectories: districts.length, rootPath: '/large-project' },
+    metadata: {
+      totalFiles: buildings.length,
+      totalDirectories: districts.length,
+      rootPath: '/large-project',
+    },
   };
 }
 
@@ -211,7 +228,11 @@ function generateMonorepoCityData(): CityData {
     buildings,
     districts,
     bounds: { minX: -10, maxX: 175, minZ: -10, maxZ: 110 },
-    metadata: { totalFiles: buildings.length, totalDirectories: districts.length, rootPath: '/monorepo' },
+    metadata: {
+      totalFiles: buildings.length,
+      totalDirectories: districts.length,
+      rootPath: '/monorepo',
+    },
   };
 }
 
@@ -345,7 +366,7 @@ export const WithClickHandler: Story = {
   args: {
     cityData: sampleCityData,
     height: '100vh',
-    onBuildingClick: (building) => {
+    onBuildingClick: building => {
       console.log('Clicked building:', building.path);
       alert(`Clicked: ${building.path}`);
     },
@@ -497,14 +518,16 @@ const authServerTourSteps: TourStep[] = [
   {
     id: 'overview',
     title: 'Welcome to Auth Server',
-    description: 'This is the authentication server for Principal ADE. Let\'s explore its architecture.',
+    description:
+      "This is the authentication server for Principal ADE. Let's explore its architecture.",
     highlightLayers: [],
     isolationMode: 'none' as const,
   },
   {
     id: 'workos-auth',
     title: 'WorkOS Authentication',
-    description: 'The core authentication flow using WorkOS. Handles OAuth callbacks, token exchange, and verification.',
+    description:
+      'The core authentication flow using WorkOS. Handles OAuth callbacks, token exchange, and verification.',
     highlightLayers: [
       {
         id: 'workos',
@@ -656,7 +679,9 @@ const AuthServerTourTemplate: React.FC = () => {
   };
 
   return (
-    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', position: 'relative' }}>
+    <div
+      style={{ height: '100vh', display: 'flex', flexDirection: 'column', position: 'relative' }}
+    >
       {/* 3D City */}
       <FileCity3D
         cityData={authServerCityData as CityData}
@@ -713,7 +738,15 @@ const AuthServerTourTemplate: React.FC = () => {
         </button>
 
         {/* Step content - center */}
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 8,
+          }}
+        >
           {/* Step indicators */}
           <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
             {authServerTourSteps.map((s, i) => (
@@ -725,7 +758,8 @@ const AuthServerTourTemplate: React.FC = () => {
                   height: i === currentStep ? 12 : 10,
                   borderRadius: '50%',
                   border: i === currentStep ? '2px solid #3b82f6' : 'none',
-                  background: i === currentStep ? '#3b82f6' : i < currentStep ? '#22c55e' : '#475569',
+                  background:
+                    i === currentStep ? '#3b82f6' : i < currentStep ? '#22c55e' : '#475569',
                   cursor: 'pointer',
                   padding: 0,
                   transition: 'all 0.2s',
@@ -745,16 +779,35 @@ const AuthServerTourTemplate: React.FC = () => {
           </div>
 
           {/* Description */}
-          <p style={{ margin: 0, fontSize: 13, color: '#94a3b8', textAlign: 'center', maxWidth: 600 }}>
+          <p
+            style={{
+              margin: 0,
+              fontSize: 13,
+              color: '#94a3b8',
+              textAlign: 'center',
+              maxWidth: 600,
+            }}
+          >
             {step.description}
           </p>
 
           {/* Isolation mode indicator */}
           <div style={{ fontSize: 11, color: '#64748b' }}>
-            Isolation: <code style={{ color: '#94a3b8', background: '#1e293b', padding: '2px 6px', borderRadius: 4 }}>{step.isolationMode}</code>
+            Isolation:{' '}
+            <code
+              style={{
+                color: '#94a3b8',
+                background: '#1e293b',
+                padding: '2px 6px',
+                borderRadius: 4,
+              }}
+            >
+              {step.isolationMode}
+            </code>
             {step.highlightLayers.length > 0 && (
               <span style={{ marginLeft: 8 }}>
-                • {step.highlightLayers.length} layer{step.highlightLayers.length > 1 ? 's' : ''} active
+                • {step.highlightLayers.length} layer{step.highlightLayers.length > 1 ? 's' : ''}{' '}
+                active
               </span>
             )}
           </div>
@@ -806,7 +859,9 @@ const DirectorySelectionTemplate: React.FC = () => {
   }, []);
 
   return (
-    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', position: 'relative' }}>
+    <div
+      style={{ height: '100vh', display: 'flex', flexDirection: 'column', position: 'relative' }}
+    >
       {/* 3D City */}
       <FileCity3D
         cityData={authServerCityData as CityData}
@@ -822,12 +877,12 @@ const DirectorySelectionTemplate: React.FC = () => {
           friction: 14,
         }}
         showControls={true}
-        onBuildingClick={(building) => {
+        onBuildingClick={building => {
           // Extract directory from building path
           const parts = building.path.split('/');
           if (parts.length >= 2) {
             const dir = parts.slice(0, 2).join('/');
-            setFocusDirectory(prev => prev === dir ? null : dir);
+            setFocusDirectory(prev => (prev === dir ? null : dir));
           }
         }}
       />
@@ -869,7 +924,7 @@ const DirectorySelectionTemplate: React.FC = () => {
           {directories.map(dir => (
             <button
               key={dir}
-              onClick={() => setFocusDirectory(prev => prev === dir ? null : dir)}
+              onClick={() => setFocusDirectory(prev => (prev === dir ? null : dir))}
               style={{
                 padding: '8px 16px',
                 background: focusDirectory === dir ? '#3b82f6' : '#334155',
@@ -887,7 +942,17 @@ const DirectorySelectionTemplate: React.FC = () => {
         </div>
         {focusDirectory && (
           <div style={{ marginTop: 12, fontSize: 14 }}>
-            Focused: <code style={{ color: '#3b82f6', background: '#1e293b', padding: '4px 8px', borderRadius: 4 }}>{focusDirectory}</code>
+            Focused:{' '}
+            <code
+              style={{
+                color: '#3b82f6',
+                background: '#1e293b',
+                padding: '4px 8px',
+                borderRadius: 4,
+              }}
+            >
+              {focusDirectory}
+            </code>
           </div>
         )}
       </div>