@kitlangton/knobs 0.4.0-next.1 → 0.4.0-next.3

package/dist/ui-react.js

@@ -571,12 +571,20 @@ var compareCss = `
   display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select:none;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-cmp-mode,.knobs-cmp-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
-.knobs-cmp-modes{display:flex;align-items:center;gap:2px}
-.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--_k-radius) - 2px));color:var(--_k-fg-3);cursor:pointer;white-space:nowrap;
-  transition:color .15s,background .15s}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-ui .knobs-cmp-mode[aria-checked="true"],.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}
+/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being
+   picked: the pill's bright copy is. */
+.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}
+.knobs-cmp-modes[hidden]{display:none}
+.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
+  transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}
+/* Toggles: icon buttons, the accent's wash when on. */
+.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-3);cursor:pointer;
+  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
+.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
+.knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
 .knobs-cmp-toggle[hidden]{display:none}
 /* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked
@@ -591,7 +599,8 @@ var compareCss = `
 /* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */
 .knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}
 .knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}
-.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:ew-resize!important}
+/* Wiping, the grip stands in for the cursor. */
+.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}
 .knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
 .knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 .knobs-cmp-media{position:absolute;left:0;top:0;display:block;max-width:none;margin:0;padding:0;border:0;object-fit:fill;transform-origin:0 0;pointer-events:none;will-change:transform}
@@ -599,18 +608,21 @@ var compareCss = `
 /* Glass: what's behind shows through, blurred, on the knobs tokens. */
 .knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
   box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim),0 2px 10px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
-.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color .15s}
-.knobs-cmp-label[data-lit]{color:var(--_k-fg)}
-.knobs-cmp-label[data-dim]{color:var(--_k-fg-3)}
-/* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and
-   the keys (a slider). It fades with the mode. */
+.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color calc(var(--_k-hover-out) * 1ms)}
+/* The wipe: a hairline down the line with a raised grip at the pointer's height; a wider strip
+   takes the hand and the keys (a slider). It fades with the mode; wiping, line and grip brighten. */
 .knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform;transition:opacity .18s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
-.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:var(--_ku-cmp-line);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
-.knobs-cmp-handle::after{content:"";position:absolute;top:50%;left:9px;width:6px;height:28px;margin-top:-14px;border-radius:3px;background:var(--_ku-cmp-line);
-  box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2);transition:scale .18s var(--_ku-ease),box-shadow .15s}
-.knobs-compare[data-dragging] .knobs-cmp-handle::after{scale:1.12}
-.knobs-cmp-handle:focus-visible::after,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus::after{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--_k-accent) 40%,transparent)}
+.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:color-mix(in srgb,var(--_ku-cmp-line) 72%,transparent);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
+.knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}
+.knobs-cmp-grip{position:absolute;top:0;left:4px;width:16px;height:28px;border-radius:min(8px,calc(var(--_k-radius) * 999));background:var(--_k-bg-overlay);
+  box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border),inset 0 1px 0 var(--_k-rim);will-change:transform;transition:box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:"";position:absolute;top:10px;width:1px;height:8px;background:var(--_k-fg-3);transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before{left:6px}
+.knobs-cmp-grip::after{left:9px}
+.knobs-compare[data-dragging] .knobs-cmp-grip{box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border-strong),inset 0 1px 0 var(--_k-rim)}
+.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_k-fg)}
+.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:var(--_k-shadow-overlay),0 0 0 2px var(--_k-accent)}
 /* The split's hairline, down the middle side by side. */
 .knobs-cmp-split{position:absolute;left:0;top:0;width:1px;height:0;margin-left:-.5px;background:color-mix(in srgb,var(--_k-bg) 72%,transparent);pointer-events:none;will-change:transform,opacity}
 /* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */
@@ -619,12 +631,12 @@ var compareCss = `
   opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
-  height:20px;padding:0 8px;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
 :where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent)}
 .knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
-.knobs-cmp-timeline-host{flex:none;height:56px;min-height:0}
+.knobs-cmp-timeline-host{flex:none;min-height:0}
 /* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */
 .knobs-ui.knobs-cmp-strip{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg)}
@@ -767,7 +779,7 @@ var init_picker_css = __esm(() => {
 .knobs-picker-suggested{flex:none;color:var(--_k-fg-3);font-size:var(--_k-text-meta)}
 .knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--_k-accent);opacity:0;scale:.6;filter:blur(2px);
   transition:opacity .11s ease-in,scale .11s ease-in,filter .11s ease-in}
-.knobs-picker-check svg{display:block;width:14px;height:14px}
+.knobs-picker-check svg{display:block;width:12px;height:12px}
 .knobs-picker-option[data-chosen] .knobs-picker-check{opacity:1;scale:1;filter:none;transition:opacity .15s ease-out,scale var(--kp-snappy-ms) var(--kp-snappy),filter .15s ease-out}
 .knobs-picker-body{position:relative;overflow:visible}
 .knobs-picker-body[data-moving]{overflow:hidden}
@@ -871,6 +883,15 @@ var readoutCss = `
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
 
+// src/ui/selection-pill-css.ts
+var selectionPillCss = `
+.knobs-pick-pill,.knobs-pick-copy{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity .1s linear}
+.knobs-pick-pill{background:var(--_k-fill-selected);will-change:transform}
+.knobs-pick-copy{overflow:hidden;will-change:transform}
+.knobs-pick-copy-rows{position:absolute;left:0;top:0;width:0;height:0}
+:is(.knobs-pick-pill,.knobs-pick-copy)[data-off]{opacity:0}
+`;
+
 // src/tokens/color.ts
 function linearToOklch([r, g, b, a]) {
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
@@ -2719,11 +2740,9 @@ var css2 = `
 .knobs-tree:focus .knobs-tree-row[data-active][aria-selected="true"]::before{background:var(--_ku-select-focus)}
 .knobs-tree-row[data-drop="into"]::before{opacity:1;background:color-mix(in srgb,var(--_k-accent) 30%,transparent)}
 .knobs-tree-row[data-dragged]{opacity:.38}
