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

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":"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,QA8J1C"}
+{"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.5.0",
+  "version": "0.5.1",
   "description": "React components for File City visualization",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/render/client/drawLayeredBuildings.ts

@@ -894,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);
@@ -933,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>