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

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);
@@ -6955,8 +6956,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 +7010,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);
@@ -7057,34 +7058,41 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   let slideUntil = 0;
   let display = "auto";
   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 +7143,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,15 +7204,19 @@ 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, nextEntries.map((e) => [e.id, e.label])]);
       entries = nextEntries;
       syncShown();
       if (nextSig !== signature) {
@@ -7269,12 +7281,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 +7364,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 +7385,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?.();
@@ -9459,7 +9474,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 +9484,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 +9499,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) {
@@ -26046,8 +26067,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 +26222,8 @@ 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" ? options.defaultLabel : undefined) ?? controls.presetLabel(id, scope);
+  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 : {};
@@ -27606,11 +27628,11 @@ 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);
     if (v) {
@@ -27620,6 +27642,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 +27674,7 @@ function buildPanel(controls, host, options) {
       writeSession(controls.id, { tab: id });
     tabStrip.select(id, animate);
     const focused = doc.activeElement;
+    presetStrip.update();
     applyVisibility(animate ? "tab" : "instant");
     if (focused && root.contains(focused) && focused.closest("[hidden],[data-leaving]"))
       tabStrip.focus({ preventScroll: true, focusVisible: false });
@@ -27911,7 +27950,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 +27996,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 +28092,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() {
@@ -28834,7 +28874,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 +28898,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];

package/dist/types/core/remote.d.ts

@@ -136,6 +136,8 @@ export interface RemoteControlsOptions {
     readonly nullDefaults?: boolean;
     readonly values?: State;
     readonly presets?: Readonly<Record<string, State>>;
+    /** Presets that belong to one tab or group (see `ControlsOptions.scopedPresets`). */
+    readonly scopedPresets?: Readonly<Record<string, Readonly<Record<string, State>>>>;
     /** Groups pinned above the tab strip, outside the presets (see `ControlsOptions.pinned`). */
     readonly pinned?: readonly string[];
     /** Numbered presets per group, e.g. the phone's preset sets (see `ControlsOptions.groupPresets`). */

package/dist/types/core/store.d.ts

@@ -50,6 +50,19 @@ export interface PresetRef {
     readonly kind: "preset" | "variant";
     readonly id: string;
 }
+/**
+ * A preset strip that belongs to one tab or group (see `ControlsOptions.scopedPresets`): its
+ * presets and saved variants move only its own keys, and it keeps its own active preset.
+ */
+export interface PresetScope<V = State> {
+    /** The tab or group it's named for. */
+    readonly id: string;
+    /** The keys it moves: the tab's or group's, pinned ones aside. */
+    readonly keys: readonly string[];
+    /** By id, `default` first; keys outside the scope sit at their defaults. */
+    readonly presets: Readonly<Record<string, V>>;
+    readonly variants: Variants<V>;
+}
 export interface ControlAction<V = State> {
     readonly id?: string;
     readonly label: string;
@@ -169,8 +182,9 @@ export interface MountPanelOptions extends LabelOptions {
      */
     readonly header?: boolean | HeaderOptions;
     /**
-     * `false` drops the scope line beside the title (`Shape › Cohesion`, where keys go, and a faint
-     * `esc ↑ Shape` for where Esc goes). The focus lens and the armed frame stay.
+     * `true` shows a scope line beside the title (`Shape › Cohesion`, where keys go, and a faint
+     * `esc ↑ Shape` for where Esc goes). Off by default; the focus lens and the armed frame show
+     * either way.
      */
     readonly crumbs?: boolean;
     /**
@@ -355,6 +369,14 @@ export interface ControlsOptions<S extends Schema> extends LabelOptions {
     /** An undo stack the host owns; undo and redo call it (see `HostHistory`). */
     history?: HostHistory;
     presets?: Readonly<Record<string, Partial<Values<S>>>>;
+    /**
+     * Presets that belong to one tab or group, keyed by its id: `{ Sidebars: { snappy: {…} } }`.
+     * Each shows its own strip on that tab (a tab without any shows none), moves only that tab's
+     * or group's keys, and has its own active preset, modified mark and saved variants. A variants
+     * choice on a tab adds its options to that tab's. `presets` then covers only the keys no scope
+     * holds; leave it out and only the scoped strips show.
+     */
+    scopedPresets?: Readonly<Record<string, Readonly<Record<string, Partial<Values<S>>>>>>;
     /**
      * Groups pinned to the top of a panel, under the header and above the tab strip, on every tab
      * (as fields' `pinned: true` pins theirs). Presets and saved variants leave them alone: applying
@@ -408,6 +430,10 @@ export interface Controls<S extends Schema = Schema> {
     readonly persist: PersistMode;
     readonly presets: Readonly<Record<string, Values<S>>>;
     readonly variants: Variants<Values<S>>;
+    /** The tabs and groups with presets of their own, by id (see `ControlsOptions.scopedPresets`). */
+    readonly scopes: Readonly<Record<string, PresetScope<Values<S>>>>;
+    /** The scope `key`'s presets come from: a tab or group's id, `""` for `presets`, or undefined when pinned. */
+    scopeOf(key: string): string | undefined;
     readonly actions: readonly ControlAction<Values<S>>[];
     /** Its panels' theme, as given (see `ControlsOptions.theme`). */
     readonly theme: Theme | ThemeMode | undefined;
@@ -437,8 +463,8 @@ export interface Controls<S extends Schema = Schema> {
     readonly groupFolded: Readonly<Record<string, boolean>> | undefined;
     /** How a page's sections start (`sectionFolded`), as given. */
     readonly sectionFolded: SectionFolded | undefined;
-    /** A preset's display label (`presetLabels`, `defaultLabel`), else its id. */
-    presetLabel(id: string): string;
+    /** A preset's display label (`presetLabels`, `defaultLabel`), else its id; `scope` as in `preset`. */
+    presetLabel(id: string, scope?: string): string;
     /** Whether `key` is pinned (its group is, see `ControlsOptions.pinned`), outside the presets. */
     isPinned(key: string): boolean;
     readonly error: string | null;
@@ -555,17 +581,21 @@ export interface Controls<S extends Schema = Schema> {
     readonly comparing: boolean;
     /**
      * Applies a preset and makes it the active one (`"default"` clears it); one undo step, or
-     * folded into the last with `coalesce` (a pan across the strip).
+     * folded into the last with `coalesce` (a pan across the strip). With `scope`, one of that tab
+     * or group's presets, which moves only its keys.
      */
     preset(id: string, options?: {
         coalesce?: boolean;
+        scope?: string;
     }): void;
-    matchingPreset(): string;
+    /** The preset the current values match (in `scope`, over its keys), else `"custom"`. */
+    matchingPreset(scope?: string): string;
     /**
      * The preset (or saved variant) last applied, which Reset returns to and Random explores
-     * around, or null. Kept with the values; forgotten by a reset to the defaults.
+     * around, or null. Kept with the values; forgotten by a reset to the defaults. With `scope`,
+     * that tab or group's.
      */
-    activePreset(): PresetRef | null;
+    activePreset(scope?: string): PresetRef | null;
     /** The group preset last applied to `group` (0-based), or -1. */
     activeGroupPreset(group: string): number;
     /** The values Reset returns to first: the active presets over the defaults. */

package/dist/types/core/variants.d.ts

@@ -22,4 +22,6 @@ export interface Variants<V> {
     export(): string;
     import(json: string): void;
 }
-export declare function createVariants<S extends Schema>(schema: () => S, id: string, key: string, storage: () => StoragePort | null, get: () => Values<S>, set: (v: Values<S>, id: string, coalesce: boolean) => void, notify: () => void, enabled: () => boolean): Variants<Values<S>>;
+export declare function createVariants<S extends Schema>(schema: () => S, id: string, key: string, storage: () => StoragePort | null, get: () => Values<S>, set: (v: Values<S>, id: string, coalesce: boolean) => void, notify: () => void, enabled: () => boolean, 
+/** What the list starts as while storage holds none yet (it's kept once something's saved). */
+seed?: () => readonly Variant<Values<S>>[]): Variants<Values<S>>;

package/dist/types/panel/presets.d.ts

@@ -19,8 +19,11 @@ export interface ActivePresetState {
 }
 /** How strong the selection pill stays on the active preset once the values drift off it. */
 export declare const DRIFTED_PILL = 0.5;
-/** The strip's id for the store's active preset (`p:` a preset, `v:` a saved variant), if any. */
-export declare function activeEntryId(controls: Controls<any>): string | null;
+/**
+ * The strip's id for the store's active preset (`p:` a preset, `v:` a saved variant), if any;
+ * `scope` as in `Controls.preset`.
+ */
+export declare function activeEntryId(controls: Controls<any>, scope?: string): string | null;
 /**
  * Resolves which preset or variant is currently active.
  * The store's active preset (`baseId`) holds the selection however far the values drift from it.
@@ -75,6 +78,11 @@ export interface PresetStrip {
 }
 export declare function createPresetStrip<S extends Schema>(doc: Document, controls: Controls<S>, showVariants: boolean, run: (action: () => unknown) => void, onAfterChange?: () => void, 
 /** What a preset's chip says (its id stays its identity); `controls.presetLabel` by default. */
-presetLabel?: (id: string) => string, 
+presetLabel?: (id: string, scope: string) => string, 
 /** Whether these entries matter where the strip is shown (a tab they don't touch hides it). */
-relevant?: (entries: readonly PresetEntry<any>[]) => boolean): PresetStrip;
+relevant?: (entries: readonly PresetEntry<any>[]) => boolean, 
+/**
+ * Whose presets it shows: a tab or group's (see `ControlsOptions.scopedPresets`), `""` for the
+ * panel's own, or null for none (the strip hides).
+ */
+scopeOf?: () => string | null): PresetStrip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitlangton/knobs",
-  "version": "0.4.0-next.12",
+  "version": "0.4.0-next.13",
   "description": "Per-component tuning controls. Explore in development, ship constants.",
   "type": "module",
   "license": "MIT",