@kitlangton/knobs 0.4.0-next.16 → 0.4.0-next.17

package/dist/review.js

@@ -629,6 +629,14 @@ var init_schema = __esm(() => {
       doc: "Panel and card radius, concentric with controls.",
       deprecated: ["--k-panel-radius", "--ku-panel-radius"]
     },
+    {
+      name: "radius-frame",
+      tier: "semantic",
+      type: "length",
+      group: "Shape",
+      source: css("calc(var(--k-radius) + min(var(--k-radius) * 999, var(--_k-pad) + 1px))"),
+      doc: "A tuning panel's outer corners: its cards' radius plus its padding and border, so the cards, the preset strip and the focus lens inside run concentric. Squares when --k-radius is 0."
+    },
     {
       name: "round",
       tier: "semantic",
@@ -2253,7 +2261,6 @@ var compareCss = `
 :where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_ku-on-media) 16%,transparent);color:var(--_ku-on-media);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);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
-.knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
 .knobs-cmp-timeline-host{flex:none;min-height:0}
 /* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */
 .knobs-ui.knobs-cmp-strip{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
@@ -2273,6 +2280,9 @@ var playerCss = `
 .knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
   opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
 .knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+/* Mid-scrub, the cached frame under the hand, over the video until it lands. */
+.knobs-player-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
+.knobs-player-preview[hidden]{display:none}
 .knobs-player-line{flex:none;min-height:0}
 /* The timeline's own stylesheet is look.ts's; what the player's row and every timeline share
    about the hand is set here, after it. No hand cursor anywhere (the arrow, or a resize where it
@@ -2566,7 +2576,16 @@ var init_glide = __esm(() => {
     "border-subtle",
     "bg-page"
   ];
-  LENGTH_TOKENS = ["pad", "inset", "row", "gap", "radius", "radius-panel", "font-size"];
+  LENGTH_TOKENS = [
+    "pad",
+    "inset",
+    "row",
+    "gap",
+    "radius",
+    "radius-panel",
+    "radius-frame",
+    "font-size"
+  ];
   NUMBER_TOKENS = ["weight-label", "blur", "glow", "glass", "glass-tone"];
   ANIMATED = [...COLOR_TOKENS, ...LENGTH_TOKENS, ...NUMBER_TOKENS, "width"];
   TOKEN_TRANSITIONS = ANIMATED.map((t) => `--kt-${t} var(--k-token-t)`).join(",");
@@ -3343,12 +3362,24 @@ function createRegistry(doc) {
       return;
     if (e.metaKey || e.ctrlKey || e.altKey || e.key !== PAGE_HINT_KEY)
       return;
-    if (isTyping(e.target) || !wide())
+    if (isTyping(e.target) || !wide(e.target))
       return;
     if (registry.start())
       e.preventDefault();
   };
-  const wide = () => listening && (sources.length > 1 || [...doc.querySelectorAll("[data-hint]")].some((el) => !el.closest(".knobs-panel")));
+  const hostHints = () => [...doc.querySelectorAll("[data-hint]")].some((el) => !el.closest(".knobs-panel"));
+  const wide = (target) => {
+    if (!listening)
+      return false;
+    if (sources.some((s) => s.listen && s.rank >= 2) || hostHints())
+      return true;
+    if (sources.length < 2)
+      return false;
+    if (target === undefined)
+      return true;
+    const piece = target?.closest?.(".knobs-ui,.knobs-pane-body");
+    return Boolean(piece?.classList.contains("knobs-ui"));
+  };
   const relisten = () => {
     const next = sources.some((s) => s.listen);
     if (next === listening)
@@ -4227,6 +4258,31 @@ function seeked(s, current, fps) {
     return { state: { seeking: true, pending: null }, apply: s.pending, settled: false };
   return { state: SEEK_IDLE, apply: null, settled: true };
 }
+function releaseSeek(current, t, fps, duration) {
+  const at = seekTime(t, fps, duration);
+  return sameFrame(current, at, fps) ? null : at;
+}
+function stallGuard(timers, onStall, ms = SEEK_STALL_MS) {
+  let id = 0;
+  const clear = () => {
+    if (id)
+      timers.clearTimeout(id);
+    id = 0;
+  };
+  return {
+    arm() {
+      clear();
+      id = timers.setTimeout(() => {
+        id = 0;
+        onStall();
+      }, ms);
+    },
+    clear,
+    get armed() {
+      return id !== 0;
+    }
+  };
+}
 function letterbox(media, box) {
   if (media.w <= 0 || media.h <= 0 || box.w <= 0 || box.h <= 0)
     return box;
@@ -4347,7 +4403,7 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO2, 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) => {
+var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO2, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, SEEK_STALL_MS = 2500, 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) => {
@@ -4594,6 +4650,25 @@ var init_compare_mp4 = __esm(() => {
 });
 
 // src/ui/compare-frames.ts
+function scrubCaching(option, win) {
+  if (option === false)
+    return false;
+  if (option === true)
+    return true;
+  const net = win?.navigator?.connection;
+  if (net?.saveData)
+    return false;
+  return !win?.matchMedia?.("(prefers-reduced-data: reduce)").matches;
+}
+function proxyStride(bytes, count, total, budget) {
+  if (count <= 0 || total <= 0)
+    return 1;
+  const each = bytes / count;
+  let stride = 1;
+  while (total / stride * each > budget && stride < total)
+    stride *= 2;
+  return stride;
+}
 function gridPoints(total, count = GRID) {
   if (total <= 0)
     return [];
@@ -4624,6 +4699,24 @@ function nearestKey(keys, frame, within = Infinity) {
   }
   return best !== null && bestD <= within ? best : null;
 }
+function claim(core) {
+  if (!round) {
+    const r = new Set;
+    round = r;
+    queueMicrotask(() => {
+      for (const c of actives)
+        if (!r.has(c)) {
+          c.active = false;
+          c.dropFull();
+        }
+      actives = r;
+      round = null;
+    });
+  }
+  round.add(core);
+  actives.add(core);
+  core.active = true;
+}
 function pump(win) {
   if (running)
     return;
@@ -4631,12 +4724,14 @@ function pump(win) {
   (async () => {
     try {
       for (;; ) {
-        const order = [...cores.values()].filter((c) => c.shown > 0 || c.active).sort((a, b) => Number(b.active) - Number(a.active));
+        const order = [...cores.values()].filter((c) => c.shown > 0 || c.active).sort((a, b) => Number(b.active) - Number(a.active) || a.ran - b.ran);
         let unit = null;
         for (const c of order) {
           unit = c.work();
-          if (unit)
+          if (unit) {
+            c.ran = ++turns;
             break;
+          }
         }
         if (!unit)
           break;
@@ -4666,12 +4761,99 @@ async function toBitmap(doc, source, w, h, cap) {
     return createImageBitmap(c);
   }
 }
+function holdEncoders() {
+  encoderUsers++;
+}
+function dropEncoders() {
+  encoderUsers = Math.max(0, encoderUsers - 1);
+  if (encoderUsers > 0)
+    return;
+  endEncoders("released");
+  encoders = undefined;
+}
+function encodersOf(host) {
+  if (encoders !== undefined)
+    return encoders;
+  encoders = null;
+  const W = host.Worker;
+  if (!W || !host.OffscreenCanvas)
+    return null;
+  const workers = [];
+  let url = null;
+  try {
+    url = host.URL.createObjectURL(new host.Blob([ENCODER], { type: "text/javascript" }));
+    for (let i = 0;i < ENCODERS; i++)
+      workers.push(new W(url));
+  } catch {
+    for (const w of workers)
+      w.terminate();
+    return null;
+  } finally {
+    if (url)
+      host.URL.revokeObjectURL(url);
+  }
+  const pool = { workers, waiting: new Map, next: 0 };
+  for (const w of workers) {
+    w.onmessage = (e) => {
+      const job = pool.waiting.get(e.data.id);
+      pool.waiting.delete(e.data.id);
+      if (e.data.blob)
+        job?.done(e.data.blob);
+      else
+        job?.fail(new Error(e.data.error));
+    };
+    w.onerror = () => {
+      if (encoders !== pool)
+        return;
+      endEncoders("encoder");
+      encoders = null;
+    };
+  }
+  encoders = pool;
+  return pool;
+}
+function encodeOn(pool, bitmap, quality) {
+  const id = pool.next++;
+  const worker = pool.workers[id % pool.workers.length];
+  return new Promise((done, fail) => {
+    pool.waiting.set(id, { done, fail });
+    try {
+      worker.postMessage({ id, bitmap, quality }, [bitmap]);
+    } catch (err) {
+      pool.waiting.delete(id);
+      bitmap.close();
+      fail(err);
+    }
+  });
+}
+async function toProxy(doc, source, w, h) {
+  const bm = await toBitmap(doc, source, w, h, PROXY.size);
+  const pool = encodersOf(doc.defaultView);
+  if (pool)
+    return encodeOn(pool, bm, PROXY.quality);
+  try {
+    const Off = doc.defaultView?.OffscreenCanvas;
+    if (Off) {
+      const c = new Off(bm.width, bm.height);
+      c.getContext("2d").drawImage(bm, 0, 0);
+      return await c.convertToBlob({ type: "image/jpeg", quality: PROXY.quality });
+    }
+    const c = doc.createElement("canvas");
+    c.width = bm.width;
+    c.height = bm.height;
+    c.getContext("2d").drawImage(bm, 0, 0);
+    return await new Promise((done, fail) => c.toBlob((b) => b ? done(b) : fail(new Error("toBlob")), "image/jpeg", PROXY.quality));
+  } finally {
+    bm.close();
+  }
+}
 function acquireFrames(doc, src, fps) {
   const key = `${fps}|${src}`;
   let core = cores.get(key);
   if (!core) {
     core = makeCore(doc, key, src, fps);
     cores.set(key, core);
+    holdEncoders();
   }
   core.refs++;
   return core.cache;
@@ -4692,6 +4874,71 @@ function makeCore(doc, key, src, fps) {
   let generation = 0;
   let tick = 0;
   let notifyRaf = 0;
+  const proxies = new Map;
+  let proxyBytes = 0;
+  let stride = 1;
+  const decoded = new Map;
+  const decoding = new Set;
+  let aim = null;
+  let lastAsked = null;
+  const storeProxy = (frame, blob) => {
+    if (disposed || frame % stride || proxies.has(frame))
+      return;
+    proxies.set(frame, blob);
+    proxyBytes += blob.size;
+    const next = proxyStride(proxyBytes, proxies.size, total, PROXY.budget);
+    if (next <= stride)
+      return;
+    stride = next;
+    for (const [f, b] of proxies)
+      if (f % stride) {
+        proxies.delete(f);
+        proxyBytes -= b.size;
+      }
+  };
+  const proxyNear = (frame) => {
+    const at = Math.round(frame / stride) * stride;
+    let best = null;
+    for (const f of [at, at - stride, at + stride])
+      if (proxies.has(f) && (best === null || Math.abs(f - frame) < Math.abs(best - frame)))
+        best = f;
+    return best;
+  };
+  const proxyTodo = () => {
+    const out = [];
+    for (let f = 0;f < total; f += stride)
+      if (!proxies.has(f))
+        out.push(f);
+    return out;
+  };
+  const decodeProxy = (frame) => {
+    if (frame === null || decoded.has(frame) || decoding.has(frame) || disposed)
+      return;
+    const blob = proxies.get(frame);
+    if (!blob)
+      return;
+    decoding.add(frame);
+    createImageBitmap(blob).then((bitmap) => {
+      decoding.delete(frame);
+      if (disposed)
+        return bitmap.close();
+      decoded.set(frame, { bitmap, used: ++tick });
+      if (decoded.size > PROXY.decoded) {
+        const [oldest] = [...decoded].sort((a, b) => a[1].used - b[1].used);
+        if (oldest && oldest[0] !== frame) {
+          oldest[1].bitmap.close();
+          decoded.delete(oldest[0]);
+        }
+      }
+      for (const f of listeners)
+        f();
+    }, () => decoding.delete(frame));
+  };
+  const dropDecoded = () => {
+    for (const d of decoded.values())
+      d.bitmap.close();
+    decoded.clear();
+  };
   const notify = () => {
     if (notifyRaf)
       return;
@@ -4822,18 +5069,50 @@ function makeCore(doc, key, src, fps) {
       return;
     const forFocus = todo[0].kind === "focus";
     const gen = generation;
-    const stale = () => forFocus && gen !== generation;
+    await decodeRun(t, data, run, forFocus ? () => gen !== generation : () => false, (vf, f) => {
+      const want = plan.get(f);
+      if (!want)
+        return null;
+      plan.delete(f);
+      return toBitmap(doc, vf, vf.displayWidth, vf.displayHeight, want.full ? FULL : PREVIEW).then((bm) => store(f, bm, want.full, want.kind));
+    });
+  };
+  const proxyUnit = async () => {
+    const todo = proxyTodo();
+    if (!todo.length || !track || !buf)
+      return;
+    const runs = decodeRuns(track.samples, new Set(todo), (pts) => frameOf(pts, fps));
+    const at = aim ?? focusAt ?? 0;
+    let run = runs[0];
+    let best = Number.POSITIVE_INFINITY;
+    for (const r of runs) {
+      const d = Math.min(...r.frames.map((f) => Math.abs(f - at)));
+      if (d < best) {
+        best = d;
+        run = r;
+      }
+    }
+    if (!run)
+      return;
+    const gen = generation;
+    let made = 0;
+    await decodeRun(track, buf, run, () => gen !== generation || made >= PROXY.turn, (vf, f) => {
+      if (f % stride || proxies.has(f) || f >= total)
+        return null;
+      made++;
+      return toProxy(doc, vf, vf.displayWidth, vf.displayHeight).then((b) => storeProxy(f, b));
+    });
+  };
+  const decodeRun = async (t, data, run, stale, take) => {
     let pending = 0;
     let failed = false;
     const decoder = new VideoDecoder({
       output: (vf) => {
-        const f = frameOf(vf.timestamp / 1e6, fps);
-        const want = plan.get(f);
-        if (!want || stale() || disposed)
+        const work = stale() || disposed ? null : take(vf, frameOf(vf.timestamp / 1e6, fps));
+        if (!work)
           return vf.close();
-        plan.delete(f);
         pending++;
-        toBitmap(doc, vf, vf.displayWidth, vf.displayHeight, want.full ? FULL : PREVIEW).then((bm) => store(f, bm, want.full, want.kind)).catch(() => {}).finally(() => {
+        work.catch(() => {}).finally(() => {
           vf.close();
           pending--;
         });
@@ -4947,6 +5226,25 @@ function makeCore(doc, key, src, fps) {
       return points.some((p) => p.frame + p.tolerance >= f && !covered(p));
     }, 6000, false);
   };
+  const videoProxyUnit = async () => {
+    const v = sampler;
+    const todo = proxyTodo();
+    if (!v || !todo.length || !v.videoWidth)
+      return;
+    const at = aim ?? focusAt ?? 0;
+    const first = todo.find((f) => f >= at) ?? todo[0];
+    const grab = async (f) => {
+      if (f % stride || proxies.has(f) || f >= total)
+        return;
+      storeProxy(f, await toProxy(doc, v, v.videoWidth, v.videoHeight));
+    };
+    await seekTo(v, (first + 0.5) / fps);
+    await grab(frameOf(v.currentTime, fps));
+    await playThrough(v, 1, async (f) => {
+      await grab(f);
+      return proxyTodo().length > 0;
+    }, 4000, true);
+  };
   const cache = {
     src,
     get backend() {
@@ -4955,29 +5253,56 @@ function makeCore(doc, key, src, fps) {
     get size() {
       return entries.size;
     },
-    nearest(frame, within = Infinity) {
+    get proxies() {
+      return { count: proxies.size, stride, bytes: proxyBytes };
+    },
+    nearest(frame, within = Infinity, decode = false) {
       const k = nearestKey(entries.keys(), frame, within);
+      const kd = nearestKey(decoded.keys(), frame, within);
+      const dk = k === null ? Number.POSITIVE_INFINITY : Math.abs(k - frame);
+      const dd = kd === null ? Number.POSITIVE_INFINITY : Math.abs(kd - frame);
+      if (decode) {
+        const p = proxyNear(frame);
+        if (p !== null && Math.abs(p - frame) < Math.min(dk, dd))
+          decodeProxy(p);
+        const ahead = aheadOf(frame, lastAsked, total);
+        if (ahead !== null)
+          decodeProxy(proxyNear(ahead));
+        lastAsked = frame;
+      }
+      if (kd !== null && (dd < dk || dd === dk && !entries.get(k)?.full)) {
+        const d = decoded.get(kd);
+        d.used = ++tick;
+        return { frame: kd, bitmap: d.bitmap, full: false };
+      }
       if (k === null)
         return null;
       const e = entries.get(k);
       e.used = ++tick;
       return { frame: k, bitmap: e.bitmap, full: e.full };
     },
+    covers(frame) {
+      if (entries.has(frame) || decoded.has(frame))
+        return true;
+      const p = proxyNear(frame);
+      return p !== null && Math.abs(p - frame) <= stride / 2;
+    },
     focus(frame) {
-      if (active !== core) {
-        active?.dropFull();
-        if (active)
-          active.active = false;
-        active = core;
-        core.active = true;
-      }
+      claim(core);
       const moved = focusAt === null || Math.abs(frame - focusAt) > FOCUS_RADIUS;
       focusAt = frame;
+      aim = null;
       if (moved)
         generation++;
       start();
       pump(win);
     },
+    follow(frame) {
+      claim(core);
+      aim = frame;
+      start();
+      pump(win);
+    },
     want(points) {
       wants = points;
       if (core.shown > 0)
@@ -5015,12 +5340,15 @@ function makeCore(doc, key, src, fps) {
     refs: 0,
     shown: 0,
     active: false,
+    ran: 0,
     work() {
       if (disposed || backend === "pending")
         return null;
-      if (!missing().length)
-        return null;
-      return backend === "webcodecs" ? decodeUnit() : videoUnit();
+      if (missing().length)
+        return backend === "webcodecs" ? decodeUnit() : videoUnit();
+      if (proxyTodo().length)
+        return backend === "webcodecs" ? proxyUnit() : videoProxyUnit();
+      return null;
     },
     dropFull() {
       for (const [f, e] of entries)
@@ -5029,8 +5357,13 @@ function makeCore(doc, key, src, fps) {
           entries.delete(f);
         }
       focusAt = null;
+      aim = null;
+      lastAsked = null;
+      dropDecoded();
     },
     dispose() {
+      if (disposed)
+        return;
       disposed = true;
       generation++;
       if (notifyRaf)
@@ -5038,6 +5371,8 @@ function makeCore(doc, key, src, fps) {
       for (const e of entries.values())
         e.bitmap.close();
       entries.clear();
+      dropDecoded();
+      proxies.clear();
       listeners.clear();
       if (sampler) {
         sampler.removeAttribute("src");
@@ -5045,24 +5380,45 @@ function makeCore(doc, key, src, fps) {
       }
       buf = null;
       track = null;
-      if (active === core)
-        active = null;
+      actives.delete(core);
+      round?.delete(core);
       cores.delete(key);
+      dropEncoders();
     }
   };
   return core;
 }
-var FOCUS_RADIUS = 6, GRID = 48, SEEN = 12, WANTED = 48, PREVIEW = 384, FULL = 1280, cores, active = null, running = false, idle = (win) => new Promise((done) => {
+var FOCUS_RADIUS = 6, GRID = 48, SEEN = 12, WANTED = 48, PREVIEW = 384, FULL = 1280, PROXY, aheadOf = (frame, last, total) => last === null || last === frame ? null : Math.min(Math.max(0, total - 1), Math.max(0, frame + (frame - last))), cores, actives, round = null, running = false, turns = 0, idle = (win) => new Promise((done) => {
   const ric = win.requestIdleCallback;
   if (ric)
     ric(() => done(), { timeout: 60 });
   else
     win.setTimeout(done, 4);
-}), sleep = (win, ms) => new Promise((done) => win.setTimeout(done, ms));
+}), sleep = (win, ms) => new Promise((done) => win.setTimeout(done, ms)), ENCODER = `onmessage=async(e)=>{const{id,bitmap,quality}=e.data;try{const c=new OffscreenCanvas(bitmap.width,bitmap.height);c.getContext("2d").drawImage(bitmap,0,0);bitmap.close();postMessage({id,blob:await c.convertToBlob({type:"image/jpeg",quality})})}catch(err){postMessage({id,error:String(err)})}}`, ENCODERS = 2, encoders, encoderUsers = 0, endEncoders = (why) => {
+  const pool = encoders;
+  if (!pool)
+    return;
+  for (const w of pool.workers) {
+    w.onmessage = null;
+    w.onerror = null;
+    w.terminate();
+  }
+  for (const j of pool.waiting.values())
+    j.fail(new Error(why));
+  pool.waiting.clear();
+};
 var init_compare_frames = __esm(() => {
   init_compare_model();
   init_compare_mp4();
+  PROXY = {
+    size: 960,
+    quality: 0.8,
+    budget: 48 * 2 ** 20,
+    decoded: 8,
+    turn: 90
+  };
   cores = new Map;
+  actives = new Set;
 });
 
 // src/ui/compare-gpu.ts
@@ -5425,589 +5781,65 @@ var init_rgba = __esm(() => {
   cache = new Map;
 });
 
-// src/ui/timeline-model.ts
-function timeLabel(t, units, fps, step = 1) {
-  if (units === "frames")
-    return String(toFrame(t, fps));
-  const sign = t < 0 ? "-" : "";
-  const a = Math.abs(t);
-  if (a >= 60 || step >= 60 && a > 0) {
-    const s = Math.round(a);
-    const h = Math.floor(s / 3600);
-    const m = Math.floor(s % 3600 / 60);
-    const sec = String(s % 60).padStart(2, "0");
-    return `${sign}${h ? `${h}:${String(m).padStart(2, "0")}` : m}:${sec}`;
+// src/ui/overlay-model.ts
+function place(o) {
+  const { anchor: a, size, view: v } = o;
+  const offset = o.offset ?? 6;
+  const margin = o.margin ?? 8;
+  const [want, align = "center"] = (o.placement ?? "bottom").split("-");
+  const room = (s) => s === "top" ? a.y - v.y : s === "bottom" ? v.y + v.h - (a.y + a.h) : s === "left" ? a.x - v.x : v.x + v.w - (a.x + a.w);
+  const need = (s) => (s === "top" || s === "bottom" ? size.h : size.w) + offset + margin;
+  let side = want;
+  if (room(want) < need(want) && room(opposite[want]) > room(want))
+    side = opposite[want];
+  const vertical = side === "top" || side === "bottom";
+  let x;
+  let y;
+  if (vertical) {
+    y = side === "bottom" ? a.y + a.h + offset : a.y - offset - size.h;
+    x = align === "start" ? a.x : align === "end" ? a.x + a.w - size.w : a.x + (a.w - size.w) / 2;
+    x = clamp(x, v.x + margin, v.x + v.w - margin - size.w);
+  } else {
+    x = side === "right" ? a.x + a.w + offset : a.x - offset - size.w;
+    y = align === "start" ? a.y : align === "end" ? a.y + a.h - size.h : a.y + (a.h - size.h) / 2;
+    y = clamp(y, v.y + margin, v.y + v.h - margin - size.h);
   }
-  const decimals = step < 0.1 ? 2 : step < 1 ? 1 : 0;
-  return `${sign}${Number(a.toFixed(decimals))}s`;
+  const origin = vertical ? { x: clamp(a.x + a.w / 2 - x, 0, size.w), y: side === "bottom" ? 0 : size.h } : { x: side === "right" ? 0 : size.w, y: clamp(a.y + a.h / 2 - y, 0, size.h) };
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    placement: align === "center" ? side : `${side}-${align}`,
+    origin
+  };
 }
-function rulerTicks(view, width, o) {
-  const units = o.units ?? "seconds";
-  const fps = o.fps;
-  const pxPerSec = width / Math.max(0.000000001, view.span);
-  const minGap = o.minGap ?? 72;
-  const steps = units === "frames" ? FRAME_STEPS.map((f) => f / fps) : SECOND_STEPS;
-  const step = steps.find((s) => s * pxPerSec >= minGap) ?? steps[steps.length - 1];
-  const frame = 1 / fps;
-  let minor = 0;
-  for (const div of [10, 5, 4, 2]) {
-    const m = step / div;
-    if (m * pxPerSec < 7)
-      continue;
-    if (units === "frames" && Math.abs(m * fps - Math.round(m * fps)) > 0.000001)
-      continue;
-    minor = m;
-    break;
-  }
-  if (frame * pxPerSec >= (o.frameGap ?? 6))
-    minor = Math.min(frame, step);
-  const end = view.start + view.span;
-  const major = [];
-  const first = Math.ceil(view.start / step - 0.000000001);
-  for (let i = first;i * step <= end + 0.000000001; i++) {
-    const t = round(i * step);
-    major.push({ t, label: timeLabel(t, units, fps, step) });
-  }
-  const minors = [];
-  if (minor > 0) {
-    const firstMinor = Math.ceil(view.start / minor - 0.000000001);
-    for (let i = firstMinor;i * minor <= end + 0.000000001; i++) {
-      const t = i * minor;
-      if (Math.abs(t / step - Math.round(t / step)) > 0.000001)
-        minors.push(round(t));
-    }
+function stepItem(count, from, by, ok) {
+  for (let k = 1;k <= count; k++) {
+    const i = (((from < 0 ? by > 0 ? -1 : 0 : from) + by * k) % count + count) % count;
+    if (ok(i))
+      return i;
   }
-  return { major, minor: minors, step };
-}
-function clampView(view, duration, o = {}) {
-  const pad = o.pad ?? 0.04;
-  const maxSpan = duration * (1 + pad * 2);
-  const span = Math.min(maxSpan, Math.max(o.minSpan ?? 0.05, view.span));
-  const lo = -duration * pad;
-  const hi = duration * (1 + pad) - span;
-  const start = hi < lo ? (lo + hi) / 2 : Math.min(hi, Math.max(lo, view.start));
-  return { start, span };
-}
-function zoomView(view, factor, at) {
-  const span = view.span / factor;
-  const k = (at - view.start) / view.span;
-  return { start: at - k * span, span };
-}
-function followView(view, t, margin = 0.08) {
-  const m = view.span * margin;
-  if (t < view.start + m)
-    return { ...view, start: t - m };
-  if (t > view.start + view.span - m)
-    return { ...view, start: t - view.span + m };
-  return view;
+  return from;
 }
-function magnet(raw, stops, pxPerSec, radius = 10, stick = 0.3) {
-  let best = null;
-  let bestPx = Number.POSITIVE_INFINITY;
-  for (const s of stops) {
-    const px = Math.abs(raw - s) * pxPerSec;
-    if (px < bestPx) {
-      bestPx = px;
-      best = s;
-    }
+function matchItem(labels, from, typed) {
+  const q = typed.toLowerCase();
+  if (!q || !labels.length)
+    return from;
+  const same = q.length > 1 && [...q].every((c) => c === q[0]);
+  const word = same ? q[0] : q;
+  const start = q.length > 1 && !same ? Math.max(0, from) : from + 1;
+  for (let k = 0;k < labels.length; k++) {
+    const i = ((start + k) % labels.length + labels.length) % labels.length;
+    if (labels[i]?.toLowerCase().startsWith(word))
+      return i;
   }
-  if (best === null || bestPx >= radius)
-    return { t: raw, stop: null };
-  const u = bestPx / radius;
-  const pulled = best + Math.sign(raw - best) * (u * u * radius) / pxPerSec;
-  return { t: pulled, stop: u < stick ? best : null };
+  return from;
 }
-function scrubTime(raw, o) {
-  const clamped = Math.min(o.duration, Math.max(0, raw));
-  const m = o.stops?.length ? magnet(clamped, o.stops, o.pxPerSec, o.radius) : { t: clamped, stop: null };
-  const t = m.stop ?? (o.frames === false ? m.t : frameTime(m.t, o.fps));
-  return { t: Math.min(o.duration, Math.max(0, t)), shown: m.stop ?? m.t, stop: m.stop };
-}
-function adjacentMarker(markers, t, dir, fps) {
-  const eps = 0.5 / fps;
-  const sorted = [...markers].sort((a, b) => a.time - b.time);
-  if (dir > 0)
-    return sorted.find((m) => m.time > t + eps) ?? null;
-  return [...sorted].reverse().find((m) => m.time < t - eps) ?? null;
-}
-function advance(t, dt, o) {
-  const lo = o.loop ? o.loop.start : 0;
-  const hi = o.loop ? o.loop.end : o.duration;
-  let next = t + dt;
-  if (hi - lo <= 0.000001)
-    return { t: lo, ended: true, wrapped: false };
-  if (next < hi)
-    return { t: next, ended: false, wrapped: false };
-  if (o.loop || o.repeat) {
-    next = lo + (next - lo) % (hi - lo);
-    return { t: next, ended: false, wrapped: true };
-  }
-  return { t: hi, ended: true, wrapped: false };
-}
-function moveHead(head, t, motion, catching, minGap = 0) {
-  if (motion === "jump" && Math.abs(t - head.x) > minGap)
-    return { x: head.x, target: t, catching: true };
-  if (catching)
-    return { x: head.x + (t - head.target), target: t, catching: true };
-  return { x: t, target: t, catching: false };
-}
-function currentMarker(markers, t, fps) {
-  let best = null;
-  for (const m of markers)
-    if (m.time <= t + 0.5 / fps && (!best || m.time >= best.time))
-      best = m;
-  return best;
-}
-function minutes(t) {
-  const s = Math.max(0, Math.floor(t + 0.000001));
-  const h = Math.floor(s / 3600);
-  const m = Math.floor(s % 3600 / 60);
-  const ss = String(s % 60).padStart(2, "0");
-  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
-}
-function chapterBounds(times, duration) {
-  const inside = times.filter((t) => t > 0.000001 && t < duration - 0.000001);
-  return [0, ...[...new Set(inside)].sort((a, b) => a - b), duration];
-}
-var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6, CATCH_UP;
-var init_timeline_model = __esm(() => {
-  SECOND_STEPS = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600];
-  FRAME_STEPS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 9000, 18000];
-  CATCH_UP = { duration: 0.15, bounce: 0 };
-});
-
-// src/ui/compare-strip.ts
-function compareStrip(container, options) {
-  const doc = container.ownerDocument;
-  const win = doc.defaultView;
-  const timeline = options.timeline;
-  const fps = () => options.fps ?? timeline.fps;
-  const align = options.align ?? "track";
-  const threshold = options.threshold ?? 4 / 255;
-  const root = doc.createElement("div");
-  root.className = "knobs-cmp-strip";
-  root.setAttribute("role", "img");
-  root.setAttribute("aria-label", "Frame strip: Before over After, with how much they differ");
-  applyLook2(root, options);
-  const canvas = doc.createElement("canvas");
-  canvas.setAttribute("aria-hidden", "true");
-  root.append(canvas);
-  container.append(root);
-  const diffs = new Map;
-  const pairDiffs = new Map;
-  let disposed = false;
-  let near = false;
-  let onScreen = false;
-  const makeSide = (source) => ({
-    source,
-    kind: mediaKind(source.src, source.kind),
-    frames: null,
-    still: null,
-    seen: false
-  });
-  let sides = [makeSide(options.before), makeSide(options.after)];
-  const offs = new Map;
-  const load = (s) => {
-    if (s.frames || s.still)
-      return;
-    if (s.kind === "video") {
-      s.frames = acquireFrames(doc, s.source.src, fps());
-      offs.set(s, s.frames.listen(schedule));
-      if (onScreen) {
-        s.frames.visible(true);
-        s.seen = true;
-      }
-    } else {
-      const img = doc.createElement("img");
-      img.crossOrigin = "anonymous";
-      img.decoding = "async";
-      img.addEventListener("load", () => {
-        pairDiffs.clear();
-        schedule();
-      });
-      img.src = s.source.src;
-      s.still = img;
-    }
-  };
-  const unload = (s) => {
-    offs.get(s)?.();
-    offs.delete(s);
-    if (s.frames) {
-      if (s.seen)
-        s.frames.visible(false);
-      s.frames.release();
-    }
-    s.frames = null;
-    s.seen = false;
-    if (s.still)
-      s.still.removeAttribute("src");
-    s.still = null;
-  };
-  let w = 1;
-  let h = 1;
-  let geo = { x: 0, w: 1 };
-  const rowH = () => Math.max(4, (h - BAR - GAP * 2) / 2);
-  const aspectOf = (s) => {
-    if (s.still?.naturalWidth)
-      return s.still.naturalWidth / s.still.naturalHeight;
-    const c = s.frames?.nearest(0);
-    return c ? c.bitmap.width / c.bitmap.height : 0;
-  };
-  const columns = () => stripColumns(timeline.view, geo.w, {
-    duration: timeline.duration,
-    fps: fps(),
-    minWidth: rowH() * Math.max(16 / 9, ...sides.map(aspectOf)) + GAP
-  });
-  const measure = () => {
-    const r = root.getBoundingClientRect();
-    w = Math.max(1, r.width);
-    h = Math.max(1, r.height);
-    geo = { x: 0, w };
-    if (align === "track") {
-      const track = timeline.element.querySelector(".knobs-tl-track");
-      const t = track?.getBoundingClientRect();
-      if (t && t.width > 0)
-        geo = { x: t.left - r.left, w: t.width };
-    }
-    readColors();
-    schedule();
-  };
-  const ask = (cols) => {
-    const points = cols.map((c) => ({ frame: c.frame, tolerance: Math.floor((c.to - c.from) / 2) }));
-    for (const s of sides)
-      s.frames?.want(points);
-  };
-  const picOf = (s, c) => {
-    if (s.still?.naturalWidth)
-      return { img: s.still, w: s.still.naturalWidth, h: s.still.naturalHeight, key: "still" };
-    const f = s.frames?.nearest(c.frame, Math.max(1, c.to - c.from));
-    return f ? { img: f.bitmap, w: f.bitmap.width, h: f.bitmap.height, key: String(f.frame) } : null;
-  };
-  const probe = doc.createElement("canvas");
-  probe.width = DIFF.w;
-  probe.height = DIFF.h;
-  const probeCtx = probe.getContext("2d", { willReadFrequently: true });
-  const differ = (a, b) => {
-    if (!probeCtx)
-      return;
-    try {
-      probeCtx.drawImage(a.img, 0, 0, DIFF.w, DIFF.h);
-      const pa = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
-      probeCtx.drawImage(b.img, 0, 0, DIFF.w, DIFF.h);
-      const pb = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
-      return meanAbsDiff(pa, pb);
-    } catch {
-      return;
-    }
-  };
-  let colors = { surface: "", accent: "", diff: "", wash: "" };
-  const rgba = (raw, fallback) => {
-    const [r, g, b, a] = parseCssColor(raw, fallback);
-    return `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a})`;
-  };
-  const readColors = () => {
-    const cs = win.getComputedStyle(root);
-    colors = {
-      surface: rgba(tokenCss(cs, "--kv-fill", ""), [1, 1, 1, 0.055]),
-      accent: rgba(tokenCss(cs, "--kv-accent", ""), [1, 1, 1, 1]),
-      diff: rgba(tokenCss(cs, "--_ku-cmp-diff", ""), [0.49, 0.81, 0.61, 1]),
-      wash: rgba(tokenCss(cs, "--kv-fill-selected", ""), [1, 1, 1, 0.11])
-    };
-  };
-  let hover = null;
-  let raf = 0;
-  let asked = "";
-  function schedule() {
-    if (!raf && !disposed)
-      raf = win.requestAnimationFrame(draw);
-  }
-  const draw = () => {
-    raf = 0;
-    if (!near)
-      return;
-    const dpr = Math.min(3, Math.max(1, win.devicePixelRatio || 1));
-    const cw = Math.round(w * dpr);
-    const ch = Math.round(h * dpr);
-    if (canvas.width !== cw || canvas.height !== ch) {
-      canvas.width = cw;
-      canvas.height = ch;
-    }
-    const ctx = canvas.getContext("2d");
-    if (!ctx)
-      return;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, w, h);
-    const cols = columns();
-    const key = cols.map((c) => c.frame).join(",");
-    if (key !== asked) {
-      asked = key;
-      ask(cols);
-    }
-    const rh = rowH();
-    const radius = 3;
-    let budget = DIFFS_PER_DRAW;
-    let more = false;
-    const ds = cols.map((c) => {
-      const a = picOf(sides[0], c);
-      const b = picOf(sides[1], c);
-      if (!a || !b)
-        return;
-      const k = `${a.key}|${b.key}`;
-      if (!pairDiffs.has(k)) {
-        if (budget-- <= 0) {
-          more = true;
-          return;
-        }
-        pairDiffs.set(k, differ(a, b));
-      }
-      const d = pairDiffs.get(k);
-      if (d !== undefined)
-        diffs.set(c.frame, d);
-      return d;
-    });
-    const max = Math.max(0.02, ...ds.map((d) => d ?? 0));
-    const peaks = new Set(stripPeaks(ds, { threshold }));
-    cols.forEach((c, i) => {
-      const x = geo.x + c.x + GAP / 2;
-      const cwid = Math.max(1, c.w - GAP);
-      if (x + cwid < 0 || x > w)
-        return;
-      for (const row of [0, 1]) {
-        const y = row * (rh + GAP);
-        const pic = picOf(sides[row], c);
-        ctx.save();
-        ctx.beginPath();
-        ctx.roundRect(x, y, cwid, rh, radius);
-        ctx.fillStyle = colors.surface;
-        ctx.fill();
-        if (pic) {
-          ctx.clip();
-          const r = letterbox({ w: pic.w, h: pic.h }, { x, y, w: cwid, h: rh });
-          ctx.drawImage(pic.img, r.x, r.y, r.w, r.h);
-        }
-        ctx.restore();
-      }
-      if (hover === i) {
-        ctx.fillStyle = colors.wash;
-        ctx.beginPath();
-        ctx.roundRect(x, 0, cwid, rh * 2 + GAP, radius);
-        ctx.fill();
-      }
-      const d = ds[i];
-      if (d !== undefined && d > 0) {
-        const bh = Math.max(1, Math.min(1, d / max) * BAR);
-        ctx.globalAlpha = peaks.has(i) ? 1 : 0.42;
-        ctx.fillStyle = colors.diff;
-        ctx.beginPath();
-        ctx.roundRect(x, h - bh, cwid, bh, Math.min(1.5, bh / 2));
-        ctx.fill();
-        ctx.globalAlpha = 1;
-      }
-    });
-    const v = timeline.view;
-    const px = geo.x + (timeline.time - v.start) / v.span * geo.w;
-    if (px >= -1 && px <= w + 1) {
-      ctx.fillStyle = colors.accent;
-      ctx.fillRect(Math.round(px * dpr) / dpr - 0.75, 0, 1.5, h);
-    }
-    if (more)
-      schedule();
-  };
-  const timeAt = (clientX) => {
-    const r = root.getBoundingClientRect();
-    const v = timeline.view;
-    const t = v.start + (clientX - r.left - geo.x) / geo.w * v.span;
-    return Math.min(timeline.duration, Math.max(0, frameTime(t, fps())));
-  };
-  const columnAt = (clientX) => {
-    const x = clientX - root.getBoundingClientRect().left - geo.x;
-    const i = columns().findIndex((c) => x >= c.x && x < c.x + c.w);
-    return i < 0 ? null : i;
-  };
-  let dragging = false;
-  const pick = (clientX) => {
-    const t = timeAt(clientX);
-    timeline.seek(t);
-    options.onPick?.(t);
-  };
-  root.addEventListener("pointerdown", (e) => {
-    if (e.button !== 0)
-      return;
-    dragging = true;
-    root.setPointerCapture(e.pointerId);
-    const host = root.closest(".knobs-compare");
-    if (host)
-      host.focus({ preventScroll: true });
-    else
-      timeline.focus();
-    if (timeline.playing)
-      timeline.pause();
-    pick(e.clientX);
-    e.preventDefault();
-  });
-  root.addEventListener("pointermove", (e) => {
-    if (dragging)
-      pick(e.clientX);
-    const i = columnAt(e.clientX);
-    if (i !== hover) {
-      hover = i;
-      schedule();
-    }
-  });
-  const end = () => {
-    dragging = false;
-  };
-  root.addEventListener("pointerup", end);
-  root.addEventListener("pointercancel", end);
-  root.addEventListener("lostpointercapture", end);
-  root.addEventListener("pointerleave", () => {
-    if (hover === null)
-      return;
-    hover = null;
-    schedule();
-  });
-  const unlisten = timeline.listen({ onSeek: schedule, onView: schedule });
-  const ro = new win.ResizeObserver(measure);
-  ro.observe(root);
-  const track = timeline.element.querySelector(".knobs-tl-track");
-  if (track)
-    ro.observe(track);
-  root.addEventListener("knobs-restyle", measure);
-  const setOnScreen = (on) => {
-    onScreen = on;
-    for (const s of sides) {
-      if (!s.frames || s.seen === on)
-        continue;
-      s.seen = on;
-      s.frames.visible(on);
-    }
-  };
-  const setNear = (on) => {
-    near = on;
-    if (on) {
-      for (const s of sides)
-        load(s);
-      schedule();
-    } else
-      for (const s of sides)
-        unload(s);
-  };
-  const IO = win.IntersectionObserver;
-  const nearIo = IO ? new IO((e) => setNear(e.at(-1).isIntersecting), { rootMargin: "100% 0px" }) : null;
-  const screenIo = IO ? new IO((e) => setOnScreen(e.at(-1).isIntersecting)) : null;
-  measure();
-  if (nearIo && screenIo) {
-    nearIo.observe(root);
-    screenIo.observe(root);
-  } else {
-    setNear(true);
-    setOnScreen(true);
-  }
-  return {
-    element: root,
-    diffs,
-    update(next) {
-      const was = sides;
-      sides = [
-        next.before ? makeSide(next.before) : was[0],
-        next.after ? makeSide(next.after) : was[1]
-      ];
-      for (const s of was)
-        if (!sides.includes(s))
-          unload(s);
-      diffs.clear();
-      pairDiffs.clear();
-      asked = "";
-      if (near)
-        for (const s of sides)
-          load(s);
-      if (onScreen)
-        setOnScreen(true);
-      schedule();
-    },
-    dispose() {
-      disposed = true;
-      if (raf)
-        win.cancelAnimationFrame(raf);
-      unlisten();
-      ro.disconnect();
-      nearIo?.disconnect();
-      screenIo?.disconnect();
-      for (const s of sides)
-        unload(s);
-      root.remove();
-    }
-  };
-}
-var BAR = 7, GAP = 2, DIFF, DIFFS_PER_DRAW = 6;
-var init_compare_strip = __esm(() => {
-  init_compare_frames();
-  init_compare_model();
-  init_look();
-  init_rgba();
-  init_timeline_model();
-  DIFF = { w: 32, h: 18 };
-});
-
-// src/ui/overlay-model.ts
-function place(o) {
-  const { anchor: a, size, view: v } = o;
-  const offset = o.offset ?? 6;
-  const margin = o.margin ?? 8;
-  const [want, align = "center"] = (o.placement ?? "bottom").split("-");
-  const room = (s) => s === "top" ? a.y - v.y : s === "bottom" ? v.y + v.h - (a.y + a.h) : s === "left" ? a.x - v.x : v.x + v.w - (a.x + a.w);
-  const need = (s) => (s === "top" || s === "bottom" ? size.h : size.w) + offset + margin;
-  let side = want;
-  if (room(want) < need(want) && room(opposite[want]) > room(want))
-    side = opposite[want];
-  const vertical = side === "top" || side === "bottom";
-  let x;
-  let y;
-  if (vertical) {
-    y = side === "bottom" ? a.y + a.h + offset : a.y - offset - size.h;
-    x = align === "start" ? a.x : align === "end" ? a.x + a.w - size.w : a.x + (a.w - size.w) / 2;
-    x = clamp(x, v.x + margin, v.x + v.w - margin - size.w);
-  } else {
-    x = side === "right" ? a.x + a.w + offset : a.x - offset - size.w;
-    y = align === "start" ? a.y : align === "end" ? a.y + a.h - size.h : a.y + (a.h - size.h) / 2;
-    y = clamp(y, v.y + margin, v.y + v.h - margin - size.h);
-  }
-  const origin = vertical ? { x: clamp(a.x + a.w / 2 - x, 0, size.w), y: side === "bottom" ? 0 : size.h } : { x: side === "right" ? 0 : size.w, y: clamp(a.y + a.h / 2 - y, 0, size.h) };
-  return {
-    x: Math.round(x),
-    y: Math.round(y),
-    placement: align === "center" ? side : `${side}-${align}`,
-    origin
-  };
-}
-function stepItem(count, from, by, ok) {
-  for (let k = 1;k <= count; k++) {
-    const i = (((from < 0 ? by > 0 ? -1 : 0 : from) + by * k) % count + count) % count;
-    if (ok(i))
-      return i;
-  }
-  return from;
-}
-function matchItem(labels, from, typed) {
-  const q = typed.toLowerCase();
-  if (!q || !labels.length)
-    return from;
-  const same = q.length > 1 && [...q].every((c) => c === q[0]);
-  const word = same ? q[0] : q;
-  const start = q.length > 1 && !same ? Math.max(0, from) : from + 1;
-  for (let k = 0;k < labels.length; k++) {
-    const i = ((start + k) % labels.length + labels.length) % labels.length;
-    if (labels[i]?.toLowerCase().startsWith(word))
-      return i;
-  }
-  return from;
-}
-function inTriangle(p, a, b, c) {
-  const s = (p1, p2, p3) => (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
-  const d1 = s(p, a, b);
-  const d2 = s(p, b, c);
-  const d3 = s(p, c, a);
-  return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
+function inTriangle(p, a, b, c) {
+  const s = (p1, p2, p3) => (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+  const d1 = s(p, a, b);
+  const d2 = s(p, b, c);
+  const d3 = s(p, c, a);
+  return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
 }
 function safeTriangle(from, sub) {
   const right = sub.x >= from.x;
@@ -6440,6 +6272,157 @@ function softClamp(x, min, max, knee = 12) {
 }
 var init_split_model = () => {};
 
+// src/ui/timeline-model.ts
+function timeLabel(t, units, fps, step = 1) {
+  if (units === "frames")
+    return String(toFrame(t, fps));
+  const sign = t < 0 ? "-" : "";
+  const a = Math.abs(t);
+  if (a >= 60 || step >= 60 && a > 0) {
+    const s = Math.round(a);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor(s % 3600 / 60);
+    const sec = String(s % 60).padStart(2, "0");
+    return `${sign}${h ? `${h}:${String(m).padStart(2, "0")}` : m}:${sec}`;
+  }
+  const decimals = step < 0.1 ? 2 : step < 1 ? 1 : 0;
+  return `${sign}${Number(a.toFixed(decimals))}s`;
+}
+function rulerTicks(view, width, o) {
+  const units = o.units ?? "seconds";
+  const fps = o.fps;
+  const pxPerSec = width / Math.max(0.000000001, view.span);
+  const minGap = o.minGap ?? 72;
+  const steps = units === "frames" ? FRAME_STEPS.map((f) => f / fps) : SECOND_STEPS;
+  const step = steps.find((s) => s * pxPerSec >= minGap) ?? steps[steps.length - 1];
+  const frame = 1 / fps;
+  let minor = 0;
+  for (const div of [10, 5, 4, 2]) {
+    const m = step / div;
+    if (m * pxPerSec < 7)
+      continue;
+    if (units === "frames" && Math.abs(m * fps - Math.round(m * fps)) > 0.000001)
+      continue;
+    minor = m;
+    break;
+  }
+  if (frame * pxPerSec >= (o.frameGap ?? 6))
+    minor = Math.min(frame, step);
+  const end = view.start + view.span;
+  const major = [];
+  const first = Math.ceil(view.start / step - 0.000000001);
+  for (let i = first;i * step <= end + 0.000000001; i++) {
+    const t = round2(i * step);
+    major.push({ t, label: timeLabel(t, units, fps, step) });
+  }
+  const minors = [];
+  if (minor > 0) {
+    const firstMinor = Math.ceil(view.start / minor - 0.000000001);
+    for (let i = firstMinor;i * minor <= end + 0.000000001; i++) {
+      const t = i * minor;
+      if (Math.abs(t / step - Math.round(t / step)) > 0.000001)
+        minors.push(round2(t));
+    }
+  }
+  return { major, minor: minors, step };
+}
+function clampView(view, duration, o = {}) {
+  const pad = o.pad ?? 0.04;
+  const maxSpan = duration * (1 + pad * 2);
+  const span = Math.min(maxSpan, Math.max(o.minSpan ?? 0.05, view.span));
+  const lo = -duration * pad;
+  const hi = duration * (1 + pad) - span;
+  const start = hi < lo ? (lo + hi) / 2 : Math.min(hi, Math.max(lo, view.start));
+  return { start, span };
+}
+function zoomView(view, factor, at) {
+  const span = view.span / factor;
+  const k = (at - view.start) / view.span;
+  return { start: at - k * span, span };
+}
+function followView(view, t, margin = 0.08) {
+  const m = view.span * margin;
+  if (t < view.start + m)
+    return { ...view, start: t - m };
+  if (t > view.start + view.span - m)
+    return { ...view, start: t - view.span + m };
+  return view;
+}
+function magnet(raw, stops, pxPerSec, radius = 10, stick = 0.3) {
+  let best = null;
+  let bestPx = Number.POSITIVE_INFINITY;
+  for (const s of stops) {
+    const px = Math.abs(raw - s) * pxPerSec;
+    if (px < bestPx) {
+      bestPx = px;
+      best = s;
+    }
+  }
+  if (best === null || bestPx >= radius)
+    return { t: raw, stop: null };
+  const u = bestPx / radius;
+  const pulled = best + Math.sign(raw - best) * (u * u * radius) / pxPerSec;
+  return { t: pulled, stop: u < stick ? best : null };
+}
+function scrubTime(raw, o) {
+  const clamped = Math.min(o.duration, Math.max(0, raw));
+  const m = o.stops?.length ? magnet(clamped, o.stops, o.pxPerSec, o.radius) : { t: clamped, stop: null };
+  const t = m.stop ?? (o.frames === false ? m.t : frameTime(m.t, o.fps));
+  return { t: Math.min(o.duration, Math.max(0, t)), shown: m.stop ?? m.t, stop: m.stop };
+}
+function adjacentMarker(markers, t, dir, fps) {
+  const eps = 0.5 / fps;
+  const sorted = [...markers].sort((a, b) => a.time - b.time);
+  if (dir > 0)
+    return sorted.find((m) => m.time > t + eps) ?? null;
+  return [...sorted].reverse().find((m) => m.time < t - eps) ?? null;
+}
+function advance(t, dt, o) {
+  const lo = o.loop ? o.loop.start : 0;
+  const hi = o.loop ? o.loop.end : o.duration;
+  let next = t + dt;
+  if (hi - lo <= 0.000001)
+    return { t: lo, ended: true, wrapped: false };
+  if (next < hi)
+    return { t: next, ended: false, wrapped: false };
+  if (o.loop || o.repeat) {
+    next = lo + (next - lo) % (hi - lo);
+    return { t: next, ended: false, wrapped: true };
+  }
+  return { t: hi, ended: true, wrapped: false };
+}
+function moveHead(head, t, motion, catching, minGap = 0) {
+  if (motion === "jump" && Math.abs(t - head.x) > minGap)
+    return { x: head.x, target: t, catching: true };
+  if (catching)
+    return { x: head.x + (t - head.target), target: t, catching: true };
+  return { x: t, target: t, catching: false };
+}
+function currentMarker(markers, t, fps) {
+  let best = null;
+  for (const m of markers)
+    if (m.time <= t + 0.5 / fps && (!best || m.time >= best.time))
+      best = m;
+  return best;
+}
+function minutes(t) {
+  const s = Math.max(0, Math.floor(t + 0.000001));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function chapterBounds(times, duration) {
+  const inside = times.filter((t) => t > 0.000001 && t < duration - 0.000001);
+  return [0, ...[...new Set(inside)].sort((a, b) => a - b), duration];
+}
+var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round2 = (t) => Math.round(t * 1e6) / 1e6, CATCH_UP;
+var init_timeline_model = __esm(() => {
+  SECOND_STEPS = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600];
+  FRAME_STEPS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 9000, 18000];
+  CATCH_UP = { duration: 0.15, bounce: 0 };
+});
+
 // src/ui/timeline.ts
 function timeline(container, options) {
   const doc = container.ownerDocument;
@@ -7552,6 +7535,7 @@ var init_timeline = __esm(() => {
 function compare(container, options) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
+  const caching = scrubCaching(options.scrubCache, win);
   const look = {
     ...options.preset ? { preset: options.preset } : {},
     ...options.theme ? { theme: options.theme } : {},
@@ -7668,15 +7652,9 @@ function compare(container, options) {
   const note = el("div", "knobs-cmp-note");
   stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note);
   root.append(bar, stage);
-  const wantsStrip = options.strip === true;
   let tl = bound;
   let ownTimeline = false;
-  let stripHost = null;
-  if (wantsStrip) {
-    stripHost = el("div", "knobs-cmp-strip-host");
-    root.append(stripHost);
-  }
-  if (!tl && (options.timeline === true || wantsStrip)) {
+  if (!tl && options.timeline === true) {
     const host = el("div", "knobs-cmp-timeline-host");
     root.append(host);
     tl = timeline(host, {
@@ -7824,7 +7802,7 @@ function compare(container, options) {
       s.frames.keep(at, v, v.videoWidth, v.videoHeight);
       return;
     }
-    const c = s.frames.nearest(want);
+    const c = s.frames.nearest(want, Number.POSITIVE_INFINITY, true);
     if (c && Math.abs(c.frame - want) < Math.abs(at - want))
       showCached(s, c);
     else
@@ -7836,13 +7814,23 @@ function compare(container, options) {
     const want = wantOf(s);
     if (s.shown && !s.shown.cached && s.shown.frame === want)
       return;
-    const c = s.frames.nearest(want);
+    const c = s.frames.nearest(want, Number.POSITIVE_INFINITY, true);
     if (!c)
       return;
     const was = s.shown ? Math.abs(s.shown.frame - want) : Number.POSITIVE_INFINITY;
     if (Math.abs(c.frame - want) < was)
       showCached(s, c);
   };
+  const giveUp = (s) => {
+    s.seek = SEEK_IDLE;
+    if (!s.loaded || disposed)
+      return;
+    if (s.el.readyState >= 2)
+      return showVideo(s);
+    s.shown = null;
+    setCached(s, false);
+    requestDraw();
+  };
   const makeSide = (index, source) => {
     const kind = mediaKind(source.src, source.kind);
     const media = el(kind === "video" ? "video" : "img", "knobs-cmp-media");
@@ -7874,7 +7862,9 @@ function compare(container, options) {
       frameAt: 0,
       misses: 0,
       failed: false,
+      stall: stallGuard(win, () => giveUp(side)),
       stop: () => {
+        side.stall.clear();
         for (const f of offs)
           f();
       }
@@ -7884,6 +7874,10 @@ function compare(container, options) {
         return;
       side.failed = true;
       note.textContent = `Couldn't load ${labelOf(index)}`;
+      side.stall.clear();
+      side.seek = SEEK_IDLE;
+      side.shown = null;
+      setCached(side, false);
     };
     if (media instanceof HTMLVideoElement) {
       const v = media;
@@ -7914,6 +7908,8 @@ function compare(container, options) {
         side.seek = step.state;
         if (step.apply !== null)
           seekVideo(side, v, step.apply);
+        else
+          side.stall.clear();
         pushFrame(side);
       });
       on("error", fail);
@@ -7946,7 +7942,7 @@ function compare(container, options) {
     s.loaded = true;
     s.failed = false;
     s.el.src = s.source.src;
-    if (s.kind === "video") {
+    if (s.kind === "video" && caching) {
       s.frames = acquireFrames(doc, s.source.src, fps());
       s.unlisten = s.frames.listen(() => refreshCached(s));
       if (onScreen) {
@@ -7963,6 +7959,7 @@ function compare(container, options) {
     if (s.el instanceof HTMLVideoElement)
       s.el.load();
     s.seek = SEEK_IDLE;
+    s.stall.clear();
     s.shown = null;
     setCached(s, false);
     s.unlisten?.();
@@ -8086,6 +8083,7 @@ function compare(container, options) {
       v.fastSeek(t);
     else
       v.currentTime = t;
+    s.stall.arm();
   };
   const showFrame = (t, used) => {
     for (const s of sides) {
@@ -8097,14 +8095,21 @@ function compare(container, options) {
         v.playbackRate = 1;
       }
       const want = Math.min(frameOf(t, fps()), lastFrame(v.duration, fps()));
-      const step = requestSeek(s.seek, frameMidpoint(want, fps(), v.duration), v.currentTime, fps());
-      s.seek = step.state;
-      if (step.apply !== null)
-        seekVideo(s, v, step.apply);
-      else if (step.settled && (s.shown?.cached || s.shown?.frame !== want))
-        pushFrame(s);
-      if (used)
-        s.frames?.focus(want);
+      if (used) {
+        if (scrubbing)
+          s.frames?.follow(want);
+        else
+          s.frames?.focus(want);
+      }
+      if (!(scrubbing && s.frames?.covers(want))) {
+        const at = frameMidpoint(want, fps(), v.duration);
+        const step = requestSeek(s.seek, at, v.currentTime, fps());
+        s.seek = step.state;
+        if (step.apply !== null)
+          seekVideo(s, v, step.apply);
+        else if (step.settled && (s.shown?.cached || s.shown?.frame !== want))
+          pushFrame(s);
+      }
       refreshCached(s);
     }
     requestDraw();
@@ -8735,7 +8740,7 @@ function compare(container, options) {
           holdLoupe(true);
         return;
       case "l":
-        if (e.altKey || e.shiftKey)
+        if (e.altKey || e.shiftKey || loopBtn.hidden)
           return;
         claim();
         return api.setLoop(!loopNow());
@@ -8758,6 +8763,9 @@ function compare(container, options) {
         return glideZoom(ZOOM_FIT);
     }
   };
+  const syncLoopButton = () => {
+    loopBtn.hidden = !sides.some((s) => s.kind === "video");
+  };
   const replace = (index, source) => {
     const old = sides[index];
     old.stop();
@@ -8766,6 +8774,7 @@ function compare(container, options) {
     old.el.replaceWith(s.el);
     old.preview.replaceWith(s.preview);
     sides[index] = s;
+    syncLoopButton();
     note.textContent = "";
     setLabel(index, labelOf(index));
     if (near)
@@ -8780,6 +8789,7 @@ function compare(container, options) {
   stage.insertBefore(sides[0].preview, labels[0]);
   setLabel(0, labelOf(0));
   setLabel(1, labelOf(1));
+  syncLoopButton();
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
   const modePill = modeList.length > 1 ? selectionPill(modes, {
@@ -8858,7 +8868,7 @@ function compare(container, options) {
       label: MODE_LABEL[m].long,
       activate: () => setMode(m)
     })) : [],
-    { el: loopBtn, label: "Loop", activate: () => api.setLoop(!loopNow()) },
+    ...loopBtn.hidden ? [] : [{ el: loopBtn, label: "Loop", activate: () => api.setLoop(!loopNow()) }],
     ...loupeBtn.hidden ? [] : [{ el: loupeBtn, label: "Loupe", activate: () => setLoupe(!loupeOn) }],
     ...zoomed() ? [{ el: zoomReset, label: "Reset zoom", activate: () => api.setZoom(null) }] : [],
     ...mode === "wipe" ? [
@@ -8869,14 +8879,6 @@ function compare(container, options) {
       }
     ] : []
   ], { listen: false, rank: 1 });
-  const strip = wantsStrip && stripHost && tl ? compareStrip(stripHost, {
-    ...look,
-    before: options.before,
-    after: options.after,
-    timeline: tl,
-    ...fpsOpt ? { fps: fpsOpt } : {},
-    threshold
-  }) : null;
   const api = {
     element: root,
     get mode() {
@@ -8902,7 +8904,6 @@ function compare(container, options) {
       return renderer;
     },
     timeline: tl,
-    strip,
     get zoom() {
       return clampZoom(zoomNow());
     },
@@ -8924,8 +8925,6 @@ function compare(container, options) {
         replace(1, after);
       else if (next.after)
         setLabel(1, next.after.label ?? "After");
-      if (before || after)
-        strip?.update({ ...before ? { before } : {}, ...after ? { after } : {} });
       if (next.before || next.after)
         readColors();
       if (next.mode !== undefined)
@@ -8992,7 +8991,6 @@ function compare(container, options) {
         if (ownTimeline)
           tl.dispose();
       }
-      strip?.dispose();
       for (const s of sides) {
         s.stop();
         unloadSide(s);
@@ -9016,7 +9014,6 @@ var init_compare = __esm(() => {
   init_compare_frames();
   init_compare_gpu();
   init_compare_model();
-  init_compare_strip();
   init_icons();
   init_look();
   init_rgba();
@@ -9074,7 +9071,10 @@ function player(container, options) {
     track.src = options.captions;
     v.append(track);
   }
-  frame.append(v);
+  const preview = el("canvas", "knobs-player-preview");
+  preview.setAttribute("aria-hidden", "true");
+  preview.hidden = true;
+  frame.append(v, preview);
   const host = el("div", "knobs-player-line");
   root.append(frame, host);
   container.append(root);
@@ -9104,6 +9104,57 @@ function player(container, options) {
     else
       v.currentTime = t;
   };
+  const fps = options.fps ?? 30;
+  let frames = null;
+  let unlistenFrames = null;
+  let scrubbing = false;
+  let previewing = null;
+  const want = () => frameOf(tl.time, fps);
+  const emitFrame = (frame, source) => root.dispatchEvent(new CustomEvent("knobs-player-frame", { detail: { frame, source } }));
+  const drawPreview = (c) => {
+    if (preview.width !== c.bitmap.width || preview.height !== c.bitmap.height) {
+      preview.width = c.bitmap.width;
+      preview.height = c.bitmap.height;
+    }
+    preview.getContext("2d")?.drawImage(c.bitmap, 0, 0);
+    preview.hidden = false;
+    previewing = c.frame;
+    emitFrame(c.frame, "cache");
+  };
+  const hidePreview = () => {
+    if (previewing === null)
+      return;
+    previewing = null;
+    preview.hidden = true;
+  };
+  const showNearest = () => {
+    if (!frames || !scrubbing)
+      return;
+    const w = want();
+    const c = frames.nearest(w, Number.POSITIVE_INFINITY, true);
+    if (!c || c.frame === previewing)
+      return;
+    const shown = previewing ?? frameOf(v.currentTime, fps);
+    if (Math.abs(c.frame - w) < Math.abs(shown - w))
+      drawPreview(c);
+  };
+  const caching = scrubCaching(options.scrubCache, doc.defaultView);
+  const startFrames = () => {
+    if (frames || !caching)
+      return;
+    frames = acquireFrames(doc, options.src, fps);
+    frames.visible(true);
+    unlistenFrames = frames.listen(showNearest);
+  };
+  const stall = stallGuard(doc.defaultView, () => {
+    pending = null;
+    hidePreview();
+  });
+  const onError = () => {
+    stall.clear();
+    pending = null;
+    hidePreview();
+  };
   let reported = 0;
   const onSeeked = () => {
     if (pending !== null) {
@@ -9112,6 +9163,11 @@ function player(container, options) {
       v.currentTime = t;
       return;
     }
+    stall.clear();
+    const at = frameOf(v.currentTime, fps);
+    emitFrame(at, "video");
+    if (!scrubbing || previewing !== null && Math.abs(at - want()) <= Math.abs(previewing - want()))
+      hidePreview();
     if (!v.paused || tl.playing || Math.abs(v.currentTime - reported) < 0.1)
       return;
     reported = v.currentTime;
@@ -9127,6 +9183,7 @@ function player(container, options) {
   v.addEventListener("loadedmetadata", onMeta);
   v.addEventListener("loadeddata", onFrame);
   v.addEventListener("seeked", onSeeked);
+  v.addEventListener("error", onError);
   const unlisten = tl.listen({
     onSeek(t, source) {
       if (source === "play") {
@@ -9134,14 +9191,24 @@ function player(container, options) {
           v.currentTime = t;
         return;
       }
-      if (Math.abs(v.currentTime - t) < 1 / (options.fps ?? 30))
+      if (scrubbing && frames) {
+        frames.follow(want());
+        showNearest();
+        if (frames.covers(want()))
+          return;
+      }
+      if (sameFrame(v.currentTime, t, fps)) {
+        if (!scrubbing)
+          hidePreview();
         return;
+      }
       seekVideo(t);
     },
     onPlay(on) {
-      if (on)
+      if (on) {
+        hidePreview();
         v.play().catch(() => tl.pause());
-      else {
+      } else {
         v.pause();
         reported = tl.time;
       }
@@ -9149,8 +9216,22 @@ function player(container, options) {
       options.onPlay?.(on, tl.time);
     },
     onScrub(on) {
-      if (on)
+      scrubbing = on;
+      if (on) {
         v.pause();
+        startFrames();
+        return;
+      }
+      if (v.readyState < 1)
+        return hidePreview();
+      const at = releaseSeek(v.currentTime, tl.time, fps, v.duration);
+      if (at === null) {
+        pending = null;
+        if (!v.seeking)
+          return hidePreview();
+      } else
+        seekVideo(at);
+      stall.arm();
     }
   });
   tl.drive(() => {
@@ -9165,6 +9246,7 @@ function player(container, options) {
     tl.toggle();
   };
   frame.addEventListener("click", onClick);
+  root.addEventListener("pointerenter", startFrames);
   v.src = options.src;
   const api = {
     element: root,
@@ -9191,9 +9273,18 @@ function player(container, options) {
       tl.dispose();
       v.pause();
       frame.removeEventListener("click", onClick);
+      root.removeEventListener("pointerenter", startFrames);
+      unlistenFrames?.();
+      if (frames) {
+        frames.visible(false);
+        frames.release();
+        frames = null;
+      }
       v.removeEventListener("loadedmetadata", onMeta);
       v.removeEventListener("loadeddata", onFrame);
       v.removeEventListener("seeked", onSeeked);
+      v.removeEventListener("error", onError);
+      stall.clear();
       v.removeAttribute("src");
       v.load();
       root.remove();
@@ -9202,6 +9293,8 @@ function player(container, options) {
   return api;
 }
 var init_player = __esm(() => {
+  init_compare_frames();
+  init_compare_model();
   init_look();
   init_timeline();
 });
@@ -16121,9 +16214,8 @@ var walkthroughCss = `${foundationCss}
 .knobs-wt-slot .knobs-cmp-stage{border-radius:var(--kw-frame-r)}
 /* A compare is as tall as its two pictures side by side at this width, in every mode (Wipe fuses
    them at one side's size, so nothing grows or re-measures), plus its mode bar, the line and gaps
-   (92 px), and the frame strip with its gap (158 px). */
+   (92 px). */
 .knobs-wt-fit{width:100%;height:calc(100cqw / 2 / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
-.knobs-wt-fit[data-strip]{--kw-chrome:158px}
 .knobs-wt-fit[data-settled]{transition:height var(--k-wt-calm-ms,${calm.duration}ms) ${calm.easing}}
 .knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:var(--kw-frame-r);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
 .knobs-wt-frame>:is(video,img){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border:0}
@@ -16136,16 +16228,15 @@ var walkthroughCss = `${foundationCss}
 /* The diff inside it: its header row 28 high on the container's padding, a hairline under it, and
    no line of its own under the code (the container's ring closes it). */
 .knobs-wt-slot[data-kind="diff"] .knobs-ui.knobs-diff:not([data-on="pane"]){--kd-head:28px;--kd-x:0px}
-.knobs-wt-slot[data-kind="diff"] .knobs-ui.knobs-diff:not([data-on="pane"])::after{display:none}
-.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--_k-radius-panel);box-shadow:inset 0 0 0 1px var(--_k-border-subtle);color:var(--_k-fg);
+.knobs-wt-slot[data-kind="diff"] :is(.knobs-ui.knobs-diff:not([data-on="pane"]),.knobs-diff-review)::after{display:none}
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--kw-frame-r);background:var(--_k-fill);color:var(--_k-fg);
   font:var(--_k-type-label)/var(--_k-leading-body) var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
-.knobs-surface :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-surface .knobs-wt-slot[data-kind="diff"]>.knobs-wt-body{padding:0;border-radius:0;background:transparent;box-shadow: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)}
 .knobs-wt-out{color:var(--_k-fg-2)}
 .knobs-wt-metric{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
-.knobs-wt-mlabel{color:var(--_k-fg-2)}
 .knobs-wt-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--_k-space-sibling);font-feature-settings:var(--_kr-data)}
 .knobs-wt-mfrom{color:var(--_k-fg-3)}
 .knobs-wt-mto{font-size:var(--_k-type-title);line-height:var(--_k-leading-title);font-weight:var(--_k-weight-label)}
@@ -16164,6 +16255,9 @@ var walkthroughCss = `${foundationCss}
 .knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--_k-danger)}
 .knobs-wt-text{max-width:var(--kw-measure);color:var(--_k-fg-2)}
 .knobs-wt-hold{border-radius:var(--kw-frame-r);background:var(--_k-fill)}
+/* A diff holds its room with its own well's edge, no fill: the diff reads the colour behind it
+   as it mounts, and a loading fill there would stay under its code. */
+.knobs-wt-slot[data-kind="diff"]>.knobs-wt-hold{background:transparent}
 .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;
@@ -16413,8 +16507,6 @@ var side = (s, fallback) => ({
 async function mountCompare(host, m, look, alive, onEvent) {
   const doc = host.ownerDocument;
   const fit = div(doc, "knobs-wt-fit");
-  if (m.strip)
-    fit.dataset.strip = "";
   const { before, after } = m;
   const known = parseAspect(m.aspect);
   fit.style.setProperty("--kw-aspect", String(known ?? DEFAULT_ASPECT));
@@ -16441,7 +16533,6 @@ async function mountCompare(host, m, look, alive, onEvent) {
     timeline: mediaKind(before.src) === "video" || mediaKind(after.src) === "video",
     lazy: false,
     ...aspect ? { aspect } : {},
-    ...m.strip ? { strip: true } : {},
     onMode: (next) => {
       onEvent?.({ what: "mode", detail: next });
       const layer = marks?.element;
@@ -16503,11 +16594,11 @@ async function mountCompare(host, m, look, alive, onEvent) {
       pills?.sync();
       marking?.kick();
       if (source !== "play")
-        onEvent?.({ what: "seek", time: round2(time) });
+        onEvent?.({ what: "seek", time: round3(time) });
     },
     onPlay: (on) => {
       marking?.kick();
-      onEvent?.({ what: on ? "play" : "pause", time: round2(c.time) });
+      onEvent?.({ what: on ? "play" : "pause", time: round3(c.time) });
     }
   });
   requestAnimationFrame(() => requestAnimationFrame(() => fit.dataset.settled = ""));
@@ -16525,13 +16616,13 @@ async function mountCompare(host, m, look, alive, onEvent) {
       const zoom = zoomedIn(c.zoom) ? c.zoom : null;
       return {
         kind: "compare",
-        time: round2(c.time),
-        duration: round2(c.duration),
+        time: round3(c.time),
+        duration: round3(c.duration),
         playing: c.playing,
         mode: c.mode,
         ...pills?.current ? { chapter: pills.current.label } : {},
-        ...loop ? { loop: { start: round2(loop.start), end: round2(loop.end) } } : {},
-        ...zoom ? { zoom: { u: round2(zoom.u), v: round2(zoom.v), w: round2(zoom.w), h: round2(zoom.h) } } : {}
+        ...loop ? { loop: { start: round3(loop.start), end: round3(loop.end) } } : {},
+        ...zoom ? { zoom: { u: round3(zoom.u), v: round3(zoom.v), w: round3(zoom.w), h: round3(zoom.h) } } : {}
       };
     },
     dispose: () => {
@@ -16544,7 +16635,7 @@ async function mountCompare(host, m, look, alive, onEvent) {
     }
   };
 }
-var round2 = (v) => Math.round(v * 100) / 100;
+var round3 = (v) => Math.round(v * 100) / 100;
 var MARK_GLIDE = 450;
 var zoomedIn = (z) => z.w < 0.999 || z.h < 0.999;
 async function mountVideo(host, m, look, alive, onEvent) {
@@ -16571,12 +16662,12 @@ async function mountVideo(host, m, look, alive, onEvent) {
     } : {},
     onPlay: (on, time) => {
       marking?.kick();
-      onEvent?.({ what: on ? "play" : "pause", time: round2(time) });
+      onEvent?.({ what: on ? "play" : "pause", time: round3(time) });
     },
     onSeek: (time) => {
       pills?.sync();
       marking?.kick();
-      onEvent?.({ what: "seek", time: round2(time) });
+      onEvent?.({ what: "seek", time: round3(time) });
     }
   });
   const v = p.video;
@@ -16609,8 +16700,8 @@ async function mountVideo(host, m, look, alive, onEvent) {
     seekBy: (d) => p.seekBy(d),
     context: () => ({
       kind: "video",
-      time: round2(p.time),
-      ...p.duration ? { duration: round2(p.duration) } : {},
+      time: round3(p.time),
+      ...p.duration ? { duration: round3(p.duration) } : {},
       playing: p.playing,
       ...pills?.current ? { chapter: pills.current.label } : {}
     }),
@@ -16754,8 +16845,6 @@ var fmt = (v, unit = "") => `${v}${unit}`;
 function mountMetric(host, m) {
   const doc = host.ownerDocument;
   const box = div(doc, "knobs-wt-metric");
-  const label = div(doc, "knobs-wt-mlabel");
-  label.textContent = m.label;
   const value = div(doc, "knobs-wt-mvalue");
   const span = (cls, text) => {
     const s = doc.createElement("span");
@@ -16775,7 +16864,7 @@ function mountMetric(host, m) {
     delta.dataset.tone = d > 0 === (better === "up") ? "good" : "bad";
     value.append(delta);
   }
-  box.append(label, value);
+  box.append(value);
   const total = num(m.of);
   if (Number.isFinite(total) && total > 0 && Number.isFinite(a) && Number.isFinite(b)) {
     const track = div(doc, "knobs-wt-mtrack");
@@ -16829,7 +16918,7 @@ function mountDecision(host, m, slot) {
 }
 var HEAVY = new Set(["compare", "video", "diff", "mount"]);
 var RELEASES = new Set(["compare", "video"]);
-var labelOf2 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "metric" ? m.label : undefined;
+var labelOf2 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "history" ? m.label : undefined;
 function mediaSlot(container, given) {
   const doc = container.ownerDocument;
   injectWalkthroughStyles(doc);
@@ -16843,7 +16932,7 @@ function mediaSlot(container, given) {
   root.dataset.kind = m.kind;
   applyLook2(root, options);
   const label = labelOf2(m);
-  if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal" || m.kind === "facts")) {
+  if (label) {
     const l = doc.createElement("span");
     l.className = "knobs-wt-slot-label";
     l.textContent = label;
@@ -17820,641 +17909,1015 @@ function walkthrough(container, given) {
           bar.input.focus({ preventScroll: true });
       }
     }
-  };
-  const renderNote = (v, n, entering = false) => {
-    const row = el4(doc, "div", "knobs-wt-n");
-    row.dataset.id = n.id;
-    const meta = el4(doc, "span", "knobs-wt-n-meta");
-    const m = n.context.media;
-    meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
-    if (m?.time !== undefined) {
-      meta.title = "Go to this moment";
-      meta.dataset.seek = "";
-      meta.addEventListener("click", () => {
-        const now = mediaContext(v)?.time;
-        if (now !== undefined) {
-          for (const s of slotsOf(v))
-            if (s.seekBy(m.time - now))
-              break;
+  };
+  const renderNote = (v, n, entering = false) => {
+    const row = el4(doc, "div", "knobs-wt-n");
+    row.dataset.id = n.id;
+    const meta = el4(doc, "span", "knobs-wt-n-meta");
+    const m = n.context.media;
+    meta.textContent = m?.time !== undefined ? formatTime(m.time) : m?.file ? m.file.split("/").pop() : "·";
+    if (m?.time !== undefined) {
+      meta.title = "Go to this moment";
+      meta.dataset.seek = "";
+      meta.addEventListener("click", () => {
+        const now = mediaContext(v)?.time;
+        if (now !== undefined) {
+          for (const s of slotsOf(v))
+            if (s.seekBy(m.time - now))
+              break;
+        }
+      });
+    }
+    row.append(meta);
+    const body = el4(doc, "div", "knobs-wt-n-body");
+    if (n.text)
+      body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
+    if (n.voice) {
+      const a = el4(doc, "audio", "knobs-wt-n-voice");
+      a.controls = true;
+      a.preload = "none";
+      a.src = n.voice.url;
+      body.append(a);
+    }
+    if (n.ink?.paths.length) {
+      const thumb = doc.createElementNS(SVG, "svg");
+      thumb.classList.add("knobs-wt-n-ink");
+      thumb.setAttribute("viewBox", "0 0 1 1");
+      thumb.setAttribute("preserveAspectRatio", "none");
+      thumb.style.aspectRatio = String(n.ink.aspect);
+      for (const d of n.ink.paths) {
+        const p = doc.createElementNS(SVG, "path");
+        p.setAttribute("d", d);
+        thumb.append(p);
+      }
+      body.append(thumb);
+    }
+    row.append(body);
+    const x = el4(doc, "button", "knobs-wt-x");
+    x.type = "button";
+    x.innerHTML = ICON.close;
+    x.setAttribute("aria-label", "Delete this note");
+    x.addEventListener("click", () => {
+      state = removeNote(state, n.id);
+      if (n.voice)
+        URL.revokeObjectURL(n.voice.url);
+      leave(row);
+      syncGlyph(v);
+      syncProgress();
+      emit();
+    });
+    row.append(x);
+    v.notes.append(row);
+    if (entering)
+      enter(row);
+  };
+  const enter = (row) => {
+    if (reduced())
+      return;
+    const h = row.offsetHeight;
+    row.style.height = "0px";
+    row.dataset.entering = "";
+    row.offsetHeight;
+    row.style.height = `${h}px`;
+    delete row.dataset.entering;
+    row.addEventListener("transitionend", () => row.style.height = "", { once: true });
+  };
+  const leave = (row) => {
+    if (reduced())
+      return row.remove();
+    row.style.height = `${row.offsetHeight}px`;
+    row.offsetHeight;
+    row.dataset.leaving = "";
+    row.style.height = "0px";
+    const done = () => row.remove();
+    row.addEventListener("transitionend", done, { once: true });
+    win.setTimeout(done, 600);
+  };
+  const metaLine = (cls) => el4(doc, "div", `knobs-wt-metaline ${cls}`);
+  const metaText = (line, text, cls) => {
+    const s = el4(doc, "span", cls);
+    s.textContent = text;
+    line.append(s);
+    return s;
+  };
+  const findPRIn = (n, kind = "pr") => findPR(page.prs, n, page.repo, kind);
+  const metaLink = (line, text, href) => {
+    const n = prNumber(href);
+    const issue = n ? null : issueNumber(href);
+    if (n || issue) {
+      const chip = n ? prChip(doc, n, { ...findPRIn(n), href }) : prChip(doc, issue, { ...findPRIn(issue, "issue"), href });
+      line.append(chip);
+      return chip;
+    }
+    const a = el4(doc, "a");
+    a.href = href;
+    a.target = "_blank";
+    a.rel = "noreferrer";
+    a.textContent = text;
+    a.insertAdjacentHTML("beforeend", ICON.out);
+    line.append(a);
+    return a;
+  };
+  const feedItem = (f, now) => {
+    const li = el4(doc, "li", "knobs-wt-fi");
+    li.dataset.kind = f.kind;
+    const q = el4(doc, "div", "knobs-wt-fi-q");
+    const meta = metaLine("knobs-wt-fi-meta");
+    if (f.at !== null) {
+      const when = metaText(meta, ago(f.at, now));
+      when.title = new Date(f.at).toLocaleString();
+    }
+    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 = el4(doc, "button", "knobs-wt-fi-step");
+      b.type = "button";
+      b.textContent = section?.link?.label ?? plainMarkdown(step.title);
+      b.title = `Go to “${plainMarkdown(step.title)}”`;
+      b.addEventListener("click", () => go(step.key));
+      meta.append(b);
+    }
+    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" : "";
+    }
+    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 = el4(doc, "div", "knobs-wt-fi-a");
+      if (f.q)
+        a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
+      if (f.trail.length) {
+        const list = el4(doc, "ol", "knobs-wt-trail");
+        for (const line of f.trail) {
+          const i = line.indexOf(" · ");
+          const row = el4(doc, "li");
+          const words = el4(doc, "span", "knobs-wt-trail-text");
+          words.textContent = i < 0 ? line : line.slice(i + 3);
+          row.append(words);
+          if (i >= 0) {
+            const at = el4(doc, "span", "knobs-wt-trail-at");
+            at.textContent = line.slice(0, i);
+            row.append(at);
+          }
+          list.append(row);
+        }
+        discs.push(disclosure(a, { label: "Context", content: list }));
+      }
+      li.append(a);
+    }
+    return li;
+  };
+  const build = () => {
+    for (const v of views) {
+      v.slots.forEach((s) => s.dispose());
+      v.taste?.dispose();
+    }
+    for (const d of discs)
+      d.dispose();
+    discs = [];
+    pill?.dispose();
+    pill = null;
+    tocRows = [];
+    if (full) {
+      full.p.snap(0);
+      closeFull();
+    }
+    clearInk();
+    views = [];
+    root.textContent = "";
+    root.removeAttribute("data-settled");
+    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 = el4(doc, "div", "knobs-wt-layout");
+    const main = el4(doc, "div", "knobs-wt-main");
+    const flow = el4(doc, "div", "knobs-wt-flow");
+    const head = el4(doc, "header", "knobs-wt-head");
+    const h1 = el4(doc, "h1", "knobs-wt-title");
+    h1.textContent = page.title;
+    head.append(h1);
+    if (page.summary)
+      head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
+    if (page.more)
+      head.append(more(page.more));
+    if (page.meta.length) {
+      const meta = el4(doc, "div", "knobs-wt-meta");
+      for (const m of page.meta) {
+        const s = el4(doc, "span");
+        s.append(m.label);
+        const b = el4(doc, "b");
+        if (m.href) {
+          const a = el4(doc, "a");
+          a.href = m.href;
+          a.target = "_blank";
+          a.rel = "noreferrer";
+          a.textContent = m.value;
+          b.append(a);
+        } else
+          b.textContent = m.value;
+        s.append(b);
+        meta.append(s);
+      }
+      head.append(meta);
+    }
+    flow.append(head);
+    let feedEl = null;
+    if (page.feed.length) {
+      feedEl = el4(doc, "section", "knobs-wt-feed");
+      feedEl.id = "wt-latest";
+      feedEl.setAttribute("aria-label", "Updates and answers");
+      const fh = el4(doc, "header", "knobs-wt-feed-head");
+      const h = el4(doc, "h2", "knobs-wt-feed-title");
+      h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
+      fh.append(h);
+      const list = el4(doc, "ol", "knobs-wt-feed-list");
+      const now = Date.now();
+      for (const f of page.feed)
+        list.append(feedItem(f, now));
+      feedEl.append(fh, list);
+      flow.append(feedEl);
+    }
+    let rail = null;
+    count = fill = tocEl = null;
+    if (options.rail !== false) {
+      rail = el4(doc, "aside", "knobs-wt-rail");
+      rail.setAttribute("aria-label", "Contents");
+      tocEl = el4(doc, "nav", "knobs-wt-toc");
+      tocEl.setAttribute("aria-label", "Contents");
+      if (feedEl) {
+        const group = el4(doc, "div", "knobs-wt-toc-group");
+        const target = feedEl;
+        group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
+        tocEl.append(group);
+      }
+      if (review) {
+        const progress = el4(doc, "div", "knobs-wt-progress");
+        count = el4(doc, "div", "knobs-wt-count");
+        const meter = el4(doc, "div", "knobs-wt-bar");
+        fill = el4(doc, "div", "knobs-wt-fill");
+        meter.append(fill);
+        progress.append(count, meter);
+        rail.append(progress);
+      }
+      rail.append(tocEl);
+      if (review)
+        rail.append(actions(true));
+      if (review && options.keys !== false) {
+        const keys = el4(doc, "div", "knobs-wt-keys");
+        keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
+        rail.append(keys);
+      }
+    }
+    for (const section of page.sections) {
+      const sec = el4(doc, "section", "knobs-wt-section");
+      sec.id = `wt-${section.id}`;
+      const sh = el4(doc, "header", "knobs-wt-shead");
+      const status = review ? section.status : undefined;
+      if (section.kicker || section.link || status) {
+        const meta = metaLine("knobs-wt-kicker");
+        if (section.kicker)
+          metaText(meta, section.kicker, "knobs-wt-kicker-lead");
+        if (section.link)
+          metaLink(meta, section.link.label, section.link.href);
+        if (status) {
+          const s = statusLook(status);
+          metaText(meta, s.label, "knobs-wt-status").dataset.tone = s.tone;
         }
-      });
-    }
-    row.append(meta);
-    const body = el4(doc, "div", "knobs-wt-n-body");
-    if (n.text)
-      body.append(prose2(doc, "p", "knobs-wt-n-text", n.text));
-    if (n.voice) {
-      const a = el4(doc, "audio", "knobs-wt-n-voice");
-      a.controls = true;
-      a.preload = "none";
-      a.src = n.voice.url;
-      body.append(a);
-    }
-    if (n.ink?.paths.length) {
-      const thumb = doc.createElementNS(SVG, "svg");
-      thumb.classList.add("knobs-wt-n-ink");
-      thumb.setAttribute("viewBox", "0 0 1 1");
-      thumb.setAttribute("preserveAspectRatio", "none");
-      thumb.style.aspectRatio = String(n.ink.aspect);
-      for (const d of n.ink.paths) {
-        const p = doc.createElementNS(SVG, "path");
-        p.setAttribute("d", d);
-        thumb.append(p);
+        sh.append(meta);
       }
-      body.append(thumb);
+      const h2 = el4(doc, "h2", "knobs-wt-heading");
+      h2.innerHTML = inlineMarkdown(section.title);
+      sh.append(h2);
+      const intro = el4(doc, "div", "knobs-wt-sintro");
+      intro.append(sh);
+      if (section.summary)
+        intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
+      if (section.more)
+        intro.append(more(section.more));
+      sec.append(intro);
+      let group = null;
+      if (tocEl) {
+        group = el4(doc, "div", "knobs-wt-toc-group");
+        const first = section.steps[0]?.key;
+        group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
+        tocEl.append(group);
+      }
+      for (const step of section.steps) {
+        const v = stepView(step, group);
+        sec.append(v.card);
+        views.push(v);
+      }
+      flow.append(sec);
     }
-    row.append(body);
-    const x = el4(doc, "button", "knobs-wt-x");
-    x.type = "button";
-    x.innerHTML = ICON.close;
-    x.setAttribute("aria-label", "Delete this note");
-    x.addEventListener("click", () => {
-      state = removeNote(state, n.id);
-      if (n.voice)
-        URL.revokeObjectURL(n.voice.url);
-      leave(row);
+    linkPRs(flow, findPRIn);
+    main.append(flow);
+    if (noteMode !== "hidden")
+      main.append(bar.dock);
+    if (rail)
+      layout.append(rail);
+    layout.append(main);
+    root.append(layout, scrim);
+    for (const v of views) {
       syncGlyph(v);
-      syncProgress();
-      emit();
-    });
-    row.append(x);
-    v.notes.append(row);
-    if (entering)
-      enter(row);
-  };
-  const enter = (row) => {
-    if (reduced())
-      return;
-    const h = row.offsetHeight;
-    row.style.height = "0px";
-    row.dataset.entering = "";
-    row.offsetHeight;
-    row.style.height = `${h}px`;
-    delete row.dataset.entering;
-    row.addEventListener("transitionend", () => row.style.height = "", { once: true });
+      for (const n of notesOn(state, v.step.key))
+        renderNote(v, n);
+    }
+    if (tocEl)
+      pill = selectionPill(tocEl, {
+        selected: () => viewOf(current)?.toc ?? null,
+        rows: () => tocRows,
+        spring: SPRINGS.snappy
+      });
+    syncProgress();
+    current = null;
+    fromScroll();
+    placeMark();
+    bar.sync();
+    syncReserve();
+    win.requestAnimationFrame(() => win.requestAnimationFrame(() => {
+      if (!disposed && !reduced())
+        root.dataset.settled = "";
+    }));
   };
-  const leave = (row) => {
-    if (reduced())
-      return row.remove();
-    row.style.height = `${row.offsetHeight}px`;
-    row.offsetHeight;
-    row.dataset.leaving = "";
-    row.style.height = "0px";
-    const done = () => row.remove();
-    row.addEventListener("transitionend", done, { once: true });
-    win.setTimeout(done, 600);
+  const more = (text) => {
+    const box = el4(doc, "div", "knobs-wt-more");
+    const body = el4(doc, "div", "knobs-wt-more-text");
+    for (const para of text.split(/\n\s*\n/))
+      if (para.trim())
+        body.append(prose2(doc, "p", "", para.trim()));
+    discs.push(disclosure(box, { label: "More", content: body }));
+    return box;
   };
-  const metaLine = (cls) => el4(doc, "div", `knobs-wt-metaline ${cls}`);
-  const metaText = (line, text, cls) => {
-    const s = el4(doc, "span", cls);
-    s.textContent = text;
-    line.append(s);
-    return s;
+  const tocRow = (label, sub, run, section) => {
+    const b = el4(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
+    b.type = "button";
+    if (section)
+      b.dataset.section = section;
+    const t = el4(doc, "span", "knobs-wt-toc-label");
+    t.textContent = label;
+    b.title = label;
+    b.append(t);
+    if (review)
+      b.append(el4(doc, "span", "knobs-wt-toc-end"));
+    b.addEventListener("mousedown", (ev) => ev.preventDefault());
+    b.addEventListener("click", run);
+    tocRows.push(b);
+    return b;
   };
-  const findPRIn = (n, kind = "pr") => findPR(page.prs, n, page.repo, kind);
-  const metaLink = (line, text, href) => {
-    const n = prNumber(href);
-    const issue = n ? null : issueNumber(href);
-    if (n || issue) {
-      const chip = n ? prChip(doc, n, { ...findPRIn(n), href }) : prChip(doc, issue, { ...findPRIn(issue, "issue"), href });
-      line.append(chip);
-      return chip;
-    }
-    const a = el4(doc, "a");
-    a.href = href;
-    a.target = "_blank";
-    a.rel = "noreferrer";
-    a.textContent = text;
-    a.insertAdjacentHTML("beforeend", ICON.out);
-    line.append(a);
-    return a;
+  const actions = (rail) => {
+    const row = el4(doc, "div", "knobs-wt-actions");
+    const btn = (text, run, primary = false) => {
+      const b = el4(doc, "button", "knobs-wt-btn");
+      b.type = "button";
+      b.textContent = text;
+      if (primary)
+        b.dataset.primary = "";
+      b.addEventListener("click", run);
+      row.append(b);
+      return b;
+    };
+    btn("Copy feedback", () => copy("markdown"), true);
+    btn("JSON", () => copy("json"));
+    if (rail)
+      btn("Reset", async () => {
+        const ok = await confirm({
+          title: "Forget every answer on this page?",
+          confirm: "Reset",
+          destructive: true,
+          look,
+          doc
+        });
+        if (ok)
+          api.reset();
+      });
+    return row;
   };
-  const feedItem = (f, now) => {
-    const li = el4(doc, "li", "knobs-wt-fi");
-    li.dataset.kind = f.kind;
-    const q = el4(doc, "div", "knobs-wt-fi-q");
-    const meta = metaLine("knobs-wt-fi-meta");
-    if (f.at !== null) {
-      const when = metaText(meta, ago(f.at, now));
-      when.title = new Date(f.at).toLocaleString();
+  const copy = async (format) => {
+    const text = format === "json" ? JSON.stringify(feedback(), null, 2) : markdown();
+    try {
+      await win.navigator.clipboard.writeText(text);
+      toast(format === "json" ? "Feedback copied as JSON" : "Feedback copied as Markdown", {
+        look,
+        doc
+      });
+    } catch {
+      toast("Couldn't reach the clipboard", { tone: "warn", look, doc });
     }
-    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 = el4(doc, "button", "knobs-wt-fi-step");
-      b.type = "button";
-      b.textContent = section?.link?.label ?? plainMarkdown(step.title);
-      b.title = `Go to “${plainMarkdown(step.title)}”`;
-      b.addEventListener("click", () => go(step.key));
-      meta.append(b);
+  };
+  const stepView = (step, group) => {
+    const card = el4(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
+    card.id = `wt-${step.key.replace("/", "--")}`;
+    card.tabIndex = -1;
+    card.dataset.key = step.key;
+    card.setAttribute("aria-label", plainMarkdown(step.title));
+    const head = el4(doc, "header", "knobs-wt-step-head");
+    const h3 = el4(doc, "h3", "knobs-wt-stepTitle");
+    h3.innerHTML = inlineMarkdown(step.title);
+    head.append(h3);
+    if (step.caption)
+      head.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
+    if (step.more)
+      head.append(more(step.more));
+    card.append(head);
+    const slots = [];
+    const onEvent = (e) => record({ ...e, step: step.key });
+    let media = null;
+    if (step.media.length) {
+      media = el4(doc, "div", "knobs-wt-media");
+      media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
+      for (const m of step.media)
+        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks, findPR: findPRIn }));
+      card.append(media);
     }
-    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" : "";
+    let taste = null;
+    if (step.question && review)
+      card.append(prose2(doc, "p", "knobs-wt-question", step.question));
+    if (step.ask === "pick") {
+      taste = tasteTest(card, {
+        ...look,
+        pickable: review,
+        options: step.options,
+        picked: state.steps[step.key]?.pick ?? null,
+        onPick: (id) => pick(step.key, id),
+        steps: stepLinks
+      });
+      media ??= taste.element;
     }
-    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 = el4(doc, "div", "knobs-wt-fi-a");
-      if (f.q)
-        a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
-      if (f.trail.length) {
-        const list = el4(doc, "ol", "knobs-wt-trail");
-        for (const line of f.trail) {
-          const i = line.indexOf(" · ");
-          const row = el4(doc, "li");
-          const words = el4(doc, "span", "knobs-wt-trail-text");
-          words.textContent = i < 0 ? line : line.slice(i + 3);
-          row.append(words);
-          if (i >= 0) {
-            const at = el4(doc, "span", "knobs-wt-trail-at");
-            at.textContent = line.slice(0, i);
-            row.append(at);
-          }
-          list.append(row);
-        }
-        discs.push(disclosure(a, { label: "Context", content: list }));
+    const notes = el4(doc, "div", "knobs-wt-notes");
+    if (review)
+      card.append(notes);
+    card.addEventListener("focusin", () => {
+      if (scroll.to)
+        return;
+      pinUntil = performance.now() + 250;
+      setCurrent(step.key);
+    });
+    let toc = null;
+    let glyph = null;
+    if (group) {
+      toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
+      if (review) {
+        glyph = el4(doc, "span", "knobs-wt-toc-glyph");
+        toc.querySelector(".knobs-wt-toc-end").append(glyph);
       }
-      li.append(a);
+      group.append(toc);
     }
-    return li;
+    return { step, card, media, notes, toc, glyph, taste, slots };
   };
-  const build = () => {
-    for (const v of views) {
-      v.slots.forEach((s) => s.dispose());
-      v.taste?.dispose();
+  const pick = (key, id) => {
+    state = setFeedback(state, key, { pick: id });
+    const v = viewOf(key);
+    if (v) {
+      v.taste?.pick(id);
+      syncGlyph(v);
     }
-    for (const d of discs)
-      d.dispose();
-    discs = [];
-    pill?.dispose();
-    pill = null;
-    tocRows = [];
-    if (full) {
-      full.p.snap(0);
-      closeFull();
+    record({ what: "pick", step: key, detail: id ?? "cleared" });
+    syncProgress();
+    emit();
+  };
+  const LEAVE = "[role=tree],[role=listbox],[role=grid],[role=slider],[role=menu],.knobs-timeline";
+  const onKey = (e) => {
+    if (disposed || e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    if (isTypingTarget(e.target))
+      return;
+    const target = e.target instanceof Element ? e.target : null;
+    if (target && target !== doc.body && target !== doc.documentElement && !root.contains(target))
+      return;
+    const own = target?.closest(LEAVE);
+    const claim = () => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
+    if (key === "Escape") {
+      if (ink.on)
+        return claim(), setInk(false);
+      if (slotsOf(viewOf(current)).some((s) => s.unzoom()))
+        return claim();
+      if (full)
+        return claim(), setFull(false);
+      return;
     }
-    clearInk();
-    views = [];
-    root.textContent = "";
-    root.removeAttribute("data-settled");
-    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 = el4(doc, "div", "knobs-wt-layout");
-    const main = el4(doc, "div", "knobs-wt-main");
-    const flow = el4(doc, "div", "knobs-wt-flow");
-    const head = el4(doc, "header", "knobs-wt-head");
-    const h1 = el4(doc, "h1", "knobs-wt-title");
-    h1.textContent = page.title;
-    head.append(h1);
-    if (page.summary)
-      head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
-    if (page.more)
-      head.append(more(page.more));
-    if (page.meta.length) {
-      const meta = el4(doc, "div", "knobs-wt-meta");
-      for (const m of page.meta) {
-        const s = el4(doc, "span");
-        s.append(m.label);
-        const b = el4(doc, "b");
-        if (m.href) {
-          const a = el4(doc, "a");
-          a.href = m.href;
-          a.target = "_blank";
-          a.rel = "noreferrer";
-          a.textContent = m.value;
-          b.append(a);
-        } else
-          b.textContent = m.value;
-        s.append(b);
-        meta.append(s);
-      }
-      head.append(meta);
+    if (key === "f" && !e.shiftKey) {
+      if (!viewOf(current)?.media)
+        return;
+      claim();
+      return setFull(!full);
     }
-    flow.append(head);
-    let feedEl = null;
-    if (page.feed.length) {
-      feedEl = el4(doc, "section", "knobs-wt-feed");
-      feedEl.id = "wt-latest";
-      feedEl.setAttribute("aria-label", "Updates and answers");
-      const fh = el4(doc, "header", "knobs-wt-feed-head");
-      const h = el4(doc, "h2", "knobs-wt-feed-title");
-      h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
-      fh.append(h);
-      const list = el4(doc, "ol", "knobs-wt-feed-list");
-      const now = Date.now();
-      for (const f of page.feed)
-        list.append(feedItem(f, now));
-      feedEl.append(fh, list);
-      flow.append(feedEl);
+    if (own)
+      return;
+    if (key === "j" || key === "k" || key === "ArrowDown" || key === "ArrowUp") {
+      if (e.shiftKey && key.startsWith("Arrow"))
+        return;
+      const dir = key === "j" || key === "ArrowDown" ? 1 : -1;
+      const next = adjacentStep(views.map((v) => v.step.key), current, dir);
+      if (!next)
+        return;
+      claim();
+      if (full)
+        setFull(false);
+      return go(next);
     }
-    let rail = null;
-    count = fill = tocEl = null;
-    if (options.rail !== false) {
-      rail = el4(doc, "aside", "knobs-wt-rail");
-      rail.setAttribute("aria-label", "Contents");
-      tocEl = el4(doc, "nav", "knobs-wt-toc");
-      tocEl.setAttribute("aria-label", "Contents");
-      if (feedEl) {
-        const group = el4(doc, "div", "knobs-wt-toc-group");
-        const target = feedEl;
-        group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
-        tocEl.append(group);
-      }
-      if (review) {
-        const progress = el4(doc, "div", "knobs-wt-progress");
-        count = el4(doc, "div", "knobs-wt-count");
-        const meter = el4(doc, "div", "knobs-wt-bar");
-        fill = el4(doc, "div", "knobs-wt-fill");
-        meter.append(fill);
-        progress.append(count, meter);
-        rail.append(progress);
-      }
-      rail.append(tocEl);
-      if (review)
-        rail.append(actions(true));
-      if (review && options.keys !== false) {
-        const keys = el4(doc, "div", "knobs-wt-keys");
-        keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
-        rail.append(keys);
-      }
+    if ((key === "Home" || key === "End") && views.length) {
+      claim();
+      if (full)
+        setFull(false);
+      return go(views[key === "Home" ? 0 : views.length - 1].step.key);
+    }
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+      const d = (key === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 2 : 0.5);
+      if (seekBy(d))
+        claim();
+      return;
     }
-    for (const section of page.sections) {
-      const sec = el4(doc, "section", "knobs-wt-section");
-      sec.id = `wt-${section.id}`;
-      const sh = el4(doc, "header", "knobs-wt-shead");
-      const status = review ? section.status : undefined;
-      if (section.kicker || section.link || status) {
-        const meta = metaLine("knobs-wt-kicker");
-        if (section.kicker)
-          metaText(meta, section.kicker, "knobs-wt-kicker-lead");
-        if (section.link)
-          metaLink(meta, section.link.label, section.link.href);
-        if (status) {
-          const s = statusLook(status);
-          metaText(meta, s.label, "knobs-wt-status").dataset.tone = s.tone;
-        }
-        sh.append(meta);
+    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);
+      return;
+    }
+    const v = viewOf(current);
+    if (!v || e.shiftKey || !review)
+      return;
+    const choice = digitChoice(v.step, state.steps[v.step.key], key);
+    if (choice === undefined)
+      return;
+    claim();
+    pick(v.step.key, choice);
+  };
+  if (options.keys !== false)
+    doc.addEventListener("keydown", onKey);
+  const unregisterHints = hints.register(root, () => {
+    const v = viewOf(current);
+    return [
+      ...v ? v.card.querySelectorAll(".knobs-wt-pick") : [],
+      ...root.querySelectorAll(".knobs-wt-tool:not([hidden]),.knobs-wt-rail .knobs-wt-btn")
+    ];
+  }, { listen: false, rank: 1 });
+  build();
+  const api = {
+    element: root,
+    get page() {
+      return page;
+    },
+    get state() {
+      return state;
+    },
+    get feedback() {
+      return feedback();
+    },
+    get current() {
+      return current;
+    },
+    markdown,
+    go: (key) => go(key),
+    full: (on) => setFull(on ?? !full),
+    send: (text) => send(text),
+    set(next) {
+      const keep = current;
+      const sameId = next.id === page.id;
+      page = normalizeWalkthrough(next);
+      if (!sameId)
+        state = load();
+      build();
+      if (keep && viewOf(keep))
+        go(keep);
+    },
+    reset() {
+      state = EMPTY_STATE;
+      for (const v of views) {
+        v.taste?.pick(null);
+        v.notes.textContent = "";
+        syncGlyph(v);
       }
-      const h2 = el4(doc, "h2", "knobs-wt-heading");
-      h2.innerHTML = inlineMarkdown(section.title);
-      sh.append(h2);
-      const intro = el4(doc, "div", "knobs-wt-sintro");
-      intro.append(sh);
-      if (section.summary)
-        intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
-      if (section.more)
-        intro.append(more(section.more));
-      sec.append(intro);
-      let group = null;
-      if (tocEl) {
-        group = el4(doc, "div", "knobs-wt-toc-group");
-        const first = section.steps[0]?.key;
-        group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
-        tocEl.append(group);
+      syncProgress();
+      emit();
+    },
+    dispose() {
+      if (disposed)
+        return;
+      disposed = true;
+      win.clearTimeout(emitTimer);
+      win.clearTimeout(backTimer);
+      win.clearInterval(ticker);
+      win.clearInterval(voice.timer);
+      voice.recorder?.stop();
+      motion.stop();
+      if (scrollRaf)
+        win.cancelAnimationFrame(scrollRaf);
+      win.removeEventListener("scroll", onScroll, { capture: true });
+      win.removeEventListener("resize", onScroll);
+      win.removeEventListener("resize", onFullResize);
+      for (const type of ["wheel", "touchstart"])
+        win.removeEventListener(type, stopScroll);
+      doc.removeEventListener("keydown", onKey);
+      unregisterHints();
+      bar.unobserve();
+      pill?.dispose();
+      for (const d of discs)
+        d.dispose();
+      if (padded)
+        padded.el.style.scrollPaddingBottom = padded.was;
+      for (const v of views) {
+        v.slots.forEach((s) => s.dispose());
+        v.taste?.dispose();
       }
-      for (const step of section.steps) {
-        const v = stepView(step, group);
-        sec.append(v.card);
-        views.push(v);
+      root.remove();
+    }
+  };
+  return api;
+}
+
+// src/review/index.ts
+init_compare();
+
+// src/ui/compare-strip.ts
+init_compare_frames();
+init_compare_model();
+init_look();
+init_rgba();
+init_timeline_model();
+var BAR = 7;
+var GAP = 2;
+var DIFF = { w: 32, h: 18 };
+var DIFFS_PER_DRAW = 6;
+function compareStrip(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  const timeline = options.timeline;
+  const fps = () => options.fps ?? timeline.fps;
+  const align = options.align ?? "track";
+  const threshold = options.threshold ?? 4 / 255;
+  const root = doc.createElement("div");
+  root.className = "knobs-cmp-strip";
+  root.setAttribute("role", "img");
+  root.setAttribute("aria-label", "Frame strip: Before over After, with how much they differ");
+  applyLook2(root, options);
+  const canvas = doc.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  root.append(canvas);
+  container.append(root);
+  const diffs = new Map;
+  const pairDiffs = new Map;
+  let disposed = false;
+  let near = false;
+  let onScreen = false;
+  const makeSide = (source) => ({
+    source,
+    kind: mediaKind(source.src, source.kind),
+    frames: null,
+    still: null,
+    seen: false
+  });
+  let sides = [makeSide(options.before), makeSide(options.after)];
+  const offs = new Map;
+  const load = (s) => {
+    if (s.frames || s.still)
+      return;
+    if (s.kind === "video") {
+      s.frames = acquireFrames(doc, s.source.src, fps());
+      offs.set(s, s.frames.listen(schedule));
+      if (onScreen) {
+        s.frames.visible(true);
+        s.seen = true;
       }
-      flow.append(sec);
+    } else {
+      const img = doc.createElement("img");
+      img.crossOrigin = "anonymous";
+      img.decoding = "async";
+      img.addEventListener("load", () => {
+        pairDiffs.clear();
+        schedule();
+      });
+      img.src = s.source.src;
+      s.still = img;
     }
-    linkPRs(flow, findPRIn);
-    main.append(flow);
-    if (noteMode !== "hidden")
-      main.append(bar.dock);
-    if (rail)
-      layout.append(rail);
-    layout.append(main);
-    root.append(layout, scrim);
-    for (const v of views) {
-      syncGlyph(v);
-      for (const n of notesOn(state, v.step.key))
-        renderNote(v, n);
+  };
+  const unload = (s) => {
+    offs.get(s)?.();
+    offs.delete(s);
+    if (s.frames) {
+      if (s.seen)
+        s.frames.visible(false);
+      s.frames.release();
     }
-    if (tocEl)
-      pill = selectionPill(tocEl, {
-        selected: () => viewOf(current)?.toc ?? null,
-        rows: () => tocRows,
-        spring: SPRINGS.snappy
-      });
-    syncProgress();
-    current = null;
-    fromScroll();
-    placeMark();
-    bar.sync();
-    syncReserve();
-    win.requestAnimationFrame(() => win.requestAnimationFrame(() => {
-      if (!disposed && !reduced())
-        root.dataset.settled = "";
-    }));
+    s.frames = null;
+    s.seen = false;
+    if (s.still)
+      s.still.removeAttribute("src");
+    s.still = null;
   };
-  const more = (text) => {
-    const box = el4(doc, "div", "knobs-wt-more");
-    const body = el4(doc, "div", "knobs-wt-more-text");
-    for (const para of text.split(/\n\s*\n/))
-      if (para.trim())
-        body.append(prose2(doc, "p", "", para.trim()));
-    discs.push(disclosure(box, { label: "More", content: body }));
-    return box;
+  let w = 1;
+  let h = 1;
+  let geo = { x: 0, w: 1 };
+  const rowH = () => Math.max(4, (h - BAR - GAP * 2) / 2);
+  const aspectOf = (s) => {
+    if (s.still?.naturalWidth)
+      return s.still.naturalWidth / s.still.naturalHeight;
+    const c = s.frames?.nearest(0);
+    return c ? c.bitmap.width / c.bitmap.height : 0;
+  };
+  const columns = () => stripColumns(timeline.view, geo.w, {
+    duration: timeline.duration,
+    fps: fps(),
+    minWidth: rowH() * Math.max(16 / 9, ...sides.map(aspectOf)) + GAP
+  });
+  const measure = () => {
+    const r = root.getBoundingClientRect();
+    w = Math.max(1, r.width);
+    h = Math.max(1, r.height);
+    geo = { x: 0, w };
+    if (align === "track") {
+      const track = timeline.element.querySelector(".knobs-tl-track");
+      const t = track?.getBoundingClientRect();
+      if (t && t.width > 0)
+        geo = { x: t.left - r.left, w: t.width };
+    }
+    readColors();
+    schedule();
   };
-  const tocRow = (label, sub, run, section) => {
-    const b = el4(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
-    b.type = "button";
-    if (section)
-      b.dataset.section = section;
-    const t = el4(doc, "span", "knobs-wt-toc-label");
-    t.textContent = label;
-    b.title = label;
-    b.append(t);
-    if (review)
-      b.append(el4(doc, "span", "knobs-wt-toc-end"));
-    b.addEventListener("mousedown", (ev) => ev.preventDefault());
-    b.addEventListener("click", run);
-    tocRows.push(b);
-    return b;
+  const ask = (cols) => {
+    const points = cols.map((c) => ({ frame: c.frame, tolerance: Math.floor((c.to - c.from) / 2) }));
+    for (const s of sides)
+      s.frames?.want(points);
   };
-  const actions = (rail) => {
-    const row = el4(doc, "div", "knobs-wt-actions");
-    const btn = (text, run, primary = false) => {
-      const b = el4(doc, "button", "knobs-wt-btn");
-      b.type = "button";
-      b.textContent = text;
-      if (primary)
-        b.dataset.primary = "";
-      b.addEventListener("click", run);
-      row.append(b);
-      return b;
-    };
-    btn("Copy feedback", () => copy("markdown"), true);
-    btn("JSON", () => copy("json"));
-    if (rail)
-      btn("Reset", async () => {
-        const ok = await confirm({
-          title: "Forget every answer on this page?",
-          confirm: "Reset",
-          destructive: true,
-          look,
-          doc
-        });
-        if (ok)
-          api.reset();
-      });
-    return row;
+  const picOf = (s, c) => {
+    if (s.still?.naturalWidth)
+      return { img: s.still, w: s.still.naturalWidth, h: s.still.naturalHeight, key: "still" };
+    const f = s.frames?.nearest(c.frame, Math.max(1, c.to - c.from));
+    return f ? { img: f.bitmap, w: f.bitmap.width, h: f.bitmap.height, key: String(f.frame) } : null;
   };
-  const copy = async (format) => {
-    const text = format === "json" ? JSON.stringify(feedback(), null, 2) : markdown();
+  const probe = doc.createElement("canvas");
+  probe.width = DIFF.w;
+  probe.height = DIFF.h;
+  const probeCtx = probe.getContext("2d", { willReadFrequently: true });
+  const differ = (a, b) => {
+    if (!probeCtx)
+      return;
     try {
-      await win.navigator.clipboard.writeText(text);
-      toast(format === "json" ? "Feedback copied as JSON" : "Feedback copied as Markdown", {
-        look,
-        doc
-      });
+      probeCtx.drawImage(a.img, 0, 0, DIFF.w, DIFF.h);
+      const pa = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
+      probeCtx.drawImage(b.img, 0, 0, DIFF.w, DIFF.h);
+      const pb = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
+      return meanAbsDiff(pa, pb);
     } catch {
-      toast("Couldn't reach the clipboard", { tone: "warn", look, doc });
+      return;
     }
   };
-  const stepView = (step, group) => {
-    const card = el4(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
-    card.id = `wt-${step.key.replace("/", "--")}`;
-    card.tabIndex = -1;
-    card.dataset.key = step.key;
-    card.setAttribute("aria-label", plainMarkdown(step.title));
-    const head = el4(doc, "header", "knobs-wt-step-head");
-    const h3 = el4(doc, "h3", "knobs-wt-stepTitle");
-    h3.innerHTML = inlineMarkdown(step.title);
-    head.append(h3);
-    if (step.caption)
-      head.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
-    if (step.more)
-      head.append(more(step.more));
-    card.append(head);
-    const slots = [];
-    const onEvent = (e) => record({ ...e, step: step.key });
-    let media = null;
-    if (step.media.length) {
-      media = el4(doc, "div", "knobs-wt-media");
-      media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
-      for (const m of step.media)
-        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks, findPR: findPRIn }));
-      card.append(media);
+  let colors = { surface: "", accent: "", diff: "", wash: "" };
+  const rgba = (raw, fallback) => {
+    const [r, g, b, a] = parseCssColor(raw, fallback);
+    return `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a})`;
+  };
+  const readColors = () => {
+    const cs = win.getComputedStyle(root);
+    colors = {
+      surface: rgba(tokenCss(cs, "--kv-fill", ""), [1, 1, 1, 0.055]),
+      accent: rgba(tokenCss(cs, "--kv-accent", ""), [1, 1, 1, 1]),
+      diff: rgba(tokenCss(cs, "--_ku-cmp-diff", ""), [0.49, 0.81, 0.61, 1]),
+      wash: rgba(tokenCss(cs, "--kv-fill-selected", ""), [1, 1, 1, 0.11])
+    };
+  };
+  let hover = null;
+  let raf = 0;
+  let asked = "";
+  function schedule() {
+    if (!raf && !disposed)
+      raf = win.requestAnimationFrame(draw);
+  }
+  const draw = () => {
+    raf = 0;
+    if (!near)
+      return;
+    const dpr = Math.min(3, Math.max(1, win.devicePixelRatio || 1));
+    const cw = Math.round(w * dpr);
+    const ch = Math.round(h * dpr);
+    if (canvas.width !== cw || canvas.height !== ch) {
+      canvas.width = cw;
+      canvas.height = ch;
     }
-    let taste = null;
-    if (step.question && review)
-      card.append(prose2(doc, "p", "knobs-wt-question", step.question));
-    if (step.ask === "pick") {
-      taste = tasteTest(card, {
-        ...look,
-        pickable: review,
-        options: step.options,
-        picked: state.steps[step.key]?.pick ?? null,
-        onPick: (id) => pick(step.key, id),
-        steps: stepLinks
-      });
-      media ??= taste.element;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, w, h);
+    const cols = columns();
+    const key = cols.map((c) => c.frame).join(",");
+    if (key !== asked) {
+      asked = key;
+      ask(cols);
     }
-    const notes = el4(doc, "div", "knobs-wt-notes");
-    if (review)
-      card.append(notes);
-    card.addEventListener("focusin", () => {
-      if (scroll.to)
+    const rh = rowH();
+    const radius = 3;
+    let budget = DIFFS_PER_DRAW;
+    let more = false;
+    const ds = cols.map((c) => {
+      const a = picOf(sides[0], c);
+      const b = picOf(sides[1], c);
+      if (!a || !b)
         return;
-      pinUntil = performance.now() + 250;
-      setCurrent(step.key);
+      const k = `${a.key}|${b.key}`;
+      if (!pairDiffs.has(k)) {
+        if (budget-- <= 0) {
+          more = true;
+          return;
+        }
+        pairDiffs.set(k, differ(a, b));
+      }
+      const d = pairDiffs.get(k);
+      if (d !== undefined)
+        diffs.set(c.frame, d);
+      return d;
     });
-    let toc = null;
-    let glyph = null;
-    if (group) {
-      toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
-      if (review) {
-        glyph = el4(doc, "span", "knobs-wt-toc-glyph");
-        toc.querySelector(".knobs-wt-toc-end").append(glyph);
+    const max = Math.max(0.02, ...ds.map((d) => d ?? 0));
+    const peaks = new Set(stripPeaks(ds, { threshold }));
+    cols.forEach((c, i) => {
+      const x = geo.x + c.x + GAP / 2;
+      const cwid = Math.max(1, c.w - GAP);
+      if (x + cwid < 0 || x > w)
+        return;
+      for (const row of [0, 1]) {
+        const y = row * (rh + GAP);
+        const pic = picOf(sides[row], c);
+        ctx.save();
+        ctx.beginPath();
+        ctx.roundRect(x, y, cwid, rh, radius);
+        ctx.fillStyle = colors.surface;
+        ctx.fill();
+        if (pic) {
+          ctx.clip();
+          const r = letterbox({ w: pic.w, h: pic.h }, { x, y, w: cwid, h: rh });
+          ctx.drawImage(pic.img, r.x, r.y, r.w, r.h);
+        }
+        ctx.restore();
       }
-      group.append(toc);
+      if (hover === i) {
+        ctx.fillStyle = colors.wash;
+        ctx.beginPath();
+        ctx.roundRect(x, 0, cwid, rh * 2 + GAP, radius);
+        ctx.fill();
+      }
+      const d = ds[i];
+      if (d !== undefined && d > 0) {
+        const bh = Math.max(1, Math.min(1, d / max) * BAR);
+        ctx.globalAlpha = peaks.has(i) ? 1 : 0.42;
+        ctx.fillStyle = colors.diff;
+        ctx.beginPath();
+        ctx.roundRect(x, h - bh, cwid, bh, Math.min(1.5, bh / 2));
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      }
+    });
+    const v = timeline.view;
+    const px = geo.x + (timeline.time - v.start) / v.span * geo.w;
+    if (px >= -1 && px <= w + 1) {
+      ctx.fillStyle = colors.accent;
+      ctx.fillRect(Math.round(px * dpr) / dpr - 0.75, 0, 1.5, h);
     }
-    return { step, card, media, notes, toc, glyph, taste, slots };
+    if (more)
+      schedule();
+  };
+  const timeAt = (clientX) => {
+    const r = root.getBoundingClientRect();
+    const v = timeline.view;
+    const t = v.start + (clientX - r.left - geo.x) / geo.w * v.span;
+    return Math.min(timeline.duration, Math.max(0, frameTime(t, fps())));
+  };
+  const columnAt = (clientX) => {
+    const x = clientX - root.getBoundingClientRect().left - geo.x;
+    const i = columns().findIndex((c) => x >= c.x && x < c.x + c.w);
+    return i < 0 ? null : i;
   };
-  const pick = (key, id) => {
-    state = setFeedback(state, key, { pick: id });
-    const v = viewOf(key);
-    if (v) {
-      v.taste?.pick(id);
-      syncGlyph(v);
-    }
-    record({ what: "pick", step: key, detail: id ?? "cleared" });
-    syncProgress();
-    emit();
+  let dragging = false;
+  const pick = (clientX) => {
+    const t = timeAt(clientX);
+    timeline.seek(t);
+    options.onPick?.(t);
   };
-  const LEAVE = "[role=tree],[role=listbox],[role=grid],[role=slider],[role=menu],.knobs-timeline";
-  const onKey = (e) => {
-    if (disposed || e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey)
-      return;
-    if (isTypingTarget(e.target))
-      return;
-    const target = e.target instanceof Element ? e.target : null;
-    if (target && target !== doc.body && target !== doc.documentElement && !root.contains(target))
-      return;
-    const own = target?.closest(LEAVE);
-    const claim = () => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key;
-    if (key === "Escape") {
-      if (ink.on)
-        return claim(), setInk(false);
-      if (slotsOf(viewOf(current)).some((s) => s.unzoom()))
-        return claim();
-      if (full)
-        return claim(), setFull(false);
-      return;
-    }
-    if (key === "f" && !e.shiftKey) {
-      if (!viewOf(current)?.media)
-        return;
-      claim();
-      return setFull(!full);
-    }
-    if (own)
-      return;
-    if (key === "j" || key === "k" || key === "ArrowDown" || key === "ArrowUp") {
-      if (e.shiftKey && key.startsWith("Arrow"))
-        return;
-      const dir = key === "j" || key === "ArrowDown" ? 1 : -1;
-      const next = adjacentStep(views.map((v) => v.step.key), current, dir);
-      if (!next)
-        return;
-      claim();
-      if (full)
-        setFull(false);
-      return go(next);
-    }
-    if ((key === "Home" || key === "End") && views.length) {
-      claim();
-      if (full)
-        setFull(false);
-      return go(views[key === "Home" ? 0 : views.length - 1].step.key);
-    }
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      const d = (key === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 2 : 0.5);
-      if (seekBy(d))
-        claim();
+  root.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0)
       return;
+    dragging = true;
+    root.setPointerCapture(e.pointerId);
+    const host = root.closest(".knobs-compare");
+    if (host)
+      host.focus({ preventScroll: true });
+    else
+      timeline.focus();
+    if (timeline.playing)
+      timeline.pause();
+    pick(e.clientX);
+    e.preventDefault();
+  });
+  root.addEventListener("pointermove", (e) => {
+    if (dragging)
+      pick(e.clientX);
+    const i = columnAt(e.clientX);
+    if (i !== hover) {
+      hover = i;
+      schedule();
     }
-    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);
+  });
+  const end = () => {
+    dragging = false;
+  };
+  root.addEventListener("pointerup", end);
+  root.addEventListener("pointercancel", end);
+  root.addEventListener("lostpointercapture", end);
+  root.addEventListener("pointerleave", () => {
+    if (hover === null)
       return;
+    hover = null;
+    schedule();
+  });
+  const unlisten = timeline.listen({ onSeek: schedule, onView: schedule });
+  const ro = new win.ResizeObserver(measure);
+  ro.observe(root);
+  const track = timeline.element.querySelector(".knobs-tl-track");
+  if (track)
+    ro.observe(track);
+  root.addEventListener("knobs-restyle", measure);
+  const setOnScreen = (on) => {
+    onScreen = on;
+    for (const s of sides) {
+      if (!s.frames || s.seen === on)
+        continue;
+      s.seen = on;
+      s.frames.visible(on);
     }
-    const v = viewOf(current);
-    if (!v || e.shiftKey || !review)
-      return;
-    const choice = digitChoice(v.step, state.steps[v.step.key], key);
-    if (choice === undefined)
-      return;
-    claim();
-    pick(v.step.key, choice);
   };
-  if (options.keys !== false)
-    doc.addEventListener("keydown", onKey);
-  const unregisterHints = hints.register(root, () => {
-    const v = viewOf(current);
-    return [
-      ...v ? v.card.querySelectorAll(".knobs-wt-pick") : [],
-      ...root.querySelectorAll(".knobs-wt-tool:not([hidden]),.knobs-wt-rail .knobs-wt-btn")
-    ];
-  }, { listen: false, rank: 1 });
-  build();
-  const api = {
+  const setNear = (on) => {
+    near = on;
+    if (on) {
+      for (const s of sides)
+        load(s);
+      schedule();
+    } else
+      for (const s of sides)
+        unload(s);
+  };
+  const IO = win.IntersectionObserver;
+  const nearIo = IO ? new IO((e) => setNear(e.at(-1).isIntersecting), { rootMargin: "100% 0px" }) : null;
+  const screenIo = IO ? new IO((e) => setOnScreen(e.at(-1).isIntersecting)) : null;
+  measure();
+  if (nearIo && screenIo) {
+    nearIo.observe(root);
+    screenIo.observe(root);
+  } else {
+    setNear(true);
+    setOnScreen(true);
+  }
+  return {
     element: root,
-    get page() {
-      return page;
-    },
-    get state() {
-      return state;
-    },
-    get feedback() {
-      return feedback();
-    },
-    get current() {
-      return current;
-    },
-    markdown,
-    go: (key) => go(key),
-    full: (on) => setFull(on ?? !full),
-    send: (text) => send(text),
-    set(next) {
-      const keep = current;
-      const sameId = next.id === page.id;
-      page = normalizeWalkthrough(next);
-      if (!sameId)
-        state = load();
-      build();
-      if (keep && viewOf(keep))
-        go(keep);
-    },
-    reset() {
-      state = EMPTY_STATE;
-      for (const v of views) {
-        v.taste?.pick(null);
-        v.notes.textContent = "";
-        syncGlyph(v);
-      }
-      syncProgress();
-      emit();
+    diffs,
+    update(next) {
+      const was = sides;
+      sides = [
+        next.before ? makeSide(next.before) : was[0],
+        next.after ? makeSide(next.after) : was[1]
+      ];
+      for (const s of was)
+        if (!sides.includes(s))
+          unload(s);
+      diffs.clear();
+      pairDiffs.clear();
+      asked = "";
+      if (near)
+        for (const s of sides)
+          load(s);
+      if (onScreen)
+        setOnScreen(true);
+      schedule();
     },
     dispose() {
-      if (disposed)
-        return;
       disposed = true;
-      win.clearTimeout(emitTimer);
-      win.clearTimeout(backTimer);
-      win.clearInterval(ticker);
-      win.clearInterval(voice.timer);
-      voice.recorder?.stop();
-      motion.stop();
-      if (scrollRaf)
-        win.cancelAnimationFrame(scrollRaf);
-      win.removeEventListener("scroll", onScroll, { capture: true });
-      win.removeEventListener("resize", onScroll);
-      win.removeEventListener("resize", onFullResize);
-      for (const type of ["wheel", "touchstart"])
-        win.removeEventListener(type, stopScroll);
-      doc.removeEventListener("keydown", onKey);
-      unregisterHints();
-      bar.unobserve();
-      pill?.dispose();
-      for (const d of discs)
-        d.dispose();
-      if (padded)
-        padded.el.style.scrollPaddingBottom = padded.was;
-      for (const v of views) {
-        v.slots.forEach((s) => s.dispose());
-        v.taste?.dispose();
-      }
+      if (raf)
+        win.cancelAnimationFrame(raf);
+      unlisten();
+      ro.disconnect();
+      nearIo?.disconnect();
+      screenIo?.disconnect();
+      for (const s of sides)
+        unload(s);
       root.remove();
     }
   };
-  return api;
 }
 
 // src/review/index.ts
-init_compare();
-init_compare_strip();
 init_player();
 init_diff();
 export {