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

package/dist/ui.js

@@ -647,7 +647,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;
@@ -667,6 +666,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
@@ -1448,6 +1450,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",
@@ -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(",");
@@ -3565,12 +3584,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)
@@ -6716,6 +6747,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;
@@ -6836,7 +6892,7 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), 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(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), 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) => {
@@ -7083,6 +7139,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 [];
@@ -7113,6 +7188,24 @@ function nearestKey(keys, frame, within = Infinity) {
   }
   return best !== null && bestD <= within ? best : null;
 }
+function claim(core) {
+  if (!round2) {
+    const r = new Set;
+    round2 = r;
+    queueMicrotask(() => {
+      for (const c of actives)
+        if (!r.has(c)) {
+          c.active = false;
+          c.dropFull();
+        }
+      actives = r;
+      round2 = null;
+    });
+  }
+  round2.add(core);
+  actives.add(core);
+  core.active = true;
+}
 function pump(win) {
   if (running)
     return;
@@ -7120,12 +7213,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;
@@ -7155,12 +7250,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;
@@ -7181,6 +7363,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;
@@ -7311,18 +7558,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--;
         });
@@ -7436,6 +7715,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() {
@@ -7444,29 +7742,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)
@@ -7504,12 +7829,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)
@@ -7518,8 +7846,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)
@@ -7527,6 +7860,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");
@@ -7534,24 +7869,45 @@ function makeCore(doc, key, src, fps) {
       }
       buf = null;
       track = null;
-      if (active === core)
-        active = null;
+      actives.delete(core);
+      round2?.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, round2 = 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
@@ -7817,1046 +8173,695 @@ var init_compare_gpu = __esm(() => {
   lostListeners = new Set;
 });
 
