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

package/README.md

@@ -384,7 +384,7 @@ Panels and switchers are keyboard-first:
 | Arrows on a pad or curve handle | Move the puck or handle (`⇧` ×10, `⌥` finest); `j` / `k` or `Tab` move on |
 | On a gradient strip or curve graph | Arrows move the selected stop or point; `Tab` / `⇧Tab` and `[` / `]` pick another; `n` adds one, `Delete` removes it; `Enter` edits a stop's colour (`Esc` returns) |
 | `[` / `]` | Cycle presets and saved variants from anywhere in the panel; with no preset strip, cycle tabs |
-| `1`–`9` | Pick the focused row's Nth option: a choice (segmented or menu) or a curve's, easing's or gradient's presets. Anywhere else in the panel, pick the preset strip's Nth chip (a design's variants). While you use keys, tiny digit hints show on the options once focus settles, and on the strip's chips while focus is on the strip or the panel. A number row keeps its digits for inline edits, and a page's card for its group presets |
+| `1`–`9` | Pick the focused row's Nth option: a choice (segmented or menu) or a curve's, easing's or gradient's presets. Anywhere else in the panel, pick the preset strip's Nth chip (a design's variants). While you use keys, tiny digit hints show on the options once focus settles, and on the strip's chips while focus is on the strip or the panel (`hints: { digits: "always" }` on the mount keeps them on the chips all the time, small and dim before each name). A number row keeps its digits for inline edits, and a page's card for its group presets |
 | `⌥1`–`⌥9` | Show tab 1–9 |
 | `/` | Focus the search field (`Esc` clears it, then hands focus back; `↓` or `Enter` go to the first row left) |
 | `Home` / `End` | Jump slider to `min` or `max` |
@@ -835,6 +835,16 @@ panel.tab("emitter") // shows a tab; panel.tab() answers the one showing
   A pinned `variants: true` choice is an ordinary choice with a row: pinned wins, and its options
   make no presets. A tab whose rows no preset moves shows no preset strip; a variants choice moves
   its own tab (or every tab, if it has none).
