@principal-ai/file-city-react 0.4.8 → 0.5.1

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

@@ -1,39 +1,6 @@
-import { CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
+import { CityBuilding, CityDistrict, LayerItem, LayerRenderStrategy, HighlightLayer } 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;
-    type: 'file' | 'directory';
-    renderStrategy?: LayerRenderStrategy;
-    coverOptions?: {
-        opacity?: number;
-        image?: string;
-        text?: string;
-        textSize?: number;
-        backgroundColor?: string;
-        borderRadius?: number;
-        icon?: string;
-        iconSize?: number;
-        lucideIcon?: string;
-    };
-    customRender?: (ctx: CanvasRenderingContext2D, bounds: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    }, scale: number) => void;
-}
-export interface HighlightLayer {
-    id: string;
-    name: string;
-    enabled: boolean;
-    color: string;
-    opacity?: number;
-    borderWidth?: number;
-    priority: number;
-    items: LayerItem[];
-    dynamic?: boolean;
-}
+export type { LayerItem, LayerRenderStrategy, HighlightLayer };
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
  * This dramatically improves performance with large numbers of layer items.

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":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,mBAAmB,EACnB,cAAc,EACf,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI1E,YAAY,EAAE,SAAS,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAE/D;;;GAGG;AACH,qBAAa,UAAU;IAErB,OAAO,CAAC,UAAU,CAA6E;IAE/F,OAAO,CAAC,cAAc,CAAuE;IAE7F,OAAO,CAAC,WAAW,CAA6E;gBAEpF,MAAM,EAAE,cAAc,EAAE;IAIpC,OAAO,CAAC,UAAU;IA0BlB;;;;OAIG;IACH,eAAe,CACb,IAAI,EAAE,MAAM,EACZ,SAAS,GAAE,OAAO,GAAG,UAAuB,GAC3C,KAAK,CAAC;QAAE,KAAK,EAAE,cAAc,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,CAAC;CAuCrD;AA8BD,wBAAgB,QAAQ,CACtB,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,QAqBjB;AA0VD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,SAAS,EAAE,YAAY,EAAE,EACzB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACjE,KAAK,EAAE,MAAM,EAAE,wDAAwD;AACvE,MAAM,EAAE,cAAc,EAAE,EACxB,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,EACrC,QAAQ,CAAC,EAAE,OAAO,EAClB,qBAAqB,CAAC,EAAE,MAAM,EAC9B,YAAY,CAAC,EAAE;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,EACD,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,yDAAyD;AACxF,mBAAmB,GAAE,OAAc,EACnC,YAAY,GAAE,MAAU,EAAE,uDAAuD;AACjF,UAAU,CAAC,EAAE,UAAU,QAgQxB;AAGD,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,SAAS,EAAE,YAAY,EAAE,EACzB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACjE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,cAAc,EAAE,EACxB,eAAe,CAAC,EAAE,YAAY,GAAG,IAAI,EACrC,oBAAoB,CAAC,EAAE,MAAM,EAC7B,aAAa,CAAC,EAAE,OAAO,EACvB,gBAAgB,CAAC,EAAE,MAAM,EACzB,qBAAqB,CAAC,EAAE,OAAO,EAC/B,iBAAiB,CAAC,EAAE,OAAO,EAC3B,YAAY,GAAE,MAAU,EAAE,2DAA2D;AACrF,UAAU,CAAC,EAAE,UAAU,EAAE,2CAA2C;AACpE,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,QA0K1C"}

package/dist/render/client/drawLayeredBuildings.js

