@wsxjs/wsx-base-components 0.0.7 → 0.0.9

package/dist/index.js

@@ -1,110 +1,164 @@
-import { autoRegister as x, WebComponent as y, jsx as i, createLogger as C, ReactiveWebComponent as ot } from "@wsxjs/wsx-core";
-const Qt = ':host{position:relative;display:inline-flex;padding:.25em .625em;box-sizing:border-box;vertical-align:middle;line-height:1.8;overflow:hidden;align-items:center;justify-content:center;font-size:14px;color:var(--fontColor, #333);border-radius:var(--borderRadius, .25em);background:var(--fontColor, #333);transition:background .3s,box-shadow .3s,border-color .3s,color .3s}:host([size="xxxs"]){padding:.03125em .0625em;font-size:6px;line-height:1;min-width:10px;min-height:8px;border-radius:1px}:host([size="xxs"]){padding:.0625em .125em;font-size:8px;line-height:1.1;min-width:14px;min-height:12px;border-radius:2px}:host([size="xs"]){padding:.125em .25em;font-size:10px;line-height:1.2;min-width:18px;min-height:16px;border-radius:3px}:host([size="sm"]){padding:.25em .5em;font-size:12px;line-height:1.4;min-width:24px;min-height:20px;border-radius:4px}:host([size="md"]){padding:.375em .75em;font-size:14px;line-height:1.5;min-width:32px;min-height:28px;border-radius:6px}:host([size="lg"]){padding:.5em 1em;font-size:14px;line-height:1.6;min-width:40px;min-height:32px;border-radius:6px}:host([size="xl"]){padding:.625em 1.25em;font-size:16px;line-height:1.6;min-width:48px;min-height:40px;border-radius:8px}:host([shape="circle"]){border-radius:50%}:host([disabled]),:host([loading]){pointer-events:none;opacity:.6}:host([block]){display:flex}:host([disabled]:not([variant])){background:#0000001a}:host([disabled]) .btn,:host([loading]) .btn{cursor:not-allowed;pointer-events:all}:host(:not([variant="primary"]):not([variant="danger"]):not([disabled]):hover),:host(:not([variant="primary"]):not([variant="danger"]):focus-within),:host([variant="flat"][focus]){color:var(--themeColor, #42b983);border-color:var(--themeColor, #42b983)}:host(:not([variant="primary"]):not([variant="danger"])) .btn:after{background-image:radial-gradient(circle,var(--themeColor, #42b983) 10%,transparent 10.01%)}:host([variant="primary"]){color:#fff;background:var(--themeBackground, var(--themeColor, #42b983))}:host([variant="danger"]){color:#fff;background:var(--themeBackground, var(--dangerColor, #ff7875))}:host([variant="dashed"]){border-style:dashed}:host([variant="flat"]),:host([variant="primary"]),:host([variant="danger"]){border:0;padding:calc(.25em + 1px) calc(.625em + 1px)}:host([variant="flat"]) .btn:before{content:"";position:absolute;background:var(--themeColor, #42b983);pointer-events:none;left:0;right:0;top:0;bottom:0;opacity:0;transition:.3s}:host([variant="flat"]:not([disabled]):hover) .btn:before{opacity:.1}:host(:not([disabled]):hover){z-index:1}:host([variant="flat"]:focus-within) .btn:before,:host([variant="flat"][focus]) .btn:before{opacity:.2}.btn{background:none;outline:0;border:0;position:absolute;left:0;top:0;width:100%;height:100%;padding:0;-webkit-user-select:none;user-select:none;cursor:unset}.loading{margin-right:.35em}::-moz-focus-inner{border:0}.btn:before{content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:.2s;background:#fff;opacity:0}:host(:not([disabled]):active) .btn:before{opacity:.2}.btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}.btn:not([disabled]):active:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}.icon{margin-right:.35em;transition:none}:host(:empty) .icon{margin:auto}:host(:empty){padding:.65em}:host([type="flat"]:empty),:host([type="primary"]:empty){padding:calc(.65em + 1px)}::slotted(.icon){transition:none}:host([href]){cursor:pointer}';
-var Vt = Object.create, L = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, rt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), it = (e) => {
-  throw TypeError(e);
-}, st = (e, t, o) => t in e ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, te = (e, t) => L(e, "name", { value: t, configurable: !0 }), ee = (e) => [, , , Vt((e == null ? void 0 : e[rt("metadata")]) ?? null)], oe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], nt = (e) => e !== void 0 && typeof e != "function" ? it("Function expected") : e, re = (e, t, o, s, r) => ({ kind: oe[e], name: t, metadata: s, addInitializer: (n) => o._ ? it("Already initialized") : r.push(nt(n || null)) }), ie = (e, t) => st(t, rt("metadata"), e[3]), se = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ne = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Zt(r, o));
-  te(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = re(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, nt(a) && (r = a);
-  return ie(e, r), c && L(r, o, c), p ? l ^ 4 ? n : c : r;
-}, b = (e, t, o) => st(e, typeof t != "symbol" ? t + "" : t, o), at, N, lt;
-at = [x({ tagName: "xy-button" })];
-class D extends (lt = y) {
-  constructor(t = {}) {
+import { autoRegister as re, WebComponent as X, jsx as n, createLogger as ne, LightComponent as he } from "@wsxjs/wsx-core";
+const _t = ':host{position:relative;display:inline-flex;padding:.25em .625em;box-sizing:border-box;vertical-align:middle;line-height:1.8;overflow:hidden;align-items:center;justify-content:center;font-size:14px;color:var(--fontColor, #333);border-radius:var(--borderRadius, .25em);background:var(--fontColor, #333);transition:background .3s,box-shadow .3s,border-color .3s,color .3s}:host([size="xxxs"]){padding:.03125em .0625em;font-size:6px;line-height:1;min-width:10px;min-height:8px;border-radius:1px}:host([size="xxs"]){padding:.0625em .125em;font-size:8px;line-height:1.1;min-width:14px;min-height:12px;border-radius:2px}:host([size="xs"]){padding:.125em .25em;font-size:10px;line-height:1.2;min-width:18px;min-height:16px;border-radius:3px}:host([size="sm"]){padding:.25em .5em;font-size:12px;line-height:1.4;min-width:24px;min-height:20px;border-radius:4px}:host([size="md"]){padding:.375em .75em;font-size:14px;line-height:1.5;min-width:32px;min-height:28px;border-radius:6px}:host([size="lg"]){padding:.5em 1em;font-size:14px;line-height:1.6;min-width:40px;min-height:32px;border-radius:6px}:host([size="xl"]){padding:.625em 1.25em;font-size:16px;line-height:1.6;min-width:48px;min-height:40px;border-radius:8px}:host([shape="circle"]){border-radius:50%}:host([disabled]),:host([loading]){pointer-events:none;opacity:.6}:host([block]){display:flex}:host([disabled]:not([variant])){background:#0000001a}:host([disabled]) .btn,:host([loading]) .btn{cursor:not-allowed;pointer-events:all}:host(:not([variant="primary"]):not([variant="danger"]):not([disabled]):hover),:host(:not([variant="primary"]):not([variant="danger"]):focus-within),:host([variant="flat"][focus]){color:var(--themeColor, #42b983);border-color:var(--themeColor, #42b983)}:host(:not([variant="primary"]):not([variant="danger"])) .btn:after{background-image:radial-gradient(circle,var(--themeColor, #42b983) 10%,transparent 10.01%)}:host([variant="primary"]){color:#fff;background:var(--themeBackground, var(--themeColor, #42b983))}:host([variant="danger"]){color:#fff;background:var(--themeBackground, var(--dangerColor, #ff7875))}:host([variant="dashed"]){border-style:dashed}:host([variant="flat"]),:host([variant="primary"]),:host([variant="danger"]){border:0;padding:calc(.25em + 1px) calc(.625em + 1px)}:host([variant="flat"]) .btn:before{content:"";position:absolute;background:var(--themeColor, #42b983);pointer-events:none;left:0;right:0;top:0;bottom:0;opacity:0;transition:.3s}:host([variant="flat"]:not([disabled]):hover) .btn:before{opacity:.1}:host(:not([disabled]):hover){z-index:1}:host([variant="flat"]:focus-within) .btn:before,:host([variant="flat"][focus]) .btn:before{opacity:.2}.btn{background:none;outline:0;border:0;position:absolute;left:0;top:0;width:100%;height:100%;padding:0;-webkit-user-select:none;user-select:none;cursor:unset}.loading{margin-right:.35em}::-moz-focus-inner{border:0}.btn:before{content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;transition:.2s;background:#fff;opacity:0}:host(:not([disabled]):active) .btn:before{opacity:.2}.btn:after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--x, 0);top:var(--y, 0);pointer-events:none;background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}.btn:not([disabled]):active:after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}.icon{margin-right:.35em;transition:none}:host(:empty) .icon{margin:auto}:host(:empty){padding:.65em}:host([type="flat"]:empty),:host([type="primary"]:empty){padding:calc(.65em + 1px)}::slotted(.icon){transition:none}:host([href]){cursor:pointer}';
+var De;
+let $e, Oe;
+function q(t, e, r) {
+  return (e = Pe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Et(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ve(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ve(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return At(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Pe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function Pe(t) {
+  var e = zt(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function zt(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function ve(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 jt;
+class Lt extends X {
+  static get observedAttributes() {
+    return ["disabled", "icon", "loading", "href", "type", "target", "rel", "download", "toggle", "checked", "variant", "shape", "block", "size"];
+  }
+  constructor(e = {}) {
     super({
-      styles: Qt,
       styleName: "xy-button",
-      ...t
-    }), b(this, "disabled", !1), b(this, "loading", !1), b(this, "toggle", !1), b(this, "checked", !1), b(this, "icon", null), b(this, "href", null), b(this, "type", null), b(this, "target", "_blank"), b(this, "rel", null), b(this, "download", null), b(this, "variant", "flat"), b(this, "size", "md"), b(this, "btnElement"), b(this, "iconElement"), b(this, "loadingElement"), b(this, "handleMouseDown", (o) => {
+      ...e
+    }), q(this, "_autoStyles", _t), q(this, "disabled", !1), q(this, "loading", !1), q(this, "toggle", !1), q(this, "checked", !1), q(this, "icon", null), q(this, "href", null), q(this, "type", null), q(this, "target", "_blank"), q(this, "rel", null), q(this, "download", null), q(this, "variant", "flat"), q(this, "size", "md"), q(this, "btnElement", void 0), q(this, "iconElement", void 0), q(this, "loadingElement", void 0), q(this, "handleMouseDown", (r) => {
       if (this.disabled) return;
-      const s = this.getBoundingClientRect(), r = o.clientX - s.left, n = o.clientY - s.top;
-      this.style.setProperty("--x", `${r}px`), this.style.setProperty("--y", `${n}px`);
-    }), b(this, "handleKeyDown", (o) => {
-      (o.code === "Enter" || o.code === "Space") && o.stopPropagation();
-    }), b(this, "handleClick", () => {
+      const 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", () => {
       this.toggle && !this.disabled && (this.checked = !this.checked, this.checked ? this.setAttr("checked", "") : this.removeAttr("checked"));
-    }), this.disabled = t.disabled || !1, this.loading = t.loading || !1, this.toggle = t.toggle || !1, this.checked = t.checked || !1, this.icon = t.icon || null, this.href = t.href || null, this.type = t.type || null, this.target = t.target || "_blank", this.rel = t.rel || null, this.download = t.download || null, this.variant = t.variant || "flat", this.size = t.size || "md";
-  }
-  static get observedAttributes() {
-    return [
-      "disabled",
-      "icon",
-      "loading",
-      "href",
-      "type",
-      "target",
-      "rel",
-      "download",
-      "toggle",
-      "checked",
-      "variant",
-      "shape",
-      "block",
-      "size"
-    ];
+    }), this.disabled = e.disabled || !1, this.loading = e.loading || !1, this.toggle = e.toggle || !1, this.checked = e.checked || !1, this.icon = e.icon || null, this.href = e.href || null, this.type = e.type || null, this.target = e.target || "_blank", this.rel = e.rel || null, this.download = e.download || null, this.variant = e.variant || "flat", this.size = e.size || "md";
   }
   render() {
-    const t = !!this.href, o = /* @__PURE__ */ i(
-      "a",
-      {
-        href: this.href,
-        target: this.target,
-        rel: this.rel || void 0,
-        download: this.download || void 0,
-        className: "btn",
-        onMouseDown: this.handleMouseDown,
-        onKeyDown: this.handleKeyDown,
-        ref: (r) => {
-          this.btnElement = r;
-        }
-      },
-      this.renderContent()
-    ), s = /* @__PURE__ */ i(
-      "button",
-      {
-        type: this.type || "button",
-        disabled: this.disabled,
-        className: "btn",
-        onMouseDown: this.handleMouseDown,
-        onKeyDown: this.handleKeyDown,
-        ref: (r) => {
-          this.btnElement = r;
-        }
-      },
-      this.renderContent()
-    );
-    return /* @__PURE__ */ i("div", { className: "xy-button-container" }, t ? o : s);
+    const e = !!this.href, r = /* @__PURE__ */ n("a", { href: this.href, target: this.target, rel: this.rel || void 0, download: this.download || void 0, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (S) => {
+      this.btnElement = S;
+    } }, this.renderContent()), g = /* @__PURE__ */ n("button", { type: this.type || "button", disabled: this.disabled, className: "btn", onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown, ref: (S) => {
+      this.btnElement = S;
+    }, "data-wsx-key": "XyButton-button-text-0" }, this.renderContent());
+    return /* @__PURE__ */ n("div", { className: "xy-button-container" }, e ? r : g);
   }
   renderContent() {
-    const t = [];
-    return this.loading && t.push(
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: "loading",
-          ref: (o) => {
-            this.loadingElement = o;
-          }
-        },
-        "Loading..."
-      )
-    ), !this.loading && this.icon && this.icon !== "null" && t.push(
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: "icon",
-          "data-icon": this.icon,
-          ref: (o) => {
-            this.iconElement = o;
-          }
-        },
-        this.icon
-      )
-    ), t.push(/* @__PURE__ */ i("slot", null)), t;
+    const e = [];
+    return this.loading && e.push(/* @__PURE__ */ n("div", { className: "loading", ref: (r) => {
+      this.loadingElement = r;
+    } }, "Loading...")), !this.loading && this.icon && this.icon !== "null" && e.push(/* @__PURE__ */ n("div", { className: "icon", "data-icon": this.icon, ref: (r) => {
+      this.iconElement = r;
+    } }, this.icon)), e.push(/* @__PURE__ */ n("slot", null)), e;
   }
   /**
    * 组件连接到DOM后的初始化
@@ -121,43 +175,43 @@ class D extends (lt = y) {
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = s !== null, this.updateButtonState();
+        this.disabled = g !== null, this.updateButtonState();
         break;
       case "loading":
-        this.loading = s !== null, this.updateButtonState(), this.rerender();
+        this.loading = g !== null, this.updateButtonState(), this.rerender();
         break;
       case "icon":
-        this.icon = s, this.rerender();
+        this.icon = g, this.rerender();
         break;
       case "href":
-        this.href = s, this.rerender();
+        this.href = g, this.rerender();
         break;
       case "type":
-        this.type = s, this.updateButtonState();
+        this.type = g, this.updateButtonState();
         break;
       case "target":
-        this.target = s || "_blank";
+        this.target = g || "_blank";
         break;
       case "rel":
-        this.rel = s;
+        this.rel = g;
         break;
       case "download":
-        this.download = s;
+        this.download = g;
         break;
       case "toggle":
-        this.toggle = s !== null;
+        this.toggle = g !== null;
         break;
       case "checked":
-        this.checked = s !== null;
+        this.checked = g !== null;
         break;
       case "variant":
-        this.variant = s || "flat";
+        this.variant = g || "flat";
         break;
       case "size":
-        this.size = s || "md";
+        this.size = g || "md";
         break;
     }
   }
@@ -171,8 +225,8 @@ class D extends (lt = y) {
    * 公共API：聚焦按钮
    */
   focus() {
-    var t;
-    (t = this.btnElement) == null || t.focus();
+    var e;
+    (e = this.btnElement) == null || e.focus();
   }
   /**
    * 公共API：获取/设置属性
@@ -180,66 +234,178 @@ class D extends (lt = y) {
   get isDisabled() {
     return this.disabled;
   }
-  set isDisabled(t) {
-    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  set isDisabled(e) {
+    e ? this.setAttr("disabled", "") : this.removeAttr("disabled");
   }
   get isLoading() {
     return this.loading;
   }
-  set isLoading(t) {
-    t ? this.setAttr("loading", "") : this.removeAttr("loading");
+  set isLoading(e) {
+    e ? this.setAttr("loading", "") : this.removeAttr("loading");
   }
   get isChecked() {
     return this.checked;
   }
-  set isChecked(t) {
-    t ? this.setAttr("checked", "") : this.removeAttr("checked");
+  set isChecked(e) {
+    e ? this.setAttr("checked", "") : this.removeAttr("checked");
   }
   get buttonIcon() {
     return this.icon;
   }
-  set buttonIcon(t) {
-    t ? this.setAttr("icon", t) : this.removeAttr("icon");
-  }
-}
-N = ee(lt);
-D = ne(N, 0, "XyButton", at, D);
-se(N, 1, D);
-const ae = ':host{display:inline-flex}::slotted(xy-button:not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(xy-button){margin:0!important}::slotted(xy-button:not(:first-of-type)){margin-left:-1px!important}::slotted(xy-button[type]:not([type="dashed"]):not(:first-of-type)){margin-left:1px!important}::slotted(xy-button:first-of-type){border-top-right-radius:0;border-bottom-right-radius:0}::slotted(xy-button:last-of-type){border-top-left-radius:0;border-bottom-left-radius:0}';
-var le = Object.create, H = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, ct = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), dt = (e) => {
-  throw TypeError(e);
-}, ht = (e, t, o) => t in e ? H(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, de = (e, t) => H(e, "name", { value: t, configurable: !0 }), he = (e) => [, , , le((e == null ? void 0 : e[ct("metadata")]) ?? null)], ue = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], ut = (e) => e !== void 0 && typeof e != "function" ? dt("Function expected") : e, pe = (e, t, o, s, r) => ({ kind: ue[e], name: t, metadata: s, addInitializer: (n) => o._ ? dt("Already initialized") : r.push(ut(n || null)) }), me = (e, t) => ht(t, ct("metadata"), e[3]), be = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ge = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ce(r, o));
-  de(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = pe(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, ut(a) && (r = a);
-  return me(e, r), c && H(r, o, c), p ? l ^ 4 ? n : c : r;
-}, fe = (e, t, o) => ht(e, t + "", o), pt, j, mt;
-pt = [x({ tagName: "xy-button-group" })];
-class T extends (mt = y) {
-  constructor(t = {}) {
-    super({
-      styles: ae,
-      styleName: "xy-button-group",
-      ...t
-    }), fe(this, "disabled", !1), this.disabled = t.disabled || !1;
+  set buttonIcon(e) {
+    e ? this.setAttr("icon", e) : this.removeAttr("icon");
+  }
+}
+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 $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 _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ke(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ke(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Pt(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Ne(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function Ne(t) {
+  var e = Ot(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Ot(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function ke(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
   }
+  return t;
+}
+function 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;
+}
+Be = [re({
+  tagName: "xy-button-group"
+})];
+let It;
+class Rt extends X {
   static get observedAttributes() {
     return ["disabled"];
   }
+  constructor(e = {}) {
+    super({
+      styleName: "xy-button-group",
+      ...e
+    }), xe(this, "_autoStyles", Dt), xe(this, "disabled", !1), this.disabled = e.disabled || !1;
+  }
   render() {
-    return /* @__PURE__ */ i("div", { class: "button-group-container" }, /* @__PURE__ */ i("slot", null));
+    return /* @__PURE__ */ n("div", { class: "button-group-container" }, /* @__PURE__ */ n("slot", null));
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = s !== null, this.updateChildrenDisabledState();
+        this.disabled = g !== null, this.updateChildrenDisabledState();
         break;
     }
   }
@@ -254,8 +420,8 @@ class T extends (mt = y) {
    */
   updateChildrenDisabledState() {
     if (!this.disabled) return;
-    this.querySelectorAll("xy-button").forEach((o) => {
-      this.disabled ? o.setAttribute("disabled", "") : o.removeAttribute("disabled");
+    this.querySelectorAll("xy-button").forEach((r) => {
+      this.disabled ? r.setAttribute("disabled", "") : r.removeAttribute("disabled");
     });
   }
   /**
@@ -264,8 +430,8 @@ class T extends (mt = y) {
   get isDisabled() {
     return this.disabled;
   }
-  set isDisabled(t) {
-    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  set isDisabled(e) {
+    e ? this.setAttr("disabled", "") : this.removeAttr("disabled");
   }
   /**
    * 公共API：获取组内的所有按钮
@@ -277,221 +443,281 @@ class T extends (mt = y) {
    * 公共API：启用所有按钮
    */
   enableAll() {
-    this.getButtons().forEach((o) => {
-      o.removeAttribute("disabled");
+    this.getButtons().forEach((r) => {
+      r.removeAttribute("disabled");
     });
   }
   /**
    * 公共API：禁用所有按钮
    */
   disableAll() {
-    this.getButtons().forEach((o) => {
-      o.setAttribute("disabled", "");
+    this.getButtons().forEach((r) => {
+      r.setAttribute("disabled", "");
     });
   }
 }
-j = he(mt);
-T = ge(j, 0, "XyButtonGroup", pt, T);
-be(j, 1, T);
-const ve = '.color-section{display:inline-block;position:relative}.color-popover{display:inline-block;position:relative;overflow:visible}.color-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;background:var(--theme-color, #000);color:transparent;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.color-btn:hover:not(.disabled){border-color:#3f51b5;box-shadow:0 2px 8px #3f51b54d}.color-btn.disabled{opacity:.5;cursor:not-allowed}.color-indicator{font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.color-panel{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 20px #00000026;padding:8px;margin-top:4px;box-sizing:border-box;transform-origin:top left;animation:colorPanelShow .2s ease-out}@keyframes colorPanelShow{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px}.color-cube{width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;cursor:pointer;transition:all .2s ease;box-sizing:border-box;background-color:var(--cube-color, #000)}.color-cube:hover{border-color:#3f51b5;transform:scale(1.1);box-shadow:0 2px 8px #3f51b566;z-index:1}.color-cube:active{transform:scale(.95)}.color-cube.custom-picker{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00 42%,#0f0 57%,#00ff80,#0ff 85%,#0080ff);position:relative}.color-cube.custom-picker:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}:host([disabled]) .color-btn{opacity:.5;cursor:not-allowed}:host([open]) .color-panel{display:block}:host(:not([open])) .color-panel{display:none}@media (max-width: 768px){.color-panel{position:fixed;top:auto;left:50%;bottom:10px;transform:translate(-50%);width:90vw;max-width:300px}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px}.color-cube{width:24px;height:24px}}@media (prefers-color-scheme: dark){.color-panel{background:#2d2d2d;border-color:#404040;color:#fff}.color-btn,.color-cube{border-color:#404040}}', S = "editor-js-text-color-cache";
-function xe(e) {
-  return e.startsWith("var(") && e.endsWith(")");
+Ie = Rt;
+[It, Re] = $t(Ie, [], Be, 0, void 0, X).c;
+Re();
+const fe = "editor-js-text-color-cache";
+function Bt(t) {
+  return t.startsWith("var(") && t.endsWith(")");
 }
-function _e(e) {
-  return e.slice(4, -1).trim();
+function Nt(t) {
+  return t.slice(4, -1).trim();
 }
-function ye(e) {
-  return getComputedStyle(document.documentElement).getPropertyValue(e).trim() || e;
+function Mt(t) {
+  return getComputedStyle(document.documentElement).getPropertyValue(t).trim() || t;
 }
-function w(e) {
-  if (xe(e)) {
-    const t = _e(e);
-    return ye(t);
+function ue(t) {
+  if (Bt(t)) {
+    const e = Nt(t);
+    return Mt(e);
   }
-  return e;
+  return t;
 }
-function ke(e, t) {
-  return sessionStorage.setItem(`${S}-${t}`, JSON.stringify(e)), e;
+function Ut(t, e) {
+  return sessionStorage.setItem(`${fe}-${e}`, JSON.stringify(t)), t;
 }
-function Ce(e, t) {
-  sessionStorage.setItem(`${S}-${t}-custom`, JSON.stringify(e));
+function Ht(t, e) {
+  sessionStorage.setItem(`${fe}-${e}-custom`, JSON.stringify(t));
 }
-function we(e) {
-  const t = sessionStorage.getItem(`${S}-${e}-custom`);
-  return t ? JSON.parse(t) : null;
+function Ft(t) {
+  const e = sessionStorage.getItem(`${fe}-${t}-custom`);
+  return e ? JSON.parse(e) : null;
 }
-function $e(e, t) {
-  let o = null;
-  return (...s) => {
-    o || (o = setTimeout(() => {
-      e(...s), o = null;
-    }, t));
+function Kt(t, e) {
+  let r = null;
+  return (...g) => {
+    r || (r = setTimeout(() => {
+      t(...g), r = null;
+    }, e));
   };
 }
-function To(e, t) {
-  const o = sessionStorage.getItem(`${S}-${t}`);
-  return o ? JSON.parse(o) : e;
-}
-const Oo = "ce-inline-toolbar__dropdown", Io = "ce-conversion-toolbar--showed";
-var Se = Object.create, W = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, bt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), gt = (e) => {
-  throw TypeError(e);
-}, ft = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Ae = (e, t) => W(e, "name", { value: t, configurable: !0 }), Ee = (e) => [, , , Se((e == null ? void 0 : e[bt("metadata")]) ?? null)], Pe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], vt = (e) => e !== void 0 && typeof e != "function" ? gt("Function expected") : e, De = (e, t, o, s, r) => ({ kind: Pe[e], name: t, metadata: s, addInitializer: (n) => o._ ? gt("Already initialized") : r.push(vt(n || null)) }), Te = (e, t) => ft(t, bt("metadata"), e[3]), Oe = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Ie = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ze(r, o));
-  Ae(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = De(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, vt(a) && (r = a);
-  return Te(e, r), c && W(r, o, c), p ? l ^ 4 ? n : c : r;
-}, f = (e, t, o) => ft(e, typeof t != "symbol" ? t + "" : t, o), xt, G, _t;
-const k = C("ColorPicker"), Fe = [
-  "#ff1300",
-  "#EC7878",
-  "#9C27B0",
-  "#673AB7",
-  "#3F51B5",
-  "#0070FF",
-  "#03A9F4",
-  "#00BCD4",
-  "#4CAF50",
-  "#8BC34A",
-  "#CDDC39",
-  "#FFE500",
-  "#FFBF00",
-  "#FF9800",
-  "#795548",
-  "#9E9E9E",
-  "#5A5A5A",
-  "#FFF"
-];
-xt = [x({ tagName: "color-picker" })];
-class O extends (_t = y) {
-  constructor(t = {}) {
+function Qr(t, e) {
+  const r = sessionStorage.getItem(`${fe}-${e}`);
+  return r ? JSON.parse(r) : t;
+}
+const Zr = "ce-inline-toolbar__dropdown", Vr = "ce-conversion-toolbar--showed", Jt = '.color-section{display:inline-block;position:relative}.color-popover{display:inline-block;position:relative;overflow:visible}.color-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;background:var(--theme-color, #000);color:transparent;cursor:pointer;transition:all .2s ease;box-sizing:border-box}.color-btn:hover:not(.disabled){border-color:#3f51b5;box-shadow:0 2px 8px #3f51b54d}.color-btn.disabled{opacity:.5;cursor:not-allowed}.color-indicator{font-size:12px;line-height:1;-webkit-user-select:none;user-select:none}.color-panel{position:absolute;top:100%;left:0;z-index:10000;background:#fff;border:1px solid #e1e5e9;border-radius:6px;box-shadow:0 4px 20px #00000026;padding:8px;margin-top:4px;box-sizing:border-box;transform-origin:top left;animation:colorPanelShow .2s ease-out}@keyframes colorPanelShow{0%{opacity:0;transform:scale(.9) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;min-width:160px}.color-cube{width:20px;height:20px;border:1px solid #e1e5e9;border-radius:3px;cursor:pointer;transition:all .2s ease;box-sizing:border-box;background-color:var(--cube-color, #000)}.color-cube:hover{border-color:#3f51b5;transform:scale(1.1);box-shadow:0 2px 8px #3f51b566;z-index:1}.color-cube:active{transform:scale(.95)}.color-cube.custom-picker{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00 42%,#0f0 57%,#00ff80,#0ff 85%,#0080ff);position:relative}.color-cube.custom-picker:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.8);pointer-events:none}:host([disabled]) .color-btn{opacity:.5;cursor:not-allowed}:host([open]) .color-panel{display:block}:host(:not([open])) .color-panel{display:none}@media (max-width: 768px){.color-panel{position:fixed;top:auto;left:50%;bottom:10px;transform:translate(-50%);width:90vw;max-width:300px}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px}.color-cube{width:24px;height:24px}}@media (prefers-color-scheme: dark){.color-panel{background:#2d2d2d;border-color:#404040;color:#fff}.color-btn,.color-cube{border-color:#404040}}';
+var Me;
+let Ue, He;
+function Y(t, e, r) {
+  return (e = Fe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function 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 _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ce(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ce(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Xt(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Fe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function Fe(t) {
+  var e = Gt(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Gt(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Ce(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 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 Yt;
+class Qt extends X {
+  static get observedAttributes() {
+    return ["disabled", "selected-color", "open"];
+  }
+  constructor(e = {}) {
     super({
-      styles: ve,
       styleName: "base-color-picker",
-      ...t
-    }), f(this, "colorCollections"), f(this, "onColorPicked"), f(this, "hasCustomPicker"), f(this, "defaultColor"), f(this, "pluginType"), f(this, "disabled"), f(this, "selectedColor"), f(this, "customColor"), f(this, "isOpen"), f(this, "colorBtn"), f(this, "colorPanel"), f(this, "handleButtonClick", (o) => {
-      o.stopPropagation(), this.togglePanel();
-    }), f(this, "handlePanelClick", (o) => {
-      o.stopPropagation();
-    }), f(this, "handleColorSelect", (o) => {
-      var r;
-      const s = w(o);
-      this.setSelectedColor(s), this.closePanel(), ke(s, this.pluginType), (r = this.onColorPicked) == null || r.call(this, s), this.dispatchEvent(
-        new CustomEvent("colorchange", {
-          detail: { color: s },
-          bubbles: !0,
-          composed: !0
-        })
-      ), k.debug("Color selected", { color: s });
-    }), f(this, "handleCustomPickerClick", () => {
-      const o = document.createElement("input");
-      o.type = "color", o.value = this.customColor, o.style.cssText = `
+      ...e
+    }), Y(this, "_autoStyles", Jt), Y(this, "colorCollections", void 0), Y(this, "onColorPicked", void 0), Y(this, "hasCustomPicker", void 0), Y(this, "defaultColor", void 0), Y(this, "pluginType", void 0), Y(this, "disabled", void 0), Y(this, "selectedColor", void 0), Y(this, "customColor", void 0), Y(this, "isOpen", void 0), Y(this, "colorBtn", void 0), Y(this, "colorPanel", void 0), Y(this, "handleButtonClick", (r) => {
+      r.stopPropagation(), this.togglePanel();
+    }), Y(this, "handlePanelClick", (r) => {
+      r.stopPropagation();
+    }), Y(this, "handleColorSelect", (r) => {
+      var S;
+      const g = ue(r);
+      this.setSelectedColor(g), this.closePanel(), Ut(g, this.pluginType), (S = this.onColorPicked) == null || S.call(this, g), this.dispatchEvent(new CustomEvent("colorchange", {
+        detail: {
+          color: g
+        },
+        bubbles: !0,
+        composed: !0
+      })), ce.debug("Color selected", {
+        color: g
+      });
+    }), Y(this, "handleCustomPickerClick", () => {
+      const r = document.createElement("input");
+      r.type = "color", r.value = this.customColor, r.style.cssText = `
             position: fixed;
             left: -9999px;
             opacity: 0;
             pointer-events: none;
         `;
-      const s = $e((r) => {
-        var h;
-        const n = r.target, a = w(n.value);
-        this.setSelectedColor(a), this.setCustomColor(a), document.body.removeChild(o), (h = this.onColorPicked) == null || h.call(this, a), this.dispatchEvent(
-          new CustomEvent("colorchange", {
-            detail: { color: a },
-            bubbles: !0,
-            composed: !0
-          })
-        ), k.debug("Custom color selected", { color: a });
+      const g = Kt((S) => {
+        var B;
+        const A = S.target, T = ue(A.value);
+        this.setSelectedColor(T), this.setCustomColor(T), document.body.removeChild(r), (B = this.onColorPicked) == null || B.call(this, T), this.dispatchEvent(new CustomEvent("colorchange", {
+          detail: {
+            color: T
+          },
+          bubbles: !0,
+          composed: !0
+        })), ce.debug("Custom color selected", {
+          color: T
+        });
       }, 30);
-      o.addEventListener("input", s), document.body.appendChild(o), requestAnimationFrame(() => {
-        o.focus(), o.click();
+      r.addEventListener("input", g), document.body.appendChild(r), requestAnimationFrame(() => {
+        r.focus(), r.click();
       });
-    }), f(this, "handleDocumentClick", (o) => {
-      this.isOpen && !this.contains(o.target) && this.closePanel();
-    }), this.colorCollections = t.colorCollections || Fe, this.onColorPicked = t.onColorPicked, this.hasCustomPicker = t.hasCustomPicker || !1, this.pluginType = t.pluginType || "text", this.disabled = t.disabled || !1, this.defaultColor = w(t.defaultColor || this.colorCollections[0]), this.selectedColor = this.defaultColor, this.customColor = we(this.pluginType) || "", this.isOpen = !1, k.debug("ColorPicker initialized", {
+    }), Y(this, "handleDocumentClick", (r) => {
+      this.isOpen && !this.contains(r.target) && this.closePanel();
+    }), 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
     });
   }
-  static get observedAttributes() {
-    return ["disabled", "selected-color", "open"];
-  }
   /**
    * 实现抽象方法：真正的JSX渲染！🎉
    */
   render() {
-    const t = this.renderColorButton(), o = this.isOpen ? this.renderColorPanel() : null;
-    return /* @__PURE__ */ i("section", { class: "color-section" }, /* @__PURE__ */ i("div", { class: "color-popover" }, t, o));
+    const e = this.renderColorButton(), r = this.isOpen ? this.renderColorPanel() : null;
+    return /* @__PURE__ */ n("section", { class: "color-section" }, /* @__PURE__ */ n("div", { class: "color-popover" }, e, r));
   }
   /**
    * 渲染颜色按钮 - 真正的JSX！
    */
   renderColorButton() {
-    return /* @__PURE__ */ i(
-      "xy-button",
-      {
-        type: "button",
-        class: `color-btn ${this.disabled ? "disabled" : ""}`,
-        style: `--theme-color: ${this.selectedColor}`,
-        disabled: this.disabled,
-        onClick: this.handleButtonClick,
-        ref: (t) => {
-          this.colorBtn = t;
-        }
-      },
-      /* @__PURE__ */ i("span", { class: "color-indicator" }, "_")
-    );
+    return /* @__PURE__ */ n("xy-button", { type: "button", class: `color-btn ${this.disabled ? "disabled" : ""}`, style: `--theme-color: ${this.selectedColor}`, disabled: this.disabled, onClick: this.handleButtonClick, ref: (e) => {
+      this.colorBtn = e;
+    } }, /* @__PURE__ */ n("span", { class: "color-indicator" }, "_"));
   }
   /**
    * 渲染颜色面板 - 真正的JSX！
    */
   renderColorPanel() {
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        class: "color-panel",
-        onClick: this.handlePanelClick,
-        ref: (t) => {
-          this.colorPanel = t;
-        }
-      },
-      /* @__PURE__ */ i("div", { class: "color-grid" }, this.hasCustomPicker ? this.renderCustomPicker() : null, this.renderColorButtons())
-    );
+    return /* @__PURE__ */ n("div", { class: "color-panel", onClick: this.handlePanelClick, ref: (e) => {
+      this.colorPanel = e;
+    } }, /* @__PURE__ */ n("div", { class: "color-grid" }, this.hasCustomPicker ? this.renderCustomPicker() : null, this.renderColorButtons()));
   }
   /**
    * 渲染自定义颜色选择器 - 真正的JSX！
    */
   renderCustomPicker() {
-    return /* @__PURE__ */ i(
-      "xy-button",
-      {
-        type: "button",
-        class: "color-cube custom-picker",
-        style: { backgroundColor: this.customColor },
-        onClick: this.handleCustomPickerClick,
-        title: "自定义颜色"
-      }
-    );
+    return /* @__PURE__ */ n("xy-button", { type: "button", class: "color-cube custom-picker", style: {
+      backgroundColor: this.customColor
+    }, onClick: this.handleCustomPickerClick, title: "自定义颜色" });
   }
   /**
    * 渲染颜色按钮组 - 真正的JSX！
    */
   renderColorButtons() {
-    return this.colorCollections.map((t) => /* @__PURE__ */ i(
-      "xy-button",
-      {
-        key: t,
-        type: "button",
-        class: "color-cube",
-        style: `background-color: ${t}`,
-        "data-color": t,
-        title: t,
-        onClick: () => this.handleColorSelect(t)
-      }
-    ));
+    return this.colorCollections.map((e) => /* @__PURE__ */ n("xy-button", { key: e, type: "button", class: "color-cube", style: `background-color: ${e}`, "data-color": e, title: e, onClick: () => this.handleColorSelect(e) }));
   }
   /**
    * 切换面板显示状态
@@ -508,20 +734,20 @@ class O extends (_t = y) {
   /**
    * 设置选中的颜色
    */
-  setSelectedColor(t) {
-    this.selectedColor = t, this.setAttr("selected-color", t), this.updateColorButton();
+  setSelectedColor(e) {
+    this.selectedColor = e, this.setAttr("selected-color", e), this.updateColorButton();
   }
   /**
    * 设置自定义颜色
    */
-  setCustomColor(t) {
-    this.customColor = t, Ce(t, this.pluginType);
+  setCustomColor(e) {
+    this.customColor = e, Ht(e, this.pluginType);
   }
   /**
    * 设置面板开关状态
    */
-  setOpen(t) {
-    this.isOpen = t, t ? this.setAttr("open", "") : this.removeAttr("open"), this.rerender();
+  setOpen(e) {
+    this.isOpen = e, e ? this.setAttr("open", "") : this.removeAttr("open"), this.rerender();
   }
   /**
    * 更新颜色按钮样式
@@ -533,27 +759,27 @@ class O extends (_t = y) {
    * 组件连接到DOM后的初始化
    */
   onConnected() {
-    document.addEventListener("click", this.handleDocumentClick), k.info("ColorPicker connected to DOM");
+    document.addEventListener("click", this.handleDocumentClick), ce.info("ColorPicker connected to DOM");
   }
   /**
    * 组件从DOM断开时的清理
    */
   onDisconnected() {
-    document.removeEventListener("click", this.handleDocumentClick), k.info("ColorPicker disconnected from DOM");
+    document.removeEventListener("click", this.handleDocumentClick), ce.info("ColorPicker disconnected from DOM");
   }
   /**
    * 属性变化处理
    */
-  onAttributeChanged(t, o, s) {
-    switch (t) {
+  onAttributeChanged(e, r, g) {
+    switch (e) {
       case "disabled":
-        this.disabled = s !== null, this.rerender();
+        this.disabled = g !== null, this.rerender();
         break;
       case "selected-color":
-        s && s !== this.selectedColor && (this.selectedColor = s, this.updateColorButton());
+        g && g !== this.selectedColor && (this.selectedColor = g, this.updateColorButton());
         break;
       case "open":
-        this.isOpen = s !== null;
+        this.isOpen = g !== null;
         break;
     }
   }
@@ -566,195 +792,374 @@ class O extends (_t = y) {
   /**
    * 公共API：设置颜色
    */
-  setColor(t) {
-    this.setSelectedColor(w(t));
+  setColor(e) {
+    this.setSelectedColor(ue(e));
   }
   /**
    * 公共API：聚焦组件
    */
   focus() {
-    var t;
-    (t = this.colorBtn) == null || t.focus();
-  }
-}
-G = Ee(_t);
-O = Ie(G, 0, "ColorPicker", xt, O);
-Oe(G, 1, O);
-const Be = ".reactive-counter{max-width:500px;margin:20px auto;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s ease}.theme-light{background:#fff;color:#333;border:1px solid #e1e5e9}.theme-dark{background:#1a1a1a;color:#fff;border:1px solid #333333}.theme-blue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #5a67d8}.header{text-align:center;margin-bottom:24px}.header h3{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{margin:0;opacity:.8;font-size:14px}.counter-display{text-align:center;margin-bottom:32px}.count-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}.step-info{font-size:14px;opacity:.7}.controls{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background:#3182ce;transform:translateY(-1px)}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568;transform:translateY(-1px)}.btn-warning{background:#ed8936;color:#fff}.btn-warning:hover:not(:disabled){background:#dd6b20;transform:translateY(-1px)}.btn-success{background:#48bb78;color:#fff}.btn-success:hover:not(:disabled){background:#38a169;transform:translateY(-1px)}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover:not(:disabled){background:#e53e3e;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:14px;min-width:auto}.step-controls,.auto-controls,.theme-controls,.message-controls{margin-bottom:20px;text-align:center}.step-controls label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}.step-controls input[type=range]{flex:0 0 150px}.step-controls span{font-weight:700;min-width:20px}.theme-controls select,.message-controls input{padding:8px 12px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px;margin-left:8px}.theme-dark .theme-controls select,.theme-dark .message-controls input{background:#2d3748;border-color:#4a5568;color:#fff}.theme-blue .theme-controls select,.theme-blue .message-controls input{background:#ffffff1a;border-color:#fff3;color:#fff}.message-controls input{width:250px;max-width:100%}.history{margin-top:24px;padding:16px;background:#0000000d;border-radius:8px}.theme-dark .history{background:#ffffff0d}.theme-blue .history{background:#ffffff1a}.history h4{margin:0 0 12px;font-size:16px}.history-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.history-item{padding:4px 8px;background:#4299e11a;border:1px solid rgba(66,153,225,.2);border-radius:4px;font-size:12px;font-weight:500}.debug-info{margin-top:24px;font-size:12px}.debug-info details{border:1px solid #e2e8f0;border-radius:6px;padding:8px}.theme-dark .debug-info details{border-color:#4a5568}.theme-blue .debug-info details{border-color:#fff3}.debug-info summary{cursor:pointer;font-weight:500;margin-bottom:8px}.debug-info pre{margin:0;padding:8px;background:#0000000d;border-radius:4px;overflow-x:auto;font-size:11px;line-height:1.4}.theme-dark .debug-info pre{background:#ffffff0d}.theme-blue .debug-info pre{background:#ffffff1a}@media (max-width: 600px){.reactive-counter{margin:10px;padding:16px}.count-value{font-size:36px}.controls{flex-direction:column;align-items:center}.btn{width:200px}.step-controls label{flex-direction:column;gap:8px}.message-controls input{width:100%}}";
-var Me = Object.create, Y = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, yt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), kt = (e) => {
-  throw TypeError(e);
-}, Ct = (e, t, o) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Le = (e, t) => Y(e, "name", { value: t, configurable: !0 }), Ne = (e) => [, , , Me((e == null ? void 0 : e[yt("metadata")]) ?? null)], He = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], wt = (e) => e !== void 0 && typeof e != "function" ? kt("Function expected") : e, je = (e, t, o, s, r) => ({ kind: He[e], name: t, metadata: s, addInitializer: (n) => o._ ? kt("Already initialized") : r.push(wt(n || null)) }), We = (e, t) => Ct(t, yt("metadata"), e[3]), Ge = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Ye = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Re(r, o));
-  Le(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = je(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, wt(a) && (r = a);
-  return We(e, r), c && Y(r, o, c), p ? l ^ 4 ? n : c : r;
-}, v = (e, t, o) => Ct(e, typeof t != "symbol" ? t + "" : t, o), $t, X, St;
-const z = C("ReactiveCounter");
-$t = [x({ tagName: "reactive-counter" })];
-class I extends (St = ot) {
+    var e;
+    (e = this.colorBtn) == null || e.focus();
+  }
+}
+Me = Qt;
+[Yt, Ue] = Wt(Me, [], He, 0, void 0, X).c;
+Ue();
+const Zt = ".reactive-counter{max-width:500px;margin:20px auto;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s ease}.theme-light{background:#fff;color:#333;border:1px solid #e1e5e9}.theme-dark{background:#1a1a1a;color:#fff;border:1px solid #333333}.theme-blue{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:1px solid #5a67d8}.header{text-align:center;margin-bottom:24px}.header h3{margin:0 0 8px;font-size:24px;font-weight:600}.subtitle{margin:0;opacity:.8;font-size:14px}.counter-display{text-align:center;margin-bottom:32px}.count-value{font-size:48px;font-weight:700;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}.step-info{font-size:14px;opacity:.7}.controls{display:flex;gap:12px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:60px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4299e1;color:#fff}.btn-primary:hover:not(:disabled){background:#3182ce;transform:translateY(-1px)}.btn-secondary{background:#718096;color:#fff}.btn-secondary:hover:not(:disabled){background:#4a5568;transform:translateY(-1px)}.btn-warning{background:#ed8936;color:#fff}.btn-warning:hover:not(:disabled){background:#dd6b20;transform:translateY(-1px)}.btn-success{background:#48bb78;color:#fff}.btn-success:hover:not(:disabled){background:#38a169;transform:translateY(-1px)}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover:not(:disabled){background:#e53e3e;transform:translateY(-1px)}.btn-sm{padding:6px 12px;font-size:14px;min-width:auto}.step-controls,.auto-controls,.theme-controls,.message-controls{margin-bottom:20px;text-align:center}.step-controls label{display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px}.step-controls input[type=range]{flex:0 0 150px}.step-controls span{font-weight:700;min-width:20px}.theme-controls select,.message-controls input{padding:8px 12px;border:1px solid #cbd5e0;border-radius:6px;font-size:14px;margin-left:8px}.theme-dark .theme-controls select,.theme-dark .message-controls input{background:#2d3748;border-color:#4a5568;color:#fff}.theme-blue .theme-controls select,.theme-blue .message-controls input{background:#ffffff1a;border-color:#fff3;color:#fff}.message-controls input{width:250px;max-width:100%}.history{margin-top:24px;padding:16px;background:#0000000d;border-radius:8px}.theme-dark .history{background:#ffffff0d}.theme-blue .history{background:#ffffff1a}.history h4{margin:0 0 12px;font-size:16px}.history-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.history-item{padding:4px 8px;background:#4299e11a;border:1px solid rgba(66,153,225,.2);border-radius:4px;font-size:12px;font-weight:500}.debug-info{margin-top:24px;font-size:12px}.debug-info details{border:1px solid #e2e8f0;border-radius:6px;padding:8px}.theme-dark .debug-info details{border-color:#4a5568}.theme-blue .debug-info details{border-color:#fff3}.debug-info summary{cursor:pointer;font-weight:500;margin-bottom:8px}.debug-info pre{margin:0;padding:8px;background:#0000000d;border-radius:4px;overflow-x:auto;font-size:11px;line-height:1.4}.theme-dark .debug-info pre{background:#ffffff0d}.theme-blue .debug-info pre{background:#ffffff1a}@media (max-width: 600px){.reactive-counter{margin:10px;padding:16px}.count-value{font-size:36px}.controls{flex-direction:column;align-items:center}.btn{width:200px}.step-controls label{flex-direction:column;gap:8px}.message-controls input{width:100%}}";
+var Ke;
+let Je, We;
+function V(t, e, r) {
+  return (e = Ge(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Vt(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: we(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || we(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return tr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Ge(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function Ge(t) {
+  var e = er(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function er(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function we(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 pe = ne("ReactiveCounter");
+We = [re({
+  tagName: "reactive-counter"
+})];
+let rr;
+class or extends X {
   constructor() {
-    super({
-      styles: Be,
-      debug: !0
-      // 启用调试模式
-    }), v(this, "state", this.reactive({
-      count: 0,
-      step: 1,
-      message: "Hello WSX Reactive!",
-      isRunning: !1
-    })), v(this, "themeState", this.useState("theme", "light")), v(this, "historyState", this.useState("history", [])), v(this, "getTheme", this.themeState[0]), v(this, "setTheme", this.themeState[1]), v(this, "getHistory", this.historyState[0]), v(this, "setHistory", this.historyState[1]), v(this, "increment", () => {
+    super(), 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);
-    }), v(this, "decrement", () => {
+    }), V(this, "decrement", () => {
       this.state.count -= this.state.step, this.addToHistory(this.state.count);
-    }), v(this, "reset", () => {
+    }), V(this, "reset", () => {
       this.state.count = 0, this.addToHistory(0);
-    }), v(this, "handleStepChange", (t) => {
-      const o = t.target;
-      this.state.step = parseInt(o.value);
-    }), v(this, "handleThemeChange", (t) => {
-      const o = t.target;
-      this.setTheme(o.value);
-    }), v(this, "handleMessageChange", (t) => {
-      const o = t.target;
-      this.state.message = o.value;
-    }), v(this, "toggleAutoIncrement", () => {
+    }), 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();
-    }), v(this, "clearHistory", () => {
-      this.setHistory([]);
-    }), z.info("ReactiveCounter initialized");
-  }
-  render() {
-    const t = this.getTheme(), o = this.getHistory();
-    return /* @__PURE__ */ i("div", { class: `reactive-counter theme-${t}` }, /* @__PURE__ */ i("div", { class: "header" }, /* @__PURE__ */ i("h3", null, "🔄 Reactive Counter"), /* @__PURE__ */ i("p", { class: "subtitle" }, this.state.message)), /* @__PURE__ */ i("div", { class: "counter-display" }, /* @__PURE__ */ i("div", { class: "count-value" }, this.state.count), /* @__PURE__ */ i("div", { class: "step-info" }, "Step: ", this.state.step)), /* @__PURE__ */ i("div", { class: "controls" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-primary",
-        onClick: this.increment,
-        disabled: this.state.isRunning
-      },
-      "+",
-      this.state.step
-    ), /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-secondary",
-        onClick: this.decrement,
-        disabled: this.state.isRunning
-      },
-      "-",
-      this.state.step
-    ), /* @__PURE__ */ i(
-      "button",
-      {
-        class: "btn btn-warning",
-        onClick: this.reset,
-        disabled: this.state.isRunning
-      },
-      "Reset"
-    )), /* @__PURE__ */ i("div", { class: "step-controls" }, /* @__PURE__ */ i("label", null, "Step Size:", /* @__PURE__ */ i(
-      "input",
-      {
-        type: "range",
-        min: "1",
-        max: "10",
-        value: this.state.step,
-        onInput: this.handleStepChange
-      }
-    ), /* @__PURE__ */ i("span", null, this.state.step))), /* @__PURE__ */ i("div", { class: "auto-controls" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: `btn ${this.state.isRunning ? "btn-danger" : "btn-success"}`,
-        onClick: this.toggleAutoIncrement
+    }), V(this, "clearHistory", () => {
+      this.history = [];
+    }), 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();
       },
-      this.state.isRunning ? "Stop" : "Start",
-      " Auto Increment"
-    )), /* @__PURE__ */ i("div", { class: "theme-controls" }, /* @__PURE__ */ i("label", null, "Theme:", /* @__PURE__ */ i("select", { value: t, onChange: this.handleThemeChange }, /* @__PURE__ */ i("option", { value: "light" }, "Light"), /* @__PURE__ */ i("option", { value: "dark" }, "Dark"), /* @__PURE__ */ i("option", { value: "blue" }, "Blue")))), /* @__PURE__ */ i("div", { class: "message-controls" }, /* @__PURE__ */ i(
-      "input",
-      {
-        type: "text",
-        value: this.state.message,
-        onInput: this.handleMessageChange,
-        placeholder: "Enter a message..."
-      }
-    )), o.length > 0 && /* @__PURE__ */ i("div", { class: "history" }, /* @__PURE__ */ i("h4", null, "History (last 10):"), /* @__PURE__ */ i("div", { class: "history-list" }, o.slice(-10).map((s, r) => /* @__PURE__ */ i("span", { key: r, class: "history-item" }, s))), /* @__PURE__ */ i("button", { class: "btn btn-sm", onClick: this.clearHistory }, "Clear History")), /* @__PURE__ */ i("div", { class: "debug-info" }, /* @__PURE__ */ i("details", null, /* @__PURE__ */ i("summary", null, "Debug Info"), /* @__PURE__ */ i("pre", null, JSON.stringify(
-      {
-        state: this.state,
-        theme: this.getTheme(),
-        historyLength: this.getHistory().length,
-        stateSnapshot: this.getStateSnapshot()
+      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();
       },
-      null,
-      2
-    )))));
+      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({
+      state: this.state,
+      theme: this.theme,
+      historyLength: this.history.length
+    }, null, 2)))));
   }
   startAutoIncrement() {
-    const t = setInterval(() => {
+    const e = setInterval(() => {
       if (!this.state.isRunning) {
-        clearInterval(t);
+        clearInterval(e);
         return;
       }
       this.increment(), this.state.count % 5 === 0 && (this.state.message = `Count reached ${this.state.count}!`);
     }, 200);
   }
-  addToHistory(t) {
-    const o = this.getHistory();
-    this.setHistory([...o, t]);
+  addToHistory(e) {
+    this.history = [...this.history, e];
   }
   onConnected() {
-    z.info("ReactiveCounter connected to DOM"), setTimeout(() => {
+    pe.info("ReactiveCounter connected to DOM"), setTimeout(() => {
       this.state.message = "Ready to count! 🚀";
     }, 500);
   }
   onDisconnected() {
-    z.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
-  }
-}
-X = Ne(St);
-I = Ye(X, 0, "ReactiveCounter", $t, I);
-Ge(X, 1, I);
-const Xe = ":host{display:block}.theme-switcher-container{position:relative;display:flex;align-items:center}.theme-switcher-btn{width:var(--theme-switcher-width, 2.5rem);height:var(--theme-switcher-height, 2.5rem);padding:var(--theme-switcher-padding, .5rem);border-radius:var(--theme-switcher-border-radius, 8px);background:var(--theme-switcher-bg, #dc2626);border:var(--theme-switcher-border, none);color:var(--theme-switcher-color, white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--theme-switcher-transition, .3s ease);box-shadow:var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, .4));font-weight:var(--theme-switcher-font-weight, 600);font-family:var(--theme-switcher-font-family, inherit)}.theme-switcher-btn:hover{background:var(--theme-switcher-hover-bg, #b91c1c);transform:var(--theme-switcher-hover-transform, translateY(-2px));box-shadow:var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, .5))}.theme-switcher-btn:active{transform:var(--theme-switcher-active-transform, translateY(0))}.theme-switcher-icon{font-size:var(--theme-switcher-icon-size, 1rem);line-height:1;transition:transform var(--theme-switcher-icon-transition, .3s ease)}.theme-switcher-btn:hover .theme-switcher-icon{transform:var(--theme-switcher-icon-hover-transform, rotate(360deg))}.theme-switcher-btn[data-theme=light]{background:var(--theme-switcher-light-bg, #dc2626);color:var(--theme-switcher-light-color, white)}.theme-switcher-btn[data-theme=light]:hover{background:var(--theme-switcher-light-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=dark]{background:var(--theme-switcher-dark-bg, #dc2626);color:var(--theme-switcher-dark-color, white)}.theme-switcher-btn[data-theme=dark]:hover{background:var(--theme-switcher-dark-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=auto]{background:var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));color:var(--theme-switcher-auto-color, white)}.theme-switcher-btn[data-theme=auto]:hover{background:var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b))}@media (max-width: 768px){.theme-switcher-btn{width:var(--theme-switcher-mobile-width, 2rem);height:var(--theme-switcher-mobile-height, 2rem)}.theme-switcher-icon{font-size:var(--theme-switcher-mobile-icon-size, .9rem)}}";
-var qe = Object.create, q = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, zt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), At = (e) => {
-  throw TypeError(e);
-}, Et = (e, t, o) => t in e ? q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Ke = (e, t) => q(e, "name", { value: t, configurable: !0 }), Ue = (e) => [, , , qe((e == null ? void 0 : e[zt("metadata")]) ?? null)], Qe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Pt = (e) => e !== void 0 && typeof e != "function" ? At("Function expected") : e, Ve = (e, t, o, s, r) => ({ kind: Qe[e], name: t, metadata: s, addInitializer: (n) => o._ ? At("Already initialized") : r.push(Pt(n || null)) }), Ze = (e, t) => Et(t, zt("metadata"), e[3]), to = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, eo = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && Je(r, o));
-  Ke(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = Ve(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Pt(a) && (r = a);
-  return Ze(e, r), c && q(r, o, c), p ? l ^ 4 ? n : c : r;
-}, et = (e, t, o) => Et(e, typeof t != "symbol" ? t + "" : t, o), Dt, J, Tt;
-Dt = [x({ tagName: "theme-switcher" })];
-class F extends (Tt = y) {
+    pe.info("ReactiveCounter disconnected from DOM"), this.state.isRunning = !1;
+  }
+}
+Ke = or;
+[rr, Je] = Vt(Ke, [], We, 0, void 0, X).c;
+Je();
+const ir = ":host{display:block}.theme-switcher-container{position:relative;display:flex;align-items:center}.theme-switcher-btn{width:var(--theme-switcher-width, 2.5rem);height:var(--theme-switcher-height, 2.5rem);padding:var(--theme-switcher-padding, .5rem);border-radius:var(--theme-switcher-border-radius, 8px);background:var(--theme-switcher-bg, #dc2626);border:var(--theme-switcher-border, none);color:var(--theme-switcher-color, white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--theme-switcher-transition, .3s ease);box-shadow:var(--theme-switcher-shadow, 0 4px 15px rgba(220, 38, 38, .4));font-weight:var(--theme-switcher-font-weight, 600);font-family:var(--theme-switcher-font-family, inherit)}.theme-switcher-btn:hover{background:var(--theme-switcher-hover-bg, #b91c1c);transform:var(--theme-switcher-hover-transform, translateY(-2px));box-shadow:var(--theme-switcher-hover-shadow, 0 8px 25px rgba(220, 38, 38, .5))}.theme-switcher-btn:active{transform:var(--theme-switcher-active-transform, translateY(0))}.theme-switcher-icon{font-size:var(--theme-switcher-icon-size, 1rem);line-height:1;transition:transform var(--theme-switcher-icon-transition, .3s ease)}.theme-switcher-btn:hover .theme-switcher-icon{transform:var(--theme-switcher-icon-hover-transform, rotate(360deg))}.theme-switcher-btn[data-theme=light]{background:var(--theme-switcher-light-bg, #dc2626);color:var(--theme-switcher-light-color, white)}.theme-switcher-btn[data-theme=light]:hover{background:var(--theme-switcher-light-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=dark]{background:var(--theme-switcher-dark-bg, #dc2626);color:var(--theme-switcher-dark-color, white)}.theme-switcher-btn[data-theme=dark]:hover{background:var(--theme-switcher-dark-hover-bg, #b91c1c)}.theme-switcher-btn[data-theme=auto]{background:var(--theme-switcher-auto-bg, linear-gradient(135deg, #dc2626, #b91c1c));color:var(--theme-switcher-auto-color, white)}.theme-switcher-btn[data-theme=auto]:hover{background:var(--theme-switcher-auto-hover-bg, linear-gradient(135deg, #b91c1c, #991b1b))}@media (max-width: 768px){.theme-switcher-btn{width:var(--theme-switcher-mobile-width, 2rem);height:var(--theme-switcher-mobile-height, 2rem)}.theme-switcher-icon{font-size:var(--theme-switcher-mobile-icon-size, .9rem)}}";
+var Xe;
+let qe, Ye;
+function me(t, e, r) {
+  return (e = Qe(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function nr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Te(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Te(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return ar(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : Qe(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function Qe(t) {
+  var e = sr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function sr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Te(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function ar(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+Ye = [re({
+  tagName: "theme-switcher"
+})];
+let lr;
+class cr extends X {
   constructor() {
     super({
-      styles: Xe,
       styleName: "theme-switcher"
-    }), et(this, "currentTheme", "auto"), et(this, "toggleTheme", () => {
-      const t = ["auto", "light", "dark"], s = (t.indexOf(this.currentTheme) + 1) % t.length;
-      this.setTheme(t[s]);
+    }), me(this, "_autoStyles", ir), me(this, "currentTheme", "auto"), me(this, "toggleTheme", () => {
+      const e = ["auto", "light", "dark"], g = (e.indexOf(this.currentTheme) + 1) % e.length;
+      this.setTheme(e[g]);
     }), this.initTheme();
   }
   render() {
-    return /* @__PURE__ */ i("div", { class: "theme-switcher-container" }, /* @__PURE__ */ i(
-      "button",
-      {
-        class: "theme-switcher-btn",
-        "data-theme": this.currentTheme,
-        onClick: this.toggleTheme,
-        title: `当前主题: ${this.getThemeLabel()}`
-      },
-      /* @__PURE__ */ i("span", { class: "theme-switcher-icon" }, this.getThemeIcon())
-    ));
+    return /* @__PURE__ */ n("div", { class: "theme-switcher-container" }, /* @__PURE__ */ n("button", { class: "theme-switcher-btn", "data-theme": this.currentTheme, onClick: this.toggleTheme, title: `当前主题: ${this.getThemeLabel()}`, "data-wsx-key": "ThemeSwitcher-button-text-1" }, /* @__PURE__ */ n("span", { class: "theme-switcher-icon" }, this.getThemeIcon())));
   }
   getThemeIcon() {
-    const o = document.documentElement.classList.contains("dark");
-    return this.currentTheme === "auto" ? o ? "🌙" : "☀️" : this.currentTheme === "light" ? "☀️" : "🌙";
+    const r = document.documentElement.classList.contains("dark");
+    return this.currentTheme === "auto" ? r ? "🌙" : "☀️" : this.currentTheme === "light" ? "☀️" : "🌙";
   }
   getThemeLabel() {
     return {
@@ -763,61 +1168,174 @@ class F extends (Tt = y) {
       auto: "自动"
     }[this.currentTheme];
   }
-  setTheme(t) {
-    this.currentTheme = t;
-    const o = document.documentElement;
-    t === "auto" ? (o.removeAttribute("class"), this.checkSystemTheme()) : o.className = t, localStorage.setItem("wsx-theme", t), this.rerender();
+  setTheme(e) {
+    this.currentTheme = e;
+    const r = document.documentElement;
+    e === "auto" ? (r.removeAttribute("class"), this.checkSystemTheme()) : r.className = e, localStorage.setItem("wsx-theme", e), this.rerender();
   }
   checkSystemTheme() {
-    const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.className = t ? "dark" : "";
+    const e = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.className = e ? "dark" : "";
   }
   initTheme() {
-    const t = localStorage.getItem("wsx-theme") || "auto";
-    this.setTheme(t), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (o) => {
-      this.currentTheme === "auto" && (document.documentElement.className = o.matches ? "dark" : "");
+    const e = localStorage.getItem("wsx-theme") || "auto";
+    this.setTheme(e), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (r) => {
+      this.currentTheme === "auto" && (document.documentElement.className = r.matches ? "dark" : "");
     });
   }
 }
-J = Ue(Tt);
-F = eo(J, 0, "ThemeSwitcher", Dt, F);
-to(J, 1, F);
-var oo = Object.create, K = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, Ot = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), It = (e) => {
-  throw TypeError(e);
-}, Ft = (e, t, o) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, io = (e, t) => K(e, "name", { value: t, configurable: !0 }), so = (e) => [, , , oo((e == null ? void 0 : e[Ot("metadata")]) ?? null)], no = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Bt = (e) => e !== void 0 && typeof e != "function" ? It("Function expected") : e, ao = (e, t, o, s, r) => ({ kind: no[e], name: t, metadata: s, addInitializer: (n) => o._ ? It("Already initialized") : r.push(Bt(n || null)) }), lo = (e, t) => Ft(t, Ot("metadata"), e[3]), co = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, ho = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ro(r, o));
-  io(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = ao(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Bt(a) && (r = a);
-  return lo(e, r), c && K(r, o, c), p ? l ^ 4 ? n : c : r;
-}, A = (e, t, o) => Ft(e, typeof t != "symbol" ? t + "" : t, o), Mt, U, Rt;
-const E = C("SvgIcon");
-Mt = [x({ tagName: "svg-icon" })];
-class B extends (Rt = y) {
+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 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 _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Se(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Se(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return hr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : tt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function tt(t) {
+  var e = dr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function dr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Se(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 be = ne("SvgIcon");
+et = [re({
+  tagName: "svg-icon"
+})];
+let fr;
+class pr extends X {
   constructor() {
-    super(), A(this, "handleClick", (t) => {
-      E.debug("SVG icon clicked", { name: this.getAttribute("name") }), this.dispatchEvent(
-        new CustomEvent("icon-click", {
-          detail: {
-            name: this.getAttribute("name"),
-            originalEvent: t
-          },
-          bubbles: !0
-        })
-      );
-    }), A(this, "handleMouseEnter", (t) => {
-      const o = t.target;
-      o.style.transform = "scale(1.1)";
-    }), A(this, "handleMouseLeave", (t) => {
-      const o = t.target;
-      o.style.transform = "scale(1)";
-    }), E.info("SvgIcon component initialized");
+    super(), ge(this, "handleClick", (e) => {
+      be.debug("SVG icon clicked", {
+        name: this.getAttribute("name")
+      }), this.dispatchEvent(new CustomEvent("icon-click", {
+        detail: {
+          name: this.getAttribute("name"),
+          originalEvent: e
+        },
+        bubbles: !0
+      }));
+    }), ge(this, "handleMouseEnter", (e) => {
+      const r = e.target;
+      r.style.transform = "scale(1.1)";
+    }), ge(this, "handleMouseLeave", (e) => {
+      const r = e.target;
+      r.style.transform = "scale(1)";
+    }), be.info("SvgIcon component initialized");
   }
   render() {
-    const t = this.getAttribute("size") || "24", o = this.getAttribute("color") || "currentColor", s = 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",
@@ -825,261 +1343,1271 @@ class B extends (Rt = y) {
       github: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22",
       play: "M8 5v14l11-7z",
       settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
-    }, n = r[s] || r.star;
-    return /* @__PURE__ */ i(
-      "svg",
-      {
-        width: t,
-        height: t,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: o,
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "svg-icon",
-        onClick: this.handleClick,
-        style: "cursor: pointer; transition: transform 0.2s ease; display: inline-block;",
-        onMouseEnter: this.handleMouseEnter,
-        onMouseLeave: this.handleMouseLeave
-      },
-      /* @__PURE__ */ i("path", { d: n, fill: o })
-    );
+    }, A = S[g] || S.star;
+    return /* @__PURE__ */ n("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: r, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "svg-icon", onClick: this.handleClick, style: "cursor: pointer; transition: transform 0.2s ease; display: inline-block;", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, /* @__PURE__ */ n("path", { d: A, fill: r }));
   }
   static get observedAttributes() {
     return ["name", "size", "color"];
   }
-  onAttributeChanged(t, o, s) {
-    E.debug(`Attribute ${t} changed from ${o} to ${s}`), this.connected && this.rerender();
-  }
-}
-U = so(Rt);
-B = ho(U, 0, "SvgIcon", Mt, B);
-co(U, 1, B);
-var uo = Object.create, Q = Object.defineProperty, po = Object.getOwnPropertyDescriptor, Lt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Nt = (e) => {
-  throw TypeError(e);
-}, Ht = (e, t, o) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, mo = (e, t) => Q(e, "name", { value: t, configurable: !0 }), bo = (e) => [, , , uo((e == null ? void 0 : e[Lt("metadata")]) ?? null)], go = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], jt = (e) => e !== void 0 && typeof e != "function" ? Nt("Function expected") : e, fo = (e, t, o, s, r) => ({ kind: go[e], name: t, metadata: s, addInitializer: (n) => o._ ? Nt("Already initialized") : r.push(jt(n || null)) }), vo = (e, t) => Ht(t, Lt("metadata"), e[3]), xo = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, _o = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && po(r, o));
-  mo(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = fo(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, jt(a) && (r = a);
-  return vo(e, r), c && Q(r, o, c), p ? l ^ 4 ? n : c : r;
-}, _ = (e, t, o) => Ht(e, typeof t != "symbol" ? t + "" : t, o), Wt, V, Gt;
-const $ = C("SvgDemo");
-Wt = [x({ tagName: "svg-demo" })];
-class M extends (Gt = y) {
+  onAttributeChanged(e, r, g) {
+    be.debug(`Attribute ${e} changed from ${r} to ${g}`), this.connected && this.rerender();
+  }
+}
+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 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 _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: _e(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || _e(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return br(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : nt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function nt(t) {
+  var e = gr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function gr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function _e(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 de = ne("SvgDemo");
+it = [re({
+  tagName: "svg-demo"
+})];
+let yr;
+class vr extends X {
   constructor() {
-    super(), _(this, "animationId", null), _(this, "rotationAngle", 0), _(this, "showTooltip", (t, o) => {
-      t.target.setAttribute("fill", "#e74c3c"), $.debug(`Tooltip value: ${o}`);
-    }), _(this, "hideTooltip", (t) => {
-      t.target.setAttribute("fill", "#3498db");
-    }), _(this, "startAnimation", () => {
+    super(), le(this, "animationId", null), le(this, "rotationAngle", 0), le(this, "showTooltip", (e, r) => {
+      e.target.setAttribute("fill", "#e74c3c"), de.debug(`Tooltip value: ${r}`);
+    }), le(this, "hideTooltip", (e) => {
+      e.target.setAttribute("fill", "#3498db");
+    }), le(this, "startAnimation", () => {
       if (this.animationId) return;
-      const t = () => {
-        this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(t);
+      const e = () => {
+        this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(e);
       };
-      this.animationId = requestAnimationFrame(t);
-    }), _(this, "stopAnimation", () => {
+      this.animationId = requestAnimationFrame(e);
+    }), le(this, "stopAnimation", () => {
       this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null);
-    }), $.info("SvgDemo component initialized");
+    }), de.info("SvgDemo component initialized");
   }
   render() {
-    return /* @__PURE__ */ i("div", { style: "padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;" }, /* @__PURE__ */ i("h3", { style: "margin-top: 0; color: #333;" }, "SVG Showcase"), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Basic Shapes"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      /* @__PURE__ */ i(
-        "circle",
-        {
-          cx: "50",
-          cy: "50",
-          r: "30",
-          fill: "#e74c3c",
-          stroke: "#c0392b",
-          strokeWidth: "2"
+    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), 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() {
+    de.info("SvgDemo connected to DOM");
+  }
+  onDisconnected() {
+    de.info("SvgDemo disconnected from DOM"), this.stopAnimation();
+  }
+}
+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 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 _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ee(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ee(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
-      ),
-      /* @__PURE__ */ i(
-        "rect",
-        {
-          x: "100",
-          y: "20",
-          width: "60",
-          height: "60",
-          fill: "#3498db",
-          stroke: "#2980b9",
-          strokeWidth: "2",
-          rx: "5"
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Cr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
         }
-      ),
-      /* @__PURE__ */ i(
-        "polygon",
-        {
-          points: "200,20 230,80 170,80",
-          fill: "#2ecc71",
-          stroke: "#27ae60",
-          strokeWidth: "2"
+        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(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function ct(t) {
+  var e = kr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function kr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Ee(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function 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 wr = ne("SimpleReactiveDemo");
+lt = [re({
+  tagName: "simple-reactive-demo"
+})];
+let Tr;
+class Sr extends X {
+  constructor() {
+    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"}!`;
+    }), ye(this, "reset", () => {
+      this.state.count = 0, this.state.message = "Reset! Click again!";
+    }), wr.info("SimpleReactiveDemo initialized");
+    let e = this.reactive({
+      count: 0,
+      message: "Click the button!"
+    });
+    Object.defineProperty(this, "state", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    return /* @__PURE__ */ n("div", { style: "padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;" }, /* @__PURE__ */ n("h3", null, "📱 Simple Reactive Demo"), /* @__PURE__ */ n("p", null, this.state.message), /* @__PURE__ */ n("div", { style: "font-size: 24px; margin: 16px 0;" }, "Count: ", /* @__PURE__ */ n("strong", null, this.state.count)), /* @__PURE__ */ n("div", null, /* @__PURE__ */ n("button", { onClick: this.increment, style: "margin-right: 8px; padding: 8px 16px;", "data-wsx-key": "SimpleReactiveDemo-button-text-7-1" }, "+ Increment"), /* @__PURE__ */ n("button", { onClick: this.reset, style: "padding: 8px 16px;", "data-wsx-key": "SimpleReactiveDemo-button-text-7-3" }, "🔄 Reset")), /* @__PURE__ */ n("div", { style: "margin-top: 16px; font-size: 12px; color: #666;" }, "💡 State changes automatically trigger re-renders!"));
+  }
+}
+st = Sr;
+[Tr, at] = xr(st, [], lt, 0, void 0, X).c;
+at();
+const _r = ".todo-list{padding:1.5rem;max-width:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-header{margin-bottom:1.5rem;text-align:center}.todo-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.subtitle{margin:0;color:#666;font-size:.9rem}.todo-input-section{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#4caf50}.todo-filters{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-btn:hover{background:#f5f5f5}.filter-btn.active{background:#4caf50;color:#fff;border-color:#4caf50}.todo-list-container{min-height:200px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-style:italic}.todo-items{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#f9f9f9;border-radius:4px;transition:background .2s}.todo-item:hover{background:#f0f0f0}.todo-item.completed{opacity:.6}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#4caf50;color:#fff}.btn-primary:hover:not(:disabled){background:#45a049}.btn-warning{background:#ff9800;color:#fff}.btn-warning:hover{background:#e68900}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#da190b}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.debug-info{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd}.debug-info summary{cursor:pointer;color:#666;font-size:.9rem}.debug-info pre{background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}";
+var ut;
+let dt, ht;
+function ee(t, e, r) {
+  return (e = ft(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Er(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: ze(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || ze(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
-      ),
-      /* @__PURE__ */ i(
-        "line",
-        {
-          x1: "250",
-          y1: "20",
-          x2: "290",
-          y2: "80",
-          stroke: "#9b59b6",
-          strokeWidth: "3",
-          strokeLinecap: "round"
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Ar(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
         }
-      )
-    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Gradients & Effects"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
-      },
-      /* @__PURE__ */ i("defs", null, /* @__PURE__ */ i("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#3498db" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#9b59b6" })), /* @__PURE__ */ i("radialGradient", { id: "redGradient", cx: "50%", cy: "50%", r: "50%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#e74c3c" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#c0392b" }))),
-      /* @__PURE__ */ i(
-        "rect",
-        {
-          x: "20",
-          y: "20",
-          width: "120",
-          height: "60",
-          fill: "url(#blueGradient)",
-          rx: "10"
+        M(k ? o : o.prototype, f, x, d ? "#" + v : ft(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function ft(t) {
+  var e = zr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function zr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function ze(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Ar(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const se = ne("TodoList");
+ht = [re({
+  tagName: "todo-list"
+})];
+let jr;
+class Lr extends X {
+  constructor() {
+    super(), ee(this, "_autoStyles", _r), ee(this, "todos", void 0), ee(this, "_newTodoText", ""), ee(this, "filter", void 0), ee(this, "nextId", 1), ee(this, "handleInputChange", (S) => {
+      var B;
+      const A = S.target;
+      this._newTodoText = A.value;
+      const T = (B = this.shadowRoot) == null ? void 0 : B.querySelector(".todo-input-section .btn-primary");
+      T && (T.disabled = !this._newTodoText.trim());
+    }), ee(this, "handleKeyDown", (S) => {
+      S.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    }), ee(this, "addTodo", () => {
+      var T, B;
+      const S = (T = this.shadowRoot) == null ? void 0 : T.querySelector(".todo-input"), A = (S == null ? void 0 : S.value.trim()) || this._newTodoText.trim();
+      if (A) {
+        if (this.todos = [...this.todos, {
+          id: this.nextId++,
+          text: A,
+          completed: !1,
+          createdAt: Date.now()
+        }], this._newTodoText = "", S) {
+          S.value = "";
+          const _ = (B = this.shadowRoot) == null ? void 0 : B.querySelector(".todo-input-section .btn-primary");
+          _ && (_.disabled = !0);
         }
-      ),
-      /* @__PURE__ */ i("circle", { cx: "200", cy: "50", r: "35", fill: "url(#redGradient)" })
-    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Animation"), /* @__PURE__ */ i(
-      "svg",
-      {
-        width: "300",
-        height: "100",
-        style: "border: 1px solid #ddd; background: white;"
+        se.debug("Todo added", {
+          count: this.todos.length
+        });
+      }
+    }), ee(this, "removeTodo", (S) => {
+      this.todos = this.todos.filter((A) => A.id !== S), se.debug("Todo removed", {
+        id: S,
+        remaining: this.todos.length
+      });
+    }), ee(this, "toggleTodo", (S) => {
+      this.todos = this.todos.map((A) => A.id === S ? {
+        ...A,
+        completed: !A.completed
+      } : A), se.debug("Todo toggled", {
+        id: S
+      });
+    }), ee(this, "clearCompleted", () => {
+      this.todos = this.todos.filter((S) => !S.completed), se.debug("Completed todos cleared");
+    }), ee(this, "clearAll", () => {
+      this.todos = [], se.debug("All todos cleared");
+    }), se.info("TodoList initialized");
+    let e = this.reactive([]);
+    Object.defineProperty(this, "todos", {
+      get: () => e,
+      set: (S) => {
+        e = S !== null && typeof S < "u" && (Array.isArray(S) || typeof S == "object") ? this.reactive(S) : S, this.scheduleRerender();
       },
-      /* @__PURE__ */ i("g", { transform: `translate(150, 50) rotate(${this.rotationAngle})` }, /* @__PURE__ */ i(
-        "polygon",
-        {
-          points: "-30,0 0,-40 30,0 0,40",
-          fill: "#f39c12",
-          stroke: "#e67e22",
-          strokeWidth: "2"
+      enumerable: !0,
+      configurable: !0
+    });
+    const [r, g] = this.useState("filter", "all");
+    Object.defineProperty(this, "filter", {
+      get: r,
+      set: g,
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    const e = this.getFilteredTodos();
+    return /* @__PURE__ */ n("div", { class: "todo-list" }, /* @__PURE__ */ n("div", { class: "todo-header" }, /* @__PURE__ */ n("h2", null, "📝 Todo List (WebComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, this.todos.length, " total, ", this.getActiveCount(), " active,", " ", this.getCompletedCount(), " completed")), /* @__PURE__ */ n("div", { class: "todo-input-section" }, /* @__PURE__ */ n("input", { type: "text", class: "todo-input", placeholder: "Add a new todo...", value: this._newTodoText, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "data-wsx-key": "TodoList-input-text-3-1" }), /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.addTodo, disabled: !this._newTodoText.trim(), "data-wsx-key": "TodoList-button-text-3-3" }, "Add")), /* @__PURE__ */ n("div", { class: "todo-filters" }, /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "all" ? "active" : ""}`, onClick: () => this.filter = "all", "data-wsx-key": "TodoList-button-text-5-1" }, "All (", this.todos.length, ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "active" ? "active" : ""}`, onClick: () => this.filter = "active", "data-wsx-key": "TodoList-button-text-5-3" }, "Active (", this.getActiveCount(), ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "completed" ? "active" : ""}`, onClick: () => this.filter = "completed", "data-wsx-key": "TodoList-button-text-5-5" }, "Completed (", this.getCompletedCount(), ")")), /* @__PURE__ */ n("div", { class: "todo-list-container" }, e.length === 0 ? /* @__PURE__ */ n("div", { class: "empty-state" }, this.filter === "all" ? "No todos yet. Add one above! 🎉" : `No ${this.filter} todos.`) : /* @__PURE__ */ n("ul", { class: "todo-items" }, e.map((r) => /* @__PURE__ */ n("li", { key: r.id, class: `todo-item ${r.completed ? "completed" : ""}` }, /* @__PURE__ */ n("input", { type: "checkbox", checked: r.completed, onChange: () => this.toggleTodo(r.id), class: "todo-checkbox", "data-wsx-key": "TodoList-input-checkbox-7-1" }), /* @__PURE__ */ n("span", { class: "todo-text" }, r.text), /* @__PURE__ */ n("button", { class: "btn btn-sm btn-danger", onClick: () => this.removeTodo(r.id), "data-wsx-key": "TodoList-button-text-7-5" }, "Delete"))))), this.todos.length > 0 && /* @__PURE__ */ n("div", { class: "todo-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.clearCompleted, "data-wsx-key": "TodoList-button-text-1" }, "Clear Completed"), /* @__PURE__ */ n("button", { class: "btn btn-danger", onClick: this.clearAll, "data-wsx-key": "TodoList-button-text-3" }, "Clear All")), /* @__PURE__ */ n("div", { class: "debug-info" }, /* @__PURE__ */ n("details", null, /* @__PURE__ */ n("summary", null, "Debug Info"), /* @__PURE__ */ n("pre", null, JSON.stringify({
+      todosCount: this.todos.length,
+      filter: this.filter,
+      newTodoText: this._newTodoText,
+      todos: this.todos
+    }, null, 2)))));
+  }
+  getFilteredTodos() {
+    switch (this.filter) {
+      case "active":
+        return this.todos.filter((e) => !e.completed);
+      case "completed":
+        return this.todos.filter((e) => e.completed);
+      default:
+        return this.todos;
+    }
+  }
+  getActiveCount() {
+    return this.todos.filter((e) => !e.completed).length;
+  }
+  getCompletedCount() {
+    return this.todos.filter((e) => e.completed).length;
+  }
+  onConnected() {
+    se.info("TodoList connected to DOM");
+  }
+  onDisconnected() {
+    se.info("TodoList disconnected from DOM");
+  }
+}
+ut = Lr;
+[jr, dt] = Er(ut, [], ht, 0, void 0, X).c;
+dt();
+const Dr = ".todo-list-light{padding:1.5rem;max-width:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.todo-header{margin-bottom:1.5rem;text-align:center}.todo-header h2{margin:0 0 .5rem;color:#2196f3;font-size:1.75rem}.subtitle{margin:0;color:#666;font-size:.9rem}.todo-input-section{display:flex;gap:.5rem;margin-bottom:1rem}.todo-input{flex:1;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s}.todo-input:focus{outline:none;border-color:#2196f3}.todo-filters{display:flex;gap:.5rem;margin-bottom:1rem;justify-content:center}.filter-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.9rem}.filter-btn:hover{background:#f5f5f5}.filter-btn.active{background:#2196f3;color:#fff;border-color:#2196f3}.todo-list-container{min-height:200px;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#999;font-style:italic}.todo-items{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#f0f7ff;border-radius:4px;transition:background .2s}.todo-item:hover{background:#e3f2fd}.todo-item.completed{opacity:.6}.todo-checkbox{width:1.25rem;height:1.25rem;cursor:pointer}.todo-text{flex:1;font-size:1rem}.todo-item.completed .todo-text{text-decoration:line-through;color:#999}.todo-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.btn{padding:.5rem 1rem;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover:not(:disabled){background:#1976d2}.btn-warning{background:#ff9800;color:#fff}.btn-warning:hover{background:#e68900}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover{background:#da190b}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.debug-info{margin-top:2rem;padding-top:1rem;border-top:1px solid #ddd}.debug-info summary{cursor:pointer;color:#666;font-size:.9rem}.debug-info pre{background:#f5f5f5;padding:1rem;border-radius:4px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}";
+var pt;
+let mt, gt;
+function te(t, e, r) {
+  return (e = bt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function $r(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Ae(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Ae(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
         }
-      ), /* @__PURE__ */ i("circle", { cx: "0", cy: "0", r: "8", fill: "#2c3e50" }))
-    ), /* @__PURE__ */ i("div", { style: "margin-top: 10px;" }, /* @__PURE__ */ i(
-      "button",
-      {
-        onClick: this.startAnimation,
-        style: "margin-right: 10px; padding: 5px 10px;"
-      },
-      "Start Animation"
-    ), /* @__PURE__ */ i("button", { onClick: this.stopAnimation, style: "padding: 5px 10px;" }, "Stop Animation"))), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Interactive Chart"), this.renderChart()), /* @__PURE__ */ i("div", null, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Icon Components"), /* @__PURE__ */ i("div", { style: "display: flex; gap: 15px; align-items: center;" }, /* @__PURE__ */ i("svg-icon", { name: "star", size: "32", color: "#f39c12" }), /* @__PURE__ */ i("svg-icon", { name: "heart", size: "32", color: "#e74c3c" }), /* @__PURE__ */ i("svg-icon", { name: "check", size: "32", color: "#27ae60" }), /* @__PURE__ */ i("svg-icon", { name: "github", size: "32", color: "#333" }), /* @__PURE__ */ i("svg-icon", { name: "play", size: "32", color: "#3498db" }), /* @__PURE__ */ i("svg-icon", { name: "settings", size: "32", color: "#9b59b6" }))));
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Pr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : bt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function bt(t) {
+  var e = Or(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Or(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Ae(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
   }
-  renderChart() {
-    const t = [30, 80, 45, 60, 20, 90, 55], o = Math.max(...t), s = 30, r = 40, n = 120, a = t.length * r + 40;
-    return /* @__PURE__ */ i(
-      "svg",
-      {
-        width: a,
-        height: n + 40,
-        style: "border: 1px solid #ddd; background: white;"
+  return t;
+}
+function Pr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const ae = ne("TodoListLight");
+gt = [re({
+  tagName: "todo-list-light"
+})];
+let Ir;
+class Rr extends he {
+  constructor() {
+    super(), te(this, "_autoStyles", Dr), te(this, "todos", void 0), te(this, "_newTodoText", ""), te(this, "filter", void 0), te(this, "nextId", 1), te(this, "handleInputChange", (S) => {
+      const A = S.target;
+      this._newTodoText = A.value;
+      const T = this.querySelector(".todo-input-section .btn-primary");
+      T && (T.disabled = !this._newTodoText.trim());
+    }), te(this, "handleKeyDown", (S) => {
+      S.key === "Enter" && this._newTodoText.trim() && this.addTodo();
+    }), te(this, "addTodo", () => {
+      const S = this.querySelector(".todo-input"), A = (S == null ? void 0 : S.value.trim()) || this._newTodoText.trim();
+      if (A) {
+        if (this.todos = [...this.todos, {
+          id: this.nextId++,
+          text: A,
+          completed: !1,
+          createdAt: Date.now()
+        }], this._newTodoText = "", S) {
+          S.value = "";
+          const T = this.querySelector(".todo-input-section .btn-primary");
+          T && (T.disabled = !0);
+        }
+        ae.debug("Todo added", {
+          count: this.todos.length
+        });
+      }
+    }), te(this, "removeTodo", (S) => {
+      this.todos = this.todos.filter((A) => A.id !== S), ae.debug("Todo removed", {
+        id: S,
+        remaining: this.todos.length
+      });
+    }), te(this, "toggleTodo", (S) => {
+      this.todos = this.todos.map((A) => A.id === S ? {
+        ...A,
+        completed: !A.completed
+      } : A), ae.debug("Todo toggled", {
+        id: S
+      });
+    }), te(this, "clearCompleted", () => {
+      this.todos = this.todos.filter((S) => !S.completed), ae.debug("Completed todos cleared");
+    }), te(this, "clearAll", () => {
+      this.todos = [], ae.debug("All todos cleared");
+    }), ae.info("TodoListLight initialized");
+    let e = this.reactive([]);
+    Object.defineProperty(this, "todos", {
+      get: () => e,
+      set: (S) => {
+        e = S !== null && typeof S < "u" && (Array.isArray(S) || typeof S == "object") ? this.reactive(S) : S, this.scheduleRerender();
       },
-      t.map((h, u) => {
-        const l = h / o * n, p = u * r + 20, m = n - l + 20;
-        return /* @__PURE__ */ i("g", { key: u }, /* @__PURE__ */ i(
-          "rect",
-          {
-            x: p,
-            y: m,
-            width: s,
-            height: l,
-            fill: "#3498db",
-            stroke: "#2980b9",
-            strokeWidth: "1",
-            onMouseEnter: (g) => this.showTooltip(g, h),
-            onMouseLeave: this.hideTooltip,
-            style: "cursor: pointer; transition: fill 0.2s;"
-          }
-        ), /* @__PURE__ */ i(
-          "text",
-          {
-            x: p + s / 2,
-            y: n + 35,
-            textAnchor: "middle",
-            fontSize: "12",
-            fill: "#666"
-          },
-          u + 1
-        ));
-      })
-    );
+      enumerable: !0,
+      configurable: !0
+    });
+    const [r, g] = this.useState("filter", "all");
+    Object.defineProperty(this, "filter", {
+      get: r,
+      set: g,
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    const e = this.getFilteredTodos();
+    return /* @__PURE__ */ n("div", { class: "todo-list-light" }, /* @__PURE__ */ n("div", { class: "todo-header" }, /* @__PURE__ */ n("h2", null, "📝 Todo List (LightComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, this.todos.length, " total, ", this.getActiveCount(), " active,", " ", this.getCompletedCount(), " completed")), /* @__PURE__ */ n("div", { class: "todo-input-section" }, /* @__PURE__ */ n("input", { type: "text", class: "todo-input", placeholder: "Add a new todo...", value: this._newTodoText, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "data-wsx-key": "TodoListLight-input-text-3-1" }), /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.addTodo, disabled: !this._newTodoText.trim(), "data-wsx-key": "TodoListLight-button-text-3-3" }, "Add")), /* @__PURE__ */ n("div", { class: "todo-filters" }, /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "all" ? "active" : ""}`, onClick: () => this.filter = "all", "data-wsx-key": "TodoListLight-button-text-5-1" }, "All (", this.todos.length, ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "active" ? "active" : ""}`, onClick: () => this.filter = "active", "data-wsx-key": "TodoListLight-button-text-5-3" }, "Active (", this.getActiveCount(), ")"), /* @__PURE__ */ n("button", { class: `filter-btn ${this.filter === "completed" ? "active" : ""}`, onClick: () => this.filter = "completed", "data-wsx-key": "TodoListLight-button-text-5-5" }, "Completed (", this.getCompletedCount(), ")")), /* @__PURE__ */ n("div", { class: "todo-list-container" }, e.length === 0 ? /* @__PURE__ */ n("div", { class: "empty-state" }, this.filter === "all" ? "No todos yet. Add one above! 🎉" : `No ${this.filter} todos.`) : /* @__PURE__ */ n("ul", { class: "todo-items" }, e.map((r) => /* @__PURE__ */ n("li", { key: r.id, class: `todo-item ${r.completed ? "completed" : ""}` }, /* @__PURE__ */ n("input", { type: "checkbox", checked: r.completed, onChange: () => this.toggleTodo(r.id), class: "todo-checkbox", "data-wsx-key": "TodoListLight-input-checkbox-7-1" }), /* @__PURE__ */ n("span", { class: "todo-text" }, r.text), /* @__PURE__ */ n("button", { class: "btn btn-sm btn-danger", onClick: () => this.removeTodo(r.id), "data-wsx-key": "TodoListLight-button-text-7-5" }, "Delete"))))), this.todos.length > 0 && /* @__PURE__ */ n("div", { class: "todo-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.clearCompleted, "data-wsx-key": "TodoListLight-button-text-1" }, "Clear Completed"), /* @__PURE__ */ n("button", { class: "btn btn-danger", onClick: this.clearAll, "data-wsx-key": "TodoListLight-button-text-3" }, "Clear All")), /* @__PURE__ */ n("div", { class: "debug-info" }, /* @__PURE__ */ n("details", null, /* @__PURE__ */ n("summary", null, "Debug Info"), /* @__PURE__ */ n("pre", null, JSON.stringify({
+      todosCount: this.todos.length,
+      filter: this.filter,
+      newTodoText: this._newTodoText,
+      todos: this.todos
+    }, null, 2)))));
+  }
+  getFilteredTodos() {
+    switch (this.filter) {
+      case "active":
+        return this.todos.filter((e) => !e.completed);
+      case "completed":
+        return this.todos.filter((e) => e.completed);
+      default:
+        return this.todos;
+    }
+  }
+  getActiveCount() {
+    return this.todos.filter((e) => !e.completed).length;
+  }
+  getCompletedCount() {
+    return this.todos.filter((e) => e.completed).length;
   }
   onConnected() {
-    $.info("SvgDemo connected to DOM");
+    ae.info("TodoListLight connected to DOM");
   }
   onDisconnected() {
-    $.info("SvgDemo disconnected from DOM"), this.stopAnimation();
-  }
-}
-V = bo(Gt);
-M = _o(V, 0, "SvgDemo", Wt, M);
-xo(V, 1, M);
-var yo = Object.create, Z = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Yt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Xt = (e) => {
-  throw TypeError(e);
-}, qt = (e, t, o) => t in e ? Z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Co = (e, t) => Z(e, "name", { value: t, configurable: !0 }), wo = (e) => [, , , yo((e == null ? void 0 : e[Yt("metadata")]) ?? null)], $o = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Jt = (e) => e !== void 0 && typeof e != "function" ? Xt("Function expected") : e, So = (e, t, o, s, r) => ({ kind: $o[e], name: t, metadata: s, addInitializer: (n) => o._ ? Xt("Already initialized") : r.push(Jt(n || null)) }), zo = (e, t) => qt(t, Yt("metadata"), e[3]), Ao = (e, t, o, s) => {
-  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
-  return s;
-}, Eo = (e, t, o, s, r, n) => {
-  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ko(r, o));
-  Co(r, o);
-  for (var d = s.length - 1; d >= 0; d--)
-    u = So(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Jt(a) && (r = a);
-  return zo(e, r), c && Z(r, o, c), p ? l ^ 4 ? n : c : r;
-}, P = (e, t, o) => qt(e, typeof t != "symbol" ? t + "" : t, o), Kt, tt, Ut;
-const Po = C("SimpleReactiveDemo");
-Kt = [x({ tagName: "simple-reactive-demo" })];
-class R extends (Ut = ot) {
+    ae.info("TodoListLight disconnected from DOM");
+  }
+}
+pt = Rr;
+[Ir, mt] = $r(pt, [], gt, 0, void 0, he).c;
+mt();
+const Br = ".user-profile{padding:1.5rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.profile-header{margin-bottom:2rem;text-align:center}.profile-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.profile-header .subtitle{color:#666;font-size:.9rem;margin:0}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem;border-bottom:2px solid #007bff;padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}.form-group input[type=checkbox]{margin-right:.5rem}.input-field{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.profile-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-warning{background:#ffc107;color:#212529}.btn-warning:hover{background:#e0a800}.profile-display{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-display h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.json-display{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:4px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}";
+var yt;
+let vt, xt;
+function Q(t, e, r) {
+  return (e = kt(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Nr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: je(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || je(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Ur(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : kt(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function kt(t) {
+  var e = Mr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Mr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function je(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Ur(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const oe = ne("UserProfile");
+xt = [re({
+  tagName: "user-profile"
+})];
+let Hr;
+class Fr extends X {
   constructor() {
-    super(), P(this, "state", this.reactive({
-      count: 0,
-      message: "Click the button!"
-    })), P(this, "increment", () => {
-      this.state.count++, this.state.message = `Clicked ${this.state.count} time${this.state.count === 1 ? "" : "s"}!`;
-    }), P(this, "reset", () => {
-      this.state.count = 0, this.state.message = "Reset! Click again!";
-    }), Po.info("SimpleReactiveDemo initialized");
+    super(), Q(this, "_autoStyles", Br), Q(this, "profile", void 0), Q(this, "handleNameChange", (r) => {
+      const g = r.target;
+      this.profile.name = g.value;
+    }), Q(this, "handleNameBlur", () => {
+      this.profile = {
+        ...this.profile,
+        name: this.profile.name
+      }, oe.debug("Name updated", {
+        name: this.profile.name
+      });
+    }), Q(this, "handleEmailChange", (r) => {
+      const g = r.target;
+      this.profile.email = g.value;
+    }), Q(this, "handleEmailBlur", () => {
+      this.profile = {
+        ...this.profile,
+        email: this.profile.email
+      }, oe.debug("Email updated", {
+        email: this.profile.email
+      });
+    }), Q(this, "handleAgeChange", (r) => {
+      const g = r.target;
+      this.profile.age = parseInt(g.value, 10) || 0;
+    }), Q(this, "handleAgeBlur", () => {
+      this.profile = {
+        ...this.profile,
+        age: this.profile.age
+      }, oe.debug("Age updated", {
+        age: this.profile.age
+      });
+    }), Q(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, oe.debug("Theme updated", {
+        theme: g.value
+      });
+    }), Q(this, "handleLanguageChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.language = g.value, oe.debug("Language updated", {
+        language: g.value
+      });
+    }), Q(this, "handleNotificationsChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.notifications = g.checked, oe.debug("Notifications updated", {
+        notifications: g.checked
+      });
+    }), Q(this, "resetProfile", () => {
+      this.profile = {
+        name: "John Doe",
+        email: "john@example.com",
+        age: 30,
+        preferences: {
+          theme: "light",
+          language: "en",
+          notifications: !0
+        },
+        lastLogin: Date.now()
+      }, oe.debug("Profile reset to default");
+    }), Q(this, "updateLastLogin", () => {
+      this.profile = {
+        ...this.profile,
+        lastLogin: Date.now()
+      }, oe.debug("Last login updated", {
+        lastLogin: this.profile.lastLogin
+      });
+    }), Q(this, "replaceEntireProfile", () => {
+      this.profile = {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        age: 25,
+        preferences: {
+          theme: "dark",
+          language: "zh",
+          notifications: !1
+        },
+        lastLogin: Date.now()
+      }, oe.debug("Entire profile replaced");
+    }), oe.info("UserProfile initialized");
+    let e = this.reactive({
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+      preferences: {
+        theme: "light",
+        language: "en",
+        notifications: !0
+      },
+      lastLogin: Date.now()
+    });
+    Object.defineProperty(this, "profile", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  render() {
+    return /* @__PURE__ */ n("div", { class: "user-profile" }, /* @__PURE__ */ n("div", { class: "profile-header" }, /* @__PURE__ */ n("h2", null, "👤 User Profile (WebComponent)"), /* @__PURE__ */ n("p", { class: "subtitle" }, "Demonstrates @state decorator with objects")), /* @__PURE__ */ n("div", { class: "profile-content" }, /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Basic Information"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Name:"), /* @__PURE__ */ n("input", { type: "text", value: this.profile.name, onInput: this.handleNameChange, onBlur: this.handleNameBlur, class: "input-field", "data-wsx-key": "UserProfile-input-text-3-1-3-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Email:"), /* @__PURE__ */ n("input", { type: "email", value: this.profile.email, onInput: this.handleEmailChange, onBlur: this.handleEmailBlur, class: "input-field", "data-wsx-key": "UserProfile-input-email-3-1-5-3" })), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Age:"), /* @__PURE__ */ n("input", { type: "number", value: this.profile.age.toString(), onInput: this.handleAgeChange, onBlur: this.handleAgeBlur, class: "input-field", "data-wsx-key": "UserProfile-input-number-3-1-7-3" }))), /* @__PURE__ */ n("div", { class: "profile-section" }, /* @__PURE__ */ n("h3", null, "Preferences"), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Theme:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.theme, onChange: this.handleThemeChange, class: "input-field", "data-wsx-key": "UserProfile-select-text-3-3-3-3" }, /* @__PURE__ */ n("option", { value: "light" }, "Light"), /* @__PURE__ */ n("option", { value: "dark" }, "Dark"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, "Language:"), /* @__PURE__ */ n("select", { value: this.profile.preferences.language, onChange: this.handleLanguageChange, class: "input-field", "data-wsx-key": "UserProfile-select-text-3-3-5-3" }, /* @__PURE__ */ n("option", { value: "en" }, "English"), /* @__PURE__ */ n("option", { value: "zh" }, "中文"), /* @__PURE__ */ n("option", { value: "es" }, "Español"), /* @__PURE__ */ n("option", { value: "fr" }, "Français"))), /* @__PURE__ */ n("div", { class: "form-group" }, /* @__PURE__ */ n("label", null, /* @__PURE__ */ n("input", { type: "checkbox", checked: this.profile.preferences.notifications, onChange: this.handleNotificationsChange, "data-wsx-key": "UserProfile-input-checkbox-3-3-7-1-1" }), "Enable Notifications"))), /* @__PURE__ */ n("div", { class: "profile-actions" }, /* @__PURE__ */ n("button", { class: "btn btn-primary", onClick: this.resetProfile, "data-wsx-key": "UserProfile-button-text-3-5-1" }, "Reset to Default"), /* @__PURE__ */ n("button", { class: "btn btn-secondary", onClick: this.updateLastLogin, "data-wsx-key": "UserProfile-button-text-3-5-3" }, "Update Last Login"), /* @__PURE__ */ n("button", { class: "btn btn-warning", onClick: this.replaceEntireProfile, "data-wsx-key": "UserProfile-button-text-3-5-5" }, "Replace Entire Profile")), /* @__PURE__ */ n("div", { class: "profile-display" }, /* @__PURE__ */ n("h3", null, "Current Profile Data"), /* @__PURE__ */ n("pre", { class: "json-display" }, JSON.stringify(this.profile, null, 2)))));
+  }
+}
+yt = Fr;
+[Hr, vt] = Nr(yt, [], xt, 0, void 0, X).c;
+vt();
+const Kr = ".user-profile{padding:1.5rem;max-width:800px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.profile-header{margin-bottom:2rem;text-align:center}.profile-header h2{margin:0 0 .5rem;color:#333;font-size:1.75rem}.profile-header .subtitle{color:#666;font-size:.9rem;margin:0}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem;border-bottom:2px solid #007bff;padding-bottom:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500;font-size:.9rem}.form-group input[type=checkbox]{margin-right:.5rem}.input-field{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.profile-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-warning{background:#ffc107;color:#212529}.btn-warning:hover{background:#e0a800}.profile-display{background:#f8f9fa;padding:1.5rem;border-radius:8px;border:1px solid #e0e0e0}.profile-display h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.json-display{background:#2d2d2d;color:#f8f8f2;padding:1rem;border-radius:4px;overflow-x:auto;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-wrap:break-word}";
+var Ct;
+let wt, Tt;
+function Z(t, e, r) {
+  return (e = St(e)) in t ? Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = r, t;
+}
+function Jr(t, e, r, g, S, A) {
+  function T(o, l, u) {
+    return function(s, a) {
+      return u && u(s), o[l].call(s, a);
+    };
+  }
+  function B(o, l) {
+    for (var u = 0; u < o.length; u++) o[u].call(l);
+    return l;
+  }
+  function _(o, l, u, s) {
+    if (typeof o != "function" && (s || o !== void 0)) throw new TypeError(l + " must " + (u || "be") + " a function" + (s ? "" : " or undefined"));
+    return o;
+  }
+  function M(o, l, u, s, a, j, L, E, P, y, b, f, p) {
+    function v(c) {
+      if (!p(c)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    var d, x = l[0], k = l[3], z = !E;
+    if (!z) {
+      u || Array.isArray(x) || (x = [x]);
+      var i = {}, C = [], m = a === 3 ? "get" : a === 4 || f ? "set" : "value";
+      y ? (b || f ? i = { get: Le(function() {
+        return k(this);
+      }, s, "get"), set: function(c) {
+        l[4](this, c);
+      } } : i[m] = k, b || Le(i[m], s, a === 2 ? "" : m)) : b || (i = Object.getOwnPropertyDescriptor(o, s));
+    }
+    for (var h = o, I = x.length - 1; I >= 0; I -= u ? 2 : 1) {
+      var F = x[I], K = u ? x[I - 1] : void 0, J = {}, D = { kind: ["field", "accessor", "method", "getter", "setter", "class"][a], name: s, metadata: j, addInitializer: (function(c, w) {
+        if (c.v) throw Error("attempted to call addInitializer after decoration was finished");
+        _(w, "An initializer", "be", !0), L.push(w);
+      }).bind(null, J) };
+      try {
+        if (z) (d = _(F.call(K, h, D), "class decorators", "return")) && (h = d);
+        else {
+          var $, R;
+          D.static = P, D.private = y, y ? a === 2 ? $ = function(c) {
+            return v(c), i.value;
+          } : (a < 4 && ($ = T(i, "get", v)), a !== 3 && (R = T(i, "set", v))) : ($ = function(c) {
+            return c[s];
+          }, (a < 2 || a === 4) && (R = function(c, w) {
+            c[s] = w;
+          }));
+          var W = D.access = { has: y ? p.bind() : function(c) {
+            return s in c;
+          } };
+          if ($ && (W.get = $), R && (W.set = R), h = F.call(K, f ? { get: i.get, set: i.set } : i[m], D), f) {
+            if (typeof h == "object" && h) (d = _(h.get, "accessor.get")) && (i.get = d), (d = _(h.set, "accessor.set")) && (i.set = d), (d = _(h.init, "accessor.init")) && C.push(d);
+            else if (h !== void 0) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          } else _(h, (b ? "field" : "method") + " decorators", "return") && (b ? C.push(h) : i[m] = h);
+        }
+      } finally {
+        J.v = !0;
+      }
+    }
+    return (b || f) && E.push(function(c, w) {
+      for (var N = C.length - 1; N >= 0; N--) w = C[N].call(c, w);
+      return w;
+    }), b || z || (y ? f ? E.push(T(i, "get"), T(i, "set")) : E.push(a === 2 ? i[m] : T.call.bind(i[m])) : Object.defineProperty(o, s, i)), h;
+  }
+  function U(o, l) {
+    return Object.defineProperty(o, Symbol.metadata || Symbol.for("Symbol.metadata"), { configurable: !0, enumerable: !0, value: l });
+  }
+  if (arguments.length >= 6) var H = A[Symbol.metadata || Symbol.for("Symbol.metadata")];
+  var O = Object.create(H ?? null), G = function(o, l, u, s) {
+    var a, j, L = [], E = function(m) {
+      return Gr(m) === o;
+    }, P = /* @__PURE__ */ new Map();
+    function y(m) {
+      m && L.push(B.bind(null, m));
+    }
+    for (var b = 0; b < l.length; b++) {
+      var f = l[b];
+      if (Array.isArray(f)) {
+        var p = f[1], v = f[2], d = f.length > 3, x = 16 & p, k = !!(8 & p), z = (p &= 7) == 0, i = v + "/" + k;
+        if (!z && !d) {
+          var C = P.get(i);
+          if (C === !0 || C === 3 && p !== 4 || C === 4 && p !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + v);
+          P.set(i, !(p > 2) || p);
+        }
+        M(k ? o : o.prototype, f, x, d ? "#" + v : St(v), p, s, k ? j = j || [] : a = a || [], L, k, d, z, p === 1, k && d ? E : u);
+      }
+    }
+    return y(a), y(j), L;
+  }(t, e, S, O);
+  return r.length || U(t, O), { e: G, get c() {
+    var o = [];
+    return r.length && [U(M(t, [r], g, t.name, 5, O, o), O), B.bind(null, o, t)];
+  } };
+}
+function St(t) {
+  var e = Wr(t, "string");
+  return typeof e == "symbol" ? e : e + "";
+}
+function Wr(t, e) {
+  if (typeof t != "object" || !t) return t;
+  var r = t[Symbol.toPrimitive];
+  if (r !== void 0) {
+    var g = r.call(t, e);
+    if (typeof g != "object") return g;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return String(t);
+}
+function Le(t, e, r) {
+  typeof e == "symbol" && (e = (e = e.description) ? "[" + e + "]" : "");
+  try {
+    Object.defineProperty(t, "name", { configurable: !0, value: r ? r + " " + e : e });
+  } catch {
+  }
+  return t;
+}
+function Gr(t) {
+  if (Object(t) !== t) throw TypeError("right-hand side of 'in' should be an object, got " + (t !== null ? typeof t : "null"));
+  return t;
+}
+const ie = ne("UserProfileLight");
+Tt = [re({
+  tagName: "user-profile-light"
+})];
+let Xr;
+class qr extends he {
+  constructor() {
+    super(), Z(this, "_autoStyles", Kr), Z(this, "profile", void 0), Z(this, "handleNameChange", (r) => {
+      const g = r.target;
+      this.profile.name = g.value;
+    }), Z(this, "handleNameBlur", () => {
+      this.profile = {
+        ...this.profile,
+        name: this.profile.name
+      }, ie.debug("Name updated", {
+        name: this.profile.name
+      });
+    }), Z(this, "handleEmailChange", (r) => {
+      const g = r.target;
+      this.profile.email = g.value;
+    }), Z(this, "handleEmailBlur", () => {
+      this.profile = {
+        ...this.profile,
+        email: this.profile.email
+      }, ie.debug("Email updated", {
+        email: this.profile.email
+      });
+    }), Z(this, "handleAgeChange", (r) => {
+      const g = r.target;
+      this.profile.age = parseInt(g.value, 10) || 0;
+    }), Z(this, "handleAgeBlur", () => {
+      this.profile = {
+        ...this.profile,
+        age: this.profile.age
+      }, ie.debug("Age updated", {
+        age: this.profile.age
+      });
+    }), Z(this, "handleThemeChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.theme = g.value, ie.debug("Theme updated", {
+        theme: g.value
+      });
+    }), Z(this, "handleLanguageChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.language = g.value, ie.debug("Language updated", {
+        language: g.value
+      });
+    }), Z(this, "handleNotificationsChange", (r) => {
+      const g = r.target;
+      this.profile.preferences.notifications = g.checked, ie.debug("Notifications updated", {
+        notifications: g.checked
+      });
+    }), Z(this, "resetProfile", () => {
+      this.profile = {
+        name: "John Doe",
+        email: "john@example.com",
+        age: 30,
+        preferences: {
+          theme: "light",
+          language: "en",
+          notifications: !0
+        },
+        lastLogin: Date.now()
+      }, this._name = "John Doe", this._email = "john@example.com", this._age = 30, ie.debug("Profile reset to default");
+    }), Z(this, "updateLastLogin", () => {
+      this.profile = {
+        ...this.profile,
+        lastLogin: Date.now()
+      }, ie.debug("Last login updated", {
+        lastLogin: this.profile.lastLogin
+      });
+    }), Z(this, "replaceEntireProfile", () => {
+      this.profile = {
+        name: "Jane Smith",
+        email: "jane@example.com",
+        age: 25,
+        preferences: {
+          theme: "dark",
+          language: "zh",
+          notifications: !1
+        },
+        lastLogin: Date.now()
+      }, this._name = "Jane Smith", this._email = "jane@example.com", this._age = 25, ie.debug("Entire profile replaced");
+    }), ie.info("UserProfileLight initialized");
+    let e = this.reactive({
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+      preferences: {
+        theme: "light",
+        language: "en",
+        notifications: !0
+      },
+      lastLogin: Date.now()
+    });
+    Object.defineProperty(this, "profile", {
+      get: () => e,
+      set: (r) => {
+        e = r !== null && typeof r < "u" && (Array.isArray(r) || typeof r == "object") ? this.reactive(r) : r, this.scheduleRerender();
+      },
+      enumerable: !0,
+      configurable: !0
+    });
   }
   render() {
-    return /* @__PURE__ */ i("div", { style: "padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin: 20px;" }, /* @__PURE__ */ i("h3", null, "📱 Simple Reactive Demo"), /* @__PURE__ */ i("p", null, this.state.message), /* @__PURE__ */ i("div", { style: "font-size: 24px; margin: 16px 0;" }, "Count: ", /* @__PURE__ */ i("strong", null, this.state.count)), /* @__PURE__ */ i("div", null, /* @__PURE__ */ i("button", { onClick: this.increment, style: "margin-right: 8px; padding: 8px 16px;" }, "+ Increment"), /* @__PURE__ */ i("button", { onClick: this.reset, style: "padding: 8px 16px;" }, "🔄 Reset")), /* @__PURE__ */ i("div", { style: "margin-top: 16px; font-size: 12px; color: #666;" }, "💡 State changes automatically trigger re-renders!"));
+    return /* @__PURE__ */ 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)))));
   }
 }
-tt = wo(Ut);
-R = Eo(tt, 0, "SimpleReactiveDemo", Kt, R);
-Ao(tt, 1, R);
+Ct = qr;
+[Xr, wt] = Jr(Ct, [], Tt, 0, void 0, he).c;
+wt();
 export {
-  Oo as CONVERTER_BTN,
-  Io as CONVERTER_PANEL,
-  O as ColorPicker,
-  I as ReactiveCounter,
-  R as SimpleReactiveDemo,
-  M as SvgDemo,
-  B as SvgIcon,
-  F as ThemeSwitcher,
-  D as XyButton,
-  T as XyButtonGroup,
-  we as getCustomColorCache,
-  To as getDefaultColorCache,
-  w as handleCSSVariables,
-  Ce as setCustomColorCache,
-  ke as setDefaultColorCache,
-  $e as throttle
+  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
 };