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

package/README.md

@@ -369,7 +369,7 @@ The preset you apply last (a chip, `[` / `]`, a pan, `controls.preset(id)`, `var
 - **The `?` popover says so:** "Random around Storm / Back to Storm", then "Reset all to defaults" once you're there.
 - **Undo covers it:** applying a preset, each reset and each roll is one undo step, and undoing restores the active preset with the values. The active preset is kept with the values in storage.
 
-`controls.activePreset()` returns `{ kind: "preset" | "variant", id }` or null, `controls.activeGroupPreset(group)` the group's index or -1, `controls.baseValues()` what Reset returns to first, and `controls.canReset(keys?)` whether a reset would change anything. A reset back to a preset reaches `onChange` with `source: "reset"` and `base: true`; remote controls send its values with `onSet` (nulls only for a reset to the defaults), or call `onPreset` again for a group whose peer applies its own presets.
+`controls.activePreset(scope?)` returns `{ kind: "preset" | "variant", id }` or null (a tab's or group's with `scope`, see `scopedPresets` under [Tabs](#tabs-sub-headings-and-search)), `controls.activeGroupPreset(group)` the group's index or -1, `controls.baseValues()` what Reset returns to first, and `controls.canReset(keys?)` whether a reset would change anything. A reset back to a preset reaches `onChange` with `source: "reset"` and `base: true`; remote controls send its values with `onSet` (nulls only for a reset to the defaults), or call `onPreset` again for a group whose peer applies its own presets.
 
 ## Keyboard
 
@@ -431,14 +431,14 @@ Three things show which, in both renderers, on floating and inline panels and on
   its hairline edge brightens a touch toward the accent and its title is at full strength. At rest
   the title is a little quieter, so on a page with several panels the one listening is plain.
   Focus leaving (or `Esc` out of the panel, or the window going to the background) disarms it.
-- **The scope line.** Beside the title, a quiet trail says where keys go: `Swarm › Shape ›
-  Cohesion`, the deepest crumb bright and its parents dim. Crumbs glide to their places as focus
-  moves, and one that changes fades out as the new one fades in. For a moment after a key below
+- **The scope line** (opt-in: `crumbs: true` on the mount). Beside the title, a quiet trail says
+  where keys go: `Swarm › Shape › Cohesion`, the deepest crumb bright and its parents dim. Crumbs
+  glide to their places as focus moves, and one that changes fades out as the new one fades in. For a moment after a key below
   the panel's level, a faint `esc ↑ Shape` follows it, then fades. Clicking a crumb takes focus to
   its level; clicking the title takes it to the panel. The line lives in the room between the
   title and the header's buttons: when it doesn't fit, the first crumbs drop off, and without room
   for the deepest it stays empty, so it never runs under the buttons and the title never moves.
-  `crumbs: false` on the mount drops the line (the lens and the armed frame stay).
+  Without it the header is the title and its buttons; the lens and the armed frame show either way.
 
 Tune them with tokens on the panel or any ancestor:
 
@@ -834,7 +834,21 @@ panel.tab("emitter") // shows a tab; panel.tab() answers the one showing
   preset strip, then the tab's rows. `controls.isPinned(key)` says whether a key is pinned.
   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
-  every tab (or its own, if it names one).
+  its own tab (or every tab, if it has none).
+- **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
+  tab's, so each tab is its own experiment: it has its own active preset (Reset's base and
+  Random's centre for its keys), its own modified mark on the chip and its own saved variants
+  (`controls.scopes.Sidebars.variants`, kept apart in storage). A preset switch is one undo step.
+  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
+  `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
+  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.
 
   ```ts
   const motion = defineControls(
@@ -845,7 +859,12 @@ panel.tab("emitter") // shows a tab; panel.tab() answers the one showing
       sidebars: spring({ duration: 0.3, bounce: 0 }, { group: "Sidebars", tab: "Sidebars" }),
       hover: spring({ duration: 0.14, bounce: 0 }, { group: "Experiments", tab: "Experiments" }),
     },
-    { pinned: ["Global"], defaultLabel: "Shipped", presets: { snappy, smooth, calm } },
+    {
+      pinned: ["Global"],
+      defaultLabel: "Shipped",
+      // Only the Sidebars tab has a strip, and its presets set only its springs.
+      scopedPresets: { Sidebars: { snappy, smooth, calm } },
+    },
   )
   motion.mount(el, { title: "Knobs", tabs: ["Sidebars", "Experiments"] })
   ```
@@ -2007,7 +2026,7 @@ The package has two core exports selected through the standard `development` con
 | `action(label, { run, shortcut?, global?, rebind? })` / `flatSpring({ duration, bounce }, meta)` | A button row, with a shortcut its key cap can rebind; two flat number fields drawn as one spring card. `actionShortcut(field)` reads an action's shortcut as `{ key, scope }`. |
 | Field meta `random?`, `disabled?`, `readOnly?`, `folded?`, `tab?`, `subsection?` | On any field or descriptor: `random: false` stays out of Random and Mutate (switches, seeds and key combinations start out; `random: true` brings them in); `disabled` / `readOnly` (boolean or `(values) => boolean`) gate the row; `folded` makes its group foldable, starting folded; `tab` puts the row on a tab; `subsection` puts it under a sub-heading in its group. |
 | Field meta `groupDescription?: string`, `sectionDescription?: string`, `sectionFolded?: boolean` | On any field or descriptor, for pages (the first field of a group or section that gives one wins): a muted line under the card's title or the section's heading; `sectionFolded` makes the section foldable, starting folded. |
-| `mountPanel(controls, container, options?)` (`knobs/panel`) | An inline panel. Beside theme, density, renderer and keys: `preset`, `header` (`false` or `{ title?, buttons? }`), `crumbs` (`false` drops the scope line), `session`, `groupFolded`, `subsectionFolded`, `tabs`, `tab`, `onTab`, `search`, `groupRandom(group, mode)`, `rowAccessory(key)`, `marks`, `haptics`, `detents`, `sound`. The handle adds `panel.fold(group, folded?)`, `panel.tab(id?)`, `panel.search(query?, chips?)` (returns `{ query, chips }`) and `panel.updateAccessories()`. |
+| `mountPanel(controls, container, options?)` (`knobs/panel`) | An inline panel. Beside theme, density, renderer and keys: `preset`, `header` (`false` or `{ title?, buttons? }`), `crumbs` (`true` adds the scope line), `session`, `groupFolded`, `subsectionFolded`, `tabs`, `tab`, `onTab`, `search`, `groupRandom(group, mode)`, `rowAccessory(key)`, `marks`, `haptics`, `detents`, `sound`. The handle adds `panel.fold(group, folded?)`, `panel.tab(id?)`, `panel.search(query?, chips?)` (returns `{ query, chips }`) and `panel.updateAccessories()`. |
 | `sound` (`knobs/panel`) | The page's sound effects (see **Sound**): `enabled`, `enable(on?)`, `volume`, `setVolume(v)`, `theme`, `setTheme("glass" \| "mech")`, `play(cue \| layers, detail?)`, `output()`, `subscribe(listener)`. Panels play only with `sound` on their mount. |
 | `mountPage(controls, container, options?)` (`knobs/panel`) | A full page of group cards in sections under a sticky header; `page.card({ title?, section?, element?, collapsed?, summary?, description? })` adds custom cards (`card.collapse(collapsed?)`, `card.collapsed`, `card.summary(content \| null)`), and `page.highlight({ groups?, sections? } \| null, { reveal?, expand? })` marks what's on screen. Options take `groupLabels`, `sectionLabels`, `groupDescriptions`, `sectionDescriptions`, `presetLabels`, `defaultLabel`, `groupPresetDisplay` and `groupFolded` over the store's. |
 | `MountPageOptions` folds | `sectionFolded?: SectionFolded` (`boolean \| Record<string, boolean>`), `foldStorage?: StoragePort \| null`, `nav?: boolean`, `groupSummary?(group, info: FoldSummaryInfo): string \| Node \| null`, `sectionSummary?(section, info: FoldSummaryInfo): string \| Node \| null`; `FoldSummaryInfo` is `{ preset: string \| null, changed: number, keys: readonly string[] }`. |
@@ -2035,10 +2054,11 @@ The package has two core exports selected through the standard `development` con
 - `controls.randomize(keys?)` / `controls.mutate(keys?)`: skip locked fields; one undo step each
 - `controls.lock(keys, locked = true)` / `controls.isLocked(key)`: locks are saved with the values (remote controls keep them in memory)
 - `controls.compare(hold)` / `controls.comparing`: while held, `get()` returns the previous undo entry; no history, no storage
-- `controls.preset(id, { coalesce? })` / `controls.matchingPreset()`
-- `controls.activePreset()` / `controls.activeGroupPreset(group)` / `controls.baseValues()`: the base Reset returns to and Random explores around
+- `controls.preset(id, { coalesce?, scope? })` / `controls.matchingPreset(scope?)`
+- `controls.activePreset(scope?)` / `controls.activeGroupPreset(group)` / `controls.baseValues()`: the base Reset returns to and Random explores around
+- `controls.scopes` / `controls.scopeOf(key)`: the tabs and groups with presets of their own (`scopedPresets`), each `{ id, keys, presets, variants }`, and whose presets move a key
 - `controls.groupPresets` / `controls.groupPreset(group, index, { coalesce? })` / `controls.matchingGroupPreset(group)` / `controls.groupPresetDisplay`
-- `controls.groupLabel(id)` / `controls.sectionLabel(id)` / `controls.presetLabel(id)`: display labels (`groupLabels`, `sectionLabels`, `presetLabels`, `defaultLabel`, or the fields' `groupLabel` / `sectionLabel`)
+- `controls.groupLabel(id)` / `controls.sectionLabel(id)` / `controls.presetLabel(id, scope?)`: display labels (`groupLabels`, `sectionLabels`, `presetLabels`, `defaultLabel`, or the fields' `groupLabel` / `sectionLabel`)
 - `controls.groupDescription(group): string | undefined` / `controls.sectionDescription(section): string | undefined`: `groupDescriptions` / `sectionDescriptions`, else the fields' `groupDescription` / `sectionDescription`
 - `controls.groupFolded` / `controls.sectionFolded`: how groups and a page's sections start, as given to `defineControls` or `createRemoteControls` (`groupFolded?: Record<string, boolean>`, `sectionFolded?: SectionFolded`); mounts read them under their own
 - `controls.code("ts" | "json" | "jsx", values?)`

package/dist/dev/{chunk-ab7vfghg.js → chunk-44r02asc.js}

@@ -6,7 +6,7 @@ import {
   writeSession,
   injectStyles,
   toggleLayer
-} from "./chunk-nwfm1bfj.js";
+} from "./chunk-pdf3zy95.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-9qtvxa6k.js");
+      let { createPanel } = await import("./chunk-mbhy4jg5.js");
       if (disposed || !controls.enabled || panel)
         return;
       if (panel = createPanel(controls, element, close, { restored, chip }), remember)

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

@@ -119,7 +119,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-nwfm1bfj.js";
+} from "./chunk-pdf3zy95.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -960,8 +960,8 @@ function panOptions(el, o) {
 
 // src/panel/presets.ts
 var DRIFTED_PILL = 0.5;
