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

package/dist/ui-solid.js

@@ -577,11 +577,11 @@ var compareCss = `
 .knobs-cmp-modes[hidden]{display:none}
 .knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
   transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* Toggles: icon buttons, the accent's wash when on. */
 .knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-3);cursor:pointer;
   transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
 .knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
@@ -647,7 +647,7 @@ var compareCss = `
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
   display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
-:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent)}
+:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
@@ -678,6 +678,10 @@ var playerCss = `
 .knobs-player-glyph svg{width:16px;height:16px}
 .knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}
 .knobs-player-line{flex:none;min-height:0}
+/* Hover in is immediate (0 ms), out eases. The timeline's own stylesheet is look.ts's; its hover
+   states are set here, after it, so the player's line and every timeline share them. */
+.knobs-ui .knobs-tl-play:hover,.knobs-tl-edge:hover::after,.knobs-tl-rlabel:hover,.knobs-tl-track:hover .knobs-tl-hover,
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs{transition-duration:calc(var(--_k-hover-in) * 1ms)}
 `;
 
 // src/ui/overlay-css.ts
@@ -3231,14 +3235,14 @@ var init_diff_css = __esm(() => {
   margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
 .knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background .15s,color .15s,opacity .15s}
-.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
 .knobs-diff-btn svg{width:16px;height:16px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
 .knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
   font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
@@ -3258,7 +3262,7 @@ var init_diff_css = __esm(() => {
 .knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-fill)}
 .knobs-ui .knobs-diff-choice{padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
   font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
 .knobs-diff-body{position:relative;flex:1;min-height:0}
 .knobs-diff-probe{position:absolute;left:0;top:0;width:0;height:var(--kd-line);visibility:hidden;pointer-events:none}
@@ -3279,8 +3283,8 @@ var init_diff_css = __esm(() => {
 .knobs-diff-hbar{position:absolute;height:5px;pointer-events:none}
 .knobs-diff-hbar>i{position:absolute;left:0;top:0;height:5px;border-radius:3px;background:color-mix(in srgb,var(--_k-fg) 30%,transparent);opacity:0;pointer-events:none;
   transition:opacity .3s,background .15s}
-.knobs-diff-body:hover .knobs-diff-hbar>i,.knobs-diff-hbar:is([data-active],[data-dragging])>i{opacity:1;pointer-events:auto;transition-duration:.12s,.15s}
-.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--_k-fg) 48%,transparent)}
+.knobs-diff-body:hover .knobs-diff-hbar>i,.knobs-diff-hbar:is([data-active],[data-dragging])>i{opacity:1;pointer-events:auto;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--_k-fg) 48%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* stack: every file down one scroller, each header sticking until the next pushes it off. It's
    flush (square, no card around its file), opaque in the code's own colour, with a hairline
    under it only while it's stuck; a gap, not a line, parts one file from the next. */
@@ -3355,7 +3359,7 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--_k-weight) var(--_k-font-size)/1 var(--_k-font);color:var(--_k-fg);caret-color:var(--_k-accent);background:transparent}
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
 .knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
