@principal-ai/file-city-react 0.5.3 → 0.5.5

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

@@ -0,0 +1,104 @@
+/**
+ * FileCity3D - 3D visualization of a codebase using React Three Fiber
+ *
+ * Renders CityData from file-city-builder as actual 3D buildings with
+ * camera controls, lighting, and interactivity.
+ *
+ * Supports animated transition from 2D (flat) to 3D (grown buildings).
+ */
+import React from 'react';
+import type { CityData, CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
+import type { ThreeElements } from '@react-three/fiber';
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+export type { CityData, CityBuilding, CityDistrict };
+export interface HighlightLayer {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Whether layer is active */
+    enabled: boolean;
+    /** Highlight color (hex) */
+    color: string;
+    /** Items to highlight */
+    items: HighlightItem[];
+    /** Opacity for highlighted items (0-1) */
+    opacity?: number;
+}
+export interface HighlightItem {
+    /** File or directory path */
+    path: string;
+    /** Type of item */
+    type: 'file' | 'directory';
+}
+/** What to do with non-highlighted buildings */
+export type IsolationMode = 'none' | 'transparent' | 'collapse' | 'hide';
+export interface AnimationConfig {
+    /** Start with buildings flat (2D view) */
+    startFlat?: boolean;
+    /** Auto-start the grow animation after this delay (ms). Set to null to disable. */
+    autoStartDelay?: number | null;
+    /** Duration of the grow animation in ms */
+    growDuration?: number;
+    /** Stagger delay between buildings in ms */
+    staggerDelay?: number;
+    /** Spring tension (higher = faster/snappier) */
+    tension?: number;
+    /** Spring friction (higher = less bouncy) */
+    friction?: number;
+}
+/** Height scaling mode for buildings */
+export type HeightScaling = 'logarithmic' | 'linear';
+export declare function resetCamera(): void;
+export interface FileCity3DProps {
+    /** City data from file-city-builder */
+    cityData: CityData;
+    /** Width of the container */
+    width?: number | string;
+    /** Height of the container */
+    height?: number | string;
+    /** Callback when a building is clicked */
+    onBuildingClick?: (building: CityBuilding) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Animation configuration */
+    animation?: AnimationConfig;
+    /** External control: set to true to grow buildings, false to flatten */
+    isGrown?: boolean;
+    /** Callback when grow state changes */
+    onGrowChange?: (isGrown: boolean) => void;
+    /** Show control buttons */
+    showControls?: boolean;
+    /** Highlight layers for focusing on specific files/directories */
+    highlightLayers?: HighlightLayer[];
+    /** How to handle non-highlighted buildings when highlights are active */
+    isolationMode?: IsolationMode;
+    /** Opacity for dimmed buildings in transparent mode (0-1) */
+    dimOpacity?: number;
+    /** Whether data is currently loading */
+    isLoading?: boolean;
+    /** Message to display while loading */
+    loadingMessage?: string;
+    /** Message to display when there's no data */
+    emptyMessage?: string;
+    /** Height scaling mode: 'logarithmic' (default) or 'linear' */
+    heightScaling?: HeightScaling;
+    /** Scale factor for linear mode (height per line, default 0.05) */
+    linearScale?: number;
+}
+/**
+ * FileCity3D - 3D visualization of codebase structure
+ *
+ * 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, }: FileCity3DProps): React.JSX.Element;
+export default FileCity3D;
+//# sourceMappingURL=FileCity3D.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,547 @@
+"use strict";
+/**
+ * FileCity3D - 3D visualization of a codebase using React Three Fiber
+ *
+ * Renders CityData from file-city-builder as actual 3D buildings with
+ * camera controls, lighting, and interactivity.
+ *
+ * Supports animated transition from 2D (flat) to 3D (grown buildings).
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetCamera = resetCamera;
+exports.FileCity3D = FileCity3D;
+const react_1 = __importStar(require("react"));
+const fiber_1 = require("@react-three/fiber");
+const industry_theme_1 = require("@principal-ade/industry-theme");
+const three_1 = require("@react-spring/three");
+const drei_1 = require("@react-three/drei");
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
+const THREE = __importStar(require("three"));
+const DEFAULT_ANIMATION = {
+    startFlat: false,
+    autoStartDelay: 500,
+    growDuration: 1500,
+    staggerDelay: 15,
+    tension: 120,
+    friction: 14,
+};
+// Code file extensions - height based on line count
+const CODE_EXTENSIONS = new Set([
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'mjs',
+    'cjs',
+    'py',
+    'pyw',
+    'rs',
+    'go',
+    'java',
+    'kt',
+    'scala',
+    'c',
+    'cpp',
+    'cc',
+    'cxx',
+    'h',
+    'hpp',
+    'cs',
+    'rb',
+    'php',
+    'swift',
+    'vue',
+    'svelte',
+    'lua',
+    'sh',
+    'bash',
+    'zsh',
+    'sql',
+    'r',
+    'dart',
+    'elm',
+    'ex',
+    'exs',
+    'clj',
+    'cljs',
+    'hs',
+    'ml',
+    'mli',
+]);
+function isCodeFile(extension) {
+    return CODE_EXTENSIONS.has(extension.toLowerCase());
+}
+/**
+ * Calculate building height based on file metrics.
+ * - logarithmic: Compresses large values (default, good for mixed codebases)
+ * - linear: Direct scaling (1 line = linearScale units of height)
+ */
+function calculateBuildingHeight(building, scaling = 'logarithmic', linearScale = 0.05) {
+    const minHeight = 2;
+    // Use lineCount if available (any text file), otherwise fall back to size
+    if (building.lineCount !== undefined) {
+        const lines = Math.max(building.lineCount, 1);
+        if (scaling === 'linear') {
+            return minHeight + lines * linearScale;
+        }
+        // Logarithmic: log10(10) = 1, log10(100) = 2, log10(1000) = 3
+        return minHeight + Math.log10(lines) * 12;
+    }
+    else if (building.size !== undefined) {
+        const bytes = Math.max(building.size, 1);
+        if (scaling === 'linear') {
+            return minHeight + (bytes / 1024) * linearScale;
+        }
+        // Logarithmic scale based on size
+        return minHeight + (Math.log10(bytes) - 2) * 12;
+    }
+    // Fallback to dimension height if no metrics available
+    return building.dimensions[1];
+}
+// Get full file config from centralized file-city-builder lookup
+function getConfigForFile(building) {
+    if (building.color) {
+        return {
+            color: building.color,
+            renderStrategy: 'fill',
+            opacity: 1,
+            matchedPattern: 'preset',
+            matchType: 'filename',
+        };
+    }
+    return (0, file_city_builder_1.getFileConfig)(building.path);
+}
+function getColorForFile(building) {
+    return getConfigForFile(building).color;
+}
+/**
+ * Check if a path is highlighted by any enabled layer.
+ */
+function getHighlightForPath(path, layers) {
+    for (const layer of layers) {
+        if (!layer.enabled)
+            continue;
+        for (const item of layer.items) {
+            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 + '/'))) {
+                return { color: layer.color, opacity: layer.opacity ?? 1 };
+            }
+        }
+    }
+    return null;
+}
+function hasActiveHighlights(layers) {
+    return layers.some((layer) => layer.enabled && layer.items.length > 0);
+}
+// Animated RoundedBox wrapper
+const AnimatedRoundedBox = (0, three_1.animated)(drei_1.RoundedBox);
+function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hoveredIndex, growProgress, animationConfig, highlightLayers, isolationMode, hasActiveHighlights, dimOpacity, heightScaling, linearScale, staggerIndices, }) {
+    const meshRef = (0, react_1.useRef)(null);
+    const startTimeRef = (0, react_1.useRef)(null);
+    const tempObject = (0, react_1.useMemo)(() => new THREE.Object3D(), []);
+    const tempColor = (0, react_1.useMemo)(() => new THREE.Color(), []);
+    // Pre-compute building data
+    const buildingData = (0, react_1.useMemo)(() => {
+        return buildings.map((building, index) => {
+            const [width, , depth] = building.dimensions;
+            const highlight = getHighlightForPath(building.path, highlightLayers);
+            const isHighlighted = highlight !== null;
+            const shouldDim = hasActiveHighlights && !isHighlighted;
+            const shouldCollapse = shouldDim && isolationMode === 'collapse';
+            const shouldHide = shouldDim && isolationMode === 'hide';
+            const fullHeight = calculateBuildingHeight(building, heightScaling, linearScale);
+            const targetHeight = shouldCollapse ? 0.5 : fullHeight;
+            const baseColor = getColorForFile(building);
+            const color = isHighlighted ? highlight.color : baseColor;
+            const x = building.position.x - centerOffset.x;
+            const z = building.position.z - centerOffset.z;
+            const staggerIndex = staggerIndices[index] ?? index;
+            const staggerDelayMs = (animationConfig.staggerDelay || 15) * staggerIndex;
+            return {
+                building,
+                index,
+                width,
+                depth,
+                targetHeight,
+                color,
+                x,
+                z,
+                shouldHide,
+                shouldDim,
+                staggerDelayMs,
+                isHighlighted,
+            };
+        });
+    }, [
+        buildings,
+        centerOffset,
+        highlightLayers,
+        hasActiveHighlights,
+        isolationMode,
+        heightScaling,
+        linearScale,
+        staggerIndices,
+        animationConfig.staggerDelay,
+    ]);
+    const visibleBuildings = (0, react_1.useMemo)(() => buildingData.filter((b) => !b.shouldHide), [buildingData]);
+    const minHeight = 0.3;
+    const baseOffset = 0.2;
+    const tension = animationConfig.tension || 120;
+    const friction = animationConfig.friction || 14;
+    const springDuration = Math.sqrt(1 / (tension * 0.001)) * friction * 20;
+    (0, react_1.useEffect)(() => {
+        if (!meshRef.current)
+            return;
+        visibleBuildings.forEach((data, instanceIndex) => {
+            const { width, depth, x, z, color, targetHeight } = data;
+            const height = growProgress * targetHeight + minHeight;
+            const yPosition = height / 2 + baseOffset;
+            tempObject.position.set(x, yPosition, z);
+            tempObject.scale.set(width, height, depth);
+            tempObject.updateMatrix();
+            meshRef.current.setMatrixAt(instanceIndex, tempObject.matrix);
+            tempColor.set(color);
+            meshRef.current.setColorAt(instanceIndex, tempColor);
+        });
+        meshRef.current.instanceMatrix.needsUpdate = true;
+        if (meshRef.current.instanceColor) {
+            meshRef.current.instanceColor.needsUpdate = true;
+        }
+    }, [
+        visibleBuildings,
+        growProgress,
+        tempObject,
+        tempColor,
+        minHeight,
+        baseOffset,
+    ]);
+    (0, fiber_1.useFrame)(({ clock }) => {
+        if (!meshRef.current)
+            return;
+        if (startTimeRef.current === null && growProgress > 0) {
+            startTimeRef.current = clock.elapsedTime * 1000;
+        }
+        const currentTime = clock.elapsedTime * 1000;
+        const animStartTime = startTimeRef.current ?? currentTime;
+        visibleBuildings.forEach((data, instanceIndex) => {
+            const { width, depth, targetHeight, x, z, staggerDelayMs, shouldDim } = data;
+            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;
+            const isHovered = hoveredIndex === data.index;
+            const scale = isHovered ? 1.05 : 1;
+            tempObject.position.set(x, yPosition, z);
+            tempObject.scale.set(width * scale, height, depth * scale);
+            tempObject.updateMatrix();
+            meshRef.current.setMatrixAt(instanceIndex, tempObject.matrix);
+            const opacity = shouldDim && isolationMode === 'transparent' ? dimOpacity : 1;
+            tempColor.set(data.color);
+            if (opacity < 1) {
+                tempColor.multiplyScalar(opacity + 0.3);
+            }
+            if (isHovered) {
+                tempColor.multiplyScalar(1.2);
+            }
+            meshRef.current.setColorAt(instanceIndex, tempColor);
+        });
+        meshRef.current.instanceMatrix.needsUpdate = true;
+        if (meshRef.current.instanceColor) {
+            meshRef.current.instanceColor.needsUpdate = true;
+        }
+    });
+    const handlePointerMove = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (e.instanceId !== undefined &&
+            e.instanceId < visibleBuildings.length) {
+            const data = visibleBuildings[e.instanceId];
+            onHover?.(data.building);
+        }
+    }, [visibleBuildings, onHover]);
+    const handlePointerOut = (0, react_1.useCallback)(() => {
+        onHover?.(null);
+    }, [onHover]);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        if (e.instanceId !== undefined &&
+            e.instanceId < visibleBuildings.length) {
+            const data = visibleBuildings[e.instanceId];
+            onClick?.(data.building);
+        }
+    }, [visibleBuildings, onClick]);
+    if (visibleBuildings.length === 0)
+        return null;
+    return (react_1.default.createElement("instancedMesh", { ref: meshRef, args: [undefined, undefined, visibleBuildings.length], onPointerMove: handlePointerMove, onPointerOut: handlePointerOut, onClick: handleClick, frustumCulled: false },
+        react_1.default.createElement("boxGeometry", { args: [1, 1, 1] }),
+        react_1.default.createElement("meshStandardMaterial", { metalness: 0.1, roughness: 0.35 })));
+}
+function DistrictFloor({ district, centerOffset, opacity, }) {
+    const { worldBounds } = district;
+    const width = worldBounds.maxX - worldBounds.minX;
+    const depth = worldBounds.maxZ - worldBounds.minZ;
+    const centerX = (worldBounds.minX + worldBounds.maxX) / 2 - centerOffset.x;
+    const centerZ = (worldBounds.minZ + worldBounds.maxZ) / 2 - centerOffset.z;
+    const dirName = district.path.split('/').pop() || district.path;
+    const pathDepth = district.path.split('/').length;
+    const floorY = -5 - pathDepth * 0.1;
+    return (react_1.default.createElement("group", { position: [centerX, 0, centerZ] },
+        react_1.default.createElement("lineSegments", { rotation: [-Math.PI / 2, 0, 0], position: [0, floorY, 0], renderOrder: -1 },
+            react_1.default.createElement("edgesGeometry", { args: [new THREE.PlaneGeometry(width, depth)], attach: "geometry" }),
+            react_1.default.createElement("lineBasicMaterial", { color: "#475569", depthWrite: false })),
+        district.label && (react_1.default.createElement(drei_1.Text, { position: [0, 1.5, depth / 2 + 2], rotation: [-Math.PI / 6, 0, 0], fontSize: Math.min(3, width / 6), color: "#cbd5e1", anchorX: "center", anchorY: "middle", outlineWidth: 0.1, outlineColor: "#0f172a" }, dirName))));
+}
+let cameraResetFn = null;
+function resetCamera() {
+    cameraResetFn?.();
+}
+function AnimatedCamera({ citySize, isFlat }) {
+    const { camera } = (0, fiber_1.useThree)();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const controlsRef = (0, react_1.useRef)(null);
+    const resetToInitial = (0, react_1.useCallback)(() => {
+        const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
+        const targetZ = isFlat ? 0 : citySize * 1.3;
+        camera.position.set(0, targetHeight, targetZ);
+        camera.lookAt(0, 0, 0);
+        if (controlsRef.current) {
+            controlsRef.current.target.set(0, 0, 0);
+            controlsRef.current.update();
+        }
+    }, [isFlat, citySize, camera]);
+    (0, react_1.useEffect)(() => {
+        resetToInitial();
+    }, [resetToInitial]);
+    (0, react_1.useEffect)(() => {
+        cameraResetFn = resetToInitial;
+        return () => {
+            cameraResetFn = null;
+        };
+    }, [resetToInitial]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(drei_1.PerspectiveCamera, { makeDefault: true, fov: 50, near: 1, far: citySize * 10 }),
+        react_1.default.createElement(drei_1.OrbitControls, { ref: controlsRef, enableDamping: true, dampingFactor: 0.05, minDistance: 10, maxDistance: citySize * 3, maxPolarAngle: Math.PI / 2.1 })));
+}
+function InfoPanel({ building }) {
+    if (!building)
+        return null;
+    const fileName = building.path.split('/').pop();
+    const dirPath = building.path.split('/').slice(0, -1).join('/');
+    const rawExt = building.fileExtension || building.path.split('.').pop() || '';
+    const ext = rawExt.replace(/^\./, '');
+    const isCode = isCodeFile(ext);
+    return (react_1.default.createElement("div", { style: {
+            position: 'absolute',
+            bottom: 16,
+            left: 16,
+            background: 'rgba(15, 23, 42, 0.9)',
+            border: '1px solid #334155',
+            borderRadius: 8,
+            padding: '12px 16px',
+            color: '#e2e8f0',
+            fontSize: 14,
+            fontFamily: 'monospace',
+            maxWidth: 400,
+            pointerEvents: 'none',
+        } },
+        react_1.default.createElement("div", { style: { fontWeight: 600, marginBottom: 4 } }, fileName),
+        react_1.default.createElement("div", { style: { color: '#94a3b8', fontSize: 12 } }, dirPath),
+        react_1.default.createElement("div", { style: {
+                color: '#64748b',
+                fontSize: 11,
+                marginTop: 4,
+                display: 'flex',
+                gap: 12,
+            } },
+            building.lineCount !== undefined && (react_1.default.createElement("span", null,
+                building.lineCount.toLocaleString(),
+                " lines")),
+            building.size !== undefined && (react_1.default.createElement("span", null,
+                (building.size / 1024).toFixed(1),
+                " KB")))));
+}
+function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
+    const buttonStyle = {
+        background: 'rgba(15, 23, 42, 0.9)',
+        border: '1px solid #334155',
+        borderRadius: 6,
+        padding: '8px 16px',
+        color: '#e2e8f0',
+        fontSize: 13,
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+    };
+    return (react_1.default.createElement("div", { style: {
+            position: 'absolute',
+            top: 16,
+            right: 16,
+            display: 'flex',
+            gap: 8,
+        } },
+        react_1.default.createElement("button", { onClick: onResetCamera, style: buttonStyle }, "Reset View"),
+        react_1.default.createElement("button", { onClick: onToggle, style: buttonStyle }, isFlat ? 'Grow to 3D' : 'Flatten to 2D')));
+}
+function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, growProgress, animationConfig, highlightLayers, isolationMode, dimOpacity, heightScaling, linearScale, }) {
+    const centerOffset = (0, react_1.useMemo)(() => ({
+        x: (cityData.bounds.minX + cityData.bounds.maxX) / 2,
+        z: (cityData.bounds.minZ + cityData.bounds.maxZ) / 2,
+    }), [cityData.bounds]);
+    const citySize = Math.max(cityData.bounds.maxX - cityData.bounds.minX, cityData.bounds.maxZ - cityData.bounds.minZ);
+    const activeHighlights = (0, react_1.useMemo)(() => hasActiveHighlights(highlightLayers), [highlightLayers]);
+    const staggerIndices = (0, react_1.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)),
+        }));
+        withDistance.sort((a, b) => a.distance - b.distance);
+        const indices = new Array(cityData.buildings.length);
+        withDistance.forEach((item, staggerOrder) => {
+            indices[item.originalIndex] = staggerOrder;
+        });
+        return indices;
+    }, [cityData.buildings, cityData.bounds]);
+    const hoveredIndex = (0, react_1.useMemo)(() => {
+        if (!hoveredBuilding)
+            return null;
+        return cityData.buildings.findIndex((b) => b.path === hoveredBuilding.path);
+    }, [hoveredBuilding, cityData.buildings]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AnimatedCamera, { citySize: citySize, isFlat: growProgress === 0 }),
+        react_1.default.createElement("ambientLight", { intensity: 0.4 }),
+        react_1.default.createElement("directionalLight", { position: [citySize, citySize, citySize * 0.5], intensity: 1, castShadow: true, "shadow-mapSize": [2048, 2048] }),
+        react_1.default.createElement("directionalLight", { position: [-citySize * 0.5, citySize * 0.5, -citySize * 0.5], intensity: 0.3 }),
+        cityData.districts.map((district) => (react_1.default.createElement(DistrictFloor, { key: district.path, district: district, centerOffset: centerOffset, opacity: 1 }))),
+        react_1.default.createElement(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 })));
+}
+/**
+ * FileCity3D - 3D visualization of codebase structure
+ *
+ * Renders CityData as an interactive 3D city where buildings represent files
+ * and their height corresponds to line count or file size.
+ */
+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, }) {
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const [hoveredBuilding, setHoveredBuilding] = (0, react_1.useState)(null);
+    const [internalIsGrown, setInternalIsGrown] = (0, react_1.useState)(false);
+    const animationConfig = (0, react_1.useMemo)(() => ({ ...DEFAULT_ANIMATION, ...animation }), [animation]);
+    const isGrown = externalIsGrown !== undefined ? externalIsGrown : internalIsGrown;
+    const setIsGrown = (value) => {
+        setInternalIsGrown(value);
+        onGrowChange?.(value);
+    };
+    (0, react_1.useEffect)(() => {
+        if (animationConfig.startFlat && animationConfig.autoStartDelay !== null) {
+            const timer = setTimeout(() => {
+                setIsGrown(true);
+            }, animationConfig.autoStartDelay);
+            return () => clearTimeout(timer);
+        }
+        else if (!animationConfig.startFlat) {
+            setIsGrown(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationConfig.startFlat, animationConfig.autoStartDelay]);
+    const growProgress = isGrown ? 1 : 0;
+    const handleToggle = () => {
+        setIsGrown(!isGrown);
+    };
+    if (isLoading) {
+        return (react_1.default.createElement("div", { className: className, style: {
+                width,
+                height,
+                position: 'relative',
+                background: theme.colors.background,
+                overflow: 'hidden',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.colors.textSecondary,
+                fontFamily: 'system-ui, sans-serif',
+                fontSize: 14,
+                ...style,
+            } }, loadingMessage));
+    }
+    if (!cityData || cityData.buildings.length === 0) {
+        return (react_1.default.createElement("div", { className: className, style: {
+                width,
+                height,
+                position: 'relative',
+                background: theme.colors.background,
+                overflow: 'hidden',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: theme.colors.textSecondary,
+                fontFamily: 'system-ui, sans-serif',
+                fontSize: 14,
+                ...style,
+            } }, emptyMessage));
+    }
+    return (react_1.default.createElement("div", { className: className, style: {
+            width,
+            height,
+            position: 'relative',
+            background: theme.colors.background,
+            overflow: 'hidden',
+            ...style,
+        } },
+        react_1.default.createElement(fiber_1.Canvas, { shadows: true, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+            } },
+            react_1.default.createElement(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale })),
+        react_1.default.createElement(InfoPanel, { building: hoveredBuilding }),
+        showControls && (react_1.default.createElement(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))));
+}
+exports.default = FileCity3D;

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

@@ -0,0 +1,6 @@
+/**
+ * FileCity3D - 3D visualization component
+ */
+export { FileCity3D, resetCamera } from './FileCity3D';
+export type { FileCity3DProps, AnimationConfig, HighlightLayer, HighlightItem, IsolationMode, HeightScaling, CityData, CityBuilding, CityDistrict, } from './FileCity3D';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileCity3D/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EACV,eAAe,EACf,eAAe,EACf,cAAc,EACd,aAAa,EACb,aAAa,EACb,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,MAAM,cAAc,CAAC"}

package/dist/components/FileCity3D/index.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * FileCity3D - 3D visualization component
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetCamera = exports.FileCity3D = void 0;
+var FileCity3D_1 = require("./FileCity3D");
+Object.defineProperty(exports, "FileCity3D", { enumerable: true, get: function () { return FileCity3D_1.FileCity3D; } });
+Object.defineProperty(exports, "resetCamera", { enumerable: true, get: function () { return FileCity3D_1.resetCamera; } });