@kitlangton/knobs 0.4.0-next.12 → 0.4.0-next.14

package/dist/dev/{chunk-9qtvxa6k.js → chunk-s7d5a8vb.js}

@@ -46,7 +46,7 @@ import {
   pushReadout,
   READOUT,
   storageKey
-} from "./chunk-7kns3qe6.js";
+} from "./chunk-v2g91mrm.js";
 import {
   resolveLook,
   themeOf,
@@ -119,7 +119,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-nwfm1bfj.js";
+} from "./chunk-bejz4qcg.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -960,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) {
@@ -1012,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)
@@ -1029,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, display = "auto", chipMin = 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", digits = !1, 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];
   }
@@ -1087,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)
@@ -1130,16 +1133,24 @@ 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, digits, 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);
+          let b = el("button", "knobs-preset-chip");
+          if (digits && idx < 9) {
+            let key = el("span", "knobs-preset-key", String(idx + 1));
+            key.setAttribute("aria-hidden", "true"), b.append(key, el("span", "knobs-preset-label", entry.label)), b.setAttribute("aria-keyshortcuts", String(idx + 1));
+          } else
+            b.textContent = entry.label;
           return b.type = "button", b.tabIndex = -1, b.dataset.presetId = entry.id, b.dataset.presetKind = entry.kind, b.dataset.presetName = entry.label, b.setAttribute("role", "radio"), b.setAttribute("aria-label", entry.label), b.onclick = (e) => {
             if (e.preventDefault(), focusQuietly(), idx !== activeState.activeIndex || activeState.drifted)
               selectAt(idx);
@@ -1175,11 +1186,14 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   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() {
@@ -1223,7 +1237,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() {
@@ -1239,7 +1253,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;
@@ -1330,6 +1344,13 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       if (display = mode, placeDisplay())
         measurePill(!0);
     },
+    digits(on) {
+      if (digits === on)
+        return;
+      if (digits = on, root.toggleAttribute("data-digits", on), signature === "")
+        return;
+      signature = "", update();
+    },
     save: () => {
       let message = "";
       return run(() => message = save()), message;
@@ -2971,7 +2992,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);
@@ -2980,6 +3002,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.
@@ -2993,13 +3017,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) {
@@ -4007,6 +4034,111 @@ class GpuOverlayManager {
     let more = o.more;
     d[b + 40] = more ? more[0] : 0, d[b + 41] = more ? more[1] : 0, d[b + 42] = more ? more[2] : 0, d[b + 43] = more ? more[3] : 0;
   }
+  drawPresetStrip(ps, tokens, clip, hinting, reducedMotion, dt, tray) {
+    let moving = !1, psHovered = this.curPanelHovered && ps.element.matches(":hover");
+    this.curSubHovered = psHovered;
+    let psRect = this.rectOf(ps.element), trackRect = this.rectOf(ps.track);
+    if (tray && !tokens.boxed)
+      this.pushPrim({
+        x: psRect.left,
+        y: psRect.top,
+        w: psRect.width,
+        h: psRect.height,
+        color: tokens.segBg,
+        color2: tokens.accent,
+        radius: tokens.radius,
+        glowOrBlur: tokens.glowStrength * 8,
+        kind: 1,
+        p0: psHovered || this.isFocused(ps.element) ? 0.4 : 0
+      });
+    let stripClip = intersectClip(clip, [psRect.left, psRect.top, psRect.right, psRect.bottom]), activeState = ps.getActiveState(), chipButtons = ps.getButtons();
+    if (tokens.boxed)
+      for (let btn of chipButtons) {
+        let br = this.rectOf(btn);
+        if (br.right < stripClip[0] || br.left > stripClip[2])
+          continue;
+        this.drawButtonBox(btn, br, this.isHovered(btn), this.missed(btn, hinting), stripClip);
+      }
+    let activeBtn = activeState.activeIndex >= 0 ? chipButtons[activeState.activeIndex] : void 0, pe = ps.pillEdges, activeBtnRect = activeBtn ? this.rectOf(activeBtn) : void 0, panned = livePill(ps.track);
+    if (activeBtn && activeBtnRect && !activeState.isCustom) {
+      let left = activeBtnRect.left - trackRect.left, right = left + Math.max(20, activeBtnRect.width), top = activeBtnRect.top - trackRect.top;
+      if (this.carry(pe, activeBtn, left, right, ps.pillY, top), panned)
+        pe.snap(panned.left, panned.right), ps.pillY.snap(panned.top);
+      else if (reducedMotion || pe.end.x - pe.start.x <= 1)
+        pe.snap(left, right), ps.pillY.snap(top);
+      else
+        pe.to(left, right, 0, trailScale(tokens.blurStrength)), ps.pillY.set(top);
+      ps.pillAlpha.set(activeState.drifted ? DRIFTED_PILL : 1);
+    } else
+      ps.pillAlpha.set(0);
+    for (let sp of [pe.start, pe.end, ps.pillY, ps.pillAlpha])
+      if (reducedMotion)
+        sp.snap(sp.target);
+      else if (sp.step(dt), !sp.resting)
+        moving = !0;
+    let pillAlpha = clamp(ps.pillAlpha.x, 0, 1);
+    if (pillAlpha > 0.01)
+      this.pushPrim({
+        x: trackRect.left + pe.start.x,
+        y: trackRect.top + ps.pillY.x,
+        w: Math.max(18, pe.end.x - pe.start.x),
+        h: Math.max(16, activeBtnRect?.height ?? trackRect.height),
+        clip: stripClip,
+        color: withAlpha(tokens.pillBg, pillAlpha),
+        color2: withAlpha(tokens.pillBorder, pillAlpha),
+        strokeWidth: this.hairline(tokens),
+        aux2: withAlpha(tokens.rim, tokens.rim[3] * pillAlpha),
+        radius: tokens.buttonRadius ?? tokens.radiusMd,
+        glowOrBlur: tokens.glowStrength,
+        kind: 3,
+        blurX: reducedMotion ? 0 : clamp(pe.velocity * 0.006 * tokens.motionBlur, -8, 8)
+      });
+    for (let i = 0;i < chipButtons.length; i++) {
+      let btn = chipButtons[i], br = this.rectOf(btn);
+      if (br.right < stripClip[0] || br.left > stripClip[2])
+        continue;
+      let isActive = i === activeState.activeIndex, chipHovered = this.isHovered(btn);
+      if (chipHovered)
+        this.curSubHovered = !1;
+      let mark = this.ease(btn, "dot", btn.hasAttribute("data-drifted") ? 1 : 0);
+      if (mark > 0.01) {
+        let size = 4 * (0.4 + 0.6 * mark);
+        this.pushPrim({
+          x: br.right - 6 - size / 2,
+          y: br.top + 6 - size / 2,
+          w: size,
+          h: size,
+          clip: stripClip,
+          color: withAlpha(tokens.modified, 0.95 * mark),
+          glowOrBlur: 0.5,
+          kind: 7
+        });
+      }
+      if (btn.hasAttribute("data-naming"))
+        continue;
+      let key = btn.querySelector(".knobs-preset-key"), name = key && btn.querySelector(".knobs-preset-label");
+      if (key && name) {
+        let kr = this.rectOf(key);
+        this.drawText(key.textContent ?? "", kr.left, br.top + br.height * 0.5, withAlpha(tokens.dim, this.missed(btn, hinting)), { px: tokens.textMeta, weight: tokens.labelWeight, clip: stripClip });
+      }
+      let nr = name ? this.rectOf(name) : void 0;
+      this.drawText(name ? name.textContent ?? "" : btn.textContent ?? "", nr ? nr.left : br.left + br.width * 0.5, br.top + br.height * 0.5, withAlpha(this.hot(btn, isActive || chipHovered, tokens.buttonColor ?? tokens.label), this.missed(btn, hinting)), {
+        px: tokens.buttonFontSize ?? tokens.textControl,
+        weight: isActive ? tokens.titleWeight : tokens.labelWeight,
+        align: nr ? "left" : "center",
+        clip: stripClip
+      });
+    }
+    if (ps.saveButton && !ps.saveButton.hidden) {
+      let sr = this.rectOf(ps.saveButton), hot = this.isHovered(ps.saveButton);
+      this.drawText("+", sr.left + sr.width * 0.5, sr.top + sr.height * 0.5, this.hot(ps.saveButton, hot, tokens.dim), {
+        px: tokens.textTitle,
+        weight: 400,
+        align: "center"
+      });
+    }
+    return moving;
+  }
   hairline(tokens) {
     return Math.max(1, Math.round(tokens.rimWidth * this.curScale)) / this.curScale;
   }
@@ -5753,7 +5885,6 @@ class GpuOverlayManager {
         this.placeBackdrop(panel);
         continue;
       }
-      let pillFill = tokens.pillBg;
       if (pageB)
         this.placeBackdrop(panel);
       let covers = drawn.some((r) => r.left < card.right && r.right > card.left && r.top < card.bottom && r.bottom > card.top);
@@ -5885,111 +6016,8 @@ class GpuOverlayManager {
         }
       }
       let ps = panel.presetStrip, hinting = panel.root.classList.contains("knobs-hinting"), stripAlpha = this.curAlpha;
-      if (!ps.element.hidden) {
-        this.curAlpha = stripAlpha * this.presence(ps.element);
-        let psHovered = this.curPanelHovered && ps.element.matches(":hover");
-        this.curSubHovered = psHovered;
-        let psRect = this.rectOf(ps.element), trackRect = this.rectOf(ps.track);
-        if (!tokens.boxed)
-          this.pushPrim({
-            x: psRect.left,
-            y: psRect.top,
-            w: psRect.width,
-            h: psRect.height,
-            color: tokens.segBg,
-            color2: tokens.accent,
-            radius: tokens.radius,
-            glowOrBlur: tokens.glowStrength * 8,
-            kind: 1,
-            p0: psHovered || this.isFocused(ps.element) ? 0.4 : 0
-          });
-        let stripClip = intersectClip(bodyClip, [
-          psRect.left,
-          psRect.top,
-          psRect.right,
-          psRect.bottom
-        ]), activeState = ps.getActiveState(), chipButtons = ps.getButtons();
-        if (tokens.boxed)
-          for (let btn of chipButtons) {
-            let br = this.rectOf(btn);
-            if (br.right < stripClip[0] || br.left > stripClip[2])
-              continue;
-            this.drawButtonBox(btn, br, this.isHovered(btn), this.missed(btn, hinting), stripClip);
-          }
-        let activeBtn = activeState.activeIndex >= 0 ? chipButtons[activeState.activeIndex] : void 0, pe = ps.pillEdges, activeBtnRect = activeBtn ? this.rectOf(activeBtn) : void 0, panned = livePill(ps.track);
-        if (activeBtn && activeBtnRect && !activeState.isCustom) {
-          let left = activeBtnRect.left - trackRect.left, right = left + Math.max(20, activeBtnRect.width), top = activeBtnRect.top - trackRect.top;
-          if (this.carry(pe, activeBtn, left, right, ps.pillY, top), panned)
-            pe.snap(panned.left, panned.right), ps.pillY.snap(panned.top);
-          else if (reducedMotion || pe.end.x - pe.start.x <= 1)
-            pe.snap(left, right), ps.pillY.snap(top);
-          else
-            pe.to(left, right, 0, trailScale(tokens.blurStrength)), ps.pillY.set(top);
-          ps.pillAlpha.set(activeState.drifted ? DRIFTED_PILL : 1);
-        } else
-          ps.pillAlpha.set(0);
-        for (let sp of [pe.start, pe.end, ps.pillY, ps.pillAlpha])
-          if (reducedMotion)
-            sp.snap(sp.target);
-          else if (sp.step(dt), !sp.resting)
-            anyMoving = !0;
-        let pillAlpha = clamp(ps.pillAlpha.x, 0, 1);
-        if (pillAlpha > 0.01)
-          this.pushPrim({
-            x: trackRect.left + pe.start.x,
-            y: trackRect.top + ps.pillY.x,
-            w: Math.max(18, pe.end.x - pe.start.x),
-            h: Math.max(16, activeBtnRect?.height ?? trackRect.height),
-            clip: stripClip,
-            color: withAlpha(pillFill, pillAlpha),
-            color2: withAlpha(tokens.pillBorder, pillAlpha),
-            strokeWidth: this.hairline(tokens),
-            aux2: withAlpha(tokens.rim, tokens.rim[3] * pillAlpha),
-            radius: tokens.buttonRadius ?? tokens.radiusMd,
-            glowOrBlur: tokens.glowStrength,
-            kind: 3,
-            blurX: reducedMotion ? 0 : clamp(pe.velocity * 0.006 * tokens.motionBlur, -8, 8)
-          });
-        for (let i = 0;i < chipButtons.length; i++) {
-          let btn = chipButtons[i], br = this.rectOf(btn);
-          if (br.right < stripClip[0] || br.left > stripClip[2])
-            continue;
-          let isActive = i === activeState.activeIndex, chipHovered = this.isHovered(btn);
-          if (chipHovered)
-            this.curSubHovered = !1;
-          let mark = this.ease(btn, "dot", btn.hasAttribute("data-drifted") ? 1 : 0);
-          if (mark > 0.01) {
-            let size = 4 * (0.4 + 0.6 * mark);
-            this.pushPrim({
-              x: br.right - 6 - size / 2,
-              y: br.top + 6 - size / 2,
-              w: size,
-              h: size,
-              clip: stripClip,
-              color: withAlpha(tokens.modified, 0.95 * mark),
-              glowOrBlur: 0.5,
-              kind: 7
-            });
-          }
-          if (btn.hasAttribute("data-naming"))
-            continue;
-          this.drawText(btn.textContent ?? "", br.left + br.width * 0.5, br.top + br.height * 0.5, withAlpha(this.hot(btn, isActive || chipHovered, tokens.buttonColor ?? tokens.label), this.missed(btn, hinting)), {
-            px: tokens.buttonFontSize ?? tokens.textControl,
-            weight: isActive ? tokens.titleWeight : tokens.labelWeight,
-            align: "center",
-            clip: stripClip
-          });
-        }
-        if (ps.saveButton && !ps.saveButton.hidden) {
-          let sr = this.rectOf(ps.saveButton), hot = this.isHovered(ps.saveButton);
-          this.drawText("+", sr.left + sr.width * 0.5, sr.top + sr.height * 0.5, this.hot(ps.saveButton, hot, tokens.dim), {
-            px: tokens.textTitle,
-            weight: 400,
-            align: "center"
-          });
-        }
-        this.curAlpha = stripAlpha;
-      }
+      if (!ps.element.hidden)
+        this.curAlpha = stripAlpha * this.presence(ps.element), anyMoving = this.drawPresetStrip(ps, tokens, bodyClip, hinting, reducedMotion, dt, !0) || anyMoving, this.curAlpha = stripAlpha;
       let tabs = panel.tabs;
       if (tabs && !tabs.element.hidden)
         anyMoving = this.drawTabStrip(tabs, hinting, reducedMotion, dt, {
@@ -6210,6 +6238,13 @@ class GpuOverlayManager {
             this.drawScope(card, cr, tokens.radius, 1);
         }
       }
+      for (let gs of panel.groupStrips?.() ?? []) {
+        let card = gs.element.parentElement;
+        if (!card || gs.element.closest("[hidden]"))
+          continue;
+        let cr = cardRects.get(card) ?? this.rectOf(card);
+        this.curClip = clipToTile(card, intersectClip(bodyClip, [cr.left, cr.top, cr.right, cr.bottom])), this.curAlpha = panelAlpha * this.presence(card) * fadeOf(card), anyMoving = this.drawPresetStrip(gs, tokens, this.curClip, hinting, reducedMotion, dt, !1) || anyMoving;
+      }
       this.curClip = bodyClip, this.curAlpha = panelAlpha;
       let washed = /* @__PURE__ */ new Set, rowsAlpha = this.curAlpha;
       for (let row of panel.rows) {
@@ -11296,7 +11331,7 @@ function presence(el, o = {}) {
     return !1;
   }), tune = (seconds, zeta) => {
     let reduced = reducedMotion(win);
-    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds), spring.zeta = reduced ? 1 : zeta;
+    spring.omega = 2 * Math.PI / (reduced ? Math.min(FADE.duration, seconds) : seconds), spring.zeta = reduced ? 1 : zeta;
   };
   return render(), {
     show() {
@@ -15047,7 +15082,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();
@@ -15141,7 +15176,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" ? typeof options.defaultLabel === "object" ? options.defaultLabel[scope] : options.defaultLabel : void 0) ?? controls.presetLabel(id, scope), hintReach = (typeof options.hints === "object" ? options.hints.reach : options.hints) ?? "page", stripDigitsShown = typeof options.hints === "object" && options.hints.digits === "always", 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")
@@ -15172,8 +15207,19 @@ function buildPanel(controls, host, options) {
     else if ((!header.hidden && header.dataset.leaving !== "true") !== any)
       reveal(header, any, () => wakeGpu());
   };
-  presetStrip.display(page ? "chips" : options.presetDisplay ?? "auto");
-  let allActions = [
+  presetStrip.display(page ? "chips" : options.presetDisplay ?? "auto"), presetStrip.digits(stripDigitsShown);
+  let groupStrips = /* @__PURE__ */ new Map, tabNamed = (id) => (options.tabs ?? []).some((t) => (typeof t === "string" ? t : t.id) === id) || Object.values(controls.schema).some((f) => f.tab === id), groupStripFor = (group) => {
+    if (page || !Object.hasOwn(controls.scopes, group) || tabNamed(group))
+      return;
+    let strip = groupStrips.get(group);
+    if (!strip)
+      strip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, void 0, () => stripScope() === group ? null : group), strip.element.setAttribute("aria-label", `${groupTitle(group)} presets`), strip.display(options.presetDisplay ?? "auto"), strip.digits(stripDigitsShown), groupStrips.set(group, strip);
+    return strip;
+  }, updateStrips = () => {
+    presetStrip.update();
+    for (let strip of groupStrips.values())
+      strip.update();
+  }, allActions = [
     ...controls.actions ?? [],
     ...options.actions ?? []
   ], body = el("div"), tabMotion = tabTransition(body, root, () => wakeGpu()), pinnedBody = el("div");
@@ -15465,7 +15511,7 @@ 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))
+      if (field.kind === "choice" && field.variants && controls.inPresets(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) {
@@ -16034,7 +16080,7 @@ function buildPanel(controls, host, options) {
         else
           runs.push({ group: r.group, pinned, rows: [r] });
       }
-      let free = blocks.filter((b) => !b.leaving), chosen = [], pinnedBlocks = /* @__PURE__ */ new Set, usedSubheads = /* @__PURE__ */ new Set;
+      let free = blocks.filter((b) => !b.leaving), chosen = [], pinnedBlocks = /* @__PURE__ */ new Set, usedSubheads = /* @__PURE__ */ new Set, stripped = /* @__PURE__ */ new Set;
       for (let run of runs) {
         let at = free.findIndex((b) => b.group === run.group), block = at >= 0 ? free.splice(at, 1)[0] : newBlock(run.group);
         if (at < 0) {
@@ -16061,7 +16107,10 @@ function buildPanel(controls, host, options) {
           }
           under = name, nodes.push(r.row);
         }
-        if (arrange(block.card, nodes), animate && at >= 0) {
+        let strip = run.group !== void 0 && !run.pinned && !stripped.has(run.group) ? groupStripFor(run.group) : void 0;
+        if (strip)
+          stripped.add(run.group);
+        if (arrange(block.card, strip ? [strip.element, ...nodes] : nodes), animate && at >= 0) {
           for (let r of run.rows)
             if (entering.has(r))
               motion.push({ node: r.row, show: !0 });
@@ -16192,12 +16241,12 @@ 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 : [];
-    }), v = variantsOf(controls.schema, controls.isPinned);
+      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys.filter((k) => controls.scopeOf(k) === "") : [];
+    }), v = variantsOf(controls.schema, (key) => !controls.inPresets(key));
     if (v) {
       let tab = v.field.tab ?? (v.field.group !== void 0 ? groupTab(v.field.group) : void 0);
       if (tab === void 0 || tab === activeTab)
@@ -16205,6 +16254,20 @@ function buildPanel(controls, host, options) {
     }
     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))
