my-you-eye 0.5.0 → 0.6.0

package/COMPONENTS.md

@@ -579,7 +579,7 @@ Also accepts everything from `Omit<HTMLAttributes<HTMLUListElement>, "children">
 | Component | Tier | Variants (**default**) | Demos |
 |---|---|---|---|
 | `CellType` | `my-you-eye` | — | Data Types, New data types, Numeric types, Column alignment |
-| `DataList` | `my-you-eye` | striped: false / true | Density (normal vs compact), Striped, Label width, Alignment, Scrolling |
+| `DataList` | `my-you-eye` | striped: **false** / true | Density (normal vs compact), Striped, Label width, Alignment, Scrolling |
 | `DataTable` | `my-you-eye` | variant: **default** / striped<br>density: compact / **normal** | Default, Striped, Scrolling + sticky header, Alignment, Truncation |
 | `Table` | `my-you-eye` | variant: **default** / striped | Composition, Variants, Density, Truncation & expand, Sticky header |
 | `Timeline` | `my-you-eye` | — | Horizontal — single lane, Horizontal — lanes, Spans — events with a duration, Shared scale across lanes, Label placement, Density, Progress (playhead reveal), Vertical — single lane, Vertical — lanes |
@@ -718,7 +718,7 @@ Also accepts everything from `HTMLAttributes<HTMLPreElement>`, `VariantProps<typ
 | `highlightColor?` | `CodeBlockHighlightGroup["color"]` | Color for highlightLines (default "primary"). |
 | `highlightGroups?` | `CodeBlockHighlightGroup[]` | Multi-color highlight groups. |
 | `highlightRanges?` | `HighlightRangeDef[]` | Substring-level highlight ranges (0-indexed char positions within each line). |
-| `focusRange?` | `[number, number]` | 1-based line numbers outside this `[start, end]` range get a reduced opacity (the `opacity-muted` token) instead of full contrast — the "focus on this range, dim the rest" treatment a code walkthrough needs. |
+| `focusRange?` | `[number, number]` | 1-based line numbers outside this `[start, end]` range get a reduced opacity (the `opacity-focus-dim` token) instead of full contrast — the "focus on this range, dim the rest" treatment a code walkthrough needs. |
 | `lineId?` | `(lineNumber: number) => string` | Assigns an `id` to each rendered line's row element, keyed by its 1-based line number. |
 | `bare?` | `boolean` | Strips the persistent header bar (filename/language badge) and the block's own opaque background/border, leaving only a hover-revealed copy button in the corner. |
 
@@ -1231,7 +1231,7 @@ Also accepts everything from `Timing`.
 | Component | Tier | Variants (**default**) | Demos |
 |---|---|---|---|
 | `Breadcrumbs` | `my-you-eye` | — | Default, Custom separator |
-| `Link` | `my-you-eye` | variant: muted / **primary** | Variants, In a sentence |
+| `Link` | `my-you-eye` | variant: muted / **primary**<br>underline: false / **true** | Variants, underline={false}, In a sentence |
 | `Pagination` | `my-you-eye` | — | Default (10 pages), Few pages |
 | `Tabs` | `my-you-eye` | variant: filing / pills / **underline** | Underline, Pills, Filing |
 
@@ -1250,6 +1250,10 @@ Also accepts everything from `HTMLAttributes<HTMLElement>`.
 
 Also accepts everything from `AnchorHTMLAttributes<HTMLAnchorElement>`, `VariantProps<typeof linkVariants>`.
 
+| Prop | Type | Description |
+|---|---|---|
+| `underline?` | `boolean` | Underline the label on hover. |
+
 #### `Pagination`
 
 Also accepts everything from `HTMLAttributes<HTMLElement>`.

package/components.json

@@ -28,7 +28,7 @@
       "demos": [
         "Hold between reveals"
       ],
-      "description": "A no-op hold, so a deliberate pause reads as intentional rather than a missing animation."
+      "description": "A no-op hold, so a deliberate pause reads as intentional instead of as a missing animation."
     },
     {
       "name": "Camera",
@@ -137,7 +137,7 @@
         "Formats",
         "Signed & duration"
       ],
