@kitlangton/knobs 0.4.0-next.1 → 0.4.0-next.11

package/dist/dev/{chunk-8mabjeyk.js → chunk-j57rhjtm.js}

@@ -10,7 +10,7 @@ import {
   DEFAULT_LINEAR,
   motionCss,
   storageKey
-} from "./chunk-3ygqgy1x.js";
+} from "./chunk-mjdgzad5.js";
 
 // src/core/theme.ts
 var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
@@ -1194,6 +1194,22 @@ var theme = { from: "theme" }, css = (s) => ({ css: s }), value = (s) => ({ valu
     source: css("var(--k-warn)"),
     doc: "Modified lines."
   },
+  {
+    name: "before",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-fg-3)"),
+    doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+  },
+  {
+    name: "after",
+    tier: "semantic",
+    type: "color",
+    group: "Data",
+    source: css("var(--k-fg)"),
+    doc: "After in a comparison, and only After."
+  },
   {
     name: "series-1",
     tier: "semantic",
@@ -1284,6 +1300,150 @@ var theme = { from: "theme" }, css = (s) => ({ css: s }), value = (s) => ({ valu
     source: value("288px"),
     doc: "Panel width."
   },
+  {
+    name: "space-inside",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("var(--k-unit)"),
+    doc: "Parts of one thing: an icon and its label, a meta line and its title."
+  },
+  {
+    name: "space-sibling",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 2)"),
+    doc: "Siblings in a group: buttons in a row, a list item's lines."
+  },
+  {
+    name: "space-title",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 3)"),
+    doc: "A heading and what it heads."
+  },
+  {
+    name: "space-group",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 12)"),
+    doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle)."
+  },
+  {
+    name: "space-section",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 24)"),
+    doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle."
+  },
+  {
+    name: "space-column",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 6)"),
+    doc: "Columns: a contents rail and the page, media side by side."
+  },
+  {
+    name: "pad-page",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 6)"),
+    doc: "A page's edge; 16px under 640px wide."
+  },
+  {
+    name: "pad-card",
+    tier: "semantic",
+    type: "length",
+    group: "Space",
+    source: css("calc(var(--k-unit) * 3)"),
+    doc: "Inside a card or popover."
+  },
+  {
+    name: "type-heading",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("20px"),
+    doc: "A page's title, weight 500."
+  },
+  {
+    name: "leading-heading",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("28px"),
+    doc: "Line height for type-heading."
+  },
+  {
+    name: "type-title",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Section titles (under their kicker), weight 500."
+  },
+  {
+    name: "leading-title",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("24px"),
+    doc: "Line height for type-title."
+  },
+  {
+    name: "type-body",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("13px"),
+    doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis."
+  },
+  {
+    name: "leading-body",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("20px"),
+    doc: "Line height for type-body."
+  },
+  {
+    name: "type-label",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("12px"),
+    doc: "Mono inside body text: code and paths."
+  },
+  {
+    name: "leading-label",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Line height for type-label."
+  },
+  {
+    name: "type-small",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("11px"),
+    doc: "Meta, controls, keys, timestamps; mono inside labels."
+  },
+  {
+    name: "leading-small",
+    tier: "semantic",
+    type: "length",
+    group: "Type",
+    source: value("16px"),
+    doc: "Line height for type-small."
+  },
   {
     name: "font-size",
     tier: "semantic",
@@ -2141,8 +2301,9 @@ ${register(["width"], "<length-percentage>", "288px")}
 @media(prefers-reduced-motion:reduce){:where(.knobs-chip,.knobs-ui){--k-token-t:0s}}`, aliased = (css) => css.replace(new RegExp(`var\\(--_k-(${ANIMATED.join("|")})\\)`, "g"), "var(--kv-$1)").replace(/var\(--k-blur\)/g, "var(--kv-blur)");
 
 // src/core/root.ts
-var ROOT_CLASS = "knobs-root", extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`, spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`, rootCss = `${tokensCss(knobs)}
+var ROOT_CLASS = "knobs-root", extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`, narrow = `@media(max-width:639.98px){:where(.${ROOT_CLASS}){--_k-pad-page:var(--k-pad-page,calc(var(--_k-unit) * 4))}}`, spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`, rootCss = `${tokensCss(knobs)}
 ${extras}
+${narrow}
 ${spring}
 ${DRIVERS}
 ${motionCss}`;
@@ -2425,6 +2586,9 @@ ${GRAD_PROPS}
 .knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--_k-gap);padding:0 var(--k-group-inset);color:var(--_k-group-label);font-size:var(--k-group-size);font-weight:var(--_k-weight-title);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
 .knobs-panel:not(.knobs-page) .knobs-group-head:not(:first-child){border-top:1px solid var(--k-group-divider);padding-top:var(--k-group-divider-gap)}
 .knobs-group-head:first-child{margin-top:0}
