@principal-ai/file-city-react 0.4.5 → 0.4.6

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

@@ -1 +1 @@
-{"version":3,"file":"CityViewWithReactFlow.d.ts","sourceRoot":"","sources":["../../src/components/CityViewWithReactFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAepD,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAIrE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+UD,eAAO,MAAM,qBAAqB,sCAA6B,CAAC"}
+{"version":3,"file":"CityViewWithReactFlow.d.ts","sourceRoot":"","sources":["../../src/components/CityViewWithReactFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAepD,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAIrE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAiVD,eAAO,MAAM,qBAAqB,sCAA6B,CAAC"}

package/dist/components/CityViewWithReactFlow.js

@@ -59,6 +59,7 @@ const CellNode = ({ data, selected }) => {
         }
     }, [fileTree, cityBuilder]);
     return (react_1.default.createElement("div", { className: "cell-node", style: {
+            boxSizing: 'border-box',
             background: selected
                 ? `linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.accent} 100%)`
                 : `linear-gradient(135deg, ${theme.colors.backgroundSecondary} 0%, ${theme.colors.background} 100%)`,
@@ -124,7 +125,7 @@ const CellNode = ({ data, selected }) => {
                             opacity: 1,
                         })),
                     },
-                ], showGrid: false, showDirectoryLabels: false, canvasBackgroundColor: theme.colors.background, defaultBuildingColor: theme.colors.muted, defaultDirectoryColor: theme.colors.backgroundSecondary, className: "w-full h-full", 
+                ], showGrid: false, showDirectoryLabels: true, showFileNames: true, canvasBackgroundColor: theme.colors.background, defaultBuildingColor: theme.colors.muted, defaultDirectoryColor: theme.colors.backgroundSecondary, className: "w-full h-full", 
                 // Disable interactions to prevent conflicts with React Flow
                 onFileClick: undefined }))) : (react_1.default.createElement("div", { style: {
                 display: 'flex',

package/dist/render/client/drawLayeredBuildings.d.ts

@@ -13,6 +13,7 @@ export interface LayerItem {
         borderRadius?: number;
         icon?: string;
         iconSize?: number;
+        lucideIcon?: string;
     };
     customRender?: (ctx: CanvasRenderingContext2D, bounds: {
         x: number;

package/dist/render/client/drawLayeredBuildings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawLayeredBuildings.d.ts","sourceRoot":"","sources":["../../../src/render/client/drawLayeredBuildings.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"drawLayeredBuildings.d.ts","sourceRoot":"","sources":["../../../src/render/client/drawLayeredBuildings.ts"],"names":[],"mappings":"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"}

package/dist/render/client/drawLayeredBuildings.js

@@ -4,23 +4,7 @@ exports.LayerIndex = void 0;
 exports.drawGrid = drawGrid;
 exports.drawLayeredDistricts = drawLayeredDistricts;
 exports.drawLayeredBuildings = drawLayeredBuildings;
-// Helper to check if a path matches a layer item
-function pathMatchesItem(path, item, checkType = 'children') {
-    if (item.type === 'file') {
-        return path === item.path;
-    }
-    else {
-        // Directory match
-        if (checkType === 'exact') {
-            // Only match the directory itself, not its children
-            return path === item.path;
-        }
-        else {
-            // Match directory and all its children (original behavior)
-            return path === item.path || path.startsWith(item.path + '/');
-        }
-    }
-}
+const lucideIconConverter_1 = require("../../utils/lucideIconConverter");
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
  * This dramatically improves performance with large numbers of layer items.
@@ -120,21 +104,6 @@ function drawRoundedRect(ctx, x, y, width, height, radius, fill, stroke) {
     if (stroke)
         ctx.stroke();
 }
-// Get all layer items that apply to a given path
-function getLayerItemsForPath(path, layers, checkType = 'children') {
-    const matches = [];
-    for (const layer of layers) {
-        if (!layer.enabled)
-            continue;
-        for (const item of layer.items) {
-            if (pathMatchesItem(path, item, checkType)) {
-                matches.push({ layer, item });
-            }
-        }
-    }
-    // Sort by priority (highest first)
-    return matches.sort((a, b) => b.layer.priority - a.layer.priority);
-}
 // Draw grid helper (copied from original)
 function drawGrid(ctx, width, height, gridSize) {
     ctx.save();
@@ -310,20 +279,27 @@ function renderCoverStrategy(ctx, bounds, layer, item, _scale) {
     ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
     // Reset alpha for text/icon
     ctx.globalAlpha = 1;
-    // Image/SVG (takes precedence over text icon)
-    if (coverOptions.image) {
-        const img = new Image();
-        img.onload = () => {
-            const imageSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.4;
-            const imageX = bounds.x + bounds.width / 2 - imageSize / 2;
-            const imageY = coverOptions.text
-                ? bounds.y + bounds.height * 0.25
-                : bounds.y + bounds.height / 2 - imageSize / 2;
-            ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
-        };
+    // Get image for rendering
+    let img = null;
+    // Check for lucideIcon first (new way)
+    if (coverOptions.lucideIcon) {
+        img = (0, lucideIconConverter_1.getLucideIconImage)(coverOptions.lucideIcon, '#ffffff', coverOptions.iconSize || 24);
+    }
+    // Fallback to direct image URL (old way)
+    else if (coverOptions.image) {
+        img = new Image();
         img.src = coverOptions.image;
     }
-    // Text Icon (fallback if no image)
+    // Draw the image if we have one
+    if (img) {
+        const imageSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.4;
+        const imageX = bounds.x + bounds.width / 2 - imageSize / 2;
+        const imageY = coverOptions.text
+            ? bounds.y + bounds.height * 0.25
+            : bounds.y + bounds.height / 2 - imageSize / 2;
+        ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
+    }
+    // Text Icon (fallback if no image or lucideIcon)
     else if (coverOptions.icon) {
         const iconSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.3;
         ctx.font = `${iconSize}px Arial`;
@@ -703,8 +679,10 @@ layerIndex) {
                 ctx.strokeRect(bounds.x - 1, bounds.y - 1, bounds.width + 2, bounds.height + 2);
             }
         }
-        // Draw React symbol for JSX/TSX files (only if enabled)
-        if (showFileTypeIcons && isReactFile(building.fileExtension)) {
+        // Draw React symbol for JSX/TSX files (only if enabled and not a test file)
+        // Test files have their own Lucide icons, so skip React symbol for them
+        const isTestFile = building.path.includes('.test.') || building.path.includes('.spec.');
+        if (showFileTypeIcons && isReactFile(building.fileExtension) && !isTestFile) {
             // Position React symbol centered in the building
             // Size is 75% of the smaller dimension
             const reactSize = Math.min(width, height) * 0.75;

package/dist/stories/sample-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sample-data.d.ts","sourceRoot":"","sources":["../../src/stories/sample-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AAqFzC,wBAAgB,oBAAoB,IAAI,QAAQ,CAmB/C;AAaD,wBAAgB,yBAAyB,IAAI,QAAQ,CAmBpD"}
+{"version":3,"file":"sample-data.d.ts","sourceRoot":"","sources":["../../src/stories/sample-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AA2EzC,wBAAgB,oBAAoB,IAAI,QAAQ,CAmB/C;AAaD,wBAAgB,yBAAyB,IAAI,QAAQ,CAmBpD"}

package/dist/stories/stress-test-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stress-test-data.d.ts","sourceRoot":"","sources":["../../src/stories/stress-test-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AA2CzC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoElE;AAoBD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,GAAE,MAAa,EAAE,QAAQ,GAAE,OAAc,GAAG,QAAQ,CAwBrG;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}
+{"version":3,"file":"stress-test-data.d.ts","sourceRoot":"","sources":["../../src/stories/stress-test-data.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAGT,MAAM,iCAAiC,CAAC;AA+BzC;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoElE;AAoBD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,GAAE,MAAa,EAAE,QAAQ,GAAE,OAAc,GAAG,QAAQ,CA2BrG;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/stories/stress-test-data.js

@@ -6,8 +6,6 @@ exports.clearStressTestCache = clearStressTestCache;
 const file_city_builder_1 = require("@principal-ai/file-city-builder");
 // Common file extensions for realistic distribution
 const FILE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.css', '.json', '.md', '.test.ts', '.spec.tsx'];
-// Top-level source directories
-const TOP_LEVEL_DIRS = ['src', 'lib', 'packages', 'modules'];
 // Second-level directories (domain areas)
 const DOMAIN_DIRS = ['components', 'utils', 'services', 'hooks', 'types', 'helpers', 'core', 'api', 'features', 'pages'];
 // Third-level directories (categories within domains)
@@ -120,7 +118,10 @@ const stressTestCache = new Map();
  */
 function createStressTestCityData(fileCount = 8000, useCache = true) {
     if (useCache && stressTestCache.has(fileCount)) {
-        return stressTestCache.get(fileCount);
+        const cached = stressTestCache.get(fileCount);
+        if (cached) {
+            return cached;
+        }
     }
     const filePaths = generateLargeFilePaths(fileCount);
     const fileInfos = createFileInfoList(filePaths);

package/dist/utils/fileColorHighlightLayers.d.ts

@@ -14,6 +14,7 @@ export interface ColorLayerConfig {
         borderRadius?: number;
         icon?: string;
         iconSize?: number;
+        lucideIcon?: string;
     };
     customRender?: (ctx: CanvasRenderingContext2D, bounds: {
         x: number;

package/dist/utils/fileColorHighlightLayers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileColorHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/utils/fileColorHighlightLayers.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EAEd,mBAAmB,EACpB,MAAM,uCAAuC,CAAC;AAG/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,mBAAmB,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAC/D,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;CACX;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,MAAM,CAAC,EAAE,qBAAqB,GAC7B,cAAc,EAAE,CAiRlB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,qBAAqB,CAEjE;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAM1F"}
+{"version":3,"file":"fileColorHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/utils/fileColorHighlightLayers.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EAEd,mBAAmB,EACpB,MAAM,uCAAuC,CAAC;AAG/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,mBAAmB,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,CAAC,EAAE,CACb,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAC/D,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;CACX;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,MAAM,CAAC,EAAE,qBAAqB,GAC7B,cAAc,EAAE,CAqSlB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,qBAAqB,CAEjE;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAM1F"}

package/dist/utils/fileColorHighlightLayers.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFileColorHighlightLayers = createFileColorHighlightLayers;
 exports.getDefaultFileColorConfig = getDefaultFileColorConfig;
 exports.getFileColorMapping = getFileColorMapping;
-const files_json_1 = __importDefault(require("../config/files.json"));
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
 /**
  * Creates highlight layers for files based on file extension configurations.
  *
@@ -41,7 +38,7 @@ function createFileColorHighlightLayers(files, config) {
         return [];
     }
     // Use provided config or fall back to default from files.json
-    const colorConfig = config || files_json_1.default;
+    const colorConfig = config || file_city_builder_1.defaultFileColorConfig;
     const { suffixConfigs, defaultConfig: defaultFileConfig, includeUnmatched = true } = colorConfig;
     // Validation
     if (!suffixConfigs || typeof suffixConfigs !== 'object') {
@@ -56,7 +53,6 @@ function createFileColorHighlightLayers(files, config) {
         const filePath = file.path;
         const lastSlash = filePath.lastIndexOf('/');
         const fileName = lastSlash === -1 ? filePath : filePath.substring(lastSlash + 1);
-        const lastDot = fileName.lastIndexOf('.');
         // Check for exact filename match first (e.g., LICENSE, Makefile)
         if (suffixConfigs[fileName]) {
             if (!filesBySuffix.has(fileName)) {
@@ -68,6 +64,7 @@ function createFileColorHighlightLayers(files, config) {
             }
             return;
         }
+        const lastDot = fileName.lastIndexOf('.');
         if (lastDot === -1 || lastDot === fileName.length - 1) {
             // No extension or ends with dot
             if (includeUnmatched) {
@@ -75,7 +72,24 @@ function createFileColorHighlightLayers(files, config) {
             }
             return;
         }
-        const extension = fileName.substring(lastDot).toLowerCase();
+        // Check for compound extensions first (e.g., .test.ts, .spec.tsx, .d.ts)
+        // Look for patterns like .test.ts, .spec.js, etc.
+        let extension = null;
+        const lowerFileName = fileName.toLowerCase();
+        // Sort suffixes by length (longest first) to match compound extensions before simple ones
+        // e.g., .test.ts should be checked before .ts
+        const sortedSuffixes = Object.keys(suffixConfigs).sort((a, b) => b.length - a.length);
+        // Check if any suffix config matches as a suffix of the filename
+        for (const suffix of sortedSuffixes) {
+            if (lowerFileName.endsWith(suffix)) {
+                extension = suffix;
+                break;
+            }
+        }
+        // Fallback to simple extension if no compound match found
+        if (!extension) {
+            extension = fileName.substring(lastDot).toLowerCase();
+        }
         if (suffixConfigs[extension]) {
             if (!filesBySuffix.has(extension)) {
                 filesBySuffix.set(extension, []);
@@ -265,7 +279,7 @@ function createFileColorHighlightLayers(files, config) {
  * This returns the configuration loaded from files.json.
  */
 function getDefaultFileColorConfig() {
-    return files_json_1.default;
+    return file_city_builder_1.defaultFileColorConfig;
 }
 /**
  * Get a simple color mapping from the configuration.
@@ -275,7 +289,7 @@ function getDefaultFileColorConfig() {
  * @returns Record mapping file extensions to hex color strings
  */
 function getFileColorMapping(config) {
-    const colorConfig = config || files_json_1.default;
+    const colorConfig = config || file_city_builder_1.defaultFileColorConfig;
     return Object.entries(colorConfig.suffixConfigs).reduce((acc, [extension, suffixConfig]) => {
         acc[extension] = suffixConfig.primary.color;
         return acc;

package/dist/utils/lucideIconConverter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Convert a Lucide icon name to an SVG data URL that can be used in Canvas
+ * @param iconName - The name of the Lucide icon (e.g., "TestTube", "FileCode")
+ * @param color - The color to apply to the icon (default: "white")
+ * @param size - The size of the icon (default: 24)
+ * @returns SVG data URL string or null if icon not found
+ */
+export declare function lucideIconToDataUrl(iconName: string, color?: string, size?: number): string | null;
+/**
+ * Preload commonly used icons to improve performance
+ * Call this on app initialization
+ */
+export declare function preloadCommonIcons(): void;
+/**
+ * Get a cached Image object for an icon (prevents flashing on redraws)
+ * @param iconName - The name of the Lucide icon
+ * @param color - The color to apply to the icon (default: "white")
+ * @param size - The size of the icon (default: 24)
+ * @returns HTMLImageElement or null if icon not found
+ */
+export declare function getLucideIconImage(iconName: string, color?: string, size?: number): HTMLImageElement | null;
+/**
+ * Clear the SVG cache (useful for memory management)
+ */
+export declare function clearIconCache(): void;
+/**
+ * Get available Lucide icon names
+ * @returns Array of all available icon names
+ */
+export declare function getAvailableIcons(): string[];
+//# sourceMappingURL=lucideIconConverter.d.ts.map

package/dist/utils/lucideIconConverter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lucideIconConverter.d.ts","sourceRoot":"","sources":["../../src/utils/lucideIconConverter.tsx"],"names":[],"mappings":"AAiBA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,MAAgB,EACvB,IAAI,GAAE,MAAW,GAChB,MAAM,GAAG,IAAI,CAoCf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,SAejC;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,MAAgB,EACvB,IAAI,GAAE,MAAW,GAChB,gBAAgB,GAAG,IAAI,CAuBzB;AAED;;GAEG;AACH,wBAAgB,cAAc,SAG7B;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,EAAE,CAE5C"}

package/dist/utils/lucideIconConverter.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lucideIconToDataUrl = lucideIconToDataUrl;
+exports.preloadCommonIcons = preloadCommonIcons;
+exports.getLucideIconImage = getLucideIconImage;
+exports.clearIconCache = clearIconCache;
+exports.getAvailableIcons = getAvailableIcons;
+// Cache for converted SVG data URLs
+const svgCache = new Map();
+// Cache for loaded Image objects (to prevent flashing)
+const imageCache = new Map();
+// SVG path data for Lucide icons
+// Source: https://github.com/lucide-icons/lucide
+const ICON_PATHS = {
+    TestTube: '<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V2"/><path d="M8.5 2h7"/><path d="M14.5 16h-5"/>',
+    FlaskConical: '<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>',
+    FileCode: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/>',
+    FileText: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>',
+    File: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
+    Folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+};
+/**
+ * Convert a Lucide icon name to an SVG data URL that can be used in Canvas
+ * @param iconName - The name of the Lucide icon (e.g., "TestTube", "FileCode")
+ * @param color - The color to apply to the icon (default: "white")
+ * @param size - The size of the icon (default: 24)
+ * @returns SVG data URL string or null if icon not found
+ */
+function lucideIconToDataUrl(iconName, color = 'white', size = 24) {
+    // Create cache key
+    const cacheKey = `${iconName}-${color}-${size}`;
+    // Check cache first
+    if (svgCache.has(cacheKey)) {
+        const cached = svgCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+    }
+    // Get the icon path data
+    const pathData = ICON_PATHS[iconName];
+    if (!pathData) {
+        console.warn(`[lucideIconConverter] Icon "${iconName}" not found. Available icons:`, Object.keys(ICON_PATHS));
+        return null;
+    }
+    try {
+        // Create SVG string
+        const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${pathData}</svg>`;
+        // Convert to data URL
+        const encodedSvg = encodeURIComponent(svgString);
+        const dataUrl = `data:image/svg+xml,${encodedSvg}`;
+        // Cache the result
+        svgCache.set(cacheKey, dataUrl);
+        return dataUrl;
+    }
+    catch (error) {
+        console.error(`[lucideIconConverter] Error converting icon "${iconName}":`, error);
+        return null;
+    }
+}
+/**
+ * Preload commonly used icons to improve performance
+ * Call this on app initialization
+ */
+function preloadCommonIcons() {
+    const commonIcons = [
+        'TestTube',
+        'FileCode',
+        'FileText',
+        'File',
+        'Folder',
+        'Image',
+        'Database',
+        'Settings',
+    ];
+    commonIcons.forEach(iconName => {
+        lucideIconToDataUrl(iconName);
+    });
+}
+/**
+ * Get a cached Image object for an icon (prevents flashing on redraws)
+ * @param iconName - The name of the Lucide icon
+ * @param color - The color to apply to the icon (default: "white")
+ * @param size - The size of the icon (default: 24)
+ * @returns HTMLImageElement or null if icon not found
+ */
+function getLucideIconImage(iconName, color = 'white', size = 24) {
+    const cacheKey = `${iconName}-${color}-${size}`;
+    // Return cached image if available
+    if (imageCache.has(cacheKey)) {
+        const cached = imageCache.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+    }
+    // Get the data URL
+    const dataUrl = lucideIconToDataUrl(iconName, color, size);
+    if (!dataUrl) {
+        return null;
+    }
+    // Create and cache the image
+    const img = new Image();
+    img.src = dataUrl;
+    imageCache.set(cacheKey, img);
+    return img;
+}
+/**
+ * Clear the SVG cache (useful for memory management)
+ */
+function clearIconCache() {
+    svgCache.clear();
+    imageCache.clear();
+}
+/**
+ * Get available Lucide icon names
+ * @returns Array of all available icon names
+ */
+function getAvailableIcons() {
+    return Object.keys(ICON_PATHS);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,8 @@
   "dependencies": {
     "@principal-ade/industry-theme": "^0.1.3",
     "@principal-ai/alexandria-core-library": "^0.1.36",
-    "@principal-ai/file-city-builder": "^0.3.0",
+    "@principal-ai/file-city-builder": "^0.3.2",
+    "lucide-react": "^0.563.0",
     "reactflow": "^11.11.4"
   },
   "peerDependencies": {
@@ -25,6 +26,7 @@
     "@storybook/addon-links": "^10.1.2",
     "@storybook/react-vite": "^10.1.2",
     "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "storybook": "^10.1.2",

package/src/components/CityViewWithReactFlow.tsx

@@ -61,6 +61,7 @@ const CellNode: React.FC<NodeProps<CellNodeData>> = ({ data, selected }) => {
     <div
       className="cell-node"
       style={{
+        boxSizing: 'border-box',
         background: selected
           ? `linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.accent} 100%)`
           : `linear-gradient(135deg, ${theme.colors.backgroundSecondary} 0%, ${theme.colors.background} 100%)`,
@@ -147,7 +148,8 @@ const CellNode: React.FC<NodeProps<CellNodeData>> = ({ data, selected }) => {
                 },
               ]}
               showGrid={false}
-              showDirectoryLabels={false}
+              showDirectoryLabels={true}
+              showFileNames={true}
               canvasBackgroundColor={theme.colors.background}
               defaultBuildingColor={theme.colors.muted}
               defaultDirectoryColor={theme.colors.backgroundSecondary}

package/src/render/client/drawLayeredBuildings.ts

@@ -1,4 +1,5 @@
 import { CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
+import { getLucideIconImage } from '../../utils/lucideIconConverter';
 
 // Layer types and interfaces
 export type LayerRenderStrategy =
@@ -24,6 +25,7 @@ export interface LayerItem {
     borderRadius?: number;
     icon?: string;
     iconSize?: number;
+    lucideIcon?: string;
   };
   // Custom render function
   customRender?: (
@@ -46,26 +48,6 @@ export interface HighlightLayer {
   dynamic?: boolean; // If true, this layer changes frequently (e.g., hover effects)
 }
 
-// Helper to check if a path matches a layer item
-function pathMatchesItem(
-  path: string,
-  item: LayerItem,
-  checkType: 'exact' | 'children' = 'children',
-): boolean {
-  if (item.type === 'file') {
-    return path === item.path;
-  } else {
-    // Directory match
-    if (checkType === 'exact') {
-      // Only match the directory itself, not its children
-      return path === item.path;
-    } else {
-      // Match directory and all its children (original behavior)
-      return path === item.path || path.startsWith(item.path + '/');
-    }
-  }
-}
-
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
  * This dramatically improves performance with large numbers of layer items.
@@ -184,28 +166,6 @@ function drawRoundedRect(
   if (stroke) ctx.stroke();
 }
 
-// Get all layer items that apply to a given path
-function getLayerItemsForPath(
-  path: string,
-  layers: HighlightLayer[],
-  checkType: 'exact' | 'children' = 'children',
-): Array<{ layer: HighlightLayer; item: LayerItem }> {
-  const matches: Array<{ layer: HighlightLayer; item: LayerItem }> = [];
-
-  for (const layer of layers) {
-    if (!layer.enabled) continue;
-
-    for (const item of layer.items) {
-      if (pathMatchesItem(path, item, checkType)) {
-        matches.push({ layer, item });
-      }
-    }
-  }
-
-  // Sort by priority (highest first)
-  return matches.sort((a, b) => b.layer.priority - a.layer.priority);
-}
-
 // Draw grid helper (copied from original)
 export function drawGrid(
   ctx: CanvasRenderingContext2D,
@@ -439,21 +399,30 @@ function renderCoverStrategy(
   // Reset alpha for text/icon
   ctx.globalAlpha = 1;
 
-  // Image/SVG (takes precedence over text icon)
-  if (coverOptions.image) {
-    const img = new Image();
-    img.onload = () => {
-      const imageSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.4;
-      const imageX = bounds.x + bounds.width / 2 - imageSize / 2;
-      const imageY = coverOptions.text
-        ? bounds.y + bounds.height * 0.25
-        : bounds.y + bounds.height / 2 - imageSize / 2;
-
-      ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
-    };
+  // Get image for rendering
+  let img: HTMLImageElement | null = null;
+
+  // Check for lucideIcon first (new way)
+  if (coverOptions.lucideIcon) {
+    img = getLucideIconImage(coverOptions.lucideIcon, '#ffffff', coverOptions.iconSize || 24);
+  }
+  // Fallback to direct image URL (old way)
+  else if (coverOptions.image) {
+    img = new Image();
     img.src = coverOptions.image;
   }
-  // Text Icon (fallback if no image)
+
+  // Draw the image if we have one
+  if (img) {
+    const imageSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.4;
+    const imageX = bounds.x + bounds.width / 2 - imageSize / 2;
+    const imageY = coverOptions.text
+      ? bounds.y + bounds.height * 0.25
+      : bounds.y + bounds.height / 2 - imageSize / 2;
+
+    ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
+  }
+  // Text Icon (fallback if no image or lucideIcon)
   else if (coverOptions.icon) {
     const iconSize = coverOptions.iconSize || Math.min(bounds.width, bounds.height) * 0.3;
     ctx.font = `${iconSize}px Arial`;
@@ -998,8 +967,10 @@ export function drawLayeredBuildings(
       }
     }
 
-    // Draw React symbol for JSX/TSX files (only if enabled)
-    if (showFileTypeIcons && isReactFile(building.fileExtension)) {
+    // Draw React symbol for JSX/TSX files (only if enabled and not a test file)
+    // Test files have their own Lucide icons, so skip React symbol for them
+    const isTestFile = building.path.includes('.test.') || building.path.includes('.spec.');
+    if (showFileTypeIcons && isReactFile(building.fileExtension) && !isTestFile) {
       // Position React symbol centered in the building
       // Size is 75% of the smaller dimension
       const reactSize = Math.min(width, height) * 0.75;