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

package/dist/index.js

@@ -461,6 +461,7 @@ var META_KEYS = [
   "sectionFolded",
   "tab",
   "pinned",
+  "inPresets",
   "subsection"
 ];
 function pickMeta(source, skip = []) {
@@ -494,6 +495,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 SPRING = {
   duration: { min: 0.05, max: 2, step: 0.01 },
   bounce: { min: -0.5, max: 1, step: 0.01 }
@@ -1631,7 +1639,7 @@ function createVariants(schema, id, key, storage, get, set, notify, enabled, see
 }
 
 // src/core/store.ts
-var devBuild = () => !1;
+var devBuild = () => !1, defaultLabelOf = (label, scope) => typeof label === "object" ? label[scope] : label;
 function sameField(a, b) {
   if (a === b)
     return !0;
@@ -1661,7 +1669,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;
@@ -1676,7 +1688,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 : "");
@@ -2256,9 +2268,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,
@@ -2877,6 +2890,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,

package/dist/panel.js

@@ -3303,9 +3303,16 @@ ${GRAD_PROPS}
 /* The active preset's modified mark: the values have drifted off it (a row's dot, in its corner). */
 .knobs-panel .knobs-preset-chip::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background:var(--_k-modified);opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
 .knobs-panel .knobs-preset-chip[data-drifted]::after{opacity:.95;transform:none}
+/* Digits that stay on the chips (hints: { digits: "always" }): quiet, in a column of their own. */
+.knobs-panel .knobs-preset-key{display:inline-block;margin-right:6px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);font-variant-numeric:tabular-nums}
+/* A group's own presets at the top of its card: the chips sit on the card, with no tray. */
+.knobs-panel .knobs-card>.knobs-presets{margin:0;padding:max(4px,calc((var(--_k-row) - var(--k-button-h,var(--_k-control-h))) / 2)) var(--_k-inset);background:transparent;border-radius:0}
+.knobs-panel .knobs-card>.knobs-presets[data-display="list"]{padding-inline:0}
+.knobs-card>.knobs-presets:hover{background:transparent}
 /* Naming a saved preset: a field over its chip that opens out from the middle to the chip's width;
    the chip's own name hides beneath it. Leaving, it fades. */
 .knobs-panel .knobs-preset-chip[data-naming]{color:transparent!important}
+.knobs-panel .knobs-preset-chip[data-naming] .knobs-preset-key{color:transparent}
 .knobs-panel .knobs-preset-name{position:absolute;z-index:2;box-sizing:border-box;min-width:0;margin:0;padding:0 6px;border:1px solid color-mix(in srgb,var(--_k-accent) 55%,transparent);border-radius:var(--k-button-radius,var(--_k-radius-md));outline:none;background:color-mix(in srgb,var(--_k-accent) 10%,transparent);color:var(--_k-fg);caret-color:var(--_k-accent);
   font-family:inherit;font-size:var(--k-button-font-size,var(--_k-text-control));font-weight:var(--_k-weight-title);letter-spacing:inherit;text-align:center;animation:knobs-name-in .25s cubic-bezier(.2,.8,.2,1);transition:opacity .11s cubic-bezier(.4,0,1,1)}
 .knobs-preset-name::selection{background:color-mix(in srgb,var(--_k-accent) 24%,transparent);color:var(--_k-fg)}
@@ -3916,7 +3923,7 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel[data-gpu-active="true"] :where(header strong,header button,.knobs-tile,.knobs-section-head,.knobs-group-label,.knobs-peek,.knobs-card>*,.knobs-presets,.knobs-preset-chip,.knobs-group-head,.knobs-group-head button,.knobs-card,.knobs-row,.knobs-row>span:first-child,.knobs-slider,.knobs-track,.knobs-label,.knobs-value,.knobs-digits,.knobs-digits *,.knobs-unit,.knobs-seg,.knobs-seg button,.knobs-custom-actions button,.knobs-action,.knobs-select,.knobs-select-value,
   .knobs-sub,.knobs-x-head,.knobs-x-label,.knobs-x-read,.knobs-strip-label,.knobs-strip-read,.knobs-pad,.knobs-ease,.knobs-spring-curve,.knobs-ease-chips,.knobs-ease-chip,.knobs-graph,.knobs-graph-read,
   .knobs-tabs,.knobs-tab,.knobs-subhead,.knobs-subhead-label,.knobs-match,.knobs-cell,.knobs-cell-axis,.knobs-cell-read,.knobs-link,.knobs-range-read,.knobs-angle,.knobs-angle-read,.knobs-dial,
-  .knobs-seed,.knobs-seed-read,.knobs-seed-digits,.knobs-seed-digits *,.knobs-seed-roll,.knobs-keys,.knobs-keys-text,.knobs-tool,.knobs-tool-label,.knobs-tool-key,
+  .knobs-seed,.knobs-seed-read,.knobs-seed-digits,.knobs-seed-digits *,.knobs-seed-roll,.knobs-keys,.knobs-keys-text,.knobs-tool,.knobs-tool-label,.knobs-tool-key,.knobs-preset-key,
   .knobs-section-name,.knobs-section-summary,.knobs-section-desc,.knobs-group-desc,.knobs-group-summary,.knobs-tab-count):not(.knobs-live,.knobs-live *){
   background:transparent!important;color:transparent!important;border-color:transparent!important;box-shadow:none!important;
 }
@@ -7057,6 +7064,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   let initializedPill = false;
   let slideUntil = 0;
   let display = "auto";
+  let digits = false;
   let chipMin = 0;
   let scope = null;
   const at = () => scope ?? "";
@@ -7216,14 +7224,21 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       }
       lastVariantsRef = variantsRef;
       const nextEntries = buildEntries();
