@multiplatform.one/theme 7.83.1 → 7.83.2

package/dist/cjs/theme/devtools/ThemeDevtoolsPanel.cjs

@@ -0,0 +1,1350 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ThemeDevtoolsPanel_exports = {};
+__export(ThemeDevtoolsPanel_exports, {
+  ThemeDevtoolsPanel: () => ThemeDevtoolsPanel
+});
+module.exports = __toCommonJS(ThemeDevtoolsPanel_exports);
+var import_react = require("react");
+var import_platform = require("@multiplatform.one/platform");
+var import_store = require("@multiplatform.one/store");
+var import_useTheme = require("../useTheme.cjs");
+var import_knobs = require("../knobs.cjs");
+var import_shared = require("../shared.cjs");
+var import_scaleInputs = require("../scale/scaleInputs.cjs");
+var import_animationOptions = require("./animationOptions.cjs");
+var import_ColorLineVisualizer = require("./ColorLineVisualizer.cjs");
+var import_buildSnapshot = require("./buildSnapshot.cjs");
+var import_knobIcons = require("./knobIcons.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const tanstackDevtoolsSettings = "tanstack_devtools_settings";
+const pinnedKnobsStorageKey = "ts-theme-pinned";
+const expandedKnobsStorageKey = "ts-theme-expanded";
+const stateDisplayLabels = {
+  hover: "hover",
+  press: "press",
+  focus: "focus",
+  focusVisible: "focusV"
+};
+const knobKeys = ["fillStyle", "borderRadius", "cornerSmoothing", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight", "animation", "fieldLabelPlacement", "requiredMarking", "tableZebra", "bulkBarPlacement", "selectAllScope", "timestampStyle", "disabledStyle", "formAutofocus"];
+const stateKnobKeys = ["fillStyle", "borderRadius", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight"];
+const designProfiles = {
+  Bootstrap: {
+    fillStyle: "filled",
+    borderRadius: "small",
+    borderWidth: "medium",
+    elevation: "none",
+    textAccent: "high",
+    headingFont: "sans-serif",
+    bodyFont: "sans-serif",
+    fontWeight: "regular",
+    animation: "quick",
+    color: "blue"
+  },
+  "Material UI": {
+    fillStyle: "filled",
+    borderRadius: "large",
+    borderWidth: "none",
+    elevation: "small",
+    textAccent: "high",
+    headingFont: "sans-serif",
+    bodyFont: "sans-serif",
+    fontWeight: "bold",
+    animation: "medium",
+    color: "purple",
+    "hover.elevation": "medium"
+  },
+  "GTK4 / Adwaita": {
+    fillStyle: "filled",
+    borderRadius: "small",
+    borderWidth: "small",
+    elevation: "none",
+    textAccent: "high",
+    headingFont: "sans-serif",
+    bodyFont: "sans-serif",
+    fontWeight: "regular",
+    animation: "quick",
+    color: "gray"
+  },
+  "Fluent UI": {
+    fillStyle: "filled",
+    borderRadius: "small",
+    borderWidth: "small",
+    elevation: "small",
+    textAccent: "high",
+    headingFont: "sans-serif",
+    bodyFont: "sans-serif",
+    fontWeight: "regular",
+    animation: "quick",
+    color: "blue",
+    "hover.elevation": "small"
+  }
+};
+const profileNames = ["", ...Object.keys(designProfiles)];
+function formatPresetOption(name) {
+  if (name === "") return "custom";
+  const scale = (0, import_shared.getPreset)(name)?.scale;
+  const control = scale?.control ?? import_scaleInputs.defaultScaleInputs.control;
+  const type = scale?.type ?? import_scaleInputs.defaultScaleInputs.type;
+  return `${name} \xB7 ${control}/${type}`;
+}
+function createStyles(isDark) {
+  return {
+    panel: {
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      // Not the host page's tracking, which follows the app's bodyFont knob.
+      letterSpacing: "normal",
+      fontSize: 13,
+      color: isDark ? "#e8e8e8" : "#1a1a1a",
+      padding: 12,
+      display: "flex",
+      flexDirection: "column",
+      gap: 12,
+      height: "100%",
+      overflowY: "auto",
+      background: "transparent"
+    },
+    knobsRow: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+      alignContent: "flex-start",
+      gap: 8
+    },
+    card: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      padding: "6px 10px",
+      borderRadius: 6,
+      border: isDark ? "1px solid #333" : "1px solid #e0e0e0",
+      background: isDark ? "#1e1e1e" : "#fafafa",
+      minWidth: 140
+    },
+    label: {
+      fontSize: 11,
+      fontWeight: 500,
+      color: isDark ? "#888" : "#777",
+      whiteSpace: "nowrap",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em"
+    },
+    select: {
+      padding: "3px 6px",
+      borderRadius: 4,
+      border: isDark ? "1px solid #444" : "1px solid #ccc",
+      background: isDark ? "#2a2a2a" : "#fff",
+      color: isDark ? "#e8e8e8" : "#1a1a1a",
+      cursor: "pointer",
+      fontSize: 13,
+      fontFamily: "inherit",
+      outline: "none",
+      width: "100%"
+    },
+    toggleRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: 6
+    },
+    toggle: active => ({
+      width: 36,
+      height: 20,
+      borderRadius: 10,
+      background: active ? "#7c6cff" : isDark ? "#444" : "#ccc",
+      position: "relative",
+      cursor: "pointer",
+      border: "none",
+      padding: 0,
+      transition: "background 0.2s"
+    }),
+    toggleKnob: active => ({
+      width: 16,
+      height: 16,
+      borderRadius: 8,
+      background: "#fff",
+      position: "absolute",
+      top: 2,
+      left: active ? 18 : 2,
+      transition: "left 0.2s"
+    }),
+    iconBtn: active => ({
+      width: 30,
+      height: 30,
+      borderRadius: 6,
+      border: active ? `1.5px solid ${isDark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.35)"}` : `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+      background: active ? isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.06)" : "transparent",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      transition: "all 0.15s ease",
+      outline: "none"
+    }),
+    iconRow: {
+      display: "flex",
+      gap: 2,
+      justifyContent: "flex-end"
+    },
+    resetBtn: {
+      padding: "4px 10px",
+      borderRadius: 4,
+      border: isDark ? "1px solid #555" : "1px solid #ccc",
+      background: isDark ? "#2a2a2a" : "#f5f5f5",
+      color: isDark ? "#e8e8e8" : "#1a1a1a",
+      cursor: "pointer",
+      fontSize: 11,
+      fontFamily: "inherit",
+      fontWeight: 500,
+      transition: "all 0.15s",
+      whiteSpace: "nowrap"
+    }
+  };
+}
+function PinCheckbox({
+  pinned,
+  onToggle,
+  isDark
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("label", {
+    title: pinned ? "Pinned \u2014 random won't change this" : "Pin to protect from random",
+    style: {
+      position: "absolute",
+      top: 3,
+      right: 3,
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      zIndex: 1,
+      opacity: pinned ? 1 : 0,
+      transition: "opacity 0.15s"
+    },
+    className: "pin-checkbox",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+      type: "checkbox",
+      checked: pinned,
+      onChange: onToggle,
+      style: {
+        width: 10,
+        height: 10,
+        margin: 0,
+        cursor: "pointer",
+        accentColor: isDark ? "#e8e8e8" : "#1a1a1a"
+      }
+    })
+  });
+}
+function Dropdown({
+  label,
+  options,
+  value,
+  onChange,
+  format,
+  styles,
+  pinned,
+  onTogglePin,
+  onUnset,
+  isDark,
+  children
+}) {
+  const optionStyle = isDark ? {
+    backgroundColor: "#1f1f1f",
+    color: "#e8e8e8"
+  } : {
+    backgroundColor: "#ffffff",
+    color: "#1a1a1a"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      ...styles.card,
+      position: "relative"
+    },
+    onMouseEnter: e => {
+      const element = e.currentTarget.querySelector(".pin-checkbox");
+      if (element && !pinned) element.style.opacity = "0.5";
+    },
+    onMouseLeave: e => {
+      const element = e.currentTarget.querySelector(".pin-checkbox");
+      if (element && !pinned) element.style.opacity = "0";
+    },
+    children: [onTogglePin && /* @__PURE__ */(0, import_jsx_runtime.jsx)(PinCheckbox, {
+      pinned: !!pinned,
+      onToggle: onTogglePin,
+      isDark: !!isDark
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      style: styles.label,
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("select", {
+      style: {
+        ...styles.select,
+        colorScheme: isDark ? "dark" : "light"
+      },
+      value: value === void 0 ? "__unset__" : String(value),
+      onChange: e => {
+        const rawValue = e.target.value;
+        if (rawValue === "__unset__") {
+          onUnset?.();
+          return;
+        }
+        const matchedOption = options.find(option => String(option) === rawValue);
+        if (matchedOption !== void 0) onChange(matchedOption);
+      },
+      children: [onUnset && /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
+        value: "__unset__",
+        style: optionStyle,
+        children: "unset (inherit)"
+      }), options.map(opt => /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
+        value: String(opt),
+        style: optionStyle,
+        children: format ? format(opt) : String(opt)
+      }, String(opt)))]
+    }), children]
+  });
+}
+function CollapseButton({
+  expanded,
+  onToggle,
+  isDark
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+    type: "button",
+    title: expanded ? "Collapse state overrides" : "Expand state overrides",
+    onClick: onToggle,
+    style: {
+      background: "none",
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      color: isDark ? "#666" : "#aaa",
+      transition: "transform 0.15s, color 0.15s",
+      transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+      flexShrink: 0
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      role: "img",
+      "aria-label": "Toggle",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
+        children: "Toggle state overrides"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M3 1.5l4 3.5-4 3.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })]
+    })
+  });
+}
+function IconGroup({
+  label,
+  options,
+  value,
+  onChange,
+  icon,
+  styles,
+  isDark,
+  pinned,
+  onTogglePin,
+  expanded,
+  onToggleExpand,
+  onUnset,
+  children
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    role: "group",
+    "aria-label": label,
+    style: {
+      ...styles.card,
+      position: "relative"
+    },
+    onMouseEnter: e => {
+      const element = e.currentTarget.querySelector(".pin-checkbox");
+      if (element && !pinned) element.style.opacity = "0.5";
+    },
+    onMouseLeave: e => {
+      const element = e.currentTarget.querySelector(".pin-checkbox");
+      if (element && !pinned) element.style.opacity = "0";
+    },
+    children: [onTogglePin && /* @__PURE__ */(0, import_jsx_runtime.jsx)(PinCheckbox, {
+      pinned: !!pinned,
+      onToggle: onTogglePin,
+      isDark
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      },
+      children: [onToggleExpand && /* @__PURE__ */(0, import_jsx_runtime.jsx)(CollapseButton, {
+        expanded: !!expanded,
+        onToggle: onToggleExpand,
+        isDark
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+        style: styles.label,
+        children: label
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: styles.iconRow,
+      children: [onUnset && /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        style: {
+          ...styles.iconBtn(value === void 0),
+          padding: "1px 4px",
+          fontSize: 10,
+          minWidth: 0
+        },
+        onClick: onUnset,
+        title: "unset (inherit)",
+        "aria-pressed": value === void 0,
+        children: "\u21BA"
+      }), options.map(opt => {
+        const active = value !== void 0 && opt === value;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.iconBtn(active),
+          onClick: () => onChange(opt),
+          title: String(opt),
+          "aria-pressed": active,
+          children: icon(opt, active, isDark)
+        }, String(opt));
+      })]
+    }), expanded && children]
+  });
+}
+function StateSubRow({
+  stateName,
+  options,
+  value,
+  onChange,
+  icon,
+  styles,
+  isDark
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 4,
+      marginTop: 2
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      style: {
+        fontSize: 9,
+        fontWeight: 500,
+        color: isDark ? "#666" : "#aaa",
+        width: 46,
+        textAlign: "right",
+        flexShrink: 0
+      },
+      children: stateName
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: {
+        ...styles.iconRow,
+        gap: 2
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        style: {
+          ...styles.iconBtn(value === ""),
+          padding: "1px 4px",
+          fontSize: 9,
+          minWidth: 0
+        },
+        onClick: () => onChange(""),
+        title: "inherit (no override)",
+        children: "\u2013"
+      }), options.map(opt => {
+        const active = opt === value;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: {
+            ...styles.iconBtn(active),
+            transform: "scale(0.85)"
+          },
+          onClick: () => onChange(opt),
+          title: opt,
+          children: icon(opt, active, isDark)
+        }, opt);
+      })]
+    })]
+  });
+}
+function ic(active, dark) {
+  return active ? dark ? "#e8e8e8" : "#1a1a1a" : dark ? "#555" : "#bbb";
+}
+function modeIcon(v, active, dark) {
+  return (0, import_knobIcons.modeIcon)(v, ic(active, dark));
+}
+function fillIcon(v, active, dark) {
+  return (0, import_knobIcons.fillIcon)(v, ic(active, dark));
+}
+function borderRadiusIcon(v, active, dark) {
+  return (0, import_knobIcons.borderRadiusIcon)(v, ic(active, dark));
+}
+function cornerSmoothingIcon(v, active, dark) {
+  return (0, import_knobIcons.cornerSmoothingIcon)(v, ic(active, dark));
+}
+function borderWidthIcon(v, active, dark) {
+  return (0, import_knobIcons.borderWidthIcon)(v, ic(active, dark));
+}
+function elevationIconWrap(v, active, dark) {
+  return (0, import_knobIcons.elevationIcon)(v, ic(active, dark), dark);
+}
+function textAccentIcon(v, active, dark) {
+  return (0, import_knobIcons.textAccentIcon)(v, ic(active, dark));
+}
+function headingFontIcon(v, active, dark) {
+  return (0, import_knobIcons.headingFontIcon)(v, ic(active, dark));
+}
+function bodyFontIcon(v, active, dark) {
+  return (0, import_knobIcons.bodyFontIcon)(v, ic(active, dark));
+}
+function fontWeightIcon(v, active, dark) {
+  return (0, import_knobIcons.fontWeightIcon)(v, ic(active, dark));
+}
+function fieldLabelPlacementIcon(v, active, dark) {
+  return (0, import_knobIcons.fieldLabelPlacementIcon)(v, ic(active, dark));
+}
+function requiredMarkingIcon(v, active, dark) {
+  return (0, import_knobIcons.requiredMarkingIcon)(v, ic(active, dark));
+}
+function tableZebraIcon(v, active, dark) {
+  return (0, import_knobIcons.tableZebraIcon)(v, ic(active, dark));
+}
+function bulkBarPlacementIcon(v, active, dark) {
+  return (0, import_knobIcons.bulkBarPlacementIcon)(v, ic(active, dark));
+}
+function selectAllScopeIcon(v, active, dark) {
+  return (0, import_knobIcons.selectAllScopeIcon)(v, ic(active, dark));
+}
+function timestampStyleIcon(v, active, dark) {
+  return (0, import_knobIcons.timestampStyleIcon)(v, ic(active, dark));
+}
+function disabledStyleIcon(v, active, dark) {
+  return (0, import_knobIcons.disabledStyleIcon)(v, ic(active, dark));
+}
+function formAutofocusIcon(v, active, dark) {
+  return (0, import_knobIcons.formAutofocusIcon)(v, ic(active, dark));
+}
+function extractThemeTokenColors(tamaguiConfig, scheme, colorTheme, prefix = "color") {
+  const config = tamaguiConfig;
+  const themes = config?.themes;
+  if (!themes) return void 0;
+  const candidates = [];
+  if (colorTheme) candidates.push(`${scheme}_${colorTheme}`);
+  candidates.push(scheme);
+  for (const name of candidates) {
+    const theme = themes[name];
+    if (!theme) continue;
+    const colors = [];
+    let found = false;
+    for (let i = 1; i <= 12; i++) {
+      const token = theme[`${prefix}${i}`];
+      let val;
+      if (typeof token === "string") {
+        val = token;
+      } else if (token && typeof token === "object" && "val" in token) {
+        val = String(token.val);
+      }
+      if (val) {
+        colors.push(val);
+        found = true;
+      } else {
+        colors.push("");
+      }
+    }
+    if (found) return colors;
+  }
+  return void 0;
+}
+function ThemeDevtoolsPanel({
+  useUserScheme,
+  extraPresets,
+  devtoolsTheme,
+  themeColors,
+  currentThemeColor,
+  onThemeColorChange,
+  tamaguiConfig
+}) {
+  const [knobs, setKnobs,, setPreset, activePresetName] = (0, import_useTheme.useTheme)();
+  const scheme = useUserScheme?.();
+  const isDark = devtoolsTheme !== "light";
+  const styles = (0, import_react.useMemo)(() => createStyles(isDark), [isDark]);
+  const animationOptions = (0, import_react.useMemo)(() => ["none", ...(0, import_animationOptions.extractAnimationNames)(tamaguiConfig)], [tamaguiConfig]);
+  const [overrides, setOverrides] = (0, import_react.useState)(() => {
+    const presetKnobs = activePresetName ? (0, import_shared.getPreset)(activePresetName)?.knobs : void 0;
+    return new Set(knobKeys.filter(key => knobs[key] !== (presetKnobs?.[key] ?? import_knobs.defaultKnobs[key])));
+  });
+  const [pinnedKnobs, setPinnedKnobs] = (0, import_react.useState)(() => {
+    try {
+      const raw = import_store.storage.getItem(pinnedKnobsStorageKey);
+      const stored = typeof raw === "string" || raw === null ? raw : null;
+      if (stored) return new Set(JSON.parse(stored));
+    } catch {}
+    return /* @__PURE__ */new Set();
+  });
+  const [activeProfile, setActiveProfile] = (0, import_react.useState)("");
+  const [expandedKnobs, setExpandedKnobs] = (0, import_react.useState)(() => {
+    try {
+      const raw = import_store.storage.getItem(expandedKnobsStorageKey);
+      const stored = typeof raw === "string" || raw === null ? raw : null;
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        return new Set(parsed.filter(k => stateKnobKeys.includes(k)));
+      }
+    } catch {}
+    return /* @__PURE__ */new Set();
+  });
+  const knobsRef = (0, import_react.useRef)(knobs);
+  knobsRef.current = knobs;
+  (0, import_react.useEffect)(() => {
+    void Promise.resolve(import_store.storage.setItem(pinnedKnobsStorageKey, JSON.stringify([...pinnedKnobs]))).catch(() => {});
+  }, [pinnedKnobs]);
+  (0, import_react.useEffect)(() => {
+    void Promise.resolve(import_store.storage.setItem(expandedKnobsStorageKey, JSON.stringify([...expandedKnobs]))).catch(() => {});
+  }, [expandedKnobs]);
+  const clearStateOverridesForKeys = (0, import_react.useCallback)(keys => {
+    const current = knobsRef.current;
+    const partial = {};
+    for (const state of import_knobs.interactionStates) {
+      const stateKnobs = {
+        ...current[state]
+      };
+      let mutated = false;
+      for (const key of keys) {
+        if (stateKnobs[key] !== void 0) {
+          stateKnobs[key] = void 0;
+          mutated = true;
+        }
+      }
+      if (mutated) {
+        partial[state] = stateKnobs;
+      }
+    }
+    if (Object.keys(partial).length > 0) {
+      setKnobs(partial);
+    }
+  }, [setKnobs]);
+  const toggleExpand = (0, import_react.useCallback)(key => {
+    let collapsing = false;
+    setExpandedKnobs(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        collapsing = true;
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+    if (collapsing) {
+      clearStateOverridesForKeys([key]);
+    }
+  }, [clearStateOverridesForKeys]);
+  const togglePin = (0, import_react.useCallback)(key => {
+    setPinnedKnobs(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+        for (const state of import_knobs.interactionStates) {
+          next.delete(`${state}.${key}`);
+        }
+      } else {
+        next.add(key);
+        for (const state of import_knobs.interactionStates) {
+          next.add(`${state}.${key}`);
+        }
+      }
+      return next;
+    });
+  }, []);
+  const allStateKnobsExpanded = (0, import_react.useMemo)(() => stateKnobKeys.every(key => expandedKnobs.has(key)), [expandedKnobs]);
+  const handleToggleAllStates = (0, import_react.useCallback)(() => {
+    let collapsingAll = false;
+    setExpandedKnobs(prev => {
+      const allExpanded = stateKnobKeys.every(key => prev.has(key));
+      if (allExpanded) {
+        collapsingAll = true;
+        return /* @__PURE__ */new Set();
+      }
+      return new Set(stateKnobKeys);
+    });
+    if (collapsingAll) {
+      clearStateOverridesForKeys(stateKnobKeys);
+    }
+  }, [clearStateOverridesForKeys]);
+  const set = (0, import_react.useCallback)((key, value) => {
+    setOverrides(prev => new Set(prev).add(key));
+    setKnobs({
+      [key]: value
+    });
+    if (activeProfile) setActiveProfile("");
+  }, [setKnobs, activeProfile]);
+  const handleProfileChange = (0, import_react.useCallback)(profileName => {
+    if (!profileName) {
+      setActiveProfile("");
+      return;
+    }
+    const profile = designProfiles[profileName];
+    if (!profile) return;
+    const partial = {};
+    for (const key of knobKeys) {
+      if (profile[key]) partial[key] = profile[key];
+    }
+    const hover = {};
+    const press = {};
+    for (const [k, v] of Object.entries(profile)) {
+      if (!v) continue;
+      if (k.startsWith("hover.")) hover[k.slice(6)] = v;else if (k.startsWith("press.")) press[k.slice(6)] = v;
+    }
+    if (Object.keys(hover).length) partial.hover = hover;
+    if (Object.keys(press).length) partial.press = press;
+    setKnobs(partial);
+    setOverrides(new Set(knobKeys));
+    setPinnedKnobs(/* @__PURE__ */new Set());
+    setActiveProfile(profileName);
+    if (profile.color && onThemeColorChange) {
+      onThemeColorChange(profile.color);
+    }
+  }, [setKnobs, onThemeColorChange]);
+  const handleClearKnobs = (0, import_react.useCallback)(() => {
+    if (activeProfile && designProfiles[activeProfile]) {
+      handleProfileChange(activeProfile);
+      setExpandedKnobs(/* @__PURE__ */new Set());
+      return;
+    }
+    setOverrides(/* @__PURE__ */new Set());
+    setPinnedKnobs(/* @__PURE__ */new Set());
+    setExpandedKnobs(/* @__PURE__ */new Set());
+    setActiveProfile("");
+    if (activePresetName) {
+      setPreset(activePresetName);
+    } else {
+      setKnobs({
+        ...import_knobs.defaultKnobs
+      });
+    }
+  }, [activeProfile, handleProfileChange, activePresetName, setPreset, setKnobs]);
+  const handleApplyDefaults = (0, import_react.useCallback)(() => {
+    setOverrides(new Set(knobKeys));
+    setPinnedKnobs(/* @__PURE__ */new Set());
+    setExpandedKnobs(/* @__PURE__ */new Set());
+    setActiveProfile("");
+    setPreset("");
+    setKnobs({
+      ...import_knobs.defaultKnobs
+    });
+  }, [setPreset, setKnobs]);
+  const [copyStatus, setCopyStatus] = (0, import_react.useState)("idle");
+  const handleCopySnapshot = (0, import_react.useCallback)(async () => {
+    const knobValues = {};
+    for (const [key, value] of Object.entries(knobs)) {
+      if (value && typeof value === "object") {
+        for (const [sk, sv] of Object.entries(value)) {
+          if (sv) knobValues[`${key}.${sk}`] = sv;
+        }
+      } else {
+        knobValues[key] = String(value);
+      }
+    }
+    const lightColors = extractThemeTokenColors(tamaguiConfig, "light", currentThemeColor) ?? [];
+    const darkColors = extractThemeTokenColors(tamaguiConfig, "dark", currentThemeColor) ?? [];
+    const snapshot = (0, import_buildSnapshot.buildSnapshot)({
+      knobValues,
+      activePreset: activePresetName ?? void 0,
+      schemeSetting: scheme?.setting,
+      schemeValue: scheme?.value,
+      currentColor: currentThemeColor,
+      lightColors,
+      darkColors
+    });
+    const success = await (0, import_platform.writeToClipboard)(snapshot);
+    if (success) {
+      setCopyStatus("copied");
+      setTimeout(() => setCopyStatus("idle"), 2e3);
+    } else {
+      setCopyStatus("error");
+      setTimeout(() => setCopyStatus("idle"), 2e3);
+    }
+  }, [knobs, activePresetName, scheme, currentThemeColor, tamaguiConfig]);
+  const handleRandomize = (0, import_react.useCallback)(() => {
+    const pick = arr => arr[Math.floor(Math.random() * arr.length)];
+    const knobEnums = {
+      fillStyle: Object.values(import_knobs.FillStyle),
+      borderRadius: Object.values(import_knobs.BorderRadius),
+      borderWidth: Object.values(import_knobs.BorderWidth),
+      elevation: Object.values(import_knobs.Elevation),
+      textAccent: Object.values(import_knobs.TextAccent),
+      headingFont: Object.values(import_knobs.HeadingFont),
+      bodyFont: Object.values(import_knobs.BodyFont),
+      fontWeight: Object.values(import_knobs.FontWeight),
+      animation: animationOptions
+    };
+    const partial = {};
+    const newOverrides = new Set(knobKeys);
+    for (const key of knobKeys) {
+      if (pinnedKnobs.has(key)) continue;
+      const values = knobEnums[key];
+      if (values) partial[key] = pick(values);
+    }
+    if (expandedKnobs.size > 0) {
+      const knobEnumsForState = {
+        fillStyle: Object.values(import_knobs.FillStyle),
+        borderRadius: Object.values(import_knobs.BorderRadius),
+        borderWidth: Object.values(import_knobs.BorderWidth),
+        elevation: Object.values(import_knobs.Elevation),
+        textAccent: Object.values(import_knobs.TextAccent),
+        headingFont: Object.values(import_knobs.HeadingFont),
+        bodyFont: Object.values(import_knobs.BodyFont),
+        fontWeight: Object.values(import_knobs.FontWeight)
+      };
+      for (const state of import_knobs.interactionStates) {
+        const statePartial = {};
+        for (const key of expandedKnobs) {
+          const values = knobEnumsForState[key];
+          if (values) statePartial[key] = pick(values);
+        }
+        if (Object.keys(statePartial).length > 0) {
+          partial[state] = statePartial;
+        }
+      }
+    }
+    setOverrides(newOverrides);
+    setKnobs(partial);
+    if (!pinnedKnobs.has("color") && themeColors && onThemeColorChange) {
+      const nonEmpty = themeColors.filter(c => c !== "");
+      if (nonEmpty.length > 0) {
+        onThemeColorChange(pick(nonEmpty));
+      }
+    }
+    if (!pinnedKnobs.has("scheme") && scheme) {
+      scheme.set(pick(["light", "dark"]));
+    }
+    if (activeProfile) setActiveProfile("");
+  }, [setKnobs, themeColors, onThemeColorChange, scheme, pinnedKnobs, expandedKnobs, activeProfile, animationOptions]);
+  const presetOptions = (0, import_react.useMemo)(() => {
+    const registered = (0, import_shared.getPresetNames)();
+    const names = new Set(registered);
+    if (extraPresets) {
+      for (const name of extraPresets) {
+        names.add(name);
+      }
+    }
+    return ["", ...Array.from(names).filter(Boolean).sort()];
+  }, [extraPresets]);
+  const handlePresetChange = (0, import_react.useCallback)(presetName => {
+    if (!presetName) return;
+    setPreset(presetName);
+    setOverrides(/* @__PURE__ */new Set());
+  }, [setPreset]);
+  const handleResetToPreset = (0, import_react.useCallback)(() => {
+    if (activePresetName) {
+      setPreset(activePresetName);
+    } else {
+      setKnobs({
+        ...import_knobs.defaultKnobs
+      });
+    }
+    setOverrides(/* @__PURE__ */new Set());
+  }, [activePresetName, setPreset, setKnobs]);
+  const prevDevtoolsTheme = (0, import_react.useRef)(void 0);
+  (0, import_react.useEffect)(() => {
+    if (!devtoolsTheme || !scheme) {
+      prevDevtoolsTheme.current = devtoolsTheme;
+      return;
+    }
+    if (prevDevtoolsTheme.current === void 0) {
+      prevDevtoolsTheme.current = devtoolsTheme;
+      return;
+    }
+    if (prevDevtoolsTheme.current !== devtoolsTheme) {
+      prevDevtoolsTheme.current = devtoolsTheme;
+      if (scheme.value !== devtoolsTheme) {
+        scheme.set(devtoolsTheme);
+      }
+    }
+  }, [devtoolsTheme, scheme]);
+  const schemeValue = scheme?.value;
+  (0, import_react.useEffect)(() => {
+    if (!schemeValue) return;
+    void Promise.resolve(import_store.storage.getItem(tanstackDevtoolsSettings)).then(raw => {
+      const settings = raw ? JSON.parse(raw) : {};
+      if (settings.theme !== schemeValue) {
+        settings.theme = schemeValue;
+        return Promise.resolve(import_store.storage.setItem(tanstackDevtoolsSettings, JSON.stringify(settings)));
+      }
+    }).catch(() => {});
+  }, [schemeValue]);
+  const getOverride = key => overrides.has(key) ? knobs[key] : void 0;
+  const inheritedKnob = (0, import_react.useCallback)(key => {
+    const activeProfileConfig = activeProfile ? designProfiles[activeProfile] : void 0;
+    if (activeProfileConfig?.[key]) {
+      return activeProfileConfig[key];
+    }
+    if (activePresetName) {
+      const presetKnobs = (0, import_shared.getPreset)(activePresetName)?.knobs;
+      if (presetKnobs?.[key] !== void 0) return presetKnobs[key];
+    }
+    return import_knobs.defaultKnobs[key];
+  }, [activeProfile, activePresetName]);
+  const unset = (0, import_react.useCallback)(key => {
+    setOverrides(prev => {
+      const next = new Set(prev);
+      next.delete(key);
+      return next;
+    });
+    setKnobs({
+      [key]: inheritedKnob(key)
+    });
+  }, [setKnobs, inheritedKnob]);
+  const setStateKnob = (0, import_react.useCallback)((state, key, value) => {
+    const current = knobsRef.current;
+    setKnobs({
+      [state]: {
+        ...current[state],
+        [key]: value === "" ? void 0 : value
+      }
+    });
+    setOverrides(prev => new Set(prev).add(state));
+    if (activeProfile) setActiveProfile("");
+  }, [setKnobs, activeProfile]);
+  const getStateKnob = (state, key) => {
+    const stateKnobs = knobs[state];
+    return stateKnobs[key] ?? "";
+  };
+  const stateRows = (knobKey, options, icon) => import_knobs.interactionStates.map(state => /* @__PURE__ */(0, import_jsx_runtime.jsx)(StateSubRow, {
+    stateName: stateDisplayLabels[state],
+    options,
+    value: getStateKnob(state, knobKey),
+    onChange: v => setStateKnob(state, knobKey, v),
+    icon,
+    styles,
+    isDark
+  }, state));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: styles.panel,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+      style: styles.knobsRow,
+      children: [presetOptions.length > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dropdown, {
+        label: "Preset",
+        options: presetOptions,
+        value: activePresetName ?? "",
+        onChange: v => handlePresetChange(v),
+        format: formatPresetOption,
+        styles
+      }), presetOptions.length > 1 && /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: styles.card,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.resetBtn,
+          onClick: handleResetToPreset,
+          children: "Reset to Preset"
+        })
+      }), themeColors && themeColors.length > 1 && onThemeColorChange && /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dropdown, {
+        label: "Theme",
+        options: themeColors,
+        value: currentThemeColor ?? "",
+        onChange: v => onThemeColorChange(v),
+        format: v => v === "" ? "none" : String(v),
+        styles,
+        pinned: pinnedKnobs.has("color"),
+        onTogglePin: () => togglePin("color"),
+        isDark
+      }), scheme && /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Scheme",
+        options: ["system", "light", "dark"],
+        value: scheme.setting,
+        onChange: v => scheme.set(v),
+        icon: modeIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("scheme"),
+        onTogglePin: () => togglePin("scheme")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Fill",
+        options: Object.values(import_knobs.FillStyle),
+        value: getOverride("fillStyle"),
+        onChange: v => set("fillStyle", v),
+        icon: fillIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("fillStyle"),
+        onTogglePin: () => togglePin("fillStyle"),
+        expanded: expandedKnobs.has("fillStyle"),
+        onToggleExpand: () => toggleExpand("fillStyle"),
+        onUnset: () => unset("fillStyle"),
+        children: stateRows("fillStyle", Object.values(import_knobs.FillStyle), fillIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Radius",
+        options: Object.values(import_knobs.BorderRadius),
+        value: getOverride("borderRadius"),
+        onChange: v => set("borderRadius", v),
+        icon: borderRadiusIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("borderRadius"),
+        onTogglePin: () => togglePin("borderRadius"),
+        expanded: expandedKnobs.has("borderRadius"),
+        onToggleExpand: () => toggleExpand("borderRadius"),
+        onUnset: () => unset("borderRadius"),
+        children: stateRows("borderRadius", Object.values(import_knobs.BorderRadius), borderRadiusIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Smoothing",
+        options: Object.values(import_knobs.CornerSmoothing),
+        value: getOverride("cornerSmoothing"),
+        onChange: v => set("cornerSmoothing", v),
+        icon: cornerSmoothingIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("cornerSmoothing"),
+        onTogglePin: () => togglePin("cornerSmoothing"),
+        onUnset: () => unset("cornerSmoothing")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Border",
+        options: Object.values(import_knobs.BorderWidth),
+        value: getOverride("borderWidth"),
+        onChange: v => set("borderWidth", v),
+        icon: borderWidthIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("borderWidth"),
+        onTogglePin: () => togglePin("borderWidth"),
+        expanded: expandedKnobs.has("borderWidth"),
+        onToggleExpand: () => toggleExpand("borderWidth"),
+        onUnset: () => unset("borderWidth"),
+        children: stateRows("borderWidth", Object.values(import_knobs.BorderWidth), borderWidthIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Elevation",
+        options: Object.values(import_knobs.Elevation),
+        value: getOverride("elevation"),
+        onChange: v => set("elevation", v),
+        icon: elevationIconWrap,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("elevation"),
+        onTogglePin: () => togglePin("elevation"),
+        expanded: expandedKnobs.has("elevation"),
+        onToggleExpand: () => toggleExpand("elevation"),
+        onUnset: () => unset("elevation"),
+        children: stateRows("elevation", Object.values(import_knobs.Elevation), elevationIconWrap)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Text Accent",
+        options: Object.values(import_knobs.TextAccent),
+        value: getOverride("textAccent"),
+        onChange: v => set("textAccent", v),
+        icon: textAccentIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("textAccent"),
+        onTogglePin: () => togglePin("textAccent"),
+        expanded: expandedKnobs.has("textAccent"),
+        onToggleExpand: () => toggleExpand("textAccent"),
+        onUnset: () => unset("textAccent"),
+        children: stateRows("textAccent", Object.values(import_knobs.TextAccent), textAccentIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Heading",
+        options: Object.values(import_knobs.HeadingFont),
+        value: getOverride("headingFont"),
+        onChange: v => set("headingFont", v),
+        icon: headingFontIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("headingFont"),
+        onTogglePin: () => togglePin("headingFont"),
+        expanded: expandedKnobs.has("headingFont"),
+        onToggleExpand: () => toggleExpand("headingFont"),
+        onUnset: () => unset("headingFont"),
+        children: stateRows("headingFont", Object.values(import_knobs.HeadingFont), headingFontIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Body",
+        options: Object.values(import_knobs.BodyFont),
+        value: getOverride("bodyFont"),
+        onChange: v => set("bodyFont", v),
+        icon: bodyFontIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("bodyFont"),
+        onTogglePin: () => togglePin("bodyFont"),
+        expanded: expandedKnobs.has("bodyFont"),
+        onToggleExpand: () => toggleExpand("bodyFont"),
+        onUnset: () => unset("bodyFont"),
+        children: stateRows("bodyFont", Object.values(import_knobs.BodyFont), bodyFontIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Weight",
+        options: Object.values(import_knobs.FontWeight),
+        value: getOverride("fontWeight"),
+        onChange: v => set("fontWeight", v),
+        icon: fontWeightIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("fontWeight"),
+        onTogglePin: () => togglePin("fontWeight"),
+        expanded: expandedKnobs.has("fontWeight"),
+        onToggleExpand: () => toggleExpand("fontWeight"),
+        onUnset: () => unset("fontWeight"),
+        children: stateRows("fontWeight", Object.values(import_knobs.FontWeight), fontWeightIcon)
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dropdown, {
+        label: "Animation",
+        options: animationOptions,
+        value: getOverride("animation") ?? "",
+        onChange: v => set("animation", v),
+        onUnset: () => unset("animation"),
+        styles,
+        pinned: pinnedKnobs.has("animation"),
+        onTogglePin: () => togglePin("animation"),
+        isDark
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Label place",
+        options: Object.values(import_knobs.FieldLabelPlacement),
+        value: getOverride("fieldLabelPlacement"),
+        onChange: v => set("fieldLabelPlacement", v),
+        icon: fieldLabelPlacementIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("fieldLabelPlacement"),
+        onTogglePin: () => togglePin("fieldLabelPlacement"),
+        onUnset: () => unset("fieldLabelPlacement")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Required mark",
+        options: Object.values(import_knobs.RequiredMarking),
+        value: getOverride("requiredMarking"),
+        onChange: v => set("requiredMarking", v),
+        icon: requiredMarkingIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("requiredMarking"),
+        onTogglePin: () => togglePin("requiredMarking"),
+        onUnset: () => unset("requiredMarking")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Zebra",
+        options: Object.values(import_knobs.TableZebra),
+        value: getOverride("tableZebra"),
+        onChange: v => set("tableZebra", v),
+        icon: tableZebraIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("tableZebra"),
+        onTogglePin: () => togglePin("tableZebra"),
+        onUnset: () => unset("tableZebra")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Bulk bar",
+        options: Object.values(import_knobs.BulkBarPlacement),
+        value: getOverride("bulkBarPlacement"),
+        onChange: v => set("bulkBarPlacement", v),
+        icon: bulkBarPlacementIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("bulkBarPlacement"),
+        onTogglePin: () => togglePin("bulkBarPlacement"),
+        onUnset: () => unset("bulkBarPlacement")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Select all",
+        options: Object.values(import_knobs.SelectAllScope),
+        value: getOverride("selectAllScope"),
+        onChange: v => set("selectAllScope", v),
+        icon: selectAllScopeIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("selectAllScope"),
+        onTogglePin: () => togglePin("selectAllScope"),
+        onUnset: () => unset("selectAllScope")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Timestamp",
+        options: Object.values(import_knobs.TimestampStyle),
+        value: getOverride("timestampStyle"),
+        onChange: v => set("timestampStyle", v),
+        icon: timestampStyleIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("timestampStyle"),
+        onTogglePin: () => togglePin("timestampStyle"),
+        onUnset: () => unset("timestampStyle")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Disabled",
+        options: Object.values(import_knobs.DisabledStyle),
+        value: getOverride("disabledStyle"),
+        onChange: v => set("disabledStyle", v),
+        icon: disabledStyleIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("disabledStyle"),
+        onTogglePin: () => togglePin("disabledStyle"),
+        onUnset: () => unset("disabledStyle")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
+        label: "Autofocus",
+        options: Object.values(import_knobs.FormAutofocus),
+        value: getOverride("formAutofocus"),
+        onChange: v => set("formAutofocus", v),
+        icon: formAutofocusIcon,
+        styles,
+        isDark,
+        pinned: pinnedKnobs.has("formAutofocus"),
+        onTogglePin: () => togglePin("formAutofocus"),
+        onUnset: () => unset("formAutofocus")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        style: {
+          ...styles.card,
+          flexDirection: "row",
+          gap: 6,
+          flexWrap: "wrap"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("select", {
+          title: "Design system profile",
+          value: activeProfile,
+          onChange: e => handleProfileChange(e.target.value),
+          style: {
+            ...styles.select,
+            width: "auto",
+            fontSize: 11,
+            opacity: activeProfile ? 1 : 0.6
+          },
+          children: profileNames.map(name => /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
+            value: name,
+            children: name || "profile"
+          }, name))
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: {
+            ...styles.resetBtn,
+            ...(copyStatus === "copied" ? {
+              background: isDark ? "#1a3a1a" : "#d4edda",
+              borderColor: isDark ? "#2d5a2d" : "#a3d9a5"
+            } : copyStatus === "error" ? {
+              background: isDark ? "#3a1a1a" : "#f8d7da",
+              borderColor: isDark ? "#5a2d2d" : "#f5c6cb"
+            } : {})
+          },
+          onClick: handleCopySnapshot,
+          "aria-label": copyStatus === "copied" ? "Copied" : copyStatus === "error" ? "Copy failed" : "Copy snapshot",
+          children: copyStatus === "copied" ? "\u2713" : copyStatus === "error" ? "!" : "\u29C9"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.resetBtn,
+          onClick: handleRandomize,
+          children: "Random"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.iconBtn(false),
+          onClick: handleToggleAllStates,
+          title: allStateKnobsExpanded ? "Collapse States" : "Expand States",
+          "aria-label": allStateKnobsExpanded ? "Collapse States" : "Expand States",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "States",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
+              children: allStateKnobsExpanded ? "Collapse States" : "Expand States"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+              d: "M2.5 4.5h7M2.5 8h7M2.5 11.5h7",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              strokeLinecap: "round"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+              d: allStateKnobsExpanded ? "M12 10.5l-2-2 2-2" : "M10 6.5l2 2-2 2",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            })]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.iconBtn(false),
+          onClick: handleApplyDefaults,
+          title: "Apply Defaults",
+          "aria-label": "Apply Defaults",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "Defaults",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
+              children: "Apply Defaults"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+              d: "M2.5 4.5h11M2.5 8h11M2.5 11.5h11",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              strokeLinecap: "round"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+              cx: "5",
+              cy: "4.5",
+              r: "1.2",
+              fill: "currentColor"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+              cx: "8",
+              cy: "8",
+              r: "1.2",
+              fill: "currentColor"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+              cx: "11",
+              cy: "11.5",
+              r: "1.2",
+              fill: "currentColor"
+            })]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          style: styles.iconBtn(false),
+          onClick: handleClearKnobs,
+          title: "Clear",
+          "aria-label": "Clear",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "Clear",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
+              children: "Clear"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+              d: "M3.5 3.5l9 9M12.5 3.5l-9 9",
+              stroke: "currentColor",
+              strokeWidth: "1.4",
+              strokeLinecap: "round"
+            })]
+          })
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColorLineVisualizer.ColorLineVisualizer, {
+      knobs,
+      isDark,
+      themeColors: extractThemeTokenColors(tamaguiConfig, isDark ? "dark" : "light", currentThemeColor || void 0),
+      oppositeThemeColors: extractThemeTokenColors(tamaguiConfig, isDark ? "light" : "dark", currentThemeColor || void 0),
+      accentColors: extractThemeTokenColors(tamaguiConfig, isDark ? "dark" : "light", currentThemeColor || void 0, "accent"),
+      oppositeAccentColors: extractThemeTokenColors(tamaguiConfig, isDark ? "light" : "dark", currentThemeColor || void 0, "accent")
+    })]
+  });
+}