-function activeEntryId(controls) {
-  let ref = controls.activePreset();
+function activeEntryId(controls, scope = "") {
+  let ref = controls.activePreset(scope);
   return ref ? `${ref.kind === "preset" ? "p" : "v"}:${ref.id}` : null;
 }
 function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId = null) {
@@ -1012,7 +1012,7 @@ function nextPresetIndex(count, activeIndex, direction) {
     return direction > 0 ? 0 : count - 1;
   return ((activeIndex + direction) % count + count) % count;
 }
-function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id) => controls.presetLabel(id), relevant) {
+function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id, scope) => controls.presetLabel(id, scope), relevant, scopeOf = () => "") {
   let wake = () => onAfterChange?.(), el = (tag, cls, text) => {
     let node = doc.createElement(tag);
     if (cls)
@@ -1029,31 +1029,34 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     saveButton.type = "button", saveButton.tabIndex = -1, saveButton.setAttribute("aria-label", "Save as variant"), saveButton.setAttribute("aria-keyshortcuts", "Shift+S"), saveButton.dataset.hint = "Save", saveButton.onclick = () => run(save);
   if (track.append(pill), root.append(track), saveButton)
     root.append(saveButton);
-  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0, display = "auto", chipMin = 0, unpinned = (values) => {
+  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0, display = "auto", chipMin = 0, scope = null, at = () => scope ?? "", source = () => scope === null ? void 0 : scope === "" ? { presets: controls.presets, variants: controls.variants } : controls.scopes[scope], unpinned = (values) => {
     let out;
     for (let k of Object.keys(values))
-      if (controls.isPinned(k) && !same(values[k], controls.locked[k]))
+      if (controls.scopeOf(k) !== at() && !same(values[k], controls.locked[k]))
         out ??= { ...values }, out[k] = controls.locked[k];
     return out ?? values;
   };
   function buildEntries() {
-    let presetEntries = Object.entries(controls.presets).map(([id, presetValues]) => ({
+    let from = source();
+    if (!from)
+      return [];
+    let where = at(), presetEntries = Object.entries(from.presets).map(([id, presetValues]) => ({
       id: `p:${id}`,
       kind: "preset",
       rawId: id,
-      label: presetLabel(id),
+      label: presetLabel(id, where),
       values: presetValues,
-      apply: (coalesce) => controls.preset(id, { coalesce })
+      apply: (coalesce) => controls.preset(id, { coalesce, scope: where })
     }));
     if (!showVariants)
       return presetEntries;
-    let variantEntries = controls.variants.list().map((v) => ({
+    let variantEntries = from.variants.list().map((v) => ({
       id: `v:${v.id}`,
       kind: "variant",
       rawId: v.id,
       label: v.name ?? v.id.slice(0, 8),
       values: unpinned(v.values),
-      apply: (coalesce) => controls.variants.load(v.id, { coalesce })
+      apply: (coalesce) => from.variants.load(v.id, { coalesce })
     }));
     return [...presetEntries, ...variantEntries];
   }
@@ -1087,7 +1090,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     if (pill.style.left = `${left}px`, pill.style.right = `${box.trackWidth - right}px`, pill.style.top = `${top}px`, pill.style.height = `${box.height}px`, pill.style.opacity = activeState.drifted ? String(DRIFTED_PILL) : "1", pill.style.scale = "", first)
       doc.defaultView?.requestAnimationFrame(() => pill.style.transition = "");
   }
-  let resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls)), wanted = (list) => (list.length > 1 || showVariants) && (relevant?.(list) ?? !0);
+  let resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls, at())), wanted = (list) => scope !== null && (list.length > 1 || showVariants) && (relevant?.(list) ?? !0);
   function syncShown() {
     let show = wanted(entries);
     if (root.hidden === show && root.dataset.presence === void 0)
@@ -1130,13 +1133,16 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   function update() {
     run(() => {
-      let variantsRef = showVariants ? controls.variants.list() : null;
-      if (signature !== "" && variantsRef === lastVariantsRef) {
+      let was = scope;
+      if (scope = scopeOf(), scope !== was)
+        lastAppliedId = null;
+      let variantsRef = showVariants ? source()?.variants.list() ?? null : null;
+      if (signature !== "" && scope === was && variantsRef === lastVariantsRef) {
         syncShown(), syncSelection(!1);
         return;
       }
       lastVariantsRef = variantsRef;
-      let nextEntries = buildEntries(), nextSig = JSON.stringify(nextEntries.map((e) => [e.id, e.label]));
+      let nextEntries = buildEntries(), nextSig = JSON.stringify([scope, 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);
@@ -1175,11 +1181,14 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   }
   function save() {
     finishName(!0);
-    let used = new Set(controls.variants.list().map((v) => v.name)), n = 1;
+    let variants = source()?.variants;
+    if (!variants)
+      return "";
+    let used = new Set(variants.list().map((v) => v.name)), n = 1;
     while (used.has(`Variant ${n}`))
       n++;
-    let variant = controls.variants.save(`Variant ${n}`);
-    return controls.variants.load(variant.id), lastAppliedId = `v:${variant.id}`, update(), startName(entries.findIndex((e) => e.id === `v:${variant.id}`), !0), onAfterChange?.(), `Saved “Variant ${n}”. Type a name, or Enter to keep it.`;
+    let variant = variants.save(`Variant ${n}`);
+    return variants.load(variant.id), lastAppliedId = `v:${variant.id}`, update(), startName(entries.findIndex((e) => e.id === `v:${variant.id}`), !0), onAfterChange?.(), `Saved “Variant ${n}”. Type a name, or Enter to keep it.`;
   }
   let naming = null;
   function placeName() {
@@ -1223,7 +1232,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       focusQuietly();
     let message;
     if (keep && entry?.kind === "variant" && name && name !== was)
-      controls.variants.rename(entry.rawId, name), update(), message = `Named “${name}”.`;
+      source()?.variants.rename(entry.rawId, name), update(), message = `Named “${name}”.`;
     return onAfterChange?.(), message;
   }
   function rename() {
@@ -1239,7 +1248,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     let entry = entries[activeState.activeIndex];
     if (!entry || entry.kind !== "variant")
       return;
-    return controls.variants.remove(entry.rawId), lastAppliedId = null, update(), onAfterChange?.(), `Deleted “${entry.label}”.`;
+    return source()?.variants.remove(entry.rawId), lastAppliedId = null, update(), onAfterChange?.(), `Deleted “${entry.label}”.`;
   }
   let scrubbing = !1, scrubCommitted = !1, chipIndexAt = (clientX, clientY) => {
     let best = -1, bestDist = 1 / 0;
@@ -2971,7 +2980,8 @@ fn hash21(q: vec2f) -> f32 {
 
 // kind 0: Panel card surface + elevation shadow + border + specular rim. With a hairline width
 // (extra.z, whole device px) the edge is that hairline just outside the card, like CSS's
-// 0 0 0 w spread shadow, and the rim is CSS's inset 0 w 0; otherwise a 1px border and a 1px rim.
+// 0 0 0 w spread shadow, and the rim lights its top, like CSS's 0 -w 0 (one edge, not two);
+// otherwise a 1px border and a 1px rim inside it.
 fn shadePanel(p: Prim, local: vec2f, size: vec2f) -> vec4f {
   let r = p.look.x;
   let dist = roundedBox(local, size, r);
@@ -2980,6 +2990,8 @@ fn shadePanel(p: Prim, local: vec2f, size: vec2f) -> vec4f {
   var out = vec4f(0.0);
   if (hair > 0.0 && dist > -1.0) {
     out = premul(p.color2) * clamp(covSd(dist - hair) - bodyCov, 0.0, 1.0);
+    let raised = covSd(roundedBox(local + vec2f(0.0, hair), size, r));
+    out = over(out, premul(p.aux2) * clamp(raised - bodyCov, 0.0, 1.0));
   }
 
   // Floating drop shadow when glowOrBlur (look.z) > 0; like box-shadow, never under the card.
@@ -2993,13 +3005,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) {
@@ -15047,7 +15062,7 @@ function buildPanel(controls, host, options) {
   }
   popover.append(popGrid);
   let baseAt = (scope, from) => {
-    let group = scope === "row" ? rows[rowAt(from)]?.group : scope === "group" ? cardOf(from)?.dataset.group ?? void 0 : void 0, keys = scope === "row" ? rows[rowAt(from)]?.keys ?? [] : scope === "group" ? cardKeys(cardOf(from)) : scope === "selection" ? selectionKeys() ?? [] : void 0, index = group === void 0 ? -1 : controls.activeGroupPreset(group), ref = controls.activePreset(), name = index >= 0 ? controls.groupPresets[group]?.[index]?.name : ref?.kind === "preset" ? presetLabel(ref.id) : ref ? presetStrip.getEntries().find((e) => e.id === `v:${ref.id}`)?.label : void 0;
+    let group = scope === "row" ? rows[rowAt(from)]?.group : scope === "group" ? cardOf(from)?.dataset.group ?? void 0 : void 0, keys = scope === "row" ? rows[rowAt(from)]?.keys ?? [] : scope === "group" ? cardKeys(cardOf(from)) : scope === "selection" ? selectionKeys() ?? [] : void 0, index = group === void 0 ? -1 : controls.activeGroupPreset(group), where = (keys?.length ? controls.scopeOf(keys[0]) : stripScope()) ?? null, ref = where === null ? null : controls.activePreset(where), name = index >= 0 ? controls.groupPresets[group]?.[index]?.name : ref?.kind === "preset" ? presetLabel(ref.id, where) : ref ? (where === "" ? controls.variants : controls.scopes[where]?.variants)?.list().find((v) => v.id === ref.id)?.name : void 0;
     if (!name)
       return null;
     let off = keys ? keys.some((k) => controls.isModified(k)) : controls.isModified();
@@ -15141,7 +15156,7 @@ function buildPanel(controls, host, options) {
   if (helpButton?.hidden)
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
-  let presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : void 0) ?? controls.presetLabel(id), presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries)), tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate)), activeTab, searchOptions = typeof options.search === "object" ? options.search : {}, chipTests = /* @__PURE__ */ new Map, search = options.search && !page ? createSearch(doc, {
+  let presetLabel = (id, scope = "") => options.presetLabels?.[id] ?? (id === "default" ? 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, {
     placeholder: searchOptions.placeholder ?? "Search",
     chips: (searchOptions.chips ?? ["modified"]).map((chip) => {
       if (chip === "modified")
@@ -16192,11 +16207,11 @@ function buildPanel(controls, host, options) {
     return list;
   };
   function presetsTouchTab(entries) {
-    if (page || activeTab === void 0)
+    if (page || activeTab === void 0 || stripScope() !== "")
       return !0;
     let keys = rows.flatMap((r) => {
       let tab = tabOf(r);
-      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys : [];
+      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys.filter((k) => controls.scopeOf(k) === "") : [];
     }), v = variantsOf(controls.schema, controls.isPinned);
     if (v) {
       let tab = v.field.tab ?? (v.field.group !== void 0 ? groupTab(v.field.group) : void 0);
@@ -16205,6 +16220,20 @@ function buildPanel(controls, host, options) {
     }
     return presetsTouch(entries, keys, controls.locked);
   }
+  function stripScope() {
+    let named = Object.keys(controls.scopes), panelWide = named.length === 0 || Object.keys(controls.presets).length > 1;
+    if (page)
+      return panelWide ? "" : null;
+    if (activeTab === void 0)
+      return panelWide ? "" : named[0] ?? null;
+    if (named.includes(activeTab))
+      return activeTab;
+    return named.find((id) => rows.some((r) => r.group === id && tabOf(r) === activeTab)) ?? (panelWide ? "" : null);
+  }
+  let stripVariants = () => {
+    let scope = stripScope();
+    return (scope ? controls.scopes[scope]?.variants : void 0) ?? controls.variants;
+  };
   function syncTabs() {
     let list = tabList(), has = (id) => id !== void 0 && list.some((t) => t.id === id);
     if (!has(activeTab))
@@ -16218,7 +16247,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     let focused = doc.activeElement;
-    if (applyVisibility(animate ? "tab" : "instant"), focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
+    if (presetStrip.update(), applyVisibility(animate ? "tab" : "instant"), focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: !0, focusVisible: !1 });
     options.onTab?.(id), wakeGpu();
   }
@@ -16431,7 +16460,7 @@ function buildPanel(controls, host, options) {
   }, text = el("textarea");
   text.hidden = !0, text.name = "variant-json", text.spellcheck = !1, text.setAttribute("aria-label", "Import or copy text");
   let apply = button("Apply import", () => {
-    controls.variants.import(text.value), say("Presets imported."), reveal(text, !1), reveal(apply, !1), positioned?.constrain();
+    stripVariants().import(text.value), say("Presets imported."), reveal(text, !1), reveal(apply, !1), positioned?.constrain();
   });
   apply.className = "knobs-apply-btn", apply.setAttribute("aria-label", "Import JSON"), apply.hidden = !0;
   let copy = async (value, inPlace = !0) => {
@@ -16456,7 +16485,7 @@ function buildPanel(controls, host, options) {
   }
   if (showVariants && showFooter) {
     let transfer = el("div");
-    transfer.className = "knobs-transfer", transfer.append(button("Export presets", () => void copy(controls.variants.export(), !1)), button("Import presets", () => {
+    transfer.className = "knobs-transfer", transfer.append(button("Export presets", () => void copy(stripVariants().export(), !1)), button("Import presets", () => {
       reveal(text, !0), reveal(apply, !0), text.value = "", positioned?.constrain(), text.focus();
     })), popover.append(transfer);
   }
@@ -16524,6 +16553,7 @@ function buildPanel(controls, host, options) {
   }
   let shownBase = "", baseSignature = () => JSON.stringify([
     controls.activePreset(),
+    Object.keys(controls.scopes).map((s) => controls.activePreset(s)),
     Object.keys(controls.groupPresets).map((g) => controls.activeGroupPreset(g))
   ]);
   function update() {
@@ -17145,7 +17175,7 @@ function buildPanel(controls, host, options) {
       row: rows[rowAt(active)]?.display,
       editor: t.level === "editor" ? partName(t.el, active) : void 0
     });
-  }, crumbs = options.crumbs === !1 || header.hidden || !titleEl.isConnected ? void 0 : createCrumbs({
+  }, crumbs = options.crumbs !== !0 || header.hidden || !titleEl.isConnected ? void 0 : createCrumbs({
     header,
     title: titleEl,
     reduced: () => reducedMotion(),
@@ -17163,7 +17193,21 @@ function buildPanel(controls, host, options) {
       return;
     let t = lensTarget(to);
     jumpedTo = t && t !== "out" ? t.el : null, to.focus(quiet), queueScope();
-  }, titleDown;
+  };
+  root.addEventListener("mousedown", (event) => {
+    if (event.button !== 0 || event.shiftKey || event.metaKey || event.ctrlKey)
+      return;
+    let target = event.target instanceof Element ? event.target : null, r = rows[rowAt(target)];
+    if (!target || !r || r.leaving || r.row.closest("[hidden]"))
+      return;
+    let own = target.closest("button,input,select,textarea,a[href],[tabindex],[contenteditable]");
+    if (own && r.row.contains(own))
+      return;
+    event.preventDefault(), r.input.focus({ preventScroll: !0, focusVisible: !1 });
+    let t = lensTarget(doc.activeElement);
+    jumpedTo = t && t !== "out" ? t.el : null, queueScope();
+  }, !0);
+  let titleDown;
   titleEl.addEventListener("pointerdown", (event) => {
     titleDown = [event.clientX, event.clientY];
   }), titleEl.addEventListener("click", (event) => {

package/dist/dev/{chunk-nwfm1bfj.js → chunk-pdf3zy95.js}

@@ -2396,7 +2396,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)}
@@ -2423,9 +2423,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);
@@ -2438,7 +2439,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}
@@ -2446,7 +2447,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);