-      const nextSig = JSON.stringify([scope, nextEntries.map((e) => [e.id, e.label])]);
+      const nextSig = JSON.stringify([scope, digits, nextEntries.map((e) => [e.id, e.label])]);
       entries = nextEntries;
       syncShown();
       if (nextSig !== signature) {
         signature = nextSig;
         entries = nextEntries;
         buttons = entries.map((entry, idx) => {
-          const b = el("button", "knobs-preset-chip", entry.label);
+          const b = el("button", "knobs-preset-chip");
+          if (digits && idx < 9) {
+            const 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;
           b.type = "button";
           b.tabIndex = -1;
           b.dataset.presetId = entry.id;
@@ -7521,6 +7536,16 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       if (placeDisplay())
         measurePill(true);
     },
+    digits(on) {
+      if (digits === on)
+        return;
+      digits = on;
+      root.toggleAttribute("data-digits", on);
+      if (signature === "")
+        return;
+      signature = "";
+      update();
+    },
     save: () => {
       let message = "";
       run(() => message = save());
@@ -10638,6 +10663,135 @@ class GpuOverlayManager {
     d[b + 42] = more ? more[2] : 0;
     d[b + 43] = more ? more[3] : 0;
   }
+  drawPresetStrip(ps, tokens, clip, hinting, reducedMotion, dt, tray) {
+    let moving = false;
+    const psHovered = this.curPanelHovered && ps.element.matches(":hover");
+    this.curSubHovered = psHovered;
+    const psRect = this.rectOf(ps.element);
+    const 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
+      });
+    const stripClip = intersectClip(clip, [psRect.left, psRect.top, psRect.right, psRect.bottom]);
+    const activeState = ps.getActiveState();
+    const chipButtons = ps.getButtons();
+    if (tokens.boxed)
+      for (const btn of chipButtons) {
+        const 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);
+      }
+    const activeBtn = activeState.activeIndex >= 0 ? chipButtons[activeState.activeIndex] : undefined;
+    const pe = ps.pillEdges;
+    const activeBtnRect = activeBtn ? this.rectOf(activeBtn) : undefined;
+    const panned = livePill(ps.track);
+    if (activeBtn && activeBtnRect && !activeState.isCustom) {
+      const left = activeBtnRect.left - trackRect.left;
+      const right = left + Math.max(20, activeBtnRect.width);
+      const top = activeBtnRect.top - trackRect.top;
+      this.carry(pe, activeBtn, left, right, ps.pillY, top);
+      if (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 (const sp of [pe.start, pe.end, ps.pillY, ps.pillAlpha]) {
+      if (reducedMotion)
+        sp.snap(sp.target);
+      else {
+        sp.step(dt);
+        if (!sp.resting)
+          moving = true;
+      }
+    }
+    const pillAlpha = clamp2(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: withAlpha2(tokens.pillBg, pillAlpha),
+        color2: withAlpha2(tokens.pillBorder, pillAlpha),
+        strokeWidth: this.hairline(tokens),
+        aux2: withAlpha2(tokens.rim, tokens.rim[3] * pillAlpha),
+        radius: tokens.buttonRadius ?? tokens.radiusMd,
+        glowOrBlur: tokens.glowStrength,
+        kind: 3,
+        blurX: reducedMotion ? 0 : clamp2(pe.velocity * 0.006 * tokens.motionBlur, -8, 8)
+      });
+    }
+    for (let i = 0;i < chipButtons.length; i++) {
+      const btn = chipButtons[i];
+      const br = this.rectOf(btn);
+      if (br.right < stripClip[0] || br.left > stripClip[2])
+        continue;
+      const isActive = i === activeState.activeIndex;
+      const chipHovered = this.isHovered(btn);
+      if (chipHovered)
+        this.curSubHovered = false;
+      const mark = this.ease(btn, "dot", btn.hasAttribute("data-drifted") ? 1 : 0);
+      if (mark > 0.01) {
+        const 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: withAlpha2(tokens.modified, 0.95 * mark),
+          glowOrBlur: 0.5,
+          kind: 7
+        });
+      }
+      if (btn.hasAttribute("data-naming"))
+        continue;
+      const key = btn.querySelector(".knobs-preset-key");
+      const name = key && btn.querySelector(".knobs-preset-label");
+      if (key && name) {
+        const kr = this.rectOf(key);
+        this.drawText(key.textContent ?? "", kr.left, br.top + br.height * 0.5, withAlpha2(tokens.dim, this.missed(btn, hinting)), { px: tokens.textMeta, weight: tokens.labelWeight, clip: stripClip });
+      }
+      const nr = name ? this.rectOf(name) : undefined;
+      this.drawText(name ? name.textContent ?? "" : btn.textContent ?? "", nr ? nr.left : br.left + br.width * 0.5, br.top + br.height * 0.5, withAlpha2(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) {
+      const sr = this.rectOf(ps.saveButton);
+      const 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;
   }
@@ -12851,7 +13005,6 @@ class GpuOverlayManager {
         this.placeBackdrop(panel);
         continue;
       }
-      const pillFill = tokens.pillBg;
       if (pageB)
         this.placeBackdrop(panel);
       const covers = drawn.some((r) => r.left < card.right && r.right > card.left && r.top < card.bottom && r.bottom > card.top);
@@ -13019,129 +13172,7 @@ class GpuOverlayManager {
       const stripAlpha = this.curAlpha;
       if (!ps.element.hidden) {
         this.curAlpha = stripAlpha * this.presence(ps.element);
-        const psHovered = this.curPanelHovered && ps.element.matches(":hover");
-        this.curSubHovered = psHovered;
-        const psRect = this.rectOf(ps.element);
-        const 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
-          });
-        const stripClip = intersectClip(bodyClip, [
-          psRect.left,
-          psRect.top,
-          psRect.right,
-          psRect.bottom
-        ]);
-        const activeState = ps.getActiveState();
-        const chipButtons = ps.getButtons();
-        if (tokens.boxed)
-          for (const btn of chipButtons) {
-            const 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);
-          }
-        const activeBtn = activeState.activeIndex >= 0 ? chipButtons[activeState.activeIndex] : undefined;
-        const pe = ps.pillEdges;
-        const activeBtnRect = activeBtn ? this.rectOf(activeBtn) : undefined;
-        const panned = livePill(ps.track);
-        if (activeBtn && activeBtnRect && !activeState.isCustom) {
-          const left = activeBtnRect.left - trackRect.left;
-          const right = left + Math.max(20, activeBtnRect.width);
-          const top = activeBtnRect.top - trackRect.top;
-          this.carry(pe, activeBtn, left, right, ps.pillY, top);
-          if (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 (const sp of [pe.start, pe.end, ps.pillY, ps.pillAlpha]) {
-          if (reducedMotion)
-            sp.snap(sp.target);
-          else {
-            sp.step(dt);
-            if (!sp.resting)
-              anyMoving = true;
-          }
-        }
-        const pillAlpha = clamp2(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: withAlpha2(pillFill, pillAlpha),
-            color2: withAlpha2(tokens.pillBorder, pillAlpha),
-            strokeWidth: this.hairline(tokens),
-            aux2: withAlpha2(tokens.rim, tokens.rim[3] * pillAlpha),
-            radius: tokens.buttonRadius ?? tokens.radiusMd,
-            glowOrBlur: tokens.glowStrength,
-            kind: 3,
-            blurX: reducedMotion ? 0 : clamp2(pe.velocity * 0.006 * tokens.motionBlur, -8, 8)
-          });
-        }
-        for (let i = 0;i < chipButtons.length; i++) {
-          const btn = chipButtons[i];
-          const br = this.rectOf(btn);
-          if (br.right < stripClip[0] || br.left > stripClip[2])
-            continue;
-          const isActive = i === activeState.activeIndex;
-          const chipHovered = this.isHovered(btn);
-          if (chipHovered)
-            this.curSubHovered = false;
-          const mark = this.ease(btn, "dot", btn.hasAttribute("data-drifted") ? 1 : 0);
-          if (mark > 0.01) {
-            const 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: withAlpha2(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, withAlpha2(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) {
-          const sr = this.rectOf(ps.saveButton);
-          const 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"
-          });
-        }
+        anyMoving = this.drawPresetStrip(ps, tokens, bodyClip, hinting, reducedMotion, dt, true) || anyMoving;
         this.curAlpha = stripAlpha;
       }
       const tabs = panel.tabs;
@@ -13398,6 +13429,15 @@ class GpuOverlayManager {
             this.drawScope(card, cr, tokens.radius, 1);
         }
       }
