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

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

@@ -100,6 +100,8 @@ export interface FileCity3DProps {
     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
@@ -107,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, backgroundColor, textColor, }: 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

@@ -259,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(), []);
@@ -395,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();
@@ -410,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);
@@ -419,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();
@@ -482,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
@@ -563,6 +569,8 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
     const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const controlsRef = useRef(null);
+    // Start false - only block rotation during active camera animations
+    const isAnimatingRef = useRef(false);
     // Animated camera position and target
     const targetPos = useMemo(() => {
         if (focusTarget) {
@@ -590,7 +598,17 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }) {
             targetZ: 0,
         };
     }, [focusTarget, isFlat, citySize]);
-    // Spring animation for camera movement
+    // Set initial camera position on mount
+    useEffect(() => {
+        camera.position.set(targetPos.x, targetPos.y, targetPos.z);
+        if (controlsRef.current) {
+            controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
+            controlsRef.current.update();
+        }
+        // Only run on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Spring animation for camera movement (only for subsequent changes)
     const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
         camX: targetPos.x,
         camY: targetPos.y,
@@ -599,10 +617,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());
@@ -681,7 +706,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,
@@ -835,11 +860,16 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
             return null;
         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
@@ -847,7 +877,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, backgroundColor = '#0f172a', textColor = '#94a3b8', }) {
+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]);
@@ -917,6 +947,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.10",
+  "version": "0.5.12",
   "type": "module",
   "description": "React components for File City visualization",
   "main": "dist/index.js",

package/src/components/FileCity3D/FileCity3D.tsx

@@ -424,6 +424,7 @@ interface InstancedBuildingsProps {
   onHover?: (building: CityBuilding | null) => void;
   onClick?: (building: CityBuilding) => void;
   hoveredIndex: number | null;
+  selectedIndex: number | null;
   growProgress: number;
   animationConfig: AnimationConfig;
   heightScaling: HeightScaling;
@@ -446,6 +447,7 @@ function InstancedBuildings({
   onHover,
   onClick,
   hoveredIndex,
+  selectedIndex,
   growProgress,
   animationConfig,
   heightScaling,
@@ -620,7 +622,8 @@ function InstancedBuildings({
       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);
@@ -638,7 +641,9 @@ function InstancedBuildings({
         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);
@@ -648,6 +653,9 @@ function InstancedBuildings({
     if (meshRef.current.instanceColor) {
       meshRef.current.instanceColor.needsUpdate = true;
     }
+
+    // Update bounding sphere for raycasting as buildings grow/animate
+    meshRef.current.computeBoundingSphere();
   });
 
   const handlePointerMove = useCallback(
@@ -796,7 +804,12 @@ 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]}
+      raycast={() => null}
+    >
       <spriteMaterial
         ref={materialRef}
         map={texture}
@@ -983,6 +996,8 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
   const { camera } = useThree();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const controlsRef = useRef<any>(null);
+  // Start false - only block rotation during active camera animations
+  const isAnimatingRef = useRef(false);
 
   // Animated camera position and target
   const targetPos = useMemo(() => {
@@ -1012,7 +1027,18 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
     };
   }, [focusTarget, isFlat, citySize]);
 
-  // Spring animation for camera movement
+  // Set initial camera position on mount
+  useEffect(() => {
+    camera.position.set(targetPos.x, targetPos.y, targetPos.z);
+    if (controlsRef.current) {
+      controlsRef.current.target.set(targetPos.targetX, targetPos.targetY, targetPos.targetZ);
+      controlsRef.current.update();
+    }
+    // Only run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Spring animation for camera movement (only for subsequent changes)
   const { camX, camY, camZ, lookX, lookY, lookZ } = useSpring({
     camX: targetPos.x,
     camY: targetPos.y,
@@ -1021,11 +1047,18 @@ function AnimatedCamera({ citySize, isFlat, focusTarget }: AnimatedCameraProps)
     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) return;
+    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());
@@ -1171,6 +1204,7 @@ interface CitySceneProps {
   onBuildingHover?: (building: CityBuilding | null) => void;
   onBuildingClick?: (building: CityBuilding) => void;
   hoveredBuilding: CityBuilding | null;
+  selectedBuilding: CityBuilding | null;
   growProgress: number;
   animationConfig: AnimationConfig;
   highlightLayers: HighlightLayer[];
@@ -1185,6 +1219,7 @@ function CityScene({
   onBuildingHover,
   onBuildingClick,
   hoveredBuilding,
+  selectedBuilding,
   growProgress,
   animationConfig,
   highlightLayers,
@@ -1387,6 +1422,11 @@ function CityScene({
     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;
@@ -1425,6 +1465,7 @@ function CityScene({
         onHover={onBuildingHover}
         onClick={onBuildingClick}
         hoveredIndex={hoveredIndex}
+        selectedIndex={selectedIndex}
         growProgress={growProgress}
         animationConfig={animationConfig}
         heightScaling={heightScaling}
@@ -1501,6 +1542,8 @@ export interface FileCity3DProps {
   backgroundColor?: string;
   /** Text color for secondary/placeholder text */
   textColor?: string;
+  /** Currently selected building (controlled by host) */
+  selectedBuilding?: CityBuilding | null;
 }
 
 /**
@@ -1532,6 +1575,7 @@ export function FileCity3D({
   onDirectorySelect,
   backgroundColor = '#0f172a',
   textColor = '#94a3b8',
+  selectedBuilding = null,
 }: FileCity3DProps) {
   const [hoveredBuilding, setHoveredBuilding] = useState<CityBuilding | null>(null);
   const [internalIsGrown, setInternalIsGrown] = useState(false);
@@ -1637,6 +1681,7 @@ export function FileCity3D({
           onBuildingHover={setHoveredBuilding}
           onBuildingClick={onBuildingClick}
           hoveredBuilding={hoveredBuilding}
+          selectedBuilding={selectedBuilding}
           growProgress={growProgress}
           animationConfig={animationConfig}
           highlightLayers={highlightLayers}
@@ -1646,7 +1691,7 @@ export function FileCity3D({
           focusDirectory={focusDirectory}
         />
       </Canvas>
-      <InfoPanel building={hoveredBuilding} />
+      <InfoPanel building={selectedBuilding || hoveredBuilding} />
       {showControls && (
         <ControlsOverlay isFlat={!isGrown} onToggle={handleToggle} onResetCamera={resetCamera} />
       )}

package/src/stories/FileCity3D.stories.tsx

@@ -373,6 +373,28 @@ export const WithClickHandler: Story = {
   },
 };
 
+/**
+ * With selection - Click to select a building, click again to deselect
+ */
+const WithSelectionTemplate: React.FC = () => {
+  const [selectedBuilding, setSelectedBuilding] = React.useState<CityBuilding | null>(null);
+
+  return (
+    <FileCity3D
+      cityData={sampleCityData}
+      height="100vh"
+      selectedBuilding={selectedBuilding}
+      onBuildingClick={building => {
+        setSelectedBuilding(prev => (prev?.path === building.path ? null : building));
+      }}
+    />
+  );
+};
+
+export const WithSelection: Story = {
+  render: () => <WithSelectionTemplate />,
+};
+
 /**
  * Isolation - transparent mode
  */