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

package/dist/panel.js

@@ -3099,7 +3099,7 @@ ${GRAD_PROPS}
 
 /* The chip: a round cog button, or a capsule with a label beside the cog. */
 .knobs-chip{position:fixed;z-index:2147480000;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:26px;height:26px;padding:0;border-radius:999px;cursor:pointer;background:var(--_k-bg);border:1px solid transparent;
-  color:var(--_k-fg-2);font-size:var(--_k-text-control);line-height:1;letter-spacing:.01em;white-space:nowrap;--k-chip-edge:var(--_k-border-subtle);box-shadow:0 0 0 var(--k-rim-width) var(--k-chip-edge),0 4px 16px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1))),inset 0 var(--k-rim-width) 0 var(--_k-rim);transition:color .15s,border-color .15s,transform .2s var(--k-ease),opacity .2s,scale .12s var(--k-ease),${TOKEN_TRANSITIONS};}
+  color:var(--_k-fg-2);font-size:var(--_k-text-control);line-height:1;letter-spacing:.01em;white-space:nowrap;--k-chip-edge:var(--_k-border-subtle);box-shadow:0 calc(var(--k-rim-width) * -1) 0 var(--_k-rim),0 0 0 var(--k-rim-width) var(--k-chip-edge),0 4px 16px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));transition:color .15s,border-color .15s,transform .2s var(--k-ease),opacity .2s,scale .12s var(--k-ease),${TOKEN_TRANSITIONS};}
 .knobs-chip[data-label]{width:auto;padding:0 10px 0 7px}
 .knobs-chip .knobs-icon{display:block;flex:none;width:15px;height:15px}
 .knobs-chip:hover{color:var(--_k-fg);--k-chip-edge:var(--_k-border-strong)}
@@ -3126,9 +3126,10 @@ ${GRAD_PROPS}
 /* Panel material: --k-glass (0 opaque … 1 clearest) thins the surface over a blurred, saturated
    backdrop, toned toward the theme (--k-glass-tone dims it under dark panels) so text keeps its
    contrast. Its edge is a hairline (--k-edge, --k-rim-width wide) and a hairline of light (--k-rim)
-   catches its top. */
+   catches its top. The light rides on the edge (a shadow raised by its width, so only its top
+   shows), not inside the card's 1px border, where it read as a second edge. */
 .knobs-panel{-webkit-user-select:none;user-select:none;transition:${TOKEN_TRANSITIONS},--k-armed ${ARMED_T};position:fixed;z-index:2147480001;width:var(--_k-width);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--_k-pad);
-  background:color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--_k-radius-panel);box-shadow:var(--_k-shadow-overlay),0 0 0 var(--k-rim-width) var(--ka-edge),inset 0 var(--k-rim-width) 0 var(--_k-rim),var(--ka-glow);scrollbar-width:thin;
+  background:color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--_k-radius-panel);box-shadow:var(--_k-shadow-overlay),0 calc(var(--k-rim-width) * -1) 0 var(--_k-rim),0 0 0 var(--k-rim-width) var(--ka-edge),var(--ka-glow);scrollbar-width:thin;
   /* Armed (focus inside: keys come here), the edge takes the accent and a faint glow lifts it. */
   --ka-edge:color-mix(in srgb,var(--_k-accent) calc(var(--k-armed) * var(--k-armed-edge) * 100%),var(--_k-border-subtle));
   --ka-glow:0 0 calc(var(--k-armed-glow) * 1px) color-mix(in srgb,var(--_k-accent) calc(var(--k-armed) * var(--k-armed-glow-a) * var(--k-chrome,1) * 100%),transparent);
@@ -3141,7 +3142,7 @@ ${GRAD_PROPS}
 .knobs-panel[data-morphing]{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
 .knobs-morph{position:fixed;left:0;top:0;z-index:2147480001;pointer-events:none;box-sizing:border-box;--p:0;--spec:0;
   background:color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20% * var(--p)),transparent);border:1px solid transparent;