-      "description": "Numeric tween that reuses src/lib/format.ts for every formatting mode — never reimplements Intl formatting.",
+      "description": "Numeric tween that reuses src/lib/format.ts for every formatting mode instead of reimplementing Intl formatting.",
       "extends": [
         "Timing"
       ]
@@ -185,7 +185,7 @@
         "Custom cursor node",
         "Click effect variants"
       ],
-      "description": "A fake pointer for simulated UI walkthroughs — eased movement, four shapes, Ripple click feedback.",
+      "description": "A fake pointer for simulated UI walkthroughs, with eased movement, four shapes and Ripple click feedback.",
       "extends": [
         "Timing"
       ]
@@ -306,7 +306,7 @@
         "Cross-fade two elements",
         "Row expanding into a panel"
       ],
-      "description": "Lerps position/size/opacity between two caller-supplied snapshots — a simplified FLIP, not shape morphing.",
+      "description": "Lerps position, size and opacity between two caller-supplied snapshots. It is a simplified FLIP rather than shape morphing.",
       "extends": [
         "Timing"
       ]
@@ -325,7 +325,7 @@
         "Easing vs spring",
         "Seek & scrub"
       ],
-      "description": "The foundation every primitive builds on: useTimeline() / useProgress(), reading from whichever driver is mounted."
+      "description": "The foundation every primitive builds on: useTimeline() and useProgress(), which read from whichever driver is mounted."
     },
     {
       "name": "Pulse",
@@ -362,7 +362,7 @@
         "Loop=3, then settles",
         "Pulse a non-text sibling"
       ],
-      "description": "Looping scale/opacity breathing, driven by frame % period — never CSS animation.",
+      "description": "Looping scale and opacity breathing, driven by frame % period rather than by a CSS animation.",
       "extends": [
         "Timing"
       ]
@@ -408,7 +408,7 @@
         "from variants",
         "asChild (no layout box)"
       ],
-      "description": "Generic entrance animation — fade, directional slide, scale or blur — driven entirely by useProgress().",
+      "description": "Generic entrance animation (fade, directional slide, scale or blur), driven entirely by useProgress().",
       "extends": [
         "Timing"
       ]
@@ -501,7 +501,7 @@
       "demos": [
         "Axis variants"
       ],
-      "description": "Decaying-amplitude oscillation, deterministic via a seeded PRNG — never an unseeded random source.",
+      "description": "Decaying-amplitude oscillation, made deterministic by a seeded PRNG rather than an unseeded random source.",
       "extends": [
         "Timing"
       ]
@@ -579,7 +579,7 @@
         "One node in a diagram",
         "One card in a dashboard"
       ],
-      "description": "Dims everything except a focused rect via a box-shadow cut-out — never backdrop-filter.",
+      "description": "Dims everything except a focused rect with a box-shadow cut-out rather than a backdrop-filter.",
       "extends": [
         "Timing"
       ]
@@ -656,7 +656,7 @@
         "Fade",
         "Roll"
       ],
-      "description": "Cross-fade or roll between two strings without a layout jump — a hidden sizer reserves the space.",
+      "description": "Cross-fade or roll between two strings without a layout jump, because a hidden sizer reserves the space.",
       "extends": [
         "Timing"
       ]
@@ -716,7 +716,7 @@
         "Single token, looping",
         "Multiple tokens, spaced"
       ],
-      "description": "Tokens travelling along an SVG path — the data-flow primitive for architecture diagrams.",
+      "description": "Tokens travel along an SVG path. This is the data-flow primitive for architecture diagrams.",
       "extends": [
         "Timing"
       ]
@@ -804,7 +804,7 @@
       "demos": [
         "Directions & softness"
       ],
-      "description": "Soft-edged mask sweep — a gentler alternative to Wipe's hard clip-path edge, for headings and pull-quotes.",
+      "description": "Soft-edged mask sweep, a gentler alternative to Wipe's hard clip-path edge for headings and pull-quotes.",
       "extends": [
         "Timing"
       ]
@@ -840,7 +840,7 @@
         "Linear — 4 directions",
         "Radial"
       ],
-      "description": "clip-path reveal — linear (hard edge, 4 directions) or radial (circle growing from the direction's edge).",
+      "description": "clip-path reveal, either linear (hard edge, four directions) or radial (a circle that grows from the direction's edge).",
       "extends": [
         "Timing"
       ]
