npm - @kitlangton/knobs - Versions diffs - 0.4.0-next.4 → 0.4.0-next.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/README.md +25 -14
package/dist/dev/{chunk-0w1xk9jc.js → chunk-dyq4m24m.js} +3 -3
package/dist/dev/{chunk-76frnh2j.js → chunk-qc6szek7.js} +58 -9
package/dist/dev/{chunk-rem3qrhz.js → chunk-y2axkmz3.js} +2 -2
package/dist/dev/index.js +3 -3
package/dist/panel.js +60 -11
package/dist/themes.js +3 -3
package/dist/types/tokens/schema.d.ts +3 -3
package/dist/types/ui/compare-css.d.ts +1 -1
package/dist/types/ui/compare-gpu.d.ts +4 -1
package/dist/types/ui/compare-model.d.ts +36 -1
package/dist/types/ui/compare.d.ts +3 -2
package/dist/types/ui/diff.d.ts +4 -5
package/dist/types/ui/history-css.d.ts +1 -1
package/dist/types/ui/history-model.d.ts +15 -2
package/dist/types/ui/history.d.ts +5 -0
package/dist/types/ui/index.d.ts +2 -1
package/dist/types/ui/player-css.d.ts +1 -0
package/dist/types/ui/player.d.ts +60 -0
package/dist/types/ui/timeline-model.d.ts +4 -0
package/dist/types/ui/timeline.d.ts +10 -3
package/dist/types/ui/walkthrough-blocks.d.ts +18 -0
package/dist/types/ui/walkthrough-model.d.ts +32 -1
package/dist/types/ui/walkthrough.d.ts +14 -2
package/dist/ui-react.js +586 -209
package/dist/ui-solid.js +586 -209
package/dist/ui.js +756 -209
package/package.json +1 -1

package/dist/ui.js CHANGED Viewed

