@wsxjs/wsx-base-components 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,164 +1,164 @@
-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;
-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);
+import { autoRegister as re, WebComponent as X, jsx as n, createLogger as ne, LightComponent as he } from "@wsxjs/wsx-core";
+const _t = ':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 De;
+let $e, Oe;
+function q(t, e, r) {
+  return (e = Pe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Et(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ve(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ve(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return At(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Pe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Ct(e) {
-  var t = Zt(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Pe(t) {
+  var e = zt(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function Zt(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function zt(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function ut(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function ve(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function At(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-kt = [V({
+Oe = [re({
   tagName: "xy-button"
 })];
-let ee;
-class re extends J {
+let jt;
+class Lt extends X {
   static get observedAttributes() {
     return ["disabled", "icon", "loading", "href", "type", "target", "rel", "download", "toggle", "checked", "variant", "shape", "block", "size"];
   }
-  constructor(t = {}) {
+  constructor(e = {}) {
     super({
       styleName: "xy-button",
-      ...t
-    }), 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) => {
+      ...e
+    }), q(this, "_autoStyles", _t), q(this, "disabled", !1), q(this, "loading", !1), q(this, "toggle", !1), q(this, "checked", !1), q(this, "icon", null), q(this, "href", null), q(this, "type", null), q(this, "target", "_blank"), q(this, "rel", null), q(this, "download", null), q(this, "variant", "flat"), q(this, "size", "md"), q(this, "btnElement", void 0), q(this, "iconElement", void 0), q(this, "loadingElement", void 0), q(this, "handleMouseDown", (r) => {
       if (this.disabled) return;
-      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) => {
+      const g = this.getBoundingClientRect(), S = r.clientX - g.left, A = r.clientY - g.top;
+      this.style.setProperty("--x", `${S}px`), this.style.setProperty("--y", `${A}px`);
+    }), q(this, "handleKeyDown", (r) => {
       (r.code === "Enter" || r.code === "Space") && r.stopPropagation();
-    }), Y(this, "handleClick", () => {
+    }), q(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";
+    }), this.disabled = e.disabled || !1, this.loading = e.loading || !1, this.toggle = e.toggle || !1, this.checked = e.checked || !1, this.icon = e.icon || null, this.href = e.href || null, this.type = e.type || null, this.target = e.target || "_blank", this.rel = e.rel || null, this.download = e.download || null, this.variant = e.variant || "flat", this.size = e.size || "md";
   }
   render() {
-    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);
+    const e = !!this.href, r = /* @__PURE__ */ n("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: (S) => {
+      this.btnElement = S;
+    } }, this.renderContent()), g = /* @__PURE__ */ n("button", { type: this.type || "button", disabled: this.disabled, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (S) => {
+      this.btnElement = S;
+    }, "data-wsx-key": "XyButton-button-text-0" }, this.renderContent());
+    return /* @__PURE__ */ n("div", { className: "xy-button-container" }, e ? r : g);
   }
   renderContent() {
-    const t = [];
-    return this.loading && t.push(/* @__PURE__ */ d("div", { className: "loading", ref: (r) => {
+    const e = [];
+    return this.loading && e.push(/* @__PURE__ */ n("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) => {
+    } }, "Loading...")), !this.loading && this.icon && this.icon !== "null" && e.push(/* @__PURE__ */ n("div", { className: "icon", "data-icon": this.icon, ref: (r) => {
       this.iconElement = r;
-    } }, this.icon)), t.push(/* @__PURE__ */ d("slot", null)), t;
+    } }, this.icon)), e.push(/* @__PURE__ */ n("slot", null)), e;
   }
   /**
    * 组件连接到DOM后的初始化
@@ -175,43 +175,43 @@ class re extends J {
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, r, b) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = b !== null, this.updateButtonState();
+        this.disabled = g !== null, this.updateButtonState();
         break;
       case "loading":
-        this.loading = b !== null, this.updateButtonState(), this.rerender();
+        this.loading = g !== null, this.updateButtonState(), this.rerender();
         break;
       case "icon":
-        this.icon = b, this.rerender();
+        this.icon = g, this.rerender();
         break;
       case "href":
-        this.href = b, this.rerender();
+        this.href = g, this.rerender();
         break;
       case "type":
-        this.type = b, this.updateButtonState();
+        this.type = g, this.updateButtonState();
         break;
       case "target":
-        this.target = b || "_blank";
+        this.target = g || "_blank";
         break;
       case "rel":
-        this.rel = b;
+        this.rel = g;
         break;
       case "download":
-        this.download = b;
+        this.download = g;
         break;
       case "toggle":
-        this.toggle = b !== null;
+        this.toggle = g !== null;
         break;
       case "checked":
-        this.checked = b !== null;
+        this.checked = g !== null;
         break;
       case "variant":
-        this.variant = b || "flat";
+        this.variant = g || "flat";
         break;
       case "size":
-        this.size = b || "md";
+        this.size = g || "md";
         break;
     }
   }
@@ -225,8 +225,8 @@ class re extends J {
    * 公共API：聚焦按钮
    */
   focus() {
-    var t;
-    (t = this.btnElement) == null || t.focus();
+    var e;
+    (e = this.btnElement) == null || e.focus();
   }
   /**
    * 公共API：获取/设置属性
@@ -234,178 +234,178 @@ class re extends J {
   get isDisabled() {
     return this.disabled;
   }
-  set isDisabled(t) {
-    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  set isDisabled(e) {
+    e ? this.setAttr("disabled", "") : this.removeAttr("disabled");
   }
   get isLoading() {
     return this.loading;
   }
-  set isLoading(t) {
-    t ? this.setAttr("loading", "") : this.removeAttr("loading");
+  set isLoading(e) {
+    e ? this.setAttr("loading", "") : this.removeAttr("loading");
   }
   get isChecked() {
     return this.checked;
   }
-  set isChecked(t) {
-    t ? this.setAttr("checked", "") : this.removeAttr("checked");
+  set isChecked(e) {
+    e ? this.setAttr("checked", "") : this.removeAttr("checked");
   }
   get buttonIcon() {
     return this.icon;
   }
-  set buttonIcon(t) {
-    t ? this.setAttr("icon", t) : this.removeAttr("icon");
+  set buttonIcon(e) {
+    e ? this.setAttr("icon", e) : this.removeAttr("icon");
   }
 }
-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;
+De = Lt;
+[jt, $e] = Et(De, [], Oe, 0, void 0, X).c;
+$e();
+const Dt = ':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 Ie;
+let Re, Be;
+function xe(t, e, r) {
+  return (e = Ne(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-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 $t(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ke(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ke(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Pt(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Ne(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Tt(e) {
-  var t = ne(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Ne(t) {
+  var e = Ot(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function ne(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function Ot(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function dt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function ke(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function Pt(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-Et = [V({
+Be = [re({
   tagName: "xy-button-group"
 })];
-let ae;
-class le extends J {
+let It;
+class Rt extends X {
   static get observedAttributes() {
     return ["disabled"];
   }
-  constructor(t = {}) {
+  constructor(e = {}) {
     super({
       styleName: "xy-button-group",
-      ...t
-    }), ht(this, "_autoStyles", oe), ht(this, "disabled", !1), this.disabled = t.disabled || !1;
+      ...e
+    }), xe(this, "_autoStyles", Dt), xe(this, "disabled", !1), this.disabled = e.disabled || !1;
   }
   render() {
-    return /* @__PURE__ */ d("div", { class: "button-group-container" }, /* @__PURE__ */ d("slot", null));
+    return /* @__PURE__ */ n("div", { class: "button-group-container" }, /* @__PURE__ */ n("slot", null));
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, r, b) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = b !== null, this.updateChildrenDisabledState();
+        this.disabled = g !== null, this.updateChildrenDisabledState();
         break;
     }
   }
@@ -430,8 +430,8 @@ class le extends J {
   get isDisabled() {
     return this.disabled;
   }
-  set isDisabled(t) {
-    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  set isDisabled(e) {
+    e ? this.setAttr("disabled", "") : this.removeAttr("disabled");
   }
   /**
    * 公共API：获取组内的所有按钮
@@ -456,201 +456,201 @@ class le extends J {
     });
   }
 }
-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(")");
+Ie = Rt;
+[It, Re] = $t(Ie, [], Be, 0, void 0, X).c;
+Re();
+const fe = "editor-js-text-color-cache";
+function Bt(t) {
+  return t.startsWith("var(") && t.endsWith(")");
 }
-function ue(e) {
-  return e.slice(4, -1).trim();
+function Nt(t) {
+  return t.slice(4, -1).trim();
 }
-function he(e) {
-  return getComputedStyle(document.documentElement).getPropertyValue(e).trim() || e;
+function Mt(t) {
+  return getComputedStyle(document.documentElement).getPropertyValue(t).trim() || t;
 }
-function rt(e) {
-  if (ce(e)) {
-    const t = ue(e);
-    return he(t);
+function ue(t) {
+  if (Bt(t)) {
+    const e = Nt(t);
+    return Mt(e);
   }
-  return e;
+  return t;
 }
-function de(e, t) {
-  return sessionStorage.setItem(`${it}-${t}`, JSON.stringify(e)), e;
+function Ut(t, e) {
+  return sessionStorage.setItem(`${fe}-${e}`, JSON.stringify(t)), t;
 }
-function fe(e, t) {
-  sessionStorage.setItem(`${it}-${t}-custom`, JSON.stringify(e));
+function Ht(t, e) {
+  sessionStorage.setItem(`${fe}-${e}-custom`, JSON.stringify(t));
 }
-function pe(e) {
-  const t = sessionStorage.getItem(`${it}-${e}-custom`);
-  return t ? JSON.parse(t) : null;
+function Ft(t) {
+  const e = sessionStorage.getItem(`${fe}-${t}-custom`);
+  return e ? JSON.parse(e) : null;
 }
-function me(e, t) {
+function Kt(t, e) {
   let r = null;
-  return (...b) => {
+  return (...g) => {
     r || (r = setTimeout(() => {
-      e(...b), r = null;
-    }, t));
+      t(...g), r = null;
+    }, e));
   };
 }
-function Ve(e, t) {
-  const r = sessionStorage.getItem(`${it}-${t}`);
-  return r ? JSON.parse(r) : e;
+function Qr(t, e) {
+  const r = sessionStorage.getItem(`${fe}-${e}`);
+  return r ? JSON.parse(r) : t;
 }
-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;
+const Zr = "ce-inline-toolbar__dropdown", Vr = "ce-conversion-toolbar--showed", Jt = '.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 Me;
+let Ue, He;
+function Y(t, e, r) {
+  return (e = Fe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-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 Wt(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ce(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ce(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Xt(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Fe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function $t(e) {
-  var t = ye(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Fe(t) {
+  var e = Gt(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function ye(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function Gt(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function ft(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function Ce(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function Xt(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-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({
+const ce = ne("ColorPicker"), qt = ["#ff1300", "#EC7878", "#9C27B0", "#673AB7", "#3F51B5", "#0070FF", "#03A9F4", "#00BCD4", "#4CAF50", "#8BC34A", "#CDDC39", "#FFE500", "#FFBF00", "#FF9800", "#795548", "#9E9E9E", "#5A5A5A", "#FFF"];
+He = [re({
   tagName: "color-picker"
 })];
-let ke;
-class Ce extends J {
+let Yt;
+class Qt extends X {
   static get observedAttributes() {
     return ["disabled", "selected-color", "open"];
   }
-  constructor(t = {}) {
+  constructor(e = {}) {
     super({
       styleName: "base-color-picker",
-      ...t
-    }), 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) => {
+      ...e
+    }), Y(this, "_autoStyles", Jt), Y(this, "colorCollections", void 0), Y(this, "onColorPicked", void 0), Y(this, "hasCustomPicker", void 0), Y(this, "defaultColor", void 0), Y(this, "pluginType", void 0), Y(this, "disabled", void 0), Y(this, "selectedColor", void 0), Y(this, "customColor", void 0), Y(this, "isOpen", void 0), Y(this, "colorBtn", void 0), Y(this, "colorPanel", void 0), Y(this, "handleButtonClick", (r) => {
       r.stopPropagation(), this.togglePanel();
-    }), q(this, "handlePanelClick", (r) => {
+    }), Y(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", {
+    }), Y(this, "handleColorSelect", (r) => {
+      var S;
+      const g = ue(r);
+      this.setSelectedColor(g), this.closePanel(), Ut(g, this.pluginType), (S = this.onColorPicked) == null || S.call(this, g), this.dispatchEvent(new CustomEvent("colorchange", {
         detail: {
-          color: b
+          color: g
         },
         bubbles: !0,
         composed: !0
-      })), tt.debug("Color selected", {
-        color: b
+      })), ce.debug("Color selected", {
+        color: g
       });
-    }), q(this, "handleCustomPickerClick", () => {
+    }), Y(this, "handleCustomPickerClick", () => {
       const r = document.createElement("input");
       r.type = "color", r.value = this.customColor, r.style.cssText = `
             position: fixed;
@@ -658,25 +658,25 @@ class Ce extends J {
             opacity: 0;
             pointer-events: none;
         `;
-      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", {
+      const g = Kt((S) => {
+        var B;
+        const A = S.target, T = ue(A.value);
+        this.setSelectedColor(T), this.setCustomColor(T), document.body.removeChild(r), (B = this.onColorPicked) == null || B.call(this, T), this.dispatchEvent(new CustomEvent("colorchange", {
           detail: {
-            color: E
+            color: T
           },
           bubbles: !0,
           composed: !0
-        })), tt.debug("Custom color selected", {
-          color: E
+        })), ce.debug("Custom color selected", {
+          color: T
         });
       }, 30);
-      r.addEventListener("input", b), document.body.appendChild(r), requestAnimationFrame(() => {
+      r.addEventListener("input", g), document.body.appendChild(r), requestAnimationFrame(() => {
         r.focus(), r.click();
       });
-    }), q(this, "handleDocumentClick", (r) => {
+    }), Y(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", {
+    }), this.colorCollections = e.colorCollections || qt, this.onColorPicked = e.onColorPicked, this.hasCustomPicker = e.hasCustomPicker || !1, this.pluginType = e.pluginType || "text", this.disabled = e.disabled || !1, this.defaultColor = ue(e.defaultColor || this.colorCollections[0]), this.selectedColor = this.defaultColor, this.customColor = Ft(this.pluginType) || "", this.isOpen = !1, ce.debug("ColorPicker initialized", {
       colorCollections: this.colorCollections.length,
       hasCustomPicker: this.hasCustomPicker,
       pluginType: this.pluginType
@@ -686,30 +686,30 @@ class Ce extends J {
    * 实现抽象方法：真正的JSX渲染！🎉
    */
   render() {
-    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));
+    const e = this.renderColorButton(), r = this.isOpen ? this.renderColorPanel() : null;
+    return /* @__PURE__ */ n("section", { class: "color-section" }, /* @__PURE__ */ n("div", { class: "color-popover" }, e, r));
   }
   /**
    * 渲染颜色按钮 - 真正的JSX！
    */
   renderColorButton() {
-    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" }, "_"));
+    return /* @__PURE__ */ n("xy-button", { type: "button", class: `color-btn ${this.disabled ? "disabled" : ""}`, style: `--theme-color: ${this.selectedColor}`, disabled: this.disabled, onClick: this.handleButtonClick, ref: (e) => {
+      this.colorBtn = e;
+    } }, /* @__PURE__ */ n("span", { class: "color-indicator" }, "_"));
   }
   /**
    * 渲染颜色面板 - 真正的JSX！
    */
   renderColorPanel() {
-    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()));
+    return /* @__PURE__ */ n("div", { class: "color-panel", onClick: this.handlePanelClick, ref: (e) => {
+      this.colorPanel = e;
+    } }, /* @__PURE__ */ n("div", { class: "color-grid" }, this.hasCustomPicker ? this.renderCustomPicker() : null, this.renderColorButtons()));
   }
   /**
    * 渲染自定义颜色选择器 - 真正的JSX！
    */
   renderCustomPicker() {
-    return /* @__PURE__ */ d("xy-button", { type: "button", class: "color-cube custom-picker", style: {
+    return /* @__PURE__ */ n("xy-button", { type: "button", class: "color-cube custom-picker", style: {
       backgroundColor: this.customColor
     }, onClick: this.handleCustomPickerClick, title: "自定义颜色" });
   }
@@ -717,7 +717,7 @@ class Ce extends J {
    * 渲染颜色按钮组 - 真正的JSX！
    */
   renderColorButtons() {
-    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) }));
+    return this.colorCollections.map((e) => /* @__PURE__ */ n("xy-button", { key: e, type: "button", class: "color-cube", style: `background-color: ${e}`, "data-color": e, title: e, onClick: () => this.handleColorSelect(e) }));
   }
   /**
    * 切换面板显示状态
@@ -734,20 +734,20 @@ class Ce extends J {
   /**
    * 设置选中的颜色
    */
-  setSelectedColor(t) {
-    this.selectedColor = t, this.setAttr("selected-color", t), this.updateColorButton();
+  setSelectedColor(e) {
+    this.selectedColor = e, this.setAttr("selected-color", e), this.updateColorButton();
   }
   /**
    * 设置自定义颜色
    */
-  setCustomColor(t) {
-    this.customColor = t, fe(t, this.pluginType);
+  setCustomColor(e) {
+    this.customColor = e, Ht(e, this.pluginType);
   }
   /**
    * 设置面板开关状态
    */
-  setOpen(t) {
-    this.isOpen = t, t ? this.setAttr("open", "") : this.removeAttr("open"), this.rerender();
+  setOpen(e) {
+    this.isOpen = e, e ? this.setAttr("open", "") : this.removeAttr("open"), this.rerender();
   }
   /**
    * 更新颜色按钮样式
@@ -759,27 +759,27 @@ class Ce extends J {
    * 组件连接到DOM后的初始化
    */
   onConnected() {
-    document.addEventListener("click", this.handleDocumentClick), tt.info("ColorPicker connected to DOM");
+    document.addEventListener("click", this.handleDocumentClick), ce.info("ColorPicker connected to DOM");
   }
   /**
    * 组件从DOM断开时的清理
    */
   onDisconnected() {
-    document.removeEventListener("click", this.handleDocumentClick), tt.info("ColorPicker disconnected from DOM");
+    document.removeEventListener("click", this.handleDocumentClick), ce.info("ColorPicker disconnected from DOM");
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, r, b) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = b !== null, this.rerender();
+        this.disabled = g !== null, this.rerender();
         break;
       case "selected-color":
-        b && b !== this.selectedColor && (this.selectedColor = b, this.updateColorButton());
+        g && g !== this.selectedColor && (this.selectedColor = g, this.updateColorButton());
         break;
       case "open":
-        this.isOpen = b !== null;
+        this.isOpen = g !== null;
         break;
     }
   }
@@ -792,352 +792,370 @@ class Ce extends J {
   /**
    * 公共API：设置颜色
    */
-  setColor(t) {
-    this.setSelectedColor(rt(t));
+  setColor(e) {
+    this.setSelectedColor(ue(e));
   }
   /**
    * 公共API：聚焦组件
    */
   focus() {
-    var t;
-    (t = this.colorBtn) == null || t.focus();
-  }
-}
-_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);
+    var e;
+    (e = this.colorBtn) == null || e.focus();
+  }
+}
+Me = Qt;
+[Yt, Ue] = Wt(Me, [], He, 0, void 0, X).c;
+Ue();
+const Zt = ".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 Ke;
+let Je, We;
+function V(t, e, r) {
+  return (e = Ge(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Vt(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: we(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || we(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return tr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Ge(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function It(e) {
-  var t = Ee(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Ge(t) {
+  var e = er(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function Ee(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function er(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function pt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function we(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function tr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-const nt = et("ReactiveCounter");
-Ot = [V({
+const pe = ne("ReactiveCounter");
+We = [re({
   tagName: "reactive-counter"
 })];
-let _e;
-class ze extends J {
+let rr;
+class or extends X {
   constructor() {
-    super(), Q(this, "_autoStyles", we), Q(this, "state", void 0), Q(this, "theme", void 0), Q(this, "history", void 0), Q(this, "increment", () => {
+    super(), V(this, "_autoStyles", Zt), V(this, "state", void 0), V(this, "theme", void 0), V(this, "history", void 0), V(this, "increment", () => {
       this.state.count += this.state.step, this.addToHistory(this.state.count);
-    }), Q(this, "decrement", () => {
+    }), V(this, "decrement", () => {
       this.state.count -= this.state.step, this.addToHistory(this.state.count);
-    }), Q(this, "reset", () => {
+    }), V(this, "reset", () => {
       this.state.count = 0, this.addToHistory(0);
-    }), 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", () => {
+    }), V(this, "handleStepChange", (A) => {
+      const T = A.target;
+      this.state.step = parseInt(T.value);
+    }), V(this, "handleThemeChange", (A) => {
+      const T = A.target;
+      this.theme = T.value;
+    }), V(this, "handleMessageChange", (A) => {
+      const T = A.target;
+      this.state.message = T.value;
+    }), V(this, "toggleAutoIncrement", () => {
       this.state.isRunning = !this.state.isRunning, this.state.isRunning && this.startAutoIncrement();
-    }), Q(this, "clearHistory", () => {
+    }), V(this, "clearHistory", () => {
       this.history = [];
-    }), nt.info("ReactiveCounter initialized"), this.state = this.reactive({
+    }), pe.info("ReactiveCounter initialized");
+    let e = this.reactive({
       count: 0,
       step: 1,
       message: "Hello WSX Reactive!",
       isRunning: !1
     });
-    const [t, r] = this.useState("theme", "light");
+    Object.defineProperty(this, "state", {
+      get: () => e,
+      set: (A) => {
+        e = A !== null && typeof A < "u" && (Array.isArray(A) || typeof A == "object") ? this.reactive(A) : A, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+    const [r, g] = this.useState("theme", "light");
     Object.defineProperty(this, "theme", {
-      get: t,
-      set: r,
+      get: r,
+      set: g,
       enumerable: !0,
       configurable: !0
-    }), this.history = this.reactive([]);
+    });
+    let S = this.reactive([]);
+    Object.defineProperty(this, "history", {
+      get: () => S,
+      set: (A) => {
+        S = A !== null && typeof A < "u" && (Array.isArray(A) || typeof A == "object") ? this.reactive(A) : A, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
   }
   render() {
-    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({
+    return /* @__PURE__ */ n("div", { class: `reactive-counter theme-${this.theme}` }, /* @__PURE__ */ n("div", { class: "header" }, /* @__PURE__ */ n("h3", null, "🔄 Reactive Counter"), /* @__PURE__ */ n("p", { class: "subtitle" }, this.state.message)), /* @__PURE__ */ n("div", { class: "counter-display" }, /* @__PURE__ */ n("div", { class: "count-value" }, this.state.count), /* @__PURE__ */ n("div", { class: "step-info" }, "Step: ", this.state.step)), /* @__PURE__ */ n("div", { class: "controls" }, /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.increment, disabled: this.state.isRunning, "data-wsx-key": "ReactiveCounter-button-text-5-1" }, "+", this.state.step), /* @__PURE__ */ n("button", { class: "btn btn-secondary", onClick: this.decrement, disabled: this.state.isRunning, "data-wsx-key": "ReactiveCounter-button-text-5-3" }, "-", this.state.step), /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.reset, disabled: this.state.isRunning, "data-wsx-key": "ReactiveCounter-button-text-5-5" }, "Reset")), /* @__PURE__ */ n("div", { class: "step-controls" }, /* @__PURE__ */ n("label", null, "Step Size:", /* @__PURE__ */ n("input", { type: "range", min: "1", max: "10", value: this.state.step, onInput: this.handleStepChange, "data-wsx-key": "ReactiveCounter-input-range-7-1-1" }), /* @__PURE__ */ n("span", null, this.state.step))), /* @__PURE__ */ n("div", { class: "auto-controls" }, /* @__PURE__ */ n("button", { class: `btn ${this.state.isRunning ? "btn-danger" : "btn-success"}`, onClick: this.toggleAutoIncrement, "data-wsx-key": "ReactiveCounter-button-text-9-1" }, this.state.isRunning ? "Stop" : "Start", " Auto Increment")), /* @__PURE__ */ n("div", { class: "theme-controls" }, /* @__PURE__ */ n("label", null, "Theme:", /* @__PURE__ */ n("select", { value: this.theme, onChange: this.handleThemeChange, "data-wsx-key": "ReactiveCounter-select-text-11-1-1" }, /* @__PURE__ */ n("option", { value: "light" }, "Light"), /* @__PURE__ */ n("option", { value: "dark" }, "Dark"), /* @__PURE__ */ n("option", { value: "blue" }, "Blue")))), /* @__PURE__ */ n("div", { class: "message-controls" }, /* @__PURE__ */ n("input", { type: "text", value: this.state.message, onInput: this.handleMessageChange, placeholder: "Enter a message...", "data-wsx-key": "ReactiveCounter-input-text-13-1" })), this.history.length > 0 && /* @__PURE__ */ n("div", { class: "history" }, /* @__PURE__ */ n("h4", null, "History (last 10):"), /* @__PURE__ */ n("div", { class: "history-list" }, this.history.slice(-10).map((e, r) => /* @__PURE__ */ n("span", { key: r, class: "history-item" }, e))), /* @__PURE__ */ n("button", { class: "btn btn-sm", onClick: this.clearHistory, "data-wsx-key": "ReactiveCounter-button-text-5" }, "Clear History")), /* @__PURE__ */ n("div", { class: "debug-info" }, /* @__PURE__ */ n("details", null, /* @__PURE__ */ n("summary", null, "Debug Info"), /* @__PURE__ */ n("pre", null, JSON.stringify({
       state: this.state,
       theme: this.theme,
       historyLength: this.history.length
     }, null, 2)))));
   }
   startAutoIncrement() {
-    const t = setInterval(() => {
+    const e = setInterval(() => {
       if (!this.state.isRunning) {
-        clearInterval(t);
+        clearInterval(e);
         return;
       }
       this.increment(), this.state.count % 5 === 0 && (this.state.message = `Count reached ${this.state.count}!`);
     }, 200);
   }
-  addToHistory(t) {
-    this.history = [...this.history, t];
+  addToHistory(e) {
+    this.history = [...this.history, e];
   }
   onConnected() {
-    nt.info("ReactiveCounter connected to DOM"), setTimeout(() => {
+    pe.info("ReactiveCounter connected to DOM"), setTimeout(() => {
       this.state.message = "Ready to count! 🚀";
     }, 500);
   }
   onDisconnected() {
-    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);
+    pe.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
+  }
+}
+Ke = or;
+[rr, Je] = Vt(Ke, [], We, 0, void 0, X).c;
+Je();
+const ir = ":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 Xe;
+let qe, Ye;
+function me(t, e, r) {
+  return (e = Qe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function nr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Te(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Te(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return ar(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Qe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Pt(e) {
-  var t = De(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Qe(t) {
+  var e = sr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function De(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function sr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function mt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function Te(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function ar(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-Mt = [V({
+Ye = [re({
   tagName: "theme-switcher"
 })];
-let Oe;
-class Ie extends J {
+let lr;
+class cr extends X {
   constructor() {
     super({
       styleName: "theme-switcher"
-    }), 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]);
+    }), me(this, "_autoStyles", ir), me(this, "currentTheme", "auto"), me(this, "toggleTheme", () => {
+      const e = ["auto", "light", "dark"], g = (e.indexOf(this.currentTheme) + 1) % e.length;
+      this.setTheme(e[g]);
     }), this.initTheme();
   }
   render() {
-    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())));
+    return /* @__PURE__ */ n("div", { class: "theme-switcher-container" }, /* @__PURE__ */ n("button", { class: "theme-switcher-btn", "data-theme": this.currentTheme, onClick: this.toggleTheme, title: `当前主题: ${this.getThemeLabel()}`, "data-wsx-key": "ThemeSwitcher-button-text-1" }, /* @__PURE__ */ n("span", { class: "theme-switcher-icon" }, this.getThemeIcon())));
   }
   getThemeIcon() {
     const r = document.documentElement.classList.contains("dark");
@@ -1150,174 +1168,174 @@ class Ie extends J {
       auto: "自动"
     }[this.currentTheme];
   }
-  setTheme(t) {
-    this.currentTheme = t;
+  setTheme(e) {
+    this.currentTheme = e;
     const r = document.documentElement;
-    t === "auto" ? (r.removeAttribute("class"), this.checkSystemTheme()) : r.className = t, localStorage.setItem("wsx-theme", t), this.rerender();
+    e === "auto" ? (r.removeAttribute("class"), this.checkSystemTheme()) : r.className = e, localStorage.setItem("wsx-theme", e), this.rerender();
   }
   checkSystemTheme() {
-    const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.className = t ? "dark" : "";
+    const e = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.className = e ? "dark" : "";
   }
   initTheme() {
-    const t = localStorage.getItem("wsx-theme") || "auto";
-    this.setTheme(t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (r) => {
+    const e = localStorage.getItem("wsx-theme") || "auto";
+    this.setTheme(e), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (r) => {
       this.currentTheme === "auto" && (document.documentElement.className = r.matches ? "dark" : "");
     });
   }
 }
-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;
+Xe = cr;
+[lr, qe] = nr(Xe, [], Ye, 0, void 0, X).c;
+qe();
+var Ze;
+let Ve, et;
+function ge(t, e, r) {
+  return (e = tt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-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 ur(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Se(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Se(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return hr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : tt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Ft(e) {
-  var t = Be(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function tt(t) {
+  var e = dr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function Be(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function dr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function bt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function Se(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function hr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-const lt = et("SvgIcon");
-Ht = [V({
+const be = ne("SvgIcon");
+et = [re({
   tagName: "svg-icon"
 })];
-let Pe;
-class Le extends J {
+let fr;
+class pr extends X {
   constructor() {
-    super(), at(this, "handleClick", (t) => {
-      lt.debug("SVG icon clicked", {
+    super(), ge(this, "handleClick", (e) => {
+      be.debug("SVG icon clicked", {
         name: this.getAttribute("name")
       }), this.dispatchEvent(new CustomEvent("icon-click", {
         detail: {
           name: this.getAttribute("name"),
-          originalEvent: t
+          originalEvent: e
         },
         bubbles: !0
       }));
-    }), at(this, "handleMouseEnter", (t) => {
-      const r = t.target;
+    }), ge(this, "handleMouseEnter", (e) => {
+      const r = e.target;
       r.style.transform = "scale(1.1)";
-    }), at(this, "handleMouseLeave", (t) => {
-      const r = t.target;
+    }), ge(this, "handleMouseLeave", (e) => {
+      const r = e.target;
       r.style.transform = "scale(1)";
-    }), lt.info("SvgIcon component initialized");
+    }), be.info("SvgIcon component initialized");
   }
   render() {
-    const t = this.getAttribute("size") || "24", r = this.getAttribute("color") || "currentColor", b = this.getAttribute("name") || "star", B = {
+    const e = this.getAttribute("size") || "24", r = this.getAttribute("color") || "currentColor", g = this.getAttribute("name") || "star", S = {
       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",
@@ -1325,342 +1343,1271 @@ class Le extends J {
       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"
-    }, 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 }));
+    }, A = S[g] || S.star;
+    return /* @__PURE__ */ n("svg", { width: e, height: e, 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__ */ n("path", { d: A, fill: r }));
   }
   static get observedAttributes() {
     return ["name", "size", "color"];
   }
-  onAttributeChanged(t, r, b) {
-    lt.debug(`Attribute ${t} changed from ${r} to ${b}`), this.connected && this.rerender();
+  onAttributeChanged(e, r, g) {
+    be.debug(`Attribute ${e} changed from ${r} to ${g}`), 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;
+Ze = pr;
+[fr, Ve] = ur(Ze, [], et, 0, void 0, X).c;
+Ve();
+var rt;
+let ot, it;
+function le(t, e, r) {
+  return (e = nt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-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 mr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: _e(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || _e(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return br(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : nt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Xt(e) {
-  var t = He(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function nt(t) {
+  var e = gr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function He(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function gr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function gt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function _e(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function br(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-const ot = et("SvgDemo");
-Wt = [V({
+const de = ne("SvgDemo");
+it = [re({
   tagName: "svg-demo"
 })];
-let Ge;
-class Ke extends J {
+let yr;
+class vr extends X {
   constructor() {
-    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");
-    }), Z(this, "startAnimation", () => {
+    super(), le(this, "animationId", null), le(this, "rotationAngle", 0), le(this, "showTooltip", (e, r) => {
+      e.target.setAttribute("fill", "#e74c3c"), de.debug(`Tooltip value: ${r}`);
+    }), le(this, "hideTooltip", (e) => {
+      e.target.setAttribute("fill", "#3498db");
+    }), le(this, "startAnimation", () => {
       if (this.animationId) return;
-      const t = () => {
-        this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(t);
+      const e = () => {
+        this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(e);
       };
-      this.animationId = requestAnimationFrame(t);
-    }), Z(this, "stopAnimation", () => {
+      this.animationId = requestAnimationFrame(e);
+    }), le(this, "stopAnimation", () => {
       this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null);
-    }), ot.info("SvgDemo component initialized");
+    }), de.info("SvgDemo component initialized");
   }
   render() {
-    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" }))));
+    return /* @__PURE__ */ n("div", { style: "padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;" }, /* @__PURE__ */ n("h3", { style: "margin-top: 0; color: #333;" }, "SVG Showcase"), /* @__PURE__ */ n("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ n("h4", { style: "margin: 10px 0; color: #666;" }, "Basic Shapes"), /* @__PURE__ */ n("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ n("circle", { cx: "50", cy: "50", r: "30", fill: "#e74c3c", stroke: "#c0392b", strokeWidth: "2" }), /* @__PURE__ */ n("rect", { x: "100", y: "20", width: "60", height: "60", fill: "#3498db", stroke: "#2980b9", strokeWidth: "2", rx: "5" }), /* @__PURE__ */ n("polygon", { points: "200,20 230,80 170,80", fill: "#2ecc71", stroke: "#27ae60", strokeWidth: "2" }), /* @__PURE__ */ n("line", { x1: "250", y1: "20", x2: "290", y2: "80", stroke: "#9b59b6", strokeWidth: "3", strokeLinecap: "round" }))), /* @__PURE__ */ n("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ n("h4", { style: "margin: 10px 0; color: #666;" }, "Gradients & Effects"), /* @__PURE__ */ n("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ n("defs", null, /* @__PURE__ */ n("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ n("stop", { offset: "0%", stopColor: "#3498db" }), /* @__PURE__ */ n("stop", { offset: "100%", stopColor: "#9b59b6" })), /* @__PURE__ */ n("radialGradient", { id: "redGradient", cx: "50%", cy: "50%", r: "50%" }, /* @__PURE__ */ n("stop", { offset: "0%", stopColor: "#e74c3c" }), /* @__PURE__ */ n("stop", { offset: "100%", stopColor: "#c0392b" }))), /* @__PURE__ */ n("rect", { x: "20", y: "20", width: "120", height: "60", fill: "url(#blueGradient)", rx: "10" }), /* @__PURE__ */ n("circle", { cx: "200", cy: "50", r: "35", fill: "url(#redGradient)" }))), /* @__PURE__ */ n("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ n("h4", { style: "margin: 10px 0; color: #666;" }, "Animation"), /* @__PURE__ */ n("svg", { width: "300", height: "100", style: "border: 1px solid #ddd; background: white;" }, /* @__PURE__ */ n("g", { transform: `translate(150, 50) rotate(${this.rotationAngle})` }, /* @__PURE__ */ n("polygon", { points: "-30,0 0,-40 30,0 0,40", fill: "#f39c12", stroke: "#e67e22", strokeWidth: "2" }), /* @__PURE__ */ n("circle", { cx: "0", cy: "0", r: "8", fill: "#2c3e50" }))), /* @__PURE__ */ n("div", { style: "margin-top: 10px;" }, /* @__PURE__ */ n("button", { onClick: this.startAnimation, style: "margin-right: 10px; padding: 5px 10px;", "data-wsx-key": "SvgDemo-button-text-13-5-1" }, "Start Animation"), /* @__PURE__ */ n("button", { onClick: this.stopAnimation, style: "padding: 5px 10px;", "data-wsx-key": "SvgDemo-button-text-13-5-3" }, "Stop Animation"))), /* @__PURE__ */ n("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ n("h4", { style: "margin: 10px 0; color: #666;" }, "Interactive Chart"), this.renderChart()), /* @__PURE__ */ n("div", null, /* @__PURE__ */ n("h4", { style: "margin: 10px 0; color: #666;" }, "Icon Components"), /* @__PURE__ */ n("div", { style: "display: flex; gap: 15px; align-items: center;" }, /* @__PURE__ */ n("svg-icon", { name: "star", size: "32", color: "#f39c12" }), /* @__PURE__ */ n("svg-icon", { name: "heart", size: "32", color: "#e74c3c" }), /* @__PURE__ */ n("svg-icon", { name: "check", size: "32", color: "#27ae60" }), /* @__PURE__ */ n("svg-icon", { name: "github", size: "32", color: "#333" }), /* @__PURE__ */ n("svg-icon", { name: "play", size: "32", color: "#3498db" }), /* @__PURE__ */ n("svg-icon", { name: "settings", size: "32", color: "#9b59b6" }))));
   }
   renderChart() {
-    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));
+    const e = [30, 80, 45, 60, 20, 90, 55], r = Math.max(...e), g = 30, S = 40, A = 120, T = e.length * S + 40;
+    return /* @__PURE__ */ n("svg", { width: T, height: A + 40, style: "border: 1px solid #ddd; background: white;" }, e.map((B, _) => {
+      const M = B / r * A, U = _ * S + 20, H = A - M + 20;
+      return /* @__PURE__ */ n("g", { key: _ }, /* @__PURE__ */ n("rect", { x: U, y: H, width: g, height: M, fill: "#3498db", stroke: "#2980b9", strokeWidth: "1", onMouseEnter: (O) => this.showTooltip(O, B), onMouseLeave: this.hideTooltip, style: "cursor: pointer; transition: fill 0.2s;" }), /* @__PURE__ */ n("text", { x: U + g / 2, y: A + 35, textAnchor: "middle", fontSize: "12", fill: "#666" }, _ + 1));
     }));
   }
   onConnected() {
-    ot.info("SvgDemo connected to DOM");
+    de.info("SvgDemo connected to DOM");
   }
   onDisconnected() {
-    ot.info("SvgDemo disconnected from DOM"), this.stopAnimation();
+    de.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;
+rt = vr;
+[yr, ot] = mr(rt, [], it, 0, void 0, X).c;
+ot();
+var st;
+let at, lt;
+function ye(t, e, r) {
+  return (e = ct(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-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 xr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
     };
   }
-  function P(o, a) {
-    for (var c = 0; c < o.length; c++) o[c].call(a);
-    return a;
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
   }
-  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"));
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " 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");
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) 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() {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ee(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) };
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ee(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
       try {
-        if (_) (u = S(G.call(K, h, $), "class decorators", "return")) && (h = u);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         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 $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
           }));
-          var X = $.access = { has: y ? p.bind() : function(l) {
-            return n in l;
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
           } };
-          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);
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
             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);
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
       } finally {
-        W.v = !0;
+        J.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 (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, 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;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
   }
-  function H(o, a) {
-    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: a });
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
   }
-  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();
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Cr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
-      m && A.push(P.bind(null, m));
+      m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < a.length; g++) {
-      var f = a[g];
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
       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);
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.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);
+        M(k ? o : o.prototype, f, x, d ? "#" + v : ct(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
       }
     }
-    return y(s), y(z), A;
-  }(e, t, B, j);
-  return r.length || H(e, j), { e: U, get c() {
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
     var o = [];
-    return r.length && [H(N(e, [r], b, e.name, 5, j, o), j), P.bind(null, o, e)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Ut(e) {
-  var t = Xe(e, "string");
-  return typeof t == "symbol" ? t : t + "";
+function ct(t) {
+  var e = kr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function Xe(e, t) {
-  if (typeof e != "object" || !e) return e;
-  var r = e[Symbol.toPrimitive];
+function kr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(e, t);
-    if (typeof b != "object") return b;
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return String(e);
+  return String(t);
 }
-function yt(e, t, r) {
-  typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
+function Ee(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
-    Object.defineProperty(e, "name", { configurable: !0, value: r ? r + " " + t : t });
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
   } catch {
   }
-  return e;
+  return t;
 }
-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;
+function Cr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
 }
-const qe = et("SimpleReactiveDemo");
-Jt = [V({
+const wr = ne("SimpleReactiveDemo");
+lt = [re({
   tagName: "simple-reactive-demo"
 })];
-let Je;
-class Ue extends J {
+let Tr;
+class Sr extends X {
   constructor() {
-    super(), ct(this, "state", void 0), ct(this, "increment", () => {
+    super(), ye(this, "state", void 0), ye(this, "increment", () => {
       this.state.count++, this.state.message = `Clicked ${this.state.count} time${this.state.count === 1 ? "" : "s"}!`;
-    }), ct(this, "reset", () => {
+    }), ye(this, "reset", () => {
       this.state.count = 0, this.state.message = "Reset! Click again!";
-    }), qe.info("SimpleReactiveDemo initialized"), this.state = this.reactive({
+    }), wr.info("SimpleReactiveDemo initialized");
+    let e = this.reactive({
       count: 0,
       message: "Click the button!"
     });
+    Object.defineProperty(this, "state", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    return /* @__PURE__ */ n("div", { style: "padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;" }, /* @__PURE__ */ n("h3", null, "📱 Simple Reactive Demo"), /* @__PURE__ */ n("p", null, this.state.message), /* @__PURE__ */ n("div", { style: "font-size: 24px; margin: 16px 0;" }, "Count: ", /* @__PURE__ */ n("strong", null, this.state.count)), /* @__PURE__ */ n("div", null, /* @__PURE__ */ n("button", { onClick: this.increment, style: "margin-right: 8px; padding: 8px 16px;", "data-wsx-key": "SimpleReactiveDemo-button-text-7-1" }, "+ Increment"), /* @__PURE__ */ n("button", { onClick: this.reset, style: "padding: 8px 16px;", "data-wsx-key": "SimpleReactiveDemo-button-text-7-3" }, "🔄 Reset")), /* @__PURE__ */ n("div", { style: "margin-top: 16px; font-size: 12px; color: #666;" }, "💡 State changes automatically trigger re-renders!"));
+  }
+}
+st = Sr;
+[Tr, at] = xr(st, [], lt, 0, void 0, X).c;
+at();
+const _r = ".todo-list{padding:1.5rem;max-width:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-header{margin-bottom:1.5rem;text-align:center}.todo-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.subtitle{margin:0;color:#666;font-size:.9rem}.todo-input-section{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#4caf50}.todo-filters{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-btn:hover{background:#f5f5f5}.filter-btn.active{background:#4caf50;color:#fff;border-color:#4caf50}.todo-list-container{min-height:200px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-style:italic}.todo-items{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#f9f9f9;border-radius:4px;transition:background .2s}.todo-item:hover{background:#f0f0f0}.todo-item.completed{opacity:.6}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4caf50;color:#fff}.btn-primary:hover:not(:disabled){background:#45a049}.btn-warning{background:#ff9800;color:#fff}.btn-warning:hover{background:#e68900}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#da190b}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.debug-info{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd}.debug-info summary{cursor:pointer;color:#666;font-size:.9rem}.debug-info pre{background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}";
+var ut;
+let dt, ht;
+function ee(t, e, r) {
+  return (e = ft(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Er(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ze(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ze(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Ar(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : ft(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function ft(t) {
+  var e = zr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function zr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function ze(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Ar(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const se = ne("TodoList");
+ht = [re({
+  tagName: "todo-list"
+})];
+let jr;
+class Lr extends X {
+  constructor() {
+    super(), ee(this, "_autoStyles", _r), ee(this, "todos", void 0), ee(this, "_newTodoText", ""), ee(this, "filter", void 0), ee(this, "nextId", 1), ee(this, "handleInputChange", (S) => {
+      var B;
+      const A = S.target;
+      this._newTodoText = A.value;
+      const T = (B = this.shadowRoot) == null ? void 0 : B.querySelector(".todo-input-section .btn-primary");
+      T && (T.disabled = !this._newTodoText.trim());
+    }), ee(this, "handleKeyDown", (S) => {
+      S.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    }), ee(this, "addTodo", () => {
+      var T, B;
+      const S = (T = this.shadowRoot) == null ? void 0 : T.querySelector(".todo-input"), A = (S == null ? void 0 : S.value.trim()) || this._newTodoText.trim();
+      if (A) {
+        if (this.todos = [...this.todos, {
+          id: this.nextId++,
+          text: A,
+          completed: !1,
+          createdAt: Date.now()
+        }], this._newTodoText = "", S) {
+          S.value = "";
+          const _ = (B = this.shadowRoot) == null ? void 0 : B.querySelector(".todo-input-section .btn-primary");
+          _ && (_.disabled = !0);
+        }
+        se.debug("Todo added", {
+          count: this.todos.length
+        });
+      }
+    }), ee(this, "removeTodo", (S) => {
+      this.todos = this.todos.filter((A) => A.id !== S), se.debug("Todo removed", {
+        id: S,
+        remaining: this.todos.length
+      });
+    }), ee(this, "toggleTodo", (S) => {
+      this.todos = this.todos.map((A) => A.id === S ? {
+        ...A,
+        completed: !A.completed
+      } : A), se.debug("Todo toggled", {
+        id: S
+      });
+    }), ee(this, "clearCompleted", () => {
+      this.todos = this.todos.filter((S) => !S.completed), se.debug("Completed todos cleared");
+    }), ee(this, "clearAll", () => {
+      this.todos = [], se.debug("All todos cleared");
+    }), se.info("TodoList initialized");
+    let e = this.reactive([]);
+    Object.defineProperty(this, "todos", {
+      get: () => e,
+      set: (S) => {
+        e = S !== null && typeof S < "u" && (Array.isArray(S) || typeof S == "object") ? this.reactive(S) : S, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+    const [r, g] = this.useState("filter", "all");
+    Object.defineProperty(this, "filter", {
+      get: r,
+      set: g,
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    const e = this.getFilteredTodos();
+    return /* @__PURE__ */ n("div", { class: "todo-list" }, /* @__PURE__ */ n("div", { class: "todo-header" }, /* @__PURE__ */ n("h2", null, "📝 Todo List (WebComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, this.todos.length, " total, ", this.getActiveCount(), " active,", " ", this.getCompletedCount(), " completed")), /* @__PURE__ */ n("div", { class: "todo-input-section" }, /* @__PURE__ */ n("input", { type: "text", class: "todo-input", placeholder: "Add a new todo...", value: this._newTodoText, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "data-wsx-key": "TodoList-input-text-3-1" }), /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.addTodo, disabled: !this._newTodoText.trim(), "data-wsx-key": "TodoList-button-text-3-3" }, "Add")), /* @__PURE__ */ n("div", { class: "todo-filters" }, /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "all" ? "active" : ""}`, onClick: () => this.filter = "all", "data-wsx-key": "TodoList-button-text-5-1" }, "All (", this.todos.length, ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "active" ? "active" : ""}`, onClick: () => this.filter = "active", "data-wsx-key": "TodoList-button-text-5-3" }, "Active (", this.getActiveCount(), ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "completed" ? "active" : ""}`, onClick: () => this.filter = "completed", "data-wsx-key": "TodoList-button-text-5-5" }, "Completed (", this.getCompletedCount(), ")")), /* @__PURE__ */ n("div", { class: "todo-list-container" }, e.length === 0 ? /* @__PURE__ */ n("div", { class: "empty-state" }, this.filter === "all" ? "No todos yet. Add one above! 🎉" : `No ${this.filter} todos.`) : /* @__PURE__ */ n("ul", { class: "todo-items" }, e.map((r) => /* @__PURE__ */ n("li", { key: r.id, class: `todo-item ${r.completed ? "completed" : ""}` }, /* @__PURE__ */ n("input", { type: "checkbox", checked: r.completed, onChange: () => this.toggleTodo(r.id), class: "todo-checkbox", "data-wsx-key": "TodoList-input-checkbox-7-1" }), /* @__PURE__ */ n("span", { class: "todo-text" }, r.text), /* @__PURE__ */ n("button", { class: "btn btn-sm btn-danger", onClick: () => this.removeTodo(r.id), "data-wsx-key": "TodoList-button-text-7-5" }, "Delete"))))), this.todos.length > 0 && /* @__PURE__ */ n("div", { class: "todo-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.clearCompleted, "data-wsx-key": "TodoList-button-text-1" }, "Clear Completed"), /* @__PURE__ */ n("button", { class: "btn btn-danger", onClick: this.clearAll, "data-wsx-key": "TodoList-button-text-3" }, "Clear All")), /* @__PURE__ */ n("div", { class: "debug-info" }, /* @__PURE__ */ n("details", null, /* @__PURE__ */ n("summary", null, "Debug Info"), /* @__PURE__ */ n("pre", null, JSON.stringify({
+      todosCount: this.todos.length,
+      filter: this.filter,
+      newTodoText: this._newTodoText,
+      todos: this.todos
+    }, null, 2)))));
+  }
+  getFilteredTodos() {
+    switch (this.filter) {
+      case "active":
+        return this.todos.filter((e) => !e.completed);
+      case "completed":
+        return this.todos.filter((e) => e.completed);
+      default:
+        return this.todos;
+    }
+  }
+  getActiveCount() {
+    return this.todos.filter((e) => !e.completed).length;
+  }
+  getCompletedCount() {
+    return this.todos.filter((e) => e.completed).length;
+  }
+  onConnected() {
+    se.info("TodoList connected to DOM");
+  }
+  onDisconnected() {
+    se.info("TodoList disconnected from DOM");
+  }
+}
+ut = Lr;
+[jr, dt] = Er(ut, [], ht, 0, void 0, X).c;
+dt();
+const Dr = ".todo-list-light{padding:1.5rem;max-width:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-header{margin-bottom:1.5rem;text-align:center}.todo-header h2{margin:0 0 .5rem;color:#2196f3;font-size:1.75rem}.subtitle{margin:0;color:#666;font-size:.9rem}.todo-input-section{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#2196f3}.todo-filters{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-btn:hover{background:#f5f5f5}.filter-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.todo-list-container{min-height:200px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-style:italic}.todo-items{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#f0f7ff;border-radius:4px;transition:background .2s}.todo-item:hover{background:#e3f2fd}.todo-item.completed{opacity:.6}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover:not(:disabled){background:#1976d2}.btn-warning{background:#ff9800;color:#fff}.btn-warning:hover{background:#e68900}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#da190b}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.debug-info{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd}.debug-info summary{cursor:pointer;color:#666;font-size:.9rem}.debug-info pre{background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}";
+var pt;
+let mt, gt;
+function te(t, e, r) {
+  return (e = bt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function $r(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ae(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ae(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Pr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : bt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function bt(t) {
+  var e = Or(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Or(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Ae(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Pr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const ae = ne("TodoListLight");
+gt = [re({
+  tagName: "todo-list-light"
+})];
+let Ir;
+class Rr extends he {
+  constructor() {
+    super(), te(this, "_autoStyles", Dr), te(this, "todos", void 0), te(this, "_newTodoText", ""), te(this, "filter", void 0), te(this, "nextId", 1), te(this, "handleInputChange", (S) => {
+      const A = S.target;
+      this._newTodoText = A.value;
+      const T = this.querySelector(".todo-input-section .btn-primary");
+      T && (T.disabled = !this._newTodoText.trim());
+    }), te(this, "handleKeyDown", (S) => {
+      S.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    }), te(this, "addTodo", () => {
+      const S = this.querySelector(".todo-input"), A = (S == null ? void 0 : S.value.trim()) || this._newTodoText.trim();
+      if (A) {
+        if (this.todos = [...this.todos, {
+          id: this.nextId++,
+          text: A,
+          completed: !1,
+          createdAt: Date.now()
+        }], this._newTodoText = "", S) {
+          S.value = "";
+          const T = this.querySelector(".todo-input-section .btn-primary");
+          T && (T.disabled = !0);
+        }
+        ae.debug("Todo added", {
+          count: this.todos.length
+        });
+      }
+    }), te(this, "removeTodo", (S) => {
+      this.todos = this.todos.filter((A) => A.id !== S), ae.debug("Todo removed", {
+        id: S,
+        remaining: this.todos.length
+      });
+    }), te(this, "toggleTodo", (S) => {
+      this.todos = this.todos.map((A) => A.id === S ? {
+        ...A,
+        completed: !A.completed
+      } : A), ae.debug("Todo toggled", {
+        id: S
+      });
+    }), te(this, "clearCompleted", () => {
+      this.todos = this.todos.filter((S) => !S.completed), ae.debug("Completed todos cleared");
+    }), te(this, "clearAll", () => {
+      this.todos = [], ae.debug("All todos cleared");
+    }), ae.info("TodoListLight initialized");
+    let e = this.reactive([]);
+    Object.defineProperty(this, "todos", {
+      get: () => e,
+      set: (S) => {
+        e = S !== null && typeof S < "u" && (Array.isArray(S) || typeof S == "object") ? this.reactive(S) : S, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+    const [r, g] = this.useState("filter", "all");
+    Object.defineProperty(this, "filter", {
+      get: r,
+      set: g,
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    const e = this.getFilteredTodos();
+    return /* @__PURE__ */ n("div", { class: "todo-list-light" }, /* @__PURE__ */ n("div", { class: "todo-header" }, /* @__PURE__ */ n("h2", null, "📝 Todo List (LightComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, this.todos.length, " total, ", this.getActiveCount(), " active,", " ", this.getCompletedCount(), " completed")), /* @__PURE__ */ n("div", { class: "todo-input-section" }, /* @__PURE__ */ n("input", { type: "text", class: "todo-input", placeholder: "Add a new todo...", value: this._newTodoText, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "data-wsx-key": "TodoListLight-input-text-3-1" }), /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.addTodo, disabled: !this._newTodoText.trim(), "data-wsx-key": "TodoListLight-button-text-3-3" }, "Add")), /* @__PURE__ */ n("div", { class: "todo-filters" }, /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "all" ? "active" : ""}`, onClick: () => this.filter = "all", "data-wsx-key": "TodoListLight-button-text-5-1" }, "All (", this.todos.length, ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "active" ? "active" : ""}`, onClick: () => this.filter = "active", "data-wsx-key": "TodoListLight-button-text-5-3" }, "Active (", this.getActiveCount(), ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "completed" ? "active" : ""}`, onClick: () => this.filter = "completed", "data-wsx-key": "TodoListLight-button-text-5-5" }, "Completed (", this.getCompletedCount(), ")")), /* @__PURE__ */ n("div", { class: "todo-list-container" }, e.length === 0 ? /* @__PURE__ */ n("div", { class: "empty-state" }, this.filter === "all" ? "No todos yet. Add one above! 🎉" : `No ${this.filter} todos.`) : /* @__PURE__ */ n("ul", { class: "todo-items" }, e.map((r) => /* @__PURE__ */ n("li", { key: r.id, class: `todo-item ${r.completed ? "completed" : ""}` }, /* @__PURE__ */ n("input", { type: "checkbox", checked: r.completed, onChange: () => this.toggleTodo(r.id), class: "todo-checkbox", "data-wsx-key": "TodoListLight-input-checkbox-7-1" }), /* @__PURE__ */ n("span", { class: "todo-text" }, r.text), /* @__PURE__ */ n("button", { class: "btn btn-sm btn-danger", onClick: () => this.removeTodo(r.id), "data-wsx-key": "TodoListLight-button-text-7-5" }, "Delete"))))), this.todos.length > 0 && /* @__PURE__ */ n("div", { class: "todo-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.clearCompleted, "data-wsx-key": "TodoListLight-button-text-1" }, "Clear Completed"), /* @__PURE__ */ n("button", { class: "btn btn-danger", onClick: this.clearAll, "data-wsx-key": "TodoListLight-button-text-3" }, "Clear All")), /* @__PURE__ */ n("div", { class: "debug-info" }, /* @__PURE__ */ n("details", null, /* @__PURE__ */ n("summary", null, "Debug Info"), /* @__PURE__ */ n("pre", null, JSON.stringify({
+      todosCount: this.todos.length,
+      filter: this.filter,
+      newTodoText: this._newTodoText,
+      todos: this.todos
+    }, null, 2)))));
+  }
+  getFilteredTodos() {
+    switch (this.filter) {
+      case "active":
+        return this.todos.filter((e) => !e.completed);
+      case "completed":
+        return this.todos.filter((e) => e.completed);
+      default:
+        return this.todos;
+    }
+  }
+  getActiveCount() {
+    return this.todos.filter((e) => !e.completed).length;
+  }
+  getCompletedCount() {
+    return this.todos.filter((e) => e.completed).length;
+  }
+  onConnected() {
+    ae.info("TodoListLight connected to DOM");
+  }
+  onDisconnected() {
+    ae.info("TodoListLight disconnected from DOM");
+  }
+}
+pt = Rr;
+[Ir, mt] = $r(pt, [], gt, 0, void 0, he).c;
+mt();
+const Br = ".user-profile{padding:1.5rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.profile-header{margin-bottom:2rem;text-align:center}.profile-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.profile-header .subtitle{color:#666;font-size:.9rem;margin:0}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem;border-bottom:2px solid #007bff;padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}.form-group input[type=checkbox]{margin-right:.5rem}.input-field{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.profile-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-warning{background:#ffc107;color:#212529}.btn-warning:hover{background:#e0a800}.profile-display{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-display h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.json-display{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:4px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}";
+var yt;
+let vt, xt;
+function Q(t, e, r) {
+  return (e = kt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Nr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: je(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || je(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Ur(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : kt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function kt(t) {
+  var e = Mr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Mr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function je(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Ur(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const oe = ne("UserProfile");
+xt = [re({
+  tagName: "user-profile"
+})];
+let Hr;
+class Fr extends X {
+  constructor() {
+    super(), Q(this, "_autoStyles", Br), Q(this, "profile", void 0), Q(this, "handleNameChange", (r) => {
+      const g = r.target;
+      this.profile.name = g.value;
+    }), Q(this, "handleNameBlur", () => {
+      this.profile = {
+        ...this.profile,
+        name: this.profile.name
+      }, oe.debug("Name updated", {
+        name: this.profile.name
+      });
+    }), Q(this, "handleEmailChange", (r) => {
+      const g = r.target;
+      this.profile.email = g.value;
+    }), Q(this, "handleEmailBlur", () => {
+      this.profile = {
+        ...this.profile,
+        email: this.profile.email
+      }, oe.debug("Email updated", {
+        email: this.profile.email
+      });
+    }), Q(this, "handleAgeChange", (r) => {
+      const g = r.target;
+      this.profile.age = parseInt(g.value, 10) || 0;
+    }), Q(this, "handleAgeBlur", () => {
+      this.profile = {
+        ...this.profile,
+        age: this.profile.age
+      }, oe.debug("Age updated", {
+        age: this.profile.age
+      });
+    }), Q(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, oe.debug("Theme updated", {
+        theme: g.value
+      });
+    }), Q(this, "handleLanguageChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.language = g.value, oe.debug("Language updated", {
+        language: g.value
+      });
+    }), Q(this, "handleNotificationsChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.notifications = g.checked, oe.debug("Notifications updated", {
+        notifications: g.checked
+      });
+    }), Q(this, "resetProfile", () => {
+      this.profile = {
+        name: "John Doe",
+        email: "john@example.com",
+        age: 30,
+        preferences: {
+          theme: "light",
+          language: "en",
+          notifications: !0
+        },
+        lastLogin: Date.now()
+      }, oe.debug("Profile reset to default");
+    }), Q(this, "updateLastLogin", () => {
+      this.profile = {
+        ...this.profile,
+        lastLogin: Date.now()
+      }, oe.debug("Last login updated", {
+        lastLogin: this.profile.lastLogin
+      });
+    }), Q(this, "replaceEntireProfile", () => {
+      this.profile = {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        age: 25,
+        preferences: {
+          theme: "dark",
+          language: "zh",
+          notifications: !1
+        },
+        lastLogin: Date.now()
+      }, oe.debug("Entire profile replaced");
+    }), oe.info("UserProfile initialized");
+    let e = this.reactive({
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+      preferences: {
+        theme: "light",
+        language: "en",
+        notifications: !0
+      },
+      lastLogin: Date.now()
+    });
+    Object.defineProperty(this, "profile", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    return /* @__PURE__ */ n("div", { class: "user-profile" }, /* @__PURE__ */ n("div", { class: "profile-header" }, /* @__PURE__ */ n("h2", null, "👤 User Profile (WebComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, "Demonstrates @state decorator with objects")), /* @__PURE__ */ n("div", { class: "profile-content" }, /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Basic Information"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Name:"), /* @__PURE__ */ n("input", { type: "text", value: this.profile.name, onInput: this.handleNameChange, onBlur: this.handleNameBlur, class: "input-field", "data-wsx-key": "UserProfile-input-text-3-1-3-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Email:"), /* @__PURE__ */ n("input", { type: "email", value: this.profile.email, onInput: this.handleEmailChange, onBlur: this.handleEmailBlur, class: "input-field", "data-wsx-key": "UserProfile-input-email-3-1-5-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Age:"), /* @__PURE__ */ n("input", { type: "number", value: this.profile.age.toString(), onInput: this.handleAgeChange, onBlur: this.handleAgeBlur, class: "input-field", "data-wsx-key": "UserProfile-input-number-3-1-7-3" }))), /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Preferences"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Theme:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.theme, onChange: this.handleThemeChange, class: "input-field", "data-wsx-key": "UserProfile-select-text-3-3-3-3" }, /* @__PURE__ */ n("option", { value: "light" }, "Light"), /* @__PURE__ */ n("option", { value: "dark" }, "Dark"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Language:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.language, onChange: this.handleLanguageChange, class: "input-field", "data-wsx-key": "UserProfile-select-text-3-3-5-3" }, /* @__PURE__ */ n("option", { value: "en" }, "English"), /* @__PURE__ */ n("option", { value: "zh" }, "中文"), /* @__PURE__ */ n("option", { value: "es" }, "Español"), /* @__PURE__ */ n("option", { value: "fr" }, "Français"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, /* @__PURE__ */ n("input", { type: "checkbox", checked: this.profile.preferences.notifications, onChange: this.handleNotificationsChange, "data-wsx-key": "UserProfile-input-checkbox-3-3-7-1-1" }), "Enable Notifications"))), /* @__PURE__ */ n("div", { class: "profile-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.resetProfile, "data-wsx-key": "UserProfile-button-text-3-5-1" }, "Reset to Default"), /* @__PURE__ */ n("button", { class: "btn btn-secondary", onClick: this.updateLastLogin, "data-wsx-key": "UserProfile-button-text-3-5-3" }, "Update Last Login"), /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.replaceEntireProfile, "data-wsx-key": "UserProfile-button-text-3-5-5" }, "Replace Entire Profile")), /* @__PURE__ */ n("div", { class: "profile-display" }, /* @__PURE__ */ n("h3", null, "Current Profile Data"), /* @__PURE__ */ n("pre", { class: "json-display" }, JSON.stringify(this.profile, null, 2)))));
+  }
+}
+yt = Fr;
+[Hr, vt] = Nr(yt, [], xt, 0, void 0, X).c;
+vt();
+const Kr = ".user-profile{padding:1.5rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.profile-header{margin-bottom:2rem;text-align:center}.profile-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.profile-header .subtitle{color:#666;font-size:.9rem;margin:0}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem;border-bottom:2px solid #007bff;padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}.form-group input[type=checkbox]{margin-right:.5rem}.input-field{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.profile-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-warning{background:#ffc107;color:#212529}.btn-warning:hover{background:#e0a800}.profile-display{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-display h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.json-display{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:4px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}";
+var Ct;
+let wt, Tt;
+function Z(t, e, r) {
+  return (e = St(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Jr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Le(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Le(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Gr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.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);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : St(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function St(t) {
+  var e = Wr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Wr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Le(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Gr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const ie = ne("UserProfileLight");
+Tt = [re({
+  tagName: "user-profile-light"
+})];
+let Xr;
+class qr extends he {
+  constructor() {
+    super(), Z(this, "_autoStyles", Kr), Z(this, "profile", void 0), Z(this, "handleNameChange", (r) => {
+      const g = r.target;
+      this.profile.name = g.value;
+    }), Z(this, "handleNameBlur", () => {
+      this.profile = {
+        ...this.profile,
+        name: this.profile.name
+      }, ie.debug("Name updated", {
+        name: this.profile.name
+      });
+    }), Z(this, "handleEmailChange", (r) => {
+      const g = r.target;
+      this.profile.email = g.value;
+    }), Z(this, "handleEmailBlur", () => {
+      this.profile = {
+        ...this.profile,
+        email: this.profile.email
+      }, ie.debug("Email updated", {
+        email: this.profile.email
+      });
+    }), Z(this, "handleAgeChange", (r) => {
+      const g = r.target;
+      this.profile.age = parseInt(g.value, 10) || 0;
+    }), Z(this, "handleAgeBlur", () => {
+      this.profile = {
+        ...this.profile,
+        age: this.profile.age
+      }, ie.debug("Age updated", {
+        age: this.profile.age
+      });
+    }), Z(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, ie.debug("Theme updated", {
+        theme: g.value
+      });
+    }), Z(this, "handleLanguageChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.language = g.value, ie.debug("Language updated", {
+        language: g.value
+      });
+    }), Z(this, "handleNotificationsChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.notifications = g.checked, ie.debug("Notifications updated", {
+        notifications: g.checked
+      });
+    }), Z(this, "resetProfile", () => {
+      this.profile = {
+        name: "John Doe",
+        email: "john@example.com",
+        age: 30,
+        preferences: {
+          theme: "light",
+          language: "en",
+          notifications: !0
+        },
+        lastLogin: Date.now()
+      }, this._name = "John Doe", this._email = "john@example.com", this._age = 30, ie.debug("Profile reset to default");
+    }), Z(this, "updateLastLogin", () => {
+      this.profile = {
+        ...this.profile,
+        lastLogin: Date.now()
+      }, ie.debug("Last login updated", {
+        lastLogin: this.profile.lastLogin
+      });
+    }), Z(this, "replaceEntireProfile", () => {
+      this.profile = {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        age: 25,
+        preferences: {
+          theme: "dark",
+          language: "zh",
+          notifications: !1
+        },
+        lastLogin: Date.now()
+      }, this._name = "Jane Smith", this._email = "jane@example.com", this._age = 25, ie.debug("Entire profile replaced");
+    }), ie.info("UserProfileLight initialized");
+    let e = this.reactive({
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+      preferences: {
+        theme: "light",
+        language: "en",
+        notifications: !0
+      },
+      lastLogin: Date.now()
+    });
+    Object.defineProperty(this, "profile", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
   }
   render() {
-    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!"));
+    return /* @__PURE__ */ n("div", { class: "user-profile" }, /* @__PURE__ */ n("div", { class: "profile-header" }, /* @__PURE__ */ n("h2", null, "👤 User Profile (LightComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, "Demonstrates @state decorator with objects")), /* @__PURE__ */ n("div", { class: "profile-content" }, /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Basic Information"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Name:"), /* @__PURE__ */ n("input", { type: "text", value: this.profile.name, onInput: this.handleNameChange, onBlur: this.handleNameBlur, class: "input-field", "data-wsx-key": "UserProfileLight-input-text-3-1-3-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Email:"), /* @__PURE__ */ n("input", { type: "email", value: this.profile.email, onInput: this.handleEmailChange, onBlur: this.handleEmailBlur, class: "input-field", "data-wsx-key": "UserProfileLight-input-email-3-1-5-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Age:"), /* @__PURE__ */ n("input", { type: "number", value: this.profile.age.toString(), onInput: this.handleAgeChange, onBlur: this.handleAgeBlur, class: "input-field", "data-wsx-key": "UserProfileLight-input-number-3-1-7-3" }))), /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Preferences"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Theme:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.theme, onChange: this.handleThemeChange, class: "input-field", "data-wsx-key": "UserProfileLight-select-text-3-3-3-3" }, /* @__PURE__ */ n("option", { value: "light" }, "Light"), /* @__PURE__ */ n("option", { value: "dark" }, "Dark"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Language:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.language, onChange: this.handleLanguageChange, class: "input-field", "data-wsx-key": "UserProfileLight-select-text-3-3-5-3" }, /* @__PURE__ */ n("option", { value: "en" }, "English"), /* @__PURE__ */ n("option", { value: "zh" }, "中文"), /* @__PURE__ */ n("option", { value: "es" }, "Español"), /* @__PURE__ */ n("option", { value: "fr" }, "Français"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, /* @__PURE__ */ n("input", { type: "checkbox", checked: this.profile.preferences.notifications, onChange: this.handleNotificationsChange, "data-wsx-key": "UserProfileLight-input-checkbox-3-3-7-1-1" }), "Enable Notifications"))), /* @__PURE__ */ n("div", { class: "profile-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.resetProfile, "data-wsx-key": "UserProfileLight-button-text-3-5-1" }, "Reset to Default"), /* @__PURE__ */ n("button", { class: "btn btn-secondary", onClick: this.updateLastLogin, "data-wsx-key": "UserProfileLight-button-text-3-5-3" }, "Update Last Login"), /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.replaceEntireProfile, "data-wsx-key": "UserProfileLight-button-text-3-5-5" }, "Replace Entire Profile")), /* @__PURE__ */ n("div", { class: "profile-display" }, /* @__PURE__ */ n("h3", null, "Current Profile Data"), /* @__PURE__ */ n("pre", { class: "json-display" }, JSON.stringify(this.profile, null, 2)))));
   }
 }
-Yt = Ue;
-[Je, qt] = We(Yt, [], Jt, 0, void 0, J).c;
-qt();
+Ct = qr;
+[Xr, wt] = Jr(Ct, [], Tt, 0, void 0, he).c;
+wt();
 export {
-  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
+  Zr as CONVERTER_BTN,
+  Vr as CONVERTER_PANEL,
+  Yt as ColorPicker,
+  rr as ReactiveCounter,
+  Tr as SimpleReactiveDemo,
+  yr as SvgDemo,
+  fr as SvgIcon,
+  lr as ThemeSwitcher,
+  jr as TodoList,
+  Ir as TodoListLight,
+  Hr as UserProfile,
+  Xr as UserProfileLight,
+  jt as XyButton,
+  It as XyButtonGroup,
+  Ft as getCustomColorCache,
+  Qr as getDefaultColorCache,
+  ue as handleCSSVariables,
+  Ht as setCustomColorCache,
+  Ut as setDefaultColorCache,
+  Kt as throttle
 };