@@ -870,7 +870,7 @@
       "demos": [
         "Click-through presenter"
       ],
-      "description": "Click-through presentation of a Video: → or Space advances, ← reverses, Esc overviews, f fullscreens."
+      "description": "Step-through presentation of a Video: Space or → advances, ← reverses, Esc opens the overview, f fullscreens. Clicking the stage does nothing, so a live scene keeps its own pointer events."
     },
     {
       "name": "SpeakerView",
@@ -915,7 +915,7 @@
       "demos": [
         "Custom controls built from useSteps"
       ],
-      "description": "Headless step-navigation hook — the flattened (scene, step) list across a whole Video."
+      "description": "Headless step-navigation hook that flattens a whole Video into one (scene, step) list."
     },
     {
       "name": "BulletScene",
@@ -954,7 +954,7 @@
         "Bar — playing",
         "Gauge — no steps (single-beat draw-on)"
       ],
-      "description": "Wraps whichever chart ChartSpec.type selects, driving its progress prop step by step."
+      "description": "Wraps whichever chart ChartSpec.type selects and drives its progress prop step by step."
     },
     {
       "name": "CodeDiff",
@@ -1073,7 +1073,7 @@
         "Pinned mid-stagger (frame 10/90)",
         "Pinned at rest (frame 90/90)"
       ],
-      "description": "End card — title, subtitle, links and a closing call to action, staggering in as one beat."
+      "description": "End card with a title, subtitle, links and a closing call to action, all staggered in as one beat."
     },
     {
       "name": "SceneRenderer",
@@ -1093,7 +1093,7 @@
         "Bullets",
         "Diagram, chart, stat"
       ],
-      "description": "The single switch(scene.kind) consumers never touch. All eleven SceneKinds render for real — there is no placeholder branch."
+      "description": "The single switch(scene.kind) that consumers never touch. All eleven SceneKinds render for real; the switch has no placeholder branch."
     },
     {
       "name": "SequenceScene",
@@ -1111,7 +1111,7 @@
       "demos": [
         "Playing"
       ],
-      "description": "Wraps SequenceDiagram, one message or note per step. Activation bars are derived, never authored."
+      "description": "Wraps SequenceDiagram with one message or note per step. Activation bars are derived rather than authored."
     },
     {
       "name": "StatScene",
@@ -1129,7 +1129,7 @@
       "demos": [
         "Playing"
       ],
-      "description": "StatGrid with per-tile staggered CountUp, delta arrows and inline Sparklines — one step per tile."
+      "description": "StatGrid with per-tile staggered CountUp, delta arrows and inline Sparklines, one step per tile."
     },
     {
       "name": "TerminalScene",
@@ -1152,7 +1152,7 @@
         "Pinned at rest (frame 160/160)",
         "Prompt change (rows + scheme)"
       ],
-      "description": "Wraps Terminal, revealing one entry per step: command types in, spinner cycles, output and exit status land."
+      "description": "Wraps Terminal and reveals one entry per step: the command types in, the spinner cycles, then output and exit status land."
     },
     {
       "name": "TitleScene",
@@ -1173,7 +1173,7 @@
         "Pinned mid-stagger (frame 12/90)",
         "Pinned at rest (frame 90/90)"
       ],
-      "description": "Opening/chapter card — chapter eyebrow, title and subtitle stagger in together, timed off the scene's own content-derived duration."
+      "description": "Opening or chapter card. The chapter eyebrow, title and subtitle stagger in together, timed off the scene's own content-derived duration."
     },
     {
       "name": "Validation",
@@ -1187,7 +1187,7 @@
         "Deliberately broken video",
         "Valid, minimal video"
       ],
-      "description": "validateVideo(video) run against a deliberately broken Video — every runtime check, made visible."
+      "description": "validateVideo(video) run against a deliberately broken Video, so every runtime check is visible."
     },
     {
       "name": "WalkthroughScene",
@@ -1205,7 +1205,7 @@
       "demos": [
         "Playing"
       ],
-      "description": "DeviceFrame, Cursor and Spotlight over a static screenshot — the alternative to a screen recording."
+      "description": "DeviceFrame, Cursor and Spotlight over a static screenshot, as an alternative to a screen recording."
     },
     {
       "name": "Annotation",
@@ -1265,7 +1265,7 @@
         "Vertical sides (top/bottom)",
         "Progress reveal"
       ],
