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

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

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

package/dist/components/ArchitectureMapHighlightLayers.js

@@ -38,6 +38,8 @@ const react_1 = __importStar(require("react"));
 const industry_theme_1 = require("@principal-ade/industry-theme");
 const cityDataUtils_1 = require("../builder/cityDataUtils");
 const drawLayeredBuildings_1 = require("../render/client/drawLayeredBuildings");
+const fileColorHighlightLayers_1 = require("../utils/fileColorHighlightLayers");
+const fileTypeIcons_1 = require("../utils/fileTypeIcons");
 const DEFAULT_DISPLAY_OPTIONS = {
     showGrid: false,
     showConnections: true,
@@ -187,6 +189,11 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
     const resolvedDefaultBuildingColor = defaultBuildingColor ?? theme.colors.muted;
     const canvasRef = (0, react_1.useRef)(null);
     const containerRef = (0, react_1.useRef)(null);
+    // Extract icon configuration from file color config
+    const iconMap = (0, react_1.useMemo)(() => {
+        const colorConfig = (0, fileColorHighlightLayers_1.getDefaultFileColorConfig)();
+        return (0, fileTypeIcons_1.extractIconConfig)(colorConfig);
+    }, []);
     const [interactionState, setInteractionState] = (0, react_1.useState)({
         hoveredDistrict: null,
         hoveredBuilding: null,
@@ -832,7 +839,8 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         (0, drawLayeredBuildings_1.drawLayeredDistricts)(ctx, visibleDistrictsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredDistrict, fullSize, resolvedDefaultDirectoryColor, filteredCityData.metadata.layoutConfig, abstractedPathsSet, // Pass abstracted paths to skip labels
         showDirectoryLabels, districtBorderRadius, layerIndex);
         // Draw buildings with layer support
-        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius, layerIndex);
+        (0, drawLayeredBuildings_1.drawLayeredBuildings)(ctx, visibleBuildingsMemo, worldToCanvas, scale * zoomState.scale, allLayers, interactionState.hoveredBuilding, resolvedDefaultBuildingColor, showFileNames, resolvedHoverBorderColor, disableOpacityDimming, showFileTypeIcons, buildingBorderRadius, layerIndex, // Pre-built index for O(1) lookups
+        iconMap);
         // Performance monitoring end available for debugging
         // Performance stats available but not logged to reduce console noise
         // Uncomment for debugging: render time, buildings/districts counts, layer counts
@@ -866,6 +874,7 @@ onHover, buildingBorderRadius = 0, districtBorderRadius = 0, }) {
         visibleBuildingsMemo,
         abstractedPathsSet,
         layerIndex,
+        iconMap,
     ]);
     // Optimized hit testing
     const performHitTest = (0, react_1.useCallback)((canvasX, canvasY) => {

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export { type LayerRenderStrategy, type LayerItem, type HighlightLayer, LayerInd
 export { type MapInteractionState, type MapDisplayOptions } from './types/react-types';
 export { filterCityDataForSelectiveRender, filterCityDataForSubdirectory, filterCityDataForMultipleDirectories, } from './builder/cityDataUtils';
 export { createFileColorHighlightLayers, getDefaultFileColorConfig, getFileColorMapping, } from './utils/fileColorHighlightLayers';
-export type { ColorLayerConfig, FileSuffixConfig, FileSuffixColorConfig, } from './utils/fileColorHighlightLayers';
+export type { ColorLayerConfig, FileSuffixConfig, FileSuffixColorConfig, FileTypeIconConfig, } from './utils/fileColorHighlightLayers';
+export { devFileColorOverrides, mergeFileColorConfig } from './utils/fileColorOverrides';
+export { extractIconConfig, getFileTypeIcon, drawFileTypeIcon } from './utils/fileTypeIcons';
 export type { CityData, CityBuilding, CityDistrict, SelectiveRenderOptions, Bounds2D, Position3D, } from '@principal-ai/file-city-builder';
 export { MultiVersionCityBuilder } from '@principal-ai/file-city-builder';
 export { useCodeCityData } from './hooks/useCodeCityData';

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,GACtB,MAAM,kCAAkC,CAAC;AAG1C,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"}

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.getFileColorMapping = exports.getDefaultFileColorConfig = exports.createFileColorHighlightLayers = exports.filterCityDataForMultipleDirectories = exports.filterCityDataForSubdirectory = exports.filterCityDataForSelectiveRender = exports.LayerIndex = exports.ArchitectureMapHighlightLayers = void 0;
+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; } });
@@ -17,6 +17,15 @@ 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; } });
+// 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; } });
+// 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; } });
 // 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; } });

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

