builder-settings-types 0.0.293 → 0.0.294

package/dist/builder-settings-types.es.js

@@ -450,13 +450,13 @@ const K = class K {
         w(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
         const a = e.draw(), l = this.deleteItemCfg ?? this.addItemCfg;
         if (l) {
-          const p = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
-          p && t.startsWith(p) && this.addDeleteButtonToElement(a, t);
+          const h = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
+          h && t.startsWith(h) && this.addDeleteButtonToElement(a, t);
         }
         const r = o.querySelector(".sg-add-button-bottom");
         r ? o.insertBefore(a, r) : o.appendChild(a), it.trackElement(a), q(a, this.nestingLevel + 1), Q(a, this.nestingLevel + 1);
-        const h = a.style.display;
-        a.style.display = "none", a.offsetHeight, a.style.display = h, this.updateNestingStyles();
+        const p = a.style.display;
+        a.style.display = "none", a.offsetHeight, a.style.display = p, this.updateNestingStyles();
       }
     }
     const i = this.getValues();
@@ -473,9 +473,9 @@ const K = class K {
       const r = Array.from(
         t.querySelectorAll(".setting-group-title")
       );
-      for (const h of r)
-        if (h.closest(".setting-group") === t) {
-          s = h;
+      for (const p of r)
+        if (p.closest(".setting-group") === t) {
+          s = p;
           break;
         }
       s || (s = r[0] ?? null);
@@ -508,8 +508,8 @@ const K = class K {
     }), o.addEventListener("mouseleave", () => {
       o.style.backgroundColor = "transparent";
     }), o.addEventListener("click", (r) => {
-      r.stopPropagation(), r.preventDefault(), this.showDeleteConfirmation().then((h) => {
-        h && (i && i.deleteItemCfg ? this.removeSetting(e) : this.removeSetting(e));
+      r.stopPropagation(), r.preventDefault(), this.showDeleteConfirmation().then((p) => {
+        p && (i && i.deleteItemCfg ? this.removeSetting(e) : this.removeSetting(e));
       });
     });
     const l = n.querySelector(".setting-group-arrow");
@@ -603,13 +603,13 @@ const K = class K {
         r(), t(!1);
       }), l.addEventListener("click", () => {
         r(), t(!0);
-      }), e.addEventListener("click", (p) => {
-        p.target === e && (r(), t(!1));
+      }), e.addEventListener("click", (h) => {
+        h.target === e && (r(), t(!1));
       });
-      const h = (p) => {
-        p.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", h));
+      const p = (h) => {
+        h.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", p));
       };
-      document.addEventListener("keydown", h), o.appendChild(a), o.appendChild(l), i.appendChild(s), i.appendChild(n), i.appendChild(o), e.appendChild(i), document.body.appendChild(e), requestAnimationFrame(() => {
+      document.addEventListener("keydown", p), o.appendChild(a), o.appendChild(l), i.appendChild(s), i.appendChild(n), i.appendChild(o), e.appendChild(i), document.body.appendChild(e), requestAnimationFrame(() => {
         e.style.opacity = "1", i.style.transform = "scale(1)";
       }), setTimeout(() => l.focus(), 100);
     });
@@ -731,41 +731,41 @@ const K = class K {
         (!this.isCollapsed).toString()
       );
     };
-    if (e.onclick = l, e.onkeydown = (h) => {
-      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), l());
+    if (e.onclick = l, e.onkeydown = (p) => {
+      (p.key === "Enter" || p.key === " ") && (p.preventDefault(), l());
     }, Object.keys(this.settings).length > 0) {
-      for (const h in this.settings)
-        if (Object.prototype.hasOwnProperty.call(this.settings, h)) {
-          const p = this.settings[h];
-          w(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.nestingLevel + 1);
-          const d = p.draw();
-          w(p) && p.deleteItemCfg && this.addDeleteButtonToElement(
+      for (const p in this.settings)
+        if (Object.prototype.hasOwnProperty.call(this.settings, p)) {
+          const h = this.settings[p];
+          w(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.nestingLevel + 1);
+          const d = h.draw();
+          w(h) && h.deleteItemCfg && this.addDeleteButtonToElement(
             d,
-            h,
-            p
+            p,
+            h
           ), a.appendChild(d);
         }
     } else {
-      const h = document.createElement("div");
-      h.className = "setting-group-empty", h.textContent = "No settings in this group", a.appendChild(h);
+      const p = document.createElement("div");
+      p.className = "setting-group-empty", p.textContent = "No settings in this group", a.appendChild(p);
     }
     if (this.addItemCfg) {
-      const h = document.createElement("button");
-      h.type = "button", h.className = "sg-add-button-bottom", h.style.marginTop = "8px";
-      const p = `
+      const p = document.createElement("button");
+      p.type = "button", p.className = "sg-add-button-bottom", p.style.marginTop = "8px";
+      const h = `
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
          xmlns="http://www.w3.org/2000/svg">
       <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"
             stroke-width="1.5" stroke-linecap="round"/>
     </svg>`;
-      h.innerHTML = `${p}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (d) => {
+      p.innerHTML = `${h}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, p.addEventListener("click", (d) => {
         d.stopPropagation(), d.preventDefault();
         const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), m = this.addItemCfg.createItem(u);
         if (st(m)) {
           const f = `${this.addItemCfg.keyPrefix}${u}`;
           this.addSetting(f, m);
         }
-      }), a.appendChild(h);
+      }), a.appendChild(p);
     }
     return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, it.trackElement(t), setTimeout(() => {
       this.updateNestingStyles();
@@ -852,12 +852,12 @@ class yt extends P {
     if (o.className = "tab-content", this.contentContainers = {}, Object.keys(this.settings).forEach((a, l) => {
       const r = document.createElement("button");
       r.className = "tab-button", r.type = "button", r.setAttribute("data-tab-id", a), r.textContent = a, r.addEventListener("click", () => this.switchToTab(a)), n.appendChild(r);
-      const h = document.createElement("div");
-      h.className = "tab-panel", this.contentContainers[a] = h;
-      const p = this.settings[a];
-      p && (w(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.getNestingLevel() + 1), h.appendChild(
-        p.draw()
-      )), o.appendChild(h), l === 0 && !this.activeTabId && (this.activeTabId = a);
+      const p = document.createElement("div");
+      p.className = "tab-panel", this.contentContainers[a] = p;
+      const h = this.settings[a];
+      h && (w(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.getNestingLevel() + 1), p.appendChild(
+        h.draw()
+      )), o.appendChild(p), l === 0 && !this.activeTabId && (this.activeTabId = a);
     }), e.appendChild(i), e.appendChild(n), e.appendChild(o), !this.activeTabId) {
       const a = Object.keys(this.settings)[0];
       this.activeTabId = a || "";
@@ -908,12 +908,12 @@ class M extends bt {
     return t = t.replace("#", ""), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), t.length !== 6 ? (console.warn(`Invalid hex value "${t}", using default "#000000"`), "#000000") : /^[0-9A-Fa-f]{6}$/.test(t) ? `#${t.toLowerCase()}` : (console.warn(`Invalid hex value "${t}", using default "#000000"`), "#000000");
   }
   static rgbToHexStatic(t) {
-    const e = t.split(",").map((h) => parseInt(h.trim()));
+    const e = t.split(",").map((p) => parseInt(p.trim()));
     if (e.length !== 3 || e.some(isNaN))
       return console.warn(`Invalid RGB value "${t}", using default "#000000"`), "#000000";
-    const [i, s, n] = e, o = Math.max(0, Math.min(255, i)), a = Math.max(0, Math.min(255, s)), l = Math.max(0, Math.min(255, n)), r = (h) => {
-      const p = h.toString(16);
-      return p.length === 1 ? "0" + p : p;
+    const [i, s, n] = e, o = Math.max(0, Math.min(255, i)), a = Math.max(0, Math.min(255, s)), l = Math.max(0, Math.min(255, n)), r = (p) => {
+      const h = p.toString(16);
+      return h.length === 1 ? "0" + h : h;
     };
     return `#${r(o)}${r(a)}${r(l)}`;
   }
@@ -953,8 +953,8 @@ class M extends bt {
       const r = l.value.trim();
       if (!r)
         return e.classList.remove("error"), !0;
-      const p = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);
-      return p ? e.classList.remove("error") : e.classList.add("error"), p;
+      const h = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);
+      return h ? e.classList.remove("error") : e.classList.add("error"), h;
     }, s = document.createElement("input");
     s.type = "color", s.className = "color-picker", s.value = this.value || "#000000", s.setAttribute("aria-label", "Choose color"), s.setAttribute("title", "Click to open color picker"), this.getDataPropsPath() && s.setAttribute("data-test-id", this.getDataPropsPath()), this.colorInputEl = s;
     const n = document.createElement("div");
@@ -963,20 +963,20 @@ class M extends bt {
     n.style.backgroundColor = o;
     const a = document.createElement("input");
     return a.type = "text", a.className = "color-text-input", a.value = this.value || "", a.placeholder = "#000000", a.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), a.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), a.setAttribute("aria-label", "Hex color value"), a.setAttribute("maxlength", "7"), this.getDataPropsPath() && a.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = a, this.textInputEl.addEventListener("input", (l) => {
-      var h, p;
+      var p, h;
       let r = l.target.value.trim();
       if (this.textInputEl && i(this.textInputEl)) {
         const d = M.normalizeColorValue(r);
-        this.value = d, (h = this.onChange) == null || h.call(this, d), (p = this.detectChange) == null || p.call(this, d), this.colorInputEl && (this.colorInputEl.value = d), n.style.backgroundColor = d;
+        this.value = d, (p = this.onChange) == null || p.call(this, d), (h = this.detectChange) == null || h.call(this, d), this.colorInputEl && (this.colorInputEl.value = d), n.style.backgroundColor = d;
       }
     }), this.colorInputEl.addEventListener("input", (l) => {
-      var p, d;
-      const r = l.target.value, h = M.normalizeColorValue(r);
-      this.value = h, (p = this.onChange) == null || p.call(this, h), (d = this.detectChange) == null || d.call(this, h), this.textInputEl && (this.textInputEl.value = h), n.style.backgroundColor = h, e.classList.remove("error");
+      var h, d;
+      const r = l.target.value, p = M.normalizeColorValue(r);
+      this.value = p, (h = this.onChange) == null || h.call(this, p), (d = this.detectChange) == null || d.call(this, p), this.textInputEl && (this.textInputEl.value = p), n.style.backgroundColor = p, e.classList.remove("error");
     }), this.colorInputEl.addEventListener("change", (l) => {
-      var p, d;
-      const r = l.target.value, h = M.normalizeColorValue(r);
-      this.value = h, (p = this.onChange) == null || p.call(this, h), (d = this.detectChange) == null || d.call(this, h), this.textInputEl && (this.textInputEl.value = h), n.style.backgroundColor = h;
+      var h, d;
+      const r = l.target.value, p = M.normalizeColorValue(r);
+      this.value = p, (h = this.onChange) == null || h.call(this, p), (d = this.detectChange) == null || d.call(this, p), this.textInputEl && (this.textInputEl.value = p), n.style.backgroundColor = p;
     }), e.appendChild(s), e.appendChild(n), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
   getElement() {
@@ -1422,8 +1422,8 @@ class re extends b {
       /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i
     );
     if (n) {
-      let a = +n[1], l = +n[2], r = +n[3], h = +n[4];
-      h >= 1 ? (a = Math.round(a * 0.9), l = Math.round(l * 0.9), r = Math.round(r * 0.9)) : h = Math.min(1, h + 0.12), s = `rgba(${a},${l},${r},${h})`;
+      let a = +n[1], l = +n[2], r = +n[3], p = +n[4];
+      p >= 1 ? (a = Math.round(a * 0.9), l = Math.round(l * 0.9), r = Math.round(r * 0.9)) : p = Math.min(1, p + 0.12), s = `rgba(${a},${l},${r},${p})`;
     }
     t.addEventListener("mouseenter", () => {
       console.log("hoverBg", s), t.style.setProperty("background-color", s, "important");
@@ -1856,7 +1856,7 @@ class de extends b {
     return JSON.stringify(t ? {} : { value: this.value }, null, 2);
   }
   selectApiOption(t, e, i) {
-    var l, r, h, p;
+    var l, r, p, h;
     const s = t.target, n = s.querySelector(".select-api-radio") || ((l = s.closest(".select-api-option")) == null ? void 0 : l.querySelector(".select-api-radio"));
     n && (n.checked = !0), this.selectedOptionIndex = e;
     const o = this._options[e].value;
@@ -1868,7 +1868,7 @@ class de extends b {
       const d = i.firstChild;
       d && d.tagName === "SPAN" && (d.textContent = this._options[e].name);
     }
-    this.isOpen = !1, (r = this.optionsListEl) == null || r.classList.remove("open"), (h = this.svgContainer) == null || h.classList.remove("open"), (p = this.onChange) == null || p.call(this, o), this.detectChangeCallback && this.detectChangeCallback(o);
+    this.isOpen = !1, (r = this.optionsListEl) == null || r.classList.remove("open"), (p = this.svgContainer) == null || p.classList.remove("open"), (h = this.onChange) == null || h.call(this, o), this.detectChangeCallback && this.detectChangeCallback(o);
   }
   updateOptionsList() {
     !this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
@@ -1924,19 +1924,19 @@ class ue extends b {
     i.className = "toggle-switch";
     const s = document.createElement("input");
     s.type = "checkbox", s.checked = ((a = (o = this.props.options) == null ? void 0 : o.find((l) => l.value === this.value)) == null ? void 0 : a.status) ?? !1, this.getDataPropsPath() && s.setAttribute("data-test-id", this.getDataPropsPath()), s.addEventListener("change", () => {
-      var r, h;
-      const l = ((h = (r = this.props.options) == null ? void 0 : r.find((p) => p.status === s.checked)) == null ? void 0 : h.value) ?? "";
+      var r, p;
+      const l = ((p = (r = this.props.options) == null ? void 0 : r.find((h) => h.status === s.checked)) == null ? void 0 : p.value) ?? "";
       this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
     });
     const n = document.createElement("span");
     if (n.className = "toggle-slider", this.props.activeColor || this.props.inactiveColor) {
-      const l = document.createElement("style"), r = this.props.activeColor || "#4CAF50", h = this.props.inactiveColor || "#ccc";
+      const l = document.createElement("style"), r = this.props.activeColor || "#4CAF50", p = this.props.inactiveColor || "#ccc";
       l.textContent = `
         .toggle-switch input:checked + .toggle-slider {
           background-color: ${r};
         }
         .toggle-switch .toggle-slider {
-          background-color: ${h};
+          background-color: ${p};
         }
       `, document.head.appendChild(l);
     }
@@ -2073,13 +2073,13 @@ class ve extends b {
       t.placeholder = e;
       return;
     }
-    const h = "...";
-    let p = 0, d = e.length, u = 0;
-    for (; p <= d; ) {
-      const f = Math.floor((p + d) / 2), g = e.slice(0, f).trimEnd() + h;
-      this.measureTextWidth(g, i) <= l ? (u = f, p = f + 1) : d = f - 1;
+    const p = "...";
+    let h = 0, d = e.length, u = 0;
+    for (; h <= d; ) {
+      const f = Math.floor((h + d) / 2), g = e.slice(0, f).trimEnd() + p;
+      this.measureTextWidth(g, i) <= l ? (u = f, h = f + 1) : d = f - 1;
     }
-    const m = e.slice(0, u).trimEnd() + h;
+    const m = e.slice(0, u).trimEnd() + p;
     t.placeholder = m;
   }
   autosizeTextarea(t, e = 3) {
@@ -2115,8 +2115,8 @@ class ve extends b {
       ), n.addEventListener("input", (l) => {
         const r = l.target;
         this.updateLanguageValue(t, r.value), t === this.defaultLanguage && this.updateOtherLanguagePlaceholders(r.value), this.autosizeTextarea(r, 3);
-        const h = n.getAttribute("data-full-placeholder") || "";
-        h && this.adaptPlaceholderToSingleLine(n, h);
+        const p = n.getAttribute("data-full-placeholder") || "";
+        p && this.adaptPlaceholderToSingleLine(n, p);
       }), i.appendChild(n), ((l) => (typeof queueMicrotask == "function" ? queueMicrotask : (r) => setTimeout(r, 0))(l))(() => {
         this.autosizeTextarea(n, 3);
         const l = n.getAttribute("data-full-placeholder") || "";
@@ -2217,18 +2217,18 @@ class Ce extends b {
 }
 const ct = (c, t, e) => {
   let i = !1, s = 0, n = 0, o = 0, a = 0;
-  const l = (p) => {
-    if (p.target.closest("button")) return;
-    i = !0, s = p.clientX, n = p.clientY;
+  const l = (h) => {
+    if (h.target.closest("button")) return;
+    i = !0, s = h.clientX, n = h.clientY;
     const d = t.getBoundingClientRect();
-    o = d.left, a = d.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", h), document.body.style.userSelect = "none";
-  }, r = (p) => {
+    o = d.left, a = d.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", p), document.body.style.userSelect = "none";
+  }, r = (h) => {
     if (!i) return;
-    const d = p.clientX - s, u = p.clientY - n, m = window.innerWidth, f = window.innerHeight, g = t.offsetWidth, C = t.offsetHeight;
+    const d = h.clientX - s, u = h.clientY - n, m = window.innerWidth, f = window.innerHeight, g = t.offsetWidth, C = t.offsetHeight;
     let y = o + d, L = a + u;
     y = Math.max(8, Math.min(m - g - 8, y)), L = Math.max(8, Math.min(f - C - 8, L)), t.style.left = `${y}px`, t.style.top = `${L}px`, e == null || e(y, L);
-  }, h = () => {
-    i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", h), document.body.style.userSelect = "";
+  }, p = () => {
+    i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", p), document.body.style.userSelect = "";
   };
   c.addEventListener("mousedown", l);
 }, A = (c) => {
@@ -2244,10 +2244,10 @@ const ct = (c, t, e) => {
   };
 }, H = (c) => {
   const { r: t, g: e, b: i } = k(c), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
-  let h = 0;
-  r !== 0 && (a === s ? h = (n - o) / r % 6 : a === n ? h = (o - s) / r + 2 : h = (s - n) / r + 4), h < 0 && (h += 6);
-  const p = a === 0 ? 0 : r / a, d = a;
-  return { h: h * 60, s: p, v: d };
+  let p = 0;
+  r !== 0 && (a === s ? p = (n - o) / r % 6 : a === n ? p = (o - s) / r + 2 : p = (s - n) / r + 4), p < 0 && (p += 6);
+  const h = a === 0 ? 0 : r / a, d = a;
+  return { h: p * 60, s: h, v: d };
 }, G = (c, t, e) => {
   const i = (c % 360 + 360) % 360, s = e * t, n = s * (1 - Math.abs(i / 60 % 2 - 1)), o = e - s;
   let a = 0, l = 0, r = 0;
@@ -2564,39 +2564,41 @@ const et = (c, t) => {
   const i = document.createElement("div");
   i.className = "color-picker-recent-title", i.textContent = "Recently Used";
   const s = document.createElement("div");
-  s.className = "color-picker-recent-grid";
-  const n = document.createElement("div");
-  n.className = "color-picker-recent-placeholder", n.textContent = "No recent colors yet", e.appendChild(i), e.appendChild(s), e.appendChild(n);
-  const o = () => {
-    s.innerHTML = "";
-    const a = B.getColors(t);
-    if (a.length === 0) {
-      s.style.display = "none", n.style.display = "block";
+  s.className = "color-picker-tooltip", s.style.display = "none", e.appendChild(s);
+  const n = () => {
+    s.style.display = "none";
+  }, o = (p, h) => {
+    const d = p.getBoundingClientRect();
+    s.textContent = h, s.style.left = `${d.left + d.width / 2}px`, s.style.top = `${d.bottom + 8}px`, s.style.display = "block";
+  }, a = document.createElement("div");
+  a.className = "color-picker-recent-grid";
+  const l = document.createElement("div");
+  l.className = "color-picker-recent-placeholder", l.textContent = "No recent colors yet", e.appendChild(i), e.appendChild(a), e.appendChild(l);
+  const r = () => {
+    n(), a.innerHTML = "";
+    const p = B.getColors(t);
+    if (p.length === 0) {
+      a.style.display = "none", l.style.display = "block";
       return;
     }
-    s.style.display = "grid", n.style.display = "none", a.forEach((l) => {
-      const r = document.createElement("button");
-      r.type = "button", r.className = "color-picker-recent-swatch";
-      const h = Wt(l);
-      r.title = h, r.setAttribute("aria-label", `Use color: ${h}`), r.style.background = l, r.style.borderColor = l;
-      const p = document.createElement("div");
-      p.className = "color-picker-tooltip", p.textContent = h, p.style.display = "none", document.body.appendChild(p), r.addEventListener("mouseenter", (d) => {
-        const u = r.getBoundingClientRect();
-        p.style.display = "block", p.style.left = `${u.left + u.width / 2}px`, p.style.top = `${u.bottom + 8}px`;
-      }), r.addEventListener("mouseleave", () => {
-        p.style.display = "none", r.style.boxShadow = "";
-      }), r.addEventListener("mousedown", () => {
-        r.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
-      }), r.addEventListener("mouseup", () => {
+    a.style.display = "grid", l.style.display = "none", p.forEach((h) => {
+      const d = document.createElement("button");
+      d.type = "button", d.className = "color-picker-recent-swatch";
+      const u = Wt(h);
+      d.title = u, d.setAttribute("aria-label", `Use color: ${u}`), d.style.background = h, d.style.borderColor = h, d.addEventListener("mouseenter", () => o(d, u)), d.addEventListener("mouseleave", () => {
+        n(), d.style.boxShadow = "";
+      }), d.addEventListener("mousedown", () => {
+        d.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
+      }), d.addEventListener("mouseup", () => {
         setTimeout(() => {
-          r.style.boxShadow = "";
+          d.style.boxShadow = "";
         }, 150);
-      }), r.addEventListener("click", () => c(l)), r.addEventListener("DOMNodeRemoved", () => {
-        p.parentNode && p.parentNode.removeChild(p);
-      }), s.appendChild(r);
+      }), d.addEventListener("click", () => {
+        n(), c(h);
+      }), a.appendChild(d);
     });
   };
-  return o(), { container: e, refresh: o };
+  return r(), { container: e, refresh: r };
 }, Wt = (c) => {
   const t = T(c);
   if (t)
@@ -2624,10 +2626,18 @@ class Jt {
       if (!this.isOpen) return;
       const s = i.target;
       if (this.element.contains(s)) return;
-      const n = document.querySelectorAll(".gstop-color-input");
-      Array.from(n).some(
-        (a) => a.contains(s)
-      ) || (i.preventDefault(), i.stopPropagation(), this.close(!0));
+      if (this.backdrop.contains(s)) {
+        i.preventDefault(), i.stopPropagation(), this.close(!0);
+        return;
+      }
+      const n = document.querySelectorAll(
+        ".gstop-color-input, .gstop-color-preview, .gradient-mini-preview"
+      );
+      if (Array.from(n).some(
+        (l) => l.contains(s)
+      )) return;
+      const a = document.querySelector(".gradient-popover");
+      a && a.contains(s) || (i.preventDefault(), i.stopPropagation(), this.close(!0));
     }, this.keyDown = (i) => {
       if (this.isOpen) {
         if (i.key === "Escape")
@@ -2663,14 +2673,14 @@ class Jt {
     l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = jt;
     const r = document.createElement("div");
     r.className = "color-picker-sliders-group";
-    const h = document.createElement("div");
-    h.className = "color-picker-hue", this.hueSlider = h;
     const p = document.createElement("div");
-    p.className = "color-picker-hue-marker", this.hueMarker = p, h.appendChild(p);
+    p.className = "color-picker-hue", this.hueSlider = p;
+    const h = document.createElement("div");
+    h.className = "color-picker-hue-marker", this.hueMarker = h, p.appendChild(h);
     const d = document.createElement("div");
     d.className = "color-picker-opacity", this.opacitySlider = d;
     const u = document.createElement("div");
-    u.className = "color-picker-opacity-marker", this.opacityMarker = u, d.appendChild(u), r.appendChild(h), r.appendChild(d), a.appendChild(l), a.appendChild(r);
+    u.className = "color-picker-opacity-marker", this.opacityMarker = u, d.appendChild(u), r.appendChild(p), r.appendChild(d), a.appendChild(l), a.appendChild(r);
     const m = et((E) => {
       var x;
       this.setColor(E), (x = this.onChange) == null || x.call(this, E, this.currentOpacity);
@@ -2691,7 +2701,7 @@ class Jt {
     const O = document.createElement("div");
     O.className = "color-picker-input-container";
     const v = document.createElement("button");
-    return v.className = "color-picker-copy-inside", v.textContent = "Copy", O.appendChild(I), O.appendChild(v), f.appendChild(g), f.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(m.container), t.appendChild(f), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, h, d, I, g, v, l), t;
+    return v.className = "color-picker-copy-inside", v.textContent = "Copy", O.appendChild(I), O.appendChild(v), f.appendChild(g), f.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(m.container), t.appendChild(f), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, p, d, I, g, v, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -2700,44 +2710,44 @@ class Jt {
     }), t;
   }
   bind(t, e, i, s, n, o, a) {
-    const l = (p) => {
+    const l = (h) => {
       var y;
-      const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width)), m = Math.max(0, Math.min(1, (p.clientY - d.top) / d.height));
+      const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width)), m = Math.max(0, Math.min(1, (h.clientY - d.top) / d.height));
       this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${m * 100}%`;
       const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, C = G(g, u, 1 - m);
       this.currentColor = C, this.syncInput(), this.updateOpacityBg(), (y = this.onChange) == null || y.call(this, C, this.currentOpacity);
-    }, r = (p) => {
+    }, r = (h) => {
       var y;
       const d = e.getBoundingClientRect();
-      let u = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width));
+      let u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
       this.hueMarker.style.left = `${u * 100}%`;
       const m = u * 360, f = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), C = G(m, f, 1 - g);
       this.currentColor = C, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${m}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (y = this.onChange) == null || y.call(this, C, this.currentOpacity);
-    }, h = (p) => {
+    }, p = (h) => {
       var m;
-      const d = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width));
+      const d = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
       this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (m = this.onChange) == null || m.call(this, this.currentColor, this.currentOpacity);
     };
-    t.addEventListener("mousedown", (p) => {
-      p.preventDefault(), l(p);
+    t.addEventListener("mousedown", (h) => {
+      h.preventDefault(), l(h);
       const d = (m) => l(m), u = () => {
         document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
-    }), e.addEventListener("mousedown", (p) => {
-      p.preventDefault(), r(p);
+    }), e.addEventListener("mousedown", (h) => {
+      h.preventDefault(), r(h);
       const d = (m) => r(m), u = () => {
         document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
-    }), i.addEventListener("mousedown", (p) => {
-      p.preventDefault(), h(p);
-      const d = (m) => h(m), u = () => {
+    }), i.addEventListener("mousedown", (h) => {
+      h.preventDefault(), p(h);
+      const d = (m) => p(m), u = () => {
         document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
       };
       document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
-    }), n.addEventListener("change", () => this.syncInput()), s.addEventListener("input", () => this.applyFromInput()), s.addEventListener("blur", () => this.syncInput()), s.addEventListener("keydown", (p) => {
-      p.key === "Enter" && (p.preventDefault(), this.syncInput(), s.blur());
+    }), n.addEventListener("change", () => this.syncInput()), s.addEventListener("input", () => this.applyFromInput()), s.addEventListener("blur", () => this.syncInput()), s.addEventListener("keydown", (h) => {
+      h.key === "Enter" && (h.preventDefault(), this.syncInput(), s.blur());
     }), o.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(s.value);
@@ -2745,14 +2755,14 @@ class Jt {
         s.select(), document.execCommand("copy");
       }
     }), a.addEventListener("click", async () => {
-      var p;
+      var h;
       if (!("EyeDropper" in window)) {
         alert("EyeDropper API is not supported in this browser.");
         return;
       }
       try {
         const d = new window.EyeDropper(), { sRGBHex: u } = await d.open();
-        this.setColor(u), (p = this.onChange) == null || p.call(this, u, this.currentOpacity);
+        this.setColor(u), (h = this.onChange) == null || h.call(this, u, this.currentOpacity);
       } catch {
       }
     }), document.addEventListener("keydown", this.keyDown, !0), setTimeout(
@@ -2810,12 +2820,12 @@ class Jt {
     this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
     const { h: s, s: n, v: o } = H(t);
     this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (L = this.recentSectionRefresh) == null || L.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
-    const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), h = window.innerWidth, p = window.innerHeight, d = 16;
+    const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), p = window.innerWidth, h = window.innerHeight, d = 16;
     let u = r.right + 8, m = r.top;
-    const f = h - r.right, g = r.left;
-    f >= a + d ? u = r.right + 8 : g >= a + d ? u = r.left - a - 8 : u = Math.max(d, (h - a) / 2);
-    const C = p - r.bottom, y = r.top;
-    C >= l + d ? m = r.bottom + 8 : y >= l + d ? m = r.top - l - 8 : C > y ? (m = r.bottom + 8, m + l > p - d && (m = p - l - d)) : (m = r.top - l - 8, m < d && (m = d)), this.element.style.left = `${u}px`, this.element.style.top = `${m}px`;
+    const f = p - r.right, g = r.left;
+    f >= a + d ? u = r.right + 8 : g >= a + d ? u = r.left - a - 8 : u = Math.max(d, (p - a) / 2);
+    const C = h - r.bottom, y = r.top;
+    C >= l + d ? m = r.bottom + 8 : y >= l + d ? m = r.top - l - 8 : C > y ? (m = r.bottom + 8, m + l > h - d && (m = h - l - d)) : (m = r.top - l - 8, m < d && (m = d)), this.element.style.left = `${u}px`, this.element.style.top = `${m}px`;
   }
   close(t) {
     var e;
@@ -2880,7 +2890,7 @@ class Xt {
       ".color-picker-opacity"
     ), this.opacityMarker = this.container.querySelector(
       ".color-picker-opacity-marker"
-    ), this.formatSelect = this.container.querySelector(
+    ), this.ensureMarkerSizes(), this.formatSelect = this.container.querySelector(
       ".color-picker-format-select"
     ), this.colorInput = this.container.querySelector(
       ".color-picker-color-input"
@@ -2888,44 +2898,54 @@ class Xt {
     const t = this.container.querySelector(
       ".color-picker-copy-inside"
     ), { h: e, s: i, v: s } = H(this.currentColor);
-    this.hueMarker.style.left = `${e / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${e}, 100%, 50%))`, this.opacityMarker.style.left = `${this.currentOpacity}%`, this.updateOpacityBackground(this.opacitySlider), this.updateColorInput(this.formatSelect, this.colorInput), this.setupColorAreaEvents(), this.setupHueSliderEvents(), this.setupOpacitySliderEvents(), this.setupFormatEvents(t);
+    this.hueMarker.style.left = `${e / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${e}, 100%, 50%))`, this.opacityMarker.style.left = `${this.currentOpacity}%`, this.updateOpacityBackground(this.opacitySlider), this.updateColorInput(this.formatSelect, this.colorInput), this.ensureMarkerSizes(), this.setupColorAreaEvents(), this.setupHueSliderEvents(), this.setupOpacitySliderEvents(), this.setupFormatEvents(t);
   }
   scheduleInputUpdate() {
     this.inputUpdateTimeout && clearTimeout(this.inputUpdateTimeout), this.inputUpdateTimeout = window.setTimeout(() => {
       this.updateColorInput(this.formatSelect, this.colorInput);
     }, 16);
   }
+  ensureMarkerSizes() {
+    this.colorMarker && (this.colorMarker.style.width = "16px", this.colorMarker.style.height = "16px"), this.hueMarker && (this.hueMarker.style.width = "16px", this.hueMarker.style.height = "16px"), this.opacityMarker && (this.opacityMarker.style.width = "16px", this.opacityMarker.style.height = "16px");
+  }
   addPointerDrag(t, e, i) {
-    t.style.touchAction = "none", t.addEventListener("pointerdown", (s) => {
-      s.preventDefault(), this.isDragging = !0, this.pendingExternalUpdate = void 0;
-      const n = s.pointerId;
+    t.style.touchAction = "none", t.style.userSelect = "none", t.addEventListener("pointerdown", (s) => {
+      s.preventDefault(), s.stopPropagation();
+      const n = t.getBoundingClientRect();
+      if (n.width === 0 || n.height === 0) {
+        console.warn("Target has no dimensions for pointer events");
+        return;
+      }
+      this.isDragging = !0, this.pendingExternalUpdate = void 0;
+      const o = s.pointerId;
       if (t.setPointerCapture)
         try {
-          t.setPointerCapture(n);
-        } catch {
+          t.setPointerCapture(o);
+        } catch (h) {
+          console.warn("Failed to capture pointer:", h);
         }
       e(s);
-      const o = (h) => {
-        h.pointerId === n && e(h);
-      }, a = () => {
+      const a = (h) => {
+        h.pointerId === o && e(h);
+      }, l = () => {
         if (t.releasePointerCapture)
           try {
-            t.releasePointerCapture(n);
+            t.releasePointerCapture(o);
           } catch {
           }
-        document.removeEventListener("pointermove", o), document.removeEventListener("pointerup", l), document.removeEventListener("pointercancel", r);
-      }, l = (h) => {
-        if (h.pointerId === n) {
-          if (a(), this.isDragging = !1, this.pendingExternalUpdate) {
-            const { color: p, opacity: d } = this.pendingExternalUpdate;
-            this.applyExternalUpdate(p, d), this.pendingExternalUpdate = void 0;
+        document.removeEventListener("pointermove", a), document.removeEventListener("pointerup", r), document.removeEventListener("pointercancel", p);
+      }, r = (h) => {
+        if (h.pointerId === o) {
+          if (l(), this.isDragging = !1, this.pendingExternalUpdate) {
+            const { color: d, opacity: u } = this.pendingExternalUpdate;
+            this.applyExternalUpdate(d, u), this.pendingExternalUpdate = void 0;
           }
           i == null || i();
         }
-      }, r = (h) => {
-        h.pointerId === n && a();
+      }, p = (h) => {
+        h.pointerId === o && l();
       };
-      document.addEventListener("pointermove", o), document.addEventListener("pointerup", l), document.addEventListener("pointercancel", r);
+      document.addEventListener("pointermove", a), document.addEventListener("pointerup", r), document.addEventListener("pointercancel", p);
     });
   }
   updateOpacityBackground(t) {
@@ -2961,10 +2981,16 @@ class Xt {
   }
   setupColorAreaEvents() {
     const t = (e) => {
-      const i = this.colorArea.getBoundingClientRect(), s = Math.max(0, Math.min(1, (e.clientX - i.left) / i.width)), n = Math.max(0, Math.min(1, (e.clientY - i.top) / i.height));
-      this.colorMarker.style.left = `${s * 100}%`, this.colorMarker.style.top = `${n * 100}%`;
-      const o = parseFloat(this.hueMarker.style.left || "0%"), a = Math.max(0, Math.min(360, o / 100 * 360)), l = Math.max(0, Math.min(1, s)), r = Math.max(0, Math.min(1, 1 - n)), h = G(a, l, r);
-      this.currentColor = h, this.updateOpacityBackground(this.opacitySlider), this.scheduleInputUpdate(), this.triggerChange();
+      e.stopPropagation();
+      const i = this.colorArea.getBoundingClientRect();
+      if (i.width === 0 || i.height === 0) {
+        console.warn("Color area has no dimensions");
+        return;
+      }
+      const s = (e.clientX - i.left) / i.width, n = (e.clientY - i.top) / i.height, o = Math.max(0, Math.min(1, s)), a = Math.max(0, Math.min(1, n));
+      this.colorMarker.style.left = `${o * 100}%`, this.colorMarker.style.top = `${a * 100}%`;
+      const l = parseFloat(this.hueMarker.style.left || "0%"), r = Math.max(0, Math.min(360, l / 100 * 360)), p = Math.max(0, Math.min(1, o)), h = Math.max(0, Math.min(1, 1 - a)), d = G(r, p, h);
+      d !== this.currentColor && (this.currentColor = d, this.updateOpacityBackground(this.opacitySlider), this.scheduleInputUpdate(), this.triggerChange());
     };
     this.addPointerDrag(this.colorArea, t, () => {
       this.updateColorInput(this.formatSelect, this.colorInput), this.updateOpacityBackground(this.opacitySlider);
@@ -2972,21 +2998,27 @@ class Xt {
   }
   setupHueSliderEvents() {
     const t = (e) => {
+      e.stopPropagation();
       const i = this.hueSlider.getBoundingClientRect();
+      if (i.width === 0) {
+        console.warn("Hue slider has no width");
+        return;
+      }
       let s = (e.clientX - i.left) / i.width;
-      s = Math.max(0, Math.min(1, s)), this.hueMarker.style.left = `${s * 100}%`;
-      const n = Math.max(0, Math.min(360, s * 360)), o = parseFloat(
+      const n = Math.max(0, Math.min(1, s));
+      this.hueMarker.style.left = `${n * 100}%`;
+      const o = Math.max(0, Math.min(360, n * 360)), a = parseFloat(
         this.colorMarker.style.left || "50%"
-      ), a = parseFloat(this.colorMarker.style.top || "50%"), l = Math.max(
+      ), l = parseFloat(this.colorMarker.style.top || "50%"), r = Math.max(
         0,
-        Math.min(1, (isNaN(o) ? 50 : o) / 100)
-      ), r = Math.max(
+        Math.min(1, isNaN(a) ? 0.5 : a / 100)
+      ), p = Math.max(
         0,
-        Math.min(1, (isNaN(a) ? 50 : a) / 100)
+        Math.min(1, isNaN(l) ? 0.5 : l / 100)
       );
-      this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`;
-      const h = G(n, l, 1 - r);
-      this.currentColor = h, this.updateOpacityBackground(this.opacitySlider), this.scheduleInputUpdate(), this.triggerChange();
+      this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${o}, 100%, 50%))`;
+      const h = G(o, r, 1 - p);
+      h !== this.currentColor && (this.currentColor = h, this.updateOpacityBackground(this.opacitySlider), this.scheduleInputUpdate(), this.triggerChange());
     };
     this.addPointerDrag(this.hueSlider, t, () => {
       this.inputUpdateTimeout && clearTimeout(this.inputUpdateTimeout), this.updateColorInput(this.formatSelect, this.colorInput);
@@ -2994,8 +3026,16 @@ class Xt {
   }
   setupOpacitySliderEvents() {
     const t = (e) => {
-      const i = this.opacitySlider.getBoundingClientRect(), s = Math.max(0, Math.min(1, (e.clientX - i.left) / i.width));
-      this.opacityMarker.style.left = `${s * 100}%`, this.currentOpacity = Math.round(s * 100), this.triggerChange();
+      e.stopPropagation();
+      const i = this.opacitySlider.getBoundingClientRect();
+      if (i.width === 0) {
+        console.warn("Opacity slider has no width");
+        return;
+      }
+      const s = (e.clientX - i.left) / i.width, n = Math.max(0, Math.min(1, s));
+      this.opacityMarker.style.left = `${n * 100}%`;
+      const o = Math.round(n * 100);
+      o !== this.currentOpacity && (this.currentOpacity = o, this.triggerChange());
     };
     this.addPointerDrag(this.opacitySlider, t);
   }
@@ -3103,12 +3143,12 @@ const V = class V extends b {
       if (!this.popoverEl || !this.isPopoverOpen) return;
       const s = i.target, n = this.popoverEl.contains(s), o = (d = this.element) == null ? void 0 : d.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((u) => u.contains(s)), r = s.closest(
         ".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"
-      ), h = s.classList.contains(
-        "color-picker-backdrop"
       ), p = s.classList.contains(
+        "color-picker-backdrop"
+      ), h = s.classList.contains(
         "gradient-popover-backdrop"
       );
-      !n && !o && !l && !r && !h && !p && this.closePopover();
+      !n && !o && !l && !r && !p && !h && this.closePopover();
     }, this.handlePopoverKeydown = (i) => {
       if (this.isPopoverOpen) {
         if (i.key === "Escape") {
@@ -3305,14 +3345,14 @@ const V = class V extends b {
     l.className = "gradient-preview", this.updateGradientPreview(l);
     const r = document.createElement("div");
     r.className = "gradient-handles", l.appendChild(r), t.appendChild(l), this.createHandles(r, l);
-    const h = document.createElement("div");
-    h.className = "gradient-stops-header";
-    const p = document.createElement("span");
-    p.textContent = "Stops";
+    const p = document.createElement("div");
+    p.className = "gradient-stops-header";
+    const h = document.createElement("span");
+    h.textContent = "Stops";
     const d = document.createElement("button");
-    d.type = "button", d.className = "gradient-add-stop", d.textContent = "+", h.appendChild(p), h.appendChild(d);
+    d.type = "button", d.className = "gradient-add-stop", d.textContent = "+", p.appendChild(h), p.appendChild(d);
     const u = document.createElement("div");
-    u.className = "gradient-stops", t.appendChild(h), t.appendChild(u), this.updateStopsList(u);
+    u.className = "gradient-stops", t.appendChild(p), t.appendChild(u), this.updateStopsList(u);
     const m = et((f) => {
       const g = T(f);
       g && (this.value = g, this.switchType(g.type), this.updateUI(), this.triggerChange());
@@ -3343,17 +3383,17 @@ const V = class V extends b {
       const o = document.createElement("div");
       o.className = "gstop-chip", o.style.backgroundColor = i.color, n.appendChild(o);
       let a = !1, l = 0, r = 0;
-      const h = (u) => {
-        a = !0, l = u.clientX, r = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", p), document.addEventListener("mouseup", d), u.preventDefault(), u.stopPropagation();
-      }, p = (u) => {
+      const p = (u) => {
+        a = !0, l = u.clientX, r = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", h), document.addEventListener("mouseup", d), u.preventDefault(), u.stopPropagation();
+      }, h = (u) => {
         if (!a || !this.value) return;
         const m = e.getBoundingClientRect(), f = u.clientX - l;
         let g = r + f / m.width * 100;
         g = Math.max(0, Math.min(100, g)), this.value.stops[s].position = Math.round(g), n.style.left = `${g}%`, this.updateGradientPreview();
       }, d = () => {
-        a && (a = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", d), this.value && (this.value.stops.sort((u, m) => u.position - m.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange());
+        a && (a = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", d), this.value && (this.value.stops.sort((u, m) => u.position - m.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange());
       };
-      n.addEventListener("mousedown", h), t.appendChild(n);
+      n.addEventListener("mousedown", p), t.appendChild(n);
     });
   }
   updateStopsList(t) {
@@ -3369,12 +3409,12 @@ const V = class V extends b {
       l.type = "text", l.className = "gstop-position-input", l.value = `${s.position}%`, l.style.width = "60px", a.appendChild(l);
       const r = document.createElement("div");
       r.className = "gstop-color-container";
-      const h = document.createElement("div");
-      h.className = "gstop-color-preview", h.style.backgroundColor = s.color;
-      const p = document.createElement("input");
-      p.type = "text", p.className = "gstop-color-input", p.value = s.color.replace("#", "").toUpperCase();
+      const p = document.createElement("div");
+      p.className = "gstop-color-preview", p.style.backgroundColor = s.color;
+      const h = document.createElement("input");
+      h.type = "text", h.className = "gstop-color-input", h.value = s.color.replace("#", "").toUpperCase();
       const d = document.createElement("button");
-      d.type = "button", d.className = "gstop-color-copy", d.textContent = "Copy", r.appendChild(h), r.appendChild(p), r.appendChild(d);
+      d.type = "button", d.className = "gstop-color-copy", d.textContent = "Copy", r.appendChild(p), r.appendChild(h), r.appendChild(d);
       const u = document.createElement("button");
       u.type = "button", u.className = "gstop-del", u.innerHTML = _t, u.disabled = (((O = (I = this.value) == null ? void 0 : I.stops) == null ? void 0 : O.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(u), e.appendChild(o);
       const m = document.createElement("span");
@@ -3391,7 +3431,7 @@ const V = class V extends b {
       const y = document.createElement("span");
       y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, f.appendChild(g), f.appendChild(y);
       const L = new Jt((v, E) => {
-        p.value = v.replace("#", "").toUpperCase(), h.style.backgroundColor = v, this.value.stops[n].color = v, E !== void 0 && (this.value.stops[n].opacity = E, g.value = String(E), y.textContent = `${E}%`);
+        h.value = v.replace("#", "").toUpperCase(), p.style.backgroundColor = v, this.value.stops[n].color = v, E !== void 0 && (this.value.stops[n].opacity = E, g.value = String(E), y.textContent = `${E}%`);
         const x = k(v);
         g.style.setProperty(
           "--slider-color",
@@ -3401,24 +3441,24 @@ const V = class V extends b {
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateUI(), this.triggerChange();
       }, "solid");
-      p.addEventListener("click", (v) => {
-        v.preventDefault(), v.stopPropagation(), L.open(s.color, p, s.opacity ?? 100);
-      }), p.addEventListener("input", () => {
-        const v = p.value.trim(), E = v.startsWith("#") ? v : `#${v}`;
+      h.addEventListener("click", (v) => {
+        v.preventDefault(), v.stopPropagation(), L.open(s.color, h, s.opacity ?? 100);
+      }), h.addEventListener("input", () => {
+        const v = h.value.trim(), E = v.startsWith("#") ? v : `#${v}`;
         if (/^#[0-9A-Fa-f]{6}$/.test(E)) {
-          this.value.stops[n].color = E, h.style.backgroundColor = E;
+          this.value.stops[n].color = E, p.style.backgroundColor = E;
           const x = k(E);
           g.style.setProperty(
             "--slider-color",
             `rgb(${x.r}, ${x.g}, ${x.b})`
           ), this.debouncedPreviewUpdate();
         }
-      }), p.addEventListener("blur", () => {
+      }), h.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }), d.addEventListener("click", async (v) => {
         v.stopPropagation();
         try {
-          await navigator.clipboard.writeText(`#${p.value}`);
+          await navigator.clipboard.writeText(`#${h.value}`);
         } catch {
         }
       }), l.addEventListener("focus", (v) => {
@@ -3481,8 +3521,8 @@ const V = class V extends b {
         this.popoverEl.style.position = "fixed", this.popoverEl.style.zIndex = "10000", this.popoverEl.style.left = "-9999px", this.popoverEl.style.top = "0px";
         const o = this.popoverEl.offsetHeight;
         let a = t.right + 8, l = t.top;
-        const r = i - t.right, h = t.left, p = e + n;
-        r < p && h > r + 100 && (a = t.left - e - 8);
+        const r = i - t.right, p = t.left, h = e + n;
+        r < h && p > r + 100 && (a = t.left - e - 8);
         const d = s - t.bottom, u = t.top;
         u >= o + n ? l = t.top - o - 8 : d >= o + n ? l = t.bottom + 8 : u > d ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
       }
@@ -3505,8 +3545,8 @@ const V = class V extends b {
         this.popoverEl.style.left, this.popoverEl.style.top, this.popoverEl.style.left = "-9999px", this.popoverEl.style.top = "0px";
         const a = this.popoverEl.offsetHeight;
         let l = e.right + 8, r = e.top;
-        const h = s - e.right, p = e.left, d = i + o;
-        h < d && p > h + 100 && (l = e.left - i - 8);
+        const p = s - e.right, h = e.left, d = i + o;
+        p < d && h > p + 100 && (l = e.left - i - 8);
         const u = n - e.bottom, m = e.top;
         m >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : m > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
       });
@@ -3725,8 +3765,8 @@ class j extends b {
     const t = this.value === "auto" ? "text" : "number", e = (a) => {
       this.value !== "auto" && (this.props.minValue !== void 0 && (a.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (a.max = String(this.props.maxValue)), this.props.className && a.classList.add(this.props.className), a.addEventListener("input", () => {
         const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, r = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
-        let h = Number(a.value);
-        h < l && (h = l), h > r && (h = r), a.value = String(h);
+        let p = Number(a.value);
+        p < l && (p = l), p > r && (p = r), a.value = String(p);
       }));
     }, i = this.createInput({
       value: this.value,