-      "description": "A callout/leader-line pointing at a target point — for highlighting part of a diagram or screenshot in a video. Leader-line path math (and the arrow marker's angle) come straight from connection-line/geometry.ts; no new path math.",
+      "description": "A callout with a leader line that points at a target, for picking out part of a diagram or screenshot in a video. Its path math and arrow-marker angle come straight from connection-line/geometry.ts.",
       "extends": [
         "Omit<HTMLAttributes<HTMLDivElement>, \"children\">"
       ]
@@ -1362,7 +1362,7 @@
         "Parallel edges (automatic bundling)",
         "Edge states share the same visual language as ConnectionLine"
       ],
-      "description": "One shared <svg> for N edges — path, arrowhead and label rendering reused from ConnectionLine's ConnectionPath, not duplicated. Prefer this over stacking many standalone ConnectionLines for diagrams with lots of edges.",
+      "description": "One shared <svg> for N edges, with path, arrowhead and label rendering reused from ConnectionLine's ConnectionPath. Prefer it over stacking many standalone ConnectionLines when a diagram has a lot of edges.",
       "extends": [
         "Omit<SVGAttributes<SVGSVGElement>, \"id\">"
       ]
@@ -1487,7 +1487,7 @@
       "demos": [
         "Pipeline editor (drag nodes, connect ports, delete selected)"
       ],
-      "description": "A composed pattern combining Canvas, GraphNode, and Edge into a drag-and-drop pipeline editor."
+      "description": "A composed pattern that combines Canvas, GraphNode and Edge into a drag-and-drop pipeline editor."
     },
     {
       "name": "GraphGroup",
@@ -1542,7 +1542,7 @@
         "Architecture boundaries",
         "Label placement"
       ],
-      "description": "A labelled boundary region — VPC, cluster, service boundary — drawn behind the nodes and edges it encloses. Render groups before nodes in JSX: stacking is DOM order, not z-index.",
+      "description": "A labelled boundary region (a VPC, a cluster, a service boundary) drawn behind the nodes and edges it encloses. Render groups before nodes in JSX, because stacking here is DOM order rather than z-index.",
       "variantDefaults": {
         "border": "dashed"
       },
@@ -1700,7 +1700,7 @@
         "Socket shape — all states",
         "Circle vs socket, side by side"
       ],
-      "description": "shape=\"circle\" is a freestanding full disc. shape=\"socket\" is a true half-disc (SVG geometry, not clipping) meant to sit exactly on a node's border — see GraphNode's row ports.",
+      "description": "shape=\"circle\" is a freestanding full disc; shape=\"socket\" is a true half-disc built from SVG geometry rather than by clipping, meant to sit exactly on a node's border. See GraphNode's row ports.",
       "variantDefaults": {
         "side": "in",
         "state": "default"
@@ -1865,7 +1865,7 @@
         "Loading",
         "Empty"
       ],
-      "description": "Shared chart chrome — measurement, axes, gridlines, legend, tooltip layer, empty/loading states. Every chart in this library composes it instead of re-implementing axis code."
+      "description": "Shared chart chrome: measurement, axes, gridlines, legend, tooltip layer and empty/loading states. Every chart in this library composes it instead of re-implementing axis code."
     },
     {
       "name": "Funnel",
@@ -2020,7 +2020,7 @@
         "Empty",
         "Draw-on progress (50%)"
       ],
-      "description": "Matrix on the sequential ramp — latency grids, activity calendars. Cells fade in by rank (lowest value first) as `progress` sweeps 0→1."
+      "description": "Matrix on the sequential ramp, for latency grids and activity calendars. Cells fade in by rank, lowest value first, as `progress` sweeps 0→1."
     },
     {
       "name": "Legend",
@@ -2293,7 +2293,7 @@
         "Empty",
         "Draw-on progress (50%)"
       ],
