@standhigher/react-email-editor 0.4.3 → 0.5.2

package/dist/index.js

@@ -44,7 +44,7 @@ function usePluginEditor() {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { useState as useState18 } from "react";
+import { useState as useState20 } from "react";
 
 // src/editor-dnd/EditorDnd.tsx
 import { useLayoutEffect as useLayoutEffect5, useMemo, useRef as useRef7, useState as useState7 } from "react";
@@ -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: [
@@ -4589,12 +4614,11 @@ function Inspector({
   ] });
 }
 
-// src/stage/canvas/Canvas.tsx
-import { useDroppable } from "@dnd-kit/core";
-import {
-  SortableContext,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
+// src/stage/Stage.tsx
+import { useMemo as useMemo4, useState as useState18 } from "react";
+
+// src/stage/preview/usePreviewBuffer.ts
+import { useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect9, useReducer, useRef as useRef13, useState as useState16 } from "react";
 
 // src/render/layout.ts
 function surfaceStyle(body) {
@@ -4611,27 +4635,214 @@ function viewportWidth(device, body) {
   return `${emailViewportWidth(device, body.contentWidth)}px`;
 }
 
+// src/stage/preview/buffer.ts
+function createPreviewBuffer() {
+  return { frames: [null, null], front: null, failure: null };
+}
+function previewBufferReducer(state, action) {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "generated": {
+      const match = action.force ? -1 : state.frames.findIndex((frame) => frame && frame.status !== "failed" && frame.html === action.snapshot.html && frame.width === action.snapshot.width);
+      const target = match < 0 ? state.front === 0 ? 1 : 0 : match;
+      const frames = [...state.frames];
+      frames[target] = match < 0 ? action.snapshot : __spreadProps(__spreadValues({}, frames[target]), { source: action.snapshot.source });
+      const ready = ((_a = frames[target]) == null ? void 0 : _a.status) === "ready";
+      return { frames, front: ready ? target : state.front, failure: ready ? null : state.failure };
+    }
+    case "ready": {
+      const index = state.frames.findIndex((frame) => frame && frame.id === action.id && frame.status === "loading");
+      if (index < 0) return state;
+      const frames = [...state.frames];
+      frames[index] = __spreadProps(__spreadValues({}, frames[index]), { status: "ready" });
+      const current = ((_b = frames[index]) == null ? void 0 : _b.source) === action.source;
+      return { frames, front: current ? index : state.front, failure: current ? null : state.failure };
+    }
+    case "failed": {
+      if (action.id === void 0) {
+        const frames2 = [state.frames[0], state.frames[1]];
+        for (const index2 of [0, 1]) {
+          const frame = frames2[index2];
+          if ((frame == null ? void 0 : frame.status) === "loading") frames2[index2] = __spreadProps(__spreadValues({}, frame), { status: "failed" });
+        }
+        return __spreadProps(__spreadValues({}, state), { frames: frames2, failure: action.failure });
+      }
+      const index = state.frames.findIndex((frame) => frame && frame.id === action.id && frame.status === "loading");
+      if (index < 0) return state;
+      const frames = [...state.frames];
+      frames[index] = __spreadProps(__spreadValues({}, frames[index]), { status: "failed" });
+      return __spreadProps(__spreadValues({}, state), { frames, failure: ((_c = frames[index]) == null ? void 0 : _c.source) === action.failure.source ? action.failure : state.failure });
+    }
+  }
+}
+
+// src/stage/preview/constants.ts
+var PREVIEW_DEBOUNCE_MS = 400;
+var PREVIEW_MAX_WAIT_MS = 2e3;
+var PREVIEW_LOAD_TIMEOUT_MS = 15e3;
+var PREVIEW_BUFFER_SLOTS = [0, 1];
+
+// src/stage/preview/usePreviewBuffer.ts
+function usePreviewBuffer(source, requested) {
+  var _a;
+  const [state, dispatch] = useReducer(previewBufferReducer, void 0, createPreviewBuffer);
+  const [request, setRequest] = useState16({ key: requested ? 1 : 0, force: false });
+  const previousRequested = useRef13(requested);
+  const sourceRef = useRef13(source);
+  const pendingSince = useRef13(null);
+  const attempted = useRef13(null);
+  const revision = useRef13(0);
+  useLayoutEffect9(() => {
+    sourceRef.current = source;
+  }, [source]);
+  const flush = useCallback(() => setRequest((value) => __spreadProps(__spreadValues({}, value), { key: value.key + 1, force: false })), []);
+  useEffect6(() => {
+    var _a2, _b, _c;
+    const enteringPreview = requested && !previousRequested.current;
+    previousRequested.current = requested;
+    const newRequest = request.key > 0 && ((_a2 = attempted.current) == null ? void 0 : _a2.requestKey) !== request.key;
+    const force = newRequest && request.force;
+    if (((_b = attempted.current) == null ? void 0 : _b.source) === source && !force) {
+      attempted.current.requestKey = request.key;
+      return;
+    }
+    const immediate = enteringPreview || newRequest;
+    (_c = pendingSince.current) != null ? _c : pendingSince.current = Date.now();
+    const remaining = Math.max(0, PREVIEW_MAX_WAIT_MS - (Date.now() - pendingSince.current));
+    let idle;
+    let cancelled = false;
+    const generate = () => {
+      if (cancelled || sourceRef.current !== source) return;
+      attempted.current = { source, requestKey: request.key };
+      pendingSince.current = null;
+      try {
+        const html = source.config.toHtml(source.document, { resolveHtmlTemplates: true, variables: source.variables });
+        dispatch({ type: "generated", snapshot: { id: ++revision.current, source, html, width: viewportWidth(source.device, source.document.body), status: "loading" }, force });
+      } catch (error) {
+        dispatch({ type: "failed", failure: { source, message: error instanceof Error ? error.message : String(error) || "Email preview failed." } });
+      }
+    };
+    const delay = immediate ? 0 : Math.min(PREVIEW_DEBOUNCE_MS, remaining);
+    const timer = setTimeout(() => {
+      if (immediate || typeof requestIdleCallback !== "function") generate();
+      else idle = requestIdleCallback(generate, { timeout: Math.max(1, remaining - delay) });
+    }, delay);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+      if (idle !== void 0) cancelIdleCallback(idle);
+    };
+  }, [source, requested, request]);
+  const markReady = useCallback((id) => {
+    dispatch({ type: "ready", id, source: sourceRef.current });
+  }, []);
+  const markFailed = useCallback((id, message) => {
+    dispatch({ type: "failed", id, failure: { source: sourceRef.current, message } });
+  }, []);
+  const retry = useCallback(() => setRequest((value) => __spreadProps(__spreadValues({}, value), { key: value.key + 1, force: true })), []);
+  const front = state.front === null ? null : state.frames[state.front];
+  const failure = ((_a = state.failure) == null ? void 0 : _a.source) === source ? state.failure : null;
+  const displayFailure = failure != null ? failure : state.front === null ? state.failure : null;
+  return __spreadProps(__spreadValues({}, state), { failure, displayFailure, ready: (front == null ? void 0 : front.source) === source, markReady, markFailed, flush, retry });
+}
+
+// src/stage/canvas/Canvas.tsx
+import { useDroppable } from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+
 // src/stage/canvas/CanvasBlock.tsx