-  box-shadow:0 0 0 var(--k-rim-width) var(--_k-border-subtle),inset 0 0 0 var(--k-rim-width) rgb(255 255 255/var(--spec)),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--_k-rim) calc(var(--p) * 100%),transparent);
+  box-shadow:0 calc(var(--k-rim-width) * -1) 0 color-mix(in srgb,var(--_k-rim) calc(var(--p) * 100%),transparent),0 0 0 var(--k-rim-width) var(--_k-border-subtle),inset 0 0 0 var(--k-rim-width) rgb(255 255 255/var(--spec));
   --k-backdrop:blur(calc(var(--_k-glass) * 24px)) saturate(calc(1 + var(--_k-glass) * .8)) brightness(calc(1 + (var(--_k-glass-tone) - 1) * var(--_k-glass)));
   -webkit-backdrop-filter:var(--k-backdrop);backdrop-filter:var(--k-backdrop)}
 .knobs-morph::before,.knobs-morph::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
@@ -3149,7 +3150,7 @@ ${GRAD_PROPS}
 .knobs-morph::after{box-shadow:var(--_k-shadow-overlay);opacity:var(--p)}
 /* Meanwhile the chip is just its label, fading on the shape. */
 .knobs-chip.knobs-chip[data-morph]{visibility:visible;pointer-events:auto;transform:none;transition:none;background:transparent;border-color:transparent;box-shadow:none}
-.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 0 0 var(--k-rim-width) color-mix(in srgb,var(--ka-edge) calc(var(--k-chrome) * 100%),transparent),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--_k-rim) calc(var(--k-chrome) * 100%),transparent),var(--ka-glow);animation:none;
+.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 calc(var(--k-rim-width) * -1) 0 color-mix(in srgb,var(--_k-rim) calc(var(--k-chrome) * 100%),transparent),0 0 0 var(--k-rim-width) color-mix(in srgb,var(--ka-edge) calc(var(--k-chrome) * 100%),transparent),var(--ka-glow);animation:none;
   /* --k-chrome 0: an embedded panel sheds its card (background, border, rim) for the host's column,
      border width too, so its rows line up with the column's edges. */
   border-width:calc(var(--k-chrome) * 1px);
@@ -3302,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)}
@@ -3915,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;
 }
@@ -6955,8 +6963,8 @@ var init_swipe = __esm(() => {
 });
 
 // src/panel/presets.ts