-      "description": "Inline micro-chart, no axes — feeds StatCard's trend slot. Draws left-to-right as `progress` sweeps 0→1."
+      "description": "Inline micro-chart with no axes, which feeds StatCard's trend slot. It draws left to right as `progress` sweeps 0→1."
     },
     {
       "name": "CellType",
@@ -2414,8 +2414,11 @@
         "Alignment",
         "Scrolling"
       ],
-      "description": "A label/value list (definition list) for record-detail views — the non-tabular counterpart to Table/DataTable.",
+      "description": "A label/value list (a definition list) for record-detail views, the non-tabular counterpart to Table and DataTable.",
       "parent": "Table",
+      "variantDefaults": {
+        "striped": "false"
+      },
       "extends": [
         "HTMLAttributes<HTMLDListElement>",
         "VariantProps<typeof dataListVariants>"
@@ -2503,7 +2506,7 @@
         "Truncation & expand",
         "Sticky header"
       ],
-      "description": "The raw compositional table primitives (Table/TableHeader/TableBody/TableRow/TableHead/TableCell) — DataTable is the data-driven pattern built on top of these for typical use. Reach for Table directly when you need bespoke markup a data-driven API can't express.",
+      "description": "The raw compositional table primitives: Table, TableHeader, TableBody, TableRow, TableHead and TableCell. DataTable is the data-driven pattern built on them for typical use; reach for Table directly when you need markup a data-driven API cannot express.",
       "parent": "Table",
       "variantDefaults": {
         "variant": "default"
@@ -2567,7 +2570,7 @@
         "Vertical — single lane",
         "Vertical — lanes"
       ],
-      "description": "Data-driven horizontal/vertical event sequences with optional lanes — roadmaps, request traces, git history. Events can be instants or spans (`until`). Draws no graph edges.",
+      "description": "Data-driven horizontal or vertical event sequences with optional lanes, for roadmaps, request traces and git history. Events can be instants or spans (`until`), and the component draws no graph edges.",
       "extends": [
         "HTMLAttributes<HTMLDivElement>"
       ]
@@ -2793,7 +2796,7 @@
         "focusRange": {
           "type": "[number, number]",
           "optional": true,
-          "doc": "1-based line numbers outside this `[start, end]` range get a reduced opacity (the `opacity-muted` token) instead of full contrast — the \"focus on this range, dim the rest\" treatment a code walkthrough needs."
+          "doc": "1-based line numbers outside this `[start, end]` range get a reduced opacity (the `opacity-focus-dim` token) instead of full contrast — the \"focus on this range, dim the rest\" treatment a code walkthrough needs."
         },
         "lineId": {
           "type": "(lineNumber: number) => string",
@@ -2866,7 +2869,7 @@
         "Window",
         "Phone"
       ],
-      "description": "Browser / window / phone chrome around arbitrary children — for showing UI on screen without a real screen recording.",
+      "description": "Browser, window or phone chrome around arbitrary children, for putting UI on screen without a real screen recording.",
       "variantDefaults": {
         "variant": "browser"
       },
@@ -2924,7 +2927,7 @@
         "Split — word diff",
         "Elevated"
       ],
-      "description": "Unified and side-by-side diff views, reusing CodeBlock's tokenizer for syntax color and a token-level LCS for optional word diff.",
+      "description": "Unified and side-by-side diff views. They reuse CodeBlock's tokenizer for syntax color and a token-level LCS for the optional word diff.",
       "variantDefaults": {
         "variant": "default"
       },
@@ -3230,7 +3233,7 @@
         "Fixed height, scrolls as content grows",
         "Prompt segments, changed mid-session"
       ],
-      "description": "Prompt/command/output/exit-status sequences, composing CodeBlock for output bodies. Data-driven via a typed entries array.",
+      "description": "Prompt, command, output and exit-status sequences, driven by a typed entries array. Output renders as plain terminal text, colorized by the shared code tokenizer when an entry names a language.",
       "variantDefaults": {
         "variant": "default",
         "scheme": "default",
@@ -3852,16 +3855,28 @@
         "variant": [
           "muted",
           "primary"
+        ],
+        "underline": [
+          "false",
+          "true"
         ]
       },
-      "props": {},
+      "props": {
+        "underline": {
+          "type": "boolean",
+          "optional": true,
+          "doc": "Underline the label on hover."
+        }
+      },
       "demos": [
         "Variants",
+        "underline={false}",
         "In a sentence"
       ],
