@standhigher/react-email-editor 0.4.1 → 0.5.1

package/dist/index.js

@@ -142,7 +142,7 @@ var DEFAULT_EMAIL_BODY = {
   textColor: "#000000",
   backgroundColor: "#ffffff",
   contentWidth: CANVAS_DEVICE_WIDTH.desktop,
-  fontFamily: "Arial, Helvetica, sans-serif",
+  fontFamily: "",
   fontWeight: FONT_WEIGHTS.normal,
   linkColor: "#005bd3",
   linkDecoration: LINK_DECORATIONS.underline,
@@ -379,7 +379,7 @@ var DEFAULT_TYPOGRAPHY = Object.freeze({
 function typographyWithBody(body) {
   return __spreadValues(__spreadValues({}, DEFAULT_TYPOGRAPHY), body ? {
     color: body.textColor,
-    fontFamily: body.fontFamily,
+    fontFamily: cssFont(body.fontFamily, DEFAULT_TYPOGRAPHY.fontFamily),
     fontWeight: body.fontWeight,
     linkColor: body.linkColor,
     linkDecoration: body.linkDecoration
@@ -2661,9 +2661,34 @@ function createEmailDocument(blocks = []) {
 function createEmptyDocument() {
   return { version: DOCUMENT_VERSION, subject: "", body: resolveEmailBody(), blocks: [] };
 }
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
 function ensureEmailDocument(document) {
-  if (document.version !== DOCUMENT_VERSION) {
-    throw new Error(`Unsupported email document version: ${document.version}. Expected ${DOCUMENT_VERSION}.`);
+  if (!isRecord(document)) {
+    throw new TypeError("Invalid email document: expected an object.");
+  }
+  if (!Array.isArray(document.blocks)) {
+    throw new TypeError("Invalid email document: blocks must be an array.");
+  }
+  if (document.body != null && !isRecord(document.body)) {
+    throw new TypeError("Invalid email document: body must be an object when provided.");
+  }
+  if (document.subject !== void 0 && typeof document.subject !== "string") {
+    throw new TypeError("Invalid email document: subject must be a string when provided.");
+  }
+  for (const [index, block] of document.blocks.entries()) {
+    const path = `Invalid email document: blocks[${index}]`;
+    if (!isRecord(block)) throw new TypeError(`${path} must be an object.`);
+    if (typeof block.id !== "string" || !block.id.trim()) {
+      throw new TypeError(`${path}.id must be a non-empty string.`);
+    }
+    if (typeof block.type !== "string" || !block.type.trim()) {
+      throw new TypeError(`${path}.type must be a non-empty string.`);
+    }
+    if (!isRecord(block.controls)) {
+      throw new TypeError(`${path}.controls must be an object.`);
+    }
   }
   return __spreadProps(__spreadValues({}, document), { body: resolveEmailBody(document.body) });
 }
@@ -2807,7 +2832,7 @@ var EmailControls = {
 
 // src/plugins/define-block.ts
 function defineBlock(input) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const options = snapshotValue(input);
   if (!options.type.trim() || !options.title.trim()) throw new Error("Block type and title are required.");
   const schema = (_a = options.controls) != null ? _a : {};
@@ -2825,7 +2850,7 @@ function defineBlock(input) {
     type: options.type,
     title: options.title,
     description: options.description,
-    icon: options.icon,
+    icon: (_c = options.icon) != null ? _c : esc(Array.from(options.title.trim())[0]),
     override: options.override,
     schema,
     controls: Object.entries(schema).map(([name, spec]) => __spreadProps(__spreadValues({}, spec), { name })),
@@ -2834,7 +2859,7 @@ function defineBlock(input) {
     inspectorSections: options.inspectorSections,
     defaultStyle: options.defaultStyle,
     defaultData: options.defaultData,
-    inlineControl: options.Canvas ? void 0 : (_c = inline[0]) == null ? void 0 : _c[0],
+    inlineControl: options.Canvas ? void 0 : (_d = inline[0]) == null ? void 0 : _d[0],
     canvas: bindPluginComponent(options.Canvas),
     inspector: bindPluginComponent(options.Inspector),
     renderEmail: (ctx) => {
@@ -3471,7 +3496,7 @@ var BODY_CONTROL_SECTIONS = [
   { title: "General", controls: [
     { id: "textColor", group: "typography", label: "Text color", control: "color" },
     { id: "linkColor", group: "typography", label: "Link color", control: "color" },
-    { id: "fontFamily", group: "typography", label: "Font family", control: "select", options: copyFontFamilies() },
+    { id: "fontFamily", group: "typography", label: "Font family", control: "select", options: [{ label: "Default", value: "" }, ...copyFontFamilies()] },
     __spreadProps(__spreadValues({}, FONT_WEIGHT), { id: "fontWeight", label: "Font weight" })
   ] },
   { title: "Content", controls: [
@@ -3840,7 +3865,7 @@ function buildRenderContext(node, mode, body = DEFAULT_EMAIL_BODY, definition =
 }
 
 // src/inspector/InspectorControls.tsx
-import { useId as useId10 } from "react";
+import { useId as useId11 } from "react";
 
 // src/constants/style-groups.ts
 var STYLE_GROUPS = [
@@ -3885,7 +3910,7 @@ function inheritedStyleValue(id, body) {
 }
 
 // src/inspector/components/BasicControl.tsx
-import { useRef as useRef9, useId as useId6 } from "react";
+import { useRef as useRef10, useId as useId7 } from "react";
 
 // src/inspector/HtmlCodeEditor.tsx
 import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect6, useRef as useRef8 } from "react";
@@ -4079,41 +4104,147 @@ function HtmlCodeEditor({
   );
 }
 
-// src/inspector/VariablesDropdown.tsx
-import { useState as useState12 } from "react";
+// src/components/PersonalizationMenu.tsx
+import { useId as useId6, useRef as useRef9, useState as useState13 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// src/components/usePersonalizationMenu.ts
+import { useLayoutEffect as useLayoutEffect7, useState as useState12 } from "react";
+function usePersonalizationMenu(open, rootRef, menuRef, focusOnOpen, setOpen) {
+  const [position, setPosition] = useState12({ left: 0, top: 0, maxHeight: 240 });
+  useLayoutEffect7(() => {
+    var _a;
+    const root = rootRef.current;
+    const menu = menuRef.current;
+    if (!open || !root || !menu) return;
+    const ownerDocument = root.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) return;
+    const place = () => {
+      var _a2, _b;
+      const anchor = root.getBoundingClientRect();
+      const inputBounds = (_b = (_a2 = root.closest(".ree-input-with-variable")) == null ? void 0 : _a2.getBoundingClientRect()) != null ? _b : anchor;
+      const width = menu.offsetWidth;
+      const height = Math.min(menu.scrollHeight + 2, 240);
+      const below = Math.max(0, ownerWindow.innerHeight - inputBounds.bottom - 8);
+      const above = Math.max(0, inputBounds.top - 8);
+      const up = below < height && above > below;
+      const maxHeight = Math.min(240, up ? above : below);
+      const left = anchor.left + width > ownerWindow.innerWidth - 8 ? anchor.right - width : anchor.left;
+      setPosition({
+        left: Math.max(8, Math.min(left, ownerWindow.innerWidth - width - 8)),
+        top: up ? inputBounds.top - Math.min(height, maxHeight) : inputBounds.bottom,
+        maxHeight
+      });
+    };
+    const onPointerDown = (event) => {
+      if (!root.contains(event.target) && !menu.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      var _a2, _b;
+      const target = event.target;
+      if (!root.contains(target) && !menu.contains(target)) return;
+      if (event.key === "Tab" && menu.contains(target)) {
+        const buttons = menu.querySelectorAll("button");
+        if (target !== (event.shiftKey ? buttons[0] : buttons[buttons.length - 1])) return;
+        if (event.shiftKey) event.preventDefault();
+        setOpen(false);
+        (_a2 = root.querySelector("button")) == null ? void 0 : _a2.focus({ preventScroll: true });
+        return;
+      }
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      (_b = root.querySelector("button")) == null ? void 0 : _b.focus({ preventScroll: true });
+    };
+    menu.setAttribute("popover", "manual");
+    menu.showPopover();
+    place();
+    if (focusOnOpen.current) (_a = menu.querySelector("button")) == null ? void 0 : _a.focus({ preventScroll: true });
+    const observer = new ResizeObserver(place);
+    observer.observe(root);
+    observer.observe(menu);
+    ownerWindow.addEventListener("resize", place);
+    ownerDocument.addEventListener("scroll", place, true);
+    ownerDocument.addEventListener("pointerdown", onPointerDown, true);
+    ownerDocument.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      menu.hidePopover();
+      observer.disconnect();
+      ownerWindow.removeEventListener("resize", place);
+      ownerDocument.removeEventListener("scroll", place, true);
+      ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
+      ownerDocument.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, rootRef, menuRef, focusOnOpen, setOpen]);
+  return position;
+}
+
+// src/components/PersonalizationMenu.tsx
 import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
-function VariablesDropdown({ variables, onInsert }) {
-  const [open, setOpen] = useState12(false);
+function PersonalizationMenu({
+  variables,
+  onInsert,
+  suffix = false
+}) {
+  const [open, setOpen] = useState13(false);
+  const [host, setHost] = useState13(null);
+  const id = useId6();
+  const rootRef = useRef9(null);
+  const menuRef = useRef9(null);
+  const focusOnOpen = useRef9(false);
+  const position = usePersonalizationMenu(open && variables.length > 0, rootRef, menuRef, focusOnOpen, setOpen);
   if (variables.length === 0) return null;
-  return /* @__PURE__ */ jsxs29("div", { className: "ree-var-wrap", children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs29("div", { className: suffix ? "ree-personalization ree-personalization-suffix" : "ree-personalization", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs29(
       "button",
       {
         type: "button",
-        className: "ree-var-btn",
-        onClick: () => setOpen((current) => !current),
-        title: "Insert variable",
-        "aria-label": "Insert variable",
+        className: suffix ? "ree-personalization-suffix-btn" : "ree-personalization-btn",
+        "aria-label": suffix ? "Insert variable" : void 0,
+        title: suffix ? "Personalization" : void 0,
         "aria-expanded": open,
-        children: "{ }"
-      }
-    ),
-    open ? /* @__PURE__ */ jsx40("div", { className: "ree-var-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs29(
-      "button",
-      {
-        type: "button",
-        className: "ree-var-item",
-        onClick: () => {
-          onInsert(variable.name);
-          setOpen(false);
+        "aria-controls": open ? id : void 0,
+        onClick: (event) => {
+          var _a;
+          focusOnOpen.current = event.detail === 0;
+          const root = rootRef.current;
+          if (root) setHost((_a = root.closest(".ree-root")) != null ? _a : root.ownerDocument.body);
+          setOpen((current) => !current);
+        },
+        onKeyDown: (event) => {
+          var _a, _b;
+          if (event.key === "Tab" && open && !event.shiftKey) {
+            event.preventDefault();
+            (_b = (_a = menuRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
+          }
         },
         children: [
-          /* @__PURE__ */ jsx40("span", { className: "ree-var-name", children: variable.name }),
-          variable.description ? /* @__PURE__ */ jsx40("span", { className: "ree-var-label", children: variable.description }) : null
+          suffix ? "{ }" : "Personalization",
+          suffix ? null : /* @__PURE__ */ jsx40("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx40("path", { d: "M5.2 7.5 10 12.3l4.8-4.8 1.2 1.2L10 14.7 4 8.7l1.2-1.2Z" }) })
         ]
-      },
-      variable.name
-    )) }) : null
+      }
+    ),
+    open && host ? createPortal2(
+      /* @__PURE__ */ jsx40("div", { id, ref: menuRef, className: "ree-var-menu ree-personalization-menu", style: position, children: variables.map((variable) => /* @__PURE__ */ jsxs29(
+        "button",
+        {
+          type: "button",
+          className: "ree-var-item",
+          onClick: () => {
+            onInsert(variable.name);
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx40("span", { className: "ree-var-name", children: variable.name }),
+            variable.description ? /* @__PURE__ */ jsx40("span", { className: "ree-var-label", children: variable.description }) : null
+          ]
+        },
+        variable.name
+      )) }),
+      host
+    ) : null
   ] });
 }
 
@@ -4121,8 +4252,8 @@ function VariablesDropdown({ variables, onInsert }) {
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function BasicControl({ control, value, variables, onChange }) {
   var _a, _b, _c, _d, _e;
-  const ref = useRef9(null);
-  const id = useId6();
+  const ref = useRef10(null);
+  const id = useId7();
   const shown = value == null || typeof value === "number" && !Number.isFinite(value) ? "" : String(value);
   const insertVariable = (token) => {
     var _a2, _b2;
@@ -4130,6 +4261,11 @@ function BasicControl({ control, value, variables, onChange }) {
     const start = (_a2 = element == null ? void 0 : element.selectionStart) != null ? _a2 : shown.length;
     const end = (_b2 = element == null ? void 0 : element.selectionEnd) != null ? _b2 : shown.length;
     onChange(shown.slice(0, start) + token + shown.slice(end));
+    requestAnimationFrame(() => {
+      var _a3, _b3;
+      (_a3 = ref.current) == null ? void 0 : _a3.focus();
+      (_b3 = ref.current) == null ? void 0 : _b3.setSelectionRange(start + token.length, start + token.length);
+    });
   };
   if (control.kind === "boolean") return /* @__PURE__ */ jsx41(CheckboxControl, { label: control.label, checked: Boolean(value), onChange });
   if (control.kind === "color") return /* @__PURE__ */ jsx41(ColorControl, { label: control.label, value: shown, resetTo: String((_a = control.defaultValue) != null ? _a : ""), onChange });
@@ -4138,30 +4274,32 @@ function BasicControl({ control, value, variables, onChange }) {
     /* @__PURE__ */ jsx41(HtmlCodeEditor, { value: shown, placeholder: control.placeholder, rows: control.rows, onChange })
   ] });
   const textual = control.kind === "text" || control.kind === "textarea" || control.kind === "url";
+  const hasVariables = textual && variables.length > 0;
   const invalidUrl = control.kind === "url" && shown.trim() && !safeEmailUrl(shown);
+  const input = control.kind === "select" ? /* @__PURE__ */ jsx41(SelectControl, { id, label: control.label, value: shown, options: (_b = control.options) != null ? _b : [], emptyLabel: (_c = control.placeholder) != null ? _c : "None", onChange }) : control.kind === "textarea" ? /* @__PURE__ */ jsx41("textarea", { id, ref: (element) => {
+    ref.current = element;
+  }, className: "ree-input ree-textarea", value: shown, placeholder: control.placeholder, rows: (_d = control.rows) != null ? _d : 4, onChange: (event) => onChange(event.target.value) }) : /* @__PURE__ */ jsx41(TextInput, { id, ref: (element) => {
+    ref.current = element;
+  }, type: control.kind === "number" ? "number" : "text", value: shown, min: control.min, max: control.max, step: control.step, placeholder: control.placeholder, "aria-invalid": Boolean(invalidUrl) || Boolean((_e = control.validateValue) == null ? void 0 : _e.call(control, value)), onChange: (event) => onChange(control.kind === "number" && event.target.value !== "" ? Number(event.target.value) : event.target.value) });
   return /* @__PURE__ */ jsxs30("div", { className: "ree-field", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "ree-field-label", children: [
-      /* @__PURE__ */ jsxs30("label", { htmlFor: id, children: [
-        control.label,
-        control.unit ? ` (${control.unit})` : ""
-      ] }),
-      textual ? /* @__PURE__ */ jsx41(VariablesDropdown, { variables, onInsert: insertVariable }) : null
-    ] }),
-    control.kind === "select" ? /* @__PURE__ */ jsx41(SelectControl, { id, label: control.label, value: shown, options: (_b = control.options) != null ? _b : [], emptyLabel: (_c = control.placeholder) != null ? _c : "None", onChange }) : control.kind === "textarea" ? /* @__PURE__ */ jsx41("textarea", { id, ref: (element) => {
-      ref.current = element;
-    }, className: "ree-input ree-textarea", value: shown, placeholder: control.placeholder, rows: (_d = control.rows) != null ? _d : 4, onChange: (event) => onChange(event.target.value) }) : /* @__PURE__ */ jsx41(TextInput, { id, ref: (element) => {
-      ref.current = element;
-    }, type: control.kind === "number" ? "number" : "text", value: shown, min: control.min, max: control.max, step: control.step, placeholder: control.placeholder, "aria-invalid": Boolean(invalidUrl) || Boolean((_e = control.validateValue) == null ? void 0 : _e.call(control, value)), onChange: (event) => onChange(control.kind === "number" && event.target.value !== "" ? Number(event.target.value) : event.target.value) })
+    /* @__PURE__ */ jsx41("div", { className: "ree-field-label", children: /* @__PURE__ */ jsxs30("label", { htmlFor: id, children: [
+      control.label,
+      control.unit ? ` (${control.unit})` : ""
+    ] }) }),
+    hasVariables ? /* @__PURE__ */ jsxs30("div", { className: "ree-input-with-variable", children: [
+      input,
+      /* @__PURE__ */ jsx41(PersonalizationMenu, { suffix: true, variables, onInsert: insertVariable })
+    ] }) : input
   ] });
 }
 
 // src/inspector/components/ListControl.tsx
-import { useId as useId7 } from "react";
+import { useId as useId8 } from "react";
 
 // src/inspector/components/useListRows.ts
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef10, useState as useState13 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef11, useState as useState14 } from "react";
 function useListRows(value, onChange) {
-  const [state, setState] = useState13({ source: void 0, rows: [], nextKey: 0 });
+  const [state, setState] = useState14({ source: void 0, rows: [], nextKey: 0 });
   if (state.source !== value) {
     const available = [...state.rows];
     let nextKey = state.nextKey;
@@ -4173,8 +4311,8 @@ function useListRows(value, onChange) {
     });
     setState({ source: value, rows, nextKey });
   }
-  const latest = useRef10(state);
-  useLayoutEffect7(() => {
+  const latest = useRef11(state);
+  useLayoutEffect8(() => {
     latest.current = state;
     return () => {
       latest.current = null;
@@ -4219,7 +4357,7 @@ import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 function ListControl(_a) {
   var _b = _a, { control, value, onChange } = _b, props = __objRest(_b, ["control", "value", "onChange"]);
   var _a2;
-  const id = useId7();
+  const id = useId8();
   const schema = (_a2 = control.itemControls) != null ? _a2 : {};
   const { rows, updateRow, moveRow, removeRow, addRow } = useListRows(value, onChange);
   return /* @__PURE__ */ jsxs31("fieldset", { className: "ree-plugin-list", children: [
@@ -4239,15 +4377,15 @@ function ListControl(_a) {
 }
 
 // src/inspector/components/ImageControl.tsx
-import { useContext as useContext4, useEffect as useEffect5, useId as useId8, useRef as useRef11, useState as useState14 } from "react";
+import { useContext as useContext4, useEffect as useEffect5, useId as useId9, useRef as useRef12, useState as useState15 } from "react";
 import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 function ImageControl({ control, value, onChange }) {
   var _a;
   const config = useContext4(EditorConfigContext);
-  const controller = useRef11(null);
-  const id = useId8();
-  const [loading, setLoading] = useState14(false);
-  const [error, setError] = useState14("");
+  const controller = useRef12(null);
+  const id = useId9();
+  const [loading, setLoading] = useState15(false);
+  const [error, setError] = useState15("");
   const shown = String(value != null ? value : "");
   const url = safeEmailUrl(shown, true);
   useEffect5(() => () => {
@@ -4284,12 +4422,12 @@ function ImageControl({ control, value, onChange }) {
 }
 
 // src/inspector/components/RichTextControl.tsx
-import { useContext as useContext5, useId as useId9 } from "react";
+import { useContext as useContext5, useId as useId10 } from "react";
 import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 function RichTextControl({ control, value, variables, body, onChange }) {
   var _a, _b;
   const parent = useContext5(PluginEditorContext);
-  const id = useId9();
+  const id = useId10();
   const context = {
     block: (_a = parent == null ? void 0 : parent.block) != null ? _a : { id, type: "control", controls: {} },
     controls: { [control.name]: value },
@@ -4347,7 +4485,7 @@ function InspectorControls({
   onCommitStyle
 }) {
   var _a, _b, _c, _d, _e;
-  const toolbarId = useId10();
+  const toolbarId = useId11();
   const contentControls = ((_a = definition.controls) != null ? _a : []).filter((control) => control.name !== definition.inlineControl);
   const CustomInspector = definition.inspector;
   const context = buildRenderContext(block, "canvas", body, definition);
@@ -4476,6 +4614,9 @@ function Inspector({
   ] });
 }
 
+// src/stage/Stage.tsx
+import { useMemo as useMemo5 } from "react";
+
 // src/stage/canvas/Canvas.tsx
 import { useDroppable } from "@dnd-kit/core";
 import {
@@ -4499,26 +4640,95 @@ function viewportWidth(device, body) {
 }
 
 // src/stage/canvas/CanvasBlock.tsx
-import { useId as useId12, useMemo as useMemo3, useState as useState15 } from "react";
+import { useId as useId13, useMemo as useMemo3, useState as useState16 } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
 // src/stage/canvas/components/PluginCanvasContent.tsx
 import { useMemo as useMemo2 } from "react";
 
-// src/render/template-preview.ts
-var TOKEN_PATTERN = /\{\{-?([\s\S]*?)-?\}\}/g;
+// src/render/default-template-engine.ts
+var TOKEN_PATTERN = /\{\{(-[ \t\r\n])?([\s\S]*?)([ \t\r\n]-)?\}\}/g;
+var UNSUPPORTED_IDENTIFIERS = /* @__PURE__ */ new Set([
+  "and",
+  "or",
+  "not",
+  "len",
+  "index",
+  "slice",
+  "call",
+  "print",
+  "printf",
+  "println",
+  "html",
+  "js",
+  "urlquery",
+  "eq",
+  "ne",
+  "lt",
+  "le",
+  "gt",
+  "ge",
+  "break",
+  "continue",
+  "else",
+  "end"
+]);
+var PATH_PATTERN = /^(?:\.|\$|(?:\$\.|\.)?[\p{L}_][\p{L}\p{Nd}_]*(?:\.[\p{L}_][\p{L}\p{Nd}_]*)*)$/u;
+function supportsExpression(expression) {
+  if (PATH_PATTERN.test(expression) && !UNSUPPORTED_IDENTIFIERS.has(expression)) return true;
+  if (/^-?\d+(?:\.\d+)?$/.test(expression)) return true;
+  if (/^"(?:[^"\\]|\\.)*"$/.test(expression)) {
+    try {
+      JSON.parse(expression);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+}
+function supportsTokens(tokens) {
+  var _a;
+  const branches = [];
+  for (const token of tokens) {
+    if (token.text !== void 0) {
+      if (token.text.includes("{{")) return false;
+      continue;
+    }
+    const tag = (_a = token.tag) != null ? _a : "";
+    const branch = /^(if|range|with)\s+([\s\S]+)$/.exec(tag);
+    if (branch) {
+      if (!supportsExpression(branch[2].trim())) return false;
+      branches.push({ kind: branch[1], hasElse: false });
+    } else if (tag === "end") {
+      if (!branches.pop()) return false;
+    } else if (tag === "else" || /^else\s+if\s+/.test(tag)) {
+      const current = branches.at(-1);
+      if (!current || current.hasElse) return false;
+      if (tag === "else") current.hasElse = true;
+      else if (current.kind !== "if" || !supportsExpression(tag.replace(/^else\s+if\s+/, ""))) return false;
+    } else if (!supportsExpression(tag)) return false;
+  }
+  return branches.length === 0;
+}
 function tokenize(template) {
   var _a;
   const tokens = [];
   let lastIndex = 0;
+  let trimNext = false;
   for (const match of template.matchAll(TOKEN_PATTERN)) {
     const index = (_a = match.index) != null ? _a : 0;
-    if (index > lastIndex) tokens.push({ text: template.slice(lastIndex, index) });
-    tokens.push({ tag: match[1].trim() });
+    let text = template.slice(lastIndex, index);
+    if (trimNext) text = text.replace(/^[ \t\r\n]+/, "");
+    if (match[1]) text = text.replace(/[ \t\r\n]+$/, "");
+    if (text) tokens.push({ text });
+    tokens.push({ tag: match[2].trim() });
+    trimNext = Boolean(match[3]);
     lastIndex = index + match[0].length;
   }
-  if (lastIndex < template.length) tokens.push({ text: template.slice(lastIndex) });
+  const tail = template.slice(lastIndex);
+  if (tail) tokens.push({ text: trimNext ? tail.replace(/^[ \t\r\n]+/, "") : tail });
   return tokens;
 }
 function parseNodes(tokens, startIndex) {
@@ -4533,11 +4743,11 @@ function parseNodes(tokens, startIndex) {
       continue;
     }
     const tag = (_a = token.tag) != null ? _a : "";
-    if (tag === "else" || tag.startsWith("else if ")) {
+    if (tag === "else" || /^else\s+if\s+/.test(tag)) {
       return { nodes, nextIndex: index, stopTag: "else" };
     }
     if (tag === "end") return { nodes, nextIndex: index, stopTag: "end" };
-    const branchMatch = /^(if|range|with)\s+(.+)$/.exec(tag);
+    const branchMatch = /^(if|range|with)\s+([\s\S]+)$/.exec(tag);
     if (branchMatch) {
       const branch = parseBranch(
         tokens,
@@ -4561,7 +4771,7 @@ function parseBranch(tokens, startIndex, kind, expression) {
   let nextIndex = body.nextIndex;
   if (body.stopTag === "else") {
     const elseTag = (_b = (_a = tokens[body.nextIndex]) == null ? void 0 : _a.tag) != null ? _b : "";
-    const elseIfMatch = /^else\s+if\s+(.+)$/.exec(elseTag);
+    const elseIfMatch = /^else\s+if\s+([\s\S]+)$/.exec(elseTag);
     if (elseIfMatch) {
       const nested = parseBranch(
         tokens,
@@ -4585,42 +4795,44 @@ function parseBranch(tokens, startIndex, kind, expression) {
 function readPath(value, path) {
   if (path === "") return value;
   return path.split(".").reduce((current, key) => {
-    if (current && typeof current === "object") return current[key];
+    if (current && typeof current === "object" && Object.hasOwn(current, key)) return current[key];
     return void 0;
   }, value);
 }
 function resolveExpression(expression, root, current) {
   const trimmed = expression.trim();
   if (trimmed === ".") return current;
+  if (trimmed === "$") return root;
   if (trimmed === "true") return true;
   if (trimmed === "false") return false;
   if (trimmed === "nil") return null;
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return Number(trimmed);
-  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
-    return trimmed.slice(1, -1);
-  }
+  if (/^-?\d+(?:\.\d+)?$/.test(trimmed)) return Number(trimmed);
+  if (trimmed.startsWith('"')) return JSON.parse(trimmed);
   if (trimmed.startsWith("$.")) return readPath(root, trimmed.slice(2));
   if (trimmed.startsWith(".")) return readPath(current, trimmed.slice(1));
   return readPath(current, trimmed);
 }
 function isTruthy(value) {
   if (value == null || value === false || value === "" || value === 0) return false;
-  return !Array.isArray(value) || value.length > 0;
-}
-function escapeHtml(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+  if (Array.isArray(value)) return value.length > 0;
+  if (value instanceof Map || value instanceof Set) return value.size > 0;
+  if (typeof value === "object") {
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype === Object.prototype || prototype === null) return Object.keys(value).length > 0;
+  }
+  return true;
 }
 function renderNodes(nodes, root, current) {
   return nodes.map((node) => {
     if (node.kind === "text") return node.value;
     if (node.kind === "expression") {
       const value2 = resolveExpression(node.expression, root, current);
-      return value2 == null ? "" : escapeHtml(String(value2));
+      return value2 == null ? "" : esc(String(value2)).replaceAll("'", "&#39;");
     }
     const value = resolveExpression(node.expression, root, current);
     if (node.kind === "range") {
-      const items = Array.isArray(value) ? value : value && typeof value === "object" ? Object.values(value) : [];
-      return items.map((item) => renderNodes(node.children, root, item)).join("");
+      const items = Array.isArray(value) ? value : value && typeof value === "object" ? Object.keys(value).sort().map((key) => value[key]) : [];
+      return items.length > 0 ? items.map((item) => renderNodes(node.children, root, item)).join("") : renderNodes(node.alternate, root, current);
     }
     if (!isTruthy(value)) {
       return renderNodes(node.alternate, root, current);
@@ -4629,9 +4841,40 @@ function renderNodes(nodes, root, current) {
     return renderNodes(node.children, root, childContext);
   }).join("");
 }
-function renderTemplatePreview(html, defaultData) {
-  if (defaultData === void 0) return html;
-  return renderNodes(parseNodes(tokenize(html), 0).nodes, defaultData, defaultData);
+var defaultTemplateEngine = Object.freeze({
+  render(template, data) {
+    const tokens = tokenize(template);
+    if (!supportsTokens(tokens)) return template;
+    return renderNodes(parseNodes(tokens, 0).nodes, data, data);
+  }
+});
+
+// src/render/template-preview.ts
+function normalizeEngineError(error) {
+  return error instanceof Error ? error : new Error(String(error) || "Template engine failed.", { cause: error });
+}
+function renderTemplatePreview(template, data, options = {}) {
+  var _a;
+  const engine = (_a = options.templateEngine) != null ? _a : defaultTemplateEngine;
+  if (data === void 0 && engine === defaultTemplateEngine) return template;
+  try {
+    const html = engine.render(template, structuredClone(data != null ? data : {}));
+    if (typeof html !== "string") throw new TypeError("TemplateEngine.render must return a string synchronously.");
+    return html;
+  } catch (error) {
+    throw normalizeEngineError(error);
+  }
+}
+function validateTemplate(template, options = {}) {
+  var _a, _b;
+  const engine = (_a = options.templateEngine) != null ? _a : defaultTemplateEngine;
+  try {
+    const issues = (_b = engine.validate) == null ? void 0 : _b.call(engine, template);
+    if (issues !== void 0 && !Array.isArray(issues)) throw new TypeError("TemplateEngine.validate must return an array synchronously.");
+    return issues;
+  } catch (error) {
+    throw normalizeEngineError(error);
+  }
 }
 
 // src/render/block-html.ts
@@ -4656,7 +4899,7 @@ function variableControlName(name) {
   const token = /^\{\{-?\s*([\s\S]*?)\s*-?\}\}$/.exec(name.trim());
   const inner = (token ? token[1] : name).trim();
   const control = inner.startsWith(".") ? inner.slice(1) : inner;
-  if (!control || !/^[A-Za-z_][\w.]*$/.test(control)) return null;
+  if (!control || !/^[\p{L}_][\p{L}\p{Nd}_]*(?:\.[\p{L}_][\p{L}\p{Nd}_]*)*$/u.test(control)) return null;
   return control;
 }
 function dottedListedToken(name) {
@@ -4722,12 +4965,12 @@ function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email",
 }
 function resolveBlockContent(rendered, node, options) {
   var _a, _b;
-  if (!options.resolveHtmlTemplate) {
-    return applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
-  }
+  const normalized = applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
+  if (!options.resolveHtmlTemplate) return normalized;
   return renderTemplatePreview(
-    rendered,
-    (_b = options.templateData) != null ? _b : node.defaultData
+    normalized,
+    (_b = options.templateData) != null ? _b : node.defaultData,
+    options
   );
 }
 function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body = DEFAULT_EMAIL_BODY) {
@@ -4753,7 +4996,7 @@ function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options
 }
 
 // src/stage/canvas/components/HtmlCanvas.tsx
-import { useCallback, useEffect as useEffect6, useRef as useRef12 } from "react";
+import { useCallback, useEffect as useEffect6, useRef as useRef13 } from "react";
 
 // src/render/head-styles.ts
 function extractHeadStyles(html) {
@@ -4774,9 +5017,9 @@ function frameHtml(html, baseCss) {
 }
 function HtmlCanvas({ html, baseCss = "", onSelect }) {
   const hasHtmlTag = /<\/?[a-z][\w:-]*(?:\s[^>]*)?>/i.test(html);
-  const containerRef = useRef12(null);
-  const frameRef = useRef12(null);
-  const cleanupRef = useRef12();
+  const containerRef = useRef13(null);
+  const frameRef = useRef13(null);
+  const cleanupRef = useRef13();
   const observeContent = useCallback(() => {
     var _a;
     (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
@@ -4869,15 +5112,17 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
 
 // src/stage/canvas/components/PluginCanvasContent.tsx
 import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
-function PluginCanvasContent({ block, body, definition, variables, selected, toolbarId, toolbarCollapsed, select, onCommitControl, onCommitControls, onCommitStyle }) {
+function PluginCanvasContent({ block, body, definition, variables, templateEngine, selected, toolbarId, toolbarCollapsed, select, onCommitControl, onCommitControls, onCommitStyle }) {
   var _a, _b;
   const variableSnapshot = useMemo2(() => structuredClone(variables), [variables]);
   const context = useMemo2(() => definition ? buildRenderContext(block, "canvas", body, definition) : null, [block, body, definition]);
   const renderedHtml = useMemo2(() => definition && context ? renderBlockContentFromContext(context, definition, {
     resolveHtmlTemplate: true,
+    templateEngine,
+    variables,
     templateData: mergeTemplateData(variables, block.defaultData),
     body
-  }) : "", [block.defaultData, body, context, definition, variables]);
+  }) : "", [block.defaultData, body, context, definition, variables, templateEngine]);
   if (!definition || !context) return /* @__PURE__ */ jsxs38("div", { className: "ree-plugin-error", role: "alert", children: [
     "Missing block plugin: ",
     block.type,
@@ -4897,7 +5142,7 @@ function PluginCanvasContent({ block, body, definition, variables, selected, too
 }
 
 // src/stage/canvas/components/BlockActions.tsx
-import { useId as useId11 } from "react";
+import { useId as useId12 } from "react";
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function BlockActions({
   inlineEdit,
@@ -4907,7 +5152,7 @@ function BlockActions({
   onDuplicate,
   onRemove
 }) {
-  const tooltipId = useId11();
+  const tooltipId = useId12();
   const toggleLabel = toolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar";
   return /* @__PURE__ */ jsxs39(
     "div",
@@ -4994,6 +5239,7 @@ function CanvasBlock({
   selected,
   dropEdge,
   variables,
+  templateEngine,
   onSelect,
   onCommitControl,
   onCommitControls,
@@ -5003,8 +5249,9 @@ function CanvasBlock({
 }) {
   var _a, _b, _c;
   const block = useMemo3(() => __spreadProps(__spreadValues({}, sourceBlock), { style: resolveBlockStyle(sourceBlock.style, definition) }), [sourceBlock, definition]);
-  const toolbarId = useId12();
-  const [toolbarCollapsed, setToolbarCollapsed] = useState15(false);
+  const renderKey = useMemo3(() => ({ definition, templateEngine, variables }), [definition, templateEngine, variables]);
+  const toolbarId = useId13();
+  const [toolbarCollapsed, setToolbarCollapsed] = useState16(false);
   const dragData = { kind: "canvas" };
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, data: dragData });
   const select = (event) => {
@@ -5064,7 +5311,7 @@ function CanvasBlock({
           {
             className: `ree-block-content${(definition == null ? void 0 : definition.inlineControl) ? " is-inline" : ""}`,
             style: canvasBlockStyle(block, body),
-            children: /* @__PURE__ */ jsx51(BlockErrorBoundary, { identity: sourceBlock, resetKey: definition, children: /* @__PURE__ */ jsx51(PluginCanvasContent, { block, body, definition, variables, selected, toolbarId, toolbarCollapsed, select: onSelect, onCommitControl, onCommitControls, onCommitStyle }) })
+            children: /* @__PURE__ */ jsx51(BlockErrorBoundary, { identity: sourceBlock, resetKey: renderKey, children: /* @__PURE__ */ jsx51(PluginCanvasContent, { block, body, definition, variables, templateEngine, selected, toolbarId, toolbarCollapsed, select: onSelect, onCommitControl, onCommitControls, onCommitStyle }) })
           }
         ),
         definition ? /* @__PURE__ */ jsx51("span", { className: "ree-block-badge", children: definition.title }) : null
@@ -5083,6 +5330,7 @@ function Canvas({
   dropTargetId,
   dropEdge,
   variables,
+  templateEngine,
   device,
   onSelect,
   onCommitControl,
@@ -5149,6 +5397,7 @@ function Canvas({
                           selected: block.id === selectedId,
                           dropEdge: dropTargetId === block.id ? dropEdge : null,
                           variables,
+                          templateEngine,
                           onSelect: () => onSelect(block.id),
                           onCommitControl,
                           onCommitControls,
@@ -5171,68 +5420,17 @@ function Canvas({
 }
 
 // src/stage/preview/Preview.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef13 } from "react";
-
-// src/render/document-html.ts
-function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
-  const source = ensureEmailDocument(document);
-  const body = source.body;
-  const baseCss = emailBaseCss(body);
-  const rendered = source.blocks.map((node, index) => {
-    var _a;
-    const blockData = __spreadValues(__spreadValues({}, options.templateData), node.defaultData);
-    const block = blockToHtml(node, definitions, "email", {
-      resolveHtmlTemplate: options.resolveHtmlTemplates,
-      body,
-      variables: options.variables,
-      templateData: mergeTemplateData(
-        (_a = options.variables) != null ? _a : [],
-        Object.keys(blockData).length > 0 ? blockData : void 0
-      )
-    });
-    const gap = index < source.blocks.length - 1 ? spacerHtml(body.blockGap) : "";
-    return block + gap;
-  }).join("\n");
-  const { html: content, styles } = extractHeadStyles(rendered);
-  return [
-    "<!DOCTYPE html>",
-    '<html lang="en">',
-    "<head>",
-    '<meta charset="utf-8" />',
-    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
-    "<title>Email</title>",
-    styles,
-    "</head>",
-    `<body style="margin:0;padding:0;${baseCss};background-color:#ffffff;word-spacing:normal;">`,
-    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${baseCss};background-color:#ffffff;table-layout:fixed;">`,
-    "<tr>",
-    `<td align="center" style="padding:0;${baseCss};">`,
-    `<table role="presentation" align="center" width="${body.contentWidth}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${body.contentWidth}px;margin-left:auto;margin-right:auto;table-layout:fixed;">`,
-    "<tr>",
-    `<td style="box-sizing:border-box;${styleToCss(surfaceStyle(body))};">`,
-    content,
-    "</td>",
-    "</tr>",
-    "</table>",
-    "</td>",
-    "</tr>",
-    "</table>",
-    "</body>",
-    "</html>"
-  ].join("\n");
-}
-
-// src/stage/preview/Preview.tsx
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef14 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-function Preview({ document, definitions, variables, device }) {
-  const frameRef = useRef13(null);
-  const cleanupRef = useRef13();
+function Preview({ document, config, variables, device }) {
+  const frameRef = useRef14(null);
+  const cleanupRef = useRef14();
   const html = useMemo4(
-    () => documentToHtml(document, definitions, {
+    () => config.toHtml(document, {
       resolveHtmlTemplates: true,
       variables
     }),
-    [document, definitions, variables]
+    [document, config, variables]
   );
   const observeContent = useCallback2(() => {
     var _a;
@@ -5378,6 +5576,7 @@ function Stage({
   onDeviceChange,
   onSelectBlock
 }) {
+  const previewKey = useMemo5(() => ({ config: session.config, variables: session.variables }), [session.config, session.variables]);
   const { targetId, dropEdge } = useEditorDragState();
   return /* @__PURE__ */ jsxs42("div", { className: "ree-col ree-col-center", children: [
     /* @__PURE__ */ jsx55(
@@ -5399,6 +5598,7 @@ function Stage({
         dropTargetId: targetId,
         dropEdge,
         variables: session.variables,
+        templateEngine: session.config.templateEngine,
         device,
         onSelect: onSelectBlock,
         onCommitControl: session.updateControl,
@@ -5407,11 +5607,11 @@ function Stage({
         onDuplicate: session.duplicateBlock,
         onRemove: session.removeBlock
       }
-    ) }) : /* @__PURE__ */ jsx55("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx55(BlockErrorBoundary, { identity: session.document, resetKey: session.definitions, children: /* @__PURE__ */ jsx55(
+    ) }) : /* @__PURE__ */ jsx55("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx55(BlockErrorBoundary, { identity: session.document, resetKey: previewKey, children: /* @__PURE__ */ jsx55(
       Preview,
       {
         document: session.document,
-        definitions: session.definitions,
+        config: session.config,
         variables: session.variables,
         device
       }
@@ -5420,75 +5620,22 @@ function Stage({
 }
 
 // src/shell/SubjectBar.tsx
-import { useId as useId13, useRef as useRef15 } from "react";
+import { useId as useId14, useRef as useRef15 } from "react";
 
 // src/shell/constants.ts
 var EMPTY_VARIABLES = [];
 var PERSONALIZATION_HINT = "Personalization fields will appear blank if no data is available.";
 
-// src/shell/PersonalizationMenu.tsx
-import { useEffect as useEffect8, useRef as useRef14, useState as useState16 } from "react";
-import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
-function PersonalizationMenu({
-  variables,
-  onInsert
-}) {
-  const [open, setOpen] = useState16(false);
-  const rootRef = useRef14(null);
-  useEffect8(() => {
-    const root = rootRef.current;
-    if (!open || !root) return;
-    const ownerDocument = root.ownerDocument;
-    const onPointerDown = (event) => {
-      if (!root.contains(event.target)) setOpen(false);
-    };
-    ownerDocument.addEventListener("pointerdown", onPointerDown, true);
-    return () => ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
-  }, [open]);
-  if (variables.length === 0) return null;
-  return /* @__PURE__ */ jsxs43("div", { className: "ree-personalization", ref: rootRef, children: [
-    /* @__PURE__ */ jsxs43(
-      "button",
-      {
-        type: "button",
-        className: "ree-personalization-btn",
-        "aria-expanded": open,
-        onClick: () => setOpen((current) => !current),
-        children: [
-          "Personalization",
-          /* @__PURE__ */ jsx56("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx56("path", { d: "M5.2 7.5 10 12.3l4.8-4.8 1.2 1.2L10 14.7 4 8.7l1.2-1.2Z" }) })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx56("div", { className: "ree-var-menu ree-personalization-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs43(
-      "button",
-      {
-        type: "button",
-        className: "ree-var-item",
-        onClick: () => {
-          onInsert(variable.name);
-          setOpen(false);
-        },
-        children: [
-          /* @__PURE__ */ jsx56("span", { className: "ree-var-name", children: variable.name }),
-          variable.description ? /* @__PURE__ */ jsx56("span", { className: "ree-var-label", children: variable.description }) : null
-        ]
-      },
-      variable.name
-    )) }) : null
-  ] });
-}
-
 // src/shell/SubjectBar.tsx
-import { Fragment as Fragment5, jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 function SubjectBar({
   subject,
   variables,
   onSubjectChange
 }) {
   const inputRef = useRef15(null);
-  const subjectId = useId13();
-  const countId = useId13();
+  const subjectId = useId14();
+  const countId = useId14();
   const insertVariable = (token) => {
     var _a, _b;
     const input = inputRef.current;
@@ -5506,10 +5653,10 @@ function SubjectBar({
       (_b2 = inputRef.current) == null ? void 0 : _b2.setSelectionRange(cursor, cursor);
     });
   };
-  return /* @__PURE__ */ jsxs44("div", { className: "ree-subject-bar", children: [
-    /* @__PURE__ */ jsx57("label", { className: "ree-subject-label", htmlFor: subjectId, children: "Email subject" }),
-    /* @__PURE__ */ jsxs44("div", { className: "ree-subject-field", children: [
-      /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs43("div", { className: "ree-subject-bar", children: [
+    /* @__PURE__ */ jsx56("label", { className: "ree-subject-label", htmlFor: subjectId, children: "Email subject" }),
+    /* @__PURE__ */ jsxs43("div", { className: "ree-subject-field", children: [
+      /* @__PURE__ */ jsx56(
         TextInput,
         {
           id: subjectId,
@@ -5521,15 +5668,15 @@ function SubjectBar({
           onChange: (event) => onSubjectChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs44("span", { id: countId, className: "ree-subject-count", children: [
+      /* @__PURE__ */ jsxs43("span", { id: countId, className: "ree-subject-count", children: [
         subject.length,
         "/",
         SUBJECT_MAX_LENGTH
       ] })
     ] }),
-    variables.length > 0 ? /* @__PURE__ */ jsxs44(Fragment5, { children: [
-      /* @__PURE__ */ jsx57(PersonalizationMenu, { variables, onInsert: insertVariable }),
-      /* @__PURE__ */ jsx57("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
+    variables.length > 0 ? /* @__PURE__ */ jsxs43(Fragment5, { children: [
+      /* @__PURE__ */ jsx56(PersonalizationMenu, { variables, onInsert: insertVariable }),
+      /* @__PURE__ */ jsx56("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
     ] }) : null
   ] });
 }
@@ -5634,9 +5781,59 @@ function createBlockNode(type, definitions) {
   };
 }
 
+// src/render/document-html.ts
+function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
+  const source = ensureEmailDocument(document);
+  const body = source.body;
+  const baseCss = emailBaseCss(body);
+  const rendered = source.blocks.map((node, index) => {
+    var _a;
+    const blockData = __spreadValues(__spreadValues({}, options.templateData), node.defaultData);
+    const block = blockToHtml(node, definitions, "email", {
+      resolveHtmlTemplate: options.resolveHtmlTemplates,
+      templateEngine: options.templateEngine,
+      body,
+      variables: options.variables,
+      templateData: mergeTemplateData(
+        (_a = options.variables) != null ? _a : [],
+        Object.keys(blockData).length > 0 ? blockData : void 0
+      )
+    });
+    const gap = index < source.blocks.length - 1 ? spacerHtml(body.blockGap) : "";
+    return block + gap;
+  }).join("\n");
+  const { html: content, styles } = extractHeadStyles(rendered);
+  return [
+    "<!DOCTYPE html>",
+    '<html lang="en">',
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    "<title>Email</title>",
+    styles,
+    "</head>",
+    `<body style="margin:0;padding:0;${baseCss};background-color:#ffffff;word-spacing:normal;">`,
+    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${baseCss};background-color:#ffffff;table-layout:fixed;">`,
+    "<tr>",
+    `<td align="center" style="padding:0;${baseCss};">`,
+    `<table role="presentation" align="center" width="${body.contentWidth}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${body.contentWidth}px;margin-left:auto;margin-right:auto;table-layout:fixed;">`,
+    "<tr>",
+    `<td style="box-sizing:border-box;${styleToCss(surfaceStyle(body))};">`,
+    content,
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</body>",
+    "</html>"
+  ].join("\n");
+}
+
 // src/plugins/config.ts
 function buildEmailEditorConfig(options = {}) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const definitions = new Map(DEFAULT_BLOCKS.map((block) => [block.type, block]));
   const customTypes = /* @__PURE__ */ new Set();
   for (const plugin of (_a = options.plugins) != null ? _a : []) {
@@ -5651,16 +5848,21 @@ function buildEmailEditorConfig(options = {}) {
   for (const type of visibleBuiltins) if (!builtinTypes.has(type)) throw new Error(`Unknown builtin block: ${type}`);
   const all = Object.freeze([...definitions.values()].map((plugin) => snapshotValue(plugin)));
   const registered = new Map(all.map((plugin) => [plugin.type, plugin]));
+  const templateEngine = (_c = options.templateEngine) != null ? _c : defaultTemplateEngine;
   return Object.freeze({
+    templateEngine,
     definitions: all,
-    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_c = options.plugins) != null ? _c : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
+    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_d = options.plugins) != null ? _d : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
     pickImage: options.pickImage,
     createBlock: (type) => {
       const block = createBlockNode(type, all);
       if (!block) throw new Error(`Unknown block plugin: ${type}`);
       return block;
     },
-    toHtml: (document, htmlOptions) => documentToHtml(document, all, htmlOptions),
+    toHtml: (document, htmlOptions) => {
+      var _a2;
+      return documentToHtml(document, all, __spreadProps(__spreadValues({}, htmlOptions), { templateEngine: (_a2 = htmlOptions == null ? void 0 : htmlOptions.templateEngine) != null ? _a2 : templateEngine }));
+    },
     validate: (document) => validateDocument(document, all)
   });
 }
@@ -5897,7 +6099,7 @@ function useEditorSession(editor) {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 function EmailEditorShell({ editor, height = "100%" }) {
   var _a;
   const session = useEditorSession(editor);
@@ -5935,8 +6137,8 @@ function EmailEditorShell({ editor, height = "100%" }) {
     selectBlock(null);
   };
   const showCanvas = () => setViewMode("edit");
-  return /* @__PURE__ */ jsx58(EditorConfigContext.Provider, { value: session.config, children: /* @__PURE__ */ jsx58(RichTextFocusContext.Provider, { value: { active: activeRichText, activate: setActiveRichText }, children: /* @__PURE__ */ jsxs45("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57(EditorConfigContext.Provider, { value: session.config, children: /* @__PURE__ */ jsx57(RichTextFocusContext.Provider, { value: { active: activeRichText, activate: setActiveRichText }, children: /* @__PURE__ */ jsxs44("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx57(
       SubjectBar,
       {
         subject: (_a = session.document.subject) != null ? _a : "",
@@ -5944,8 +6146,8 @@ function EmailEditorShell({ editor, height = "100%" }) {
         onSubjectChange: session.setSubject
       }
     ),
-    /* @__PURE__ */ jsxs45("div", { className: "ree-body", children: [
-      /* @__PURE__ */ jsxs45(
+    /* @__PURE__ */ jsxs44("div", { className: "ree-body", children: [
+      /* @__PURE__ */ jsxs44(
         EditorDnd,
         {
           blocks: session.document.blocks,
@@ -5957,7 +6159,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
           onReorder: session.reorderBlocks,
           onLibraryDragStart: showCanvas,
           children: [
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx57(
               BlockLibrary,
               {
                 definitions: session.config.library,
@@ -5967,7 +6169,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx58(
+            /* @__PURE__ */ jsx57(
               Stage,
               {
                 session,
@@ -5981,7 +6183,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx58(
+      /* @__PURE__ */ jsx57(
         Inspector,
         {
           panel: inspectorPanel,
@@ -6001,21 +6203,21 @@ function EmailEditorShell({ editor, height = "100%" }) {
 }
 
 // src/EmailEditor.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function EmailEditor(props) {
-  return /* @__PURE__ */ jsx59(EmailEditorShell, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx58(EmailEditorShell, __spreadValues({}, props));
 }
 
 // src/plugins/useEmailEditorConfig.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function useEmailEditorConfig(options = {}) {
-  const { plugins, builtins, pickImage } = options;
-  return useMemo5(() => buildEmailEditorConfig({ plugins, builtins, pickImage }), [plugins, builtins, pickImage]);
+  const { plugins, builtins, pickImage, templateEngine } = options;
+  return useMemo6(() => buildEmailEditorConfig({ plugins, builtins, pickImage, templateEngine }), [plugins, builtins, pickImage, templateEngine]);
 }
 
 // src/shell/useEmailEditor.ts
-import { useEffect as useEffect9, useInsertionEffect, useLayoutEffect as useLayoutEffect8, useState as useState19 } from "react";
-var useOptionsEffect = typeof window === "undefined" ? useEffect9 : useLayoutEffect8;
+import { useEffect as useEffect8, useInsertionEffect, useLayoutEffect as useLayoutEffect9, useState as useState19 } from "react";
+var useOptionsEffect = typeof window === "undefined" ? useEffect8 : useLayoutEffect9;
 function useEmailEditor(options = {}) {
   const [store] = useState19(() => createEditorStore(options));
   useInsertionEffect(() => {
@@ -6033,12 +6235,12 @@ function useEmailEditorState(editor) {
 }
 
 // src/plugins/components/ControlEditor.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function ControlEditor({ control }) {
   const context = usePluginEditor();
   const definition = context.controlDefinitions.find((item) => item.name === control);
   if (!definition) throw new Error(`Unknown plugin control: ${control}`);
-  return /* @__PURE__ */ jsx60(ControlRenderer, { control: definition, value: context.controls[control], body: context.body, variables: context.variables, onChange: (value) => context.setControl(control, value) });
+  return /* @__PURE__ */ jsx59(ControlRenderer, { control: definition, value: context.controls[control], body: context.body, variables: context.variables, onChange: (value) => context.setControl(control, value) });
 }
 export {
   BLOCK_TYPES,
@@ -6070,6 +6272,7 @@ export {
   createDimensionControls,
   createEmailDocument,
   createTypographyControls,
+  defaultTemplateEngine,
   defineBlock,
   documentToHtml,
   generateId,
@@ -6082,5 +6285,6 @@ export {
   useEmailEditor,
   useEmailEditorConfig,
   useEmailEditorState,
+  validateTemplate,
   variablesToTemplateData
 };