@kitlangton/knobs 0.4.0-next.4 → 0.4.0-next.6

package/dist/ui-solid.js

@@ -577,11 +577,11 @@ var compareCss = `
 .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)}
+.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* 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:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .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}
@@ -595,6 +595,8 @@ var compareCss = `
 .knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}
 .knobs-compare[data-frame="flat"] .knobs-cmp-stage{border-radius:0}
 .knobs-compare[data-mode="wipe"] .knobs-cmp-stage{cursor:ew-resize}
+/* Videos: a click on the stage plays and pauses. */
+.knobs-compare[data-video]:not([data-mode="wipe"],[data-zoomed]) .knobs-cmp-stage{cursor:pointer}
 /* 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}
@@ -604,6 +606,9 @@ var compareCss = `
 .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}
 .knobs-compare[data-renderer="gpu"] .knobs-cmp-media{opacity:0}
+/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */
+.knobs-cmp-canvas,.knobs-compare[data-renderer="dom"] .knobs-cmp-media{transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}
 /* 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)))}
@@ -612,11 +617,17 @@ var compareCss = `
   white-space:nowrap;pointer-events:none;will-change:transform}
 .knobs-cmp-label[data-side="before"]{color:var(--_k-fg-3)}
 .knobs-cmp-label[data-side="after"]{color:var(--_k-fg)}
-.knobs-cmp-mark svg{display:block;width:12px;height:12px}
-/* 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)}
+/* Fusing, the mark folds away and the label is its name. */
+.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}
+.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}
+/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */
+.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
+/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height
+   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the
+   fuse; 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,opacity}
+.knobs-cmp-handle[data-on]{pointer-events:auto}
 .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);
@@ -636,7 +647,7 @@ var compareCss = `
 .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;
   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)}
+: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);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .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}
@@ -648,6 +659,31 @@ var compareCss = `
 @media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}
 `;
 
+// src/ui/player-css.ts
+var playerCss = `
+:where(.knobs-player,.knobs-player *){box-sizing:border-box}
+.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline: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-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-player,.knobs-ui.knobs-player[data-nested]{--_kp-stage:var(--k-compare-stage,transparent)}
+.knobs-player-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage);cursor:pointer}
+.knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
+.knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
+  opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+.knobs-player-glyph{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:var(--_k-fg);pointer-events:none;
+  opacity:0;filter:blur(4px);scale:.96;
+  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);
+  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),filter calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-player-glyph svg{width:16px;height:16px}
+.knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}
+.knobs-player-line{flex:none;min-height:0}
+/* Hover in is immediate (0 ms), out eases. The timeline's own stylesheet is look.ts's; its hover
+   states are set here, after it, so the player's line and every timeline share them. */
+.knobs-ui .knobs-tl-play:hover,.knobs-tl-edge:hover::after,.knobs-tl-rlabel:hover,.knobs-tl-track:hover .knobs-tl-hover,
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs{transition-duration:calc(var(--_k-hover-in) * 1ms)}
+`;
+
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
@@ -1512,7 +1548,7 @@ var init_schema = __esm(() => {
       type: "length",
       group: "Type",
       source: value("20px"),
-      doc: "Section headings (a PR's title, under its kicker), weight 500."
+      doc: "A page's title, weight 500."
     },
     {
       name: "leading-heading",
@@ -1528,7 +1564,7 @@ var init_schema = __esm(() => {
       type: "length",
       group: "Type",
       source: value("16px"),
-      doc: "A page's title, weight 500."
+      doc: "Section titles (under their kicker), weight 500."
     },
     {
       name: "leading-title",
@@ -1560,7 +1596,7 @@ var init_schema = __esm(() => {
       type: "length",
       group: "Type",
       source: value("12px"),
-      doc: "Labels over media, weight 500; mono inside body text."
+      doc: "Mono inside body text: code and paths."
     },
     {
       name: "leading-label",
@@ -3003,8 +3039,6 @@ var css2 = `
 .knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
 .knobs-tl-track:hover .knobs-tl-hover{opacity:1}
 .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}}
 .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
@@ -3020,7 +3054,26 @@ var css2 = `
 .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) => {
+/* The line (variant: "line"): a player's progress under its media. One 2px line, fg-3 with fg
+   filling it, a segment per chapter; it thickens under the pointer and while scrubbing. The
+   chapter and time under the pointer float over it; nothing else shows. */
+.knobs-ui.knobs-timeline[data-variant="line"]{height:auto;min-height:0;padding:0;gap:0}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:none}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{height:16px;overflow:visible;border-radius:var(--_k-radius);background:transparent;box-shadow:none;cursor:pointer}
+.knobs-timeline[data-variant="line"] :is(.knobs-tl-ruler,.knobs-tl-lane,.knobs-tl-hover,.knobs-tl-head,.knobs-tl-rlabel){display:none}
+.knobs-tl-segs{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;transition:scale calc(var(--_k-hover-out) * 1ms) var(--_ku-ease)}
+.knobs-tl-seg{position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:1px;background:var(--_k-fg-3);will-change:transform}
+.knobs-tl-seg-fill{position:absolute;inset:0;background:var(--_k-fg);transform-origin:0 0;will-change:transform}
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs,.knobs-timeline[data-variant="line"][data-scrubbing] .knobs-tl-segs{scale:1 2}
+.knobs-timeline[data-variant="line"] .knobs-tl-range{top:3px;bottom:3px;border-radius:3px}
+.knobs-timeline[data-variant="line"]:focus-visible .knobs-tl-track,.knobs-timeline[data-variant="line"][data-keyboard]:focus .knobs-tl-track{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 60%,transparent)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag{top:auto;bottom:calc(100% + 2px);display:flex;gap:6px;padding:0 6px;border-radius:calc(var(--_k-radius) * 999);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);
+  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 .5px var(--_k-border)}
+.knobs-tl-tag-label{color:var(--_k-fg-2)}
+.knobs-tl-tag-label:empty{display:none}
+@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 + playerCss + selectionPillCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -3143,19 +3196,19 @@ var init_diff_css = __esm(() => {
 @property --kd-fb{syntax:"<length>";inherits:false;initial-value:0px}
 :where(.knobs-ui){--kd-add:var(--_k-diff-add);--kd-del:var(--_k-diff-del);--kd-mod:var(--_k-diff-mod);--kd-move:var(--k-diff-move,var(--_k-info))}
 :where(.knobs-diff,.knobs-diff *,.knobs-diff-files,.knobs-diff-files *){box-sizing:border-box}
-.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--_kd-bg,var(--_k-bg)));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--_k-font-size) * 1.5);
+.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--_kd-bg,transparent));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--_k-font-size) * 1.5);
   --kd-i:var(--k-diff-inset,8px);--kd-x:var(--kd-i);--kd-inner:max(3px,calc(var(--_ku-pane-radius) - var(--kd-i)));--kd-ctl:var(--kd-inner);
   --kd-head:calc(var(--_k-control-h) + 2 * var(--kd-i));--kd-fade:var(--k-diff-fade,20px);--kd-stick:0px;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
   background:var(--kd-bg);border-radius:var(--_ku-pane-radius);font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
   letter-spacing:normal;word-spacing:normal;text-transform:none;-webkit-font-smoothing:antialiased}
 .knobs-ui.knobs-diff[data-height="auto"]{height:auto}
-.knobs-diff::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
+.knobs-ui.knobs-diff:not([data-on="pane"])::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 -1px 0 var(--_k-border-subtle);pointer-events:none}
 .knobs-diff [hidden],.knobs-diff-files [hidden]{display:none!important}
 .knobs-diff svg{display:block;flex:none}
-.knobs-ui.knobs-diff[data-on="surface"]{--kd-x:0px;--kd-head:var(--_k-control-h);--kd-ctl:var(--_k-radius)}
-/* The header's hairline shows only once the code has scrolled under it. */
+.knobs-ui.knobs-diff:not([data-on="pane"]){--kd-x:0px;--kd-head:calc(var(--_k-control-h) + var(--kd-i));--kd-ctl:var(--_k-radius)}
+/* A hairline under the header, firmer once the code has scrolled under it. */
 .knobs-diff-head{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:8px;height:var(--kd-head);padding:0 var(--kd-x);
-  box-shadow:inset 0 -1px transparent;transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
+  box-shadow:inset 0 -1px var(--_k-border-subtle);transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
 .knobs-diff[data-scrolled]>.knobs-diff-head{box-shadow:inset 0 -1px var(--_k-border)}
 .knobs-diff-path{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
 .knobs-diff-dir,.knobs-diff-from{color:var(--_k-fg-3)}
@@ -3182,17 +3235,26 @@ var init_diff_css = __esm(() => {
   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: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:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .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: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:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
+/* Narrow, the header gives up words before anything is cut off at its end: Viewed keeps its
+   check, then the counts' bar goes, then the counts; the path fades at its end throughout. */
+.knobs-diff-head,.knobs-diff-part-head{container-type:inline-size}
+@container (max-width:520px){
+  .knobs-diff-viewed-label{display:none}
+  .knobs-ui .knobs-diff-viewed{width:var(--_k-control-h);padding:0;justify-content:center}
+  .knobs-diff-counts .knobs-diff-bar{display:none}
+}
+@container (max-width:400px){.knobs-diff-counts{display:none}.knobs-diff-nav>span{min-width:2.6em}}
 .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: the selection pill on the one picked, its bright copy the picked one's text; a
@@ -3200,7 +3262,7 @@ var init_diff_css = __esm(() => {
 .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)}
+.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* 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}
@@ -3221,8 +3283,8 @@ var init_diff_css = __esm(() => {
 .knobs-diff-hbar{position:absolute;height:5px;pointer-events:none}
 .knobs-diff-hbar>i{position:absolute;left:0;top:0;height:5px;border-radius:3px;background:color-mix(in srgb,var(--_k-fg) 30%,transparent);opacity:0;pointer-events:none;
   transition:opacity .3s,background .15s}
-.knobs-diff-body:hover .knobs-diff-hbar>i,.knobs-diff-hbar:is([data-active],[data-dragging])>i{opacity:1;pointer-events:auto;transition-duration:.12s,.15s}
-.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--_k-fg) 48%,transparent)}
+.knobs-diff-body:hover .knobs-diff-hbar>i,.knobs-diff-hbar:is([data-active],[data-dragging])>i{opacity:1;pointer-events:auto;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--_k-fg) 48%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* stack: every file down one scroller, each header sticking until the next pushes it off. It's
    flush (square, no card around its file), opaque in the code's own colour, with a hairline
    under it only while it's stuck; a gap, not a line, parts one file from the next. */
@@ -3257,24 +3319,26 @@ var init_diff_css = __esm(() => {
   --diffs-bg-deletion-number-override:color-mix(in srgb,var(--kd-del) 55%,var(--kd-solid));
   --diffs-bg-addition-emphasis-override:color-mix(in srgb,var(--kd-add) 22%,transparent);
   --diffs-bg-deletion-emphasis-override:color-mix(in srgb,var(--kd-del) 22%,transparent);
-  --diffs-bg-separator-override:color-mix(in srgb,var(--_k-fg) 4.5%,var(--kd-solid));
-  --diffs-bg-context-override:color-mix(in srgb,var(--_k-fg) 3%,var(--kd-solid));
-  --diffs-bg-buffer-override:color-mix(in srgb,var(--_k-fg) 3.5%,var(--kd-solid));
+  /* Unchanged lines and the folds between hunks sit on the void; only a split's missing lines
+     are faintly filled. */
+  --diffs-bg-separator-override:var(--kd-solid);
+  --diffs-bg-context-override:var(--kd-solid);
+  --diffs-bg-buffer-override:color-mix(in srgb,var(--_k-fg) 2.5%,var(--kd-solid));
   --diffs-bg-selection-override:var(--_k-accent);
   --diffs-fg-number-override:var(--_k-fg-3);
 }
-/* diffReview: one card, the file list a drawer at its left (its width springs; the list inside
-   is pinned to its right edge, so it slides out from under the diff), parted from the diff by a
-   hairline. The diff in it draws no card of its own. */
-.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border-radius:var(--_ku-pane-radius);background:var(--_ku-pane-bg);
+/* diffReview, on the void as the diff is: the file list a drawer at its left (its width springs;
+   the list inside is pinned to its right edge, so it slides out from under the diff), parted
+   from the diff by a hairline; one hairline runs under both headers and one under it all. */
+.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased}
-.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
+.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;box-shadow:inset 0 -1px 0 var(--_k-border-subtle);pointer-events:none}
 :where(.knobs-diff-review,.knobs-diff-review *){box-sizing:border-box}
-.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--_k-border)}
+.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--_k-border-subtle)}
 .knobs-diff-drawer[data-shut]{visibility:hidden}
 .knobs-diff-drawer-in{position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column}
 .knobs-diff-drawer-head{flex:none;display:flex;align-items:center;gap:6px;height:calc(var(--_k-control-h) + 2 * var(--k-diff-inset,8px));padding:0 var(--k-diff-inset,8px) 0 calc(var(--_ku-row-x) + 8px);
-  user-select:none;-webkit-user-select:none}
+  box-shadow:inset 0 -1px var(--_k-border-subtle);user-select:none;-webkit-user-select:none}
 .knobs-diff-drawer-title{font-weight:var(--_k-weight-title)}
 .knobs-diff-drawer-count{color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-drawer-in>.knobs-diff-files{flex:1;min-height:0;height:auto}
@@ -3286,15 +3350,16 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-toggle[aria-pressed]:not(:hover,:focus-visible){background:transparent}
 /* diffReview's file list: a filter over a compact tree, a status letter, the counts and their
    bar on each file; one highlight glides to the file on show. Viewed files dim, with a tick. */
-.knobs-diff-files{--k-row:var(--k-diff-row,28px);display:flex;flex-direction:column;height:100%;min-height:0;padding-top:2px}
+.knobs-diff-files{--k-row:var(--k-diff-row,28px);display:flex;flex-direction:column;height:100%;min-height:0;padding-top:4px}
 .knobs-diff-filter{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:26px;margin:0 var(--_ku-row-x) 4px;padding:0 4px 0 8px;
-  border-radius:max(6px,var(--_ku-row-radius));background:var(--_ku-wash);color:var(--_k-fg-3);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s}
-.knobs-diff-filter:focus-within{background:var(--_ku-wash-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent)}
+  border-radius:max(6px,var(--_ku-row-radius));color:var(--_k-fg-3);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s}
+/* The filter is a line of text, no box; focused, a hairline ring. */
+.knobs-diff-filter:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent)}
 .knobs-diff-filter svg{width:12px;height:12px;flex:none}
 .knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--_k-weight) var(--_k-font-size)/1 var(--_k-font);color:var(--_k-fg);caret-color:var(--_k-accent);background:transparent}
 .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-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .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}
@@ -6214,7 +6279,10 @@ function codeDiff(container, options) {
   const viewedToggle = () => {
     const b = make("button", "knobs-diff-viewed");
     b.type = "button";
-    b.append(make("span", ""), "Viewed");
+    const label = make("span", "knobs-diff-viewed-label");
+    label.textContent = "Viewed";
+    b.append(make("span", ""), label);
+    b.setAttribute("aria-label", "Viewed");
     return b;
   };
   const paintViewed = (b, on) => {
@@ -8501,6 +8569,17 @@ function currentMarker(markers, t, fps) {
       best = m;
   return best;
 }
+function minutes(t) {
+  const s = Math.max(0, Math.floor(t + 0.000001));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function chapterBounds(times, duration) {
+  const inside = times.filter((t) => t > 0.000001 && t < duration - 0.000001);
+  return [0, ...[...new Set(inside)].sort((a, b) => a - b), duration];
+}
 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];
@@ -8518,7 +8597,8 @@ function timeline(container, options) {
   let speed = options.speed ?? 1;
   let repeat = options.repeat ?? true;
   const arrows = options.arrows ?? "frames";
-  const lane = options.variant === "lane";
+  const line = options.variant === "line";
+  const lane = line || options.variant === "lane";
   let time = Math.min(duration, Math.max(0, options.time ?? 0));
   let playing = false;
   let markers = [...options.markers ?? []];
@@ -8553,7 +8633,7 @@ function timeline(container, options) {
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
   applyLook2(root, options);
   if (lane)
-    root.dataset.variant = "lane";
+    root.dataset.variant = line ? "line" : "lane";
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
@@ -8566,6 +8646,10 @@ function timeline(container, options) {
   const hover = el("div", "knobs-tl-hover");
   const tag = el("span", "knobs-tl-tag");
   tag.setAttribute("aria-hidden", "true");
+  const tagLabel = el("span", "knobs-tl-tag-label");
+  const tagTime = el("span", "knobs-tl-tag-time");
+  tag.append(tagLabel, tagTime);
+  const segs = el("div", "knobs-tl-segs");
   const head = el("div", "knobs-tl-head");
   head.id = `${id}-head`;
   head.setAttribute("role", "slider");
@@ -8573,11 +8657,13 @@ function timeline(container, options) {
   head.setAttribute("aria-valuemin", "0");
   head.setAttribute("aria-valuemax", String(duration));
   track.append(canvas, markerLane, hover, head, tag);
+  if (line)
+    track.insertBefore(segs, markerLane);
   root.append(transport, track);
   container.append(root);
   let width = 1;
   let height = 1;
-  const fitView = () => clampView({ start: 0, span: duration }, duration, { pad: 0.02 });
+  const fitView = () => clampView({ start: 0, span: duration }, duration, { pad: line ? 0 : 0.02 });
   let target = fitView();
   const vStart = new Spring(target.start, INSTANT2.omega, 1, 0.00001);
   const vSpan = new Spring(target.span, INSTANT2.omega, 1, 0.00001);
@@ -8586,13 +8672,13 @@ function timeline(container, options) {
   const xOf = (t) => (t - vStart.x) * pxPerSec();
   const tOf = (x) => vStart.x + x / pxPerSec();
   const minSpan = () => Math.max(4 / fps, 0.05);
-  const retarget = (next, motion = INSTANT2) => {
-    target = clampView(next, duration, { pad: 0.04, minSpan: minSpan() });
+  const retarget = (next, motion = INSTANT2, hand = false) => {
+    target = clampView(next, duration, { pad: line ? 0 : 0.04, minSpan: minSpan() });
     for (const s of [vStart, vSpan]) {
       s.omega = motion.omega;
       s.zeta = motion.zeta;
     }
-    if (reducedMotion(win) && motion === CALM) {
+    if (hand || reducedMotion(win) && motion === CALM) {
       vStart.snap(target.start);
       vSpan.snap(target.span);
     } else {
@@ -8618,6 +8704,8 @@ function timeline(container, options) {
   };
   let drawn = "";
   const drawRuler = () => {
+    if (line)
+      return;
     const v = view();
     const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${height}:${units}:${fps}`;
     if (key === drawn)
@@ -8705,6 +8793,8 @@ function timeline(container, options) {
       n.title = `${m.label ? `${m.label} · ` : ""}${clock(m.time)}`;
     }
     placeMarkers();