-function activeEntryId(controls) {
-  const ref = controls.activePreset();
+function activeEntryId(controls, scope = "") {
+  const ref = controls.activePreset(scope);
   return ref ? `${ref.kind === "preset" ? "p" : "v"}:${ref.id}` : null;
 }
 function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId = null) {
@@ -7009,7 +7017,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 = () => "") {
   const wake = () => onAfterChange?.();
   const el = (tag, cls, text) => {
     const node = doc.createElement(tag);
@@ -7056,35 +7064,43 @@ 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 ?? "";
+  const source = () => scope === null ? undefined : scope === "" ? { presets: controls.presets, variants: controls.variants } : controls.scopes[scope];
   const unpinned = (values) => {
     let out;
     for (const k of Object.keys(values))
-      if (controls.isPinned(k) && !same2(values[k], controls.locked[k])) {
+      if (controls.scopeOf(k) !== at() && !same2(values[k], controls.locked[k])) {
         out ??= { ...values };
         out[k] = controls.locked[k];
       }
     return out ?? values;
   };
   function buildEntries() {
-    const presetEntries = Object.entries(controls.presets).map(([id, presetValues]) => ({
+    const from = source();
+    if (!from)
+      return [];
+    const where = at();
+    const 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;
-    const variants = controls.variants.list();
+    const variants = from.variants.list();
     const variantEntries = variants.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];
   }
@@ -7135,8 +7151,8 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     if (first)
       doc.defaultView?.requestAnimationFrame(() => pill.style.transition = "");
   }
-  const resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls));
-  const wanted = (list) => (list.length > 1 || showVariants) && (relevant?.(list) ?? true);
+  const resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls, at()));
+  const wanted = (list) => scope !== null && (list.length > 1 || showVariants) && (relevant?.(list) ?? true);
   function syncShown() {
     const show = wanted(entries);
     if (root.hidden === show && root.dataset.presence === undefined)
@@ -7196,22 +7212,33 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   function update() {
     run(() => {
-      const variantsRef = showVariants ? controls.variants.list() : null;
-      if (signature !== "" && variantsRef === lastVariantsRef) {
+      const was = scope;
+      scope = scopeOf();
+      if (scope !== was)
+        lastAppliedId = null;
+      const variantsRef = showVariants ? source()?.variants.list() ?? null : null;
+      if (signature !== "" && scope === was && variantsRef === lastVariantsRef) {
         syncShown();
         syncSelection(false);
         return;
       }
       lastVariantsRef = variantsRef;
       const nextEntries = buildEntries();
-      const nextSig = JSON.stringify(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;
@@ -7269,12 +7296,15 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   function save() {
     finishName(true);
-    const used = new Set(controls.variants.list().map((v) => v.name));
+    const variants = source()?.variants;
+    if (!variants)
+      return "";
+    const used = new Set(variants.list().map((v) => v.name));
     let n = 1;
     while (used.has(`Variant ${n}`))
       n++;
-    const variant = controls.variants.save(`Variant ${n}`);
-    controls.variants.load(variant.id);
+    const variant = variants.save(`Variant ${n}`);
+    variants.load(variant.id);
     lastAppliedId = `v:${variant.id}`;
     update();
     startName(entries.findIndex((e) => e.id === `v:${variant.id}`), true);
@@ -7349,7 +7379,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);
+      source()?.variants.rename(entry.rawId, name);
       update();
       message = `Named “${name}”.`;
     }
@@ -7370,7 +7400,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     const entry = entries[activeState.activeIndex];
     if (!entry || entry.kind !== "variant")
       return;
-    controls.variants.remove(entry.rawId);
+    source()?.variants.remove(entry.rawId);
     lastAppliedId = null;
     update();
     onAfterChange?.();
@@ -7506,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());
@@ -9459,7 +9499,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);
@@ -9468,6 +9509,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.
@@ -9481,13 +9524,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) {
@@ -10617,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;
   }
@@ -12830,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);
@@ -12998,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;
@@ -13377,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;
@@ -20492,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();
@@ -26046,8 +26107,9 @@ function buildPanel(controls, host, options) {
     const group = scope === "row" ? rows[rowAt(from)]?.group : scope === "group" ? cardOf(from)?.dataset.group ?? undefined : undefined;
     const keys = scope === "row" ? rows[rowAt(from)]?.keys ?? [] : scope === "group" ? cardKeys(cardOf(from)) : scope === "selection" ? selectionKeys() ?? [] : undefined;
     const index = group === undefined ? -1 : controls.activeGroupPreset(group);
-    const ref = controls.activePreset();
-    const 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 : undefined;
+    const where = (keys?.length ? controls.scopeOf(keys[0]) : stripScope()) ?? null;
+    const ref = where === null ? null : controls.activePreset(where);
+    const 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 : undefined;
     if (!name)
       return null;
     const off = keys ? keys.some((k) => controls.isModified(k)) : controls.isModified();
@@ -26200,8 +26262,10 @@ function buildPanel(controls, host, options) {
   if (helpButton?.hidden)
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
-  const presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : undefined) ?? controls.presetLabel(id);
-  const presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries));
+  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;
   const searchOptions = typeof options.search === "object" ? options.search : {};
