@principal-ai/file-city-react 0.5.41 → 0.5.43

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,