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

package/dist/components/FileCity3D/FileCity3D.js

@@ -1,4 +1,4 @@
-"use strict";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * FileCity3D - 3D visualization of a codebase using React Three Fiber
  *
@@ -7,49 +7,13 @@
  *
  * 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"));
+import { useMemo, useRef, useState, useEffect, useCallback, } from 'react';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { useTheme } from '@principal-ade/industry-theme';
+import { animated } from '@react-spring/three';
+import { OrbitControls, PerspectiveCamera, Text, RoundedBox, } from '@react-three/drei';
+import { getFileConfig } from '@principal-ai/file-city-builder';
+import * as THREE from 'three';
 const DEFAULT_ANIMATION = {
     startFlat: false,
     autoStartDelay: 500,
@@ -142,7 +106,7 @@ function getConfigForFile(building) {
             matchType: 'filename',
         };
     }
-    return (0, file_city_builder_1.getFileConfig)(building.path);
+    return getFileConfig(building.path);
 }
 function getColorForFile(building) {
     return getConfigForFile(building).color;
@@ -170,14 +134,14 @@ 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);
+const AnimatedRoundedBox = animated(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(), []);
+    const meshRef = useRef(null);
+    const startTimeRef = useRef(null);
+    const tempObject = useMemo(() => new THREE.Object3D(), []);
+    const tempColor = useMemo(() => new THREE.Color(), []);
     // Pre-compute building data
