@wsxjs/wsx-base-components 0.0.5

package/dist/index.js

@@ -0,0 +1,1085 @@
+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 = {}) {
+    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) => {
+      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", () => {
+      this.toggle && !this.disabled && (this.checked = !this.checked, this.checked ? this.setAttr("checked", "") : this.removeAttr("checked"));
+    }), this.disabled = t.disabled || !1, this.loading = t.loading || !1, this.toggle = t.toggle || !1, this.checked = t.checked || !1, this.icon = t.icon || null, this.href = t.href || null, this.type = t.type || null, this.target = t.target || "_blank", this.rel = t.rel || null, this.download = t.download || null, this.variant = t.variant || "flat", this.size = t.size || "md";
+  }
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "icon",
+      "loading",
+      "href",
+      "type",
+      "target",
+      "rel",
+      "download",
+      "toggle",
+      "checked",
+      "variant",
+      "shape",
+      "block",
+      "size"
+    ];
+  }
+  render() {
+    const t = !!this.href, o = /* @__PURE__ */ i(
+      "a",
+      {
+        href: this.href,
+        target: this.target,
+        rel: this.rel || void 0,
+        download: this.download || void 0,
+        className: "btn",
+        onMouseDown: this.handleMouseDown,
+        onKeyDown: this.handleKeyDown,
+        ref: (r) => {
+          this.btnElement = r;
+        }
+      },
+      this.renderContent()
+    ), s = /* @__PURE__ */ i(
+      "button",
+      {
+        type: this.type || "button",
+        disabled: this.disabled,
+        className: "btn",
+        onMouseDown: this.handleMouseDown,
+        onKeyDown: this.handleKeyDown,
+        ref: (r) => {
+          this.btnElement = r;
+        }
+      },
+      this.renderContent()
+    );
+    return /* @__PURE__ */ i("div", { className: "xy-button-container" }, t ? o : s);
+  }
+  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;
+  }
+  /**
+   * 组件连接到DOM后的初始化
+   */
+  onConnected() {
+    this.addEventListener("click", this.handleClick);
+  }
+  /**
+   * 组件从DOM断开时的清理
+   */
+  onDisconnected() {
+    this.removeEventListener("click", this.handleClick);
+  }
+  /**
+   * 属性变化处理
+   */
+  onAttributeChanged(t, o, s) {
+    switch (t) {
+      case "disabled":
+        this.disabled = s !== null, this.updateButtonState();
+        break;
+      case "loading":
+        this.loading = s !== null, this.updateButtonState(), this.rerender();
+        break;
+      case "icon":
+        this.icon = s, this.rerender();
+        break;
+      case "href":
+        this.href = s, this.rerender();
+        break;
+      case "type":
+        this.type = s, this.updateButtonState();
+        break;
+      case "target":
+        this.target = s || "_blank";
+        break;
+      case "rel":
+        this.rel = s;
+        break;
+      case "download":
+        this.download = s;
+        break;
+      case "toggle":
+        this.toggle = s !== null;
+        break;
+      case "checked":
+        this.checked = s !== null;
+        break;
+      case "variant":
+        this.variant = s || "flat";
+        break;
+      case "size":
+        this.size = s || "md";
+        break;
+    }
+  }
+  /**
+   * 更新按钮状态
+   */
+  updateButtonState() {
+    this.btnElement && (this.disabled || this.loading ? (this.btnElement.setAttribute("disabled", "disabled"), this.href && this.btnElement instanceof HTMLAnchorElement && this.btnElement.removeAttribute("href")) : (this.btnElement.removeAttribute("disabled"), this.href && this.btnElement instanceof HTMLAnchorElement && (this.btnElement.href = this.href)), this.type && this.btnElement instanceof HTMLButtonElement && (this.btnElement.type = this.type));
+  }
+  /**
+   * 公共API：聚焦按钮
+   */
+  focus() {
+    var t;
+    (t = this.btnElement) == null || t.focus();
+  }
+  /**
+   * 公共API：获取/设置属性
+   */
+  get isDisabled() {
+    return this.disabled;
+  }
+  set isDisabled(t) {
+    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  }
+  get isLoading() {
+    return this.loading;
+  }
+  set isLoading(t) {
+    t ? this.setAttr("loading", "") : this.removeAttr("loading");
+  }
+  get isChecked() {
+    return this.checked;
+  }
+  set isChecked(t) {
+    t ? 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;
+  }
+  static get observedAttributes() {
+    return ["disabled"];
+  }
+  render() {
+    return /* @__PURE__ */ i("div", { class: "button-group-container" }, /* @__PURE__ */ i("slot", null));
+  }
+  /**
+   * 属性变化处理
+   */
+  onAttributeChanged(t, o, s) {
+    switch (t) {
+      case "disabled":
+        this.disabled = s !== null, this.updateChildrenDisabledState();
+        break;
+    }
+  }
+  /**
+   * 组件连接到DOM后的初始化
+   */
+  onConnected() {
+    this.updateChildrenDisabledState();
+  }
+  /**
+   * 更新所有子按钮的disabled状态
+   */
+  updateChildrenDisabledState() {
+    if (!this.disabled) return;
+    this.querySelectorAll("xy-button").forEach((o) => {
+      this.disabled ? o.setAttribute("disabled", "") : o.removeAttribute("disabled");
+    });
+  }
+  /**
+   * 公共API：获取/设置disabled状态
+   */
+  get isDisabled() {
+    return this.disabled;
+  }
+  set isDisabled(t) {
+    t ? this.setAttr("disabled", "") : this.removeAttr("disabled");
+  }
+  /**
+   * 公共API：获取组内的所有按钮
+   */
+  getButtons() {
+    return this.querySelectorAll("xy-button");
+  }
+  /**
+   * 公共API：启用所有按钮
+   */
+  enableAll() {
+    this.getButtons().forEach((o) => {
+      o.removeAttribute("disabled");
+    });
+  }
+  /**
+   * 公共API：禁用所有按钮
+   */
+  disableAll() {
+    this.getButtons().forEach((o) => {
+      o.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(")");
+}
+function _e(e) {
+  return e.slice(4, -1).trim();
+}
+function ye(e) {
+  return getComputedStyle(document.documentElement).getPropertyValue(e).trim() || e;
+}
+function w(e) {
+  if (xe(e)) {
+    const t = _e(e);
+    return ye(t);
+  }
+  return e;
+}
+function ke(e, t) {
+  return sessionStorage.setItem(`${S}-${t}`, JSON.stringify(e)), e;
+}
+function Ce(e, t) {
+  sessionStorage.setItem(`${S}-${t}-custom`, JSON.stringify(e));
+}
+function we(e) {
+  const t = sessionStorage.getItem(`${S}-${e}-custom`);
+  return t ? JSON.parse(t) : null;
+}
+function $e(e, t) {
+  let o = null;
+  return (...s) => {
+    o || (o = setTimeout(() => {
+      e(...s), o = null;
+    }, t));
+  };
+}
+function To(e, t) {
+  const o = sessionStorage.getItem(`${S}-${t}`);
+  return o ? JSON.parse(o) : e;
+}
+const Oo = "ce-inline-toolbar__dropdown", Io = "ce-conversion-toolbar--showed";
+var Se = Object.create, W = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, bt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), gt = (e) => {
+  throw TypeError(e);
+}, ft = (e, t, o) => t in e ? W(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Ae = (e, t) => W(e, "name", { value: t, configurable: !0 }), Ee = (e) => [, , , Se((e == null ? void 0 : e[bt("metadata")]) ?? null)], Pe = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], vt = (e) => e !== void 0 && typeof e != "function" ? gt("Function expected") : e, De = (e, t, o, s, r) => ({ kind: Pe[e], name: t, metadata: s, addInitializer: (n) => o._ ? gt("Already initialized") : r.push(vt(n || null)) }), Te = (e, t) => ft(t, bt("metadata"), e[3]), Oe = (e, t, o, s) => {
+  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
+  return s;
+}, Ie = (e, t, o, s, r, n) => {
+  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ze(r, o));
+  Ae(r, o);
+  for (var d = s.length - 1; d >= 0; d--)
+    u = De(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, vt(a) && (r = a);
+  return Te(e, r), c && W(r, o, c), p ? l ^ 4 ? n : c : r;
+}, f = (e, t, o) => ft(e, typeof t != "symbol" ? t + "" : t, o), xt, G, _t;
+const k = C("ColorPicker"), Fe = [
+  "#ff1300",
+  "#EC7878",
+  "#9C27B0",
+  "#673AB7",
+  "#3F51B5",
+  "#0070FF",
+  "#03A9F4",
+  "#00BCD4",
+  "#4CAF50",
+  "#8BC34A",
+  "#CDDC39",
+  "#FFE500",
+  "#FFBF00",
+  "#FF9800",
+  "#795548",
+  "#9E9E9E",
+  "#5A5A5A",
+  "#FFF"
+];
+xt = [x({ tagName: "color-picker" })];
+class O extends (_t = y) {
+  constructor(t = {}) {
+    super({
+      styles: ve,
+      styleName: "base-color-picker",
+      ...t
+    }), f(this, "colorCollections"), f(this, "onColorPicked"), f(this, "hasCustomPicker"), f(this, "defaultColor"), f(this, "pluginType"), f(this, "disabled"), f(this, "selectedColor"), f(this, "customColor"), f(this, "isOpen"), f(this, "colorBtn"), f(this, "colorPanel"), f(this, "handleButtonClick", (o) => {
+      o.stopPropagation(), this.togglePanel();
+    }), f(this, "handlePanelClick", (o) => {
+      o.stopPropagation();
+    }), f(this, "handleColorSelect", (o) => {
+      var r;
+      const s = w(o);
+      this.setSelectedColor(s), this.closePanel(), ke(s, this.pluginType), (r = this.onColorPicked) == null || r.call(this, s), this.dispatchEvent(
+        new CustomEvent("colorchange", {
+          detail: { color: s },
+          bubbles: !0,
+          composed: !0
+        })
+      ), k.debug("Color selected", { color: s });
+    }), f(this, "handleCustomPickerClick", () => {
+      const o = document.createElement("input");
+      o.type = "color", o.value = this.customColor, o.style.cssText = `
+            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 });
+      }, 30);
+      o.addEventListener("input", s), document.body.appendChild(o), requestAnimationFrame(() => {
+        o.focus(), o.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", {
+      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));
+  }
+  /**
+   * 渲染颜色按钮 - 真正的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" }, "_")
+    );
+  }
+  /**
+   * 渲染颜色面板 - 真正的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())
+    );
+  }
+  /**
+   * 渲染自定义颜色选择器 - 真正的JSX！
+   */
+  renderCustomPicker() {
+    return /* @__PURE__ */ i(
+      "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)
+      }
+    ));
+  }
+  /**
+   * 切换面板显示状态
+   */
+  togglePanel() {
+    this.setOpen(!this.isOpen);
+  }
+  /**
+   * 关闭面板
+   */
+  closePanel() {
+    this.setOpen(!1);
+  }
+  /**
+   * 设置选中的颜色
+   */
+  setSelectedColor(t) {
+    this.selectedColor = t, this.setAttr("selected-color", t), this.updateColorButton();
+  }
+  /**
+   * 设置自定义颜色
+   */
+  setCustomColor(t) {
+    this.customColor = t, Ce(t, this.pluginType);
+  }
+  /**
+   * 设置面板开关状态
+   */
+  setOpen(t) {
+    this.isOpen = t, t ? this.setAttr("open", "") : this.removeAttr("open"), this.rerender();
+  }
+  /**
+   * 更新颜色按钮样式
+   */
+  updateColorButton() {
+    this.colorBtn && this.colorBtn.style.setProperty("--theme-color", this.selectedColor);
+  }
+  /**
+   * 组件连接到DOM后的初始化
+   */
+  onConnected() {
+    document.addEventListener("click", this.handleDocumentClick), k.info("ColorPicker connected to DOM");
+  }
+  /**
+   * 组件从DOM断开时的清理
+   */
+  onDisconnected() {
+    document.removeEventListener("click", this.handleDocumentClick), k.info("ColorPicker disconnected from DOM");
+  }
+  /**
+   * 属性变化处理
+   */
+  onAttributeChanged(t, o, s) {
+    switch (t) {
+      case "disabled":
+        this.disabled = s !== null, this.rerender();
+        break;
+      case "selected-color":
+        s && s !== this.selectedColor && (this.selectedColor = s, this.updateColorButton());
+        break;
+      case "open":
+        this.isOpen = s !== null;
+        break;
+    }
+  }
+  /**
+   * 公共API：获取当前选中的颜色
+   */
+  getSelectedColor() {
+    return this.selectedColor;
+  }
+  /**
+   * 公共API：设置颜色
+   */
+  setColor(t) {
+    this.setSelectedColor(w(t));
+  }
+  /**
+   * 公共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) {
+  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", () => {
+      this.state.count += this.state.step, this.addToHistory(this.state.count);
+    }), v(this, "decrement", () => {
+      this.state.count -= this.state.step, this.addToHistory(this.state.count);
+    }), 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", () => {
+      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
+      },
+      this.state.isRunning ? "Stop" : "Start",
+      " Auto Increment"
+    )), /* @__PURE__ */ i("div", { class: "theme-controls" }, /* @__PURE__ */ i("label", null, "Theme:", /* @__PURE__ */ i("select", { value: t, onChange: this.handleThemeChange }, /* @__PURE__ */ i("option", { value: "light" }, "Light"), /* @__PURE__ */ i("option", { value: "dark" }, "Dark"), /* @__PURE__ */ i("option", { value: "blue" }, "Blue")))), /* @__PURE__ */ i("div", { class: "message-controls" }, /* @__PURE__ */ i(
+      "input",
+      {
+        type: "text",
+        value: this.state.message,
+        onInput: this.handleMessageChange,
+        placeholder: "Enter a message..."
+      }
+    )), o.length > 0 && /* @__PURE__ */ i("div", { class: "history" }, /* @__PURE__ */ i("h4", null, "History (last 10):"), /* @__PURE__ */ i("div", { class: "history-list" }, o.slice(-10).map((s, r) => /* @__PURE__ */ i("span", { key: r, class: "history-item" }, s))), /* @__PURE__ */ i("button", { class: "btn btn-sm", onClick: this.clearHistory }, "Clear History")), /* @__PURE__ */ i("div", { class: "debug-info" }, /* @__PURE__ */ i("details", null, /* @__PURE__ */ i("summary", null, "Debug Info"), /* @__PURE__ */ i("pre", null, JSON.stringify(
+      {
+        state: this.state,
+        theme: this.getTheme(),
+        historyLength: this.getHistory().length,
+        stateSnapshot: this.getStateSnapshot()
+      },
+      null,
+      2
+    )))));
+  }
+  startAutoIncrement() {
+    const t = setInterval(() => {
+      if (!this.state.isRunning) {
+        clearInterval(t);
+        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]);
+  }
+  onConnected() {
+    z.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) {
+  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]);
+    }), 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())
+    ));
+  }
+  getThemeIcon() {
+    const o = document.documentElement.classList.contains("dark");
+    return this.currentTheme === "auto" ? o ? "🌙" : "☀️" : this.currentTheme === "light" ? "☀️" : "🌙";
+  }
+  getThemeLabel() {
+    return {
+      light: "浅色",
+      dark: "深色",
+      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();
+  }
+  checkSystemTheme() {
+    const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    document.documentElement.className = t ? "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" : "");
+    });
+  }
+}
+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) {
+  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");
+  }
+  render() {
+    const t = this.getAttribute("size") || "24", o = this.getAttribute("color") || "currentColor", s = this.getAttribute("name") || "star", r = {
+      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",
+      close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+      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 })
+    );
+  }
+  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) {
+  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", () => {
+      if (this.animationId) return;
+      const t = () => {
+        this.rotationAngle += 2, this.rotationAngle >= 360 && (this.rotationAngle = 0), this.rerender(), this.animationId = requestAnimationFrame(t);
+      };
+      this.animationId = requestAnimationFrame(t);
+    }), _(this, "stopAnimation", () => {
+      this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null);
+    }), $.info("SvgDemo component initialized");
+  }
+  render() {
+    return /* @__PURE__ */ i("div", { style: "padding: 20px; background: #f5f5f5; border-radius: 8px; margin: 10px 0;" }, /* @__PURE__ */ i("h3", { style: "margin-top: 0; color: #333;" }, "SVG Showcase"), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Basic Shapes"), /* @__PURE__ */ i(
+      "svg",
+      {
+        width: "300",
+        height: "100",
+        style: "border: 1px solid #ddd; background: white;"
+      },
+      /* @__PURE__ */ i(
+        "circle",
+        {
+          cx: "50",
+          cy: "50",
+          r: "30",
+          fill: "#e74c3c",
+          stroke: "#c0392b",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "rect",
+        {
+          x: "100",
+          y: "20",
+          width: "60",
+          height: "60",
+          fill: "#3498db",
+          stroke: "#2980b9",
+          strokeWidth: "2",
+          rx: "5"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "polygon",
+        {
+          points: "200,20 230,80 170,80",
+          fill: "#2ecc71",
+          stroke: "#27ae60",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ i(
+        "line",
+        {
+          x1: "250",
+          y1: "20",
+          x2: "290",
+          y2: "80",
+          stroke: "#9b59b6",
+          strokeWidth: "3",
+          strokeLinecap: "round"
+        }
+      )
+    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Gradients & Effects"), /* @__PURE__ */ i(
+      "svg",
+      {
+        width: "300",
+        height: "100",
+        style: "border: 1px solid #ddd; background: white;"
+      },
+      /* @__PURE__ */ i("defs", null, /* @__PURE__ */ i("linearGradient", { id: "blueGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#3498db" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#9b59b6" })), /* @__PURE__ */ i("radialGradient", { id: "redGradient", cx: "50%", cy: "50%", r: "50%" }, /* @__PURE__ */ i("stop", { offset: "0%", stopColor: "#e74c3c" }), /* @__PURE__ */ i("stop", { offset: "100%", stopColor: "#c0392b" }))),
+      /* @__PURE__ */ i(
+        "rect",
+        {
+          x: "20",
+          y: "20",
+          width: "120",
+          height: "60",
+          fill: "url(#blueGradient)",
+          rx: "10"
+        }
+      ),
+      /* @__PURE__ */ i("circle", { cx: "200", cy: "50", r: "35", fill: "url(#redGradient)" })
+    )), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Animation"), /* @__PURE__ */ i(
+      "svg",
+      {
+        width: "300",
+        height: "100",
+        style: "border: 1px solid #ddd; background: white;"
+      },
+      /* @__PURE__ */ i("g", { transform: `translate(150, 50) rotate(${this.rotationAngle})` }, /* @__PURE__ */ i(
+        "polygon",
+        {
+          points: "-30,0 0,-40 30,0 0,40",
+          fill: "#f39c12",
+          stroke: "#e67e22",
+          strokeWidth: "2"
+        }
+      ), /* @__PURE__ */ i("circle", { cx: "0", cy: "0", r: "8", fill: "#2c3e50" }))
+    ), /* @__PURE__ */ i("div", { style: "margin-top: 10px;" }, /* @__PURE__ */ i(
+      "button",
+      {
+        onClick: this.startAnimation,
+        style: "margin-right: 10px; padding: 5px 10px;"
+      },
+      "Start Animation"
+    ), /* @__PURE__ */ i("button", { onClick: this.stopAnimation, style: "padding: 5px 10px;" }, "Stop Animation"))), /* @__PURE__ */ i("div", { style: "margin-bottom: 20px;" }, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Interactive Chart"), this.renderChart()), /* @__PURE__ */ i("div", null, /* @__PURE__ */ i("h4", { style: "margin: 10px 0; color: #666;" }, "Icon Components"), /* @__PURE__ */ i("div", { style: "display: flex; gap: 15px; align-items: center;" }, /* @__PURE__ */ i("svg-icon", { name: "star", size: "32", color: "#f39c12" }), /* @__PURE__ */ i("svg-icon", { name: "heart", size: "32", color: "#e74c3c" }), /* @__PURE__ */ i("svg-icon", { name: "check", size: "32", color: "#27ae60" }), /* @__PURE__ */ i("svg-icon", { name: "github", size: "32", color: "#333" }), /* @__PURE__ */ i("svg-icon", { name: "play", size: "32", color: "#3498db" }), /* @__PURE__ */ i("svg-icon", { name: "settings", size: "32", color: "#9b59b6" }))));
+  }
+  renderChart() {
+    const t = [30, 80, 45, 60, 20, 90, 55], o = Math.max(...t), s = 30, r = 40, n = 120, a = t.length * r + 40;
+    return /* @__PURE__ */ i(
+      "svg",
+      {
+        width: a,
+        height: n + 40,
+        style: "border: 1px solid #ddd; background: white;"
+      },
+      t.map((h, u) => {
+        const l = h / o * n, p = u * r + 20, m = n - l + 20;
+        return /* @__PURE__ */ i("g", { key: u }, /* @__PURE__ */ i(
+          "rect",
+          {
+            x: p,
+            y: m,
+            width: s,
+            height: l,
+            fill: "#3498db",
+            stroke: "#2980b9",
+            strokeWidth: "1",
+            onMouseEnter: (g) => this.showTooltip(g, h),
+            onMouseLeave: this.hideTooltip,
+            style: "cursor: pointer; transition: fill 0.2s;"
+          }
+        ), /* @__PURE__ */ i(
+          "text",
+          {
+            x: p + s / 2,
+            y: n + 35,
+            textAnchor: "middle",
+            fontSize: "12",
+            fill: "#666"
+          },
+          u + 1
+        ));
+      })
+    );
+  }
+  onConnected() {
+    $.info("SvgDemo connected to DOM");
+  }
+  onDisconnected() {
+    $.info("SvgDemo disconnected from DOM"), this.stopAnimation();
+  }
+}
+V = bo(Gt);
+M = _o(V, 0, "SvgDemo", Wt, M);
+xo(V, 1, M);
+var yo = Object.create, Z = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Yt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Xt = (e) => {
+  throw TypeError(e);
+}, qt = (e, t, o) => t in e ? Z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, Co = (e, t) => Z(e, "name", { value: t, configurable: !0 }), wo = (e) => [, , , yo((e == null ? void 0 : e[Yt("metadata")]) ?? null)], $o = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Jt = (e) => e !== void 0 && typeof e != "function" ? Xt("Function expected") : e, So = (e, t, o, s, r) => ({ kind: $o[e], name: t, metadata: s, addInitializer: (n) => o._ ? Xt("Already initialized") : r.push(Jt(n || null)) }), zo = (e, t) => qt(t, Yt("metadata"), e[3]), Ao = (e, t, o, s) => {
+  for (var r = 0, n = e[t >> 1], a = n && n.length; r < a; r++) n[r].call(o);
+  return s;
+}, Eo = (e, t, o, s, r, n) => {
+  var a, h, u, l = t & 7, p = !1, m = 0, g = e[m] || (e[m] = []), c = l && (r = r.prototype, l < 5 && (l > 3 || !p) && ko(r, o));
+  Co(r, o);
+  for (var d = s.length - 1; d >= 0; d--)
+    u = So(l, o, h = {}, e[3], g), a = (0, s[d])(r, u), h._ = 1, Jt(a) && (r = a);
+  return zo(e, r), c && Z(r, o, c), p ? l ^ 4 ? n : c : r;
+}, P = (e, t, o) => qt(e, typeof t != "symbol" ? t + "" : t, o), Kt, tt, Ut;
+const Po = C("SimpleReactiveDemo");
+Kt = [x({ tagName: "simple-reactive-demo" })];
+class R extends (Ut = ot) {
+  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");
+  }
+  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!"));
+  }
+}
+tt = wo(Ut);
+R = Eo(tt, 0, "SimpleReactiveDemo", Kt, R);
+Ao(tt, 1, R);
+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
+};