@@ -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);
@@ -648,6 +659,27 @@ 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}
+`;
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
@@ -1512,7 +1544,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 +1560,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 +1592,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",
@@ -3082,8 +3114,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
@@ -3099,7 +3129,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, RESTYLED = ".knobs-ui,.knobs-panel,.knobs-chip,.knobs-notice", 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, RESTYLED = ".knobs-ui,.knobs-panel,.knobs-chip,.knobs-notice", lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -5478,6 +5527,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];
@@ -5495,7 +5555,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 ?? []];
@@ -5530,7 +5591,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";
@@ -5543,6 +5604,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");
@@ -5550,11 +5615,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, INSTANT.omega, 1, 0.00001);
   const vSpan = new Spring(target.span, INSTANT.omega, 1, 0.00001);
@@ -5563,13 +5630,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 = INSTANT) => {
-    target = clampView(next, duration, { pad: 0.04, minSpan: minSpan() });
+  const retarget = (next, motion = INSTANT, 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 {
@@ -5595,6 +5662,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)
@@ -5682,6 +5751,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) {
@@ -5690,6 +5761,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)
@@ -5706,7 +5807,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);
@@ -5758,6 +5859,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;
@@ -6021,14 +6123,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;
@@ -6089,6 +6202,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);
@@ -6162,6 +6276,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)";
@@ -6169,7 +6284,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);
@@ -6180,18 +6295,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), INSTANT, 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 }, INSTANT, 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), INSTANT, 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) {
@@ -6199,7 +6336,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;
     }
@@ -6281,18 +6418,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();
     }
@@ -6508,7 +6639,7 @@ function timeline(container, options) {
   };
   return api;
 }
-var RULER = 22, INSTANT, CALM, GLIDE, uid2 = 0, PLAY = '<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, INSTANT, CALM, GLIDE, uid2 = 0, PLAY = '<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();
@@ -6580,15 +6711,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;
+  return { cut, feather, seam, blur: t < 0.995 ? FUSE.blur * (1 - t) : 0 };
+}
 function clampZoom(r) {
   const w = Math.min(1, Math.max(1 / ZOOM_MAX, r.w));
   const u = Math.min(1 - w, Math.max(0, r.u));
@@ -6674,7 +6818,15 @@ 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), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), 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), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, FUSE, 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
@@ -6697,6 +6849,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: 24, blur: 4, seamFade: 48 };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
 });
@@ -7591,11 +7744,6 @@ 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);
@@ -7604,8 +7752,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 {
@@ -8007,6 +8157,196 @@ var init_compare_strip = __esm(() => {
   DIFF = { w: 32, h: 18 };
 });
+// src/ui/player.ts
+function player(container, options) {
+  const doc = container.ownerDocument;
+  const el = (tag, cls) => {
+    const n = doc.createElement(tag);
+    n.className = cls;
+    return n;
+  };
+  const look = {
+    ...options.preset ? { preset: options.preset } : {},
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
+  };
+  const root = el("div", "knobs-player");
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", options.label ?? "Video");
+  applyLook2(root, options);
+  const frame = el("div", "knobs-player-frame");
+  frame.style.setProperty("--kp-aspect", String(options.aspect ?? 16 / 9));
+  const v = el("video", "knobs-player-media");
+  v.muted = options.muted ?? true;
+  v.defaultMuted = v.muted;
+  v.playsInline = true;
+  v.preload = "metadata";
+  v.setAttribute("playsinline", "");
+  if (options.poster)
+    v.poster = options.poster;
+  if (options.captions) {
+    const track = doc.createElement("track");
+    track.kind = "captions";
+    track.label = "Captions";
+    track.srclang = doc.documentElement.lang || "en";
+    track.default = true;
+    track.src = options.captions;
+    v.append(track);
+  }
+  const glyph = playGlyph(doc);
+  frame.append(v, glyph.element);
+  const host = el("div", "knobs-player-line");
+  root.append(frame, host);
+  container.append(root);
+  const markers = (options.chapters ?? []).map((c, i) => ({
+    id: c.id ?? `c${i}`,
+    time: c.start,
+    label: c.label
+  }));
+  const tl = timeline(host, {
+    ...look,
+    variant: "line",
+    duration: 1,
+    fps: options.fps ?? 30,
+    markers,
+    repeat: options.loop ?? true,
+    arrows: { step: 5, shift: 10 },
+    label: options.label ? `${options.label} time` : "Video time",
+    ...options.hints === false ? { hints: false } : {}
+  });
+  const onFrame = () => root.setAttribute("data-ready", "");
+  let pending = null;
+  const seekVideo = (t) => {
+    if (v.readyState < 1)
+      return;
+    if (v.seeking)
+      pending = t;
+    else
+      v.currentTime = t;
+  };
+  let reported = 0;
+  const onSeeked = () => {
+    if (pending !== null) {
+      const t = pending;
+      pending = null;
+      v.currentTime = t;
+      return;
+    }
+    if (!v.paused || tl.playing || Math.abs(v.currentTime - reported) < 0.1)
+      return;
+    reported = v.currentTime;
+    options.onSeek?.(reported);
+  };
+  const onMeta = () => {
+    onFrame();
+    if (v.videoWidth)
+      frame.style.setProperty("--kp-aspect", String(v.videoWidth / v.videoHeight));
+    if (Number.isFinite(v.duration))
+      tl.update({ duration: v.duration });
+  };
+  v.addEventListener("loadedmetadata", onMeta);
+  v.addEventListener("loadeddata", onFrame);
+  v.addEventListener("seeked", onSeeked);
+  const unlisten = tl.listen({
+    onSeek(t, source) {
+      if (source === "play") {
+        if (Math.abs(v.currentTime - t) > 0.25)
+          v.currentTime = t;
+        return;
+      }
+      if (Math.abs(v.currentTime - t) < 1 / (options.fps ?? 30))
+        return;
+      seekVideo(t);
+    },
+    onPlay(on) {
+      if (on)
+        v.play().catch(() => tl.pause());
+      else {
+        v.pause();
+        reported = tl.time;
+      }
+      root.toggleAttribute("data-playing", on);
+      options.onPlay?.(on, tl.time);
+    },
+    onScrub(on) {
+      if (on)
+        v.pause();
+    }
+  });
+  tl.drive(() => {
+    if (v.readyState < 1)
+      return Number.NaN;
+    if (v.seeking)
+      return tl.time;
+    return v.ended ? Number.POSITIVE_INFINITY : v.currentTime;
+  });
+  const onClick = (e) => {
+    if (e.button !== 0)
+      return;
+    tl.toggle();
+    glyph.flash(tl.playing);
+    tl.focus();
+  };
+  frame.addEventListener("click", onClick);
+  v.src = options.src;
+  const api = {
+    element: root,
+    video: v,
+    timeline: tl,
+    get time() {
+      return tl.time;
+    },
+    get playing() {
+      return tl.playing;
+    },
+    get duration() {
+      return Number.isFinite(v.duration) ? v.duration : 0;
+    },
+    play: () => tl.play(),
+    pause: () => tl.pause(),
+    toggle: () => tl.toggle(),
+    seek: (t, o) => tl.seek(t, o?.glide ? { glide: true } : undefined),
+    seekBy: (d) => tl.seek(Math.min(tl.duration, Math.max(0, tl.time + d)), { glide: true }),
+    focus: () => tl.focus(),
+    dispose() {
+      unlisten();
+      glyph.dispose();
+      tl.drive(null);
+      tl.dispose();
+      v.pause();
+      v.removeEventListener("loadedmetadata", onMeta);
+      v.removeEventListener("loadeddata", onFrame);
+      v.removeEventListener("seeked", onSeeked);
+      v.removeAttribute("src");
+      v.load();
+      root.remove();
+    }
+  };
+  return api;
+}
+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 ? PLAY : 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_look();
+  init_timeline();
+});
 // src/ui/compare.ts
 function compare(container, options) {
   const doc = container.ownerDocument;
@@ -8114,6 +8454,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");
@@ -8123,7 +8465,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;
@@ -8138,7 +8481,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 },
@@ -8159,12 +8502,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, LAYOUT.omega, LAYOUT.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);
@@ -8451,6 +8795,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;
@@ -8677,43 +9023,65 @@ 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 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`);
@@ -8726,24 +9094,27 @@ 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 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));
+        const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, edge));
         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 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])