-/* glide: one highlight under the selected row that glides between rows (the row's own stays off). */
-.knobs-tree-cursor{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;height:var(--_k-row);border-radius:var(--_ku-row-radius);background:var(--_ku-select);
-  opacity:0;pointer-events:none;will-change:transform;transition:opacity .15s ease-out,background .12s}
-.knobs-tree-cursor[data-on]{opacity:1}
-.knobs-tree:focus .knobs-tree-cursor{background:var(--_ku-select-focus)}
+/* glide: the selection pill on the selected row, in the selection's colour (the row's own stays off). */
+.knobs-tree>.knobs-pick-pill{background:var(--_ku-select)}
+.knobs-tree:focus>.knobs-pick-pill{background:var(--_ku-select-focus)}
 .knobs-tree[data-glide] .knobs-tree-row[aria-selected="true"]::before{opacity:0!important}
 .knobs-tree-row>*{position:relative}
 .knobs-tree-caret{flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:100%;color:var(--_k-fg-3);transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
@@ -2755,22 +2774,20 @@ var css2 = `
   box-shadow:0 0 0 1px var(--_k-border-strong),0 6px 18px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));pointer-events:none;white-space:nowrap;font:var(--_k-weight) var(--_k-font-size)/1.6 var(--_k-font)}
 .knobs-tree-empty{padding:10px var(--_k-inset);color:var(--_k-fg-3)}
 
-/* Timeline: a transport (play, the time) beside a track: the ruler's canvas over a lane of
-   markers, ranges as soft bands, and the playhead, a hairline in the accent with a cap. */
+/* Timeline: play beside a track: the ruler's canvas over a lane of markers, ranges as soft bands,
+   and the playhead, a hairline in the accent with a cap. No clock: the time shows under the
+   pointer on the track (the tag), in seconds, while hovering or scrubbing. */
 :where(.knobs-timeline,.knobs-timeline *){box-sizing:border-box}
 .knobs-ui.knobs-timeline{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;min-height:52px;padding:6px var(--_k-inset) 8px 8px;outline:none;user-select:none;-webkit-user-select:none;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-tl-play,.knobs-tl-edit){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-tl-transport{flex:none;display:flex;align-items:center;gap:8px;min-width:96px}
+.knobs-tl-transport{flex:none;display:flex;align-items:center}
 .knobs-ui .knobs-tl-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);min-width:22px;min-height:22px;border-radius:calc(var(--_k-radius) * 999);
   background:var(--_k-fill-selected);color:var(--_k-fg);cursor:pointer;transition:background .15s,transform .15s var(--_ku-ease)}
 .knobs-ui .knobs-tl-play:hover{background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
 .knobs-ui .knobs-tl-play:active{transform:scale(.94)}
 .knobs-tl-play svg{width:12px;height:12px}
 .knobs-timeline[data-playing] .knobs-tl-play{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--_k-weight) var(--_k-value-size)/1.2 var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--_k-fg);white-space:nowrap}
-.knobs-tl-sub{font-size:var(--_k-text-meta);color:var(--_k-fg-3);white-space:nowrap}
 .knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--_k-radius);background:var(--_k-fill);cursor:col-resize;touch-action:none;
   transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--_k-fill-selected) 80%,transparent)}
@@ -2794,7 +2811,8 @@ var css2 = `
 .knobs-tl-pin{position:absolute;top:13px;left:-5px;width:10px;height:10px;pointer-events:auto;cursor:grab}
 .knobs-tl-pin::after{content:"";position:absolute;inset:1.5px;border-radius:min(2px,var(--_k-radius));background:var(--knobs-tl-c);rotate:45deg;transition:background .15s,scale .2s var(--_ku-ease)}
 .knobs-tl-mlabel{position:absolute;top:26px;left:3px;max-width:140px;padding:0 6px;border-radius:max(0px,calc(var(--_k-radius) - 3px));background:var(--_k-fill-selected);color:var(--_k-fg);
-  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+.knobs-tl-mtext{display:block;overflow:hidden;white-space:nowrap}
 .knobs-tl-marker[data-selected]{--knobs-tl-c:var(--_k-accent)}
 .knobs-tl-marker[data-selected] .knobs-tl-mlabel{background:color-mix(in srgb,var(--_k-accent) 24%,var(--_k-fill-selected))}
 .knobs-tl-marker[data-selected] .knobs-tl-pin::after{scale:1.2}
@@ -2815,7 +2833,22 @@ var css2 = `
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
 @media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
 @media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
-`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
+.knobs-tl-tag{position:absolute;left:0;bottom:2px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none;opacity:0}
+.knobs-tl-tag[data-on]{opacity:1}
+/* The lane (variant: "lane"): one slim track of ticks under a compare or a video; markers are
+   faint chapter ticks, the current one in text colour; nothing to edit. */
+.knobs-ui.knobs-timeline[data-variant="lane"]{height:auto;min-height:0;padding:0;gap:var(--_k-gap)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-track{height:var(--_k-control-h)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-ruler{height:100%}
+.knobs-timeline[data-variant="lane"] .knobs-tl-lane{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker::before{top:0;bottom:50%;left:-.75px;width:1.5px;background:var(--_k-fg-3)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker[data-current]::before{background:var(--_k-fg)}
+.knobs-timeline[data-variant="lane"] :is(.knobs-tl-pin,.knobs-tl-mlabel,.knobs-tl-rlabel){display:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::before{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::after{content:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-tag{top:2px;bottom:auto}
+`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + selectionPillCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -2973,33 +3006,29 @@ var init_diff_css = __esm(() => {
 .knobs-diff-fill{flex:1}
 .knobs-diff-nav{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-nav>span{min-width:3.6em;text-align:center}
-:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-seg>button,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
+:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-choice,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
   margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
+.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background .15s,color .15s,opacity .15s}
 .knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
-.knobs-diff-btn svg{width:13px;height:13px}
+.knobs-diff-btn svg{width:16px;height:16px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
 .knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
   font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
 .knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-diff-viewed svg{width:13px;height:13px}
+.knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
 .knobs-diff-path{transition:opacity .2s}
 .knobs-diff[data-viewed]>.knobs-diff-head .knobs-diff-path,.knobs-diff-part[data-viewed] .knobs-diff-path{opacity:.6}
-/* Split | Unified: one pill that glides between the two, raised as a panel's segments are (a
-   lighter bg in dark, near white in light). */
-.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-segmented-track)}
-.knobs-ui .knobs-diff-seg>button{position:relative;z-index:1;padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
-  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color .15s}
-.knobs-ui .knobs-diff-seg>button:is(:hover,:focus-visible),.knobs-ui .knobs-diff-seg>button[aria-checked="true"]{color:var(--_k-fg)}
-.knobs-diff-pill{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:max(0px,calc(var(--kd-ctl) - 2px));background:color-mix(in srgb,var(--_k-accent) 18%,var(--_k-segmented-active));
-  box-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift,1)));transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
-.knobs-diff-seg[data-value="unified"]>.knobs-diff-pill{transform:translateX(100%)}
-.knobs-diff[data-frame="flat"] .knobs-diff-pill{box-shadow:none}
+/* Split | Unified: the selection pill on the one picked, its bright copy the picked one's text; a
+   choice isn't brighter for being picked. Choices are styled by class, as the copy holds them too. */
+.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-fill)}
+.knobs-ui .knobs-diff-choice{padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
+  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg)}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
 .knobs-diff-body{position:relative;flex:1;min-height:0}
 .knobs-diff-probe{position:absolute;left:0;top:0;width:0;height:var(--kd-line);visibility:hidden;pointer-events:none}
@@ -3094,7 +3123,7 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
 .knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
 .knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-diff-filter>button svg{width:10px;height:10px}
+.knobs-diff-filter>button svg{width:12px;height:12px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
 .knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
 .knobs-diff-files .knobs-diff-counts{gap:5px}
@@ -3861,6 +3890,283 @@ var init_rgba = __esm(() => {
   cache = new Map;
 });
 
+// src/ui/icons.ts
+function icon(name, options = {}) {
+  const size = options.small ? 12 : 16;
+  return `<svg class="knobs-icon" viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor" aria-hidden="true" focusable="false"><path d="${PATHS[name]}"/></svg>`;
+}
+var PATHS, ICON_NAMES;
+var init_icons = __esm(() => {
+  PATHS = {
+    arrowLeft: "M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z",
+    arrowUpRight: "M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z",
+    arrowSquareOut: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z",
+    arrowCounterClockwise: "M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z",
+    arrowUDownLeft: "M232,112a64.07,64.07,0,0,1-64,64H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L51.31,160H168a48,48,0,0,0,0-96H80a8,8,0,0,1,0-16h88A64.07,64.07,0,0,1,232,112Z",
+    arrowsHorizontal: "M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z",
+    caretDown: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z",
+    caretLeft: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    caretRight: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    caretUp: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z",
+    check: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z",
+    checkCircle: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    circle: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z",
+    copy: "M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z",
+    cornersIn: "M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z",
+    cornersOut: "M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z",
+    folder: "M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33L123.2,86.4A8,8,0,0,0,128,88h88Z",
+    keyboard: "M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z",
+    magnifyingGlass: "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z",
+    magnifyingGlassMinus: "M152,112a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h64A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    magnifyingGlassPlus: "M152,112a8,8,0,0,1-8,8H120v24a8,8,0,0,1-16,0V120H80a8,8,0,0,1,0-16h24V80a8,8,0,0,1,16,0v24h24A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    microphone: "M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z",
+    paperPlaneRight: "M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z",
+    pencilSimple: "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z",
+    repeat: "M24,128A72.08,72.08,0,0,1,96,56H204.69L194.34,45.66a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L204.69,72H96a56.06,56.06,0,0,0-56,56,8,8,0,0,1-16,0Zm200-8a8,8,0,0,0-8,8,56.06,56.06,0,0,1-56,56H51.31l10.35-10.34a8,8,0,0,0-11.32-11.32l-24,24a8,8,0,0,0,0,11.32l24,24a8,8,0,0,0,11.32-11.32L51.31,200H160a72.08,72.08,0,0,0,72-72A8,8,0,0,0,224,120Z",
+    sidebar: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z",
+    x: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+  };
+  ICON_NAMES = Object.keys(PATHS);
+});
+
+// src/ui/selection-pill.ts
+function pillSpring(distance, base = SPRINGS.default) {
+  return distance > 400 ? { duration: base.duration * 1.4, bounce: base.bounce } : base;
+}
+function pillBoxOf(row, container) {
+  return {
+    x: row.left - container.left - container.clientLeft + container.scrollLeft,
+    y: row.top - container.top - container.clientTop + container.scrollTop,
+    w: row.width,
+    h: row.height
+  };
+}
+function pillRadius(from, to, h, k) {
+  const t = Math.abs(to.h - from.h) > 0.5 ? (h - from.h) / (to.h - from.h) : Number.isFinite(k) ? k : 1;
+  return from.r + (to.r - from.r) * Math.min(1, Math.max(0, t));
+}
+function pillProgress(from, to, at) {
+  const d = Math.hypot(to.x - from.x, to.y - from.y);
+  if (d < 0.5)
+    return 1;
+  const p = ((at.x - from.x) * (to.x - from.x) + (at.y - from.y) * (to.y - from.y)) / (d * d);
+  return Math.min(1, Math.max(0, p));
+}
+function planPill(state, next, flags = {}) {
+  if (!next)
+    return { kind: "hide" };
+  if (!state.shown || !state.at || flags.first || flags.reduced || flags.snap)
+    return { kind: "land", box: next };
+  const t = state.target;
+  if (t && t.x === next.x && t.y === next.y && t.w === next.w && t.h === next.h)
+    return { kind: "stay" };
+  const d = Math.hypot(next.x - state.at.x, next.y - state.at.y);
+  return { kind: "travel", box: next, spring: pillSpring(d) };
+}
+function selectionPill(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  injectUiStyles(doc);
+  if (win.getComputedStyle(container).position === "static")
+    container.style.position = "relative";
+  const pill = doc.createElement("i");
+  pill.className = "knobs-pick-pill";
+  pill.setAttribute("aria-hidden", "true");
+  pill.dataset.off = "";
+  const copyOn = options.copy !== false;
+  const copy = doc.createElement("div");
+  copy.className = "knobs-pick-copy";
+  copy.setAttribute("aria-hidden", "true");
+  copy.inert = true;
+  copy.dataset.off = "";
+  const copyRows = doc.createElement("div");
+  copyRows.className = "knobs-pick-copy-rows";
+  copy.append(copyRows);
+  container.prepend(pill);
+  if (copyOn)
+    container.append(copy);
+  const { omega, zeta } = springMotion(SPRINGS.default);
+  const springs = [0, 0, 0, 0].map(() => new Spring(0, omega, zeta, 0.01));
+  const [sx, sy, sw, sh] = springs;
+  let shown = false;
+  let first = true;
+  let target = null;
+  let from = { x: 0, y: 0, w: 0, h: 0 };
+  let fromR = 0;
+  let toR = 0;
+  let rowBoxes = [];
+  const clones = new Map;
+  let disposed = false;
+  const radiusOf = (row) => options.radius?.(row) ?? (Number.parseFloat(win.getComputedStyle(row).borderTopLeftRadius) || 0);
+  const rowsNow = () => options.rows ? [...options.rows()] : [...container.children].filter((n) => n !== pill && n !== copy);
+  const measure = (row) => {
+    const c = container.getBoundingClientRect();
+    const r = row.getBoundingClientRect();
+    return pillBoxOf(r, {
+      left: c.left,
+      top: c.top,
+      scrollLeft: container.scrollLeft,
+      scrollTop: container.scrollTop,
+      clientLeft: container.clientLeft,
+      clientTop: container.clientTop
+    });
+  };
+  const at = () => ({ x: sx.x, y: sy.x, w: sw.x, h: sh.x });
+  const syncCopy = (span) => {
+    if (!copyOn)
+      return;
+    const keep = new Set;
+    for (const { row, box } of rowBoxes) {
+      if (!boxesMeet(box, span))
+        continue;
+      keep.add(row);
+      let n = clones.get(row);
+      if (!n) {
+        n = row.cloneNode(true);
+        n.removeAttribute("id");
+        for (const d of n.querySelectorAll("[id]"))
+          d.removeAttribute("id");
+        clones.set(row, n);
+        copyRows.append(n);
+      }
+      const s = n.style;
+      s.position = "absolute";
+      s.inset = "auto";
+      s.left = `${box.x}px`;
+      s.top = `${box.y}px`;
+      s.width = `${box.w}px`;
+      s.height = `${box.h}px`;
+      s.margin = "0";
+      s.transform = "none";
+      s.clipPath = "";
+      s.opacity = "";
+      s.boxSizing = "border-box";
+      s.color = options.color ?? "var(--_k-fg)";
+    }
+    for (const [row, n] of clones)
+      if (!keep.has(row)) {
+        n.remove();
+        clones.delete(row);
+      }
+  };
+  const paint = () => {
+    const b = at();
+    const x0 = grid(b.x);
+    const y0 = grid(b.y);
+    const w = grid(b.x + b.w) - x0;
+    const h = grid(b.y + b.h) - y0;
+    const r = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, b.h, pillProgress(from, target, b)) : toR;
+    const radius = `${Math.max(0, Math.min(r, h / 2, w / 2)).toFixed(2)}px`;
+    for (const n of copyOn ? [pill, copy] : [pill]) {
+      n.style.transform = `translate3d(${x0}px,${y0}px,0)`;
+      n.style.width = `${w}px`;
+      n.style.height = `${h}px`;
+      n.style.borderRadius = radius;
+    }
+    if (copyOn)
+      copyRows.style.transform = `translate3d(${-x0}px,${-y0}px,0)`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    for (const s of springs)
+      s.step(dt);
+    paint();
+    return springs.some((s) => !s.resting);
+  });
+  const show = (on) => {
+    shown = on;
+    pill.toggleAttribute("data-off", !on);
+    copy.toggleAttribute("data-off", !on);
+    container.toggleAttribute("data-pick-empty", !on);
+  };
+  const update = (o) => {
+    if (disposed)
+      return;
+    const row = options.selected();
+    const next = row?.isConnected ? measure(row) : null;
+    const plan = planPill({ shown, at: shown ? at() : null, target }, next, {
+      first,
+      reduced: reducedMotion(win),
+      ...o?.snap ? { snap: true } : {}
+    });
+    first = false;
+    for (const n of clones.values())
+      n.remove();
+    clones.clear();
+    rowBoxes = copyOn ? rowsNow().filter((r) => r.isConnected).map((r) => ({ row: r, box: measure(r) })) : [];
+    if (plan.kind === "hide") {
+      if (shown)
+        show(false);
+      return;
+    }
+    if (plan.kind === "stay") {
+      syncCopy(boxUnion(at(), target));
+      return;
+    }
+    const r = radiusOf(row);
+    if (plan.kind === "land") {
+      sx.snap(plan.box.x);
+      sy.snap(plan.box.y);
+      sw.snap(plan.box.w);
+      sh.snap(plan.box.h);
+      from = plan.box;
+      fromR = r;
+      toR = r;
+      target = plan.box;
+      syncCopy(plan.box);
+      paint();
+      loop.stop();
+      if (!shown)
+        show(true);
+      return;
+    }
+    const m = springMotion(plan.spring);
+    for (const s of springs) {
+      s.omega = m.omega;
+      s.zeta = m.zeta;
+    }
+    const now = at();
+    fromR = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, now.h, pillProgress(from, target, now)) : r;
+    from = now;
+    toR = r;
+    target = plan.box;
+    sx.set(plan.box.x);
+    sy.set(plan.box.y);
+    sw.set(plan.box.w);
+    sh.set(plan.box.h);
+    syncCopy(boxUnion(now, plan.box));
+    loop.wake();
+  };
+  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => update({ snap: true })) : null;
+  ro?.observe(container);
+  update();
+  return {
+    element: pill,
+    update,
+    dispose() {
+      disposed = true;
+      loop.stop();
+      ro?.disconnect();
+      pill.remove();
+      copy.remove();
+      container.removeAttribute("data-pick-empty");
+    }
+  };
+}
+var boxesMeet = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h, boxUnion = (a, b) => {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return {
+    x,
+    y,
+    w: Math.max(a.x + a.w, b.x + b.w) - x,
+    h: Math.max(a.y + a.h, b.y + b.h) - y
+  };
+}, grid = (v) => Math.round(v * 64) / 64;
+var init_selection_pill = __esm(() => {
+  init_motion();
+  init_look();
+});
+
 // src/panel/hints.ts
 function extractWords(text) {
   return text.toLowerCase().match(/[a-z]+/g) ?? [];
@@ -4689,34 +4995,27 @@ function tree(container, options) {
   const empty = doc.createElement("div");
   empty.className = "knobs-tree-empty";
   empty.hidden = true;
-  const cursor = doc.createElement("div");
-  cursor.className = "knobs-tree-cursor";
-  root.append(space, cursor, line, empty);
-  const cursorY = new Spring(0, MOVE.omega, MOVE.zeta, 0.1);
-  let cursorOn = false;
-  const drawCursor = () => {
-    cursor.style.transform = `translate3d(0,${Math.round(cursorY.x * 2) / 2}px,0)`;
+  root.append(space, line, empty);
+  let pill = null;
+  let picked = null;
+  let travelUntil = 0;
+  const pickedRow = () => {
+    const id = sel.ids.length === 1 ? sel.ids[0] : null;
+    const v = id === null ? undefined : views.get(id);
+    return v && !v.leaving && rowIndex.has(v.id) ? v : null;
   };
   const placeCursor = (animate) => {
-    if (!options.glide)
+    if (!pill)
       return;
     const id = sel.ids.length === 1 ? sel.ids[0] : null;
-    const i = id === null ? undefined : rowIndex.get(id);
-    root.toggleAttribute("data-glide", i !== undefined);
-    if (i === undefined) {
-      cursor.removeAttribute("data-on");
-      cursorOn = false;
-      return;
-    }
-    if (cursorOn && animate && !reducedMotion(win))
-      cursorY.set(i * h);
-    else
-      cursorY.snap(i * h);
-    cursorOn = true;
-    cursor.setAttribute("data-on", "");
-    drawCursor();
-    if (!cursorY.resting)
-      loop.wake();
+    root.toggleAttribute("data-glide", id !== null && rowIndex.has(id));
+    const fresh = id !== picked;
+    picked = id;
+    if (animate && fresh) {
+      travelUntil = performance.now() + 450;
+      pill.update();
+    } else if (performance.now() >= travelUntil)
+      pill.update({ snap: true });
   };
   container.append(root);
   const scrollbar = overlayScrollbar(root, space);
@@ -4745,6 +5044,12 @@ function tree(container, options) {
   };
   const views = new Map;
   const pool = [];
+  if (options.glide)
+    pill = selectionPill(root, {
+      rows: () => [...views.values()].filter((v) => !v.leaving).map((v) => v.el),
+      selected: () => pickedRow()?.el ?? null,
+      radius: (row) => Number.parseFloat(win.getComputedStyle(row, "::before").borderTopLeftRadius) || 0
+    });
   const makeView = (id) => {
     const v = pool.pop() ?? createView();
     v.id = id;
@@ -4925,12 +5230,6 @@ function tree(container, options) {
   function frame(dt) {
     let moving = false;
     let bottom = rows.length * h;
-    if (options.glide && !cursorY.resting) {
-      cursorY.step(dt);
-      drawCursor();
-      if (!cursorY.resting)
-        moving = true;
-    }
     for (const v of views.values()) {
       v.y.step(dt);
       if (!v.y.resting)
@@ -4950,6 +5249,8 @@ function tree(container, options) {
     }
     setSpace(moving ? bottom : rows.length * h);
     trim();
+    if (pill && moving && performance.now() >= travelUntil)
+      pill.update({ snap: true });
     return moving;
   }
   const trim = () => {
@@ -5578,6 +5879,7 @@ function tree(container, options) {
       autoScroll.stop();
       ro.disconnect();
       scrollbar.dispose();
+      pill?.dispose();
       dragging?.ghost.remove();
       root.remove();
     }
@@ -5596,6 +5898,7 @@ var init_tree = __esm(() => {
   init_motion();
   init_page_hints();
   init_look();
+  init_selection_pill();
   init_tree_model();
   MOVE = springMotion(SPRINGS.default);
 });
@@ -5732,7 +6035,7 @@ function codeDiff(container, options) {
   };
   const nav = make("span", "knobs-diff-nav");
   const prev = button("Previous file", PREV);
-  const next = button("Next file", ICONS.caret);
+  const next = button("Next file", NEXT);
   const place = make("span", "");
   nav.append(prev, place, next);
   const wrapButton = button("Wrap lines", WRAP);
@@ -5753,9 +6056,8 @@ function codeDiff(container, options) {
   const seg = make("div", "knobs-diff-seg");
   seg.setAttribute("role", "radiogroup");
   seg.setAttribute("aria-label", "Layout");
-  const pill = make("i", "knobs-diff-pill");
   const choice = (value, label) => {
-    const b = make("button", "");
+    const b = make("button", "knobs-diff-choice");
     b.type = "button";
     b.setAttribute("role", "radio");
     b.dataset.value = value;
@@ -5764,7 +6066,7 @@ function codeDiff(container, options) {
   };
   const splitButton = choice("split", "Split");
   const unifiedButton = choice("unified", "Unified");
-  seg.append(pill, splitButton, unifiedButton);
+  seg.append(splitButton, unifiedButton);
   if (options.lead)
     head.append(options.lead);
   head.append(path, stat, make("span", "knobs-diff-fill"), nav, wrapButton, seg, viewedButton);
@@ -5775,6 +6077,11 @@ function codeDiff(container, options) {
   body.append(note, probe);
   root.append(head, body);
   container.append(root);
+  const segPill = selectionPill(seg, {
+    rows: () => [splitButton, unifiedButton],
+    selected: () => layout === "split" ? splitButton : unifiedButton
+  });
+  let pilled = layout;
   const fileNow = () => files.find((f) => f.name === current) ?? null;
   const paintHead = () => {
     const file = fileNow();
@@ -5807,6 +6114,10 @@ function codeDiff(container, options) {
     next.disabled = at >= files.length - 1;
     wrapButton.setAttribute("aria-pressed", String(wrap));
     seg.dataset.value = layout;
+    if (pilled !== layout) {
+      pilled = layout;
+      segPill.update();
+    }
     splitButton.setAttribute("aria-checked", String(layout === "split"));
     unifiedButton.setAttribute("aria-checked", String(layout === "unified"));
     splitButton.tabIndex = layout === "split" ? 0 : -1;
@@ -6641,6 +6952,7 @@ function codeDiff(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
+      segPill.dispose();
       sizes.disconnect();
       attaching.disconnect();
       resized.disconnect();
@@ -6996,7 +7308,7 @@ function diffReview(container, options) {
     }
   };
 }
-var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
+var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, NEXT, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
 var init_diff = __esm(() => {
   init_glide();
   init_motion();
@@ -7004,6 +7316,8 @@ var init_diff = __esm(() => {
   init_diff_model();
   init_look();
   init_rgba();
+  init_icons();
+  init_selection_pill();
   init_tree();
   SYNTAX = { dark: "pierre-dark", light: "pierre-light" };
   IN = springMotion(SPRINGS.default);
@@ -7011,13 +7325,14 @@ var init_diff = __esm(() => {
   FADE4 = springMotion(FADE);
   HEIGHT = springMotion(SPRINGS.calm);
   DRAWER = springMotion(SPRINGS.calm);
-  WRAP = svg('<path d="M2.5 4h11"/><path d="M2.5 8h9a2 2 0 0 1 0 4H8.5"/><path d="M10 10.5 8.5 12l1.5 1.5"/><path d="M2.5 12h3"/>');
-  PREV = svg('<path d="M10 3.5 5.5 8l4.5 4.5"/>');
-  UNVIEWED = svg('<circle cx="8" cy="8" r="5.5"/>');
-  VIEWED = svg('<circle cx="8" cy="8" r="5.5"/><path d="m5.6 8.1 1.7 1.7 3.2-3.5"/>');
-  SEARCH = svg('<circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/>');
-  CLEAR2 = svg('<path d="m5 5 6 6M11 5l-6 6"/>');
-  SIDEBAR = svg('<rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/>');
+  WRAP = icon("arrowUDownLeft");
+  PREV = icon("caretLeft");
+  NEXT = icon("caretRight");
+  UNVIEWED = icon("circle");
+  VIEWED = icon("checkCircle");
+  SEARCH = icon("magnifyingGlass", { small: true });
+  CLEAR2 = icon("x", { small: true });
+  SIDEBAR = icon("sidebar");
 });
 
 // src/ui/layer.ts
@@ -8000,10 +8315,25 @@ function advance(t, dt, o) {
   }
   return { t: hi, ended: true, wrapped: false };
 }
-var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6;
+function moveHead(head, t, motion, catching, minGap = 0) {
+  if (motion === "jump" && Math.abs(t - head.x) > minGap)
+    return { x: head.x, target: t, catching: true };
+  if (catching)
+    return { x: head.x + (t - head.target), target: t, catching: true };
+  return { x: t, target: t, catching: false };
+}
+function currentMarker(markers, t, fps) {
+  let best = null;
+  for (const m of markers)
+    if (m.time <= t + 0.5 / fps && (!best || m.time >= best.time))
+      best = m;
+  return best;
+}
+var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6, CATCH_UP;
 var init_timeline_model = __esm(() => {
   SECOND_STEPS = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600];
   FRAME_STEPS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 9000, 18000];
+  CATCH_UP = { duration: 0.15, bounce: 0 };
 });
 
 // src/ui/timeline.ts
@@ -8016,6 +8346,7 @@ function timeline(container, options) {
   let speed = options.speed ?? 1;
   let repeat = options.repeat ?? true;
   const arrows = options.arrows ?? "frames";
+  const lane = options.variant === "lane";
   let time = Math.min(duration, Math.max(0, options.time ?? 0));
   let playing = false;
   let markers = [...options.markers ?? []];
@@ -8049,27 +8380,27 @@ function timeline(container, options) {
   root.setAttribute("aria-label", options.label ?? "Timeline");
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
   applyLook2(root, options);
+  if (lane)
+    root.dataset.variant = "lane";
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
   playBtn.tabIndex = -1;
-  const readout = el("div", "knobs-tl-time");
-  const now = el("span", "knobs-tl-now");
-  const sub = el("span", "knobs-tl-sub");
-  readout.append(now, sub);
-  transport.append(playBtn, readout);
+  transport.append(playBtn);
   const track = el("div", "knobs-tl-track");
   const canvas = el("canvas", "knobs-tl-ruler");
   canvas.setAttribute("aria-hidden", "true");
-  const lane = el("div", "knobs-tl-lane");
+  const markerLane = el("div", "knobs-tl-lane");
   const hover = el("div", "knobs-tl-hover");
+  const tag = el("span", "knobs-tl-tag");
+  tag.setAttribute("aria-hidden", "true");
   const head = el("div", "knobs-tl-head");
   head.id = `${id}-head`;
   head.setAttribute("role", "slider");
   head.setAttribute("aria-label", "Playhead");
   head.setAttribute("aria-valuemin", "0");
   head.setAttribute("aria-valuemax", String(duration));
-  track.append(canvas, lane, hover, head);
+  track.append(canvas, markerLane, hover, head, tag);
   root.append(transport, track);
   container.append(root);
   let width = 1;
@@ -8116,13 +8447,14 @@ function timeline(container, options) {
   let drawn = "";
   const drawRuler = () => {
     const v = view();
-    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${units}:${fps}`;
+    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${height}:${units}:${fps}`;
     if (key === drawn)
       return;
     drawn = key;
     const dpr = win.devicePixelRatio || 1;
     const w = Math.max(1, Math.round(width * dpr));
-    const h = Math.round(RULER * dpr);
+    const rh = lane ? height : RULER;
+    const h = Math.round(rh * dpr);
     if (canvas.width !== w || canvas.height !== h) {
       canvas.width = w;
       canvas.height = h;
@@ -8131,8 +8463,19 @@ function timeline(container, options) {
     if (!ctx)
       return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, width, RULER);
+    ctx.clearRect(0, 0, width, rh);
     const ticks = rulerTicks(v, width, { fps, units });
+    if (lane) {
+      ctx.fillStyle = colors.tick;
+      for (const t of ticks.minor)
+        if (t >= -0.000000001 && t <= duration + 0.000000001)
+          ctx.fillRect(xOf(t) - 0.5, rh - 4, 1, 4);
+      ctx.fillStyle = colors.major;
+      for (const m of ticks.major)
+        if (m.t >= -0.000000001 && m.t <= duration + 0.000000001)
+          ctx.fillRect(xOf(m.t) - 0.5, rh - 7, 1, 7);
+      return;
+    }
     const px = (t) => Math.round(xOf(t)) + 0.5;
     ctx.fillStyle = colors.line;
     ctx.fillRect(0, RULER - 1, width, 1);
@@ -8172,18 +8515,21 @@ function timeline(container, options) {
         n.dataset.id = m.id;
         const pin = el("span", "knobs-tl-pin");
         const label = el("span", "knobs-tl-mlabel");
+        label.append(el("span", "knobs-tl-mtext knobs-scroll-fade-x"));
         n.append(pin, label);
-        lane.append(n);
+        markerLane.append(n);
         markerEls.set(m.id, n);
         if (built)
           enter(n);
       }
       const label = n.querySelector(".knobs-tl-mlabel");
-      if (label.textContent !== (m.label ?? ""))
-        label.textContent = m.label ?? "";
+      const text = label.firstElementChild;
+      if (text.textContent !== (m.label ?? ""))
+        text.textContent = m.label ?? "";
       label.hidden = !m.label;
       n.style.setProperty("--knobs-tl-color", m.color ?? "");
       n.toggleAttribute("data-selected", selected?.kind === "marker" && selected.id === m.id);
+      n.toggleAttribute("data-current", m.id === currentId);
       n.title = `${m.label ? `${m.label} · ` : ""}${clock(m.time)}`;
     }
     placeMarkers();
@@ -8211,7 +8557,7 @@ function timeline(container, options) {
         b.dataset.edge = "end";
         const label = el("span", "knobs-tl-rlabel");
         n.append(label, a, b);
-        track.insertBefore(n, lane);
+        track.insertBefore(n, markerLane);
         rangeEls.set(r.id, n);
         if (built)
           enter(n);
@@ -8260,16 +8606,17 @@ function timeline(container, options) {
   };
   const clock = (t) => units === "frames" ? `f${toFrame(t, fps)}` : `${timeLabel(t, "seconds", fps, 0.01)}`;
   let shownHead = time;
+  let currentId = null;
   const renderHead = () => {
     head.style.transform = `translateX(${xOf(shownHead).toFixed(2)}px)`;
-    const main = units === "frames" ? `f${toFrame(time, fps)}` : `${time.toFixed(2)}s`;
-    const minor = units === "frames" ? `${time.toFixed(2)}s` : `f${toFrame(time, fps)}`;
-    if (now.textContent !== main)
-      now.textContent = main;
-    if (sub.textContent !== minor)
-      sub.textContent = minor;
     head.setAttribute("aria-valuenow", time.toFixed(3));
     head.setAttribute("aria-valuetext", `${time.toFixed(2)} seconds, frame ${toFrame(time, fps)}`);
+    const cur = currentMarker(markers, time, fps)?.id ?? null;
+    if (cur !== currentId) {
+      markerEls.get(currentId ?? "")?.removeAttribute("data-current");
+      currentId = cur;
+      markerEls.get(cur ?? "")?.setAttribute("data-current", "");
+    }
   };
   let viewSent = "";
   const render = () => {
@@ -8295,18 +8642,27 @@ function timeline(container, options) {
   };
   const caret = new Spring(time, GLIDE.omega, GLIDE.zeta, 0.00001);
   let gliding = false;
-  const setTime = (t, source, shown = t, glide = false) => {
-    const next = Math.min(duration, Math.max(0, t));
-    if (glide && !reducedMotion(win)) {
+  const headTo = (shown, motion) => {
+    const from = gliding ? { x: caret.x, target: caret.target } : { x: shownHead, target: shownHead };
+    const jump = motion === "jump" && !reducedMotion(win);
+    const next = moveHead(from, shown, jump ? "jump" : "follow", gliding, 2 / pxPerSec());
+    if (next.catching) {
       if (!gliding)
-        caret.snap(shownHead);
-      caret.set(next);
+        caret.snap(from.x);
+      caret.x = next.x;
+      caret.target = next.target;
       gliding = true;
+      shownHead = caret.x;
       loop.wake();
     } else {
       gliding = false;
-      shownHead = shown;
+      caret.snap(next.x);
+      shownHead = next.x;
     }
+  };
+  const setTime = (t, source, shown = t, glide = false) => {
+    const next = Math.min(duration, Math.max(0, t));
+    headTo(Math.min(duration, Math.max(0, shown)), glide ? "jump" : "follow");
     const moved = next !== time;
     time = next;
     renderHead();
@@ -8347,8 +8703,7 @@ function timeline(container, options) {
             options.onCross?.(m);
       }
       time = step.t;
-      shownHead = time;
-      gliding = false;
+      headTo(time, step.wrapped ? "jump" : "follow");
       emitSeek(time, "play");
       keepInView();
       if (step.ended) {
@@ -8361,7 +8716,7 @@ function timeline(container, options) {
       shownHead = caret.step(dt);
       if (caret.resting) {
         gliding = false;
-        shownHead = time;
+        shownHead = caret.target;
       }
     }
     vStart.step(dt);
@@ -8374,9 +8729,9 @@ function timeline(container, options) {
       return;
     const r = loopRange();
     if (r && (time < r.start || time >= r.end - 0.5 / fps))
-      setTime(r.start, "code");
+      setTime(r.start, "code", r.start, true);
     else if (!r && time >= duration - 0.5 / fps)
-      setTime(0, "code");
+      setTime(0, "code", 0, true);
     playing = true;
     syncPlay();
     emitPlay(true);
@@ -8505,24 +8860,35 @@ function timeline(container, options) {
   };
   const localX = (e) => e.clientX - track.getBoundingClientRect().left;
   let drag = null;
-  const scrubTo = (x) => {
+  const scrubTo = (x, press = false) => {
     const shownX = softClamp(x, xOf(0), xOf(duration), 10);
     const s = scrubTime(tOf(shownX), {
       duration,
       fps,
       pxPerSec: pxPerSec(),
-      stops: snapMarkers ? markers.map((m) => m.time) : [],
+      stops: snapMarkers && !lane ? markers.map((m) => m.time) : [],
       frames: snapFrames
     });
-    setTime(s.t, "scrub", s.shown);
+    setTime(s.t, "scrub", s.shown, press);
     root.toggleAttribute("data-stuck", s.stop !== null);
   };
+  const showTag = (x) => {
+    const at = Math.min(duration, Math.max(0, tOf(x)));
+    const text = `${at.toFixed(2)} s`;
+    if (tag.textContent !== text)
+      tag.textContent = text;
+    const cx = Math.min(width, Math.max(0, x));
+    const flip = cx > width - tag.offsetWidth - 12;
+    tag.style.transform = `translateX(${cx.toFixed(1)}px) translateX(${flip ? "calc(-100% - 4px)" : "4px"})`;
+    tag.dataset.on = "";
+  };
+  const hideTag = () => delete tag.dataset.on;
   track.addEventListener("pointerdown", (e) => {
     if (e.button !== 0 || editing)
       return;
     root.focus({ preventScroll: true });
     const t = e.target;
-    const markerEl = t.closest(".knobs-tl-marker");
+    const markerEl = lane ? null : t.closest(".knobs-tl-marker");
     const edgeEl = t.closest(".knobs-tl-edge");
     const rangeEl = t.closest(".knobs-tl-range");
     track.setPointerCapture(e.pointerId);
@@ -8567,13 +8933,16 @@ function timeline(container, options) {
       root.dataset.scrubbing = "";
       for (const l of listeners)
         l.onScrub?.(true);
-      scrubTo(localX(e));
+      scrubTo(localX(e), true);
+      showTag(localX(e));
     }
     e.preventDefault();
   });
   track.addEventListener("pointermove", (e) => {
     const x = localX(e);
     hover.style.transform = `translateX(${x.toFixed(1)}px)`;
+    if (!drag || drag.kind === "scrub")
+      showTag(x);
     if (!drag)
       return;
     if (drag.kind === "scrub")
@@ -8619,8 +8988,10 @@ function timeline(container, options) {
     delete root.dataset.dragging;
     root.removeAttribute("data-stuck");
     if (d.kind === "scrub") {
-      shownHead = time;
+      headTo(time, "follow");
       renderHead();
+      if (!track.matches(":hover"))
+        hideTag();
       for (const l of listeners)
         l.onScrub?.(false);
       if (d.wasPlaying)
@@ -8633,7 +9004,7 @@ function timeline(container, options) {
       } else {
         const m = markers.find((x) => x.id === d.id);
         if (m)
-          setTime(m.time, "marker");
+          setTime(m.time, "marker", m.time, true);
       }
     } else if (d.kind === "edge" || d.moved)
       emitRanges();
@@ -8642,10 +9013,14 @@ function timeline(container, options) {
   track.addEventListener("pointercancel", endDrag);
   track.addEventListener("lostpointercapture", endDrag);
   track.addEventListener("pointerleave", () => {
-    if (!drag)
-      hover.style.transform = "translateX(-100px)";
+    if (drag)
+      return;
+    hover.style.transform = "translateX(-100px)";
+    hideTag();
   });
   track.addEventListener("dblclick", (e) => {
+    if (lane)
+      return;
     const markerEl = e.target.closest(".knobs-tl-marker");
     if (markerEl)
       return rename(markerEl.dataset.id);
@@ -8656,6 +9031,8 @@ function timeline(container, options) {
       rename(m.id);
   });
   track.addEventListener("wheel", (e) => {
+    if (lane)
+      return;
     e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1;
     if (e.ctrlKey || e.metaKey) {
@@ -8719,7 +9096,7 @@ function timeline(container, options) {
         if (!m)
           return;
         select({ kind: "marker", id: m.id });
-        return setTime(m.time, "marker");
+        return setTime(m.time, "marker", m.time, true);
       }
       case "i":
       case "I":
@@ -8731,11 +9108,13 @@ function timeline(container, options) {
         return setEdge("end", time);
       case "m":
       case "M":
+        if (lane)
+          return;
         claim();
         addMarker(time);
         return;
       case "Enter":
-        if (selected?.kind === "marker") {
+        if (selected?.kind === "marker" && !lane) {
           claim();
           rename(selected.id);
         }
@@ -8753,19 +9132,25 @@ function timeline(container, options) {
         return;
       case "=":
       case "+":
+        if (lane)
+          return;
         claim();
         return zoom(1.5);
       case "-":
+        if (lane)
+          return;
         claim();
         return zoom(1 / 1.5);
       case "0":
+        if (lane)
+          return;
         claim();
         return fit();
     }
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
     { el: playBtn, label: playing ? "Pause" : "Play", activate: toggle },
-    ...markers.flatMap((m) => {
+    ...(lane ? [] : markers).flatMap((m) => {
       const n = markerEls.get(m.id);
       if (!n || n.dataset.leaving !== undefined)
         return [];
@@ -8777,7 +9162,7 @@ function timeline(container, options) {
           ...label && !label.hidden ? { labelEl: label } : {},
           activate: () => {
             select({ kind: "marker", id: m.id });
-            setTime(m.time, "marker");
+            setTime(m.time, "marker", m.time, true);
             root.focus({ preventScroll: true });
           }
         }
@@ -8789,7 +9174,7 @@ function timeline(container, options) {
       activate: () => root.focus({ preventScroll: true })
     }
   ], { listen: false, rank: 1 });
-  const menu = contextMenu(track, (e) => {
+  const menu = lane ? null : contextMenu(track, (e) => {
     const t = e?.target ?? null;
     const markerEl = t?.closest(".knobs-tl-marker");
     const rangeEl = t?.closest(".knobs-tl-range");
@@ -8804,7 +9189,7 @@ function timeline(container, options) {
           run: () => {
             const m = markers.find((x) => x.id === mid);
             if (m)
-              setTime(m.time, "marker");
+              setTime(m.time, "marker", m.time, true);
           }
         },
         { label: "Rename…", shortcut: "Enter", run: () => rename(mid) },
@@ -8968,7 +9353,7 @@ function timeline(container, options) {
       listeners.clear();
       loop.stop();
       ro.disconnect();
-      menu.dispose();
+      menu?.dispose();
       root.remove();
     }
   };
@@ -8985,10 +9370,21 @@ var init_timeline = __esm(() => {
   init_timeline_model();
   INSTANT2 = springMotion(SPRINGS.instant);
   CALM = springMotion(SPRINGS.calm);
-  GLIDE = springMotion(SPRINGS.snappy);
+  GLIDE = springMotion(CATCH_UP);
 });
 
 // src/ui/compare-model.ts
+function compareModes(modes, mode) {
+  const list = [...new Set((modes ?? ["side", "wipe"]).filter((m) => ALL_MODES.includes(m)))];
+  const offered = list.length ? list : ["side", "wipe"];
+  return { modes: offered, mode: mode && offered.includes(mode) ? mode : offered[0] };
+}
+function modeForKey(key, modes) {
+  const k = key.toLowerCase();
+  if (/^[1-9]$/.test(k))
+    return modes[Number(k) - 1] ?? null;
+  return modes.find((m) => MODE_KEYS[m] === k) ?? null;
+}
 function mediaKind(src, kind) {
   if (kind)
     return kind;
@@ -9067,6 +9463,18 @@ function wipeGrab(x, rect, wipe, slop = 12) {
   const onLine = Math.abs(x - line) <= slop;
   return { onLine, offset: onLine ? x - line : 0 };
 }
+function seamLabels(x, left, right, wb, wa, gap = 8) {
+  const room = (space, w) => Math.min(1, Math.max(0, (space - w - 2 * gap) / gap));
+  return {
+    before: { x: x - gap - wb, opacity: room(x - left, wb) },
+    after: { x: x + gap, opacity: room(right - x, wa) }
+  };
+}
+function gripTop(y, rect, grip, margin = 8) {
+  const lo = rect.y + margin;
+  const hi = rect.y + rect.h - margin - grip;
+  return hi < lo ? rect.y + (rect.h - grip) / 2 : Math.min(hi, Math.max(lo, y - grip / 2));
+}
 function stripColumns(view, width, o) {
   const { fps } = o;
   const total = Math.max(1, Math.round(o.duration * fps));
@@ -9117,7 +9525,7 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
+var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
   u: r.u - dx / Math.max(1, base.w) * r.w,
   v: r.v - dy / Math.max(1, base.h) * r.h,
   w: r.w
@@ -9136,6 +9544,8 @@ var VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), last
   h: a.h + (b.h - a.h) * k
 }), wipeX = (rect, wipe) => rect.x + Math.min(1, Math.max(0, wipe)) * rect.w, wipeAt = (x, rect, offset = 0) => rect.w <= 0 ? 0.5 : Math.min(1, Math.max(0, (x - offset - rect.x) / rect.w)), wipeKey = (wipe, dir, big = false) => Math.min(1, Math.max(0, Math.round((wipe + dir * (big ? 0.1 : 0.01)) * 1000) / 1000));
 var init_compare_model = __esm(() => {
+  ALL_MODES = ["side", "wipe", "difference"];
+  MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
@@ -9935,8 +10345,8 @@ async function createCompareGpu(canvas, onLost) {
       r(0, f.before);
       r(4, f.after);
       data.set([f.width, f.height, f.dpr, 0], 8);
-      data.set([f.wipeX, f.soft, 0, f.phase ? 1 : 0], 12);
-      data.set([f.from, f.to, f.mix, f.flick ? 1 : 0], 16);
+      data.set([f.wipeX, f.soft, 0, 0], 12);
+      data.set([f.from, f.to, f.mix, 0], 16);
       data.set([f.threshold, f.gain, ready[0], ready[1]], 20);
       data.set([f.accent[0], f.accent[1], f.accent[2], 1], 24);
       const l = f.loupe;
@@ -9978,8 +10388,8 @@ var MODE_INDEX, WGSL = `
 struct U {
   ra: vec4f, rb: vec4f,
   view: vec4f,   // w, h, dpr, _
-  wipe: vec4f,   // x, soft, _, phase
-  modes: vec4f,  // from, to, mix, flick
+  wipe: vec4f,   // x, soft, _, _
+  modes: vec4f,  // from, to, mix, _
   diff: vec4f,   // threshold, gain, readyA, readyB
   accent: vec4f,
   loupe: vec4f,  // x, y, r, zoom (0: none)
@@ -10030,21 +10440,14 @@ fn takeB(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
 
 fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
 
-fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
-  let flick = u.modes.w > 0.5;
+fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
   switch mode {
-    case 0u: {
-      let bb = select(b, vec4f(a2.rgb, b.a), flick);
-      return vec4f(a.rgb * a.a + bb.rgb * bb.a * (1.0 - a.a), a.a + bb.a * (1.0 - a.a));
-    }
     case 1u: {
-      if (flick) { return pm(a); }
       let s = max(u.wipe.y, 0.5);
       let m = smoothstep(u.wipe.x - s, u.wipe.x + s, p.x);
       return pm(vec4f(mix(a.rgb, b.rgb, m), mix(a.a, b.a, m)));
     }
     case 2u: {
-      if (flick) { return pm(a); }
       let d = abs(a.rgb - b.rgb);
       let h = smoothstep(u.diff.x, u.diff.x + 0.06, max(d.r, max(d.g, d.b)) * u.diff.y) * min(a.a, b.a);
       let c = mix(vec3f(luma(b.rgb) * 0.35), u.accent.rgb, h);
@@ -10052,8 +10455,8 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
     }
     default: {}
   }
-  // Flicker: After, or Before while X is held or on the flicker's other beat.
-  return pm(select(b, a, flick || u.wipe.w > 0.5));
+  // Side by side: each side in its own place, Before over After where they meet.
+  return vec4f(a.rgb * a.a + b.rgb * b.a * (1.0 - a.a), a.a + b.a * (1.0 - a.a));
 }
 
 @fragment fn fs(@builtin(position) q: vec4f) -> @location(0) vec4f {
@@ -10071,16 +10474,14 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
   }
   let a = takeA(p, u.ra, u.ca, near);
   let b = takeB(p, u.rb, u.cb, near);
-  // Before in After's place (X held, side by side): After's rect, as if Before were zoomed there.
-  let a2 = takeA(p, u.rb, u.cb, near);
-  var o = mix(composite(u32(u.modes.x), p, a, b, a2), composite(u32(u.modes.y), p, a, b, a2), u.modes.z);
+  var o = mix(composite(u32(u.modes.x), p, a, b), composite(u32(u.modes.y), p, a, b), u.modes.z);
   if (near) { o = o + vec4f(0.05, 0.05, 0.06, 1.0) * (1.0 - o.a); }
   o = mix(o, vec4f(0.92), ring * 0.9);
   return o;
 }
 `, TEXTURE_BINDING = 4, COPY_DST = 2, RENDER_ATTACHMENT = 16, shared = null, lostListeners;
 var init_compare_gpu = __esm(() => {
-  MODE_INDEX = { side: 0, wipe: 1, difference: 2, flicker: 3 };
+  MODE_INDEX = { side: 0, wipe: 1, difference: 2 };
   lostListeners = new Set;
 });
 
@@ -10466,7 +10867,9 @@ function compare(container, options) {
     ...options.theme ? { theme: options.theme } : {},
     ...options.appearance ? { appearance: options.appearance } : {}
   };
-  let mode = options.mode ?? "side";
+  const offered = compareModes(options.modes, options.mode);
+  const modeList = offered.modes;
+  let mode = offered.mode;
   let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
   let loupeOn = options.loupe ?? false;
   let threshold = options.threshold ?? 4 / 255;
@@ -10484,7 +10887,7 @@ function compare(container, options) {
   root.setAttribute("role", "group");
   root.setAttribute("aria-roledescription", "compare");
   root.setAttribute("aria-label", options.label ?? "Compare");
-  root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . 1 2 3 4 S W D X Z L 0 = -");
+  root.setAttribute("aria-keyshortcuts", `Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . ${modeList.map((m, i) => `${i + 1} ${modeKey(m)}`).join(" ")} Z L 0 = -`);
   applyLook2(root, options);
   root.dataset.mode = mode;
   if (auto)
@@ -10493,35 +10896,37 @@ function compare(container, options) {
   const modes = el("div", "knobs-cmp-modes");
   modes.setAttribute("role", "radiogroup");
   modes.setAttribute("aria-label", "Mode");
-  const modeBtns = MODES2.map((m, i) => {
+  modes.hidden = modeList.length < 2;
+  const modeBtns = modeList.map((m, i) => {
     const b = el("button", "knobs-cmp-mode");
     b.type = "button";
     b.tabIndex = -1;
-    b.textContent = m.label;
-    b.title = `${m.label} · ${i + 1}${m.key ? ` or ${m.key}` : " (hold X to flick)"}`;
+    b.textContent = MODE_LABEL[m].short;
+    b.title = `${MODE_LABEL[m].long} · ${i + 1} or ${modeKey(m)}`;
     b.setAttribute("role", "radio");
-    b.setAttribute("aria-keyshortcuts", m.key ? `${i + 1} ${m.key}` : `${i + 1}`);
+    b.setAttribute("aria-keyshortcuts", `${i + 1} ${modeKey(m)}`);
     b.addEventListener("click", () => {
-      setMode(m.mode);
+      setMode(m);
       root.focus({ preventScroll: true });
     });
     modes.append(b);
     return b;
   });
-  const loupeBtn = el("button", "knobs-cmp-toggle");
-  loupeBtn.type = "button";
-  loupeBtn.tabIndex = -1;
-  loupeBtn.textContent = "Loupe";
-  loupeBtn.title = "Loupe · hold Z";
+  const toggleBtn = (name, label, title) => {
+    const b = el("button", "knobs-cmp-toggle");
+    b.type = "button";
+    b.tabIndex = -1;
+    b.innerHTML = icon(name);
+    b.setAttribute("aria-label", label);
+    b.title = title;
+    return b;
+  };
+  const loupeBtn = toggleBtn("magnifyingGlass", "Loupe", "Loupe · hold Z");
   loupeBtn.addEventListener("click", () => {
     setLoupe(!loupeOn);
     root.focus({ preventScroll: true });
   });
-  const loopBtn = el("button", "knobs-cmp-toggle");
-  loopBtn.type = "button";
-  loopBtn.tabIndex = -1;
-  loopBtn.textContent = "Loop";
-  loopBtn.title = "Loop · L (drag its ends on the timeline)";
+  const loopBtn = toggleBtn("repeat", "Loop", "Loop · L (drag its ends on the timeline)");
   loopBtn.setAttribute("aria-keyshortcuts", "L");
   loopBtn.addEventListener("click", () => {
     api.setLoop(!loopNow());
@@ -10538,7 +10943,8 @@ function compare(container, options) {
   const zoomReset = el("button", "knobs-cmp-zoom-reset");
   zoomReset.type = "button";
   zoomReset.tabIndex = -1;
-  zoomReset.textContent = "Reset";
+  zoomReset.innerHTML = icon("arrowCounterClockwise", { small: true });
+  zoomReset.setAttribute("aria-label", "Reset zoom");
   zoomReset.title = "Fit · 0 or double-click";
   zoomReset.addEventListener("click", () => {
     api.setZoom(null);
@@ -10553,6 +10959,9 @@ function compare(container, options) {
   handle.setAttribute("aria-label", "Wipe");
   handle.setAttribute("aria-valuemin", "0");
   handle.setAttribute("aria-valuemax", "100");
+  const grip = el("span", "knobs-cmp-grip");
+  grip.setAttribute("aria-hidden", "true");
+  handle.append(grip);
   const note = el("div", "knobs-cmp-note");
   stage.append(canvas, split, labels[0], labels[1], handle, zoomPill, note);
   root.append(bar, stage);
@@ -10569,6 +10978,7 @@ function compare(container, options) {
     root.append(host);
     tl = timeline(host, {
       ...look,
+      variant: "lane",
       duration: 1,
       fps: fps(),
       arrows: { step: 0.5, shift: 2 },
@@ -10587,9 +10997,9 @@ function compare(container, options) {
   const fade = new Spring(1, FADE6.omega, FADE6.zeta, 0.001);
   let fromMode = mode;
   let toMode = mode;
-  let phase = false;
-  let flickerTimer = 0;
-  let flickHeld = false;
+  const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
+  let wipeCatching = false;
+  let gripY = null;
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
@@ -10907,25 +11317,16 @@ function compare(container, options) {
     gpu = g;
     setRenderer("gpu");
   };
-  const syncFlicker = () => {
-    win.clearInterval(flickerTimer);
-    flickerTimer = 0;
-    phase = false;
-    if (mode === "flicker")
-      flickerTimer = win.setInterval(() => {
-        phase = !phase;
-        requestDraw();
-      }, FLICKER_MS);
-  };
   const syncModeUi = () => {
     root.dataset.mode = mode;
-    MODES2.forEach((m, i) => {
-      modeBtns[i].setAttribute("aria-checked", String(m.mode === mode));
+    modeList.forEach((m, i) => {
+      modeBtns[i].setAttribute("aria-checked", String(m === mode));
     });
     handle.tabIndex = mode === "wipe" ? 0 : -1;
+    modePill?.update();
   };
   const setMode = (next, emit = true) => {
-    if (next === mode)
+    if (next === mode || !modeList.includes(next))
       return;
     mode = next;
     const reduced = reducedMotion(win);
@@ -10941,19 +11342,29 @@ function compare(container, options) {
     else
       lay.set(next === "side" ? 0 : 1);
     syncModeUi();
-    syncFlicker();
     if (emit)
       options.onMode?.(next);
     requestDraw();
   };
-  const setWipe = (next, emit = true) => {
+  const setWipe = (next, emit = true, jump = false) => {
     const w = Math.min(1, Math.max(0, next));
-    if (w === wipe)
+    if (w === wipe && !jump)
       return;
     wipe = w;
+    const minGap = 2 / Math.max(1, wipeRect(layoutNow().L.overlay).w);
+    const head = moveHead({ x: wipeLine.x, target: wipeLine.target }, w, jump && !reducedMotion(win) ? "jump" : "follow", wipeCatching, minGap);
+    wipeCatching = head.catching;
+    if (head.catching) {
+      wipeLine.x = head.x;
+      wipeLine.target = head.target;
+    } else
+      wipeLine.snap(head.x);
     if (emit)
       options.onWipe?.(w);
-    drawNow();
+    if (head.catching)
+      requestDraw();
+    else
+      drawNow();
   };
   const setLoupe = (on) => {
     loupeOn = on;
@@ -11106,28 +11517,44 @@ function compare(container, options) {
     viewSent = key;
     options.onView({ zoom: clampZoom(z), loop: l });
   };
+  const labelsIn = (m, r, wr, wx) => {
+    if (m === "wipe") {
+      const at = seamLabels(wx, wr.x, wr.x + wr.w, labelW[0], labelW[1], INSET);
+      return [at.before, at.after];
+    }
+    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * lay.x;
+    return [
+      { x: r.before.x + INSET, opacity: 1 },
+      { x: ax, opacity: 1 }
+    ];
+  };
+  const placeGrip = (wr) => {
+    const gy = gripTop(gripY ?? wr.y + wr.h / 2, wr, GRIP.h) - wr.y;
+    grip.style.transform = `translate3d(0,${gy.toFixed(2)}px,0)`;
+  };
   const draw = () => {
     dirty = false;
     const r = layoutNow();
     const wr = wipeRect(r.L.overlay);
-    const wx = wipeX(wr, wipe);
+    const wx = wipeX(wr, wipeLine.x);
     const k = lay.x;
-    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * k;
-    labels[0].style.transform = `translate(${(r.before.x + INSET).toFixed(2)}px,${(r.before.y + INSET).toFixed(2)}px)`;
-    labels[1].style.transform = `translate(${ax.toFixed(2)}px,${(r.after.y + INSET).toFixed(2)}px)`;
-    const showsBefore = flickHeld || mode === "flicker" && phase;
-    const flickering = flickHeld || mode === "flicker";
-    labels[0].toggleAttribute("data-lit", flickering && showsBefore);
-    labels[1].toggleAttribute("data-lit", flickering && !showsBefore);
-    labels[0].toggleAttribute("data-dim", flickering && !showsBefore || mode === "wipe" && wipe < 0.02);
-    labels[1].toggleAttribute("data-dim", flickering && showsBefore || mode === "wipe" && wipe > 0.98);
+    const a = labelsIn(fromMode, r, wr, wx);
+    const b = labelsIn(toMode, r, wr, wx);
+    const f = Math.min(1, Math.max(0, fade.x));
+    const ys = [r.before.y + INSET, r.after.y + INSET];
+    for (const i of [0, 1]) {
+      const x = a[i].x + (b[i].x - a[i].x) * f;
+      labels[i].style.transform = `translate(${x.toFixed(2)}px,${ys[i].toFixed(2)}px)`;
+      labels[i].style.opacity = (a[i].opacity + (b[i].opacity - a[i].opacity) * f).toFixed(3);
+    }
     const top = Math.min(r.L.side.before.y, r.L.side.after.y);
     split.style.transform = `translate(${r.L.side.split.toFixed(2)}px,${top.toFixed(2)}px)`;
     split.style.height = `${Math.max(0, r.L.side.after.h).toFixed(2)}px`;
     split.style.opacity = String(Math.max(0, 1 - k * 2));
-    handle.toggleAttribute("data-on", mode === "wipe" && !flickHeld);
+    handle.toggleAttribute("data-on", mode === "wipe");
     handle.style.transform = `translate(${wx.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
     handle.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    placeGrip(wr);
     handle.setAttribute("aria-valuenow", String(Math.round(wipe * 100)));
     handle.setAttribute("aria-valuetext", `${Math.round(wipe * 100)}% Before`);
     const pct = `${Math.round(100 / zw.x)}%`;
@@ -11150,7 +11577,7 @@ function compare(container, options) {
         const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, cutAt));
         st.clipPath = t + l + b + right > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px)` : "";
       };
-      const cut = mode === "wipe" && !flickHeld ? wx : Number.POSITIVE_INFINITY;
+      const cut = mode === "wipe" ? wx : Number.POSITIVE_INFINITY;
       for (const s of sides) {
         const rect = s.index === 0 ? r.zBefore : r.zAfter;
         const clip = s.index === 0 ? r.before : r.after;
@@ -11159,10 +11586,8 @@ function compare(container, options) {
         place(s.preview, rect, clip, at);
         if (s.index !== 0)
           continue;
-        for (const n of [s.el, s.preview]) {
-          n.style.mixBlendMode = mode === "difference" && !flickHeld ? "difference" : "";
-          n.style.opacity = mode === "flicker" && !showsBefore ? "0" : "";
-        }
+        for (const n of [s.el, s.preview])
+          n.style.mixBlendMode = mode === "difference" ? "difference" : "";
       }
       return;
     }
@@ -11183,8 +11608,6 @@ function compare(container, options) {
       from: MODE_INDEX[fromMode],
       to: MODE_INDEX[toMode],
       mix: Math.min(1, Math.max(0, fade.x)),
-      flick: flickHeld,
-      phase,
       threshold,
       gain: 1,
       accent,
@@ -11200,6 +11623,11 @@ function compare(container, options) {
   const loop = frameLoop(win, (dt) => {
     lay.step(dt);
     fade.step(dt);
+    if (wipeCatching) {
+      wipeLine.step(dt);
+      if (wipeLine.resting)
+        wipeCatching = false;
+    }
     zu.step(dt);
     zv.step(dt);
     zw.step(dt);
@@ -11233,7 +11661,7 @@ function compare(container, options) {
             pushFrame(s);
       }
     }
-    const moving = !lay.resting || !fade.resting || !zoomResting();
+    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching;
     if (moving)
       dirty = true;
     if (auto && !lay.resting)
@@ -11376,16 +11804,19 @@ function compare(container, options) {
       e.preventDefault();
       return startPinch();
     }
-    if (mode === "wipe" && !flickHeld) {
+    if (mode === "wipe") {
       const wr = wipeRect(layoutNow().L.overlay);
       const inside = p.x >= wr.x - SLOP && p.x <= wr.x + wr.w + SLOP && p.y >= wr.y && p.y <= wr.y + wr.h;
-      const grab = wipeGrab(p.x, wr, wipe, SLOP);
+      const grab = wipeGrab(p.x, wr, wipeLine.x, SLOP);
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
         root.dataset.dragging = "";
+        gripY = p.y;
         e.preventDefault();
         if (!grab.onLine)
-          setWipe(wipeAt(p.x, wr));
+          setWipe(wipeAt(p.x, wr), true, true);
+        else
+          drawNow();
         return;
       }
     }
@@ -11411,6 +11842,11 @@ function compare(container, options) {
       pinch = { d, x: mid.x, y: mid.y };
       return handZoom(zoomAbout(panned, k, q.pu, q.pv));
     }
+    if (mode === "wipe" && drag?.kind !== "pan") {
+      gripY = p.y;
+      if (!drag)
+        placeGrip(wipeRect(layoutNow().L.overlay));
+    }
     if (drag?.kind === "wipe")
       setWipe(wipeAt(p.x, wipeRect(layoutNow().L.overlay), drag.offset));
     else if (drag?.kind === "pan") {
@@ -11483,12 +11919,6 @@ function compare(container, options) {
     const z = { u: zu.target, v: zv.target, w: zw.target, h: zw.target };
     glideZoom(zoomAbout(z, factor, 0.5, 0.5));
   };
-  const holdFlick = (on) => {
-    if (flickHeld === on)
-      return;
-    flickHeld = on;
-    drawNow();
-  };
   const holdLoupe = (on) => {
     if (loupeHeld === on)
       return;
@@ -11534,25 +11964,17 @@ function compare(container, options) {
       case "s":
       case "w":
       case "d":
-        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
-          return;
-        claim();
-        return setMode(KEY_MODE[key]);
       case "1":
       case "2":
-      case "3":
-      case "4":
-        if (e.altKey || e.shiftKey)
+      case "3": {
+        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
           return;
-        claim();
-        return setMode(MODES2[Number(key) - 1].mode);
-      case "x":
-        if (e.altKey)
+        const m = modeForKey(key, modeList);
+        if (!m)
           return;
         claim();
-        if (!e.repeat)
-          holdFlick(true);
-        return;
+        return setMode(m);
+      }
       case "z":
         if (e.altKey)
           return;
@@ -11608,8 +12030,11 @@ function compare(container, options) {
   labels[1].textContent = labelOf(1);
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
+  const modePill = modeList.length > 1 ? selectionPill(modes, {
+    rows: () => modeBtns,
+    selected: () => modeBtns[modeList.indexOf(mode)] ?? null
+  }) : null;
   syncModeUi();
-  syncFlicker();
   const unlisten = tl?.listen({
     onSeek: (t, source) => {
       if (source === "play") {
@@ -11667,24 +12092,20 @@ function compare(container, options) {
   });
   root.addEventListener("keydown", onKey);
   root.addEventListener("keyup", (e) => {
-    const key = e.key.toLowerCase();
-    if (key === "x")
-      holdFlick(false);
-    else if (key === "z")
+    if (e.key.toLowerCase() === "z")
       holdLoupe(false);
   });
   root.addEventListener("focusout", (e) => {
     if (root.contains(e.relatedTarget))
       return;
-    holdFlick(false);
     holdLoupe(false);
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
-    ...MODES2.map((m, i) => ({
+    ...modeList.length > 1 ? modeList.map((m, i) => ({
       el: modeBtns[i],
-      label: m.label,
-      activate: () => setMode(m.mode)
-    })),
+      label: MODE_LABEL[m].long,
+      activate: () => setMode(m)
+    })) : [],
     { el: loopBtn, label: "Loop", activate: () => api.setLoop(!loopNow()) },
     ...loupeBtn.hidden ? [] : [{ el: loupeBtn, label: "Loupe", activate: () => setLoupe(!loupeOn) }],
     ...zoomed() ? [{ el: zoomReset, label: "Reset zoom", activate: () => api.setZoom(null) }] : [],
@@ -11709,6 +12130,7 @@ function compare(container, options) {
     get mode() {
       return mode;
     },
+    modes: modeList,
     get wipe() {
       return wipe;
     },
@@ -11764,7 +12186,7 @@ function compare(container, options) {
         tl?.update({ fps: next.fps });
       requestDraw();
     },
-    seek: (t) => tl ? tl.seek(t) : ownSeek(t),
+    seek: (t, o) => tl ? tl.seek(t, o?.glide ? { glide: true } : undefined) : ownSeek(t),
     seekBy(d) {
       const total = duration || tl?.duration || 0;
       const t = Math.min(total, Math.max(0, now() + d));
@@ -11805,7 +12227,7 @@ function compare(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
-      win.clearInterval(flickerTimer);
+      modePill?.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -11835,7 +12257,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, FLICKER_MS = 400, SLOP = 12, INSET = 8, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODES2, KEY_MODE;
+var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -11843,21 +12265,24 @@ var init_compare = __esm(() => {
   init_compare_gpu();
   init_compare_model();
   init_compare_strip();
+  init_icons();
   init_look();
   init_rgba();
+  init_selection_pill();
   init_timeline();
+  init_timeline_model();
   LAYOUT2 = springMotion({ duration: 0.35, bounce: 0 });
   FADE6 = springMotion(SPRINGS.snappy);
   FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
+  WIPE_CATCH = springMotion(CATCH_UP);
+  GRIP = { w: 16, h: 28 };
   LOUPE = { r: 88, zoom: 4 };
-  MODES2 = [
-    { mode: "side", label: "Side by side", key: "S" },
-    { mode: "wipe", label: "Wipe", key: "W" },
-    { mode: "difference", label: "Difference", key: "D" },
-    { mode: "flicker", label: "Flicker", key: "" }
-  ];
-  KEY_MODE = { s: "side", w: "wipe", d: "difference" };
+  MODE_LABEL = {
+    side: { short: "Side", long: "Side by side" },
+    wipe: { short: "Wipe", long: "Wipe" },
+    difference: { short: "Difference", long: "Difference" }
+  };
 });
 
 // src/ui/react.tsx
@@ -14757,6 +15182,7 @@ function timelineChanges(now, changed) {
 // src/ui/picker.ts
 init_motion();
 init_look();
+init_icons();
 
 // src/ui/picker-model.ts
 function digitPick(ids, key) {
@@ -14811,7 +15237,7 @@ var CLOSE3 = springMotion(CLOSE);
 var CARD = springMotion(SPRINGS.default);
 var FADE5 = springMotion(FADE);
 var DRIFT = 6;
-var CHECK = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+var CHECK = icon("check", { small: true });
 function optionPicker(container, options) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
@@ -16375,7 +16801,7 @@ var walkthroughCss = `
 .knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
 .knobs-walkthrough a:hover{text-decoration-color:currentColor}
 .knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--_k-mono);padding:1px 5px;border-radius:5px;background:var(--_k-fill)}
-:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
+:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step,button.knobs-wt-stitle,.knobs-wt-chapter){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
   background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
 
 /* ——— layout: the rail beside the column; one column where it's narrow ——— */
@@ -16434,9 +16860,9 @@ var walkthroughCss = `
 .knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--_k-fg)}
 .knobs-wt-fi-q{color:var(--_k-fg-2)}
 .knobs-wt-fi-q::before{content:"You asked: ";color:var(--_k-fg-3)}
-:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
+:where(.knobs-ui) :is(.knobs-wt-fi-step,.knobs-wt-steplink){all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--k-walkthrough-text,14px) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
   padding:3px 6px;margin:0;border-radius:6px;cursor:pointer;outline:none;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui :is(.knobs-wt-fi-step,.knobs-wt-steplink):is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 
 /* ——— a step's sent notes ——— */
 .knobs-wt-notes{display:flex;flex-direction:column}
@@ -16572,7 +16998,8 @@ var walkthroughCss = `
 }
 
 /* ——— media slots ——— */
-.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font)}
+.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font);
+  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info))}
 .knobs-wt-slot-label{display:block;margin:0 0 6px 2px;font:var(--_k-weight-label) calc(var(--k-walkthrough-text,14px) - 3px)/1.3 var(--_k-font);color:var(--_k-fg-2);letter-spacing:.04em;text-transform:uppercase}
 /* A compare is exactly as tall as its pictures at this width, so there's no letterbox: the two
    sides edge to edge (side) or one (overlaid), plus its mode bar, the timeline and their two gaps
@@ -16612,9 +17039,141 @@ var walkthroughCss = `
 .knobs-wt-text{max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
 .knobs-wt-hold{border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
 .knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
+
+/* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
+   hairlines and fills only. Tones read the status tokens; hover fades are the panel's own. ——— */
+:where(.knobs-wt-history,.knobs-wt-stack,.knobs-wt-table,.knobs-wt-chapters){--kw-t:var(--k-walkthrough-text,14px);--kw-line:calc(var(--kw-t) + 6px);--kw-rail:var(--_k-border-strong)}
+:where(.knobs-wt-slot) [data-tone="good"]{--kw-tone:var(--kw-good)}
+:where(.knobs-wt-slot) [data-tone="warn"]{--kw-tone:var(--_k-warn)}
+:where(.knobs-wt-slot) [data-tone="bad"]{--kw-tone:var(--_k-danger)}
+:where(.knobs-wt-slot) [data-tone="info"]{--kw-tone:var(--kw-info)}
+:where(.knobs-wt-slot) [data-tone="dim"]{--kw-tone:var(--_k-fg-3)}
+.knobs-wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
+.knobs-ui .knobs-wt-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-2);font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);
+  text-decoration:none;white-space:nowrap;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui a.knobs-wt-tag:is(:hover,:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+
+/* A history: dates down the left, a spine of tone dots joined by a hairline (broken around each
+   dot), the event beside it. Inferred events take a ring for a dot and a dashed tag. */
+.knobs-wt-history{--kw-hy:calc(5px + var(--kw-line) / 2);display:flex;flex-direction:column;gap:18px;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-hgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
+.knobs-wt-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
+.knobs-ui .knobs-wt-hheading{margin:0;font:var(--_k-weight-label) calc(var(--kw-t) - 3px)/1.3 var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
+.knobs-wt-hsum{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px);font-variant-numeric:tabular-nums}
+.knobs-wt-hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
+.knobs-wt-hev{display:grid;grid-template-columns:var(--kw-hw,11ch) 14px minmax(0,1fr);grid-template-areas:"when spine main";column-gap:10px;align-items:baseline;padding:5px 0}
+.knobs-wt-hwhen{grid-area:when;display:flex;flex-direction:column;min-width:0;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-hage{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 3px);line-height:1.35}
+.knobs-wt-hspine{grid-area:spine;position:relative;align-self:stretch;margin-block:-5px}
+.knobs-wt-hspine::before,.knobs-wt-hspine::after{content:"";position:absolute;left:6.5px;width:1px;background:var(--kw-rail)}
+.knobs-wt-hspine::before{top:0;height:calc(var(--kw-hy) - 6px)}
+.knobs-wt-hspine::after{top:calc(var(--kw-hy) + 6px);bottom:0}
+.knobs-wt-hev:first-child .knobs-wt-hspine::before,.knobs-wt-hev:last-child .knobs-wt-hspine::after{content:none}
+.knobs-wt-hdot{position:absolute;left:3.5px;top:calc(var(--kw-hy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hev[data-type="release"] .knobs-wt-hdot{border-radius:1.5px;rotate:45deg;scale:.9}
+.knobs-wt-hev[data-type="audit"] .knobs-wt-hdot{border-radius:1.5px}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-hdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hmain{grid-area:main;display:flex;flex-direction:column;gap:2px;min-width:0}
+.knobs-wt-htitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
+.knobs-wt-prov{padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-t) - 3.5px)/18px var(--_k-mono);white-space:nowrap}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-prov{background:transparent;color:var(--_k-warn);outline:1px dashed color-mix(in oklch,var(--_k-warn) 50%,transparent);outline-offset:-1px}
+.knobs-ui .knobs-wt-hdetail{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-hev{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"spine when" "spine main"}
+  .knobs-wt-hwhen{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
+}
+
+/* A stack: the trunk at the top, each PR hanging off the branch it merges into, rails drawn as a
+   git graph (solid, so where two meet they don't darken). A PR with a step goes there on a click. */
+.knobs-wt-stack{--kw-spt:7px;--kw-spb:7px;--kw-sy:calc(var(--kw-spt) + var(--kw-line) / 2);display:flex;flex-direction:column;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;margin:0 -8px;padding:var(--kw-spt) 8px var(--kw-spb);
+  border-radius:max(0px,calc(var(--_k-radius-panel) - 8px));transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-srow[data-trunk]{--kw-spb:0px;grid-template-columns:auto minmax(0,1fr)}
+.knobs-wt-srow[data-go]{cursor:pointer}
+.knobs-wt-srow[data-go]:hover{background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-lanes{display:flex;align-self:stretch;margin-block:calc(var(--kw-spt) * -1) calc(var(--kw-spb) * -1)}
+.knobs-wt-lane{position:relative;flex:none;width:16px}
+.knobs-wt-lane:is([data-rail="pass"],[data-rail="tee"],[data-down])::before{content:"";position:absolute;left:7.5px;top:0;bottom:0;width:1px;background:var(--kw-rail)}
+.knobs-wt-lane[data-down]::before{top:calc(var(--kw-sy) + 3.5px)}
+.knobs-wt-lane:is([data-rail="tee"],[data-rail="end"])::after{content:"";position:absolute;left:7.5px;top:0;width:13px;height:calc(var(--kw-sy) + .5px);border:solid var(--kw-rail);border-width:0 0 1px 1px;border-bottom-left-radius:6px}
+.knobs-wt-lane[data-rail="node"]::after{content:"";position:absolute;left:4.5px;top:calc(var(--kw-sy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--_k-fg-3)}
+.knobs-wt-srow[data-trunk] .knobs-wt-lane[data-rail="node"]::after{background:var(--_k-fg-2)}
+.knobs-wt-trunk{font:var(--_k-weight-label) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2)}
+.knobs-wt-smain{display:flex;flex-direction:column;gap:1px;min-width:0}
+.knobs-wt-sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
+.knobs-wt-sord{font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);white-space:nowrap}
+.knobs-ui .knobs-wt-spr{font:var(--_k-weight-label) calc(var(--kw-t) - 1.5px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2);text-decoration:none;white-space:nowrap}
+.knobs-ui a.knobs-wt-spr:is(:hover,:focus-visible){color:var(--_k-fg);text-decoration:underline}
+.knobs-ui .knobs-wt-stitle{font-weight:var(--_k-weight-label);line-height:var(--kw-line);color:var(--_k-fg);text-align:left}
+.knobs-ui button.knobs-wt-stitle{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui :is(.knobs-wt-srow[data-go]:hover button.knobs-wt-stitle,button.knobs-wt-stitle:focus-visible){text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-ssummary{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+.knobs-wt-smeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
+.knobs-wt-delta{display:inline-flex;gap:6px}
+.knobs-wt-add{color:var(--_k-diff-add)}
+.knobs-wt-del{color:var(--_k-diff-del)}
+.knobs-wt-sstatus{margin-top:calc((var(--kw-line) - 20px) / 2)}
+.knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr) auto}
+.knobs-wt-stack[data-flat] .knobs-wt-srow+.knobs-wt-srow{box-shadow:inset 0 1px 0 var(--_k-border)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-srow:not([data-trunk]){grid-template-columns:auto minmax(0,1fr)}
+  .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr)}
+  .knobs-wt-sstatus{grid-column:-2;justify-self:start;margin-top:4px}
+}
+
+/* A table: a real one, its head stuck while it scrolls, both ways; edges fade where there's more
+   (the top one under the head), and thin bars show on hover. */
+@property --kw-fade-l{syntax:"<number>";inherits:false;initial-value:1}
+@property --kw-fade-r{syntax:"<number>";inherits:false;initial-value:1}
+@keyframes kw-fade-l{from{--kw-fade-l:1}to{--kw-fade-l:0}}
+@keyframes kw-fade-r{from{--kw-fade-r:0}to{--kw-fade-r:1}}
+.knobs-wt-table{max-height:520px;overflow:auto;overscroll-behavior-x:contain;outline:none;scrollbar-width:thin;scrollbar-color:transparent transparent;
+  transition:scrollbar-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-table:is(:hover,:focus-visible){scrollbar-color:color-mix(in oklch,var(--_k-fg) 28%,transparent) transparent;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-table:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus);border-radius:calc(var(--_k-radius-panel) - 4px)}
+@supports (animation-timeline:scroll()){
+  .knobs-wt-table{animation:knobs-fade-a linear both,knobs-fade-b linear both,kw-fade-l linear both,kw-fade-r linear both;animation-duration:auto;
+    animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 24px,calc(100% - 24px) 100%,0 8px,calc(100% - 8px) 100%;
+    --kw-table-mask-y:linear-gradient(to bottom,#000 var(--kw-thead,0px),rgb(0 0 0/var(--knobs-fade-a)) var(--kw-thead,0px),#000 calc(var(--kw-thead,0px) + 20px),#000 calc(100% - 20px),rgb(0 0 0/var(--knobs-fade-b)));
+    --kw-table-mask-x:linear-gradient(to right,rgb(0 0 0/var(--kw-fade-l)),#000 24px,#000 calc(100% - 24px),rgb(0 0 0/var(--kw-fade-r)));
+    -webkit-mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);-webkit-mask-composite:source-in;mask-composite:intersect}
+}
+.knobs-wt-table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:calc(var(--kw-t) - 1.5px);line-height:1.45;font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-table caption{caption-side:bottom;padding-top:8px;text-align:left;color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px)}
+.knobs-wt-table th{position:sticky;top:0;padding:0 12px 7px;text-align:left;vertical-align:bottom;font-weight:var(--_k-weight-label);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg-3);white-space:nowrap;
+  background:var(--_k-pane-bg);box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table td{padding:8px 12px;vertical-align:baseline;box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table tr:last-child td{box-shadow:none}
+.knobs-wt-table :is(th,td):first-child{padding-left:0}
+.knobs-wt-table :is(th,td):last-child{padding-right:0}
+.knobs-wt-table td:first-child{color:var(--_k-fg)}
+.knobs-wt-table [data-align="right"]{text-align:right}
+.knobs-wt-table [data-align="center"]{text-align:center}
+.knobs-wt-table td[data-mono]{font-family:var(--_k-mono);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg);white-space:nowrap}
+.knobs-wt-table td[data-long]{min-width:24ch}
+.knobs-wt-table td>.knobs-wt-steplink{margin-left:4px}
+.knobs-ui .knobs-wt-table a.knobs-wt-chip{text-decoration:none}
+.knobs-wt-ctone{color:var(--kw-tone)}
+
+/* Chapters: timestamp pills under a video; one highlight springs to the one playing. */
+.knobs-wt-chapters{position:relative;display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
+.knobs-wt-chapter-mark{position:absolute;left:0;top:0;width:0;border-radius:calc(var(--_k-radius) + 2px);background:var(--_k-fill-selected);opacity:0;pointer-events:none;will-change:transform;
+  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms)}
+.knobs-wt-chapter-mark[data-on]{opacity:1}
+.knobs-ui .knobs-wt-chapter{position:relative;display:inline-flex;align-items:baseline;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:calc(var(--_k-radius) + 2px);color:var(--_k-fg-2);
+  font-size:calc(var(--kw-t) - 2px);line-height:26px;white-space:nowrap;cursor:pointer;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-chapter:hover{background:var(--_ku-wash);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-chapter[aria-current]{background:transparent;color:var(--_k-fg)}
+.knobs-ui .knobs-wt-chapter:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus)}
+.knobs-wt-chapter-time{font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
+.knobs-wt-chapter[aria-current] .knobs-wt-chapter-time{color:var(--_k-fg-2)}
 @media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
 `;
 
+// src/ui/walkthrough-blocks.ts
+init_motion();
+init_look();
+
 // src/ui/walkthrough-model.ts
 var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
 function slug(text) {
@@ -16656,20 +17215,207 @@ function fillMedia(m, base) {
   if (typeof m === "string")
     return mediaOf(resolveSrc(m, base));
   switch (m.kind) {
-    case "compare":
-      return { ...m, before: source2(m.before, base), after: source2(m.after, base) };
-    case "video":
+    case "compare": {
+      const { chapters, ...rest } = m;
       return {
-        ...m,
+        ...rest,
+        before: source2(m.before, base),
+        after: source2(m.after, base),
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
+      };
+    }
+    case "video": {
+      const { chapters, captionsSrc, captions, ...rest } = m;
+      const vtt = captions ?? captionsSrc;
+      return {
+        ...rest,
         src: resolveSrc(m.src, base),
-        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {}
+        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {},
+        ...vtt ? { captions: resolveSrc(vtt, base) } : {},
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
       };
+    }
     case "image":
       return { ...m, src: resolveSrc(m.src, base) };
+    case "history":
+      return { kind: "history", groups: fillHistory(m) };
+    case "stack":
+      return {
+        kind: "stack",
+        ...m.base ? { base: m.base } : {},
+        items: m.items.map(fillStackItem)
+      };
+    case "table":
+      return fillTable(m);
     default:
       return m;
   }
 }
+function fillHistory(m) {
+  const groups = [];
+  if (m.events?.length)
+    groups.push({ events: m.events });
+  for (const g of m.groups ?? [])
+    groups.push({
+      ...g.heading ? { heading: g.heading } : {},
+      ...g.summary ? { summary: g.summary } : {},
+      events: g.events ?? g.rows ?? []
+    });
+  return groups;
+}
+function parseBranch(branch) {
+  if (!branch?.trim())
+    return {};
+  const [head, base] = branch.split(/\s*(?:→|->|=>|⇒)\s*/, 2).map((s) => s.trim());
+  return { ...head ? { head } : {}, ...base ? { base } : {} };
+}
+function parseDelta(delta) {
+  if (delta === undefined || typeof delta === "object")
+    return delta;
+  const m = /\+\s*([\d,_]+)[^\d+]*?[-−–]\s*([\d,_]+)/.exec(delta);
+  if (!m)
+    return delta.trim() || undefined;
+  const n = (s) => Number(s.replace(/[,_]/g, ""));
+  return { add: n(m[1]), del: n(m[2]) };
+}
+function fillStackItem(it) {
+  const parsed = parseBranch(it.branch);
+  const head = parsed.head ?? it.head;
+  const base = parsed.base ?? it.base;
+  const delta = parseDelta(it.delta);
+  const step = it.step ?? it.stepId;
+  const pr = String(it.pr).trim();
+  return {
+    pr: /^\d+$/.test(pr) ? `#${pr}` : pr,
+    ...it.href ? { href: it.href } : {},
+    title: it.title,
+    ...head ? { head } : {},
+    ...base ? { base } : {},
+    ...delta !== undefined ? { delta } : {},
+    ...it.status ? { status: it.status } : {},
+    ...it.tone ? { tone: it.tone } : {},
+    ...it.summary ? { summary: it.summary } : {},
+    ...step ? { step } : {},
+    ...it.order !== undefined && it.order !== "" ? { order: String(it.order) } : {}
+  };
+}
+function stackLayout(m) {
+  const items = m.items;
+  const byHead = new Map;
+  items.forEach((it, i) => it.head && !byHead.has(it.head) && byHead.set(it.head, i));
+  let trunk = m.base ?? null;
+  if (!trunk) {
+    const tally = new Map;
+    for (const it of items)
+      if (it.base && !byHead.has(it.base))
+        tally.set(it.base, (tally.get(it.base) ?? 0) + 1);
+    let best = 0;
+    for (const [b, n] of tally)
+      if (n > best)
+        [trunk, best] = [b, n];
+  }
+  const parentOf = items.map((it, i) => {
+    const p = it.base === undefined ? undefined : byHead.get(it.base);
+    return p === undefined || p === i ? null : p;
+  });
+  items.forEach((_, i) => {
+    const seen = new Set;
+    for (let n = i;n !== null; n = parentOf[n]) {
+      if (seen.has(n)) {
+        const loop = [n];
+        for (let k = parentOf[n];k !== n && k !== null; k = parentOf[k])
+          loop.push(k);
+        parentOf[Math.min(...loop)] = null;
+        break;
+      }
+      seen.add(n);
+    }
+  });
+  const kids = items.map(() => []);
+  const roots = [];
+  parentOf.forEach((p, i) => (p === null ? roots : kids[p]).push(i));
+  const rows = [];
+  const walk = (list, depth, rails) => list.forEach((i, n) => {
+    const it = items[i];
+    const last = n === list.length - 1;
+    const off = parentOf[i] === null && it.base && it.base !== trunk ? it.base : undefined;
+    rows.push({
+      item: it,
+      index: i,
+      depth,
+      parent: parentOf[i],
+      last,
+      rails,
+      children: kids[i].length,
+      ...off ? { offBase: off } : {}
+    });
+    walk(kids[i], depth + 1, [...rails, !last]);
+  });
+  walk(roots, 0, []);
+  return { trunk, rows, flat: !trunk && rows.every((r) => r.depth === 0 && !r.children) };
+}
+var isNum = (c) => typeof c === "number" || typeof c === "object" && typeof c.text === "number";
+function fillCell(c) {
+  if (typeof c !== "object")
+    return { text: String(c) };
+  return { ...c, text: String(c.text) };
+}
+function fillTable(m) {
+  const wrapped = !m.columns.some((c) => c.key === "cells");
+  const raw = m.rows.map((r) => {
+    const keys = Object.keys(r);
+    const cells = r.cells;
+    return wrapped && keys.length === 1 && keys[0] === "cells" && cells && typeof cells === "object" ? cells : r;
+  });
+  const columns = m.columns.map((c) => {
+    const present = raw.map((r) => r[c.key]).filter((v) => v !== undefined && v !== "");
+    const numeric = present.length > 0 && present.every(isNum);
+    return { ...c, align: c.align ?? (numeric ? "right" : "left") };
+  });
+  const rows = raw.map((r) => {
+    const out = {};
+    for (const [k, v] of Object.entries(r))
+      if (v !== undefined && v !== null)
+        out[k] = fillCell(v);
+    return out;
+  });
+  return { kind: "table", columns, rows, ...m.caption ? { caption: m.caption } : {} };
+}
+function fillChapters(chapters) {
+  const id = uniqueIds();
+  const starts = chapters.map((c) => c.start).sort((a, b) => a - b);
+  return chapters.map((c) => {
+    const next = starts.find((s) => s > c.start);
+    const end = c.end ?? (c.duration !== undefined ? Math.round((c.start + c.duration) * 1000) / 1000 : next);
+    return {
+      id: id(c.id ?? slug(c.label)),
+      label: c.label,
+      start: c.start,
+      ...end !== undefined && end > c.start ? { end } : {}
+    };
+  });
+}
+function chapterAt(chapters, time) {
+  let at = -1;
+  chapters.forEach((c, i) => {
+    if (time >= c.start && time < (c.end ?? Infinity) && (at < 0 || c.start >= chapters[at].start))
+      at = i;
+  });
+  return at;
+}
+function clock(seconds) {
+  const t = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(t / 3600);
+  const m = Math.floor(t % 3600 / 60);
+  const s = String(t % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+}
+function findStep(steps, ref) {
+  if (ref === undefined)
+    return;
+  const r = ref.trim().replace(/^#/, "");
+  return steps.find((s) => s.key === r || s.id === r || s.number === r);
+}
 function linkLabel(href) {
   const pr = /\/(?:pull|issues)\/(\d+)/.exec(href);
   if (pr)
@@ -16726,7 +17472,7 @@ function normalizeWalkthrough(doc) {
     label: k,
     value
   }));
-  const stepRef = (ref) => ref === undefined ? null : steps.find((s) => s.key === ref || s.id === ref || s.number === ref)?.key ?? null;
+  const stepRef = (ref) => findStep(steps, ref)?.key ?? null;
   const feed = sortFeed([
     ...(doc.updates ?? []).map((u) => ({ kind: "update", at: parseAt(u.at), text: u.text, step: stepRef(u.step) })),
     ...(doc.qa ?? []).map((x) => ({
@@ -16893,6 +17639,8 @@ function describeMedia(m) {
     parts.push(`${m.kind} at ${formatTime(m.time)}`);
   else
     parts.push(m.kind);
+  if (m.chapter)
+    parts[0] += ` in “${m.chapter}”`;
   if (m.loop)
     parts.push(`loop ${formatTime(m.loop.start)}–${formatTime(m.loop.end)}`);
   if (m.zoom)
@@ -17052,6 +17800,388 @@ function inlineMarkdown(text) {
   return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
 }
 
+// src/ui/walkthrough-blocks.ts
+var el = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+var text = (doc, tag, cls, value) => {
+  const n = el(doc, tag, cls);
+  n.textContent = value;
+  return n;
+};
+var prose = (doc, tag, cls, value) => {
+  const n = el(doc, tag, cls);
+  n.innerHTML = inlineMarkdown(value);
+  return n;
+};
+var link = (doc, cls, label, href) => {
+  if (!href)
+    return text(doc, "span", cls, label);
+  const a = text(doc, "a", cls, label);
+  a.href = href;
+  a.target = "_blank";
+  a.rel = "noreferrer";
+  return a;
+};
+function stepButton(doc, ref, steps) {
+  const s = ref && steps?.find(ref);
+  if (!s || !steps)
+    return null;
+  const b = text(doc, "button", "knobs-wt-steplink", s.number);
+  b.type = "button";
+  b.title = `Go to ${s.number} ${s.title}`;
+  b.setAttribute("aria-label", b.title);
+  b.addEventListener("click", (e) => {
+    e.stopPropagation();
+    steps.go(s.key);
+  });
+  return b;
+}
+var tags = (doc, list) => {
+  if (!list?.length)
+    return null;
+  const row = el(doc, "div", "knobs-wt-tags");
+  for (const e of list)
+    row.append(link(doc, "knobs-wt-tag", e.label, e.href));
+  return row;
+};
+function mountHistory(host, m, steps) {
+  const doc = host.ownerDocument;
+  const root = el(doc, "div", "knobs-wt-history");
+  const longest = Math.max(6, ...m.groups.flatMap((g) => g.events.flatMap((e) => [e.date.length, e.age?.length ?? 0])));
+  root.style.setProperty("--kw-hw", `${Math.min(16, longest + 1)}ch`);
+  for (const g of m.groups) {
+    const group = el(doc, "section", "knobs-wt-hgroup");
+    if (g.heading || g.summary) {
+      const head = el(doc, "header", "knobs-wt-hhead");
+      if (g.heading)
+        head.append(text(doc, "h4", "knobs-wt-hheading", g.heading));
+      if (g.summary)
+        head.append(text(doc, "span", "knobs-wt-hsum", g.summary));
+      group.append(head);
+    }
+    const list = el(doc, "ol", "knobs-wt-hlist");
+    for (const e of g.events)
+      list.append(historyEvent(doc, e, steps));
+    group.append(list);
+    root.append(group);
+  }
+  host.append(root);
+  return { dispose: () => root.remove(), context: () => ({ kind: "history" }) };
+}
+function historyEvent(doc, e, steps) {
+  const li = el(doc, "li", "knobs-wt-hev");
+  if (e.tone)
+    li.dataset.tone = e.tone;
+  if (e.type)
+    li.dataset.type = e.type;
+  if (e.provenance)
+    li.dataset.provenance = e.provenance;
+  const when = el(doc, "div", "knobs-wt-hwhen");
+  when.append(text(doc, "time", "knobs-wt-hdate", e.date));
+  if (e.age)
+    when.append(text(doc, "span", "knobs-wt-hage", e.age));
+  const spine = el(doc, "span", "knobs-wt-hspine");
+  spine.setAttribute("aria-hidden", "true");
+  spine.append(el(doc, "span", "knobs-wt-hdot"));
+  const main = el(doc, "div", "knobs-wt-hmain");
+  const title = el(doc, "div", "knobs-wt-htitle");
+  title.append(text(doc, "span", "knobs-wt-htext", e.title));
+  if (e.provenance || e.source) {
+    const p = text(doc, "span", "knobs-wt-prov", [e.provenance, e.source].filter(Boolean).join(" · "));
+    if (e.provenance === "inferred")
+      p.title = "Inferred from behaviour, not seen in the record";
+    else if (e.provenance === "verified")
+      p.title = "Seen in the record";
+    title.append(p);
+  }
+  const go = stepButton(doc, e.step, steps);
+  if (go)
+    title.append(go);
+  main.append(title);
+  if (e.detail)
+    main.append(prose(doc, "p", "knobs-wt-hdetail", e.detail));
+  const t = tags(doc, e.evidence);
+  if (t)
+    main.append(t);
+  li.append(when, spine, main);
+  return li;
+}
+function mountStack(host, m, steps) {
+  const doc = host.ownerDocument;
+  const layout = stackLayout(m);
+  const root = el(doc, "div", "knobs-wt-stack");
+  root.toggleAttribute("data-flat", layout.flat);
+  const lane = (kind) => {
+    const s = el(doc, "span", "knobs-wt-lane");
+    s.dataset.rail = kind;
+    return s;
+  };
+  const node = (down) => {
+    const s = lane("node");
+    s.toggleAttribute("data-down", down);
+    return s;
+  };
+  const from = layout.trunk ? 0 : 1;
+  if (layout.trunk && layout.rows.length) {
+    const row = el(doc, "div", "knobs-wt-srow");
+    row.dataset.trunk = "";
+    const lanes = el(doc, "span", "knobs-wt-lanes");
+    lanes.setAttribute("aria-hidden", "true");
+    lanes.append(node(true));
+    row.append(lanes, text(doc, "span", "knobs-wt-trunk", layout.trunk));
+    root.append(row);
+  }
+  for (const r of layout.rows) {
+    const it = r.item;
+    const row = el(doc, "div", "knobs-wt-srow");
+    if (!layout.flat) {
+      const lanes = el(doc, "span", "knobs-wt-lanes");
+      lanes.setAttribute("aria-hidden", "true");
+      for (let k = from;k < r.depth; k++)
+        lanes.append(lane(r.rails[k] ? "pass" : "none"));
+      if (r.depth >= from)
+        lanes.append(lane(r.last ? "end" : "tee"));
+      lanes.append(node(r.children > 0));
+      row.append(lanes);
+    }
+    const main = el(doc, "div", "knobs-wt-smain");
+    const line = el(doc, "div", "knobs-wt-sline");
+    if (it.order)
+      line.append(text(doc, "span", "knobs-wt-sord", it.order));
+    line.append(link(doc, "knobs-wt-spr", it.pr, it.href));
+    const target = it.step ? steps?.find(it.step) : null;
+    if (target && steps) {
+      const title = text(doc, "button", "knobs-wt-stitle", it.title);
+      title.type = "button";
+      title.title = `Go to ${target.number} ${target.title}`;
+      title.addEventListener("click", (e) => {
+        e.stopPropagation();
+        steps.go(target.key);
+      });
+      line.append(title);
+      const go = stepButton(doc, it.step, steps);
+      if (go)
+        line.append(go);
+      row.dataset.go = "";
+      row.addEventListener("click", (e) => {
+        const t = e.target;
+        if (t?.closest("a,button"))
+          return;
+        if (doc.getSelection()?.toString())
+          return;
+        steps.go(target.key);
+      });
+    } else
+      line.append(text(doc, "span", "knobs-wt-stitle", it.title));
+    main.append(line);
+    if (it.summary)
+      main.append(prose(doc, "p", "knobs-wt-ssummary", it.summary));
+    const meta = el(doc, "div", "knobs-wt-smeta");
+    if (it.head) {
+      const branch = r.offBase ? `${it.head} → ${r.offBase}` : it.head;
+      meta.append(text(doc, "span", "knobs-wt-sbranch", branch));
+    }
+    if (it.delta !== undefined)
+      meta.append(delta(doc, it.delta));
+    if (meta.childNodes.length)
+      main.append(meta);
+    row.append(main);
+    if (it.status) {
+      const chip = text(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
+      chip.dataset.tone = it.tone ?? "dim";
+      row.append(chip);
+    }
+    root.append(row);
+  }
+  host.append(root);
+  return { dispose: () => root.remove(), context: () => ({ kind: "stack" }) };
+}
+function delta(doc, d) {
+  const s = el(doc, "span", "knobs-wt-delta");
+  if (typeof d === "string") {
+    s.textContent = d;
+    return s;
+  }
+  const n = (v) => v.toLocaleString("en-US");
+  s.append(text(doc, "span", "knobs-wt-add", `+${n(d.add)}`));
+  s.append(text(doc, "span", "knobs-wt-del", `−${n(d.del)}`));
+  s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
+  return s;
+}
+function mountTable(host, m, steps) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  const scroller = el(doc, "div", "knobs-wt-table");
+  const table = el(doc, "table");
+  if (m.caption)
+    table.append(text(doc, "caption", "", m.caption));
+  const head = el(doc, "thead");
+  const hr = el(doc, "tr");
+  for (const c of m.columns) {
+    const th = text(doc, "th", "", c.label);
+    th.scope = "col";
+    th.dataset.align = c.align;
+    hr.append(th);
+  }
+  head.append(hr);
+  const body = el(doc, "tbody");
+  for (const r of m.rows) {
+    const tr = el(doc, "tr");
+    for (const c of m.columns) {
+      const td = el(doc, "td");
+      td.dataset.align = c.align;
+      if (c.mono)
+        td.dataset.mono = "";
+      const cell = r[c.key];
+      if (cell) {
+        if (cell.text.length > 40 && !c.mono && !cell.code)
+          td.dataset.long = "";
+        let content;
+        if (cell.badge) {
+          content = link(doc, "knobs-wt-chip", cell.text, cell.href);
+          content.dataset.tone = cell.badge;
+        } else {
+          const inner = cell.code ? text(doc, "code", "", cell.text) : null;
+          if (cell.href) {
+            content = link(doc, "knobs-wt-clink", inner ? "" : cell.text, cell.href);
+            if (inner)
+              content.append(inner);
+          } else
+            content = inner ?? text(doc, "span", "", cell.text);
+          if (cell.tone) {
+            content.classList.add("knobs-wt-ctone");
+            content.dataset.tone = cell.tone;
+          }
+        }
+        td.append(content);
+        const go = stepButton(doc, cell.step, steps);
+        if (go)
+          td.append(go);
+      }
+      tr.append(td);
+    }
+    body.append(tr);
+  }
+  table.append(head, body);
+  scroller.append(table);
+  host.append(scroller);
+  const measure = () => {
+    scroller.style.setProperty("--kw-thead", `${head.offsetHeight}px`);
+    const scrolls = scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1;
+    if (scrolls) {
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", m.caption ?? "Table");
+    } else {
+      scroller.removeAttribute("tabindex");
+      scroller.removeAttribute("role");
+      scroller.removeAttribute("aria-label");
+    }
+  };
+  const ro = win && "ResizeObserver" in win ? new win.ResizeObserver(measure) : null;
+  ro?.observe(scroller);
+  measure();
+  return {
+    dispose: () => {
+      ro?.disconnect();
+      scroller.remove();
+    },
+    context: () => ({ kind: "table" })
+  };
+}
+var grid2 = (v) => Math.round(v * 64) / 64;
+function chapterPills(host, chapters, io) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  const bar = el(doc, "div", "knobs-wt-chapters");
+  bar.setAttribute("role", "group");
+  bar.setAttribute("aria-label", "Chapters");
+  const mark = el(doc, "span", "knobs-wt-chapter-mark");
+  mark.setAttribute("aria-hidden", "true");
+  bar.append(mark);
+  const pills = chapters.map((c) => {
+    const b = el(doc, "button", "knobs-wt-chapter");
+    b.type = "button";
+    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
+    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
+    b.addEventListener("click", () => {
+      io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
+      io.seek(c.start);
+      sync();
+    });
+    bar.append(b);
+    return b;
+  });
+  host.append(bar);
+  const x = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const y = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const w = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
+  const draw = () => {
+    const left = grid2(x.x);
+    mark.style.transform = `translate(${left}px,${grid2(y.x)}px)`;
+    mark.style.width = `${grid2(x.x + w.x) - left}px`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    x.step(dt);
+    y.step(dt);
+    w.step(dt);
+    draw();
+    return !x.resting || !y.resting || !w.resting;
+  });
+  let at = -2;
+  let shown = false;
+  const place = (snap) => {
+    const p = pills[at];
+    if (!p) {
+      mark.removeAttribute("data-on");
+      pills.forEach((b) => b.removeAttribute("aria-current"));
+      shown = false;
+      return;
+    }
+    pills.forEach((b, i) => i === at ? b.setAttribute("aria-current", "true") : b.removeAttribute("aria-current"));
+    const to = [p.offsetLeft, p.offsetTop, p.offsetWidth];
+    if (snap || !shown || reducedMotion(win)) {
+      x.snap(to[0]);
+      y.snap(to[1]);
+      w.snap(to[2]);
+      draw();
+    } else {
+      x.set(to[0]);
+      y.set(to[1]);
+      w.set(to[2]);
+      loop.wake();
+    }
+    mark.style.height = `${p.offsetHeight}px`;
+    mark.dataset.on = "";
+    shown = true;
+  };
+  const sync = () => {
+    const next = chapterAt(chapters, io.now());
+    if (next === at)
+      return;
+    at = next;
+    place(false);
+  };
+  sync();
+  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => place(true)) : null;
+  ro?.observe(bar);
+  return {
+    sync,
+    get current() {
+      return chapters[at] ?? null;
+    },
+    dispose() {
+      loop.stop();
+      ro?.disconnect();
+      bar.remove();
+    }
+  };
+}
+
 // src/ui/walkthrough-media.ts
 function injectWalkthroughStyles(doc) {
   if (doc.querySelector("style[data-knobs-ui-walkthrough]"))
@@ -17184,8 +18314,25 @@ async function mountCompare(host, m, look, alive, onEvent) {
         onEvent?.({ what: "loop", detail: lastLoop = loopKey });
     }
   });
+  const chapters = m.chapters?.length ? m.chapters : null;
+  if (chapters)
+    c.timeline?.update({
+      markers: chapters.map((ch) => ({ id: ch.id, time: ch.start, label: ch.label }))
+    });
+  const pills = chapters ? chapterPills(host, chapters, {
+    now: () => c.time,
+    seek: (t) => {
+      c.seek(t);
+      c.play();
+    },
+    onEvent
+  }) : null;
   const unlisten = c.timeline?.listen({
-    onSeek: (time, source) => source !== "play" && onEvent?.({ what: "seek", time: round2(time) }),
+    onSeek: (time, source) => {
+      pills?.sync();
+      if (source !== "play")
+        onEvent?.({ what: "seek", time: round2(time) });
+    },
     onPlay: (on) => onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) })
   });
   requestAnimationFrame(() => requestAnimationFrame(() => fit.dataset.settled = ""));
@@ -17207,12 +18354,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
         duration: round2(c.duration),
         playing: c.playing,
         mode: c.mode,
+        ...pills?.current ? { chapter: pills.current.label } : {},
         ...loop ? { loop: { start: round2(loop.start), end: round2(loop.end) } } : {},
         ...zoom ? { zoom: { u: round2(zoom.u), v: round2(zoom.v), w: round2(zoom.w), h: round2(zoom.h) } } : {}
       };
     },
     dispose: () => {
       unlisten?.();
+      pills?.dispose();
       c.dispose();
       fit.remove();
     }
@@ -17236,6 +18385,15 @@ function mountVideo(host, m, onEvent) {
     v.poster = m.poster;
   if (!aspect)
     v.addEventListener("loadedmetadata", () => v.videoWidth && frame.style.setProperty("--kw-aspect", String(v.videoWidth / v.videoHeight)), { once: true });
+  if (m.captions) {
+    const track = doc.createElement("track");
+    track.kind = "captions";
+    track.label = "Captions";
+    track.srclang = doc.documentElement.lang || "en";
+    track.default = true;
+    track.src = m.captions;
+    v.append(track);
+  }
   v.src = m.src;
   v.addEventListener("play", () => onEvent?.({ what: "play", time: round2(v.currentTime) }));
   v.addEventListener("pause", () => onEvent?.({ what: "pause", time: round2(v.currentTime) }));
@@ -17245,6 +18403,18 @@ function mountVideo(host, m, onEvent) {
   });
   frame.append(v);
   host.append(frame);
+  const pills = m.chapters?.length ? chapterPills(host, m.chapters, {
+    now: () => v.currentTime,
+    seek: (t) => {
+      v.currentTime = t;
+      v.play().catch(() => {});
+    },
+    onEvent
+  }) : null;
+  const sync = () => pills?.sync();
+  if (pills)
+    for (const type of ["timeupdate", "seeking", "seeked"])
+      v.addEventListener(type, sync);
   return {
     pause: () => v.pause(),
     seekBy: (d) => {
@@ -17254,9 +18424,11 @@ function mountVideo(host, m, onEvent) {
       kind: "video",
       time: round2(v.currentTime),
       ...Number.isFinite(v.duration) ? { duration: round2(v.duration) } : {},
-      playing: !v.paused
+      playing: !v.paused,
+      ...pills?.current ? { chapter: pills.current.label } : {}
     }),
     dispose: () => {
+      pills?.dispose();
       v.pause();
       v.removeAttribute("src");
       v.load();
@@ -17480,6 +18652,12 @@ function mediaSlot(container, options) {
       case "callout":
       case "text":
         return done(mountProse(host, m));
+      case "history":
+        return done(mountHistory(host, m, options.steps));
+      case "stack":
+        return done(mountStack(host, m, options.steps));
+      case "table":
+        return done(mountTable(host, m, options.steps));
       case "mount": {
         const cleanup = m.mount(host);
         return done({ dispose: () => cleanup ? cleanup() : host.textContent = "" });
@@ -17534,14 +18712,14 @@ function mediaSlot(container, options) {
 var CHECK3 = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
 
 // src/ui/walkthrough.ts
-var el = (doc, tag, cls) => {
+var el2 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
-var prose = (doc, tag, cls, text) => {
-  const n = el(doc, tag, cls);
+var prose2 = (doc, tag, cls, text) => {
+  const n = el2(doc, tag, cls);
   n.innerHTML = inlineMarkdown(text);
   return n;
 };
@@ -17549,7 +18727,7 @@ var lookOf2 = (o) => ({
   ...o.preset ? { preset: o.preset } : {},
   ...o.theme ? { theme: o.theme } : {}
 });
-var grid = (v) => Math.round(v * 64) / 64;
+var grid3 = (v) => Math.round(v * 64) / 64;
 var ICON = {
   full: svg('<path d="M3 6.5V3h3.5M13 6.5V3H9.5M3 9.5V13h3.5M13 9.5V13H9.5"/>'),
   exit: svg('<path d="M6.5 3v3.5H3M9.5 3v3.5H13M6.5 13V9.5H3M9.5 13V9.5H13"/>'),
@@ -17575,7 +18753,7 @@ function tasteTest(container, options) {
     suggested: o.suggested === true
   });
   let picked = options.picked ?? null;
-  const root = el(doc, "div", "knobs-wt-options");
+  const root = el2(doc, "div", "knobs-wt-options");
   root.setAttribute("role", "radiogroup");
   root.setAttribute("aria-label", "Options");
   root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
@@ -17583,28 +18761,28 @@ function tasteTest(container, options) {
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
-    const tile = el(doc, "div", "knobs-wt-option");
-    const pick = el(doc, "button", "knobs-wt-pick");
+    const tile = el2(doc, "div", "knobs-wt-option");
+    const pick = el2(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
     if (i < 9)
       pick.setAttribute("aria-keyshortcuts", String(i + 1));
-    const letter = el(doc, "span", "knobs-wt-letter");
+    const letter = el2(doc, "span", "knobs-wt-letter");
     letter.textContent = o.letter;
-    const name = el(doc, "span", "knobs-wt-olabel");
+    const name = el2(doc, "span", "knobs-wt-olabel");
     name.textContent = o.label;
     pick.append(letter, name);
     if (o.suggested) {
-      const s = el(doc, "span", "knobs-wt-suggested");
+      const s = el2(doc, "span", "knobs-wt-suggested");
       s.textContent = "Suggested";
       pick.append(s);
     }
     if (i < 9) {
-      const key = el(doc, "span", "knobs-wt-key");
+      const key = el2(doc, "span", "knobs-wt-key");
       key.textContent = String(i + 1);
       pick.append(key);
     }
-    const check = el(doc, "span", "knobs-wt-check");
+    const check = el2(doc, "span", "knobs-wt-check");
     check.innerHTML = CHECK3;
     pick.append(check);
     pick.addEventListener("click", () => {
@@ -17617,10 +18795,11 @@ function tasteTest(container, options) {
       slots.push(mediaSlot(tile, {
         ...look,
         media: o.media,
-        ...options.lazy === false ? { lazy: false } : {}
+        ...options.lazy === false ? { lazy: false } : {},
+        ...options.steps ? { steps: options.steps } : {}
       }));
     if (o.caption)
-      tile.append(prose(doc, "p", "knobs-wt-ocap", o.caption));
+      tile.append(prose2(doc, "p", "knobs-wt-ocap", o.caption));
     root.append(tile);
     return { tile, pick };
   });
@@ -17668,7 +18847,7 @@ function walkthrough(container, options) {
   injectWalkthroughStyles(doc);
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
-  const root = el(doc, "div", "knobs-walkthrough");
+  const root = el2(doc, "div", "knobs-walkthrough");
   applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
@@ -17728,8 +18907,8 @@ function walkthrough(container, options) {
     if (mark) {
       pillY.step(dt);
       pillH.step(dt);
-      mark.style.transform = `translateY(${grid(pillY.x)}px)`;
-      mark.style.height = `${grid(pillY.x + pillH.x) - grid(pillY.x)}px`;
+      mark.style.transform = `translateY(${grid3(pillY.x)}px)`;
+      mark.style.height = `${grid3(pillY.x + pillH.x) - grid3(pillY.x)}px`;
       more ||= !pillY.resting || !pillH.resting;
     }
     if (scroll.to && scroll.el) {
@@ -17864,6 +19043,10 @@ function walkthrough(container, options) {
     scrollToCard(v);
     v.card.focus({ preventScroll: true });
   };
+  const stepLinks = {
+    find: (ref) => findStep(page.steps, ref) ?? null,
+    go: (key) => go(key)
+  };
   const slotsOf = (v) => v ? [...v.slots, ...v.taste?.slots ?? []] : [];
   const mediaContext = (v) => {
     const slots = slotsOf(v);
@@ -17878,17 +19061,17 @@ function walkthrough(container, options) {
         return true;
     return false;
   };
-  const scrim = el(doc, "div", "knobs-wt-scrim");
+  const scrim = el2(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
   const fullRect = () => ({ x: 12, y: 12, w: win.innerWidth - 24, h: win.innerHeight - 24 });
   const placeFull = (f) => {
     const a = f.hold.getBoundingClientRect();
     const b = fullRect();
     const k = reduced() ? Math.round(f.p.target) : f.p.x;
-    const left = grid(a.left + (b.x - a.left) * k);
-    const top = grid(a.top + (b.y - a.top) * k);
-    const right = grid(a.right + (b.x + b.w - a.right) * k);
-    const bottom = grid(a.bottom + (b.y + b.h - a.bottom) * k);
+    const left = grid3(a.left + (b.x - a.left) * k);
+    const top = grid3(a.top + (b.y - a.top) * k);
+    const right = grid3(a.right + (b.x + b.w - a.right) * k);
+    const bottom = grid3(a.bottom + (b.y + b.h - a.bottom) * k);
     const s = f.v.card.style;
     s.left = `${left}px`;
     s.top = `${top}px`;
@@ -17923,7 +19106,7 @@ function walkthrough(container, options) {
       }
       if (!full) {
         const r = v.card.getBoundingClientRect();
-        const hold = el(doc, "div", "knobs-wt-hold-card");
+        const hold = el2(doc, "div", "knobs-wt-hold-card");
         hold.style.height = `${r.height}px`;
         v.card.before(hold);
         v.card.dataset.full = "";
@@ -18071,7 +19254,7 @@ function walkthrough(container, options) {
       toast("Couldn't reach the microphone", { tone: "warn", look, doc });
     }
   };
-  const backPill = el(doc, "button", "knobs-wt-back");
+  const backPill = el2(doc, "button", "knobs-wt-back");
   backPill.type = "button";
   let backTo = null;
   let backTimer = 0;
@@ -18096,16 +19279,16 @@ function walkthrough(container, options) {
     backTimer = win.setTimeout(hideBack, BACK_MS);
   };
   const bar = (() => {
-    const dock = el(doc, "div", "knobs-wt-dock");
-    const box = el(doc, "div", "knobs-wt-notebar");
-    const on = el(doc, "div", "knobs-wt-on");
-    const row = el(doc, "div", "knobs-wt-row");
-    const input = el(doc, "textarea", "knobs-wt-input");
+    const dock = el2(doc, "div", "knobs-wt-dock");
+    const box = el2(doc, "div", "knobs-wt-notebar");
+    const on = el2(doc, "div", "knobs-wt-on");
+    const row = el2(doc, "div", "knobs-wt-row");
+    const input = el2(doc, "textarea", "knobs-wt-input");
     input.rows = 1;
     input.setAttribute("aria-label", "Note");
-    const attach = el(doc, "div", "knobs-wt-attach");
+    const attach = el2(doc, "div", "knobs-wt-attach");
     const btn = (icon, label, run) => {
-      const b = el(doc, "button", "knobs-wt-tool");
+      const b = el2(doc, "button", "knobs-wt-tool");
       b.type = "button";
       b.innerHTML = icon;
       b.setAttribute("aria-label", label);
@@ -18116,7 +19299,7 @@ function walkthrough(container, options) {
     const fullBtn = btn(ICON.full, "Full window · f", () => setFull(!full));
     const penBtn = btn(ICON.pen, "Draw on the media", () => setInk(!ink.on));
     const micBtn = btn(ICON.mic, "Record a voice note", () => void toggleVoice());
-    const micTime = el(doc, "span", "knobs-wt-rec");
+    const micTime = el2(doc, "span", "knobs-wt-rec");
     micBtn.append(micTime);
     const sendBtn = btn(ICON.send, "Send · Enter", () => send());
     sendBtn.dataset.send = "";
@@ -18142,9 +19325,9 @@ function walkthrough(container, options) {
       }
     });
     const chip = (text, clear) => {
-      const c = el(doc, "span", "knobs-wt-chip-a");
+      const c = el2(doc, "span", "knobs-wt-chip-a");
       c.append(text);
-      const x = el(doc, "button", "knobs-wt-x");
+      const x = el2(doc, "button", "knobs-wt-x");
       x.type = "button";
       x.innerHTML = ICON.close;
       x.setAttribute("aria-label", `Remove ${text}`);
@@ -18257,9 +19440,9 @@ function walkthrough(container, options) {
     }
   };
   const renderNote = (v, n, entering = false) => {
-    const row = el(doc, "div", "knobs-wt-n");
+    const row = el2(doc, "div", "knobs-wt-n");
     row.dataset.id = n.id;
-    const meta = el(doc, "span", "knobs-wt-n-meta");
+    const meta = el2(doc, "span", "knobs-wt-n-meta");
     const m = n.context.media;
     meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
     if (m?.time !== undefined) {
@@ -18275,11 +19458,11 @@ function walkthrough(container, options) {
       });
     }
     row.append(meta);
-    const body = el(doc, "div", "knobs-wt-n-body");
+    const body = el2(doc, "div", "knobs-wt-n-body");
     if (n.text)
-      body.append(prose(doc, "p", "knobs-wt-n-text", n.text));
+      body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
     if (n.voice) {
-      const a = el(doc, "audio", "knobs-wt-n-voice");
+      const a = el2(doc, "audio", "knobs-wt-n-voice");
       a.controls = true;
       a.preload = "none";
       a.src = n.voice.url;
@@ -18299,7 +19482,7 @@ function walkthrough(container, options) {
       body.append(thumb);
     }
     row.append(body);
-    const x = el(doc, "button", "knobs-wt-x");
+    const x = el2(doc, "button", "knobs-wt-x");
     x.type = "button";
     x.innerHTML = ICON.close;
     x.setAttribute("aria-label", "Delete this note");
@@ -18353,22 +19536,22 @@ function walkthrough(container, options) {
     pillPlaced = false;
     root.textContent = "";
     root.removeAttribute("data-settled");
-    const layout = el(doc, "div", "knobs-wt-layout");
-    const main = el(doc, "div", "knobs-wt-main");
-    const head = el(doc, "header", "knobs-wt-head");
-    const h1 = el(doc, "h1", "knobs-wt-title");
+    const layout = el2(doc, "div", "knobs-wt-layout");
+    const main = el2(doc, "div", "knobs-wt-main");
+    const head = el2(doc, "header", "knobs-wt-head");
+    const h1 = el2(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
-      head.append(prose(doc, "p", "knobs-wt-summary", page.summary));
+      head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
     if (page.meta.length) {
-      const meta = el(doc, "div", "knobs-wt-meta");
+      const meta = el2(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
-        const s = el(doc, "span");
+        const s = el2(doc, "span");
         s.append(m.label);
-        const b = el(doc, "b");
+        const b = el2(doc, "b");
         if (m.href) {
-          const a = el(doc, "a");
+          const a = el2(doc, "a");
           a.href = m.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -18383,27 +19566,27 @@ function walkthrough(container, options) {
     }
     main.append(head);
     if (page.feed.length) {
-      const feed = el(doc, "section", "knobs-wt-feed");
+      const feed = el2(doc, "section", "knobs-wt-feed");
       feed.setAttribute("aria-label", "Latest");
-      const list = el(doc, "ol", "knobs-wt-feed-list knobs-scroll-fade");
+      const list = el2(doc, "ol", "knobs-wt-feed-list knobs-scroll-fade");
       const now = Date.now();
       for (const f of page.feed) {
-        const li = el(doc, "li", "knobs-wt-fi");
+        const li = el2(doc, "li", "knobs-wt-fi");
         li.dataset.kind = f.kind;
-        const when = el(doc, "span", "knobs-wt-fi-when");
+        const when = el2(doc, "span", "knobs-wt-fi-when");
         when.textContent = f.at === null ? "" : ago(f.at, now);
         if (f.at !== null)
           when.title = new Date(f.at).toLocaleString();
-        const kind = el(doc, "span", "knobs-wt-fi-kind");
+        const kind = el2(doc, "span", "knobs-wt-fi-kind");
         kind.textContent = f.kind === "qa" ? "Answer" : "Update";
-        const body = el(doc, "div", "knobs-wt-fi-body");
+        const body = el2(doc, "div", "knobs-wt-fi-body");
         if (f.q)
-          body.append(prose(doc, "p", "knobs-wt-fi-q", f.q));
-        body.append(prose(doc, "p", "knobs-wt-fi-text", f.text));
+          body.append(prose2(doc, "p", "knobs-wt-fi-q", f.q));
+        body.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
         li.append(when, kind, body);
         if (f.step) {
           const target = f.step;
-          const link = el(doc, "button", "knobs-wt-fi-step");
+          const link = el2(doc, "button", "knobs-wt-fi-step");
           link.type = "button";
           link.textContent = page.steps.find((s) => s.key === target)?.number ?? "";
           link.title = "Go to the step";
@@ -18418,33 +19601,33 @@ function walkthrough(container, options) {
     let rail = null;
     count = fill = tocEl = mark = null;
     if (options.rail !== false) {
-      rail = el(doc, "aside", "knobs-wt-rail");
+      rail = el2(doc, "aside", "knobs-wt-rail");
       rail.setAttribute("aria-label", "Progress");
-      const progress = el(doc, "div", "knobs-wt-progress");
-      count = el(doc, "div", "knobs-wt-count");
-      const meter = el(doc, "div", "knobs-wt-bar");
-      fill = el(doc, "div", "knobs-wt-fill");
+      const progress = el2(doc, "div", "knobs-wt-progress");
+      count = el2(doc, "div", "knobs-wt-count");
+      const meter = el2(doc, "div", "knobs-wt-bar");
+      fill = el2(doc, "div", "knobs-wt-fill");
       meter.append(fill);
       progress.append(count, meter);
-      tocEl = el(doc, "nav", "knobs-wt-toc");
+      tocEl = el2(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
-      mark = el(doc, "div", "knobs-wt-toc-mark");
+      mark = el2(doc, "div", "knobs-wt-toc-mark");
       tocEl.append(mark);
       rail.append(progress, tocEl, actions(true));
       if (options.keys !== false) {
-        const keys = el(doc, "div", "knobs-wt-keys");
+        const keys = el2(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
       }
     }
     for (const section of page.sections) {
-      const sec = el(doc, "section", "knobs-wt-section");
+      const sec = el2(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
-      const sh = el(doc, "header", "knobs-wt-shead");
+      const sh = el2(doc, "header", "knobs-wt-shead");
       if (section.link || section.status) {
-        const kicker = el(doc, "div", "knobs-wt-kicker");
+        const kicker = el2(doc, "div", "knobs-wt-kicker");
         if (section.link) {
-          const a = el(doc, "a");
+          const a = el2(doc, "a");
           a.href = section.link.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -18453,21 +19636,21 @@ function walkthrough(container, options) {
         }
         if (section.status) {
           const s = statusLook(section.status);
-          const chip = el(doc, "span", "knobs-wt-chip");
+          const chip = el2(doc, "span", "knobs-wt-chip");
           chip.dataset.tone = s.tone;
           chip.textContent = s.label;
           kicker.append(chip);
         }
         sh.append(kicker);
       }
-      const h2 = el(doc, "h2", "knobs-wt-stitle");
+      const h2 = el2(doc, "h2", "knobs-wt-stitle");
       h2.textContent = section.title;
       sh.append(h2);
       if (section.summary)
-        sh.append(prose(doc, "p", "knobs-wt-ssum", section.summary));
+        sh.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
       sec.append(sh);
       if (tocEl) {
-        const t = el(doc, "div", "knobs-wt-toc-section");
+        const t = el2(doc, "div", "knobs-wt-toc-section");
         t.textContent = section.link ? `${section.link.label} ${section.title}` : section.title;
         t.title = section.title;
         tocEl.append(t);
@@ -18500,9 +19683,9 @@ function walkthrough(container, options) {
     }));
   };
   const actions = (rail) => {
-    const row = el(doc, "div", "knobs-wt-actions");
+    const row = el2(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
-      const b = el(doc, "button", "knobs-wt-btn");
+      const b = el2(doc, "button", "knobs-wt-btn");
       b.type = "button";
       b.textContent = text;
       if (primary)
@@ -18540,43 +19723,44 @@ function walkthrough(container, options) {
     }
   };
   const stepView = (step) => {
-    const card = el(doc, "article", "knobs-wt-step knobs-surface");
+    const card = el2(doc, "article", "knobs-wt-step knobs-surface");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
     card.setAttribute("aria-label", `${step.number} ${step.title}`);
-    const head = el(doc, "header", "knobs-wt-step-head");
-    const num = el(doc, "span", "knobs-wt-num");
+    const head = el2(doc, "header", "knobs-wt-step-head");
+    const num = el2(doc, "span", "knobs-wt-num");
     num.textContent = step.number;
-    const h3 = el(doc, "h3", "knobs-wt-stepTitle");
+    const h3 = el2(doc, "h3", "knobs-wt-stepTitle");
     h3.textContent = step.title;
     head.append(num, h3);
     card.append(head);
     if (step.caption)
-      card.append(prose(doc, "p", "knobs-wt-caption", step.caption));
+      card.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
     const slots = [];
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
-      media = el(doc, "div", "knobs-wt-media");
+      media = el2(doc, "div", "knobs-wt-media");
       media.style.setProperty("--kw-n", String(Math.min(step.media.length, 3)));
       for (const m of step.media)
-        slots.push(mediaSlot(media, { ...look, media: m, onEvent }));
+        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
       card.append(media);
     }
     let taste = null;
     if (step.question)
-      card.append(prose(doc, "p", "knobs-wt-question", step.question));
+      card.append(prose2(doc, "p", "knobs-wt-question", step.question));
     if (step.ask === "pick") {
       taste = tasteTest(card, {
         ...look,
         options: step.options,
         picked: state.steps[step.key]?.pick ?? null,
-        onPick: (id) => pick(step.key, id)
+        onPick: (id) => pick(step.key, id),
+        steps: stepLinks
       });
       media ??= taste.element;
     }
-    const notes = el(doc, "div", "knobs-wt-notes");
+    const notes = el2(doc, "div", "knobs-wt-notes");
     card.append(notes);
     card.addEventListener("focusin", () => {
       if (scroll.to)
@@ -18587,10 +19771,10 @@ function walkthrough(container, options) {
     let toc = null;
     let glyph = null;
     if (tocEl) {
-      toc = el(doc, "button", "knobs-wt-toc-step");
+      toc = el2(doc, "button", "knobs-wt-toc-step");
       toc.type = "button";
-      glyph = el(doc, "span", "knobs-wt-toc-glyph");
-      const label = el(doc, "span", "knobs-wt-toc-label");
+      glyph = el2(doc, "span", "knobs-wt-toc-glyph");
+      const label = el2(doc, "span", "knobs-wt-toc-label");
       label.textContent = step.title;
       toc.title = `${step.number} ${step.title}`;
       toc.append(glyph, label);