+.knobs-panel:not(.knobs-page) .knobs-presets+.knobs-group-head{margin-top:0;border-top:0;padding-top:0}
+.knobs-pinned{margin-bottom:var(--k-group-gap)}
+.knobs-pinned:empty{display:none}
 .knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--_k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
 .knobs-group-head button{height:20px;padding:0 6px;font-size:var(--_k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--_k-fg-2);background:transparent;border-radius:var(--_k-radius-sm);cursor:pointer}
 .knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg)}

package/dist/dev/{chunk-3ygqgy1x.js → chunk-mjdgzad5.js}

@@ -516,6 +516,7 @@ var META_KEYS = [
   "folded",
   "sectionFolded",
   "tab",
+  "pinned",
   "subsection"
 ];
 function pickMeta(source, skip = []) {
@@ -527,7 +528,19 @@ function pickMeta(source, skip = []) {
   }
   return out;
 }
-var READOUT_KINDS = /* @__PURE__ */ new Set(["watch", "sparkline", "graph", "meter", "table", "log"]), isReadout2 = (field) => READOUT_KINDS.has(field.kind), hasValue2 = (field) => field.kind !== "action" && field.kind !== "toolbar" && !READOUT_KINDS.has(field.kind), SPRING2 = {
+var READOUT_KINDS = /* @__PURE__ */ new Set(["watch", "sparkline", "graph", "meter", "table", "log"]), isReadout2 = (field) => READOUT_KINDS.has(field.kind), hasValue2 = (field) => field.kind !== "action" && field.kind !== "toolbar" && !READOUT_KINDS.has(field.kind);
+function pinnedKeys(schema, groups = []) {
+  let byGroup = new Map(groups.map((g) => [g, !0]));
+  for (let f of Object.values(schema))
+    if (f.group !== void 0 && f.pinned !== void 0 && !byGroup.has(f.group))
+      byGroup.set(f.group, f.pinned);
+  let out = /* @__PURE__ */ new Set;
+  for (let [key, f] of Object.entries(schema))
+    if (f.group === void 0 ? f.pinned === !0 : byGroup.get(f.group) === !0)
+      out.add(key);
+  return out;
+}
+var SPRING2 = {
   duration: { min: 0.05, max: 2, step: 0.01 },
   bounce: { min: -0.5, max: 1, step: 0.01 }
 };
@@ -1160,4 +1173,4 @@ function urlFlag2(name) {
 }
 var storageKey = (id, part) => `knobs:${encodeURIComponent(id)}:${part}:v1`;
 
-export { __preload, __chunks, maxChroma, oklchToRgb, parseColor2, fitColor, formatColor, colorHex2, EASINGS2, EASING_Y, easingName, bezierPoint2, bezierCss2, normalizeCombo2, letterOf2, comboFromEvent2, heldMods, matchesCombo2, comboParts2, comboLabel2, isTypingTarget, GRADIENT_SAMPLES, sampleGradient2, gradientSamples, gradientCss2, stopColorAt, sampleCurve2, curveSamples, CURVE_SHAPES2, inRange, sameRamp, randomStops, mutateStops, randomPoints, mutatePoints, pickMeta, isReadout2, hasValue2, SPRING2, valueKeys, knob2, choice2, action2, flatSpring2, toggle2, spring2, color2, point2, easing2, vec22, vec32, range2, angle2, seed2, keybind2, gradient2, curve2, toolbarShortcut2, actionShortcut2, toolbar2, watch2, sparkline2, graph2, meter2, table2, log2, wrapAngle2, normalizeField, normalize, isRecord, same, equal, Spring, springMotion2, springResponse, springEasing, springCss2, SPRINGS2, FADE, MOTION, reducedMotion, reducedSpring2, springLinear, DEFAULT_LINEAR, motionCss, RESHAPE, RESET_KEYS, REFRESHES, readoutState, pushReadout, READOUT, memoryStorage2, browserStorage, urlFlag2, storageKey };
+export { __preload, __chunks, maxChroma, oklchToRgb, parseColor2, fitColor, formatColor, colorHex2, EASINGS2, EASING_Y, easingName, bezierPoint2, bezierCss2, normalizeCombo2, letterOf2, comboFromEvent2, heldMods, matchesCombo2, comboParts2, comboLabel2, isTypingTarget, GRADIENT_SAMPLES, sampleGradient2, gradientSamples, gradientCss2, stopColorAt, sampleCurve2, curveSamples, CURVE_SHAPES2, inRange, sameRamp, randomStops, mutateStops, randomPoints, mutatePoints, pickMeta, isReadout2, hasValue2, pinnedKeys, SPRING2, valueKeys, knob2, choice2, action2, flatSpring2, toggle2, spring2, color2, point2, easing2, vec22, vec32, range2, angle2, seed2, keybind2, gradient2, curve2, toolbarShortcut2, actionShortcut2, toolbar2, watch2, sparkline2, graph2, meter2, table2, log2, wrapAngle2, normalizeField, normalize, isRecord, same, equal, Spring, springMotion2, springResponse, springEasing, springCss2, SPRINGS2, FADE, MOTION, reducedMotion, reducedSpring2, springLinear, DEFAULT_LINEAR, motionCss, RESHAPE, RESET_KEYS, REFRESHES, readoutState, pushReadout, READOUT, memoryStorage2, browserStorage, urlFlag2, storageKey };

package/dist/dev/index.js

@@ -27,6 +27,7 @@ import {
   pickMeta,
   isReadout2,
   hasValue2,
+  pinnedKeys,
   SPRING2,
   valueKeys,
   knob2,
@@ -75,8 +76,8 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-3ygqgy1x.js";
-__chunks(import.meta.url,["kd01pt6y","1qzffbpa","ayb292zj","3ygqgy1x","8mabjeyk"],[["./index.js",3],["./chunk-1qzffbpa.js",3,4],["./chunk-ayb292zj.js",3,4],["./chunk-3ygqgy1x.js"],["./chunk-8mabjeyk.js",3]],0);
+} from "./chunk-mjdgzad5.js";
+__chunks(import.meta.url,["js6xfzn6","bnhzf1tj","75gbzbyd","mjdgzad5","j57rhjtm"],[["./index.js",3],["./chunk-bnhzf1tj.js",3,4],["./chunk-75gbzbyd.js",3,4],["./chunk-mjdgzad5.js"],["./chunk-j57rhjtm.js",3]],0);
 // src/core/random.ts
 var lattice = (min, max, step, r) => min + Math.floor(r * (Math.floor((max - min) / step + 0.000000001) + 1)) * step, between = (min, max, r) => min + (max - min) * r;
 function pick(field, random) {
@@ -594,12 +595,30 @@ function defineControls(id, input, options = {}) {
   let schema = Object.freeze({ ...input }), locked = normalize(schema, {}), actions = Object.freeze([...options.actions ?? []]), { theme, appearance } = options, density = options.density ?? "default", renderer = options.renderer ?? "auto", enabled = () => typeof options.enabled === "function" ? options.enabled() : options.enabled ?? (Boolean(options.ship) || isUnlocked() || typeof location < "u" && ["localhost", "127.0.0.1", "[::1]"].includes(location.hostname)), storage = () => options.storage === void 0 ? browserStorage() : options.storage, persistMode = options.persist ?? "all", valueStorage = () => persistMode === "all" ? storage() : null, variantStorage = () => persistMode === "none" ? null : storage(), draw = options.random ?? Math.random, hostHistory = options.history, unsubscribeHistory, unsubscribeUnlock, listeners = /* @__PURE__ */ new Set, refreshes = 0, notify = () => {
     for (let cb of [...listeners])
       cb();
-  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), buildPresets = () => Object.freeze(Object.fromEntries([
+  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), pinnedOf, pinned = () => {
+    if (pinnedOf?.schema !== schema)
+      pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
+    return pinnedOf.keys;
+  }, unpinned = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    let out = { ...values };
+    for (let k of keys)
+      if (Object.hasOwn(locked, k))
+        out[k] = locked[k];
+    return Object.freeze(out);
+  }, presetPatch = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    return Object.fromEntries(Object.entries(values).filter(([k]) => !keys.has(k)));
+  }, buildPresets = () => Object.freeze(Object.fromEntries([
     ["default", locked],
     ...Object.entries(options.presets ?? {}).map(([id, patch]) => {
       if (id === "default" || id === "custom")
         throw Error(`Reserved preset id: ${id}`);
-      return [id, normalize(schema, { ...locked, ...patch })];
+      return [id, unpinned(normalize(schema, { ...locked, ...patch }))];
     })
   ])), presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
     let named = list.flatMap((p) => Object.keys(p.values).filter((k) => Object.hasOwn(schema, k))), covered = new Set((named.length ? named : Object.keys(schema).filter((k) => schema[k].group === group)).filter((k) => hasValue2(schema[k])));
@@ -700,7 +719,7 @@ function defineControls(id, input, options = {}) {
     else if (ref?.kind === "variant") {
       let found = list?.find((v) => v.id === ref.id);
       if (found)
-        out = normalize(schema, found.values);
+        out = unpinned(normalize(schema, found.values));
     }
     let groups = Object.entries(b.groups);
     if (groups.length) {
@@ -712,11 +731,10 @@ function defineControls(id, input, options = {}) {
     return baseCache = { base: b, schema, presets, groupPresets, variants: list, values }, values;
   }
   let covered = (key) => {
-    let b = activeBase();
-    if (b.preset)
+    let b = activeBase(), group = schema[key]?.group;
+    if (group !== void 0 && Object.hasOwn(b.groups, group))
       return !0;
-    let group = schema[key]?.group;
-    return group !== void 0 && Object.hasOwn(b.groups, group);
+    return b.preset !== null && !pinned().has(key);
   };
   function declaredShortcut(id) {
     let slash = id.indexOf("/"), key = slash < 0 ? id : id.slice(0, slash), field = Object.hasOwn(schema, key) ? schema[key] : void 0;
@@ -986,7 +1004,7 @@ function defineControls(id, input, options = {}) {
     listen(cb) {
       return readoutListeners.add(cb), () => readoutListeners.delete(cb);
     }
-  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, get, (v, variant, coalesce) => write(v, { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
+  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, () => unpinned(get()), (v, variant, coalesce) => write(presetPatch(v), { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
   function offBase(keys) {
     if (!hasBase())
       return !1;
@@ -1071,6 +1089,7 @@ function defineControls(id, input, options = {}) {
     groupFolded: options.groupFolded,
     sectionFolded: options.sectionFolded,
     presetLabel: (presetId) => options.presetLabels?.[presetId] ?? (presetId === "default" ? options.defaultLabel : void 0) ?? presetId,
+    isPinned: (key) => pinned().has(key),
     get,
     set,
     sync,
@@ -1345,9 +1364,12 @@ function defineControls(id, input, options = {}) {
     preset(id, presetOptions) {
       if (!Object.hasOwn(presets, id))
         throw Error(`Unknown preset: ${id}`);
-      write(presets[id], { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+      write(presetPatch(presets[id]), { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+    },
+    matchingPreset: () => {
+      let cur = unpinned(get());
+      return Object.keys(presets).find((id) => equal(cur, presets[id])) ?? "custom";
     },
-    matchingPreset: () => Object.keys(presets).find((id) => equal(get(), presets[id])) ?? "custom",
     get groupPresets() {
       return groupPresets;
     },
@@ -1378,11 +1400,11 @@ function defineControls(id, input, options = {}) {
     code: (format, values) => formatCode(values ?? get(), format),
     variants,
     attach(element, chip) {
-      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("ayb292zj"), import("./chunk-ayb292zj.js")).then((m) => m.attach);
+      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("75gbzbyd"), import("./chunk-75gbzbyd.js")).then((m) => m.attach);
       return live(load, (attach) => attach(controls, element, chip), (detach) => detach());
     },
     mount(container, mountOptions) {
-      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => (__preload("1qzffbpa"), import("./chunk-1qzffbpa.js")).then((m) => m.mountPanel);
+      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => (__preload("bnhzf1tj"), import("./chunk-bnhzf1tj.js")).then((m) => m.mountPanel);
       return live(load, (mountPanel) => {
         let panel = mountPanel(controls, container, mountOptions);
         return mountOptions?.onReady?.(panel), panel;
@@ -1674,6 +1696,7 @@ function createRemoteControls(id, descriptors, options = {}) {
     tunable: options.tunable,
     history: options.history,
     presets: options.presets,
+    pinned: options.pinned,
     groupPresets: options.groupPresets,
     onPreset: options.onPreset,
     actions: options.actions,

package/dist/index.js

@@ -460,6 +460,7 @@ var META_KEYS = [
   "folded",
   "sectionFolded",
   "tab",
+  "pinned",
   "subsection"
 ];
 function pickMeta(source, skip = []) {
@@ -471,7 +472,19 @@ function pickMeta(source, skip = []) {
   }
   return out;
 }
-var READOUT_KINDS = /* @__PURE__ */ new Set(["watch", "sparkline", "graph", "meter", "table", "log"]), isReadout = (field) => READOUT_KINDS.has(field.kind), hasValue = (field) => field.kind !== "action" && field.kind !== "toolbar" && !READOUT_KINDS.has(field.kind), SPRING = {
+var READOUT_KINDS = /* @__PURE__ */ new Set(["watch", "sparkline", "graph", "meter", "table", "log"]), isReadout = (field) => READOUT_KINDS.has(field.kind), hasValue = (field) => field.kind !== "action" && field.kind !== "toolbar" && !READOUT_KINDS.has(field.kind);
+function pinnedKeys(schema, groups = []) {
+  let byGroup = new Map(groups.map((g) => [g, !0]));
+  for (let f of Object.values(schema))
+    if (f.group !== void 0 && f.pinned !== void 0 && !byGroup.has(f.group))
+      byGroup.set(f.group, f.pinned);
+  let out = /* @__PURE__ */ new Set;
+  for (let [key, f] of Object.entries(schema))
+    if (f.group === void 0 ? f.pinned === !0 : byGroup.get(f.group) === !0)
+      out.add(key);
+  return out;
+}
+var SPRING = {
   duration: { min: 0.05, max: 2, step: 0.01 },
   bounce: { min: -0.5, max: 1, step: 0.01 }
 };
@@ -1612,12 +1625,30 @@ function defineControls(id, input, options = {}) {
   let schema = Object.freeze({ ...input }), locked = normalize(schema, {}), actions = Object.freeze([...options.actions ?? []]), { theme, appearance } = options, density = options.density ?? "default", renderer = options.renderer ?? "auto", enabled = () => (Boolean(options.ship) || isUnlocked()) && (typeof options.enabled === "function" ? options.enabled() : options.enabled ?? (Boolean(options.ship) || isUnlocked() || typeof location < "u" && ["localhost", "127.0.0.1", "[::1]"].includes(location.hostname))), storage = () => options.storage === void 0 ? browserStorage() : options.storage, persistMode = options.persist ?? "all", valueStorage = () => persistMode === "all" ? storage() : null, variantStorage = () => persistMode === "none" ? null : storage(), draw = options.random ?? Math.random, hostHistory = options.history, unsubscribeHistory, unsubscribeUnlock, listeners = /* @__PURE__ */ new Set, refreshes = 0, notify = () => {
     for (let cb of [...listeners])
       cb();
-  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), buildPresets = () => Object.freeze(Object.fromEntries([
+  }, mixed = /* @__PURE__ */ new Set, current = locked, read = !1, error = null, locks = /* @__PURE__ */ new Set, bindings = /* @__PURE__ */ new Map, comparing = null, landing = !1, echo = Math.max(0, options.echo ?? 0), grabbed = /* @__PURE__ */ new Set, changedAt = /* @__PURE__ */ new Map, sent = /* @__PURE__ */ new Map, pending = /* @__PURE__ */ new Map, echoTimer, now = () => typeof performance < "u" ? performance.now() : Date.now(), isHeld = (key) => grabbed.has(key) || echo > 0 && now() - (changedAt.get(key) ?? -1 / 0) < echo, NO_BASE = Object.freeze({ preset: null, groups: Object.freeze({}) }), base = NO_BASE, past = [], future = [], HISTORY = 100, stateKey = storageKey(id, "state"), pinnedOf, pinned = () => {
+    if (pinnedOf?.schema !== schema)
+      pinnedOf = { schema, keys: pinnedKeys(schema, options.pinned) };
+    return pinnedOf.keys;
+  }, unpinned = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    let out = { ...values };
+    for (let k of keys)
+      if (Object.hasOwn(locked, k))
+        out[k] = locked[k];
+    return Object.freeze(out);
+  }, presetPatch = (values) => {
+    let keys = pinned();
+    if (keys.size === 0)
+      return values;
+    return Object.fromEntries(Object.entries(values).filter(([k]) => !keys.has(k)));
+  }, buildPresets = () => Object.freeze(Object.fromEntries([
     ["default", locked],
     ...Object.entries(options.presets ?? {}).map(([id, patch]) => {
       if (id === "default" || id === "custom")
         throw Error(`Reserved preset id: ${id}`);
-      return [id, normalize(schema, { ...locked, ...patch })];
+      return [id, unpinned(normalize(schema, { ...locked, ...patch }))];
     })
   ])), presets = buildPresets(), buildGroupPresets = () => Object.freeze(Object.fromEntries(Object.entries(options.groupPresets ?? {}).map(([group, list]) => {
     let named = list.flatMap((p) => Object.keys(p.values).filter((k) => Object.hasOwn(schema, k))), covered = new Set((named.length ? named : Object.keys(schema).filter((k) => schema[k].group === group)).filter((k) => hasValue(schema[k])));
@@ -1718,7 +1749,7 @@ function defineControls(id, input, options = {}) {
     else if (ref?.kind === "variant") {
       let found = list?.find((v) => v.id === ref.id);
       if (found)
-        out = normalize(schema, found.values);
+        out = unpinned(normalize(schema, found.values));
     }
     let groups = Object.entries(b.groups);
     if (groups.length) {
@@ -1730,11 +1761,10 @@ function defineControls(id, input, options = {}) {
     return baseCache = { base: b, schema, presets, groupPresets, variants: list, values }, values;
   }
   let covered = (key) => {
-    let b = activeBase();
-    if (b.preset)
+    let b = activeBase(), group = schema[key]?.group;
+    if (group !== void 0 && Object.hasOwn(b.groups, group))
       return !0;
-    let group = schema[key]?.group;
-    return group !== void 0 && Object.hasOwn(b.groups, group);
+    return b.preset !== null && !pinned().has(key);
   };
   function declaredShortcut(id) {
     let slash = id.indexOf("/"), key = slash < 0 ? id : id.slice(0, slash), field = Object.hasOwn(schema, key) ? schema[key] : void 0;
@@ -2004,7 +2034,7 @@ function defineControls(id, input, options = {}) {
     listen(cb) {
       return readoutListeners.add(cb), () => readoutListeners.delete(cb);
     }
-  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, get, (v, variant, coalesce) => write(v, { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
+  }, variants = createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, () => unpinned(get()), (v, variant, coalesce) => write(presetPatch(v), { source: "variant", coalesce }, makeBase(Object.freeze({ kind: "variant", id: variant }), {})), notify, enabled), resettable = (keys) => (keys ?? fieldKeys()).filter((k) => valueField(k) && !blocked(k));
   function offBase(keys) {
     if (!hasBase())
       return !1;
@@ -2089,6 +2119,7 @@ function defineControls(id, input, options = {}) {
     groupFolded: options.groupFolded,
     sectionFolded: options.sectionFolded,
     presetLabel: (presetId) => options.presetLabels?.[presetId] ?? (presetId === "default" ? options.defaultLabel : void 0) ?? presetId,
+    isPinned: (key) => pinned().has(key),
     get,
     set,
     sync,
@@ -2363,9 +2394,12 @@ function defineControls(id, input, options = {}) {
     preset(id, presetOptions) {
       if (!Object.hasOwn(presets, id))
         throw Error(`Unknown preset: ${id}`);
-      write(presets[id], { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+      write(presetPatch(presets[id]), { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
+    },
+    matchingPreset: () => {
+      let cur = unpinned(get());
+      return Object.keys(presets).find((id) => equal(cur, presets[id])) ?? "custom";
     },
-    matchingPreset: () => Object.keys(presets).find((id) => equal(get(), presets[id])) ?? "custom",
     get groupPresets() {
       return groupPresets;
     },
@@ -2692,6 +2726,7 @@ function createRemoteControls(id, descriptors, options = {}) {
     tunable: options.tunable,
     history: options.history,
     presets: options.presets,
+    pinned: options.pinned,
     groupPresets: options.groupPresets,
     onPreset: options.onPreset,
     actions: options.actions,