-.knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-diff-filter>button svg{width:12px;height:12px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
 .knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
@@ -9769,7 +9773,8 @@ function fuseFrame(L, before, after, k, wipe) {
   const feather = Math.min(contact, 1 + FUSE.feather * Math.sin(Math.PI * t));
   const overlap = before.x + before.w - after.x;
   const seam = t > 0.001 && overlap >= 0 ? Math.min(1, Math.max(0, overlap / FUSE.seamFade)) * Math.min(1, t * 4) : 0;
-  return { cut, feather, seam, blur: t < 0.995 ? FUSE.blur * (1 - t) : 0 };
+  const blur = t > 0.005 && t < 0.995 ? FUSE.blur * Math.sin(Math.PI * t) : 0;
+  return { cut, feather, seam, blur };
 }
 function clampZoom(r) {
   const w = Math.min(1, Math.max(1 / ZOOM_MAX, r.w));
@@ -9856,7 +9861,10 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, FUSE, labelFold = (fold, mark, blur = 3) => {
+var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, FUSE, fuseCorners = (r, k) => {
+  const inner = r * Math.min(1, Math.max(0, k));
+  return { before: { left: r, right: inner }, after: { left: inner, right: r } };
+}, labelFold = (fold, mark, blur = 3) => {
   const f = Math.min(1, Math.max(0, fold));
   const open = 1 - f;
   return {
@@ -9887,7 +9895,7 @@ var init_compare_model = __esm(() => {
   MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
-  FUSE = { feather: 24, blur: 4, seamFade: 48 };
+  FUSE = { feather: 32, blur: 8, seamFade: 48 };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
 });
 
@@ -10620,8 +10628,8 @@ async function createCompareGpu(canvas, onLost) {
       onLost();
   };
   lostListeners.add(lost);
-  const uniforms = device.createBuffer({ size: 176, usage: 64 | 8 });
-  const data = new Float32Array(44);
+  const uniforms = device.createBuffer({ size: 192, usage: 64 | 8 });
+  const data = new Float32Array(48);
   const make = (w, h) => device.createTexture({
     size: [Math.max(1, w), Math.max(1, h)],
     format: "rgba8unorm",
@@ -10694,6 +10702,7 @@ async function createCompareGpu(canvas, onLost) {
       data.set([f.preview[0] ? 1 : 0, f.preview[1] ? 1 : 0, 0, 0], 32);
       r(36, f.beforeClip);
       r(40, f.afterClip);
+      data.set(f.radii, 44);
       device.queue.writeBuffer(uniforms, 0, data);
       const encoder = device.createCommandEncoder();
       const pass = encoder.beginRenderPass({
@@ -10735,6 +10744,7 @@ struct U {
   loupe: vec4f,  // x, y, r, zoom (0: none)
   src: vec4f,    // Before, After from their previews
   ca: vec4f, cb: vec4f, // where each side may draw
+  radii: vec4f,  // the clips' corners: Before left, right; After left, right
 }
 @group(0) @binding(0) var<uniform> u: U;
 @group(0) @binding(1) var A: texture_2d<f32>;
@@ -10756,8 +10766,18 @@ fn cover(p: vec2f, r: vec4f) -> f32 {
   return clamp(d + 0.5, 0.0, 1.0);
 }
 
-// A side's colour where rect r maps it to p, and its coverage inside clip c there.
-fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, near: bool, ready: f32) -> vec4f {
+// Coverage of rect r at p with its left corners rounded rl and its right ones rr.
+fn coverRound(p: vec2f, r: vec4f, rl: f32, rr: f32) -> f32 {
+  let h = r.zw * 0.5;
+  let q0 = p - (r.xy + h);
+  let rad = min(select(rl, rr, q0.x > 0.0), min(h.x, h.y));
+  let q = abs(q0) - h + vec2f(rad);
+  let d = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - rad;
+  return clamp(0.5 - d, 0.0, 1.0);
+}
+
+// A side's colour where rect r maps it to p, and its coverage inside clip c (corners rc) there.
+fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, rc: vec2f, near: bool, ready: f32) -> vec4f {
   let uv = clamp((p - r.xy) / max(r.zw, vec2f(1e-3)), vec2f(0.0), vec2f(1.0));
   var c: vec3f;
   if (near) {
@@ -10766,16 +10786,16 @@ fn take(t: texture_2d<f32>, p: vec2f, r: vec4f, c0: vec4f, near: bool, ready: f3
   } else {
     c = textureSampleLevel(t, smp, uv, 0.0).rgb;
   }
-  return vec4f(c, min(cover(p, r), cover(p, c0)) * ready);
+  return vec4f(c, min(cover(p, r), coverRound(p, c0, rc.x, rc.y)) * ready);
 }
 
 fn takeA(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
-  if (u.src.x > 0.5) { return take(PA, p, r, c0, near, 1.0); }
-  return take(A, p, r, c0, near, u.diff.z);
+  if (u.src.x > 0.5) { return take(PA, p, r, c0, u.radii.xy, near, 1.0); }
+  return take(A, p, r, c0, u.radii.xy, near, u.diff.z);
 }
 fn takeB(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
-  if (u.src.y > 0.5) { return take(PB, p, r, c0, near, 1.0); }
-  return take(B, p, r, c0, near, u.diff.w);
+  if (u.src.y > 0.5) { return take(PB, p, r, c0, u.radii.zw, near, 1.0); }
+  return take(B, p, r, c0, u.radii.zw, near, u.diff.w);
 }
 
 fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
@@ -11391,6 +11411,7 @@ function compare(container, options) {
   let stageRect = null;
   let accent = [0.49, 0.81, 0.61];
   let labelW = [0, 0];
+  let frameRadius = 0;
   let dirty = true;
   let disposed = false;
   let near = options.lazy === false;
@@ -11911,6 +11932,7 @@ function compare(container, options) {
     const wr = wipeRect(r.L.overlay);
     const k = Math.min(1, Math.max(0, lay.x));
     const fu = fuseFrame(r.L, r.before, r.after, k, wipeLine.x);
+    const corners = fuseCorners(frameRadius, k);
     const dw = differenceWeight();
     const fusing = 1 - dw;
     folded = k * fusing;
@@ -11967,6 +11989,7 @@ function compare(container, options) {
     if (renderer === "dom") {
       const cut = mode === "difference" ? null : fu;
       const place = (n, rect, clip, before) => {
+        const round = before ? corners.before : corners.after;
         const st = n.style;
         st.transform = `translate(${rect.x.toFixed(2)}px,${rect.y.toFixed(2)}px)`;
         st.width = `${rect.w.toFixed(2)}px`;
@@ -11976,7 +11999,9 @@ function compare(container, options) {
         const l = Math.max(0, clip.x - rect.x);
         const b = Math.max(0, rect.y + rect.h - (clip.y + clip.h));
         const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, edge));
-        st.clipPath = t + l + b + right > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px)` : "";
+        const rr = edge < clip.x + clip.w - 0.5 ? 0 : round.right;
+        const rl = round.left;
+        st.clipPath = t + l + b + right + rl + rr > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px round ${rl.toFixed(2)}px ${rr.toFixed(2)}px ${rr.toFixed(2)}px ${rl.toFixed(2)}px)` : "";
         const mask = before && cut && cut.feather > 0.5 ? `linear-gradient(to right,#000 ${(cut.cut - cut.feather - rect.x).toFixed(2)}px,transparent ${(edge - rect.x).toFixed(2)}px)` : "";
         st.maskImage = mask;
         st.setProperty("-webkit-mask-image", mask);
@@ -12014,7 +12039,13 @@ function compare(container, options) {
       gain: 1,
       accent,
       loupe: loupeShown() && pointer ? { x: pointer.x * dpr, y: pointer.y * dpr, r: LOUPE.r * dpr, zoom: LOUPE.zoom } : null,
-      preview: [Boolean(sides[0].shown?.cached), Boolean(sides[1].shown?.cached)]
+      preview: [Boolean(sides[0].shown?.cached), Boolean(sides[1].shown?.cached)],
+      radii: [
+        corners.before.left * dpr,
+        corners.before.right * dpr,
+        corners.after.left * dpr,
+        corners.after.right * dpr
+      ]
     });
   };
   const drawNow = () => {
@@ -12106,6 +12137,7 @@ function compare(container, options) {
     accent = [c[0], c[1], c[2]];
     const unfold = MARK.w - labelFold(folded, MARK.w).width + MARK.gap * folded;
     labelW = [labels[0].offsetWidth + unfold, labels[1].offsetWidth + unfold];
+    frameRadius = Number.parseFloat(win.getComputedStyle(stage).borderTopLeftRadius) || 0;
     requestDraw();
   };
   const measure = () => {
@@ -17198,11 +17230,629 @@ function toast(message, options = {}) {
   };
 }
 
+// src/ui/walkthrough-annotations.ts
+var EYE = "M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z";
+var EYE_OFF = "M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z";
+var glyph = (d) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="${d}"/></svg>`;
+var ARROW = '<svg class="knobs-wt-anno-arrow" viewBox="0 0 28 28" width="28" height="28" aria-hidden="true"><path d="M3 3 L24 24 M24 24 L24 13 M24 24 L13 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+var shapeOf = (a) => a.shape ?? (a.w !== undefined && a.h !== undefined ? "box" : "dot");
+var showsAt = (a, time) => !a.at || time === undefined || time >= a.at[0] && time <= a.at[1];
+function placeMark(a, rect, view = ALL) {
+  const w = a.w ?? 0;
+  const h = a.h ?? 0;
+  const x = (a.x - view.u) / view.w;
+  const y = (a.y - view.v) / view.h;
+  const ww = w / view.w;
+  const hh = h / view.h;
+  if (x + ww < 0 || y + hh < 0 || x > 1 || y > 1)
+    return null;
+  return { x: rect.x + x * rect.w, y: rect.y + y * rect.h, w: ww * rect.w, h: hh * rect.h };
+}
+var ALL = { u: 0, v: 0, w: 1, h: 1 };
+var scopeOf = (el) => el.closest(".knobs-walkthrough") ?? el.closest(".knobs-wt-slot") ?? el;
+var annotationsOn = (scope) => scope.dataset.annotations !== "off";
+function setAnnotations(scope, on) {
+  if (on)
+    delete scope.dataset.annotations;
+  else
+    scope.dataset.annotations = "off";
+  for (const b of Array.from(scope.querySelectorAll(".knobs-wt-anno-toggle")))
+    syncToggle(b, on);
+}
+function syncToggle(b, on) {
+  b.setAttribute("aria-pressed", String(on));
+  b.title = on ? "Hide annotations (a)" : "Show annotations (a)";
+  b.innerHTML = glyph(on ? EYE : EYE_OFF);
+}
+function annotationLayer(host, list, place, corner = host) {
+  const doc = host.ownerDocument;
+  const layer = doc.createElement("div");
+  layer.className = "knobs-wt-anno";
+  layer.setAttribute("aria-hidden", "true");
+  host.append(layer);
+  const toggle = doc.createElement("button");
+  toggle.type = "button";
+  toggle.className = "knobs-wt-anno-toggle";
+  toggle.setAttribute("aria-label", "Annotations");
+  syncToggle(toggle, annotationsOn(scopeOf(host)));
+  toggle.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const scope = scopeOf(host);
+    setAnnotations(scope, !annotationsOn(scope));
+  });
+  corner.append(toggle);
+  let marks = [];
+  const make = (a) => {
+    const m = doc.createElement("div");
+    const shape = shapeOf(a);
+    m.className = "knobs-wt-mark";
+    m.dataset.shape = shape;
+    m.dataset.hidden = "";
+    if (shape === "arrow")
+      m.innerHTML = ARROW;
+    if (a.label) {
+      const l = doc.createElement("span");
+      l.className = "knobs-wt-mark-label";
+      l.textContent = a.label;
+      m.append(l);
+    }
+    layer.append(m);
+    return m;
+  };
+  let settled = false;
+  const update = () => {
+    const p = place();
+    if (marks.length !== p.rects.length) {
+      for (const row of marks)
+        for (const m of row)
+          m.remove();
+      marks = p.rects.map(() => list.map(make));
+    }
+    p.rects.forEach((rect, i) => {
+      list.forEach((a, j) => {
+        const m = marks[i][j];
+        const box = placeMark(a, rect, p.view);
+        const show = box !== null && showsAt(a, p.time);
+        if (box) {
+          m.style.transform = `translate(${box.x.toFixed(2)}px,${box.y.toFixed(2)}px)`;
+          m.style.width = `${box.w.toFixed(2)}px`;
+          m.style.height = `${box.h.toFixed(2)}px`;
+        }
+        m.toggleAttribute("data-hidden", !show);
+      });
+    });
+    if (!settled) {
+      settled = true;
+      requestAnimationFrame(() => requestAnimationFrame(() => layer.dataset.settled = ""));
+    }
+  };
+  const ro = new ResizeObserver(() => update());
+  ro.observe(host);
+  update();
+  return {
+    element: layer,
+    update,
+    dispose() {
+      ro.disconnect();
+      layer.remove();
+      toggle.remove();
+    }
+  };
+}
+
 // src/ui/walkthrough-blocks.ts
 init_motion();
-init_icons();
+
+// src/ui/history.ts
+init_motion();
+init_glide();
+
+// src/ui/history-css.ts
+var historyCss = `
+:where(.knobs-history,.knobs-history *){box-sizing:border-box}
+.knobs-ui.knobs-history{--hy-gutter:128px;--hy-lane:24px;--hy-bar:16px;--hy-axis:20px;--hy-bandrow:0px;--hy-c:var(--_k-fg-3);
+  --hy-fade:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);
+  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;outline:none;color:var(--_k-fg);
+  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
+  text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
+.knobs-history[data-bands]{--hy-bandrow:var(--_k-leading-small)}
+.knobs-history[data-narrow]{--hy-gutter:0px}
+.knobs-history [hidden]{display:none!important}
+:where(.knobs-ui) :is(.knobs-hy-ev,.knobs-hy-span,.knobs-hy-jump,.knobs-hy-more){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
+  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
+.knobs-history [data-tone="good"]{--hy-c:var(--_k-ok)}
+.knobs-history [data-tone="warn"]{--hy-c:var(--_k-warn)}
+.knobs-history [data-tone="bad"]{--hy-c:var(--_k-danger)}
+.knobs-history [data-tone="info"]{--hy-c:var(--_k-info)}
+.knobs-history [data-tone="dim"]{--hy-c:var(--_k-fg-3)}
+
+/* ——— the chart: lane labels beside the plot (above each lane where it's narrow) ——— */
+.knobs-hy-chart{position:relative;display:grid;grid-template-columns:var(--hy-gutter) minmax(0,1fr)}
+.knobs-hy-axis{position:relative;grid-column:2;grid-row:1;height:calc(var(--hy-bandrow) + var(--hy-axis))}
+:is(.knobs-hy-tick,.knobs-hy-now,.knobs-hy-blabel){position:absolute;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tick{bottom:2px;padding-left:4px}
+.knobs-hy-now{bottom:2px;color:var(--_k-accent-fg);font-weight:var(--_k-weight-label)}
+.knobs-hy-blabel{top:0;padding-left:4px;overflow:hidden;color:var(--_k-fg-2)}
+.knobs-hy-label{grid-column:1;align-self:center;min-width:0;margin-right:var(--_k-space-title);overflow:hidden;white-space:nowrap;
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-history[data-narrow] .knobs-hy-label{grid-column:2;align-self:end;margin:0}
+:is(.knobs-hy-label,.knobs-hy-blabel)[data-overflow]{-webkit-mask-image:var(--hy-fade);mask-image:var(--hy-fade)}
+.knobs-hy-track{position:relative;grid-column:2;height:var(--hy-lane)}
+.knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}
+
+/* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */
+.knobs-hy-band{position:absolute;top:0;bottom:0;background:color-mix(in oklch,var(--_k-fg) 3.5%,transparent);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}
+:is(.knobs-hy-grid,.knobs-hy-today,.knobs-hy-hover,.knobs-hy-sel){position:absolute;left:0;top:calc(var(--hy-bandrow) + var(--hy-axis));bottom:0;width:1px;margin-left:-.5px}
+.knobs-hy-grid{background:var(--_k-border-subtle)}
+.knobs-hy-today{top:calc(var(--hy-bandrow) + var(--hy-axis) - 4px);background:var(--_k-accent)}
+.knobs-hy-hover{background:color-mix(in oklch,var(--_k-fg) 32%,transparent);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-hover[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-sel{background:var(--_k-fg-2);opacity:0}
+.knobs-hy-sel[data-on]{opacity:.6}
+
+/* Spans: a soft bar in their state's tone, inferred ones hatched; the tag at the end. */
+.knobs-hy-span{position:absolute;top:calc((var(--hy-lane) - var(--hy-bar)) / 2);height:var(--hy-bar);border-radius:var(--_k-radius-sm);cursor:pointer;
+  background:color-mix(in oklch,var(--hy-c) 24%,transparent);transition:background calc(var(--_k-hover-out) * 1ms),box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-span[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 34%,transparent) 0 2px,color-mix(in oklch,var(--hy-c) 9%,transparent) 2px 6px)}
+.knobs-hy-span[data-hover]{background-color:color-mix(in oklch,var(--hy-c) 34%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 1px var(--hy-c)}
+.knobs-hy-span[data-clip-start]{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px);mask-image:linear-gradient(to right,transparent,#000 16px)}
+.knobs-hy-span[data-clip-end]{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(to left,transparent,#000 16px);mask-image:linear-gradient(to left,transparent,#000 16px)}
+.knobs-hy-tag{position:absolute;top:0;right:6px;font-size:var(--_k-type-small);line-height:var(--hy-bar);white-space:nowrap;pointer-events:none;
+  color:color-mix(in oklch,var(--hy-c) 55%,var(--_k-fg))}
+.knobs-hy-tag[data-place="after"]{right:auto;left:calc(100% + 6px)}
+.knobs-hy-tag[data-place="none"]{visibility:hidden}
+
+/* Event marks (their kind named in the tooltip): a dot for a commit, a diamond for a release, a cross for a deletion, a square for a
+   channel's switch, a triangle for a finding; inferred ones hollow. */
+.knobs-hy-ev{position:absolute;top:0;width:16px;height:var(--hy-lane);margin-left:-8px;cursor:pointer;--hy-c:var(--_k-fg-2);--hy-s:9px}
+.knobs-hy-ev::before{content:"";position:absolute;left:50%;top:50%;width:var(--hy-s);height:var(--hy-s);margin:calc(var(--hy-s) / -2) 0 0 calc(var(--hy-s) / -2);
+  border-radius:50%;background:var(--hy-c);transition:scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-ev[data-range]{width:calc(var(--hy-w) + 16px)}
+.knobs-hy-ev[data-range]::before{left:calc(8px - var(--hy-s) / 2);right:calc(8px - var(--hy-s) / 2);width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-hy-ev[data-type="release"]{--hy-s:8px}
+.knobs-hy-ev[data-type="release"]::before{border-radius:1.5px;rotate:45deg}
+.knobs-hy-ev[data-type="channel"]{--hy-s:8px}
+.knobs-hy-ev[data-type="channel"]::before{border-radius:2px}
+.knobs-hy-ev[data-type="audit"]{--hy-s:10px}
+.knobs-hy-ev[data-type="audit"]::before{border-radius:0;clip-path:polygon(50% 4%,100% 92%,0 92%)}
+.knobs-hy-ev[data-type="deletion"]::before{border-radius:0;rotate:45deg;
+  background:linear-gradient(var(--hy-c),var(--hy-c)) center/100% 1.75px no-repeat,linear-gradient(var(--hy-c),var(--hy-c)) center/1.75px 100% no-repeat}
+.knobs-hy-ev[data-inferred]:not([data-type="audit"],[data-type="deletion"])::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-inferred]:is([data-type="audit"],[data-type="deletion"])::before{opacity:.5}
+/* Held-back marks (commits, by default) come up while the pointer is on their lane, and stay with
+   "Show commits" or while selected. */
+.knobs-hy-ev[data-quiet]{opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-track:hover .knobs-hy-ev[data-quiet]{opacity:.6;transition-duration:calc(var(--_k-motion-snappy-ms) * 1ms)}
+:is(.knobs-history[data-all] .knobs-hy-ev[data-quiet],.knobs-hy-ev[data-quiet]:is([data-selected],[data-hover])){opacity:1}
+.knobs-hy-ev[data-hover]::before{scale:1.25}
+.knobs-hy-ev[data-selected]::before{scale:1.3}
+.knobs-hy-ev[data-selected]::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--hy-s) + 9px);height:calc(var(--hy-s) + 9px);
+  margin:calc((var(--hy-s) + 9px) / -2) 0 0 calc((var(--hy-s) + 9px) / -2);border-radius:50%;box-shadow:0 0 0 1.5px var(--hy-c)}
+.knobs-hy-ev[data-range][data-selected]::after{left:3px;right:3px;width:auto;margin-left:0;border-radius:var(--_k-round)}
+.knobs-history:focus-visible .knobs-hy-ev[data-selected]::after{box-shadow:0 0 0 2px var(--_k-focus)}
+.knobs-history:focus-visible .knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 2px var(--_k-focus)}
+
+/* ——— under the chart: "Show commits", and a legend only when inferred and verified both appear ——— */
+.knobs-hy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_k-space-inside) var(--_k-space-title);margin-top:var(--_k-space-sibling);padding-left:var(--hy-gutter);
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-legend{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title)}
+.knobs-ui .knobs-hy-more{height:20px;margin-left:-6px;padding:0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-3);cursor:pointer;
+  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-more:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
+.knobs-hy-swatch{flex:none;width:14px;height:8px;border-radius:2px;background:color-mix(in oklch,var(--hy-c) 34%,transparent)}
+.knobs-hy-swatch[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 60%,transparent) 0 1.5px,transparent 1.5px 4px)}
+
+/* ——— the detail: one area under the chart, its height on a spring ——— */
+.knobs-hy-detail{position:relative;overflow:hidden;user-select:text;-webkit-user-select:text}
+.knobs-hy-detail[data-moving]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
+.knobs-hy-dc{padding:var(--_k-space-title) 0 0 var(--hy-gutter);transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-hy-dc:is([data-enter],[data-leave]){opacity:0}
+.knobs-hy-dc[data-leave]{position:absolute;left:0;right:0;top:0;transition-duration:calc(var(--_k-motion-snappy-ms) * .8ms)}
+.knobs-hy-dmeta{display:flex;flex-wrap:wrap;gap:0 var(--_k-space-sibling);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-dmeta>[data-tone]{color:var(--hy-c)}
+.knobs-hy-dtitle{margin-top:var(--_k-space-inside);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight-title);color:var(--_k-fg);text-wrap:balance}
+.knobs-hy-dtext{margin:var(--_k-space-inside) 0 0;max-width:68ch;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-dtext code{font:calc(1em - 1px) var(--_k-mono);padding:1px 4px;border-radius:var(--_k-radius-sm);background:var(--_k-fill)}
+.knobs-hy-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--_k-space-sibling)}
+.knobs-hy-dfoot:empty{display:none}
+.knobs-hy-evidence{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--_k-radius-sm);background:var(--_k-fill);color:var(--_k-fg-2);
+  font:var(--_k-type-small)/1 var(--_k-mono);text-decoration:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+a.knobs-hy-evidence:hover{background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-hy-jump{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 8px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:pointer;
+  font-size:var(--_k-type-small);transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-hy-jump:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-jump svg{width:12px;height:12px}
+
+/* ——— the pointer's tooltip: title, date, one line ——— */
+.knobs-hy-tip{position:absolute;left:0;top:0;max-width:280px;padding:6px 8px;border-radius:var(--_k-radius-md);background:var(--_k-bg-overlay);
+  box-shadow:var(--_k-shadow-overlay),0 0 0 1px var(--_k-border);pointer-events:none;opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}
+.knobs-hy-tip[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-hy-tt{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight-label);color:var(--_k-fg);text-wrap:balance}
+:is(.knobs-hy-td,.knobs-hy-tl){font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-hy-tl{margin-top:2px;color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-hy-tl:empty{display:none}
+
+@media(prefers-reduced-motion:reduce){
+  .knobs-history :where(*,::before,::after){transition-property:opacity,background,color,box-shadow!important}
+  .knobs-hy-dc{transition-duration:calc(var(--_k-hover-out) * 1ms)!important}
+}
+`;
+
+// src/ui/history-model.ts
+var MS_DAY = 86400000;
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var dayOf = (y, m, d) => Math.floor(Date.UTC(y, m, d) / MS_DAY);
+var parts = (day) => {
+  const t = new Date(day * MS_DAY);
+  return { y: t.getUTCFullYear(), m: t.getUTCMonth(), d: t.getUTCDate() };
+};
+var todayDay = (now = Date.now()) => {
+  const t = new Date(now);
+  return dayOf(t.getFullYear(), t.getMonth(), t.getDate());
+};
+var monthIndex = (name) => MONTHS.findIndex((m) => m.toLowerCase() === name.slice(0, 3).toLowerCase());
+function parseDay(text, year) {
+  const s = text.trim();
+  const iso = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  if (iso) {
+    const y = Number(iso[1]);
+    const day = dayOf(y, Number(iso[2]) - 1, Number(iso[3]));
+    return { from: day, to: day, year: y };
+  }
+  const m = /^([A-Za-z]{3,9})\.?\s+(\d{1,2})(?:\s*[–—-]\s*(?:([A-Za-z]{3,9})\.?\s+)?(\d{1,2}))?(?:,?\s+(\d{4}))?$/.exec(s);
+  if (!m)
+    return null;
+  const m1 = monthIndex(m[1]);
+  const m2 = m[3] ? monthIndex(m[3]) : m1;
+  if (m1 < 0 || m2 < 0)
+    return null;
+  const written = m[5] ? Number(m[5]) : undefined;
+  const y = written ?? year;
+  if (y === undefined)
+    return null;
+  const from = dayOf(y, m1, Number(m[2]));
+  let to = m[4] ? dayOf(y, m2, Number(m[4])) : from;
+  if (to < from)
+    to = dayOf(y + 1, m2, Number(m[4]));
+  return { from, to, ...written !== undefined ? { year: written } : {} };
+}
+function formatDay(day) {
+  const { y, m, d } = parts(day);
+  return `${MONTHS[m]} ${d}, ${y}`;
+}
+function formatRange(from, to, open = false) {
+  if (open)
+    return `${formatDay(from)} – today`;
+  if (to <= from)
+    return formatDay(from);
+  const a = parts(from);
+  const b = parts(to);
+  if (a.y === b.y && a.m === b.m)
+    return `${MONTHS[a.m]} ${a.d}–${b.d}, ${a.y}`;
+  if (a.y === b.y)
+    return `${MONTHS[a.m]} ${a.d} – ${MONTHS[b.m]} ${b.d}, ${a.y}`;
+  return `${formatDay(from)} – ${formatDay(to)}`;
+}
+var formatDays = (n) => `${n} ${n === 1 ? "day" : "days"}`;
+function guessTone(state) {
+  const s = state.toLowerCase();
+  if (/broken|bad|fail|missing|deleted|down/.test(s))
+    return "bad";
+  if (/warn|redirect|partial|beta|next|pre/.test(s))
+    return "warn";
+  if (/work|ok|good|fixed|live|green/.test(s))
+    return "good";
+  return "dim";
+}
+var bandLabel = (heading) => heading.replace(/^\s*\d+\s*[·.:)\-–]\s*/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
+function fromGroups(groups, today) {
+  const events = [];
+  const bands = [];
+  const all = groups.flatMap((g) => g.events ?? g.rows ?? []);
+  let year = all.map((e) => parseDay(e.date, 0)?.year).find((y) => y !== undefined) ?? parts(today).y;
+  for (const g of groups) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const e of g.events ?? g.rows ?? []) {
+      const d = parseDay(e.date, year);
+      if (!d)
+        continue;
+      if (d.year !== undefined)
+        year = d.year;
+      lo = Math.min(lo, d.from);
+      hi = Math.max(hi, d.to);
+      events.push({
+        ...e,
+        date: iso(d.from),
+        ...d.to > d.from ? { to: iso(d.to) } : {},
+        lane: e.lane ?? "code"
+      });
+    }
+    const label = g.heading ? bandLabel(g.heading) : "";
+    if (label && lo <= hi)
+      bands.push({ from: iso(lo), to: iso(hi), label });
+  }
+  return { events, bands };
+}
+function iso(day) {
+  const { y, m, d } = parts(day);
+  return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+var startOfMonth = (day) => {
+  const { y, m } = parts(day);
+  return dayOf(y, m, 1);
+};
+var TYPE_TONE = { deletion: "bad" };
+function normalizeHistory(data, now = todayDay()) {
+  const today = data.axis?.today && parseDay(data.axis.today, parts(now).y)?.from || now;
+  const converted = data.groups?.length ? fromGroups(data.groups, today) : { events: [], bands: [] };
+  const rawEvents = [...data.events ?? [], ...converted.events];
+  const rawBands = [...data.bands ?? [], ...converted.bands];
+  const year = parts(today).y;
+  const day = (s) => s ? parseDay(s, year) ?? null : null;
+  const states = new Map;
+  const stateOf = (key) => {
+    const known = states.get(key);
+    if (known)
+      return known;
+    const def = data.states?.[key];
+    const s = { key, label: def?.label ?? key, tone: def?.tone ?? guessTone(key) };
+    states.set(key, s);
+    return s;
+  };
+  const items = new Map;
+  const laneOrder = [];
+  const lanes = new Map;
+  const lane = (id, label = id === "code" ? "Code" : id) => {
+    let l = lanes.get(id);
+    if (!l) {
+      l = { id, label, spans: [], events: [] };
+      lanes.set(id, l);
+      laneOrder.push(id);
+    }
+    return l;
+  };
+  if (rawEvents.some((e) => !e.lane || e.lane === "code") && !data.lanes?.some((l) => l.id === "code"))
+    lane("code");
+  let inferred = false;
+  for (const l of data.lanes ?? []) {
+    const into = lane(l.id, l.label);
+    (l.spans ?? []).forEach((s, i) => {
+      const a = day(s.from);
+      if (!a)
+        return;
+      const open = !s.to;
+      const b = open ? null : day(s.to);
+      const to = open ? today : b?.to ?? a.to;
+      const st = stateOf(s.state);
+      const days = Math.max(0, to - a.from);
+      const own = s.label ?? data.states?.[s.state]?.tag ?? "{d}d";
+      const tags = own === "" ? [] : [...new Set([own, "{d}d"])].map((t) => t.replace(/\{d\}/g, String(days)));
+      const id = s.id ?? `${l.id}/${i}`;
+      const item = {
+        id,
+        kind: "span",
+        lane: l.id,
+        from: a.from,
+        to,
+        open,
+        title: s.title ?? `${l.label} · ${st.label}`,
+        ...s.detail ? { detail: s.detail } : {},
+        tone: st.tone,
+        inferred: s.provenance === "inferred",
+        ...s.provenance ? { provenance: s.provenance } : {},
+        ...s.source ? { source: s.source } : {},
+        evidence: s.evidence ?? [],
+        ...s.step ? { step: s.step } : {},
+        state: s.state,
+        tags
+      };
+      if (item.inferred)
+        inferred = true;
+      into.spans.push(item);
+      items.set(id, item);
+    });
+  }
+  const types = [];
+  const events = [];
+  rawEvents.forEach((e, index) => {
+    const a = day(e.date);
+    if (!a)
+      return;
+    const to = Math.max(a.to, day(e.to)?.to ?? a.to);
+    const into = lane(e.lane ?? "code");
+    const id = e.id ?? `e${index}`;
+    const item = {
+      id,
+      kind: "event",
+      lane: into.id,
+      from: a.from,
+      to,
+      open: false,
+      title: e.title,
+      ...e.detail ? { detail: e.detail } : {},
+      tone: e.tone ?? TYPE_TONE[e.type ?? ""] ?? "dim",
+      ...e.type ? { type: e.type } : {},
+      inferred: e.provenance === "inferred",
+      ...e.provenance ? { provenance: e.provenance } : {},
+      ...e.source ? { source: e.source } : {},
+      evidence: e.evidence ?? [],
+      ...e.step ? { step: e.step } : {},
+      tags: []
+    };
+    if (item.inferred)
+      inferred = true;
+    if (e.type && !types.includes(e.type))
+      types.push(e.type);
+    into.events.push(item);
+    items.set(id, item);
+    events.push({ item, index });
+  });
+  const bands = [];
+  for (const b of rawBands) {
+    const a = day(b.from);
+    if (!a)
+      continue;
+    const z = b.to ? day(b.to) : null;
+    bands.push({ from: a.from, to: z ? z.to : today, label: b.label });
+  }
+  bands.sort((x, y) => x.from - y.from);
+  const all = [...items.values()].flatMap((i) => [i.from, i.to]);
+  for (const b of bands)
+    all.push(b.from, b.to);
+  const hasOpen = [...items.values()].some((i) => i.open);
+  const lo = all.length ? Math.min(...all) : today - 90;
+  let hi = all.length ? Math.max(...all) : today;
+  if (hasOpen || data.axis?.today)
+    hi = Math.max(hi, today);
+  const from = day(data.axis?.from)?.from ?? startOfMonth(lo);
+  const to = day(data.axis?.to)?.to ?? hi + Math.max(6, Math.round((hi - from) * 0.05));
+  const laneIndex = (id) => laneOrder.indexOf(id);
+  const order = eventOrder(events.map((e) => ({ ...e, laneIndex: laneIndex(e.item.lane) })));
+  for (const l of lanes.values())
+    l.events.sort((a, b) => a.from - b.from);
+  return {
+    from,
+    to: Math.max(to, from + 1),
+    today,
+    lanes: laneOrder.map((id) => lanes.get(id)),
+    events: order,
+    bands,
+    states: [...states.values()],
+    types,
+    inferred,
+    verified: [...items.values()].some((i) => i.provenance === "verified"),
+    items
+  };
+}
+var DEFAULT_MARKS = ["release", "deletion"];
+function quietEvents(events, marks) {
+  if (marks === "all")
+    return new Set;
+  const quiet = events.filter((e) => e.type && !marks.includes(e.type));
+  return quiet.length === events.length ? new Set : new Set(quiet.map((e) => e.id));
+}
+var PLURALS = {
+  commit: "commits",
+  release: "releases",
+  deletion: "deletions",
+  channel: "channel switches",
+  audit: "findings"
+};
+function quietLabel(events, quiet) {
+  const types = [];
+  for (const e of events)
+    if (quiet.has(e.id) && e.type && !types.includes(e.type))
+      types.push(e.type);
+  const names = types.map((t) => PLURALS[t] ?? `${t}s`);
+  return names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names[0] ?? "";
+}
+function eventOrder(events) {
+  return [...events].sort((a, b) => a.item.from - b.item.from || a.laneIndex - b.laneIndex || a.index - b.index).map((e) => e.item);
+}
+function stepEvent(order, current, dir, at) {
+  if (!order.length)
+    return null;
+  const i = current === null ? -1 : order.findIndex((e) => e.id === current);
+  if (i < 0 && at !== undefined) {
+    const next = dir > 0 ? order.find((e) => e.from >= at) : [...order].reverse().find((e) => e.from <= at);
+    return next ?? (dir > 0 ? order[order.length - 1] : order[0]);
+  }
+  if (i < 0)
+    return dir > 0 ? order[0] : order[order.length - 1];
+  return order[Math.max(0, Math.min(order.length - 1, i + dir))];
+}
+function dayScale(from, to, width) {
+  const span = Math.max(1, to - from);
+  return {
+    x: (day) => (day - from) / span * width,
+    day: (x) => from + x / Math.max(1, width) * span,
+    f: (day) => (day - from) / span
+  };
+}
+var STEPS = [1, 2, 3, 6, 12];
+function monthTicks(from, to, width, minGap = 44) {
+  const perMonth = width / Math.max(1, to - from) * 30.44;
+  const step = STEPS.find((s) => s * perMonth >= minGap) ?? 12;
+  const ticks = [];
+  const { y } = parts(from);
+  let { m } = parts(from);
+  let d = dayOf(y, m, 1);
+  if (d < from) {
+    m++;
+    d = dayOf(y, m, 1);
+  }
+  while (d <= to) {
+    const p = parts(d);
+    if (p.m % step === 0)
+      ticks.push({ day: d, label: p.m === 0 ? String(p.y) : MONTHS[p.m] });
+    m++;
+    d = dayOf(y, m, 1);
+  }
+  return ticks;
+}
+function fitLabels(labels, width, reserved = [], gap = 8) {
+  let end = -Infinity;
+  return labels.map(({ x, w }) => {
+    const x1 = x + w;
+    if (x < end + gap || x1 > width)
+      return false;
+    if (reserved.some((r) => x < r.x1 + gap && x1 > r.x0 - gap))
+      return false;
+    end = x1;
+    return true;
+  });
+}
+function clipSpan(from, to, axisFrom, axisTo) {
+  if (to < axisFrom || from > axisTo)
+    return null;
+  return {
+    from: Math.max(from, axisFrom),
+    to: Math.min(to, axisTo),
+    clipStart: from < axisFrom,
+    clipEnd: to > axisTo
+  };
+}
+function fitTag(widths, spanWidth, roomAfter, pad = 6) {
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad * 2 <= spanWidth)
+      return { index: i, place: "inside" };
+  for (let i = 0;i < widths.length; i++)
+    if (widths[i] + pad <= roomAfter)
+      return { index: i, place: "after" };
+  return null;
+}
+function bandRoom(bands, x) {
+  return bands.map((b, i) => {
+    const next = bands.slice(i + 1).find((n) => n.from > b.from);
+    const end = Math.min(b.to, next ? next.from : Infinity);
+    return Math.max(0, x(end) - x(b.from));
+  });
+}
+function nearestEvent(events, day, tolerance) {
+  let best = null;
+  let gap = tolerance;
+  for (const e of events) {
+    const d = day < e.from ? e.from - day : day > e.to ? day - e.to : 0;
+    if (d <= gap) {
+      best = e;
+      gap = d;
+    }
+  }
+  return best;
+}
+function firstSentence(text) {
+  if (!text)
+    return "";
+  const plain = text.replace(/`([^`]*)`/g, "$1").replace(/\*\*?([^*]+)\*\*?/g, "$1").trim();
+  const m = /^.*?[.!?](?=\s|$)/.exec(plain);
+  return (m ? m[0] : plain).trim();
+}
+
+// src/ui/history.ts
 init_look();
-init_selection_pill();
 
 // src/ui/walkthrough-model.ts
 var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
@@ -17268,7 +17918,14 @@ function fillMedia(m, base) {
     case "image":
       return { ...m, src: resolveSrc(m.src, base) };
     case "history":
-      return { kind: "history", groups: fillHistory(m) };
+      if ("data" in m)
+        return m;
+      return {
+        kind: "history",
+        data: historyData(m),
+        ...m.label ? { label: m.label } : {},
+        ...m.marks ? { marks: m.marks } : {}
+      };
     case "stack":
       return {
         kind: "stack",
@@ -17281,17 +17938,26 @@ function fillMedia(m, base) {
       return m;
   }
 }
-function fillHistory(m) {
+function historyData(m) {
+  const events = m.events ?? [];
+  if (m.lanes || m.bands || m.states || m.axis)
+    return {
+      ...m.axis ? { axis: m.axis } : {},
+      ...m.lanes ? { lanes: m.lanes } : {},
+      ...events.length ? { events } : {},
+      ...m.bands ? { bands: m.bands } : {},
+      ...m.states ? { states: m.states } : {}
+    };
   const groups = [];
-  if (m.events?.length)
-    groups.push({ events: m.events });
+  if (events.length)
+    groups.push({ events });
   for (const g of m.groups ?? [])
     groups.push({
       ...g.heading ? { heading: g.heading } : {},
       ...g.summary ? { summary: g.summary } : {},
       events: g.events ?? g.rows ?? []
     });
-  return groups;
+  return { groups };
 }
 function parseBranch(branch) {
   if (!branch?.trim())
@@ -17910,11 +18576,18 @@ function inlineMarkdown(text) {
   return s.replace(/\u0000(\d+)\u0000/g, (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`);
 }
 
-// src/ui/walkthrough-blocks.ts
-var GLYPH = {
-  go: icon("caretRight", { small: true }),
-  caret: icon("caretRight", { small: true })
+// src/ui/history.ts
+var HEIGHT2 = springMotion(SPRINGS.default);
+var GO = svg('<path d="M5 5h6v6M11 5l-6 6"/>');
+var TYPE_NAMES = {
+  commit: "Commit",
+  release: "Release",
+  deletion: "Deletion",
+  channel: "Channel switch",
+  audit: "Finding"
 };
+var typeName = (t) => TYPE_NAMES[t] ?? t.charAt(0).toUpperCase() + t.slice(1);
+var REACH = 8;
 var el = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
@@ -17926,112 +18599,625 @@ var text = (doc, tag, cls, value) => {
   n.textContent = value;
   return n;
 };
+function injectHistoryStyles(doc) {
+  if (doc.querySelector("style[data-knobs-history]"))
+    return;
+  const style = doc.createElement("style");
+  style.dataset.knobsHistory = "";
+  style.textContent = aliased(historyCss);
+  doc.head.append(style);
+}
+var when = (it) => it.kind === "span" ? `${formatRange(it.from, it.to, it.open)} · ${formatDays(it.to - it.from)}` : formatRange(it.from, it.to);
+function history(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const root = el(doc, "div", "knobs-history");
+  applyLook2(root, options);
+  injectHistoryStyles(doc);
+  root.tabIndex = 0;
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", options.label ?? "History");
+  root.setAttribute("aria-roledescription", "timeline");
+  const chart = el(doc, "div", "knobs-hy-chart");
+  const foot = el(doc, "div", "knobs-hy-foot");
+  const detail = el(doc, "div", "knobs-hy-detail");
+  detail.setAttribute("aria-live", "polite");
+  const tip = el(doc, "div", "knobs-hy-tip");
+  tip.setAttribute("aria-hidden", "true");
+  const tipTitle = el(doc, "div", "knobs-hy-tt");
+  const tipDate = el(doc, "div", "knobs-hy-td");
+  const tipLine = el(doc, "div", "knobs-hy-tl");
+  tip.append(tipTitle, tipDate, tipLine);
+  root.append(chart, foot, detail, tip);
+  container.append(root);
+  let model = normalizeHistory(options.data);
+  let selected = options.selected && model.items.has(options.selected) ? options.selected : null;
+  let disposed = false;
+  let quiet = quietEvents(model.events, options.marks ?? DEFAULT_MARKS);
+  let showAll = false;
+  const walked = () => showAll ? model.events : model.events.filter((e) => !quiet.has(e.id));
+  let nodes = new Map;
+  let tracks = new Map;
+  let over = null;
+  let hoverLine = null;
+  let selLine = null;
+  let scale = dayScale(model.from, model.to, 1);
+  let drawnWidth = -1;
+  let hovered = null;
+  let tipKey = "";
+  const fontOf = (n) => {
+    const c = win.getComputedStyle(n);
+    return `${c.fontStyle} ${c.fontWeight} ${c.fontSize} ${c.fontFamily}`;
+  };
+  let measureCtx;
+  const measure = (s, font) => {
+    if (measureCtx === undefined)
+      measureCtx = doc.createElement("canvas").getContext("2d");
+    if (!measureCtx)
+      return s.length * 6.4;
+    measureCtx.font = font;
+    return measureCtx.measureText(s).width;
+  };
+  function drawFoot() {
+    foot.textContent = "";
+    root.toggleAttribute("data-all", showAll);
+    if (quiet.size) {
+      const t = el(doc, "button", "knobs-hy-more");
+      t.type = "button";
+      t.setAttribute("aria-pressed", String(showAll));
+      t.textContent = `${showAll ? "Hide" : "Show"} ${quietLabel(model.events, quiet)}`;
+      t.addEventListener("click", () => {
+        showAll = !showAll;
+        if (!showAll && selected && quiet.has(selected))
+          select(null, true, true);
+        drawFoot();
+      });
+      foot.append(t);
+    }
+    if (model.inferred && model.verified) {
+      const legend = el(doc, "span", "knobs-hy-legend");
+      for (const [label, inferred] of [
+        ["Verified", false],
+        ["Inferred", true]
+      ]) {
+        const k = el(doc, "span", "knobs-hy-key");
+        const sw = el(doc, "span", "knobs-hy-swatch");
+        sw.dataset.tone = "dim";
+        if (inferred)
+          sw.dataset.inferred = "";
+        k.append(sw, text(doc, "span", "", label));
+        legend.append(k);
+      }
+      foot.append(legend);
+    }
+    foot.hidden = !foot.childElementCount;
+  }
+  function draw() {
+    const width = root.clientWidth;
+    drawnWidth = width;
+    const narrow = width > 0 && width < (options.narrow ?? 560);
+    root.toggleAttribute("data-narrow", narrow);
+    root.toggleAttribute("data-bands", model.bands.length > 0);
+    hideHover();
+    chart.textContent = "";
+    nodes = new Map;
+    tracks = new Map;
+    let gutter = 0;
+    if (!narrow) {
+      const probe = el(doc, "div", "knobs-hy-label");
+      chart.append(probe);
+      const font = fontOf(probe);
+      const gap = parseFloat(win.getComputedStyle(probe).marginRight) || 0;
+      probe.remove();
+      const longest = Math.max(0, ...model.lanes.map((l) => measure(l.label, font)));
+      gutter = Math.round(Math.min(Math.max(longest + gap + 2, 64), Math.max(96, width * 0.3), 200));
+    }
+    root.style.setProperty("--hy-gutter", `${gutter}px`);
+    const plotW = Math.max(1, width - gutter);
+    scale = dayScale(model.from, model.to, plotW);
+    const pct = (d) => `${(scale.f(d) * 100).toFixed(4)}%`;
+    const rows = ["auto"];
+    for (let i = 0;i < model.lanes.length; i++)
+      rows.push(...narrow ? ["auto", "var(--hy-lane)"] : ["var(--hy-lane)"]);
+    chart.style.gridTemplateRows = rows.join(" ");
+    const behind = el(doc, "div", "knobs-hy-layer");
+    behind.setAttribute("aria-hidden", "true");
+    for (const b of model.bands) {
+      const c = clipSpan(b.from, b.to, model.from, model.to);
+      if (!c)
+        continue;
+      const band = el(doc, "div", "knobs-hy-band");
+      band.style.left = pct(c.from);
+      band.style.width = pct(model.from + (c.to - c.from));
+      behind.append(band);
+    }
+    const ticks = monthTicks(model.from, model.to, plotW);
+    for (const t of ticks) {
+      const line = el(doc, "div", "knobs-hy-grid");
+      line.style.left = pct(t.day);
+      behind.append(line);
+    }
+    chart.append(behind);
+    const axis = el(doc, "div", "knobs-hy-axis");
+    axis.setAttribute("aria-hidden", "true");
+    const tickEls = ticks.map((t) => {
+      const n = text(doc, "span", "knobs-hy-tick", t.label);
+      n.style.left = pct(t.day);
+      axis.append(n);
+      return n;
+    });
+    const showToday = model.today >= model.from && model.today <= model.to;
+    const now = showToday ? text(doc, "span", "knobs-hy-now", "Today") : null;
+    if (now)
+      axis.append(now);
+    const room = bandRoom(model.bands, scale.x);
+    const bandEls = model.bands.map((b, i) => {
+      const n = text(doc, "span", "knobs-hy-blabel", b.label);
+      n.style.left = pct(Math.max(b.from, model.from));
+      n.style.maxWidth = `${Math.max(0, room[i])}px`;
+      axis.append(n);
+      return n;
+    });
+    chart.append(axis);
+    model.lanes.forEach((lane, i) => {
+      const row = narrow ? 2 + i * 2 : 2 + i;
+      const label = text(doc, "div", "knobs-hy-label", lane.label);
+      label.style.gridRow = String(row);
+      label.title = lane.label;
+      const track = el(doc, "div", "knobs-hy-track");
+      track.style.gridRow = String(narrow ? row + 1 : row);
+      track.dataset.lane = lane.id;
+      tracks.set(lane.id, track);
+      for (const s of lane.spans) {
+        const c = clipSpan(s.from, s.to, model.from, model.to);
+        if (!c)
+          continue;
+        const b = el(doc, "button", "knobs-hy-span");
+        b.type = "button";
+        b.tabIndex = -1;
+        b.dataset.id = s.id;
+        b.dataset.tone = s.tone;
+        if (s.inferred)
+          b.dataset.inferred = "";
+        if (c.clipStart)
+          b.dataset.clipStart = "";
+        if (c.clipEnd)
+          b.dataset.clipEnd = "";
+        b.style.left = pct(c.from);
+        b.style.width = pct(model.from + (c.to - c.from));
+        b.setAttribute("aria-label", `${s.title}, ${when(s)}`);
+        if (s.tags.length)
+          b.append(text(doc, "span", "knobs-hy-tag", s.tags[0]));
+        track.append(b);
+        nodes.set(s.id, b);
+      }
+      for (const e of lane.events) {
+        if (e.to < model.from || e.from > model.to)
+          continue;
+        const b = el(doc, "button", "knobs-hy-ev");
+        b.type = "button";
+        b.tabIndex = -1;
+        b.dataset.id = e.id;
+        b.dataset.tone = e.tone;
+        if (e.type)
+          b.dataset.type = e.type;
+        if (e.inferred)
+          b.dataset.inferred = "";
+        if (quiet.has(e.id))
+          b.dataset.quiet = "";
+        b.style.left = pct(Math.max(e.from, model.from));
+        if (e.to > e.from) {
+          b.dataset.range = "";
+          b.style.setProperty("--hy-w", `${scale.x(model.from + (e.to - e.from)).toFixed(2)}px`);
+        }
+        b.setAttribute("aria-label", `${when(e)}: ${e.title}`);
+        track.append(b);
+        nodes.set(e.id, b);
+      }
+      chart.append(label, track);
+    });
+    over = el(doc, "div", "knobs-hy-layer");
+    over.setAttribute("aria-hidden", "true");
+    if (showToday) {
+      const today = el(doc, "div", "knobs-hy-today");
+      today.style.left = pct(model.today);
+      over.append(today);
+    }
+    selLine = el(doc, "div", "knobs-hy-sel");
+    hoverLine = el(doc, "div", "knobs-hy-hover");
+    over.append(selLine, hoverLine);
+    chart.append(over);
+    const reserved = [];
+    if (now) {
+      const w = now.offsetWidth;
+      const x0 = Math.max(0, Math.min(plotW - w, scale.x(model.today) - w / 2));
+      now.style.left = `${x0}px`;
+      reserved.push({ x0, x1: x0 + w });
+    }
+    const fits = fitLabels(ticks.map((t, i) => ({ x: scale.x(t.day), w: tickEls[i].offsetWidth })), plotW, reserved);
+    tickEls.forEach((n, i) => n.hidden = !fits[i]);
+    for (const n of bandEls)
+      n.toggleAttribute("data-overflow", n.scrollWidth > n.clientWidth + 1);
+    for (const n of chart.querySelectorAll(".knobs-hy-label"))
+      n.toggleAttribute("data-overflow", n.scrollWidth > n.clientWidth + 1);
+    for (const lane of model.lanes) {
+      const spans = lane.spans.map((s) => ({ s, c: clipSpan(s.from, s.to, model.from, model.to) })).filter((x) => x.c).sort((a, b) => a.c.from - b.c.from);
+      spans.forEach(({ s, c }, i) => {
+        const b = nodes.get(s.id);
+        const tag = b?.querySelector(".knobs-hy-tag");
+        if (!b || !tag)
+          return;
+        const font = fontOf(tag);
+        const widths = s.tags.map((t) => measure(t, font));
+        const next = spans[i + 1]?.c;
+        const spanW = scale.x(c.to) - scale.x(c.from);
+        const after = (next ? scale.x(next.from) : plotW) - scale.x(c.to);
+        const fit = fitTag(widths, spanW, after);
+        tag.textContent = fit ? s.tags[fit.index] : s.tags[0] ?? "";
+        tag.dataset.place = fit ? fit.place : "none";
+      });
+    }
+    paintSelection();
+  }
+  const h = new Spring(0, HEIGHT2.omega, HEIGHT2.zeta, 0.25);
+  let goal = 0;
+  let content = null;
+  const loop = frameLoop(win, (dt) => {
+    h.step(dt);
+    const moving = !h.resting;
+    detail.style.height = moving ? `${Math.max(0, h.x).toFixed(2)}px` : goal > 0 ? "" : "0px";
+    detail.toggleAttribute("data-moving", moving);
+    return moving;
+  });
+  function buildDetail(it) {
+    const c = el(doc, "div", "knobs-hy-dc");
+    const meta = el(doc, "div", "knobs-hy-dmeta");
+    meta.append(text(doc, "time", "", when(it)));
+    const lane = model.lanes.find((l) => l.id === it.lane);
+    if (lane && (model.lanes.length > 1 || lane.id !== "code"))
+      meta.append(text(doc, "span", "", lane.label));
+    if (it.type)
+      meta.append(text(doc, "span", "", typeName(it.type)));
+    if (it.provenance || it.source) {
+      const p = text(doc, "span", "", [it.provenance, it.source].filter(Boolean).join(" · "));
+      if (it.inferred) {
+        p.dataset.tone = "warn";
+        p.title = "Worked out from behaviour, not seen in the record";
+      }
+      meta.append(p);
+    }
+    c.append(meta, text(doc, "div", "knobs-hy-dtitle", it.title));
+    if (it.detail) {
+      const p = el(doc, "p", "knobs-hy-dtext");
+      p.innerHTML = inlineMarkdown(it.detail);
+      c.append(p);
+    }
+    const foot = el(doc, "div", "knobs-hy-dfoot");
+    for (const e of it.evidence) {
+      const tag = text(doc, e.href ? "a" : "span", "knobs-hy-evidence", e.label);
+      if (tag instanceof HTMLAnchorElement && e.href) {
+        tag.href = e.href;
+        tag.target = "_blank";
+        tag.rel = "noreferrer";
+      }
+      foot.append(tag);
+    }
+    if (it.step && options.onJump) {
+      const go = el(doc, "button", "knobs-hy-jump");
+      go.type = "button";
+      go.append(text(doc, "span", "", "Go to step"));
+      go.insertAdjacentHTML("beforeend", GO);
+      const step = it.step;
+      go.addEventListener("click", () => options.onJump?.(step));
+      foot.append(go);
+    }
+    c.append(foot);
+    return c;
+  }
+  function showDetail(it, animate) {
+    const from = detail.offsetHeight;
+    const old = content;
+    const next = it ? buildDetail(it) : null;
+    if (old) {
+      if (animate) {
+        old.dataset.leave = "";
+        const drop = () => old.remove();
+        old.addEventListener("transitionend", drop, { once: true });
+        win.setTimeout(drop, 400);
+      } else
+        old.remove();
+    }
+    content = next;
+    if (next) {
+      detail.append(next);
+      if (animate) {
+        next.dataset.enter = "";
+        next.offsetHeight;
+        delete next.dataset.enter;
+      }
+    }
+    goal = next ? next.offsetHeight : 0;
+    if (!animate || reducedMotion(win)) {
+      loop.stop();
+      h.snap(goal);
+      detail.style.height = goal > 0 ? "" : "0px";
+      detail.removeAttribute("data-moving");
+      return;
+    }
+    if (h.resting)
+      h.snap(from);
+    h.set(goal);
+    loop.wake();
+  }
+  function paintSelection() {
+    for (const [id, n] of nodes)
+      n.toggleAttribute("data-selected", id === selected);
+    const it = selected ? model.items.get(selected) : undefined;
+    if (selLine) {
+      const on = it?.kind === "event";
+      selLine.toggleAttribute("data-on", on);
+      if (on)
+        selLine.style.left = `${(scale.f(it.from) * 100).toFixed(4)}%`;
+    }
+  }
+  function select(id, animate, notify) {
+    const next = id && model.items.has(id) ? id : null;
+    if (next === selected)
+      return;
+    selected = next;
+    paintSelection();
+    showDetail(next ? model.items.get(next) : null, animate);
+    if (notify)
+      options.onSelect?.(next);
+  }
+  function itemAt(e) {
+    if (!over)
+      return null;
+    const r = over.getBoundingClientRect();
+    if (!r.width)
+      return null;
+    const x = Math.max(0, Math.min(r.width, e.clientX - r.left));
+    const target = e.target instanceof Element ? e.target : null;
+    const hit = target?.closest("[data-id]");
+    if (hit && chart.contains(hit))
+      return { it: model.items.get(hit.dataset.id) ?? null, x };
+    const laneId = target?.closest(".knobs-hy-track")?.dataset.lane;
+    const lane = laneId ? model.lanes.find((l) => l.id === laneId) : undefined;
+    if (lane) {
+      const reach = REACH / r.width * (model.to - model.from);
+      const near = nearestEvent(lane.events, scale.day(x), reach);
+      if (near)
+        return { it: near, x };
+    }
+    return { it: null, x };
+  }
+  function hideHover() {
+    hoverLine?.removeAttribute("data-on");
+    tip.removeAttribute("data-on");
+    hovered?.removeAttribute("data-hover");
+    hovered = null;
+    tipKey = "";
+  }
+  function hover(e) {
+    const at = itemAt(e);
+    if (!at || !over || !hoverLine)
+      return hideHover();
+    const { it, x } = at;
+    const lineX = it?.kind === "event" ? scale.x(it.from) : x;
+    hoverLine.style.left = `${lineX.toFixed(2)}px`;
+    hoverLine.setAttribute("data-on", "");
+    const node = it ? nodes.get(it.id) ?? null : null;
+    if (node !== hovered) {
+      hovered?.removeAttribute("data-hover");
+      node?.setAttribute("data-hover", "");
+      hovered = node;
+    }
+    const key = it ? it.id : `d${Math.round(scale.day(x))}`;
+    if (key !== tipKey) {
+      tipKey = key;
+      tipTitle.textContent = it ? it.title : formatDay(Math.round(scale.day(x)));
+      tipDate.textContent = it ? [when(it), it.type ? typeName(it.type) : ""].filter(Boolean).join(" · ") : "";
+      tipDate.hidden = !it;
+      tipLine.textContent = it ? firstSentence(it.detail) : "";
+    }
+    const rr = root.getBoundingClientRect();
+    const or = over.getBoundingClientRect();
+    const laneId = it?.lane ?? (e.target instanceof Element ? e.target.closest(".knobs-hy-track")?.dataset.lane : undefined);
+    const lr = laneId && tracks.get(laneId)?.getBoundingClientRect() || or;
+    const tw = tip.offsetWidth;
+    const th = tip.offsetHeight;
+    const left = Math.max(0, Math.min(rr.width - tw, or.left - rr.left + lineX - tw / 2));
+    let top = lr.top - rr.top - th - 6;
+    if (top + rr.top < 0)
+      top = lr.bottom - rr.top + 6;
+    tip.style.transform = `translate3d(${Math.round(left)}px,${Math.round(top)}px,0)`;
+    tip.setAttribute("data-on", "");
+  }
+  chart.addEventListener("pointermove", (e) => {
+    if (e.pointerType === "touch")
+      return;
+    hover(e);
+  });
+  chart.addEventListener("pointerleave", hideHover);
+  chart.addEventListener("mousedown", (e) => {
+    if (!(e.target instanceof Element) || !e.target.closest("button"))
+      return;
+    e.preventDefault();
+    root.focus({ preventScroll: true });
+  });
+  chart.addEventListener("click", (e) => {
+    const at = itemAt(e);
+    const id = at?.it?.id ?? null;
+    select(id !== null && id === selected ? null : id, true, true);
+  });
+  root.addEventListener("keydown", (e) => {
+    const onChart = e.target instanceof Node && chart.contains(e.target);
+    if (e.target !== root && !onChart || e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    let next;
+    const order = walked();
+    const at = selected ? model.items.get(selected)?.from : undefined;
+    if (e.key === "ArrowRight")
+      next = stepEvent(order, selected, 1, at);
+    else if (e.key === "ArrowLeft")
+      next = stepEvent(order, selected, -1, at);
+    else if (e.key === "Home")
+      next = order[0] ?? null;
+    else if (e.key === "End")
+      next = order[order.length - 1] ?? null;
+    else if (e.key === "Escape" && selected)
+      next = null;
+    else if (e.key === "Enter" && selected) {
+      const step = model.items.get(selected)?.step;
+      if (!step || !options.onJump)
+        return;
+      options.onJump(step);
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    } else
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    hideHover();
+    select(next?.id ?? null, true, true);
+  });
+  let raf = 0;
+  const ro = new ResizeObserver(() => {
+    if (raf || disposed)
+      return;
+    raf = win.requestAnimationFrame(() => {
+      raf = 0;
+      if (!disposed && root.clientWidth !== drawnWidth)
+        draw();
+    });
+  });
+  ro.observe(root);
+  const restyle = () => draw();
+  root.addEventListener("knobs-restyle", restyle);
+  drawFoot();
+  draw();
+  detail.style.height = "0px";
+  if (selected)
+    showDetail(model.items.get(selected), false);
+  const dispose = () => {
+    if (disposed)
+      return;
+    disposed = true;
+    ro.disconnect();
+    if (raf)
+      win.cancelAnimationFrame(raf);
+    loop.stop();
+    root.removeEventListener("knobs-restyle", restyle);
+    root.remove();
+  };
+  return {
+    element: root,
+    get model() {
+      return model;
+    },
+    get selected() {
+      return selected;
+    },
+    select(id) {
+      select(id, true, false);
+    },
+    set(data) {
+      model = normalizeHistory(data);
+      const keep = selected && model.items.has(selected) ? selected : null;
+      selected = keep;
+      quiet = quietEvents(model.events, options.marks ?? DEFAULT_MARKS);
+      drawFoot();
+      draw();
+      showDetail(keep ? model.items.get(keep) : null, false);
+    },
+    focus() {
+      root.focus();
+    },
+    dispose,
+    destroy: dispose
+  };
+}
+
+// src/ui/walkthrough-blocks.ts
+init_icons();
+init_look();
+init_selection_pill();
+var GLYPH = {
+  caret: icon("caretRight", { small: true })
+};
+var el2 = (doc, tag, cls) => {
+  const n = doc.createElement(tag);
+  if (cls)
+    n.className = cls;
+  return n;
+};
+var text2 = (doc, tag, cls, value) => {
+  const n = el2(doc, tag, cls);
+  n.textContent = value;
+  return n;
+};
 var prose = (doc, tag, cls, value) => {
-  const n = el(doc, tag, cls);
+  const n = el2(doc, tag, cls);
   n.innerHTML = inlineMarkdown(value);
   return n;
 };
 var link = (doc, cls, label, href) => {
   if (!href)
-    return text(doc, "span", cls, label);
-  const a = text(doc, "a", cls, label);
+    return text2(doc, "span", cls, label);
+  const a = text2(doc, "a", cls, label);
   a.href = href;
   a.target = "_blank";
   a.rel = "noreferrer";
   return a;
 };
-function stepButton(doc, ref, steps) {
+function rowLink(row, ref, steps) {
   const s = ref && steps?.find(ref);
   if (!s || !steps)
-    return null;
-  const b = el(doc, "button", "knobs-wt-steplink");
-  b.innerHTML = GLYPH.go;
-  b.type = "button";
-  b.title = `Go to “${s.title}”`;
-  b.setAttribute("aria-label", b.title);
-  b.addEventListener("click", (e) => {
-    e.stopPropagation();
+    return;
+  const doc = row.ownerDocument;
+  row.dataset.go = "";
+  row.tabIndex = 0;
+  row.title = `Go to “${plainMarkdown(s.title)}”`;
+  row.addEventListener("click", (e) => {
+    if (e.target?.closest("a,button"))
+      return;
+    if (doc.getSelection()?.toString())
+      return;
+    steps.go(s.key);
+  });
+  row.addEventListener("keydown", (e) => {
+    if (e.target !== row || e.key !== "Enter" && e.key !== " ")
+      return;
+    e.preventDefault();
     steps.go(s.key);
   });
-  return b;
 }
-var tags = (doc, list) => {
-  if (!list?.length)
-    return null;
-  const row = el(doc, "div", "knobs-wt-tags");
-  for (const e of list)
-    row.append(link(doc, "knobs-wt-tag", e.label, e.href));
-  return row;
-};
 function mountHistory(host, m, steps) {
-  const doc = host.ownerDocument;
-  const root = el(doc, "div", "knobs-wt-history");
-  const longest = Math.max(6, ...m.groups.flatMap((g) => g.events.flatMap((e) => [e.date.length, e.age?.length ?? 0])));
-  root.style.setProperty("--kw-hw", `${Math.min(16, longest + 1)}ch`);
-  for (const g of m.groups) {
-    const group = el(doc, "section", "knobs-wt-hgroup");
-    if (g.heading || g.summary) {
-      const head = el(doc, "header", "knobs-wt-hhead");
-      if (g.heading)
-        head.append(text(doc, "h4", "knobs-wt-hheading", g.heading));
-      if (g.summary)
-        head.append(text(doc, "span", "knobs-wt-hsum", g.summary));
-      group.append(head);
-    }
-    const list = el(doc, "ol", "knobs-wt-hlist");
-    for (const e of g.events)
-      list.append(historyEvent(doc, e, steps));
-    group.append(list);
-    root.append(group);
-  }
-  host.append(root);
-  return { dispose: () => root.remove(), context: () => ({ kind: "history" }) };
-}
-function historyEvent(doc, e, steps) {
-  const li = el(doc, "li", "knobs-wt-hev");
-  if (e.tone)
-    li.dataset.tone = e.tone;
-  if (e.type)
-    li.dataset.type = e.type;
-  if (e.provenance)
-    li.dataset.provenance = e.provenance;
-  const when = el(doc, "div", "knobs-wt-hwhen");
-  when.append(text(doc, "time", "knobs-wt-hdate", e.date));
-  if (e.age)
-    when.append(text(doc, "span", "knobs-wt-hage", e.age));
-  const spine = el(doc, "span", "knobs-wt-hspine");
-  spine.setAttribute("aria-hidden", "true");
-  spine.append(el(doc, "span", "knobs-wt-hdot"));
-  const main = el(doc, "div", "knobs-wt-hmain");
-  const title = el(doc, "div", "knobs-wt-htitle");
-  title.append(text(doc, "span", "knobs-wt-htext", e.title));
-  if (e.provenance || e.source) {
-    const p = text(doc, "span", "knobs-wt-prov", [e.provenance, e.source].filter(Boolean).join(" · "));
-    if (e.provenance === "inferred")
-      p.title = "Inferred from behaviour, not seen in the record";
-    else if (e.provenance === "verified")
-      p.title = "Seen in the record";
-    title.append(p);
-  }
-  const go = stepButton(doc, e.step, steps);
-  if (go)
-    title.append(go);
-  main.append(title);
-  if (e.detail)
-    main.append(prose(doc, "p", "knobs-wt-hdetail", e.detail));
-  const t = tags(doc, e.evidence);
-  if (t)
-    main.append(t);
-  li.append(when, spine, main);
-  return li;
+  const h = history(host, {
+    data: m.data,
+    ...m.label ? { label: m.label } : {},
+    ...m.marks ? { marks: m.marks } : {},
+    ...steps ? {
+      onJump: (ref) => {
+        const s = steps.find(ref);
+        if (s)
+          steps.go(s.key);
+      }
+    } : {}
+  });
+  return {
+    dispose: () => h.dispose(),
+    context: () => ({ kind: "history" })
+  };
 }
 function mountStack(host, m, steps) {
   const doc = host.ownerDocument;
   const layout = stackLayout(m);
-  const root = el(doc, "div", "knobs-wt-stack");
+  const root = el2(doc, "div", "knobs-wt-stack");
   root.toggleAttribute("data-flat", layout.flat);
   const lane = (kind) => {
-    const s = el(doc, "span", "knobs-wt-lane");
+    const s = el2(doc, "span", "knobs-wt-lane");
     s.dataset.rail = kind;
     return s;
   };
@@ -18042,19 +19228,19 @@ function mountStack(host, m, steps) {
   };
   const from = layout.trunk ? 0 : 1;
   if (layout.trunk && layout.rows.length) {
-    const row = el(doc, "div", "knobs-wt-srow");
+    const row = el2(doc, "div", "knobs-wt-srow");
     row.dataset.trunk = "";
-    const lanes = el(doc, "span", "knobs-wt-lanes");
+    const lanes = el2(doc, "span", "knobs-wt-lanes");
     lanes.setAttribute("aria-hidden", "true");
     lanes.append(node(true));
-    row.append(lanes, text(doc, "span", "knobs-wt-trunk", layout.trunk));
+    row.append(lanes, text2(doc, "span", "knobs-wt-trunk", layout.trunk));
     root.append(row);
   }
   for (const r of layout.rows) {
     const it = r.item;
-    const row = el(doc, "div", "knobs-wt-srow");
+    const row = el2(doc, "div", "knobs-wt-srow");
     if (!layout.flat) {
-      const lanes = el(doc, "span", "knobs-wt-lanes");
+      const lanes = el2(doc, "span", "knobs-wt-lanes");
       lanes.setAttribute("aria-hidden", "true");
       for (let k = from;k < r.depth; k++)
         lanes.append(lane(r.rails[k] ? "pass" : "none"));
@@ -18063,24 +19249,21 @@ function mountStack(host, m, steps) {
       lanes.append(node(r.children > 0));
       row.append(lanes);
     }
-    const main = el(doc, "div", "knobs-wt-smain");
-    const line = el(doc, "div", "knobs-wt-sline");
+    const main = el2(doc, "div", "knobs-wt-smain");
+    const line = el2(doc, "div", "knobs-wt-sline");
     if (it.order)
-      line.append(text(doc, "span", "knobs-wt-sord", it.order));
+      line.append(text2(doc, "span", "knobs-wt-sord", it.order));
     line.append(link(doc, "knobs-wt-spr", it.pr, it.href));
     const target = it.step ? steps?.find(it.step) : null;
     if (target && steps) {
-      const title = text(doc, "button", "knobs-wt-stitle", it.title);
+      const title = text2(doc, "button", "knobs-wt-stitle", it.title);
       title.type = "button";
-      title.title = `Go to “${target.title}”`;
+      title.title = `Go to “${plainMarkdown(target.title)}”`;
       title.addEventListener("click", (e) => {
         e.stopPropagation();
         steps.go(target.key);
       });
       line.append(title);
-      const go = stepButton(doc, it.step, steps);
-      if (go)
-        line.append(go);
       row.dataset.go = "";
       row.addEventListener("click", (e) => {
         const t = e.target;
@@ -18091,14 +19274,14 @@ function mountStack(host, m, steps) {
         steps.go(target.key);
       });
     } else
-      line.append(text(doc, "span", "knobs-wt-stitle", it.title));
+      line.append(text2(doc, "span", "knobs-wt-stitle", it.title));
     main.append(line);
     if (it.summary)
       main.append(prose(doc, "p", "knobs-wt-ssummary", it.summary));
-    const meta = el(doc, "div", "knobs-wt-smeta");
+    const meta = el2(doc, "div", "knobs-wt-smeta");
     if (it.head) {
       const branch = r.offBase ? `${it.head} → ${r.offBase}` : it.head;
-      meta.append(text(doc, "span", "knobs-wt-sbranch", branch));
+      meta.append(text2(doc, "span", "knobs-wt-sbranch", branch));
     }
     if (it.delta !== undefined)
       meta.append(delta(doc, it.delta));
@@ -18106,7 +19289,7 @@ function mountStack(host, m, steps) {
       main.append(meta);
     row.append(main);
     if (it.status) {
-      const chip = text(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
+      const chip = text2(doc, "span", "knobs-wt-chip knobs-wt-sstatus", it.status);
       chip.dataset.tone = it.tone ?? "dim";
       row.append(chip);
     }
@@ -18116,40 +19299,38 @@ function mountStack(host, m, steps) {
   return { dispose: () => root.remove(), context: () => ({ kind: "stack" }) };
 }
 function delta(doc, d) {
-  const s = el(doc, "span", "knobs-wt-delta");
+  const s = el2(doc, "span", "knobs-wt-delta");
   if (typeof d === "string") {
     s.textContent = d;
     return s;
   }
   const n = (v) => v.toLocaleString("en-US");
-  s.append(text(doc, "span", "knobs-wt-add", `+${n(d.add)}`));
-  s.append(text(doc, "span", "knobs-wt-del", `−${n(d.del)}`));
+  s.append(text2(doc, "span", "knobs-wt-add", `+${n(d.add)}`));
+  s.append(text2(doc, "span", "knobs-wt-del", `−${n(d.del)}`));
   s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
   return s;
 }
-function cellContent(doc, into, cell, steps) {
+function cellContent(doc, into, cell) {
   let content;
   if (cell.badge) {
     content = link(doc, "knobs-wt-chip", cell.text, cell.href);
     content.dataset.tone = cell.badge;
   } else {
-    const inner = cell.code ? text(doc, "code", "", cell.text) : null;
+    const inner = cell.code ? text2(doc, "code", "", cell.text) : null;
     if (cell.href) {
       content = link(doc, "knobs-wt-clink", inner ? "" : cell.text, cell.href);
       if (inner)
         content.append(inner);
     } else
-      content = inner ?? text(doc, "span", "", cell.text);
+      content = inner ?? text2(doc, "span", "", cell.text);
     if (cell.tone) {
       content.classList.add("knobs-wt-ctone");
       content.dataset.tone = cell.tone;
     }
   }
   into.append(content);
-  const go = stepButton(doc, cell.step, steps);
-  if (go)
-    into.append(go);
 }
+var rowStep = (r, columns) => columns.map((c) => r[c.key]?.step).find((step) => step !== undefined);
 var cellAttrs = (td, c) => {
   td.dataset.align = c.align;
   if (c.mono)
@@ -18158,83 +19339,85 @@ var cellAttrs = (td, c) => {
 function mountTable(host, m, steps) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
-  const box = el(doc, "div", "knobs-wt-tablebox");
-  const scroller = el(doc, "div", "knobs-wt-table");
-  const table = el(doc, "table");
+  const box = el2(doc, "div", "knobs-wt-tablebox");
+  const scroller = el2(doc, "div", "knobs-wt-table");
+  const table = el2(doc, "table");
   if (m.caption)
-    table.append(text(doc, "caption", "", m.caption));
-  const head = el(doc, "thead");
-  const hr = el(doc, "tr");
+    table.append(text2(doc, "caption", "", m.caption));
+  const head = el2(doc, "thead");
+  const hr = el2(doc, "tr");
   for (const c of m.columns) {
-    const th = text(doc, "th", "", c.label);
+    const th = text2(doc, "th", "", c.label);
     th.scope = "col";
     th.dataset.align = c.align;
     hr.append(th);
   }
   head.append(hr);
-  const body = el(doc, "tbody");
+  const body = el2(doc, "tbody");
   for (const r of m.rows) {
-    const tr = el(doc, "tr");
+    const tr = el2(doc, "tr");
     for (const c of m.columns) {
-      const td = el(doc, "td");
+      const td = el2(doc, "td");
       cellAttrs(td, c);
       const cell = r[c.key];
       if (cell) {
         if (cell.text.length > 40 && !c.mono && !cell.code)
           td.dataset.long = "";
-        cellContent(doc, td, cell, steps);
+        cellContent(doc, td, cell);
       }
       tr.append(td);
     }
+    rowLink(tr, rowStep(r, m.columns), steps);
     body.append(tr);
   }
   table.append(head, body);
   scroller.append(table);
-  const stack = el(doc, "div", "knobs-wt-tstack");
+  const stack = el2(doc, "div", "knobs-wt-tstack");
   stack.setAttribute("role", "list");
   if (m.caption)
     stack.setAttribute("aria-label", m.caption);
   const primary = m.columns.find((c) => c.key === m.primary) ?? m.columns[0];
   for (const r of m.rows) {
-    const item = el(doc, "div", "knobs-wt-trow");
+    const item = el2(doc, "div", "knobs-wt-trow");
     item.setAttribute("role", "listitem");
-    const title = el(doc, "div", "knobs-wt-ttitle");
+    const title = el2(doc, "div", "knobs-wt-ttitle");
     if (primary) {
       cellAttrs(title, primary);
       const cell = r[primary.key];
       if (cell)
-        cellContent(doc, title, cell, steps);
+        cellContent(doc, title, cell);
     }
-    const line = el(doc, "div", "knobs-wt-tline");
+    const line = el2(doc, "div", "knobs-wt-tline");
     line.append(title);
-    const badges = el(doc, "div", "knobs-wt-tbadges");
+    const badges = el2(doc, "div", "knobs-wt-tbadges");
     for (const c of m.columns) {
       const cell = r[c.key];
       if (c !== primary && cell?.badge)
-        cellContent(doc, badges, cell, steps);
+        cellContent(doc, badges, cell);
     }
     if (badges.childNodes.length)
       line.append(badges);
     item.append(line);
-    const terms = el(doc, "dl", "knobs-wt-tterms");
+    const terms = el2(doc, "dl", "knobs-wt-tterms");
     for (const c of m.columns) {
       if (c === primary)
         continue;
       const cell = r[c.key];
       if (!cell || cell.text === "" || cell.badge)
         continue;
-      const dd = el(doc, "dd");
+      const dd = el2(doc, "dd");
       cellAttrs(dd, c);
       dd.removeAttribute("data-align");
-      cellContent(doc, dd, cell, steps);
-      terms.append(text(doc, "dt", "", c.label), dd);
+      cellContent(doc, dd, cell);
+      terms.append(text2(doc, "dt", "", c.label), dd);
     }
     if (terms.childNodes.length)
       item.append(terms);
+    rowLink(item, rowStep(r, m.columns), steps);
     stack.append(item);
   }
   if (m.caption)
-    stack.append(text(doc, "p", "knobs-wt-tcaption", m.caption));
+    stack.append(text2(doc, "p", "knobs-wt-tcaption", m.caption));
   box.append(scroller, stack);
   host.append(box);
   let natural = 0;
@@ -18288,16 +19471,16 @@ function mountTable(host, m, steps) {
 }
 function chapterPills(host, chapters, io) {
   const doc = host.ownerDocument;
-  const list = el(doc, "div", "knobs-wt-chapters");
+  const list = el2(doc, "div", "knobs-wt-chapters");
   list.setAttribute("role", "group");
   list.setAttribute("aria-label", "Chapters");
   let at = -2;
   const rows = chapters.map((c, i) => {
-    const b = el(doc, "button", "knobs-wt-chapter");
+    const b = el2(doc, "button", "knobs-wt-chapter");
     b.type = "button";
-    b.append(text(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
-    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
-    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
+    b.append(text2(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
+    b.append(text2(doc, "span", "knobs-wt-chapter-label", c.label));
+    b.append(text2(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
     b.addEventListener("click", () => {
       io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
       io.seek(c.start);
@@ -18335,15 +19518,13 @@ function disclosure(host, options) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
   let open = options.open === true;
-  const root = el(doc, "div", "knobs-wt-disc");
-  const toggle = el(doc, "button", "knobs-wt-disc-toggle");
+  const root = el2(doc, "div", "knobs-wt-disc");
+  const toggle = el2(doc, "button", "knobs-wt-disc-toggle");
   toggle.type = "button";
   toggle.innerHTML = GLYPH.caret;
-  toggle.append(text(doc, "span", "", options.label));
-  if (options.count !== undefined)
-    toggle.append(text(doc, "span", "knobs-wt-disc-count", String(options.count)));
-  const viewport = el(doc, "div", "knobs-wt-disc-body");
-  const content = el(doc, "div", "knobs-wt-disc-content");
+  toggle.append(text2(doc, "span", "", options.label));
+  const viewport = el2(doc, "div", "knobs-wt-disc-body");
+  const content = el2(doc, "div", "knobs-wt-disc-content");
   content.append(options.content);
   viewport.append(content);
   root.append(toggle, viewport);
@@ -18355,7 +19536,9 @@ function disclosure(host, options) {
     const k = full > 0 ? Math.max(0, Math.min(1, h.x / full)) : open ? 1 : 0;
     viewport.style.height = !moving && open ? "" : `${Math.max(0, h.x).toFixed(2)}px`;
     viewport.toggleAttribute("data-moving", moving);
-    content.style.opacity = (open ? Math.min(1, k * 1.25) : Math.max(0, k * 1.5 - 0.5)).toFixed(3);
+    const o = open ? Math.min(1, k * 1.25) : Math.max(0, k * 1.5 - 0.5);
+    content.style.opacity = o.toFixed(3);
+    content.style.filter = o >= 1 ? "" : `blur(${((1 - o) * 3).toFixed(2)}px)`;
   };
   const loop = frameLoop(win, (dt) => {
     h.step(dt);
@@ -18391,6 +19574,7 @@ function disclosure(host, options) {
         h.snap(open ? full : 0);
         viewport.style.height = open ? "" : "0px";
         content.style.opacity = open ? "1" : "0";
+        content.style.filter = "";
         return;
       }
       if (h.resting)
@@ -18414,7 +19598,7 @@ var PR_PATHS = {
 var prGlyph = (merged) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="12" height="12" fill="currentColor" aria-hidden="true" focusable="false"><path d="${merged ? PR_PATHS.merge : PR_PATHS.pull}"/></svg>`;
 var PR_STATE = { merged: "Merged", open: "Open", draft: "Draft", closed: "Closed" };
 function prChip(doc, n, pr) {
-  const chip = el(doc, pr.href ? "a" : "span", "knobs-wt-pr");
+  const chip = el2(doc, pr.href ? "a" : "span", "knobs-wt-pr");
   if (pr.href) {
     chip.setAttribute("href", pr.href);
     chip.setAttribute("target", "_blank");
@@ -18423,7 +19607,7 @@ function prChip(doc, n, pr) {
   if (pr.state)
     chip.dataset.state = pr.state;
   chip.innerHTML = prGlyph(pr.state === "merged");
-  chip.append(text(doc, "span", "", `#${n}`));
+  chip.append(text2(doc, "span", "", `#${n}`));
   const tip = [`#${n}`, pr.title, pr.state ? PR_STATE[pr.state] : ""].filter(Boolean).join(" · ");
   chip.title = tip;
   chip.setAttribute("aria-label", `Pull request ${tip}`);
@@ -18479,6 +19663,7 @@ function linkPRs(root, find) {
 // src/ui/walkthrough-media.ts
 init_compare_model();
 init_glide();
+init_motion();
 init_icons();
 init_look();
 
@@ -18491,8 +19676,9 @@ var quick = springCss(FADE);
 var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)";
 var walkthroughCss = `
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
+.knobs-ui:is(.knobs-walkthrough,.knobs-wt-slot){--k-glass:0;--k-glow:0;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms}
 .knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;--kw-state:${state.easing};--kw-state-ms:${state.duration}ms;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms;
-  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
+  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-rail-gap:calc(var(--_k-space-group) + var(--_k-space-column) / 1.5);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
   --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-under:var(--_k-bg-page);--kw-ink:var(--k-walkthrough-ink,#ff375f);--kw-strong:var(--_k-weight-label);
   container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;text-align:left;
   letter-spacing:normal;-webkit-font-smoothing:antialiased}
@@ -18508,7 +19694,7 @@ var walkthroughCss = `
 /* ——— layout: the contents rail sticky at the left edge (right if asked), and the column centred
    in the room beside it, up to --kw-width: media take the column, prose stops at the measure.
    One column where it's narrow ——— */
-.knobs-wt-layout{display:grid;grid-template-columns:var(--kw-rail-w) minmax(0,1fr);gap:var(--_k-space-column);align-items:start}
+.knobs-wt-layout{display:grid;grid-template-columns:var(--kw-rail-w) minmax(0,1fr);gap:var(--kw-rail-gap);align-items:start}
 .knobs-walkthrough[data-rail="right"] .knobs-wt-layout{grid-template-columns:minmax(0,1fr) var(--kw-rail-w)}
 .knobs-walkthrough[data-rail="right"] .knobs-wt-main{grid-column:1;grid-row:1}
 .knobs-walkthrough[data-rail="right"] .knobs-wt-rail{grid-column:2;grid-row:1}
@@ -18586,7 +19772,6 @@ var walkthroughCss = `
 .knobs-wt-feed{display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0;scroll-margin-top:16px}
 .knobs-wt-feed-head{display:flex;align-items:baseline;gap:var(--_k-space-sibling)}
 .knobs-wt-feed-title{font-weight:var(--kw-strong)!important}
-.knobs-wt-feed-count{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
 .knobs-wt-feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0}
 .knobs-wt-fi{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0}
 .knobs-wt-fi+.knobs-wt-fi::before{content:"";position:absolute;left:0;right:0;top:calc(var(--_k-space-group) / -2);height:1px;background:var(--_k-border-subtle)}
@@ -18597,10 +19782,6 @@ var walkthroughCss = `
 :where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;margin:0;padding:0;cursor:pointer;outline:none;
   transition:color calc(var(--_k-hover-out) * 1ms)}
 .knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-:where(.knobs-ui) .knobs-wt-steplink{all:revert;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 2px;padding:0;vertical-align:-5px;border:0;
-  border-radius:calc(var(--_k-radius) / 2);background:transparent;color:var(--_k-fg-3);cursor:pointer;outline:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-steplink:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-wt-steplink svg{width:12px;height:12px}
 
 /* ——— a disclosure: a small faint toggle with a caret, no fill. The body's height springs (in
    script) and its content fades in place, top-anchored, under a soft bottom mask ——— */
@@ -18611,7 +19792,6 @@ var walkthroughCss = `
 .knobs-ui .knobs-wt-disc-toggle:focus-visible{box-shadow:0 0 0 2px var(--_k-focus)}
 .knobs-wt-disc-toggle svg{flex:none;width:12px;height:12px;transition:rotate var(--kw-state-ms) var(--kw-state)}
 .knobs-wt-disc[data-open]>.knobs-wt-disc-toggle svg{rotate:90deg}
-.knobs-wt-disc-count{color:var(--_k-fg-3)}
 .knobs-wt-disc-body{overflow:hidden}
 .knobs-wt-disc[data-open]>.knobs-wt-disc-body:not([data-moving]){overflow:visible}
 .knobs-wt-disc-body[data-moving]{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
@@ -18791,6 +19971,10 @@ var walkthroughCss = `
 /* A slot's label: sentence case as written, small and faint, never a heading. */
 .knobs-wt-slot-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:normal;text-transform:none;color:var(--_k-fg-3);${fade2}}
 .knobs-wt-body{min-width:0}
+/* Media mounting after the first paint, and a picture still decoding, come into focus: a fade with
+   a small blur on the quick spring, from the top; at rest, nothing. */
+.knobs-wt-body,.knobs-wt-frame>img{transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-body[data-entering],.knobs-wt-frame[data-loading]>img{opacity:0;filter:blur(3px);transition:none}
 /* One frame for every slot that has one (a picture, a video, a code block, a compare's stage, a
    slot still loading): the panel radius and a quiet fill, no ring; concentric on a card. */
 .knobs-wt-slot .knobs-cmp-stage{border-radius:var(--kw-frame-r)}
@@ -18805,9 +19989,12 @@ 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}
-.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--kw-frame-r);background:var(--_k-fill);color:var(--_k-fg);
+/* Diff, code and terminal: one plain container (no glass): a flat inset fill, a hairline ring, the
+   control radius and room inside, so a diff's buttons and the code under them can breathe. */
+.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body{padding:var(--_k-space-sibling) var(--_k-pad-card) var(--_k-pad-card);border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle)}
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--_k-radius);background:var(--_k-bg-inset);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
   font:var(--_k-type-label)/var(--_k-leading-body) var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
-.knobs-surface .knobs-wt-code{padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
+.knobs-surface :is(.knobs-wt-code,.knobs-wt-slot[data-kind="diff"]>.knobs-wt-body){padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
 .knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
 .knobs-wt-prompt{color:var(--_k-fg-3);user-select:none;-webkit-user-select:none}
 .knobs-wt-cmd{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
@@ -18834,48 +20021,37 @@ var walkthroughCss = `
 .knobs-wt-hold{border-radius:var(--kw-frame-r);background:var(--_k-fill)}
 .knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:var(--_k-type-small)}
 
+/* Annotations: a calm ring round a box, a dot or an arrow at a point, a small label beside it;
+   each fades in and out with a small blur on the quick spring as its time comes and goes, and a
+   page's switch (the eye, or a) hides them all. Placed in px by script, 1:1 with the picture;
+   last in their box, so they sit over the picture (and under a compare's grip and labels). */
+.knobs-wt-anno{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-anno:not([data-settled]),.knobs-wt-anno:not([data-settled]) *{transition:none!important}
+[data-annotations="off"] .knobs-wt-anno,.knobs-wt-anno[data-moving]{opacity:0;filter:blur(3px)}
+.knobs-wt-mark{--kw-mark:var(--_k-accent);position:absolute;left:0;top:0;color:var(--kw-mark);transition:opacity var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-mark[data-hidden]{opacity:0;filter:blur(3px)}
+.knobs-wt-mark[data-shape="box"]{border-radius:6px;box-shadow:0 0 0 1.5px var(--kw-mark),0 0 0 4px color-mix(in srgb,var(--_k-bg) 45%,transparent)}
+.knobs-wt-mark[data-shape="dot"]::before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--kw-mark);box-shadow:0 0 0 3px color-mix(in srgb,var(--kw-mark) 30%,transparent)}
+.knobs-wt-anno-arrow{position:absolute;right:0;bottom:0;filter:drop-shadow(0 0 2px var(--_k-bg))}
+.knobs-wt-mark-label{position:absolute;left:0;bottom:calc(100% + 6px);max-width:240px;padding:2px 6px;border-radius:calc(var(--_k-radius) / 2);background:var(--_k-bg-overlay);color:var(--_k-fg);
+  font:var(--_k-weight-label) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);white-space:nowrap;overflow:hidden;box-shadow:var(--_k-shadow-overlay);${fade2}}
+.knobs-wt-mark:is([data-shape="dot"],[data-shape="arrow"]) .knobs-wt-mark-label{left:12px;bottom:auto;top:10px}
+.knobs-wt-mark[data-shape="arrow"] .knobs-wt-mark-label{left:auto;right:30px;top:auto;bottom:30px}
+.knobs-ui .knobs-wt-anno-toggle{all:revert;box-sizing:border-box;position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;margin:0;
+  border-radius:var(--_k-radius);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);color:var(--_k-fg-2);cursor:pointer;opacity:.6;outline:none;
+  transition:opacity calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-anno-toggle:is(:hover,:focus-visible){opacity:1;color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-anno-toggle:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-cmp-stage>.knobs-wt-anno-toggle{top:auto;bottom:8px}
+
 /* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
    hairlines and fills only. Tones read the status tokens; hover fades are the panel's own. ——— */
-:where(.knobs-wt-history,.knobs-wt-stack,.knobs-wt-tablebox,.knobs-wt-chapters){--kw-line:var(--_k-leading-body);--kw-rail:var(--_k-border-strong)}
+:where(.knobs-wt-stack,.knobs-wt-tablebox,.knobs-wt-chapters){--kw-line:var(--_k-leading-body);--kw-rail:var(--_k-border-strong)}
 :where(.knobs-wt-slot) [data-tone="good"]{--kw-tone:var(--kw-good)}
 :where(.knobs-wt-slot) [data-tone="warn"]{--kw-tone:var(--_k-warn)}
 :where(.knobs-wt-slot) [data-tone="bad"]{--kw-tone:var(--_k-danger)}
 :where(.knobs-wt-slot) [data-tone="info"]{--kw-tone:var(--kw-info)}
 :where(.knobs-wt-slot) [data-tone="dim"]{--kw-tone:var(--_k-fg-3)}
-.knobs-wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
-.knobs-ui .knobs-wt-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-2);font:var(--_k-weight) var(--_k-type-small)/1 var(--_k-mono);
-  text-decoration:none;white-space:nowrap;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui a.knobs-wt-tag:is(:hover,:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-
-/* A history: dates down the left, a spine of tone dots joined by a hairline (broken around each
-   dot), the event beside it. Inferred events take a ring for a dot and a dashed tag. */
-.knobs-wt-history{--kw-hy:calc(5px + var(--kw-line) / 2);display:flex;flex-direction:column;gap:18px;font-size:var(--_k-type-body);line-height:var(--kw-line);color:var(--_k-fg)}
-.knobs-wt-hgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
-.knobs-wt-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
-.knobs-ui .knobs-wt-hheading{margin:0;font:var(--_k-weight-label) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
-.knobs-wt-hsum{color:var(--_k-fg-3);font-size:var(--_k-type-small);font-variant-numeric:tabular-nums}
-.knobs-wt-hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
-.knobs-wt-hev{display:grid;grid-template-columns:var(--kw-hw,11ch) 14px minmax(0,1fr);grid-template-areas:"when spine main";column-gap:10px;align-items:baseline;padding:5px 0}
-.knobs-wt-hwhen{grid-area:when;display:flex;flex-direction:column;min-width:0;font:var(--_k-weight) var(--_k-type-label)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
-.knobs-wt-hage{color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
-.knobs-wt-hspine{grid-area:spine;position:relative;align-self:stretch;margin-block:-5px}
-.knobs-wt-hspine::before,.knobs-wt-hspine::after{content:"";position:absolute;left:6.5px;width:1px;background:var(--kw-rail)}
-.knobs-wt-hspine::before{top:0;height:calc(var(--kw-hy) - 6px)}
-.knobs-wt-hspine::after{top:calc(var(--kw-hy) + 6px);bottom:0}
-.knobs-wt-hev:first-child .knobs-wt-hspine::before,.knobs-wt-hev:last-child .knobs-wt-hspine::after{content:none}
-.knobs-wt-hdot{position:absolute;left:3.5px;top:calc(var(--kw-hy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--kw-tone,var(--_k-fg-3))}
-.knobs-wt-hev[data-type="release"] .knobs-wt-hdot{border-radius:1.5px;rotate:45deg;scale:.9}
-.knobs-wt-hev[data-type="audit"] .knobs-wt-hdot{border-radius:1.5px}
-.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-hdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kw-tone,var(--_k-fg-3))}
-.knobs-wt-hmain{grid-area:main;display:flex;flex-direction:column;gap:2px;min-width:0}
-.knobs-wt-htitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
-.knobs-wt-prov{padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-3);font:var(--_k-weight) var(--_k-type-small)/18px var(--_k-mono);white-space:nowrap}
-.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-prov{background:transparent;color:var(--_k-warn);outline:1px dashed color-mix(in oklch,var(--_k-warn) 50%,transparent);outline-offset:-1px}
-.knobs-ui .knobs-wt-hdetail{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
-@container knobs-wt-slot (max-width:520px){
-  .knobs-wt-hev{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"spine when" "spine main"}
-  .knobs-wt-hwhen{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
-}
 
 /* A stack: the trunk at the top, each PR hanging off the branch it merges into, rails drawn as a
    git graph (solid, so where two meet they don't darken). A PR with a step goes there on a click. */
@@ -18920,6 +20096,12 @@ var walkthroughCss = `
 /* Too narrow for its columns, each row becomes a block: its primary cell titling the rest as term
    and value, the blocks parted by hairlines. Scrolling sideways is the last resort (stack: never). */
 .knobs-wt-tablebox{min-width:0}
+/* A row with a step goes there: the whole row, a wash under the pointer, no arrow, so rows with and
+   without one line up. */
+.knobs-wt-tablebox [data-go]{cursor:pointer;outline:none}
+.knobs-wt-tablebox tr[data-go]>td,.knobs-wt-trow[data-go]{transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-tablebox tr[data-go]:is(:hover,:focus-visible)>td,.knobs-wt-trow[data-go]:is(:hover,:focus-visible){background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-tablebox [data-go]:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
 .knobs-wt-tablebox[data-measure] table{width:min-content}
 .knobs-wt-tstack{display:none;flex-direction:column;min-width:0}
 .knobs-wt-tablebox[data-stacked]>.knobs-wt-table{display:none}
@@ -19091,6 +20273,8 @@ async function mountCompare(host, m, look, alive, onEvent) {
     fit.style.setProperty("--kw-aspect", String(aspect));
   let lastZoom = "all";
   let lastLoop = "off";
+  let marks = null;
+  let marking = null;
   const c = compare(fit, {
     ...look,
     before: side(before, "Before"),
@@ -19103,6 +20287,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
     onMode: (next) => {
       fit.toggleAttribute("data-overlay", next !== "side");
       onEvent?.({ what: "mode", detail: next });
+      const layer = marks?.element;
+      if (layer) {
+        layer.dataset.moving = "";
+        setTimeout(() => {
+          delete layer.dataset.moving;
+          marks?.update();
+        }, MARK_GLIDE);
+      }
     },
     onView: (view) => {
       const z = view.zoom;
@@ -19113,8 +20305,23 @@ async function mountCompare(host, m, look, alive, onEvent) {
       const loopKey = l ? `${formatTime(l.start)}–${formatTime(l.end)}` : "off";
       if (loopKey !== lastLoop)
         onEvent?.({ what: "loop", detail: lastLoop = loopKey });
+      marking?.kick(MARK_GLIDE);
     }
   });
+  const stage = fit.querySelector(".knobs-cmp-stage");
+  if (m.annotations?.length && stage) {
+    const shape = { w: aspect ?? DEFAULT_ASPECT, h: 1 };
+    marks = annotationLayer(stage, m.annotations, () => {
+      const l = compareLayout({ x: 0, y: 0, w: stage.clientWidth, h: stage.clientHeight }, shape, shape);
+      return {
+        rects: c.mode === "side" ? [l.side.before, l.side.after] : [l.overlay.after],
+        view: c.zoom,
+        time: c.time
+      };
+    });
+    const layer = marks;
+    marking = follow(doc.defaultView, () => c.playing, () => layer.update());
+  }
   const chapters = m.chapters?.length ? m.chapters : null;
   if (chapters)
     c.timeline?.update({
@@ -19131,10 +20338,14 @@ async function mountCompare(host, m, look, alive, onEvent) {
   const unlisten = c.timeline?.listen({
     onSeek: (time, source) => {
       pills?.sync();
+      marking?.kick();
       if (source !== "play")
         onEvent?.({ what: "seek", time: round2(time) });
     },
-    onPlay: (on) => onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) })
+    onPlay: (on) => {
+      marking?.kick();
+      onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) });
+    }
   });
   requestAnimationFrame(() => requestAnimationFrame(() => fit.dataset.settled = ""));
   return {
@@ -19161,6 +20372,8 @@ async function mountCompare(host, m, look, alive, onEvent) {
       };
     },
     dispose: () => {
+      marking?.stop();
+      marks?.dispose();
       unlisten?.();
       pills?.dispose();
       c.dispose();
@@ -19169,6 +20382,7 @@ async function mountCompare(host, m, look, alive, onEvent) {
   };
 }
 var round2 = (v) => Math.round(v * 100) / 100;
+var MARK_GLIDE = 450;
 var zoomedIn = (z) => z.w < 0.999 || z.h < 0.999;
 function mountVideo(host, m, onEvent) {
   const doc = host.ownerDocument;
@@ -19216,6 +20430,16 @@ function mountVideo(host, m, onEvent) {
   if (pills)
     for (const type of ["timeupdate", "seeking", "seeked"])
       v.addEventListener(type, sync);
+  const marks = m.annotations?.length ? annotationLayer(frame, m.annotations, () => ({
+    rects: [
+      contain({ w: frame.clientWidth, h: frame.clientHeight }, { w: v.videoWidth, h: v.videoHeight })
+    ],
+    time: v.currentTime
+  })) : null;
+  const marking = marks ? follow(doc.defaultView, () => !v.paused, () => marks.update()) : null;
+  if (marking)
+    for (const type of ["play", "seeked", "loadedmetadata", "timeupdate"])
+      v.addEventListener(type, () => marking.kick());
   return {
     pause: () => v.pause(),
     seekBy: (d) => {
@@ -19229,6 +20453,8 @@ function mountVideo(host, m, onEvent) {
       ...pills?.current ? { chapter: pills.current.label } : {}
     }),
     dispose: () => {
+      marking?.stop();
+      marks?.dispose();
       pills?.dispose();
       v.pause();
       v.removeAttribute("src");
@@ -19246,9 +20472,52 @@ function mountImage(host, m) {
   img.decoding = "async";
   img.alt = m.alt ?? m.label ?? "";
   img.src = m.src;
+  if (!img.complete) {
+    frame.dataset.loading = "";
+    img.addEventListener("load", () => delete frame.dataset.loading, { once: true });
+    img.addEventListener("error", () => delete frame.dataset.loading, { once: true });
+  }
   frame.append(img);
   host.append(frame);
-  return { dispose: () => frame.remove() };
+  const marks = m.annotations?.length ? annotationLayer(frame, m.annotations, () => ({
+    rects: [{ x: 0, y: 0, w: frame.clientWidth, h: frame.clientHeight }]
+  })) : null;
+  if (marks)
+    img.addEventListener("load", () => marks.update(), { once: true });
+  return {
+    dispose: () => {
+      marks?.dispose();
+      frame.remove();
+    }
+  };
+}
+function contain(box, natural) {
+  if (!(natural.w > 0 && natural.h > 0))
+    return { x: 0, y: 0, w: box.w, h: box.h };
+  const k = Math.min(box.w / natural.w, box.h / natural.h);
+  const w = natural.w * k;
+  const h = natural.h * k;
+  return { x: (box.w - w) / 2, y: (box.h - h) / 2, w, h };
+}
+function follow(win, on, fn) {
+  let raf = 0;
+  let until = 0;
+  const tick = () => {
+    fn();
+    raf = on() || performance.now() < until ? win.requestAnimationFrame(tick) : 0;
+  };
+  return {
+    kick(ms = 0) {
+      until = Math.max(until, performance.now() + ms);
+      if (!raf)
+        raf = win.requestAnimationFrame(tick);
+    },
+    stop() {
+      if (raf)
+        win.cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  };
 }
 async function mountDiff(host, m, look, alive, onEvent) {
   const lib = await Promise.resolve().then(() => (init_diff(), {}));
@@ -19402,6 +20671,14 @@ function mediaSlot(container, options) {
   let pending = false;
   let disposed = false;
   let generation = 0;
+  const born = performance.now();
+  const enter = () => {
+    const win = doc.defaultView;
+    if (!win || performance.now() - born < 120 || reducedMotion(win))
+      return;
+    host.dataset.entering = "";
+    win.requestAnimationFrame(() => win.requestAnimationFrame(() => delete host.dataset.entering));
+  };
   const hold = (px) => {
     host.style.minHeight = px === null ? "" : `${px}px`;
     host.classList.toggle("knobs-wt-hold", px !== null);
@@ -19421,6 +20698,7 @@ function mediaSlot(container, options) {
       if (!alive())
         return r.dispose();
       mounted = r;
+      enter();
       if (filled)
         r.fill?.(true);
       if (r.ready)
@@ -19513,14 +20791,14 @@ function mediaSlot(container, options) {
 var CHECK3 = icon("check", { small: true });
 
 // src/ui/walkthrough.ts
-var el2 = (doc, tag, cls) => {
+var el3 = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
     n.className = cls;
   return n;
 };
 var prose2 = (doc, tag, cls, text) => {
-  const n = el2(doc, tag, cls);
+  const n = el3(doc, tag, cls);
   n.innerHTML = inlineMarkdown(text);
   return n;
 };
@@ -19559,7 +20837,7 @@ function tasteTest(container, options) {
   });
   const pickable = options.pickable !== false;
   let picked = pickable ? options.picked ?? null : null;
-  const root = el2(doc, "div", "knobs-wt-options");
+  const root = el3(doc, "div", "knobs-wt-options");
   if (pickable) {
     root.setAttribute("role", "radiogroup");
     root.setAttribute("aria-label", "Options");
@@ -19570,33 +20848,33 @@ function tasteTest(container, options) {
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
-    const tile = el2(doc, "div", "knobs-wt-option");
+    const tile = el3(doc, "div", "knobs-wt-option");
     if (!pickable) {
-      const name = el2(doc, "span", "knobs-wt-slot-label");
+      const name = el3(doc, "span", "knobs-wt-slot-label");
       name.textContent = o.label;
       tile.append(name);
     }
-    const pick = el2(doc, "button", "knobs-wt-pick");
+    const pick = el3(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
     if (i < 9)
       pick.setAttribute("aria-keyshortcuts", String(i + 1));
-    const letter = el2(doc, "span", "knobs-wt-letter");
+    const letter = el3(doc, "span", "knobs-wt-letter");
     letter.textContent = o.letter;
-    const name = el2(doc, "span", "knobs-wt-olabel");
+    const name = el3(doc, "span", "knobs-wt-olabel");
     name.textContent = o.label;
     pick.append(letter, name);
     if (o.suggested) {
-      const s = el2(doc, "span", "knobs-wt-suggested");
+      const s = el3(doc, "span", "knobs-wt-suggested");
       s.textContent = "Suggested";
       pick.append(s);
     }
     if (i < 9) {
-      const key = el2(doc, "span", "knobs-wt-key");
+      const key = el3(doc, "span", "knobs-wt-key");
       key.textContent = String(i + 1);
       pick.append(key);
     }
-    const check = el2(doc, "span", "knobs-wt-check");
+    const check = el3(doc, "span", "knobs-wt-check");
     check.innerHTML = CHECK3;
     pick.append(check);
     pick.addEventListener("click", () => {
@@ -19662,7 +20940,7 @@ function walkthrough(container, options) {
   injectWalkthroughStyles(doc);
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
-  const root = el2(doc, "div", "knobs-walkthrough");
+  const root = el3(doc, "div", "knobs-walkthrough");
   applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
@@ -19875,7 +21153,7 @@ function walkthrough(container, options) {
         return true;
     return false;
   };
-  const scrim = el2(doc, "div", "knobs-wt-scrim");
+  const scrim = el3(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
   const fullRect = () => ({
     x: DOCK_INSET,
@@ -19925,7 +21203,7 @@ function walkthrough(container, options) {
       }
       if (!full) {
         const r = v.card.getBoundingClientRect();
-        const hold = el2(doc, "div", "knobs-wt-hold-card");
+        const hold = el3(doc, "div", "knobs-wt-hold-card");
         hold.style.height = `${r.height}px`;
         v.card.before(hold);
         v.card.dataset.full = "";
@@ -20075,7 +21353,7 @@ function walkthrough(container, options) {
       toast("Couldn't reach the microphone", { tone: "warn", look, doc });
     }
   };
-  const backPill = el2(doc, "button", "knobs-wt-back");
+  const backPill = el3(doc, "button", "knobs-wt-back");
   backPill.type = "button";
   let backTo = null;
   let backTimer = 0;
@@ -20095,7 +21373,7 @@ function walkthrough(container, options) {
       return;
     backTo = key;
     backPill.innerHTML = ICON.back;
-    const words = el2(doc, "span", "knobs-wt-back-label");
+    const words = el3(doc, "span", "knobs-wt-back-label");
     words.textContent = `Back to ${plainMarkdown(v.step.title)}`;
     backPill.append(words);
     backPill.dataset.on = "";
@@ -20103,16 +21381,16 @@ function walkthrough(container, options) {
     backTimer = win.setTimeout(hideBack, BACK_MS);
   };
   const bar = (() => {
-    const dock = el2(doc, "div", "knobs-wt-dock");
-    const box = el2(doc, "div", "knobs-wt-notebar");
-    const on = el2(doc, "div", "knobs-wt-on");
-    const row = el2(doc, "div", "knobs-wt-row");
-    const input = el2(doc, "textarea", "knobs-wt-input");
+    const dock = el3(doc, "div", "knobs-wt-dock");
+    const box = el3(doc, "div", "knobs-wt-notebar");
+    const on = el3(doc, "div", "knobs-wt-on");
+    const row = el3(doc, "div", "knobs-wt-row");
+    const input = el3(doc, "textarea", "knobs-wt-input");
     input.rows = 1;
     input.setAttribute("aria-label", "Note");
-    const attach = el2(doc, "div", "knobs-wt-attach");
+    const attach = el3(doc, "div", "knobs-wt-attach");
     const btn = (icon, label, run) => {
-      const b = el2(doc, "button", "knobs-wt-tool");
+      const b = el3(doc, "button", "knobs-wt-tool");
       b.type = "button";
       b.innerHTML = icon;
       b.setAttribute("aria-label", label);
@@ -20123,17 +21401,17 @@ function walkthrough(container, options) {
     const fullBtn = btn(ICON.full, "Full window · f", () => setFull(!full));
     const penBtn = btn(ICON.pen, "Draw on the media", () => setInk(!ink.on));
     const micBtn = btn(ICON.mic, "Record a voice note", () => void toggleVoice());
-    const micTime = el2(doc, "span", "knobs-wt-rec");
+    const micTime = el3(doc, "span", "knobs-wt-rec");
     micBtn.append(micTime);
     const sendBtn = btn(ICON.send, "Send · Enter", () => send());
     sendBtn.dataset.send = "";
     row.append(input, attach, fullBtn, penBtn, micBtn, sendBtn);
     box.append(on, row);
-    const launch = el2(doc, "button", "knobs-wt-launch");
+    const launch = el3(doc, "button", "knobs-wt-launch");
     launch.type = "button";
     launch.innerHTML = ICON.pen;
     launch.append("Note");
-    const kbd = el2(doc, "kbd");
+    const kbd = el3(doc, "kbd");
     kbd.textContent = "n";
     launch.append(kbd);
     launch.setAttribute("aria-label", "Write a note (n)");
@@ -20185,9 +21463,9 @@ function walkthrough(container, options) {
       }
     });
     const chip = (text, clear) => {
-      const c = el2(doc, "span", "knobs-wt-chip-a");
+      const c = el3(doc, "span", "knobs-wt-chip-a");
       c.append(text);
-      const x = el2(doc, "button", "knobs-wt-x");
+      const x = el3(doc, "button", "knobs-wt-x");
       x.type = "button";
       x.innerHTML = ICON.close;
       x.setAttribute("aria-label", `Remove ${text}`);
@@ -20336,9 +21614,9 @@ function walkthrough(container, options) {
     }
   };
   const renderNote = (v, n, entering = false) => {
-    const row = el2(doc, "div", "knobs-wt-n");
+    const row = el3(doc, "div", "knobs-wt-n");
     row.dataset.id = n.id;
-    const meta = el2(doc, "span", "knobs-wt-n-meta");
+    const meta = el3(doc, "span", "knobs-wt-n-meta");
     const m = n.context.media;
     meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
     if (m?.time !== undefined) {
@@ -20354,11 +21632,11 @@ function walkthrough(container, options) {
       });
     }
     row.append(meta);
-    const body = el2(doc, "div", "knobs-wt-n-body");
+    const body = el3(doc, "div", "knobs-wt-n-body");
     if (n.text)
       body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
     if (n.voice) {
-      const a = el2(doc, "audio", "knobs-wt-n-voice");
+      const a = el3(doc, "audio", "knobs-wt-n-voice");
       a.controls = true;
       a.preload = "none";
       a.src = n.voice.url;
@@ -20378,7 +21656,7 @@ function walkthrough(container, options) {
       body.append(thumb);
     }
     row.append(body);
-    const x = el2(doc, "button", "knobs-wt-x");
+    const x = el3(doc, "button", "knobs-wt-x");
     x.type = "button";
     x.innerHTML = ICON.close;
     x.setAttribute("aria-label", "Delete this note");
@@ -20418,9 +21696,9 @@ function walkthrough(container, options) {
     row.addEventListener("transitionend", done, { once: true });
     win.setTimeout(done, 600);
   };
-  const metaLine = (cls) => el2(doc, "div", `knobs-wt-metaline ${cls}`);
+  const metaLine = (cls) => el3(doc, "div", `knobs-wt-metaline ${cls}`);
   const metaText = (line, text, cls) => {
-    const s = el2(doc, "span", cls);
+    const s = el3(doc, "span", cls);
     s.textContent = text;
     line.append(s);
     return s;
@@ -20433,7 +21711,7 @@ function walkthrough(container, options) {
       line.append(chip);
       return chip;
     }
-    const a = el2(doc, "a");
+    const a = el3(doc, "a");
     a.href = href;
     a.target = "_blank";
     a.rel = "noreferrer";
@@ -20443,58 +21721,58 @@ function walkthrough(container, options) {
     return a;
   };
   const feedItem = (f, now) => {
-    const li = el2(doc, "li", "knobs-wt-fi");
+    const li = el3(doc, "li", "knobs-wt-fi");
     li.dataset.kind = f.kind;
-    const q = el2(doc, "div", "knobs-wt-fi-q");
+    const q = el3(doc, "div", "knobs-wt-fi-q");
     const meta = metaLine("knobs-wt-fi-meta");
     if (f.at !== null) {
       const when = metaText(meta, ago(f.at, now));
       when.title = new Date(f.at).toLocaleString();
-    } else
-      metaText(meta, f.kind === "qa" ? "Answer" : "Update");
+    }
     const step = f.step ? page.steps.find((s) => s.key === f.step) : undefined;
     if (step) {
       const section = page.sections.find((s) => s.id === step.section);
-      const b = el2(doc, "button", "knobs-wt-fi-step");
+      const b = el3(doc, "button", "knobs-wt-fi-step");
       b.type = "button";
       b.textContent = section?.link?.label ?? plainMarkdown(step.title);
       b.title = `Go to “${plainMarkdown(step.title)}”`;
       b.addEventListener("click", () => go(step.key));
       meta.append(b);
     }
-    if (f.status) {
+    if (f.status && review) {
       const id = f.status.toLowerCase();
       const shipped = /^(ship|shipped|merged|done)$/.test(id);
       const changes = /^(changes?|changes queued)$/.test(id);
       const s = metaText(meta, shipped ? "Shipped" : changes ? "Changes queued" : f.status);
       s.dataset.status = shipped ? "on" : changes ? "warn" : "";
     }
-    q.append(meta);
+    if (meta.childNodes.length)
+      q.append(meta);
     if (f.q)
       q.append(prose2(doc, "p", "knobs-wt-fi-ask", f.q));
     else
       q.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
     li.append(q);
     if (f.q || f.trail.length) {
-      const a = el2(doc, "div", "knobs-wt-fi-a");
+      const a = el3(doc, "div", "knobs-wt-fi-a");
       if (f.q)
         a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
       if (f.trail.length) {
-        const list = el2(doc, "ol", "knobs-wt-trail");
+        const list = el3(doc, "ol", "knobs-wt-trail");
         for (const line of f.trail) {
           const i = line.indexOf(" · ");
-          const row = el2(doc, "li");
-          const words = el2(doc, "span", "knobs-wt-trail-text");
+          const row = el3(doc, "li");
+          const words = el3(doc, "span", "knobs-wt-trail-text");
           words.textContent = i < 0 ? line : line.slice(i + 3);
           row.append(words);
           if (i >= 0) {
-            const at = el2(doc, "span", "knobs-wt-trail-at");
+            const at = el3(doc, "span", "knobs-wt-trail-at");
             at.textContent = line.slice(0, i);
             row.append(at);
           }
           list.append(row);
         }
-        discs.push(disclosure(a, { label: "Context", count: f.trail.length, content: list }));
+        discs.push(disclosure(a, { label: "Context", content: list }));
       }
       li.append(a);
     }
@@ -20522,11 +21800,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 = el2(doc, "div", "knobs-wt-layout");
-    const main = el2(doc, "div", "knobs-wt-main");
-    const flow = el2(doc, "div", "knobs-wt-flow");
-    const head = el2(doc, "header", "knobs-wt-head");
-    const h1 = el2(doc, "h1", "knobs-wt-title");
+    const layout = el3(doc, "div", "knobs-wt-layout");
+    const main = el3(doc, "div", "knobs-wt-main");
+    const flow = el3(doc, "div", "knobs-wt-flow");
+    const head = el3(doc, "header", "knobs-wt-head");
+    const h1 = el3(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
@@ -20534,13 +21812,13 @@ function walkthrough(container, options) {
     if (page.more)
       head.append(more(page.more));
     if (page.meta.length) {
-      const meta = el2(doc, "div", "knobs-wt-meta");
+      const meta = el3(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
-        const s = el2(doc, "span");
+        const s = el3(doc, "span");
         s.append(m.label);
-        const b = el2(doc, "b");
+        const b = el3(doc, "b");
         if (m.href) {
-          const a = el2(doc, "a");
+          const a = el3(doc, "a");
           a.href = m.href;
           a.target = "_blank";
           a.rel = "noreferrer";
@@ -20556,16 +21834,14 @@ function walkthrough(container, options) {
     flow.append(head);
     let feedEl = null;
     if (page.feed.length) {
-      feedEl = el2(doc, "section", "knobs-wt-feed");
+      feedEl = el3(doc, "section", "knobs-wt-feed");
       feedEl.id = "wt-latest";
       feedEl.setAttribute("aria-label", "Updates and answers");
-      const fh = el2(doc, "header", "knobs-wt-feed-head");
-      const h = el2(doc, "h2", "knobs-wt-feed-title");
+      const fh = el3(doc, "header", "knobs-wt-feed-head");
+      const h = el3(doc, "h2", "knobs-wt-feed-title");
       h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
-      const n = el2(doc, "span", "knobs-wt-feed-count");
-      n.textContent = String(page.feed.length);
-      fh.append(h, n);
-      const list = el2(doc, "ol", "knobs-wt-feed-list");
+      fh.append(h);
+      const list = el3(doc, "ol", "knobs-wt-feed-list");
       const now = Date.now();
       for (const f of page.feed)
         list.append(feedItem(f, now));
@@ -20575,21 +21851,21 @@ function walkthrough(container, options) {
     let rail = null;
     count = fill = tocEl = null;
     if (options.rail !== false) {
-      rail = el2(doc, "aside", "knobs-wt-rail");
+      rail = el3(doc, "aside", "knobs-wt-rail");
       rail.setAttribute("aria-label", "Contents");
-      tocEl = el2(doc, "nav", "knobs-wt-toc");
+      tocEl = el3(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
       if (feedEl) {
-        const group = el2(doc, "div", "knobs-wt-toc-group");
+        const group = el3(doc, "div", "knobs-wt-toc-group");
         const target = feedEl;
         group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
         tocEl.append(group);
       }
       if (review) {
-        const progress = el2(doc, "div", "knobs-wt-progress");
-        count = el2(doc, "div", "knobs-wt-count");
-        const meter = el2(doc, "div", "knobs-wt-bar");
-        fill = el2(doc, "div", "knobs-wt-fill");
+        const progress = el3(doc, "div", "knobs-wt-progress");
+        count = el3(doc, "div", "knobs-wt-count");
+        const meter = el3(doc, "div", "knobs-wt-bar");
+        fill = el3(doc, "div", "knobs-wt-fill");
         meter.append(fill);
         progress.append(count, meter);
         rail.append(progress);
@@ -20598,15 +21874,15 @@ function walkthrough(container, options) {
       if (review)
         rail.append(actions(true));
       if (review && options.keys !== false) {
-        const keys = el2(doc, "div", "knobs-wt-keys");
+        const keys = el3(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
       }
     }
     for (const section of page.sections) {
-      const sec = el2(doc, "section", "knobs-wt-section");
+      const sec = el3(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
-      const sh = el2(doc, "header", "knobs-wt-shead");
+      const sh = el3(doc, "header", "knobs-wt-shead");
       const status = review ? section.status : undefined;
       if (section.kicker || section.link || status) {
         const meta = metaLine("knobs-wt-kicker");
@@ -20620,10 +21896,10 @@ function walkthrough(container, options) {
         }
         sh.append(meta);
       }
-      const h2 = el2(doc, "h2", "knobs-wt-heading");
+      const h2 = el3(doc, "h2", "knobs-wt-heading");
       h2.innerHTML = inlineMarkdown(section.title);
       sh.append(h2);
-      const intro = el2(doc, "div", "knobs-wt-sintro");
+      const intro = el3(doc, "div", "knobs-wt-sintro");
       intro.append(sh);
       if (section.summary)
         intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
@@ -20632,7 +21908,7 @@ function walkthrough(container, options) {
       sec.append(intro);
       let group = null;
       if (tocEl) {
-        group = el2(doc, "div", "knobs-wt-toc-group");
+        group = el3(doc, "div", "knobs-wt-toc-group");
         const first = section.steps[0]?.key;
         group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
         tocEl.append(group);
@@ -20674,8 +21950,8 @@ function walkthrough(container, options) {
     }));
   };
   const more = (text) => {
-    const box = el2(doc, "div", "knobs-wt-more");
-    const body = el2(doc, "div", "knobs-wt-more-text");
+    const box = el3(doc, "div", "knobs-wt-more");
+    const body = el3(doc, "div", "knobs-wt-more-text");
     for (const para of text.split(/\n\s*\n/))
       if (para.trim())
         body.append(prose2(doc, "p", "", para.trim()));
@@ -20683,24 +21959,25 @@ function walkthrough(container, options) {
     return box;
   };
   const tocRow = (label, sub, run, section) => {
-    const b = el2(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
+    const b = el3(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
     b.type = "button";
     if (section)
       b.dataset.section = section;
-    const t = el2(doc, "span", "knobs-wt-toc-label");
+    const t = el3(doc, "span", "knobs-wt-toc-label");
     t.textContent = label;
-    const e = el2(doc, "span", "knobs-wt-toc-end");
     b.title = label;
-    b.append(t, e);
+    b.append(t);
+    if (review)
+      b.append(el3(doc, "span", "knobs-wt-toc-end"));
     b.addEventListener("mousedown", (ev) => ev.preventDefault());
     b.addEventListener("click", run);
     tocRows.push(b);
     return b;
   };
   const actions = (rail) => {
-    const row = el2(doc, "div", "knobs-wt-actions");
+    const row = el3(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
-      const b = el2(doc, "button", "knobs-wt-btn");
+      const b = el3(doc, "button", "knobs-wt-btn");
       b.type = "button";
       b.textContent = text;
       if (primary)
@@ -20738,13 +22015,13 @@ function walkthrough(container, options) {
     }
   };
   const stepView = (step, group) => {
-    const card = el2(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
+    const card = el3(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
     card.setAttribute("aria-label", plainMarkdown(step.title));
-    const head = el2(doc, "header", "knobs-wt-step-head");
-    const h3 = el2(doc, "h3", "knobs-wt-stepTitle");
+    const head = el3(doc, "header", "knobs-wt-step-head");
+    const h3 = el3(doc, "h3", "knobs-wt-stepTitle");
     h3.innerHTML = inlineMarkdown(step.title);
     head.append(h3);
     if (step.caption)
@@ -20756,7 +22033,7 @@ function walkthrough(container, options) {
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
-      media = el2(doc, "div", "knobs-wt-media");
+      media = el3(doc, "div", "knobs-wt-media");
       media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
       for (const m of step.media)
         slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
@@ -20776,7 +22053,7 @@ function walkthrough(container, options) {
       });
       media ??= taste.element;
     }
-    const notes = el2(doc, "div", "knobs-wt-notes");
+    const notes = el3(doc, "div", "knobs-wt-notes");
     if (review)
       card.append(notes);
     card.addEventListener("focusin", () => {
@@ -20790,7 +22067,7 @@ function walkthrough(container, options) {
     if (group) {
       toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
       if (review) {
-        glyph = el2(doc, "span", "knobs-wt-toc-glyph");
+        glyph = el3(doc, "span", "knobs-wt-toc-glyph");
         toc.querySelector(".knobs-wt-toc-end").append(glyph);
       }
       group.append(toc);
@@ -20864,6 +22141,10 @@ function walkthrough(container, options) {
         claim();
       return;
     }
+    if (key === "a" && !e.shiftKey && root.querySelector(".knobs-wt-anno")) {
+      claim();
+      return setAnnotations(root, !annotationsOn(root));
+    }
     if (key === "n" && noteMode !== "hidden") {
       claim();
       bar.setOpen(true, true);
@@ -20962,7 +22243,7 @@ function walkthrough(container, options) {
 }
 
 // src/ui/solid.ts
-var follow = (read, apply) => {
+var follow2 = (read, apply) => {
   const changes = propChanges(untrack(read));
   createEffect(() => {
     const changed = changes(read());
@@ -21010,7 +22291,7 @@ function Tree(props) {
     }
   }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({ items: props.items, filter: props.filter, selection: props.selection }), (c) => {
+  follow2(() => ({ items: props.items, filter: props.filter, selection: props.selection }), (c) => {
     if ("items" in c)
       t.update(c.items);
     if ("filter" in c)
@@ -21046,7 +22327,7 @@ function CodeDiff(props) {
     onViewed: props.onViewed && ((viewed, file) => props.onViewed?.(viewed, file))
   }));
   untrack(() => props.onReady?.(d));
-  follow(diffProps(props), (c) => {
+  follow2(diffProps(props), (c) => {
     if (c.height)
       host.style.height = c.height === "auto" ? "" : "100%";
     d.update(c);
@@ -21069,7 +22350,7 @@ function DiffReview(props) {
     onViewed: (viewed, file) => props.onViewed?.(viewed, file)
   }));
   untrack(() => props.onReady?.(r));
-  follow(diffProps(props), (c) => {
+  follow2(diffProps(props), (c) => {
     if (c.height)
       host.style.height = c.height === "auto" ? "" : "100%";
     r.update(c);
@@ -21091,7 +22372,7 @@ function Timeline(props) {
     onCross: (m) => props.onCross?.(m)
   }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({
+  follow2(() => ({
     duration: props.duration,
     fps: props.fps,
     units: props.units,
@@ -21120,7 +22401,7 @@ function Compare(props) {
     onView: (view) => props.onView?.(view)
   }));
   untrack(() => props.onReady?.(c));
-  follow(() => ({
+  follow2(() => ({
     before: props.before,
     after: props.after,
     mode: props.mode,
@@ -21143,7 +22424,7 @@ function CompareStrip(props) {
   host.style.height = "100%";
   const s = untrack(() => compareStrip(host, { ...props, onPick: (time) => props.onPick?.(time) }));
   untrack(() => props.onReady?.(s));
-  follow(() => ({ before: props.before.src, after: props.after.src }), (changed) => s.update({
+  follow2(() => ({ before: props.before.src, after: props.after.src }), (changed) => s.update({
     ..."before" in changed ? { before: props.before } : {},
     ..."after" in changed ? { after: props.after } : {}
   }));
@@ -21163,7 +22444,7 @@ function Bento(props) {
     onActive: (id) => props.onActive?.(id)
   }));
   untrack(() => props.onReady?.(b));
-  follow(() => ({ items: props.items, picks: props.picks }), (c) => {
+  follow2(() => ({ items: props.items, picks: props.picks }), (c) => {
     if ("items" in c)
       b.update(c.items);
     if (c.picks)
@@ -21185,7 +22466,7 @@ function Activity(props) {
     onPlay: props.onPlay && ((id, event) => props.onPlay?.(id, event))
   }));
   untrack(() => props.onReady?.(a));
-  follow(() => ({ events: props.events, newest: props.newest, selected: props.selected }), (c) => {
+  follow2(() => ({ events: props.events, newest: props.newest, selected: props.selected }), (c) => {
     if (c.events || c.newest)
       a.update({ events: c.events, newest: c.newest });
     if (c.selected !== undefined && c.selected !== a.selected)
@@ -21214,7 +22495,7 @@ function OptionPicker(props) {
     }
   }));
   untrack(() => props.onReady?.(p));
-  follow(() => ({ options: props.options, selected: props.selected, chosen: props.chosen }), (c) => {
+  follow2(() => ({ options: props.options, selected: props.selected, chosen: props.chosen }), (c) => {
     if ("options" in c)
       p.set(c.options);
     if (c.selected != null)
@@ -21231,7 +22512,7 @@ function Walkthrough(props) {
   const host = document.createElement("div");
   const w = untrack(() => walkthrough(host, { ...props, onFeedback: (feedback) => props.onFeedback?.(feedback) }));
   untrack(() => props.onReady?.(w));
-  follow(() => ({ doc: props.doc }), (c) => c.doc && w.set(c.doc));
+  follow2(() => ({ doc: props.doc }), (c) => c.doc && w.set(c.doc));
   onCleanup(() => w.dispose());
   return host;
 }
@@ -21241,7 +22522,7 @@ function TasteTest(props) {
   const host = document.createElement("div");
   const t = untrack(() => tasteTest(host, { ...props, onPick: (id) => props.onPick?.(id) }));
   untrack(() => props.onReady?.(t));
-  follow(() => ({ picked: props.picked }), (c) => ("picked" in c) && t.pick(c.picked ?? null));
+  follow2(() => ({ picked: props.picked }), (c) => ("picked" in c) && t.pick(c.picked ?? null));
   onCleanup(() => t.dispose());
   return host;
 }