@principal-ai/file-city-react 0.5.2 → 0.5.4

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; } });

package/dist/index.d.ts

@@ -13,4 +13,6 @@ export type { UseCodeCityDataOptions, UseCodeCityDataReturn } from './hooks/useC
 export type { FileTree } from '@principal-ai/file-city-builder';
 export { CityViewWithReactFlow, type CityViewWithReactFlowProps, } from './components/CityViewWithReactFlow';
 export { ThemeProvider, useTheme } from '@principal-ade/industry-theme';
+export { FileCity3D, resetCamera } from './components/FileCity3D';
+export type { FileCity3DProps, AnimationConfig, HighlightLayer as FileCity3DHighlightLayer, HighlightItem as FileCity3DHighlightItem, IsolationMode, HeightScaling, } from './components/FileCity3D';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,8BAA8B,EAC9B,KAAK,mCAAmC,GACzC,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,UAAU,GACX,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EACL,gCAAgC,EAChC,6BAA6B,EAC7B,oCAAoC,GACrC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,8BAA8B,EAC9B,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAGzF,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG7F,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,QAAQ,EACR,UAAU,GACX,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG7F,YAAY,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,8BAA8B,EAC9B,KAAK,mCAAmC,GACzC,MAAM,6CAA6C,CAAC;AAGrD,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,UAAU,GACX,MAAM,sCAAsC,CAAC;AAG9C,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EACL,gCAAgC,EAChC,6BAA6B,EAC7B,oCAAoC,GACrC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,8BAA8B,EAC9B,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAE1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAGzF,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAG7F,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,sBAAsB,EACtB,QAAQ,EACR,UAAU,GACX,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAG7F,YAAY,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAGhE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAClE,YAAY,EACV,eAAe,EACf,eAAe,EACf,cAAc,IAAI,wBAAwB,EAC1C,aAAa,IAAI,uBAAuB,EACxC,aAAa,EACb,aAAa,GACd,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = exports.CityViewWithReactFlow = exports.useCodeCityData = exports.MultiVersionCityBuilder = exports.drawFileTypeIcon = exports.getFileTypeIcon = exports.extractIconConfig = exports.mergeFileColorConfig = exports.devFileColorOverrides = exports.getFileColorMapping = exports.getDefaultFileColorConfig = exports.createFileColorHighlightLayers = exports.filterCityDataForMultipleDirectories = exports.filterCityDataForSubdirectory = exports.filterCityDataForSelectiveRender = exports.LayerIndex = exports.ArchitectureMapHighlightLayers = void 0;
+exports.resetCamera = exports.FileCity3D = exports.useTheme = exports.ThemeProvider = exports.CityViewWithReactFlow = exports.useCodeCityData = exports.MultiVersionCityBuilder = exports.drawFileTypeIcon = exports.getFileTypeIcon = exports.extractIconConfig = exports.mergeFileColorConfig = exports.devFileColorOverrides = exports.getFileColorMapping = exports.getDefaultFileColorConfig = exports.createFileColorHighlightLayers = exports.filterCityDataForMultipleDirectories = exports.filterCityDataForSubdirectory = exports.filterCityDataForSelectiveRender = exports.LayerIndex = exports.ArchitectureMapHighlightLayers = void 0;
 // Main component export
 var ArchitectureMapHighlightLayers_1 = require("./components/ArchitectureMapHighlightLayers");
 Object.defineProperty(exports, "ArchitectureMapHighlightLayers", { enumerable: true, get: function () { return ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers; } });
@@ -39,3 +39,7 @@ Object.defineProperty(exports, "CityViewWithReactFlow", { enumerable: true, get:
 var industry_theme_1 = require("@principal-ade/industry-theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return industry_theme_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return industry_theme_1.useTheme; } });
+// 3D visualization component
+var FileCity3D_1 = require("./components/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; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,9 +14,13 @@
   "dependencies": {
     "@principal-ade/industry-theme": "^0.1.3",
     "@principal-ai/alexandria-core-library": "^0.1.36",
-    "@principal-ai/file-city-builder": "^0.4.0",
+    "@principal-ai/file-city-builder": "^0.4.5",
+    "@react-spring/three": "^9.7.5",
+    "@react-three/drei": "^10.0.6",
+    "@react-three/fiber": "^9.1.2",
     "lucide-react": "^0.563.0",
-    "reactflow": "^11.11.4"
+    "reactflow": "^11.11.4",
+    "three": "^0.175.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"
@@ -27,6 +31,7 @@
     "@storybook/react-vite": "^10.1.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.175.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "storybook": "^10.1.2",

package/src/components/ArchitectureMapHighlightLayers.tsx

@@ -1158,8 +1158,14 @@ function ArchitectureMapHighlightLayersInner({
 
     // Performance monitoring start available for debugging
 
-    const displayWidth = canvas.clientWidth || canvasSize.width;
-    const displayHeight = canvas.clientHeight || canvasSize.height;
+    let displayWidth = canvas.clientWidth || canvasSize.width;
+    let displayHeight = canvas.clientHeight || canvasSize.height;
+
+    // Cap canvas size if maxCanvasSize is set (prevents iOS Safari crashes)
+    if (maxCanvasSize !== undefined) {
+      displayWidth = Math.min(displayWidth, maxCanvasSize);
+      displayHeight = Math.min(displayHeight, maxCanvasSize);
+    }
 
     canvas.width = displayWidth;
     canvas.height = displayHeight;