builder-settings-types 0.0.323 → 0.0.325

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

@@ -1,22 +1,22 @@
 const bt = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let mt = (d = 21) => {
-  let t = "", e = crypto.getRandomValues(new Uint8Array(d |= 0));
-  for (; d--; )
-    t += bt[e[d] & 63];
+let mt = (h = 21) => {
+  let t = "", e = crypto.getRandomValues(new Uint8Array(h |= 0));
+  for (; h--; )
+    t += bt[e[h] & 63];
   return t;
 };
-function wt(d) {
-  let t = 0, e = d.parentElement;
+function wt(h) {
+  let t = 0, e = h.parentElement;
   for (; e; )
-    e.classList.contains("setting-group") && e !== d && t++, e = e.parentElement;
+    e.classList.contains("setting-group") && e !== h && t++, e = e.parentElement;
   return t;
 }
-function Z(d, t) {
+function Z(h, t) {
   const e = Math.min(Math.max(t, 0), 5);
-  d.setAttribute("data-nesting-level", e.toString()), e > 0 ? d.style.setProperty("--visual-indent", `${e * 2}px`) : (d.style.removeProperty("--visual-indent"), d.style.marginLeft = "");
+  h.setAttribute("data-nesting-level", e.toString()), e > 0 ? h.style.setProperty("--visual-indent", `${e * 2}px`) : (h.style.removeProperty("--visual-indent"), h.style.marginLeft = "");
 }
-function et(d, t = 0) {
-  d.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
+function et(h, t = 0) {
+  h.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
     const s = i, n = t + 1;
     Z(s, n), et(s, n);
   });
@@ -112,20 +112,20 @@ class Lt {
   }
 }
 const rt = new Lt();
-function Y(d) {
-  if (d === null || typeof d != "object") return d;
-  if (d instanceof Date) return new Date(d.getTime());
-  if (d instanceof Array) return d.map((t) => Y(t));
-  if (typeof d == "object") {
+function Y(h) {
+  if (h === null || typeof h != "object") return h;
+  if (h instanceof Date) return new Date(h.getTime());
+  if (h instanceof Array) return h.map((t) => Y(t));
+  if (typeof h == "object") {
     const t = {};
-    for (const e in d)
-      Object.prototype.hasOwnProperty.call(d, e) && (t[e] = Y(d[e]));
+    for (const e in h)
+      Object.prototype.hasOwnProperty.call(h, e) && (t[e] = Y(h[e]));
     return t;
   }
-  return d;
+  return h;
 }
-function kt(d) {
-  switch (d) {
+function kt(h) {
+  switch (h) {
     case "number":
       return 0;
     case "text":
@@ -262,79 +262,79 @@ M.currentLanguageExplicitlySet = !1, M.languageChangeCallbacks = /* @__PURE__ */
   { title: "Text Color", keys: ["text-dark", "text-light"] }
 ];
 let x = M;
-function G(d) {
-  return d instanceof x;
+function G(h) {
+  return h instanceof x;
 }
-function k(d) {
-  return d instanceof $;
+function k(h) {
+  return h instanceof $;
 }
-function ct(d) {
-  return G(d) || k(d);
+function ct(h) {
+  return G(h) || k(h);
 }
-const ot = (d, t, e) => {
+const ot = (h, t, e) => {
   let i = !1, s = 0, n = 0, o = 0, a = 0;
-  const l = (h) => {
-    if (h.target.closest("button")) return;
-    i = !0, s = h.clientX, n = h.clientY;
-    const p = t.getBoundingClientRect();
-    o = p.left, a = p.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
-  }, r = (h) => {
+  const l = (p) => {
+    if (p.target.closest("button")) return;
+    i = !0, s = p.clientX, n = p.clientY;
+    const d = t.getBoundingClientRect();
+    o = d.left, a = d.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
+  }, r = (p) => {
     if (!i) return;
-    const p = h.clientX - s, g = h.clientY - n, f = window.innerWidth, m = window.innerHeight, u = t.offsetWidth, v = t.offsetHeight;
-    let C = o + p, y = a + g;
-    C = Math.max(8, Math.min(f - u - 8, C)), y = Math.max(8, Math.min(m - v - 8, y)), t.style.left = `${C}px`, t.style.top = `${y}px`, e == null || e(C, y);
+    const d = p.clientX - s, g = p.clientY - n, C = window.innerWidth, m = window.innerHeight, u = t.offsetWidth, v = t.offsetHeight;
+    let f = o + d, y = a + g;
+    f = Math.max(8, Math.min(C - u - 8, f)), y = Math.max(8, Math.min(m - v - 8, y)), t.style.left = `${f}px`, t.style.top = `${y}px`, e == null || e(f, y);
   }, c = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", c), document.body.style.userSelect = "";
   };
-  d.addEventListener("mousedown", l);
-}, W = (d) => {
-  if (!d) return null;
-  let t = d.trim();
+  h.addEventListener("mousedown", l);
+}, F = (h) => {
+  if (!h) return null;
+  let t = h.trim();
   return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
-}, X = (d, t, e) => `#${[d, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, P = (d) => {
-  const t = d.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
+}, X = (h, t, e) => `#${[h, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, P = (h) => {
+  const t = h.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
   return {
     r: parseInt(e.slice(0, 2), 16),
     g: parseInt(e.slice(2, 4), 16),
     b: parseInt(e.slice(4, 6), 16)
   };
-}, z = (d) => {
-  const { r: t, g: e, b: i } = P(d), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
+}, U = (h) => {
+  const { r: t, g: e, b: i } = P(h), 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 c = 0;
   r !== 0 && (a === s ? c = (n - o) / r % 6 : a === n ? c = (o - s) / r + 2 : c = (s - n) / r + 4), c < 0 && (c += 6);
-  const h = a === 0 ? 0 : r / a, p = a;
-  return { h: c * 60, s: h, v: p };
-}, U = (d, t, e) => {
-  const i = (d % 360 + 360) % 360, s = e * t, n = s * (1 - Math.abs(i / 60 % 2 - 1)), o = e - s;
+  const p = a === 0 ? 0 : r / a, d = a;
+  return { h: c * 60, s: p, v: d };
+}, W = (h, t, e) => {
+  const i = (h % 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;
   return i < 60 ? (a = s, l = n, r = 0) : i < 120 ? (a = n, l = s, r = 0) : i < 180 ? (a = 0, l = s, r = n) : i < 240 ? (a = 0, l = n, r = s) : i < 300 ? (a = n, l = 0, r = s) : (a = s, l = 0, r = n), X(
     Math.round((a + o) * 255),
     Math.round((l + o) * 255),
     Math.round((r + o) * 255)
   );
-}, vt = (d, t, e) => {
+}, vt = (h, t, e) => {
   const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
-  return { hue: d, sat: s, lightness: i };
-}, it = (d, t, e) => {
-  const i = (1 - Math.abs(2 * e - 1)) * t, s = i * (1 - Math.abs(d / 60 % 2 - 1)), n = e - i / 2;
+  return { hue: h, sat: s, lightness: i };
+}, it = (h, t, e) => {
+  const i = (1 - Math.abs(2 * e - 1)) * t, s = i * (1 - Math.abs(h / 60 % 2 - 1)), n = e - i / 2;
   let o = 0, a = 0, l = 0;
-  return d < 60 ? (o = i, a = s, l = 0) : d < 120 ? (o = s, a = i, l = 0) : d < 180 ? (o = 0, a = i, l = s) : d < 240 ? (o = 0, a = s, l = i) : d < 300 ? (o = s, a = 0, l = i) : (o = i, a = 0, l = s), {
+  return h < 60 ? (o = i, a = s, l = 0) : h < 120 ? (o = s, a = i, l = 0) : h < 180 ? (o = 0, a = i, l = s) : h < 240 ? (o = 0, a = s, l = i) : h < 300 ? (o = s, a = 0, l = i) : (o = i, a = 0, l = s), {
     r: Math.round((o + n) * 255),
     g: Math.round((a + n) * 255),
     b: Math.round((l + n) * 255)
   };
-}, st = (d, t) => {
+}, st = (h, t) => {
   const e = Math.max(0, Math.min(100, t)) / 100;
-  if (d.startsWith("#")) {
-    const { r: s, g: n, b: o } = P(d);
+  if (h.startsWith("#")) {
+    const { r: s, g: n, b: o } = P(h);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  if (d.startsWith("rgba("))
-    return d.replace(/,\s*[\d.]+\)$/, `, ${e})`);
-  if (d.startsWith("rgb("))
-    return d.replace("rgb(", "rgba(").replace(")", `, ${e})`);
-  if (d.startsWith("hsl(")) {
-    const s = d.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+  if (h.startsWith("rgba("))
+    return h.replace(/,\s*[\d.]+\)$/, `, ${e})`);
+  if (h.startsWith("rgb("))
+    return h.replace("rgb(", "rgba(").replace(")", `, ${e})`);
+  if (h.startsWith("hsl(")) {
+    const s = h.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
     if (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -344,8 +344,8 @@ const ot = (d, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  if (d.startsWith("hsla(")) {
-    const s = d.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
+  if (h.startsWith("hsla(")) {
+    const s = h.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
     if (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -355,13 +355,13 @@ const ot = (d, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  const i = W(d);
+  const i = F(h);
   if (i) {
     const { r: s, g: n, b: o } = P(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  return d;
-}, Mt = (d) => [
+  return h;
+}, Mt = (h) => [
   "red",
   "green",
   "blue",
@@ -385,18 +385,18 @@ const ot = (d, t, e) => {
   "teal",
   "fuchsia",
   "transparent"
-].includes(d.toLowerCase()), ft = (d) => [
+].includes(h.toLowerCase()), ft = (h) => [
   /^#[0-9a-fA-F]{3,8}$/,
   /^rgba?\s*\([^)]+\)$/,
   /^hsla?\s*\([^)]+\)$/,
   /^[a-zA-Z]+$/
-].some((e) => e.test(d.trim())), Nt = (d) => {
+].some((e) => e.test(h.trim())), Nt = (h) => {
   if (typeof document > "u")
-    return ft(d) || !!W(d);
+    return ft(h) || !!F(h);
   const t = document.createElement("div");
-  return t.style.color = d, t.style.color !== "";
-}, Ct = (d) => {
-  const t = d.trim();
+  return t.style.color = h, t.style.color !== "";
+}, Ct = (h) => {
+  const t = h.trim();
   if (/^#[0-9A-Fa-f]{8}$/.test(t)) {
     const n = t.slice(1), o = parseInt(n.slice(0, 2), 16), a = parseInt(n.slice(2, 4), 16), l = parseInt(n.slice(4, 6), 16), r = parseInt(n.slice(6, 8), 16);
     return {
@@ -431,12 +431,12 @@ const ot = (d, t, e) => {
       opacity: Math.round(l * 100)
     };
   }
-  return { color: W(t) || t, position: 0, opacity: 100 };
-}, ht = (d) => {
+  return { color: F(t) || t, position: 0, opacity: 100 };
+}, ht = (h) => {
   const t = [];
   let e = "", i = 0;
-  for (let s = 0; s < d.length; s++) {
-    const n = d[s];
+  for (let s = 0; s < h.length; s++) {
+    const n = h[s];
     if (n === "(") i++;
     else if (n === ")") i--;
     else if (n === "," && i === 0) {
@@ -446,16 +446,16 @@ const ot = (d, t, e) => {
     e += n;
   }
   return e.trim() && t.push(e.trim()), t;
-}, dt = (d, t) => {
-  const e = new RegExp(`${t}\\s*\\(`, "i"), i = d.match(e);
+}, dt = (h, t) => {
+  const e = new RegExp(`${t}\\s*\\(`, "i"), i = h.match(e);
   if (!i) return null;
   const s = i.index + i[0].length;
   let n = 1, o = s;
-  for (let a = s; a < d.length && n > 0; a++)
-    d[a] === "(" ? n++ : d[a] === ")" && n--, o = a;
-  return n === 0 ? d.substring(s, o) : null;
-}, It = (d) => {
-  const t = d.split(" ")[0].toLowerCase();
+  for (let a = s; a < h.length && n > 0; a++)
+    h[a] === "(" ? n++ : h[a] === ")" && n--, o = a;
+  return n === 0 ? h.substring(s, o) : null;
+}, It = (h) => {
+  const t = h.split(" ")[0].toLowerCase();
   return [
     "circle",
     "ellipse",
@@ -466,31 +466,31 @@ const ot = (d, t, e) => {
     "at",
     "contain",
     "cover"
-  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(d) || /^hsl/i.test(d) || Mt(t);
-}, pt = (d) => {
+  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(h) || /^hsl/i.test(h) || Mt(t);
+}, pt = (h) => {
   const t = [];
-  return d.forEach((e, i) => {
+  return h.forEach((e, i) => {
     const s = e.trim();
     if (!s) return;
     let n = "", o = 0;
     const a = s.match(/^(.+?)\s+(\d+(?:\.\d+)?)%?\s*$/);
-    a && ft(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = d.length === 1 ? 0 : i / (d.length - 1) * 100);
+    a && ft(a[1].trim()) ? (n = a[1].trim(), o = parseFloat(a[2])) : (n = s, o = h.length === 1 ? 0 : i / (h.length - 1) * 100);
     const l = Ct(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
-}, A = (d) => {
-  const t = d.stops && d.stops.length ? d.stops : [{ color: "#000000", position: 0, opacity: 100 }];
+}, A = (h) => {
+  const t = h.stops && h.stops.length ? h.stops : [{ color: "#000000", position: 0, opacity: 100 }];
   return {
-    type: d.type && ["linear", "radial", "solid"].includes(d.type) ? d.type : "linear",
-    angle: typeof d.angle == "number" ? d.angle : 90,
+    type: h.type && ["linear", "radial", "solid"].includes(h.type) ? h.type : "linear",
+    angle: typeof h.angle == "number" ? h.angle : 90,
     stops: t.map((e, i) => ({
       color: e.color || "#000000",
       position: typeof e.position == "number" ? e.position : t.length === 1 ? 0 : Math.round(i / (t.length - 1) * 100),
       opacity: e.opacity === void 0 || Number.isNaN(e.opacity) ? 100 : e.opacity
     }))
   };
-}, T = (d) => {
-  const t = d.replace(/;$/, "").trim();
+}, T = (h) => {
+  const t = h.replace(/;$/, "").trim();
   if (Nt(t)) {
     const s = Ct(t);
     return A({ type: "solid", angle: 0, stops: [s] });
@@ -522,21 +522,21 @@ const ot = (d, t, e) => {
     return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
-}, S = (d) => {
-  if (d.type === "solid") {
-    const e = d.stops[0], i = e.color;
+}, S = (h) => {
+  if (h.type === "solid") {
+    const e = h.stops[0], i = e.color;
     if (i.startsWith("var(--"))
       return i;
     const s = e.opacity ?? 100, n = i.replace("#", ""), o = Math.round(s / 100 * 255).toString(16).toUpperCase().padStart(2, "0");
     return `#${n}${o}`;
   }
-  const t = d.stops.map(
+  const t = h.stops.map(
     (e) => `${st(e.color, e.opacity ?? 100)} ${e.position}%`
   ).join(", ");
-  return d.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${d.angle}deg, ${t})`;
-}, St = (d) => Math.round(d / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), K = (d) => {
-  if (d.type === "solid") {
-    const t = d.stops[0];
+  return h.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${h.angle}deg, ${t})`;
+}, St = (h) => Math.round(h / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), K = (h) => {
+  if (h.type === "solid") {
+    const t = h.stops[0];
     if (t) {
       const e = t.color;
       if (e.startsWith("var(--"))
@@ -552,7 +552,7 @@ const ot = (d, t, e) => {
     }
     return "#000000";
   }
-  return d.type === "linear" ? `Linear ${d.angle}°` : "Radial Gradient";
+  return h.type === "linear" ? `Linear ${h.angle}°` : "Radial Gradient";
 }, q = class q {
   static defaults() {
     return {
@@ -563,7 +563,7 @@ const ot = (d, t, e) => {
   static normalizeList(t) {
     const e = /* @__PURE__ */ new Set(), i = [];
     return t.forEach((s) => {
-      let n = W(s);
+      let n = F(s);
       n || T(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
     }), i.slice(0, this.MAX_COLORS);
   }
@@ -609,7 +609,7 @@ const ot = (d, t, e) => {
   }
   static addColor(t, e) {
     if (!t) return;
-    let i = W(t), s = "solid";
+    let i = F(t), s = "solid";
     if (i)
       s = "solid";
     else {
@@ -622,8 +622,8 @@ const ot = (d, t, e) => {
   }
 };
 q.STORAGE_KEY = "settingsLib_recentColors", q.MAX_COLORS = 12, q.colors = null;
-let F = q;
-const at = (d, t) => {
+let R = q;
+const at = (h, t) => {
   const e = document.createElement("div");
   e.className = "color-picker-recent-section";
   const i = document.createElement("div");
@@ -632,54 +632,54 @@ const at = (d, t) => {
   s.className = "color-picker-tooltip", s.style.display = "none", e.appendChild(s);
   const n = () => {
     s.style.display = "none";
-  }, o = (c, h) => {
-    const p = c.getBoundingClientRect();
-    s.textContent = h, s.style.left = `${p.left + p.width / 2}px`, s.style.top = `${p.bottom + 8}px`, s.style.display = "block";
+  }, o = (c, p) => {
+    const d = c.getBoundingClientRect();
+    s.textContent = p, 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 c = F.getColors(t);
+    const c = R.getColors(t);
     if (c.length === 0) {
       a.style.display = "none", l.style.display = "block";
       return;
     }
-    a.style.display = "grid", l.style.display = "none", c.forEach((h) => {
-      const p = document.createElement("button");
-      p.type = "button", p.className = "color-picker-recent-swatch";
-      const g = Vt(h);
-      if (p.title = g, p.setAttribute("aria-label", `Use color: ${g}`), h.includes("gradient(")) {
-        p.style.backgroundImage = h, p.style.backgroundColor = "transparent";
-        const m = T(h);
-        m && m.stops && m.stops.length > 0 && (p.style.borderColor = m.stops[0].color);
+    a.style.display = "grid", l.style.display = "none", c.forEach((p) => {
+      const d = document.createElement("button");
+      d.type = "button", d.className = "color-picker-recent-swatch";
+      const g = Vt(p);
+      if (d.title = g, d.setAttribute("aria-label", `Use color: ${g}`), p.includes("gradient(")) {
+        d.style.backgroundImage = p, d.style.backgroundColor = "transparent";
+        const m = T(p);
+        m && m.stops && m.stops.length > 0 && (d.style.borderColor = m.stops[0].color);
       } else
-        p.style.backgroundColor = h, p.style.borderColor = h;
-      p.addEventListener("mouseenter", () => o(p, g)), p.addEventListener("mouseleave", () => {
-        n(), p.style.boxShadow = "";
-      }), p.addEventListener("mousedown", () => {
-        p.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
-      }), p.addEventListener("mouseup", () => {
+        d.style.backgroundColor = p, d.style.borderColor = p;
+      d.addEventListener("mouseenter", () => o(d, g)), d.addEventListener("mouseleave", () => {
+        n(), d.style.boxShadow = "";
+      }), d.addEventListener("mousedown", () => {
+        d.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
+      }), d.addEventListener("mouseup", () => {
         setTimeout(() => {
-          p.style.boxShadow = "";
+          d.style.boxShadow = "";
         }, 150);
-      }), p.addEventListener("click", () => {
-        n(), d(h);
-      }), a.appendChild(p);
+      }), d.addEventListener("click", () => {
+        n(), h(p);
+      }), a.appendChild(d);
     });
   };
   return r(), { container: e, refresh: r };
-}, Vt = (d) => {
-  const t = T(d);
+}, Vt = (h) => {
+  const t = T(h);
   if (t)
     return K(t);
-  const e = W(d);
+  const e = F(h);
   if (e) {
     const i = P(e);
     return `${e} (RGB: ${i.r}, ${i.g}, ${i.b})`;
   }
-  return d;
+  return h;
 }, yt = `<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
     d="M6.12347 4.96653L1.41158 0.254304C1.25449 0.102568 1.04409 0.0186071 0.825694 0.0205049C0.607302 0.0224037 0.398393 0.110007 0.24396 0.26445C0.0895282 0.418893 0.0019303 0.627818 3.24698e-05 0.846225C-0.00186536 1.06463 0.0820894 1.27505 0.233815 1.43215L4.9457 6.14438L0.233814 10.8566C0.0820886 11.0137 -0.00186625 11.2241 3.15434e-05 11.4425C0.00192934 11.6609 0.0895272 11.8699 0.243959 12.0243C0.398392 12.1787 0.607301 12.2663 0.825693 12.2682C1.04408 12.2701 1.25449 12.1862 1.41158 12.0344L6.12347 7.32222L10.8354 12.0344C10.9932 12.1824 11.2023 12.2632 11.4186 12.2597C11.6349 12.2562 11.8414 12.1687 11.9943 12.0156C12.1472 11.8626 12.2346 11.6561 12.2379 11.4398C12.2413 11.2234 12.1604 11.0143 12.0123 10.8566L7.30123 6.14438L12.0131 1.43215C12.0927 1.35531 12.1561 1.2634 12.1998 1.16177C12.2434 1.06014 12.2664 0.950833 12.2674 0.84023C12.2683 0.729626 12.2473 0.61994 12.2054 0.517568C12.1635 0.415196 12.1017 0.322191 12.0234 0.243979C11.9452 0.165768 11.8522 0.103916 11.7499 0.0620327C11.6475 0.0201492 11.5378 -0.000927989 11.4272 3.33052e-05C11.3166 0.000993646 11.2073 0.0239743 11.1057 0.0676297C11.0041 0.111286 10.9122 0.174745 10.8354 0.254305L6.12347 4.96653Z"
@@ -760,77 +760,77 @@ class ut {
     r.className = "color-picker-sliders-group";
     const c = document.createElement("div");
     c.className = "color-picker-hue", this.hueSlider = c;
-    const h = document.createElement("div");
-    h.className = "color-picker-hue-marker", this.hueMarker = h, c.appendChild(h);
     const p = document.createElement("div");
-    p.className = "color-picker-opacity", this.opacitySlider = p;
+    p.className = "color-picker-hue-marker", this.hueMarker = p, c.appendChild(p);
+    const d = document.createElement("div");
+    d.className = "color-picker-opacity", this.opacitySlider = d;
     const g = document.createElement("div");
-    g.className = "color-picker-opacity-marker", this.opacityMarker = g, p.appendChild(g), r.appendChild(c), r.appendChild(p), a.appendChild(l), a.appendChild(r);
-    const f = at((E) => {
+    g.className = "color-picker-opacity-marker", this.opacityMarker = g, d.appendChild(g), r.appendChild(c), r.appendChild(d), a.appendChild(l), a.appendChild(r);
+    const C = at((E) => {
       var w;
       this.setColor(E), (w = this.onChange) == null || w.call(this, E, this.currentOpacity);
     }, this.recentScope);
-    this.recentSectionRefresh = f.refresh;
+    this.recentSectionRefresh = C.refresh;
     const m = document.createElement("div");
     m.className = "color-picker-format-section";
     const u = document.createElement("select");
     u.className = "color-picker-format-select", this.select = u;
     const v = document.createElement("option");
     v.value = "hex", v.textContent = "HEX";
-    const C = document.createElement("option");
-    C.value = "rgb", C.textContent = "RGB";
+    const f = document.createElement("option");
+    f.value = "rgb", f.textContent = "RGB";
     const y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", u.appendChild(v), u.appendChild(C), u.appendChild(y);
+    y.value = "hsl", y.textContent = "HSL", u.appendChild(v), u.appendChild(f), u.appendChild(y);
     const b = document.createElement("input");
     b.type = "text", b.className = "color-picker-color-input", b.value = this.currentColor, this.input = b;
     const L = document.createElement("div");
     L.className = "color-picker-input-container";
     const I = document.createElement("button");
-    return I.className = "color-picker-copy-inside", I.textContent = "Copy", L.appendChild(b), L.appendChild(I), m.appendChild(u), m.appendChild(L), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, p, b, u, I, l), t;
+    return I.className = "color-picker-copy-inside", I.textContent = "Copy", L.appendChild(b), L.appendChild(I), m.appendChild(u), m.appendChild(L), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(C.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, d, b, u, I, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
     return t.className = "color-picker-backdrop", t.style.display = "none", t.style.pointerEvents = "none", t;
   }
   bind(t, e, i, s, n, o, a) {
-    const l = (h) => {
-      var C;
-      const p = t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width)), f = Math.max(0, Math.min(1, (h.clientY - p.top) / p.height));
-      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(u, g, 1 - f);
-      this.currentColor = v, this.syncInput(), this.updateOpacityBg(), (C = this.onChange) == null || C.call(this, v, this.currentOpacity);
-    }, r = (h) => {
-      var C;
-      const p = e.getBoundingClientRect();
-      let g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
-      this.hueMarker.style.left = `${g * 100}%`;
-      const f = g * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - u);
-      this.currentColor = v, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (C = this.onChange) == null || C.call(this, v, this.currentOpacity);
-    }, c = (h) => {
+    const l = (p) => {
       var f;
-      const p = i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
-      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = Math.round(g * 100), (f = this.onChange) == null || f.call(this, this.currentColor, this.currentOpacity);
+      const d = t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width)), C = Math.max(0, Math.min(1, (p.clientY - d.top) / d.height));
+      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${C * 100}%`;
+      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = W(u, g, 1 - C);
+      this.currentColor = v, this.syncInput(), this.updateOpacityBg(), (f = this.onChange) == null || f.call(this, v, this.currentOpacity);
+    }, r = (p) => {
+      var f;
+      const d = e.getBoundingClientRect();
+      let g = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width));
+      this.hueMarker.style.left = `${g * 100}%`;
+      const C = g * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), v = W(C, m, 1 - u);
+      this.currentColor = v, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${C}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (f = this.onChange) == null || f.call(this, v, this.currentOpacity);
+    }, c = (p) => {
+      var C;
+      const d = i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (p.clientX - d.left) / d.width));
+      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = Math.round(g * 100), (C = this.onChange) == null || C.call(this, this.currentColor, this.currentOpacity);
     };
-    t.addEventListener("mousedown", (h) => {
-      h.preventDefault(), l(h);
-      const p = (f) => l(f), g = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
+    t.addEventListener("mousedown", (p) => {
+      p.preventDefault(), l(p);
+      const d = (C) => l(C), g = () => {
+        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
-    }), e.addEventListener("mousedown", (h) => {
-      h.preventDefault(), r(h);
-      const p = (f) => r(f), g = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
+      document.addEventListener("mousemove", d), document.addEventListener("mouseup", g);
+    }), e.addEventListener("mousedown", (p) => {
+      p.preventDefault(), r(p);
+      const d = (C) => r(C), g = () => {
+        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
-    }), i.addEventListener("mousedown", (h) => {
-      h.preventDefault(), c(h);
-      const p = (f) => c(f), g = () => {
-        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
+      document.addEventListener("mousemove", d), document.addEventListener("mouseup", g);
+    }), i.addEventListener("mousedown", (p) => {
+      p.preventDefault(), c(p);
+      const d = (C) => c(C), g = () => {
+        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
-    }), 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());
+      document.addEventListener("mousemove", d), document.addEventListener("mouseup", g);
+    }), 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());
     }), o.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(s.value);
@@ -838,14 +838,14 @@ class ut {
         s.select(), document.execCommand("copy");
       }
     }), a.addEventListener("click", async () => {
-      var h;
+      var p;
       if (!("EyeDropper" in window)) {
         alert("EyeDropper API is not supported in this browser.");
         return;
       }
       try {
-        const p = new window.EyeDropper(), { sRGBHex: g } = await p.open();
-        this.setColor(g), (h = this.onChange) == null || h.call(this, g, this.currentOpacity);
+        const d = new window.EyeDropper(), { sRGBHex: g } = await d.open();
+        this.setColor(g), (p = this.onChange) == null || p.call(this, g, this.currentOpacity);
       } catch {
       }
     }), document.addEventListener("keydown", this.keyDown, !0), setTimeout(
@@ -856,11 +856,11 @@ class ut {
   setColor(t) {
     var o;
     this.currentColor = t;
-    const { h: e, s: i, v: s } = z(t), n = e >= 360 ? e % 360 : e;
+    const { h: e, s: i, v: s } = U(t), n = e >= 360 ? e % 360 : e;
     this.hueMarker.style.left = `${n / 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(${n}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (o = this.onChange) == null || o.call(this, t, this.currentOpacity);
   }
   syncInput() {
-    const t = this.select.value, { h: e, s: i, v: s } = z(this.currentColor);
+    const t = this.select.value, { h: e, s: i, v: s } = U(this.currentColor);
     if (t === "hex") this.input.value = this.currentColor;
     else if (t === "rgb") {
       const { r: n, g: o, b: a } = P(this.currentColor);
@@ -885,7 +885,7 @@ class ut {
         const s = t.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
         if (s) {
           const n = parseInt(s[1]), o = parseInt(s[2]) / 100, a = parseInt(s[3]) / 100, l = a + o * Math.min(a, 1 - a), r = l === 0 ? 0 : 2 * (1 - a / l);
-          e = U(n, r, l);
+          e = W(n, r, l);
         }
       }
     }
@@ -901,18 +901,18 @@ class ut {
   open(t, e, i) {
     var y;
     this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
-    const { h: s, s: n, v: o } = z(t);
+    const { h: s, s: n, v: o } = U(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}%`, (y = this.recentSectionRefresh) == null || y.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(), c = window.innerWidth, h = window.innerHeight, p = 16;
-    let g = r.right + 8, f = r.top;
+    const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), c = window.innerWidth, p = window.innerHeight, d = 16;
+    let g = r.right + 8, C = r.top;
     const m = c - r.right, u = r.left;
-    m >= a + p ? g = r.right + 8 : u >= a + p ? g = r.left - a - 8 : g = Math.max(p, (c - a) / 2);
-    const v = h - r.bottom, C = r.top;
-    v >= l + p ? f = r.bottom + 8 : C >= l + p ? f = r.top - l - 8 : v > C ? (f = r.bottom + 8, f + l > h - p && (f = h - l - p)) : (f = r.top - l - 8, f < p && (f = p)), this.element.style.left = `${g}px`, this.element.style.top = `${f}px`;
+    m >= a + d ? g = r.right + 8 : u >= a + d ? g = r.left - a - 8 : g = Math.max(d, (c - a) / 2);
+    const v = p - r.bottom, f = r.top;
+    v >= l + d ? C = r.bottom + 8 : f >= l + d ? C = r.top - l - 8 : v > f ? (C = r.bottom + 8, C + l > p - d && (C = p - l - d)) : (C = r.top - l - 8, C < d && (C = d)), this.element.style.left = `${g}px`, this.element.style.top = `${C}px`;
   }
   close(t) {
     var e;
-    this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.onChange && this.recentScope === "solid" && (F.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
+    this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.onChange && this.recentScope === "solid" && (R.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
   }
   getElement() {
     return this.element;
@@ -920,12 +920,19 @@ class ut {
 }
 class Bt {
   constructor(t) {
-    this.isDragging = !1, this.currentColor = t.initialColor, this.currentOpacity = t.initialOpacity, this.onColorChange = t.onColorChange, this.recentScope = t.scope ?? "solid", this.element = this.build(), this.initFromColor(this.currentColor, this.currentOpacity);
+    this.isDragging = !1, this.currentColor = "#FFFFFF", this.currentColor = this.sanitizeColor(t.initialColor), this.currentOpacity = this.clampOpacity(t.initialOpacity), this.onColorChange = t.onColorChange, this.recentScope = t.scope ?? "solid", this.element = this.build(), this.initFromColor(this.currentColor, this.currentOpacity);
   }
   parsePercentage(t) {
     const e = parseFloat(t);
     return isNaN(e) ? 0 : e / 100;
   }
+  sanitizeColor(t) {
+    const e = this.currentColor || "#FFFFFF";
+    return F(t) ?? e;
+  }
+  clampOpacity(t) {
+    return Number.isFinite(t) ? Math.min(100, Math.max(0, Math.round(t))) : 100;
+  }
   build() {
     const t = document.createElement("div");
     t.className = "embedded-color-picker";
@@ -947,70 +954,71 @@ class Bt {
     r.className = "color-picker-opacity embedded", this.opacitySlider = r;
     const c = document.createElement("div");
     c.className = "color-picker-opacity-marker", this.opacityMarker = c, r.appendChild(c), o.appendChild(a), o.appendChild(r), s.appendChild(n), s.appendChild(o);
-    const h = at((b) => {
+    const p = at((b) => {
       const L = T(b);
       L && L.type !== "solid" ? this.onColorChange(b, this.currentOpacity) : (this.setColor(b), this.onColorChange(this.currentColor, this.currentOpacity));
     }, "all");
-    this.recentSectionRefresh = h.refresh;
-    const p = document.createElement("div");
-    p.className = "color-picker-format-section embedded";
+    this.recentSectionRefresh = p.refresh;
+    const d = document.createElement("div");
+    d.className = "color-picker-format-section embedded";
     const g = document.createElement("select");
     g.className = "color-picker-format-select", this.select = g;
-    const f = document.createElement("option");
-    f.value = "hex", f.textContent = "HEX";
+    const C = document.createElement("option");
+    C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
     const u = document.createElement("option");
-    u.value = "hsl", u.textContent = "HSL", g.appendChild(f), g.appendChild(m), g.appendChild(u);
+    u.value = "hsl", u.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(u);
     const v = document.createElement("input");
     v.type = "text", v.className = "color-picker-color-input", this.input = v;
-    const C = document.createElement("div");
-    C.className = "color-picker-input-container";
+    const f = document.createElement("div");
+    f.className = "color-picker-input-container";
     const y = document.createElement("button");
-    return y.className = "color-picker-copy-inside", y.textContent = "Copy", C.appendChild(v), C.appendChild(y), p.appendChild(g), p.appendChild(C), t.appendChild(e), t.appendChild(s), t.appendChild(p), t.appendChild(h.container), this.bind(e, a, r, v, g, y, n), t;
+    return y.className = "color-picker-copy-inside", y.textContent = "Copy", f.appendChild(v), f.appendChild(y), d.appendChild(g), d.appendChild(f), t.appendChild(e), t.appendChild(s), t.appendChild(d), t.appendChild(p.container), this.bind(e, a, r, v, g, y, n), t;
   }
   bind(t, e, i, s, n, o, a) {
-    const l = (h) => {
-      const p = t.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width)), f = Math.max(0, Math.min(1, (h.clientY - p.top) / p.height));
-      this.colorMarker.style.left = `${g * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const u = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(u, g, 1 - f);
-      this.currentColor = v, this.syncInput(), this.updateOpacityBg(), this.queueChange();
-    }, r = (h) => {
-      const p = e.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
-      this.hueMarker.style.left = `${g * 100}%`;
-      const f = g * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), u = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - u);
-      this.currentColor = v, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
-         linear-gradient(to right, #fff, hsl(${f}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
-    }, c = (h) => {
-      const p = i.getBoundingClientRect(), g = Math.max(0, Math.min(1, (h.clientX - p.left) / p.width));
-      this.opacityMarker.style.left = `${g * 100}%`, this.currentOpacity = Math.round(g * 100), this.queueChange();
-    };
-    t.addEventListener("mousedown", (h) => {
-      h.preventDefault(), this.isDragging = !0, l(h);
-      const p = (f) => l(f), g = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
-      };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
-    }), e.addEventListener("mousedown", (h) => {
-      h.preventDefault(), this.isDragging = !0, r(h);
-      const p = (f) => r(f), g = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
+    const l = (d) => {
+      const g = t.getBoundingClientRect(), C = Math.max(0, Math.min(1, (d.clientX - g.left) / g.width)), m = Math.max(0, Math.min(1, (d.clientY - g.top) / g.height));
+      this.colorMarker.style.left = `${C * 100}%`, this.colorMarker.style.top = `${m * 100}%`;
+      const v = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, f = W(v, C, 1 - m);
+      this.currentColor = f, this.syncInput(), this.updateOpacityBg(), this.queueChange();
+    }, r = (d) => {
+      const g = e.getBoundingClientRect(), C = Math.max(0, Math.min(1, (d.clientX - g.left) / g.width));
+      this.hueMarker.style.left = `${C * 100}%`;
+      const m = C * 360, u = this.parsePercentage(this.colorMarker.style.left || "0%"), v = this.parsePercentage(this.colorMarker.style.top || "0%"), f = W(m, u, 1 - v);
+      this.currentColor = f, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
+         linear-gradient(to right, #fff, hsl(${m}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), this.queueChange();
+    }, c = (d) => {
+      const g = i.getBoundingClientRect(), C = Math.max(0, Math.min(1, (d.clientX - g.left) / g.width));
+      this.opacityMarker.style.left = `${C * 100}%`, this.currentOpacity = this.clampOpacity(C * 100), this.queueChange();
+    }, p = (d, g) => {
+      d.preventDefault(), this.isDragging = !0, g(d);
+      let C;
+      const m = () => {
+        this.isDragging && (this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", C), document.removeEventListener("mouseup", m), window.removeEventListener("blur", m), this.applyPendingExternal());
       };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
-    }), i.addEventListener("mousedown", (h) => {
-      h.preventDefault(), this.isDragging = !0, c(h);
-      const p = (f) => c(f), g = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
-      };
-      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
+      C = (u) => {
+        if (!u.buttons) {
+          m();
+          return;
+        }
+        g(u);
+      }, document.addEventListener("mousemove", C), document.addEventListener("mouseup", m), window.addEventListener("blur", m);
+    };
+    t.addEventListener("mousedown", (d) => {
+      p(d, l);
+    }), e.addEventListener("mousedown", (d) => {
+      p(d, r);
+    }), i.addEventListener("mousedown", (d) => {
+      p(d, c);
     }), 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());
+    }), s.addEventListener("keydown", (d) => {
+      d.key === "Enter" && (d.preventDefault(), this.syncInput(), s.blur());
     }), o.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(s.value);
@@ -1023,20 +1031,21 @@ class Bt {
         return;
       }
       try {
-        const h = new window.EyeDropper(), { sRGBHex: p } = await h.open();
-        this.setColor(p), this.onColorChange(this.currentColor, this.currentOpacity);
+        const d = new window.EyeDropper(), { sRGBHex: g } = await d.open();
+        this.setColor(g), this.onColorChange(this.currentColor, this.currentOpacity);
       } catch {
       }
     });
   }
   setColor(t) {
-    this.currentColor = t;
-    const { h: e, s: i, v: s } = z(t), n = e >= 360 ? e % 360 : e;
-    this.hueMarker.style.left = `${n / 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(${n}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg();
+    const e = this.sanitizeColor(t);
+    this.currentColor = e;
+    const { h: i, s, v: n } = U(e), o = i >= 360 ? i % 360 : i;
+    this.hueMarker.style.left = `${o / 360 * 100}%`, this.colorMarker.style.left = `${s * 100}%`, this.colorMarker.style.top = `${(1 - n) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
+       linear-gradient(to right, #fff, hsl(${o}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg();
   }
   syncInput() {
-    const t = this.select.value, { h: e, s: i, v: s } = z(this.currentColor);
+    const t = this.select.value, { h: e, s: i, v: s } = U(this.currentColor);
     if (t === "hex")
       this.input.value = this.currentColor;
     else if (t === "rgb") {
@@ -1063,7 +1072,7 @@ class Bt {
         const s = t.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
         if (s) {
           const n = parseInt(s[1], 10), o = parseInt(s[2], 10) / 100, a = parseInt(s[3], 10) / 100, l = a + o * Math.min(a, 1 - a), r = l === 0 ? 0 : 2 * (1 - a / l);
-          e = U(n, r, l);
+          e = W(n, r, l);
         }
       }
     }
@@ -1090,15 +1099,16 @@ class Bt {
     this.pendingExternalUpdate = void 0, this.initFromColor(t, e);
   }
   initFromColor(t, e) {
-    var a;
-    this.currentColor = t, this.currentOpacity = e;
-    const { h: i, s, v: n } = z(t), o = i >= 360 ? i % 360 : i;
-    this.hueMarker.style.left = `${o / 360 * 100}%`, this.colorMarker.style.left = `${s * 100}%`, this.colorMarker.style.top = `${(1 - n) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent),
-       linear-gradient(to right, #fff, hsl(${o}, 100%, 50%))`, this.opacityMarker.style.left = `${e}%`, this.updateOpacityBg(), this.syncInput(), (a = this.recentSectionRefresh) == null || a.call(this);
+    var l;
+    const i = this.sanitizeColor(t);
+    this.currentColor = i, this.currentOpacity = this.clampOpacity(e);
+    const { h: s, s: n, v: o } = U(i), a = s >= 360 ? s % 360 : s;
+    this.hueMarker.style.left = `${a / 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(${a}, 100%, 50%))`, this.opacityMarker.style.left = `${this.currentOpacity}%`, this.updateOpacityBg(), this.syncInput(), (l = this.recentSectionRefresh) == null || l.call(this);
   }
   commitRecentColor() {
     var t;
-    this.recentScope === "solid" && (F.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this));
+    this.recentScope === "solid" && (R.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this));
   }
   getElement() {
     return this.element;
@@ -1123,10 +1133,10 @@ const V = class V extends x {
       angle: "number",
       stops: "text"
     }, this.element = null, this.previewEl = null, this.inputEl = void 0, this.popoverEl = null, this.backdropEl = null, this.isPopoverOpen = !1, this.isEditing = !1, this.popoverPosition = null, this.previewUpdateTimeout = null, this.changeDebounceTimeout = null, this.solidPicker = null, this.pendingSolidColor = null, this.variant = "default", this.globalLayoutMode = "list", this.globalSearchQuery = "", this.currentMode = "custom", this.linkedGlobalVariable = null, this.unlinkButton = null, this.onBackgroundClick = (i) => {
-      var p;
+      var d;
       if (!this.popoverEl || !this.isPopoverOpen) return;
-      const s = i.target, n = this.popoverEl.contains(s), o = (p = this.element) == null ? void 0 : p.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((g) => g.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), c = s.classList.contains("color-picker-backdrop"), h = s.classList.contains("gradient-popover-backdrop");
-      !n && !o && !l && !r && !c && !h && this.closePopover();
+      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((g) => g.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), c = s.classList.contains("color-picker-backdrop"), p = s.classList.contains("gradient-popover-backdrop");
+      !n && !o && !l && !r && !c && !p && this.closePopover();
     }, this.handlePopoverKeydown = (i) => {
       if (this.isPopoverOpen) {
         if (i.key === "Escape") {
@@ -1308,8 +1318,8 @@ const V = class V extends x {
     n.appendChild(o), s.appendChild(n);
     const a = document.createElement("div");
     if (a.className = "gradient-editor-content", this.updatePopoverContent(a), s.appendChild(a), this.variant !== "global" && e) {
-      const l = e.children[0], r = e.children[1], c = (h) => {
-        this.currentMode = h, h === "custom" ? (l.classList.add("active"), r.classList.remove("active"), n.style.display = "block") : (r.classList.add("active"), l.classList.remove("active"), n.style.display = "none"), this.updatePopoverContent(a);
+      const l = e.children[0], r = e.children[1], c = (p) => {
+        this.currentMode = p, p === "custom" ? (l.classList.add("active"), r.classList.remove("active"), n.style.display = "block") : (r.classList.add("active"), l.classList.remove("active"), n.style.display = "none"), this.updatePopoverContent(a);
       };
       l.addEventListener("click", () => c("custom")), r.addEventListener("click", () => c("global")), this.isBoundToGlobal() ? (this.currentMode = "global", c("global")) : (this.currentMode = "custom", c("custom"));
     }
@@ -1376,48 +1386,48 @@ const V = class V extends x {
   }
   renderGlobalColors(t) {
     (!this.value || !this.value.stops || !this.value.stops.length) && (this.value || (this.value = this.defaultValue()), this.value.stops = [{ color: "#000000", position: 0, opacity: 100 }]);
-    const e = this.value.stops[0], i = (h) => {
-      h.innerHTML = "";
-      let p = {};
+    const e = this.value.stops[0], i = (p) => {
+      p.innerHTML = "";
+      let d = {};
       try {
-        p = x.GlobalVariables || {};
+        d = x.GlobalVariables || {};
       } catch (u) {
         console.warn("Could not access Setting.GlobalVariables", u);
       }
-      if (!p || Object.keys(p).length === 0) {
+      if (!d || Object.keys(d).length === 0) {
         const u = document.createElement("div");
-        u.textContent = "No global colors defined", u.style.fontSize = "12px", u.style.color = "#666", u.style.padding = "8px", h.appendChild(u);
+        u.textContent = "No global colors defined", u.style.fontSize = "12px", u.style.color = "#666", u.style.padding = "8px", p.appendChild(u);
         return;
       }
       const g = x.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
-      ], f = this.globalSearchQuery.toLowerCase();
+      ], C = this.globalSearchQuery.toLowerCase();
       let m;
-      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), h.appendChild(m), g.forEach((u) => {
-        const v = Object.entries(p).filter(([C]) => !u.keys.includes(C) && u.title !== "Global Colors" ? !1 : u.keys.includes(C) && C.toLowerCase().includes(f));
-        v.length !== 0 && v.forEach(([C, y]) => {
+      this.globalLayoutMode === "list" ? (m = document.createElement("div"), m.className = "global-colors-list") : (m = document.createElement("div"), m.className = "global-colors-grid"), p.appendChild(m), g.forEach((u) => {
+        const v = Object.entries(d).filter(([f]) => !u.keys.includes(f) && u.title !== "Global Colors" ? !1 : u.keys.includes(f) && f.toLowerCase().includes(C));
+        v.length !== 0 && v.forEach(([f, y]) => {
           if (this.globalLayoutMode === "list") {
             const b = document.createElement("div");
             b.className = "global-color-row";
             const L = document.createElement("div");
             L.className = "global-color-circle";
             const I = this.resolveGlobalVarColor(y);
-            L.style.background = I, (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && L.classList.add("selected");
+            L.style.background = I, (this.linkedGlobalVariable === `var(--${f})` || e.color === `var(--${f})`) && L.classList.add("selected");
             const w = document.createElement("span");
-            w.className = "global-color-label", w.textContent = C.split("-").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" "), b.appendChild(L), b.appendChild(w), b.addEventListener("click", (N) => {
+            w.className = "global-color-label", w.textContent = f.split("-").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" "), b.appendChild(L), b.appendChild(w), b.addEventListener("click", (N) => {
               N.preventDefault();
-              const D = `var(--${C})`;
-              this.setValue(D), this.pendingSolidColor = D, i(h);
+              const D = `var(--${f})`;
+              this.setValue(D), this.pendingSolidColor = D, i(p);
             }), m.appendChild(b);
           } else {
             const b = document.createElement("div");
             b.className = "global-color-circle";
             const L = this.resolveGlobalVarColor(y);
-            b.style.background = L, b.title = C.split("-").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && b.classList.add("selected"), b.addEventListener("click", (E) => {
+            b.style.background = L, b.title = f.split("-").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${f})` || e.color === `var(--${f})`) && b.classList.add("selected"), b.addEventListener("click", (E) => {
               E.preventDefault();
-              const w = `var(--${C})`;
-              this.setValue(w), this.pendingSolidColor = w, i(h);
+              const w = `var(--${f})`;
+              this.setValue(w), this.pendingSolidColor = w, i(p);
             }), m.appendChild(b);
           }
         });
@@ -1431,8 +1441,8 @@ const V = class V extends x {
     const a = document.createElement("input");
     a.type = "text", a.className = "global-search-input", a.placeholder = "Search", a.value = this.globalSearchQuery;
     const l = document.createElement("div");
-    a.addEventListener("input", (h) => {
-      this.globalSearchQuery = h.target.value, i(l);
+    a.addEventListener("input", (p) => {
+      this.globalSearchQuery = p.target.value, i(l);
     }), n.appendChild(o), n.appendChild(a);
     const r = document.createElement("button");
     r.className = "global-layout-toggle", r.type = "button";
@@ -1467,15 +1477,15 @@ const V = class V extends x {
     {
       const c = document.createElement("div");
       c.className = "gradient-subtype-inline";
-      const h = document.createElement("select");
-      h.className = "gradient-subtype-select";
-      const p = document.createElement("option");
-      p.value = "linear", p.textContent = "Linear";
+      const p = document.createElement("select");
+      p.className = "gradient-subtype-select";
+      const d = document.createElement("option");
+      d.value = "linear", d.textContent = "Linear";
       const g = document.createElement("option");
-      g.value = "radial", g.textContent = "Radial", h.appendChild(p), h.appendChild(g), h.value = this.value.type === "radial" ? "radial" : "linear", e = document.createElement("input"), e.type = "text", e.inputMode = "numeric", e.className = "gradient-degree-input", e.value = `${this.value.angle ?? 90}°`, e.style.width = "75px", e.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, e.value = "90°");
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gradient-flip-btn", f.innerHTML = Tt, h.addEventListener("change", () => {
-        this.clearGlobalBindingForCustomChange(), this.switchType(h.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
+      g.value = "radial", g.textContent = "Radial", p.appendChild(d), p.appendChild(g), p.value = this.value.type === "radial" ? "radial" : "linear", e = document.createElement("input"), e.type = "text", e.inputMode = "numeric", e.className = "gradient-degree-input", e.value = `${this.value.angle ?? 90}°`, e.style.width = "75px", e.style.textAlign = "center", (!this.value.angle || this.value.stops.length < 2) && (this.value.angle = 90, e.value = "90°");
+      const C = document.createElement("button");
+      C.type = "button", C.className = "gradient-flip-btn", C.innerHTML = Tt, p.addEventListener("change", () => {
+        this.clearGlobalBindingForCustomChange(), this.switchType(p.value === "radial" ? "radial" : "linear", !0), e && this.updateDegreeVisibility(e);
       }), e.addEventListener("focus", (m) => {
         const u = m.target;
         u.value = u.value.replace(/[^0-9-]/g, ""), setTimeout(() => u.select(), 0);
@@ -1484,16 +1494,16 @@ const V = class V extends x {
         const u = parseInt(m.target.value);
         !Number.isNaN(u) && this.value && (this.value.angle = Math.max(0, Math.min(360, u)), this.debouncedPreviewUpdate());
       }), e.addEventListener("blur", (m) => {
-        var C;
+        var f;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
         const u = m.target;
         let v = parseInt(u.value);
-        Number.isNaN(v) && (v = ((C = this.value) == null ? void 0 : C.angle) ?? 0), v = Math.max(0, Math.min(360, v)), this.value && (this.value.angle = v), u.value = `${v}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+        Number.isNaN(v) && (v = ((f = this.value) == null ? void 0 : f.angle) ?? 0), v = Math.max(0, Math.min(360, v)), this.value && (this.value.angle = v), u.value = `${v}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+      }), C.addEventListener("click", () => {
         this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((m) => {
           m.position = 100 - m.position;
         }), this.value.stops.sort((m, u) => m.position - u.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
-      }), c.appendChild(h), c.appendChild(e), c.appendChild(f), t.appendChild(c), this.updateDegreeVisibility(e);
+      }), c.appendChild(p), c.appendChild(e), c.appendChild(C), t.appendChild(c), this.updateDegreeVisibility(e);
     }
     const i = document.createElement("div");
     i.className = "gradient-preview", this.updateGradientPreview(i);
@@ -1508,8 +1518,8 @@ const V = class V extends x {
     const l = document.createElement("div");
     l.className = "gradient-stops", t.appendChild(n), t.appendChild(l), this.updateStopsList(l);
     const r = at((c) => {
-      const h = T(c);
-      h && (this.clearGlobalBindingForCustomChange(), this.value = h, this.switchType(h.type, !0), this.updateUI(), this.triggerChange());
+      const p = T(c);
+      p && (this.clearGlobalBindingForCustomChange(), this.value = p, this.switchType(p.type, !0), this.updateUI(), this.triggerChange());
     }, "all");
     this.recentGradientRefresh = r.refresh, t.appendChild(r.container), a.addEventListener("click", () => {
       var c;
@@ -1547,29 +1557,29 @@ const V = class V extends x {
       const l = new ut((u, v) => {
         this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = u, v !== void 0 && (this.value.stops[s].opacity = v), o.style.backgroundColor = u, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
       }, "solid");
-      let r = !1, c = !1, h = 0, p = 0;
+      let r = !1, c = !1, p = 0, d = 0;
       const g = (u) => {
-        r = !0, c = !1, h = u.clientX, p = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", m), u.preventDefault(), u.stopPropagation();
-      }, f = (u) => {
+        r = !0, c = !1, p = u.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", C), document.addEventListener("mouseup", m), u.preventDefault(), u.stopPropagation();
+      }, C = (u) => {
         if (!r || !this.value) return;
-        const v = u.clientX - h;
+        const v = u.clientX - p;
         if (Math.abs(v) > 3 && (c = !0), c) {
           this.clearGlobalBindingForCustomChange();
-          const C = e.getBoundingClientRect();
-          let y = p + v / C.width * 100;
+          const f = e.getBoundingClientRect();
+          let y = d + v / f.width * 100;
           y = Math.max(0, Math.min(100, y)), this.value.stops[s].position = Math.round(y), n.style.left = `${y}%`, this.updateGradientPreview();
         }
       }, m = (u) => {
         var v;
         if (r)
-          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", m), c)
-            this.value && (this.value.stops.sort((C, y) => C.position - y.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
+          if (r = !1, n.classList.remove("selected"), document.removeEventListener("mousemove", C), document.removeEventListener("mouseup", m), c)
+            this.value && (this.value.stops.sort((f, y) => f.position - y.position), this.createHandles(t, e), this.updateStopsList()), this.updateUI(), this.triggerChange();
           else {
             u.stopPropagation();
-            const C = (v = this.value) == null ? void 0 : v.stops[s];
-            C && setTimeout(() => {
-              const y = this.resolveGlobalVarColor(C.color);
-              l.open(y, o, C.opacity ?? 100);
+            const f = (v = this.value) == null ? void 0 : v.stops[s];
+            f && setTimeout(() => {
+              const y = this.resolveGlobalVarColor(f.color);
+              l.open(y, o, f.opacity ?? 100);
             }, 0);
           }
       };
@@ -1589,50 +1599,50 @@ const V = class V extends x {
       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 c = this.resolveGlobalVarColor(s.color), h = document.createElement("div");
-      h.className = "gstop-color-preview", h.style.backgroundColor = c;
-      const p = document.createElement("input");
-      p.type = "text", p.className = "gstop-color-input", p.value = c.replace("#", "").toUpperCase();
+      const c = this.resolveGlobalVarColor(s.color), p = document.createElement("div");
+      p.className = "gstop-color-preview", p.style.backgroundColor = c;
+      const d = document.createElement("input");
+      d.type = "text", d.className = "gstop-color-input", d.value = c.replace("#", "").toUpperCase();
       const g = document.createElement("button");
-      g.type = "button", g.className = "gstop-color-copy", g.textContent = "Copy", r.appendChild(h), r.appendChild(p), r.appendChild(g);
-      const f = document.createElement("button");
-      f.type = "button", f.className = "gstop-del", f.innerHTML = Pt, f.disabled = (((I = (L = this.value) == null ? void 0 : L.stops) == null ? void 0 : I.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(f), e.appendChild(o);
+      g.type = "button", g.className = "gstop-color-copy", g.textContent = "Copy", r.appendChild(p), r.appendChild(d), r.appendChild(g);
+      const C = document.createElement("button");
+      C.type = "button", C.className = "gstop-del", C.innerHTML = Pt, C.disabled = (((I = (L = this.value) == null ? void 0 : L.stops) == null ? void 0 : I.length) || 0) <= 2, o.appendChild(a), o.appendChild(r), o.appendChild(C), e.appendChild(o);
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
       const u = document.createElement("div");
       u.className = "gstop-opacity-group";
       const v = document.createElement("input");
       v.type = "range", v.className = "gstop-opacity-slider", v.min = "0", v.max = "100", v.value = String(s.opacity ?? 100);
-      const C = P(c);
-      v.style.setProperty("--slider-color", `rgb(${C.r}, ${C.g}, ${C.b})`);
+      const f = P(c);
+      v.style.setProperty("--slider-color", `rgb(${f.r}, ${f.g}, ${f.b})`);
       const y = document.createElement("span");
       y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, u.appendChild(v), u.appendChild(y);
       const b = new ut((E, w) => {
-        this.clearGlobalBindingForCustomChange(), p.value = E.replace("#", "").toUpperCase(), h.style.backgroundColor = E, this.value.stops[n].color = E, w !== void 0 && (this.value.stops[n].opacity = w, v.value = String(w), y.textContent = `${w}%`);
+        this.clearGlobalBindingForCustomChange(), d.value = E.replace("#", "").toUpperCase(), p.style.backgroundColor = E, this.value.stops[n].color = E, w !== void 0 && (this.value.stops[n].opacity = w, v.value = String(w), y.textContent = `${w}%`);
         const N = P(E);
         v.style.setProperty("--slider-color", `rgb(${N.r}, ${N.g}, ${N.b})`), this.updateGradientPreview(), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateUI(), this.triggerChange();
       }, "solid");
-      p.addEventListener("click", (E) => {
+      d.addEventListener("click", (E) => {
         E.preventDefault(), E.stopPropagation();
         const w = this.resolveGlobalVarColor(s.color);
-        b.open(w, p, s.opacity ?? 100);
-      }), p.addEventListener("input", () => {
+        b.open(w, d, s.opacity ?? 100);
+      }), d.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const E = p.value.trim(), w = E.startsWith("#") ? E : `#${E}`;
+        const E = d.value.trim(), w = E.startsWith("#") ? E : `#${E}`;
         if (/^#[0-9A-Fa-f]{6}$/.test(w)) {
-          this.value.stops[n].color = w, h.style.backgroundColor = w;
+          this.value.stops[n].color = w, p.style.backgroundColor = w;
           const N = P(w);
           v.style.setProperty("--slider-color", `rgb(${N.r}, ${N.g}, ${N.b})`), this.debouncedPreviewUpdate();
         }
-      }), p.addEventListener("blur", () => {
+      }), d.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }), g.addEventListener("click", async (E) => {
         E.stopPropagation();
         try {
-          await navigator.clipboard.writeText(`#${p.value}`);
+          await navigator.clipboard.writeText(`#${d.value}`);
         } catch {
         }
       }), l.addEventListener("focus", (E) => {
@@ -1658,7 +1668,7 @@ const V = class V extends x {
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateUI(), this.triggerChange();
-      }), f.addEventListener("click", () => {
+      }), C.addEventListener("click", () => {
         var E;
         (this.value.stops.length || 0) <= 2 || (this.clearGlobalBindingForCustomChange(), this.value.stops.splice(n, 1), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
@@ -1697,10 +1707,10 @@ const V = class V extends x {
         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, c = t.left, h = e + n;
-        r < h && c > r + 100 && (a = t.left - e - 8);
-        const p = s - t.bottom, g = t.top;
-        g >= o + n ? l = t.top - o - 8 : p >= o + n ? l = t.bottom + 8 : g > p ? (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 };
+        const r = i - t.right, c = t.left, p = e + n;
+        r < p && c > r + 100 && (a = t.left - e - 8);
+        const d = s - t.bottom, g = t.top;
+        g >= o + n ? l = t.top - o - 8 : d >= o + n ? l = t.bottom + 8 : g > 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 };
       }
       setTimeout(() => document.addEventListener("click", this.onBackgroundClick, !0), 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
     }
@@ -1718,10 +1728,10 @@ const V = class V extends x {
         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 c = s - e.right, h = e.left, p = i + o;
-        c < p && h > c + 100 && (l = e.left - i - 8);
-        const g = n - e.bottom, f = e.top;
-        f >= a + o ? r = e.top - a - 8 : g >= a + o ? r = e.bottom + 8 : f > g ? (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`;
+        const c = s - e.right, p = e.left, d = i + o;
+        c < d && p > c + 100 && (l = e.left - i - 8);
+        const g = n - e.bottom, C = e.top;
+        C >= a + o ? r = e.top - a - 8 : g >= a + o ? r = e.bottom + 8 : C > g ? (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`;
       });
     }
   }
@@ -1740,13 +1750,13 @@ const V = class V extends x {
     if (!(!this.popoverEl || !this.isPopoverOpen)) {
       if (this.isPopoverOpen = !1, this.popoverPosition = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl.style.display = "none", document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.commitPendingSolidColor(), this.value && this.value.type !== "solid") {
         const e = S(this.value);
-        F.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
+        R.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
       }
       this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), V.openInstance === this && (V.openInstance = null);
     }
   }
   commitPendingSolidColor() {
-    this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : F.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
+    this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : R.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
   }
   handlePaste(t) {
     var i;
@@ -1796,10 +1806,10 @@ const V = class V extends x {
 };
 V.openInstance = null, V.CHANGE_DEBOUNCE_DELAY = 150;
 let j = V;
-function J(d, t) {
-  for (const e in d)
-    if (Object.prototype.hasOwnProperty.call(d, e)) {
-      const i = d[e];
+function J(h, t) {
+  for (const e in h)
+    if (Object.prototype.hasOwnProperty.call(h, e)) {
+      const i = h[e];
       t(e, i);
     }
 }
@@ -1820,6 +1830,14 @@ const Q = class Q {
   setNestingLevel(t) {
     this.nestingLevel = t, this.propagateNestingLevel(), this.elementRef && this.updateNestingStyles();
   }
+  setTitle(t) {
+    if (this.title = t, this.elementRef) {
+      const e = this.elementRef.querySelector(
+        ".setting-group-title h3"
+      );
+      e && (e.textContent = t);
+    }
+  }
   getDataPropsPath() {
     return this.dataPropsPath;
   }
@@ -1897,16 +1915,16 @@ const Q = class Q {
     }), s.forEach((r) => {
       n.includes(r) || this.removeSetting(r);
     }), n.forEach((r) => {
-      var p;
-      const c = t[r], h = this.settings[r];
-      if (h !== c && (h && this.removeSetting(r), this.addSetting(r, c), i && r in o)) {
+      var d;
+      const c = t[r], p = this.settings[r];
+      if (p !== c && (p && this.removeSetting(r), this.addSetting(r, c), i && r in o)) {
         const g = o[r];
         try {
           k(c) ? c.setValue(
             g
-          ) : G(c) ? (p = c.setValue) == null || p.call(c, g) : c.setValue && c.setValue(g);
-        } catch (f) {
-          console.warn(`Could not preserve value for setting ${r}:`, f);
+          ) : G(c) ? (d = c.setValue) == null || d.call(c, g) : c.setValue && c.setValue(g);
+        } catch (C) {
+          console.warn(`Could not preserve value for setting ${r}:`, C);
         }
       }
     }), this.settings = t, this.propagateNestingLevel(), this.propagateDataPropsPath();
@@ -2037,8 +2055,8 @@ const Q = class Q {
         k(e) && typeof e.setNestingLevel == "function" && e.setNestingLevel(this.nestingLevel + 1);
         const a = e.draw(), l = this.deleteItemCfg ?? this.addItemCfg;
         if (l) {
-          const h = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
-          h && t.startsWith(h) && this.addDeleteButtonToElement(a, t);
+          const p = l.keyPrefix ?? ((s = this.addItemCfg) == null ? void 0 : s.keyPrefix);
+          p && t.startsWith(p) && this.addDeleteButtonToElement(a, t);
         }
         const r = o.querySelector(".sg-add-button-bottom");
         r ? o.insertBefore(a, r) : o.appendChild(a), rt.trackElement(a), Z(a, this.nestingLevel + 1), et(a, this.nestingLevel + 1);
@@ -2190,11 +2208,11 @@ const Q = class Q {
         r(), t(!1);
       }), l.addEventListener("click", () => {
         r(), t(!0);
-      }), e.addEventListener("click", (h) => {
-        h.target === e && (r(), t(!1));
+      }), e.addEventListener("click", (p) => {
+        p.target === e && (r(), t(!1));
       });
-      const c = (h) => {
-        h.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", c));
+      const c = (p) => {
+        p.key === "Escape" && (r(), t(!1), document.removeEventListener("keydown", c));
       };
       document.addEventListener("keydown", c), 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)";
@@ -2202,11 +2220,16 @@ const Q = class Q {
     });
   }
   getNextIndexFromPrefix(t) {
-    const e = Object.keys(this.settings).filter((i) => i.startsWith(t)).map((i) => {
-      const s = Number(i.slice(t.length));
-      return Number.isFinite(s) ? s : -1;
-    }).filter((i) => i >= 0);
-    return e.length ? Math.max(...e) + 1 : 0;
+    const e = new Set(
+      Object.keys(this.settings).filter((s) => s.startsWith(t)).map((s) => {
+        const n = Number(s.slice(t.length));
+        return Number.isFinite(n) ? n : -1;
+      }).filter((s) => s >= 0)
+    );
+    let i = 0;
+    for (; e.has(i); )
+      i += 1;
+    return i;
   }
   calculateChanges(t, e) {
     const i = {};
@@ -2333,14 +2356,14 @@ const Q = class Q {
     }, Object.keys(this.settings).length > 0) {
       for (const c in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, c)) {
-          const h = this.settings[c];
-          k(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.nestingLevel + 1);
-          const p = h.draw();
-          k(h) && h.deleteItemCfg && this.addDeleteButtonToElement(
-            p,
+          const p = this.settings[c];
+          k(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.nestingLevel + 1);
+          const d = p.draw();
+          k(p) && p.deleteItemCfg && this.addDeleteButtonToElement(
+            d,
             c,
-            h
-          ), a.appendChild(p);
+            p
+          ), a.appendChild(d);
         }
     } else {
       const c = document.createElement("div");
@@ -2349,18 +2372,18 @@ const Q = class Q {
     if (this.addItemCfg) {
       const c = document.createElement("button");
       c.type = "button", c.className = "sg-add-button-bottom", c.style.marginTop = "8px";
-      const h = `
+      const p = `
     <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>`;
-      c.innerHTML = `${h}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, c.addEventListener("click", (p) => {
-        p.stopPropagation(), p.preventDefault();
-        const g = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(g);
-        if (ct(f)) {
+      c.innerHTML = `${p}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, c.addEventListener("click", (d) => {
+        d.stopPropagation(), d.preventDefault();
+        const g = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), C = this.addItemCfg.createItem(g);
+        if (ct(C)) {
           const m = `${this.addItemCfg.keyPrefix}${g}`;
-          this.addSetting(m, f);
+          this.addSetting(m, C);
         }
       }), a.appendChild(c);
     }
@@ -2408,8 +2431,8 @@ const Q = class Q {
 };
 Q.hiddenElements = /* @__PURE__ */ new Set();
 let $ = Q;
-function be(d) {
-  return new At(d);
+function be(h) {
+  return new At(h);
 }
 class At extends $ {
   constructor(t) {
@@ -2461,9 +2484,9 @@ class At extends $ {
       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 c = document.createElement("div");
       c.className = "tab-panel", this.contentContainers[a] = c;
-      const h = this.settings[a];
-      h && (k(h) && typeof h.setNestingLevel == "function" && h.setNestingLevel(this.getNestingLevel() + 1), c.appendChild(
-        h.draw()
+      const p = this.settings[a];
+      p && (k(p) && typeof p.setNestingLevel == "function" && p.setNestingLevel(this.getNestingLevel() + 1), c.appendChild(
+        p.draw()
       )), o.appendChild(c), 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];
@@ -2472,11 +2495,11 @@ class At extends $ {
     return this.updateTabUI(), t;
   }
 }
-function Dt(d) {
-  return new $(d);
+function Dt(h) {
+  return new $(h);
 }
-function we(d) {
-  return d;
+function we(h) {
+  return h;
 }
 class Gt extends x {
   constructor(t = {}) {
@@ -2519,8 +2542,8 @@ class O extends Gt {
     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 = (c) => {
-      const h = c.toString(16);
-      return h.length === 1 ? "0" + h : h;
+      const p = c.toString(16);
+      return p.length === 1 ? "0" + p : p;
     };
     return `#${r(o)}${r(a)}${r(l)}`;
   }
@@ -2581,15 +2604,15 @@ class O extends Gt {
           return;
         }
         Object.entries(m).forEach(([u, v]) => {
-          const C = document.createElement("button");
-          C.className = "global-color-btn", C.title = u, C.style.width = "30px", C.style.height = "30px", C.style.borderRadius = "50%", C.style.border = "1px solid #ddd", C.style.backgroundColor = v, C.style.cursor = "pointer", this.value === `var(--${u})` && (C.style.border = "2px solid #2196f3"), C.addEventListener("click", (y) => {
+          const f = document.createElement("button");
+          f.className = "global-color-btn", f.title = u, f.style.width = "30px", f.style.height = "30px", f.style.borderRadius = "50%", f.style.border = "1px solid #ddd", f.style.backgroundColor = v, f.style.cursor = "pointer", this.value === `var(--${u})` && (f.style.border = "2px solid #2196f3"), f.addEventListener("click", (y) => {
             var L, I;
             y.preventDefault();
             const b = `var(--${u})`;
             this.value = b, (L = this.onChange) == null || L.call(this, b), (I = this.detectChange) == null || I.call(this, b), Array.from(a.children).forEach((E) => {
               E.style.border = "1px solid #ddd";
-            }), C.style.border = "2px solid #2196f3", h.style.backgroundColor = v;
-          }), a.appendChild(C);
+            }), f.style.border = "2px solid #2196f3", p.style.backgroundColor = v;
+          }), a.appendChild(f);
         });
       } catch (m) {
         console.error("ColorSetting: Error in renderGlobalOptions", m), a.innerHTML = "Error loading global options";
@@ -2604,48 +2627,48 @@ class O extends Gt {
       const u = m.value.trim();
       if (!u)
         return e.classList.remove("error"), !0;
-      const C = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(u);
-      return C ? e.classList.remove("error") : e.classList.add("error"), C;
+      const f = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(u);
+      return f ? e.classList.remove("error") : e.classList.add("error"), f;
     }, c = document.createElement("input");
     c.type = "color", c.className = "color-picker", c.value = this.value && !this.value.startsWith("var(--") ? this.value : "#000000", c.setAttribute("aria-label", "Choose color"), c.setAttribute("title", "Click to open color picker"), this.getDataPropsPath() && c.setAttribute("data-test-id", this.getDataPropsPath()), this.colorInputEl = c;
-    const h = document.createElement("div");
-    h.className = "color-preview";
-    let p = this.value || "#000000";
-    if (p.startsWith("var(--")) {
-      const m = p.replace("var(--", "").replace(")", "");
-      p = (x.GlobalVariables || {})[m] || "#000000";
+    const p = document.createElement("div");
+    p.className = "color-preview";
+    let d = this.value || "#000000";
+    if (d.startsWith("var(--")) {
+      const m = d.replace("var(--", "").replace(")", "");
+      d = (x.GlobalVariables || {})[m] || "#000000";
     }
-    h.style.backgroundColor = p;
+    p.style.backgroundColor = d;
     const g = document.createElement("input");
     g.type = "text", g.className = "color-text-input", g.value = this.value || "", g.placeholder = "#000000", g.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), g.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), g.setAttribute("aria-label", "Hex color value"), g.setAttribute("maxlength", "7"), this.getDataPropsPath() && g.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = g;
-    const f = (m) => {
-      var v, C;
+    const C = (m) => {
+      var v, f;
       let u = m.trim();
       if (u && !u.startsWith("#") && !u.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(u) && (u = "#" + u, this.textInputEl && (this.textInputEl.value = u)), this.textInputEl && r(this.textInputEl)) {
         const y = O.normalizeColorValue(u);
-        this.value = y, (v = this.onChange) == null || v.call(this, y), (C = this.detectChange) == null || C.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), h.style.backgroundColor = y;
+        this.value = y, (v = this.onChange) == null || v.call(this, y), (f = this.detectChange) == null || f.call(this, y), this.colorInputEl && (this.colorInputEl.value = y), p.style.backgroundColor = y;
       }
     };
     return this.textInputEl.addEventListener("input", (m) => {
       const u = m.target.value;
-      f(u);
+      C(u);
     }), this.textInputEl.addEventListener("paste", (m) => {
       var v;
       m.preventDefault();
       const u = ((v = m.clipboardData) == null ? void 0 : v.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = u.trim(), f(u));
+      this.textInputEl && (this.textInputEl.value = u.trim(), C(u));
     }), this.textInputEl.addEventListener("keydown", (m) => {
-      var u, v, C;
-      m.key === "Enter" && (m.preventDefault(), f(((u = this.textInputEl) == null ? void 0 : u.value) || ""), (v = this.textInputEl) == null || v.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (C = this.textInputEl) == null || C.blur(), e.classList.remove("error"));
+      var u, v, f;
+      m.key === "Enter" && (m.preventDefault(), C(((u = this.textInputEl) == null ? void 0 : u.value) || ""), (v = this.textInputEl) == null || v.blur()), m.key === "Escape" && (this.textInputEl && this.value && (this.textInputEl.value = this.value), (f = this.textInputEl) == null || f.blur(), e.classList.remove("error"));
     }), this.colorInputEl.addEventListener("input", (m) => {
-      var C, y;
+      var f, y;
       const u = m.target.value, v = O.normalizeColorValue(u);
-      this.value = v, (C = this.onChange) == null || C.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), h.style.backgroundColor = v, e.classList.remove("error");
+      this.value = v, (f = this.onChange) == null || f.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), p.style.backgroundColor = v, e.classList.remove("error");
     }), this.colorInputEl.addEventListener("change", (m) => {
-      var C, y;
+      var f, y;
       const u = m.target.value, v = O.normalizeColorValue(u);
-      this.value = v, (C = this.onChange) == null || C.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), h.style.backgroundColor = v;
-    }), o.appendChild(c), o.appendChild(h), o.appendChild(g), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
+      this.value = v, (f = this.onChange) == null || f.call(this, v), (y = this.detectChange) == null || y.call(this, v), this.textInputEl && (this.textInputEl.value = v), p.style.backgroundColor = v;
+    }), o.appendChild(c), o.appendChild(p), o.appendChild(g), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
   }
   getElement() {
     return this.element;
@@ -2669,14 +2692,14 @@ const Rt = `
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
   <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
 </svg>`;
-class R extends x {
+class z extends x {
   constructor(t = {}) {
     super({
       ...t,
       icon: t.icon || Rt,
       title: t.title || "Color & Opacity",
       default: t.default || "#000000FF"
-    }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = R.normalizeHexWithOpacity(this.value));
+    }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = z.normalizeHexWithOpacity(this.value));
   }
   static normalizeHexWithOpacity(t) {
     return t = t.replace("#", ""), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), t.length === 6 && (t = t + "FF"), t.length === 8 && /^[0-9A-Fa-f]{8}$/.test(t) ? `#${t.toUpperCase()}` : (console.warn(`Invalid hex value "${t}", using default "#000000FF"`), "#000000FF");
@@ -2694,7 +2717,7 @@ class R extends x {
     return `#${i}${n}`;
   }
   setValue(t) {
-    t === void 0 || t === "" ? this.value = "#000000FF" : this.value = R.normalizeHexWithOpacity(t), this.updateInputElements(), this.updateColorPreview(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
+    t === void 0 || t === "" ? this.value = "#000000FF" : this.value = z.normalizeHexWithOpacity(t), this.updateInputElements(), this.updateColorPreview(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
   }
   updateInputElements() {
     this.value && (this.colorInputEl && (this.colorInputEl.value = this.getRgbColor()), this.textInputEl && (this.textInputEl.value = this.value), this.opacityInputEl && (this.opacityInputEl.value = this.getOpacityPercent().toString()));
@@ -2705,7 +2728,7 @@ class R extends x {
     this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
   }
   handleColorChange(t) {
-    const e = this.getOpacityPercent(), i = R.combineColorOpacity(
+    const e = this.getOpacityPercent(), i = z.combineColorOpacity(
       t,
       e
     );
@@ -2716,7 +2739,7 @@ class R extends x {
     return e || i ? (this.setValue(t), !0) : !1;
   }
   handleOpacityChange(t) {
-    const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = R.combineColorOpacity(
+    const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = z.combineColorOpacity(
       e,
       i
     );
@@ -3632,33 +3655,33 @@ const Kt = `
       "mousemove",
       (c) => this.updateCursorTooltip(c)
     ), this.value && this.value.markers && this.value.markers.forEach((c) => {
-      const h = this.createMarkerElement(c);
-      r.appendChild(h);
+      const p = this.createMarkerElement(c);
+      r.appendChild(p);
     }), l.appendChild(r), t.appendChild(l);
   }
   renderSidebar(t) {
-    var c, h;
+    var c, p;
     const e = document.createElement("div");
     e.className = "prize-counter";
     const i = this.props.maxMarkers || 10, s = ((c = this.value) == null ? void 0 : c.markers.length) || 0, n = s === i;
     e.textContent = `Prizes ${s}/${i}`, n && e.classList.add("complete"), t.appendChild(e);
     const o = document.createElement("div");
     o.className = "prize-list";
-    const a = ((h = this.value) == null ? void 0 : h.markers) || [], l = /* @__PURE__ */ new Map();
-    a.forEach((p) => l.set(p.index, p));
-    for (let p = 1; p <= i; p++) {
-      const g = l.get(p), f = !!g, m = (g == null ? void 0 : g.prizeName) || this.props.prizeMap && this.props.prizeMap[p - 1] || `Prize #${p}`, u = document.createElement("div");
-      u.className = `prize-item ${f ? "placed" : "missing"}`;
+    const a = ((p = this.value) == null ? void 0 : p.markers) || [], l = /* @__PURE__ */ new Map();
+    a.forEach((d) => l.set(d.index, d));
+    for (let d = 1; d <= i; d++) {
+      const g = l.get(d), C = !!g, m = (g == null ? void 0 : g.prizeName) || this.props.prizeMap && this.props.prizeMap[d - 1] || `Prize #${d}`, u = document.createElement("div");
+      u.className = `prize-item ${C ? "placed" : "missing"}`;
       const v = document.createElement("div");
-      v.className = "prize-index", v.textContent = String(p);
-      const C = document.createElement("div");
-      C.className = "prize-label";
+      v.className = "prize-index", v.textContent = String(d);
+      const f = document.createElement("div");
+      f.className = "prize-label";
       const y = document.createElement("div");
-      y.className = "prize-title", y.textContent = `Prize #${p}`;
+      y.className = "prize-title", y.textContent = `Prize #${d}`;
       const b = document.createElement("div");
-      b.className = "prize-subtitle", b.textContent = f ? m : "Not Placed", C.appendChild(y), C.appendChild(b);
+      b.className = "prize-subtitle", b.textContent = C ? m : "Not Placed", f.appendChild(y), f.appendChild(b);
       const L = document.createElement("div");
-      L.className = `prize-status ${f ? "placed" : "missing"}`, L.innerHTML = f ? ie : se, u.appendChild(v), u.appendChild(C), u.appendChild(L), o.appendChild(u);
+      L.className = `prize-status ${C ? "placed" : "missing"}`, L.innerHTML = C ? ie : se, u.appendChild(v), u.appendChild(f), u.appendChild(L), o.appendChild(u);
     }
     t.appendChild(o);
     const r = document.createElement("button");
@@ -3711,20 +3734,20 @@ const Kt = `
       if (typeof a == "string") {
         const r = new Image();
         r.onload = () => {
-          var p;
+          var d;
           const c = {
             width: r.naturalWidth || 0,
             height: r.naturalHeight || 0
-          }, h = this.scaleMarkersForNewImage(
-            ((p = this.value) == null ? void 0 : p.markers) || [],
+          }, p = this.scaleMarkersForNewImage(
+            ((d = this.value) == null ? void 0 : d.markers) || [],
             e,
             c
           );
           this.value = {
             imageUrl: a,
-            markers: h
+            markers: p
           }, this.lastImageNaturalSize = c, this.history = [
-            JSON.parse(JSON.stringify(h))
+            JSON.parse(JSON.stringify(p))
           ], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateButtonDisplay(), this.refreshPopoverContent(), this.triggerChange();
         }, r.onerror = () => {
           this.showError("Failed to read image file.");
@@ -3742,7 +3765,7 @@ const Kt = `
       );
       return;
     }
-    const e = this.imageElement.getBoundingClientRect(), i = (t.clientX - e.left) / e.width * 100, s = (t.clientY - e.top) / e.height * 100, n = this.value.markers.map((c) => c.index).sort((c, h) => c - h);
+    const e = this.imageElement.getBoundingClientRect(), i = (t.clientX - e.left) / e.width * 100, s = (t.clientY - e.top) / e.height * 100, n = this.value.markers.map((c) => c.index).sort((c, p) => c - p);
     let o = 1;
     for (const c of n)
       if (c === o)
@@ -3950,11 +3973,11 @@ const Kt = `
       r.type = "button", r.className = "confirm-btn ghost", r.textContent = "Cancel";
       const c = document.createElement("button");
       c.type = "button", c.className = "confirm-btn danger", c.textContent = "Discard";
-      const h = (p) => {
-        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(p);
+      const p = (d) => {
+        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(d);
       };
-      r.addEventListener("click", () => h(!1)), c.addEventListener("click", () => h(!0)), s.addEventListener("click", (p) => {
-        p.target === s && h(!1);
+      r.addEventListener("click", () => p(!1)), c.addEventListener("click", () => p(!0)), s.addEventListener("click", (d) => {
+        d.target === s && p(!1);
       }), l.appendChild(r), l.appendChild(c), n.appendChild(o), n.appendChild(a), n.appendChild(l), s.appendChild(n), document.body.appendChild(s), setTimeout(() => {
         n.classList.add("visible");
       }, 10);
@@ -4189,7 +4212,7 @@ class Ne extends x {
     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, c;
-      const l = ((c = (r = this.props.options) == null ? void 0 : r.find((h) => h.status === s.checked)) == null ? void 0 : c.value) ?? "";
+      const l = ((c = (r = this.props.options) == null ? void 0 : r.find((p) => p.status === s.checked)) == null ? void 0 : c.value) ?? "";
       this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
     });
     const n = document.createElement("span");
@@ -4340,13 +4363,13 @@ class Te extends x {
       return;
     }
     const c = "...";
-    let h = 0, p = e.length, g = 0;
-    for (; h <= p; ) {
-      const m = Math.floor((h + p) / 2), u = e.slice(0, m).trimEnd() + c;
-      this.measureTextWidth(u, i) <= l ? (g = m, h = m + 1) : p = m - 1;
+    let p = 0, d = e.length, g = 0;
+    for (; p <= d; ) {
+      const m = Math.floor((p + d) / 2), u = e.slice(0, m).trimEnd() + c;
+      this.measureTextWidth(u, i) <= l ? (g = m, p = m + 1) : d = m - 1;
     }
-    const f = e.slice(0, g).trimEnd() + c;
-    t.placeholder = f;
+    const C = e.slice(0, g).trimEnd() + c;
+    t.placeholder = C;
   }
   autosizeTextarea(t, e = 3) {
     t.style.height = "auto";
@@ -4855,7 +4878,7 @@ class Be extends $ {
         opacity: new Ut({
           default: (t == null ? void 0 : t.opacity) ?? 100
         }),
-        backgroundColor: new R({
+        backgroundColor: new z({
           default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
         })
       }
@@ -4910,7 +4933,7 @@ export {
   Oe as BorderSettingSet,
   Le as ButtonSetting,
   O as ColorSetting,
-  R as ColorWithOpacitySetting,
+  z as ColorWithOpacitySetting,
   ke as DimensionSetting,
   Ie as GapSetting,
   j as GradientSetting,