@@ -16218,7 +16281,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 (updateStrips(), applyVisibility(animate ? "tab" : "instant"), focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: !0, focusVisible: !1 });
     options.onTab?.(id), wakeGpu();
   }
@@ -16431,7 +16494,7 @@ 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) => {
@@ -16456,7 +16519,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);
   }
@@ -16524,6 +16587,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() {
@@ -16545,7 +16609,7 @@ function buildPanel(controls, host, options) {
           changedCount++;
     }
     let stagger = initialized ? cascade(changedCount) : 0, moving = initialized ? rows.filter(changed) : rows;
-    if (presetStrip.update(), batchMeasures(() => {
+    if (updateStrips(), batchMeasures(() => {
       for (let row of moving)
         if (row.slider?.prime(), row.editor?.prime?.(), row.choice)
           primeSegPill(row.choice.seg, row.choice.buttons);
@@ -16677,13 +16741,14 @@ function buildPanel(controls, host, options) {
         if (s.label?.hasAttribute("data-foldable"))
           add(s.label, sectionTitle(s.name), () => s.label.focus(), s.label.firstElementChild);
     }
-    presetStrip.getEntries().forEach((entry, i) => {
-      let chip = presetStrip.getButtons()[i];
-      if (chip)
-        add(chip, entry.label, () => {
-          presetStrip.selectById(entry.id), presetStrip.element.focus({ preventScroll: !0 });
-        });
-    });
+    for (let strip of [presetStrip, ...groupStrips.values()])
+      strip.getEntries().forEach((entry, i) => {
+        let chip = strip.getButtons()[i];
+        if (chip)
+          add(chip, entry.label, () => {
+            strip.selectById(entry.id), strip.element.focus({ preventScroll: !0 });
+          });
+      });
     for (let b of root.querySelectorAll(page ? ".knobs-head-cmd, .knobs-group-head button:not(.knobs-group-die,.knobs-group-reset,.knobs-chips button), .knobs-custom-actions button, .knobs-preset-save" : ".knobs-head-cmd, .knobs-group-head button, .knobs-custom-actions button, .knobs-preset-save, .knobs-popover button"))
       add(b, b.dataset.hint ?? b.getAttribute("aria-label") ?? b.textContent ?? "", () => b.focus());
     let focusedHead = page ? doc.activeElement?.closest(".knobs-tile")?.querySelector(":scope > .knobs-group-head") : null, presetUi = focusedHead ? groupChips.get(focusedHead.dataset.group ?? "") : void 0;
@@ -16699,7 +16764,7 @@ function buildPanel(controls, host, options) {
         add(stop, label, () => stop.focus());
       }
     return targets;
-  }, unregisterHints = (options.hints ?? "page") === "page" && bound("hint") ? pageHints(doc).register(root, () => collectHintTargets().map((t) => ({
+  }, unregisterHints = hintReach === "page" && bound("hint") ? pageHints(doc).register(root, () => collectHintTargets().map((t) => ({
     el: t.el,
     label: t.display,
     ...t.labelEl ? { labelEl: t.labelEl } : {},
@@ -16756,6 +16821,9 @@ function buildPanel(controls, host, options) {
         runs.push({ at: b.head, stops: shown([b.head]) });
     for (let sh of subheads.values())
       runs.push({ at: sh.el, stops: shown([sh.el]) });
+    for (let gs of groupStrips.values())
+      if (visible(gs.element))
+        runs.push({ at: gs.element, stops: shown([gs.element]) });
     runs.push(...strips), runs.sort((a, b) => a.at.compareDocumentPosition(b.at) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
     for (let run of runs)
       list.push(...run.stops);
@@ -17134,6 +17202,9 @@ function buildPanel(controls, host, options) {
         return { el: sub, level: "row" };
       return { el: r.row.closest(".knobs-card > *") ?? r.row, level: "row" };
     }
+    let strip = active.closest(".knobs-card > .knobs-presets");
+    if (strip)
+      return { el: strip, level: "row" };
     let card = cardOf(active);
     return card ? { el: card, level: "card" } : null;
   }, partName = (part, active) => part.querySelector(".knobs-strip-label")?.textContent || active?.getAttribute("aria-label") || part.getAttribute("aria-label") || "Editor", trailFor = (t, active) => {
@@ -17145,7 +17216,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(),
@@ -17163,7 +17234,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) => {
@@ -17255,6 +17340,18 @@ function buildPanel(controls, host, options) {
     if (!r || r.row.closest("[data-disabled],[data-readonly]"))
       return;
     return optionsOf(r);
+  }, groupStripAt = (node) => node ? [...groupStrips.values()].find((s) => s.element.contains(node)) : void 0, groupStripOptions = /* @__PURE__ */ new Map, optionsOfStrip = (strip) => {
+    let o = groupStripOptions.get(strip);
+    if (!o)
+      o = {
+        get count() {
+          return strip.getEntries().length;
+        },
+        choose: (i) => strip.select(i),
+        shown: () => strip.getButtons(),
+        anchor: strip.element
+      }, groupStripOptions.set(strip, o);
+    return o;
   }, stripDigits = () => visible(presetStrip.element) && presetStrip.getEntries().length > 1, stripOptions = {
     get count() {
       return presetStrip.getEntries().length;
@@ -17263,7 +17360,12 @@ function buildPanel(controls, host, options) {
     shown: () => presetStrip.getButtons(),
     anchor: presetStrip.element
   }, stripOptionsAt = (node) => {
-    if (hintCtrl.isActive || !node || !stripDigits())
+    if (hintCtrl.isActive || !node || stripDigitsShown)
+      return;
+    let own = groupStripAt(node);
+    if (own)
+      return visible(own.element) && own.getEntries().length > 1 && !own.nameField() ? optionsOfStrip(own) : void 0;
+    if (!stripDigits())
       return;
     return (presetStrip.element.contains(node) || focusLevel(node) === "panel") && !presetStrip.nameField() ? stripOptions : void 0;
   }, pickOption = (event) => {
@@ -17442,9 +17544,9 @@ function buildPanel(controls, host, options) {
       return;
     }
     if (pressed("presets", event)) {
-      let direction = key === keys.presets[0] ? -1 : 1;
-      if (visible(presetStrip.element) && presetStrip.getEntries().length > 1)
-        presetStrip.cycle(direction);
+      let direction = key === keys.presets[0] ? -1 : 1, strip = groupStripAt(target) ?? presetStrip;
+      if (visible(strip.element) && strip.getEntries().length > 1)
+        strip.cycle(direction);
       else if (!cycleTab(direction))
         return;
       event.preventDefault(), event.stopPropagation();
@@ -17470,6 +17572,8 @@ function buildPanel(controls, host, options) {
       event.preventDefault(), searchReturn = target, search.focus();
       return;
     }
+    if (/^[1-9]$/.test(key) && groupStripAt(target))
+      return;
     if (/^[1-9]$/.test(key)) {
       let group = page ? focusedGroup(target) : void 0;
       if (Boolean(group && groupChips.has(group))) {
@@ -17518,7 +17622,7 @@ function buildPanel(controls, host, options) {
       return;
     }
     if (pressed("save", event) && showVariants) {
-      event.preventDefault(), presetStrip.save();
+      event.preventDefault(), (groupStripAt(target) ?? presetStrip).save();
       return;
     }
     let index = rowAt(target);
@@ -17891,6 +17995,7 @@ function buildPanel(controls, host, options) {
     ...undock ? {} : { headerDie: { button: randomButton, die } },
     locks: lockIcons,
     presetStrip,
+    groupStrips: () => groupStrips.values(),
     tabs: tabStrip,
     groups: gpuGroups,
     cards,
@@ -17997,7 +18102,10 @@ function buildPanel(controls, host, options) {
         dropGpu(r);
       for (let c of groupChips.values())
         c.dispose();
-      presetStrip.dispose(), tabStrip.dispose(), tabMotion.finish(), doc.removeEventListener("keydown", onGlobalKey), layout?.dispose(), tileSizes.disconnect(), headSize.disconnect(), win?.removeEventListener("scroll", onScroll), win?.removeEventListener("scrollend", onScrollEnd);
+      presetStrip.dispose();
+      for (let strip of groupStrips.values())
+        strip.dispose();
+      tabStrip.dispose(), tabMotion.finish(), doc.removeEventListener("keydown", onGlobalKey), layout?.dispose(), tileSizes.disconnect(), headSize.disconnect(), win?.removeEventListener("scroll", onScroll), win?.removeEventListener("scrollend", onScrollEnd);
       for (let type of ["wheel", "touchstart", "keydown"])
         doc.removeEventListener(type, touched, !0);
       doc.removeEventListener("pointerdown", onPointerDown, !0);