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

package/dist/ui-solid.js

@@ -4205,7 +4205,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;
@@ -4229,7 +4229,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;
@@ -4330,7 +4330,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())
@@ -11380,6 +11381,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);
@@ -12211,15 +12213,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();
@@ -12239,6 +12244,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) {
@@ -12271,6 +12278,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") {
@@ -12672,7 +12684,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
+var LAYOUT2, FADE6, 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();
@@ -12823,7 +12835,10 @@ function player(container, options) {
       return tl.time;
     return v.ended ? Number.POSITIVE_INFINITY : v.currentTime;
   });
-  const onClick = () => tl.focus();
+  const onClick = () => {
+    tl.focus();
+    tl.toggle();
+  };
   frame.addEventListener("click", onClick);
   v.src = options.src;
   const api = {
@@ -17298,1002 +17313,480 @@ function confirm(options) {
 // src/ui/walkthrough.ts
 init_icons();
 init_look();
-init_selection_pill();
 
-// src/ui/toast.ts
-init_look();
-init_layer();
-var regions = new WeakMap;
-function toast(message, options = {}) {
-  const doc = options.within?.ownerDocument ?? options.doc ?? document;
-  const win = doc.defaultView;
-  const key = options.within ?? doc;
-  let r = regions.get(key);
-  if (!r || !r.el.isConnected) {
-    const el = options.within ? Object.assign(doc.createElement("div"), { className: "knobs-root knobs-ui knobs-toast" }) : layerElement(doc, "knobs-layer knobs-toast", options.look);
-    if (options.within) {
-      injectUiStyles(doc);
-      options.within.append(el);
+// 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"
     }
-    el.setAttribute("role", "status");
-    el.setAttribute("aria-live", "polite");
-    const text = doc.createElement("span");
-    text.className = "knobs-toast-text";
-    const button = doc.createElement("button");
-    button.type = "button";
-    button.className = "knobs-toast-action";
-    el.append(text, button);
-    const region = {
-      el,
-      text,
-      button,
-      motion: presence(el, { scale: 0.96, blur: 4, dy: 10, duration: 0.36 }),
-      timer: 0
-    };
-    r = region;
-    regions.set(key, region);
-    el.addEventListener("pointerenter", () => win.clearTimeout(region.timer));
-    el.addEventListener("pointerleave", () => {
-      if (region.motion.shown)
-        arm(region, 1600);
-    });
   }
-  const region = r;
-  const arm = (reg, ms) => {
-    win.clearTimeout(reg.timer);
-    reg.timer = win.setTimeout(() => void reg.motion.hide(), ms);
-  };
-  region.text.textContent = message;
-  region.el.dataset.tone = options.tone ?? "info";
-  const action = options.action;
-  region.button.hidden = !action;
-  region.button.textContent = action?.label ?? "";
-  region.button.onclick = action ? () => {
-    action.run();
-    region.motion.hide();
-  } : null;
-  region.motion.show();
-  arm(region, options.linger ?? (options.tone === "error" ? 6000 : 3200));
-  return {
-    dismiss() {
-      if (region.text.textContent !== message)
-        return;
-      win.clearTimeout(region.timer);
-      region.motion.hide();
+});
+
+// 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/walkthrough-annotations.ts
-var EYE = "M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z";
-var EYE_OFF = "M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z";
-var glyph = (d) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
-var ARROW = '<svg class="knobs-wt-anno-arrow" viewBox="0 0 28 28" width="28" height="28" aria-hidden="true"><path d="M3 3 L24 24 M24 24 L24 13 M24 24 L13 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-var shapeOf = (a) => a.shape ?? (a.w !== undefined && a.h !== undefined ? "box" : "dot");
-var showsAt = (a, time) => !a.at || time === undefined || time >= a.at[0] && time <= a.at[1];
-function placeMark(a, rect, view = ALL) {
-  const w = a.w ?? 0;
-  const h = a.h ?? 0;
-  const x = (a.x - view.u) / view.w;
-  const y = (a.y - view.v) / view.h;
-  const ww = w / view.w;
-  const hh = h / view.h;
-  if (x + ww < 0 || y + hh < 0 || x > 1 || y > 1)
-    return null;
-  return { x: rect.x + x * rect.w, y: rect.y + y * rect.h, w: ww * rect.w, h: hh * rect.h };
+// src/ui/walkthrough-model.ts
+var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
+function slug(text) {
+  return text.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^(.{0,48})-.*$/, (m, head) => m.length > 48 && head ? head : m).slice(0, 48) || "item";
 }
-var ALL = { u: 0, v: 0, w: 1, h: 1 };
-var scopeOf = (el) => el.closest(".knobs-walkthrough") ?? el.closest(".knobs-wt-slot") ?? el;
-var annotationsOn = (scope) => scope.dataset.annotations !== "off";
-function setAnnotations(scope, on) {
-  if (on)
-    delete scope.dataset.annotations;
-  else
-    scope.dataset.annotations = "off";
-  for (const b of Array.from(scope.querySelectorAll(".knobs-wt-anno-toggle")))
-    syncToggle(b, on);
+function uniqueIds() {
+  const seen = new Map;
+  return (id) => {
+    const n = (seen.get(id) ?? 0) + 1;
+    seen.set(id, n);
+    return n === 1 ? id : `${id}-${n}`;
+  };
 }
-function syncToggle(b, on) {
-  b.setAttribute("aria-pressed", String(on));
-  b.title = on ? "Hide annotations (a)" : "Show annotations (a)";
-  b.innerHTML = glyph(on ? EYE : EYE_OFF);
+var label = (id) => id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]+/g, " ");
+function resolveSrc(src, base) {
+  if (!base || /^([a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src))
+    return src;
+  return base.replace(/\/?$/, "/") + src.replace(/^\.\//, "");
 }
-function annotationLayer(host, list, place, corner = host) {
-  const doc = host.ownerDocument;
-  const layer = doc.createElement("div");
-  layer.className = "knobs-wt-anno";
-  layer.setAttribute("aria-hidden", "true");
-  host.append(layer);
-  const toggle = doc.createElement("button");
-  toggle.type = "button";
-  toggle.className = "knobs-wt-anno-toggle";
-  toggle.setAttribute("aria-label", "Annotations");
-  syncToggle(toggle, annotationsOn(scopeOf(host)));
-  toggle.addEventListener("click", (e) => {
-    e.stopPropagation();
-    const scope = scopeOf(host);
-    setAnnotations(scope, !annotationsOn(scope));
-  });
-  corner.append(toggle);
-  let marks = [];
-  const make = (a) => {
-    const m = doc.createElement("div");
-    const shape = shapeOf(a);
-    m.className = "knobs-wt-mark";
-    m.dataset.shape = shape;
-    m.dataset.hidden = "";
-    if (shape === "arrow")
-      m.innerHTML = ARROW;
-    if (a.label) {
-      const l = doc.createElement("span");
-      l.className = "knobs-wt-mark-label";
-      l.textContent = a.label;
-      m.append(l);
-    }
-    layer.append(m);
-    return m;
-  };
-  let settled = false;
-  const update = () => {
-    const p = place();
-    if (marks.length !== p.rects.length) {
-      for (const row of marks)
-        for (const m of row)
-          m.remove();
-      marks = p.rects.map(() => list.map(make));
-    }
-    p.rects.forEach((rect, i) => {
-      list.forEach((a, j) => {
-        const m = marks[i][j];
-        const box = placeMark(a, rect, p.view);
-        const show = box !== null && showsAt(a, p.time);
-        if (box) {
-          m.style.transform = `translate(${box.x.toFixed(2)}px,${box.y.toFixed(2)}px)`;
-          m.style.width = `${box.w.toFixed(2)}px`;
-          m.style.height = `${box.h.toFixed(2)}px`;
-        }
-        m.toggleAttribute("data-hidden", !show);
-      });
-    });
-    if (!settled) {
-      settled = true;
-      requestAnimationFrame(() => requestAnimationFrame(() => layer.dataset.settled = ""));
+var VIDEO2 = /\.(mp4|m4v|webm|mov|ogv)(\?|#|$)/i;
+var mediaOf = (src) => VIDEO2.test(src) ? { kind: "video", src } : { kind: "image", src };
+function parseAspect(aspect) {
+  if (aspect === undefined)
+    return;
+  if (typeof aspect === "number")
+    return aspect > 0 && Number.isFinite(aspect) ? aspect : undefined;
+  const m = /^\s*([\d.]+)\s*(?:[/x:×]\s*([\d.]+))?\s*$/.exec(aspect);
+  if (!m)
+    return;
+  const w = Number(m[1]);
+  const h = m[2] === undefined ? 1 : Number(m[2]);
+  return w > 0 && h > 0 ? w / h : undefined;
+}
+function source2(s, base) {
+  const v = typeof s === "string" ? { src: s } : s;
+  return { ...v, src: resolveSrc(v.src, base) };
+}
+function fillMedia(m, base) {
+  if (typeof m === "string")
+    return mediaOf(resolveSrc(m, base));
+  switch (m.kind) {
+    case "compare": {
+      const { chapters, ...rest } = m;
+      return {
+        ...rest,
+        before: source2(m.before, base),
+        after: source2(m.after, base),
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
+      };
     }
-  };
-  const ro = new ResizeObserver(() => update());
-  ro.observe(host);
-  update();
-  return {
-    element: layer,
-    update,
-    dispose() {
-      ro.disconnect();
-      layer.remove();
-      toggle.remove();
+    case "video": {
+      const { chapters, captionsSrc, captions, ...rest } = m;
+      const vtt = captions ?? captionsSrc;
+      return {
+        ...rest,
+        src: resolveSrc(m.src, base),
+        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {},
+        ...vtt ? { captions: resolveSrc(vtt, base) } : {},
+        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
+      };
     }
-  };
-}
-
-// src/ui/walkthrough-blocks.ts
-init_motion();
-
-// src/ui/history.ts
-init_motion();
-init_glide();
-
-// src/ui/history-css.ts
-var historyCss = `
-:where(.knobs-history,.knobs-history *){box-sizing:border-box}
-.knobs-ui.knobs-history{--hy-gutter:128px;--hy-lane:24px;--hy-bar:16px;--hy-axis:20px;--hy-bandrow:0px;--hy-c:var(--_k-fg-3);
-  --hy-fade:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);
-  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;outline:none;color:var(--_k-fg);
-  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
-  text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
-.knobs-history[data-bands]{--hy-bandrow:var(--_k-leading-small)}
-.knobs-history[data-narrow]{--hy-gutter:0px}
-.knobs-history [hidden]{display:none!important}
-:where(.knobs-ui) :is(.knobs-hy-ev,.knobs-hy-span,.knobs-hy-jump,.knobs-hy-more){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
-  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-history [data-tone="good"]{--hy-c:var(--_k-ok)}
-.knobs-history [data-tone="warn"]{--hy-c:var(--_k-warn)}
-.knobs-history [data-tone="bad"]{--hy-c:var(--_k-danger)}
-.knobs-history [data-tone="info"]{--hy-c:var(--_k-info)}
-.knobs-history [data-tone="dim"]{--hy-c:var(--_k-fg-3)}
-
-/* ——— the chart: lane labels beside the plot (above each lane where it's narrow) ——— */
-.knobs-hy-chart{position:relative;display:grid;grid-template-columns:var(--hy-gutter) minmax(0,1fr)}
-.knobs-hy-axis{position:relative;grid-column:2;grid-row:1;height:calc(var(--hy-bandrow) + var(--hy-axis))}
-:is(.knobs-hy-tick,.knobs-hy-now,.knobs-hy-blabel){position:absolute;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
-.knobs-hy-tick{bottom:2px;padding-left:4px}
-.knobs-hy-now{bottom:2px;color:var(--_k-accent-fg);font-weight:var(--_k-weight-label)}
-.knobs-hy-blabel{top:0;padding-left:4px;overflow:hidden;color:var(--_k-fg-2)}
-.knobs-hy-label{grid-column:1;align-self:center;min-width:0;margin-right:var(--_k-space-title);overflow:hidden;white-space:nowrap;
-  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
-.knobs-history[data-narrow] .knobs-hy-label{grid-column:2;align-self:end;margin:0}
-:is(.knobs-hy-label,.knobs-hy-blabel)[data-overflow]{-webkit-mask-image:var(--hy-fade);mask-image:var(--hy-fade)}
-.knobs-hy-track{position:relative;grid-column:2;height:var(--hy-lane)}
-.knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}
-
-/* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */
-.knobs-hy-band{position:absolute;top:0;bottom:0;background:color-mix(in oklch,var(--_k-fg) 3.5%,transparent);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}
-:is(.knobs-hy-grid,.knobs-hy-today,.knobs-hy-hover,.knobs-hy-sel){position:absolute;left:0;top:calc(var(--hy-bandrow) + var(--hy-axis));bottom:0;width:1px;margin-left:-.5px}
-.knobs-hy-grid{background:var(--_k-border-subtle)}
-.knobs-hy-today{top:calc(var(--hy-bandrow) + var(--hy-axis) - 4px);background:var(--_k-accent)}
-.knobs-hy-hover{background:color-mix(in oklch,var(--_k-fg) 32%,transparent);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
-.knobs-hy-hover[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-hy-sel{background:var(--_k-fg-2);opacity:0}
-.knobs-hy-sel[data-on]{opacity:.6}
-
-/* Spans: a soft bar in their state's tone, inferred ones hatched; the tag at the end. */
-.knobs-hy-span{position:absolute;top:calc((var(--hy-lane) - var(--hy-bar)) / 2);height:var(--hy-bar);border-radius:var(--_k-radius-sm);cursor:pointer;
-  background:color-mix(in oklch,var(--hy-c) 24%,transparent);transition:background calc(var(--_k-hover-out) * 1ms),box-shadow calc(var(--_k-hover-out) * 1ms)}
-.knobs-hy-span[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 34%,transparent) 0 2px,color-mix(in oklch,var(--hy-c) 9%,transparent) 2px 6px)}
-.knobs-hy-span[data-hover]{background-color:color-mix(in oklch,var(--hy-c) 34%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 1px var(--hy-c)}
-.knobs-hy-span[data-clip-start]{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px);mask-image:linear-gradient(to right,transparent,#000 16px)}
-.knobs-hy-span[data-clip-end]{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(to left,transparent,#000 16px);mask-image:linear-gradient(to left,transparent,#000 16px)}
-.knobs-hy-tag{position:absolute;top:0;right:6px;font-size:var(--_k-type-small);line-height:var(--hy-bar);white-space:nowrap;pointer-events:none;
-  color:color-mix(in oklch,var(--hy-c) 55%,var(--_k-fg))}
-.knobs-hy-tag[data-place="after"]{right:auto;left:calc(100% + 6px)}
-.knobs-hy-tag[data-place="none"]{visibility:hidden}
-
-/* Event marks (their kind named in the tooltip): a dot for a commit, a diamond for a release, a cross for a deletion, a square for a
-   channel's switch, a triangle for a finding; inferred ones hollow. */
-.knobs-hy-ev{position:absolute;top:0;width:16px;height:var(--hy-lane);margin-left:-8px;cursor:pointer;--hy-c:var(--_k-fg-2);--hy-s:9px}
-.knobs-hy-ev::before{content:"";position:absolute;left:50%;top:50%;width:var(--hy-s);height:var(--hy-s);margin:calc(var(--hy-s) / -2) 0 0 calc(var(--hy-s) / -2);
-  border-radius:50%;background:var(--hy-c);transition:scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
-.knobs-hy-ev[data-range]{width:calc(var(--hy-w) + 16px)}
-.knobs-hy-ev[data-range]::before{left:calc(8px - var(--hy-s) / 2);right:calc(8px - var(--hy-s) / 2);width:auto;margin-left:0;border-radius:var(--_k-round)}
-.knobs-hy-ev[data-type="release"]{--hy-s:8px}
-.knobs-hy-ev[data-type="release"]::before{border-radius:1.5px;rotate:45deg}
-.knobs-hy-ev[data-type="channel"]{--hy-s:8px}
-.knobs-hy-ev[data-type="channel"]::before{border-radius:2px}
-.knobs-hy-ev[data-type="audit"]{--hy-s:10px}
-.knobs-hy-ev[data-type="audit"]::before{border-radius:0;clip-path:polygon(50% 4%,100% 92%,0 92%)}
-.knobs-hy-ev[data-type="deletion"]::before{border-radius:0;rotate:45deg;
-  background:linear-gradient(var(--hy-c),var(--hy-c)) center/100% 1.75px no-repeat,linear-gradient(var(--hy-c),var(--hy-c)) center/1.75px 100% no-repeat}
-.knobs-hy-ev[data-inferred]:not([data-type="audit"],[data-type="deletion"])::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hy-c)}
-.knobs-hy-ev[data-inferred]:is([data-type="audit"],[data-type="deletion"])::before{opacity:.5}
-/* Held-back marks (commits, by default) come up while the pointer is on their lane, and stay with
-   "Show commits" or while selected. */
-.knobs-hy-ev[data-quiet]{opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
-.knobs-hy-track:hover .knobs-hy-ev[data-quiet]{opacity:.6;transition-duration:calc(var(--_k-motion-snappy-ms) * 1ms)}
-:is(.knobs-history[data-all] .knobs-hy-ev[data-quiet],.knobs-hy-ev[data-quiet]:is([data-selected],[data-hover])){opacity:1}
-.knobs-hy-ev[data-hover]::before{scale:1.25}
-.knobs-hy-ev[data-selected]::before{scale:1.3}
-.knobs-hy-ev[data-selected]::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hy-s) + 9px);height:calc(var(--hy-s) + 9px);
-  margin:calc((var(--hy-s) + 9px) / -2) 0 0 calc((var(--hy-s) + 9px) / -2);border-radius:50%;box-shadow:0 0 0 1.5px var(--hy-c)}
-.knobs-hy-ev[data-range][data-selected]::after{left:3px;right:3px;width:auto;margin-left:0;border-radius:var(--_k-round)}
-.knobs-history:focus-visible .knobs-hy-ev[data-selected]::after{box-shadow:0 0 0 2px var(--_k-focus)}
-.knobs-history:focus-visible .knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 2px var(--_k-focus)}
-
-/* ——— under the chart: "Show commits", and a legend only when inferred and verified both appear ——— */
-.knobs-hy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_k-space-inside) var(--_k-space-title);margin-top:var(--_k-space-sibling);padding-left:var(--hy-gutter);
-  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
-.knobs-hy-legend{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title)}
-.knobs-ui .knobs-hy-more{height:20px;margin-left:-6px;padding:0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-3);cursor:pointer;
-  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-hy-more:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-hy-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
-.knobs-hy-swatch{flex:none;width:14px;height:8px;border-radius:2px;background:color-mix(in oklch,var(--hy-c) 34%,transparent)}
-.knobs-hy-swatch[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 60%,transparent) 0 1.5px,transparent 1.5px 4px)}
-
-/* ——— the detail: one area under the chart, its height on a spring ——— */
-.knobs-hy-detail{position:relative;overflow:hidden;user-select:text;-webkit-user-select:text}
-.knobs-hy-detail[data-moving]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
-.knobs-hy-dc{padding:var(--_k-space-title) 0 0 var(--hy-gutter);transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
-.knobs-hy-dc:is([data-enter],[data-leave]){opacity:0}
-.knobs-hy-dc[data-leave]{position:absolute;left:0;right:0;top:0;transition-duration:calc(var(--_k-motion-snappy-ms) * .8ms)}
-.knobs-hy-dmeta{display:flex;flex-wrap:wrap;gap:0 var(--_k-space-sibling);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
-.knobs-hy-dmeta>[data-tone]{color:var(--hy-c)}
-.knobs-hy-dtitle{margin-top:var(--_k-space-inside);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight-title);color:var(--_k-fg);text-wrap:balance}
-.knobs-hy-dtext{margin:var(--_k-space-inside) 0 0;max-width:68ch;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);color:var(--_k-fg-2);text-wrap:pretty}
-.knobs-hy-dtext code{font:calc(1em - 1px) var(--_k-mono);padding:1px 4px;border-radius:var(--_k-radius-sm);background:var(--_k-fill)}
-.knobs-hy-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--_k-space-sibling)}
-.knobs-hy-dfoot:empty{display:none}
-.knobs-hy-evidence{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--_k-radius-sm);background:var(--_k-fill);color:var(--_k-fg-2);
-  font:var(--_k-type-small)/1 var(--_k-mono);text-decoration:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-a.knobs-hy-evidence:hover{background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-ui .knobs-hy-jump{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 8px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:pointer;
-  font-size:var(--_k-type-small);transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-hy-jump:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-hy-jump svg{width:12px;height:12px}
-
-/* ——— the pointer's tooltip: title, date, one line ——— */
-.knobs-hy-tip{position:absolute;left:0;top:0;max-width:280px;padding:6px 8px;border-radius:var(--_k-radius-md);background:var(--_k-bg-overlay);
-  box-shadow:var(--_k-shadow-overlay),0 0 0 1px var(--_k-border);pointer-events:none;opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
-.knobs-hy-tip[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-hy-tt{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight-label);color:var(--_k-fg);text-wrap:balance}
-:is(.knobs-hy-td,.knobs-hy-tl){font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
-.knobs-hy-tl{margin-top:2px;color:var(--_k-fg-2);text-wrap:pretty}
-.knobs-hy-tl:empty{display:none}
-
-@media(prefers-reduced-motion:reduce){
-  .knobs-history :where(*,::before,::after){transition-property:opacity,background,color,box-shadow!important}
-  .knobs-hy-dc{transition-duration:calc(var(--_k-hover-out) * 1ms)!important}
-}
-`;
-
-// src/ui/history-model.ts
-var MS_DAY = 86400000;
-var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var dayOf = (y, m, d) => Math.floor(Date.UTC(y, m, d) / MS_DAY);
-var parts = (day) => {
-  const t = new Date(day * MS_DAY);
-  return { y: t.getUTCFullYear(), m: t.getUTCMonth(), d: t.getUTCDate() };
-};
-var todayDay = (now = Date.now()) => {
-  const t = new Date(now);
-  return dayOf(t.getFullYear(), t.getMonth(), t.getDate());
-};
-var monthIndex = (name) => MONTHS.findIndex((m) => m.toLowerCase() === name.slice(0, 3).toLowerCase());
-function parseDay(text, year) {
-  const s = text.trim();
-  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
-  if (iso) {
-    const y = Number(iso[1]);
-    const day = dayOf(y, Number(iso[2]) - 1, Number(iso[3]));
-    return { from: day, to: day, year: y };
+    case "image":
+      return { ...m, src: resolveSrc(m.src, base) };
+    case "history":
+      if ("data" in m)
+        return m;
+      return {
+        kind: "history",
+        data: historyData(m),
+        ...m.label ? { label: m.label } : {},
+        ...m.marks ? { marks: m.marks } : {}
+      };
+    case "stack":
+      return {
+        kind: "stack",
+        ...m.base ? { base: m.base } : {},
+        items: m.items.map(fillStackItem)
+      };
+    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;
   }
-  const m = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:\s*[–—-]\s*(?:([A-Za-z]{3,9})\.?\s+)?(\d{1,2}))?(?:,?\s+(\d{4}))?$/.exec(s);
-  if (!m)
-    return null;
-  const m1 = monthIndex(m[1]);
-  const m2 = m[3] ? monthIndex(m[3]) : m1;
-  if (m1 < 0 || m2 < 0)
-    return null;
-  const written = m[5] ? Number(m[5]) : undefined;
-  const y = written ?? year;
-  if (y === undefined)
-    return null;
-  const from = dayOf(y, m1, Number(m[2]));
-  let to = m[4] ? dayOf(y, m2, Number(m[4])) : from;
-  if (to < from)
-    to = dayOf(y + 1, m2, Number(m[4]));
-  return { from, to, ...written !== undefined ? { year: written } : {} };
 }
-function formatDay(day) {
-  const { y, m, d } = parts(day);
-  return `${MONTHS[m]} ${d}, ${y}`;
+function 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 formatRange(from, to, open = false) {
-  if (open)
-    return `${formatDay(from)} – today`;
-  if (to <= from)
-    return formatDay(from);
-  const a = parts(from);
-  const b = parts(to);
-  if (a.y === b.y && a.m === b.m)
-    return `${MONTHS[a.m]} ${a.d}–${b.d}, ${a.y}`;
-  if (a.y === b.y)
-    return `${MONTHS[a.m]} ${a.d} – ${MONTHS[b.m]} ${b.d}, ${a.y}`;
-  return `${formatDay(from)} – ${formatDay(to)}`;
+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
+    };
+  });
 }
-var formatDays = (n) => `${n} ${n === 1 ? "day" : "days"}`;
-function guessTone(state) {
-  const s = state.toLowerCase();
-  if (/broken|bad|fail|missing|deleted|down/.test(s))
-    return "bad";
-  if (/warn|redirect|partial|beta|next|pre/.test(s))
-    return "warn";
-  if (/work|ok|good|fixed|live|green/.test(s))
-    return "good";
-  return "dim";
+function historyData(m) {
+  const events = m.events ?? [];
+  if (m.lanes || m.bands || m.states || m.axis)
+    return {
+      ...m.axis ? { axis: m.axis } : {},
+      ...m.lanes ? { lanes: m.lanes } : {},
+      ...events.length ? { events } : {},
+      ...m.bands ? { bands: m.bands } : {},
+      ...m.states ? { states: m.states } : {}
+    };
+  const groups = [];
+  if (events.length)
+    groups.push({ events });
+  for (const g of m.groups ?? [])
+    groups.push({
+      ...g.heading ? { heading: g.heading } : {},
+      ...g.summary ? { summary: g.summary } : {},
+      events: g.events ?? g.rows ?? []
+    });
+  return { groups };
 }
-var bandLabel = (heading) => heading.replace(/^\s*\d+\s*[·.:)\-–]\s*/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
-function fromGroups(groups, today) {
-  const events = [];
-  const bands = [];
-  const all = groups.flatMap((g) => g.events ?? g.rows ?? []);
-  let year = all.map((e) => parseDay(e.date, 0)?.year).find((y) => y !== undefined) ?? parts(today).y;
-  for (const g of groups) {
-    let lo = Infinity;
-    let hi = -Infinity;
-    for (const e of g.events ?? g.rows ?? []) {
-      const d = parseDay(e.date, year);
-      if (!d)
-        continue;
-      if (d.year !== undefined)
-        year = d.year;
-      lo = Math.min(lo, d.from);
-      hi = Math.max(hi, d.to);
-      events.push({
-        ...e,
-        date: iso(d.from),
-        ...d.to > d.from ? { to: iso(d.to) } : {},
-        lane: e.lane ?? "code"
-      });
-    }
-    const label = g.heading ? bandLabel(g.heading) : "";
-    if (label && lo <= hi)
-      bands.push({ from: iso(lo), to: iso(hi), label });
-  }
-  return { events, bands };
+function parseBranch(branch) {
+  if (!branch?.trim())
+    return {};
+  const [head, base] = branch.split(/\s*(?:→|->|=>|⇒)\s*/, 2).map((s) => s.trim());
+  return { ...head ? { head } : {}, ...base ? { base } : {} };
 }
-function iso(day) {
-  const { y, m, d } = parts(day);
-  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+function parseDelta(delta) {
+  if (delta === undefined || typeof delta === "object")
+    return delta;
+  const m = /\+\s*([\d,_]+)[^\d+]*?[-−–]\s*([\d,_]+)/.exec(delta);
+  if (!m)
+    return delta.trim() || undefined;
+  const n = (s) => Number(s.replace(/[,_]/g, ""));
+  return { add: n(m[1]), del: n(m[2]) };
 }
-var startOfMonth = (day) => {
-  const { y, m } = parts(day);
-  return dayOf(y, m, 1);
-};
-var TYPE_TONE = { deletion: "bad" };
-function normalizeHistory(data, now = todayDay()) {
-  const today = data.axis?.today && parseDay(data.axis.today, parts(now).y)?.from || now;
-  const converted = data.groups?.length ? fromGroups(data.groups, today) : { events: [], bands: [] };
-  const rawEvents = [...data.events ?? [], ...converted.events];
-  const rawBands = [...data.bands ?? [], ...converted.bands];
-  const year = parts(today).y;
-  const day = (s) => s ? parseDay(s, year) ?? null : null;
-  const states = new Map;
-  const stateOf = (key) => {
-    const known = states.get(key);
-    if (known)
-      return known;
-    const def = data.states?.[key];
-    const s = { key, label: def?.label ?? key, tone: def?.tone ?? guessTone(key) };
-    states.set(key, s);
-    return s;
+function fillStackItem(it) {
+  const parsed = parseBranch(it.branch);
+  const head = parsed.head ?? it.head;
+  const base = parsed.base ?? it.base;
+  const delta = parseDelta(it.delta);
+  const step = it.step ?? it.stepId;
+  const pr = String(it.pr).trim();
+  return {
+    pr: /^\d+$/.test(pr) ? `#${pr}` : pr,
+    ...it.href ? { href: it.href } : {},
+    title: it.title,
+    ...head ? { head } : {},
+    ...base ? { base } : {},
+    ...delta !== undefined ? { delta } : {},
+    ...it.status ? { status: it.status } : {},
+    ...it.tone ? { tone: it.tone } : {},
+    ...it.summary ? { summary: it.summary } : {},
+    ...step ? { step } : {},
+    ...it.order !== undefined && it.order !== "" ? { order: String(it.order) } : {}
   };
-  const items = new Map;
-  const laneOrder = [];
-  const lanes = new Map;
-  const lane = (id, label = id === "code" ? "Code" : id) => {
-    let l = lanes.get(id);
-    if (!l) {
-      l = { id, label, spans: [], events: [] };
-      lanes.set(id, l);
-      laneOrder.push(id);
+}
+function stackLayout(m) {
+  const items = m.items;
+  const byHead = new Map;
+  items.forEach((it, i) => it.head && !byHead.has(it.head) && byHead.set(it.head, i));
+  let trunk = m.base ?? null;
+  if (!trunk) {
+    const tally = new Map;
+    for (const it of items)
+      if (it.base && !byHead.has(it.base))
+        tally.set(it.base, (tally.get(it.base) ?? 0) + 1);
+    let best = 0;
+    for (const [b, n] of tally)
+      if (n > best)
+        [trunk, best] = [b, n];
+  }
+  const parentOf = items.map((it, i) => {
+    const p = it.base === undefined ? undefined : byHead.get(it.base);
+    return p === undefined || p === i ? null : p;
+  });
+  items.forEach((_, i) => {
+    const seen = new Set;
+    for (let n = i;n !== null; n = parentOf[n]) {
+      if (seen.has(n)) {
+        const loop = [n];
+        for (let k = parentOf[n];k !== n && k !== null; k = parentOf[k])
+          loop.push(k);
+        parentOf[Math.min(...loop)] = null;
+        break;
+      }
+      seen.add(n);
     }
-    return l;
-  };
-  if (rawEvents.some((e) => !e.lane || e.lane === "code") && !data.lanes?.some((l) => l.id === "code"))
-    lane("code");
-  let inferred = false;
-  for (const l of data.lanes ?? []) {
-    const into = lane(l.id, l.label);
-    (l.spans ?? []).forEach((s, i) => {
-      const a = day(s.from);
-      if (!a)
-        return;
-      const open = !s.to;
-      const b = open ? null : day(s.to);
-      const to = open ? today : b?.to ?? a.to;
-      const st = stateOf(s.state);
-      const days = Math.max(0, to - a.from);
-      const own = s.label ?? data.states?.[s.state]?.tag ?? "{d}d";
-      const tags = own === "" ? [] : [...new Set([own, "{d}d"])].map((t) => t.replace(/\{d\}/g, String(days)));
-      const id = s.id ?? `${l.id}/${i}`;
-      const item = {
-        id,
-        kind: "span",
-        lane: l.id,
-        from: a.from,
-        to,
-        open,
-        title: s.title ?? `${l.label} · ${st.label}`,
-        ...s.detail ? { detail: s.detail } : {},
-        tone: st.tone,
-        inferred: s.provenance === "inferred",
-        ...s.provenance ? { provenance: s.provenance } : {},
-        ...s.source ? { source: s.source } : {},
-        evidence: s.evidence ?? [],
-        ...s.step ? { step: s.step } : {},
-        state: s.state,
-        tags
-      };
-      if (item.inferred)
-        inferred = true;
-      into.spans.push(item);
-      items.set(id, item);
+  });
+  const kids = items.map(() => []);
+  const roots = [];
+  parentOf.forEach((p, i) => (p === null ? roots : kids[p]).push(i));
+  const rows = [];
+  const walk = (list, depth, rails) => list.forEach((i, n) => {
+    const it = items[i];
+    const last = n === list.length - 1;
+    const off = parentOf[i] === null && it.base && it.base !== trunk ? it.base : undefined;
+    rows.push({
+      item: it,
+      index: i,
+      depth,
+      parent: parentOf[i],
+      last,
+      rails,
+      children: kids[i].length,
+      ...off ? { offBase: off } : {}
     });
-  }
-  const types = [];
-  const events = [];
-  rawEvents.forEach((e, index) => {
-    const a = day(e.date);
-    if (!a)
-      return;
-    const to = Math.max(a.to, day(e.to)?.to ?? a.to);
-    const into = lane(e.lane ?? "code");
-    const id = e.id ?? `e${index}`;
-    const item = {
-      id,
-      kind: "event",
-      lane: into.id,
-      from: a.from,
-      to,
-      open: false,
-      title: e.title,
-      ...e.detail ? { detail: e.detail } : {},
-      tone: e.tone ?? TYPE_TONE[e.type ?? ""] ?? "dim",
-      ...e.type ? { type: e.type } : {},
-      inferred: e.provenance === "inferred",
-      ...e.provenance ? { provenance: e.provenance } : {},
-      ...e.source ? { source: e.source } : {},
-      evidence: e.evidence ?? [],
-      ...e.step ? { step: e.step } : {},
-      tags: []
-    };
-    if (item.inferred)
-      inferred = true;
-    if (e.type && !types.includes(e.type))
-      types.push(e.type);
-    into.events.push(item);
-    items.set(id, item);
-    events.push({ item, index });
+    walk(kids[i], depth + 1, [...rails, !last]);
   });
-  const bands = [];
-  for (const b of rawBands) {
-    const a = day(b.from);
-    if (!a)
-      continue;
-    const z = b.to ? day(b.to) : null;
-    bands.push({ from: a.from, to: z ? z.to : today, label: b.label });
-  }
-  bands.sort((x, y) => x.from - y.from);
-  const all = [...items.values()].flatMap((i) => [i.from, i.to]);
-  for (const b of bands)
-    all.push(b.from, b.to);
-  const hasOpen = [...items.values()].some((i) => i.open);
-  const lo = all.length ? Math.min(...all) : today - 90;
-  let hi = all.length ? Math.max(...all) : today;
-  if (hasOpen || data.axis?.today)
-    hi = Math.max(hi, today);
-  const from = day(data.axis?.from)?.from ?? startOfMonth(lo);
-  const to = day(data.axis?.to)?.to ?? hi + Math.max(6, Math.round((hi - from) * 0.05));
-  const laneIndex = (id) => laneOrder.indexOf(id);
-  const order = eventOrder(events.map((e) => ({ ...e, laneIndex: laneIndex(e.item.lane) })));
-  for (const l of lanes.values())
-    l.events.sort((a, b) => a.from - b.from);
-  return {
-    from,
-    to: Math.max(to, from + 1),
-    today,
-    lanes: laneOrder.map((id) => lanes.get(id)),
-    events: order,
-    bands,
-    states: [...states.values()],
-    types,
-    inferred,
-    verified: [...items.values()].some((i) => i.provenance === "verified"),
-    items
-  };
+  walk(roots, 0, []);
+  return { trunk, rows, flat: !trunk && rows.every((r) => r.depth === 0 && !r.children) };
 }
-var DEFAULT_MARKS = ["release", "deletion"];
-function quietEvents(events, marks) {
-  if (marks === "all")
-    return new Set;
-  const quiet = events.filter((e) => e.type && !marks.includes(e.type));
-  return quiet.length === events.length ? new Set : new Set(quiet.map((e) => e.id));
+var isNum = (c) => typeof c === "number" || typeof c === "object" && typeof c.text === "number";
+function fillCell(c) {
+  if (typeof c !== "object")
+    return { text: String(c) };
+  return { ...c, text: String(c.text) };
 }
-var PLURALS = {
-  commit: "commits",
-  release: "releases",
-  deletion: "deletions",
-  channel: "channel switches",
-  audit: "findings"
-};
-function quietLabel(events, quiet) {
-  const types = [];
-  for (const e of events)
-    if (quiet.has(e.id) && e.type && !types.includes(e.type))
-      types.push(e.type);
-  const names = types.map((t) => PLURALS[t] ?? `${t}s`);
-  return names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names[0] ?? "";
-}
-function eventOrder(events) {
-  return [...events].sort((a, b) => a.item.from - b.item.from || a.laneIndex - b.laneIndex || a.index - b.index).map((e) => e.item);
-}
-function stepEvent(order, current, dir, at) {
-  if (!order.length)
-    return null;
-  const i = current === null ? -1 : order.findIndex((e) => e.id === current);
-  if (i < 0 && at !== undefined) {
-    const next = dir > 0 ? order.find((e) => e.from >= at) : [...order].reverse().find((e) => e.from <= at);
-    return next ?? (dir > 0 ? order[order.length - 1] : order[0]);
-  }
-  if (i < 0)
-    return dir > 0 ? order[0] : order[order.length - 1];
-  return order[Math.max(0, Math.min(order.length - 1, i + dir))];
-}
-function dayScale(from, to, width) {
-  const span = Math.max(1, to - from);
-  return {
-    x: (day) => (day - from) / span * width,
-    day: (x) => from + x / Math.max(1, width) * span,
-    f: (day) => (day - from) / span
-  };
-}
-var STEPS = [1, 2, 3, 6, 12];
-function monthTicks(from, to, width, minGap = 44) {
-  const perMonth = width / Math.max(1, to - from) * 30.44;
-  const step = STEPS.find((s) => s * perMonth >= minGap) ?? 12;
-  const ticks = [];
-  const { y } = parts(from);
-  let { m } = parts(from);
-  let d = dayOf(y, m, 1);
-  if (d < from) {
-    m++;
-    d = dayOf(y, m, 1);
-  }
-  while (d <= to) {
-    const p = parts(d);
-    if (p.m % step === 0)
-      ticks.push({ day: d, label: p.m === 0 ? String(p.y) : MONTHS[p.m] });
-    m++;
-    d = dayOf(y, m, 1);
-  }
-  return ticks;
-}
-function fitLabels(labels, width, reserved = [], gap = 8) {
-  let end = -Infinity;
-  return labels.map(({ x, w }) => {
-    const x1 = x + w;
-    if (x < end + gap || x1 > width)
-      return false;
-    if (reserved.some((r) => x < r.x1 + gap && x1 > r.x0 - gap))
-      return false;
-    end = x1;
-    return true;
+function fillTable(m) {
+  const wrapped = !m.columns.some((c) => c.key === "cells");
+  const raw = m.rows.map((r) => {
+    const keys = Object.keys(r);
+    const cells = r.cells;
+    return wrapped && keys.length === 1 && keys[0] === "cells" && cells && typeof cells === "object" ? cells : r;
   });
-}
-function clipSpan(from, to, axisFrom, axisTo) {
-  if (to < axisFrom || from > axisTo)
-    return null;
+  const columns = m.columns.map((c) => {
+    const present = raw.map((r) => r[c.key]).filter((v) => v !== undefined && v !== "");
+    const numeric = present.length > 0 && present.every(isNum);
+    return { ...c, align: c.align ?? (numeric ? "right" : "left") };
+  });
+  const rows = raw.map((r) => {
+    const out = {};
+    for (const [k, v] of Object.entries(r))
+      if (v !== undefined && v !== null)
+        out[k] = fillCell(v);
+    return out;
+  });
+  const primary = columns.find((c) => c.key === m.primary)?.key ?? columns[0]?.key ?? "";
   return {
-    from: Math.max(from, axisFrom),
-    to: Math.min(to, axisTo),
-    clipStart: from < axisFrom,
-    clipEnd: to > axisTo
+    kind: "table",
+    columns,
+    rows,
+    ...m.caption ? { caption: m.caption } : {},
+    stack: m.stack ?? "auto",
+    primary
   };
 }
-function fitTag(widths, spanWidth, roomAfter, pad = 6) {
-  for (let i = 0;i < widths.length; i++)
-    if (widths[i] + pad * 2 <= spanWidth)
-      return { index: i, place: "inside" };
-  for (let i = 0;i < widths.length; i++)
-    if (widths[i] + pad <= roomAfter)
-      return { index: i, place: "after" };
-  return null;
-}
-function bandRoom(bands, x) {
-  return bands.map((b, i) => {
-    const next = bands.slice(i + 1).find((n) => n.from > b.from);
-    const end = Math.min(b.to, next ? next.from : Infinity);
-    return Math.max(0, x(end) - x(b.from));
+function fillChapters(chapters) {
+  const id = uniqueIds();
+  const starts = chapters.map((c) => c.start).sort((a, b) => a - b);
+  return chapters.map((c) => {
+    const next = starts.find((s) => s > c.start);
+    const end = c.end ?? (c.duration !== undefined ? Math.round((c.start + c.duration) * 1000) / 1000 : next);
+    return {
+      id: id(c.id ?? slug(c.label)),
+      label: c.label,
+      start: c.start,
+      ...end !== undefined && end > c.start ? { end } : {}
+    };
   });
 }
-function nearestEvent(events, day, tolerance) {
-  let best = null;
-  let gap = tolerance;
-  for (const e of events) {
-    const d = day < e.from ? e.from - day : day > e.to ? day - e.to : 0;
-    if (d <= gap) {
-      best = e;
-      gap = d;
-    }
-  }
-  return best;
-}
-function firstSentence(text) {
-  if (!text)
-    return "";
-  const plain = text.replace(/`([^`]*)`/g, "$1").replace(/\*\*?([^*]+)\*\*?/g, "$1").trim();
-  const m = /^.*?[.!?](?=\s|$)/.exec(plain);
-  return (m ? m[0] : plain).trim();
-}
-
-// src/ui/history.ts
-init_look();
-
-// src/ui/walkthrough-model.ts
-var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
-function slug(text) {
-  return text.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^(.{0,48})-.*$/, (m, head) => m.length > 48 && head ? head : m).slice(0, 48) || "item";
-}
-function uniqueIds() {
-  const seen = new Map;
-  return (id) => {
-    const n = (seen.get(id) ?? 0) + 1;
-    seen.set(id, n);
-    return n === 1 ? id : `${id}-${n}`;
-  };
+function chapterAt(chapters, time) {
+  let at = -1;
+  chapters.forEach((c, i) => {
+    if (time >= c.start && time < (c.end ?? Infinity) && (at < 0 || c.start >= chapters[at].start))
+      at = i;
+  });
+  return at;
 }
-var label = (id) => id.charAt(0).toUpperCase() + id.slice(1).replace(/[-_]+/g, " ");
-function resolveSrc(src, base) {
-  if (!base || /^([a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src))
-    return src;
-  return base.replace(/\/?$/, "/") + src.replace(/^\.\//, "");
+function clock(seconds) {
+  const t = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(t / 3600);
+  const m = Math.floor(t % 3600 / 60);
+  const s = String(t % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
 }
-var VIDEO2 = /\.(mp4|m4v|webm|mov|ogv)(\?|#|$)/i;
-var mediaOf = (src) => VIDEO2.test(src) ? { kind: "video", src } : { kind: "image", src };
-function parseAspect(aspect) {
-  if (aspect === undefined)
-    return;
-  if (typeof aspect === "number")
-    return aspect > 0 && Number.isFinite(aspect) ? aspect : undefined;
-  const m = /^\s*([\d.]+)\s*(?:[/x:×]\s*([\d.]+))?\s*$/.exec(aspect);
-  if (!m)
+function findStep(steps, ref) {
+  if (ref === undefined)
     return;
-  const w = Number(m[1]);
-  const h = m[2] === undefined ? 1 : Number(m[2]);
-  return w > 0 && h > 0 ? w / h : undefined;
+  const r = ref.trim().replace(/^#/, "");
+  return steps.find((s) => s.key === r || s.id === r || s.number === r);
 }
-function source2(s, base) {
-  const v = typeof s === "string" ? { src: s } : s;
-  return { ...v, src: resolveSrc(v.src, base) };
+function linkLabel(href) {
+  const pr = /\/(?:pull|issues)\/(\d+)/.exec(href);
+  if (pr)
+    return `#${pr[1]}`;
+  const tail = href.replace(/[?#].*$/, "").replace(/\/+$/, "").split("/").pop();
+  return tail || href;
 }
-function fillMedia(m, base) {
-  if (typeof m === "string")
-    return mediaOf(resolveSrc(m, base));
-  switch (m.kind) {
-    case "compare": {
-      const { chapters, ...rest } = m;
-      return {
-        ...rest,
-        before: source2(m.before, base),
-        after: source2(m.after, base),
-        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
-      };
-    }
-    case "video": {
-      const { chapters, captionsSrc, captions, ...rest } = m;
-      const vtt = captions ?? captionsSrc;
-      return {
-        ...rest,
-        src: resolveSrc(m.src, base),
-        ...m.poster ? { poster: resolveSrc(m.poster, base) } : {},
-        ...vtt ? { captions: resolveSrc(vtt, base) } : {},
-        ...chapters?.length ? { chapters: fillChapters(chapters) } : {}
-      };
-    }
-    case "image":
-      return { ...m, src: resolveSrc(m.src, base) };
-    case "history":
-      if ("data" in m)
-        return m;
-      return {
-        kind: "history",
-        data: historyData(m),
-        ...m.label ? { label: m.label } : {},
-        ...m.marks ? { marks: m.marks } : {}
-      };
-    case "stack":
-      return {
-        kind: "stack",
-        ...m.base ? { base: m.base } : {},
-        items: m.items.map(fillStackItem)
-      };
-    case "table":
-      return fillTable(m);
-    default:
-      return m;
-  }
-}
-function historyData(m) {
-  const events = m.events ?? [];
-  if (m.lanes || m.bands || m.states || m.axis)
-    return {
-      ...m.axis ? { axis: m.axis } : {},
-      ...m.lanes ? { lanes: m.lanes } : {},
-      ...events.length ? { events } : {},
-      ...m.bands ? { bands: m.bands } : {},
-      ...m.states ? { states: m.states } : {}
-    };
-  const groups = [];
-  if (events.length)
-    groups.push({ events });
-  for (const g of m.groups ?? [])
-    groups.push({
-      ...g.heading ? { heading: g.heading } : {},
-      ...g.summary ? { summary: g.summary } : {},
-      events: g.events ?? g.rows ?? []
-    });
-  return { groups };
-}
-function parseBranch(branch) {
-  if (!branch?.trim())
-    return {};
-  const [head, base] = branch.split(/\s*(?:→|->|=>|⇒)\s*/, 2).map((s) => s.trim());
-  return { ...head ? { head } : {}, ...base ? { base } : {} };
-}
-function parseDelta(delta) {
-  if (delta === undefined || typeof delta === "object")
-    return delta;
-  const m = /\+\s*([\d,_]+)[^\d+]*?[-−–]\s*([\d,_]+)/.exec(delta);
-  if (!m)
-    return delta.trim() || undefined;
-  const n = (s) => Number(s.replace(/[,_]/g, ""));
-  return { add: n(m[1]), del: n(m[2]) };
-}
-function fillStackItem(it) {
-  const parsed = parseBranch(it.branch);
-  const head = parsed.head ?? it.head;
-  const base = parsed.base ?? it.base;
-  const delta = parseDelta(it.delta);
-  const step = it.step ?? it.stepId;
-  const pr = String(it.pr).trim();
-  return {
-    pr: /^\d+$/.test(pr) ? `#${pr}` : pr,
-    ...it.href ? { href: it.href } : {},
-    title: it.title,
-    ...head ? { head } : {},
-    ...base ? { base } : {},
-    ...delta !== undefined ? { delta } : {},
-    ...it.status ? { status: it.status } : {},
-    ...it.tone ? { tone: it.tone } : {},
-    ...it.summary ? { summary: it.summary } : {},
-    ...step ? { step } : {},
-    ...it.order !== undefined && it.order !== "" ? { order: String(it.order) } : {}
-  };
-}
-function stackLayout(m) {
-  const items = m.items;
-  const byHead = new Map;
-  items.forEach((it, i) => it.head && !byHead.has(it.head) && byHead.set(it.head, i));
-  let trunk = m.base ?? null;
-  if (!trunk) {
-    const tally = new Map;
-    for (const it of items)
-      if (it.base && !byHead.has(it.base))
-        tally.set(it.base, (tally.get(it.base) ?? 0) + 1);
-    let best = 0;
-    for (const [b, n] of tally)
-      if (n > best)
-        [trunk, best] = [b, n];
-  }
-  const parentOf = items.map((it, i) => {
-    const p = it.base === undefined ? undefined : byHead.get(it.base);
-    return p === undefined || p === i ? null : p;
-  });
-  items.forEach((_, i) => {
-    const seen = new Set;
-    for (let n = i;n !== null; n = parentOf[n]) {
-      if (seen.has(n)) {
-        const loop = [n];
-        for (let k = parentOf[n];k !== n && k !== null; k = parentOf[k])
-          loop.push(k);
-        parentOf[Math.min(...loop)] = null;
-        break;
-      }
-      seen.add(n);
-    }
-  });
-  const kids = items.map(() => []);
-  const roots = [];
-  parentOf.forEach((p, i) => (p === null ? roots : kids[p]).push(i));
-  const rows = [];
-  const walk = (list, depth, rails) => list.forEach((i, n) => {
-    const it = items[i];
-    const last = n === list.length - 1;
-    const off = parentOf[i] === null && it.base && it.base !== trunk ? it.base : undefined;
-    rows.push({
-      item: it,
-      index: i,
-      depth,
-      parent: parentOf[i],
-      last,
-      rails,
-      children: kids[i].length,
-      ...off ? { offBase: off } : {}
-    });
-    walk(kids[i], depth + 1, [...rails, !last]);
-  });
-  walk(roots, 0, []);
-  return { trunk, rows, flat: !trunk && rows.every((r) => r.depth === 0 && !r.children) };
-}
-var isNum = (c) => typeof c === "number" || typeof c === "object" && typeof c.text === "number";
-function fillCell(c) {
-  if (typeof c !== "object")
-    return { text: String(c) };
-  return { ...c, text: String(c.text) };
-}
-function fillTable(m) {
-  const wrapped = !m.columns.some((c) => c.key === "cells");
-  const raw = m.rows.map((r) => {
-    const keys = Object.keys(r);
-    const cells = r.cells;
-    return wrapped && keys.length === 1 && keys[0] === "cells" && cells && typeof cells === "object" ? cells : r;
-  });
-  const columns = m.columns.map((c) => {
-    const present = raw.map((r) => r[c.key]).filter((v) => v !== undefined && v !== "");
-    const numeric = present.length > 0 && present.every(isNum);
-    return { ...c, align: c.align ?? (numeric ? "right" : "left") };
-  });
-  const rows = raw.map((r) => {
-    const out = {};
-    for (const [k, v] of Object.entries(r))
-      if (v !== undefined && v !== null)
-        out[k] = fillCell(v);
-    return out;
-  });
-  const primary = columns.find((c) => c.key === m.primary)?.key ?? columns[0]?.key ?? "";
-  return {
-    kind: "table",
-    columns,
-    rows,
-    ...m.caption ? { caption: m.caption } : {},
-    stack: m.stack ?? "auto",
-    primary
-  };
-}
-function fillChapters(chapters) {
-  const id = uniqueIds();
-  const starts = chapters.map((c) => c.start).sort((a, b) => a - b);
-  return chapters.map((c) => {
-    const next = starts.find((s) => s > c.start);
-    const end = c.end ?? (c.duration !== undefined ? Math.round((c.start + c.duration) * 1000) / 1000 : next);
-    return {
-      id: id(c.id ?? slug(c.label)),
-      label: c.label,
-      start: c.start,
-      ...end !== undefined && end > c.start ? { end } : {}
-    };
-  });
-}
-function chapterAt(chapters, time) {
-  let at = -1;
-  chapters.forEach((c, i) => {
-    if (time >= c.start && time < (c.end ?? Infinity) && (at < 0 || c.start >= chapters[at].start))
-      at = i;
-  });
-  return at;
-}
-function clock(seconds) {
-  const t = Math.max(0, Math.floor(seconds));
-  const h = Math.floor(t / 3600);
-  const m = Math.floor(t % 3600 / 60);
-  const s = String(t % 60).padStart(2, "0");
-  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
-}
-function findStep(steps, ref) {
-  if (ref === undefined)
-    return;
-  const r = ref.trim().replace(/^#/, "");
-  return steps.find((s) => s.key === r || s.id === r || s.number === r);
-}
-function linkLabel(href) {
-  const pr = /\/(?:pull|issues)\/(\d+)/.exec(href);
-  if (pr)
-    return `#${pr[1]}`;
-  const tail = href.replace(/[?#].*$/, "").replace(/\/+$/, "").split("/").pop();
-  return tail || href;
-}
-function normalizeWalkthrough(doc) {
-  const sectionId = uniqueIds();
-  const steps = [];
-  const sections = doc.sections.map((s, si) => {
-    const id = sectionId(s.id ?? slug(s.title));
-    const stepId = uniqueIds();
-    const own = s.steps.map((step, i) => {
-      const sid = stepId(step.id ?? slug(step.title));
-      const optionId = uniqueIds();
-      const options = (step.options ?? []).map((o, oi) => ({
-        id: optionId(o.id ?? String.fromCharCode(97 + oi % 26)),
-        label: o.label,
-        letter: String.fromCharCode(65 + oi % 26),
-        ...o.caption ? { caption: o.caption } : {},
-        ...o.media !== undefined ? { media: fillMedia(o.media, doc.base) } : {},
-        suggested: o.suggested === true
-      }));
-      const list = step.media === undefined ? [] : Array.isArray(step.media) ? step.media : [step.media];
-      const asked = step.ask === "verdict" ? "note" : step.ask;
-      const ask = asked === "pick" && !options.length ? "note" : asked ?? (options.length ? "pick" : "note");
-      const walk = {
-        key: `${id}/${sid}`,
-        id: sid,
-        section: id,
-        number: `${si + 1}.${i + 1}`,
-        title: step.title,
-        ...step.caption ? { caption: step.caption } : {},
-        ...step.question ? { question: step.question } : {},
-        media: list.map((m) => fillMedia(m, doc.base)),
-        columns: Math.max(1, Math.min(3, Math.round(step.columns ?? 1))),
-        ...step.more?.trim() ? { more: step.more.trim() } : {},
-        options,
-        ask
+function normalizeWalkthrough(doc) {
+  const sectionId = uniqueIds();
+  const steps = [];
+  const sections = doc.sections.map((s, si) => {
+    const id = sectionId(s.id ?? slug(s.title));
+    const stepId = uniqueIds();
+    const own = s.steps.map((step, i) => {
+      const sid = stepId(step.id ?? slug(step.title));
+      const optionId = uniqueIds();
+      const options = (step.options ?? []).map((o, oi) => ({
+        id: optionId(o.id ?? String.fromCharCode(97 + oi % 26)),
+        label: o.label,
+        letter: String.fromCharCode(65 + oi % 26),
+        ...o.caption ? { caption: o.caption } : {},
+        ...o.media !== undefined ? { media: fillMedia(o.media, doc.base) } : {},
+        ...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;
+      const ask = asked === "pick" && !options.length ? "note" : asked ?? (options.length ? "pick" : "note");
+      const walk = {
+        key: `${id}/${sid}`,
+        id: sid,
+        section: id,
+        number: `${si + 1}.${i + 1}`,
+        title: step.title,
+        ...step.caption ? { caption: step.caption } : {},
+        ...step.question ? { question: step.question } : {},
+        media: list.map((m) => fillMedia(m, doc.base)),
+        columns: Math.max(1, Math.min(3, Math.round(step.columns ?? 1))),
+        ...step.more?.trim() ? { more: step.more.trim() } : {},
+        options,
+        ask
       };
       steps.push(walk);
       return walk;
@@ -18362,398 +17855,1192 @@ function prStatus(status) {
   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);
-  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;
-    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))
-      if (!out[n].href)
-        out[n] = { ...out[n], href: `https://github.com/${repo}/pull/${n}` };
+function knownPRs(doc, sections, steps = []) {
+  const out = {};
+  const repo = repoOf(doc);
+  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;
+    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))
+      if (!out[n].href)
+        out[n] = { ...out[n], href: `https://github.com/${repo}/pull/${n}` };
+  }
+  return out;
+}
+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 ? { ...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)
+    return [...sections];
+  const noun = typeof kickers === "object" ? kickers.noun.trim() : "PR";
+  const counted = typeof kickers === "object" ? sections : sections.filter((s) => s.link && isPullRequest(s.link.href));
+  return sections.map((s, i) => {
+    const own = source[i]?.kicker;
+    if (own !== undefined || s.kicker)
+      return s;
+    const at = counted.indexOf(s);
+    return at < 0 ? s : { ...s, kicker: `${noun} ${at + 1} of ${counted.length}`.trim() };
+  });
+}
+function tableStacks(stack, room, natural) {
+  if (stack !== "auto")
+    return stack === "always";
+  return room > 0 && natural > room + 1;
+}
+function noteBarReserve(bar, inset, gap) {
+  return Math.max(0, Math.ceil(bar)) + inset + gap;
+}
+function parseAt(at) {
+  if (!at)
+    return null;
+  const t = Date.parse(at);
+  return Number.isFinite(t) ? t : null;
+}
+function sortFeed(items) {
+  return items.map((item, i) => ({ item, i })).sort((a, b) => {
+    const x = a.item.at ?? -Infinity;
+    const y = b.item.at ?? -Infinity;
+    return x !== y ? y - x : b.i - a.i;
+  }).map((e) => e.item);
+}
+function ago(at, now) {
+  const s = Math.max(0, (now - at) / 1000);
+  if (s < 45)
+    return "just now";
+  if (s < 3600)
+    return `${Math.round(s / 60)}m ago`;
+  if (s < 86400)
+    return `${Math.round(s / 3600)}h ago`;
+  if (s < 7 * 86400)
+    return `${Math.round(s / 86400)}d ago`;
+  return new Date(at).toISOString().slice(0, 10);
+}
+function statusLook(status) {
+  const id = slug(status);
+  const tone = id === "ready" || id === "merged" || id === "shipped" ? "good" : id === "needs-taste" || id === "needs-review" || id === "review" ? "warn" : id === "blocked" || id === "broken" || id === "failing" ? "bad" : id === "draft" || id === "wip" ? "dim" : "info";
+  return { label: label(status), tone };
+}
+function verdictTone(id, index) {
+  if (/^(ship|yes|good|approve|keep|lgtm)/.test(id))
+    return "good";
+  if (/^(change|fix|revise|tweak|redo)/.test(id))
+    return "warn";
+  if (/^(no|reject|drop|revert|bad)/.test(id))
+    return "bad";
+  if (/^(unsure|maybe|skip|later)/.test(id))
+    return "dim";
+  return index === 0 ? "good" : "dim";
+}
+var EMPTY_STATE = { steps: {} };
+function setFeedback(state, key, patch) {
+  const next = { ...state.steps[key] };
+  for (const [k, v] of Object.entries(patch)) {
+    if (v === undefined)
+      continue;
+    if (v === null || v.trim() === "")
+      delete next[k];
+    else
+      next[k] = v;
+  }
+  const steps = { ...state.steps };
+  if (Object.keys(next).length)
+    steps[key] = next;
+  else
+    delete steps[key];
+  return { ...state, steps };
+}
+var hasContent = (n) => Boolean(n.text?.trim() || n.voice || n.ink?.paths.length);
+function addNote(state, note) {
+  if (!hasContent(note))
+    return state;
+  return { ...state, notes: [...state.notes ?? [], note] };
+}
+function removeNote(state, id) {
+  return { ...state, notes: (state.notes ?? []).filter((n) => n.id !== id) };
+}
+var notesOn = (state, key) => (state.notes ?? []).filter((n) => n.step === key);
+function isAnswered(step, state) {
+  if (step.ask === "none")
+    return false;
+  const fb = state.steps[step.key];
+  if (step.ask === "pick")
+    return fb?.pick !== undefined;
+  return Boolean(fb?.verdict || fb?.note || notesOn(state, step.key).length);
+}
+function digitChoice(step, fb, key) {
+  if (step.ask !== "pick" || !/^[1-9]$/.test(key))
+    return;
+  const id = step.options[Number(key) - 1]?.id;
+  if (id === undefined)
+    return;
+  return fb?.pick === id ? null : id;
+}
+function walkthroughProgress(w, state) {
+  const asked = w.steps.filter((s) => s.ask !== "none");
+  const done = asked.filter((s) => isAnswered(s, state));
+  const next = asked.find((s) => !isAnswered(s, state));
+  return { done: done.length, total: asked.length, next: next?.key ?? null };
+}
+function adjacentStep(keys, current, dir) {
+  if (!keys.length)
+    return;
+  const i = current === null ? -1 : keys.indexOf(current);
+  if (i < 0)
+    return dir > 0 ? keys[0] : keys[keys.length - 1];
+  return keys[Math.max(0, Math.min(keys.length - 1, i + dir))];
+}
+var LOG_MAX = 40;
+function pushContext(log, event, max = LOG_MAX) {
+  const last = log[log.length - 1];
+  const merge = last && last.what === event.what && last.step === event.step && (event.what === "seek" || event.what === "step") && event.at - last.at < 1500;
+  const next = merge ? [...log.slice(0, -1), event] : [...log, event];
+  return next.slice(-max);
+}
+function recentContext(log, now, windowMs = 90000, min = 4) {
+  const inWindow = log.filter((e) => now - e.at <= windowMs);
+  return inWindow.length >= min ? inWindow : log.slice(-min);
+}
+function formatTime(seconds) {
+  const t = Math.max(0, Math.round(seconds * 10) / 10);
+  const m = Math.floor(t / 60);
+  const s = (t - m * 60).toFixed(1).padStart(4, "0");
+  return `${m}:${s}`;
+}
+function inkPath(points, w, h) {
+  if (!points.length || w <= 0 || h <= 0)
+    return "";
+  const n = (v) => String(Math.round(Math.max(0, Math.min(1, v)) * 1000) / 1000);
+  const kept = [points[0]];
+  for (const p of points.slice(1)) {
+    const l = kept[kept.length - 1];
+    if (Math.hypot(p.x - l.x, p.y - l.y) >= 1)
+      kept.push(p);
+  }
+  return kept.map((p, i) => `${i ? "L" : "M"}${n(p.x / w)} ${n(p.y / h)}`).join("");
+}
+function zoomWords(z) {
+  const times = Math.round(1 / Math.max(0.001, Math.max(z.w, z.h)) * 10) / 10;
+  return `${times}× at ${Math.round(z.u * 100)}%, ${Math.round(z.v * 100)}%`;
+}
+function describeMedia(m) {
+  if (!m)
+    return "";
+  const parts = [];
+  if (m.file)
+    parts.push(`${m.kind} ${m.file}`);
+  else if (m.time !== undefined)
+    parts.push(`${m.kind} at ${formatTime(m.time)}`);
+  else
+    parts.push(m.kind);
+  if (m.chapter)
+    parts[0] += ` in “${m.chapter}”`;
+  if (m.loop)
+    parts.push(`loop ${formatTime(m.loop.start)}–${formatTime(m.loop.end)}`);
+  if (m.zoom)
+    parts.push(`zoomed ${zoomWords(m.zoom)}`);
+  if (m.mode)
+    parts.push(m.mode);
+  if (m.full)
+    parts.push("full window");
+  return parts.join(", ");
+}
+function readState(raw) {
+  if (!raw)
+    return EMPTY_STATE;
+  try {
+    const v = JSON.parse(raw);
+    if (!v || typeof v !== "object")
+      return EMPTY_STATE;
+    const o = v;
+    const steps = {};
+    if (o.steps && typeof o.steps === "object")
+      for (const [key, fb] of Object.entries(o.steps)) {
+        if (!fb || typeof fb !== "object")
+          continue;
+        const f = fb;
+        const clean = {};
+        for (const k of ["verdict", "pick", "note"])
+          if (typeof f[k] === "string" && f[k].trim())
+            clean[k] = f[k];
+        if (Object.keys(clean).length)
+          steps[key] = clean;
+      }
+    const notes = Array.isArray(o.notes) ? o.notes.filter(isNote) : [];
+    return {
+      steps,
+      ...notes.length ? { notes } : {},
+      ...typeof o.note === "string" && o.note.trim() ? { note: o.note } : {}
+    };
+  } catch {
+    return EMPTY_STATE;
+  }
+}
+function isNote(v) {
+  if (!v || typeof v !== "object")
+    return false;
+  const n = v;
+  const ctx = n.context;
+  return typeof n.id === "string" && typeof n.at === "number" && (n.step === null || typeof n.step === "string") && (n.text === undefined || typeof n.text === "string") && !!ctx && Array.isArray(ctx.log) && hasContent(n);
+}
+var noteOut = (n) => ({
+  at: new Date(n.at).toISOString(),
+  ...n.text?.trim() ? { text: n.text.trim() } : {},
+  ...n.voice ? { voice: n.voice } : {},
+  ...n.ink?.paths.length ? { ink: n.ink } : {},
+  ...n.context.media ? { media: n.context.media } : {},
+  log: n.context.log.map(({ at, ...e }) => ({ ...e, ago: Math.round((n.at - at) / 100) / 10 }))
+});
+function collectFeedback(w, state) {
+  const progress = walkthroughProgress(w, state);
+  const sectionTitle = new Map(w.sections.map((s) => [s.id, s.link ? `${s.link.label} ${s.title}` : s.title]));
+  const keys = new Set(w.steps.map((s) => s.key));
+  const steps = [];
+  for (const s of w.steps) {
+    const fb = state.steps[s.key];
+    const notes = notesOn(state, s.key).map(noteOut);
+    if (s.ask === "none" && !notes.length)
+      continue;
+    const option = s.ask === "pick" ? s.options.find((o) => o.id === fb?.pick) : undefined;
+    const suggested = s.options.find((o) => o.suggested);
+    steps.push({
+      key: s.key,
+      number: s.number,
+      section: sectionTitle.get(s.section) ?? s.section,
+      title: s.title,
+      ask: s.ask,
+      ...option ? { pick: option.id, pickLabel: `${option.letter}: ${option.label}` } : {},
+      ...option && suggested && suggested.id !== option.id ? { suggested: `${suggested.letter}: ${suggested.label}` } : {},
+      notes,
+      ...fb?.verdict ? { verdict: fb.verdict } : {},
+      ...fb?.note ? { note: fb.note } : {}
+    });
+  }
+  return {
+    id: w.id,
+    title: w.title,
+    reviewed: progress.done,
+    total: progress.total,
+    ...state.note ? { note: state.note } : {},
+    steps,
+    general: (state.notes ?? []).filter((n) => !n.step || !keys.has(n.step)).map(noteOut)
+  };
+}
+var quote = (text) => text.trim().replace(/\s*\n\s*/g, " ");
+function noteLine(n) {
+  const bits = [];
+  if (n.text)
+    bits.push(`“${quote(n.text)}”`);
+  if (n.voice)
+    bits.push(`voice note ${formatTime(n.voice.duration)} (${n.voice.url})`);
+  if (n.ink)
+    bits.push(`ink, ${n.ink.paths.length} stroke${n.ink.paths.length === 1 ? "" : "s"}`);
+  const seen = describeMedia(n.media);
+  return `${bits.join(" + ")}${seen ? ` · ${seen}` : ""}`;
+}
+function feedbackMarkdown(fb, verdicts) {
+  const name = (id) => verdicts?.find((v) => v.id === id)?.label ?? label(id);
+  const lines = [
+    `## Feedback: ${fb.title}`,
+    "",
+    `${fb.reviewed} of ${fb.total} reviewed · \`${fb.id}\``
+  ];
+  if (fb.note)
+    lines.push("", quote(fb.note));
+  if (fb.general.length) {
+    lines.push("", "### General");
+    for (const n of fb.general)
+      lines.push(`- ${noteLine(n)}`);
+  }
+  let section = "";
+  for (const s of fb.steps) {
+    if (s.section !== section) {
+      section = s.section;
+      lines.push("", `### ${section}`);
+    }
+    const head = [];
+    if (s.pickLabel)
+      head.push(`**Picked ${s.pickLabel}**${s.suggested ? ` (suggested ${s.suggested})` : ""}`);
+    if (s.verdict)
+      head.push(`**${name(s.verdict)}**`);
+    if (s.note)
+      head.push(`“${quote(s.note)}”`);
+    const open = !head.length && !s.notes.length;
+    lines.push(`- ${s.number} ${s.title}: ${open ? "_open_" : head.join(" · ") || `${s.notes.length} note${s.notes.length === 1 ? "" : "s"}`}`);
+    for (const n of s.notes)
+      lines.push(`  - ${noteLine(n)}`);
+  }
+  return lines.join(`
+`) + `
+`;
+}
+var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+function plainMarkdown(text) {
+  return text.replace(/\[([^\]\n]+)\]\([^)\s]+\)/g, "$1").replace(/`([^`\n]+)`/g, "$1").replace(/\*\*([^*\n]+)\*\*/g, "$1").replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1$2").replace(/\s+/g, " ").trim();
+}
+function inlineMarkdown(text) {
+  const codes = [];
+  let s = text.replace(/`([^`\n]+)`/g, (_, c) => {
+    codes.push(c);
+    return `\x00${codes.length - 1}\x00`;
+  });
+  s = escapeHtml(s);
+  s = s.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (m, t, href) => {
+    const raw = href.replace(/&amp;/g, "&");
+    if (!/^(https?:\/\/|\/|\.{0,2}\/|#)/i.test(raw) && /^[a-z][a-z0-9+.-]*:/i.test(raw))
+      return m;
+    return `<a href="${href}" target="_blank" rel="noreferrer">${t}</a>`;
+  });
+  s = s.replace(/\*\*([^*\n]+)\*\*/g, "<b>$1</b>");
+  s = s.replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1<i>$2</i>");
+  s = s.replace(/\n{2,}/g, "<br><br>").replace(/\n/g, " ");
+  return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
+}
+
+// src/ui/review-options.ts
+var el = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+function renderFacts(doc, groups) {
+  const box = el(doc, "div", "knobs-wt-facts");
+  for (const g of groups) {
+    if (!g.facts.length && !g.title)
+      continue;
+    const group = el(doc, "section", "knobs-wt-fgroup");
+    if (g.title) {
+      const head = el(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 = el(doc, "dl", "knobs-wt-fterms");
+  for (const f of facts) {
+    const row = el(doc, "div", "knobs-wt-fact");
+    const dt = el(doc, "dt");
+    dt.innerHTML = inlineMarkdown(f.term);
+    const dd = el(doc, "dd");
+    if (f.code) {
+      dd.dataset.code = "";
+      for (const v of f.value) {
+        const chip = el(doc, "code");
+        chip.textContent = v;
+        dd.append(chip);
+      }
+    } else
+      for (const v of f.value) {
+        const line = el(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 = el(doc, "div", "knobs-wt-option");
+  const head = options.head ?? el(doc, "div");
+  head.classList.add("knobs-wt-ohead");
+  const kicker = el(doc, "span", "knobs-wt-okicker");
+  const n = el(doc, "span");
+  n.textContent = o.number;
+  kicker.append(n);
+  if (o.recommended) {
+    const rec = el(doc, "span", "knobs-wt-orec");
+    rec.textContent = "Recommended";
+    kicker.append(rec);
+  }
+  const title = el(doc, "span", "knobs-wt-otitle");
+  title.innerHTML = inlineMarkdown(o.title);
+  head.append(kicker, title);
+  tile.append(head);
+  if (o.summary) {
+    const p = el(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/toast.ts
+init_look();
+init_layer();
+var regions = new WeakMap;
+function toast(message, options = {}) {
+  const doc = options.within?.ownerDocument ?? options.doc ?? document;
+  const win = doc.defaultView;
+  const key = options.within ?? doc;
+  let r = regions.get(key);
+  if (!r || !r.el.isConnected) {
+    const el = options.within ? Object.assign(doc.createElement("div"), { className: "knobs-root knobs-ui knobs-toast" }) : layerElement(doc, "knobs-layer knobs-toast", options.look);
+    if (options.within) {
+      injectUiStyles(doc);
+      options.within.append(el);
+    }
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    const text = doc.createElement("span");
+    text.className = "knobs-toast-text";
+    const button = doc.createElement("button");
+    button.type = "button";
+    button.className = "knobs-toast-action";
+    el.append(text, button);
+    const region = {
+      el,
+      text,
+      button,
+      motion: presence(el, { scale: 0.96, blur: 4, dy: 10, duration: 0.36 }),
+      timer: 0
+    };
+    r = region;
+    regions.set(key, region);
+    el.addEventListener("pointerenter", () => win.clearTimeout(region.timer));
+    el.addEventListener("pointerleave", () => {
+      if (region.motion.shown)
+        arm(region, 1600);
+    });
+  }
+  const region = r;
+  const arm = (reg, ms) => {
+    win.clearTimeout(reg.timer);
+    reg.timer = win.setTimeout(() => void reg.motion.hide(), ms);
+  };
+  region.text.textContent = message;
+  region.el.dataset.tone = options.tone ?? "info";
+  const action = options.action;
+  region.button.hidden = !action;
+  region.button.textContent = action?.label ?? "";
+  region.button.onclick = action ? () => {
+    action.run();
+    region.motion.hide();
+  } : null;
+  region.motion.show();
+  arm(region, options.linger ?? (options.tone === "error" ? 6000 : 3200));
+  return {
+    dismiss() {
+      if (region.text.textContent !== message)
+        return;
+      win.clearTimeout(region.timer);
+      region.motion.hide();
+    }
+  };
+}
+
+// src/ui/walkthrough-annotations.ts
+var EYE = "M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z";
+var EYE_OFF = "M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z";
+var glyph = (d) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
+var ARROW = '<svg class="knobs-wt-anno-arrow" viewBox="0 0 28 28" width="28" height="28" aria-hidden="true"><path d="M3 3 L24 24 M24 24 L24 13 M24 24 L13 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+var shapeOf = (a) => a.shape ?? (a.w !== undefined && a.h !== undefined ? "box" : "dot");
+var showsAt = (a, time) => !a.at || time === undefined || time >= a.at[0] && time <= a.at[1];
+function placeMark(a, rect, view = ALL) {
+  const w = a.w ?? 0;
+  const h = a.h ?? 0;
+  const x = (a.x - view.u) / view.w;
+  const y = (a.y - view.v) / view.h;
+  const ww = w / view.w;
+  const hh = h / view.h;
+  if (x + ww < 0 || y + hh < 0 || x > 1 || y > 1)
+    return null;
+  return { x: rect.x + x * rect.w, y: rect.y + y * rect.h, w: ww * rect.w, h: hh * rect.h };
+}
+var ALL = { u: 0, v: 0, w: 1, h: 1 };
+var scopeOf = (el) => el.closest(".knobs-walkthrough") ?? el.closest(".knobs-wt-slot") ?? el;
+var annotationsOn = (scope) => scope.dataset.annotations !== "off";
+function setAnnotations(scope, on) {
+  if (on)
+    delete scope.dataset.annotations;
+  else
+    scope.dataset.annotations = "off";
+  for (const b of Array.from(scope.querySelectorAll(".knobs-wt-anno-toggle")))
+    syncToggle(b, on);
+}
+function syncToggle(b, on) {
+  b.setAttribute("aria-pressed", String(on));
+  b.title = on ? "Hide annotations (a)" : "Show annotations (a)";
+  b.innerHTML = glyph(on ? EYE : EYE_OFF);
+}
+function annotationLayer(host, list, place, corner = host) {
+  const doc = host.ownerDocument;
+  const layer = doc.createElement("div");
+  layer.className = "knobs-wt-anno";
+  layer.setAttribute("aria-hidden", "true");
+  host.append(layer);
+  const toggle = doc.createElement("button");
+  toggle.type = "button";
+  toggle.className = "knobs-wt-anno-toggle";
+  toggle.setAttribute("aria-label", "Annotations");
+  syncToggle(toggle, annotationsOn(scopeOf(host)));
+  toggle.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const scope = scopeOf(host);
+    setAnnotations(scope, !annotationsOn(scope));
+  });
+  corner.append(toggle);
+  let marks = [];
+  const make = (a) => {
+    const m = doc.createElement("div");
+    const shape = shapeOf(a);
+    m.className = "knobs-wt-mark";
+    m.dataset.shape = shape;
+    m.dataset.hidden = "";
+    if (shape === "arrow")
+      m.innerHTML = ARROW;
+    if (a.label) {
+      const l = doc.createElement("span");
+      l.className = "knobs-wt-mark-label";
+      l.textContent = a.label;
+      m.append(l);
+    }
+    layer.append(m);
+    return m;
+  };
+  let settled = false;
+  const update = () => {
+    const p = place();
+    if (marks.length !== p.rects.length) {
+      for (const row of marks)
+        for (const m of row)
+          m.remove();
+      marks = p.rects.map(() => list.map(make));
+    }
+    p.rects.forEach((rect, i) => {
+      list.forEach((a, j) => {
+        const m = marks[i][j];
+        const box = placeMark(a, rect, p.view);
+        const show = box !== null && showsAt(a, p.time);
+        if (box) {
+          m.style.transform = `translate(${box.x.toFixed(2)}px,${box.y.toFixed(2)}px)`;
+          m.style.width = `${box.w.toFixed(2)}px`;
+          m.style.height = `${box.h.toFixed(2)}px`;
+        }
+        m.toggleAttribute("data-hidden", !show);
+      });
+    });
+    if (!settled) {
+      settled = true;
+      requestAnimationFrame(() => requestAnimationFrame(() => layer.dataset.settled = ""));
+    }
+  };
+  const ro = new ResizeObserver(() => update());
+  ro.observe(host);
+  update();
+  return {
+    element: layer,
+    update,
+    dispose() {
+      ro.disconnect();
+      layer.remove();
+      toggle.remove();
+    }
+  };
+}
+
+// src/ui/walkthrough-blocks.ts
+init_motion();
+
+// src/ui/history.ts
+init_motion();
+init_glide();
+
+// src/ui/history-css.ts
+var historyCss = `
+:where(.knobs-history,.knobs-history *){box-sizing:border-box}
+.knobs-ui.knobs-history{--hy-gutter:128px;--hy-lane:24px;--hy-bar:16px;--hy-axis:20px;--hy-bandrow:0px;--hy-c:var(--_k-fg-3);
+  --hy-fade:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);
+  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;outline:none;color:var(--_k-fg);
+  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
+  text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
+.knobs-history[data-bands]{--hy-bandrow:var(--_k-leading-small)}
+.knobs-history[data-narrow]{--hy-gutter:0px}
+.knobs-history [hidden]{display:none!important}
+:where(.knobs-ui) :is(.knobs-hy-ev,.knobs-hy-span,.knobs-hy-jump,.knobs-hy-more){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
+  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
+.knobs-history [data-tone="good"]{--hy-c:var(--_k-ok)}
+.knobs-history [data-tone="warn"]{--hy-c:var(--_k-warn)}
+.knobs-history [data-tone="bad"]{--hy-c:var(--_k-danger)}
+.knobs-history [data-tone="info"]{--hy-c:var(--_k-info)}
+.knobs-history [data-tone="dim"]{--hy-c:var(--_k-fg-3)}
+
+/* ——— the chart: lane labels beside the plot (above each lane where it's narrow) ——— */
+.knobs-hy-chart{position:relative;display:grid;grid-template-columns:var(--hy-gutter) minmax(0,1fr)}
+.knobs-hy-axis{position:relative;grid-column:2;grid-row:1;height:calc(var(--hy-bandrow) + var(--hy-axis))}
+:is(.knobs-hy-tick,.knobs-hy-now,.knobs-hy-blabel){position:absolute;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tick{bottom:2px;padding-left:4px}
+.knobs-hy-now{bottom:2px;color:var(--_k-accent-fg);font-weight:var(--_k-weight-label)}
+.knobs-hy-blabel{top:0;padding-left:4px;overflow:hidden;color:var(--_k-fg-2)}
+.knobs-hy-label{grid-column:1;align-self:center;min-width:0;margin-right:var(--_k-space-title);overflow:hidden;white-space:nowrap;
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-history[data-narrow] .knobs-hy-label{grid-column:2;align-self:end;margin:0}
+:is(.knobs-hy-label,.knobs-hy-blabel)[data-overflow]{-webkit-mask-image:var(--hy-fade);mask-image:var(--hy-fade)}
+.knobs-hy-track{position:relative;grid-column:2;height:var(--hy-lane)}
+.knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}
+
+/* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */
+.knobs-hy-band{position:absolute;top:0;bottom:0;background: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)}
+.knobs-hy-hover{background:color-mix(in oklch,var(--_k-fg) 32%,transparent);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-hover[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-sel{background:var(--_k-fg-2);opacity:0}
+.knobs-hy-sel[data-on]{opacity:.6}
+
+/* Spans: a soft bar in their state's tone, inferred ones hatched; the tag at the end. */
+.knobs-hy-span{position:absolute;top:calc((var(--hy-lane) - var(--hy-bar)) / 2);height:var(--hy-bar);border-radius:var(--_k-radius-sm);cursor:pointer;
+  background:color-mix(in oklch,var(--hy-c) 24%,transparent);transition:background calc(var(--_k-hover-out) * 1ms),box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-span[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 34%,transparent) 0 2px,color-mix(in oklch,var(--hy-c) 9%,transparent) 2px 6px)}
+.knobs-hy-span[data-hover]{background-color:color-mix(in oklch,var(--hy-c) 34%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 1px var(--hy-c)}
+.knobs-hy-span[data-clip-start]{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px);mask-image:linear-gradient(to right,transparent,#000 16px)}
+.knobs-hy-span[data-clip-end]{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(to left,transparent,#000 16px);mask-image:linear-gradient(to left,transparent,#000 16px)}
+.knobs-hy-tag{position:absolute;top:0;right:6px;font-size:var(--_k-type-small);line-height:var(--hy-bar);white-space:nowrap;pointer-events:none;
+  color:color-mix(in oklch,var(--hy-c) 55%,var(--_k-fg))}
+.knobs-hy-tag[data-place="after"]{right:auto;left:calc(100% + 6px)}
+.knobs-hy-tag[data-place="none"]{visibility:hidden}
+
+/* Event marks (their kind named in the tooltip): a dot for a commit, a diamond for a release, a cross for a deletion, a square for a
+   channel's switch, a triangle for a finding; inferred ones hollow. */
+.knobs-hy-ev{position:absolute;top:0;width:16px;height:var(--hy-lane);margin-left:-8px;cursor:pointer;--hy-c:var(--_k-fg-2);--hy-s:9px}
+.knobs-hy-ev::before{content:"";position:absolute;left:50%;top:50%;width:var(--hy-s);height:var(--hy-s);margin:calc(var(--hy-s) / -2) 0 0 calc(var(--hy-s) / -2);
+  border-radius:50%;background:var(--hy-c);transition:scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-ev[data-range]{width:calc(var(--hy-w) + 16px)}
+.knobs-hy-ev[data-range]::before{left:calc(8px - var(--hy-s) / 2);right:calc(8px - var(--hy-s) / 2);width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-hy-ev[data-type="release"]{--hy-s:8px}
+.knobs-hy-ev[data-type="release"]::before{border-radius:1.5px;rotate:45deg}
+.knobs-hy-ev[data-type="channel"]{--hy-s:8px}
+.knobs-hy-ev[data-type="channel"]::before{border-radius:2px}
+.knobs-hy-ev[data-type="audit"]{--hy-s:10px}
+.knobs-hy-ev[data-type="audit"]::before{border-radius:0;clip-path:polygon(50% 4%,100% 92%,0 92%)}
+.knobs-hy-ev[data-type="deletion"]::before{border-radius:0;rotate:45deg;
+  background:linear-gradient(var(--hy-c),var(--hy-c)) center/100% 1.75px no-repeat,linear-gradient(var(--hy-c),var(--hy-c)) center/1.75px 100% no-repeat}
+.knobs-hy-ev[data-inferred]:not([data-type="audit"],[data-type="deletion"])::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-inferred]:is([data-type="audit"],[data-type="deletion"])::before{opacity:.5}
+/* Held-back marks (commits, by default) come up while the pointer is on their lane, and stay with
+   "Show commits" or while selected. */
+.knobs-hy-ev[data-quiet]{opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-track:hover .knobs-hy-ev[data-quiet]{opacity:.6;transition-duration:calc(var(--_k-motion-snappy-ms) * 1ms)}
+:is(.knobs-history[data-all] .knobs-hy-ev[data-quiet],.knobs-hy-ev[data-quiet]:is([data-selected],[data-hover])){opacity:1}
+.knobs-hy-ev[data-hover]::before{scale:1.25}
+.knobs-hy-ev[data-selected]::before{scale:1.3}
+.knobs-hy-ev[data-selected]::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hy-s) + 9px);height:calc(var(--hy-s) + 9px);
+  margin:calc((var(--hy-s) + 9px) / -2) 0 0 calc((var(--hy-s) + 9px) / -2);border-radius:50%;box-shadow:0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-range][data-selected]::after{left:3px;right:3px;width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-history:focus-visible .knobs-hy-ev[data-selected]::after{box-shadow:0 0 0 2px var(--_k-focus)}
+.knobs-history:focus-visible .knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 2px var(--_k-focus)}
+
+/* ——— under the chart: "Show commits", and a legend only when inferred and verified both appear ——— */
+.knobs-hy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_k-space-inside) var(--_k-space-title);margin-top:var(--_k-space-sibling);padding-left:var(--hy-gutter);
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-legend{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title)}
+.knobs-ui .knobs-hy-more{height:20px;margin-left:-6px;padding:0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-3);cursor:pointer;
+  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-more:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
+.knobs-hy-swatch{flex:none;width:14px;height:8px;border-radius:2px;background:color-mix(in oklch,var(--hy-c) 34%,transparent)}
+.knobs-hy-swatch[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 60%,transparent) 0 1.5px,transparent 1.5px 4px)}
+
+/* ——— the detail: one area under the chart, its height on a spring ——— */
+.knobs-hy-detail{position:relative;overflow:hidden;user-select:text;-webkit-user-select:text}
+.knobs-hy-detail[data-moving]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
+.knobs-hy-dc{padding:var(--_k-space-title) 0 0 var(--hy-gutter);transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-dc:is([data-enter],[data-leave]){opacity:0}
+.knobs-hy-dc[data-leave]{position:absolute;left:0;right:0;top:0;transition-duration:calc(var(--_k-motion-snappy-ms) * .8ms)}
+.knobs-hy-dmeta{display:flex;flex-wrap:wrap;gap:0 var(--_k-space-sibling);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-dmeta>[data-tone]{color:var(--hy-c)}
+.knobs-hy-dtitle{margin-top:var(--_k-space-inside);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight-title);color:var(--_k-fg);text-wrap:balance}
+.knobs-hy-dtext{margin:var(--_k-space-inside) 0 0;max-width:68ch;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-dtext code{font:calc(1em - 1px) var(--_k-mono);padding:1px 4px;border-radius:var(--_k-radius-sm);background:var(--_k-fill)}
+.knobs-hy-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--_k-space-sibling)}
+.knobs-hy-dfoot:empty{display:none}
+.knobs-hy-evidence{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--_k-radius-sm);background:var(--_k-fill);color:var(--_k-fg-2);
+  font:var(--_k-type-small)/1 var(--_k-mono);text-decoration:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+a.knobs-hy-evidence:hover{background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-hy-jump{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 8px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:pointer;
+  font-size:var(--_k-type-small);transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-jump:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-jump svg{width:12px;height:12px}
+
+/* ——— the pointer's tooltip: title, date, one line ——— */
+.knobs-hy-tip{position:absolute;left:0;top:0;max-width:280px;padding:6px 8px;border-radius:var(--_k-radius-md);background:var(--_k-bg-overlay);
+  box-shadow:var(--_k-shadow-overlay),0 0 0 1px var(--_k-border);pointer-events:none;opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-tip[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-tt{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight-label);color:var(--_k-fg);text-wrap:balance}
+:is(.knobs-hy-td,.knobs-hy-tl){font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tl{margin-top:2px;color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-tl:empty{display:none}
+
+@media(prefers-reduced-motion:reduce){
+  .knobs-history :where(*,::before,::after){transition-property:opacity,background,color,box-shadow!important}
+  .knobs-hy-dc{transition-duration:calc(var(--_k-hover-out) * 1ms)!important}
+}
+`;
+
+// src/ui/history-model.ts
+var MS_DAY = 86400000;
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var dayOf = (y, m, d) => Math.floor(Date.UTC(y, m, d) / MS_DAY);
+var parts = (day) => {
+  const t = new Date(day * MS_DAY);
+  return { y: t.getUTCFullYear(), m: t.getUTCMonth(), d: t.getUTCDate() };
+};
+var todayDay = (now = Date.now()) => {
+  const t = new Date(now);
+  return dayOf(t.getFullYear(), t.getMonth(), t.getDate());
+};
+var monthIndex = (name) => MONTHS.findIndex((m) => m.toLowerCase() === name.slice(0, 3).toLowerCase());
+function parseDay(text, year) {
+  const s = text.trim();
+  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  if (iso) {
+    const y = Number(iso[1]);
+    const day = dayOf(y, Number(iso[2]) - 1, Number(iso[3]));
+    return { from: day, to: day, year: y };
   }
-  return out;
-}
-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 ? { ...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)
-    return [...sections];
-  const noun = typeof kickers === "object" ? kickers.noun.trim() : "PR";
-  const counted = typeof kickers === "object" ? sections : sections.filter((s) => s.link && isPullRequest(s.link.href));
-  return sections.map((s, i) => {
-    const own = source[i]?.kicker;
-    if (own !== undefined || s.kicker)
-      return s;
-    const at = counted.indexOf(s);
-    return at < 0 ? s : { ...s, kicker: `${noun} ${at + 1} of ${counted.length}`.trim() };
-  });
-}
-function tableStacks(stack, room, natural) {
-  if (stack !== "auto")
-    return stack === "always";
-  return room > 0 && natural > room + 1;
-}
-function noteBarReserve(bar, inset, gap) {
-  return Math.max(0, Math.ceil(bar)) + inset + gap;
-}
-function parseAt(at) {
-  if (!at)
+  const m = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:\s*[–—-]\s*(?:([A-Za-z]{3,9})\.?\s+)?(\d{1,2}))?(?:,?\s+(\d{4}))?$/.exec(s);
+  if (!m)
     return null;
-  const t = Date.parse(at);
-  return Number.isFinite(t) ? t : null;
-}
-function sortFeed(items) {
-  return items.map((item, i) => ({ item, i })).sort((a, b) => {
-    const x = a.item.at ?? -Infinity;
-    const y = b.item.at ?? -Infinity;
-    return x !== y ? y - x : b.i - a.i;
-  }).map((e) => e.item);
-}
-function ago(at, now) {
-  const s = Math.max(0, (now - at) / 1000);
-  if (s < 45)
-    return "just now";
-  if (s < 3600)
-    return `${Math.round(s / 60)}m ago`;
-  if (s < 86400)
-    return `${Math.round(s / 3600)}h ago`;
-  if (s < 7 * 86400)
-    return `${Math.round(s / 86400)}d ago`;
-  return new Date(at).toISOString().slice(0, 10);
-}
-function statusLook(status) {
-  const id = slug(status);
-  const tone = id === "ready" || id === "merged" || id === "shipped" ? "good" : id === "needs-taste" || id === "needs-review" || id === "review" ? "warn" : id === "blocked" || id === "broken" || id === "failing" ? "bad" : id === "draft" || id === "wip" ? "dim" : "info";
-  return { label: label(status), tone };
-}
-function verdictTone(id, index) {
-  if (/^(ship|yes|good|approve|keep|lgtm)/.test(id))
-    return "good";
-  if (/^(change|fix|revise|tweak|redo)/.test(id))
-    return "warn";
-  if (/^(no|reject|drop|revert|bad)/.test(id))
-    return "bad";
-  if (/^(unsure|maybe|skip|later)/.test(id))
-    return "dim";
-  return index === 0 ? "good" : "dim";
-}
-var EMPTY_STATE = { steps: {} };
-function setFeedback(state, key, patch) {
-  const next = { ...state.steps[key] };
-  for (const [k, v] of Object.entries(patch)) {
-    if (v === undefined)
-      continue;
-    if (v === null || v.trim() === "")
-      delete next[k];
-    else
-      next[k] = v;
-  }
-  const steps = { ...state.steps };
-  if (Object.keys(next).length)
-    steps[key] = next;
-  else
-    delete steps[key];
-  return { ...state, steps };
-}
-var hasContent = (n) => Boolean(n.text?.trim() || n.voice || n.ink?.paths.length);
-function addNote(state, note) {
-  if (!hasContent(note))
-    return state;
-  return { ...state, notes: [...state.notes ?? [], note] };
-}
-function removeNote(state, id) {
-  return { ...state, notes: (state.notes ?? []).filter((n) => n.id !== id) };
-}
-var notesOn = (state, key) => (state.notes ?? []).filter((n) => n.step === key);
-function isAnswered(step, state) {
-  if (step.ask === "none")
-    return false;
-  const fb = state.steps[step.key];
-  if (step.ask === "pick")
-    return fb?.pick !== undefined;
-  return Boolean(fb?.verdict || fb?.note || notesOn(state, step.key).length);
-}
-function digitChoice(step, fb, key) {
-  if (step.ask !== "pick" || !/^[1-9]$/.test(key))
-    return;
-  const id = step.options[Number(key) - 1]?.id;
-  if (id === undefined)
-    return;
-  return fb?.pick === id ? null : id;
-}
-function walkthroughProgress(w, state) {
-  const asked = w.steps.filter((s) => s.ask !== "none");
-  const done = asked.filter((s) => isAnswered(s, state));
-  const next = asked.find((s) => !isAnswered(s, state));
-  return { done: done.length, total: asked.length, next: next?.key ?? null };
-}
-function adjacentStep(keys, current, dir) {
-  if (!keys.length)
-    return;
-  const i = current === null ? -1 : keys.indexOf(current);
-  if (i < 0)
-    return dir > 0 ? keys[0] : keys[keys.length - 1];
-  return keys[Math.max(0, Math.min(keys.length - 1, i + dir))];
+  const m1 = monthIndex(m[1]);
+  const m2 = m[3] ? monthIndex(m[3]) : m1;
+  if (m1 < 0 || m2 < 0)
+    return null;
+  const written = m[5] ? Number(m[5]) : undefined;
+  const y = written ?? year;
+  if (y === undefined)
+    return null;
+  const from = dayOf(y, m1, Number(m[2]));
+  let to = m[4] ? dayOf(y, m2, Number(m[4])) : from;
+  if (to < from)
+    to = dayOf(y + 1, m2, Number(m[4]));
+  return { from, to, ...written !== undefined ? { year: written } : {} };
 }
-var LOG_MAX = 40;
-function pushContext(log, event, max = LOG_MAX) {
-  const last = log[log.length - 1];
-  const merge = last && last.what === event.what && last.step === event.step && (event.what === "seek" || event.what === "step") && event.at - last.at < 1500;
-  const next = merge ? [...log.slice(0, -1), event] : [...log, event];
-  return next.slice(-max);
+function formatDay(day) {
+  const { y, m, d } = parts(day);
+  return `${MONTHS[m]} ${d}, ${y}`;
 }
-function recentContext(log, now, windowMs = 90000, min = 4) {
-  const inWindow = log.filter((e) => now - e.at <= windowMs);
-  return inWindow.length >= min ? inWindow : log.slice(-min);
+function formatRange(from, to, open = false) {
+  if (open)
+    return `${formatDay(from)} – today`;
+  if (to <= from)
+    return formatDay(from);
+  const a = parts(from);
+  const b = parts(to);
+  if (a.y === b.y && a.m === b.m)
+    return `${MONTHS[a.m]} ${a.d}–${b.d}, ${a.y}`;
+  if (a.y === b.y)
+    return `${MONTHS[a.m]} ${a.d} – ${MONTHS[b.m]} ${b.d}, ${a.y}`;
+  return `${formatDay(from)} – ${formatDay(to)}`;
 }
-function formatTime(seconds) {
-  const t = Math.max(0, Math.round(seconds * 10) / 10);
-  const m = Math.floor(t / 60);
-  const s = (t - m * 60).toFixed(1).padStart(4, "0");
-  return `${m}:${s}`;
+var formatDays = (n) => `${n} ${n === 1 ? "day" : "days"}`;
+function guessTone(state) {
+  const s = state.toLowerCase();
+  if (/broken|bad|fail|missing|deleted|down/.test(s))
+    return "bad";
+  if (/warn|redirect|partial|beta|next|pre/.test(s))
+    return "warn";
+  if (/work|ok|good|fixed|live|green/.test(s))
+    return "good";
+  return "dim";
 }
-function inkPath(points, w, h) {
-  if (!points.length || w <= 0 || h <= 0)
-    return "";
-  const n = (v) => String(Math.round(Math.max(0, Math.min(1, v)) * 1000) / 1000);
-  const kept = [points[0]];
-  for (const p of points.slice(1)) {
-    const l = kept[kept.length - 1];
-    if (Math.hypot(p.x - l.x, p.y - l.y) >= 1)
-      kept.push(p);
+var bandLabel = (heading) => heading.replace(/^\s*\d+\s*[·.:)\-–]\s*/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
+function fromGroups(groups, today) {
+  const events = [];
+  const bands = [];
+  const all = groups.flatMap((g) => g.events ?? g.rows ?? []);
+  let year = all.map((e) => parseDay(e.date, 0)?.year).find((y) => y !== undefined) ?? parts(today).y;
+  for (const g of groups) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const e of g.events ?? g.rows ?? []) {
+      const d = parseDay(e.date, year);
+      if (!d)
+        continue;
+      if (d.year !== undefined)
+        year = d.year;
+      lo = Math.min(lo, d.from);
+      hi = Math.max(hi, d.to);
+      events.push({
+        ...e,
+        date: iso(d.from),
+        ...d.to > d.from ? { to: iso(d.to) } : {},
+        lane: e.lane ?? "code"
+      });
+    }
+    const label = g.heading ? bandLabel(g.heading) : "";
+    if (label && lo <= hi)
+      bands.push({ from: iso(lo), to: iso(hi), label });
   }
-  return kept.map((p, i) => `${i ? "L" : "M"}${n(p.x / w)} ${n(p.y / h)}`).join("");
-}
-function zoomWords(z) {
-  const times = Math.round(1 / Math.max(0.001, Math.max(z.w, z.h)) * 10) / 10;
-  return `${times}× at ${Math.round(z.u * 100)}%, ${Math.round(z.v * 100)}%`;
+  return { events, bands };
 }
-function describeMedia(m) {
-  if (!m)
-    return "";
-  const parts = [];
-  if (m.file)
-    parts.push(`${m.kind} ${m.file}`);
-  else if (m.time !== undefined)
-    parts.push(`${m.kind} at ${formatTime(m.time)}`);
-  else
-    parts.push(m.kind);
-  if (m.chapter)
-    parts[0] += ` in “${m.chapter}”`;
-  if (m.loop)
-    parts.push(`loop ${formatTime(m.loop.start)}–${formatTime(m.loop.end)}`);
-  if (m.zoom)
-    parts.push(`zoomed ${zoomWords(m.zoom)}`);
-  if (m.mode)
-    parts.push(m.mode);
-  if (m.full)
-    parts.push("full window");
-  return parts.join(", ");
+function iso(day) {
+  const { y, m, d } = parts(day);
+  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
 }
-function readState(raw) {
-  if (!raw)
-    return EMPTY_STATE;
-  try {
-    const v = JSON.parse(raw);
-    if (!v || typeof v !== "object")
-      return EMPTY_STATE;
-    const o = v;
-    const steps = {};
-    if (o.steps && typeof o.steps === "object")
-      for (const [key, fb] of Object.entries(o.steps)) {
-        if (!fb || typeof fb !== "object")
-          continue;
-        const f = fb;
-        const clean = {};
-        for (const k of ["verdict", "pick", "note"])
-          if (typeof f[k] === "string" && f[k].trim())
-            clean[k] = f[k];
-        if (Object.keys(clean).length)
-          steps[key] = clean;
-      }
-    const notes = Array.isArray(o.notes) ? o.notes.filter(isNote) : [];
-    return {
-      steps,
-      ...notes.length ? { notes } : {},
-      ...typeof o.note === "string" && o.note.trim() ? { note: o.note } : {}
+var startOfMonth = (day) => {
+  const { y, m } = parts(day);
+  return dayOf(y, m, 1);
+};
+var TYPE_TONE = { deletion: "bad" };
+function normalizeHistory(data, now = todayDay()) {
+  const today = data.axis?.today && parseDay(data.axis.today, parts(now).y)?.from || now;
+  const converted = data.groups?.length ? fromGroups(data.groups, today) : { events: [], bands: [] };
+  const rawEvents = [...data.events ?? [], ...converted.events];
+  const rawBands = [...data.bands ?? [], ...converted.bands];
+  const year = parts(today).y;
+  const day = (s) => s ? parseDay(s, year) ?? null : null;
+  const states = new Map;
+  const stateOf = (key) => {
+    const known = states.get(key);
+    if (known)
+      return known;
+    const def = data.states?.[key];
+    const s = { key, label: def?.label ?? key, tone: def?.tone ?? guessTone(key) };
+    states.set(key, s);
+    return s;
+  };
+  const items = new Map;
+  const laneOrder = [];
+  const lanes = new Map;
+  const lane = (id, label = id === "code" ? "Code" : id) => {
+    let l = lanes.get(id);
+    if (!l) {
+      l = { id, label, spans: [], events: [] };
+      lanes.set(id, l);
+      laneOrder.push(id);
+    }
+    return l;
+  };
+  if (rawEvents.some((e) => !e.lane || e.lane === "code") && !data.lanes?.some((l) => l.id === "code"))
+    lane("code");
+  let inferred = false;
+  for (const l of data.lanes ?? []) {
+    const into = lane(l.id, l.label);
+    (l.spans ?? []).forEach((s, i) => {
+      const a = day(s.from);
+      if (!a)
+        return;
+      const open = !s.to;
+      const b = open ? null : day(s.to);
+      const to = open ? today : b?.to ?? a.to;
+      const st = stateOf(s.state);
+      const days = Math.max(0, to - a.from);
+      const own = s.label ?? data.states?.[s.state]?.tag ?? "{d}d";
+      const tags = own === "" ? [] : [...new Set([own, "{d}d"])].map((t) => t.replace(/\{d\}/g, String(days)));
+      const id = s.id ?? `${l.id}/${i}`;
+      const item = {
+        id,
+        kind: "span",
+        lane: l.id,
+        from: a.from,
+        to,
+        open,
+        title: s.title ?? `${l.label} · ${st.label}`,
+        ...s.detail ? { detail: s.detail } : {},
+        tone: st.tone,
+        inferred: s.provenance === "inferred",
+        ...s.provenance ? { provenance: s.provenance } : {},
+        ...s.source ? { source: s.source } : {},
+        evidence: s.evidence ?? [],
+        ...s.step ? { step: s.step } : {},
+        state: s.state,
+        tags
+      };
+      if (item.inferred)
+        inferred = true;
+      into.spans.push(item);
+      items.set(id, item);
+    });
+  }
+  const types = [];
+  const events = [];
+  rawEvents.forEach((e, index) => {
+    const a = day(e.date);
+    if (!a)
+      return;
+    const to = Math.max(a.to, day(e.to)?.to ?? a.to);
+    const into = lane(e.lane ?? "code");
+    const id = e.id ?? `e${index}`;
+    const item = {
+      id,
+      kind: "event",
+      lane: into.id,
+      from: a.from,
+      to,
+      open: false,
+      title: e.title,
+      ...e.detail ? { detail: e.detail } : {},
+      tone: e.tone ?? TYPE_TONE[e.type ?? ""] ?? "dim",
+      ...e.type ? { type: e.type } : {},
+      inferred: e.provenance === "inferred",
+      ...e.provenance ? { provenance: e.provenance } : {},
+      ...e.source ? { source: e.source } : {},
+      evidence: e.evidence ?? [],
+      ...e.step ? { step: e.step } : {},
+      tags: []
     };
-  } catch {
-    return EMPTY_STATE;
+    if (item.inferred)
+      inferred = true;
+    if (e.type && !types.includes(e.type))
+      types.push(e.type);
+    into.events.push(item);
+    items.set(id, item);
+    events.push({ item, index });
+  });
+  const bands = [];
+  for (const b of rawBands) {
+    const a = day(b.from);
+    if (!a)
+      continue;
+    const z = b.to ? day(b.to) : null;
+    bands.push({ from: a.from, to: z ? z.to : today, label: b.label });
   }
+  bands.sort((x, y) => x.from - y.from);
+  const all = [...items.values()].flatMap((i) => [i.from, i.to]);
+  for (const b of bands)
+    all.push(b.from, b.to);
+  const hasOpen = [...items.values()].some((i) => i.open);
+  const lo = all.length ? Math.min(...all) : today - 90;
+  let hi = all.length ? Math.max(...all) : today;
+  if (hasOpen || data.axis?.today)
+    hi = Math.max(hi, today);
+  const from = day(data.axis?.from)?.from ?? startOfMonth(lo);
+  const to = day(data.axis?.to)?.to ?? hi + Math.max(6, Math.round((hi - from) * 0.05));
+  const laneIndex = (id) => laneOrder.indexOf(id);
+  const order = eventOrder(events.map((e) => ({ ...e, laneIndex: laneIndex(e.item.lane) })));
+  for (const l of lanes.values())
+    l.events.sort((a, b) => a.from - b.from);
+  return {
+    from,
+    to: Math.max(to, from + 1),
+    today,
+    lanes: laneOrder.map((id) => lanes.get(id)),
+    events: order,
+    bands,
+    states: [...states.values()],
+    types,
+    inferred,
+    verified: [...items.values()].some((i) => i.provenance === "verified"),
+    items
+  };
 }
-function isNote(v) {
-  if (!v || typeof v !== "object")
-    return false;
-  const n = v;
-  const ctx = n.context;
-  return typeof n.id === "string" && typeof n.at === "number" && (n.step === null || typeof n.step === "string") && (n.text === undefined || typeof n.text === "string") && !!ctx && Array.isArray(ctx.log) && hasContent(n);
+var DEFAULT_MARKS = ["release", "deletion"];
+function quietEvents(events, marks) {
+  if (marks === "all")
+    return new Set;
+  const quiet = events.filter((e) => e.type && !marks.includes(e.type));
+  return quiet.length === events.length ? new Set : new Set(quiet.map((e) => e.id));
 }
-var noteOut = (n) => ({
-  at: new Date(n.at).toISOString(),
-  ...n.text?.trim() ? { text: n.text.trim() } : {},
-  ...n.voice ? { voice: n.voice } : {},
-  ...n.ink?.paths.length ? { ink: n.ink } : {},
-  ...n.context.media ? { media: n.context.media } : {},
-  log: n.context.log.map(({ at, ...e }) => ({ ...e, ago: Math.round((n.at - at) / 100) / 10 }))
-});
-function collectFeedback(w, state) {
-  const progress = walkthroughProgress(w, state);
-  const sectionTitle = new Map(w.sections.map((s) => [s.id, s.link ? `${s.link.label} ${s.title}` : s.title]));
-  const keys = new Set(w.steps.map((s) => s.key));
-  const steps = [];
-  for (const s of w.steps) {
-    const fb = state.steps[s.key];
-    const notes = notesOn(state, s.key).map(noteOut);
-    if (s.ask === "none" && !notes.length)
-      continue;
-    const option = s.ask === "pick" ? s.options.find((o) => o.id === fb?.pick) : undefined;
-    const suggested = s.options.find((o) => o.suggested);
-    steps.push({
-      key: s.key,
-      number: s.number,
-      section: sectionTitle.get(s.section) ?? s.section,
-      title: s.title,
-      ask: s.ask,
-      ...option ? { pick: option.id, pickLabel: `${option.letter}: ${option.label}` } : {},
-      ...option && suggested && suggested.id !== option.id ? { suggested: `${suggested.letter}: ${suggested.label}` } : {},
-      notes,
-      ...fb?.verdict ? { verdict: fb.verdict } : {},
-      ...fb?.note ? { note: fb.note } : {}
-    });
+var PLURALS = {
+  commit: "commits",
+  release: "releases",
+  deletion: "deletions",
+  channel: "channel switches",
+  audit: "findings"
+};
+function quietLabel(events, quiet) {
+  const types = [];
+  for (const e of events)
+    if (quiet.has(e.id) && e.type && !types.includes(e.type))
+      types.push(e.type);
+  const names = types.map((t) => PLURALS[t] ?? `${t}s`);
+  return names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names[0] ?? "";
+}
+function eventOrder(events) {
+  return [...events].sort((a, b) => a.item.from - b.item.from || a.laneIndex - b.laneIndex || a.index - b.index).map((e) => e.item);
+}
+function stepEvent(order, current, dir, at) {
+  if (!order.length)
+    return null;
+  const i = current === null ? -1 : order.findIndex((e) => e.id === current);
+  if (i < 0 && at !== undefined) {
+    const next = dir > 0 ? order.find((e) => e.from >= at) : [...order].reverse().find((e) => e.from <= at);
+    return next ?? (dir > 0 ? order[order.length - 1] : order[0]);
   }
+  if (i < 0)
+    return dir > 0 ? order[0] : order[order.length - 1];
+  return order[Math.max(0, Math.min(order.length - 1, i + dir))];
+}
+function dayScale(from, to, width) {
+  const span = Math.max(1, to - from);
   return {
-    id: w.id,
-    title: w.title,
-    reviewed: progress.done,
-    total: progress.total,
-    ...state.note ? { note: state.note } : {},
-    steps,
-    general: (state.notes ?? []).filter((n) => !n.step || !keys.has(n.step)).map(noteOut)
+    x: (day) => (day - from) / span * width,
+    day: (x) => from + x / Math.max(1, width) * span,
+    f: (day) => (day - from) / span
   };
 }
-var quote = (text) => text.trim().replace(/\s*\n\s*/g, " ");
-function noteLine(n) {
-  const bits = [];
-  if (n.text)
-    bits.push(`“${quote(n.text)}”`);
-  if (n.voice)
-    bits.push(`voice note ${formatTime(n.voice.duration)} (${n.voice.url})`);
-  if (n.ink)
-    bits.push(`ink, ${n.ink.paths.length} stroke${n.ink.paths.length === 1 ? "" : "s"}`);
-  const seen = describeMedia(n.media);
-  return `${bits.join(" + ")}${seen ? ` · ${seen}` : ""}`;
-}
-function feedbackMarkdown(fb, verdicts) {
-  const name = (id) => verdicts?.find((v) => v.id === id)?.label ?? label(id);
-  const lines = [
-    `## Feedback: ${fb.title}`,
-    "",
-    `${fb.reviewed} of ${fb.total} reviewed · \`${fb.id}\``
-  ];
-  if (fb.note)
-    lines.push("", quote(fb.note));
-  if (fb.general.length) {
-    lines.push("", "### General");
-    for (const n of fb.general)
-      lines.push(`- ${noteLine(n)}`);
+var STEPS = [1, 2, 3, 6, 12];
+function monthTicks(from, to, width, minGap = 44) {
+  const perMonth = width / Math.max(1, to - from) * 30.44;
+  const step = STEPS.find((s) => s * perMonth >= minGap) ?? 12;
+  const ticks = [];
+  const { y } = parts(from);
+  let { m } = parts(from);
+  let d = dayOf(y, m, 1);
+  if (d < from) {
+    m++;
+    d = dayOf(y, m, 1);
   }
-  let section = "";
-  for (const s of fb.steps) {
-    if (s.section !== section) {
-      section = s.section;
-      lines.push("", `### ${section}`);
-    }
-    const head = [];
-    if (s.pickLabel)
-      head.push(`**Picked ${s.pickLabel}**${s.suggested ? ` (suggested ${s.suggested})` : ""}`);
-    if (s.verdict)
-      head.push(`**${name(s.verdict)}**`);
-    if (s.note)
-      head.push(`“${quote(s.note)}”`);
-    const open = !head.length && !s.notes.length;
-    lines.push(`- ${s.number} ${s.title}: ${open ? "_open_" : head.join(" · ") || `${s.notes.length} note${s.notes.length === 1 ? "" : "s"}`}`);
-    for (const n of s.notes)
-      lines.push(`  - ${noteLine(n)}`);
+  while (d <= to) {
+    const p = parts(d);
+    if (p.m % step === 0)
+      ticks.push({ day: d, label: p.m === 0 ? String(p.y) : MONTHS[p.m] });
+    m++;
+    d = dayOf(y, m, 1);
   }
-  return lines.join(`
-`) + `
-`;
-}
-var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-function plainMarkdown(text) {
-  return text.replace(/\[([^\]\n]+)\]\([^)\s]+\)/g, "$1").replace(/`([^`\n]+)`/g, "$1").replace(/\*\*([^*\n]+)\*\*/g, "$1").replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1$2").replace(/\s+/g, " ").trim();
+  return ticks;
 }
-function inlineMarkdown(text) {
-  const codes = [];
-  let s = text.replace(/`([^`\n]+)`/g, (_, c) => {
-    codes.push(c);
-    return `\x00${codes.length - 1}\x00`;
+function fitLabels(labels, width, reserved = [], gap = 8) {
+  let end = -Infinity;
+  return labels.map(({ x, w }) => {
+    const x1 = x + w;
+    if (x < end + gap || x1 > width)
+      return false;
+    if (reserved.some((r) => x < r.x1 + gap && x1 > r.x0 - gap))
+      return false;
+    end = x1;
+    return true;
   });
-  s = escapeHtml(s);
-  s = s.replace(/\[([^\]\n]+)\]\(([^)\s]+)\)/g, (m, t, href) => {
-    const raw = href.replace(/&amp;/g, "&");
-    if (!/^(https?:\/\/|\/|\.{0,2}\/|#)/i.test(raw) && /^[a-z][a-z0-9+.-]*:/i.test(raw))
-      return m;
-    return `<a href="${href}" target="_blank" rel="noreferrer">${t}</a>`;
+}
+function clipSpan(from, to, axisFrom, axisTo) {
+  if (to < axisFrom || from > axisTo)
+    return null;
+  return {
+    from: Math.max(from, axisFrom),
+    to: Math.min(to, axisTo),
+    clipStart: from < axisFrom,
+    clipEnd: to > axisTo
+  };
+}
+function fitTag(widths, spanWidth, roomAfter, pad = 6) {
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad * 2 <= spanWidth)
+      return { index: i, place: "inside" };
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad <= roomAfter)
+      return { index: i, place: "after" };
+  return null;
+}
+function bandRoom(bands, x) {
+  return bands.map((b, i) => {
+    const next = bands.slice(i + 1).find((n) => n.from > b.from);
+    const end = Math.min(b.to, next ? next.from : Infinity);
+    return Math.max(0, x(end) - x(b.from));
   });
-  s = s.replace(/\*\*([^*\n]+)\*\*/g, "<b>$1</b>");
-  s = s.replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1<i>$2</i>");
-  s = s.replace(/\n{2,}/g, "<br><br>").replace(/\n/g, " ");
-  return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
+}
+function nearestEvent(events, day, tolerance) {
+  let best = null;
+  let gap = tolerance;
+  for (const e of events) {
+    const d = day < e.from ? e.from - day : day > e.to ? day - e.to : 0;
+    if (d <= gap) {
+      best = e;
+      gap = d;
+    }
+  }
+  return best;
+}
+function firstSentence(text) {
+  if (!text)
+    return "";
+  const plain = text.replace(/`([^`]*)`/g, "$1").replace(/\*\*?([^*]+)\*\*?/g, "$1").trim();
+  const m = /^.*?[.!?](?=\s|$)/.exec(plain);
+  return (m ? m[0] : plain).trim();
 }
 
 // src/ui/history.ts
+init_look();
 var HEIGHT2 = springMotion(SPRINGS.default);
 var GO = svg('<path d="M5 5h6v6M11 5l-6 6"/>');
 var TYPE_NAMES = {
@@ -18765,14 +19052,14 @@ var TYPE_NAMES = {
 };
 var typeName = (t) => TYPE_NAMES[t] ?? t.charAt(0).toUpperCase() + t.slice(1);
 var REACH = 8;
-var el = (doc, tag, cls) => {
+var el2 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
 var text = (doc, tag, cls, value) => {
-  const n = el(doc, tag, cls);
+  const n = el2(doc, tag, cls);
   n.textContent = value;
   return n;
 };
@@ -18788,22 +19075,22 @@ var when = (it) => it.kind === "span" ? `${formatRange(it.from, it.to, it.open)}
 function history(container, options) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
-  const root = el(doc, "div", "knobs-history");
+  const root = el2(doc, "div", "knobs-history");
   applyLook2(root, options);
   injectHistoryStyles(doc);
   root.tabIndex = 0;
   root.setAttribute("role", "group");
   root.setAttribute("aria-label", options.label ?? "History");
   root.setAttribute("aria-roledescription", "timeline");
-  const chart = el(doc, "div", "knobs-hy-chart");
-  const foot = el(doc, "div", "knobs-hy-foot");
-  const detail = el(doc, "div", "knobs-hy-detail");
+  const chart = el2(doc, "div", "knobs-hy-chart");
+  const foot = el2(doc, "div", "knobs-hy-foot");
+  const detail = el2(doc, "div", "knobs-hy-detail");
   detail.setAttribute("aria-live", "polite");
-  const tip = el(doc, "div", "knobs-hy-tip");
+  const tip = el2(doc, "div", "knobs-hy-tip");
   tip.setAttribute("aria-hidden", "true");
-  const tipTitle = el(doc, "div", "knobs-hy-tt");
-  const tipDate = el(doc, "div", "knobs-hy-td");
-  const tipLine = el(doc, "div", "knobs-hy-tl");
+  const tipTitle = el2(doc, "div", "knobs-hy-tt");
+  const tipDate = el2(doc, "div", "knobs-hy-td");
+  const tipLine = el2(doc, "div", "knobs-hy-tl");
   tip.append(tipTitle, tipDate, tipLine);
   root.append(chart, foot, detail, tip);
   container.append(root);
@@ -18839,7 +19126,7 @@ function history(container, options) {
     foot.textContent = "";
     root.toggleAttribute("data-all", showAll);
     if (quiet.size) {
-      const t = el(doc, "button", "knobs-hy-more");
+      const t = el2(doc, "button", "knobs-hy-more");
       t.type = "button";
       t.setAttribute("aria-pressed", String(showAll));
       t.textContent = `${showAll ? "Hide" : "Show"} ${quietLabel(model.events, quiet)}`;
@@ -18852,13 +19139,13 @@ function history(container, options) {
       foot.append(t);
     }
     if (model.inferred && model.verified) {
-      const legend = el(doc, "span", "knobs-hy-legend");
+      const legend = el2(doc, "span", "knobs-hy-legend");
       for (const [label, inferred] of [
         ["Verified", false],
         ["Inferred", true]
       ]) {
-        const k = el(doc, "span", "knobs-hy-key");
-        const sw = el(doc, "span", "knobs-hy-swatch");
+        const k = el2(doc, "span", "knobs-hy-key");
+        const sw = el2(doc, "span", "knobs-hy-swatch");
         sw.dataset.tone = "dim";
         if (inferred)
           sw.dataset.inferred = "";
@@ -18881,7 +19168,7 @@ function history(container, options) {
     tracks = new Map;
     let gutter = 0;
     if (!narrow) {
-      const probe = el(doc, "div", "knobs-hy-label");
+      const probe = el2(doc, "div", "knobs-hy-label");
       chart.append(probe);
       const font = fontOf(probe);
       const gap = parseFloat(win.getComputedStyle(probe).marginRight) || 0;
@@ -18897,25 +19184,25 @@ function history(container, options) {
     for (let i = 0;i < model.lanes.length; i++)
       rows.push(...narrow ? ["auto", "var(--hy-lane)"] : ["var(--hy-lane)"]);
     chart.style.gridTemplateRows = rows.join(" ");
-    const behind = el(doc, "div", "knobs-hy-layer");
+    const behind = el2(doc, "div", "knobs-hy-layer");
     behind.setAttribute("aria-hidden", "true");
     for (const b of model.bands) {
       const c = clipSpan(b.from, b.to, model.from, model.to);
       if (!c)
         continue;
-      const band = el(doc, "div", "knobs-hy-band");
+      const band = el2(doc, "div", "knobs-hy-band");
       band.style.left = pct(c.from);
       band.style.width = pct(model.from + (c.to - c.from));
       behind.append(band);
     }
     const ticks = monthTicks(model.from, model.to, plotW);
     for (const t of ticks) {
-      const line = el(doc, "div", "knobs-hy-grid");
+      const line = el2(doc, "div", "knobs-hy-grid");
       line.style.left = pct(t.day);
       behind.append(line);
     }
     chart.append(behind);
-    const axis = el(doc, "div", "knobs-hy-axis");
+    const axis = el2(doc, "div", "knobs-hy-axis");
     axis.setAttribute("aria-hidden", "true");
     const tickEls = ticks.map((t) => {
       const n = text(doc, "span", "knobs-hy-tick", t.label);
@@ -18941,7 +19228,7 @@ function history(container, options) {
       const label = text(doc, "div", "knobs-hy-label", lane.label);
       label.style.gridRow = String(row);
       label.title = lane.label;
-      const track = el(doc, "div", "knobs-hy-track");
+      const track = el2(doc, "div", "knobs-hy-track");
       track.style.gridRow = String(narrow ? row + 1 : row);
       track.dataset.lane = lane.id;
       tracks.set(lane.id, track);
@@ -18949,7 +19236,7 @@ function history(container, options) {
         const c = clipSpan(s.from, s.to, model.from, model.to);
         if (!c)
           continue;
-        const b = el(doc, "button", "knobs-hy-span");
+        const b = el2(doc, "button", "knobs-hy-span");
         b.type = "button";
         b.tabIndex = -1;
         b.dataset.id = s.id;
@@ -18971,7 +19258,7 @@ function history(container, options) {
       for (const e of lane.events) {
         if (e.to < model.from || e.from > model.to)
           continue;
-        const b = el(doc, "button", "knobs-hy-ev");
+        const b = el2(doc, "button", "knobs-hy-ev");
         b.type = "button";
         b.tabIndex = -1;
         b.dataset.id = e.id;
@@ -18993,15 +19280,15 @@ function history(container, options) {
       }
       chart.append(label, track);
     });
-    over = el(doc, "div", "knobs-hy-layer");
+    over = el2(doc, "div", "knobs-hy-layer");
     over.setAttribute("aria-hidden", "true");
     if (showToday) {
-      const today = el(doc, "div", "knobs-hy-today");
+      const today = el2(doc, "div", "knobs-hy-today");
       today.style.left = pct(model.today);
       over.append(today);
     }
-    selLine = el(doc, "div", "knobs-hy-sel");
-    hoverLine = el(doc, "div", "knobs-hy-hover");
+    selLine = el2(doc, "div", "knobs-hy-sel");
+    hoverLine = el2(doc, "div", "knobs-hy-hover");
     over.append(selLine, hoverLine);
     chart.append(over);
     const reserved = [];
@@ -19047,8 +19334,8 @@ function history(container, options) {
     return moving;
   });
   function buildDetail(it) {
-    const c = el(doc, "div", "knobs-hy-dc");
-    const meta = el(doc, "div", "knobs-hy-dmeta");
+    const c = el2(doc, "div", "knobs-hy-dc");
+    const meta = el2(doc, "div", "knobs-hy-dmeta");
     meta.append(text(doc, "time", "", when(it)));
     const lane = model.lanes.find((l) => l.id === it.lane);
     if (lane && (model.lanes.length > 1 || lane.id !== "code"))
@@ -19065,11 +19352,11 @@ function history(container, options) {
     }
     c.append(meta, text(doc, "div", "knobs-hy-dtitle", it.title));
     if (it.detail) {
-      const p = el(doc, "p", "knobs-hy-dtext");
+      const p = el2(doc, "p", "knobs-hy-dtext");
       p.innerHTML = inlineMarkdown(it.detail);
       c.append(p);
     }
-    const foot = el(doc, "div", "knobs-hy-dfoot");
+    const foot = el2(doc, "div", "knobs-hy-dfoot");
     for (const e of it.evidence) {
       const tag = text(doc, e.href ? "a" : "span", "knobs-hy-evidence", e.label);
       if (tag instanceof HTMLAnchorElement && e.href) {
@@ -19080,7 +19367,7 @@ function history(container, options) {
       foot.append(tag);
     }
     if (it.step && options.onJump) {
-      const go = el(doc, "button", "knobs-hy-jump");
+      const go = el2(doc, "button", "knobs-hy-jump");
       go.type = "button";
       go.append(text(doc, "span", "", "Go to step"));
       go.insertAdjacentHTML("beforeend", GO);
@@ -19323,19 +19610,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;
 };
@@ -19391,10 +19678,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;
   };
@@ -19405,9 +19692,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));
@@ -19415,9 +19702,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"));
@@ -19426,8 +19713,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;
@@ -19458,7 +19745,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));
@@ -19483,7 +19770,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;
@@ -19523,13 +19810,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";
@@ -19537,11 +19824,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) {
@@ -19556,24 +19843,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)
@@ -19582,14 +19869,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);
@@ -19655,12 +19942,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));
@@ -19676,7 +19963,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)
@@ -19702,13 +19990,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);
@@ -19787,12 +20075,12 @@ var prGlyph = (state) => state === "merged" ? svg12(PR_PATHS.merge) : state ===
 var PR_STATE = { merged: "Merged", open: "Open", draft: "Draft", closed: "Closed" };
 var ISSUE = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-88a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z";
 function prStateLabel(doc, state, checks, title) {
-  const s = el2(doc, "span", "knobs-wt-prstate");
+  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");
@@ -19803,7 +20091,7 @@ 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");
@@ -19817,7 +20105,7 @@ function prChip(doc, n, pr) {
   chip.innerHTML = issue ? svg12(ISSUE) : prGlyph(pr.state);
   chip.append(text2(doc, "span", "", `#${n}`));
   if (pr.checks) {
-    const c = el2(doc, "span", "knobs-wt-prchecks");
+    const c = el3(doc, "span", "knobs-wt-prchecks");
     c.innerHTML = svg12(CHECK3);
     chip.append(c);
   }
@@ -19900,21 +20188,25 @@ 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% - 16px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent)";
-var walkthroughCss = `
+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}
+: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
@@ -20072,7 +20364,7 @@ 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)}
@@ -20124,27 +20416,53 @@ var walkthroughCss = `
 .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:default;color:var(--_k-fg-2);text-align:left;
-  transition:background calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_k-fill);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-wt-letter{flex:none;font-weight:var(--kw-strong);color:var(--_k-fg)}
-.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)}
@@ -20198,11 +20516,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. */
@@ -20221,14 +20539,15 @@ var walkthroughCss = `
 .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-pad-card);border-radius:var(--_k-radius-panel);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle)}
+/* 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);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
+.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}
@@ -20237,17 +20556,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)}
@@ -20313,7 +20632,7 @@ var walkthroughCss = `
 .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: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)}
@@ -20529,7 +20848,7 @@ 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 } : {},
@@ -20653,7 +20972,13 @@ async function mountVideo(host, m, look, alive, onEvent) {
     ...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 } : {} })) } : {},
+    ...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) });
@@ -20886,12 +21211,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 labelOf2 = (m) => ("label" in m) && m.kind !== "metric" ? m.label : undefined;
-function mediaSlot(container, options) {
+var labelOf2 = (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 } : {}
@@ -20901,7 +21253,7 @@ function mediaSlot(container, options) {
   root.dataset.kind = m.kind;
   applyLook2(root, options);
   const label = labelOf2(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;
@@ -20981,6 +21333,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 = "" });
@@ -21035,14 +21397,14 @@ function mediaSlot(container, options) {
 var CHECK4 = icon("check", { small: true });
 
 // 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;
 };
@@ -21067,9 +21429,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),
@@ -21077,66 +21440,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 };
   });
@@ -21150,6 +21502,7 @@ function tasteTest(container, options) {
   };
   sync();
   container.append(root);
+  const unlayout = layoutOptions(root, tiles.map((t) => t.tile));
   const api = {
     element: root,
     get picked() {
@@ -21162,6 +21515,7 @@ function tasteTest(container, options) {
     },
     pause: () => slots.forEach((s) => s.pause()),
     dispose() {
+      unlayout();
       slots.forEach((s) => s.dispose());
       root.remove();
     }
@@ -21178,13 +21532,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);
@@ -21397,7 +21752,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,
@@ -21447,7 +21802,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 = "";
@@ -21597,7 +21952,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;
@@ -21617,7 +21972,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 = "";
@@ -21625,16 +21980,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);
@@ -21645,17 +22000,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)");
@@ -21707,9 +22062,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}`);
@@ -21858,9 +22213,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) {
@@ -21876,11 +22231,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;
@@ -21900,7 +22255,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");
@@ -21940,9 +22295,9 @@ 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;
@@ -21956,7 +22311,7 @@ function walkthrough(container, options) {
       line.append(chip);
       return chip;
     }
-    const a = el3(doc, "a");
+    const a = el4(doc, "a");
     a.href = href;
     a.target = "_blank";
     a.rel = "noreferrer";
@@ -21966,9 +22321,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));
@@ -21977,7 +22332,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)}”`;
@@ -21999,19 +22354,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);
           }
@@ -22045,11 +22400,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)
@@ -22057,13 +22412,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";
@@ -22079,14 +22434,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));
@@ -22096,21 +22451,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);
@@ -22119,15 +22474,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");
@@ -22141,10 +22496,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));
@@ -22153,7 +22508,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);
@@ -22181,7 +22536,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;
@@ -22195,8 +22551,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()));
@@ -22204,25 +22560,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)
@@ -22260,13 +22616,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)
@@ -22278,7 +22634,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 }));
@@ -22298,7 +22654,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", () => {
@@ -22312,7 +22668,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);