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

package/dist/dev/{chunk-mbhy4jg5.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-pdf3zy95.js";
+} from "./chunk-bejz4qcg.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -1029,7 +1029,7 @@ 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, scope = null, at = () => scope ?? "", source = () => scope === null ? void 0 : scope === "" ? { presets: controls.presets, variants: controls.variants } : controls.scopes[scope], 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.scopeOf(k) !== at() && !same(values[k], controls.locked[k]))
@@ -1142,10 +1142,15 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
         return;
       }
       lastVariantsRef = variantsRef;
-      let nextEntries = buildEntries(), nextSig = JSON.stringify([scope, 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);
@@ -1339,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;
@@ -4022,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;
   }
@@ -5768,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);
@@ -5900,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, {
@@ -6225,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) {
@@ -11311,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() {
@@ -15156,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, 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, {
+  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")
@@ -15187,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");
@@ -15480,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) {
@@ -16049,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) {
@@ -16076,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 });
@@ -16212,7 +16246,7 @@ function buildPanel(controls, host, options) {
     let keys = rows.flatMap((r) => {
       let tab = tabOf(r);
       return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys.filter((k) => controls.scopeOf(k) === "") : [];
-    }), v = variantsOf(controls.schema, controls.isPinned);
+    }), 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)
@@ -16247,7 +16281,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     let focused = doc.activeElement;
-    if (presetStrip.update(), 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();
   }
@@ -16575,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);
@@ -16707,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;
@@ -16729,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 } : {},
@@ -16786,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);
@@ -17164,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) => {
@@ -17299,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;
@@ -17307,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) => {
@@ -17486,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();
@@ -17514,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))) {
@@ -17562,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);
@@ -17935,6 +17995,7 @@ function buildPanel(controls, host, options) {
     ...undock ? {} : { headerDie: { button: randomButton, die } },
     locks: lockIcons,
     presetStrip,
+    groupStrips: () => groupStrips.values(),
     tabs: tabStrip,
     groups: gpuGroups,
     cards,
@@ -18041,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);

package/dist/dev/{chunk-7kns3qe6.js → chunk-v2g91mrm.js}

