@kitlangton/knobs 0.4.0-next.0 → 0.4.0-next.2

package/dist/dev/{chunk-t68smqkc.js → chunk-ayb292zj.js}

@@ -1,13 +1,15 @@
 import {
   __preload
-} from "./chunk-7xgkerd2.js";
+} from "./chunk-3ygqgy1x.js";
 import {
+  applyLook,
+  panelLook,
   iconSvg,
   readSession,
   writeSession,
   injectStyles,
   toggleLayer
-} from "./chunk-pmkvb9ep.js";
+} from "./chunk-8mabjeyk.js";
 
 // src/panel/attach.ts
 function attach(controls, element, options = {}) {
@@ -16,7 +18,7 @@ function attach(controls, element, options = {}) {
   let doc = element.ownerDocument, win = doc.defaultView;
   injectStyles(doc);
   let label = options.label ?? controls.chip.label, reveal = options.reveal ?? controls.chip.reveal, shortcut = options.shortcut ?? controls.chip.shortcut, chip = doc.createElement("button");
-  chip.className = "knobs-chip", chip.dataset.theme = controls.theme, chip.type = "button";
+  chip.className = "knobs-root knobs-chip", applyLook(chip, panelLook(controls)), chip.type = "button";
   let renderFace = (text) => {
     let face = [iconSvg(doc, "gear")];
     if (text) {
@@ -83,7 +85,7 @@ function attach(controls, element, options = {}) {
       return;
     loading = !0;
     try {
-      let { createPanel } = await (__preload("stbcgz1y"), import("./chunk-stbcgz1y.js"));
+      let { createPanel } = await (__preload("1qzffbpa"), import("./chunk-1qzffbpa.js"));
       if (disposed || !controls.enabled || panel)
         return;
       if (panel = createPanel(controls, element, close, { restored, chip }), remember)
@@ -104,7 +106,7 @@ function attach(controls, element, options = {}) {
     if (!revealed())
       close(!1);
     update();
-  }, offShortcut = reveal === "shortcut" ? listenForShortcut(win, shortcut, controls.theme) : void 0;
+  }, offShortcut = reveal === "shortcut" ? listenForShortcut(win, shortcut, panelLook(controls)) : void 0;
   win.addEventListener(MODE_EVENT, onMode);
   let toggled = controls.toggleKey ? toggleLayer(doc).register({
     id: controls.id,
@@ -137,7 +139,7 @@ function matchShortcut(shortcut) {
   let parts = shortcut.split("+").map((p) => p.trim().toLowerCase()), key = parts.pop() ?? "", has = (...names) => parts.some((p) => names.includes(p)), alt = has("alt", "option", "opt", "⌥"), shift = has("shift", "⇧"), ctrl = has("ctrl", "control", "⌃"), meta = has("meta", "cmd", "command", "⌘"), code = /^[a-z]$/.test(key) ? `Key${key.toUpperCase()}` : /^\d$/.test(key) ? `Digit${key}` : "";
   return (event) => event.altKey === alt && event.shiftKey === shift && event.ctrlKey === ctrl && event.metaKey === meta && (code ? event.code === code : event.key.toLowerCase() === key);
 }
-function listenForShortcut(win, shortcut, theme) {
+function listenForShortcut(win, shortcut, look) {
   let matches = matchShortcut(shortcut), onKey = (event) => {
     if (event.defaultPrevented || event.repeat || !matches(event))
       return;
@@ -148,16 +150,16 @@ function listenForShortcut(win, shortcut, theme) {
     try {
       win.sessionStorage.setItem(MODE_KEY, on ? "on" : "off");
     } catch {}
-    showStatus(win.document, on ? "knobs on" : "knobs off", theme), win.dispatchEvent(new CustomEvent(MODE_EVENT));
+    showStatus(win.document, on ? "knobs on" : "knobs off", look), win.dispatchEvent(new CustomEvent(MODE_EVENT));
   };
   return win.addEventListener("keydown", onKey, !0), () => win.removeEventListener("keydown", onKey, !0);
 }
 var statusTimers = /* @__PURE__ */ new WeakMap;
-function showStatus(doc, text, theme) {
-  let toast = doc.querySelector(".knobs-toast");
+function showStatus(doc, text, look) {
+  let toast = doc.querySelector(".knobs-notice");
   if (!toast)
-    toast = doc.createElement("div"), toast.className = "knobs-toast", toast.setAttribute("role", "status"), toast.dataset.shown = "false", doc.body.append(toast), toast.getBoundingClientRect();
-  toast.dataset.theme = theme, toast.textContent = text, toast.dataset.shown = "true", clearTimeout(statusTimers.get(doc));
+    toast = doc.createElement("div"), toast.className = "knobs-root knobs-notice", toast.setAttribute("role", "status"), toast.dataset.shown = "false", doc.body.append(toast), toast.getBoundingClientRect();
+  applyLook(toast, look), toast.textContent = text, toast.dataset.shown = "true", clearTimeout(statusTimers.get(doc));
   let el = toast;
   statusTimers.set(doc, setTimeout(() => el.dataset.shown = "false", 1200));
 }

package/dist/dev/index.js

@@ -63,6 +63,8 @@ import {
   equal,
   springMotion2,
   springCss2,
+  SPRINGS2,
+  reducedSpring2,
   RESHAPE,
   RESET_KEYS,
   REFRESHES,
@@ -73,8 +75,8 @@ import {
   browserStorage,
   urlFlag2,
   storageKey
-} from "./chunk-7xgkerd2.js";
-__chunks(import.meta.url,["freshcfm","stbcgz1y","t68smqkc","7xgkerd2","pmkvb9ep"],[["./index.js",3],["./chunk-stbcgz1y.js",3,4],["./chunk-t68smqkc.js",3,4],["./chunk-7xgkerd2.js"],["./chunk-pmkvb9ep.js",3]],0);
+} 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);
 // 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) {
@@ -589,7 +591,7 @@ 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) || 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 = () => {
+  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([
@@ -1050,6 +1052,7 @@ function defineControls(id, input, options = {}) {
     },
     actions,
     theme,
+    appearance,
     density,
     renderer,
     keys: options.keys,
@@ -1375,11 +1378,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("t68smqkc"), import("./chunk-t68smqkc.js")).then((m) => m.attach);
+      let load = options.ship ? () => options.ship().then((m) => m.attach) : () => (__preload("ayb292zj"), import("./chunk-ayb292zj.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("stbcgz1y"), import("./chunk-stbcgz1y.js")).then((m) => m.mountPanel);
+      let load = options.ship ? () => options.ship().then((m) => m.mountPanel) : () => (__preload("1qzffbpa"), import("./chunk-1qzffbpa.js")).then((m) => m.mountPanel);
       return live(load, (mountPanel) => {
         let panel = mountPanel(controls, container, mountOptions);
         return mountOptions?.onReady?.(panel), panel;
@@ -1759,6 +1762,7 @@ export {
   EASINGS2 as EASINGS,
   KONAMI,
   SPRING2 as SPRING,
+  SPRINGS2 as SPRINGS,
   action2 as action,
   actionShortcut2 as actionShortcut,
   angle2 as angle,
@@ -1796,6 +1800,7 @@ export {
   parseColor2 as parseColor,
   point2 as point,
   range2 as range,
+  reducedSpring2 as reducedSpring,
   sampleCurve2 as sampleCurve,
   sampleGradient2 as sampleGradient,
   seed2 as seed,

package/dist/index.js

@@ -933,6 +933,27 @@ function springCss(value) {
   let { omega, zeta } = springMotion(value), { easing, ms } = springEasing(omega, zeta);
   return { easing, duration: ms };
 }
+// src/core/motion.ts
+var SPRINGS = {
+  instant: { duration: 0.1, bounce: 0 },
+  snappy: { duration: 0.25, bounce: 0 },
+  default: { duration: 0.3, bounce: 0 },
+  calm: { duration: 0.4, bounce: 0 },
+  smooth: { duration: 0.45, bounce: 0 }
+}, FADE = { duration: 0.16, bounce: 0 };
+var MOTION = Object.fromEntries(Object.entries(SPRINGS).map(([name, spring]) => [name, springMotion(spring)]));
+function reducedSpring(spring, kind, reduced) {
+  if (!reduced)
+    return spring;
+  if (kind === "move")
+    return null;
+  return spring.duration <= FADE.duration ? spring : FADE;
+}
+var springLinear = (spring) => {
+  let { omega, zeta } = springMotion(spring);
+  return springEasing(omega, zeta);
+}, names = Object.keys(SPRINGS), linear2 = Object.fromEntries(names.map((n) => [n, springLinear(SPRINGS[n])])), SPRING_TOKEN = `${SPRINGS.default.duration} ${SPRINGS.default.bounce}`, DEFAULT_LINEAR = linear2.default, motionCss = `:where(:root,:host){${names.map((n) => `--_k-motion-${n}:${linear2[n].easing};--_k-motion-${n}-ms:${linear2[n].ms}`).join(";")}}
+@media(prefers-reduced-motion:reduce){:where(:root,:host){${names.map((n) => `--_k-motion-${n}-ms:0`).join(";")}}}`;
 // 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) {
@@ -1588,7 +1609,7 @@ 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 = () => (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 = () => {
+  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([
@@ -2049,6 +2070,7 @@ function defineControls(id, input, options = {}) {
     },
     actions,
     theme,
+    appearance,
     density,
     renderer,
     keys: options.keys,
@@ -2758,6 +2780,7 @@ export {
   EASINGS,
   KONAMI,
   SPRING,
+  SPRINGS,
   action,
   actionShortcut,
   angle,
@@ -2795,6 +2818,7 @@ export {
   parseColor,
   point,
   range,
+  reducedSpring,
   sampleCurve,
   sampleGradient,
   seed,