@kitlangton/knobs 0.1.0 → 0.2.0

package/dist/ui-react.js

@@ -10,6 +10,701 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
+// node_modules/@kitlangton/rolling-number/dist/chunk-vm1v7ncb.js
+var z = new Map;
+var le = /[\u0590-\u08ff\u200e\u200f\u202a-\u202e\u2066-\u2069\ufb1d-\ufeff]/u;
+var U = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:.-/&+'";
+var V = new Map;
+function Re(e) {
+  let t = V.get(e);
+  if (!t) {
+    if (t = [...new Set(ue(e))], V.size >= 16)
+      V.delete(V.keys().next().value);
+    V.set(e, t);
+  }
+  return t;
+}
+function ue(e) {
+  if (typeof Intl.Segmenter === "function")
+    return [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(e)].map((t) => t.segment);
+  return [...e];
+}
+function pe(e, t = {}) {
+  let n = t.charset ?? U, i = !le.test(e);
+  if (!i)
+    return { text: e, tokens: [], rollable: i, signature: "text", magnitude: "" };
+  let r = ue(e).map((s, o) => {
+    if (t.transition === "direct")
+      return { key: `char:${o}`, identity: `char:${o}`, text: s, wheel: [s], index: 0 };
+    let h = Re(typeof n === "string" ? n : n[o] ?? n.at(-1) ?? U), c = `char:${o}`, m = h.indexOf(s);
+    return m >= 0 ? { key: c, identity: c, text: s, wheel: h, index: m } : { key: `${c}:${s}`, identity: c, text: s };
+  });
+  return { text: e, tokens: r, rollable: i, signature: `text:${t.transition ?? "wheel"}`, magnitude: "" };
+}
+function me(e, t, n = 0.14) {
+  return { target: 0, duration: t, points: Array.from({ length: 49 }, (i, r) => {
+    if (r === 48)
+      return 0;
+    let s = Math.max(0, Math.min(1, (r / 48 - n) / (1 - n)));
+    return e * (1 + 10 * s) * Math.exp(-10 * s);
+  }) };
+}
+function W(e, t) {
+  if (t <= 0 || e.duration <= 0)
+    return e;
+  let n = e.duration + t, i = Math.round((e.points.length - 1) * n / e.duration) + 1, r = e.points[0] ?? e.target;
+  return { target: e.target, duration: n, points: Array.from({ length: i }, (s, o) => {
+    if (o === i - 1)
+      return e.target;
+    let h = o / (i - 1) * n - t;
+    return h <= 0 ? r : J(e, h).position;
+  }) };
+}
+function L(e, t, n, i) {
+  if (i <= 0)
+    return { points: [t, t], duration: 0, target: t };
+  let r = i / 1000, s = e - t, o = Math.max(Math.abs(s), 1) * 12 / r, h = Math.max(-o, Math.min(o, n)) * r;
+  return { points: Array.from({ length: 49 }, (m, f) => {
+    if (f === 48)
+      return t;
+    let y = f / 48;
+    return t + (s + (h + 10 * s) * y) * Math.exp(-10 * y);
+  }), duration: i, target: t };
+}
+function fe(e, t = 0, n = 24) {
+  if (e.duration <= 0)
+    return { points: [0, 0], duration: 0, target: 0 };
+  let i = e.duration / (e.points.length - 1) / 1000;
+  return { duration: e.duration, target: 0, points: e.points.map((r, s, o) => {
+    if (s === 0)
+      return Math.max(0, Math.min(1, t));
+    if (s === o.length - 1)
+      return 0;
+    let h = Math.abs((o[s + 1] - o[s - 1]) / (2 * i)), c = n / 6;
+    return Math.max(0, Math.min(1, (h - c) / (n - c)));
+  }) };
+}
+function J(e, t) {
+  if (t >= e.duration || e.duration === 0)
+    return { position: e.target, velocity: 0 };
+  let n = Math.max(0, t) / e.duration * (e.points.length - 1), i = Math.min(Math.floor(n), e.points.length - 2), r = e.points[i] ?? e.target, s = e.points[i + 1] ?? e.target;
+  return { position: r + (s - r) * (n - i), velocity: (s - r) * (e.points.length - 1) * 1000 / e.duration };
+}
+function Q(e, t, n, i = 10) {
+  let r = Math.floor(e / i) * i + t;
+  if (n > 0 && r < e - 0.001)
+    r += i;
+  else if (n < 0 && r > e + 0.001)
+    r -= i;
+  else if (n === 0)
+    r += Math.round((e - r) / i) * i;
+  return r;
+}
+var P = (e, t) => e[(t % e.length + e.length) % e.length];
+function ge(e, t, n) {
+  let i = Math.floor(t), r = t - i, s = [P(e, i)];
+  if (r > 0.00001)
+    s.push(P(e, i + 1));
+  if (s.at(-1) !== n)
+    s.push(n);
+  return { wheel: s, from: r, target: s.length - 1 };
+}
+function ye(e, t = "outward") {
+  if (t !== "outward") {
+    let r = e.map((o, h) => o ? -1 : h).filter((o) => o >= 0);
+    if (t === "end")
+      r.reverse();
+    let s = e.map((o) => o ? 0 : 1);
+    if (t !== "none")
+      r.forEach((o, h) => {
+        s[o] = h + 1;
+      });
+    return s;
+  }
+  let n = e.map((r, s) => r ? 0 : s + 1);
+  if (!e.includes(true))
+    return n;
+  let i = -1 / 0;
+  for (let r = 0;r < e.length; r++)
+    if (e[r])
+      i = r;
+    else
+      n[r] = r - i;
+  i = 1 / 0;
+  for (let r = e.length - 1;r >= 0; r--)
+    if (e[r])
+      i = r;
+    else
+      n[r] = Math.min(n[r], i - r);
+  return n;
+}
+function Z(e, t) {
+  let n = new Map, i = [], r = 0;
+  for (let s of e) {
+    let o = t.get(s);
+    if (!o) {
+      i.push(s);
+      continue;
+    }
+    for (let h of i)
+      n.set(h, o.x);
+    i.length = 0, r = o.x + o.width;
+  }
+  for (let s of i)
+    n.set(s, r);
+  return n;
+}
+var ee = new WeakMap;
+
+class Y {
+  view;
+  media;
+  members = new Set;
+  pending = new Set;
+  sizes = new WeakMap;
+  intersections = new WeakMap;
+  resize;
+  intersection;
+  frame = 0;
+  static for(e) {
+    let t = ee.get(e);
+    if (!t)
+      t = new Y(e), ee.set(e, t);
+    return t;
+  }
+  constructor(e) {
+    this.view = e;
+    if (this.media = e.matchMedia("(prefers-reduced-motion: reduce)"), this.media.addEventListener("change", this.refresh), e.document.addEventListener("visibilitychange", this.refresh), e.document.fonts?.addEventListener("loadingdone", this.refresh), e.document.fonts?.ready.then(this.refresh), e.ResizeObserver)
+      this.resize = new e.ResizeObserver((t) => {
+        for (let n of t) {
+          let i = this.sizes.get(n.target);
+          if (i?.sizeChanged(n.target, n.contentRect.width, n.contentRect.height))
+            i.refresh();
+        }
+      });
+    if (e.IntersectionObserver)
+      this.intersection = new e.IntersectionObserver((t) => {
+        for (let n of t)
+          this.intersections.get(n.target)?.visibility(n.isIntersecting);
+      }, { rootMargin: "64px" });
+  }
+  refresh = () => {
+    for (let e of this.members)
+      e.refresh();
+  };
+  add(e, t) {
+    this.members.add(e), this.intersections.set(t, e), this.intersection?.observe(t);
+  }
+  watch(e, t) {
+    this.sizes.set(e, t), this.resize?.observe(e);
+  }
+  unwatch(e) {
+    this.resize?.unobserve(e), this.sizes.delete(e);
+  }
+  enqueue(e) {
+    if (this.pending.add(e), !this.frame)
+      this.frame = this.view.requestAnimationFrame(() => {
+        this.frame = 0;
+        let t = [...this.pending];
+        this.pending.clear();
+        let n = t.map((r) => r.stage());
+        for (let r of n)
+          r?.();
+        let i = t.map((r) => r.measure());
+        for (let r of i)
+          r?.();
+      });
+  }
+  remove(e, t) {
+    if (this.pending.delete(e), this.members.delete(e), this.intersection?.unobserve(t), this.intersections.delete(t), this.members.size)
+      return;
+    this.view.cancelAnimationFrame(this.frame), this.resize?.disconnect(), this.intersection?.disconnect(), this.media.removeEventListener("change", this.refresh), this.view.document.removeEventListener("visibilitychange", this.refresh), this.view.document.fonts?.removeEventListener("loadingdone", this.refresh), ee.delete(this.view);
+  }
+}
+var be = new WeakMap;
+function F(e, t, n) {
+  let i = e.animate(t, n), r = e.ownerDocument.timeline?.currentTime;
+  if (typeof r === "number" && i.playState === "running")
+    i.startTime = r;
+  return i;
+}
+function ve(e) {
+  let t = e.ownerDocument.defaultView;
+  if (!t)
+    return false;
+  let n = be.get(t);
+  if (n === undefined)
+    n = t.CSS?.supports("animation-timing-function", "linear(0, 1)") ?? false, be.set(t, n);
+  return n;
+}
+
+class N {
+  element;
+  property;
+  animation;
+  motion;
+  value = 0;
+  constructor(e, t) {
+    this.element = e;
+    this.property = t;
+  }
+  read() {
+    let e = this.animation?.currentTime;
+    return this.animation && this.motion ? J(this.motion, typeof e === "number" ? e : 0) : { position: this.value, velocity: 0 };
+  }
+  set(e, t) {
+    this.cancel(), this.value = e, this.element.style.setProperty(this.property, t(e));
+  }
+  play(e, t, n) {
+    if (this.cancel(), this.value = e.target, this.element.style.setProperty(this.property, t(e.target)), !e.duration || e.points.every((f) => f === e.target)) {
+      n?.();
+      return;
+    }
+    let i = e.points[0] ?? e.target, r = e.target - i, s = this.property === "opacity" && ve(this.element), o = this.property === "transform" && Math.abs(r) > 0.00001 && ve(this.element), h = s ? [{ opacity: 0 }, { opacity: 1 }] : o ? [{ [this.property]: t(i) }, { [this.property]: t(e.target) }] : e.points.map((f) => ({ [this.property]: t(f) })), c = s ? `linear(${e.points.map(t).join(",")})` : o ? `linear(${e.points.map((f) => Number(((f - i) / r).toFixed(6))).join(",")})` : "linear", m = F(this.element, h, { duration: e.duration, easing: c });
+    this.animation = m, this.motion = e, m.onfinish = () => {
+      if (this.animation !== m)
+        return;
+      this.animation = undefined, this.motion = undefined, m.onfinish = null, m.cancel(), n?.();
+    };
+  }
+  cancel() {
+    if (this.animation)
+      this.animation.onfinish = null, this.animation.cancel(), this.animation = undefined;
+    this.motion = undefined;
+  }
+}
+var te = "http://www.w3.org/2000/svg";
+var $e = 0;
+
+class G {
+  host;
+  layers = new Map;
+  filter;
+  intensity = 1;
+  constructor(e) {
+    this.host = e;
+  }
+  filterUrl(e) {
+    if (!this.filter) {
+      let n = this.host.ownerDocument, i = n.createElementNS(te, "svg");
+      i.classList.add("rn-blur-defs"), i.setAttribute("aria-hidden", "true"), i.setAttribute("focusable", "false");
+      let r = n.createElementNS(te, "filter"), s;
+      do
+        s = `rn-vertical-blur-${++$e}`;
+      while (n.getElementById(s));
+      r.id = s, r.setAttribute("x", "-15%"), r.setAttribute("width", "130%"), r.setAttribute("color-interpolation-filters", "sRGB");
+      let o = n.createElementNS(te, "feGaussianBlur");
+      r.append(o), i.append(r), this.host.append(i), this.filter = { svg: i, blur: o, id: s, height: 0 };
+    }
+    let t = e * 0.035 * this.intensity;
+    if (this.filter.height !== t)
+      this.filter.blur.setAttribute("stdDeviation", `0 ${t}`), this.filter.height = t;
+    return `url("#${this.filter.id}")`;
+  }
+  apply(e, t, n, i, r = "roll") {
+    let s = fe(t, i, r === "entry" ? 6 : 24);
+    if (s.points.every((f) => f === 0))
+      return false;
+    let o = this.host.ownerDocument.createElement("span");
+    o.className = "rn-sharp", o.append(...e.childNodes);
+    let h = o.cloneNode(true);
+    h.className = "rn-smear", h.style.filter = this.filterUrl(n), e.append(o, h);
+    let c = new N(o, "opacity"), m = new N(h, "opacity");
+    return this.layers.set(e, { sharp: o, sharpOpacity: c, smearOpacity: m }), c.play(s, (f) => String(1 - f)), m.play(s, String), true;
+  }
+  remove(e) {
+    let t = this.layers.get(e);
+    if (!t)
+      return 0;
+    let n = t.smearOpacity.read().position;
+    return t.sharpOpacity.cancel(), t.smearOpacity.cancel(), e.replaceChildren(...t.sharp.childNodes), this.layers.delete(e), n;
+  }
+  destroy() {
+    for (let e of this.layers.keys())
+      this.remove(e);
+    this.filter?.svg.remove(), this.filter = undefined;
+  }
+}
+function xe(e) {
+  return Math.max(45, Math.min(110, e / 7));
+}
+function we(e, t, n) {
+  let i = Math.abs(t - e);
+  return { points: [e, t], target: t, duration: i * n };
+}
+function Ae(e) {
+  let i = Array.from({ length: e + 1 }, (o, h) => ({ "--rn-flap-step": String(h), offset: h / e, easing: "steps(1, end)" })), r = [], s = [];
+  for (let o = 0;o < e; o++) {
+    let h = o / e, c = (o + 0.5) / e, m = (o + 1) / e;
+    r.push({ transform: "perspective(5em) rotateX(0deg)", filter: "brightness(1)", offset: h, easing: "cubic-bezier(.6, 0, 1, .5)" }, { transform: "perspective(5em) rotateX(-90deg)", filter: "brightness(.45)", offset: c }, { transform: "perspective(5em) rotateX(-90deg)", filter: "brightness(.45)", offset: m }), s.push({ transform: "perspective(5em) rotateX(90deg)", filter: "brightness(.45)", offset: h }, { transform: "perspective(5em) rotateX(90deg)", filter: "brightness(.45)", offset: c, easing: "linear(0, 0.58, 0.9, 1, 1.045 78%, 1)" }, { transform: "perspective(5em) rotateX(0deg)", filter: "brightness(1)", offset: m });
+  }
+  return { index: i, falls: r, lands: s };
+}
+function Me(e) {
+  for (let t of e.querySelectorAll(".rn-flap-smear")) {
+    for (let n of t.getAnimations())
+      n.cancel();
+    t.remove();
+  }
+  for (let t of e.querySelectorAll(".rn-flap-sharp")) {
+    for (let n of t.getAnimations())
+      n.cancel();
+    t.classList.remove("rn-flap-sharp");
+  }
+}
+function ke(e, t, n, i, r, s, o, h) {
+  let c = e.ownerDocument, m = Math.abs(i - n), f = i >= n ? 1 : -1;
+  if (!m) {
+    e.replaceChildren();
+    return;
+  }
+  let y = Ae(m), M = Array.from({ length: m + 1 }, (p, w) => P(t, n + w * f)), S = [...M.slice(1), M.at(-1)], u = M.some((p) => /[\r\n\f\u2028\u2029]/u.test(p)), g = c.createElement("span");
+  g.style.cssText = `display:block;position:relative;height:${r}px`, F(g, y.index, { delay: o, duration: m * s, fill: "both" });
+  let T = (p, w) => {
+    let k = c.createElement("span");
+    k.className = `rn-face rn-flap rn-flap-${p}`, k.style.height = `${r}px`, k.style.overflow = "hidden";
+    let v = c.createElement("span");
+    v.style.cssText = `display:block;white-space:pre;line-height:${r}px`;
+    let l = w ? S : M;
+    if (u)
+      for (let b of l) {
+        let O = c.createElement("span");
+        O.style.cssText = `display:block;height:${r}px`, O.textContent = b, v.append(O);
+      }
+    else
+      v.textContent = l.join(`
+`);
+    return k.append(v), v.style.transform = `translateY(calc(var(--rn-flap-step) * ${-r}px))`, k;
+  }, H = T("bottom", false), j = T("top", true), d = T("top", false), a = T("bottom", true);
+  if (h) {
+    let p = (w, k) => {
+      let v = w.firstElementChild, l = v.cloneNode(true);
+      v.classList.add("rn-flap-sharp");
+      let b = c.createElement("span");
+      b.className = "rn-flap-smear", b.style.cssText = "display:block;position:absolute;inset:0;overflow:hidden", b.style.filter = h, b.append(l), w.append(b);
+      let O = k.map((C) => ({ offset: C.offset, easing: C.easing ?? "linear", opacity: C.filter === "brightness(1)" ? 0 : 1 })), A = { delay: o, duration: m * s, fill: "both" };
+      F(b, O, A), F(v, O.map((C) => ({ ...C, opacity: 1 - C.opacity })), A);
+    };
+    p(d, y.falls), p(a, y.lands);
+  }
+  d.style.transform = "perspective(5em) rotateX(-90deg)", F(d, y.falls, { delay: o, duration: m * s, fill: "backwards" }), a.style.transform = "perspective(5em) rotateX(90deg)", F(a, y.lands, { delay: o, duration: m * s, fill: "forwards" }), e.style.height = `${r}px`, g.append(H, j, a, d), e.replaceChildren(g);
+}
+var Ee = new WeakMap;
+var _ = new WeakSet;
+var ne = (e) => `translateX(${e}px)`;
+var ie = (e) => `scale(${e})`;
+var re = (e) => String(Math.max(0, Math.min(1, e)));
+var se = (e) => ("transition" in e) && e.transition === "direct";
+function Te(e) {
+  if (e.duration !== undefined && (!Number.isFinite(e.duration) || e.duration < 0 || e.duration > 1e4))
+    throw RangeError("duration must be between 0 and 10000 milliseconds");
+  if (e.flipDuration !== undefined && (!Number.isFinite(e.flipDuration) || e.flipDuration < 1 || e.flipDuration > 1e4))
+    throw RangeError("flipDuration must be between 1 and 10000 milliseconds");
+}
+var Fe = { validate(e) {
+  if (typeof e.text !== "string")
+    throw TypeError("text must be a string");
+  if (e.transition !== undefined && e.transition !== "direct" && e.transition !== "wheel")
+    throw RangeError("transition must be direct or wheel");
+  if (e.transition === "direct" && e.mode === "flap")
+    throw RangeError("Direct text transitions require roll mode");
+  Te(e);
+}, model: (e) => pe(e.text, e), direction: () => 1 };
+
+class oe {
+  host;
+  source;
+  options;
+  target;
+  displayed;
+  semantic;
+  measurement;
+  visual;
+  measures = new Map;
+  columns = new Map;
+  sizes = new Map;
+  scheduler;
+  enhanced = false;
+  destroyed = false;
+  visible = true;
+  reset = true;
+  measurementPending = false;
+  hadClass;
+  previousLeft;
+  blur;
+  blurIntensity = 1;
+  constructor(e, t, n) {
+    this.host = e;
+    this.source = n;
+    n.validate(t), this.options = { ...t }, this.target = this.displayed = n.model(t);
+    let i = e.ownerDocument, r = (o) => {
+      let h = i.createElement("span");
+      return h.className = o, h;
+    };
+    this.semantic = r("rn-value"), this.measurement = r("rn-measure"), this.visual = r("rn-visual"), this.measurement.setAttribute("aria-hidden", "true"), this.visual.setAttribute("aria-hidden", "true"), this.semantic.textContent = this.target.text, this.hadClass = e.classList.contains("rn-root"), e.classList.add("rn-root"), e.replaceChildren(this.semantic, this.measurement, this.visual);
+    let s = i.defaultView;
+    if (s && typeof s.matchMedia === "function" && typeof s.requestAnimationFrame === "function" && typeof e.animate === "function")
+      this.scheduler = Y.for(s), this.scheduler.add(this, e), this.scheduler.watch(this.measurement, this);
+    this.prepare();
+  }
+  canAnimate() {
+    return !!this.scheduler && this.options.animated !== false && (this.options.duration ?? 500) > 0 && !this.scheduler.media.matches && !this.host.ownerDocument.hidden && (this.visible || this.options.pauseOffscreen === false) && this.target.rollable && this.host.isConnected;
+  }
+  update(e) {
+    if (this.destroyed)
+      return;
+    let t = { ...this.options, ...e };
+    this.source.validate(t);
+    let n = this.source.model(t), i = n.text === this.target.text && n.signature === this.target.signature;
+    if (this.options.motionBlur && !t.motionBlur)
+      this.blur?.destroy(), this.blur = undefined, Me(this.visual);
+    if (se(this.options) !== se(t))
+      this.reset = true;
+    if (this.options = t, this.target = n, !this.canAnimate()) {
+      this.finish();
+      return;
+    }
+    if (i && this.enhanced && !this.reset)
+      return;
+    this.semantic.textContent = n.text, this.prepare();
+  }
+  prepare() {
+    if (!this.canAnimate()) {
+      this.finish();
+      return;
+    }
+    this.measurementPending = true, this.scheduler?.enqueue(this);
+  }
+  stage() {
+    if (this.destroyed)
+      return;
+    if (!this.canAnimate())
+      return () => this.finish();
+    return this.previousLeft = this.enhanced && !this.reset ? this.measurement.getBoundingClientRect().left : undefined, () => this.stageMeasurement();
+  }
+  stageMeasurement() {
+    let e = new Set(this.target.tokens.map((n) => n.key));
+    for (let [n, i] of this.measures) {
+      if (e.has(n))
+        continue;
+      this.scheduler?.unwatch(i), this.sizes.delete(i), i.remove(), this.measures.delete(n);
+    }
+    let t = null;
+    for (let n of this.target.tokens) {
+      let i = this.measures.get(n.key);
+      if (!i)
+        i = this.host.ownerDocument.createElement("span"), i.className = "rn-token", this.measures.set(n.key, i), this.scheduler?.watch(i, this);
+      if (i.textContent !== n.text)
+        i.textContent = n.text;
+      let r = t ? t.nextSibling : this.measurement.firstChild;
+      if (i !== r)
+        this.measurement.insertBefore(i, r);
+      t = i;
+    }
+    this.host.dataset.rnMeasuring = "";
+  }
+  measure() {
+    if (this.destroyed)
+      return;
+    if (!this.canAnimate())
+      return () => this.finish();
+    let e = this.measurement.getBoundingClientRect(), t = this.host.ownerDocument.defaultView;
+    if (!t)
+      return () => this.finish();
+    let n = t.getComputedStyle(this.measurement);
+    if (n.direction === "rtl")
+      return () => this.finish();
+    let i = parseFloat(n.width), r = parseFloat(n.height);
+    if (!i || !r || !e.width || !e.height)
+      return () => this.finish();
+    let s = e.width / i, o = e.height / r, h = parseFloat(n.getPropertyValue("--rn-blur"));
+    this.blurIntensity = Number.isFinite(h) ? Math.max(0, h) : 1, this.sizes.set(this.measurement, { width: i, height: r });
+    let c = new Map;
+    for (let [f, y] of this.measures) {
+      let M = y.getBoundingClientRect(), S = { width: M.width / s, height: M.height / o };
+      this.sizes.set(y, S), c.set(f, { ...S, x: (M.left - e.left) / s, y: (M.top - e.top) / o });
+    }
+    let m = this.previousLeft === undefined ? 0 : (this.previousLeft - e.left) / s;
+    return () => this.commit(c, m);
+  }
+  makeColumn(e) {
+    let t = this.host.ownerDocument.createElement("span");
+    if (t.className = "rn-slot", t.dataset.rnKey = e.key, e.index !== undefined)
+      t.dataset.rnWheel = "";
+    if (this.options.mode === "flap")
+      t.dataset.rnFlap = "";
+    let n = this.host.ownerDocument.createElement("span");
+    return n.className = "rn-reel", t.append(n), this.visual.append(t), { token: e, element: t, reel: n, x: new N(t, "transform"), opacity: new N(t, "opacity"), roll: new N(n, "transform"), exiting: false, height: 0, width: 0 };
+  }
+  face(e, t) {
+    let n = this.host.ownerDocument.createElement("span");
+    n.className = "rn-face", n.textContent = t, n.style.height = `${e.height}px`;
+    let i = e.reel.children.length;
+    n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.width = "100%", n.style.transform = `translateY(${i * e.height}px)`, e.reel.style.height = `${(i + 1) * e.height}px`, e.reel.append(n);
+  }
+  rest(e) {
+    if (this.blur?.remove(e.reel), e.reel.replaceChildren(), e.reel.style.removeProperty("height"), this.face(e, e.token.text), this.wrapInk(e), e.token.index === undefined)
+      e.roll.set(1, ie);
+    else
+      e.roll.set(e.token.index, () => "translateY(0px)");
+  }
+  wrapInk(e) {
+    if (this.options.mode === "flap")
+      return;
+    let t = this.host.ownerDocument.createElement("span");
+    t.className = "rn-ink", t.append(...e.reel.childNodes), e.reel.append(t);
+  }
+  finishEntry(e) {
+    if (!e.entry)
+      return;
+    if (e.entry.blurred)
+      this.blur?.remove(e.reel);
+    e.entry.track.cancel(), e.entry.element.replaceWith(e.reel), e.entry = undefined;
+  }
+  enter(e, t, n, i) {
+    let r = this.host.ownerDocument.createElement("span");
+    r.className = "rn-enter", e.reel.replaceWith(r), r.append(e.reel);
+    let s = new N(r, "transform");
+    e.entry = { element: r, track: s, blurred: false };
+    let o = W(me(e.height * (i?.entryDistance ?? 1), i?.entryDuration ?? t, i?.entryHold), n);
+    if (this.options.motionBlur && e.token.text.trim()) {
+      this.blur ??= new G(this.host), this.blur.intensity = this.blurIntensity;
+      let h = { ...o, points: o.points.map((c) => c / e.height) };
+      e.entry.blurred = this.blur.apply(e.reel, h, e.height, 0, "entry");
+    }
+    s.play(o, (h) => `translateY(${h}px)`, () => this.finishEntry(e));
+  }
+  commit(e, t) {
+    if (this.destroyed)
+      return;
+    this.measurementPending = false;
+    let n = this.enhanced && !this.reset, i = n ? this.options.duration ?? 500 : 0, r = Ee.get(this.host), s = i ? r?.widthDuration ?? i : 0, o = this.options.mode === "flap", h = this.options.direction === "up" ? 1 : this.options.direction === "down" ? -1 : this.source.direction(this.displayed, this.target);
+    if (this.target.text !== this.displayed.text)
+      this.host.dataset.rnTrend = h > 0 ? "up" : h < 0 ? "down" : "none";
+    let c = new Map([...this.columns].map(([d, a]) => {
+      let p = a.x.read();
+      return [d, { ...p, x: p.position, width: a.width }];
+    })), m = Z(this.target.tokens.map((d) => d.key), c), f = [...c.keys()].sort((d, a) => c.get(d).x - c.get(a).x), y = Z(f, e), M = new Map(this.displayed.tokens.filter((d) => d.index === undefined).map((d) => [d.identity, d.key])), S = new Map(this.target.tokens.filter((d) => d.index === undefined).map((d) => [d.identity, d.key])), u = this.options.stagger === "start" || this.options.stagger === "end", g = this.target.tokens.map((d) => {
+      let a = this.columns.get(d.key);
+      return !a || a.exiting || u && d.index !== undefined && a.token.text !== d.text;
+    }), T = ye(this.target.tokens.map((d, a) => d.index !== undefined && !g[a]), this.options.stagger), H = Math.max(0, ...this.target.tokens.map((d, a) => g[a] ? T[a] - 1 : 0)), j = Math.min(i * 0.045, i * 0.3 / Math.max(1, H));
+    for (let [d, a] of this.target.tokens.entries()) {
+      let p = e.get(a.key);
+      if (!p)
+        continue;
+      let w = Math.max(0, T[d] - 1) * j, k = M.get(a.identity), v = k !== undefined && k !== a.key ? c.get(k) : undefined, l = this.columns.get(a.key), b = !l;
+      if (!l) {
+        l = this.makeColumn(a), this.columns.set(a.key, l);
+        let x = (v?.x ?? m.get(a.key) ?? p.x) + t;
+        l.x.set(n ? x + (p.x - x) * (v ? 0 : r?.entryOrigin ?? 0) : p.x, ne), l.opacity.set(n ? 0 : 1, re);
+      }
+      let O = l.token.text !== a.text, A = Math.abs(l.height - p.height) > 0.1, C = l.exiting;
+      l.exiting = false, l.element.style.width = `${p.width}px`, l.element.style.height = `${p.height}px`, l.element.style.top = `${p.y}px`;
+      let q = c.get(a.key);
+      if (l.x.play(L(q ? q.position + t : l.x.read().position, p.x, q?.velocity ?? 0, s), ne), b || C || !n) {
+        let x = l.opacity.read(), E = L(x.position, 1, x.velocity, a.index === undefined ? Math.min(i, 180) : i ? r?.fadeDuration ?? i : 0), R = !o && a.identity.startsWith("group:") && !v ? (r?.entryDuration ?? i) * (r?.entryHold ?? 0.14) : 0;
+        l.opacity.play(b ? W(E, w + R) : E, re);
+      }
+      if (l.height = p.height, l.width = p.width, !n || A)
+        this.finishEntry(l);
+      if (b && o && a.wheel && i)
+        l.roll.set(Math.max(0, a.wheel.indexOf(" ")), () => "translateY(0px)");
+      if (o && !A && (O || b) && a.index !== undefined && a.wheel && i && l.roll.read().position !== a.index) {
+        let x = l.roll.read(), E = Math.round(x.position), R = Q(E, a.index, h, a.wheel.length), D = this.options.flipDuration ?? xe(i);
+        this.blur?.remove(l.reel);
+        let I;
+        if (this.options.motionBlur && this.blurIntensity > 0)
+          this.blur ??= new G(this.host), this.blur.intensity = this.blurIntensity, I = this.blur.filterUrl(p.height);
+        ke(l.reel, a.wheel, E, R, p.height, D, w, I), l.token = a;
+        let X = l;
+        l.roll.play(W(we(E, R, D), w), () => "translateY(0px)", () => this.rest(X));
+      } else if (!b && !A && O && a.index !== undefined && a.wheel && l.token.index !== undefined && i) {
+        let x = l.roll.read(), E = se(this.options) ? ge(l.token.wheel, x.position, a.text) : undefined, R = E?.from ?? x.position, D = E?.target ?? Q(x.position, a.index, h, a.wheel.length), I = E?.wheel ?? a.wheel, X = E ? Math.min(Math.max(0, x.velocity), (D - R) * 1e4 / i) : x.velocity, K = u ? W(L(R, D, X, i), w) : L(R, D, X, i), ae = Math.floor(Math.min(...K.points)), Oe = Math.ceil(Math.max(...K.points));
+        if (l.entry)
+          l.entry.blurred = false;
+        let Se = this.blur?.remove(l.reel) ?? 0;
+        l.reel.replaceChildren();
+        for (let B = ae;B <= Oe; B++)
+          this.face(l, P(I, B));
+        if (this.wrapInk(l), this.options.motionBlur)
+          this.blur ??= new G(this.host), this.blur.intensity = this.blurIntensity, this.blur.apply(l.reel, K, p.height, Se);
+        l.token = E ? { ...a, wheel: I, index: D } : a;
+        let Ce = l;
+        l.roll.play(K, (B) => `translateY(${(ae - B) * p.height}px)`, () => this.rest(Ce));
+      } else if (b || A || O || !n)
+        l.token = a, this.rest(l);
+      if (b && i && a.index !== undefined && !o)
+        this.enter(l, i, w, r);
+      if (v && i && (b || C)) {
+        let x = l.roll.read(), E = l;
+        l.roll.play(L(b ? 0.96 : x.position, 1, x.velocity, Math.min(i, 180)), ie, () => this.rest(E));
+      }
+    }
+    for (let [d, a] of this.columns) {
+      if (e.has(d))
+        continue;
+      let p = c.get(d), w = S.get(a.token.identity), k = w ? e.get(w) : undefined;
+      if (a.x.play(L(p.position + t, k?.x ?? y.get(d) ?? p.position, p.velocity, s), ne), a.exiting)
+        continue;
+      if (a.exiting = true, k && i) {
+        let l = a.roll.read();
+        a.roll.play(L(l.position, 1.04, l.velocity, Math.min(i, 180)), ie);
+      }
+      let v = a.opacity.read();
+      a.opacity.play(L(v.position, 0, v.velocity, a.token.index === undefined ? Math.min(i, 180) : i * 0.65), re, () => {
+        if (!a.exiting)
+          return;
+        this.removeColumn(a), this.columns.delete(d);
+      });
+    }
+    this.enhanced = true, this.reset = false, this.displayed = this.target, this.host.dataset.rnReady = "";
+  }
+  removeColumn(e) {
+    this.blur?.remove(e.reel), this.finishEntry(e), e.x.cancel(), e.roll.cancel(), e.opacity.cancel(), e.element.remove();
+  }
+  refresh() {
+    if (this.destroyed)
+      return;
+    this.reset = true, this.prepare();
+  }
+  sizeChanged(e, t, n) {
+    if (this.measurementPending || !this.host.hasAttribute("data-rn-measuring"))
+      return false;
+    let i = this.sizes.get(e);
+    return !i || Math.abs(i.width - t) > 0.2 || Math.abs(i.height - n) > 0.2;
+  }
+  visibility(e) {
+    if (this.visible === e)
+      return;
+    if (this.visible = e, e || this.options.pauseOffscreen !== false)
+      this.refresh();
+  }
+  finish() {
+    if (this.destroyed)
+      return;
+    this.measurementPending = false;
+    for (let e of this.columns.values())
+      this.removeColumn(e);
+    this.columns.clear(), this.blur?.destroy(), this.blur = undefined, this.semantic.textContent = this.target.text, delete this.host.dataset.rnReady, delete this.host.dataset.rnMeasuring, delete this.host.dataset.rnTrend, this.enhanced = false, this.reset = true, this.displayed = this.target;
+  }
+  destroy() {
+    if (this.destroyed)
+      return;
+    this.finish(), this.destroyed = true;
+    for (let e of this.measures.values())
+      this.scheduler?.unwatch(e);
+    if (this.scheduler?.unwatch(this.measurement), this.scheduler?.remove(this, this.host), this.host.replaceChildren(this.host.ownerDocument.createTextNode(this.target.text)), !this.hadClass)
+      this.host.classList.remove("rn-root");
+    _.delete(this.host);
+  }
+}
+function rt(e, t) {
+  if (_.has(e))
+    throw Error("A rolling number is already mounted on this element");
+  let n = new oe(e, t, Fe);
+  return _.add(e), n;
+}
+
 // src/core/spring.ts
 class Spring {
   x;
@@ -92,323 +787,247 @@ function springCss(value) {
   return { easing, duration: ms };
 }
 
-// src/ui/bento-model.ts
-var FIT_MAX = 24;
-var clamp = (x, a, b) => Math.min(b, Math.max(a, x));
-var sum = (xs) => xs.reduce((s, x) => s + x, 0);
-var rowTarget = (width, height) => clamp(Math.round(Math.min(height / 3, width / 2.6)), 120, 420);
-function justify(aspects, start, end, width, target, gap, tol) {
+// src/ui/activity-model.ts
+function flattenActivity(events, expanded) {
   const rows = [];
-  let i = start;
-  while (i < end) {
-    let total = 0;
-    let j = i;
-    let h = Number.POSITIVE_INFINITY;
-    let closed = false;
-    while (j < end) {
-      const k = j - i + 1;
-      const next = (width - (k - 1) * gap) / (total + aspects[j]);
-      if (next <= target) {
-        if (k === 1 || Math.abs(Math.log(next / target)) <= Math.abs(Math.log(h / target))) {
-          total += aspects[j];
-          j++;
-          h = next;
-        }
-        closed = true;
-        break;
-      }
-      total += aspects[j];
-      h = next;
-      j++;
-    }
-    const slice = aspects.slice(i, j);
-    if (closed || h <= target * 1.25) {
-      rows.push({ start: i, end: j, h, ws: slice.map((a) => a * h) });
-    } else {
-      const free = width - (j - i - 1) * gap;
-      const f = free / (target * total);
-      const ws = slice.map((a) => a * target * (f - 1 <= tol ? f : 1));
-      rows.push({ start: i, end: j, h: target, ws });
-    }
-    i = j;
+  for (const event of events) {
+    const kids = event.children ?? [];
+    const group = kids.length > 0;
+    const open = group && expanded.has(event.id);
+    rows.push({ id: event.id, event, depth: 0, parent: null, group, expanded: open });
+    if (open)
+      for (const child of flatChildren(kids))
+        rows.push({
+          id: child.id,
+          event: child,
+          depth: 1,
+          parent: event.id,
+          group: false,
+          expanded: false
+        });
   }
   return rows;
 }
-function partition(xs, k) {
-  const n = xs.length;
-  k = clamp(k, 1, n);
-  const prefix = [0];
-  for (const x of xs)
-    prefix.push(prefix.at(-1) + x);
-  const cost = Array.from({ length: k + 1 }, () => new Float64Array(n + 1).fill(Infinity));
-  const cut = Array.from({ length: k + 1 }, () => new Int32Array(n + 1));
-  cost[0][0] = 0;
-  for (let j = 1;j <= k; j++)
-    for (let i = j;i <= n; i++)
-      for (let m = j - 1;m < i; m++) {
-        const c = Math.max(cost[j - 1][m], prefix[i] - prefix[m]);
-        if (c < cost[j][i]) {
-          cost[j][i] = c;
-          cut[j][i] = m;
-        }
-      }
-  const counts = [];
-  for (let j = k, i = n;j > 0; j--) {
-    const m = cut[j][i];
-    counts.unshift(i - m);
-    i = m;
+function flatChildren(events) {
+  const out = [];
+  for (const e of events) {
+    out.push(e);
+    if (e.children?.length)
+      out.push(...flatChildren(e.children));
   }
-  return counts;
+  return out;
 }
-function rowsBlock(aspects, w, h, gap, tol) {
-  const n = aspects.length;
-  if (!n || w <= 0 || h <= 0)
-    return null;
-  let best = null;
-  const most = Math.min(n, Math.max(2, Math.ceil(Math.sqrt(n) * 2)));
-  for (let r = 1;r <= most; r++) {
-    const counts = partition(aspects, r);
-    let at = 0;
-    const groups = counts.map((c) => aspects.slice(at, at += c));
-    const heights = groups.map((g) => (w - (g.length - 1) * gap) / sum(g));
-    const budget = h - (r - 1) * gap;
-    if (budget <= 0 || heights.some((x) => x <= 0))
-      break;
-    const s = Math.min(1, budget / sum(heights));
-    const fill = s < 1 && 1 / s - 1 <= tol ? 1 / s : 1;
-    const rects = [];
-    let y = 0;
-    let blockW = 0;
-    groups.forEach((g, k) => {
-      const rh = heights[k] * s;
-      const rowW = sum(g.map((a) => a * rh * fill)) + (g.length - 1) * gap;
-      blockW = Math.max(blockW, rowW);
-      let x = 0;
-      for (const a of g) {
-        rects.push({ x, y, w: a * rh * fill, h: rh });
-        x += a * rh * fill + gap;
-      }
-      y += rh + gap;
-    });
-    let i = 0;
-    groups.forEach((g, k) => {
-      const rowW = sum(g.map((a) => a * heights[k] * s * fill)) + (g.length - 1) * gap;
-      const dx = (blockW - rowW) / 2;
-      for (let m = 0;m < g.length; m++, i++) {
-        const q = rects[i];
-        rects[i] = { ...q, x: q.x + dx };
-      }
-    });
-    const area = sum(rects.map((q) => q.w * q.h));
-    const block = {
-      rects,
-      w: blockW,
-      h: y - gap,
-      area,
-      crop: fill - 1,
-      minH: Math.min(...rects.map((q) => q.h))
-    };
-    if (!best || block.area > best.area * 1.0001)
-      best = block;
+function indexActivity(events) {
+  const index = new Map;
+  for (const event of events) {
+    index.set(event.id, { event, parent: null });
+    for (const child of flatChildren(event.children ?? []))
+      index.set(child.id, { event: child, parent: event.id });
   }
-  return best;
+  return index;
 }
-var offset = (rects, dx, dy) => rects.map((q) => ({ x: q.x + dx, y: q.y + dy, w: q.w, h: q.h }));
-function heroBlock(aspects, hero, w, h, gap, tol) {
-  const a = aspects[hero];
-  const rest = aspects.filter((_, i) => i !== hero);
-  if (!rest.length)
-    return null;
-  let best = null;
-  const place = (heroRect, restBlock, restAt, bw, bh) => {
-    if (!restBlock)
-      return;
-    const [rx, ry] = restAt(restBlock);
-    const others = offset(restBlock.rects, rx, ry);
-    const rects = [...others.slice(0, hero), heroRect, ...others.slice(hero)];
-    const area = heroRect.w * heroRect.h + restBlock.area;
-    if (!best || area > best.area * 1.0001)
-      best = { rects, w: bw, h: bh, area, crop: restBlock.crop, minH: restBlock.minH };
-  };
-  for (let f = 0.4;f <= 0.761; f += 0.04) {
-    {
-      const hw = Math.min(w * f, h * a);
-      const hh = hw / a;
-      const block = rowsBlock(rest, w - hw - gap, h, gap, tol);
-      if (block) {
-        const bw = hw + gap + block.w;
-        const bh = Math.max(hh, block.h);
-        place({ x: 0, y: (bh - hh) / 2, w: hw, h: hh }, block, (b) => [hw + gap, (bh - b.h) / 2], bw, bh);
-      }
-    }
-    {
-      const hh = Math.min(h * f, w / a);
-      const hw = hh * a;
-      const block = rowsBlock(rest, w, h - hh - gap, gap, tol);
-      if (block) {
-        const bw = Math.max(hw, block.w);
-        place({ x: (bw - hw) / 2, y: 0, w: hw, h: hh }, block, (b) => [(bw - b.w) / 2, hh + gap], bw, hh + gap + block.h);
-      }
-    }
+var isActivityKey = (key) => key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End";
+function navigateActivity(rows, selected, key) {
+  if (!rows.length)
+    return {};
+  const i = selected === null ? -1 : rows.findIndex((r) => r.id === selected);
+  const row = i >= 0 ? rows[i] : undefined;
+  switch (key) {
+    case "ArrowDown":
+      return { select: rows[i < 0 ? 0 : Math.min(rows.length - 1, i + 1)].id };
+    case "ArrowUp":
+      return { select: rows[i < 0 ? rows.length - 1 : Math.max(0, i - 1)].id };
+    case "Home":
+      return { select: rows[0].id };
+    case "End":
+      return { select: rows[rows.length - 1].id };
+    case "ArrowRight":
+      if (!row?.group)
+        return {};
+      if (!row.expanded)
+        return { toggle: { id: row.id, expanded: true } };
+      return rows[i + 1]?.parent === row.id ? { select: rows[i + 1].id } : {};
+    case "ArrowLeft":
+      if (!row)
+        return {};
+      if (row.group && row.expanded)
+        return { toggle: { id: row.id, expanded: false } };
+      return row.parent !== null ? { select: row.parent } : {};
   }
-  return best;
 }
-function planBento(aspects, layout) {
-  const gap = layout.gap ?? 2;
-  const pad = layout.padding ?? gap;
-  const tol = layout.tolerance ?? 0.08;
-  const vw = Math.max(0, layout.width);
-  const vh = Math.max(0, layout.height);
-  const w = Math.max(1, vw - pad * 2);
-  const h = Math.max(1, vh - pad * 2);
-  const as = aspects.map((a) => Number.isFinite(a) && a > 0 ? clamp(a, 0.05, 20) : 1);
-  const empty = {
-    mode: "rows",
-    rects: [],
-    width: vw,
-    height: 0,
-    coverage: 0,
-    crop: 0,
-    headers: []
+function takesActivityKey(key, result, rows) {
+  if (result.select !== undefined || result.toggle !== undefined)
+    return true;
+  return rows > 0 && key !== "ArrowLeft" && key !== "ArrowRight";
+}
+function keepSelection(rows, selected, parentOf) {
+  if (selected === null)
+    return null;
+  if (rows.some((r) => r.id === selected))
+    return selected;
+  const parent = parentOf(selected);
+  return parent && rows.some((r) => r.id === parent) ? parent : null;
+}
+function showsSelection(showing, input, keys = "focus") {
+  if (input === "key")
+    return true;
+  if (input === "pointer")
+    return false;
+  if (input === "blur")
+    return keys === "page" ? showing : false;
+  return showing;
+}
+function diffActivity(before, after) {
+  const was = new Set(before);
+  const now = new Set(after);
+  return {
+    entered: after.filter((id) => !was.has(id)),
+    left: before.filter((id) => !now.has(id)),
+    kept: after.filter((id) => was.has(id))
   };
-  if (!as.length || vw <= 0)
-    return empty;
-  const grouped = layout.groups?.some((g) => g !== undefined) ?? false;
-  const minTile = layout.minTile ?? Math.max(80, vh / 6);
-  if ((layout.fit ?? true) && !grouped && as.length <= FIT_MAX && vh > 0) {
-    const rows = rowsBlock(as, w, h, gap, tol);
-    let pick = rows && rows.minH >= minTile ? { mode: "fit", block: rows } : null;
-    const asked = layout.hero !== undefined && layout.hero >= 0 && layout.hero < as.length;
-    const hero = as.length > 2 ? heroBlock(as, asked ? layout.hero : 0, w, h, gap, tol) : null;
-    if (hero && hero.minH >= minTile && (asked || !pick || hero.area > pick.block.area * 1.04))
-      pick = { mode: "hero", block: hero };
-    if (pick) {
-      const { block } = pick;
-      const rects = offset(block.rects, pad + (w - block.w) / 2, pad + (h - block.h) / 2);
-      return {
-        mode: pick.mode,
-        rects,
-        width: vw,
-        height: vh,
-        coverage: block.area / (vw * vh),
-        crop: block.crop,
-        headers: []
-      };
-    }
-  }
-  const target = layout.rowHeight ?? rowTarget(vw, vh);
-  const header = layout.header ?? 28;
-  const rects = new Array(as.length);
-  const headers = [];
-  let y = pad;
-  let crop = 0;
-  let area = 0;
-  let i = 0;
-  while (i < as.length) {
-    const group = layout.groups?.[i];
-    let end = i + 1;
-    while (end < as.length && layout.groups?.[end] === group)
-      end++;
-    if (group !== undefined) {
-      if (i > 0)
-        y += header / 2;
-      headers.push({ group, y, index: i });
-      y += header;
-    }
-    for (const row of justify(as, i, end, w, target, gap, tol)) {
-      let x = pad;
-      row.ws.forEach((rw, k) => {
-        rects[row.start + k] = { x, y, w: rw, h: row.h };
-        crop = Math.max(crop, rw / (as[row.start + k] * row.h) - 1);
-        area += rw * row.h;
-        x += rw + gap;
-      });
-      y += row.h + gap;
-    }
-    i = end;
-  }
-  const height = y - gap + pad;
-  return { mode: "rows", rects, width: vw, height, coverage: area / (vw * height), crop, headers };
 }
-function windowOf(plan, top, bottom) {
-  const { rects } = plan;
-  if (plan.mode !== "rows")
-    return rects.map((_, i) => i);
-  let lo = 0;
-  let hi = rects.length;
-  while (lo < hi) {
-    const mid = lo + hi >> 1;
-    if (rects[mid].y + rects[mid].h < top)
-      lo = mid + 1;
-    else
-      hi = mid;
-  }
+function stackRows(heights, top = 0, gap = 0) {
+  const y = [];
+  let at = top;
+  heights.forEach((h, i) => {
+    y.push(at);
+    at += h + (i < heights.length - 1 ? gap : 0);
+  });
+  return { y, bottom: at };
+}
+function railSegments(nodes, from, to) {
+  const sorted = [...nodes].sort((a, b) => a.y - b.y);
   const out = [];
-  for (let i = lo;i < rects.length && rects[i].y <= bottom; i++)
-    out.push(i);
+  for (let i = 0;i < sorted.length - 1; i++) {
+    const a = sorted[i];
+    const b = sorted[i + 1];
+    const top = Math.max(from, a.y + a.r);
+    const bottom = Math.min(to, b.y - b.r);
+    if (bottom - top > 0.25)
+      out.push([top, bottom]);
+  }
   return out;
 }
-var overlapY = (a, b) => Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y) >= Math.min(a.h, b.h) * 0.5;
-function neighbour(rects, from, dir) {
-  const f = rects[from];
-  if (!f)
-    return from;
-  const fx = f.x + f.w / 2;
-  const fy = f.y + f.h / 2;
-  if (dir === "left" || dir === "right") {
-    const right = dir === "right";
-    let best = -1;
-    let bestD = Number.POSITIVE_INFINITY;
-    rects.forEach((r, i) => {
-      if (i === from || !overlapY(f, r))
-        return;
-      const d = (r.x + r.w / 2 - fx) * (right ? 1 : -1);
-      if (d > 1 && d < bestD) {
-        bestD = d;
-        best = i;
-      }
-    });
-    if (best >= 0)
-      return best;
-    return clamp(from + (right ? 1 : -1), 0, rects.length - 1);
-  }
-  const down = dir === "down";
-  let edge = Number.POSITIVE_INFINITY;
-  for (const r of rects) {
-    const d = (r.y + r.h / 2 - fy) * (down ? 1 : -1);
-    if (d > f.h * 0.25 && !overlapY(f, r))
-      edge = Math.min(edge, down ? r.y : -(r.y + r.h));
-  }
-  if (!Number.isFinite(edge))
-    return from;
-  let best = from;
-  let bestD = Number.POSITIVE_INFINITY;
-  rects.forEach((r, i) => {
-    const d = (r.y + r.h / 2 - fy) * (down ? 1 : -1);
-    if (i === from || d <= f.h * 0.25 || overlapY(f, r))
-      return;
-    const near = down ? r.y - edge : -(r.y + r.h) - edge;
-    if (near > Math.min(r.h, f.h) * 0.5)
-      return;
-    const dx = Math.abs(r.x + r.w / 2 - fx);
-    if (dx < bestD) {
-      bestD = dx;
-      best = i;
-    }
-  });
-  return best;
+function holdScroll(hold, height, view) {
+  if (hold.from <= 0)
+    return { scroll: 0, space: height };
+  const end = Math.min(hold.from, Math.max(0, hold.h1 - view));
+  const span = hold.h1 - hold.h0;
+  const p = Math.abs(span) < 0.5 ? 1 : Math.min(1, Math.max(0, (height - hold.h0) / span));
+  const scroll = hold.from + (end - hold.from) * p;
+  return { scroll, space: Math.max(height, scroll + view) };
 }
-function fitRect(aspect, w, h, inset = 0) {
-  const bw = Math.max(1, w - inset * 2);
-  const bh = Math.max(1, h - inset * 2);
-  const fw = Math.min(bw, bh * aspect);
-  const fh = fw / aspect;
-  return { x: (w - fw) / 2, y: (h - fh) / 2, w: fw, h: fh };
+function formatDuration(duration) {
+  if (typeof duration === "string")
+    return duration;
+  const s = Math.max(0, Math.round(duration));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = String(s % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
 }
-function motionBlur(speed, max = 3, per = 1600) {
-  const b = Math.min(max, Math.abs(speed) / per);
-  return b < 0.25 ? 0 : Math.round(b * 4) / 4;
+function groupTitle(count) {
+  return `${count} update${count === 1 ? "" : "s"}`;
+}
+
+// src/panel/rolling-css.ts
+var rolling_css_default = `.rn-root {
+  display: inline-block;
+  position: relative;
+  white-space: pre;
+  unicode-bidi: isolate;
+  vertical-align: baseline;
+}
+.rn-root > .rn-measure,
+.rn-root > .rn-visual { display: none; }
+.rn-root[data-rn-measuring] > .rn-measure {
+  display: inline-flex;
+  position: relative;
+  visibility: hidden;
+  white-space: pre;
+  padding: 0;
+  border: 0;
+}
+.rn-token { display: inline-block; padding: 0; border: 0; }
+.rn-root[data-rn-measuring] > .rn-value,
+.rn-react[data-rn-hydrated] > .rn-semantic,
+.rn-solid[data-rn-hydrated] > .rn-semantic {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  margin: 0;
+  color: transparent;
+  z-index: 1;
+}
+/* A single native text layer is selectable; decorative reels never enter a copy. */
+.rn-value::selection, .rn-semantic::selection {
+  color: HighlightText;
+  background: Highlight;
 }
+.rn-root[data-rn-ready] > .rn-visual {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  user-select: none;
+}
+.rn-slot {
+  position: absolute;
+  left: 0;
+  overflow: hidden;
+  /* Space for italic overhang without changing the measured advance width. */
+  box-sizing: content-box;
+  padding-inline: 0.15em;
+  margin-inline-start: -0.15em;
+  -webkit-mask-image: var(--rn-mask, linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--rn-edge-fade, 0.12em),
+    #000 calc(100% - var(--rn-edge-fade, 0.12em)),
+    transparent
+  ));
+  mask-image: var(--rn-mask, linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--rn-edge-fade, 0.12em),
+    #000 calc(100% - var(--rn-edge-fade, 0.12em)),
+    transparent
+  ));
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+@supports (overflow: clip) {
+  .rn-slot { overflow-x: visible; overflow-y: clip; }
+}
+.rn-slot:not([data-rn-wheel]) {
+  overflow: visible;
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+.rn-enter, .rn-reel, .rn-face { display: block; }
+.rn-reel { position: relative; }
+.rn-ink { display: block; position: absolute; inset: 0; will-change: transform; }
+/* Safari's SVG filter must rasterize the smear's descendants into its input. */
+.rn-smear .rn-ink { will-change: auto; }
+/* Each turning half carries its own perspective transform, not a shared 3D scene. */
+/* The slot acts as the bezel: the card stays vertically framed while it hinges. */
+.rn-slot[data-rn-flap] { -webkit-mask-image: none; mask-image: none; }
+/* Hinged faces must occlude the cards behind them, including with default CSS. */
+:where(.rn-slot[data-rn-flap]) .rn-face { background: var(--rn-flap-background, Canvas); }
+.rn-flap { position: absolute; inset: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
+/* --rn-crease is the visible hinge gap between the two halves. */
+.rn-flap-top { clip-path: inset(0 0 calc(50% + var(--rn-crease, 1px) / 2) 0); }
+.rn-flap-bottom { clip-path: inset(calc(50% + var(--rn-crease, 1px) / 2) 0 0 0); }
+.rn-sharp, .rn-smear { display: block; }
+.rn-smear { position: absolute; inset: 0; pointer-events: none; }
+.rn-blur-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
+.rn-face { text-align: center; white-space: pre; }
+.rn-react, .rn-solid { display: inline-block; position: relative; white-space: pre; unicode-bidi: isolate; }
+.rn-mount { display: inline-block; user-select: none; }
+.rn-mount .rn-value { pointer-events: none; }
+.rn-react:not([data-rn-hydrated]) > .rn-mount,
+.rn-solid:not([data-rn-hydrated]) > .rn-mount { display: none; }
+`;
 
 // src/core/theme.ts
 var block = (tokens) => Object.entries(tokens).map(([k, v]) => `${k.startsWith("--") || k === "color-scheme" ? k : `--k-${k}`}:${v}`).join(";");
@@ -502,6 +1121,88 @@ var problemsPreset = {
   }
 };
 
+// src/ui/activity-css.ts
+var open = springEasing(2 * Math.PI / 0.22, 1);
+var activityCss = `
+:where(.knobs-activity,.knobs-activity *){box-sizing:border-box}
+:where(.knobs-activity){color-scheme:dark}
+.knobs-ui.knobs-activity{position:relative;display:block;height:100%;overflow:auto;overflow-anchor:none;outline:none;scrollbar-width:thin;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;
+  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
+  --ka-gutter:var(--k-activity-gutter,28px);--ka-row:var(--k-activity-row,var(--ku-row));--ka-row-child:var(--k-activity-row-child,calc(var(--ka-row) - 6px));
+  --ka-line:var(--k-activity-line,var(--ku-line-hi));--ka-select:var(--k-activity-select,var(--ku-wash-hi));--ka-hover:var(--k-activity-hover,var(--ku-wash));
+  --ka-you:var(--k-activity-you,light-dark(#007aff,#0a84ff));--ka-agent:var(--k-activity-agent,var(--ku-label));--ka-proposal:var(--k-activity-proposal,var(--ku-text));
+  --ka-review:var(--k-activity-review,var(--ku-text));--ka-pr:var(--k-activity-pr,light-dark(#8944ab,#bf5af2));--ka-build:var(--k-activity-build,var(--ku-label));
+  --ka-blocked:var(--k-activity-blocked,var(--ku-warn));--ka-shipped:var(--k-activity-shipped,light-dark(#248a3d,#30d158));--ka-open-ease:${open.easing};--ka-open-ms:${open.ms}ms}
+.knobs-activity [hidden]{display:none!important}
+/* Clipped below: the content grows on a spring, so a new last row shows as the rail makes room. */
+.knobs-activity-space{position:relative;width:100%;overflow-x:visible;overflow-y:clip;pointer-events:none}
+.knobs-activity-line{position:absolute;top:0;left:calc(var(--ku-row-x) + var(--ka-gutter) / 2 - 1px);width:2px;height:100%;overflow:visible;pointer-events:none;z-index:1}
+.knobs-activity-line path{fill:none;stroke:var(--ka-line);stroke-width:1px}
+/* The selection's tint: a wash that glides between rows, shown only once keys move it. It leaves
+   in 100 ms when the pointer is used, and comes back at once. */
+.knobs-activity-hl{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;height:0;border-radius:var(--ku-row-radius);background:var(--ka-select);opacity:0;
+  transition:opacity 100ms ease-out;pointer-events:none;will-change:transform}
+.knobs-activity[data-keys] .knobs-activity-hl{opacity:1;transition:none}
+.knobs-activity-row{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;display:flex;align-items:center;height:var(--ka-row);padding-right:calc(var(--ku-inset) - 4px);
+  color:var(--ku-text);white-space:nowrap;cursor:default;will-change:transform;transform-origin:calc(var(--ka-gutter) / 2) 50%;pointer-events:auto;--ka-tint:var(--ka-agent)}
+.knobs-activity-row[data-leaving]{pointer-events:none}
+.knobs-activity-row[data-depth="1"]{height:var(--ka-row-child)}
+.knobs-activity-row>*{position:relative}
+/* Hover: in at once, out over 100 ms; not while keys drive the selection. */
+.knobs-activity-row::before{content:"";position:absolute;inset:0;border-radius:var(--ku-row-radius);background:var(--ka-hover);opacity:0;transition:opacity calc(var(--k-hover-out,100) * 1ms) ease-out;pointer-events:none}
+.knobs-activity:not([data-keys]) .knobs-activity-row:not([data-leaving]):hover::before{opacity:1;transition-duration:calc(var(--k-hover-in,0) * 1ms)}
+.knobs-activity-row[data-kind="you"]{--ka-tint:var(--ka-you)}
+.knobs-activity-row[data-kind="agent"]{--ka-tint:var(--ka-agent)}
+.knobs-activity-row[data-kind="proposal"]{--ka-tint:var(--ka-proposal)}
+.knobs-activity-row[data-kind="review"]{--ka-tint:var(--ka-review)}
+.knobs-activity-row[data-kind="pr"]{--ka-tint:var(--ka-pr)}
+.knobs-activity-row[data-kind="build"]{--ka-tint:var(--ka-build)}
+.knobs-activity-row[data-kind="blocked"]{--ka-tint:var(--ka-blocked)}
+.knobs-activity-row[data-kind="shipped"]{--ka-tint:var(--ka-shipped)}
+/* The node: the kind's icon on the line (which stops clear of it), or a small dot inside a group. */
+.knobs-activity-node{flex:none;display:flex;align-items:center;justify-content:center;width:var(--ka-gutter);height:100%;color:var(--ka-tint)}
+.knobs-activity-node svg{display:block;width:14px;height:14px}
+.knobs-activity-glyph{display:flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:calc(var(--ku-font-size) - 1px);line-height:1}
+.knobs-activity-node::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:color-mix(in srgb,var(--ka-tint) 15%,transparent);
+  opacity:0;scale:.8;transition:opacity .16s ease-out,scale var(--ka-open-ms) var(--ka-open-ease)}
+.knobs-activity-row[aria-selected="true"] .knobs-activity-node::before{opacity:1;scale:1}
+.knobs-activity-node::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ka-tint) 55%,transparent);opacity:0;pointer-events:none}
+.knobs-activity-row[data-current] .knobs-activity-node::after{opacity:1;animation:knobs-activity-breathe 2.6s ease-in-out infinite}
+@keyframes knobs-activity-breathe{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ka-tint) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--ka-tint) 0%,transparent)}
+  50%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ka-tint) 70%,transparent),0 0 0 3px color-mix(in srgb,var(--ka-tint) 14%,transparent)}}
+.knobs-activity-dot{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
+.knobs-activity-row[data-depth="1"] .knobs-activity-node::before,.knobs-activity-row[data-depth="1"] .knobs-activity-node::after{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
+/* The words: who in the text colour, then the title, one line that fades where it's cut off. */
+.knobs-activity-main{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
+.knobs-activity-actor{margin-right:6px;font-weight:var(--ku-label-weight);color:var(--ku-text)}
+.knobs-activity-actor:empty{display:none}
+.knobs-activity-title{color:var(--ku-label)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-main{font-size:var(--ku-text-meta)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-actor{font-weight:var(--ku-font-weight);color:var(--ku-label)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-title{color:var(--ku-dim)}
+.knobs-activity-row[aria-selected="true"] .knobs-activity-title{color:var(--ku-text)}
+.knobs-activity-row[data-dimmed] :is(.knobs-activity-main,.knobs-activity-meta){opacity:.55}
+.knobs-activity-row[data-dimmed] .knobs-activity-node{opacity:.6}
+/* Trailing: thumbnails, a duration chip, the group's chevron and the time. */
+.knobs-activity-meta{flex:none;display:flex;align-items:center;gap:6px;margin-left:8px;color:var(--ku-dim);font-size:var(--ku-text-meta);font-variant-numeric:tabular-nums}
+.knobs-activity-meta:empty{display:none}
+.knobs-activity-thumbs{display:flex;gap:3px}
+.knobs-activity-thumbs img{display:block;width:18px;height:18px;border-radius:4px;object-fit:cover;background:var(--ku-surface);box-shadow:inset 0 0 0 .5px var(--ku-line)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-thumbs img{width:15px;height:15px}
+:where(.knobs-ui) .knobs-activity-chip{all:revert;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px 0 5px;border:0;margin:0;border-radius:9px;
+  background:var(--ku-surface);color:var(--ku-label);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:inherit;outline:none;transition:background calc(var(--k-hover-out,100) * 1ms) ease-out}
+.knobs-activity-chip svg{width:8px;height:8px}
+button.knobs-activity-chip{cursor:pointer}
+button.knobs-activity-chip:hover{background:var(--ku-surface-hi);color:var(--ku-text);transition-duration:0s}
+.knobs-activity-caret{display:flex;width:12px;height:12px;color:var(--ku-dim);transition:rotate .18s var(--ku-ease)}
+.knobs-activity-caret svg{width:10px;height:10px;margin:1px}
+.knobs-activity-row[aria-expanded="true"] .knobs-activity-caret{rotate:90deg;transition:rotate var(--ka-open-ms) var(--ka-open-ease)}
+.knobs-activity-time{min-width:2ch;text-align:right;white-space:nowrap}
+.knobs-activity-time:empty{display:none}
+.knobs-activity-empty{padding:10px var(--ku-inset);color:var(--ku-dim)}
+@media(prefers-reduced-motion:reduce){.knobs-activity :where(*,::before,::after){transition:none!important;animation:none!important}}
+`;
+
 // src/ui/bento-css.ts
 var bentoCss = `
 .knobs-ui.knobs-bento{--ku-bento-radius:var(--k-ui-bento-radius,max(0px,calc(var(--ku-radius) - 5px)));
@@ -634,6 +1335,59 @@ var overlayCss = `
 .knobs-toast .knobs-toast-action[hidden]{display:none}
 `;
 
+// src/ui/picker-css.ts
+var snappy = springEasing(2 * Math.PI / 0.25, 1);
+var pickerCss = `
+:where(.knobs-picker,.knobs-picker-option,.knobs-picker-head,.knobs-picker-head *,.knobs-picker-card,.knobs-picker-body){box-sizing:border-box}
+.knobs-ui.knobs-picker{position:relative;display:flex;flex-direction:column;gap:2px;padding:0;outline:none;
+  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
+  --kp-card:var(--k-picker-card,var(--ku-surface));--kp-radius:var(--k-picker-radius,var(--ku-panel-radius));--kp-snappy:${snappy.easing};--kp-snappy-ms:${snappy.ms}ms}
+.knobs-picker [hidden]{display:none!important}
+/* The selection: one card behind the selected option and its parameters, gliding between them. */
+.knobs-picker-card{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--kp-radius);background:var(--kp-card);box-shadow:inset 0 0 0 1px var(--ku-line);pointer-events:none}
+.knobs-picker[data-frame="flat"] .knobs-picker-card{box-shadow:none}
+.knobs-picker-option{position:relative;flex:none}
+:where(.knobs-ui) .knobs-picker-head{all:revert;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;width:100%;height:var(--ku-row);padding:0 calc(var(--ku-inset) - 2px) 0 calc(var(--ku-inset) - 4px);
+  border:0;margin:0;background:transparent;color:var(--ku-label);font:inherit;letter-spacing:inherit;text-align:left;cursor:default;outline:none;user-select:none;-webkit-user-select:none}
+/* Hover: in at once, out over 100 ms. Keyboard focus: the same wash, a little firmer. */
+.knobs-picker-head::before{content:"";position:absolute;inset:0;border-radius:var(--kp-radius);background:var(--ku-wash);opacity:0;transition:opacity calc(var(--k-hover-out,100) * 1ms) ease-out;pointer-events:none}
+.knobs-picker-option:not([data-selected]) .knobs-picker-head:hover::before{opacity:1;transition-duration:calc(var(--k-hover-in,0) * 1ms)}
+.knobs-picker-head:focus-visible::before{opacity:1;background:var(--ku-wash-hi);transition-duration:0s}
+.knobs-picker-head>*{position:relative}
+.knobs-picker-option[data-selected] .knobs-picker-head{color:var(--ku-text)}
+/* Every row is numbered (only 1–9 are keys): tabular digits in a column two digits wide, so the
+   names line up past the ninth. */
+.knobs-picker-key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:max(17px,calc(2ch + 6px));height:17px;padding:0;border-radius:5px;background:var(--ku-surface);
+  color:var(--ku-dim);font:var(--ku-label-weight) calc(var(--ku-font-size) - 1.5px)/1 var(--ku-font);font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
+.knobs-picker-key:empty{visibility:hidden}
+/* An option's picture: cover-fit, the rows' corner language and a hairline drawn over it. Its
+   space is kept while it loads (nothing drawn), it fades in once loaded, and one that fails
+   gives its space back on the same ease. */
+.knobs-picker-thumb{flex:none;display:block;width:var(--k-picker-thumb,min(24px,calc(var(--ku-row) - 10px)));aspect-ratio:1;margin:0;border-radius:max(3px,calc(var(--ku-radius) - 2px));
+  object-fit:cover;background:none;outline:1px solid var(--ku-line);outline-offset:-1px;opacity:0;
+  transition:opacity .2s ease-out,width .18s ease-out,margin .18s ease-out}
+.knobs-picker-thumb[data-state="loaded"]{opacity:1}
+.knobs-picker-thumb[data-instant]{transition:none}
+.knobs-picker-thumb[data-state="failed"]{width:0;margin-right:-8px;outline-color:transparent}
+.knobs-picker-option[data-selected] .knobs-picker-key{background:var(--ku-surface-hi);color:var(--ku-text)}
+.knobs-picker-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-weight:var(--ku-label-weight)}
+.knobs-picker-suggested{flex:none;color:var(--ku-dim);font-size:var(--ku-text-meta)}
+.knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--ku-accent);opacity:0;scale:.6;filter:blur(2px);
+  transition:opacity .11s ease-in,scale .11s ease-in,filter .11s ease-in}
+.knobs-picker-check svg{display:block;width:14px;height:14px}
+.knobs-picker-option[data-chosen] .knobs-picker-check{opacity:1;scale:1;filter:none;transition:opacity .15s ease-out,scale var(--kp-snappy-ms) var(--kp-snappy),filter .15s ease-out}
+.knobs-picker-body{position:relative;overflow:visible}
+.knobs-picker-body[data-moving]{overflow:hidden}
+/* The picker insets its parameters itself (--k-picker-pad), whatever a panel's own pad: a panel
+   inside sheds its card and pad for the picker's, so nothing draws a card inside a card and no
+   heading sits at the card's edge. */
+.knobs-picker-inner{padding:var(--k-picker-pad,0 8px 8px)}
+.knobs-picker-inner:empty{padding:0}
+.knobs-picker-inner .knobs-panel.knobs-inline{--k-chrome:0;padding:0}
+.knobs-picker-empty{padding:8px var(--ku-inset);color:var(--ku-dim)}
+@media(prefers-reduced-motion:reduce){.knobs-picker :where(*,::before,::after){transition-duration:.15s!important;scale:none!important;filter:none!important}}
+`;
+
 // src/ui/readout-css.ts
 var readoutCss = `
 /* Readouts: live values, sparklines, graphs, meters, tables and logs. */
@@ -818,6 +1572,28 @@ var css = `
 :is(.knobs-tree,.knobs-split>.knobs-pane>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head) [hidden]{display:none!important}
 :is(.knobs-pane-head,.knobs-pane-rail,.knobs-tree) svg{display:block;flex:none}
 
+/* Scroll fades: a scroller's content fades out over --knobs-fade at an edge with more beyond it,
+   coming in over the first --knobs-fade-travel of scroll, so reaching an end never pops. They're
+   scroll-driven (no script), so where those aren't supported there's no fade. --knobs-fade-inset
+   starts the top one below a sticky header; .knobs-scroll-fade-x fades across instead (a single
+   line that's cut off, like a tree's labels: no ellipsis). Pane bodies, trees and the palette's
+   list carry the class; around a panel the GPU draws, the mask goes (it would trap the panel's
+   overlays under it). */
+@property --knobs-fade-a{syntax:"<number>";inherits:false;initial-value:1}
+@property --knobs-fade-b{syntax:"<number>";inherits:false;initial-value:1}
+@keyframes knobs-fade-a{from{--knobs-fade-a:1}to{--knobs-fade-a:0}}
+@keyframes knobs-fade-b{from{--knobs-fade-b:0}to{--knobs-fade-b:1}}
+@supports (animation-timeline:scroll()){
+  :is(.knobs-scroll-fade,.knobs-scroll-fade-x){--knobs-fade:20px;--knobs-fade-travel:24px;animation:knobs-fade-a linear both,knobs-fade-b linear both;animation-duration:auto;
+    animation-timeline:scroll(self block),scroll(self block);animation-range:0 var(--knobs-fade-travel),calc(100% - var(--knobs-fade-travel)) 100%}
+  .knobs-scroll-fade{--knobs-fade-mask:linear-gradient(to bottom,#000 var(--knobs-fade-inset,0px),rgb(0 0 0/var(--knobs-fade-a)) var(--knobs-fade-inset,0px),#000 calc(var(--knobs-fade-inset,0px) + var(--knobs-fade)),#000 calc(100% - var(--knobs-fade)),rgb(0 0 0/var(--knobs-fade-b)));-webkit-mask-image:var(--knobs-fade-mask);mask-image:var(--knobs-fade-mask)}
+  .knobs-scroll-fade-x{--knobs-fade:16px;--knobs-fade-travel:4px;animation-timeline:scroll(self inline),scroll(self inline);
+    --knobs-fade-mask:linear-gradient(to right,rgb(0 0 0/var(--knobs-fade-a)),#000 var(--knobs-fade),#000 calc(100% - var(--knobs-fade)),rgb(0 0 0/var(--knobs-fade-b)));-webkit-mask-image:var(--knobs-fade-mask);mask-image:var(--knobs-fade-mask)}
+  .knobs-scroll-fade:has(.knobs-panel[data-gpu-active="true"]){-webkit-mask-image:none;mask-image:none}
+  .knobs-tree-row[data-editing] .knobs-tree-label{-webkit-mask-image:none;mask-image:none}
+}
+@supports not (animation-timeline:scroll()){.knobs-scroll-fade-x{text-overflow:ellipsis}}
+
 /* Split: panes along a row or column, hairline dividers with a wider grip. */
 .knobs-split{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
 .knobs-split[data-direction="column"]{flex-direction:column}
@@ -830,7 +1606,7 @@ var css = `
 .knobs-pane-inner{position:absolute;inset:0;display:flex;flex-direction:column;min-width:0;min-height:0}
 .knobs-pane-body{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
 .knobs-pane[data-scroll] .knobs-pane-body{overflow:auto;scrollbar-width:thin}
-.knobs-pane[data-rail][data-collapsed][data-settled]>.knobs-pane-clip,.knobs-pane:not([data-rail])[data-collapsed][data-settled]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-body{visibility:hidden}
+.knobs-pane[data-rail][data-collapsed][data-settled]>.knobs-pane-clip>.knobs-pane-inner,.knobs-pane:not([data-rail])[data-collapsed][data-settled]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-body{visibility:hidden}
 .knobs-ui .knobs-pane-head{display:flex;align-items:center;gap:6px;flex:none;height:var(--ku-row);padding:0 calc(var(--ku-inset) - 4px) 0 var(--ku-inset);user-select:none;-webkit-user-select:none}
 .knobs-pane-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--ku-title-weight);color:var(--ku-text)}
 .knobs-pane-count{flex:none;color:var(--ku-dim);font-variant-numeric:tabular-nums}
@@ -841,17 +1617,31 @@ var css = `
 .knobs-ui .knobs-pane-btn[aria-pressed="true"]{color:var(--ku-accent)}
 .knobs-pane-btn svg{width:13px;height:13px}
 .knobs-pane-head[data-toggles]{cursor:pointer}
-.knobs-pane-caret{transition:transform var(--ku-ease-ms) var(--ku-ease)}
-.knobs-pane[data-collapsed] .knobs-pane-caret{transform:rotate(-90deg)}
-/* A collapsed pane's rail: its title along the edge; a click opens it. */
-.knobs-ui .knobs-pane-rail{position:absolute;inset:0;margin:var(--ku-pane-m);border-radius:var(--ku-pane-radius);background-color:var(--ku-pane-bg);box-shadow:var(--ku-pane-ring);display:flex;align-items:center;gap:8px;color:var(--ku-label);cursor:pointer;opacity:0;pointer-events:none;
+/* A collapsed pane's rail: its title along the edge; a click opens it. It holds on to the edge the
+   pane folds toward, as wide as the rail, over the card (which folds to its size): only its label
+   and chevron draw, and a nested split's slot, which has no card, gives it one of its own. */
+.knobs-ui .knobs-pane-rail{position:absolute;margin:var(--ku-pane-m);border-radius:var(--ku-pane-radius);background-color:transparent;display:flex;align-items:center;gap:8px;color:var(--ku-label);cursor:pointer;opacity:0;pointer-events:none;
   font-weight:var(--ku-title-weight);transition:background .15s,color .15s}
-.knobs-split[data-direction="row"]>.knobs-pane>.knobs-pane-rail{writing-mode:vertical-rl;padding:10px 0}
-.knobs-split[data-direction="column"]>.knobs-pane>.knobs-pane-rail{padding:0 var(--ku-inset)}
+.knobs-ui .knobs-pane[data-nested]>.knobs-pane-rail{background-color:var(--ku-pane-bg);box-shadow:var(--ku-pane-ring)}
+.knobs-split[data-direction="row"]>.knobs-pane>.knobs-pane-rail{top:0;bottom:0;width:var(--ku-rail);writing-mode:vertical-rl;padding:10px 0}
+.knobs-split[data-direction="row"]>.knobs-pane[data-edge="start"]>.knobs-pane-rail{right:0}
+.knobs-split[data-direction="row"]>.knobs-pane[data-edge="end"]>.knobs-pane-rail{left:0}
+.knobs-split[data-direction="column"]>.knobs-pane>.knobs-pane-rail{left:0;right:0;height:var(--ku-rail);padding:0 var(--ku-inset)}
+.knobs-split[data-direction="column"]>.knobs-pane[data-edge="start"]>.knobs-pane-rail{bottom:0}
+.knobs-split[data-direction="column"]>.knobs-pane[data-edge="end"]>.knobs-pane-rail{top:0}
 .knobs-pane[data-collapsed]>.knobs-pane-rail{pointer-events:auto}
-.knobs-ui .knobs-pane-rail:is(:hover,:focus-visible){background-image:linear-gradient(var(--ku-wash),var(--ku-wash));color:var(--ku-text)}
-.knobs-pane-rail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.knobs-pane-rail svg{width:11px;height:11px;color:var(--ku-dim);writing-mode:horizontal-tb}
+.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible){background-image:linear-gradient(var(--ku-wash),var(--ku-wash));color:var(--ku-text)}
+.knobs-pane-rail-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.knobs-pane-chevron{display:flex;flex:none;width:11px;height:11px;writing-mode:horizontal-tb;color:var(--ku-dim)}
+.knobs-pane-turn{display:flex;width:100%;height:100%;transform-origin:50% 50%}
+.knobs-pane-rail svg{width:11px;height:11px}
+/* The rail's chevron stands in for the header's collapse icon (it turns into the rail's), so the
+   icon itself isn't drawn; hovering its button lights the chevron instead. */
+.knobs-pane[data-morph]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-collapse>svg{visibility:hidden}
+/* So does the rail's label for the title, when it travels (split's fold: { title: "travel" }). */
+.knobs-pane[data-travel]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-title{visibility:hidden}
+.knobs-pane[data-morph]:not([data-collapsed]):has(>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-collapse:is(:hover,:focus-visible))>.knobs-pane-rail .knobs-pane-chevron{color:var(--ku-text)}
+.knobs-pane[data-morph]:not([data-collapsed])>.knobs-pane-rail .knobs-pane-chevron{transition:color .15s}
 
 .knobs-divider{position:relative;z-index:2;flex:none;width:1px;background:var(--ku-divider);touch-action:none;outline:none}
 .knobs-split[data-direction="column"]>.knobs-divider{width:auto;height:1px}
@@ -894,7 +1684,7 @@ var css = `
 .knobs-tree-row[aria-expanded="true"]>.knobs-tree-caret{transform:rotate(90deg)}
 .knobs-tree-row:not([aria-expanded])>.knobs-tree-caret{visibility:hidden}
 .knobs-tree-icon{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-right:6px;color:var(--ku-dim);font-size:calc(var(--ku-font-size) - 1px)}
-.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:var(--ku-font-weight)}
+.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;font-weight:var(--ku-font-weight)}
 .knobs-tree-row[data-ancestor] .knobs-tree-label{color:var(--ku-label)}
 .knobs-tree-label .knobs-tree-mark{color:var(--ku-accent)}
 .knobs-tree-row[data-off~="visible"] :is(.knobs-tree-label,.knobs-tree-icon){opacity:.45}
@@ -932,7 +1722,7 @@ var css = `
 .knobs-tl-play svg{width:12px;height:12px}
 .knobs-timeline[data-playing] .knobs-tl-play{background:var(--ku-accent);color:var(--ku-bg)}
 .knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--ku-font-weight) var(--ku-value-size)/1.2 var(--ku-value-font);color:var(--ku-text);white-space:nowrap}
+.knobs-tl-now{font:var(--ku-font-weight) var(--ku-value-size)/1.2 var(--ku-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--ku-text);white-space:nowrap}
 .knobs-tl-sub{font-size:var(--ku-text-meta);color:var(--ku-dim);white-space:nowrap}
 .knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--ku-radius);background:var(--ku-surface);cursor:col-resize;touch-action:none;
   transition:background calc(var(--ku-hover-out) * 1ms)}
@@ -984,7 +1774,7 @@ function injectUiStyles(doc) {
     return;
   const style = doc.createElement("style");
   style.dataset.knobsUi = "";
-  style.textContent = css + readoutCss + overlayCss + bentoCss;
+  style.textContent = css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + rolling_css_default;
   doc.head.append(style);
 }
 function injectUiPreset(doc, preset) {
@@ -1024,6 +1814,12 @@ function syncFrame(root) {
 }
 var lookDefaults = { current: {} };
 var reducedMotion = (win) => win?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+var tune = (s, m) => {
+  s.omega = m.omega;
+  s.zeta = m.zeta;
+  return s;
+};
+var isTypingTarget = (t) => t instanceof HTMLElement && (t.isContentEditable || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement || t instanceof HTMLInputElement && !t.readOnly && !["range", "checkbox", "radio", "button"].includes(t.type));
 function notifyLayout(doc) {
   doc.dispatchEvent(new Event("knobs-layout"));
 }
@@ -1051,28 +1847,1037 @@ function frameLoop(win, step) {
       raf = 0;
       last = 0;
     }
-  };
+  };
+}
+var svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+var ICONS = {
+  caret: svg('<path d="M6 3.5 10.5 8 6 12.5"/>'),
+  chevronDown: svg('<path d="M3.5 6 8 10.5 12.5 6"/>'),
+  eye: svg('<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/>'),
+  eyeOff: svg('<path d="M2.5 2.5l11 11M6.6 4.2A6.6 6.6 0 0 1 8 3.5c4.1 0 6.5 4.5 6.5 4.5a11 11 0 0 1-1.7 2.2M10.2 11.9A6 6 0 0 1 8 12.5C3.9 12.5 1.5 8 1.5 8a11 11 0 0 1 2.4-2.9"/>'),
+  lock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>'),
+  unlock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 4.8-1"/>')
+};
+
+// src/ui/activity.ts
+var ACTIVITY_ICONS = {
+  you: svg('<circle cx="8" cy="5.5" r="2.5"/><path d="M3.2 13.5c.8-2.4 2.6-3.8 4.8-3.8s4 1.4 4.8 3.8"/>'),
+  agent: svg('<path d="M8 2.2 9.4 6.6 13.8 8 9.4 9.4 8 13.8 6.6 9.4 2.2 8 6.6 6.6Z"/>'),
+  proposal: svg('<rect x="2.5" y="2.5" width="4.5" height="4.5" rx="1.2"/><rect x="9" y="2.5" width="4.5" height="4.5" rx="1.2"/><rect x="2.5" y="9" width="4.5" height="4.5" rx="1.2"/><rect x="9" y="9" width="4.5" height="4.5" rx="1.2"/>'),
+  review: svg('<rect x="2" y="3.5" width="12" height="9" rx="2.2"/><path d="M7 6.3v3.4L9.8 8Z"/>'),
+  pr: svg('<circle cx="4.5" cy="3.8" r="1.6"/><circle cx="4.5" cy="12.2" r="1.6"/><circle cx="11.5" cy="12.2" r="1.6"/><path d="M4.5 5.4v5.2M11.5 10.6V6.8a2 2 0 0 0-2-2H7.2M8.8 3.2 7.2 4.8l1.6 1.6"/>'),
+  build: svg('<path d="M8 2.2 13.5 5v6L8 13.8 2.5 11V5Z"/><path d="M2.5 5 8 7.9 13.5 5M8 7.9v5.9"/>'),
+  blocked: svg('<path d="M3.8 14V2.6M3.8 3h8l-1.9 3 1.9 3h-8"/>'),
+  shipped: svg('<circle cx="8" cy="8" r="5.8"/><path d="m5.6 8.2 1.7 1.7 3.2-3.6"/>')
+};
+var PLAY = '<svg viewBox="0 0 8 8" aria-hidden="true"><path d="M1.5 1v6l5.2-3Z" fill="currentColor"/></svg>';
+var REFLOW = springMotion({ duration: 0.4, bounce: 0 });
+var OPEN = springMotion({ duration: 0.22, bounce: 0 });
+var CLOSE = springMotion({ duration: 0.18, bounce: 0 });
+var BLOOM = springMotion({ duration: 0.3, bounce: 0 });
+var EXIT = springMotion({ duration: 0.24, bounce: 0 });
+var FADE = springMotion({ duration: 0.16, bounce: 0 });
+var CLEAR = [11, 5];
+var PAD = 6;
+var SLIDE = 8;
+function activity(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  let newest = options.newest ?? "bottom";
+  const keysFrom = options.keys ?? "focus";
+  let events = options.events;
+  let index = indexActivity(events);
+  const expanded = new Set(options.expanded ?? []);
+  let rows = [];
+  let selected = options.selected ?? null;
+  let showing = false;
+  const root = doc.createElement("div");
+  root.className = "knobs-activity knobs-scroll-fade";
+  root.tabIndex = 0;
+  root.setAttribute("role", "tree");
+  if (options.label)
+    root.setAttribute("aria-label", options.label);
+  applyLook(root, options);
+  const space = doc.createElement("div");
+  space.className = "knobs-activity-space";
+  const hl = doc.createElement("div");
+  hl.className = "knobs-activity-hl";
+  hl.setAttribute("aria-hidden", "true");
+  const line = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  line.setAttribute("class", "knobs-activity-line");
+  line.setAttribute("aria-hidden", "true");
+  const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+  line.append(path);
+  const empty = doc.createElement("div");
+  empty.className = "knobs-activity-empty";
+  empty.hidden = true;
+  space.append(hl, line);
+  root.append(empty, space);
+  container.append(root);
+  let heights = [32, 26];
+  const measure = () => {
+    syncFrame(root);
+    const probe = (depth) => {
+      const p = doc.createElement("div");
+      p.className = "knobs-activity-row";
+      p.dataset.depth = String(depth);
+      p.style.visibility = "hidden";
+      space.append(p);
+      const h = p.getBoundingClientRect().height;
+      p.remove();
+      return h;
+    };
+    heights = [probe(0) || 32, probe(1) || 26];
+  };
+  measure();
+  const uid = `ka${Math.random().toString(36).slice(2, 7)}`;
+  const domIds = new Map;
+  const domId = (id) => {
+    let d = domIds.get(id);
+    if (!d)
+      domIds.set(id, d = `${uid}-${domIds.size}`);
+    return d;
+  };
+  const views = new Map;
+  const makeView = (row) => {
+    const el = doc.createElement("div");
+    el.className = "knobs-activity-row";
+    el.setAttribute("role", "treeitem");
+    el.id = domId(row.id);
+    el.dataset.id = row.id;
+    const node = doc.createElement("span");
+    node.className = "knobs-activity-node";
+    const main = doc.createElement("span");
+    main.className = "knobs-activity-main knobs-scroll-fade-x";
+    const actor = doc.createElement("span");
+    actor.className = "knobs-activity-actor";
+    const title = doc.createElement("span");
+    title.className = "knobs-activity-title";
+    main.append(actor, title);
+    const meta = doc.createElement("span");
+    meta.className = "knobs-activity-meta";
+    const thumbs = doc.createElement("span");
+    thumbs.className = "knobs-activity-thumbs";
+    const caret = doc.createElement("span");
+    caret.className = "knobs-activity-caret";
+    caret.innerHTML = ICONS.caret;
+    const time = doc.createElement("span");
+    time.className = "knobs-activity-time";
+    el.append(node, main, meta);
+    space.append(el);
+    const v = {
+      id: row.id,
+      el,
+      node,
+      actor,
+      title,
+      meta,
+      thumbs,
+      chip: null,
+      caret,
+      time,
+      roll: null,
+      chipRoll: null,
+      y: new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05),
+      p: new Spring(1, BLOOM.omega, BLOOM.zeta, 0.002),
+      depth: row.depth,
+      under: null,
+      from: 0,
+      leaving: false,
+      event: undefined,
+      state: ""
+    };
+    views.set(row.id, v);
+    return v;
+  };
+  const dropView = (v) => {
+    v.roll?.destroy();
+    v.chipRoll?.destroy();
+    v.el.remove();
+    views.delete(v.id);
+  };
+  const rollInto = (host, roll, text) => {
+    if (!text) {
+      roll?.destroy();
+      host.textContent = "";
+      return null;
+    }
+    if (roll) {
+      roll.update({ text });
+      return roll;
+    }
+    return rt(host, {
+      text,
+      charset: "0123456789",
+      transition: "direct",
+      animated: !reducedMotion(win)
+    });
+  };
+  const bind = (v, row) => {
+    const e = row.event;
+    const state = `${row.depth}|${row.group}|${row.expanded}|${selected === row.id}`;
+    if (v.event === e && v.state === state)
+      return;
+    const changed = v.event !== e;
+    v.event = e;
+    v.state = state;
+    v.depth = row.depth;
+    const el = v.el;
+    el.dataset.depth = String(row.depth);
+    el.setAttribute("aria-level", String(row.depth + 1));
+    el.setAttribute("aria-selected", String(selected === row.id));
+    if (row.group)
+      el.setAttribute("aria-expanded", String(row.expanded));
+    else
+      el.removeAttribute("aria-expanded");
+    if (!changed)
+      return;
+    if (e.kind)
+      el.dataset.kind = e.kind;
+    else
+      delete el.dataset.kind;
+    el.toggleAttribute("data-current", Boolean(e.current));
+    el.toggleAttribute("data-dimmed", Boolean(e.dimmed));
+    const tint = e.tint ?? (e.kind ? options.tints?.[e.kind] : undefined);
+    if (tint)
+      el.style.setProperty("--ka-tint", tint);
+    else
+      el.style.removeProperty("--ka-tint");
+    const icon = e.icon ?? (row.depth === 1 ? undefined : (e.kind && (options.icons?.[e.kind] ?? ACTIVITY_ICONS[e.kind])) ?? undefined);
+    if (icon instanceof Node)
+      v.node.replaceChildren(icon);
+    else if (icon === undefined) {
+      if (!v.node.firstElementChild?.classList.contains("knobs-activity-dot"))
+        v.node.innerHTML = '<i class="knobs-activity-dot"></i>';
+    } else if (icon.trimStart().startsWith("<")) {
+      if (v.node.innerHTML !== icon)
+        v.node.innerHTML = icon;
+    } else {
+      const glyph = doc.createElement("span");
+      glyph.className = "knobs-activity-glyph";
+      glyph.textContent = icon;
+      v.node.replaceChildren(glyph);
+    }
+    const kids = e.children?.length ?? 0;
+    v.actor.textContent = e.actor ?? "";
+    const title = e.title ?? (kids ? groupTitle(kids) : "");
+    if (v.title.textContent !== title)
+      v.title.textContent = title;
+    el.setAttribute("aria-label", [e.actor, title, e.time].filter(Boolean).join(", "));
+    const parts = [];
+    const thumbs = e.thumbs?.slice(0, 4) ?? [];
+    const shown = [...v.thumbs.querySelectorAll("img")].map((i) => i.getAttribute("src"));
+    if (thumbs.join(`
+`) !== shown.join(`
+`))
+      v.thumbs.replaceChildren(...thumbs.map((src) => {
+        const img = doc.createElement("img");
+        img.src = src;
+        img.alt = "";
+        img.loading = "lazy";
+        img.draggable = false;
+        return img;
+      }));
+    if (thumbs.length)
+      parts.push(v.thumbs);
+    if (e.duration !== undefined) {
+      const button = Boolean(options.onPlay);
+      if (!v.chip || v.chip.tagName === "BUTTON" !== button) {
+        v.chipRoll?.destroy();
+        v.chipRoll = null;
+        v.chip = doc.createElement(button ? "button" : "span");
+        v.chip.className = "knobs-activity-chip";
+        if (button) {
+          v.chip.type = "button";
+          v.chip.tabIndex = -1;
+          v.chip.setAttribute("aria-label", "Play");
+        }
+        v.chip.innerHTML = `${PLAY}<span></span>`;
+      }
+      v.chipRoll = rollInto(v.chip.lastElementChild, v.chipRoll, formatDuration(e.duration));
+      parts.push(v.chip);
+    }
+    if (kids)
+      parts.push(v.caret);
+    v.roll = rollInto(v.time, v.roll, e.time ?? "");
+    if (e.time)
+      parts.push(v.time);
+    const now = [...v.meta.children];
+    if (now.length !== parts.length || now.some((n, i) => n !== parts[i]))
+      v.meta.replaceChildren(...parts);
+  };
+  const nodeY = (v) => v.y.x + heights[v.depth] / 2;
+  let targets = new Map;
+  const lineTop = new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05);
+  const lineBottom = new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05);
+  const hlY = new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05);
+  const hlH = new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05);
+  const height = new Spring(0, REFLOW.omega, REFLOW.zeta, 0.05);
+  let following = false;
+  let scrollHold = null;
+  const place = (v, reduced) => {
+    const p = Math.max(0, Math.min(1, v.p.x));
+    let y = v.y.x;
+    let clip = 0;
+    let transform = "";
+    let filter = "";
+    if (v.under !== null) {
+      const parent = views.get(v.under);
+      const bottom = (parent ? parent.y.x : targets.get(v.under) ?? 0) + heights[0];
+      clip = Math.min(heights[v.depth], Math.max(0, bottom - y));
+    } else if (p < 1 && !reduced) {
+      y += (1 - p) * SLIDE * v.from;
+      transform = ` scale(${(0.97 + 0.03 * p).toFixed(4)})`;
+      const blur = (1 - p) * 3;
+      if (blur > 0.05)
+        filter = `blur(${blur.toFixed(2)}px)`;
+    }
+    v.el.style.transform = `translate3d(0,${Math.round(y * 2) / 2}px,0)${transform}`;
+    v.el.style.clipPath = clip > 0 ? `inset(${clip}px 0 0 0)` : "";
+    v.el.style.opacity = p < 0.999 ? p.toFixed(3) : "";
+    v.el.style.filter = filter;
+  };
+  const drawLine = () => {
+    const nodes = [];
+    for (const v of views.values()) {
+      const p = Math.max(0, Math.min(1, v.p.x));
+      if (p <= 0.001)
+        continue;
+      const y = nodeY(v);
+      if (v.under !== null) {
+        const parent = views.get(v.under);
+        if (parent && y < parent.y.x + heights[0])
+          continue;
+      }
+      nodes.push({ y, r: CLEAR[v.depth] * Math.min(1, p * 1.5) });
+    }
+    const segs = railSegments(nodes, lineTop.x, lineBottom.x);
+    path.setAttribute("d", segs.map(([a, b]) => `M1 ${a.toFixed(2)}V${b.toFixed(2)}`).join(""));
+  };
+  const placeHighlight = () => {
+    hl.style.transform = `translate3d(0,${Math.round(hlY.x * 2) / 2}px,0)`;
+    hl.style.height = `${Math.max(0, hlH.x).toFixed(2)}px`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    const reduced = reducedMotion(win);
+    let moving = false;
+    for (const s of [lineTop, lineBottom, hlY, hlH, height]) {
+      s.step(dt);
+      if (!s.resting)
+        moving = true;
+    }
+    for (const v of [...views.values()]) {
+      v.y.step(dt);
+      v.p.step(dt);
+      if (v.y.resting && v.p.resting) {
+        if (v.leaving) {
+          dropView(v);
+          continue;
+        }
+        v.under = null;
+        v.from = 0;
+      } else
+        moving = true;
+      place(v, reduced);
+    }
+    drawLine();
+    placeHighlight();
+    if (scrollHold && !following) {
+      const { scroll, space: reserved } = holdScroll(scrollHold, height.x, root.clientHeight);
+      space.style.height = `${Math.max(0, reserved).toFixed(1)}px`;
+      root.scrollTop = scroll;
+    } else
+      space.style.height = `${Math.max(0, height.x).toFixed(1)}px`;
+    if (following)
+      root.scrollTop = newest === "bottom" ? root.scrollHeight : 0;
+    if (!moving) {
+      following = false;
+      scrollHold = null;
+    }
+    return moving;
+  });
+  const atNewestEnd = () => newest === "bottom" ? root.scrollTop + root.clientHeight >= root.scrollHeight - 4 : root.scrollTop <= 4;
+  function sync(cause, toggled) {
+    const reduced = reducedMotion(win);
+    const animate = cause !== "snap";
+    const glide = cause === "open" ? OPEN : cause === "close" ? CLOSE : REFLOW;
+    const before = [...views.values()].filter((v) => !v.leaving).map((v) => v.id);
+    rows = flattenActivity(events, expanded);
+    selected = keepSelection(rows, selected, (id) => index.get(id)?.parent);
+    const stack = stackRows(rows.map((r) => heights[r.depth]), PAD);
+    targets = new Map(rows.map((r, i) => [r.id, stack.y[i]]));
+    const { entered } = diffActivity(before, rows.map((r) => r.id));
+    const fresh = new Set(entered);
+    let opened = 0;
+    if (cause === "open") {
+      for (const r of rows)
+        if (r.parent === toggled && fresh.has(r.id))
+          opened += heights[r.depth];
+    }
+    let shut = 0;
+    const live = new Set(rows.map((r) => r.id));
+    if (cause === "close") {
+      for (const v of views.values())
+        if (!live.has(v.id) && !v.leaving && index.get(v.id)?.parent === toggled)
+          shut += heights[v.depth];
+    }
+    const following0 = animate && options.follow !== false && atNewestEnd();
+    const lastIndex = rows.length - 1;
+    rows.forEach((row, i) => {
+      const goal = stack.y[i];
+      let v = views.get(row.id);
+      if (v && v.leaving) {
+        v.leaving = false;
+        delete v.el.dataset.leaving;
+        tune(v.p, cause === "open" ? OPEN : BLOOM).set(1);
+      }
+      if (!v) {
+        v = makeView(row);
+        if (!animate) {
+          v.y.snap(goal);
+          v.p.snap(1);
+        } else if (reduced) {
+          v.y.snap(goal);
+          tune(v.p, FADE).snap(0).set(1);
+        } else {
+          const parent = row.parent !== null ? views.get(row.parent) : undefined;
+          if (parent && !parent.leaving) {
+            v.under = row.parent;
+            const drawer = cause === "open" && row.parent === toggled;
+            v.y.snap(drawer ? goal - opened + parent.y.x - parent.y.target : parent.y.x);
+            tune(v.y, drawer ? OPEN : glide).set(goal);
+            tune(v.p, drawer ? OPEN : BLOOM).snap(0).set(1);
+          } else {
+            v.y.snap(goal);
+            v.from = newest === "bottom" ? 1 : -1;
+            tune(v.p, BLOOM).snap(0).set(1);
+          }
+        }
+      } else if (!animate || reduced)
+        v.y.snap(goal);
+      else
+        tune(v.y, glide).set(goal);
+      bind(v, row);
+    });
+    for (const v of [...views.values()]) {
+      if (live.has(v.id) || v.leaving)
+        continue;
+      if (!animate) {
+        dropView(v);
+        continue;
+      }
+      v.leaving = true;
+      v.el.dataset.leaving = "";
+      v.el.setAttribute("aria-selected", "false");
+      if (reduced) {
+        tune(v.p, FADE).set(0);
+        continue;
+      }
+      const group = index.get(v.id)?.parent ?? null;
+      const parent = group !== null ? views.get(group) : undefined;
+      if (parent && !parent.leaving && v.depth === 1) {
+        v.under = group;
+        const drawer = cause === "close" && group === toggled;
+        tune(v.y, drawer ? CLOSE : glide).set(drawer ? v.y.target - shut : targets.get(group) ?? parent.y.target);
+        tune(v.p, drawer ? CLOSE : EXIT).set(0);
+      } else {
+        v.from = 0;
+        tune(v.p, EXIT).set(0);
+      }
+    }
+    const first = rows[0];
+    const last = rows[lastIndex];
+    const firstY = first ? targets.get(first.id) + heights[first.depth] / 2 : PAD;
+    const lastY = last ? targets.get(last.id) + heights[last.depth] / 2 : PAD;
+    const bottom = stack.bottom + PAD;
+    if (!animate || reduced) {
+      lineTop.snap(firstY);
+      lineBottom.snap(lastY);
+      height.snap(bottom);
+    } else {
+      if (!before.length) {
+        lineTop.snap(firstY);
+        lineBottom.snap(firstY);
+      }
+      tune(lineTop, glide).set(firstY);
+      tune(lineBottom, cause === "set" ? BLOOM : glide).set(lastY);
+      tune(height, glide).set(bottom);
+    }
+    moveHighlight(animate && !reduced ? glide : null);
+    hl.hidden = !selected;
+    empty.hidden = rows.length > 0;
+    empty.textContent = options.empty ?? "Nothing yet";
+    if (selected)
+      root.setAttribute("aria-activedescendant", domId(selected));
+    else
+      root.removeAttribute("aria-activedescendant");
+    following = following || following0 && cause === "set" && fresh.size > 0;
+    scrollHold = animate && !following && !reduced ? { from: root.scrollTop, h0: height.x, h1: height.target } : null;
+    for (const v of views.values())
+      place(v, reduced);
+    drawLine();
+    placeHighlight();
+    space.style.height = `${height.x.toFixed(1)}px`;
+    loop.wake();
+  }
+  const moveHighlight = (motion) => {
+    if (!showing)
+      return;
+    const y = selected ? targets.get(selected) : undefined;
+    if (y === undefined)
+      return;
+    const h = heights[rows.find((r) => r.id === selected)?.depth ?? 0];
+    if (!motion) {
+      hlY.snap(y);
+      hlH.snap(h);
+      return;
+    }
+    tune(hlY, motion).set(y);
+    tune(hlH, motion).set(h);
+  };
+  const setShowing = (input) => {
+    const next = showsSelection(showing, input, keysFrom);
+    if (next === showing)
+      return;
+    showing = next;
+    root.toggleAttribute("data-keys", next);
+  };
+  const rebind = () => {
+    for (const row of rows) {
+      const v = views.get(row.id);
+      if (v && !v.leaving)
+        bind(v, row);
+    }
+  };
+  const reveal = (id) => {
+    const y = targets.get(id);
+    if (y === undefined)
+      return;
+    const h = heights[rows.find((r) => r.id === id)?.depth ?? 0];
+    const top = root.scrollTop;
+    const view = root.clientHeight;
+    if (view <= 0 || root.scrollHeight <= view)
+      return;
+    const behavior = reducedMotion(win) ? "auto" : "smooth";
+    if (y - PAD < top)
+      root.scrollTo({ top: y - PAD, behavior });
+    else if (y + h + PAD > top + view)
+      root.scrollTo({ top: y + h + PAD - view, behavior });
+  };
+  const choose = (id, source) => {
+    if (source === "key") {
+      const wasShowing = showing;
+      setShowing("key");
+      if (!wasShowing)
+        moveHighlight(null);
+    } else if (source === "pointer")
+      setShowing("pointer");
+    if (id === selected)
+      return;
+    const from = selected ? targets.get(selected) : undefined;
+    selected = id;
+    rebind();
+    hl.hidden = !id;
+    if (id) {
+      const to = targets.get(id);
+      const far = from !== undefined && to !== undefined && Math.abs(to - from) > 400;
+      const reduced = reducedMotion(win);
+      moveHighlight(reduced || from === undefined ? null : springMotion({ duration: far ? 0.42 : 0.3, bounce: 0 }));
+      root.setAttribute("aria-activedescendant", domId(id));
+      if (source === "key") {
+        scrollHold = null;
+        reveal(id);
+      }
+      const event = index.get(id)?.event;
+      if (event && source !== "code")
+        options.onSelect?.(id, event, source);
+    } else
+      root.removeAttribute("aria-activedescendant");
+    loop.wake();
+  };
+  const toggle = (id, open) => {
+    const row = rows.find((r) => r.id === id);
+    if (!row?.group || row.expanded === open)
+      return;
+    if (open)
+      expanded.add(id);
+    else
+      expanded.delete(id);
+    sync(open ? "open" : "close", id);
+    options.onToggle?.(id, open);
+  };
+  root.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0)
+      return;
+    setShowing("pointer");
+    const el = e.target.closest(".knobs-activity-row");
+    const id = el?.dataset.id;
+    if (!el || !id || el.dataset.leaving !== undefined)
+      return;
+    e.preventDefault();
+    root.focus({ preventScroll: true });
+    if (e.target.closest(".knobs-activity-chip"))
+      return;
+    const row = rows.find((r) => r.id === id);
+    choose(id, "pointer");
+    if (row?.group)
+      toggle(id, !row.expanded);
+  });
+  root.addEventListener("click", (e) => {
+    const chip = e.target.closest(".knobs-activity-chip");
+    const id = chip?.closest(".knobs-activity-row")?.dataset.id;
+    const event = id ? index.get(id)?.event : undefined;
+    if (chip && id && event && options.onPlay) {
+      e.stopPropagation();
+      options.onPlay(id, event);
+    }
+  });
+  const release = () => {
+    scrollHold = null;
+    following = false;
+  };
+  root.addEventListener("wheel", release, { passive: true });
+  root.addEventListener("touchstart", release, { passive: true });
+  const onPointer = () => setShowing("pointer");
+  if (keysFrom === "page")
+    win.addEventListener("pointerdown", onPointer, true);
+  const onKey = (e) => {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey)
+      return;
+    if (keysFrom === "page") {
+      if (e.target !== root && (isTypingTarget(e.target) || !root.getClientRects().length))
+        return;
+      const t = e.target;
+      if (t !== root && t?.closest?.(".knobs-panel,[role=tree],[role=listbox],[role=grid],[role=slider]"))
+        return;
+    }
+    let handled = true;
+    if (isActivityKey(e.key) && !e.shiftKey) {
+      const r = navigateActivity(rows, selected, e.key);
+      if (!takesActivityKey(e.key, r, rows.length))
+        return;
+      if (r.toggle) {
+        setShowing("key");
+        toggle(r.toggle.id, r.toggle.expanded);
+      } else if (r.select)
+        choose(r.select, "key");
+      else
+        setShowing("key");
+    } else if (e.key === "Enter" && selected) {
+      setShowing("key");
+      const row = rows.find((r) => r.id === selected);
+      const event = index.get(selected)?.event;
+      if (options.onActivate && event)
+        options.onActivate(selected, event);
+      else if (row?.group)
+        toggle(row.id, !row.expanded);
+      else
+        handled = false;
+    } else
+      handled = false;
+    if (handled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  if (keysFrom === "page")
+    win.addEventListener("keydown", onKey);
+  else
+    root.addEventListener("keydown", onKey);
+  root.addEventListener("blur", () => setShowing("blur"));
+  const remeasure = () => {
+    const was = heights.join();
+    measure();
+    if (heights.join() !== was)
+      sync("snap");
+  };
+  const ro = new ResizeObserver(remeasure);
+  ro.observe(root);
+  root.addEventListener("knobs-restyle", () => {
+    measure();
+    sync("snap");
+  });
+  sync("snap");
+  const handle = {
+    element: root,
+    set(next) {
+      handle.update({ events: next });
+    },
+    add(event) {
+      handle.set(newest === "bottom" ? [...events, event] : [event, ...events]);
+    },
+    update(next) {
+      if (next.newest)
+        newest = next.newest;
+      if (next.events) {
+        events = next.events;
+        index = indexActivity(events);
+        for (const id of [...expanded])
+          if (!index.has(id))
+            expanded.delete(id);
+      }
+      sync("set");
+    },
+    select(id) {
+      if (id !== null) {
+        const parent = index.get(id)?.parent;
+        if (parent && !expanded.has(parent)) {
+          expanded.add(parent);
+          sync("open", parent);
+        }
+      }
+      choose(id, "code");
+    },
+    get selected() {
+      return selected;
+    },
+    expand: (id, open = !expanded.has(id)) => toggle(id, open),
+    isExpanded: (id) => expanded.has(id),
+    focus: () => root.focus({ preventScroll: true }),
+    destroy() {
+      loop.stop();
+      ro.disconnect();
+      if (keysFrom === "page") {
+        win.removeEventListener("keydown", onKey);
+        win.removeEventListener("pointerdown", onPointer, true);
+      }
+      for (const v of [...views.values()])
+        dropView(v);
+      root.remove();
+    },
+    dispose: () => handle.destroy()
+  };
+  return handle;
+}
+
+// src/ui/bento-model.ts
+var FIT_MAX = 24;
+var clamp = (x, a, b) => Math.min(b, Math.max(a, x));
+var sum = (xs) => xs.reduce((s, x) => s + x, 0);
+var rowTarget = (width, height) => clamp(Math.round(Math.min(height / 3, width / 2.6)), 120, 420);
+function justify(aspects, start, end, width, target, gap, tol) {
+  const rows = [];
+  let i = start;
+  while (i < end) {
+    let total = 0;
+    let j = i;
+    let h = Number.POSITIVE_INFINITY;
+    let closed = false;
+    while (j < end) {
+      const k = j - i + 1;
+      const next = (width - (k - 1) * gap) / (total + aspects[j]);
+      if (next <= target) {
+        if (k === 1 || Math.abs(Math.log(next / target)) <= Math.abs(Math.log(h / target))) {
+          total += aspects[j];
+          j++;
+          h = next;
+        }
+        closed = true;
+        break;
+      }
+      total += aspects[j];
+      h = next;
+      j++;
+    }
+    const slice = aspects.slice(i, j);
+    if (closed || h <= target * 1.25) {
+      rows.push({ start: i, end: j, h, ws: slice.map((a) => a * h) });
+    } else {
+      const free = width - (j - i - 1) * gap;
+      const f = free / (target * total);
+      const ws = slice.map((a) => a * target * (f - 1 <= tol ? f : 1));
+      rows.push({ start: i, end: j, h: target, ws });
+    }
+    i = j;
+  }
+  return rows;
+}
+function partition(xs, k) {
+  const n = xs.length;
+  k = clamp(k, 1, n);
+  const prefix = [0];
+  for (const x of xs)
+    prefix.push(prefix.at(-1) + x);
+  const cost = Array.from({ length: k + 1 }, () => new Float64Array(n + 1).fill(Infinity));
+  const cut = Array.from({ length: k + 1 }, () => new Int32Array(n + 1));
+  cost[0][0] = 0;
+  for (let j = 1;j <= k; j++)
+    for (let i = j;i <= n; i++)
+      for (let m = j - 1;m < i; m++) {
+        const c = Math.max(cost[j - 1][m], prefix[i] - prefix[m]);
+        if (c < cost[j][i]) {
+          cost[j][i] = c;
+          cut[j][i] = m;
+        }
+      }
+  const counts = [];
+  for (let j = k, i = n;j > 0; j--) {
+    const m = cut[j][i];
+    counts.unshift(i - m);
+    i = m;
+  }
+  return counts;
+}
+function rowsBlock(aspects, w, h, gap, tol) {
+  const n = aspects.length;
+  if (!n || w <= 0 || h <= 0)
+    return null;
+  let best = null;
+  const most = Math.min(n, Math.max(2, Math.ceil(Math.sqrt(n) * 2)));
+  for (let r = 1;r <= most; r++) {
+    const counts = partition(aspects, r);
+    let at = 0;
+    const groups = counts.map((c) => aspects.slice(at, at += c));
+    const heights = groups.map((g) => (w - (g.length - 1) * gap) / sum(g));
+    const budget = h - (r - 1) * gap;
+    if (budget <= 0 || heights.some((x) => x <= 0))
+      break;
+    const s = Math.min(1, budget / sum(heights));
+    const fill = s < 1 && 1 / s - 1 <= tol ? 1 / s : 1;
+    const rects = [];
+    let y = 0;
+    let blockW = 0;
+    groups.forEach((g, k) => {
+      const rh = heights[k] * s;
+      const rowW = sum(g.map((a) => a * rh * fill)) + (g.length - 1) * gap;
+      blockW = Math.max(blockW, rowW);
+      let x = 0;
+      for (const a of g) {
+        rects.push({ x, y, w: a * rh * fill, h: rh });
+        x += a * rh * fill + gap;
+      }
+      y += rh + gap;
+    });
+    let i = 0;
+    groups.forEach((g, k) => {
+      const rowW = sum(g.map((a) => a * heights[k] * s * fill)) + (g.length - 1) * gap;
+      const dx = (blockW - rowW) / 2;
+      for (let m = 0;m < g.length; m++, i++) {
+        const q = rects[i];
+        rects[i] = { ...q, x: q.x + dx };
+      }
+    });
+    const area = sum(rects.map((q) => q.w * q.h));
+    const block = {
+      rects,
+      w: blockW,
+      h: y - gap,
+      area,
+      crop: fill - 1,
+      minH: Math.min(...rects.map((q) => q.h))
+    };
+    if (!best || block.area > best.area * 1.0001)
+      best = block;
+  }
+  return best;
+}
+var offset = (rects, dx, dy) => rects.map((q) => ({ x: q.x + dx, y: q.y + dy, w: q.w, h: q.h }));
+function heroBlock(aspects, hero, w, h, gap, tol) {
+  const a = aspects[hero];
+  const rest = aspects.filter((_, i) => i !== hero);
+  if (!rest.length)
+    return null;
+  let best = null;
+  const place = (heroRect, restBlock, restAt, bw, bh) => {
+    if (!restBlock)
+      return;
+    const [rx, ry] = restAt(restBlock);
+    const others = offset(restBlock.rects, rx, ry);
+    const rects = [...others.slice(0, hero), heroRect, ...others.slice(hero)];
+    const area = heroRect.w * heroRect.h + restBlock.area;
+    if (!best || area > best.area * 1.0001)
+      best = { rects, w: bw, h: bh, area, crop: restBlock.crop, minH: restBlock.minH };
+  };
+  for (let f = 0.4;f <= 0.761; f += 0.04) {
+    {
+      const hw = Math.min(w * f, h * a);
+      const hh = hw / a;
+      const block = rowsBlock(rest, w - hw - gap, h, gap, tol);
+      if (block) {
+        const bw = hw + gap + block.w;
+        const bh = Math.max(hh, block.h);
+        place({ x: 0, y: (bh - hh) / 2, w: hw, h: hh }, block, (b) => [hw + gap, (bh - b.h) / 2], bw, bh);
+      }
+    }
+    {
+      const hh = Math.min(h * f, w / a);
+      const hw = hh * a;
+      const block = rowsBlock(rest, w, h - hh - gap, gap, tol);
+      if (block) {
+        const bw = Math.max(hw, block.w);
+        place({ x: (bw - hw) / 2, y: 0, w: hw, h: hh }, block, (b) => [(bw - b.w) / 2, hh + gap], bw, hh + gap + block.h);
+      }
+    }
+  }
+  return best;
+}
+function planBento(aspects, layout) {
+  const gap = layout.gap ?? 2;
+  const pad = layout.padding ?? gap;
+  const tol = layout.tolerance ?? 0.08;
+  const vw = Math.max(0, layout.width);
+  const vh = Math.max(0, layout.height);
+  const w = Math.max(1, vw - pad * 2);
+  const h = Math.max(1, vh - pad * 2);
+  const as = aspects.map((a) => Number.isFinite(a) && a > 0 ? clamp(a, 0.05, 20) : 1);
+  const empty = {
+    mode: "rows",
+    rects: [],
+    width: vw,
+    height: 0,
+    coverage: 0,
+    crop: 0,
+    headers: []
+  };
+  if (!as.length || vw <= 0)
+    return empty;
+  const grouped = layout.groups?.some((g) => g !== undefined) ?? false;
+  const minTile = layout.minTile ?? Math.max(80, vh / 6);
+  if ((layout.fit ?? true) && !grouped && as.length <= FIT_MAX && vh > 0) {
+    const rows = rowsBlock(as, w, h, gap, tol);
+    let pick = rows && rows.minH >= minTile ? { mode: "fit", block: rows } : null;
+    const asked = layout.hero !== undefined && layout.hero >= 0 && layout.hero < as.length;
+    const hero = as.length > 2 ? heroBlock(as, asked ? layout.hero : 0, w, h, gap, tol) : null;
+    if (hero && hero.minH >= minTile && (asked || !pick || hero.area > pick.block.area * 1.04))
+      pick = { mode: "hero", block: hero };
+    if (pick) {
+      const { block } = pick;
+      const rects = offset(block.rects, pad + (w - block.w) / 2, pad + (h - block.h) / 2);
+      return {
+        mode: pick.mode,
+        rects,
+        width: vw,
+        height: vh,
+        coverage: block.area / (vw * vh),
+        crop: block.crop,
+        headers: []
+      };
+    }
+  }
+  const target = layout.rowHeight ?? rowTarget(vw, vh);
+  const header = layout.header ?? 28;
+  const rects = new Array(as.length);
+  const headers = [];
+  let y = pad;
+  let crop = 0;
+  let area = 0;
+  let i = 0;
+  while (i < as.length) {
+    const group = layout.groups?.[i];
+    let end = i + 1;
+    while (end < as.length && layout.groups?.[end] === group)
+      end++;
+    if (group !== undefined) {
+      if (i > 0)
+        y += header / 2;
+      headers.push({ group, y, index: i });
+      y += header;
+    }
+    for (const row of justify(as, i, end, w, target, gap, tol)) {
+      let x = pad;
+      row.ws.forEach((rw, k) => {
+        rects[row.start + k] = { x, y, w: rw, h: row.h };
+        crop = Math.max(crop, rw / (as[row.start + k] * row.h) - 1);
+        area += rw * row.h;
+        x += rw + gap;
+      });
+      y += row.h + gap;
+    }
+    i = end;
+  }
+  const height = y - gap + pad;
+  return { mode: "rows", rects, width: vw, height, coverage: area / (vw * height), crop, headers };
+}
+function windowOf(plan, top, bottom) {
+  const { rects } = plan;
+  if (plan.mode !== "rows")
+    return rects.map((_, i) => i);
+  let lo = 0;
+  let hi = rects.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (rects[mid].y + rects[mid].h < top)
+      lo = mid + 1;
+    else
+      hi = mid;
+  }
+  const out = [];
+  for (let i = lo;i < rects.length && rects[i].y <= bottom; i++)
+    out.push(i);
+  return out;
+}
+var overlapY = (a, b) => Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y) >= Math.min(a.h, b.h) * 0.5;
+function neighbour(rects, from, dir) {
+  const f = rects[from];
+  if (!f)
+    return from;
+  const fx = f.x + f.w / 2;
+  const fy = f.y + f.h / 2;
+  if (dir === "left" || dir === "right") {
+    const right = dir === "right";
+    let best = -1;
+    let bestD = Number.POSITIVE_INFINITY;
+    rects.forEach((r, i) => {
+      if (i === from || !overlapY(f, r))
+        return;
+      const d = (r.x + r.w / 2 - fx) * (right ? 1 : -1);
+      if (d > 1 && d < bestD) {
+        bestD = d;
+        best = i;
+      }
+    });
+    if (best >= 0)
+      return best;
+    return clamp(from + (right ? 1 : -1), 0, rects.length - 1);
+  }
+  const down = dir === "down";
+  let edge = Number.POSITIVE_INFINITY;
+  for (const r of rects) {
+    const d = (r.y + r.h / 2 - fy) * (down ? 1 : -1);
+    if (d > f.h * 0.25 && !overlapY(f, r))
+      edge = Math.min(edge, down ? r.y : -(r.y + r.h));
+  }
+  if (!Number.isFinite(edge))
+    return from;
+  let best = from;
+  let bestD = Number.POSITIVE_INFINITY;
+  rects.forEach((r, i) => {
+    const d = (r.y + r.h / 2 - fy) * (down ? 1 : -1);
+    if (i === from || d <= f.h * 0.25 || overlapY(f, r))
+      return;
+    const near = down ? r.y - edge : -(r.y + r.h) - edge;
+    if (near > Math.min(r.h, f.h) * 0.5)
+      return;
+    const dx = Math.abs(r.x + r.w / 2 - fx);
+    if (dx < bestD) {
+      bestD = dx;
+      best = i;
+    }
+  });
+  return best;
+}
+function fitRect(aspect, w, h, inset = 0) {
+  const bw = Math.max(1, w - inset * 2);
+  const bh = Math.max(1, h - inset * 2);
+  const fw = Math.min(bw, bh * aspect);
+  const fh = fw / aspect;
+  return { x: (w - fw) / 2, y: (h - fh) / 2, w: fw, h: fh };
+}
+function motionBlur(speed, max = 3, per = 1600) {
+  const b = Math.min(max, Math.abs(speed) / per);
+  return b < 0.25 ? 0 : Math.round(b * 4) / 4;
 }
-var svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
-var ICONS = {
-  caret: svg('<path d="M6 3.5 10.5 8 6 12.5"/>'),
-  chevronDown: svg('<path d="M3.5 6 8 10.5 12.5 6"/>'),
-  eye: svg('<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/>'),
-  eyeOff: svg('<path d="M2.5 2.5l11 11M6.6 4.2A6.6 6.6 0 0 1 8 3.5c4.1 0 6.5 4.5 6.5 4.5a11 11 0 0 1-1.7 2.2M10.2 11.9A6 6 0 0 1 8 12.5C3.9 12.5 1.5 8 1.5 8a11 11 0 0 1 2.4-2.9"/>'),
-  lock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>'),
-  unlock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 4.8-1"/>')
-};
 
 // src/ui/bento.ts
 var LAYOUT = springMotion({ duration: 0.4, bounce: 0 });
 var ZOOM_IN = springMotion({ duration: 0.45, bounce: 0 });
 var ZOOM_OUT = springMotion({ duration: 0.38, bounce: 0 });
-var SLIDE = springMotion({ duration: 0.3, bounce: 0 });
+var SLIDE2 = springMotion({ duration: 0.3, bounce: 0 });
 var SLIDE_OUT = springMotion({ duration: 0.25, bounce: 0 });
 var ENTER = springMotion({ duration: 0.3, bounce: 0 });
-var EXIT = springMotion({ duration: 0.25, bounce: 0 });
+var EXIT2 = springMotion({ duration: 0.25, bounce: 0 });
 var WASH = springMotion({ duration: 0.25, bounce: 0 });
-var FADE = springMotion({ duration: 0.18, bounce: 0 });
+var FADE2 = springMotion({ duration: 0.18, bounce: 0 });
 var INSTANT = springMotion({ duration: 0.1, bounce: 0 });
 var SLIDE_BY = 0.12;
 var EXIT_BLUR = 3;
@@ -1242,7 +3047,7 @@ function bento(container, options) {
     if (enter && !reduced())
       drive(t.life.snap(0), ENTER, 1);
     else if (enter)
-      drive(t.life.snap(0), FADE, 1);
+      drive(t.life.snap(0), FADE2, 1);
     if (reduced() || !from)
       for (const s of [t.x, t.y, t.w, t.h])
         s.snap(s.target);
@@ -1572,7 +3377,7 @@ function bento(container, options) {
     if (r)
       setBox(t, r.w, r.h);
     if (f.out || f.veil)
-      drive(t.life.snap(0), reduced() ? FADE : ENTER, 1);
+      drive(t.life.snap(0), reduced() ? FADE2 : ENTER, 1);
     t.drawn = "";
     draw(t);
     syncZoomed();
@@ -1605,11 +3410,11 @@ function bento(container, options) {
       f.z.snap(1);
       f.dx.snap(0);
       f.veil = true;
-      drive(f.alpha.snap(f.alpha.target === 0 ? f.alpha.x : 0), FADE, 1);
+      drive(f.alpha.snap(f.alpha.target === 0 ? f.alpha.x : 0), FADE2, 1);
     } else {
       f.veil = false;
       drive(f.z, ZOOM_IN, 1);
-      drive(f.dx, SLIDE, 0);
+      drive(f.dx, SLIDE2, 0);
       drive(f.alpha, ENTER, 1);
     }
     syncZoomed();
@@ -1640,7 +3445,7 @@ function bento(container, options) {
     revealUnder(f.tile.id);
     if (reduced()) {
       f.veil = true;
-      drive(f.alpha, FADE, 0);
+      drive(f.alpha, FADE2, 0);
     } else
       drive(f.z, ZOOM_OUT, 0);
     syncZoomed();
@@ -1661,7 +3466,7 @@ function bento(container, options) {
     cur.out = true;
     cur.veil = false;
     drive(cur.dx, SLIDE_OUT, -dir * by);
-    drive(cur.alpha, reduced() ? FADE : SLIDE_OUT, 0);
+    drive(cur.alpha, reduced() ? FADE2 : SLIDE_OUT, 0);
     let f = focusOf(t);
     if (!f) {
       f = beginFocus(t);
@@ -1672,8 +3477,8 @@ function bento(container, options) {
     f.out = false;
     f.veil = false;
     drive(f.z, ZOOM_IN, 1);
-    drive(f.dx, SLIDE, 0);
-    drive(f.alpha, reduced() ? FADE : SLIDE, 1);
+    drive(f.dx, SLIDE2, 0);
+    drive(f.alpha, reduced() ? FADE2 : SLIDE2, 1);
     setActive(id);
     syncZoomed();
     loop.wake();
@@ -1947,118 +3752,702 @@ function bento(container, options) {
     tiles.get(id)?.el.setAttribute("aria-selected", String(picks.has(id)));
     options.onPick?.(orderedPicks());
   };
-  const orderedPicks = () => items.filter((it) => picks.has(it.id)).map((it) => it.id);
-  root.addEventListener("wheel", onWheel, { passive: false });
-  root.addEventListener("gesturestart", onGesture);
-  root.addEventListener("gesturechange", onGesture);
-  root.addEventListener("gestureend", onGesture);
-  root.addEventListener("pointerdown", onPointerDown);
-  root.addEventListener("pointermove", onPointerMove);
-  root.addEventListener("pointerup", onPointerUp);
-  root.addEventListener("pointercancel", onPointerUp);
-  root.addEventListener("mousemove", onPointerMoveAny);
-  root.addEventListener("click", onClick);
-  root.addEventListener("keydown", onKey);
-  root.addEventListener("scroll", onScroll, { passive: true });
-  root.addEventListener("knobs-restyle", () => relayout("snap"));
-  let lastSize = "";
-  const ro = new win.ResizeObserver(() => {
-    const size = `${root.clientWidth}x${root.clientHeight}`;
-    if (size === lastSize || !ready)
+  const orderedPicks = () => items.filter((it) => picks.has(it.id)).map((it) => it.id);
+  root.addEventListener("wheel", onWheel, { passive: false });
+  root.addEventListener("gesturestart", onGesture);
+  root.addEventListener("gesturechange", onGesture);
+  root.addEventListener("gestureend", onGesture);
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("pointermove", onPointerMove);
+  root.addEventListener("pointerup", onPointerUp);
+  root.addEventListener("pointercancel", onPointerUp);
+  root.addEventListener("mousemove", onPointerMoveAny);
+  root.addEventListener("click", onClick);
+  root.addEventListener("keydown", onKey);
+  root.addEventListener("scroll", onScroll, { passive: true });
+  root.addEventListener("knobs-restyle", () => relayout("snap"));
+  let lastSize = "";
+  const ro = new win.ResizeObserver(() => {
+    const size = `${root.clientWidth}x${root.clientHeight}`;
+    if (size === lastSize || !ready)
+      return;
+    lastSize = size;
+    relayout("glide");
+  });
+  ro.observe(root);
+  if (pendingProbes) {
+    root.dataset.pending = "";
+    win.setTimeout(start, 700);
+  } else
+    start();
+  lastSize = `${root.clientWidth}x${root.clientHeight}`;
+  return {
+    element: root,
+    update(next) {
+      const before = { plan, index };
+      const ids = new Set(next.map((it) => it.id));
+      const entering = new Set(next.filter((it) => !index.has(it.id)).map((it) => it.id));
+      for (const t of tiles.values()) {
+        if (ids.has(t.id)) {
+          if (t.leaving) {
+            t.leaving = false;
+            drive(t.life, ENTER, 1);
+          }
+          t.item = next.find((it) => it.id === t.id) ?? t.item;
+          continue;
+        }
+        if (t.leaving)
+          continue;
+        const f = focusOf(t);
+        if (f)
+          endFocus(f);
+        t.leaving = true;
+        drive(t.life, reduced() ? FADE2 : EXIT2, 0);
+      }
+      items = next;
+      reindex();
+      for (const it of items)
+        probe(it);
+      for (const id of picks)
+        if (!index.has(id))
+          picks.delete(id);
+      if (active && !index.has(active))
+        setActive(null);
+      if (ready)
+        relayout("glide", before, entering);
+      loop.wake();
+    },
+    zoom(id) {
+      if (id === null)
+        zoomOut();
+      else if (index.has(id))
+        zoomIn(id);
+    },
+    get zoomed() {
+      return current()?.tile.id ?? null;
+    },
+    get active() {
+      return active;
+    },
+    focus(id) {
+      root.focus({ preventScroll: true });
+      if (id && index.has(id))
+        move(id);
+    },
+    get picks() {
+      return orderedPicks();
+    },
+    pick(ids) {
+      picks = new Set(ids);
+      for (const t of tiles.values())
+        t.el.setAttribute("aria-selected", String(picks.has(t.id)));
+    },
+    get plan() {
+      return plan;
+    },
+    get moving() {
+      return loop.running;
+    },
+    stats() {
+      const s = [...times].sort((a, b) => a - b);
+      const q = (p) => Math.round((s[Math.floor(p * (s.length - 1))] ?? 0) * 1000) / 1000;
+      return { frames, p50: q(0.5), p95: q(0.95), max: q(1) };
+    },
+    dispose() {
+      loop.stop();
+      ro.disconnect();
+      win.clearTimeout(swipe.timer);
+      if (hand)
+        win.clearTimeout(hand.timer);
+      for (const t of [...tiles.values()])
+        unmount(t);
+      root.remove();
+    }
+  };
+}
+
+// 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;
+function timelineChanges(now, changed) {
+  const next = {};
+  for (const key of Object.keys(changed)) {
+    const value = changed[key];
+    if (value === undefined)
+      continue;
+    if (key === "time" && Math.abs(value - now.time) < 0.000001)
+      continue;
+    if (key === "playing" && value === now.playing)
+      continue;
+    if ((key === "markers" || key === "ranges") && value === now[key])
+      continue;
+    next[key] = value;
+  }
+  return next;
+}
+
+// src/ui/picker-model.ts
+function digitPick(ids, key) {
+  if (!/^[1-9]$/.test(key))
+    return;
+  return ids[Number(key) - 1];
+}
+function stepPick(ids, current, key) {
+  if (!ids.length)
+    return;
+  if (key === "Home")
+    return ids[0];
+  if (key === "End")
+    return ids[ids.length - 1];
+  const i = current === null ? -1 : ids.indexOf(current);
+  if (i < 0)
+    return key === "ArrowDown" ? ids[0] : ids[ids.length - 1];
+  return ids[Math.max(0, Math.min(ids.length - 1, i + (key === "ArrowDown" ? 1 : -1)))];
+}
+function keepPick(ids, selected, wanted = null) {
+  if (wanted !== null && ids.includes(wanted))
+    return wanted;
+  if (selected !== null && ids.includes(selected))
+    return selected;
+  return ids[0] ?? null;
+}
+function askPick(ids, id) {
+  return ids.includes(id) ? { pick: id, wanted: null } : { pick: undefined, wanted: id };
+}
+var stillWanted = (ids, wanted) => wanted !== null && ids.includes(wanted) ? null : wanted;
+var pickDigit = (index) => String(index + 1);
+function claimsDigit(event, typing = false) {
+  return /^[1-9]$/.test(event.key) && !event.defaultPrevented && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && !event.repeat && !event.typing && !typing;
+}
+function cardTarget(heads, index, body, gap = 0, top = 0) {
+  if (body === undefined)
+    return null;
+  let y = top;
+  for (let i = 0;i < index; i++)
+    y += heads[i] + gap;
+  return { y, h: (heads[index] ?? 0) + body };
+}
+function settleHeight(previous, now, frames, limit = 6) {
+  if (previous !== undefined && Math.abs(now - previous) < 0.5)
+    return now;
+  return frames >= limit ? now : undefined;
+}
+
+// src/ui/picker.ts
+var OPEN2 = springMotion({ duration: 0.22, bounce: 0 });
+var CLOSE2 = springMotion({ duration: 0.18, bounce: 0 });
+var CARD = springMotion({ duration: 0.3, bounce: 0 });
+var FADE3 = springMotion({ duration: 0.16, bounce: 0 });
+var DRIFT = 6;
+var CHECK = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+function optionPicker(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  let list = options.options;
+  let wanted = null;
+  let selected = null;
+  {
+    const ids = list.map((o) => o.id);
+    if (options.selected != null)
+      wanted = askPick(ids, options.selected).wanted;
+    selected = keepPick(ids, options.selected ?? null);
+  }
+  let chosen = options.chosen ?? null;
+  const digits = options.digits ?? "focus";
+  const root = doc.createElement("div");
+  root.className = "knobs-picker";
+  root.setAttribute("role", "radiogroup");
+  if (options.label)
+    root.setAttribute("aria-label", options.label);
+  applyLook(root, options);
+  const card = doc.createElement("div");
+  card.className = "knobs-picker-card";
+  card.setAttribute("aria-hidden", "true");
+  root.append(card);
+  container.append(root);
+  const entries = new Map;
+  const uid = `kp${Math.random().toString(36).slice(2, 7)}`;
+  let serial = 0;
+  const make = (option) => {
+    const el = doc.createElement("div");
+    el.className = "knobs-picker-option";
+    el.dataset.id = option.id;
+    const head = doc.createElement("button");
+    head.type = "button";
+    head.className = "knobs-picker-head";
+    head.setAttribute("role", "radio");
+    head.id = `${uid}-${serial++}`;
+    const key = doc.createElement("span");
+    key.className = "knobs-picker-key";
+    key.setAttribute("aria-hidden", "true");
+    const name = doc.createElement("span");
+    name.className = "knobs-picker-name knobs-scroll-fade-x";
+    const suggested = doc.createElement("span");
+    suggested.className = "knobs-picker-suggested";
+    const check = doc.createElement("span");
+    check.className = "knobs-picker-check";
+    check.innerHTML = CHECK;
+    check.setAttribute("aria-hidden", "true");
+    head.append(key, name, suggested, check);
+    const body = doc.createElement("div");
+    body.className = "knobs-picker-body";
+    body.hidden = true;
+    body.setAttribute("role", "group");
+    body.setAttribute("aria-labelledby", head.id);
+    const inner = doc.createElement("div");
+    inner.className = "knobs-picker-inner";
+    body.append(inner);
+    el.append(head, body);
+    const entry = {
+      option,
+      el,
+      head,
+      key,
+      thumb: undefined,
+      name,
+      suggested,
+      body,
+      inner,
+      mounted: false,
+      measured: true,
+      cleanup: undefined,
+      h: new Spring(0, OPEN2.omega, OPEN2.zeta, 0.05),
+      o: new Spring(0, OPEN2.omega, OPEN2.zeta, 0.002),
+      moving: false,
+      open: false,
+      presence: new Spring(1, OPEN2.omega, OPEN2.zeta, 0.002),
+      leaving: false
+    };
+    entries.set(option.id, entry);
+    return entry;
+  };
+  const setThumb = (e, url) => {
+    if ((e.thumb?.getAttribute("src") ?? undefined) === (url || undefined))
+      return;
+    if (!url) {
+      e.thumb?.remove();
+      e.thumb = undefined;
+      return;
+    }
+    let img = e.thumb;
+    if (!img) {
+      const el = doc.createElement("img");
+      el.className = "knobs-picker-thumb";
+      el.alt = "";
+      el.loading = "lazy";
+      el.decoding = "async";
+      el.draggable = false;
+      el.addEventListener("load", () => el.dataset.state = "loaded");
+      el.addEventListener("error", () => el.dataset.state = "failed");
+      e.key.after(el);
+      e.thumb = img = el;
+    }
+    const shown = img;
+    shown.dataset.state = "loading";
+    shown.src = url;
+    if (shown.complete && shown.naturalWidth > 0) {
+      shown.dataset.state = "loaded";
+      shown.dataset.instant = "";
+      win.requestAnimationFrame(() => delete shown.dataset.instant);
+    }
+  };
+  const bind = (e, i) => {
+    e.option = list[i];
+    e.key.textContent = pickDigit(i);
+    setThumb(e, e.option.thumb);
+    if (e.name.textContent !== e.option.label)
+      e.name.textContent = e.option.label;
+    e.suggested.textContent = e.option.suggested ? options.suggestedLabel ?? "Suggested" : "";
+    e.suggested.hidden = !e.option.suggested;
+    const on = e.option.id === selected;
+    e.el.toggleAttribute("data-selected", on);
+    e.head.setAttribute("aria-checked", String(on));
+    e.head.tabIndex = on ? 0 : -1;
+    e.el.toggleAttribute("data-chosen", e.option.id === chosen);
+    e.head.setAttribute("aria-label", [
+      e.option.label,
+      e.option.suggested ? options.suggestedLabel ?? "Suggested" : "",
+      e.option.id === chosen ? "chosen" : ""
+    ].filter(Boolean).join(", "));
+  };
+  const mount = (e) => {
+    if (e.mounted || !options.body)
+      return;
+    e.mounted = true;
+    const out = options.body(e.option, e.inner);
+    if (typeof out === "function")
+      e.cleanup = out;
+  };
+  const cardY = new Spring(0, CARD.omega, CARD.zeta, 0.05);
+  const cardH = new Spring(0, CARD.omega, CARD.zeta, 0.05);
+  let gliding = false;
+  const liveCard = () => {
+    const e = selected ? entries.get(selected) : undefined;
+    return e && !e.leaving ? { y: e.el.offsetTop, h: e.el.offsetHeight } : null;
+  };
+  const finalCard = () => {
+    const live = list.map((o) => entries.get(o.id)).filter((e) => !!e && !e.leaving);
+    const index = live.findIndex((e) => e.option.id === selected);
+    if (index < 0)
+      return null;
+    const gap = parseFloat(win.getComputedStyle(root).rowGap) || 0;
+    const e = live[index];
+    return cardTarget(live.map((x) => x.head.offsetHeight), index, e.measured ? natural(e) : undefined, gap);
+  };
+  const placeCard = () => {
+    card.style.transform = `translate3d(0,${Math.round(cardY.x * 2) / 2}px,0)`;
+    card.style.height = `${Math.max(0, cardH.x).toFixed(2)}px`;
+    card.hidden = cardH.x < 0.5;
+  };
+  const natural = (e) => e.inner.offsetHeight;
+  const setOpen = (e, open, animate) => {
+    if (e.open === open && (e.moving || e.body.hidden === !open))
+      return;
+    e.open = open;
+    const reduced = reducedMotion(win);
+    if (open && !e.mounted) {
+      if (animate && e.body.hidden) {
+        e.body.hidden = false;
+        e.body.style.height = "0px";
+        e.body.dataset.moving = "";
+        e.h.snap(0);
+        e.o.snap(0);
+        e.moving = true;
+      }
+      mount(e);
+    }
+    if (!animate) {
+      e.body.hidden = !open;
+      e.moving = false;
+      e.body.style.height = "";
+      delete e.body.dataset.moving;
+      e.inner.style.opacity = "";
+      e.inner.style.transform = "";
+      return;
+    }
+    if (!e.moving) {
+      const from = e.body.hidden ? 0 : e.body.offsetHeight;
+      e.h.snap(from);
+      e.o.snap(from > 0.5 ? 1 : 0);
+    }
+    e.body.hidden = false;
+    e.moving = true;
+    e.body.dataset.moving = "";
+    if (reduced) {
+      e.h.snap(open ? natural(e) : 0);
+      tune(e.o, FADE3).set(open ? 1 : 0);
+    } else {
+      tune(e.h, open ? OPEN2 : CLOSE2).set(open ? natural(e) : 0);
+      tune(e.o, open ? OPEN2 : CLOSE2).set(open ? 1 : 0);
+    }
+    loop.wake();
+  };
+  let pending = null;
+  const premount = (e) => {
+    e.body.hidden = false;
+    e.body.style.height = "0px";
+    e.body.dataset.moving = "";
+    e.inner.style.opacity = "0";
+    e.measured = false;
+    mount(e);
+  };
+  const shelve = (e) => {
+    if (e.open || e.moving)
+      return;
+    e.body.hidden = true;
+    e.body.style.height = "";
+    delete e.body.dataset.moving;
+    e.inner.style.opacity = "";
+    e.measured = true;
+  };
+  const start = (was, now, animate) => {
+    now.measured = true;
+    if (was && was !== now)
+      setOpen(was, false, animate);
+    setOpen(now, true, animate);
+    if (animate && !reducedMotion(win)) {
+      tune(cardY, CARD);
+      tune(cardH, CARD);
+      gliding = true;
+    }
+    loop.wake();
+  };
+  const flush = () => {
+    const p = pending;
+    if (!p)
+      return;
+    pending = null;
+    start(p.was, p.now, true);
+  };
+  const loop = frameLoop(win, (dt) => {
+    let moving = false;
+    if (pending) {
+      const p = pending;
+      const h = natural(p.now);
+      p.frames++;
+      if (settleHeight(p.last, h, p.frames) !== undefined)
+        flush();
+      else {
+        p.last = h;
+        moving = true;
+      }
+    }
+    for (const e of [...entries.values()]) {
+      if (e.moving) {
+        if (e.open && !reducedMotion(win))
+          e.h.set(natural(e));
+        e.h.step(dt);
+        e.o.step(dt);
+        const fade = Math.max(0, Math.min(1, e.o.x));
+        e.body.style.height = `${Math.max(0, e.h.x).toFixed(2)}px`;
+        const shown = e.open ? fade : Math.max(0, (fade - 0.4) / 0.6);
+        e.inner.style.opacity = shown < 0.999 ? shown.toFixed(3) : "";
+        const drift = reducedMotion(win) ? 0 : (1 - fade) * -DRIFT;
+        e.inner.style.transform = Math.abs(drift) > 0.05 ? `translateY(${drift.toFixed(2)}px)` : "";
+        if (e.h.resting && e.o.resting) {
+          e.moving = false;
+          delete e.body.dataset.moving;
+          e.body.style.height = "";
+          e.inner.style.opacity = "";
+          e.inner.style.transform = "";
+          e.body.hidden = !e.open;
+        } else
+          moving = true;
+      }
+      if (e.leaving || !e.presence.resting) {
+        e.presence.step(dt);
+        const p = Math.max(0, Math.min(1, e.presence.x));
+        e.el.style.opacity = p < 0.999 ? p.toFixed(3) : "";
+        e.el.style.height = p < 0.999 ? `${(p * e.head.offsetHeight).toFixed(2)}px` : "";
+        e.el.style.overflow = p < 0.999 ? "hidden" : "";
+        if (e.presence.resting) {
+          if (e.leaving) {
+            e.cleanup?.();
+            e.el.remove();
+            entries.delete(e.option.id);
+          }
+        } else
+          moving = true;
+      }
+    }
+    const t = pending ? null : gliding ? finalCard() : liveCard();
+    if (t) {
+      if (gliding) {
+        cardY.set(t.y);
+        cardH.set(t.h);
+        cardY.step(dt);
+        cardH.step(dt);
+        if (cardY.resting && cardH.resting && !moving)
+          gliding = false;
+        else
+          moving = true;
+      } else {
+        cardY.snap(t.y);
+        cardH.snap(t.h);
+      }
+    }
+    placeCard();
+    notifyLayout(doc);
+    return moving;
+  });
+  const rebind = () => {
+    list.forEach((o, i) => {
+      const e = entries.get(o.id);
+      if (e)
+        bind(e, i);
+    });
+  };
+  const pick = (id, animate = true) => {
+    if (id === selected || !entries.has(id))
+      return;
+    let was = selected ? entries.get(selected) : undefined;
+    if (pending) {
+      was = pending.was;
+      const waiting = pending.now;
+      pending = null;
+      if (waiting.option.id !== id)
+        shelve(waiting);
+    }
+    selected = id;
+    rebind();
+    const now = entries.get(id);
+    if (animate && !reducedMotion(win) && !now.mounted && options.body) {
+      premount(now);
+      pending = { was, now, last: natural(now), frames: 0 };
+      loop.wake();
+      return;
+    }
+    start(was, now, animate);
+  };
+  const select = (id, source) => {
+    if (!id)
+      return;
+    wanted = null;
+    if (id === selected)
+      return;
+    const inside = root.contains(doc.activeElement);
+    pick(id);
+    if (source !== "pointer" && inside)
+      entries.get(id)?.head.focus({ preventScroll: true });
+    options.onSelect?.(id, source);
+  };
+  const sync = (animate) => {
+    flush();
+    const ids = list.map((o) => o.id);
+    const was = selected;
+    selected = keepPick(ids, selected, wanted);
+    wanted = stillWanted(ids, wanted);
+    if (animate && was !== selected && !reducedMotion(win))
+      gliding = true;
+    const reduced = reducedMotion(win);
+    const live = new Set(ids);
+    for (const e of entries.values()) {
+      if (live.has(e.option.id) || e.leaving)
+        continue;
+      if (!animate) {
+        e.cleanup?.();
+        e.el.remove();
+        entries.delete(e.option.id);
+        continue;
+      }
+      e.leaving = true;
+      e.el.setAttribute("aria-hidden", "true");
+      e.head.tabIndex = -1;
+      if (e.open)
+        setOpen(e, false, true);
+      tune(e.presence, reduced ? FADE3 : CLOSE2).set(0);
+    }
+    let before = card;
+    list.forEach((o, i) => {
+      let e = entries.get(o.id);
+      if (e?.leaving) {
+        e.leaving = false;
+        e.el.removeAttribute("aria-hidden");
+        tune(e.presence, OPEN2).set(1);
+      }
+      if (!e) {
+        e = make(o);
+        ro.observe(e.el);
+        if (animate)
+          tune(e.presence, reduced ? FADE3 : OPEN2).snap(0).set(1);
+      }
+      if (before.nextElementSibling !== e.el)
+        before.after(e.el);
+      before = e.el;
+      bind(e, i);
+    });
+    const open = selected ? entries.get(selected) : undefined;
+    const ahead = animate && !reduced && open && !open.open && !open.mounted && !!options.body ? { was: was ? entries.get(was) : undefined, now: open } : null;
+    for (const e of entries.values())
+      if (e !== open && e !== ahead?.was && e.open && !e.leaving)
+        setOpen(e, false, animate);
+    if (ahead) {
+      premount(ahead.now);
+      pending = { ...ahead, last: natural(ahead.now), frames: 0 };
+    } else if (open && !open.open)
+      setOpen(open, true, animate);
+    loop.wake();
+  };
+  const ids = () => list.map((o) => o.id).filter((id) => !entries.get(id)?.leaving);
+  const onDigit = (e) => {
+    if (!claimsDigit(e, isTypingTarget(e.target)))
       return;
-    lastSize = size;
-    relayout("glide");
+    if (!root.getClientRects().length)
+      return;
+    const id = digitPick(ids(), e.key);
+    if (!id)
+      return;
+    e.preventDefault();
+    select(id, "digit");
+  };
+  root.addEventListener("keydown", (e) => {
+    const head = e.target.closest?.(".knobs-picker-head");
+    if (head && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        select(stepPick(ids(), selected, e.key), "key");
+        return;
+      }
+      if (e.key === "Enter" && selected) {
+        e.preventDefault();
+        options.onChoose?.(selected);
+        return;
+      }
+    }
+    if (digits === "focus")
+      onDigit(e);
+  });
+  if (digits === "page")
+    win.addEventListener("keydown", onDigit);
+  root.addEventListener("click", (e) => {
+    const el = e.target.closest(".knobs-picker-head");
+    const id = el?.closest(".knobs-picker-option")?.dataset.id;
+    if (!id || entries.get(id)?.leaving)
+      return;
+    select(id, e.detail === 0 ? "key" : "pointer");
   });
+  const ro = new ResizeObserver(() => loop.wake());
   ro.observe(root);
-  if (pendingProbes) {
-    root.dataset.pending = "";
-    win.setTimeout(start, 700);
-  } else
-    start();
-  lastSize = `${root.clientWidth}x${root.clientHeight}`;
-  return {
+  root.addEventListener("knobs-restyle", () => {
+    syncFrame(root);
+    loop.wake();
+  });
+  sync(false);
+  const first = liveCard();
+  if (first) {
+    cardY.snap(first.y);
+    cardH.snap(first.h);
+  }
+  placeCard();
+  loop.wake();
+  const handle = {
     element: root,
-    update(next) {
-      const before = { plan, index };
-      const ids = new Set(next.map((it) => it.id));
-      const entering = new Set(next.filter((it) => !index.has(it.id)).map((it) => it.id));
-      for (const t of tiles.values()) {
-        if (ids.has(t.id)) {
-          if (t.leaving) {
-            t.leaving = false;
-            drive(t.life, ENTER, 1);
-          }
-          t.item = next.find((it) => it.id === t.id) ?? t.item;
-          continue;
-        }
-        if (t.leaving)
-          continue;
-        const f = focusOf(t);
-        if (f)
-          endFocus(f);
-        t.leaving = true;
-        drive(t.life, reduced() ? FADE : EXIT, 0);
-      }
-      items = next;
-      reindex();
-      for (const it of items)
-        probe(it);
-      for (const id of picks)
-        if (!index.has(id))
-          picks.delete(id);
-      if (active && !index.has(active))
-        setActive(null);
-      if (ready)
-        relayout("glide", before, entering);
-      loop.wake();
-    },
-    zoom(id) {
-      if (id === null)
-        zoomOut();
-      else if (index.has(id))
-        zoomIn(id);
-    },
-    get zoomed() {
-      return current()?.tile.id ?? null;
-    },
-    get active() {
-      return active;
-    },
-    focus(id) {
-      root.focus({ preventScroll: true });
-      if (id && index.has(id))
-        move(id);
+    set(next) {
+      list = next;
+      sync(true);
     },
-    get picks() {
-      return orderedPicks();
+    select(id) {
+      const ask = askPick(ids(), id);
+      wanted = ask.wanted;
+      if (ask.pick)
+        pick(ask.pick);
     },
-    pick(ids) {
-      picks = new Set(ids);
-      for (const t of tiles.values())
-        t.el.setAttribute("aria-selected", String(picks.has(t.id)));
+    get selected() {
+      return selected;
     },
-    get plan() {
-      return plan;
+    choose(id) {
+      chosen = id;
+      rebind();
     },
-    get moving() {
-      return loop.running;
+    get chosen() {
+      return chosen;
     },
-    stats() {
-      const s = [...times].sort((a, b) => a - b);
-      const q = (p) => Math.round((s[Math.floor(p * (s.length - 1))] ?? 0) * 1000) / 1000;
-      return { frames, p50: q(0.5), p95: q(0.95), max: q(1) };
+    focus() {
+      (selected ? entries.get(selected)?.head : undefined)?.focus({ preventScroll: true });
     },
-    dispose() {
+    destroy() {
       loop.stop();
       ro.disconnect();
-      win.clearTimeout(swipe.timer);
-      if (hand)
-        win.clearTimeout(hand.timer);
-      for (const t of [...tiles.values()])
-        unmount(t);
+      if (digits === "page")
+        win.removeEventListener("keydown", onDigit);
+      for (const e of entries.values())
+        e.cleanup?.();
+      entries.clear();
       root.remove();
-    }
+    },
+    dispose: () => handle.destroy()
   };
+  return handle;
 }
 
 // src/core/storage.ts
@@ -3292,6 +5681,43 @@ function edgeOf(panes, id) {
   const first = panes.findIndex((p) => flex.has(p.id));
   return panes.findIndex((p) => p.id === id) < first ? "start" : "end";
 }
+function foldProgress(size, open, rail) {
+  const span = open - rail;
+  if (span <= 0)
+    return size > rail ? 0 : 1;
+  return Math.min(1, Math.max(0, (open - size) / span));
+}
+var FACE_OUT = 0.4;
+var FACE_IN = 0.3;
+var clamp01 = (x) => Math.min(1, Math.max(0, x));
+function face(prev, away) {
+  const lo = clamp01(1 - away / FACE_IN);
+  const hi = clamp01(1 - away / FACE_OUT);
+  return Math.min(hi, Math.max(lo, prev));
+}
+function foldFaces(prev, p) {
+  return { content: face(prev.content, p), rail: face(prev.rail, 1 - p) };
+}
+function chevronTurn(p, edge) {
+  return (edge === "start" ? 180 : -180) * (1 - clamp01(p));
+}
+function chevronFlip(f) {
+  return 2 * clamp01(f) - 1;
+}
+var FOLD_STYLE = { chevron: "flip", title: "travel", duration: 0.3 };
+function foldStyle(options = {}) {
+  const duration = options.duration;
+  return {
+    chevron: options.chevron === "turn" ? "turn" : "flip",
+    title: options.title === "fade" ? "fade" : "travel",
+    duration: duration !== undefined && Number.isFinite(duration) && duration > 0 ? Math.min(2, duration) : FOLD_STYLE.duration
+  };
+}
+function titleTravel(at, open, rail, edge, p) {
+  const k = 1 - clamp01(p);
+  const dx = at.title - at.label - (edge === "start" ? open - rail : 0);
+  return { x: dx * k, y: at.dy * k, turn: -90 * k };
+}
 function parseLayout(raw, panes) {
   if (!raw || typeof raw !== "object")
     return;
@@ -3319,8 +5745,24 @@ function serializeLayout(layout) {
 }
 
 // src/ui/split.ts
-var COLLAPSE = springMotion({ duration: 0.42, bounce: 0.04 });
+var FLIP = springMotion({ duration: 0.18, bounce: 0 });
 var SETTLE = springMotion({ duration: 0.3, bounce: 0 });
+var CONTENT_BLUR = 3;
+var LABEL_BLUR = 2;
+var put = (el, prop, value) => {
+  if (el.style.getPropertyValue(prop) !== value)
+    el.style.setProperty(prop, value);
+};
+var hide = (el, hidden) => {
+  if (hidden)
+    el.setAttribute("aria-hidden", "true");
+  else
+    el.removeAttribute("aria-hidden");
+};
+var fade = (el, a, blur) => {
+  put(el, "opacity", a >= 1 ? "" : a.toFixed(3));
+  put(el, "filter", a >= 1 || a <= 0 || !blur ? "" : `blur(${(blur * (1 - a)).toFixed(2)}px)`);
+};
 var iconNode = (doc, icon, label) => {
   if (icon instanceof Node)
     return icon;
@@ -3339,6 +5781,8 @@ function split(container, options) {
   const row = direction === "row";
   const specs = options.panes;
   const flex = flexible(specs);
+  const style = foldStyle(options.fold);
+  const COLLAPSE = springMotion({ duration: style.duration, bounce: 0 });
   const store = options.storage === undefined ? browserStorage() : options.storage;
   const key = options.id ? storageKey(options.id, "split") : undefined;
   const saved = (() => {
@@ -3367,13 +5811,31 @@ function split(container, options) {
     const el = doc.createElement("section");
     el.className = "knobs-pane";
     el.dataset.pane = spec.id;
+    const edge = edgeOf(specs, spec.id);
+    el.dataset.edge = edge;
     const clip = doc.createElement("div");
     clip.className = "knobs-pane-clip";
     const inner = doc.createElement("div");
     inner.className = "knobs-pane-inner";
     const body = doc.createElement("div");
     body.className = "knobs-pane-body";
-    const view = { spec, el, clip, inner, body, open: 0, shown: 0 };
+    const shut = Boolean(collapsed[spec.id]);
+    const view = {
+      spec,
+      el,
+      clip,
+      inner,
+      body,
+      edge,
+      open: 0,
+      shown: 0,
+      folding: false,
+      faces: { content: shut ? 0 : 1, rail: shut ? 1 : 0 },
+      headPx: 0,
+      chev: { iconEnd: 0, chevEnd: 0, dy: 0, scale: 1 },
+      places: { title: 0, label: 0, dy: 0 },
+      flip: new Spring(shut ? 1 : 0, FLIP.omega, FLIP.zeta, 0.002)
+    };
     if (spec.title !== undefined) {
       const head = doc.createElement("header");
       head.className = "knobs-pane-head";
@@ -3411,9 +5873,10 @@ function split(container, options) {
         tooltip(b, () => collapsed[spec.id] ? "Open" : row ? "Collapse" : "Fold");
         b.innerHTML = row ? ICONS.caret : ICONS.chevronDown;
         if (row)
-          b.firstElementChild?.setAttribute("style", edgeOf(specs, spec.id) === "start" ? "transform:scaleX(-1)" : "");
+          b.firstElementChild?.setAttribute("style", edge === "start" ? "transform:scaleX(-1)" : "");
         else
           b.firstElementChild?.classList.add("knobs-pane-caret");
+        view.toggleIcon = b.firstElementChild ?? undefined;
         b.addEventListener("click", (e) => {
           e.stopPropagation();
           setCollapsed(spec.id, !collapsed[spec.id]);
@@ -3432,8 +5895,10 @@ function split(container, options) {
     inner.append(body);
     clip.append(inner);
     el.append(clip);
-    if (spec.scroll ?? spec.title !== undefined)
+    if (spec.scroll ?? spec.title !== undefined) {
       el.dataset.scroll = "";
+      body.classList.add("knobs-scroll-fade");
+    }
     if (spec.element)
       body.append(spec.element);
     if (spec.collapsible && (row || !view.head)) {
@@ -3445,13 +5910,22 @@ function split(container, options) {
       rail.setAttribute("aria-label", `Open ${label}`);
       tooltip(rail, `Open ${label}`, { placement: row ? "right" : "top" });
       const text = doc.createElement("span");
+      text.className = "knobs-pane-rail-label";
       text.textContent = spec.rail ?? spec.title ?? "";
-      rail.innerHTML = row ? ICONS.caret.replace("<svg", `<svg style="transform:scaleX(${edgeOf(specs, spec.id) === "start" ? 1 : -1})"`) : ICONS.chevronDown;
-      rail.append(text);
+      const chevron = doc.createElement("span");
+      chevron.className = "knobs-pane-chevron";
+      const turn = doc.createElement("span");
+      turn.className = "knobs-pane-turn";
+      turn.innerHTML = row ? ICONS.caret.replace("<svg", `<svg style="transform:scaleX(${edge === "start" ? 1 : -1})"`) : ICONS.chevronDown;
+      chevron.append(turn);
+      rail.append(chevron, text);
       rail.addEventListener("click", () => setCollapsed(spec.id, false));
       el.append(rail);
       el.dataset.rail = "";
       view.rail = rail;
+      view.railLabel = text;
+      view.chevron = chevron;
+      view.turn = turn;
     }
     return view;
   };
@@ -3481,9 +5955,10 @@ function split(container, options) {
   const total = () => along(root);
   let paneM = 0;
   const marginOf = (v) => v.el.hasAttribute("data-nested") ? 0 : paneM;
-  const headerSize = (v) => v.head ? v.head.getBoundingClientRect().height + marginOf(v) * 2 : 0;
+  const headerSize = (v) => v.head ? v.headPx + marginOf(v) * 2 : 0;
   let railPx = 0;
-  const readRail = () => {
+  let measured = false;
+  const measure = () => {
     syncFrame(root);
     const probe = doc.createElement("div");
     probe.style.cssText = "position:absolute;visibility:hidden;width:var(--ku-rail);height:var(--ku-pane-m)";
@@ -3492,8 +5967,44 @@ function split(container, options) {
     paneM = r.height;
     railPx = (r.width || 26) + paneM * 2;
     probe.remove();
+    for (const v of views.values())
+      if (v.head)
+        v.headPx = v.head.getBoundingClientRect().height;
+    measured = root.isConnected && r.width > 0;
+  };
+  const measureChevrons = (only) => {
+    if (!row)
+      return;
+    for (const v of only ? [only] : views.values()) {
+      if (!v.chevron || !v.toggleIcon || !v.rail || !v.railLabel)
+        continue;
+      const inner = v.inner.getBoundingClientRect();
+      const icon = v.toggleIcon.getBoundingClientRect();
+      const rail = v.rail.getBoundingClientRect();
+      const chev = v.chevron.getBoundingClientRect();
+      if (!inner.width || !chev.width)
+        continue;
+      v.chev = {
+        iconEnd: inner.right - (icon.left + icon.width / 2),
+        chevEnd: rail.right - (chev.left + chev.width / 2),
+        dy: icon.top + icon.height / 2 - inner.top - (chev.top + chev.height / 2 - rail.top),
+        scale: icon.width / chev.width
+      };
+      if (!v.titleEl)
+        continue;
+      const moved = v.railLabel.style.transform;
+      v.railLabel.style.transform = "none";
+      const label = v.railLabel.getBoundingClientRect();
+      v.railLabel.style.transform = moved;
+      const title = v.titleEl.getBoundingClientRect();
+      v.places = {
+        title: title.left + title.width / 2 - inner.left,
+        label: label.left + label.width / 2 - rail.left,
+        dy: title.top + title.height / 2 - inner.top - (label.top + label.height / 2 - rail.top)
+      };
+    }
   };
-  readRail();
+  measure();
   const rail = (id) => {
     const v = views.get(id);
     return !row && v.head ? headerSize(v) : railPx;
@@ -3506,47 +6017,102 @@ function split(container, options) {
   };
   const target = () => solve({ panes: specs, sizes, collapsed, total: total(), rail });
   const current = () => solve({ panes: specs, sizes, collapsed, total: total(), rail, fixed: fixed() });
+  const SIDES = { row: ["right", "left"], column: ["bottom", "top"] };
+  const sides = (v) => {
+    const [a, b] = SIDES[direction];
+    return v.edge === "start" ? [a, b] : [b, a];
+  };
+  const renderFold = (v, size) => {
+    const id = v.spec.id;
+    const isCollapsed = collapsed[id];
+    const folding = isCollapsed || v.folding;
+    const r = rail(id);
+    const open = folding ? Math.max(v.open, r + 1) : size;
+    const p = folding ? foldProgress(size, open, r) : 0;
+    v.faces = foldFaces(v.faces, p);
+    const m = marginOf(v);
+    const settled = !springs.has(id);
+    const content = isCollapsed && settled ? 1 : v.faces.content;
+    put(v.rail ? v.inner : v.body, "will-change", v.folding ? "opacity, filter" : "");
+    if (!v.rail) {
+      put(v.inner, "height", folding ? `${open - m * 2}px` : "");
+      put(v.inner, "bottom", folding ? "auto" : "");
+      fade(v.body, content, CONTENT_BLUR);
+      if (v.toggleIcon)
+        put(v.toggleIcon, "transform", p ? `rotate(${(-90 * p).toFixed(2)}deg)` : "");
+      hide(v.body, isCollapsed && settled);
+      return;
+    }
+    const [side, far] = sides(v);
+    put(v.inner, row ? "width" : "height", folding ? `${open - m * 2}px` : "");
+    put(v.inner, side, folding ? "0" : "");
+    put(v.inner, far, folding ? "auto" : "");
+    fade(v.inner, content, CONTENT_BLUR);
+    hide(v.clip, isCollapsed && settled);
+    const morph = row && Boolean(v.toggleIcon) && !v.el.hasAttribute("data-nested");
+    v.el.toggleAttribute("data-morph", morph);
+    const label = v.railLabel;
+    const travel = morph && style.title === "travel" && Boolean(v.titleEl) && label.textContent === v.titleEl.textContent;
+    v.el.toggleAttribute("data-travel", travel && folding);
+    const k = 1 - p;
+    if (travel && !folding) {
+      put(label, "opacity", "0");
+      put(label, "filter", "");
+      put(label, "transform", "");
+      put(label, "color", "");
+    } else if (travel) {
+      const t = titleTravel(v.places, open, r, v.edge, p);
+      put(label, "opacity", "");
+      put(label, "filter", "");
+      put(label, "transform", k === 0 ? "" : `translate(${t.x.toFixed(2)}px,${t.y.toFixed(2)}px) rotate(${t.turn.toFixed(2)}deg)`);
+      put(label, "color", k === 0 ? "" : `color-mix(in srgb,var(--ku-text) ${(k * 100).toFixed(1)}%,var(--ku-label))`);
+    } else {
+      put(label, "transform", "");
+      put(label, "color", "");
+    }
+    if (morph) {
+      put(v.rail, "opacity", "1");
+      if (!travel)
+        fade(label, v.faces.rail, LABEL_BLUR);
+      const c = v.chev;
+      const dx = c.chevEnd - c.iconEnd + (v.edge === "end" ? open - r : 0);
+      const move = `translate(${(dx * k).toFixed(2)}px,${(c.dy * k).toFixed(2)}px)`;
+      const size = `scale(${(1 + (c.scale - 1) * k).toFixed(4)})`;
+      if (style.chevron === "turn")
+        put(v.turn, "transform", k === 0 ? "" : `${move} rotate(${chevronTurn(p, v.edge).toFixed(2)}deg) ${size}`);
+      else {
+        const w = chevronFlip(v.flip.x);
+        put(v.turn, "transform", k === 0 && w === 1 ? "" : `${move} ${size} scaleX(${w.toFixed(4)})`);
+      }
+    } else {
+      const a = v.faces.rail;
+      put(v.rail, "opacity", a >= 1 ? "1" : a.toFixed(3));
+      put(label, "opacity", "");
+      put(label, "filter", a >= 1 || a <= 0 ? "" : `blur(${(LABEL_BLUR * (1 - a)).toFixed(2)}px)`);
+      put(v.turn, "transform", "");
+    }
+  };
   let lastReport = "";
   const render = (shown) => {
     for (const spec of specs) {
       const v = views.get(spec.id);
       const size = Math.max(0, shown[spec.id] ?? 0);
       v.shown = size;
-      v.el.style.flexBasis = `${size}px`;
-      v.el.style[row ? "width" : "height"] = `${size}px`;
-      const isCollapsed = collapsed[spec.id];
-      const moving = springs.has(spec.id);
-      v.el.toggleAttribute("data-collapsed", isCollapsed);
-      v.el.toggleAttribute("data-settled", !moving);
-      v.el.setAttribute("aria-hidden", String(isCollapsed && !moving));
-      const r = rail(spec.id);
-      const open = Math.max(v.open, r + 1);
-      const m = marginOf(v);
-      if (moving || isCollapsed) {
-        const p = Math.min(1, Math.max(0, (open - size) / (open - r)));
-        if (v.rail) {
-          const visible = Math.max(0, (size - r) / (open - r) * open);
-          const edge = edgeOf(specs, spec.id);
-          const side = row ? edge === "start" ? "right" : "left" : edge === "start" ? "bottom" : "top";
-          v.clip.style.cssText = `${row ? "width" : "height"}:${Math.max(0, visible - m * 2)}px;${side}:0;${row ? side === "right" ? "left:auto" : "right:auto" : side === "bottom" ? "top:auto" : "bottom:auto"}`;
-          v.inner.style.cssText = `${row ? "width" : "height"}:${open - m * 2}px;${side}:0;${row ? side === "right" ? "left:auto" : "right:auto" : side === "bottom" ? "top:auto" : "bottom:auto"}`;
-          v.rail.style.opacity = String(Math.max(0, (p - 0.35) / 0.65));
-        } else {
-          v.clip.style.cssText = "";
-          v.inner.style.cssText = `height:${open - m * 2}px;bottom:auto`;
-        }
-      } else {
-        v.clip.style.cssText = "";
-        v.inner.style.cssText = "";
-        if (v.rail)
-          v.rail.style.opacity = "0";
-      }
+      put(v.el, "flex-basis", `${size}px`);
+      put(v.el, row ? "width" : "height", `${size}px`);
+      v.el.toggleAttribute("data-collapsed", collapsed[spec.id]);
+      v.el.toggleAttribute("data-settled", !springs.has(spec.id));
+      if (spec.collapsible)
+        renderFold(v, size);
     }
     dividers.forEach((d, i) => {
       const a = specs[i];
       const b = specs[i + 1];
-      d.setAttribute("aria-valuenow", String(Math.round(views.get(a.id).shown)));
-      d.setAttribute("aria-controls", `${a.id} ${b.id}`);
+      const now = String(Math.round(views.get(a.id).shown));
+      if (d.getAttribute("aria-valuenow") !== now)
+        d.setAttribute("aria-valuenow", now);
+      if (!d.hasAttribute("aria-controls"))
+        d.setAttribute("aria-controls", `${a.id} ${b.id}`);
     });
     const layout = snapshot();
     const report = JSON.stringify(layout);
@@ -3579,51 +6145,76 @@ function split(container, options) {
   const loop = frameLoop(win, (dt) => {
     for (const [id, s] of springs) {
       s.step(dt);
-      if (s.resting)
+      if (s.resting) {
         springs.delete(id);
+        views.get(id).folding = false;
+      }
+    }
+    let flipping = false;
+    for (const v of views.values()) {
+      v.flip.step(dt);
+      if (!v.flip.resting)
+        flipping = true;
     }
     const shown = current();
-    render(shown);
-    if (springs.size === 0) {
+    if (springs.size === 0)
       rememberOpen(shown);
-      render(shown);
-    }
-    return springs.size > 0;
+    render(shown);
+    return springs.size > 0 || flipping;
   });
   const animate = (motion = SETTLE) => {
     const to = target();
+    for (const v of views.values())
+      if (v.folding && !collapsed[v.spec.id])
+        v.open = to[v.spec.id];
     if (reducedMotion(win)) {
       springs.clear();
-      render(to);
+      const arriving = [...views.values()].filter((v) => v.folding).map((v) => collapsed[v.spec.id] ? v.rail : v.rail ? v.inner : v.body);
+      for (const v of views.values()) {
+        v.folding = false;
+        v.flip.snap(collapsed[v.spec.id] ? 1 : 0);
+      }
       rememberOpen(to);
+      render(to);
+      for (const el of arriving)
+        el?.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: 160,
+          easing: "cubic-bezier(.2,.8,.2,1)"
+        });
       return;
     }
     for (const spec of specs) {
-      const from = views.get(spec.id).shown;
+      const v = views.get(spec.id);
       const goal = to[spec.id];
       const s = springs.get(spec.id);
       if (s) {
         s.omega = motion.omega;
         s.zeta = motion.zeta;
         s.set(goal);
-      } else if (Math.abs(goal - from) > 0.5) {
-        springs.set(spec.id, new Spring(from, motion.omega, motion.zeta, 0.2).set(goal));
-      }
+      } else if (Math.abs(goal - v.shown) > 0.5) {
+        springs.set(spec.id, new Spring(v.shown, motion.omega, motion.zeta, 0.2).set(goal));
+      } else
+        v.folding = false;
     }
     loop.wake();
   };
+  const fold = (id, value) => {
+    const v = views.get(id);
+    if (value && !v.folding)
+      v.open = v.shown;
+    collapsed[id] = value;
+    v.folding = true;
+    v.flip.set(value ? 1 : 0);
+  };
+  const release = (id) => {
+    springs.delete(id);
+    views.get(id).folding = false;
+  };
   function setCollapsed(id, value, save = true) {
     const spec = specs.find((p) => p.id === id);
     if (!spec?.collapsible || collapsed[id] === value)
       return;
-    const v = views.get(id);
-    if (value && !springs.has(id))
-      v.open = v.shown;
-    if (!value) {
-      collapsed[id] = false;
-      v.open = target()[id];
-    }
-    collapsed[id] = value;
+    fold(id, value);
     if (save)
       persist();
     animate(COLLAPSE);
@@ -3645,7 +6236,8 @@ function split(container, options) {
       d.focus({ preventScroll: true });
       const shown = current();
       for (const id of [a.id, b.id])
-        springs.delete(id);
+        if (!collapsed[id])
+          release(id);
       start = { ...shown };
       for (const id of [a.id, b.id])
         if (collapsed[id])
@@ -3679,7 +6271,7 @@ function split(container, options) {
         return;
       setSizes(result.sizes);
       for (const id of [a.id, b.id])
-        springs.delete(id);
+        release(id);
       const shown = current();
       render(shown);
       rememberOpen(shown);
@@ -3742,17 +6334,21 @@ function split(container, options) {
   }
   function reset(...ids) {
     const which = ids.length ? ids : specs.map((p) => p.id);
+    let folds = false;
     for (const id of which) {
       delete sizes[id];
       const spec = specs.find((p) => p.id === id);
-      if (spec?.collapsible)
-        collapsed[id] = Boolean(spec.collapsed);
+      const shut = Boolean(spec?.collapsed);
+      if (spec?.collapsible && collapsed[id] !== shut) {
+        fold(id, shut);
+        folds = true;
+      }
     }
     if (which.some((id) => flex.has(id)))
       for (const id of flex)
         delete sizes[id];
     persist();
-    animate();
+    animate(folds ? COLLAPSE : SETTLE);
   }
   {
     const first = target();
@@ -3761,18 +6357,29 @@ function split(container, options) {
       views.get(spec.id).open = collapsed[spec.id] ? solve({ panes: specs, sizes, collapsed: open, total: total(), rail })[spec.id] : first[spec.id];
     }
     render(first);
+    measureChevrons();
+    render(first);
   }
-  const relayout = () => {
-    readRail();
-    if (springs.size)
+  const relayout = (remeasure) => {
+    if (remeasure)
+      measure();
+    if (springs.size) {
+      if (remeasure)
+        measureChevrons();
       return loop.wake();
+    }
     const shown = target();
-    render(shown);
     rememberOpen(shown);
+    render(shown);
+    if (remeasure) {
+      measureChevrons();
+      render(shown);
+    }
   };
-  const ro = new ResizeObserver(relayout);
+  const ro = new ResizeObserver(() => relayout(!measured));
   ro.observe(root);
-  root.addEventListener("knobs-restyle", relayout);
+  const restyled = () => relayout(true);
+  root.addEventListener("knobs-restyle", restyled);
   const paneApi = (id) => {
     const v = views.get(id);
     if (!v)
@@ -3795,9 +6402,9 @@ function split(container, options) {
           v.titleEl.textContent = text;
         if (v.countEl && count !== undefined)
           v.countEl.textContent = String(count);
-        const label = v.rail?.querySelector("span");
-        if (label)
-          label.textContent = text;
+        if (v.railLabel)
+          v.railLabel.textContent = text;
+        measureChevrons(v);
       }
     };
   };
@@ -3832,7 +6439,7 @@ function split(container, options) {
       unregisterHints?.();
       loop.stop();
       ro.disconnect();
-      root.removeEventListener("knobs-restyle", relayout);
+      root.removeEventListener("knobs-restyle", restyled);
       host?.removeAttribute("data-nested");
       root.remove();
     }
@@ -3903,7 +6510,7 @@ function menu(anchor, items, options = {}) {
         const lead = doc.createElement("span");
         lead.className = "knobs-menu-lead";
         if (e.checked)
-          lead.innerHTML = e.radio ? RADIO : CHECK;
+          lead.innerHTML = e.radio ? RADIO : CHECK2;
         else if (e.icon) {
           if (e.icon.trimStart().startsWith("<"))
             lead.innerHTML = e.icon;
@@ -4241,7 +6848,7 @@ function contextMenu(target, items, options = {}) {
     }
   };
 }
-var CHECK = '<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5 6.5 11.5 12.5 4.5"/></svg>';
+var CHECK2 = '<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5 6.5 11.5 12.5 4.5"/></svg>';
 var RADIO = '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3" fill="currentColor"/></svg>';
 
 // src/ui/timeline-model.ts
@@ -4632,7 +7239,7 @@ function timeline(container, options) {
     renderHead();
   };
   const syncPlay = () => {
-    playBtn.innerHTML = playing ? PAUSE : PLAY;
+    playBtn.innerHTML = playing ? PAUSE : PLAY2;
     playBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
     root.toggleAttribute("data-playing", playing);
   };
@@ -5243,7 +7850,7 @@ function timeline(container, options) {
   };
   return api;
 }
-var PLAY = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>';
+var PLAY2 = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>';
 var PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
 
 // src/ui/tree-model.ts
@@ -5502,7 +8109,7 @@ function tree(container, options) {
   let index = indexTree(items, access);
   const renamed = new Map;
   const root = doc.createElement("div");
-  root.className = "knobs-tree";
+  root.className = "knobs-tree knobs-scroll-fade";
   root.tabIndex = 0;
   root.setAttribute("role", "tree");
   root.setAttribute("aria-multiselectable", "true");
@@ -5568,7 +8175,7 @@ function tree(container, options) {
     const icon = doc.createElement("span");
     icon.className = "knobs-tree-icon";
     const label = doc.createElement("span");
-    label.className = "knobs-tree-label";
+    label.className = "knobs-tree-label knobs-scroll-fade-x";
     const text = doc.createElement("span");
     text.className = "knobs-tree-text";
     label.append(text);
@@ -6130,6 +8737,8 @@ function tree(container, options) {
     const rule = options.typeahead ?? true;
     if (rule === false)
       return false;
+    if (!(running && typed !== "") && !/^[\p{L}\p{N}]$/u.test(key))
+      return false;
     if (!(running && typed !== "") && options.hints !== false && claimsHintKey(doc, key))
       return false;
     return rule === true || running && typed !== "" || rule(key);
@@ -6381,6 +8990,15 @@ function builtinIcon(id, on) {
 // src/ui/react.tsx
 import { jsx } from "react/jsx-runtime";
 "use client";
+function useFollow(values, apply) {
+  const changes = useRef(null);
+  changes.current ??= propChanges(values);
+  useEffect(() => {
+    const changed = changes.current(values);
+    if (anyChanged(changed))
+      apply(changed);
+  });
+}
 function Split(props) {
   const ref = useRef(null);
   const [handle, setHandle] = useState(null);
@@ -6432,25 +9050,17 @@ function Tree(props) {
       handle.current = null;
     };
   }, []);
-  const first = useRef(true);
-  useEffect(() => {
-    if (first.current)
-      return;
-    handle.current?.update(props.items);
-  }, [props.items]);
-  useEffect(() => {
-    if (first.current || !props.selection)
-      return;
-    handle.current?.select(props.selection);
-  }, [props.selection]);
-  useEffect(() => {
-    if (first.current)
+  useFollow({ items: props.items, filter: props.filter, selection: props.selection }, (c) => {
+    const t = handle.current;
+    if (!t)
       return;
-    handle.current?.filter(props.filter);
-  }, [props.filter]);
-  useEffect(() => {
-    first.current = false;
-  }, []);
+    if ("items" in c)
+      t.update(c.items);
+    if ("filter" in c)
+      t.filter(c.filter);
+    if (c.selection)
+      t.select(c.selection);
+  });
   return /* @__PURE__ */ jsx("div", {
     ref,
     className: props.className,
@@ -6478,33 +9088,21 @@ function Timeline(props) {
       handle.current = null;
     };
   }, []);
-  const first = useRef(true);
-  const follow = (key) => useEffect(() => {
+  useFollow({
+    duration: props.duration,
+    fps: props.fps,
+    units: props.units,
+    speed: props.speed,
+    markers: props.markers,
+    ranges: props.ranges,
+    time: props.time,
+    playing: props.playing
+  }, (c) => {
     const t = handle.current;
-    const value = props[key];
-    if (first.current || !t || value === undefined)
-      return;
-    if (key === "time" && Math.abs(value - t.time) < 0.000001)
-      return;
-    if (key === "playing" && value === t.playing)
-      return;
-    if (key === "markers" && value === t.markers)
-      return;
-    if (key === "ranges" && value === t.ranges)
-      return;
-    t.update({ [key]: value });
-  }, [props[key]]);
-  follow("time");
-  follow("playing");
-  follow("markers");
-  follow("ranges");
-  follow("duration");
-  follow("fps");
-  follow("units");
-  follow("speed");
-  useEffect(() => {
-    first.current = false;
-  }, []);
+    const next = t && timelineChanges(t, c);
+    if (t && next && anyChanged(next))
+      t.update(next);
+  });
   return /* @__PURE__ */ jsx("div", {
     ref,
     className: props.className,
@@ -6530,28 +9128,102 @@ function Bento(props) {
       handle.current = null;
     };
   }, []);
-  const first = useRef(true);
-  useEffect(() => {
-    if (first.current)
-      return;
-    handle.current?.update(props.items);
-  }, [props.items]);
-  useEffect(() => {
-    if (first.current || !props.picks)
+  useFollow({ items: props.items, picks: props.picks }, (c) => {
+    const b = handle.current;
+    if (!b)
       return;
-    handle.current?.pick(props.picks);
-  }, [props.picks]);
-  useEffect(() => {
-    first.current = false;
+    if ("items" in c)
+      b.update(c.items);
+    if (c.picks)
+      b.pick(c.picks);
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: props.className,
+    style: { height: "100%", ...props.style }
+  });
+}
+function Activity(props) {
+  const ref = useRef(null);
+  const handle = useRef(null);
+  const latest = useRef(props);
+  latest.current = props;
+  useLayoutEffect(() => {
+    const p = latest.current;
+    const a = activity(ref.current, {
+      ...p,
+      onSelect: (id, event, source) => latest.current.onSelect?.(id, event, source),
+      onActivate: (id, event) => latest.current.onActivate?.(id, event),
+      onToggle: (id, open) => latest.current.onToggle?.(id, open),
+      onPlay: p.onPlay && ((id, event) => latest.current.onPlay?.(id, event))
+    });
+    handle.current = a;
+    p.onReady?.(a);
+    return () => {
+      a.destroy();
+      handle.current = null;
+    };
   }, []);
+  useFollow({ events: props.events, newest: props.newest, selected: props.selected }, (c) => {
+    const a = handle.current;
+    if (!a)
+      return;
+    if (c.events || c.newest)
+      a.update({ events: c.events, newest: c.newest });
+    if (c.selected !== undefined && c.selected !== a.selected)
+      a.select(c.selected);
+  });
   return /* @__PURE__ */ jsx("div", {
     ref,
     className: props.className,
     style: { height: "100%", ...props.style }
   });
 }
+function OptionPicker(props) {
+  const ref = useRef(null);
+  const handle = useRef(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const [bodies, setBodies] = useState([]);
+  useLayoutEffect(() => {
+    const p = optionPicker(ref.current, {
+      ...latest.current,
+      onSelect: (id, source) => latest.current.onSelect?.(id, source),
+      onChoose: (id) => latest.current.onChoose?.(id),
+      body: (option, el) => {
+        setBodies((all) => [...all, { option, el }]);
+        return () => setBodies((all) => all.filter((b) => b.el !== el));
+      }
+    });
+    handle.current = p;
+    latest.current.onReady?.(p);
+    return () => {
+      p.destroy();
+      handle.current = null;
+    };
+  }, []);
+  useFollow({ options: props.options, selected: props.selected, chosen: props.chosen }, (c) => {
+    const p = handle.current;
+    if (!p)
+      return;
+    if ("options" in c)
+      p.set(c.options);
+    if (c.selected != null)
+      p.select(c.selected);
+    if ("chosen" in c)
+      p.choose(c.chosen ?? null);
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: props.className,
+    style: props.style,
+    children: props.children && bodies.map(({ option, el }) => createPortal(props.children(option), el, option.id))
+  });
+}
 export {
+  Activity,
   Bento,
+  OptionPicker,
   Split,
   Timeline,
   Tree