@@ -496,6 +496,7 @@ var META_KEYS = [
   "sectionFolded",
   "tab",
   "pinned",
+  "inPresets",
   "subsection"
 ];
 function pickMeta(source, skip = []) {
@@ -529,6 +530,13 @@ function pinnedKeys(schema, groups = []) {
       out.add(key);
   return out;
 }
+function presetFreeKeys(schema, pinned, groups = {}) {
+  let out = new Set(pinned);
+  for (let [key, f] of Object.entries(schema))
+    if (f.inPresets === !1 || f.group !== void 0 && groups[f.group] === !1)
+      out.add(key);
+  return out;
+}
 var SPRING2 = {
   duration: { min: 0.05, max: 2, step: 0.01 },
   bounce: { min: -0.5, max: 1, step: 0.01 }
@@ -1177,4 +1185,4 @@ function urlFlag2(name) {
 }
 var storageKey = (id, part) => `knobs:${encodeURIComponent(id)}:${part}:v1`;
 
-export { maxChroma, oklchToRgb, parseColor2, fitColor, formatColor, colorHex2, EASINGS2, EASING_Y, easingName, bezierPoint2, bezierCss2, normalizeCombo2, letterOf2, comboFromEvent2, heldMods, matchesCombo2, comboParts2, comboLabel2, isTypingTarget, GRADIENT_SAMPLES, sampleGradient2, gradientSamples, gradientCss2, stopColorAt, sampleCurve2, curveSamples, CURVE_SHAPES2, inRange, sameRamp, randomStops, mutateStops, randomPoints, mutatePoints, pickMeta, isReadout2, hasValue2, variantsOf, pinnedKeys, SPRING2, valueKeys, knob2, choice2, action2, flatSpring2, toggle2, spring2, color2, point2, easing2, vec22, vec32, range2, angle2, seed2, keybind2, text2, gradient2, curve2, toolbarShortcut2, actionShortcut2, toolbar2, watch2, sparkline2, graph2, meter2, table2, log2, wrapAngle2, normalizeField, normalize, isRecord, same, equal, Spring, springMotion2, springResponse, springEasing, springCss2, SPRINGS2, FADE, MOTION, reducedMotion, reducedSpring2, springLinear, DEFAULT_LINEAR, motionCss, RESHAPE, RESET_KEYS, REFRESHES, readoutState, pushReadout, READOUT, memoryStorage2, browserStorage, urlFlag2, storageKey };
+export { maxChroma, oklchToRgb, parseColor2, fitColor, formatColor, colorHex2, EASINGS2, EASING_Y, easingName, bezierPoint2, bezierCss2, normalizeCombo2, letterOf2, comboFromEvent2, heldMods, matchesCombo2, comboParts2, comboLabel2, isTypingTarget, GRADIENT_SAMPLES, sampleGradient2, gradientSamples, gradientCss2, stopColorAt, sampleCurve2, curveSamples, CURVE_SHAPES2, inRange, sameRamp, randomStops, mutateStops, randomPoints, mutatePoints, pickMeta, isReadout2, hasValue2, variantsOf, pinnedKeys, presetFreeKeys, SPRING2, valueKeys, knob2, choice2, action2, flatSpring2, toggle2, spring2, color2, point2, easing2, vec22, vec32, range2, angle2, seed2, keybind2, text2, gradient2, curve2, toolbarShortcut2, actionShortcut2, toolbar2, watch2, sparkline2, graph2, meter2, table2, log2, wrapAngle2, normalizeField, normalize, isRecord, same, equal, Spring, springMotion2, springResponse, springEasing, springCss2, SPRINGS2, FADE, MOTION, reducedMotion, reducedSpring2, springLinear, DEFAULT_LINEAR, motionCss, RESHAPE, RESET_KEYS, REFRESHES, readoutState, pushReadout, READOUT, memoryStorage2, browserStorage, urlFlag2, storageKey };

package/dist/dev/index.js

@@ -27,6 +27,7 @@ import {
   hasValue2,
   variantsOf,
   pinnedKeys,
+  presetFreeKeys,
   SPRING2,
   valueKeys,
   knob2,
@@ -76,7 +77,7 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-7kns3qe6.js";
+} from "./chunk-v2g91mrm.js";
 // src/core/random.ts
 var lattice = (min, max, step, r) => min + Math.floor(r * (Math.floor((max - min) / step + 0.000000001) + 1)) * step, between = (min, max, r) => min + (max - min) * r;
 function pick(field, random) {
@@ -575,7 +576,7 @@ function createVariants(schema, id, key, storage, get, set, notify, enabled, see
 }
 
 // src/core/store.ts
-var devBuild = () => !0;
+var devBuild = () => !0, defaultLabelOf = (label, scope) => typeof label === "object" ? label[scope] : label;
 function sameField(a, b) {
   if (a === b)
     return !0;
@@ -605,7 +606,11 @@ function defineControls(id, input, options = {}) {
     if (pinnedOf?.schema !== schema)
       pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
     return pinnedOf.keys;
-  }, variantsChoice = () => variantsOf(schema, (key) => pinned().has(key)), scopingOf, scoping = () => {
+  }, freeOf, presetFree = () => {
+    if (freeOf?.schema !== schema)
+      freeOf = { schema, keys: presetFreeKeys(schema, pinned(), options.inPresets) };
+    return freeOf.keys;
+  }, variantsChoice = () => variantsOf(schema, (key) => presetFree().has(key)), scopingOf, scoping = () => {
     if (scopingOf?.schema === schema)
       return scopingOf;
     let fields = schema, groupTab = /* @__PURE__ */ new Map;
@@ -620,7 +625,7 @@ function defineControls(id, input, options = {}) {
       named.add(variants);
     let of = /* @__PURE__ */ new Map;
     for (let k of valueKeys(schema)) {
-      if (pinned().has(k))
+      if (presetFree().has(k))
         continue;
       let f = fields[k], tab = tabOf(f);
       of.set(k, tab !== void 0 && named.has(tab) ? tab : f.group !== void 0 && named.has(f.group) ? f.group : "");
@@ -1200,9 +1205,10 @@ function defineControls(id, input, options = {}) {
     sectionFolded: options.sectionFolded,
     presetLabel: (presetId, scope = "") => {
       let v = scoping().variants === scope ? variantsChoice() : void 0, option = presetId === "default" ? v?.field.value : presetId;
-      return options.presetLabels?.[presetId] ?? (presetId === "default" ? options.defaultLabel : void 0) ?? (v && option !== void 0 && v.field.options.includes(option) ? v.field.labels?.[option] ?? option : presetId);
+      return options.presetLabels?.[presetId] ?? (presetId === "default" ? defaultLabelOf(options.defaultLabel, scope) : void 0) ?? (v && option !== void 0 && v.field.options.includes(option) ? v.field.labels?.[option] ?? option : presetId);
     },
     isPinned: (key) => pinned().has(key),
+    inPresets: (key) => !presetFree().has(key),
     get,
     set,
     sync,
@@ -1516,11 +1522,11 @@ function defineControls(id, input, options = {}) {
     code: (format, values) => formatCode(values ?? get(), format),
     variants,
     attach(element, chip) {
-      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => import("./chunk-44r02asc.js").then((m) => m.attach);
+      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => import("./chunk-f0e5tkqg.js").then((m) => m.attach);
       return live(load, (attach) => attach(controls, element, chip), (detach) => detach());
     },
     mount(container, mountOptions) {
-      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => import("./chunk-mbhy4jg5.js").then((m) => m.mountPanel);
+      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => import("./chunk-s7d5a8vb.js").then((m) => m.mountPanel);
       return live(load, (mountPanel) => {
         let panel = mountPanel(controls, container, mountOptions);
         return mountOptions?.onReady?.(panel), panel;
@@ -1821,6 +1827,7 @@ function createRemoteControls(id, descriptors, options = {}) {
     presets: options.presets,
     scopedPresets: options.scopedPresets,
     pinned: options.pinned,
+    inPresets: options.inPresets,
     groupPresets: options.groupPresets,
     onPreset: options.onPreset,
     actions: options.actions,