@@ -8763,8 +9134,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)),
@@ -8791,6 +9162,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();
@@ -8821,11 +9193,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;
@@ -8851,13 +9221,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)
@@ -8869,7 +9233,8 @@ 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];
     requestDraw();
   };
   const measure = () => {
@@ -8960,8 +9325,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") {
@@ -8971,7 +9338,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);
@@ -8989,6 +9356,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) {
@@ -9002,14 +9371,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;
@@ -9020,11 +9387,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;
@@ -9174,6 +9553,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)
@@ -9188,6 +9568,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, {
@@ -9388,6 +9769,7 @@ function compare(container, options) {
       disposed = true;
       loop.stop();
       modePill?.dispose();
+      glyph.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -9417,7 +9799,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var COMPARE_FFMPEG = "ffmpeg -i in.mov -vf fps=30 -fps_mode cfr -c:v libx264 -preset slow -crf 18 -g 15 -keyint_min 15 -pix_fmt yuv420p -movflags +faststart -an out.mp4", LAYOUT, FADE2, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
+var COMPARE_FFMPEG = "ffmpeg -i in.mov -vf fps=30 -fps_mode cfr -c:v libx264 -preset slow -crf 18 -g 15 -keyint_min 15 -pix_fmt yuv420p -movflags +faststart -an out.mp4", LAYOUT, FADE2, 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();
@@ -9428,15 +9810,17 @@ var init_compare = __esm(() => {
   init_icons();
   init_look();
   init_rgba();
+  init_player();
   init_selection_pill();
   init_timeline();
   init_timeline_model();
-  LAYOUT = springMotion({ duration: 0.35, bounce: 0 });
+  LAYOUT = springMotion(SPRINGS.default);
   FADE2 = 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" },
@@ -10482,19 +10866,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)}
@@ -10532,6 +10916,15 @@ var init_diff_css = __esm(() => {
 .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
@@ -10596,24 +10989,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}
@@ -10625,10 +11020,11 @@ 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)}
@@ -11447,7 +11843,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) => {
@@ -16146,6 +16545,7 @@ init_timeline();
 init_timeline_model();
 init_compare();
 init_compare_strip();
+init_player();
 init_compare_model();
 init_tree();
 init_tree_model();
@@ -19859,7 +20259,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
       };
@@ -19874,6 +20274,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
     };
   });
@@ -19907,6 +20308,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) => ({
@@ -19914,9 +20316,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)
@@ -20742,6 +21175,74 @@ 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 = el(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(text(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();
@@ -20759,7 +21260,7 @@ var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em)
 var walkthroughCss = `
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
 .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-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}
@@ -20772,44 +21273,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(--_k-space-column);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)}
@@ -20870,6 +21384,8 @@ var walkthroughCss = `
 .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}
@@ -20987,32 +21503,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)}
@@ -21027,10 +21539,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}
 }
