@kitlangton/knobs 0.4.0-next.7 → 0.4.0-next.9

package/dist/ui.js

@@ -4995,7 +4995,7 @@ function planPill(state, next, flags = {}) {
   if (t && t.x === next.x && t.y === next.y && t.w === next.w && t.h === next.h)
     return { kind: "stay" };
   const d = Math.hypot(next.x - state.at.x, next.y - state.at.y);
-  return { kind: "travel", box: next, spring: pillSpring(d) };
+  return { kind: "travel", box: next, spring: pillSpring(d, flags.spring) };
 }
 function selectionPill(container, options) {
   const doc = container.ownerDocument;
@@ -5019,7 +5019,7 @@ function selectionPill(container, options) {
   container.prepend(pill);
   if (copyOn)
     container.append(copy);
-  const { omega, zeta } = springMotion(SPRINGS.default);
+  const { omega, zeta } = springMotion(options.spring ?? SPRINGS.default);
   const springs = [0, 0, 0, 0].map(() => new Spring(0, omega, zeta, 0.01));
   const [sx, sy, sw, sh] = springs;
   let shown = false;
@@ -5120,7 +5120,8 @@ function selectionPill(container, options) {
     const plan = planPill({ shown, at: shown ? at() : null, target }, next, {
       first,
       reduced: reducedMotion(win),
-      ...o?.snap ? { snap: true } : {}
+      ...o?.snap ? { snap: true } : {},
+      ...options.spring ? { spring: options.spring } : {}
     });
     first = false;
     for (const n of clones.values())
@@ -8341,6 +8342,7 @@ function compare(container, options) {
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
+  let tap = null;
   const touches = new Map;
   let pinch = null;
   const zu = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
@@ -9172,15 +9174,18 @@ function compare(container, options) {
     touches.set(e.pointerId, p);
     stage.setPointerCapture(e.pointerId);
     if (touches.size >= 2) {
+      tap = null;
       e.preventDefault();
       return startPinch();
     }
+    tap = e.target === handle ? null : { id: e.pointerId, x: p.x, y: p.y };
     if (mode === "wipe") {
       const wr = wipeRect(layoutNow().L.overlay);
       const inside = p.x >= wr.x - SLOP && p.x <= wr.x + wr.w + SLOP && p.y >= wr.y && p.y <= wr.y + wr.h;
       const grab = wipeGrab(p.x, wr, wipeLine.x, SLOP);
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
+        tap = null;
         root.dataset.dragging = "";
         gripAt.snap(wr.h > 0 ? (p.y - wr.y) / wr.h : 0.5);
         e.preventDefault();
@@ -9200,6 +9205,8 @@ function compare(container, options) {
   const onMove = (e) => {
     const p = local(e);
     pointer = p;
+    if (tap && Math.hypot(p.x - tap.x, p.y - tap.y) > TAP_SLOP)
+      tap = null;
     if (touches.has(e.pointerId))
       touches.set(e.pointerId, p);
     if (pinch && touches.size >= 2) {
@@ -9232,6 +9239,11 @@ function compare(container, options) {
     touches.delete(e.pointerId);
     if (touches.size < 2)
       pinch = null;
+    if (tap?.id === e.pointerId) {
+      tap = null;
+      if (e.type === "pointerup" && sides.some((s) => s.kind === "video"))
+        api.toggle();
+    }
     if (!drag)
       return;
     if (drag.kind === "wipe") {
@@ -9633,7 +9645,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, MARK, 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, TAP_SLOP = 4, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -9662,6 +9674,174 @@ 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();
+    tl.toggle();
+  };
+  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/scrollbar.ts
 function overlayScrollbar(scroller, content) {
   const doc = scroller.ownerDocument;
@@ -16379,169 +16559,8 @@ init_timeline();
 init_timeline_model();
 init_compare();
 init_compare_strip();
+init_player();
 
-// src/ui/player.ts
-init_look();
-init_timeline();
-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;
-}
 // src/ui/history.ts
 init_motion();
 init_glide();
@@ -16580,7 +16599,7 @@ var historyCss = `
 .knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}
 
 /* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */
-.knobs-hy-band{position:absolute;top:0;bottom:0;background:color-mix(in oklch,var(--_k-fg) 3.5%,transparent);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}
+.knobs-hy-band{position:absolute;top:0;bottom:0;background:var(--_k-fill);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}
 :is(.knobs-hy-grid,.knobs-hy-today,.knobs-hy-hover,.knobs-hy-sel){position:absolute;left:0;top:calc(var(--hy-bandrow) + var(--hy-axis));bottom:0;width:1px;margin-left:-.5px}
 .knobs-hy-grid{background:var(--_k-border-subtle)}
 .knobs-hy-today{top:calc(var(--hy-bandrow) + var(--hy-axis) - 4px);background:var(--_k-accent)}
@@ -17133,10 +17152,59 @@ function fillMedia(m, base) {
       };
     case "table":
       return fillTable(m);
+    case "facts":
+      return {
+        kind: "facts",
+        ...m.title ? { title: m.title } : {},
+        groups: [
+          ...m.facts ? [{ facts: fillFacts(m.facts) }] : [],
+          ...(m.groups ?? []).map((g) => ({
+            ...g.title ? { title: g.title } : {},
+            facts: fillFacts(g.facts)
+          }))
+        ]
+      };
+    case "decision":
+      return { kind: "decision", options: fillDecision(m.options, m.noun, base) };
     default:
       return m;
   }
 }
+function fillFacts(facts) {
+  const list = Array.isArray(facts) ? facts : Object.entries(facts).map(([term, value]) => ({ term, value }));
+  return list.map((f) => {
+    const code = f.code === true;
+    const raw = typeof f.value === "string" ? [f.value] : [...f.value];
+    const value = (code ? raw.flatMap((v) => v.split(/\s*,\s*/)) : raw).map((v) => v.trim()).filter(Boolean);
+    return { term: f.term, value, code };
+  });
+}
+function optionColumns(count, width, min = 280, gap = 48) {
+  for (let c = Math.min(count, 4);c > 1; c--)
+    if (count % c === 0 && (width - gap * (c - 1)) / c >= min)
+      return c;
+  return 1;
+}
+function fillDecision(options, noun = "Option", base) {
+  const unique = uniqueIds();
+  return options.map((o, i) => {
+    if ("number" in o)
+      return o;
+    const extra = [
+      ...o.pros?.length ? [{ term: "For", value: o.pros }] : [],
+      ...o.cons?.length ? [{ term: "Against", value: o.cons }] : []
+    ];
+    return {
+      id: unique(o.id ?? slug(o.title)),
+      number: `${noun} ${i + 1}`,
+      title: o.title,
+      ...o.summary ? { summary: o.summary } : {},
+      ...o.media !== undefined ? { media: fillMedia(o.media, base) } : {},
+      facts: [...o.facts ? fillFacts(o.facts) : [], ...fillFacts(extra)],
+      recommended: o.recommended === true
+    };
+  });
+}
 function historyData(m) {
   const events = m.events ?? [];
   if (m.lanes || m.bands || m.states || m.axis)
@@ -17341,7 +17409,8 @@ function normalizeWalkthrough(doc) {
         letter: String.fromCharCode(65 + oi % 26),
         ...o.caption ? { caption: o.caption } : {},
         ...o.media !== undefined ? { media: fillMedia(o.media, doc.base) } : {},
-        suggested: o.suggested === true
+        ...o.facts ? { facts: fillFacts(o.facts) } : {},
+        suggested: o.suggested === true || o.recommended === true
       }));
       const list = step.media === undefined ? [] : Array.isArray(step.media) ? step.media : [step.media];
       const asked = step.ask === "verdict" ? "note" : step.ask;
@@ -17414,25 +17483,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))
@@ -17441,13 +17548,17 @@ function knownPRs(doc, sections) {
   }
   return out;
 }
-function findPR(prs, n, repo) {
-  const known = prs[n];
-  const href = repo ? `https://github.com/${repo}/pull/${n}` : undefined;
+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.href || !href ? known : { ...known, href };
-  return href ? { href } : 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)
@@ -21758,6 +21869,230 @@ init_motion();
 init_page_hints();
 init_icons();
 init_look();
+
+// src/review/foundations.ts
+init_motion();
+var TRACKING = 0.03;
+var MEASURE = "66ch";
+var FONT = {
+  sans: 'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
+  mono: 'ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace'
+};
+var FEATURES = {
+  figures: "tabular-nums",
+  data: '"tnum" 1,"ss01" 1',
+  code: "none"
+};
+var MOTION2 = [
+  {
+    name: "hover",
+    spring: null,
+    ms: "0 in, 120 out",
+    use: "A hover's fill: on at once, off softly"
+  },
+  {
+    name: "quick",
+    spring: FADE,
+    use: "Replacing a whole thing in place: fade, scale .98, blur 3 px"
+  },
+  { name: "close", spring: CLOSE, use: "A popover closing" },
+  { name: "snappy", spring: SPRINGS.snappy, use: "Controls: a toggle, a pick, a chapter row" },
+  { name: "state", spring: SPRINGS.default, use: "The selection pill, a disclosure opening" },
+  {
+    name: "calm",
+    spring: SPRINGS.calm,
+    use: "Layout: a compare's height, the page scrolling to a step"
+  },
+  { name: "smooth", spring: SPRINGS.smooth, use: "A step opening to the full window" }
+];
+var foundationCss = `
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review){
+  --_kr-track:calc((var(--_k-type-body) - 1em) * ${TRACKING});
+  --_kr-measure:var(--k-walkthrough-measure,${MEASURE});
+  --_kr-block:calc(var(--_k-space-title) * 2);
+  --_kr-data:${FEATURES.data};
+  letter-spacing:var(--_kr-track);font-variant-numeric:${FEATURES.figures};font-optical-sizing:auto;font-kerning:normal}
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review) :where(*){letter-spacing:var(--_kr-track)}
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review) :where(code,pre,kbd,samp,.knobs-wt-mono){letter-spacing:0;font-variant-ligatures:${FEATURES.code}}
+`;
+
+// src/themes/review.ts
+init_define();
+
+// src/themes/void.ts
+init_define();
+init_knobs();
+var voidTheme = defineTheme({
+  name: "void",
+  extends: knobs,
+  gray: { hue: 0, chroma: 0 },
+  accent: { dark: "#ffffff", light: "#1c1c1c" },
+  material: "flat",
+  tokens: {
+    dark: {
+      "bg-page": "#000000",
+      "bg-inset": "#0a0a0a",
+      bg: "#000000",
+      "bg-raised": "#1c1c1e",
+      "bg-overlay": "#2c2c2e",
+      fg: "#ededed",
+      "fg-2": "#cecece",
+      "fg-3": "#989898",
+      "fg-4": "#7a7a7a",
+      "compare-stage": "#000000"
+    }
+  }
+});
+
+// src/themes/review.ts
+var reviewTheme = defineTheme({
+  name: "review",
+  extends: voidTheme,
+  font: FONT,
+  tokens: {
+    dark: {
+      fill: "#ededed0f",
+      "fill-hover": "#ededed1a",
+      "fill-selected": "#ededed24",
+      "border-subtle": "#ededed47",
+      border: "#ededed4f",
+      "border-strong": "#585858"
+    },
+    light: {
+      "bg-page": "#ffffff",
+      "bg-inset": "#f7f7f7",
+      bg: "#ffffff",
+      "bg-raised": "#ffffff",
+      "bg-overlay": "#ffffff",
+      fill: "#1919190a",
+      "fill-hover": "#19191912",
+      "fill-selected": "#1919191c",
+      "border-subtle": "#19191917",
+      border: "#1919191d",
+      "border-strong": "#dcdcdc"
+    }
+  }
+});
+
+// src/ui/review-look.ts
+var MODES2 = { dark: "dark", light: "light", auto: "system" };
+var THEMED = '[data-knobs-theme]:not([data-knobs-theme="dark"],[data-knobs-theme="light"])';
+function reviewLook(options, container) {
+  const t = options.theme;
+  if (typeof t === "object")
+    return options;
+  if (!t && container?.closest(THEMED))
+    return options;
+  const appearance = options.appearance ?? (t ? MODES2[t] : undefined);
+  return { ...options, theme: reviewTheme, ...appearance ? { appearance } : {} };
+}
+
+// src/ui/review-options.ts
+var el2 = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+function renderFacts(doc, groups) {
+  const box = el2(doc, "div", "knobs-wt-facts");
+  for (const g of groups) {
+    if (!g.facts.length && !g.title)
+      continue;
+    const group = el2(doc, "section", "knobs-wt-fgroup");
+    if (g.title) {
+      const head = el2(doc, "h3", "knobs-wt-fhead");
+      head.innerHTML = inlineMarkdown(g.title);
+      group.append(head);
+    }
+    if (g.facts.length)
+      group.append(factList(doc, g.facts));
+    box.append(group);
+  }
+  return box;
+}
+function factList(doc, facts) {
+  const dl = el2(doc, "dl", "knobs-wt-fterms");
+  for (const f of facts) {
+    const row = el2(doc, "div", "knobs-wt-fact");
+    const dt = el2(doc, "dt");
+    dt.innerHTML = inlineMarkdown(f.term);
+    const dd = el2(doc, "dd");
+    if (f.code) {
+      dd.dataset.code = "";
+      for (const v of f.value) {
+        const chip = el2(doc, "code");
+        chip.textContent = v;
+        dd.append(chip);
+      }
+    } else
+      for (const v of f.value) {
+        const line = el2(doc, "div");
+        line.innerHTML = inlineMarkdown(v);
+        dd.append(line);
+      }
+    row.append(dt, dd);
+    dl.append(row);
+  }
+  return dl;
+}
+function optionTile(doc, o, options = {}) {
+  const tile = el2(doc, "div", "knobs-wt-option");
+  const head = options.head ?? el2(doc, "div");
+  head.classList.add("knobs-wt-ohead");
+  const kicker = el2(doc, "span", "knobs-wt-okicker");
+  const n = el2(doc, "span");
+  n.textContent = o.number;
+  kicker.append(n);
+  if (o.recommended) {
+    const rec = el2(doc, "span", "knobs-wt-orec");
+    rec.textContent = "Recommended";
+    kicker.append(rec);
+  }
+  const title = el2(doc, "span", "knobs-wt-otitle");
+  title.innerHTML = inlineMarkdown(o.title);
+  head.append(kicker, title);
+  tile.append(head);
+  if (o.summary) {
+    const p = el2(doc, "p", "knobs-wt-osum");
+    p.innerHTML = inlineMarkdown(o.summary);
+    tile.append(p);
+  }
+  options.media?.(tile);
+  if (o.facts?.length)
+    tile.append(renderFacts(doc, [{ facts: o.facts }]));
+  return { tile, head, kicker };
+}
+function layoutOptions(root, tiles) {
+  let cols = 0;
+  const layout = () => {
+    const width = root.clientWidth;
+    if (!width)
+      return;
+    const next = optionColumns(tiles.length, width);
+    if (next === cols)
+      return;
+    cols = next;
+    root.style.setProperty("--kw-cols", String(cols));
+    const rows = Math.ceil(tiles.length / cols);
+    tiles.forEach((t, i) => {
+      const row = Math.floor(i / cols);
+      t.dataset.col = String(i % cols);
+      t.dataset.row = String(row);
+      t.toggleAttribute("data-end", i % cols === cols - 1);
+      t.toggleAttribute("data-last-row", row === rows - 1);
+    });
+  };
+  layout();
+  const win = root.ownerDocument.defaultView;
+  if (!win || typeof win.ResizeObserver !== "function")
+    return () => {};
+  const ro = new win.ResizeObserver(layout);
+  ro.observe(root);
+  return () => ro.disconnect();
+}
+
+// src/ui/walkthrough.ts
 init_selection_pill();
 
 // src/ui/walkthrough-annotations.ts
@@ -21878,19 +22213,19 @@ init_selection_pill();
 var GLYPH = {
   caret: icon("caretRight", { small: true })
 };
-var el2 = (doc, tag, cls) => {
+var el3 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
 var text2 = (doc, tag, cls, value) => {
-  const n = el2(doc, tag, cls);
+  const n = el3(doc, tag, cls);
   n.textContent = value;
   return n;
 };
 var prose = (doc, tag, cls, value) => {
-  const n = el2(doc, tag, cls);
+  const n = el3(doc, tag, cls);
   n.innerHTML = inlineMarkdown(value);
   return n;
 };
@@ -21946,10 +22281,10 @@ function mountHistory(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");
+  const root = el3(doc, "div", "knobs-wt-stack");
   root.toggleAttribute("data-flat", layout.flat);
   const lane = (kind) => {
-    const s = el2(doc, "span", "knobs-wt-lane");
+    const s = el3(doc, "span", "knobs-wt-lane");
     s.dataset.rail = kind;
     return s;
   };
@@ -21960,9 +22295,9 @@ function mountStack(host, m, steps, findPR) {
   };
   const from = layout.trunk ? 0 : 1;
   if (layout.trunk && layout.rows.length) {
-    const row = el2(doc, "div", "knobs-wt-srow");
+    const row = el3(doc, "div", "knobs-wt-srow");
     row.dataset.trunk = "";
-    const lanes = el2(doc, "span", "knobs-wt-lanes");
+    const lanes = el3(doc, "span", "knobs-wt-lanes");
     lanes.setAttribute("aria-hidden", "true");
     lanes.append(node(true));
     row.append(lanes, text2(doc, "span", "knobs-wt-trunk", layout.trunk));
@@ -21970,9 +22305,9 @@ function mountStack(host, m, steps, findPR) {
   }
   for (const r of layout.rows) {
     const it = r.item;
-    const row = el2(doc, "div", "knobs-wt-srow");
+    const row = el3(doc, "div", "knobs-wt-srow");
     if (!layout.flat) {
-      const lanes = el2(doc, "span", "knobs-wt-lanes");
+      const lanes = el3(doc, "span", "knobs-wt-lanes");
       lanes.setAttribute("aria-hidden", "true");
       for (let k = from;k < r.depth; k++)
         lanes.append(lane(r.rails[k] ? "pass" : "none"));
@@ -21981,8 +22316,8 @@ function mountStack(host, m, steps, findPR) {
       lanes.append(node(r.children > 0));
       row.append(lanes);
     }
-    const main = el2(doc, "div", "knobs-wt-smain");
-    const line = el2(doc, "div", "knobs-wt-sline");
+    const main = el3(doc, "div", "knobs-wt-smain");
+    const line = el3(doc, "div", "knobs-wt-sline");
     if (it.order)
       line.append(text2(doc, "span", "knobs-wt-sord", it.order));
     const known = findPR?.(it.pr.replace(/^#/, "")) ?? null;
@@ -22013,7 +22348,7 @@ function mountStack(host, m, steps, findPR) {
     main.append(line);
     if (it.summary)
       main.append(prose(doc, "p", "knobs-wt-ssummary", it.summary));
-    const meta = el2(doc, "div", "knobs-wt-smeta");
+    const meta = el3(doc, "div", "knobs-wt-smeta");
     if (it.head) {
       const branch = r.offBase ? `${it.head} → ${r.offBase}` : it.head;
       meta.append(text2(doc, "span", "knobs-wt-sbranch", branch));
@@ -22038,7 +22373,7 @@ function mountStack(host, m, steps, findPR) {
   return { dispose: () => root.remove(), context: () => ({ kind: "stack" }) };
 }
 function delta(doc, d) {
-  const s = el2(doc, "span", "knobs-wt-delta");
+  const s = el3(doc, "span", "knobs-wt-delta");
   if (typeof d === "string") {
     s.textContent = d;
     return s;
@@ -22078,13 +22413,13 @@ var cellAttrs = (td, c) => {
 function mountTable(host, m, steps) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
-  const box = el2(doc, "div", "knobs-wt-tablebox");
-  const scroller = el2(doc, "div", "knobs-wt-table");
-  const table = el2(doc, "table");
+  const box = el3(doc, "div", "knobs-wt-tablebox");
+  const scroller = el3(doc, "div", "knobs-wt-table");
+  const table = el3(doc, "table");
   if (m.caption)
     table.append(text2(doc, "caption", "", m.caption));
-  const head = el2(doc, "thead");
-  const hr = el2(doc, "tr");
+  const head = el3(doc, "thead");
+  const hr = el3(doc, "tr");
   for (const c of m.columns) {
     const th = text2(doc, "th", "", c.label);
     th.scope = "col";
@@ -22092,11 +22427,11 @@ function mountTable(host, m, steps) {
     hr.append(th);
   }
   head.append(hr);
-  const body = el2(doc, "tbody");
+  const body = el3(doc, "tbody");
   for (const r of m.rows) {
-    const tr = el2(doc, "tr");
+    const tr = el3(doc, "tr");
     for (const c of m.columns) {
-      const td = el2(doc, "td");
+      const td = el3(doc, "td");
       cellAttrs(td, c);
       const cell = r[c.key];
       if (cell) {
@@ -22111,24 +22446,24 @@ function mountTable(host, m, steps) {
   }
   table.append(head, body);
   scroller.append(table);
-  const stack = el2(doc, "div", "knobs-wt-tstack");
+  const stack = el3(doc, "div", "knobs-wt-tstack");
   stack.setAttribute("role", "list");
   if (m.caption)
     stack.setAttribute("aria-label", m.caption);
   const primary = m.columns.find((c) => c.key === m.primary) ?? m.columns[0];
   for (const r of m.rows) {
-    const item = el2(doc, "div", "knobs-wt-trow");
+    const item = el3(doc, "div", "knobs-wt-trow");
     item.setAttribute("role", "listitem");
-    const title = el2(doc, "div", "knobs-wt-ttitle");
+    const title = el3(doc, "div", "knobs-wt-ttitle");
     if (primary) {
       cellAttrs(title, primary);
       const cell = r[primary.key];
       if (cell)
         cellContent(doc, title, cell);
     }
-    const line = el2(doc, "div", "knobs-wt-tline");
+    const line = el3(doc, "div", "knobs-wt-tline");
     line.append(title);
-    const badges = el2(doc, "div", "knobs-wt-tbadges");
+    const badges = el3(doc, "div", "knobs-wt-tbadges");
     for (const c of m.columns) {
       const cell = r[c.key];
       if (c !== primary && cell?.badge)
@@ -22137,14 +22472,14 @@ function mountTable(host, m, steps) {
     if (badges.childNodes.length)
       line.append(badges);
     item.append(line);
-    const terms = el2(doc, "dl", "knobs-wt-tterms");
+    const terms = el3(doc, "dl", "knobs-wt-tterms");
     for (const c of m.columns) {
       if (c === primary)
         continue;
       const cell = r[c.key];
       if (!cell || cell.text === "" || cell.badge)
         continue;
-      const dd = el2(doc, "dd");
+      const dd = el3(doc, "dd");
       cellAttrs(dd, c);
       dd.removeAttribute("data-align");
       cellContent(doc, dd, cell);
@@ -22210,12 +22545,12 @@ function mountTable(host, m, steps) {
 }
 function chapterPills(host, chapters, io) {
   const doc = host.ownerDocument;
-  const list = el2(doc, "div", "knobs-wt-chapters");
+  const list = el3(doc, "div", "knobs-wt-chapters");
   list.setAttribute("role", "group");
   list.setAttribute("aria-label", "Chapters");
   let at = -2;
   const rows = chapters.map((c, i) => {
-    const b = el2(doc, "button", "knobs-wt-chapter");
+    const b = el3(doc, "button", "knobs-wt-chapter");
     b.type = "button";
     b.append(text2(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
     b.append(text2(doc, "span", "knobs-wt-chapter-label", c.label));
@@ -22231,7 +22566,8 @@ function chapterPills(host, chapters, io) {
   host.append(list);
   const pill = selectionPill(list, {
     selected: () => rows[at] ?? null,
-    rows: () => rows
+    rows: () => rows,
+    spring: SPRINGS.snappy
   });
   const select = (i) => {
     if (i === at)
@@ -22257,13 +22593,13 @@ function disclosure(host, options) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
   let open = options.open === true;
-  const root = el2(doc, "div", "knobs-wt-disc");
-  const toggle = el2(doc, "button", "knobs-wt-disc-toggle");
+  const root = el3(doc, "div", "knobs-wt-disc");
+  const toggle = el3(doc, "button", "knobs-wt-disc-toggle");
   toggle.type = "button";
   toggle.innerHTML = GLYPH.caret;
   toggle.append(text2(doc, "span", "", options.label));
-  const viewport = el2(doc, "div", "knobs-wt-disc-body");
-  const content = el2(doc, "div", "knobs-wt-disc-content");
+  const viewport = el3(doc, "div", "knobs-wt-disc-body");
+  const content = el3(doc, "div", "knobs-wt-disc-content");
   content.append(options.content);
   viewport.append(content);
   root.append(toggle, viewport);
@@ -22340,19 +22676,14 @@ var CHECK3 = "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11
 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" };
-function prStatus(status) {
-  const words = (status ?? "").trim().toLowerCase();
-  const first = /^[a-z]+/.exec(words)?.[0] ?? "";
-  const state = first in PR_STATE ? first : null;
-  return { state, checks: /\b(green|passing|passed|ci|checks? pass)/.test(words) };
-}
+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");
+  const s = el3(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");
+    const c = el3(doc, "span", "knobs-wt-prchecks");
     c.innerHTML = svg12(CHECK3);
     c.title = "Checks pass";
     c.setAttribute("aria-label", "checks pass");
@@ -22363,33 +22694,61 @@ function prStateLabel(doc, state, checks, title) {
   return s;
 }
 function prChip(doc, n, pr) {
-  const chip = el2(doc, pr.href ? "a" : "span", "knobs-wt-pr");
+  const chip = el3(doc, pr.href ? "a" : "span", "knobs-wt-pr");
   if (pr.href) {
     chip.setAttribute("href", pr.href);
     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);
+  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 = el3(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(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;
-    a.replaceWith(prChip(doc, n, { href: a.href, ...find(n) }));
+    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 = [];
@@ -22397,29 +22756,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);
   }
@@ -22438,22 +22790,26 @@ 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 walkthroughCss = `
+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 = `${foundationCss}
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
 .knobs-ui:is(.knobs-walkthrough,.knobs-wt-slot){--k-glass:0;--k-glow:0;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms}
 .knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;--kw-state:${state.easing};--kw-state-ms:${state.duration}ms;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms;
-  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-rail-gap:calc(var(--_k-space-group) + var(--_k-space-column) / 1.5);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
+  --kw-measure:var(--_kr-measure);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-rail-gap:calc(var(--_k-space-group) + var(--_k-space-column) / 1.5);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
   --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-under:var(--_k-bg-page);--kw-ink:var(--k-walkthrough-ink,#ff375f);--kw-strong:var(--_k-weight-label);
   container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;text-align:left;
-  letter-spacing:normal;-webkit-font-smoothing:antialiased}
+  letter-spacing:var(--_kr-track);-webkit-font-smoothing:antialiased}
 .knobs-walkthrough [hidden]{display:none!important}
+/* Prose: wrapped to look set by hand, quotes hung in the margin (Safari). Data: figures that line
+   up and can't be misread. */
+:where(.knobs-wt-summary,.knobs-wt-ssum,.knobs-wt-caption,.knobs-wt-more-text,.knobs-wt-fi-text,.knobs-wt-fi-answer,.knobs-wt-ocap,.knobs-wt-text,.knobs-wt-callout,.knobs-wt-ssummary,.knobs-wt-osum){text-wrap:pretty;hanging-punctuation:first allow-end last}
+:where(.knobs-wt-table table,.knobs-wt-tterms,.knobs-wt-facts,.knobs-wt-smeta,.knobs-wt-metaline,.knobs-wt-meta,.knobs-wt-pr,.knobs-wt-prstate,.knobs-wt-sord){font-feature-settings:var(--_kr-data)}
 /* (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}
+:where(.knobs-walkthrough) :is(h1,h2,h3,p,ol,ul,dl,dd){margin:0;font:inherit;letter-spacing:var(--_kr-track)}
+.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;
+: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:var(--_kr-track);
   background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
 
 /* ——— layout: the contents rail sticky at the left edge (right if asked), and the column centred
@@ -22478,14 +22834,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}
@@ -22544,14 +22903,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)}
@@ -22578,7 +22937,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}
@@ -22595,7 +22954,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)}
@@ -22608,18 +22967,18 @@ var walkthroughCss = `
   box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay)}
 .knobs-wt-on{padding-top:3px;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);white-space:nowrap;overflow:hidden;${fade2}}
 .knobs-wt-row{display:flex;align-items:flex-end;gap:4px}
-:where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;
+:where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:var(--_kr-track);background:transparent;border:0;
   border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
 .knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--_k-fg);caret-color:var(--_k-accent);line-height:var(--_k-leading-body);font-size:var(--_k-type-body)}
 .knobs-ui .knobs-wt-input::placeholder{color:var(--_k-fg-3)}
 .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}
@@ -22629,7 +22988,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)}
@@ -22656,28 +23015,57 @@ 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 ——— */
-.knobs-wt-options{display:grid;grid-template-columns:repeat(var(--kw-n,2),minmax(0,1fr));gap:var(--_k-space-group) var(--_k-space-column)}
-@container knobs-wt-step (max-width:640px){.knobs-wt-options{grid-template-columns:minmax(0,1fr)}}
-.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;
-  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)}
-.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--kw-strong);color:var(--_k-fg)}
-.knobs-wt-suggested{flex:none;font-size:var(--_k-type-small);color:var(--_k-fg-3)}
-.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--_k-fill);color:transparent;
-  transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy)}
+/* ——— options: a decision, or a taste test when Kit picks. Columns that fill whole rows (4 → 4, 2
+   or 1 across; 3 → 3 or 1), a hairline between neighbours and between rows, no card of their own.
+   Each: a kicker ("Option 1 · Recommended", the mark a quiet word in text colour), its title, a
+   sentence, its media and what changes as facts. A pick dims the rest ——— */
+.knobs-wt-options{--kw-ogap:var(--_k-space-group);display:grid;grid-template-columns:repeat(var(--kw-cols,1),minmax(0,1fr));gap:var(--kw-ogap);min-width:0}
+.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0}
+.knobs-wt-option[data-col]:not([data-col="0"])::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--kw-ogap) / -2);width:1px;background:var(--_k-border-subtle);pointer-events:none}
+.knobs-wt-option[data-col]:not([data-row="0"])::before{top:calc(var(--kw-ogap) / -2)}
+.knobs-wt-option[data-col]:not([data-last-row])::before{bottom:calc(var(--kw-ogap) / -2)}
+.knobs-wt-option[data-col]:not([data-row="0"])::after{content:"";position:absolute;top:calc(var(--kw-ogap) / -2);left:calc(var(--kw-ogap) / -2);right:calc(var(--kw-ogap) / -2);height:1px;background:var(--_k-border-subtle);pointer-events:none}
+.knobs-wt-option[data-col="0"]::after{left:0}
+.knobs-wt-option[data-end]::after{right:0}
+.knobs-wt-option>:not(.knobs-wt-ohead){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
+.knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-ohead){opacity:.55}
+.knobs-wt-ohead{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0;text-align:left}
+.knobs-wt-okicker{display:flex;align-items:center;gap:var(--_k-space-inside);min-width:0;height:var(--_k-leading-small);color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);white-space:nowrap}
+.knobs-wt-orec{color:var(--_k-fg);font-weight:var(--kw-strong)}
+.knobs-wt-orec::before{content:"·";margin-right:var(--_k-space-inside);color:var(--_k-fg-3);font-weight:var(--_k-weight)}
+.knobs-wt-otitle{color:var(--_k-fg);font-weight:var(--kw-strong);text-wrap:balance}
+.knobs-wt-osum{max-width:var(--kw-measure);color:var(--_k-fg-2)}
+/* Picking: the head is the radio, bled out so its words keep the column's edge; a fill under the
+   pointer at once; a check at the kicker's end that fills when picked. */
+.knobs-ui .knobs-wt-pick{margin:-6px -8px;padding:6px 8px;border-radius:var(--_k-radius);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-pick:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-wt-check{flex:none;display:flex;width:16px;height:16px;margin-left:auto;align-items:center;justify-content:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--_k-border-strong);color:transparent;
+  transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy),box-shadow var(--kw-snappy-ms) var(--kw-snappy)}
 .knobs-wt-check svg{width:12px;height:12px}
-.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--_k-fill);color:var(--_k-fg-3);
-  font:var(--kw-strong) var(--_k-type-small)/1 var(--_k-font);opacity:.5;transition:opacity .15s}
-.knobs-wt-step[data-current] .knobs-wt-key{opacity:1}
-.knobs-wt-ocap{color:var(--_k-fg-2);max-width:var(--kw-measure)}
+.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);box-shadow:none;color:var(--_k-on-accent)}
+
+/* ——— facts: terms in a fixed gutter beside their values, sharing a baseline; groups under a
+   heading, a hairline between them. Code and evidence are small mono chips. Too narrow for the
+   gutter, each term sits over its value ——— */
+.knobs-wt-facts{--kw-term:144px;display:flex;flex-direction:column;gap:var(--_kr-block);min-width:0}
+.knobs-wt-fgroup{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0}
+.knobs-wt-fgroup+.knobs-wt-fgroup::before{content:"";position:absolute;left:0;right:0;top:calc(var(--_kr-block) / -2);height:1px;background:var(--_k-border-subtle);pointer-events:none}
+.knobs-wt-fhead{margin:0;color:var(--_k-fg);font-weight:var(--kw-strong);text-wrap:balance}
+.knobs-wt-fterms{display:grid;grid-template-columns:var(--kw-term) minmax(0,1fr);gap:var(--_k-space-sibling) var(--_kr-block);align-items:baseline;margin:0;min-width:0}
+.knobs-wt-fact{display:contents}
+.knobs-wt-fterms dt{margin:0;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);text-wrap:balance}
+.knobs-wt-fterms dd{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0;margin:0;color:var(--_k-fg-2);overflow-wrap:anywhere;text-wrap:pretty}
+.knobs-wt-fterms dd[data-code]{flex-flow:row wrap}
+.knobs-wt-fterms dd[data-code]>code{padding:2px 6px;line-height:var(--_k-leading-label);color:var(--_k-fg)}
+@container knobs-wt-slot (max-width:400px){
+  .knobs-wt-fterms{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
+  .knobs-wt-fact{display:flex;flex-direction:column;gap:var(--_k-space-inside)}
+}
 
 /* ——— the rail: progress, contents, export ——— */
 .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)}
@@ -22687,17 +23075,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}}
@@ -22709,7 +23098,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)}
@@ -22730,11 +23119,11 @@ var walkthroughCss = `
    set apart by space, hairlines and their own colours. On a card (.knobs-surface) code drops its
    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);
+  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;--kw-measure:var(--_kr-measure);
   --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-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);text-transform:none;color:var(--_k-fg-3);${fade2}}
 .knobs-wt-body{min-width:0}
 /* Media mounting after the first paint, and a picture still decoding, come into focus: a fade with
    a small blur on the quick spring, from the top; at rest, nothing. */
@@ -22743,21 +23132,25 @@ 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)}
 .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}
-/* 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);
+/* Diff, code and terminal: one plain well, drawn by its hairline alone (a fill and a ring would be
+   two edges for one box), the panel 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-pad-card);border-radius:var(--_k-radius-panel);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);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}
@@ -22766,17 +23159,17 @@ var walkthroughCss = `
 .knobs-wt-out{color:var(--_k-fg-2)}
 .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-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--_k-space-sibling);font-feature-settings:var(--_kr-data)}
 .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)}
 .knobs-wt-mdelta[data-tone="bad"]{--kw-tone:var(--_k-danger)}
-.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--_k-fg) 8%,transparent)}
+.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:var(--_k-fill-selected)}
 .knobs-wt-mtrack>span{position:absolute;top:0;bottom:0;left:0;border-radius:inherit}
 .knobs-wt-mtrack>.knobs-wt-mafter{background:var(--_k-accent)}
-.knobs-wt-mtrack>.knobs-wt-mbefore{background:color-mix(in srgb,var(--_k-fg) 30%,transparent)}
+.knobs-wt-mtrack>.knobs-wt-mbefore{background:var(--_k-fg-4)}
 .knobs-wt-callout{--kw-tone:var(--kw-info);display:flex;gap:var(--_k-space-sibling);max-width:var(--kw-measure);color:var(--_k-fg)}
 .knobs-wt-callout::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--kw-tone)}
 .knobs-wt-callout[data-tone="good"]{--kw-tone:var(--kw-good)}
@@ -22803,7 +23196,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)}
@@ -22824,7 +23217,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}
@@ -22840,9 +23233,9 @@ 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-ui .knobs-wt-ssummary{margin:0;max-width:var(--kw-measure);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)}
 .knobs-wt-delta{display:inline-flex;gap:6px}
 .knobs-wt-add{color:var(--_k-diff-add)}
