@principal-ai/file-city-react 0.5.42 → 0.5.44

package/src/components/FileCity3D/index.ts

@@ -27,6 +27,7 @@ export type {
   HeightScaling,
   FlatPattern,
   ElevatedScopePanel,
+  SelectionStyle,
   CityData,
   CityBuilding,
   CityDistrict,
@@ -35,4 +36,5 @@ export type {
   TouchOneAction,
   TouchTwoAction,
   WheelAction,
+  OnCameraFrame,
 } from './FileCity3D';

package/src/components/FileCityExplorer/FileCityExplorer.tsx

@@ -564,47 +564,17 @@ export const FileCityExplorer: React.FC<FileCityExplorerProps> = ({
       const displayLabel = folderPath ? areaNameByCityPath.get(folderPath) : undefined;
       return displayLabel ? { ...panel, displayLabel } : panel;
     });
-    // Selection indicator: render a thin, slightly-larger panel underneath
-    // the selected folder's umbrella so an accent ring peeks out around its
-    // edges. Inserted *before* the umbrella in the list so the umbrella
-    // draws on top — only the inflated rim shows. If the folder is expanded
-    // (no umbrella in the panel list) findIndex returns -1 and no ring is
-    // drawn, which is exactly what we want.
-    if (selectedPanelFolder) {
-      const idx = panels.findIndex(p => p.id === `folder::${selectedPanelFolder}`);
-      if (idx >= 0) {
-        const target = panels[idx];
-        const inflate = 4;
-        const border: ElevatedScopePanel = {
-          id: `folder-border::${selectedPanelFolder}`,
-          color: theme.colors.warning,
-          height: (target.height ?? 4) - 2,
-          thickness: 1,
-          bounds: {
-            minX: target.bounds.minX - inflate,
-            maxX: target.bounds.maxX + inflate,
-            minZ: target.bounds.minZ - inflate,
-            maxZ: target.bounds.maxZ + inflate,
-          },
-        };
-        const next = [...panels];
-        next.splice(idx, 0, border);
-        return next;
-      }
-    }
 
     return panels.length > 0 ? panels : undefined;
   }, [
     activeTab,
     cityData,
-    selectedPanelFolder,
     treeModel,
     folderTreeExpansion,
     setFocusDirectoryIfUnpinned,
     areaNameByCityPath,
     folderIndex,
     packageRootClamp,
-    theme,
   ]);
 
   // Cmd-click on a building → surface the chain of expanded ancestor folders
