wox-gui 0.1.1

package/dist/wox-gui.js

@@ -0,0 +1,3551 @@
+var at = Object.defineProperty;
+var lt = (d, p, t) => p in d ? at(d, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[p] = t;
+var n = (d, p, t) => lt(d, typeof p != "symbol" ? p + "" : p, t);
+const dt = `
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :host { display: inline-block; font-family: var(--wox-font, 'Inter', sans-serif); color: var(--wox-text-primary, #eee); font-size: var(--wox-font-size-base, 12px); }
+    :host([hidden]) { display: none !important; }
+`, F = class F extends HTMLElement {
+  constructor() {
+    super();
+    /**
+     * Sets the shadow root innerHTML from CSS + HTML strings.
+     * @param {string} css  - Component-specific CSS
+     * @param {string} html - Component markup
+     */
+    n(this, "render", (t, e) => {
+      this.shadowRoot.innerHTML = `<style>${F.BASE_STYLES}${t}</style>${e}`;
+    });
+    /**
+     * Dispatches a composed, bubbling CustomEvent.
+     * @param {string} name   - Event name
+     * @param {*}      detail - Event payload
+     */
+    n(this, "emit", (t, e) => {
+      this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+    });
+    /**
+     * Query shortcut for a single element inside the shadow root.
+     * @param {string} sel - CSS selector
+     * @returns {Element|null}
+     */
+    n(this, "$", (t) => this.shadowRoot.querySelector(t));
+    /**
+     * Query shortcut for all matching elements inside the shadow root.
+     * @param {string} sel - CSS selector
+     * @returns {NodeList}
+     */
+    n(this, "$$", (t) => this.shadowRoot.querySelectorAll(t));
+    this.attachShadow({ mode: "open" });
+  }
+};
+/** Common CSS reset applied inside every component's Shadow DOM */
+n(F, "BASE_STYLES", dt);
+let v = F;
+const R = `
+    /* glow: neon glow effect using --wox-fx-color */
+    .glow {
+        border-color: var(--wox-fx-color);
+        color: var(--wox-fx-color);
+        background: color-mix(in srgb, var(--wox-fx-color), transparent 90%);
+        box-shadow: 0 0 20px color-mix(in srgb, var(--wox-fx-color), transparent 60%),
+                    0 0 40px color-mix(in srgb, var(--wox-fx-color), transparent 85%),
+                    inset 0 0 15px color-mix(in srgb, var(--wox-fx-color), transparent 90%);
+        animation: wox-glow-pulse 2s ease-in-out infinite alternate;
+    }
+    .glow svg, .glow .material-icons {
+        filter: drop-shadow(0 0 6px var(--wox-fx-color)); opacity: 1;
+    }
+    .glow span { text-shadow: 0 0 8px var(--wox-fx-color); }
+    @keyframes wox-glow-pulse {
+        from { box-shadow: 0 0 15px color-mix(in srgb, var(--wox-fx-color), transparent 65%), 0 0 30px color-mix(in srgb, var(--wox-fx-color), transparent 88%), inset 0 0 12px color-mix(in srgb, var(--wox-fx-color), transparent 92%); }
+        to   { box-shadow: 0 0 25px color-mix(in srgb, var(--wox-fx-color), transparent 50%), 0 0 50px color-mix(in srgb, var(--wox-fx-color), transparent 80%), inset 0 0 20px color-mix(in srgb, var(--wox-fx-color), transparent 88%); }
+    }
+
+    /* pulse: opacity pulse animation */
+    .pulse { animation: wox-pulse-fade 1.5s ease-in-out infinite alternate; }
+    .glow.pulse { animation: wox-glow-pulse 2s ease-in-out infinite alternate, wox-pulse-fade 1.5s ease-in-out infinite alternate; }
+    @keyframes wox-pulse-fade {
+        from { opacity: 1; }
+        to   { opacity: 0.4; }
+    }
+`, ct = `
+    :host { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
+    .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: var(--size, 18px); display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; color: inherit; }
+    ::slotted(svg) { width: var(--size, 18px); height: var(--size, 18px); }
+    slot { display: inline-flex; align-items: center; justify-content: center; }
+    .fx-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wox-radius-sm, 3px); padding: 4px; }
+`;
+class pt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("name"), e = this.getAttribute("size") || "18", o = this.getAttribute("color") || "", i = this.hasAttribute("glow"), s = this.hasAttribute("pulse"), r = i || s, a = t ? `<span class="material-icons" style="--size:${e}px">${t}</span>` : "<slot></slot>", l = r ? `<span class="fx-wrap${i ? " glow" : ""}${s ? " pulse" : ""}" style="--wox-fx-color:${o};color:${o}">${a}</span>` : a;
+      this.render(`${ct} ${R} :host { --size: ${e}px; }`, l);
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(pt, "observedAttributes", ["name", "size", "color", "glow", "pulse"]);
+const ht = `
+    :host { display: block; flex-shrink: 0; }
+    :host([direction="v"]) { display: inline-block; }
+    .sep { background: var(--wox-border, #333); }
+    .h { width: 100%; height: 1px; margin: var(--spacing, 0) 0; }
+    .v { height: 100%; width: 1px; margin: 0 var(--spacing, 0); display: inline-block; vertical-align: middle; min-height: 16px; }
+`;
+class ut extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("direction") || "h", e = this.getAttribute("spacing") || "0";
+      this.render(
+        `${ht} :host { --spacing: ${e}; }`,
+        `<div class="sep ${t}"></div>`
+      );
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(ut, "observedAttributes", ["direction", "spacing"]);
+const xt = `
+    :host { display: inline-flex; align-items: center; justify-content: center; }
+    .badge { display: inline-flex; align-items: center; justify-content: center; }
+    .dot { width: 8px; height: 8px; border-radius: var(--wox-radius-round, 50%); background: var(--color, var(--wox-accent, #00e5ff)); }
+    .diamond { width: 8px; height: 8px; background: var(--color, var(--wox-accent, #00e5ff)); transform: rotate(45deg); box-shadow: 0 0 10px color-mix(in srgb, var(--color, var(--wox-accent, #00e5ff)), transparent 50%); }
+    .text { background: color-mix(in srgb, var(--color, var(--wox-accent, #00e5ff)), transparent 85%); color: var(--color, var(--wox-accent, #00e5ff)); padding: 3px 8px; border-radius: var(--wox-radius-sm, 3px); font-weight: 600; font-size: var(--wox-font-size-sm, 10px); text-transform: uppercase; letter-spacing: 0.5px; }
+`;
+class gt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("variant") || "dot", e = this.getAttribute("text") || "", o = this.getAttribute("color") || "", i = o ? `--color: ${o};` : "";
+      let s = "";
+      t === "dot" ? s = `<span class="badge dot" style="${i}"></span>` : t === "diamond" ? s = `<span class="badge diamond" style="${i}"></span>` : s = `<span class="badge text" style="${i}">${e}</span>`, this.render(xt, s);
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(gt, "observedAttributes", ["variant", "text", "color"]);
+const bt = `
+    :host { display: inline-block; }
+    button {
+        display: flex; align-items: center; justify-content: center; gap: 6px;
+        background: transparent; border: 1px solid transparent; color: var(--wox-text-secondary, #999);
+        cursor: pointer; font-family: var(--wox-font, sans-serif); font-size: var(--wox-font-size-base, 12px);
+        transition: all var(--wox-transition-fast, 0.12s); border-radius: var(--wox-radius-sm, 3px);
+        padding: 0; margin: 0; line-height: 1; user-select: none;
+    }
+    button:hover { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-text-hi, #fff); }
+    button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+    button.active { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-accent, #00e5ff); border-color: var(--wox-border-light, #444); }
+
+    /* icon variant */
+    button.v-icon { width: 34px; height: 32px; border-radius: var(--wox-radius-sm, 3px); }
+    button.v-icon .material-icons { font-size: 18px; }
+
+    /* text variant */
+    button.v-text { padding: 6px 12px; border-radius: var(--wox-radius-md, 6px); font-size: var(--wox-font-size-base, 12px); }
+
+    /* tile variant */
+    button.v-tile {
+        flex-direction: column; gap: 6px; background: var(--wox-bg-toolbar, #1e1e22);
+        border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-xl, 10px);
+        padding: 12px 10px; min-width: 68px; font-size: var(--wox-font-size-sm, 10px);
+        font-weight: 500; text-transform: uppercase;
+        transition: all var(--wox-transition-smooth, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
+        position: relative; overflow: hidden;
+    }
+    button.v-tile:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: #555; color: var(--wox-text-primary, #eee); transform: translateY(-1px); }
+    button.v-tile:hover svg, button.v-tile:hover .material-icons { transform: scale(1.05); opacity: 1; }
+    button.v-tile svg, button.v-tile .material-icons { display: block; width: 32px; height: 32px; transition: transform 0.2s; opacity: 0.8; font-size: 28px; }
+    button.v-tile.delete:hover { border-color: var(--wox-danger, #f72585); color: var(--wox-danger, #f72585); background: rgba(247, 37, 133, 0.05); }
+
+    /* tile with custom color accent */
+    button.v-tile[data-color] { --wox-fx-color: var(--wox-text-secondary, #999); }
+    button.v-tile[data-color]:hover {
+        background: color-mix(in srgb, var(--wox-fx-color), transparent 92%);
+        border-color: var(--wox-fx-color); color: var(--wox-fx-color);
+        box-shadow: 0 0 15px color-mix(in srgb, var(--wox-fx-color), transparent 80%);
+    }
+    button.v-tile[data-color]:hover svg { filter: drop-shadow(0 0 4px var(--wox-fx-color)); }
+
+    /* dash variant */
+    button.v-dash {
+        width: 42px; height: 26px; background: #1c1c21;
+        border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-lg, 8px);
+        transition: all 0.2s;
+    }
+    button.v-dash:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: #555; transform: translateY(-1px); }
+    button.v-dash.active { border-color: var(--wox-accent, #00e5ff); box-shadow: var(--wox-shadow-accent, 0 0 10px rgba(0, 229, 255, 0.3)); }
+    .dash-line { width: 16px; height: 3px; background: #666; border-radius: 1px; }
+    button.v-dash.active .dash-line { background: var(--wox-accent, #00e5ff); }
+    .dash-line.dotted { background: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 4px 100%; color: #666; }
+    button.v-dash.active .dash-line.dotted { color: var(--wox-accent, #00e5ff); }
+    .dash-line.dashed { background: linear-gradient(to right, currentColor 6px, transparent 6px); background-size: 10px 100%; color: #666; }
+    button.v-dash.active .dash-line.dashed { color: var(--wox-accent, #00e5ff); }
+    .dash-line.longdash { background: linear-gradient(to right, currentColor 12px, transparent 4px); background-size: 16px 100%; color: #666; }
+    button.v-dash.active .dash-line.longdash { color: var(--wox-accent, #00e5ff); }
+    .dash-line.dotdash { background: linear-gradient(to right, currentColor 8px, transparent 4px, currentColor 2px, transparent 4px); background-size: 18px 100%; color: #666; }
+    button.v-dash.active .dash-line.dotdash { color: var(--wox-accent, #00e5ff); }
+    .dash-line.zigzag { background: repeating-linear-gradient(45deg, currentColor, currentColor 2px, transparent 2px, transparent 4px); color: #666; }
+    button.v-dash.active .dash-line.zigzag { color: var(--wox-accent, #00e5ff); }
+
+    .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
+`;
+class ft extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("variant") || "icon", e = this.getAttribute("icon") || "", o = this.getAttribute("label") || "", i = this.hasAttribute("active"), s = this.hasAttribute("disabled"), r = this.getAttribute("dash") || "solid", a = this.getAttribute("color") || "", l = this.hasAttribute("glow"), c = this.hasAttribute("pulse"), x = [`v-${t}`, i ? "active" : "", l ? "glow" : "", c ? "pulse" : ""].filter(Boolean).join(" ");
+      let h = "";
+      t === "icon" ? h = e ? `<span class="material-icons">${e}</span>` : "<slot></slot>" : t === "text" ? h = (e ? `<span class="material-icons" style="font-size:14px">${e}</span>` : "") + (o || "<slot></slot>") : t === "tile" ? h = (e ? `<span class="material-icons">${e}</span>` : '<slot name="icon"></slot>') + `<span>${o}</span>` : t === "dash" && (h = `<div class="dash-line${r === "solid" ? "" : ` ${r}`}"></div>`);
+      const u = a ? ` data-color style="--wox-fx-color:${a}"` : "";
+      this.render(
+        bt + R,
+        `<button class="${x}"${u} ${s ? "disabled" : ""}>${h}</button>`
+      ), this.$("button").addEventListener("click", (g) => {
+        s || this.emit("wox-click", { originalEvent: g });
+      });
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(ft, "observedAttributes", ["variant", "icon", "label", "active", "disabled", "color", "size", "dash", "glow", "pulse"]);
+const vt = `
+    :host { display: inline-block; }
+    .wrapper { display: flex; flex-direction: column; gap: 3px; }
+    label {
+        font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999);
+        display: flex; justify-content: space-between; cursor: default; user-select: none;
+    }
+    label.scrub { cursor: ew-resize; }
+    .unit { color: var(--wox-text-secondary, #999); font-size: var(--wox-font-size-sm, 10px); }
+    .input-wrap { position: relative; display: flex; align-items: center; }
+    input {
+        background: var(--wox-bg-input, #1a1a1d); border: 1px solid var(--wox-border, #333);
+        color: var(--wox-text-primary, #eee); padding: 6px 8px; border-radius: var(--wox-radius-md, 6px);
+        font-size: var(--wox-font-size-md, 11px); font-family: var(--wox-font, sans-serif);
+        width: 100%; transition: all var(--wox-transition-normal, 0.2s);
+        box-shadow: var(--wox-shadow-input, inset 0 1px 3px rgba(0, 0, 0, 0.2));
+    }
+    input[type="number"] { text-align: right; }
+    input:focus { outline: none; border-color: var(--wox-accent, #00e5ff); background: #222; box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.1), var(--wox-shadow-input, inset 0 1px 3px rgba(0, 0, 0, 0.2)); }
+    input:disabled { opacity: 0.4; cursor: not-allowed; }
+    input.has-unit { padding-right: 28px; }
+    .suffix { position: absolute; right: 8px; font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999); pointer-events: none; }
+`;
+class wt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("type") || "text", e = this.getAttribute("value") || "", o = this.getAttribute("unit") || "", i = this.getAttribute("label") || "", s = this.getAttribute("min"), r = this.getAttribute("max"), a = this.getAttribute("step"), l = this.getAttribute("placeholder") || "", c = this.hasAttribute("disabled"), x = t === "number", h = x ? `${s !== null ? ` min="${s}"` : ""}${r !== null ? ` max="${r}"` : ""}${a !== null ? ` step="${a}"` : ""}` : "";
+      this.render(vt, `
+            <div class="wrapper">
+                ${i ? `<label class="${x ? "scrub" : ""}">${i}${o ? `<span class="unit">${o}</span>` : ""}</label>` : ""}
+                <div class="input-wrap">
+                    <input type="${x ? "number" : "text"}" value="${e}" placeholder="${l}" ${h} ${c ? "disabled" : ""} class="${o && !i ? "has-unit" : ""}">
+                    ${o && !i ? `<span class="suffix">${o}</span>` : ""}
+                </div>
+            </div>
+        `);
+      const u = this.$("input");
+      if (u.addEventListener("input", () => {
+        const g = x ? parseFloat(u.value) : u.value;
+        this.emit("wox-input", { value: g });
+      }), u.addEventListener("change", () => {
+        const g = x ? parseFloat(u.value) : u.value;
+        this.emit("wox-change", { value: g });
+      }), u.addEventListener("keydown", (g) => {
+        g.key === "Enter" && u.blur();
+      }), x && i) {
+        const g = this.$("label");
+        let b = 0, f = 0;
+        const w = (S) => {
+          const M = S.clientX - b, _ = parseFloat(a) || 1;
+          let k = f + Math.round(M / 2) * _;
+          s !== null && (k = Math.max(parseFloat(s), k)), r !== null && (k = Math.min(parseFloat(r), k)), u.value = k, this.emit("wox-input", { value: k });
+        }, y = () => {
+          document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", y), this.emit("wox-change", { value: parseFloat(u.value) });
+        };
+        g.addEventListener("mousedown", (S) => {
+          c || (b = S.clientX, f = parseFloat(u.value) || 0, document.addEventListener("mousemove", w), document.addEventListener("mouseup", y), S.preventDefault());
+        });
+      }
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t) {
+    if (this.isConnected) {
+      if (t === "value") {
+        const e = this.$("input");
+        e && document.activeElement !== this && (e.value = this.getAttribute("value") || "");
+        return;
+      }
+      this._render();
+    }
+  }
+  get value() {
+    const t = this.$("input");
+    return t ? t.value : this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t);
+    const e = this.$("input");
+    e && (e.value = t);
+  }
+}
+n(wt, "observedAttributes", ["type", "value", "unit", "label", "min", "max", "step", "placeholder", "disabled"]);
+const mt = `
+    :host {
+        display: inline-block;
+        position: relative;
+        min-width: 200px;
+        font-family: var(--wox-font, 'Inter', sans-serif);
+        font-size: var(--wox-font-size-base, 12px);
+        outline: none;
+    }
+
+    :host(:focus) .trigger,
+    :host(:focus-within) .trigger {
+        border-color: var(--wox-accent, #00e5ff);
+        box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.1);
+    }
+
+    :host([disabled]) {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+        background: var(--wox-bg-input, #1a1a1d);
+        border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-md, 6px);
+        padding: 6px 8px;
+        cursor: pointer;
+        min-height: 30px;
+        box-sizing: border-box;
+        color: var(--wox-text-primary, #eee);
+        user-select: none;
+        transition: border-color var(--wox-transition-fast, 0.12s);
+    }
+
+    .trigger:focus { outline: none; }
+
+    .selected-content {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-wrap: wrap;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .placeholder {
+        color: var(--wox-text-secondary, #999);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .single-value {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .single-img {
+        width: 18px;
+        height: 18px;
+        border-radius: var(--wox-radius-round, 50%);
+        object-fit: cover;
+        flex-shrink: 0;
+    }
+
+    .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 1px 6px;
+        background: var(--wox-bg-hover, #2a2a2e);
+        border: 1px solid var(--wox-border-light, #444);
+        border-radius: var(--wox-radius-sm, 3px);
+        font-size: var(--wox-font-size-sm, 10px);
+        color: var(--wox-text-primary, #eee);
+        user-select: none;
+    }
+
+    .tag-img {
+        width: 14px;
+        height: 14px;
+        border-radius: var(--wox-radius-round, 50%);
+        object-fit: cover;
+        flex-shrink: 0;
+    }
+
+    .remove-tag {
+        cursor: pointer;
+        color: var(--wox-text-secondary, #999);
+        font-size: 12px;
+        line-height: 1;
+        padding: 0 1px;
+    }
+
+    .remove-tag:hover { color: var(--wox-danger, #f72585); }
+
+    .arrow {
+        width: 0;
+        height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 5px solid var(--wox-text-secondary, #999);
+        flex-shrink: 0;
+        transition: transform var(--wox-transition-fast, 0.12s);
+    }
+
+    .arrow.open { transform: rotate(180deg); }
+
+    .dropdown {
+        position: fixed;
+        z-index: var(--wox-z-dropdown, 1000);
+        background: var(--wox-bg-panel, #17171a);
+        border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-md, 6px);
+        box-shadow: var(--wox-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.4));
+        max-height: 200px;
+        overflow-y: auto;
+        scroll-behavior: smooth;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 6px 10px;
+        background: var(--wox-bg-input, #1a1a1d);
+        border: none;
+        border-bottom: 1px solid var(--wox-border, #333);
+        color: var(--wox-text-primary, #eee);
+        font-size: var(--wox-font-size-base, 12px);
+        font-family: var(--wox-font, sans-serif);
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    .option {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 10px;
+        cursor: pointer;
+        color: var(--wox-text-primary, #eee);
+        font-size: var(--wox-font-size-base, 12px);
+        transition: background var(--wox-transition-fast, 0.12s);
+        user-select: none;
+    }
+
+    .option:hover { background: var(--wox-bg-hover, #2a2a2e); }
+
+    .option.focused {
+        background: rgba(0, 229, 255, 0.1);
+        color: var(--wox-accent, #00e5ff);
+    }
+
+    .option.selected { color: var(--wox-accent, #00e5ff); }
+
+    .option-img {
+        width: 20px;
+        height: 20px;
+        border-radius: var(--wox-radius-round, 50%);
+        object-fit: cover;
+        flex-shrink: 0;
+    }
+
+    .no-options {
+        padding: 8px 10px;
+        color: var(--wox-text-secondary, #999);
+        font-style: italic;
+        font-size: var(--wox-font-size-base, 12px);
+    }
+`, $ = (d) => String(d).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+class _t extends v {
+  constructor() {
+    super(...arguments);
+    /** @type {boolean} */
+    n(this, "_isOpen", !1);
+    /** @type {boolean} */
+    n(this, "_openUpward", !1);
+    /** @type {Array<{value:string,label:string,image?:string}>} */
+    n(this, "_selectedOptions", []);
+    /** @type {Array<{value:string,label:string,image?:string}>} */
+    n(this, "_filteredOptions", []);
+    /** @type {number} */
+    n(this, "_focusedIndex", -1);
+    /** @type {string} */
+    n(this, "_searchValue", "");
+    /** @type {boolean} */
+    n(this, "_keyboardNavigating", !1);
+    /** @type {number|undefined} */
+    n(this, "_keyboardTimer");
+    /** @type {Array<{value:string,label:string,image?:string}>|null} */
+    n(this, "_parsedOptions", null);
+    // ── Private ────────────────────────────────────────────────────────────────
+    /** @private */
+    n(this, "_handleSearch", (t) => {
+      this._searchValue = t, this._filteredOptions = this.options.filter(
+        (e) => e.label.toLowerCase().includes(t.toLowerCase())
+      ), this._focusedIndex = -1, this._render(), this.emit("wox-search", { query: t });
+    });
+    /** @private */
+    n(this, "_updateFocusedOption", () => {
+      const t = this.$$(".option");
+      t.forEach((e) => e.classList.remove("focused")), this._focusedIndex >= 0 && this._focusedIndex < t.length && t[this._focusedIndex].classList.add("focused"), this._scrollToFocused();
+    });
+    /** @private */
+    n(this, "_scrollToFocused", () => {
+      this._focusedIndex < 0 || requestAnimationFrame(() => {
+        const t = this.$(".dropdown"), e = this.$(".option.focused");
+        if (!t || !e) return;
+        const o = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+        i.top < o.top ? t.scrollTop -= o.top - i.top : i.bottom > o.bottom && (t.scrollTop += i.bottom - o.bottom);
+      });
+    });
+    /** @private */
+    n(this, "_calculateDropdownPosition", () => {
+      const t = this.$(".trigger");
+      if (!t) return null;
+      const e = t.getBoundingClientRect(), o = window.innerHeight, i = window.innerWidth, s = 200, r = 2, a = 10, l = o - e.bottom, c = e.top, x = e.width, h = Math.max(0, Math.min(e.left, i - x));
+      return this._openUpward ? {
+        bottom: o - e.top + r,
+        left: h,
+        width: x,
+        maxHeight: Math.max(100, Math.min(s, c - a))
+      } : {
+        top: e.bottom + r,
+        left: h,
+        width: x,
+        maxHeight: Math.max(100, Math.min(s, l - a))
+      };
+    });
+    /** @private */
+    n(this, "_updateDropdownPosition", () => {
+      requestAnimationFrame(() => {
+        const t = this.$(".dropdown");
+        if (!t) return;
+        const e = this._calculateDropdownPosition();
+        e && (t.style.top = "", t.style.bottom = "", e.top !== void 0 && (t.style.top = `${e.top}px`), e.bottom !== void 0 && (t.style.bottom = `${e.bottom}px`), t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.maxHeight = `${e.maxHeight}px`);
+      });
+    });
+    /** @private */
+    n(this, "_handleKeydown", (t) => {
+      if (!this.disabled)
+        switch (t.key) {
+          case "ArrowDown":
+            if (t.preventDefault(), this._keyboardNavigating = !0, clearTimeout(this._keyboardTimer), this._keyboardTimer = window.setTimeout(() => {
+              this._keyboardNavigating = !1;
+            }, 100), !this._isOpen)
+              this.open();
+            else {
+              const e = this.$(".search-input");
+              if (this.searchable && e === this.shadowRoot.activeElement) {
+                this._focusedIndex = 0, e.blur(), this.focus(), this._updateFocusedOption();
+                return;
+              }
+              this._focusedIndex = Math.min(this._focusedIndex + 1, this._filteredOptions.length - 1), this._updateFocusedOption();
+            }
+            break;
+          case "ArrowUp":
+            if (t.preventDefault(), this._keyboardNavigating = !0, clearTimeout(this._keyboardTimer), this._keyboardTimer = window.setTimeout(() => {
+              this._keyboardNavigating = !1;
+            }, 100), this._isOpen) {
+              if (this._focusedIndex === 0 && this.searchable) {
+                this._focusedIndex = -1, this._updateFocusedOption(), requestAnimationFrame(() => {
+                  const o = this.$(".search-input");
+                  o && (o.focus(), o.setSelectionRange(o.value.length, o.value.length));
+                });
+                return;
+              }
+              const e = this.$(".search-input");
+              if (this.searchable && e === this.shadowRoot.activeElement) return;
+              this._focusedIndex = Math.max(this._focusedIndex - 1, -1), this._updateFocusedOption();
+            }
+            break;
+          case "Enter":
+            t.preventDefault(), this._isOpen && this._focusedIndex >= 0 && this._focusedIndex < this._filteredOptions.length ? this.selectOption(this._filteredOptions[this._focusedIndex].value) : this._isOpen || this.open();
+            break;
+          case "Escape":
+            t.preventDefault(), this.close();
+            break;
+          case "Tab":
+            this.close();
+            break;
+        }
+    });
+    /** @private */
+    n(this, "_render", () => {
+      this._filteredOptions.length === 0 && this.options.length > 0 && (this._filteredOptions = [...this.options]);
+      const t = this.$(".search-input") === this.shadowRoot.activeElement;
+      let e = "";
+      if (this.multiple && this._selectedOptions.length > 0)
+        e = this._selectedOptions.map((i) => `
+                <span class="tag">
+                    ${i.image ? `<img src="${$(i.image)}" class="tag-img" alt="">` : ""}
+                    ${$(i.label)}
+                    <span class="remove-tag" data-value="${$(i.value)}">×</span>
+                </span>
+            `).join("");
+      else if (this._selectedOptions.length > 0) {
+        const i = this._selectedOptions[0];
+        e = `<span class="single-value">
+                ${i.image ? `<img src="${$(i.image)}" class="single-img" alt="">` : ""}
+                <span>${$(i.label)}</span>
+            </span>`;
+      } else
+        e = `<span class="placeholder">${$(this.placeholder)}</span>`;
+      let o = "";
+      if (this._isOpen) {
+        const i = this.searchable ? `<input type="text" class="search-input" placeholder="Search..." value="${$(this._searchValue)}">` : "", s = this._filteredOptions.length > 0 ? this._filteredOptions.map((r, a) => {
+          const l = this._selectedOptions.some((x) => x.value === r.value), c = a === this._focusedIndex;
+          return `<div
+                        class="option${l ? " selected" : ""}${c ? " focused" : ""}"
+                        data-value="${$(r.value)}"
+                    >
+                        ${r.image ? `<img src="${$(r.image)}" class="option-img" alt="">` : ""}
+                        <span>${$(r.label)}</span>
+                    </div>`;
+        }).join("") : '<div class="no-options">No options found</div>';
+        o = `<div class="dropdown">${i}${s}</div>`;
+      }
+      if (this.render(mt, `
+            <div class="trigger" tabindex="-1">
+                <div class="selected-content">${e}</div>
+                <div class="arrow${this._isOpen ? " open" : ""}"></div>
+            </div>
+            ${o}
+        `), this._isOpen) {
+        const i = this.$(".dropdown");
+        i && i.addEventListener("mouseleave", () => {
+          var s;
+          this._keyboardNavigating || ((s = this.$(".option.focused")) == null || s.classList.remove("focused"), this._focusedIndex = -1);
+        });
+      }
+      t && this.searchable && this._isOpen && requestAnimationFrame(() => {
+        const i = this.$(".search-input");
+        i && (i.focus(), i.setSelectionRange(i.value.length, i.value.length));
+      }), this._isOpen && this._updateDropdownPosition();
+    });
+  }
+  connectedCallback() {
+    this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this._boundDocumentClick = (t) => {
+      this.contains(t.target) || this.close();
+    }, this._boundWindowResize = () => {
+      this._isOpen && this._updateDropdownPosition();
+    }, this._boundWindowScroll = () => {
+      this._isOpen && this._updateDropdownPosition();
+    }, this._boundShadowClick = (t) => {
+      t.stopPropagation();
+      const e = t.target.closest(".remove-tag");
+      if (e) {
+        this.deselectOption(e.dataset.value);
+        return;
+      }
+      const o = t.target.closest(".option");
+      if (o) {
+        this.selectOption(o.dataset.value);
+        return;
+      }
+      t.target.closest(".trigger") && this.toggle();
+    }, this._boundShadowMouseover = (t) => {
+      var s;
+      if (this._keyboardNavigating) return;
+      const e = t.target.closest(".option");
+      if (!e) return;
+      const i = Array.from(this.$$(".option")).indexOf(e);
+      this._focusedIndex !== i && ((s = this.$(".option.focused")) == null || s.classList.remove("focused"), e.classList.add("focused"), this._focusedIndex = i);
+    }, this._boundShadowInput = (t) => {
+      t.target.classList.contains("search-input") && this._handleSearch(t.target.value);
+    }, document.addEventListener("click", this._boundDocumentClick), window.addEventListener("resize", this._boundWindowResize), window.addEventListener("scroll", this._boundWindowScroll, !0), this.addEventListener("keydown", this._handleKeydown), this.shadowRoot.addEventListener("click", this._boundShadowClick), this.shadowRoot.addEventListener("mouseover", this._boundShadowMouseover), this.shadowRoot.addEventListener("input", this._boundShadowInput), this._render();
+  }
+  disconnectedCallback() {
+    clearTimeout(this._keyboardTimer), document.removeEventListener("click", this._boundDocumentClick), window.removeEventListener("resize", this._boundWindowResize), window.removeEventListener("scroll", this._boundWindowScroll, !0), this.removeEventListener("keydown", this._handleKeydown), this.shadowRoot.removeEventListener("click", this._boundShadowClick), this.shadowRoot.removeEventListener("mouseover", this._boundShadowMouseover), this.shadowRoot.removeEventListener("input", this._boundShadowInput);
+  }
+  attributeChangedCallback(t, e, o) {
+    if (!(e === o || !this.isConnected)) {
+      if (t === "options") {
+        this._parsedOptions = null;
+        const i = this.options;
+        this._filteredOptions = [...i], this._selectedOptions = this._selectedOptions.filter(
+          (s) => i.some((r) => r.value === s.value)
+        );
+      } else if (t === "value" && o !== null) {
+        const i = this.options.find((s) => s.value === o);
+        this._selectedOptions = i ? [i] : [];
+      }
+      this._render();
+    }
+  }
+  // ── Getters / setters ──────────────────────────────────────────────────────
+  get multiple() {
+    return this.hasAttribute("multiple");
+  }
+  set multiple(t) {
+    t ? this.setAttribute("multiple", "") : this.removeAttribute("multiple");
+  }
+  get searchable() {
+    return this.hasAttribute("searchable");
+  }
+  set searchable(t) {
+    t ? this.setAttribute("searchable", "") : this.removeAttribute("searchable");
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") || "Select an option";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get value() {
+    return this.multiple ? this._selectedOptions.map((t) => t.value) : this._selectedOptions.length > 0 ? this._selectedOptions[0].value : "";
+  }
+  set value(t) {
+    if (this.multiple && Array.isArray(t))
+      this._selectedOptions = this.options.filter((e) => t.includes(e.value));
+    else {
+      const e = this.options.find((o) => o.value === t);
+      this._selectedOptions = e ? [e] : [];
+    }
+    this._render();
+  }
+  get options() {
+    if (this._parsedOptions !== null) return this._parsedOptions;
+    const t = this.getAttribute("options");
+    if (t)
+      try {
+        return this._parsedOptions = JSON.parse(t), this._parsedOptions;
+      } catch (e) {
+        return console.error("wox-select: invalid options JSON", e), [];
+      }
+    return [];
+  }
+  set options(t) {
+    this._parsedOptions = null, this.setAttribute("options", JSON.stringify(t));
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  /** Opens the dropdown */
+  open() {
+    if (this.disabled) return;
+    this._isOpen = !0, this._focusedIndex = -1, this._filteredOptions = [...this.options];
+    const t = this.$(".trigger");
+    if (t) {
+      const e = t.getBoundingClientRect(), o = window.innerHeight - e.bottom, i = e.top;
+      this._openUpward = o < 210 && i > o;
+    }
+    this._render(), this._updateDropdownPosition(), this.searchable && requestAnimationFrame(() => {
+      const e = this.$(".search-input");
+      e && e.focus();
+    }), this.emit("wox-open", null);
+  }
+  /** Closes the dropdown */
+  close() {
+    this._isOpen = !1, this._openUpward = !1, this._focusedIndex = -1, this._searchValue = "", this._filteredOptions = [...this.options];
+    const t = this.$(".dropdown");
+    t && (t.style.top = "", t.style.left = "", t.style.width = "", t.style.maxHeight = ""), this._render(), this.emit("wox-close", null);
+  }
+  /** Toggles the dropdown open/closed */
+  toggle() {
+    this._isOpen ? this.close() : this.open();
+  }
+  /**
+   * Selects an option by value
+   * @param {string} value
+   */
+  selectOption(t) {
+    const e = this.options.find((o) => o.value === t);
+    e && (this.multiple ? (this._selectedOptions.find((o) => o.value === t) || this._selectedOptions.push(e), this._render()) : (this._selectedOptions = [e], this.close()), this.emit("wox-change", { value: this.value }));
+  }
+  /**
+   * Deselects an option by value
+   * @param {string} value
+   */
+  deselectOption(t) {
+    this._selectedOptions = this._selectedOptions.filter((e) => e.value !== t), this._render(), this.emit("wox-change", { value: this.value });
+  }
+  /**
+   * Returns a copy of the currently selected options
+   * @returns {Array<{value:string,label:string,image?:string}>}
+   */
+  getSelectedOptions() {
+    return [...this._selectedOptions];
+  }
+  /**
+   * Replaces all options and clears the selection
+   * @param {Array<{value:string,label:string,image?:string}>} opts
+   */
+  setOptions(t) {
+    this._selectedOptions = [], this._filteredOptions = [...t], this._parsedOptions = null, this.setAttribute("options", JSON.stringify(t));
+  }
+}
+n(_t, "observedAttributes", ["multiple", "searchable", "placeholder", "disabled", "value", "options"]);
+const yt = `
+    :host { display: inline-block; width: 100%; }
+    .wrapper { display: flex; align-items: center; gap: var(--wox-space-lg, 12px); }
+    .label {
+        font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999);
+        font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; min-width: 50px;
+        user-select: none;
+    }
+    .track-wrap { flex: 1; position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; }
+    .track { width: 100%; height: 4px; background: var(--wox-border, #333); border-radius: 2px; position: relative; overflow: hidden; }
+    .fill { height: 100%; background: var(--wox-accent, #00e5ff); border-radius: 2px; }
+    .thumb {
+        position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
+        background: var(--wox-text-hi, #fff); border: 2px solid var(--wox-accent, #00e5ff);
+        transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        transition: box-shadow 0.15s; pointer-events: none;
+    }
+    .thumb.dragging { box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }
+    .value {
+        font-size: var(--wox-font-size-base, 12px); color: var(--wox-text-secondary, #999);
+        font-weight: 600; min-width: 35px; text-align: right; user-select: none;
+    }
+    .fill.custom-color { background: var(--wox-fx-color); }
+    .thumb.glow { width: 16px; height: 16px; }
+`;
+class kt extends v {
+  constructor() {
+    super();
+    /** @private — Reads config attrs (not value) */
+    n(this, "_getConfig", () => ({
+      min: parseFloat(this.getAttribute("min") ?? 0),
+      max: parseFloat(this.getAttribute("max") ?? 100),
+      step: parseFloat(this.getAttribute("step") ?? 1),
+      unit: this.getAttribute("unit") || ""
+    }));
+    /** @private — Format a numeric value for display */
+    n(this, "_formatVal", (t) => {
+      const { unit: e, step: o } = this._getConfig();
+      return e === "%" ? Math.round(t * 100) + "%" : o < 1 ? t.toFixed(2) : String(t);
+    });
+    /** @private — Update fill/thumb/value text without rebuilding DOM */
+    n(this, "_updateVisuals", () => {
+      const { min: t, max: e } = this._getConfig(), o = parseFloat(this.getAttribute("value") ?? t), i = (o - t) / (e - t) * 100, s = this.$(".fill"), r = this.$(".thumb"), a = this.$(".value");
+      s && (s.style.width = i + "%"), r && (r.style.left = i + "%"), a && (a.textContent = this._formatVal(o));
+    });
+    /** @private — Full DOM build (only on structural attr changes or first connect) */
+    n(this, "_build", () => {
+      const { min: t, max: e } = this._getConfig(), o = parseFloat(this.getAttribute("value") ?? t), i = this.getAttribute("label") || "", s = this.hasAttribute("show-value"), r = (o - t) / (e - t) * 100, a = this.getAttribute("color") || "", l = this.hasAttribute("glow"), c = this.hasAttribute("pulse"), x = [l ? "glow" : "", c ? "pulse" : ""].filter(Boolean).join(" "), h = a ? `--wox-fx-color:${a};border-color:${a}` : "", u = a ? " custom-color" : "";
+      this.render(yt + R, `
+            <div class="wrapper">
+                ${i ? `<span class="label">${i}</span>` : ""}
+                <div class="track-wrap">
+                    <div class="track"><div class="fill${u}" style="width:${r}%;${a ? "--wox-fx-color:" + a : ""}"></div></div>
+                    <div class="thumb ${x}" style="${h};left:${r}%"></div>
+                </div>
+                ${s ? `<span class="value">${this._formatVal(o)}</span>` : ""}
+            </div>
+        `), this._attachDrag();
+    });
+    /** @private — Wire up drag interaction on the track */
+    n(this, "_attachDrag", () => {
+      const { min: t, max: e, step: o, unit: i } = this._getConfig(), s = this.$(".track-wrap"), r = this.$(".fill"), a = this.$(".thumb"), l = this.$(".value"), c = (u) => {
+        const g = s.getBoundingClientRect();
+        let b = (u - g.left) / g.width;
+        b = Math.max(0, Math.min(1, b));
+        let f = t + b * (e - t);
+        f = Math.round(f / o) * o, f = Math.max(t, Math.min(e, f));
+        const w = (f - t) / (e - t) * 100;
+        return r.style.width = w + "%", a.style.left = w + "%", l && (i === "%" ? l.textContent = Math.round(f * 100) + "%" : l.textContent = o < 1 ? f.toFixed(2) : String(f)), f;
+      }, x = (u) => {
+        const g = c(u.clientX);
+        this.emit("wox-input", { value: g });
+      }, h = (u) => {
+        this._dragging = !1, a.classList.remove("dragging"), document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", h);
+        const g = c(u.clientX);
+        this.setAttribute("value", g), this.emit("wox-change", { value: g });
+      };
+      s.addEventListener("mousedown", (u) => {
+        this._dragging = !0, a.classList.add("dragging");
+        const g = c(u.clientX);
+        this.emit("wox-input", { value: g }), document.addEventListener("mousemove", x), document.addEventListener("mouseup", h), u.preventDefault();
+      });
+    });
+    this._dragging = !1;
+  }
+  connectedCallback() {
+    this._build();
+  }
+  attributeChangedCallback(t) {
+    this.isConnected && (this._dragging || (t === "value" ? this._updateVisuals() : this._build()));
+  }
+}
+n(kt, "observedAttributes", ["value", "min", "max", "step", "label", "unit", "show-value", "color", "glow", "pulse"]);
+const $t = `
+    :host { display: inline-block; }
+    .swatch {
+        width: var(--size, 24px); height: var(--size, 24px);
+        border-radius: var(--wox-radius-sm, 3px); cursor: pointer;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        box-shadow: var(--wox-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.3));
+        transition: all var(--wox-transition-fast, 0.12s);
+        position: relative; overflow: hidden;
+    }
+    .swatch:hover { transform: scale(1.1); border-color: var(--wox-accent, #00e5ff); }
+    .swatch.selected { border-color: var(--wox-text-hi, #fff); border-width: 2px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); }
+    .checker {
+        position: absolute; inset: 0;
+        background: repeating-conic-gradient(#888 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+    }
+    .color { position: absolute; inset: 0; }
+`;
+class Et extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("color") || "transparent", e = this.getAttribute("size") || "24", o = this.hasAttribute("selected"), i = this.hasAttribute("glow"), s = this.hasAttribute("pulse"), r = [o ? "selected" : "", i ? "glow" : "", s ? "pulse" : ""].filter(Boolean).join(" "), a = i || s ? ` style="--wox-fx-color:${t}"` : "";
+      this.render(
+        `${$t} ${R} :host { --size: ${e}px; }`,
+        `<div class="swatch ${r}"${a}>
+                <div class="checker"></div>
+                <div class="color" style="background:${t}"></div>
+            </div>`
+      ), this.$(".swatch").addEventListener("click", () => {
+        this.emit("wox-click", { color: t });
+      });
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(Et, "observedAttributes", ["color", "size", "selected", "glow", "pulse"]);
+const Ct = `
+    :host { display: inline-block; position: relative; }
+    .tip {
+        position: fixed; z-index: var(--wox-z-overlay, 10000);
+        background: #222; color: var(--wox-text-hi, #fff); border: 1px solid var(--wox-border-light, #444);
+        border-radius: var(--wox-radius-sm, 3px); padding: 4px 8px; font-size: var(--wox-font-size-md, 11px);
+        white-space: nowrap; pointer-events: none;
+        opacity: 0; transition: opacity var(--wox-transition-fast, 0.12s);
+        box-shadow: var(--wox-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.4));
+    }
+    :host(:hover) .tip { opacity: 1; }
+`;
+class At extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("text") || "";
+      this.render(Ct, `
+            <slot></slot>
+            ${t ? `<div class="tip">${t}</div>` : ""}
+        `), t && this.addEventListener("mouseenter", this._position);
+    });
+    /** @private Positions the tooltip relative to the host, flipping if it would overflow the viewport */
+    n(this, "_position", () => {
+      const t = this.shadowRoot.querySelector(".tip");
+      if (!t) return;
+      const e = 6, o = this.getAttribute("position") || "top", i = this.getBoundingClientRect(), s = t.getBoundingClientRect(), r = window.innerWidth, a = window.innerHeight, l = {
+        top: i.top - e - s.height >= 0,
+        bottom: i.bottom + e + s.height <= a,
+        left: i.left - e - s.width >= 0,
+        right: i.right + e + s.width <= r
+      }, c = { top: "bottom", bottom: "top", left: "right", right: "left" }, h = [o, c[o], ...["top", "bottom", "left", "right"].filter((b) => b !== o && b !== c[o])].find((b) => l[b]) || o;
+      let u, g;
+      h === "top" ? (u = i.top - e - s.height, g = i.left + i.width / 2 - s.width / 2) : h === "bottom" ? (u = i.bottom + e, g = i.left + i.width / 2 - s.width / 2) : h === "left" ? (u = i.top + i.height / 2 - s.height / 2, g = i.left - e - s.width) : (u = i.top + i.height / 2 - s.height / 2, g = i.right + e), g = Math.max(4, Math.min(g, r - s.width - 4)), u = Math.max(4, Math.min(u, a - s.height - 4)), t.style.top = `${u}px`, t.style.left = `${g}px`;
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(At, "observedAttributes", ["text", "position", "delay"]);
+const A = 220, O = 104, z = 78, D = 104, E = 192, L = 14, St = `
+    :host { display: block; }
+    .cp-popup {
+        position: fixed; z-index: var(--wox-z-modal, 20000);
+        flex-direction: column; align-items: center; gap: 12px;
+        background: var(--wox-bg-panel, #17171a); border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-2xl, 12px); padding: 16px;
+        box-shadow: var(--wox-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.04);
+        width: 252px; user-select: none; overflow: hidden; display: none;
+    }
+    .cp-popup.open { display: flex; }
+    .cp-header {
+        width: calc(100% + 32px); margin: -16px -16px 12px -16px; padding: 10px 16px;
+        background: var(--wox-bg-section-header, #22222a); border-bottom: 1px solid var(--wox-border-section, #2e2e2e);
+        display: flex; justify-content: space-between; align-items: center; cursor: move;
+    }
+    .cp-title { font-size: var(--wox-font-size-base, 12px); font-weight: 600; color: #c0c0c0; letter-spacing: 0.5px; text-transform: uppercase; }
+    .cp-close {
+        background: none; border: none; color: #666; cursor: pointer; font-size: 14px;
+        padding: 2px 6px; border-radius: var(--wox-radius-sm, 3px); transition: all var(--wox-transition-fast);
+    }
+    .cp-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+    .cp-wheel { border-radius: 50%; cursor: crosshair; display: block; }
+    .cp-alpha-wrap { width: ${E}px; position: relative; height: ${L}px; border-radius: 7px; cursor: pointer; }
+    .cp-alpha-canvas { display: block; border-radius: 7px; width: ${E}px; height: ${L}px; }
+    .cp-alpha-knob {
+        position: absolute; top: -3px; width: 20px; height: 20px; border-radius: 50%;
+        border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+        background: transparent; pointer-events: none;
+    }
+    .cp-bottom { width: 100%; display: flex; align-items: center; gap: 10px; }
+    .cp-preview {
+        width: 34px; height: 34px; border-radius: var(--wox-radius-lg, 8px);
+        border: 2px solid rgba(255, 255, 255, 0.12); flex-shrink: 0;
+        background: repeating-conic-gradient(#888 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+    }
+    .cp-hexwrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
+    .cp-hex {
+        background: #27272b; border: 1px solid var(--wox-border-light, #444);
+        border-radius: var(--wox-radius-md, 6px); color: #e8e8e8;
+        font-size: var(--wox-font-size-base, 12px); font-family: var(--wox-font-mono, monospace);
+        padding: 6px 8px; width: 100%; transition: border var(--wox-transition-fast);
+    }
+    .cp-hex:focus { outline: none; border-color: var(--wox-accent, #00e5ff); }
+    .cp-hex-label { font-size: var(--wox-font-size-xs, 9px); color: #555; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
+`;
+class Lt extends v {
+  constructor() {
+    super();
+    /** @private */
+    n(this, "_initFromAttrs", () => {
+      const t = this.getAttribute("color");
+      if (t && /^#[0-9a-fA-F]{6}$/.test(t)) {
+        const [o, i, s] = this._hexToRgb(t);
+        [this._hue, this._sat, this._val] = this._rgbToHsv(o, i, s);
+      }
+      const e = this.getAttribute("alpha");
+      e !== null && (this._alpha = parseFloat(e));
+    });
+    /** @private */
+    n(this, "_build", () => {
+      this._built || (this._built = !0, this.render(St, `
+            <div class="cp-popup">
+                <div class="cp-header">
+                    <span class="cp-title">Color</span>
+                    <button class="cp-close">&#x2715;</button>
+                </div>
+                <canvas class="cp-wheel" width="${A}" height="${A}"></canvas>
+                <div class="cp-alpha-wrap">
+                    <canvas class="cp-alpha-canvas" width="${E}" height="${L}"></canvas>
+                    <div class="cp-alpha-knob"></div>
+                </div>
+                <div class="cp-bottom">
+                    <div class="cp-preview"></div>
+                    <div class="cp-hexwrap">
+                        <input class="cp-hex" type="text" maxlength="9" spellcheck="false">
+                        <span class="cp-hex-label">HEX</span>
+                    </div>
+                </div>
+            </div>
+        `), this._wheelCanvas = this.$(".cp-wheel"), this._wCtx = this._wheelCanvas.getContext("2d"), this._alphaCanvas = this.$(".cp-alpha-canvas"), this._aCtx = this._alphaCanvas.getContext("2d"), this._alphaKnob = this.$(".cp-alpha-knob"), this._preview = this.$(".cp-preview"), this._hexInput = this.$(".cp-hex"), this._popup = this.$(".cp-popup"), this.$(".cp-close").addEventListener("click", () => {
+        this.removeAttribute("open"), this.emit("wox-color-close", {});
+      }), this._popup.addEventListener("mousedown", (t) => t.stopPropagation()), this._wheelCanvas.addEventListener("mousedown", (t) => this._wheelDown(t)), this.$(".cp-alpha-wrap").addEventListener("mousedown", (t) => {
+        this._dragging = "alpha", this._doAlpha(t), t.preventDefault();
+      }), document.addEventListener("mousemove", (t) => {
+        this._mouseMove(t), this._dragState && (this._popup.style.left = t.clientX - this._dragState.dx + "px", this._popup.style.top = t.clientY - this._dragState.dy + "px");
+      }), document.addEventListener("mouseup", () => {
+        this._dragging = null, this._dragState = null;
+      }), this.$(".cp-header").addEventListener("mousedown", (t) => {
+        if (t.target.closest(".cp-close")) return;
+        const e = this._popup.getBoundingClientRect();
+        this._dragState = { dx: t.clientX - e.left, dy: t.clientY - e.top }, t.preventDefault();
+      }), this._hexInput.addEventListener("input", (t) => {
+        const e = t.target.value.trim();
+        if (/^#[0-9a-fA-F]{6}$/.test(e)) {
+          const [o, i, s] = this._hexToRgb(e);
+          [this._hue, this._sat, this._val] = this._rgbToHsv(o, i, s), this._redraw(), this._emitColor();
+        }
+      }), this.hasAttribute("open") && (this._popup.classList.add("open"), this._initFromAttrs(), this._redraw()));
+    });
+    /**
+     * Positions and opens the picker near an anchor element.
+     * @param {HTMLElement} anchorEl - Element to anchor near
+     */
+    n(this, "showAt", (t) => {
+      const e = t.getBoundingClientRect(), o = 252, i = 320;
+      let s = e.left + e.width / 2 - o / 2, r = e.top - i - 10;
+      r < 10 && (r = e.bottom + 10), s < 10 && (s = 10), s + o > window.innerWidth - 10 && (s = window.innerWidth - o - 10), r + i > window.innerHeight - 10 && (r = window.innerHeight - i - 10), this._popup.style.left = s + "px", this._popup.style.top = r + "px", this.setAttribute("open", "");
+    });
+    /** @private */
+    n(this, "_redraw", () => {
+      this._drawWheel(), this._drawAlpha(), this._updatePreview();
+    });
+    /** @private */
+    n(this, "_drawWheel", () => {
+      const t = this._wCtx, e = A, o = e / 2, i = e / 2;
+      t.clearRect(0, 0, e, e);
+      const s = t.createConicGradient(-Math.PI / 2, o, i);
+      for (let y = 0; y <= 36; y++) s.addColorStop(y / 36, `hsl(${y * 10},100%,50%)`);
+      t.fillStyle = s, t.beginPath(), t.arc(o, i, O, 0, Math.PI * 2), t.fill(), t.save(), t.globalCompositeOperation = "destination-out", t.beginPath(), t.arc(o, i, z, 0, Math.PI * 2), t.fill(), t.restore(), t.strokeStyle = "rgba(0,0,0,0.25)", t.lineWidth = 1, t.beginPath(), t.arc(o, i, O - 0.5, 0, Math.PI * 2), t.stroke(), t.beginPath(), t.arc(o, i, z + 0.5, 0, Math.PI * 2), t.stroke();
+      const r = this._hue * Math.PI * 2 - Math.PI / 2, a = (O + z) / 2, l = o + Math.cos(r) * a, c = i + Math.sin(r) * a;
+      t.strokeStyle = "#fff", t.lineWidth = 2.5, t.beginPath(), t.arc(l, c, 8, 0, Math.PI * 2), t.stroke(), t.strokeStyle = "rgba(0,0,0,0.4)", t.lineWidth = 1, t.beginPath(), t.arc(l, c, 8, 0, Math.PI * 2), t.stroke();
+      const x = D, h = o - x / 2, u = i - x / 2, g = t.createLinearGradient(h, 0, h + x, 0);
+      g.addColorStop(0, "#fff"), g.addColorStop(1, `hsl(${this._hue * 360},100%,50%)`), t.fillStyle = g, t.fillRect(h, u, x, x);
+      const b = t.createLinearGradient(0, u, 0, u + x);
+      b.addColorStop(0, "rgba(0,0,0,0)"), b.addColorStop(1, "rgba(0,0,0,1)"), t.fillStyle = b, t.fillRect(h, u, x, x);
+      const f = h + this._sat * x, w = u + (1 - this._val) * x;
+      t.strokeStyle = "#fff", t.lineWidth = 2.5, t.beginPath(), t.arc(f, w, 7, 0, Math.PI * 2), t.stroke(), t.strokeStyle = "rgba(0,0,0,0.4)", t.lineWidth = 1, t.beginPath(), t.arc(f, w, 7, 0, Math.PI * 2), t.stroke();
+    });
+    /** @private */
+    n(this, "_drawAlpha", () => {
+      const t = this._aCtx;
+      t.clearRect(0, 0, E, L);
+      for (let r = 0; r < E; r += 8) for (let a = 0; a < L; a += 8)
+        t.fillStyle = (r / 8 + a / 8) % 2 === 0 ? "#aaa" : "#fff", t.fillRect(r, a, 8, 8);
+      const [e, o, i] = this._hsvToRgb(this._hue, this._sat, this._val), s = t.createLinearGradient(0, 0, E, 0);
+      s.addColorStop(0, `rgba(${e},${o},${i},0)`), s.addColorStop(1, `rgba(${e},${o},${i},1)`), t.fillStyle = s, t.fillRect(0, 0, E, L), this._alphaKnob.style.left = this._alpha * E - 7 + "px";
+    });
+    /** @private */
+    n(this, "_updatePreview", () => {
+      const [t, e, o] = this._hsvToRgb(this._hue, this._sat, this._val);
+      this._preview.style.background = `rgba(${t},${e},${o},${this._alpha})`, this._hexInput.value = this._rgbToHex(t, e, o);
+    });
+    /** @private */
+    n(this, "_wheelDown", (t) => {
+      const e = this._wheelCanvas.getBoundingClientRect(), o = t.clientX - e.left, i = t.clientY - e.top, s = A / 2, r = A / 2, a = Math.hypot(o - s, i - r);
+      a >= z - 2 && a <= O + 2 ? this._dragging = "ring" : a < z && (this._dragging = "sq"), this._handleWheel(o, i);
+    });
+    /** @private */
+    n(this, "_mouseMove", (t) => {
+      if (this._dragging)
+        if (this._dragging === "ring" || this._dragging === "sq") {
+          const e = this._wheelCanvas.getBoundingClientRect();
+          this._handleWheel(t.clientX - e.left, t.clientY - e.top);
+        } else this._dragging === "alpha" && this._doAlpha(t);
+    });
+    /** @private */
+    n(this, "_handleWheel", (t, e) => {
+      const o = A / 2, i = A / 2;
+      if (this._dragging === "ring") {
+        const s = Math.atan2(e - i, t - o) + Math.PI / 2;
+        this._hue = (s / (Math.PI * 2) % 1 + 1) % 1;
+      } else if (this._dragging === "sq") {
+        const s = o - D / 2, r = i - D / 2;
+        this._sat = Math.max(0, Math.min(1, (t - s) / D)), this._val = Math.max(0, Math.min(1, 1 - (e - r) / D));
+      }
+      this._redraw(), this._emitColor();
+    });
+    /** @private */
+    n(this, "_doAlpha", (t) => {
+      const e = this.$(".cp-alpha-wrap").getBoundingClientRect();
+      this._alpha = Math.max(0, Math.min(1, (t.clientX - e.left) / E)), this._drawAlpha(), this._updatePreview(), this._emitColor();
+    });
+    /** @private */
+    n(this, "_emitColor", () => {
+      const [t, e, o] = this._hsvToRgb(this._hue, this._sat, this._val);
+      this.emit("wox-color-change", { color: [t / 255, e / 255, o / 255, this._alpha] });
+    });
+    // ── Color math ──
+    /** @private */
+    n(this, "_hsvToRgb", (t, e, o) => {
+      const i = (s) => {
+        const r = (s + t * 6) % 6;
+        return o - o * e * Math.max(0, Math.min(r, 4 - r, 1));
+      };
+      return [Math.round(i(5) * 255), Math.round(i(3) * 255), Math.round(i(1) * 255)];
+    });
+    /** @private */
+    n(this, "_rgbToHsv", (t, e, o) => {
+      t /= 255, e /= 255, o /= 255;
+      const i = Math.max(t, e, o), s = i - Math.min(t, e, o);
+      let r = 0;
+      return s && (i === t ? r = ((e - o) / s % 6 + 6) % 6 : i === e ? r = (o - t) / s + 2 : r = (t - e) / s + 4), [r / 6, i ? s / i : 0, i];
+    });
+    /** @private */
+    n(this, "_hexToRgb", (t) => {
+      const e = parseInt(t.slice(1), 16);
+      return [e >> 16 & 255, e >> 8 & 255, e & 255];
+    });
+    /** @private */
+    n(this, "_rgbToHex", (t, e, o) => "#" + [t, e, o].map((i) => i.toString(16).padStart(2, "0")).join(""));
+    this._hue = 0, this._sat = 0.8, this._val = 0.9, this._alpha = 1, this._dragging = null, this._dragState = null, this._built = !1;
+  }
+  connectedCallback() {
+    this._build();
+  }
+  attributeChangedCallback(t) {
+    if (this.isConnected)
+      if (t === "open") {
+        const e = this.$(".cp-popup");
+        e && (this.hasAttribute("open") ? (e.classList.add("open"), this._initFromAttrs(), this._redraw()) : e.classList.remove("open"));
+      } else (t === "color" || t === "alpha") && (this._initFromAttrs(), this.hasAttribute("open") && this._redraw());
+  }
+}
+n(Lt, "observedAttributes", ["color", "alpha", "open"]);
+const H = `
+    :host { display: block; }
+    .item {
+        color: var(--wox-text-primary, #eee); padding: 8px 12px; display: flex; align-items: center;
+        gap: 8px; cursor: pointer; font-size: 11.5px; font-family: var(--wox-font, sans-serif);
+        transition: all 0.2s; border-radius: var(--wox-radius-sm, 3px); user-select: none;
+    }
+    .item:hover { background-color: rgba(0, 229, 255, 0.1); color: var(--wox-accent, #00e5ff); }
+    .item.disabled { opacity: 0.4; pointer-events: none; }
+    .label { flex: 1; }
+    .shortcut { font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999); margin-left: auto; }
+    .item:hover .shortcut { color: rgba(0, 229, 255, 0.6); }
+    .icon { font-size: 14px; width: 18px; text-align: center; }
+    .arrow { font-size: 10px; color: var(--wox-text-secondary, #999); margin-left: 4px; }
+    .separator { height: 1px; background: var(--wox-border, #333); margin: 4px 0; }
+    .header {
+        padding: 8px 12px; font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999);
+        text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; cursor: default;
+    }
+    .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
+`;
+class zt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("type") || "item", e = this.getAttribute("label") || "", o = this.getAttribute("shortcut") || "", i = this.getAttribute("icon") || "", s = this.hasAttribute("disabled"), r = this.hasAttribute("submenu");
+      if (t === "separator") {
+        this.render(H, '<div class="separator"></div>');
+        return;
+      }
+      if (t === "header") {
+        this.render(H, `<div class="header">${e}</div>`);
+        return;
+      }
+      this.render(H, `
+            <div class="item ${s ? "disabled" : ""}">
+                ${i ? `<span class="icon material-icons">${i}</span>` : ""}
+                <span class="label">${e}</span>
+                ${o ? `<span class="shortcut">${o}</span>` : ""}
+                ${r ? '<span class="arrow">&#9654;</span>' : ""}
+            </div>
+        `), s || this.$(".item").addEventListener("click", () => {
+        this.emit("wox-select", { label: e });
+      });
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(zt, "observedAttributes", ["label", "shortcut", "icon", "disabled", "type", "submenu"]);
+const Dt = `
+    :host { display: inline-block; position: relative; }
+    .trigger { color: var(--wox-text-primary, #eee); padding: 3px 8px; border-radius: var(--wox-radius-sm, 3px); cursor: pointer; font-size: var(--wox-font-size-base, 12px); display: block; user-select: none; }
+    .trigger:hover { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-text-hi, #fff); }
+    .dropdown {
+        display: none; position: fixed; z-index: var(--wox-z-dropdown, 1000);
+        background: var(--wox-bg-panel, #17171a); min-width: 160px;
+        box-shadow: var(--wox-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.6));
+        border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-lg, 8px);
+        overflow: hidden; padding: 4px;
+    }
+    .dropdown.open { display: block; }
+    /* Invisible bridge to keep menu open while moving mouse */
+    .dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
+`;
+class Rt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("label") || "", e = this.hasAttribute("open"), o = this.getAttribute("trigger") || "click";
+      this.render(Dt, `
+            <span class="trigger">${t}</span>
+            <div class="dropdown ${e ? "open" : ""}">
+                <slot></slot>
+            </div>
+        `);
+      const i = this.$(".trigger");
+      this.$(".dropdown"), o === "click" ? i.addEventListener("click", (s) => {
+        s.stopPropagation(), this._toggle();
+      }) : o === "hover" && (this.addEventListener("mouseenter", () => this._open()), this.addEventListener("mouseleave", () => this._close())), this._outsideClick = (s) => {
+        !this.contains(s.target) && this.hasAttribute("open") && this._close();
+      }, document.addEventListener("mousedown", this._outsideClick), this.addEventListener("wox-select", () => this._close());
+    });
+    /** @private */
+    n(this, "_toggle", () => {
+      this.hasAttribute("open") ? this._close() : this._open();
+    });
+    /** @private */
+    n(this, "_open", () => {
+      this.setAttribute("open", ""), this._positionDropdown();
+    });
+    /** @private — Position the fixed dropdown relative to the trigger, flipping if needed. */
+    n(this, "_positionDropdown", () => {
+      requestAnimationFrame(() => {
+        const t = this.$(".trigger"), e = this.$(".dropdown");
+        if (!t || !e) return;
+        const o = t.getBoundingClientRect(), i = window.innerWidth, s = window.innerHeight, r = e.getBoundingClientRect();
+        o.left + r.width > i ? e.style.left = `${o.right - r.width}px` : e.style.left = `${o.left}px`;
+        const a = s - o.bottom, l = o.top;
+        a >= r.height || a >= l ? (e.style.top = `${o.bottom}px`, e.style.bottom = "") : (e.style.top = "", e.style.bottom = `${s - o.top}px`);
+      });
+    });
+    /** @private */
+    n(this, "_close", () => {
+      this.removeAttribute("open");
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t) {
+    if (this.isConnected) {
+      if (t === "open") {
+        const e = this.$(".dropdown");
+        if (!e) return;
+        this.hasAttribute("open") ? (e.classList.add("open"), this._positionDropdown(), this.emit("wox-open", {})) : (e.classList.remove("open"), this.emit("wox-close", {}));
+        return;
+      }
+      this._render();
+    }
+  }
+  disconnectedCallback() {
+    this._outsideClick && document.removeEventListener("mousedown", this._outsideClick);
+  }
+}
+n(Rt, "observedAttributes", ["label", "open", "trigger"]);
+const Mt = `
+    :host { display: block; }
+    .layer {
+        display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px;
+        margin: 4px 8px 0 8px; border-radius: var(--wox-radius-md, 6px);
+        background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
+        cursor: pointer; user-select: none; font-size: var(--wox-font-size-md, 11px);
+        font-weight: 600; color: var(--wox-text-secondary, #999); text-transform: uppercase;
+        letter-spacing: 0.5px; transition: background 0.1s, border-color 0.1s;
+    }
+    :host([depth="1"]) .layer { margin-left: 24px; }
+    :host([depth="2"]) .layer { margin-left: 40px; }
+    .layer:hover { background: rgba(255, 255, 255, 0.07); }
+    .layer.selected { border-color: var(--wox-accent, #00e5ff); color: var(--wox-accent, #00e5ff); background: rgba(0, 229, 255, 0.06); }
+    .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wox-font-size-lg, 13px); color: #ccc; font-weight: 400; text-transform: none; letter-spacing: 0; }
+    .layer.selected .name { color: var(--wox-text-hi, #fff); }
+    .name-input {
+        flex: 1; background: rgba(0, 0, 0, 0.4); border: 1px solid #4A8CFF;
+        color: #fff; font-size: var(--wox-font-size-lg, 13px); font-family: var(--wox-font, sans-serif);
+        padding: 2px 4px; border-radius: var(--wox-radius-sm, 3px); outline: none; width: 100%;
+    }
+    .type-icon { font-size: 14px; opacity: 0.6; width: 18px; text-align: center; }
+    .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
+    .toggle { display: flex; align-items: center; opacity: 0.4; cursor: pointer; transition: opacity 0.15s, color 0.15s; padding: 0 2px; font-size: 16px; }
+    .toggle:hover, .toggle.on { opacity: 1; color: var(--wox-accent, #00e5ff); }
+`, Ot = {
+  rectangle: "crop_square",
+  ellipse: "radio_button_unchecked",
+  path: "timeline",
+  image: "image",
+  text: "text_fields",
+  group: "folder",
+  layer: "layers"
+};
+class Tt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("name") || "Layer", e = this.getAttribute("type") || "layer", o = this.hasAttribute("visible"), i = this.hasAttribute("locked"), s = this.hasAttribute("selected"), r = Ot[e] || "layers";
+      this.render(Mt, `
+            <div class="layer ${s ? "selected" : ""}">
+                <span class="type-icon material-icons">${r}</span>
+                <span class="name">${t}</span>
+                <span class="toggle eye ${o ? "on" : ""} material-icons">${o ? "visibility" : "visibility_off"}</span>
+                <span class="toggle lock ${i ? "on" : ""} material-icons">${i ? "lock" : "lock_open"}</span>
+            </div>
+        `), this.$(".layer").addEventListener("click", (a) => {
+        a.target.closest(".toggle") || this.emit("wox-select", { name: t });
+      }), this.$(".name").addEventListener("dblclick", () => this._startEditing()), this.$(".eye").addEventListener("click", (a) => {
+        a.stopPropagation();
+        const l = !o;
+        l ? this.setAttribute("visible", "") : this.removeAttribute("visible"), this.emit("wox-visibility", { visible: l });
+      }), this.$(".lock").addEventListener("click", (a) => {
+        a.stopPropagation();
+        const l = !i;
+        l ? this.setAttribute("locked", "") : this.removeAttribute("locked"), this.emit("wox-lock", { locked: l });
+      });
+    });
+    /** @private */
+    n(this, "_startEditing", () => {
+      this._editing = !0;
+      const t = this.$(".name"), e = this.getAttribute("name") || "Layer", o = document.createElement("input");
+      o.className = "name-input", o.value = e, t.replaceWith(o), o.focus(), o.select();
+      const i = () => {
+        this._editing = !1;
+        const s = o.value.trim() || e;
+        this.setAttribute("name", s), this._render();
+      };
+      o.addEventListener("blur", i), o.addEventListener("keydown", (s) => {
+        s.key === "Enter" && o.blur(), s.key === "Escape" && (o.value = e, o.blur());
+      });
+    });
+  }
+  connectedCallback() {
+    this._editing = !1, this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && !this._editing && this._render();
+  }
+}
+n(Tt, "observedAttributes", ["name", "type", "visible", "locked", "selected", "depth"]);
+const It = `
+    :host { display: block; border-bottom: 1px solid var(--wox-border-section, #2e2e2e); }
+    .header {
+        background: var(--wox-bg-section-header, #22222a); padding: 8px 16px;
+        display: flex; align-items: center; gap: 10px;
+        border-bottom: 1px solid var(--wox-border-section, #2e2e2e);
+        font-size: var(--wox-font-size-md, 11px); color: var(--wox-text-primary, #eee);
+        font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
+        cursor: pointer; user-select: none;
+    }
+    .diamond {
+        display: flex; align-items: center; color: var(--wox-accent, #00e5ff); font-size: 13px;
+    }
+    .diamond::before {
+        content: ''; display: block; width: 8px; height: 8px;
+        background: var(--wox-accent, #00e5ff); transform: rotate(45deg); flex-shrink: 0;
+        box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+    }
+    .title { font-size: var(--wox-font-size-md, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-left: 8px; }
+    .chevron { margin-left: auto; font-size: 16px; transition: transform 0.2s; color: var(--wox-text-secondary, #999); }
+    .chevron.collapsed { transform: rotate(-90deg); }
+    .actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
+    .body {
+        padding: var(--wox-space-xl, 16px); overflow: hidden;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
+        box-shadow: var(--wox-shadow-section);
+    }
+    .body.collapsed { display: none; }
+    .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
+`;
+class Nt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("title") || "", e = this.hasAttribute("collapsed");
+      this.render(It, `
+            <div class="header">
+                <div class="diamond"></div>
+                <span class="title">${t}</span>
+                <div class="actions"><slot name="header-actions"></slot></div>
+                <span class="chevron material-icons ${e ? "collapsed" : ""}">expand_more</span>
+            </div>
+            <div class="body ${e ? "collapsed" : ""}">
+                <slot></slot>
+            </div>
+        `), this.$(".header").addEventListener("click", () => {
+        const o = !this.hasAttribute("collapsed");
+        o ? this.setAttribute("collapsed", "") : this.removeAttribute("collapsed"), this.emit("wox-toggle", { collapsed: o });
+      });
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(Nt, "observedAttributes", ["title", "collapsed", "icon"]);
+const Pt = `
+    :host { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; flex-direction: column; }
+    :host([active]) { display: flex; }
+`;
+class Ft extends v {
+  connectedCallback() {
+    this.render(Pt, "<slot></slot>");
+  }
+}
+n(Ft, "observedAttributes", ["name", "label", "icon", "active"]);
+const Ht = `
+    :host { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+    .tab-headers {
+        background: var(--wox-bg-section-header, #22222a); display: flex;
+        padding: 0 4px; border-bottom: 1px solid var(--wox-border-section, #2e2e2e); flex-shrink: 0;
+    }
+    .tab-btn {
+        flex: 1; padding: 8px 4px; background: transparent; border: none;
+        border-bottom: 2px solid transparent; color: var(--wox-text-secondary, #999);
+        cursor: pointer; font-size: var(--wox-font-size-base, 12px); font-family: var(--wox-font, sans-serif);
+        transition: all var(--wox-transition-fast, 0.12s); margin-bottom: -1px;
+    }
+    .tab-btn.active { color: var(--wox-text-hi, #fff); border-bottom-color: var(--wox-accent, #00e5ff); }
+    .tab-btn:hover { color: var(--wox-text-primary, #eee); }
+    .body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+    /* Vertical left placement */
+    :host([placement="left"]) { flex-direction: row; }
+    :host([placement="left"]) .tab-headers {
+        flex-direction: column; padding: 4px 0; border-bottom: none;
+        border-right: 1px solid var(--wox-border-section, #2e2e2e);
+    }
+    :host([placement="left"]) .tab-btn {
+        flex: none; border-bottom: none; margin-bottom: 0;
+        border-right: 2px solid transparent; margin-right: -1px;
+        writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 6px;
+    }
+    :host([placement="left"]) .tab-btn.active { border-right-color: var(--wox-accent, #00e5ff); }
+
+    /* Vertical right placement */
+    :host([placement="right"]) { flex-direction: row-reverse; }
+    :host([placement="right"]) .tab-headers {
+        flex-direction: column; padding: 4px 0; border-bottom: none;
+        border-left: 1px solid var(--wox-border-section, #2e2e2e);
+    }
+    :host([placement="right"]) .tab-btn {
+        flex: none; border-bottom: none; margin-bottom: 0;
+        border-left: 2px solid transparent; margin-left: -1px;
+        writing-mode: vertical-rl; padding: 8px 6px;
+    }
+    :host([placement="right"]) .tab-btn.active { border-left-color: var(--wox-accent, #00e5ff); }
+`;
+class Bt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      this.render(Ht, `
+            <div class="tab-headers"></div>
+            <div class="body"><slot></slot></div>
+        `), this.$("slot").addEventListener("slotchange", () => this._buildHeaders()), this._buildHeaders();
+    });
+    /** @private */
+    n(this, "_buildHeaders", () => {
+      var i;
+      const t = this.$(".tab-headers");
+      t.innerHTML = "";
+      const e = this._getTabs(), o = this.getAttribute("active") || ((i = e[0]) == null ? void 0 : i.getAttribute("name")) || "";
+      e.forEach((s) => {
+        const r = s.getAttribute("name") || "", a = s.getAttribute("label") || r, l = document.createElement("button");
+        l.className = "tab-btn" + (r === o ? " active" : ""), l.textContent = a, l.addEventListener("click", () => {
+          this.setAttribute("active", r), this.emit("wox-tab-change", { name: r });
+        }), t.appendChild(l);
+      }), this._updateActive();
+    });
+    /** @private */
+    n(this, "_updateActive", () => {
+      var o;
+      const t = this._getTabs(), e = this.getAttribute("active") || ((o = t[0]) == null ? void 0 : o.getAttribute("name")) || "";
+      t.forEach((i) => {
+        (i.getAttribute("name") || "") === e ? i.setAttribute("active", "") : i.removeAttribute("active");
+      }), this.$$(".tab-btn").forEach((i, s) => {
+        var a;
+        const r = ((a = t[s]) == null ? void 0 : a.getAttribute("name")) || "";
+        i.classList.toggle("active", r === e);
+      });
+    });
+    /** @private */
+    n(this, "_getTabs", () => [...this.querySelectorAll(":scope > wox-tab")]);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._updateActive();
+  }
+}
+n(Bt, "observedAttributes", ["active", "placement"]);
+const Yt = `
+    :host { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--wox-border, #333); width: 100%; }
+    :host(:last-of-type) { border-bottom: none; }
+    .label { font-size: var(--wox-font-size-xs, 9px); color: var(--wox-text-secondary, #999); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
+`;
+class jt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("label") || "";
+      this.render(Yt, `
+            <slot></slot>
+            ${t ? `<span class="label">${t}</span>` : ""}
+        `);
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(jt, "observedAttributes", ["label"]);
+const Gt = `
+    :host {
+        display: flex; flex-direction: column; align-items: center;
+        background: var(--wox-bg-toolbar, #1e1e22);
+        border-right: 1px solid var(--wox-border, #333);
+        padding: 6px 0; flex-shrink: 0;
+        width: var(--width, 44px);
+    }
+    :host([position="right"]) { border-right: none; border-left: 1px solid var(--wox-border, #333); }
+`;
+class Wt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("width") || "44px";
+      this.render(
+        `${Gt} :host { --width: ${t}; }`,
+        "<slot></slot>"
+      );
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(Wt, "observedAttributes", ["width", "position"]);
+const Xt = `
+    :host {
+        display: flex; flex-direction: column; flex-shrink: 0; position: relative;
+        width: var(--width, 280px); height: 100%;
+        background: var(--wox-bg-panel, #17171a);
+        border-left: 1px solid var(--wox-border-light, #444);
+        z-index: var(--wox-z-base, 1);
+    }
+    :host([position="left"]) { border-left: none; border-right: 1px solid var(--wox-border-light, #444); }
+    .resizer {
+        position: absolute; top: 0; bottom: 0; width: 5px; cursor: col-resize;
+        z-index: 2; transition: background 0.2s;
+    }
+    :host([position="left"]) .resizer { right: -2px; }
+    :host(:not([position="left"])) .resizer { left: -2px; }
+    .resizer:hover { background: rgba(0, 229, 255, 0.4); }
+    .content { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
+`;
+class qt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("width") || "280px", e = this.hasAttribute("resizable");
+      if (this.render(
+        `${Xt} :host { --width: ${t}; }`,
+        `${e ? '<div class="resizer"></div>' : ""}<div class="content"><slot></slot></div>`
+      ), e) {
+        const o = this.$(".resizer");
+        if (!o) return;
+        let i = 0, s = 0;
+        const r = this.getAttribute("position") === "left", a = (c) => {
+          const x = r ? c.clientX - i : i - c.clientX, h = Math.max(180, Math.min(600, s + x));
+          this.style.width = h + "px";
+        }, l = () => {
+          document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", l);
+        };
+        o.addEventListener("mousedown", (c) => {
+          i = c.clientX, s = this.getBoundingClientRect().width, document.addEventListener("mousemove", a), document.addEventListener("mouseup", l), c.preventDefault();
+        });
+      }
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(qt, "observedAttributes", ["width", "position", "resizable"]);
+const Jt = `
+    :host {
+        display: flex; align-items: center; flex-shrink: 0;
+        height: var(--height, 32px); background: var(--wox-bg-toolbar, #1e1e22);
+        border-bottom: 1px solid var(--wox-border, #333); padding: 0 12px; gap: 2px;
+    }
+    ::slotted(.logo) { display: flex; align-items: center; gap: 6px; margin-right: 18px; }
+`;
+class Kt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("height") || "32px";
+      this.render(
+        `${Jt} :host { --height: ${t}; }`,
+        "<slot></slot>"
+      ), this.addEventListener("keydown", (e) => {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+        const o = [...this.querySelectorAll("wox-menu")], i = o.findIndex((r) => r.hasAttribute("open"));
+        if (i < 0) return;
+        o[i].removeAttribute("open");
+        const s = e.key === "ArrowRight" ? (i + 1) % o.length : (i - 1 + o.length) % o.length;
+        o[s].setAttribute("open", "");
+      });
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(Kt, "observedAttributes", ["height"]);
+const Vt = `
+    :host {
+        display: flex; align-items: center; flex-shrink: 0;
+        height: var(--height, 24px); background: var(--wox-accent, #00e5ff);
+        border-top: 1px solid var(--wox-border, #333); padding: 0 12px;
+    }
+    .left, .center, .right { display: flex; align-items: center; gap: 8px; }
+    .left { flex: 1; justify-content: flex-start; }
+    .center { flex: 1; justify-content: center; }
+    .right { flex: 1; justify-content: flex-end; }
+    ::slotted(*) { font-size: var(--wox-font-size-md, 11px); color: rgba(255, 255, 255, 0.9); }
+`;
+class Ut extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("height") || "24px";
+      this.render(
+        `${Vt} :host { --height: ${t}; }`,
+        `<div class="left"><slot name="left"></slot></div>
+             <div class="center"><slot name="center"></slot></div>
+             <div class="right"><slot name="right"></slot></div>`
+      );
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+}
+n(Ut, "observedAttributes", ["height"]);
+const Zt = `
+    :host { display: none; }
+    :host([open]) { display: block; }
+    .overlay {
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+        background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
+        z-index: var(--wox-z-modal, 20000); display: flex;
+        align-items: center; justify-content: center;
+        opacity: 1; transition: opacity 0.2s ease;
+    }
+    .box {
+        background: #1e1e24; border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-2xl, 12px); padding: 24px;
+        min-width: 300px; max-width: var(--width, 400px);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+        transform: translateY(0) scale(1);
+        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+    .title { font-size: var(--wox-font-size-2xl, 16px); color: var(--wox-text-hi, #fff); font-weight: 500; }
+    .close-btn {
+        background: none; border: none; color: #666; font-size: 18px; cursor: pointer;
+        padding: 4px 8px; border-radius: var(--wox-radius-sm, 3px); transition: all 0.12s;
+    }
+    .close-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+    .body { color: #bbb; font-size: var(--wox-font-size-xl, 14px); margin-bottom: 24px; line-height: 1.5; }
+    .footer { display: flex; justify-content: flex-end; gap: 12px; }
+    .btn {
+        padding: 8px 16px; border-radius: var(--wox-radius-md, 6px);
+        font-family: var(--wox-font, sans-serif); font-size: var(--wox-font-size-lg, 13px);
+        font-weight: 500; cursor: pointer; border: none; transition: background 0.15s;
+    }
+    .btn-secondary { background: var(--wox-border, #333); color: var(--wox-text-primary, #eee); }
+    .btn-secondary:hover { background: var(--wox-border-light, #444); }
+    .btn-primary { background: var(--wox-accent, #00e5ff); color: var(--wox-text-hi, #fff); }
+    .btn-primary:hover { background: #3bb3d9; }
+`;
+class Qt extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_render", () => {
+      const t = this.getAttribute("title") || "", e = !this.hasAttribute("closable") || this.getAttribute("closable") !== "false", o = this.getAttribute("width") || "400px", i = this.getAttribute("color") || "", s = this.hasAttribute("glow"), r = this.hasAttribute("pulse"), a = [s ? "glow" : "", r ? "pulse" : ""].filter(Boolean).join(" "), l = i ? ` style="--wox-fx-color:${i}"` : "";
+      this.render(`${Zt} ${R} .box { --width: ${o}; }`, `
+            <div class="overlay">
+                <div class="box ${a}"${l}>
+                    <div class="header">
+                        <span class="title">${t}</span>
+                        ${e ? '<button class="close-btn">&#x2715;</button>' : ""}
+                    </div>
+                    <div class="body"><slot></slot></div>
+                    <div class="footer">
+                        <slot name="footer">
+                            <button class="btn btn-secondary cancel-btn">Cancel</button>
+                            <button class="btn btn-primary ok-btn">OK</button>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        `), this.$(".overlay").addEventListener("click", (u) => {
+        u.target === this.$(".overlay") && (this.removeAttribute("open"), this.emit("wox-close", {}));
+      });
+      const c = this.$(".close-btn");
+      c && c.addEventListener("click", () => {
+        this.removeAttribute("open"), this.emit("wox-close", {});
+      });
+      const x = this.$(".cancel-btn");
+      x && x.addEventListener("click", () => {
+        this.removeAttribute("open"), this.emit("wox-cancel", {});
+      });
+      const h = this.$(".ok-btn");
+      h && h.addEventListener("click", () => {
+        this.removeAttribute("open"), this.emit("wox-confirm", {});
+      });
+    });
+    /** @private */
+    n(this, "_keyHandler", (t) => {
+      t.key === "Escape" && (this.removeAttribute("open"), this.emit("wox-close", {}));
+    });
+    /** @private */
+    n(this, "_attachKeyHandler", () => {
+      document.addEventListener("keydown", this._keyHandler);
+    });
+    /** @private */
+    n(this, "_detachKeyHandler", () => {
+      document.removeEventListener("keydown", this._keyHandler);
+    });
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t) {
+    this.isConnected && (t === "open" && (this.hasAttribute("open") ? this._attachKeyHandler() : this._detachKeyHandler()), this._render());
+  }
+  disconnectedCallback() {
+    this._detachKeyHandler();
+  }
+  open() {
+    this.setAttribute("open", "");
+  }
+  close() {
+    this.removeAttribute("open");
+  }
+  get openState() {
+    return this.hasAttribute("open");
+  }
+  set openState(t) {
+    t ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+}
+n(Qt, "observedAttributes", ["open", "title", "closable", "width", "color", "glow", "pulse"]);
+const te = `
+    :host { display: block; overflow: hidden; border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-md, 6px); background: var(--wox-bg-panel, #17171a); }
+
+    .grid-wrapper { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+
+    /* ── Header ── */
+    .header {
+        display: flex; flex-shrink: 0;
+        background: var(--wox-bg-section-header, #22222a);
+        border-bottom: 1px solid var(--wox-border, #333);
+        user-select: none;
+    }
+    .header-cell {
+        position: relative; display: flex; align-items: center; gap: 4px;
+        padding: 0 12px; height: 32px; flex-shrink: 0; overflow: hidden;
+        font-size: var(--wox-font-size-sm, 10px); font-weight: 600;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: var(--wox-text-secondary, #999); cursor: pointer;
+        transition: color var(--wox-transition-fast, 0.12s);
+    }
+    .header-cell:hover { color: var(--wox-text-hi, #fff); }
+    .header-cell.sorted { color: var(--wox-accent, #00e5ff); }
+
+    /* Sort arrow */
+    .sort-arrow { font-size: 14px; opacity: 0; transition: opacity 0.15s, transform 0.15s; line-height: 1; }
+    .header-cell:hover .sort-arrow { opacity: 0.4; }
+    .header-cell.sorted .sort-arrow { opacity: 1; }
+    .header-cell.sorted.desc .sort-arrow { transform: rotate(180deg); }
+
+    /* Resize handle */
+    .resize-handle {
+        position: absolute; top: 0; right: 0; width: 5px; height: 100%;
+        cursor: col-resize; z-index: 1;
+    }
+    .resize-handle::after {
+        content: ''; position: absolute; top: 6px; bottom: 6px; right: 2px; width: 1px;
+        background: var(--wox-border-light, #444);
+        transition: background var(--wox-transition-fast, 0.12s);
+    }
+    .resize-handle:hover::after, .resize-handle.active::after {
+        background: var(--wox-accent, #00e5ff);
+    }
+
+    .header-cell.dragging { opacity: 0.4; background: var(--wox-bg-hover, #2a2a2e); }
+    .header-cell.drag-over { border-left: 2px solid var(--wox-accent, #00e5ff); }
+
+    /* ── Body ── */
+    .body {
+        flex: 1; overflow-y: auto; overflow-x: hidden;
+        scrollbar-width: thin; scrollbar-color: var(--wox-border, #333) transparent;
+    }
+    .body::-webkit-scrollbar { width: 6px; }
+    .body::-webkit-scrollbar-thumb { background: var(--wox-border, #333); border-radius: 3px; }
+
+    /* ── Rows ── */
+    .row {
+        display: flex; border-bottom: 1px solid var(--wox-border-section, #2e2e2e);
+        transition: background var(--wox-transition-fast, 0.12s);
+        cursor: default;
+    }
+    .row.even { background: var(--wox-bg-panel, #17171a); }
+    .row.odd  { background: var(--wox-bg-toolbar, #1e1e22); }
+    .row:hover { background: var(--wox-bg-hover, #2a2a2e); }
+
+    .cell {
+        display: flex; align-items: center;
+        padding: 0 12px; height: 30px; flex-shrink: 0; overflow: hidden;
+        font-size: var(--wox-font-size-base, 12px); color: var(--wox-text-primary, #eee);
+        white-space: nowrap; text-overflow: ellipsis;
+    }
+    .cell.align-right  { justify-content: flex-end; }
+    .cell.align-center { justify-content: center; }
+    
+    .cell-input {
+        width: 100%; height: 24px; background: #222; border: 1px solid var(--wox-accent, #00e5ff);
+        color: #fff; padding: 2px 4px; border-radius: 4px; font-size: 11px; outline: none;
+    }
+
+    /* ── Empty state ── */
+    .empty {
+        display: flex; align-items: center; justify-content: center;
+        height: 80px; color: var(--wox-text-secondary, #999);
+        font-size: var(--wox-font-size-md, 11px); font-style: italic;
+    }
+`, ee = 120, oe = 40;
+class Ee extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_columns", []);
+    /** @private */
+    n(this, "_rows", []);
+    /** @private */
+    n(this, "_sortKey", null);
+    /** @private */
+    n(this, "_sortDir", "asc");
+    /** @private */
+    n(this, "_colWidths", []);
+    /** @private */
+    n(this, "_editingCell", null);
+    /** @private */
+    n(this, "_getSortedRows", () => {
+      if (!this._sortKey) return this._rows;
+      const t = this._sortKey, e = this._sortDir === "asc" ? 1 : -1;
+      return [...this._rows].sort((o, i) => {
+        const s = o[t], r = i[t];
+        return s == null && r == null ? 0 : s == null ? e : r == null ? -e : typeof s == "number" && typeof r == "number" ? (s - r) * e : String(s).localeCompare(String(r)) * e;
+      });
+    });
+    /** @private */
+    n(this, "_render", () => {
+      const t = this._getSortedRows(), e = this._columns.map((i, s) => {
+        const r = this._sortKey === i.key, a = [r ? "sorted" : "", r && this._sortDir === "desc" ? "desc" : ""].filter(Boolean).join(" "), l = i.sortable !== !1;
+        return `<div class="header-cell ${a}" data-col="${s}" style="width:${this._colWidths[s]}px" draggable="true">
+                <span class="label-text">${i.label || i.key}</span>
+                ${l ? '<span class="sort-arrow">&#9650;</span>' : ""}
+                <div class="resize-handle" data-col="${s}"></div>
+            </div>`;
+      }).join(""), o = t.length === 0 ? '<div class="empty">No data</div>' : t.map((i, s) => {
+        const r = s % 2 === 0 ? "even" : "odd", a = this._columns.map((l, c) => {
+          const x = l.align ? ` align-${l.align}` : "", h = this._editingCell && this._editingCell.rowIndex === s && this._editingCell.key === l.key, u = i[l.key] != null ? i[l.key] : "";
+          return h ? `<div class="cell${x}" style="width:${this._colWidths[c]}px" data-key="${l.key}">
+                            <input class="cell-input" spellcheck="false">
+                        </div>` : `<div class="cell${x}" style="width:${this._colWidths[c]}px" data-key="${l.key}">${u}</div>`;
+        }).join("");
+        return `<div class="row ${r}" data-row="${s}">${a}</div>`;
+      }).join("");
+      if (this.render(te, `
+            <div class="grid-wrapper">
+                <div class="header">${e}</div>
+                <div class="body">${o}</div>
+            </div>
+        `), this._bindEvents(), this._editingCell) {
+        const i = this.$(".cell-input");
+        if (i) {
+          const { rowIndex: s, key: r } = this._editingCell, a = this._getSortedRows();
+          let l = a[s][r] != null ? a[s][r] : "";
+          const c = document.createElement("div");
+          c.innerHTML = l;
+          const x = c.textContent || c.innerText || l;
+          i.value = x, i.dataset.oldValue = x, i.focus(), i.select(), i.addEventListener("keydown", (h) => {
+            h.key === "Enter" ? this._commitEdit(i.value) : h.key === "Escape" && (this._editingCell = null, this._render());
+          }), i.addEventListener("blur", () => {
+            this._commitEdit(i.value);
+          });
+        }
+      }
+    });
+    /** @private */
+    n(this, "_commitEdit", (t) => {
+      if (!this._editingCell) return;
+      const { rowIndex: e, key: o } = this._editingCell, i = this.$(".cell-input"), s = i ? i.dataset.oldValue : "", a = this._getSortedRows()[e];
+      s !== t && (this.emit("wox-cell-change", { row: a, key: o, oldValue: s, newValue: t }), a[o] = t), this._editingCell = null, this._render();
+    });
+    /** @private */
+    n(this, "_bindEvents", () => {
+      this.$$(".header-cell").forEach((t) => {
+        t.addEventListener("click", (e) => {
+          if (e.target.closest(".resize-handle")) return;
+          const o = Number(t.dataset.col), i = this._columns[o];
+          i.sortable !== !1 && (this._sortKey === i.key ? this._sortDir = this._sortDir === "asc" ? "desc" : "asc" : (this._sortKey = i.key, this._sortDir = "asc"), this.emit("wox-sort", { key: this._sortKey, direction: this._sortDir }), this._render());
+        }), t.addEventListener("dragstart", (e) => {
+          const o = t.dataset.col;
+          e.dataTransfer.setData("text/plain", o), t.classList.add("dragging");
+        }), t.addEventListener("dragover", (e) => {
+          e.preventDefault(), t.classList.add("drag-over");
+        }), t.addEventListener("dragleave", () => {
+          t.classList.remove("drag-over");
+        }), t.addEventListener("drop", (e) => {
+          e.preventDefault(), t.classList.remove("drag-over");
+          const o = parseInt(e.dataTransfer.getData("text/plain"), 10), i = parseInt(t.dataset.col, 10);
+          o !== i && this._swapColumns(o, i);
+        }), t.addEventListener("dragend", () => {
+          t.classList.remove("dragging");
+        });
+      }), this.$$(".row").forEach((t) => {
+        t.addEventListener("click", () => {
+          const e = Number(t.dataset.row), o = this._getSortedRows();
+          this.emit("wox-row-click", { row: o[e], index: e });
+        }), t.querySelectorAll(".cell").forEach((e) => {
+          e.addEventListener("dblclick", (o) => {
+            o.stopPropagation();
+            const i = Number(t.dataset.row), s = e.dataset.key, r = this._columns.findIndex((a) => a.key === s);
+            this._columns[r].editable !== !1 && (this._editingCell = { rowIndex: i, key: s }, this._render());
+          });
+        });
+      }), this.$$(".resize-handle").forEach((t) => {
+        t.addEventListener("mousedown", (e) => {
+          e.preventDefault(), e.stopPropagation();
+          const o = Number(t.dataset.col), i = e.clientX, s = this._colWidths[o];
+          t.classList.add("active");
+          const r = (l) => {
+            const c = l.clientX - i;
+            this._colWidths[o] = Math.max(oe, s + c), this._applyWidths();
+          }, a = () => {
+            t.classList.remove("active"), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", a);
+          };
+          document.addEventListener("mousemove", r), document.addEventListener("mouseup", a);
+        });
+      });
+    });
+    /**
+     * Updates column widths in-place without full re-render (for smooth resize).
+     * @private
+     */
+    n(this, "_applyWidths", () => {
+      this.$$(".header-cell").forEach((t, e) => {
+        t.style.width = `${this._colWidths[e]}px`;
+      }), this.$$(".row").forEach((t) => {
+        t.querySelectorAll(".cell").forEach((o, i) => {
+          o.style.width = `${this._colWidths[i]}px`;
+        });
+      });
+    });
+    /** @private */
+    n(this, "_swapColumns", (t, e) => {
+      const o = [...this._columns], i = [...this._colWidths], [s] = o.splice(t, 1);
+      o.splice(e, 0, s);
+      const [r] = i.splice(t, 1);
+      i.splice(e, 0, r), this._columns = o, this._colWidths = i, this._render();
+    });
+  }
+  // { rowIndex: number, key: string }
+  connectedCallback() {
+    this._render();
+  }
+  /**
+   * Sets the column definitions.
+   * @param {Array<{key: string, label: string, width?: number, align?: string, sortable?: boolean}>} cols
+   */
+  set columns(t) {
+    this._columns = t || [], this._colWidths = this._columns.map((e) => e.width || ee), this._sortKey = null, this._sortDir = "asc", this._render();
+  }
+  /** @returns {Array} current column definitions */
+  get columns() {
+    return this._columns;
+  }
+  /**
+   * Sets the row data.
+   * @param {Array<Object>} data
+   */
+  set rows(t) {
+    this._rows = t || [], this._render();
+  }
+  /** @returns {Array} current row data */
+  get rows() {
+    return this._rows;
+  }
+}
+const ie = 4e3, G = 300, se = 200, ne = 8, re = 99999, nt = {
+  TL: { top: "16px", left: "16px" },
+  TC: { top: "16px", left: "50%", transform: "translateX(-50%)" },
+  TR: { top: "16px", right: "16px" },
+  BL: { bottom: "16px", left: "16px" },
+  BC: { bottom: "16px", left: "50%", transform: "translateX(-50%)" },
+  BR: { bottom: "16px", right: "16px" }
+}, ae = {
+  TL: "translateX(-120%)",
+  TC: "translateY(-120%)",
+  TR: "translateX(120%)",
+  BL: "translateX(-120%)",
+  BC: "translateY(120%)",
+  BR: "translateX(120%)"
+}, W = {
+  success: { bg: "#1a2e1a", border: "#4CAF50", icon: "#66BB6A", progress: "#4CAF50", text: "#c8e6c9" },
+  error: { bg: "#2e1a1a", border: "#f44336", icon: "#ef5350", progress: "#f44336", text: "#ffcdd2" },
+  warning: { bg: "#2e2a1a", border: "#FF9800", icon: "#FFA726", progress: "#FF9800", text: "#ffe0b2" },
+  info: { bg: "#1a222e", border: "#2196F3", icon: "#42A5F5", progress: "#2196F3", text: "#bbdefb" }
+}, X = {
+  success: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
+  error: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+  info: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'
+};
+let q = !1;
+const le = () => {
+  if (q) return;
+  q = !0;
+  const d = document.createElement("style");
+  d.textContent = `
+.wox-toast-container {
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	gap: ${ne}px;
+	z-index: ${re};
+	pointer-events: none;
+}
+.wox-toast {
+	pointer-events: auto;
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	min-width: 280px;
+	max-width: 420px;
+	padding: 12px 14px;
+	border-radius: var(--wox-radius-md, 6px);
+	border-left: 4px solid transparent;
+	box-shadow: var(--wox-shadow-md, 0 4px 16px rgba(0,0,0,.4));
+	font-family: var(--wox-font, 'Inter', sans-serif);
+	font-size: 14px;
+	line-height: 1.4;
+	overflow: hidden;
+	position: relative;
+}
+.wox-toast-icon {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	margin-top: 1px;
+}
+.wox-toast-message {
+	flex: 1;
+	word-break: break-word;
+}
+.wox-toast-close {
+	flex-shrink: 0;
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0 0 0 4px;
+	color: #666;
+	font-size: 18px;
+	line-height: 1;
+	transition: color .15s;
+}
+.wox-toast-progress {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 3px;
+	border-radius: 0 0 0 var(--wox-radius-md, 6px);
+}
+`, document.head.appendChild(d);
+}, B = /* @__PURE__ */ new Set(), Y = {}, de = (d) => {
+  if (Y[d]) return Y[d];
+  const p = document.createElement("div");
+  p.className = `wox-toast-container wox-toast-container-${d}`;
+  const t = nt[d];
+  return Object.assign(p.style, t), d.startsWith("B") && (p.style.flexDirection = "column-reverse"), document.body.appendChild(p), Y[d] = p, p;
+}, T = (d, p, t = {}) => {
+  le();
+  const e = `${d}::${p}`;
+  if (B.has(e)) return;
+  B.add(e);
+  const {
+    duration: o = ie,
+    closable: i = !0,
+    position: s = "BR"
+  } = t, r = W[d] || W.info, a = nt[s] ? s : "BR", l = de(a), c = document.createElement("div");
+  c.className = `wox-toast wox-toast-${d}`, c.style.backgroundColor = r.bg, c.style.borderLeftColor = r.border, c.style.color = r.text;
+  let x = `
+		<span class="wox-toast-icon" style="color:${r.icon}">${X[d] || X.info}</span>
+		<span class="wox-toast-message">${p}</span>
+	`;
+  if (i && (x += '<button class="wox-toast-close" aria-label="Close">&times;</button>'), c.innerHTML = x, i) {
+    const _ = c.querySelector(".wox-toast-close");
+    _ && (_.addEventListener("mouseenter", () => {
+      _.style.color = r.icon;
+    }), _.addEventListener("mouseleave", () => {
+      _.style.color = "#666";
+    }));
+  }
+  let h = null;
+  o > 0 && (h = document.createElement("div"), h.className = "wox-toast-progress", h.style.backgroundColor = r.progress, h.style.width = "100%", c.appendChild(h));
+  const u = ae[a];
+  c.animate(
+    [
+      { transform: u, opacity: 0 },
+      { transform: "translateX(0) translateY(0)", opacity: 1 }
+    ],
+    { duration: G, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }
+  ), l.appendChild(c);
+  let g = null, b = o, f = 0, w = null;
+  const y = () => {
+    o <= 0 || (f = Date.now(), h && (w = h.animate(
+      [
+        { width: h.style.width },
+        { width: "0%" }
+      ],
+      { duration: b, easing: "linear", fill: "forwards" }
+    )), g = setTimeout(() => M(), b));
+  }, S = () => {
+    g && (clearTimeout(g), g = null), w && w.pause();
+    const _ = Date.now() - f;
+    if (b = Math.max(b - _, 0), h && w) {
+      const k = o > 0 ? b / o * 100 : 0;
+      h.style.width = `${k}%`;
+    }
+  }, M = () => {
+    B.delete(e), g && (clearTimeout(g), g = null), w && w.cancel();
+    const _ = c.animate(
+      [
+        { transform: "translateX(0) translateY(0)", opacity: 1 },
+        { transform: u, opacity: 0 }
+      ],
+      { duration: G, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }
+    );
+    _.onfinish = () => {
+      const k = c.offsetHeight;
+      c.style.minHeight = "0", c.style.padding = "0", c.style.margin = "0", c.style.overflow = "hidden";
+      const rt = c.animate(
+        [{ height: `${k}px` }, { height: "0px" }],
+        { duration: se, easing: "ease" }
+      );
+      rt.onfinish = () => c.remove();
+    };
+  };
+  if (c.addEventListener("mouseenter", S), c.addEventListener("mouseleave", y), i) {
+    const _ = c.querySelector(".wox-toast-close");
+    _ && _.addEventListener("click", M);
+  }
+  y();
+};
+class I extends v {
+}
+/**
+ * Show a success toast notification.
+ * @param {string} message - Message to display
+ * @param {object} [options] - { duration?: number, closable?: boolean, position?: string }
+ */
+n(I, "success", (p, t) => T("success", p, t)), /**
+ * Show an error toast notification.
+ * @param {string} message - Message to display
+ * @param {object} [options] - { duration?: number, closable?: boolean, position?: string }
+ */
+n(I, "error", (p, t) => T("error", p, t)), /**
+ * Show a warning toast notification.
+ * @param {string} message - Message to display
+ * @param {object} [options] - { duration?: number, closable?: boolean, position?: string }
+ */
+n(I, "warning", (p, t) => T("warning", p, t)), /**
+ * Show an info toast notification.
+ * @param {string} message - Message to display
+ * @param {object} [options] - { duration?: number, closable?: boolean, position?: string }
+ */
+n(I, "info", (p, t) => T("info", p, t));
+const J = "wox-ctx-menu-styles", ce = "wox-ctx-menu", K = 4, pe = 3e4, he = `
+.wox-ctx-menu {
+    position: fixed;
+    background: var(--wox-bg-panel, #17171a);
+    border: 1px solid var(--wox-border, #333);
+    border-radius: var(--wox-radius-md, 6px);
+    box-shadow: var(--wox-shadow-lg);
+    padding: var(--wox-space-sm, 4px);
+    min-width: 180px;
+    z-index: ${pe};
+    font-family: var(--wox-font, 'Inter', sans-serif);
+    font-size: var(--wox-font-size-base, 12px);
+    color: var(--wox-text-primary, #eee);
+    display: none;
+}
+.wox-ctx-menu-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 6px 12px; border-radius: var(--wox-radius-sm, 3px);
+    cursor: pointer; transition: background var(--wox-transition-fast, 0.12s ease);
+    user-select: none;
+}
+.wox-ctx-menu-item:hover { background: var(--wox-bg-hover, #2a2a2e); }
+.wox-ctx-menu-item--disabled { opacity: 0.4; pointer-events: none; }
+.wox-ctx-menu-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 16px; color: var(--wox-text-secondary, #999); }
+.wox-ctx-menu-label { flex: 1; }
+.wox-ctx-menu-shortcut { font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999); margin-left: 16px; }
+.wox-ctx-menu-divider { height: 1px; background: var(--wox-border, #333); margin: 4px 8px; }
+`, ue = () => {
+  if (document.getElementById(J)) return;
+  const d = document.createElement("style");
+  d.id = J, d.textContent = he, document.head.appendChild(d);
+}, m = class m extends v {
+};
+/* ── Singleton state ── */
+/** @type {HTMLDivElement|null} */
+n(m, "_el", null), /** @type {boolean} */
+n(m, "_listenersReady", !1), /**
+ * Show the context menu at the pointer position.
+ * @param {MouseEvent} event - The triggering mouse event (used for clientX / clientY).
+ * @param {Array<{label?: string, icon?: string, action?: Function, disabled?: boolean, divider?: boolean, shortcut?: string}>} items
+ */
+n(m, "show", (p, t) => {
+  if (!p || !t) return;
+  p.preventDefault(), p.stopPropagation(), ue();
+  let e = m._el;
+  e || (e = document.createElement("div"), e.id = ce, e.className = "wox-ctx-menu", document.body.appendChild(e), m._el = e), e.innerHTML = "", t.forEach((o) => {
+    if (o.divider) {
+      const a = document.createElement("div");
+      a.className = "wox-ctx-menu-divider", e.appendChild(a);
+      return;
+    }
+    const i = document.createElement("div");
+    i.className = "wox-ctx-menu-item", o.disabled && i.classList.add("wox-ctx-menu-item--disabled");
+    const s = document.createElement("i");
+    s.className = "material-icons wox-ctx-menu-icon", s.textContent = o.icon || "", i.appendChild(s);
+    const r = document.createElement("span");
+    if (r.className = "wox-ctx-menu-label", r.textContent = o.label || "", i.appendChild(r), o.shortcut) {
+      const a = document.createElement("span");
+      a.className = "wox-ctx-menu-shortcut", a.textContent = o.shortcut, i.appendChild(a);
+    }
+    o.disabled || i.addEventListener("click", () => {
+      m.hide(), o.action && o.action();
+    }), e.appendChild(i);
+  }), e.style.display = "block", e.style.left = `${p.clientX}px`, e.style.top = `${p.clientY}px`, requestAnimationFrame(() => {
+    const o = e.getBoundingClientRect(), i = window.innerWidth, s = window.innerHeight;
+    o.right > i && (e.style.left = `${i - o.width - K}px`), o.bottom > s && (e.style.top = `${s - o.height - K}px`);
+  }), m._listenersReady || (document.addEventListener("click", m._onClickOutside, !0), document.addEventListener("contextmenu", m._onClickOutside, !0), document.addEventListener("keydown", m._onKeyDown, !0), m._listenersReady = !0);
+}), /**
+ * Hide the context menu if it is currently visible.
+ */
+n(m, "hide", () => {
+  m._el && (m._el.style.display = "none");
+}), /* ── Private global handlers ── */
+/**
+ * Closes the menu when clicking outside of it.
+ * @param {MouseEvent} e
+ * @private
+ */
+n(m, "_onClickOutside", (p) => {
+  m._el && m._el.style.display !== "none" && (m._el.contains(p.target) || m.hide());
+}), /**
+ * Closes the menu on Escape key press.
+ * @param {KeyboardEvent} e
+ * @private
+ */
+n(m, "_onKeyDown", (p) => {
+  p.key === "Escape" && m.hide();
+});
+let V = m;
+const U = 2, Z = 40, Q = 3, C = (d) => {
+  if (!d || !d.stops || d.stops.length < 2) return "";
+  const t = [...d.stops].sort((e, o) => e.position - o.position).map((e) => `${e.color} ${e.position}%`).join(", ");
+  return d.type === "linear" ? `linear-gradient(${d.angle}deg, ${t})` : `radial-gradient(circle, ${t})`;
+}, tt = (d) => {
+  if (!d) return null;
+  let p = null, t = 90, e = null;
+  const o = d.match(/^linear-gradient\(\s*(\d+)deg\s*,\s*(.+)\)$/i);
+  if (o && (p = "linear", t = parseInt(o[1], 10), e = o[2]), !p) {
+    const a = d.match(/^radial-gradient\(\s*(?:circle|ellipse)?\s*,?\s*(.+)\)$/i);
+    a && (p = "radial", e = a[1]);
+  }
+  if (!p || !e) return null;
+  const i = [], s = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))\s+(\d+(?:\.\d+)?)%/g;
+  let r;
+  for (; (r = s.exec(e)) !== null; )
+    i.push({
+      color: r[1],
+      position: parseFloat(r[2])
+    });
+  return i.length < 2 ? null : { type: p, angle: t, stops: i };
+}, xe = `
+    :host { display: block; }
+    .editor { padding: var(--wox-space-md, 8px) 0; }
+    .bar-wrapper { position: relative; margin-bottom: var(--wox-space-md, 8px); }
+    .bar {
+        height: 24px; border-radius: var(--wox-radius-sm, 3px);
+        border: 1px solid var(--wox-border, #333); cursor: crosshair;
+    }
+    .stops { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
+    .handle {
+        position: absolute; top: 50%; width: 14px; height: 14px;
+        border: 2px solid var(--wox-bg-panel, #17171a);
+        border-radius: 2px; cursor: grab; transform: translate(-50%, -50%);
+        pointer-events: auto; transition: box-shadow 0.15s, transform 0.15s;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.6); z-index: 1;
+    }
+    .handle:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.7); transform: translate(-50%,-50%) scale(1.15); }
+    .handle.dragging { cursor: grabbing; box-shadow: 0 3px 8px rgba(0,0,0,0.8); transform: translate(-50%,-50%) scale(1.2); z-index: 10; }
+    .handle.removing { opacity: 0.4; border-color: var(--wox-danger, #f72585); box-shadow: 0 2px 6px rgba(247,37,133,0.4); }
+    .color-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; pointer-events: none; }
+    .hint { font-size: var(--wox-font-size-xs, 9px); color: var(--wox-text-secondary, #999); text-align: center; margin-top: var(--wox-space-sm, 4px); }
+`;
+class Ce extends v {
+  constructor() {
+    super(...arguments);
+    /** @private */
+    n(this, "_gradient", null);
+    /** @private */
+    n(this, "_dragging", null);
+    /** @private */
+    n(this, "_justDragged", !1);
+    /**
+     * Builds the full editor DOM and binds all events.
+     * @private
+     */
+    n(this, "_build", () => {
+      if (!this._gradient) return;
+      const t = C(this._gradient);
+      this.render(xe, `
+            <div class="editor">
+                <div class="bar-wrapper">
+                    <div class="bar" style="background: ${t}"></div>
+                    <div class="stops"></div>
+                </div>
+                <div class="hint">Double-click bar to add stop &middot; Drag down to remove</div>
+            </div>
+        `), this._renderStops(), this._bindBarEvents();
+    });
+    /**
+     * Updates the gradient bar preview background.
+     * @private
+     */
+    n(this, "_updatePreview", () => {
+      const t = this.$(".bar");
+      t && (t.style.background = C(this._gradient));
+    });
+    /**
+     * Emits a gradient event with current state.
+     * @private
+     * @param {string} eventName - Event name to dispatch
+     */
+    n(this, "_emitGradient", (t) => {
+      this.emit(t, {
+        gradient: this.gradient,
+        css: C(this._gradient)
+      });
+    });
+    /**
+     * Renders all color stop handles into the stops container.
+     * @private
+     */
+    n(this, "_renderStops", () => {
+      const t = this.$(".stops");
+      if (!t) return;
+      t.innerHTML = "", [...this._gradient.stops].sort((o, i) => o.position - i.position).forEach((o) => {
+        const i = this._gradient.stops.indexOf(o), s = document.createElement("div");
+        s.className = "handle", s.style.left = o.position + "%", s.style.backgroundColor = o.color, s.dataset.index = i;
+        const r = document.createElement("input");
+        r.type = "color", r.value = o.color, r.className = "color-input", s.appendChild(r), s.addEventListener("click", (a) => {
+          if (this._justDragged) {
+            this._justDragged = !1;
+            return;
+          }
+          a.stopPropagation(), r.click();
+        }), r.addEventListener("input", (a) => {
+          const l = parseInt(s.dataset.index, 10);
+          this._gradient.stops[l].color = a.target.value, s.style.backgroundColor = a.target.value, this._updatePreview(), this._emitGradient("wox-gradient-input");
+        }), r.addEventListener("change", () => {
+          this._emitGradient("wox-gradient-change");
+        }), r.addEventListener("click", (a) => a.stopPropagation()), s.addEventListener("mousedown", (a) => {
+          if (a.target === r) return;
+          a.preventDefault(), a.stopPropagation();
+          const l = this.$(".bar");
+          if (!l) return;
+          const c = l.getBoundingClientRect(), x = parseInt(s.dataset.index, 10);
+          this._dragging = { idx: x, startY: a.clientY }, s.classList.add("dragging");
+          const h = (g) => {
+            const b = (g.clientX - c.left) / c.width * 100, f = Math.max(0, Math.min(100, Math.round(b * 10) / 10));
+            this._gradient.stops[x].position = f, s.style.left = f + "%", Math.abs(g.clientY - this._dragging.startY) > Z && this._gradient.stops.length > U ? s.classList.add("removing") : s.classList.remove("removing"), this._updatePreview(), this._emitGradient("wox-gradient-input");
+          }, u = (g) => {
+            var w;
+            document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", u), s.classList.remove("dragging");
+            const b = Math.abs(g.clientY - this._dragging.startY);
+            b > Z && this._gradient.stops.length > U ? (this._gradient.stops.splice(x, 1), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change")) : this._emitGradient("wox-gradient-change");
+            const f = Math.abs(g.clientX - (c.left + (((w = this._gradient.stops[x]) == null ? void 0 : w.position) || 0) * c.width / 100));
+            (b > Q || f > Q) && (this._justDragged = !0), this._dragging = null;
+          };
+          document.addEventListener("mousemove", h), document.addEventListener("mouseup", u);
+        }), t.appendChild(s);
+      });
+    });
+    /**
+     * Binds the double-click event on the gradient bar to add new stops.
+     * @private
+     */
+    n(this, "_bindBarEvents", () => {
+      const t = this.$(".bar");
+      t && t.addEventListener("dblclick", (e) => {
+        const o = t.getBoundingClientRect(), i = Math.round((e.clientX - o.left) / o.width * 100), s = Math.max(0, Math.min(100, i)), r = [...this._gradient.stops].sort((l, c) => l.position - c.position);
+        let a = "#888888";
+        for (let l = 0; l < r.length - 1; l++)
+          if (s >= r[l].position && s <= r[l + 1].position) {
+            a = r[l].color;
+            break;
+          }
+        this._gradient.stops.push({ color: a, position: s }), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change");
+      });
+    });
+  }
+  connectedCallback() {
+    this._gradient && this._build();
+  }
+  /**
+   * Sets the gradient data and re-renders the editor.
+   * @param {{ type: string, angle: number, stops: Array<{color: string, position: number}> }} g
+   */
+  set gradient(t) {
+    this._gradient = JSON.parse(JSON.stringify(t)), this.isConnected && this._build();
+  }
+  /**
+   * Returns a deep copy of the current gradient data.
+   * @returns {{ type: string, angle: number, stops: Array<{color: string, position: number}> }|null}
+   */
+  get gradient() {
+    return this._gradient ? JSON.parse(JSON.stringify(this._gradient)) : null;
+  }
+}
+const et = "wox_gradients", ge = "grad_preset_", be = [
+  { id: "grad_preset_sunset", name: "Sunset", type: "linear", angle: 135, stops: [{ color: "#ff512f", position: 0 }, { color: "#f09819", position: 100 }] },
+  { id: "grad_preset_ocean", name: "Ocean", type: "linear", angle: 135, stops: [{ color: "#2193b0", position: 0 }, { color: "#6dd5ed", position: 100 }] },
+  { id: "grad_preset_forest", name: "Forest", type: "linear", angle: 135, stops: [{ color: "#11998e", position: 0 }, { color: "#38ef7d", position: 100 }] },
+  { id: "grad_preset_purple_haze", name: "Purple Haze", type: "linear", angle: 135, stops: [{ color: "#7b4397", position: 0 }, { color: "#dc2430", position: 100 }] },
+  { id: "grad_preset_midnight", name: "Midnight", type: "linear", angle: 135, stops: [{ color: "#232526", position: 0 }, { color: "#414345", position: 100 }] },
+  { id: "grad_preset_peach", name: "Peach", type: "linear", angle: 135, stops: [{ color: "#ffecd2", position: 0 }, { color: "#fcb69f", position: 100 }] }
+], fe = `
+    :host { display: block; }
+    .selector { position: relative; }
+    .current {
+        display: flex; align-items: center; gap: 8px;
+        padding: 6px 8px; border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-sm, 3px); cursor: pointer;
+        background: var(--wox-bg-input, #1a1a1d); transition: border-color var(--wox-transition-fast);
+    }
+    .current:hover { border-color: var(--wox-accent, #00e5ff); }
+    .selector.open .current { border-color: var(--wox-accent, #00e5ff); }
+    .preview { width: 32px; height: 20px; border-radius: 3px; border: 1px solid var(--wox-border, #333); flex-shrink: 0; }
+    .label { flex: 1; font-size: var(--wox-font-size-lg, 13px); color: var(--wox-text-primary, #eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .chevron { font-size: 10px; color: var(--wox-text-secondary, #999); flex-shrink: 0; }
+    .dropdown {
+        display: none; position: fixed;
+        z-index: var(--wox-z-dropdown, 1000); background: var(--wox-bg-panel, #17171a);
+        border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-sm, 3px);
+        box-shadow: var(--wox-shadow-md); max-height: 280px; overflow-y: auto;
+    }
+    .selector.open .dropdown { display: block; }
+    .dropdown-item {
+        display: flex; align-items: center; gap: 8px; padding: 8px 10px;
+        cursor: pointer; transition: background var(--wox-transition-fast);
+    }
+    .dropdown-item:hover { background: var(--wox-bg-hover, #2a2a2e); }
+    .dropdown-item-preview { width: 40px; height: 20px; border-radius: 3px; border: 1px solid var(--wox-border, #333); flex-shrink: 0; }
+    .dropdown-item-label { flex: 1; font-size: var(--wox-font-size-lg, 13px); color: var(--wox-text-primary, #eee); }
+    .dropdown-item-btn {
+        display: none; background: none; border: none; color: var(--wox-text-secondary, #999);
+        font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; transition: color var(--wox-transition-fast);
+    }
+    .dropdown-item-btn.delete-btn { font-size: 16px; }
+    .dropdown-item:hover .dropdown-item-btn { display: block; }
+    .dropdown-item-btn:hover { color: var(--wox-accent, #00e5ff); }
+    .dropdown-item-btn.delete-btn:hover { color: var(--wox-danger, #f72585); }
+    .dropdown-custom { border-top: 1px solid var(--wox-border, #333); }
+    .dropdown-custom .dropdown-item-label { color: var(--wox-accent, #00e5ff); font-weight: 500; }
+    .solid-input { position: absolute; opacity: 0; pointer-events: none; }
+
+    /* Controls */
+    .controls { margin-top: 10px; display: none; }
+    .controls.visible { display: block; }
+    .ctrl-label { font-size: var(--wox-font-size-sm, 10px); color: var(--wox-text-secondary, #999); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; min-width: 40px; }
+    .type-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--wox-space-lg, 12px); }
+    .type-toggle { display: flex; gap: var(--wox-space-sm, 4px); background: var(--wox-bg-input, #1a1a1d); padding: 3px; border-radius: var(--wox-radius-sm, 3px); }
+    .type-btn {
+        background: transparent; border: none; padding: 4px 14px; cursor: pointer;
+        border-radius: 3px; font-size: var(--wox-font-size-base, 12px); font-weight: 500;
+        color: var(--wox-text-secondary, #999); transition: all var(--wox-transition-fast);
+        font-family: var(--wox-font, 'Inter', sans-serif);
+    }
+    .type-btn:hover { color: var(--wox-text-primary, #eee); background: var(--wox-bg-hover, #2a2a2e); }
+    .type-btn.active { background: var(--wox-accent, #00e5ff); color: var(--wox-text-hi, #fff); }
+    .angle-row, .speed-row { margin-bottom: var(--wox-space-lg, 12px); }
+    .anim-type-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--wox-space-lg, 12px); }
+    .anim-select {
+        flex: 1; padding: 4px 8px; border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-sm, 3px); font-size: var(--wox-font-size-base, 12px);
+        background: var(--wox-bg-input, #1a1a1d); color: var(--wox-text-primary, #eee); cursor: pointer;
+        font-family: var(--wox-font, 'Inter', sans-serif);
+    }
+
+    /* Modal body */
+    .editor-body { min-width: 400px; }
+    .name-row { display: flex; align-items: center; gap: 8px; margin-top: var(--wox-space-xl, 16px); }
+    .name-input {
+        flex: 1; padding: 6px 8px; border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-sm, 3px); font-size: var(--wox-font-size-base, 12px);
+        background: var(--wox-bg-input, #1a1a1d); color: var(--wox-text-primary, #eee);
+        font-family: var(--wox-font, 'Inter', sans-serif);
+    }
+    .name-input:focus { outline: none; border-color: var(--wox-accent, #00e5ff); }
+
+    /* Footer buttons */
+    .btn {
+        padding: 8px 16px; border-radius: var(--wox-radius-md, 6px);
+        font-family: var(--wox-font, sans-serif); font-size: var(--wox-font-size-lg, 13px);
+        font-weight: 500; cursor: pointer; border: none; transition: background var(--wox-transition-fast);
+    }
+    .btn-secondary { background: var(--wox-border, #333); color: var(--wox-text-primary, #eee); }
+    .btn-secondary:hover { background: var(--wox-border-light, #444); }
+    .btn-primary { background: var(--wox-accent, #00e5ff); color: var(--wox-text-hi, #fff); }
+    .btn-primary:hover { background: #3bb3d9; }
+`, N = () => "grad_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 7), ot = (d) => d ? d.startsWith("linear-gradient") || d.startsWith("radial-gradient") : !1;
+class ve extends v {
+  constructor() {
+    super(...arguments);
+    /** @private — Current CSS value (hex or gradient string) */
+    n(this, "_value", "#ffffff");
+    /** @private — Parsed gradient object or null for solid colors */
+    n(this, "_gradient", null);
+    /** @private — Animation speed 0-10 */
+    n(this, "_animationSpeed", 0);
+    /** @private — Animation type: 'pingpong' or 'cycle' */
+    n(this, "_animationType", "pingpong");
+    /** @private — Whether the dropdown is currently open */
+    n(this, "_open", !1);
+    /** @private — Saved gradients array */
+    n(this, "_gradients", []);
+    /** @private — Gradient currently being edited in the modal */
+    n(this, "_editingGradient", null);
+    /** @private — Name captured from the modal name input */
+    n(this, "_editingName", "");
+    /**
+     * Read attributes and update internal state.
+     * @private
+     */
+    n(this, "_syncFromAttributes", () => {
+      const t = this.getAttribute("value");
+      t && (this._value = t, this._gradient = ot(t) ? tt(t) : null);
+      const e = this.getAttribute("animation-speed");
+      e !== null && (this._animationSpeed = parseInt(e, 10) || 0);
+      const o = this.getAttribute("animation-type");
+      o && (this._animationType = o);
+    });
+    /**
+     * Load gradients from localStorage, or seed with defaults.
+     * @private
+     */
+    n(this, "_loadGradients", () => {
+      try {
+        const t = localStorage.getItem(et);
+        if (t) {
+          this._gradients = JSON.parse(t);
+          return;
+        }
+      } catch {
+      }
+      this._gradients = be.map((t) => ({ ...t, stops: t.stops.map((e) => ({ ...e })) })), this._persistGradients();
+    });
+    /**
+     * Persist gradients array to localStorage.
+     * @private
+     */
+    n(this, "_persistGradients", () => {
+      try {
+        localStorage.setItem(et, JSON.stringify(this._gradients));
+      } catch {
+      }
+    });
+    /**
+     * Upsert a gradient (update if id exists, insert otherwise) and persist.
+     * @private
+     * @param {Object} gradient - Gradient object with id, name, type, angle, stops
+     */
+    n(this, "_save", (t) => {
+      const e = this._gradients.findIndex((o) => o.id === t.id);
+      e >= 0 ? this._gradients[e] = t : this._gradients.push(t), this._persistGradients();
+    });
+    /**
+     * Delete a gradient by ID and persist.
+     * @private
+     * @param {string} id - Gradient ID to remove
+     */
+    n(this, "_delete", (t) => {
+      this._gradients = this._gradients.filter((e) => e.id !== t), this._persistGradients();
+    });
+    /**
+     * Find a gradient by its ID.
+     * @private
+     * @param {string} id
+     * @returns {Object|undefined}
+     */
+    n(this, "_getById", (t) => this._gradients.find((e) => e.id === t));
+    /**
+     * Derive a human-readable label from a CSS value.
+     * @private
+     * @param {string} value
+     * @returns {string}
+     */
+    n(this, "_labelForValue", (t) => {
+      if (!t) return "None";
+      if (ot(t)) {
+        for (const e of this._gradients)
+          if (C(e) === t) return e.name;
+        return "Custom Gradient";
+      }
+      return t;
+    });
+    /**
+     * Build the full shadow DOM and bind events.
+     * @private
+     */
+    n(this, "_build", () => {
+      const t = !!this._gradient, e = this._gradient ? this._gradient.type : "linear", o = this._gradient ? this._gradient.angle : 90, i = e !== "radial";
+      this.render(fe, `
+            <div class="selector">
+                <div class="current">
+                    <div class="preview"></div>
+                    <span class="label">${this._labelForValue(this._value)}</span>
+                    <span class="chevron">&#9662;</span>
+                </div>
+                <div class="dropdown"></div>
+            </div>
+            <div class="controls${t ? " visible" : ""}">
+                <div class="type-row">
+                    <span class="ctrl-label">Type</span>
+                    <div class="type-toggle">
+                        <button class="type-btn${i ? " active" : ""}" data-type="linear">Linear</button>
+                        <button class="type-btn${i ? "" : " active"}" data-type="radial">Radial</button>
+                    </div>
+                </div>
+                <div class="angle-row" ${i ? "" : 'style="display:none"'}>
+                    <wox-slider label="ANGLE" value="${o}" min="0" max="360" step="1" show-value></wox-slider>
+                </div>
+                <div class="speed-row">
+                    <wox-slider label="SPEED" value="${this._animationSpeed}" min="0" max="10" step="1" show-value></wox-slider>
+                </div>
+                <div class="anim-type-row" ${this._animationSpeed <= 0 ? 'style="display:none"' : ""}>
+                    <span class="ctrl-label">Anim</span>
+                    <select class="anim-select">
+                        <option value="pingpong"${this._animationType === "pingpong" ? " selected" : ""}>Ping Pong</option>
+                        <option value="cycle"${this._animationType === "cycle" ? " selected" : ""}>Cycle</option>
+                    </select>
+                </div>
+            </div>
+            <wox-modal class="editor-modal" title="Custom Gradient" width="480px">
+                <div class="editor-body">
+                    <wox-gradient-editor class="modal-editor"></wox-gradient-editor>
+                    <div class="name-row">
+                        <span class="ctrl-label">Name</span>
+                        <input type="text" class="name-input" placeholder="Gradient name">
+                    </div>
+                </div>
+                <div slot="footer">
+                    <button class="btn btn-secondary cancel-btn">Cancel</button>
+                    <button class="btn btn-primary apply-btn">Apply</button>
+                    <button class="btn btn-primary save-btn">Save &amp; Apply</button>
+                </div>
+            </wox-modal>
+        `), this._updatePreview(), this._bindEvents();
+    });
+    /**
+     * Update the preview swatch and label text.
+     * @private
+     */
+    n(this, "_updatePreview", () => {
+      const t = this.$(".preview"), e = this.$(".label");
+      t && (t.style.background = this._value), e && (e.textContent = this._labelForValue(this._value));
+    });
+    /**
+     * Sync all controls (type toggle, angle, speed, anim type) to current state.
+     * @private
+     */
+    n(this, "_syncControls", () => {
+      const t = this.$(".controls");
+      if (!t) return;
+      if (!this._gradient) {
+        t.classList.remove("visible");
+        return;
+      }
+      t.classList.add("visible");
+      const e = this._gradient.type !== "radial";
+      this.$$(".type-btn").forEach((l) => {
+        l.classList.toggle("active", l.dataset.type === this._gradient.type);
+      });
+      const o = this.$(".angle-row");
+      o && (o.style.display = e ? "" : "none");
+      const i = this.$(".angle-row wox-slider");
+      i && i.setAttribute("value", this._gradient.angle);
+      const s = this.$(".speed-row wox-slider");
+      s && s.setAttribute("value", this._animationSpeed);
+      const r = this.$(".anim-type-row");
+      r && (r.style.display = this._animationSpeed > 0 ? "" : "none");
+      const a = this.$(".anim-select");
+      a && (a.value = this._animationType);
+    });
+    /**
+     * Bind all interactive event listeners.
+     * @private
+     */
+    n(this, "_bindEvents", () => {
+      this.$(".current").addEventListener("click", (h) => {
+        h.stopPropagation(), this._open ? this._closeDropdown() : this._openDropdown();
+      }), this.$$(".type-btn").forEach((h) => {
+        h.addEventListener("click", () => {
+          if (!this._gradient) return;
+          this.$$(".type-btn").forEach((g) => g.classList.remove("active")), h.classList.add("active"), this._gradient.type = h.dataset.type;
+          const u = this.$(".angle-row");
+          u && (u.style.display = h.dataset.type === "linear" ? "" : "none"), this._applyGradient();
+        });
+      });
+      const e = this.$(".angle-row wox-slider");
+      e && (e.addEventListener("wox-input", (h) => {
+        this._gradient && (this._gradient.angle = h.detail.value, this._applyGradient());
+      }), e.addEventListener("wox-change", (h) => {
+        this._gradient && (this._gradient.angle = h.detail.value, this._applyGradient());
+      }));
+      const o = this.$(".speed-row wox-slider");
+      o && (o.addEventListener("wox-input", (h) => {
+        this._animationSpeed = h.detail.value;
+        const u = this.$(".anim-type-row");
+        u && (u.style.display = this._animationSpeed > 0 ? "" : "none"), this._emitChange();
+      }), o.addEventListener("wox-change", (h) => {
+        this._animationSpeed = h.detail.value;
+        const u = this.$(".anim-type-row");
+        u && (u.style.display = this._animationSpeed > 0 ? "" : "none"), this._emitChange();
+      }));
+      const i = this.$(".anim-select");
+      i && i.addEventListener("change", (h) => {
+        this._animationType = h.target.value, this._emitChange();
+      });
+      const s = this.$(".cancel-btn");
+      s && s.addEventListener("click", () => {
+        this._closeModal();
+      });
+      const r = this.$(".apply-btn");
+      r && r.addEventListener("click", () => {
+        this._applyFromEditor(!1);
+      });
+      const a = this.$(".save-btn");
+      a && a.addEventListener("click", () => {
+        this._applyFromEditor(!0);
+      });
+      const l = this.$(".name-input");
+      l && l.addEventListener("input", (h) => {
+        this._editingName = h.target.value.trim();
+      });
+      const c = this.$(".modal-editor");
+      c && (c.addEventListener("wox-gradient-input", (h) => {
+        this._editingGradient = h.detail.gradient;
+      }), c.addEventListener("wox-gradient-change", (h) => {
+        this._editingGradient = h.detail.gradient;
+      }));
+      const x = this.$(".editor-modal");
+      x && x.addEventListener("wox-close", () => {
+        this._editingGradient = null, this._editingName = "";
+      });
+    });
+    /**
+     * Open the dropdown and populate its items.
+     * @private
+     */
+    n(this, "_openDropdown", () => {
+      this._open = !0, this.$(".selector").classList.add("open"), this._populateDropdown(), this._positionDropdown();
+    });
+    /**
+     * Position the fixed dropdown relative to the trigger, flipping up if needed.
+     * @private
+     */
+    n(this, "_positionDropdown", () => {
+      const t = this.$(".current"), e = this.$(".dropdown");
+      if (!t || !e) return;
+      const o = t.getBoundingClientRect(), i = window.innerHeight;
+      e.style.left = `${o.left}px`, e.style.width = `${o.width}px`;
+      const s = i - o.bottom, r = o.top, a = 280;
+      s >= a || s >= r ? (e.style.top = `${o.bottom}px`, e.style.bottom = "", e.style.maxHeight = `${Math.min(a, s - 4)}px`) : (e.style.top = "", e.style.bottom = `${i - o.top}px`, e.style.maxHeight = `${Math.min(a, r - 4)}px`);
+    });
+    /**
+     * Close the dropdown.
+     * @private
+     */
+    n(this, "_closeDropdown", () => {
+      this._open = !1, this.$(".selector").classList.remove("open");
+    });
+    /**
+     * Build dropdown items: solid color, saved gradients, custom option.
+     * @private
+     */
+    n(this, "_populateDropdown", () => {
+      const t = this.$(".dropdown");
+      if (!t) return;
+      let e = "";
+      const o = this._value.startsWith("#") ? this._value : "#ffffff";
+      e += `
+            <div class="dropdown-item" data-action="solid">
+                <div class="dropdown-item-preview" style="background: #ffffff"></div>
+                <span class="dropdown-item-label">Solid Color</span>
+                <input type="color" class="solid-input" value="${o}">
+            </div>
+        `, this._gradients.forEach((i) => {
+        const s = C(i), r = i.id.startsWith(ge), a = r ? `<button class="dropdown-item-btn" data-dup-id="${i.id}" title="Duplicate gradient">&#x2398;</button>` : "", l = r ? "" : `<button class="dropdown-item-btn" data-edit-id="${i.id}" title="Edit gradient">&#9998;</button>`, c = r ? "" : `<button class="dropdown-item-btn delete-btn" data-delete-id="${i.id}" title="Delete gradient">&times;</button>`;
+        e += `
+                <div class="dropdown-item" data-gradient-id="${i.id}">
+                    <div class="dropdown-item-preview" style="background: ${s}"></div>
+                    <span class="dropdown-item-label">${i.name}</span>
+                    ${a}
+                    ${l}
+                    ${c}
+                </div>
+            `;
+      }), e += `
+            <div class="dropdown-item dropdown-custom" data-action="custom">
+                <span class="dropdown-item-label">Custom Gradient...</span>
+            </div>
+        `, t.innerHTML = e, this._bindDropdown();
+    });
+    /**
+     * Bind event listeners for dropdown items.
+     * @private
+     */
+    n(this, "_bindDropdown", () => {
+      const t = this.$(".dropdown");
+      if (!t) return;
+      const e = t.querySelector('[data-action="solid"]'), o = t.querySelector(".solid-input");
+      e && o && (e.addEventListener("click", (s) => {
+        s.stopPropagation(), o.style.pointerEvents = "auto", o.click();
+      }), o.addEventListener("input", (s) => {
+        this._value = s.target.value, this._gradient = null, this._animationSpeed = 0, this._updatePreview(), this._syncControls(), this._emitChange();
+      }), o.addEventListener("change", () => {
+        o.style.pointerEvents = "none";
+      }), o.addEventListener("click", (s) => s.stopPropagation())), t.querySelectorAll("[data-gradient-id]").forEach((s) => {
+        s.addEventListener("click", (r) => {
+          if (r.target.hasAttribute("data-delete-id") || r.target.hasAttribute("data-edit-id") || r.target.hasAttribute("data-dup-id")) return;
+          const a = this._getById(s.dataset.gradientId);
+          a && (this._gradient = JSON.parse(JSON.stringify(a)), this._value = C(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeDropdown());
+        });
+      }), t.querySelectorAll("[data-dup-id]").forEach((s) => {
+        s.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const a = this._getById(s.dataset.dupId);
+          if (!a) return;
+          const l = {
+            id: N(),
+            name: a.name + " Copy",
+            type: a.type,
+            angle: a.angle,
+            stops: a.stops.map((c) => ({ ...c }))
+          };
+          this._closeDropdown(), this._openEditorDialog(l);
+        });
+      }), t.querySelectorAll("[data-edit-id]").forEach((s) => {
+        s.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const a = this._getById(s.dataset.editId);
+          a && (this._closeDropdown(), this._openEditorDialog(JSON.parse(JSON.stringify(a))));
+        });
+      }), t.querySelectorAll("[data-delete-id]").forEach((s) => {
+        s.addEventListener("click", (r) => {
+          r.stopPropagation(), this._delete(s.dataset.deleteId), this._populateDropdown();
+        });
+      });
+      const i = t.querySelector('[data-action="custom"]');
+      i && i.addEventListener("click", (s) => {
+        s.stopPropagation(), this._closeDropdown(), this._openEditorDialog();
+      });
+    });
+    /**
+     * Open the editor modal with a gradient to edit.
+     * @private
+     * @param {Object} [existingGradient] - Gradient to edit; omit to create new
+     */
+    n(this, "_openEditorDialog", (t) => {
+      let e;
+      t ? e = JSON.parse(JSON.stringify(t)) : (e = tt(this._value), e ? (e.id = e.id || N(), e.name = e.name || "Custom Gradient") : e = {
+        id: N(),
+        name: "Custom Gradient",
+        type: "linear",
+        angle: 90,
+        stops: [
+          { color: this._value.startsWith("#") ? this._value : "#000000", position: 0 },
+          { color: "#ffffff", position: 100 }
+        ]
+      }), this._editingGradient = JSON.parse(JSON.stringify(e)), this._editingName = e.name;
+      const o = this.$(".modal-editor");
+      o && (o.gradient = this._editingGradient);
+      const i = this.$(".name-input");
+      i && (i.value = e.name), this._editingOriginalId = e.id;
+      const s = this.$(".editor-modal");
+      s && s.setAttribute("open", "");
+    });
+    /**
+     * Apply the edited gradient from the modal.
+     * @private
+     * @param {boolean} save - Whether to persist to localStorage
+     */
+    n(this, "_applyFromEditor", (t) => {
+      if (!this._editingGradient) return;
+      const e = JSON.parse(JSON.stringify(this._editingGradient));
+      this._editingName && (e.name = this._editingName), e.id = this._editingOriginalId || e.id || N(), t && this._save(e), this._gradient = JSON.parse(JSON.stringify(e)), this._value = C(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeModal();
+    });
+    /**
+     * Close the editor modal.
+     * @private
+     */
+    n(this, "_closeModal", () => {
+      const t = this.$(".editor-modal");
+      t && t.removeAttribute("open"), this._editingGradient = null, this._editingName = "", this._editingOriginalId = null;
+    });
+    /**
+     * Recompute CSS from the current gradient object and emit change.
+     * @private
+     */
+    n(this, "_applyGradient", () => {
+      this._gradient && (this._value = C(this._gradient), this._updatePreview(), this._emitChange());
+    });
+    /**
+     * Emit the wox-gradient-change event with current state.
+     * @private
+     */
+    n(this, "_emitChange", () => {
+      this.emit("wox-gradient-change", {
+        value: this._value,
+        animationSpeed: this._animationSpeed,
+        animationType: this._animationType
+      });
+    });
+  }
+  connectedCallback() {
+    this._loadGradients(), this._syncFromAttributes(), this._build(), this._outsideClickHandler = (t) => {
+      !this._open || this.contains(t.target) || t.composedPath().includes(this) || this._closeDropdown();
+    }, document.addEventListener("click", this._outsideClickHandler);
+  }
+  disconnectedCallback() {
+    this._outsideClickHandler && document.removeEventListener("click", this._outsideClickHandler);
+  }
+  attributeChangedCallback(t) {
+    this.isConnected && (this._syncFromAttributes(), this._updatePreview(), this._syncControls());
+  }
+}
+n(ve, "observedAttributes", ["value", "animation-speed", "animation-type"]);
+const we = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], me = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], it = 10, _e = `
+    :host {
+        display: block;
+        width: 280px;
+        background: var(--wox-bg-panel, #17171a);
+        border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-md, 6px);
+        box-shadow: var(--wox-shadow-md, 0 4px 16px rgba(0,0,0,0.4));
+        padding: 12px;
+        user-select: none;
+        font-family: var(--wox-font, 'Inter', sans-serif);
+        font-size: var(--wox-font-size-base, 12px);
+        color: var(--wox-text-primary, #eee);
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+    }
+
+    .month-year {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-weight: 600;
+        font-size: 13px;
+        color: var(--wox-text-primary, #eee);
+    }
+
+    .year-select {
+        background: transparent;
+        border: none;
+        color: var(--wox-text-primary, #eee);
+        font-size: 13px;
+        font-weight: 600;
+        font-family: var(--wox-font, sans-serif);
+        cursor: pointer;
+        padding: 2px 4px;
+        border-radius: var(--wox-radius-md, 6px);
+        outline: none;
+    }
+
+    .year-select:hover {
+        background: var(--wox-bg-hover, #2a2a2e);
+    }
+
+    .year-select option {
+        background: var(--wox-bg-panel, #17171a);
+        color: var(--wox-text-primary, #eee);
+    }
+
+    .nav-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--wox-text-secondary, #999);
+        width: 26px;
+        height: 26px;
+        border-radius: var(--wox-radius-md, 6px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        line-height: 1;
+        transition: background 0.12s, color 0.12s;
+        padding: 0;
+    }
+
+    .nav-btn:hover {
+        background: var(--wox-bg-hover, #2a2a2e);
+        color: var(--wox-text-primary, #eee);
+    }
+
+    .day-headers {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        margin-bottom: 2px;
+    }
+
+    .day-header {
+        text-align: center;
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--wox-text-secondary, #999);
+        padding: 4px 0;
+    }
+
+    .calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 1px;
+    }
+
+    .day-cell {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        border-radius: var(--wox-radius-md, 6px);
+        cursor: pointer;
+        transition: background 0.1s, color 0.1s;
+        color: var(--wox-text-primary, #eee);
+        position: relative;
+    }
+
+    .day-cell:hover {
+        background: var(--wox-bg-hover, #2a2a2e);
+    }
+
+    .day-cell.other-month {
+        color: var(--wox-text-secondary, #999);
+        opacity: 0.4;
+    }
+
+    .day-cell.today {
+        outline: 1px solid var(--wox-accent, #00e5ff);
+        outline-offset: -1px;
+        color: var(--wox-accent, #00e5ff);
+        font-weight: 600;
+    }
+
+    .day-cell.selected {
+        background: var(--wox-accent, #00e5ff);
+        color: #000;
+        font-weight: 600;
+    }
+
+    .day-cell.selected:hover {
+        background: var(--wox-accent, #00e5ff);
+    }
+
+    .day-cell.range-start,
+    .day-cell.range-end {
+        background: var(--wox-accent, #00e5ff);
+        color: #000;
+        font-weight: 600;
+    }
+
+    .day-cell.range-start:hover,
+    .day-cell.range-end:hover {
+        background: var(--wox-accent, #00e5ff);
+    }
+
+    .day-cell.in-range {
+        background: rgba(0, 229, 255, 0.15);
+        border-radius: 0;
+    }
+
+    .day-cell.range-start { border-radius: var(--wox-radius-md, 6px) 0 0 var(--wox-radius-md, 6px); }
+    .day-cell.range-end   { border-radius: 0 var(--wox-radius-md, 6px) var(--wox-radius-md, 6px) 0; }
+
+    .day-cell.range-hover {
+        background: rgba(0, 229, 255, 0.08);
+    }
+
+    .day-cell.disabled {
+        pointer-events: none;
+        opacity: 0.25;
+    }
+
+    .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        gap: 8px;
+    }
+
+    .mode-hint {
+        font-size: 10px;
+        color: var(--wox-text-secondary, #999);
+        flex: 1;
+    }
+
+    .today-btn {
+        background: none;
+        border: 1px solid var(--wox-border, #333);
+        border-radius: var(--wox-radius-md, 6px);
+        color: var(--wox-text-secondary, #999);
+        font-size: 10px;
+        font-family: var(--wox-font, sans-serif);
+        cursor: pointer;
+        padding: 3px 8px;
+        transition: background 0.12s, color 0.12s, border-color 0.12s;
+    }
+
+    .today-btn:hover {
+        background: var(--wox-bg-hover, #2a2a2e);
+        color: var(--wox-accent, #00e5ff);
+        border-color: var(--wox-accent, #00e5ff);
+    }
+
+    :host([disabled]) {
+        opacity: 0.4;
+        pointer-events: none;
+    }
+`;
+class ye extends v {
+  constructor() {
+    super(...arguments);
+    /** @type {Date} Currently viewed month/year */
+    n(this, "_currentDate", /* @__PURE__ */ new Date());
+    /** @type {string|null} Selected date in single mode (YYYY-MM-DD) */
+    n(this, "_selectedDate", null);
+    /** @type {{ start: string|null, end: string|null }} */
+    n(this, "_selectedRange", { start: null, end: null });
+    // ── Private ─────────────────────────────────────────────────────────────────
+    /** @private */
+    n(this, "_navigateMonth", (t) => {
+      const e = this._currentDate.getFullYear(), o = this._currentDate.getMonth() + t;
+      this._currentDate = new Date(e, o, 1), this._render();
+    });
+    /** @private */
+    n(this, "_navigateToYear", (t) => {
+      this._currentDate = new Date(t, this._currentDate.getMonth(), 1), this._render();
+    });
+    /** @private */
+    n(this, "_goToday", () => {
+      const t = /* @__PURE__ */ new Date(), e = st(t);
+      this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1), this.rangeMode ? this._selectedRange = { start: e, end: null } : (this._selectedDate = e, this.emit("wox-change", { date: e })), this._render();
+    });
+    /** @private */
+    n(this, "_handleDayClick", (t) => {
+      const e = t.dataset.date;
+      if (e) {
+        if (t.classList.contains("other-month")) {
+          const o = P(e);
+          this._currentDate = new Date(o.getFullYear(), o.getMonth(), 1);
+        }
+        this.rangeMode ? this._handleRangeSelection(e) : (this._selectedDate = e, this.emit("wox-change", { date: e }), this._render());
+      }
+    });
+    /** @private */
+    n(this, "_handleRangeSelection", (t) => {
+      !this._selectedRange.start || this._selectedRange.end ? this._selectedRange = { start: t, end: null } : (t < this._selectedRange.start ? this._selectedRange = { start: t, end: this._selectedRange.start } : this._selectedRange.end = t, this.emit("wox-change", { start: this._selectedRange.start, end: this._selectedRange.end })), this._render();
+    });
+    /** @private DOM manipulation only — no re-render */
+    n(this, "_updateRangeHover", (t) => {
+      if (!t) return;
+      const e = this._selectedRange.start;
+      this.$$(".day-cell:not(.other-month)").forEach((o) => {
+        const i = o.dataset.date;
+        o.classList.toggle("range-hover", i > e && i <= t);
+      });
+    });
+    /** @private */
+    n(this, "_clearRangeHover", () => {
+      this.$$(".day-cell.range-hover").forEach((t) => t.classList.remove("range-hover"));
+    });
+    /** @private */
+    n(this, "_generateYearOptions", (t) => {
+      let e = "";
+      for (let o = t - it; o <= t + it; o++)
+        e += `<option value="${o}"${o === t ? " selected" : ""}>${o}</option>`;
+      return e;
+    });
+    /** @private */
+    n(this, "_generateGrid", (t, e) => {
+      const i = st(/* @__PURE__ */ new Date()), s = new Date(t, e, 1).getDay(), r = new Date(t, e + 1, 0).getDate();
+      let a = "";
+      const l = e === 0 ? t - 1 : t, c = e === 0 ? 11 : e - 1, x = new Date(l, c + 1, 0).getDate();
+      for (let b = s - 1; b >= 0; b--) {
+        const f = x - b, w = j(l, c, f);
+        a += `<div class="day-cell other-month" data-date="${w}">${f}</div>`;
+      }
+      for (let b = 1; b <= r; b++) {
+        const f = j(t, e, b);
+        let w = "day-cell";
+        f === i && (w += " today"), this.rangeMode ? this._selectedRange.start && f === this._selectedRange.start ? w += " range-start" : this._selectedRange.end && f === this._selectedRange.end ? w += " range-end" : ke(f, this._selectedRange.start, this._selectedRange.end) && (w += " in-range") : this._selectedDate && f === this._selectedDate && (w += " selected"), a += `<div class="${w}" data-date="${f}">${b}</div>`;
+      }
+      const h = Math.ceil((s + r) / 7) * 7, u = e === 11 ? t + 1 : t, g = e === 11 ? 0 : e + 1;
+      for (let b = 1; b <= h - s - r; b++) {
+        const f = j(u, g, b);
+        a += `<div class="day-cell other-month" data-date="${f}">${b}</div>`;
+      }
+      return a;
+    });
+    /** @private */
+    n(this, "_getModeHint", () => this.rangeMode ? this._selectedRange.start ? this._selectedRange.end ? `${this._selectedRange.start} → ${this._selectedRange.end}` : "Select end date" : "Select start date" : "Select a date");
+    /** @private */
+    n(this, "_render", () => {
+      const t = this._currentDate.getFullYear(), e = this._currentDate.getMonth();
+      this.render(_e, `
+            <div class="header">
+                <button class="nav-btn" id="prev-month">&#8249;</button>
+                <div class="month-year">
+                    ${we[e]}
+                    <select class="year-select">${this._generateYearOptions(t)}</select>
+                </div>
+                <button class="nav-btn" id="next-month">&#8250;</button>
+            </div>
+            <div class="day-headers">
+                ${me.map((o) => `<div class="day-header">${o}</div>`).join("")}
+            </div>
+            <div class="calendar-grid">
+                ${this._generateGrid(t, e)}
+            </div>
+            <div class="footer">
+                <span class="mode-hint">${this._getModeHint()}</span>
+                <button class="today-btn">Today</button>
+            </div>
+        `);
+    });
+  }
+  connectedCallback() {
+    this._boundShadowClick = (t) => {
+      if (this.hasAttribute("disabled")) return;
+      const e = t.target.closest("button");
+      if (e) {
+        if (e.id === "prev-month") {
+          this._navigateMonth(-1);
+          return;
+        }
+        if (e.id === "next-month") {
+          this._navigateMonth(1);
+          return;
+        }
+        if (e.classList.contains("today-btn")) {
+          this._goToday();
+          return;
+        }
+      }
+      const o = t.target.closest(".day-cell");
+      if (o) {
+        this._handleDayClick(o);
+        return;
+      }
+    }, this._boundShadowChange = (t) => {
+      t.target.classList.contains("year-select") && this._navigateToYear(parseInt(t.target.value, 10));
+    }, this._boundShadowMouseover = (t) => {
+      if (!this.hasAttribute("range-mode")) return;
+      const e = t.target.closest(".day-cell");
+      e && this._selectedRange.start && !this._selectedRange.end && this._updateRangeHover(e.dataset.date);
+    }, this._boundShadowMouseleave = () => {
+      this._clearRangeHover();
+    }, this.shadowRoot.addEventListener("click", this._boundShadowClick), this.shadowRoot.addEventListener("change", this._boundShadowChange), this.shadowRoot.addEventListener("mouseover", this._boundShadowMouseover), this.addEventListener("mouseleave", this._boundShadowMouseleave), this._render();
+  }
+  disconnectedCallback() {
+    this.shadowRoot.removeEventListener("click", this._boundShadowClick), this.shadowRoot.removeEventListener("change", this._boundShadowChange), this.shadowRoot.removeEventListener("mouseover", this._boundShadowMouseover), this.removeEventListener("mouseleave", this._boundShadowMouseleave);
+  }
+  attributeChangedCallback(t, e, o) {
+    if (!(e === o || !this.isConnected)) {
+      if (t === "range-mode")
+        this._selectedDate = null, this._selectedRange = { start: null, end: null };
+      else if (t === "value" && o !== null) {
+        this._selectedDate = o;
+        const i = P(o);
+        isNaN(i) || (this._currentDate = new Date(i.getFullYear(), i.getMonth(), 1));
+      } else t === "range-start" ? this._selectedRange.start = o : t === "range-end" && (this._selectedRange.end = o);
+      this._render();
+    }
+  }
+  // ── Getters / Setters ───────────────────────────────────────────────────────
+  /** @type {boolean} Enables range selection mode. */
+  get rangeMode() {
+    return this.hasAttribute("range-mode");
+  }
+  set rangeMode(t) {
+    t ? this.setAttribute("range-mode", "") : this.removeAttribute("range-mode");
+  }
+  /** @type {boolean} Disables all interaction. */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  // ── Public API ──────────────────────────────────────────────────────────────
+  /**
+   * Selects a date in single mode and navigates to its month.
+   * @param {string} dateStr - YYYY-MM-DD
+   */
+  setDate(t) {
+    if (this.rangeMode) return;
+    this._selectedDate = t;
+    const e = P(t);
+    isNaN(e) || (this._currentDate = new Date(e.getFullYear(), e.getMonth(), 1)), this._render();
+  }
+  /**
+   * Sets both range endpoints and navigates to the start month.
+   * @param {string} start - YYYY-MM-DD
+   * @param {string} end   - YYYY-MM-DD
+   */
+  setRange(t, e) {
+    if (!this.rangeMode) return;
+    this._selectedRange = { start: t, end: e };
+    const o = P(t);
+    this._currentDate = new Date(o.getFullYear(), o.getMonth(), 1), this._render();
+  }
+  /** @returns {string|null} */
+  getSelectedDate() {
+    return this._selectedDate;
+  }
+  /** @returns {{ start: string|null, end: string|null }} */
+  getSelectedRange() {
+    return { ...this._selectedRange };
+  }
+  /** Clears selection and re-renders. */
+  clear() {
+    this._selectedDate = null, this._selectedRange = { start: null, end: null }, this._render();
+  }
+}
+n(ye, "observedAttributes", ["range-mode", "value", "range-start", "range-end", "disabled"]);
+const st = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`, P = (d) => {
+  const [p, t, e] = d.split("-").map(Number);
+  return new Date(p, t - 1, e);
+}, j = (d, p, t) => `${d}-${String(p + 1).padStart(2, "0")}-${String(t).padStart(2, "0")}`, ke = (d, p, t) => !p || !t ? !1 : d > p && d < t;
+export {
+  R as FX_STYLES,
+  gt as WoxBadge,
+  ft as WoxButton,
+  Lt as WoxColorPicker,
+  Et as WoxColorSwatch,
+  V as WoxContextMenu,
+  Ee as WoxDatagrid,
+  ye as WoxDatePicker,
+  v as WoxElement,
+  Ce as WoxGradientEditor,
+  ve as WoxGradientSelector,
+  pt as WoxIcon,
+  wt as WoxInput,
+  Tt as WoxLayerItem,
+  Rt as WoxMenu,
+  zt as WoxMenuItem,
+  Kt as WoxMenubar,
+  Qt as WoxModal,
+  qt as WoxPanel,
+  Nt as WoxSection,
+  _t as WoxSelect,
+  ut as WoxSeparator,
+  kt as WoxSlider,
+  Ut as WoxStatusbar,
+  Ft as WoxTab,
+  Bt as WoxTabs,
+  I as WoxToast,
+  Wt as WoxToolbar,
+  jt as WoxToolbarGroup,
+  At as WoxTooltip,
+  tt as cssToGradient,
+  C as gradientToCSS
+};