@kitlangton/knobs 0.4.0-next.11 → 0.4.0-next.13

package/dist/dev/{chunk-bnhzf1tj.js → chunk-mbhy4jg5.js}

@@ -13,6 +13,7 @@ import {
   comboFromEvent2,
   heldMods,
   matchesCombo2,
+  comboParts2,
   comboLabel2,
   isTypingTarget,
   GRADIENT_SAMPLES,
@@ -25,6 +26,7 @@ import {
   sameRamp,
   isReadout2,
   hasValue2,
+  variantsOf,
   SPRING2,
   toolbarShortcut2,
   actionShortcut2,
@@ -44,7 +46,7 @@ import {
   pushReadout,
   READOUT,
   storageKey
-} from "./chunk-mjdgzad5.js";
+} from "./chunk-7kns3qe6.js";
 import {
   resolveLook,
   themeOf,
@@ -99,6 +101,7 @@ import {
   crumbTrail,
   escTarget,
   digitOption,
+  digitRoute,
   digitHints,
   createCrumbs,
   TOKENS,
@@ -116,7 +119,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-j57rhjtm.js";
+} from "./chunk-pdf3zy95.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -957,8 +960,8 @@ function panOptions(el, o) {
 
 // src/panel/presets.ts
 var DRIFTED_PILL = 0.5;
-function activeEntryId(controls) {
-  let ref = controls.activePreset();
+function activeEntryId(controls, scope = "") {
+  let ref = controls.activePreset(scope);
   return ref ? `${ref.kind === "preset" ? "p" : "v"}:${ref.id}` : null;
 }
 function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId = null) {
@@ -994,6 +997,11 @@ function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId
     isCustom: !0
   };
 }
+function presetLines(count, min, avail, gap) {
+  if (count <= 0 || min <= 0 || avail <= 0)
+    return 1;
+  return Math.ceil(count / Math.max(1, Math.floor((avail + gap) / (min + gap))));
+}
 function presetsTouch(entries, keys, defaults) {
   return entries.some((e) => !(e.kind === "preset" && e.rawId === "default") && keys.some((k) => !same(e.values[k], defaults[k])));
 }
@@ -1004,7 +1012,7 @@ function nextPresetIndex(count, activeIndex, direction) {
     return direction > 0 ? 0 : count - 1;
   return ((activeIndex + direction) % count + count) % count;
 }
-function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id) => controls.presetLabel(id), relevant) {
+function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id, scope) => controls.presetLabel(id, scope), relevant, scopeOf = () => "") {
   let wake = () => onAfterChange?.(), el = (tag, cls, text) => {
     let node = doc.createElement(tag);
     if (cls)
@@ -1021,31 +1029,34 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     saveButton.type = "button", saveButton.tabIndex = -1, saveButton.setAttribute("aria-label", "Save as variant"), saveButton.setAttribute("aria-keyshortcuts", "Shift+S"), saveButton.dataset.hint = "Save", saveButton.onclick = () => run(save);
   if (track.append(pill), root.append(track), saveButton)
     root.append(saveButton);
-  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0, unpinned = (values) => {
+  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0, display = "auto", chipMin = 0, scope = null, at = () => scope ?? "", source = () => scope === null ? void 0 : scope === "" ? { presets: controls.presets, variants: controls.variants } : controls.scopes[scope], unpinned = (values) => {
     let out;
     for (let k of Object.keys(values))
-      if (controls.isPinned(k) && !same(values[k], controls.locked[k]))
+      if (controls.scopeOf(k) !== at() && !same(values[k], controls.locked[k]))
         out ??= { ...values }, out[k] = controls.locked[k];
     return out ?? values;
   };
   function buildEntries() {
-    let presetEntries = Object.entries(controls.presets).map(([id, presetValues]) => ({
+    let from = source();
+    if (!from)
+      return [];
+    let where = at(), presetEntries = Object.entries(from.presets).map(([id, presetValues]) => ({
       id: `p:${id}`,
       kind: "preset",
       rawId: id,
-      label: presetLabel(id),
+      label: presetLabel(id, where),
       values: presetValues,
-      apply: (coalesce) => controls.preset(id, { coalesce })
+      apply: (coalesce) => controls.preset(id, { coalesce, scope: where })
     }));
     if (!showVariants)
       return presetEntries;
-    let variantEntries = controls.variants.list().map((v) => ({
+    let variantEntries = from.variants.list().map((v) => ({
       id: `v:${v.id}`,
       kind: "variant",
       rawId: v.id,
       label: v.name ?? v.id.slice(0, 8),
       values: unpinned(v.values),
-      apply: (coalesce) => controls.variants.load(v.id, { coalesce })
+      apply: (coalesce) => from.variants.load(v.id, { coalesce })
     }));
     return [...presetEntries, ...variantEntries];
   }
@@ -1079,7 +1090,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     if (pill.style.left = `${left}px`, pill.style.right = `${box.trackWidth - right}px`, pill.style.top = `${top}px`, pill.style.height = `${box.height}px`, pill.style.opacity = activeState.drifted ? String(DRIFTED_PILL) : "1", pill.style.scale = "", first)
       doc.defaultView?.requestAnimationFrame(() => pill.style.transition = "");
   }
-  let resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls)), wanted = (list) => (list.length > 1 || showVariants) && (relevant?.(list) ?? !0);
+  let resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls, at())), wanted = (list) => scope !== null && (list.length > 1 || showVariants) && (relevant?.(list) ?? !0);
   function syncShown() {
     let show = wanted(entries);
     if (root.hidden === show && root.dataset.presence === void 0)
@@ -1122,13 +1133,16 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   function update() {
     run(() => {
-      let variantsRef = showVariants ? controls.variants.list() : null;
-      if (signature !== "" && variantsRef === lastVariantsRef) {
+      let was = scope;
+      if (scope = scopeOf(), scope !== was)
+        lastAppliedId = null;
+      let variantsRef = showVariants ? source()?.variants.list() ?? null : null;
+      if (signature !== "" && scope === was && variantsRef === lastVariantsRef) {
         syncShown(), syncSelection(!1);
         return;
       }
       lastVariantsRef = variantsRef;
-      let nextEntries = buildEntries(), nextSig = JSON.stringify(nextEntries.map((e) => [e.id, e.label]));
+      let nextEntries = buildEntries(), nextSig = JSON.stringify([scope, nextEntries.map((e) => [e.id, e.label])]);
       if (entries = nextEntries, syncShown(), nextSig !== signature)
         signature = nextSig, entries = nextEntries, buttons = entries.map((entry, idx) => {
           let b = el("button", "knobs-preset-chip", entry.label);
@@ -1152,15 +1166,29 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       range.selectNodeContents(b), widest = Math.max(widest, range.getBoundingClientRect().width);
     }
     if (widest > 0)
-      track.style.setProperty("--k-preset-min", `${Math.ceil(widest * 1.06 + 14)}px`);
+      chipMin = Math.ceil(widest * 1.06 + 14), track.style.setProperty("--k-preset-min", `${chipMin}px`);
+    placeDisplay();
+  }
+  function chipLines() {
+    let pad = parseFloat(getComputedStyle(root).getPropertyValue("--_k-tray-pad")) || 0, save = saveButton ? saveButton.offsetWidth + pad : 0;
+    return presetLines(buttons.length, chipMin, root.clientWidth - pad * 2 - save, pad);
+  }
+  function placeDisplay() {
+    let want = display === "list" || display === "auto" && chipLines() > 2 ? "list" : "chips";
+    if (root.dataset.display === want)
+      return !1;
+    return root.dataset.display = want, !0;
   }
   function save() {
     finishName(!0);
-    let used = new Set(controls.variants.list().map((v) => v.name)), n = 1;
+    let variants = source()?.variants;
+    if (!variants)
+      return "";
+    let used = new Set(variants.list().map((v) => v.name)), n = 1;
     while (used.has(`Variant ${n}`))
       n++;
-    let variant = controls.variants.save(`Variant ${n}`);
-    return controls.variants.load(variant.id), lastAppliedId = `v:${variant.id}`, update(), startName(entries.findIndex((e) => e.id === `v:${variant.id}`), !0), onAfterChange?.(), `Saved “Variant ${n}”. Type a name, or Enter to keep it.`;
+    let variant = variants.save(`Variant ${n}`);
+    return variants.load(variant.id), lastAppliedId = `v:${variant.id}`, update(), startName(entries.findIndex((e) => e.id === `v:${variant.id}`), !0), onAfterChange?.(), `Saved “Variant ${n}”. Type a name, or Enter to keep it.`;
   }
   let naming = null;
   function placeName() {
@@ -1204,7 +1232,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       focusQuietly();
     let message;
     if (keep && entry?.kind === "variant" && name && name !== was)
-      controls.variants.rename(entry.rawId, name), update(), message = `Named “${name}”.`;
+      source()?.variants.rename(entry.rawId, name), update(), message = `Named “${name}”.`;
     return onAfterChange?.(), message;
   }
   function rename() {
@@ -1220,7 +1248,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     let entry = entries[activeState.activeIndex];
     if (!entry || entry.kind !== "variant")
       return;
-    return controls.variants.remove(entry.rawId), lastAppliedId = null, update(), onAfterChange?.(), `Deleted “${entry.label}”.`;
+    return source()?.variants.remove(entry.rawId), lastAppliedId = null, update(), onAfterChange?.(), `Deleted “${entry.label}”.`;
   }
   let scrubbing = !1, scrubCommitted = !1, chipIndexAt = (clientX, clientY) => {
     let best = -1, bestDist = 1 / 0;
@@ -1288,8 +1316,8 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     minWidth: 20,
     rows: !0
   }), doc.fonts?.ready.then(fitColumns);
-  let ro = new ResizeObserver(() => measurePill(performance.now() >= slideUntil));
-  return ro.observe(track), {
+  let ro = new ResizeObserver(() => measurePill(placeDisplay() || performance.now() >= slideUntil));
+  return ro.observe(track), ro.observe(root), {
     element: root,
     track,
     pill,
@@ -1302,7 +1330,15 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     getActiveState: () => activeState,
     shows: () => wanted(entries),
     cycle,
+    select: (index) => {
+      if (index !== activeState.activeIndex || activeState.drifted)
+        selectAt(index);
+    },
     selectById,
+    display(mode) {
+      if (display = mode, placeDisplay())
+        measurePill(!0);
+    },
     save: () => {
       let message = "";
       return run(() => message = save()), message;
@@ -2944,7 +2980,8 @@ fn hash21(q: vec2f) -> f32 {
 
 // kind 0: Panel card surface + elevation shadow + border + specular rim. With a hairline width
 // (extra.z, whole device px) the edge is that hairline just outside the card, like CSS's
-// 0 0 0 w spread shadow, and the rim is CSS's inset 0 w 0; otherwise a 1px border and a 1px rim.
+// 0 0 0 w spread shadow, and the rim lights its top, like CSS's 0 -w 0 (one edge, not two);
+// otherwise a 1px border and a 1px rim inside it.
 fn shadePanel(p: Prim, local: vec2f, size: vec2f) -> vec4f {
   let r = p.look.x;
   let dist = roundedBox(local, size, r);
@@ -2953,6 +2990,8 @@ fn shadePanel(p: Prim, local: vec2f, size: vec2f) -> vec4f {
   var out = vec4f(0.0);
   if (hair > 0.0 && dist > -1.0) {
     out = premul(p.color2) * clamp(covSd(dist - hair) - bodyCov, 0.0, 1.0);
+    let raised = covSd(roundedBox(local + vec2f(0.0, hair), size, r));
+    out = over(out, premul(p.aux2) * clamp(raised - bodyCov, 0.0, 1.0));
   }
 
   // Floating drop shadow when glowOrBlur (look.z) > 0; like box-shadow, never under the card.
@@ -2966,13 +3005,16 @@ fn shadePanel(p: Prim, local: vec2f, size: vec2f) -> vec4f {
 
   var card = premul(p.color) * bodyCov;
 
-  // The rim, built like CSS's inset 0 w 0: inside the border, minus that shape moved down w.
+  // Without a hairline, the rim is CSS's inset 0 1px 0: inside the border, minus that shape
+  // moved down.
   let inner = local - vec2f(1.0);
   let innerSize = size - vec2f(2.0);
   let w = select(1.0, hair, hair > 0.0);
   let innerCov = covSd(roundedBox(inner, innerSize, r - 1.0));
-  let rimCov = innerCov * (1.0 - covSd(roundedBox(inner - vec2f(0.0, w), innerSize, r - 1.0)));
-  card = over(card, premul(p.aux2) * rimCov);
+  if (hair <= 0.0) {
+    let rimCov = innerCov * (1.0 - covSd(roundedBox(inner - vec2f(0.0, w), innerSize, r - 1.0)));
+    card = over(card, premul(p.aux2) * rimCov);
+  }
 
   // A morphing card's specular ring (extra.y), w wide inside the border like CSS's inset 0 0 0 w.
   if (p.extra.y > 0.001) {
@@ -5642,7 +5684,9 @@ class GpuOverlayManager {
         this.drawIcon(item.icon, t.iconSm, at, ink, cardClip, k);
       }
       let lr = this.rectOf(item.label), px = t.buttonFontSize ?? t.textControl, words = this.fit(item.label.textContent ?? "", lr.width + 1, px, t.labelWeight);
-      if (this.drawText(words, lr.left, cy, ink, { px, weight: t.labelWeight, ...zoom }), item.chip) {
+      if (lr.width > 0)
+        this.drawText(words, lr.left, cy, ink, { px, weight: t.labelWeight, ...zoom });
+      if (item.chip && item.chip.getClientRects().length) {
         let kr = this.rectOf(item.chip);
         this.drawText(item.chip.textContent ?? "", kr.left, cy, withAlpha(t.dim, alpha), {
           px: t.textCap,
@@ -6447,7 +6491,10 @@ class GpuOverlayManager {
           this.drawRoundWash(dr, rowAlpha, this.wash(button, on)), this.drawDie(die, dr, withAlpha(this.hot(button, on, tokens.dim), rowAlpha)), this.drawRowOverlay(row.row, rRect, cardClip);
         } else if (row.kind === "keybind")
           this.drawKeybind(row, rRect, cardClip, rowAlpha, hovered);
-        else if (row.kind === "toolbar")
+        else if (row.kind === "text") {
+          let labelY = row.row.hasAttribute("data-multiline") ? this.rectOf(row.labelEl).top + this.rectOf(row.labelEl).height / 2 : rowCenterY;
+          this.drawRowHover(row.row, rRect, hovered || row.row.classList.contains("knobs-active")), this.drawRowLabel(row.labelEl, row.display, row.isModified(), labelY, rowAlpha), this.drawRowOverlay(row.row, rRect, cardClip);
+        } else if (row.kind === "toolbar")
           this.drawToolbar(row, rRect, cardClip, rowAlpha, hinting);
         else if (row.kind === "readout")
           this.drawReadout(row, rRect, cardClip, rowAlpha, hovered);
@@ -10392,954 +10439,6 @@ function toolbarColumns(count, widest, avail, gap) {
   return Math.ceil(count / Math.ceil(count / cols));
 }
 
-// src/panel/inspector.ts
-function make(doc) {
-  return (tag, cls, text) => {
-    let node = doc.createElement(tag);
-    if (cls)
-      node.className = cls;
-    if (text !== void 0)
-      node.textContent = text;
-    return node;
-  };
-}
-function shell(c, kind) {
-  let el = make(c.doc), row = el("div", "knobs-row knobs-insp");
-  row.dataset.field = c.key, row.dataset.kind = kind;
-  let label = el("span", void 0, c.display);
-  return row.append(label), { row, label, el };
-}
-var fmt = (v, places) => (Object.is(v, -0) ? 0 : v).toFixed(places);
-function inlineEdit(doc, host, label, commit, back) {
-  let input = doc.createElement("input");
-  input.className = "knobs-cell-edit", input.type = "text", input.inputMode = "decimal", input.spellcheck = !1, input.hidden = !0, input.setAttribute("aria-label", label), host.append(input);
-  let open = !1, done = (keep) => {
-    if (!open)
-      return;
-    open = !1;
-    let next = Number(input.value.trim().replace(/[^\d.eE+-]/g, ""));
-    if (input.hidden = !0, host.classList.remove("knobs-editing"), keep && input.value.trim() !== "" && Number.isFinite(next))
-      commit(next);
-    let target = back();
-    if (doc.activeElement === input || doc.activeElement === doc.body)
-      target.focus({ preventScroll: !0 });
-  };
-  return input.addEventListener("keydown", (event) => {
-    if (event.key === "Enter" || event.key === "Escape")
-      event.preventDefault(), event.stopPropagation(), done(event.key === "Enter");
-    else
-      event.stopPropagation();
-  }), input.addEventListener("blur", () => done(!0)), {
-    input,
-    get open() {
-      return open;
-    },
-    start(text, select = !0) {
-      if (open = !0, input.value = text, input.hidden = !1, host.classList.add("knobs-editing"), input.focus({ preventScroll: !0 }), select)
-        input.select();
-      else
-        input.setSelectionRange(text.length, text.length);
-    },
-    done
-  };
-}
-var typed = (event) => plainKey(event) && !event.altKey && /^[0-9.\-]$/.test(event.key) ? event.key : void 0;
-function scrub(target, row, o) {
-  let at, moved = !1, last = 0, carried = 0, rect;
-  target.addEventListener("pointerdown", (event) => {
-    if (event.button !== 0 || event.shiftKey || event.metaKey)
-      return;
-    event.preventDefault(), target.setPointerCapture(event.pointerId), target.focus({ preventScroll: !0, focusVisible: !1 }), at = last = event.clientX, carried = 0, moved = !1;
-  }), target.addEventListener("pointermove", (event) => {
-    if (at === void 0)
-      return;
-    if (!moved && Math.abs(event.clientX - at) < 3)
-      return;
-    if (!moved)
-      moved = !0, last = event.clientX, rect = row.getBoundingClientRect(), row.classList.add("knobs-active"), o.start();
-    let r = rect, rate = precisionRate(offRow(event.clientY, r.top, r.bottom)) * (event.altKey ? 0.1 : 1);
-    carried += (event.clientX - last) * rate, last = event.clientX, o.move(carried, event.altKey, event.shiftKey);
-  });
-  let release = (event) => {
-    if (at === void 0)
-      return;
-    at = void 0, rect = void 0, row.classList.remove("knobs-active"), o.end(moved, event);
-  };
-  return target.addEventListener("pointerup", release), target.addEventListener("pointercancel", release), { scrubbing: () => at !== void 0 && moved };
-}
-var rate = (min, max, step) => Math.max(step, (max - min) / 200), onGrid = (v, min, step) => Number((min + Math.round((v - min) / step) * step).toPrecision(12)), AXES = ["x", "y", "z"];
-function vecRow(c) {
-  let { row, label, el } = shell(c, "vec"), f = () => c.field, places = () => f().decimals ?? decimals(f().step), axes = AXES.slice(0, c.field.axes), cells = el("span", "knobs-cells");
-  if (axes.length > 2)
-    cells.dataset.wide = "";
-  let linked = Boolean(c.field.linked), link;
-  if (c.field.link) {
-    link = el("button", "knobs-link"), link.type = "button", link.tabIndex = -1;
-    let paint = () => {
-      link.replaceChildren(iconSvg(c.doc, linked ? "link" : "unlink")), link.setAttribute("aria-pressed", String(linked)), link.setAttribute("aria-label", linked ? "Unlink axes" : "Link axes");
-    };
-    paint(), link.onclick = () => {
-      linked = !linked, paint(), c.wake();
-    }, row.append(link);
-  }
-  row.append(cells);
-  let shown = c.get(), mixed = !1, g = gesture(c), base = shown, withAxis = (from, axis, v) => {
-    let { min, max, step } = f(), next = clamp(onGrid(v, min, step), min, max);
-    if (!linked)
-      return { ...from, [axis]: next };
-    let was = from[axis] ?? 0, k = Math.abs(was) > 0.000000001 ? next / was : void 0, out = {};
-    for (let a of axes) {
-      let own = from[a] ?? 0;
-      out[a] = a === axis ? next : clamp(Number((k !== void 0 ? own * k : own + (next - was)).toPrecision(12)), min, max);
-    }
-    return out;
-  }, gpuCells = [], reads = [], rolls = [], stops = [];
-  for (let axis of axes) {
-    let cell = el("span", "knobs-cell");
-    cell.tabIndex = 0, cell.dataset.axis = axis, cell.setAttribute("role", "spinbutton");
-    let name = c.field.axisLabels?.[axes.indexOf(axis)] ?? axis;
-    cell.setAttribute("aria-label", `${c.display} ${name}`);
-    let letter = el("i", "knobs-cell-axis", name.toUpperCase());
-    letter.setAttribute("aria-hidden", "true");
-    let read = el("span", "knobs-cell-read");
-    cell.append(letter, read), cells.append(cell), reads.push(read), rolls.push(rollingReadout(read)), stops.push(cell);
-    let editor = inlineEdit(c.doc, cell, `${c.display} ${name} value`, (v) => {
-      g.start(), g.set(withAxis(c.get(), axis, v));
-    }, () => cell), drag = scrub(cell, row, {
-      perPx: () => rate(f().min, f().max, f().step),
-      start() {
-        g.start(), base = c.get();
-      },
-      move(dx, _fine, coarse) {
-        let by = dx * rate(f().min, f().max, f().step) * (coarse ? 10 : 1);
-        g.set(withAxis(base, axis, (base[axis] ?? 0) + by));
-      },
-      end(moved) {
-        if (!moved)
-          editor.start(mixed ? "" : fmt(shown[axis] ?? 0, places()));
-        c.wake();
-      }
-    }), panAt, give = textGive(read, () => c.wake());
-    onPan(cell, {
-      accept: () => !drag.scrubbing() && !editor.open,
-      move(dx) {
-        let perPx = rate(f().min, f().max, f().step);
-        if (panAt === void 0)
-          g.start(), base = c.get(), panAt = { at: 0, give: 0 }, row.classList.add("knobs-active"), cell.setAttribute("data-panned", "");
-        let from = base[axis] ?? 0;
-        if (panAt = band(panAt, dx, (f().min - from) / perPx, (f().max - from) / perPx), g.set(withAxis(base, axis, from + panAt.at * perPx)), panAt.give !== give.give)
-          give.hold(panAt.give);
-      },
-      lift: () => give.release(),
-      end() {
-        panAt = void 0, give.release(), row.classList.remove("knobs-active"), cell.removeAttribute("data-panned"), c.wake();
-      },
-      step(direction) {
-        g.start(), g.set(withAxis(c.get(), axis, (shown[axis] ?? 0) + direction * f().step));
-      }
-    }), cell.addEventListener("keydown", (event) => {
-      if (event.target !== cell || !plainKey(event))
-        return;
-      let dir = arrowOf(event), char = typed(event);
-      if (dir) {
-        event.preventDefault(), event.stopPropagation();
-        let by = f().step * (event.shiftKey ? bigOf(event) : event.altKey ? 0.1 : 1);
-        g.start(), g.set(withAxis(c.get(), axis, (shown[axis] ?? 0) + dir * by));
-      } else if (event.key === "Home" || event.key === "End")
-        event.preventDefault(), g.start(), g.set(withAxis(c.get(), axis, event.key === "Home" ? f().min : f().max));
-      else if (event.key === "Enter" && keyPrefs(cell).edit)
-        event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : fmt(shown[axis] ?? 0, places()));
-      else if (char && keyPrefs(cell).edit)
-        event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
-    }), gpuCells.push({
-      el: cell,
-      axis: letter,
-      read,
-      editing: () => editor.open,
-      active: () => drag.scrubbing() || panAt !== void 0
-    });
-  }
-  let paint = (ms = 0, delay = 0) => {
-    axes.forEach((axis, i) => {
-      let text = mixed ? "—" : fmt(shown[axis] ?? 0, places()), unit = f().unit && !mixed ? ` ${f().unit}` : "";
-      rolls[i].show(mixed ? ["—"] : [{ value: shown[axis] ?? 0, decimals: places() }], ms, delay), stops[i].setAttribute("aria-valuetext", `${text}${unit}`);
-    });
-  };
-  paint();
-  let placed = !1, gpu = {
-    kind: "vec",
-    key: c.key,
-    display: c.display,
-    row,
-    labelEl: label,
-    cells: gpuCells,
-    ...link ? { link } : {},
-    linked: () => linked,
-    wave: c.wave,
-    isModified: c.isModified
-  };
-  return {
-    row,
-    labelEl: label,
-    input: stops[0],
-    stops: () => stops,
-    update(value, delay, instant, isMixed = !1) {
-      shown = value, mixed = isMixed;
-      let hand = row.classList.contains("knobs-active");
-      paint(!placed || instant || hand ? 0 : rollMs(row), delay), placed = !0;
-    },
-    dispose() {
-      for (let r of rolls)
-        r.dispose();
-    },
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-function rangeRow(c) {
-  let el = make(c.doc), f = () => c.field, places = () => f().decimals ?? decimals(f().step), row = el("div", "knobs-row knobs-range");
-  row.dataset.field = c.key;
-  let track = el("div", "knobs-range-track"), fill = el("i", "knobs-range-fill"), label = el("span", "knobs-label", c.display), read = el("span", "knobs-range-read"), thumbs = ["lo", "hi"].map((end) => {
-    let t = el("span", "knobs-range-thumb");
-    return t.dataset.end = end, t.tabIndex = 0, t.setAttribute("role", "slider"), t.setAttribute("aria-label", `${c.display} ${end === "lo" ? "low" : "high"}`), t;
-  }), words = el("span", "knobs-range-text");
-  words.append(label, read);
-  let band2 = el("i", "knobs-range-smear");
-  track.append(fill, band2, ...thumbs, words), row.append(track);
-  let shown = c.get(), mixed = !1, dragging = !1, smearFrame = 0, smearAt = 0, smearStrength = 0, lastEnds = [0, 0], smears = [0, 0], ends = () => {
-    let cs = getComputedStyle(track);
-    return [
-      parseFloat(cs.getPropertyValue("--kr-lo")) || 0,
-      parseFloat(cs.getPropertyValue("--kr-hi")) || 0
-    ];
-  }, setSmears = (lo, hi) => {
-    smears[0] = lo === 0 ? 0 : (smears[0] + lo) / 2, smears[1] = hi === 0 ? 0 : (smears[1] + hi) / 2, track.classList.toggle("knobs-range-smearing", smears[0] > 0 || smears[1] > 0), track.style.setProperty("--kr-smear-lo", smears[0].toFixed(2)), track.style.setProperty("--kr-smear-hi", smears[1].toFixed(2));
-  }, runSmear = (now) => {
-    let at = ends(), dt = (now - smearAt) / 1000, w = track.clientWidth, speeds = [0, 1].map((i) => dt > 0 ? Math.abs(at[i] - lastEnds[i]) * w / dt : 0);
-    lastEnds = at, smearAt = now;
-    let gliding = !dragging && track.getAnimations().length > 0;
-    setSmears(gliding ? rangeSmear(speeds[0], smearStrength) : 0, gliding ? rangeSmear(speeds[1], smearStrength) : 0), smearFrame = gliding ? requestAnimationFrame(runSmear) : 0;
-  };
-  track.addEventListener("transitionrun", (event) => {
-    if (event.target !== track || smearFrame || dragging)
-      return;
-    if (track.closest('[data-gpu-active="true"]'))
-      return;
-    smearStrength = clamp(parseFloat(getComputedStyle(track).getPropertyValue("--k-range-blur")) || 0, 0, 1);
-    let reduced = c.doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (smearStrength <= 0 || reduced)
-      return;
-    lastEnds = ends(), smearAt = performance.now(), smearFrame = requestAnimationFrame(runSmear);
-  });
-  let lastEnd = 0, g = gesture(c), span = () => f().max - f().min || 1, ratio = (v) => clamp((v - f().min) / span(), 0, 1), quant = (v, fine) => clamp(onGrid(v, f().min, fine ? f().step / 10 : f().step), f().min, f().max), withEnd = (from, end, v, fine = !1) => {
-    let q = quant(v, fine);
-    return end === 0 ? [Math.min(q, from[1]), from[1]] : [from[0], Math.max(q, from[0])];
-  }, rolling = rollingReadout(read), showText = (ms, delay) => rolling.show(mixed ? ["—"] : [
-    { value: shown[0], decimals: places() },
-    "–",
-    { value: shown[1], decimals: places() },
-    f().unit ? ` ${f().unit}` : ""
-  ], ms, delay), place = (instant) => {
-    let [a, b] = [ratio(shown[0]), ratio(shown[1])], nodes = [fill, track];
-    if (instant)
-      for (let n of nodes)
-        n.style.transition = "none";
-    if (fill.style.transform = `translateX(${(a * 100).toFixed(4)}%) scaleX(${Math.max(0, b - a).toFixed(5)})`, track.style.setProperty("--kr-lo", a.toFixed(6)), track.style.setProperty("--kr-hi", b.toFixed(6)), instant) {
-      fill.offsetWidth;
-      for (let n of nodes)
-        n.style.transition = "";
-    }
-  }, paint = (instant, delay = 0) => {
-    showText(instant ? 0 : rollMs(row), delay), thumbs.forEach((th, i) => {
-      th.setAttribute("aria-valuenow", String(shown[i])), th.setAttribute("aria-valuemin", String(i === 0 ? f().min : shown[0])), th.setAttribute("aria-valuemax", String(i === 0 ? shown[1] : f().max));
-    }), place(instant);
-  }, grab = 0, startValue = shown, rect, lastX = 0, hand = { at: 0, give: 0 }, moved = 0, card = () => row.parentElement?.classList.contains("knobs-card") ? row.parentElement : null, give = textGive(row, () => c.wake(), {
-    home: STRETCH_HOME_S,
-    draw: (px) => drawStretch(row, px, 0, { w: track.clientWidth, h: 0 }, { thin: !0, unclip: card() })
-  }), most = GIVE, fit = () => {
-    let room = roomOf(row, card());
-    most = giveRoom(Math.min(room.left, room.right) - 1, GIVE);
-  }, valueAt = (x) => f().min + clamp((x - rect.left) / rect.width, 0, 1) * span();
-  track.addEventListener("pointerdown", (event) => {
-    if (event.button !== 0 || event.shiftKey || event.metaKey)
-      return;
-    if (event.target.closest(".knobs-cell-edit,.knobs-accessory"))
-      return;
-    event.preventDefault(), track.setPointerCapture(event.pointerId), rect = track.getBoundingClientRect();
-    let x = event.clientX - rect.left, [ax, bx] = [ratio(shown[0]) * rect.width, ratio(shown[1]) * rect.width];
-    if (grab = x > ax + 8 && x < bx - 8 && bx - ax > 24 ? 2 : Math.abs(x - ax) <= Math.abs(x - bx) && !(x > bx) ? 0 : 1, ax === bx)
-      grab = x < ax ? 0 : 1;
-    if (grab !== 2)
-      lastEnd = grab;
-    if (thumbs[grab === 2 ? lastEnd : grab].focus({
-      preventScroll: !0,
-      focusVisible: !1
-    }), lastX = event.clientX, startValue = shown, moved = 0, fit(), hand = {
-      at: grab === 2 || event.altKey ? ratio(shown[grab === 2 ? 0 : grab]) * rect.width : clamp(x, 0, rect.width),
-      give: 0
-    }, dragging = !0, row.classList.add("knobs-active"), g.start(), grab !== 2 && !event.altKey)
-      g.set(withEnd(shown, grab, valueAt(event.clientX)));
-    c.wake();
-  }), track.addEventListener("pointermove", (event) => {
-    if (!dragging || !rect)
-      return;
-    let rate = precisionRate(offRow(event.clientY, rect.top, rect.bottom)) * (event.altKey ? 0.1 : 1), dx = (event.clientX - lastX) * rate;
-    if (lastX = event.clientX, grab === 2) {
-      moved += dx;
-      let width = startValue[1] - startValue[0], by = moved / rect.width * span(), lo = clamp(quant(startValue[0] + by, event.altKey), f().min, f().max - width);
-      g.set([lo, Number((lo + width).toPrecision(12))]);
-      return;
-    }
-    if (hand = band(hand, dx, 0, rect.width, most), g.set(withEnd(c.get(), grab, f().min + hand.at / rect.width * span(), event.altKey)), hand.give !== give.give)
-      give.hold(hand.give);
-  });
-  let release = () => {
-    if (!dragging)
-      return;
-    dragging = !1, rect = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
-  };
-  track.addEventListener("pointerup", release), track.addEventListener("pointercancel", release);
-  let panAt;
-  onPan(track, {
-    accept: () => !dragging,
-    move(dx) {
-      let w = track.clientWidth;
-      if (!w)
-        return;
-      if (panAt === void 0)
-        g.start(), panAt = { at: (shown[lastEnd] - f().min) / span() * w, give: 0 }, fit(), dragging = !0, row.classList.add("knobs-active");
-      if (panAt = band(panAt, dx, 0, w, most), g.set(withEnd(c.get(), lastEnd, f().min + panAt.at / w * span())), panAt.give !== give.give)
-        give.hold(panAt.give);
-    },
-    lift: () => give.release(),
-    end() {
-      panAt = void 0, give.release(), dragging = !1, row.classList.remove("knobs-active"), c.wake();
-    },
-    step(direction) {
-      g.start(), g.set(withEnd(shown, lastEnd, shown[lastEnd] + direction * f().step));
-    }
-  });
-  let editors = thumbs.map((th, i) => inlineEdit(c.doc, row, `${c.display} ${i === 0 ? "low" : "high"} value`, (v) => {
-    g.start(), g.set(withEnd(c.get(), i, v));
-  }, () => th));
-  thumbs.forEach((th, i) => {
-    let end = i;
-    th.addEventListener("focus", () => {
-      lastEnd = end, row.dataset.endFocus = th.dataset.end, c.wake();
-    }), th.addEventListener("blur", () => {
-      if (row.dataset.endFocus === th.dataset.end)
-        delete row.dataset.endFocus;
-    }), th.addEventListener("keydown", (event) => {
-      if (!plainKey(event))
-        return;
-      let dir = arrowOf(event), char = typed(event);
-      if (dir) {
-        event.preventDefault(), event.stopPropagation();
-        let by = f().step * (event.shiftKey ? bigOf(event) : event.altKey ? 0.1 : 1);
-        g.start(), g.set(withEnd(shown, end, shown[end] + dir * by, event.altKey));
-      } else if (event.key === "Home" || event.key === "End")
-        event.preventDefault(), g.start(), g.set(withEnd(shown, end, event.key === "Home" ? f().min : f().max));
-      else if (event.key === "Enter" && keyPrefs(th).edit)
-        event.preventDefault(), event.stopPropagation(), editors[end].start(mixed ? "" : fmt(shown[end], places()));
-      else if (char && keyPrefs(th).edit)
-        event.preventDefault(), event.stopPropagation(), editors[end].start(char, !1);
-    });
-  });
-  let first = !0, gpu = {
-    kind: "range",
-    key: c.key,
-    display: c.display,
-    row,
-    labelEl: label,
-    track,
-    read,
-    thumbs,
-    ratios: () => [ratio(shown[0]), ratio(shown[1])],
-    dragging: () => dragging,
-    editing: () => editors.some((e) => e.open),
-    wave: c.wave,
-    isModified: c.isModified
-  };
-  return {
-    row,
-    labelEl: label,
-    input: thumbs[0],
-    stops: () => thumbs,
-    update(value, delay, instant, isMixed = !1) {
-      shown = value, mixed = isMixed, paint(first || Boolean(instant) || dragging, delay), first = !1;
-    },
-    dispose() {
-      cancelAnimationFrame(smearFrame), rolling.dispose();
-    },
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-function angleRow(c) {
-  let { row, label, el } = shell(c, "angle"), f = () => c.field, control = el("span", "knobs-angle");
-  control.tabIndex = 0, control.setAttribute("role", "slider"), control.setAttribute("aria-label", c.display);
-  let read = el("span", "knobs-angle-read"), dial = el("span", "knobs-dial"), hand = el("i", "knobs-dial-hand");
-  dial.append(hand), control.append(read, dial), row.append(control);
-  let value = c.get(), turn = value, mixed = !1, dragging = !1, g = gesture(c), places = () => decimals(f().step), snapTo = (v, coarse) => {
-    let step = coarse ? Math.max(15, f().step) : f().step, q = Number((Math.round(v / step) * step).toPrecision(12));
-    return f().wrap ? wrapAngle2(q, f().min, f().max) : clamp(q, f().min, f().max);
-  }, rolling = rollingReadout(read), paint = (instant, delay = 0) => {
-    let t = mixed ? "—" : `${fmt(value, places())}°`;
-    if (rolling.show(mixed ? ["—"] : [{ value, decimals: places() }, "°"], instant || row.classList.contains("knobs-active") ? 0 : rollMs(row), delay), control.setAttribute("aria-valuenow", String(value)), control.setAttribute("aria-valuetext", t), instant || reducedMotion4(c.doc))
-      hand.style.transition = "none";
-    if (hand.style.rotate = `${turn.toFixed(3)}deg`, instant)
-      hand.offsetWidth, hand.style.transition = "";
-  }, follow = (next) => {
-    let d = next - value;
-    if (f().wrap) {
-      let s = f().max - f().min;
-      d = ((d + s / 2) % s + s) % s - s / 2;
-    }
-    turn += d, value = next;
-  }, mode = "scrub", startX = 0, startValue = 0, carried = 0, rowRect, centre = [0, 0], moved = !1, angleAt = (x, y) => Math.atan2(x - centre[0], -(y - centre[1])) * 180 / Math.PI;
-  control.addEventListener("pointerdown", (event) => {
-    if (event.button !== 0 || event.shiftKey || event.metaKey)
-      return;
-    if (event.target.closest(".knobs-cell-edit"))
-      return;
-    event.preventDefault(), control.setPointerCapture(event.pointerId), control.focus({ preventScroll: !0, focusVisible: !1 });
-    let r = dial.getBoundingClientRect();
-    if (centre = [r.left + r.width / 2, r.top + r.height / 2], mode = event.target.closest(".knobs-dial") ? "dial" : "scrub", startX = event.clientX, startValue = value, carried = 0, moved = !1, dragging = !0, g.start(), mode === "dial")
-      moved = !0, row.classList.add("knobs-active"), g.set(snapTo(angleAt(event.clientX, event.clientY), !1));
-    c.wake();
-  }), control.addEventListener("pointermove", (event) => {
-    if (!dragging)
-      return;
-    if (mode === "dial") {
-      let a = angleAt(event.clientX, event.clientY);
-      g.set(snapTo(f().wrap ? a : clamp(a, f().min, f().max), event.shiftKey));
-      return;
-    }
-    if (!moved && Math.abs(event.clientX - startX) < 3)
-      return;
-    if (!moved)
-      moved = !0, startX = event.clientX, rowRect = row.getBoundingClientRect(), row.classList.add("knobs-active");
-    let r = rowRect, rate = precisionRate(offRow(event.clientY, r.top, r.bottom)) * (event.altKey ? 0.1 : 1);
-    carried += (event.clientX - startX) * rate, startX = event.clientX, g.set(snapTo(startValue + carried * f().step, event.shiftKey));
-  });
-  let editor = inlineEdit(c.doc, row, `${c.display} value`, (v) => {
-    g.start(), g.set(snapTo(v, !1));
-  }, () => control), release = () => {
-    if (!dragging)
-      return;
-    if (dragging = !1, row.classList.remove("knobs-active"), !moved)
-      editor.start(mixed ? "" : fmt(value, places()));
-    c.wake();
-  };
-  control.addEventListener("pointerup", release), control.addEventListener("pointercancel", release);
-  let panAt, give = textGive(read, () => c.wake());
-  onPan(control, {
-    accept: () => !dragging,
-    move(dx) {
-      let step = f().step;
-      if (panAt === void 0)
-        g.start(), panAt = { at: value / step, give: 0 }, row.classList.add("knobs-active");
-      if (panAt = f().wrap ? { at: panAt.at + dx, give: 0 } : band(panAt, dx, f().min / step, f().max / step), g.set(snapTo(panAt.at * step, !1)), panAt.give !== give.give)
-        give.hold(panAt.give);
-    },
-    lift: () => give.release(),
-    end() {
-      panAt = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
-    },
-    step(direction) {
-      g.start(), g.set(snapTo(value + direction * f().step, !1));
-    }
-  }), control.addEventListener("keydown", (event) => {
-    if (event.target !== control || !plainKey(event))
-      return;
-    let dir = arrowOf(event), char = typed(event);
-    if (dir)
-      if (event.preventDefault(), event.stopPropagation(), g.start(), event.shiftKey) {
-        let s = Math.max(15, f().step), k = dir > 0 ? Math.floor(value / s + 0.000000001) + 1 : Math.ceil(value / s - 0.000000001) - 1;
-        g.set(snapTo(k * s, !1));
-      } else
-        g.set(snapTo(value + dir * f().step * (event.altKey ? 0.1 : 1), !1));
-    else if (event.key === "Home" || event.key === "End")
-      event.preventDefault(), g.start(), g.set(snapTo(event.key === "Home" ? f().min : f().max - (f().wrap ? f().step : 0), !1));
-    else if (event.key === "Enter" && keyPrefs(control).edit)
-      event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : fmt(value, places()));
-    else if (char && keyPrefs(control).edit)
-      event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
-  });
-  let first = !0, gpu = {
-    kind: "angle",
-    key: c.key,
-    display: c.display,
-    row,
-    labelEl: label,
-    control,
-    read,
-    dial,
-    turn: () => mixed ? 0 : turn,
-    dragging: () => dragging,
-    editing: () => editor.open,
-    wave: c.wave,
-    isModified: c.isModified
-  };
-  return {
-    row,
-    labelEl: label,
-    input: control,
-    stops: () => [control],
-    update(next, delay, instant, isMixed = !1) {
-      if (mixed = isMixed, first || instant)
-        value = turn = next;
-      else
-        follow(next);
-      paint(first || Boolean(instant) || dragging, delay), first = !1;
-    },
-    dispose() {
-      rolling.dispose();
-    },
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-var SEED_STEP = 12, DICE_ROLL_MS = 620;
-function seedRow(c) {
-  let { row, label, el } = shell(c, "seed"), f = () => c.field, control = el("span", "knobs-seed");
-  control.tabIndex = 0, control.setAttribute("role", "spinbutton"), control.setAttribute("aria-label", c.display);
-  let read = el("span", "knobs-seed-read");
-  control.append(read);
-  let reel = el("span", "knobs-seed-digits");
-  read.append(reel);
-  let roller = it(reel, {
-    value: c.get(),
-    format: { useGrouping: !1, maximumFractionDigits: 0 },
-    duration: 1,
-    motionBlur: !0
-  }), places = [], initialized = !1, diced = !1, roll = el("button", "knobs-seed-roll");
-  roll.type = "button", roll.tabIndex = -1, roll.setAttribute("aria-label", `Roll ${c.display}`);
-  let die = createHeaderDie(c.doc, () => c.wake(), GROUP_DIE);
-  roll.append(die.node), row.append(control, roll);
-  let value = c.get(), mixed = !1, g = gesture(c), set = (v) => {
-    stopCarry(), g.start(), g.set(Math.round(clamp(v, f().min, f().max)));
-  }, reroll = () => {
-    let { min, max } = f(), next = value;
-    for (let i = 0;i < 8 && next === value; i++)
-      next = min + Math.floor(Math.random() * (max - min + 1));
-    die.roll(), diced = !0, set(next), diced = !1;
-  };
-  roll.onclick = () => reroll();
-  let editor = inlineEdit(c.doc, row, `${c.display} value`, set, () => control), give = textGive(read, () => c.wake()), recent = moves(), panned, carry = [], stopCarry = () => {
-    for (let t of carry)
-      clearTimeout(t);
-    carry = [];
-  }, scrubBy = (steps) => {
-    let { min, max } = f(), next = clamp(value + steps, min, max);
-    if (next === value)
-      return !1;
-    let dir = next > value ? 1 : -1;
-    for (let i = 0;i < Math.min(3, Math.abs(next - value)); i++)
-      die.turn(dir);
-    return g.set(next), tick(control), !0;
-  }, letGo = () => {
-    panned = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
-  };
-  onPan(row, {
-    accept: () => !editor.open,
-    move(dx) {
-      if (!panned)
-        stopCarry(), g.start(), recent.reset(), panned = { travel: 0, give: 0 }, row.classList.add("knobs-active"), c.wake();
-      recent.add(dx);
-      let { min, max } = f(), { next, steps } = stepBand(panned, dx, SEED_STEP, [value - min, max - value]);
-      if (panned = next, steps)
-        scrubBy(steps);
-      if (next.give !== give.give)
-        give.hold(next.give);
-    },
-    lift() {
-      if (!panned)
-        return;
-      let n = carrySteps(recent.speed()), dir = Math.sign(recent.speed());
-      letGo();
-      for (let i = 0;i < n; i++)
-        carry.push(setTimeout(() => {
-          if (!scrubBy(dir))
-            stopCarry();
-        }, carryAt(i)));
-    },
-    end: letGo,
-    step(direction) {
-      stopCarry(), set(value + direction);
-    }
-  }), control.addEventListener("click", () => {
-    if (!editor.open)
-      editor.start(mixed ? "" : String(value));
-  }), control.addEventListener("keydown", (event) => {
-    if (event.target !== control || !plainKey(event))
-      return;
-    let dir = arrowOf(event), char = typed(event);
-    if (dir)
-      event.preventDefault(), event.stopPropagation(), set(value + dir * bigOf(event));
-    else if (event.key === " ")
-      event.preventDefault(), event.stopPropagation(), reroll();
-    else if (event.key === "Enter" && keyPrefs(control).edit)
-      event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : String(value));
-    else if (char && keyPrefs(control).edit)
-      event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
-  });
-  let paint = (previous, instant) => {
-    read.toggleAttribute("data-mixed", mixed), control.setAttribute("aria-valuenow", String(value));
-    let ms = !initialized || instant ? 0 : diced ? DICE_ROLL_MS : rollMs(row);
-    initialized = !0, syncPlaces(places, String(value), diced ? 1 : Math.sign(value - previous), ms, 0);
-    let dom = ms > 0 && row.closest('[data-gpu-active="true"]') === null;
-    if (roller.update({
-      value,
-      animated: !0,
-      duration: dom ? ms : 1,
-      motionBlur: dom,
-      direction: diced ? "up" : "auto"
-    }), ms > 0)
-      c.wake();
-  }, gpu = {
-    kind: "seed",
-    key: c.key,
-    display: c.display,
-    row,
-    labelEl: label,
-    control,
-    read,
-    places,
-    mixed: () => mixed,
-    die: { button: roll, die },
-    editing: () => editor.open,
-    wave: c.wave,
-    isModified: c.isModified
-  };
-  return {
-    row,
-    labelEl: label,
-    input: control,
-    stops: () => [control],
-    update(next, _delay, instant, isMixed = !1) {
-      let previous = value;
-      value = next, mixed = isMixed, paint(previous, Boolean(instant));
-    },
-    dispose: () => {
-      stopCarry(), die.dispose(), roller.destroy();
-    },
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-var CAP_MORPH = springLinear(SPRINGS2.snappy);
-function keyCap(o) {
-  let chip = o.doc.createElement("button");
-  chip.className = "knobs-keys", chip.type = "button";
-  let text = o.doc.createElement("span");
-  text.className = "knobs-keys-text", chip.append(text);
-  let value = "", capturing = !1, preview = "", morph, write = (shown) => {
-    let glide = chip.isConnected && chip.offsetWidth > 0 && !chip.closest('[data-gpu-active="true"]') && !reducedMotion4(o.doc), from = glide ? chip.getBoundingClientRect().width : 0;
-    if (morph?.cancel(), text.textContent = shown, !glide)
-      return;
-    let to = chip.getBoundingClientRect().width;
-    if (text.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease-out" }), Math.abs(to - from) < 0.5)
-      return;
-    chip.dataset.morph = "", morph = chip.animate([{ width: `${from}px` }, { width: `${to}px` }], {
-      duration: CAP_MORPH.ms,
-      easing: CAP_MORPH.easing
-    }), morph.onfinish = () => delete chip.dataset.morph, morph.oncancel = () => delete chip.dataset.morph;
-  }, paint = () => {
-    let shown = capturing ? preview || "Type keys…" : value === void 0 ? "—" : value ? comboLabel2(value) : o.empty;
-    if (text.textContent !== shown)
-      write(shown);
-    chip.toggleAttribute("data-empty", !capturing && value === ""), chip.setAttribute("aria-pressed", String(capturing)), chip.setAttribute("aria-label", `${o.name()}: ${capturing ? "press a key combination" : value ? comboLabel2(value) : "none"}`), o.wake();
-  }, capture = (on) => {
-    if (capturing === on)
-      return;
-    if (on && o.row.closest("[data-disabled],[data-readonly]"))
-      return;
-    capturing = on, preview = "", o.row.classList.toggle("knobs-active", on), paint();
-  }, held = (event) => {
-    let mods = heldMods(event);
-    preview = mods.length ? comboLabel2(`${mods.join("+")}+…`) : "", paint();
-  };
-  return chip.onclick = () => capture(!capturing), chip.addEventListener("keydown", (event) => {
-    if (event.isComposing)
-      return;
-    if (!capturing) {
-      if ((event.key === "Enter" || event.key === " ") && plainKey(event) && !event.altKey)
-        event.preventDefault(), event.stopPropagation(), capture(!0);
-      return;
-    }
-    if (event.key === "Tab")
-      return capture(!1);
-    event.preventDefault(), event.stopPropagation();
-    let mods = heldMods(event);
-    if (event.key === "Escape" && !mods.length)
-      return capture(!1);
-    let take = (combo) => {
-      value = combo, capture(!1), o.set(combo);
-    };
-    if ((event.key === "Backspace" || event.key === "Delete") && !mods.length)
-      return take("");
-    let combo = comboFromEvent2(event);
-    if (!combo)
-      return held(event);
-    take(combo);
-  }), chip.addEventListener("keyup", (event) => {
-    if (capturing)
-      held(event);
-  }), chip.addEventListener("blur", () => capture(!1)), paint(), {
-    chip,
-    text,
-    capturing: () => capturing,
-    show(combo) {
-      value = combo, paint();
-    }
-  };
-}
-function keybindRow(c) {
-  let { row, label } = shell(c, "keybind"), cap = keyCap({
-    doc: c.doc,
-    row,
-    empty: "None",
-    name: () => c.display,
-    set: (combo) => c.set(combo),
-    wake: c.wake
-  }), { chip, text } = cap;
-  row.append(chip), cap.show(c.get());
-  let gpu = {
-    kind: "keybind",
-    key: c.key,
-    display: c.display,
-    row,
-    labelEl: label,
-    chip,
-    text,
-    capturing: cap.capturing,
-    wave: c.wave,
-    isModified: c.isModified
-  };
-  return {
-    row,
-    labelEl: label,
-    input: chip,
-    stops: () => [chip],
-    update(next, _delay, _instant, isMixed = !1) {
-      cap.show(isMixed ? void 0 : next);
-    },
-    dispose() {},
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-function naturalWidth(b) {
-  let cs = getComputedStyle(b), w = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0), parts = [...b.children];
-  for (let part of parts) {
-    let ps = getComputedStyle(part), margin = parseFloat(ps.marginRight) || 0;
-    w += part instanceof HTMLElement ? part.scrollWidth + margin : parseFloat(ps.width) || 0;
-  }
-  return Math.ceil(w + (parseFloat(cs.columnGap) || 0) * Math.max(0, parts.length - 1));
-}
-function toolbarRow(c, press, keyOf = toolbarShortcut2) {
-  let el = make(c.doc), row = el("div", "knobs-row knobs-toolbar");
-  row.dataset.field = c.key, row.setAttribute("role", "toolbar"), row.setAttribute("aria-label", c.display);
-  let field = c.field, buttons = [], last = 0, keys = "", keysNow = () => field.items.map((item) => keyOf(item)?.key ?? "").join("\x00"), layout = () => {
-    let cs = getComputedStyle(row), avail = row.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
-    if (avail <= 0 || !buttons.length)
-      return;
-    let widest = Math.max(...buttons.map(naturalWidth)), cols = String(toolbarColumns(buttons.length, widest, avail, parseFloat(cs.columnGap) || 0));
-    if (row.style.getPropertyValue("--k-tool-cols") !== cols)
-      row.style.setProperty("--k-tool-cols", cols), c.wake();
-  }, sizes = new ResizeObserver(layout);
-  sizes.observe(row), c.doc.fonts?.ready.then(() => row.isConnected && layout());
-  let gpu = {
-    kind: "toolbar",
-    key: c.key,
-    display: c.display,
-    row,
-    items: [],
-    wave: c.wave,
-    isModified: () => !1
-  }, build = () => {
-    let items = [];
-    if (buttons = field.items.map((item, i) => {
-      let b = el("button", "knobs-tool");
-      b.type = "button", b.tabIndex = -1, b.disabled = Boolean(item.disabled), b.dataset.item = item.id ?? item.label;
-      let iconEl;
-      if (item.icon)
-        iconEl = iconSvg(c.doc, item.icon), b.append(iconEl);
-      let name = el("span", "knobs-tool-label", item.label);
-      b.append(name);
-      let chip, key = keyOf(item);
-      if (key) {
-        if (chip = el("kbd", "knobs-tool-key", comboLabel2(key.key)), b.append(chip), key.scope !== "none")
-          b.setAttribute("aria-keyshortcuts", key.key);
-      }
-      return b.onclick = () => {
-        last = i, press(item);
-      }, b.addEventListener("focus", () => last = i), items.push({
-        button: b,
-        ...item.icon ? { icon: item.icon } : {},
-        ...iconEl ? { iconEl } : {},
-        label: name,
-        ...chip ? { chip } : {}
-      }), b;
-    }), row.replaceChildren(...buttons), gpu.items = items, keys = keysNow(), row.isConnected)
-      layout();
-  };
-  build(), row.addEventListener("keydown", (event) => {
-    let at = buttons.indexOf(event.target), dir = arrowOf(event);
-    if (at < 0 || !dir || !plainKey(event))
-      return;
-    event.preventDefault(), event.stopPropagation();
-    let live = buttons.filter((b) => !b.disabled), i = live.indexOf(buttons[at]);
-    live[(i + dir + live.length) % live.length]?.focus();
-  });
-  let first = () => buttons.find((b) => !b.disabled) ?? buttons[0];
-  return {
-    row,
-    labelEl: row,
-    get input() {
-      let b = buttons[last];
-      return b && !b.disabled ? b : first();
-    },
-    get field() {
-      return field;
-    },
-    stops() {
-      let b = buttons[last];
-      return [b && !b.disabled ? b : first()];
-    },
-    update() {},
-    refresh() {
-      if (keysNow() === keys)
-        return;
-      let focused = buttons.indexOf(c.doc.activeElement);
-      if (build(), focused >= 0)
-        buttons[focused]?.focus({ preventScroll: !0 });
-      c.wake();
-    },
-    match(event, global) {
-      return field.items.find((item) => {
-        let key = keyOf(item);
-        return key !== void 0 && !item.disabled && key.scope === (global ? "page" : "panel") && matchesCombo2(key.key, event);
-      });
-    },
-    press(item) {
-      let i = field.items.indexOf(item), b = buttons[i];
-      if (b && !reducedMotion4(c.doc))
-        b.classList.add("knobs-pressed"), setTimeout(() => b.classList.remove("knobs-pressed"), 140), c.wake();
-      press(item);
-    },
-    swap(next) {
-      field = next, build(), c.wake();
-    },
-    dispose() {
-      sizes.disconnect();
-    },
-    tracks: [],
-    gpu: [gpu]
-  };
-}
-
-// src/panel/search.ts
-function createSearch(doc, options) {
-  let element = doc.createElement("div");
-  element.className = "knobs-search";
-  let field = doc.createElement("label");
-  field.className = "knobs-search-field", field.append(iconSvg(doc, "search"));
-  let input = doc.createElement("input");
-  input.type = "search", input.placeholder = options.placeholder, input.spellcheck = !1, input.autocomplete = "off", input.setAttribute("aria-label", "Search controls"), input.setAttribute("aria-keyshortcuts", "/"), field.append(input), element.append(field);
-  let on = /* @__PURE__ */ new Set, chips = options.chips.map((spec) => {
-    let b = doc.createElement("button");
-    b.type = "button", b.className = "knobs-search-chip", b.tabIndex = -1, b.dataset.chip = spec.id, b.setAttribute("aria-pressed", "false");
-    let name = doc.createElement("span");
-    if (name.textContent = spec.label, b.append(name), spec.count) {
-      let n = doc.createElement("span");
-      n.className = "knobs-search-count", b.append(n);
-    }
-    return b.onclick = () => {
-      if (on.has(spec.id))
-        on.delete(spec.id);
-      else
-        on.add(spec.id);
-      b.setAttribute("aria-pressed", String(on.has(spec.id))), options.change();
-    }, element.append(b), b;
-  });
-  return input.addEventListener("input", () => options.change()), {
-    element,
-    input,
-    chips,
-    query: () => input.value.trim().toLowerCase(),
-    active: () => on,
-    filtering: () => input.value.trim() !== "" || on.size > 0,
-    counts(counts) {
-      for (let b of chips) {
-        let n = b.querySelector(".knobs-search-count");
-        if (!n)
-          continue;
-        let text = String(counts.get(b.dataset.chip) ?? 0);
-        if (n.textContent !== text)
-          n.textContent = text;
-        let none = text === "0" && !on.has(b.dataset.chip);
-        if (b.hasAttribute("data-none") !== none)
-          b.toggleAttribute("data-none", none);
-      }
-    },
-    set(query, next) {
-      let changed = !1;
-      if (query !== void 0 && input.value !== query)
-        input.value = query, changed = !0;
-      if (next) {
-        let want = new Set(next.filter((id) => chips.some((b) => b.dataset.chip === id)));
-        if (want.size !== on.size || [...want].some((id) => !on.has(id))) {
-          on.clear();
-          for (let id of want)
-            on.add(id);
-          for (let b of chips)
-            b.setAttribute("aria-pressed", String(on.has(b.dataset.chip)));
-          changed = !0;
-        }
-      }
-      if (changed)
-        options.change();
-    },
-    clear() {
-      let had = input.value !== "" || on.size > 0;
-      input.value = "", on.clear();
-      for (let b of chips)
-        b.setAttribute("aria-pressed", "false");
-      if (had)
-        options.change();
-    },
-    focus() {
-      input.focus({ preventScroll: !0 }), input.select();
-    }
-  };
-}
-function matchSpan(text, query) {
-  if (!query)
-    return;
-  let at = text.toLowerCase().indexOf(query);
-  return at < 0 ? void 0 : [at, at + query.length];
-}
-function markLabel(label, text, span) {
-  let doc = label.ownerDocument, parts = [];
-  if (!span)
-    parts.push(doc.createTextNode(text));
-  else {
-    if (span[0] > 0)
-      parts.push(doc.createTextNode(text.slice(0, span[0])));
-    let mark = doc.createElement("mark");
-    if (mark.className = "knobs-match", mark.textContent = text.slice(span[0], span[1]), parts.push(mark), span[1] < text.length)
-      parts.push(doc.createTextNode(text.slice(span[1])));
-  }
-  let current = [...label.childNodes].filter((c) => c.nodeType === 3 || c instanceof HTMLElement && c.classList.contains("knobs-match"));
-  if (current.length === parts.length && current.every((c, i) => c.nodeName === parts[i].nodeName && c.textContent === parts[i].textContent))
-    return;
-  for (let c of current)
-    c.remove();
-  label.prepend(...parts);
-}
-
 // src/ui/activity-css.ts
 var open = springLinear(SPRINGS2.snappy), activityCss = `
 :where(.knobs-activity,.knobs-activity *){box-sizing:border-box}
@@ -12014,13 +11113,17 @@ var css = `
 .knobs-tree-row[aria-expanded="true"]>.knobs-tree-caret{transform:rotate(90deg)}
 .knobs-tree-row:not([aria-expanded])>.knobs-tree-caret{visibility:hidden}
 .knobs-tree-icon{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-right:6px;color:var(--_k-fg-3);font-size:calc(var(--_k-font-size) - 1px)}
-.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;font-weight:var(--_k-weight)}
+/* The label wins the room: it keeps its width while the detail (which only takes what's left)
+   fades out at its end, and gives way only once the detail is gone. Each fades where it's cut. */
+.knobs-tree-label{position:relative;flex:0 1 auto;min-width:0;overflow:hidden;font-weight:var(--_k-weight)}
+.knobs-tree-row[data-editing]>.knobs-tree-label{flex-grow:1}
 .knobs-tree-row[data-ancestor] .knobs-tree-label{color:var(--_k-fg-2)}
 .knobs-tree-label .knobs-tree-mark{color:var(--_k-accent)}
 .knobs-tree-row[data-off~="visible"] :is(.knobs-tree-label,.knobs-tree-icon){opacity:.45}
 .knobs-tree-row[data-off~="locked"] .knobs-tree-label{color:var(--_k-fg-2)}
-.knobs-tree-detail{flex:none;margin-left:6px;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
-.knobs-tree-tools{flex:none;display:flex;align-items:center;gap:1px;margin-left:4px}
+.knobs-tree-detail{flex:1 1 0;min-width:0;overflow:hidden;padding-left:6px;text-align:right;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
+.knobs-tree-row[data-editing]>.knobs-tree-detail{flex-grow:0;visibility:hidden}
+.knobs-tree-tools{flex:none;display:flex;align-items:center;gap:1px;margin-left:auto;padding-left:4px}
 .knobs-ui .knobs-tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
 .knobs-ui .knobs-tree-toggle svg{width:12px;height:12px}
 .knobs-tree-row:is(:hover,[data-active],[aria-selected="true"]) .knobs-tree-toggle,.knobs-ui .knobs-tree-toggle[aria-pressed="false"]{opacity:1}
@@ -12137,47 +11240,1277 @@ function injectUiStyles(doc) {
   let style = doc.createElement("style");
   style.dataset.knobsUi = "", style.textContent = uiCss(), doc.head.append(style);
 }
-function applyLook2(root, look) {
-  injectUiStyles(root.ownerDocument), root.classList.add("knobs-root", "knobs-ui"), applyLook(root, resolveLook(look)), syncFrame(root);
+function applyLook2(root, look) {
+  injectUiStyles(root.ownerDocument), root.classList.add("knobs-root", "knobs-ui"), applyLook(root, resolveLook(look)), syncFrame(root);
+}
+function syncFrame(root) {
+  if (!root.isConnected)
+    return;
+  if (root.ownerDocument.defaultView?.getComputedStyle(root).getPropertyValue("--k-frame").trim() === "flat")
+    root.dataset.frame = "flat";
+  else
+    delete root.dataset.frame;
+}
+var lookDefaults = { current: {} };
+function frameLoop(win, step) {
+  let raf = 0, last = 0, tick = (now) => {
+    let dt = last ? Math.min(0.064, (now - last) / 1000) : 0.016666666666666666;
+    if (last = now, raf = step(dt) ? win.requestAnimationFrame(tick) : 0, !raf)
+      last = 0;
+  };
+  return {
+    wake() {
+      if (!raf)
+        raf = win.requestAnimationFrame(tick);
+    },
+    get running() {
+      return raf !== 0;
+    },
+    stop() {
+      if (raf)
+        win.cancelAnimationFrame(raf);
+      raf = 0, last = 0;
+    }
+  };
+}
+var svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS = {
+  caret: svg('<path d="M6 3.5 10.5 8 6 12.5"/>'),
+  chevronDown: svg('<path d="M3.5 6 8 10.5 12.5 6"/>'),
+  eye: svg('<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/>'),
+  eyeOff: svg('<path d="M2.5 2.5l11 11M6.6 4.2A6.6 6.6 0 0 1 8 3.5c4.1 0 6.5 4.5 6.5 4.5a11 11 0 0 1-1.7 2.2M10.2 11.9A6 6 0 0 1 8 12.5C3.9 12.5 1.5 8 1.5 8a11 11 0 0 1 2.4-2.9"/>'),
+  lock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>'),
+  unlock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 4.8-1"/>')
+};
+
+// src/ui/layer.ts
+var lookOf = (look) => ({ ...lookDefaults.current, ...look }), roots = /* @__PURE__ */ new WeakMap;
+function layerRoot(doc) {
+  let root = roots.get(doc);
+  if (root?.isConnected)
+    return root;
+  return root = doc.createElement("div"), root.className = "knobs-layers", doc.body.append(root), roots.set(doc, root), root;
+}
+function layerElement(doc, cls, look) {
+  let el = doc.createElement("div");
+  return el.className = cls, layerRoot(doc).append(el), applyLook2(el, lookOf(look)), el;
+}
+function presence(el, o = {}) {
+  let win = el.ownerDocument.defaultView, spring = new Spring(0, 1, 1, 0.002), dx = o.dx ?? 0, dy = o.dy ?? 0, gone = [], shown = !1, render = () => {
+    let reduced = reducedMotion(win), p = spring.x, q = Math.max(0, Math.min(1, p)), scale = reduced ? 1 : (o.scale ?? 0.94) + (1 - (o.scale ?? 0.94)) * p, blur = reduced ? 0 : (1 - q) * (o.blur ?? 6), t = reduced ? 0 : 1 - p;
+    el.style.opacity = q.toFixed(3), el.style.transform = p === 1 ? "" : `translate(${(dx * t).toFixed(2)}px,${(dy * t).toFixed(2)}px) scale(${scale.toFixed(4)})`, el.style.filter = blur > 0.05 ? `blur(${blur.toFixed(2)}px)` : "", el.style.pointerEvents = shown ? "" : "none", o.onFrame?.(p);
+  }, loop = frameLoop(win, (dt) => {
+    if (spring.step(dt), render(), !spring.resting)
+      return !0;
+    if (!shown) {
+      let done = gone;
+      gone = [];
+      for (let f of done)
+        f();
+      o.onGone?.();
+    }
+    return !1;
+  }), tune = (seconds, zeta) => {
+    let reduced = reducedMotion(win);
+    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds), spring.zeta = reduced ? 1 : zeta;
+  };
+  return render(), {
+    show() {
+      shown = !0, gone = [], el.style.pointerEvents = "", tune(o.duration ?? 0.32, 1 - (o.bounce ?? 0.2)), spring.set(1), loop.wake();
+    },
+    hide() {
+      return shown = !1, el.style.pointerEvents = "none", tune(o.exit ?? 0.2, 1), spring.set(0), loop.wake(), new Promise((resolve) => gone.push(resolve));
+    },
+    snap(to = 1) {
+      if (shown = to === 1, spring.snap(to), loop.stop(), render(), !shown) {
+        let done = gone;
+        gone = [];
+        for (let f of done)
+          f();
+        o.onGone?.();
+      } else
+        gone = [];
+    },
+    get shown() {
+      return shown;
+    },
+    from(x, y) {
+      dx = x, dy = y;
+    },
+    dispose() {
+      loop.stop();
+      for (let f of gone)
+        f();
+      gone = [];
+    }
+  };
+}
+var anchorBox = (a) => {
+  if (typeof a.getBoundingClientRect === "function") {
+    let r = a.getBoundingClientRect();
+    return { x: r.left, y: r.top, w: r.width, h: r.height };
+  }
+  let r = a;
+  return { x: r.x, y: r.y, w: r.width ?? 0, h: r.height ?? 0 };
+}, viewBox = (doc) => ({
+  x: 0,
+  y: 0,
+  w: doc.documentElement.clientWidth,
+  h: doc.documentElement.clientHeight
+});
+
+// src/ui/overlay-model.ts
+var opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+function place2(o) {
+  let { anchor: a, size, view: v } = o, offset = o.offset ?? 6, margin = o.margin ?? 8, [want, align = "center"] = (o.placement ?? "bottom").split("-"), room = (s) => s === "top" ? a.y - v.y : s === "bottom" ? v.y + v.h - (a.y + a.h) : s === "left" ? a.x - v.x : v.x + v.w - (a.x + a.w), need = (s) => (s === "top" || s === "bottom" ? size.h : size.w) + offset + margin, side = want;
+  if (room(want) < need(want) && room(opposite[want]) > room(want))
+    side = opposite[want];
+  let vertical = side === "top" || side === "bottom", x, y;
+  if (vertical)
+    y = side === "bottom" ? a.y + a.h + offset : a.y - offset - size.h, x = align === "start" ? a.x : align === "end" ? a.x + a.w - size.w : a.x + (a.w - size.w) / 2, x = clamp2(x, v.x + margin, v.x + v.w - margin - size.w);
+  else
+    x = side === "right" ? a.x + a.w + offset : a.x - offset - size.w, y = align === "start" ? a.y : align === "end" ? a.y + a.h - size.h : a.y + (a.h - size.h) / 2, y = clamp2(y, v.y + margin, v.y + v.h - margin - size.h);
+  let origin = vertical ? { x: clamp2(a.x + a.w / 2 - x, 0, size.w), y: side === "bottom" ? 0 : size.h } : { x: side === "right" ? 0 : size.w, y: clamp2(a.y + a.h / 2 - y, 0, size.h) };
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    placement: align === "center" ? side : `${side}-${align}`,
+    origin
+  };
+}
+var clamp2 = (v, lo, hi) => hi < lo ? lo : Math.max(lo, Math.min(hi, v));
+
+// src/ui/tooltip.ts
+var tips = /* @__PURE__ */ new WeakMap, HANDOFF_MS = 400, controllers = /* @__PURE__ */ new WeakMap;
+function tipOf(start) {
+  let node = start instanceof Element ? start : null;
+  while (node) {
+    let own = tips.get(node);
+    if (own)
+      return { el: node, tip: own };
+    let data = node.getAttribute("data-tip");
+    if (data) {
+      let shortcut = node.getAttribute("data-tip-shortcut") ?? void 0, placement = node.getAttribute("data-tip-placement") ?? void 0;
+      return {
+        el: node,
+        tip: {
+          text: data,
+          opts: { ...shortcut ? { shortcut } : {}, ...placement ? { placement } : {} }
+        }
+      };
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function controllerOf(doc) {
+  let existing = controllers.get(doc);
+  if (existing)
+    return existing;
+  let win = doc.defaultView, layer, motion, text, keys, target = null, pending = null, timer = 0, hiddenAt = -1 / 0, quiet = null, keyboard = !1, build = (look) => {
+    layer = layerElement(doc, "knobs-layer knobs-tooltip", look), layer.id = `knobs-tooltip-${Math.random().toString(36).slice(2, 8)}`, layer.setAttribute("role", "tooltip"), text = doc.createElement("span"), text.className = "knobs-tooltip-text", keys = doc.createElement("span"), keys.className = "knobs-tooltip-keys", layer.append(text, keys), motion = presence(layer, { scale: 0.96, blur: 3, duration: 0.24 });
+  }, show = (el, tip, instant) => {
+    if (!layer?.isConnected)
+      build(tip.opts.look);
+    target?.removeAttribute("aria-describedby"), target = el, text.textContent = typeof tip.text === "function" ? tip.text() : tip.text, keys.replaceChildren(...(tip.opts.shortcut ? comboParts2(tip.opts.shortcut) : []).map((k) => {
+      let kbd = doc.createElement("kbd");
+      return kbd.className = "knobs-kbd", kbd.textContent = k, kbd;
+    })), keys.hidden = !tip.opts.shortcut;
+    let p = place2({
+      anchor: anchorBox(el),
+      size: { w: layer.offsetWidth, h: layer.offsetHeight },
+      view: viewBox(doc),
+      placement: tip.opts.placement ?? "top",
+      offset: 6
+    });
+    layer.style.left = `${p.x}px`, layer.style.top = `${p.y}px`, layer.style.transformOrigin = `${p.origin.x}px ${p.origin.y}px`;
+    let side = p.placement.split("-")[0];
+    if (motion.from(0, side === "top" ? 3 : side === "bottom" ? -3 : 0), el.setAttribute("aria-describedby", layer.id), instant)
+      motion.snap(1);
+    else
+      motion.show();
+  }, hide = (now = !1) => {
+    if (win.clearTimeout(timer), pending = null, !target)
+      return;
+    if (target.removeAttribute("aria-describedby"), target = null, hiddenAt = performance.now(), now)
+      motion?.snap(0);
+    else
+      motion?.hide();
+  }, want = (found) => {
+    if (!found)
+      return hide();
+    if (found.el === target || found.el === pending?.el)
+      return;
+    if (found.el === quiet)
+      return;
+    if (win.clearTimeout(timer), target !== null || performance.now() - hiddenAt < HANDOFF_MS) {
+      pending = null, show(found.el, found.tip, !0);
+      return;
+    }
+    if (target)
+      hide();
+    pending = found, timer = win.setTimeout(() => {
+      if (pending = null, found.el.isConnected)
+        show(found.el, found.tip, !1);
+    }, found.tip.opts.delay ?? 500);
+  };
+  doc.addEventListener("pointerover", (e) => {
+    if (e.pointerType === "touch")
+      return;
+    keyboard = !1, want(tipOf(e.target));
+  }), doc.addEventListener("pointerout", (e) => {
+    let to = e.relatedTarget, from = tipOf(e.target);
+    if (!from)
+      return;
+    if (to && from.el.contains(to))
+      return;
+    if (quiet === from.el)
+      quiet = null;
+    if (!tipOf(to))
+      hide();
+  }), doc.addEventListener("pointerdown", (e) => {
+    let found = tipOf(e.target);
+    if (found)
+      quiet = found.el;
+    hide(!0);
+  }, !0), doc.addEventListener("keydown", (e) => {
+    if (keyboard = !0, e.key === "Escape" && target)
+      hide();
+  }, !0), doc.addEventListener("focusin", (e) => {
+    let found = tipOf(e.target);
+    if (found && keyboard && e.target.matches(":focus-visible"))
+      want(found);
+  }), doc.addEventListener("focusout", (e) => {
+    if (target && target.contains(e.target))
+      hide();
+  }), doc.addEventListener("scroll", () => target && hide(!0), !0);
+  let c = { hide };
+  return controllers.set(doc, c), c;
+}
+function tooltip(el, content, options = {}) {
+  let { text, ...rest } = typeof content === "string" || typeof content === "function" ? { text: content } : content;
+  tips.set(el, { text, opts: { ...options, ...rest } });
+  let c = controllerOf(el.ownerDocument), shortcut = rest.shortcut ?? options.shortcut;
+  if (shortcut && !el.hasAttribute("aria-keyshortcuts"))
+    el.setAttribute("aria-keyshortcuts", shortcut);
+  return () => {
+    tips.delete(el), c.hide(!0);
+  };
+}
+
+// src/panel/inspector.ts
+function make(doc) {
+  return (tag, cls, text) => {
+    let node = doc.createElement(tag);
+    if (cls)
+      node.className = cls;
+    if (text !== void 0)
+      node.textContent = text;
+    return node;
+  };
+}
+function shell(c, kind) {
+  let el = make(c.doc), row = el("div", "knobs-row knobs-insp");
+  row.dataset.field = c.key, row.dataset.kind = kind;
+  let label = el("span", void 0, c.display);
+  return row.append(label), { row, label, el };
+}
+var fmt = (v, places) => (Object.is(v, -0) ? 0 : v).toFixed(places);
+function inlineEdit(doc, host, label, commit, back) {
+  let input = doc.createElement("input");
+  input.className = "knobs-cell-edit", input.type = "text", input.inputMode = "decimal", input.spellcheck = !1, input.hidden = !0, input.setAttribute("aria-label", label), host.append(input);
+  let open = !1, done = (keep) => {
+    if (!open)
+      return;
+    open = !1;
+    let next = Number(input.value.trim().replace(/[^\d.eE+-]/g, ""));
+    if (input.hidden = !0, host.classList.remove("knobs-editing"), keep && input.value.trim() !== "" && Number.isFinite(next))
+      commit(next);
+    let target = back();
+    if (doc.activeElement === input || doc.activeElement === doc.body)
+      target.focus({ preventScroll: !0 });
+  };
+  return input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === "Escape")
+      event.preventDefault(), event.stopPropagation(), done(event.key === "Enter");
+    else
+      event.stopPropagation();
+  }), input.addEventListener("blur", () => done(!0)), {
+    input,
+    get open() {
+      return open;
+    },
+    start(text, select = !0) {
+      if (open = !0, input.value = text, input.hidden = !1, host.classList.add("knobs-editing"), input.focus({ preventScroll: !0 }), select)
+        input.select();
+      else
+        input.setSelectionRange(text.length, text.length);
+    },
+    done
+  };
+}
+var typed = (event) => plainKey(event) && !event.altKey && /^[0-9.\-]$/.test(event.key) ? event.key : void 0;
+function scrub(target, row, o) {
+  let at, moved = !1, last = 0, carried = 0, rect;
+  target.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey)
+      return;
+    event.preventDefault(), target.setPointerCapture(event.pointerId), target.focus({ preventScroll: !0, focusVisible: !1 }), at = last = event.clientX, carried = 0, moved = !1;
+  }), target.addEventListener("pointermove", (event) => {
+    if (at === void 0)
+      return;
+    if (!moved && Math.abs(event.clientX - at) < 3)
+      return;
+    if (!moved)
+      moved = !0, last = event.clientX, rect = row.getBoundingClientRect(), row.classList.add("knobs-active"), o.start();
+    let r = rect, rate = precisionRate(offRow(event.clientY, r.top, r.bottom)) * (event.altKey ? 0.1 : 1);
+    carried += (event.clientX - last) * rate, last = event.clientX, o.move(carried, event.altKey, event.shiftKey);
+  });
+  let release = (event) => {
+    if (at === void 0)
+      return;
+    at = void 0, rect = void 0, row.classList.remove("knobs-active"), o.end(moved, event);
+  };
+  return target.addEventListener("pointerup", release), target.addEventListener("pointercancel", release), { scrubbing: () => at !== void 0 && moved };
+}
+var rate = (min, max, step) => Math.max(step, (max - min) / 200), onGrid = (v, min, step) => Number((min + Math.round((v - min) / step) * step).toPrecision(12)), AXES = ["x", "y", "z"];
+function vecRow(c) {
+  let { row, label, el } = shell(c, "vec"), f = () => c.field, places = () => f().decimals ?? decimals(f().step), axes = AXES.slice(0, c.field.axes), cells = el("span", "knobs-cells");
+  if (axes.length > 2)
+    cells.dataset.wide = "";
+  let linked = Boolean(c.field.linked), link;
+  if (c.field.link) {
+    link = el("button", "knobs-link"), link.type = "button", link.tabIndex = -1;
+    let paint = () => {
+      link.replaceChildren(iconSvg(c.doc, linked ? "link" : "unlink")), link.setAttribute("aria-pressed", String(linked)), link.setAttribute("aria-label", linked ? "Unlink axes" : "Link axes");
+    };
+    paint(), link.onclick = () => {
+      linked = !linked, paint(), c.wake();
+    }, row.append(link);
+  }
+  row.append(cells);
+  let shown = c.get(), mixed = !1, g = gesture(c), base = shown, withAxis = (from, axis, v) => {
+    let { min, max, step } = f(), next = clamp(onGrid(v, min, step), min, max);
+    if (!linked)
+      return { ...from, [axis]: next };
+    let was = from[axis] ?? 0, k = Math.abs(was) > 0.000000001 ? next / was : void 0, out = {};
+    for (let a of axes) {
+      let own = from[a] ?? 0;
+      out[a] = a === axis ? next : clamp(Number((k !== void 0 ? own * k : own + (next - was)).toPrecision(12)), min, max);
+    }
+    return out;
+  }, gpuCells = [], reads = [], rolls = [], stops = [];
+  for (let axis of axes) {
+    let cell = el("span", "knobs-cell");
+    cell.tabIndex = 0, cell.dataset.axis = axis, cell.setAttribute("role", "spinbutton");
+    let name = c.field.axisLabels?.[axes.indexOf(axis)] ?? axis;
+    cell.setAttribute("aria-label", `${c.display} ${name}`);
+    let letter = el("i", "knobs-cell-axis", name.toUpperCase());
+    letter.setAttribute("aria-hidden", "true");
+    let read = el("span", "knobs-cell-read");
+    cell.append(letter, read), cells.append(cell), reads.push(read), rolls.push(rollingReadout(read)), stops.push(cell);
+    let editor = inlineEdit(c.doc, cell, `${c.display} ${name} value`, (v) => {
+      g.start(), g.set(withAxis(c.get(), axis, v));
+    }, () => cell), drag = scrub(cell, row, {
+      perPx: () => rate(f().min, f().max, f().step),
+      start() {
+        g.start(), base = c.get();
+      },
+      move(dx, _fine, coarse) {
+        let by = dx * rate(f().min, f().max, f().step) * (coarse ? 10 : 1);
+        g.set(withAxis(base, axis, (base[axis] ?? 0) + by));
+      },
+      end(moved) {
+        if (!moved)
+          editor.start(mixed ? "" : fmt(shown[axis] ?? 0, places()));
+        c.wake();
+      }
+    }), panAt, give = textGive(read, () => c.wake());
+    onPan(cell, {
+      accept: () => !drag.scrubbing() && !editor.open,
+      move(dx) {
+        let perPx = rate(f().min, f().max, f().step);
+        if (panAt === void 0)
+          g.start(), base = c.get(), panAt = { at: 0, give: 0 }, row.classList.add("knobs-active"), cell.setAttribute("data-panned", "");
+        let from = base[axis] ?? 0;
+        if (panAt = band(panAt, dx, (f().min - from) / perPx, (f().max - from) / perPx), g.set(withAxis(base, axis, from + panAt.at * perPx)), panAt.give !== give.give)
+          give.hold(panAt.give);
+      },
+      lift: () => give.release(),
+      end() {
+        panAt = void 0, give.release(), row.classList.remove("knobs-active"), cell.removeAttribute("data-panned"), c.wake();
+      },
+      step(direction) {
+        g.start(), g.set(withAxis(c.get(), axis, (shown[axis] ?? 0) + direction * f().step));
+      }
+    }), cell.addEventListener("keydown", (event) => {
+      if (event.target !== cell || !plainKey(event))
+        return;
+      let dir = arrowOf(event), char = typed(event);
+      if (dir) {
+        event.preventDefault(), event.stopPropagation();
+        let by = f().step * (event.shiftKey ? bigOf(event) : event.altKey ? 0.1 : 1);
+        g.start(), g.set(withAxis(c.get(), axis, (shown[axis] ?? 0) + dir * by));
+      } else if (event.key === "Home" || event.key === "End")
+        event.preventDefault(), g.start(), g.set(withAxis(c.get(), axis, event.key === "Home" ? f().min : f().max));
+      else if (event.key === "Enter" && keyPrefs(cell).edit)
+        event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : fmt(shown[axis] ?? 0, places()));
+      else if (char && keyPrefs(cell).edit)
+        event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
+    }), gpuCells.push({
+      el: cell,
+      axis: letter,
+      read,
+      editing: () => editor.open,
+      active: () => drag.scrubbing() || panAt !== void 0
+    });
+  }
+  let paint = (ms = 0, delay = 0) => {
+    axes.forEach((axis, i) => {
+      let text = mixed ? "—" : fmt(shown[axis] ?? 0, places()), unit = f().unit && !mixed ? ` ${f().unit}` : "";
+      rolls[i].show(mixed ? ["—"] : [{ value: shown[axis] ?? 0, decimals: places() }], ms, delay), stops[i].setAttribute("aria-valuetext", `${text}${unit}`);
+    });
+  };
+  paint();
+  let placed = !1, gpu = {
+    kind: "vec",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    cells: gpuCells,
+    ...link ? { link } : {},
+    linked: () => linked,
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input: stops[0],
+    stops: () => stops,
+    update(value, delay, instant, isMixed = !1) {
+      shown = value, mixed = isMixed;
+      let hand = row.classList.contains("knobs-active");
+      paint(!placed || instant || hand ? 0 : rollMs(row), delay), placed = !0;
+    },
+    dispose() {
+      for (let r of rolls)
+        r.dispose();
+    },
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+function rangeRow(c) {
+  let el = make(c.doc), f = () => c.field, places = () => f().decimals ?? decimals(f().step), row = el("div", "knobs-row knobs-range");
+  row.dataset.field = c.key;
+  let track = el("div", "knobs-range-track"), fill = el("i", "knobs-range-fill"), label = el("span", "knobs-label", c.display), read = el("span", "knobs-range-read"), thumbs = ["lo", "hi"].map((end) => {
+    let t = el("span", "knobs-range-thumb");
+    return t.dataset.end = end, t.tabIndex = 0, t.setAttribute("role", "slider"), t.setAttribute("aria-label", `${c.display} ${end === "lo" ? "low" : "high"}`), t;
+  }), words = el("span", "knobs-range-text");
+  words.append(label, read);
+  let band2 = el("i", "knobs-range-smear");
+  track.append(fill, band2, ...thumbs, words), row.append(track);
+  let shown = c.get(), mixed = !1, dragging = !1, smearFrame = 0, smearAt = 0, smearStrength = 0, lastEnds = [0, 0], smears = [0, 0], ends = () => {
+    let cs = getComputedStyle(track);
+    return [
+      parseFloat(cs.getPropertyValue("--kr-lo")) || 0,
+      parseFloat(cs.getPropertyValue("--kr-hi")) || 0
+    ];
+  }, setSmears = (lo, hi) => {
+    smears[0] = lo === 0 ? 0 : (smears[0] + lo) / 2, smears[1] = hi === 0 ? 0 : (smears[1] + hi) / 2, track.classList.toggle("knobs-range-smearing", smears[0] > 0 || smears[1] > 0), track.style.setProperty("--kr-smear-lo", smears[0].toFixed(2)), track.style.setProperty("--kr-smear-hi", smears[1].toFixed(2));
+  }, runSmear = (now) => {
+    let at = ends(), dt = (now - smearAt) / 1000, w = track.clientWidth, speeds = [0, 1].map((i) => dt > 0 ? Math.abs(at[i] - lastEnds[i]) * w / dt : 0);
+    lastEnds = at, smearAt = now;
+    let gliding = !dragging && track.getAnimations().length > 0;
+    setSmears(gliding ? rangeSmear(speeds[0], smearStrength) : 0, gliding ? rangeSmear(speeds[1], smearStrength) : 0), smearFrame = gliding ? requestAnimationFrame(runSmear) : 0;
+  };
+  track.addEventListener("transitionrun", (event) => {
+    if (event.target !== track || smearFrame || dragging)
+      return;
+    if (track.closest('[data-gpu-active="true"]'))
+      return;
+    smearStrength = clamp(parseFloat(getComputedStyle(track).getPropertyValue("--k-range-blur")) || 0, 0, 1);
+    let reduced = c.doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (smearStrength <= 0 || reduced)
+      return;
+    lastEnds = ends(), smearAt = performance.now(), smearFrame = requestAnimationFrame(runSmear);
+  });
+  let lastEnd = 0, g = gesture(c), span = () => f().max - f().min || 1, ratio = (v) => clamp((v - f().min) / span(), 0, 1), quant = (v, fine) => clamp(onGrid(v, f().min, fine ? f().step / 10 : f().step), f().min, f().max), withEnd = (from, end, v, fine = !1) => {
+    let q = quant(v, fine);
+    return end === 0 ? [Math.min(q, from[1]), from[1]] : [from[0], Math.max(q, from[0])];
+  }, rolling = rollingReadout(read), showText = (ms, delay) => rolling.show(mixed ? ["—"] : [
+    { value: shown[0], decimals: places() },
+    "–",
+    { value: shown[1], decimals: places() },
+    f().unit ? ` ${f().unit}` : ""
+  ], ms, delay), place = (instant) => {
+    let [a, b] = [ratio(shown[0]), ratio(shown[1])], nodes = [fill, track];
+    if (instant)
+      for (let n of nodes)
+        n.style.transition = "none";
+    if (fill.style.transform = `translateX(${(a * 100).toFixed(4)}%) scaleX(${Math.max(0, b - a).toFixed(5)})`, track.style.setProperty("--kr-lo", a.toFixed(6)), track.style.setProperty("--kr-hi", b.toFixed(6)), instant) {
+      fill.offsetWidth;
+      for (let n of nodes)
+        n.style.transition = "";
+    }
+  }, paint = (instant, delay = 0) => {
+    showText(instant ? 0 : rollMs(row), delay), thumbs.forEach((th, i) => {
+      th.setAttribute("aria-valuenow", String(shown[i])), th.setAttribute("aria-valuemin", String(i === 0 ? f().min : shown[0])), th.setAttribute("aria-valuemax", String(i === 0 ? shown[1] : f().max));
+    }), place(instant);
+  }, grab = 0, startValue = shown, rect, lastX = 0, hand = { at: 0, give: 0 }, moved = 0, card = () => row.parentElement?.classList.contains("knobs-card") ? row.parentElement : null, give = textGive(row, () => c.wake(), {
+    home: STRETCH_HOME_S,
+    draw: (px) => drawStretch(row, px, 0, { w: track.clientWidth, h: 0 }, { thin: !0, unclip: card() })
+  }), most = GIVE, fit = () => {
+    let room = roomOf(row, card());
+    most = giveRoom(Math.min(room.left, room.right) - 1, GIVE);
+  }, valueAt = (x) => f().min + clamp((x - rect.left) / rect.width, 0, 1) * span();
+  track.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey)
+      return;
+    if (event.target.closest(".knobs-cell-edit,.knobs-accessory"))
+      return;
+    event.preventDefault(), track.setPointerCapture(event.pointerId), rect = track.getBoundingClientRect();
+    let x = event.clientX - rect.left, [ax, bx] = [ratio(shown[0]) * rect.width, ratio(shown[1]) * rect.width];
+    if (grab = x > ax + 8 && x < bx - 8 && bx - ax > 24 ? 2 : Math.abs(x - ax) <= Math.abs(x - bx) && !(x > bx) ? 0 : 1, ax === bx)
+      grab = x < ax ? 0 : 1;
+    if (grab !== 2)
+      lastEnd = grab;
+    if (thumbs[grab === 2 ? lastEnd : grab].focus({
+      preventScroll: !0,
+      focusVisible: !1
+    }), lastX = event.clientX, startValue = shown, moved = 0, fit(), hand = {
+      at: grab === 2 || event.altKey ? ratio(shown[grab === 2 ? 0 : grab]) * rect.width : clamp(x, 0, rect.width),
+      give: 0
+    }, dragging = !0, row.classList.add("knobs-active"), g.start(), grab !== 2 && !event.altKey)
+      g.set(withEnd(shown, grab, valueAt(event.clientX)));
+    c.wake();
+  }), track.addEventListener("pointermove", (event) => {
+    if (!dragging || !rect)
+      return;
+    let rate = precisionRate(offRow(event.clientY, rect.top, rect.bottom)) * (event.altKey ? 0.1 : 1), dx = (event.clientX - lastX) * rate;
+    if (lastX = event.clientX, grab === 2) {
+      moved += dx;
+      let width = startValue[1] - startValue[0], by = moved / rect.width * span(), lo = clamp(quant(startValue[0] + by, event.altKey), f().min, f().max - width);
+      g.set([lo, Number((lo + width).toPrecision(12))]);
+      return;
+    }
+    if (hand = band(hand, dx, 0, rect.width, most), g.set(withEnd(c.get(), grab, f().min + hand.at / rect.width * span(), event.altKey)), hand.give !== give.give)
+      give.hold(hand.give);
+  });
+  let release = () => {
+    if (!dragging)
+      return;
+    dragging = !1, rect = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
+  };
+  track.addEventListener("pointerup", release), track.addEventListener("pointercancel", release);
+  let panAt;
+  onPan(track, {
+    accept: () => !dragging,
+    move(dx) {
+      let w = track.clientWidth;
+      if (!w)
+        return;
+      if (panAt === void 0)
+        g.start(), panAt = { at: (shown[lastEnd] - f().min) / span() * w, give: 0 }, fit(), dragging = !0, row.classList.add("knobs-active");
+      if (panAt = band(panAt, dx, 0, w, most), g.set(withEnd(c.get(), lastEnd, f().min + panAt.at / w * span())), panAt.give !== give.give)
+        give.hold(panAt.give);
+    },
+    lift: () => give.release(),
+    end() {
+      panAt = void 0, give.release(), dragging = !1, row.classList.remove("knobs-active"), c.wake();
+    },
+    step(direction) {
+      g.start(), g.set(withEnd(shown, lastEnd, shown[lastEnd] + direction * f().step));
+    }
+  });
+  let editors = thumbs.map((th, i) => inlineEdit(c.doc, row, `${c.display} ${i === 0 ? "low" : "high"} value`, (v) => {
+    g.start(), g.set(withEnd(c.get(), i, v));
+  }, () => th));
+  thumbs.forEach((th, i) => {
+    let end = i;
+    th.addEventListener("focus", () => {
+      lastEnd = end, row.dataset.endFocus = th.dataset.end, c.wake();
+    }), th.addEventListener("blur", () => {
+      if (row.dataset.endFocus === th.dataset.end)
+        delete row.dataset.endFocus;
+    }), th.addEventListener("keydown", (event) => {
+      if (!plainKey(event))
+        return;
+      let dir = arrowOf(event), char = typed(event);
+      if (dir) {
+        event.preventDefault(), event.stopPropagation();
+        let by = f().step * (event.shiftKey ? bigOf(event) : event.altKey ? 0.1 : 1);
+        g.start(), g.set(withEnd(shown, end, shown[end] + dir * by, event.altKey));
+      } else if (event.key === "Home" || event.key === "End")
+        event.preventDefault(), g.start(), g.set(withEnd(shown, end, event.key === "Home" ? f().min : f().max));
+      else if (event.key === "Enter" && keyPrefs(th).edit)
+        event.preventDefault(), event.stopPropagation(), editors[end].start(mixed ? "" : fmt(shown[end], places()));
+      else if (char && keyPrefs(th).edit)
+        event.preventDefault(), event.stopPropagation(), editors[end].start(char, !1);
+    });
+  });
+  let first = !0, gpu = {
+    kind: "range",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    track,
+    read,
+    thumbs,
+    ratios: () => [ratio(shown[0]), ratio(shown[1])],
+    dragging: () => dragging,
+    editing: () => editors.some((e) => e.open),
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input: thumbs[0],
+    stops: () => thumbs,
+    update(value, delay, instant, isMixed = !1) {
+      shown = value, mixed = isMixed, paint(first || Boolean(instant) || dragging, delay), first = !1;
+    },
+    dispose() {
+      cancelAnimationFrame(smearFrame), rolling.dispose();
+    },
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+function angleRow(c) {
+  let { row, label, el } = shell(c, "angle"), f = () => c.field, control = el("span", "knobs-angle");
+  control.tabIndex = 0, control.setAttribute("role", "slider"), control.setAttribute("aria-label", c.display);
+  let read = el("span", "knobs-angle-read"), dial = el("span", "knobs-dial"), hand = el("i", "knobs-dial-hand");
+  dial.append(hand), control.append(read, dial), row.append(control);
+  let value = c.get(), turn = value, mixed = !1, dragging = !1, g = gesture(c), places = () => decimals(f().step), snapTo = (v, coarse) => {
+    let step = coarse ? Math.max(15, f().step) : f().step, q = Number((Math.round(v / step) * step).toPrecision(12));
+    return f().wrap ? wrapAngle2(q, f().min, f().max) : clamp(q, f().min, f().max);
+  }, rolling = rollingReadout(read), paint = (instant, delay = 0) => {
+    let t = mixed ? "—" : `${fmt(value, places())}°`;
+    if (rolling.show(mixed ? ["—"] : [{ value, decimals: places() }, "°"], instant || row.classList.contains("knobs-active") ? 0 : rollMs(row), delay), control.setAttribute("aria-valuenow", String(value)), control.setAttribute("aria-valuetext", t), instant || reducedMotion4(c.doc))
+      hand.style.transition = "none";
+    if (hand.style.rotate = `${turn.toFixed(3)}deg`, instant)
+      hand.offsetWidth, hand.style.transition = "";
+  }, follow = (next) => {
+    let d = next - value;
+    if (f().wrap) {
+      let s = f().max - f().min;
+      d = ((d + s / 2) % s + s) % s - s / 2;
+    }
+    turn += d, value = next;
+  }, mode = "scrub", startX = 0, startValue = 0, carried = 0, rowRect, centre = [0, 0], moved = !1, angleAt = (x, y) => Math.atan2(x - centre[0], -(y - centre[1])) * 180 / Math.PI;
+  control.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey)
+      return;
+    if (event.target.closest(".knobs-cell-edit"))
+      return;
+    event.preventDefault(), control.setPointerCapture(event.pointerId), control.focus({ preventScroll: !0, focusVisible: !1 });
+    let r = dial.getBoundingClientRect();
+    if (centre = [r.left + r.width / 2, r.top + r.height / 2], mode = event.target.closest(".knobs-dial") ? "dial" : "scrub", startX = event.clientX, startValue = value, carried = 0, moved = !1, dragging = !0, g.start(), mode === "dial")
+      moved = !0, row.classList.add("knobs-active"), g.set(snapTo(angleAt(event.clientX, event.clientY), !1));
+    c.wake();
+  }), control.addEventListener("pointermove", (event) => {
+    if (!dragging)
+      return;
+    if (mode === "dial") {
+      let a = angleAt(event.clientX, event.clientY);
+      g.set(snapTo(f().wrap ? a : clamp(a, f().min, f().max), event.shiftKey));
+      return;
+    }
+    if (!moved && Math.abs(event.clientX - startX) < 3)
+      return;
+    if (!moved)
+      moved = !0, startX = event.clientX, rowRect = row.getBoundingClientRect(), row.classList.add("knobs-active");
+    let r = rowRect, rate = precisionRate(offRow(event.clientY, r.top, r.bottom)) * (event.altKey ? 0.1 : 1);
+    carried += (event.clientX - startX) * rate, startX = event.clientX, g.set(snapTo(startValue + carried * f().step, event.shiftKey));
+  });
+  let editor = inlineEdit(c.doc, row, `${c.display} value`, (v) => {
+    g.start(), g.set(snapTo(v, !1));
+  }, () => control), release = () => {
+    if (!dragging)
+      return;
+    if (dragging = !1, row.classList.remove("knobs-active"), !moved)
+      editor.start(mixed ? "" : fmt(value, places()));
+    c.wake();
+  };
+  control.addEventListener("pointerup", release), control.addEventListener("pointercancel", release);
+  let panAt, give = textGive(read, () => c.wake());
+  onPan(control, {
+    accept: () => !dragging,
+    move(dx) {
+      let step = f().step;
+      if (panAt === void 0)
+        g.start(), panAt = { at: value / step, give: 0 }, row.classList.add("knobs-active");
+      if (panAt = f().wrap ? { at: panAt.at + dx, give: 0 } : band(panAt, dx, f().min / step, f().max / step), g.set(snapTo(panAt.at * step, !1)), panAt.give !== give.give)
+        give.hold(panAt.give);
+    },
+    lift: () => give.release(),
+    end() {
+      panAt = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
+    },
+    step(direction) {
+      g.start(), g.set(snapTo(value + direction * f().step, !1));
+    }
+  }), control.addEventListener("keydown", (event) => {
+    if (event.target !== control || !plainKey(event))
+      return;
+    let dir = arrowOf(event), char = typed(event);
+    if (dir)
+      if (event.preventDefault(), event.stopPropagation(), g.start(), event.shiftKey) {
+        let s = Math.max(15, f().step), k = dir > 0 ? Math.floor(value / s + 0.000000001) + 1 : Math.ceil(value / s - 0.000000001) - 1;
+        g.set(snapTo(k * s, !1));
+      } else
+        g.set(snapTo(value + dir * f().step * (event.altKey ? 0.1 : 1), !1));
+    else if (event.key === "Home" || event.key === "End")
+      event.preventDefault(), g.start(), g.set(snapTo(event.key === "Home" ? f().min : f().max - (f().wrap ? f().step : 0), !1));
+    else if (event.key === "Enter" && keyPrefs(control).edit)
+      event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : fmt(value, places()));
+    else if (char && keyPrefs(control).edit)
+      event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
+  });
+  let first = !0, gpu = {
+    kind: "angle",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    control,
+    read,
+    dial,
+    turn: () => mixed ? 0 : turn,
+    dragging: () => dragging,
+    editing: () => editor.open,
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input: control,
+    stops: () => [control],
+    update(next, delay, instant, isMixed = !1) {
+      if (mixed = isMixed, first || instant)
+        value = turn = next;
+      else
+        follow(next);
+      paint(first || Boolean(instant) || dragging, delay), first = !1;
+    },
+    dispose() {
+      rolling.dispose();
+    },
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+var SEED_STEP = 12, DICE_ROLL_MS = 620;
+function seedRow(c) {
+  let { row, label, el } = shell(c, "seed"), f = () => c.field, control = el("span", "knobs-seed");
+  control.tabIndex = 0, control.setAttribute("role", "spinbutton"), control.setAttribute("aria-label", c.display);
+  let read = el("span", "knobs-seed-read");
+  control.append(read);
+  let reel = el("span", "knobs-seed-digits");
+  read.append(reel);
+  let roller = it(reel, {
+    value: c.get(),
+    format: { useGrouping: !1, maximumFractionDigits: 0 },
+    duration: 1,
+    motionBlur: !0
+  }), places = [], initialized = !1, diced = !1, roll = el("button", "knobs-seed-roll");
+  roll.type = "button", roll.tabIndex = -1, roll.setAttribute("aria-label", `Roll ${c.display}`);
+  let die = createHeaderDie(c.doc, () => c.wake(), GROUP_DIE);
+  roll.append(die.node), row.append(control, roll);
+  let value = c.get(), mixed = !1, g = gesture(c), set = (v) => {
+    stopCarry(), g.start(), g.set(Math.round(clamp(v, f().min, f().max)));
+  }, reroll = () => {
+    let { min, max } = f(), next = value;
+    for (let i = 0;i < 8 && next === value; i++)
+      next = min + Math.floor(Math.random() * (max - min + 1));
+    die.roll(), diced = !0, set(next), diced = !1;
+  };
+  roll.onclick = () => reroll();
+  let editor = inlineEdit(c.doc, row, `${c.display} value`, set, () => control), give = textGive(read, () => c.wake()), recent = moves(), panned, carry = [], stopCarry = () => {
+    for (let t of carry)
+      clearTimeout(t);
+    carry = [];
+  }, scrubBy = (steps) => {
+    let { min, max } = f(), next = clamp(value + steps, min, max);
+    if (next === value)
+      return !1;
+    let dir = next > value ? 1 : -1;
+    for (let i = 0;i < Math.min(3, Math.abs(next - value)); i++)
+      die.turn(dir);
+    return g.set(next), tick(control), !0;
+  }, letGo = () => {
+    panned = void 0, give.release(), row.classList.remove("knobs-active"), c.wake();
+  };
+  onPan(row, {
+    accept: () => !editor.open,
+    move(dx) {
+      if (!panned)
+        stopCarry(), g.start(), recent.reset(), panned = { travel: 0, give: 0 }, row.classList.add("knobs-active"), c.wake();
+      recent.add(dx);
+      let { min, max } = f(), { next, steps } = stepBand(panned, dx, SEED_STEP, [value - min, max - value]);
+      if (panned = next, steps)
+        scrubBy(steps);
+      if (next.give !== give.give)
+        give.hold(next.give);
+    },
+    lift() {
+      if (!panned)
+        return;
+      let n = carrySteps(recent.speed()), dir = Math.sign(recent.speed());
+      letGo();
+      for (let i = 0;i < n; i++)
+        carry.push(setTimeout(() => {
+          if (!scrubBy(dir))
+            stopCarry();
+        }, carryAt(i)));
+    },
+    end: letGo,
+    step(direction) {
+      stopCarry(), set(value + direction);
+    }
+  }), control.addEventListener("click", () => {
+    if (!editor.open)
+      editor.start(mixed ? "" : String(value));
+  }), control.addEventListener("keydown", (event) => {
+    if (event.target !== control || !plainKey(event))
+      return;
+    let dir = arrowOf(event), char = typed(event);
+    if (dir)
+      event.preventDefault(), event.stopPropagation(), set(value + dir * bigOf(event));
+    else if (event.key === " ")
+      event.preventDefault(), event.stopPropagation(), reroll();
+    else if (event.key === "Enter" && keyPrefs(control).edit)
+      event.preventDefault(), event.stopPropagation(), editor.start(mixed ? "" : String(value));
+    else if (char && keyPrefs(control).edit)
+      event.preventDefault(), event.stopPropagation(), editor.start(char, !1);
+  });
+  let paint = (previous, instant) => {
+    read.toggleAttribute("data-mixed", mixed), control.setAttribute("aria-valuenow", String(value));
+    let ms = !initialized || instant ? 0 : diced ? DICE_ROLL_MS : rollMs(row);
+    initialized = !0, syncPlaces(places, String(value), diced ? 1 : Math.sign(value - previous), ms, 0);
+    let dom = ms > 0 && row.closest('[data-gpu-active="true"]') === null;
+    if (roller.update({
+      value,
+      animated: !0,
+      duration: dom ? ms : 1,
+      motionBlur: dom,
+      direction: diced ? "up" : "auto"
+    }), ms > 0)
+      c.wake();
+  }, gpu = {
+    kind: "seed",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    control,
+    read,
+    places,
+    mixed: () => mixed,
+    die: { button: roll, die },
+    editing: () => editor.open,
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input: control,
+    stops: () => [control],
+    update(next, _delay, instant, isMixed = !1) {
+      let previous = value;
+      value = next, mixed = isMixed, paint(previous, Boolean(instant));
+    },
+    dispose: () => {
+      stopCarry(), die.dispose(), roller.destroy();
+    },
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+var CAP_MORPH = springLinear(SPRINGS2.snappy);
+function keyCap(o) {
+  let chip = o.doc.createElement("button");
+  chip.className = "knobs-keys", chip.type = "button";
+  let text = o.doc.createElement("span");
+  text.className = "knobs-keys-text", chip.append(text);
+  let value = "", capturing = !1, preview = "", morph, write = (shown) => {
+    let glide = chip.isConnected && chip.offsetWidth > 0 && !chip.closest('[data-gpu-active="true"]') && !reducedMotion4(o.doc), from = glide ? chip.getBoundingClientRect().width : 0;
+    if (morph?.cancel(), text.textContent = shown, !glide)
+      return;
+    let to = chip.getBoundingClientRect().width;
+    if (text.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: "ease-out" }), Math.abs(to - from) < 0.5)
+      return;
+    chip.dataset.morph = "", morph = chip.animate([{ width: `${from}px` }, { width: `${to}px` }], {
+      duration: CAP_MORPH.ms,
+      easing: CAP_MORPH.easing
+    }), morph.onfinish = () => delete chip.dataset.morph, morph.oncancel = () => delete chip.dataset.morph;
+  }, paint = () => {
+    let shown = capturing ? preview || "Type keys…" : value === void 0 ? "—" : value ? comboLabel2(value) : o.empty;
+    if (text.textContent !== shown)
+      write(shown);
+    chip.toggleAttribute("data-empty", !capturing && value === ""), chip.setAttribute("aria-pressed", String(capturing)), chip.setAttribute("aria-label", `${o.name()}: ${capturing ? "press a key combination" : value ? comboLabel2(value) : "none"}`), o.wake();
+  }, capture = (on) => {
+    if (capturing === on)
+      return;
+    if (on && o.row.closest("[data-disabled],[data-readonly]"))
+      return;
+    capturing = on, preview = "", o.row.classList.toggle("knobs-active", on), paint();
+  }, held = (event) => {
+    let mods = heldMods(event);
+    preview = mods.length ? comboLabel2(`${mods.join("+")}+…`) : "", paint();
+  };
+  return chip.onclick = () => capture(!capturing), chip.addEventListener("keydown", (event) => {
+    if (event.isComposing)
+      return;
+    if (!capturing) {
+      if ((event.key === "Enter" || event.key === " ") && plainKey(event) && !event.altKey)
+        event.preventDefault(), event.stopPropagation(), capture(!0);
+      return;
+    }
+    if (event.key === "Tab")
+      return capture(!1);
+    event.preventDefault(), event.stopPropagation();
+    let mods = heldMods(event);
+    if (event.key === "Escape" && !mods.length)
+      return capture(!1);
+    let take = (combo) => {
+      value = combo, capture(!1), o.set(combo);
+    };
+    if ((event.key === "Backspace" || event.key === "Delete") && !mods.length)
+      return take("");
+    let combo = comboFromEvent2(event);
+    if (!combo)
+      return held(event);
+    take(combo);
+  }), chip.addEventListener("keyup", (event) => {
+    if (capturing)
+      held(event);
+  }), chip.addEventListener("blur", () => capture(!1)), paint(), {
+    chip,
+    text,
+    capturing: () => capturing,
+    show(combo) {
+      value = combo, paint();
+    }
+  };
 }
-function syncFrame(root) {
-  if (!root.isConnected)
-    return;
-  if (root.ownerDocument.defaultView?.getComputedStyle(root).getPropertyValue("--k-frame").trim() === "flat")
-    root.dataset.frame = "flat";
-  else
-    delete root.dataset.frame;
+function keybindRow(c) {
+  let { row, label } = shell(c, "keybind"), cap = keyCap({
+    doc: c.doc,
+    row,
+    empty: "None",
+    name: () => c.display,
+    set: (combo) => c.set(combo),
+    wake: c.wake
+  }), { chip, text } = cap;
+  row.append(chip), cap.show(c.get());
+  let gpu = {
+    kind: "keybind",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    chip,
+    text,
+    capturing: cap.capturing,
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input: chip,
+    stops: () => [chip],
+    update(next, _delay, _instant, isMixed = !1) {
+      cap.show(isMixed ? void 0 : next);
+    },
+    dispose() {},
+    tracks: [],
+    gpu: [gpu]
+  };
 }
-var lookDefaults = { current: {} };
-function frameLoop(win, step) {
-  let raf = 0, last = 0, tick = (now) => {
-    let dt = last ? Math.min(0.064, (now - last) / 1000) : 0.016666666666666666;
-    if (last = now, raf = step(dt) ? win.requestAnimationFrame(tick) : 0, !raf)
-      last = 0;
+function textRow(c) {
+  let { row, label, el } = shell(c, "text"), multiline = Boolean(c.field.multiline);
+  row.toggleAttribute("data-multiline", multiline);
+  let input = multiline ? Object.assign(el("textarea", "knobs-text"), { rows: 2 }) : Object.assign(el("input", "knobs-text"), { type: "text" });
+  input.spellcheck = !1, input.autocomplete = "off", input.placeholder = c.field.placeholder ?? "", input.setAttribute("aria-label", c.display), input.value = c.get(), row.append(input);
+  let typed = !1;
+  input.addEventListener("focus", () => typed = !1), input.addEventListener("input", () => {
+    c.set(input.value, { coalesce: typed }), typed = !0;
+  }), input.addEventListener("keydown", (e) => {
+    let event = e;
+    if (event.isComposing)
+      return;
+    if (!(event.key === "Escape" || event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey)))
+      return;
+    event.preventDefault(), event.stopPropagation(), input.blur();
+  });
+  let gpu = {
+    kind: "text",
+    key: c.key,
+    display: c.display,
+    row,
+    labelEl: label,
+    wave: c.wave,
+    isModified: c.isModified
+  };
+  return {
+    row,
+    labelEl: label,
+    input,
+    stops: () => [input],
+    update(next, _delay, _instant, isMixed = !1) {
+      input.placeholder = isMixed ? "—" : c.field.placeholder ?? "";
+      let shown = isMixed ? "" : next;
+      if (input.value !== shown)
+        input.value = shown;
+    },
+    dispose() {},
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+function naturalWidth(b) {
+  let cs = getComputedStyle(b), w = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0), parts = [...b.children];
+  for (let part of parts) {
+    let ps = getComputedStyle(part), margin = parseFloat(ps.marginRight) || 0;
+    w += part instanceof HTMLElement ? part.scrollWidth + margin : parseFloat(ps.width) || 0;
+  }
+  return Math.ceil(w + (parseFloat(cs.columnGap) || 0) * Math.max(0, parts.length - 1));
+}
+function toolbarRow(c, press, keyOf = toolbarShortcut2) {
+  let el = make(c.doc), row = el("div", "knobs-row knobs-toolbar");
+  row.dataset.field = c.key, row.setAttribute("role", "toolbar"), row.setAttribute("aria-label", c.display);
+  let field = c.field, buttons = [], last = 0, keys = "", untips = [], keysNow = () => field.items.map((item) => keyOf(item)?.key ?? "").join("\x00"), showIcons = (on) => {
+    if (row.hasAttribute("data-icons") === on && untips.length === (on ? buttons.length : 0))
+      return;
+    row.toggleAttribute("data-icons", on);
+    for (let off of untips)
+      off();
+    untips = on ? field.items.map((item, i) => {
+      let key = keyOf(item);
+      return tooltip(buttons[i], item.label, key ? { shortcut: key.key } : {});
+    }) : [];
+  }, layout = () => {
+    let cs = getComputedStyle(row), avail = row.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+    if (avail <= 0 || !buttons.length)
+      return;
+    let gap = parseFloat(cs.columnGap) || 0, iconed = field.items.every((item) => item.icon), icons = iconed && field.labels === !1;
+    if (iconed && field.labels === void 0) {
+      let was = row.hasAttribute("data-icons");
+      if (was)
+        row.removeAttribute("data-icons");
+      let widest = Math.max(...buttons.map(naturalWidth));
+      if (was)
+        row.setAttribute("data-icons", "");
+      icons = toolbarColumns(buttons.length, widest, avail, gap) < buttons.length;
+    }
+    showIcons(icons);
+    let cols = String(icons ? buttons.length : toolbarColumns(buttons.length, Math.max(...buttons.map(naturalWidth)), avail, gap));
+    if (row.style.getPropertyValue("--k-tool-cols") !== cols)
+      row.style.setProperty("--k-tool-cols", cols), c.wake();
+  }, sizes = new ResizeObserver(layout);
+  sizes.observe(row), c.doc.fonts?.ready.then(() => row.isConnected && layout());
+  let gpu = {
+    kind: "toolbar",
+    key: c.key,
+    display: c.display,
+    row,
+    items: [],
+    wave: c.wave,
+    isModified: () => !1
+  }, build = () => {
+    let items = [];
+    buttons = field.items.map((item, i) => {
+      let b = el("button", "knobs-tool");
+      b.type = "button", b.tabIndex = -1, b.disabled = Boolean(item.disabled), b.dataset.item = item.id ?? item.label, b.setAttribute("aria-label", item.label);
+      let iconEl;
+      if (item.icon)
+        iconEl = iconSvg(c.doc, item.icon), b.append(iconEl);
+      let name = el("span", "knobs-tool-label", item.label);
+      b.append(name);
+      let chip, key = keyOf(item);
+      if (key) {
+        if (chip = el("kbd", "knobs-tool-key", comboLabel2(key.key)), b.append(chip), key.scope !== "none")
+          b.setAttribute("aria-keyshortcuts", key.key);
+      }
+      return b.onclick = () => {
+        last = i, press(item);
+      }, b.addEventListener("focus", () => last = i), items.push({
+        button: b,
+        ...item.icon ? { icon: item.icon } : {},
+        ...iconEl ? { iconEl } : {},
+        label: name,
+        ...chip ? { chip } : {}
+      }), b;
+    }), row.replaceChildren(...buttons), gpu.items = items, keys = keysNow();
+    for (let off of untips)
+      off();
+    if (untips = [], row.isConnected)
+      layout();
   };
+  build(), row.addEventListener("keydown", (event) => {
+    let at = buttons.indexOf(event.target), dir = arrowOf(event);
+    if (at < 0 || !dir || !plainKey(event))
+      return;
+    event.preventDefault(), event.stopPropagation();
+    let live = buttons.filter((b) => !b.disabled), i = live.indexOf(buttons[at]);
+    live[(i + dir + live.length) % live.length]?.focus();
+  });
+  let first = () => buttons.find((b) => !b.disabled) ?? buttons[0];
   return {
-    wake() {
-      if (!raf)
-        raf = win.requestAnimationFrame(tick);
+    row,
+    labelEl: row,
+    get input() {
+      let b = buttons[last];
+      return b && !b.disabled ? b : first();
     },
-    get running() {
-      return raf !== 0;
+    get field() {
+      return field;
     },
-    stop() {
-      if (raf)
-        win.cancelAnimationFrame(raf);
-      raf = 0, last = 0;
+    stops() {
+      let b = buttons[last];
+      return [b && !b.disabled ? b : first()];
+    },
+    update() {},
+    refresh() {
+      if (keysNow() === keys)
+        return;
+      let focused = buttons.indexOf(c.doc.activeElement);
+      if (build(), focused >= 0)
+        buttons[focused]?.focus({ preventScroll: !0 });
+      c.wake();
+    },
+    match(event, global) {
+      return field.items.find((item) => {
+        let key = keyOf(item);
+        return key !== void 0 && !item.disabled && key.scope === (global ? "page" : "panel") && matchesCombo2(key.key, event);
+      });
+    },
+    press(item) {
+      let i = field.items.indexOf(item), b = buttons[i];
+      if (b && !reducedMotion4(c.doc))
+        b.classList.add("knobs-pressed"), setTimeout(() => b.classList.remove("knobs-pressed"), 140), c.wake();
+      press(item);
+    },
+    swap(next) {
+      field = next, build(), c.wake();
+    },
+    dispose() {
+      sizes.disconnect();
+      for (let off of untips)
+        off();
+    },
+    tracks: [],
+    gpu: [gpu]
+  };
+}
+
+// src/panel/search.ts
+function createSearch(doc, options) {
+  let element = doc.createElement("div");
+  element.className = "knobs-search";
+  let field = doc.createElement("label");
+  field.className = "knobs-search-field", field.append(iconSvg(doc, "search"));
+  let input = doc.createElement("input");
+  input.type = "search", input.placeholder = options.placeholder, input.spellcheck = !1, input.autocomplete = "off", input.setAttribute("aria-label", "Search controls"), input.setAttribute("aria-keyshortcuts", "/"), field.append(input), element.append(field);
+  let on = /* @__PURE__ */ new Set, chips = options.chips.map((spec) => {
+    let b = doc.createElement("button");
+    b.type = "button", b.className = "knobs-search-chip", b.tabIndex = -1, b.dataset.chip = spec.id, b.setAttribute("aria-pressed", "false");
+    let name = doc.createElement("span");
+    if (name.textContent = spec.label, b.append(name), spec.count) {
+      let n = doc.createElement("span");
+      n.className = "knobs-search-count", b.append(n);
+    }
+    return b.onclick = () => {
+      if (on.has(spec.id))
+        on.delete(spec.id);
+      else
+        on.add(spec.id);
+      b.setAttribute("aria-pressed", String(on.has(spec.id))), options.change();
+    }, element.append(b), b;
+  });
+  return input.addEventListener("input", () => options.change()), {
+    element,
+    input,
+    chips,
+    query: () => input.value.trim().toLowerCase(),
+    active: () => on,
+    filtering: () => input.value.trim() !== "" || on.size > 0,
+    counts(counts) {
+      for (let b of chips) {
+        let n = b.querySelector(".knobs-search-count");
+        if (!n)
+          continue;
+        let text = String(counts.get(b.dataset.chip) ?? 0);
+        if (n.textContent !== text)
+          n.textContent = text;
+        let none = text === "0" && !on.has(b.dataset.chip);
+        if (b.hasAttribute("data-none") !== none)
+          b.toggleAttribute("data-none", none);
+      }
+    },
+    set(query, next) {
+      let changed = !1;
+      if (query !== void 0 && input.value !== query)
+        input.value = query, changed = !0;
+      if (next) {
+        let want = new Set(next.filter((id) => chips.some((b) => b.dataset.chip === id)));
+        if (want.size !== on.size || [...want].some((id) => !on.has(id))) {
+          on.clear();
+          for (let id of want)
+            on.add(id);
+          for (let b of chips)
+            b.setAttribute("aria-pressed", String(on.has(b.dataset.chip)));
+          changed = !0;
+        }
+      }
+      if (changed)
+        options.change();
+    },
+    clear() {
+      let had = input.value !== "" || on.size > 0;
+      input.value = "", on.clear();
+      for (let b of chips)
+        b.setAttribute("aria-pressed", "false");
+      if (had)
+        options.change();
+    },
+    focus() {
+      input.focus({ preventScroll: !0 }), input.select();
     }
   };
 }
-var svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS = {
-  caret: svg('<path d="M6 3.5 10.5 8 6 12.5"/>'),
-  chevronDown: svg('<path d="M3.5 6 8 10.5 12.5 6"/>'),
-  eye: svg('<path d="M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8 12.1 12.5 8 12.5 1.5 8 1.5 8Z"/><circle cx="8" cy="8" r="2"/>'),
-  eyeOff: svg('<path d="M2.5 2.5l11 11M6.6 4.2A6.6 6.6 0 0 1 8 3.5c4.1 0 6.5 4.5 6.5 4.5a11 11 0 0 1-1.7 2.2M10.2 11.9A6 6 0 0 1 8 12.5C3.9 12.5 1.5 8 1.5 8a11 11 0 0 1 2.4-2.9"/>'),
-  lock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2"/>'),
-  unlock: svg('<rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 0 1 4.8-1"/>')
-};
+function matchSpan(text, query) {
+  if (!query)
+    return;
+  let at = text.toLowerCase().indexOf(query);
+  return at < 0 ? void 0 : [at, at + query.length];
+}
+function markLabel(label, text, span) {
+  let doc = label.ownerDocument, parts = [];
+  if (!span)
+    parts.push(doc.createTextNode(text));
+  else {
+    if (span[0] > 0)
+      parts.push(doc.createTextNode(text.slice(0, span[0])));
+    let mark = doc.createElement("mark");
+    if (mark.className = "knobs-match", mark.textContent = text.slice(span[0], span[1]), parts.push(mark), span[1] < text.length)
+      parts.push(doc.createTextNode(text.slice(span[1])));
+  }
+  let current = [...label.childNodes].filter((c) => c.nodeType === 3 || c instanceof HTMLElement && c.classList.contains("knobs-match"));
+  if (current.length === parts.length && current.every((c, i) => c.nodeName === parts[i].nodeName && c.textContent === parts[i].textContent))
+    return;
+  for (let c of current)
+    c.remove();
+  label.prepend(...parts);
+}
 
 // src/ui/readout-model.ts
 var SERIES_TOKENS = [
@@ -13454,69 +13787,6 @@ function readoutRow(c) {
   };
 }
 
-// src/ui/layer.ts
-var lookOf = (look) => ({ ...lookDefaults.current, ...look }), roots = /* @__PURE__ */ new WeakMap;
-function layerRoot(doc) {
-  let root = roots.get(doc);
-  if (root?.isConnected)
-    return root;
-  return root = doc.createElement("div"), root.className = "knobs-layers", doc.body.append(root), roots.set(doc, root), root;
-}
-function layerElement(doc, cls, look) {
-  let el = doc.createElement("div");
-  return el.className = cls, layerRoot(doc).append(el), applyLook2(el, lookOf(look)), el;
-}
-function presence(el, o = {}) {
-  let win = el.ownerDocument.defaultView, spring = new Spring(0, 1, 1, 0.002), dx = o.dx ?? 0, dy = o.dy ?? 0, gone = [], shown = !1, render = () => {
-    let reduced = reducedMotion(win), p = spring.x, q = Math.max(0, Math.min(1, p)), scale = reduced ? 1 : (o.scale ?? 0.94) + (1 - (o.scale ?? 0.94)) * p, blur = reduced ? 0 : (1 - q) * (o.blur ?? 6), t = reduced ? 0 : 1 - p;
-    el.style.opacity = q.toFixed(3), el.style.transform = p === 1 ? "" : `translate(${(dx * t).toFixed(2)}px,${(dy * t).toFixed(2)}px) scale(${scale.toFixed(4)})`, el.style.filter = blur > 0.05 ? `blur(${blur.toFixed(2)}px)` : "", el.style.pointerEvents = shown ? "" : "none", o.onFrame?.(p);
-  }, loop = frameLoop(win, (dt) => {
-    if (spring.step(dt), render(), !spring.resting)
-      return !0;
-    if (!shown) {
-      let done = gone;
-      gone = [];
-      for (let f of done)
-        f();
-      o.onGone?.();
-    }
-    return !1;
-  }), tune = (seconds, zeta) => {
-    let reduced = reducedMotion(win);
-    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds), spring.zeta = reduced ? 1 : zeta;
-  };
-  return render(), {
-    show() {
-      shown = !0, gone = [], el.style.pointerEvents = "", tune(o.duration ?? 0.32, 1 - (o.bounce ?? 0.2)), spring.set(1), loop.wake();
-    },
-    hide() {
-      return shown = !1, el.style.pointerEvents = "none", tune(o.exit ?? 0.2, 1), spring.set(0), loop.wake(), new Promise((resolve) => gone.push(resolve));
-    },
-    snap(to = 1) {
-      if (shown = to === 1, spring.snap(to), loop.stop(), render(), !shown) {
-        let done = gone;
-        gone = [];
-        for (let f of done)
-          f();
-        o.onGone?.();
-      } else
-        gone = [];
-    },
-    get shown() {
-      return shown;
-    },
-    from(x, y) {
-      dx = x, dy = y;
-    },
-    dispose() {
-      loop.stop();
-      for (let f of gone)
-        f();
-      gone = [];
-    }
-  };
-}
-
 // src/ui/toast.ts
 var regions = /* @__PURE__ */ new WeakMap;
 function toast(message, options = {}) {
@@ -14496,6 +14766,17 @@ function positionPanel(panel, header, anchor, id, storage) {
   };
 }
 
+// src/panel/dock.ts
+function paneHeadOf(host) {
+  let head = host.closest(".knobs-pane-body")?.parentElement?.querySelector(":scope > .knobs-pane-head");
+  return head && !head.querySelector(":scope > [data-docked]") ? head : void 0;
+}
+function dock(actions, head) {
+  return actions.dataset.docked = "", head.insertBefore(actions, head.querySelector(":scope > .knobs-pane-collapse")), () => {
+    actions.remove(), delete actions.dataset.docked;
+  };
+}
+
 // src/panel/presence.ts
 var EXIT = springMotion2(SPRINGS2.snappy), ENTER = springMotion2(SPRINGS2.default), FADE2 = springMotion2(FADE), BLUR2 = 4, SCALE = 0.96, LEAD2 = 0.4, FOLDED = [
   "height",
@@ -14781,7 +15062,7 @@ function buildPanel(controls, host, options) {
   }
   popover.append(popGrid);
   let baseAt = (scope, from) => {
-    let group = scope === "row" ? rows[rowAt(from)]?.group : scope === "group" ? cardOf(from)?.dataset.group ?? void 0 : void 0, keys = scope === "row" ? rows[rowAt(from)]?.keys ?? [] : scope === "group" ? cardKeys(cardOf(from)) : scope === "selection" ? selectionKeys() ?? [] : void 0, index = group === void 0 ? -1 : controls.activeGroupPreset(group), ref = controls.activePreset(), name = index >= 0 ? controls.groupPresets[group]?.[index]?.name : ref?.kind === "preset" ? presetLabel(ref.id) : ref ? presetStrip.getEntries().find((e) => e.id === `v:${ref.id}`)?.label : void 0;
+    let group = scope === "row" ? rows[rowAt(from)]?.group : scope === "group" ? cardOf(from)?.dataset.group ?? void 0 : void 0, keys = scope === "row" ? rows[rowAt(from)]?.keys ?? [] : scope === "group" ? cardKeys(cardOf(from)) : scope === "selection" ? selectionKeys() ?? [] : void 0, index = group === void 0 ? -1 : controls.activeGroupPreset(group), where = (keys?.length ? controls.scopeOf(keys[0]) : stripScope()) ?? null, ref = where === null ? null : controls.activePreset(where), name = index >= 0 ? controls.groupPresets[group]?.[index]?.name : ref?.kind === "preset" ? presetLabel(ref.id, where) : ref ? (where === "" ? controls.variants : controls.scopes[where]?.variants)?.list().find((v) => v.id === ref.id)?.name : void 0;
     if (!name)
       return null;
     let off = keys ? keys.some((k) => controls.isModified(k)) : controls.isModified();
@@ -14821,7 +15102,7 @@ function buildPanel(controls, host, options) {
     randomButton.hidden = !0;
   randomButton.onclick = (event) => run(() => reroll(void 0, event.altKey)), randomButton.querySelector(".knobs-icon")?.replaceWith(die.node);
   let resetAll = () => {
-    if (!resetBtn.hidden && resetBtn.dataset.shown === "true" && !header.hidden)
+    if (!resetBtn.hidden && resetBtn.dataset.shown === "true" && headerShown())
       turn(resetBtn);
     cue(root, "reset"), controls.reset();
   }, turn = (button) => {
@@ -14875,7 +15156,7 @@ function buildPanel(controls, host, options) {
   if (helpButton?.hidden)
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
-  let presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : void 0) ?? controls.presetLabel(id), presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries)), tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate)), activeTab, searchOptions = typeof options.search === "object" ? options.search : {}, chipTests = /* @__PURE__ */ new Map, search = options.search && !page ? createSearch(doc, {
+  let presetLabel = (id, scope = "") => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : void 0) ?? controls.presetLabel(id, scope), presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries), () => stripScope()), tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate)), activeTab, searchOptions = typeof options.search === "object" ? options.search : {}, chipTests = /* @__PURE__ */ new Map, search = options.search && !page ? createSearch(doc, {
     placeholder: searchOptions.placeholder ?? "Search",
     chips: (searchOptions.chips ?? ["modified"]).map((chip) => {
       if (chip === "modified")
@@ -14894,6 +15175,19 @@ function buildPanel(controls, host, options) {
     header.append(titleEl, headActions);
   if (options.header === !1 && !page)
     header.hidden = !0;
+  let untitled = !page && !header.hidden && !titleEl.textContent, paneHead = untitled && inline ? paneHeadOf(host) : void 0, undock = paneHead ? dock(headActions, paneHead) : void 0;
+  if (undock)
+    header.hidden = !0;
+  let headerShown = () => Boolean(undock) || !header.hidden, syncBand = (animate) => {
+    if (!untitled || undock)
+      return;
+    let any = headerButtons.some((b) => !b.button.hidden && b.button.dataset.shown !== "false");
+    if (!animate)
+      header.hidden = !any;
+    else if ((!header.hidden && header.dataset.leaving !== "true") !== any)
+      reveal(header, any, () => wakeGpu());
+  };
+  presetStrip.display(page ? "chips" : options.presetDisplay ?? "auto");
   let allActions = [
     ...controls.actions ?? [],
     ...options.actions ?? []
@@ -15186,6 +15480,8 @@ function buildPanel(controls, host, options) {
       }
     let specs = [], placed = /* @__PURE__ */ new Set;
     for (let [key, field] of entries) {
+      if (field.kind === "choice" && field.variants && !controls.isPinned(key))
+        continue;
       let pair = field.kind === "knob" && field.spring ? halves.get(field.spring.id) : void 0;
       if (pair?.duration && pair.bounce && field.kind === "knob" && field.spring) {
         if (placed.has(field.spring.id))
@@ -15501,7 +15797,7 @@ function buildPanel(controls, host, options) {
           writeSession(controls.id, { expanded: open ? [...others, key] : others });
         },
         ...spec.parts ? { parts: spec.parts } : {}
-      }, live = { ...context, field }, editor = field.kind === "spring" ? springRow({ ...context, field }) : field.kind === "color" ? colorRow({ ...context, field }) : field.kind === "point" ? pointRow({ ...context, field }) : field.kind === "easing" ? easingRow({ ...context, field }) : field.kind === "gradient" ? gradientRow({ ...context, field }) : field.kind === "curve" ? curveRow({ ...context, field }) : field.kind === "vec" ? vecRow(live) : field.kind === "range" ? rangeRow(live) : field.kind === "angle" ? angleRow(live) : field.kind === "seed" ? seedRow(live) : keybindRow(live);
+      }, live = { ...context, field }, editor = field.kind === "spring" ? springRow({ ...context, field }) : field.kind === "color" ? colorRow({ ...context, field }) : field.kind === "point" ? pointRow({ ...context, field }) : field.kind === "easing" ? easingRow({ ...context, field }) : field.kind === "gradient" ? gradientRow({ ...context, field }) : field.kind === "curve" ? curveRow({ ...context, field }) : field.kind === "vec" ? vecRow(live) : field.kind === "range" ? rangeRow(live) : field.kind === "angle" ? angleRow(live) : field.kind === "seed" ? seedRow(live) : field.kind === "text" ? textRow(live) : keybindRow(live);
       if (field.shortcut)
         editor.input.setAttribute("aria-keyshortcuts", field.shortcut);
       editor.labelEl.ondblclick = resetRow;
@@ -15651,6 +15947,8 @@ function buildPanel(controls, host, options) {
       else
         input.removeAttribute("aria-readonly");
     }
+    if (row.input.classList.contains("knobs-text"))
+      row.input.readOnly = disabled || readOnly;
   }
   let rows = [], leavingRows = /* @__PURE__ */ new Set, presenceRuns = 0, present = (node, show, delay, after) => {
     if (presenceRuns++, node.dataset.presence = show ? "in" : "out", show)
@@ -15909,14 +16207,33 @@ function buildPanel(controls, host, options) {
     return list;
   };
   function presetsTouchTab(entries) {
-    if (page || activeTab === void 0)
+    if (page || activeTab === void 0 || stripScope() !== "")
       return !0;
     let keys = rows.flatMap((r) => {
       let tab = tabOf(r);
-      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys : [];
-    });
+      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys.filter((k) => controls.scopeOf(k) === "") : [];
+    }), v = variantsOf(controls.schema, controls.isPinned);
+    if (v) {
+      let tab = v.field.tab ?? (v.field.group !== void 0 ? groupTab(v.field.group) : void 0);
+      if (tab === void 0 || tab === activeTab)
+        keys.push(v.key);
+    }
     return presetsTouch(entries, keys, controls.locked);
   }
+  function stripScope() {
+    let named = Object.keys(controls.scopes), panelWide = named.length === 0 || Object.keys(controls.presets).length > 1;
+    if (page)
+      return panelWide ? "" : null;
+    if (activeTab === void 0)
+      return panelWide ? "" : named[0] ?? null;
+    if (named.includes(activeTab))
+      return activeTab;
+    return named.find((id) => rows.some((r) => r.group === id && tabOf(r) === activeTab)) ?? (panelWide ? "" : null);
+  }
+  let stripVariants = () => {
+    let scope = stripScope();
+    return (scope ? controls.scopes[scope]?.variants : void 0) ?? controls.variants;
+  };
   function syncTabs() {
     let list = tabList(), has = (id) => id !== void 0 && list.some((t) => t.id === id);
     if (!has(activeTab))
@@ -15930,7 +16247,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     let focused = doc.activeElement;
-    if (applyVisibility(animate ? "tab" : "instant"), focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
+    if (presetStrip.update(), applyVisibility(animate ? "tab" : "instant"), focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: !0, focusVisible: !1 });
     options.onTab?.(id), wakeGpu();
   }
@@ -16143,12 +16460,12 @@ function buildPanel(controls, host, options) {
   }, text = el("textarea");
   text.hidden = !0, text.name = "variant-json", text.spellcheck = !1, text.setAttribute("aria-label", "Import or copy text");
   let apply = button("Apply import", () => {
-    controls.variants.import(text.value), say("Presets imported."), reveal(text, !1), reveal(apply, !1), positioned?.constrain();
+    stripVariants().import(text.value), say("Presets imported."), reveal(text, !1), reveal(apply, !1), positioned?.constrain();
   });
   apply.className = "knobs-apply-btn", apply.setAttribute("aria-label", "Import JSON"), apply.hidden = !0;
   let copy = async (value, inPlace = !0) => {
     try {
-      if (await doc.defaultView.navigator.clipboard.writeText(value), inPlace && !copyButton.hidden && !header.hidden)
+      if (await doc.defaultView.navigator.clipboard.writeText(value), inPlace && !copyButton.hidden && headerShown())
         copied();
       else
         say("Copied.");
@@ -16168,7 +16485,7 @@ function buildPanel(controls, host, options) {
   }
   if (showVariants && showFooter) {
     let transfer = el("div");
-    transfer.className = "knobs-transfer", transfer.append(button("Export presets", () => void copy(controls.variants.export(), !1)), button("Import presets", () => {
+    transfer.className = "knobs-transfer", transfer.append(button("Export presets", () => void copy(stripVariants().export(), !1)), button("Import presets", () => {
       reveal(text, !0), reveal(apply, !0), text.value = "", positioned?.constrain(), text.focus();
     })), popover.append(transfer);
   }
@@ -16200,6 +16517,9 @@ function buildPanel(controls, host, options) {
       root.append(customActions);
     root.append(text, apply, status, live);
   }
+  let emptyEl = el("p", options.empty);
+  if (emptyEl.className = "knobs-empty", emptyEl.hidden = !0, options.empty && !page)
+    body.after(emptyEl);
   let shown = controls.get(), initialized = !1, cascade = (changedCount) => {
     if (changedCount < 2)
       return 0;
@@ -16233,6 +16553,7 @@ function buildPanel(controls, host, options) {
   }
   let shownBase = "", baseSignature = () => JSON.stringify([
     controls.activePreset(),
+    Object.keys(controls.scopes).map((s) => controls.activePreset(s)),
     Object.keys(controls.groupPresets).map((g) => controls.activeGroupPreset(g))
   ]);
   function update() {
@@ -16245,6 +16566,8 @@ function buildPanel(controls, host, options) {
       land();
     if (controls.schema !== shape)
       shape = controls.schema, layoutRows(initialized && !landing);
+    if (emptyEl.isConnected && emptyEl.hidden !== rows.length > 0)
+      emptyEl.hidden = rows.length > 0;
     let values = controls.get(), before = shown, fresh = (r) => r.row.dataset.shown === void 0, changed = (r) => fresh(r) || Boolean(r.mixed) !== isMixed(r) || r.keys.some((k) => !same(values[k], before[k])), changedCount = 0;
     if (initialized && !landing) {
       for (let r of rows)
@@ -16343,7 +16666,7 @@ function buildPanel(controls, host, options) {
     let undoMoved = bloom(undoButton, controls.canUndo);
     if (bloom(redoButton, controls.canRedo) || undoMoved)
       wakeGpu();
-    if (controls.error && status.textContent !== controls.error)
+    if (syncBand(initialized), controls.error && status.textContent !== controls.error)
       say(controls.error, 8000);
     for (let [group, c] of groupChips)
       c.show(String(controls.matchingGroupPreset(group)));
@@ -16852,7 +17175,7 @@ function buildPanel(controls, host, options) {
       row: rows[rowAt(active)]?.display,
       editor: t.level === "editor" ? partName(t.el, active) : void 0
     });
-  }, crumbs = options.crumbs === !1 || header.hidden || !titleEl.isConnected ? void 0 : createCrumbs({
+  }, crumbs = options.crumbs !== !0 || header.hidden || !titleEl.isConnected ? void 0 : createCrumbs({
     header,
     title: titleEl,
     reduced: () => reducedMotion(),
@@ -16870,7 +17193,21 @@ function buildPanel(controls, host, options) {
       return;
     let t = lensTarget(to);
     jumpedTo = t && t !== "out" ? t.el : null, to.focus(quiet), queueScope();
-  }, titleDown;
+  };
+  root.addEventListener("mousedown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey || event.ctrlKey)
+      return;
+    let target = event.target instanceof Element ? event.target : null, r = rows[rowAt(target)];
+    if (!target || !r || r.leaving || r.row.closest("[hidden]"))
+      return;
+    let own = target.closest("button,input,select,textarea,a[href],[tabindex],[contenteditable]");
+    if (own && r.row.contains(own))
+      return;
+    event.preventDefault(), r.input.focus({ preventScroll: !0, focusVisible: !1 });
+    let t = lensTarget(doc.activeElement);
+    jumpedTo = t && t !== "out" ? t.el : null, queueScope();
+  }, !0);
+  let titleDown;
   titleEl.addEventListener("pointerdown", (event) => {
     titleDown = [event.clientX, event.clientY];
   }), titleEl.addEventListener("click", (event) => {
@@ -16929,7 +17266,7 @@ function buildPanel(controls, host, options) {
       wasArmed = armed, root.toggleAttribute("data-k-armed", armed), wakeGpu();
     if (queueLens(), !popover.hidden)
       describeScope();
-    optionKeys.show("keyboard" in root.dataset ? optionsAt(active) : void 0);
+    optionKeys.show("keyboard" in root.dataset ? optionsAt(active) ?? stripOptionsAt(active) : void 0);
   }, scopeQueued = !1, queueScope = () => {
     if (scopeQueued)
       return;
@@ -16962,6 +17299,17 @@ function buildPanel(controls, host, options) {
     if (!r || r.row.closest("[data-disabled],[data-readonly]"))
       return;
     return optionsOf(r);
+  }, stripDigits = () => visible(presetStrip.element) && presetStrip.getEntries().length > 1, stripOptions = {
+    get count() {
+      return presetStrip.getEntries().length;
+    },
+    choose: (i) => presetStrip.select(i),
+    shown: () => presetStrip.getButtons(),
+    anchor: presetStrip.element
+  }, stripOptionsAt = (node) => {
+    if (hintCtrl.isActive || !node || !stripDigits())
+      return;
+    return (presetStrip.element.contains(node) || focusLevel(node) === "panel") && !presetStrip.nameField() ? stripOptions : void 0;
   }, pickOption = (event) => {
     if (!/^[1-9]$/.test(event.key) || event.altKey || event.shiftKey)
       return !1;
@@ -17166,12 +17514,20 @@ function buildPanel(controls, host, options) {
       event.preventDefault(), searchReturn = target, search.focus();
       return;
     }
-    if (page && /^[1-9]$/.test(key)) {
-      let group = focusedGroup(target);
-      if (group && groupChips.has(group)) {
+    if (/^[1-9]$/.test(key)) {
+      let group = page ? focusedGroup(target) : void 0;
+      if (Boolean(group && groupChips.has(group))) {
         event.preventDefault(), run(() => applyGroupPreset(group, Number(key) - 1));
         return;
       }
+      if (digitRoute(key, {
+        options: !1,
+        keeps: tracks.has(target),
+        presets: stripDigits() ? presetStrip.getEntries().length : 0
+      }) === "presets") {
+        event.preventDefault(), presetStrip.select(Number(key) - 1);
+        return;
+      }
     }
     if (pressed("hint", event)) {
       if (event.preventDefault(), hintScrollY = win?.scrollY ?? 0, !unregisterHints || !pageHints(doc).start())
@@ -17575,8 +17931,8 @@ function buildPanel(controls, host, options) {
     inline,
     header,
     titleEl,
-    headerButtons,
-    headerDie: { button: randomButton, die },
+    headerButtons: undock ? [] : headerButtons,
+    ...undock ? {} : { headerDie: { button: randomButton, die } },
     locks: lockIcons,
     presetStrip,
     tabs: tabStrip,
@@ -17699,7 +18055,7 @@ function buildPanel(controls, host, options) {
       inHand.clear(), positioned?.dispose(), die.dispose();
       for (let g of groupDice.values())
         g.die.dispose();
-      menu?.close(!1), doc.removeEventListener("keyup", endCompare, !0), doc.defaultView?.removeEventListener("blur", endCompare), controls.compare(!1), morph?.dispose(), toggled?.dispose(), presence.dispose(), untrackHas(), unsubscribeSound(), optionKeys.dispose(), root.remove();
+      menu?.close(!1), doc.removeEventListener("keyup", endCompare, !0), doc.defaultView?.removeEventListener("blur", endCompare), controls.compare(!1), morph?.dispose(), toggled?.dispose(), presence.dispose(), untrackHas(), unsubscribeSound(), optionKeys.dispose(), undock?.(), root.remove();
     }
   };
   if (!layout)