pmx-canvas 0.8.2 → 0.9.0

package/src/client/canvas/MemoryInspector.tsx

@@ -0,0 +1,104 @@
+import type { ComponentChildren } from 'preact';
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+/** Shared docking only. Map and Graph own their selection and actions. */
+export function MemoryInspector({
+  children,
+  initiallyCollapsed = false,
+  reveal = 0,
+}: {
+  children: ComponentChildren;
+  initiallyCollapsed?: boolean;
+  reveal?: number;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(280);
+  const [max, setMax] = useState(400);
+  const [collapsed, setCollapsed] = useState(initiallyCollapsed);
+  const drag = useRef<{ id: number; y: number; height: number } | null>(null);
+  useLayoutEffect(() => {
+    if (reveal) setCollapsed(false);
+  }, [reveal]);
+  useLayoutEffect(() => {
+    const view = root.current!.closest<HTMLElement>('.home-memory')!;
+    const stage = view.querySelector<HTMLElement>('.home-memory-stage')!;
+    const region = view.closest<HTMLElement>('.canvas-region');
+    const toolbar = view.querySelector<HTMLElement>('.home-memory-toolbar')!;
+    const legend = view.querySelector<HTMLElement>('.home-memory-legend')!;
+    const measure = () => {
+      region?.style.setProperty(
+        '--home-memory-content-top',
+        `${stage.getBoundingClientRect().top - (region?.getBoundingClientRect().top ?? 0)}px`,
+      );
+      setMax(Math.max(120, view.clientHeight - toolbar.offsetHeight - legend.offsetHeight - 160));
+    };
+    const observer = new ResizeObserver(measure);
+    for (const element of [view, stage, toolbar, legend]) observer.observe(element);
+    measure();
+    return () => {
+      observer.disconnect();
+      region?.style.removeProperty('--home-memory-content-top');
+    };
+  }, []);
+  return (
+    <div
+      ref={root}
+      class={`home-memory-inspector${collapsed ? ' is-collapsed' : ''}`}
+      style={collapsed ? undefined : { height: Math.min(height, max) }}
+    >
+      {!collapsed && (
+        <div
+          class="home-memory-inspector-resize"
+          role="separator"
+          tabIndex={0}
+          aria-label="Resize relation details"
+          aria-orientation="horizontal"
+          aria-controls="home-memory-details"
+          aria-valuemin={120}
+          aria-valuemax={max}
+          aria-valuenow={Math.min(height, max)}
+          onKeyDown={(event) => {
+            if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;
+            event.preventDefault();
+            setHeight(
+              event.key === 'Home'
+                ? 120
+                : event.key === 'End'
+                  ? max
+                  : Math.max(120, Math.min(max, Math.min(height, max) + (event.key === 'ArrowUp' ? 32 : -32))),
+            );
+          }}
+          onPointerDown={(event) => {
+            if (event.button !== 0) return;
+            event.preventDefault();
+            drag.current = { id: event.pointerId, y: event.clientY, height: Math.min(height, max) };
+            event.currentTarget.focus({ preventScroll: true });
+            event.currentTarget.setPointerCapture(event.pointerId);
+          }}
+          onPointerMove={(event) => {
+            const start = drag.current;
+            if (start?.id === event.pointerId)
+              setHeight(Math.max(120, Math.min(max, start.height + start.y - event.clientY)));
+          }}
+          onPointerUp={() => {
+            drag.current = null;
+          }}
+          onPointerCancel={() => {
+            if (drag.current) setHeight(drag.current.height);
+            drag.current = null;
+          }}
+        />
+      )}
+      <button
+        type="button"
+        class="home-button home-memory-inspector-toggle"
+        aria-expanded={!collapsed}
+        aria-controls="home-memory-details"
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        {collapsed ? 'Expand details' : 'Collapse details'}
+      </button>
+      <div id="home-memory-details">{children}</div>
+    </div>
+  );
+}

package/src/client/canvas/Minimap.tsx

@@ -6,7 +6,7 @@ import {
   agentPresences,
   mutatingNodeIds,
   presenceWorldPosition,
-  sessionActive,
+  sessionChromeActive,
   writerColor,
 } from '../state/presence-store';
 import { scopeFence } from '../state/session-store';
@@ -146,7 +146,7 @@ export function Minimap({ viewport, nodes, onNavigate, containerWidth, container
 
   const selected = selectedNodeIds.value;
   const pinned = contextPinnedNodeIds.value;
-  const agentAtWork = sessionActive.value ? mutatingNodeIds.value : new Set<string>();
+  const agentAtWork = sessionChromeActive.value ? mutatingNodeIds.value : new Set<string>();
   const fence = scopeFence.value;
   const fenceRect = fence
     ? fenceRectFromNodes(
@@ -175,7 +175,7 @@ export function Minimap({ viewport, nodes, onNavigate, containerWidth, container
       ref={mapRef}
       class="minimap"
       data-testid="minimap"
-      title="Click to jump · drag the frame to pan"
+      aria-label="Minimap — click to jump, drag the frame to pan"
       onPointerDown={handlePointerDown}
     >
       {Array.from(nodeMap.values()).map((node) => {

package/src/client/canvas/NearPinLayer.tsx

@@ -0,0 +1,187 @@
+import { gapDistance } from '../../server/spatial-analysis.js';
+import { nodes, toggleContextPin, viewport } from '../state/canvas-store';
+import {
+  closeNearCardSoon,
+  keepNearCard,
+  nearCard,
+  nearPins,
+  neighboursByPin,
+  shownPinsFor,
+  tetherFocus,
+} from '../state/near-pin-store';
+import type { CanvasNodeState } from '../types';
+import { viewKey } from './NodeContextMark';
+
+/** The brief's "near" edge gap (findNeighborhoods), in world px. */
+const NEAR_RADIUS = 600;
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+/** Where the segment from `from` to the box's centre crosses the box's edge. */
+function edgePoint(from: Point, box: { left: number; top: number; width: number; height: number }): Point {
+  const to = { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+  const dx = from.x - to.x;
+  const dy = from.y - to.y;
+  const t = Math.min(
+    dx === 0 ? Number.POSITIVE_INFINITY : box.width / 2 / Math.abs(dx),
+    dy === 0 ? Number.POSITIVE_INFINITY : box.height / 2 / Math.abs(dy),
+  );
+  return t >= 1 ? to : { x: to.x + dx * t, y: to.y + dy * t };
+}
+
+/**
+ * Which pin? (docs/design/NearPin.dc.html §2): for a hovered, selected or
+ * dragged pin — or the pins a near chip asked to show — dotted tethers to its
+ * neighbours, numbered nearest first, and an unlabeled boundary only when
+ * another node is within range. Drawn in screen
+ * space (architecture rule 9) so they stay legible at fit zoom; while an
+ * unpinned node is dragged only the nearest pin's boundary shows (§3).
+ */
+export function NearPinLayer() {
+  const focus = tetherFocus.value;
+  if (focus.pinIds.length === 0) return null;
+  const v = viewport.value;
+  const all = nodes.value;
+  const byPin = neighboursByPin.value;
+  const toScreen = (x: number, y: number): Point => ({ x: x * v.scale + v.x, y: y * v.scale + v.y });
+
+  return (
+    <svg class="near-pin-layer" aria-hidden="true">
+      {focus.pinIds.map((pinId) => {
+        const pin = all.get(pinId);
+        if (!pin) return null;
+        if (![...all.values()].some((node) => node.id !== pinId && gapDistance(node, pin) <= NEAR_RADIUS)) {
+          return null;
+        }
+        const pinTopLeft = toScreen(pin.position.x, pin.position.y);
+        const pinBox = {
+          left: pinTopLeft.x,
+          top: pinTopLeft.y,
+          width: pin.size.width * v.scale,
+          height: pin.size.height * v.scale,
+        };
+        const c = { x: pinBox.left + pinBox.width / 2, y: pinBox.top + pinBox.height / 2 };
+        const r = NEAR_RADIUS * v.scale;
+        const neighbours = focus.ringOnly
+          ? []
+          : (byPin.get(pinId) ?? [])
+              .map((id) => all.get(id))
+              .filter((node): node is CanvasNodeState => node !== undefined)
+              .sort((a, b) => gapDistance(a, pin) - gapDistance(b, pin));
+        return (
+          <g key={pinId} data-pin-id={pinId}>
+            <rect
+              class="near-pin-radius"
+              x={pinBox.left - r}
+              y={pinBox.top - r}
+              width={pinBox.width + 2 * r}
+              height={pinBox.height + 2 * r}
+              rx={r}
+            />
+            {neighbours.map((node, index) => {
+              const topLeft = toScreen(node.position.x, node.position.y);
+              const box = {
+                left: topLeft.x,
+                top: topLeft.y,
+                width: node.size.width * v.scale,
+                height: node.size.height * v.scale,
+              };
+              // Edge to edge: the line never crosses either card's content.
+              const end = edgePoint(c, box);
+              const start = edgePoint({ x: box.left + box.width / 2, y: box.top + box.height / 2 }, pinBox);
+              return (
+                <g key={node.id} class="near-pin-tether" data-near-node={node.id}>
+                  <path d={`M ${start.x} ${start.y} L ${end.x} ${end.y}`} />
+                  <circle class="near-pin-number" cx={end.x} cy={end.y} r={10} />
+                  <text class="near-pin-number-label" x={end.x} y={end.y}>
+                    {index + 1}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+
+/**
+ * Hover a near chip (docs/design/NearPin.dc.html §2): which pins, how far, and
+ * the two ways on — pin it to put it first, or show the pins' tethers.
+ */
+export function NearPinCard() {
+  const card = nearCard.value;
+  if (!card || card.view !== viewKey()) return null;
+  const node = nodes.value.get(card.nodeId);
+  const near = nearPins.value.get(card.nodeId);
+  if (!node || !near) return null;
+  const showing = shownPinsFor.value === node.id;
+  const left = Math.max(8, Math.min(card.at.right - 240, window.innerWidth - 248));
+  // Opens below the chip, or above it when the chip sits in the lower half; scrolls if still too tall.
+  const below = card.at.bottom < window.innerHeight / 2;
+  const room = below ? window.innerHeight - card.at.bottom - 16 : card.at.top - 16;
+  return (
+    <div
+      class="near-hint"
+      role="dialog"
+      aria-label={near.length > 1 ? `Near ${near.length} pins` : 'Near a pin'}
+      style={{
+        left: `${left}px`,
+        maxHeight: `${Math.max(120, room)}px`,
+        ...(below ? { top: `${card.at.bottom + 8}px` } : { bottom: `${window.innerHeight - card.at.top + 8}px` }),
+      }}
+      onPointerEnter={keepNearCard}
+      onPointerLeave={closeNearCardSoon}
+      onFocusIn={keepNearCard}
+      onFocusOut={closeNearCardSoon}
+      onPointerDown={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape') return;
+        event.stopPropagation();
+        nearCard.value = null;
+        document.querySelector<HTMLElement>(`[data-node-id="${CSS.escape(node.id)}"] .node-near-mark`)?.focus();
+      }}
+    >
+      <span class="near-hint-label">{near.length > 1 ? `Near ${near.length} pins` : 'Near a pin'}</span>
+      {near.map((pin) => {
+        const pinNode = nodes.value.get(pin.pinNodeId);
+        return (
+          <span key={pin.pinNodeId} class="near-hint-row">
+            <span class="near-hint-title">{pin.pinTitle}</span>
+            {pinNode && <span class="near-hint-distance">{Math.round(gapDistance(node, pinNode))} px</span>}
+          </span>
+        );
+      })}
+      <span class="near-hint-body">
+        Distance is measured between card edges. The agent gets its title and a short summary because a pin is nearby.
+        Pin it to put it first.
+      </span>
+      <span class="near-hint-actions">
+        <button
+          type="button"
+          class="near-hint-pin"
+          onClick={() => {
+            nearCard.value = null;
+            toggleContextPin(node.id);
+          }}
+        >
+          Pin to put it first
+        </button>
+        <button
+          type="button"
+          class="near-hint-show"
+          aria-pressed={showing}
+          onClick={() => {
+            shownPinsFor.value = showing ? null : node.id;
+          }}
+        >
+          {showing ? 'Hide pins' : 'Show pins'}
+        </button>
+      </span>
+    </div>
+  );
+}

package/src/client/canvas/NodeContextMark.tsx

@@ -1,9 +1,16 @@
-import { useState } from 'preact/hooks';
-import { contextPinMeta, pinnedReadState, writerName } from '../state/context-status-store';
-import { centerDistance } from '../../server/spatial-analysis.js';
-import { nodes } from '../state/canvas-store';
-import { nearPins } from '../state/near-pin-store';
-import type { CanvasNodeState } from '../types';
+import type { ComponentChildren } from 'preact';
+import { contextPinMeta, linksChanged, pinnedReadState, writerName } from '../state/context-status-store';
+import { viewport } from '../state/canvas-store';
+import { grabbingNodeId } from '../state/human-store';
+import {
+  clearNearChange,
+  closeNearCardSoon,
+  nearCard,
+  nearChange,
+  nearPins,
+  openNearCard,
+} from '../state/near-pin-store';
+import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { BarHint } from './BarHint';
 
 // Glyphs from docs/design/AgentContext.dc.html (24-unit paths).
@@ -30,75 +37,123 @@ function clock(iso: string): string {
 }
 
 function markFor(node: CanvasNodeState, pinned: boolean): Mark | null {
-  if (pinned) {
-    const pin = contextPinMeta.value[node.id];
-    const pinnedBy =
-      pin?.pinnedBy.actor === 'agent'
-        ? ` Pinned by ${writerName(pin.pinnedBy)}${pin.reason ? `: ${pin.reason}` : ''}.`
-        : '';
-    const state = pinnedReadState(node.id, node.contentRevision ?? 0);
-    if (state.kind === 'not-read') {
-      return {
-        tone: 'muted',
-        glyph: 'eyeOff',
-        word: 'not read',
-        label: 'Not read yet',
-        body: `In context, but no agent has loaded it since it was pinned.${pinnedBy}`,
-      };
-    }
-    if (state.kind === 'changed') {
-      return {
-        tone: 'warn',
-        glyph: 'warn',
-        word: 'changed since read',
-        label: "The agent's copy is out of date",
-        body: `Changed after ${state.by} read it at ${clock(state.at)}.${pinnedBy}`,
-      };
-    }
-    return {
-      tone: 'agent',
-      glyph: 'eye',
-      word: 'read',
-      label: 'Read by the agent',
-      body: `${state.count > 1 ? `Read ${state.count} times · last` : 'Read'} ${clock(state.at)} by ${state.by}.${pinnedBy}`,
-    };
-  }
-  // A person's edit ends the agent's byline (decided 2026-10-05).
-  if (node.lastEditedBy?.actor === 'human') return null;
-  if (node.createdBy?.actor === 'agent') {
-    const name = writerName(node.createdBy);
+  if (!pinned) return null;
+  const pin = contextPinMeta.value[node.id];
+  const pinnedBy =
+    pin?.pinnedBy.actor === 'agent'
+      ? ` Pinned by ${writerName(pin.pinnedBy)}${pin.reason ? `: ${pin.reason}` : ''}.`
+      : '';
+  const state = pinnedReadState(node.id, node.contentRevision ?? 0);
+  if (state.kind === 'not-read') {
     return {
-      tone: 'agent',
-      glyph: 'spark',
-      word: `by ${name}`,
-      label: `Created by ${name}`,
-      body: 'The byline stays until you edit the node.',
+      tone: 'muted',
+      glyph: 'eyeOff',
+      word: 'not read',
+      label: 'Not read yet',
+      body: `In context, but no agent has loaded it since it was pinned.${pinnedBy}`,
     };
   }
-  if (node.lastEditedBy?.actor === 'agent') {
-    const name = writerName(node.lastEditedBy);
+  if (state.kind === 'changed') {
     return {
-      tone: 'agent',
-      glyph: 'pen',
-      word: 'edited',
-      label: `Edited by ${name}`,
-      body: 'The mark stays until you edit the node.',
+      tone: 'warn',
+      glyph: 'warn',
+      word: 'changed',
+      label: "The agent's copy is out of date",
+      body: `Text changed after ${state.by} read it at ${clock(state.at)}${
+        linksChanged(node.id, node.linksRevision ?? 0) ? ' · links changed too' : ''
+      }.${pinnedBy}`,
     };
   }
+  return {
+    tone: 'agent',
+    glyph: 'eye',
+    word: 'read',
+    label: 'Read by the agent',
+    body: `${state.count > 1 ? `Read ${state.count} times · last` : 'Read'} ${clock(state.at)} by ${state.by}.${pinnedBy}`,
+  };
+}
+
+/**
+ * Authorship lives only in the type icon's hint, not a star or state chip.
+ * A person's edit ends the agent byline.
+ */
+export function bylineFor(node: CanvasNodeState): string | null {
+  if (node.lastEditedBy?.actor === 'human') return null;
+  if (node.createdBy?.actor === 'agent') return `Written by ${writerName(node.createdBy)}`;
+  if (node.lastEditedBy?.actor === 'agent') return `Edited by ${writerName(node.lastEditedBy)}`;
   return null;
 }
 
-/** The header chip saying what agents did with this node (one per node; glyph + word). */
-export function NodeContextMark({ node, pinned }: { node: CanvasNodeState; pinned: boolean }) {
+/** How a header chip shows: its word, only its glyph, or folded into the type icon's hint. */
+export type ChipFold = 'word' | 'glyph' | 'hidden';
+
+/**
+ * The one state chip a header carries — near a pin (unpinned) or the read
+ * state (pinned) — with what it says when folded into the icon's hint. Never
+ * other cards' titles: at rest a node must not contain them.
+ */
+export function headerChip(node: CanvasNodeState, pinned: boolean): { amber: boolean; folded: string } | null {
   const mark = markFor(node, pinned);
-  if (!mark) return null;
+  if (mark) return { amber: mark.tone === 'warn', folded: mark.label };
+  const near = pinned ? undefined : nearPins.value.get(node.id);
+  if (near && near.length > 0)
+    return { amber: false, folded: near.length > 1 ? `near ${near.length} pins` : 'near a pin' };
+  return null;
+}
+
+/** A pinned node's read-state chip: glyph + word, or only the glyph when the title needs the room. */
+export function NodeContextMark({
+  node,
+  pinned,
+  fold = 'word',
+}: {
+  node: CanvasNodeState;
+  pinned: boolean;
+  fold?: ChipFold;
+}) {
+  const mark = markFor(node, pinned);
+  // Amber always carries its word (HeaderMarks.dc.html).
+  const shown = mark?.tone === 'warn' ? 'word' : fold;
+  if (!mark || shown === 'hidden') return null;
   return (
-    <BarHint label={mark.label} body={mark.body} align="end" tapToOpen>
-      <span class={`node-context-mark is-${mark.tone}`} data-mark={mark.word}>
+    <BarHint label={mark.label} body={mark.body} align="end" fitWithin=".node-content" tapToOpen>
+      <span
+        class={`node-context-mark is-${mark.tone}${shown === 'glyph' ? ' is-glyph' : ''}`}
+        data-mark={mark.word}
+        aria-label={shown === 'glyph' ? mark.word : undefined}
+      >
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d={GLYPHS[mark.glyph]} />
         </svg>
-        {mark.word}
+        {shown === 'word' && mark.word}
+      </span>
+    </BarHint>
+  );
+}
+
+/**
+ * The type icon's hint holds the full title, the byline and any folded chip.
+ */
+export function NodeTypeIcon({
+  node,
+  pinned,
+  title,
+  fold,
+  children,
+}: {
+  node: CanvasNodeState;
+  pinned: boolean;
+  title: string;
+  fold: ChipFold;
+  children: ComponentChildren;
+}) {
+  const byline = bylineFor(node);
+  const chip = fold === 'hidden' ? headerChip(node, pinned) : null;
+  const body = [byline, chip && !chip.amber ? chip.folded : '', TYPE_LABELS[node.type]].filter(Boolean).join(' · ');
+  return (
+    <BarHint label={title} body={body} align="start" fitWithin=".node-content" tapToOpen>
+      <span class="node-type-icon" data-byline={byline ?? undefined}>
+        {children}
       </span>
     </BarHint>
   );
@@ -112,45 +167,68 @@ export function isAgentPin(nodeId: string): boolean {
 /**
  * Near a pin (docs/design/NearPin.dc.html): a dotted pin-blue chip on an
  * unpinned node the brief carries as title + short summary. Weaker than "in
- * context" on purpose: the agent never gets this node's full content.
+ * context" on purpose: the agent sees it only because a pin is nearby. Hover,
+ * focus or tap opens its card (`NearPinCard`, §2); it previews while dragged,
+ * pulses once on a drop inside and fades on a drop outside (§3).
  */
-export function NearPinMark({ node, pinned }: { node: CanvasNodeState; pinned: boolean }) {
-  // The pins' titles join this node's DOM only while the chip is hovered or
-  // focused: at rest the node must not contain other nodes' titles.
-  const [open, setOpen] = useState(false);
-  const near = pinned ? undefined : nearPins.value.get(node.id);
-  if (!near || near.length === 0) return null;
+export function NearPinMark({
+  node,
+  pinned,
+  fold = 'word',
+}: {
+  node: CanvasNodeState;
+  pinned: boolean;
+  fold?: ChipFold;
+}) {
+  const live = pinned ? undefined : nearPins.value.get(node.id);
+  const change = nearChange.value?.nodeId === node.id ? nearChange.value : null;
+  const fading = !live && !pinned && change?.kind === 'out';
+  const near = live ?? (fading ? change.pins : undefined);
+  if (!near || near.length === 0 || fold === 'hidden') return null;
   const word = near.length > 1 ? `near ${near.length}` : 'near';
-  // Distances change every drag frame; read them only while the hint is open.
-  const where = open
-    ? near
-        .map((pin) => {
-          const pinNode = nodes.value.get(pin.pinNodeId);
-          return pinNode ? `“${pin.pinTitle}” (${Math.round(centerDistance(node, pinNode))} px)` : `“${pin.pinTitle}”`;
-        })
-        .join(', ')
-    : '';
+  const moment = fading
+    ? ' is-fading'
+    : change?.kind === 'in'
+      ? ' is-pulse'
+      : grabbingNodeId.value === node.id
+        ? ' is-preview'
+        : '';
+  const open = (event: Event) => {
+    if (!fading) openNearCard(node.id, event.currentTarget as Element, viewKey());
+  };
   return (
-    <BarHint
-      label={open ? `Near ${where}` : 'Near a pin'}
-      body="The agent gets its title and a short summary, not its full content. Pin it to send its content."
-      align="end"
-      tapToOpen
+    <button
+      type="button"
+      class={`node-near-mark${fold === 'glyph' ? ' is-glyph' : ''}${moment}`}
+      aria-label={fold === 'glyph' ? word : undefined}
+      aria-expanded={nearCard.value?.nodeId === node.id}
+      data-near={near.map((pin) => pin.pinNodeId).join(' ')}
+      onPointerDown={(event) => event.stopPropagation()}
+      onPointerEnter={open}
+      onPointerLeave={closeNearCardSoon}
+      onFocus={open}
+      onBlur={closeNearCardSoon}
+      onClick={open}
+      onKeyDown={(event) => {
+        // The card draws over the canvas, outside the tab order: Enter or ↓ moves focus into it.
+        if (event.key !== 'Enter' && event.key !== 'ArrowDown') return;
+        event.preventDefault();
+        open(event);
+        requestAnimationFrame(() => document.querySelector<HTMLElement>('.near-hint button')?.focus());
+      }}
+      onAnimationEnd={() => clearNearChange(node.id)}
     >
-      <span
-        class="node-near-mark"
-        data-near={near.map((pin) => pin.pinNodeId).join(' ')}
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
-        onFocusIn={() => setOpen(true)}
-        onFocusOut={() => setOpen(false)}
-      >
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <circle cx="12" cy="12" r="8" class="node-near-ring" />
-          <circle cx="12" cy="12" r="2.2" class="node-near-dot" />
-        </svg>
-        {word}
-      </span>
-    </BarHint>
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="12" cy="12" r="8" class="node-near-ring" />
+        <circle cx="12" cy="12" r="2.2" class="node-near-dot" />
+      </svg>
+      {fold === 'word' && word}
+    </button>
   );
 }
+
+/** The viewport as a key: the card closes when it changes. */
+export function viewKey(): string {
+  const v = viewport.value;
+  return `${v.x},${v.y},${v.scale}`;
+}