my-you-eye 0.4.0 → 0.5.0

package/COMPONENTS.md

@@ -132,7 +132,7 @@ Step (`TerminalStep`):
 | `command?` | `string` | Command typed after the prompt. Omit for an output-only entry (a banner, a log tail). |
 | `output?` | `string` | Output body shown under the command. |
 | `language?` | `string` | Language id for highlighting `output`. |
-| `exitCode?` | `number` | Process exit code — renders a badge (0 reads success, non-zero danger). |
+| `exitCode?` | `number` | Process exit code — renders a plain status line (0 reads success, non-zero danger). |
 | `spinner?` | `string` | Shows a spinner with this label while the step runs, before `output` lands. For a step that should read as "this takes a while". |
 | `cwd?` | `string` | Per-entry overrides of the prompt chrome — each independently optional, and each PERSISTS to every following entry until overridden again, mirroring `Terminal`'s own per-entry override semantics (a real shell's `cd`/`ssh` changes the prompt for every command after it, not just that one line). Falls back to the scene-level prop of the same name when never set by any entry up to this point. |
 | `user?` | `string` | — |
@@ -672,7 +672,7 @@ Also accepts everything from `HTMLAttributes<HTMLDivElement>`.
 | `Card` | `my-you-eye` | variant: **default** / elevated / outlined | Variants, With footer actions, Size |
 | `CodeBlock` | `my-you-eye` | variant: **default** / elevated | Bare (no header, no language), Language-only (badge overlay, no header bar), With header + language, Elevated, Line numbers, No wrap (horizontal scroll), Syntax highlighting (TS), Line highlights, Line highlights (implicit gutter), Multi-color highlights, Substring highlights, Substring highlights on a long line (wrap forced off), Merged highlights, Focus range (dims everything outside it), Bare (embedded in another surface), Syntax highlighting (CSS / HTML / SQL / YAML / Python) |
 | `DeviceFrame` | `my-you-eye` | variant: **browser** / phone / window | Browser, Window, Phone |
-| `DiffBlock` | `my-you-eye` | variant: **default** / elevated | Unified, Unified — word diff, Split, Split — word diff, Elevated |
+| `DiffBlock` | `my-you-eye` | variant: **default** / elevated | Unified, Unified — word diff, Unified — word diff, heavily rewritten lines, Split, Split — word diff, Elevated |
 | `EmptyState` | `my-you-eye` | — | Default, With icon and action |
 | `Image` | `my-you-eye` | fit: contain / **cover** / fill / none / scaleDown<br>radius: full / lg / **md** / none / sm<br>aspect: **auto** / square / tall / video / wide<br>bordered: true<br>shadowed: true | Fit modes, Border radius, Aspect ratio, Styles, With caption |
 | `Kbd` | `my-you-eye` | — | Default, Combinations |
@@ -680,7 +680,7 @@ Also accepts everything from `HTMLAttributes<HTMLDivElement>`.
 | `ScrollArea` | `my-you-eye` | orientation: **both** / horizontal / vertical | Vertical scroll, Horizontal scroll, Both axes, Rounded corners (radius on ScrollArea itself, not a wrapper), Edge fade |
 | `Separator` | `my-you-eye` | orientation: **horizontal** / vertical | Horizontal, Vertical |
 | `StatusDot` | `my-you-eye` | variant: danger / info / **neutral** / success / warning<br>size: **md** / sm | Variants, Sizes, Pulsing |
-| `Terminal` | `my-you-eye` | variant: **default** / elevated<br>scheme: amber / **default** / matrix<br>chrome: **dots** / none | Prompt glyphs, Title bar, Variant, Color schemes, Chrome decorator, Fixed height, scrolls as content grows, Prompt segments, changed mid-session |
+| `Terminal` | `my-you-eye` | variant: **default** / elevated<br>scheme: amber / **default** / matrix<br>chrome: **dots** / none | Prompt glyphs, Title bar, Exit status & spinner, Variant, Color schemes, Chrome decorator, Fixed height, scrolls as content grows, Prompt segments, changed mid-session |
 
 ### display — props
 
@@ -1450,7 +1450,7 @@ Also accepts everything from `HTMLAttributes<HTMLDivElement>`.
 | `SceneRenderer` | `my-you-eye/scenes` | — | Title, Bullets, Diagram, chart, stat |
 | `SequenceScene` | `my-you-eye/scenes` | — | Playing |
 | `StatScene` | `my-you-eye/scenes` | — | Playing |
