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

package/dist/react.js

@@ -22,12 +22,299 @@ import {
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
+// src/core/spring.ts
+class Spring {
+  x;
+  omega;
+  zeta;
+  eps;
+  v = 0;
+  target;
+  next;
+  constructor(x, omega = 24, zeta = 0.86, eps = 0.005) {
+    this.x = x;
+    this.omega = omega;
+    this.zeta = zeta;
+    this.eps = eps;
+    this.target = x;
+  }
+  set(target, delay = 0) {
+    if (delay > 0) {
+      if (target !== (this.next?.target ?? this.target))
+        this.next = { target, at: performance.now() + delay };
+      return this;
+    }
+    this.next = undefined;
+    this.target = target;
+    return this;
+  }
+  snap(x) {
+    this.next = undefined;
+    this.x = this.target = x;
+    this.v = 0;
+    return this;
+  }
+  step(dt) {
+    if (this.next && performance.now() >= this.next.at) {
+      this.target = this.next.target;
+      this.next = undefined;
+    }
+    if (this.x === this.target && this.v === 0)
+      return this.x;
+    const clampedDt = Math.min(dt, 0.1);
+    const h = 1 / 480;
+    for (let t = 0;t < clampedDt; t += h) {
+      const k = Math.min(h, clampedDt - t);
+      const a = -this.omega * this.omega * (this.x - this.target) - 2 * this.zeta * this.omega * this.v;
+      this.v += a * k;
+      this.x += this.v * k;
+    }
+    if (this.resting) {
+      this.x = this.target;
+      this.v = 0;
+    }
+    return this.x;
+  }
+  get resting() {
+    return !this.next && Math.abs(this.x - this.target) < this.eps && Math.abs(this.v) < this.eps * 4;
+  }
+}
+function springMotion({ duration, bounce }) {
+  return {
+    omega: 2 * Math.PI / Math.max(0.01, duration),
+    zeta: bounce >= 0 ? 1 - bounce : 1 / (1 + bounce)
+  };
+}
+function springEasing(omega, zeta) {
+  const s = new Spring(0, omega, zeta).set(1);
+  const points = ["0"];
+  const dt = 1 / 60;
+  let t = 0;
+  while (t < 4 && !(Math.abs(s.x - 1) < 0.002 && Math.abs(s.v) < 0.05)) {
+    s.step(dt);
+    t += dt;
+    points.push(String(Math.round(s.x * 1000) / 1000));
+  }
+  points[points.length - 1] = "1";
+  return { easing: `linear(${points.join(",")})`, ms: Math.round(t * 1000) };
+}
+function springCss(value) {
+  const { omega, zeta } = springMotion(value);
+  const { easing, ms } = springEasing(omega, zeta);
+  return { easing, duration: ms };
+}
+
+// src/core/theme.ts
+var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
+function presetCss(preset) {
+  if (!/^[\w-]+$/.test(preset.name))
+    throw new Error(`Invalid preset name: ${preset.name}`);
+  const at = `.knobs-root[data-preset="${preset.name}"]`;
+  const light = preset.light ?? {};
+  const decls = Object.entries(preset.dark).map(([k, dark]) => {
+    const l = light[k];
+    return l === undefined || String(l) === String(dark) ? `${property(k)}:${dark}` : `${property(k)}:light-dark(${l},${dark})`;
+  });
+  for (const [k, l] of Object.entries(light))
+    if (!(k in preset.dark) && k !== "color-scheme")
+      decls.push(`${property(k)}:${l}`);
+  return `${at}{${decls.join(";")}}${(preset.css ?? "").replaceAll("&", at)}`;
+}
+var glide = /* @__PURE__ */ springCss({ duration: 0.185, bounce: 0.14 });
+var problemsPreset = {
+  name: "problems",
+  dark: {
+    bg: "#161618",
+    surface: "rgba(255,255,255,.055)",
+    "surface-hi": "rgba(255,255,255,.11)",
+    line: "rgba(255,255,255,.075)",
+    "line-hi": "rgba(255,255,255,.12)",
+    text: "#f5f5f7",
+    label: "rgba(235,235,245,.62)",
+    dim: "rgba(235,235,245,.36)",
+    accent: "#0091ff",
+    modified: "#0091ff",
+    "seg-bg": "rgba(120,120,128,.16)",
+    "seg-active": "rgba(120,120,128,.24)",
+    "toggle-track": "rgba(120,120,128,.32)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    font: 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif',
+    mono: '"Kit SF Mono",ui-monospace,Menlo,monospace',
+    "font-size": "13px",
+    "label-weight": 500,
+    row: "34px",
+    radius: "8px",
+    "panel-radius": "12px",
+    pad: "0px",
+    inset: "10px",
+    gap: "4px",
+    "row-gap": "4px",
+    glass: 0,
+    glow: 0,
+    blur: 0.6,
+    "hover-in": 0,
+    "hover-out": 100,
+    "handle-rest": 0.55,
+    handle: "var(--k-text)",
+    "handle-inset": "7.5px",
+    "fill-base": "transparent",
+    "fill-rest-mix": "24%",
+    "fill-hover-mix": "36%",
+    "fill-active-mix": "36%",
+    chrome: 0,
+    "group-transform": "none",
+    "value-font": "var(--k-mono)",
+    "unit-gap": "0px",
+    "unit-color": "currentColor",
+    "readout-mark": 1,
+    "group-size": "12px",
+    "group-color": "rgba(235,235,245,.62)",
+    "group-inset": "0px",
+    "group-tracking": "-.01em",
+    "group-divider": "rgba(255,255,255,.075)",
+    "group-divider-gap": "8px",
+    "curve-inset": "0px",
+    "curve-guide": "dashed",
+    "curve-dot": 0,
+    spring: "0.185 0.14",
+    "fill-ease": glide.easing,
+    "fill-ms": glide.duration
+  },
+  light: {
+    bg: "#fff",
+    surface: "rgba(0,0,0,.045)",
+    "surface-hi": "rgba(0,0,0,.09)",
+    line: "rgba(0,0,0,.07)",
+    "line-hi": "rgba(0,0,0,.11)",
+    text: "#000",
+    label: "rgba(60,60,67,.66)",
+    dim: "rgba(60,60,67,.38)",
+    accent: "#0088ff",
+    modified: "#0088ff",
+    "seg-bg": "rgba(120,120,128,.11)",
+    "seg-active": "#fff",
+    "toggle-track": "rgba(120,120,128,.2)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    "group-color": "rgba(60,60,67,.66)",
+    "group-divider": "rgba(0,0,0,.07)"
+  }
+};
+
+// src/core/appearance.ts
+var MODES = {
+  dark: "dark",
+  light: "light",
+  auto: "system"
+};
+function resolveLook(options = {}, base) {
+  const t = options.theme;
+  const mode = typeof t === "string" ? MODES[t] : undefined;
+  const theme = typeof t === "object" ? t : base?.theme;
+  const preset = options.preset ?? base?.preset;
+  return {
+    ...theme ? { theme } : {},
+    appearance: options.appearance ?? mode ?? base?.appearance ?? "inherit",
+    ...preset ? { preset } : {}
+  };
+}
+var themes = new Map;
+var themeSelector = (name) => `:where(.knobs-root)[data-knobs-theme="${name}"]`;
+function upsertStyle(doc, key, value, content) {
+  const existing = doc.querySelector(`style[${key}="${value}"]`);
+  if (existing) {
+    if (existing.textContent !== content)
+      existing.textContent = content;
+    return;
+  }
+  const style = doc.createElement("style");
+  style.setAttribute(key, value);
+  style.textContent = content;
+  doc.head.append(style);
+}
+function injectTheme(doc, theme) {
+  themes.set(theme.name, theme);
+  upsertStyle(doc, "data-knobs-theme-css", theme.name, theme.css({ selector: themeSelector(theme.name) }));
+}
+var presets = new Map;
+function injectPreset(doc, preset) {
+  presets.set(preset.name, preset);
+  upsertStyle(doc, "data-knobs-preset", preset.name, presetCss(preset));
+}
+var setAttr = (el, name, value) => {
+  if (value === undefined)
+    el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value)
+    el.setAttribute(name, value);
+};
+function applyLook(el, look) {
+  const doc = el.ownerDocument;
+  if (look.theme)
+    injectTheme(doc, look.theme);
+  if (look.preset)
+    injectPreset(doc, look.preset);
+  setAttr(el, "data-knobs-theme", look.theme?.name);
+  setAttr(el, "data-preset", look.preset?.name);
+  setAttr(el, "data-appearance", look.appearance === "inherit" ? undefined : look.appearance);
+  if (look.appearance === "inherit")
+    followPage(el);
+  else
+    clearInherited(el);
+}
+var clearInherited = (el) => {
+  el.style.removeProperty("color-scheme");
+  el.style.removeProperty("--_k-light");
+};
+function resolveInherited(el) {
+  const parent = el.parentElement;
+  const win = el.ownerDocument.defaultView;
+  if (!parent || !win || el.hasAttribute("data-appearance"))
+    return;
+  if (parent.closest(".knobs-root"))
+    return clearInherited(el);
+  const scheme = win.getComputedStyle(parent).colorScheme.trim();
+  const dark = /\bdark\b/.test(scheme);
+  const light = /\blight\b/.test(scheme);
+  if (!dark && !light)
+    return clearInherited(el);
+  const isLight = dark && light ? win.matchMedia?.("(prefers-color-scheme: light)").matches ?? false : light;
+  el.style.setProperty("color-scheme", "inherit");
+  el.style.setProperty("--_k-light", isLight ? "1" : "0");
+}
+var watched = new WeakSet;
+function followPage(el) {
+  const doc = el.ownerDocument;
+  const win = doc.defaultView;
+  if (!win)
+    return;
+  const run = () => resolveInherited(el);
+  if (el.isConnected)
+    run();
+  queueMicrotask(run);
+  win.requestAnimationFrame?.(run);
+  if (watched.has(doc))
+    return;
+  watched.add(doc);
+  const all = () => {
+    for (const root of doc.querySelectorAll(".knobs-root:not([data-appearance])"))
+      resolveInherited(root);
+  };
+  const observer = new MutationObserver(all);
+  const attributeFilter = ["class", "data-theme", "data-appearance"];
+  observer.observe(doc.documentElement, { attributes: true, attributeFilter });
+  if (doc.body)
+    observer.observe(doc.body, { attributes: true, attributeFilter });
+  win.matchMedia?.("(prefers-color-scheme: light)").addEventListener?.("change", all);
+}
+
 // src/core/adapter.ts
