@wsxjs/wsx-base-components 0.0.14 → 0.0.16

package/dist/index.js

@@ -1,116 +1,116 @@
-import { autoRegister as re, WebComponent as X, jsx as n, createLogger as ae, state as ne, LightComponent as fe } from "@wsxjs/wsx-core";
-const Rt = ':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 je;
-let Ie, Oe;
+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 Bt(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: xe(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ve(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || xe(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return Mt(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : Pe(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
 function Pe(t) {
-  var e = Nt(t, "string");
+  var e = zt(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Nt(t, e) {
+function zt(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function xe(t, e, r) {
+function ve(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -118,15 +118,15 @@ function xe(t, e, r) {
   }
   return t;
 }
-function Mt(t) {
+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;
 }
 Oe = [re({
   tagName: "xy-button"
 })];
-let Ut;
-class Ht extends X {
+let jt;
+class Lt extends X {
   static get observedAttributes() {
     return ["disabled", "icon", "loading", "href", "type", "target", "rel", "download", "toggle", "checked", "variant", "shape", "block", "size"];
   }
@@ -134,10 +134,10 @@ class Ht extends X {
     super({
       styleName: "xy-button",
       ...e
-    }), q(this, "_autoStyles", Rt), 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) => {
+    }), 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(), R = r.clientX - b.left, U = r.clientY - b.top;
-      this.style.setProperty("--x", `${R}px`), this.style.setProperty("--y", `${U}px`);
+      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();
     }), q(this, "handleClick", () => {
@@ -145,12 +145,12 @@ class Ht extends X {
     }), 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 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: (R) => {
-      this.btnElement = R;
-    } }, this.renderContent()), b = /* @__PURE__ */ n("button", { type: this.type || "button", disabled: this.disabled, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (R) => {
-      this.btnElement = R;
+    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 : b);
+    return /* @__PURE__ */ n("div", { className: "xy-button-container" }, e ? r : g);
   }
   renderContent() {
     const e = [];
@@ -175,43 +175,43 @@ class Ht extends X {
   /**
    * 属性变化处理
    */
-  onAttributeChanged(e, r, b) {
+  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;
     }
   }
@@ -256,121 +256,121 @@ class Ht extends X {
     e ? this.setAttr("icon", e) : this.removeAttr("icon");
   }
 }
-je = Ht;
-[Ut, Ie] = Bt(je, [], Oe, 0, void 0, X).c;
-Ie();
-const Ft = ':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 Re;
-let Be, Ne;
-function ke(t, e, r) {
-  return (e = Me(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+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 Kt(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, 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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Ce(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ke(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Ce(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return Wt(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : Me(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Me(t) {
-  var e = Jt(t, "string");
+function Ne(t) {
+  var e = Ot(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Jt(t, e) {
+function Ot(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Ce(t, e, r) {
+function ke(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -378,15 +378,15 @@ function Ce(t, e, r) {
   }
   return t;
 }
-function Wt(t) {
+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;
 }
-Ne = [re({
+Be = [re({
   tagName: "xy-button-group"
 })];
-let Gt;
-class Xt extends X {
+let It;
+class Rt extends X {
   static get observedAttributes() {
     return ["disabled"];
   }
@@ -394,7 +394,7 @@ class Xt extends X {
     super({
       styleName: "xy-button-group",
       ...e
-    }), ke(this, "_autoStyles", Ft), ke(this, "disabled", !1), this.disabled = e.disabled || !1;
+    }), xe(this, "_autoStyles", Dt), xe(this, "disabled", !1), this.disabled = e.disabled || !1;
   }
   render() {
     return /* @__PURE__ */ n("div", { class: "button-group-container" }, /* @__PURE__ */ n("slot", null));
@@ -402,10 +402,10 @@ class Xt extends X {
   /**
    * 属性变化处理
    */
-  onAttributeChanged(e, r, b) {
+  onAttributeChanged(e, r, g) {
     switch (e) {
       case "disabled":
-        this.disabled = b !== null, this.updateChildrenDisabledState();
+        this.disabled = g !== null, this.updateChildrenDisabledState();
         break;
     }
   }
@@ -456,160 +456,160 @@ class Xt extends X {
     });
   }
 }
-Re = Xt;
-[Gt, Be] = Kt(Re, [], Ne, 0, void 0, X).c;
-Be();
-const pe = "editor-js-text-color-cache";
-function qt(t) {
+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 Yt(t) {
+function Nt(t) {
   return t.slice(4, -1).trim();
 }
-function Qt(t) {
+function Mt(t) {
   return getComputedStyle(document.documentElement).getPropertyValue(t).trim() || t;
 }
-function de(t) {
-  if (qt(t)) {
-    const e = Yt(t);
-    return Qt(e);
+function ue(t) {
+  if (Bt(t)) {
+    const e = Nt(t);
+    return Mt(e);
   }
   return t;
 }
-function Vt(t, e) {
-  return sessionStorage.setItem(`${pe}-${e}`, JSON.stringify(t)), t;
+function Ut(t, e) {
+  return sessionStorage.setItem(`${fe}-${e}`, JSON.stringify(t)), t;
 }
-function Zt(t, e) {
-  sessionStorage.setItem(`${pe}-${e}-custom`, JSON.stringify(t));
+function Ht(t, e) {
+  sessionStorage.setItem(`${fe}-${e}-custom`, JSON.stringify(t));
 }
-function er(t) {
-  const e = sessionStorage.getItem(`${pe}-${t}-custom`);
+function Ft(t) {
+  const e = sessionStorage.getItem(`${fe}-${t}-custom`);
   return e ? JSON.parse(e) : null;
 }
-function tr(t, e) {
+function Kt(t, e) {
   let r = null;
-  return (...b) => {
+  return (...g) => {
     r || (r = setTimeout(() => {
-      t(...b), r = null;
+      t(...g), r = null;
     }, e));
   };
 }
-function lo(t, e) {
-  const r = sessionStorage.getItem(`${pe}-${e}`);
+function Qr(t, e) {
+  const r = sessionStorage.getItem(`${fe}-${e}`);
   return r ? JSON.parse(r) : t;
 }
-const co = "ce-inline-toolbar__dropdown", uo = "ce-conversion-toolbar--showed", rr = '.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 Ue;
-let He, Fe;
+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 = Ke(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+  return (e = Fe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-function or(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, 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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: we(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ce(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || we(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return nr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : Ke(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Ke(t) {
-  var e = ir(t, "string");
+function Fe(t) {
+  var e = Gt(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function ir(t, e) {
+function Gt(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function we(t, e, r) {
+function Ce(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -617,16 +617,16 @@ function we(t, e, r) {
   }
   return t;
 }
-function nr(t) {
+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 ue = ae("ColorPicker"), ar = ["#ff1300", "#EC7878", "#9C27B0", "#673AB7", "#3F51B5", "#0070FF", "#03A9F4", "#00BCD4", "#4CAF50", "#8BC34A", "#CDDC39", "#FFE500", "#FFBF00", "#FF9800", "#795548", "#9E9E9E", "#5A5A5A", "#FFF"];
-Fe = [re({
+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 sr;
-class lr extends X {
+let Yt;
+class Qt extends X {
   static get observedAttributes() {
     return ["disabled", "selected-color", "open"];
   }
@@ -634,21 +634,21 @@ class lr extends X {
     super({
       styleName: "base-color-picker",
       ...e
-    }), Y(this, "_autoStyles", rr), 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) => {
+    }), 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();
     }), Y(this, "handlePanelClick", (r) => {
       r.stopPropagation();
     }), Y(this, "handleColorSelect", (r) => {
-      var R;
-      const b = de(r);
-      this.setSelectedColor(b), this.closePanel(), Vt(b, this.pluginType), (R = this.onColorPicked) == null || R.call(this, b), this.dispatchEvent(new CustomEvent("colorchange", {
+      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
-      })), ue.debug("Color selected", {
-        color: b
+      })), ce.debug("Color selected", {
+        color: g
       });
     }), Y(this, "handleCustomPickerClick", () => {
       const r = document.createElement("input");
@@ -658,25 +658,25 @@ class lr extends X {
             opacity: 0;
             pointer-events: none;
         `;
-      const b = tr((R) => {
+      const g = Kt((S) => {
         var B;
-        const U = R.target, E = de(U.value);
-        this.setSelectedColor(E), this.setCustomColor(E), document.body.removeChild(r), (B = this.onColorPicked) == null || B.call(this, E), this.dispatchEvent(new CustomEvent("colorchange", {
+        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
-        })), ue.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();
       });
     }), Y(this, "handleDocumentClick", (r) => {
       this.isOpen && !this.contains(r.target) && this.closePanel();
-    }), this.colorCollections = e.colorCollections || ar, this.onColorPicked = e.onColorPicked, this.hasCustomPicker = e.hasCustomPicker || !1, this.pluginType = e.pluginType || "text", this.disabled = e.disabled || !1, this.defaultColor = de(e.defaultColor || this.colorCollections[0]), this.selectedColor = this.defaultColor, this.customColor = er(this.pluginType) || "", this.isOpen = !1, ue.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
@@ -741,7 +741,7 @@ class lr extends X {
    * 设置自定义颜色
    */
   setCustomColor(e) {
-    this.customColor = e, Zt(e, this.pluginType);
+    this.customColor = e, Ht(e, this.pluginType);
   }
   /**
    * 设置面板开关状态
@@ -759,27 +759,27 @@ class lr extends X {
    * 组件连接到DOM后的初始化
    */
   onConnected() {
-    document.addEventListener("click", this.handleDocumentClick), ue.info("ColorPicker connected to DOM");
+    document.addEventListener("click", this.handleDocumentClick), ce.info("ColorPicker connected to DOM");
   }
   /**
    * 组件从DOM断开时的清理
    */
   onDisconnected() {
-    document.removeEventListener("click", this.handleDocumentClick), ue.info("ColorPicker disconnected from DOM");
+    document.removeEventListener("click", this.handleDocumentClick), ce.info("ColorPicker disconnected from DOM");
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(e, r, b) {
+  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;
     }
   }
@@ -793,7 +793,7 @@ class lr extends X {
    * 公共API：设置颜色
    */
   setColor(e) {
-    this.setSelectedColor(de(e));
+    this.setSelectedColor(ue(e));
   }
   /**
    * 公共API：聚焦组件
@@ -803,121 +803,121 @@ class lr extends X {
     (e = this.colorBtn) == null || e.focus();
   }
 }
-Ue = lr;
-[sr, He] = or(Ue, [], Fe, 0, void 0, X).c;
-He();
-const cr = ".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 Je;
-let We, Ge, Xe, qe, Ye;
-function Z(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;
+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 ur(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Te(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: we(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Te(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return hr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : Qe(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Qe(t) {
-  var e = dr(t, "string");
+function Ge(t) {
+  var e = er(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function dr(t, e) {
+function er(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Te(t, e, r) {
+function we(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -925,42 +925,67 @@ function Te(t, e, r) {
   }
   return t;
 }
-function hr(t) {
+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 me = ae("ReactiveCounter");
-Ge = [re({
+const pe = ne("ReactiveCounter");
+We = [re({
   tagName: "reactive-counter"
 })];
-let fr;
-class pr extends X {
+let rr;
+class or extends X {
   constructor() {
-    super(), Z(this, "_autoStyles", cr), Z(this, "state", Xe(this, {
-      count: 0,
-      step: 1,
-      message: "Hello WSX Reactive!",
-      isRunning: !1
-    })), Z(this, "theme", qe(this, "light")), Z(this, "history", Ye(this, [])), Z(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);
-    }), Z(this, "decrement", () => {
+    }), V(this, "decrement", () => {
       this.state.count -= this.state.step, this.addToHistory(this.state.count);
-    }), Z(this, "reset", () => {
+    }), V(this, "reset", () => {
       this.state.count = 0, this.addToHistory(0);
-    }), Z(this, "handleStepChange", (e) => {
-      const r = e.target;
-      this.state.step = parseInt(r.value);
-    }), Z(this, "handleThemeChange", (e) => {
-      const r = e.target;
-      this.theme = r.value;
-    }), Z(this, "handleMessageChange", (e) => {
-      const r = e.target;
-      this.state.message = r.value;
-    }), Z(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();
-    }), Z(this, "clearHistory", () => {
+    }), V(this, "clearHistory", () => {
       this.history = [];
-    }), me.info("ReactiveCounter initialized");
+    }), pe.info("ReactiveCounter initialized");
+    let e = this.reactive({
+      count: 0,
+      step: 1,
+      message: "Hello WSX Reactive!",
+      isRunning: !1
+    });
+    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: r,
+      set: g,
+      enumerable: !0,
+      configurable: !0
+    });
+    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__ */ 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({
@@ -982,132 +1007,129 @@ class pr extends X {
     this.history = [...this.history, e];
   }
   onConnected() {
-    me.info("ReactiveCounter connected to DOM"), setTimeout(() => {
+    pe.info("ReactiveCounter connected to DOM"), setTimeout(() => {
       this.state.message = "Ready to count! 🚀";
     }, 500);
   }
   onDisconnected() {
-    me.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
-  }
-}
-Je = pr;
-({
-  e: [Xe, qe, Ye],
-  c: [fr, We]
-} = ur(Je, [[ne, 0, "state"], [ne, 0, "theme"], [ne, 0, "history"]], Ge, 0, void 0, X));
-We();
-const mr = ":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 Ve;
-let Ze, 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;
+    pe.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
+  }
 }
-function gr(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Se(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Te(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Se(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return yr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : tt(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function tt(t) {
-  var e = br(t, "string");
+function Qe(t) {
+  var e = sr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function br(t, e) {
+function sr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Se(t, e, r) {
+function Te(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -1115,21 +1137,21 @@ function Se(t, e, r) {
   }
   return t;
 }
-function yr(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;
 }
-et = [re({
+Ye = [re({
   tagName: "theme-switcher"
 })];
-let vr;
-class xr extends X {
+let lr;
+class cr extends X {
   constructor() {
     super({
       styleName: "theme-switcher"
-    }), ge(this, "_autoStyles", mr), ge(this, "currentTheme", "auto"), ge(this, "toggleTheme", () => {
-      const e = ["auto", "light", "dark"], b = (e.indexOf(this.currentTheme) + 1) % e.length;
-      this.setTheme(e[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() {
@@ -1162,120 +1184,120 @@ class xr extends X {
     });
   }
 }
-Ve = xr;
-[vr, Ze] = gr(Ve, [], et, 0, void 0, X).c;
-Ze();
-var rt;
-let ot, it;
-function be(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;
+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 kr(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, 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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: _e(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Se(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || _e(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return wr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : nt(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function nt(t) {
-  var e = Cr(t, "string");
+function tt(t) {
+  var e = dr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Cr(t, e) {
+function dr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function _e(t, e, r) {
+function Se(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -1283,19 +1305,19 @@ function _e(t, e, r) {
   }
   return t;
 }
-function wr(t) {
+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 ye = ae("SvgIcon");
-it = [re({
+const be = ne("SvgIcon");
+et = [re({
   tagName: "svg-icon"
 })];
-let Tr;
-class Sr extends X {
+let fr;
+class pr extends X {
   constructor() {
-    super(), be(this, "handleClick", (e) => {
-      ye.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: {
@@ -1304,16 +1326,16 @@ class Sr extends X {
         },
         bubbles: !0
       }));
-    }), be(this, "handleMouseEnter", (e) => {
+    }), ge(this, "handleMouseEnter", (e) => {
       const r = e.target;
       r.style.transform = "scale(1.1)";
-    }), be(this, "handleMouseLeave", (e) => {
+    }), ge(this, "handleMouseLeave", (e) => {
       const r = e.target;
       r.style.transform = "scale(1)";
-    }), ye.info("SvgIcon component initialized");
+    }), be.info("SvgIcon component initialized");
   }
   render() {
-    const e = this.getAttribute("size") || "24", r = this.getAttribute("color") || "currentColor", b = this.getAttribute("name") || "star", R = {
+    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",
@@ -1321,130 +1343,130 @@ class Sr extends X {
       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"
-    }, U = R[b] || R.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: U, 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(e, r, b) {
-    ye.debug(`Attribute ${e} 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();
   }
 }
-rt = Sr;
-[Tr, ot] = kr(rt, [], it, 0, void 0, X).c;
-ot();
-var at;
-let st, lt;
-function ce(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;
+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 _r(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, 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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Ee(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: _e(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Ee(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return zr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : ct(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function ct(t) {
-  var e = Er(t, "string");
+function nt(t) {
+  var e = gr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Er(t, e) {
+function gr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Ee(t, e, r) {
+function _e(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -1452,162 +1474,162 @@ function Ee(t, e, r) {
   }
   return t;
 }
-function zr(t) {
+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 he = ae("SvgDemo");
-lt = [re({
+const de = ne("SvgDemo");
+it = [re({
   tagName: "svg-demo"
 })];
-let Lr;
-class Dr extends X {
+let yr;
+class vr extends X {
   constructor() {
-    super(), ce(this, "animationId", null), ce(this, "rotationAngle", 0), ce(this, "showTooltip", (e, r) => {
-      e.target.setAttribute("fill", "#e74c3c"), he.debug(`Tooltip value: ${r}`);
-    }), ce(this, "hideTooltip", (e) => {
+    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");
-    }), ce(this, "startAnimation", () => {
+    }), le(this, "startAnimation", () => {
       if (this.animationId) return;
       const e = () => {
         this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(e);
       };
       this.animationId = requestAnimationFrame(e);
-    }), ce(this, "stopAnimation", () => {
+    }), le(this, "stopAnimation", () => {
       this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null);
-    }), he.info("SvgDemo component initialized");
+    }), de.info("SvgDemo component initialized");
   }
   render() {
     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 e = [30, 80, 45, 60, 20, 90, 55], r = Math.max(...e), b = 30, R = 40, U = 120, E = e.length * R + 40;
-    return /* @__PURE__ */ n("svg", { width: E, height: U + 40, style: "border: 1px solid #ddd; background: white;" }, e.map((B, T) => {
-      const N = B / r * U, M = T * R + 20, H = U - N + 20;
-      return /* @__PURE__ */ n("g", { key: T }, /* @__PURE__ */ n("rect", { x: M, y: H, width: b, height: N, fill: "#3498db", stroke: "#2980b9", strokeWidth: "1", onMouseEnter: (A) => this.showTooltip(A, B), onMouseLeave: this.hideTooltip, style: "cursor: pointer; transition: fill 0.2s;" }), /* @__PURE__ */ n("text", { x: M + b / 2, y: U + 35, textAnchor: "middle", fontSize: "12", fill: "#666" }, T + 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() {
-    he.info("SvgDemo connected to DOM");
+    de.info("SvgDemo connected to DOM");
   }
   onDisconnected() {
-    he.info("SvgDemo disconnected from DOM"), this.stopAnimation();
+    de.info("SvgDemo disconnected from DOM"), this.stopAnimation();
   }
 }
-at = Dr;
-[Lr, st] = _r(at, [], lt, 0, void 0, X).c;
-st();
-var ut;
-let dt, ht, ft;
-function ve(t, e, r) {
-  return (e = pt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+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 $r(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, 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 B(o, l) {
     for (var u = 0; u < o.length; u++) o[u].call(l);
     return l;
   }
-  function T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: ze(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ee(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || ze(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return jr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : pt(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function pt(t) {
-  var e = Ar(t, "string");
+function ct(t) {
+  var e = kr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Ar(t, e) {
+function kr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function ze(t, e, r) {
+function Ee(t, e, r) {
   typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
   try {
     Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
@@ -1615,148 +1637,154 @@ function ze(t, e, r) {
   }
   return t;
 }
-function jr(t) {
+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 Ir = ae("SimpleReactiveDemo");
-ht = [re({
+const wr = ne("SimpleReactiveDemo");
+lt = [re({
   tagName: "simple-reactive-demo"
 })];
-let Or;
-class Pr extends X {
+let Tr;
+class Sr extends X {
   constructor() {
-    super(), ve(this, "state", ft(this, {
-      count: 0,
-      message: "Click the button!"
-    })), ve(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"}!`;
-    }), ve(this, "reset", () => {
+    }), ye(this, "reset", () => {
       this.state.count = 0, this.state.message = "Reset! Click again!";
-    }), Ir.info("SimpleReactiveDemo initialized");
+    }), 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!"));
   }
 }
-ut = Pr;
-({
-  e: [ft],
-  c: [Or, dt]
-} = $r(ut, [[ne, 0, "state"]], ht, 0, void 0, X));
-dt();
-const Rr = ".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 mt;
-let gt, bt, yt, vt;
+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 = xt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+  return (e = ft(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-function Br(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Le(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ze(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Le(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return Mr(m) === o;
-    }, j = /* @__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 && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : xt(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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(s), y(z), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function xt(t) {
-  var e = Nr(t, "string");
+function ft(t) {
+  var e = zr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Nr(t, e) {
+function zr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Le(t, e, r) {
+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 });
@@ -1764,60 +1792,76 @@ function Le(t, e, r) {
   }
   return t;
 }
-function Mr(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 = ae("TodoList");
-bt = [re({
+const se = ne("TodoList");
+ht = [re({
   tagName: "todo-list"
 })];
-let Ur;
-class Hr extends X {
+let jr;
+class Lr extends X {
   constructor() {
-    super(), ee(this, "_autoStyles", Rr), ee(this, "todos", yt(this, [])), ee(this, "_newTodoText", ""), ee(this, "filter", vt(this, "all")), ee(this, "nextId", 1), ee(this, "handleInputChange", (e) => {
-      var R;
-      const r = e.target;
-      this._newTodoText = r.value;
-      const b = (R = this.shadowRoot) == null ? void 0 : R.querySelector(".todo-input-section .btn-primary");
-      b && (b.disabled = !this._newTodoText.trim());
-    }), ee(this, "handleKeyDown", (e) => {
-      e.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    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 b, R;
-      const e = (b = this.shadowRoot) == null ? void 0 : b.querySelector(".todo-input"), r = (e == null ? void 0 : e.value.trim()) || this._newTodoText.trim();
-      if (r) {
+      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: r,
+          text: A,
           completed: !1,
           createdAt: Date.now()
-        }], this._newTodoText = "", e) {
-          e.value = "";
-          const U = (R = this.shadowRoot) == null ? void 0 : R.querySelector(".todo-input-section .btn-primary");
-          U && (U.disabled = !0);
+        }], 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", (e) => {
-      this.todos = this.todos.filter((r) => r.id !== e), se.debug("Todo removed", {
-        id: e,
+    }), 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", (e) => {
-      this.todos = this.todos.map((r) => r.id === e ? {
-        ...r,
-        completed: !r.completed
-      } : r), se.debug("Todo toggled", {
-        id: e
+    }), 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((e) => !e.completed), se.debug("Completed todos cleared");
+      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();
@@ -1851,124 +1895,121 @@ class Hr extends X {
     se.info("TodoList disconnected from DOM");
   }
 }
-mt = Hr;
-({
-  e: [yt, vt],
-  c: [Ur, gt]
-} = Br(mt, [[ne, 0, "todos"], [ne, 0, "filter"]], bt, 0, void 0, X));
-gt();
-const Fr = ".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 kt;
-let Ct, wt, Tt, St;
+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 = _t(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+  return (e = bt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-function Kr(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: De(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ae(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || De(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return Wr(m) === o;
-    }, j = /* @__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 Pr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
       m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : _t(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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(s), y(z), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function _t(t) {
-  var e = Jr(t, "string");
+function bt(t) {
+  var e = Or(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Jr(t, e) {
+function Or(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function De(t, e, r) {
+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 });
@@ -1976,58 +2017,74 @@ function De(t, e, r) {
   }
   return t;
 }
-function Wr(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 le = ae("TodoListLight");
-wt = [re({
+const ae = ne("TodoListLight");
+gt = [re({
   tagName: "todo-list-light"
 })];
-let Gr;
-class Xr extends fe {
+let Ir;
+class Rr extends he {
   constructor() {
-    super(), te(this, "_autoStyles", Fr), te(this, "todos", Tt(this, [])), te(this, "_newTodoText", ""), te(this, "filter", St(this, "all")), te(this, "nextId", 1), te(this, "handleInputChange", (e) => {
-      const r = e.target;
-      this._newTodoText = r.value;
-      const b = this.querySelector(".todo-input-section .btn-primary");
-      b && (b.disabled = !this._newTodoText.trim());
-    }), te(this, "handleKeyDown", (e) => {
-      e.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    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 e = this.querySelector(".todo-input"), r = (e == null ? void 0 : e.value.trim()) || this._newTodoText.trim();
-      if (r) {
+      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: r,
+          text: A,
           completed: !1,
           createdAt: Date.now()
-        }], this._newTodoText = "", e) {
-          e.value = "";
-          const b = this.querySelector(".todo-input-section .btn-primary");
-          b && (b.disabled = !0);
+        }], this._newTodoText = "", S) {
+          S.value = "";
+          const T = this.querySelector(".todo-input-section .btn-primary");
+          T && (T.disabled = !0);
         }
-        le.debug("Todo added", {
+        ae.debug("Todo added", {
           count: this.todos.length
         });
       }
-    }), te(this, "removeTodo", (e) => {
-      this.todos = this.todos.filter((r) => r.id !== e), le.debug("Todo removed", {
-        id: e,
+    }), 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", (e) => {
-      this.todos = this.todos.map((r) => r.id === e ? {
-        ...r,
-        completed: !r.completed
-      } : r), le.debug("Todo toggled", {
-        id: e
+    }), 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((e) => !e.completed), le.debug("Completed todos cleared");
+      this.todos = this.todos.filter((S) => !S.completed), ae.debug("Completed todos cleared");
     }), te(this, "clearAll", () => {
-      this.todos = [], le.debug("All todos cleared");
-    }), le.info("TodoListLight initialized");
+      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();
@@ -2055,130 +2112,127 @@ class Xr extends fe {
     return this.todos.filter((e) => e.completed).length;
   }
   onConnected() {
-    le.info("TodoListLight connected to DOM");
+    ae.info("TodoListLight connected to DOM");
   }
   onDisconnected() {
-    le.info("TodoListLight disconnected from DOM");
-  }
-}
-kt = Xr;
-({
-  e: [Tt, St],
-  c: [Gr, Ct]
-} = Kr(kt, [[ne, 0, "todos"], [ne, 0, "filter"]], wt, 0, void 0, fe));
-Ct();
-const qr = ".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 Et;
-let zt, Lt, Dt;
+    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 = $t(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+  return (e = kt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
 }
-function Yr(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: $e(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: je(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || $e(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return Vr(m) === o;
-    }, j = /* @__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 Ur(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
       m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : $t(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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(s), y(z), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function $t(t) {
-  var e = Qr(t, "string");
+function kt(t) {
+  var e = Mr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function Qr(t, e) {
+function Mr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function $e(t, e, r) {
+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 });
@@ -2186,30 +2240,20 @@ function $e(t, e, r) {
   }
   return t;
 }
-function Vr(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 = ae("UserProfile");
-Lt = [re({
+const oe = ne("UserProfile");
+xt = [re({
   tagName: "user-profile"
 })];
-let Zr;
-class eo extends X {
+let Hr;
+class Fr extends X {
   constructor() {
-    super(), Q(this, "_autoStyles", qr), Q(this, "profile", Dt(this, {
-      name: "John Doe",
-      email: "john@example.com",
-      age: 30,
-      preferences: {
-        theme: "light",
-        language: "en",
-        notifications: !0
-      },
-      lastLogin: Date.now()
-    })), Q(this, "handleNameChange", (e) => {
-      const r = e.target;
-      this.profile.name = r.value;
+    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,
@@ -2217,9 +2261,9 @@ class eo extends X {
       }, oe.debug("Name updated", {
         name: this.profile.name
       });
-    }), Q(this, "handleEmailChange", (e) => {
-      const r = e.target;
-      this.profile.email = r.value;
+    }), Q(this, "handleEmailChange", (r) => {
+      const g = r.target;
+      this.profile.email = g.value;
     }), Q(this, "handleEmailBlur", () => {
       this.profile = {
         ...this.profile,
@@ -2227,9 +2271,9 @@ class eo extends X {
       }, oe.debug("Email updated", {
         email: this.profile.email
       });
-    }), Q(this, "handleAgeChange", (e) => {
-      const r = e.target;
-      this.profile.age = parseInt(r.value, 10) || 0;
+    }), Q(this, "handleAgeChange", (r) => {
+      const g = r.target;
+      this.profile.age = parseInt(g.value, 10) || 0;
     }), Q(this, "handleAgeBlur", () => {
       this.profile = {
         ...this.profile,
@@ -2237,20 +2281,20 @@ class eo extends X {
       }, oe.debug("Age updated", {
         age: this.profile.age
       });
-    }), Q(this, "handleThemeChange", (e) => {
-      const r = e.target;
-      this.profile.preferences.theme = r.value, oe.debug("Theme updated", {
-        theme: r.value
+    }), Q(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, oe.debug("Theme updated", {
+        theme: g.value
       });
-    }), Q(this, "handleLanguageChange", (e) => {
-      const r = e.target;
-      this.profile.preferences.language = r.value, oe.debug("Language updated", {
-        language: r.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", (e) => {
-      const r = e.target;
-      this.profile.preferences.notifications = r.checked, oe.debug("Notifications updated", {
-        notifications: r.checked
+    }), 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 = {
@@ -2284,129 +2328,145 @@ class eo extends X {
         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)))));
   }
 }
-Et = eo;
-({
-  e: [Dt],
-  c: [Zr, zt]
-} = Yr(Et, [[ne, 0, "profile"]], Lt, 0, void 0, X));
-zt();
-const to = ".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 At;
-let jt, It, Ot;
-function V(t, e, r) {
-  return (e = Pt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+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 ro(t, e, r, b, R, U) {
-  function E(o, l, u) {
-    return function(a, s) {
-      return u && u(a), o[l].call(a, s);
+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 T(o, l, u, a) {
-    if (typeof o != "function" && (a || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (a ? "" : " 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, l, u, a, s, z, L, S, j, y, g, f, p) {
+  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], _ = !S;
-    if (!_) {
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
       u || Array.isArray(x) || (x = [x]);
-      var i = {}, C = [], m = s === 3 ? "get" : s === 4 || f ? "set" : "value";
-      y ? (g || f ? i = { get: Ae(function() {
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Le(function() {
         return k(this);
-      }, a, "get"), set: function(c) {
+      }, s, "get"), set: function(c) {
         l[4](this, c);
-      } } : i[m] = k, g || Ae(i[m], a, s === 2 ? "" : m)) : g || (i = Object.getOwnPropertyDescriptor(o, a));
+      } } : 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"][s], name: a, metadata: z, addInitializer: (function(c, w) {
+      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");
-        T(w, "An initializer", "be", !0), L.push(w);
+        _(w, "An initializer", "be", !0), L.push(w);
       }).bind(null, J) };
       try {
-        if (_) (d = T(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
         else {
-          var $, O;
-          D.static = j, D.private = y, y ? s === 2 ? $ = function(c) {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
             return v(c), i.value;
-          } : (s < 4 && ($ = E(i, "get", v)), s !== 3 && (O = E(i, "set", v))) : ($ = function(c) {
-            return c[a];
-          }, (s < 2 || s === 4) && (O = function(c, w) {
-            c[a] = w;
+          } : (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 a in c;
+            return s in c;
           } };
-          if ($ && (W.get = $), O && (W.set = O), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
-            if (typeof h == "object" && h) (d = T(h.get, "accessor.get")) && (i.get = d), (d = T(h.set, "accessor.set")) && (i.set = d), (d = T(h.init, "accessor.init")) && C.push(d);
+          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 T(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 {
         J.v = !0;
       }
     }
-    return (g || f) && S.push(function(c, w) {
-      for (var P = C.length - 1; P >= 0; P--) w = C[P].call(c, 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 ? S.push(E(i, "get"), E(i, "set")) : S.push(s === 2 ? i[m] : E.call.bind(i[m])) : Object.defineProperty(o, a, 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 M(o, l) {
+  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 = U[Symbol.metadata || Symbol.for("Symbol.metadata")];
-  var A = Object.create(H ?? null), G = function(o, l, u, a) {
-    var s, z, L = [], S = function(m) {
-      return io(m) === o;
-    }, j = /* @__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 Gr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
     function y(m) {
       m && L.push(B.bind(null, m));
     }
-    for (var g = 0; g < l.length; g++) {
-      var f = l[g];
+    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), _ = (p &= 7) == 0, i = v + "/" + k;
-        if (!_ && !d) {
-          var C = j.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);
-          j.set(i, !(p > 2) || p);
+          P.set(i, !(p > 2) || p);
         }
-        N(k ? o : o.prototype, f, x, d ? "#" + v : Pt(v), p, a, k ? z = z || [] : s = s || [], L, k, d, _, p === 1, k && d ? S : u);
+        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(s), y(z), L;
-  }(t, e, R, A);
-  return r.length || M(t, A), { e: G, 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 && [M(N(t, [r], b, t.name, 5, A, o), A), B.bind(null, o, t)];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
   } };
 }
-function Pt(t) {
-  var e = oo(t, "string");
+function St(t) {
+  var e = Wr(t, "string");
   return typeof e == "symbol" ? e : e + "";
 }
-function oo(t, e) {
+function Wr(t, e) {
   if (typeof t != "object" || !t) return t;
   var r = t[Symbol.toPrimitive];
   if (r !== void 0) {
-    var b = r.call(t, e);
-    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(t);
 }
-function Ae(t, e, r) {
+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 });
@@ -2414,73 +2474,63 @@ function Ae(t, e, r) {
   }
   return t;
 }
-function io(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 = ae("UserProfileLight");
-It = [re({
+const ie = ne("UserProfileLight");
+Tt = [re({
   tagName: "user-profile-light"
 })];
-let no;
-class ao extends fe {
+let Xr;
+class qr extends he {
   constructor() {
-    super(), V(this, "_autoStyles", to), V(this, "profile", Ot(this, {
-      name: "John Doe",
-      email: "john@example.com",
-      age: 30,
-      preferences: {
-        theme: "light",
-        language: "en",
-        notifications: !0
-      },
-      lastLogin: Date.now()
-    })), V(this, "handleNameChange", (e) => {
-      const r = e.target;
-      this.profile.name = r.value;
-    }), V(this, "handleNameBlur", () => {
+    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
       });
-    }), V(this, "handleEmailChange", (e) => {
-      const r = e.target;
-      this.profile.email = r.value;
-    }), V(this, "handleEmailBlur", () => {
+    }), 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
       });
-    }), V(this, "handleAgeChange", (e) => {
-      const r = e.target;
-      this.profile.age = parseInt(r.value, 10) || 0;
-    }), V(this, "handleAgeBlur", () => {
+    }), 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
       });
-    }), V(this, "handleThemeChange", (e) => {
-      const r = e.target;
-      this.profile.preferences.theme = r.value, ie.debug("Theme updated", {
-        theme: r.value
+    }), Z(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, ie.debug("Theme updated", {
+        theme: g.value
       });
-    }), V(this, "handleLanguageChange", (e) => {
-      const r = e.target;
-      this.profile.preferences.language = r.value, ie.debug("Language updated", {
-        language: r.value
+    }), Z(this, "handleLanguageChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.language = g.value, ie.debug("Language updated", {
+        language: g.value
       });
-    }), V(this, "handleNotificationsChange", (e) => {
-      const r = e.target;
-      this.profile.preferences.notifications = r.checked, ie.debug("Notifications updated", {
-        notifications: r.checked
+    }), Z(this, "handleNotificationsChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.notifications = g.checked, ie.debug("Notifications updated", {
+        notifications: g.checked
       });
-    }), V(this, "resetProfile", () => {
+    }), Z(this, "resetProfile", () => {
       this.profile = {
         name: "John Doe",
         email: "john@example.com",
@@ -2492,14 +2542,14 @@ class ao extends fe {
         },
         lastLogin: Date.now()
       }, this._name = "John Doe", this._email = "john@example.com", this._age = 30, ie.debug("Profile reset to default");
-    }), V(this, "updateLastLogin", () => {
+    }), Z(this, "updateLastLogin", () => {
       this.profile = {
         ...this.profile,
         lastLogin: Date.now()
       }, ie.debug("Last login updated", {
         lastLogin: this.profile.lastLogin
       });
-    }), V(this, "replaceEntireProfile", () => {
+    }), Z(this, "replaceEntireProfile", () => {
       this.profile = {
         name: "Jane Smith",
         email: "jane@example.com",
@@ -2512,36 +2562,52 @@ class ao extends fe {
         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__ */ 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)))));
   }
 }
-At = ao;
-({
-  e: [Ot],
-  c: [no, jt]
-} = ro(At, [[ne, 0, "profile"]], It, 0, void 0, fe));
-jt();
+Ct = qr;
+[Xr, wt] = Jr(Ct, [], Tt, 0, void 0, he).c;
+wt();
 export {
-  co as CONVERTER_BTN,
-  uo as CONVERTER_PANEL,
-  sr as ColorPicker,
-  fr as ReactiveCounter,
-  Or as SimpleReactiveDemo,
-  Lr as SvgDemo,
-  Tr as SvgIcon,
-  vr as ThemeSwitcher,
-  Ur as TodoList,
-  Gr as TodoListLight,
-  Zr as UserProfile,
-  no as UserProfileLight,
-  Ut as XyButton,
-  Gt as XyButtonGroup,
-  er as getCustomColorCache,
-  lo as getDefaultColorCache,
-  de as handleCSSVariables,
-  Zt as setCustomColorCache,
-  Vt as setDefaultColorCache,
-  tr 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
 };