@@ -829,6 +799,8 @@ export const FileCityExplorer: React.FC<FileCityExplorerProps> = ({
             focusDirectory={focusDirectory}
             highlightLayers={cityHighlightLayers}
             elevatedScopePanels={cityElevatedPanels ?? folderElevatedPanels}
+            selectedPath={activeTab === 'files' ? selectedPanelFolder : null}
+            selectionStyle={{ color: theme.colors.warning }}
             onBuildingClick={handleBuildingClick}
             animation={{
               startFlat: true,

package/src/index.ts

@@ -81,6 +81,7 @@ export type {
   HeightScaling,
   FlatPattern,
   ElevatedScopePanel,
+  SelectionStyle,
 } from './components/FileCity3D';
 
 // Re-export HighlightLayer from FileCity3D with distinct name to avoid conflict

package/src/stories/ElevatedScopePanels.stories.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -189,7 +190,8 @@ export const RecoloredAndTranslucent: Story = {
 };
 
 // ---------------------------------------------------------------------------
-// Selection ring
+// Selection ring (now a first-class `selectedPath` prop on FileCity3D —
+// kept here as a regression demo so the panel/ring composition stays visible).
 // ---------------------------------------------------------------------------
 
 const SELECTED_FOLDER = 'electron-app/src';
@@ -198,37 +200,17 @@ const SELECTION_RING_COLOR = '#fbbf24';
 export const WithSelectionRing: Story = {
   args: {
     ...baseArgs,
-    elevatedScopePanels: (() => {
-      const panels = panelsFor(TOP_LEVEL);
-      const idx = panels.findIndex(p => p.id === `folder::${SELECTED_FOLDER}`);
-      if (idx < 0) return panels;
-      const target = panels[idx];
-      const inflate = 4;
-      const ring: ElevatedScopePanel = {
-        id: `folder-border::${SELECTED_FOLDER}`,
-        color: SELECTION_RING_COLOR,
-        height: (target.height ?? 4) - 2,
-        thickness: 1,
-        bounds: {
-          minX: target.bounds.minX - inflate,
-          maxX: target.bounds.maxX + inflate,
-          minZ: target.bounds.minZ - inflate,
-          maxZ: target.bounds.maxZ + inflate,
-        },
-      };
-      const next = [...panels];
-      next.splice(idx, 0, ring);
-      return next;
-    })(),
+    elevatedScopePanels: panelsFor(TOP_LEVEL),
+    selectedPath: SELECTED_FOLDER,
+    selectionStyle: { color: SELECTION_RING_COLOR },
   },
   parameters: {
     docs: {
       description: {
         story:
-          'Insert an inflated, lower-height panel just *before* the target ' +
-          'umbrella so only its rim peeks out — the selection-ring pattern ' +
-          'used by FileCityExplorer. Order matters: the ring must come ' +
-          'first so the umbrella draws on top of its centre.',
+          '`selectedPath` resolves to a district, so FileCity3D draws the ' +
+          'selection ring above the umbrella covering that district. ' +
+          'Replaces the older inflate-a-panel-underneath-the-umbrella trick.',
       },
     },
   },
@@ -293,3 +275,66 @@ export const HandBuiltPanels: Story = {
     },
   },
 };
+
+// ---------------------------------------------------------------------------
+// Cmd-click to dismiss (parent-owned dismiss flow)
+// ---------------------------------------------------------------------------
+
+function DismissOnCommandClickStory() {
+  const [panels, setPanels] = useState<ElevatedScopePanel[]>(() =>
+    panelsFor(TOP_LEVEL),
+  );
+  const [dismissingIds, setDismissingIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  const wired = panels.map(panel => ({
+    ...panel,
+    onClick: (event: MouseEvent) => {
+      if (!event.metaKey) return;
+      setDismissingIds(prev => {
+        if (prev.has(panel.id)) return prev;
+        const next = new Set(prev);
+        next.add(panel.id);
+        return next;
+      });
+    },
+  }));
+
+  const handleDismissed = useCallback((id: string) => {
+    setPanels(prev => prev.filter(p => p.id !== id));
+    setDismissingIds(prev => {
+      if (!prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  return (
+    <FileCity3D
+      {...baseArgs}
+      elevatedScopePanels={wired}
+      dismissingPanelIds={dismissingIds}
+      onPanelDismissed={handleDismissed}
+    />
+  );
+}
+
+export const DismissOnCommandClick: Story = {
+  render: () => <DismissOnCommandClickStory />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '⌘-click (or ctrl-click on non-Mac with `event.metaKey`) a panel ' +
+          'to lift it toward the camera and fade it out. The story owns ' +
+          'both the `panels` array and a `dismissingIds` set: clicking adds ' +
+          'the id to that set, `FileCity3D` plays the spring, and once it ' +
+          'settles `onPanelDismissed` fires so the story drops the panel ' +
+          'from both pieces of state. The component never owns the ' +
+          'truth — it just animates and notifies.',
+      },
+    },
+  },
+};

package/src/stories/FileCityExplorer.stories.tsx

@@ -1570,39 +1570,10 @@ const FileCityExplorerTemplate: React.FC = () => {
       const displayLabel = folderPath ? areaNameByCityPath.get(folderPath) : undefined;
       return displayLabel ? { ...panel, displayLabel } : panel;
     });
-    // Selection indicator: render a thin, slightly-larger panel underneath
-    // the selected folder's umbrella so an accent ring peeks out around its
-    // edges. Inserted *before* the umbrella in the list so the umbrella
-    // draws on top — only the inflated rim shows. If the folder is expanded
-    // (no umbrella in the panel list) findIndex returns -1 and no ring is
-    // drawn, which is exactly what we want.
-    if (selectedPanelFolder) {
-      const idx = panels.findIndex(p => p.id === `folder::${selectedPanelFolder}`);
-      if (idx >= 0) {
-        const target = panels[idx];
-        const inflate = 4;
-        const border: ElevatedScopePanel = {
-          id: `folder-border::${selectedPanelFolder}`,
-          color: '#fbbf24',
-          height: (target.height ?? 4) - 2,
-          thickness: 1,
-          bounds: {
-            minX: target.bounds.minX - inflate,
-            maxX: target.bounds.maxX + inflate,
-            minZ: target.bounds.minZ - inflate,
-            maxZ: target.bounds.maxZ + inflate,
-          },
-        };
-        const next = [...panels];
-        next.splice(idx, 0, border);
-        return next;
-      }
-    }
 
     return panels.length > 0 ? panels : undefined;
   }, [
     activeTab,
-    selectedPanelFolder,
     treeModel,
     folderTreeExpansion,
     setFocusDirectoryIfUnpinned,
@@ -1829,6 +1800,8 @@ const FileCityExplorerTemplate: React.FC = () => {
             focusDirectory={focusDirectory}
             highlightLayers={cityHighlightLayers}
             elevatedScopePanels={cityElevatedPanels ?? folderElevatedPanels}
+            selectedPath={activeTab === 'files' ? selectedPanelFolder : null}
+            selectionStyle={{ color: '#fbbf24' }}
             onBuildingClick={handleBuildingClick}
             animation={{
               startFlat: true,

package/src/stories/HighlightLayersFlatDebug.stories.tsx

@@ -0,0 +1,319 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FileCity3D } from '../components/FileCity3D';
+import type { CityData, HighlightLayer } from '../components/FileCity3D';
+import { createFileColorHighlightLayers } from '../utils/fileColorHighlightLayers';
+import authServerCityData from '../../../../assets/auth-server-city-data.json';
+
+const meta = {
+  title: 'Debug/Highlight Layers (Flat)',
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta;
+
+export default meta;
+
+const cityData = authServerCityData as CityData;
+
+// Three known-existing paths in the auth-server fixture, picked so they
+// represent different file types.
+const TARGETS = {
+  ts: 'auth-server/src/lib/auth-provider.ts',     // .ts → fileColor primary 'fill'
+  tsx: 'auth-server/src/app/page.tsx',            // .tsx → fileColor primary 'fill', secondary 'border'
+  route: 'auth-server/src/app/api/auth/workos/callback/route.ts', // .ts
+};
+
+const RED = '#ef4444';
+const AMBER = '#f59e0b';
+const GREEN = '#22c55e';
+const NEUTRAL_BUILDING = '#475569'; // slate-600 — used in stories that want to isolate highlight rendering
+
+const FLAT_ANIMATION = {
+  startFlat: true as const,
+  autoStartDelay: null,
+  staggerDelay: 0,
+  tension: 200,
+  friction: 24,
+};
+
+const Stage = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: '#0f1419',
+    }}
+  >
+    {children}
+  </div>
+);
+
+// ---------------------------------------------------------------------------
+// 1. Borders only, no fileColorLayers — the cleanest possible test.
+// ---------------------------------------------------------------------------
+export const BorderOnly_NoFileColors: StoryObj = {
+  name: '1. border only, no file colors',
+  render: () => {
+    const layers: HighlightLayer[] = [
+      {
+        id: 'red',
+        name: 'red',
+        enabled: true,
+        color: RED,
+        priority: 10,
+        borderWidth: 30,
+        items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'amber',
+        name: 'amber',
+        enabled: true,
+        color: AMBER,
+        priority: 11,
+        borderWidth: 30,
+        items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'green',
+        name: 'green',
+        enabled: true,
+        color: GREEN,
+        priority: 12,
+        borderWidth: 30,
+        items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
+      },
+    ];
+    return (
+      <Stage>
+        <FileCity3D
+          cityData={cityData}
+          width="100%"
+          height="100%"
+          isGrown={false}
+          animation={FLAT_ANIMATION}
+          highlightLayers={layers}
+          defaultBuildingColor={NEUTRAL_BUILDING}
+          isolationMode="none"
+          backgroundColor="#0f1419"
+          showControls={true}
+        />
+      </Stage>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 2. Same as #1 but with fileColorLayers also set — does anything change?
+// ---------------------------------------------------------------------------
+export const BorderOnly_WithFileColors: StoryObj = {
+  name: '2. border + file colors',
+  render: () => {
+    const fileColorLayers = createFileColorHighlightLayers(cityData.buildings);
+    const layers: HighlightLayer[] = [
+      {
+        id: 'red',
+        name: 'red',
+        enabled: true,
+        color: RED,
+        priority: 1000,
+        borderWidth: 30,
+        items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'amber',
+        name: 'amber',
+        enabled: true,
+        color: AMBER,
+        priority: 1000,
+        borderWidth: 30,
+        items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'green',
+        name: 'green',
+        enabled: true,
+        color: GREEN,
+        priority: 1000,
+        borderWidth: 30,
+        items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
+      },
+    ];
+    return (
+      <Stage>
+        <FileCity3D
+          cityData={cityData}
+          width="100%"
+          height="100%"
+          isGrown={false}
+          animation={FLAT_ANIMATION}
+          fileColorLayers={fileColorLayers}
+          highlightLayers={layers}
+          isolationMode="none"
+          backgroundColor="#0f1419"
+          showControls={true}
+        />
+      </Stage>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 3. Fill strategy — sanity check that the layer system applies at all.
+//    If these buildings turn red/amber/green, the layer plumbing is fine
+//    and the issue is specific to BorderHighlights rendering.
+// ---------------------------------------------------------------------------
+export const Fill_NoFileColors: StoryObj = {
+  name: '3. fill only, no file colors',
+  render: () => {
+    const layers: HighlightLayer[] = [
+      {
+        id: 'red',
+        name: 'red',
+        enabled: true,
+        color: RED,
+        priority: 10,
+        items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'fill' }],
+      },
+      {
+        id: 'amber',
+        name: 'amber',
+        enabled: true,
+        color: AMBER,
+        priority: 11,
+        items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'fill' }],
+      },
+      {
+        id: 'green',
+        name: 'green',
+        enabled: true,
+        color: GREEN,
+        priority: 12,
+        items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'fill' }],
+      },
+    ];
+    return (
+      <Stage>
+        <FileCity3D
+          cityData={cityData}
+          width="100%"
+          height="100%"
+          isGrown={false}
+          animation={FLAT_ANIMATION}
+          highlightLayers={layers}
+          defaultBuildingColor={NEUTRAL_BUILDING}
+          isolationMode="none"
+          backgroundColor="#0f1419"
+          showControls={true}
+        />
+      </Stage>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 4. Same buildings as #1 but in 3D (grown). If borders show colored here
+//    but black in #1, the issue is specific to flat mode.
+// ---------------------------------------------------------------------------
+export const BorderOnly_Grown: StoryObj = {
+  name: '4. border only, 3D grown',
+  render: () => {
+    const layers: HighlightLayer[] = [
+      {
+        id: 'red',
+        name: 'red',
+        enabled: true,
+        color: RED,
+        priority: 10,
+        borderWidth: 30,
+        items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'amber',
+        name: 'amber',
+        enabled: true,
+        color: AMBER,
+        priority: 11,
+        borderWidth: 30,
+        items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'green',
+        name: 'green',
+        enabled: true,
+        color: GREEN,
+        priority: 12,
+        borderWidth: 30,
+        items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
+      },
+    ];
+    return (
+      <Stage>
+        <FileCity3D
+          cityData={cityData}
+          width="100%"
+          height="100%"
+          isGrown={true}
+          animation={{ ...FLAT_ANIMATION, autoStartDelay: 0 }}
+          highlightLayers={layers}
+          defaultBuildingColor={NEUTRAL_BUILDING}
+          isolationMode="none"
+          backgroundColor="#0f1419"
+          showControls={true}
+        />
+      </Stage>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// 5. Sweep of borderWidths. Are any of them visible in flat mode?
+// ---------------------------------------------------------------------------
+export const BorderWidthSweep: StoryObj = {
+  name: '5. borderWidth sweep (4, 30, 100)',
+  render: () => {
+    const layers: HighlightLayer[] = [
+      {
+        id: 'bw-4',
+        name: 'bw 4',
+        enabled: true,
+        color: RED,
+        priority: 10,
+        borderWidth: 4,
+        items: [{ path: TARGETS.ts, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'bw-30',
+        name: 'bw 30',
+        enabled: true,
+        color: AMBER,
+        priority: 11,
+        borderWidth: 30,
+        items: [{ path: TARGETS.tsx, type: 'file', renderStrategy: 'border' }],
+      },
+      {
+        id: 'bw-100',
+        name: 'bw 100',
+        enabled: true,
+        color: GREEN,
+        priority: 12,
+        borderWidth: 100,
+        items: [{ path: TARGETS.route, type: 'file', renderStrategy: 'border' }],
+      },
+    ];
+    return (
+      <Stage>
+        <FileCity3D
+          cityData={cityData}
+          width="100%"
+          height="100%"
+          isGrown={false}
+          animation={FLAT_ANIMATION}
+          highlightLayers={layers}
+          defaultBuildingColor={NEUTRAL_BUILDING}
+          isolationMode="none"
+          backgroundColor="#0f1419"
+          showControls={true}
+        />
+      </Stage>
+    );
+  },
+};