@@ -22872,7 +23265,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)}
@@ -22928,13 +23321,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}}
 `;
@@ -23035,7 +23433,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),
@@ -23054,12 +23451,11 @@ async function mountCompare(host, m, look, alive, onEvent) {
     before: side(before, "Before"),
     after: side(after, "After"),
     mode,
-    timeline: true,
+    timeline: mediaKind(before.src) === "video" || mediaKind(after.src) === "video",
     lazy: false,
     ...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) {
@@ -23083,6 +23479,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, () => {
@@ -23158,45 +23560,44 @@ 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;
@@ -23204,36 +23605,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();
     }
   };
 }
@@ -23416,12 +23814,39 @@ function mountProse(host, m) {
   host.append(el);
   return { dispose: () => el.remove() };
 }
+function mountFacts(host, m) {
+  const box = renderFacts(host.ownerDocument, m.groups);
+  host.append(box);
+  return { dispose: () => box.remove() };
+}
+function mountDecision(host, m, slot) {
+  const root = div(host.ownerDocument, "knobs-wt-options");
+  const slots = [];
+  const tiles = m.options.map((o) => optionTile(host.ownerDocument, o, {
+    media: (tile) => {
+      if (o.media)
+        slots.push(slot(tile, o.media));
+    }
+  }).tile);
+  root.append(...tiles);
+  host.append(root);
+  const unlayout = layoutOptions(root, tiles);
+  return {
+    pause: () => slots.forEach((s) => s.pause()),
+    dispose: () => {
+      unlayout();
+      slots.forEach((s) => s.dispose());
+      root.remove();
+    }
+  };
+}
 var HEAVY = new Set(["compare", "video", "diff", "mount"]);
 var RELEASES = new Set(["compare", "video"]);
-var labelOf3 = (m) => ("label" in m) && m.kind !== "metric" ? m.label : undefined;
-function mediaSlot(container, options) {
+var labelOf3 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "metric" ? m.label : undefined;
+function mediaSlot(container, given) {
   const doc = container.ownerDocument;
   injectWalkthroughStyles(doc);
+  const options = reviewLook(given, container);
   const look = {
     ...options.preset ? { preset: options.preset } : {},
     ...options.theme ? { theme: options.theme } : {}
@@ -23431,7 +23856,7 @@ function mediaSlot(container, options) {
   root.dataset.kind = m.kind;
   applyLook2(root, options);
   const label = labelOf3(m);
-  if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal")) {
+  if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal" || m.kind === "facts")) {
     const l = doc.createElement("span");
     l.className = "knobs-wt-slot-label";
     l.textContent = label;
@@ -23494,7 +23919,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":
@@ -23511,6 +23936,16 @@ function mediaSlot(container, options) {
         return done(mountStack(host, m, options.steps, options.findPR));
       case "table":
         return done(mountTable(host, m, options.steps));
+      case "facts":
+        return done(mountFacts(host, m));
+      case "decision":
+        return done(mountDecision(host, m, (tile, media) => mediaSlot(tile, {
+          ...look,
+          media,
+          ...options.lazy === false ? { lazy: false } : {},
+          ...options.steps ? { steps: options.steps } : {},
+          ...options.onEvent ? { onEvent: options.onEvent } : {}
+        })));
       case "mount": {
         const cleanup = m.mount(host);
         return done({ dispose: () => cleanup ? cleanup() : host.textContent = "" });
@@ -23563,16 +23998,35 @@ function mediaSlot(container, options) {
   };
 }
 var CHECK4 = icon("check", { small: true });
+function facts(container, options) {
+  const { title, facts: list, groups, ...look } = options;
+  return mediaSlot(container, {
+    ...look,
+    media: {
+      kind: "facts",
+      ...title ? { title } : {},
+      ...list ? { facts: list } : {},
+      ...groups ? { groups } : {}
+    }
+  });
+}
+function decision(container, options) {
+  const { options: list, noun, ...rest } = options;
+  return mediaSlot(container, {
+    ...rest,
+    media: { kind: "decision", options: list, ...noun ? { noun } : {} }
+  });
+}
 
 // src/ui/walkthrough.ts
-var el3 = (doc, tag, cls) => {
+var el4 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
 var prose2 = (doc, tag, cls, text) => {
-  const n = el3(doc, tag, cls);
+  const n = el4(doc, tag, cls);
   n.innerHTML = inlineMarkdown(text);
   return n;
 };
@@ -23597,9 +24051,10 @@ var DOCK_GAP = 12;
 var CALM2 = springMotion(SPRINGS.calm);
 var SMOOTH = springMotion(SPRINGS.smooth);
 var BACK_MS = 4500;
-function tasteTest(container, options) {
+function tasteTest(container, given) {
   const doc = container.ownerDocument;
   injectWalkthroughStyles(doc);
+  const options = reviewLook(given, container);
   const look = lookOf2(options);
   const list = options.options.map((o, i) => ("letter" in o) ? o : {
     id: o.id ?? String.fromCharCode(97 + i),
@@ -23607,66 +24062,55 @@ function tasteTest(container, options) {
     letter: String.fromCharCode(65 + i),
     ...o.caption ? { caption: o.caption } : {},
     ...o.media !== undefined ? { media: fillMedia(o.media) } : {},
-    suggested: o.suggested === true
+    ...o.facts ? { facts: fillFacts(o.facts) } : {},
+    suggested: o.suggested === true || o.recommended === true
   });
   const pickable = options.pickable !== false;
   let picked = pickable ? options.picked ?? null : null;
-  const root = el3(doc, "div", "knobs-wt-options");
+  const root = el4(doc, "div", "knobs-wt-options");
   if (pickable) {
     root.setAttribute("role", "radiogroup");
     root.setAttribute("aria-label", "Options");
   } else
     root.dataset.static = "";
-  root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
   if (!container.closest(".knobs-ui"))
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
-    const tile = el3(doc, "div", "knobs-wt-option");
-    if (!pickable) {
-      const name = el3(doc, "span", "knobs-wt-slot-label");
-      name.textContent = o.label;
-      tile.append(name);
-    }
-    const pick = el3(doc, "button", "knobs-wt-pick");
-    pick.type = "button";
-    pick.setAttribute("role", "radio");
-    if (i < 9)
-      pick.setAttribute("aria-keyshortcuts", String(i + 1));
-    const letter = el3(doc, "span", "knobs-wt-letter");
-    letter.textContent = o.letter;
-    const name = el3(doc, "span", "knobs-wt-olabel");
-    name.textContent = o.label;
-    pick.append(letter, name);
-    if (o.suggested) {
-      const s = el3(doc, "span", "knobs-wt-suggested");
-      s.textContent = "Suggested";
-      pick.append(s);
-    }
-    if (i < 9) {
-      const key = el3(doc, "span", "knobs-wt-key");
-      key.textContent = String(i + 1);
-      pick.append(key);
-    }
-    const check = el3(doc, "span", "knobs-wt-check");
-    check.innerHTML = CHECK4;
-    pick.append(check);
-    pick.addEventListener("click", () => {
-      const next = picked === o.id ? null : o.id;
-      api.pick(next);
-      options.onPick?.(next);
+    const button = pickable ? el4(doc, "button", "knobs-wt-pick") : undefined;
+    const { tile, kicker } = optionTile(doc, {
+      number: `Option ${i + 1}`,
+      title: o.label,
+      ...o.caption ? { summary: o.caption } : {},
+      recommended: o.suggested,
+      ...o.facts ? { facts: o.facts } : {}
+    }, {
+      ...button ? { head: button } : {},
+      media: (t) => {
+        if (o.media)
+          slots.push(mediaSlot(t, {
+            ...look,
+            media: o.media,
+            ...options.lazy === false ? { lazy: false } : {},
+            ...options.steps ? { steps: options.steps } : {}
+          }));
+      }
     });
-    if (pickable)
-      tile.append(pick);
-    if (o.media)
-      slots.push(mediaSlot(tile, {
-        ...look,
-        media: o.media,
-        ...options.lazy === false ? { lazy: false } : {},
-        ...options.steps ? { steps: options.steps } : {}
-      }));
-    if (o.caption)
-      tile.append(prose2(doc, "p", "knobs-wt-ocap", o.caption));
+    const pick = button ?? el4(doc, "button");
+    if (button) {
+      button.type = "button";
+      button.setAttribute("role", "radio");
+      if (i < 9)
+        button.setAttribute("aria-keyshortcuts", String(i + 1));
+      const check = el4(doc, "span", "knobs-wt-check");
+      check.innerHTML = CHECK4;
+      kicker.append(check);
+      button.addEventListener("click", () => {
+        const next = picked === o.id ? null : o.id;
+        api.pick(next);
+        options.onPick?.(next);
+      });
+    }
     root.append(tile);
     return { tile, pick };
   });
@@ -23680,6 +24124,7 @@ function tasteTest(container, options) {
   };
   sync();
   container.append(root);
+  const unlayout = layoutOptions(root, tiles.map((t) => t.tile));
   const api = {
     element: root,
     get picked() {
@@ -23692,6 +24137,7 @@ function tasteTest(container, options) {
     },
     pause: () => slots.forEach((s) => s.pause()),
     dispose() {
+      unlayout();
       slots.forEach((s) => s.dispose());
       root.remove();
     }
@@ -23708,13 +24154,14 @@ function scrollerOf(el) {
   }
   return doc.scrollingElement ?? doc.documentElement;
 }
-function walkthrough(container, options) {
+function walkthrough(container, given) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
   injectWalkthroughStyles(doc);
+  const options = reviewLook(given, container);
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
-  const root = el3(doc, "div", "knobs-walkthrough");
+  const root = el4(doc, "div", "knobs-walkthrough");
   applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
@@ -23927,7 +24374,7 @@ function walkthrough(container, options) {
         return true;
     return false;
   };
-  const scrim = el3(doc, "div", "knobs-wt-scrim");
+  const scrim = el4(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
   const fullRect = () => ({
     x: DOCK_INSET,
@@ -23977,7 +24424,7 @@ function walkthrough(container, options) {
       }
       if (!full) {
         const r = v.card.getBoundingClientRect();
-        const hold = el3(doc, "div", "knobs-wt-hold-card");
+        const hold = el4(doc, "div", "knobs-wt-hold-card");
         hold.style.height = `${r.height}px`;
         v.card.before(hold);
         v.card.dataset.full = "";
@@ -24127,7 +24574,7 @@ function walkthrough(container, options) {
       toast("Couldn't reach the microphone", { tone: "warn", look, doc });
     }
   };
-  const backPill = el3(doc, "button", "knobs-wt-back");
+  const backPill = el4(doc, "button", "knobs-wt-back");
   backPill.type = "button";
   let backTo = null;
   let backTimer = 0;
@@ -24147,7 +24594,7 @@ function walkthrough(container, options) {
       return;
     backTo = key;
     backPill.innerHTML = ICON.back;
-    const words = el3(doc, "span", "knobs-wt-back-label");
+    const words = el4(doc, "span", "knobs-wt-back-label");
     words.textContent = `Back to ${plainMarkdown(v.step.title)}`;
     backPill.append(words);
     backPill.dataset.on = "";
@@ -24155,16 +24602,16 @@ function walkthrough(container, options) {
     backTimer = win.setTimeout(hideBack, BACK_MS);
   };
   const bar = (() => {
-    const dock = el3(doc, "div", "knobs-wt-dock");
-    const box = el3(doc, "div", "knobs-wt-notebar");
-    const on = el3(doc, "div", "knobs-wt-on");
-    const row = el3(doc, "div", "knobs-wt-row");
-    const input = el3(doc, "textarea", "knobs-wt-input");
+    const dock = el4(doc, "div", "knobs-wt-dock");
+    const box = el4(doc, "div", "knobs-wt-notebar");
+    const on = el4(doc, "div", "knobs-wt-on");
+    const row = el4(doc, "div", "knobs-wt-row");
+    const input = el4(doc, "textarea", "knobs-wt-input");
     input.rows = 1;
     input.setAttribute("aria-label", "Note");
-    const attach = el3(doc, "div", "knobs-wt-attach");
+    const attach = el4(doc, "div", "knobs-wt-attach");
     const btn = (icon, label, run) => {
-      const b = el3(doc, "button", "knobs-wt-tool");
+      const b = el4(doc, "button", "knobs-wt-tool");
       b.type = "button";
       b.innerHTML = icon;
       b.setAttribute("aria-label", label);
@@ -24175,17 +24622,17 @@ function walkthrough(container, options) {
     const fullBtn = btn(ICON.full, "Full window · f", () => setFull(!full));
     const penBtn = btn(ICON.pen, "Draw on the media", () => setInk(!ink.on));
     const micBtn = btn(ICON.mic, "Record a voice note", () => void toggleVoice());
-    const micTime = el3(doc, "span", "knobs-wt-rec");
+    const micTime = el4(doc, "span", "knobs-wt-rec");
     micBtn.append(micTime);
     const sendBtn = btn(ICON.send, "Send · Enter", () => send());
     sendBtn.dataset.send = "";
     row.append(input, attach, fullBtn, penBtn, micBtn, sendBtn);
     box.append(on, row);
-    const launch = el3(doc, "button", "knobs-wt-launch");
+    const launch = el4(doc, "button", "knobs-wt-launch");
     launch.type = "button";
     launch.innerHTML = ICON.pen;
     launch.append("Note");
-    const kbd = el3(doc, "kbd");
+    const kbd = el4(doc, "kbd");
     kbd.textContent = "n";
     launch.append(kbd);
     launch.setAttribute("aria-label", "Write a note (n)");
@@ -24237,9 +24684,9 @@ function walkthrough(container, options) {
       }
     });
     const chip = (text, clear) => {
-      const c = el3(doc, "span", "knobs-wt-chip-a");
+      const c = el4(doc, "span", "knobs-wt-chip-a");
       c.append(text);
-      const x = el3(doc, "button", "knobs-wt-x");
+      const x = el4(doc, "button", "knobs-wt-x");
       x.type = "button";
       x.innerHTML = ICON.close;
       x.setAttribute("aria-label", `Remove ${text}`);
@@ -24388,9 +24835,9 @@ function walkthrough(container, options) {
     }
   };
   const renderNote = (v, n, entering = false) => {
-    const row = el3(doc, "div", "knobs-wt-n");
+    const row = el4(doc, "div", "knobs-wt-n");
     row.dataset.id = n.id;
-    const meta = el3(doc, "span", "knobs-wt-n-meta");
+    const meta = el4(doc, "span", "knobs-wt-n-meta");
     const m = n.context.media;
     meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
     if (m?.time !== undefined) {
@@ -24406,11 +24853,11 @@ function walkthrough(container, options) {
       });
     }
     row.append(meta);
-    const body = el3(doc, "div", "knobs-wt-n-body");
+    const body = el4(doc, "div", "knobs-wt-n-body");
     if (n.text)
       body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
     if (n.voice) {
-      const a = el3(doc, "audio", "knobs-wt-n-voice");
+      const a = el4(doc, "audio", "knobs-wt-n-voice");
       a.controls = true;
       a.preload = "none";
       a.src = n.voice.url;
@@ -24430,7 +24877,7 @@ function walkthrough(container, options) {
       body.append(thumb);
     }
     row.append(body);
-    const x = el3(doc, "button", "knobs-wt-x");
+    const x = el4(doc, "button", "knobs-wt-x");
     x.type = "button";
     x.innerHTML = ICON.close;
     x.setAttribute("aria-label", "Delete this note");
@@ -24470,22 +24917,23 @@ function walkthrough(container, options) {
     row.addEventListener("transitionend", done, { once: true });
     win.setTimeout(done, 600);
   };
-  const metaLine = (cls) => el3(doc, "div", `knobs-wt-metaline ${cls}`);
+  const metaLine = (cls) => el4(doc, "div", `knobs-wt-metaline ${cls}`);
   const metaText = (line, text, cls) => {
-    const s = el3(doc, "span", cls);
+    const s = el4(doc, "span", cls);
     s.textContent = text;
     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;
     }
-    const a = el3(doc, "a");
+    const a = el4(doc, "a");
     a.href = href;
     a.target = "_blank";
     a.rel = "noreferrer";
@@ -24495,9 +24943,9 @@ function walkthrough(container, options) {
     return a;
   };
   const feedItem = (f, now) => {
-    const li = el3(doc, "li", "knobs-wt-fi");
+    const li = el4(doc, "li", "knobs-wt-fi");
     li.dataset.kind = f.kind;
-    const q = el3(doc, "div", "knobs-wt-fi-q");
+    const q = el4(doc, "div", "knobs-wt-fi-q");
     const meta = metaLine("knobs-wt-fi-meta");
     if (f.at !== null) {
       const when = metaText(meta, ago(f.at, now));
@@ -24506,7 +24954,7 @@ function walkthrough(container, options) {
     const step = f.step ? page.steps.find((s) => s.key === f.step) : undefined;
     if (step) {
       const section = page.sections.find((s) => s.id === step.section);
-      const b = el3(doc, "button", "knobs-wt-fi-step");
+      const b = el4(doc, "button", "knobs-wt-fi-step");
       b.type = "button";
       b.textContent = section?.link?.label ?? plainMarkdown(step.title);
       b.title = `Go to “${plainMarkdown(step.title)}”`;
@@ -24528,19 +24976,19 @@ function walkthrough(container, options) {
       q.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
     li.append(q);
     if (f.q || f.trail.length) {
-      const a = el3(doc, "div", "knobs-wt-fi-a");
+      const a = el4(doc, "div", "knobs-wt-fi-a");
       if (f.q)
         a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
       if (f.trail.length) {
-        const list = el3(doc, "ol", "knobs-wt-trail");
+        const list = el4(doc, "ol", "knobs-wt-trail");
         for (const line of f.trail) {
           const i = line.indexOf(" · ");
-          const row = el3(doc, "li");
-          const words = el3(doc, "span", "knobs-wt-trail-text");
+          const row = el4(doc, "li");
+          const words = el4(doc, "span", "knobs-wt-trail-text");
           words.textContent = i < 0 ? line : line.slice(i + 3);
           row.append(words);
           if (i >= 0) {
-            const at = el3(doc, "span", "knobs-wt-trail-at");
+            const at = el4(doc, "span", "knobs-wt-trail-at");
             at.textContent = line.slice(0, i);
             row.append(at);
           }
@@ -24574,11 +25022,11 @@ function walkthrough(container, options) {
     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 = el3(doc, "div", "knobs-wt-layout");
-    const main = el3(doc, "div", "knobs-wt-main");
-    const flow = el3(doc, "div", "knobs-wt-flow");
-    const head = el3(doc, "header", "knobs-wt-head");
-    const h1 = el3(doc, "h1", "knobs-wt-title");
+    const layout = el4(doc, "div", "knobs-wt-layout");
+    const main = el4(doc, "div", "knobs-wt-main");
+    const flow = el4(doc, "div", "knobs-wt-flow");
+    const head = el4(doc, "header", "knobs-wt-head");
+    const h1 = el4(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
@@ -24586,13 +25034,13 @@ function walkthrough(container, options) {
     if (page.more)
       head.append(more(page.more));
     if (page.meta.length) {
-      const meta = el3(doc, "div", "knobs-wt-meta");
+      const meta = el4(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
-        const s = el3(doc, "span");
+        const s = el4(doc, "span");
         s.append(m.label);
-        const b = el3(doc, "b");
+        const b = el4(doc, "b");
         if (m.href) {
-          const a = el3(doc, "a");
+          const a = el4(doc, "a");
           a.href = m.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -24608,14 +25056,14 @@ function walkthrough(container, options) {
     flow.append(head);
     let feedEl = null;
     if (page.feed.length) {
-      feedEl = el3(doc, "section", "knobs-wt-feed");
+      feedEl = el4(doc, "section", "knobs-wt-feed");
       feedEl.id = "wt-latest";
       feedEl.setAttribute("aria-label", "Updates and answers");
-      const fh = el3(doc, "header", "knobs-wt-feed-head");
-      const h = el3(doc, "h2", "knobs-wt-feed-title");
+      const fh = el4(doc, "header", "knobs-wt-feed-head");
+      const h = el4(doc, "h2", "knobs-wt-feed-title");
       h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
       fh.append(h);
-      const list = el3(doc, "ol", "knobs-wt-feed-list");
+      const list = el4(doc, "ol", "knobs-wt-feed-list");
       const now = Date.now();
       for (const f of page.feed)
         list.append(feedItem(f, now));
@@ -24625,21 +25073,21 @@ function walkthrough(container, options) {
     let rail = null;
     count = fill = tocEl = null;
     if (options.rail !== false) {
-      rail = el3(doc, "aside", "knobs-wt-rail");
+      rail = el4(doc, "aside", "knobs-wt-rail");
       rail.setAttribute("aria-label", "Contents");
-      tocEl = el3(doc, "nav", "knobs-wt-toc");
+      tocEl = el4(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
       if (feedEl) {
-        const group = el3(doc, "div", "knobs-wt-toc-group");
+        const group = el4(doc, "div", "knobs-wt-toc-group");
         const target = feedEl;
         group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
         tocEl.append(group);
       }
       if (review) {
-        const progress = el3(doc, "div", "knobs-wt-progress");
-        count = el3(doc, "div", "knobs-wt-count");
-        const meter = el3(doc, "div", "knobs-wt-bar");
-        fill = el3(doc, "div", "knobs-wt-fill");
+        const progress = el4(doc, "div", "knobs-wt-progress");
+        count = el4(doc, "div", "knobs-wt-count");
+        const meter = el4(doc, "div", "knobs-wt-bar");
+        fill = el4(doc, "div", "knobs-wt-fill");
         meter.append(fill);
         progress.append(count, meter);
         rail.append(progress);
@@ -24648,15 +25096,15 @@ function walkthrough(container, options) {
       if (review)
         rail.append(actions(true));
       if (review && options.keys !== false) {
-        const keys = el3(doc, "div", "knobs-wt-keys");
+        const keys = el4(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
       }
     }
     for (const section of page.sections) {
-      const sec = el3(doc, "section", "knobs-wt-section");
+      const sec = el4(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
-      const sh = el3(doc, "header", "knobs-wt-shead");
+      const sh = el4(doc, "header", "knobs-wt-shead");
       const status = review ? section.status : undefined;
       if (section.kicker || section.link || status) {
         const meta = metaLine("knobs-wt-kicker");
@@ -24670,10 +25118,10 @@ function walkthrough(container, options) {
         }
         sh.append(meta);
       }
-      const h2 = el3(doc, "h2", "knobs-wt-heading");
+      const h2 = el4(doc, "h2", "knobs-wt-heading");
       h2.innerHTML = inlineMarkdown(section.title);
       sh.append(h2);
-      const intro = el3(doc, "div", "knobs-wt-sintro");
+      const intro = el4(doc, "div", "knobs-wt-sintro");
       intro.append(sh);
       if (section.summary)
         intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
@@ -24682,7 +25130,7 @@ function walkthrough(container, options) {
       sec.append(intro);
       let group = null;
       if (tocEl) {
-        group = el3(doc, "div", "knobs-wt-toc-group");
+        group = el4(doc, "div", "knobs-wt-toc-group");
         const first = section.steps[0]?.key;
         group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
         tocEl.append(group);
@@ -24710,7 +25158,8 @@ function walkthrough(container, options) {
     if (tocEl)
       pill = selectionPill(tocEl, {
         selected: () => viewOf(current)?.toc ?? null,
-        rows: () => tocRows
+        rows: () => tocRows,
+        spring: SPRINGS.snappy
       });
     syncProgress();
     current = null;
@@ -24724,8 +25173,8 @@ function walkthrough(container, options) {
     }));
   };
   const more = (text) => {
-    const box = el3(doc, "div", "knobs-wt-more");
-    const body = el3(doc, "div", "knobs-wt-more-text");
+    const box = el4(doc, "div", "knobs-wt-more");
+    const body = el4(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()));
@@ -24733,25 +25182,25 @@ function walkthrough(container, options) {
     return box;
   };
   const tocRow = (label, sub, run, section) => {
-    const b = el3(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
+    const b = el4(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 t = el3(doc, "span", "knobs-wt-toc-label");
+    const t = el4(doc, "span", "knobs-wt-toc-label");
     t.textContent = label;
     b.title = label;
     b.append(t);
     if (review)
-      b.append(el3(doc, "span", "knobs-wt-toc-end"));
+      b.append(el4(doc, "span", "knobs-wt-toc-end"));
     b.addEventListener("mousedown", (ev) => ev.preventDefault());
     b.addEventListener("click", run);
     tocRows.push(b);
     return b;
   };
   const actions = (rail) => {
-    const row = el3(doc, "div", "knobs-wt-actions");
+    const row = el4(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
-      const b = el3(doc, "button", "knobs-wt-btn");
+      const b = el4(doc, "button", "knobs-wt-btn");
       b.type = "button";
       b.textContent = text;
       if (primary)
@@ -24789,13 +25238,13 @@ function walkthrough(container, options) {
     }
   };
   const stepView = (step, group) => {
-    const card = el3(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
+    const card = el4(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
     card.setAttribute("aria-label", plainMarkdown(step.title));
-    const head = el3(doc, "header", "knobs-wt-step-head");
-    const h3 = el3(doc, "h3", "knobs-wt-stepTitle");
+    const head = el4(doc, "header", "knobs-wt-step-head");
+    const h3 = el4(doc, "h3", "knobs-wt-stepTitle");
     h3.innerHTML = inlineMarkdown(step.title);
     head.append(h3);
     if (step.caption)
@@ -24807,7 +25256,7 @@ function walkthrough(container, options) {
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
-      media = el3(doc, "div", "knobs-wt-media");
+      media = el4(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, findPR: findPRIn }));
@@ -24827,7 +25276,7 @@ function walkthrough(container, options) {
       });
       media ??= taste.element;
     }
-    const notes = el3(doc, "div", "knobs-wt-notes");
+    const notes = el4(doc, "div", "knobs-wt-notes");
     if (review)
       card.append(notes);
     card.addEventListener("focusin", () => {
@@ -24841,7 +25290,7 @@ function walkthrough(container, options) {
     if (group) {
       toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
       if (review) {
-        glyph = el3(doc, "span", "knobs-wt-toc-glyph");
+        glyph = el4(doc, "span", "knobs-wt-toc-glyph");
         toc.querySelector(".knobs-wt-toc-end").append(glyph);
       }
       group.append(toc);
@@ -25045,6 +25494,7 @@ export {
   contextMenu,
   countChanges,
   currentMarker,
+  decision,
   diffActivity,
   diffBar,
   diffCounts,
@@ -25057,6 +25507,7 @@ export {
   digitPick,
   drag as dragDivider,
   dropTarget,
+  facts,
   feedbackMarkdown,
   fileKey,
   filesUnder,