@standhigher/react-email-editor 0.3.0 → 0.4.3

package/dist/index.js

@@ -31,9 +31,6 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/EmailEditor.tsx
-import { forwardRef as forwardRef3 } from "react";
-
 // src/plugins/editor-context.ts
 import { createContext, useContext } from "react";
 var RichTextFocusContext = createContext({ active: null, activate: () => {
@@ -47,7 +44,7 @@ function usePluginEditor() {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { forwardRef as forwardRef2, useState as useState18 } from "react";
+import { useState as useState18 } from "react";
 
 // src/editor-dnd/EditorDnd.tsx
 import { useLayoutEffect as useLayoutEffect5, useMemo, useRef as useRef7, useState as useState7 } from "react";
@@ -2730,13 +2727,13 @@ function bindPluginComponent(Component2) {
 // src/plugins/controls.ts
 import { createElement as createElement2 } from "react";
 
-// src/plugins/config-snapshot.ts
+// src/utils/snapshot.ts
 import { isValidElement } from "react";
-function snapshotConfig(value) {
-  if (Array.isArray(value)) return Object.freeze(value.map((item) => snapshotConfig(item)));
+function snapshotValue(value) {
+  if (Array.isArray(value)) return Object.freeze(value.map((item) => snapshotValue(item)));
   if (!value || typeof value !== "object" || isValidElement(value)) return value;
   if (Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return value;
-  return Object.freeze(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshotConfig(item)])));
+  return Object.freeze(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshotValue(item)])));
 }
 
 // src/plugins/control-validation.ts
@@ -2761,10 +2758,10 @@ function controlConstraintError(kind, options, value) {
 // src/plugins/controls.ts
 function buildControl(kind, options, fallback, parse) {
   var _b;
-  const _a = snapshotConfig(options), { component: Component2, validate } = _a, config = __objRest(_a, ["component", "validate"]);
+  const _a = snapshotValue(options), { component: Component2, validate } = _a, config = __objRest(_a, ["component", "validate"]);
   const defaultValue = structuredClone((_b = config.defaultValue) != null ? _b : fallback);
   const read = (value) => value === void 0 ? structuredClone(defaultValue) : parse(value);
-  return snapshotConfig(__spreadProps(__spreadValues({}, config), {
+  return snapshotValue(__spreadProps(__spreadValues({}, config), {
     kind,
     defaultValue,
     read,
@@ -2799,8 +2796,8 @@ var EmailControls = {
   }),
   list(options) {
     const _a = options, { controls } = _a, config = __objRest(_a, ["controls"]);
-    const schema = snapshotConfig(controls);
-    return snapshotConfig(__spreadProps(__spreadValues({}, buildControl("list", config, [], (value) => Array.isArray(value) ? value.map((item) => readControlValues(schema, item && typeof item === "object" ? item : {})) : [])), { itemControls: schema }));
+    const schema = snapshotValue(controls);
+    return snapshotValue(__spreadProps(__spreadValues({}, buildControl("list", config, [], (value) => Array.isArray(value) ? value.map((item) => readControlValues(schema, item && typeof item === "object" ? item : {})) : [])), { itemControls: schema }));
   },
   custom(options) {
     const _a = options, { read } = _a, config = __objRest(_a, ["read"]);
@@ -2811,7 +2808,7 @@ var EmailControls = {
 // src/plugins/define-block.ts
 function defineBlock(input) {
   var _a, _b, _c;
-  const options = snapshotConfig(input);
+  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 : {};
   const readControls = (source) => {
@@ -2824,7 +2821,7 @@ function defineBlock(input) {
   for (const item of (_b = options.styleControls) != null ? _b : []) styles.set(item.id, item);
   const inline = Object.entries(schema).filter(([, spec]) => spec.kind === "richText" && spec.inline);
   if (inline.length > 1 && !options.Canvas) throw new Error(`${options.type}: multiple inline controls require a Canvas component.`);
-  return snapshotConfig({
+  return snapshotValue({
     type: options.type,
     title: options.title,
     description: options.description,
@@ -3843,7 +3840,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 = [
@@ -3888,7 +3885,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";
@@ -4082,41 +4079,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
   ] });
 }
 
@@ -4124,8 +4227,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;
@@ -4133,6 +4236,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 });
@@ -4141,30 +4249,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;
@@ -4176,8 +4286,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;
@@ -4222,7 +4332,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: [
@@ -4242,15 +4352,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(() => () => {
@@ -4287,12 +4397,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 },
@@ -4350,7 +4460,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);
@@ -4502,7 +4612,7 @@ 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";
 
@@ -4638,8 +4748,10 @@ function renderTemplatePreview(html, defaultData) {
 }
 
 // src/render/block-html.ts
-function normalizeBlockRenderOptions(options) {
-  return typeof options === "boolean" ? { resolveHtmlTemplate: options } : options;
+function assertBlockRenderOptions(options) {
+  if (!options || typeof options !== "object" || Array.isArray(options)) {
+    throw new TypeError("Block render options must be an object.");
+  }
 }
 function renderPreparedBlock(context, definition) {
   try {
@@ -4712,23 +4824,23 @@ function mergeTemplateData(variables, defaultData) {
 }
 function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
   var _a;
-  const normalizedOptions = normalizeBlockRenderOptions(options);
+  assertBlockRenderOptions(options);
   const rendered = renderBlock(
     node,
     definitions,
     mode,
-    (_a = normalizedOptions.body) != null ? _a : DEFAULT_EMAIL_BODY
+    (_a = options.body) != null ? _a : DEFAULT_EMAIL_BODY
   );
-  return resolveBlockContent(rendered, node, normalizedOptions);
+  return resolveBlockContent(rendered, node, options);
 }
-function resolveBlockContent(rendered, node, normalizedOptions) {
+function resolveBlockContent(rendered, node, options) {
   var _a, _b;
-  if (!normalizedOptions.resolveHtmlTemplate) {
-    return applyListedVariableDots(rendered, (_a = normalizedOptions.variables) != null ? _a : []);
+  if (!options.resolveHtmlTemplate) {
+    return applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
   }
   return renderTemplatePreview(
     rendered,
-    (_b = normalizedOptions.templateData) != null ? _b : node.defaultData
+    (_b = options.templateData) != null ? _b : node.defaultData
   );
 }
 function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body = DEFAULT_EMAIL_BODY) {
@@ -4742,10 +4854,10 @@ function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body =
 }
 function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
   var _a, _b, _c;
-  const normalizedOptions = normalizeBlockRenderOptions(options);
-  const body = (_a = normalizedOptions.body) != null ? _a : DEFAULT_EMAIL_BODY;
+  assertBlockRenderOptions(options);
+  const body = (_a = options.body) != null ? _a : DEFAULT_EMAIL_BODY;
   const style = resolveBlockStyle(node.style, getBlockDefinition(node.type, definitions));
-  const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, normalizedOptions), {
+  const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, options), {
     body
   }));
   const height = cssPx((_b = style.dimension) == null ? void 0 : _b.height);
@@ -4754,7 +4866,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) {
@@ -4775,9 +4887,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);
@@ -4785,8 +4897,8 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
     const frame = frameRef.current;
     const document = frame == null ? void 0 : frame.contentDocument;
     if (!container || !frame || !(document == null ? void 0 : document.body)) return;
-    const window = document.defaultView;
-    if (!window) return;
+    const window2 = document.defaultView;
+    if (!window2) return;
     let animationFrame = 0;
     const fit = () => {
       const availableWidth = container.clientWidth;
@@ -4798,12 +4910,12 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
       container.style.height = `${contentHeight}px`;
     };
     const scheduleFit = () => {
-      window.cancelAnimationFrame(animationFrame);
-      animationFrame = window.requestAnimationFrame(fit);
+      window2.cancelAnimationFrame(animationFrame);
+      animationFrame = window2.requestAnimationFrame(fit);
     };
-    const observer = new window.ResizeObserver(scheduleFit);
+    const observer = new window2.ResizeObserver(scheduleFit);
     let previousWidth = container.clientWidth;
-    const containerObserver = new window.ResizeObserver(() => {
+    const containerObserver = new window2.ResizeObserver(() => {
       if (container.clientWidth === previousWidth) return;
       previousWidth = container.clientWidth;
       scheduleFit();
@@ -4816,7 +4928,7 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
       observer.disconnect();
       containerObserver.disconnect();
       document.removeEventListener("load", scheduleFit, true);
-      window.cancelAnimationFrame(animationFrame);
+      window2.cancelAnimationFrame(animationFrame);
     };
   }, []);
   useEffect6(() => () => {
@@ -4898,7 +5010,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,
@@ -4908,7 +5020,7 @@ function BlockActions({
   onDuplicate,
   onRemove
 }) {
-  const tooltipId = useId11();
+  const tooltipId = useId12();
   const toggleLabel = toolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar";
   return /* @__PURE__ */ jsxs39(
     "div",
@@ -5004,8 +5116,8 @@ 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 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) => {
@@ -5172,7 +5284,7 @@ function Canvas({
 }
 
 // src/stage/preview/Preview.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef13 } from "react";
+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 = {}) {
@@ -5226,8 +5338,8 @@ function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
 // src/stage/preview/Preview.tsx
 import { jsx as jsx53 } from "react/jsx-runtime";
 function Preview({ document, definitions, variables, device }) {
-  const frameRef = useRef13(null);
-  const cleanupRef = useRef13();
+  const frameRef = useRef14(null);
+  const cleanupRef = useRef14();
   const html = useMemo4(
     () => documentToHtml(document, definitions, {
       resolveHtmlTemplates: true,
@@ -5420,75 +5532,23 @@ function Stage({
   ] });
 }
 
+// src/shell/SubjectBar.tsx
+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/SubjectBar.tsx
-import { useId as useId13, useRef as useRef15 } from "react";
-
-// 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 countId = useId13();
+  const subjectId = useId14();
+  const countId = useId14();
   const insertVariable = (token) => {
     var _a, _b;
     const input = inputRef.current;
@@ -5506,13 +5566,13 @@ 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: "ree-email-subject", 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: "ree-email-subject",
+          id: subjectId,
           ref: inputRef,
           className: "ree-subject-input",
           value: subject,
@@ -5521,19 +5581,22 @@ 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
   ] });
 }
 
+// src/shell/useEditorSession.ts
+import { useCallback as useCallback3, useState as useState17, useSyncExternalStore } from "react";
+
 // src/utils/id.ts
 function generateId(prefix = "block") {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -5542,62 +5605,6 @@ function generateId(prefix = "block") {
   return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-// src/document/create-block.ts
-function createBlockNode(type, definitions) {
-  var _a, _b;
-  const definition = getBlockDefinition(type, definitions);
-  if (!definition) return null;
-  const controls = structuredClone(definition.readControls({}));
-  let style = resolveBlockStyle(definition.defaultStyle, definition);
-  for (const control of (_a = definition.styleControls) != null ? _a : []) {
-    const [group, key] = control.id.split(".");
-    const stored = (_b = definition.defaultStyle) == null ? void 0 : _b[group];
-    if (control.defaultValue !== void 0 && (!stored || !(key in stored))) style = writeStyleValue(style, control.id, control.defaultValue);
-  }
-  return {
-    id: generateId(type),
-    type,
-    controls,
-    style,
-    defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
-  };
-}
-
-// src/plugins/config.ts
-function createEmailEditorConfig(options = {}) {
-  var _a, _b, _c;
-  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 : []) {
-    if (customTypes.has(plugin.type)) throw new Error(`Duplicate block plugin: ${plugin.type}`);
-    if (definitions.has(plugin.type) && !plugin.override) throw new Error(`Block ${plugin.type} already exists. Set override: true to replace it.`);
-    customTypes.add(plugin.type);
-    definitions.set(plugin.type, plugin);
-  }
-  const builtinTypes = new Set(DEFAULT_BLOCKS.map((block) => block.type));
-  const visibleBuiltins = options.builtins === false ? [] : (_b = options.builtins) != null ? _b : [...builtinTypes];
-  if (new Set(visibleBuiltins).size !== visibleBuiltins.length) throw new Error("Duplicate builtin in library order.");
-  for (const type of visibleBuiltins) if (!builtinTypes.has(type)) throw new Error(`Unknown builtin block: ${type}`);
-  const all = Object.freeze([...definitions.values()].map((plugin) => snapshotConfig(plugin)));
-  const registered = new Map(all.map((plugin) => [plugin.type, plugin]));
-  return Object.freeze({
-    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))]),
-    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),
-    validate: (document) => validateDocument(document, all)
-  });
-}
-var DEFAULT_EDITOR_CONFIG = createEmailEditorConfig();
-
-// src/shell/useEditorSession.ts
-import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect8, useMemo as useMemo5, useRef as useRef16, useState as useState17 } from "react";
-
 // src/document/mutations.ts
 function moveItem(items, from, to) {
   const next = items.slice();
@@ -5666,68 +5673,215 @@ function updateBodySettings(document, patch) {
   });
 }
 
+// src/document/create-block.ts
+function createBlockNode(type, definitions) {
+  var _a, _b;
+  const definition = getBlockDefinition(type, definitions);
+  if (!definition) return null;
+  const controls = structuredClone(definition.readControls({}));
+  let style = resolveBlockStyle(definition.defaultStyle, definition);
+  for (const control of (_a = definition.styleControls) != null ? _a : []) {
+    const [group, key] = control.id.split(".");
+    const stored = (_b = definition.defaultStyle) == null ? void 0 : _b[group];
+    if (control.defaultValue !== void 0 && (!stored || !(key in stored))) style = writeStyleValue(style, control.id, control.defaultValue);
+  }
+  return {
+    id: generateId(type),
+    type,
+    controls,
+    style,
+    defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
+  };
+}
+
+// src/plugins/config.ts
+function buildEmailEditorConfig(options = {}) {
+  var _a, _b, _c;
+  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 : []) {
+    if (customTypes.has(plugin.type)) throw new Error(`Duplicate block plugin: ${plugin.type}`);
+    if (definitions.has(plugin.type) && !plugin.override) throw new Error(`Block ${plugin.type} already exists. Set override: true to replace it.`);
+    customTypes.add(plugin.type);
+    definitions.set(plugin.type, plugin);
+  }
+  const builtinTypes = new Set(DEFAULT_BLOCKS.map((block) => block.type));
+  const visibleBuiltins = options.builtins === false ? [] : (_b = options.builtins) != null ? _b : [...builtinTypes];
+  if (new Set(visibleBuiltins).size !== visibleBuiltins.length) throw new Error("Duplicate builtin in library order.");
+  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]));
+  return Object.freeze({
+    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))]),
+    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),
+    validate: (document) => validateDocument(document, all)
+  });
+}
+var DEFAULT_EDITOR_CONFIG = buildEmailEditorConfig();
+
+// src/shell/editor-store.ts
+var stores = /* @__PURE__ */ new WeakMap();
+function copyDocument(document) {
+  return ensureEmailDocument(structuredClone(document));
+}
+function getEditorStore(editor) {
+  const store = stores.get(editor);
+  if (!store) throw new Error("EmailEditor requires an instance returned by useEmailEditor().");
+  return store;
+}
+function createEditorStore(options) {
+  var _a, _b, _c, _d;
+  let callbacks = options;
+  const base = copyDocument((_a = options.initialDocument) != null ? _a : createEmptyDocument());
+  const initial = options.body === void 0 ? base : __spreadProps(__spreadValues({}, base), { body: mergeEmailBody(base.body, options.body) });
+  let snapshot = {
+    document: initial,
+    config: (_b = options.config) != null ? _b : DEFAULT_EDITOR_CONFIG,
+    variables: structuredClone((_c = options.variables) != null ? _c : EMPTY_VARIABLES),
+    resetKey: generateId("session")
+  };
+  let state = snapshotValue({ document: copyDocument(initial) });
+  let bodyKey = JSON.stringify(options.body);
+  let variablesKey = JSON.stringify((_d = options.variables) != null ? _d : EMPTY_VARIABLES);
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => listeners.forEach((listener) => listener());
+  let optionsChanged = false;
+  let pendingBodyDocument;
+  const setSnapshot = (next) => {
+    if (next.document !== snapshot.document) state = snapshotValue({ document: copyDocument(next.document) });
+    snapshot = next;
+  };
+  const flushOptions = () => {
+    const shouldNotify = optionsChanged;
+    const document = pendingBodyDocument;
+    const onChange = callbacks.onChange;
+    optionsChanged = false;
+    pendingBodyDocument = void 0;
+    if (shouldNotify) notify();
+    if (document) onChange == null ? void 0 : onChange(copyDocument(document));
+  };
+  const publish = (next) => {
+    setSnapshot(next);
+    notify();
+  };
+  const commit = (document, bodyChange = false) => {
+    var _a2, _b2;
+    flushOptions();
+    if (document === snapshot.document) return;
+    const next = copyDocument(document);
+    publish(__spreadProps(__spreadValues({}, snapshot), { document: next }));
+    (_a2 = callbacks.onChange) == null ? void 0 : _a2.call(callbacks, copyDocument(next));
+    if (bodyChange) (_b2 = callbacks.onBodyChange) == null ? void 0 : _b2.call(callbacks, structuredClone(next.body));
+  };
+  const replace = (document) => {
+    var _a2;
+    flushOptions();
+    const next = copyDocument(document);
+    publish(__spreadProps(__spreadValues({}, snapshot), { document: next, resetKey: generateId("session") }));
+    (_a2 = callbacks.onChange) == null ? void 0 : _a2.call(callbacks, copyDocument(next));
+  };
+  const getDocument = () => copyDocument(snapshot.document);
+  const editor = Object.freeze({
+    getDocument,
+    getJson: () => JSON.stringify(getDocument(), null, 2),
+    getHtml: () => snapshot.config.toHtml(getDocument(), { variables: structuredClone(snapshot.variables) }),
+    getRenderedHtml: () => snapshot.config.toHtml(getDocument(), { variables: structuredClone(snapshot.variables), resolveHtmlTemplates: true }),
+    getData: () => {
+      const document = getDocument();
+      const { config } = snapshot;
+      const variables = structuredClone(snapshot.variables);
+      return {
+        document,
+        json: JSON.stringify(document, null, 2),
+        html: config.toHtml(document, { variables }),
+        renderedHtml: config.toHtml(document, { variables, resolveHtmlTemplates: true })
+      };
+    },
+    setDocument: replace,
+    reset: () => replace(initial),
+    validate: () => snapshot.config.validate(getDocument())
+  });
+  const store = {
+    editor,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => snapshot,
+    getState: () => state,
+    commit,
+    flushOptions,
+    updateOptions: (nextOptions) => {
+      var _a2, _b2, _c2;
+      callbacks = nextOptions;
+      const nextVariablesKey = JSON.stringify((_a2 = nextOptions.variables) != null ? _a2 : EMPTY_VARIABLES);
+      const nextBodyKey = JSON.stringify(nextOptions.body);
+      let next = snapshot;
+      const config = (_b2 = nextOptions.config) != null ? _b2 : DEFAULT_EDITOR_CONFIG;
+      if (config !== next.config || nextVariablesKey !== variablesKey) {
+        next = __spreadProps(__spreadValues({}, next), { config, variables: structuredClone((_c2 = nextOptions.variables) != null ? _c2 : EMPTY_VARIABLES) });
+      }
+      variablesKey = nextVariablesKey;
+      let bodyChanged = false;
+      if (bodyKey !== nextBodyKey && nextOptions.body !== void 0) {
+        const body = mergeEmailBody(next.document.body, nextOptions.body);
+        bodyChanged = !sameEmailBody(next.document.body, body);
+        if (bodyChanged) next = __spreadProps(__spreadValues({}, next), { document: __spreadProps(__spreadValues({}, next.document), { body }) });
+      }
+      bodyKey = nextBodyKey;
+      if (next !== snapshot) {
+        setSnapshot(next);
+        optionsChanged = true;
+      }
+      if (bodyChanged) pendingBodyDocument = next.document;
+    }
+  };
+  stores.set(editor, store);
+  return store;
+}
+
 // src/shell/useEditorSession.ts
-function useEditorSession({
-  initialDocument,
-  body,
-  config = DEFAULT_EDITOR_CONFIG,
-  variables = EMPTY_VARIABLES,
-  onChange,
-  onBodyChange
-}) {
+function useEditorSession(editor) {
   var _a;
+  const store = getEditorStore(editor);
+  const { document, config, variables, resetKey } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   const definitions = config.definitions;
-  const [document, setDocument] = useState17(() => {
-    const base = ensureEmailDocument(
-      structuredClone(initialDocument != null ? initialDocument : createEmptyDocument())
-    );
-    if (body === void 0) return base;
-    return __spreadProps(__spreadValues({}, base), { body: mergeEmailBody(base.body, body) });
-  });
   const [selectedId, setSelectedId] = useState17(null);
-  const documentRef = useRef16(document);
-  useLayoutEffect8(() => {
-    documentRef.current = document;
-  }, [document]);
-  const commit = useCallback3(
-    (next) => {
-      documentRef.current = next;
-      setDocument(next);
-      onChange == null ? void 0 : onChange(structuredClone(next));
-    },
-    [onChange]
-  );
-  useEffect9(() => {
-    if (body === void 0) return;
-    const current = documentRef.current;
-    const nextBody = mergeEmailBody(current.body, body);
-    if (sameEmailBody(resolveEmailBody(current.body), nextBody)) return;
-    commit(__spreadProps(__spreadValues({}, current), { body: nextBody }));
-  }, [body, commit]);
-  const getDocument = useCallback3(
-    () => ensureEmailDocument(structuredClone(documentRef.current)),
-    []
-  );
+  const [previousReset, setPreviousReset] = useState17({ editor, resetKey });
+  if (previousReset.editor !== editor || previousReset.resetKey !== resetKey) {
+    setPreviousReset({ editor, resetKey });
+    setSelectedId(null);
+  }
+  const commit = store.commit;
   const selectBlock = useCallback3((id) => {
     setSelectedId(id);
   }, []);
   const insertBlock = useCallback3(
     (type, index) => {
-      const node = createBlockNode(type, definitions);
+      const node = definitions.some((definition) => definition.type === type) ? config.createBlock(type) : null;
       if (!node) return false;
-      commit(insertBlockNode(documentRef.current, node, index));
+      commit(insertBlockNode(store.getSnapshot().document, node, index));
       setSelectedId(node.id);
       return true;
     },
-    [commit, definitions]
+    [commit, definitions, config, store]
   );
   const updateControls = useCallback3(
     (id, patch) => {
-      const current = documentRef.current;
+      const current = store.getSnapshot().document;
       const next = updateBlockControls(current, id, patch);
       if (next !== current) commit(next);
     },
-    [commit]
+    [commit, store]
   );
   const updateControl = useCallback3(
     (id, name, value) => updateControls(id, { [name]: value }),
@@ -5735,58 +5889,56 @@ function useEditorSession({
   );
   const updateStyle = useCallback3(
     (id, styleId, value) => {
-      commit(updateBlockStyle(documentRef.current, id, styleId, value));
+      commit(updateBlockStyle(store.getSnapshot().document, id, styleId, value));
     },
-    [commit]
+    [commit, store]
   );
   const updateBody = useCallback3(
     (patch) => {
-      const next = updateBodySettings(documentRef.current, patch);
-      commit(next);
-      onBodyChange == null ? void 0 : onBodyChange(structuredClone(next.body));
+      const next = updateBodySettings(store.getSnapshot().document, patch);
+      store.commit(next, true);
     },
-    [commit, onBodyChange]
+    [store]
   );
   const moveBlock = useCallback3(
     (id, direction) => {
-      commit(moveBlockBy(documentRef.current, id, direction));
+      commit(moveBlockBy(store.getSnapshot().document, id, direction));
     },
-    [commit]
+    [commit, store]
   );
   const duplicateBlock = useCallback3(
     (id) => {
-      commit(duplicateBlockNode(documentRef.current, id));
+      commit(duplicateBlockNode(store.getSnapshot().document, id));
     },
-    [commit]
+    [commit, store]
   );
   const removeBlock = useCallback3(
     (id) => {
-      commit(removeBlockNode(documentRef.current, id));
+      commit(removeBlockNode(store.getSnapshot().document, id));
       setSelectedId((current) => current === id ? null : current);
     },
-    [commit]
+    [commit, store]
   );
   const reorderBlocks = useCallback3(
     (activeId, overId) => {
-      commit(reorderBlockNodes(documentRef.current, activeId, overId));
+      commit(reorderBlockNodes(store.getSnapshot().document, activeId, overId));
     },
-    [commit]
+    [commit, store]
   );
   const setSubject = useCallback3(
     (subject) => {
-      commit(withSubject(documentRef.current, subject.slice(0, SUBJECT_MAX_LENGTH)));
+      commit(withSubject(store.getSnapshot().document, subject.slice(0, SUBJECT_MAX_LENGTH)));
     },
-    [commit]
+    [commit, store]
   );
-  const resolvedDocument = useMemo5(() => ensureEmailDocument(document), [document]);
-  const selectedBlock = (_a = resolvedDocument.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
+  const selectedBlock = (_a = document.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
   const selectedDefinition = selectedBlock ? getBlockDefinition(selectedBlock.type, definitions) : void 0;
-  return {
-    document: resolvedDocument,
-    getDocument,
+  return __spreadProps(__spreadValues({}, editor), {
+    document,
     definitions,
     config,
     variables,
+    resetKey,
     selectedId,
     selectedBlock,
     selectedDefinition,
@@ -5801,166 +5953,152 @@ function useEditorSession({
     removeBlock,
     reorderBlocks,
     setSubject
-  };
-}
-
-// src/shell/useEditorHandle.ts
-import { useImperativeHandle } from "react";
-function useEditorHandle(ref, { getDocument, definitions, variables }) {
-  useImperativeHandle(ref, () => ({
-    getData: () => {
-      const document = getDocument();
-      return {
-        document,
-        json: JSON.stringify(document, null, 2),
-        html: documentToHtml(document, definitions, { variables }),
-        renderedHtml: documentToHtml(document, definitions, {
-          resolveHtmlTemplates: true,
-          variables
-        })
-      };
-    },
-    getDocument,
-    getJson: () => JSON.stringify(getDocument(), null, 2),
-    getHtml: () => documentToHtml(getDocument(), definitions, { variables }),
-    getRenderedHtml: () => documentToHtml(getDocument(), definitions, {
-      resolveHtmlTemplates: true,
-      variables
-    })
-  }), [getDocument, definitions, variables]);
+  });
 }
 
 // src/shell/EmailEditorShell.tsx
-import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
-var EmailEditorShell = forwardRef2(
-  function EmailEditorShell2({
-    initialDocument,
-    body,
-    config,
-    variables = EMPTY_VARIABLES,
-    height = "100%",
-    onChange,
-    onBodyChange
-  }, ref) {
-    var _a;
-    const session = useEditorSession({
-      initialDocument,
-      body,
-      config,
-      variables,
-      onChange,
-      onBodyChange
-    });
-    useEditorHandle(ref, session);
-    const [activeRichText, setActiveRichText] = useState18(null);
-    const [viewMode, setViewMode] = useState18("edit");
-    const [device, setDevice] = useState18("desktop");
-    const [inspectorPanel, setInspectorPanel] = useState18("body");
-    const [previousSelectedId, setPreviousSelectedId] = useState18(session.selectedId);
-    if (previousSelectedId !== session.selectedId) {
-      setPreviousSelectedId(session.selectedId);
-      if (!session.selectedId) setInspectorPanel("body");
+import { jsx as jsx57, jsxs as jsxs44 } 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 });
+  if (previousReset.editor !== editor || previousReset.key !== session.resetKey) {
+    setPreviousReset({ editor, key: session.resetKey });
+    setActiveRichText(null);
+    setInspectorPanel("body");
+  }
+  const [previousSelectedId, setPreviousSelectedId] = useState18(session.selectedId);
+  if (previousSelectedId !== session.selectedId) {
+    setPreviousSelectedId(session.selectedId);
+    if (!session.selectedId) setInspectorPanel("body");
+  }
+  const selectBlock = (id) => {
+    const hadSelection = session.selectedId !== null;
+    session.selectBlock(id);
+    if (!id) {
+      setInspectorPanel("body");
+      return;
     }
-    const selectBlock = (id) => {
-      const hadSelection = session.selectedId !== null;
-      session.selectBlock(id);
-      if (!id) {
-        setInspectorPanel("body");
-        return;
-      }
-      if (!hadSelection) setInspectorPanel("block");
-    };
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      const target = event.target;
-      const tag = target == null ? void 0 : target.tagName;
-      if ((target == null ? void 0 : target.isContentEditable) || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
-        return;
+    if (!hadSelection) setInspectorPanel("block");
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "Escape") return;
+    const target = event.target;
+    const tag = target == null ? void 0 : target.tagName;
+    if ((target == null ? void 0 : target.isContentEditable) || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+      return;
+    }
+    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(
+      SubjectBar,
+      {
+        subject: (_a = session.document.subject) != null ? _a : "",
+        variables: session.variables,
+        onSubjectChange: session.setSubject
       }
-      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(
-        SubjectBar,
+    ),
+    /* @__PURE__ */ jsxs44("div", { className: "ree-body", children: [
+      /* @__PURE__ */ jsxs44(
+        EditorDnd,
         {
-          subject: (_a = session.document.subject) != null ? _a : "",
-          variables: session.variables,
-          onSubjectChange: session.setSubject
+          blocks: session.document.blocks,
+          definitions: session.definitions,
+          onInsertBlock: (type, index) => {
+            showCanvas();
+            if (session.insertBlock(type, index)) setInspectorPanel("block");
+          },
+          onReorder: session.reorderBlocks,
+          onLibraryDragStart: showCanvas,
+          children: [
+            /* @__PURE__ */ jsx57(
+              BlockLibrary,
+              {
+                definitions: session.config.library,
+                onAdd: (type) => {
+                  showCanvas();
+                  if (session.insertBlock(type)) setInspectorPanel("block");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx57(
+              Stage,
+              {
+                session,
+                viewMode,
+                device,
+                onViewModeChange: setViewMode,
+                onDeviceChange: setDevice,
+                onSelectBlock: selectBlock
+              }
+            )
+          ]
         }
       ),
-      /* @__PURE__ */ jsxs45("div", { className: "ree-body", children: [
-        /* @__PURE__ */ jsxs45(
-          EditorDnd,
-          {
-            blocks: session.document.blocks,
-            definitions: session.definitions,
-            onInsertBlock: (type, index) => {
-              showCanvas();
-              if (session.insertBlock(type, index)) setInspectorPanel("block");
-            },
-            onReorder: session.reorderBlocks,
-            onLibraryDragStart: showCanvas,
-            children: [
-              /* @__PURE__ */ jsx58(
-                BlockLibrary,
-                {
-                  definitions: session.config.library,
-                  onAdd: (type) => {
-                    showCanvas();
-                    if (session.insertBlock(type)) setInspectorPanel("block");
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx58(
-                Stage,
-                {
-                  session,
-                  viewMode,
-                  device,
-                  onViewModeChange: setViewMode,
-                  onDeviceChange: setDevice,
-                  onSelectBlock: selectBlock
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          Inspector,
-          {
-            panel: inspectorPanel,
-            body: session.document.body,
-            block: session.selectedBlock,
-            definition: session.selectedDefinition,
-            variables: session.variables,
-            onPanelChange: setInspectorPanel,
-            onCommitBody: session.updateBody,
-            onCommitControl: session.updateControl,
-            onCommitControls: session.updateControls,
-            onCommitStyle: session.updateStyle
-          }
-        )
-      ] })
-    ] }) }) });
-  }
-);
+      /* @__PURE__ */ jsx57(
+        Inspector,
+        {
+          panel: inspectorPanel,
+          body: session.document.body,
+          block: session.selectedBlock,
+          definition: session.selectedDefinition,
+          variables: session.variables,
+          onPanelChange: setInspectorPanel,
+          onCommitBody: session.updateBody,
+          onCommitControl: session.updateControl,
+          onCommitControls: session.updateControls,
+          onCommitStyle: session.updateStyle
+        }
+      )
+    ] })
+  ] }, session.resetKey) }) });
+}
 
 // src/EmailEditor.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var EmailEditor = forwardRef3(
-  function EmailEditor2(props, ref) {
-    return /* @__PURE__ */ jsx59(EmailEditorShell, __spreadProps(__spreadValues({}, props), { ref }));
-  }
-);
+import { jsx as jsx58 } from "react/jsx-runtime";
+function EmailEditor(props) {
+  return /* @__PURE__ */ jsx58(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]);
+}
+
+// src/shell/useEmailEditor.ts
+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(() => {
+    store.updateOptions(options);
+  });
+  useOptionsEffect(store.flushOptions);
+  return store.editor;
+}
+
+// src/shell/useEmailEditorState.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useEmailEditorState(editor) {
+  const store = getEditorStore(editor);
+  return useSyncExternalStore2(store.subscribe, store.getState, store.getState);
+}
 
 // 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,
@@ -5991,7 +6129,6 @@ export {
   createDecorationControls,
   createDimensionControls,
   createEmailDocument,
-  createEmailEditorConfig,
   createTypographyControls,
   defineBlock,
   documentToHtml,
@@ -6002,5 +6139,8 @@ export {
   renderBlockContent,
   renderTemplatePreview,
   resolveEmailBody,
+  useEmailEditor,
+  useEmailEditorConfig,
+  useEmailEditorState,
   variablesToTemplateData
 };