+      for (const gs of panel.groupStrips?.() ?? []) {
+        const card = gs.element.parentElement;
+        if (!card || gs.element.closest("[hidden]"))
+          continue;
+        const 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, false) || anyMoving;
+      }
       this.curClip = bodyClip;
       this.curAlpha = panelAlpha;
       const washed = new Set;
@@ -20513,7 +20553,7 @@ function presence(el, o = {}) {
   });
   const tune = (seconds, zeta) => {
     const reduced = reducedMotion(win);
-    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds);
+    spring.omega = 2 * Math.PI / (reduced ? Math.min(FADE.duration, seconds) : seconds);
     spring.zeta = reduced ? 1 : zeta;
   };
   render();
@@ -26222,7 +26262,9 @@ function buildPanel(controls, host, options) {
   if (helpButton?.hidden)
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
-  const presetLabel = (id, scope = "") => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : undefined) ?? controls.presetLabel(id, scope);
+  const presetLabel = (id, scope = "") => options.presetLabels?.[id] ?? (id === "default" ? typeof options.defaultLabel === "object" ? options.defaultLabel[scope] : options.defaultLabel : undefined) ?? controls.presetLabel(id, scope);
+  const hintReach = (typeof options.hints === "object" ? options.hints.reach : options.hints) ?? "page";
+  const stripDigitsShown = typeof options.hints === "object" && options.hints.digits === "always";
   const presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries), () => stripScope());
   const tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate));
   let activeTab;