-function syncPanelLook(host, controls, theme, density) {
+var panelLook = (controls, look = {}) => resolveLook(look, resolveLook({ theme: controls.theme, appearance: controls.appearance }));
+function syncPanelLook(host, controls, look = {}, density) {
   const panel = host?.firstElementChild;
   if (!panel)
     return;
-  panel.dataset.theme = theme ?? controls.theme;
+  applyLook(panel, panelLook(controls, look));
   panel.dataset.density = density ?? controls.density;
 }
 function syncPanelValues(controls, descriptors, values, land = false) {
@@ -43,6 +330,7 @@ function mountPanelAdapter(host, controls, getProps) {
   return controls.mount(host, {
     title: p.title,
     theme: p.theme,
+    appearance: p.appearance,
     density: p.density,
     renderer: p.renderer,
     variants: p.variants,
@@ -57,7 +345,7 @@ function mountPanelAdapter(host, controls, getProps) {
     onClose: p.onClose ? () => getProps().onClose?.() : undefined,
     onReady(panel) {
       const cur = getProps();
-      syncPanelLook(host, controls, cur.theme, cur.density);
+      syncPanelLook(host, controls, cur, cur.density);
       cur.onReady?.(panel);
     }
   });
@@ -89,7 +377,7 @@ function Knobs({
   return cloneElement(children, { ref });
 }
 function KnobsPanel(props) {
-  const { controls, descriptors, values, land, theme, density } = props;
+  const { controls, descriptors, values, land, theme, appearance, preset, density } = props;
   const enabled = useSyncExternalStore2(controls.subscribe, () => controls.enabled, () => false);
   const ref = useRef(null);
   const latest = useRef(props);
@@ -105,8 +393,8 @@ function KnobsPanel(props) {
     syncPanelValues(controls, descriptors, values, Boolean(land));
   }, [enabled, controls, descriptors, values, land]);
   useEffect(() => {
-    syncPanelLook(ref.current, controls, theme, density);
-  }, [controls, theme, density]);
+    syncPanelLook(ref.current, controls, { theme, appearance, preset }, density);
+  }, [controls, theme, appearance, preset, density]);
   if (!enabled)
     return null;
   return /* @__PURE__ */ jsx("div", {

package/dist/solid.js

@@ -179,12 +179,299 @@ import {
   untrack
 } from "solid-js";
 
+// src/core/spring.ts
+class Spring {
+  x;
+  omega;
+  zeta;
+  eps;
+  v = 0;
+  target;
+  next;
+  constructor(x, omega = 24, zeta = 0.86, eps = 0.005) {
+    this.x = x;
+    this.omega = omega;
+    this.zeta = zeta;
+    this.eps = eps;
+    this.target = x;
+  }
+  set(target, delay = 0) {
+    if (delay > 0) {
+      if (target !== (this.next?.target ?? this.target))
+        this.next = { target, at: performance.now() + delay };
+      return this;
+    }
+    this.next = undefined;
+    this.target = target;
+    return this;
+  }
+  snap(x) {
+    this.next = undefined;
+    this.x = this.target = x;
+    this.v = 0;
+    return this;
+  }
+  step(dt) {
+    if (this.next && performance.now() >= this.next.at) {
+      this.target = this.next.target;
+      this.next = undefined;
+    }
+    if (this.x === this.target && this.v === 0)
+      return this.x;
+    const clampedDt = Math.min(dt, 0.1);
+    const h = 1 / 480;
+    for (let t = 0;t < clampedDt; t += h) {
+      const k = Math.min(h, clampedDt - t);
+      const a = -this.omega * this.omega * (this.x - this.target) - 2 * this.zeta * this.omega * this.v;
+      this.v += a * k;
+      this.x += this.v * k;
+    }
+    if (this.resting) {
+      this.x = this.target;
+      this.v = 0;
+    }
+    return this.x;
+  }
+  get resting() {
+    return !this.next && Math.abs(this.x - this.target) < this.eps && Math.abs(this.v) < this.eps * 4;
+  }
+}
+function springMotion({ duration, bounce }) {
+  return {
+    omega: 2 * Math.PI / Math.max(0.01, duration),
+    zeta: bounce >= 0 ? 1 - bounce : 1 / (1 + bounce)
+  };
+}
+function springEasing(omega, zeta) {
+  const s = new Spring(0, omega, zeta).set(1);
+  const points = ["0"];
+  const dt = 1 / 60;
+  let t = 0;
+  while (t < 4 && !(Math.abs(s.x - 1) < 0.002 && Math.abs(s.v) < 0.05)) {
+    s.step(dt);
+    t += dt;
+    points.push(String(Math.round(s.x * 1000) / 1000));
+  }
+  points[points.length - 1] = "1";
+  return { easing: `linear(${points.join(",")})`, ms: Math.round(t * 1000) };
+}
+function springCss(value) {
+  const { omega, zeta } = springMotion(value);
+  const { easing, ms } = springEasing(omega, zeta);
+  return { easing, duration: ms };
+}
+
+// src/core/theme.ts
+var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
+function presetCss(preset) {
+  if (!/^[\w-]+$/.test(preset.name))
+    throw new Error(`Invalid preset name: ${preset.name}`);
+  const at = `.knobs-root[data-preset="${preset.name}"]`;
+  const light = preset.light ?? {};
+  const decls = Object.entries(preset.dark).map(([k, dark]) => {
+    const l = light[k];
+    return l === undefined || String(l) === String(dark) ? `${property(k)}:${dark}` : `${property(k)}:light-dark(${l},${dark})`;
+  });
+  for (const [k, l] of Object.entries(light))
+    if (!(k in preset.dark) && k !== "color-scheme")
+      decls.push(`${property(k)}:${l}`);
+  return `${at}{${decls.join(";")}}${(preset.css ?? "").replaceAll("&", at)}`;
+}
+var glide = /* @__PURE__ */ springCss({ duration: 0.185, bounce: 0.14 });
+var problemsPreset = {
+  name: "problems",
+  dark: {
+    bg: "#161618",
+    surface: "rgba(255,255,255,.055)",
+    "surface-hi": "rgba(255,255,255,.11)",
+    line: "rgba(255,255,255,.075)",
+    "line-hi": "rgba(255,255,255,.12)",
+    text: "#f5f5f7",
+    label: "rgba(235,235,245,.62)",
+    dim: "rgba(235,235,245,.36)",
+    accent: "#0091ff",
+    modified: "#0091ff",
+    "seg-bg": "rgba(120,120,128,.16)",
+    "seg-active": "rgba(120,120,128,.24)",
+    "toggle-track": "rgba(120,120,128,.32)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    font: 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif',
+    mono: '"Kit SF Mono",ui-monospace,Menlo,monospace',
+    "font-size": "13px",
+    "label-weight": 500,
+    row: "34px",
+    radius: "8px",
+    "panel-radius": "12px",
+    pad: "0px",
+    inset: "10px",
+    gap: "4px",
+    "row-gap": "4px",
+    glass: 0,
+    glow: 0,
+    blur: 0.6,
+    "hover-in": 0,
+    "hover-out": 100,
+    "handle-rest": 0.55,
+    handle: "var(--k-text)",
+    "handle-inset": "7.5px",
+    "fill-base": "transparent",
+    "fill-rest-mix": "24%",
+    "fill-hover-mix": "36%",
+    "fill-active-mix": "36%",
+    chrome: 0,
+    "group-transform": "none",
+    "value-font": "var(--k-mono)",
+    "unit-gap": "0px",
+    "unit-color": "currentColor",
+    "readout-mark": 1,
+    "group-size": "12px",
+    "group-color": "rgba(235,235,245,.62)",
+    "group-inset": "0px",
+    "group-tracking": "-.01em",
+    "group-divider": "rgba(255,255,255,.075)",
+    "group-divider-gap": "8px",
+    "curve-inset": "0px",
+    "curve-guide": "dashed",
+    "curve-dot": 0,
+    spring: "0.185 0.14",
+    "fill-ease": glide.easing,
+    "fill-ms": glide.duration
+  },
+  light: {
+    bg: "#fff",
+    surface: "rgba(0,0,0,.045)",
+    "surface-hi": "rgba(0,0,0,.09)",
+    line: "rgba(0,0,0,.07)",
+    "line-hi": "rgba(0,0,0,.11)",
+    text: "#000",
+    label: "rgba(60,60,67,.66)",
+    dim: "rgba(60,60,67,.38)",
+    accent: "#0088ff",
+    modified: "#0088ff",
+    "seg-bg": "rgba(120,120,128,.11)",
+    "seg-active": "#fff",
+    "toggle-track": "rgba(120,120,128,.2)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    "group-color": "rgba(60,60,67,.66)",
+    "group-divider": "rgba(0,0,0,.07)"
+  }
+};
+
+// src/core/appearance.ts
+var MODES = {
+  dark: "dark",
+  light: "light",
+  auto: "system"
+};
+function resolveLook(options = {}, base) {
+  const t = options.theme;
+  const mode = typeof t === "string" ? MODES[t] : undefined;
+  const theme = typeof t === "object" ? t : base?.theme;
+  const preset = options.preset ?? base?.preset;
+  return {
+    ...theme ? { theme } : {},
+    appearance: options.appearance ?? mode ?? base?.appearance ?? "inherit",
+    ...preset ? { preset } : {}
+  };
+}
+var themes = new Map;
+var themeSelector = (name) => `:where(.knobs-root)[data-knobs-theme="${name}"]`;
+function upsertStyle(doc, key, value, content) {
+  const existing = doc.querySelector(`style[${key}="${value}"]`);
+  if (existing) {
+    if (existing.textContent !== content)
+      existing.textContent = content;
+    return;
+  }
+  const style = doc.createElement("style");
+  style.setAttribute(key, value);
+  style.textContent = content;
+  doc.head.append(style);
+}
+function injectTheme(doc, theme) {
+  themes.set(theme.name, theme);
+  upsertStyle(doc, "data-knobs-theme-css", theme.name, theme.css({ selector: themeSelector(theme.name) }));
+}
+var presets = new Map;
+function injectPreset(doc, preset) {
+  presets.set(preset.name, preset);
+  upsertStyle(doc, "data-knobs-preset", preset.name, presetCss(preset));
+}
+var setAttr = (el, name, value) => {
+  if (value === undefined)
+    el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value)
+    el.setAttribute(name, value);
+};
+function applyLook(el, look) {
+  const doc = el.ownerDocument;
+  if (look.theme)
+    injectTheme(doc, look.theme);
+  if (look.preset)
+    injectPreset(doc, look.preset);
+  setAttr(el, "data-knobs-theme", look.theme?.name);
+  setAttr(el, "data-preset", look.preset?.name);
+  setAttr(el, "data-appearance", look.appearance === "inherit" ? undefined : look.appearance);
+  if (look.appearance === "inherit")
+    followPage(el);
+  else
+    clearInherited(el);
+}
+var clearInherited = (el) => {
+  el.style.removeProperty("color-scheme");
+  el.style.removeProperty("--_k-light");
+};
+function resolveInherited(el) {
+  const parent = el.parentElement;
+  const win = el.ownerDocument.defaultView;
+  if (!parent || !win || el.hasAttribute("data-appearance"))
+    return;
+  if (parent.closest(".knobs-root"))
+    return clearInherited(el);
+  const scheme = win.getComputedStyle(parent).colorScheme.trim();
+  const dark = /\bdark\b/.test(scheme);
+  const light = /\blight\b/.test(scheme);
+  if (!dark && !light)
+    return clearInherited(el);
+  const isLight = dark && light ? win.matchMedia?.("(prefers-color-scheme: light)").matches ?? false : light;
+  el.style.setProperty("color-scheme", "inherit");
+  el.style.setProperty("--_k-light", isLight ? "1" : "0");
+}
+var watched = new WeakSet;
+function followPage(el) {
+  const doc = el.ownerDocument;
+  const win = doc.defaultView;
+  if (!win)
+    return;
+  const run = () => resolveInherited(el);
+  if (el.isConnected)
+    run();
+  queueMicrotask(run);
+  win.requestAnimationFrame?.(run);
+  if (watched.has(doc))
+    return;
+  watched.add(doc);
+  const all = () => {
+    for (const root of doc.querySelectorAll(".knobs-root:not([data-appearance])"))
+      resolveInherited(root);
+  };
+  const observer = new MutationObserver(all);
+  const attributeFilter = ["class", "data-theme", "data-appearance"];
+  observer.observe(doc.documentElement, { attributes: true, attributeFilter });
+  if (doc.body)
+    observer.observe(doc.body, { attributes: true, attributeFilter });
+  win.matchMedia?.("(prefers-color-scheme: light)").addEventListener?.("change", all);
+}
+
 // src/core/adapter.ts
-function syncPanelLook(host, controls, theme, density) {
+var panelLook = (controls, look = {}) => resolveLook(look, resolveLook({ theme: controls.theme, appearance: controls.appearance }));
+function syncPanelLook(host, controls, look = {}, density) {
   const panel = host?.firstElementChild;
   if (!panel)
     return;
-  panel.dataset.theme = theme ?? controls.theme;
+  applyLook(panel, panelLook(controls, look));
   panel.dataset.density = density ?? controls.density;
 }
 function syncPanelValues(controls, descriptors, values, land = false) {
@@ -200,6 +487,7 @@ function mountPanelAdapter(host, controls, getProps) {
   return controls.mount(host, {
     title: p.title,
     theme: p.theme,
+    appearance: p.appearance,
     density: p.density,
     renderer: p.renderer,
     variants: p.variants,
@@ -214,7 +502,7 @@ function mountPanelAdapter(host, controls, getProps) {
     onClose: p.onClose ? () => getProps().onClose?.() : undefined,
     onReady(panel) {
       const cur = getProps();
-      syncPanelLook(host, controls, cur.theme, cur.density);
+      syncPanelLook(host, controls, cur, cur.density);
       cur.onReady?.(panel);
     }
   });
@@ -285,7 +573,7 @@ function KnobsPanel(props) {
     syncPanelValues(props.controls, props.descriptors, props.values, Boolean(props.land));
   });
   createEffect(() => {
-    syncPanelLook(host, props.controls, props.theme, props.density);
+    syncPanelLook(host, props.controls, { theme: props.theme, appearance: props.appearance, preset: props.preset }, props.density);
   });
   return host;
 }