@@ -21040,9 +21554,14 @@ 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}
+/* 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). */
@@ -21050,11 +21569,11 @@ 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);
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--kw-frame-r);background:var(--_k-fill);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-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
@@ -21064,8 +21583,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)}
@@ -21080,7 +21599,7 @@ 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)}
 /* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
@@ -21192,7 +21711,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%;
@@ -21806,16 +22325,25 @@ function tasteTest(container, options) {
     ...o.media !== undefined ? { media: fillMedia(o.media) } : {},
     suggested: o.suggested === true
   });
-  let picked = options.picked ?? null;
+  const pickable = options.pickable !== false;
+  let picked = pickable ? options.picked ?? null : null;
   const root = el2(doc, "div", "knobs-wt-options");
-  root.setAttribute("role", "radiogroup");
-  root.setAttribute("aria-label", "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");
+    if (!pickable) {
+      const name = el2(doc, "span", "knobs-wt-slot-label");
+      name.textContent = o.label;
+      tile.append(name);
+    }
     const pick = el2(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
@@ -21844,7 +22372,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,
@@ -21927,7 +22456,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);
@@ -22663,7 +23193,14 @@ function walkthrough(container, options) {
     line.append(s);
     return s;
   };
+  const findPRIn = (n) => findPR(page.prs, n, page.repo);
   const metaLink = (line, text, href) => {
+    const n = prNumber(href);
+    if (n) {
+      const chip = prChip(doc, n, { href, ...findPRIn(n) });
+      line.append(chip);
+      return chip;
+    }
     const a = el2(doc, "a");
     a.href = href;
     a.target = "_blank";
@@ -22750,8 +23287,9 @@ 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);
+    root.toggleAttribute("data-review", review);
     const layout = el2(doc, "div", "knobs-wt-layout");
     const main = el2(doc, "div", "knobs-wt-main");
     const flow = el2(doc, "div", "knobs-wt-flow");
@@ -22761,6 +23299,8 @@ function walkthrough(container, options) {
     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");
       for (const m of page.meta) {
@@ -22804,28 +23344,28 @@ function walkthrough(container, options) {
     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);
+      rail.setAttribute("aria-label", "Contents");
       tocEl = el2(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 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) {
+      if (review) {
+        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);
+        rail.append(progress);
+      }
+      rail.append(tocEl);
+      if (review)
+        rail.append(actions(true));
+      if (review && options.keys !== false) {
         const keys = el2(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
@@ -22835,14 +23375,15 @@ function walkthrough(container, options) {
       const sec = el2(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 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);
@@ -22854,13 +23395,14 @@ function walkthrough(container, options) {
       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");
         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) {
@@ -22870,6 +23412,7 @@ function walkthrough(container, options) {
       }
       flow.append(sec);
     }
+    linkPRs(flow, findPRIn);
     main.append(flow);
     if (noteMode !== "hidden")
       main.append(bar.dock);
@@ -22898,19 +23441,25 @@ function walkthrough(container, options) {
         root.dataset.settled = "";
     }));
   };
-  const tocRow = (label, n, end, sub, run, section) => {
+  const more = (text) => {
+    const box = el2(doc, "div", "knobs-wt-more");
+    const body = el2(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 = el2(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");
     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, e);
     b.addEventListener("mousedown", (ev) => ev.preventDefault());
     b.addEventListener("click", run);
     tocRows.push(b);
@@ -22968,33 +23517,26 @@ function walkthrough(container, options) {
     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 = el2(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),
@@ -23003,7 +23545,8 @@ function walkthrough(container, options) {
       media ??= taste.element;
     }
     const notes = el2(doc, "div", "knobs-wt-notes");
-    card.append(notes);
+    if (review)
+      card.append(notes);
     card.addEventListener("focusin", () => {
       if (scroll.to)
         return;
@@ -23013,9 +23556,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 = el2(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 };
@@ -23093,7 +23638,7 @@ function walkthrough(container, options) {
       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)
@@ -23258,6 +23803,7 @@ export {
   mediaKind,
   mediaSlot,
   menu,
+  minutes,
   modeForKey,
   motionBlur,
   moveHead,
@@ -23277,6 +23823,7 @@ export {
   plainAccess,
   planBento,
   planPill,
+  player,
   popover,
   railSegments,
   rank,