monto-email-builder 1.3.1 → 1.4.1

package/dist/html-editor.js

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