@principal-ai/file-city-react 0.5.34 → 0.5.36

package/src/components/FileCity3D/index.ts

@@ -20,7 +20,8 @@ export type {
   FileCity3DProps,
   AnimationConfig,
   HighlightLayer,
-  HighlightItem,
+  LayerItem,
+  LayerRenderStrategy,
   IsolationMode,
   HeightScaling,
   FlatPattern,

package/src/index.ts

@@ -77,8 +77,6 @@ export type {
   FileCity3DProps,
   AnimationConfig,
   HighlightLayer as FileCity3DHighlightLayer,
-  HighlightItem as FileCity3DHighlightItem,
-  HighlightItem,
   IsolationMode,
   HeightScaling,
   FlatPattern,

package/src/stories/2D3DComparison.stories.tsx

@@ -201,7 +201,7 @@ export const SideBySide: StoryObj = {
                 fontWeight: 500,
               }}
             >
-              3D FLAT
+              3D FLAT (with test border)
             </div>
             <div style={{ flex: 1, backgroundColor: '#0f1419' }}>
               <FileCity3D
@@ -210,7 +210,7 @@ export const SideBySide: StoryObj = {
                 width="100%"
                 height="100%"
                 isGrown={false}
-                showControls={false}
+                showControls={true}
                 backgroundColor="#0f1419"
               />
             </div>

package/src/stories/FileCity3D.stories.tsx

@@ -422,7 +422,7 @@ export const IsolationTransparent: Story = {
         name: 'Focus Layer',
         enabled: true,
         color: '#22c55e',
-        items: [{ path: 'src', type: 'directory' as const }],
+        items: [{ path: 'src', type: 'directory' as const, renderStrategy: 'fill' as const }],
       },
     ],
   },
@@ -442,7 +442,7 @@ export const IsolationCollapse: Story = {
         name: 'Focus Layer',
         enabled: true,
         color: '#3b82f6',
-        items: [{ path: 'src/components', type: 'directory' as const }],
+        items: [{ path: 'src/components', type: 'directory' as const, renderStrategy: 'fill' as const }],
       },
     ],
   },
@@ -462,7 +462,7 @@ export const IsolationHide: Story = {
         name: 'Focus Layer',
         enabled: true,
         color: '#f59e0b',
-        items: [{ path: 'tests', type: 'directory' as const }],
+        items: [{ path: 'tests', type: 'directory' as const, renderStrategy: 'fill' as const }],
       },
     ],
   },
@@ -483,14 +483,73 @@ export const MultipleHighlights: Story = {
         name: 'Source',
         enabled: true,
         color: '#22c55e',
-        items: [{ path: 'src', type: 'directory' as const }],
+        items: [{ path: 'src', type: 'directory' as const, renderStrategy: 'fill' as const }],
       },
       {
         id: 'tests',
         name: 'Tests',
         enabled: true,
         color: '#ef4444',
-        items: [{ path: 'tests', type: 'directory' as const }],
+        items: [{ path: 'tests', type: 'directory' as const, renderStrategy: 'fill' as const }],
+      },
+    ],
+  },
+};
+
+/**
+ * Layered Highlights - Multiple overlapping highlight layers
+ * Tests priority-based rendering with fill + border strategies
+ * Starts flat (2D) - click "Grow" button to see in 3D
+ */
+export const LayeredHighlights: Story = {
+  args: {
+    cityData: sampleCityData,
+    height: '100vh',
+    isolationMode: 'transparent',
+    dimOpacity: 0.05,
+    animation: {
+      startFlat: true,
+      autoStartDelay: null, // Stay in 2D, use button to grow
+    },
+    showControls: true,
+    highlightLayers: [
+      {
+        id: 'base-fill',
+        name: 'Base Fill (src)',
+        enabled: true,
+        color: '#3b82f6',
+        opacity: 0.7,
+        priority: 1,
+        items: [{ path: 'src', type: 'directory' as const, renderStrategy: 'fill' as const }],
+      },
+      {
+        id: 'components-fill',
+        name: 'Components Fill (src/components)',
+        enabled: true,
+        color: '#facc15',
+        opacity: 1.0,
+        priority: 2,
+        items: [{ path: 'src/components', type: 'directory' as const, renderStrategy: 'fill' as const }],
+      },
+      {
+        id: 'components-border',
+        name: 'Components Border (src/components)',
+        enabled: true,
+        color: '#ef4444',
+        opacity: 1.0,
+        priority: 3,
+        borderWidth: 6,
+        items: [{ path: 'src/components', type: 'directory' as const, renderStrategy: 'border' as const }],
+      },
+      {
+        id: 'utils-border',
+        name: 'Utils Border (src/utils)',
+        enabled: true,
+        color: '#22c55e',
+        opacity: 1.0,
+        priority: 4,
+        borderWidth: 4,
+        items: [{ path: 'src/utils', type: 'directory' as const, renderStrategy: 'border' as const }],
       },
     ],
   },
@@ -516,7 +575,7 @@ export const AnimatedWithHighlight: Story = {
         name: 'Components',
         enabled: true,
         color: '#8b5cf6',
-        items: [{ path: 'src/components', type: 'directory' as const }],
+        items: [{ path: 'src/components', type: 'directory' as const, renderStrategy: 'fill' as const }],
       },
     ],
   },