@omiron33/omi-neuron-web 0.2.1 → 0.2.13

package/README.md

@@ -656,6 +656,7 @@ export interface NeuronWebProps {
   error?: string | null;
   selectedNode?: NeuronNode | null;
   focusNodeSlug?: string | null;
+  onFocusConsumed?: () => void;
   visibleNodeSlugs?: string[] | null;
   onNodeClick?: (node: NeuronNode) => void;
   onNodeDoubleClick?: (node: NeuronNode) => void;
@@ -668,6 +669,9 @@ export interface NeuronWebProps {
   onStudyPathComplete?: () => void;
   layout?: NeuronLayoutOptions;
   cameraFit?: CameraFitOptions;
+  cardsMode?: CardsMode;
+  clickCard?: ClickCardOptions;
+  clickZoom?: ClickZoomOptions;
   theme?: NeuronWebThemeOverride;
   domainColors?: Record<string, string>;
   renderNodeHover?: (node: NeuronVisualNode) => React.ReactNode;
@@ -682,9 +686,9 @@ export interface NeuronWebProps {
 
 Props currently used inside `NeuronWeb` (others are reserved for future use):
 
-- Used: `graphData`, `className`, `style`, `fullHeight`, `isFullScreen`, `isLoading`, `error`, `renderEmptyState`, `renderLoadingState`, `ariaLabel`, `theme`, `layout`, `renderNodeHover`, `hoverCard`, `onNodeHover`, `onNodeClick`, `onNodeDoubleClick`, `onNodeFocused`, `onBackgroundClick`, `performanceMode`.
+- Used: `graphData`, `className`, `style`, `fullHeight`, `isFullScreen`, `isLoading`, `error`, `renderEmptyState`, `renderLoadingState`, `ariaLabel`, `theme`, `layout`, `renderNodeHover`, `renderNodeDetail`, `hoverCard`, `clickCard`, `clickZoom`, `cardsMode`, `onNodeHover`, `onNodeClick`, `onNodeDoubleClick`, `onNodeFocused`, `onBackgroundClick`, `performanceMode`, `focusNodeSlug`, `onFocusConsumed`, `visibleNodeSlugs`.
 - Used: `cameraFit` (auto-fit bounds to a viewport fraction).
-- Reserved (declared but not used in the component yet): `selectedNode`, `focusNodeSlug`, `visibleNodeSlugs`, `onEdgeClick`, `onCameraChange`, `studyPathRequest`, `onStudyPathComplete`, `domainColors`, `renderNodeDetail`, `graphData.storyBeats`.
+- Reserved (declared but not used in the component yet): `selectedNode`, `onEdgeClick`, `onCameraChange`, `studyPathRequest`, `onStudyPathComplete`, `domainColors`, `graphData.storyBeats`.
 
 ### Layout modes
 
@@ -730,6 +734,85 @@ When `isFullScreen` is true and `cameraFit.enabled` is not specified, auto-fit i
 />
 ```
 
+### Programmatic focus (focusNodeSlug)
+
+Use `focusNodeSlug` to drive selection + camera focus from outside the component
+(mirrors Technochristian’s “focus a node when something else happens” behavior).
+
+Behavior:
+- Looks up by **slug**, with **id fallback**.
+- Sets selection, pulses the node, and emphasizes connected edges.
+- If `clickZoom.enabled` is true (default), the camera tween runs.
+- Fires `onNodeFocused(node)` after the focus tween.
+- Calls `onFocusConsumed()` so the parent can clear the request.
+
+```tsx
+<NeuronWeb
+  graphData={graphData}
+  focusNodeSlug={focusSlug}
+  onFocusConsumed={() => setFocusSlug(null)}
+  onNodeFocused={(node) => console.log('focused', node.slug)}
+  clickZoom={{ enabled: true }}
+/>
+```
+
+### Filtered views (visibleNodeSlugs)
+
+`visibleNodeSlugs` limits the graph to a subset of nodes (and their edges).
+This is the mechanism Technochristian uses for filtered views and decluttering.
+
+Semantics:
+- `null` or `undefined` → show **all** nodes/edges.
+- `[]` (empty array) → show **none**.
+- Filters nodes by **slug or id**; edges are kept only if **both endpoints** are visible.
+- `storyBeats` (if present) are filtered to beats with ≥ 2 visible nodeIds.
+- A subtle fade/scale/blur transition is applied on each filter change.
+- If the currently selected node disappears, selection is cleared.
+
+```tsx
+// Show only a curated slice
+<NeuronWeb
+  graphData={graphData}
+  visibleNodeSlugs={['uap', 'neph', 'jude6']}
+/>;
+
+// Show everything (default)
+<NeuronWeb graphData={graphData} visibleNodeSlugs={null} />;
+
+// Hide everything
+<NeuronWeb graphData={graphData} visibleNodeSlugs={[]} />;
+```
+
+### Click cards + click zoom
+
+Enable a persistent card on click and optional zoom-to-node behavior:
+
+```tsx
+<NeuronWeb
+  graphData={graphData}
+  clickCard={{ enabled: true, width: 320, offset: [24, 24] }}
+  clickZoom={{ enabled: true }}
+/>
+```
+
+### Card mode (global override)
+
+`cardsMode` lets you force card behavior irrespective of `hoverCard.enabled` or `clickCard.enabled`
+(when `cardsMode` is set, it wins).
+
+```tsx
+<NeuronWeb graphData={graphData} cardsMode="none" />
+<NeuronWeb graphData={graphData} cardsMode="hover" />
+<NeuronWeb graphData={graphData} cardsMode="click" />
+<NeuronWeb graphData={graphData} cardsMode="both" />
+```
+
+Disable click cards or zoom:
+
+```tsx
+<NeuronWeb graphData={graphData} clickCard={{ enabled: false }} clickZoom={{ enabled: false }} />
+```
+
 To disable in fullscreen:
 
 ```tsx
@@ -814,6 +897,24 @@ pnpm lint
 pnpm test
 ```
 
+## Release via tags (automation)
+
+This repo publishes on **tag push**. The tag version is authoritative and must be a **patch bump**.
+
+Workflow:
+- Create and push `vX.Y.Z` (same major/minor as `package.json`, patch +1).
+- GitHub Actions updates `package.json` + `src/index.ts`, commits to `main`, builds, and publishes.
+
+Helper skill (repo-local):
+
+```bash
+skills/tagged-npm-release/scripts/create_patch_tag.sh
+```
+
+Authentication:
+- **Preferred**: npm **Trusted Publishing** (OIDC). Configure the GitHub repo/workflow in npm package settings. No secret required.
+- **Legacy fallback**: set `NPM_TOKEN` in GitHub repo secrets and remove `--provenance` from the workflow.
+
 ## License
 
 MIT

package/dist/{NeuronWeb-DjG5-nih.d.ts → NeuronWeb-CZgKU1-X.d.ts}

@@ -74,6 +74,15 @@ interface HoverCardOptions {
     width?: number;
     offset?: [number, number];
 }
+interface ClickCardOptions {
+    enabled?: boolean;
+    width?: number;
+    offset?: [number, number];
+}
+interface ClickZoomOptions {
+    enabled?: boolean;
+}
+type CardsMode = 'none' | 'hover' | 'click' | 'both';
 interface CameraFitOptions {
     /** Enable auto-fitting camera to node bounds */
     enabled?: boolean;
@@ -97,7 +106,11 @@ interface NeuronWebProps {
     isLoading?: boolean;
     error?: string | null;
     selectedNode?: NeuronNode | null;
+    /** Programmatically focus/select a node by slug (or id fallback). */
     focusNodeSlug?: string | null;
+    /** Called after a focusNodeSlug request is processed. */
+    onFocusConsumed?: () => void;
+    /** Limit the rendered graph to these node slugs/ids; null shows all, empty array shows none. */
     visibleNodeSlugs?: string[] | null;
     onNodeClick?: (node: NeuronNode) => void;
     onNodeDoubleClick?: (node: NeuronNode) => void;
@@ -110,6 +123,9 @@ interface NeuronWebProps {
     onStudyPathComplete?: () => void;
     layout?: NeuronLayoutOptions;
     cameraFit?: CameraFitOptions;
+    cardsMode?: CardsMode;
+    clickCard?: ClickCardOptions;
+    clickZoom?: ClickZoomOptions;
     theme?: NeuronWebThemeOverride;
     domainColors?: Record<string, string>;
     renderNodeHover?: (node: NeuronVisualNode) => React__default.ReactNode;
@@ -121,6 +137,6 @@ interface NeuronWebProps {
     ariaLabel?: string;
 }
 
-declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, renderEmptyState, renderLoadingState, ariaLabel, theme, layout, cameraFit, renderNodeHover, hoverCard, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onBackgroundClick, performanceMode, }: NeuronWebProps): React__default.ReactElement;
+declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, layout, cameraFit, cardsMode, clickCard, clickZoom, renderNodeHover, renderNodeDetail, hoverCard, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onBackgroundClick, performanceMode, }: NeuronWebProps): React__default.ReactElement;
 
-export { type CameraFitOptions as C, type HoverCardOptions as H, type NeuronWebTheme as N, type NeuronWebThemeOverride as a, type NeuronLayoutOptions as b, NeuronWeb as c, type NeuronWebProps as d, type NeuronLayoutMode as e };
+export { type CameraFitOptions as C, type HoverCardOptions as H, type NeuronWebTheme as N, type NeuronWebThemeOverride as a, type NeuronLayoutOptions as b, NeuronWeb as c, type NeuronWebProps as d, type NeuronLayoutMode as e, type ClickCardOptions as f, type ClickZoomOptions as g, type CardsMode as h };

package/dist/{NeuronWeb-Dy6c4vfH.d.cts → NeuronWeb-JVrxQksC.d.cts}

@@ -74,6 +74,15 @@ interface HoverCardOptions {
     width?: number;
     offset?: [number, number];
 }
+interface ClickCardOptions {
+    enabled?: boolean;
+    width?: number;
+    offset?: [number, number];
+}
+interface ClickZoomOptions {
+    enabled?: boolean;
+}
+type CardsMode = 'none' | 'hover' | 'click' | 'both';
 interface CameraFitOptions {
     /** Enable auto-fitting camera to node bounds */
     enabled?: boolean;
@@ -97,7 +106,11 @@ interface NeuronWebProps {
     isLoading?: boolean;
     error?: string | null;
     selectedNode?: NeuronNode | null;
+    /** Programmatically focus/select a node by slug (or id fallback). */
     focusNodeSlug?: string | null;
+    /** Called after a focusNodeSlug request is processed. */
+    onFocusConsumed?: () => void;
+    /** Limit the rendered graph to these node slugs/ids; null shows all, empty array shows none. */
     visibleNodeSlugs?: string[] | null;
     onNodeClick?: (node: NeuronNode) => void;
     onNodeDoubleClick?: (node: NeuronNode) => void;
@@ -110,6 +123,9 @@ interface NeuronWebProps {
     onStudyPathComplete?: () => void;
     layout?: NeuronLayoutOptions;
     cameraFit?: CameraFitOptions;
+    cardsMode?: CardsMode;
+    clickCard?: ClickCardOptions;
+    clickZoom?: ClickZoomOptions;
     theme?: NeuronWebThemeOverride;
     domainColors?: Record<string, string>;
     renderNodeHover?: (node: NeuronVisualNode) => React__default.ReactNode;
@@ -121,6 +137,6 @@ interface NeuronWebProps {
     ariaLabel?: string;
 }
 
-declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, renderEmptyState, renderLoadingState, ariaLabel, theme, layout, cameraFit, renderNodeHover, hoverCard, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onBackgroundClick, performanceMode, }: NeuronWebProps): React__default.ReactElement;
+declare function NeuronWeb({ graphData, className, style, fullHeight, isFullScreen, isLoading, error, focusNodeSlug, onFocusConsumed, visibleNodeSlugs, renderEmptyState, renderLoadingState, ariaLabel, theme, layout, cameraFit, cardsMode, clickCard, clickZoom, renderNodeHover, renderNodeDetail, hoverCard, onNodeHover, onNodeClick, onNodeDoubleClick, onNodeFocused, onBackgroundClick, performanceMode, }: NeuronWebProps): React__default.ReactElement;
 
-export { type CameraFitOptions as C, type HoverCardOptions as H, type NeuronWebTheme as N, type NeuronWebThemeOverride as a, type NeuronLayoutOptions as b, NeuronWeb as c, type NeuronWebProps as d, type NeuronLayoutMode as e };
+export { type CameraFitOptions as C, type HoverCardOptions as H, type NeuronWebTheme as N, type NeuronWebThemeOverride as a, type NeuronLayoutOptions as b, NeuronWeb as c, type NeuronWebProps as d, type NeuronLayoutMode as e, type ClickCardOptions as f, type ClickZoomOptions as g, type CardsMode as h };

package/dist/{chunk-GGFSQOFW.cjs → chunk-AU557QID.cjs}

@@ -1049,13 +1049,20 @@ function NeuronWeb({
   isFullScreen,
   isLoading,
   error,
+  focusNodeSlug,
+  onFocusConsumed,
+  visibleNodeSlugs,
   renderEmptyState,
   renderLoadingState,
   ariaLabel,
   theme,
   layout,
   cameraFit,
+  cardsMode,
+  clickCard,
+  clickZoom,
   renderNodeHover,
+  renderNodeDetail,
   hoverCard,
   onNodeHover,
   onNodeClick,
@@ -1066,9 +1073,34 @@ function NeuronWeb({
 }) {
   const containerRef = react.useRef(null);
   const hoverCardRef = react.useRef(null);
+  const clickCardRef = react.useRef(null);
   const [hoveredNodeId, setHoveredNodeId] = react.useState(null);
   const [selectedNodeId, setSelectedNodeId] = react.useState(null);
   const fitStateRef = react.useRef({ hasFit: false, signature: "" });
+  const firstFilterChangeRef = react.useRef(true);
+  const [filterTransitioning, setFilterTransitioning] = react.useState(false);
+  const filteredGraphData = react.useMemo(() => {
+    if (visibleNodeSlugs === null || visibleNodeSlugs === void 0) {
+      return graphData;
+    }
+    const allowed = new Set(visibleNodeSlugs);
+    const filteredNodes = graphData.nodes.filter(
+      (node) => allowed.has(node.slug) || allowed.has(node.id)
+    );
+    const filteredEdges = graphData.edges.filter(
+      (edge) => allowed.has(edge.from) && allowed.has(edge.to)
+    );
+    const filteredStoryBeats = graphData.storyBeats?.map((beat) => ({
+      ...beat,
+      nodeIds: beat.nodeIds.filter((id) => allowed.has(id))
+    })).filter((beat) => beat.nodeIds.length >= 2);
+    return {
+      ...graphData,
+      nodes: filteredNodes,
+      edges: filteredEdges,
+      storyBeats: filteredStoryBeats
+    };
+  }, [graphData, visibleNodeSlugs]);
   const resolvedTheme = react.useMemo(
     () => ({
       ...DEFAULT_THEME,
@@ -1079,13 +1111,27 @@ function NeuronWeb({
     }),
     [theme]
   );
+  const filterSignature = react.useMemo(() => {
+    if (visibleNodeSlugs === null || visibleNodeSlugs === void 0) return "all";
+    return visibleNodeSlugs.length ? visibleNodeSlugs.join("|") : "none";
+  }, [visibleNodeSlugs]);
+  react.useEffect(() => {
+    if (firstFilterChangeRef.current) {
+      firstFilterChangeRef.current = false;
+      return;
+    }
+    setFilterTransitioning(true);
+    const timer = setTimeout(() => setFilterTransitioning(false), resolvedTheme.animation.transitionDuration);
+    return () => clearTimeout(timer);
+  }, [filterSignature, resolvedTheme.animation.transitionDuration]);
+  const workingGraph = filteredGraphData;
   const resolvedPerformanceMode = react.useMemo(() => {
     if (performanceMode && performanceMode !== "auto") return performanceMode;
-    const count = graphData.nodes.length;
+    const count = workingGraph.nodes.length;
     if (count > 360) return "fallback";
     if (count > 180) return "degraded";
     return "normal";
-  }, [performanceMode, graphData.nodes.length]);
+  }, [performanceMode, workingGraph.nodes.length]);
   const sceneManager = useSceneManager(containerRef, {
     backgroundColor: resolvedTheme.colors.background,
     cameraFov: 52,
@@ -1166,8 +1212,8 @@ function NeuronWeb({
     });
   }, [sceneManager, resolvedTheme]);
   const resolvedNodes = react.useMemo(
-    () => applyFuzzyLayout(graphData.nodes, layout),
-    [graphData.nodes, layout]
+    () => applyFuzzyLayout(workingGraph.nodes, layout),
+    [workingGraph.nodes, layout]
   );
   const resolvedCameraFit = react.useMemo(() => {
     const enabled = cameraFit?.enabled ?? Boolean(isFullScreen);
@@ -1193,7 +1239,7 @@ function NeuronWeb({
   }, [resolvedNodes]);
   const edgesBySlug = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
-    graphData.edges.forEach((edge) => {
+    workingGraph.edges.forEach((edge) => {
       const add = (slug) => {
         const list = map.get(slug);
         if (list) list.push(edge.id);
@@ -1203,11 +1249,23 @@ function NeuronWeb({
       add(edge.to);
     });
     return map;
-  }, [graphData.edges]);
+  }, [workingGraph.edges]);
+  const nodeByIdentifier = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    resolvedNodes.forEach((node) => {
+      map.set(node.slug, node);
+      map.set(node.id, node);
+    });
+    return map;
+  }, [resolvedNodes]);
   const hoveredNode = hoveredNodeId ? nodeMap.get(hoveredNodeId) ?? null : null;
-  const hoverCardEnabled = (hoverCard?.enabled ?? true) && resolvedPerformanceMode !== "fallback";
+  const hoverCardEnabled = (cardsMode ? cardsMode === "hover" || cardsMode === "both" : hoverCard?.enabled ?? true) && resolvedPerformanceMode !== "fallback";
   const hoverCardOffset = hoverCard?.offset ?? [18, 18];
   const hoverCardWidth = hoverCard?.width ?? 240;
+  const clickCardEnabled = (cardsMode ? cardsMode === "click" || cardsMode === "both" : clickCard?.enabled ?? false) && resolvedPerformanceMode !== "fallback";
+  const clickCardOffset = clickCard?.offset ?? [24, 24];
+  const clickCardWidth = clickCard?.width ?? 320;
+  const clickZoomEnabled = clickZoom?.enabled ?? true;
   react.useEffect(() => {
     if (!sceneManager || !nodeRenderer || !edgeRenderer) return;
     nodeRenderer.renderNodes(resolvedNodes);
@@ -1216,8 +1274,8 @@ function NeuronWeb({
       if (!node.position) return;
       positions.set(node.slug, new THREE__namespace.Vector3(...node.position));
     });
-    edgeRenderer.renderEdges(graphData.edges, positions);
-  }, [resolvedNodes, graphData.edges, sceneManager, nodeRenderer, edgeRenderer]);
+    edgeRenderer.renderEdges(workingGraph.edges, positions);
+  }, [resolvedNodes, workingGraph.edges, sceneManager, nodeRenderer, edgeRenderer]);
   react.useEffect(() => {
     if (!sceneManager) return;
     sceneManager.updateBackground(resolvedTheme.colors.background);
@@ -1283,6 +1341,22 @@ function NeuronWeb({
           hoverCardRef.current.style.transform = `translate(${x}px, ${y}px)`;
         }
       }
+      if (clickCardRef.current && selectedNodeId) {
+        const position = nodeRenderer.getNodePosition(selectedNodeId);
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (position && rect) {
+          const screen = sceneManager.worldToScreen(position);
+          const cardWidth = clickCardRef.current.offsetWidth;
+          const cardHeight = clickCardRef.current.offsetHeight;
+          const rawX = screen.x - rect.left + clickCardOffset[0];
+          const rawY = screen.y - rect.top + clickCardOffset[1];
+          const maxX = Math.max(8, rect.width - cardWidth - 8);
+          const maxY = Math.max(8, rect.height - cardHeight - 8);
+          const x = Math.min(Math.max(rawX, 8), maxX);
+          const y = Math.min(Math.max(rawY, 8), maxY);
+          clickCardRef.current.style.transform = `translate(${x}px, ${y}px)`;
+        }
+      }
     });
   }, [
     sceneManager,
@@ -1290,12 +1364,64 @@ function NeuronWeb({
     edgeRenderer,
     animationController,
     hoveredNodeId,
-    hoverCardOffset
+    hoverCardOffset,
+    selectedNodeId,
+    clickCardOffset
   ]);
   react.useEffect(() => {
     if (!interactionManager || !nodeRenderer) return;
     interactionManager.setTargets(nodeRenderer.getNodeObjects(), nodeMap);
   }, [interactionManager, nodeRenderer, nodeMap]);
+  react.useEffect(() => {
+    if (!nodeRenderer) return;
+    if (hoveredNodeId && !nodeMap.has(hoveredNodeId)) {
+      setHoveredNodeId(null);
+      nodeRenderer.setHoveredNode(null);
+    }
+  }, [hoveredNodeId, nodeMap, nodeRenderer]);
+  react.useEffect(() => {
+    if (!nodeRenderer || !edgeRenderer) return;
+    if (selectedNodeId && !nodeMap.has(selectedNodeId)) {
+      setSelectedNodeId(null);
+      nodeRenderer.setSelectedNode(null);
+      edgeRenderer.setFocusEdges(null);
+    }
+  }, [selectedNodeId, nodeMap, nodeRenderer, edgeRenderer]);
+  react.useEffect(() => {
+    if (!focusNodeSlug || !nodeRenderer || !edgeRenderer) return;
+    const node = nodeByIdentifier.get(focusNodeSlug);
+    if (!node) {
+      onFocusConsumed?.();
+      return;
+    }
+    setSelectedNodeId(node.id);
+    nodeRenderer.setSelectedNode(node.id);
+    nodeRenderer.pulseNode(node.id);
+    edgeRenderer.setFocusEdges(node.slug ? edgesBySlug.get(node.slug) ?? [] : []);
+    if (clickZoomEnabled) {
+      const nodePosition = nodeRenderer.getNodePosition(node.id);
+      if (nodePosition) {
+        animationController?.focusOnNode(nodePosition, () => {
+          if (onNodeFocused) onNodeFocused(node);
+        });
+      } else if (onNodeFocused) {
+        onNodeFocused(node);
+      }
+    } else if (onNodeFocused) {
+      onNodeFocused(node);
+    }
+    onFocusConsumed?.();
+  }, [
+    focusNodeSlug,
+    nodeByIdentifier,
+    nodeRenderer,
+    edgeRenderer,
+    edgesBySlug,
+    clickZoomEnabled,
+    animationController,
+    onNodeFocused,
+    onFocusConsumed
+  ]);
   react.useEffect(() => {
     if (!interactionManager || !nodeRenderer || !edgeRenderer) return;
     interactionManager.onNodeHover = (node) => {
@@ -1321,6 +1447,14 @@ function NeuronWeb({
       setSelectedNodeId(node.id);
       nodeRenderer.setSelectedNode(node.id);
       nodeRenderer.pulseNode(node.id);
+      if (clickZoomEnabled) {
+        const nodePosition = nodeRenderer.getNodePosition(node.id);
+        if (nodePosition) {
+          animationController?.focusOnNode(nodePosition, () => {
+            if (onNodeFocused) onNodeFocused(node);
+          });
+        }
+      }
       const slug = nodeSlugById.get(node.id);
       edgeRenderer.setFocusEdges(slug ? edgesBySlug.get(slug) ?? [] : []);
       if (onNodeClick) {
@@ -1355,6 +1489,7 @@ function NeuronWeb({
     animationController,
     hoveredNodeId,
     selectedNodeId,
+    clickZoomEnabled,
     onNodeHover,
     onNodeClick,
     onNodeDoubleClick,
@@ -1385,6 +1520,27 @@ function NeuronWeb({
   if (!resolvedNodes.length) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, "aria-label": ariaLabel, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No data" }) });
   }
+  const sceneTransitionStyle = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    transition: `opacity ${resolvedTheme.animation.transitionDuration}ms ease, transform ${resolvedTheme.animation.transitionDuration}ms ease, filter ${resolvedTheme.animation.transitionDuration}ms ease`,
+    opacity: filterTransitioning ? 0.85 : 1,
+    transform: filterTransitioning ? "scale(0.985)" : "scale(1)",
+    filter: filterTransitioning ? "blur(1px)" : "blur(0px)",
+    transformOrigin: "center",
+    willChange: "transform, filter, opacity"
+  };
+  const filterOverlayStyle = {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    background: "radial-gradient(circle at 50% 35%, rgba(255,255,255,0.35), transparent 60%)",
+    opacity: filterTransitioning ? 1 : 0,
+    transition: `opacity ${resolvedTheme.animation.transitionDuration}ms ease`,
+    zIndex: 2
+  };
   const resolvedStyle = {
     position: isFullScreen ? "fixed" : "relative",
     inset: isFullScreen ? 0 : void 0,
@@ -1406,9 +1562,10 @@ function NeuronWeb({
           "div",
           {
             ref: containerRef,
-            style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
+            style: sceneTransitionStyle
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: filterOverlayStyle }),
         hoverCardEnabled && hoveredNode && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1435,6 +1592,33 @@ function NeuronWeb({
               /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.75 }, children: typeof hoveredNode.metadata?.summary === "string" ? hoveredNode.metadata.summary : "Click to focus this node and explore connections." })
             ] })
           }
+        ),
+        clickCardEnabled && selectedNodeId && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: clickCardRef,
+            style: {
+              position: "absolute",
+              width: clickCardWidth,
+              pointerEvents: "auto",
+              padding: "14px 16px",
+              borderRadius: 14,
+              background: "linear-gradient(140deg, rgba(10, 14, 32, 0.98) 0%, rgba(20, 26, 58, 0.94) 100%)",
+              border: "1px solid rgba(140, 170, 255, 0.4)",
+              boxShadow: "0 22px 60px rgba(5, 10, 30, 0.6)",
+              color: resolvedTheme.colors.labelText,
+              fontFamily: resolvedTheme.typography.labelFontFamily,
+              fontSize: 13,
+              zIndex: 5,
+              opacity: 0.98,
+              transition: `opacity ${resolvedTheme.animation.hoverCardFadeDuration}ms ease`,
+              transform: `translate(${clickCardOffset[0]}px, ${clickCardOffset[1]}px)`
+            },
+            children: renderNodeDetail ? renderNodeDetail(nodeMap.get(selectedNodeId)) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 14, fontWeight: 600, marginBottom: 8 }, children: nodeMap.get(selectedNodeId)?.label ?? "Selected node" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { opacity: 0.75 }, children: typeof nodeMap.get(selectedNodeId)?.metadata?.summary === "string" ? nodeMap.get(selectedNodeId)?.metadata?.summary : "Click another node to explore more details." })
+            ] })
+          }
         )
       ]
     }
@@ -1511,5 +1695,5 @@ exports.NeuronWeb = NeuronWeb;
 exports.SceneManager = SceneManager;
 exports.ThemeEngine = ThemeEngine;
 exports.applyFuzzyLayout = applyFuzzyLayout;
-//# sourceMappingURL=chunk-GGFSQOFW.cjs.map
-//# sourceMappingURL=chunk-GGFSQOFW.cjs.map
+//# sourceMappingURL=chunk-AU557QID.cjs.map
+//# sourceMappingURL=chunk-AU557QID.cjs.map