builder-settings-types 0.0.318 → 0.0.320

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

@@ -1,22 +1,22 @@
-const Et = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-let mt = (p = 21) => {
-  let t = "", e = crypto.getRandomValues(new Uint8Array(p |= 0));
-  for (; p--; )
-    t += Et[e[p] & 63];
+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];
   return t;
 };
-function wt(p) {
-  let t = 0, e = p.parentElement;
+function wt(d) {
+  let t = 0, e = d.parentElement;
   for (; e; )
-    e.classList.contains("setting-group") && e !== p && t++, e = e.parentElement;
+    e.classList.contains("setting-group") && e !== d && t++, e = e.parentElement;
   return t;
 }
-function Z(p, t) {
+function Z(d, t) {
   const e = Math.min(Math.max(t, 0), 5);
-  p.setAttribute("data-nesting-level", e.toString()), e > 0 ? p.style.setProperty("--visual-indent", `${e * 2}px`) : (p.style.removeProperty("--visual-indent"), p.style.marginLeft = "");
+  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 = "");
 }
-function et(p, t = 0) {
-  p.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
+function et(d, t = 0) {
+  d.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(p) {
-  if (p === null || typeof p != "object") return p;
-  if (p instanceof Date) return new Date(p.getTime());
-  if (p instanceof Array) return p.map((t) => Y(t));
-  if (typeof p == "object") {
+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") {
     const t = {};
-    for (const e in p)
-      Object.prototype.hasOwnProperty.call(p, e) && (t[e] = Y(p[e]));
+    for (const e in d)
+      Object.prototype.hasOwnProperty.call(d, e) && (t[e] = Y(d[e]));
     return t;
   }
-  return p;
+  return d;
 }
-function kt(p) {
-  switch (p) {
+function kt(d) {
+  switch (d) {
     case "number":
       return 0;
     case "text":
@@ -142,26 +142,29 @@ function kt(p) {
       return "";
   }
 }
-const N = class N {
+const M = class M {
   constructor(t = {}) {
     this.props = t, this.dataPropsPath = "", this.id = t.id || mt(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "", this.includeGetJson = t.includeGetJson !== void 0 ? t.includeGetJson : !0;
   }
   static SetUploadUrl(t) {
-    globalThis.DefaultUploadUrl = t, N.DefaultUploadUrl = t;
+    globalThis.DefaultUploadUrl = t, M.DefaultUploadUrl = t;
   }
   static SetDefaultLanguage(t) {
-    globalThis.DefaultLanguage = t, N.DefaultLanguage = t;
+    globalThis.DefaultLanguage = t, M.DefaultLanguage = t;
   }
   static CurrentLanguage(t) {
-    return t !== void 0 && (N.currentLanguage = t, N.languageChangeCallbacks.forEach((e) => e(t))), N.currentLanguage || N.DefaultLanguage;
+    return t !== void 0 && (M.currentLanguage = t, M.currentLanguageExplicitlySet = !0, M.DefaultLanguage || M.SetDefaultLanguage(t), M.languageChangeCallbacks.forEach((e) => e(t))), M.currentLanguage || M.DefaultLanguage;
+  }
+  static HasExplicitCurrentLanguage() {
+    return M.currentLanguageExplicitlySet;
   }
   static onLanguageChange(t) {
-    return N.languageChangeCallbacks.add(t), () => {
-      N.languageChangeCallbacks.delete(t);
+    return M.languageChangeCallbacks.add(t), () => {
+      M.languageChangeCallbacks.delete(t);
     };
   }
   static SetGlobalVariables(t) {
-    N.GlobalVariables = { ...N.GlobalVariables, ...t };
+    M.GlobalVariables = { ...M.GlobalVariables, ...t };
   }
   destroy() {
     throw new Error("Method not implemented.");
@@ -244,94 +247,94 @@ const N = class N {
     return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
   }
 };
-N.languageChangeCallbacks = /* @__PURE__ */ new Set(), N.GlobalVariables = {
+M.currentLanguageExplicitlySet = !1, M.languageChangeCallbacks = /* @__PURE__ */ new Set(), M.GlobalVariables = {
   primary: "#1B1958",
   secondary: "#0D0938",
   tertiary: "#2A1560",
   accent: "#189541",
   "text-dark": "#00141E",
   "text-light": "#FFFFFF"
-}, N.GlobalVariableGroups = [
+}, M.GlobalVariableGroups = [
   {
     title: "Global Colors",
     keys: ["primary", "secondary", "tertiary", "accent"]
   },
   { title: "Text Color", keys: ["text-dark", "text-light"] }
 ];
-let x = N;
-function G(p) {
-  return p instanceof x;
+let x = M;
+function G(d) {
+  return d instanceof x;
 }
-function k(p) {
-  return p instanceof $;
+function k(d) {
+  return d instanceof $;
 }
-function ct(p) {
-  return G(p) || k(p);
+function ct(d) {
+  return G(d) || k(d);
 }
-const ot = (p, t, e) => {
+const ot = (d, 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 d = t.getBoundingClientRect();
-    o = d.left, a = d.top, document.addEventListener("mousemove", r), document.addEventListener("mouseup", c), document.body.style.userSelect = "none";
+    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) => {
     if (!i) return;
-    const d = h.clientX - s, u = h.clientY - n, f = window.innerWidth, m = window.innerHeight, g = t.offsetWidth, v = t.offsetHeight;
-    let C = o + d, y = a + u;
-    C = Math.max(8, Math.min(f - g - 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 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);
   }, c = () => {
     i = !1, document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", c), document.body.style.userSelect = "";
   };
-  p.addEventListener("mousedown", l);
-}, W = (p) => {
-  if (!p) return null;
-  let t = p.trim();
+  d.addEventListener("mousedown", l);
+}, W = (d) => {
+  if (!d) return null;
+  let t = d.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 = (p, t, e) => `#${[p, t, e].map((i) => Math.max(0, Math.min(255, i)).toString(16).padStart(2, "0")).join("")}`, P = (p) => {
-  const t = p.replace("#", ""), e = t.length === 3 ? t.split("").map((i) => i + i).join("") : t;
+}, 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;
   return {
     r: parseInt(e.slice(0, 2), 16),
     g: parseInt(e.slice(2, 4), 16),
     b: parseInt(e.slice(4, 6), 16)
   };
-}, z = (p) => {
-  const { r: t, g: e, b: i } = P(p), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
+}, 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;
   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, d = a;
-  return { h: c * 60, s: h, v: d };
-}, U = (p, t, e) => {
-  const i = (p % 360 + 360) % 360, s = e * t, n = s * (1 - Math.abs(i / 60 % 2 - 1)), o = e - s;
+  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;
   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 = (p, t, e) => {
+}, vt = (d, t, e) => {
   const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
-  return { hue: p, sat: s, lightness: i };
-}, it = (p, t, e) => {
-  const i = (1 - Math.abs(2 * e - 1)) * t, s = i * (1 - Math.abs(p / 60 % 2 - 1)), n = e - i / 2;
+  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;
   let o = 0, a = 0, l = 0;
-  return p < 60 ? (o = i, a = s, l = 0) : p < 120 ? (o = s, a = i, l = 0) : p < 180 ? (o = 0, a = i, l = s) : p < 240 ? (o = 0, a = s, l = i) : p < 300 ? (o = s, a = 0, l = i) : (o = i, a = 0, l = s), {
+  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), {
     r: Math.round((o + n) * 255),
     g: Math.round((a + n) * 255),
     b: Math.round((l + n) * 255)
   };
-}, st = (p, t) => {
+}, st = (d, t) => {
   const e = Math.max(0, Math.min(100, t)) / 100;
-  if (p.startsWith("#")) {
-    const { r: s, g: n, b: o } = P(p);
+  if (d.startsWith("#")) {
+    const { r: s, g: n, b: o } = P(d);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  if (p.startsWith("rgba("))
-    return p.replace(/,\s*[\d.]+\)$/, `, ${e})`);
-  if (p.startsWith("rgb("))
-    return p.replace("rgb(", "rgba(").replace(")", `, ${e})`);
-  if (p.startsWith("hsl(")) {
-    const s = p.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+  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 (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -341,8 +344,8 @@ const ot = (p, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  if (p.startsWith("hsla(")) {
-    const s = p.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
+  if (d.startsWith("hsla(")) {
+    const s = d.match(/hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*[\d.]+\)/);
     if (s) {
       const { r: n, g: o, b: a } = it(
         parseInt(s[1]),
@@ -352,13 +355,13 @@ const ot = (p, t, e) => {
       return `rgba(${n}, ${o}, ${a}, ${e})`;
     }
   }
-  const i = W(p);
+  const i = W(d);
   if (i) {
     const { r: s, g: n, b: o } = P(i);
     return `rgba(${s}, ${n}, ${o}, ${e})`;
   }
-  return p;
-}, Mt = (p) => [
+  return d;
+}, Mt = (d) => [
   "red",
   "green",
   "blue",
@@ -382,18 +385,18 @@ const ot = (p, t, e) => {
   "teal",
   "fuchsia",
   "transparent"
-].includes(p.toLowerCase()), ft = (p) => [
+].includes(d.toLowerCase()), ft = (d) => [
   /^#[0-9a-fA-F]{3,8}$/,
   /^rgba?\s*\([^)]+\)$/,
   /^hsla?\s*\([^)]+\)$/,
   /^[a-zA-Z]+$/
-].some((e) => e.test(p.trim())), Nt = (p) => {
+].some((e) => e.test(d.trim())), Nt = (d) => {
   if (typeof document > "u")
-    return ft(p) || !!W(p);
+    return ft(d) || !!W(d);
   const t = document.createElement("div");
-  return t.style.color = p, t.style.color !== "";
-}, Ct = (p) => {
-  const t = p.trim();
+  return t.style.color = d, t.style.color !== "";
+}, Ct = (d) => {
+  const t = d.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 {
@@ -429,11 +432,11 @@ const ot = (p, t, e) => {
     };
   }
   return { color: W(t) || t, position: 0, opacity: 100 };
-}, ht = (p) => {
+}, ht = (d) => {
   const t = [];
   let e = "", i = 0;
-  for (let s = 0; s < p.length; s++) {
-    const n = p[s];
+  for (let s = 0; s < d.length; s++) {
+    const n = d[s];
     if (n === "(") i++;
     else if (n === ")") i--;
     else if (n === "," && i === 0) {
@@ -443,16 +446,16 @@ const ot = (p, t, e) => {
     e += n;
   }
   return e.trim() && t.push(e.trim()), t;
-}, dt = (p, t) => {
-  const e = new RegExp(`${t}\\s*\\(`, "i"), i = p.match(e);
+}, dt = (d, t) => {
+  const e = new RegExp(`${t}\\s*\\(`, "i"), i = d.match(e);
   if (!i) return null;
   const s = i.index + i[0].length;
   let n = 1, o = s;
-  for (let a = s; a < p.length && n > 0; a++)
-    p[a] === "(" ? n++ : p[a] === ")" && n--, o = a;
-  return n === 0 ? p.substring(s, o) : null;
-}, It = (p) => {
-  const t = p.split(" ")[0].toLowerCase();
+  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();
   return [
     "circle",
     "ellipse",
@@ -463,31 +466,31 @@ const ot = (p, t, e) => {
     "at",
     "contain",
     "cover"
-  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(p) || /^hsl/i.test(p) || Mt(t);
-}, pt = (p) => {
+  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(d) || /^hsl/i.test(d) || Mt(t);
+}, pt = (d) => {
   const t = [];
-  return p.forEach((e, i) => {
+  return d.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 = p.length === 1 ? 0 : i / (p.length - 1) * 100);
+    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);
     const l = Ct(n);
     l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
   }), t;
-}, A = (p) => {
-  const t = p.stops && p.stops.length ? p.stops : [{ color: "#000000", position: 0, opacity: 100 }];
+}, A = (d) => {
+  const t = d.stops && d.stops.length ? d.stops : [{ color: "#000000", position: 0, opacity: 100 }];
   return {
-    type: p.type && ["linear", "radial", "solid"].includes(p.type) ? p.type : "linear",
-    angle: typeof p.angle == "number" ? p.angle : 90,
+    type: d.type && ["linear", "radial", "solid"].includes(d.type) ? d.type : "linear",
+    angle: typeof d.angle == "number" ? d.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 = (p) => {
-  const t = p.replace(/;$/, "").trim();
+}, T = (d) => {
+  const t = d.replace(/;$/, "").trim();
   if (Nt(t)) {
     const s = Ct(t);
     return A({ type: "solid", angle: 0, stops: [s] });
@@ -519,21 +522,21 @@ const ot = (p, t, e) => {
     return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
   }
   return null;
-}, S = (p) => {
-  if (p.type === "solid") {
-    const e = p.stops[0], i = e.color;
+}, S = (d) => {
+  if (d.type === "solid") {
+    const e = d.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 = p.stops.map(
+  const t = d.stops.map(
     (e) => `${st(e.color, e.opacity ?? 100)} ${e.position}%`
   ).join(", ");
-  return p.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${p.angle}deg, ${t})`;
-}, St = (p) => Math.round(p / 100 * 255).toString(16).toUpperCase().padStart(2, "0"), K = (p) => {
-  if (p.type === "solid") {
-    const t = p.stops[0];
+  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];
     if (t) {
       const e = t.color;
       if (e.startsWith("var(--"))
@@ -549,7 +552,7 @@ const ot = (p, t, e) => {
     }
     return "#000000";
   }
-  return p.type === "linear" ? `Linear ${p.angle}°` : "Radial Gradient";
+  return d.type === "linear" ? `Linear ${d.angle}°` : "Radial Gradient";
 }, q = class q {
   static defaults() {
     return {
@@ -619,8 +622,8 @@ const ot = (p, t, e) => {
   }
 };
 q.STORAGE_KEY = "settingsLib_recentColors", q.MAX_COLORS = 12, q.colors = null;
-let R = q;
-const at = (p, t) => {
+let F = q;
+const at = (d, t) => {
   const e = document.createElement("div");
   e.className = "color-picker-recent-section";
   const i = document.createElement("div");
@@ -630,58 +633,58 @@ const at = (p, t) => {
   const n = () => {
     s.style.display = "none";
   }, o = (c, h) => {
-    const d = c.getBoundingClientRect();
-    s.textContent = h, s.style.left = `${d.left + d.width / 2}px`, s.style.top = `${d.bottom + 8}px`, s.style.display = "block";
+    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";
   }, 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 = R.getColors(t);
+    const c = F.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 d = document.createElement("button");
-      d.type = "button", d.className = "color-picker-recent-swatch";
-      const u = Vt(h);
-      if (d.title = u, d.setAttribute("aria-label", `Use color: ${u}`), h.includes("gradient(")) {
-        d.style.backgroundImage = h, d.style.backgroundColor = "transparent";
+      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 && (d.style.borderColor = m.stops[0].color);
+        m && m.stops && m.stops.length > 0 && (p.style.borderColor = m.stops[0].color);
       } else
-        d.style.backgroundColor = h, d.style.borderColor = h;
-      d.addEventListener("mouseenter", () => o(d, u)), d.addEventListener("mouseleave", () => {
-        n(), d.style.boxShadow = "";
-      }), d.addEventListener("mousedown", () => {
-        d.style.boxShadow = "0px 0px 0px 2px var(--grey40)";
-      }), d.addEventListener("mouseup", () => {
+        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", () => {
         setTimeout(() => {
-          d.style.boxShadow = "";
+          p.style.boxShadow = "";
         }, 150);
-      }), d.addEventListener("click", () => {
-        n(), p(h);
-      }), a.appendChild(d);
+      }), p.addEventListener("click", () => {
+        n(), d(h);
+      }), a.appendChild(p);
     });
   };
   return r(), { container: e, refresh: r };
-}, Vt = (p) => {
-  const t = T(p);
+}, Vt = (d) => {
+  const t = T(d);
   if (t)
     return K(t);
-  const e = W(p);
+  const e = W(d);
   if (e) {
     const i = P(e);
     return `${e} (RGB: ${i.r}, ${i.g}, ${i.b})`;
   }
-  return p;
+  return d;
 }, 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"
     fill="#919EAB"/>
-</svg>`, bt = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`, Et = `<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1972 3.29156C18.936 3.03034 18.6259 2.82313 18.2847 2.68176C17.9434 2.54039 17.5777 2.46763 17.2083 2.46763C16.8389 2.46763 16.4731 2.54039 16.1319 2.68176C15.7906 2.82313 15.4805 3.03034 15.2194 3.29156L13.7822 4.72875C13.2585 4.4772 12.6697 4.39449 12.097 4.49207C11.5243 4.58964 10.9961 4.86267 10.5853 5.27343L9.91687 5.94281C9.74268 6.11693 9.6045 6.32366 9.51023 6.5512C9.41595 6.77873 9.36743 7.02261 9.36743 7.2689C9.36743 7.5152 9.41595 7.75907 9.51023 7.98661C9.6045 8.21414 9.74268 8.42088 9.91687 8.595L3.83625 14.6747C3.57512 14.936 3.36803 15.2462 3.2268 15.5875C3.08556 15.9288 3.01296 16.2947 3.01312 16.6641V18.3516C3.01312 18.6499 3.13165 18.9361 3.34263 19.1471C3.55361 19.358 3.83975 19.4766 4.13812 19.4766H5.82562C6.57129 19.4759 7.28618 19.1792 7.81312 18.6516L13.8937 12.5728C14.0679 12.747 14.2746 12.8852 14.5021 12.9795C14.7297 13.0737 14.9735 13.1223 15.2198 13.1223C15.4661 13.1223 15.71 13.0737 15.9375 12.9795C16.1651 12.8852 16.3718 12.747 16.5459 12.5728L17.2153 11.9025C17.6261 11.4917 17.8991 10.9635 17.9967 10.3908C18.0942 9.81811 18.0115 9.22926 17.76 8.70562L19.1972 7.26937C19.4584 7.0082 19.6656 6.69813 19.807 6.35687C19.9484 6.01561 20.0211 5.64985 20.0211 5.28047C20.0211 4.91108 19.9484 4.54532 19.807 4.20406C19.6656 3.8628 19.4584 3.55273 19.1972 3.29156ZM5.16281 16.0012L11.2425 9.92062L12.5681 11.2462L6.48844 17.3269C6.31266 17.5027 6.07424 17.6015 5.82562 17.6016H4.88812V16.6641C4.88818 16.4154 4.98698 16.177 5.16281 16.0012Z" fill="#353C47"/>
  </svg>`, Tt = `<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1333 12.4667H0.8M0.8 12.4667L4.13333 9.13332M0.8 12.4667L4.13333 15.8M0.8 4.13332H14.1333M14.1333 4.13332L10.8 0.799988M14.1333 4.13332L10.8 7.46665" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
@@ -752,38 +755,38 @@ class ut {
     const a = document.createElement("div");
     a.className = "color-picker-sliders-container";
     const l = document.createElement("button");
-    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = bt;
+    l.className = "color-picker-eyedropper", l.type = "button", l.innerHTML = Et;
     const r = document.createElement("div");
     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 d = document.createElement("div");
-    d.className = "color-picker-opacity", this.opacitySlider = d;
-    const u = document.createElement("div");
-    u.className = "color-picker-opacity-marker", this.opacityMarker = u, d.appendChild(u), r.appendChild(c), r.appendChild(d), a.appendChild(l), a.appendChild(r);
-    const f = at((b) => {
+    const p = document.createElement("div");
+    p.className = "color-picker-opacity", this.opacitySlider = p;
+    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) => {
       var w;
-      this.setColor(b), (w = this.onChange) == null || w.call(this, b, this.currentOpacity);
+      this.setColor(E), (w = this.onChange) == null || w.call(this, E, this.currentOpacity);
     }, this.recentScope);
     this.recentSectionRefresh = f.refresh;
     const m = document.createElement("div");
     m.className = "color-picker-format-section";
-    const g = document.createElement("select");
-    g.className = "color-picker-format-select", this.select = g;
+    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 y = document.createElement("option");
-    y.value = "hsl", y.textContent = "HSL", g.appendChild(v), g.appendChild(C), g.appendChild(y);
-    const E = document.createElement("input");
-    E.type = "text", E.className = "color-picker-color-input", E.value = this.currentColor, this.input = E;
+    y.value = "hsl", y.textContent = "HSL", u.appendChild(v), u.appendChild(C), 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(E), L.appendChild(I), m.appendChild(g), m.appendChild(L), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(f.container), t.appendChild(m), t.addEventListener("click", (b) => b.stopPropagation()), this.bind(n, c, d, E, g, 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(f.container), t.appendChild(m), t.addEventListener("click", (E) => E.stopPropagation()), this.bind(n, c, p, b, u, I, l), t;
   }
   createBackdrop() {
     const t = document.createElement("div");
@@ -792,40 +795,40 @@ class ut {
   bind(t, e, i, s, n, o, a) {
     const l = (h) => {
       var C;
-      const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width)), f = Math.max(0, Math.min(1, (h.clientY - d.top) / d.height));
-      this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(g, u, 1 - f);
+      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 d = e.getBoundingClientRect();
-      let u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
-      this.hueMarker.style.left = `${u * 100}%`;
-      const f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - g);
+      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) => {
       var f;
-      const d = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
-      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), (f = this.onChange) == null || f.call(this, this.currentColor, this.currentOpacity);
+      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);
     };
     t.addEventListener("mousedown", (h) => {
       h.preventDefault(), l(h);
-      const d = (f) => l(f), u = () => {
-        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
+      const p = (f) => l(f), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
     }), e.addEventListener("mousedown", (h) => {
       h.preventDefault(), r(h);
-      const d = (f) => r(f), u = () => {
-        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
+      const p = (f) => r(f), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
     }), i.addEventListener("mousedown", (h) => {
       h.preventDefault(), c(h);
-      const d = (f) => c(f), u = () => {
-        document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
+      const p = (f) => c(f), g = () => {
+        document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g);
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      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());
     }), o.addEventListener("click", async () => {
@@ -841,8 +844,8 @@ class ut {
         return;
       }
       try {
-        const d = new window.EyeDropper(), { sRGBHex: u } = await d.open();
-        this.setColor(u), (h = this.onChange) == null || h.call(this, u, this.currentOpacity);
+        const p = new window.EyeDropper(), { sRGBHex: g } = await p.open();
+        this.setColor(g), (h = this.onChange) == null || h.call(this, g, this.currentOpacity);
       } catch {
       }
     }), document.addEventListener("keydown", this.keyDown, !0), setTimeout(
@@ -900,16 +903,16 @@ class ut {
     this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
     const { h: s, s: n, v: o } = z(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, d = 16;
-    let u = r.right + 8, f = r.top;
-    const m = c - r.right, g = r.left;
-    m >= a + d ? u = r.right + 8 : g >= a + d ? u = r.left - a - 8 : u = Math.max(d, (c - a) / 2);
+    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 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 + d ? f = r.bottom + 8 : C >= l + d ? f = r.top - l - 8 : v > C ? (f = r.bottom + 8, f + l > h - d && (f = h - l - d)) : (f = r.top - l - 8, f < d && (f = d)), this.element.style.left = `${u}px`, this.element.style.top = `${f}px`;
+    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`;
   }
   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" && (R.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" && (F.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
   }
   getElement() {
     return this.element;
@@ -933,7 +936,7 @@ class Bt {
     const s = document.createElement("div");
     s.className = "color-picker-sliders-container embedded";
     const n = document.createElement("button");
-    n.className = "color-picker-eyedropper", n.type = "button", n.innerHTML = bt;
+    n.className = "color-picker-eyedropper", n.type = "button", n.innerHTML = Et;
     const o = document.createElement("div");
     o.className = "color-picker-sliders-group";
     const a = document.createElement("div");
@@ -944,62 +947,62 @@ 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((E) => {
-      const L = T(E);
-      L && L.type !== "solid" ? this.onColorChange(E, this.currentOpacity) : (this.setColor(E), this.onColorChange(this.currentColor, this.currentOpacity));
+    const h = 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 d = document.createElement("div");
-    d.className = "color-picker-format-section embedded";
-    const u = document.createElement("select");
-    u.className = "color-picker-format-select", this.select = u;
+    const p = document.createElement("div");
+    p.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 m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
-    const g = document.createElement("option");
-    g.value = "hsl", g.textContent = "HSL", u.appendChild(f), u.appendChild(m), u.appendChild(g);
+    const u = document.createElement("option");
+    u.value = "hsl", u.textContent = "HSL", g.appendChild(f), 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 y = document.createElement("button");
-    return y.className = "color-picker-copy-inside", y.textContent = "Copy", C.appendChild(v), C.appendChild(y), d.appendChild(u), d.appendChild(C), t.appendChild(e), t.appendChild(s), t.appendChild(d), t.appendChild(h.container), this.bind(e, a, r, v, u, y, n), t;
+    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;
   }
   bind(t, e, i, s, n, o, a) {
     const l = (h) => {
-      const d = t.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width)), f = Math.max(0, Math.min(1, (h.clientY - d.top) / d.height));
-      this.colorMarker.style.left = `${u * 100}%`, this.colorMarker.style.top = `${f * 100}%`;
-      const g = this.parsePercentage(this.hueMarker.style.left || "0%") * 360, v = U(g, u, 1 - f);
+      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 d = e.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
-      this.hueMarker.style.left = `${u * 100}%`;
-      const f = u * 360, m = this.parsePercentage(this.colorMarker.style.left || "0%"), g = this.parsePercentage(this.colorMarker.style.top || "0%"), v = U(f, m, 1 - g);
+      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 d = i.getBoundingClientRect(), u = Math.max(0, Math.min(1, (h.clientX - d.left) / d.width));
-      this.opacityMarker.style.left = `${u * 100}%`, this.currentOpacity = Math.round(u * 100), this.queueChange();
+      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 d = (f) => l(f), u = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u), this.applyPendingExternal();
+      const p = (f) => l(f), g = () => {
+        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
     }), e.addEventListener("mousedown", (h) => {
       h.preventDefault(), this.isDragging = !0, r(h);
-      const d = (f) => r(f), u = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u), this.applyPendingExternal();
+      const p = (f) => r(f), g = () => {
+        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
     }), i.addEventListener("mousedown", (h) => {
       h.preventDefault(), this.isDragging = !0, c(h);
-      const d = (f) => c(f), u = () => {
-        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u), this.applyPendingExternal();
+      const p = (f) => c(f), g = () => {
+        this.isDragging = !1, this.flushChange(), document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", g), this.applyPendingExternal();
       };
-      document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
+      document.addEventListener("mousemove", p), document.addEventListener("mouseup", g);
     }), n.addEventListener("change", () => {
       this.syncInput();
     }), s.addEventListener("input", () => {
@@ -1020,8 +1023,8 @@ class Bt {
         return;
       }
       try {
-        const h = new window.EyeDropper(), { sRGBHex: d } = await h.open();
-        this.setColor(d), this.onColorChange(this.currentColor, this.currentOpacity);
+        const h = new window.EyeDropper(), { sRGBHex: p } = await h.open();
+        this.setColor(p), this.onColorChange(this.currentColor, this.currentOpacity);
       } catch {
       }
     });
@@ -1095,7 +1098,7 @@ class Bt {
   }
   commitRecentColor() {
     var t;
-    this.recentScope === "solid" && (R.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this));
+    this.recentScope === "solid" && (F.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this));
   }
   getElement() {
     return this.element;
@@ -1120,9 +1123,9 @@ 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 d;
+      var p;
       if (!this.popoverEl || !this.isPopoverOpen) return;
-      const s = i.target, n = this.popoverEl.contains(s), o = (d = this.element) == null ? void 0 : d.contains(s), a = document.querySelectorAll(".custom-color-picker"), l = Array.from(a).some((u) => u.contains(s)), r = s.closest(".gstop-color-input, .gradient-mini-preview, .gstop-color-preview"), c = s.classList.contains("color-picker-backdrop"), h = s.classList.contains("gradient-popover-backdrop");
+      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();
     }, this.handlePopoverKeydown = (i) => {
       if (this.isPopoverOpen) {
@@ -1375,47 +1378,47 @@ const V = class V extends x {
     (!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 d = {};
+      let p = {};
       try {
-        d = x.GlobalVariables || {};
-      } catch (g) {
-        console.warn("Could not access Setting.GlobalVariables", g);
+        p = x.GlobalVariables || {};
+      } catch (u) {
+        console.warn("Could not access Setting.GlobalVariables", u);
       }
-      if (!d || Object.keys(d).length === 0) {
-        const g = document.createElement("div");
-        g.textContent = "No global colors defined", g.style.fontSize = "12px", g.style.color = "#666", g.style.padding = "8px", h.appendChild(g);
+      if (!p || Object.keys(p).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);
         return;
       }
-      const u = x.GlobalVariableGroups || [
+      const g = x.GlobalVariableGroups || [
         { title: "Global Colors", keys: ["primary", "secondary", "tertiary", "accent"] },
         { title: "Text Color", keys: ["text-dark", "text-light"] }
       ], f = 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), u.forEach((g) => {
-        const v = Object.entries(d).filter(([C]) => !g.keys.includes(C) && g.title !== "Global Colors" ? !1 : g.keys.includes(C) && C.toLowerCase().includes(f));
+      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]) => {
           if (this.globalLayoutMode === "list") {
-            const E = document.createElement("div");
-            E.className = "global-color-row";
+            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");
             const w = document.createElement("span");
-            w.className = "global-color-label", w.textContent = C.split("-").map((M) => M.charAt(0).toUpperCase() + M.slice(1)).join(" "), E.appendChild(L), E.appendChild(w), E.addEventListener("click", (M) => {
-              M.preventDefault();
+            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) => {
+              N.preventDefault();
               const D = `var(--${C})`;
               this.setValue(D), this.pendingSolidColor = D, i(h);
-            }), m.appendChild(E);
+            }), m.appendChild(b);
           } else {
-            const E = document.createElement("div");
-            E.className = "global-color-circle";
+            const b = document.createElement("div");
+            b.className = "global-color-circle";
             const L = this.resolveGlobalVarColor(y);
-            E.style.background = L, E.title = C.split("-").map((b) => b.charAt(0).toUpperCase() + b.slice(1)).join(" "), (this.linkedGlobalVariable === `var(--${C})` || e.color === `var(--${C})`) && E.classList.add("selected"), E.addEventListener("click", (b) => {
-              b.preventDefault();
+            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) => {
+              E.preventDefault();
               const w = `var(--${C})`;
               this.setValue(w), this.pendingSolidColor = w, i(h);
-            }), m.appendChild(E);
+            }), m.appendChild(b);
           }
         });
       });
@@ -1466,30 +1469,30 @@ const V = class V extends x {
       c.className = "gradient-subtype-inline";
       const h = document.createElement("select");
       h.className = "gradient-subtype-select";
-      const d = document.createElement("option");
-      d.value = "linear", d.textContent = "Linear";
-      const u = document.createElement("option");
-      u.value = "radial", u.textContent = "Radial", h.appendChild(d), h.appendChild(u), 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 p = document.createElement("option");
+      p.value = "linear", p.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);
       }), e.addEventListener("focus", (m) => {
-        const g = m.target;
-        g.value = g.value.replace(/[^0-9-]/g, ""), setTimeout(() => g.select(), 0);
+        const u = m.target;
+        u.value = u.value.replace(/[^0-9-]/g, ""), setTimeout(() => u.select(), 0);
       }), e.addEventListener("input", (m) => {
         this.clearGlobalBindingForCustomChange();
-        const g = parseInt(m.target.value);
-        !Number.isNaN(g) && this.value && (this.value.angle = Math.max(0, Math.min(360, g)), this.debouncedPreviewUpdate());
+        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;
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const g = m.target;
-        let v = parseInt(g.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), g.value = `${v}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+        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", () => {
         this.clearGlobalBindingForCustomChange(), !(!this.value || !this.value.stops) && (this.value.stops.forEach((m) => {
           m.position = 100 - m.position;
-        }), this.value.stops.sort((m, g) => m.position - g.position), this.updateGradientPreview(i), this.createHandles(s, i), this.updateStopsList(l), this.updateUI(), this.triggerChange());
+        }), 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);
     }
     const i = document.createElement("div");
@@ -1541,28 +1544,28 @@ const V = class V extends x {
       o.className = "gstop-chip";
       const a = this.resolveGlobalVarColor(i.color);
       o.style.backgroundColor = a, n.appendChild(o);
-      const l = new ut((g, v) => {
-        this.clearGlobalBindingForCustomChange(), this.value && this.value.stops[s] && (this.value.stops[s].color = g, v !== void 0 && (this.value.stops[s].opacity = v), o.style.backgroundColor = g, this.updateGradientPreview(), this.updateStopsList(), this.updateUI(), this.triggerChange());
+      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, d = 0;
-      const u = (g) => {
-        r = !0, c = !1, h = g.clientX, d = this.value.stops[s].position, n.classList.add("selected"), document.addEventListener("mousemove", f), document.addEventListener("mouseup", m), g.preventDefault(), g.stopPropagation();
-      }, f = (g) => {
+      let r = !1, c = !1, h = 0, p = 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) => {
         if (!r || !this.value) return;
-        const v = g.clientX - h;
+        const v = u.clientX - h;
         if (Math.abs(v) > 3 && (c = !0), c) {
           this.clearGlobalBindingForCustomChange();
           const C = e.getBoundingClientRect();
-          let y = d + v / C.width * 100;
+          let y = p + v / C.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 = (g) => {
+      }, 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();
           else {
-            g.stopPropagation();
+            u.stopPropagation();
             const C = (v = this.value) == null ? void 0 : v.stops[s];
             C && setTimeout(() => {
               const y = this.resolveGlobalVarColor(C.color);
@@ -1570,7 +1573,7 @@ const V = class V extends x {
             }, 0);
           }
       };
-      n.addEventListener("mousedown", u), t.appendChild(n);
+      n.addEventListener("mousedown", g), t.appendChild(n);
     });
   }
   updateStopsList(t) {
@@ -1588,67 +1591,67 @@ const V = class V extends x {
       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 d = document.createElement("input");
-      d.type = "text", d.className = "gstop-color-input", d.value = c.replace("#", "").toUpperCase();
-      const u = document.createElement("button");
-      u.type = "button", u.className = "gstop-color-copy", u.textContent = "Copy", r.appendChild(h), r.appendChild(d), r.appendChild(u);
+      const p = document.createElement("input");
+      p.type = "text", p.className = "gstop-color-input", p.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);
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
-      const g = document.createElement("div");
-      g.className = "gstop-opacity-group";
+      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 y = document.createElement("span");
-      y.className = "gstop-opacity-value", y.textContent = `${s.opacity ?? 100}%`, g.appendChild(v), g.appendChild(y);
-      const E = new ut((b, w) => {
-        this.clearGlobalBindingForCustomChange(), d.value = b.replace("#", "").toUpperCase(), h.style.backgroundColor = b, this.value.stops[n].color = b, w !== void 0 && (this.value.stops[n].opacity = w, v.value = String(w), y.textContent = `${w}%`);
-        const M = P(b);
-        v.style.setProperty("--slider-color", `rgb(${M.r}, ${M.g}, ${M.b})`), this.updateGradientPreview(), this.createHandles(
+      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}%`);
+        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");
-      d.addEventListener("click", (b) => {
-        b.preventDefault(), b.stopPropagation();
+      p.addEventListener("click", (E) => {
+        E.preventDefault(), E.stopPropagation();
         const w = this.resolveGlobalVarColor(s.color);
-        E.open(w, d, s.opacity ?? 100);
-      }), d.addEventListener("input", () => {
+        b.open(w, p, s.opacity ?? 100);
+      }), p.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const b = d.value.trim(), w = b.startsWith("#") ? b : `#${b}`;
+        const E = p.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;
-          const M = P(w);
-          v.style.setProperty("--slider-color", `rgb(${M.r}, ${M.g}, ${M.b})`), this.debouncedPreviewUpdate();
+          const N = P(w);
+          v.style.setProperty("--slider-color", `rgb(${N.r}, ${N.g}, ${N.b})`), this.debouncedPreviewUpdate();
         }
-      }), d.addEventListener("blur", () => {
+      }), p.addEventListener("blur", () => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
-      }), u.addEventListener("click", async (b) => {
-        b.stopPropagation();
+      }), g.addEventListener("click", async (E) => {
+        E.stopPropagation();
         try {
-          await navigator.clipboard.writeText(`#${d.value}`);
+          await navigator.clipboard.writeText(`#${p.value}`);
         } catch {
         }
-      }), l.addEventListener("focus", (b) => {
-        const w = b.target;
+      }), l.addEventListener("focus", (E) => {
+        const w = E.target;
         w.value = w.value.replace("%", ""), w.select();
-      }), l.addEventListener("input", (b) => {
+      }), l.addEventListener("input", (E) => {
         this.clearGlobalBindingForCustomChange();
-        const w = b.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
-        if (!Number.isNaN(M)) {
-          const D = Math.max(0, Math.min(100, M));
+        const w = E.target, N = parseInt(w.value.replace(/[^\d]/g, ""), 10);
+        if (!Number.isNaN(N)) {
+          const D = Math.max(0, Math.min(100, N));
           this.value.stops[n].position = D, w.value = `${D}%`, this.debouncedPreviewUpdate();
         }
-      }), l.addEventListener("blur", (b) => {
+      }), l.addEventListener("blur", (E) => {
         this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null);
-        const w = b.target, M = parseInt(w.value.replace(/[^\d]/g, ""), 10);
-        if (Number.isNaN(M))
+        const w = E.target, N = parseInt(w.value.replace(/[^\d]/g, ""), 10);
+        if (Number.isNaN(N))
           w.value = `${this.value.stops[n].position}%`;
         else {
-          const D = Math.max(0, Math.min(100, M));
+          const D = Math.max(0, Math.min(100, N));
           this.value.stops[n].position = D, w.value = `${D}%`;
         }
         this.updateGradientPreview(), this.createHandles(
@@ -1656,15 +1659,15 @@ const V = class V extends x {
           this.popoverEl.querySelector(".gradient-preview")
         ), this.updateStopsList(), this.updateUI(), this.triggerChange();
       }), f.addEventListener("click", () => {
-        var b;
+        var E;
         (this.value.stops.length || 0) <= 2 || (this.clearGlobalBindingForCustomChange(), this.value.stops.splice(n, 1), this.createHandles(
           this.popoverEl.querySelector(".gradient-handles"),
           this.popoverEl.querySelector(".gradient-preview")
-        ), this.updateStopsList(), this.updateGradientPreview(), this.updateUI(), ((b = document.activeElement) == null ? void 0 : b.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange());
+        ), this.updateStopsList(), this.updateGradientPreview(), this.updateUI(), ((E = document.activeElement) == null ? void 0 : E.tagName) !== "INPUT" && this.repositionPopover(), this.triggerChange());
       }), v.addEventListener("input", () => {
         this.clearGlobalBindingForCustomChange();
-        const b = parseInt(v.value, 10);
-        this.value.stops[n].opacity = Math.max(0, Math.min(100, b)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
+        const E = parseInt(v.value, 10);
+        this.value.stops[n].opacity = Math.max(0, Math.min(100, E)), y.textContent = `${this.value.stops[n].opacity}%`, this.debouncedPreviewUpdate();
       }), v.addEventListener("change", () => {
         this.clearGlobalBindingForCustomChange(), this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       });
@@ -1696,8 +1699,8 @@ const V = class V extends x {
         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 d = s - t.bottom, u = t.top;
-        u >= o + n ? l = t.top - o - 8 : d >= o + n ? l = t.bottom + 8 : u > d ? (l = t.top - o - 8, l < n && (l = n)) : (l = t.bottom + 8, l + o > s - n && (l = s - o - n)), this.popoverEl.style.left = `${a}px`, this.popoverEl.style.top = `${l}px`, this.popoverPosition = { left: a, top: l };
+        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 };
       }
       setTimeout(() => document.addEventListener("click", this.onBackgroundClick, !0), 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
     }
@@ -1715,10 +1718,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, d = i + o;
-        c < d && h > c + 100 && (l = e.left - i - 8);
-        const u = n - e.bottom, f = e.top;
-        f >= a + o ? r = e.top - a - 8 : u >= a + o ? r = e.bottom + 8 : f > u ? (r = e.top - a - 8, r < o && (r = o)) : (r = e.bottom + 8, r + a > n - o && (r = n - a - o)), this.popoverEl.style.left = `${l}px`, this.popoverEl.style.top = `${r}px`;
+        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`;
       });
     }
   }
@@ -1737,13 +1740,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);
-        R.addColor(e, "gradient"), (t = this.recentGradientRefresh) == null || t.call(this);
+        F.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() : R.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
+    this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : F.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
   }
   handlePaste(t) {
     var i;
@@ -1793,10 +1796,10 @@ const V = class V extends x {
 };
 V.openInstance = null, V.CHANGE_DEBOUNCE_DELAY = 150;
 let j = V;
-function J(p, t) {
-  for (const e in p)
-    if (Object.prototype.hasOwnProperty.call(p, e)) {
-      const i = p[e];
+function J(d, t) {
+  for (const e in d)
+    if (Object.prototype.hasOwnProperty.call(d, e)) {
+      const i = d[e];
       t(e, i);
     }
 }
@@ -1894,14 +1897,14 @@ const Q = class Q {
     }), s.forEach((r) => {
       n.includes(r) || this.removeSetting(r);
     }), n.forEach((r) => {
-      var d;
+      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)) {
-        const u = o[r];
+        const g = o[r];
         try {
           k(c) ? c.setValue(
-            u
-          ) : G(c) ? (d = c.setValue) == null || d.call(c, u) : c.setValue && c.setValue(u);
+            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);
         }
@@ -2332,12 +2335,12 @@ const Q = class Q {
         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 d = h.draw();
+          const p = h.draw();
           k(h) && h.deleteItemCfg && this.addDeleteButtonToElement(
-            d,
+            p,
             c,
             h
-          ), a.appendChild(d);
+          ), a.appendChild(p);
         }
     } else {
       const c = document.createElement("div");
@@ -2352,11 +2355,11 @@ const Q = class Q {
       <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", (d) => {
-        d.stopPropagation(), d.preventDefault();
-        const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), f = this.addItemCfg.createItem(u);
+      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)) {
-          const m = `${this.addItemCfg.keyPrefix}${u}`;
+          const m = `${this.addItemCfg.keyPrefix}${g}`;
           this.addSetting(m, f);
         }
       }), a.appendChild(c);
@@ -2405,8 +2408,8 @@ const Q = class Q {
 };
 Q.hiddenElements = /* @__PURE__ */ new Set();
 let $ = Q;
-function Ee(p) {
-  return new At(p);
+function be(d) {
+  return new At(d);
 }
 class At extends $ {
   constructor(t) {
@@ -2469,11 +2472,11 @@ class At extends $ {
     return this.updateTabUI(), t;
   }
 }
-function Dt(p) {
-  return new $(p);
+function Dt(d) {
+  return new $(d);
 }
-function we(p) {
-  return p;
+function we(d) {
+  return d;
 }
 class Gt extends x {
   constructor(t = {}) {
@@ -2495,12 +2498,12 @@ class Gt extends x {
     });
   }
 }
-const Rt = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+const Ft = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
 class O extends Gt {
   constructor(t) {
     super({
       ...t,
-      icon: t.icon || Rt,
+      icon: t.icon || Ft,
       title: t.title || "Color",
       default: t.default ? O.normalizeColorValue(t.default) : "#000000"
     }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
@@ -2542,12 +2545,12 @@ class O extends Gt {
     if (t.className = "color-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
       const m = document.createElement("div");
       if (m.className = "icon-container", this.props.icon) {
-        const g = document.createElement("span");
-        g.className = "input-icon", g.innerHTML = this.props.icon, m.appendChild(g);
+        const u = document.createElement("span");
+        u.className = "input-icon", u.innerHTML = this.props.icon, m.appendChild(u);
       }
       if (this.props.title) {
-        const g = document.createElement("span");
-        g.className = "input-label", g.textContent = this.props.title, m.appendChild(g);
+        const u = document.createElement("span");
+        u.className = "input-label", u.textContent = this.props.title, m.appendChild(u);
       }
       t.appendChild(m);
     }
@@ -2567,24 +2570,24 @@ class O extends Gt {
       try {
         if (console.log("ColorSetting: renderGlobalOptions called"), a.innerHTML = "", !x) {
           console.error("ColorSetting: Setting class is undefined");
-          const g = document.createElement("div");
-          g.textContent = "Error: System error (Setting undefined)", a.appendChild(g);
+          const u = document.createElement("div");
+          u.textContent = "Error: System error (Setting undefined)", a.appendChild(u);
           return;
         }
         const m = x.GlobalVariables || {};
         if (console.log("ColorSetting: GlobalVariables:", m), !m || Object.keys(m).length === 0) {
-          const g = document.createElement("div");
-          g.textContent = "No global colors defined", g.style.gridColumn = "1 / -1", g.style.fontSize = "12px", g.style.color = "#666", a.appendChild(g);
+          const u = document.createElement("div");
+          u.textContent = "No global colors defined", u.style.gridColumn = "1 / -1", u.style.fontSize = "12px", u.style.color = "#666", a.appendChild(u);
           return;
         }
-        Object.entries(m).forEach(([g, v]) => {
+        Object.entries(m).forEach(([u, v]) => {
           const C = document.createElement("button");
-          C.className = "global-color-btn", C.title = g, 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(--${g})` && (C.style.border = "2px solid #2196f3"), C.addEventListener("click", (y) => {
+          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) => {
             var L, I;
             y.preventDefault();
-            const E = `var(--${g})`;
-            this.value = E, (L = this.onChange) == null || L.call(this, E), (I = this.detectChange) == null || I.call(this, E), Array.from(a.children).forEach((b) => {
-              b.style.border = "1px solid #ddd";
+            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);
         });
@@ -2598,51 +2601,51 @@ class O extends Gt {
       m.preventDefault(), n.classList.add("active"), s.classList.remove("active"), o.style.display = "none", a.style.display = "grid", l();
     }), this.value && this.value.startsWith("var(--") ? n.click() : s.click();
     const r = (m) => {
-      const g = m.value.trim();
-      if (!g)
+      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(g);
+      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;
     }, 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 d = this.value || "#000000";
-    if (d.startsWith("var(--")) {
-      const m = d.replace("var(--", "").replace(")", "");
-      d = (x.GlobalVariables || {})[m] || "#000000";
+    let p = this.value || "#000000";
+    if (p.startsWith("var(--")) {
+      const m = p.replace("var(--", "").replace(")", "");
+      p = (x.GlobalVariables || {})[m] || "#000000";
     }
-    h.style.backgroundColor = d;
-    const u = document.createElement("input");
-    u.type = "text", u.className = "color-text-input", u.value = this.value || "", u.placeholder = "#000000", u.setAttribute("pattern", "#[0-9A-Fa-f]{6}"), u.setAttribute("title", "Enter a hex color value (e.g., #ff0000)"), u.setAttribute("aria-label", "Hex color value"), u.setAttribute("maxlength", "7"), this.getDataPropsPath() && u.setAttribute("data-test-id", `${this.getDataPropsPath()}_text`), this.textInputEl = u;
+    h.style.backgroundColor = p;
+    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;
-      let g = m.trim();
-      if (g && !g.startsWith("#") && !g.startsWith("var(") && /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g) && (g = "#" + g, this.textInputEl && (this.textInputEl.value = g)), this.textInputEl && r(this.textInputEl)) {
-        const y = O.normalizeColorValue(g);
+      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;
       }
     };
     return this.textInputEl.addEventListener("input", (m) => {
-      const g = m.target.value;
-      f(g);
+      const u = m.target.value;
+      f(u);
     }), this.textInputEl.addEventListener("paste", (m) => {
       var v;
       m.preventDefault();
-      const g = ((v = m.clipboardData) == null ? void 0 : v.getData("text")) || "";
-      this.textInputEl && (this.textInputEl.value = g.trim(), f(g));
+      const u = ((v = m.clipboardData) == null ? void 0 : v.getData("text")) || "";
+      this.textInputEl && (this.textInputEl.value = u.trim(), f(u));
     }), this.textInputEl.addEventListener("keydown", (m) => {
-      var g, v, C;
-      m.key === "Enter" && (m.preventDefault(), f(((g = this.textInputEl) == null ? void 0 : g.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, 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"));
     }), this.colorInputEl.addEventListener("input", (m) => {
       var C, y;
-      const g = m.target.value, v = O.normalizeColorValue(g);
+      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.colorInputEl.addEventListener("change", (m) => {
       var C, y;
-      const g = m.target.value, v = O.normalizeColorValue(g);
+      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(u), e.appendChild(i), e.appendChild(o), e.appendChild(a), t.appendChild(e), this.element = t, t;
+    }), 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;
   }
   getElement() {
     return this.element;
@@ -2660,20 +2663,20 @@ class O extends Gt {
     return this.isValidHex() ? this.hexToRgb(this.value) : "0, 0, 0";
   }
 }
-const Ft = `
+const Rt = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
   <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 F extends x {
+class R extends x {
   constructor(t = {}) {
     super({
       ...t,
-      icon: t.icon || Ft,
+      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 = F.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 = R.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");
@@ -2691,7 +2694,7 @@ class F extends x {
     return `#${i}${n}`;
   }
   setValue(t) {
-    t === void 0 || t === "" ? this.value = "#000000FF" : this.value = F.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 = R.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()));
@@ -2702,7 +2705,7 @@ class F extends x {
     this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
   }
   handleColorChange(t) {
-    const e = this.getOpacityPercent(), i = F.combineColorOpacity(
+    const e = this.getOpacityPercent(), i = R.combineColorOpacity(
       t,
       e
     );
@@ -2713,7 +2716,7 @@ class F 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 = F.combineColorOpacity(
+    const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = R.combineColorOpacity(
       e,
       i
     );
@@ -3423,12 +3426,44 @@ const Kt = `
     super(t), this.inputType = {
       imageUrl: "text",
       markers: "text"
-    }, this.mainButton = null, this.thumbnailEl = null, this.markerCountEl = null, this.popoverEl = null, this.backdropEl = null, this.imageElement = null, this.cursorTooltip = null, this.popoverPosition = null, this.isPopoverOpen = !1, this.confirmOverlayEl = null, this.confirmPromise = null, this.draggingMarkerId = null, this.history = [], this.historyIndex = -1, this.isUndoRedoOperation = !1, this.initialValue = null, this.props.maxMarkers = this.props.maxMarkers ?? 10, this.props.maxFileSizeMB = this.props.maxFileSizeMB ?? 5, this.props.markerSize = this.props.markerSize ?? 24, this.value || (this.value = { imageUrl: "", markers: [] }), this.onBackgroundClick = (e) => {
+    }, this.mainButton = null, this.thumbnailEl = null, this.markerCountEl = null, this.popoverEl = null, this.backdropEl = null, this.imageElement = null, this.cursorTooltip = null, this.popoverPosition = null, this.isPopoverOpen = !1, this.confirmOverlayEl = null, this.confirmPromise = null, this.lastImageNaturalSize = null, this.draggingMarkerId = null, this.history = [], this.historyIndex = -1, this.isUndoRedoOperation = !1, this.initialValue = null, this.messageListener = null, this.props.maxMarkers = this.props.maxMarkers ?? 10, this.props.maxFileSizeMB = this.props.maxFileSizeMB ?? 5, this.props.markerSize = this.props.markerSize ?? 24, this.value || (this.value = { imageUrl: "", markers: [] }), this.setupMessageListener(), this.onBackgroundClick = (e) => {
       this.isPopoverOpen && this.popoverEl && !this.popoverEl.contains(e.target) && this.closePopover();
     }, this.handlePopoverKeydown = (e) => {
       this.isPopoverOpen && (e.key === "Escape" ? this.closePopover() : (e.ctrlKey || e.metaKey) && (e.key === "z" || e.key === "Z" ? e.shiftKey ? (e.preventDefault(), this.redo()) : (e.preventDefault(), this.undo()) : (e.key === "y" || e.key === "Y") && (e.preventDefault(), this.redo())));
     }, this.boundHandleMarkerDrag = this.handleMarkerDrag.bind(this), this.boundStopDragging = this.stopDragging.bind(this);
   }
+  setupMessageListener() {
+    this.messageListener = (t) => {
+      if (t.data && t.data.type === "FILE_MANAGER_IMAGE_SELECTED" && t.data.settingId === this.id) {
+        const e = t.data.imageUrl;
+        if (e && typeof e == "string") {
+          const i = this.lastImageNaturalSize, s = new Image();
+          s.onload = () => {
+            var a;
+            const n = {
+              width: s.naturalWidth || 0,
+              height: s.naturalHeight || 0
+            }, o = this.scaleMarkersForNewImage(
+              ((a = this.value) == null ? void 0 : a.markers) || [],
+              i,
+              n
+            );
+            this.value = {
+              imageUrl: e,
+              markers: o
+            }, this.lastImageNaturalSize = n, this.history = [
+              JSON.parse(JSON.stringify(o))
+            ], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateButtonDisplay(), this.refreshPopoverContent(), this.triggerChange();
+          }, s.onerror = () => {
+            this.showError("Failed to load image from file manager.");
+          }, s.src = e;
+        }
+      }
+    }, window.addEventListener("message", this.messageListener);
+  }
+  cleanupMessageListener() {
+    this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null);
+  }
   draw() {
     const t = document.createElement("div");
     if (t.className = "image-map-setting-wrapper", this.props.title || this.props.icon) {
@@ -3468,7 +3503,11 @@ const Kt = `
     s.className = "image-map-content", this.popoverEl.appendChild(s), document.body.appendChild(this.backdropEl), document.body.appendChild(this.popoverEl);
   }
   openPopover() {
-    B.openInstance && B.openInstance !== this && B.openInstance.closePopover(), this.isPopoverOpen = !0, B.openInstance = this, this.value ? this.initialValue = JSON.parse(JSON.stringify(this.value)) : this.initialValue = { imageUrl: "", markers: [] }, this.value && (this.history = [JSON.parse(JSON.stringify(this.value.markers))], this.historyIndex = 0), this.backdropEl && (this.backdropEl.style.display = "block"), this.popoverEl && (this.popoverEl.style.display = "flex"), this.positionPopover(), this.refreshPopoverContent(), setTimeout(() => {
+    B.openInstance && B.openInstance !== this && B.openInstance.closePopover(), this.isPopoverOpen = !0, B.openInstance = this, this.value ? this.initialValue = JSON.parse(
+      JSON.stringify(this.value)
+    ) : this.initialValue = { imageUrl: "", markers: [] }, this.value && (this.history = [
+      JSON.parse(JSON.stringify(this.value.markers))
+    ], this.historyIndex = 0), this.backdropEl && (this.backdropEl.style.display = "block"), this.popoverEl && (this.popoverEl.style.display = "flex"), this.positionPopover(), this.refreshPopoverContent(), setTimeout(() => {
       document.addEventListener("click", this.onBackgroundClick, !0);
     }, 200), document.addEventListener("keydown", this.handlePopoverKeydown, !0);
   }
@@ -3488,7 +3527,9 @@ const Kt = `
           "You haven't placed all markers. Closing will discard your changes."
         ))
           return;
-        this.initialValue && (this.value = JSON.parse(JSON.stringify(this.initialValue)), this.updateButtonDisplay(), this.triggerChange());
+        this.initialValue && (this.value = JSON.parse(
+          JSON.stringify(this.initialValue)
+        ), this.updateButtonDisplay(), this.triggerChange());
       }
       this.isPopoverOpen = !1, this.draggingMarkerId = null, this.backdropEl && (this.backdropEl.style.display = "none"), this.popoverEl && (this.popoverEl.style.display = "none"), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), B.openInstance === this && (B.openInstance = null);
     }
@@ -3502,9 +3543,13 @@ const Kt = `
   }
   refreshPopoverContent() {
     if (!this.popoverEl) return;
-    const t = this.popoverEl.querySelector(".image-map-content");
+    const t = this.popoverEl.querySelector(
+      ".image-map-content"
+    );
     if (!t) return;
-    const e = t.querySelector(".image-map-container"), i = (e == null ? void 0 : e.scrollTop) || 0;
+    const e = t.querySelector(
+      ".image-map-container"
+    ), i = (e == null ? void 0 : e.scrollTop) || 0;
     if (t.innerHTML = "", this.value && this.value.imageUrl && this.value.imageUrl !== "") {
       const n = document.createElement("div");
       n.className = "image-map-main-layout";
@@ -3512,7 +3557,9 @@ const Kt = `
       o.className = "image-map-image-section", this.renderImageMapSection(o);
       const a = document.createElement("div");
       a.className = "image-map-sidebar", this.renderSidebar(a), n.appendChild(o), n.appendChild(a), t.appendChild(n), requestAnimationFrame(() => {
-        const l = o.querySelector(".image-map-container");
+        const l = o.querySelector(
+          ".image-map-container"
+        );
         l && (l.scrollTop = i);
       });
     } else
@@ -3521,19 +3568,21 @@ const Kt = `
   renderUploadSection(t) {
     const e = document.createElement("div");
     e.className = "upload-section";
-    const i = document.createElement("label");
-    i.className = "upload-label", i.innerHTML = `
+    const i = document.createElement("button");
+    i.type = "button", i.className = "upload-label", i.innerHTML = `
       <div class="upload-placeholder">
         ${Kt}
         <span>Click to upload image</span>
       </div>
-    `;
-    const s = document.createElement("input");
-    s.type = "file", s.accept = "image/*", s.style.display = "none", s.addEventListener("change", (n) => {
-      var a;
-      const o = (a = n.target.files) == null ? void 0 : a[0];
-      o && this.handleImageUpload(o);
-    }), i.appendChild(s), e.appendChild(i), t.appendChild(e);
+    `, i.addEventListener("click", () => {
+      window.postMessage(
+        {
+          type: "OPEN_FILE_MANAGER_MODAL",
+          settingId: this.id
+        },
+        "*"
+      );
+    }), e.appendChild(i), t.appendChild(e);
   }
   renderImageMapSection(t) {
     const e = document.createElement("div");
@@ -3544,25 +3593,40 @@ const Kt = `
     s.type = "button", s.className = "undo-btn action-btn", s.innerHTML = te, s.title = "Undo (Ctrl+Z)", s.disabled = !this.canUndo(), s.addEventListener("click", () => this.undo()), i.appendChild(s);
     const n = document.createElement("button");
     n.type = "button", n.className = "redo-btn action-btn", n.innerHTML = ee, n.title = "Redo (Ctrl+Y)", n.disabled = !this.canRedo(), n.addEventListener("click", () => this.redo()), i.appendChild(n), e.appendChild(i);
-    const o = document.createElement("div");
-    o.className = "replace-wrapper";
-    const a = document.createElement("input");
-    a.type = "file", a.accept = "image/*", a.style.display = "none", a.addEventListener("change", (d) => {
-      var f;
-      const u = (f = d.target.files) == null ? void 0 : f[0];
-      u && this.handleImageUpload(u), a.value = "";
-    });
-    const l = document.createElement("button");
-    l.type = "button", l.className = "replace-btn", l.textContent = "Replace Image", l.addEventListener("click", () => a.click()), o.appendChild(l), o.appendChild(a), e.appendChild(o);
-    const r = document.createElement("button");
-    r.type = "button", r.className = "clear-all-btn", r.textContent = "Clear All Markers", r.addEventListener("click", () => this.handleClearAllMarkers()), e.appendChild(r), t.appendChild(e);
-    const c = document.createElement("div");
-    c.className = "image-map-container";
-    const h = document.createElement("div");
-    h.className = "image-map-wrapper", h.addEventListener("mousemove", this.boundHandleMarkerDrag), h.addEventListener("mouseup", this.boundStopDragging), h.addEventListener("mouseleave", this.boundStopDragging), this.imageElement = document.createElement("img"), this.imageElement.className = "image-map-image", this.imageElement.src = this.value.imageUrl, this.imageElement.addEventListener("click", (d) => this.handleImageClick(d)), h.appendChild(this.imageElement), this.cursorTooltip = document.createElement("div"), this.cursorTooltip.className = "marker-cursor-tooltip", h.appendChild(this.cursorTooltip), this.imageElement.addEventListener("mouseenter", () => this.showCursorTooltip()), this.imageElement.addEventListener("mouseleave", () => this.hideCursorTooltip()), this.imageElement.addEventListener("mousemove", (d) => this.updateCursorTooltip(d)), this.value && this.value.markers && this.value.markers.forEach((d) => {
-      const u = this.createMarkerElement(d);
-      h.appendChild(u);
-    }), c.appendChild(h), t.appendChild(c);
+    const o = document.createElement("button");
+    o.type = "button", o.className = "replace-btn", o.textContent = "Replace Image", o.addEventListener("click", () => {
+      window.postMessage(
+        {
+          type: "OPEN_FILE_MANAGER_MODAL",
+          settingId: this.id
+        },
+        "*"
+      );
+    }), e.appendChild(o);
+    const a = document.createElement("button");
+    a.type = "button", a.className = "clear-all-btn", a.textContent = "Clear All Markers", a.addEventListener("click", () => this.handleClearAllMarkers()), e.appendChild(a), t.appendChild(e);
+    const l = document.createElement("div");
+    l.className = "image-map-container";
+    const r = document.createElement("div");
+    r.className = "image-map-wrapper", r.addEventListener("mousemove", this.boundHandleMarkerDrag), r.addEventListener("mouseup", this.boundStopDragging), r.addEventListener("mouseleave", this.boundStopDragging), this.imageElement = document.createElement("img"), this.imageElement.className = "image-map-image", this.imageElement.src = this.value.imageUrl, this.imageElement.addEventListener(
+      "load",
+      () => this.recordImageNaturalSize()
+    ), this.imageElement.addEventListener(
+      "click",
+      (c) => this.handleImageClick(c)
+    ), r.appendChild(this.imageElement), this.cursorTooltip = document.createElement("div"), this.cursorTooltip.className = "marker-cursor-tooltip", r.appendChild(this.cursorTooltip), this.imageElement.addEventListener(
+      "mouseenter",
+      () => this.showCursorTooltip()
+    ), this.imageElement.addEventListener(
+      "mouseleave",
+      () => this.hideCursorTooltip()
+    ), this.imageElement.addEventListener(
+      "mousemove",
+      (c) => this.updateCursorTooltip(c)
+    ), this.value && this.value.markers && this.value.markers.forEach((c) => {
+      const h = this.createMarkerElement(c);
+      r.appendChild(h);
+    }), l.appendChild(r), t.appendChild(l);
   }
   renderSidebar(t) {
     var c, h;
@@ -3573,20 +3637,20 @@ const Kt = `
     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((d) => l.set(d.index, d));
-    for (let d = 1; d <= i; d++) {
-      const u = l.get(d), f = !!u, m = (u == null ? void 0 : u.prizeName) || this.props.prizeMap && this.props.prizeMap[d - 1] || `Prize #${d}`, g = document.createElement("div");
-      g.className = `prize-item ${f ? "placed" : "missing"}`;
+    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 v = document.createElement("div");
-      v.className = "prize-index", v.textContent = String(d);
+      v.className = "prize-index", v.textContent = String(p);
       const C = document.createElement("div");
       C.className = "prize-label";
       const y = document.createElement("div");
-      y.className = "prize-title", y.textContent = `Prize #${d}`;
-      const E = document.createElement("div");
-      E.className = "prize-subtitle", E.textContent = f ? m : "Not Placed", C.appendChild(y), C.appendChild(E);
+      y.className = "prize-title", y.textContent = `Prize #${p}`;
+      const b = document.createElement("div");
+      b.className = "prize-subtitle", b.textContent = f ? m : "Not Placed", C.appendChild(y), C.appendChild(b);
       const L = document.createElement("div");
-      L.className = `prize-status ${f ? "placed" : "missing"}`, L.innerHTML = f ? ie : se, g.appendChild(v), g.appendChild(C), g.appendChild(L), o.appendChild(g);
+      L.className = `prize-status ${f ? "placed" : "missing"}`, L.innerHTML = f ? ie : se, u.appendChild(v), u.appendChild(C), u.appendChild(L), o.appendChild(u);
     }
     t.appendChild(o);
     const r = document.createElement("button");
@@ -3611,33 +3675,63 @@ const Kt = `
     }), e;
   }
   handleImageUpload(t) {
-    if (!["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"].includes(t.type)) {
-      this.showError("Invalid file type. Please upload a JPEG, PNG, GIF, or WebP image.");
+    const e = this.lastImageNaturalSize;
+    if (![
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/gif",
+      "image/webp"
+    ].includes(t.type)) {
+      this.showError(
+        "Invalid file type. Please upload a JPEG, PNG, GIF, or WebP image."
+      );
       return;
     }
-    const i = (this.props.maxFileSizeMB || 5) * 1024 * 1024;
-    if (t.size > i) {
-      const n = (t.size / 1048576).toFixed(1);
-      this.showError(`File size (${n}MB) exceeds ${this.props.maxFileSizeMB}MB limit.`);
+    const s = (this.props.maxFileSizeMB || 5) * 1024 * 1024;
+    if (t.size > s) {
+      const o = (t.size / 1048576).toFixed(1);
+      this.showError(
+        `File size (${o}MB) exceeds ${this.props.maxFileSizeMB}MB limit.`
+      );
       return;
     }
-    const s = new FileReader();
-    s.onload = (n) => {
-      var a;
-      const o = (a = n.target) == null ? void 0 : a.result;
-      typeof o == "string" && (this.value = {
-        imageUrl: o,
-        markers: []
-        // Clear markers on new upload
-      }, this.history = [[]], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateButtonDisplay(), this.refreshPopoverContent(), this.triggerChange());
-    }, s.onerror = () => {
+    const n = new FileReader();
+    n.onload = (o) => {
+      var l;
+      const a = (l = o.target) == null ? void 0 : l.result;
+      if (typeof a == "string") {
+        const r = new Image();
+        r.onload = () => {
+          var p;
+          const c = {
+            width: r.naturalWidth || 0,
+            height: r.naturalHeight || 0
+          }, h = this.scaleMarkersForNewImage(
+            ((p = this.value) == null ? void 0 : p.markers) || [],
+            e,
+            c
+          );
+          this.value = {
+            imageUrl: a,
+            markers: h
+          }, this.lastImageNaturalSize = c, this.history = [
+            JSON.parse(JSON.stringify(h))
+          ], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateButtonDisplay(), this.refreshPopoverContent(), this.triggerChange();
+        }, r.onerror = () => {
+          this.showError("Failed to read image file.");
+        }, r.src = a;
+      }
+    }, n.onerror = () => {
       this.showError("Failed to read image file.");
-    }, s.readAsDataURL(t);
+    }, n.readAsDataURL(t);
   }
   handleImageClick(t) {
     if (this.draggingMarkerId !== null || !this.value || !this.imageElement) return;
     if (this.value.markers.length >= (this.props.maxMarkers || 10)) {
-      this.showError(`Maximum of ${this.props.maxMarkers || 10} markers allowed.`);
+      this.showError(
+        `Maximum of ${this.props.maxMarkers || 10} markers allowed.`
+      );
       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);
@@ -3660,7 +3754,8 @@ const Kt = `
   }
   handleMarkerDrag(t) {
     var r;
-    if (this.draggingMarkerId === null || !this.imageElement || !this.value) return;
+    if (this.draggingMarkerId === null || !this.imageElement || !this.value)
+      return;
     const e = this.imageElement.getBoundingClientRect(), i = (t.clientX - e.left) / e.width * 100, s = (t.clientY - e.top) / e.height * 100, n = Math.min(100, Math.max(0, i)), o = Math.min(100, Math.max(0, s)), a = this.value.markers.map(
       (c) => c.id === this.draggingMarkerId ? { ...c, x: n, y: o } : c
     ), l = (r = this.popoverEl) == null ? void 0 : r.querySelector(
@@ -3717,7 +3812,9 @@ const Kt = `
   }
   saveState() {
     if (this.isUndoRedoOperation || !this.value) return;
-    const t = JSON.parse(JSON.stringify(this.value.markers));
+    const t = JSON.parse(
+      JSON.stringify(this.value.markers)
+    );
     if (this.historyIndex >= 0 && this.history.length > 0) {
       const e = this.history[this.historyIndex];
       if (JSON.stringify(e) === JSON.stringify(t))
@@ -3749,7 +3846,11 @@ const Kt = `
   }
   updateUndoRedoButtons() {
     if (!this.popoverEl) return;
-    const t = this.popoverEl.querySelector(".undo-btn"), e = this.popoverEl.querySelector(".redo-btn");
+    const t = this.popoverEl.querySelector(
+      ".undo-btn"
+    ), e = this.popoverEl.querySelector(
+      ".redo-btn"
+    );
     t && (t.disabled = !this.canUndo()), e && (e.disabled = !this.canRedo());
   }
   showError(t) {
@@ -3805,6 +3906,25 @@ const Kt = `
       markers: e
     };
   }
+  scaleMarkersForNewImage(t, e, i) {
+    if (!t.length) return [];
+    const s = e && e.width && e.height && e || i && i.width && i.height && i || null;
+    return t.map((n) => {
+      const o = { ...n };
+      return s && o.x > 100 && (o.x = o.x / s.width * 100), s && o.y > 100 && (o.y = o.y / s.height * 100), o.x = this.clampPercentage(o.x), o.y = this.clampPercentage(o.y), o;
+    });
+  }
+  clampPercentage(t) {
+    return Number.isFinite(t) ? Math.max(0, Math.min(100, t)) : 0;
+  }
+  recordImageNaturalSize() {
+    if (!this.imageElement) return;
+    const { naturalWidth: t, naturalHeight: e } = this.imageElement;
+    t && e && (this.lastImageNaturalSize = {
+      width: t,
+      height: e
+    });
+  }
   showConfirmModal(t, e) {
     return this.confirmPromise ? this.confirmPromise : (this.confirmPromise = new Promise((i) => {
       this.confirmOverlayEl && (this.confirmOverlayEl.remove(), this.confirmOverlayEl = null);
@@ -3822,11 +3942,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 = (d) => {
-        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(d);
+      const h = (p) => {
+        s.remove(), this.confirmOverlayEl = null, this.confirmPromise = null, i(p);
       };
-      r.addEventListener("click", () => h(!1)), c.addEventListener("click", () => h(!0)), s.addEventListener("click", (d) => {
-        d.target === s && h(!1);
+      r.addEventListener("click", () => h(!1)), c.addEventListener("click", () => h(!0)), s.addEventListener("click", (p) => {
+        p.target === s && h(!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);
@@ -3837,7 +3957,7 @@ const Kt = `
   }
   destroy() {
     var t, e;
-    this.closePopover(), (t = this.backdropEl) != null && t.parentElement && this.backdropEl.parentElement.removeChild(this.backdropEl), (e = this.popoverEl) != null && e.parentElement && this.popoverEl.parentElement.removeChild(this.popoverEl), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0);
+    this.closePopover(), (t = this.backdropEl) != null && t.parentElement && this.backdropEl.parentElement.removeChild(this.backdropEl), (e = this.popoverEl) != null && e.parentElement && this.popoverEl.parentElement.removeChild(this.popoverEl), document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.cleanupMessageListener();
   }
 };
 B.openInstance = null;
@@ -4179,11 +4299,13 @@ class Ve extends H {
 }
 class Te extends x {
   constructor(t) {
-    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), this.popup = null, t.default ? this.value = { ...t.default } : this.value || (this.value = {}), this.defaultLanguage = t.languages.includes(x.DefaultLanguage) ? x.DefaultLanguage : t.languages[0];
-    const e = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
-    t.languages.forEach((i) => {
-      var s, n;
-      i in (this.value || {}) || (this.value || (this.value = {}), i === this.defaultLanguage && e ? this.value[i] = ((s = t.default) == null ? void 0 : s[i]) || e : this.value[i] = ((n = t.default) == null ? void 0 : n[i]) || "");
+    super(t), this.inputType = {}, this.container = null, this.defaultLanguage = "", this.uploadSettings = /* @__PURE__ */ new Map(), this.popup = null, t.default ? this.value = { ...t.default } : this.value || (this.value = {});
+    const e = x.HasExplicitCurrentLanguage(), i = e ? x.CurrentLanguage() : "", s = x.DefaultLanguage;
+    this.defaultLanguage = e && i && t.languages.includes(i) ? i : s && t.languages.includes(s) ? s : t.languages[0];
+    const n = t.defaultValue || `Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;
+    t.languages.forEach((o) => {
+      var a, l;
+      o in (this.value || {}) || (this.value || (this.value = {}), o === this.defaultLanguage && n ? this.value[o] = ((a = t.default) == null ? void 0 : a[o]) || n : this.value[o] = ((l = t.default) == null ? void 0 : l[o]) || "");
     });
   }
   capitalizeFirstLetter(t) {
@@ -4210,12 +4332,12 @@ class Te extends x {
       return;
     }
     const c = "...";
-    let h = 0, d = e.length, u = 0;
-    for (; h <= d; ) {
-      const m = Math.floor((h + d) / 2), g = e.slice(0, m).trimEnd() + c;
-      this.measureTextWidth(g, i) <= l ? (u = m, h = m + 1) : d = m - 1;
+    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;
     }
-    const f = e.slice(0, u).trimEnd() + c;
+    const f = e.slice(0, g).trimEnd() + c;
     t.placeholder = f;
   }
   autosizeTextarea(t, e = 3) {
@@ -4283,28 +4405,28 @@ class Te extends x {
     });
   }
   renderContent(t) {
-    var s;
+    var n;
     const e = t.querySelector(
       ".simple-multi-language-content"
     );
     if (!e) return;
     e.innerHTML = "";
-    const i = x.CurrentLanguage();
-    if (!i || !this.props.languages.includes(i))
-      this.props.languages.forEach((n) => {
-        var l;
-        const o = ((l = this.value) == null ? void 0 : l[n]) || "", a = this.createTextareaRow(n, o);
-        e.appendChild(a);
+    const i = x.HasExplicitCurrentLanguage(), s = x.CurrentLanguage();
+    if (!i || !s || !this.props.languages.includes(s))
+      this.props.languages.forEach((o) => {
+        var r;
+        const a = ((r = this.value) == null ? void 0 : r[o]) || "", l = this.createTextareaRow(o, a);
+        e.appendChild(l);
       });
     else {
-      const n = ((s = this.value) == null ? void 0 : s[i]) || "", o = this.createTextareaRow(i, n);
-      e.appendChild(o);
-      const a = e.querySelector(
+      const o = ((n = this.value) == null ? void 0 : n[s]) || "", a = this.createTextareaRow(s, o);
+      e.appendChild(a);
+      const l = e.querySelector(
         ".simple-language-textarea"
       );
-      if (a) {
-        const l = a.getAttribute("data-full-placeholder") || "";
-        l && this.adaptPlaceholderToSingleLine(a, l);
+      if (l) {
+        const r = l.getAttribute("data-full-placeholder") || "";
+        r && this.adaptPlaceholderToSingleLine(l, r);
       }
     }
   }
@@ -4320,7 +4442,7 @@ class Te extends x {
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: 9999;
+      z-index: 1;
     `;
     const e = document.createElement("div");
     e.classList.add("multi-language-popup"), e.style.cssText = `
@@ -4378,22 +4500,22 @@ class Te extends x {
   }
   draw() {
     const t = document.createElement("div");
-    if (t.classList.add("simple-multi-language-wrapper"), this.props.title) {
-      const s = document.createElement("div");
-      s.classList.add("simple-multi-language-title"), s.style.cssText = `
+    t.classList.add("simple-multi-language-wrapper");
+    const e = document.createElement("div");
+    e.classList.add("simple-multi-language-title"), e.style.cssText = `
         display: flex;
         justify-content: space-between;
         align-items: center;
       `;
-      const n = document.createElement("span");
-      n.textContent = this.props.title;
-      const o = document.createElement("button");
-      o.classList.add("multi-language-eye-icon"), o.innerHTML = `
+    const i = document.createElement("span");
+    i.textContent = this.props.title ?? "";
+    const s = document.createElement("button");
+    s.classList.add("multi-language-eye-icon"), s.innerHTML = `
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
           <circle cx="12" cy="12" r="3"></circle>
         </svg>
-      `, o.style.cssText = `
+      `, s.style.cssText = `
         background: none;
         border: none;
         cursor: pointer;
@@ -4403,28 +4525,27 @@ class Te extends x {
         justify-content: center;
         color: #666;
         transition: color 0.2s;
-      `, o.addEventListener("mouseenter", () => {
-        o.style.color = "#000";
-      }), o.addEventListener("mouseleave", () => {
-        o.style.color = "#666";
-      }), o.addEventListener("click", (a) => {
-        a.preventDefault(), this.showPopup();
-      }), s.appendChild(n), s.appendChild(o), t.appendChild(s);
-    }
-    const e = document.createElement("div");
-    e.classList.add("simple-multi-language-content"), t.appendChild(e), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = x.onLanguageChange(() => {
-      this.container && this.renderContent(this.container);
+      `, s.addEventListener("mouseenter", () => {
+      s.style.color = "#000";
+    }), s.addEventListener("mouseleave", () => {
+      s.style.color = "#666";
+    }), s.addEventListener("click", (a) => {
+      a.preventDefault(), this.showPopup();
+    }), e.appendChild(i), e.appendChild(s), t.appendChild(e);
+    const n = document.createElement("div");
+    n.classList.add("simple-multi-language-content"), t.appendChild(n), this.container = t, this.renderContent(t), this.languageChangeUnsubscribe = x.onLanguageChange((a) => {
+      a && this.props.languages.includes(a) && (this.defaultLanguage = a), this.container && this.renderContent(this.container);
     });
-    const i = () => {
+    const o = () => {
       if (!this.container) return;
       this.container.querySelectorAll(
         ".simple-language-textarea"
-      ).forEach((n) => {
-        const o = n.getAttribute("data-full-placeholder") || "";
-        o && this.adaptPlaceholderToSingleLine(n, o);
+      ).forEach((l) => {
+        const r = l.getAttribute("data-full-placeholder") || "";
+        r && this.adaptPlaceholderToSingleLine(l, r);
       });
     };
-    return window.addEventListener("resize", i), t;
+    return window.addEventListener("resize", o), t;
   }
   setValue(t) {
     super.setValue(t), this.container && this.props.languages.forEach((e) => {
@@ -4687,7 +4808,7 @@ class He extends $ {
         }),
         marginLeft: new _({
           title: "Left",
-          icon: be,
+          icon: Ee,
           suffix: "px",
           default: (t == null ? void 0 : t.marginLeft) ?? 0
         })
@@ -4710,7 +4831,7 @@ const fe = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`, ye = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, be = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+</svg>`, Ee = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 class Be extends $ {
@@ -4726,7 +4847,7 @@ class Be extends $ {
         opacity: new Ut({
           default: (t == null ? void 0 : t.opacity) ?? 100
         }),
-        backgroundColor: new F({
+        backgroundColor: new R({
           default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
         })
       }
@@ -4781,7 +4902,7 @@ export {
   Oe as BorderSettingSet,
   Le as ButtonSetting,
   O as ColorSetting,
-  F as ColorWithOpacitySetting,
+  R as ColorWithOpacitySetting,
   ke as DimensionSetting,
   Ie as GapSetting,
   j as GradientSetting,
@@ -4808,7 +4929,7 @@ export {
   ae as WidthSetting,
   we as asSettingGroupWithSettings,
   Dt as createSettingGroup,
-  Ee as createTabSettingGroup,
+  be as createTabSettingGroup,
   G as isSetting,
   ct as isSettingChild,
   k as isSettingGroup,