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

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

@@ -95,6 +95,66 @@ function calculateBuildingHeight(building, scaling = 'logarithmic', linearScale
     // Fallback to dimension height if no metrics available
     return building.dimensions[1];
 }
+// ============================================================================
+// Icon Texture Generation - Lucide icon SVG paths
+// ============================================================================
+// Lucide icon paths (from lucide.dev)
+const LUCIDE_ICONS = {
+    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"/>',
+    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"/>',
+    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"/>',
+};
+// Cache for icon textures
+const iconTextureCache = new Map();
+/**
+ * Generate a texture from a Lucide icon
+ */
+function getIconTexture(iconName, color = '#ffffff') {
+    const cacheKey = `${iconName}-${color}`;
+    if (iconTextureCache.has(cacheKey)) {
+        return iconTextureCache.get(cacheKey);
+    }
+    const iconPath = LUCIDE_ICONS[iconName];
+    if (!iconPath) {
+        // Icon not in our subset, skip silently
+        return null;
+    }
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${iconPath}</svg>`;
+    // Create canvas and draw SVG
+    const canvas = document.createElement('canvas');
+    canvas.width = 128;
+    canvas.height = 128;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    // Create image from SVG
+    const img = new Image();
+    const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(svgBlob);
+    // Create texture (will update when image loads)
+    const texture = new THREE.Texture(canvas);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    img.onload = () => {
+        // Clear canvas with transparent background
+        ctx.clearRect(0, 0, 128, 128);
+        // Draw centered icon
+        ctx.drawImage(img, 32, 32, 64, 64);
+        texture.needsUpdate = true;
+        URL.revokeObjectURL(url);
+    };
+    img.src = url;
+    iconTextureCache.set(cacheKey, texture);
+    return texture;
+}
 // Get full file config from centralized file-city-builder lookup
 function getConfigForFile(building) {
     if (building.color) {
@@ -135,6 +195,61 @@ function hasActiveHighlights(layers) {
 }
 // Animated RoundedBox wrapper
 const AnimatedRoundedBox = animated(RoundedBox);
+function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration }) {
+    const meshRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const tempObject = useMemo(() => new THREE.Object3D(), []);
+    // 4 corner edges per building
+    const numEdges = buildings.length * 4;
+    // Pre-compute edge data
+    const edgeData = useMemo(() => {
+        return buildings.flatMap((data) => {
+            const { width, depth, x, z, targetHeight, staggerDelayMs } = data;
+            const halfW = width / 2;
+            const halfD = depth / 2;
+            return [
+                { x: x - halfW, z: z - halfD, targetHeight, staggerDelayMs },
+                { x: x + halfW, z: z - halfD, targetHeight, staggerDelayMs },
+                { x: x - halfW, z: z + halfD, targetHeight, staggerDelayMs },
+                { x: x + halfW, z: z + halfD, targetHeight, staggerDelayMs },
+            ];
+        });
+    }, [buildings]);
+    // Animate edges
+    useFrame(({ clock }) => {
+        if (!meshRef.current || edgeData.length === 0)
+            return;
+        if (startTimeRef.current === null && growProgress > 0) {
+            startTimeRef.current = clock.elapsedTime * 1000;
+        }
+        const currentTime = clock.elapsedTime * 1000;
+        const animStartTime = startTimeRef.current ?? currentTime;
+        edgeData.forEach((edge, idx) => {
+            const { x, z, targetHeight, staggerDelayMs } = edge;
+            // Calculate per-building animation progress
+            const elapsed = currentTime - animStartTime - staggerDelayMs;
+            let animProgress = growProgress;
+            if (growProgress > 0 && elapsed >= 0) {
+                const t = Math.min(elapsed / springDuration, 1);
+                const eased = 1 - Math.pow(1 - t, 3);
+                animProgress = eased * growProgress;
+            }
+            else if (growProgress > 0 && elapsed < 0) {
+                animProgress = 0;
+            }
+            const height = animProgress * targetHeight + minHeight;
+            const yPosition = height / 2 + baseOffset;
+            tempObject.position.set(x, yPosition, z);
+            tempObject.scale.set(0.3, height, 0.3); // Thin box for edge
+            tempObject.updateMatrix();
+            meshRef.current.setMatrixAt(idx, tempObject.matrix);
+        });
+        meshRef.current.instanceMatrix.needsUpdate = true;
+    });
+    if (numEdges === 0)
+        return null;
+    return (_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, numEdges], frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshBasicMaterial", { color: "#1a1a2e", transparent: true, opacity: 0.7 })] }));
+}
 function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, growProgress, animationConfig, highlightLayers, isolationMode, hasActiveHighlights, dimOpacity, heightScaling, linearScale, staggerIndices, }) {
     const meshRef = useRef(null);
     const startTimeRef = useRef(null);
@@ -279,7 +394,92 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
     }, [visibleBuildings, onClick]);
     if (visibleBuildings.length === 0)
         return null;
-    return (_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, visibleBuildings.length], onPointerMove: handlePointerMove, onPointerOut: handlePointerOut, onClick: handleClick, frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { metalness: 0.1, roughness: 0.35 })] }));
+    return (_jsxs("group", { children: [_jsxs("instancedMesh", { ref: meshRef, args: [undefined, undefined, visibleBuildings.length], onPointerMove: handlePointerMove, onPointerOut: handlePointerOut, onClick: handleClick, frustumCulled: false, children: [_jsx("boxGeometry", { args: [1, 1, 1] }), _jsx("meshStandardMaterial", { metalness: 0.1, roughness: 0.35 })] }), _jsx(BuildingEdges, { buildings: visibleBuildings, growProgress: growProgress, minHeight: minHeight, baseOffset: baseOffset, springDuration: springDuration })] }));
+}
+function AnimatedIcon({ x, z, targetHeight, iconSize, texture, opacity, growProgress, staggerDelayMs, springDuration, }) {
+    const spriteRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const materialRef = useRef(null);
+    useFrame(({ clock }) => {
+        if (!spriteRef.current)
+            return;
+        if (startTimeRef.current === null && growProgress > 0) {
+            startTimeRef.current = clock.elapsedTime * 1000;
+        }
+        const currentTime = clock.elapsedTime * 1000;
+        const animStartTime = startTimeRef.current ?? currentTime;
+        // Calculate per-icon animation progress
+        const elapsed = currentTime - animStartTime - staggerDelayMs;
+        let animProgress = growProgress;
+        if (growProgress > 0 && elapsed >= 0) {
+            const t = Math.min(elapsed / springDuration, 1);
+            const eased = 1 - Math.pow(1 - t, 3);
+            animProgress = eased * growProgress;
+        }
+        else if (growProgress > 0 && elapsed < 0) {
+            animProgress = 0;
+        }
+        const minHeight = 0.3;
+        const baseOffset = 0.2;
+        const height = animProgress * targetHeight + minHeight;
+        const buildingTop = height + baseOffset;
+        const yPosition = buildingTop + iconSize / 2 + 2;
+        spriteRef.current.position.y = yPosition;
+        if (materialRef.current) {
+            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 }) }));
+}
+function BuildingIcons({ buildings, centerOffset, growProgress, heightScaling, linearScale, highlightLayers, isolationMode, hasActiveHighlights, staggerIndices, springDuration, staggerDelay, }) {
+    // Pre-compute buildings with icons
+    const buildingsWithIcons = useMemo(() => {
+        return buildings
+            .map((building, index) => {
+            const config = getConfigForFile(building);
+            if (!config.icon)
+                return null;
+            const highlight = getHighlightForPath(building.path, highlightLayers);
+            const isHighlighted = highlight !== null;
+            const shouldDim = hasActiveHighlights && !isHighlighted;
+            const shouldHide = shouldDim && isolationMode === 'hide';
+            const shouldCollapse = shouldDim && isolationMode === 'collapse';
+            if (shouldHide)
+                return null;
+            const fullHeight = calculateBuildingHeight(building, heightScaling, linearScale);
+            const targetHeight = shouldCollapse ? 0.5 : fullHeight;
+            const x = building.position.x - centerOffset.x;
+            const z = building.position.z - centerOffset.z;
+            const staggerIndex = staggerIndices[index] ?? index;
+            const staggerDelayMs = staggerDelay * staggerIndex;
+            return {
+                building,
+                config,
+                x,
+                z,
+                targetHeight,
+                shouldDim,
+                staggerDelayMs,
+            };
+        })
+            .filter(Boolean);
+    }, [buildings, centerOffset, highlightLayers, isolationMode, hasActiveHighlights, heightScaling, linearScale, staggerIndices, staggerDelay]);
+    // Don't render if no progress yet
+    if (growProgress < 0.1)
+        return null;
+    return (_jsx(_Fragment, { children: 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 (_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, }) {
     const { worldBounds } = district;
@@ -398,7 +598,11 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
             return null;
         return cityData.buildings.findIndex((b) => b.path === hoveredBuilding.path);
     }, [hoveredBuilding, cityData.buildings]);
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatedCamera, { citySize: citySize, isFlat: growProgress === 0 }), _jsx("ambientLight", { intensity: 0.4 }), _jsx("directionalLight", { position: [citySize, citySize, citySize * 0.5], intensity: 1, castShadow: true, "shadow-mapSize": [2048, 2048] }), _jsx("directionalLight", { position: [-citySize * 0.5, citySize * 0.5, -citySize * 0.5], intensity: 0.3 }), cityData.districts.map((district) => (_jsx(DistrictFloor, { district: district, centerOffset: centerOffset, opacity: 1 }, district.path))), _jsx(InstancedBuildings, { buildings: cityData.buildings, centerOffset: centerOffset, onHover: onBuildingHover, onClick: onBuildingClick, hoveredIndex: hoveredIndex, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale, staggerIndices: staggerIndices })] }));
+    // 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 }), _jsx("ambientLight", { intensity: 1.2 }), _jsx("hemisphereLight", { args: ['#ddeeff', '#667788', 0.8], position: [0, citySize, 0] }), _jsx("directionalLight", { position: [citySize, citySize * 1.5, citySize * 0.5], intensity: 2, castShadow: true, "shadow-mapSize": [2048, 2048] }), _jsx("directionalLight", { position: [-citySize * 0.5, citySize * 0.8, -citySize * 0.5], intensity: 1 }), _jsx("directionalLight", { position: [citySize * 0.3, citySize, citySize], intensity: 0.6 }), cityData.districts.map((district) => (_jsx(DistrictFloor, { district: district, centerOffset: centerOffset, opacity: 1 }, district.path))), _jsx(InstancedBuildings, { buildings: cityData.buildings, centerOffset: centerOffset, onHover: onBuildingHover, onClick: onBuildingClick, hoveredIndex: hoveredIndex, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale, staggerIndices: staggerIndices }), _jsx(BuildingIcons, { buildings: cityData.buildings, centerOffset: centerOffset, growProgress: growProgress, heightScaling: heightScaling, linearScale: linearScale, highlightLayers: highlightLayers, isolationMode: isolationMode, hasActiveHighlights: activeHighlights, staggerIndices: staggerIndices, springDuration: springDuration, staggerDelay: animationConfig.staggerDelay || 15 })] }));
 }
 /**
  * FileCity3D - 3D visualization of codebase structure

package/package.json

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

package/src/components/FileCity3D/FileCity3D.tsx

@@ -186,6 +186,80 @@ function calculateBuildingHeight(
   return building.dimensions[1];
 }
 
+// ============================================================================
+// Icon Texture Generation - Lucide icon SVG paths
+// ============================================================================
+
+// Lucide icon paths (from lucide.dev)
+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"/>',
+  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"/>',
+  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"/>',
+};
+
+// Cache for icon textures
+const iconTextureCache = new Map<string, THREE.Texture>();
+
+/**
+ * Generate a texture from a Lucide icon
+ */
+function getIconTexture(iconName: string, color: string = '#ffffff'): THREE.Texture | null {
+  const cacheKey = `${iconName}-${color}`;
+
+  if (iconTextureCache.has(cacheKey)) {
+    return iconTextureCache.get(cacheKey)!;
+  }
+
+  const iconPath = LUCIDE_ICONS[iconName];
+  if (!iconPath) {
+    // Icon not in our subset, skip silently
+    return null;
+  }
+
+  const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${iconPath}</svg>`;
+
+  // Create canvas and draw SVG
+  const canvas = document.createElement('canvas');
+  canvas.width = 128;
+  canvas.height = 128;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  // Create image from SVG
+  const img = new Image();
+  const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(svgBlob);
+
+  // Create texture (will update when image loads)
+  const texture = new THREE.Texture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+
+  img.onload = () => {
+    // Clear canvas with transparent background
+    ctx.clearRect(0, 0, 128, 128);
+
+    // Draw centered icon
+    ctx.drawImage(img, 32, 32, 64, 64);
+
+    texture.needsUpdate = true;
+    URL.revokeObjectURL(url);
+  };
+
+  img.src = url;
+
+  iconTextureCache.set(cacheKey, texture);
+  return texture;
+}
+
 // Get full file config from centralized file-city-builder lookup
 function getConfigForFile(building: CityBuilding): FileConfigResult {
   if (building.color) {
@@ -236,6 +310,100 @@ function hasActiveHighlights(layers: HighlightLayer[]): boolean {
 // Animated RoundedBox wrapper
 const AnimatedRoundedBox = animated(RoundedBox);
 
+// ============================================================================
+// Building Edges - Batched edge rendering for performance
+// ============================================================================
+
+interface BuildingEdgeData {
+  width: number;
+  depth: number;
+  targetHeight: number;
+  x: number;
+  z: number;
+  staggerDelayMs: number;
+}
+
+interface BuildingEdgesProps {
+  buildings: BuildingEdgeData[];
+  growProgress: number;
+  minHeight: number;
+  baseOffset: number;
+  springDuration: number;
+}
+
+function BuildingEdges({ buildings, growProgress, minHeight, baseOffset, springDuration }: BuildingEdgesProps) {
+  const meshRef = useRef<THREE.InstancedMesh>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const tempObject = useMemo(() => new THREE.Object3D(), []);
+
+  // 4 corner edges per building
+  const numEdges = buildings.length * 4;
+
+  // Pre-compute edge data
+  const edgeData = useMemo(() => {
+    return buildings.flatMap((data) => {
+      const { width, depth, x, z, targetHeight, staggerDelayMs } = data;
+      const halfW = width / 2;
+      const halfD = depth / 2;
+
+      return [
+        { x: x - halfW, z: z - halfD, targetHeight, staggerDelayMs },
+        { x: x + halfW, z: z - halfD, targetHeight, staggerDelayMs },
+        { x: x - halfW, z: z + halfD, targetHeight, staggerDelayMs },
+        { x: x + halfW, z: z + halfD, targetHeight, staggerDelayMs },
+      ];
+    });
+  }, [buildings]);
+
+  // Animate edges
+  useFrame(({ clock }) => {
+    if (!meshRef.current || edgeData.length === 0) return;
+
+    if (startTimeRef.current === null && growProgress > 0) {
+      startTimeRef.current = clock.elapsedTime * 1000;
+    }
+
+    const currentTime = clock.elapsedTime * 1000;
+    const animStartTime = startTimeRef.current ?? currentTime;
+
+    edgeData.forEach((edge, idx) => {
+      const { x, z, targetHeight, staggerDelayMs } = edge;
+
+      // Calculate per-building animation progress
+      const elapsed = currentTime - animStartTime - staggerDelayMs;
+      let animProgress = growProgress;
+
+      if (growProgress > 0 && elapsed >= 0) {
+        const t = Math.min(elapsed / springDuration, 1);
+        const eased = 1 - Math.pow(1 - t, 3);
+        animProgress = eased * growProgress;
+      } else if (growProgress > 0 && elapsed < 0) {
+        animProgress = 0;
+      }
+
+      const height = animProgress * targetHeight + minHeight;
+      const yPosition = height / 2 + baseOffset;
+
+      tempObject.position.set(x, yPosition, z);
+      tempObject.scale.set(0.3, height, 0.3); // Thin box for edge
+      tempObject.updateMatrix();
+
+      meshRef.current!.setMatrixAt(idx, tempObject.matrix);
+    });
+
+    meshRef.current.instanceMatrix.needsUpdate = true;
+  });
+
+  if (numEdges === 0) return null;
+
+  return (
+    <instancedMesh ref={meshRef} args={[undefined, undefined, numEdges]} frustumCulled={false}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshBasicMaterial color="#1a1a2e" transparent opacity={0.7} />
+    </instancedMesh>
+  );
+}
+
 // ============================================================================
 // Instanced Buildings - High performance rendering for large scenes
 // ============================================================================
@@ -465,17 +633,223 @@ function InstancedBuildings({
   if (visibleBuildings.length === 0) return null;
 
   return (
-    <instancedMesh
-      ref={meshRef}
-      args={[undefined, undefined, visibleBuildings.length]}
-      onPointerMove={handlePointerMove}
-      onPointerOut={handlePointerOut}
-      onClick={handleClick}
-      frustumCulled={false}
+    <group>
+      {/* Main building meshes */}
+      <instancedMesh
+        ref={meshRef}
+        args={[undefined, undefined, visibleBuildings.length]}
+        onPointerMove={handlePointerMove}
+        onPointerOut={handlePointerOut}
+        onClick={handleClick}
+        frustumCulled={false}
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial metalness={0.1} roughness={0.35} />
+      </instancedMesh>
+
+      {/* Building edge outlines - batched into single geometry for performance */}
+      <BuildingEdges
+        buildings={visibleBuildings}
+        growProgress={growProgress}
+        minHeight={minHeight}
+        baseOffset={baseOffset}
+        springDuration={springDuration}
+      />
+    </group>
+  );
+}
+
+// ============================================================================
+// Building Icons - Renders icons on top of buildings
+// ============================================================================
+
+interface BuildingIconsProps {
+  buildings: CityBuilding[];
+  centerOffset: { x: number; z: number };
+  growProgress: number;
+  heightScaling: HeightScaling;
+  linearScale: number;
+  highlightLayers: HighlightLayer[];
+  isolationMode: IsolationMode;
+  hasActiveHighlights: boolean;
+  staggerIndices: number[];
+  springDuration: number;
+  staggerDelay: number;
+}
+
+// Individual animated icon component
+interface AnimatedIconProps {
+  x: number;
+  z: number;
+  targetHeight: number;
+  iconSize: number;
+  texture: THREE.Texture;
+  opacity: number;
+  growProgress: number;
+  staggerDelayMs: number;
+  springDuration: number;
+}
+
+function AnimatedIcon({
+  x,
+  z,
+  targetHeight,
+  iconSize,
+  texture,
+  opacity,
+  growProgress,
+  staggerDelayMs,
+  springDuration,
+}: AnimatedIconProps) {
+  const spriteRef = useRef<THREE.Sprite>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const materialRef = useRef<THREE.SpriteMaterial>(null);
+
+  useFrame(({ clock }) => {
+    if (!spriteRef.current) return;
+
+    if (startTimeRef.current === null && growProgress > 0) {
+      startTimeRef.current = clock.elapsedTime * 1000;
+    }
+
+    const currentTime = clock.elapsedTime * 1000;
+    const animStartTime = startTimeRef.current ?? currentTime;
+
+    // Calculate per-icon animation progress
+    const elapsed = currentTime - animStartTime - staggerDelayMs;
+    let animProgress = growProgress;
+
+    if (growProgress > 0 && elapsed >= 0) {
+      const t = Math.min(elapsed / springDuration, 1);
+      const eased = 1 - Math.pow(1 - t, 3);
+      animProgress = eased * growProgress;
+    } else if (growProgress > 0 && elapsed < 0) {
+      animProgress = 0;
+    }
+
+    const minHeight = 0.3;
+    const baseOffset = 0.2;
+    const height = animProgress * targetHeight + minHeight;
+    const buildingTop = height + baseOffset;
+    const yPosition = buildingTop + iconSize / 2 + 2;
+
+    spriteRef.current.position.y = yPosition;
+
+    if (materialRef.current) {
+      materialRef.current.opacity = opacity * animProgress;
+    }
+  });
+
+  return (
+    <sprite
+      ref={spriteRef}
+      position={[x, 0, z]}
+      scale={[iconSize, iconSize, 1]}
     >
-      <boxGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial metalness={0.1} roughness={0.35} />
-    </instancedMesh>
+      <spriteMaterial
+        ref={materialRef}
+        map={texture}
+        transparent
+        opacity={0}
+        depthTest={true}
+        depthWrite={false}
+      />
+    </sprite>
+  );
+}
+
+function BuildingIcons({
+  buildings,
+  centerOffset,
+  growProgress,
+  heightScaling,
+  linearScale,
+  highlightLayers,
+  isolationMode,
+  hasActiveHighlights,
+  staggerIndices,
+  springDuration,
+  staggerDelay,
+}: BuildingIconsProps) {
+  // Pre-compute buildings with icons
+  const buildingsWithIcons = useMemo(() => {
+    return buildings
+      .map((building, index) => {
+        const config = getConfigForFile(building);
+        if (!config.icon) return null;
+
+        const highlight = getHighlightForPath(building.path, highlightLayers);
+        const isHighlighted = highlight !== null;
+        const shouldDim = hasActiveHighlights && !isHighlighted;
+        const shouldHide = shouldDim && isolationMode === 'hide';
+        const shouldCollapse = shouldDim && isolationMode === 'collapse';
+
+        if (shouldHide) return null;
+
+        const fullHeight = calculateBuildingHeight(building, heightScaling, linearScale);
+        const targetHeight = shouldCollapse ? 0.5 : fullHeight;
+
+        const x = building.position.x - centerOffset.x;
+        const z = building.position.z - centerOffset.z;
+
+        const staggerIndex = staggerIndices[index] ?? index;
+        const staggerDelayMs = staggerDelay * staggerIndex;
+
+        return {
+          building,
+          config,
+          x,
+          z,
+          targetHeight,
+          shouldDim,
+          staggerDelayMs,
+        };
+      })
+      .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]);
+
+  // 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}
+          />
+        );
+      })}
+    </>
   );
 }
 