+- **Keys presets leave alone, in place.** `inPresets: false` on a field, or `inPresets: { Motion:
+  false }` on the store for a whole group, keeps presets, scoped presets and saved variants off
+  those keys exactly as they stay off pinned ones (and a preset's chip stays lit when they move),
+  but the rows stay where they are. A pinned key is one of these, moved to the top. The rule, for
+  `inPresets: false` and `pinned` groups alike: presets and variants from *other* scopes (the
+  panel-wide presets, tab scopes, other groups') leave the group alone, but a scope keyed by the
+  group's own name still moves it. So `inPresets: { Motion: false }` with
+  `scopedPresets: { Motion: { Snappy } }` gives Motion its own strip that state presets never
+  touch; its chips apply, save, match and mark only Motion. A field's own `inPresets: false` stays
+  out of every scope. `controls.inPresets(key)` says whether presets from other scopes move a key.
 - **Presets of a tab's own.** `scopedPresets` gives a tab (or a group) presets that belong to it:
   `{ Sidebars: { snappy, smooth, calm } }`. Its strip shows only on that tab, and a tab without any
   shows none. A scoped preset moves only its tab's (or group's) keys, never pinned ones or another
@@ -844,9 +854,13 @@ panel.tab("emitter") // shows a tab; panel.tab() answers the one showing
   A `variants: true` choice on a tab adds its options to that tab's presets. Keys belong to their
   tab's scope first, then their group's. Plain `presets` then cover only the keys no scope holds;
   leave them out and only the scoped strips show. One strip shows per tab: the tab's own, else the
-  first group scope on it. In code, `controls.preset(id, { scope })`, `activePreset(scope)` and
+  first group scope on it. In a panel, any other group's presets show at the top of its own card,
+  in the strip's look without its tray, so a story's states can lead the panel while its Motion
+  group keeps Shipped, Snappy and Calm beside its knobs. Every strip's default chip reads `defaultLabel`; by scope,
+  `defaultLabel: { "": "Empty", Motion: "Shipped" }` names each on its own. In code, `controls.preset(id, { scope })`, `activePreset(scope)` and
   `matchingPreset(scope)` take the tab or group, and `controls.scopeOf(key)` says whose presets
-  move a key (`""` for plain `presets`, undefined when pinned). An active preset saved while the
+  move a key (`""` for plain `presets`, the group's id for a pinned or `inPresets: false`
+  group with a scope of its own, else undefined when pinned). An active preset saved while the
   presets were panel-wide comes back on the scope that now has one by that id, and variants saved
   then start out in each scope they move.
 
@@ -1206,7 +1220,7 @@ Scrolling pane bodies, trees and the command palette's list fade their content o
 | Key | Action |
 | --- | --- |
 | `↑` / `↓`, `Home` / `End` | Move; type letters to jump to a label (see `typeahead`) |
-| `←` / `→` | Close or go up / open or go down |
+| `←` / `→` | Close or go up / open or go down (swapped when the tree is `dir="rtl"`) |
 | `⇧` click or `⇧↑↓`, `⌘` click, `⌘A` | Extend, toggle, select all |
 | `Space` | Select the active row (`⌘Space` toggles it) |
 | `Enter` / `F2` | Rename in place (with `onRename`); otherwise `Enter` calls `onActivate` |
@@ -1259,7 +1273,7 @@ toast("Deleted Barrier", { action: { label: "Undo", run: undo } })
 
 - **`popover(anchor, content, options?)`** places `content` beside an element, a rect or a point. `placement` is `top`, `bottom`, `left` or `right`, each with `-start` or `-end`; it flips when its side is short and the other has more room, then shifts to stay 8px inside the view, and follows its anchor through scrolls and resizes. It grows from the anchor's edge. It takes focus (`focus: "first" | "layer" | "none"`) and gives it back when it closes; Esc, a click outside or focus leaving closes it (`closeOnOutside: false` keeps it), and `trap: true` keeps Tab inside. The handle has `element`, `open`, `reposition()` and `close()` (a promise that resolves once it's gone).
 - **`tooltip(el, content, options?)`** shows after a 500ms pause over the element, or on keyboard focus (not a click's). While one is up, or just after, moving to a neighbour shows its tip at once, with no entrance. A press hides it until the pointer leaves; Esc hides it. `shortcut` shows as key chips (`⌘K` on Apple platforms, `Ctrl+K` elsewhere) and sets `aria-keyshortcuts`; the target gets `aria-describedby` while it shows. Content can be a function, read each time it shows. Split panes use these for their buttons and rails.
-- **`commandPalette({ commands, onRun?, hotkey?, recents?, placeholder? })`** opens on `⌘K` (`hotkey`, `"Mod+K"` by default; `false` for none). With no query it shows recent commands (remembered in localStorage under `recents`; `false` for none), then each `section`. Typing ranks commands by a fuzzy match: letters in order, best at the start, at word starts and in runs. The matched letters light up in the accent while the rest of the label dims, and letters strewn thinly across words don't count. A command answers to its `keywords` and section too. `↑`/`↓` move a highlight that glides (`PgUp`/`PgDn`, `⌘↑`/`⌘↓`), disabled commands are passed over, `Enter` runs, `Esc` or a click outside closes. A `run` that returns a string (or a promise of one) shows it as a toast; a throw shows as an error toast. The handle has `open(query?)`, `close()`, `toggle()`, `isOpen` and `dispose()`.
+- **`commandPalette({ commands, onRun?, hotkey?, recents?, placeholder?, presence? })`** opens on `⌘K` (`hotkey`, `"Mod+K"` by default; `false` for none). A key summons it, so it fades in and out in about 80ms (`presence: "fade"`); `presence: "none"` (or `false`) shows and hides it at once, and `{ duration?, scale?, blur?, dy? }` gives it the full entrance (from .96, 8px blur and 8px above, over .34s), with any of those changed. With no query it shows recent commands (remembered in localStorage under `recents`; `false` for none), then each `section`. Typing ranks commands by a fuzzy match: letters in order, best at the start, at word starts and in runs. The matched letters light up in the accent while the rest of the label dims, and letters strewn thinly across words don't count. A command answers to its `keywords` and section too. `↑`/`↓` move a highlight that glides (`PgUp`/`PgDn`, `⌘↑`/`⌘↓`), disabled commands are passed over, `Enter` runs, `Esc` or a click outside closes. A `run` that returns a string (or a promise of one) shows it as a toast; a throw shows as an error toast. The handle has `open(query?)`, `close()`, `toggle()`, `isOpen` and `dispose()`.
 - **`commandsFrom(controls, { title?, fields?, reveal? })`** lists a store as commands: its actions and toolbar buttons (with their shortcuts), presets and group presets (the current one marked), toggles ("Turn on …"), one command per choice option, "Reset …" for modified fields, and, with `reveal(key)`, every other field (its current value as the hint) to go to.
 - **`confirm({ title, body?, confirm?, cancel?, destructive? })`** returns `Promise<boolean>`. It's modal over a scrim, keeps Tab inside, and Esc or a click outside cancels. `destructive` puts the button in `--k-critical` and focus on Cancel; otherwise focus starts on the confirming button.
 - **`toast(message, { tone?, linger?, action?, within? })`** shows a pill at the bottom centre for 3.2s (6s for `tone: "error"`). A new message replaces the one showing, and hovering keeps it. Pages show their status (Copied, errors) this way.
@@ -2078,7 +2092,7 @@ The package has two core exports selected through the standard `development` con
 | `readout(field, { preset?, theme?, label? })` | A readout on its own: `{ element, push(value), value, dispose() }`. |
 | `popover(anchor, content, { placement?, offset?, role?, label?, focus?, trap?, closeOnOutside?, onClose? })` | A floating layer that flips and shifts; `{ element, open, reposition(), close() }`. |
 | `tooltip(el, text \| { text, shortcut?, placement?, delay? })` / `tooltips(doc)` | Delayed tooltips with instant hand-off and shortcut chips; `data-tip` attributes. |
-| `commandPalette({ commands, onRun?, hotkey?, recents?, placeholder? })` / `commandsFrom(controls, options?)` | `⌘K` fuzzy command search; a store's actions, presets and fields as commands. |
+| `commandPalette({ commands, onRun?, hotkey?, recents?, placeholder?, presence? })` / `commandsFrom(controls, options?)` | `⌘K` fuzzy command search; a store's actions, presets and fields as commands. |
 | `confirm({ title, body?, confirm?, cancel?, destructive? })` | `Promise<boolean>`, modal, focus kept inside. |
 | `toast(message, { tone?, linger?, action?, within? })` | A status pill at the bottom centre. |
 | `menu(anchor, items, { placement?, label?, onSelect?, onClose? })` / `contextMenu(target, items, options?)` | Menus with icons, shortcut chips, checks, radios and submenus; a right-click or menu-key menu. |

package/dist/dev/{chunk-mbhy4jg5.js → chunk-49hkdggk.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 && !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-44r02asc.js → chunk-902v1jgd.js}

@@ -6,7 +6,7 @@ import {
   writeSession,
   injectStyles,
   toggleLayer
-} from "./chunk-pdf3zy95.js";
+} from "./chunk-bejz4qcg.js";
 
 // src/panel/attach.ts
 function attach(controls, element, options = {}) {
@@ -82,7 +82,7 @@ function attach(controls, element, options = {}) {
       return;
     loading = !0;
     try {
-      let { createPanel } = await import("./chunk-mbhy4jg5.js");
+      let { createPanel } = await import("./chunk-49hkdggk.js");
       if (disposed || !controls.enabled || panel)
         return;
       if (panel = createPanel(controls, element, close, { restored, chip }), remember)