pmx-canvas 0.4.7 → 0.5.0

package/src/client/canvas/EdgeLayer.tsx

@@ -1,5 +1,12 @@
 import type { Signal } from '@preact/signals';
-import { activeNodeId, draggingEdge, searchHighlightIds, viewport } from '../state/canvas-store';
+import {
+  activeNodeId,
+  draggingEdge,
+  searchHighlightIds,
+  selectedEdgeId,
+  viewport,
+  visibleNodeFor,
+} from '../state/canvas-store';
 import type { CanvasEdge, CanvasNodeState } from '../types';
 
 // ── Edge type visual styles ──────────────────────────────────
@@ -35,9 +42,12 @@ function dashArray(edge: CanvasEdge, scale: number): string | undefined {
 }
 
 // ── Anchor computation ───────────────────────────────────────
+type Side = 'top' | 'bottom' | 'left' | 'right';
+
 interface Anchor {
   x: number;
   y: number;
+  side: Side;
 }
 
 function computeAnchor(node: CanvasNodeState, target: CanvasNodeState): Anchor {
@@ -62,6 +72,7 @@ function computeAnchor(node: CanvasNodeState, target: CanvasNodeState): Anchor {
     return {
       x: cx + (hh / tanAngle) * (dx > 0 ? 1 : -1),
       y: cy + hh * sign,
+      side: sign > 0 ? 'bottom' : 'top',
     };
   }
 
@@ -70,9 +81,29 @@ function computeAnchor(node: CanvasNodeState, target: CanvasNodeState): Anchor {
   return {
     x: cx + hw * sign,
     y: cy + tanAngle * hw * (dy > 0 ? 1 : -1),
+    side: sign > 0 ? 'right' : 'left',
   };
 }
 
+/**
+ * Control point extending from an anchor along its side's outward normal —
+ * the edge leaves/enters a card perpendicular to the border and bends toward
+ * the other endpoint, instead of degenerating into a straight segment (which
+ * is what control points placed along the direct line produce).
+ */
+function sideControlPoint(anchor: Anchor, curvature: number): { x: number; y: number } {
+  switch (anchor.side) {
+    case 'top':
+      return { x: anchor.x, y: anchor.y - curvature };
+    case 'bottom':
+      return { x: anchor.x, y: anchor.y + curvature };
+    case 'left':
+      return { x: anchor.x - curvature, y: anchor.y };
+    case 'right':
+      return { x: anchor.x + curvature, y: anchor.y };
+  }
+}
+
 // ── Bezier midpoint at t=0.5 ─────────────────────────────────
 function bezierMidpoint(
   x1: number,
@@ -99,49 +130,67 @@ interface EdgePathProps {
   toNode: CanvasNodeState;
   focused: boolean; // connected to the active node
   dimmed: boolean; // active node exists but this edge is NOT connected
+  selected: boolean; // click-selected — Delete removes it
   scale: number; // inverse-viewport compensation, see edgeChromeScale()
+  onContextMenu?: (e: MouseEvent, edgeId: string) => void;
 }
 
-function EdgePath({ edge, fromNode, toNode, focused, dimmed, scale }: EdgePathProps) {
+function EdgePath({ edge, fromNode, toNode, focused, dimmed, selected, scale, onContextMenu }: EdgePathProps) {
   const start = computeAnchor(fromNode, toNode);
   const end = computeAnchor(toNode, fromNode);
 
   const dx = end.x - start.x;
   const dy = end.y - start.y;
   const dist = Math.sqrt(dx * dx + dy * dy);
-  const curvature = Math.min(dist * 0.25, 80);
+  const curvature = Math.min(Math.max(dist * 0.35, 32), 160);
 
-  // Control points: offset perpendicular to direct line
-  const nx = dx / (dist || 1);
-  const ny = dy / (dist || 1);
-  const cx1 = start.x + nx * curvature;
-  const cy1 = start.y + ny * curvature;
-  const cx2 = end.x - nx * curvature;
-  const cy2 = end.y - ny * curvature;
+  const cp1 = sideControlPoint(start, curvature);
+  const cp2 = sideControlPoint(end, curvature);
 
-  const d = `M ${start.x} ${start.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${end.x} ${end.y}`;
+  const d = `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`;
   const color = EDGE_COLORS[edge.type];
   const directed = DIRECTED_TYPES.has(edge.type);
   const dash = dashArray(edge, scale);
 
-  const mid = edge.label ? bezierMidpoint(start.x, start.y, cx1, cy1, cx2, cy2, end.x, end.y) : null;
+  // Labels keep a constant screen size only while nodes are still readable.
+  // The uncapped chrome compensation made "brief" dwarf its own nodes at
+  // overview zoom — cap label chrome like node chrome (2.2), and drop labels
+  // entirely once the board is slivers (chrome scale > 3.4 ≈ zoom < 30%).
+  const labelScale = Math.min(scale, 2.2);
+  const mid =
+    edge.label && scale <= 3.4 ? bezierMidpoint(start.x, start.y, cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y) : null;
 
   const pathId = `edge-path-${edge.id}`;
 
   return (
     <g>
-      {/* Invisible wide hitbox for hover/click */}
-      <path d={d} fill="none" stroke="transparent" stroke-width={12 * scale} style={{ cursor: 'pointer' }} />
+      {/* Invisible wide hitbox — the ONE interactive part of the edge layer
+          (the svg itself is pointer-events:none): click selects the edge
+          (Delete then removes it), right-click opens the edge menu. */}
+      <path
+        d={d}
+        fill="none"
+        stroke="transparent"
+        stroke-width={12 * scale}
+        style={{ cursor: 'pointer', pointerEvents: 'stroke' }}
+        onClick={(e) => {
+          // The viewport's background click clears the selection — a click
+          // that LANDED on an edge must not immediately undo itself.
+          e.stopPropagation();
+          selectedEdgeId.value = edge.id;
+        }}
+        onContextMenu={onContextMenu ? (e) => onContextMenu(e as unknown as MouseEvent, edge.id) : undefined}
+      />
 
-      {/* Glow layer for focused edges */}
-      {focused && (
+      {/* Glow layer for focused or selected edges */}
+      {(focused || selected) && (
         <path
           d={d}
           fill="none"
           stroke={color}
           stroke-width={6 * scale}
           stroke-dasharray={dash}
-          opacity="0.15"
+          opacity={selected ? 0.3 : 0.15}
           style={{ filter: 'blur(3px)' }}
         />
       )}
@@ -151,12 +200,13 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed, scale }: EdgePathPr
       <path
         id={pathId}
         d={d}
+        class={selected ? 'edge-selected' : undefined}
         fill="none"
         stroke={color}
-        stroke-width={(focused ? 2.5 : 1.5) * scale}
+        stroke-width={(selected ? 3 : focused ? 2.5 : 1.5) * scale}
         stroke-dasharray={dash}
         marker-end={directed ? 'url(#edge-arrow)' : undefined}
-        opacity={dimmed ? 0.2 : focused ? 1 : 0.85}
+        opacity={selected ? 1 : dimmed ? 0.2 : focused ? 1 : 0.85}
         style={{ transition: 'opacity 0.2s, stroke-width 0.2s' }}
       />
 
@@ -174,11 +224,11 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed, scale }: EdgePathPr
         <g transform={`translate(${mid.x}, ${mid.y})`}>
           <rect
             class="edge-label-bg"
-            x={-(edge.label.length * 3.5 + 8) * scale}
-            y={-10 * scale}
-            width={(edge.label.length * 7 + 16) * scale}
-            height={20 * scale}
-            rx={4 * scale}
+            x={-(edge.label.length * 3.5 + 8) * labelScale}
+            y={-10 * labelScale}
+            width={(edge.label.length * 7 + 16) * labelScale}
+            height={20 * labelScale}
+            rx={4 * labelScale}
           />
           <text class="edge-label" text-anchor="middle" dominant-baseline="central" fill="var(--c-text)">
             {edge.label}
@@ -193,9 +243,10 @@ function EdgePath({ edge, fromNode, toNode, focused, dimmed, scale }: EdgePathPr
 interface EdgeLayerProps {
   nodes: Signal<Map<string, CanvasNodeState>>;
   edges: Signal<Map<string, CanvasEdge>>;
+  onEdgeContextMenu?: (e: MouseEvent, edgeId: string) => void;
 }
 
-export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
+export function EdgeLayer({ nodes, edges, onEdgeContextMenu }: EdgeLayerProps) {
   const nodeMap = nodes.value;
   const edgeList = Array.from(edges.value.values());
   const focusId = activeNodeId.value;
@@ -204,10 +255,12 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
   const hasSearch = searchSet !== null;
   const scale = edgeChromeScale(viewport.value.scale);
 
-  if (edgeList.length === 0) return null;
+  // A drag-to-connect preview must draw on a board with no edges yet.
+  if (edgeList.length === 0 && !draggingEdge.value) return null;
 
   const PAD = 96;
   const worldNodes = Array.from(nodeMap.values());
+  if (worldNodes.length === 0) return null;
   const minX = Math.min(...worldNodes.map((node) => node.position.x)) - PAD;
   const minY = Math.min(...worldNodes.map((node) => node.position.y)) - PAD;
   const maxX = Math.max(...worldNodes.map((node) => node.position.x + node.size.width)) + PAD;
@@ -229,26 +282,33 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
         pointerEvents: 'none',
         overflow: 'visible',
         '--edge-chrome-scale': scale.toFixed(3),
+        '--edge-label-scale': Math.min(scale, 2.2).toFixed(3),
       }}
     >
       <title>Canvas connections</title>
       <defs>
+        {/* userSpaceOnUse decouples the arrowhead from the UNCAPPED stroke
+            compensation: the line stays a visible hairline at any zoom, but
+            the head caps at the node-chrome scale (2.2) instead of dwarfing
+            sliver nodes at overview zoom. */}
         <marker
           id="edge-arrow"
           viewBox="0 0 10 10"
           refX="9"
           refY="5"
-          markerWidth="8"
-          markerHeight="8"
+          markerUnits="userSpaceOnUse"
+          markerWidth={8 * Math.min(scale, 2.2)}
+          markerHeight={8 * Math.min(scale, 2.2)}
           orient="auto-start-reverse"
         >
           <path d="M 0 1 L 10 5 L 0 9 z" fill="currentColor" opacity="0.75" />
         </marker>
       </defs>
       {edgeList.map((edge) => {
-        const fromNode = nodeMap.get(edge.from);
-        const toNode = nodeMap.get(edge.to);
-        if (!fromNode || !toNode) return null;
+        // An endpoint hidden behind a collapsed group's chip is drawn to the chip.
+        const fromNode = visibleNodeFor(edge.from);
+        const toNode = visibleNodeFor(edge.to);
+        if (!fromNode || !toNode || fromNode.id === toNode.id) return null;
         const isConnected = hasFocus && (edge.from === focusId || edge.to === focusId);
         const searchDimmed = hasSearch && !(searchSet.has(edge.from) || searchSet.has(edge.to));
         return (
@@ -259,7 +319,9 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
             toNode={toNode}
             focused={isConnected}
             dimmed={(hasFocus && !isConnected) || searchDimmed}
+            selected={selectedEdgeId.value === edge.id}
             scale={scale}
+            onContextMenu={onEdgeContextMenu}
           />
         );
       })}
@@ -267,13 +329,34 @@ export function EdgeLayer({ nodes, edges }: EdgeLayerProps) {
       {draggingEdge.value &&
         (() => {
           const de = draggingEdge.value;
-          const dx = de.cursorX - de.fromX;
-          const dy = de.cursorY - de.fromY;
-          const dist = Math.sqrt(dx * dx + dy * dy);
-          const curve = Math.min(dist * 0.25, 80);
-          const nx = dx / (dist || 1);
-          const ny = dy / (dist || 1);
-          const previewD = `M ${de.fromX} ${de.fromY} C ${de.fromX + nx * curve} ${de.fromY + ny * curve}, ${de.cursorX - nx * curve} ${de.cursorY - ny * curve}, ${de.cursorX} ${de.cursorY}`;
+          // Route the preview EXACTLY like the committed edge will route
+          // (side-tangent anchors against a 1px rect at the cursor) — the old
+          // collinear preview made the line visibly JUMP on release.
+          const fromNode = visibleNodeFor(de.fromId);
+          const cursorRect = {
+            position: { x: de.cursorX, y: de.cursorY },
+            size: { width: 1, height: 1 },
+          } as CanvasNodeState;
+          let previewD: string;
+          if (fromNode) {
+            const start = computeAnchor(fromNode, cursorRect);
+            const end = computeAnchor(cursorRect, fromNode);
+            const pdx = end.x - start.x;
+            const pdy = end.y - start.y;
+            const pdist = Math.sqrt(pdx * pdx + pdy * pdy);
+            const curvature = Math.min(Math.max(pdist * 0.35, 32), 160);
+            const cp1 = sideControlPoint(start, curvature);
+            const cp2 = sideControlPoint(end, curvature);
+            previewD = `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`;
+          } else {
+            const dx = de.cursorX - de.fromX;
+            const dy = de.cursorY - de.fromY;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            const curve = Math.min(dist * 0.25, 80);
+            const nx = dx / (dist || 1);
+            const ny = dy / (dist || 1);
+            previewD = `M ${de.fromX} ${de.fromY} C ${de.fromX + nx * curve} ${de.fromY + ny * curve}, ${de.cursorX - nx * curve} ${de.cursorY - ny * curve}, ${de.cursorX} ${de.cursorY}`;
+          }
           return (
             <g>
               <path

package/src/client/canvas/EmptyState.tsx

@@ -0,0 +1,93 @@
+import { useRef } from 'preact/hooks';
+import { IconNodeMarkdown, IconNodeWebpage, IconSteer } from '../icons';
+import { viewport } from '../state/canvas-store';
+import { createNodeInView } from './create-in-view';
+import { startSession } from '../state/session-store';
+import { modChord } from '../utils/platform';
+import { canvasAreaCenter } from './canvas-area';
+import { importFiles } from './import-files';
+import { promptedCreate } from './ToolRail';
+
+/**
+ * Empty board (rail-chrome-v2 phase 7, design item 11): centered onboarding
+ * with the ghost mark, a 2×2 grid of starter actions, and the shortcut hint.
+ * Every action is real: New note creates the same blank note as M, Drop files
+ * opens a picker onto the viewport's import path, Paste a link asks for a URL,
+ * Start agent session attaches a browser-keyed session. Tokens only, so it
+ * reads the same in dark and light.
+ */
+export function EmptyState({ onOpenPalette }: { onOpenPalette: () => void }) {
+  const fileInput = useRef<HTMLInputElement>(null);
+  const newNote = () => {
+    void createNodeInView({ type: 'markdown', title: 'New note', width: 520, height: 360 }).catch(() => {});
+  };
+  const pickFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    const centre = canvasAreaCenter();
+    const v = viewport.value;
+    await importFiles(Array.from(files), (centre.x - v.x) / v.scale, (centre.y - v.y) / v.scale);
+  };
+  return (
+    <div class="empty-state" data-testid="empty-state">
+      <svg class="empty-state-mark" width="52" height="52" viewBox="0 0 64 64" fill="none" aria-hidden="true">
+        <rect x="8" y="8" width="48" height="48" rx="7" />
+        <rect x="20" y="20" width="24" height="24" rx="4" stroke-dasharray="4 4" />
+      </svg>
+      <div>
+        <div class="empty-state-title">Nothing on this board yet</div>
+        <div class="empty-state-sub">Drop files anywhere, paste a link, or start from a note.</div>
+      </div>
+      <div class="empty-state-grid">
+        <button type="button" class="empty-state-action" onClick={newNote}>
+          <IconNodeMarkdown size={16} class="tone-accent" />
+          <span class="empty-state-action-label">New markdown note</span>
+          <kbd>M</kbd>
+        </button>
+        <button type="button" class="empty-state-action" onClick={() => fileInput.current?.click()}>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            class="tone-warn"
+            aria-hidden="true"
+          >
+            <path d="M8 10 V2 M8 2 L5 5 M8 2 L11 5" />
+            <path d="M2 10 V13 H14 V10" />
+          </svg>
+          <span class="empty-state-action-label">Drop files</span>
+          <span class="empty-state-action-hint">or pick</span>
+        </button>
+        <button type="button" class="empty-state-action" onClick={() => promptedCreate('webpage')}>
+          <IconNodeWebpage size={16} class="tone-ok" />
+          <span class="empty-state-action-label">Paste a link</span>
+          <kbd>{modChord('V')}</kbd>
+        </button>
+        <button type="button" class="empty-state-action is-agent" onClick={() => void startSession()}>
+          <IconSteer size={16} class="tone-purple" />
+          <span class="empty-state-action-label">Start agent session</span>
+        </button>
+      </div>
+      <button type="button" class="empty-state-hint" onClick={onOpenPalette}>
+        ? shortcuts · {modChord('K')} palette
+      </button>
+      <input
+        ref={fileInput}
+        type="file"
+        multiple
+        hidden
+        aria-hidden="true"
+        tabIndex={-1}
+        onChange={(e) => {
+          const input = e.currentTarget;
+          void pickFiles(input.files).finally(() => {
+            input.value = '';
+          });
+        }}
+      />
+    </div>
+  );
+}

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -24,6 +24,8 @@ import {
   pendingExpandedNodeCloseId,
   toggleContextPin,
 } from '../state/canvas-store';
+import { getNodeIcon } from '../icons';
+import { useFocusTrap } from './use-focus-trap';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 
@@ -231,6 +233,15 @@ export function ExpandedNodeOverlay() {
     };
   }, [handlePresentationKeyDown, presentationExitToken, presenting]);
 
+  // Focus trap (item 18): restore to the node this overlay opened from — its
+  // world element is unmounted while expanded and remounted on close.
+  const panelRef = useRef<HTMLDivElement>(null);
+  const restoreToNode = useCallback(
+    () => (nodeId ? document.querySelector<HTMLElement>(`.canvas-node[data-node-id="${CSS.escape(nodeId)}"]`) : null),
+    [nodeId],
+  );
+  useFocusTrap(panelRef, node !== undefined, { restoreTo: restoreToNode });
+
   if (!node) return null;
 
   const title = (node.data.title as string) || (node.data.path as string)?.split('/').pop() || TYPE_LABELS[node.type];
@@ -243,95 +254,58 @@ export function ExpandedNodeOverlay() {
     node.type === 'mcp-app' || node.type === 'webpage' || node.type === 'json-render' || node.type === 'graph';
   const canPresent = shouldShowPresentationControls(node);
 
+  const NodeIcon = getNodeIcon(node.type);
+  const provenance =
+    node.data.provenance && typeof node.data.provenance === 'object'
+      ? (node.data.provenance as { sourceKind?: string; sourceUri?: string; syncedAt?: string })
+      : null;
+  const provenanceLabel = provenance
+    ? [
+        provenance.sourceKind,
+        provenance.sourceUri,
+        provenance.syncedAt ? `synced ${provenance.syncedAt.slice(11, 16)}` : null,
+      ]
+        .filter((part): part is string => typeof part === 'string' && part.length > 0)
+        .join(' · ')
+    : null;
+
   return (
     <div
       class="expanded-overlay-backdrop"
       onPointerDown={handleBackdropPointerDown}
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 10001,
-        background: 'rgba(10,14,30,0.85)',
-        backdropFilter: 'blur(8px)',
-        display: 'flex',
-        alignItems: 'stretch',
-        justifyContent: 'center',
-        padding: '32px',
-        pointerEvents: pendingClose ? 'none' : 'auto',
-      }}
+      style={{ pointerEvents: pendingClose ? 'none' : 'auto' }}
     >
       <div
-        class="expanded-overlay-panel"
-        style={{
-          flex: 1,
-          maxWidth: '1200px',
-          display: 'flex',
-          flexDirection: 'column',
-          background: 'var(--c-panel)',
-          border: `1px solid ${isCtxPinned ? 'var(--c-warn)' : 'var(--c-accent)'}`,
-          borderRadius: 'var(--radius)',
-          boxShadow: `0 0 0 1px ${isCtxPinned ? 'var(--c-warn)' : 'var(--c-accent)'}, 0 24px 80px rgba(0,0,0,0.6)`,
-          overflow: 'hidden',
-        }}
+        ref={panelRef}
+        class={`expanded-overlay-panel${isCtxPinned ? ' is-pinned' : ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        data-testid="expanded-node"
       >
-        {/* Title bar */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '10px',
-            padding: '10px 16px',
-            background: 'var(--c-panel-glass)',
-            borderBottom: '1px solid var(--c-line)',
-            flexShrink: 0,
-          }}
-        >
-          <span
-            style={{
-              fontSize: '10px',
-              padding: '1px 6px',
-              borderRadius: '4px',
-              background: 'var(--c-accent-12)',
-              color: 'var(--c-accent)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.04em',
-            }}
-          >
-            {TYPE_LABELS[node.type]}
+        {/* Header: kind icon · title · kind pill · pin state · actions · close */}
+        <div class="expanded-header">
+          <span class="expanded-kind-icon" aria-hidden="true">
+            <NodeIcon size={15} />
           </span>
-          <span
-            style={{
-              flex: 1,
-              fontSize: '13px',
-              fontWeight: 600,
-              color: 'var(--c-text)',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
+          <span class="expanded-title">{title}</span>
+          <span class="expanded-kind-pill">{TYPE_LABELS[node.type]}</span>
+          <button
+            type="button"
+            class={`expanded-pin${isCtxPinned ? ' is-on' : ''}`}
+            onClick={handleToggleCtxPin}
+            title={isCtxPinned ? 'In agent context — click to unpin' : 'Pin as agent context'}
+            aria-pressed={isCtxPinned}
           >
-            {title}
-          </span>
-
-          {/* Action buttons */}
+            ✦
+          </button>
+          <span class="expanded-spacer" />
           <div class="expanded-actions">
-            {/* Context pin toggle */}
-            <button
-              type="button"
-              class={`expanded-action-btn ${isCtxPinned ? 'expanded-action-active' : ''}`}
-              onClick={handleToggleCtxPin}
-              title={isCtxPinned ? 'Remove from context' : 'Pin as context'}
-            >
-              {isCtxPinned ? '\u2726 In context' : '\u2726 Pin as context'}
-            </button>
-
-            {/* Copy content */}
             {hasText && (
               <button type="button" class="expanded-action-btn" onClick={handleCopy} title="Copy content to clipboard">
                 {copied ? 'Copied!' : 'Copy'}
               </button>
             )}
-
             {canOpenAsSite(node) && (
               <button
                 type="button"
@@ -339,10 +313,9 @@ export function ExpandedNodeOverlay() {
                 onClick={() => void openNodeAsSite(node)}
                 title="Open as a full-page site in the system browser"
               >
-                Open as site
+                Open in tab ↗
               </button>
             )}
-
             {canPresent && (
               <button
                 type="button"
@@ -353,53 +326,14 @@ export function ExpandedNodeOverlay() {
                 Present
               </button>
             )}
-
-            {/* Word count */}
-            {words > 0 && (
-              <span class="expanded-meta">
-                {words.toLocaleString()} word{words !== 1 ? 's' : ''}
-              </span>
-            )}
           </div>
-
-          <span style={{ fontSize: '10px', color: pendingClose ? 'var(--c-warn)' : 'var(--c-muted)' }}>
-            {pendingClose ? 'Saving edits...' : 'Esc to close'}
-          </span>
-          <button
-            type="button"
-            onClick={handleClose}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--c-muted)',
-              cursor: 'pointer',
-              padding: '2px 6px',
-              fontSize: '16px',
-              lineHeight: 1,
-              borderRadius: '4px',
-            }}
-            onMouseEnter={(e) => {
-              (e.target as HTMLElement).style.color = 'var(--c-text)';
-            }}
-            onMouseLeave={(e) => {
-              (e.target as HTMLElement).style.color = 'var(--c-muted)';
-            }}
-            title="Close (Esc)"
-          >
+          <button type="button" class="expanded-close" onClick={handleClose} title="Close (Esc)" aria-label="Close">
             ×
           </button>
         </div>
 
-        {/* Content area — full height */}
-        <div
-          style={{
-            flex: 1,
-            overflow: 'auto',
-            padding: '16px',
-            minHeight: 0,
-            ...(isEmbeddedViewer ? { display: 'flex', flexDirection: 'column' } : {}),
-          }}
-        >
+        {/* Body: the surface at full size */}
+        <div class={`expanded-body${isEmbeddedViewer ? ' is-embedded' : ''}`}>
           {isEmbeddedViewer ? (
             <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>{renderContent(node, true)}</div>
           ) : (
@@ -416,6 +350,18 @@ export function ExpandedNodeOverlay() {
         <div style={{ '--ax-dock-bleed': '0px', '--ax-dock-pad': '16px' } as Record<string, string>}>
           <AxStepControls node={node} />
         </div>
+        {/* Footer strip: provenance + how to close */}
+        <div class="expanded-footer">
+          <span class="expanded-footer-meta">
+            {[provenanceLabel, words > 0 ? `${words.toLocaleString()} word${words !== 1 ? 's' : ''}` : null]
+              .filter(Boolean)
+              .join(' · ') || TYPE_LABELS[node.type].toLowerCase()}
+          </span>
+          <span class="expanded-spacer" />
+          <span class={`expanded-footer-hint${pendingClose ? ' is-saving' : ''}`}>
+            {pendingClose ? 'Saving edits…' : 'esc or click outside to close'}
+          </span>
+        </div>
         {canPresent && presenting && (
           <div
             ref={presentationOverlayRef}