@wsxjs/wsx-base-components 0.0.7 → 0.0.8

package/dist/index.js

@@ -1,110 +1,164 @@
-import { autoRegister as x, WebComponent as y, jsx as i, createLogger as C, ReactiveWebComponent as ot } from "@wsxjs/wsx-core";
+import { autoRegister as V, WebComponent as J, jsx as d, createLogger as et } from "@wsxjs/wsx-core";
 const Qt = ':host{position:relative;display:inline-flex;padding:.25em .625em;box-sizing:border-box;vertical-align:middle;line-height:1.8;overflow:hidden;align-items:center;justify-content:center;font-size:14px;color:var(--fontColor, #333);border-radius:var(--borderRadius, .25em);background:var(--fontColor, #333);transition:background .3s,box-shadow .3s,border-color .3s,color .3s}:host([size="xxxs"]){padding:.03125em .0625em;font-size:6px;line-height:1;min-width:10px;min-height:8px;border-radius:1px}:host([size="xxs"]){padding:.0625em .125em;font-size:8px;line-height:1.1;min-width:14px;min-height:12px;border-radius:2px}:host([size="xs"]){padding:.125em .25em;font-size:10px;line-height:1.2;min-width:18px;min-height:16px;border-radius:3px}:host([size="sm"]){padding:.25em .5em;font-size:12px;line-height:1.4;min-width:24px;min-height:20px;border-radius:4px}:host([size="md"]){padding:.375em .75em;font-size:14px;line-height:1.5;min-width:32px;min-height:28px;border-radius:6px}:host([size="lg"]){padding:.5em 1em;font-size:14px;line-height:1.6;min-width:40px;min-height:32px;border-radius:6px}:host([size="xl"]){padding:.625em 1.25em;font-size:16px;line-height:1.6;min-width:48px;min-height:40px;border-radius:8px}:host([shape="circle"]){border-radius:50%}:host([disabled]),:host([loading]){pointer-events:none;opacity:.6}:host([block]){display:flex}:host([disabled]:not([variant])){background:#0000001a}:host([disabled]) .btn,:host([loading]) .btn{cursor:not-allowed;pointer-events:all}:host(:not([variant="primary"]):not([variant="danger"]):not([disabled]):hover),:host(:not([variant="primary"]):not([variant="danger"]):focus-within),:host([variant="flat"][focus]){color:var(--themeColor, #42b983);border-color:var(--themeColor, #42b983)}:host(:not([variant="primary"]):not([variant="danger"])) .btn:after{background-image:radial-gradient(circle,var(--themeColor, #42b983) 10%,transparent 10.01%)}:host([variant="primary"]){color:#fff;background:var(--themeBackground, var(--themeColor, #42b983))}:host([variant="danger"]){color:#fff;background:var(--themeBackground, var(--dangerColor, #ff7875))}:host([variant="dashed"]){border-style:dashed}:host([variant="flat"]),:host([variant="primary"]),:host([variant="danger"]){border:0;padding:calc(.25em + 1px) calc(.625em + 1px)}:host([variant="flat"]) .btn:before{content:"";position:absolute;background:var(--themeColor, #42b983);pointer-events:none;left:0;right:0;top:0;bottom:0;opacity:0;transition:.3s}:host([variant="flat"]:not([disabled]):hover) .btn:before{opacity:.1}:host(:not([disabled]):hover){z-index:1}:host([variant="flat"]:focus-within) .btn:before,:host([variant="flat"][focus]) .btn:before{opacity:.2}.btn{background:none;outline:0;border:0;position:absolute;left:0;top:0;width:100%;height:100%;padding:0;-webkit-user-select:none;user-select:none;cursor:unset}.loading{margin-right:.35em}::-moz-focus-inner{border:0}.btn:before{content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:.2s;background:#fff;opacity:0}:host(:not([disabled]):active) .btn:before{opacity:.2}.btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}.btn:not([disabled]):active:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}.icon{margin-right:.35em;transition:none}:host(:empty) .icon{margin:auto}:host(:empty){padding:.65em}:host([type="flat"]:empty),:host([type="primary"]:empty){padding:calc(.65em + 1px)}::slotted(.icon){transition:none}:host([href]){cursor:pointer}';
