@kitlangton/knobs 0.1.0 → 0.3.0

package/dist/dev/{chunk-kdewv0mt.js → chunk-pmkvb9ep.js}

@@ -1,10 +1,11 @@
 import {
+  isTypingTarget,
   GRADIENT_SAMPLES,
   Spring,
   springEasing,
   springCss2,
   storageKey
-} from "./chunk-qtt698hp.js";
+} from "./chunk-7xgkerd2.js";
 
 // src/panel/icons.ts
 var ICONS = {
@@ -62,130 +63,6 @@ function writeSession(id, patch) {
   } catch {}
 }
 
-// src/panel/motion.ts
-var FILL = { omega: 30, zeta: 0.88 };
-var LEAD = { omega: 34, zeta: 0.86 }, TRAIL = { omega: 25, zeta: 1 }, trailScale = (blur) => 0.6 + 0.4 * clamp(blur, 0, 2);
-
-class Edges {
-  start;
-  end;
-  constructor(start = 0, end = 0) {
-    this.start = new Spring(start, LEAD.omega, LEAD.zeta, 0.05), this.end = new Spring(end, LEAD.omega, LEAD.zeta, 0.05);
-  }
-  to(start, end, delay = 0, trail = 1) {
-    if ((start !== this.start.target || end !== this.end.target) && delay <= 0) {
-      let forward = start + end > this.start.target + this.end.target, [lead, tail] = forward ? [this.end, this.start] : [this.start, this.end];
-      lead.omega = LEAD.omega, lead.zeta = LEAD.zeta, tail.omega = TRAIL.omega / trail, tail.zeta = TRAIL.zeta;
-    }
-    return this.start.set(start, delay), this.end.set(end, delay), this;
-  }
-  shift(ds, de) {
-    return this.start.x += ds, this.start.target += ds, this.end.x += de, this.end.target += de, this;
-  }
-  snap(start, end) {
-    return this.start.snap(start), this.end.snap(end), this;
-  }
-  step(dt) {
-    return this.start.step(dt), this.end.step(dt), this;
-  }
-  get resting() {
-    return this.start.resting && this.end.resting;
-  }
-  get velocity() {
-    return (this.start.v + this.end.v) / 2;
-  }
-}
-var POP_MS = 360;
-function popScale(t, peak = 0.04) {
-  if (t <= 0 || t >= POP_MS)
-    return 1;
-  let u = t / 55;
-  return 1 + peak * u * Math.exp(1 - u);
-}
-
-class VelocityTracker {
-  samples = [];
-  add(x, y, t = performance.now()) {
-    this.samples.push({ t, x, y });
-    while (this.samples.length > 2 && t - this.samples[0].t > 100)
-      this.samples.shift();
-  }
-  reset() {
-    this.samples = [];
-  }
-  get velocity() {
-    let s = this.samples;
-    if (s.length < 2)
-      return [0, 0];
-    let a = s[0], b = s[s.length - 1], dt = (b.t - a.t) / 1000;
-    if (dt <= 0 || performance.now() - b.t > 60)
-      return [0, 0];
-    return [(b.x - a.x) / dt, (b.y - a.y) / dt];
-  }
-}
-var clamp = (x, a, b) => Math.min(b, Math.max(a, x));
-
-class Roll {
-  from;
-  to = 0;
-  inherited = 0;
-  start = 0;
-  duration = 0;
-  constructor(position) {
-    this.from = this.to = position;
-  }
-  get target() {
-    return this.to;
-  }
-  sample(now) {
-    let t = now - this.start;
-    if (this.duration <= 0 || t >= this.duration)
-      return { position: this.to, velocity: 0 };
-    if (t <= 0)
-      return { position: this.from, velocity: 0 };
-    let seconds = this.duration / 1000, tau = t / this.duration, d = this.from - this.to, e = Math.exp(-10 * tau);
-    return {
-      position: this.to + (d + (this.inherited + 10 * d) * tau) * e,
-      velocity: e * (this.inherited - 10 * (this.inherited + 10 * d) * tau) / seconds
-    };
-  }
-  set(target, duration, now, delay = 0) {
-    let { position, velocity } = this.sample(now);
-    if (duration <= 0)
-      return this.snap(target);
-    let seconds = duration / 1000, distance = position - target, limit = Math.max(Math.abs(distance), 1) * 12 / seconds;
-    return this.inherited = clamp(delay > 0 ? 0 : velocity, -limit, limit) * seconds, this.from = position, this.to = target, this.start = now + delay, this.duration = duration, this;
-  }
-  snap(position) {
-    return this.from = this.to = position, this.duration = 0, this.inherited = 0, this;
-  }
-  resting(now) {
-    return this.duration <= 0 || now - this.start >= this.duration;
-  }
-  span(now) {
-    if (this.resting(now))
-      return [this.to, this.to];
-    return [Math.min(this.from, this.to), Math.max(this.from, this.to)];
-  }
-}
-function rollTarget(position, digit, trend) {
-  let target = Math.floor(position / 10) * 10 + digit;
-  if (trend > 0 && target < position - 0.001)
-    target += 10;
-  else if (trend < 0 && target > position + 0.001)
-    target -= 10;
-  else if (trend === 0)
-    target += Math.round((position - target) / 10) * 10;
-  return target;
-}
-var numeral = (position) => String((position % 10 + 10) % 10);
-function entranceOffset(elapsed, duration, hold = 0.14) {
-  if (duration <= 0 || elapsed >= duration)
-    return 0;
-  let p = clamp((elapsed / duration - hold) / (1 - hold), 0, 1);
-  return (1 + 10 * p) * Math.exp(-10 * p);
-}
-
 // src/panel/rolling-css.ts
 var rolling_css_default = `.rn-root {
   display: inline-block;
@@ -376,8 +253,428 @@ var problemsPreset = {
   }
 };
 
+// src/panel/motion.ts
+var FILL = { omega: 30, zeta: 0.88 };
+var LEAD = { omega: 34, zeta: 0.86 }, TRAIL = { omega: 25, zeta: 1 }, trailScale = (blur) => 0.6 + 0.4 * clamp(blur, 0, 2);
+
+class Edges {
+  start;
+  end;
+  constructor(start = 0, end = 0) {
+    this.start = new Spring(start, LEAD.omega, LEAD.zeta, 0.05), this.end = new Spring(end, LEAD.omega, LEAD.zeta, 0.05);
+  }
+  to(start, end, delay = 0, trail = 1) {
+    if ((start !== this.start.target || end !== this.end.target) && delay <= 0) {
+      let forward = start + end > this.start.target + this.end.target, [lead, tail] = forward ? [this.end, this.start] : [this.start, this.end];
+      lead.omega = LEAD.omega, lead.zeta = LEAD.zeta, tail.omega = TRAIL.omega / trail, tail.zeta = TRAIL.zeta;
+    }
+    return this.start.set(start, delay), this.end.set(end, delay), this;
+  }
+  shift(ds, de) {
+    return this.start.x += ds, this.start.target += ds, this.end.x += de, this.end.target += de, this;
+  }
+  snap(start, end) {
+    return this.start.snap(start), this.end.snap(end), this;
+  }
+  step(dt) {
+    return this.start.step(dt), this.end.step(dt), this;
+  }
+  get resting() {
+    return this.start.resting && this.end.resting;
+  }
+  get velocity() {
+    return (this.start.v + this.end.v) / 2;
+  }
+}
+var POP_MS = 360;
+function popScale(t, peak = 0.04) {
+  if (t <= 0 || t >= POP_MS)
+    return 1;
+  let u = t / 55;
+  return 1 + peak * u * Math.exp(1 - u);
+}
+var settleScale = (t) => popScale(t, 0.14);
+
+class VelocityTracker {
+  samples = [];
+  add(x, y, t = performance.now()) {
+    this.samples.push({ t, x, y });
+    while (this.samples.length > 2 && t - this.samples[0].t > 100)
+      this.samples.shift();
+  }
+  reset() {
+    this.samples = [];
+  }
+  get velocity() {
+    let s = this.samples;
+    if (s.length < 2)
+      return [0, 0];
+    let a = s[0], b = s[s.length - 1], dt = (b.t - a.t) / 1000;
+    if (dt <= 0 || performance.now() - b.t > 60)
+      return [0, 0];
+    return [(b.x - a.x) / dt, (b.y - a.y) / dt];
+  }
+}
+var clamp = (x, a, b) => Math.min(b, Math.max(a, x));
+
+class Roll {
+  from;
+  to = 0;
+  inherited = 0;
+  start = 0;
+  duration = 0;
+  constructor(position) {
+    this.from = this.to = position;
+  }
+  get target() {
+    return this.to;
+  }
+  sample(now) {
+    let t = now - this.start;
+    if (this.duration <= 0 || t >= this.duration)
+      return { position: this.to, velocity: 0 };
+    if (t <= 0)
+      return { position: this.from, velocity: 0 };
+    let seconds = this.duration / 1000, tau = t / this.duration, d = this.from - this.to, e = Math.exp(-10 * tau);
+    return {
+      position: this.to + (d + (this.inherited + 10 * d) * tau) * e,
+      velocity: e * (this.inherited - 10 * (this.inherited + 10 * d) * tau) / seconds
+    };
+  }
+  set(target, duration, now, delay = 0) {
+    let { position, velocity } = this.sample(now);
+    if (duration <= 0)
+      return this.snap(target);
+    let seconds = duration / 1000, distance = position - target, limit = Math.max(Math.abs(distance), 1) * 12 / seconds;
+    return this.inherited = clamp(delay > 0 ? 0 : velocity, -limit, limit) * seconds, this.from = position, this.to = target, this.start = now + delay, this.duration = duration, this;
+  }
+  snap(position) {
+    return this.from = this.to = position, this.duration = 0, this.inherited = 0, this;
+  }
+  resting(now) {
+    return this.duration <= 0 || now - this.start >= this.duration;
+  }
+  span(now) {
+    if (this.resting(now))
+      return [this.to, this.to];
+    return [Math.min(this.from, this.to), Math.max(this.from, this.to)];
+  }
+}
+function rollTarget(position, digit, trend) {
+  let target = Math.floor(position / 10) * 10 + digit;
+  if (trend > 0 && target < position - 0.001)
+    target += 10;
+  else if (trend < 0 && target > position + 0.001)
+    target -= 10;
+  else if (trend === 0)
+    target += Math.round((position - target) / 10) * 10;
+  return target;
+}
+var numeral = (position) => String((position % 10 + 10) % 10);
+function entranceOffset(elapsed, duration, hold = 0.14) {
+  if (duration <= 0 || elapsed >= duration)
+    return 0;
+  let p = clamp((elapsed / duration - hold) / (1 - hold), 0, 1);
+  return (1 + 10 * p) * Math.exp(-10 * p);
+}
+
+// src/panel/flash.ts
+var FLASH_MS = 320, flashes = /* @__PURE__ */ new WeakMap;
+function flash(button, wake) {
+  if (!button || button.hidden)
+    return;
+  flashes.set(button, button.ownerDocument.defaultView?.performance.now() ?? performance.now()), button.dataset.kFlash = button.dataset.kFlash === "a" ? "b" : "a", wake?.();
+}
+function flashOf(button, now) {
+  let at = flashes.get(button);
+  if (at === void 0)
+    return 0;
+  let p = (now - at) / 320;
+  if (p >= 1 || p < 0)
+    return 0;
+  return (1 - p) ** 3;
+}
+
+// src/panel/feel.ts
+var clamp2 = (x, a, b) => Math.min(b, Math.max(a, x)), smooth = (a, b, x) => {
+  let t = clamp2((x - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+}, PRECISION = [
+  [24, 44],
+  [76, 96],
+  [126, 146]
+], offRow = (y, top, bottom) => Math.max(0, top - y, y - bottom), precisionDepth = (off) => PRECISION.reduce((n, [a, b]) => n + smooth(a, b, Math.abs(off)), 0), precisionRate = (off) => 2 ** -precisionDepth(off), RULER = [
+  [20, 5, 0.2],
+  [40, 4, 0.17],
+  [80, 3, 0.14]
+], RULER_NEAR = 36, RULER_FADE = 120, rulerLevels = (steps) => {
+  let n = 0;
+  while (n < 3 && 10 * 2 ** (n + 1) <= steps)
+    n++;
+  return n;
+}, rulerAlpha = (depth, level) => clamp2(depth - (level - 1), 0, 1), rulerDepth = (rate, levels) => rate >= 1 ? 0 : clamp2(-Math.log2(rate), 0, levels), THIN = 1.7, THINNEST = 0.85, thinOf = (scale) => Math.max(0.85, 1 - 1.7 * Math.max(0, scale - 1));
+var roundOf = (give) => clamp2(Math.abs(give) / 4, 0, 1), stretchOf = (give, length) => ({
+  scale: length > 0 ? 1 + Math.abs(give) / length : 1,
+  anchor: give < 0 ? 1 : 0
+}), stretchAt = (at, give, length) => {
+  let { scale, anchor } = stretchOf(give, length), o = anchor * length;
+  return o + (at - o) * scale;
+}, giveRoom = (room, most) => Math.max(0.5, Math.min(most, room)), DETENTS = {
+  default: { hold: 4, ramp: 6 },
+  base: { hold: 4, ramp: 6 },
+  round: { hold: 2.5, ramp: 4 }
+}, detentScale = (rate) => clamp2(rate, 0, 1) ** 1.5, reach = (d, k = 1) => {
+  let { hold, ramp } = DETENTS[d.kind];
+  return { h: hold * k, r: ramp * k };
+};
+function detentsOf(width, min, max, o) {
+  let span = max - min;
+  if (!(span > 0) || !(width > 0))
+    return [];
+  let list = [], add = (value, kind) => {
+    if (value === void 0 || !Number.isFinite(value) || value < min || value > max)
+      return;
+    let at = (value - min) / span * width, room = (d) => {
+      let a = reach(d), b = DETENTS[kind];
+      return a.h + a.r + b.hold + b.ramp;
+    };
+    if (list.some((d) => Math.abs(d.at - at) < room(d)))
+      return;
+    list.push({ at, value, kind });
+  };
+  add(o.value, "default"), add(o.base, "base");
+  for (let v of o.round ?? [])
+    add(v, "round");
+  return list;
+}
+var roundValues = (min, max) => {
+  let mid = Number(((min + max) / 2).toPrecision(12));
+  return min < 0 && max > 0 && mid !== 0 ? [0, mid] : [mid];
+};
+function warp(x, list, k = 1) {
+  for (let d of list) {
+    let { h, r } = reach(d, k), u = x - d.at, a = Math.abs(u);
+    if (a >= h + r)
+      continue;
+    if (a <= h)
+      return d.at;
+    return d.at + Math.sign(u) * (a - h) * (h + r) / r;
+  }
+  return x;
+}
+function unwarp(shown, x, list, k = 1) {
+  for (let d of list) {
+    let { h, r } = reach(d, k), v = shown - d.at, a = Math.abs(v);
+    if (a >= h + r)
+      continue;
+    if (a === 0)
+      return d.at + clamp2(x - d.at, -h, h);
+    return d.at + Math.sign(v) * (h + a * r / (h + r));
+  }
+  return shown;
+}
+var REARM = 2;
+
+class Notches {
+  list;
+  held = -1;
+  armed;
+  constructor(list, x) {
+    this.list = list;
+    this.armed = list.map((d) => Math.abs(x - d.at) > REARM), this.held = list.findIndex((d) => warp(x, [d]) === d.at);
+  }
+  move(x, k = 1) {
+    let shown = warp(x, this.list, k), held = this.list.findIndex((d) => d.at === shown), caught;
+    if (this.list.forEach((d, i) => {
+      let { h, r } = reach(d, k);
+      if (Math.abs(x - d.at) > Math.max(h + r, REARM))
+        this.armed[i] = !0;
+    }), held >= 0 && held !== this.held && this.armed[held])
+      caught = this.list[held], this.armed[held] = !1;
+    return this.held = held, caught ? { shown, caught } : { shown };
+  }
+}
+
+// src/panel/scope.ts
+function escapeTo(level, inCard = !0) {
+  if (level === "row")
+    return inCard ? "card" : "panel";
+  if (level === "card")
+    return "panel";
+  return "none";
+}
+function commandScope(level, selection = !1) {
+  if (selection)
+    return "selection";
+  if (level === "row")
+    return "row";
+  if (level === "card")
+    return "group";
+  return "all";
+}
+function scopeLabel(verb, scope) {
+  return `${verb} ${scope === "selection" ? "selected" : scope === "row" ? "this" : scope === "group" ? "group" : "all"}`;
+}
+function crumbTrail(path) {
+  let out = [];
+  for (let level of ["card", "row", "editor"]) {
+    let label = path[level]?.trim();
+    if (label)
+      out.push({ level, label });
+  }
+  return out;
+}
+function escTarget(trail, title) {
+  if (!trail.length)
+    return;
+  return trail.at(-2)?.label ?? (title.trim() || "panel");
+}
+function fitCrumbs(widths, room, sep, more, hint = 0) {
+  let n = widths.length;
+  if (!n)
+    return { from: 0, hint: !1 };
+  let span = (from) => {
+    let w = 0;
+    for (let i = from;i < n; i++)
+      w += widths[i] + (i > from ? sep : 0);
+    return from > 0 ? w + more + sep : w;
+  }, from = 0;
+  while (from < n - 1 && span(from) > room)
+    from++;
+  let used = span(from);
+  return { from, hint: hint > 0 && used + sep + hint <= room };
+}
+function digitOption(key, count) {
+  if (!/^[1-9]$/.test(key))
+    return;
+  let i = Number(key) - 1;
+  return i < count ? i : void 0;
+}
+function digitHints(count, showing) {
+  let n = Math.min(9, count);
+  if (n <= 0)
+    return [];
+  if (showing)
+    return Array.from({ length: n }, (_, i) => String(i + 1));
+  return [n === 1 ? "1" : `1–${n}`];
+}
+
+// src/panel/crumbs.ts
+var glide2 = springEasing(2 * Math.PI / 0.3, 1), CRUMB_GLIDE = `${glide2.ms}ms ${glide2.easing}`, SLIDE = 5, GAP = 6, HINT_GAP = 10, SEP = "›";
+function createCrumbs(o) {
+  let doc = o.header.ownerDocument, element = doc.createElement("div");
+  element.className = "knobs-crumbs", element.setAttribute("aria-hidden", "true"), o.header.append(element);
+  let live = /* @__PURE__ */ new Map, trail = [], esc, hinting = !1, ctx, width = (text) => {
+    if (ctx === void 0)
+      ctx = doc.createElement("canvas").getContext("2d");
+    if (!ctx)
+      return text.length * 6;
+    let cs = getComputedStyle(element);
+    return ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`, ctx.measureText(text).width;
+  }, titleEnd = (head) => {
+    let t = o.title.getBoundingClientRect();
+    if (!o.title.textContent)
+      return { x: t.left - head.left, right: t.right - head.left, t };
+    let range = doc.createRange();
+    range.selectNodeContents(o.title);
+    let r = range.getBoundingClientRect();
+    return { x: Math.min(r.right, t.right) - head.left + GAP, right: t.right - head.left, t };
+  }, build = () => {
+    if (!trail.length)
+      return { pieces: [], xs: [] };
+    let head = o.header.getBoundingClientRect(), { x, right } = titleEnd(head), sepW = width(SEP) + GAP * 2, escText = esc ? `esc ↑ ${esc}` : "", fit = fitCrumbs(trail.map((c) => width(c.label)), Math.max(0, right - x - sepW), sepW, width("…"), escText ? width(escText) + HINT_GAP - sepW : 0), pieces = [{ key: "sep:lead", text: SEP, kind: "sep" }];
+    if (fit.from > 0)
+      pieces.push({ key: "more", text: "…", kind: "more" }, { key: "sep:more", text: SEP, kind: "sep" });
+    if (trail.forEach((c, i) => {
+      if (i < fit.from)
+        return;
+      if (i > fit.from)
+        pieces.push({ key: `sep:${c.level}`, text: SEP, kind: "sep" });
+      pieces.push({
+        key: `${c.level}:${c.label}`,
+        text: c.label,
+        kind: "crumb",
+        level: c.level,
+        deep: i === trail.length - 1
+      });
+    }), escText && fit.hint)
+      pieces.push({ key: `esc:${esc}`, text: escText, kind: "esc" });
+    let xs = [], at = x;
+    for (let p of pieces) {
+      if (p.kind === "esc")
+        at += HINT_GAP - GAP;
+      xs.push(at), at += width(p.text) + (p.kind === "sep" ? GAP : p.kind === "esc" ? 0 : GAP);
+    }
+    return { pieces, xs };
+  }, place = () => {
+    let head = o.header.getBoundingClientRect(), t = o.title.getBoundingClientRect();
+    element.style.top = `${(t.top - head.top + t.height / 2).toFixed(2)}px`;
+  }, leave = (key, node, x) => {
+    if (live.delete(key), node.dataset.leaving = "", node.style.opacity = "0", !o.reduced())
+      node.style.translate = `${(x - SLIDE).toFixed(2)}px -50%`;
+    setTimeout(() => node.remove(), 320);
+  }, render = () => {
+    place();
+    let { pieces, xs } = build(), keep = new Set(pieces.map((p) => p.key));
+    for (let [key, node] of live)
+      if (!keep.has(key))
+        leave(key, node, parseFloat(node.dataset.x ?? "0"));
+    let reduced = o.reduced();
+    pieces.forEach((p, i) => {
+      let x = xs[i], node = live.get(p.key);
+      if (!node) {
+        if (node = doc.createElement("span"), node.className = `knobs-crumb-${p.kind}`, node.textContent = p.text, p.level)
+          node.dataset.level = p.level;
+        node.style.opacity = "0", node.style.translate = `${(x + (reduced ? 0 : SLIDE)).toFixed(2)}px -50%`, element.append(node), live.set(p.key, node), node.getBoundingClientRect();
+      }
+      node.dataset.x = String(x), node.toggleAttribute("data-deep", Boolean(p.deep)), node.style.translate = `${x.toFixed(2)}px -50%`, node.style.opacity = p.kind === "esc" && !hinting ? "0" : "1";
+    }), o.wake();
+  }, onDown = (event) => {
+    if (!event.target.closest?.("[data-level]"))
+      return;
+    event.preventDefault(), event.stopPropagation();
+  }, onClick = (event) => {
+    let node = event.target.closest?.("[data-level]");
+    if (!node || "leaving" in node.dataset)
+      return;
+    event.stopPropagation(), o.jump(node.dataset.level);
+  };
+  element.addEventListener("pointerdown", onDown), element.addEventListener("mousedown", onDown), element.addEventListener("click", onClick);
+  let size = "", sizes = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(() => {
+    let r = o.title.getBoundingClientRect(), next = `${r.width}|${r.height}|${o.title.textContent}`;
+    if (next === size)
+      return;
+    if (size = next, trail.length)
+      render();
+  });
+  return sizes?.observe(o.header), sizes?.observe(o.title), {
+    element,
+    set(next, nextEsc) {
+      if (next.length === trail.length && next.every((c, i) => c.level === trail[i].level && c.label === trail[i].label) && nextEsc === esc)
+        return;
+      trail = next, esc = nextEsc, render();
+    },
+    hint(on) {
+      if (on === hinting)
+        return;
+      hinting = on;
+      for (let [key, node] of live)
+        if (key.startsWith("esc:"))
+          node.style.opacity = on ? "1" : "0";
+      o.wake();
+    },
+    layout() {
+      if (trail.length)
+        render();
+    },
+    dispose() {
+      sizes?.disconnect(), element.remove();
+    }
+  };
+}
+
 // src/panel/styles.ts