-      "description": "A styled <a> — the primitive underneath any real, navigable link (OutroScene's link list, prose, cards).",
+      "description": "A styled <a>, the primitive underneath any real navigable link: OutroScene's link list, prose, cards.",
       "variantDefaults": {
-        "variant": "primary"
+        "variant": "primary",
+        "underline": "true"
       },
       "extends": [
         "AnchorHTMLAttributes<HTMLAnchorElement>",
@@ -4123,7 +4138,7 @@
         "Wipe (draggable)",
         "Wipe — progress-driven"
       ],
-      "description": "Before/after — side-by-side two-column or an overlay wipe with a draggable divider. Divider position is controlled/uncontrolled, or driven by an animation-friendly `progress` prop (0→1) without importing src/motion/.",
+      "description": "Before and after, either as two side-by-side columns or as an overlay wipe with a draggable divider. The divider position can be controlled, uncontrolled, or driven by a `progress` prop (0→1) so a scene can animate it without importing src/motion/.",
       "extends": [
         "Omit<HTMLAttributes<HTMLDivElement>, \"onChange\">"
       ]
@@ -4194,7 +4209,7 @@
         "Project tree with git status",
         "Compact density"
       ],
-      "description": "A file/folder tree for \"here's the project structure\" moments in coding videos — a pattern over TreeView, not a fork of it. Shapes FileTreeNode[] into TreeNode[] (icons, a git-status badge, a trailing metadata readout) and renders TreeView.",
+      "description": "A file and folder tree for the \"here's the project structure\" moment in a coding video, built as a pattern over TreeView rather than a fork of it. It shapes FileTreeNode[] into TreeNode[] with icons, a git-status badge and a trailing metadata readout, then renders TreeView.",
       "extends": [
         "Pick<TreeViewProps, \"defaultExpandedDepth\" | \"expandedKeys\" | \"onToggle\" | \"density\" | \"indent\">"
       ]
@@ -4304,7 +4319,7 @@
         "Self-messages, spanning note, error path",
         "Progress reveal"
       ],
-      "description": "UML-style sequence diagram — participant lanes, dashed lifelines, messages as ConnectionLayer edges, activation bars, and notes. Every coordinate is a GRID (16) multiple; message arrows are never hand-drawn <path>s.",
+      "description": "UML-style sequence diagram with participant lanes, dashed lifelines, messages as ConnectionLayer edges, activation bars and notes. Every coordinate is a multiple of GRID (16), and message arrows come from ConnectionLayer rather than from hand-drawn <path>s.",
       "extends": [
         "Omit<HTMLAttributes<HTMLDivElement>, \"children\">"
       ]
@@ -4384,7 +4399,7 @@
         "Size",
         "positiveIsGood"
       ],
-      "description": "A KPI row as one component — data-driven StatGrid over StatCard, instead of a call-site grid of individually placed StatCards.",
+      "description": "A KPI row as one component: a data-driven StatGrid over StatCard, instead of a call-site grid of individually placed StatCards.",
       "extends": [
         "HTMLAttributes<HTMLDivElement>"
       ]

package/dist/{chunk-AAPYU7IQ.js → chunk-4H6HZ7AV.js}