@@ -655,12 +655,16 @@ iconMap) {
         // Draw file type icon if enabled and icon map is provided
         // Track icon size for positioning file name below
         let iconBottomY = pos.y;
+        let hasIcon = false;
         if (showFileTypeIcons && iconMap) {
             const iconConfig = (0, fileTypeIcons_1.getFileTypeIcon)(building.path, iconMap);
             if (iconConfig) {
+                hasIcon = true;
                 // For wide buildings (wider than tall), shift icon up to make room for text below
+                // Only shift if text will actually be rendered
+                const willShowText = showFileNames && width > 100 && height > 30;
                 const isWide = width > height;
-                const iconYOffset = isWide ? -height * 0.15 : 0;
+                const iconYOffset = (willShowText && isWide) ? -height * 0.15 : 0;
                 const iconY = pos.y + iconYOffset;
                 (0, fileTypeIcons_1.drawFileTypeIcon)(ctx, iconConfig, pos.x, iconY, width, height);
                 // Calculate where the icon ends vertically
@@ -691,13 +695,21 @@ iconMap) {
             const fontSize = Math.min(30, Math.max(10, Math.floor(Math.min(width, height) * 0.3)));
             ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
             ctx.textAlign = 'center';
-            ctx.textBaseline = 'top'; // Changed from 'middle' to 'top'
             const textMetrics = ctx.measureText(fileName);
             const textWidth = textMetrics.width;
             if (textWidth < width - 8) {
-                // Add spacing between icon and text
-                const spacing = 4;
-                const textY = iconBottomY + spacing;
+                let textY;
+                if (hasIcon) {
+                    // Position text below icon
+                    ctx.textBaseline = 'top';
+                    const spacing = 4;
+                    textY = iconBottomY + spacing;
+                }
+                else {
+                    // Center text vertically when no icon
+                    ctx.textBaseline = 'middle';
+                    textY = pos.y;
+                }
                 // Text
                 ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
                 ctx.fillText(fileName, pos.x, textY);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/file-city-react",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "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.3",
+    "@principal-ai/file-city-builder": "^0.4.0",
     "lucide-react": "^0.563.0",
     "reactflow": "^11.11.4"
   },

package/src/render/client/drawLayeredBuildings.ts

@@ -1,54 +1,16 @@
-import { CityBuilding, CityDistrict } from '@principal-ai/file-city-builder';
+import {
+  CityBuilding,
+  CityDistrict,
+  LayerItem,
+  LayerRenderStrategy,
+  HighlightLayer,
+} 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 =
-  | 'border'
-  | 'fill'
-  | 'glow'
-  | 'pattern'
-  | 'cover'
-  | 'icon'
-  | 'custom';
-
-export interface LayerItem {
-  path: string;
-  type: 'file' | 'directory';
-  renderStrategy?: LayerRenderStrategy;
-  // Cover-specific options
-  coverOptions?: {
-    opacity?: number;
-    image?: string;
-    text?: string;
-    textSize?: number;
-    backgroundColor?: string;
-    borderRadius?: number;
-    icon?: string;
-    iconSize?: number;
-    lucideIcon?: string;
-  };
-  // Custom render function
-  customRender?: (
-    ctx: CanvasRenderingContext2D,
-    bounds: { x: number; y: number; width: number; height: number },
-    scale: number,
-  ) => void;
-}
-
-export interface HighlightLayer {
-  id: string;
-  name: string;
-  enabled: boolean;
-  color: string;
-  opacity?: number;
-  borderWidth?: number;
-  priority: number; // Higher priority layers render on top
-  items: LayerItem[];
-  // Performance optimization - mark frequently changing layers as dynamic
-  dynamic?: boolean; // If true, this layer changes frequently (e.g., hover effects)
-}
+// Re-export for backward compatibility
+export type { LayerItem, LayerRenderStrategy, HighlightLayer };
 
 /**
  * LayerIndex provides O(1) path lookups instead of O(n) iteration.
@@ -932,12 +894,16 @@ export function drawLayeredBuildings(
     // Draw file type icon if enabled and icon map is provided
     // Track icon size for positioning file name below
     let iconBottomY = pos.y;
+    let hasIcon = false;
     if (showFileTypeIcons && 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
+        // Only shift if text will actually be rendered
+        const willShowText = showFileNames && width > 100 && height > 30;
         const isWide = width > height;
-        const iconYOffset = isWide ? -height * 0.15 : 0;
+        const iconYOffset = (willShowText && isWide) ? -height * 0.15 : 0;
         const iconY = pos.y + iconYOffset;
 
         drawFileTypeIcon(ctx, iconConfig, pos.x, iconY, width, height);
@@ -971,15 +937,23 @@ export function drawLayeredBuildings(
       const fontSize = Math.min(30, Math.max(10, Math.floor(Math.min(width, height) * 0.3)));
       ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
       ctx.textAlign = 'center';
-      ctx.textBaseline = 'top'; // Changed from 'middle' to 'top'
 
       const textMetrics = ctx.measureText(fileName);
       const textWidth = textMetrics.width;
 
       if (textWidth < width - 8) {
-        // Add spacing between icon and text
-        const spacing = 4;
-        const textY = iconBottomY + spacing;
+        let textY: number;
+
+        if (hasIcon) {
+          // Position text below icon
+          ctx.textBaseline = 'top';
+          const spacing = 4;
+          textY = iconBottomY + spacing;
+        } else {
+          // Center text vertically when no icon
+          ctx.textBaseline = 'middle';
+          textY = pos.y;
+        }
 
         // Text
         ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';

package/src/stories/AllFileTypes.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    Story => (
+    (Story: React.ComponentType) => (
       <div style={{ width: '100vw', height: '100vh', backgroundColor: '#1a1a1a' }}>
         <Story />
       </div>
@@ -199,7 +199,7 @@ function createAllFileTypesCityData() {
     };
   });
 
-  const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos);
+  const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos, 'all-file-types');
   const builder = new CodeCityBuilderWithGrid();
   return builder.buildCityFromFileSystem(fileTree, '', {
     paddingTop: 2,
@@ -230,6 +230,8 @@ export const AllFileTypesWithColors: Story = {
           enableZoom={true}
           buildingBorderRadius={2}
           districtBorderRadius={4}
+          showFileTypeIcons={true}
+          showFileNames={true}
         />
         <div
           style={{
@@ -288,7 +290,7 @@ export const TestFilesWithIcons: Story = {
       };
     });
 
-    const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos);
+    const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos, 'test-files');
     const builder = new CodeCityBuilderWithGrid();
     const cityData = builder.buildCityFromFileSystem(fileTree, '', {
       paddingTop: 2,

package/src/stories/ArchitectureMapGridLayout.stories.tsx

@@ -50,7 +50,7 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    Story => (
+    (Story: React.ComponentType) => (
       <div style={{ width: '100vw', height: '100vh' }}>
         <Story />
       </div>

package/src/stories/ArchitectureMapHighlightLayers.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    Story => (
+    (Story: React.ComponentType) => (
       <div style={{ width: '100vw', height: '100vh', backgroundColor: '#1a1a1a' }}>
         <Story />
       </div>
@@ -200,7 +200,6 @@ export const WithAbstractionLayer: Story = {
         color: '#1e40af',
         priority: 0,
         items: [],
-        // @ts-expect-error - abstraction layer specific properties
         abstractionLayer: true,
         abstractionConfig: {
           maxZoomLevel: 2.0,
@@ -208,7 +207,7 @@ export const WithAbstractionLayer: Story = {
           backgroundColor: '#1e40af',
           allowRootAbstraction: false,
         },
-      },
+      } as HighlightLayer,
     ],
     fullSize: true,
     enableZoom: true,

package/src/stories/CityViewWithReactFlow.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    Story => (
+    (Story: React.ComponentType) => (
       <div style={{ height: '100vh', width: '100vw' }}>
         <Story />
       </div>

package/src/stories/StressTest.stories.tsx

@@ -353,7 +353,7 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    Story => (
+    (Story: React.ComponentType) => (
       <div style={{ width: '100vw', height: '100vh' }}>
         <Story />
       </div>