@@ -26276,6 +26318,27 @@ function buildPanel(controls, host, options) {
       reveal(header, any, () => wakeGpu());
   };
   presetStrip.display(page ? "chips" : options.presetDisplay ?? "auto");
+  presetStrip.digits(stripDigitsShown);
+  const groupStrips = new Map;
+  const tabNamed = (id) => (options.tabs ?? []).some((t) => (typeof t === "string" ? t : t.id) === id) || Object.values(controls.schema).some((f) => f.tab === id);
+  const 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, undefined, () => 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;
+  };
+  const updateStrips = () => {
+    presetStrip.update();
+    for (const strip of groupStrips.values())
+      strip.update();
+  };
   const allActions = [
     ...controls.actions ?? [],
     ...options.actions ?? []
@@ -26734,7 +26797,7 @@ function buildPanel(controls, host, options) {
     const specs = [];
     const placed = new Set;
     for (const [key, field] of entries) {
-      if (field.kind === "choice" && field.variants && !controls.isPinned(key))
+      if (field.kind === "choice" && field.variants && controls.inPresets(key))
         continue;
       const pair = field.kind === "knob" && field.spring ? halves.get(field.spring.id) : undefined;
       if (pair?.duration && pair.bounce && field.kind === "knob" && field.spring) {
@@ -27432,6 +27495,7 @@ function buildPanel(controls, host, options) {
       const chosen = [];
       const pinnedBlocks = new Set;
       const usedSubheads = new Set;
+      const stripped = new Set;
       for (const run of runs) {
         const at = free.findIndex((b) => b.group === run.group);
         const block = at >= 0 ? free.splice(at, 1)[0] : newBlock(run.group);
@@ -27466,7 +27530,10 @@ function buildPanel(controls, host, options) {
           under = name;
           nodes.push(r.row);
         }
-        arrange(block.card, nodes);
+        const strip = run.group !== undefined && !run.pinned && !stripped.has(run.group) ? groupStripFor(run.group) : undefined;
+        if (strip)
+          stripped.add(run.group);
+        arrange(block.card, strip ? [strip.element, ...nodes] : nodes);
         if (animate && at >= 0) {
           for (const r of run.rows)
             if (entering.has(r))
@@ -27634,7 +27701,7 @@ function buildPanel(controls, host, options) {
       const tab = tabOf(r);
       return !pinnedRow(r) && (tab === undefined || tab === activeTab) ? r.keys.filter((k) => controls.scopeOf(k) === "") : [];
     });
-    const v = variantsOf(controls.schema, controls.isPinned);
+    const v = variantsOf(controls.schema, (key) => !controls.inPresets(key));
     if (v) {
       const tab = v.field.tab ?? (v.field.group !== undefined ? groupTab(v.field.group) : undefined);
       if (tab === undefined || tab === activeTab)
@@ -27674,7 +27741,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     const focused = doc.activeElement;
-    presetStrip.update();
+    updateStrips();
     applyVisibility(animate ? "tab" : "instant");
     if (focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: true, focusVisible: false });
@@ -28121,7 +28188,7 @@ function buildPanel(controls, host, options) {
     }
     const stagger = initialized ? cascade(changedCount) : 0;
     const moving = initialized ? rows.filter(changed) : rows;
-    presetStrip.update();
+    updateStrips();
     batchMeasures(() => {
       for (const row of moving) {
         row.slider?.prime();
@@ -28291,14 +28358,15 @@ 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) => {
-      const chip = presetStrip.getButtons()[i];
-      if (chip)
-        add(chip, entry.label, () => {
-          presetStrip.selectById(entry.id);
-          presetStrip.element.focus({ preventScroll: true });
-        });
-    });
+    for (const strip of [presetStrip, ...groupStrips.values()])
+      strip.getEntries().forEach((entry, i) => {
+        const chip = strip.getButtons()[i];
+        if (chip)
+          add(chip, entry.label, () => {
+            strip.selectById(entry.id);
+            strip.element.focus({ preventScroll: true });
+          });
+      });
     for (const 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());
     }
@@ -28317,7 +28385,7 @@ function buildPanel(controls, host, options) {
       }
     return targets;
   };
-  const unregisterHints = (options.hints ?? "page") === "page" && bound("hint") ? pageHints(doc).register(root, () => collectHintTargets().map((t) => ({
+  const unregisterHints = hintReach === "page" && bound("hint") ? pageHints(doc).register(root, () => collectHintTargets().map((t) => ({
     el: t.el,
     label: t.display,
     ...t.labelEl ? { labelEl: t.labelEl } : {},
@@ -28383,6 +28451,9 @@ function buildPanel(controls, host, options) {
         runs.push({ at: b.head, stops: shown([b.head]) });
     for (const sh of subheads.values())
       runs.push({ at: sh.el, stops: shown([sh.el]) });
+    for (const 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 (const run of runs)
@@ -28860,6 +28931,9 @@ function buildPanel(controls, host, options) {
         return { el: sub, level: "row" };
       return { el: r.row.closest(".knobs-card > *") ?? r.row, level: "row" };
     }
+    const strip = active.closest(".knobs-card > .knobs-presets");
+    if (strip)
+      return { el: strip, level: "row" };
     const card = cardOf(active);
     return card ? { el: card, level: "card" } : null;
   };
@@ -29049,6 +29123,23 @@ function buildPanel(controls, host, options) {
       return;
     return optionsOf(r);
   };
+  const groupStripAt = (node) => node ? [...groupStrips.values()].find((s) => s.element.contains(node)) : undefined;
+  const groupStripOptions = new Map;
+  const 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;
+  };
   const stripDigits = () => visible(presetStrip.element) && presetStrip.getEntries().length > 1;
   const stripOptions = {
     get count() {
@@ -29059,7 +29150,12 @@ function buildPanel(controls, host, options) {
     anchor: presetStrip.element
   };
   const stripOptionsAt = (node) => {
-    if (hintCtrl.isActive || !node || !stripDigits())
+    if (hintCtrl.isActive || !node || stripDigitsShown)
+      return;
+    const own = groupStripAt(node);
+    if (own)
+      return visible(own.element) && own.getEntries().length > 1 && !own.nameField() ? optionsOfStrip(own) : undefined;
+    if (!stripDigits())
       return;
     const at = presetStrip.element.contains(node) || focusLevel(node) === "panel";
     return at && !presetStrip.nameField() ? stripOptions : undefined;
@@ -29296,9 +29392,10 @@ function buildPanel(controls, host, options) {
     }
     if (pressed("presets", event)) {
       const direction = key === keys.presets[0] ? -1 : 1;
-      const presetsShown = visible(presetStrip.element) && presetStrip.getEntries().length > 1;
+      const strip = groupStripAt(target) ?? presetStrip;
+      const presetsShown = visible(strip.element) && strip.getEntries().length > 1;
       if (presetsShown)
-        presetStrip.cycle(direction);
+        strip.cycle(direction);
       else if (!cycleTab(direction))
         return;
       event.preventDefault();
@@ -29331,6 +29428,8 @@ function buildPanel(controls, host, options) {
       search.focus();
       return;
     }
+    if (/^[1-9]$/.test(key) && groupStripAt(target))
+      return;
     if (/^[1-9]$/.test(key)) {
       const group = page ? focusedGroup(target) : undefined;
       const groupDigits = Boolean(group && groupChips.has(group));
@@ -29391,7 +29490,7 @@ function buildPanel(controls, host, options) {
     }
     if (pressed("save", event) && showVariants) {
       event.preventDefault();
-      presetStrip.save();
+      (groupStripAt(target) ?? presetStrip).save();
       return;
     }
     const index = rowAt(target);
@@ -29890,6 +29989,7 @@ function buildPanel(controls, host, options) {
     ...undock ? {} : { headerDie: { button: randomButton, die } },
     locks: lockIcons,
     presetStrip,
+    groupStrips: () => groupStrips.values(),
     tabs: tabStrip,
     groups: gpuGroups,
     cards,
@@ -30018,6 +30118,8 @@ function buildPanel(controls, host, options) {
       for (const c of groupChips.values())
         c.dispose();
       presetStrip.dispose();
+      for (const strip of groupStrips.values())
+        strip.dispose();
       tabStrip.dispose();
       tabMotion.finish();
       doc.removeEventListener("keydown", onGlobalKey);