@multiplatform.one/theme 7.83.1 → 7.84.0

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

@@ -0,0 +1,1786 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { writeToClipboard } from "@multiplatform.one/platform";
+import { storage } from "@multiplatform.one/store";
+import { useTheme } from "../useTheme.native.js";
+import { defaultKnobs, FillStyle, BorderRadius, CornerSmoothing, BorderWidth, Elevation, TextAccent, HeadingFont, BodyFont, FontWeight, FieldLabelPlacement, RequiredMarking, TableZebra, BulkBarPlacement, SelectAllScope, TimestampStyle, DisabledStyle, FormAutofocus, interactionStates } from "../knobs.native.js";
+import { getPresetNames, getPreset } from "../shared.native.js";
+import { defaultScaleInputs } from "../scale/scaleInputs.native.js";
+import { extractAnimationNames } from "./animationOptions.native.js";
+import { ColorLineVisualizer } from "./ColorLineVisualizer.native.js";
+import { buildSnapshot } from "./buildSnapshot.native.js";
+import { fillIcon as _fillIcon, borderRadiusIcon as _borderRadiusIcon, cornerSmoothingIcon as _cornerSmoothingIcon, borderWidthIcon as _borderWidthIcon, elevationIcon as _elevationIcon, textAccentIcon as _textAccentIcon, headingFontIcon as _headingFontIcon, bodyFontIcon as _bodyFontIcon, fontWeightIcon as _fontWeightIcon, modeIcon as _modeIcon, fieldLabelPlacementIcon as _fieldLabelPlacementIcon, requiredMarkingIcon as _requiredMarkingIcon, tableZebraIcon as _tableZebraIcon, bulkBarPlacementIcon as _bulkBarPlacementIcon, selectAllScopeIcon as _selectAllScopeIcon, timestampStyleIcon as _timestampStyleIcon, disabledStyleIcon as _disabledStyleIcon, formAutofocusIcon as _formAutofocusIcon } from "./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 = 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 : defaultScaleInputs.control;
+  var type = (_ref1 = scale === null || scale === void 0 ? void 0 : scale.type) !== null && _ref1 !== void 0 ? _ref1 : 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__ */_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__ */_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__ */_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__ */_jsx(PinCheckbox, {
+      pinned: !!pinned,
+      onToggle: onTogglePin,
+      isDark: !!isDark
+    }), /* @__PURE__ */_jsx("span", {
+      style: styles.label,
+      children: label
+    }), /* @__PURE__ */_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__ */_jsx("option", {
+        value: "__unset__",
+        style: optionStyle,
+        children: "unset (inherit)"
+      }), options.map(function (opt) {
+        return /* @__PURE__ */_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__ */_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__ */_jsxs("svg", {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      role: "img",
+      "aria-label": "Toggle",
+      children: [/* @__PURE__ */_jsx("title", {
+        children: "Toggle state overrides"
+      }), /* @__PURE__ */_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__ */_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__ */_jsx(PinCheckbox, {
+      pinned: !!pinned,
+      onToggle: onTogglePin,
+      isDark
+    }), /* @__PURE__ */_jsxs("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4
+      },
+      children: [onToggleExpand && /* @__PURE__ */_jsx(CollapseButton, {
+        expanded: !!expanded,
+        onToggle: onToggleExpand,
+        isDark
+      }), /* @__PURE__ */_jsx("span", {
+        style: styles.label,
+        children: label
+      })]
+    }), /* @__PURE__ */_jsxs("div", {
+      style: styles.iconRow,
+      children: [onUnset && /* @__PURE__ */_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__ */_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__ */_jsxs("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 4,
+      marginTop: 2
+    },
+    children: [/* @__PURE__ */_jsx("span", {
+      style: {
+        fontSize: 9,
+        fontWeight: 500,
+        color: isDark ? "#666" : "#aaa",
+        width: 46,
+        textAlign: "right",
+        flexShrink: 0
+      },
+      children: stateName
+    }), /* @__PURE__ */_jsxs("div", {
+      style: {
+        ...styles.iconRow,
+        gap: 2
+      },
+      children: [/* @__PURE__ */_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__ */_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 _modeIcon(v, ic(active, dark));
+}
+function fillIcon(v, active, dark) {
+  return _fillIcon(v, ic(active, dark));
+}
+function borderRadiusIcon(v, active, dark) {
+  return _borderRadiusIcon(v, ic(active, dark));
+}
+function cornerSmoothingIcon(v, active, dark) {
+  return _cornerSmoothingIcon(v, ic(active, dark));
+}
+function borderWidthIcon(v, active, dark) {
+  return _borderWidthIcon(v, ic(active, dark));
+}
+function elevationIconWrap(v, active, dark) {
+  return _elevationIcon(v, ic(active, dark), dark);
+}
+function textAccentIcon(v, active, dark) {
+  return _textAccentIcon(v, ic(active, dark));
+}
+function headingFontIcon(v, active, dark) {
+  return _headingFontIcon(v, ic(active, dark));
+}
+function bodyFontIcon(v, active, dark) {
+  return _bodyFontIcon(v, ic(active, dark));
+}
+function fontWeightIcon(v, active, dark) {
+  return _fontWeightIcon(v, ic(active, dark));
+}
+function fieldLabelPlacementIcon(v, active, dark) {
+  return _fieldLabelPlacementIcon(v, ic(active, dark));
+}
+function requiredMarkingIcon(v, active, dark) {
+  return _requiredMarkingIcon(v, ic(active, dark));
+}
+function tableZebraIcon(v, active, dark) {
+  return _tableZebraIcon(v, ic(active, dark));
+}
+function bulkBarPlacementIcon(v, active, dark) {
+  return _bulkBarPlacementIcon(v, ic(active, dark));
+}
+function selectAllScopeIcon(v, active, dark) {
+  return _selectAllScopeIcon(v, ic(active, dark));
+}
+function timestampStyleIcon(v, active, dark) {
+  return _timestampStyleIcon(v, ic(active, dark));
+}
+function disabledStyleIcon(v, active, dark) {
+  return _disabledStyleIcon(v, ic(active, dark));
+}
+function formAutofocusIcon(v, active, dark) {
+  return _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] = useTheme();
+  var scheme = useUserScheme === null || useUserScheme === void 0 ? void 0 : useUserScheme();
+  var isDark = devtoolsTheme !== "light";
+  var styles = useMemo(function () {
+    return createStyles(isDark);
+  }, [isDark]);
+  var animationOptions = useMemo(function () {
+    return ["none", ...extractAnimationNames(tamaguiConfig)];
+  }, [tamaguiConfig]);
+  var [overrides, setOverrides] = useState(function () {
+    var _getPreset;
+    var presetKnobs = activePresetName ? (_getPreset = 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 : defaultKnobs[key]);
+    }));
+  });
+  var [pinnedKnobs, setPinnedKnobs] = useState(function () {
+    try {
+      var raw = 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] = useState("");
+  var [expandedKnobs, setExpandedKnobs] = useState(function () {
+    try {
+      var raw = 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 = useRef(knobs);
+  knobsRef.current = knobs;
+  useEffect(function () {
+    void Promise.resolve(storage.setItem(pinnedKnobsStorageKey, JSON.stringify([...pinnedKnobs]))).catch(function () {});
+  }, [pinnedKnobs]);
+  useEffect(function () {
+    void Promise.resolve(storage.setItem(expandedKnobsStorageKey, JSON.stringify([...expandedKnobs]))).catch(function () {});
+  }, [expandedKnobs]);
+  var clearStateOverridesForKeys = useCallback(function (keys) {
+    var current = knobsRef.current;
+    var partial = {};
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = 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 = 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 = 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 = 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 = 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 = useMemo(function () {
+    return stateKnobKeys.every(function (key) {
+      return expandedKnobs.has(key);
+    });
+  }, [expandedKnobs]);
+  var handleToggleAllStates = 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 = useCallback(function (key, value) {
+    setOverrides(function (prev) {
+      return new Set(prev).add(key);
+    });
+    setKnobs({
+      [key]: value
+    });
+    if (activeProfile) setActiveProfile("");
+  }, [setKnobs, activeProfile]);
+  var handleProfileChange = 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 = 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({
+        ...defaultKnobs
+      });
+    }
+  }, [activeProfile, handleProfileChange, activePresetName, setPreset, setKnobs]);
+  var handleApplyDefaults = useCallback(function () {
+    setOverrides(new Set(knobKeys));
+    setPinnedKnobs(/* @__PURE__ */new Set());
+    setExpandedKnobs(/* @__PURE__ */new Set());
+    setActiveProfile("");
+    setPreset("");
+    setKnobs({
+      ...defaultKnobs
+    });
+  }, [setPreset, setKnobs]);
+  var [copyStatus, setCopyStatus] = useState("idle");
+  var handleCopySnapshot = 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 = 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 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 = useCallback(function () {
+    var pick = function pick2(arr) {
+      return arr[Math.floor(Math.random() * arr.length)];
+    };
+    var knobEnums = {
+      fillStyle: Object.values(FillStyle),
+      borderRadius: Object.values(BorderRadius),
+      borderWidth: Object.values(BorderWidth),
+      elevation: Object.values(Elevation),
+      textAccent: Object.values(TextAccent),
+      headingFont: Object.values(HeadingFont),
+      bodyFont: Object.values(BodyFont),
+      fontWeight: Object.values(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(FillStyle),
+        borderRadius: Object.values(BorderRadius),
+        borderWidth: Object.values(BorderWidth),
+        elevation: Object.values(Elevation),
+        textAccent: Object.values(TextAccent),
+        headingFont: Object.values(HeadingFont),
+        bodyFont: Object.values(BodyFont),
+        fontWeight: Object.values(FontWeight)
+      };
+      var _iteratorNormalCompletion1 = true,
+        _didIteratorError1 = false,
+        _iteratorError1 = void 0;
+      try {
+        for (var _iterator1 = 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 = useMemo(function () {
+    var registered = 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 = useCallback(function (presetName) {
+    if (!presetName) return;
+    setPreset(presetName);
+    setOverrides(/* @__PURE__ */new Set());
+  }, [setPreset]);
+  var handleResetToPreset = useCallback(function () {
+    if (activePresetName) {
+      setPreset(activePresetName);
+    } else {
+      setKnobs({
+        ...defaultKnobs
+      });
+    }
+    setOverrides(/* @__PURE__ */new Set());
+  }, [activePresetName, setPreset, setKnobs]);
+  var prevDevtoolsTheme = useRef(void 0);
+  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;
+  useEffect(function () {
+    if (!schemeValue) return;
+    void Promise.resolve(storage.getItem(tanstackDevtoolsSettings)).then(function (raw) {
+      var settings = raw ? JSON.parse(raw) : {};
+      if (settings.theme !== schemeValue) {
+        settings.theme = schemeValue;
+        return Promise.resolve(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 = 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 = 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 defaultKnobs[key];
+  }, [activeProfile, activePresetName]);
+  var unset = useCallback(function (key) {
+    setOverrides(function (prev) {
+      var next = new Set(prev);
+      next.delete(key);
+      return next;
+    });
+    setKnobs({
+      [key]: inheritedKnob(key)
+    });
+  }, [setKnobs, inheritedKnob]);
+  var setStateKnob = 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 interactionStates.map(function (state) {
+      return /* @__PURE__ */_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__ */_jsxs("div", {
+    style: styles.panel,
+    children: [/* ── Knobs ── */
+    /* @__PURE__ */_jsxs("div", {
+      style: styles.knobsRow,
+      children: [presetOptions.length > 1 && /* @__PURE__ */_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__ */_jsx("div", {
+        style: styles.card,
+        children: /* @__PURE__ */_jsx("button", {
+          type: "button",
+          style: styles.resetBtn,
+          onClick: handleResetToPreset,
+          children: "Reset to Preset"
+        })
+      }), themeColors && themeColors.length > 1 && onThemeColorChange && /* @__PURE__ */_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__ */_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__ */_jsx(IconGroup, {
+        label: "Fill",
+        options: Object.values(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(FillStyle), fillIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Radius",
+        options: Object.values(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(BorderRadius), borderRadiusIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Smoothing",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Border",
+        options: Object.values(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(BorderWidth), borderWidthIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Elevation",
+        options: Object.values(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(Elevation), elevationIconWrap)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Text Accent",
+        options: Object.values(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(TextAccent), textAccentIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Heading",
+        options: Object.values(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(HeadingFont), headingFontIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Body",
+        options: Object.values(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(BodyFont), bodyFontIcon)
+      }), /* @__PURE__ */_jsx(IconGroup, {
+        label: "Weight",
+        options: Object.values(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(FontWeight), fontWeightIcon)
+      }), /* @__PURE__ */_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__ */_jsx(IconGroup, {
+        label: "Label place",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Required mark",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Zebra",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Bulk bar",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Select all",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Timestamp",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Disabled",
+        options: Object.values(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__ */_jsx(IconGroup, {
+        label: "Autofocus",
+        options: Object.values(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__ */_jsxs("div", {
+        style: {
+          ...styles.card,
+          flexDirection: "row",
+          gap: 6,
+          flexWrap: "wrap"
+        },
+        children: [/* @__PURE__ */_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__ */_jsx("option", {
+              value: name,
+              children: name || "profile"
+            }, name);
+          })
+        }), /* @__PURE__ */_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__ */_jsx("button", {
+          type: "button",
+          style: styles.resetBtn,
+          onClick: handleRandomize,
+          children: "Random"
+        }), /* @__PURE__ */_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__ */_jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "States",
+            children: [/* @__PURE__ */_jsx("title", {
+              children: allStateKnobsExpanded ? "Collapse States" : "Expand States"
+            }), /* @__PURE__ */_jsx("path", {
+              d: "M2.5 4.5h7M2.5 8h7M2.5 11.5h7",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              strokeLinecap: "round"
+            }), /* @__PURE__ */_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__ */_jsx("button", {
+          type: "button",
+          style: styles.iconBtn(false),
+          onClick: handleApplyDefaults,
+          title: "Apply Defaults",
+          "aria-label": "Apply Defaults",
+          children: /* @__PURE__ */_jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "Defaults",
+            children: [/* @__PURE__ */_jsx("title", {
+              children: "Apply Defaults"
+            }), /* @__PURE__ */_jsx("path", {
+              d: "M2.5 4.5h11M2.5 8h11M2.5 11.5h11",
+              stroke: "currentColor",
+              strokeWidth: "1.3",
+              strokeLinecap: "round"
+            }), /* @__PURE__ */_jsx("circle", {
+              cx: "5",
+              cy: "4.5",
+              r: "1.2",
+              fill: "currentColor"
+            }), /* @__PURE__ */_jsx("circle", {
+              cx: "8",
+              cy: "8",
+              r: "1.2",
+              fill: "currentColor"
+            }), /* @__PURE__ */_jsx("circle", {
+              cx: "11",
+              cy: "11.5",
+              r: "1.2",
+              fill: "currentColor"
+            })]
+          })
+        }), /* @__PURE__ */_jsx("button", {
+          type: "button",
+          style: styles.iconBtn(false),
+          onClick: handleClearKnobs,
+          title: "Clear",
+          "aria-label": "Clear",
+          children: /* @__PURE__ */_jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            role: "img",
+            "aria-label": "Clear",
+            children: [/* @__PURE__ */_jsx("title", {
+              children: "Clear"
+            }), /* @__PURE__ */_jsx("path", {
+              d: "M3.5 3.5l9 9M12.5 3.5l-9 9",
+              stroke: "currentColor",
+              strokeWidth: "1.4",
+              strokeLinecap: "round"
+            })]
+          })
+        })]
+      })]
+    }), /* ── Color palette ── */
+    /* @__PURE__ */_jsx(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")
+    })]
+  });
+}
+export { ThemeDevtoolsPanel };
+//# sourceMappingURL=ThemeDevtoolsPanel.native.js.map