-var lead = springEasing(LEAD.omega, LEAD.zeta), trail = springEasing(TRAIL.omega, TRAIL.zeta), fill = springEasing(FILL.omega, FILL.zeta), LEAD_T = `${lead.ms}ms var(--k-lead)`, TRAIL_T = `calc(${trail.ms}ms * (.6 + .4 * clamp(0, var(--k-blur), 2))) var(--k-trail)`, FILL_T = "calc(var(--k-fill-ms) * 1ms * clamp(var(--k-blur),.1,2)) var(--k-fill-ease)", SLIDE_T = "calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)", DELAY = "var(--k-delay,0ms)", POINTER_ROW = ".knobs-panel[data-k-row-hover]:not([data-keyboard])", DELAYED = ".knobs-fill,.knobs-handle,.knobs-seg-pill,.knobs-toggle,.knobs-toggle i,.knobs-arm,.knobs-curve,.knobs-swatch,.knobs-strip-thumb,.knobs-pad>i,.knobs-ease-handle,.knobs-range-fill,.knobs-range-thumb,.knobs-dial-hand,.knobs-grad,.knobs-grad-mini,.knobs-grad-mini>i,.knobs-grad-stop,.knobs-graph-pt", GRAD_N = GRADIENT_SAMPLES, gradStops = (at) => Array.from({ length: GRAD_N }, (_, i) => `var(--kgrad-${i}) ${at(i)}`).join(","), GRAD_STRIP = `linear-gradient(to right,${gradStops((i) => `calc(var(--kg-r) + (100% - var(--kg-r) * 2) * ${Number((i / (GRAD_N - 1)).toFixed(5))})`)})`, GRAD_MINI = `linear-gradient(to right,${gradStops((i) => `${Number((i / (GRAD_N - 1) * 100).toFixed(3))}%`)})`, GRAD_T = Array.from({ length: GRAD_N }, (_, i) => `--kgrad-${i} ${FILL_T} ${DELAY}`).join(","), GRAD_PROPS = Array.from({ length: GRAD_N }, (_, i) => `@property --kgrad-${i}{syntax:"<color>";inherits:false;initial-value:transparent}`).join(`
+var lead = springEasing(LEAD.omega, LEAD.zeta), trail = springEasing(TRAIL.omega, TRAIL.zeta), fill = springEasing(FILL.omega, FILL.zeta), LEAD_T = `${lead.ms}ms var(--k-lead)`, TRAIL_T = `calc(${trail.ms}ms * (.6 + .4 * clamp(0, var(--k-blur), 2))) var(--k-trail)`, FILL_T = "calc(var(--k-fill-ms) * 1ms * clamp(var(--k-blur),.1,2)) var(--k-fill-ease)", SLIDE_T = "calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)", snappy = springEasing(2 * Math.PI / 0.25, 1), snappyOut = springEasing(2 * Math.PI / 0.2, 1), BLOOM_IN = `${snappy.ms}ms ${snappy.easing}`, BLOOM_OUT = `${snappyOut.ms}ms ${snappyOut.easing}`, DELAY = "var(--k-delay,0ms)", armed = springEasing(2 * Math.PI / 0.3, 1), ARMED_T = `${armed.ms}ms ${armed.easing}`, POINTER_ROW = ".knobs-panel[data-k-row-hover]:not([data-keyboard])", DELAYED = ".knobs-fill,.knobs-handle,.knobs-seg-pill,.knobs-toggle,.knobs-toggle i,.knobs-arm,.knobs-curve,.knobs-swatch,.knobs-strip-thumb,.knobs-pad>i,.knobs-ease-handle,.knobs-range-track,.knobs-range-fill,.knobs-range-thumb,.knobs-dial-hand,.knobs-grad,.knobs-grad-mini,.knobs-grad-mini>i,.knobs-grad-stop,.knobs-graph-pt", GRAD_N = GRADIENT_SAMPLES, gradStops = (at) => Array.from({ length: GRAD_N }, (_, i) => `var(--kgrad-${i}) ${at(i)}`).join(","), GRAD_STRIP = `linear-gradient(to right,${gradStops((i) => `calc(var(--kg-r) + (100% - var(--kg-r) * 2) * ${Number((i / (GRAD_N - 1)).toFixed(5))})`)})`, GRAD_MINI = `linear-gradient(to right,${gradStops((i) => `${Number((i / (GRAD_N - 1) * 100).toFixed(3))}%`)})`, GRAD_PROPS = Array.from({ length: GRAD_N }, (_, i) => `@property --kgrad-${i}{syntax:"<color>";inherits:false;initial-value:transparent}`).join(`
 `), COLOR_TOKENS = [
   "bg",
   "surface",
@@ -413,8 +710,13 @@ ${register(["width"], "<length-percentage>", "288px")}
 @property --k-copy{syntax:"<number>";inherits:true;initial-value:1}
 @property --k-check{syntax:"<number>";inherits:true;initial-value:0}
 @property --k-check-a{syntax:"<number>";inherits:true;initial-value:0}
+@property --k-head-s{syntax:"<number>";inherits:true;initial-value:0}
+@property --k-head-v{syntax:"<number>";inherits:true;initial-value:0}
 @property --kc-value-size{syntax:"<length>";inherits:true;initial-value:11.5px}
+@property --k-armed{syntax:"<number>";inherits:false;initial-value:0}
 @property --kr-lo{syntax:"<number>";inherits:true;initial-value:0}
+@property --kpt-sel{syntax:"<number>";inherits:false;initial-value:1}
+@property --kgs-sel{syntax:"<number>";inherits:false;initial-value:1}
 @property --kr-hi{syntax:"<number>";inherits:true;initial-value:0}
 @property --kr-show-lo{syntax:"<number>";inherits:true;initial-value:0}
 @property --kr-show-hi{syntax:"<number>";inherits:true;initial-value:0}
@@ -431,8 +733,10 @@ ${GRAD_PROPS}
   --k-mono:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
   --k-spring:0.24 0.16;--k-ease:cubic-bezier(.2,.8,.2,1);--k-reveal-ease:var(--k-ease);
   --k-font-weight:400;--k-title-weight:600;--k-thumb:#fff;--k-lift:1;--k-frame:card;
-  --k-row-gap:0px;--k-hover-in:150;--k-hover-out:150;--k-fill-base:var(--k-surface-hi);--k-fill-rest-mix:20%;--k-fill-hover-mix:var(--k-fill-rest-mix);--k-fill-active-mix:30%;--k-chrome:1;--k-handle:var(--k-accent);--k-handle-inset:0px;--k-handle-rest:0;--k-step-resist:0.25;--k-motion-blur:0;--k-range-blur:.5;--k-group-transform:uppercase;--k-value-font:var(--k-font);
+  --k-row-gap:0px;--k-hover-in:0;--k-hover-out:120;--k-fill-base:var(--k-surface-hi);--k-fill-rest-mix:20%;--k-fill-hover-mix:var(--k-fill-rest-mix);--k-fill-active-mix:30%;--k-chrome:1;--k-handle:var(--k-accent);--k-handle-inset:0px;--k-handle-rest:0;--k-step-resist:0.25;--k-motion-blur:0;--k-range-blur:.5;--k-curve-blur:.5;--k-group-transform:uppercase;--k-value-font:var(--k-font);
   --k-lead:${lead.easing};--k-trail:${trail.easing};--k-fill-ease:${fill.easing};--k-fill-ms:${fill.ms};
+  --k-lens-ms:180;--k-lens-lead:1;--k-lens-wash:.9;--k-lens-line:.65;--k-lens-panel-wash:.35;--k-lens-inset:0px;--k-lens-panel-inset:0px;
+  --k-armed-edge:.1;--k-armed-glow:0;--k-armed-glow-a:0;--k-title-rest:.6;--k-esc-hint-ms:1800;
 }
 /* Glass edges are hairlines: --k-rim-width is one device pixel at common pixel ratios. */
 @media(min-resolution:1.5dppx){:where(:root,:host){--k-rim-width:.67px}}
@@ -498,7 +802,7 @@ ${GRAD_PROPS}
 .knobs-panel,.knobs-chip,.knobs-menu{letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-decoration:none;font-style:normal;font-variant:normal;font-feature-settings:normal;font-kerning:auto;white-space:normal;direction:ltr;margin:0;float:none}
 :where(.knobs-panel,.knobs-chip) :where(*,*::before,*::after){box-sizing:border-box}
 .knobs-panel .rn-slot{box-sizing:content-box}
-.knobs-panel [hidden],.knobs-chip[hidden]{display:none!important}
+.knobs-panel [hidden],.knobs-panel[hidden],.knobs-chip[hidden]{display:none!important}
 .knobs-mono{font-family:var(--k-mono);font-variant-numeric:tabular-nums}
 
 /* The chip: a round cog button, or a capsule with a label beside the cog. */
@@ -525,13 +829,17 @@ ${GRAD_PROPS}
 .knobs-panel,.knobs-chip{--k-token-t:calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)}
 :root[data-knobs-scrub] .knobs-chip{--k-token-t:0s}
 :root[data-knobs-scrub] .knobs-panel{transition:none}
-@media(prefers-reduced-motion:reduce){.knobs-chip{--k-token-t:0s}.knobs-panel.knobs-panel{transition:none}}
+@media(prefers-reduced-motion:reduce){.knobs-chip{--k-token-t:0s}.knobs-panel.knobs-panel{transition:--k-armed .16s linear}}
+.knobs-panel[data-k-armed]{--k-armed:1}
 /* Panel material: --k-glass (0 opaque … 1 clearest) thins the surface over a blurred, saturated
    backdrop, toned toward the theme (--k-glass-tone dims it under dark panels) so text keeps its
    contrast. Its edge is a hairline (--k-edge, --k-rim-width wide) and a hairline of light (--k-rim)
    catches its top. */
-.knobs-panel{-webkit-user-select:none;user-select:none;transition:${TOKEN_TRANSITIONS};position:fixed;z-index:2147480001;width:var(--k-width);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--k-pad);
-  background:color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--k-panel-radius);box-shadow:var(--k-shadow),0 0 0 var(--k-rim-width) var(--k-edge),inset 0 var(--k-rim-width) 0 var(--k-rim);scrollbar-width:thin;
+.knobs-panel{-webkit-user-select:none;user-select:none;transition:${TOKEN_TRANSITIONS},--k-armed ${ARMED_T};position:fixed;z-index:2147480001;width:var(--k-width);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--k-pad);
+  background:color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--k-panel-radius);box-shadow:var(--k-shadow),0 0 0 var(--k-rim-width) var(--ka-edge),inset 0 var(--k-rim-width) 0 var(--k-rim),var(--ka-glow);scrollbar-width:thin;
+  /* Armed (focus inside: keys come here), the edge takes the accent and a faint glow lifts it. */
+  --ka-edge:color-mix(in srgb,var(--k-accent) calc(var(--k-armed) * var(--k-armed-edge) * 100%),var(--k-edge));
+  --ka-glow:0 0 calc(var(--k-armed-glow) * 1px) color-mix(in srgb,var(--k-accent) calc(var(--k-armed) * var(--k-armed-glow-a) * var(--k-chrome,1) * 100%),transparent);
   --k-backdrop:blur(calc(var(--k-glass) * 24px)) saturate(calc(1 + var(--k-glass) * .8)) brightness(calc(1 + (var(--k-glass-tone) - 1) * var(--k-glass)));
   -webkit-backdrop-filter:var(--k-backdrop);backdrop-filter:var(--k-backdrop);
   animation:knobs-in .16s var(--k-ease);}
@@ -549,14 +857,14 @@ ${GRAD_PROPS}
 .knobs-morph::after{box-shadow:var(--k-shadow);opacity:var(--p)}
 /* Meanwhile the chip is just its label, fading on the shape. */
 .knobs-chip.knobs-chip[data-morph]{visibility:visible;pointer-events:auto;transform:none;transition:none;background:transparent;border-color:transparent;box-shadow:none}
-.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 0 0 var(--k-rim-width) color-mix(in srgb,var(--k-edge) calc(var(--k-chrome) * 100%),transparent),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--k-rim) calc(var(--k-chrome) * 100%),transparent);animation:none;
+.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 0 0 var(--k-rim-width) color-mix(in srgb,var(--ka-edge) calc(var(--k-chrome) * 100%),transparent),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--k-rim) calc(var(--k-chrome) * 100%),transparent),var(--ka-glow);animation:none;
   /* --k-chrome 0: an embedded panel sheds its card (background, border, rim) for the host's column,
      border width too, so its rows line up with the column's edges. */
   border-width:calc(var(--k-chrome) * 1px);
   background:color-mix(in srgb,color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20%),transparent) calc(var(--k-chrome) * 100%),transparent);border-color:transparent;
   --k-backdrop:blur(calc(var(--k-glass) * var(--k-chrome) * 24px)) saturate(calc(1 + var(--k-glass) * var(--k-chrome) * .8)) brightness(calc(1 + (var(--k-glass-tone) - 1) * var(--k-glass) * var(--k-chrome)))}
 @keyframes knobs-in{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}
-@media(prefers-reduced-motion:reduce){.knobs-panel{animation:none}.knobs-panel *{transition:none!important}}
+@media(prefers-reduced-motion:reduce){.knobs-panel{animation:none}.knobs-panel *{transition:none!important}.knobs-keys .knobs-keys-text,.knobs-number,.knobs-cell-edit{animation:none}}
 
 /* A scoped reset, (0,1,1): above a host's element rules (button{...}, button:hover{...},
    input[type=text]{...}) and below every knobs rule that styles these elements, which are all
@@ -568,10 +876,48 @@ ${GRAD_PROPS}
 :is(.knobs-panel,.knobs-menu) :is(:focus,:focus-visible):where(:not(.knobs-accessory *)){outline:none}
 
 /* Header */
-.knobs-panel header{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:grab;touch-action:none;padding:0 var(--k-inset) var(--k-section-gap);min-height:var(--k-icon-btn)}
+.knobs-panel header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:grab;touch-action:none;padding:0 var(--k-inset) var(--k-section-gap);min-height:var(--k-icon-btn)}
 .knobs-panel.knobs-inline header,.knobs-panel.knobs-inline header:active{cursor:default}
+/* The title row stays pinned while the rows scroll under it, in the panel (it scrolls once it's
+   bounded) or, with .knobs-pin-ancestor (which also makes the panel overflow:visible), in the
+   nearest scroller around it. Once rows are under it, and only then, it frosts (backdrop blur over
+   the panel's colour) and softens its foot with a short fade. That's scroll-driven, with no
+   script: --k-head-s follows the panel's own scroll, --k-head-v (pinned to an ancestor) the
+   panel's top passing its scroller's, over their first 24px. Until then the header is as it
+   always was: no background, no filter, no change in spacing. The GPU reads them too, to clip the
+   rows at the header's foot and fade them in below it. Without scroll-driven animations nothing
+   pins. */
+@keyframes knobs-head-s{from{-webkit-backdrop-filter:none;backdrop-filter:none}to{--k-head-s:1;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}}
+@keyframes knobs-head-v{from{-webkit-backdrop-filter:none;backdrop-filter:none}to{--k-head-v:1;-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}}
+@supports (animation-timeline:scroll()){
+  .knobs-panel:not(.knobs-page){scroll-timeline:--knobs-self block}
+  .knobs-panel.knobs-pin-ancestor:not(.knobs-page){overflow:visible;view-timeline:--knobs-view block}
+  .knobs-panel:not(.knobs-page)>header{position:sticky;top:0;z-index:4;border-radius:max(0px,calc(var(--k-panel-radius) - 1px)) max(0px,calc(var(--k-panel-radius) - 1px)) 0 0;
+    --k-head-on:max(var(--k-head-s),var(--k-head-v));--k-head-bg:color-mix(in srgb,var(--k-bg) 88%,transparent);
+    background:color-mix(in srgb,var(--k-head-bg) calc(var(--k-head-on) * 100%),transparent);
+    animation:knobs-head-s linear both;animation-timeline:--knobs-self;animation-range:0px 24px}
+  .knobs-panel.knobs-pin-ancestor:not(.knobs-page)>header{animation:knobs-head-v linear both;animation-timeline:--knobs-view;animation-range:exit-crossing 0px exit-crossing 24px}
+  .knobs-panel:not(.knobs-page)>header::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;pointer-events:none;
+    background:linear-gradient(var(--k-head-bg),transparent);opacity:var(--k-head-on)}
+  .knobs-panel[data-gpu-active="true"]:not(.knobs-page)>header{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
+  .knobs-panel[data-gpu-active="true"]:not(.knobs-page)>header::after{display:none}
+}
 .knobs-panel header:active{cursor:grabbing}
-.knobs-panel header strong{flex:1;min-width:0;font-weight:var(--k-title-weight);font-size:var(--k-text-title);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--k-ease)}
+.knobs-panel header strong{flex:1;min-width:0;font-weight:var(--k-title-weight);font-size:var(--k-text-title);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--k-ease),color ${ARMED_T};
+  color:color-mix(in srgb,var(--k-text) calc(var(--k-title-rest) * 100%),var(--k-label))}
+/* At rest a panel's title is a little quiet; armed (keys come here) it's at full strength. */
+.knobs-panel[data-k-armed] header strong{color:var(--k-text)}
+/* The scope line beside the title (crumbs.ts): where keys go, and for a moment where Esc goes. */
+.knobs-crumbs{position:absolute;left:0;top:50%;height:0;pointer-events:none;white-space:nowrap;font-size:var(--k-text-meta);font-weight:var(--k-label-weight);line-height:1.2;letter-spacing:0;text-transform:none}
+.knobs-crumbs>*{position:absolute;left:0;top:0;translate:0 -50%;color:var(--k-dim);transition:opacity .2s var(--k-ease),translate ${CRUMB_GLIDE},color .2s var(--k-ease)}
+.knobs-crumbs>[data-leaving]{transition:opacity .14s cubic-bezier(.4,0,1,1),translate .14s cubic-bezier(.4,0,1,1)}
+.knobs-crumbs>.knobs-crumb-crumb{pointer-events:auto;cursor:pointer}
+.knobs-crumbs>.knobs-crumb-crumb[data-deep]{color:var(--k-text)}
+.knobs-crumbs>.knobs-crumb-crumb:not([data-deep]):hover{color:var(--k-label)}
+.knobs-crumbs>.knobs-crumb-sep{color:color-mix(in srgb,var(--k-dim) 70%,transparent)}
+.knobs-crumbs>.knobs-crumb-esc{font-family:var(--k-mono);font-size:var(--k-text-cap);transition:opacity .35s var(--k-ease),translate ${CRUMB_GLIDE}}
+@media(prefers-reduced-motion:reduce){.knobs-panel .knobs-crumbs>*{transition:opacity .15s linear!important}}
+.knobs-panel[data-gpu-active="true"] .knobs-crumbs>*{color:transparent!important}
 /* Holding \\ shows the values from before the last change; the title dims meanwhile. */
 .knobs-panel[data-comparing] header strong{opacity:.4}
 .knobs-head-actions{display:flex;align-items:center;margin-right:calc((var(--k-icon-size) - var(--k-icon-btn)) / 2)}
@@ -582,26 +928,36 @@ ${GRAD_PROPS}
 .knobs-panel[data-gpu-active="true"] .knobs-die-icon>canvas{visibility:hidden}
 /* The tools sit quiet (--k-dim) until the panel has the pointer or keyboard focus, then read as
    labels, and as text under the pointer. */
-.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--k-dim);background:transparent;border-radius:var(--k-round);cursor:pointer;font-size:12px;line-height:1;transition:background .15s,color .15s,opacity .15s}
+.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--k-dim);background:transparent;border-radius:var(--k-round);cursor:pointer;font-size:12px;line-height:1;transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s}
 .knobs-panel:is(:hover,:has(:focus-visible)) header button{color:var(--k-label)}
 .knobs-panel header button:is(:hover:not([disabled]),:focus-visible),.knobs-panel header button[aria-expanded="true"]{background:var(--k-surface-hi);color:var(--k-text)}
 .knobs-panel header button[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 /* The close X's ink sits a fifth of its box in from each side, a digit's barely: nudged right, its
    ink ends where the values' digits do. */
 .knobs-panel header .knobs-close>.knobs-icon{translate:calc(var(--k-icon-size) * .1) 0}
-/* Undo and redo fold in (room first, then the icons) once there's history, and away without it. */
-.knobs-head-history{display:flex;flex:none;overflow:hidden;width:calc(var(--k-icon-btn) * 2);margin-left:calc(var(--k-unit) * 1.5);transition:width .26s var(--k-ease),margin .26s var(--k-ease)}
-.knobs-head-history[data-single]{width:var(--k-icon-btn)}
-.knobs-head-history[data-shown="false"]{width:0;margin-left:0;transition:width .24s var(--k-ease) .06s,margin .24s var(--k-ease) .06s}
-.knobs-panel .knobs-head-history>button{transition:background .15s,color .15s,opacity .18s var(--k-ease) .08s,scale .3s cubic-bezier(.34,1.45,.64,1) .08s}
-.knobs-panel .knobs-head-history[data-shown="false"]>button{opacity:0;scale:.6;transition:background .15s,color .15s,opacity .12s ease-in,scale .14s ease-in}
+/* Undo · Redo sit apart from Reset · Copy · Random. Undo, Redo and Reset (and a group's reset)
+   keep their slots while they're away and bloom in and out of them: nothing beside them moves. */
+.knobs-head-history{display:flex;flex:none;margin-right:calc(var(--k-unit) * 1.5)}
+.knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown]{transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_IN},scale ${BLOOM_IN},filter 0s,visibility 0s}
+.knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{opacity:0;scale:.9;filter:blur(2.5px);visibility:hidden;
+  transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_OUT},scale ${BLOOM_OUT},filter ${BLOOM_OUT},visibility 0s ${snappyOut.ms}ms}
+@media(prefers-reduced-motion:reduce){
+  .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown]{transition:opacity .15s,visibility 0s!important}
+  .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{scale:1;filter:none;transition:opacity .15s,visibility 0s .15s!important}}
+/* A press flash (flash.ts): from a key or a click, the button's wash brightens at once and eases
+   back to its own, its ink with it. Two names, so a second press restarts it. */
+@keyframes knobs-flash-a{from{background-color:var(--k-flash-bg);color:var(--k-text)}}
+@keyframes knobs-flash-b{from{background-color:var(--k-flash-bg);color:var(--k-text)}}
+.knobs-panel :is(header,.knobs-group-head) button{--k-flash-bg:color-mix(in srgb,var(--k-surface-hi),var(--k-text) 10%)}
+.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="a"]{animation:knobs-flash-a ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
+.knobs-panel :is(header,.knobs-group-head) button[data-k-flash="b"]{animation:knobs-flash-b ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
 /* Copied: the glyph shrinks away and a check draws itself in its place, held, then they trade
    back (the check fading). Driven by --k-copy (the glyph), --k-check (how much of the check is
    drawn) and --k-check-a (its opacity), which the GPU renderer reads too. */
 .knobs-panel header .knobs-copy{--k-copy:1;--k-check:0;--k-check-a:0;
-  transition:background .15s,color .15s,opacity .15s,--k-copy .32s cubic-bezier(.34,1.45,.64,1) .08s,--k-check 0s .18s,--k-check-a .16s ease-in}
+  transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy ${BLOOM_IN} .04s,--k-check 0s .1s,--k-check-a .1s cubic-bezier(.4,0,1,1)}
 .knobs-panel header .knobs-copy[data-copied]{--k-copy:0;--k-check:1;--k-check-a:1;color:var(--k-text);
-  transition:background .15s,color .15s,opacity .15s,--k-copy .14s ease-in,--k-check .28s cubic-bezier(.3,.7,.2,1) .06s,--k-check-a .05s linear .06s}
+  transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy .1s cubic-bezier(.4,0,1,1),--k-check .18s cubic-bezier(.2,.8,.2,1) .03s,--k-check-a .04s linear .03s}
 .knobs-copy>.knobs-icon:not(.knobs-check){opacity:var(--k-copy);scale:calc(.5 + .5 * var(--k-copy))}
 .knobs-copy>.knobs-check{position:absolute;inset:0;margin:auto;opacity:var(--k-check-a)}
 /* (Over .knobs-icon>path's fill: the check is a stroke, 16 of 256 wide like Phosphor's regular icons.) */
@@ -629,6 +985,18 @@ ${GRAD_PROPS}
 .knobs-panel .knobs-preset-chip[aria-checked="true"]{color:var(--k-text);font-weight:var(--k-title-weight)}
 .knobs-panel .knobs-preset-save{flex:none;width:calc((var(--k-inset) - var(--k-tray-pad)) * 2 + 8px);padding:0!important;color:var(--k-dim)!important;font-weight:400!important;font-size:var(--k-text-title)!important}
 .knobs-panel .knobs-preset-save:hover{color:var(--k-text)!important}
+/* The active preset's modified mark: the values have drifted off it (a row's dot, in its corner). */
+.knobs-panel .knobs-preset-chip::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background:var(--k-modified);opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
+.knobs-panel .knobs-preset-chip[data-drifted]::after{opacity:.95;transform:none}
+/* Naming a saved preset: a field over its chip that opens out from the middle to the chip's width;
+   the chip's own name hides beneath it. Leaving, it fades. */
+.knobs-panel .knobs-preset-chip[data-naming]{color:transparent!important}
+.knobs-panel .knobs-preset-name{position:absolute;z-index:2;box-sizing:border-box;min-width:0;margin:0;padding:0 6px;border:1px solid color-mix(in srgb,var(--k-accent) 55%,transparent);border-radius:var(--k-button-radius,var(--k-radius-md));outline:none;background:color-mix(in srgb,var(--k-accent) 10%,transparent);color:var(--k-text);caret-color:var(--k-accent);
+  font-family:inherit;font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-title-weight);letter-spacing:inherit;text-align:center;animation:knobs-name-in .25s cubic-bezier(.2,.8,.2,1);transition:opacity .11s cubic-bezier(.4,0,1,1)}
+.knobs-preset-name::selection{background:color-mix(in srgb,var(--k-accent) 24%,transparent);color:var(--k-text)}
+.knobs-panel .knobs-preset-name[data-leaving]{opacity:0;pointer-events:none}
+@keyframes knobs-name-in{from{clip-path:inset(0 50% round 6px);opacity:.4}to{clip-path:inset(0 round 6px);opacity:1}}
+@media(prefers-reduced-motion:reduce){.knobs-panel .knobs-preset-name{animation:knobs-fade .15s ease-out}}
 
 /* Group headers */
 .knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--k-gap);padding:0 var(--k-group-inset);color:var(--k-group-color);font-size:var(--k-group-size);font-weight:var(--k-title-weight);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
@@ -637,27 +1005,52 @@ ${GRAD_PROPS}
 .knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
 .knobs-group-head button{height:20px;padding:0 6px;font-size:var(--k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--k-label);background:transparent;border-radius:var(--k-radius-sm);cursor:pointer}
 .knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--k-surface-hi);color:var(--k-text)}
-.knobs-group-head .knobs-group-reset{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-round);
-  transition:opacity .18s var(--k-ease),transform .3s cubic-bezier(.34,1.45,.64,1),background .15s,color .15s,visibility 0s}
+.knobs-group-head .knobs-group-reset{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-round)}
 .knobs-group-head :is(.knobs-icon,.knobs-die-icon){width:var(--k-icon-sm);height:var(--k-icon-sm)}
-.knobs-group-reset[data-shown="false"]{opacity:0;visibility:hidden;transform:scale(.55);transition:opacity .14s ease-in,transform .14s ease-in,visibility 0s .14s}
 .knobs-group-head .knobs-group-die{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-round);color:var(--k-dim)}
 .knobs-group-head .knobs-group-die[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
-.knobs-panel .knobs-group-head button:where(:not(.knobs-group-reset)){transition:background .15s,color .15s,opacity .2s,transform .12s}
+.knobs-panel .knobs-group-head button:where(:not(.knobs-group-reset)){transition:background var(--k-hover-t),color var(--k-hover-t),opacity .2s,transform .12s}
 
-/* Grouped cards: rows share one surface, split by hairlines */
+/* Grouped cards: rows share one surface, split by hairlines that stay put whatever a row is doing */
 .knobs-card{position:relative;margin-bottom:var(--k-section-gap);border-radius:var(--k-radius);background:var(--k-surface);overflow:hidden}
 .knobs-card:last-child{margin-bottom:0}
 .knobs-card>*{position:relative;min-height:var(--k-row);transition:background var(--k-hover-t),opacity .2s}
+.knobs-panel [data-tab-opacity]{transition:none!important}
+/* Rubber-band ends (drawStretch in give.ts): past a limit a control stretches about its far end
+   and thins a little, its stretching corners rounding off; a row draws past its card's edge
+   meanwhile (keeping the card's corners where it has them), and its text stays put. */
+.knobs-stretching{scale:var(--k-sx) var(--k-sy);transform-origin:var(--k-sox) var(--k-soy)}
+.knobs-card[data-k-stretch]{overflow:visible}
+.knobs-card>:first-child{--k-rt:1}
+.knobs-card>:last-child{--k-rb:1}
+.knobs-card>.knobs-stretching{--k-r:var(--k-radius);border-radius:calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rb,0)) calc(var(--k-r) * var(--k-rb,0))}
+.knobs-card>.knobs-stretching[data-stretch="end"]{border-top-right-radius:calc(var(--k-r) * max(var(--k-rt,0),var(--k-sf)));border-bottom-right-radius:calc(var(--k-r) * max(var(--k-rb,0),var(--k-sf)))}
+.knobs-card>.knobs-stretching[data-stretch="start"]{border-top-left-radius:calc(var(--k-r) * max(var(--k-rt,0),var(--k-sf)));border-bottom-left-radius:calc(var(--k-r) * max(var(--k-rb,0),var(--k-sf)))}
+.knobs-stretching>:is(.knobs-track,.knobs-range-track){border-radius:inherit}
+.knobs-slider.knobs-stretching :is(.knobs-label,.knobs-value),.knobs-range.knobs-stretching .knobs-range-text{scale:calc(1 / var(--k-sx)) calc(1 / var(--k-sy))}
+.knobs-slider.knobs-stretching .knobs-label{transform-origin:calc(var(--k-ox) - var(--k-inset)) 0}
+.knobs-panel .knobs-slider.knobs-stretching .knobs-value{transform-origin:calc(var(--k-ox) - var(--k-w) + var(--k-inset) + 100%) 0}
+.knobs-range.knobs-stretching .knobs-range-text{transform-origin:var(--k-sox) 50%}
+.knobs-stretching>:is(.knobs-strip-thumb,.knobs-pad-puck,.knobs-pad-home){transform:scale(calc(1 / var(--k-sx)),calc(1 / var(--k-sy)))}
 .knobs-card>:hover,.knobs-card>.knobs-active{background:var(--k-row-hover)}
 .knobs-card>*+*::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--k-line);pointer-events:none;transition:opacity .15s}
-.knobs-card>:is(:hover:not(.knobs-x),.knobs-x:has(>.knobs-x-head:is(:hover,:focus-visible)),:has(:focus-visible):not(.knobs-x),.knobs-active)::before,.knobs-card>:is(:hover:not(.knobs-x),.knobs-x:has(>.knobs-x-head:is(:hover,:focus-visible)),:has(:focus-visible):not(.knobs-x),.knobs-active)+*::before{opacity:0}
-.knobs-card>::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface);opacity:0;pointer-events:none;transition:opacity .15s,box-shadow .15s}
+.knobs-card>::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface-hi);opacity:0;pointer-events:none;transition:opacity .15s,box-shadow .15s}
+/* The card focus is on (a click on its empty area or heading, Esc from a row): a soft wash over all
+   of it, for R and ⇧R acting on its group. */
+:is(.knobs-card,.knobs-tile)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--k-surface);opacity:0;pointer-events:none;transition:opacity .2s var(--k-ease)}
+:is(.knobs-card,.knobs-tile)[data-k-scope]::after{opacity:1}
+.knobs-panel:focus{outline:none}
 .knobs-card>:has(:focus-visible)::after{opacity:1}
 /* One wash at a time: while the pointer has a row (and keys haven't taken over since), a focus
-   wash elsewhere steps aside, and the hairlines beside that row come back. */
+   wash elsewhere steps aside. */
 ${POINTER_ROW} :is(.knobs-card>*,.knobs-sub,.knobs-x-head):not(:hover)::after{opacity:0}
-${POINTER_ROW} .knobs-card>:not(:hover,.knobs-active,:hover+*,.knobs-active+*)::before{opacity:1}
+/* The focus lens (lens.ts) marks the level keys act on, and replaces the washes above: one shape,
+   a soft wash and a hairline edge, placed from script (--kl-w, --kl-l). */
+.knobs-panel[data-k-lens] :is(.knobs-card>*,.knobs-sub,.knobs-x-head,.knobs-card,.knobs-tile)::after{opacity:0!important}
+.knobs-lens{position:absolute;left:0;top:0;z-index:2;width:0;height:0;opacity:0;pointer-events:none;box-sizing:border-box;contain:strict;will-change:transform,opacity;
+  background:color-mix(in srgb,var(--k-surface-hi) calc(var(--kl-w,0) * 100%),transparent);
+  box-shadow:inset 0 0 0 var(--k-rim-width) color-mix(in srgb,var(--k-line-hi) calc(var(--kl-l,0) * 100%),transparent)}
+.knobs-panel[data-gpu-active="true"] .knobs-lens{visibility:hidden}
 .knobs-panel .knobs-slider{height:var(--k-row);contain:layout style}
 .knobs-panel .knobs-row:where(:not(.knobs-slider,.knobs-x,.knobs-spring)){display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--k-row);padding:0 var(--k-inset);contain:layout style}
 .knobs-panel .knobs-row>span:first-child{color:var(--k-label);font-weight:var(--k-label-weight);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -694,12 +1087,19 @@ ${POINTER_ROW} .knobs-card>:not(:hover,.knobs-active,:hover+*,.knobs-active+*)::
 .knobs-smear .knobs-fill{background:linear-gradient(to left,transparent,var(--k-fill-tint) calc(var(--k-smear) * 1px));transform:translateX(calc(var(--k-fill) - 100% + var(--k-smear) * .5px))}
 .knobs-smear .knobs-handle::before{scale:calc(1 + var(--k-smear) / 3) 1;opacity:calc(3 / (3 + var(--k-smear)))}
 .knobs-animate .knobs-fill,.knobs-animate .knobs-handle{transition:--k-fill ${SLIDE_T} ${DELAY},--k-fill-mix .15s,opacity .15s}
-.knobs-settle .knobs-fill,.knobs-settle .knobs-handle{transition:--k-fill .1s cubic-bezier(.25,1,.5,1),--k-fill-mix .12s,opacity .15s}
-/* The default: a short notch rising from the bottom edge, only while the row is in hand. */
+/* The default: a short notch rising from the bottom edge, only while the row is in hand. The
+   active preset's value hangs one from the top edge. */
 .knobs-marks>.knobs-notch{top:auto;bottom:0;width:1.5px;height:4px;border-radius:999px 999px 0 0;transform:translateX(-50%);background:var(--k-accent);opacity:0;transition:opacity .2s,height .15s var(--k-ease)}
+.knobs-marks>.knobs-base{top:0;bottom:auto;border-radius:0 0 999px 999px}
 .knobs-slider:is(:hover,.knobs-active,:has(:focus-visible)) .knobs-notch{opacity:.38}
-.knobs-slider.knobs-modified:is(:hover,.knobs-active,:has(:focus-visible)) .knobs-notch{opacity:.55}
-.knobs-magnet .knobs-notch{opacity:.95;height:6px}
+.knobs-slider.knobs-modified:is(:hover,.knobs-active,:has(:focus-visible)) .knobs-notch:not(.knobs-base){opacity:.55}
+.knobs-magnet .knobs-notch:not(.knobs-base),.knobs-held-base .knobs-base{opacity:.95;height:6px}
+/* Precision by distance: a fine ruler around the handle, a level for each halving of the rate,
+   each finer, shorter and fainter than the last. */
+.knobs-ruler{position:absolute;inset:0;pointer-events:none;--k-ruler-w:linear-gradient(to right,transparent calc(var(--k-fill) - ${RULER_FADE}px),#000 calc(var(--k-fill) - ${RULER_NEAR}px),#000 calc(var(--k-fill) + ${RULER_NEAR}px),transparent calc(var(--k-fill) + ${RULER_FADE}px));-webkit-mask:var(--k-ruler-w);mask:var(--k-ruler-w)}
+.knobs-ruler>i{position:absolute;left:0;right:0;top:50%;opacity:0;translate:-.5px 0;transition:opacity .18s var(--k-ease)}
+${RULER.map(([n, h, a], i) => `.knobs-ruler>i:nth-child(${i + 1}){height:${h}px;margin-top:${-h / 2}px;background:repeating-linear-gradient(to right,color-mix(in srgb,var(--k-accent) ${a * 100}%,transparent) 0 1px,transparent 1px calc(100% / ${n}))}`).join(`
+`)}
 /* The handle is a full-width layer moved by the fill (translate's % is its own width, the track's). */
 .knobs-handle{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--k-fill));opacity:var(--k-handle-rest);transition:opacity .15s}
 .knobs-handle::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--k-row) - 12px);margin-top:calc(6px - var(--k-row) / 2);translate:calc(-50% - var(--k-handle-inset)) 0;border-radius:var(--k-round);background:var(--k-handle);
@@ -748,7 +1148,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-smear-pill{margin-inline:calc(var(--k-smear) * -.5px);
   -webkit-mask:linear-gradient(to right,transparent,#000 calc(var(--k-smear) * 1px),#000 calc(100% - var(--k-smear) * 1px),transparent);
   mask:linear-gradient(to right,transparent,#000 calc(var(--k-smear) * 1px),#000 calc(100% - var(--k-smear) * 1px),transparent)}
-.knobs-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 7px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);white-space:nowrap;color:var(--k-label);background:transparent;cursor:pointer;border-radius:var(--k-radius-sm);transition:background .15s,color .15s}
+.knobs-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 7px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);white-space:nowrap;color:var(--k-label);background:transparent;cursor:pointer;border-radius:var(--k-radius-sm);transition:background var(--k-hover-t),color var(--k-hover-t)}
 .knobs-seg button:is(:hover,:focus-visible){color:var(--k-text)}
 .knobs-seg button[aria-checked=true]{color:var(--k-text)}
 
@@ -765,10 +1165,17 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel .knobs-action-row{padding:0}
 .knobs-panel .knobs-action{width:100%;height:100%;padding:0 var(--k-inset);text-align:left;background:transparent;border-radius:0;color:var(--k-button-color,var(--k-text));font-size:var(--k-button-font-size,calc(var(--k-text-control) + .5px));font-weight:var(--k-label-weight);cursor:pointer;transition:color var(--k-hover-t),background var(--k-hover-t),box-shadow var(--k-hover-t)}
 .knobs-panel .knobs-action:is(:hover,:focus-visible){color:var(--k-accent)}
-.knobs-panel .knobs-action:active{opacity:.7}
+.knobs-panel .knobs-action:is(:active,.knobs-pressed){opacity:.7}
+.knobs-panel .knobs-action.knobs-pressed{color:var(--k-accent)}
+/* A shortcut: its key cap at the row's end, the button taking the rest. */
+.knobs-panel .knobs-action-row[data-keyed]{gap:6px}
+.knobs-panel .knobs-action-row[data-keyed]>.knobs-action{flex:1 1 0;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.knobs-panel .knobs-action-row>.knobs-keys{order:1;margin-right:var(--k-inset)}
 /* With a button fill or outline (--k-button-bg, --k-button-line), an action is a sized button in
    its row, and the presets strip a row of them, as toolbar buttons are. */
 .knobs-panel[data-buttons] .knobs-action-row{padding:0 var(--k-inset)}
+.knobs-panel[data-buttons] .knobs-action-row[data-keyed]>.knobs-action{flex:0 1 auto;margin-right:auto}
+.knobs-panel[data-buttons] .knobs-action-row>.knobs-keys{margin-right:0}
 .knobs-panel[data-buttons] .knobs-action{width:auto;max-width:100%;height:var(--k-button-h,var(--kc-control-h));padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
   background:var(--k-button-bg,transparent);box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);border-radius:var(--k-button-radius,var(--k-radius-md))}
 .knobs-panel[data-buttons] .knobs-action:is(:hover,:focus-visible){color:var(--k-text);background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
@@ -794,13 +1201,12 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-sub{position:relative;transition:background var(--k-hover-t)}
 .knobs-sub:hover,.knobs-sub.knobs-active,.knobs-x-head:hover,.knobs-x-head[data-panned]{background:var(--k-row-hover)}
 .knobs-sub+.knobs-sub::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--k-line);pointer-events:none;transition:opacity .15s}
-.knobs-sub:is(:hover,:has(:focus-visible),.knobs-active)::before,.knobs-sub:is(:hover,:has(:focus-visible),.knobs-active)+.knobs-sub::before{opacity:0}
-:is(.knobs-sub,.knobs-x-head)::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface);opacity:0;pointer-events:none;transition:opacity .15s}
+:is(.knobs-sub,.knobs-x-head)::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface-hi);opacity:0;pointer-events:none;transition:opacity .15s}
 :is(.knobs-sub:has(:focus-visible),.knobs-x-head:focus-visible)::after{opacity:1}
 .knobs-spring-curve{position:relative;flex:none;width:calc(var(--k-row) * 2.5);margin:var(--k-gap) var(--k-inset) var(--k-gap) 0;border-radius:var(--k-radius-sm);background:var(--k-seg-bg);pointer-events:none}
 .knobs-panel :is(.knobs-spring-curve,.knobs-ease)>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .knobs-guide{fill:none;stroke:var(--k-line);stroke-width:1}
-.knobs-arm{fill:none;stroke:var(--k-dim);stroke-width:1;transition:d ${FILL_T} ${DELAY}}
+.knobs-arm{fill:none;stroke:var(--k-dim);stroke-width:1}
 .knobs-curve{fill:none;stroke:var(--k-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:d ${FILL_T} ${DELAY}}
 .knobs-spring-dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--k-accent);box-shadow:0 0 calc(var(--k-glow) * 8px) var(--k-accent);opacity:0;scale:var(--k-curve-dot)}
 .knobs-guide-dashed{stroke:var(--k-line-hi)}
@@ -808,12 +1214,16 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 
 .knobs-panel :is(input,textarea,[contenteditable]){-webkit-user-select:text;user-select:text}
 .knobs-x-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--k-row);padding:0 var(--k-inset);cursor:pointer;user-select:none;transition:background var(--k-hover-t)}
+.knobs-x-head[data-panned]{cursor:ew-resize}
 .knobs-panel .knobs-x-head:focus-visible{outline:none;box-shadow:none}
 .knobs-x-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-label);font-weight:var(--k-label-weight)}
 .knobs-x-label::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--k-modified);vertical-align:middle;opacity:0;transform:scale(.4);transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
 .knobs-modified .knobs-x-label::after{opacity:.95;transform:none}
 .knobs-x-sum{display:flex;align-items:center;gap:8px;min-width:0}
 .knobs-x-read,.knobs-strip-read{color:var(--k-label);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
+/* A name crossfading (reel.ts fadeText): the old one fades out over the new, where it was. */
+.knobs-x-read{position:relative}
+.knobs-ghost{position:absolute;right:0;top:0;white-space:nowrap;pointer-events:none}
 .knobs-caret{width:10px;height:10px;flex:none;margin-right:-2.5px;color:var(--k-dim);transition:transform ${LEAD_T},color .15s}
 .knobs-caret path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
 .knobs-x-head:hover .knobs-caret{color:var(--k-label)}
@@ -838,33 +1248,33 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-pad.knobs-active>i{transition:scale .2s var(--k-ease)}
 .knobs-pad:is(.knobs-active,:focus-visible) .knobs-pad-puck{scale:1.2}
 .knobs-ease{height:calc(var(--k-row) * 4.5)}
-.knobs-panel .knobs-ease-handle{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;padding:0;border-radius:var(--k-round);background:var(--k-bg);box-shadow:inset 0 0 0 2px var(--k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));cursor:grab;touch-action:none;transition:translate ${FILL_T} ${DELAY},scale .2s var(--k-ease)}
+.knobs-panel .knobs-ease-handle{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;padding:0;border-radius:var(--k-round);background:var(--k-bg);box-shadow:inset 0 0 0 2px var(--k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));cursor:grab;touch-action:none;transition:scale .2s var(--k-ease)}
 .knobs-ease-handle::before{content:"";position:absolute;inset:-8px;border-radius:50%}
-.knobs-ease.knobs-active :is(.knobs-curve,.knobs-arm){transition:none}
-.knobs-ease.knobs-active .knobs-ease-handle{transition:scale .2s var(--k-ease)}
+/* The row's morph moves the curve, arms and handles each frame (ramp-morph.ts), so they don't
+   transition. */
+:is(.knobs-ease,.knobs-ease-mini) .knobs-curve{transition:none}
 .knobs-ease-handle:active{scale:1.2;cursor:grabbing}
 .knobs-ease-handle:focus-visible{scale:1.2}
 .knobs-ease-mini{flex:none;width:30px;height:var(--k-track-h);overflow:visible}
 .knobs-ease-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--k-tray-pad);margin-top:6px;padding:var(--k-tray-pad);border-radius:var(--k-radius-md);background:var(--k-seg-bg)}
-.knobs-panel .knobs-ease-chip{min-width:0;height:calc(var(--k-row) - 10px);padding:0 6px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);color:var(--k-label);background:transparent;border-radius:var(--k-radius-sm);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
+.knobs-panel .knobs-ease-chip{min-width:0;height:calc(var(--k-row) - 10px);padding:0 6px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);color:var(--k-label);background:transparent;border-radius:var(--k-radius-sm);cursor:pointer;white-space:nowrap;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
 .knobs-panel .knobs-ease-chip:is(:hover,:focus-visible){color:var(--k-text)}
 .knobs-panel .knobs-ease-chip[aria-checked="true"]{color:var(--k-text);background:var(--k-pill-bg);box-shadow:var(--k-lift-shadow)}
 
 /* Gradients: a swatch strip with stop ticks in the head; a wide strip with a handle per stop (the
    selected one full size), then that stop's colour strips. The ramp runs a handle's radius in from
    each end, as the colour strips' do. */
-.knobs-grad-mini{position:relative;flex:none;width:calc(var(--k-row) * 2.5);height:var(--k-track-h);border-radius:var(--k-radius-sm);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_MINI};transition:${GRAD_T}}
-.knobs-grad-mini>i{position:absolute;top:calc(100% + 2px);left:0;width:1px;height:3px;margin-left:-.5px;background:var(--k-dim);transition:left ${FILL_T} ${DELAY},opacity .15s}
-.knobs-grad{--kg-h:calc(var(--k-row) - 6px);--kg-r:calc(var(--kg-h) / 2);--kg-pin:round(calc(var(--kg-h) * .42),1px);position:relative;height:var(--kg-h);margin:2px 0 var(--k-gap);border-radius:var(--k-round);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_STRIP};cursor:pointer;touch-action:none;user-select:none;outline:none;transition:${GRAD_T}}
-.knobs-grad-stop{position:absolute;top:50%;left:0;width:var(--kg-pin);height:calc(var(--kg-h) - 4px);margin:calc(2px - var(--kg-h) / 2) 0 0 calc(var(--kg-pin) / -2);border-radius:var(--k-round);box-shadow:0 0 0 2px var(--k-thumb),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;scale:.78;
-  transition:left ${FILL_T} ${DELAY},background-color .2s ${DELAY},scale .2s var(--k-ease),opacity .15s}
-.knobs-grad-stop[data-selected]{scale:1}
-.knobs-grad:is(:focus-visible,.knobs-active) .knobs-grad-stop[data-selected]{scale:1.12}
-.knobs-grad-stop[data-leaving]{opacity:.35;scale:.6}
-.knobs-x[data-k-active] :is(.knobs-grad,.knobs-grad-mini,.knobs-grad-mini>i){transition:none}
-.knobs-x[data-k-active] .knobs-grad-stop{transition:scale .2s var(--k-ease),opacity .15s}
-:is(.knobs-grad-stop,.knobs-graph-pt)[data-born]{animation:knobs-born .24s var(--k-ease)}
-@keyframes knobs-born{from{opacity:0;scale:.4}}
+.knobs-grad-mini{position:relative;flex:none;width:calc(var(--k-row) * 2.5);height:var(--k-track-h);border-radius:var(--k-radius-sm);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_MINI}}
+.knobs-grad-mini>i{position:absolute;top:calc(100% + 2px);left:0;width:1px;height:3px;margin-left:-.5px;background:var(--k-dim);scale:1 var(--kgs-grow,1);transform-origin:top;transition:opacity .15s}
+.knobs-grad{--kg-h:calc(var(--k-row) - 6px);--kg-r:calc(var(--kg-h) / 2);--kg-pin:round(calc(var(--kg-h) * .42),1px);position:relative;height:var(--kg-h);margin:2px 0 var(--k-gap);border-radius:var(--k-round);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_STRIP};cursor:pointer;touch-action:none;user-select:none;outline:none}
+.knobs-grad-stop{position:absolute;top:50%;left:0;width:var(--kg-pin);height:calc(var(--kg-h) - 4px);margin:calc(2px - var(--kg-h) / 2) 0 0 calc(var(--kg-pin) / -2);border-radius:var(--k-round);box-shadow:0 0 0 2px var(--k-thumb),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;
+  --kgs-sel:.78;scale:calc(var(--kgs-sel) * var(--kgs-grow,1));transition:--kgs-sel .2s var(--k-ease),opacity .15s}
+/* The row's morph moves the strip, stops and ticks each frame (ramp-morph.ts), so none transition
+   but a stop's focus scale (--kgs-sel); its growth (--kgs-grow) buds it from the strip or merges it
+   into a neighbour. */
+.knobs-grad-stop[data-selected]{--kgs-sel:1}
+.knobs-grad:is(:focus-visible,.knobs-active) .knobs-grad-stop[data-selected]{--kgs-sel:1.12}
+.knobs-grad-stop[data-leaving]{opacity:.35;--kgs-sel:.6}
 .knobs-mixed :is(.knobs-grad,.knobs-grad-mini){background:transparent}
 /* A ramp's shapes and presets share one row: each chip gives up padding before its words, and only
    a very narrow column ellipsizes them (the GPU overlay does the same). */
@@ -879,13 +1289,15 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-graph{position:relative;height:calc(var(--k-row) * 4.5);border-radius:var(--k-radius-md);background:var(--k-seg-bg);cursor:crosshair;touch-action:none;user-select:none;outline:none;overflow:hidden}
 .knobs-panel .knobs-graph>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .knobs-graph>i{position:absolute;left:0;top:0;pointer-events:none}
+/* The row's morph places the line and points each frame (ramp-morph.ts), so neither transitions:
+   a point's size is its focus scale (--kpt-sel, which does) times its growth (--kpt-grow, budding
+   from the line or merging into a neighbour). */
 .knobs-graph-pt{width:10px;height:10px;margin:-5px;border-radius:var(--k-round);background:var(--k-bg);box-shadow:inset 0 0 0 2px var(--k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));
-  transition:translate ${FILL_T} ${DELAY},background-color .15s,scale .2s var(--k-ease),opacity .15s}
+  scale:calc(var(--kpt-sel) * var(--kpt-grow,1));transition:background-color .15s,--kpt-sel .2s var(--k-ease),opacity .15s}
 .knobs-graph-pt[data-selected]{background:var(--k-accent)}
-.knobs-graph:is(:focus-visible,.knobs-active) .knobs-graph-pt[data-selected]{scale:1.2}
-.knobs-graph-pt[data-leaving]{opacity:.35;scale:.7}
-.knobs-graph.knobs-active .knobs-graph-pt{transition:background-color .15s,scale .2s var(--k-ease),opacity .15s}
-.knobs-graph.knobs-active .knobs-curve,.knobs-x[data-k-active] .knobs-curve-mini .knobs-curve{transition:none}
+.knobs-graph:is(:focus-visible,.knobs-active) .knobs-graph-pt[data-selected]{--kpt-sel:1.2}
+.knobs-graph-pt[data-leaving]{opacity:.35;--kpt-sel:.7}
+.knobs-graph .knobs-curve,.knobs-curve-mini .knobs-curve{transition:none}
 .knobs-graph :is(.knobs-graph-v,.knobs-graph-h,.knobs-graph-dot,.knobs-graph-read){opacity:0;transition:opacity .15s}
 .knobs-graph[data-hover] :is(.knobs-graph-v,.knobs-graph-h,.knobs-graph-dot,.knobs-graph-read){opacity:1}
 .knobs-graph-v{bottom:0;width:1px;margin-left:-.5px;background:var(--k-line-hi)}
@@ -897,7 +1309,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 /* Rows as separate bars (--k-row-gap above 0): each row carries its own surface, no hairlines.
    A spring stacks its curve over its two sliders. */
 .knobs-panel[data-rows] .knobs-card{display:flex;flex-direction:column;gap:var(--k-row-gap);background:transparent;overflow:visible}
-.knobs-panel[data-rows] .knobs-card>*{background:var(--k-surface);border-radius:var(--k-radius);overflow:hidden}
+.knobs-panel[data-rows] .knobs-card>*{background:var(--k-surface);border-radius:var(--k-radius);overflow:hidden;--k-rt:1;--k-rb:1}
 .knobs-panel[data-rows] .knobs-card>:is(:hover,.knobs-active){background:color-mix(in srgb,var(--k-surface-hi) 50%,var(--k-surface))}
 .knobs-panel[data-rows] :is(.knobs-card>*,.knobs-sub)::before{display:none}
 .knobs-panel[data-rows] .knobs-card>.knobs-subhead{background:transparent}
@@ -950,7 +1362,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel .knobs-search input{flex:1;min-width:0;height:100%;padding:0;background:transparent;border-radius:0;color:var(--k-text);font-size:var(--k-text-control);-webkit-appearance:none;appearance:none}
 .knobs-panel .knobs-search input::placeholder{color:var(--k-dim)}
 .knobs-panel .knobs-search input::-webkit-search-cancel-button{display:none}
-.knobs-panel .knobs-search-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--kc-control-h);padding:0 8px;background:transparent;border-radius:var(--k-radius-md);box-shadow:inset 0 0 0 1px var(--k-line);color:var(--k-label);font-size:var(--k-text-meta);font-weight:var(--k-label-weight);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,opacity .15s}
+.knobs-panel .knobs-search-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--kc-control-h);padding:0 8px;background:transparent;border-radius:var(--k-radius-md);box-shadow:inset 0 0 0 1px var(--k-line);color:var(--k-label);font-size:var(--k-text-meta);font-weight:var(--k-label-weight);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s,opacity .15s}
 .knobs-panel .knobs-search-chip:is(:hover,:focus-visible){color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line-hi)}
 .knobs-panel .knobs-search-chip[aria-pressed="true"]{background:var(--k-pill-bg);box-shadow:inset 0 0 0 1px var(--k-pill-border);color:var(--k-text)}
 .knobs-panel .knobs-search-chip[data-none]{opacity:.5}
@@ -977,14 +1389,14 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-cell-axis{flex:none;font-style:normal;font-size:var(--k-text-cap);font-weight:var(--k-title-weight);color:var(--k-dim)}
 .knobs-cell-read,.knobs-range-read,.knobs-angle-read,.knobs-seed-read{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-label);font-family:var(--k-value-font);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
 .knobs-cell:focus-visible .knobs-cell-read,.knobs-active .knobs-cell:focus .knobs-cell-read,.knobs-cell[data-panned] .knobs-cell-read{color:var(--k-text)}
-.knobs-panel .knobs-link{flex:none;width:20px;height:20px;margin:0 -4px 0 auto;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background .15s,color .15s}
+.knobs-panel .knobs-link{flex:none;width:20px;height:20px;margin:0 -4px 0 auto;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
 .knobs-panel .knobs-link:hover{background:var(--k-surface-hi);color:var(--k-text)}
 .knobs-panel .knobs-link[aria-pressed="true"]{color:var(--k-text)}
 .knobs-link .knobs-icon{width:var(--k-icon-sm);height:var(--k-icon-sm)}
 /* The inline editor over a readout: above the GPU canvas, which leaves that readout to it. */
-.knobs-panel .knobs-cell-edit{position:absolute;z-index:3;right:var(--k-inset);top:50%;transform:translateY(-50%);width:7ch;height:auto;padding:1px 4px;text-align:right;background:var(--k-bg);border-radius:var(--k-radius-sm);border-bottom:1px solid var(--k-text);color:var(--k-text);font-family:var(--k-value-font);font-variant-numeric:tabular-nums;font-size:var(--kc-value-size)}
+.knobs-panel .knobs-cell-edit{position:absolute;z-index:3;right:calc(var(--k-inset) - 6px);top:50%;transform:translateY(-50%);width:calc(7ch + 12px);height:var(--kc-control-h);padding:0 6px;text-align:right;background:linear-gradient(var(--k-surface-hi),var(--k-surface-hi)),var(--k-bg);border:0;border-radius:var(--k-radius-md);outline:none;color:var(--k-text);caret-color:var(--k-accent);font-family:var(--k-value-font);font-variant-numeric:tabular-nums;font-size:var(--kc-value-size);animation:knobs-fade .12s ease-out}
 .knobs-cell.knobs-editing>:not(.knobs-cell-edit){visibility:hidden}
-.knobs-panel .knobs-cell>.knobs-cell-edit{inset:0;width:auto;transform:none;padding:0 6px;border-radius:var(--k-radius-md)}
+.knobs-panel .knobs-cell>.knobs-cell-edit{inset:0;width:auto;height:auto;transform:none}
 .knobs-panel[data-gpu-active="true"] .knobs-cell-edit{z-index:2147480003}
 
 .knobs-panel .knobs-row.knobs-range{display:block;height:var(--k-row);padding:0}
@@ -998,19 +1410,18 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
   background:linear-gradient(to right,transparent calc(var(--ks-a) - var(--kr-smear-lo,0) * .5px),var(--kr-tint) calc(var(--ks-a) + var(--kr-smear-lo,0) * .5px),var(--kr-tint) calc(var(--ks-b) - var(--kr-smear-hi,0) * .5px),transparent calc(var(--ks-b) + var(--kr-smear-hi,0) * .5px))}
 .knobs-range-smearing .knobs-range-smear{display:block}
 .knobs-range-smearing .knobs-range-fill{opacity:0}
-.knobs-range-thumb{position:absolute;top:0;bottom:0;left:calc(var(--kr-lo) * 100%);width:0;outline:none}
-.knobs-range-thumb[data-end="hi"]{left:calc(var(--kr-hi) * 100%)}
+/* Each thumb sits on its end, centred, held 1.5px in at the track's ends so its hairline isn't cut. */
+.knobs-range-thumb{position:absolute;top:0;bottom:0;left:clamp(1.5px,calc(var(--kr-lo) * 100%),calc(100% - 1.5px));width:0;outline:none}
+.knobs-range-thumb[data-end="hi"]{left:clamp(1.5px,calc(var(--kr-hi) * 100%),calc(100% - 1.5px))}
 /* Where a thumb shows, the label and readout fade around it (2.5px either side of its hairline). */
 .knobs-range-text{position:absolute;inset:0;pointer-events:none;transition:--kr-show-lo .15s,--kr-show-hi .15s;
-  --kg-lo:calc(var(--kr-lo) * 100% + 1.5px);--kg-hi:calc(var(--kr-hi) * 100% - 1.5px);--kg-in-lo:rgb(0 0 0/calc(1 - var(--kr-show-lo)));--kg-in-hi:rgb(0 0 0/calc(1 - var(--kr-show-hi)));
+  --kg-lo:clamp(1.5px,calc(var(--kr-lo) * 100%),calc(100% - 1.5px));--kg-hi:clamp(1.5px,calc(var(--kr-hi) * 100%),calc(100% - 1.5px));--kg-in-lo:rgb(0 0 0/calc(1 - var(--kr-show-lo)));--kg-in-hi:rgb(0 0 0/calc(1 - var(--kr-show-hi)));
   --kg-mask:linear-gradient(to right,#000 calc(var(--kg-lo) - 6.5px),var(--kg-in-lo) calc(var(--kg-lo) - 2.5px),var(--kg-in-lo) calc(var(--kg-lo) + 2.5px),#000 calc(var(--kg-lo) + 6.5px)),linear-gradient(to right,#000 calc(var(--kg-hi) - 6.5px),var(--kg-in-hi) calc(var(--kg-hi) - 2.5px),var(--kg-in-hi) calc(var(--kg-hi) + 2.5px),#000 calc(var(--kg-hi) + 6.5px));
   -webkit-mask:var(--kg-mask);mask:var(--kg-mask);-webkit-mask-composite:source-in;mask-composite:intersect}
 .knobs-range:not(.knobs-mixed):hover .knobs-range-text{--kr-show-lo:1;--kr-show-hi:1}
 .knobs-range:not(.knobs-mixed)[data-end-focus="lo"]:is([data-k-fv],.knobs-active) .knobs-range-text{--kr-show-lo:1}
 .knobs-range:not(.knobs-mixed)[data-end-focus="hi"]:is([data-k-fv],.knobs-active) .knobs-range-text{--kr-show-hi:1}
 .knobs-range-thumb::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--k-row) - 12px);margin-top:calc(6px - var(--k-row) / 2);translate:-50% 0;border-radius:var(--k-round);background:var(--k-handle);opacity:0;scale:.25 1;transition:opacity .15s,scale .22s var(--k-ease)}
-.knobs-range-thumb[data-end="lo"]::before{translate:0 0}
-.knobs-range-thumb[data-end="hi"]::before{translate:-100% 0}
 .knobs-range:hover .knobs-range-thumb::before{opacity:.5}
 .knobs-range-thumb:focus-visible::before,.knobs-range.knobs-active .knobs-range-thumb:focus::before{opacity:.95;scale:1}
 .knobs-range .knobs-label{max-width:calc(55% - var(--k-inset))}
@@ -1036,27 +1447,37 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-seed-read{display:inline-flex;align-items:center}
 .knobs-seed-read[data-mixed]::before{content:"—"}
 .knobs-seed-read[data-mixed]>.knobs-seed-digits{display:none}
-.knobs-panel .knobs-seed-roll{flex:none;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background .15s,color .15s}
+.knobs-panel .knobs-seed-roll{flex:none;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
 .knobs-panel .knobs-seed-roll:hover{background:var(--k-surface-hi);color:var(--k-text)}
 .knobs-seed-roll .knobs-die-icon{width:var(--k-icon-sm);height:var(--k-icon-sm)}
 
-.knobs-panel .knobs-keys{flex:none;display:inline-flex;align-items:center;max-width:62%;height:var(--kc-control-h);padding:0 8px;background:var(--k-seg-bg);border-radius:var(--k-radius-md);color:var(--k-text);font-size:var(--kc-value-size);letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
+.knobs-panel .knobs-keys{flex:none;display:inline-flex;align-items:center;justify-content:center;max-width:62%;height:var(--kc-control-h);padding:0 8px;overflow:hidden;background:var(--k-seg-bg);border-radius:var(--k-radius-md);color:var(--k-text);font-family:inherit;font-weight:inherit;font-size:var(--kc-value-size);letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
 .knobs-panel .knobs-keys:is(:hover,:focus-visible){background:color-mix(in srgb,var(--k-surface-hi) 70%,var(--k-seg-bg))}
 .knobs-panel .knobs-keys[data-empty]{color:var(--k-dim);letter-spacing:0}
-.knobs-panel .knobs-keys[aria-pressed="true"]{background:var(--k-pill-bg);box-shadow:inset 0 0 0 1px var(--k-pill-border);color:var(--k-label);letter-spacing:.08em}
+/* Listening: a soft accent wash, no ring, and the text breathing in "Type keys…" (keyCap). */
+.knobs-panel .knobs-keys[aria-pressed="true"]{background:var(--k-pill-bg);color:var(--k-label)}
+.knobs-keys[aria-pressed="true"] .knobs-keys-text{animation:knobs-breathe 1.6s ease-in-out infinite}
+@keyframes knobs-breathe{50%{opacity:.55}}
 .knobs-keys-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.knobs-keys[data-morph] .knobs-keys-text{flex:none;overflow:visible}
+.knobs-panel .knobs-keys[data-static]{cursor:default}
+.knobs-panel .knobs-keys[hidden]{display:none}
 
-/* Toolbars: icon, label and shortcut per button; they wrap. Buttons take the button tokens. */
-.knobs-panel .knobs-row.knobs-toolbar{flex-wrap:wrap;justify-content:flex-start;gap:var(--k-tray-pad);height:auto;min-height:var(--k-row);padding:calc((var(--k-row) - var(--k-button-h,var(--kc-control-h))) / 2) var(--k-inset)}
+/* Toolbars: icon, label and shortcut per button, in equal columns balanced across their rows
+   (inspector.ts sets --k-tool-cols); one gap between them and around them. Buttons take the
+   button tokens. */
+.knobs-panel .knobs-row.knobs-toolbar{--k-tool-gap:max(4px,calc((var(--k-row) - var(--k-button-h,var(--kc-control-h))) / 2));display:grid;grid-template-columns:repeat(var(--k-tool-cols,1),minmax(0,1fr));gap:var(--k-tool-gap);height:auto;min-height:var(--k-row);padding:var(--k-tool-gap) var(--k-inset)}
 .knobs-card>.knobs-toolbar:hover{background:transparent}
 .knobs-card>.knobs-toolbar:has(:focus-visible)::after{opacity:0}
-.knobs-panel .knobs-tool{display:inline-flex;align-items:center;gap:6px;height:var(--k-button-h,var(--kc-control-h));padding:0 8px;background:var(--k-button-bg,var(--k-seg-bg));border-radius:var(--k-button-radius,var(--k-radius-md));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);
+.knobs-panel .knobs-tool{display:flex;align-items:center;gap:6px;min-width:0;height:var(--k-button-h,var(--kc-control-h));padding:0 8px;background:var(--k-button-bg,var(--k-seg-bg));border-radius:var(--k-button-radius,var(--k-radius-md));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);
   color:var(--k-button-color,var(--k-label));font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-label-weight);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color .15s,box-shadow .15s,scale .12s var(--k-ease),opacity .15s}
 .knobs-panel .knobs-tool:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
 .knobs-panel .knobs-tool:is(:active:not([disabled]),.knobs-pressed){scale:.96}
 .knobs-panel .knobs-tool[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
-.knobs-tool .knobs-icon{width:var(--k-icon-sm);height:var(--k-icon-sm)}
-.knobs-panel .knobs-tool-key{font:inherit;font-size:var(--k-text-cap);color:var(--k-dim);letter-spacing:.06em}
+.knobs-tool .knobs-icon{flex:none;width:var(--k-icon-sm);height:var(--k-icon-sm)}
+.knobs-tool-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
+/* The shortcut sits at the button's end, so a column of buttons lines their chips up. */
+.knobs-panel .knobs-tool-key{flex:none;margin-left:auto;padding-left:4px;font:inherit;font-size:var(--k-text-cap);font-variant-numeric:tabular-nums;color:var(--k-dim);letter-spacing:.06em}
 .knobs-panel :is([data-disabled],[data-readonly]) :is(.knobs-cell,.knobs-range-track,.knobs-angle,.knobs-dial,.knobs-seed,.knobs-keys,.knobs-tool){cursor:default}
 
 /* Row accessories (rowAccessory): the host's node, just after the label. */
@@ -1066,6 +1487,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-track>.knobs-accessory{position:absolute;top:0;bottom:0;left:calc(var(--k-label-right,0px) + 4px);z-index:1}
 .knobs-x-head>.knobs-accessory{margin:0 auto 0 -4px}
 .knobs-action-row>.knobs-accessory{position:absolute;top:0;bottom:0;right:var(--k-inset)}
+.knobs-action-row[data-keyed]>.knobs-accessory{position:static}
 
 /* Foldable groups (folded / groupFolded): the header toggles its card. */
 .knobs-panel .knobs-group-head[data-foldable]{cursor:pointer;user-select:none;transition:background var(--k-hover-t)}
@@ -1090,23 +1512,33 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 /* Hint mode: stable short codes, zero layout shift */
 .knobs-hinting .knobs-hint-miss{opacity:var(--k-disabled-opacity);transition:opacity .1s}
 .knobs-hint-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5;animation:knobs-in .1s var(--k-ease)}
-.knobs-hint{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--k-radius-sm);background:var(--k-accent);color:var(--k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
+/* The badges are <kbd>s, so they outrank the scoped reset's (0,1,1). */
+.knobs-panel .knobs-hint{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--k-radius-sm);background:var(--k-accent);color:var(--k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
   font:700 var(--k-text-cap)/1 var(--k-mono);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
+.knobs-panel .knobs-hint[hidden]{display:none}
 .knobs-hint-typed{opacity:var(--k-hint-typed-opacity)}
 .knobs-hint-rest{opacity:1}
 
+/* A focused row's options: tiny digits in hint mode's look, once focus settles (optkeys.ts). */
+.knobs-optkeys{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5}
+.knobs-panel .knobs-optkey{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:12px;padding:0 3px;border-radius:var(--k-radius-sm);background:var(--k-accent);color:var(--k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
+  font:700 calc(var(--k-text-cap) * .85)/1 var(--k-mono);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .12s var(--k-ease)}
+.knobs-panel .knobs-optkey-range{transform:translate(-100%,-50%)}
+.knobs-panel .knobs-optkey[data-shown]{opacity:.85;transition-duration:.15s}
+
 /* Custom actions */
 .knobs-panel .knobs-custom-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--k-gap);margin-top:var(--k-section-gap)}
 .knobs-panel .knobs-custom-actions button{height:var(--k-button-h,var(--k-action-h));min-height:24px;padding:0 8px;font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-label-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--k-button-color,var(--k-label));cursor:pointer;
-  background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);transition:background .15s,color .15s,opacity .15s,transform .12s,box-shadow .15s}
+  background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,transform .12s,box-shadow .15s}
 .knobs-panel .knobs-custom-actions button:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
 .knobs-panel .knobs-custom-actions button:active:not([disabled]){transform:scale(.97)}
 .knobs-panel .knobs-tile-body>.knobs-custom-actions button[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 
 /* Variants Disclosure Drawer */
 .knobs-transfer{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-gap);margin-top:8px;padding-top:8px;border-top:1px solid var(--k-line)}
-.knobs-transfer button{height:var(--k-button-h,24px);padding:0 8px;background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);font-size:var(--k-button-font-size,var(--k-text-meta));color:var(--k-button-color,var(--k-label));cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
+.knobs-transfer button{height:var(--k-button-h,24px);padding:0 8px;background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);font-size:var(--k-button-font-size,var(--k-text-meta));color:var(--k-button-color,var(--k-label));cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
 .knobs-transfer button:is(:hover,:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
+.knobs-sound-pref{grid-template-columns:1fr}
 
 /* Context menu: borrows its panel's tokens (see menu.ts) and floats above everything. */
 .knobs-menu{position:fixed;z-index:2147480004;min-width:176px;padding:var(--k-unit);box-sizing:border-box;font:var(--k-font-weight) var(--k-text-control)/1.35 var(--k-font);color:var(--k-text);text-align:left;-webkit-font-smoothing:antialiased;
@@ -1157,11 +1589,14 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel[data-gpu-active="true"] :is(.knobs-sub,.knobs-x-head,.knobs-x-label)::after,
 .knobs-panel[data-gpu-active="true"] .knobs-card:not(.knobs-live *)>::before,
 .knobs-panel[data-gpu-active="true"] .knobs-card:not(.knobs-live *)>::after,
+.knobs-panel[data-gpu-active="true"] :is(.knobs-card:not(.knobs-live *),.knobs-tile:not(.knobs-live))::after,
+.knobs-panel[data-gpu-active="true"] .knobs-optkey,
 .knobs-panel[data-gpu-active="true"] .knobs-row:not(.knobs-live *)>span:first-child::after,
+.knobs-panel[data-gpu-active="true"] .knobs-preset-chip::after,
 .knobs-panel[data-gpu-active="true"] :is(.knobs-tile:not(.knobs-live)>.knobs-veil,.knobs-tile:not(.knobs-live)>.knobs-mark,.knobs-section-head>.knobs-mark){opacity:0!important}
 /* Parts the canvas doesn't draw (shortcuts, status, editors) sit above it. */
 .knobs-panel[data-gpu-active="true"] :where(.knobs-popover,.knobs-status,textarea,.knobs-apply-btn){position:relative;z-index:2147480003}
-.knobs-panel[data-gpu-active="true"] .knobs-number{z-index:2147480003}
+.knobs-panel[data-gpu-active="true"] :is(.knobs-number,.knobs-preset-name){z-index:2147480003}
 /* A row accessory is the host's own DOM, so it sits above the canvas too (its row then can't
    contain its layout, which would trap it in a stacking context under the canvas). */
 .knobs-panel[data-gpu-active="true"] .knobs-row[data-accessory]{contain:style}
@@ -1319,7 +1754,7 @@ function injectPreset(doc, preset) {
   let style = doc.createElement("style");
   style.dataset.knobsPreset = preset.name, style.textContent = content, doc.head.append(style);
 }
-var keyboardQuietsHover = (css) => css.replaceAll(":hover", ":hover:where(:not([data-k-quiet]))"), withoutHas = (css) => css.replaceAll(".knobs-x:has(>.knobs-x-head:is(:hover,:focus-visible))", '.knobs-x:is([data-k-head-hover]:where(:not([data-k-quiet])),[data-k-fv="head"])').replaceAll(":has(:focus-visible)", "[data-k-fv]").replaceAll(":has(.knobs-track:focus-visible)", '[data-k-fv="track"]').replaceAll(":has(.knobs-active)", "[data-k-active]");
+var keyboardQuietsHover = (css) => css.replaceAll(":hover", ":hover:where(:not([data-k-quiet]))"), withoutHas = (css) => css.replaceAll(":has(:focus-visible)", "[data-k-fv]").replaceAll(":has(.knobs-track:focus-visible)", '[data-k-fv="track"]').replaceAll(":has(.knobs-active)", "[data-k-active]");
 function injectStyles(doc) {
   let content = rolling_css_default + DRIVERS + defaultsCss + keyboardQuietsHover(withoutHas(aliased(css))), existing = doc.querySelector("style[data-knobs-style]");
   if (existing) {
@@ -1331,4 +1766,1054 @@ function injectStyles(doc) {
   style.dataset.knobsStyle = "", style.textContent = content, doc.head.append(style);
 }
 
-export { CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, presetCss, FILL, LEAD, trailScale, Edges, POP_MS, popScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, DELAYED, injectPreset, injectStyles };
+// src/panel/sound.ts
+var click = (f, p, d = 0.005, q = 4, at = 0) => ({
+  f,
+  q,
+  a: 0.0008,
+  d,
+  p,
+  at
+}), thud = (f, p, d, at = 0) => ({
+  filter: "lowpass",
+  f,
+  q: 0.7,
+  a: 0.0015,
+  d,
+  p,
+  at
+}), air = (f, to, d, p, a = 0.012, at = 0) => ({
+  f,
+  to,
+  glide: a + d * 0.6,
+  q: 1.4,
+  a,
+  d,
+  p,
+  at
+}), knock = (f, d, p, at = 0) => ({
+  wave: "sine",
+  f: f * 1.6,
+  to: f,
+  glide: 0.018,
+  a: 0.001,
+  d,
+  p,
+  at
+}), glass = (f, d, p, at = 0) => [
+  [1, 1],
+  [2.76, 0.28],
+  [5.4, 0.08]
+].filter(([ratio]) => f * ratio <= 5000).map(([ratio, level]) => ({
+  wave: "sine",
+  f: f * ratio,
+  a: 0.002,
+  d: Math.max(0.028, d / ratio ** 0.75),
+  p: p * level,
+  at
+})), clamp3 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var cadence = (sinceMs) => clamp3((240 - sinceMs) / 170, 0, 1);
+function recipe(cue, detail = {}, speed = 0, random = Math.random) {
+  let dir = Math.sign(detail.direction ?? 0), light = 1 - 0.45 * speed, vary = (amount) => 1 + (random() * 2 - 1) * amount;
+  switch (cue) {
+    case "step": {
+      let k = 2 ** (clamp3(detail.position ?? 0.5, 0, 1) * 0.9 - 0.35), even = light / k ** 0.75, layers = [
+        click(3000 * k, 0.5 * even, 0.004, 5),
+        click(1300 * k, 0.22 * even, 0.01, 2.5)
+      ];
+      if (speed < 0.6)
+        layers.push({ wave: "sine", f: 1480 * k, a: 0.001, d: 0.05, p: 0.008 * light });
+      if (detail.strong)
+        layers.push(knock(240, 0.03, 0.05), click(2100, 0.3, 0.006, 3));
+      return { layers, gain: 1.8 };
+    }
+    case "limit":
+      return { layers: [thud(380, 0.9, 0.05), knock(115, 0.06, 0.07)], gain: 0.9 };
+    case "toggle":
+      return dir < 0 ? {
+        layers: [
+          click(2800, 0.14, 0.003, 3),
+          click(1450, 0.5, 0.013, 2, 0.012),
+          knock(250, 0.034, 0.06, 0.012)
+        ],
+        gain: 1.2
+      } : {
+        layers: [
+          click(3300, 0.14, 0.003, 3),
+          click(1850, 0.5, 0.012, 2, 0.013),
+          knock(330, 0.03, 0.06, 0.013)
+        ],
+        gain: 1.2
+      };
+    case "select": {
+      let k = 1 + 0.06 * dir;
+      return {
+        layers: [click(2700 * k, 0.4 * light, 0.006, 3), knock(430 * k, 0.02, 0.045 * light)],
+        gain: 1.5
+      };
+    }
+    case "preset":
+      return {
+        layers: [
+          click(2400, 0.3, 0.005, 3),
+          thud(1800, 0.08, 0.004),
+          ...glass(1046.5, 0.24, 0.016, 0.012),
+          ...glass(1568, 0.2, 0.01, 0.012)
+        ],
+        gain: 2.5,
+        room: 0.6
+      };
+    case "random":
+    case "mutate": {
+      let n = cue === "random" ? 5 : 2, layers = [], at = 0, gap = 0.044;
+      for (let i = 0;i < n; i++) {
+        let level = 0.8 ** i;
+        layers.push(click(1500 + 1900 * random(), 0.36 * level, 0.006, 3, at), knock(380 + 320 * random(), 0.018, 0.04 * level, at)), at += gap * vary(0.15), gap *= 0.78;
+      }
+      return { layers, gain: 1.6 };
+    }
+    case "reset":
+      return {
+        layers: [
+          { f: 2600, to: 750, glide: 0.09, q: 1.3, a: 0.07, d: 0.03, p: 0.18 },
+          click(2200, 0.3, 0.004, 3, 0.082),
+          knock(300, 0.02, 0.04, 0.082)
+        ],
+        gain: 1.1
+      };
+    case "copy":
+      return {
+        layers: [
+          thud(2200, 0.06, 0.003),
+          ...glass(1174.66, 0.2, 0.014),
+          { wave: "sine", f: 1178.5, a: 0.002, d: 0.18, p: 0.006 },
+          ...glass(1567.98, 0.24, 0.014, 0.06)
+        ],
+        gain: 2.6,
+        room: 1
+      };
+    case "undo":
+    case "redo": {
+      let back = cue === "undo";
+      return {
+        layers: [
+          air(back ? 1700 : 850, back ? 750 : 1800, 0.04, 0.14),
+          knock(back ? 330 : 420, 0.02, 0.04, 0.028)
+        ],
+        gain: 1.4
+      };
+    }
+    case "open":
+      return { layers: [click(2600, 0.16, 0.004, 3), air(700, 1600, 0.045, 0.14, 0.02)], gain: 1.7 };
+    case "close":
+      return {
+        layers: [
+          air(1500, 650, 0.04, 0.13, 0.015),
+          knock(240, 0.028, 0.06, 0.03),
+          click(1700, 0.2, 0.006, 3, 0.03)
+        ],
+        gain: 1.1
+      };
+    case "hint":
+      return {
+        layers: [air(1200, 2400, 0.05, 0.06, 0.02), ...glass(1568, 0.14, 0.01, 0.012)],
+        gain: 2.3,
+        room: 0.8
+      };
+    case "type": {
+      let k = vary(0.06);
+      return {
+        layers: [click(3600 * k, 0.16 * light, 0.003, 1), click(1600 * k, 0.3 * light, 0.008, 3)],
+        gain: 1.4
+      };
+    }
+    case "press":
+      return {
+        layers: [click(2650, 0.4, 0.004, 1.5), knock(380, 0.02, 0.05), thud(220, 0.25, 0.022)],
+        gain: 2
+      };
+    case "capture":
+      return {
+        layers: [
+          click(3000, 0.3, 0.003, 3),
+          click(2400, 0.22, 0.004, 3, 0.035),
+          ...glass(1318.5, 0.12, 0.012, 0.04)
+        ],
+        gain: 2.5,
+        room: 0.5
+      };
+  }
+}
+var themed = (layers, theme) => theme === "mech" ? layers.map((l) => l.wave ? { ...l, p: l.p * 0.5, d: l.d * 0.5 } : { ...l, d: l.d * 0.75, q: (l.q ?? 1) * 1.3, p: l.p * 1.1 }) : [...layers], GAPS = {
+  step: 24,
+  limit: 140,
+  toggle: 40,
+  select: 28,
+  preset: 80,
+  random: 120,
+  mutate: 120,
+  reset: 120,
+  copy: 200,
+  undo: 45,
+  redo: 45,
+  open: 60,
+  close: 60,
+  hint: 120,
+  type: 18,
+  press: 50,
+  capture: 120
+};
+function createLimiter(gaps = GAPS) {
+  let last = /* @__PURE__ */ new Map;
+  return (cue, now) => {
+    let since = now - (last.get(cue) ?? Number.NEGATIVE_INFINITY);
+    if (since < (gaps[cue] ?? 0))
+      return null;
+    return last.set(cue, now), cadence(since);
+  };
+}
+var FRESH_MS = 150, DETENTS2 = 24;
+function createDetents() {
+  let last = /* @__PURE__ */ new Map;
+  return (key, before, after, detents, now) => {
+    let since = now - (last.get(key) ?? Number.NEGATIVE_INFINITY);
+    if (last.set(key, now), since > FRESH_MS)
+      return !0;
+    let n = Math.max(1, Math.round(detents));
+    return Math.round(clamp3(before, 0, 1) * n) !== Math.round(clamp3(after, 0, 1) * n);
+  };
+}
+var numbers = (v) => typeof v === "number" ? [v] : v && typeof v === "object" ? Object.values(v).filter((n) => typeof n === "number") : [];
+function changeCue(field, before, after) {
+  if (field.kind === "toggle")
+    return { cue: "toggle", detail: { direction: after ? 1 : -1 }, detents: 1, at: 1, was: 0 };
+  if (field.kind === "choice") {
+    let options = field.options ?? [];
+    return { cue: "select", detail: { direction: options.indexOf(after) - options.indexOf(before) }, detents: 1, at: 1, was: 0 };
+  }
+  if (field.kind === "keybind")
+    return after ? { cue: "capture", detail: {}, detents: 1, at: 1, was: 0 } : { cue: "select", detail: { direction: -1 }, detents: 1, at: 1, was: 0 };
+  let { min, max, step } = field, a = numbers(before), b = numbers(after);
+  if (typeof min !== "number" || typeof max !== "number" || !(max > min) || !b.length)
+    return { cue: "step", detail: {}, detents: 1, at: 0.5, was: 0.5 };
+  let i = b.findIndex((n, j) => n !== a[j]);
+  if (i < 0)
+    i = 0;
+  let pos = (n) => clamp3(((n ?? min) - min) / (max - min), 0, 1), steps = typeof step === "number" && step > 0 ? (max - min) / step : Number.POSITIVE_INFINITY;
+  return {
+    cue: "step",
+    detail: { position: pos(b[i]), strong: same(after, field.value) && !same(before, field.value) },
+    detents: steps <= 10 ? steps : DETENTS2,
+    at: pos(b[i]),
+    was: pos(a[i])
+  };
+}
+var same = (x, y) => {
+  let a = numbers(x), b = numbers(y);
+  return a.length > 0 && a.length === b.length && a.every((n, i) => n === b[i]);
+};
+function resolveSound(option) {
+  if (!option)
+    return null;
+  if (option === !0)
+    return {};
+  return {
+    ...option.volume !== void 0 ? { volume: clamp3(Number(option.volume) || 0, 0, 1) } : {},
+    ...option.theme ? { theme: option.theme } : {}
+  };
+}
+var MAX_VOICES = 10, PAD = 0.04, FADE = 0.015, LEVEL = 0.5, browserEnv = () => {
+  let win = typeof window > "u" ? void 0 : window;
+  return {
+    AudioContext: win?.AudioContext ?? win?.webkitAudioContext,
+    activated: () => win?.navigator?.userActivation?.hasBeenActive !== !1,
+    now: () => performance.now()
+  };
+};
+function createSound(env = browserEnv()) {
+  let enabled = !0, volume = 1, theme = "glass", context = null, bus = null, voices = [], listeners = /* @__PURE__ */ new Set, limit = createLimiter(), now = env.now ?? (() => Date.now()), random = env.random ?? Math.random, notify = () => {
+    for (let f of listeners)
+      f();
+  }, ensure = () => {
+    if (context)
+      return context;
+    if (!env.AudioContext || env.activated?.() === !1)
+      return null;
+    try {
+      context = new env.AudioContext;
+    } catch {
+      return null;
+    }
+    return context;
+  }, wake = (ctx) => {
+    if (ctx.state === "suspended" && enabled)
+      try {
+        ctx.resume().catch(() => {});
+      } catch {}
+  }, build = (ctx) => {
+    if (bus)
+      return bus;
+    let input = ctx.createGain();
+    input.gain.value = enabled ? volume : 0;
+    let subsonic = ctx.createBiquadFilter();
+    subsonic.type = "highpass", subsonic.frequency.value = 45;
+    let squeeze = ctx.createDynamicsCompressor();
+    squeeze.threshold.value = -22, squeeze.knee.value = 12, squeeze.ratio.value = 3, squeeze.attack.value = 0.002, squeeze.release.value = 0.12, input.connect(subsonic).connect(squeeze).connect(ctx.destination);
+    let rate = ctx.sampleRate, noise = ctx.createBuffer(1, rate, rate), data = noise.getChannelData(0), s = 7;
+    for (let i = 0;i < data.length; i++)
+      s = s * 1664525 + 1013904223 >>> 0, data[i] = s / 2147483648 - 1;
+    let len = Math.floor(rate * 0.2), impulse = ctx.createBuffer(2, len, rate);
+    for (let c = 0;c < 2; c++) {
+      let ch = impulse.getChannelData(c);
+      for (let i = Math.floor(rate * 0.006);i < len; i++)
+        ch[i] = data[i * (c + 3) % data.length] * Math.exp(-6.9 * i / len) / 9;
+    }
+    let verb = ctx.createConvolver();
+    verb.normalize = !1, verb.buffer = impulse;
+    let walls = ctx.createBiquadFilter();
+    return walls.type = "lowpass", walls.frequency.value = 3800, walls.connect(verb).connect(input), bus = { input, room: walls, noise }, bus;
+  }, render = (ctx, layers, level, room) => {
+    let b = build(ctx), t0 = ctx.currentTime + 0.002;
+    for (let i = voices.length - 1;i >= 0; i--)
+      if (voices[i].end < t0)
+        voices.splice(i, 1);
+    while (voices.length >= MAX_VOICES) {
+      let old = voices.shift();
+      old.gain.gain.cancelScheduledValues(t0), old.gain.gain.setValueAtTime(old.gain.gain.value, t0), old.gain.gain.linearRampToValueAtTime(0, t0 + FADE);
+    }
+    let out = ctx.createGain();
+    out.gain.value = level, out.connect(b.input);
+    let send;
+    if (room > 0)
+      send = ctx.createGain(), send.gain.value = 0.1 * room, out.connect(send).connect(b.room);
+    let end = t0;
+    for (let l of layers) {
+      let t = t0 + (l.at ?? 0), stop = t + l.a + l.d + PAD;
+      end = Math.max(end, stop);
+      let g = ctx.createGain();
+      g.gain.setValueAtTime(0, t), g.gain.linearRampToValueAtTime(l.p, t + l.a), g.gain.setTargetAtTime(0, t + l.a, l.d / 6.9);
+      let source, param;
+      if (l.wave) {
+        let osc = ctx.createOscillator();
+        osc.type = l.wave, param = osc.frequency, osc.connect(g), source = osc;
+      } else {
+        let src = ctx.createBufferSource();
+        src.buffer = b.noise, src.loop = !0;
+        let filter = ctx.createBiquadFilter();
+        if (filter.type = l.filter ?? "bandpass", l.q !== void 0)
+          filter.Q.value = l.q;
+        param = filter.frequency, src.connect(filter).connect(g), source = src;
+      }
+      if (param.setValueAtTime(l.f, t), l.to !== void 0)
+        param.exponentialRampToValueAtTime(l.to, t + (l.glide ?? l.a + l.d));
+      if (g.connect(out), l.wave)
+        source.start(t);
+      else
+        source.start(t, random() * 0.9);
+      source.stop(stop);
+    }
+    voices.push({ gain: out, end }), setTimeout(() => {
+      out.disconnect(), send?.disconnect();
+    }, (end - ctx.currentTime + 0.1) * 1000);
+  };
+  return {
+    get enabled() {
+      return enabled;
+    },
+    enable(on = !0) {
+      if (on === enabled)
+        return;
+      if (enabled = on, context && bus) {
+        let t = context.currentTime, g = bus.input.gain;
+        g.cancelScheduledValues(t), g.setValueAtTime(g.value, t), g.linearRampToValueAtTime(on ? volume : 0, t + FADE * 2);
+      }
+      if (on && context)
+        wake(context);
+      notify();
+    },
+    get volume() {
+      return volume;
+    },
+    setVolume(next) {
+      let v = clamp3(Number(next) || 0, 0, 1);
+      if (v === volume)
+        return;
+      if (volume = v, context && bus && enabled)
+        bus.input.gain.setTargetAtTime(v, context.currentTime, 0.02);
+      notify();
+    },
+    get theme() {
+      return theme;
+    },
+    setTheme(next) {
+      if (next !== "glass" && next !== "mech")
+        return;
+      if (next === theme)
+        return;
+      theme = next, notify();
+    },
+    play(cue, detail = {}) {
+      if (!enabled || volume === 0)
+        return;
+      let level = LEVEL * clamp3(detail.volume ?? 1, 0, 1);
+      if (level === 0)
+        return;
+      let made;
+      if (typeof cue === "string") {
+        let speed = limit(cue, now());
+        if (speed === null)
+          return;
+        made = recipe(cue, detail, speed, random);
+      } else
+        made = { layers: cue };
+      let ctx = ensure();
+      if (!ctx)
+        return;
+      let gain = level * (made.gain ?? 1), layers = themed(made.layers, detail.theme ?? theme), room = (detail.theme ?? theme) === "mech" ? 0 : made.room ?? 0;
+      if (ctx.state === "running")
+        render(ctx, layers, gain, room);
+      else
+        try {
+          ctx.resume().then(() => {
+            if (enabled && ctx.state === "running")
+              render(ctx, layers, gain, room);
+          }).catch(() => {});
+        } catch {}
+    },
+    output() {
+      let ctx = ensure();
+      if (!ctx)
+        return null;
+      return wake(ctx), { context: ctx, destination: build(ctx).input };
+    },
+    prime(doc = typeof document > "u" ? void 0 : document) {
+      let win = doc?.defaultView;
+      if (!win || context)
+        return;
+      let kinds = ["pointerdown", "keydown", "touchend"], unlock = () => {
+        if (!enabled)
+          return;
+        let ctx = ensure();
+        if (!ctx)
+          return;
+        build(ctx), wake(ctx);
+        for (let k of kinds)
+          win.removeEventListener(k, unlock, !0);
+      };
+      for (let k of kinds)
+        win.addEventListener(k, unlock, !0);
+    },
+    subscribe(listener) {
+      return listeners.add(listener), () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+var sound = /* @__PURE__ */ createSound(), panels = /* @__PURE__ */ new WeakMap, SOUND_PREF = "knobs:sound:v1";
+function soundPanel(root, options) {
+  panels.set(root, options), sound.prime(root.ownerDocument);
+}
+var sounds = (from) => {
+  let root = from?.closest?.(".knobs-panel");
+  return Boolean(root && panels.has(root));
+}, detents = createDetents();
+function changed(from, key, field, before, after) {
+  if (!sounds(from))
+    return;
+  let c = changeCue(field, before, after);
+  if (!c)
+    return;
+  if (c.cue === "step" && !detents(key, c.was, c.at, c.detents, performance.now()))
+    return;
+  cue(from, c.cue, c.detail);
+}
+function cue(from, name, detail = {}) {
+  let root = from?.closest?.(".knobs-panel"), options = root && panels.get(root);
+  if (!options)
+    return;
+  sound.play(name, {
+    ...detail,
+    volume: (options.volume ?? 1) * (detail.volume ?? 1),
+    ...options.theme && !detail.theme ? { theme: options.theme } : {}
+  });
+}
+
+// src/panel/hints.ts
+function extractWords(text) {
+  return text.toLowerCase().match(/[a-z]+/g) ?? [];
+}
+function candidatePool(words) {
+  let flat = words.join(""), pool = [], push = (s) => {
+    if (s && /^[a-z]{1,3}$/.test(s) && !pool.includes(s))
+      pool.push(s);
+  };
+  if (words.length >= 2) {
+    let w0 = words[0], w1 = words[1], base2 = w0[0] + w1[0];
+    push(base2);
+    for (let i = 1;i < w1.length; i++)
+      push(w0[0] + w1[i]);
+    for (let i = 1;i < w0.length; i++)
+      push(w0[i] + w1[0]);
+    if (words.length >= 3)
+      push(base2 + words[2][0]);
+    if (w1.length >= 2)
+      push(base2 + w1[1]);
+    if (w0.length >= 2)
+      push(base2 + w0[1]);
+  } else if (flat.length > 0) {
+    for (let i = 1;i < flat.length; i++)
+      push(flat[0] + flat[i]);
+    if (flat.length >= 3)
+      push(flat.slice(0, 3));
+  }
+  let f0 = flat[0] || "x";
+  for (let c = 97;c <= 122; c++)
+    push(f0 + String.fromCharCode(c));
+  return pool;
+}
+function assignHintCodes(items) {
+  let n = items.length;
+  if (n === 0)
+    return [];
+  let displayCounts = /* @__PURE__ */ new Map;
+  for (let item of items) {
+    let d = item.display.toLowerCase();
+    displayCounts.set(d, (displayCounts.get(d) ?? 0) + 1);
+  }
+  let itemWords = items.map((item) => {
+    let d = item.display.toLowerCase(), useKey = (displayCounts.get(d) ?? 0) > 1 && d !== item.key.toLowerCase(), w = extractWords(useKey ? item.key : item.display);
+    return w.length > 0 ? w : extractWords(item.key);
+  }), pools = itemWords.map((w) => candidatePool(w)), base2Of = pools.map((p) => p[0] ?? "x"), firstLetterCounts = /* @__PURE__ */ new Map, base2Counts = /* @__PURE__ */ new Map;
+  for (let i = 0;i < n; i++) {
+    let b2 = base2Of[i], f1 = b2[0];
+    firstLetterCounts.set(f1, (firstLetterCounts.get(f1) ?? 0) + 1), base2Counts.set(b2, (base2Counts.get(b2) ?? 0) + 1);
+  }
+  let codes = Array(n).fill(""), used = /* @__PURE__ */ new Set;
+  for (let i = 0;i < n; i++) {
+    let words = itemWords[i], b2 = base2Of[i], f1 = b2[0];
+    if (words.length === 1 && firstLetterCounts.get(f1) === 1 && !used.has(f1))
+      codes[i] = f1, used.add(f1);
+    else if (base2Counts.get(b2) === 1 && !used.has(b2))
+      codes[i] = b2, used.add(b2);
+  }
+  for (let i = 0;i < n; i++) {
+    if (codes[i])
+      continue;
+    let pool = pools[i], chosen = pool.find((cand) => cand.length === 2 && !used.has(cand) && !used.has(cand[0])) ?? pool.find((cand) => !used.has(cand) && !used.has(cand[0])) ?? `x${i}`;
+    codes[i] = chosen, used.add(chosen);
+  }
+  return codes;
+}
+function resolveHintCodes(codes, rawQuery = "") {
+  let q = rawQuery.toLowerCase().replace(/[^a-z]/g, ""), matchIndices = [], badges = codes.map((code, i) => {
+    let match = q.length === 0 || code.startsWith(q);
+    if (match)
+      matchIndices.push(i);
+    let typedLen = match ? Math.min(code.length, q.length) : 0;
+    return {
+      match,
+      prefix: code,
+      typed: code.slice(0, typedLen),
+      rest: code.slice(typedLen)
+    };
+  }), uniqueMatchIndex = matchIndices.length === 1 && q.length > 0 ? matchIndices[0] : -1;
+  return {
+    badges,
+    matchIndices,
+    uniqueMatchIndex
+  };
+}
+function createHintController(doc, root, wakeGpu) {
+  let layer = doc.createElement("div");
+  layer.className = "knobs-hint-layer", layer.setAttribute("aria-hidden", "true");
+  let active = !1, local = !1, query = "", spots = [], targets = [], codes = [], badgeNodes = [];
+  function stop() {
+    if (!active)
+      return;
+    active = !1, local = !1, query = "", root.classList.remove("knobs-hinting");
+    for (let t of spots)
+      t.el.classList.remove("knobs-hint-match", "knobs-hint-miss");
+    spots = [], targets = [], codes = [], badgeNodes = [], layer.replaceChildren(), layer.remove(), wakeGpu();
+  }
+  function paint() {
+    if (!active)
+      return;
+    let resolution = resolveHintCodes(codes, query);
+    if (local && resolution.uniqueMatchIndex >= 0) {
+      let hit = targets[resolution.uniqueMatchIndex];
+      stop(), hit.activate();
+      return;
+    }
+    for (let i = 0;i < spots.length; i++) {
+      let t = spots[i], b = resolution.badges[i], node = badgeNodes[i];
+      if (t.el.classList.toggle("knobs-hint-match", b.match), t.el.classList.toggle("knobs-hint-miss", !b.match), !node)
+        continue;
+      if (node.tag.hidden = !b.match, b.match)
+        node.typedSpan.textContent = b.typed, node.restSpan.textContent = b.rest;
+    }
+    wakeGpu();
+  }
+  function show(nextSpots, nextCodes) {
+    if (stop(), nextSpots.length === 0)
+      return;
+    if (active = !0, query = "", spots = nextSpots, codes = nextCodes, root.classList.add("knobs-hinting"), !layer.isConnected)
+      root.append(layer);
+    cue(root, "hint");
+    let rootRect = root.getBoundingClientRect();
+    badgeNodes = spots.map((t) => {
+      let tag = doc.createElement("kbd");
+      tag.className = "knobs-hint";
+      let typedSpan = doc.createElement("span");
+      typedSpan.className = "knobs-hint-typed";
+      let restSpan = doc.createElement("span");
+      restSpan.className = "knobs-hint-rest", tag.append(typedSpan, restSpan);
+      let rect = t.el.getBoundingClientRect();
+      if (t.labelEl) {
+        let lRect = t.labelEl.getBoundingClientRect(), left = lRect.right - rootRect.left - root.clientLeft + root.scrollLeft + 6, top = lRect.top - rootRect.top - root.clientTop + root.scrollTop + lRect.height * 0.5;
+        tag.style.left = `${Math.round(left)}px`, tag.style.top = `${Math.round(top)}px`;
+      } else {
+        let left = rect.left - rootRect.left - root.clientLeft + root.scrollLeft + 1, top = rect.top - rootRect.top - root.clientTop + root.scrollTop + 1;
+        tag.style.left = `${Math.round(left)}px`, tag.style.top = `${Math.round(top)}px`;
+      }
+      return layer.append(tag), { tag, typedSpan, restSpan };
+    }), paint();
+  }
+  function start(nextTargets) {
+    if (show(nextTargets, assignHintCodes(nextTargets)), !active)
+      return;
+    local = !0, targets = nextTargets;
+  }
+  function narrow(next) {
+    if (next.length > query.length)
+      cue(root, "type");
+    query = next, paint();
+  }
+  function handleKey(event) {
+    if (!active || !local)
+      return !1;
+    if (event.preventDefault(), event.stopPropagation(), event.key === "Escape")
+      stop();
+    else if (event.key === "Backspace")
+      query = query.slice(0, -1), paint();
+    else if (event.key === "Enter") {
+      let resolution = resolveHintCodes(codes, query), first = targets[resolution.matchIndices[0] ?? -1];
+      stop(), first?.activate();
+    } else if (/^[a-zA-Z]$/.test(event.key))
+      cue(root, "type"), query += event.key.toLowerCase(), paint();
+    return !0;
+  }
+  return {
+    get isActive() {
+      return active;
+    },
+    start,
+    show,
+    narrow,
+    stop,
+    handleKey
+  };
+}
+
+// src/panel/page-hints.ts
+var HINT_LETTERS = "asdfghjkleruiowtyqpcvnmxzb", HOME_ROW = 9;
+function assignPageCodes(counts) {
+  let n = HINT_LETTERS.length, result = counts.map((c) => Array(c).fill("")), need = counts.map((c) => c > 0 ? Math.ceil(c / n) : 0), used = need.reduce((a, b) => a + b, 0);
+  if (used <= n) {
+    while (used < n) {
+      let best = -1, most = HOME_ROW;
+      if (counts.forEach((c, i) => {
+        let per = need[i] ? Math.ceil(c / need[i]) : 0;
+        if (per > most)
+          best = i, most = per;
+      }), best < 0)
+        break;
+      need[best]++, used++;
+    }
+    let letter = 0;
+    return counts.forEach((c, i) => {
+      let k = need[i], at = 0;
+      for (let chunk = 0;chunk < k; chunk++) {
+        let size = Math.floor(c / k) + (chunk < c % k ? 1 : 0), first = HINT_LETTERS[letter++];
+        for (let j = 0;j < size; j++)
+          result[i][at + j] = size === 1 ? first : first + HINT_LETTERS[j];
+        at += size;
+      }
+    }), result;
+  }
+  let slot = 0;
+  return counts.forEach((c, i) => {
+    for (let j = 0;j < c; j++, slot++) {
+      let first = Math.floor(slot / n);
+      if (first < n)
+        result[i][j] = HINT_LETTERS[first] + HINT_LETTERS[slot % n];
+    }
+  }), result;
+}
+var COLUMN = 200;
+function orderHintGroups(groups) {
+  return groups.map((g, i) => ({ g, i })).sort((a, b) => a.g.rank - b.g.rank || Math.floor(a.g.left / COLUMN) - Math.floor(b.g.left / COLUMN) || a.g.top - b.g.top || a.g.left - b.g.left || a.i - b.i).map((x) => x.i);
+}
+var PAGE_HINT_KEY = "s", KEY = Symbol.for("knobs.pageHints.v1");
+function pageHints(doc = document) {
+  let holder = doc, registry = holder[KEY] ?? createRegistry(doc);
+  return holder[KEY] = registry, registry;
+}
+var isTyping = isTypingTarget, PRESSABLE = "button,a[href],summary,[role=button],[role=tab],[role=radio],[role=switch],[role=checkbox],[role=menuitem],[role=option]";
+function activateElement(el) {
+  let pressable = el.matches(PRESSABLE) || el.tabIndex < 0 && !el.matches("input,select,textarea");
+  if (el.tabIndex >= 0 || el.matches("input,select,textarea"))
+    el.focus({ preventScroll: !0, focusVisible: !0 });
+  if (pressable)
+    el.click();
+}
+var labelOf = (el) => (el.dataset.hint || el.getAttribute("aria-label") || el.textContent || "").trim();
+function createRegistry(doc) {
+  let win = doc.defaultView, sources = [], session = null, listening = !1, onDocKey = (e) => {
+    if (session || e.defaultPrevented || e.repeat || e.isComposing)
+      return;
+    if (e.metaKey || e.ctrlKey || e.altKey || e.key !== PAGE_HINT_KEY)
+      return;
+    if (isTyping(e.target) || !wide())
+      return;
+    if (registry.start())
+      e.preventDefault();
+  }, wide = () => listening && (sources.length > 1 || [...doc.querySelectorAll("[data-hint]")].some((el) => !el.closest(".knobs-panel"))), relisten = () => {
+    let next = sources.some((s) => s.listen);
+    if (next === listening)
+      return;
+    if (listening = next, next)
+      doc.addEventListener("keydown", onDocKey);
+    else
+      doc.removeEventListener("keydown", onDocKey);
+  }, shown = (el) => {
+    if (!el.isConnected || el.disabled)
+      return !1;
+    if (el.closest("[hidden],[inert],[data-leaving]"))
+      return !1;
+    if (el.getClientRects().length === 0)
+      return !1;
+    let check = el.checkVisibility;
+    return check ? check.call(el, { visibilityProperty: !0 }) : !0;
+  }, collect = () => {
+    let seen = /* @__PURE__ */ new Set, take = (item) => {
+      let t = typeof item.nodeType === "number" ? { el: item } : item, el = t.el;
+      if (seen.has(el) || !shown(el))
+        return null;
+      let label = (t.label ?? labelOf(el)).trim();
+      return seen.add(el), {
+        el,
+        label: label || "x",
+        ...t.labelEl ? { labelEl: t.labelEl } : {},
+        activate: t.activate ?? (() => activateElement(el))
+      };
+    }, groups = [];
+    for (let source of [...sources].sort((a, b) => a.rank - b.rank)) {
+      let targets = [];
+      for (let item of source.targets()) {
+        let t = take(item);
+        if (t)
+          targets.push(t);
+      }
+      if (targets.length)
+        groups.push({ source, targets });
+    }
+    let byGroup = /* @__PURE__ */ new Map;
+    for (let el of doc.querySelectorAll("[data-hint]")) {
+      if (el.closest(".knobs-panel"))
+        continue;
+      let t = take(el);
+      if (!t)
+        continue;
+      let key = el.closest("[data-hint-group]"), list = byGroup.get(key);
+      if (list)
+        list.push(t);
+      else
+        byGroup.set(key, [t]);
+    }
+    for (let targets of byGroup.values())
+      groups.push({ targets });
+    return groups;
+  }, inView = (el, clips) => {
+    if (!win)
+      return !0;
+    let r = el.getBoundingClientRect(), y = r.top + Math.min(r.height / 2, 10), top = 0, left = 0, { innerWidth: right, innerHeight: bottom } = win;
+    for (let p = el.parentElement;p && p !== doc.body; p = p.parentElement) {
+      let clip = clips.get(p);
+      if (clip === void 0) {
+        let cs = win.getComputedStyle(p);
+        clip = cs.overflowX !== "visible" || cs.overflowY !== "visible" ? p.getBoundingClientRect() : null, clips.set(p, clip);
+      }
+      if (!clip)
+        continue;
+      top = Math.max(top, clip.top), left = Math.max(left, clip.left), right = Math.min(right, clip.right), bottom = Math.min(bottom, clip.bottom);
+    }
+    return y >= top && y <= bottom && r.right > left + 2 && r.left < right - 2;
+  }, registry = {
+    register(root, targets, options = {}) {
+      let source = {
+        root,
+        targets,
+        listen: options.listen !== !1,
+        rank: options.rank ?? 2,
+        ...options.paint ? { paint: options.paint } : {}
+      };
+      return sources.push(source), relisten(), () => {
+        let i = sources.indexOf(source);
+        if (i < 0)
+          return;
+        if (sources.splice(i, 1), session?.has(source))
+          registry.stop();
+        relisten();
+      };
+    },
+    start() {
+      registry.stop();
+      let groups = collect();
+      if (groups.length === 0)
+        return !1;
+      let codes;
+      if (groups.length === 1) {
+        let only = groups[0].targets;
+        codes = [assignHintCodes(only.map((t) => ({ key: t.label, display: t.label })))];
+      } else {
+        let clips = /* @__PURE__ */ new Map;
+        if (groups = groups.map((g) => ({ ...g, targets: g.targets.filter((t) => inView(t.el, clips)) })).filter((g) => g.targets.length > 0), groups.length === 0)
+          return !1;
+        groups = orderHintGroups(groups.map((g) => {
+          let left = 1 / 0, top = 1 / 0;
+          for (let t of g.targets) {
+            let r = t.el.getBoundingClientRect();
+            left = Math.min(left, r.left), top = Math.min(top, r.top);
+          }
+          return { rank: g.source?.rank ?? 2, left, top };
+        })).map((i) => groups[i]), codes = groups.length === 1 ? [assignHintCodes(groups[0].targets.map((t) => ({ key: t.label, display: t.label })))] : assignPageCodes(groups.map((g) => g.targets.length));
+      }
+      return session = createSession(doc, groups, codes, () => {
+        session = null;
+      }), !0;
+    },
+    stop() {
+      session?.stop(), session = null;
+    },
+    get active() {
+      return session !== null;
+    },
+    get listening() {
+      return wide();
+    }
+  };
+  return registry;
+}
+function createSession(doc, groups, codes, ended) {
+  let win = doc.defaultView, entries = [], painters = [], shared = { spots: [], codes: [] };
+  if (groups.forEach((g, i) => {
+    let spots = [], mine = [];
+    if (g.targets.forEach((t, j) => {
+      let code = codes[i][j];
+      if (!code)
+        return;
+      entries.push({ target: t, code }), spots.push(t), mine.push(code);
+    }), !spots.length)
+      return;
+    if (g.source?.paint)
+      painters.push(g.source.paint), g.source.paint.show(spots, mine);
+    else
+      shared.spots.push(...spots), shared.codes.push(...mine);
+  }), shared.spots.length) {
+    let layer = layerPainter(doc, groups);
+    painters.push(layer), layer.show(shared.spots, shared.codes);
+  }
+  let allCodes = entries.map((e) => e.code), query = "", over = !1, stop = () => {
+    if (over)
+      return;
+    over = !0;
+    for (let p of painters)
+      p.clear();
+    win?.removeEventListener("keydown", onKey, !0), doc.removeEventListener("scroll", onScroll, !0), doc.removeEventListener("pointerdown", onPointer, !0), win?.removeEventListener("resize", stop), win?.removeEventListener("blur", stop), ended();
+  }, finish = (i) => {
+    let hit = i === void 0 ? void 0 : entries[i];
+    stop(), hit?.target.activate();
+  }, narrow = () => {
+    let r = resolveHintCodes(allCodes, query);
+    if (r.uniqueMatchIndex >= 0)
+      return finish(r.uniqueMatchIndex);
+    for (let p of painters)
+      p.narrow(query);
+  }, onKey = (e) => {
+    if (e.isComposing || ["Shift", "Meta", "Control", "Alt", "CapsLock"].includes(e.key))
+      return;
+    if (e.preventDefault(), e.stopImmediatePropagation(), e.metaKey || e.ctrlKey)
+      return stop();
+    if (e.key === "Escape")
+      stop();
+    else if (e.key === "Backspace")
+      query = query.slice(0, -1), narrow();
+    else if (e.key === "Enter")
+      finish(resolveHintCodes(allCodes, query).matchIndices[0]);
+    else if (/^[a-zA-Z]$/.test(e.key))
+      query += e.key.toLowerCase(), narrow();
+  }, scrolled = /* @__PURE__ */ new Map, offset = (t) => t === doc ? (win?.scrollY ?? 0) + (win?.scrollX ?? 0) : t.scrollTop + t.scrollLeft, onScroll = (e) => {
+    let t = e.target;
+    if (!t)
+      return;
+    let at = offset(t), from = scrolled.get(t);
+    if (from === void 0)
+      scrolled.set(t, at);
+    else if (Math.abs(at - from) > 24)
+      stop();
+  }, onPointer = () => stop();
+  return win?.addEventListener("keydown", onKey, !0), doc.addEventListener("scroll", onScroll, !0), doc.addEventListener("pointerdown", onPointer, !0), win?.addEventListener("resize", stop), win?.addEventListener("blur", stop), {
+    has: (source) => groups.some((g) => g.source === source),
+    stop
+  };
+}
+var STYLE_ID = "knobs-page-hints-css", CSS = `
+.knobs-page-hints{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2147483000}
+.knobs-page-hint{position:fixed;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--kh-radius);background:var(--kh-accent);color:var(--kh-bg);
+  box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--kh-lift)));font:700 var(--kh-size)/1 var(--kh-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
+  animation:knobs-page-hint-in .1s var(--kh-ease)}
+.knobs-page-hint[hidden]{display:none}
+.knobs-page-hint>.knobs-hint-typed{opacity:var(--kh-typed)}
+[data-knobs-hint-miss]{opacity:.32;transition:opacity .1s}
+@keyframes knobs-page-hint-in{from{opacity:0;transform:translateY(calc(4px - 50%)) scale(.985)}to{opacity:1;transform:translateY(-50%)}}
+@media(prefers-reduced-motion:reduce){@keyframes knobs-page-hint-in{from{opacity:0}to{opacity:1}}}
+`;
+function hintTokens(doc, groups) {
+  let win = doc.defaultView, read = (el, names) => {
+    if (!el || !win)
+      return "";
+    let cs = win.getComputedStyle(el);
+    for (let name of names) {
+      let v = cs.getPropertyValue(name).trim();
+      if (v)
+        return v;
+    }
+    return "";
+  }, panel = doc.querySelector(".knobs-panel"), piece = groups.find((g) => g.source && !g.source.paint)?.source?.root, pick = (k, fallback) => read(panel, [`--k-${k}`]) || read(piece, [`--ku-${k}`, `--k-${k}`]) || fallback;
+  return {
+    "--kh-accent": pick("accent", "#fff"),
+    "--kh-bg": pick("bg", "#1c1c1e"),
+    "--kh-mono": pick("mono", "ui-monospace,Menlo,monospace"),
+    "--kh-radius": read(panel, ["--k-radius-sm"]) || "4px",
+    "--kh-size": read(panel, ["--k-text-cap"]) || "10px",
+    "--kh-typed": read(panel, ["--k-hint-typed-opacity"]) || ".42",
+    "--kh-lift": read(panel, ["--k-lift"]) || "1",
+    "--kh-ease": read(panel, ["--k-ease"]) || "cubic-bezier(.2,.8,.2,1)"
+  };
+}
+function layerPainter(doc, groups) {
+  let layer = doc.createElement("div");
+  layer.className = "knobs-page-hints", layer.setAttribute("aria-hidden", "true");
+  let spots = [], codes = [], nodes = [];
+  return {
+    show(next, nextCodes) {
+      if (!doc.getElementById(STYLE_ID)) {
+        let style = doc.createElement("style");
+        style.id = STYLE_ID, style.textContent = CSS, doc.head.append(style);
+      }
+      spots = next, codes = nextCodes;
+      for (let [k, v] of Object.entries(hintTokens(doc, groups)))
+        layer.style.setProperty(k, v);
+      nodes = spots.map((t, i) => {
+        let tag = doc.createElement("kbd");
+        tag.className = "knobs-page-hint";
+        let typed = doc.createElement("span");
+        typed.className = "knobs-hint-typed";
+        let rest = doc.createElement("span");
+        rest.textContent = codes[i] ?? "", tag.append(typed, rest);
+        let r = (t.labelEl ?? t.el).getBoundingClientRect(), left = t.labelEl ? r.right + 6 : r.left + 1;
+        return tag.style.left = `${Math.round(left)}px`, tag.style.top = `${Math.round(r.top + r.height / 2)}px`, layer.append(tag), { tag, typed, rest };
+      }), doc.body.append(layer);
+    },
+    narrow(query) {
+      let r = resolveHintCodes(codes, query);
+      nodes.forEach((n, i) => {
+        let b = r.badges[i];
+        n.tag.hidden = !b.match, n.typed.textContent = b.typed, n.rest.textContent = b.rest, spots[i].el.toggleAttribute("data-knobs-hint-miss", !b.match);
+      });
+    },
+    clear() {
+      for (let t of spots)
+        t.el.removeAttribute("data-knobs-hint-miss");
+      layer.remove(), layer.replaceChildren(), spots = [], nodes = [];
+    }
+  };
+}
+
+// src/panel/toggle.ts
+function isToggleKey(event, key) {
+  if (!key || event.defaultPrevented || event.repeat || event.isComposing)
+    return !1;
+  if (event.ctrlKey || event.metaKey || event.altKey)
+    return !1;
+  if (isTypingTarget(event.target))
+    return !1;
+  if (event.key === key)
+    return !0;
+  return key === "`" && event.code === "Backquote" && !event.shiftKey;
+}
+var KEY2 = Symbol.for("knobs.toggle.v1"), memoryKey = (id) => storageKey(id, "shown");
+function toggleLayer(doc) {
+  let holder = doc;
+  return holder[KEY2] ??= createLayer(doc);
+}
+function createLayer(doc) {
+  let win = doc.defaultView, surfaces = /* @__PURE__ */ new Set, state = /* @__PURE__ */ new Map, pressed = /* @__PURE__ */ new Map, lastFocus, isShown = (s) => {
+    let on = state.get(s.id) ?? pressed.get(s.key);
+    if (on === void 0)
+      try {
+        on = s.storage()?.getItem(memoryKey(s.id)) !== "0";
+      } catch {
+        on = !0;
+      }
+    return state.set(s.id, on), on;
+  }, toggle = (key) => {
+    let mine = [...surfaces].filter((s) => s.key === key);
+    if (!mine.length)
+      return !1;
+    let next = !mine.some(isShown);
+    if (pressed.set(key, next), !next) {
+      let active = doc.activeElement;
+      if (active && mine.some((s) => s.root.contains(active)))
+        lastFocus = active, active.blur();
+      pageHints(doc).stop();
+    }
+    for (let s of mine) {
+      state.set(s.id, next);
+      try {
+        s.storage()?.setItem(memoryKey(s.id), next ? "1" : "0");
+      } catch {}
+    }
+    for (let s of mine)
+      s.show(next, !0);
+    if (next) {
+      let active = doc.activeElement;
+      if (lastFocus?.isConnected && (!active || active === doc.body))
+        lastFocus.focus({ preventScroll: !0 });
+      lastFocus = void 0;
+    }
+    return !0;
+  }, onKey = (event) => {
+    let keys = new Set([...surfaces].map((s) => s.key));
+    for (let key of keys)
+      if (isToggleKey(event, key))
+        return void toggle(key);
+  };
+  return {
+    register(surface) {
+      if (!surfaces.size)
+        win.addEventListener("keydown", onKey, !0);
+      return surfaces.add(surface), {
+        shown: isShown(surface),
+        dispose() {
+          if (surfaces.delete(surface), !surfaces.size)
+            win.removeEventListener("keydown", onKey, !0);
+        }
+      };
+    },
+    toggle
+  };
+}
+
+export { CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, rolling_css_default, presetCss, FILL, LEAD, trailScale, Edges, POP_MS, popScale, settleScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, FLASH_MS, flash, flashOf, offRow, precisionRate, RULER, RULER_NEAR, RULER_FADE, rulerLevels, rulerAlpha, rulerDepth, THIN, THINNEST, thinOf, roundOf, stretchOf, stretchAt, giveRoom, detentScale, detentsOf, roundValues, unwarp, Notches, escapeTo, commandScope, scopeLabel, crumbTrail, escTarget, digitOption, digitHints, createCrumbs, DELAYED, injectPreset, injectStyles, resolveSound, sound, SOUND_PREF, soundPanel, changed, cue, createHintController, pageHints, toggleLayer };