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

package/dist/ui-react.js

@@ -576,13 +576,14 @@ var compareCss = `
    picked: the pill's bright copy is. */
 .knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}
 .knobs-cmp-modes[hidden]{display:none}
-.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
-  transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* Hover is a quiet fill under the arrow cursor (no hand, no brightening), there at once. */
+.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;white-space:nowrap;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:not([aria-checked="true"]):is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* Toggles: icon buttons, the accent's wash when on. */
-.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-3);cursor:pointer;
-  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
 .knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
@@ -596,11 +597,10 @@ 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}
+/* Zoomed, it pans: a move cursor, never a hand. */
+.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:move;touch-action:none}
+.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:move!important}
 /* Wiping, the grip stands in for the cursor. */
 .knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}
 .knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
@@ -647,8 +647,8 @@ var compareCss = `
   opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
-  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
-:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
@@ -666,23 +666,29 @@ var playerCss = `
 .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-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage)}
 .knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
 .knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
   opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
 .knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
-.knobs-player-glyph{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:var(--_k-fg);pointer-events:none;
-  opacity:0;filter:blur(4px);scale:.96;
-  background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
-  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim);
-  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),filter calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
-.knobs-player-glyph svg{width:16px;height:16px}
-.knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}
 .knobs-player-line{flex:none;min-height:0}
-/* Hover in is immediate (0 ms), out eases. The timeline's own stylesheet is look.ts's; its hover
-   states are set here, after it, so the player's line and every timeline share them. */
+/* The timeline's own stylesheet is look.ts's; what the player's row and every timeline share
+   about the hand is set here, after it. No hand cursor anywhere (the arrow, or a resize where it
+   resizes); hover is a quiet fill (fill-hover), in at once (hover-in, 0 ms), out easing. */
+.knobs-ui .knobs-tl-play,.knobs-ui.knobs-timeline :is(.knobs-tl-pin,.knobs-tl-rlabel),
+.knobs-ui.knobs-timeline[data-dragging] .knobs-tl-marker :is(.knobs-tl-pin,.knobs-tl-mlabel){cursor:default}
 .knobs-ui .knobs-tl-play:hover,.knobs-tl-edge:hover::after,.knobs-tl-rlabel:hover,.knobs-tl-track:hover .knobs-tl-hover,
 .knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs{transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* The line's row: a minimal play/pause (the filled pair, a 28px target, no fill at rest), then
+   the line, centred on it. */
+.knobs-ui.knobs-timeline[data-variant="line"]{gap:4px;align-items:center}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:flex}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:var(--_k-radius);background:transparent;color:var(--_k-fg-2);
+  transition:background calc(var(--_k-hover-out) * 1ms),transform .15s var(--_ku-ease)}
+.knobs-ui.knobs-timeline[data-variant="line"][data-playing] .knobs-tl-play{background:transparent;color:var(--_k-fg-2)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 `;
 
 // src/ui/overlay-css.ts
@@ -3234,16 +3240,17 @@ var init_diff_css = __esm(() => {
 .knobs-diff-nav>span{min-width:3.6em;text-align:center}
 :where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-choice,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
   margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
-  transition:background .15s,color .15s,opacity .15s}
-.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-2);cursor:default;
+  transition:background calc(var(--_k-hover-out) * 1ms),opacity .15s}
+/* Hover is a quiet fill under the arrow cursor (no hand, no brightening), there at once. */
+.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
 .knobs-diff-btn svg{width:16px;height:16px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
 .knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
-  font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+  font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:default;transition:background calc(var(--_k-hover-out) * 1ms),color .15s}
+.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
@@ -3262,8 +3269,8 @@ var init_diff_css = __esm(() => {
    choice isn't brighter for being picked. Choices are styled by class, as the copy holds them too. */
 .knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-fill)}
 .knobs-ui .knobs-diff-choice{padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
-  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-diff-choice:not([aria-checked="true"]):is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
 .knobs-diff-body{position:relative;flex:1;min-height:0}
 .knobs-diff-probe{position:absolute;left:0;top:0;width:0;height:var(--kd-line);visibility:hidden;pointer-events:none}
@@ -3359,8 +3366,8 @@ var init_diff_css = __esm(() => {
 .knobs-diff-filter svg{width:12px;height:12px;flex:none}
 .knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--_k-weight) var(--_k-font-size)/1 var(--_k-font);color:var(--_k-fg);caret-color:var(--_k-accent);background:transparent}
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
-.knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
-.knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms),opacity .12s}
+.knobs-ui .knobs-diff-filter>button:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-diff-filter>button svg{width:12px;height:12px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
 .knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
@@ -11216,29 +11223,6 @@ var init_compare_strip = __esm(() => {
   DIFF = { w: 32, h: 18 };
 });
 
-// src/ui/player.ts
-function playGlyph(doc) {
-  const element = doc.createElement("span");
-  element.className = "knobs-player-glyph";
-  element.setAttribute("aria-hidden", "true");
-  let timer = 0;
-  const win = doc.defaultView;
-  return {
-    element,
-    flash(playing) {
-      element.innerHTML = playing ? PLAY2 : PAUSE;
-      element.setAttribute("data-flash", "");
-      win.clearTimeout(timer);
-      timer = win.setTimeout(() => element.removeAttribute("data-flash"), FLASH_MS);
-    },
-    dispose: () => win.clearTimeout(timer)
-  };
-}
-var FLASH_MS = 450;
-var init_player = __esm(() => {
-  init_timeline();
-});
-
 // src/ui/compare.ts
 function compare(container, options) {
   const doc = container.ownerDocument;
@@ -11357,8 +11341,7 @@ function compare(container, options) {
   grip.setAttribute("aria-hidden", "true");
   handle.append(grip);
   const note = el("div", "knobs-cmp-note");
-  const glyph = playGlyph(doc);
-  stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note, glyph.element);
+  stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note);
   root.append(bar, stage);
   const wantsStrip = options.strip === true;
   let tl = bound;
@@ -11400,7 +11383,6 @@ function compare(container, options) {
   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);
@@ -12229,10 +12211,8 @@ 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") {
@@ -12260,8 +12240,6 @@ 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) {
@@ -12291,11 +12269,6 @@ 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;
@@ -12457,7 +12430,6 @@ 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)
@@ -12472,7 +12444,6 @@ 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, {
@@ -12673,7 +12644,6 @@ function compare(container, options) {
       disposed = true;
       loop.stop();
       modePill?.dispose();
-      glyph.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -12714,7 +12684,6 @@ var init_compare = __esm(() => {
   init_icons();
   init_look();
   init_rgba();
-  init_player();
   init_selection_pill();
   init_timeline();
   init_timeline_model();
@@ -12733,6 +12702,171 @@ var init_compare = __esm(() => {
   };
 });
 
+// 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);
+  }
+  frame.append(v);
+  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 = () => 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();
+      tl.drive(null);
+      tl.dispose();
+      v.pause();
+      frame.removeEventListener("click", onClick);
+      v.removeEventListener("loadedmetadata", onMeta);
+      v.removeEventListener("loadeddata", onFrame);
+      v.removeEventListener("seeked", onSeeked);
+      v.removeAttribute("src");
+      v.load();
+      root.remove();
+    }
+  };
+  return api;
+}
+var init_player = __esm(() => {
+  init_look();
+  init_timeline();
+});
+
 // src/ui/react.tsx
 import {
   Children,
@@ -18215,25 +18349,63 @@ function normalizeWalkthrough(doc) {
     })),
     sections: withKickers(sections, doc.sections, doc.kickers),
     steps,