-// src/ui/compare-strip.ts
-function compareStrip(container, options) {
+// src/ui/compare.ts
+function compare(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");
+  const caching = scrubCaching(options.scrubCache, win);
+  const look = {
+    ...options.preset ? { preset: options.preset } : {},
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
+  };
+  const offered = compareModes(options.modes, options.mode);
+  const modeList = offered.modes;
+  let mode = offered.mode;
+  let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
+  let loupeOn = options.loupe ?? false;
+  let threshold = options.threshold ?? 4 / 255;
+  let fpsOpt = options.fps;
+  const bound = typeof options.timeline === "object" ? options.timeline : null;
+  const fps = () => fpsOpt ?? bound?.fps ?? 30;
+  const auto = container.clientHeight < 1;
+  const el = (tag, cls) => {
+    const n = doc.createElement(tag);
+    n.className = cls;
+    return n;
+  };
+  const root = el("div", "knobs-compare");
+  root.tabIndex = 0;
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-roledescription", "compare");
+  root.setAttribute("aria-label", options.label ?? "Compare");
+  root.setAttribute("aria-keyshortcuts", `Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . ${modeList.map((m, i) => `${i + 1} ${modeKey(m)}`).join(" ")} Z L 0 = -`);
   applyLook2(root, options);
-  const canvas = doc.createElement("canvas");
+  root.dataset.mode = mode;
+  if (auto)
+    root.dataset.auto = "";
+  const bar = el("div", "knobs-cmp-bar");
+  const modes = el("div", "knobs-cmp-modes");
+  modes.setAttribute("role", "radiogroup");
+  modes.setAttribute("aria-label", "Mode");
+  modes.hidden = modeList.length < 2;
+  const modeBtns = modeList.map((m, i) => {
+    const b = el("button", "knobs-cmp-mode");
+    b.type = "button";
+    b.tabIndex = -1;
+    b.textContent = MODE_LABEL[m].short;
+    b.title = `${MODE_LABEL[m].long} · ${i + 1} or ${modeKey(m)}`;
+    b.setAttribute("role", "radio");
+    b.setAttribute("aria-keyshortcuts", `${i + 1} ${modeKey(m)}`);
+    b.addEventListener("click", () => {
+      setMode(m);
+      root.focus({ preventScroll: true });
+    });
+    modes.append(b);
+    return b;
+  });
+  const toggleBtn = (name, label, title) => {
+    const b = el("button", "knobs-cmp-toggle");
+    b.type = "button";
+    b.tabIndex = -1;
+    b.innerHTML = icon(name);
+    b.setAttribute("aria-label", label);
+    b.title = title;
+    return b;
+  };
+  const loupeBtn = toggleBtn("magnifyingGlass", "Loupe", "Loupe · hold Z");
+  loupeBtn.addEventListener("click", () => {
+    setLoupe(!loupeOn);
+    root.focus({ preventScroll: true });
+  });
+  const loopBtn = toggleBtn("repeat", "Loop", "Loop · L (drag its ends on the timeline)");
+  loopBtn.setAttribute("aria-keyshortcuts", "L");
+  loopBtn.addEventListener("click", () => {
+    api.setLoop(!loopNow());
+    root.focus({ preventScroll: true });
+  });
+  bar.append(modes, el("span", "knobs-cmp-fill"), loopBtn, loupeBtn);
+  const stage = el("div", "knobs-cmp-stage");
+  const canvas = el("canvas", "knobs-cmp-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
+  const split = el("div", "knobs-cmp-split");
+  split.setAttribute("aria-hidden", "true");
+  const zoomPill = el("div", "knobs-cmp-zoom");
+  const zoomPct = el("span", "knobs-cmp-zoom-pct");
+  const zoomReset = el("button", "knobs-cmp-zoom-reset");
+  zoomReset.type = "button";
+  zoomReset.tabIndex = -1;
+  zoomReset.innerHTML = icon("arrowCounterClockwise", { small: true });
+  zoomReset.setAttribute("aria-label", "Reset zoom");
+  zoomReset.title = "Fit · 0 or double-click";
+  zoomReset.addEventListener("click", () => {
+    api.setZoom(null);
+    root.focus({ preventScroll: true });
   });
-  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;
+  zoomPill.append(zoomPct, zoomReset);
+  const labels = [el("div", "knobs-cmp-label"), el("div", "knobs-cmp-label")];
+  labels[0].dataset.side = "before";
+  labels[1].dataset.side = "after";
+  const setLabel = (index, text) => {
+    const l = labels[index];
+    if (!l.firstElementChild) {
+      const mark = el("span", "knobs-cmp-mark");
+      mark.innerHTML = icon(index === 0 ? "x" : "check", { small: true });
+      l.append(mark, el("span", "knobs-cmp-name"));
     }
+    const name = l.lastElementChild;
+    if (name.textContent !== text)
+      name.textContent = text;
   };
-  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;
+  const seam = el("div", "knobs-cmp-seam");
+  seam.setAttribute("aria-hidden", "true");
+  const handle = el("div", "knobs-cmp-handle");
+  handle.setAttribute("role", "slider");
+  handle.setAttribute("aria-label", "Wipe");
+  handle.setAttribute("aria-valuemin", "0");
+  handle.setAttribute("aria-valuemax", "100");
+  const grip = el("span", "knobs-cmp-grip");
+  grip.setAttribute("aria-hidden", "true");
+  handle.append(grip);
+  const note = el("div", "knobs-cmp-note");
+  stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note);
+  root.append(bar, stage);
+  let tl = bound;
+  let ownTimeline = false;
+  if (!tl && options.timeline === true) {
+    const host = el("div", "knobs-cmp-timeline-host");
+    root.append(host);
+    tl = timeline(host, {
+      ...look,
+      variant: "line",
+      duration: 1,
+      fps: fps(),
+      arrows: { step: 0.5, shift: 2 },
+      label: "Compare time",
+      ...options.hints === false ? { hints: false } : {}
+    });
+    ownTimeline = true;
+  }
+  container.append(root);
+  const sides = [null, null];
+  let duration = 0;
+  let renderer = "dom";
+  let pending = false;
+  let gpu = null;
+  const lay = new Spring(mode === "side" ? 0 : 1, LAYOUT.omega, LAYOUT.zeta, 0.0001);
+  const fade = new Spring(1, FADE2.omega, FADE2.zeta, 0.001);
+  let fromMode = mode;
+  let toMode = mode;
+  const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
+  let wipeCatching = false;
+  const gripAt = new Spring(0.5, LAYOUT.omega, LAYOUT.zeta, 0.0001);
+  let loupeHeld = false;
+  let pointer = null;
+  let drag = null;
+  let tap = null;
+  const touches = new Map;
+  let pinch = null;
+  const zu = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
+  const zv = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
+  const zw = new Spring(1, ZOOM.omega, ZOOM.zeta, 0.00001);
+  let viewSent = "0.0000,0.0000,1.0000|";
+  let ownLoop = null;
+  let scrubbing = false;
+  let stageW = 1;
+  let stageH = 1;
+  let stageRect = null;
+  let accent = [0.49, 0.81, 0.61];
+  let labelW = [0, 0];
+  let frameRadius = 0;
+  let dirty = true;
+  let disposed = false;
+  let near = options.lazy === false;
+  let onScreen = options.lazy === false;
+  let releaseTimer = 0;
+  let ownTime = 0;
+  let ownPlaying = false;
+  const videoOf = (s) => s && s.kind === "video" && s.loaded ? s.el : null;
+  const master = () => videoOf(sides[1]) ?? videoOf(sides[0]);
+  const follower = () => {
+    const m = master();
+    const v = videoOf(sides[0]);
+    return m && v && v !== m ? v : 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 now = () => tl ? tl.time : ownTime;
+  const isPlaying = () => tl ? tl.playing : ownPlaying;
+  const labelOf = (index) => sides[index]?.source.label ?? (index === 0 ? options.before.label : options.after.label) ?? (index === 0 ? "Before" : "After");
+  const sizeOf = (s) => {
+    if (s.size.w > 0)
+      return s.size;
+    const other = sides[s.index === 0 ? 1 : 0];
+    if (other && other.size.w > 0)
+      return other.size;
+    return { w: options.aspect ?? 16 / 9, h: 1 };
   };
-  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 wantOf = (s) => {
+    const v = s.el;
+    const f = frameOf(now(), fps());
+    return Number.isFinite(v.duration) ? Math.min(f, lastFrame(v.duration, fps())) : f;
   };
-  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 emitFrame = (s, frame, source) => root.dispatchEvent(new CustomEvent("knobs-compare-frame", { detail: { side: s.index, frame, source } }));
+  const setCached = (s, on) => {
+    if (renderer === "dom")
+      s.preview.style.display = on ? "" : "none";
   };
-  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 showVideo = (s) => {
+    const v = s.el;
+    if (renderer === "gpu") {
+      if (!gpu)
+        return;
+      if (!gpu.upload(s.index, v, v.videoWidth, v.videoHeight))
+        return miss(s);
+      s.misses = 0;
+    }
+    const f = frameOf(v.currentTime, fps());
+    s.shown = { frame: f, cached: false };
+    setCached(s, false);
+    emitFrame(s, f, "video");
+    requestDraw();
   };
-  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)
+  const showCached = (s, c) => {
+    if (s.shown?.cached && s.shown.frame === c.frame)
       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 {
+    if (renderer === "gpu") {
+      if (!gpu || !gpu.upload(2 + s.index, c.bitmap, c.bitmap.width, c.bitmap.height))
+        return;
+    } else if (renderer === "dom" && !pending) {
+      const p = s.preview;
+      if (p.width !== c.bitmap.width || p.height !== c.bitmap.height) {
+        p.width = c.bitmap.width;
+        p.height = c.bitmap.height;
+      }
+      p.getContext("2d")?.drawImage(c.bitmap, 0, 0);
+    } else
       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})`;
+    s.shown = { frame: c.frame, cached: true };
+    setCached(s, true);
+    emitFrame(s, c.frame, "cache");
+    requestDraw();
   };
-  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])
-    };
+  const miss = (s) => {
+    if (s.failed || ++s.misses < 3)
+      return;
+    gpu?.dispose();
+    gpu = null;
+    setRenderer("dom");
   };
-  let hover = null;
-  let raf = 0;
-  let asked = "";
-  function schedule() {
-    if (!raf && !disposed)
-      raf = win.requestAnimationFrame(draw);
-  }
-  const draw = () => {
-    raf = 0;
-    if (!near)
+  const pushFrame = (s) => {
+    if (!s.loaded || disposed)
       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;
+    if (s.kind === "image") {
+      const img = s.el;
+      if (!(img.complete && img.naturalWidth))
+        return;
+      if (renderer === "gpu" && gpu) {
+        if (!gpu.upload(s.index, img, img.naturalWidth, img.naturalHeight))
+          return miss(s);
+      }
+      s.shown = { frame: 0, cached: false };
+      return requestDraw();
     }
-    const ctx = canvas.getContext("2d");
-    if (!ctx)
+    const v = s.el;
+    if (v.readyState < 2)
+      return;
+    if (isPlaying() || !s.frames)
+      return showVideo(s);
+    const want = wantOf(s);
+    const at = frameOf(v.currentTime, fps());
+    if (at === want) {
+      showVideo(s);
+      s.frames.keep(at, v, v.videoWidth, v.videoHeight);
       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 c = s.frames.nearest(want, Number.POSITIVE_INFINITY, true);
+    if (c && Math.abs(c.frame - want) < Math.abs(at - want))
+      showCached(s, c);
+    else
+      showVideo(s);
+  };
+  const refreshCached = (s) => {
+    if (!s.loaded || !s.frames || isPlaying())
+      return;
+    const want = wantOf(s);
+    if (s.shown && !s.shown.cached && s.shown.frame === want)
+      return;
+    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");
+    media.dataset.side = index === 0 ? "before" : "after";
+    media.crossOrigin = "anonymous";
+    media.setAttribute("aria-hidden", "true");
+    const preview = el("canvas", "knobs-cmp-media knobs-cmp-preview");
+    preview.dataset.side = media.dataset.side;
+    preview.style.display = "none";
+    preview.setAttribute("aria-hidden", "true");
+    const offs = [];
+    const on = (type, f) => {
+      media.addEventListener(type, f);
+      offs.push(() => media.removeEventListener(type, f));
+    };
+    const side = {
+      index,
+      source,
+      kind,
+      el: media,
+      preview,
+      size: { w: 0, h: 0 },
+      seek: SEEK_IDLE,
+      loaded: false,
+      frames: null,
+      unlisten: null,
+      seen: false,
+      shown: null,
+      frameAt: 0,
+      misses: 0,
+      failed: false,
+      stall: stallGuard(win, () => giveUp(side)),
+      stop: () => {
+        side.stall.clear();
+        for (const f of offs)
+          f();
       }
-      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)
+    };
+    const fail = () => {
+      if (!side.loaded)
         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;
+      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;
+      v.muted = true;
+      v.defaultMuted = true;
+      v.playsInline = true;
+      v.preload = "auto";
+      v.setAttribute("playsinline", "");
+      v.setAttribute("muted", "");
+      on("loadedmetadata", () => {
+        side.size = { w: v.videoWidth, h: v.videoHeight };
+        measureDuration();
+        if (auto)
+          measure();
+        if (isPlaying())
+          jumpAll(now());
+        else
+          showFrame(now(), false);
+        requestDraw();
+      });
+      on("resize", () => {
+        side.size = { w: v.videoWidth, h: v.videoHeight };
+        requestDraw();
+      });
+      on("loadeddata", () => pushFrame(side));
+      on("seeked", () => {
+        const step = seeked(side.seek, v.currentTime, fps());
+        side.seek = step.state;
+        if (step.apply !== null)
+          seekVideo(side, v, step.apply);
+        else
+          side.stall.clear();
+        pushFrame(side);
+      });
+      on("error", fail);
+      if (v.requestVideoFrameCallback) {
+        let id = 0;
+        const frame = () => {
+          side.frameAt = performance.now();
+          pushFrame(side);
+          id = v.requestVideoFrameCallback(frame);
+        };
+        id = v.requestVideoFrameCallback(frame);
+        offs.push(() => v.cancelVideoFrameCallback?.(id));
       }
-    });
-    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);
+    } else {
+      on("load", () => {
+        side.size = { w: media.naturalWidth, h: media.naturalHeight };
+        if (auto)
+          measure();
+        pushFrame(side);
+        requestDraw();
+      });
+      on("error", fail);
+      media.decoding = "async";
     }
-    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;
+    return side;
   };
-  let dragging = false;
-  const pick = (clientX) => {
-    const t = timeAt(clientX);
-    timeline.seek(t);
-    options.onPick?.(t);
+  const loadSide = (s) => {
+    if (s.loaded || disposed)
+      return;
+    s.loaded = true;
+    s.failed = false;
+    s.el.src = s.source.src;
+    if (s.kind === "video" && caching) {
+      s.frames = acquireFrames(doc, s.source.src, fps());
+      s.unlisten = s.frames.listen(() => refreshCached(s));
+      if (onScreen) {
+        s.frames.visible(true);
+        s.seen = true;
+      }
+    }
   };
-  root.addEventListener("pointerdown", (e) => {
-    if (e.button !== 0)
+  const unloadSide = (s) => {
+    if (!s.loaded)
       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();
+    s.loaded = false;
+    s.el.removeAttribute("src");
+    if (s.el instanceof HTMLVideoElement)
+      s.el.load();
+    s.seek = SEEK_IDLE;
+    s.stall.clear();
+    s.shown = null;
+    setCached(s, false);
+    s.unlisten?.();
+    s.unlisten = null;
+    if (s.frames) {
+      if (s.seen)
+        s.frames.visible(false);
+      s.seen = false;
+      s.frames.release();
+      s.frames = null;
     }
-  });
-  const end = () => {
-    dragging = false;
+    gpu?.clear(s.index);
   };
-  root.addEventListener("pointerup", end);
-  root.addEventListener("pointercancel", end);
-  root.addEventListener("lostpointercapture", end);
-  root.addEventListener("pointerleave", () => {
-    if (hover === null)
+  const measureDuration = () => {
+    const next = Math.max(0, ...sides.map((s) => {
+      const v = videoOf(s);
+      return v && Number.isFinite(v.duration) ? v.duration : 0;
+    }));
+    if (next <= 0 || next === duration)
       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;
+    duration = next;
+    if (ownTimeline && tl)
+      tl.update({ duration, fps: fps() });
+  };
+  const setRenderer = (next) => {
+    pending = false;
+    renderer = next;
+    root.dataset.renderer = next;
+    loupeBtn.hidden = next !== "gpu";
+    canvas.style.display = next === "gpu" ? "" : "none";
     for (const s of sides) {
-      if (!s.frames || s.seen === on)
-        continue;
-      s.seen = on;
-      s.frames.visible(on);
+      const st = s.el.style;
+      st.clipPath = "";
+      st.maskImage = "";
+      st.setProperty("-webkit-mask-image", "");
+      st.mixBlendMode = "";
+      st.opacity = "";
+      s.shown = null;
+      setCached(s, false);
     }
+    for (const s of sides)
+      pushFrame(s);
+    requestDraw();
   };
-  const setNear = (on) => {
-    near = on;
-    if (on) {
-      for (const s of sides)
-        load(s);
-      schedule();
-    } else
-      for (const s of sides)
-        unload(s);
+  const startGpu = async (retry) => {
+    const g = await createCompareGpu(canvas, () => {
+      gpu = null;
+      if (disposed)
+        return;
+      if (retry)
+        win.setTimeout(() => void startGpu(false), 150);
+      else
+        setRenderer("dom");
+    });
+    if (disposed)
+      return g?.dispose();
+    if (!g)
+      return setRenderer("dom");
+    gpu = g;
+    setRenderer("gpu");
   };
-  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();
+  const syncModeUi = () => {
+    root.dataset.mode = mode;
+    modeList.forEach((m, i) => {
+      modeBtns[i].setAttribute("aria-checked", String(m === mode));
+    });
+    handle.tabIndex = mode === "wipe" ? 0 : -1;
+    modePill?.update();
+  };
+  const setMode = (next, emit = true) => {
+    if (next === mode || !modeList.includes(next))
+      return;
+    mode = next;
+    const reduced = reducedMotion(win);
+    tune(fade, reduced ? FADE_REDUCED : FADE2);
+    if (fade.x >= 0.5) {
+      fromMode = toMode;
+      fade.snap(0);
     }
+    toMode = next;
+    fade.set(1);
+    if (reduced)
+      lay.snap(next === "side" ? 0 : 1);
+    else
+      lay.set(next === "side" ? 0 : 1);
+    syncModeUi();
+    if (emit)
+      options.onMode?.(next);
+    requestDraw();
   };
-}
-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/compare.ts
-function compare(container, options) {
-  const doc = container.ownerDocument;
-  const win = doc.defaultView;
-  const look = {
-    ...options.preset ? { preset: options.preset } : {},
-    ...options.theme ? { theme: options.theme } : {},
-    ...options.appearance ? { appearance: options.appearance } : {}
+  const setWipe = (next, emit = true, jump = false) => {
+    const w = Math.min(1, Math.max(0, next));
+    if (w === wipe && !jump)
+      return;
+    wipe = w;
+    const minGap = 2 / Math.max(1, wipeRect(layoutNow().L.overlay).w);
+    const head = moveHead({ x: wipeLine.x, target: wipeLine.target }, w, jump && !reducedMotion(win) ? "jump" : "follow", wipeCatching, minGap);
+    wipeCatching = head.catching;
+    if (head.catching) {
+      wipeLine.x = head.x;
+      wipeLine.target = head.target;
+    } else
+      wipeLine.snap(head.x);
+    if (emit)
+      options.onWipe?.(w);
+    if (head.catching)
+      requestDraw();
+    else
+      drawNow();
   };
-  const offered = compareModes(options.modes, options.mode);
-  const modeList = offered.modes;
-  let mode = offered.mode;
-  let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
-  let loupeOn = options.loupe ?? false;
-  let threshold = options.threshold ?? 4 / 255;
-  let fpsOpt = options.fps;
-  const bound = typeof options.timeline === "object" ? options.timeline : null;
-  const fps = () => fpsOpt ?? bound?.fps ?? 30;
-  const auto = container.clientHeight < 1;
-  const el = (tag, cls) => {
-    const n = doc.createElement(tag);
-    n.className = cls;
-    return n;
+  const setLoupe = (on) => {
+    loupeOn = on;
+    loupeBtn.setAttribute("aria-pressed", String(on));
+    requestDraw();
   };
-  const root = el("div", "knobs-compare");
-  root.tabIndex = 0;
-  root.setAttribute("role", "group");
-  root.setAttribute("aria-roledescription", "compare");
-  root.setAttribute("aria-label", options.label ?? "Compare");
-  root.setAttribute("aria-keyshortcuts", `Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . ${modeList.map((m, i) => `${i + 1} ${modeKey(m)}`).join(" ")} Z L 0 = -`);
-  applyLook2(root, options);
-  root.dataset.mode = mode;
-  if (auto)
-    root.dataset.auto = "";
-  const bar = el("div", "knobs-cmp-bar");
-  const modes = el("div", "knobs-cmp-modes");
-  modes.setAttribute("role", "radiogroup");
-  modes.setAttribute("aria-label", "Mode");
-  modes.hidden = modeList.length < 2;
-  const modeBtns = modeList.map((m, i) => {
-    const b = el("button", "knobs-cmp-mode");
-    b.type = "button";
-    b.tabIndex = -1;
-    b.textContent = MODE_LABEL[m].short;
-    b.title = `${MODE_LABEL[m].long} · ${i + 1} or ${modeKey(m)}`;
-    b.setAttribute("role", "radio");
-    b.setAttribute("aria-keyshortcuts", `${i + 1} ${modeKey(m)}`);
-    b.addEventListener("click", () => {
-      setMode(m);
-      root.focus({ preventScroll: true });
-    });
-    modes.append(b);
-    return b;
-  });
-  const toggleBtn = (name, label, title) => {
-    const b = el("button", "knobs-cmp-toggle");
-    b.type = "button";
-    b.tabIndex = -1;
-    b.innerHTML = icon(name);
-    b.setAttribute("aria-label", label);
-    b.title = title;
-    return b;
+  const clampTime = (v, t) => Math.min(Math.max(0, t), Math.max(0, (Number.isFinite(v.duration) ? v.duration : t) - 0.001));
+  const seekVideo = (s, v, t) => {
+    const c = s.frames?.nearest(wantOf(s));
+    const far = !c || Math.abs(c.frame - wantOf(s)) > FAST_SEEK_FRAMES;
+    if (scrubbing && far && v.fastSeek)
+      v.fastSeek(t);
+    else
+      v.currentTime = t;
+    s.stall.arm();
   };
-  const loupeBtn = toggleBtn("magnifyingGlass", "Loupe", "Loupe · hold Z");
-  loupeBtn.addEventListener("click", () => {
-    setLoupe(!loupeOn);
-    root.focus({ preventScroll: true });
-  });
-  const loopBtn = toggleBtn("repeat", "Loop", "Loop · L (drag its ends on the timeline)");
-  loopBtn.setAttribute("aria-keyshortcuts", "L");
-  loopBtn.addEventListener("click", () => {
-    api.setLoop(!loopNow());
-    root.focus({ preventScroll: true });
-  });
-  bar.append(modes, el("span", "knobs-cmp-fill"), loopBtn, loupeBtn);
-  const stage = el("div", "knobs-cmp-stage");
-  const canvas = el("canvas", "knobs-cmp-canvas");
-  canvas.setAttribute("aria-hidden", "true");
-  const split = el("div", "knobs-cmp-split");
-  split.setAttribute("aria-hidden", "true");
-  const zoomPill = el("div", "knobs-cmp-zoom");
-  const zoomPct = el("span", "knobs-cmp-zoom-pct");
-  const zoomReset = el("button", "knobs-cmp-zoom-reset");
-  zoomReset.type = "button";
-  zoomReset.tabIndex = -1;
-  zoomReset.innerHTML = icon("arrowCounterClockwise", { small: true });
-  zoomReset.setAttribute("aria-label", "Reset zoom");
-  zoomReset.title = "Fit · 0 or double-click";
-  zoomReset.addEventListener("click", () => {
-    api.setZoom(null);
-    root.focus({ preventScroll: true });
-  });
-  zoomPill.append(zoomPct, zoomReset);
-  const labels = [el("div", "knobs-cmp-label"), el("div", "knobs-cmp-label")];
-  labels[0].dataset.side = "before";
-  labels[1].dataset.side = "after";
-  const setLabel = (index, text) => {
-    const l = labels[index];
-    if (!l.firstElementChild) {
-      const mark = el("span", "knobs-cmp-mark");
-      mark.innerHTML = icon(index === 0 ? "x" : "check", { small: true });
-      l.append(mark, el("span", "knobs-cmp-name"));
+  const showFrame = (t, used) => {
+    for (const s of sides) {
+      const v = videoOf(s);
+      if (!v || v.readyState < 1)
+        continue;
+      if (!v.paused) {
+        v.pause();
+        v.playbackRate = 1;
+      }
+      const want = Math.min(frameOf(t, fps()), lastFrame(v.duration, fps()));
+      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);
     }
-    const name = l.lastElementChild;
-    if (name.textContent !== text)
-      name.textContent = text;
-  };
-  const seam = el("div", "knobs-cmp-seam");
-  seam.setAttribute("aria-hidden", "true");
-  const handle = el("div", "knobs-cmp-handle");
-  handle.setAttribute("role", "slider");
-  handle.setAttribute("aria-label", "Wipe");
-  handle.setAttribute("aria-valuemin", "0");
-  handle.setAttribute("aria-valuemax", "100");
-  const grip = el("span", "knobs-cmp-grip");
-  grip.setAttribute("aria-hidden", "true");
-  handle.append(grip);
-  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)) {
-    const host = el("div", "knobs-cmp-timeline-host");
-    root.append(host);
-    tl = timeline(host, {
-      ...look,
-      variant: "line",
-      duration: 1,
-      fps: fps(),
-      arrows: { step: 0.5, shift: 2 },
-      label: "Compare time",
-      ...options.hints === false ? { hints: false } : {}
-    });
-    ownTimeline = true;
-  }
-  container.append(root);
-  const sides = [null, null];
-  let duration = 0;
-  let renderer = "dom";
-  let pending = false;
-  let gpu = null;
-  const lay = new Spring(mode === "side" ? 0 : 1, LAYOUT.omega, LAYOUT.zeta, 0.0001);
-  const fade = new Spring(1, FADE2.omega, FADE2.zeta, 0.001);
-  let fromMode = mode;
-  let toMode = mode;
-  const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
-  let wipeCatching = false;
-  const gripAt = new Spring(0.5, LAYOUT.omega, LAYOUT.zeta, 0.0001);
-  let loupeHeld = false;
-  let pointer = null;
-  let drag = null;
-  let tap = null;
-  const touches = new Map;
-  let pinch = null;
-  const zu = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
-  const zv = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
-  const zw = new Spring(1, ZOOM.omega, ZOOM.zeta, 0.00001);
-  let viewSent = "0.0000,0.0000,1.0000|";
-  let ownLoop = null;
-  let scrubbing = false;
-  let stageW = 1;
-  let stageH = 1;
-  let stageRect = null;
-  let accent = [0.49, 0.81, 0.61];
-  let labelW = [0, 0];
-  let frameRadius = 0;
-  let dirty = true;
-  let disposed = false;
-  let near = options.lazy === false;
-  let onScreen = options.lazy === false;
-  let releaseTimer = 0;
-  let ownTime = 0;
-  let ownPlaying = false;
-  const videoOf = (s) => s && s.kind === "video" && s.loaded ? s.el : null;
-  const master = () => videoOf(sides[1]) ?? videoOf(sides[0]);
-  const follower = () => {
-    const m = master();
-    const v = videoOf(sides[0]);
-    return m && v && v !== m ? v : null;
-  };
-  const now = () => tl ? tl.time : ownTime;
-  const isPlaying = () => tl ? tl.playing : ownPlaying;
-  const labelOf = (index) => sides[index]?.source.label ?? (index === 0 ? options.before.label : options.after.label) ?? (index === 0 ? "Before" : "After");
-  const sizeOf = (s) => {
-    if (s.size.w > 0)
-      return s.size;
-    const other = sides[s.index === 0 ? 1 : 0];
-    if (other && other.size.w > 0)
-      return other.size;
-    return { w: options.aspect ?? 16 / 9, h: 1 };
-  };
-  const wantOf = (s) => {
-    const v = s.el;
-    const f = frameOf(now(), fps());
-    return Number.isFinite(v.duration) ? Math.min(f, lastFrame(v.duration, fps())) : f;
+    requestDraw();
   };
-  const emitFrame = (s, frame, source) => root.dispatchEvent(new CustomEvent("knobs-compare-frame", { detail: { side: s.index, frame, source } }));
-  const setCached = (s, on) => {
-    if (renderer === "dom")
-      s.preview.style.display = on ? "" : "none";
+  const jumpAll = (t) => {
+    for (const s of sides) {
+      const v = videoOf(s);
+      if (!v || v.readyState < 1)
+        continue;
+      s.seek = SEEK_IDLE;
+      v.currentTime = clampTime(v, t);
+      if (v.paused)
+        v.play().catch(() => {});
+    }
   };
-  const showVideo = (s) => {
-    const v = s.el;
-    if (renderer === "gpu") {
-      if (!gpu)
-        return;
-      if (!gpu.upload(s.index, v, v.videoWidth, v.videoHeight))
-        return miss(s);
-      s.misses = 0;
+  const startVideos = () => {
+    const t = now();
+    for (const s of sides) {
+      const v = videoOf(s);
+      if (!v)
+        continue;
+      s.seek = SEEK_IDLE;
+      v.playbackRate = 1;
+      if (v.readyState >= 1 && Math.abs(v.currentTime - t) > 1.5 / fps())
+        v.currentTime = clampTime(v, t);
+      v.play().catch(() => {});
     }
-    const f = frameOf(v.currentTime, fps());
-    s.shown = { frame: f, cached: false };
-    setCached(s, false);
-    emitFrame(s, f, "video");
-    requestDraw();
+    loop.wake();
   };
-  const showCached = (s, c) => {
-    if (s.shown?.cached && s.shown.frame === c.frame)
-      return;
-    if (renderer === "gpu") {
-      if (!gpu || !gpu.upload(2 + s.index, c.bitmap, c.bitmap.width, c.bitmap.height))
-        return;
-    } else if (renderer === "dom" && !pending) {
-      const p = s.preview;
-      if (p.width !== c.bitmap.width || p.height !== c.bitmap.height) {
-        p.width = c.bitmap.width;
-        p.height = c.bitmap.height;
+  const pauseVideos = () => {
+    for (const s of sides) {
+      const v = videoOf(s);
+      if (v) {
+        v.pause();
+        v.playbackRate = 1;
       }
-      p.getContext("2d")?.drawImage(c.bitmap, 0, 0);
-    } else
-      return;
-    s.shown = { frame: c.frame, cached: true };
-    setCached(s, true);
-    emitFrame(s, c.frame, "cache");
-    requestDraw();
+    }
   };
-  const miss = (s) => {
-    if (s.failed || ++s.misses < 3)
-      return;
-    gpu?.dispose();
-    gpu = null;
-    setRenderer("dom");
+  const stopVideos = () => {
+    pauseVideos();
+    showFrame(now(), false);
   };
-  const pushFrame = (s) => {
-    if (!s.loaded || disposed)
-      return;
-    if (s.kind === "image") {
-      const img = s.el;
-      if (!(img.complete && img.naturalWidth))
-        return;
-      if (renderer === "gpu" && gpu) {
-        if (!gpu.upload(s.index, img, img.naturalWidth, img.naturalHeight))
-          return miss(s);
-      }
-      s.shown = { frame: 0, cached: false };
-      return requestDraw();
-    }
-    const v = s.el;
-    if (v.readyState < 2)
-      return;
-    if (isPlaying() || !s.frames)
-      return showVideo(s);
-    const want = wantOf(s);
-    const at = frameOf(v.currentTime, fps());
-    if (at === want) {
-      showVideo(s);
-      s.frames.keep(at, v, v.videoWidth, v.videoHeight);
-      return;
-    }
-    const c = s.frames.nearest(want);
-    if (c && Math.abs(c.frame - want) < Math.abs(at - want))
-      showCached(s, c);
+  const clock = () => {
+    const m = master();
+    if (!m || !near)
+      return Number.NaN;
+    if (m.readyState < 1 || m.seeking)
+      return tl.time;
+    return m.ended ? Number.POSITIVE_INFINITY : m.currentTime;
+  };
+  const ownSeek = (t) => {
+    ownTime = Math.min(Math.max(0, t), duration);
+    if (ownPlaying)
+      jumpAll(ownTime);
     else
-      showVideo(s);
+      showFrame(ownTime, true);
   };
-  const refreshCached = (s) => {
-    if (!s.loaded || !s.frames || isPlaying())
-      return;
-    const want = wantOf(s);
-    if (s.shown && !s.shown.cached && s.shown.frame === want)
-      return;
-    const c = s.frames.nearest(want);
-    if (!c)
+  const ownPlay = () => {
+    if (ownPlaying || !master())
       return;
-    const was = s.shown ? Math.abs(s.shown.frame - want) : Number.POSITIVE_INFINITY;
-    if (Math.abs(c.frame - want) < was)
-      showCached(s, c);
+    if (ownLoop && (ownTime < ownLoop.start || ownTime >= ownLoop.end - 0.5 / fps()))
+      ownTime = ownLoop.start;
+    else if (!ownLoop && ownTime >= duration - 0.5 / fps())
+      ownTime = 0;
+    ownPlaying = true;
+    startVideos();
   };
-  const makeSide = (index, source) => {
-    const kind = mediaKind(source.src, source.kind);
-    const media = el(kind === "video" ? "video" : "img", "knobs-cmp-media");
-    media.dataset.side = index === 0 ? "before" : "after";
-    media.crossOrigin = "anonymous";
-    media.setAttribute("aria-hidden", "true");
-    const preview = el("canvas", "knobs-cmp-media knobs-cmp-preview");
-    preview.dataset.side = media.dataset.side;
-    preview.style.display = "none";
-    preview.setAttribute("aria-hidden", "true");
-    const offs = [];
-    const on = (type, f) => {
-      media.addEventListener(type, f);
-      offs.push(() => media.removeEventListener(type, f));
-    };
-    const side = {
-      index,
-      source,
-      kind,
-      el: media,
-      preview,
-      size: { w: 0, h: 0 },
-      seek: SEEK_IDLE,
-      loaded: false,
-      frames: null,
-      unlisten: null,
-      seen: false,
-      shown: null,
-      frameAt: 0,
-      misses: 0,
-      failed: false,
-      stop: () => {
-        for (const f of offs)
-          f();
-      }
-    };
-    const fail = () => {
-      if (!side.loaded)
-        return;
-      side.failed = true;
-      note.textContent = `Couldn't load ${labelOf(index)}`;
-    };
-    if (media instanceof HTMLVideoElement) {
-      const v = media;
-      v.muted = true;
-      v.defaultMuted = true;
-      v.playsInline = true;
-      v.preload = "auto";
-      v.setAttribute("playsinline", "");
-      v.setAttribute("muted", "");
-      on("loadedmetadata", () => {
-        side.size = { w: v.videoWidth, h: v.videoHeight };
-        measureDuration();
-        if (auto)
-          measure();
-        if (isPlaying())
-          jumpAll(now());
-        else
-          showFrame(now(), false);
-        requestDraw();
-      });
-      on("resize", () => {
-        side.size = { w: v.videoWidth, h: v.videoHeight };
-        requestDraw();
-      });
-      on("loadeddata", () => pushFrame(side));
-      on("seeked", () => {
-        const step = seeked(side.seek, v.currentTime, fps());
-        side.seek = step.state;
-        if (step.apply !== null)
-          seekVideo(side, v, step.apply);
-        pushFrame(side);
-      });
-      on("error", fail);
-      if (v.requestVideoFrameCallback) {
-        let id = 0;
-        const frame = () => {
-          side.frameAt = performance.now();
-          pushFrame(side);
-          id = v.requestVideoFrameCallback(frame);
-        };
-        id = v.requestVideoFrameCallback(frame);
-        offs.push(() => v.cancelVideoFrameCallback?.(id));
-      }
-    } else {
-      on("load", () => {
-        side.size = { w: media.naturalWidth, h: media.naturalHeight };
-        if (auto)
-          measure();
-        pushFrame(side);
-        requestDraw();
-      });
-      on("error", fail);
-      media.decoding = "async";
-    }
-    return side;
-  };
-  const loadSide = (s) => {
-    if (s.loaded || disposed)
-      return;
-    s.loaded = true;
-    s.failed = false;
-    s.el.src = s.source.src;
-    if (s.kind === "video") {
-      s.frames = acquireFrames(doc, s.source.src, fps());
-      s.unlisten = s.frames.listen(() => refreshCached(s));
-      if (onScreen) {
-        s.frames.visible(true);
-        s.seen = true;
-      }
-    }
-  };
-  const unloadSide = (s) => {
-    if (!s.loaded)
+  const ownPause = () => {
+    if (!ownPlaying)
       return;
-    s.loaded = false;
-    s.el.removeAttribute("src");
-    if (s.el instanceof HTMLVideoElement)
-      s.el.load();
-    s.seek = SEEK_IDLE;
-    s.shown = null;
-    setCached(s, false);
-    s.unlisten?.();
-    s.unlisten = null;
-    if (s.frames) {
-      if (s.seen)
-        s.frames.visible(false);
-      s.seen = false;
-      s.frames.release();
-      s.frames = null;
-    }
-    gpu?.clear(s.index);
+    ownPlaying = false;
+    ownTime = Math.min(duration, frameOf(ownTime, fps()) / fps());
+    stopVideos();
   };
-  const measureDuration = () => {
-    const next = Math.max(0, ...sides.map((s) => {
-      const v = videoOf(s);
-      return v && Number.isFinite(v.duration) ? v.duration : 0;
-    }));
-    if (next <= 0 || next === duration)
-      return;
-    duration = next;
-    if (ownTimeline && tl)
-      tl.update({ duration, fps: fps() });
+  const zoomNow = () => ({ u: zu.x, v: zv.x, w: zw.x, h: zw.x });
+  const zoomed = () => zw.target < 0.999;
+  const layoutNow = () => {
+    const box = { x: 0, y: 0, w: stageW, h: stageH };
+    const L = compareLayout(box, sizeOf(sides[0]), sizeOf(sides[1]));
+    const k = lay.x;
+    const before = lerpRect(L.side.before, L.overlay.before, k);
+    const after = lerpRect(L.side.after, L.overlay.after, k);
+    const z = zoomNow();
+    return { L, before, after, zBefore: zoomedRect(before, z), zAfter: zoomedRect(after, z) };
   };
-  const setRenderer = (next) => {
-    pending = false;
-    renderer = next;
-    root.dataset.renderer = next;
-    loupeBtn.hidden = next !== "gpu";
-    canvas.style.display = next === "gpu" ? "" : "none";
-    for (const s of sides) {
-      const st = s.el.style;
-      st.clipPath = "";
-      st.maskImage = "";
-      st.setProperty("-webkit-mask-image", "");
-      st.mixBlendMode = "";
-      st.opacity = "";
-      s.shown = null;
-      setCached(s, false);
-    }
-    for (const s of sides)
-      pushFrame(s);
-    requestDraw();
+  const wipeRect = (r) => {
+    const x = Math.min(r.before.x, r.after.x);
+    const y = Math.min(r.before.y, r.after.y);
+    const x1 = Math.max(r.before.x + r.before.w, r.after.x + r.after.w);
+    const y1 = Math.max(r.before.y + r.before.h, r.after.y + r.after.h);
+    return { x, y, w: x1 - x, h: y1 - y };
   };
-  const startGpu = async (retry) => {
-    const g = await createCompareGpu(canvas, () => {
-      gpu = null;
-      if (disposed)
-        return;
-      if (retry)
-        win.setTimeout(() => void startGpu(false), 150);
-      else
-        setRenderer("dom");
-    });
-    if (disposed)
-      return g?.dispose();
-    if (!g)
-      return setRenderer("dom");
-    gpu = g;
-    setRenderer("gpu");
+  const baseAt = (p) => {
+    const r = layoutNow();
+    const inside = (b) => p.x >= b.x && p.x <= b.x + b.w && p.y >= b.y && p.y <= b.y + b.h;
+    return inside(r.after) || !inside(r.before) ? r.after : r.before;
   };
-  const syncModeUi = () => {
-    root.dataset.mode = mode;
-    modeList.forEach((m, i) => {
-      modeBtns[i].setAttribute("aria-checked", String(m === mode));
-    });
-    handle.tabIndex = mode === "wipe" ? 0 : -1;
-    modePill?.update();
+  const loupeShown = () => renderer === "gpu" && (loupeOn || loupeHeld) && pointer !== null;
+  const loopNow = () => {
+    if (!tl)
+      return ownLoop;
+    const r = tl.ranges.find((x) => x.loop);
+    return r ? { start: r.start, end: r.end } : null;
   };
-  const setMode = (next, emit = true) => {
-    if (next === mode || !modeList.includes(next))
-      return;
-    mode = next;
-    const reduced = reducedMotion(win);
-    tune(fade, reduced ? FADE_REDUCED : FADE2);
-    if (fade.x >= 0.5) {
-      fromMode = toMode;
-      fade.snap(0);
-    }
-    toMode = next;
-    fade.set(1);
-    if (reduced)
-      lay.snap(next === "side" ? 0 : 1);
-    else
-      lay.set(next === "side" ? 0 : 1);
-    syncModeUi();
-    if (emit)
-      options.onMode?.(next);
+  const syncLoopUi = () => {
+    loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
     requestDraw();
   };
-  const setWipe = (next, emit = true, jump = false) => {
-    const w = Math.min(1, Math.max(0, next));
-    if (w === wipe && !jump)
-      return;
-    wipe = w;
-    const minGap = 2 / Math.max(1, wipeRect(layoutNow().L.overlay).w);
-    const head = moveHead({ x: wipeLine.x, target: wipeLine.target }, w, jump && !reducedMotion(win) ? "jump" : "follow", wipeCatching, minGap);
-    wipeCatching = head.catching;
-    if (head.catching) {
-      wipeLine.x = head.x;
-      wipeLine.target = head.target;
-    } else
-      wipeLine.snap(head.x);
-    if (emit)
-      options.onWipe?.(w);
-    if (head.catching)
-      requestDraw();
-    else
-      drawNow();
-  };
-  const setLoupe = (on) => {
-    loupeOn = on;
-    loupeBtn.setAttribute("aria-pressed", String(on));
-    requestDraw();
-  };
-  const clampTime = (v, t) => Math.min(Math.max(0, t), Math.max(0, (Number.isFinite(v.duration) ? v.duration : t) - 0.001));
-  const seekVideo = (s, v, t) => {
-    const c = s.frames?.nearest(wantOf(s));
-    const far = !c || Math.abs(c.frame - wantOf(s)) > FAST_SEEK_FRAMES;
-    if (scrubbing && far && v.fastSeek)
-      v.fastSeek(t);
-    else
-      v.currentTime = t;
-  };
-  const showFrame = (t, used) => {
-    for (const s of sides) {
-      const v = videoOf(s);
-      if (!v || v.readyState < 1)
-        continue;
-      if (!v.paused) {
-        v.pause();
-        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);
-      refreshCached(s);
-    }
-    requestDraw();
-  };
-  const jumpAll = (t) => {
-    for (const s of sides) {
-      const v = videoOf(s);
-      if (!v || v.readyState < 1)
-        continue;
-      s.seek = SEEK_IDLE;
-      v.currentTime = clampTime(v, t);
-      if (v.paused)
-        v.play().catch(() => {});
-    }
-  };
-  const startVideos = () => {
-    const t = now();
-    for (const s of sides) {
-      const v = videoOf(s);
-      if (!v)
-        continue;
-      s.seek = SEEK_IDLE;
-      v.playbackRate = 1;
-      if (v.readyState >= 1 && Math.abs(v.currentTime - t) > 1.5 / fps())
-        v.currentTime = clampTime(v, t);
-      v.play().catch(() => {});
-    }
-    loop.wake();
-  };
-  const pauseVideos = () => {
-    for (const s of sides) {
-      const v = videoOf(s);
-      if (v) {
-        v.pause();
-        v.playbackRate = 1;
-      }
-    }
-  };
-  const stopVideos = () => {
-    pauseVideos();
-    showFrame(now(), false);
-  };
-  const clock = () => {
-    const m = master();
-    if (!m || !near)
-      return Number.NaN;
-    if (m.readyState < 1 || m.seeking)
-      return tl.time;
-    return m.ended ? Number.POSITIVE_INFINITY : m.currentTime;
-  };
-  const ownSeek = (t) => {
-    ownTime = Math.min(Math.max(0, t), duration);
-    if (ownPlaying)
-      jumpAll(ownTime);
-    else
-      showFrame(ownTime, true);
-  };
-  const ownPlay = () => {
-    if (ownPlaying || !master())
-      return;
-    if (ownLoop && (ownTime < ownLoop.start || ownTime >= ownLoop.end - 0.5 / fps()))
-      ownTime = ownLoop.start;
-    else if (!ownLoop && ownTime >= duration - 0.5 / fps())
-      ownTime = 0;
-    ownPlaying = true;
-    startVideos();
-  };
-  const ownPause = () => {
-    if (!ownPlaying)
-      return;
-    ownPlaying = false;
-    ownTime = Math.min(duration, frameOf(ownTime, fps()) / fps());
-    stopVideos();
-  };
-  const zoomNow = () => ({ u: zu.x, v: zv.x, w: zw.x, h: zw.x });
-  const zoomed = () => zw.target < 0.999;
-  const layoutNow = () => {
-    const box = { x: 0, y: 0, w: stageW, h: stageH };
-    const L = compareLayout(box, sizeOf(sides[0]), sizeOf(sides[1]));
-    const k = lay.x;
-    const before = lerpRect(L.side.before, L.overlay.before, k);
-    const after = lerpRect(L.side.after, L.overlay.after, k);
-    const z = zoomNow();
-    return { L, before, after, zBefore: zoomedRect(before, z), zAfter: zoomedRect(after, z) };
-  };
-  const wipeRect = (r) => {
-    const x = Math.min(r.before.x, r.after.x);
-    const y = Math.min(r.before.y, r.after.y);
-    const x1 = Math.max(r.before.x + r.before.w, r.after.x + r.after.w);
-    const y1 = Math.max(r.before.y + r.before.h, r.after.y + r.after.h);
-    return { x, y, w: x1 - x, h: y1 - y };
-  };
-  const baseAt = (p) => {
-    const r = layoutNow();
-    const inside = (b) => p.x >= b.x && p.x <= b.x + b.w && p.y >= b.y && p.y <= b.y + b.h;
-    return inside(r.after) || !inside(r.before) ? r.after : r.before;
-  };
-  const loupeShown = () => renderer === "gpu" && (loupeOn || loupeHeld) && pointer !== null;
-  const loopNow = () => {
-    if (!tl)
-      return ownLoop;
-    const r = tl.ranges.find((x) => x.loop);
-    return r ? { start: r.start, end: r.end } : null;
-  };
-  const syncLoopUi = () => {
-    loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
-    requestDraw();
-  };
-  const sendView = () => {
-    if (!options.onView)
+  const sendView = () => {
+    if (!options.onView)
       return;
     const z = zoomNow();
     const l = loopNow();
@@ -9377,7 +9382,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());
@@ -9400,6 +9405,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();
@@ -9408,6 +9416,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)
@@ -9422,6 +9431,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, {
@@ -9500,7 +9510,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" ? [
@@ -9511,14 +9521,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() {
@@ -9544,7 +9546,6 @@ function compare(container, options) {
       return renderer;
     },
     timeline: tl,
-    strip,
     get zoom() {
       return clampZoom(zoomNow());
     },
@@ -9566,8 +9567,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)
@@ -9634,7 +9633,6 @@ function compare(container, options) {
         if (ownTimeline)
           tl.dispose();
       }
-      strip?.dispose();
       for (const s of sides) {
         s.stop();
         unloadSide(s);
@@ -9658,7 +9656,6 @@ var init_compare = __esm(() => {
   init_compare_frames();
   init_compare_gpu();
   init_compare_model();
-  init_compare_strip();
   init_icons();
   init_look();
   init_rgba();
@@ -9716,7 +9713,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);
@@ -9746,6 +9746,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) {
@@ -9754,6 +9805,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;
@@ -9769,6 +9825,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") {
@@ -9776,14 +9833,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;
       }
@@ -9791,8 +9858,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(() => {
@@ -9807,6 +9888,7 @@ function player(container, options) {
     tl.toggle();
   };
   frame.addEventListener("click", onClick);
+  root.addEventListener("pointerenter", startFrames);
   v.src = options.src;
   const api = {
     element: root,
@@ -9833,9 +9915,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();
@@ -9844,6 +9935,8 @@ function player(container, options) {
   return api;
 }
 var init_player = __esm(() => {
+  init_compare_frames();
+  init_compare_model();
   init_look();
   init_timeline();
 });
@@ -15687,8 +15780,66 @@ init_selection_pill();
 init_keys();
 init_layer();
 init_overlay_model();
-var tips = new WeakMap;
+
+// src/ui/tooltip-model.ts
 var HANDOFF_MS = 400;
+var TIP_DELAY_MS = 500;
+function tipSchedule(clock, view) {
+  let shown = null;
+  let pending = null;
+  let timer;
+  let hiddenAt = -Infinity;
+  const cancel = () => {
+    if (pending)
+      clock.clear(timer);
+    pending = null;
+  };
+  const hide = (now = false) => {
+    cancel();
+    if (!shown)
+      return;
+    shown = null;
+    hiddenAt = clock.now();
+    view.hide(now);
+  };
+  return {
+    get shown() {
+      return shown;
+    },
+    get pending() {
+      return pending;
+    },
+    want(tip, options = {}) {
+      if (tip.el === shown?.el || tip.el === pending?.el)
+        return;
+      cancel();
+      const handoff = shown !== null || clock.now() - hiddenAt < HANDOFF_MS;
+      if (handoff || options.now) {
+        shown = tip;
+        view.show(tip, handoff);
+        return;
+      }
+      pending = tip;
+      timer = clock.set(() => {
+        pending = null;
+        if (!view.connected(tip))
+          return;
+        shown = tip;
+        view.show(tip, false);
+      }, options.delay ?? TIP_DELAY_MS);
+    },
+    hide,
+    leave(within) {
+      if (pending && within(pending))
+        cancel();
+      if (shown && within(shown))
+        hide();
+    }
+  };
+}
+
+// src/ui/tooltip.ts
+var tips = new WeakMap;
 var controllers = new WeakMap;
 function tipOf(start) {
   let node = start instanceof Element ? start : null;
@@ -15722,9 +15873,6 @@ function controllerOf(doc) {
   let text;
   let keys;
   let target = null;
-  let pending = null;
-  let timer = 0;
-  let hiddenAt = -Infinity;
   let quiet = null;
   let keyboard = false;
   const build = (look) => {
@@ -15769,41 +15917,32 @@ function controllerOf(doc) {
     else
       motion.show();
   };
-  const hide = (now = false) => {
-    win.clearTimeout(timer);
-    pending = null;
-    if (!target)
-      return;
-    target.removeAttribute("aria-describedby");
-    target = null;
-    hiddenAt = performance.now();
-    if (now)
-      motion?.snap(0);
-    else
-      motion?.hide();
-  };
-  const want = (found) => {
+  const schedule = tipSchedule({
+    set: (run, ms) => win.setTimeout(run, ms),
+    clear: (handle) => win.clearTimeout(handle),
+    now: () => performance.now()
+  }, {
+    show: ({ el, tip }, snap) => show(el, tip, snap),
+    hide: (now) => {
+      target?.removeAttribute("aria-describedby");
+      target = null;
+      if (now)
+        motion?.snap(0);
+      else
+        motion?.hide();
+    },
+    connected: ({ el }) => el.isConnected
+  });
+  const hide = (now = false) => schedule.hide(now);
+  const want = (found, now = false) => {
     if (!found)
       return hide();
-    if (found.el === target || found.el === pending?.el)
-      return;
     if (found.el === quiet)
       return;
-    win.clearTimeout(timer);
-    const handoff = target !== null || performance.now() - hiddenAt < HANDOFF_MS;
-    if (handoff) {
-      pending = null;
-      show(found.el, found.tip, true);
-      return;
-    }
-    if (target)
-      hide();
-    pending = found;
-    timer = win.setTimeout(() => {
-      pending = null;
-      if (found.el.isConnected)
-        show(found.el, found.tip, false);
-    }, found.tip.opts.delay ?? 500);
+    schedule.want(found, {
+      now,
+      ...found.tip.opts.delay !== undefined ? { delay: found.tip.opts.delay } : {}
+    });
   };
   doc.addEventListener("pointerover", (e) => {
     if (e.pointerType === "touch")
@@ -15837,11 +15976,10 @@ function controllerOf(doc) {
   doc.addEventListener("focusin", (e) => {
     const found = tipOf(e.target);
     if (found && keyboard && e.target.matches(":focus-visible"))
-      want(found);
+      want(found, true);
   });
   doc.addEventListener("focusout", (e) => {
-    if (target && target.contains(e.target))
-      hide();
+    schedule.leave(({ el }) => el.contains(e.target));
   });
   doc.addEventListener("scroll", () => target && hide(true), true);
   const c = { hide };
@@ -16134,458 +16272,832 @@ function split(container, options) {
       };
     }
   };
-  measure();
-  const rail = (id) => {
-    const v = views.get(id);
-    return !row && v.head ? headerSize(v) : railPx;
-  };
-  const fixed = () => {
-    const out = {};
-    for (const [id, s] of springs)
-      out[id] = s.x;
-    return out;
-  };
-  const target = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail });
-  const current = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail, fixed: fixed() });
-  const SIDES = { row: ["right", "left"], column: ["bottom", "top"] };
-  const sides = (v) => {
-    const [a, b] = SIDES[direction];
-    return v.edge === "start" ? [a, b] : [b, a];
-  };
-  const renderFold = (v, size) => {
-    const id = v.spec.id;
-    const isCollapsed = collapsed[id];
-    const folding = isCollapsed || v.folding;
-    const r = rail(id);
-    const open = folding ? Math.max(v.open, r + 1) : size;
-    const p = folding ? foldProgress(size, open, r) : 0;
-    v.faces = foldFaces(v.faces, p);
-    const m = marginOf(v);
-    const settled = !springs.has(id);
-    const content = isCollapsed && settled ? 1 : v.faces.content;
-    put(v.rail ? v.inner : v.body, "will-change", v.folding ? "opacity, filter" : "");
-    if (!v.rail) {
-      put(v.inner, "height", folding ? `${open - m * 2}px` : "");
-      put(v.inner, "bottom", folding ? "auto" : "");
-      fade(v.body, content, CONTENT_BLUR);
-      if (v.toggleIcon)
-        put(v.toggleIcon, "transform", p ? `rotate(${(-90 * p).toFixed(2)}deg)` : "");
-      hide(v.body, isCollapsed && settled);
+  measure();
+  const rail = (id) => {
+    const v = views.get(id);
+    return !row && v.head ? headerSize(v) : railPx;
+  };
+  const fixed = () => {
+    const out = {};
+    for (const [id, s] of springs)
+      out[id] = s.x;
+    return out;
+  };
+  const target = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail });
+  const current = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail, fixed: fixed() });
+  const SIDES = { row: ["right", "left"], column: ["bottom", "top"] };
+  const sides = (v) => {
+    const [a, b] = SIDES[direction];
+    return v.edge === "start" ? [a, b] : [b, a];
+  };
+  const renderFold = (v, size) => {
+    const id = v.spec.id;
+    const isCollapsed = collapsed[id];
+    const folding = isCollapsed || v.folding;
+    const r = rail(id);
+    const open = folding ? Math.max(v.open, r + 1) : size;
+    const p = folding ? foldProgress(size, open, r) : 0;
+    v.faces = foldFaces(v.faces, p);
+    const m = marginOf(v);
+    const settled = !springs.has(id);
+    const content = isCollapsed && settled ? 1 : v.faces.content;
+    put(v.rail ? v.inner : v.body, "will-change", v.folding ? "opacity, filter" : "");
+    if (!v.rail) {
+      put(v.inner, "height", folding ? `${open - m * 2}px` : "");
+      put(v.inner, "bottom", folding ? "auto" : "");
+      fade(v.body, content, CONTENT_BLUR);
+      if (v.toggleIcon)
+        put(v.toggleIcon, "transform", p ? `rotate(${(-90 * p).toFixed(2)}deg)` : "");
+      hide(v.body, isCollapsed && settled);
+      return;
+    }
+    const [side, far] = sides(v);
+    put(v.inner, row ? "width" : "height", folding ? `${open - m * 2}px` : "");
+    put(v.inner, side, folding ? "0" : "");
+    put(v.inner, far, folding ? "auto" : "");
+    fade(v.inner, content, CONTENT_BLUR);
+    hide(v.clip, isCollapsed && settled);
+    const morph = row && Boolean(v.toggleIcon) && !v.el.hasAttribute("data-nested");
+    v.el.toggleAttribute("data-morph", morph);
+    const label = v.railLabel;
+    const travel = morph && style.title === "travel" && Boolean(v.titleEl) && label.textContent === v.titleEl.textContent;
+    v.el.toggleAttribute("data-travel", travel && folding);
+    if (v.countEl)
+      put(v.countEl, "opacity", travel && folding && p > 0 ? Math.max(0, 1 - p / COUNT_CLEAR).toFixed(3) : "");
+    const k = 1 - p;
+    if (travel && !folding) {
+      put(label, "opacity", "0");
+      put(label, "filter", "");
+      put(label, "transform", "");
+      put(label, "color", "");
+    } else if (travel) {
+      const t = titleTravel(v.places, open, r, v.edge, p);
+      put(label, "opacity", "");
+      put(label, "filter", "");
+      put(label, "transform", k === 0 ? "" : `translate(${t.x.toFixed(2)}px,${t.y.toFixed(2)}px) rotate(${t.turn.toFixed(2)}deg)`);
+      put(label, "color", k === 0 ? "" : `color-mix(in srgb,var(--kv-fg) ${(k * 100).toFixed(1)}%,var(--kv-fg-2))`);
+    } else {
+      put(label, "transform", "");
+      put(label, "color", "");
+    }
+    if (morph) {
+      put(v.rail, "opacity", "1");
+      if (!travel)
+        fade(label, v.faces.rail, LABEL_BLUR);
+      const c = v.chev;
+      const dx = c.chevEnd - c.iconEnd + (v.edge === "end" ? open - r : 0);
+      const move = `translate(${(dx * k).toFixed(2)}px,${(c.dy * k).toFixed(2)}px)`;
+      const size = `scale(${(1 + (c.scale - 1) * k).toFixed(4)})`;
+      if (style.chevron === "turn")
+        put(v.turn, "transform", k === 0 ? "" : `${move} rotate(${chevronTurn(p, v.edge).toFixed(2)}deg) ${size}`);
+      else {
+        const turn = chevronFlip(v.flip.x, v.edge);
+        const over = v.flip.resting ? turn === 0 ? "" : "scaleX(-1)" : `perspective(${FLIP_DEPTH}px) rotateY(${turn.toFixed(2)}deg)`;
+        put(v.turn, "transform", k === 0 && !over ? "" : `${move} ${size} ${over}`);
+      }
+    } else {
+      const a = v.faces.rail;
+      put(v.rail, "opacity", a >= 1 ? "1" : a.toFixed(3));
+      put(label, "opacity", "");
+      put(label, "filter", a >= 1 || a <= 0 ? "" : `blur(${(LABEL_BLUR * (1 - a)).toFixed(2)}px)`);
+      put(v.turn, "transform", "");
+    }
+  };
+  let lastReport = "";
+  const render = (shown) => {
+    for (const spec of specs) {
+      const v = views.get(spec.id);
+      const size = Math.max(0, shown[spec.id] ?? 0);
+      v.shown = size;
+      put(v.el, "flex-basis", `${size}px`);
+      put(v.el, row ? "width" : "height", `${size}px`);
+      v.el.toggleAttribute("data-collapsed", collapsed[spec.id]);
+      v.el.toggleAttribute("data-settled", !springs.has(spec.id));
+      if (spec.collapsible)
+        renderFold(v, size);
+    }
+    dividers.forEach((d, i) => {
+      const a = specs[i];
+      const b = specs[i + 1];
+      const now = String(Math.round(views.get(a.id).shown));
+      if (d.getAttribute("aria-valuenow") !== now)
+        d.setAttribute("aria-valuenow", now);
+      if (!d.hasAttribute("aria-controls"))
+        d.setAttribute("aria-controls", `${a.id} ${b.id}`);
+    });
+    const layout = snapshot();
+    const report = JSON.stringify(layout);
+    if (report !== lastReport) {
+      lastReport = report;
+      options.onLayout?.(layout);
+      for (const v of views.values())
+        v.el.dispatchEvent(new Event("knobs-pane-resize"));
+      notifyLayout(doc);
+    }
+  };
+  const snapshot = () => {
+    const s = {};
+    for (const [id, v] of views)
+      s[id] = Math.round(v.shown * 10) / 10;
+    return { sizes: s, collapsed: { ...collapsed } };
+  };
+  const persist = () => {
+    if (!store || !key)
+      return;
+    try {
+      store.setItem(key, serializeLayout({ sizes, collapsed }));
+    } catch {}
+  };
+  const rememberOpen = (shown) => {
+    for (const spec of specs)
+      if (!collapsed[spec.id] && !springs.has(spec.id))
+        views.get(spec.id).open = shown[spec.id];
+  };
+  const loop = frameLoop(win, (dt) => {
+    for (const [id, s] of springs) {
+      s.step(dt);
+      if (s.resting) {
+        springs.delete(id);
+        views.get(id).folding = false;
+      }
+    }
+    let flipping = false;
+    for (const v of views.values()) {
+      v.flip.step(dt);
+      if (!v.flip.resting)
+        flipping = true;
+    }
+    const shown = current();
+    if (springs.size === 0)
+      rememberOpen(shown);
+    render(shown);
+    return springs.size > 0 || flipping;
+  });
+  const animate = (motion = SETTLE) => {
+    const to = target();
+    for (const v of views.values())
+      if (v.folding && !collapsed[v.spec.id])
+        v.open = to[v.spec.id];
+    if (reducedMotion(win)) {
+      springs.clear();
+      const arriving = [...views.values()].filter((v) => v.folding).map((v) => collapsed[v.spec.id] ? v.rail : v.rail ? v.inner : v.body);
+      for (const v of views.values()) {
+        v.folding = false;
+        v.flip.snap(collapsed[v.spec.id] ? 1 : 0);
+      }
+      rememberOpen(to);
+      render(to);
+      for (const el of arriving)
+        el?.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 160,
+          easing: "cubic-bezier(.2,.8,.2,1)"
+        });
+      return;
+    }
+    for (const spec of specs) {
+      const v = views.get(spec.id);
+      const goal = to[spec.id];
+      const s = springs.get(spec.id);
+      if (s) {
+        s.omega = motion.omega;
+        s.zeta = motion.zeta;
+        s.set(goal);
+      } else if (Math.abs(goal - v.shown) > 0.5) {
+        springs.set(spec.id, new Spring(v.shown, motion.omega, motion.zeta, 0.2).set(goal));
+      } else
+        v.folding = false;
+    }
+    loop.wake();
+  };
+  const fold = (id, value) => {
+    const v = views.get(id);
+    if (value && !v.folding)
+      v.open = v.shown;
+    collapsed[id] = value;
+    v.folding = true;
+    v.flip.set(value ? 1 : 0);
+  };
+  const release = (id) => {
+    springs.delete(id);
+    views.get(id).folding = false;
+  };
+  function setCollapsed(id, value, save = true) {
+    const spec = specs.find((p) => p.id === id);
+    if (!spec?.collapsible || collapsed[id] === value)
+      return;
+    fold(id, value);
+    if (save)
+      persist();
+    animate(COLLAPSE);
+  }
+  const setSizes = (next) => {
+    for (const [id, s] of Object.entries(next))
+      sizes[id] = s;
+  };
+  function bindDivider(d, index) {
+    const a = specs[index];
+    const b = specs[index + 1];
+    let start;
+    let from = 0;
+    let pointer = -1;
+    d.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0)
+        return;
+      e.preventDefault();
+      d.focus({ preventScroll: true });
+      const shown = current();
+      for (const id of [a.id, b.id])
+        if (!collapsed[id])
+          release(id);
+      start = { ...shown };
+      for (const id of [a.id, b.id])
+        if (collapsed[id])
+          start[id] = rail(id);
+      from = row ? e.clientX : e.clientY;
+      pointer = e.pointerId;
+      d.setPointerCapture(e.pointerId);
+      d.dataset.active = "";
+      doc.documentElement.dataset.knobsResizing = direction;
+    });
+    d.addEventListener("pointermove", (e) => {
+      if (!start || e.pointerId !== pointer)
+        return;
+      const delta = (row ? e.clientX : e.clientY) - from;
+      const result = drag(specs, start, index, delta, collapsed);
+      if (result.collapse) {
+        const { id, collapsed: now } = result.collapse;
+        if (!now) {
+          for (const [k, s] of Object.entries(result.sizes))
+            if (k === id)
+              sizes[k] = s;
+        }
+        setCollapsed(id, now, false);
+        start = { ...target() };
+        if (now)
+          start[id] = rail(id);
+        from = row ? e.clientX : e.clientY;
+        return;
+      }
+      if (collapsed[a.id] || collapsed[b.id])
+        return;
+      setSizes(result.sizes);
+      for (const id of [a.id, b.id])
+        release(id);
+      const shown = current();
+      render(shown);
+      rememberOpen(shown);
+    });
+    const end = (e) => {
+      if (!start || e.pointerId !== pointer)
+        return;
+      start = undefined;
+      delete d.dataset.active;
+      delete doc.documentElement.dataset.knobsResizing;
+      for (const spec of specs)
+        if (flex.has(spec.id) && !collapsed[spec.id])
+          sizes[spec.id] = views.get(spec.id).shown;
+      persist();
+    };
+    d.addEventListener("pointerup", end);
+    d.addEventListener("pointercancel", end);
+    d.addEventListener("lostpointercapture", end);
+    d.addEventListener("dblclick", (e) => {
+      e.preventDefault();
+      reset(a.id, b.id);
+    });
+    d.addEventListener("keydown", (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey)
+        return;
+      const back = row ? "ArrowLeft" : "ArrowUp";
+      const fwd = row ? "ArrowRight" : "ArrowDown";
+      const step = e.shiftKey ? 64 : 16;
+      let handled = true;
+      if (e.key === back || e.key === fwd) {
+        const goal = target();
+        const shut = [a.id, b.id].find((id) => collapsed[id]);
+        if (shut)
+          setCollapsed(shut, false);
+        else {
+          setSizes(nudge(specs, goal, index, e.key === fwd ? step : -step));
+          persist();
+          animate();
+        }
+      } else if (e.key === "Home" || e.key === "End") {
+        const goal = target();
+        setSizes(nudge(specs, goal, index, e.key === "End" ? 1e6 : -1e6));
+        persist();
+        animate();
+      } else if (e.key === "Enter" || e.key === " ") {
+        const id = collapsibleSide(specs, index);
+        if (id)
+          setCollapsed(id, !collapsed[id]);
+        else
+          handled = false;
+      } else if (e.key === "Escape")
+        d.blur();
+      else
+        handled = false;
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+  }
+  function reset(...ids) {
+    const which = ids.length ? ids : specs.map((p) => p.id);
+    let folds = false;
+    for (const id of which) {
+      delete sizes[id];
+      const spec = specs.find((p) => p.id === id);
+      const shut = Boolean(spec?.collapsed);
+      if (spec?.collapsible && collapsed[id] !== shut) {
+        fold(id, shut);
+        folds = true;
+      }
+    }
+    if (which.some((id) => flex.has(id)))
+      for (const id of flex)
+        delete sizes[id];
+    persist();
+    animate(folds ? COLLAPSE : SETTLE);
+  }
+  {
+    const first = target();
+    for (const spec of specs) {
+      const open = { ...collapsed, [spec.id]: false };
+      views.get(spec.id).open = collapsed[spec.id] ? solve2({ panes: specs, sizes, collapsed: open, total: total(), rail })[spec.id] : first[spec.id];
+    }
+    render(first);
+    measureChevrons();
+    render(first);
+  }
+  const relayout = (remeasure) => {
+    if (remeasure)
+      measure();
+    if (springs.size) {
+      if (remeasure)
+        measureChevrons();
+      return loop.wake();
+    }
+    const shown = target();
+    rememberOpen(shown);
+    render(shown);
+    if (remeasure) {
+      measureChevrons();
+      render(shown);
+    }
+  };
+  const ro = new ResizeObserver(() => relayout(!measured));
+  ro.observe(root);
+  const restyled = () => relayout(true);
+  root.addEventListener("knobs-restyle", restyled);
+  const paneApi = (id) => {
+    const v = views.get(id);
+    if (!v)
+      throw new Error(`No pane "${id}"`);
+    return {
+      id,
+      element: v.el,
+      body: v.body,
+      header: v.head,
+      get size() {
+        return v.shown;
+      },
+      get collapsed() {
+        return collapsed[id];
+      },
+      collapse: (value = !collapsed[id]) => setCollapsed(id, value),
+      resize: (size) => api.resize(id, size),
+      title(text, count) {
+        if (v.titleEl)
+          v.titleEl.textContent = text;
+        if (v.countEl && count !== undefined)
+          v.countEl.textContent = String(count);
+        if (v.railLabel)
+          v.railLabel.textContent = text;
+        measureChevrons(v);
+      }
+    };
+  };
+  const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [...views.values()].flatMap((v) => [
+    ...v.head?.querySelectorAll(":scope > .knobs-pane-btn") ?? [],
+    ...v.rail && collapsed[v.spec.id] ? [v.rail] : []
+  ]), { listen: false, rank: 1 });
+  const api = {
+    element: root,
+    pane: paneApi,
+    layout: snapshot,
+    collapse: (id, value) => setCollapsed(id, value ?? !collapsed[id]),
+    resize(id, size) {
+      const i = specs.findIndex((p) => p.id === id);
+      if (i < 0)
+        return;
+      if (collapsed[id])
+        setCollapsed(id, false);
+      if (!flex.has(id))
+        sizes[id] = size;
+      else {
+        const goal = target();
+        const j = i > 0 ? i - 1 : i;
+        const delta = size - goal[id];
+        setSizes(nudge(specs, goal, j, j === i ? delta : -delta));
+      }
+      persist();
+      animate();
+    },
+    reset: (id) => id ? reset(id) : reset(),
+    dispose() {
+      unregisterHints?.();
+      loop.stop();
+      ro.disconnect();
+      root.removeEventListener("knobs-restyle", restyled);
+      host?.removeAttribute("data-nested");
+      root.remove();
+    }
+  };
+  return api;
+}
+
+// src/ui/index.ts
+init_split_model();
+init_timeline();
+init_timeline_model();
+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;
-    }
-    const [side, far] = sides(v);
-    put(v.inner, row ? "width" : "height", folding ? `${open - m * 2}px` : "");
-    put(v.inner, side, folding ? "0" : "");
-    put(v.inner, far, folding ? "auto" : "");
-    fade(v.inner, content, CONTENT_BLUR);
-    hide(v.clip, isCollapsed && settled);
-    const morph = row && Boolean(v.toggleIcon) && !v.el.hasAttribute("data-nested");
-    v.el.toggleAttribute("data-morph", morph);
-    const label = v.railLabel;
-    const travel = morph && style.title === "travel" && Boolean(v.titleEl) && label.textContent === v.titleEl.textContent;
-    v.el.toggleAttribute("data-travel", travel && folding);
-    if (v.countEl)
-      put(v.countEl, "opacity", travel && folding && p > 0 ? Math.max(0, 1 - p / COUNT_CLEAR).toFixed(3) : "");
-    const k = 1 - p;
-    if (travel && !folding) {
-      put(label, "opacity", "0");
-      put(label, "filter", "");
-      put(label, "transform", "");
-      put(label, "color", "");
-    } else if (travel) {
-      const t = titleTravel(v.places, open, r, v.edge, p);
-      put(label, "opacity", "");
-      put(label, "filter", "");
-      put(label, "transform", k === 0 ? "" : `translate(${t.x.toFixed(2)}px,${t.y.toFixed(2)}px) rotate(${t.turn.toFixed(2)}deg)`);
-      put(label, "color", k === 0 ? "" : `color-mix(in srgb,var(--kv-fg) ${(k * 100).toFixed(1)}%,var(--kv-fg-2))`);
-    } else {
-      put(label, "transform", "");
-      put(label, "color", "");
-    }
-    if (morph) {
-      put(v.rail, "opacity", "1");
-      if (!travel)
-        fade(label, v.faces.rail, LABEL_BLUR);
-      const c = v.chev;
-      const dx = c.chevEnd - c.iconEnd + (v.edge === "end" ? open - r : 0);
-      const move = `translate(${(dx * k).toFixed(2)}px,${(c.dy * k).toFixed(2)}px)`;
-      const size = `scale(${(1 + (c.scale - 1) * k).toFixed(4)})`;
-      if (style.chevron === "turn")
-        put(v.turn, "transform", k === 0 ? "" : `${move} rotate(${chevronTurn(p, v.edge).toFixed(2)}deg) ${size}`);
-      else {
-        const turn = chevronFlip(v.flip.x, v.edge);
-        const over = v.flip.resting ? turn === 0 ? "" : "scaleX(-1)" : `perspective(${FLIP_DEPTH}px) rotateY(${turn.toFixed(2)}deg)`;
-        put(v.turn, "transform", k === 0 && !over ? "" : `${move} ${size} ${over}`);
+    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 a = v.faces.rail;
-      put(v.rail, "opacity", a >= 1 ? "1" : a.toFixed(3));
-      put(label, "opacity", "");
-      put(label, "filter", a >= 1 || a <= 0 ? "" : `blur(${(LABEL_BLUR * (1 - a)).toFixed(2)}px)`);
-      put(v.turn, "transform", "");
+      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;
     }
   };
-  let lastReport = "";
-  const render = (shown) => {
-    for (const spec of specs) {
-      const v = views.get(spec.id);
-      const size = Math.max(0, shown[spec.id] ?? 0);
-      v.shown = size;
-      put(v.el, "flex-basis", `${size}px`);
-      put(v.el, row ? "width" : "height", `${size}px`);
-      v.el.toggleAttribute("data-collapsed", collapsed[spec.id]);
-      v.el.toggleAttribute("data-settled", !springs.has(spec.id));
-      if (spec.collapsible)
-        renderFold(v, size);
+  const unload = (s) => {
+    offs.get(s)?.();
+    offs.delete(s);
+    if (s.frames) {
+      if (s.seen)
+        s.frames.visible(false);
+      s.frames.release();
     }
-    dividers.forEach((d, i) => {
-      const a = specs[i];
-      const b = specs[i + 1];
-      const now = String(Math.round(views.get(a.id).shown));
-      if (d.getAttribute("aria-valuenow") !== now)
-        d.setAttribute("aria-valuenow", now);
-      if (!d.hasAttribute("aria-controls"))
-        d.setAttribute("aria-controls", `${a.id} ${b.id}`);
-    });
-    const layout = snapshot();
-    const report = JSON.stringify(layout);
-    if (report !== lastReport) {
-      lastReport = report;
-      options.onLayout?.(layout);
-      for (const v of views.values())
-        v.el.dispatchEvent(new Event("knobs-pane-resize"));
-      notifyLayout(doc);
+    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 snapshot = () => {
-    const s = {};
-    for (const [id, v] of views)
-      s[id] = Math.round(v.shown * 10) / 10;
-    return { sizes: s, collapsed: { ...collapsed } };
+  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 persist = () => {
-    if (!store || !key)
+  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 {
-      store.setItem(key, serializeLayout({ sizes, collapsed }));
-    } catch {}
-  };
-  const rememberOpen = (shown) => {
-    for (const spec of specs)
-      if (!collapsed[spec.id] && !springs.has(spec.id))
-        views.get(spec.id).open = shown[spec.id];
-  };
-  const loop = frameLoop(win, (dt) => {
-    for (const [id, s] of springs) {
-      s.step(dt);
-      if (s.resting) {
-        springs.delete(id);
-        views.get(id).folding = false;
-      }
-    }
-    let flipping = false;
-    for (const v of views.values()) {
-      v.flip.step(dt);
-      if (!v.flip.resting)
-        flipping = true;
-    }
-    const shown = current();
-    if (springs.size === 0)
-      rememberOpen(shown);
-    render(shown);
-    return springs.size > 0 || flipping;
-  });
-  const animate = (motion = SETTLE) => {
-    const to = target();
-    for (const v of views.values())
-      if (v.folding && !collapsed[v.spec.id])
-        v.open = to[v.spec.id];
-    if (reducedMotion(win)) {
-      springs.clear();
-      const arriving = [...views.values()].filter((v) => v.folding).map((v) => collapsed[v.spec.id] ? v.rail : v.rail ? v.inner : v.body);
-      for (const v of views.values()) {
-        v.folding = false;
-        v.flip.snap(collapsed[v.spec.id] ? 1 : 0);
-      }
-      rememberOpen(to);
-      render(to);
-      for (const el of arriving)
-        el?.animate([{ opacity: 0 }, { opacity: 1 }], {
-          duration: 160,
-          easing: "cubic-bezier(.2,.8,.2,1)"
-        });
+      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;
     }
-    for (const spec of specs) {
-      const v = views.get(spec.id);
-      const goal = to[spec.id];
-      const s = springs.get(spec.id);
-      if (s) {
-        s.omega = motion.omega;
-        s.zeta = motion.zeta;
-        s.set(goal);
-      } else if (Math.abs(goal - v.shown) > 0.5) {
-        springs.set(spec.id, new Spring(v.shown, motion.omega, motion.zeta, 0.2).set(goal));
-      } else
-        v.folding = false;
-    }
-    loop.wake();
   };
-  const fold = (id, value) => {
-    const v = views.get(id);
-    if (value && !v.folding)
-      v.open = v.shown;
-    collapsed[id] = value;
-    v.folding = true;
-    v.flip.set(value ? 1 : 0);
+  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 release = (id) => {
-    springs.delete(id);
-    views.get(id).folding = false;
+  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])
+    };
   };
-  function setCollapsed(id, value, save = true) {
-    const spec = specs.find((p) => p.id === id);
-    if (!spec?.collapsible || collapsed[id] === value)
-      return;
-    fold(id, value);
-    if (save)
-      persist();
-    animate(COLLAPSE);
+  let hover = null;
+  let raf = 0;
+  let asked = "";
+  function schedule() {
+    if (!raf && !disposed)
+      raf = win.requestAnimationFrame(draw);
   }
-  const setSizes = (next) => {
-    for (const [id, s] of Object.entries(next))
-      sizes[id] = s;
-  };
-  function bindDivider(d, index) {
-    const a = specs[index];
-    const b = specs[index + 1];
-    let start;
-    let from = 0;
-    let pointer = -1;
-    d.addEventListener("pointerdown", (e) => {
-      if (e.button !== 0)
-        return;
-      e.preventDefault();
-      d.focus({ preventScroll: true });
-      const shown = current();
-      for (const id of [a.id, b.id])
-        if (!collapsed[id])
-          release(id);
-      start = { ...shown };
-      for (const id of [a.id, b.id])
-        if (collapsed[id])
-          start[id] = rail(id);
-      from = row ? e.clientX : e.clientY;
-      pointer = e.pointerId;
-      d.setPointerCapture(e.pointerId);
-      d.dataset.active = "";
-      doc.documentElement.dataset.knobsResizing = direction;
-    });
-    d.addEventListener("pointermove", (e) => {
-      if (!start || e.pointerId !== pointer)
+  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 delta = (row ? e.clientX : e.clientY) - from;
-      const result = drag(specs, start, index, delta, collapsed);
-      if (result.collapse) {
-        const { id, collapsed: now } = result.collapse;
-        if (!now) {
-          for (const [k, s] of Object.entries(result.sizes))
-            if (k === id)
-              sizes[k] = s;
+      const k = `${a.key}|${b.key}`;
+      if (!pairDiffs.has(k)) {
+        if (budget-- <= 0) {
+          more = true;
+          return;
         }
-        setCollapsed(id, now, false);
-        start = { ...target() };
-        if (now)
-          start[id] = rail(id);
-        from = row ? e.clientX : e.clientY;
-        return;
+        pairDiffs.set(k, differ(a, b));
       }
-      if (collapsed[a.id] || collapsed[b.id])
-        return;
-      setSizes(result.sizes);
-      for (const id of [a.id, b.id])
-        release(id);
-      const shown = current();
-      render(shown);
-      rememberOpen(shown);
-    });
-    const end = (e) => {
-      if (!start || e.pointerId !== pointer)
-        return;
-      start = undefined;
-      delete d.dataset.active;
-      delete doc.documentElement.dataset.knobsResizing;
-      for (const spec of specs)
-        if (flex.has(spec.id) && !collapsed[spec.id])
-          sizes[spec.id] = views.get(spec.id).shown;
-      persist();
-    };
-    d.addEventListener("pointerup", end);
-    d.addEventListener("pointercancel", end);
-    d.addEventListener("lostpointercapture", end);
-    d.addEventListener("dblclick", (e) => {
-      e.preventDefault();
-      reset(a.id, b.id);
+      const d = pairDiffs.get(k);
+      if (d !== undefined)
+        diffs.set(c.frame, d);
+      return d;
     });
-    d.addEventListener("keydown", (e) => {
-      if (e.metaKey || e.ctrlKey || e.altKey)
+    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;
-      const back = row ? "ArrowLeft" : "ArrowUp";
-      const fwd = row ? "ArrowRight" : "ArrowDown";
-      const step = e.shiftKey ? 64 : 16;
-      let handled = true;
-      if (e.key === back || e.key === fwd) {
-        const goal = target();
-        const shut = [a.id, b.id].find((id) => collapsed[id]);
-        if (shut)
-          setCollapsed(shut, false);
-        else {
-          setSizes(nudge(specs, goal, index, e.key === fwd ? step : -step));
-          persist();
-          animate();
-        }
-      } else if (e.key === "Home" || e.key === "End") {
-        const goal = target();
-        setSizes(nudge(specs, goal, index, e.key === "End" ? 1e6 : -1e6));
-        persist();
-        animate();
-      } else if (e.key === "Enter" || e.key === " ") {
-        const id = collapsibleSide(specs, index);
-        if (id)
-          setCollapsed(id, !collapsed[id]);
-        else
-          handled = false;
-      } else if (e.key === "Escape")
-        d.blur();
-      else
-        handled = false;
-      if (handled) {
-        e.preventDefault();
-        e.stopPropagation();
+      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();
       }
-    });
-  }
-  function reset(...ids) {
-    const which = ids.length ? ids : specs.map((p) => p.id);
-    let folds = false;
-    for (const id of which) {
-      delete sizes[id];
-      const spec = specs.find((p) => p.id === id);
-      const shut = Boolean(spec?.collapsed);
-      if (spec?.collapsible && collapsed[id] !== shut) {
-        fold(id, shut);
-        folds = true;
+      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 (which.some((id) => flex.has(id)))
-      for (const id of flex)
-        delete sizes[id];
-    persist();
-    animate(folds ? COLLAPSE : SETTLE);
-  }
-  {
-    const first = target();
-    for (const spec of specs) {
-      const open = { ...collapsed, [spec.id]: false };
-      views.get(spec.id).open = collapsed[spec.id] ? solve2({ panes: specs, sizes, collapsed: open, total: total(), rail })[spec.id] : first[spec.id];
-    }
-    render(first);
-    measureChevrons();
-    render(first);
-  }
-  const relayout = (remeasure) => {
-    if (remeasure)
-      measure();
-    if (springs.size) {
-      if (remeasure)
-        measureChevrons();
-      return loop.wake();
-    }
-    const shown = target();
-    rememberOpen(shown);
-    render(shown);
-    if (remeasure) {
-      measureChevrons();
-      render(shown);
+    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;
   };
-  const ro = new ResizeObserver(() => relayout(!measured));
+  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 restyled = () => relayout(true);
-  root.addEventListener("knobs-restyle", restyled);
-  const paneApi = (id) => {
-    const v = views.get(id);
-    if (!v)
-      throw new Error(`No pane "${id}"`);
-    return {
-      id,
-      element: v.el,
-      body: v.body,
-      header: v.head,
-      get size() {
-        return v.shown;
-      },
-      get collapsed() {
-        return collapsed[id];
-      },
-      collapse: (value = !collapsed[id]) => setCollapsed(id, value),
-      resize: (size) => api.resize(id, size),
-      title(text, count) {
-        if (v.titleEl)
-          v.titleEl.textContent = text;
-        if (v.countEl && count !== undefined)
-          v.countEl.textContent = String(count);
-        if (v.railLabel)
-          v.railLabel.textContent = text;
-        measureChevrons(v);
-      }
-    };
+  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 unregisterHints = options.hints === false ? undefined : hints.register(root, () => [...views.values()].flatMap((v) => [
-    ...v.head?.querySelectorAll(":scope > .knobs-pane-btn") ?? [],
-    ...v.rail && collapsed[v.spec.id] ? [v.rail] : []
-  ]), { listen: false, rank: 1 });
-  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,
-    pane: paneApi,
-    layout: snapshot,
-    collapse: (id, value) => setCollapsed(id, value ?? !collapsed[id]),
-    resize(id, size) {
-      const i = specs.findIndex((p) => p.id === id);
-      if (i < 0)
-        return;
-      if (collapsed[id])
-        setCollapsed(id, false);
-      if (!flex.has(id))
-        sizes[id] = size;
-      else {
-        const goal = target();
-        const j = i > 0 ? i - 1 : i;
-        const delta = size - goal[id];
-        setSizes(nudge(specs, goal, j, j === i ? delta : -delta));
-      }
-      persist();
-      animate();
+    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();
     },
-    reset: (id) => id ? reset(id) : reset(),
     dispose() {
-      unregisterHints?.();
-      loop.stop();
+      disposed = true;
+      if (raf)
+        win.cancelAnimationFrame(raf);
+      unlisten();
       ro.disconnect();
-      root.removeEventListener("knobs-restyle", restyled);
-      host?.removeAttribute("data-nested");
+      nearIo?.disconnect();
+      screenIo?.disconnect();
+      for (const s of sides)
+        unload(s);
       root.remove();
     }
   };
-  return api;
 }
 
 // src/ui/index.ts
-init_split_model();
-init_timeline();
-init_timeline_model();
-init_compare();
-init_compare_strip();
 init_player();
 
 // src/ui/history.ts
@@ -24131,9 +24643,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}
@@ -24146,16 +24657,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)}
@@ -24174,6 +24684,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;
@@ -24423,8 +24936,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));
@@ -24451,7 +24962,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;
@@ -24513,11 +25023,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 = ""));
@@ -24535,13 +25045,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: () => {
@@ -24554,7 +25064,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) {
@@ -24581,12 +25091,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;
@@ -24619,8 +25129,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 } : {}
     }),
@@ -24764,8 +25274,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");
@@ -24785,7 +25293,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");
@@ -24839,7 +25347,7 @@ function mountDecision(host, m, slot) {
 }
 var HEAVY = new Set(["compare", "video", "diff", "mount"]);
 var RELEASES = new Set(["compare", "video"]);
-var labelOf3 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "metric" ? m.label : undefined;
+var labelOf3 = (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);
@@ -24853,7 +25361,7 @@ function mediaSlot(container, given) {
   root.dataset.kind = m.kind;
   applyLook2(root, options);
   const label = labelOf3(m);
-  if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal" || m.kind === "facts")) {
+  if (label) {
     const l = doc.createElement("span");
     l.className = "knobs-wt-slot-label";
     l.textContent = label;