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

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

@@ -96,6 +96,12 @@ 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;
+    /** Currently selected building (controlled by host) */
+    selectedBuilding?: CityBuilding | null;
 }
 /**
  * FileCity3D - 3D visualization of codebase structure
@@ -103,6 +109,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, selectedBuilding, }: 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;
@@ -261,7 +259,7 @@ function isPathInDirectory(path, directory) {
         return true;
     return path === directory || path.startsWith(directory + '/');
 }
-function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, growProgress, animationConfig, heightScaling, linearScale, staggerIndices, focusDirectory, highlightLayers, isolationMode, }) {
+function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, selectedIndex, growProgress, animationConfig, heightScaling, linearScale, staggerIndices, focusDirectory, highlightLayers, isolationMode, }) {
     const meshRef = useRef(null);
     const startTimeRef = useRef(null);
     const tempObject = useMemo(() => new THREE.Object3D(), []);
@@ -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;
@@ -389,7 +395,8 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             const height = animProgress * fullHeight * newMultiplier + minHeight;
             const yPosition = height / 2 + baseOffset;
             const isHovered = hoveredIndex === data.index;
-            const scale = isHovered ? 1.05 : 1;
+            const isSelected = selectedIndex === data.index;
+            const scale = isSelected ? 1.08 : isHovered ? 1.05 : 1;
             tempObject.position.set(x, yPosition, z);
             tempObject.scale.set(width * scale, height, depth * scale);
             tempObject.updateMatrix();
@@ -404,7 +411,10 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
                 tempColor.g = tempColor.g * (1 - grayAmount) + gray * grayAmount;
                 tempColor.b = tempColor.b * (1 - grayAmount) + gray * grayAmount;
             }
-            if (isHovered) {
+            if (isSelected) {
+                tempColor.multiplyScalar(1.4);
+            }
+            else if (isHovered) {
                 tempColor.multiplyScalar(1.2);
             }
             meshRef.current.setColorAt(instanceIndex, tempColor);
@@ -413,6 +423,8 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
         if (meshRef.current.instanceColor) {
             meshRef.current.instanceColor.needsUpdate = true;
         }
+        // Update bounding sphere for raycasting as buildings grow/animate
+        meshRef.current.computeBoundingSphere();
     });
     const handlePointerMove = useCallback((e) => {
         e.stopPropagation();
@@ -476,7 +488,7 @@ function AnimatedIcon({ x, z, targetHeight, iconSize, texture, opacity, growProg
             materialRef.current.opacity = opacity * animProgress;
         }
     });
-    return (_jsx("sprite", { ref: spriteRef, position: [x, 0, z], scale: [iconSize, iconSize, 1], children: _jsx("spriteMaterial", { ref: materialRef, map: texture, transparent: true, opacity: 0, depthTest: true, depthWrite: false }) }));
+    return (_jsx("sprite", { ref: spriteRef, position: [x, 0, z], scale: [iconSize, iconSize, 1], raycast: () => null, children: _jsx("spriteMaterial", { ref: materialRef, map: texture, transparent: true, opacity: 0, depthTest: true, depthWrite: false }) }));
 }
 function BuildingIcons({ buildings, centerOffset, growProgress, heightScaling, linearScale, highlightLayers, isolationMode, hasActiveHighlights, staggerIndices, springDuration, staggerDelay, }) {
     // Pre-compute buildings with icons
@@ -510,7 +522,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 +550,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;
@@ -547,6 +569,7 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
     const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const controlsRef = useRef(null);
+    const isAnimatingRef = useRef(true);
     // Animated camera position and target
     const targetPos = useMemo(() => {
         if (focusTarget) {
@@ -583,10 +606,17 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
         lookY: targetPos.targetY,
         lookZ: targetPos.targetZ,
         config: { tension: 60, friction: 20 },
+        onStart: () => {
+            isAnimatingRef.current = true;
+        },
+        onRest: () => {
+            isAnimatingRef.current = false;
+        },
     });
-    // Update camera each frame based on spring values
+    // Update camera each frame only while spring is animating
+    // Once animation settles, let OrbitControls handle user interaction
     useFrame(() => {
-        if (!controlsRef.current)
+        if (!controlsRef.current || !isAnimatingRef.current)
             return;
         camera.position.set(camX.get(), camY.get(), camZ.get());
         controlsRef.current.target.set(lookX.get(), lookY.get(), lookZ.get());
@@ -642,9 +672,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',
@@ -665,7 +695,7 @@ function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
             gap: 8,
         }, children: [_jsx("button", { onClick: onResetCamera, style: buttonStyle, children: "Reset View" }), _jsx("button", { onClick: onToggle, style: buttonStyle, children: isFlat ? 'Grow to 3D' : 'Flatten to 2D' })] }));
 }
-function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, growProgress, animationConfig, highlightLayers, isolationMode, heightScaling, linearScale, focusDirectory, }) {
+function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, selectedBuilding, growProgress, animationConfig, highlightLayers, isolationMode, heightScaling, linearScale, focusDirectory, }) {
     const centerOffset = useMemo(() => ({
         x: (cityData.bounds.minX + cityData.bounds.maxX) / 2,
         z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2,
@@ -747,7 +777,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 +796,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 +821,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 +847,18 @@ 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]);
+    const selectedIndex = useMemo(() => {
+        if (!selectedBuilding)
+            return null;
+        return cityData.buildings.findIndex(b => b.path === selectedBuilding.path);
+    }, [selectedBuilding, 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, selectedIndex: selectedIndex, 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 +866,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', selectedBuilding = null, }) {
     const [hoveredBuilding, setHoveredBuilding] = useState(null);
     const [internalIsGrown, setInternalIsGrown] = useState(false);
     const animationConfig = useMemo(() => ({ ...DEFAULT_ANIMATION, ...animation }), [animation]);
@@ -854,12 +896,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 +912,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 +927,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: {
@@ -894,6 +936,6 @@ export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingC
                     left: 0,
                     width: '100%',
                     height: '100%',
-                }, children: _jsx(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, heightScaling: heightScaling, linearScale: linearScale, focusDirectory: focusDirectory }) }), _jsx(InfoPanel, { building: hoveredBuilding }), showControls && (_jsx(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))] }));
+                }, children: _jsx(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, selectedBuilding: selectedBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, heightScaling: heightScaling, linearScale: linearScale, focusDirectory: focusDirectory }) }), _jsx(InfoPanel, { building: selectedBuilding || hoveredBuilding }), showControls && (_jsx(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))] }));
 }
 export default FileCity3D;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "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",