-| `TerminalScene` | `my-you-eye/scenes` | — | Playing, Pinned mid-typing, entry 1 (frame 12/160), Pinned on entry 2's spinner (frame 72/160), Pinned at rest (frame 160/160), Prompt change (rows + scheme) |
+| `TerminalScene` | `my-you-eye/scenes` | — | Playing, Pinned mid-typing, entry 1 (frame 12/160), Pinned on entry 2's spinner (frame 72/160), Spinner, animating, Pinned at rest (frame 160/160), Prompt change (rows + scheme) |
 | `TitleScene` | `my-you-eye/scenes` | — | Centered, playing, Left-aligned, no chapter/subtitle, Pinned mid-stagger (frame 12/90), Pinned at rest (frame 90/90) |
 | `Validation` | `my-you-eye/scenes` | — | Deliberately broken video, Valid, minimal video |
 | `WalkthroughScene` | `my-you-eye/scenes` | — | Playing |

package/components.json

@@ -1148,10 +1148,11 @@
         "Playing",
         "Pinned mid-typing, entry 1 (frame 12/160)",
         "Pinned on entry 2's spinner (frame 72/160)",
+        "Spinner, animating",
         "Pinned at rest (frame 160/160)",
         "Prompt change (rows + scheme)"
       ],
-      "description": "Wraps Terminal, revealing one entry per step: command types in, spinner holds, output and badge land."
+      "description": "Wraps Terminal, revealing one entry per step: command types in, spinner cycles, output and exit status land."
     },
     {
       "name": "TitleScene",
@@ -2918,6 +2919,7 @@
       "demos": [
         "Unified",
         "Unified — word diff",
+        "Unified — word diff, heavily rewritten lines",
         "Split",
         "Split — word diff",
         "Elevated"
@@ -3221,13 +3223,14 @@
       "demos": [
         "Prompt glyphs",
         "Title bar",
+        "Exit status & spinner",
         "Variant",
         "Color schemes",
         "Chrome decorator",
         "Fixed height, scrolls as content grows",
         "Prompt segments, changed mid-session"
       ],
-      "description": "Prompt/command/output/exit-code sequences, composing CodeBlock for output bodies. Data-driven via a typed entries array.",
+      "description": "Prompt/command/output/exit-status sequences, composing CodeBlock for output bodies. Data-driven via a typed entries array.",
       "variantDefaults": {
         "variant": "default",
         "scheme": "default",
@@ -4862,7 +4865,7 @@
             "name": "exitCode",
             "optional": true,
             "type": "number",
-            "description": "Process exit code — renders a badge (0 reads success, non-zero danger)."
+            "description": "Process exit code — renders a plain status line (0 reads success, non-zero danger)."
           },
           {
             "name": "spinner",

package/dist/{chunk-ZWLDKVXQ.js → chunk-3XU2AZIQ.js}

@@ -4,16 +4,16 @@ import {
 import {
   SceneRenderer,
   sceneDuration
-} from "./chunk-VU2IBHKV.js";
+} from "./chunk-AAPYU7IQ.js";
 import {
   Badge,
   Progress,
   cn
-} from "./chunk-NZO3FHA7.js";
+} from "./chunk-OBWYV42U.js";
 import {
   MotionRoot,
   resolveBeatFrames
-} from "./chunk-VFEYYIUB.js";
+} from "./chunk-YWX2ZFH4.js";
 
 // src/video/VideoRoot.tsx
 import { Fragment as Fragment2 } from "react";

package/dist/{chunk-VU2IBHKV.js → chunk-AAPYU7IQ.js}

@@ -20,6 +20,7 @@ import {
   Link,
   MergedHighlight,
   PieChart,
+  SPINNER_FRAMES,
   ScatterPlot,
   ScrollArea,
   SequenceDiagram,
@@ -34,12 +35,12 @@ import {
   layered,
   lcsDiffFlags,
   pairDiffLines,
+  refinedLineDiff,
   renderHighlightedLine,
   snap,
   splitTokensByLine,
-  tokenize,
-  wordDiff
-} from "./chunk-NZO3FHA7.js";
+  tokenize
+} from "./chunk-OBWYV42U.js";
 import {
   Camera,
   CountUp,
@@ -57,7 +58,7 @@ import {
   resolveBeatFrames,
   useProgress,
   useSequence
-} from "./chunk-VFEYYIUB.js";
+} from "./chunk-YWX2ZFH4.js";
 import {
   formatBytesParts,
   formatCurrencyParts,
@@ -1156,7 +1157,7 @@ function CodeDiffRow({ row, language, delayFrames, durationFrames, lineHeight, c
   const isAddedOnly = Boolean(row.right && !row.left);
   const isRemovedOnly = Boolean(row.left && !row.right);
   const { ref: markerRef, anchorX } = useAnchorX();
-  const diff = isChanged ? wordDiff(row.left.content, row.right.content) : null;
+  const diff = isChanged ? refinedLineDiff(row.left.content, row.right.content) : null;
   const oldRects = useMemo(
     () => diff ? segmentsToRects(diff.oldSegments, anchorX, charWidth, lineHeight) : [],
     [diff, anchorX, charWidth, lineHeight]
@@ -1165,7 +1166,7 @@ function CodeDiffRow({ row, language, delayFrames, durationFrames, lineHeight, c
     () => diff ? segmentsToRects(diff.newSegments, anchorX, charWidth, lineHeight) : [],
     [diff, anchorX, charWidth, lineHeight]
   );
-  if (isChanged && diff) {
+  if (isChanged) {
     const oldOpacity = Math.max(0, 1 - progress / 0.45);
     const newOpacity = Math.max(0, (progress - 0.55) / 0.45);
     return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
@@ -1176,7 +1177,7 @@ function CodeDiffRow({ row, language, delayFrames, durationFrames, lineHeight, c
           style: { opacity: oldOpacity },
           children: [
             /* @__PURE__ */ jsx3("span", { ref: markerRef, className: cn("w-5 shrink-0 text-center", MARKER_TEXT.removed), children: MARKER_GLYPH.removed }),
-            diff.oldSegments.map((seg) => seg.text).join(""),
+            row.left.content,
             oldRects.length > 0 && /* @__PURE__ */ jsx3(MergedHighlight, { rects: oldRects, color: WORD_COLOR.old, strokeColor: WORD_COLOR.old })
           ]
         }
@@ -1188,7 +1189,7 @@ function CodeDiffRow({ row, language, delayFrames, durationFrames, lineHeight, c
           style: { opacity: newOpacity },
           children: [
             /* @__PURE__ */ jsx3("span", { className: cn("w-5 shrink-0 text-center", MARKER_TEXT.added), children: MARKER_GLYPH.added }),
-            diff.newSegments.map((seg) => seg.text).join(""),
+            row.right.content,
             newRects.length > 0 && /* @__PURE__ */ jsx3(MergedHighlight, { rects: newRects, color: WORD_COLOR.new, strokeColor: WORD_COLOR.new })
           ]
         }
@@ -1409,6 +1410,10 @@ function useCodeAnnotations(annotations, containerRef, blockId) {
 // src/scenes/code-scene/CodeScene.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var DIFF_SHARE = 0.55;
+function typedSlice(source, progress) {
+  const cut = Math.floor(source.length * progress);
+  return source.slice(0, cut) + source.slice(cut).replace(/[^\n]/g, "");
+}
 function currentStepIndex(scene, ranges, frame) {
   let index = 0;
   scene.steps.forEach((step, i) => {
@@ -1439,7 +1444,15 @@ function CodeScene({ scene }) {
   const diffFrames = Math.max(1, Math.round((range.endFrame - range.startFrame) * DIFF_SHARE));
   const isDiff = !step.typed && nextSource !== prevSource && frame < range.startFrame + diffFrames;
   const isTyped = Boolean(step.typed);
-  const typedCode = isTyped ? nextSource.slice(0, Math.floor(nextSource.length * stepProgress)) : nextSource;
+  const typedCode = isTyped ? typedSlice(nextSource, stepProgress) : nextSource;
+  const blockProps = {
+    language: scene.lang,
+    header: scene.file,
+    highlight: highlightEnabled,
+    showLineNumbers,
+    focusRange: step.focus,
+    highlightRanges: highlightRanges.length > 0 ? highlightRanges : void 0
+  };
   return /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full flex-col gap-stack bg-bg p-panel-xl text-fg", children: /* @__PURE__ */ jsx5("div", { ref: containerRef, className: "relative min-h-0 flex-1", children: /* @__PURE__ */ jsxs5(Camera, { keyframes, className: "h-full w-full", children: [
     /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full items-center justify-center", children: isDiff ? /* @__PURE__ */ jsx5(
       CodeDiff,
@@ -1453,16 +1466,38 @@ function CodeScene({ scene }) {
         className: "max-h-full"
       },
       index
+    ) : isTyped ? (
+      /* Reserve the FINAL layout up front — the same trick TypeText's
+         `preserveLayout` uses (src/motion/type-text/TypeText.tsx), for
+         the same reason: a box that grows with the text is a box that
+         moves under everything measuring it. Both blocks occupy the
+         one grid cell, the hidden one (full source) sizing it and the
+         visible one (typed prefix) stretching into it, so block width,
+         block height and gutter width are final from frame 1 and the
+         only thing that changes per frame is which characters are
+         painted. The container therefore never resizes while typing,
+         so `useCodeCameraKeyframes`' ResizeObserver stays quiet and
+         the centring wrapper below has nothing left to re-centre.
+         The ghost deliberately gets NO `lineId`: duplicate element ids
+         would make the camera's `getElementById` measure the invisible
+         copy instead of the real one. */
+      /* @__PURE__ */ jsxs5("div", { className: "grid max-h-full", children: [
+        /* @__PURE__ */ jsx5("div", { "aria-hidden": true, className: "invisible col-start-1 row-start-1 min-w-0", children: /* @__PURE__ */ jsx5(CodeBlock, { code: nextSource, ...blockProps, className: "max-h-full" }) }),
+        /* @__PURE__ */ jsx5(
+          CodeBlock,
+          {
+            code: typedCode,
+            ...blockProps,
+            lineId: (n) => lineElementId(blockId, n),
+            className: "col-start-1 row-start-1 min-w-0 max-h-full"
+          }
+        )
+      ] }, index)
     ) : /* @__PURE__ */ jsx5(
       CodeBlock,
       {
-        code: typedCode,
-        language: scene.lang,
-        header: scene.file,
-        highlight: highlightEnabled,
-        showLineNumbers,
-        focusRange: step.focus,
-        highlightRanges: highlightRanges.length > 0 ? highlightRanges : void 0,
+        code: nextSource,
+        ...blockProps,
         lineId: (n) => lineElementId(blockId, n),
         className: "max-h-full"
       },
@@ -1501,7 +1536,11 @@ function phaseWindows(entry) {
   }
   return windows;
 }
-function currentEntryView(entry, localProgress) {
+var SPINNER_FRAME_HOLD = 3;
+function spinnerGlyphAt(frame) {
+  return SPINNER_FRAMES[Math.floor(frame / SPINNER_FRAME_HOLD) % SPINNER_FRAMES.length];
+}
+function currentEntryView(entry, localProgress, frame) {
   const windows = phaseWindows(entry);
   const command = entry.command != null && windows.command ? entry.command.slice(0, Math.floor(entry.command.length * clamp01((localProgress - windows.command.start) / (windows.command.end - windows.command.start)))) : entry.command;
   const spinnerVisible = windows.spinner != null && localProgress >= windows.spinner.start && localProgress < windows.spinner.end;
@@ -1510,6 +1549,7 @@ function currentEntryView(entry, localProgress) {
   return {
     command,
     spinner: spinnerVisible ? entry.spinner : void 0,
+    spinnerGlyph: spinnerVisible ? spinnerGlyphAt(frame) : void 0,
     output: outputVisible ? entry.output : void 0,
     language: entry.language,
     exitCode: exitVisible ? entry.exitCode : void 0,
@@ -1544,7 +1584,7 @@ function TerminalScene({ scene }) {
     }
     const range = ranges[stepName(entry.id, i)];
     const span = Math.max(1, range.endFrame - range.startFrame);
-    visible.push(currentEntryView(entry, clamp01((frame - range.startFrame) / span)));
+    visible.push(currentEntryView(entry, clamp01((frame - range.startFrame) / span), frame));
   }
   return /* @__PURE__ */ jsx6("div", { className: "flex h-full w-full items-center justify-center bg-bg px-panel-xl text-fg", children: /* @__PURE__ */ jsx6(
     Terminal,
@@ -1577,10 +1617,13 @@ function OutroScene({ scene }) {
 }
 
 // src/scenes/diagram-scene/DiagramScene.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo4, useState as useState6 } from "react";
 
 // src/scenes/diagram-scene/DiagramScene.layout.ts
 var NODE_WIDTH = 10 * GRID;
+var LAYER_GAP = 5;
+var NODE_GAP = 5;
+var GROUP_LABEL_BAND = 1.5 * GRID;
 var PRESET_DEFAULTS = {
   architecture: { layout: "layered-horizontal", edgeKind: "sync", edgeRoute: "orthogonal", nodeShape: "box" },
   dataflow: { layout: "layered-horizontal", edgeKind: "data", edgeRoute: "orthogonal", nodeShape: "box" },
@@ -1606,10 +1649,8 @@ function resolveNodeRects(nodes, edges, preset, layoutOverride) {
   const footprint = { nodeWidth: NODE_WIDTH / GRID, nodeHeight: tallest / GRID };
   const positions = layoutKind === "grid" ? grid(layoutNodes, footprint) : layered(layoutNodes, layoutEdges, {
     direction: layoutKind === "layered-vertical" ? "vertical" : "horizontal",
-    // A tighter inter-layer gap than layout.ts's default: now that the
-    // gap is a real gap on top of a 10-cell node, 4 cells of extra air
-    // pushed a routine 4-node chain past the width of a 16:9 stage.
-    layerGap: 3,
+    layerGap: LAYER_GAP,
+    nodeGap: NODE_GAP,
     ...footprint
   });
   const positionOf = new Map(positions.map((p) => [p.id, p]));
@@ -1640,10 +1681,20 @@ function resolveGroupRects(groups, nodeRects) {
   }
   return out;
 }
-function centerOffset(bounds, canvas) {
+var FIT_PADDING = 2 * GRID;
+function fitScale(bounds, canvas) {
+  const width = canvas.width - 2 * FIT_PADDING;
+  const height = canvas.height - 2 * FIT_PADDING;
+  if (width <= 0 || height <= 0) return 1;
+  return Math.min(1, fitZoom({ x: 0, y: 0, width: bounds.width, height: bounds.height }, width, height, 1));
+}
+function centerOffset(bounds, canvas, zoom = 1) {
+  const scale = zoom > 0 ? zoom : 1;
+  const viewWidth = canvas.width / scale;
+  const viewHeight = canvas.height / scale;
   return {
-    dx: Math.max(0, snap((canvas.width - bounds.width) / 2)),
-    dy: Math.max(0, snap((canvas.height - bounds.height) / 2))
+    dx: snap(-bounds.x + Math.max(0, (viewWidth - bounds.width) / 2)),
+    dy: snap(-bounds.y + Math.max(0, (viewHeight - bounds.height) / 2))
   };
 }
 function shiftRects(rects, dx, dy) {
@@ -1654,10 +1705,13 @@ function shiftRects(rects, dx, dy) {
 }
 function contentBounds(nodeRects, groupRects) {
   const rects = [...nodeRects.values(), ...groupRects.values()];
-  if (rects.length === 0) return { width: 4 * NODE_WIDTH, height: 8 * GRID };
+  if (rects.length === 0) return { x: 0, y: 0, width: 4 * NODE_WIDTH, height: 8 * GRID };
+  const tops = [...nodeRects.values()].map((r) => r.y).concat([...groupRects.values()].map((r) => r.y - GROUP_LABEL_BAND));
+  const minX = Math.min(...rects.map((r) => r.x));
+  const minY = Math.min(...tops);
   const maxX = Math.max(...rects.map((r) => r.x + r.width));
   const maxY = Math.max(...rects.map((r) => r.y + r.height));
-  return { width: maxX + GRID, height: maxY + GRID };
+  return { x: minX - GRID, y: minY - GRID, width: maxX - minX + 2 * GRID, height: maxY - minY + 2 * GRID };
 }
 
 // src/scenes/diagram-scene/DiagramScene.geometry.ts
@@ -1794,7 +1848,9 @@ function DiagramScene({ scene }) {
   const laidOutGroups = useMemo4(() => resolveGroupRects(scene.groups ?? [], laidOutNodes), [scene.groups, laidOutNodes]);
   const bounds = useMemo4(() => contentBounds(laidOutNodes, laidOutGroups), [laidOutNodes, laidOutGroups]);
   const { ref: canvasRef, size: canvasSize } = useCanvasSize(bounds);
-  const offset = useMemo4(() => centerOffset(bounds, canvasSize), [bounds, canvasSize]);
+  const [zoomOverride, setZoomOverride] = useState6(null);
+  const zoom = zoomOverride ?? fitScale(bounds, canvasSize);
+  const offset = useMemo4(() => centerOffset(bounds, canvasSize, zoom), [bounds, canvasSize, zoom]);
   const nodeRects = useMemo4(() => shiftRects(laidOutNodes, offset.dx, offset.dy), [laidOutNodes, offset]);
   const groupRects = useMemo4(() => shiftRects(laidOutGroups, offset.dx, offset.dy), [laidOutGroups, offset]);
   const index = currentDiagramStepIndex(scene, ranges, frame);
@@ -1850,87 +1906,97 @@ function DiagramScene({ scene }) {
   const annotations = currentStep?.annotate ?? [];
   return /* @__PURE__ */ jsxs7("div", { className: "flex h-full w-full flex-col gap-stack bg-bg p-panel-xl text-fg", children: [
     scene.title && /* @__PURE__ */ jsx8("h2", { className: "text-xl font-semibold text-fg", children: scene.title }),
-    /* @__PURE__ */ jsxs7(Canvas, { ref: canvasRef, className: "min-h-0 flex-1 rounded-ui border border-border", children: [
-      [...groupRects.values()].map((rect) => {
-        const dimmed = focusIds != null && !focusIds.has(rect.id);
-        const revealRange = findRevealRange(rect.id, scene, ranges);
-        return /* @__PURE__ */ jsx8(Reveal, { asChild: true, from: "fade", delay: revealRange?.startFrame ?? 0, duration: revealRange ? "normal" : "instant", children: /* @__PURE__ */ jsx8(
-          GraphGroup,
-          {
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            label: rect.data.label,
-            border: rect.data.border,
-            className: cn(dimmed && "opacity-dim")
-          }
-        ) }, rect.id);
-      }),
-      [...nodeRects.values()].map((rect) => {
-        const node = rect.data;
-        const dimmed = focusIds != null && !focusIds.has(node.id);
-        const revealRange = findRevealRange(node.id, scene, ranges);
-        const isExpanded = live.expandedNodeId === node.id;
-        return /* @__PURE__ */ jsx8(Reveal, { asChild: true, from: "scale", delay: revealRange?.startFrame ?? 0, duration: revealRange ? "normal" : "instant", children: /* @__PURE__ */ jsx8(
-          GraphNode,
-          {
-            x: rect.x,
-            y: rect.y,
-            style: { width: rect.width },
-            variant: isExpanded ? "selected" : rect.simple ? "simple" : "default",
-            shape: preset.nodeShape,
-            header: node.label,
-            subtitle: node.sublabel,
-            headerDots: false,
-            headerStatus: node.status ? /* @__PURE__ */ jsx8(StatusDot, { variant: node.status, size: "sm" }) : void 0,
-            footer: node.metric,
-            accent: Boolean(node.accent),
-            accentColor: node.accent,
-            className: cn(dimmed && "opacity-dim", live.isLive && "cursor-pointer"),
-            onMouseEnter: () => live.onNodeHover(node.id),
-            onMouseLeave: () => live.onNodeHover(null),
-            onClick: (e) => {
-              e.stopPropagation();
-              live.onNodeClick(node.id);
-            }
-          }
-        ) }, node.id);
-      }),
-      /* @__PURE__ */ jsx8(ConnectionLayer, { edges: connectionEdges }),
-      flowingEdgeIds.map((edgeId2) => {
-        const geo = edgeGeometry.get(edgeId2);
-        if (!geo) return null;
-        const d = generatePath(geo.from, geo.to, geo.route, { obstacles: geo.obstacles });
-        return /* @__PURE__ */ jsx8(
-          Trace,
-          {
-            d,
-            viewBox: `0 0 ${canvasSize.width} ${canvasSize.height}`,
-            className: "absolute inset-0 h-full w-full",
-            color: KIND_TRACE_COLOR[geo.kind],
-            count: 2,
-            duration: "slow"
-          },
-          edgeId2
-        );
-      }),
-      annotations.map((a, i) => {
-        const rect = nodeRects.get(a.target) ?? groupRects.get(a.target);
-        if (!rect) return null;
-        const side = a.side ?? "right";
-        return /* @__PURE__ */ jsx8(
-          Annotation,
-          {
-            target: borderCenter(rect, side),
-            label: a.text,
-            side,
-            progress: annotateProgress
-          },
-          `${a.target}-${i}`
-        );
-      })
-    ] })
+    /* @__PURE__ */ jsxs7(
+      Canvas,
+      {
+        ref: canvasRef,
+        zoom,
+        onZoomChange: setZoomOverride,
+        className: "min-h-0 flex-1 rounded-ui border border-border",
+        children: [
+          [...groupRects.values()].map((rect) => {
+            const dimmed = focusIds != null && !focusIds.has(rect.id);
+            const revealRange = findRevealRange(rect.id, scene, ranges);
+            return /* @__PURE__ */ jsx8(Reveal, { asChild: true, from: "fade", delay: revealRange?.startFrame ?? 0, duration: revealRange ? "normal" : "instant", children: /* @__PURE__ */ jsx8(
+              GraphGroup,
+              {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                label: rect.data.label,
+                border: rect.data.border,
+                labelPlacement: "outside-top",
+                className: cn(dimmed && "opacity-dim")
+              }
+            ) }, rect.id);
+          }),
+          [...nodeRects.values()].map((rect) => {
+            const node = rect.data;
+            const dimmed = focusIds != null && !focusIds.has(node.id);
+            const revealRange = findRevealRange(node.id, scene, ranges);
+            const isExpanded = live.expandedNodeId === node.id;
+            return /* @__PURE__ */ jsx8(Reveal, { asChild: true, from: "scale", delay: revealRange?.startFrame ?? 0, duration: revealRange ? "normal" : "instant", children: /* @__PURE__ */ jsx8(
+              GraphNode,
+              {
+                x: rect.x,
+                y: rect.y,
+                style: { width: rect.width },
+                variant: isExpanded ? "selected" : rect.simple ? "simple" : "default",
+                shape: preset.nodeShape,
+                header: node.label,
+                subtitle: node.sublabel,
+                headerDots: false,
+                headerStatus: node.status ? /* @__PURE__ */ jsx8(StatusDot, { variant: node.status, size: "sm" }) : void 0,
+                footer: node.metric,
+                accent: Boolean(node.accent),
+                accentColor: node.accent,
+                className: cn(dimmed && "opacity-dim", live.isLive && "cursor-pointer"),
+                onMouseEnter: () => live.onNodeHover(node.id),
+                onMouseLeave: () => live.onNodeHover(null),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  live.onNodeClick(node.id);
+                }
+              }
+            ) }, node.id);
+          }),
+          /* @__PURE__ */ jsx8(ConnectionLayer, { edges: connectionEdges }),
+          flowingEdgeIds.map((edgeId2) => {
+            const geo = edgeGeometry.get(edgeId2);
+            if (!geo) return null;
+            const d = generatePath(geo.from, geo.to, geo.route, { obstacles: geo.obstacles });
+            return /* @__PURE__ */ jsx8(
+              Trace,
+              {
+                d,
+                viewBox: `0 0 ${canvasSize.width} ${canvasSize.height}`,
+                className: "absolute inset-0 h-full w-full",
+                color: KIND_TRACE_COLOR[geo.kind],
+                count: 2,
+                duration: "slow"
+              },
+              edgeId2
+            );
+          }),
+          annotations.map((a, i) => {
+            const rect = nodeRects.get(a.target) ?? groupRects.get(a.target);
+            if (!rect) return null;
+            const side = a.side ?? "right";
+            return /* @__PURE__ */ jsx8(
+              Annotation,
+              {
+                target: borderCenter(rect, side),
+                label: a.text,
+                side,
+                progress: annotateProgress
+              },
+              `${a.target}-${i}`
+            );
+          })
+        ]
+      }
+    )
   ] });
 }
 
@@ -2239,7 +2305,7 @@ import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function renderPane(pane) {
   switch (pane.content) {
     case "code":
-      return /* @__PURE__ */ jsx13(CodeBlock, { code: pane.code, language: pane.lang, header: pane.label, className: "h-full" });
+      return /* @__PURE__ */ jsx13(CodeBlock, { code: pane.code, language: pane.lang, header: pane.label, className: "h-full border-0 rounded-none" });
     case "text":
       return /* @__PURE__ */ jsx13("div", { className: "whitespace-pre-wrap p-panel text-sm text-fg", children: pane.text });
     case "image":
@@ -2250,6 +2316,9 @@ function renderPane(pane) {
     }
   }
 }
+function paneLabel(pane) {
+  return pane.content === "code" ? void 0 : pane.label;
+}
 function CompareScene({ scene }) {
   const ranges = useSequence(sceneSteps(scene), scene.pace);
   const range = Object.values(ranges)[0];
@@ -2266,8 +2335,8 @@ function CompareScene({ scene }) {
         mode: mode === "wipe" ? "wipe" : "side-by-side",
         before: beforeNode,
         after: afterNode,
-        beforeLabel: scene.before.label,
-        afterLabel: scene.after.label,
+        beforeLabel: paneLabel(scene.before),
+        afterLabel: paneLabel(scene.after),
         progress,
         className: "w-full"
       }
@@ -2276,7 +2345,45 @@ function CompareScene({ scene }) {
 }
 
 // src/scenes/walkthrough-scene/WalkthroughScene.tsx
-import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState7 } from "react";
+
+// src/scenes/walkthrough-scene/WalkthroughScene.spotlight.ts
+var SPOTLIGHT_DIM = 0.6;
+var FADE_SHARE = 0.2;
+var FADE_CAP_FRAMES = 12;
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function lerpRect(from, to, t) {
+  return {
+    x: lerp(from.x, to.x, t),
+    y: lerp(from.y, to.y, t),
+    width: lerp(from.width, to.width, t),
+    height: lerp(from.height, to.height, t)
+  };
+}
+function fadeFrames(span) {
+  return Math.min(FADE_CAP_FRAMES, Math.max(1, Math.round(span * FADE_SHARE)));
+}
+function spotlightPlan(steps, ranges, index, frame) {
+  const step = steps[index];
+  const range = step ? ranges[stepName(step.id, index)] : void 0;
+  const fallbackDelay = range?.startFrame ?? 0;
+  if (!step?.spotlight || !range) return { focus: null, dim: 0, delay: fallbackDelay };
+  let runStart = index;
+  while (runStart > 0 && steps[runStart - 1].spotlight) runStart -= 1;
+  const delay = ranges[stepName(steps[runStart].id, runStart)]?.startFrame ?? fallbackDelay;
+  const span = Math.max(1, range.endFrame - range.startFrame);
+  const ramp = fadeFrames(span);
+  const previous = index > runStart ? steps[index - 1].spotlight : void 0;
+  const entry = previous ? clamp01((frame - range.startFrame) / ramp) : 1;
+  const focus = previous ? lerpRect(previous, step.spotlight, entry) : step.spotlight;
+  const handsOverToDark = !steps[index + 1]?.spotlight;
+  const exit = handsOverToDark ? clamp01((range.endFrame - frame) / ramp) : 1;
+  return { focus, dim: SPOTLIGHT_DIM * exit, delay };
+}
+
+// src/scenes/walkthrough-scene/WalkthroughScene.tsx
 import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 var ACTION_MAP = {
   none: void 0,
@@ -2293,7 +2400,7 @@ function currentIndex3(steps, ranges, frame) {
 }
 function useFrameSize() {
   const ref = useRef5(null);
-  const [size, setSize] = useState6({ width: 0, height: 0 });
+  const [size, setSize] = useState7({ width: 0, height: 0 });
   useLayoutEffect6(() => {
     const el = ref.current;
     if (!el) return void 0;
@@ -2344,13 +2451,13 @@ function WalkthroughScene({ scene }) {
     });
     return out;
   }, [scene.steps, ranges, size]);
-  const spotlightFocus = step?.spotlight && size.width > 0 ? rectToPx(step.spotlight, size) : { x: 0, y: 0, width: 0, height: 0 };
-  const spotlightDim = step?.spotlight ? 0.6 : 0;
+  const plan = spotlightPlan(scene.steps, ranges, index, frame);
+  const spotlightFocus = plan.focus && size.width > 0 ? rectToPx(plan.focus, size) : { x: 0, y: 0, width: 0, height: 0 };
   const target = step ? resolveTarget(step) : void 0;
   const annotateTarget = step?.annotate && target && size.width > 0 ? toPx(target, size) : void 0;
   const screenshot = /* @__PURE__ */ jsx14(Image, { src: scene.image, alt: scene.title ?? "screenshot", fit: "cover", radius: "none", className: "h-full w-full" });
   return /* @__PURE__ */ jsx14("div", { className: "flex h-full w-full items-center justify-center bg-bg p-panel-xl text-fg", children: /* @__PURE__ */ jsx14("div", { className: "w-full max-w-4xl", children: /* @__PURE__ */ jsx14(DeviceFrame, { variant: scene.frame ?? "browser", url: scene.url, title: scene.title, className: "aspect-video w-full", children: /* @__PURE__ */ jsxs12("div", { ref: frameRef, className: "relative h-full w-full", children: [
-    /* @__PURE__ */ jsx14(Spotlight, { focus: spotlightFocus, dim: spotlightDim, delay: range.startFrame, duration: "normal", className: "h-full w-full", children: screenshot }),
+    /* @__PURE__ */ jsx14(Spotlight, { focus: spotlightFocus, dim: plan.dim, delay: plan.delay, duration: "normal", className: "h-full w-full", children: screenshot }),
     /* @__PURE__ */ jsx14(Cursor, { events }),
     annotateTarget && /* @__PURE__ */ jsx14(
       "div",