-    const buildingData = (0, react_1.useMemo)(() => {
+    const buildingData = useMemo(() => {
         return buildings.map((building, index) => {
             const [width, , depth] = building.dimensions;
             const highlight = getHighlightForPath(building.path, highlightLayers);
@@ -219,13 +183,13 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
         staggerIndices,
         animationConfig.staggerDelay,
     ]);
-    const visibleBuildings = (0, react_1.useMemo)(() => buildingData.filter((b) => !b.shouldHide), [buildingData]);
+    const visibleBuildings = 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)(() => {
+    useEffect(() => {
         if (!meshRef.current)
             return;
         visibleBuildings.forEach((data, instanceIndex) => {
@@ -251,7 +215,7 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
         minHeight,
         baseOffset,
     ]);
-    (0, fiber_1.useFrame)(({ clock }) => {
+    useFrame(({ clock }) => {
         if (!meshRef.current)
             return;
         if (startTimeRef.current === null && growProgress > 0) {
@@ -294,7 +258,7 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             meshRef.current.instanceColor.needsUpdate = true;
         }
     });
-    const handlePointerMove = (0, react_1.useCallback)((e) => {
+    const handlePointerMove = useCallback((e) => {
         e.stopPropagation();
         if (e.instanceId !== undefined &&
             e.instanceId < visibleBuildings.length) {
@@ -302,10 +266,10 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
             onHover?.(data.building);
         }
     }, [visibleBuildings, onHover]);
-    const handlePointerOut = (0, react_1.useCallback)(() => {
+    const handlePointerOut = useCallback(() => {
         onHover?.(null);
     }, [onHover]);
-    const handleClick = (0, react_1.useCallback)((e) => {
+    const handleClick = useCallback((e) => {
         e.stopPropagation();
         if (e.instanceId !== undefined &&
             e.instanceId < visibleBuildings.length) {
@@ -315,9 +279,7 @@ function InstancedBuildings({ buildings, centerOffset, onHover, onClick, hovered
     }, [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 })));
+    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 })] }));
 }
 function DistrictFloor({ district, centerOffset, opacity, }) {
     const { worldBounds } = district;
@@ -328,21 +290,17 @@ function DistrictFloor({ district, centerOffset, opacity, }) {
     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))));
+    return (_jsxs("group", { position: [centerX, 0, centerZ], children: [_jsxs("lineSegments", { rotation: [-Math.PI / 2, 0, 0], position: [0, floorY, 0], renderOrder: -1, children: [_jsx("edgesGeometry", { args: [new THREE.PlaneGeometry(width, depth)], attach: "geometry" }), _jsx("lineBasicMaterial", { color: "#475569", depthWrite: false })] }), district.label && (_jsx(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", children: dirName }))] }));
 }
 let cameraResetFn = null;
-function resetCamera() {
+export function resetCamera() {
     cameraResetFn?.();
 }
 function AnimatedCamera({ citySize, isFlat }) {
-    const { camera } = (0, fiber_1.useThree)();
+    const { camera } = useThree();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const controlsRef = (0, react_1.useRef)(null);
-    const resetToInitial = (0, react_1.useCallback)(() => {
+    const controlsRef = useRef(null);
+    const resetToInitial = useCallback(() => {
         const targetHeight = isFlat ? citySize * 1.5 : citySize * 1.1;
         const targetZ = isFlat ? 0 : citySize * 1.3;
         camera.position.set(0, targetHeight, targetZ);
@@ -352,18 +310,16 @@ function AnimatedCamera({ citySize, isFlat }) {
             controlsRef.current.update();
         }
     }, [isFlat, citySize, camera]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         resetToInitial();
     }, [resetToInitial]);
-    (0, react_1.useEffect)(() => {
+    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 })));
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { makeDefault: true, fov: 50, near: 1, far: citySize * 10 }), _jsx(OrbitControls, { ref: controlsRef, enableDamping: true, dampingFactor: 0.05, minDistance: 10, maxDistance: citySize * 3, maxPolarAngle: Math.PI / 2.1 })] }));
 }
 function InfoPanel({ building }) {
     if (!building)
@@ -373,7 +329,7 @@ function InfoPanel({ building }) {
     const rawExt = building.fileExtension || building.path.split('.').pop() || '';
     const ext = rawExt.replace(/^\./, '');
     const isCode = isCodeFile(ext);
-    return (react_1.default.createElement("div", { style: {
+    return (_jsxs("div", { style: {
             position: 'absolute',
             bottom: 16,
             left: 16,
@@ -386,22 +342,13 @@ function InfoPanel({ building }) {
             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")))));
+        }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: fileName }), _jsx("div", { style: { color: '#94a3b8', fontSize: 12 }, children: dirPath }), _jsxs("div", { style: {
+                    color: '#64748b',
+                    fontSize: 11,
+                    marginTop: 4,
+                    display: 'flex',
+                    gap: 12,
+                }, children: [building.lineCount !== undefined && (_jsxs("span", { children: [building.lineCount.toLocaleString(), " lines"] })), building.size !== undefined && (_jsxs("span", { children: [(building.size / 1024).toFixed(1), " KB"] }))] })] }));
 }
 function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
     const buttonStyle = {
@@ -416,24 +363,22 @@ function ControlsOverlay({ isFlat, onToggle, onResetCamera, }) {
         alignItems: 'center',
         gap: 6,
     };
-    return (react_1.default.createElement("div", { style: {
+    return (_jsxs("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')));
+        }, children: [_jsx("button", { onClick: onResetCamera, style: buttonStyle, children: "Reset View" }), _jsx("button", { onClick: onToggle, style: buttonStyle, children: isFlat ? 'Grow to 3D' : 'Flatten to 2D' })] }));
 }
 function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding, growProgress, animationConfig, highlightLayers, isolationMode, dimOpacity, heightScaling, linearScale, }) {
-    const centerOffset = (0, react_1.useMemo)(() => ({
+    const centerOffset = 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 activeHighlights = useMemo(() => hasActiveHighlights(highlightLayers), [highlightLayers]);
+    const staggerIndices = useMemo(() => {
         const centerX = (cityData.bounds.minX + cityData.bounds.maxX) / 2;
         const centerZ = (cityData.bounds.minZ + cityData.bounds.maxZ) / 2;
         const withDistance = cityData.buildings.map((b, originalIndex) => ({
@@ -448,18 +393,12 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
         });
         return indices;
     }, [cityData.buildings, cityData.bounds]);
-    const hoveredIndex = (0, react_1.useMemo)(() => {
+    const hoveredIndex = 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 })));
+    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 })] }));
 }
 /**
  * FileCity3D - 3D visualization of codebase structure
@@ -467,17 +406,17 @@ function CityScene({ cityData, onBuildingHover, onBuildingClick, hoveredBuilding
  * Renders CityData as an interactive 3D city where buildings represent files
  * and their height corresponds to line count or file size.
  */
-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]);
+export function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, className, style, animation, isGrown: externalIsGrown, onGrowChange, showControls = true, highlightLayers = [], isolationMode = 'transparent', dimOpacity = 0.15, isLoading = false, loadingMessage = 'Loading file city...', emptyMessage = 'No file tree data available', heightScaling = 'logarithmic', linearScale = 0.05, }) {
+    const { theme } = useTheme();
+    const [hoveredBuilding, setHoveredBuilding] = useState(null);
+    const [internalIsGrown, setInternalIsGrown] = useState(false);
+    const animationConfig = useMemo(() => ({ ...DEFAULT_ANIMATION, ...animation }), [animation]);
     const isGrown = externalIsGrown !== undefined ? externalIsGrown : internalIsGrown;
     const setIsGrown = (value) => {
         setInternalIsGrown(value);
         onGrowChange?.(value);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (animationConfig.startFlat && animationConfig.autoStartDelay !== null) {
             const timer = setTimeout(() => {
                 setIsGrown(true);
@@ -494,7 +433,7 @@ function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, c
         setIsGrown(!isGrown);
     };
     if (isLoading) {
-        return (react_1.default.createElement("div", { className: className, style: {
+        return (_jsx("div", { className: className, style: {
                 width,
                 height,
                 position: 'relative',
@@ -507,10 +446,10 @@ function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, c
                 fontFamily: 'system-ui, sans-serif',
                 fontSize: 14,
                 ...style,
-            } }, loadingMessage));
+            }, children: loadingMessage }));
     }
     if (!cityData || cityData.buildings.length === 0) {
-        return (react_1.default.createElement("div", { className: className, style: {
+        return (_jsx("div", { className: className, style: {
                 width,
                 height,
                 position: 'relative',
@@ -523,25 +462,21 @@ function FileCity3D({ cityData, width = '100%', height = 600, onBuildingClick, c
                 fontFamily: 'system-ui, sans-serif',
                 fontSize: 14,
                 ...style,
-            } }, emptyMessage));
+            }, children: emptyMessage }));
     }
-    return (react_1.default.createElement("div", { className: className, style: {
+    return (_jsxs("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 }))));
+        }, children: [_jsx(Canvas, { shadows: true, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                }, children: _jsx(CityScene, { cityData: cityData, onBuildingHover: setHoveredBuilding, onBuildingClick: onBuildingClick, hoveredBuilding: hoveredBuilding, growProgress: growProgress, animationConfig: animationConfig, highlightLayers: highlightLayers, isolationMode: isolationMode, dimOpacity: dimOpacity, heightScaling: heightScaling, linearScale: linearScale }) }), _jsx(InfoPanel, { building: hoveredBuilding }), showControls && (_jsx(ControlsOverlay, { isFlat: !isGrown, onToggle: handleToggle, onResetCamera: resetCamera }))] }));
 }
-exports.default = FileCity3D;
+export default FileCity3D;

package/dist/components/FileCity3D/index.js

@@ -1,9 +1,4 @@
-"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; } });
+export { FileCity3D, resetCamera } from './FileCity3D';

package/dist/hooks/useCodeCityData.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCodeCityData = useCodeCityData;
-const react_1 = require("react");
-const file_city_builder_1 = require("@principal-ai/file-city-builder");
-function useCodeCityData({ fileSystemTree, autoUpdate = true, }) {
-    const [cityData, setCityData] = (0, react_1.useState)(null);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
+import { useState, useEffect, useMemo } from 'react';
+import { MultiVersionCityBuilder } from '@principal-ai/file-city-builder';
+export function useCodeCityData({ fileSystemTree, autoUpdate = true, }) {
+    const [cityData, setCityData] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
     // UI state
-    const [highlightedPaths, setHighlightedPaths] = (0, react_1.useState)(new Set());
-    const [selectedPaths, setSelectedPaths] = (0, react_1.useState)(new Set());
-    const [focusDirectory, setFocusDirectory] = (0, react_1.useState)(null);
+    const [highlightedPaths, setHighlightedPaths] = useState(new Set());
+    const [selectedPaths, setSelectedPaths] = useState(new Set());
+    const [focusDirectory, setFocusDirectory] = useState(null);
     // Rebuild city data
-    const rebuild = (0, react_1.useMemo)(() => {
+    const rebuild = useMemo(() => {
         return () => {
             if (!fileSystemTree) {
                 setCityData(null);
@@ -24,7 +21,7 @@ function useCodeCityData({ fileSystemTree, autoUpdate = true, }) {
             try {
                 // Create a single-version map for the builder
                 const versionMap = new Map([['main', fileSystemTree]]);
-                const { unionCity } = file_city_builder_1.MultiVersionCityBuilder.build(versionMap);
+                const { unionCity } = MultiVersionCityBuilder.build(versionMap);
                 setCityData(unionCity);
             }
             catch (err) {
@@ -37,7 +34,7 @@ function useCodeCityData({ fileSystemTree, autoUpdate = true, }) {
         };
     }, [fileSystemTree]);
     // Auto rebuild when dependencies change
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (autoUpdate) {
             rebuild();
         }

package/dist/index.js

@@ -1,45 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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; } });
+export { ArchitectureMapHighlightLayers, } from './components/ArchitectureMapHighlightLayers';
 // Layer and rendering types
-var drawLayeredBuildings_1 = require("./render/client/drawLayeredBuildings");
-Object.defineProperty(exports, "LayerIndex", { enumerable: true, get: function () { return drawLayeredBuildings_1.LayerIndex; } });
+export { LayerIndex, } from './render/client/drawLayeredBuildings';
 // Utility functions
-var cityDataUtils_1 = require("./builder/cityDataUtils");
-Object.defineProperty(exports, "filterCityDataForSelectiveRender", { enumerable: true, get: function () { return cityDataUtils_1.filterCityDataForSelectiveRender; } });
-Object.defineProperty(exports, "filterCityDataForSubdirectory", { enumerable: true, get: function () { return cityDataUtils_1.filterCityDataForSubdirectory; } });
-Object.defineProperty(exports, "filterCityDataForMultipleDirectories", { enumerable: true, get: function () { return cityDataUtils_1.filterCityDataForMultipleDirectories; } });
+export { filterCityDataForSelectiveRender, filterCityDataForSubdirectory, filterCityDataForMultipleDirectories, } from './builder/cityDataUtils';
 // File color highlight layer utilities
-var fileColorHighlightLayers_1 = require("./utils/fileColorHighlightLayers");
-Object.defineProperty(exports, "createFileColorHighlightLayers", { enumerable: true, get: function () { return fileColorHighlightLayers_1.createFileColorHighlightLayers; } });
-Object.defineProperty(exports, "getDefaultFileColorConfig", { enumerable: true, get: function () { return fileColorHighlightLayers_1.getDefaultFileColorConfig; } });
-Object.defineProperty(exports, "getFileColorMapping", { enumerable: true, get: function () { return fileColorHighlightLayers_1.getFileColorMapping; } });
+export { createFileColorHighlightLayers, getDefaultFileColorConfig, getFileColorMapping, } from './utils/fileColorHighlightLayers';
 // File color override utilities for development
-var fileColorOverrides_1 = require("./utils/fileColorOverrides");
-Object.defineProperty(exports, "devFileColorOverrides", { enumerable: true, get: function () { return fileColorOverrides_1.devFileColorOverrides; } });
-Object.defineProperty(exports, "mergeFileColorConfig", { enumerable: true, get: function () { return fileColorOverrides_1.mergeFileColorConfig; } });
+export { devFileColorOverrides, mergeFileColorConfig } from './utils/fileColorOverrides';
 // File type icon utilities
-var fileTypeIcons_1 = require("./utils/fileTypeIcons");
-Object.defineProperty(exports, "extractIconConfig", { enumerable: true, get: function () { return fileTypeIcons_1.extractIconConfig; } });
-Object.defineProperty(exports, "getFileTypeIcon", { enumerable: true, get: function () { return fileTypeIcons_1.getFileTypeIcon; } });
-Object.defineProperty(exports, "drawFileTypeIcon", { enumerable: true, get: function () { return fileTypeIcons_1.drawFileTypeIcon; } });
+export { extractIconConfig, getFileTypeIcon, drawFileTypeIcon } from './utils/fileTypeIcons';
 // Re-export MultiVersionCityBuilder which was requested
-var file_city_builder_1 = require("@principal-ai/file-city-builder");
-Object.defineProperty(exports, "MultiVersionCityBuilder", { enumerable: true, get: function () { return file_city_builder_1.MultiVersionCityBuilder; } });
+export { MultiVersionCityBuilder } from '@principal-ai/file-city-builder';
 // Export the useCodeCityData hook
-var useCodeCityData_1 = require("./hooks/useCodeCityData");
-Object.defineProperty(exports, "useCodeCityData", { enumerable: true, get: function () { return useCodeCityData_1.useCodeCityData; } });
+export { useCodeCityData } from './hooks/useCodeCityData';
 // Export React Flow based city view component
-var CityViewWithReactFlow_1 = require("./components/CityViewWithReactFlow");
-Object.defineProperty(exports, "CityViewWithReactFlow", { enumerable: true, get: function () { return CityViewWithReactFlow_1.CityViewWithReactFlow; } });
+export { CityViewWithReactFlow, } from './components/CityViewWithReactFlow';
 // Re-export theme utilities for consumers
-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; } });
+export { ThemeProvider, useTheme } from '@principal-ade/industry-theme';
 // 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; } });
+export { FileCity3D, resetCamera } from './components/FileCity3D';

package/dist/render/client/drawLayeredBuildings.js

@@ -1,16 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayerIndex = void 0;
-exports.drawGrid = drawGrid;
-exports.drawLayeredDistricts = drawLayeredDistricts;
-exports.drawLayeredBuildings = drawLayeredBuildings;
-const lucideIconConverter_1 = require("../../utils/lucideIconConverter");
-const fileTypeIcons_1 = require("../../utils/fileTypeIcons");
+import { getLucideIconImage } from '../../utils/lucideIconConverter';
+import { getFileTypeIcon, drawFileTypeIcon } from '../../utils/fileTypeIcons';
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
  * This dramatically improves performance with large numbers of layer items.
  */
-class LayerIndex {
+export class LayerIndex {
     constructor(layers) {
         // Map from exact path to layer items (for file items)
         this.exactIndex = new Map();
@@ -86,7 +80,6 @@ class LayerIndex {
         return sorted;
     }
 }
-exports.LayerIndex = LayerIndex;
 // Helper function to draw rounded rectangles
 function drawRoundedRect(ctx, x, y, width, height, radius, fill, stroke) {
     ctx.beginPath();
@@ -106,7 +99,7 @@ function drawRoundedRect(ctx, x, y, width, height, radius, fill, stroke) {
         ctx.stroke();
 }
 // Draw grid helper (copied from original)
-function drawGrid(ctx, width, height, gridSize) {
+export function drawGrid(ctx, width, height, gridSize) {
     ctx.save();
     ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
     ctx.lineWidth = 1;
@@ -284,7 +277,7 @@ function renderCoverStrategy(ctx, bounds, layer, item, _scale) {
     let img = null;
     // Check for lucideIcon first (new way)
     if (coverOptions.lucideIcon) {
-        img = (0, lucideIconConverter_1.getLucideIconImage)(coverOptions.lucideIcon, '#ffffff', coverOptions.iconSize || 24);
+        img = getLucideIconImage(coverOptions.lucideIcon, '#ffffff', coverOptions.iconSize || 24);
     }
     // Fallback to direct image URL (old way)
     else if (coverOptions.image) {
@@ -396,7 +389,7 @@ function applyLayerRendering(ctx, bounds, layer, item, scale, borderRadius = 0)
     }
 }
 // Draw districts with layer support
-function drawLayeredDistricts(ctx, districts, worldToCanvas, scale, // This includes the zoom scale for text proportionality
+export function drawLayeredDistricts(ctx, districts, worldToCanvas, scale, // This includes the zoom scale for text proportionality
 layers, hoveredDistrict, fullSize, defaultDirectoryColor, layoutConfig, abstractedPaths, // Paths of directories that are abstracted (have covers)
 showDirectoryLabels = true, borderRadius = 0, // Border radius for districts (default: sharp corners)
 layerIndex) {
@@ -584,7 +577,7 @@ layerIndex) {
     });
 }
 // Draw buildings with layer support
-function drawLayeredBuildings(ctx, buildings, worldToCanvas, scale, layers, hoveredBuilding, defaultBuildingColor, showFileNames, hoverBorderColor, disableOpacityDimming, showFileTypeIcons, borderRadius = 0, // Border radius for buildings (default: 0 - sharp corners)
+export function drawLayeredBuildings(ctx, buildings, worldToCanvas, scale, layers, hoveredBuilding, defaultBuildingColor, showFileNames, hoverBorderColor, disableOpacityDimming, showFileTypeIcons, borderRadius = 0, // Border radius for buildings (default: 0 - sharp corners)
 layerIndex, // Optional pre-built index for performance
 iconMap) {
     // Build index once for all buildings (O(n) instead of O(n²))
@@ -657,7 +650,7 @@ iconMap) {
         let iconBottomY = pos.y;
         let hasIcon = false;
         if (showFileTypeIcons && iconMap) {
-            const iconConfig = (0, fileTypeIcons_1.getFileTypeIcon)(building.path, iconMap);
+            const iconConfig = getFileTypeIcon(building.path, iconMap);
             if (iconConfig) {
                 hasIcon = true;
                 // For wide buildings (wider than tall), shift icon up to make room for text below
@@ -666,7 +659,7 @@ iconMap) {
                 const isWide = width > height;
                 const iconYOffset = (willShowText && isWide) ? -height * 0.15 : 0;
                 const iconY = pos.y + iconYOffset;
-                (0, fileTypeIcons_1.drawFileTypeIcon)(ctx, iconConfig, pos.x, iconY, width, height);
+                drawFileTypeIcon(ctx, iconConfig, pos.x, iconY, width, height);
                 // Calculate where the icon ends vertically
                 const minDimension = Math.min(width, height);
                 if (iconConfig.type === 'emoji') {

package/dist/stories/sample-data.js

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSampleCityData = createSampleCityData;
-exports.createSmallSampleCityData = createSmallSampleCityData;
-const file_city_builder_1 = require("@principal-ai/file-city-builder");
+import { CodeCityBuilderWithGrid, buildFileSystemTreeFromFileInfoList, } from '@principal-ai/file-city-builder';
 // Sample file structure representing a typical project
 const sampleFileStructure = [
     // Source files
@@ -66,13 +62,13 @@ function createFileInfoList(files) {
 // Cache the city data to avoid rebuilding on every render
 let cachedCityData = null;
 // Helper function to create sample city data for stories using the real treemap builder
-function createSampleCityData() {
+export function createSampleCityData() {
     if (cachedCityData) {
         return cachedCityData;
     }
     const fileInfos = createFileInfoList(sampleFileStructure);
-    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, 'sample-project');
-    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos, 'sample-project');
+    const builder = new CodeCityBuilderWithGrid();
     cachedCityData = builder.buildCityFromFileSystem(fileTree, '', {
         paddingTop: 2,
         paddingBottom: 2,
@@ -92,13 +88,13 @@ const smallFileStructure = [
 ];
 let cachedSmallCityData = null;
 // Create a smaller sample for performance testing
-function createSmallSampleCityData() {
+export function createSmallSampleCityData() {
     if (cachedSmallCityData) {
         return cachedSmallCityData;
     }
     const fileInfos = createFileInfoList(smallFileStructure);
-    const fileTree = (0, file_city_builder_1.buildFileSystemTreeFromFileInfoList)(fileInfos, 'small-sample');
-    const builder = new file_city_builder_1.CodeCityBuilderWithGrid();
+    const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos, 'small-sample');
+    const builder = new CodeCityBuilderWithGrid();
     cachedSmallCityData = builder.buildCityFromFileSystem(fileTree, '', {
         paddingTop: 2,
         paddingBottom: 2,