@industry-theme/theme-editor-panel 0.1.0

package/dist/panels.bundle.js

@@ -0,0 +1,972 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React2, { createContext, useState, useEffect, useContext, forwardRef, createElement, useRef, useLayoutEffect, useCallback, useMemo } from "react";
+var terminalTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: {
+    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8
+  },
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    "none",
+    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+  colors: {
+    text: "#e4e4e4",
+    background: "rgba(10, 10, 10, 0.85)",
+    primary: "#66b3ff",
+    secondary: "#80c4ff",
+    accent: "#66ff99",
+    highlight: "rgba(102, 179, 255, 0.15)",
+    muted: "rgba(26, 26, 26, 0.8)",
+    success: "#66ff99",
+    warning: "#ffcc66",
+    error: "#ff6666",
+    info: "#66b3ff",
+    border: "rgba(255, 255, 255, 0.1)",
+    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+    backgroundLight: "rgba(255, 255, 255, 0.05)",
+    backgroundHover: "rgba(102, 179, 255, 0.08)",
+    surface: "rgba(15, 15, 15, 0.95)",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    textMuted: "rgba(255, 255, 255, 0.4)",
+    highlightBg: "rgba(255, 235, 59, 0.25)",
+    highlightBorder: "rgba(255, 235, 59, 0.5)"
+  },
+  modes: {
+    light: {
+      text: "#1a1a1a",
+      background: "rgba(255, 255, 255, 0.9)",
+      primary: "#0066cc",
+      secondary: "#0052a3",
+      accent: "#00cc88",
+      highlight: "rgba(0, 102, 204, 0.08)",
+      muted: "rgba(245, 245, 245, 0.8)",
+      success: "#00cc88",
+      warning: "#ffaa00",
+      error: "#ff3333",
+      info: "#0066cc",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+      backgroundLight: "rgba(0, 0, 0, 0.02)",
+      backgroundHover: "rgba(0, 102, 204, 0.04)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "rgba(0, 0, 0, 0.6)",
+      textTertiary: "rgba(0, 0, 0, 0.4)",
+      textMuted: "rgba(0, 0, 0, 0.3)",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      bg: "primary",
+      borderWidth: 0,
+      "&:hover": {
+        bg: "secondary"
+      }
+    },
+    secondary: {
+      color: "primary",
+      bg: "transparent",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "primary",
+      "&:hover": {
+        bg: "highlight"
+      }
+    },
+    ghost: {
+      color: "text",
+      bg: "transparent",
+      "&:hover": {
+        bg: "backgroundHover"
+      }
+    }
+  },
+  text: {
+    heading: {
+      fontFamily: "heading",
+      fontWeight: "heading",
+      lineHeight: "heading"
+    },
+    body: {
+      fontFamily: "body",
+      fontWeight: "body",
+      lineHeight: "body"
+    },
+    caption: {
+      fontSize: 1,
+      color: "textSecondary"
+    }
+  },
+  cards: {
+    primary: {
+      bg: "surface",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    },
+    secondary: {
+      bg: "backgroundSecondary",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    }
+  }
+};
+function getMode(theme2, mode) {
+  if (!mode || !theme2.modes || !theme2.modes[mode]) {
+    return theme2.colors;
+  }
+  return {
+    ...theme2.colors,
+    ...theme2.modes[mode]
+  };
+}
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({
+  children,
+  theme: customTheme = theme,
+  initialMode
+}) => {
+  const [mode, setMode] = useState(initialMode);
+  const activeTheme = React2.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem("principlemd-theme-mode", mode);
+    } else {
+      localStorage.removeItem("principlemd-theme-mode");
+    }
+  }, [mode]);
+  const value = {
+    theme: activeTheme,
+    mode,
+    setMode
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var theme = terminalTheme;
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z",
+      key: "e79jfc"
+    }
+  ],
+  ["circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor", key: "1okk4w" }],
+  ["circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor", key: "f64h9f" }],
+  ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
+  ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }]
+];
+const Palette = createLucideIcon("palette", __iconNode$1);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+];
+const RotateCcw = createLucideIcon("rotate-ccw", __iconNode);
+function u() {
+  return (u = Object.assign || function(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = arguments[r];
+      for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+    }
+    return e;
+  }).apply(this, arguments);
+}
+function c(e, r) {
+  if (null == e) return {};
+  var t, n, o = {}, a = Object.keys(e);
+  for (n = 0; n < a.length; n++) r.indexOf(t = a[n]) >= 0 || (o[t] = e[t]);
+  return o;
+}
+function i(e) {
+  var t = useRef(e), n = useRef(function(e2) {
+    t.current && t.current(e2);
+  });
+  return t.current = e, n.current;
+}
+var s = function(e, r, t) {
+  return void 0 === r && (r = 0), void 0 === t && (t = 1), e > t ? t : e < r ? r : e;
+}, f = function(e) {
+  return "touches" in e;
+}, v = function(e) {
+  return e && e.ownerDocument.defaultView || self;
+}, d = function(e, r, t) {
+  var n = e.getBoundingClientRect(), o = f(r) ? (function(e2, r2) {
+    for (var t2 = 0; t2 < e2.length; t2++) if (e2[t2].identifier === r2) return e2[t2];
+    return e2[0];
+  })(r.touches, t) : r;
+  return { left: s((o.pageX - (n.left + v(e).pageXOffset)) / n.width), top: s((o.pageY - (n.top + v(e).pageYOffset)) / n.height) };
+}, h = function(e) {
+  !f(e) && e.preventDefault();
+}, m = React2.memo(function(o) {
+  var a = o.onMove, l = o.onKey, s2 = c(o, ["onMove", "onKey"]), m2 = useRef(null), g2 = i(a), p2 = i(l), b2 = useRef(null), _ = useRef(false), x2 = useMemo(function() {
+    var e = function(e2) {
+      h(e2), (f(e2) ? e2.touches.length > 0 : e2.buttons > 0) && m2.current ? g2(d(m2.current, e2, b2.current)) : t(false);
+    }, r = function() {
+      return t(false);
+    };
+    function t(t2) {
+      var n = _.current, o2 = v(m2.current), a2 = t2 ? o2.addEventListener : o2.removeEventListener;
+      a2(n ? "touchmove" : "mousemove", e), a2(n ? "touchend" : "mouseup", r);
+    }
+    return [function(e2) {
+      var r2 = e2.nativeEvent, n = m2.current;
+      if (n && (h(r2), !(function(e3, r3) {
+        return r3 && !f(e3);
+      })(r2, _.current) && n)) {
+        if (f(r2)) {
+          _.current = true;
+          var o2 = r2.changedTouches || [];
+          o2.length && (b2.current = o2[0].identifier);
+        }
+        n.focus(), g2(d(n, r2, b2.current)), t(true);
+      }
+    }, function(e2) {
+      var r2 = e2.which || e2.keyCode;
+      r2 < 37 || r2 > 40 || (e2.preventDefault(), p2({ left: 39 === r2 ? 0.05 : 37 === r2 ? -0.05 : 0, top: 40 === r2 ? 0.05 : 38 === r2 ? -0.05 : 0 }));
+    }, t];
+  }, [p2, g2]), C2 = x2[0], E = x2[1], H = x2[2];
+  return useEffect(function() {
+    return H;
+  }, [H]), React2.createElement("div", u({}, s2, { onTouchStart: C2, onMouseDown: C2, className: "react-colorful__interactive", ref: m2, onKeyDown: E, tabIndex: 0, role: "slider" }));
+}), g = function(e) {
+  return e.filter(Boolean).join(" ");
+}, p = function(r) {
+  var t = r.color, n = r.left, o = r.top, a = void 0 === o ? 0.5 : o, l = g(["react-colorful__pointer", r.className]);
+  return React2.createElement("div", { className: l, style: { top: 100 * a + "%", left: 100 * n + "%" } }, React2.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: t } }));
+}, b = function(e, r, t) {
+  return void 0 === r && (r = 0), void 0 === t && (t = Math.pow(10, r)), Math.round(t * e) / t;
+}, x = function(e) {
+  return L(C(e));
+}, C = function(e) {
+  return "#" === e[0] && (e = e.substring(1)), e.length < 6 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: 4 === e.length ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : { r: parseInt(e.substring(0, 2), 16), g: parseInt(e.substring(2, 4), 16), b: parseInt(e.substring(4, 6), 16), a: 8 === e.length ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1 };
+}, w = function(e) {
+  return K(I(e));
+}, y = function(e) {
+  var r = e.s, t = e.v, n = e.a, o = (200 - r) * t / 100;
+  return { h: b(e.h), s: b(o > 0 && o < 200 ? r * t / 100 / (o <= 100 ? o : 200 - o) * 100 : 0), l: b(o / 2), a: b(n, 2) };
+}, q = function(e) {
+  var r = y(e);
+  return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
+}, I = function(e) {
+  var r = e.h, t = e.s, n = e.v, o = e.a;
+  r = r / 360 * 6, t /= 100, n /= 100;
+  var a = Math.floor(r), l = n * (1 - t), u2 = n * (1 - (r - a) * t), c2 = n * (1 - (1 - r + a) * t), i2 = a % 6;
+  return { r: b(255 * [n, u2, l, l, c2, n][i2]), g: b(255 * [c2, n, n, u2, l, l][i2]), b: b(255 * [l, l, c2, n, n, u2][i2]), a: b(o, 2) };
+}, D = function(e) {
+  var r = e.toString(16);
+  return r.length < 2 ? "0" + r : r;
+}, K = function(e) {
+  var r = e.r, t = e.g, n = e.b, o = e.a, a = o < 1 ? D(b(255 * o)) : "";
+  return "#" + D(r) + D(t) + D(n) + a;
+}, L = function(e) {
+  var r = e.r, t = e.g, n = e.b, o = e.a, a = Math.max(r, t, n), l = a - Math.min(r, t, n), u2 = l ? a === r ? (t - n) / l : a === t ? 2 + (n - r) / l : 4 + (r - t) / l : 0;
+  return { h: b(60 * (u2 < 0 ? u2 + 6 : u2)), s: b(a ? l / a * 100 : 0), v: b(a / 255 * 100), a: o };
+}, S = React2.memo(function(r) {
+  var t = r.hue, n = r.onChange, o = g(["react-colorful__hue", r.className]);
+  return React2.createElement("div", { className: o }, React2.createElement(m, { onMove: function(e) {
+    n({ h: 360 * e.left });
+  }, onKey: function(e) {
+    n({ h: s(t + 360 * e.left, 0, 360) });
+  }, "aria-label": "Hue", "aria-valuenow": b(t), "aria-valuemax": "360", "aria-valuemin": "0" }, React2.createElement(p, { className: "react-colorful__hue-pointer", left: t / 360, color: q({ h: t, s: 100, v: 100, a: 1 }) })));
+}), T = React2.memo(function(r) {
+  var t = r.hsva, n = r.onChange, o = { backgroundColor: q({ h: t.h, s: 100, v: 100, a: 1 }) };
+  return React2.createElement("div", { className: "react-colorful__saturation", style: o }, React2.createElement(m, { onMove: function(e) {
+    n({ s: 100 * e.left, v: 100 - 100 * e.top });
+  }, onKey: function(e) {
+    n({ s: s(t.s + 100 * e.left, 0, 100), v: s(t.v - 100 * e.top, 0, 100) });
+  }, "aria-label": "Color", "aria-valuetext": "Saturation " + b(t.s) + "%, Brightness " + b(t.v) + "%" }, React2.createElement(p, { className: "react-colorful__saturation-pointer", top: 1 - t.v / 100, left: t.s / 100, color: q(t) })));
+}), F = function(e, r) {
+  if (e === r) return true;
+  for (var t in e) if (e[t] !== r[t]) return false;
+  return true;
+}, X = function(e, r) {
+  return e.toLowerCase() === r.toLowerCase() || F(C(e), C(r));
+};
+function Y(e, t, l) {
+  var u2 = i(l), c2 = useState(function() {
+    return e.toHsva(t);
+  }), s2 = c2[0], f2 = c2[1], v2 = useRef({ color: t, hsva: s2 });
+  useEffect(function() {
+    if (!e.equal(t, v2.current.color)) {
+      var r = e.toHsva(t);
+      v2.current = { hsva: r, color: t }, f2(r);
+    }
+  }, [t, e]), useEffect(function() {
+    var r;
+    F(s2, v2.current.hsva) || e.equal(r = e.fromHsva(s2), v2.current.color) || (v2.current = { hsva: s2, color: r }, u2(r));
+  }, [s2, e, u2]);
+  var d2 = useCallback(function(e2) {
+    f2(function(r) {
+      return Object.assign({}, r, e2);
+    });
+  }, []);
+  return [s2, d2];
+}
+var V = "undefined" != typeof window ? useLayoutEffect : useEffect, $ = function() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
+}, J = /* @__PURE__ */ new Map(), Q = function(e) {
+  V(function() {
+    var r = e.current ? e.current.ownerDocument : document;
+    if (void 0 !== r && !J.has(r)) {
+      var t = r.createElement("style");
+      t.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, J.set(r, t);
+      var n = $();
+      n && t.setAttribute("nonce", n), r.head.appendChild(t);
+    }
+  }, []);
+}, U = function(t) {
+  var n = t.className, o = t.colorModel, a = t.color, l = void 0 === a ? o.defaultColor : a, i2 = t.onChange, s2 = c(t, ["className", "colorModel", "color", "onChange"]), f2 = useRef(null);
+  Q(f2);
+  var v2 = Y(o, l, i2), d2 = v2[0], h2 = v2[1], m2 = g(["react-colorful", n]);
+  return React2.createElement("div", u({}, s2, { ref: f2, className: m2 }), React2.createElement(T, { hsva: d2, onChange: h2 }), React2.createElement(S, { hue: d2.h, onChange: h2, className: "react-colorful__last-control" }));
+}, W = { defaultColor: "000", toHsva: x, fromHsva: function(e) {
+  return w({ h: e.h, s: e.s, v: e.v, a: 1 });
+}, equal: X }, Z = function(r) {
+  return React2.createElement(U, u({}, r, { colorModel: W }));
+};
+const ColorPickerInput = ({
+  label,
+  value,
+  onChange,
+  onReset,
+  defaultValue
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [showPicker, setShowPicker] = useState(false);
+  const [inputValue, setInputValue] = useState(value);
+  const pickerRef = useRef(null);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+        setShowPicker(false);
+      }
+    };
+    if (showPicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showPicker]);
+  const handleInputChange = (e) => {
+    const newColor = e.target.value;
+    setInputValue(newColor);
+    if (/^#[0-9A-Fa-f]{6}$/.test(newColor)) {
+      onChange(newColor);
+    }
+  };
+  const handlePickerChange = (newColor) => {
+    setInputValue(newColor);
+    onChange(newColor);
+  };
+  const pickerColor = /^#[0-9A-Fa-f]{6}$/.test(value) ? value : "#000000";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        marginBottom: "12px",
+        position: "relative",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: "0 0 40%",
+              maxWidth: "40%",
+              fontSize: "13px",
+              color: theme2.colors.textSecondary,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => setShowPicker(!showPicker),
+            style: {
+              flex: "0 0 auto",
+              width: "32px",
+              height: "32px",
+              borderRadius: "6px",
+              border: `2px solid ${theme2.colors.border}`,
+              backgroundColor: pickerColor,
+              cursor: "pointer",
+              transition: "transform 0.15s",
+              boxShadow: `0 2px 4px rgba(0, 0, 0, 0.2)`
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.1)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            placeholder: "#000000",
+            style: {
+              flex: "1 1 auto",
+              minWidth: "90px",
+              padding: "8px 10px",
+              borderRadius: "6px",
+              border: `1px solid ${theme2.colors.border}`,
+              backgroundColor: theme2.colors.background,
+              color: theme2.colors.text,
+              fontSize: "13px",
+              fontFamily: "monospace",
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        onReset && defaultValue && value !== defaultValue && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onReset,
+            title: "Reset to default",
+            style: {
+              flex: "0 0 auto",
+              padding: "8px",
+              borderRadius: "6px",
+              border: `1px solid ${theme2.colors.border}`,
+              backgroundColor: theme2.colors.background,
+              color: theme2.colors.textSecondary,
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "all 0.15s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+              e.currentTarget.style.color = theme2.colors.text;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = theme2.colors.background;
+              e.currentTarget.style.color = theme2.colors.textSecondary;
+            },
+            children: /* @__PURE__ */ jsx(RotateCcw, { size: 16 })
+          }
+        ),
+        showPicker && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: pickerRef,
+            style: {
+              position: "absolute",
+              top: "100%",
+              left: "0",
+              marginTop: "8px",
+              zIndex: 1e3,
+              padding: "12px",
+              borderRadius: "12px",
+              backgroundColor: theme2.colors.backgroundSecondary,
+              border: `1px solid ${theme2.colors.border}`,
+              boxShadow: `0 8px 24px rgba(0, 0, 0, 0.4)`
+            },
+            children: /* @__PURE__ */ jsx(Z, { color: pickerColor, onChange: handlePickerChange })
+          }
+        )
+      ]
+    }
+  );
+};
+const HelpContent = () => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        maxWidth: "600px",
+        margin: "0 auto",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: "0 0 24px 0",
+              fontSize: "15px",
+              lineHeight: "1.6",
+              color: theme2.colors.text
+            },
+            children: "Customize the Industry theme colors to match your preferences. Changes will be saved automatically."
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "20px",
+              backgroundColor: theme2.colors.backgroundSecondary,
+              borderRadius: "8px",
+              border: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "h4",
+                {
+                  style: {
+                    margin: "0 0 16px 0",
+                    fontSize: theme2.fontSizes[3],
+                    color: theme2.colors.text,
+                    fontWeight: 600
+                  },
+                  children: "How to Use"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "ul",
+                {
+                  style: {
+                    margin: 0,
+                    paddingLeft: "20px",
+                    fontSize: "14px",
+                    color: theme2.colors.textSecondary,
+                    lineHeight: "1.8"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("li", { children: "Click the color square to open the color picker" }),
+                    /* @__PURE__ */ jsx("li", { children: "Enter hex values directly in the input field" }),
+                    /* @__PURE__ */ jsx("li", { children: "Use the reset button to revert individual colors" }),
+                    /* @__PURE__ */ jsx("li", { children: "All changes are applied immediately" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const COLOR_GROUPS = {
+  "Primary Colors": [
+    { label: "Primary", path: "colors.primary" },
+    { label: "Secondary", path: "colors.secondary" },
+    { label: "Accent", path: "colors.accent" }
+  ],
+  "Background Colors": [
+    { label: "BG Default", path: "colors.background" },
+    { label: "BG Light", path: "colors.backgroundLight" },
+    { label: "BG Dark", path: "colors.backgroundDark" },
+    { label: "BG Secondary", path: "colors.backgroundSecondary" },
+    { label: "BG Tertiary", path: "colors.backgroundTertiary" }
+  ],
+  "Text Colors": [
+    { label: "Text", path: "colors.text" },
+    { label: "Text Secondary", path: "colors.textSecondary" },
+    { label: "Text Tertiary", path: "colors.textTertiary" }
+  ],
+  "UI Colors": [
+    { label: "Border", path: "colors.border" },
+    { label: "Border Light", path: "colors.borderLight" },
+    { label: "Border Dark", path: "colors.borderDark" }
+  ],
+  "Status Colors": [
+    { label: "Success", path: "colors.success" },
+    { label: "Warning", path: "colors.warning" },
+    { label: "Error", path: "colors.error" },
+    { label: "Info", path: "colors.info" }
+  ]
+};
+const ThemeEditorPanelContent = () => {
+  const { theme: theme2 } = useTheme();
+  const [showHelp, setShowHelp] = useState(false);
+  const handleColorChange = async (path, newValue) => {
+    console.log(`Update ${path} to ${newValue}`);
+  };
+  const handleResetColor = async (path) => {
+    console.log(`Reset ${path}`);
+  };
+  const getColorValue = (path) => {
+    const parts = path.split(".");
+    let value = theme2;
+    for (const part of parts) {
+      if (value && typeof value === "object" && part in value) {
+        value = value[part];
+      } else {
+        return "#000000";
+      }
+    }
+    return typeof value === "string" ? value : "#000000";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "20px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              flex: "0 0 auto"
+            },
+            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(Palette, { size: 24, color: theme2.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme2.fontSizes[4],
+                      color: theme2.colors.text
+                    },
+                    children: "Theme Editor"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setShowHelp(!showHelp),
+                  title: "Help",
+                  style: {
+                    padding: "8px",
+                    borderRadius: "6px",
+                    border: `1px solid ${theme2.colors.border}`,
+                    backgroundColor: showHelp ? theme2.colors.backgroundSecondary : theme2.colors.background,
+                    color: theme2.colors.text,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transition: "all 0.15s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!showHelp) {
+                      e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!showHelp) {
+                      e.currentTarget.style.backgroundColor = theme2.colors.background;
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 18 })
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: "1 1 auto",
+              overflowY: "auto",
+              padding: "20px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px"
+            },
+            children: showHelp ? /* @__PURE__ */ jsx(HelpContent, {}) : (
+              /* Color Groups */
+              /* @__PURE__ */ jsx(Fragment, { children: Object.entries(COLOR_GROUPS).map(([groupName, colors]) => /* @__PURE__ */ jsxs(
+                "section",
+                {
+                  style: {
+                    padding: "16px",
+                    background: theme2.colors.backgroundSecondary,
+                    borderRadius: theme2.radii[2],
+                    border: `1px solid ${theme2.colors.border}`,
+                    flex: "0 0 auto"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        style: {
+                          margin: "0 0 16px 0",
+                          fontSize: theme2.fontSizes[3],
+                          color: theme2.colors.text,
+                          fontWeight: 600
+                        },
+                        children: groupName
+                      }
+                    ),
+                    colors.map((color) => /* @__PURE__ */ jsx(
+                      ColorPickerInput,
+                      {
+                        label: color.label,
+                        value: getColorValue(color.path),
+                        onChange: (newValue) => handleColorChange(color.path, newValue),
+                        onReset: () => handleResetColor(color.path),
+                        defaultValue: getColorValue(color.path)
+                      },
+                      color.path
+                    ))
+                  ]
+                },
+                groupName
+              )) })
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const ThemeEditorPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(ThemeEditorPanelContent, { ...props }) });
+};
+const panels = [
+  {
+    metadata: {
+      id: "industry-theme.theme-editor",
+      name: "Theme Editor",
+      icon: "🎨",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Customize Industry theme colors and appearance",
+      slices: []
+      // This panel doesn't need data slices
+    },
+    component: ThemeEditorPanel,
+    // Optional: Called when this specific panel is mounted
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Theme Editor Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+    },
+    // Optional: Called when this specific panel is unmounted
+    onUnmount: async (_context) => {
+      console.log("Theme Editor Panel unmounting");
+    }
+  }
+];
+const onPackageLoad = async () => {
+  console.log("Panel package loaded - Example Panel Extension");
+};
+const onPackageUnload = async () => {
+  console.log("Panel package unloading - Example Panel Extension");
+};
+export {
+  onPackageLoad,
+  onPackageUnload,
+  panels
+};
+//# sourceMappingURL=panels.bundle.js.map