-    prs: knownPRs(doc, sections),
+    prs: knownPRs(doc, sections, steps),
     ...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) {
+var PR_STATES = ["merged", "open", "draft", "closed"];
+function prStatus(status) {
+  const words = (status ?? "").trim().toLowerCase();
+  const first = /^[a-z]+/.exec(words)?.[0] ?? "";
+  const state = PR_STATES.includes(first) ? first : first === "shipped" || first === "done" ? "merged" : null;
+  return { state, checks: /\b(green|passing|passed|ci|checks? pass)/.test(words) };
+}
+function knownPRs(doc, sections, steps = []) {
   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") };
-  }
+  const add = (n, pr) => {
+    const known = out[n] ?? {};
+    const next = { ...known };
+    for (const [k, v] of Object.entries(pr))
+      if (v !== undefined && next[k] === undefined)
+        next[k] = v;
+    out[n] = next;
+  };
   for (const [k, pr] of Object.entries(doc.prs ?? {})) {
     const n = k.replace(/^#/, "");
     if (!/^\d+$/.test(n))
       continue;
-    out[n] = { ...out[n], ...pr };
+    add(n, pr);
+  }
+  for (const step of steps)
+    for (const m of step.media) {
+      if (m.kind !== "stack")
+        continue;
+      for (const it of m.items) {
+        const n = it.pr.replace(/^#/, "");
+        if (!/^\d+$/.test(n))
+          continue;
+        const said = prStatus(it.status);
+        add(n, {
+          ...said.state ? { state: said.state } : {},
+          ...said.state && said.checks ? { checks: true } : {},
+          ...it.title ? { title: plainMarkdown(it.title) } : {},
+          ...it.href ? { href: it.href } : {}
+        });
+      }
+    }
+  for (const s of sections) {
+    const n = s.link && prNumber(s.link.href);
+    if (!n)
+      continue;
+    const said = prStatus(s.status);
+    add(n, {
+      href: s.link.href.replace(/(\/pull\/\d+).*$/, "$1"),
+      ...said.state ? { state: said.state } : {},
+      title: plainMarkdown(s.title)
+    });
   }
   if (repo) {
     for (const n of Object.keys(out))
@@ -18242,12 +18414,17 @@ function knownPRs(doc, sections) {
   }
   return out;
 }
-function findPR(prs, n, repo) {
-  const known = prs[n];
+function findPR(prs, n, repo, kind = "pr") {
+  const entry = prs[n];
+  const known = entry && (entry.kind ?? "pr") === kind ? entry : undefined;
+  const path = kind === "issue" ? "issues" : "pull";
+  const href = repo ? `https://github.com/${repo}/${path}/${n}` : undefined;
+  const base = kind === "issue" ? { kind } : {};
   if (known)
-    return known;
-  return repo ? { href: `https://github.com/${repo}/pull/${n}` } : null;
+    return known.href || !href ? { ...base, ...known } : { ...base, ...known, href };
+  return href ? { ...base, href } : kind === "issue" ? { kind } : null;
 }
+var issueNumber = (href) => /^https?:\/\/[^/]+\/.+\/issues\/(\d+)\/?(?:[?#].*)?$/.exec(href)?.[1] ?? null;
 var isPullRequest = (href) => /\/(?:pull|merge_requests)\/\d+(?:[/?#]|$)/.test(href);
 function withKickers(sections, source, kickers = "pr") {
   if (kickers === false)
@@ -19211,7 +19388,7 @@ function mountHistory(host, m, steps) {
     context: () => ({ kind: "history" })
   };
 }
-function mountStack(host, m, steps) {
+function mountStack(host, m, steps, findPR) {
   const doc = host.ownerDocument;
   const layout = stackLayout(m);
   const root = el2(doc, "div", "knobs-wt-stack");
@@ -19253,7 +19430,10 @@ function mountStack(host, m, steps) {
     const line = el2(doc, "div", "knobs-wt-sline");
     if (it.order)
       line.append(text2(doc, "span", "knobs-wt-sord", it.order));
-    line.append(link(doc, "knobs-wt-spr", it.pr, it.href));
+    const known = findPR?.(it.pr.replace(/^#/, "")) ?? null;
+    const pr = link(doc, "knobs-wt-spr", it.pr, it.href ?? known?.href);
+    pr.addEventListener("click", (e) => e.stopPropagation());
+    line.append(pr);
     const target = it.step ? steps?.find(it.step) : null;
     if (target && steps) {
       const title = text2(doc, "button", "knobs-wt-stitle", it.title);
@@ -19288,7 +19468,11 @@ function mountStack(host, m, steps) {
     if (meta.childNodes.length)
       main.append(meta);
     row.append(main);
-    if (it.status) {
+    const said = prStatus(it.status);
+    const state = known?.state ?? said.state;
+    if (state)
+      row.append(prStateLabel(doc, state, said.checks, it.status));
+    else if (it.status) {
       const chip = text2(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
       chip.dataset.tone = it.tone ?? "dim";
       row.append(chip);
@@ -19595,8 +19779,29 @@ 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 DRAFT = "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,192ZM232,192a32,32,0,1,1-32-32A32,32,0,0,1,232,192ZM216,192a16,16,0,1,0-16,16A16,16,0,0,0,216,192ZM212,120a12,12,0,1,1-12-12A12,12,0,0,1,212,120ZM212,60a12,12,0,1,1-12-12A12,12,0,0,1,212,60Z";
+var X = "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z";
+var CHECK3 = "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z";
+var svg12 = (d, evenodd = false) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="12" height="12" fill="currentColor"${evenodd ? ' fill-rule="evenodd"' : ""} aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
+var prGlyph = (state) => state === "merged" ? svg12(PR_PATHS.merge) : state === "draft" ? svg12(DRAFT, true) : state === "closed" ? svg12(X) : svg12(PR_PATHS.pull);
 var PR_STATE = { merged: "Merged", open: "Open", draft: "Draft", closed: "Closed" };
+var ISSUE = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-88a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z";
+function prStateLabel(doc, state, checks, title) {
+  const s = el2(doc, "span", "knobs-wt-prstate");
+  s.dataset.state = state;
+  s.innerHTML = prGlyph(state);
+  s.append(text2(doc, "span", "", PR_STATE[state]));
+  if (checks) {
+    const c = el2(doc, "span", "knobs-wt-prchecks");
+    c.innerHTML = svg12(CHECK3);
+    c.title = "Checks pass";
+    c.setAttribute("aria-label", "checks pass");
+    s.append(c);
+  }
+  if (title)
+    s.title = title;
+  return s;
+}
 function prChip(doc, n, pr) {
   const chip = el2(doc, pr.href ? "a" : "span", "knobs-wt-pr");
   if (pr.href) {
@@ -19604,27 +19809,55 @@ function prChip(doc, n, pr) {
     chip.setAttribute("target", "_blank");
     chip.setAttribute("rel", "noreferrer");
   }
+  const issue = pr.kind === "issue";
+  if (issue)
+    chip.dataset.kind = "issue";
   if (pr.state)
     chip.dataset.state = pr.state;
-  chip.innerHTML = prGlyph(pr.state === "merged");
+  chip.innerHTML = issue ? svg12(ISSUE) : prGlyph(pr.state);
   chip.append(text2(doc, "span", "", `#${n}`));
-  const tip = [`#${n}`, pr.title, pr.state ? PR_STATE[pr.state] : ""].filter(Boolean).join(" · ");
-  chip.title = tip;
-  chip.setAttribute("aria-label", `Pull request ${tip}`);
+  if (pr.checks) {
+    const c = el2(doc, "span", "knobs-wt-prchecks");
+    c.innerHTML = svg12(CHECK3);
+    chip.append(c);
+  }
+  const words = [
+    `${issue ? "Issue" : "Pull request"} #${n}`,
+    pr.title,
+    pr.state ? PR_STATE[pr.state] : "",
+    pr.checks ? "checks pass" : ""
+  ].filter(Boolean);
+  chip.title = words.slice(1).length ? `#${n} · ${words.slice(1).join(" · ")}` : `#${n}`;
+  chip.setAttribute("aria-label", words.join(" · "));
   return chip;
 }
 var PR_URL = /^https?:\/\/[^/]+\/.+\/(?:pull|merge_requests)\/(\d+)\/?(?:[?#].*)?$/;
-var PR_REF = /(^|[^\w&/#])#(\d{3,7})\b/g;
+var ISSUE_URL = /^https?:\/\/[^/]+\/.+\/issues\/(\d+)\/?(?:[?#].*)?$/;
+var REF = /(^|[^\w&/#:])(issue:)?#(\d{3,7})\b/gi;
+var WHOLE_REF = /^(issue:)?#(\d{1,7})$/i;
+var KEEP = 'a,pre,button,.knobs-wt-pr,.knobs-wt-slot:not([data-kind="table"]),.knobs-wt-stack';
 function linkPRs(root, find) {
   const doc = root.ownerDocument;
+  const chip = (n, kind, href) => prChip(doc, n, { ...kind === "issue" ? { kind } : {}, ...find(n, kind), ...href ? { href } : {} });
   for (const a of Array.from(root.querySelectorAll("a[href]"))) {
-    if (a.classList.contains("knobs-wt-pr") || a.closest(".knobs-wt-slot,button"))
+    if (a.classList.contains("knobs-wt-pr") || a.parentElement?.closest(KEEP))
+      continue;
+    const url = a.getAttribute("href") ?? "";
+    const pr = PR_URL.exec(url)?.[1];
+    const n = pr ?? ISSUE_URL.exec(url)?.[1];
+    if (!n)
       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")))
+    const words = (a.textContent ?? "").trim().replace(/^issue:/i, "");
+    if (!(words === `#${n}` || words === n || words === url))
       continue;
-    a.replaceWith(prChip(doc, n, { href: a.href, ...find(n) }));
+    a.replaceWith(chip(n, pr ? "pr" : "issue", a.href));
+  }
+  for (const c of Array.from(root.querySelectorAll("code"))) {
+    if (c.closest("pre") || c.parentElement?.closest(KEEP))
+      continue;
+    const m = WHOLE_REF.exec((c.textContent ?? "").trim());
+    if (m)
+      c.replaceWith(chip(m[2], m[1] ? "issue" : "pr"));
   }
   const walker = doc.createTreeWalker(root, 5);
   const hits = [];
@@ -19632,29 +19865,22 @@ function linkPRs(root, find) {
     if (t.nodeType !== 3)
       continue;
     const p = t.parentElement;
-    if (!p || p.closest("a,code,pre,button,.knobs-wt-slot,.knobs-wt-pr"))
+    if (!p || p.closest(`${KEEP},code`))
       continue;
-    PR_REF.lastIndex = 0;
-    if (PR_REF.test(t.nodeValue ?? ""))
+    REF.lastIndex = 0;
+    if (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;
+    REF.lastIndex = 0;
+    for (let m = REF.exec(value);m; m = REF.exec(value)) {
       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;
+      frag.append(value.slice(last, at), chip(m[3], m[2] ? "issue" : "pr"));
+      last = m.index + m[0].length;
     }
-    if (!changed)
-      continue;
     frag.append(value.slice(last));
     t.replaceWith(frag);
   }
@@ -19673,7 +19899,7 @@ var snappy3 = springCss(SPRINGS.snappy);
 var calm = springCss(SPRINGS.calm);
 var state = springCss(SPRINGS.default);
 var quick = springCss(FADE);
-var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)";
+var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)";
 var walkthroughCss = `
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
 .knobs-ui:is(.knobs-walkthrough,.knobs-wt-slot){--k-glass:0;--k-glow:0;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms}
@@ -19685,7 +19911,7 @@ var walkthroughCss = `
 .knobs-walkthrough [hidden]{display:none!important}
 /* (0,0,1): a host's element rules stop here, and every class rule below wins over it. */
 :where(.knobs-walkthrough) :is(h1,h2,h3,p,ol,ul,dl,dd){margin:0;font:inherit;letter-spacing:inherit}
-.knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
+.knobs-walkthrough a{cursor:default;color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
 .knobs-walkthrough a:hover{text-decoration-color:currentColor}
 .knobs-walkthrough code,.knobs-wt-slot code{font:var(--_k-type-label) var(--_k-mono);padding:1px 5px;border-radius:calc(var(--_k-radius) / 2);background:var(--_k-fill)}
 :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;
@@ -19713,14 +19939,17 @@ var walkthroughCss = `
 .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;
+/* A pull request or issue: a capsule, its state's icon and number in a quiet tint of the state
+   (open the success hue, merged the violet series, draft and closed faint, unknown neutral; a
+   closed issue is done, so violet), a faint check where its checks pass, 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 6px 0 5px;margin:0 1px;border-radius:9px;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 .knobs-wt-pr[data-kind="issue"][data-state="closed"]{--kw-pr:color-mix(in oklch,var(--_k-series-5) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-pr .knobs-wt-prchecks{margin-left:0}
 .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}
@@ -19779,14 +20008,14 @@ var walkthroughCss = `
 .knobs-wt-fi-ask{max-width:var(--kw-measure);color:var(--_k-fg);font-weight:var(--kw-strong);text-wrap:pretty}
 .knobs-wt-fi-text{max-width:var(--kw-measure);color:var(--_k-fg);text-wrap:pretty}
 .knobs-wt-fi-answer{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
-:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;margin:0;padding:0;cursor:pointer;outline:none;
+:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;margin:0;padding:0;cursor:default;outline:none;
   transition:color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 
 /* ——— a disclosure: a small faint toggle with a caret, no fill. The body's height springs (in
    script) and its content fades in place, top-anchored, under a soft bottom mask ——— */
 .knobs-wt-disc{display:flex;flex-direction:column;min-width:0}
-.knobs-ui .knobs-wt-disc-toggle{display:inline-flex;align-items:center;gap:var(--_k-space-inside);width:max-content;height:20px;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);cursor:pointer;
+.knobs-ui .knobs-wt-disc-toggle{display:inline-flex;align-items:center;gap:var(--_k-space-inside);width:max-content;height:20px;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);cursor:default;
   border-radius:calc(var(--_k-radius) / 2);transition:color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-disc-toggle:is(:hover,:focus-visible),.knobs-wt-disc[data-open]>.knobs-wt-disc-toggle{color:var(--_k-fg-2);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-wt-disc-toggle:focus-visible{box-shadow:0 0 0 2px var(--_k-focus)}
@@ -19813,7 +20042,7 @@ var walkthroughCss = `
 .knobs-wt-n[data-leaving]{opacity:0;filter:blur(3px);padding-block:0}
 .knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--_k-border-subtle)}
 .knobs-wt-n-meta{flex:none;min-width:44px;color:var(--_k-fg-3);font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-body) var(--_k-mono)}
-.knobs-wt-n-meta[data-seek]{cursor:pointer}
+.knobs-wt-n-meta[data-seek]{cursor:default}
 .knobs-wt-n-meta[data-seek]:hover{color:var(--_k-fg)}
 .knobs-wt-n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
 .knobs-wt-n-voice{height:30px;max-width:320px}
@@ -19830,7 +20059,7 @@ var walkthroughCss = `
 /* Collapsed: the launcher and the bar swap in place, a quick fade with a little scale and blur
    from the launcher's corner; the exit is the shorter. */
 :where(.knobs-ui) .knobs-wt-launch{all:revert;box-sizing:border-box;justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 10px 0 9px;border:0;border-radius:var(--_k-round);
-  background:var(--_k-bg);color:var(--_k-fg-2);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font:var(--kw-strong) var(--_k-type-small)/1 var(--_k-font);cursor:pointer;outline:none;transform-origin:100% 100%;
+  background:var(--_k-bg);color:var(--_k-fg-2);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font:var(--kw-strong) var(--_k-type-small)/1 var(--_k-font);cursor:default;outline:none;transform-origin:100% 100%;
   transition:color calc(var(--_k-hover-out) * 1ms),opacity var(--kw-quick-ms) var(--kw-quick),scale var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
 .knobs-ui .knobs-wt-launch:is(:hover,:focus-visible){color:var(--_k-fg)}
 .knobs-ui .knobs-wt-launch:focus-visible{box-shadow:var(--_k-focus-ring)}
@@ -19850,11 +20079,11 @@ var walkthroughCss = `
 .knobs-wt-attach{display:flex;gap:4px;align-items:center;align-self:center}
 .knobs-wt-attach:empty{display:none}
 .knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:var(--_k-round);background:var(--_k-fill-selected);font-size:var(--_k-type-small);white-space:nowrap}
-.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:default;transition:background .15s,color .15s}
 .knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-wt-x svg{width:12px;height:12px}
 .knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--_k-radius) + 2px);
-  color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
+  color:var(--_k-fg-2);cursor:default;transition:background .15s,color .15s}
 .knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-wt-tool svg{width:16px;height:16px}
@@ -19864,7 +20093,7 @@ var walkthroughCss = `
 .knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--_k-accent);color:var(--_k-bg)}
 /* Back: in place over the bar for a few seconds after a note moves the page on. */
 .knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:var(--_k-space-inside);max-width:min(360px,calc(100% - 16px));height:28px;padding:0 12px 0 9px;
-  border-radius:var(--_k-round);background:var(--_k-bg);color:var(--_k-fg);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:var(--_k-type-small);font-weight:var(--kw-strong);cursor:pointer;
+  border-radius:var(--_k-round);background:var(--_k-bg);color:var(--_k-fg);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:var(--_k-type-small);font-weight:var(--kw-strong);cursor:default;
   opacity:0;scale:.96;filter:blur(3px);pointer-events:none;transition:opacity .11s cubic-bezier(.4,0,1,1),scale .11s cubic-bezier(.4,0,1,1),filter .11s cubic-bezier(.4,0,1,1)}
 .knobs-ui .knobs-wt-back[data-on]{opacity:1;scale:1;filter:none;pointer-events:auto;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1)}
 .knobs-ui .knobs-wt-back:hover{background:var(--_k-fill-selected)}
@@ -19891,6 +20120,9 @@ var walkthroughCss = `
 .knobs-wt-step[data-full] .knobs-wt-body{flex:1;min-height:0}
 .knobs-wt-step[data-full] .knobs-wt-fit{height:100%;transition:none}
 .knobs-wt-step[data-full] .knobs-wt-frame{height:100%;aspect-ratio:auto}
+.knobs-wt-step[data-full] .knobs-wt-slot[data-kind="video"]>.knobs-wt-body{display:flex;flex-direction:column}
+.knobs-wt-step[data-full] .knobs-wt-slot[data-kind="video"] .knobs-player{flex:1;min-height:0}
+.knobs-wt-step[data-full] .knobs-wt-slot[data-kind="video"] .knobs-player-frame{flex:1;min-height:0;aspect-ratio:auto}
 
 /* ——— a taste test: the options side by side, Kit's pick checked and the rest stepping back. On
    the step's card, so no fill of their own ——— */
@@ -19899,7 +20131,7 @@ var walkthroughCss = `
 .knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0}
 .knobs-wt-option>:not(.knobs-wt-pick){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
 .knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-pick){opacity:.55}
-.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;margin:0 -6px;width:calc(100% + 12px);padding:0 6px;border-radius:var(--_k-radius);cursor:pointer;color:var(--_k-fg-2);text-align:left;
+.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;margin:0 -6px;width:calc(100% + 12px);padding:0 6px;border-radius:var(--_k-radius);cursor:default;color:var(--_k-fg-2);text-align:left;
   transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_k-fill);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-wt-letter{flex:none;font-weight:var(--kw-strong);color:var(--_k-fg)}
@@ -19922,17 +20154,18 @@ var walkthroughCss = `
 .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: 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}
+/* The contents: every row on one text edge and in one colour, title rows (28 high, the control
+   radius) and the steps under them (20 high, half of it), bled 6 px out so their text sits on the
+   rail's edge and the first title's words on the column's top line; a narrow fade where a title
+   runs out of room; 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:-4px -6px 0;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: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-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:28px;
+  padding:0 6px;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:default;
+  transition:color calc(var(--_k-hover-out) * 1ms),background 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)}
-.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-row:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-wt-toc-row:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
 .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}}
@@ -19944,7 +20177,7 @@ var walkthroughCss = `
 .knobs-wt-toc-glyph[data-done]{background:var(--kw-tone)}
 .knobs-wt-toc-glyph[data-tone="none"]{box-shadow:inset 0 0 0 1px var(--_k-border)}
 .knobs-wt-actions{display:flex;flex-wrap:wrap;gap:4px}
-.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
+.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;white-space:nowrap;
   transition:background .15s,color .15s}
 .knobs-ui .knobs-wt-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-wt-btn[data-primary]{background:var(--_k-fill-selected);color:var(--_k-fg)}
@@ -19978,11 +20211,10 @@ var walkthroughCss = `
 /* 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
+/* A compare is as tall as its two pictures side by side at this width, in every mode (Wipe fuses
+   them at one side's size, so nothing grows or re-measures), plus its mode bar, the line and gaps
    (92 px), and the frame strip with its gap (158 px). */
 .knobs-wt-fit{width:100%;height:calc(100cqw / 2 / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
-.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:var(--kw-frame-r);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
@@ -19991,8 +20223,12 @@ var walkthroughCss = `
 .knobs-wt-frame[data-natural]>img{position:static;height:auto}
 /* Diff, code and terminal: one plain container (no glass): a flat inset fill, a hairline ring, the
    control radius and room inside, so a diff's buttons and the code under them can breathe. */
-.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body{padding:var(--_k-space-sibling) var(--_k-pad-card) var(--_k-pad-card);border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle)}
-.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
+.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body{padding:var(--_k-pad-card);border-radius:var(--_k-radius-panel);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle)}
+/* The diff inside it: its header row 28 high on the container's padding, a hairline under it, and
+   no line of its own under the code (the container's ring closes it). */
+.knobs-wt-slot[data-kind="diff"] .knobs-ui.knobs-diff:not([data-on="pane"]){--kd-head:28px;--kd-x:0px}
+.knobs-wt-slot[data-kind="diff"] .knobs-ui.knobs-diff:not([data-on="pane"])::after{display:none}
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--_k-radius-panel);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
   font:var(--_k-type-label)/var(--_k-leading-body) var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
 .knobs-surface :is(.knobs-wt-code,.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body){padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
 .knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
@@ -20038,7 +20274,7 @@ var walkthroughCss = `
 .knobs-wt-mark:is([data-shape="dot"],[data-shape="arrow"]) .knobs-wt-mark-label{left:12px;bottom:auto;top:10px}
 .knobs-wt-mark[data-shape="arrow"] .knobs-wt-mark-label{left:auto;right:30px;top:auto;bottom:30px}
 .knobs-ui .knobs-wt-anno-toggle{all:revert;box-sizing:border-box;position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;margin:0;
-  border-radius:var(--_k-radius);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);color:var(--_k-fg-2);cursor:pointer;opacity:.6;outline:none;
+  border-radius:var(--_k-radius);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);color:var(--_k-fg-2);cursor:default;opacity:.6;outline:none;
   transition:opacity calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-anno-toggle:is(:hover,:focus-visible){opacity:1;color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-wt-anno-toggle:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
@@ -20059,7 +20295,7 @@ var walkthroughCss = `
 .knobs-wt-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;margin:0 -8px;padding:var(--kw-spt) 8px var(--kw-spb);
   border-radius:max(0px,calc(var(--_k-radius-panel) - 8px));transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-wt-srow[data-trunk]{--kw-spb:0px;grid-template-columns:auto minmax(0,1fr)}
-.knobs-wt-srow[data-go]{cursor:pointer}
+.knobs-wt-srow[data-go]{cursor:default}
 .knobs-wt-srow[data-go]:hover{background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-wt-lanes{display:flex;align-self:stretch;margin-block:calc(var(--kw-spt) * -1) calc(var(--kw-spb) * -1)}
 .knobs-wt-lane{position:relative;flex:none;width:16px}
@@ -20075,7 +20311,7 @@ var walkthroughCss = `
 .knobs-ui .knobs-wt-spr{font:var(--_k-weight-label) var(--_k-type-label)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2);text-decoration:none;white-space:nowrap}
 .knobs-ui a.knobs-wt-spr:is(:hover,:focus-visible){color:var(--_k-fg);text-decoration:underline}
 .knobs-ui .knobs-wt-stitle{font-weight:var(--_k-weight-label);line-height:var(--kw-line);color:var(--_k-fg);text-align:left}
-.knobs-ui button.knobs-wt-stitle{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui button.knobs-wt-stitle{cursor:default;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui :is(.knobs-wt-srow[data-go]:hover button.knobs-wt-stitle,button.knobs-wt-stitle:focus-visible){text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-wt-ssummary{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
 .knobs-wt-smeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:var(--_k-weight) var(--_k-type-small)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
@@ -20083,12 +20319,21 @@ var walkthroughCss = `
 .knobs-wt-add{color:var(--_k-diff-add)}
 .knobs-wt-del{color:var(--_k-diff-del)}
 .knobs-wt-sstatus{margin-top:calc((var(--kw-line) - 20px) / 2)}
+/* A PR's state the GitHub way: its glyph and word, open and merged quietly tinted (as PR chips),
+   draft and closed faint; no fill, no dot. A check after it where the checks pass, faint too. One
+   width for every row, so the glyphs and words line up. */
+.knobs-ui .knobs-wt-prstate{--kw-pr:var(--_k-fg-3);display:inline-flex;align-items:center;gap:4px;min-width:calc(7ch + 32px);height:var(--kw-line);color:var(--kw-pr);
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);white-space:nowrap}
+.knobs-ui .knobs-wt-prstate[data-state="open"]{--kw-pr:color-mix(in oklch,var(--_k-ok) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-prstate[data-state="merged"]{--kw-pr:color-mix(in oklch,var(--_k-series-5) 60%,var(--_k-fg-2))}
+.knobs-wt-prstate svg{flex:none}
+.knobs-ui .knobs-wt-prchecks{display:inline-flex;margin-left:2px;color:var(--_k-fg-3)}
 .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr) auto}
 .knobs-wt-stack[data-flat] .knobs-wt-srow+.knobs-wt-srow{box-shadow:inset 0 1px 0 var(--_k-border)}
 @container knobs-wt-slot (max-width:520px){
   .knobs-wt-srow:not([data-trunk]){grid-template-columns:auto minmax(0,1fr)}
   .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr)}
-  .knobs-wt-sstatus{grid-column:-2;justify-self:start;margin-top:4px}
+  :is(.knobs-wt-sstatus,.knobs-wt-prstate){grid-column:-2;justify-self:start;margin-top:4px}
 }
 
 /* A table: a real one, its head stuck while it scrolls, both ways; edges fade where there's more
@@ -20098,7 +20343,7 @@ var walkthroughCss = `
 .knobs-wt-tablebox{min-width:0}
 /* A row with a step goes there: the whole row, a wash under the pointer, no arrow, so rows with and
    without one line up. */
-.knobs-wt-tablebox [data-go]{cursor:pointer;outline:none}
+.knobs-wt-tablebox [data-go]{cursor:default;outline:none}
 .knobs-wt-tablebox tr[data-go]>td,.knobs-wt-trow[data-go]{transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-wt-tablebox tr[data-go]:is(:hover,:focus-visible)>td,.knobs-wt-trow[data-go]:is(:hover,:focus-visible){background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-wt-tablebox [data-go]:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
@@ -20154,13 +20399,18 @@ var walkthroughCss = `
 .knobs-wt-body:has(>.knobs-wt-chapters){display:flex;flex-direction:column;gap:var(--_k-space-title)}
 .knobs-wt-chapters{position:relative;display:flex;flex-direction:column;margin:0 calc(var(--_k-space-sibling) * -1)}
 .knobs-ui .knobs-wt-chapter{position:relative;display:grid;grid-template-columns:2ch minmax(0,1fr) auto;column-gap:var(--_k-space-sibling);align-items:center;height:32px;padding:0 var(--_k-space-sibling);
-  border-radius:var(--_k-radius);color:var(--_k-fg-2);text-align:left;white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-chapter:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+  border-radius:var(--_k-radius);color:var(--_k-fg-2);text-align:left;white-space:nowrap;cursor:default;transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-chapter:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-wt-chapter:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
 .knobs-wt-chapter-n{font-size:var(--_k-type-small);color:var(--_k-fg-3)}
 .knobs-wt-chapter-label{min-width:0;overflow:hidden;${fade2}}
 .knobs-wt-chapter-time{font:var(--_k-weight) var(--_k-type-small)/1 var(--_k-mono);color:var(--_k-fg-3)}
 .knobs-pick-copy :is(.knobs-wt-chapter-n,.knobs-wt-chapter-time){color:var(--_k-fg-2)}
+/* Every hover in the walkthrough lands at once (hover-in, 0 ms) and eases out (hover-out): links,
+   buttons, chips, rail, chapter, table and stack rows (its own; the pieces inside keep theirs). */
+:is(.knobs-walkthrough,.knobs-wt-slot) :is(a,button,[data-go])[class*="knobs-wt-"]:is(:hover,:focus-visible),
+.knobs-walkthrough a:not([class]):hover,
+:is(.knobs-walkthrough,.knobs-wt-slot) :is(.knobs-wt-srow,tr)[data-go]:is(:hover,:focus-visible) :is(td,.knobs-wt-stitle){transition-duration:calc(var(--_k-hover-in) * 1ms)}
 @media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
 @media(prefers-reduced-motion:reduce){.knobs-wt-disc-content{transition:opacity .15s}}
 `;
@@ -20261,7 +20511,6 @@ async function mountCompare(host, m, look, alive, onEvent) {
   fit.style.setProperty("--kw-aspect", String(known ?? DEFAULT_ASPECT));
   const width = host.getBoundingClientRect().width;
   const mode = m.mode ?? (width && width < 560 ? "wipe" : "side");
-  fit.toggleAttribute("data-overlay", mode !== "side");
   host.append(fit);
   const [aspect, lib] = await Promise.all([
     known ? Promise.resolve(known) : probeAspect(doc, after.src),
@@ -20285,7 +20534,6 @@ async function mountCompare(host, m, look, alive, onEvent) {
     ...aspect ? { aspect } : {},
     ...m.strip ? { strip: true } : {},
     onMode: (next) => {
-      fit.toggleAttribute("data-overlay", next !== "side");
       onEvent?.({ what: "mode", detail: next });
       const layer = marks?.element;
       if (layer) {
@@ -20309,6 +20557,12 @@ async function mountCompare(host, m, look, alive, onEvent) {
     }
   });
   const stage = fit.querySelector(".knobs-cmp-stage");
+  if (stage)
+    doc.defaultView?.requestAnimationFrame(() => {
+      const chrome = fit.clientHeight - stage.clientHeight;
+      if (alive() && stage.clientHeight > 0 && chrome > 0)
+        fit.style.setProperty("--kw-chrome", `${Math.round(chrome)}px`);
+    });
   if (m.annotations?.length && stage) {
     const shape = { w: aspect ?? DEFAULT_ASPECT, h: 1 };
     marks = annotationLayer(stage, m.annotations, () => {
@@ -20384,45 +20638,38 @@ async function mountCompare(host, m, look, alive, onEvent) {
 var round2 = (v) => Math.round(v * 100) / 100;
 var MARK_GLIDE = 450;
 var zoomedIn = (z) => z.w < 0.999 || z.h < 0.999;
-function mountVideo(host, m, onEvent) {
+async function mountVideo(host, m, look, alive, onEvent) {
   const doc = host.ownerDocument;
-  const frame = div(doc, "knobs-wt-frame");
+  await Promise.resolve().then(() => init_player());
+  if (!alive())
+    return { dispose() {} };
   const aspect = parseAspect(m.aspect);
-  if (aspect)
-    frame.style.setProperty("--kw-aspect", String(aspect));
-  const v = doc.createElement("video");
-  v.controls = true;
-  v.loop = true;
-  v.muted = true;
-  v.playsInline = true;
-  v.preload = "metadata";
-  if (m.poster)
-    v.poster = m.poster;
-  if (!aspect)
-    v.addEventListener("loadedmetadata", () => v.videoWidth && frame.style.setProperty("--kw-aspect", String(v.videoWidth / v.videoHeight)), { once: true });
-  if (m.captions) {
-    const track = doc.createElement("track");
-    track.kind = "captions";
-    track.label = "Captions";
-    track.srclang = doc.documentElement.lang || "en";
-    track.default = true;
-    track.src = m.captions;
-    v.append(track);
-  }
-  v.src = m.src;
-  v.addEventListener("play", () => onEvent?.({ what: "play", time: round2(v.currentTime) }));
-  v.addEventListener("pause", () => onEvent?.({ what: "pause", time: round2(v.currentTime) }));
-  v.addEventListener("seeked", () => {
-    if (v.paused)
-      onEvent?.({ what: "seek", time: round2(v.currentTime) });
+  let pills = null;
+  let marking = null;
+  const p = player(host, {
+    ...look,
+    src: m.src,
+    ...m.poster ? { poster: m.poster } : {},
+    ...m.captions ? { captions: m.captions } : {},
+    ...aspect ? { aspect } : {},
+    ...m.label ? { label: m.label } : {},
+    ...m.chapters?.length ? { chapters: m.chapters.map((c) => ({ label: c.label, start: c.start, ...c.id ? { id: c.id } : {} })) } : {},
+    onPlay: (on, time) => {
+      marking?.kick();
+      onEvent?.({ what: on ? "play" : "pause", time: round2(time) });
+    },
+    onSeek: (time) => {
+      pills?.sync();
+      marking?.kick();
+      onEvent?.({ what: "seek", time: round2(time) });
+    }
   });
-  frame.append(v);
-  host.append(frame);
-  const pills = m.chapters?.length ? chapterPills(host, m.chapters, {
-    now: () => v.currentTime,
+  const v = p.video;
+  pills = m.chapters?.length ? chapterPills(host, m.chapters, {
+    now: () => p.time,
     seek: (t) => {
-      v.currentTime = t;
-      v.play().catch(() => {});
+      p.seek(t, { glide: true });
+      p.play();
     },
     onEvent
   }) : null;
@@ -20430,36 +20677,33 @@ function mountVideo(host, m, onEvent) {
   if (pills)
     for (const type of ["timeupdate", "seeking", "seeked"])
       v.addEventListener(type, sync);
+  const frame = p.element.querySelector(".knobs-player-frame") ?? p.element;
   const marks = m.annotations?.length ? annotationLayer(frame, m.annotations, () => ({
     rects: [
       contain({ w: frame.clientWidth, h: frame.clientHeight }, { w: v.videoWidth, h: v.videoHeight })
     ],
-    time: v.currentTime
+    time: p.time
   })) : null;
-  const marking = marks ? follow(doc.defaultView, () => !v.paused, () => marks.update()) : null;
-  if (marking)
-    for (const type of ["play", "seeked", "loadedmetadata", "timeupdate"])
-      v.addEventListener(type, () => marking.kick());
+  if (marks) {
+    marking = follow(doc.defaultView, () => p.playing, () => marks.update());
+    for (const type of ["seeked", "loadedmetadata", "timeupdate"])
+      v.addEventListener(type, () => marking?.kick());
+  }
   return {
-    pause: () => v.pause(),
-    seekBy: (d) => {
-      v.currentTime = Math.max(0, Math.min(v.duration || Infinity, v.currentTime + d));
-    },
+    pause: () => p.pause(),
+    seekBy: (d) => p.seekBy(d),
     context: () => ({
       kind: "video",
-      time: round2(v.currentTime),
-      ...Number.isFinite(v.duration) ? { duration: round2(v.duration) } : {},
-      playing: !v.paused,
+      time: round2(p.time),
+      ...p.duration ? { duration: round2(p.duration) } : {},
+      playing: p.playing,
       ...pills?.current ? { chapter: pills.current.label } : {}
     }),
     dispose: () => {
       marking?.stop();
       marks?.dispose();
       pills?.dispose();
-      v.pause();
-      v.removeAttribute("src");
-      v.load();
-      frame.remove();
+      p.dispose();
     }
   };
 }
@@ -20720,7 +20964,7 @@ function mediaSlot(container, options) {
       case "diff":
         return void mountDiff(host, m, look, alive, options.onEvent).then(done, fail("diff"));
       case "video":
-        return done(mountVideo(host, m, options.onEvent));
+        return void mountVideo(host, m, look, alive, options.onEvent).then(done, fail("video"));
       case "image":
         return done(mountImage(host, m));
       case "code":
@@ -20734,7 +20978,7 @@ function mediaSlot(container, options) {
       case "history":
         return done(mountHistory(host, m, options.steps));
       case "stack":
-        return done(mountStack(host, m, options.steps));
+        return done(mountStack(host, m, options.steps, options.findPR));
       case "table":
         return done(mountTable(host, m, options.steps));
       case "mount": {
@@ -20788,7 +21032,7 @@ function mediaSlot(container, options) {
     }
   };
 }
-var CHECK3 = icon("check", { small: true });
+var CHECK4 = icon("check", { small: true });
 
 // src/ui/walkthrough.ts
 var el3 = (doc, tag, cls) => {
@@ -20875,7 +21119,7 @@ function tasteTest(container, options) {
       pick.append(key);
     }
     const check = el3(doc, "span", "knobs-wt-check");
-    check.innerHTML = CHECK3;
+    check.innerHTML = CHECK4;
     pick.append(check);
     pick.addEventListener("click", () => {
       const next = picked === o.id ? null : o.id;
@@ -21703,11 +21947,12 @@ function walkthrough(container, options) {
     line.append(s);
     return s;
   };
-  const findPRIn = (n) => findPR(page.prs, n, page.repo);
+  const findPRIn = (n, kind = "pr") => findPR(page.prs, n, page.repo, kind);
   const metaLink = (line, text, href) => {
     const n = prNumber(href);
-    if (n) {
-      const chip = prChip(doc, n, { href, ...findPRIn(n) });
+    const issue = n ? null : issueNumber(href);
+    if (n || issue) {
+      const chip = n ? prChip(doc, n, { ...findPRIn(n), href }) : prChip(doc, issue, { ...findPRIn(issue, "issue"), href });
       line.append(chip);
       return chip;
     }
@@ -22036,7 +22281,7 @@ function walkthrough(container, options) {
       media = el3(doc, "div", "knobs-wt-media");
       media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
       for (const m of step.media)
-        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
+        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks, findPR: findPRIn }));
       card.append(media);
     }
     let taste = null;