monto-email-builder 1.4.0 → 1.4.2

package/dist/html-editor.js

@@ -1,350 +1,422 @@
-import { jsxs as m, jsx as r, Fragment as wt } from "react/jsx-runtime";
-import { forwardRef as St, useState as y, useRef as oe, useEffect as J, useCallback as w, useMemo as Q, useImperativeHandle as Ht } from "react";
-import Lt from "@uiw/react-codemirror";
-import { html as Dt } from "@codemirror/lang-html";
-import { xcodeDark as Mt, tomorrowNightBlue as It, dracula as Je, basicDark as kt, abcdef as At, bbedit as zt, noctisLilac as Ot, gruvboxLight as Rt, tokyoNightDay as Bt, vscodeLight as Ft, xcodeLight as Nt } from "@uiw/codemirror-themes-all";
-import F from "@mui/material/ToggleButton";
-import _e from "@mui/material/ToggleButtonGroup";
-import { useTheme as $t, Box as d, Tooltip as O, FormControl as _t, InputLabel as Pt, Select as Wt, ListSubheader as Pe, MenuItem as We, Button as ie, Tabs as jt, Tab as je, Typography as S, Accordion as Gt, AccordionSummary as Kt, AccordionDetails as Ut, TextField as le, Divider as Yt } from "@mui/material";
-import { alpha as Ge } from "@mui/material/styles";
-import * as qt from "@mui/icons-material/AddOutlined";
-import * as Xt from "@mui/icons-material/Code";
-import * as Jt from "@mui/icons-material/DataObjectOutlined";
-import * as Qt from "@mui/icons-material/ExpandMoreOutlined";
-import * as Zt from "@mui/icons-material/HelpOutlined";
-import * as er from "@mui/icons-material/Visibility";
-import * as tr from "@mui/icons-material/ViewColumn";
-import * as rr from "@mui/icons-material/MonitorOutlined";
-import * as or from "@mui/icons-material/PhoneIphoneOutlined";
-import { B as ir, V as H, r as V, t as lr } from "./chunks/chunk-CF4KXMbF.js";
-const ae = ir, Ke = "unsubscribe_link", ne = /\{\{\s*([^{}]+?)\s*\}\}/g, Ue = /\{%\s*([^{}%]+?)\s*%\}/g;
-function se(o, a, s, l, c) {
-  return o[a - 1] !== l && o[s] !== c;
+import { jsx as o, jsxs as f, Fragment as Nt } from "react/jsx-runtime";
+import { forwardRef as dt, useState as E, useRef as $, useEffect as X, useCallback as D, useMemo as J, useImperativeHandle as zt } from "react";
+import Ot from "@uiw/react-codemirror";
+import { html as Pt } from "@codemirror/lang-html";
+import { xcodeDark as _t, tomorrowNightBlue as Wt, dracula as ut, basicDark as jt, abcdef as Gt, bbedit as Ut, noctisLilac as qt, gruvboxLight as Yt, tokyoNightDay as Kt, vscodeLight as Xt, xcodeLight as Jt } from "@uiw/codemirror-themes-all";
+import Q from "@mui/material/ToggleButton";
+import et from "@mui/material/ToggleButtonGroup";
+import { ThemeProvider as Qt, ScopedCssBaseline as Zt, useTheme as er, Box as m, Tooltip as G, FormControl as tr, InputLabel as rr, Select as or, ListSubheader as tt, MenuItem as rt, Button as ve, Tabs as ar, Tab as ot, Typography as B, Accordion as nr, AccordionSummary as ir, AccordionDetails as lr, TextField as ye, Divider as sr } from "@mui/material";
+import { alpha as ce } from "@mui/material/styles";
+import * as cr from "@mui/icons-material/AddOutlined";
+import * as dr from "@mui/icons-material/Code";
+import * as ur from "@mui/icons-material/DataObjectOutlined";
+import * as mr from "@mui/icons-material/ExpandMoreOutlined";
+import * as hr from "@mui/icons-material/HelpOutlined";
+import * as br from "@mui/icons-material/Visibility";
+import * as pr from "@mui/icons-material/ViewColumn";
+import * as fr from "@mui/icons-material/MonitorOutlined";
+import * as xr from "@mui/icons-material/PhoneIphoneOutlined";
+import { B as gr, V as A, r as L, T as vr, t as yr } from "./chunks/chunk-ZMWDxWGX.js";
+const Ee = gr, at = "unsubscribe_link", Ve = /\{\{\s*([^{}]+?)\s*\}\}/g, nt = /\{%\s*([^{}%]+?)\s*%\}/g;
+function Te(a, n, s, d, c) {
+  return a[n - 1] !== d && a[s] !== c;
 }
-function Qe(o, a = "user") {
-  return a === "builtin" || a === "system" ? `{%${o}%}` : `{{${o}}}`;
+function mt(a, n = "user") {
+  return n === "builtin" || n === "system" ? `{%${a}%}` : `{{${a}}}`;
 }
-function ar(o) {
-  const a = typeof o == "string" ? o.trim() : "";
-  if (a.startsWith("{{") && a.endsWith("}}")) {
-    const s = a.slice(2, -2).trim();
-    if (H.test(s)) return { attribute: s, type: "user" };
+function Ir(a) {
+  const n = typeof a == "string" ? a.trim() : "";
+  if (n.startsWith("{{") && n.endsWith("}}")) {
+    const s = n.slice(2, -2).trim();
+    if (A.test(s)) return { attribute: s, type: "user" };
   }
-  if (a.startsWith("{%") && a.endsWith("%}")) {
-    const s = a.slice(2, -2).trim();
-    if (H.test(s)) return { attribute: s, type: "system" };
+  if (n.startsWith("{%") && n.endsWith("%}")) {
+    const s = n.slice(2, -2).trim();
+    if (A.test(s)) return { attribute: s, type: "system" };
   }
   return null;
 }
-function nr(o, a) {
-  const s = o.variable ?? o.Variable ?? o.key ?? "", l = ar(s), g = (o.type ?? o.Type ?? (l == null ? void 0 : l.type) ?? "user") === "system" ? "system" : "user", h = o.attribute ?? o.Attribute ?? (l == null ? void 0 : l.attribute) ?? "", p = String(h).trim();
-  return !p || !H.test(p) ? null : {
-    id: Number(o.id) || a + 1,
-    variable: g === "system" ? `{%${p}%}` : `{{${p}}}`,
-    type: g,
-    attribute: p,
-    default: String(o.default ?? o.Default ?? o.value ?? "")
+function Er(a, n) {
+  const s = a.variable ?? a.Variable ?? a.key ?? "", d = Ir(s), x = (a.type ?? a.Type ?? (d == null ? void 0 : d.type) ?? "user") === "system" ? "system" : "user", i = a.attribute ?? a.Attribute ?? (d == null ? void 0 : d.attribute) ?? "", u = String(i).trim();
+  return !u || !A.test(u) ? null : {
+    id: Number(a.id) || n + 1,
+    variableInstanceId: a.variableInstanceId ?? a.VariableInstanceId,
+    variable: x === "system" ? `{%${u}%}` : `{{${u}}}`,
+    type: x,
+    attribute: u,
+    default: String(a.default ?? a.Default ?? a.value ?? "")
   };
 }
-function Ye(o) {
-  if (!Array.isArray(o)) return [];
-  const a = /* @__PURE__ */ new Map();
-  return o.forEach((s, l) => {
-    const c = nr(s, l);
-    c && a.set(`${c.type}:${c.attribute}`, c);
-  }), Array.from(a.values()).map((s, l) => ({
-    ...s,
-    id: l + 1
-  }));
+function it(a) {
+  return Array.isArray(a) ? a.map((n, s) => Er(n, s)).filter((n) => !!n).map((n, s) => ({
+    ...n,
+    id: s + 1,
+    variableInstanceId: n.variableInstanceId || we(n.type, n.attribute, s)
+  })) : [];
 }
-function sr(o) {
-  const a = o || "", s = /* @__PURE__ */ new Map(), l = (h, p) => {
-    const f = `${p}:${h}`;
-    s.has(f) || s.set(f, {
-      id: s.size + 1,
-      variable: p === "system" ? `{%${h}%}` : `{{${h}}}`,
-      type: p,
-      attribute: h,
-      default: ""
-    });
+function de(a) {
+  const n = a || "", s = [], d = (i, u, p) => {
+    s.push({ attribute: i, type: u, start: p });
   };
   let c;
-  for (ne.lastIndex = 0; c = ne.exec(a); ) {
-    const h = c.index, p = h + c[0].length;
-    if (!se(a, h, p, "{", "}")) continue;
-    const f = c[1].trim();
-    !f || !H.test(f) || l(f, "user");
+  for (Ve.lastIndex = 0; c = Ve.exec(n); ) {
+    const i = c.index, u = i + c[0].length;
+    if (!Te(n, i, u, "{", "}")) continue;
+    const p = c[1].trim();
+    !p || !A.test(p) || d(p, "user", i);
   }
-  let g;
-  for (Ue.lastIndex = 0; g = Ue.exec(a); ) {
-    const h = g.index, p = h + g[0].length;
-    if (!se(a, h, p, "{", "}")) continue;
-    const f = g[1].trim();
-    !f || !H.test(f) || l(f, "system");
+  let x;
+  for (nt.lastIndex = 0; x = nt.exec(n); ) {
+    const i = x.index, u = i + x[0].length;
+    if (!Te(n, i, u, "{", "}")) continue;
+    const p = x[1].trim();
+    !p || !A.test(p) || d(p, "system", i);
   }
-  return Array.from(s.values());
-}
-function dr(o, a) {
-  const s = /* @__PURE__ */ new Map();
-  return a.forEach((l) => {
-    s.set(`${l.type}:${l.attribute}`, l.default ?? "");
-  }), o.map((l, c) => ({
-    ...l,
-    id: c + 1,
-    default: s.get(`${l.type}:${l.attribute}`) ?? l.default ?? ""
+  return s.sort((i, u) => i.start - u.start), s.map((i, u) => ({
+    id: u + 1,
+    variableInstanceId: wr(i.type, i.attribute, i.start),
+    variable: i.type === "system" ? `{%${i.attribute}%}` : `{{${i.attribute}}}`,
+    type: i.type,
+    attribute: i.attribute,
+    default: ""
   }));
 }
-function cr(o) {
-  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function Ie(a, n) {
+  const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
+  return n.forEach((c) => {
+    const x = { item: c, consumed: !1 };
+    if (c.variableInstanceId) {
+      const p = s.get(c.variableInstanceId) ?? [];
+      p.push(x), s.set(c.variableInstanceId, p);
+    }
+    const i = `${c.type}:${c.attribute}`, u = d.get(i) ?? [];
+    u.push(x), d.set(i, u);
+  }), a.map((c, x) => {
+    var N;
+    const i = `${c.type}:${c.attribute}`, u = c.variableInstanceId ? (N = s.get(c.variableInstanceId)) == null ? void 0 : N.find((g) => !g.consumed) : void 0, p = (d.get(i) ?? []).find((g) => !g.consumed), w = u ?? p;
+    return w && (w.consumed = !0), {
+      ...c,
+      id: x + 1,
+      variableInstanceId: c.variableInstanceId || we(c.type, c.attribute, x),
+      default: c.type === "system" ? "" : (w == null ? void 0 : w.item.default) ?? c.default ?? ""
+    };
+  });
+}
+function Vr(a) {
+  return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function ur(o, a) {
-  const s = /* @__PURE__ */ new Map();
-  return a.forEach((l) => {
-    l.type === "user" && s.set(l.attribute, l.default ?? "");
-  }), (o || "").replace(ne, (l, c, g, h) => {
-    const p = g + l.length;
-    if (!se(h, g, p, "{", "}")) return l;
-    const f = String(c).trim();
-    if (!f || !H.test(f)) return l;
-    const R = s.get(f);
-    return R === void 0 || R === "" ? l : cr(R);
+function lt(a, n) {
+  const s = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map();
+  n.forEach((i) => {
+    i.type === "user" && (i.variableInstanceId && s.set(i.variableInstanceId, i.default ?? ""), d.has(i.attribute) || d.set(i.attribute, i.default ?? ""));
+  });
+  const c = de(a), x = /* @__PURE__ */ new Map();
+  return c.forEach((i) => {
+    const u = Number(String(i.variableInstanceId ?? "").split("-at-")[1]);
+    Number.isFinite(u) && x.set(u, i);
+  }), (a || "").replace(Ve, (i, u, p, w) => {
+    var Z;
+    const N = p + i.length;
+    if (!Te(w, p, N, "{", "}")) return i;
+    const g = String(u).trim();
+    if (!g || !A.test(g)) return i;
+    const F = (Z = x.get(p)) == null ? void 0 : Z.variableInstanceId, z = (F ? s.get(F) : void 0) ?? (n.filter((l) => l.type === "user" && l.attribute === g).length === 1 ? d.get(g) : void 0);
+    return z === void 0 || z === "" ? i : Vr(z);
   });
 }
-function qe(o, a, s = "") {
-  const l = o.trim();
-  if (!l || !H.test(l)) return null;
-  const c = a === "builtin" ? "system" : "user";
+function st(a, n, s = "") {
+  const d = a.trim();
+  if (!d || !A.test(d)) return null;
+  const c = n === "builtin" ? "system" : "user";
   return {
     id: 1,
-    variable: Qe(l, a),
+    variableInstanceId: we(c, d, 0),
+    variable: mt(d, n),
     type: c,
-    attribute: l,
+    attribute: d,
     default: c === "system" ? "" : s
   };
 }
-function mr(o) {
-  const a = o.trim();
-  return a ? ae.some((s) => s.items.some((l) => l.name === a)) : !1;
+function Tr(a) {
+  const n = a.trim();
+  return n ? Ee.some((s) => s.items.some((d) => d.name === n)) : !1;
 }
-function hr(o, a) {
-  const s = o.trim();
-  return a === "user" && s === Ke ? `<a href="{{${Ke}}">Unsubscribe Link</a>` : Qe(s, a);
+function Cr(a, n) {
+  const s = a.trim();
+  return n === "user" && s === at ? `<a href="{{${at}}}">Unsubscribe Link</a>` : mt(s, n);
 }
-const br = V(qt), pr = V(Xt), fr = V(Jt), xr = V(Qt), gr = V(Zt), yr = V(er), vr = V(tr), Er = V(rr), Tr = V(or), de = {
+function we(a, n, s) {
+  return `html-${a}-${n}-${s + 1}`;
+}
+function wr(a, n, s) {
+  return `html-${a}-${n}-at-${s}`;
+}
+const Hr = L(cr), Sr = L(dr), Mr = L(ur), Dr = L(mr), Lr = L(hr), kr = L(br), Br = L(pr), Ar = L(fr), Fr = L(xr), Ce = {
   // 浅色主题
-  xcodeLight: Nt,
-  vscodeLight: Ft,
-  tokyoNightDay: Bt,
-  gruvboxLight: Rt,
-  noctisLilac: Ot,
-  bbedit: zt,
+  xcodeLight: Jt,
+  vscodeLight: Xt,
+  tokyoNightDay: Kt,
+  gruvboxLight: Yt,
+  noctisLilac: qt,
+  bbedit: Ut,
   // 深色主题
-  abcdef: At,
-  basicDark: kt,
-  dracula: Je,
-  tomorrowNightBlue: It,
-  xcodeDark: Mt
-}, Vr = {
+  abcdef: Gt,
+  basicDark: jt,
+  dracula: ut,
+  tomorrowNightBlue: Wt,
+  xcodeDark: _t
+}, Rr = {
   xcodeLight: "Xcode Light (Light)",
   vscodeLight: "VSCode Light (Light)",
   tokyoNightDay: "Tokyo Night Day (Light)",
   gruvboxLight: "Gruvbox Light (Light)",
   noctisLilac: "Noctis Lilac (Light)",
   bbedit: "BBEdit (Light)"
-}, Cr = {
+}, $r = {
   abcdef: "ABCDEF (Dark)",
   basicDark: "Basic Dark (Dark)",
   dracula: "Dracula (Dark)",
   tomorrowNightBlue: "Tomorrow Night Blue (Dark)",
   xcodeDark: "Xcode Dark (Dark)"
-}, Ze = "html-editor-theme", Xe = "dracula";
-function wr(o = Xe) {
-  const a = o && de[o] ? o : Xe;
-  if (typeof window > "u") return a;
+}, ht = "html-editor-theme", ct = "dracula";
+function Nr(a = ct) {
+  const n = a && Ce[a] ? a : ct;
+  if (typeof window > "u") return n;
   try {
-    const s = localStorage.getItem(Ze);
-    if (s && de[s]) return s;
+    const s = localStorage.getItem(ht);
+    if (s && Ce[s]) return s;
   } catch {
     console.error("Failed to get HTML Editor stored theme");
   }
-  return a;
+  return n;
 }
-function Sr(o) {
+function zr(a) {
   try {
-    localStorage.setItem(Ze, o);
+    localStorage.setItem(ht, a);
   } catch {
-    console.error("Failed to set HTML Editor stored theme", o);
+    console.error("Failed to set HTML Editor stored theme", a);
   }
 }
-function Hr({
-  value: o,
-  onChange: a,
+function Or({
+  value: a,
+  onChange: n,
   language: s = "zh",
-  initialMode: l = "split",
+  initialMode: d = "split",
   initialDevice: c = "desktop",
-  codeEditorHeight: g = "100%",
-  previewHeight: h = "100%",
-  sx: p,
-  showToolbar: f = !0,
-  initialTheme: R,
-  initialRightTab: et = "preview",
-  variables: N,
-  onVariablesChange: $,
-  requireVariableDefaults: ce = !0
-}, tt) {
-  var ve, Ee, Te, Ve, Ce, we, Se, He, Le, De, Me, Ie, ke, Ae, ze, Oe, Re, Be;
-  const n = (e, t) => lr(e, t, s), [v, rt] = y(l), [D, ot] = y(c), [ue, it] = y(() => wr(R)), [x, me] = y(o), [he, M] = y(et), [u, be] = y(() => Ye(N)), [lt, at] = y(!1), [nt, st] = y("custom"), [I, pe] = y(""), [k, fe] = y(""), [Z, _] = y(!1), [ee, P] = y(!1), B = oe(null), xe = oe(null), W = oe(null);
-  J(() => {
-    o !== x && me(o);
-  }, [o]), J(() => {
-    N !== void 0 && be(Ye(N));
-  }, [N]);
-  const C = w(
+  codeEditorHeight: x = "100%",
+  previewHeight: i = "100%",
+  sx: u,
+  showToolbar: p = !0,
+  initialTheme: w,
+  initialRightTab: N = "preview",
+  variables: g,
+  onVariablesChange: F,
+  requireVariableDefaults: z = !0
+}, Z) {
+  var Re, $e, Ne, ze, Oe, Pe, _e, We, je, Ge, Ue, qe, Ye, Ke, Xe, Je, Qe, Ze;
+  const l = (e, t) => yr(e, t, s), [H, pt] = E(d), [O, ft] = E(c), [He, xt] = E(() => Nr(w)), [T, ue] = E(a), [ee, P] = E(N), [C, Se] = E(() => it(g)), [gt, vt] = E(!1), [yt, It] = E(null), [_, Me] = E(""), [W, De] = E(""), [me, te] = E(!1), [he, re] = E(!1), U = $(null), be = $(null), R = $(C), Le = $(null), ke = $(null), pe = $(!1), oe = $(null);
+  X(() => {
+    a !== T && ue(a);
+  }, [a]), X(() => {
+    if (g === void 0) return;
+    const e = it(g);
+    R.current = e, Se(e);
+  }, [g]);
+  const k = D(
     (e) => {
-      const t = e.map((i, b) => ({
-        ...i,
-        id: b + 1,
-        default: i.type === "system" ? "" : i.default ?? ""
+      const t = e.map((r, h) => ({
+        ...r,
+        id: h + 1,
+        default: r.type === "system" ? "" : r.default ?? ""
       }));
-      return be(t), $ == null || $(t), t;
+      return R.current = t, Se(t), F == null || F(t), t;
     },
-    [$]
-  ), te = (e) => {
-    me(e), B.current && clearTimeout(B.current), B.current = setTimeout(() => {
-      a == null || a(e);
+    [F]
+  ), S = D(() => {
+    var t, r;
+    const e = (r = (t = be.current) == null ? void 0 : t.state) == null ? void 0 : r.doc;
+    return e && typeof e.toString == "function" ? e.toString() : T;
+  }, [T]), fe = (e) => {
+    ue(e), U.current && clearTimeout(U.current), U.current = setTimeout(() => {
+      n == null || n(e);
     }, 300);
-  }, j = w(
-    (e = x) => {
-      const t = sr(e), i = dr(t, u);
-      return C(i);
+  }, q = D(
+    (e) => {
+      const t = de(e ?? S()), r = Ie(t, R.current);
+      return k(r);
     },
-    [u, x, C]
-  ), G = w(() => {
-    const e = j(x), t = ce ? e.filter((i) => i.type === "user" && i.default.trim() === "") : [];
-    return at(t.length > 0), t.length > 0 && M("variables"), {
-      valid: t.length === 0,
-      variables: e,
-      missing: t
+    [S, k]
+  ), ae = D(() => {
+    const e = S();
+    e !== T && ue(e);
+    const t = q(e), r = z ? t.filter((h) => h.type === "user" && h.default.trim() === "") : [];
+    return vt(r.length > 0), r.length > 0 && P("variables"), {
+      valid: r.length === 0,
+      variables: t,
+      missing: r
     };
-  }, [x, ce, j]), dt = w(() => {
-    G(), M("variables");
-  }, [G]);
-  J(() => () => {
-    B.current && clearTimeout(B.current);
+  }, [S, T, z, q]), Et = D(() => {
+    pe.current = !0, ae(), P("variables");
+  }, [ae]);
+  X(() => {
+    if (ee !== "variables" || !pe.current) return;
+    const e = window.requestAnimationFrame(() => {
+      const t = Le.current, r = ke.current;
+      t && r && t.scrollTo({
+        top: Math.max(r.offsetTop - 8, 0),
+        behavior: "auto"
+      }), pe.current = !1;
+    });
+    return () => window.cancelAnimationFrame(e);
+  }, [ee, C.length]), X(() => () => {
+    U.current && clearTimeout(U.current);
   }, []);
-  const ct = (e) => {
-    var X, Fe, Ne;
+  const Vt = (e) => {
+    var y, I, Y;
     const t = e || "";
-    let i = t;
+    let r = t;
     if (!t.trim())
-      i = "<!DOCTYPE html><html><head></head><body></body></html>";
+      r = "<!DOCTYPE html><html><head></head><body></body></html>";
     else {
-      const T = new DOMParser().parseFromString(t, "text/html"), re = ((X = T.documentElement) == null ? void 0 : X.tagName.toLowerCase()) === "html", Tt = ((Fe = T.head) == null ? void 0 : Fe.tagName.toLowerCase()) === "head", Vt = ((Ne = T.body) == null ? void 0 : Ne.tagName.toLowerCase()) === "body";
-      if (!re || !Tt || !Vt) {
-        const Ct = T.body ? T.body.innerHTML : t;
-        i = `<!DOCTYPE html><html><head>${T.head ? T.head.innerHTML : ""}</head><body>${Ct}</body></html>`;
+      const M = new DOMParser().parseFromString(t, "text/html"), ge = ((y = M.documentElement) == null ? void 0 : y.tagName.toLowerCase()) === "html", Ft = ((I = M.head) == null ? void 0 : I.tagName.toLowerCase()) === "head", Rt = ((Y = M.body) == null ? void 0 : Y.tagName.toLowerCase()) === "body";
+      if (!ge || !Ft || !Rt) {
+        const $t = M.body ? M.body.innerHTML : t;
+        r = `<!DOCTYPE html><html><head>${M.head ? M.head.innerHTML : ""}</head><body>${$t}</body></html>`;
       } else
-        i = `<!DOCTYPE html>${T.documentElement.outerHTML}`;
+        r = `<!DOCTYPE html>${M.documentElement.outerHTML}`;
     }
-    const b = ["script", "iframe", "object", "embed", "canvas"], z = new DOMParser().parseFromString(i, "text/html");
-    return b.forEach(($e) => {
-      z.querySelectorAll($e).forEach((re) => re.remove());
-    }), i = `<!DOCTYPE html>${z.documentElement.outerHTML}`, i;
-  }, K = Q(
-    () => ur(x, u),
-    [u, x]
-  ), U = Q(() => ct(K), [K]);
-  Ht(
-    tt,
+    const h = ["script", "iframe", "object", "embed", "canvas"], b = new DOMParser().parseFromString(r, "text/html");
+    return h.forEach((K) => {
+      b.querySelectorAll(K).forEach((ge) => ge.remove());
+    }), r = `<!DOCTYPE html>${b.documentElement.outerHTML}`, r;
+  }, Be = J(
+    () => lt(T, C),
+    [C, T]
+  ), ne = J(() => Vt(Be), [Be]);
+  zt(
+    Z,
     () => ({
-      getValue: () => x,
-      getPreviewHtml: () => K,
-      scanVariables: () => j(x),
-      getVariables: (e) => (e == null || e(u), u),
-      validateVariables: G,
-      showVariables: () => M("variables")
+      getValue: () => S(),
+      getPreviewHtml: () => lt(S(), R.current),
+      scanVariables: () => q(S()),
+      getVariables: (e) => {
+        const t = q(S());
+        return e == null || e(t), t;
+      },
+      validateVariables: ae,
+      showVariables: () => P("variables")
     }),
-    [u, x, K, j, G]
-  ), J(() => {
-    W.current && W.current.srcdoc !== U && (W.current.srcdoc = U);
-  }, [U]);
-  const ut = (e, t) => {
-    t !== null && rt(t);
-  }, mt = (e, t) => {
-    (t === "desktop" || t === "mobile") && ot(t);
-  }, Y = w(
+    [S, q, ae]
+  ), X(() => {
+    oe.current && oe.current.srcdoc !== ne && (oe.current.srcdoc = ne);
+  }, [ne]);
+  const Tt = (e, t) => {
+    t !== null && pt(t);
+  }, Ct = (e, t) => {
+    (t === "desktop" || t === "mobile") && ft(t);
+  }, ie = D(
     (e) => {
-      var i, b;
-      const t = xe.current;
+      var h, v;
+      const t = be.current;
       if (t != null && t.state && (t != null && t.dispatch)) {
-        const L = (i = t.state.selection) == null ? void 0 : i.main, z = (L == null ? void 0 : L.from) ?? t.state.doc.length, X = (L == null ? void 0 : L.to) ?? z;
-        t.dispatch({
-          changes: { from: z, to: X, insert: e },
-          selection: { anchor: z + e.length }
-        }), (b = t.focus) == null || b.call(t), te(t.state.doc.toString());
-        return;
+        const b = (h = t.state.selection) == null ? void 0 : h.main, y = t.state.doc.toString(), I = (b == null ? void 0 : b.from) ?? t.state.doc.length, Y = (b == null ? void 0 : b.to) ?? I, K = `${y.slice(0, I)}${e}${y.slice(Y)}`;
+        return t.dispatch({
+          changes: { from: I, to: Y, insert: e },
+          selection: { anchor: I + e.length }
+        }), (v = t.focus) == null || v.call(t), fe(K), K;
       }
-      te(`${x}${e}`);
+      const r = `${T}${e}`;
+      return fe(r), r;
     },
-    [x]
-  ), ht = w(
-    (e, t, i) => {
-      C(
-        u.map(
-          (b) => b.attribute === e && b.type === t ? { ...b, default: i } : b
+    [T]
+  ), wt = D(
+    (e, t) => {
+      const r = R.current;
+      k(
+        r.map(
+          (h) => h.variableInstanceId === e ? { ...h, default: t } : h
         )
       );
     },
-    [u, C]
-  ), bt = w(
+    [k]
+  ), Ht = D(
     (e, t) => {
-      const i = qe(e, t);
-      i && (Y(hr(e, t)), u.some((b) => b.attribute === i.attribute && b.type === i.type) || C([...u, i]), M("variables"));
+      if (!st(e, t)) return;
+      const h = ie(Cr(e, t)), v = de(h), b = Ie(v, R.current);
+      k(b), P("variables");
     },
-    [u, Y, C]
-  ), q = Q(() => {
-    const e = I.trim();
-    return e ? H.test(e) ? mr(e) || u.some((t) => t.type === "user" && t.attribute === e) ? n("text.variables.customVariableNameDuplicate") : "" : n("text.variables.customVariableNameInvalid") : n("text.variables.customVariableNameRequired");
-  }, [I, u]), pt = w(() => {
-    const e = k.trim();
-    if (_(!0), P(!0), q || e === "") return;
-    const t = qe(I.trim(), "user", e);
-    t && (Y(t.variable), C([...u, t]), pe(""), fe(""), _(!1), P(!1), M("variables"));
-  }, [k, I, q, u, Y, C]), ft = Q(() => [{ id: "custom", items: u.filter((t) => t.type === "user").filter((t) => !ae.some((i) => i.items.some((b) => b.name === t.attribute))).map((t) => ({
-    name: t.attribute,
-    labelKey: t.attribute,
-    kind: "user"
-  })) }, ...ae], [u]), xt = (e) => e === "custom" ? "text.variables.groupCustom" : e === "contacts" ? "text.variables.groupContacts" : e === "email" ? "text.variables.groupEmail" : e === "organization" ? "text.variables.groupOrganization" : e === "date" ? "text.variables.groupDate" : "text.variables.groupLinks", E = $t(), gt = D === "desktop" || D === "mobile" ? D : "desktop", yt = v === "split" || v === "code" || v === "preview" ? v : "split";
-  (Ee = (ve = E.palette) == null ? void 0 : ve.action) == null || Ee.selected, (Ve = (Te = E.palette) == null ? void 0 : Te.primary) == null || Ve.main, (we = (Ce = E.palette) == null ? void 0 : Ce.action) == null || we.selected, (He = (Se = E.palette) == null ? void 0 : Se.background) == null || He.paper, (De = (Le = E.palette) == null ? void 0 : Le.text) == null || De.primary, (Ie = (Me = E.palette) == null ? void 0 : Me.action) == null || Ie.hover;
-  const A = {
+    [ie, k]
+  ), le = J(() => {
+    const e = _.trim();
+    return e ? A.test(e) ? Tr(e) || C.some((t) => t.type === "user" && t.attribute === e) ? l("text.variables.customVariableNameDuplicate") : "" : l("text.variables.customVariableNameInvalid") : l("text.variables.customVariableNameRequired");
+  }, [_, C]), St = D(() => {
+    const e = W.trim();
+    if (te(!0), re(!0), le || e === "") return;
+    const t = st(_.trim(), "user", e);
+    if (!t) return;
+    const r = ie(t.variable), h = de(r), v = Ie(h, R.current);
+    let b = -1;
+    for (let y = v.length - 1; y >= 0; y -= 1) {
+      const I = v[y];
+      if (I.type === t.type && I.attribute === t.attribute && I.default === "") {
+        b = y;
+        break;
+      }
+    }
+    k(
+      v.map(
+        (y, I) => I === b ? { ...y, default: t.default } : y
+      )
+    ), Me(""), De(""), te(!1), re(!1), P("variables");
+  }, [W, _, le, ie, k]), Mt = J(() => {
+    const e = /* @__PURE__ */ new Set();
+    return [{ id: "custom", items: C.filter((r) => r.type === "user").filter((r) => !Ee.some((h) => h.items.some((v) => v.name === r.attribute))).filter((r) => e.has(r.attribute) ? !1 : (e.add(r.attribute), !0)).map((r) => ({
+      name: r.attribute,
+      labelKey: r.attribute,
+      kind: "user"
+    })) }, ...Ee];
+  }, [C]), se = J(
+    () => C.filter((e) => e.type !== "system"),
+    [C]
+  ), Dt = (e) => e === "custom" ? "text.variables.groupCustom" : e === "contacts" ? "text.variables.groupContacts" : e === "email" ? "text.variables.groupEmail" : e === "organization" ? "text.variables.groupOrganization" : e === "date" ? "text.variables.groupDate" : "text.variables.groupLinks", V = er(), Lt = O === "desktop" || O === "mobile" ? O : "desktop", kt = H === "split" || H === "code" || H === "preview" ? H : "split";
+  ($e = (Re = V.palette) == null ? void 0 : Re.action) == null || $e.selected, (ze = (Ne = V.palette) == null ? void 0 : Ne.primary) == null || ze.main, (Pe = (Oe = V.palette) == null ? void 0 : Oe.action) == null || Pe.selected, (We = (_e = V.palette) == null ? void 0 : _e.background) == null || We.paper, (Ge = (je = V.palette) == null ? void 0 : je.text) == null || Ge.primary, (qe = (Ue = V.palette) == null ? void 0 : Ue.action) == null || qe.hover;
+  const j = {
     tooltip: {
       sx: {
         fontSize: "13px",
         fontWeight: 400,
         lineHeight: 1.45,
         maxWidth: 360,
-        backgroundColor: Ge(((Ae = (ke = E.palette) == null ? void 0 : ke.text) == null ? void 0 : Ae.primary) ?? "#1F1F21", 0.9),
-        color: ((Oe = (ze = E.palette) == null ? void 0 : ze.common) == null ? void 0 : Oe.white) ?? "#fff"
+        backgroundColor: ce(((Ke = (Ye = V.palette) == null ? void 0 : Ye.text) == null ? void 0 : Ke.primary) ?? "#1F1F21", 0.9),
+        color: ((Je = (Xe = V.palette) == null ? void 0 : Xe.common) == null ? void 0 : Je.white) ?? "#fff"
       }
     },
     arrow: {
-      sx: { color: Ge(((Be = (Re = E.palette) == null ? void 0 : Re.text) == null ? void 0 : Be.primary) ?? "#1F1F21", 0.9) }
+      sx: { color: ce(((Ze = (Qe = V.palette) == null ? void 0 : Qe.text) == null ? void 0 : Ze.primary) ?? "#1F1F21", 0.9) }
+    }
+  }, xe = {
+    component: "div",
+    sx: {
+      mt: 0.5,
+      mx: 0,
+      minHeight: 18,
+      lineHeight: 1.5
     }
-  }, ge = () => /* @__PURE__ */ m(
-    d,
+  }, Ae = () => /* @__PURE__ */ f(
+    m,
     {
       sx: {
-        height: g,
+        height: x,
         minHeight: 0,
         display: "flex",
         flexDirection: "column",
         position: "relative",
-        borderRight: v === "split" ? "1px solid" : "none",
+        borderRight: H === "split" ? "1px solid" : "none",
         borderColor: "divider"
       },
       children: [
-        /* @__PURE__ */ r(
-          d,
+        /* @__PURE__ */ o(
+          m,
           {
             sx: {
               flex: 1,
@@ -374,16 +446,16 @@ function Hr({
                 opacity: 1
               }
             },
-            children: /* @__PURE__ */ r(
-              Lt,
+            children: /* @__PURE__ */ o(
+              Ot,
               {
-                value: x,
+                value: T,
                 height: "100%",
-                extensions: [Dt()],
-                theme: de[ue] || Je,
-                onChange: te,
+                extensions: [Pt()],
+                theme: Ce[He] || ut,
+                onChange: fe,
                 onCreateEditor: (e) => {
-                  xe.current = e;
+                  be.current = e;
                 },
                 basicSetup: {
                   lineNumbers: !0,
@@ -395,13 +467,13 @@ function Hr({
             )
           }
         ),
-        /* @__PURE__ */ r(
-          ie,
+        /* @__PURE__ */ o(
+          ve,
           {
             size: "small",
             variant: "contained",
-            startIcon: /* @__PURE__ */ r(fr, { fontSize: "small" }),
-            onClick: dt,
+            startIcon: /* @__PURE__ */ o(Mr, { fontSize: "small" }),
+            onClick: Et,
             sx: {
               position: "absolute",
               right: 16,
@@ -410,33 +482,33 @@ function Hr({
               textTransform: "none",
               boxShadow: 3
             },
-            children: n("common.save")
+            children: l("common.save")
           }
         )
       ]
     }
-  ), vt = () => /* @__PURE__ */ r(d, { sx: {
-    height: h,
+  ), Bt = () => /* @__PURE__ */ o(m, { sx: {
+    height: i,
     overflow: "auto",
     backgroundColor: "#F5F5F5",
-    padding: D === "mobile" ? "32px 16px" : "16px",
+    padding: O === "mobile" ? "32px 16px" : "16px",
     display: "flex",
     justifyContent: "center"
-  }, children: /* @__PURE__ */ r(
-    d,
+  }, children: /* @__PURE__ */ o(
+    m,
     {
       sx: {
         width: "100%",
-        maxWidth: D === "mobile" ? "370px" : "100%",
-        height: D === "mobile" ? "800px" : "100%",
+        maxWidth: O === "mobile" ? "370px" : "100%",
+        height: O === "mobile" ? "800px" : "100%",
         border: "none",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ o(
         "iframe",
         {
-          ref: W,
-          srcDoc: U,
+          ref: oe,
+          srcDoc: ne,
           style: {
             width: "100%",
             height: "100%",
@@ -448,33 +520,38 @@ function Hr({
         }
       )
     }
-  ) }), Et = () => /* @__PURE__ */ m(
-    d,
+  ) }), At = () => /* @__PURE__ */ f(
+    m,
     {
+      ref: Le,
       sx: {
-        height: h,
+        flex: 1,
+        height: "100%",
+        minHeight: 0,
         overflow: "auto",
         backgroundColor: "background.paper",
-        p: 2
+        px: 2,
+        pt: 2,
+        pb: 6
       },
       children: [
-        /* @__PURE__ */ r(d, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ m(d, { sx: { minWidth: 0 }, children: [
-          /* @__PURE__ */ m(d, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
-            /* @__PURE__ */ r(S, { variant: "subtitle1", sx: { fontWeight: 700 }, children: n("htmlEditor.variables.title") }),
-            /* @__PURE__ */ r(O, { title: n("htmlEditor.variables.help"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(d, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ r(gr, { fontSize: "small" }) }) })
+        /* @__PURE__ */ o(m, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1.5 }, children: /* @__PURE__ */ f(m, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ f(m, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+            /* @__PURE__ */ o(B, { variant: "subtitle1", sx: { fontWeight: 700 }, children: l("htmlEditor.variables.title") }),
+            /* @__PURE__ */ o(G, { title: l("htmlEditor.variables.help"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(m, { component: "span", sx: { display: "inline-flex", color: "text.secondary", cursor: "help" }, children: /* @__PURE__ */ o(Lr, { fontSize: "small" }) }) })
           ] }),
-          /* @__PURE__ */ r(S, { variant: "body2", color: "text.secondary", children: n("htmlEditor.variables.scanHint") })
+          /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.secondary", children: l("htmlEditor.variables.scanHint") })
         ] }) }),
-        /* @__PURE__ */ r(d, { sx: { mb: 2 }, children: ft.map((e) => {
-          const t = nt === e.id;
-          return /* @__PURE__ */ m(
-            Gt,
+        /* @__PURE__ */ o(m, { sx: { mb: 2 }, children: Mt.map((e) => {
+          const t = yt === e.id;
+          return /* @__PURE__ */ f(
+            nr,
             {
               disableGutters: !0,
               square: !0,
               elevation: 0,
               expanded: t,
-              onChange: (i, b) => st(b ? e.id : null),
+              onChange: (r, h) => It(h ? e.id : null),
               sx: {
                 "&:before": { display: "none" },
                 border: 1,
@@ -484,64 +561,66 @@ function Hr({
                 mb: 1
               },
               children: [
-                /* @__PURE__ */ r(
-                  Kt,
+                /* @__PURE__ */ o(
+                  ir,
                   {
-                    expandIcon: /* @__PURE__ */ r(xr, { fontSize: "small" }),
+                    expandIcon: /* @__PURE__ */ o(Dr, { fontSize: "small" }),
                     sx: {
                       minHeight: 44,
                       "& .MuiAccordionSummary-content": { my: 1 }
                     },
-                    children: /* @__PURE__ */ r(S, { variant: "body2", color: "text.primary", children: n(xt(e.id)) })
+                    children: /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.primary", children: l(Dt(e.id)) })
                   }
                 ),
-                /* @__PURE__ */ m(Ut, { sx: { pt: 0, pb: 1.25 }, children: [
-                  e.id === "custom" && /* @__PURE__ */ m(d, { sx: { mb: 1 }, children: [
-                    /* @__PURE__ */ r(
-                      le,
+                /* @__PURE__ */ f(lr, { sx: { pt: 0, pb: 1.25 }, children: [
+                  e.id === "custom" && /* @__PURE__ */ f(m, { sx: { mb: 1 }, children: [
+                    /* @__PURE__ */ o(
+                      ye,
                       {
                         size: "small",
                         fullWidth: !0,
-                        label: n("text.variables.customVariableName"),
-                        value: I,
+                        label: l("text.variables.customVariableName"),
+                        value: _,
                         placeholder: "e.g. order_id",
-                        onChange: (i) => {
-                          pe(i.target.value), !Z && i.target.value.trim() !== "" && _(!0);
+                        onChange: (r) => {
+                          Me(r.target.value), !me && r.target.value.trim() !== "" && te(!0);
                         },
                         onBlur: () => {
-                          I.trim() !== "" && _(!0);
+                          _.trim() !== "" && te(!0);
                         },
-                        error: Z && !!q,
-                        helperText: Z && q || " ",
+                        error: me && !!le,
+                        helperText: me && le || " ",
+                        FormHelperTextProps: xe,
                         sx: { mb: 1 }
                       }
                     ),
-                    /* @__PURE__ */ r(
-                      le,
+                    /* @__PURE__ */ o(
+                      ye,
                       {
                         size: "small",
                         fullWidth: !0,
-                        label: n("text.variables.defaultValueLabel"),
-                        value: k,
-                        placeholder: n("text.variables.defaultPlaceholder"),
-                        onChange: (i) => {
-                          fe(i.target.value), !ee && i.target.value.trim() !== "" && P(!0);
+                        label: l("text.variables.defaultValueLabel"),
+                        value: W,
+                        placeholder: l("text.variables.defaultPlaceholder"),
+                        onChange: (r) => {
+                          De(r.target.value), !he && r.target.value.trim() !== "" && re(!0);
                         },
                         onBlur: () => {
-                          k.trim() !== "" && P(!0);
+                          W.trim() !== "" && re(!0);
                         },
-                        error: ee && k.trim() === "",
-                        helperText: ee && k.trim() === "" ? n("text.variables.defaultRequired") : " "
+                        error: he && W.trim() === "",
+                        helperText: he && W.trim() === "" ? l("text.variables.defaultRequired") : " ",
+                        FormHelperTextProps: xe
                       }
                     ),
-                    /* @__PURE__ */ r(
-                      ie,
+                    /* @__PURE__ */ o(
+                      ve,
                       {
                         fullWidth: !0,
                         size: "small",
                         variant: "outlined",
-                        startIcon: /* @__PURE__ */ r(br, { fontSize: "small" }),
-                        onClick: pt,
+                        startIcon: /* @__PURE__ */ o(Hr, { fontSize: "small" }),
+                        onClick: St,
                         sx: {
                           justifyContent: "center",
                           borderColor: "divider",
@@ -549,28 +628,37 @@ function Hr({
                           color: "text.secondary",
                           textTransform: "none"
                         },
-                        children: n("text.variables.addCustomVariable")
+                        children: l("text.variables.addCustomVariable")
                       }
                     )
                   ] }),
-                  e.items.length > 0 && /* @__PURE__ */ r(d, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((i) => /* @__PURE__ */ r(
-                    ie,
+                  e.items.length > 0 && /* @__PURE__ */ o(m, { sx: { display: "grid", gap: 0.75 }, children: e.items.map((r) => /* @__PURE__ */ o(
+                    ve,
                     {
                       size: "small",
                       variant: "outlined",
-                      onClick: () => bt(i.name, i.kind),
+                      onClick: () => Ht(r.name, r.kind),
                       sx: {
                         justifyContent: "flex-start",
                         borderColor: "divider",
                         color: "text.secondary",
                         textTransform: "none"
                       },
-                      children: /* @__PURE__ */ m(d, { sx: { textAlign: "left", minWidth: 0 }, children: [
-                        /* @__PURE__ */ r(S, { variant: "body2", color: "text.primary", children: e.id === "custom" ? i.name : n(i.labelKey) }),
-                        /* @__PURE__ */ r(S, { variant: "caption", color: "text.secondary", sx: { fontFamily: "monospace" }, children: i.kind === "builtin" ? `{%${i.name}%}` : `{{${i.name}}}` })
+                      children: /* @__PURE__ */ f(m, { sx: { textAlign: "left", minWidth: 0 }, children: [
+                        /* @__PURE__ */ o(B, { component: "div", variant: "body2", color: "text.primary", children: e.id === "custom" ? r.name : l(r.labelKey) }),
+                        /* @__PURE__ */ o(
+                          B,
+                          {
+                            component: "div",
+                            variant: "caption",
+                            color: "text.secondary",
+                            sx: { fontFamily: "monospace" },
+                            children: r.kind === "builtin" ? `{%${r.name}%}` : `{{${r.name}}}`
+                          }
+                        )
                       ] })
                     },
-                    `${e.id}:${i.name}`
+                    `${e.id}:${r.name}`
                   )) })
                 ] })
               ]
@@ -578,11 +666,11 @@ function Hr({
             e.id
           );
         }) }),
-        /* @__PURE__ */ r(Yt, { sx: { my: 2 } }),
-        /* @__PURE__ */ r(S, { variant: "subtitle2", sx: { mb: 1 }, children: n("htmlEditor.variables.detected") }),
-        /* @__PURE__ */ r(S, { variant: "body2", color: "text.secondary", sx: { mb: 1.25 }, children: n("htmlEditor.variables.defaultHelp") }),
-        u.length === 0 ? /* @__PURE__ */ r(
-          d,
+        /* @__PURE__ */ o(sr, { sx: { my: 2 } }),
+        /* @__PURE__ */ o(B, { component: "div", ref: ke, variant: "subtitle2", sx: { mb: 0.5 }, children: l("htmlEditor.variables.detected") }),
+        /* @__PURE__ */ o(B, { component: "div", variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: l("htmlEditor.variables.defaultHelp") }),
+        se.length === 0 ? /* @__PURE__ */ o(
+          m,
           {
             sx: {
               border: "1px dashed",
@@ -593,50 +681,81 @@ function Hr({
               fontSize: 14,
               textAlign: "center"
             },
-            children: n("htmlEditor.variables.empty")
+            children: l("htmlEditor.variables.empty")
           }
-        ) : /* @__PURE__ */ r(d, { sx: { display: "grid", gap: 1.5 }, children: u.map((e) => {
-          const t = lt && e.type === "user" && e.default.trim() === "";
-          return /* @__PURE__ */ m(
-            d,
+        ) : /* @__PURE__ */ o(m, { sx: { display: "grid", gap: 0.25 }, children: se.map((e, t) => {
+          const r = gt && e.type === "user" && e.default.trim() === "", h = se.filter((b) => b.type === e.type && b.attribute === e.attribute).length, v = se.slice(0, t + 1).filter((b) => b.type === e.type && b.attribute === e.attribute).length;
+          return /* @__PURE__ */ f(
+            m,
             {
               sx: {
                 display: "grid",
-                gap: 0.75,
-                p: 1.25,
+                gridTemplateColumns: { xs: "1fr", sm: "minmax(150px, 42%) 1fr" },
+                alignItems: r ? "flex-start" : "center",
+                gap: 1,
+                px: 1,
+                py: 0.75,
                 border: "1px solid",
-                borderColor: t ? "error.main" : "divider",
-                borderRadius: 1
+                borderColor: r ? "error.main" : "transparent",
+                borderRadius: 1,
+                borderBottomColor: r ? "error.main" : "divider",
+                backgroundColor: r ? ce(V.palette.error.main, 0.04) : "transparent",
+                transition: "background-color 120ms ease, border-color 120ms ease",
+                "&:hover": {
+                  backgroundColor: r ? ce(V.palette.error.main, 0.04) : "action.hover",
+                  borderColor: r ? "error.main" : "divider"
+                }
               },
               children: [
-                /* @__PURE__ */ r(S, { variant: "body2", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: e.variable }),
-                /* @__PURE__ */ r(
-                  le,
+                /* @__PURE__ */ o(
+                  B,
+                  {
+                    component: "div",
+                    variant: "body2",
+                    sx: {
+                      fontFamily: "monospace",
+                      fontSize: 13,
+                      lineHeight: 1.35,
+                      wordBreak: "break-all",
+                      color: r ? "error.main" : "text.primary"
+                    },
+                    children: h > 1 ? `${e.variable} (${v})` : e.variable
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  ye,
                   {
                     size: "small",
                     fullWidth: !0,
                     disabled: e.type === "system",
                     value: e.default,
-                    label: n("text.variables.defaultValueLabel"),
-                    placeholder: e.type === "system" ? n("htmlEditor.variables.systemDefault") : n("text.variables.defaultPlaceholder"),
-                    error: t,
-                    helperText: t ? n("text.variables.defaultRequired") : " ",
-                    onChange: (i) => ht(e.attribute, e.type, i.target.value)
+                    label: r ? l("text.variables.defaultValueLabel") : void 0,
+                    placeholder: e.type === "system" ? l("htmlEditor.variables.systemDefault") : l("text.variables.defaultPlaceholder"),
+                    error: r,
+                    helperText: r ? l("text.variables.defaultRequired") : void 0,
+                    FormHelperTextProps: xe,
+                    onChange: (b) => wt(e.variableInstanceId, b.target.value),
+                    sx: {
+                      "& .MuiInputBase-input": {
+                        py: 0.75,
+                        fontSize: 13
+                      }
+                    }
                   }
                 )
               ]
             },
-            `${e.type}:${e.attribute}`
+            e.variableInstanceId || `${e.type}:${e.attribute}:${e.id}`
           );
         }) })
       ]
     }
-  ), ye = () => /* @__PURE__ */ m(d, { sx: { height: h, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ m(
-      jt,
+  ), Fe = () => /* @__PURE__ */ f(m, { sx: { height: i, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ f(
+      ar,
       {
-        value: he,
-        onChange: (e, t) => M(t),
+        value: ee,
+        onChange: (e, t) => P(t),
         sx: {
           minHeight: 40,
           borderBottom: "1px solid",
@@ -648,15 +767,15 @@ function Hr({
           }
         },
         children: [
-          /* @__PURE__ */ r(je, { value: "preview", label: n("htmlEditor.tabs.preview") }),
-          /* @__PURE__ */ r(je, { value: "variables", label: n("htmlEditor.tabs.variables") })
+          /* @__PURE__ */ o(ot, { value: "preview", label: l("htmlEditor.tabs.preview") }),
+          /* @__PURE__ */ o(ot, { value: "variables", label: l("htmlEditor.tabs.variables") })
         ]
       }
     ),
-    /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, overflow: "hidden" }, children: he === "preview" ? vt() : Et() })
+    /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: ee === "preview" ? Bt() : At() })
   ] });
-  return /* @__PURE__ */ m(
-    d,
+  return /* @__PURE__ */ f(
+    m,
     {
       sx: {
         display: "flex",
@@ -665,11 +784,11 @@ function Hr({
         width: "100%",
         minHeight: 0,
         minWidth: 0,
-        ...p
+        ...u
       },
       children: [
-        f && /* @__PURE__ */ m(
-          d,
+        p && /* @__PURE__ */ f(
+          m,
           {
             sx: {
               display: "flex",
@@ -681,55 +800,55 @@ function Hr({
               backgroundColor: "background.paper"
             },
             children: [
-              /* @__PURE__ */ m(d, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                /* @__PURE__ */ m(
-                  _e,
+              /* @__PURE__ */ f(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ f(
+                  et,
                   {
-                    value: yt,
+                    value: kt,
                     exclusive: !0,
-                    onChange: ut,
+                    onChange: Tt,
                     size: "small",
-                    "aria-label": n("htmlEditor.mode.split"),
+                    "aria-label": l("htmlEditor.mode.split"),
                     children: [
-                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
-                        F,
+                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.splitView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                        Q,
                         {
                           value: "split",
-                          "aria-label": n("htmlEditor.mode.split"),
-                          children: /* @__PURE__ */ r(vr, { fontSize: "small" })
+                          "aria-label": l("htmlEditor.mode.split"),
+                          children: /* @__PURE__ */ o(Br, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
-                        F,
+                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.codeOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                        Q,
                         {
                           value: "code",
-                          "aria-label": n("htmlEditor.mode.code"),
-                          children: /* @__PURE__ */ r(pr, { fontSize: "small" })
+                          "aria-label": l("htmlEditor.mode.code"),
+                          children: /* @__PURE__ */ o(Sr, { fontSize: "small" })
                         }
                       ) }),
-                      /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
-                        F,
+                      /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.previewOnly"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                        Q,
                         {
                           value: "preview",
-                          "aria-label": n("htmlEditor.mode.preview"),
-                          children: /* @__PURE__ */ r(yr, { fontSize: "small" })
+                          "aria-label": l("htmlEditor.mode.preview"),
+                          children: /* @__PURE__ */ o(kr, { fontSize: "small" })
                         }
                       ) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ m(_t, { size: "small", sx: { minWidth: 140 }, children: [
-                  /* @__PURE__ */ r(Pt, { id: "theme-select-label", children: n("htmlEditor.theme") }),
-                  /* @__PURE__ */ m(
-                    Wt,
+                /* @__PURE__ */ f(tr, { size: "small", sx: { minWidth: 140 }, children: [
+                  /* @__PURE__ */ o(rr, { id: "theme-select-label", children: l("htmlEditor.theme") }),
+                  /* @__PURE__ */ f(
+                    or,
                     {
                       labelId: "theme-select-label",
                       id: "theme-select",
-                      value: ue,
-                      label: n("htmlEditor.theme"),
+                      value: He,
+                      label: l("htmlEditor.theme"),
                       onChange: (e) => {
                         const t = e.target.value;
-                        it(t), console.log("theme changed to", t), Sr(t);
+                        xt(t), zr(t);
                       },
                       sx: {
                         // fontSize: '0.875rem',
@@ -738,38 +857,38 @@ function Hr({
                         }
                       },
                       children: [
-                        /* @__PURE__ */ r(Pe, { children: n("htmlEditor.lightThemes") }),
-                        Object.entries(Vr).map(([e, t]) => /* @__PURE__ */ r(We, { value: e, children: t }, e)),
-                        /* @__PURE__ */ r(Pe, { children: n("htmlEditor.darkThemes") }),
-                        Object.entries(Cr).map(([e, t]) => /* @__PURE__ */ r(We, { value: e, children: t }, e))
+                        /* @__PURE__ */ o(tt, { children: l("htmlEditor.lightThemes") }),
+                        Object.entries(Rr).map(([e, t]) => /* @__PURE__ */ o(rt, { value: e, children: t }, e)),
+                        /* @__PURE__ */ o(tt, { children: l("htmlEditor.darkThemes") }),
+                        Object.entries($r).map(([e, t]) => /* @__PURE__ */ o(rt, { value: e, children: t }, e))
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ r(d, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: v !== "code" && /* @__PURE__ */ m(
-                _e,
+              /* @__PURE__ */ o(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: H !== "code" && /* @__PURE__ */ f(
+                et,
                 {
-                  value: gt,
+                  value: Lt,
                   exclusive: !0,
-                  onChange: mt,
+                  onChange: Ct,
                   size: "small",
-                  "aria-label": n("htmlEditor.device.desktop"),
+                  "aria-label": l("htmlEditor.device.desktop"),
                   children: [
-                    /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
-                      F,
+                    /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.desktopView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                      Q,
                       {
                         value: "desktop",
-                        "aria-label": n("htmlEditor.device.desktop"),
-                        children: /* @__PURE__ */ r(Er, { fontSize: "small" })
+                        "aria-label": l("htmlEditor.device.desktop"),
+                        children: /* @__PURE__ */ o(Ar, { fontSize: "small" })
                       }
                     ) }),
-                    /* @__PURE__ */ r(O, { title: n("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: A, children: /* @__PURE__ */ r(
-                      F,
+                    /* @__PURE__ */ o(G, { title: l("htmlEditor.tooltips.mobileView"), arrow: !0, slotProps: j, children: /* @__PURE__ */ o(
+                      Q,
                       {
                         value: "mobile",
-                        "aria-label": n("htmlEditor.device.mobile"),
-                        children: /* @__PURE__ */ r(Tr, { fontSize: "small" })
+                        "aria-label": l("htmlEditor.device.mobile"),
+                        children: /* @__PURE__ */ o(Fr, { fontSize: "small" })
                       }
                     ) })
                   ]
@@ -778,8 +897,8 @@ function Hr({
             ]
           }
         ),
-        /* @__PURE__ */ m(
-          d,
+        /* @__PURE__ */ f(
+          m,
           {
             sx: {
               flex: 1,
@@ -789,12 +908,12 @@ function Hr({
               overflow: "hidden"
             },
             children: [
-              v === "split" && /* @__PURE__ */ m(wt, { children: [
-                /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ge() }),
-                /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ye() })
+              H === "split" && /* @__PURE__ */ f(Nt, { children: [
+                /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
+                /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
               ] }),
-              v === "code" && /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ge() }),
-              v === "preview" && /* @__PURE__ */ r(d, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: ye() })
+              H === "code" && /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Ae() }),
+              H === "preview" && /* @__PURE__ */ o(m, { sx: { flex: 1, minHeight: 0, minWidth: 0, overflow: "hidden" }, children: Fe() })
             ]
           }
         )
@@ -802,9 +921,24 @@ function Hr({
     }
   );
 }
-const Lr = St(Hr);
-Lr.displayName = "HtmlEditor";
+const bt = dt(Or);
+bt.displayName = "HtmlEditorContent";
+const Pr = dt((a, n) => /* @__PURE__ */ o(Qt, { theme: vr, children: /* @__PURE__ */ o(
+  Zt,
+  {
+    sx: {
+      height: "100%",
+      width: "100%",
+      minHeight: 0,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column"
+    },
+    children: /* @__PURE__ */ o(bt, { ref: n, ...a })
+  }
+) }));
+Pr.displayName = "HtmlEditor";
 export {
-  Lr as HtmlEditor,
-  Lr as default
+  Pr as HtmlEditor,
+  Pr as default
 };