@kitlangton/knobs 0.1.0 → 0.3.0

package/dist/dev/index.js

@@ -15,6 +15,7 @@ import {
   matchesCombo2,
   comboParts2,
   comboLabel2,
+  isTypingTarget,
   sampleGradient2,
   gradientCss2,
   sampleCurve2,
@@ -46,6 +47,7 @@ import {
   gradient2,
   curve2,
   toolbarShortcut2,
+  actionShortcut2,
   toolbar2,
   watch2,
   sparkline2,
@@ -71,8 +73,141 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-qtt698hp.js";
-__chunks(import.meta.url,["yfpdrfyw","ktsn42p7","e13znr7c","qtt698hp","kdewv0mt"],[["./index.js",3],["./chunk-ktsn42p7.js",3,4],["./chunk-e13znr7c.js",3,4],["./chunk-qtt698hp.js"],["./chunk-kdewv0mt.js",3]],0);
+} from "./chunk-7xgkerd2.js";
+__chunks(import.meta.url,["8qt6yygv","jx1ktap3","v8ssbcbk","7xgkerd2","pmkvb9ep"],[["./index.js",3],["./chunk-jx1ktap3.js",3,4],["./chunk-v8ssbcbk.js",3,4],["./chunk-7xgkerd2.js"],["./chunk-pmkvb9ep.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) {
+  let r = () => Math.max(0, Math.min(1 - Number.EPSILON, random()));
+  switch (field.kind) {
+    case "knob":
+      return lattice(field.min, field.max, field.step, r());
+    case "choice":
+      return field.options[Math.floor(r() * field.options.length)];
+    case "toggle":
+      return r() >= 0.5;
+    case "spring":
+      return { duration: between(0.2, 0.9, r()), bounce: between(0, 0.45, r()) };
+    case "color": {
+      let l = between(0.5, 0.85, r()), h = between(0, 360, r());
+      return { l, c: between(0.25, 0.85, r()) * maxChroma(l, h), h };
+    }
+    case "point":
+      return {
+        x: lattice(field.min.x, field.max.x, field.step.x, r()),
+        y: lattice(field.min.y, field.max.y, field.step.y, r())
+      };
+    case "easing": {
+      let curves = Object.values(EASINGS2);
+      return curves[Math.floor(r() * curves.length)];
+    }
+    case "vec": {
+      let axis = () => lattice(field.min, field.max, field.step, r());
+      return field.axes === 3 ? { x: axis(), y: axis(), z: axis() } : { x: axis(), y: axis() };
+    }
+    case "range":
+      return [
+        lattice(field.min, field.max, field.step, r()),
+        lattice(field.min, field.max, field.step, r())
+      ];
+    case "angle": {
+      let top = field.wrap ? field.max - field.step : field.max;
+      return lattice(field.min, Math.max(field.min, top), field.step, r());
+    }
+    case "seed":
+      return lattice(field.min, field.max, 1, r());
+    case "keybind":
+      return field.value;
+    case "gradient":
+      return randomStops(field.value.length, r);
+    case "curve":
+      return randomPoints(field.range, r);
+  }
+}
+var AROUND = {
+  spread: 0.35,
+  switch: 0.3,
+  hue: 20,
+  lightness: 0.06,
+  chroma: 0.15
+};
+function near(v, min, max, step, r, reach = max - min) {
+  let span = max - min;
+  if (!(span > 0))
+    return v;
+  let width = Math.min(span, reach * AROUND.spread), lo = Math.max(min, Math.min(max - width, v - width / 2)), top = Math.floor(span / step + 0.000000001), a = Math.max(0, Math.ceil((lo - min) / step - 0.000000001)), b = Math.min(top, Math.floor((lo + width - min) / step + 0.000000001)), n = b < a ? Math.round((v - min) / step) : a + Math.floor(r * (b - a + 1));
+  return Number((min + Math.max(0, Math.min(top, n)) * step).toPrecision(14));
+}
+var unit = (r) => r * 2 - 1;
+function around(field, base, random) {
+  let r = () => Math.max(0, Math.min(1 - Number.EPSILON, random()));
+  switch (field.kind) {
+    case "knob":
+      return near(base, field.min, field.max, field.step, r());
+    case "choice": {
+      if (field.options.length < 2 || r() >= AROUND.switch)
+        return base;
+      let rest = field.options.filter((o) => o !== base);
+      return rest[Math.floor(r() * rest.length)];
+    }
+    case "toggle":
+      return r() < AROUND.switch ? !base : base;
+    case "spring": {
+      let s = base, d = SPRING2.duration, b = SPRING2.bounce;
+      return {
+        duration: near(s.duration, d.min, d.max, d.step, r(), 0.7),
+        bounce: near(s.bounce, b.min, b.max, b.step, r(), 0.45)
+      };
+    }
+    case "color": {
+      let c = parseColor2(base) ?? { l: 0.7, c: 0.1, h: 0 }, max0 = maxChroma(c.l, c.h), rel = max0 > 0.0001 ? Math.min(1, Math.max(0, c.c / max0)) : 0.5, h = (c.h + unit(r()) * AROUND.hue + 360) % 360, l = Math.min(1, Math.max(0, c.l + unit(r()) * AROUND.lightness)), k = Math.min(1, Math.max(0, rel + unit(r()) * AROUND.chroma));
+      return { l, c: k * maxChroma(l, h), h };
+    }
+    case "point": {
+      let p = base;
+      return {
+        x: near(p.x, field.min.x, field.max.x, field.step.x, r()),
+        y: near(p.y, field.min.y, field.max.y, field.step.y, r())
+      };
+    }
+    case "easing":
+      return base.map((v, i) => {
+        let [lo, hi] = i % 2 === 0 ? [0, 1] : EASING_Y;
+        return near(v, lo, hi, 0.001, r());
+      });
+    case "vec": {
+      let v = base, axis = (n) => near(n, field.min, field.max, field.step, r());
+      return field.axes === 3 ? { x: axis(v.x), y: axis(v.y), z: axis(v.z ?? 0) } : { x: axis(v.x), y: axis(v.y) };
+    }
+    case "range": {
+      let [a, b] = base;
+      return [
+        near(a, field.min, field.max, field.step, r()),
+        near(b, field.min, field.max, field.step, r())
+      ];
+    }
+    case "angle": {
+      let v = base;
+      if (!field.wrap)
+        return near(v, field.min, field.max, field.step, r());
+      let span = field.max - field.min;
+      return v + unit(r()) * span * (AROUND.spread / 2);
+    }
+    case "gradient":
+      return mutateStops(base, r, [AROUND.hue / 2, AROUND.hue], [AROUND.lightness / 2, AROUND.lightness]);
+    case "curve":
+      return mutatePoints(base, field.range, r, [
+        AROUND.spread / 2,
+        AROUND.spread
+      ]);
+    case "seed":
+    case "keybind":
+      return pick(field, random);
+  }
+}
+function randomValues(schema, random = Math.random) {
+  return normalize(schema, Object.fromEntries(Object.entries(schema).flatMap(([key, field]) => hasValue2(field) ? [[key, pick(field, random)]] : [])));
+}
 // src/core/code.ts
 var literal = (value) => Array.isArray(value) ? `[${value.map(literal).join(", ")}]` : typeof value === "object" && value !== null ? `{ ${Object.entries(value).map(([k, v]) => `${k}: ${literal(v)}`).join(", ")} }` : JSON.stringify(value);
 function formatCode(values, format = "ts") {
@@ -96,12 +231,12 @@ var MUTATE = {
   chroma: 0.02,
   lightness: [0.015, 0.045],
   bezier: [0.03, 0.06]
-}, between = (min, max, r) => min + (max - min) * r, signed = (random) => random() < 0.5 ? -1 : 1;
+}, between2 = (min, max, r) => min + (max - min) * r, signed = (random) => random() < 0.5 ? -1 : 1;
 function nudge(v, min, max, step, random, reach = max - min) {
   let span = max - min;
   if (!(span > 0))
     return v;
-  let sign = signed(random), by = reach * between(MUTATE.min, MUTATE.max, random()), next = v + sign * by;
+  let sign = signed(random), by = reach * between2(MUTATE.min, MUTATE.max, random()), next = v + sign * by;
   if (next > max || next < min)
     next = v - sign * by;
   let top = Math.floor(span / step + 0.000000001), at = (n) => Number((min + n * step).toPrecision(14)), steps = Math.max(0, Math.min(top, Math.round((next - min) / step)));
@@ -130,12 +265,12 @@ function shift(field, value, random) {
       };
     }
     case "color": {
-      let c = parseColor2(value) ?? { l: 0.7, c: 0.1, h: 0 }, max0 = maxChroma(c.l, c.h), rel0 = max0 > 0.0001 ? Math.min(1, Math.max(0, c.c / max0)) : 0.5, h = (c.h + signed(random) * between(MUTATE.hue[0], MUTATE.hue[1], random()) + 360) % 360, l = Math.min(1, Math.max(0, c.l + signed(random) * between(MUTATE.lightness[0], MUTATE.lightness[1], random())));
+      let c = parseColor2(value) ?? { l: 0.7, c: 0.1, h: 0 }, max0 = maxChroma(c.l, c.h), rel0 = max0 > 0.0001 ? Math.min(1, Math.max(0, c.c / max0)) : 0.5, h = (c.h + signed(random) * between2(MUTATE.hue[0], MUTATE.hue[1], random()) + 360) % 360, l = Math.min(1, Math.max(0, c.l + signed(random) * between2(MUTATE.lightness[0], MUTATE.lightness[1], random())));
       return { l, c: nudge(rel0, 0, 1, 0.01, random) * maxChroma(l, h), h };
     }
     case "easing":
       return value.map((v, i) => {
-        let [lo, hi] = i % 2 === 0 ? [0, 1] : EASING_Y, next = v + signed(random) * between(MUTATE.bezier[0], MUTATE.bezier[1], random());
+        let [lo, hi] = i % 2 === 0 ? [0, 1] : EASING_Y, next = v + signed(random) * between2(MUTATE.bezier[0], MUTATE.bezier[1], random());
         return Math.min(hi, Math.max(lo, next));
       });
     case "choice": {
@@ -161,7 +296,7 @@ function shift(field, value, random) {
       if (!field.wrap)
         return nudge(v, field.min, field.max, field.step, random);
       let span = field.max - field.min;
-      return v + signed(random) * span * between(MUTATE.min, MUTATE.max, random());
+      return v + signed(random) * span * between2(MUTATE.min, MUTATE.max, random());
     }
     case "seed":
       return nudge(value, field.min, field.max, 1, random);
@@ -203,57 +338,141 @@ function mutateValues(schema, current, keys = valueKeys(schema), random = Math.r
   return out;
 }
 
-// src/core/random.ts
-var lattice = (min, max, step, r) => min + Math.floor(r * (Math.floor((max - min) / step + 0.000000001) + 1)) * step, between2 = (min, max, r) => min + (max - min) * r;
-function pick(field, random) {
-  let r = () => Math.max(0, Math.min(1 - Number.EPSILON, random()));
-  switch (field.kind) {
-    case "knob":
-      return lattice(field.min, field.max, field.step, r());
-    case "choice":
-      return field.options[Math.floor(r() * field.options.length)];
-    case "toggle":
-      return r() >= 0.5;
-    case "spring":
-      return { duration: between2(0.2, 0.9, r()), bounce: between2(0, 0.45, r()) };
-    case "color": {
-      let l = between2(0.5, 0.85, r()), h = between2(0, 360, r());
-      return { l, c: between2(0.25, 0.85, r()) * maxChroma(l, h), h };
-    }
-    case "point":
-      return {
-        x: lattice(field.min.x, field.max.x, field.step.x, r()),
-        y: lattice(field.min.y, field.max.y, field.step.y, r())
-      };
-    case "easing": {
-      let curves = Object.values(EASINGS2);
-      return curves[Math.floor(r() * curves.length)];
-    }
-    case "vec": {
-      let axis = () => lattice(field.min, field.max, field.step, r());
-      return field.axes === 3 ? { x: axis(), y: axis(), z: axis() } : { x: axis(), y: axis() };
-    }
-    case "range":
-      return [
-        lattice(field.min, field.max, field.step, r()),
-        lattice(field.min, field.max, field.step, r())
-      ];
-    case "angle": {
-      let top = field.wrap ? field.max - field.step : field.max;
-      return lattice(field.min, Math.max(field.min, top), field.step, r());
-    }
-    case "seed":
-      return lattice(field.min, field.max, 1, r());
-    case "keybind":
-      return field.value;
-    case "gradient":
-      return randomStops(field.value.length, r);
-    case "curve":
-      return randomPoints(field.range, r);
-  }
+// src/core/unlock.ts
+var KONAMI = Object.freeze([
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+  "b",
+  "a"
+]), GATE = Symbol.for("knobs.unlock.v1"), gate = () => {
+  let holder = globalThis;
+  return holder[GATE] ??= { unlocked: !1, listeners: /* @__PURE__ */ new Set };
+}, isUnlocked = () => globalThis[GATE]?.unlocked ?? !1;
+function onUnlock(listener) {
+  let listeners = gate().listeners;
+  return listeners.add(listener), () => void listeners.delete(listener);
 }
-function randomValues(schema, random = Math.random) {
-  return normalize(schema, Object.fromEntries(Object.entries(schema).flatMap(([key, field]) => hasValue2(field) ? [[key, pick(field, random)]] : [])));
+var UNLOCK_KEY = "knobs:unlocked";
+function sequenceKeys(sequence) {
+  return typeof sequence === "string" ? [...sequence] : [...sequence];
+}
+var fold = (key) => key.length === 1 ? key.toLowerCase() : key;
+function sequenceMatcher(sequence, gap = 1500) {
+  let want = sequenceKeys(sequence).map(fold), typed = [], last = -1 / 0;
+  return (key, at) => {
+    if (!want.length)
+      return !1;
+    if (at - last > gap)
+      typed = [];
+    if (last = at, typed.push(fold(key)), typed.length > want.length)
+      typed.shift();
+    if (typed.length === want.length && typed.every((k, i) => k === want[i]))
+      return typed = [], !0;
+    return !1;
+  };
+}
+function queryUnlock(search, name) {
+  let params = new URLSearchParams(search);
+  if (!params.has(name))
+    return;
+  return !["off", "0", "false", "lock", "no"].includes((params.get(name) ?? "").toLowerCase());
+}
+function resolveUnlock(input) {
+  let unlocked = input.query ?? (input.persist && input.stored);
+  return { unlocked, remember: input.persist && input.query !== void 0 ? unlocked : void 0 };
+}
+function inCorner(x, y, width, height, corner, size = 48) {
+  let left = corner.endsWith("left") ? x <= size : x >= width - size, top = corner.startsWith("top") ? y <= size : y >= height - size;
+  return left && top;
+}
+function tapCounter(count = 3, within = 500) {
+  let taps = 0, last = -1 / 0;
+  return (at) => {
+    if (taps = at - last <= within ? taps + 1 : 1, last = at, taps < count)
+      return !1;
+    return taps = 0, !0;
+  };
+}
+var readStored = () => {
+  try {
+    return globalThis.localStorage?.getItem(UNLOCK_KEY) === "1";
+  } catch {
+    return !1;
+  }
+}, writeStored = (on) => {
+  try {
+    if (on)
+      globalThis.localStorage?.setItem(UNLOCK_KEY, "1");
+    else
+      globalThis.localStorage?.removeItem(UNLOCK_KEY);
+  } catch {}
+};
+function unlock(options) {
+  let g = gate();
+  g.panel = options.panel;
+  let persist = options.persist !== !1, query = options.query === void 0 ? "knobs" : options.query, sequence = options.sequence === void 0 ? "knobs" : options.sequence, corner = options.corner === void 0 ? "top-right" : options.corner, win = typeof window > "u" ? void 0 : window, announce = (text) => {
+    (g.module ? Promise.resolve(g.module) : g.panel?.())?.then((m) => {
+      if (g.module = m, g.unlocked === (text === "knobs unlocked"))
+        m.status?.(text);
+    }).catch(() => {});
+  }, set = (on, say) => {
+    if (persist)
+      writeStored(on);
+    if (g.unlocked === on)
+      return;
+    g.unlocked = on;
+    for (let listener of [...g.listeners])
+      listener();
+    if (say)
+      announce(on ? "knobs unlocked" : "knobs locked");
+  }, start = resolveUnlock({
+    query: query && win ? queryUnlock(win.location.search, query) : void 0,
+    stored: persist && readStored(),
+    persist
+  });
+  if (start.remember !== void 0)
+    writeStored(start.remember);
+  set(start.unlocked || g.unlocked, !1);
+  let offs = [];
+  if (win && sequence !== !1 && sequenceKeys(sequence).length) {
+    let typed = sequenceMatcher(sequence), onKey = (event) => {
+      if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing || event.repeat)
+        return;
+      if (event.key === "Shift" || event.key === "CapsLock" || isTypingTarget(event.target))
+        return;
+      if (typed(event.key, event.timeStamp || performance.now()))
+        set(!g.unlocked, !0);
+    };
+    win.addEventListener("keydown", onKey, !0), offs.push(() => win.removeEventListener("keydown", onKey, !0));
+  }
+  if (win && corner) {
+    let tapped = tapCounter(), onTap = (event) => {
+      if (!event.isPrimary)
+        return;
+      if (!inCorner(event.clientX, event.clientY, win.innerWidth, win.innerHeight, corner))
+        return void (tapped = tapCounter());
+      if (tapped(event.timeStamp || performance.now()))
+        set(!g.unlocked, !0);
+    };
+    win.addEventListener("pointerdown", onTap, { capture: !0, passive: !0 }), offs.push(() => win.removeEventListener("pointerdown", onTap, !0));
+  }
+  return {
+    get unlocked() {
+      return g.unlocked;
+    },
+    unlock: () => set(!0, !0),
+    lock: () => set(!1, !0),
+    dispose() {
+      for (let off of offs.splice(0))
+        off();
+    }
+  };
 }
 
 // src/core/variants.ts
@@ -312,12 +531,28 @@ function createVariants(schema, id, key, storage, get, set, notify, enabled) {
       });
       return persist([...list, variant]), variant;
     },
-    load(id) {
+    load(id, options) {
       read();
       let variant = list.find((v) => v.id === id);
       if (!variant)
         throw Error(`Unknown variant: ${id}`);
-      set(variant.values);
+      set(variant.values, id, Boolean(options?.coalesce));
+    },
+    rename(id, name) {
+      if (read(), name.length > 100)
+        throw Error("Variant names must be at most 100 characters.");
+      let at = list.findIndex((v) => v.id === id);
+      if (at < 0)
+        throw Error(`Unknown variant: ${id}`);
+      let was = list[at], trimmed = name.trim();
+      if ((was.name ?? "") === trimmed)
+        return;
+      let next = [...list];
+      next[at] = Object.freeze({
+        id: was.id,
+        ...trimmed ? { name: trimmed } : {},
+        values: was.values
+      }), persist(next);
     },
     remove(id) {
       read(), persist(list.filter((v) => v.id !== id));
@@ -354,10 +589,10 @@ function sameField(a, b) {
 function defineControls(id, input, options = {}) {
   if (!id.trim())
     throw Error("Controls need a stable, nonempty id.");
-  let schema = Object.freeze({ ...input }), locked = normalize(schema, {}), actions = Object.freeze([...options.actions ?? []]), theme = options.theme ?? "dark", density = options.density ?? "default", renderer = options.renderer ?? "auto", enabled = () => typeof options.enabled === "function" ? options.enabled() : options.enabled ?? (Boolean(options.ship) || 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, listeners = /* @__PURE__ */ new Set, refreshes = 0, notify = () => {
+  let schema = Object.freeze({ ...input }), locked = normalize(schema, {}), actions = Object.freeze([...options.actions ?? []]), theme = options.theme ?? "dark", 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, 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, 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"), buildPresets = () => Object.freeze(Object.fromEntries([
     ["default", locked],
     ...Object.entries(options.presets ?? {}).map(([id, patch]) => {
       if (id === "default" || id === "custom")
@@ -397,6 +632,9 @@ function defineControls(id, input, options = {}) {
           if (data?.version === 1) {
             if (current = normalize(schema, data.values), Array.isArray(data.locks))
               locks = new Set(data.locks.filter((k) => typeof k === "string" && Object.hasOwn(schema, k)));
+            if (data.bindings && typeof data.bindings === "object")
+              bindings = new Map(Object.entries(data.bindings).flatMap(([id, combo]) => typeof combo === "string" && bindable(id) ? [[id, normalizeCombo2(combo)]] : []));
+            base = readBase(data.base);
           }
         }
       } catch (cause) {
@@ -415,7 +653,9 @@ function defineControls(id, input, options = {}) {
       valueStorage()?.setItem(stateKey, JSON.stringify({
         version: 1,
         values: current,
-        ...locks.size ? { locks: [...locks] } : {}
+        ...locks.size ? { locks: [...locks] } : {},
+        ...bindings.size ? { bindings: Object.fromEntries(bindings) } : {},
+        ...base !== NO_BASE ? { base } : {}
       })), error = null;
     } catch (cause) {
       error = String(cause);
@@ -424,6 +664,74 @@ function defineControls(id, input, options = {}) {
   function commit(next) {
     current = next, persist(), notify();
   }
+  let makeBase = (preset, groups) => preset === null && Object.keys(groups).length === 0 ? NO_BASE : Object.freeze({ preset, groups: Object.freeze({ ...groups }) }), sameBase = (a, b) => a === b || a.preset?.kind === b.preset?.kind && a.preset?.id === b.preset?.id && Object.keys(a.groups).length === Object.keys(b.groups).length && Object.entries(a.groups).every(([g, i]) => b.groups[g] === i);
+  function validBase(b) {
+    let preset = b.preset?.kind === "preset" && !(b.preset.id !== "default" && Object.hasOwn(presets, b.preset.id)) ? null : b.preset, groups = Object.fromEntries(Object.entries(b.groups).filter(([g, i]) => groupPresets[g]?.[i] !== void 0)), next = makeBase(preset, groups);
+    return sameBase(next, b) ? b : next;
+  }
+  function readBase(raw) {
+    if (!raw || typeof raw !== "object")
+      return NO_BASE;
+    let { preset, groups } = raw, ref = preset && typeof preset === "object" && (preset.kind === "preset" || preset.kind === "variant") && typeof preset.id === "string" ? Object.freeze({ kind: preset.kind, id: preset.id }) : null, byGroup = groups && typeof groups === "object" ? Object.fromEntries(Object.entries(groups).filter((e) => Number.isInteger(e[1]))) : {};
+    return validBase(makeBase(ref, byGroup));
+  }
+  function activeBase() {
+    load();
+    let ref = base.preset;
+    if (ref?.kind === "variant" && !variants.list().some((v) => v.id === ref.id))
+      base = makeBase(null, base.groups);
+    return base;
+  }
+  let hasBase = () => activeBase() !== NO_BASE, baseCache;
+  function baseValues() {
+    if (!enabled())
+      return locked;
+    let b = activeBase();
+    if (b === NO_BASE)
+      return locked;
+    let list = b.preset?.kind === "variant" ? variants.list() : null, c = baseCache;
+    if (c && c.base === b && c.schema === schema && c.presets === presets && c.groupPresets === groupPresets && c.variants === list)
+      return c.values;
+    let out = locked, ref = b.preset;
+    if (ref?.kind === "preset" && Object.hasOwn(presets, ref.id))
+      out = presets[ref.id];
+    else if (ref?.kind === "variant") {
+      let found = list?.find((v) => v.id === ref.id);
+      if (found)
+        out = normalize(schema, found.values);
+    }
+    let groups = Object.entries(b.groups);
+    if (groups.length) {
+      out = { ...out };
+      for (let [g, i] of groups)
+        Object.assign(out, groupPresets[g]?.[i]?.values);
+    }
+    let values = Object.freeze(out);
+    return baseCache = { base: b, schema, presets, groupPresets, variants: list, values }, values;
+  }
+  let covered = (key) => {
+    let b = activeBase();
+    if (b.preset)
+      return !0;
+    let group = schema[key]?.group;
+    return group !== void 0 && Object.hasOwn(b.groups, group);
+  };
+  function declaredShortcut(id) {
+    let slash = id.indexOf("/"), key = slash < 0 ? id : id.slice(0, slash), field = Object.hasOwn(schema, key) ? schema[key] : void 0;
+    if (field?.kind === "action" && slash < 0)
+      return { found: !0, ...field.shortcut ? { combo: field.shortcut } : {} };
+    if (field?.kind === "toolbar" && slash >= 0) {
+      let item = field.items.find((i) => (i.id ?? i.label) === id.slice(slash + 1));
+      if (!item)
+        return { found: !1 };
+      let key = toolbarShortcut2(item)?.key;
+      return { found: !0, ...key ? { combo: normalizeCombo2(key) } : {} };
+    }
+    return { found: !1 };
+  }
+  function bindable(id) {
+    return declaredShortcut(id).found;
+  }
   let fieldKeys = () => valueKeys(schema), valueField = (k) => {
     let field = Object.hasOwn(schema, k) ? schema[k] : void 0;
     return field && hasValue2(field) ? field : void 0;
@@ -486,10 +794,13 @@ function defineControls(id, input, options = {}) {
       pending.delete(k);
   };
   function set(patch, setOpts) {
+    write(patch, setOpts);
+  }
+  function write(patch, setOpts, nextBase) {
     if (!enabled())
       return;
     release();
-    let previous = load(), forced = mixed.size ? Object.keys(patch).filter((k) => mixed.has(k) && valueField(k)) : [];
+    let previous = load(), was = activeBase(), moves = nextBase !== void 0 && !sameBase(nextBase, was), forced = mixed.size ? Object.keys(patch).filter((k) => mixed.has(k) && valueField(k)) : [];
     for (let k of forced)
       mixed.delete(k);
     let applied = applyPatch(previous, previous, patch) ?? {
@@ -499,9 +810,10 @@ function defineControls(id, input, options = {}) {
     for (let k of forced)
       if (!(k in diff))
         diff[k] = next[k];
-    if (Object.keys(diff).length === 0)
+    let changed = Object.keys(diff).length > 0;
+    if (!changed && !moves)
       return;
-    if (next === previous) {
+    if (next === previous && !moves) {
       notify(), options.onChange?.(diff, next, {
         source: setOpts?.source ?? "local",
         ...setOpts?.key ? { key: setOpts.key } : {}
@@ -509,16 +821,27 @@ function defineControls(id, input, options = {}) {
       return;
     }
     if (!setOpts?.coalesce || past.length === 0) {
-      if (past.push(previous), past.length > HISTORY)
+      if (past.push({ values: previous, base: was }), past.length > HISTORY)
         past.shift();
     }
-    future.length = 0, markChanged(diff), commit(next), options.onChange?.(diff, next, {
+    if (future.length = 0, moves)
+      base = nextBase;
+    if (markChanged(diff), commit(next), !changed)
+      return;
+    options.onChange?.(diff, next, {
       source: setOpts?.source ?? "local",
       ...setOpts?.coalesce ? { coalesce: !0 } : {},
       ...setOpts?.key ? { key: setOpts.key } : {},
-      ...setOpts?.group ? { group: setOpts.group } : {}
+      ...setOpts?.group ? { group: setOpts.group } : {},
+      ...setOpts?.base ? { base: !0 } : {}
     });
   }
+  function step(to, source) {
+    let before = load(), left = { values: before, base: activeBase() }, diff = changes(before, to.values);
+    if (base = validBase(to.base), markChanged(diff), commit(to.values), Object.keys(diff).length)
+      options.onChange?.(diff, to.values, { source });
+    return left;
+  }
   function place(values, replace, land) {
     let previous = load(), applied = applyPatch(replace ? locked : previous, previous, values);
     if (!applied)
@@ -626,7 +949,7 @@ function defineControls(id, input, options = {}) {
       schema = Object.freeze({ ...next });
     if (changed) {
       let previous = load();
-      schema = Object.freeze({ ...next }), locked = normalize(schema, {}), presets = buildPresets(), groupPresets = buildGroupPresets();
+      schema = Object.freeze({ ...next }), locked = normalize(schema, {}), presets = buildPresets(), groupPresets = buildGroupPresets(), base = validBase(base);
       for (let k of [...locks])
         if (!valueField(k))
           locks.delete(k);
@@ -661,7 +984,60 @@ function defineControls(id, input, options = {}) {
     listen(cb) {
       return readoutListeners.add(cb), () => readoutListeners.delete(cb);
     }
-  }, controls = {
+  }, 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));
+  function offBase(keys) {
+    if (!hasBase())
+      return !1;
+    let cur = load(), b = baseValues();
+    return keys.some((k) => !same(cur[k], b[k]));
+  }
+  function toBase(keys, meta) {
+    let b = baseValues(), patch = Object.fromEntries(keys.map((k) => [k, b[k]]));
+    write(patch, { source: "reset", base: !0, ...meta });
+  }
+  function toDefaults(keys, nextBase) {
+    let patch = {};
+    for (let k of keys)
+      patch[k] = locked[k];
+    write(patch, { source: "reset" }, nextBase);
+    let resetKeys = options[RESET_KEYS];
+    if (resetKeys)
+      resetKeys(Object.keys(patch));
+    else
+      for (let key of Object.keys(patch))
+        options.onReset?.({ key });
+  }
+  function live(load, make, unmake) {
+    let disposed = !1, loading = !1, handle, sync = () => {
+      if (disposed)
+        return;
+      if (!enabled()) {
+        if (handle !== void 0)
+          unmake(handle);
+        handle = void 0;
+        return;
+      }
+      if (handle !== void 0 || loading)
+        return;
+      let pending = load();
+      if (!pending)
+        return;
+      loading = !0, pending.then((module) => {
+        if (loading = !1, !disposed && enabled() && handle === void 0)
+          handle = make(module);
+      }).catch((cause) => {
+        loading = !1, error = String(cause), notify();
+      });
+    };
+    sync();
+    let off = onUnlock(sync);
+    return () => {
+      if (disposed = !0, off(), handle !== void 0)
+        unmake(handle);
+      handle = void 0;
+    };
+  }
+  let controls = {
     id,
     get schema() {
       return schema;
@@ -680,9 +1056,10 @@ function defineControls(id, input, options = {}) {
     marks: options.marks !== !1,
     chip: Object.freeze({
       ...options.chip,
-      reveal: options.chip?.reveal ?? (devBuild() ? "hover" : "shortcut"),
+      reveal: options.chip?.reveal ?? (devBuild() || !options.ship ? "hover" : "shortcut"),
       shortcut: options.chip?.shortcut ?? "Alt+Shift+D"
     }),
+    toggleKey: options.toggleKey ?? (options.ship ? !1 : "`"),
     groupPresetDisplay: options.groupPresetDisplay ?? "auto",
     groupLabel: (group) => options.groupLabels?.[group] ?? fieldLabels().group.get(group),
     sectionLabel: (section) => options.sectionLabels?.[section] ?? fieldLabels().section.get(section),
@@ -763,8 +1140,7 @@ function defineControls(id, input, options = {}) {
       let previous = past.pop();
       if (!previous)
         return;
-      let before = load(), diff = changes(before, previous);
-      future.push(before), markChanged(diff), commit(previous), options.onChange?.(diff, previous, { source: "undo" });
+      future.push(step(previous, "undo"));
     },
     redo() {
       if (release(), hostHistory)
@@ -772,37 +1148,30 @@ function defineControls(id, input, options = {}) {
       let next = future.pop();
       if (!next)
         return;
-      let before = load(), diff = changes(before, next);
-      past.push(before), markChanged(diff), commit(next), options.onChange?.(diff, next, { source: "redo" });
+      past.push(step(next, "redo"));
     },
     getServerSnapshot: () => locked,
     subscribe(cb) {
       if (listeners.add(cb), hostHistory?.subscribe && !unsubscribeHistory)
         unsubscribeHistory = hostHistory.subscribe(notify);
-      return () => {
-        if (listeners.delete(cb), !listeners.size && unsubscribeHistory)
-          unsubscribeHistory(), unsubscribeHistory = void 0;
+      return unsubscribeUnlock ??= onUnlock(notify), () => {
+        if (listeners.delete(cb), listeners.size)
+          return;
+        unsubscribeHistory?.(), unsubscribeHistory = void 0, unsubscribeUnlock?.(), unsubscribeUnlock = void 0;
       };
     },
     reset(keys) {
       if (!enabled())
         return;
+      let open = resettable(keys);
+      if (offBase(open))
+        return toBase(open, {});
       let skipped = fieldKeys().some(blocked);
       if (!keys && !skipped) {
-        set(locked, { source: "reset" }), options.onReset?.({});
+        write(locked, { source: "reset" }, NO_BASE), options.onReset?.({});
         return;
       }
-      let patch = {};
-      for (let k of keys ?? fieldKeys())
-        if (valueField(k) && !blocked(k))
-          patch[k] = locked[k];
-      set(patch, { source: "reset" });
-      let resetKeys = options[RESET_KEYS];
-      if (resetKeys)
-        resetKeys(Object.keys(patch));
-      else
-        for (let key of Object.keys(patch))
-          options.onReset?.({ key });
+      toDefaults(open, keys ? void 0 : NO_BASE);
     },
     resetKey(key) {
       if (!enabled())
@@ -811,24 +1180,40 @@ function defineControls(id, input, options = {}) {
         throw Error(`Unknown control key: ${key}`);
       if (blocked(key))
         return;
+      if (offBase([key]))
+        return toBase([key], { key });
       set({ [key]: locked[key] }, { source: "reset", key }), options.onReset?.({ key });
     },
     resetGroup(group) {
       if (!enabled())
         return;
-      let keys = Object.keys(schema).filter((k) => schema[k].group === group && hasValue2(schema[k])), open = keys.filter((k) => !blocked(k));
+      let keys = Object.keys(schema).filter((k) => schema[k].group === group && hasValue2(schema[k])), open = keys.filter((k) => !blocked(k)), b = activeBase(), index = b.groups[group];
+      if (offBase(open)) {
+        toBase(open, { group });
+        let preset = index === void 0 ? void 0 : groupPresets[group]?.[index];
+        if (preset && index !== void 0)
+          options.onPreset?.({ group, index, name: preset.name });
+        return;
+      }
+      let { [group]: _, ...others } = b.groups, forget = index === void 0 ? void 0 : makeBase(b.preset, others);
       if (open.length < keys.length)
-        return controls.reset(open);
+        return toDefaults(open, forget);
       let patch = {};
       for (let k of keys)
         patch[k] = locked[k];
-      set(patch, { source: "reset", group }), options.onReset?.({ group });
+      write(patch, { source: "reset", group }, forget), options.onReset?.({ group });
     },
     isModified(key) {
-      let cur = get();
+      let cur = get(), b = baseValues();
       if (key !== void 0)
-        return !same(cur[key], locked[key]);
-      return !equal(cur, locked);
+        return !same(cur[key], b[key]);
+      return !equal(cur, b);
+    },
+    canReset(keys) {
+      if (!enabled())
+        return !1;
+      let cur = get(), b = baseValues();
+      return resettable(keys).some((k) => !same(cur[k], b[k]) || !same(cur[k], locked[k])) || !keys && hasBase();
     },
     modified() {
       let cur = get(), out = {};
@@ -843,8 +1228,17 @@ function defineControls(id, input, options = {}) {
       let chosen = pool(keys);
       if (chosen.length === 0)
         return;
-      let sub = Object.fromEntries(chosen.map((k) => [k, schema[k]]));
-      set(randomValues(sub, draw), { source: "randomize" });
+      if (!hasBase()) {
+        let sub = Object.fromEntries(chosen.map((k) => [k, schema[k]]));
+        set(randomValues(sub, draw), { source: "randomize" });
+        return;
+      }
+      let b = baseValues(), patch = {};
+      for (let k of chosen) {
+        let field = valueField(k);
+        patch[k] = covered(k) ? around(field, b[k], draw) : pick(field, draw);
+      }
+      set(patch, { source: "randomize" });
     },
     mutate(keys) {
       if (!enabled())
@@ -880,6 +1274,33 @@ function defineControls(id, input, options = {}) {
         return !1;
       return load(), locks.has(key);
     },
+    shortcut(key, item) {
+      let id = item === void 0 ? key : `${key}/${item}`, declared = declaredShortcut(id);
+      if (!declared.found)
+        return;
+      if (enabled())
+        load();
+      return (enabled() ? bindings.get(id) : void 0) ?? declared.combo;
+    },
+    rebind(key, combo, item) {
+      let id = item === void 0 ? key : `${key}/${item}`, declared = declaredShortcut(id);
+      if (!declared.found)
+        throw Error(`Not an action or toolbar button: ${id}`);
+      if (!enabled())
+        return;
+      load();
+      let next = combo === void 0 ? void 0 : normalizeCombo2(combo);
+      if (combo !== void 0 && combo.trim() && !next)
+        throw Error(`Not a key combination: ${combo}`);
+      let was = bindings.get(id);
+      if (next === void 0 || next === (declared.combo ?? ""))
+        bindings.delete(id);
+      else
+        bindings.set(id, next);
+      if (bindings.get(id) === was)
+        return;
+      persist(), notify();
+    },
     canRoll(key) {
       if (!enabled())
         return !1;
@@ -913,15 +1334,15 @@ function defineControls(id, input, options = {}) {
         return;
       if (!hold)
         return release();
-      let before = past.at(-1), now = load();
+      let before = past.at(-1)?.values, now = load();
       if (comparing || !before || equal(before, now))
         return;
       comparing = before, options.onChange?.(changes(now, before), before, { source: "compare" }), notify();
     },
-    preset(id) {
+    preset(id, presetOptions) {
       if (!Object.hasOwn(presets, id))
         throw Error(`Unknown preset: ${id}`);
-      set(presets[id], { source: "preset" });
+      write(presets[id], { source: "preset", coalesce: presetOptions?.coalesce }, id === "default" ? NO_BASE : makeBase(Object.freeze({ kind: "preset", id }), {}));
     },
     matchingPreset: () => Object.keys(presets).find((id) => equal(get(), presets[id])) ?? "custom",
     get groupPresets() {
@@ -933,41 +1354,36 @@ function defineControls(id, input, options = {}) {
         throw Error(`Unknown preset ${index + 1} for group ${group}`);
       if (!enabled())
         return;
-      set(preset.values, { source: "preset", group, coalesce: presetOptions?.coalesce }), options.onPreset?.({ group, index, name: preset.name });
+      let b = activeBase();
+      write(preset.values, { source: "preset", group, coalesce: presetOptions?.coalesce }, makeBase(b.preset, { ...b.groups, [group]: index })), options.onPreset?.({ group, index, name: preset.name });
+    },
+    activePreset() {
+      if (!enabled())
+        return null;
+      return activeBase().preset;
+    },
+    activeGroupPreset(group) {
+      if (!enabled())
+        return -1;
+      return activeBase().groups[group] ?? -1;
     },
+    baseValues,
     matchingGroupPreset(group) {
       let cur = get();
       return (groupPresets[group] ?? []).findIndex((p) => Object.entries(p.values).every(([k, v]) => same(cur[k], v)));
     },
     code: (format, values) => formatCode(values ?? get(), format),
-    variants: createVariants(() => schema, id, storageKey(id, "variants"), variantStorage, get, (v) => set(v, { source: "variant" }), notify, enabled),
+    variants,
     attach(element, chip) {
-      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("e13znr7c"), import("./chunk-e13znr7c.js")).then((m) => m.attach);
-      if (!load || !enabled())
-        return () => {};
-      let disposed = !1, detach;
-      return load().then((attach) => {
-        if (!disposed && enabled())
-          detach = attach(controls, element, chip);
-      }).catch((cause) => {
-        error = String(cause), notify();
-      }), () => {
-        disposed = !0, detach?.();
-      };
+      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("v8ssbcbk"), import("./chunk-v8ssbcbk.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("ktsn42p7"), import("./chunk-ktsn42p7.js")).then((m) => m.mountPanel);
-      if (!load || !enabled())
-        return () => {};
-      let disposed = !1, panel;
-      return load().then((mountPanel) => {
-        if (!disposed && enabled())
-          panel = mountPanel(controls, container, mountOptions), mountOptions?.onReady?.(panel);
-      }).catch((cause) => {
-        error = String(cause), notify();
-      }), () => {
-        disposed = !0, panel?.dispose();
-      };
+      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => (__preload("jx1ktap3"), import("./chunk-jx1ktap3.js")).then((m) => m.mountPanel);
+      return live(load, (mountPanel) => {
+        let panel = mountPanel(controls, container, mountOptions);
+        return mountOptions?.onReady?.(panel), panel;
+      }, (panel) => panel.dispose());
     }
   };
   return Object.freeze(controls);
@@ -992,7 +1408,11 @@ var optionId = (o) => typeof o === "string" ? o : String(o.id ?? o.value ?? o.la
 function descriptorToField(d) {
   let meta = pickMeta(d);
   if (d.kind === "action")
-    return action2(d.label, meta);
+    return action2(d.label, {
+      ...meta,
+      ...d.global ? { global: !0 } : {},
+      ...d.rebind ? { rebind: !0 } : {}
+    });
   if (readoutDescriptor(d))
     return readoutField(d);
   if (d.kind === "toolbar")
@@ -1243,6 +1663,7 @@ function createRemoteControls(id, descriptors, options = {}) {
   }, controls = defineControls(id, fromDescriptors(frozenDescriptors), {
     enabled: options.enabled ?? !0,
     ship: options.ship,
+    toggleKey: options.toggleKey,
     echo: options.echo ?? ECHO_MS,
     storage: options.storage ?? null,
     persist: options.persist,
@@ -1268,9 +1689,11 @@ function createRemoteControls(id, descriptors, options = {}) {
     groupFolded: options.groupFolded,
     sectionFolded: options.sectionFolded,
     onChange(patch, _values, meta) {
-      if (meta.source === "remote" || meta.source === "reset")
+      if (meta.source === "remote")
+        return;
+      if (meta.source === "reset" && !meta.base)
         return;
-      if (meta.source === "preset" && meta.group !== void 0 && options.onPreset)
+      if ((meta.source === "preset" || meta.base && meta.group !== void 0 && controls.activeGroupPreset(meta.group) >= 0) && meta.group !== void 0 && options.onPreset)
         return;
       let changes = [];
       for (let [key, val] of Object.entries(patch)) {
@@ -1331,10 +1754,13 @@ function fromSettings(groups, home = {}) {
   return { descriptors, values };
 }
 export {
+  AROUND,
   CURVE_SHAPES2 as CURVE_SHAPES,
   EASINGS2 as EASINGS,
+  KONAMI,
   SPRING2 as SPRING,
   action2 as action,
+  actionShortcut2 as actionShortcut,
   angle2 as angle,
   bezierCss2 as bezierCss,
   bezierPoint2 as bezierPoint,
@@ -1381,6 +1807,7 @@ export {
   toggle2 as toggle,
   toolbar2 as toolbar,
   toolbarShortcut2 as toolbarShortcut,
+  unlock,
   urlFlag2 as urlFlag,
   vec22 as vec2,
   vec32 as vec3,