@@ -762,20 +1136,33 @@ function CityScene({
     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 (
     <>
       <AnimatedCamera citySize={citySize} isFlat={growProgress === 0} />
 
-      <ambientLight intensity={0.4} />
+      <ambientLight intensity={1.2} />
+      <hemisphereLight
+        args={['#ddeeff', '#667788', 0.8]}
+        position={[0, citySize, 0]}
+      />
       <directionalLight
-        position={[citySize, citySize, citySize * 0.5]}
-        intensity={1}
+        position={[citySize, citySize * 1.5, citySize * 0.5]}
+        intensity={2}
         castShadow
         shadow-mapSize={[2048, 2048]}
       />
       <directionalLight
-        position={[-citySize * 0.5, citySize * 0.5, -citySize * 0.5]}
-        intensity={0.3}
+        position={[-citySize * 0.5, citySize * 0.8, -citySize * 0.5]}
+        intensity={1}
+      />
+      <directionalLight
+        position={[citySize * 0.3, citySize, citySize]}
+        intensity={0.6}
       />
 
       {cityData.districts.map((district) => (
@@ -803,6 +1190,20 @@ function CityScene({
         linearScale={linearScale}
         staggerIndices={staggerIndices}
       />
+
+      <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}
+      />
     </>
   );
 }

package/src/stories/FileCity3D.stories.tsx

@@ -478,3 +478,65 @@ export const LinearHeightScaling: Story = {
     linearScale: 0.5,
   },
 };
+
+// Real repository data from JSON files
+import authServerCityData from '../../../../assets/auth-server-city-data.json';
+import electronAppCityData from '../../../../assets/electron-app-city-data.json';
+import thisRepoCityData from '../../../../assets/this-repo-city-data.json';
+
+/**
+ * Auth Server - Real repository data
+ */
+export const AuthServer: Story = {
+  args: {
+    cityData: authServerCityData as CityData,
+    height: '100vh',
+    heightScaling: 'linear',
+    linearScale: 0.5,
+    animation: {
+      startFlat: true,
+      autoStartDelay: 800,
+      staggerDelay: 15,
+      tension: 120,
+      friction: 14,
+    },
+  },
+};
+
+/**
+ * Electron App - Real repository data (larger)
+ */
+export const ElectronApp: Story = {
+  args: {
+    cityData: electronAppCityData as CityData,
+    height: '100vh',
+    heightScaling: 'linear',
+    linearScale: 0.5,
+    animation: {
+      startFlat: true,
+      autoStartDelay: 600,
+      staggerDelay: 5,
+      tension: 150,
+      friction: 16,
+    },
+  },
+};
+
+/**
+ * This Repo - industry-themed-repository-composition-panels
+ */
+export const ThisRepo: Story = {
+  args: {
+    cityData: thisRepoCityData as CityData,
+    height: '100vh',
+    heightScaling: 'linear',
+    linearScale: 0.5,
+    animation: {
+      startFlat: true,
+      autoStartDelay: 700,
+      staggerDelay: 10,
+      tension: 130,
+      friction: 14,
+    },
+  },
+};