-var Vt = Object.create, L = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, rt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), it = (e) => {
-  throw TypeError(e);
-}, st = (e, t, o) => t in e ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, te = (e, t) => L(e, "name", { value: t, configurable: !0 }), ee = (e) => [, , , Vt((e == null ? void 0 : e[rt("metadata")]) ?? null)], oe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], nt = (e) => e !== void 0 && typeof e != "function" ? it("Function expected") : e, re = (e, t, o, s, r) => ({ kind: oe[e], name: t, metadata: s, addInitializer: (n) => o._ ? it("Already initialized") : r.push(nt(n || null)) }), ie = (e, t) => st(t, rt("metadata"), e[3]), se = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ne = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Zt(r, o));
-  te(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = re(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, nt(a) && (r = a);
-  return ie(e, r), c && L(r, o, c), p ? l ^ 4 ? n : c : r;
-}, b = (e, t, o) => st(e, typeof t != "symbol" ? t + "" : t, o), at, N, lt;
-at = [x({ tagName: "xy-button" })];
-class D extends (lt = y) {
+var vt;
+let xt, kt;
+function Y(e, t, r) {
+  return (t = Ct(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function Vt(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: ut(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || ut(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return te(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Ct(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Ct(e) {
+  var t = Zt(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function Zt(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function ut(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function te(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+kt = [V({
+  tagName: "xy-button"
+})];
+let ee;
+class re extends J {
+  static get observedAttributes() {
+    return ["disabled", "icon", "loading", "href", "type", "target", "rel", "download", "toggle", "checked", "variant", "shape", "block", "size"];
+  }
   constructor(t = {}) {
     super({
-      styles: Qt,
       styleName: "xy-button",
       ...t
-    }), b(this, "disabled", !1), b(this, "loading", !1), b(this, "toggle", !1), b(this, "checked", !1), b(this, "icon", null), b(this, "href", null), b(this, "type", null), b(this, "target", "_blank"), b(this, "rel", null), b(this, "download", null), b(this, "variant", "flat"), b(this, "size", "md"), b(this, "btnElement"), b(this, "iconElement"), b(this, "loadingElement"), b(this, "handleMouseDown", (o) => {
+    }), Y(this, "_autoStyles", Qt), Y(this, "disabled", !1), Y(this, "loading", !1), Y(this, "toggle", !1), Y(this, "checked", !1), Y(this, "icon", null), Y(this, "href", null), Y(this, "type", null), Y(this, "target", "_blank"), Y(this, "rel", null), Y(this, "download", null), Y(this, "variant", "flat"), Y(this, "size", "md"), Y(this, "btnElement", void 0), Y(this, "iconElement", void 0), Y(this, "loadingElement", void 0), Y(this, "handleMouseDown", (r) => {
       if (this.disabled) return;
-      const s = this.getBoundingClientRect(), r = o.clientX - s.left, n = o.clientY - s.top;
-      this.style.setProperty("--x", `${r}px`), this.style.setProperty("--y", `${n}px`);
-    }), b(this, "handleKeyDown", (o) => {
-      (o.code === "Enter" || o.code === "Space") && o.stopPropagation();
-    }), b(this, "handleClick", () => {
+      const b = this.getBoundingClientRect(), B = r.clientX - b.left, L = r.clientY - b.top;
+      this.style.setProperty("--x", `${B}px`), this.style.setProperty("--y", `${L}px`);
+    }), Y(this, "handleKeyDown", (r) => {
+      (r.code === "Enter" || r.code === "Space") && r.stopPropagation();
+    }), Y(this, "handleClick", () => {
       this.toggle && !this.disabled && (this.checked = !this.checked, this.checked ? this.setAttr("checked", "") : this.removeAttr("checked"));
     }), this.disabled = t.disabled || !1, this.loading = t.loading || !1, this.toggle = t.toggle || !1, this.checked = t.checked || !1, this.icon = t.icon || null, this.href = t.href || null, this.type = t.type || null, this.target = t.target || "_blank", this.rel = t.rel || null, this.download = t.download || null, this.variant = t.variant || "flat", this.size = t.size || "md";
   }
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "icon",
-      "loading",
-      "href",
-      "type",
-      "target",
-      "rel",
-      "download",
-      "toggle",
-      "checked",
-      "variant",
-      "shape",
-      "block",
-      "size"
-    ];
-  }
   render() {
-    const t = !!this.href, o = /* @__PURE__ */ i(
-      "a",
-      {
-        href: this.href,
-        target: this.target,
-        rel: this.rel || void 0,
-        download: this.download || void 0,
-        className: "btn",
-        onMouseDown: this.handleMouseDown,
-        onKeyDown: this.handleKeyDown,
-        ref: (r) => {
-          this.btnElement = r;
-        }
-      },
-      this.renderContent()
-    ), s = /* @__PURE__ */ i(
-      "button",
-      {
-        type: this.type || "button",
-        disabled: this.disabled,
-        className: "btn",
-        onMouseDown: this.handleMouseDown,
-        onKeyDown: this.handleKeyDown,
-        ref: (r) => {
-          this.btnElement = r;
-        }
-      },
-      this.renderContent()
-    );
-    return /* @__PURE__ */ i("div", { className: "xy-button-container" }, t ? o : s);
+    const t = !!this.href, r = /* @__PURE__ */ d("a", { href: this.href, target: this.target, rel: this.rel || void 0, download: this.download || void 0, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (B) => {
+      this.btnElement = B;
+    } }, this.renderContent()), b = /* @__PURE__ */ d("button", { type: this.type || "button", disabled: this.disabled, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (B) => {
+      this.btnElement = B;
+    } }, this.renderContent());
+    return /* @__PURE__ */ d("div", { className: "xy-button-container" }, t ? r : b);
   }
   renderContent() {
     const t = [];
-    return this.loading && t.push(
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: "loading",
-          ref: (o) => {
-            this.loadingElement = o;
-          }
-        },
-        "Loading..."
-      )
-    ), !this.loading && this.icon && this.icon !== "null" && t.push(
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: "icon",
-          "data-icon": this.icon,
-          ref: (o) => {
-            this.iconElement = o;
-          }
-        },
-        this.icon
-      )
-    ), t.push(/* @__PURE__ */ i("slot", null)), t;
+    return this.loading && t.push(/* @__PURE__ */ d("div", { className: "loading", ref: (r) => {
+      this.loadingElement = r;
+    } }, "Loading...")), !this.loading && this.icon && this.icon !== "null" && t.push(/* @__PURE__ */ d("div", { className: "icon", "data-icon": this.icon, ref: (r) => {
+      this.iconElement = r;
+    } }, this.icon)), t.push(/* @__PURE__ */ d("slot", null)), t;
   }
   /**
    * 组件连接到DOM后的初始化
@@ -121,43 +175,43 @@ class D extends (lt = y) {
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
+  onAttributeChanged(t, r, b) {
     switch (t) {
       case "disabled":
-        this.disabled = s !== null, this.updateButtonState();
+        this.disabled = b !== null, this.updateButtonState();
         break;
       case "loading":
-        this.loading = s !== null, this.updateButtonState(), this.rerender();
+        this.loading = b !== null, this.updateButtonState(), this.rerender();
         break;
       case "icon":
-        this.icon = s, this.rerender();
+        this.icon = b, this.rerender();
         break;
       case "href":
-        this.href = s, this.rerender();
+        this.href = b, this.rerender();
         break;
       case "type":
-        this.type = s, this.updateButtonState();
+        this.type = b, this.updateButtonState();
         break;
       case "target":
-        this.target = s || "_blank";
+        this.target = b || "_blank";
         break;
       case "rel":
-        this.rel = s;
+        this.rel = b;
         break;
       case "download":
-        this.download = s;
+        this.download = b;
         break;
       case "toggle":
-        this.toggle = s !== null;
+        this.toggle = b !== null;
         break;
       case "checked":
-        this.checked = s !== null;
+        this.checked = b !== null;
         break;
       case "variant":
-        this.variant = s || "flat";
+        this.variant = b || "flat";
         break;
       case "size":
-        this.size = s || "md";
+        this.size = b || "md";
         break;
     }
   }
@@ -202,44 +256,156 @@ class D extends (lt = y) {
     t ? this.setAttr("icon", t) : this.removeAttr("icon");
   }
 }
-N = ee(lt);
-D = ne(N, 0, "XyButton", at, D);
-se(N, 1, D);
-const ae = ':host{display:inline-flex}::slotted(xy-button:not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(xy-button){margin:0!important}::slotted(xy-button:not(:first-of-type)){margin-left:-1px!important}::slotted(xy-button[type]:not([type="dashed"]):not(:first-of-type)){margin-left:1px!important}::slotted(xy-button:first-of-type){border-top-right-radius:0;border-bottom-right-radius:0}::slotted(xy-button:last-of-type){border-top-left-radius:0;border-bottom-left-radius:0}';
-var le = Object.create, H = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, ct = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), dt = (e) => {
-  throw TypeError(e);
-}, ht = (e, t, o) => t in e ? H(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, de = (e, t) => H(e, "name", { value: t, configurable: !0 }), he = (e) => [, , , le((e == null ? void 0 : e[ct("metadata")]) ?? null)], ue = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], ut = (e) => e !== void 0 && typeof e != "function" ? dt("Function expected") : e, pe = (e, t, o, s, r) => ({ kind: ue[e], name: t, metadata: s, addInitializer: (n) => o._ ? dt("Already initialized") : r.push(ut(n || null)) }), me = (e, t) => ht(t, ct("metadata"), e[3]), be = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ge = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ce(r, o));
-  de(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = pe(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, ut(a) && (r = a);
-  return me(e, r), c && H(r, o, c), p ? l ^ 4 ? n : c : r;
-}, fe = (e, t, o) => ht(e, t + "", o), pt, j, mt;
-pt = [x({ tagName: "xy-button-group" })];
-class T extends (mt = y) {
+vt = re;
+[ee, xt] = Vt(vt, [], kt, 0, void 0, J).c;
+xt();
+const oe = ':host{display:inline-flex}::slotted(xy-button:not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(xy-button){margin:0!important}::slotted(xy-button:not(:first-of-type)){margin-left:-1px!important}::slotted(xy-button[type]:not([type="dashed"]):not(:first-of-type)){margin-left:1px!important}::slotted(xy-button:first-of-type){border-top-right-radius:0;border-bottom-right-radius:0}::slotted(xy-button:last-of-type){border-top-left-radius:0;border-bottom-left-radius:0}';
+var wt;
+let St, Et;
+function ht(e, t, r) {
+  return (t = Tt(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function ie(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: dt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || dt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return se(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Tt(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Tt(e) {
+  var t = ne(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function ne(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function dt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function se(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+Et = [V({
+  tagName: "xy-button-group"
+})];
+let ae;
+class le extends J {
+  static get observedAttributes() {
+    return ["disabled"];
+  }
   constructor(t = {}) {
     super({
-      styles: ae,
       styleName: "xy-button-group",
       ...t
-    }), fe(this, "disabled", !1), this.disabled = t.disabled || !1;
-  }
-  static get observedAttributes() {
-    return ["disabled"];
+    }), ht(this, "_autoStyles", oe), ht(this, "disabled", !1), this.disabled = t.disabled || !1;
   }
   render() {
-    return /* @__PURE__ */ i("div", { class: "button-group-container" }, /* @__PURE__ */ i("slot", null));
+    return /* @__PURE__ */ d("div", { class: "button-group-container" }, /* @__PURE__ */ d("slot", null));
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
+  onAttributeChanged(t, r, b) {
     switch (t) {
       case "disabled":
-        this.disabled = s !== null, this.updateChildrenDisabledState();
+        this.disabled = b !== null, this.updateChildrenDisabledState();
         break;
     }
   }
@@ -254,8 +420,8 @@ class T extends (mt = y) {
    */
   updateChildrenDisabledState() {
     if (!this.disabled) return;
-    this.querySelectorAll("xy-button").forEach((o) => {
-      this.disabled ? o.setAttribute("disabled", "") : o.removeAttribute("disabled");
+    this.querySelectorAll("xy-button").forEach((r) => {
+      this.disabled ? r.setAttribute("disabled", "") : r.removeAttribute("disabled");
     });
   }
   /**
@@ -277,221 +443,281 @@ class T extends (mt = y) {
    * 公共API：启用所有按钮
    */
   enableAll() {
-    this.getButtons().forEach((o) => {
-      o.removeAttribute("disabled");
+    this.getButtons().forEach((r) => {
+      r.removeAttribute("disabled");
     });
   }
   /**
    * 公共API：禁用所有按钮
    */
   disableAll() {
-    this.getButtons().forEach((o) => {
-      o.setAttribute("disabled", "");
+    this.getButtons().forEach((r) => {
+      r.setAttribute("disabled", "");
     });
   }
 }
-j = he(mt);
-T = ge(j, 0, "XyButtonGroup", pt, T);
-be(j, 1, T);
-const ve = '.color-section{display:inline-block;position:relative}.color-popover{display:inline-block;position:relative;overflow:visible}.color-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;background:var(--theme-color, #000);color:transparent;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.color-btn:hover:not(.disabled){border-color:#3f51b5;box-shadow:0 2px 8px #3f51b54d}.color-btn.disabled{opacity:.5;cursor:not-allowed}.color-indicator{font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.color-panel{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 20px #00000026;padding:8px;margin-top:4px;box-sizing:border-box;transform-origin:top left;animation:colorPanelShow .2s ease-out}@keyframes colorPanelShow{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px}.color-cube{width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;cursor:pointer;transition:all .2s ease;box-sizing:border-box;background-color:var(--cube-color, #000)}.color-cube:hover{border-color:#3f51b5;transform:scale(1.1);box-shadow:0 2px 8px #3f51b566;z-index:1}.color-cube:active{transform:scale(.95)}.color-cube.custom-picker{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00 42%,#0f0 57%,#00ff80,#0ff 85%,#0080ff);position:relative}.color-cube.custom-picker:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}:host([disabled]) .color-btn{opacity:.5;cursor:not-allowed}:host([open]) .color-panel{display:block}:host(:not([open])) .color-panel{display:none}@media (max-width: 768px){.color-panel{position:fixed;top:auto;left:50%;bottom:10px;transform:translate(-50%);width:90vw;max-width:300px}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px}.color-cube{width:24px;height:24px}}@media (prefers-color-scheme: dark){.color-panel{background:#2d2d2d;border-color:#404040;color:#fff}.color-btn,.color-cube{border-color:#404040}}', S = "editor-js-text-color-cache";
-function xe(e) {
+wt = le;
+[ae, St] = ie(wt, [], Et, 0, void 0, J).c;
+St();
+const it = "editor-js-text-color-cache";
+function ce(e) {
   return e.startsWith("var(") && e.endsWith(")");
 }
-function _e(e) {
+function ue(e) {
   return e.slice(4, -1).trim();
 }
-function ye(e) {
+function he(e) {
   return getComputedStyle(document.documentElement).getPropertyValue(e).trim() || e;
 }
-function w(e) {
-  if (xe(e)) {
-    const t = _e(e);
-    return ye(t);
+function rt(e) {
+  if (ce(e)) {
+    const t = ue(e);
+    return he(t);
   }
   return e;
 }
-function ke(e, t) {
-  return sessionStorage.setItem(`${S}-${t}`, JSON.stringify(e)), e;
+function de(e, t) {
+  return sessionStorage.setItem(`${it}-${t}`, JSON.stringify(e)), e;
 }
-function Ce(e, t) {
-  sessionStorage.setItem(`${S}-${t}-custom`, JSON.stringify(e));
+function fe(e, t) {
+  sessionStorage.setItem(`${it}-${t}-custom`, JSON.stringify(e));
 }
-function we(e) {
-  const t = sessionStorage.getItem(`${S}-${e}-custom`);
+function pe(e) {
+  const t = sessionStorage.getItem(`${it}-${e}-custom`);
   return t ? JSON.parse(t) : null;
 }
-function $e(e, t) {
-  let o = null;
-  return (...s) => {
-    o || (o = setTimeout(() => {
-      e(...s), o = null;
+function me(e, t) {
+  let r = null;
+  return (...b) => {
+    r || (r = setTimeout(() => {
+      e(...b), r = null;
     }, t));
   };
 }
-function To(e, t) {
-  const o = sessionStorage.getItem(`${S}-${t}`);
-  return o ? JSON.parse(o) : e;
-}
-const Oo = "ce-inline-toolbar__dropdown", Io = "ce-conversion-toolbar--showed";
-var Se = Object.create, W = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, bt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), gt = (e) => {
-  throw TypeError(e);
-}, ft = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Ae = (e, t) => W(e, "name", { value: t, configurable: !0 }), Ee = (e) => [, , , Se((e == null ? void 0 : e[bt("metadata")]) ?? null)], Pe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], vt = (e) => e !== void 0 && typeof e != "function" ? gt("Function expected") : e, De = (e, t, o, s, r) => ({ kind: Pe[e], name: t, metadata: s, addInitializer: (n) => o._ ? gt("Already initialized") : r.push(vt(n || null)) }), Te = (e, t) => ft(t, bt("metadata"), e[3]), Oe = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Ie = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ze(r, o));
-  Ae(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = De(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, vt(a) && (r = a);
-  return Te(e, r), c && W(r, o, c), p ? l ^ 4 ? n : c : r;
-}, f = (e, t, o) => ft(e, typeof t != "symbol" ? t + "" : t, o), xt, G, _t;
-const k = C("ColorPicker"), Fe = [
-  "#ff1300",
-  "#EC7878",
-  "#9C27B0",
-  "#673AB7",
-  "#3F51B5",
-  "#0070FF",
-  "#03A9F4",
-  "#00BCD4",
-  "#4CAF50",
-  "#8BC34A",
-  "#CDDC39",
-  "#FFE500",
-  "#FFBF00",
-  "#FF9800",
-  "#795548",
-  "#9E9E9E",
-  "#5A5A5A",
-  "#FFF"
-];
-xt = [x({ tagName: "color-picker" })];
-class O extends (_t = y) {
+function Ve(e, t) {
+  const r = sessionStorage.getItem(`${it}-${t}`);
+  return r ? JSON.parse(r) : e;
+}
+const Ze = "ce-inline-toolbar__dropdown", tr = "ce-conversion-toolbar--showed", be = '.color-section{display:inline-block;position:relative}.color-popover{display:inline-block;position:relative;overflow:visible}.color-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;background:var(--theme-color, #000);color:transparent;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.color-btn:hover:not(.disabled){border-color:#3f51b5;box-shadow:0 2px 8px #3f51b54d}.color-btn.disabled{opacity:.5;cursor:not-allowed}.color-indicator{font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.color-panel{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 20px #00000026;padding:8px;margin-top:4px;box-sizing:border-box;transform-origin:top left;animation:colorPanelShow .2s ease-out}@keyframes colorPanelShow{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px}.color-cube{width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;cursor:pointer;transition:all .2s ease;box-sizing:border-box;background-color:var(--cube-color, #000)}.color-cube:hover{border-color:#3f51b5;transform:scale(1.1);box-shadow:0 2px 8px #3f51b566;z-index:1}.color-cube:active{transform:scale(.95)}.color-cube.custom-picker{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00 42%,#0f0 57%,#00ff80,#0ff 85%,#0080ff);position:relative}.color-cube.custom-picker:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}:host([disabled]) .color-btn{opacity:.5;cursor:not-allowed}:host([open]) .color-panel{display:block}:host(:not([open])) .color-panel{display:none}@media (max-width: 768px){.color-panel{position:fixed;top:auto;left:50%;bottom:10px;transform:translate(-50%);width:90vw;max-width:300px}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px}.color-cube{width:24px;height:24px}}@media (prefers-color-scheme: dark){.color-panel{background:#2d2d2d;border-color:#404040;color:#fff}.color-btn,.color-cube{border-color:#404040}}';
+var _t;
+let zt, At;
+function q(e, t, r) {
+  return (t = $t(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function ge(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: ft(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || ft(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return ve(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : $t(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function $t(e) {
+  var t = ye(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function ye(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function ft(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function ve(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+const tt = et("ColorPicker"), xe = ["#ff1300", "#EC7878", "#9C27B0", "#673AB7", "#3F51B5", "#0070FF", "#03A9F4", "#00BCD4", "#4CAF50", "#8BC34A", "#CDDC39", "#FFE500", "#FFBF00", "#FF9800", "#795548", "#9E9E9E", "#5A5A5A", "#FFF"];
+At = [V({
+  tagName: "color-picker"
+})];
+let ke;
+class Ce extends J {
+  static get observedAttributes() {
+    return ["disabled", "selected-color", "open"];
+  }
   constructor(t = {}) {
     super({
-      styles: ve,
       styleName: "base-color-picker",
       ...t
-    }), f(this, "colorCollections"), f(this, "onColorPicked"), f(this, "hasCustomPicker"), f(this, "defaultColor"), f(this, "pluginType"), f(this, "disabled"), f(this, "selectedColor"), f(this, "customColor"), f(this, "isOpen"), f(this, "colorBtn"), f(this, "colorPanel"), f(this, "handleButtonClick", (o) => {
-      o.stopPropagation(), this.togglePanel();
-    }), f(this, "handlePanelClick", (o) => {
-      o.stopPropagation();
-    }), f(this, "handleColorSelect", (o) => {
-      var r;
-      const s = w(o);
-      this.setSelectedColor(s), this.closePanel(), ke(s, this.pluginType), (r = this.onColorPicked) == null || r.call(this, s), this.dispatchEvent(
-        new CustomEvent("colorchange", {
-          detail: { color: s },
-          bubbles: !0,
-          composed: !0
-        })
-      ), k.debug("Color selected", { color: s });
-    }), f(this, "handleCustomPickerClick", () => {
-      const o = document.createElement("input");
-      o.type = "color", o.value = this.customColor, o.style.cssText = `
+    }), q(this, "_autoStyles", be), q(this, "colorCollections", void 0), q(this, "onColorPicked", void 0), q(this, "hasCustomPicker", void 0), q(this, "defaultColor", void 0), q(this, "pluginType", void 0), q(this, "disabled", void 0), q(this, "selectedColor", void 0), q(this, "customColor", void 0), q(this, "isOpen", void 0), q(this, "colorBtn", void 0), q(this, "colorPanel", void 0), q(this, "handleButtonClick", (r) => {
+      r.stopPropagation(), this.togglePanel();
+    }), q(this, "handlePanelClick", (r) => {
+      r.stopPropagation();
+    }), q(this, "handleColorSelect", (r) => {
+      var B;
+      const b = rt(r);
+      this.setSelectedColor(b), this.closePanel(), de(b, this.pluginType), (B = this.onColorPicked) == null || B.call(this, b), this.dispatchEvent(new CustomEvent("colorchange", {
+        detail: {
+          color: b
+        },
+        bubbles: !0,
+        composed: !0
+      })), tt.debug("Color selected", {
+        color: b
+      });
+    }), q(this, "handleCustomPickerClick", () => {
+      const r = document.createElement("input");
+      r.type = "color", r.value = this.customColor, r.style.cssText = `
             position: fixed;
             left: -9999px;
             opacity: 0;
             pointer-events: none;
         `;
-      const s = $e((r) => {
-        var h;
-        const n = r.target, a = w(n.value);
-        this.setSelectedColor(a), this.setCustomColor(a), document.body.removeChild(o), (h = this.onColorPicked) == null || h.call(this, a), this.dispatchEvent(
-          new CustomEvent("colorchange", {
-            detail: { color: a },
-            bubbles: !0,
-            composed: !0
-          })
-        ), k.debug("Custom color selected", { color: a });
+      const b = me((B) => {
+        var P;
+        const L = B.target, E = rt(L.value);
+        this.setSelectedColor(E), this.setCustomColor(E), document.body.removeChild(r), (P = this.onColorPicked) == null || P.call(this, E), this.dispatchEvent(new CustomEvent("colorchange", {
+          detail: {
+            color: E
+          },
+          bubbles: !0,
+          composed: !0
+        })), tt.debug("Custom color selected", {
+          color: E
+        });
       }, 30);
-      o.addEventListener("input", s), document.body.appendChild(o), requestAnimationFrame(() => {
-        o.focus(), o.click();
+      r.addEventListener("input", b), document.body.appendChild(r), requestAnimationFrame(() => {
+        r.focus(), r.click();
       });
-    }), f(this, "handleDocumentClick", (o) => {
-      this.isOpen && !this.contains(o.target) && this.closePanel();
-    }), this.colorCollections = t.colorCollections || Fe, this.onColorPicked = t.onColorPicked, this.hasCustomPicker = t.hasCustomPicker || !1, this.pluginType = t.pluginType || "text", this.disabled = t.disabled || !1, this.defaultColor = w(t.defaultColor || this.colorCollections[0]), this.selectedColor = this.defaultColor, this.customColor = we(this.pluginType) || "", this.isOpen = !1, k.debug("ColorPicker initialized", {
+    }), q(this, "handleDocumentClick", (r) => {
+      this.isOpen && !this.contains(r.target) && this.closePanel();
+    }), this.colorCollections = t.colorCollections || xe, this.onColorPicked = t.onColorPicked, this.hasCustomPicker = t.hasCustomPicker || !1, this.pluginType = t.pluginType || "text", this.disabled = t.disabled || !1, this.defaultColor = rt(t.defaultColor || this.colorCollections[0]), this.selectedColor = this.defaultColor, this.customColor = pe(this.pluginType) || "", this.isOpen = !1, tt.debug("ColorPicker initialized", {
       colorCollections: this.colorCollections.length,
       hasCustomPicker: this.hasCustomPicker,
       pluginType: this.pluginType
     });
   }
-  static get observedAttributes() {
-    return ["disabled", "selected-color", "open"];
-  }
   /**
    * 实现抽象方法：真正的JSX渲染！🎉
    */
   render() {
-    const t = this.renderColorButton(), o = this.isOpen ? this.renderColorPanel() : null;
-    return /* @__PURE__ */ i("section", { class: "color-section" }, /* @__PURE__ */ i("div", { class: "color-popover" }, t, o));
+    const t = this.renderColorButton(), r = this.isOpen ? this.renderColorPanel() : null;
+    return /* @__PURE__ */ d("section", { class: "color-section" }, /* @__PURE__ */ d("div", { class: "color-popover" }, t, r));
   }
   /**
    * 渲染颜色按钮 - 真正的JSX！
    */
   renderColorButton() {
-    return /* @__PURE__ */ i(
-      "xy-button",
-      {
-        type: "button",
-        class: `color-btn ${this.disabled ? "disabled" : ""}`,
-        style: `--theme-color: ${this.selectedColor}`,
-        disabled: this.disabled,
-        onClick: this.handleButtonClick,
-        ref: (t) => {
-          this.colorBtn = t;
-        }
-      },
-      /* @__PURE__ */ i("span", { class: "color-indicator" }, "_")
-    );
+    return /* @__PURE__ */ d("xy-button", { type: "button", class: `color-btn ${this.disabled ? "disabled" : ""}`, style: `--theme-color: ${this.selectedColor}`, disabled: this.disabled, onClick: this.handleButtonClick, ref: (t) => {
+      this.colorBtn = t;
+    } }, /* @__PURE__ */ d("span", { class: "color-indicator" }, "_"));
   }
   /**
    * 渲染颜色面板 - 真正的JSX！
    */
   renderColorPanel() {
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        class: "color-panel",
-        onClick: this.handlePanelClick,
-        ref: (t) => {
-          this.colorPanel = t;
-        }
-      },
-      /* @__PURE__ */ i("div", { class: "color-grid" }, this.hasCustomPicker ? this.renderCustomPicker() : null, this.renderColorButtons())
-    );
+    return /* @__PURE__ */ d("div", { class: "color-panel", onClick: this.handlePanelClick, ref: (t) => {
+      this.colorPanel = t;
+    } }, /* @__PURE__ */ d("div", { class: "color-grid" }, this.hasCustomPicker ? this.renderCustomPicker() : null, this.renderColorButtons()));
   }
   /**
    * 渲染自定义颜色选择器 - 真正的JSX！
    */
   renderCustomPicker() {
-    return /* @__PURE__ */ i(
-      "xy-button",
-      {
-        type: "button",
-        class: "color-cube custom-picker",
-        style: { backgroundColor: this.customColor },
-        onClick: this.handleCustomPickerClick,
-        title: "自定义颜色"
-      }
-    );
+    return /* @__PURE__ */ d("xy-button", { type: "button", class: "color-cube custom-picker", style: {
+      backgroundColor: this.customColor
+    }, onClick: this.handleCustomPickerClick, title: "自定义颜色" });
   }
   /**
    * 渲染颜色按钮组 - 真正的JSX！
    */
   renderColorButtons() {
-    return this.colorCollections.map((t) => /* @__PURE__ */ i(
-      "xy-button",
-      {
-        key: t,
-        type: "button",
-        class: "color-cube",
-        style: `background-color: ${t}`,
-        "data-color": t,
-        title: t,
-        onClick: () => this.handleColorSelect(t)
-      }
-    ));
+    return this.colorCollections.map((t) => /* @__PURE__ */ d("xy-button", { key: t, type: "button", class: "color-cube", style: `background-color: ${t}`, "data-color": t, title: t, onClick: () => this.handleColorSelect(t) }));
   }
   /**
    * 切换面板显示状态
@@ -515,7 +741,7 @@ class O extends (_t = y) {
    * 设置自定义颜色
    */
   setCustomColor(t) {
-    this.customColor = t, Ce(t, this.pluginType);
+    this.customColor = t, fe(t, this.pluginType);
   }
   /**
    * 设置面板开关状态
@@ -533,27 +759,27 @@ class O extends (_t = y) {
    * 组件连接到DOM后的初始化
    */
   onConnected() {
-    document.addEventListener("click", this.handleDocumentClick), k.info("ColorPicker connected to DOM");
+    document.addEventListener("click", this.handleDocumentClick), tt.info("ColorPicker connected to DOM");
   }
   /**
    * 组件从DOM断开时的清理
    */
   onDisconnected() {
-    document.removeEventListener("click", this.handleDocumentClick), k.info("ColorPicker disconnected from DOM");
+    document.removeEventListener("click", this.handleDocumentClick), tt.info("ColorPicker disconnected from DOM");
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
+  onAttributeChanged(t, r, b) {
     switch (t) {
       case "disabled":
-        this.disabled = s !== null, this.rerender();
+        this.disabled = b !== null, this.rerender();
         break;
       case "selected-color":
-        s && s !== this.selectedColor && (this.selectedColor = s, this.updateColorButton());
+        b && b !== this.selectedColor && (this.selectedColor = b, this.updateColorButton());
         break;
       case "open":
-        this.isOpen = s !== null;
+        this.isOpen = b !== null;
         break;
     }
   }
@@ -567,7 +793,7 @@ class O extends (_t = y) {
    * 公共API：设置颜色
    */
   setColor(t) {
-    this.setSelectedColor(w(t));
+    this.setSelectedColor(rt(t));
   }
   /**
    * 公共API：聚焦组件
@@ -577,119 +803,178 @@ class O extends (_t = y) {
     (t = this.colorBtn) == null || t.focus();
   }
 }
-G = Ee(_t);
-O = Ie(G, 0, "ColorPicker", xt, O);
-Oe(G, 1, O);
-const Be = ".reactive-counter{max-width:500px;margin:20px auto;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s ease}.theme-light{background:#fff;color:#333;border:1px solid #e1e5e9}.theme-dark{background:#1a1a1a;color:#fff;border:1px solid #333333}.theme-blue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #5a67d8}.header{text-align:center;margin-bottom:24px}.header h3{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{margin:0;opacity:.8;font-size:14px}.counter-display{text-align:center;margin-bottom:32px}.count-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}.step-info{font-size:14px;opacity:.7}.controls{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background:#3182ce;transform:translateY(-1px)}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568;transform:translateY(-1px)}.btn-warning{background:#ed8936;color:#fff}.btn-warning:hover:not(:disabled){background:#dd6b20;transform:translateY(-1px)}.btn-success{background:#48bb78;color:#fff}.btn-success:hover:not(:disabled){background:#38a169;transform:translateY(-1px)}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover:not(:disabled){background:#e53e3e;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:14px;min-width:auto}.step-controls,.auto-controls,.theme-controls,.message-controls{margin-bottom:20px;text-align:center}.step-controls label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}.step-controls input[type=range]{flex:0 0 150px}.step-controls span{font-weight:700;min-width:20px}.theme-controls select,.message-controls input{padding:8px 12px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px;margin-left:8px}.theme-dark .theme-controls select,.theme-dark .message-controls input{background:#2d3748;border-color:#4a5568;color:#fff}.theme-blue .theme-controls select,.theme-blue .message-controls input{background:#ffffff1a;border-color:#fff3;color:#fff}.message-controls input{width:250px;max-width:100%}.history{margin-top:24px;padding:16px;background:#0000000d;border-radius:8px}.theme-dark .history{background:#ffffff0d}.theme-blue .history{background:#ffffff1a}.history h4{margin:0 0 12px;font-size:16px}.history-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.history-item{padding:4px 8px;background:#4299e11a;border:1px solid rgba(66,153,225,.2);border-radius:4px;font-size:12px;font-weight:500}.debug-info{margin-top:24px;font-size:12px}.debug-info details{border:1px solid #e2e8f0;border-radius:6px;padding:8px}.theme-dark .debug-info details{border-color:#4a5568}.theme-blue .debug-info details{border-color:#fff3}.debug-info summary{cursor:pointer;font-weight:500;margin-bottom:8px}.debug-info pre{margin:0;padding:8px;background:#0000000d;border-radius:4px;overflow-x:auto;font-size:11px;line-height:1.4}.theme-dark .debug-info pre{background:#ffffff0d}.theme-blue .debug-info pre{background:#ffffff1a}@media (max-width: 600px){.reactive-counter{margin:10px;padding:16px}.count-value{font-size:36px}.controls{flex-direction:column;align-items:center}.btn{width:200px}.step-controls label{flex-direction:column;gap:8px}.message-controls input{width:100%}}";
-var Me = Object.create, Y = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, yt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), kt = (e) => {
-  throw TypeError(e);
-}, Ct = (e, t, o) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Le = (e, t) => Y(e, "name", { value: t, configurable: !0 }), Ne = (e) => [, , , Me((e == null ? void 0 : e[yt("metadata")]) ?? null)], He = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], wt = (e) => e !== void 0 && typeof e != "function" ? kt("Function expected") : e, je = (e, t, o, s, r) => ({ kind: He[e], name: t, metadata: s, addInitializer: (n) => o._ ? kt("Already initialized") : r.push(wt(n || null)) }), We = (e, t) => Ct(t, yt("metadata"), e[3]), Ge = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Ye = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Re(r, o));
-  Le(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = je(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, wt(a) && (r = a);
-  return We(e, r), c && Y(r, o, c), p ? l ^ 4 ? n : c : r;
-}, v = (e, t, o) => Ct(e, typeof t != "symbol" ? t + "" : t, o), $t, X, St;
-const z = C("ReactiveCounter");
-$t = [x({ tagName: "reactive-counter" })];
-class I extends (St = ot) {
+_t = Ce;
+[ke, zt] = ge(_t, [], At, 0, void 0, J).c;
+zt();
+const we = ".reactive-counter{max-width:500px;margin:20px auto;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s ease}.theme-light{background:#fff;color:#333;border:1px solid #e1e5e9}.theme-dark{background:#1a1a1a;color:#fff;border:1px solid #333333}.theme-blue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #5a67d8}.header{text-align:center;margin-bottom:24px}.header h3{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{margin:0;opacity:.8;font-size:14px}.counter-display{text-align:center;margin-bottom:32px}.count-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}.step-info{font-size:14px;opacity:.7}.controls{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background:#3182ce;transform:translateY(-1px)}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568;transform:translateY(-1px)}.btn-warning{background:#ed8936;color:#fff}.btn-warning:hover:not(:disabled){background:#dd6b20;transform:translateY(-1px)}.btn-success{background:#48bb78;color:#fff}.btn-success:hover:not(:disabled){background:#38a169;transform:translateY(-1px)}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover:not(:disabled){background:#e53e3e;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:14px;min-width:auto}.step-controls,.auto-controls,.theme-controls,.message-controls{margin-bottom:20px;text-align:center}.step-controls label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}.step-controls input[type=range]{flex:0 0 150px}.step-controls span{font-weight:700;min-width:20px}.theme-controls select,.message-controls input{padding:8px 12px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px;margin-left:8px}.theme-dark .theme-controls select,.theme-dark .message-controls input{background:#2d3748;border-color:#4a5568;color:#fff}.theme-blue .theme-controls select,.theme-blue .message-controls input{background:#ffffff1a;border-color:#fff3;color:#fff}.message-controls input{width:250px;max-width:100%}.history{margin-top:24px;padding:16px;background:#0000000d;border-radius:8px}.theme-dark .history{background:#ffffff0d}.theme-blue .history{background:#ffffff1a}.history h4{margin:0 0 12px;font-size:16px}.history-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.history-item{padding:4px 8px;background:#4299e11a;border:1px solid rgba(66,153,225,.2);border-radius:4px;font-size:12px;font-weight:500}.debug-info{margin-top:24px;font-size:12px}.debug-info details{border:1px solid #e2e8f0;border-radius:6px;padding:8px}.theme-dark .debug-info details{border-color:#4a5568}.theme-blue .debug-info details{border-color:#fff3}.debug-info summary{cursor:pointer;font-weight:500;margin-bottom:8px}.debug-info pre{margin:0;padding:8px;background:#0000000d;border-radius:4px;overflow-x:auto;font-size:11px;line-height:1.4}.theme-dark .debug-info pre{background:#ffffff0d}.theme-blue .debug-info pre{background:#ffffff1a}@media (max-width: 600px){.reactive-counter{margin:10px;padding:16px}.count-value{font-size:36px}.controls{flex-direction:column;align-items:center}.btn{width:200px}.step-controls label{flex-direction:column;gap:8px}.message-controls input{width:100%}}";
+var Dt;
+let jt, Ot;
+function Q(e, t, r) {
+  return (t = It(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function Se(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: pt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || pt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return Te(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : It(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function It(e) {
+  var t = Ee(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function Ee(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function pt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function Te(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+const nt = et("ReactiveCounter");
+Ot = [V({
+  tagName: "reactive-counter"
+})];
+let _e;
+class ze extends J {
   constructor() {
-    super({
-      styles: Be,
-      debug: !0
-      // 启用调试模式
-    }), v(this, "state", this.reactive({
-      count: 0,
-      step: 1,
-      message: "Hello WSX Reactive!",
-      isRunning: !1
-    })), v(this, "themeState", this.useState("theme", "light")), v(this, "historyState", this.useState("history", [])), v(this, "getTheme", this.themeState[0]), v(this, "setTheme", this.themeState[1]), v(this, "getHistory", this.historyState[0]), v(this, "setHistory", this.historyState[1]), v(this, "increment", () => {
+    super(), Q(this, "_autoStyles", we), Q(this, "state", void 0), Q(this, "theme", void 0), Q(this, "history", void 0), Q(this, "increment", () => {
       this.state.count += this.state.step, this.addToHistory(this.state.count);
-    }), v(this, "decrement", () => {
+    }), Q(this, "decrement", () => {
       this.state.count -= this.state.step, this.addToHistory(this.state.count);
-    }), v(this, "reset", () => {
+    }), Q(this, "reset", () => {
       this.state.count = 0, this.addToHistory(0);
-    }), v(this, "handleStepChange", (t) => {
-      const o = t.target;
-      this.state.step = parseInt(o.value);
-    }), v(this, "handleThemeChange", (t) => {
-      const o = t.target;
-      this.setTheme(o.value);
-    }), v(this, "handleMessageChange", (t) => {
-      const o = t.target;
-      this.state.message = o.value;
-    }), v(this, "toggleAutoIncrement", () => {
+    }), Q(this, "handleStepChange", (b) => {
+      const B = b.target;
+      this.state.step = parseInt(B.value);
+    }), Q(this, "handleThemeChange", (b) => {
+      const B = b.target;
+      this.theme = B.value;
+    }), Q(this, "handleMessageChange", (b) => {
+      const B = b.target;
+      this.state.message = B.value;
+    }), Q(this, "toggleAutoIncrement", () => {
       this.state.isRunning = !this.state.isRunning, this.state.isRunning && this.startAutoIncrement();
-    }), v(this, "clearHistory", () => {
-      this.setHistory([]);
-    }), z.info("ReactiveCounter initialized");
+    }), Q(this, "clearHistory", () => {
+      this.history = [];
+    }), nt.info("ReactiveCounter initialized"), this.state = this.reactive({
+      count: 0,
+      step: 1,
+      message: "Hello WSX Reactive!",
+      isRunning: !1
+    });
+    const [t, r] = this.useState("theme", "light");
+    Object.defineProperty(this, "theme", {
+      get: t,
+      set: r,
+      enumerable: !0,
+      configurable: !0
+    }), this.history = this.reactive([]);
   }
   render() {
-    const t = this.getTheme(), o = this.getHistory();
-    return /* @__PURE__ */ i("div", { class: `reactive-counter theme-${t}` }, /* @__PURE__ */ i("div", { class: "header" }, /* @__PURE__ */ i("h3", null, "🔄 Reactive Counter"), /* @__PURE__ */ i("p", { class: "subtitle" }, this.state.message)), /* @__PURE__ */ i("div", { class: "counter-display" }, /* @__PURE__ */ i("div", { class: "count-value" }, this.state.count), /* @__PURE__ */ i("div", { class: "step-info" }, "Step: ", this.state.step)), /* @__PURE__ */ i("div", { class: "controls" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-primary",
-        onClick: this.increment,
-        disabled: this.state.isRunning
-      },
-      "+",
-      this.state.step
-    ), /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-secondary",
-        onClick: this.decrement,
-        disabled: this.state.isRunning
-      },
-      "-",
-      this.state.step
-    ), /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-warning",
-        onClick: this.reset,
-        disabled: this.state.isRunning
-      },
-      "Reset"
-    )), /* @__PURE__ */ i("div", { class: "step-controls" }, /* @__PURE__ */ i("label", null, "Step Size:", /* @__PURE__ */ i(
-      "input",
-      {
-        type: "range",
-        min: "1",
-        max: "10",
-        value: this.state.step,
-        onInput: this.handleStepChange
-      }
-    ), /* @__PURE__ */ i("span", null, this.state.step))), /* @__PURE__ */ i("div", { class: "auto-controls" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: `btn ${this.state.isRunning ? "btn-danger" : "btn-success"}`,
-        onClick: this.toggleAutoIncrement
-      },
-      this.state.isRunning ? "Stop" : "Start",
-      " Auto Increment"
-    )), /* @__PURE__ */ i("div", { class: "theme-controls" }, /* @__PURE__ */ i("label", null, "Theme:", /* @__PURE__ */ i("select", { value: t, onChange: this.handleThemeChange }, /* @__PURE__ */ i("option", { value: "light" }, "Light"), /* @__PURE__ */ i("option", { value: "dark" }, "Dark"), /* @__PURE__ */ i("option", { value: "blue" }, "Blue")))), /* @__PURE__ */ i("div", { class: "message-controls" }, /* @__PURE__ */ i(
-      "input",
-      {
-        type: "text",
-        value: this.state.message,
-        onInput: this.handleMessageChange,
-        placeholder: "Enter a message..."
-      }
-    )), o.length > 0 && /* @__PURE__ */ i("div", { class: "history" }, /* @__PURE__ */ i("h4", null, "History (last 10):"), /* @__PURE__ */ i("div", { class: "history-list" }, o.slice(-10).map((s, r) => /* @__PURE__ */ i("span", { key: r, class: "history-item" }, s))), /* @__PURE__ */ i("button", { class: "btn btn-sm", onClick: this.clearHistory }, "Clear History")), /* @__PURE__ */ i("div", { class: "debug-info" }, /* @__PURE__ */ i("details", null, /* @__PURE__ */ i("summary", null, "Debug Info"), /* @__PURE__ */ i("pre", null, JSON.stringify(
-      {
-        state: this.state,
-        theme: this.getTheme(),
-        historyLength: this.getHistory().length,
-        stateSnapshot: this.getStateSnapshot()
-      },
-      null,
-      2
-    )))));
+    return /* @__PURE__ */ d("div", { class: `reactive-counter theme-${this.theme}` }, /* @__PURE__ */ d("div", { class: "header" }, /* @__PURE__ */ d("h3", null, "🔄 Reactive Counter"), /* @__PURE__ */ d("p", { class: "subtitle" }, this.state.message)), /* @__PURE__ */ d("div", { class: "counter-display" }, /* @__PURE__ */ d("div", { class: "count-value" }, this.state.count), /* @__PURE__ */ d("div", { class: "step-info" }, "Step: ", this.state.step)), /* @__PURE__ */ d("div", { class: "controls" }, /* @__PURE__ */ d("button", { class: "btn btn-primary", onClick: this.increment, disabled: this.state.isRunning }, "+", this.state.step), /* @__PURE__ */ d("button", { class: "btn btn-secondary", onClick: this.decrement, disabled: this.state.isRunning }, "-", this.state.step), /* @__PURE__ */ d("button", { class: "btn btn-warning", onClick: this.reset, disabled: this.state.isRunning }, "Reset")), /* @__PURE__ */ d("div", { class: "step-controls" }, /* @__PURE__ */ d("label", null, "Step Size:", /* @__PURE__ */ d("input", { type: "range", min: "1", max: "10", value: this.state.step, onInput: this.handleStepChange }), /* @__PURE__ */ d("span", null, this.state.step))), /* @__PURE__ */ d("div", { class: "auto-controls" }, /* @__PURE__ */ d("button", { class: `btn ${this.state.isRunning ? "btn-danger" : "btn-success"}`, onClick: this.toggleAutoIncrement }, this.state.isRunning ? "Stop" : "Start", " Auto Increment")), /* @__PURE__ */ d("div", { class: "theme-controls" }, /* @__PURE__ */ d("label", null, "Theme:", /* @__PURE__ */ d("select", { value: this.theme, onChange: this.handleThemeChange }, /* @__PURE__ */ d("option", { value: "light" }, "Light"), /* @__PURE__ */ d("option", { value: "dark" }, "Dark"), /* @__PURE__ */ d("option", { value: "blue" }, "Blue")))), /* @__PURE__ */ d("div", { class: "message-controls" }, /* @__PURE__ */ d("input", { type: "text", value: this.state.message, onInput: this.handleMessageChange, placeholder: "Enter a message..." })), this.history.length > 0 && /* @__PURE__ */ d("div", { class: "history" }, /* @__PURE__ */ d("h4", null, "History (last 10):"), /* @__PURE__ */ d("div", { class: "history-list" }, this.history.slice(-10).map((t, r) => /* @__PURE__ */ d("span", { key: r, class: "history-item" }, t))), /* @__PURE__ */ d("button", { class: "btn btn-sm", onClick: this.clearHistory }, "Clear History")), /* @__PURE__ */ d("div", { class: "debug-info" }, /* @__PURE__ */ d("details", null, /* @__PURE__ */ d("summary", null, "Debug Info"), /* @__PURE__ */ d("pre", null, JSON.stringify({
+      state: this.state,
+      theme: this.theme,
+      historyLength: this.history.length
+    }, null, 2)))));
   }
   startAutoIncrement() {
     const t = setInterval(() => {
@@ -701,60 +986,162 @@ class I extends (St = ot) {
     }, 200);
   }
   addToHistory(t) {
-    const o = this.getHistory();
-    this.setHistory([...o, t]);
+    this.history = [...this.history, t];
   }
   onConnected() {
-    z.info("ReactiveCounter connected to DOM"), setTimeout(() => {
+    nt.info("ReactiveCounter connected to DOM"), setTimeout(() => {
       this.state.message = "Ready to count! 🚀";
     }, 500);
   }
   onDisconnected() {
-    z.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
-  }
-}
-X = Ne(St);
-I = Ye(X, 0, "ReactiveCounter", $t, I);
-Ge(X, 1, I);
-const Xe = ":host{display:block}.theme-switcher-container{position:relative;display:flex;align-items:center}.theme-switcher-btn{width:var(--theme-switcher-width, 2.5rem);height:var(--theme-switcher-height, 2.5rem);padding:var(--theme-switcher-padding, .5rem);border-radius:var(--theme-switcher-border-radius, 8px);background:var(--theme-switcher-bg, #dc2626);border:var(--theme-switcher-border, none);color:var(--theme-switcher-color, white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--theme-switcher-transition, .3s ease);box-shadow:var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, .4));font-weight:var(--theme-switcher-font-weight, 600);font-family:var(--theme-switcher-font-family, inherit)}.theme-switcher-btn:hover{background:var(--theme-switcher-hover-bg, #b91c1c);transform:var(--theme-switcher-hover-transform, translateY(-2px));box-shadow:var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, .5))}.theme-switcher-btn:active{transform:var(--theme-switcher-active-transform, translateY(0))}.theme-switcher-icon{font-size:var(--theme-switcher-icon-size, 1rem);line-height:1;transition:transform var(--theme-switcher-icon-transition, .3s ease)}.theme-switcher-btn:hover .theme-switcher-icon{transform:var(--theme-switcher-icon-hover-transform, rotate(360deg))}.theme-switcher-btn[data-theme=light]{background:var(--theme-switcher-light-bg, #dc2626);color:var(--theme-switcher-light-color, white)}.theme-switcher-btn[data-theme=light]:hover{background:var(--theme-switcher-light-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=dark]{background:var(--theme-switcher-dark-bg, #dc2626);color:var(--theme-switcher-dark-color, white)}.theme-switcher-btn[data-theme=dark]:hover{background:var(--theme-switcher-dark-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=auto]{background:var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));color:var(--theme-switcher-auto-color, white)}.theme-switcher-btn[data-theme=auto]:hover{background:var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b))}@media (max-width: 768px){.theme-switcher-btn{width:var(--theme-switcher-mobile-width, 2rem);height:var(--theme-switcher-mobile-height, 2rem)}.theme-switcher-icon{font-size:var(--theme-switcher-mobile-icon-size, .9rem)}}";
-var qe = Object.create, q = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, zt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), At = (e) => {
-  throw TypeError(e);
-}, Et = (e, t, o) => t in e ? q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Ke = (e, t) => q(e, "name", { value: t, configurable: !0 }), Ue = (e) => [, , , qe((e == null ? void 0 : e[zt("metadata")]) ?? null)], Qe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Pt = (e) => e !== void 0 && typeof e != "function" ? At("Function expected") : e, Ve = (e, t, o, s, r) => ({ kind: Qe[e], name: t, metadata: s, addInitializer: (n) => o._ ? At("Already initialized") : r.push(Pt(n || null)) }), Ze = (e, t) => Et(t, zt("metadata"), e[3]), to = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, eo = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Je(r, o));
-  Ke(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = Ve(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Pt(a) && (r = a);
-  return Ze(e, r), c && q(r, o, c), p ? l ^ 4 ? n : c : r;
-}, et = (e, t, o) => Et(e, typeof t != "symbol" ? t + "" : t, o), Dt, J, Tt;
-Dt = [x({ tagName: "theme-switcher" })];
-class F extends (Tt = y) {
+    nt.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
+  }
+}
+Dt = ze;
+[_e, jt] = Se(Dt, [], Ot, 0, void 0, J).c;
+jt();
+const Ae = ":host{display:block}.theme-switcher-container{position:relative;display:flex;align-items:center}.theme-switcher-btn{width:var(--theme-switcher-width, 2.5rem);height:var(--theme-switcher-height, 2.5rem);padding:var(--theme-switcher-padding, .5rem);border-radius:var(--theme-switcher-border-radius, 8px);background:var(--theme-switcher-bg, #dc2626);border:var(--theme-switcher-border, none);color:var(--theme-switcher-color, white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--theme-switcher-transition, .3s ease);box-shadow:var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, .4));font-weight:var(--theme-switcher-font-weight, 600);font-family:var(--theme-switcher-font-family, inherit)}.theme-switcher-btn:hover{background:var(--theme-switcher-hover-bg, #b91c1c);transform:var(--theme-switcher-hover-transform, translateY(-2px));box-shadow:var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, .5))}.theme-switcher-btn:active{transform:var(--theme-switcher-active-transform, translateY(0))}.theme-switcher-icon{font-size:var(--theme-switcher-icon-size, 1rem);line-height:1;transition:transform var(--theme-switcher-icon-transition, .3s ease)}.theme-switcher-btn:hover .theme-switcher-icon{transform:var(--theme-switcher-icon-hover-transform, rotate(360deg))}.theme-switcher-btn[data-theme=light]{background:var(--theme-switcher-light-bg, #dc2626);color:var(--theme-switcher-light-color, white)}.theme-switcher-btn[data-theme=light]:hover{background:var(--theme-switcher-light-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=dark]{background:var(--theme-switcher-dark-bg, #dc2626);color:var(--theme-switcher-dark-color, white)}.theme-switcher-btn[data-theme=dark]:hover{background:var(--theme-switcher-dark-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=auto]{background:var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));color:var(--theme-switcher-auto-color, white)}.theme-switcher-btn[data-theme=auto]:hover{background:var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b))}@media (max-width: 768px){.theme-switcher-btn{width:var(--theme-switcher-mobile-width, 2rem);height:var(--theme-switcher-mobile-height, 2rem)}.theme-switcher-icon{font-size:var(--theme-switcher-mobile-icon-size, .9rem)}}";
+var Rt;
+let Bt, Mt;
+function st(e, t, r) {
+  return (t = Pt(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function $e(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: mt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || mt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return je(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Pt(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Pt(e) {
+  var t = De(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function De(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function mt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function je(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+Mt = [V({
+  tagName: "theme-switcher"
+})];
+let Oe;
+class Ie extends J {
   constructor() {
     super({
-      styles: Xe,
       styleName: "theme-switcher"
-    }), et(this, "currentTheme", "auto"), et(this, "toggleTheme", () => {
-      const t = ["auto", "light", "dark"], s = (t.indexOf(this.currentTheme) + 1) % t.length;
-      this.setTheme(t[s]);
+    }), st(this, "_autoStyles", Ae), st(this, "currentTheme", "auto"), st(this, "toggleTheme", () => {
+      const t = ["auto", "light", "dark"], b = (t.indexOf(this.currentTheme) + 1) % t.length;
+      this.setTheme(t[b]);
     }), this.initTheme();
   }
   render() {
-    return /* @__PURE__ */ i("div", { class: "theme-switcher-container" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: "theme-switcher-btn",
-        "data-theme": this.currentTheme,
-        onClick: this.toggleTheme,
-        title: `当前主题: ${this.getThemeLabel()}`
-      },
-      /* @__PURE__ */ i("span", { class: "theme-switcher-icon" }, this.getThemeIcon())
-    ));
+    return /* @__PURE__ */ d("div", { class: "theme-switcher-container" }, /* @__PURE__ */ d("button", { class: "theme-switcher-btn", "data-theme": this.currentTheme, onClick: this.toggleTheme, title: `当前主题: ${this.getThemeLabel()}` }, /* @__PURE__ */ d("span", { class: "theme-switcher-icon" }, this.getThemeIcon())));
   }
   getThemeIcon() {
-    const o = document.documentElement.classList.contains("dark");
-    return this.currentTheme === "auto" ? o ? "🌙" : "☀️" : this.currentTheme === "light" ? "☀️" : "🌙";
+    const r = document.documentElement.classList.contains("dark");
+    return this.currentTheme === "auto" ? r ? "🌙" : "☀️" : this.currentTheme === "light" ? "☀️" : "🌙";
   }
   getThemeLabel() {
     return {
@@ -765,8 +1152,8 @@ class F extends (Tt = y) {
   }
   setTheme(t) {
     this.currentTheme = t;
-    const o = document.documentElement;
-    t === "auto" ? (o.removeAttribute("class"), this.checkSystemTheme()) : o.className = t, localStorage.setItem("wsx-theme", t), this.rerender();
+    const r = document.documentElement;
+    t === "auto" ? (r.removeAttribute("class"), this.checkSystemTheme()) : r.className = t, localStorage.setItem("wsx-theme", t), this.rerender();
   }
   checkSystemTheme() {
     const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -774,50 +1161,163 @@ class F extends (Tt = y) {
   }
   initTheme() {
     const t = localStorage.getItem("wsx-theme") || "auto";
-    this.setTheme(t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (o) => {
-      this.currentTheme === "auto" && (document.documentElement.className = o.matches ? "dark" : "");
+    this.setTheme(t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (r) => {
+      this.currentTheme === "auto" && (document.documentElement.className = r.matches ? "dark" : "");
     });
   }
 }
-J = Ue(Tt);
-F = eo(J, 0, "ThemeSwitcher", Dt, F);
-to(J, 1, F);
-var oo = Object.create, K = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, Ot = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), It = (e) => {
-  throw TypeError(e);
-}, Ft = (e, t, o) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, io = (e, t) => K(e, "name", { value: t, configurable: !0 }), so = (e) => [, , , oo((e == null ? void 0 : e[Ot("metadata")]) ?? null)], no = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Bt = (e) => e !== void 0 && typeof e != "function" ? It("Function expected") : e, ao = (e, t, o, s, r) => ({ kind: no[e], name: t, metadata: s, addInitializer: (n) => o._ ? It("Already initialized") : r.push(Bt(n || null)) }), lo = (e, t) => Ft(t, Ot("metadata"), e[3]), co = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ho = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ro(r, o));
-  io(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = ao(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Bt(a) && (r = a);
-  return lo(e, r), c && K(r, o, c), p ? l ^ 4 ? n : c : r;
-}, A = (e, t, o) => Ft(e, typeof t != "symbol" ? t + "" : t, o), Mt, U, Rt;
-const E = C("SvgIcon");
-Mt = [x({ tagName: "svg-icon" })];
-class B extends (Rt = y) {
+Rt = Ie;
+[Oe, Bt] = $e(Rt, [], Mt, 0, void 0, J).c;
+Bt();
+var Lt;
+let Nt, Ht;
+function at(e, t, r) {
+  return (t = Ft(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function Re(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: bt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || bt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return Me(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Ft(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Ft(e) {
+  var t = Be(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function Be(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function bt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function Me(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+const lt = et("SvgIcon");
+Ht = [V({
+  tagName: "svg-icon"
+})];
+let Pe;
+class Le extends J {
   constructor() {
-    super(), A(this, "handleClick", (t) => {
-      E.debug("SVG icon clicked", { name: this.getAttribute("name") }), this.dispatchEvent(
-        new CustomEvent("icon-click", {
-          detail: {
-            name: this.getAttribute("name"),
-            originalEvent: t
-          },
-          bubbles: !0
-        })
-      );
-    }), A(this, "handleMouseEnter", (t) => {
-      const o = t.target;
-      o.style.transform = "scale(1.1)";
-    }), A(this, "handleMouseLeave", (t) => {
-      const o = t.target;
-      o.style.transform = "scale(1)";
-    }), E.info("SvgIcon component initialized");
+    super(), at(this, "handleClick", (t) => {
+      lt.debug("SVG icon clicked", {
+        name: this.getAttribute("name")
+      }), this.dispatchEvent(new CustomEvent("icon-click", {
+        detail: {
+          name: this.getAttribute("name"),
+          originalEvent: t
+        },
+        bubbles: !0
+      }));
+    }), at(this, "handleMouseEnter", (t) => {
+      const r = t.target;
+      r.style.transform = "scale(1.1)";
+    }), at(this, "handleMouseLeave", (t) => {
+      const r = t.target;
+      r.style.transform = "scale(1)";
+    }), lt.info("SvgIcon component initialized");
   }
   render() {
-    const t = this.getAttribute("size") || "24", o = this.getAttribute("color") || "currentColor", s = this.getAttribute("name") || "star", r = {
+    const t = this.getAttribute("size") || "24", r = this.getAttribute("color") || "currentColor", b = this.getAttribute("name") || "star", B = {
       star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
       heart: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
       check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
@@ -825,261 +1325,342 @@ class B extends (Rt = y) {
       github: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22",
       play: "M8 5v14l11-7z",
       settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-    }, n = r[s] || r.star;
-    return /* @__PURE__ */ i(
-      "svg",
-      {
-        width: t,
-        height: t,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: o,
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "svg-icon",
-        onClick: this.handleClick,
-        style: "cursor: pointer; transition: transform 0.2s ease; display: inline-block;",
-        onMouseEnter: this.handleMouseEnter,
-        onMouseLeave: this.handleMouseLeave
-      },
-      /* @__PURE__ */ i("path", { d: n, fill: o })
-    );
+    }, L = B[b] || B.star;
+    return /* @__PURE__ */ d("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", stroke: r, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "svg-icon", onClick: this.handleClick, style: "cursor: pointer; transition: transform 0.2s ease; display: inline-block;", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, /* @__PURE__ */ d("path", { d: L, fill: r }));
   }
   static get observedAttributes() {
     return ["name", "size", "color"];
   }
-  onAttributeChanged(t, o, s) {
-    E.debug(`Attribute ${t} changed from ${o} to ${s}`), this.connected && this.rerender();
-  }
-}
-U = so(Rt);
-B = ho(U, 0, "SvgIcon", Mt, B);
-co(U, 1, B);
-var uo = Object.create, Q = Object.defineProperty, po = Object.getOwnPropertyDescriptor, Lt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Nt = (e) => {
-  throw TypeError(e);
-}, Ht = (e, t, o) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, mo = (e, t) => Q(e, "name", { value: t, configurable: !0 }), bo = (e) => [, , , uo((e == null ? void 0 : e[Lt("metadata")]) ?? null)], go = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], jt = (e) => e !== void 0 && typeof e != "function" ? Nt("Function expected") : e, fo = (e, t, o, s, r) => ({ kind: go[e], name: t, metadata: s, addInitializer: (n) => o._ ? Nt("Already initialized") : r.push(jt(n || null)) }), vo = (e, t) => Ht(t, Lt("metadata"), e[3]), xo = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, _o = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && po(r, o));
-  mo(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = fo(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, jt(a) && (r = a);
-  return vo(e, r), c && Q(r, o, c), p ? l ^ 4 ? n : c : r;
-}, _ = (e, t, o) => Ht(e, typeof t != "symbol" ? t + "" : t, o), Wt, V, Gt;
-const $ = C("SvgDemo");
-Wt = [x({ tagName: "svg-demo" })];
-class M extends (Gt = y) {
+  onAttributeChanged(t, r, b) {
+    lt.debug(`Attribute ${t} changed from ${r} to ${b}`), this.connected && this.rerender();
+  }
+}
+Lt = Le;
+[Pe, Nt] = Re(Lt, [], Ht, 0, void 0, J).c;
+Nt();
+var Gt;
+let Kt, Wt;
+function Z(e, t, r) {
+  return (t = Xt(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function Ne(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: gt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || gt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return Fe(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Xt(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Xt(e) {
+  var t = He(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function He(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function gt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function Fe(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+const ot = et("SvgDemo");
+Wt = [V({
+  tagName: "svg-demo"
+})];
+let Ge;
+class Ke extends J {
   constructor() {
-    super(), _(this, "animationId", null), _(this, "rotationAngle", 0), _(this, "showTooltip", (t, o) => {
-      t.target.setAttribute("fill", "#e74c3c"), $.debug(`Tooltip value: ${o}`);
-    }), _(this, "hideTooltip", (t) => {
+    super(), Z(this, "animationId", null), Z(this, "rotationAngle", 0), Z(this, "showTooltip", (t, r) => {
+      t.target.setAttribute("fill", "#e74c3c"), ot.debug(`Tooltip value: ${r}`);
+    }), Z(this, "hideTooltip", (t) => {
       t.target.setAttribute("fill", "#3498db");
-    }), _(this, "startAnimation", () => {
+    }), Z(this, "startAnimation", () => {
       if (this.animationId) return;
       const t = () => {
         this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(t);
       };
       this.animationId = requestAnimationFrame(t);
-    }), _(this, "stopAnimation", () => {
+    }), Z(this, "stopAnimation", () => {
       this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null);
-    }), $.info("SvgDemo component initialized");
+    }), ot.info("SvgDemo component initialized");
   }
   render() {
-    return /* @__PURE__ */ i("div", { style: "padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;" }, /* @__PURE__ */ i("h3", { style: "margin-top: 0; color: #333;" }, "SVG Showcase"), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Basic Shapes"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      /* @__PURE__ */ i(
-        "circle",
-        {
-          cx: "50",
-          cy: "50",
-          r: "30",
-          fill: "#e74c3c",
-          stroke: "#c0392b",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ i(
-        "rect",
-        {
-          x: "100",
-          y: "20",
-          width: "60",
-          height: "60",
-          fill: "#3498db",
-          stroke: "#2980b9",
-          strokeWidth: "2",
-          rx: "5"
-        }
-      ),
-      /* @__PURE__ */ i(
-        "polygon",
-        {
-          points: "200,20 230,80 170,80",
-          fill: "#2ecc71",
-          stroke: "#27ae60",
-          strokeWidth: "2"
-        }
-      ),
-      /* @__PURE__ */ i(
-        "line",
-        {
-          x1: "250",
-          y1: "20",
-          x2: "290",
-          y2: "80",
-          stroke: "#9b59b6",
-          strokeWidth: "3",
-          strokeLinecap: "round"
-        }
-      )
-    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Gradients & Effects"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      /* @__PURE__ */ i("defs", null, /* @__PURE__ */ i("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#3498db" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#9b59b6" })), /* @__PURE__ */ i("radialGradient", { id: "redGradient", cx: "50%", cy: "50%", r: "50%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#e74c3c" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#c0392b" }))),
-      /* @__PURE__ */ i(
-        "rect",
-        {
-          x: "20",
-          y: "20",
-          width: "120",
-          height: "60",
-          fill: "url(#blueGradient)",
-          rx: "10"
-        }
-      ),
-      /* @__PURE__ */ i("circle", { cx: "200", cy: "50", r: "35", fill: "url(#redGradient)" })
-    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Animation"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      /* @__PURE__ */ i("g", { transform: `translate(150, 50) rotate(${this.rotationAngle})` }, /* @__PURE__ */ i(
-        "polygon",
-        {
-          points: "-30,0 0,-40 30,0 0,40",
-          fill: "#f39c12",
-          stroke: "#e67e22",
-          strokeWidth: "2"
-        }
-      ), /* @__PURE__ */ i("circle", { cx: "0", cy: "0", r: "8", fill: "#2c3e50" }))
-    ), /* @__PURE__ */ i("div", { style: "margin-top: 10px;" }, /* @__PURE__ */ i(
-      "button",
-      {
-        onClick: this.startAnimation,
-        style: "margin-right: 10px; padding: 5px 10px;"
-      },
-      "Start Animation"
-    ), /* @__PURE__ */ i("button", { onClick: this.stopAnimation, style: "padding: 5px 10px;" }, "Stop Animation"))), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Interactive Chart"), this.renderChart()), /* @__PURE__ */ i("div", null, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Icon Components"), /* @__PURE__ */ i("div", { style: "display: flex; gap: 15px; align-items: center;" }, /* @__PURE__ */ i("svg-icon", { name: "star", size: "32", color: "#f39c12" }), /* @__PURE__ */ i("svg-icon", { name: "heart", size: "32", color: "#e74c3c" }), /* @__PURE__ */ i("svg-icon", { name: "check", size: "32", color: "#27ae60" }), /* @__PURE__ */ i("svg-icon", { name: "github", size: "32", color: "#333" }), /* @__PURE__ */ i("svg-icon", { name: "play", size: "32", color: "#3498db" }), /* @__PURE__ */ i("svg-icon", { name: "settings", size: "32", color: "#9b59b6" }))));
+    return /* @__PURE__ */ d("div", { style: "padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;" }, /* @__PURE__ */ d("h3", { style: "margin-top: 0; color: #333;" }, "SVG Showcase"), /* @__PURE__ */ d("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ d("h4", { style: "margin: 10px 0; color: #666;" }, "Basic Shapes"), /* @__PURE__ */ d("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ d("circle", { cx: "50", cy: "50", r: "30", fill: "#e74c3c", stroke: "#c0392b", strokeWidth: "2" }), /* @__PURE__ */ d("rect", { x: "100", y: "20", width: "60", height: "60", fill: "#3498db", stroke: "#2980b9", strokeWidth: "2", rx: "5" }), /* @__PURE__ */ d("polygon", { points: "200,20 230,80 170,80", fill: "#2ecc71", stroke: "#27ae60", strokeWidth: "2" }), /* @__PURE__ */ d("line", { x1: "250", y1: "20", x2: "290", y2: "80", stroke: "#9b59b6", strokeWidth: "3", strokeLinecap: "round" }))), /* @__PURE__ */ d("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ d("h4", { style: "margin: 10px 0; color: #666;" }, "Gradients & Effects"), /* @__PURE__ */ d("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ d("defs", null, /* @__PURE__ */ d("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ d("stop", { offset: "0%", stopColor: "#3498db" }), /* @__PURE__ */ d("stop", { offset: "100%", stopColor: "#9b59b6" })), /* @__PURE__ */ d("radialGradient", { id: "redGradient", cx: "50%", cy: "50%", r: "50%" }, /* @__PURE__ */ d("stop", { offset: "0%", stopColor: "#e74c3c" }), /* @__PURE__ */ d("stop", { offset: "100%", stopColor: "#c0392b" }))), /* @__PURE__ */ d("rect", { x: "20", y: "20", width: "120", height: "60", fill: "url(#blueGradient)", rx: "10" }), /* @__PURE__ */ d("circle", { cx: "200", cy: "50", r: "35", fill: "url(#redGradient)" }))), /* @__PURE__ */ d("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ d("h4", { style: "margin: 10px 0; color: #666;" }, "Animation"), /* @__PURE__ */ d("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ d("g", { transform: `translate(150, 50) rotate(${this.rotationAngle})` }, /* @__PURE__ */ d("polygon", { points: "-30,0 0,-40 30,0 0,40", fill: "#f39c12", stroke: "#e67e22", strokeWidth: "2" }), /* @__PURE__ */ d("circle", { cx: "0", cy: "0", r: "8", fill: "#2c3e50" }))), /* @__PURE__ */ d("div", { style: "margin-top: 10px;" }, /* @__PURE__ */ d("button", { onClick: this.startAnimation, style: "margin-right: 10px; padding: 5px 10px;" }, "Start Animation"), /* @__PURE__ */ d("button", { onClick: this.stopAnimation, style: "padding: 5px 10px;" }, "Stop Animation"))), /* @__PURE__ */ d("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ d("h4", { style: "margin: 10px 0; color: #666;" }, "Interactive Chart"), this.renderChart()), /* @__PURE__ */ d("div", null, /* @__PURE__ */ d("h4", { style: "margin: 10px 0; color: #666;" }, "Icon Components"), /* @__PURE__ */ d("div", { style: "display: flex; gap: 15px; align-items: center;" }, /* @__PURE__ */ d("svg-icon", { name: "star", size: "32", color: "#f39c12" }), /* @__PURE__ */ d("svg-icon", { name: "heart", size: "32", color: "#e74c3c" }), /* @__PURE__ */ d("svg-icon", { name: "check", size: "32", color: "#27ae60" }), /* @__PURE__ */ d("svg-icon", { name: "github", size: "32", color: "#333" }), /* @__PURE__ */ d("svg-icon", { name: "play", size: "32", color: "#3498db" }), /* @__PURE__ */ d("svg-icon", { name: "settings", size: "32", color: "#9b59b6" }))));
   }
   renderChart() {
-    const t = [30, 80, 45, 60, 20, 90, 55], o = Math.max(...t), s = 30, r = 40, n = 120, a = t.length * r + 40;
-    return /* @__PURE__ */ i(
-      "svg",
-      {
-        width: a,
-        height: n + 40,
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      t.map((h, u) => {
-        const l = h / o * n, p = u * r + 20, m = n - l + 20;
-        return /* @__PURE__ */ i("g", { key: u }, /* @__PURE__ */ i(
-          "rect",
-          {
-            x: p,
-            y: m,
-            width: s,
-            height: l,
-            fill: "#3498db",
-            stroke: "#2980b9",
-            strokeWidth: "1",
-            onMouseEnter: (g) => this.showTooltip(g, h),
-            onMouseLeave: this.hideTooltip,
-            style: "cursor: pointer; transition: fill 0.2s;"
-          }
-        ), /* @__PURE__ */ i(
-          "text",
-          {
-            x: p + s / 2,
-            y: n + 35,
-            textAnchor: "middle",
-            fontSize: "12",
-            fill: "#666"
-          },
-          u + 1
-        ));
-      })
-    );
+    const t = [30, 80, 45, 60, 20, 90, 55], r = Math.max(...t), b = 30, B = 40, L = 120, E = t.length * B + 40;
+    return /* @__PURE__ */ d("svg", { width: E, height: L + 40, style: "border: 1px solid #ddd; background: white;" }, t.map((P, S) => {
+      const N = P / r * L, H = S * B + 20, F = L - N + 20;
+      return /* @__PURE__ */ d("g", { key: S }, /* @__PURE__ */ d("rect", { x: H, y: F, width: b, height: N, fill: "#3498db", stroke: "#2980b9", strokeWidth: "1", onMouseEnter: (j) => this.showTooltip(j, P), onMouseLeave: this.hideTooltip, style: "cursor: pointer; transition: fill 0.2s;" }), /* @__PURE__ */ d("text", { x: H + b / 2, y: L + 35, textAnchor: "middle", fontSize: "12", fill: "#666" }, S + 1));
+    }));
   }
   onConnected() {
-    $.info("SvgDemo connected to DOM");
+    ot.info("SvgDemo connected to DOM");
   }
   onDisconnected() {
-    $.info("SvgDemo disconnected from DOM"), this.stopAnimation();
-  }
-}
-V = bo(Gt);
-M = _o(V, 0, "SvgDemo", Wt, M);
-xo(V, 1, M);
-var yo = Object.create, Z = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Yt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Xt = (e) => {
-  throw TypeError(e);
-}, qt = (e, t, o) => t in e ? Z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Co = (e, t) => Z(e, "name", { value: t, configurable: !0 }), wo = (e) => [, , , yo((e == null ? void 0 : e[Yt("metadata")]) ?? null)], $o = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Jt = (e) => e !== void 0 && typeof e != "function" ? Xt("Function expected") : e, So = (e, t, o, s, r) => ({ kind: $o[e], name: t, metadata: s, addInitializer: (n) => o._ ? Xt("Already initialized") : r.push(Jt(n || null)) }), zo = (e, t) => qt(t, Yt("metadata"), e[3]), Ao = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Eo = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ko(r, o));
-  Co(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = So(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Jt(a) && (r = a);
-  return zo(e, r), c && Z(r, o, c), p ? l ^ 4 ? n : c : r;
-}, P = (e, t, o) => qt(e, typeof t != "symbol" ? t + "" : t, o), Kt, tt, Ut;
-const Po = C("SimpleReactiveDemo");
-Kt = [x({ tagName: "simple-reactive-demo" })];
-class R extends (Ut = ot) {
+    ot.info("SvgDemo disconnected from DOM"), this.stopAnimation();
+  }
+}
+Gt = Ke;
+[Ge, Kt] = Ne(Gt, [], Wt, 0, void 0, J).c;
+Kt();
+var Yt;
+let qt, Jt;
+function ct(e, t, r) {
+  return (t = Ut(t)) in e ? Object.defineProperty(e, t, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : e[t] = r, e;
+}
+function We(e, t, r, b, B, L) {
+  function E(o, a, c) {
+    return function(n, s) {
+      return c && c(n), o[a].call(n, s);
+    };
+  }
+  function P(o, a) {
+    for (var c = 0; c < o.length; c++) o[c].call(a);
+    return a;
+  }
+  function S(o, a, c, n) {
+    if (typeof o != "function" && (n || o !== void 0)) throw new TypeError(a + " must " + (c || "be") + " a function" + (n ? "" : " or undefined"));
+    return o;
+  }
+  function N(o, a, c, n, s, z, A, T, O, y, g, f, p) {
+    function v(l) {
+      if (!p(l)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var u, x = a[0], k = a[3], _ = !T;
+    if (!_) {
+      c || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
+      y ? (g || f ? i = { get: yt(function() {
+        return k(this);
+      }, n, "get"), set: function(l) {
+        a[4](this, l);
+      } } : i[m] = k, g || yt(i[m], n, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, n));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= c ? 2 : 1) {
+      var G = x[I], K = c ? x[I - 1] : void 0, W = {}, $ = { kind: ["field", "accessor", "method", "getter", "setter", "class"][s], name: n, metadata: z, addInitializer: (function(l, w) {
+        if (l.v) throw Error("attempted to call addInitializer after decoration was finished");
+        S(w, "An initializer", "be", !0), A.push(w);
+      }).bind(null, W) };
+      try {
+        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        else {
+          var D, R;
+          $.static = O, $.private = y, y ? s === 2 ? D = function(l) {
+            return v(l), i.value;
+          } : (s < 4 && (D = E(i, "get", v)), s !== 3 && (R = E(i, "set", v))) : (D = function(l) {
+            return l[n];
+          }, (s < 2 || s === 4) && (R = function(l, w) {
+            l[n] = w;
+          }));
+          var X = $.access = { has: y ? p.bind() : function(l) {
+            return n in l;
+          } };
+          if (D && (X.get = D), R && (X.set = R), h = G.call(K, f ? { get: i.get, set: i.set } : i[m], $), f) {
+            if (typeof h == "object" && h) (u = S(h.get, "accessor.get")) && (i.get = u), (u = S(h.set, "accessor.set")) && (i.set = u), (u = S(h.init, "accessor.init")) && C.push(u);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else S(h, (g ? "field" : "method") + " decorators", "return") && (g ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        W.v = !0;
+      }
+    }
+    return (g || f) && T.push(function(l, w) {
+      for (var M = C.length - 1; M >= 0; M--) w = C[M].call(l, w);
+      return w;
+    }), g || _ || (y ? f ? T.push(E(i, "get"), E(i, "set")) : T.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, n, i)), h;
+  }
+  function H(o, a) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  }
+  if (arguments.length >= 6) var F = L[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var j = Object.create(F ?? null), U = function(o, a, c, n) {
+    var s, z, A = [], T = function(m) {
+      return Ye(m) === o;
+    }, O = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && A.push(P.bind(null, m));
+    }
+    for (var g = 0; g < a.length; g++) {
+      var f = a[g];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], u = f.length > 3, x = 16 & p, k = !!(8 & p), _ = (p &= 7) == 0, i = v + "/" + k;
+        if (!_ && !u) {
+          var C = O.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          O.set(i, !(p > 2) || p);
+        }
+        N(k ? o : o.prototype, f, x, u ? "#" + v : Ut(v), p, n, k ? z = z || [] : s = s || [], A, k, u, _, p === 1, k && u ? T : c);
+      }
+    }
+    return y(s), y(z), A;
+  }(e, t, B, j);
+  return r.length || H(e, j), { e: U, get c() {
+    var o = [];
+    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+  } };
+}
+function Ut(e) {
+  var t = Xe(e, "string");
+  return typeof t == "symbol" ? t : t + "";
+}
+function Xe(e, t) {
+  if (typeof e != "object" || !e) return e;
+  var r = e[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var b = r.call(e, t);
+    if (typeof b != "object") return b;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(e);
+}
+function yt(e, t, r) {
+  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+  try {
+    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+  } catch {
+  }
+  return e;
+}
+function Ye(e) {
+  if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e !== null ? typeof e : "null"));
+  return e;
+}
+const qe = et("SimpleReactiveDemo");
+Jt = [V({
+  tagName: "simple-reactive-demo"
+})];
+let Je;
+class Ue extends J {
   constructor() {
-    super(), P(this, "state", this.reactive({
-      count: 0,
-      message: "Click the button!"
-    })), P(this, "increment", () => {
+    super(), ct(this, "state", void 0), ct(this, "increment", () => {
       this.state.count++, this.state.message = `Clicked ${this.state.count} time${this.state.count === 1 ? "" : "s"}!`;
-    }), P(this, "reset", () => {
+    }), ct(this, "reset", () => {
       this.state.count = 0, this.state.message = "Reset! Click again!";
-    }), Po.info("SimpleReactiveDemo initialized");
+    }), qe.info("SimpleReactiveDemo initialized"), this.state = this.reactive({
+      count: 0,
+      message: "Click the button!"
+    });
   }
   render() {
-    return /* @__PURE__ */ i("div", { style: "padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;" }, /* @__PURE__ */ i("h3", null, "📱 Simple Reactive Demo"), /* @__PURE__ */ i("p", null, this.state.message), /* @__PURE__ */ i("div", { style: "font-size: 24px; margin: 16px 0;" }, "Count: ", /* @__PURE__ */ i("strong", null, this.state.count)), /* @__PURE__ */ i("div", null, /* @__PURE__ */ i("button", { onClick: this.increment, style: "margin-right: 8px; padding: 8px 16px;" }, "+ Increment"), /* @__PURE__ */ i("button", { onClick: this.reset, style: "padding: 8px 16px;" }, "🔄 Reset")), /* @__PURE__ */ i("div", { style: "margin-top: 16px; font-size: 12px; color: #666;" }, "💡 State changes automatically trigger re-renders!"));
+    return /* @__PURE__ */ d("div", { style: "padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;" }, /* @__PURE__ */ d("h3", null, "📱 Simple Reactive Demo"), /* @__PURE__ */ d("p", null, this.state.message), /* @__PURE__ */ d("div", { style: "font-size: 24px; margin: 16px 0;" }, "Count: ", /* @__PURE__ */ d("strong", null, this.state.count)), /* @__PURE__ */ d("div", null, /* @__PURE__ */ d("button", { onClick: this.increment, style: "margin-right: 8px; padding: 8px 16px;" }, "+ Increment"), /* @__PURE__ */ d("button", { onClick: this.reset, style: "padding: 8px 16px;" }, "🔄 Reset")), /* @__PURE__ */ d("div", { style: "margin-top: 16px; font-size: 12px; color: #666;" }, "💡 State changes automatically trigger re-renders!"));
   }
 }
-tt = wo(Ut);
-R = Eo(tt, 0, "SimpleReactiveDemo", Kt, R);
-Ao(tt, 1, R);
+Yt = Ue;
+[Je, qt] = We(Yt, [], Jt, 0, void 0, J).c;
+qt();
 export {
-  Oo as CONVERTER_BTN,
-  Io as CONVERTER_PANEL,
-  O as ColorPicker,
-  I as ReactiveCounter,
-  R as SimpleReactiveDemo,
-  M as SvgDemo,
-  B as SvgIcon,
-  F as ThemeSwitcher,
-  D as XyButton,
-  T as XyButtonGroup,
-  we as getCustomColorCache,
-  To as getDefaultColorCache,
-  w as handleCSSVariables,
-  Ce as setCustomColorCache,
-  ke as setDefaultColorCache,
-  $e as throttle
+  Ze as CONVERTER_BTN,
+  tr as CONVERTER_PANEL,
+  ke as ColorPicker,
+  _e as ReactiveCounter,
+  Je as SimpleReactiveDemo,
+  Ge as SvgDemo,
+  Pe as SvgIcon,
+  Oe as ThemeSwitcher,
+  ee as XyButton,
+  ae as XyButtonGroup,
+  pe as getCustomColorCache,
+  Ve as getDefaultColorCache,
+  rt as handleCSSVariables,
+  fe as setCustomColorCache,
+  de as setDefaultColorCache,
+  me as throttle
 };