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

package/dist/review-react.js

@@ -648,7 +648,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;
@@ -668,6 +667,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
@@ -1449,6 +1451,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",
@@ -2567,7 +2577,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(",");
@@ -4605,12 +4624,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)
@@ -9575,6 +9606,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;
@@ -9695,7 +9751,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), 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) => {
@@ -9942,6 +9998,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 [];
@@ -9972,6 +10047,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;
@@ -9979,12 +10072,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;
@@ -10014,12 +10109,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;
@@ -10040,6 +10222,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;
@@ -10170,18 +10417,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--;
         });
@@ -10295,6 +10574,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() {
@@ -10303,29 +10601,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)
@@ -10363,12 +10688,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)
@@ -10377,8 +10705,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)
@@ -10386,6 +10719,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");
@@ -10393,24 +10728,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
@@ -10676,656 +11032,278 @@ 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, FADE3.omega, FADE3.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 d = pairDiffs.get(k);
-      if (d !== undefined)
-        diffs.set(c.frame, d);
-      return d;
-    });
-    const max = Math.max(0.02, ...ds.map((d) => d ?? 0));
-    const peaks = new Set(stripPeaks(ds, { threshold }));
-    cols.forEach((c, i) => {
-      const x = geo.x + c.x + GAP / 2;
-      const cwid = Math.max(1, c.w - GAP);
-      if (x + cwid < 0 || x > w)
-        return;
-      for (const row of [0, 1]) {
-        const y = row * (rh + GAP);
-        const pic = picOf(sides[row], c);
-        ctx.save();
-        ctx.beginPath();
-        ctx.roundRect(x, y, cwid, rh, radius);
-        ctx.fillStyle = colors.surface;
-        ctx.fill();
-        if (pic) {
-          ctx.clip();
-          const r = letterbox({ w: pic.w, h: pic.h }, { x, y, w: cwid, h: rh });
-          ctx.drawImage(pic.img, r.x, r.y, r.w, r.h);
-        }
-        ctx.restore();
-      }
-      if (hover === i) {
-        ctx.fillStyle = colors.wash;
-        ctx.beginPath();
-        ctx.roundRect(x, 0, cwid, rh * 2 + GAP, radius);
-        ctx.fill();
-      }
-      const d = ds[i];
-      if (d !== undefined && d > 0) {
-        const bh = Math.max(1, Math.min(1, d / max) * BAR);
-        ctx.globalAlpha = peaks.has(i) ? 1 : 0.42;
-        ctx.fillStyle = colors.diff;
-        ctx.beginPath();
-        ctx.roundRect(x, h - bh, cwid, bh, Math.min(1.5, bh / 2));
-        ctx.fill();
-        ctx.globalAlpha = 1;
-      }
-    });
-    const v = timeline.view;
-    const px = geo.x + (timeline.time - v.start) / v.span * geo.w;
-    if (px >= -1 && px <= w + 1) {
-      ctx.fillStyle = colors.accent;
-      ctx.fillRect(Math.round(px * dpr) / dpr - 0.75, 0, 1.5, h);
-    }
-    if (more)
-      schedule();
-  };
-  const timeAt = (clientX) => {
-    const r = root.getBoundingClientRect();
-    const v = timeline.view;
-    const t = v.start + (clientX - r.left - geo.x) / geo.w * v.span;
-    return Math.min(timeline.duration, Math.max(0, frameTime(t, fps())));
-  };
-  const columnAt = (clientX) => {
-    const x = clientX - root.getBoundingClientRect().left - geo.x;
-    const i = columns().findIndex((c) => x >= c.x && x < c.x + c.w);
-    return i < 0 ? null : i;
-  };
-  let dragging = false;
-  const pick = (clientX) => {
-    const t = timeAt(clientX);
-    timeline.seek(t);
-    options.onPick?.(t);
-  };
-  root.addEventListener("pointerdown", (e) => {
-    if (e.button !== 0)
-      return;
-    dragging = true;
-    root.setPointerCapture(e.pointerId);
-    const host = root.closest(".knobs-compare");
-    if (host)
-      host.focus({ preventScroll: true });
-    else
-      timeline.focus();
-    if (timeline.playing)
-      timeline.pause();
-    pick(e.clientX);
-    e.preventDefault();
-  });
-  root.addEventListener("pointermove", (e) => {
-    if (dragging)
-      pick(e.clientX);
-    const i = columnAt(e.clientX);
-    if (i !== hover) {
-      hover = i;
-      schedule();
-    }
-  });
-  const end = () => {
-    dragging = false;
-  };
-  root.addEventListener("pointerup", end);
-  root.addEventListener("pointercancel", end);
-  root.addEventListener("lostpointercapture", end);
-  root.addEventListener("pointerleave", () => {
-    if (hover === null)
-      return;
-    hover = null;
-    schedule();
-  });
-  const unlisten = timeline.listen({ onSeek: schedule, onView: schedule });
-  const ro = new win.ResizeObserver(measure);
-  ro.observe(root);
-  const track = timeline.element.querySelector(".knobs-tl-track");
-  if (track)
-    ro.observe(track);
-  root.addEventListener("knobs-restyle", measure);
-  const setOnScreen = (on) => {
-    onScreen = on;
-    for (const s of sides) {
-      if (!s.frames || s.seen === on)
-        continue;
-      s.seen = on;
-      s.frames.visible(on);
-    }
-  };
-  const setNear = (on) => {
-    near = on;
-    if (on) {
-      for (const s of sides)
-        load(s);
-      schedule();
-    } else
-      for (const s of sides)
-        unload(s);
-  };
-  const IO = win.IntersectionObserver;
-  const nearIo = IO ? new IO((e) => setNear(e.at(-1).isIntersecting), { rootMargin: "100% 0px" }) : null;
-  const screenIo = IO ? new IO((e) => setOnScreen(e.at(-1).isIntersecting)) : null;
-  measure();
-  if (nearIo && screenIo) {
-    nearIo.observe(root);
-    screenIo.observe(root);
-  } else {
-    setNear(true);
-    setOnScreen(true);
-  }
-  return {
-    element: root,
-    diffs,
-    update(next) {
-      const was = sides;
-      sides = [
-        next.before ? makeSide(next.before) : was[0],
-        next.after ? makeSide(next.after) : was[1]
-      ];
-      for (const s of was)
-        if (!sides.includes(s))
-          unload(s);
-      diffs.clear();
-      pairDiffs.clear();
-      asked = "";
-      if (near)
-        for (const s of sides)
-          load(s);
-      if (onScreen)
-        setOnScreen(true);
-      schedule();
-    },
-    dispose() {
-      disposed = true;
-      if (raf)
-        win.cancelAnimationFrame(raf);
-      unlisten();
-      ro.disconnect();
-      nearIo?.disconnect();
-      screenIo?.disconnect();
-      for (const s of sides)
-        unload(s);
-      root.remove();
-    }
-  };
-}
-var BAR = 7, GAP = 2, DIFF, DIFFS_PER_DRAW = 6;
-var init_compare_strip = __esm(() => {
-  init_compare_frames();
-  init_compare_model();
-  init_look();
-  init_rgba();
-  init_timeline_model();
-  DIFF = { w: 32, h: 18 };
-});
-
-// src/ui/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 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);
-  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");
-  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 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, FADE3.omega, FADE3.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;
-  };
-  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 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 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;
-      }
-      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 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);
+    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
@@ -11337,13 +11315,23 @@ function compare(container, options) {
     const want = wantOf(s);
     if (s.shown && !s.shown.cached && s.shown.frame === want)
       return;
-    const c = s.frames.nearest(want);
+    const c = s.frames.nearest(want, Number.POSITIVE_INFINITY, true);
     if (!c)
       return;
     const was = s.shown ? Math.abs(s.shown.frame - want) : Number.POSITIVE_INFINITY;
     if (Math.abs(c.frame - want) < was)
       showCached(s, c);
   };