+    if (line)
+      syncSegments();
   };
   const placeMarkers = () => {
     for (const m of markers) {
@@ -8713,6 +8803,36 @@ function timeline(container, options) {
         n.style.transform = `translateX(${xOf(m.time).toFixed(2)}px)`;
     }
   };
+  let bounds = [];
+  const segEls = [];
+  const syncSegments = () => {
+    bounds = chapterBounds(markers.map((m) => m.time), duration);
+    while (segEls.length > bounds.length - 1)
+      segEls.pop().el.remove();
+    while (segEls.length < bounds.length - 1) {
+      const n = el("i", "knobs-tl-seg");
+      const fill = el("b", "knobs-tl-seg-fill");
+      n.append(fill);
+      segs.append(n);
+      segEls.push({ el: n, fill });
+    }
+    placeSegments();
+  };
+  const placeSegments = () => {
+    if (!line)
+      return;
+    const last = segEls.length - 1;
+    segEls.forEach((s, i) => {
+      const a = bounds[i];
+      const b = bounds[i + 1];
+      const x0 = xOf(a) + (i > 0 ? SEG_GAP / 2 : 0);
+      const x1 = xOf(b) - (i < last ? SEG_GAP / 2 : 0);
+      s.el.style.transform = `translateX(${x0.toFixed(2)}px)`;
+      s.el.style.width = `${Math.max(0, x1 - x0).toFixed(2)}px`;
+      const k = Math.min(1, Math.max(0, (shownHead - a) / Math.max(0.000000001, b - a)));
+      s.fill.style.transform = `scaleX(${k.toFixed(4)})`;
+    });
+  };
   const syncRanges = () => {
     const keep = new Set(ranges.map((r) => r.id));
     for (const [k, n] of rangeEls)
@@ -8729,7 +8849,7 @@ function timeline(container, options) {
         b.dataset.edge = "end";
         const label = el("span", "knobs-tl-rlabel");
         n.append(label, a, b);
-        track.insertBefore(n, markerLane);
+        track.insertBefore(n, line ? segs : markerLane);
         rangeEls.set(r.id, n);
         if (built)
           enter(n);
@@ -8781,6 +8901,7 @@ function timeline(container, options) {
   let currentId = null;
   const renderHead = () => {
     head.style.transform = `translateX(${xOf(shownHead).toFixed(2)}px)`;
+    placeSegments();
     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;
@@ -9044,14 +9165,25 @@ function timeline(container, options) {
     setTime(s.t, "scrub", s.shown, press);
     root.toggleAttribute("data-stuck", s.stop !== null);
   };
+  let pointerX = null;
+  const zoomAtHand = (factor) => zoom(factor, pointerX === null ? time : target.start + pointerX / width * target.span);
   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 text = line ? minutes(at) : `${at.toFixed(2)} s`;
+    if (tagTime.textContent !== text)
+      tagTime.textContent = text;
+    const label = line ? currentMarker(markers, at, fps)?.label ?? "" : "";
+    if (tagLabel.textContent !== label)
+      tagLabel.textContent = label;
     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"})`;
+    if (line) {
+      const w = tag.offsetWidth;
+      const left = Math.min(Math.max(0, width - w), Math.max(0, cx - w / 2));
+      tag.style.transform = `translateX(${left.toFixed(1)}px)`;
+    } else {
+      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;
@@ -9112,6 +9244,7 @@ function timeline(container, options) {
   });
   track.addEventListener("pointermove", (e) => {
     const x = localX(e);
+    pointerX = x;
     hover.style.transform = `translateX(${x.toFixed(1)}px)`;
     if (!drag || drag.kind === "scrub")
       showTag(x);
@@ -9185,6 +9318,7 @@ function timeline(container, options) {
   track.addEventListener("pointercancel", endDrag);
   track.addEventListener("lostpointercapture", endDrag);
   track.addEventListener("pointerleave", () => {
+    pointerX = null;
     if (drag)
       return;
     hover.style.transform = "translateX(-100px)";
@@ -9192,7 +9326,7 @@ function timeline(container, options) {
   });
   track.addEventListener("dblclick", (e) => {
     if (lane)
-      return;
+      return fit();
     const markerEl = e.target.closest(".knobs-tl-marker");
     if (markerEl)
       return rename(markerEl.dataset.id);
@@ -9203,18 +9337,40 @@ function timeline(container, options) {
       rename(m.id);
   });
   track.addEventListener("wheel", (e) => {
-    if (lane)
+    const zooming = e.ctrlKey || e.metaKey;
+    if (zooming && pinching)
+      return e.preventDefault();
+    const sideways = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+    if (lane && !zooming && !sideways)
       return;
     e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1;
-    if (e.ctrlKey || e.metaKey) {
+    if (zooming) {
       const at = target.start + localX(e) / width * target.span;
-      retarget(zoomView(target, Math.exp(-e.deltaY * scale * (e.ctrlKey ? 0.01 : 0.002)), at));
+      const k = Math.exp(-e.deltaY * scale * (e.ctrlKey ? 0.01 : 0.002));
+      retarget(zoomView(target, k, at), INSTANT2, lane);
     } else {
-      const d = (Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY) * scale;
-      retarget({ ...target, start: target.start + d / width * target.span });
+      const d = (sideways ? e.deltaX : e.deltaY) * scale;
+      retarget({ ...target, start: target.start + d / width * target.span }, INSTANT2, lane);
     }
   }, { passive: false });
+  let pinchScale = 1;
+  let pinching = false;
+  const onGesture = (e) => {
+    const g = e;
+    e.preventDefault();
+    if (e.type === "gesturestart")
+      pinchScale = 1;
+    pinching = e.type !== "gestureend";
+    if (e.type !== "gesturechange")
+      return;
+    const s = g.scale ?? 1;
+    const x = g.clientX !== undefined ? localX({ clientX: g.clientX }) : width / 2;
+    retarget(zoomView(target, s / pinchScale, target.start + x / width * target.span), INSTANT2, true);
+    pinchScale = s;
+  };
+  for (const type of ["gesturestart", "gesturechange", "gestureend"])
+    track.addEventListener(type, onGesture);
   root.addEventListener("keydown", (e) => {
     if (e.target !== root || e.metaKey || e.ctrlKey) {
       if ((e.metaKey || e.ctrlKey) && (e.key === "=" || e.key === "-" || e.key === "0") && e.target === root) {
@@ -9222,7 +9378,7 @@ function timeline(container, options) {
         if (e.key === "0")
           fit();
         else
-          zoom(e.key === "=" ? 1.5 : 1 / 1.5);
+          zoomAtHand(e.key === "=" ? 1.5 : 1 / 1.5);
       }
       return;
     }
@@ -9304,18 +9460,12 @@ function timeline(container, options) {
         return;
       case "=":
       case "+":
-        if (lane)
-          return;
         claim();
-        return zoom(1.5);
+        return zoomAtHand(1.5);
       case "-":
-        if (lane)
-          return;
         claim();
-        return zoom(1 / 1.5);
+        return zoomAtHand(1 / 1.5);
       case "0":
-        if (lane)
-          return;
         claim();
         return fit();
     }
@@ -9531,7 +9681,7 @@ function timeline(container, options) {
   };
   return api;
 }
-var RULER = 22, INSTANT2, CALM, GLIDE, uid2 = 0, PLAY2 = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>', PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
+var RULER = 22, SEG_GAP = 3, INSTANT2, CALM, GLIDE, uid2 = 0, PLAY2 = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>', PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
 var init_timeline = __esm(() => {
   init_rgba();
   init_motion();
@@ -9603,14 +9753,28 @@ function compareLayout(box, before, after) {
   const shape = after.w > 0 && after.h > 0 ? after : before;
   const pair = letterbox({ w: shape.w * 2, h: shape.h }, box);
   const half = pair.w / 2;
+  const fused = { x: pair.x + half / 2, y: pair.y, w: half, h: pair.h };
   return {
     side: {
       before: letterbox(before, { x: pair.x, y: pair.y, w: half, h: pair.h }),
       after: letterbox(after, { x: pair.x + half, y: pair.y, w: half, h: pair.h }),
       split: pair.x + half
     },
-    overlay: { before: letterbox(before, box), after: letterbox(after, box) }
-  };
+    overlay: { before: letterbox(before, fused), after: letterbox(after, fused) }
+  };
+}
+function fuseFrame(L, before, after, k, wipe) {
+  const t = Math.min(1, Math.max(0, k));
+  const o = L.overlay;
+  const left = Math.min(o.before.x, o.after.x);
+  const line = wipeX({ x: left, y: 0, w: Math.max(o.before.x + o.before.w, o.after.x + o.after.w) - left, h: 0 }, wipe);
+  const cut = L.side.split + (line - L.side.split) * t;
+  const contact = Math.max(0, Math.min(cut - after.x, before.x + before.w - cut));
+  const feather = Math.min(contact, 1 + FUSE.feather * Math.sin(Math.PI * t));
+  const overlap = before.x + before.w - after.x;
+  const seam = t > 0.001 && overlap >= 0 ? Math.min(1, Math.max(0, overlap / FUSE.seamFade)) * Math.min(1, t * 4) : 0;
+  const blur = t > 0.005 && t < 0.995 ? FUSE.blur * Math.sin(Math.PI * t) : 0;
+  return { cut, feather, seam, blur };
 }
 function clampZoom(r) {
   const w = Math.min(1, Math.max(1 / ZOOM_MAX, r.w));
@@ -9697,7 +9861,18 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-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({
+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, FUSE, fuseCorners = (r, k) => {
+  const inner = r * Math.min(1, Math.max(0, k));
+  return { before: { left: r, right: inner }, after: { left: inner, right: r } };
+}, labelFold = (fold, mark, blur = 3) => {
+  const f = Math.min(1, Math.max(0, fold));
+  const open = 1 - f;
+  return {
+    width: mark * open,
+    opacity: Math.min(1, Math.max(0, (open - 0.2) / 0.8)),
+    blur: blur * Math.min(1, Math.max(0, (f - 0.25) / 0.75))
+  };
+}, 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
@@ -9720,6 +9895,7 @@ var init_compare_model = __esm(() => {
   MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
+  FUSE = { feather: 32, blur: 8, seamFade: 48 };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
 });
 
@@ -10452,8 +10628,8 @@ async function createCompareGpu(canvas, onLost) {
       onLost();
   };
   lostListeners.add(lost);
-  const uniforms = device.createBuffer({ size: 176, usage: 64 | 8 });
-  const data = new Float32Array(44);
+  const uniforms = device.createBuffer({ size: 192, usage: 64 | 8 });
+  const data = new Float32Array(48);
   const make = (w, h) => device.createTexture({
     size: [Math.max(1, w), Math.max(1, h)],
     format: "rgba8unorm",
@@ -10526,6 +10702,7 @@ async function createCompareGpu(canvas, onLost) {
       data.set([f.preview[0] ? 1 : 0, f.preview[1] ? 1 : 0, 0, 0], 32);
       r(36, f.beforeClip);
       r(40, f.afterClip);
+      data.set(f.radii, 44);
       device.queue.writeBuffer(uniforms, 0, data);
       const encoder = device.createCommandEncoder();
       const pass = encoder.beginRenderPass({
@@ -10567,6 +10744,7 @@ struct U {
   loupe: vec4f,  // x, y, r, zoom (0: none)
   src: vec4f,    // Before, After from their previews
   ca: vec4f, cb: vec4f, // where each side may draw
+  radii: vec4f,  // the clips' corners: Before left, right; After left, right
 }
 @group(0) @binding(0) var<uniform> u: U;
 @group(0) @binding(1) var A: texture_2d<f32>;
@@ -10588,8 +10766,18 @@ fn cover(p: vec2f, r: vec4f) -> f32 {
   return clamp(d + 0.5, 0.0, 1.0);
 }
 
-// A side's colour where rect r maps it to p, and its coverage inside clip c there.
-fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, near: bool, ready: f32) -> vec4f {
+// Coverage of rect r at p with its left corners rounded rl and its right ones rr.
+fn coverRound(p: vec2f, r: vec4f, rl: f32, rr: f32) -> f32 {
+  let h = r.zw * 0.5;
+  let q0 = p - (r.xy + h);
+  let rad = min(select(rl, rr, q0.x > 0.0), min(h.x, h.y));
+  let q = abs(q0) - h + vec2f(rad);
+  let d = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - rad;
+  return clamp(0.5 - d, 0.0, 1.0);
+}
+
+// A side's colour where rect r maps it to p, and its coverage inside clip c (corners rc) there.
+fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, rc: vec2f, near: bool, ready: f32) -> vec4f {
   let uv = clamp((p - r.xy) / max(r.zw, vec2f(1e-3)), vec2f(0.0), vec2f(1.0));
   var c: vec3f;
   if (near) {
@@ -10598,27 +10786,22 @@ fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, near: bool, ready: f3
   } else {
     c = textureSampleLevel(t, smp, uv, 0.0).rgb;
   }
-  return vec4f(c, min(cover(p, r), cover(p, c0)) * ready);
+  return vec4f(c, min(cover(p, r), coverRound(p, c0, rc.x, rc.y)) * ready);
 }
 
 fn takeA(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
-  if (u.src.x > 0.5) { return take(PA, p, r, c0, near, 1.0); }
-  return take(A, p, r, c0, near, u.diff.z);
+  if (u.src.x > 0.5) { return take(PA, p, r, c0, u.radii.xy, near, 1.0); }
+  return take(A, p, r, c0, u.radii.xy, near, u.diff.z);
 }
 fn takeB(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
-  if (u.src.y > 0.5) { return take(PB, p, r, c0, near, 1.0); }
-  return take(B, p, r, c0, near, u.diff.w);
+  if (u.src.y > 0.5) { return take(PB, p, r, c0, u.radii.zw, near, 1.0); }
+  return take(B, p, r, c0, u.radii.zw, near, u.diff.w);
 }
 
 fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
 
 fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
   switch mode {
-    case 1u: {
-      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: {
       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);
@@ -10627,8 +10810,10 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
     }
     default: {}
   }
-  // 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));
+  // Side by side, fusing and wiping: Before over After, cut at the seam with its feather.
+  let s = max(u.wipe.y, 0.5);
+  let ka = a.a * (1.0 - smoothstep(u.wipe.x - s, u.wipe.x + s, p.x));
+  return vec4f(a.rgb * ka + b.rgb * b.a * (1.0 - ka), ka + b.a * (1.0 - ka));
 }
 
 @fragment fn fs(@builtin(position) q: vec4f) -> @location(0) vec4f {
@@ -11030,6 +11215,29 @@ var init_compare_strip = __esm(() => {
   DIFF = { w: 32, h: 18 };
 });
 
+// src/ui/player.ts
+function playGlyph(doc) {
+  const element = doc.createElement("span");
+  element.className = "knobs-player-glyph";
+  element.setAttribute("aria-hidden", "true");
+  let timer = 0;
+  const win = doc.defaultView;
+  return {
+    element,
+    flash(playing) {
+      element.innerHTML = playing ? PLAY2 : PAUSE;
+      element.setAttribute("data-flash", "");
+      win.clearTimeout(timer);
+      timer = win.setTimeout(() => element.removeAttribute("data-flash"), FLASH_MS);
+    },
+    dispose: () => win.clearTimeout(timer)
+  };
+}
+var FLASH_MS = 450;
+var init_player = __esm(() => {
+  init_timeline();
+});
+
 // src/ui/compare.ts
 function compare(container, options) {
   const doc = container.ownerDocument;
@@ -11137,6 +11345,8 @@ function compare(container, options) {
     if (name.textContent !== text)
       name.textContent = text;
   };
+  const seam = el("div", "knobs-cmp-seam");
+  seam.setAttribute("aria-hidden", "true");
   const handle = el("div", "knobs-cmp-handle");
   handle.setAttribute("role", "slider");
   handle.setAttribute("aria-label", "Wipe");
@@ -11146,7 +11356,8 @@ function compare(container, options) {
   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);
+  const glyph = playGlyph(doc);
+  stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note, glyph.element);
   root.append(bar, stage);
   const wantsStrip = options.strip === true;
   let tl = bound;
@@ -11161,7 +11372,7 @@ function compare(container, options) {
     root.append(host);
     tl = timeline(host, {
       ...look,
-      variant: "lane",
+      variant: "line",
       duration: 1,
       fps: fps(),
       arrows: { step: 0.5, shift: 2 },
@@ -11182,12 +11393,13 @@ function compare(container, options) {
   let toMode = mode;
   const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
   let wipeCatching = false;
-  let gripY = null;
+  const gripAt = new Spring(0.5, LAYOUT2.omega, LAYOUT2.zeta, 0.0001);
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
   const touches = new Map;
   let pinch = null;
+  let press = null;
   const zu = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
   const zv = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
   const zw = new Spring(1, ZOOM.omega, ZOOM.zeta, 0.00001);
@@ -11199,6 +11411,7 @@ function compare(container, options) {
   let stageRect = null;
   let accent = [0.49, 0.81, 0.61];
   let labelW = [0, 0];
+  let frameRadius = 0;
   let dirty = true;
   let disposed = false;
   let near = options.lazy === false;
@@ -11474,6 +11687,8 @@ function compare(container, options) {
     for (const s of sides) {
       const st = s.el.style;
       st.clipPath = "";
+      st.maskImage = "";
+      st.setProperty("-webkit-mask-image", "");
       st.mixBlendMode = "";
       st.opacity = "";
       s.shown = null;
@@ -11700,43 +11915,66 @@ 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 differenceWeight = () => {
+    const f = Math.min(1, Math.max(0, fade.x));
+    return (fromMode === "difference" ? 1 - f : 0) + (toMode === "difference" ? f : 0);
   };
   const placeGrip = (wr) => {
-    const gy = gripTop(gripY ?? wr.y + wr.h / 2, wr, GRIP.h) - wr.y;
+    const gy = gripTop(wr.y + gripAt.x * wr.h, wr, GRIP.h) - wr.y;
     grip.style.transform = `translate3d(0,${gy.toFixed(2)}px,0)`;
   };
+  let folded = 0;
   const draw = () => {
     dirty = false;
+    if (!root.hasAttribute("data-ready") && sides.every((x) => x.shown || x.failed))
+      root.setAttribute("data-ready", "");
     const r = layoutNow();
     const wr = wipeRect(r.L.overlay);
-    const wx = wipeX(wr, wipeLine.x);
-    const k = lay.x;
-    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 k = Math.min(1, Math.max(0, lay.x));
+    const fu = fuseFrame(r.L, r.before, r.after, k, wipeLine.x);
+    const corners = fuseCorners(frameRadius, k);
+    const dw = differenceWeight();
+    const fusing = 1 - dw;
+    folded = k * fusing;
+    const fold = labelFold(folded, MARK.w);
+    const w = labelW.map((x) => x - (MARK.w - fold.width) - MARK.gap * folded);
+    const ride = seamLabels(fu.cut, r.before.x, r.after.x + r.after.w, w[0], w[1], INSET);
+    const apart = [r.before.x + INSET, r.after.x + INSET];
+    const corner = [r.before.x + INSET, r.after.x + r.after.w - labelW[1] - INSET];
+    const rides = [ride.before, ride.after];
     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 fused = apart[i] + (rides[i].x - apart[i]) * k;
+      const x = fused + (corner[i] - fused) * dw;
+      const opacity = (1 - k + k * rides[i].opacity) * fusing + dw;
+      const l = labels[i];
+      l.style.transform = `translate(${x.toFixed(2)}px,${ys[i].toFixed(2)}px)`;
+      l.style.opacity = opacity.toFixed(3);
+      const mark = l.firstElementChild;
+      if (mark) {
+        mark.style.width = `${fold.width.toFixed(2)}px`;
+        mark.style.marginRight = `${(-MARK.gap * folded).toFixed(2)}px`;
+        mark.style.opacity = fold.opacity.toFixed(3);
+        mark.style.filter = fold.blur > 0.05 ? `blur(${fold.blur.toFixed(2)}px)` : "";
+      }
     }
     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));
+    const seamOn = fu.seam * fusing;
+    const blur = fu.blur > 0.01 ? `blur(${fu.blur.toFixed(2)}px)` : "none";
+    seam.style.transform = `translate(${fu.cut.toFixed(2)}px,${wr.y.toFixed(2)}px) translateX(-50%)`;
+    seam.style.width = `${(8 + 2 * fu.feather).toFixed(2)}px`;
+    seam.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    seam.style.opacity = (blur === "none" ? 0 : seamOn).toFixed(3);
+    seam.style.backdropFilter = blur;
+    seam.style.setProperty("-webkit-backdrop-filter", blur);
     handle.toggleAttribute("data-on", mode === "wipe");
-    handle.style.transform = `translate(${wx.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
+    handle.style.transform = `translate(${fu.cut.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
     handle.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    handle.style.opacity = seamOn.toFixed(3);
+    handle.style.filter = blur;
     placeGrip(wr);
     handle.setAttribute("aria-valuenow", String(Math.round(wipe * 100)));
     handle.setAttribute("aria-valuetext", `${Math.round(wipe * 100)}% Before`);
@@ -11749,24 +11987,30 @@ function compare(container, options) {
     if (pending)
       return;
     if (renderer === "dom") {
-      const place = (n, rect, clip, cutAt) => {
+      const cut = mode === "difference" ? null : fu;
+      const place = (n, rect, clip, before) => {
+        const round = before ? corners.before : corners.after;
         const st = n.style;
         st.transform = `translate(${rect.x.toFixed(2)}px,${rect.y.toFixed(2)}px)`;
         st.width = `${rect.w.toFixed(2)}px`;
         st.height = `${rect.h.toFixed(2)}px`;
+        const edge = before && cut ? cut.cut + cut.feather : Number.POSITIVE_INFINITY;
         const t = Math.max(0, clip.y - rect.y);
         const l = Math.max(0, clip.x - rect.x);
         const b = Math.max(0, rect.y + rect.h - (clip.y + clip.h));
-        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 right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, edge));
+        const rr = edge < clip.x + clip.w - 0.5 ? 0 : round.right;
+        const rl = round.left;
+        st.clipPath = t + l + b + right + rl + rr > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px round ${rl.toFixed(2)}px ${rr.toFixed(2)}px ${rr.toFixed(2)}px ${rl.toFixed(2)}px)` : "";
+        const mask = before && cut && cut.feather > 0.5 ? `linear-gradient(to right,#000 ${(cut.cut - cut.feather - rect.x).toFixed(2)}px,transparent ${(edge - rect.x).toFixed(2)}px)` : "";
+        st.maskImage = mask;
+        st.setProperty("-webkit-mask-image", mask);
       };
-      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;
-        const at = s.index === 0 ? cut : Number.POSITIVE_INFINITY;
-        place(s.el, rect, clip, at);
-        place(s.preview, rect, clip, at);
+        place(s.el, rect, clip, s.index === 0);
+        place(s.preview, rect, clip, s.index === 0);
         if (s.index !== 0)
           continue;
         for (const n of [s.el, s.preview])
@@ -11786,8 +12030,8 @@ function compare(container, options) {
       width: Math.max(1, Math.round(stageW * dpr)),
       height: Math.max(1, Math.round(stageH * dpr)),
       dpr,
-      wipeX: wx * dpr,
-      soft: 0.75 * dpr,
+      wipeX: fu.cut * dpr,
+      soft: Math.max(0.75, fu.feather) * dpr,
       from: MODE_INDEX[fromMode],
       to: MODE_INDEX[toMode],
       mix: Math.min(1, Math.max(0, fade.x)),
@@ -11795,7 +12039,13 @@ function compare(container, options) {
       gain: 1,
       accent,
       loupe: loupeShown() && pointer ? { x: pointer.x * dpr, y: pointer.y * dpr, r: LOUPE.r * dpr, zoom: LOUPE.zoom } : null,
-      preview: [Boolean(sides[0].shown?.cached), Boolean(sides[1].shown?.cached)]
+      preview: [Boolean(sides[0].shown?.cached), Boolean(sides[1].shown?.cached)],
+      radii: [
+        corners.before.left * dpr,
+        corners.before.right * dpr,
+        corners.after.left * dpr,
+        corners.after.right * dpr
+      ]
     });
   };
   const drawNow = () => {
@@ -11814,6 +12064,7 @@ function compare(container, options) {
     zu.step(dt);
     zv.step(dt);
     zw.step(dt);
+    gripAt.step(dt);
     const playing = isPlaying();
     if (playing) {
       const m = master();
@@ -11844,11 +12095,9 @@ function compare(container, options) {
             pushFrame(s);
       }
     }
-    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching;
+    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching || !gripAt.resting;
     if (moving)
       dirty = true;
-    if (auto && !lay.resting)
-      fitHeight();
     if (dirty)
       draw();
     return playing || moving;
@@ -11874,13 +12123,7 @@ function compare(container, options) {
     zw.set(c.w);
     requestDraw();
   };
-  const autoHeight = (w) => {
-    const shape = sizeOf(sides[1]);
-    const side = splitHeight(w, shape);
-    const over = w * shape.h / shape.w;
-    const h = side + (over - side) * lay.x;
-    return Math.max(60, Math.min(win.innerHeight * 0.8, h));
-  };
+  const autoHeight = (w) => Math.max(60, Math.min(win.innerHeight * 0.8, splitHeight(w, sizeOf(sides[1]))));
   const fitHeight = () => {
     const h = autoHeight(stageW);
     if (Math.abs(h - stageH) < 0.25)
@@ -11892,7 +12135,9 @@ function compare(container, options) {
   const readColors = () => {
     const c = tokenColor(win.getComputedStyle(root), "--_ku-cmp-diff", [0.49, 0.81, 0.61, 1]);
     accent = [c[0], c[1], c[2]];
-    labelW = [labels[0].offsetWidth, labels[1].offsetWidth];
+    const unfold = MARK.w - labelFold(folded, MARK.w).width + MARK.gap * folded;
+    labelW = [labels[0].offsetWidth + unfold, labels[1].offsetWidth + unfold];
+    frameRadius = Number.parseFloat(win.getComputedStyle(stage).borderTopLeftRadius) || 0;
     requestDraw();
   };
   const measure = () => {
@@ -11983,8 +12228,10 @@ function compare(container, options) {
       root.focus({ preventScroll: true });
     touches.set(e.pointerId, p);
     stage.setPointerCapture(e.pointerId);
+    press = touches.size === 1 && mode !== "wipe" && master() ? p : null;
     if (touches.size >= 2) {
       e.preventDefault();
+      press = null;
       return startPinch();
     }
     if (mode === "wipe") {
@@ -11994,7 +12241,7 @@ function compare(container, options) {
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
         root.dataset.dragging = "";
-        gripY = p.y;
+        gripAt.snap(wr.h > 0 ? (p.y - wr.y) / wr.h : 0.5);
         e.preventDefault();
         if (!grab.onLine)
           setWipe(wipeAt(p.x, wr), true, true);
@@ -12012,6 +12259,8 @@ function compare(container, options) {
   const onMove = (e) => {
     const p = local(e);
     pointer = p;
+    if (press && Math.hypot(p.x - press.x, p.y - press.y) > 4)
+      press = null;
     if (touches.has(e.pointerId))
       touches.set(e.pointerId, p);
     if (pinch && touches.size >= 2) {
@@ -12025,14 +12274,12 @@ 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") {
+    if (drag?.kind === "wipe") {
+      const wr = wipeRect(layoutNow().L.overlay);
+      gripAt.snap(wr.h > 0 ? (p.y - wr.y) / wr.h : 0.5);
+      setWipe(wipeAt(p.x, wr, drag.offset));
+      placeGrip(wr);
+    } else if (drag?.kind === "pan") {
       const dx = p.x - drag.x;
       const dy = p.y - drag.y;
       drag.x = p.x;
@@ -12043,11 +12290,23 @@ function compare(container, options) {
       drawNow();
   };
   const endDrag = (e) => {
+    if (press && e.type === "pointerup") {
+      api.toggle();
+      glyph.flash(isPlaying());
+    }
+    press = null;
     touches.delete(e.pointerId);
     if (touches.size < 2)
       pinch = null;
     if (!drag)
       return;
+    if (drag.kind === "wipe") {
+      if (reducedMotion(win))
+        gripAt.snap(0.5);
+      else
+        gripAt.set(0.5);
+      requestDraw();
+    }
     drag = null;
     delete root.dataset.dragging;
     delete root.dataset.panning;
@@ -12197,6 +12456,7 @@ function compare(container, options) {
     old.el.replaceWith(s.el);
     old.preview.replaceWith(s.preview);
     sides[index] = s;
+    root.toggleAttribute("data-video", sides.some((x) => x.kind === "video"));
     note.textContent = "";
     setLabel(index, labelOf(index));
     if (near)
@@ -12211,6 +12471,7 @@ function compare(container, options) {
   stage.insertBefore(sides[0].preview, labels[0]);
   setLabel(0, labelOf(0));
   setLabel(1, labelOf(1));
+  root.toggleAttribute("data-video", sides.some((s) => s.kind === "video"));
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
   const modePill = modeList.length > 1 ? selectionPill(modes, {
@@ -12411,6 +12672,7 @@ function compare(container, options) {
       disposed = true;
       loop.stop();
       modePill?.dispose();
+      glyph.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -12440,7 +12702,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
+var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -12451,15 +12713,17 @@ var init_compare = __esm(() => {
   init_icons();
   init_look();
   init_rgba();
+  init_player();
   init_selection_pill();
   init_timeline();
   init_timeline_model();
-  LAYOUT2 = springMotion({ duration: 0.35, bounce: 0 });
+  LAYOUT2 = springMotion(SPRINGS.default);
   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 };
+  MARK = { w: 12, gap: 4 };
   LOUPE = { r: 88, zoom: 4 };
   MODE_LABEL = {
     side: { short: "Side", long: "Side by side" },
@@ -16966,11 +17230,629 @@ function toast(message, options = {}) {
   };
 }
 
+// src/ui/walkthrough-annotations.ts
+var EYE = "M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z";
+var EYE_OFF = "M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z";
+var glyph = (d) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
+var ARROW = '<svg class="knobs-wt-anno-arrow" viewBox="0 0 28 28" width="28" height="28" aria-hidden="true"><path d="M3 3 L24 24 M24 24 L24 13 M24 24 L13 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+var shapeOf = (a) => a.shape ?? (a.w !== undefined && a.h !== undefined ? "box" : "dot");
+var showsAt = (a, time) => !a.at || time === undefined || time >= a.at[0] && time <= a.at[1];
+function placeMark(a, rect, view = ALL) {
+  const w = a.w ?? 0;
+  const h = a.h ?? 0;
+  const x = (a.x - view.u) / view.w;
+  const y = (a.y - view.v) / view.h;
+  const ww = w / view.w;
+  const hh = h / view.h;
+  if (x + ww < 0 || y + hh < 0 || x > 1 || y > 1)
+    return null;
+  return { x: rect.x + x * rect.w, y: rect.y + y * rect.h, w: ww * rect.w, h: hh * rect.h };
+}
+var ALL = { u: 0, v: 0, w: 1, h: 1 };
+var scopeOf = (el) => el.closest(".knobs-walkthrough") ?? el.closest(".knobs-wt-slot") ?? el;
+var annotationsOn = (scope) => scope.dataset.annotations !== "off";
+function setAnnotations(scope, on) {
+  if (on)
+    delete scope.dataset.annotations;
+  else
+    scope.dataset.annotations = "off";
+  for (const b of Array.from(scope.querySelectorAll(".knobs-wt-anno-toggle")))
+    syncToggle(b, on);
+}
+function syncToggle(b, on) {
+  b.setAttribute("aria-pressed", String(on));
+  b.title = on ? "Hide annotations (a)" : "Show annotations (a)";
+  b.innerHTML = glyph(on ? EYE : EYE_OFF);
+}
+function annotationLayer(host, list, place, corner = host) {
+  const doc = host.ownerDocument;
+  const layer = doc.createElement("div");
+  layer.className = "knobs-wt-anno";
+  layer.setAttribute("aria-hidden", "true");
+  host.append(layer);
+  const toggle = doc.createElement("button");
+  toggle.type = "button";
+  toggle.className = "knobs-wt-anno-toggle";
+  toggle.setAttribute("aria-label", "Annotations");
+  syncToggle(toggle, annotationsOn(scopeOf(host)));
+  toggle.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const scope = scopeOf(host);
+    setAnnotations(scope, !annotationsOn(scope));
+  });
+  corner.append(toggle);
+  let marks = [];
+  const make = (a) => {
+    const m = doc.createElement("div");
+    const shape = shapeOf(a);
+    m.className = "knobs-wt-mark";
+    m.dataset.shape = shape;
+    m.dataset.hidden = "";
+    if (shape === "arrow")
+      m.innerHTML = ARROW;
+    if (a.label) {
+      const l = doc.createElement("span");
+      l.className = "knobs-wt-mark-label";
+      l.textContent = a.label;
+      m.append(l);
+    }
+    layer.append(m);
+    return m;
+  };
+  let settled = false;
+  const update = () => {
+    const p = place();
+    if (marks.length !== p.rects.length) {
+      for (const row of marks)
+        for (const m of row)
+          m.remove();
+      marks = p.rects.map(() => list.map(make));
+    }
+    p.rects.forEach((rect, i) => {
+      list.forEach((a, j) => {
+        const m = marks[i][j];
+        const box = placeMark(a, rect, p.view);
+        const show = box !== null && showsAt(a, p.time);
+        if (box) {
+          m.style.transform = `translate(${box.x.toFixed(2)}px,${box.y.toFixed(2)}px)`;
+          m.style.width = `${box.w.toFixed(2)}px`;
+          m.style.height = `${box.h.toFixed(2)}px`;
+        }
+        m.toggleAttribute("data-hidden", !show);
+      });
+    });
+    if (!settled) {
+      settled = true;
+      requestAnimationFrame(() => requestAnimationFrame(() => layer.dataset.settled = ""));
+    }
+  };
+  const ro = new ResizeObserver(() => update());
+  ro.observe(host);
+  update();
+  return {
+    element: layer,
+    update,
+    dispose() {
+      ro.disconnect();
+      layer.remove();
+      toggle.remove();
+    }
+  };
+}
+
 // src/ui/walkthrough-blocks.ts
 init_motion();
-init_icons();
+
+// src/ui/history.ts
+init_motion();
+init_glide();
+
+// src/ui/history-css.ts
+var historyCss = `
+:where(.knobs-history,.knobs-history *){box-sizing:border-box}
+.knobs-ui.knobs-history{--hy-gutter:128px;--hy-lane:24px;--hy-bar:16px;--hy-axis:20px;--hy-bandrow:0px;--hy-c:var(--_k-fg-3);
+  --hy-fade:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);
+  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;outline:none;color:var(--_k-fg);
+  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
+  text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
+.knobs-history[data-bands]{--hy-bandrow:var(--_k-leading-small)}
+.knobs-history[data-narrow]{--hy-gutter:0px}
+.knobs-history [hidden]{display:none!important}
+:where(.knobs-ui) :is(.knobs-hy-ev,.knobs-hy-span,.knobs-hy-jump,.knobs-hy-more){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-history [data-tone="good"]{--hy-c:var(--_k-ok)}
+.knobs-history [data-tone="warn"]{--hy-c:var(--_k-warn)}
+.knobs-history [data-tone="bad"]{--hy-c:var(--_k-danger)}
+.knobs-history [data-tone="info"]{--hy-c:var(--_k-info)}
+.knobs-history [data-tone="dim"]{--hy-c:var(--_k-fg-3)}
+
+/* ——— the chart: lane labels beside the plot (above each lane where it's narrow) ——— */
+.knobs-hy-chart{position:relative;display:grid;grid-template-columns:var(--hy-gutter) minmax(0,1fr)}
+.knobs-hy-axis{position:relative;grid-column:2;grid-row:1;height:calc(var(--hy-bandrow) + var(--hy-axis))}
+:is(.knobs-hy-tick,.knobs-hy-now,.knobs-hy-blabel){position:absolute;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tick{bottom:2px;padding-left:4px}
+.knobs-hy-now{bottom:2px;color:var(--_k-accent-fg);font-weight:var(--_k-weight-label)}
+.knobs-hy-blabel{top:0;padding-left:4px;overflow:hidden;color:var(--_k-fg-2)}
+.knobs-hy-label{grid-column:1;align-self:center;min-width:0;margin-right:var(--_k-space-title);overflow:hidden;white-space:nowrap;
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-history[data-narrow] .knobs-hy-label{grid-column:2;align-self:end;margin:0}
+:is(.knobs-hy-label,.knobs-hy-blabel)[data-overflow]{-webkit-mask-image:var(--hy-fade);mask-image:var(--hy-fade)}
+.knobs-hy-track{position:relative;grid-column:2;height:var(--hy-lane)}
+.knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}
+
+/* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */
+.knobs-hy-band{position:absolute;top:0;bottom:0;background:color-mix(in oklch,var(--_k-fg) 3.5%,transparent);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}
+:is(.knobs-hy-grid,.knobs-hy-today,.knobs-hy-hover,.knobs-hy-sel){position:absolute;left:0;top:calc(var(--hy-bandrow) + var(--hy-axis));bottom:0;width:1px;margin-left:-.5px}
+.knobs-hy-grid{background:var(--_k-border-subtle)}
+.knobs-hy-today{top:calc(var(--hy-bandrow) + var(--hy-axis) - 4px);background:var(--_k-accent)}
+.knobs-hy-hover{background:color-mix(in oklch,var(--_k-fg) 32%,transparent);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-hover[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-sel{background:var(--_k-fg-2);opacity:0}
+.knobs-hy-sel[data-on]{opacity:.6}
+
+/* Spans: a soft bar in their state's tone, inferred ones hatched; the tag at the end. */
+.knobs-hy-span{position:absolute;top:calc((var(--hy-lane) - var(--hy-bar)) / 2);height:var(--hy-bar);border-radius:var(--_k-radius-sm);cursor:pointer;
+  background:color-mix(in oklch,var(--hy-c) 24%,transparent);transition:background calc(var(--_k-hover-out) * 1ms),box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-span[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 34%,transparent) 0 2px,color-mix(in oklch,var(--hy-c) 9%,transparent) 2px 6px)}
+.knobs-hy-span[data-hover]{background-color:color-mix(in oklch,var(--hy-c) 34%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 1px var(--hy-c)}
+.knobs-hy-span[data-clip-start]{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px);mask-image:linear-gradient(to right,transparent,#000 16px)}
+.knobs-hy-span[data-clip-end]{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(to left,transparent,#000 16px);mask-image:linear-gradient(to left,transparent,#000 16px)}
+.knobs-hy-tag{position:absolute;top:0;right:6px;font-size:var(--_k-type-small);line-height:var(--hy-bar);white-space:nowrap;pointer-events:none;
+  color:color-mix(in oklch,var(--hy-c) 55%,var(--_k-fg))}
+.knobs-hy-tag[data-place="after"]{right:auto;left:calc(100% + 6px)}
+.knobs-hy-tag[data-place="none"]{visibility:hidden}
+
+/* Event marks (their kind named in the tooltip): a dot for a commit, a diamond for a release, a cross for a deletion, a square for a
+   channel's switch, a triangle for a finding; inferred ones hollow. */
+.knobs-hy-ev{position:absolute;top:0;width:16px;height:var(--hy-lane);margin-left:-8px;cursor:pointer;--hy-c:var(--_k-fg-2);--hy-s:9px}
+.knobs-hy-ev::before{content:"";position:absolute;left:50%;top:50%;width:var(--hy-s);height:var(--hy-s);margin:calc(var(--hy-s) / -2) 0 0 calc(var(--hy-s) / -2);
+  border-radius:50%;background:var(--hy-c);transition:scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-ev[data-range]{width:calc(var(--hy-w) + 16px)}
+.knobs-hy-ev[data-range]::before{left:calc(8px - var(--hy-s) / 2);right:calc(8px - var(--hy-s) / 2);width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-hy-ev[data-type="release"]{--hy-s:8px}
+.knobs-hy-ev[data-type="release"]::before{border-radius:1.5px;rotate:45deg}
+.knobs-hy-ev[data-type="channel"]{--hy-s:8px}
+.knobs-hy-ev[data-type="channel"]::before{border-radius:2px}
+.knobs-hy-ev[data-type="audit"]{--hy-s:10px}
+.knobs-hy-ev[data-type="audit"]::before{border-radius:0;clip-path:polygon(50% 4%,100% 92%,0 92%)}
+.knobs-hy-ev[data-type="deletion"]::before{border-radius:0;rotate:45deg;
+  background:linear-gradient(var(--hy-c),var(--hy-c)) center/100% 1.75px no-repeat,linear-gradient(var(--hy-c),var(--hy-c)) center/1.75px 100% no-repeat}
+.knobs-hy-ev[data-inferred]:not([data-type="audit"],[data-type="deletion"])::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-inferred]:is([data-type="audit"],[data-type="deletion"])::before{opacity:.5}
+/* Held-back marks (commits, by default) come up while the pointer is on their lane, and stay with
+   "Show commits" or while selected. */
+.knobs-hy-ev[data-quiet]{opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-track:hover .knobs-hy-ev[data-quiet]{opacity:.6;transition-duration:calc(var(--_k-motion-snappy-ms) * 1ms)}
+:is(.knobs-history[data-all] .knobs-hy-ev[data-quiet],.knobs-hy-ev[data-quiet]:is([data-selected],[data-hover])){opacity:1}
+.knobs-hy-ev[data-hover]::before{scale:1.25}
+.knobs-hy-ev[data-selected]::before{scale:1.3}
+.knobs-hy-ev[data-selected]::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hy-s) + 9px);height:calc(var(--hy-s) + 9px);
+  margin:calc((var(--hy-s) + 9px) / -2) 0 0 calc((var(--hy-s) + 9px) / -2);border-radius:50%;box-shadow:0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-range][data-selected]::after{left:3px;right:3px;width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-history:focus-visible .knobs-hy-ev[data-selected]::after{box-shadow:0 0 0 2px var(--_k-focus)}
+.knobs-history:focus-visible .knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 2px var(--_k-focus)}
+
+/* ——— under the chart: "Show commits", and a legend only when inferred and verified both appear ——— */
+.knobs-hy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_k-space-inside) var(--_k-space-title);margin-top:var(--_k-space-sibling);padding-left:var(--hy-gutter);
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-legend{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title)}
+.knobs-ui .knobs-hy-more{height:20px;margin-left:-6px;padding:0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-3);cursor:pointer;
+  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-more:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
+.knobs-hy-swatch{flex:none;width:14px;height:8px;border-radius:2px;background:color-mix(in oklch,var(--hy-c) 34%,transparent)}
+.knobs-hy-swatch[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 60%,transparent) 0 1.5px,transparent 1.5px 4px)}
+
+/* ——— the detail: one area under the chart, its height on a spring ——— */
+.knobs-hy-detail{position:relative;overflow:hidden;user-select:text;-webkit-user-select:text}
+.knobs-hy-detail[data-moving]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
+.knobs-hy-dc{padding:var(--_k-space-title) 0 0 var(--hy-gutter);transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-dc:is([data-enter],[data-leave]){opacity:0}
+.knobs-hy-dc[data-leave]{position:absolute;left:0;right:0;top:0;transition-duration:calc(var(--_k-motion-snappy-ms) * .8ms)}
+.knobs-hy-dmeta{display:flex;flex-wrap:wrap;gap:0 var(--_k-space-sibling);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-dmeta>[data-tone]{color:var(--hy-c)}
+.knobs-hy-dtitle{margin-top:var(--_k-space-inside);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight-title);color:var(--_k-fg);text-wrap:balance}
+.knobs-hy-dtext{margin:var(--_k-space-inside) 0 0;max-width:68ch;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-dtext code{font:calc(1em - 1px) var(--_k-mono);padding:1px 4px;border-radius:var(--_k-radius-sm);background:var(--_k-fill)}
+.knobs-hy-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--_k-space-sibling)}
+.knobs-hy-dfoot:empty{display:none}
+.knobs-hy-evidence{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--_k-radius-sm);background:var(--_k-fill);color:var(--_k-fg-2);
+  font:var(--_k-type-small)/1 var(--_k-mono);text-decoration:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+a.knobs-hy-evidence:hover{background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-hy-jump{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 8px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:pointer;
+  font-size:var(--_k-type-small);transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-jump:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-jump svg{width:12px;height:12px}
+
+/* ——— the pointer's tooltip: title, date, one line ——— */
+.knobs-hy-tip{position:absolute;left:0;top:0;max-width:280px;padding:6px 8px;border-radius:var(--_k-radius-md);background:var(--_k-bg-overlay);
+  box-shadow:var(--_k-shadow-overlay),0 0 0 1px var(--_k-border);pointer-events:none;opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-tip[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-tt{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight-label);color:var(--_k-fg);text-wrap:balance}
+:is(.knobs-hy-td,.knobs-hy-tl){font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tl{margin-top:2px;color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-tl:empty{display:none}
+
+@media(prefers-reduced-motion:reduce){
+  .knobs-history :where(*,::before,::after){transition-property:opacity,background,color,box-shadow!important}
+  .knobs-hy-dc{transition-duration:calc(var(--_k-hover-out) * 1ms)!important}
+}
+`;
+
+// src/ui/history-model.ts
+var MS_DAY = 86400000;
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var dayOf = (y, m, d) => Math.floor(Date.UTC(y, m, d) / MS_DAY);
+var parts = (day) => {
+  const t = new Date(day * MS_DAY);
+  return { y: t.getUTCFullYear(), m: t.getUTCMonth(), d: t.getUTCDate() };
+};
+var todayDay = (now = Date.now()) => {
+  const t = new Date(now);
+  return dayOf(t.getFullYear(), t.getMonth(), t.getDate());
+};
+var monthIndex = (name) => MONTHS.findIndex((m) => m.toLowerCase() === name.slice(0, 3).toLowerCase());
+function parseDay(text, year) {
+  const s = text.trim();
+  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  if (iso) {
+    const y = Number(iso[1]);
+    const day = dayOf(y, Number(iso[2]) - 1, Number(iso[3]));
+    return { from: day, to: day, year: y };
+  }
+  const m = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:\s*[–—-]\s*(?:([A-Za-z]{3,9})\.?\s+)?(\d{1,2}))?(?:,?\s+(\d{4}))?$/.exec(s);
+  if (!m)
+    return null;
+  const m1 = monthIndex(m[1]);
+  const m2 = m[3] ? monthIndex(m[3]) : m1;
+  if (m1 < 0 || m2 < 0)
+    return null;
+  const written = m[5] ? Number(m[5]) : undefined;
+  const y = written ?? year;
+  if (y === undefined)
+    return null;
+  const from = dayOf(y, m1, Number(m[2]));
+  let to = m[4] ? dayOf(y, m2, Number(m[4])) : from;
+  if (to < from)
+    to = dayOf(y + 1, m2, Number(m[4]));
+  return { from, to, ...written !== undefined ? { year: written } : {} };
+}
+function formatDay(day) {
+  const { y, m, d } = parts(day);
+  return `${MONTHS[m]} ${d}, ${y}`;
+}
+function formatRange(from, to, open = false) {
+  if (open)
+    return `${formatDay(from)} – today`;
+  if (to <= from)
+    return formatDay(from);
+  const a = parts(from);
+  const b = parts(to);
+  if (a.y === b.y && a.m === b.m)
+    return `${MONTHS[a.m]} ${a.d}–${b.d}, ${a.y}`;
+  if (a.y === b.y)
+    return `${MONTHS[a.m]} ${a.d} – ${MONTHS[b.m]} ${b.d}, ${a.y}`;
+  return `${formatDay(from)} – ${formatDay(to)}`;
+}
+var formatDays = (n) => `${n} ${n === 1 ? "day" : "days"}`;
+function guessTone(state) {
+  const s = state.toLowerCase();
+  if (/broken|bad|fail|missing|deleted|down/.test(s))
+    return "bad";
+  if (/warn|redirect|partial|beta|next|pre/.test(s))
+    return "warn";
+  if (/work|ok|good|fixed|live|green/.test(s))
+    return "good";
+  return "dim";
+}
+var bandLabel = (heading) => heading.replace(/^\s*\d+\s*[·.:)\-–]\s*/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
+function fromGroups(groups, today) {
+  const events = [];
+  const bands = [];
+  const all = groups.flatMap((g) => g.events ?? g.rows ?? []);
+  let year = all.map((e) => parseDay(e.date, 0)?.year).find((y) => y !== undefined) ?? parts(today).y;
+  for (const g of groups) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const e of g.events ?? g.rows ?? []) {
+      const d = parseDay(e.date, year);
+      if (!d)
+        continue;
+      if (d.year !== undefined)
+        year = d.year;
+      lo = Math.min(lo, d.from);
+      hi = Math.max(hi, d.to);
+      events.push({
+        ...e,
+        date: iso(d.from),
+        ...d.to > d.from ? { to: iso(d.to) } : {},
+        lane: e.lane ?? "code"
+      });
+    }
+    const label = g.heading ? bandLabel(g.heading) : "";
+    if (label && lo <= hi)
+      bands.push({ from: iso(lo), to: iso(hi), label });
+  }
+  return { events, bands };
+}
+function iso(day) {
+  const { y, m, d } = parts(day);
+  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+var startOfMonth = (day) => {
+  const { y, m } = parts(day);
+  return dayOf(y, m, 1);
+};
+var TYPE_TONE = { deletion: "bad" };
+function normalizeHistory(data, now = todayDay()) {
+  const today = data.axis?.today && parseDay(data.axis.today, parts(now).y)?.from || now;
+  const converted = data.groups?.length ? fromGroups(data.groups, today) : { events: [], bands: [] };
+  const rawEvents = [...data.events ?? [], ...converted.events];
+  const rawBands = [...data.bands ?? [], ...converted.bands];
+  const year = parts(today).y;
+  const day = (s) => s ? parseDay(s, year) ?? null : null;
+  const states = new Map;
+  const stateOf = (key) => {
+    const known = states.get(key);
+    if (known)
+      return known;
+    const def = data.states?.[key];
+    const s = { key, label: def?.label ?? key, tone: def?.tone ?? guessTone(key) };
+    states.set(key, s);
+    return s;
+  };
+  const items = new Map;
+  const laneOrder = [];
+  const lanes = new Map;
+  const lane = (id, label = id === "code" ? "Code" : id) => {
+    let l = lanes.get(id);
+    if (!l) {
+      l = { id, label, spans: [], events: [] };
+      lanes.set(id, l);
+      laneOrder.push(id);
+    }
+    return l;
+  };
+  if (rawEvents.some((e) => !e.lane || e.lane === "code") && !data.lanes?.some((l) => l.id === "code"))
+    lane("code");
+  let inferred = false;
+  for (const l of data.lanes ?? []) {
+    const into = lane(l.id, l.label);
+    (l.spans ?? []).forEach((s, i) => {
+      const a = day(s.from);
+      if (!a)
+        return;
+      const open = !s.to;
+      const b = open ? null : day(s.to);
+      const to = open ? today : b?.to ?? a.to;
+      const st = stateOf(s.state);
+      const days = Math.max(0, to - a.from);
+      const own = s.label ?? data.states?.[s.state]?.tag ?? "{d}d";
+      const tags = own === "" ? [] : [...new Set([own, "{d}d"])].map((t) => t.replace(/\{d\}/g, String(days)));
+      const id = s.id ?? `${l.id}/${i}`;
+      const item = {
+        id,
+        kind: "span",
+        lane: l.id,
+        from: a.from,
+        to,
+        open,
+        title: s.title ?? `${l.label} · ${st.label}`,
+        ...s.detail ? { detail: s.detail } : {},
+        tone: st.tone,
+        inferred: s.provenance === "inferred",
+        ...s.provenance ? { provenance: s.provenance } : {},
+        ...s.source ? { source: s.source } : {},
+        evidence: s.evidence ?? [],
+        ...s.step ? { step: s.step } : {},
+        state: s.state,
+        tags
+      };
+      if (item.inferred)
+        inferred = true;
+      into.spans.push(item);
+      items.set(id, item);
+    });
+  }
+  const types = [];
+  const events = [];
+  rawEvents.forEach((e, index) => {
+    const a = day(e.date);
+    if (!a)
+      return;
+    const to = Math.max(a.to, day(e.to)?.to ?? a.to);
+    const into = lane(e.lane ?? "code");
+    const id = e.id ?? `e${index}`;
+    const item = {
+      id,
+      kind: "event",
+      lane: into.id,
+      from: a.from,
+      to,
+      open: false,
+      title: e.title,
+      ...e.detail ? { detail: e.detail } : {},
+      tone: e.tone ?? TYPE_TONE[e.type ?? ""] ?? "dim",
+      ...e.type ? { type: e.type } : {},
+      inferred: e.provenance === "inferred",
+      ...e.provenance ? { provenance: e.provenance } : {},
+      ...e.source ? { source: e.source } : {},
+      evidence: e.evidence ?? [],
+      ...e.step ? { step: e.step } : {},
+      tags: []
+    };
+    if (item.inferred)
+      inferred = true;
+    if (e.type && !types.includes(e.type))
+      types.push(e.type);
+    into.events.push(item);
+    items.set(id, item);
+    events.push({ item, index });
+  });
+  const bands = [];
+  for (const b of rawBands) {
+    const a = day(b.from);
+    if (!a)
+      continue;
+    const z = b.to ? day(b.to) : null;
+    bands.push({ from: a.from, to: z ? z.to : today, label: b.label });
+  }
+  bands.sort((x, y) => x.from - y.from);
+  const all = [...items.values()].flatMap((i) => [i.from, i.to]);
+  for (const b of bands)
+    all.push(b.from, b.to);
+  const hasOpen = [...items.values()].some((i) => i.open);
+  const lo = all.length ? Math.min(...all) : today - 90;
+  let hi = all.length ? Math.max(...all) : today;
+  if (hasOpen || data.axis?.today)
+    hi = Math.max(hi, today);
+  const from = day(data.axis?.from)?.from ?? startOfMonth(lo);
+  const to = day(data.axis?.to)?.to ?? hi + Math.max(6, Math.round((hi - from) * 0.05));
+  const laneIndex = (id) => laneOrder.indexOf(id);
+  const order = eventOrder(events.map((e) => ({ ...e, laneIndex: laneIndex(e.item.lane) })));
+  for (const l of lanes.values())
+    l.events.sort((a, b) => a.from - b.from);
+  return {
+    from,
+    to: Math.max(to, from + 1),
+    today,
+    lanes: laneOrder.map((id) => lanes.get(id)),
+    events: order,
+    bands,
+    states: [...states.values()],
+    types,
+    inferred,
+    verified: [...items.values()].some((i) => i.provenance === "verified"),
+    items
+  };
+}
+var DEFAULT_MARKS = ["release", "deletion"];
+function quietEvents(events, marks) {
+  if (marks === "all")
+    return new Set;
+  const quiet = events.filter((e) => e.type && !marks.includes(e.type));
+  return quiet.length === events.length ? new Set : new Set(quiet.map((e) => e.id));
+}
+var PLURALS = {
+  commit: "commits",
+  release: "releases",
+  deletion: "deletions",
+  channel: "channel switches",
+  audit: "findings"
+};
+function quietLabel(events, quiet) {
+  const types = [];
+  for (const e of events)
+    if (quiet.has(e.id) && e.type && !types.includes(e.type))
+      types.push(e.type);
+  const names = types.map((t) => PLURALS[t] ?? `${t}s`);
+  return names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names[0] ?? "";
+}
+function eventOrder(events) {
+  return [...events].sort((a, b) => a.item.from - b.item.from || a.laneIndex - b.laneIndex || a.index - b.index).map((e) => e.item);
+}
+function stepEvent(order, current, dir, at) {
+  if (!order.length)
+    return null;
+  const i = current === null ? -1 : order.findIndex((e) => e.id === current);
+  if (i < 0 && at !== undefined) {
+    const next = dir > 0 ? order.find((e) => e.from >= at) : [...order].reverse().find((e) => e.from <= at);
+    return next ?? (dir > 0 ? order[order.length - 1] : order[0]);
+  }
+  if (i < 0)
+    return dir > 0 ? order[0] : order[order.length - 1];
+  return order[Math.max(0, Math.min(order.length - 1, i + dir))];
+}
+function dayScale(from, to, width) {
+  const span = Math.max(1, to - from);
+  return {
+    x: (day) => (day - from) / span * width,
+    day: (x) => from + x / Math.max(1, width) * span,
+    f: (day) => (day - from) / span
+  };
+}
+var STEPS = [1, 2, 3, 6, 12];
+function monthTicks(from, to, width, minGap = 44) {
+  const perMonth = width / Math.max(1, to - from) * 30.44;
+  const step = STEPS.find((s) => s * perMonth >= minGap) ?? 12;
+  const ticks = [];
+  const { y } = parts(from);
+  let { m } = parts(from);
+  let d = dayOf(y, m, 1);
+  if (d < from) {
+    m++;
+    d = dayOf(y, m, 1);
+  }
+  while (d <= to) {
+    const p = parts(d);
+    if (p.m % step === 0)
+      ticks.push({ day: d, label: p.m === 0 ? String(p.y) : MONTHS[p.m] });
+    m++;
+    d = dayOf(y, m, 1);
+  }
+  return ticks;
+}
+function fitLabels(labels, width, reserved = [], gap = 8) {
+  let end = -Infinity;
+  return labels.map(({ x, w }) => {
+    const x1 = x + w;
+    if (x < end + gap || x1 > width)
+      return false;
+    if (reserved.some((r) => x < r.x1 + gap && x1 > r.x0 - gap))
+      return false;
+    end = x1;
+    return true;
+  });
+}
+function clipSpan(from, to, axisFrom, axisTo) {
+  if (to < axisFrom || from > axisTo)
+    return null;
+  return {
+    from: Math.max(from, axisFrom),
+    to: Math.min(to, axisTo),
+    clipStart: from < axisFrom,
+    clipEnd: to > axisTo
+  };
+}
+function fitTag(widths, spanWidth, roomAfter, pad = 6) {
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad * 2 <= spanWidth)
+      return { index: i, place: "inside" };
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad <= roomAfter)
+      return { index: i, place: "after" };
+  return null;
+}
+function bandRoom(bands, x) {
+  return bands.map((b, i) => {
+    const next = bands.slice(i + 1).find((n) => n.from > b.from);
+    const end = Math.min(b.to, next ? next.from : Infinity);
+    return Math.max(0, x(end) - x(b.from));
+  });
+}
+function nearestEvent(events, day, tolerance) {
+  let best = null;
+  let gap = tolerance;
+  for (const e of events) {
+    const d = day < e.from ? e.from - day : day > e.to ? day - e.to : 0;
+    if (d <= gap) {
+      best = e;
+      gap = d;
+    }
+  }
+  return best;
+}
+function firstSentence(text) {
+  if (!text)
+    return "";
+  const plain = text.replace(/`([^`]*)`/g, "$1").replace(/\*\*?([^*]+)\*\*?/g, "$1").trim();
+  const m = /^.*?[.!?](?=\s|$)/.exec(plain);
+  return (m ? m[0] : plain).trim();
+}
+
+// src/ui/history.ts
 init_look();
-init_selection_pill();
 
 // src/ui/walkthrough-model.ts
 var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
@@ -17036,7 +17918,14 @@ function fillMedia(m, base) {
     case "image":
       return { ...m, src: resolveSrc(m.src, base) };
     case "history":
-      return { kind: "history", groups: fillHistory(m) };
+      if ("data" in m)
+        return m;
+      return {
+        kind: "history",
+        data: historyData(m),
+        ...m.label ? { label: m.label } : {},
+        ...m.marks ? { marks: m.marks } : {}
+      };
     case "stack":
       return {
         kind: "stack",
@@ -17049,17 +17938,26 @@ function fillMedia(m, base) {
       return m;
   }
 }
-function fillHistory(m) {
+function historyData(m) {
+  const events = m.events ?? [];
+  if (m.lanes || m.bands || m.states || m.axis)
+    return {
+      ...m.axis ? { axis: m.axis } : {},
+      ...m.lanes ? { lanes: m.lanes } : {},
+      ...events.length ? { events } : {},
+      ...m.bands ? { bands: m.bands } : {},
+      ...m.states ? { states: m.states } : {}
+    };
   const groups = [];
-  if (m.events?.length)
-    groups.push({ events: m.events });
+  if (events.length)
+    groups.push({ 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;
+  return { groups };
 }
 function parseBranch(branch) {
   if (!branch?.trim())
@@ -17259,7 +18157,7 @@ function normalizeWalkthrough(doc) {
         ...step.question ? { question: step.question } : {},
         media: list.map((m) => fillMedia(m, doc.base)),
         columns: Math.max(1, Math.min(3, Math.round(step.columns ?? 1))),
-        ...step.more?.trim() && list.length > 1 ? { more: step.more.trim() } : {},
+        ...step.more?.trim() ? { more: step.more.trim() } : {},
         options,
         ask
       };
@@ -17274,6 +18172,7 @@ function normalizeWalkthrough(doc) {
       ...typeof s.kicker === "string" && s.kicker.trim() ? { kicker: s.kicker.trim() } : {},
       ...s.status ? { status: s.status } : {},
       ...s.summary ? { summary: s.summary } : {},
+      ...s.more?.trim() ? { more: s.more.trim() } : {},
       steps: own
     };
   });
@@ -17307,6 +18206,7 @@ function normalizeWalkthrough(doc) {
     id: doc.id,
     title: doc.title,
     ...doc.summary ? { summary: doc.summary } : {},
+    ...doc.more?.trim() ? { more: doc.more.trim() } : {},
     meta,
     feed,
     verdicts: ((doc.verdicts?.length) ? doc.verdicts : DEFAULT_VERDICTS).map((v) => ({
@@ -17314,9 +18214,40 @@ function normalizeWalkthrough(doc) {
       label: label(v)
     })),
     sections: withKickers(sections, doc.sections, doc.kickers),
-    steps
+    steps,
+    prs: knownPRs(doc, sections),
+    ...repoOf(doc) ? { repo: repoOf(doc) } : {}
   };
 }
+var prNumber = (href) => /\/(?:pull|merge_requests)\/(\d+)(?:[/?#]|$)/.exec(href)?.[1] ?? null;
+var repoOf = (doc) => doc.repo?.trim().replace(/^https?:\/\/github\.com\//, "").replace(/\/+$/, "") || undefined;
+function knownPRs(doc, sections) {
+  const out = {};
+  const repo = repoOf(doc);
+  for (const s of sections) {
+    const n = s.link && prNumber(s.link.href);
+    if (n)
+      out[n] = { href: s.link.href.replace(/(\/pull\/\d+).*$/, "$1") };
+  }
+  for (const [k, pr] of Object.entries(doc.prs ?? {})) {
+    const n = k.replace(/^#/, "");
+    if (!/^\d+$/.test(n))
+      continue;
+    out[n] = { ...out[n], ...pr };
+  }
+  if (repo) {
+    for (const n of Object.keys(out))
+      if (!out[n].href)
+        out[n] = { ...out[n], href: `https://github.com/${repo}/pull/${n}` };
+  }
+  return out;
+}
+function findPR(prs, n, repo) {
+  const known = prs[n];
+  if (known)
+    return known;
+  return repo ? { href: `https://github.com/${repo}/pull/${n}` } : null;
+}
 var isPullRequest = (href) => /\/(?:pull|merge_requests)\/\d+(?:[/?#]|$)/.test(href);
 function withKickers(sections, source, kickers = "pr") {
   if (kickers === false)
@@ -17645,11 +18576,18 @@ function inlineMarkdown(text) {
   return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
 }
 
-// src/ui/walkthrough-blocks.ts
-var GLYPH = {
-  go: icon("caretRight", { small: true }),
-  caret: icon("caretRight", { small: true })
+// src/ui/history.ts
+var HEIGHT2 = springMotion(SPRINGS.default);
+var GO = svg('<path d="M5 5h6v6M11 5l-6 6"/>');
+var TYPE_NAMES = {
+  commit: "Commit",
+  release: "Release",
+  deletion: "Deletion",
+  channel: "Channel switch",
+  audit: "Finding"
 };
+var typeName = (t) => TYPE_NAMES[t] ?? t.charAt(0).toUpperCase() + t.slice(1);
+var REACH = 8;
 var el = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
@@ -17661,112 +18599,625 @@ var text = (doc, tag, cls, value) => {
   n.textContent = value;
   return n;
 };
+function injectHistoryStyles(doc) {
+  if (doc.querySelector("style[data-knobs-history]"))
+    return;
+  const style = doc.createElement("style");
+  style.dataset.knobsHistory = "";
+  style.textContent = aliased(historyCss);
+  doc.head.append(style);
+}
+var when = (it) => it.kind === "span" ? `${formatRange(it.from, it.to, it.open)} · ${formatDays(it.to - it.from)}` : formatRange(it.from, it.to);
+function history(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const root = el(doc, "div", "knobs-history");
+  applyLook2(root, options);
+  injectHistoryStyles(doc);
+  root.tabIndex = 0;
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", options.label ?? "History");
+  root.setAttribute("aria-roledescription", "timeline");
+  const chart = el(doc, "div", "knobs-hy-chart");
+  const foot = el(doc, "div", "knobs-hy-foot");
+  const detail = el(doc, "div", "knobs-hy-detail");
+  detail.setAttribute("aria-live", "polite");
+  const tip = el(doc, "div", "knobs-hy-tip");
+  tip.setAttribute("aria-hidden", "true");
+  const tipTitle = el(doc, "div", "knobs-hy-tt");
+  const tipDate = el(doc, "div", "knobs-hy-td");
+  const tipLine = el(doc, "div", "knobs-hy-tl");
+  tip.append(tipTitle, tipDate, tipLine);
+  root.append(chart, foot, detail, tip);
+  container.append(root);
+  let model = normalizeHistory(options.data);
+  let selected = options.selected && model.items.has(options.selected) ? options.selected : null;
+  let disposed = false;
+  let quiet = quietEvents(model.events, options.marks ?? DEFAULT_MARKS);
+  let showAll = false;
+  const walked = () => showAll ? model.events : model.events.filter((e) => !quiet.has(e.id));
+  let nodes = new Map;
+  let tracks = new Map;
+  let over = null;
+  let hoverLine = null;
+  let selLine = null;
+  let scale = dayScale(model.from, model.to, 1);
+  let drawnWidth = -1;
+  let hovered = null;
+  let tipKey = "";
+  const fontOf = (n) => {
+    const c = win.getComputedStyle(n);
+    return `${c.fontStyle} ${c.fontWeight} ${c.fontSize} ${c.fontFamily}`;
+  };
+  let measureCtx;
+  const measure = (s, font) => {
+    if (measureCtx === undefined)
+      measureCtx = doc.createElement("canvas").getContext("2d");
+    if (!measureCtx)
+      return s.length * 6.4;
+    measureCtx.font = font;
+    return measureCtx.measureText(s).width;
+  };
+  function drawFoot() {
+    foot.textContent = "";
+    root.toggleAttribute("data-all", showAll);
+    if (quiet.size) {
+      const t = el(doc, "button", "knobs-hy-more");
+      t.type = "button";
+      t.setAttribute("aria-pressed", String(showAll));
+      t.textContent = `${showAll ? "Hide" : "Show"} ${quietLabel(model.events, quiet)}`;
+      t.addEventListener("click", () => {
+        showAll = !showAll;
+        if (!showAll && selected && quiet.has(selected))
+          select(null, true, true);
+        drawFoot();
+      });
+      foot.append(t);
+    }
+    if (model.inferred && model.verified) {
+      const legend = el(doc, "span", "knobs-hy-legend");
+      for (const [label, inferred] of [
+        ["Verified", false],
+        ["Inferred", true]
+      ]) {
+        const k = el(doc, "span", "knobs-hy-key");
+        const sw = el(doc, "span", "knobs-hy-swatch");
+        sw.dataset.tone = "dim";
+        if (inferred)
+          sw.dataset.inferred = "";
+        k.append(sw, text(doc, "span", "", label));
+        legend.append(k);
+      }
+      foot.append(legend);
+    }
+    foot.hidden = !foot.childElementCount;
+  }
+  function draw() {
+    const width = root.clientWidth;
+    drawnWidth = width;
+    const narrow = width > 0 && width < (options.narrow ?? 560);
+    root.toggleAttribute("data-narrow", narrow);
+    root.toggleAttribute("data-bands", model.bands.length > 0);
+    hideHover();
+    chart.textContent = "";
+    nodes = new Map;
+    tracks = new Map;
+    let gutter = 0;
+    if (!narrow) {
+      const probe = el(doc, "div", "knobs-hy-label");
+      chart.append(probe);
+      const font = fontOf(probe);
+      const gap = parseFloat(win.getComputedStyle(probe).marginRight) || 0;
+      probe.remove();
+      const longest = Math.max(0, ...model.lanes.map((l) => measure(l.label, font)));
+      gutter = Math.round(Math.min(Math.max(longest + gap + 2, 64), Math.max(96, width * 0.3), 200));
+    }
+    root.style.setProperty("--hy-gutter", `${gutter}px`);
+    const plotW = Math.max(1, width - gutter);
+    scale = dayScale(model.from, model.to, plotW);
+    const pct = (d) => `${(scale.f(d) * 100).toFixed(4)}%`;
+    const rows = ["auto"];
+    for (let i = 0;i < model.lanes.length; i++)
+      rows.push(...narrow ? ["auto", "var(--hy-lane)"] : ["var(--hy-lane)"]);
+    chart.style.gridTemplateRows = rows.join(" ");
+    const behind = el(doc, "div", "knobs-hy-layer");
+    behind.setAttribute("aria-hidden", "true");
+    for (const b of model.bands) {
+      const c = clipSpan(b.from, b.to, model.from, model.to);
+      if (!c)
+        continue;
+      const band = el(doc, "div", "knobs-hy-band");
+      band.style.left = pct(c.from);
+      band.style.width = pct(model.from + (c.to - c.from));
+      behind.append(band);
+    }
+    const ticks = monthTicks(model.from, model.to, plotW);
+    for (const t of ticks) {
+      const line = el(doc, "div", "knobs-hy-grid");
+      line.style.left = pct(t.day);
+      behind.append(line);
+    }
+    chart.append(behind);
+    const axis = el(doc, "div", "knobs-hy-axis");
+    axis.setAttribute("aria-hidden", "true");
+    const tickEls = ticks.map((t) => {
+      const n = text(doc, "span", "knobs-hy-tick", t.label);
+      n.style.left = pct(t.day);
+      axis.append(n);
+      return n;
+    });
+    const showToday = model.today >= model.from && model.today <= model.to;
+    const now = showToday ? text(doc, "span", "knobs-hy-now", "Today") : null;
+    if (now)
+      axis.append(now);
+    const room = bandRoom(model.bands, scale.x);
+    const bandEls = model.bands.map((b, i) => {
+      const n = text(doc, "span", "knobs-hy-blabel", b.label);
+      n.style.left = pct(Math.max(b.from, model.from));
+      n.style.maxWidth = `${Math.max(0, room[i])}px`;
+      axis.append(n);
+      return n;
+    });
+    chart.append(axis);
+    model.lanes.forEach((lane, i) => {
+      const row = narrow ? 2 + i * 2 : 2 + i;
+      const label = text(doc, "div", "knobs-hy-label", lane.label);
+      label.style.gridRow = String(row);
+      label.title = lane.label;
+      const track = el(doc, "div", "knobs-hy-track");
+      track.style.gridRow = String(narrow ? row + 1 : row);
+      track.dataset.lane = lane.id;
+      tracks.set(lane.id, track);
+      for (const s of lane.spans) {
+        const c = clipSpan(s.from, s.to, model.from, model.to);
+        if (!c)
+          continue;
+        const b = el(doc, "button", "knobs-hy-span");
+        b.type = "button";
+        b.tabIndex = -1;
+        b.dataset.id = s.id;
+        b.dataset.tone = s.tone;
+        if (s.inferred)
+          b.dataset.inferred = "";
+        if (c.clipStart)
+          b.dataset.clipStart = "";
+        if (c.clipEnd)
+          b.dataset.clipEnd = "";
+        b.style.left = pct(c.from);
+        b.style.width = pct(model.from + (c.to - c.from));
+        b.setAttribute("aria-label", `${s.title}, ${when(s)}`);
+        if (s.tags.length)
+          b.append(text(doc, "span", "knobs-hy-tag", s.tags[0]));
+        track.append(b);
+        nodes.set(s.id, b);
+      }
+      for (const e of lane.events) {
+        if (e.to < model.from || e.from > model.to)
+          continue;
+        const b = el(doc, "button", "knobs-hy-ev");
+        b.type = "button";
+        b.tabIndex = -1;
+        b.dataset.id = e.id;
+        b.dataset.tone = e.tone;
+        if (e.type)
+          b.dataset.type = e.type;
+        if (e.inferred)
+          b.dataset.inferred = "";
+        if (quiet.has(e.id))
+          b.dataset.quiet = "";
+        b.style.left = pct(Math.max(e.from, model.from));
+        if (e.to > e.from) {
+          b.dataset.range = "";
+          b.style.setProperty("--hy-w", `${scale.x(model.from + (e.to - e.from)).toFixed(2)}px`);
+        }
+        b.setAttribute("aria-label", `${when(e)}: ${e.title}`);
+        track.append(b);
+        nodes.set(e.id, b);
+      }
+      chart.append(label, track);
+    });
+    over = el(doc, "div", "knobs-hy-layer");
+    over.setAttribute("aria-hidden", "true");
+    if (showToday) {
+      const today = el(doc, "div", "knobs-hy-today");
+      today.style.left = pct(model.today);
+      over.append(today);
+    }
+    selLine = el(doc, "div", "knobs-hy-sel");
+    hoverLine = el(doc, "div", "knobs-hy-hover");
+    over.append(selLine, hoverLine);
+    chart.append(over);
+    const reserved = [];
+    if (now) {
+      const w = now.offsetWidth;
+      const x0 = Math.max(0, Math.min(plotW - w, scale.x(model.today) - w / 2));
+      now.style.left = `${x0}px`;
+      reserved.push({ x0, x1: x0 + w });
+    }
+    const fits = fitLabels(ticks.map((t, i) => ({ x: scale.x(t.day), w: tickEls[i].offsetWidth })), plotW, reserved);
+    tickEls.forEach((n, i) => n.hidden = !fits[i]);
+    for (const n of bandEls)
+      n.toggleAttribute("data-overflow", n.scrollWidth > n.clientWidth + 1);
+    for (const n of chart.querySelectorAll(".knobs-hy-label"))
+      n.toggleAttribute("data-overflow", n.scrollWidth > n.clientWidth + 1);
+    for (const lane of model.lanes) {
+      const spans = lane.spans.map((s) => ({ s, c: clipSpan(s.from, s.to, model.from, model.to) })).filter((x) => x.c).sort((a, b) => a.c.from - b.c.from);
+      spans.forEach(({ s, c }, i) => {
+        const b = nodes.get(s.id);
+        const tag = b?.querySelector(".knobs-hy-tag");
+        if (!b || !tag)
+          return;
+        const font = fontOf(tag);
+        const widths = s.tags.map((t) => measure(t, font));
+        const next = spans[i + 1]?.c;
+        const spanW = scale.x(c.to) - scale.x(c.from);
+        const after = (next ? scale.x(next.from) : plotW) - scale.x(c.to);
+        const fit = fitTag(widths, spanW, after);
+        tag.textContent = fit ? s.tags[fit.index] : s.tags[0] ?? "";
+        tag.dataset.place = fit ? fit.place : "none";
+      });
+    }
+    paintSelection();
+  }
+  const h = new Spring(0, HEIGHT2.omega, HEIGHT2.zeta, 0.25);
+  let goal = 0;
+  let content = null;
+  const loop = frameLoop(win, (dt) => {
+    h.step(dt);
+    const moving = !h.resting;
+    detail.style.height = moving ? `${Math.max(0, h.x).toFixed(2)}px` : goal > 0 ? "" : "0px";
+    detail.toggleAttribute("data-moving", moving);
+    return moving;
+  });
+  function buildDetail(it) {
+    const c = el(doc, "div", "knobs-hy-dc");
+    const meta = el(doc, "div", "knobs-hy-dmeta");
+    meta.append(text(doc, "time", "", when(it)));
+    const lane = model.lanes.find((l) => l.id === it.lane);
+    if (lane && (model.lanes.length > 1 || lane.id !== "code"))
+      meta.append(text(doc, "span", "", lane.label));
+    if (it.type)
+      meta.append(text(doc, "span", "", typeName(it.type)));
+    if (it.provenance || it.source) {
+      const p = text(doc, "span", "", [it.provenance, it.source].filter(Boolean).join(" · "));
+      if (it.inferred) {
+        p.dataset.tone = "warn";
+        p.title = "Worked out from behaviour, not seen in the record";
+      }
+      meta.append(p);
+    }
+    c.append(meta, text(doc, "div", "knobs-hy-dtitle", it.title));
+    if (it.detail) {
+      const p = el(doc, "p", "knobs-hy-dtext");
+      p.innerHTML = inlineMarkdown(it.detail);
+      c.append(p);
+    }
+    const foot = el(doc, "div", "knobs-hy-dfoot");
+    for (const e of it.evidence) {
+      const tag = text(doc, e.href ? "a" : "span", "knobs-hy-evidence", e.label);
+      if (tag instanceof HTMLAnchorElement && e.href) {
+        tag.href = e.href;
+        tag.target = "_blank";
+        tag.rel = "noreferrer";
+      }
+      foot.append(tag);
+    }
+    if (it.step && options.onJump) {
+      const go = el(doc, "button", "knobs-hy-jump");
+      go.type = "button";
+      go.append(text(doc, "span", "", "Go to step"));
+      go.insertAdjacentHTML("beforeend", GO);
+      const step = it.step;
+      go.addEventListener("click", () => options.onJump?.(step));
+      foot.append(go);
+    }
+    c.append(foot);
+    return c;
+  }
+  function showDetail(it, animate) {
+    const from = detail.offsetHeight;
+    const old = content;
+    const next = it ? buildDetail(it) : null;
+    if (old) {
+      if (animate) {
+        old.dataset.leave = "";
+        const drop = () => old.remove();
+        old.addEventListener("transitionend", drop, { once: true });
+        win.setTimeout(drop, 400);
+      } else
+        old.remove();
+    }
+    content = next;
+    if (next) {
+      detail.append(next);
+      if (animate) {
+        next.dataset.enter = "";
+        next.offsetHeight;
+        delete next.dataset.enter;
+      }
+    }
+    goal = next ? next.offsetHeight : 0;
+    if (!animate || reducedMotion(win)) {
+      loop.stop();
+      h.snap(goal);
+      detail.style.height = goal > 0 ? "" : "0px";
+      detail.removeAttribute("data-moving");
+      return;
+    }
+    if (h.resting)
+      h.snap(from);
+    h.set(goal);
+    loop.wake();
+  }
+  function paintSelection() {
+    for (const [id, n] of nodes)
+      n.toggleAttribute("data-selected", id === selected);
+    const it = selected ? model.items.get(selected) : undefined;
+    if (selLine) {
+      const on = it?.kind === "event";
+      selLine.toggleAttribute("data-on", on);
+      if (on)
+        selLine.style.left = `${(scale.f(it.from) * 100).toFixed(4)}%`;
+    }
+  }
+  function select(id, animate, notify) {
+    const next = id && model.items.has(id) ? id : null;
+    if (next === selected)
+      return;
+    selected = next;
+    paintSelection();
+    showDetail(next ? model.items.get(next) : null, animate);
+    if (notify)
+      options.onSelect?.(next);
+  }
+  function itemAt(e) {
+    if (!over)
+      return null;
+    const r = over.getBoundingClientRect();
+    if (!r.width)
+      return null;
+    const x = Math.max(0, Math.min(r.width, e.clientX - r.left));
+    const target = e.target instanceof Element ? e.target : null;
+    const hit = target?.closest("[data-id]");
+    if (hit && chart.contains(hit))
+      return { it: model.items.get(hit.dataset.id) ?? null, x };
+    const laneId = target?.closest(".knobs-hy-track")?.dataset.lane;
+    const lane = laneId ? model.lanes.find((l) => l.id === laneId) : undefined;
+    if (lane) {
+      const reach = REACH / r.width * (model.to - model.from);
+      const near = nearestEvent(lane.events, scale.day(x), reach);
+      if (near)
+        return { it: near, x };
+    }
+    return { it: null, x };
+  }
+  function hideHover() {
+    hoverLine?.removeAttribute("data-on");
+    tip.removeAttribute("data-on");
+    hovered?.removeAttribute("data-hover");
+    hovered = null;
+    tipKey = "";
+  }
+  function hover(e) {
+    const at = itemAt(e);
+    if (!at || !over || !hoverLine)
+      return hideHover();
+    const { it, x } = at;
+    const lineX = it?.kind === "event" ? scale.x(it.from) : x;
+    hoverLine.style.left = `${lineX.toFixed(2)}px`;
+    hoverLine.setAttribute("data-on", "");
+    const node = it ? nodes.get(it.id) ?? null : null;
+    if (node !== hovered) {
+      hovered?.removeAttribute("data-hover");
+      node?.setAttribute("data-hover", "");
+      hovered = node;
+    }
+    const key = it ? it.id : `d${Math.round(scale.day(x))}`;
+    if (key !== tipKey) {
+      tipKey = key;
+      tipTitle.textContent = it ? it.title : formatDay(Math.round(scale.day(x)));
+      tipDate.textContent = it ? [when(it), it.type ? typeName(it.type) : ""].filter(Boolean).join(" · ") : "";
+      tipDate.hidden = !it;
+      tipLine.textContent = it ? firstSentence(it.detail) : "";
+    }
+    const rr = root.getBoundingClientRect();
+    const or = over.getBoundingClientRect();
+    const laneId = it?.lane ?? (e.target instanceof Element ? e.target.closest(".knobs-hy-track")?.dataset.lane : undefined);
+    const lr = laneId && tracks.get(laneId)?.getBoundingClientRect() || or;
+    const tw = tip.offsetWidth;
+    const th = tip.offsetHeight;
+    const left = Math.max(0, Math.min(rr.width - tw, or.left - rr.left + lineX - tw / 2));
+    let top = lr.top - rr.top - th - 6;
+    if (top + rr.top < 0)
+      top = lr.bottom - rr.top + 6;
+    tip.style.transform = `translate3d(${Math.round(left)}px,${Math.round(top)}px,0)`;
+    tip.setAttribute("data-on", "");
+  }
+  chart.addEventListener("pointermove", (e) => {
+    if (e.pointerType === "touch")
+      return;
+    hover(e);
+  });
+  chart.addEventListener("pointerleave", hideHover);
+  chart.addEventListener("mousedown", (e) => {
+    if (!(e.target instanceof Element) || !e.target.closest("button"))
+      return;
+    e.preventDefault();
+    root.focus({ preventScroll: true });
+  });
+  chart.addEventListener("click", (e) => {
+    const at = itemAt(e);
+    const id = at?.it?.id ?? null;
+    select(id !== null && id === selected ? null : id, true, true);
+  });
+  root.addEventListener("keydown", (e) => {
+    const onChart = e.target instanceof Node && chart.contains(e.target);
+    if (e.target !== root && !onChart || e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    let next;
+    const order = walked();
+    const at = selected ? model.items.get(selected)?.from : undefined;
+    if (e.key === "ArrowRight")
+      next = stepEvent(order, selected, 1, at);
+    else if (e.key === "ArrowLeft")
+      next = stepEvent(order, selected, -1, at);
+    else if (e.key === "Home")
+      next = order[0] ?? null;
+    else if (e.key === "End")
+      next = order[order.length - 1] ?? null;
+    else if (e.key === "Escape" && selected)
+      next = null;
+    else if (e.key === "Enter" && selected) {
+      const step = model.items.get(selected)?.step;
+      if (!step || !options.onJump)
+        return;
+      options.onJump(step);
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    } else
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    hideHover();
+    select(next?.id ?? null, true, true);
+  });
+  let raf = 0;
+  const ro = new ResizeObserver(() => {
+    if (raf || disposed)
+      return;
+    raf = win.requestAnimationFrame(() => {
+      raf = 0;
+      if (!disposed && root.clientWidth !== drawnWidth)
+        draw();
+    });
+  });
+  ro.observe(root);
+  const restyle = () => draw();
+  root.addEventListener("knobs-restyle", restyle);
+  drawFoot();
+  draw();
+  detail.style.height = "0px";
+  if (selected)
+    showDetail(model.items.get(selected), false);
+  const dispose = () => {
+    if (disposed)
+      return;
+    disposed = true;
+    ro.disconnect();
+    if (raf)
+      win.cancelAnimationFrame(raf);
+    loop.stop();
+    root.removeEventListener("knobs-restyle", restyle);
+    root.remove();
+  };
+  return {
+    element: root,
+    get model() {
+      return model;
+    },
+    get selected() {
+      return selected;
+    },
+    select(id) {
+      select(id, true, false);
+    },
+    set(data) {
+      model = normalizeHistory(data);
+      const keep = selected && model.items.has(selected) ? selected : null;
+      selected = keep;
+      quiet = quietEvents(model.events, options.marks ?? DEFAULT_MARKS);
+      drawFoot();
+      draw();
+      showDetail(keep ? model.items.get(keep) : null, false);
+    },
+    focus() {
+      root.focus();
+    },
+    dispose,
+    destroy: dispose
+  };
+}
+
+// src/ui/walkthrough-blocks.ts
+init_icons();
+init_look();
+init_selection_pill();
+var GLYPH = {
+  caret: icon("caretRight", { small: true })
+};
+var el2 = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+var text2 = (doc, tag, cls, value) => {
+  const n = el2(doc, tag, cls);
+  n.textContent = value;
+  return n;
+};
 var prose = (doc, tag, cls, value) => {
-  const n = el(doc, tag, cls);
+  const n = el2(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);
+    return text2(doc, "span", cls, label);
+  const a = text2(doc, "a", cls, label);
   a.href = href;
   a.target = "_blank";
   a.rel = "noreferrer";
   return a;
 };
-function stepButton(doc, ref, steps) {
+function rowLink(row, ref, steps) {
   const s = ref && steps?.find(ref);
   if (!s || !steps)
-    return null;
-  const b = el(doc, "button", "knobs-wt-steplink");
-  b.innerHTML = GLYPH.go;
-  b.type = "button";
-  b.title = `Go to “${s.title}”`;
-  b.setAttribute("aria-label", b.title);
-  b.addEventListener("click", (e) => {
-    e.stopPropagation();
+    return;
+  const doc = row.ownerDocument;
+  row.dataset.go = "";
+  row.tabIndex = 0;
+  row.title = `Go to “${plainMarkdown(s.title)}”`;
+  row.addEventListener("click", (e) => {
+    if (e.target?.closest("a,button"))
+      return;
+    if (doc.getSelection()?.toString())
+      return;
+    steps.go(s.key);
+  });
+  row.addEventListener("keydown", (e) => {
+    if (e.target !== row || e.key !== "Enter" && e.key !== " ")
+      return;
+    e.preventDefault();
     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;
+  const h = history(host, {
+    data: m.data,
+    ...m.label ? { label: m.label } : {},
+    ...m.marks ? { marks: m.marks } : {},
+    ...steps ? {
+      onJump: (ref) => {
+        const s = steps.find(ref);
+        if (s)
+          steps.go(s.key);
+      }
+    } : {}
+  });
+  return {
+    dispose: () => h.dispose(),
+    context: () => ({ kind: "history" })
+  };
 }
 function mountStack(host, m, steps) {
   const doc = host.ownerDocument;
   const layout = stackLayout(m);
-  const root = el(doc, "div", "knobs-wt-stack");
+  const root = el2(doc, "div", "knobs-wt-stack");
   root.toggleAttribute("data-flat", layout.flat);
   const lane = (kind) => {
-    const s = el(doc, "span", "knobs-wt-lane");
+    const s = el2(doc, "span", "knobs-wt-lane");
     s.dataset.rail = kind;
     return s;
   };
@@ -17777,19 +19228,19 @@ function mountStack(host, m, steps) {
   };
   const from = layout.trunk ? 0 : 1;
   if (layout.trunk && layout.rows.length) {
-    const row = el(doc, "div", "knobs-wt-srow");
+    const row = el2(doc, "div", "knobs-wt-srow");
     row.dataset.trunk = "";
-    const lanes = el(doc, "span", "knobs-wt-lanes");
+    const lanes = el2(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));
+    row.append(lanes, text2(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");
+    const row = el2(doc, "div", "knobs-wt-srow");
     if (!layout.flat) {
-      const lanes = el(doc, "span", "knobs-wt-lanes");
+      const lanes = el2(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"));
@@ -17798,24 +19249,21 @@ function mountStack(host, m, steps) {
       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");
+    const main = el2(doc, "div", "knobs-wt-smain");
+    const line = el2(doc, "div", "knobs-wt-sline");
     if (it.order)
-      line.append(text(doc, "span", "knobs-wt-sord", it.order));
+      line.append(text2(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);
+      const title = text2(doc, "button", "knobs-wt-stitle", it.title);
       title.type = "button";
-      title.title = `Go to “${target.title}”`;
+      title.title = `Go to “${plainMarkdown(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;
@@ -17826,14 +19274,14 @@ function mountStack(host, m, steps) {
         steps.go(target.key);
       });
     } else
-      line.append(text(doc, "span", "knobs-wt-stitle", it.title));
+      line.append(text2(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");
+    const meta = el2(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));
+      meta.append(text2(doc, "span", "knobs-wt-sbranch", branch));
     }
     if (it.delta !== undefined)
       meta.append(delta(doc, it.delta));
@@ -17841,7 +19289,7 @@ function mountStack(host, m, steps) {
       main.append(meta);
     row.append(main);
     if (it.status) {
-      const chip = text(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
+      const chip = text2(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
       chip.dataset.tone = it.tone ?? "dim";
       row.append(chip);
     }
@@ -17851,40 +19299,38 @@ function mountStack(host, m, steps) {
   return { dispose: () => root.remove(), context: () => ({ kind: "stack" }) };
 }
 function delta(doc, d) {
-  const s = el(doc, "span", "knobs-wt-delta");
+  const s = el2(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.append(text2(doc, "span", "knobs-wt-add", `+${n(d.add)}`));
+  s.append(text2(doc, "span", "knobs-wt-del", `−${n(d.del)}`));
   s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
   return s;
 }
-function cellContent(doc, into, cell, steps) {
+function cellContent(doc, into, cell) {
   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;
+    const inner = cell.code ? text2(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);
+      content = inner ?? text2(doc, "span", "", cell.text);
     if (cell.tone) {
       content.classList.add("knobs-wt-ctone");
       content.dataset.tone = cell.tone;
     }
   }
   into.append(content);
-  const go = stepButton(doc, cell.step, steps);
-  if (go)
-    into.append(go);
 }
+var rowStep = (r, columns) => columns.map((c) => r[c.key]?.step).find((step) => step !== undefined);
 var cellAttrs = (td, c) => {
   td.dataset.align = c.align;
   if (c.mono)
@@ -17893,83 +19339,85 @@ var cellAttrs = (td, c) => {
 function mountTable(host, m, steps) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
-  const box = el(doc, "div", "knobs-wt-tablebox");
-  const scroller = el(doc, "div", "knobs-wt-table");
-  const table = el(doc, "table");
+  const box = el2(doc, "div", "knobs-wt-tablebox");
+  const scroller = el2(doc, "div", "knobs-wt-table");
+  const table = el2(doc, "table");
   if (m.caption)
-    table.append(text(doc, "caption", "", m.caption));
-  const head = el(doc, "thead");
-  const hr = el(doc, "tr");
+    table.append(text2(doc, "caption", "", m.caption));
+  const head = el2(doc, "thead");
+  const hr = el2(doc, "tr");
   for (const c of m.columns) {
-    const th = text(doc, "th", "", c.label);
+    const th = text2(doc, "th", "", c.label);
     th.scope = "col";
     th.dataset.align = c.align;
     hr.append(th);
   }
   head.append(hr);
-  const body = el(doc, "tbody");
+  const body = el2(doc, "tbody");
   for (const r of m.rows) {
-    const tr = el(doc, "tr");
+    const tr = el2(doc, "tr");
     for (const c of m.columns) {
-      const td = el(doc, "td");
+      const td = el2(doc, "td");
       cellAttrs(td, c);
       const cell = r[c.key];
       if (cell) {
         if (cell.text.length > 40 && !c.mono && !cell.code)
           td.dataset.long = "";
-        cellContent(doc, td, cell, steps);
+        cellContent(doc, td, cell);
       }
       tr.append(td);
     }
+    rowLink(tr, rowStep(r, m.columns), steps);
     body.append(tr);
   }
   table.append(head, body);
   scroller.append(table);
-  const stack = el(doc, "div", "knobs-wt-tstack");
+  const stack = el2(doc, "div", "knobs-wt-tstack");
   stack.setAttribute("role", "list");
   if (m.caption)
     stack.setAttribute("aria-label", m.caption);
   const primary = m.columns.find((c) => c.key === m.primary) ?? m.columns[0];
   for (const r of m.rows) {
-    const item = el(doc, "div", "knobs-wt-trow");
+    const item = el2(doc, "div", "knobs-wt-trow");
     item.setAttribute("role", "listitem");
-    const title = el(doc, "div", "knobs-wt-ttitle");
+    const title = el2(doc, "div", "knobs-wt-ttitle");
     if (primary) {
       cellAttrs(title, primary);
       const cell = r[primary.key];
       if (cell)
-        cellContent(doc, title, cell, steps);
+        cellContent(doc, title, cell);
     }
-    const line = el(doc, "div", "knobs-wt-tline");
+    const line = el2(doc, "div", "knobs-wt-tline");
     line.append(title);
-    const badges = el(doc, "div", "knobs-wt-tbadges");
+    const badges = el2(doc, "div", "knobs-wt-tbadges");
     for (const c of m.columns) {
       const cell = r[c.key];
       if (c !== primary && cell?.badge)
-        cellContent(doc, badges, cell, steps);
+        cellContent(doc, badges, cell);
     }
     if (badges.childNodes.length)
       line.append(badges);
     item.append(line);
-    const terms = el(doc, "dl", "knobs-wt-tterms");
+    const terms = el2(doc, "dl", "knobs-wt-tterms");
     for (const c of m.columns) {
       if (c === primary)
         continue;
       const cell = r[c.key];
       if (!cell || cell.text === "" || cell.badge)
         continue;
-      const dd = el(doc, "dd");
+      const dd = el2(doc, "dd");
       cellAttrs(dd, c);
       dd.removeAttribute("data-align");
-      cellContent(doc, dd, cell, steps);
-      terms.append(text(doc, "dt", "", c.label), dd);
+      cellContent(doc, dd, cell);
+      terms.append(text2(doc, "dt", "", c.label), dd);
     }
     if (terms.childNodes.length)
       item.append(terms);
+    rowLink(item, rowStep(r, m.columns), steps);
     stack.append(item);
   }
   if (m.caption)
-    stack.append(text(doc, "p", "knobs-wt-tcaption", m.caption));
+    stack.append(text2(doc, "p", "knobs-wt-tcaption", m.caption));
   box.append(scroller, stack);
   host.append(box);
   let natural = 0;
@@ -18023,16 +19471,16 @@ function mountTable(host, m, steps) {
 }
 function chapterPills(host, chapters, io) {
   const doc = host.ownerDocument;
-  const list = el(doc, "div", "knobs-wt-chapters");
+  const list = el2(doc, "div", "knobs-wt-chapters");
   list.setAttribute("role", "group");
   list.setAttribute("aria-label", "Chapters");
   let at = -2;
   const rows = chapters.map((c, i) => {
-    const b = el(doc, "button", "knobs-wt-chapter");
+    const b = el2(doc, "button", "knobs-wt-chapter");
     b.type = "button";
-    b.append(text(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
-    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
-    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
+    b.append(text2(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
+    b.append(text2(doc, "span", "knobs-wt-chapter-label", c.label));
+    b.append(text2(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
     b.addEventListener("click", () => {
       io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
       io.seek(c.start);
@@ -18070,15 +19518,13 @@ function disclosure(host, options) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
   let open = options.open === true;
-  const root = el(doc, "div", "knobs-wt-disc");
-  const toggle = el(doc, "button", "knobs-wt-disc-toggle");
+  const root = el2(doc, "div", "knobs-wt-disc");
+  const toggle = el2(doc, "button", "knobs-wt-disc-toggle");
   toggle.type = "button";
   toggle.innerHTML = GLYPH.caret;
-  toggle.append(text(doc, "span", "", options.label));
-  if (options.count !== undefined)
-    toggle.append(text(doc, "span", "knobs-wt-disc-count", String(options.count)));
-  const viewport = el(doc, "div", "knobs-wt-disc-body");
-  const content = el(doc, "div", "knobs-wt-disc-content");
+  toggle.append(text2(doc, "span", "", options.label));
+  const viewport = el2(doc, "div", "knobs-wt-disc-body");
+  const content = el2(doc, "div", "knobs-wt-disc-content");
   content.append(options.content);
   viewport.append(content);
   root.append(toggle, viewport);
@@ -18090,7 +19536,9 @@ function disclosure(host, options) {
     const k = full > 0 ? Math.max(0, Math.min(1, h.x / full)) : open ? 1 : 0;
     viewport.style.height = !moving && open ? "" : `${Math.max(0, h.x).toFixed(2)}px`;
     viewport.toggleAttribute("data-moving", moving);
-    content.style.opacity = (open ? Math.min(1, k * 1.25) : Math.max(0, k * 1.5 - 0.5)).toFixed(3);
+    const o = open ? Math.min(1, k * 1.25) : Math.max(0, k * 1.5 - 0.5);
+    content.style.opacity = o.toFixed(3);
+    content.style.filter = o >= 1 ? "" : `blur(${((1 - o) * 3).toFixed(2)}px)`;
   };
   const loop = frameLoop(win, (dt) => {
     h.step(dt);
@@ -18126,6 +19574,7 @@ function disclosure(host, options) {
         h.snap(open ? full : 0);
         viewport.style.height = open ? "" : "0px";
         content.style.opacity = open ? "1" : "0";
+        content.style.filter = "";
         return;
       }
       if (h.resting)
@@ -18142,10 +19591,79 @@ function disclosure(host, options) {
   toggle.addEventListener("click", () => api.toggle());
   return api;
 }
+var PR_PATHS = {
+  pull: "M104,64A32,32,0,1,0,64,95v66a32,32,0,1,0,16,0V95A32.06,32.06,0,0,0,104,64ZM56,64A16,16,0,1,1,72,80,16,16,0,0,1,56,64ZM88,192a16,16,0,1,1-16-16A16,16,0,0,1,88,192Zm120-31V110.63a23.85,23.85,0,0,0-7-17L163.31,56H192a8,8,0,0,0,0-16H144a8,8,0,0,0-8,8V96a8,8,0,0,0,16,0V67.31L189.66,105a8,8,0,0,1,2.34,5.66V161a32,32,0,1,0,16,0Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,200,208Z",
+  merge: "M208,112a32.05,32.05,0,0,0-30.69,23l-42.21-6a8,8,0,0,1-4.95-2.71L94.43,84.55A32,32,0,1,0,72,87v82a32,32,0,1,0,16,0V101.63l30,35a24,24,0,0,0,14.83,8.14l44,6.28A32,32,0,1,0,208,112ZM64,56A16,16,0,1,1,80,72,16,16,0,0,1,64,56ZM96,200a16,16,0,1,1-16-16A16,16,0,0,1,96,200Zm112-40a16,16,0,1,1,16-16A16,16,0,0,1,208,160Z"
+};
+var prGlyph = (merged) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="12" height="12" fill="currentColor" aria-hidden="true" focusable="false"><path d="${merged ? PR_PATHS.merge : PR_PATHS.pull}"/></svg>`;
+var PR_STATE = { merged: "Merged", open: "Open", draft: "Draft", closed: "Closed" };
+function prChip(doc, n, pr) {
+  const chip = el2(doc, pr.href ? "a" : "span", "knobs-wt-pr");
+  if (pr.href) {
+    chip.setAttribute("href", pr.href);
+    chip.setAttribute("target", "_blank");
+    chip.setAttribute("rel", "noreferrer");
+  }
+  if (pr.state)
+    chip.dataset.state = pr.state;
+  chip.innerHTML = prGlyph(pr.state === "merged");
+  chip.append(text2(doc, "span", "", `#${n}`));
+  const tip = [`#${n}`, pr.title, pr.state ? PR_STATE[pr.state] : ""].filter(Boolean).join(" · ");
+  chip.title = tip;
+  chip.setAttribute("aria-label", `Pull request ${tip}`);
+  return chip;
+}
+var PR_URL = /^https?:\/\/[^/]+\/.+\/(?:pull|merge_requests)\/(\d+)\/?(?:[?#].*)?$/;
+var PR_REF = /(^|[^\w&/#])#(\d{3,7})\b/g;
+function linkPRs(root, find) {
+  const doc = root.ownerDocument;
+  for (const a of Array.from(root.querySelectorAll("a[href]"))) {
+    if (a.classList.contains("knobs-wt-pr") || a.closest(".knobs-wt-slot,button"))
+      continue;
+    const n = PR_URL.exec(a.getAttribute("href") ?? "")?.[1];
+    const words = a.textContent?.trim() ?? "";
+    if (!n || !(words === `#${n}` || words === n || words === a.getAttribute("href")))
+      continue;
+    a.replaceWith(prChip(doc, n, { href: a.href, ...find(n) }));
+  }
+  const walker = doc.createTreeWalker(root, 5);
+  const hits = [];
+  for (let t = walker.nextNode();t; t = walker.nextNode()) {
+    if (t.nodeType !== 3)
+      continue;
+    const p = t.parentElement;
+    if (!p || p.closest("a,code,pre,button,.knobs-wt-slot,.knobs-wt-pr"))
+      continue;
+    PR_REF.lastIndex = 0;
+    if (PR_REF.test(t.nodeValue ?? ""))
+      hits.push(t);
+  }
+  for (const t of hits) {
+    const value = t.nodeValue ?? "";
+    const frag = doc.createDocumentFragment();
+    let last = 0;
+    let changed = false;
+    PR_REF.lastIndex = 0;
+    for (let m = PR_REF.exec(value);m; m = PR_REF.exec(value)) {
+      const pr = find(m[2]);
+      if (!pr)
+        continue;
+      const at = m.index + m[1].length;
+      frag.append(value.slice(last, at), prChip(doc, m[2], pr));
+      last = at + m[2].length + 1;
+      changed = true;
+    }
+    if (!changed)
+      continue;
+    frag.append(value.slice(last));
+    t.replaceWith(frag);
+  }
+}
 
 // src/ui/walkthrough-media.ts
 init_compare_model();
 init_glide();
+init_motion();
 init_icons();
 init_look();
 
@@ -18158,8 +19676,9 @@ var quick = springCss(FADE);
 var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)";
 var walkthroughCss = `
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
+.knobs-ui:is(.knobs-walkthrough,.knobs-wt-slot){--k-glass:0;--k-glow:0;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms}
 .knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;--kw-state:${state.easing};--kw-state-ms:${state.duration}ms;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms;
-  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,680px);--kw-rail-w:220px;--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
+  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-rail-gap:calc(var(--_k-space-group) + var(--_k-space-column) / 1.5);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
   --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-under:var(--_k-bg-page);--kw-ink:var(--k-walkthrough-ink,#ff375f);--kw-strong:var(--_k-weight-label);
   container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;text-align:left;
   letter-spacing:normal;-webkit-font-smoothing:antialiased}
@@ -18172,44 +19691,57 @@ var walkthroughCss = `
 :where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-row,button.knobs-wt-stitle,.knobs-wt-chapter,.knobs-wt-disc-toggle){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: a readable column, centred, with a slim contents rail beside it (right by default);
-   one column where it's narrow ——— */
-.knobs-wt-layout{display:grid;grid-template-columns:minmax(0,var(--kw-width)) var(--kw-rail-w);justify-content:center;gap:var(--_k-space-column);align-items:start}
+/* ——— layout: the contents rail sticky at the left edge (right if asked), and the column centred
+   in the room beside it, up to --kw-width: media take the column, prose stops at the measure.
+   One column where it's narrow ——— */
+.knobs-wt-layout{display:grid;grid-template-columns:var(--kw-rail-w) minmax(0,1fr);gap:var(--kw-rail-gap);align-items:start}
+.knobs-walkthrough[data-rail="right"] .knobs-wt-layout{grid-template-columns:minmax(0,1fr) var(--kw-rail-w)}
 .knobs-walkthrough[data-rail="right"] .knobs-wt-main{grid-column:1;grid-row:1}
 .knobs-walkthrough[data-rail="right"] .knobs-wt-rail{grid-column:2;grid-row:1}
-.knobs-walkthrough[data-rail="left"] .knobs-wt-layout{grid-template-columns:var(--kw-rail-w) minmax(0,var(--kw-width))}
-.knobs-walkthrough[data-rail="none"] .knobs-wt-layout{grid-template-columns:minmax(0,var(--kw-width))}
-.knobs-wt-main{display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0;padding-bottom:12px}
+.knobs-walkthrough[data-rail="none"] .knobs-wt-layout{grid-template-columns:minmax(0,1fr)}
+.knobs-wt-main{justify-self:center;width:100%;max-width:var(--kw-width);display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0;padding-bottom:12px}
 /* The intro, the updates and each section: a section's room apart, the hairline in the middle. */
 .knobs-wt-flow{display:flex;flex-direction:column;gap:calc(var(--_k-space-section) / 2);min-width:0}
 .knobs-wt-flow>*+*{padding-top:calc(var(--_k-space-section) / 2);box-shadow:inset 0 1px 0 var(--_k-border-subtle)}
-@container knobs-wt (max-width:940px){.knobs-walkthrough .knobs-wt-layout{grid-template-columns:minmax(0,1fr);gap:var(--_k-space-title)}
+@container knobs-wt (max-width:960px){.knobs-walkthrough[data-rail] .knobs-wt-layout{grid-template-columns:minmax(0,1fr);gap:var(--_k-space-title)}
   .knobs-walkthrough[data-rail] .knobs-wt-layout>*{grid-column:auto;grid-row:auto}}
 
 /* ——— one line of facts: small, faint, joined by ·, its trailing edge fading ——— */
 .knobs-wt-metaline{display:flex;align-items:baseline;gap:var(--_k-space-inside);min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3);${fade2}}
 .knobs-wt-metaline>*{flex:none}
 .knobs-wt-metaline>*+*::before{content:"·";margin-right:var(--_k-space-inside);color:var(--_k-fg-3)}
-.knobs-walkthrough .knobs-wt-metaline a{display:inline-flex;align-items:baseline;color:inherit;text-decoration:none;transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-walkthrough .knobs-wt-metaline a:hover{color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-walkthrough .knobs-wt-metaline a:not(.knobs-wt-pr){display:inline-flex;align-items:baseline;color:inherit;text-decoration:none;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-walkthrough .knobs-wt-metaline a:not(.knobs-wt-pr):hover{color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-wt-metaline svg{align-self:center;width:12px;height:12px;margin-left:2px}
+/* A pull request: a small chip, its state's icon and number in a quiet tint of the state (open
+   the success hue, merged the violet series, draft and closed neutral), its title on hover. */
+.knobs-ui .knobs-wt-pr{--kw-pr:var(--_k-fg-2);display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 5px 0 4px;margin:0 1px;border-radius:calc(var(--_k-radius) / 2);vertical-align:1px;
+  background:color-mix(in oklch,var(--kw-pr) 12%,transparent);color:var(--kw-pr);font:var(--_k-weight-label) var(--_k-type-small)/1 var(--_k-font);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-pr[data-state="open"]{--kw-pr:color-mix(in oklch,var(--_k-ok) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-pr[data-state="merged"]{--kw-pr:color-mix(in oklch,var(--_k-series-5) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-pr:is([data-state="draft"],[data-state="closed"]){--kw-pr:var(--_k-fg-3)}
+.knobs-ui a.knobs-wt-pr:is(:hover,:focus-visible){background:color-mix(in oklch,var(--kw-pr) 22%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-pr svg{flex:none}
+.knobs-wt-metaline .knobs-wt-pr{align-self:center;margin:0}
 .knobs-wt-kicker-lead{color:var(--_k-fg);font-weight:var(--kw-strong)}
 .knobs-wt-metaline [data-status="on"]{color:var(--_k-fg)}
 .knobs-wt-metaline [data-status="warn"]{color:var(--_k-warn)}
 
 /* ——— the page's head ——— */
 .knobs-wt-head{display:flex;flex-direction:column;gap:var(--_k-space-title)}
-.knobs-wt-title{font-size:var(--_k-type-title)!important;line-height:var(--_k-leading-title);font-weight:var(--kw-strong)!important;text-wrap:balance}
+.knobs-wt-title{font-size:var(--_k-type-heading)!important;line-height:var(--_k-leading-heading);font-weight:var(--kw-strong)!important;text-wrap:balance}
 .knobs-wt-summary{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
 .knobs-wt-meta{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title);color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
 .knobs-wt-meta>span{display:inline-flex;gap:var(--_k-space-inside);white-space:nowrap}
 .knobs-wt-meta b{font-weight:var(--_k-weight);color:var(--_k-fg-2);font-family:var(--_k-mono)}
 
-/* ——— a section: a PR or topic. Its kicker leads the meta line; its title outranks the page's ——— */
+/* ——— a section: a PR or topic. Its kicker leads the meta line, its title under it (16/24, under
+   the page's 20/28), both on the column's edge ——— */
 .knobs-wt-section{display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0}
 .knobs-wt-sintro{display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0}
 .knobs-wt-shead{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0;scroll-margin-top:16px}
-.knobs-wt-heading{font-size:var(--_k-type-heading)!important;line-height:var(--_k-leading-heading);font-weight:var(--kw-strong)!important;letter-spacing:-.01em!important;text-wrap:balance}
+.knobs-wt-heading{font-size:var(--_k-type-title)!important;line-height:var(--_k-leading-title);font-weight:var(--kw-strong)!important;text-wrap:balance}
 .knobs-wt-ssum{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
 .knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:var(--_k-round);font-size:var(--_k-type-small);font-weight:var(--kw-strong);white-space:nowrap;
   --kw-tone:var(--_k-fg-2);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
@@ -18240,7 +19772,6 @@ var walkthroughCss = `
 .knobs-wt-feed{display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0;scroll-margin-top:16px}
 .knobs-wt-feed-head{display:flex;align-items:baseline;gap:var(--_k-space-sibling)}
 .knobs-wt-feed-title{font-weight:var(--kw-strong)!important}
-.knobs-wt-feed-count{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
 .knobs-wt-feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0}
 .knobs-wt-fi{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0}
 .knobs-wt-fi+.knobs-wt-fi::before{content:"";position:absolute;left:0;right:0;top:calc(var(--_k-space-group) / -2);height:1px;background:var(--_k-border-subtle)}
@@ -18251,10 +19782,6 @@ var walkthroughCss = `
 :where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;margin:0;padding:0;cursor:pointer;outline:none;
   transition:color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-:where(.knobs-ui) .knobs-wt-steplink{all:revert;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 2px;padding:0;vertical-align:-5px;border:0;
-  border-radius:calc(var(--_k-radius) / 2);background:transparent;color:var(--_k-fg-3);cursor:pointer;outline:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-steplink:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-wt-steplink svg{width:12px;height:12px}
 
 /* ——— a disclosure: a small faint toggle with a caret, no fill. The body's height springs (in
    script) and its content fades in place, top-anchored, under a soft bottom mask ——— */
@@ -18265,11 +19792,12 @@ var walkthroughCss = `
 .knobs-ui .knobs-wt-disc-toggle:focus-visible{box-shadow:0 0 0 2px var(--_k-focus)}
 .knobs-wt-disc-toggle svg{flex:none;width:12px;height:12px;transition:rotate var(--kw-state-ms) var(--kw-state)}
 .knobs-wt-disc[data-open]>.knobs-wt-disc-toggle svg{rotate:90deg}
-.knobs-wt-disc-count{color:var(--_k-fg-3)}
 .knobs-wt-disc-body{overflow:hidden}
 .knobs-wt-disc[data-open]>.knobs-wt-disc-body:not([data-moving]){overflow:visible}
 .knobs-wt-disc-body[data-moving]{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
 .knobs-wt-disc-content{padding-top:var(--_k-space-inside)}
+/* "More" under a caption or summary: the rest of its words, in the same voice. */
+.knobs-wt-more-text{display:flex;flex-direction:column;gap:var(--_k-space-sibling);max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
 /* A trail sits on the toggle's label edge: faint lines, the time trailing. */
 .knobs-wt-trail{display:flex;flex-direction:column;list-style:none;padding:0 0 0 calc(12px + var(--_k-space-inside));font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3);min-width:0}
 .knobs-wt-trail li{display:flex;align-items:baseline;gap:var(--_k-space-sibling);min-width:0;white-space:nowrap}
@@ -18387,32 +19915,28 @@ var walkthroughCss = `
 .knobs-wt-ocap{color:var(--_k-fg-2);max-width:var(--kw-measure)}
 
 /* ——— the rail: progress, contents, export ——— */
-.knobs-wt-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:var(--_k-space-title);max-height:calc(100vh - 32px);min-height:0;font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
+.knobs-wt-rail{position:sticky;top:var(--_k-pad-page);display:flex;flex-direction:column;gap:var(--_k-space-title);max-height:calc(100vh - var(--_k-pad-page) * 2);min-height:0;font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
 .knobs-wt-progress{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
 .knobs-wt-count{display:flex;align-items:baseline;justify-content:space-between;color:var(--_k-fg-2)}
 .knobs-wt-count b{color:var(--_k-fg);font-weight:var(--kw-strong)}
 .knobs-wt-bar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--_k-fill)}
 .knobs-wt-fill{position:absolute;inset:0;border-radius:inherit;background:var(--_k-accent);transform-origin:0 50%;transform:scaleX(var(--kw-done,0))}
 .knobs-walkthrough[data-settled] .knobs-wt-fill{transition:transform var(--kw-calm-ms) var(--kw-calm)}
-/* The contents: rows centred on one spine, title rows (32 high, the control radius) and the
-   steps under them (20 high, half of it), bled out so their text sits on the rail's edge; the
-   selection pill slides to the current step, and base rows never brighten for being current. */
+/* The contents: every row on one text edge and in one colour, title rows (32 high, the control
+   radius) and the steps under them (20 high, half of it), bled out so their text sits on the
+   rail's edge; the selection pill slides to the current step, and base rows never brighten. */
 .knobs-wt-toc{position:relative;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:var(--_k-space-sibling);margin:0 calc(var(--_k-space-sibling) * -1);padding:0 0 8px}
 .knobs-wt-toc::-webkit-scrollbar{display:none}
 .knobs-wt-toc-group{display:flex;flex-direction:column;min-width:0}
-.knobs-ui .knobs-wt-toc-row{position:relative;display:grid;grid-template-columns:var(--kw-toc-n,0px) minmax(0,1fr) auto;column-gap:var(--_k-space-sibling);align-items:center;flex:none;width:100%;height:32px;
-  padding:0 var(--_k-space-sibling);border-radius:var(--_k-radius);color:var(--_k-fg-2);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--kw-strong);text-align:left;white-space:nowrap;cursor:pointer;
+.knobs-ui .knobs-wt-toc-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--_k-space-sibling);align-items:center;flex:none;width:100%;height:32px;
+  padding:0 var(--_k-space-sibling);border-radius:var(--_k-radius);color:var(--_k-fg-2);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight);text-align:left;white-space:nowrap;cursor:pointer;
   transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-toc-sub{height:20px;border-radius:calc(var(--_k-radius) / 2);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight);color:var(--_k-fg-3)}
-.knobs-wt-toc[data-bare] .knobs-wt-toc-row{grid-template-columns:minmax(0,1fr) auto}
-.knobs-wt-toc[data-bare] .knobs-wt-toc-n{display:none}
+.knobs-ui .knobs-wt-toc-sub{height:20px;border-radius:calc(var(--_k-radius) / 2);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight)}
 .knobs-ui .knobs-wt-toc-row:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-ui .knobs-wt-toc-sub:is(:hover,:focus-visible){color:var(--_k-fg-2)}
 .knobs-ui .knobs-wt-toc-row:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
-.knobs-wt-toc-n,.knobs-wt-toc-end{display:flex;align-items:center;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight);color:var(--_k-fg-3)}
-.knobs-wt-toc-row[data-active] .knobs-wt-toc-n{color:var(--_k-fg-2)}
+.knobs-wt-toc-end{display:flex;align-items:center;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight);color:var(--_k-fg-3)}
 .knobs-wt-toc-label{min-width:0;overflow:hidden;${fade2}}
-.knobs-pick-copy .knobs-wt-toc-n,.knobs-pick-copy .knobs-wt-toc-end{color:var(--_k-fg-2)}
+.knobs-pick-copy .knobs-wt-toc-end{color:var(--_k-fg-2)}
 /* A step's state: an open ring, a filled dot once answered, nothing to answer a faint ring. */
 .knobs-wt-toc-glyph{--kw-tone:var(--_k-fg-3);display:block;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--kw-tone);
   transition:background var(--kw-snappy-ms) var(--kw-snappy),box-shadow var(--kw-snappy-ms) var(--kw-snappy)}
@@ -18427,10 +19951,12 @@ var walkthroughCss = `
 .knobs-ui .knobs-wt-btn[data-primary]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
 .knobs-wt-keys{color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
 .knobs-wt-keys kbd{font:inherit;color:var(--_k-fg-2)}
-/* Narrow: the rail becomes a bar along the top, with the progress and the export only. */
-@container knobs-wt (max-width:940px){
+/* Narrow: the contents go; with review on, the rail becomes a bar along the top with the
+   progress and the export. */
+@container knobs-wt (max-width:960px){
   .knobs-wt-rail{z-index:4;flex-direction:row;align-items:center;gap:var(--_k-space-title);max-height:none;margin:0 calc(var(--_k-pad-page) * -1);padding:8px var(--_k-pad-page);top:0;background:var(--_k-bg-page)}
   .knobs-wt-progress{flex:1}.knobs-wt-toc,.knobs-wt-keys{display:none}
+  .knobs-walkthrough:not([data-review]) .knobs-wt-rail{display:none}
   .knobs-wt-step,.knobs-wt-shead,.knobs-wt-feed{scroll-margin-top:60px}
 }
 
@@ -18440,9 +19966,18 @@ var walkthroughCss = `
    well for hairlines, so nothing draws a fill and a ring of its own there ——— */
 .knobs-ui.knobs-wt-slot{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);
   font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;--kw-measure:var(--k-walkthrough-measure,68ch);
-  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info))}
-.knobs-wt-slot-label{display:block;font:var(--_k-weight-label) var(--_k-type-label)/var(--_k-leading-label) var(--_k-font);color:var(--_k-fg-2)}
+  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));--kw-frame-r:var(--_k-radius-panel)}
+.knobs-surface .knobs-wt-slot{--kw-frame-r:calc(var(--_k-radius-panel) - 4px)}
+/* A slot's label: sentence case as written, small and faint, never a heading. */
+.knobs-wt-slot-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:normal;text-transform:none;color:var(--_k-fg-3);${fade2}}
 .knobs-wt-body{min-width:0}
+/* Media mounting after the first paint, and a picture still decoding, come into focus: a fade with
+   a small blur on the quick spring, from the top; at rest, nothing. */
+.knobs-wt-body,.knobs-wt-frame>img{transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-body[data-entering],.knobs-wt-frame[data-loading]>img{opacity:0;filter:blur(3px);transition:none}
+/* One frame for every slot that has one (a picture, a video, a code block, a compare's stage, a
+   slot still loading): the panel radius and a quiet fill, no ring; concentric on a card. */
+.knobs-wt-slot .knobs-cmp-stage{border-radius:var(--kw-frame-r)}
 /* 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
    (92 px), and the frame strip with its gap (158 px). */
@@ -18450,13 +19985,16 @@ var walkthroughCss = `
 .knobs-wt-fit[data-overlay]{height:calc(100cqw / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
 .knobs-wt-fit[data-strip]{--kw-chrome:158px}
 .knobs-wt-fit[data-settled]{transition:height var(--k-wt-calm-ms,${calm.duration}ms) ${calm.easing}}
-.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
+.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:var(--kw-frame-r);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
 .knobs-wt-frame>:is(video,img){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border:0}
 .knobs-wt-frame[data-natural]{aspect-ratio:auto;background:transparent}
 .knobs-wt-frame[data-natural]>img{position:static;height:auto}
-.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);color:var(--_k-fg);
+/* Diff, code and terminal: one plain container (no glass): a flat inset fill, a hairline ring, the
+   control radius and room inside, so a diff's buttons and the code under them can breathe. */
+.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body{padding:var(--_k-space-sibling) var(--_k-pad-card) var(--_k-pad-card);border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle)}
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
   font:var(--_k-type-label)/var(--_k-leading-body) var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
-.knobs-surface .knobs-wt-code{padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
+.knobs-surface :is(.knobs-wt-code,.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body){padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
 .knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
 .knobs-wt-prompt{color:var(--_k-fg-3);user-select:none;-webkit-user-select:none}
 .knobs-wt-cmd{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
@@ -18464,8 +20002,8 @@ var walkthroughCss = `
 .knobs-wt-metric{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
 .knobs-wt-mlabel{color:var(--_k-fg-2)}
 .knobs-wt-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--_k-space-sibling);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-wt-mfrom{color:var(--_k-fg-3);font-size:var(--_k-type-title);line-height:var(--_k-leading-title)}
-.knobs-wt-mto{font-size:var(--_k-type-heading);line-height:var(--_k-leading-heading);font-weight:var(--_k-weight-label)}
+.knobs-wt-mfrom{color:var(--_k-fg-3)}
+.knobs-wt-mto{font-size:var(--_k-type-title);line-height:var(--_k-leading-title);font-weight:var(--_k-weight-label)}
 .knobs-wt-mof{color:var(--_k-fg-3)}
 .knobs-wt-mdelta{--kw-tone:var(--_k-fg-2);font-size:var(--_k-type-small);font-weight:var(--_k-weight-label);color:var(--kw-tone)}
 .knobs-wt-mdelta[data-tone="good"]{--kw-tone:var(--kw-good)}
@@ -18480,51 +20018,40 @@ var walkthroughCss = `
 .knobs-wt-callout[data-tone="warn"]{--kw-tone:var(--_k-warn)}
 .knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--_k-danger)}
 .knobs-wt-text{max-width:var(--kw-measure);color:var(--_k-fg-2)}
-.knobs-wt-hold{border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
+.knobs-wt-hold{border-radius:var(--kw-frame-r);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:var(--_k-type-small)}
 
+/* Annotations: a calm ring round a box, a dot or an arrow at a point, a small label beside it;
+   each fades in and out with a small blur on the quick spring as its time comes and goes, and a
+   page's switch (the eye, or a) hides them all. Placed in px by script, 1:1 with the picture;
+   last in their box, so they sit over the picture (and under a compare's grip and labels). */
+.knobs-wt-anno{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-anno:not([data-settled]),.knobs-wt-anno:not([data-settled]) *{transition:none!important}
+[data-annotations="off"] .knobs-wt-anno,.knobs-wt-anno[data-moving]{opacity:0;filter:blur(3px)}
+.knobs-wt-mark{--kw-mark:var(--_k-accent);position:absolute;left:0;top:0;color:var(--kw-mark);transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-mark[data-hidden]{opacity:0;filter:blur(3px)}
+.knobs-wt-mark[data-shape="box"]{border-radius:6px;box-shadow:0 0 0 1.5px var(--kw-mark),0 0 0 4px color-mix(in srgb,var(--_k-bg) 45%,transparent)}
+.knobs-wt-mark[data-shape="dot"]::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--kw-mark);box-shadow:0 0 0 3px color-mix(in srgb,var(--kw-mark) 30%,transparent)}
+.knobs-wt-anno-arrow{position:absolute;right:0;bottom:0;filter:drop-shadow(0 0 2px var(--_k-bg))}
+.knobs-wt-mark-label{position:absolute;left:0;bottom:calc(100% + 6px);max-width:240px;padding:2px 6px;border-radius:calc(var(--_k-radius) / 2);background:var(--_k-bg-overlay);color:var(--_k-fg);
+  font:var(--_k-weight-label) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);white-space:nowrap;overflow:hidden;box-shadow:var(--_k-shadow-overlay);${fade2}}
+.knobs-wt-mark:is([data-shape="dot"],[data-shape="arrow"]) .knobs-wt-mark-label{left:12px;bottom:auto;top:10px}
+.knobs-wt-mark[data-shape="arrow"] .knobs-wt-mark-label{left:auto;right:30px;top:auto;bottom:30px}
+.knobs-ui .knobs-wt-anno-toggle{all:revert;box-sizing:border-box;position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;margin:0;
+  border-radius:var(--_k-radius);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);color:var(--_k-fg-2);cursor:pointer;opacity:.6;outline:none;
+  transition:opacity calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-anno-toggle:is(:hover,:focus-visible){opacity:1;color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-anno-toggle:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-cmp-stage>.knobs-wt-anno-toggle{top:auto;bottom:8px}
+
 /* ——— 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-tablebox,.knobs-wt-chapters){--kw-line:var(--_k-leading-body);--kw-rail:var(--_k-border-strong)}
+:where(.knobs-wt-stack,.knobs-wt-tablebox,.knobs-wt-chapters){--kw-line:var(--_k-leading-body);--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) var(--_k-type-small)/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:var(--_k-type-body);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) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
-.knobs-wt-hsum{color:var(--_k-fg-3);font-size:var(--_k-type-small);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) var(--_k-type-label)/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:var(--_k-type-small);line-height:var(--_k-leading-small)}
-.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) var(--_k-type-small)/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. */
@@ -18569,6 +20096,12 @@ var walkthroughCss = `
 /* Too narrow for its columns, each row becomes a block: its primary cell titling the rest as term
    and value, the blocks parted by hairlines. Scrolling sideways is the last resort (stack: never). */
 .knobs-wt-tablebox{min-width:0}
+/* A row with a step goes there: the whole row, a wash under the pointer, no arrow, so rows with and
+   without one line up. */
+.knobs-wt-tablebox [data-go]{cursor:pointer;outline:none}
+.knobs-wt-tablebox tr[data-go]>td,.knobs-wt-trow[data-go]{transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-tablebox tr[data-go]:is(:hover,:focus-visible)>td,.knobs-wt-trow[data-go]:is(:hover,:focus-visible){background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-tablebox [data-go]:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
 .knobs-wt-tablebox[data-measure] table{width:min-content}
 .knobs-wt-tstack{display:none;flex-direction:column;min-width:0}
 .knobs-wt-tablebox[data-stacked]>.knobs-wt-table{display:none}
@@ -18592,7 +20125,7 @@ var walkthroughCss = `
 .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)}
+.knobs-wt-table:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus);border-radius:var(--kw-frame-r)}
 @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%;
@@ -18740,6 +20273,8 @@ async function mountCompare(host, m, look, alive, onEvent) {
     fit.style.setProperty("--kw-aspect", String(aspect));
   let lastZoom = "all";
   let lastLoop = "off";
+  let marks = null;
+  let marking = null;
   const c = compare(fit, {
     ...look,
     before: side(before, "Before"),
@@ -18752,6 +20287,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
     onMode: (next) => {
       fit.toggleAttribute("data-overlay", next !== "side");
       onEvent?.({ what: "mode", detail: next });
+      const layer = marks?.element;
+      if (layer) {
+        layer.dataset.moving = "";
+        setTimeout(() => {
+          delete layer.dataset.moving;
+          marks?.update();
+        }, MARK_GLIDE);
+      }
     },
     onView: (view) => {
       const z = view.zoom;
@@ -18762,8 +20305,23 @@ async function mountCompare(host, m, look, alive, onEvent) {
       const loopKey = l ? `${formatTime(l.start)}–${formatTime(l.end)}` : "off";
       if (loopKey !== lastLoop)
         onEvent?.({ what: "loop", detail: lastLoop = loopKey });
+      marking?.kick(MARK_GLIDE);
     }
   });
+  const stage = fit.querySelector(".knobs-cmp-stage");
+  if (m.annotations?.length && stage) {
+    const shape = { w: aspect ?? DEFAULT_ASPECT, h: 1 };
+    marks = annotationLayer(stage, m.annotations, () => {
+      const l = compareLayout({ x: 0, y: 0, w: stage.clientWidth, h: stage.clientHeight }, shape, shape);
+      return {
+        rects: c.mode === "side" ? [l.side.before, l.side.after] : [l.overlay.after],
+        view: c.zoom,
+        time: c.time
+      };
+    });
+    const layer = marks;
+    marking = follow(doc.defaultView, () => c.playing, () => layer.update());
+  }
   const chapters = m.chapters?.length ? m.chapters : null;
   if (chapters)
     c.timeline?.update({
@@ -18780,10 +20338,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
   const unlisten = c.timeline?.listen({
     onSeek: (time, source) => {
       pills?.sync();
+      marking?.kick();
       if (source !== "play")
         onEvent?.({ what: "seek", time: round2(time) });
     },
-    onPlay: (on) => onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) })
+    onPlay: (on) => {
+      marking?.kick();
+      onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) });
+    }
   });
   requestAnimationFrame(() => requestAnimationFrame(() => fit.dataset.settled = ""));
   return {
@@ -18810,6 +20372,8 @@ async function mountCompare(host, m, look, alive, onEvent) {
       };
     },
     dispose: () => {
+      marking?.stop();
+      marks?.dispose();
       unlisten?.();
       pills?.dispose();
       c.dispose();
@@ -18818,6 +20382,7 @@ async function mountCompare(host, m, look, alive, onEvent) {
   };
 }
 var round2 = (v) => Math.round(v * 100) / 100;
+var MARK_GLIDE = 450;
 var zoomedIn = (z) => z.w < 0.999 || z.h < 0.999;
 function mountVideo(host, m, onEvent) {
   const doc = host.ownerDocument;
@@ -18865,6 +20430,16 @@ function mountVideo(host, m, onEvent) {
   if (pills)
     for (const type of ["timeupdate", "seeking", "seeked"])
       v.addEventListener(type, sync);
+  const marks = m.annotations?.length ? annotationLayer(frame, m.annotations, () => ({
+    rects: [
+      contain({ w: frame.clientWidth, h: frame.clientHeight }, { w: v.videoWidth, h: v.videoHeight })
+    ],
+    time: v.currentTime
+  })) : null;
+  const marking = marks ? follow(doc.defaultView, () => !v.paused, () => marks.update()) : null;
+  if (marking)
+    for (const type of ["play", "seeked", "loadedmetadata", "timeupdate"])
+      v.addEventListener(type, () => marking.kick());
   return {
     pause: () => v.pause(),
     seekBy: (d) => {
@@ -18878,6 +20453,8 @@ function mountVideo(host, m, onEvent) {
       ...pills?.current ? { chapter: pills.current.label } : {}
     }),
     dispose: () => {
+      marking?.stop();
+      marks?.dispose();
       pills?.dispose();
       v.pause();
       v.removeAttribute("src");
@@ -18895,9 +20472,52 @@ function mountImage(host, m) {
   img.decoding = "async";
   img.alt = m.alt ?? m.label ?? "";
   img.src = m.src;
+  if (!img.complete) {
+    frame.dataset.loading = "";
+    img.addEventListener("load", () => delete frame.dataset.loading, { once: true });
+    img.addEventListener("error", () => delete frame.dataset.loading, { once: true });
+  }
   frame.append(img);
   host.append(frame);
-  return { dispose: () => frame.remove() };
+  const marks = m.annotations?.length ? annotationLayer(frame, m.annotations, () => ({
+    rects: [{ x: 0, y: 0, w: frame.clientWidth, h: frame.clientHeight }]
+  })) : null;
+  if (marks)
+    img.addEventListener("load", () => marks.update(), { once: true });
+  return {
+    dispose: () => {
+      marks?.dispose();
+      frame.remove();
+    }
+  };
+}
+function contain(box, natural) {
+  if (!(natural.w > 0 && natural.h > 0))
+    return { x: 0, y: 0, w: box.w, h: box.h };
+  const k = Math.min(box.w / natural.w, box.h / natural.h);
+  const w = natural.w * k;
+  const h = natural.h * k;
+  return { x: (box.w - w) / 2, y: (box.h - h) / 2, w, h };
+}
+function follow(win, on, fn) {
+  let raf = 0;
+  let until = 0;
+  const tick = () => {
+    fn();
+    raf = on() || performance.now() < until ? win.requestAnimationFrame(tick) : 0;
+  };
+  return {
+    kick(ms = 0) {
+      until = Math.max(until, performance.now() + ms);
+      if (!raf)
+        raf = win.requestAnimationFrame(tick);
+    },
+    stop() {
+      if (raf)
+        win.cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  };
 }
 async function mountDiff(host, m, look, alive, onEvent) {
   const lib = await Promise.resolve().then(() => (init_diff(), {}));
@@ -19051,6 +20671,14 @@ function mediaSlot(container, options) {
   let pending = false;
   let disposed = false;
   let generation = 0;
+  const born = performance.now();
+  const enter = () => {
+    const win = doc.defaultView;
+    if (!win || performance.now() - born < 120 || reducedMotion(win))
+      return;
+    host.dataset.entering = "";
+    win.requestAnimationFrame(() => win.requestAnimationFrame(() => delete host.dataset.entering));
+  };
   const hold = (px) => {
     host.style.minHeight = px === null ? "" : `${px}px`;
     host.classList.toggle("knobs-wt-hold", px !== null);
@@ -19070,6 +20698,7 @@ function mediaSlot(container, options) {
       if (!alive())
         return r.dispose();
       mounted = r;
+      enter();
       if (filled)
         r.fill?.(true);
       if (r.ready)
@@ -19162,14 +20791,14 @@ function mediaSlot(container, options) {
 var CHECK3 = icon("check", { small: true });
 
 // src/ui/walkthrough.ts
-var el2 = (doc, tag, cls) => {
+var el3 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
 var prose2 = (doc, tag, cls, text) => {
-  const n = el2(doc, tag, cls);
+  const n = el3(doc, tag, cls);
   n.innerHTML = inlineMarkdown(text);
   return n;
 };
@@ -19206,37 +20835,46 @@ function tasteTest(container, options) {
     ...o.media !== undefined ? { media: fillMedia(o.media) } : {},
     suggested: o.suggested === true
   });
-  let picked = options.picked ?? null;
-  const root = el2(doc, "div", "knobs-wt-options");
-  root.setAttribute("role", "radiogroup");
-  root.setAttribute("aria-label", "Options");
+  const pickable = options.pickable !== false;
+  let picked = pickable ? options.picked ?? null : null;
+  const root = el3(doc, "div", "knobs-wt-options");
+  if (pickable) {
+    root.setAttribute("role", "radiogroup");
+    root.setAttribute("aria-label", "Options");
+  } else
+    root.dataset.static = "";
   root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
   if (!container.closest(".knobs-ui"))
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
-    const tile = el2(doc, "div", "knobs-wt-option");
-    const pick = el2(doc, "button", "knobs-wt-pick");
+    const tile = el3(doc, "div", "knobs-wt-option");
+    if (!pickable) {
+      const name = el3(doc, "span", "knobs-wt-slot-label");
+      name.textContent = o.label;
+      tile.append(name);
+    }
+    const pick = el3(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
     if (i < 9)
       pick.setAttribute("aria-keyshortcuts", String(i + 1));
-    const letter = el2(doc, "span", "knobs-wt-letter");
+    const letter = el3(doc, "span", "knobs-wt-letter");
     letter.textContent = o.letter;
-    const name = el2(doc, "span", "knobs-wt-olabel");
+    const name = el3(doc, "span", "knobs-wt-olabel");
     name.textContent = o.label;
     pick.append(letter, name);
     if (o.suggested) {
-      const s = el2(doc, "span", "knobs-wt-suggested");
+      const s = el3(doc, "span", "knobs-wt-suggested");
       s.textContent = "Suggested";
       pick.append(s);
     }
     if (i < 9) {
-      const key = el2(doc, "span", "knobs-wt-key");
+      const key = el3(doc, "span", "knobs-wt-key");
       key.textContent = String(i + 1);
       pick.append(key);
     }
-    const check = el2(doc, "span", "knobs-wt-check");
+    const check = el3(doc, "span", "knobs-wt-check");
     check.innerHTML = CHECK3;
     pick.append(check);
     pick.addEventListener("click", () => {
@@ -19244,7 +20882,8 @@ function tasteTest(container, options) {
       api.pick(next);
       options.onPick?.(next);
     });
-    tile.append(pick);
+    if (pickable)
+      tile.append(pick);
     if (o.media)
       slots.push(mediaSlot(tile, {
         ...look,
@@ -19301,7 +20940,7 @@ function walkthrough(container, options) {
   injectWalkthroughStyles(doc);
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
-  const root = el2(doc, "div", "knobs-walkthrough");
+  const root = el3(doc, "div", "knobs-walkthrough");
   applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
@@ -19327,7 +20966,8 @@ function walkthrough(container, options) {
   let tocRows = [];
   let discs = [];
   let full = null;
-  const noteMode = options.noteBar ?? "collapsed";
+  const review = options.review === true;
+  const noteMode = review ? options.noteBar ?? "collapsed" : "hidden";
   let reserve = noteBarReserve(52, DOCK_INSET, DOCK_GAP);
   const viewOf = (key) => views.find((v) => v.step.key === key);
   const feedback = () => collectFeedback(page, state);
@@ -19513,7 +21153,7 @@ function walkthrough(container, options) {
         return true;
     return false;
   };
-  const scrim = el2(doc, "div", "knobs-wt-scrim");
+  const scrim = el3(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
   const fullRect = () => ({
     x: DOCK_INSET,
@@ -19563,7 +21203,7 @@ function walkthrough(container, options) {
       }
       if (!full) {
         const r = v.card.getBoundingClientRect();
-        const hold = el2(doc, "div", "knobs-wt-hold-card");
+        const hold = el3(doc, "div", "knobs-wt-hold-card");
         hold.style.height = `${r.height}px`;
         v.card.before(hold);
         v.card.dataset.full = "";
@@ -19713,7 +21353,7 @@ function walkthrough(container, options) {
       toast("Couldn't reach the microphone", { tone: "warn", look, doc });
     }
   };
-  const backPill = el2(doc, "button", "knobs-wt-back");
+  const backPill = el3(doc, "button", "knobs-wt-back");
   backPill.type = "button";
   let backTo = null;
   let backTimer = 0;
@@ -19733,7 +21373,7 @@ function walkthrough(container, options) {
       return;
     backTo = key;
     backPill.innerHTML = ICON.back;
-    const words = el2(doc, "span", "knobs-wt-back-label");
+    const words = el3(doc, "span", "knobs-wt-back-label");
     words.textContent = `Back to ${plainMarkdown(v.step.title)}`;
     backPill.append(words);
     backPill.dataset.on = "";
@@ -19741,16 +21381,16 @@ function walkthrough(container, options) {
     backTimer = win.setTimeout(hideBack, BACK_MS);
   };
   const bar = (() => {
-    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");
+    const dock = el3(doc, "div", "knobs-wt-dock");
+    const box = el3(doc, "div", "knobs-wt-notebar");
+    const on = el3(doc, "div", "knobs-wt-on");
+    const row = el3(doc, "div", "knobs-wt-row");
+    const input = el3(doc, "textarea", "knobs-wt-input");
     input.rows = 1;
     input.setAttribute("aria-label", "Note");
-    const attach = el2(doc, "div", "knobs-wt-attach");
+    const attach = el3(doc, "div", "knobs-wt-attach");
     const btn = (icon, label, run) => {
-      const b = el2(doc, "button", "knobs-wt-tool");
+      const b = el3(doc, "button", "knobs-wt-tool");
       b.type = "button";
       b.innerHTML = icon;
       b.setAttribute("aria-label", label);
@@ -19761,17 +21401,17 @@ 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 = el2(doc, "span", "knobs-wt-rec");
+    const micTime = el3(doc, "span", "knobs-wt-rec");
     micBtn.append(micTime);
     const sendBtn = btn(ICON.send, "Send · Enter", () => send());
     sendBtn.dataset.send = "";
     row.append(input, attach, fullBtn, penBtn, micBtn, sendBtn);
     box.append(on, row);
-    const launch = el2(doc, "button", "knobs-wt-launch");
+    const launch = el3(doc, "button", "knobs-wt-launch");
     launch.type = "button";
     launch.innerHTML = ICON.pen;
     launch.append("Note");
-    const kbd = el2(doc, "kbd");
+    const kbd = el3(doc, "kbd");
     kbd.textContent = "n";
     launch.append(kbd);
     launch.setAttribute("aria-label", "Write a note (n)");
@@ -19823,9 +21463,9 @@ function walkthrough(container, options) {
       }
     });
     const chip = (text, clear) => {
-      const c = el2(doc, "span", "knobs-wt-chip-a");
+      const c = el3(doc, "span", "knobs-wt-chip-a");
       c.append(text);
-      const x = el2(doc, "button", "knobs-wt-x");
+      const x = el3(doc, "button", "knobs-wt-x");
       x.type = "button";
       x.innerHTML = ICON.close;
       x.setAttribute("aria-label", `Remove ${text}`);
@@ -19974,9 +21614,9 @@ function walkthrough(container, options) {
     }
   };
   const renderNote = (v, n, entering = false) => {
-    const row = el2(doc, "div", "knobs-wt-n");
+    const row = el3(doc, "div", "knobs-wt-n");
     row.dataset.id = n.id;
-    const meta = el2(doc, "span", "knobs-wt-n-meta");
+    const meta = el3(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) {
@@ -19992,11 +21632,11 @@ function walkthrough(container, options) {
       });
     }
     row.append(meta);
-    const body = el2(doc, "div", "knobs-wt-n-body");
+    const body = el3(doc, "div", "knobs-wt-n-body");
     if (n.text)
       body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
     if (n.voice) {
-      const a = el2(doc, "audio", "knobs-wt-n-voice");
+      const a = el3(doc, "audio", "knobs-wt-n-voice");
       a.controls = true;
       a.preload = "none";
       a.src = n.voice.url;
@@ -20016,7 +21656,7 @@ function walkthrough(container, options) {
       body.append(thumb);
     }
     row.append(body);
-    const x = el2(doc, "button", "knobs-wt-x");
+    const x = el3(doc, "button", "knobs-wt-x");
     x.type = "button";
     x.innerHTML = ICON.close;
     x.setAttribute("aria-label", "Delete this note");
@@ -20056,15 +21696,22 @@ function walkthrough(container, options) {
     row.addEventListener("transitionend", done, { once: true });
     win.setTimeout(done, 600);
   };
-  const metaLine = (cls) => el2(doc, "div", `knobs-wt-metaline ${cls}`);
+  const metaLine = (cls) => el3(doc, "div", `knobs-wt-metaline ${cls}`);
   const metaText = (line, text, cls) => {
-    const s = el2(doc, "span", cls);
+    const s = el3(doc, "span", cls);
     s.textContent = text;
     line.append(s);
     return s;
   };
+  const findPRIn = (n) => findPR(page.prs, n, page.repo);
   const metaLink = (line, text, href) => {
-    const a = el2(doc, "a");
+    const n = prNumber(href);
+    if (n) {
+      const chip = prChip(doc, n, { href, ...findPRIn(n) });
+      line.append(chip);
+      return chip;
+    }
+    const a = el3(doc, "a");
     a.href = href;
     a.target = "_blank";
     a.rel = "noreferrer";
@@ -20074,58 +21721,58 @@ function walkthrough(container, options) {
     return a;
   };
   const feedItem = (f, now) => {
-    const li = el2(doc, "li", "knobs-wt-fi");
+    const li = el3(doc, "li", "knobs-wt-fi");
     li.dataset.kind = f.kind;
-    const q = el2(doc, "div", "knobs-wt-fi-q");
+    const q = el3(doc, "div", "knobs-wt-fi-q");
     const meta = metaLine("knobs-wt-fi-meta");
     if (f.at !== null) {
       const when = metaText(meta, ago(f.at, now));
       when.title = new Date(f.at).toLocaleString();
-    } else
-      metaText(meta, f.kind === "qa" ? "Answer" : "Update");
+    }
     const step = f.step ? page.steps.find((s) => s.key === f.step) : undefined;
     if (step) {
       const section = page.sections.find((s) => s.id === step.section);
-      const b = el2(doc, "button", "knobs-wt-fi-step");
+      const b = el3(doc, "button", "knobs-wt-fi-step");
       b.type = "button";
       b.textContent = section?.link?.label ?? plainMarkdown(step.title);
       b.title = `Go to “${plainMarkdown(step.title)}”`;
       b.addEventListener("click", () => go(step.key));
       meta.append(b);
     }
-    if (f.status) {
+    if (f.status && review) {
       const id = f.status.toLowerCase();
       const shipped = /^(ship|shipped|merged|done)$/.test(id);
       const changes = /^(changes?|changes queued)$/.test(id);
       const s = metaText(meta, shipped ? "Shipped" : changes ? "Changes queued" : f.status);
       s.dataset.status = shipped ? "on" : changes ? "warn" : "";
     }
-    q.append(meta);
+    if (meta.childNodes.length)
+      q.append(meta);
     if (f.q)
       q.append(prose2(doc, "p", "knobs-wt-fi-ask", f.q));
     else
       q.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
     li.append(q);
     if (f.q || f.trail.length) {
-      const a = el2(doc, "div", "knobs-wt-fi-a");
+      const a = el3(doc, "div", "knobs-wt-fi-a");
       if (f.q)
         a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
       if (f.trail.length) {
-        const list = el2(doc, "ol", "knobs-wt-trail");
+        const list = el3(doc, "ol", "knobs-wt-trail");
         for (const line of f.trail) {
           const i = line.indexOf(" · ");
-          const row = el2(doc, "li");
-          const words = el2(doc, "span", "knobs-wt-trail-text");
+          const row = el3(doc, "li");
+          const words = el3(doc, "span", "knobs-wt-trail-text");
           words.textContent = i < 0 ? line : line.slice(i + 3);
           row.append(words);
           if (i >= 0) {
-            const at = el2(doc, "span", "knobs-wt-trail-at");
+            const at = el3(doc, "span", "knobs-wt-trail-at");
             at.textContent = line.slice(0, i);
             row.append(at);
           }
           list.append(row);
         }
-        discs.push(disclosure(a, { label: "Context", count: f.trail.length, content: list }));
+        discs.push(disclosure(a, { label: "Context", content: list }));
       }
       li.append(a);
     }
@@ -20150,25 +21797,28 @@ function walkthrough(container, options) {
     views = [];
     root.textContent = "";
     root.removeAttribute("data-settled");
-    root.dataset.rail = options.rail === false ? "none" : options.rail === "left" ? "left" : "right";
+    root.dataset.rail = options.rail === false ? "none" : options.rail === "right" ? "right" : "left";
     root.toggleAttribute("data-cards", options.cards === true);
-    const layout = el2(doc, "div", "knobs-wt-layout");
-    const main = el2(doc, "div", "knobs-wt-main");
-    const flow = el2(doc, "div", "knobs-wt-flow");
-    const head = el2(doc, "header", "knobs-wt-head");
-    const h1 = el2(doc, "h1", "knobs-wt-title");
+    root.toggleAttribute("data-review", review);
+    const layout = el3(doc, "div", "knobs-wt-layout");
+    const main = el3(doc, "div", "knobs-wt-main");
+    const flow = el3(doc, "div", "knobs-wt-flow");
+    const head = el3(doc, "header", "knobs-wt-head");
+    const h1 = el3(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
       head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
+    if (page.more)
+      head.append(more(page.more));
     if (page.meta.length) {
-      const meta = el2(doc, "div", "knobs-wt-meta");
+      const meta = el3(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
-        const s = el2(doc, "span");
+        const s = el3(doc, "span");
         s.append(m.label);
-        const b = el2(doc, "b");
+        const b = el3(doc, "b");
         if (m.href) {
-          const a = el2(doc, "a");
+          const a = el3(doc, "a");
           a.href = m.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -20184,16 +21834,14 @@ function walkthrough(container, options) {
     flow.append(head);
     let feedEl = null;
     if (page.feed.length) {
-      feedEl = el2(doc, "section", "knobs-wt-feed");
+      feedEl = el3(doc, "section", "knobs-wt-feed");
       feedEl.id = "wt-latest";
       feedEl.setAttribute("aria-label", "Updates and answers");
-      const fh = el2(doc, "header", "knobs-wt-feed-head");
-      const h = el2(doc, "h2", "knobs-wt-feed-title");
+      const fh = el3(doc, "header", "knobs-wt-feed-head");
+      const h = el3(doc, "h2", "knobs-wt-feed-title");
       h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
-      const n = el2(doc, "span", "knobs-wt-feed-count");
-      n.textContent = String(page.feed.length);
-      fh.append(h, n);
-      const list = el2(doc, "ol", "knobs-wt-feed-list");
+      fh.append(h);
+      const list = el3(doc, "ol", "knobs-wt-feed-list");
       const now = Date.now();
       for (const f of page.feed)
         list.append(feedItem(f, now));
@@ -20203,64 +21851,66 @@ function walkthrough(container, options) {
     let rail = null;
     count = fill = tocEl = null;
     if (options.rail !== false) {
-      rail = el2(doc, "aside", "knobs-wt-rail");
-      rail.setAttribute("aria-label", "Progress");
-      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 = el2(doc, "nav", "knobs-wt-toc");
+      rail = el3(doc, "aside", "knobs-wt-rail");
+      rail.setAttribute("aria-label", "Contents");
+      tocEl = el3(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
-      const ns = page.sections.map((s) => s.kicker && s.link ? s.link.label : "");
-      const nw = Math.max(0, ...ns.map((n) => n.length));
-      tocEl.style.setProperty("--kw-toc-n", nw ? `${nw + 0.5}ch` : "0px");
-      if (!nw)
-        tocEl.dataset.bare = "";
       if (feedEl) {
-        const group = el2(doc, "div", "knobs-wt-toc-group");
+        const group = el3(doc, "div", "knobs-wt-toc-group");
         const target = feedEl;
-        group.append(tocRow("Latest", "", String(page.feed.length), false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
+        group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
         tocEl.append(group);
       }
-      rail.append(progress, tocEl, actions(true));
-      if (options.keys !== false) {
-        const keys = el2(doc, "div", "knobs-wt-keys");
+      if (review) {
+        const progress = el3(doc, "div", "knobs-wt-progress");
+        count = el3(doc, "div", "knobs-wt-count");
+        const meter = el3(doc, "div", "knobs-wt-bar");
+        fill = el3(doc, "div", "knobs-wt-fill");
+        meter.append(fill);
+        progress.append(count, meter);
+        rail.append(progress);
+      }
+      rail.append(tocEl);
+      if (review)
+        rail.append(actions(true));
+      if (review && options.keys !== false) {
+        const keys = el3(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 = el2(doc, "section", "knobs-wt-section");
+      const sec = el3(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
-      const sh = el2(doc, "header", "knobs-wt-shead");
-      if (section.kicker || section.link || section.status) {
+      const sh = el3(doc, "header", "knobs-wt-shead");
+      const status = review ? section.status : undefined;
+      if (section.kicker || section.link || status) {
         const meta = metaLine("knobs-wt-kicker");
         if (section.kicker)
           metaText(meta, section.kicker, "knobs-wt-kicker-lead");
         if (section.link)
           metaLink(meta, section.link.label, section.link.href);
-        if (section.status) {
-          const s = statusLook(section.status);
+        if (status) {
+          const s = statusLook(status);
           metaText(meta, s.label, "knobs-wt-status").dataset.tone = s.tone;
         }
         sh.append(meta);
       }
-      const h2 = el2(doc, "h2", "knobs-wt-heading");
+      const h2 = el3(doc, "h2", "knobs-wt-heading");
       h2.innerHTML = inlineMarkdown(section.title);
       sh.append(h2);
-      const intro = el2(doc, "div", "knobs-wt-sintro");
+      const intro = el3(doc, "div", "knobs-wt-sintro");
       intro.append(sh);
       if (section.summary)
         intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
+      if (section.more)
+        intro.append(more(section.more));
       sec.append(intro);
       let group = null;
       if (tocEl) {
-        group = el2(doc, "div", "knobs-wt-toc-group");
+        group = el3(doc, "div", "knobs-wt-toc-group");
         const first = section.steps[0]?.key;
-        const n = section.kicker && section.link ? section.link.label : "";
-        group.append(tocRow(plainMarkdown(section.title), n, "", false, () => first ? go(first) : undefined, section.id));
+        group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
         tocEl.append(group);
       }
       for (const step of section.steps) {
@@ -20270,6 +21920,7 @@ function walkthrough(container, options) {
       }
       flow.append(sec);
     }
+    linkPRs(flow, findPRIn);
     main.append(flow);
     if (noteMode !== "hidden")
       main.append(bar.dock);
@@ -20298,28 +21949,35 @@ function walkthrough(container, options) {
         root.dataset.settled = "";
     }));
   };
-  const tocRow = (label, n, end, sub, run, section) => {
-    const b = el2(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
+  const more = (text) => {
+    const box = el3(doc, "div", "knobs-wt-more");
+    const body = el3(doc, "div", "knobs-wt-more-text");
+    for (const para of text.split(/\n\s*\n/))
+      if (para.trim())
+        body.append(prose2(doc, "p", "", para.trim()));
+    discs.push(disclosure(box, { label: "More", content: body }));
+    return box;
+  };
+  const tocRow = (label, sub, run, section) => {
+    const b = el3(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
     b.type = "button";
     if (section)
       b.dataset.section = section;
-    const ncol = el2(doc, "span", "knobs-wt-toc-n");
-    ncol.textContent = n;
-    const t = el2(doc, "span", "knobs-wt-toc-label");
+    const t = el3(doc, "span", "knobs-wt-toc-label");
     t.textContent = label;
-    const e = el2(doc, "span", "knobs-wt-toc-end");
-    e.textContent = end;
     b.title = label;
-    b.append(ncol, t, e);
+    b.append(t);
+    if (review)
+      b.append(el3(doc, "span", "knobs-wt-toc-end"));
     b.addEventListener("mousedown", (ev) => ev.preventDefault());
     b.addEventListener("click", run);
     tocRows.push(b);
     return b;
   };
   const actions = (rail) => {
-    const row = el2(doc, "div", "knobs-wt-actions");
+    const row = el3(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
-      const b = el2(doc, "button", "knobs-wt-btn");
+      const b = el3(doc, "button", "knobs-wt-btn");
       b.type = "button";
       b.textContent = text;
       if (primary)
@@ -20357,44 +22015,37 @@ function walkthrough(container, options) {
     }
   };
   const stepView = (step, group) => {
-    const card = el2(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
+    const card = el3(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
     card.setAttribute("aria-label", plainMarkdown(step.title));
-    const head = el2(doc, "header", "knobs-wt-step-head");
-    const h3 = el2(doc, "h3", "knobs-wt-stepTitle");
+    const head = el3(doc, "header", "knobs-wt-step-head");
+    const h3 = el3(doc, "h3", "knobs-wt-stepTitle");
     h3.innerHTML = inlineMarkdown(step.title);
     head.append(h3);
     if (step.caption)
       head.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
+    if (step.more)
+      head.append(more(step.more));
     card.append(head);
     const slots = [];
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
-      const grid = (list) => {
-        const g = el2(doc, "div", "knobs-wt-media");
-        g.style.setProperty("--kw-n", String(Math.min(list.length, step.columns)));
-        for (const m of list)
-          slots.push(mediaSlot(g, { ...look, media: m, onEvent, steps: stepLinks }));
-        return g;
-      };
-      const [first, ...rest] = step.media;
-      media = grid(step.more ? [first] : step.media);
+      media = el3(doc, "div", "knobs-wt-media");
+      media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
+      for (const m of step.media)
+        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
       card.append(media);
-      if (step.more && rest.length) {
-        const holder = el2(doc, "div", "knobs-wt-more");
-        discs.push(disclosure(holder, { label: step.more, count: rest.length, content: grid(rest) }));
-        card.append(holder);
-      }
     }
     let taste = null;
-    if (step.question)
+    if (step.question && review)
       card.append(prose2(doc, "p", "knobs-wt-question", step.question));
     if (step.ask === "pick") {
       taste = tasteTest(card, {
         ...look,
+        pickable: review,
         options: step.options,
         picked: state.steps[step.key]?.pick ?? null,
         onPick: (id) => pick(step.key, id),
@@ -20402,8 +22053,9 @@ function walkthrough(container, options) {
       });
       media ??= taste.element;
     }
-    const notes = el2(doc, "div", "knobs-wt-notes");
-    card.append(notes);
+    const notes = el3(doc, "div", "knobs-wt-notes");
+    if (review)
+      card.append(notes);
     card.addEventListener("focusin", () => {
       if (scroll.to)
         return;
@@ -20413,9 +22065,11 @@ function walkthrough(container, options) {
     let toc = null;
     let glyph = null;
     if (group) {
-      toc = tocRow(plainMarkdown(step.title), "", "", true, () => go(step.key));
-      glyph = el2(doc, "span", "knobs-wt-toc-glyph");
-      toc.querySelector(".knobs-wt-toc-end").append(glyph);
+      toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
+      if (review) {
+        glyph = el3(doc, "span", "knobs-wt-toc-glyph");
+        toc.querySelector(".knobs-wt-toc-end").append(glyph);
+      }
       group.append(toc);
     }
     return { step, card, media, notes, toc, glyph, taste, slots };
@@ -20487,13 +22141,17 @@ function walkthrough(container, options) {
         claim();
       return;
     }
+    if (key === "a" && !e.shiftKey && root.querySelector(".knobs-wt-anno")) {
+      claim();
+      return setAnnotations(root, !annotationsOn(root));
+    }
     if (key === "n" && noteMode !== "hidden") {
       claim();
       bar.setOpen(true, true);
       return;
     }
     const v = viewOf(current);
-    if (!v || e.shiftKey)
+    if (!v || e.shiftKey || !review)
       return;
     const choice = digitChoice(v.step, state.steps[v.step.key], key);
     if (choice === undefined)
@@ -20585,7 +22243,7 @@ function walkthrough(container, options) {
 }
 
 // src/ui/solid.ts
-var follow = (read, apply) => {
+var follow2 = (read, apply) => {
   const changes = propChanges(untrack(read));
   createEffect(() => {
     const changed = changes(read());
@@ -20633,7 +22291,7 @@ function Tree(props) {
     }
   }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({ items: props.items, filter: props.filter, selection: props.selection }), (c) => {
+  follow2(() => ({ items: props.items, filter: props.filter, selection: props.selection }), (c) => {
     if ("items" in c)
       t.update(c.items);
     if ("filter" in c)
@@ -20669,7 +22327,7 @@ function CodeDiff(props) {
     onViewed: props.onViewed && ((viewed, file) => props.onViewed?.(viewed, file))
   }));
   untrack(() => props.onReady?.(d));
-  follow(diffProps(props), (c) => {
+  follow2(diffProps(props), (c) => {
     if (c.height)
       host.style.height = c.height === "auto" ? "" : "100%";
     d.update(c);
@@ -20692,7 +22350,7 @@ function DiffReview(props) {
     onViewed: (viewed, file) => props.onViewed?.(viewed, file)
   }));
   untrack(() => props.onReady?.(r));
-  follow(diffProps(props), (c) => {
+  follow2(diffProps(props), (c) => {
     if (c.height)
       host.style.height = c.height === "auto" ? "" : "100%";
     r.update(c);
@@ -20714,7 +22372,7 @@ function Timeline(props) {
     onCross: (m) => props.onCross?.(m)
   }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({
+  follow2(() => ({
     duration: props.duration,
     fps: props.fps,
     units: props.units,
@@ -20743,7 +22401,7 @@ function Compare(props) {
     onView: (view) => props.onView?.(view)
   }));
   untrack(() => props.onReady?.(c));
-  follow(() => ({
+  follow2(() => ({
     before: props.before,
     after: props.after,
     mode: props.mode,
@@ -20766,7 +22424,7 @@ function CompareStrip(props) {
   host.style.height = "100%";
   const s = untrack(() => compareStrip(host, { ...props, onPick: (time) => props.onPick?.(time) }));
   untrack(() => props.onReady?.(s));
-  follow(() => ({ before: props.before.src, after: props.after.src }), (changed) => s.update({
+  follow2(() => ({ before: props.before.src, after: props.after.src }), (changed) => s.update({
     ..."before" in changed ? { before: props.before } : {},
     ..."after" in changed ? { after: props.after } : {}
   }));
@@ -20786,7 +22444,7 @@ function Bento(props) {
     onActive: (id) => props.onActive?.(id)
   }));
   untrack(() => props.onReady?.(b));
-  follow(() => ({ items: props.items, picks: props.picks }), (c) => {
+  follow2(() => ({ items: props.items, picks: props.picks }), (c) => {
     if ("items" in c)
       b.update(c.items);
     if (c.picks)
@@ -20808,7 +22466,7 @@ function Activity(props) {
     onPlay: props.onPlay && ((id, event) => props.onPlay?.(id, event))
   }));
   untrack(() => props.onReady?.(a));
-  follow(() => ({ events: props.events, newest: props.newest, selected: props.selected }), (c) => {
+  follow2(() => ({ events: props.events, newest: props.newest, selected: props.selected }), (c) => {
     if (c.events || c.newest)
       a.update({ events: c.events, newest: c.newest });
     if (c.selected !== undefined && c.selected !== a.selected)
@@ -20837,7 +22495,7 @@ function OptionPicker(props) {
     }
   }));
   untrack(() => props.onReady?.(p));
-  follow(() => ({ options: props.options, selected: props.selected, chosen: props.chosen }), (c) => {
+  follow2(() => ({ options: props.options, selected: props.selected, chosen: props.chosen }), (c) => {
     if ("options" in c)
       p.set(c.options);
     if (c.selected != null)
@@ -20854,7 +22512,7 @@ function Walkthrough(props) {
   const host = document.createElement("div");
   const w = untrack(() => walkthrough(host, { ...props, onFeedback: (feedback) => props.onFeedback?.(feedback) }));
   untrack(() => props.onReady?.(w));
-  follow(() => ({ doc: props.doc }), (c) => c.doc && w.set(c.doc));
+  follow2(() => ({ doc: props.doc }), (c) => c.doc && w.set(c.doc));
   onCleanup(() => w.dispose());
   return host;
 }
@@ -20864,7 +22522,7 @@ function TasteTest(props) {
   const host = document.createElement("div");
   const t = untrack(() => tasteTest(host, { ...props, onPick: (id) => props.onPick?.(id) }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({ picked: props.picked }), (c) => ("picked" in c) && t.pick(c.picked ?? null));
+  follow2(() => ({ picked: props.picked }), (c) => ("picked" in c) && t.pick(c.picked ?? null));
   onCleanup(() => t.dispose());
   return host;
 }