@@ -26254,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 ?? []
@@ -26712,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) {
@@ -27410,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);
@@ -27444,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))
@@ -27606,13 +27695,13 @@ function buildPanel(controls, host, options) {
     return list;
   };
   function presetsTouchTab(entries) {
-    if (page || activeTab === undefined)
+    if (page || activeTab === undefined || stripScope() !== "")
       return true;
     const keys = rows.flatMap((r) => {
       const tab = tabOf(r);
-      return !pinnedRow(r) && (tab === undefined || tab === activeTab) ? r.keys : [];
+      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)
@@ -27620,6 +27709,22 @@ function buildPanel(controls, host, options) {
     }
     return presetsTouch(entries, keys, controls.locked);
   }
+  function stripScope() {
+    const named = Object.keys(controls.scopes);
+    const panelWide = named.length === 0 || Object.keys(controls.presets).length > 1;
+    if (page)
+      return panelWide ? "" : null;
+    if (activeTab === undefined)
+      return panelWide ? "" : named[0] ?? null;
+    if (named.includes(activeTab))
+      return activeTab;
+    const group = named.find((id) => rows.some((r) => r.group === id && tabOf(r) === activeTab));
+    return group ?? (panelWide ? "" : null);
+  }
+  const stripVariants = () => {
+    const scope = stripScope();
+    return (scope ? controls.scopes[scope]?.variants : undefined) ?? controls.variants;
+  };
   function syncTabs() {
     const list = tabList();
     const has = (id) => id !== undefined && list.some((t) => t.id === id);
@@ -27636,6 +27741,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     const focused = doc.activeElement;
+    updateStrips();
     applyVisibility(animate ? "tab" : "instant");
     if (focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: true, focusVisible: false });
@@ -27911,7 +28017,7 @@ function buildPanel(controls, host, options) {
   text.spellcheck = false;
   text.setAttribute("aria-label", "Import or copy text");
   const apply = button("Apply import", () => {
-    controls.variants.import(text.value);
+    stripVariants().import(text.value);
     say("Presets imported.");
     reveal(text, false);
     reveal(apply, false);
@@ -27957,7 +28063,7 @@ function buildPanel(controls, host, options) {
   if (showVariants && showFooter) {
     const transfer = el("div");
     transfer.className = "knobs-transfer";
-    transfer.append(button("Export presets", () => void copy(controls.variants.export(), false)), button("Import presets", () => {
+    transfer.append(button("Export presets", () => void copy(stripVariants().export(), false)), button("Import presets", () => {
       reveal(text, true);
       reveal(apply, true);
       text.value = "";
@@ -28053,6 +28159,7 @@ function buildPanel(controls, host, options) {
   let shownBase = "";
   const 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() {
@@ -28081,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();
@@ -28251,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());
     }
@@ -28277,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 } : {},
@@ -28343,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)
@@ -28820,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;
   };
@@ -28834,7 +28948,7 @@ function buildPanel(controls, host, options) {
       editor: t.level === "editor" ? partName(t.el, active) : undefined
     });
   };
-  const crumbs = options.crumbs === false || header.hidden || !titleEl.isConnected ? undefined : createCrumbs({
+  const crumbs = options.crumbs !== true || header.hidden || !titleEl.isConnected ? undefined : createCrumbs({
     header,
     title: titleEl,
     reduced: () => reducedMotion(),
@@ -28858,6 +28972,22 @@ function buildPanel(controls, host, options) {
     to.focus(quiet);
     queueScope();
   };
+  root.addEventListener("mousedown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey || event.ctrlKey)
+      return;
+    const target = event.target instanceof Element ? event.target : null;
+    const r = rows[rowAt(target)];
+    if (!target || !r || r.leaving || r.row.closest("[hidden]"))
+      return;
+    const own = target.closest("button,input,select,textarea,a[href],[tabindex],[contenteditable]");
+    if (own && r.row.contains(own))
+      return;
+    event.preventDefault();
+    r.input.focus({ preventScroll: true, focusVisible: false });
+    const t = lensTarget(doc.activeElement);
+    jumpedTo = t && t !== "out" ? t.el : null;
+    queueScope();
+  }, true);
   let titleDown;
   titleEl.addEventListener("pointerdown", (event) => {
     titleDown = [event.clientX, event.clientY];
@@ -28993,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() {
@@ -29003,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;
@@ -29240,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();
@@ -29275,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));
@@ -29335,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);
@@ -29834,6 +29989,7 @@ function buildPanel(controls, host, options) {
     ...undock ? {} : { headerDie: { button: randomButton, die } },
     locks: lockIcons,
     presetStrip,
+    groupStrips: () => groupStrips.values(),
     tabs: tabStrip,
     groups: gpuGroups,
     cards,
@@ -29962,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);