-import { useId as useId13, useMemo as useMemo3, useState as useState16 } from "react";
+import { useId as useId13, useMemo as useMemo3, useState as useState17 } 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) {
@@ -4646,11 +4857,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,
@@ -4674,7 +4885,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,
@@ -4698,42 +4909,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);
@@ -4742,9 +4955,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
@@ -4769,7 +5013,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) {
@@ -4835,12 +5079,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) {
@@ -4866,7 +5110,7 @@ function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options
 }
 
 // src/stage/canvas/components/HtmlCanvas.tsx
-import { useCallback, useEffect as useEffect6, useRef as useRef13 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef14 } from "react";
 
 // src/render/head-styles.ts
 function extractHeadStyles(html) {
@@ -4887,10 +5131,10 @@ function frameHtml(html, baseCss) {
 }
 function HtmlCanvas({ html, baseCss = "", onSelect }) {
   const hasHtmlTag = /<\/?[a-z][\w:-]*(?:\s[^>]*)?>/i.test(html);
-  const containerRef = useRef13(null);
-  const frameRef = useRef13(null);
-  const cleanupRef = useRef13();
-  const observeContent = useCallback(() => {
+  const containerRef = useRef14(null);
+  const frameRef = useRef14(null);
+  const cleanupRef = useRef14();
+  const observeContent = useCallback2(() => {
     var _a;
     (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
     const container = containerRef.current;
@@ -4931,7 +5175,7 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
       window2.cancelAnimationFrame(animationFrame);
     };
   }, []);
-  useEffect6(() => () => {
+  useEffect7(() => () => {
     var _a;
     return (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
   }, [hasHtmlTag, html]);
@@ -4982,15 +5226,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,
@@ -5101,12 +5347,14 @@ function canvasBlockStyle(block, body) {
 // src/stage/canvas/CanvasBlock.tsx
 import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 function CanvasBlock({
+  active = true,
   block: sourceBlock,
   body,
   definition,
   selected,
   dropEdge,
   variables,
+  templateEngine,
   onSelect,
   onCommitControl,
   onCommitControls,
@@ -5116,10 +5364,11 @@ function CanvasBlock({
 }) {
   var _a, _b, _c;
   const block = useMemo3(() => __spreadProps(__spreadValues({}, sourceBlock), { style: resolveBlockStyle(sourceBlock.style, definition) }), [sourceBlock, definition]);
+  const renderKey = useMemo3(() => ({ definition, templateEngine, variables }), [definition, templateEngine, variables]);
   const toolbarId = useId13();
-  const [toolbarCollapsed, setToolbarCollapsed] = useState16(false);
+  const [toolbarCollapsed, setToolbarCollapsed] = useState17(false);
   const dragData = { kind: "canvas" };
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, data: dragData });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, data: dragData, disabled: !active });
   const select = (event) => {
     event == null ? void 0 : event.stopPropagation();
     onSelect();
@@ -5177,7 +5426,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
@@ -5189,6 +5438,7 @@ function CanvasBlock({
 // src/stage/canvas/Canvas.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
 function Canvas({
+  active = true,
   blocks,
   body,
   definitions,
@@ -5196,6 +5446,7 @@ function Canvas({
   dropTargetId,
   dropEdge,
   variables,
+  templateEngine,
   device,
   onSelect,
   onCommitControl,
@@ -5206,6 +5457,7 @@ function Canvas({
 }) {
   const { setNodeRef, isOver } = useDroppable({
     id: CANVAS_DROP_ID,
+    disabled: !active,
     data: { kind: "canvas" }
   });
   return /* @__PURE__ */ jsx52(
@@ -5220,9 +5472,9 @@ function Canvas({
         if (!ownerWindow || !(target instanceof ownerWindow.Element)) return;
         if (target.closest(".ree-block")) return;
         onSelect(null);
-        const active = ownerDocument.activeElement;
-        if (active instanceof ownerWindow.HTMLElement && active.closest(".ree-rte")) {
-          active.blur();
+        const active2 = ownerDocument.activeElement;
+        if (active2 instanceof ownerWindow.HTMLElement && active2.closest(".ree-rte")) {
+          active2.blur();
         }
       },
       children: /* @__PURE__ */ jsx52(
@@ -5257,11 +5509,13 @@ function Canvas({
                         CanvasBlock,
                         {
                           block,
+                          active,
                           body,
                           definition: getBlockDefinition(block.type, definitions),
                           selected: block.id === selectedId,
                           dropEdge: dropTargetId === block.id ? dropEdge : null,
                           variables,
+                          templateEngine,
                           onSelect: () => onSelect(block.id),
                           onCommitControl,
                           onCommitControls,
@@ -5284,135 +5538,134 @@ function Canvas({
 }
 
 // src/stage/preview/Preview.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef14 } 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");
-}
+import { useRef as useRef16 } from "react";
 
-// src/stage/preview/Preview.tsx
+// src/stage/preview/PreviewFrame.tsx
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef15 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
-function Preview({ document, definitions, variables, device }) {
-  const frameRef = useRef14(null);
-  const cleanupRef = useRef14();
-  const html = useMemo4(
-    () => documentToHtml(document, definitions, {
-      resolveHtmlTemplates: true,
-      variables
-    }),
-    [document, definitions, variables]
-  );
-  const observeContent = useCallback2(() => {
-    var _a;
-    (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+function PreviewFrame({ snapshot, onReady, onFailed }) {
+  const frameRef = useRef15(null);
+  const { id, html } = snapshot;
+  useLayoutEffect10(() => {
     const frame = frameRef.current;
-    const frameDocument = frame == null ? void 0 : frame.contentDocument;
-    const frameWindow = frameDocument == null ? void 0 : frameDocument.defaultView;
-    if (!frame || !(frameDocument == null ? void 0 : frameDocument.body) || !frameWindow) return;
-    let animationFrame = 0;
-    const fit = () => {
-      frame.style.height = `${frameDocument.body.getBoundingClientRect().height}px`;
+    const ownerWindow = frame == null ? void 0 : frame.ownerDocument.defaultView;
+    if (!frame || !ownerWindow) return;
+    let status = "loading";
+    let stopObserving;
+    const fail = (message) => {
+      if (status !== "loading") return;
+      status = "failed";
+      clearTimeout(timer);
+      stopObserving == null ? void 0 : stopObserving();
+      stopObserving = void 0;
+      onFailed(id, message);
     };
-    const scheduleFit = () => {
-      frameWindow.cancelAnimationFrame(animationFrame);
-      animationFrame = frameWindow.requestAnimationFrame(fit);
+    const timer = setTimeout(() => fail("Email preview timed out. Please retry."), PREVIEW_LOAD_TIMEOUT_MS);
+    const observeContent = () => {
+      if (status !== "loading") return;
+      stopObserving == null ? void 0 : stopObserving();
+      stopObserving = void 0;
+      try {
+        const frameDocument = frame.contentDocument;
+        const frameWindow = frameDocument == null ? void 0 : frameDocument.defaultView;
+        if (!(frameDocument == null ? void 0 : frameDocument.body) || !frameWindow) throw new Error("Email preview could not be measured. Please retry.");
+        let animationFrame = 0;
+        let readyFrame = 0;
+        const fit = () => {
+          try {
+            const height = frameDocument.body.getBoundingClientRect().height;
+            if (!Number.isFinite(height) || height < 0) throw new Error("Email preview returned an invalid height. Please retry.");
+            frame.style.height = `${Math.max(1, height)}px`;
+            return true;
+          } catch (error) {
+            fail(error instanceof Error ? error.message : "Email preview could not be measured. Please retry.");
+            return false;
+          }
+        };
+        const scheduleFit = () => {
+          ownerWindow.cancelAnimationFrame(animationFrame);
+          animationFrame = ownerWindow.requestAnimationFrame(fit);
+        };
+        const observer = new frameWindow.ResizeObserver(scheduleFit);
+        stopObserving = () => {
+          observer.disconnect();
+          frameDocument.removeEventListener("load", scheduleFit, true);
+          ownerWindow.cancelAnimationFrame(animationFrame);
+          ownerWindow.cancelAnimationFrame(readyFrame);
+        };
+        observer.observe(frameDocument.body);
+        frameDocument.addEventListener("load", scheduleFit, true);
+        if (!fit()) return;
+        readyFrame = ownerWindow.requestAnimationFrame(() => {
+          if (status !== "loading" || !fit()) return;
+          status = "ready";
+          clearTimeout(timer);
+          onReady(id);
+        });
+      } catch (error) {
+        fail(error instanceof Error ? error.message : "Email preview could not be loaded. Please retry.");
+      }
     };
-    const observer = new frameWindow.ResizeObserver(scheduleFit);
-    observer.observe(frameDocument.body);
-    frameDocument.addEventListener("load", scheduleFit, true);
-    fit();
-    cleanupRef.current = () => {
-      observer.disconnect();
-      frameDocument.removeEventListener("load", scheduleFit, true);
-      frameWindow.cancelAnimationFrame(animationFrame);
+    const loadError = () => fail("Email preview could not be loaded. Please retry.");
+    frame.addEventListener("load", observeContent);
+    frame.addEventListener("error", loadError);
+    return () => {
+      status = "disposed";
+      clearTimeout(timer);
+      stopObserving == null ? void 0 : stopObserving();
+      frame.removeEventListener("load", observeContent);
+      frame.removeEventListener("error", loadError);
     };
-  }, []);
-  useEffect7(() => () => {
-    var _a;
-    return (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
-  }, [html]);
-  return /* @__PURE__ */ jsx53("div", { className: "ree-preview-stage", children: /* @__PURE__ */ jsx53(
-    "div",
-    {
-      className: "ree-email-viewport",
-      style: {
-        width: viewportWidth(device, document.body),
-        marginLeft: "auto",
-        marginRight: "auto"
-      },
-      children: /* @__PURE__ */ jsx53(
-        "iframe",
-        {
-          ref: frameRef,
-          className: "ree-preview-frame",
-          title: "Email preview",
-          srcDoc: html,
-          onLoad: observeContent,
-          style: {
-            backgroundColor: "#ffffff"
-          }
-        }
-      )
-    }
-  ) });
+  }, [id, onReady, onFailed]);
+  return /* @__PURE__ */ jsx53("iframe", { ref: frameRef, className: "ree-preview-frame", title: "Email preview", sandbox: "allow-same-origin", srcDoc: html });
 }
 
-// src/stage/StageHeader.tsx
+// src/stage/preview/Preview.tsx
 import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
+function Preview({ frames, front, failure, onReady, onFailed, onRetry }) {
+  const scrollRef = useRef16({ top: 0, left: 0 });
+  return /* @__PURE__ */ jsxs41("div", { className: "ree-preview-buffer", children: [
+    PREVIEW_BUFFER_SLOTS.map((index) => {
+      const snapshot = frames[index];
+      const visible = front === index;
+      return /* @__PURE__ */ jsx54(
+        "div",
+        __spreadProps(__spreadValues({
+          className: `ree-preview-stage${visible ? "" : " is-buffered"}`,
+          "aria-hidden": !visible
+        }, !visible ? { inert: "" } : {}), {
+          ref: (node) => {
+            if (node && visible) {
+              node.scrollTop = scrollRef.current.top;
+              node.scrollLeft = scrollRef.current.left;
+            }
+          },
+          onScroll: (event) => {
+            if (visible) scrollRef.current = { top: event.currentTarget.scrollTop, left: event.currentTarget.scrollLeft };
+          },
+          children: /* @__PURE__ */ jsx54("div", { className: "ree-email-viewport", style: { width: snapshot == null ? void 0 : snapshot.width, marginLeft: "auto", marginRight: "auto" }, children: snapshot ? /* @__PURE__ */ jsx54(PreviewFrame, { snapshot, onReady, onFailed }, snapshot.id) : null })
+        }),
+        index
+      );
+    }),
+    failure ? /* @__PURE__ */ jsxs41("div", { className: "ree-plugin-error ree-preview-error", role: "alert", children: [
+      /* @__PURE__ */ jsx54("p", { children: failure.message }),
+      /* @__PURE__ */ jsx54(Button, { onClick: onRetry, children: "Retry" })
+    ] }) : null
+  ] });
+}
+
+// src/stage/StageHeader.tsx
+import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 function StageHeader({
   viewMode,
   device,
   onViewModeChange,
   onDeviceChange
 }) {
-  return /* @__PURE__ */ jsxs41("div", { className: "ree-col-head ree-stage-head", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "ree-segment", role: "group", "aria-label": "Editor mode", children: [
-      /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs42("div", { className: "ree-col-head ree-stage-head", children: [
+    /* @__PURE__ */ jsxs42("div", { className: "ree-segment", role: "group", "aria-label": "Editor mode", children: [
+      /* @__PURE__ */ jsx55(
         "button",
         {
           type: "button",
@@ -5421,14 +5674,14 @@ function StageHeader({
           "aria-label": "Edit",
           title: "Edit",
           onClick: () => onViewModeChange("edit"),
-          children: /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx54("path", { d: "M12 20h9" }),
-            /* @__PURE__ */ jsx54("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Z" })
+          children: /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx55("path", { d: "M12 20h9" }),
+            /* @__PURE__ */ jsx55("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Z" })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx54("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx55(
         "button",
         {
           type: "button",
@@ -5437,15 +5690,15 @@ function StageHeader({
           "aria-label": "Preview",
           title: "Preview",
           onClick: () => onViewModeChange("preview"),
-          children: /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx54("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }),
-            /* @__PURE__ */ jsx54("circle", { cx: "12", cy: "12", r: "2.5" })
+          children: /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx55("path", { d: "M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" }),
+            /* @__PURE__ */ jsx55("circle", { cx: "12", cy: "12", r: "2.5" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: "ree-segment", role: "group", "aria-label": "Canvas device", children: [
-      /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsxs42("div", { className: "ree-segment", role: "group", "aria-label": "Canvas device", children: [
+      /* @__PURE__ */ jsx55(
         "button",
         {
           type: "button",
@@ -5454,15 +5707,15 @@ function StageHeader({
           "aria-label": "Desktop",
           title: "Desktop",
           onClick: () => onDeviceChange("desktop"),
-          children: /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx54("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1.5" }),
-            /* @__PURE__ */ jsx54("path", { d: "M8 20h8" }),
-            /* @__PURE__ */ jsx54("path", { d: "M12 16v4" })
+          children: /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx55("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1.5" }),
+            /* @__PURE__ */ jsx55("path", { d: "M8 20h8" }),
+            /* @__PURE__ */ jsx55("path", { d: "M12 16v4" })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx54("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx55(
         "button",
         {
           type: "button",
@@ -5471,9 +5724,9 @@ function StageHeader({
           "aria-label": "Mobile",
           title: "Mobile",
           onClick: () => onDeviceChange("mobile"),
-          children: /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx54("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2" }),
-            /* @__PURE__ */ jsx54("path", { d: "M11 18.5h2" })
+          children: /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx55("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2" }),
+            /* @__PURE__ */ jsx55("path", { d: "M11 18.5h2" })
           ] })
         }
       )
@@ -5482,7 +5735,7 @@ function StageHeader({
 }
 
 // src/stage/Stage.tsx
-import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 function Stage({
   session,
   viewMode,
@@ -5491,62 +5744,70 @@ function Stage({
   onDeviceChange,
   onSelectBlock
 }) {
+  const source = useMemo4(() => ({ document: session.document, config: session.config, variables: session.variables, device }), [session.document, session.config, session.variables, device]);
+  const requested = viewMode === "preview";
+  const preview = usePreviewBuffer(source, requested);
+  const [previewVisible, setPreviewVisible] = useState18(false);
+  if (!requested && previewVisible) setPreviewVisible(false);
+  if (requested && !previewVisible && (preview.ready || preview.failure)) setPreviewVisible(true);
+  const editing = !requested;
   const { targetId, dropEdge } = useEditorDragState();
-  return /* @__PURE__ */ jsxs42("div", { className: "ree-col ree-col-center", children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs43("div", { className: "ree-col ree-col-center", children: [
+    /* @__PURE__ */ jsx56(
       StageHeader,
       {
         viewMode,
         device,
-        onViewModeChange,
+        onViewModeChange: (mode) => {
+          if (mode === "preview") preview.flush();
+          onViewModeChange(mode);
+        },
         onDeviceChange
       }
     ),
-    viewMode === "edit" ? /* @__PURE__ */ jsx55("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx55(
-      Canvas,
-      {
-        blocks: session.document.blocks,
-        body: session.document.body,
-        definitions: session.definitions,
-        selectedId: session.selectedId,
-        dropTargetId: targetId,
-        dropEdge,
-        variables: session.variables,
-        device,
-        onSelect: onSelectBlock,
-        onCommitControl: session.updateControl,
-        onCommitControls: session.updateControls,
-        onCommitStyle: session.updateStyle,
-        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(
-      Preview,
-      {
-        document: session.document,
-        definitions: session.definitions,
-        variables: session.variables,
-        device
-      }
-    ) }) })
+    /* @__PURE__ */ jsxs43("div", { className: "ree-stage-content", "aria-busy": requested && !preview.ready && !preview.failure, children: [
+      /* @__PURE__ */ jsx56("div", __spreadProps(__spreadValues({ className: `ree-stage-view${previewVisible ? " is-buffered" : ""}`, "aria-hidden": previewVisible }, !editing ? { inert: "" } : {}), { children: /* @__PURE__ */ jsx56(
+        Canvas,
+        {
+          blocks: session.document.blocks,
+          body: session.document.body,
+          definitions: session.definitions,
+          active: editing,
+          selectedId: editing ? session.selectedId : null,
+          dropTargetId: targetId,
+          dropEdge,
+          variables: session.variables,
+          templateEngine: session.config.templateEngine,
+          device,
+          onSelect: onSelectBlock,
+          onCommitControl: session.updateControl,
+          onCommitControls: session.updateControls,
+          onCommitStyle: session.updateStyle,
+          onDuplicate: session.duplicateBlock,
+          onRemove: session.removeBlock
+        }
+      ) })),
+      /* @__PURE__ */ jsx56("div", __spreadProps(__spreadValues({ className: `ree-stage-view${previewVisible ? "" : " is-buffered"}`, "aria-hidden": !previewVisible }, !previewVisible ? { inert: "" } : {}), { children: /* @__PURE__ */ jsx56(Preview, { frames: preview.frames, front: preview.front, failure: preview.displayFailure, onReady: preview.markReady, onFailed: preview.markFailed, onRetry: preview.retry }) })),
+      requested && !preview.ready && !preview.failure ? /* @__PURE__ */ jsx56("div", { className: "ree-preview-pending", role: "status", children: "Preparing preview\u2026" }) : null
+    ] })
   ] });
 }
 
 // src/shell/SubjectBar.tsx
-import { useId as useId14, useRef as useRef15 } from "react";
+import { useId as useId14, useRef as useRef17 } from "react";
 
 // src/shell/constants.ts
 var EMPTY_VARIABLES = [];
 var PERSONALIZATION_HINT = "Personalization fields will appear blank if no data is available.";
 
 // src/shell/SubjectBar.tsx
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 function SubjectBar({
   subject,
   variables,
   onSubjectChange
 }) {
-  const inputRef = useRef15(null);
+  const inputRef = useRef17(null);
   const subjectId = useId14();
   const countId = useId14();
   const insertVariable = (token) => {
@@ -5566,10 +5827,10 @@ function SubjectBar({
       (_b2 = inputRef.current) == null ? void 0 : _b2.setSelectionRange(cursor, cursor);
     });
   };
-  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(
+  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(
         TextInput,
         {
           id: subjectId,
@@ -5581,21 +5842,21 @@ function SubjectBar({
           onChange: (event) => onSubjectChange(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsxs43("span", { id: countId, className: "ree-subject-count", children: [
+      /* @__PURE__ */ jsxs44("span", { id: countId, className: "ree-subject-count", children: [
         subject.length,
         "/",
         SUBJECT_MAX_LENGTH
       ] })
     ] }),
-    variables.length > 0 ? /* @__PURE__ */ jsxs43(Fragment5, { children: [
-      /* @__PURE__ */ jsx56(PersonalizationMenu, { variables, onInsert: insertVariable }),
-      /* @__PURE__ */ jsx56("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
+    variables.length > 0 ? /* @__PURE__ */ jsxs44(Fragment5, { children: [
+      /* @__PURE__ */ jsx57(PersonalizationMenu, { variables, onInsert: insertVariable }),
+      /* @__PURE__ */ jsx57("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
     ] }) : null
   ] });
 }
 
 // src/shell/useEditorSession.ts
-import { useCallback as useCallback3, useState as useState17, useSyncExternalStore } from "react";
+import { useCallback as useCallback3, useState as useState19, useSyncExternalStore } from "react";
 
 // src/utils/id.ts
 function generateId(prefix = "block") {
@@ -5694,9 +5955,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 : []) {
@@ -5711,16 +6022,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)
   });
 }
@@ -5855,8 +6171,8 @@ function useEditorSession(editor) {
   const store = getEditorStore(editor);
   const { document, config, variables, resetKey } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   const definitions = config.definitions;
-  const [selectedId, setSelectedId] = useState17(null);
-  const [previousReset, setPreviousReset] = useState17({ editor, resetKey });
+  const [selectedId, setSelectedId] = useState19(null);
+  const [previousReset, setPreviousReset] = useState19({ editor, resetKey });
   if (previousReset.editor !== editor || previousReset.resetKey !== resetKey) {
     setPreviousReset({ editor, resetKey });
     setSelectedId(null);
@@ -5957,21 +6273,21 @@ function useEditorSession(editor) {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 function EmailEditorShell({ editor, height = "100%" }) {
   var _a;
   const session = useEditorSession(editor);
-  const [activeRichText, setActiveRichText] = useState18(null);
-  const [viewMode, setViewMode] = useState18("edit");
-  const [device, setDevice] = useState18("desktop");
-  const [inspectorPanel, setInspectorPanel] = useState18("body");
-  const [previousReset, setPreviousReset] = useState18({ editor, key: session.resetKey });
+  const [activeRichText, setActiveRichText] = useState20(null);
+  const [viewMode, setViewMode] = useState20("edit");
+  const [device, setDevice] = useState20("desktop");
+  const [inspectorPanel, setInspectorPanel] = useState20("body");
+  const [previousReset, setPreviousReset] = useState20({ editor, key: session.resetKey });
   if (previousReset.editor !== editor || previousReset.key !== session.resetKey) {
     setPreviousReset({ editor, key: session.resetKey });
     setActiveRichText(null);
     setInspectorPanel("body");
   }
-  const [previousSelectedId, setPreviousSelectedId] = useState18(session.selectedId);
+  const [previousSelectedId, setPreviousSelectedId] = useState20(session.selectedId);
   if (previousSelectedId !== session.selectedId) {
     setPreviousSelectedId(session.selectedId);
     if (!session.selectedId) setInspectorPanel("body");
@@ -5995,8 +6311,8 @@ function EmailEditorShell({ editor, height = "100%" }) {
     selectBlock(null);
   };
   const showCanvas = () => setViewMode("edit");
-  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(
+  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(
       SubjectBar,
       {
         subject: (_a = session.document.subject) != null ? _a : "",
@@ -6004,8 +6320,8 @@ function EmailEditorShell({ editor, height = "100%" }) {
         onSubjectChange: session.setSubject
       }
     ),
-    /* @__PURE__ */ jsxs44("div", { className: "ree-body", children: [
-      /* @__PURE__ */ jsxs44(
+    /* @__PURE__ */ jsxs45("div", { className: "ree-body", children: [
+      /* @__PURE__ */ jsxs45(
         EditorDnd,
         {
           blocks: session.document.blocks,
@@ -6017,7 +6333,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
           onReorder: session.reorderBlocks,
           onLibraryDragStart: showCanvas,
           children: [
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx58(
               BlockLibrary,
               {
                 definitions: session.config.library,
@@ -6027,7 +6343,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx57(
+            /* @__PURE__ */ jsx58(
               Stage,
               {
                 session,
@@ -6041,7 +6357,7 @@ function EmailEditorShell({ editor, height = "100%" }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx58(
         Inspector,
         {
           panel: inspectorPanel,
@@ -6061,23 +6377,23 @@ function EmailEditorShell({ editor, height = "100%" }) {
 }
 
 // src/EmailEditor.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function EmailEditor(props) {
-  return /* @__PURE__ */ jsx58(EmailEditorShell, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx59(EmailEditorShell, __spreadValues({}, props));
 }
 
 // src/plugins/useEmailEditorConfig.ts
 import { useMemo as useMemo5 } 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 useMemo5(() => buildEmailEditorConfig({ plugins, builtins, pickImage, templateEngine }), [plugins, builtins, pickImage, templateEngine]);
 }
 
 // src/shell/useEmailEditor.ts
-import { useEffect as useEffect8, useInsertionEffect, useLayoutEffect as useLayoutEffect9, useState as useState19 } from "react";
-var useOptionsEffect = typeof window === "undefined" ? useEffect8 : useLayoutEffect9;
+import { useEffect as useEffect8, useInsertionEffect, useLayoutEffect as useLayoutEffect11, useState as useState21 } from "react";
+var useOptionsEffect = typeof window === "undefined" ? useEffect8 : useLayoutEffect11;
 function useEmailEditor(options = {}) {
-  const [store] = useState19(() => createEditorStore(options));
+  const [store] = useState21(() => createEditorStore(options));
   useInsertionEffect(() => {
     store.updateOptions(options);
   });
@@ -6093,12 +6409,12 @@ function useEmailEditorState(editor) {
 }
 
 // src/plugins/components/ControlEditor.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } 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__ */ jsx59(ControlRenderer, { control: definition, value: context.controls[control], body: context.body, variables: context.variables, onChange: (value) => context.setControl(control, value) });
+  return /* @__PURE__ */ jsx60(ControlRenderer, { control: definition, value: context.controls[control], body: context.body, variables: context.variables, onChange: (value) => context.setControl(control, value) });
 }
 export {
   BLOCK_TYPES,
@@ -6130,6 +6446,7 @@ export {
   createDimensionControls,
   createEmailDocument,
   createTypographyControls,
+  defaultTemplateEngine,
   defineBlock,
   documentToHtml,
   generateId,
@@ -6142,5 +6459,6 @@ export {
   useEmailEditor,
   useEmailEditorConfig,
   useEmailEditorState,
+  validateTemplate,
   variablesToTemplateData
 };