@@ -40,7 +40,7 @@ import {
   snap,
   splitTokensByLine,
   tokenize
-} from "./chunk-OBWYV42U.js";
+} from "./chunk-E2GYVGDJ.js";
 import {
   Camera,
   CountUp,
@@ -58,7 +58,7 @@ import {
   resolveBeatFrames,
   useProgress,
   useSequence
-} from "./chunk-YWX2ZFH4.js";
+} from "./chunk-NQR657Q6.js";
 import {
   formatBytesParts,
   formatCurrencyParts,
@@ -931,11 +931,22 @@ function codeStepContent(step, sceneCode, isFirst) {
   if (step.highlight && step.highlight.length > 0) return joinText(step.highlight);
   return void 0;
 }
+var CODE_STEP_MIN_SECONDS = 1.5;
+var CODE_TRANSITION_SHARE = 0.55;
+var CODE_TRANSITION_MAX_SECONDS = 1.2;
+var CODE_TRANSITION_MIN_SECONDS = 0.6;
+function codeTransitionFrames(stepFrames, fps) {
+  const share = Math.round(stepFrames * CODE_TRANSITION_SHARE);
+  const capped = Math.min(share, Math.round(CODE_TRANSITION_MAX_SECONDS * fps));
+  const floored = Math.max(capped, Math.round(CODE_TRANSITION_MIN_SECONDS * fps));
+  return Math.max(1, Math.min(floored, stepFrames - 1));
+}
 function codeSteps(scene) {
   return scene.steps.map((step, i) => ({
     name: stepName(step.id, i),
     content: codeStepContent(step, scene.code, i === 0),
-    hold: step.hold
+    hold: step.hold,
+    minSeconds: CODE_STEP_MIN_SECONDS
   }));
 }
 function terminalSteps(scene) {
@@ -1325,6 +1336,7 @@ var MAX_ZOOM = 1.6;
 function useCodeCameraKeyframes(scene, ranges, blockId) {
   const containerRef = useRef3(null);
   const [keyframes, setKeyframes] = useState3([]);
+  const { fps } = useTimeline();
   useLayoutEffect3(() => {
     const container = containerRef.current;
     if (!container) return void 0;
@@ -1345,14 +1357,25 @@ function useCodeCameraKeyframes(scene, ranges, blockId) {
         const focus = union(els);
         return { at, focus, zoom: zoomFor(focus) };
       };
-      const next = scene.steps.map((step, i) => {
-        const at = ranges[stepName(step.id, i)].startFrame;
-        if (!step.focus) return frameFor(at, allLines());
+      const targetFor = (step) => {
+        if (!step.focus) return allLines();
         const [start, end] = step.focus;
         const startEl = document.getElementById(lineElementId(blockId, start));
         const endEl = document.getElementById(lineElementId(blockId, end));
-        if (!startEl || !endEl) return frameFor(at, allLines());
-        return frameFor(at, [startEl, endEl]);
+        return startEl && endEl ? [startEl, endEl] : allLines();
+      };
+      const next = [];
+      scene.steps.forEach((step, i) => {
+        const range = ranges[stepName(step.id, i)];
+        const arrival = frameFor(range.startFrame, targetFor(step));
+        if (i === 0) {
+          next.push(arrival);
+          return;
+        }
+        const held = next[next.length - 1];
+        next.push({ at: range.startFrame, focus: held.focus, zoom: held.zoom });
+        const move = codeTransitionFrames(range.endFrame - range.startFrame, fps);
+        next.push({ ...arrival, at: range.startFrame + move });
       });
       setKeyframes((prev) => keyframesEqual(prev, next) ? prev : next);
     };
@@ -1360,7 +1383,7 @@ function useCodeCameraKeyframes(scene, ranges, blockId) {
     const observer = new ResizeObserver(measure);
     observer.observe(container);
     return () => observer.disconnect();
-  }, [scene, ranges, blockId]);
+  }, [scene, ranges, blockId, fps]);
   return { containerRef, keyframes };
 }
 
@@ -1409,7 +1432,6 @@ 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, "");
@@ -1423,7 +1445,7 @@ function currentStepIndex(scene, ranges, frame) {
 }
 function CodeScene({ scene }) {
   const ranges = useSequence(sceneSteps(scene), scene.pace);
-  const { frame } = useTimeline();
+  const { frame, fps } = useTimeline();
   const blockId = `code-${useId().replace(/:/g, "")}`;
   const { before, after } = useMemo3(() => runningSources(scene), [scene]);
   const hasSteps = scene.steps.length > 0;
@@ -1441,7 +1463,7 @@ function CodeScene({ scene }) {
     () => buildHighlightRanges(nextSource, step.focus, step.highlight),
     [nextSource, step.focus, step.highlight]
   );
-  const diffFrames = Math.max(1, Math.round((range.endFrame - range.startFrame) * DIFF_SHARE));
+  const diffFrames = codeTransitionFrames(range.endFrame - range.startFrame, fps);
   const isDiff = !step.typed && nextSource !== prevSource && frame < range.startFrame + diffFrames;
   const isTyped = Boolean(step.typed);
   const typedCode = isTyped ? typedSlice(nextSource, stepProgress) : nextSource;

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

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