@@ -1,4 +1,5 @@
 import { CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
+import { FileTypeIconConfig } from '../../utils/fileColorHighlightLayers';
 export type LayerRenderStrategy = 'border' | 'fill' | 'glow' | 'pattern' | 'cover' | 'icon' | 'custom';
 export interface LayerItem {
     path: string;
@@ -70,5 +71,6 @@ export declare function drawLayeredBuildings(ctx: CanvasRenderingContext2D, buil
     x: number;
     y: number;
 }, scale: number, layers: HighlightLayer[], hoveredBuilding?: CityBuilding | null, defaultBuildingColor?: string, showFileNames?: boolean, hoverBorderColor?: string, disableOpacityDimming?: boolean, showFileTypeIcons?: boolean, borderRadius?: number, // Border radius for buildings (default: 0 - sharp corners)
-layerIndex?: LayerIndex): void;
+layerIndex?: LayerIndex, // Optional pre-built index for performance
+iconMap?: Map<string, FileTypeIconConfig>): void;
 //# sourceMappingURL=drawLayeredBuildings.d.ts.map

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

@@ -5,6 +5,7 @@ exports.drawGrid = drawGrid;
 exports.drawLayeredDistricts = drawLayeredDistricts;
 exports.drawLayeredBuildings = drawLayeredBuildings;
 const lucideIconConverter_1 = require("../../utils/lucideIconConverter");
+const fileTypeIcons_1 = require("../../utils/fileTypeIcons");
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
  * This dramatically improves performance with large numbers of layer items.
@@ -582,38 +583,10 @@ layerIndex) {
         } // End of !hasCover check
     });
 }
-/**
- * Draw a React symbol (⚛) at the given position
- */
-function drawReactSymbol(ctx, x, y, size, color = '#00D8FF', glow = true) {
-    ctx.save();
-    // Position and setup
-    ctx.translate(x, y);
-    // Glow effect for React symbol
-    if (glow) {
-        ctx.shadowColor = color;
-        ctx.shadowBlur = 8;
-    }
-    // Draw the React symbol (⚛)
-    ctx.fillStyle = color;
-    ctx.font = `${size}px Arial`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('⚛', 0, 0);
-    ctx.restore();
-}
-/**
- * Check if a file is a React file (JSX/TSX)
- */
-function isReactFile(fileExtension) {
-    if (!fileExtension)
-        return false;
-    const ext = fileExtension.toLowerCase();
-    return ext === '.jsx' || ext === '.tsx';
-}
 // 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)