+  const giveUp = (s) => {
+    s.seek = SEEK_IDLE;
+    if (!s.loaded || disposed)
+      return;
+    if (s.el.readyState >= 2)
+      return showVideo(s);
+    s.shown = null;
+    setCached(s, false);
+    requestDraw();
+  };
   const makeSide = (index, source) => {
     const kind = mediaKind(source.src, source.kind);
     const media = el(kind === "video" ? "video" : "img", "knobs-cmp-media");
@@ -11375,7 +11363,9 @@ function compare(container, options) {
       frameAt: 0,
       misses: 0,
       failed: false,
+      stall: stallGuard(win, () => giveUp(side)),
       stop: () => {
+        side.stall.clear();
         for (const f of offs)
           f();
       }
@@ -11385,6 +11375,10 @@ function compare(container, options) {
         return;
       side.failed = true;
       note.textContent = `Couldn't load ${labelOf(index)}`;
+      side.stall.clear();
+      side.seek = SEEK_IDLE;
+      side.shown = null;
+      setCached(side, false);
     };
     if (media instanceof HTMLVideoElement) {
       const v = media;
@@ -11415,6 +11409,8 @@ function compare(container, options) {
         side.seek = step.state;
         if (step.apply !== null)
           seekVideo(side, v, step.apply);
+        else
+          side.stall.clear();
         pushFrame(side);
       });
       on("error", fail);
@@ -11447,7 +11443,7 @@ function compare(container, options) {
     s.loaded = true;
     s.failed = false;
     s.el.src = s.source.src;
-    if (s.kind === "video") {
+    if (s.kind === "video" && caching) {
       s.frames = acquireFrames(doc, s.source.src, fps());
       s.unlisten = s.frames.listen(() => refreshCached(s));
       if (onScreen) {
@@ -11464,6 +11460,7 @@ function compare(container, options) {
     if (s.el instanceof HTMLVideoElement)
       s.el.load();
     s.seek = SEEK_IDLE;
+    s.stall.clear();
     s.shown = null;
     setCached(s, false);
     s.unlisten?.();
@@ -11587,6 +11584,7 @@ function compare(container, options) {
       v.fastSeek(t);
     else
       v.currentTime = t;
+    s.stall.arm();
   };
   const showFrame = (t, used) => {
     for (const s of sides) {
@@ -11598,14 +11596,21 @@ function compare(container, options) {
         v.playbackRate = 1;
       }
       const want = Math.min(frameOf(t, fps()), lastFrame(v.duration, fps()));
-      const step = requestSeek(s.seek, frameMidpoint(want, fps(), v.duration), v.currentTime, fps());
-      s.seek = step.state;
-      if (step.apply !== null)
-        seekVideo(s, v, step.apply);
-      else if (step.settled && (s.shown?.cached || s.shown?.frame !== want))
-        pushFrame(s);
-      if (used)
-        s.frames?.focus(want);
+      if (used) {
+        if (scrubbing)
+          s.frames?.follow(want);
+        else
+          s.frames?.focus(want);
+      }
+      if (!(scrubbing && s.frames?.covers(want))) {
+        const at = frameMidpoint(want, fps(), v.duration);
+        const step = requestSeek(s.seek, at, v.currentTime, fps());
+        s.seek = step.state;
+        if (step.apply !== null)
+          seekVideo(s, v, step.apply);
+        else if (step.settled && (s.shown?.cached || s.shown?.frame !== want))
+          pushFrame(s);
+      }
       refreshCached(s);
     }
     requestDraw();
@@ -12236,7 +12241,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());
@@ -12259,6 +12264,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();
@@ -12267,6 +12275,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)
@@ -12281,6 +12290,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, {
@@ -12359,7 +12369,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" ? [
@@ -12370,14 +12380,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() {
@@ -12403,7 +12405,6 @@ function compare(container, options) {
       return renderer;
     },
     timeline: tl,
-    strip,
     get zoom() {
       return clampZoom(zoomNow());
     },
@@ -12425,8 +12426,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)
@@ -12493,7 +12492,6 @@ function compare(container, options) {
         if (ownTimeline)
           tl.dispose();
       }
-      strip?.dispose();
       for (const s of sides) {
         s.stop();
         unloadSide(s);
@@ -12517,7 +12515,6 @@ var init_compare = __esm(() => {
   init_compare_frames();
   init_compare_gpu();
   init_compare_model();
-  init_compare_strip();
   init_icons();
   init_look();
   init_rgba();
@@ -12537,204 +12534,672 @@ var init_compare = __esm(() => {
     wipe: { short: "Wipe", long: "Wipe" },
     difference: { short: "Difference", long: "Difference" }
   };
-});
+});
+
+// src/ui/player.ts
+function player(container, options) {
+  const doc = container.ownerDocument;
+  const el = (tag, cls) => {
+    const n = doc.createElement(tag);
+    n.className = cls;
+    return n;
+  };
+  const look = {
+    ...options.preset ? { preset: options.preset } : {},
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
+  };
+  const root = el("div", "knobs-player");
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", options.label ?? "Video");
+  applyLook2(root, options);
+  const frame = el("div", "knobs-player-frame");
+  frame.style.setProperty("--kp-aspect", String(options.aspect ?? 16 / 9));
+  const v = el("video", "knobs-player-media");
+  v.muted = options.muted ?? true;
+  v.defaultMuted = v.muted;
+  v.playsInline = true;
+  v.preload = "metadata";
+  v.setAttribute("playsinline", "");
+  if (options.poster)
+    v.poster = options.poster;
+  if (options.captions) {
+    const track = doc.createElement("track");
+    track.kind = "captions";
+    track.label = "Captions";
+    track.srclang = doc.documentElement.lang || "en";
+    track.default = true;
+    track.src = options.captions;
+    v.append(track);
+  }
+  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);
+  const markers = (options.chapters ?? []).map((c, i) => ({
+    id: c.id ?? `c${i}`,
+    time: c.start,
+    label: c.label
+  }));
+  const tl = timeline(host, {
+    ...look,
+    variant: "line",
+    duration: 1,
+    fps: options.fps ?? 30,
+    markers,
+    repeat: options.loop ?? true,
+    arrows: { step: 5, shift: 10 },
+    label: options.label ? `${options.label} time` : "Video time",
+    ...options.hints === false ? { hints: false } : {}
+  });
+  const onFrame = () => root.setAttribute("data-ready", "");
+  let pending = null;
+  const seekVideo = (t) => {
+    if (v.readyState < 1)
+      return;
+    if (v.seeking)
+      pending = t;
+    else
+      v.currentTime = t;
+  };
+  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) {
+      const t = pending;
+      pending = null;
+      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;
+    options.onSeek?.(reported);
+  };
+  const onMeta = () => {
+    onFrame();
+    if (v.videoWidth)
+      frame.style.setProperty("--kp-aspect", String(v.videoWidth / v.videoHeight));
+    if (Number.isFinite(v.duration))
+      tl.update({ duration: v.duration });
+  };
+  v.addEventListener("loadedmetadata", onMeta);
+  v.addEventListener("loadeddata", onFrame);
+  v.addEventListener("seeked", onSeeked);
+  v.addEventListener("error", onError);
+  const unlisten = tl.listen({
+    onSeek(t, source) {
+      if (source === "play") {
+        if (Math.abs(v.currentTime - t) > 0.25)
+          v.currentTime = t;
+        return;
+      }
+      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) {
+        hidePreview();
+        v.play().catch(() => tl.pause());
+      } else {
+        v.pause();
+        reported = tl.time;
+      }
+      root.toggleAttribute("data-playing", on);
+      options.onPlay?.(on, tl.time);
+    },
+    onScrub(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(() => {
+    if (v.readyState < 1)
+      return Number.NaN;
+    if (v.seeking)
+      return tl.time;
+    return v.ended ? Number.POSITIVE_INFINITY : v.currentTime;
+  });
+  const onClick = () => {
+    tl.focus();
+    tl.toggle();
+  };
+  frame.addEventListener("click", onClick);
+  root.addEventListener("pointerenter", startFrames);
+  v.src = options.src;
+  const api = {
+    element: root,
+    video: v,
+    timeline: tl,
+    get time() {
+      return tl.time;
+    },
+    get playing() {
+      return tl.playing;
+    },
+    get duration() {
+      return Number.isFinite(v.duration) ? v.duration : 0;
+    },
+    play: () => tl.play(),
+    pause: () => tl.pause(),
+    toggle: () => tl.toggle(),
+    seek: (t, o) => tl.seek(t, o?.glide ? { glide: true } : undefined),
+    seekBy: (d) => tl.seek(Math.min(tl.duration, Math.max(0, tl.time + d)), { glide: true }),
+    focus: () => tl.focus(),
+    dispose() {
+      unlisten();
+      tl.drive(null);
+      tl.dispose();
+      v.pause();
+      frame.removeEventListener("click", onClick);
+      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();
+    }
+  };
+  return api;
+}
+var init_player = __esm(() => {
+  init_compare_frames();
+  init_compare_model();
+  init_look();
+  init_timeline();
+});
+
+// src/ui/react.tsx
+import {
+  Children,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+init_diff();
+
+// src/ui/follow.ts
+function propChanges(initial, same = Object.is) {
+  let last = { ...initial };
+  return (next) => {
+    const changed = {};
+    for (const key of Object.keys(next))
+      if (!same(next[key], last[key]))
+        changed[key] = next[key];
+    last = { ...next };
+    return changed;
+  };
+}
+var anyChanged = (changed) => Object.keys(changed).length > 0;
 
-// src/ui/player.ts
-function player(container, options) {
+// src/ui/react.tsx
+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 el = (tag, cls) => {
-    const n = doc.createElement(tag);
-    n.className = cls;
-    return n;
-  };
-  const look = {
-    ...options.preset ? { preset: options.preset } : {},
-    ...options.theme ? { theme: options.theme } : {},
-    ...options.appearance ? { appearance: options.appearance } : {}
-  };
-  const root = el("div", "knobs-player");
-  root.setAttribute("role", "group");
-  root.setAttribute("aria-label", options.label ?? "Video");
+  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 frame = el("div", "knobs-player-frame");
-  frame.style.setProperty("--kp-aspect", String(options.aspect ?? 16 / 9));
-  const v = el("video", "knobs-player-media");
-  v.muted = options.muted ?? true;
-  v.defaultMuted = v.muted;
-  v.playsInline = true;
-  v.preload = "metadata";
-  v.setAttribute("playsinline", "");
-  if (options.poster)
-    v.poster = options.poster;
-  if (options.captions) {
-    const track = doc.createElement("track");
-    track.kind = "captions";
-    track.label = "Captions";
-    track.srclang = doc.documentElement.lang || "en";
-    track.default = true;
-    track.src = options.captions;
-    v.append(track);
-  }
-  frame.append(v);
-  const host = el("div", "knobs-player-line");
-  root.append(frame, host);
+  const canvas = doc.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  root.append(canvas);
   container.append(root);
-  const markers = (options.chapters ?? []).map((c, i) => ({
-    id: c.id ?? `c${i}`,
-    time: c.start,
-    label: c.label
-  }));
-  const tl = timeline(host, {
-    ...look,
-    variant: "line",
-    duration: 1,
-    fps: options.fps ?? 30,
-    markers,
-    repeat: options.loop ?? true,
-    arrows: { step: 5, shift: 10 },
-    label: options.label ? `${options.label} time` : "Video time",
-    ...options.hints === false ? { hints: false } : {}
+  const 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 onFrame = () => root.setAttribute("data-ready", "");
-  let pending = null;
-  const seekVideo = (t) => {
-    if (v.readyState < 1)
+  let sides = [makeSide(options.before), makeSide(options.after)];
+  const offs = new Map;
+  const load = (s) => {
+    if (s.frames || s.still)
       return;
-    if (v.seeking)
-      pending = t;
-    else
-      v.currentTime = t;
+    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;
+    }
   };
-  let reported = 0;
-  const onSeeked = () => {
-    if (pending !== null) {
-      const t = pending;
-      pending = null;
-      v.currentTime = t;
-      return;
+  const unload = (s) => {
+    offs.get(s)?.();
+    offs.delete(s);
+    if (s.frames) {
+      if (s.seen)
+        s.frames.visible(false);
+      s.frames.release();
     }
-    if (!v.paused || tl.playing || Math.abs(v.currentTime - reported) < 0.1)
+    s.frames = null;
+    s.seen = false;
+    if (s.still)
+      s.still.removeAttribute("src");
+    s.still = null;
+  };
+  let w = 1;
+  let h = 1;
+  let geo = { x: 0, w: 1 };
+  const rowH = () => Math.max(4, (h - BAR - GAP * 2) / 2);
+  const aspectOf = (s) => {
+    if (s.still?.naturalWidth)
+      return s.still.naturalWidth / s.still.naturalHeight;
+    const c = s.frames?.nearest(0);
+    return c ? c.bitmap.width / c.bitmap.height : 0;
+  };
+  const columns = () => stripColumns(timeline.view, geo.w, {
+    duration: timeline.duration,
+    fps: fps(),
+    minWidth: rowH() * Math.max(16 / 9, ...sides.map(aspectOf)) + GAP
+  });
+  const measure = () => {
+    const r = root.getBoundingClientRect();
+    w = Math.max(1, r.width);
+    h = Math.max(1, r.height);
+    geo = { x: 0, w };
+    if (align === "track") {
+      const track = timeline.element.querySelector(".knobs-tl-track");
+      const t = track?.getBoundingClientRect();
+      if (t && t.width > 0)
+        geo = { x: t.left - r.left, w: t.width };
+    }
+    readColors();
+    schedule();
+  };
+  const ask = (cols) => {
+    const points = cols.map((c) => ({ frame: c.frame, tolerance: Math.floor((c.to - c.from) / 2) }));
+    for (const s of sides)
+      s.frames?.want(points);
+  };
+  const picOf = (s, c) => {
+    if (s.still?.naturalWidth)
+      return { img: s.still, w: s.still.naturalWidth, h: s.still.naturalHeight, key: "still" };
+    const f = s.frames?.nearest(c.frame, Math.max(1, c.to - c.from));
+    return f ? { img: f.bitmap, w: f.bitmap.width, h: f.bitmap.height, key: String(f.frame) } : null;
+  };
+  const probe = doc.createElement("canvas");
+  probe.width = DIFF.w;
+  probe.height = DIFF.h;
+  const probeCtx = probe.getContext("2d", { willReadFrequently: true });
+  const differ = (a, b) => {
+    if (!probeCtx)
       return;
-    reported = v.currentTime;
-    options.onSeek?.(reported);
+    try {
+      probeCtx.drawImage(a.img, 0, 0, DIFF.w, DIFF.h);
+      const pa = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
+      probeCtx.drawImage(b.img, 0, 0, DIFF.w, DIFF.h);
+      const pb = probeCtx.getImageData(0, 0, DIFF.w, DIFF.h).data;
+      return meanAbsDiff(pa, pb);
+    } catch {
+      return;
+    }
   };
-  const onMeta = () => {
-    onFrame();
-    if (v.videoWidth)
-      frame.style.setProperty("--kp-aspect", String(v.videoWidth / v.videoHeight));
-    if (Number.isFinite(v.duration))
-      tl.update({ duration: v.duration });
+  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})`;
   };
-  v.addEventListener("loadedmetadata", onMeta);
-  v.addEventListener("loadeddata", onFrame);
-  v.addEventListener("seeked", onSeeked);
-  const unlisten = tl.listen({
-    onSeek(t, source) {
-      if (source === "play") {
-        if (Math.abs(v.currentTime - t) > 0.25)
-          v.currentTime = t;
+  const readColors = () => {
+    const cs = win.getComputedStyle(root);
+    colors = {
+      surface: rgba(tokenCss(cs, "--kv-fill", ""), [1, 1, 1, 0.055]),
+      accent: rgba(tokenCss(cs, "--kv-accent", ""), [1, 1, 1, 1]),
+      diff: rgba(tokenCss(cs, "--_ku-cmp-diff", ""), [0.49, 0.81, 0.61, 1]),
+      wash: rgba(tokenCss(cs, "--kv-fill-selected", ""), [1, 1, 1, 0.11])
+    };
+  };
+  let hover = null;
+  let raf = 0;
+  let asked = "";
+  function schedule() {
+    if (!raf && !disposed)
+      raf = win.requestAnimationFrame(draw);
+  }
+  const draw = () => {
+    raf = 0;
+    if (!near)
+      return;
+    const dpr = Math.min(3, Math.max(1, win.devicePixelRatio || 1));
+    const cw = Math.round(w * dpr);
+    const ch = Math.round(h * dpr);
+    if (canvas.width !== cw || canvas.height !== ch) {
+      canvas.width = cw;
+      canvas.height = ch;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+      return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, w, h);
+    const cols = columns();
+    const key = cols.map((c) => c.frame).join(",");
+    if (key !== asked) {
+      asked = key;
+      ask(cols);
+    }
+    const rh = rowH();
+    const radius = 3;
+    let budget = DIFFS_PER_DRAW;
+    let more = false;
+    const ds = cols.map((c) => {
+      const a = picOf(sides[0], c);
+      const b = picOf(sides[1], c);
+      if (!a || !b)
         return;
+      const k = `${a.key}|${b.key}`;
+      if (!pairDiffs.has(k)) {
+        if (budget-- <= 0) {
+          more = true;
+          return;
+        }
+        pairDiffs.set(k, differ(a, b));
       }
-      if (Math.abs(v.currentTime - t) < 1 / (options.fps ?? 30))
+      const d = pairDiffs.get(k);
+      if (d !== undefined)
+        diffs.set(c.frame, d);
+      return d;
+    });
+    const max = Math.max(0.02, ...ds.map((d) => d ?? 0));
+    const peaks = new Set(stripPeaks(ds, { threshold }));
+    cols.forEach((c, i) => {
+      const x = geo.x + c.x + GAP / 2;
+      const cwid = Math.max(1, c.w - GAP);
+      if (x + cwid < 0 || x > w)
         return;
-      seekVideo(t);
-    },
-    onPlay(on) {
-      if (on)
-        v.play().catch(() => tl.pause());
-      else {
-        v.pause();
-        reported = tl.time;
+      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();
       }
-      root.toggleAttribute("data-playing", on);
-      options.onPlay?.(on, tl.time);
-    },
-    onScrub(on) {
-      if (on)
-        v.pause();
+      if (hover === i) {
+        ctx.fillStyle = colors.wash;
+        ctx.beginPath();
+        ctx.roundRect(x, 0, cwid, rh * 2 + GAP, radius);
+        ctx.fill();
+      }
+      const d = ds[i];
+      if (d !== undefined && d > 0) {
+        const bh = Math.max(1, Math.min(1, d / max) * BAR);
+        ctx.globalAlpha = peaks.has(i) ? 1 : 0.42;
+        ctx.fillStyle = colors.diff;
+        ctx.beginPath();
+        ctx.roundRect(x, h - bh, cwid, bh, Math.min(1.5, bh / 2));
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      }
+    });
+    const v = timeline.view;
+    const px = geo.x + (timeline.time - v.start) / v.span * geo.w;
+    if (px >= -1 && px <= w + 1) {
+      ctx.fillStyle = colors.accent;
+      ctx.fillRect(Math.round(px * dpr) / dpr - 0.75, 0, 1.5, h);
     }
+    if (more)
+      schedule();
+  };
+  const timeAt = (clientX) => {
+    const r = root.getBoundingClientRect();
+    const v = timeline.view;
+    const t = v.start + (clientX - r.left - geo.x) / geo.w * v.span;
+    return Math.min(timeline.duration, Math.max(0, frameTime(t, fps())));
+  };
+  const columnAt = (clientX) => {
+    const x = clientX - root.getBoundingClientRect().left - geo.x;
+    const i = columns().findIndex((c) => x >= c.x && x < c.x + c.w);
+    return i < 0 ? null : i;
+  };
+  let dragging = false;
+  const pick = (clientX) => {
+    const t = timeAt(clientX);
+    timeline.seek(t);
+    options.onPick?.(t);
+  };
+  root.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0)
+      return;
+    dragging = true;
+    root.setPointerCapture(e.pointerId);
+    const host = root.closest(".knobs-compare");
+    if (host)
+      host.focus({ preventScroll: true });
+    else
+      timeline.focus();
+    if (timeline.playing)
+      timeline.pause();
+    pick(e.clientX);
+    e.preventDefault();
   });
-  tl.drive(() => {
-    if (v.readyState < 1)
-      return Number.NaN;
-    if (v.seeking)
-      return tl.time;
-    return v.ended ? Number.POSITIVE_INFINITY : v.currentTime;
+  root.addEventListener("pointermove", (e) => {
+    if (dragging)
+      pick(e.clientX);
+    const i = columnAt(e.clientX);
+    if (i !== hover) {
+      hover = i;
+      schedule();
+    }
   });
-  const onClick = () => {
-    tl.focus();
-    tl.toggle();
+  const end = () => {
+    dragging = false;
   };
-  frame.addEventListener("click", onClick);
-  v.src = options.src;
-  const api = {
+  root.addEventListener("pointerup", end);
+  root.addEventListener("pointercancel", end);
+  root.addEventListener("lostpointercapture", end);
+  root.addEventListener("pointerleave", () => {
+    if (hover === null)
+      return;
+    hover = null;
+    schedule();
+  });
+  const unlisten = timeline.listen({ onSeek: schedule, onView: schedule });
+  const ro = new win.ResizeObserver(measure);
+  ro.observe(root);
+  const track = timeline.element.querySelector(".knobs-tl-track");
+  if (track)
+    ro.observe(track);
+  root.addEventListener("knobs-restyle", measure);
+  const setOnScreen = (on) => {
+    onScreen = on;
+    for (const s of sides) {
+      if (!s.frames || s.seen === on)
+        continue;
+      s.seen = on;
+      s.frames.visible(on);
+    }
+  };
+  const setNear = (on) => {
+    near = on;
+    if (on) {
+      for (const s of sides)
+        load(s);
+      schedule();
+    } else
+      for (const s of sides)
+        unload(s);
+  };
+  const IO = win.IntersectionObserver;
+  const nearIo = IO ? new IO((e) => setNear(e.at(-1).isIntersecting), { rootMargin: "100% 0px" }) : null;
+  const screenIo = IO ? new IO((e) => setOnScreen(e.at(-1).isIntersecting)) : null;
+  measure();
+  if (nearIo && screenIo) {
+    nearIo.observe(root);
+    screenIo.observe(root);
+  } else {
+    setNear(true);
+    setOnScreen(true);
+  }
+  return {
     element: root,
-    video: v,
-    timeline: tl,
-    get time() {
-      return tl.time;
-    },
-    get playing() {
-      return tl.playing;
-    },
-    get duration() {
-      return Number.isFinite(v.duration) ? v.duration : 0;
+    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();
     },
-    play: () => tl.play(),
-    pause: () => tl.pause(),
-    toggle: () => tl.toggle(),
-    seek: (t, o) => tl.seek(t, o?.glide ? { glide: true } : undefined),
-    seekBy: (d) => tl.seek(Math.min(tl.duration, Math.max(0, tl.time + d)), { glide: true }),
-    focus: () => tl.focus(),
     dispose() {
+      disposed = true;
+      if (raf)
+        win.cancelAnimationFrame(raf);
       unlisten();
-      tl.drive(null);
-      tl.dispose();
-      v.pause();
-      frame.removeEventListener("click", onClick);
-      v.removeEventListener("loadedmetadata", onMeta);
-      v.removeEventListener("loadeddata", onFrame);
-      v.removeEventListener("seeked", onSeeked);
-      v.removeAttribute("src");
-      v.load();
+      ro.disconnect();
+      nearIo?.disconnect();
+      screenIo?.disconnect();
+      for (const s of sides)
+        unload(s);
       root.remove();
     }
   };
-  return api;
-}
-var init_player = __esm(() => {
-  init_look();
-  init_timeline();
-});
-
-// src/ui/react.tsx
-import {
-  Children,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState
-} from "react";
-import { createPortal } from "react-dom";
-init_diff();
-
-// src/ui/follow.ts
-function propChanges(initial, same = Object.is) {
-  let last = { ...initial };
-  return (next) => {
-    const changed = {};
-    for (const key of Object.keys(next))
-      if (!same(next[key], last[key]))
-        changed[key] = next[key];
-    last = { ...next };
-    return changed;
-  };
 }
-var anyChanged = (changed) => Object.keys(changed).length > 0;
-
-// src/ui/react.tsx
-init_compare();
-init_compare_strip();
 
 // src/ui/walkthrough.ts
 init_motion();
@@ -16029,9 +16494,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}
@@ -16044,16 +16508,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)}
@@ -16072,6 +16535,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;
@@ -16321,8 +16787,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));
@@ -16349,7 +16813,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;
@@ -16411,11 +16874,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 = ""));
@@ -16433,13 +16896,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: () => {
@@ -16452,7 +16915,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) {
@@ -16479,12 +16942,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;
@@ -16517,8 +16980,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 } : {}
     }),
@@ -16662,8 +17125,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");
@@ -16683,7 +17144,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");
@@ -16737,7 +17198,7 @@ function mountDecision(host, m, slot) {
 }
 var HEAVY = new Set(["compare", "video", "diff", "mount"]);
 var RELEASES = new Set(["compare", "video"]);
-var labelOf2 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "metric" ? m.label : undefined;
+var labelOf2 = (m) => m.kind === "facts" ? m.title : ("label" in m) && m.kind !== "history" ? m.label : undefined;
 function mediaSlot(container, given) {
   const doc = container.ownerDocument;
   injectWalkthroughStyles(doc);
@@ -16751,7 +17212,7 @@ function mediaSlot(container, given) {
   root.dataset.kind = m.kind;
   applyLook2(root, options);
   const label = labelOf2(m);
-  if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal" || m.kind === "facts")) {
+  if (label) {
     const l = doc.createElement("span");
     l.className = "knobs-wt-slot-label";
     l.textContent = label;
@@ -18449,7 +18910,7 @@ function Compare(props) {
       c.dispose();
       handle.current = null;
     };
-  }, [props.timeline, props.strip, props.renderer]);
+  }, [props.timeline, props.renderer, props.scrubCache]);
   useFollow({
     before: props.before,
     after: props.after,