@multiplatform.one/theme 8.5.0 → 9.0.0

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

@@ -22,1793 +22,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
-var ThemeDevtoolsPanel_exports = {};
-__export(ThemeDevtoolsPanel_exports, {
+var ThemeDevtoolsPanel_native_exports = {};
+__export(ThemeDevtoolsPanel_native_exports, {
   ThemeDevtoolsPanel: () => ThemeDevtoolsPanel
 });
-module.exports = __toCommonJS(ThemeDevtoolsPanel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_platform = require("@multiplatform.one/platform");
-var import_store = require("@multiplatform.one/store");
-var import_useTheme = require("../useTheme.native.js");
-var import_knobs = require("../knobs.native.js");
-var import_shared = require("../shared.native.js");
-var import_scaleInputs = require("../scale/scaleInputs.native.js");
-var import_animationOptions = require("./animationOptions.native.js");
-var import_ColorLineVisualizer = require("./ColorLineVisualizer.native.js");
-var import_buildSnapshot = require("./buildSnapshot.native.js");
-var import_knobIcons = require("./knobIcons.native.js");
-function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-var tanstackDevtoolsSettings = "tanstack_devtools_settings";
-var pinnedKnobsStorageKey = "ts-theme-pinned";
-var expandedKnobsStorageKey = "ts-theme-expanded";
-var stateDisplayLabels = {
-  hover: "hover",
-  press: "press",
-  focus: "focus",
-  focusVisible: "focusV"
-};
-var knobKeys = ["fillStyle", "borderRadius", "cornerSmoothing", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight", "animation", "fieldLabelPlacement", "requiredMarking", "tableZebra", "bulkBarPlacement", "selectAllScope", "timestampStyle", "disabledStyle", "formAutofocus"];
-var stateKnobKeys = ["fillStyle", "borderRadius", "borderWidth", "elevation", "textAccent", "headingFont", "bodyFont", "fontWeight"];
-var 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"
-  }
-};
-var profileNames = ["", ...Object.keys(designProfiles)];
-function formatPresetOption(name) {
-  var _ref, _ref1;
-  var _getPreset;
-  if (name === "") return "custom";
-  var scale = (_getPreset = (0, import_shared.getPreset)(name)) === null || _getPreset === void 0 ? void 0 : _getPreset.scale;
-  var control = (_ref = scale === null || scale === void 0 ? void 0 : scale.control) !== null && _ref !== void 0 ? _ref : import_scaleInputs.defaultScaleInputs.control;
-  var type = (_ref1 = scale === null || scale === void 0 ? void 0 : scale.type) !== null && _ref1 !== void 0 ? _ref1 : 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: function toggle(active) {
-      return {
-        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: function toggleKnob(active) {
-      return {
-        width: 16,
-        height: 16,
-        borderRadius: 8,
-        background: "#fff",
-        position: "absolute",
-        top: 2,
-        left: active ? 18 : 2,
-        transition: "left 0.2s"
-      };
-    },
-    iconBtn: function iconBtn(active) {
-      return {
-        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(param) {
-  var {
-    pinned,
-    onToggle,
-    isDark
-  } = param;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("label", {
-    title: pinned ? "Pinned. 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(param) {
-  var {
-    label,
-    options,
-    value,
-    onChange,
-    format,
-    styles,
-    pinned,
-    onTogglePin,
-    onUnset,
-    isDark,
-    children
-  } = param;
-  var optionStyle = isDark ? {
-    backgroundColor: "#1f1f1f",
-    color: "#e8e8e8"
-  } : {
-    backgroundColor: "#ffffff",
-    color: "#1a1a1a"
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
-    style: {
-      ...styles.card,
-      position: "relative"
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      var element = e.currentTarget.querySelector(".pin-checkbox");
-      if (element && !pinned) element.style.opacity = "0.5";
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      var 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: function onChange1(e) {
-        var rawValue = e.target.value;
-        if (rawValue === "__unset__") {
-          onUnset === null || onUnset === void 0 ? void 0 : onUnset();
-          return;
-        }
-        var matchedOption = options.find(function (option) {
-          return 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(function (opt) {
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("option", {
-          value: String(opt),
-          style: optionStyle,
-          children: format ? format(opt) : String(opt)
-        }, String(opt));
-      })]
-    }), children]
-  });
-}
-function CollapseButton(param) {
-  var {
-    expanded,
-    onToggle,
-    isDark
-  } = param;
-  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(param) {
-  var {
-    label,
-    options,
-    value,
-    onChange,
-    icon,
-    styles,
-    isDark,
-    pinned,
-    onTogglePin,
-    expanded,
-    onToggleExpand,
-    onUnset,
-    children
-  } = param;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
-    role: "group",
-    "aria-label": label,
-    style: {
-      ...styles.card,
-      position: "relative"
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      var element = e.currentTarget.querySelector(".pin-checkbox");
-      if (element && !pinned) element.style.opacity = "0.5";
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      var 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(function (opt) {
-        var active = value !== void 0 && opt === value;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
-          type: "button",
-          style: styles.iconBtn(active),
-          onClick: function onClick() {
-            return onChange(opt);
-          },
-          title: String(opt),
-          "aria-pressed": active,
-          children: icon(opt, active, isDark)
-        }, String(opt));
-      })]
-    }), expanded && children]
-  });
-}
-function StateSubRow(param) {
-  var {
-    stateName,
-    options,
-    value,
-    onChange,
-    icon,
-    styles,
-    isDark
-  } = param;
-  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: function onClick() {
-          return onChange("");
-        },
-        title: "inherit (no override)",
-        children: "\u2013"
-      }), options.map(function (opt) {
-        var active = opt === value;
-        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
-          type: "button",
-          style: {
-            ...styles.iconBtn(active),
-            transform: "scale(0.85)"
-          },
-          onClick: function onClick() {
-            return 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) {
-  var prefix = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "color";
-  var config = tamaguiConfig;
-  var themes = config === null || config === void 0 ? void 0 : config.themes;
-  if (!themes) return void 0;
-  var candidates = [];
-  if (colorTheme) candidates.push(`${scheme}_${colorTheme}`);
-  candidates.push(scheme);
-  var _iteratorNormalCompletion = true,
-    _didIteratorError = false,
-    _iteratorError = void 0;
-  try {
-    for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var name = _step.value;
-      var theme = themes[name];
-      if (!theme) continue;
-      var colors = [];
-      var found = false;
-      for (var i = 1; i <= 12; i++) {
-        var token = theme[`${prefix}${i}`];
-        var val = void 0;
-        if (typeof token === "string") {
-          val = token;
-        } else if (token && (typeof token === "undefined" ? "undefined" : _type_of(token)) === "object" && "val" in token) {
-          val = String(token.val);
-        }
-        if (val) {
-          colors.push(val);
-          found = true;
-        } else {
-          colors.push("");
-        }
-      }
-      if (found) return colors;
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return != null) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
-  return void 0;
-}
-function ThemeDevtoolsPanel(param) {
-  var {
-    useUserScheme,
-    extraPresets,
-    devtoolsTheme,
-    themeColors,
-    currentThemeColor,
-    onThemeColorChange,
-    tamaguiConfig
-  } = param;
-  var _getOverride;
-  var [knobs, setKnobs,, setPreset, activePresetName] = (0, import_useTheme.useTheme)();
-  var scheme = useUserScheme === null || useUserScheme === void 0 ? void 0 : useUserScheme();
-  var isDark = devtoolsTheme !== "light";
-  var styles = (0, import_react.useMemo)(function () {
-    return createStyles(isDark);
-  }, [isDark]);
-  var animationOptions = (0, import_react.useMemo)(function () {
-    return ["none", ...(0, import_animationOptions.extractAnimationNames)(tamaguiConfig)];
-  }, [tamaguiConfig]);
-  var [overrides, setOverrides] = (0, import_react.useState)(function () {
-    var _getPreset;
-    var presetKnobs = activePresetName ? (_getPreset = (0, import_shared.getPreset)(activePresetName)) === null || _getPreset === void 0 ? void 0 : _getPreset.knobs : void 0;
-    return new Set(knobKeys.filter(function (key) {
-      var _ref;
-      return knobs[key] !== ((_ref = presetKnobs === null || presetKnobs === void 0 ? void 0 : presetKnobs[key]) !== null && _ref !== void 0 ? _ref : import_knobs.defaultKnobs[key]);
-    }));
-  });
-  var [pinnedKnobs, setPinnedKnobs] = (0, import_react.useState)(function () {
-    try {
-      var raw = import_store.storage.getItem(pinnedKnobsStorageKey);
-      var stored = typeof raw === "string" || raw === null ? raw : null;
-      if (stored) return new Set(JSON.parse(stored));
-    } catch (unused) {}
-    return /* @__PURE__ */new Set();
-  });
-  var [activeProfile, setActiveProfile] = (0, import_react.useState)("");
-  var [expandedKnobs, setExpandedKnobs] = (0, import_react.useState)(function () {
-    try {
-      var raw = import_store.storage.getItem(expandedKnobsStorageKey);
-      var stored = typeof raw === "string" || raw === null ? raw : null;
-      if (stored) {
-        var parsed = JSON.parse(stored);
-        return new Set(parsed.filter(function (k) {
-          return stateKnobKeys.includes(k);
-        }));
-      }
-    } catch (unused) {}
-    return /* @__PURE__ */new Set();
-  });
-  var knobsRef = (0, import_react.useRef)(knobs);
-  knobsRef.current = knobs;
-  (0, import_react.useEffect)(function () {
-    void Promise.resolve(import_store.storage.setItem(pinnedKnobsStorageKey, JSON.stringify([...pinnedKnobs]))).catch(function () {});
-  }, [pinnedKnobs]);
-  (0, import_react.useEffect)(function () {
-    void Promise.resolve(import_store.storage.setItem(expandedKnobsStorageKey, JSON.stringify([...expandedKnobs]))).catch(function () {});
-  }, [expandedKnobs]);
-  var clearStateOverridesForKeys = (0, import_react.useCallback)(function (keys) {
-    var current = knobsRef.current;
-    var partial = {};
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = import_knobs.interactionStates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var state = _step.value;
-        var stateKnobs = {
-          ...current[state]
-        };
-        var mutated = false;
-        var _iteratorNormalCompletion1 = true,
-          _didIteratorError1 = false,
-          _iteratorError1 = void 0;
-        try {
-          for (var _iterator1 = keys[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-            var key = _step1.value;
-            if (stateKnobs[key] !== void 0) {
-              stateKnobs[key] = void 0;
-              mutated = true;
-            }
-          }
-        } catch (err) {
-          _didIteratorError1 = true;
-          _iteratorError1 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-              _iterator1.return();
-            }
-          } finally {
-            if (_didIteratorError1) {
-              throw _iteratorError1;
-            }
-          }
-        }
-        if (mutated) {
-          partial[state] = stateKnobs;
-        }
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-    if (Object.keys(partial).length > 0) {
-      setKnobs(partial);
-    }
-  }, [setKnobs]);
-  var toggleExpand = (0, import_react.useCallback)(function (key) {
-    var collapsing = false;
-    setExpandedKnobs(function (prev) {
-      var next = new Set(prev);
-      if (next.has(key)) {
-        collapsing = true;
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-    if (collapsing) {
-      clearStateOverridesForKeys([key]);
-    }
-  }, [clearStateOverridesForKeys]);
-  var togglePin = (0, import_react.useCallback)(function (key) {
-    setPinnedKnobs(function (prev) {
-      var next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-        var _iteratorNormalCompletion = true,
-          _didIteratorError = false,
-          _iteratorError = void 0;
-        try {
-          for (var _iterator = import_knobs.interactionStates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var state = _step.value;
-            next.delete(`${state}.${key}`);
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-      } else {
-        next.add(key);
-        var _iteratorNormalCompletion1 = true,
-          _didIteratorError1 = false,
-          _iteratorError1 = void 0;
-        try {
-          for (var _iterator1 = import_knobs.interactionStates[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-            var state1 = _step1.value;
-            next.add(`${state1}.${key}`);
-          }
-        } catch (err) {
-          _didIteratorError1 = true;
-          _iteratorError1 = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-              _iterator1.return();
-            }
-          } finally {
-            if (_didIteratorError1) {
-              throw _iteratorError1;
-            }
-          }
-        }
-      }
-      return next;
-    });
-  }, []);
-  var allStateKnobsExpanded = (0, import_react.useMemo)(function () {
-    return stateKnobKeys.every(function (key) {
-      return expandedKnobs.has(key);
-    });
-  }, [expandedKnobs]);
-  var handleToggleAllStates = (0, import_react.useCallback)(function () {
-    var collapsingAll = false;
-    setExpandedKnobs(function (prev) {
-      var allExpanded = stateKnobKeys.every(function (key) {
-        return prev.has(key);
-      });
-      if (allExpanded) {
-        collapsingAll = true;
-        return /* @__PURE__ */new Set();
-      }
-      return new Set(stateKnobKeys);
-    });
-    if (collapsingAll) {
-      clearStateOverridesForKeys(stateKnobKeys);
-    }
-  }, [clearStateOverridesForKeys]);
-  var set = (0, import_react.useCallback)(function (key, value) {
-    setOverrides(function (prev) {
-      return new Set(prev).add(key);
-    });
-    setKnobs({
-      [key]: value
-    });
-    if (activeProfile) setActiveProfile("");
-  }, [setKnobs, activeProfile]);
-  var handleProfileChange = (0, import_react.useCallback)(function (profileName) {
-    if (!profileName) {
-      setActiveProfile("");
-      return;
-    }
-    var profile = designProfiles[profileName];
-    if (!profile) return;
-    var partial = {};
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = knobKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var key = _step.value;
-        if (profile[key]) partial[key] = profile[key];
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-    var hover = {};
-    var press = {};
-    var _iteratorNormalCompletion1 = true,
-      _didIteratorError1 = false,
-      _iteratorError1 = void 0;
-    try {
-      for (var _iterator1 = Object.entries(profile)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-        var [k, v] = _step1.value;
-        if (!v) continue;
-        if (k.startsWith("hover.")) hover[k.slice(6)] = v;else if (k.startsWith("press.")) press[k.slice(6)] = v;
-      }
-    } catch (err) {
-      _didIteratorError1 = true;
-      _iteratorError1 = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-          _iterator1.return();
-        }
-      } finally {
-        if (_didIteratorError1) {
-          throw _iteratorError1;
-        }
-      }
-    }
-    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]);
-  var handleClearKnobs = (0, import_react.useCallback)(function () {
-    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]);
-  var handleApplyDefaults = (0, import_react.useCallback)(function () {
-    setOverrides(new Set(knobKeys));
-    setPinnedKnobs(/* @__PURE__ */new Set());
-    setExpandedKnobs(/* @__PURE__ */new Set());
-    setActiveProfile("");
-    setPreset("");
-    setKnobs({
-      ...import_knobs.defaultKnobs
-    });
-  }, [setPreset, setKnobs]);
-  var [copyStatus, setCopyStatus] = (0, import_react.useState)("idle");
-  var handleCopySnapshot = (0, import_react.useCallback)(async function () {
-    var _extractThemeTokenColors, _extractThemeTokenColors1;
-    var knobValues = {};
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = Object.entries(knobs)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var [key, value] = _step.value;
-        if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") {
-          var _iteratorNormalCompletion1 = true,
-            _didIteratorError1 = false,
-            _iteratorError1 = void 0;
-          try {
-            for (var _iterator1 = Object.entries(value)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-              var [sk, sv] = _step1.value;
-              if (sv) knobValues[`${key}.${sk}`] = sv;
-            }
-          } catch (err) {
-            _didIteratorError1 = true;
-            _iteratorError1 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-                _iterator1.return();
-              }
-            } finally {
-              if (_didIteratorError1) {
-                throw _iteratorError1;
-              }
-            }
-          }
-        } else {
-          knobValues[key] = String(value);
-        }
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-    var lightColors = (_extractThemeTokenColors = extractThemeTokenColors(tamaguiConfig, "light", currentThemeColor)) !== null && _extractThemeTokenColors !== void 0 ? _extractThemeTokenColors : [];
-    var darkColors = (_extractThemeTokenColors1 = extractThemeTokenColors(tamaguiConfig, "dark", currentThemeColor)) !== null && _extractThemeTokenColors1 !== void 0 ? _extractThemeTokenColors1 : [];
-    var snapshot = (0, import_buildSnapshot.buildSnapshot)({
-      knobValues,
-      activePreset: activePresetName !== null && activePresetName !== void 0 ? activePresetName : void 0,
-      schemeSetting: scheme === null || scheme === void 0 ? void 0 : scheme.setting,
-      schemeValue: scheme === null || scheme === void 0 ? void 0 : scheme.value,
-      currentColor: currentThemeColor,
-      lightColors,
-      darkColors
-    });
-    var success = await (0, import_platform.writeToClipboard)(snapshot);
-    if (success) {
-      setCopyStatus("copied");
-      setTimeout(function () {
-        return setCopyStatus("idle");
-      }, 2e3);
-    } else {
-      setCopyStatus("error");
-      setTimeout(function () {
-        return setCopyStatus("idle");
-      }, 2e3);
-    }
-  }, [knobs, activePresetName, scheme, currentThemeColor, tamaguiConfig]);
-  var handleRandomize = (0, import_react.useCallback)(function () {
-    var pick = function pick2(arr) {
-      return arr[Math.floor(Math.random() * arr.length)];
-    };
-    var 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
-    };
-    var partial = {};
-    var newOverrides = new Set(knobKeys);
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = knobKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var key = _step.value;
-        if (pinnedKnobs.has(key)) continue;
-        var values = knobEnums[key];
-        if (values) partial[key] = pick(values);
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-    if (expandedKnobs.size > 0) {
-      var 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)
-      };
-      var _iteratorNormalCompletion1 = true,
-        _didIteratorError1 = false,
-        _iteratorError1 = void 0;
-      try {
-        for (var _iterator1 = import_knobs.interactionStates[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-          var state = _step1.value;
-          var statePartial = {};
-          var _iteratorNormalCompletion2 = true,
-            _didIteratorError2 = false,
-            _iteratorError2 = void 0;
-          try {
-            for (var _iterator2 = expandedKnobs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-              var key1 = _step2.value;
-              var values1 = knobEnumsForState[key1];
-              if (values1) statePartial[key1] = pick(values1);
-            }
-          } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-                _iterator2.return();
-              }
-            } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
-              }
-            }
-          }
-          if (Object.keys(statePartial).length > 0) {
-            partial[state] = statePartial;
-          }
-        }
-      } catch (err) {
-        _didIteratorError1 = true;
-        _iteratorError1 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-            _iterator1.return();
-          }
-        } finally {
-          if (_didIteratorError1) {
-            throw _iteratorError1;
-          }
-        }
-      }
-    }
-    setOverrides(newOverrides);
-    setKnobs(partial);
-    if (!pinnedKnobs.has("color") && themeColors && onThemeColorChange) {
-      var nonEmpty = themeColors.filter(function (c) {
-        return 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]);
-  var presetOptions = (0, import_react.useMemo)(function () {
-    var registered = (0, import_shared.getPresetNames)();
-    var names = new Set(registered);
-    if (extraPresets) {
-      var _iteratorNormalCompletion = true,
-        _didIteratorError = false,
-        _iteratorError = void 0;
-      try {
-        for (var _iterator = extraPresets[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var name = _step.value;
-          names.add(name);
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-    }
-    return ["", ...Array.from(names).filter(Boolean).sort()];
-  }, [extraPresets]);
-  var handlePresetChange = (0, import_react.useCallback)(function (presetName) {
-    if (!presetName) return;
-    setPreset(presetName);
-    setOverrides(/* @__PURE__ */new Set());
-  }, [setPreset]);
-  var handleResetToPreset = (0, import_react.useCallback)(function () {
-    if (activePresetName) {
-      setPreset(activePresetName);
-    } else {
-      setKnobs({
-        ...import_knobs.defaultKnobs
-      });
-    }
-    setOverrides(/* @__PURE__ */new Set());
-  }, [activePresetName, setPreset, setKnobs]);
-  var prevDevtoolsTheme = (0, import_react.useRef)(void 0);
-  (0, import_react.useEffect)(function () {
-    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]);
-  var schemeValue = scheme === null || scheme === void 0 ? void 0 : scheme.value;
-  (0, import_react.useEffect)(function () {
-    if (!schemeValue) return;
-    void Promise.resolve(import_store.storage.getItem(tanstackDevtoolsSettings)).then(function (raw) {
-      var settings = raw ? JSON.parse(raw) : {};
-      if (settings.theme !== schemeValue) {
-        settings.theme = schemeValue;
-        return Promise.resolve(import_store.storage.setItem(tanstackDevtoolsSettings, JSON.stringify(settings)));
-      }
-    }).catch(function () {});
-  },
-  // storage may be unavailable (e.g. SSR, iframe sandbox)
-  [schemeValue]);
-  var getOverride = function getOverride2(key) {
-    return overrides.has(key) ? knobs[key] : void 0;
-  };
-  var inheritedKnob = (0, import_react.useCallback)(function (key) {
-    var activeProfileConfig = activeProfile ? designProfiles[activeProfile] : void 0;
-    if (activeProfileConfig === null || activeProfileConfig === void 0 ? void 0 : activeProfileConfig[key]) {
-      return activeProfileConfig[key];
-    }
-    if (activePresetName) {
-      var _getPreset;
-      var presetKnobs = (_getPreset = (0, import_shared.getPreset)(activePresetName)) === null || _getPreset === void 0 ? void 0 : _getPreset.knobs;
-      if ((presetKnobs === null || presetKnobs === void 0 ? void 0 : presetKnobs[key]) !== void 0) return presetKnobs[key];
-    }
-    return import_knobs.defaultKnobs[key];
-  }, [activeProfile, activePresetName]);
-  var unset = (0, import_react.useCallback)(function (key) {
-    setOverrides(function (prev) {
-      var next = new Set(prev);
-      next.delete(key);
-      return next;
-    });
-    setKnobs({
-      [key]: inheritedKnob(key)
-    });
-  }, [setKnobs, inheritedKnob]);
-  var setStateKnob = (0, import_react.useCallback)(function (state, key, value) {
-    var current = knobsRef.current;
-    setKnobs({
-      [state]: {
-        ...current[state],
-        [key]: value === "" ? void 0 : value
-      }
-    });
-    setOverrides(function (prev) {
-      return new Set(prev).add(state);
-    });
-    if (activeProfile) setActiveProfile("");
-  }, [setKnobs, activeProfile]);
-  var getStateKnob = function getStateKnob2(state, key) {
-    var _stateKnobs_key;
-    var stateKnobs = knobs[state];
-    return (_stateKnobs_key = stateKnobs[key]) !== null && _stateKnobs_key !== void 0 ? _stateKnobs_key : "";
-  };
-  var stateRows = function stateRows2(knobKey, options, icon) {
-    return import_knobs.interactionStates.map(function (state) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StateSubRow, {
-        stateName: stateDisplayLabels[state],
-        options,
-        value: getStateKnob(state, knobKey),
-        onChange: function onChange(v) {
-          return setStateKnob(state, knobKey, v);
-        },
-        icon,
-        styles,
-        isDark
-      }, state);
-    });
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
-    style: styles.panel,
-    children: [/* ── Knobs ── */
-    /* @__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 !== null && activePresetName !== void 0 ? activePresetName : "",
-        onChange: function onChange(v) {
-          return 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 !== null && currentThemeColor !== void 0 ? currentThemeColor : "",
-        onChange: function onChange(v) {
-          return onThemeColorChange(v);
-        },
-        format: function format(v) {
-          return v === "" ? "none" : String(v);
-        },
-        styles,
-        pinned: pinnedKnobs.has("color"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("color");
-        },
-        isDark
-      }), scheme && /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Scheme",
-        options: ["system", "light", "dark"],
-        value: scheme.setting,
-        onChange: function onChange(v) {
-          return scheme.set(v);
-        },
-        icon: modeIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("scheme"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("scheme");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Fill",
-        options: Object.values(import_knobs.FillStyle),
-        value: getOverride("fillStyle"),
-        onChange: function onChange(v) {
-          return set("fillStyle", v);
-        },
-        icon: fillIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("fillStyle"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("fillStyle");
-        },
-        expanded: expandedKnobs.has("fillStyle"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("fillStyle");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("borderRadius", v);
-        },
-        icon: borderRadiusIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("borderRadius"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("borderRadius");
-        },
-        expanded: expandedKnobs.has("borderRadius"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("borderRadius");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("cornerSmoothing", v);
-        },
-        icon: cornerSmoothingIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("cornerSmoothing"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("cornerSmoothing");
-        },
-        onUnset: function onUnset() {
-          return unset("cornerSmoothing");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Border",
-        options: Object.values(import_knobs.BorderWidth),
-        value: getOverride("borderWidth"),
-        onChange: function onChange(v) {
-          return set("borderWidth", v);
-        },
-        icon: borderWidthIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("borderWidth"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("borderWidth");
-        },
-        expanded: expandedKnobs.has("borderWidth"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("borderWidth");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("elevation", v);
-        },
-        icon: elevationIconWrap,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("elevation"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("elevation");
-        },
-        expanded: expandedKnobs.has("elevation"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("elevation");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("textAccent", v);
-        },
-        icon: textAccentIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("textAccent"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("textAccent");
-        },
-        expanded: expandedKnobs.has("textAccent"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("textAccent");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("headingFont", v);
-        },
-        icon: headingFontIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("headingFont"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("headingFont");
-        },
-        expanded: expandedKnobs.has("headingFont"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("headingFont");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("bodyFont", v);
-        },
-        icon: bodyFontIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("bodyFont"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("bodyFont");
-        },
-        expanded: expandedKnobs.has("bodyFont"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("bodyFont");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(v) {
-          return set("fontWeight", v);
-        },
-        icon: fontWeightIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("fontWeight"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("fontWeight");
-        },
-        expanded: expandedKnobs.has("fontWeight"),
-        onToggleExpand: function onToggleExpand() {
-          return toggleExpand("fontWeight");
-        },
-        onUnset: function onUnset() {
-          return unset("fontWeight");
-        },
-        children: stateRows("fontWeight", Object.values(import_knobs.FontWeight), fontWeightIcon)
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Dropdown, {
-        label: "Animation",
-        options: animationOptions,
-        value: (_getOverride = getOverride("animation")) !== null && _getOverride !== void 0 ? _getOverride : "",
-        onChange: function onChange(v) {
-          return set("animation", v);
-        },
-        onUnset: function onUnset() {
-          return unset("animation");
-        },
-        styles,
-        pinned: pinnedKnobs.has("animation"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("animation");
-        },
-        isDark
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Label place",
-        options: Object.values(import_knobs.FieldLabelPlacement),
-        value: getOverride("fieldLabelPlacement"),
-        onChange: function onChange(v) {
-          return set("fieldLabelPlacement", v);
-        },
-        icon: fieldLabelPlacementIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("fieldLabelPlacement"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("fieldLabelPlacement");
-        },
-        onUnset: function onUnset() {
-          return unset("fieldLabelPlacement");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Required mark",
-        options: Object.values(import_knobs.RequiredMarking),
-        value: getOverride("requiredMarking"),
-        onChange: function onChange(v) {
-          return set("requiredMarking", v);
-        },
-        icon: requiredMarkingIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("requiredMarking"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("requiredMarking");
-        },
-        onUnset: function onUnset() {
-          return unset("requiredMarking");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Zebra",
-        options: Object.values(import_knobs.TableZebra),
-        value: getOverride("tableZebra"),
-        onChange: function onChange(v) {
-          return set("tableZebra", v);
-        },
-        icon: tableZebraIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("tableZebra"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("tableZebra");
-        },
-        onUnset: function onUnset() {
-          return unset("tableZebra");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Bulk bar",
-        options: Object.values(import_knobs.BulkBarPlacement),
-        value: getOverride("bulkBarPlacement"),
-        onChange: function onChange(v) {
-          return set("bulkBarPlacement", v);
-        },
-        icon: bulkBarPlacementIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("bulkBarPlacement"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("bulkBarPlacement");
-        },
-        onUnset: function onUnset() {
-          return unset("bulkBarPlacement");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Select all",
-        options: Object.values(import_knobs.SelectAllScope),
-        value: getOverride("selectAllScope"),
-        onChange: function onChange(v) {
-          return set("selectAllScope", v);
-        },
-        icon: selectAllScopeIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("selectAllScope"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("selectAllScope");
-        },
-        onUnset: function onUnset() {
-          return unset("selectAllScope");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Timestamp",
-        options: Object.values(import_knobs.TimestampStyle),
-        value: getOverride("timestampStyle"),
-        onChange: function onChange(v) {
-          return set("timestampStyle", v);
-        },
-        icon: timestampStyleIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("timestampStyle"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("timestampStyle");
-        },
-        onUnset: function onUnset() {
-          return unset("timestampStyle");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Disabled",
-        options: Object.values(import_knobs.DisabledStyle),
-        value: getOverride("disabledStyle"),
-        onChange: function onChange(v) {
-          return set("disabledStyle", v);
-        },
-        icon: disabledStyleIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("disabledStyle"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("disabledStyle");
-        },
-        onUnset: function onUnset() {
-          return unset("disabledStyle");
-        }
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconGroup, {
-        label: "Autofocus",
-        options: Object.values(import_knobs.FormAutofocus),
-        value: getOverride("formAutofocus"),
-        onChange: function onChange(v) {
-          return set("formAutofocus", v);
-        },
-        icon: formAutofocusIcon,
-        styles,
-        isDark,
-        pinned: pinnedKnobs.has("formAutofocus"),
-        onTogglePin: function onTogglePin() {
-          return togglePin("formAutofocus");
-        },
-        onUnset: function onUnset() {
-          return 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: function onChange(e) {
-            return handleProfileChange(e.target.value);
-          },
-          style: {
-            ...styles.select,
-            width: "auto",
-            fontSize: 11,
-            opacity: activeProfile ? 1 : 0.6
-          },
-          children: profileNames.map(function (name) {
-            return /* @__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"
-            })]
-          })
-        })]
-      })]
-    }), /* ── Color palette ── */
-    /* @__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")
-    })]
-  });
+module.exports = __toCommonJS(ThemeDevtoolsPanel_native_exports);
+function ThemeDevtoolsPanel(_props) {
+  return null;
 }
 //# sourceMappingURL=ThemeDevtoolsPanel.native.js.map