-layerIndex) {
+layerIndex, // Optional pre-built index for performance
+iconMap) {
     // Build index once for all buildings (O(n) instead of O(n²))
     const index = layerIndex || new LayerIndex(layers);
     buildings.forEach(building => {
@@ -679,16 +652,12 @@ 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 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;
-            const reactX = pos.x;
-            const reactY = pos.y;
-            drawReactSymbol(ctx, reactX, reactY, reactSize);
+        // Draw file type icon if enabled and icon map is provided
+        if (showFileTypeIcons && iconMap) {
+            const iconConfig = (0, fileTypeIcons_1.getFileTypeIcon)(building.path, iconMap);
+            if (iconConfig) {
+                (0, fileTypeIcons_1.drawFileTypeIcon)(ctx, iconConfig, pos.x, pos.y, width, height);
+            }
         }
         // Draw filename if enabled
         if (showFileNames && width > 100 && height > 30) {

package/dist/utils/fileColorHighlightLayers.d.ts

@@ -23,9 +23,18 @@ export interface ColorLayerConfig {
         height: number;
     }, scale: number) => void;
 }
+export interface FileTypeIconConfig {
+    type: 'emoji' | 'lucide';
+    name: string;
+    color?: string;
+    backgroundColor?: string;
+    glow?: boolean;
+    size?: number;
+}
 export interface FileSuffixConfig {
     primary: ColorLayerConfig;
     secondary?: ColorLayerConfig;
+    icon?: FileTypeIconConfig;
     displayName?: string;
     description?: string;
     category?: string;
@@ -73,7 +82,7 @@ export declare function createFileColorHighlightLayers(files: Array<{
 }> | null | undefined, config?: FileSuffixColorConfig): HighlightLayer[];
 /**
  * Get the default file color configuration.
- * This returns the configuration loaded from files.json.
+ * This returns the configuration loaded from files.json merged with local dev overrides.
  */
 export declare function getDefaultFileColorConfig(): FileSuffixColorConfig;
 /**

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;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"}
+{"version":3,"file":"fileColorHighlightLayers.d.ts","sourceRoot":"","sources":["../../src/utils/fileColorHighlightLayers.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EAEd,mBAAmB,EACpB,MAAM,uCAAuC,CAAC;AAI/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,kBAAkB;IACjC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,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,CAuSlB;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,CAQ1F"}

package/dist/utils/fileColorHighlightLayers.js

@@ -4,6 +4,7 @@ exports.createFileColorHighlightLayers = createFileColorHighlightLayers;
 exports.getDefaultFileColorConfig = getDefaultFileColorConfig;
 exports.getFileColorMapping = getFileColorMapping;
 const file_city_builder_1 = require("@principal-ai/file-city-builder");
+const fileColorOverrides_1 = require("./fileColorOverrides");
 /**
  * Creates highlight layers for files based on file extension configurations.
  *
@@ -37,8 +38,9 @@ function createFileColorHighlightLayers(files, config) {
     if (!files || files.length === 0) {
         return [];
     }
-    // Use provided config or fall back to default from files.json
-    const colorConfig = config || file_city_builder_1.defaultFileColorConfig;
+    // Use provided config or fall back to default merged with dev overrides
+    const colorConfig = config ||
+        (0, fileColorOverrides_1.mergeFileColorConfig)(file_city_builder_1.defaultFileColorConfig, fileColorOverrides_1.devFileColorOverrides);
     const { suffixConfigs, defaultConfig: defaultFileConfig, includeUnmatched = true } = colorConfig;
     // Validation
     if (!suffixConfigs || typeof suffixConfigs !== 'object') {
@@ -276,10 +278,10 @@ function createFileColorHighlightLayers(files, config) {
 }
 /**
  * Get the default file color configuration.
- * This returns the configuration loaded from files.json.
+ * This returns the configuration loaded from files.json merged with local dev overrides.
  */
 function getDefaultFileColorConfig() {
-    return file_city_builder_1.defaultFileColorConfig;
+    return (0, fileColorOverrides_1.mergeFileColorConfig)(file_city_builder_1.defaultFileColorConfig, fileColorOverrides_1.devFileColorOverrides);
 }
 /**
  * Get a simple color mapping from the configuration.
@@ -289,7 +291,8 @@ function getDefaultFileColorConfig() {
  * @returns Record mapping file extensions to hex color strings
  */
 function getFileColorMapping(config) {
-    const colorConfig = config || file_city_builder_1.defaultFileColorConfig;
+    const colorConfig = config ||
+        (0, fileColorOverrides_1.mergeFileColorConfig)(file_city_builder_1.defaultFileColorConfig, fileColorOverrides_1.devFileColorOverrides);
     return Object.entries(colorConfig.suffixConfigs).reduce((acc, [extension, suffixConfig]) => {
         acc[extension] = suffixConfig.primary.color;
         return acc;

package/dist/utils/fileColorOverrides.d.ts

@@ -0,0 +1,19 @@
+import { FileSuffixColorConfig } from './fileColorHighlightLayers';
+/**
+ * Development overrides for file color configuration.
+ * Add new file extensions here during development, then move them to
+ * @principal-ai/file-city-builder/src/config/files.json when ready to publish.
+ *
+ * These overrides will merge with (and take precedence over) the default config.
+ */
+export declare const devFileColorOverrides: Partial<FileSuffixColorConfig>;
+/**
+ * Merges the default file color configuration with local development overrides.
+ * Overrides take precedence over defaults.
+ *
+ * @param defaultConfig - The default configuration from the builder package
+ * @param overrides - Local development overrides
+ * @returns Merged configuration with overrides applied
+ */
+export declare function mergeFileColorConfig(defaultConfig: FileSuffixColorConfig, overrides: Partial<FileSuffixColorConfig>): FileSuffixColorConfig;
+//# sourceMappingURL=fileColorOverrides.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fileColorOverrides.d.ts","sourceRoot":"","sources":["../../src/utils/fileColorOverrides.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,qBAAqB,CAoBhE,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,qBAAqB,EACpC,SAAS,EAAE,OAAO,CAAC,qBAAqB,CAAC,GACxC,qBAAqB,CAWvB"}

package/dist/utils/fileColorOverrides.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devFileColorOverrides = void 0;
+exports.mergeFileColorConfig = mergeFileColorConfig;
+/**
+ * Development overrides for file color configuration.
+ * Add new file extensions here during development, then move them to
+ * @principal-ai/file-city-builder/src/config/files.json when ready to publish.
+ *
+ * These overrides will merge with (and take precedence over) the default config.
+ */
+exports.devFileColorOverrides = {
+    suffixConfigs: {
+        // Add your new file extensions here during development
+        "package.json": {
+            primary: {
+                color: "#CB3837",
+                renderStrategy: "fill",
+                opacity: 1.0,
+            },
+            icon: {
+                type: "lucide",
+                name: "Package",
+                color: "#ffffff",
+                size: 0.6,
+            },
+            displayName: "Package",
+            description: "npm package.json files",
+            category: "Configuration",
+        },
+    },
+};
+/**
+ * Merges the default file color configuration with local development overrides.
+ * Overrides take precedence over defaults.
+ *
+ * @param defaultConfig - The default configuration from the builder package
+ * @param overrides - Local development overrides
+ * @returns Merged configuration with overrides applied
+ */
+function mergeFileColorConfig(defaultConfig, overrides) {
+    return {
+        ...defaultConfig,
+        ...overrides,
+        suffixConfigs: {
+            ...defaultConfig.suffixConfigs,
+            ...(overrides.suffixConfigs || {}),
+        },
+        // Keep default config's defaultConfig unless explicitly overridden
+        ...(overrides.defaultConfig && { defaultConfig: overrides.defaultConfig }),
+    };
+}

package/dist/utils/fileTypeIcons.d.ts

@@ -0,0 +1,16 @@
+import { FileSuffixColorConfig, FileTypeIconConfig } from './fileColorHighlightLayers';
+/**
+ * Extract icon configurations from file color config
+ * This creates a map of file extensions to their icon configs
+ */
+export declare function extractIconConfig(colorConfig: FileSuffixColorConfig): Map<string, FileTypeIconConfig>;
+/**
+ * Get icon configuration for a file path
+ * Uses same matching logic as file color system
+ */
+export declare function getFileTypeIcon(filePath: string, iconMap: Map<string, FileTypeIconConfig>): FileTypeIconConfig | null;
+/**
+ * Draw a file type icon on the canvas
+ */
+export declare function drawFileTypeIcon(ctx: CanvasRenderingContext2D, icon: FileTypeIconConfig, x: number, y: number, buildingWidth: number, buildingHeight: number): void;
+//# sourceMappingURL=fileTypeIcons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fileTypeIcons.d.ts","sourceRoot":"","sources":["../../src/utils/fileTypeIcons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGvF;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,qBAAqB,GACjC,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAUjC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,GACvC,kBAAkB,GAAG,IAAI,CA0B3B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,kBAAkB,EACxB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,QAkDvB"}

package/dist/utils/fileTypeIcons.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractIconConfig = extractIconConfig;
+exports.getFileTypeIcon = getFileTypeIcon;
+exports.drawFileTypeIcon = drawFileTypeIcon;
+const lucideIconConverter_1 = require("./lucideIconConverter");
+/**
+ * Extract icon configurations from file color config
+ * This creates a map of file extensions to their icon configs
+ */
+function extractIconConfig(colorConfig) {
+    const iconMap = new Map();
+    Object.entries(colorConfig.suffixConfigs).forEach(([suffix, config]) => {
+        if (config.icon) {
+            iconMap.set(suffix, config.icon);
+        }
+    });
+    return iconMap;
+}
+/**
+ * Get icon configuration for a file path
+ * Uses same matching logic as file color system
+ */
+function getFileTypeIcon(filePath, iconMap) {
+    const lastSlash = filePath.lastIndexOf('/');
+    const fileName = lastSlash === -1 ? filePath : filePath.substring(lastSlash + 1);
+    // Check exact filename match first (e.g., "package.json")
+    if (iconMap.has(fileName)) {
+        return iconMap.get(fileName) || null;
+    }
+    const lastDot = fileName.lastIndexOf('.');
+    if (lastDot === -1 || lastDot === fileName.length - 1) {
+        // No extension or ends with dot
+        return null;
+    }
+    // Check compound extensions (longest first) - same as fileColorHighlightLayers
+    const sortedExtensions = Array.from(iconMap.keys()).sort((a, b) => b.length - a.length);
+    const lowerFileName = fileName.toLowerCase();
+    for (const ext of sortedExtensions) {
+        if (ext.startsWith('.') && lowerFileName.endsWith(ext)) {
+            return iconMap.get(ext) || null;
+        }
+    }
+    return null;
+}
+/**
+ * Draw a file type icon on the canvas
+ */
+function drawFileTypeIcon(ctx, icon, x, y, buildingWidth, buildingHeight) {
+    ctx.save();
+    if (icon.type === 'emoji') {
+        // Calculate size as percentage of building
+        const sizeScale = icon.size || 0.75;
+        const emojiSize = Math.min(buildingWidth, buildingHeight) * sizeScale;
+        // Glow effect
+        if (icon.glow) {
+            ctx.shadowColor = icon.color || '#00D8FF';
+            ctx.shadowBlur = 8;
+        }
+        ctx.fillStyle = icon.color || '#ffffff';
+        ctx.font = `${emojiSize}px Arial`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(icon.name, x, y);
+    }
+    else if (icon.type === 'lucide') {
+        // Calculate size as percentage of building (same as emoji)
+        const sizeScale = icon.size || 0.5;
+        const actualIconSize = Math.min(buildingWidth, buildingHeight) * sizeScale;
+        // Round to nearest 4px to reduce cache misses and prevent flickering
+        const roundedIconSize = Math.round(actualIconSize / 4) * 4;
+        const svgSize = Math.max(16, Math.min(roundedIconSize, 64)); // Clamp between 16-64px for SVG generation
+        // Optional background circle
+        if (icon.backgroundColor) {
+            const bgRadius = actualIconSize * 0.7;
+            ctx.fillStyle = icon.backgroundColor;
+            ctx.beginPath();
+            ctx.arc(x, y, bgRadius, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        // Draw Lucide icon - use rounded size for cache, scale to actual size
+        const img = (0, lucideIconConverter_1.getLucideIconImage)(icon.name, icon.color || '#ffffff', svgSize);
+        if (img) {
+            const iconX = x - actualIconSize / 2;
+            const iconY = y - actualIconSize / 2;
+            // Scale the cached icon to actual size
+            ctx.drawImage(img, iconX, iconY, actualIconSize, actualIconSize);
+        }
+    }
+    ctx.restore();
+}

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

@@ -1 +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"}
+{"version":3,"file":"lucideIconConverter.d.ts","sourceRoot":"","sources":["../../src/utils/lucideIconConverter.tsx"],"names":[],"mappings":"AA4BA;;;;;;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

@@ -18,6 +18,17 @@ const ICON_PATHS = {
     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"/>',
+    Package: '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
+    BookOpen: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
+    BookText: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/>',
+    ScrollText: '<path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/>',
+    Settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+    Home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
+    Lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+    GitBranch: '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+    EyeOff: '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>',
+    Key: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+    Atom: '<circle cx="12" cy="12" r="1"/><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"/><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"/>',
 };
 /**
  * Convert a Lucide icon name to an SVG data URL that can be used in Canvas

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
   "dependencies": {
     "@principal-ade/industry-theme": "^0.1.3",
     "@principal-ai/alexandria-core-library": "^0.1.36",
-    "@principal-ai/file-city-builder": "^0.3.2",
+    "@principal-ai/file-city-builder": "^0.3.3",
     "lucide-react": "^0.563.0",
     "reactflow": "^11.11.4"
   },

package/src/components/ArchitectureMapHighlightLayers.tsx

@@ -21,6 +21,8 @@ import {
   SelectiveRenderOptions,
 } from '@principal-ai/file-city-builder';
 import { MapInteractionState, MapDisplayOptions } from '../types/react-types';
+import { getDefaultFileColorConfig } from '../utils/fileColorHighlightLayers';
+import { extractIconConfig } from '../utils/fileTypeIcons';
 
 const DEFAULT_DISPLAY_OPTIONS: MapDisplayOptions = {
   showGrid: false,
@@ -326,6 +328,12 @@ function ArchitectureMapHighlightLayersInner({
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Extract icon configuration from file color config
+  const iconMap = useMemo(() => {
+    const colorConfig = getDefaultFileColorConfig();
+    return extractIconConfig(colorConfig);
+  }, []);
+
   const [interactionState, setInteractionState] = useState<MapInteractionState>({
     hoveredDistrict: null,
     hoveredBuilding: null,
@@ -1211,6 +1219,7 @@ function ArchitectureMapHighlightLayersInner({
       showFileTypeIcons,
       buildingBorderRadius,
       layerIndex, // Pre-built index for O(1) lookups
+      iconMap, // Icon configuration map for file type icons
     );
 
     // Performance monitoring end available for debugging
@@ -1246,6 +1255,7 @@ function ArchitectureMapHighlightLayersInner({
     visibleBuildingsMemo,
     abstractedPathsSet,
     layerIndex,
+    iconMap,
   ]);
 
   // Optimized hit testing

package/src/index.ts

@@ -33,8 +33,15 @@ export type {
   ColorLayerConfig,
   FileSuffixConfig,
   FileSuffixColorConfig,
+  FileTypeIconConfig,
 } from './utils/fileColorHighlightLayers';
 
+// File color override utilities for development
+export { devFileColorOverrides, mergeFileColorConfig } from './utils/fileColorOverrides';
+
+// File type icon utilities
+export { extractIconConfig, getFileTypeIcon, drawFileTypeIcon } from './utils/fileTypeIcons';
+
 // Re-export commonly used types from builder
 export type {
   CityData,

package/src/render/client/drawLayeredBuildings.ts

@@ -1,5 +1,7 @@
 import { CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
 import { getLucideIconImage } from '../../utils/lucideIconConverter';
+import { FileTypeIconConfig } from '../../utils/fileColorHighlightLayers';
+import { getFileTypeIcon, drawFileTypeIcon } from '../../utils/fileTypeIcons';
 
 // Layer types and interfaces
 export type LayerRenderStrategy =
@@ -814,47 +816,6 @@ export function drawLayeredDistricts(
   });
 }
 
-/**
- * Draw a React symbol (⚛) at the given position
- */
-function drawReactSymbol(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  size: number,
-  color: string = '#00D8FF',
-  glow: boolean = true,
-) {
-  ctx.save();
-
-  // Position and setup
-  ctx.translate(x, y);
-
-  // Glow effect for React symbol
-  if (glow) {
-    ctx.shadowColor = color;
-    ctx.shadowBlur = 8;
-  }
-
-  // Draw the React symbol (⚛)
-  ctx.fillStyle = color;
-  ctx.font = `${size}px Arial`;
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillText('⚛', 0, 0);
-
-  ctx.restore();
-}
-
-/**
- * Check if a file is a React file (JSX/TSX)
- */
-function isReactFile(fileExtension?: string): boolean {
-  if (!fileExtension) return false;
-  const ext = fileExtension.toLowerCase();
-  return ext === '.jsx' || ext === '.tsx';
-}
-
 // Draw buildings with layer support
 export function drawLayeredBuildings(
   ctx: CanvasRenderingContext2D,
@@ -870,6 +831,7 @@ export function drawLayeredBuildings(
   showFileTypeIcons?: boolean,
   borderRadius: number = 0, // Border radius for buildings (default: 0 - sharp corners)
   layerIndex?: LayerIndex, // Optional pre-built index for performance
+  iconMap?: Map<string, FileTypeIconConfig>, // Optional icon configuration map
 ) {
   // Build index once for all buildings (O(n) instead of O(n²))
   const index = layerIndex || new LayerIndex(layers);
@@ -967,16 +929,12 @@ export function drawLayeredBuildings(
       }
     }
 
-    // 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;
-      const reactX = pos.x;
-      const reactY = pos.y;
-      drawReactSymbol(ctx, reactX, reactY, reactSize);
+    // Draw file type icon if enabled and icon map is provided
+    if (showFileTypeIcons && iconMap) {
+      const iconConfig = getFileTypeIcon(building.path, iconMap);
+      if (iconConfig) {
+        drawFileTypeIcon(ctx, iconConfig, pos.x, pos.y, width, height);
+      }
     }
 
     // Draw filename if enabled

package/src/stories/AllFileTypes.stories.tsx

@@ -26,7 +26,10 @@ type Story = StoryObj<typeof meta>;
 const allFileTypes = [
   // Frontend
   { path: 'frontend/typescript/index.ts', size: 1500 },
+  { path: 'frontend/typescript/index.tsx', size: 1700 },
   { path: 'frontend/typescript/App.tsx', size: 3200 },
+  { path: 'frontend/javascript/index.js', size: 1300 },
+  { path: 'frontend/javascript/index.jsx', size: 1500 },
   { path: 'frontend/javascript/script.js', size: 1200 },
   { path: 'frontend/javascript/Component.jsx', size: 1800 },
   { path: 'frontend/html/index.html', size: 2000 },
@@ -71,7 +74,15 @@ const allFileTypes = [
   { path: 'tests/specs/Form.spec.jsx', size: 2000 },
   { path: 'tests/snapshots/component.snap', size: 3500 },
 
+  // Storybook - Component documentation
+  { path: 'stories/Button.stories.ts', size: 2200 },
+  { path: 'stories/Card.stories.tsx', size: 2600 },
+  { path: 'stories/Input.stories.js', size: 1800 },
+  { path: 'stories/Modal.stories.jsx', size: 2400 },
+
   // Data & Config
+  { path: 'config/package.json', size: 2400 },
+  { path: 'config/tsconfig.json', size: 1800 },
   { path: 'config/data.json', size: 1200 },
   { path: 'config/settings.yaml', size: 1000 },
   { path: 'config/app.yml', size: 950 },
@@ -81,6 +92,7 @@ const allFileTypes = [
 
   // Documentation
   { path: 'docs/README.md', size: 4200 },
+  { path: 'docs/CHANGELOG.md', size: 3600 },
   { path: 'docs/API.mdx', size: 3800 },
   { path: 'docs/notes.txt', size: 600 },
 
@@ -128,11 +140,26 @@ const allFileTypes = [
 
   // Lock files
   { path: 'package-lock.json', size: 256000 },
-  { path: 'Cargo.lock', size: 45000 },
   { path: 'yarn.lock', size: 128000 },
+  { path: 'pnpm-lock.yaml', size: 180000 },
+  { path: 'bun.lockb', size: 95000 },
+  { path: 'Cargo.lock', size: 45000 },
+  { path: 'Gemfile.lock', size: 32000 },
+  { path: 'poetry.lock', size: 78000 },
+  { path: 'composer.lock', size: 156000 },
+  { path: 'go.sum', size: 28000 },
 
   // Config files (exact names)
+  { path: '.env', size: 450 },
+  { path: '.env.example', size: 380 },
+  { path: '.env.local', size: 420 },
+  { path: '.env.development', size: 400 },
+  { path: '.env.production', size: 460 },
+  { path: '.env.test', size: 340 },
   { path: '.gitignore', size: 600 },
+  { path: '.husky/pre-commit', size: 450 },
+  { path: '.husky/commit-msg', size: 380 },
+  { path: '.husky/pre-push', size: 420 },
   { path: '.dockerignore', size: 400 },
   { path: '.npmignore', size: 300 },
   { path: '.eslintignore', size: 250 },
@@ -195,7 +222,7 @@ export const AllFileTypesWithColors: Story = {
         <ArchitectureMapHighlightLayers
           cityData={cityData}
           highlightLayers={highlightLayers}
-          showLayerControls={true}
+          showLayerControls={false}
           fullSize={true}
           canvasBackgroundColor="#0a0a0a"
           defaultBuildingColor="#36454F"

package/src/utils/fileColorHighlightLayers.ts

@@ -4,6 +4,7 @@ import {
   LayerItem,
   LayerRenderStrategy,
 } from '../render/client/drawLayeredBuildings';
+import { devFileColorOverrides, mergeFileColorConfig } from './fileColorOverrides';
 
 // Type definitions for the color configuration
 export interface ColorLayerConfig {
@@ -30,9 +31,19 @@ export interface ColorLayerConfig {
   ) => void;
 }
 
+export interface FileTypeIconConfig {
+  type: 'emoji' | 'lucide';
+  name: string; // emoji character or Lucide icon name
+  color?: string;
+  backgroundColor?: string;
+  glow?: boolean;
+  size?: number; // Scale factor (0-1) relative to building size - default: 0.75 for emoji, 0.5 for lucide
+}
+
 export interface FileSuffixConfig {
   primary: ColorLayerConfig;
   secondary?: ColorLayerConfig;
+  icon?: FileTypeIconConfig; // Optional icon configuration independent of render strategy
   displayName?: string;
   description?: string;
   category?: string;
@@ -85,8 +96,10 @@ export function createFileColorHighlightLayers(
     return [];
   }
 
-  // Use provided config or fall back to default from files.json
-  const colorConfig = config || (defaultFileColorConfig as FileSuffixColorConfig);
+  // Use provided config or fall back to default merged with dev overrides
+  const colorConfig =
+    config ||
+    mergeFileColorConfig(defaultFileColorConfig as FileSuffixColorConfig, devFileColorOverrides);
 
   const { suffixConfigs, defaultConfig: defaultFileConfig, includeUnmatched = true } = colorConfig;
 
@@ -377,10 +390,10 @@ export function createFileColorHighlightLayers(
 
 /**
  * Get the default file color configuration.
- * This returns the configuration loaded from files.json.
+ * This returns the configuration loaded from files.json merged with local dev overrides.
  */
 export function getDefaultFileColorConfig(): FileSuffixColorConfig {
-  return defaultFileColorConfig as FileSuffixColorConfig;
+  return mergeFileColorConfig(defaultFileColorConfig as FileSuffixColorConfig, devFileColorOverrides);
 }
 
 /**
@@ -391,7 +404,9 @@ export function getDefaultFileColorConfig(): FileSuffixColorConfig {
  * @returns Record mapping file extensions to hex color strings
  */
 export function getFileColorMapping(config?: FileSuffixColorConfig): Record<string, string> {
-  const colorConfig = config || (defaultFileColorConfig as FileSuffixColorConfig);
+  const colorConfig =
+    config ||
+    mergeFileColorConfig(defaultFileColorConfig as FileSuffixColorConfig, devFileColorOverrides);
   return Object.entries(colorConfig.suffixConfigs).reduce((acc, [extension, suffixConfig]) => {
     acc[extension] = suffixConfig.primary.color;
     return acc;

package/src/utils/fileColorOverrides.ts

@@ -0,0 +1,54 @@
+import { FileSuffixColorConfig } from './fileColorHighlightLayers';
+
+/**
+ * Development overrides for file color configuration.
+ * Add new file extensions here during development, then move them to
+ * @principal-ai/file-city-builder/src/config/files.json when ready to publish.
+ *
+ * These overrides will merge with (and take precedence over) the default config.
+ */
+export const devFileColorOverrides: Partial<FileSuffixColorConfig> = {
+  suffixConfigs: {
+    // Add your new file extensions here during development
+    "package.json": {
+      primary: {
+        color: "#CB3837",
+        renderStrategy: "fill",
+        opacity: 1.0,
+      },
+      icon: {
+        type: "lucide",
+        name: "Package",
+        color: "#ffffff",
+        size: 0.6,
+      },
+      displayName: "Package",
+      description: "npm package.json files",
+      category: "Configuration",
+    },
+  },
+};
+
+/**
+ * Merges the default file color configuration with local development overrides.
+ * Overrides take precedence over defaults.
+ *
+ * @param defaultConfig - The default configuration from the builder package
+ * @param overrides - Local development overrides
+ * @returns Merged configuration with overrides applied
+ */
+export function mergeFileColorConfig(
+  defaultConfig: FileSuffixColorConfig,
+  overrides: Partial<FileSuffixColorConfig>,
+): FileSuffixColorConfig {
+  return {
+    ...defaultConfig,
+    ...overrides,
+    suffixConfigs: {
+      ...defaultConfig.suffixConfigs,
+      ...(overrides.suffixConfigs || {}),
+    },
+    // Keep default config's defaultConfig unless explicitly overridden
+    ...(overrides.defaultConfig && { defaultConfig: overrides.defaultConfig }),
+  };
+}

package/src/utils/fileTypeIcons.ts

@@ -0,0 +1,116 @@
+import { FileSuffixColorConfig, FileTypeIconConfig } from './fileColorHighlightLayers';
+import { getLucideIconImage } from './lucideIconConverter';
+
+/**
+ * Extract icon configurations from file color config
+ * This creates a map of file extensions to their icon configs
+ */
+export function extractIconConfig(
+  colorConfig: FileSuffixColorConfig,
+): Map<string, FileTypeIconConfig> {
+  const iconMap = new Map<string, FileTypeIconConfig>();
+
+  Object.entries(colorConfig.suffixConfigs).forEach(([suffix, config]) => {
+    if (config.icon) {
+      iconMap.set(suffix, config.icon);
+    }
+  });
+
+  return iconMap;
+}
+
+/**
+ * Get icon configuration for a file path
+ * Uses same matching logic as file color system
+ */
+export function getFileTypeIcon(
+  filePath: string,
+  iconMap: Map<string, FileTypeIconConfig>,
+): FileTypeIconConfig | null {
+  const lastSlash = filePath.lastIndexOf('/');
+  const fileName = lastSlash === -1 ? filePath : filePath.substring(lastSlash + 1);
+
+  // Check exact filename match first (e.g., "package.json")
+  if (iconMap.has(fileName)) {
+    return iconMap.get(fileName) || null;
+  }
+
+  const lastDot = fileName.lastIndexOf('.');
+  if (lastDot === -1 || lastDot === fileName.length - 1) {
+    // No extension or ends with dot
+    return null;
+  }
+
+  // Check compound extensions (longest first) - same as fileColorHighlightLayers
+  const sortedExtensions = Array.from(iconMap.keys()).sort((a, b) => b.length - a.length);
+
+  const lowerFileName = fileName.toLowerCase();
+  for (const ext of sortedExtensions) {
+    if (ext.startsWith('.') && lowerFileName.endsWith(ext)) {
+      return iconMap.get(ext) || null;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Draw a file type icon on the canvas
+ */
+export function drawFileTypeIcon(
+  ctx: CanvasRenderingContext2D,
+  icon: FileTypeIconConfig,
+  x: number,
+  y: number,
+  buildingWidth: number,
+  buildingHeight: number,
+) {
+  ctx.save();
+
+  if (icon.type === 'emoji') {
+    // Calculate size as percentage of building
+    const sizeScale = icon.size || 0.75;
+    const emojiSize = Math.min(buildingWidth, buildingHeight) * sizeScale;
+
+    // Glow effect
+    if (icon.glow) {
+      ctx.shadowColor = icon.color || '#00D8FF';
+      ctx.shadowBlur = 8;
+    }
+
+    ctx.fillStyle = icon.color || '#ffffff';
+    ctx.font = `${emojiSize}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(icon.name, x, y);
+  } else if (icon.type === 'lucide') {
+    // Calculate size as percentage of building (same as emoji)
+    const sizeScale = icon.size || 0.5;
+    const actualIconSize = Math.min(buildingWidth, buildingHeight) * sizeScale;
+
+    // Round to nearest 4px to reduce cache misses and prevent flickering
+    const roundedIconSize = Math.round(actualIconSize / 4) * 4;
+    const svgSize = Math.max(16, Math.min(roundedIconSize, 64)); // Clamp between 16-64px for SVG generation
+
+    // Optional background circle
+    if (icon.backgroundColor) {
+      const bgRadius = actualIconSize * 0.7;
+      ctx.fillStyle = icon.backgroundColor;
+      ctx.beginPath();
+      ctx.arc(x, y, bgRadius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Draw Lucide icon - use rounded size for cache, scale to actual size
+    const img = getLucideIconImage(icon.name, icon.color || '#ffffff', svgSize);
+
+    if (img) {
+      const iconX = x - actualIconSize / 2;
+      const iconY = y - actualIconSize / 2;
+      // Scale the cached icon to actual size
+      ctx.drawImage(img, iconX, iconY, actualIconSize, actualIconSize);
+    }
+  }
+
+  ctx.restore();
+}

package/src/utils/lucideIconConverter.tsx

@@ -13,6 +13,17 @@ const ICON_PATHS: Record<string, string> = {
   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"/>',
+  Package: '<path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
+  BookOpen: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
+  BookText: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/>',
+  ScrollText: '<path d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M15 8h-5"/><path d="M15 12h-5"/>',
+  Settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  Home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
+  Lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  GitBranch: '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  EyeOff: '<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/>',
+  Key: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+  Atom: '<circle cx="12" cy="12" r="1"/><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"/><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"/>',
 };
 
 /**