@standhigher/react-email-editor 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,4586 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/EmailEditor.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/shell/EmailEditorShell.tsx
+import { forwardRef, useEffect as useEffect9, useState as useState11 } from "react";
+
+// src/editor-dnd/EditorDnd.tsx
+import { useMemo, useRef, useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+
+// src/constants/editor.ts
+var SUBJECT_MAX_LENGTH = 128;
+var DRAG_ACTIVATION_DISTANCE = 6;
+var CANVAS_DROP_ID = "canvas";
+var CANVAS_DEVICE_WIDTH = {
+  desktop: 600,
+  mobile: 360
+};
+var CONTENT_WIDTH_MIN = 320;
+var CONTENT_WIDTH_MAX = 900;
+var CONTENT_WIDTH_STEP = 10;
+function emailViewportWidth(device, contentWidth = CANVAS_DEVICE_WIDTH.desktop) {
+  if (device === "mobile") return CANVAS_DEVICE_WIDTH.mobile;
+  const width = Number.isFinite(contentWidth) ? contentWidth : CANVAS_DEVICE_WIDTH.desktop;
+  return Math.min(CONTENT_WIDTH_MAX, Math.max(CONTENT_WIDTH_MIN, width));
+}
+
+// src/components/BlockIcon.tsx
+import { jsx } from "react/jsx-runtime";
+function BlockIcon({ icon, className }) {
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ jsx("span", { className, dangerouslySetInnerHTML: { __html: icon } });
+  }
+  return /* @__PURE__ */ jsx("span", { className, children: icon });
+}
+
+// src/constants/block-types.ts
+var BLOCK_TYPES = {
+  heading: "heading",
+  text: "text",
+  button: "button",
+  image: "image",
+  divider: "divider",
+  spacer: "spacer",
+  html: "html"
+};
+
+// src/utils/html.ts
+function esc(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/constants/style-values.ts
+var TEXT_ALIGNS = {
+  left: "left",
+  center: "center",
+  right: "right",
+  justify: "justify"
+};
+var HORIZONTAL_ALIGNS = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+var FONT_WEIGHTS = {
+  normal: "normal",
+  bold: "bold"
+};
+var BORDER_STYLES = {
+  none: "none",
+  solid: "solid",
+  dashed: "dashed",
+  dotted: "dotted"
+};
+var LINK_DECORATIONS = {
+  underline: "underline",
+  none: "none"
+};
+function isStyleValue(values, value) {
+  return typeof value === "string" && Object.values(values).includes(value);
+}
+
+// src/utils/css-values.ts
+function cssLength(value, fallback = "0px", allowAuto = false) {
+  const input = String(value != null ? value : "").trim();
+  if (allowAuto && input === "auto") return input;
+  if (!/^(?:\d+(?:\.\d+)?|\.\d+)(?:px|em|rem|%)?$/.test(input)) return fallback;
+  return /[a-z%]$/i.test(input) ? input : `${input}px`;
+}
+function cssSpacing(value, fallback = "0px") {
+  const parts = String(value != null ? value : "").trim().split(/\s+/);
+  if (parts.length > 4 || parts.some((part) => !cssLength(part, ""))) return fallback;
+  return parts.map((part) => cssLength(part)).join(" ");
+}
+function cssCornerRadius(value, fallback = "0px") {
+  const parts = String(value != null ? value : "").trim().split(/\s+/).filter(Boolean);
+  if (parts.length !== 1 && parts.length !== 4 || parts.some((part) => !cssLength(part, ""))) return fallback;
+  return parts.map((part) => cssLength(part)).join(" ");
+}
+function cornerRadii(value) {
+  var _a, _b, _c, _d, _e;
+  const parts = cssCornerRadius(value).split(/\s+/);
+  const topLeft = (_a = parts[0]) != null ? _a : "0px";
+  if (parts.length === 1) return [topLeft, topLeft, topLeft, topLeft];
+  return [(_b = parts[0]) != null ? _b : topLeft, (_c = parts[1]) != null ? _c : topLeft, (_d = parts[2]) != null ? _d : topLeft, (_e = parts[3]) != null ? _e : topLeft];
+}
+function cssPx(value) {
+  const match = /^(\d+(?:\.\d+)?)px$/.exec(cssLength(value, ""));
+  if (!match) return void 0;
+  const px = String(Math.round(Number(match[1])));
+  return px === "0" ? void 0 : px;
+}
+function spacingSides(value) {
+  const [top = "0px", right = top, bottom = top, left = right] = cssSpacing(value).split(/\s+/);
+  return [top, right, bottom, left];
+}
+function cssColor(value, fallback = "transparent") {
+  const input = String(value != null ? value : "").trim();
+  return /^(?:#[\da-f]{3,8}|transparent|[a-z]+|rgba?\([\d.,%\s]+\)|hsla?\([\d.,%\s]+\))$/i.test(input) ? input : fallback;
+}
+function cssFont(value, fallback) {
+  const input = String(value != null ? value : "").trim();
+  return input && !/[;<>{}\\]/.test(input) ? input : fallback;
+}
+var EMAIL_EM_PX = 16;
+function readCssLength(value, units = []) {
+  var _a, _b;
+  const input = value.trim();
+  const allowed = units.filter((unit2) => unit2 !== "auto");
+  const fallbackUnit = (_a = allowed[0]) != null ? _a : "";
+  if (input === "auto" && units.includes("auto")) return { amount: 0, unit: "auto" };
+  const match = input.match(/^(-?(?:\d+(?:\.\d+)?|\.\d+))(px|em|rem|%)?$/i);
+  if (!match) return { amount: 0, unit: fallbackUnit };
+  let amount = Number(match[1]);
+  let unit = ((_b = match[2]) != null ? _b : "").toLowerCase();
+  if (unit === "em" || unit === "rem") {
+    amount = Math.round(amount * EMAIL_EM_PX);
+    unit = "px";
+  }
+  if (!unit) unit = fallbackUnit;
+  if (allowed.length > 0 && !allowed.includes(unit)) unit = fallbackUnit;
+  return { amount: Number.isFinite(amount) ? amount : 0, unit };
+}
+function formatCssLength(amount, unit) {
+  if (unit === "auto") return "auto";
+  const text = Number.isInteger(amount) ? String(amount) : String(Number(amount.toFixed(2)));
+  return unit ? `${text}${unit}` : text;
+}
+function cssLineHeight(value, fallback) {
+  const input = String(value != null ? value : "").trim();
+  return /^(?:\d+(?:\.\d+)?|\.\d+)$/.test(input) ? input : cssLength(input, fallback);
+}
+function cssBorderStyle(value) {
+  return isStyleValue(BORDER_STYLES, value) ? value : BORDER_STYLES.solid;
+}
+
+// src/document/constants.ts
+var DOCUMENT_VERSION = 1;
+function fontOption(label, value) {
+  return Object.freeze({ label, value });
+}
+var FONT_FAMILIES = Object.freeze([
+  fontOption("Arial", "Arial, Helvetica, sans-serif"),
+  fontOption("Helvetica", "Helvetica, Arial, sans-serif"),
+  fontOption("Verdana", "Verdana, Geneva, sans-serif"),
+  fontOption("Tahoma", "Tahoma, Geneva, sans-serif"),
+  fontOption("Trebuchet MS", "'Trebuchet MS', Helvetica, sans-serif"),
+  fontOption("Georgia", "Georgia, serif"),
+  fontOption("Times New Roman", "'Times New Roman', Times, serif"),
+  fontOption("Courier New", "'Courier New', Courier, monospace")
+]);
+function copyFontFamilies() {
+  return FONT_FAMILIES.map((font) => ({ label: font.label, value: font.value }));
+}
+function fontFamilyLabel(value) {
+  var _a;
+  const match = FONT_FAMILIES.find((font) => font.value === value);
+  if (match) return match.label;
+  const name = (_a = value.split(",")[0]) == null ? void 0 : _a.replace(/['"]/g, "").trim();
+  return name || "Arial";
+}
+var DEFAULT_EMAIL_GLOBAL = {
+  textColor: "#000000",
+  textAlign: TEXT_ALIGNS.left,
+  backgroundColor: "#ffffff",
+  contentBackgroundColor: "#ffffff",
+  contentWidth: CANVAS_DEVICE_WIDTH.desktop,
+  contentAlign: HORIZONTAL_ALIGNS.center,
+  contentPadding: "0px",
+  outerPadding: "0px",
+  blockGap: "4px",
+  paragraphSpacing: "6px",
+  listSpacing: "4px",
+  listIndent: "22px",
+  borderWidth: "0px",
+  borderStyle: BORDER_STYLES.solid,
+  borderColor: "#000000",
+  borderRadius: "0px",
+  fontFamily: "Arial, Helvetica, sans-serif",
+  fontWeight: FONT_WEIGHTS.normal,
+  defaultFontSize: "16px",
+  defaultLineHeight: "1.5",
+  linkColor: "#005bd3",
+  linkDecoration: LINK_DECORATIONS.underline
+};
+
+// src/document/create-document.ts
+function resolveEmailGlobal(global) {
+  var _a;
+  const source = global != null ? global : {};
+  const defaults = DEFAULT_EMAIL_GLOBAL;
+  const width = Number((_a = source.contentWidth) != null ? _a : defaults.contentWidth);
+  return {
+    textAlign: isStyleValue(TEXT_ALIGNS, source.textAlign) ? source.textAlign : TEXT_ALIGNS.left,
+    textColor: cssColor(source.textColor, defaults.textColor),
+    backgroundColor: cssColor(source.backgroundColor, defaults.backgroundColor),
+    contentBackgroundColor: cssColor(source.contentBackgroundColor, defaults.contentBackgroundColor),
+    contentWidth: Number.isFinite(width) ? Math.min(CONTENT_WIDTH_MAX, Math.max(CONTENT_WIDTH_MIN, Math.round(width))) : defaults.contentWidth,
+    contentAlign: isStyleValue(HORIZONTAL_ALIGNS, source.contentAlign) ? source.contentAlign : HORIZONTAL_ALIGNS.center,
+    contentPadding: cssSpacing(source.contentPadding, defaults.contentPadding),
+    outerPadding: cssSpacing(source.outerPadding, defaults.outerPadding),
+    blockGap: cssLength(source.blockGap, defaults.blockGap),
+    fontFamily: cssFont(source.fontFamily, defaults.fontFamily),
+    fontWeight: isStyleValue(FONT_WEIGHTS, source.fontWeight) ? source.fontWeight : FONT_WEIGHTS.normal,
+    defaultFontSize: cssLength(source.defaultFontSize, defaults.defaultFontSize),
+    defaultLineHeight: cssLineHeight(source.defaultLineHeight, defaults.defaultLineHeight),
+    paragraphSpacing: cssLength(source.paragraphSpacing, defaults.paragraphSpacing),
+    listSpacing: cssLength(source.listSpacing, defaults.listSpacing),
+    listIndent: cssLength(source.listIndent, defaults.listIndent),
+    linkColor: cssColor(source.linkColor, defaults.linkColor),
+    linkDecoration: isStyleValue(LINK_DECORATIONS, source.linkDecoration) ? source.linkDecoration : LINK_DECORATIONS.underline,
+    borderWidth: cssLength(source.borderWidth, defaults.borderWidth),
+    borderStyle: cssBorderStyle(source.borderStyle),
+    borderColor: cssColor(source.borderColor, defaults.borderColor),
+    borderRadius: cssCornerRadius(source.borderRadius, defaults.borderRadius)
+  };
+}
+function mergeEmailGlobal(base, patch) {
+  const current = resolveEmailGlobal(base);
+  const defined = Object.fromEntries(Object.entries(patch != null ? patch : {}).filter(([, value]) => value !== void 0));
+  return resolveEmailGlobal(__spreadValues(__spreadValues({}, current), defined));
+}
+function sameEmailGlobal(left, right) {
+  return JSON.stringify(resolveEmailGlobal(left)) === JSON.stringify(resolveEmailGlobal(right));
+}
+function createEmailDocument(blocks = []) {
+  return { version: DOCUMENT_VERSION, global: resolveEmailGlobal(), blocks };
+}
+function createEmptyDocument() {
+  return { version: DOCUMENT_VERSION, subject: "", global: resolveEmailGlobal(), blocks: [] };
+}
+function ensureEmailDocument(document) {
+  return __spreadProps(__spreadValues({}, document), { global: resolveEmailGlobal(document.global) });
+}
+
+// src/utils/style.ts
+function readStyleValue(style, id) {
+  var _a;
+  const [group, key] = id.split(".");
+  const values = style == null ? void 0 : style[group];
+  return values ? String((_a = values[key]) != null ? _a : "") : "";
+}
+function writeStyleValue(style, id, value) {
+  const [group, key] = id.split(".");
+  const next = structuredClone(style != null ? style : {});
+  if (!key || !["dimension", "typography", "decorations", "element"].includes(group)) return next;
+  const groupKey = group;
+  const values = __spreadValues({}, next[groupKey]);
+  if (value === "") delete values[key];
+  else values[key] = value;
+  next[groupKey] = values;
+  return next;
+}
+function resolvedFontWeight(blockWeight, globalWeight) {
+  return isStyleValue(FONT_WEIGHTS, blockWeight) ? blockWeight : globalWeight;
+}
+function typographyStyle(style, global) {
+  var _a, _b;
+  const settings = resolveEmailGlobal(global);
+  const typography = (_a = style == null ? void 0 : style.typography) != null ? _a : {};
+  return {
+    fontFamily: cssFont(typography.fontFamily, settings.fontFamily),
+    fontSize: cssLength(typography.fontSize, settings.defaultFontSize),
+    fontWeight: resolvedFontWeight(typography.fontWeight, settings.fontWeight),
+    lineHeight: cssLineHeight(typography.lineHeight, settings.defaultLineHeight),
+    color: cssColor(typography.color, settings.textColor),
+    textAlign: (_b = typography.textAlign) != null ? _b : settings.textAlign
+  };
+}
+function radiusStyle(value) {
+  const [topLeft, topRight, bottomRight, bottomLeft] = cornerRadii(value != null ? value : "");
+  if (topLeft === topRight && topLeft === bottomRight && topLeft === bottomLeft) return { borderRadius: topLeft };
+  return {
+    borderTopLeftRadius: topLeft,
+    borderTopRightRadius: topRight,
+    borderBottomRightRadius: bottomRight,
+    borderBottomLeftRadius: bottomLeft
+  };
+}
+function decorationStyle(decoration = {}) {
+  return __spreadValues({
+    backgroundColor: cssColor(decoration.backgroundColor),
+    borderWidth: cssLength(decoration.borderWidth),
+    borderStyle: cssBorderStyle(decoration.borderStyle),
+    borderColor: cssColor(decoration.borderColor, "#000000")
+  }, radiusStyle(decoration.borderRadius));
+}
+function styleToCss(style) {
+  return Object.entries(style).filter(([, value]) => value !== void 0).map(([name, value]) => `${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${esc(String(value))}`).join(";");
+}
+function typographyCss(style, global) {
+  return styleToCss(typographyStyle(style, global));
+}
+function emailBaseCss(global) {
+  return typographyCss(void 0, global);
+}
+function blockContentStyle(style, global) {
+  var _a;
+  return __spreadProps(__spreadValues(__spreadValues({}, typographyStyle(style, global)), decorationStyle(style == null ? void 0 : style.decorations)), {
+    padding: cssSpacing((_a = style == null ? void 0 : style.dimension) == null ? void 0 : _a.padding),
+    overflowWrap: "anywhere"
+  });
+}
+function blockCellCss(style, global) {
+  var _a;
+  const css = __spreadValues({}, blockContentStyle(style, global));
+  const height = cssPx((_a = style == null ? void 0 : style.dimension) == null ? void 0 : _a.height);
+  if (height) {
+    css.boxSizing = "border-box";
+    css.height = `${height}px`;
+    css.verticalAlign = "top";
+  }
+  return `${styleToCss(css)};`;
+}
+
+// src/render/align.ts
+function readAlign(value, fallback = HORIZONTAL_ALIGNS.center) {
+  return isStyleValue(HORIZONTAL_ALIGNS, value) ? value : fallback;
+}
+function htmlLength(value) {
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(value.trim());
+  if (px) return String(Math.round(Number(px[1])));
+  const percent = /^(\d+(?:\.\d+)?)%$/.exec(value.trim());
+  if (percent) return `${Math.round(Number(percent[1]))}%`;
+  return void 0;
+}
+function pixelLength(value) {
+  const match = /^(\d+(?:\.\d+)?)px$/.exec(value.trim());
+  return match ? String(Math.round(Number(match[1]))) : void 0;
+}
+function imageBox(width) {
+  if (width !== "auto" && htmlLength(width)) return { display: "block", width: "100%", frame: "table" };
+  return { width: "auto", frame: "inline" };
+}
+function fullWidthRow(align, content) {
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="${align}" style="text-align:${align};">${content}</td></tr></table>`;
+}
+function shrinkTable(align, width, content) {
+  const attr = htmlLength(width);
+  const widthAttr = attr ? ` width="${esc(attr)}"` : "";
+  return `<table role="presentation" align="${align}"${widthAttr} cellpadding="0" cellspacing="0" border="0" style="width:${esc(width)};max-width:100%;"><tr>${content}</tr></table>`;
+}
+function renderImage(align, width, content) {
+  if (imageBox(width).frame === "table") return fullWidthRow(align, shrinkTable(align, width, `<td>${content}</td>`));
+  return fullWidthRow(align, content);
+}
+function renderShrinkElement(align, width, content) {
+  const table = width === "auto" ? `<table role="presentation" align="${align}" cellpadding="0" cellspacing="0" border="0"><tr>${content}</tr></table>` : shrinkTable(align, width, content);
+  return fullWidthRow(align, table);
+}
+function renderAligned(target, options) {
+  var _a;
+  const align = readAlign(options.align);
+  const width = (_a = options.width) != null ? _a : target === "divider" ? "100%" : "auto";
+  if (target === "image") return renderImage(align, width, options.content);
+  return renderShrinkElement(align, width, options.content);
+}
+
+// src/blocks/icons.ts
+var ICON_TEXT = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 4h14v3H5V4Zm0 13h9v-3H5v3Z"/></svg>';
+var ICON_HEADING = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 4h3v7h10V4h3v16h-3v-6H7v6H4V4Z"/></svg>';
+var ICON_BUTTON = '<svg viewBox="0 0 24 24" width="18" height="18"><rect x="3" y="7" width="18" height="10" rx="2" fill="currentColor"/></svg>';
+var ICON_IMAGE = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1.5 11 4-4 3 3 2.5-2.5 4 4V6.5h-13V16Z"/></svg>';
+var ICON_DIVIDER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 11h18v2H3v-2Z"/></svg>';
+var ICON_SPACER = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M4 8h16v2H4V8Zm0 6h16v2H4v-2Z"/></svg>';
+var ICON_HTML = '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M5 3l-3 9 3 9h3l-3-9 3-9H5Zm6 0 3 9-3 9h3l3-9-3-9h-3Zm6 0-3 9 3 9h3l-3-9 3-9h-3Z"/></svg>';
+
+// src/blocks/style-fields.ts
+var BORDER_STYLE_LABELS = {
+  none: "None",
+  solid: "Solid",
+  dashed: "Dashed",
+  dotted: "Dotted"
+};
+var PADDING = { id: "dimension.padding", group: "dimension", label: "Padding", control: "spacing", defaultValue: "0px" };
+var MARGIN = { id: "dimension.margin", group: "dimension", label: "Outer spacing", control: "spacing", defaultValue: "0px" };
+var BLOCK_HEIGHT = { id: "dimension.height", group: "dimension", label: "Block height", control: "range", unit: "px", min: 0, max: 480 };
+var FONT_FAMILY = { id: "typography.fontFamily", group: "typography", label: "Font family", control: "select", options: copyFontFamilies() };
+var FONT_SIZE = { id: "typography.fontSize", group: "typography", label: "Font size", control: "range", unit: "px", min: 8, max: 72 };
+var FONT_WEIGHT = { id: "typography.fontWeight", group: "typography", label: "Weight", control: "select", options: [{ label: "Regular", value: FONT_WEIGHTS.normal }, { label: "Bold", value: FONT_WEIGHTS.bold }] };
+var LINE_HEIGHT = { id: "typography.lineHeight", group: "typography", label: "Line height", control: "range", min: 1, max: 2.5, step: 0.05 };
+var TEXT_COLOR = { id: "typography.color", group: "typography", label: "Text", control: "color" };
+var TEXT_ALIGN = { id: "typography.textAlign", group: "typography", label: "Text alignment", control: "select", options: [{ label: "Left", value: TEXT_ALIGNS.left }, { label: "Center", value: TEXT_ALIGNS.center }, { label: "Right", value: TEXT_ALIGNS.right }, { label: "Justify", value: TEXT_ALIGNS.justify }] };
+var BG_COLOR = { id: "decorations.backgroundColor", group: "decorations", label: "Background", control: "color", defaultValue: "transparent" };
+var BORDER_RADIUS = { id: "decorations.borderRadius", group: "decorations", label: "Block corner radius", control: "corners", max: 48, defaultValue: "0px" };
+var BORDER_WIDTH = { id: "decorations.borderWidth", group: "decorations", label: "Block border width", control: "range", unit: "px", min: 0, max: 12, defaultValue: "0px" };
+var BORDER_COLOR = { id: "decorations.borderColor", group: "decorations", label: "Border", control: "color", defaultValue: "#000000" };
+var BORDER_STYLE = {
+  id: "decorations.borderStyle",
+  group: "decorations",
+  label: "Block border style",
+  control: "select",
+  defaultValue: BORDER_STYLES.solid,
+  options: Object.keys(BORDER_STYLES).map((key) => ({
+    label: BORDER_STYLE_LABELS[key],
+    value: BORDER_STYLES[key]
+  }))
+};
+var PARAGRAPH_SPACING = { id: "typography.paragraphSpacing", group: "typography", label: "Paragraph spacing", control: "range", unit: "px", min: 0, max: 48 };
+var LIST_SPACING = { id: "typography.listSpacing", group: "typography", label: "List spacing", control: "range", unit: "px", min: 0, max: 48 };
+var LIST_INDENT = { id: "typography.listIndent", group: "typography", label: "List indent", control: "range", unit: "px", min: 0, max: 64 };
+var LINK_COLOR = { id: "typography.linkColor", group: "typography", label: "Link", control: "color" };
+var LINK_DECORATION = { id: "typography.linkDecoration", group: "typography", label: "Link decoration", control: "select", options: [{ label: "Underline", value: LINK_DECORATIONS.underline }, { label: "None", value: LINK_DECORATIONS.none }] };
+var DIMENSION_FIELDS = { padding: PADDING, margin: MARGIN, height: BLOCK_HEIGHT };
+var DECORATION_FIELDS = {
+  backgroundColor: BG_COLOR,
+  borderWidth: BORDER_WIDTH,
+  borderStyle: BORDER_STYLE,
+  borderColor: BORDER_COLOR,
+  borderRadius: BORDER_RADIUS
+};
+var TYPOGRAPHY_FIELD_MAP = {
+  fontFamily: FONT_FAMILY,
+  fontSize: FONT_SIZE,
+  fontWeight: FONT_WEIGHT,
+  lineHeight: LINE_HEIGHT,
+  color: TEXT_COLOR,
+  textAlign: TEXT_ALIGN,
+  paragraphSpacing: PARAGRAPH_SPACING,
+  listSpacing: LIST_SPACING,
+  listIndent: LIST_INDENT,
+  linkColor: LINK_COLOR,
+  linkDecoration: LINK_DECORATION
+};
+var COMMON_STYLE_FIELDS = [PADDING, MARGIN, BLOCK_HEIGHT, BG_COLOR, BORDER_WIDTH, BORDER_STYLE, BORDER_COLOR, BORDER_RADIUS];
+var TYPOGRAPHY_FIELDS = [
+  FONT_FAMILY,
+  FONT_SIZE,
+  FONT_WEIGHT,
+  LINE_HEIGHT,
+  TEXT_COLOR,
+  TEXT_ALIGN,
+  PARAGRAPH_SPACING,
+  LIST_SPACING,
+  LIST_INDENT,
+  LINK_COLOR,
+  LINK_DECORATION
+];
+function copyStyleField(field, overrides) {
+  const next = __spreadValues(__spreadValues({}, field), overrides);
+  if (next.options) next.options = next.options.map((option) => __spreadValues({}, option));
+  if (next.units) next.units = [...next.units];
+  return next;
+}
+function createFieldSet(fields, overrides) {
+  const result = {};
+  for (const name of Object.keys(fields)) {
+    result[name] = copyStyleField(fields[name], overrides == null ? void 0 : overrides[name]);
+  }
+  return result;
+}
+function createDimensionFields(overrides) {
+  return createFieldSet(DIMENSION_FIELDS, overrides);
+}
+function createDecorationFields(overrides) {
+  return createFieldSet(DECORATION_FIELDS, overrides);
+}
+function createTypographyFields(overrides) {
+  return createFieldSet(TYPOGRAPHY_FIELD_MAP, overrides);
+}
+function resolveBlockStyleFields(fields, exactStyleFields = false) {
+  const custom = (fields != null ? fields : []).map((field) => copyStyleField(field));
+  if (exactStyleFields) return custom;
+  const customById = /* @__PURE__ */ new Map();
+  for (const field of custom) {
+    if (!customById.has(field.id)) customById.set(field.id, field);
+  }
+  const commonIds = new Set(COMMON_STYLE_FIELDS.map((field) => field.id));
+  const merged = COMMON_STYLE_FIELDS.map((field) => {
+    var _a;
+    return (_a = customById.get(field.id)) != null ? _a : copyStyleField(field);
+  });
+  return [...merged, ...custom.filter((field) => !commonIds.has(field.id))];
+}
+
+// src/blocks/element-fields.ts
+var elementDecoration = createDecorationFields({
+  borderWidth: { id: "element.borderWidth", label: "Border width" },
+  borderStyle: { id: "element.borderStyle", label: "Border style" },
+  borderColor: { id: "element.borderColor", label: "Outline" },
+  borderRadius: { id: "element.borderRadius", label: "Corner radius" }
+});
+var buttonTypography = createTypographyFields({
+  fontFamily: { id: "element.fontFamily" },
+  fontSize: { id: "element.fontSize" },
+  fontWeight: { id: "element.fontWeight" },
+  lineHeight: { id: "element.lineHeight" },
+  color: { id: "element.color" }
+});
+var BUTTON_BOX_DEFAULTS = {
+  align: HORIZONTAL_ALIGNS.center,
+  backgroundColor: "#005bd3",
+  borderRadius: "8px",
+  borderWidth: "1px",
+  borderColor: "#005bd3",
+  padding: "12px 32px"
+};
+var ELEMENT_BORDER_FIELDS = [
+  elementDecoration.borderWidth,
+  elementDecoration.borderStyle,
+  elementDecoration.borderColor,
+  elementDecoration.borderRadius
+];
+var ELEMENT_ALIGN = { id: "element.align", group: "general", label: "Alignment", control: "alignment", defaultValue: HORIZONTAL_ALIGNS.center };
+var ELEMENT_WIDTH = { id: "element.width", group: "general", label: "Width", control: "range", units: ["px", "%", "auto"], min: 0, max: 600, defaultValue: "auto" };
+var BUTTON_STYLE_FIELDS = [
+  ELEMENT_ALIGN,
+  ELEMENT_WIDTH,
+  createDimensionFields({ padding: { id: "element.padding", label: "Button padding", defaultValue: BUTTON_BOX_DEFAULTS.padding } }).padding,
+  buttonTypography.fontFamily,
+  buttonTypography.fontSize,
+  buttonTypography.fontWeight,
+  buttonTypography.lineHeight,
+  buttonTypography.color,
+  createDecorationFields({ backgroundColor: { id: "element.backgroundColor", label: "Button", defaultValue: BUTTON_BOX_DEFAULTS.backgroundColor } }).backgroundColor,
+  ...ELEMENT_BORDER_FIELDS.map((field) => __spreadProps(__spreadValues({}, field), {
+    defaultValue: field.id === "element.borderWidth" ? BUTTON_BOX_DEFAULTS.borderWidth : field.id === "element.borderColor" ? BUTTON_BOX_DEFAULTS.borderColor : field.id === "element.borderRadius" ? BUTTON_BOX_DEFAULTS.borderRadius : field.defaultValue
+  }))
+];
+var IMAGE_STYLE_FIELDS = [
+  ELEMENT_WIDTH,
+  { id: "element.height", group: "general", label: "Height", control: "range", units: ["px", "auto"], min: 0, max: 480, defaultValue: "auto" },
+  ...ELEMENT_BORDER_FIELDS
+];
+var DIVIDER_STYLE_FIELDS = [
+  ELEMENT_ALIGN,
+  __spreadProps(__spreadValues({}, ELEMENT_WIDTH), { units: ["px", "%"], defaultValue: "100%" }),
+  __spreadProps(__spreadValues({}, ELEMENT_BORDER_FIELDS[0]), { label: "Line thickness", defaultValue: "1px" }),
+  __spreadProps(__spreadValues({}, ELEMENT_BORDER_FIELDS[1]), { label: "Line style" })
+];
+
+// src/blocks/button.ts
+var buttonBlock = {
+  type: BLOCK_TYPES.button,
+  title: "Button",
+  icon: ICON_BUTTON,
+  description: "Clickable CTA button",
+  fields: [
+    { type: "text", name: "label", label: "Label", defaultValue: "Buy now" },
+    { type: "url", name: "href", label: "Link", defaultValue: "https://example.com" }
+  ],
+  defaultStyle: {
+    element: __spreadValues({ fontSize: "16px", color: "#ffffff" }, BUTTON_BOX_DEFAULTS)
+  },
+  styleFields: [...COMMON_STYLE_FIELDS, ...BUTTON_STYLE_FIELDS],
+  render: ({ fields, style, global }) => {
+    var _a, _b;
+    const element = __spreadValues(__spreadValues({}, BUTTON_BOX_DEFAULTS), style.element);
+    const width = cssLength(element.width, "auto", true);
+    const px = pixelLength(width);
+    const text = styleToCss(__spreadProps(__spreadValues({}, typographyStyle({ typography: element }, global)), { textAlign: "center" }));
+    const box = styleToCss(__spreadProps(__spreadValues({}, decorationStyle(element)), {
+      padding: cssSpacing(element.padding, BUTTON_BOX_DEFAULTS.padding),
+      textAlign: "center"
+    }));
+    const anchor = `<a href="${esc(String((_a = fields.href) != null ? _a : "#"))}" style="display:block;text-decoration:none;${text};">${esc(String((_b = fields.label) != null ? _b : "Button"))}</a>`;
+    const cell = `<td align="center"${px ? ` width="${px}"` : ""} style="${box};">${anchor}</td>`;
+    return renderAligned("button", { align: element.align, width, content: cell });
+  }
+};
+
+// src/blocks/divider.ts
+var dividerBlock = {
+  type: BLOCK_TYPES.divider,
+  title: "Divider",
+  icon: ICON_DIVIDER,
+  description: "Horizontal divider line",
+  defaultStyle: { dimension: { padding: "12px" }, element: { borderColor: "#e3e3e5" } },
+  styleFields: [...COMMON_STYLE_FIELDS, ...DIVIDER_STYLE_FIELDS, { id: "element.borderColor", group: "decorations", label: "Line", control: "color", defaultValue: "#e3e3e5" }],
+  render: ({ style }) => {
+    var _a;
+    const element = (_a = style.element) != null ? _a : {};
+    const width = cssLength(element.width, "100%");
+    const border = `${cssLength(element.borderWidth, "1px")} ${cssBorderStyle(element.borderStyle)} ${cssColor(element.borderColor, "#e3e3e5")}`;
+    const cell = `<td style="border-top:${esc(border)};font-size:1px;line-height:1px;">&nbsp;</td>`;
+    return renderAligned("divider", { align: element.align, width, content: cell });
+  }
+};
+
+// src/render/content-style.ts
+function contentDefaults(style, global) {
+  var _a;
+  const settings = resolveEmailGlobal(global);
+  const typography = style == null ? void 0 : style.typography;
+  return {
+    paragraph: cssLength(typography == null ? void 0 : typography.paragraphSpacing, settings.paragraphSpacing),
+    listSpacing: cssLength(typography == null ? void 0 : typography.listSpacing, settings.listSpacing),
+    listIndent: cssLength(typography == null ? void 0 : typography.listIndent, settings.listIndent),
+    linkColor: cssColor(typography == null ? void 0 : typography.linkColor, settings.linkColor),
+    linkDecoration: (_a = typography == null ? void 0 : typography.linkDecoration) != null ? _a : settings.linkDecoration
+  };
+}
+function contentVariables(style, global) {
+  const values = contentDefaults(style, global);
+  return {
+    "--ree-paragraph-spacing": values.paragraph,
+    "--ree-list-spacing": values.listSpacing,
+    "--ree-list-indent": values.listIndent,
+    "--ree-link-color": values.linkColor,
+    "--ree-link-decoration": values.linkDecoration
+  };
+}
+function attributeValue(attrs, name) {
+  const match = attrs.match(new RegExp(`\\s${name}\\s*=\\s*(["'])(.*?)\\1`, "i"));
+  return match == null ? void 0 : match[2];
+}
+function omitAttribute(attrs, name) {
+  return attrs.replace(new RegExp(`\\s${name}\\s*=\\s*(["']).*?\\1`, "gi"), "");
+}
+function stripDeclarations(style, pattern) {
+  const parts = style.split(";").map((part) => part.trim()).filter(Boolean);
+  const kept = parts.filter((part) => !pattern.test(part));
+  return kept.length === parts.length ? style : kept.join(";");
+}
+function paragraphPlacements(html) {
+  var _a, _b;
+  const placements = [];
+  const topLevel = [];
+  let liDepth = 0;
+  const tokens = /<!--[\s\S]*?-->|<\/(li)\b[^>]*>|<(li|p|ul|ol)\b[^>]*>/gi;
+  let match;
+  while (match = tokens.exec(html)) {
+    if (match[0].startsWith("<!--")) continue;
+    const closing = (_a = match[1]) == null ? void 0 : _a.toLowerCase();
+    const opening = (_b = match[2]) == null ? void 0 : _b.toLowerCase();
+    if (closing === "li") liDepth = Math.max(0, liDepth - 1);
+    if (opening === "li") liDepth += 1;
+    if (opening === "p") {
+      placements.push({ topLevel: liDepth === 0, followsParagraph: false });
+      if (liDepth === 0) topLevel.push({ kind: "p", paragraph: placements.length - 1 });
+    }
+    if ((opening === "ul" || opening === "ol") && liDepth === 0) topLevel.push({ kind: "list", paragraph: -1 });
+  }
+  for (let index = 0; index < topLevel.length - 1; index += 1) {
+    const current = topLevel[index];
+    const next = topLevel[index + 1];
+    if ((current == null ? void 0 : current.kind) === "p" && (next == null ? void 0 : next.kind) === "p") {
+      const placement = placements[next.paragraph];
+      if (placement) placement.followsParagraph = true;
+    }
+  }
+  return placements;
+}
+function paragraphMargin(gap) {
+  return gap === "0px" ? "margin:0;" : `margin:${gap} 0 0 0;`;
+}
+function styleRichText(html, style, global) {
+  const values = contentDefaults(style, global);
+  const placements = paragraphPlacements(html);
+  let paragraph = 0;
+  return html.replace(/<!--[\s\S]*?-->|<(p|ul|ol|a)\b([^>]*)>/gi, (tag, name, attributes) => {
+    var _a, _b;
+    if (!name || tag.startsWith("<!--")) return tag;
+    const lower = name.toLowerCase();
+    const attrs = attributes != null ? attributes : "";
+    const match = attrs.match(/\sstyle\s*=\s*(["'])(.*?)\1/i);
+    let existing = (_a = match == null ? void 0 : match[2]) != null ? _a : "";
+    let rest = match ? attrs.replace(match[0], "") : attrs;
+    let defaults = lower === "a" ? `color:${values.linkColor};text-decoration:${values.linkDecoration};` : `margin:${values.listSpacing} 0;padding-left:${values.listIndent};`;
+    if (lower === "p") {
+      const placement = (_b = placements[paragraph++]) != null ? _b : { topLevel: false, followsParagraph: false };
+      const explicitSpacing = attributeValue(attrs, "data-spacing");
+      const explicitLineHeight = attributeValue(attrs, "data-line-height");
+      const spacing = explicitSpacing === void 0 ? "" : cssLength(explicitSpacing, "");
+      const lineHeight = explicitLineHeight === void 0 ? "" : cssLineHeight(explicitLineHeight, "");
+      const gap = placement.topLevel && spacing ? spacing : placement.followsParagraph ? values.paragraph : "0px";
+      existing = stripDeclarations(existing, /^--ree-paragraph-gap\s*:/i);
+      if (placement.topLevel && spacing) existing = stripDeclarations(existing, /^margin(?:-(?:top|right|bottom|left))?\s*:/i);
+      if (lineHeight) existing = stripDeclarations(existing, /^line-height\s*:/i);
+      rest = omitAttribute(omitAttribute(rest, "data-spacing"), "data-line-height");
+      defaults = `${paragraphMargin(gap)}${lineHeight ? `line-height:${lineHeight};` : ""}`;
+    }
+    return `<${name}${rest} style="${defaults}${existing.replace(/"/g, "&quot;")}">`;
+  });
+}
+
+// src/blocks/heading.ts
+var headingBlock = {
+  type: BLOCK_TYPES.heading,
+  title: "Heading",
+  icon: ICON_HEADING,
+  description: "Large section heading",
+  inlineEdit: true,
+  defaultFields: { html: "<p>Heading</p>" },
+  defaultStyle: {
+    dimension: { padding: "16px" },
+    typography: {
+      fontSize: "26px",
+      fontWeight: "bold",
+      lineHeight: "1.25"
+    }
+  },
+  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
+  render: ({ fields, style, global }) => {
+    var _a;
+    return `<div style="display:flow-root;${typographyCss(style, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), style, global)}</div>`;
+  }
+};
+
+// src/render/html-content.ts
+function htmlContent(html, style, global, id) {
+  var _a, _b, _c, _d;
+  const scope = `ree-html-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const body = html.match(/<body\b([^>]*)>([\s\S]*?)<\/body\s*>/i);
+  let marker = "";
+  let inner = styleRichText(html, style, global);
+  if (body) {
+    const head = (_b = (_a = html.match(/<head\b[^>]*>([\s\S]*?)<\/head\s*>/i)) == null ? void 0 : _a[1]) != null ? _b : "";
+    const styles = (_d = (_c = head.match(/<style\b[^>]*>[\s\S]*?<\/style\s*>/gi)) == null ? void 0 : _c.join("\n")) != null ? _d : "";
+    marker = styles ? `<!--ree-head-->${styles}<!--/ree-head-->` : "";
+    inner = `<div${body[1]}>${styleRichText(body[2], style, global)}</div>`;
+  }
+  return `${marker}<div class="${scope}" style="display:flow-root;${typographyCss(style, global)};">${inner}</div>`;
+}
+
+// src/blocks/html.ts
+var htmlBlock = {
+  type: BLOCK_TYPES.html,
+  title: "HTML",
+  icon: ICON_HTML,
+  description: "Paste raw HTML",
+  fields: [
+    {
+      type: "html",
+      name: "html",
+      label: "HTML",
+      defaultValue: "<p>Custom HTML block</p>",
+      rows: 10,
+      placeholder: "Paste raw HTML\u2026"
+    }
+  ],
+  defaultStyle: { dimension: { padding: "8px" } },
+  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
+  render: ({ fields, style, global, block }) => {
+    var _a;
+    return htmlContent(String((_a = fields.html) != null ? _a : ""), style, global, block.id);
+  }
+};
+
+// src/blocks/image.ts
+var imageBlock = {
+  type: BLOCK_TYPES.image,
+  title: "Image",
+  icon: ICON_IMAGE,
+  description: "Insert an image",
+  fields: [
+    { type: "url", name: "src", label: "Image URL", defaultValue: "https://placehold.co/560x200?text=Image" },
+    { type: "text", name: "alt", label: "Alt text", defaultValue: "Image" },
+    { type: "url", name: "link", label: "Link", defaultValue: "" }
+  ],
+  defaultStyle: { dimension: { padding: "8px" } },
+  styleFields: [...COMMON_STYLE_FIELDS, ELEMENT_ALIGN, ...IMAGE_STYLE_FIELDS],
+  render: ({ fields, style }) => {
+    var _a, _b, _c, _d;
+    const element = (_a = style.element) != null ? _a : {};
+    const width = cssLength(element.width, "auto", true);
+    const height = cssLength(element.height, "auto", true);
+    const box = imageBox(width);
+    const css = styleToCss(__spreadProps(__spreadValues({}, decorationStyle(element)), {
+      display: box.display,
+      width: box.width,
+      height,
+      maxWidth: "100%",
+      verticalAlign: box.display ? void 0 : "bottom"
+    }));
+    const widthAttr = pixelLength(width);
+    const heightAttr = pixelLength(height);
+    const image = `<img src="${esc(String((_b = fields.src) != null ? _b : ""))}" alt="${esc(String((_c = fields.alt) != null ? _c : ""))}"${widthAttr ? ` width="${widthAttr}"` : ""}${heightAttr ? ` height="${heightAttr}"` : ""} border="0" style="outline:none;text-decoration:none;${css};" />`;
+    const link = String((_d = fields.link) != null ? _d : "");
+    const content = link ? `<a href="${esc(link)}" style="text-decoration:none;${box.display === "block" ? "display:block;" : ""}">${image}</a>` : image;
+    return renderAligned("image", { align: element.align, width, content });
+  }
+};
+
+// src/render/spacer.ts
+function spacerHtml(height, fallback = "0px") {
+  var _a;
+  const css = cssLength(height, fallback);
+  const px = (_a = pixelLength(css)) != null ? _a : "0";
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="${esc(px)}" style="height:${esc(css)};line-height:${esc(css)};font-size:${esc(css)};">&nbsp;</td></tr></table>`;
+}
+
+// src/blocks/spacer.ts
+var spacerBlock = {
+  type: BLOCK_TYPES.spacer,
+  title: "Spacer",
+  icon: ICON_SPACER,
+  description: "Vertical whitespace",
+  fields: [{ type: "number", name: "height", label: "Height", defaultValue: 16, min: 0, max: 240, step: 1 }],
+  styleFields: COMMON_STYLE_FIELDS,
+  render: ({ fields }) => spacerHtml(fields.height, "16px")
+};
+
+// src/blocks/text.ts
+var textBlock = {
+  type: BLOCK_TYPES.text,
+  title: "Text",
+  icon: ICON_TEXT,
+  description: "Paragraph of body text",
+  inlineEdit: true,
+  defaultFields: { html: "<p>Type your paragraph here\u2026</p>" },
+  defaultStyle: {
+    dimension: { padding: "16px" }
+  },
+  styleFields: [...COMMON_STYLE_FIELDS, ...TYPOGRAPHY_FIELDS],
+  render: ({ fields, style, global }) => {
+    var _a;
+    return `<div style="display:flow-root;${typographyCss(style, global)}">${styleRichText(String((_a = fields.html) != null ? _a : ""), style, global)}</div>`;
+  }
+};
+
+// src/blocks/registry.ts
+var DEFAULT_BLOCKS = [
+  headingBlock,
+  textBlock,
+  buttonBlock,
+  imageBlock,
+  dividerBlock,
+  spacerBlock,
+  htmlBlock
+];
+
+// src/document/registry.ts
+function mergeBlockDefinitions(custom = []) {
+  const map = /* @__PURE__ */ new Map();
+  for (const definition of DEFAULT_BLOCKS) map.set(definition.type, definition);
+  for (const definition of custom) map.set(definition.type, definition);
+  return Array.from(map.values());
+}
+function getBlockDefinition(type, definitions = DEFAULT_BLOCKS) {
+  const definition = definitions.find((item) => item.type === type);
+  if (!definition) return void 0;
+  return __spreadProps(__spreadValues({}, definition), {
+    styleFields: resolveBlockStyleFields(definition.styleFields, definition.exactStyleFields)
+  });
+}
+
+// src/editor-dnd/drop-target.ts
+function containsPoint(rect, point) {
+  return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+}
+function edgeAt(rect, y) {
+  const mid = (rect.top + rect.bottom) / 2;
+  return y < mid ? "before" : "after";
+}
+function sortDropRects(blocks) {
+  return [...blocks].sort((left, right) => left.top - right.top || left.left - right.left);
+}
+function resolveCanvasDrop(pointer, canvas, blocks) {
+  const ordered = sortDropRects(blocks);
+  const hit = ordered.find((block) => containsPoint(block, pointer));
+  if (hit) return { id: hit.id, edge: edgeAt(hit, pointer.y) };
+  if (!canvas || !containsPoint(canvas, pointer)) return null;
+  if (ordered.length === 0) return { id: canvas.id, edge: "after" };
+  const first = ordered[0];
+  const last = ordered[ordered.length - 1];
+  if (!first || !last) return { id: canvas.id, edge: "after" };
+  if (pointer.y <= first.top) return { id: first.id, edge: "before" };
+  if (pointer.y >= last.bottom) return { id: last.id, edge: "after" };
+  for (let index = 0; index < ordered.length - 1; index += 1) {
+    const current = ordered[index];
+    const next = ordered[index + 1];
+    if (!current || !next) continue;
+    if (pointer.y < current.bottom || pointer.y > next.top) continue;
+    const mid = (current.bottom + next.top) / 2;
+    return pointer.y < mid ? { id: current.id, edge: "after" } : { id: next.id, edge: "before" };
+  }
+  const beside = ordered.find((block) => pointer.y >= block.top && pointer.y <= block.bottom);
+  if (beside) return { id: beside.id, edge: edgeAt(beside, pointer.y) };
+  return { id: last.id, edge: "after" };
+}
+function insertionIndex(blockIds, target, canvasId) {
+  if (target.id === canvasId) return blockIds.length;
+  const index = blockIds.indexOf(target.id);
+  if (index < 0) return blockIds.length;
+  return target.edge === "after" ? index + 1 : index;
+}
+function resolveDropCollision(pointer, canvas, blocks, activeId, canvasId) {
+  const ordered = sortDropRects(blocks);
+  const target = resolveCanvasDrop(pointer, canvas, ordered);
+  if (!target) return null;
+  return {
+    destinationId: sortableDestinationId(
+      ordered.map((block) => block.id),
+      activeId,
+      target,
+      canvasId
+    ),
+    target
+  };
+}
+function sortableDestinationId(blockIds, activeId, target, canvasId) {
+  var _a;
+  if (!blockIds.includes(activeId)) return target.id;
+  if (target.id === activeId) return activeId;
+  const remaining = blockIds.filter((id) => id !== activeId);
+  const index = Math.min(
+    Math.max(insertionIndex(remaining, target, canvasId), 0),
+    blockIds.length - 1
+  );
+  return (_a = blockIds[index]) != null ? _a : activeId;
+}
+function indicatorForDrop(blockIds, activeId, target, canvasId) {
+  if (target.id === activeId) return null;
+  const ids = blockIds.includes(activeId) ? blockIds.filter((id2) => id2 !== activeId) : blockIds;
+  const index = insertionIndex(ids, target, canvasId);
+  if (ids.length === 0) return null;
+  if (index <= 0) {
+    const id2 = ids[0];
+    return id2 ? { id: id2, edge: "before" } : null;
+  }
+  if (index >= ids.length) {
+    const id2 = ids[ids.length - 1];
+    return id2 ? { id: id2, edge: "after" } : null;
+  }
+  const id = ids[index];
+  return id ? { id, edge: "before" } : null;
+}
+
+// src/editor-dnd/collision.ts
+function toDropRect(id, rect) {
+  return {
+    id,
+    top: rect.top,
+    bottom: rect.bottom,
+    left: rect.left,
+    right: rect.right
+  };
+}
+function readDropTarget(collisions) {
+  var _a;
+  const data = (_a = collisions == null ? void 0 : collisions[0]) == null ? void 0 : _a.data;
+  if (!data || typeof data !== "object") return null;
+  const targetId = data.targetId;
+  const edge = data.edge;
+  if (typeof targetId !== "string") return null;
+  if (edge !== "before" && edge !== "after") return null;
+  return { id: targetId, edge };
+}
+var canvasDropCollision = ({
+  active,
+  droppableContainers,
+  droppableRects,
+  pointerCoordinates
+}) => {
+  if (!pointerCoordinates) return [];
+  let canvas = null;
+  const blocks = [];
+  for (const container of droppableContainers) {
+    const id = String(container.id);
+    const rect = droppableRects.get(container.id);
+    if (!rect) continue;
+    if (id === CANVAS_DROP_ID) {
+      canvas = toDropRect(id, rect);
+      continue;
+    }
+    blocks.push(toDropRect(id, rect));
+  }
+  const resolved = resolveDropCollision(pointerCoordinates, canvas, blocks, String(active.id), CANVAS_DROP_ID);
+  if (!resolved) return [];
+  const collision = {
+    id: resolved.destinationId,
+    data: {
+      value: 0,
+      edge: resolved.target.edge,
+      targetId: resolved.target.id
+    }
+  };
+  return [collision];
+};
+
+// src/editor-dnd/drag-context.ts
+import { createContext, useContext } from "react";
+var emptyDragState = { targetId: null, dropEdge: null };
+var EditorDragContext = createContext(emptyDragState);
+function useEditorDragState() {
+  return useContext(EditorDragContext);
+}
+
+// src/editor-dnd/drag-data.ts
+function readDragData(data) {
+  if (!data || typeof data !== "object" || !("kind" in data)) return void 0;
+  const record = data;
+  if (record.kind === "library" && typeof record.type === "string") {
+    return { kind: "library", type: record.type };
+  }
+  if (record.kind === "canvas") return { kind: "canvas" };
+  return void 0;
+}
+
+// src/editor-dnd/EditorDnd.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function sameDrop(current, next) {
+  return (current == null ? void 0 : current.id) === (next == null ? void 0 : next.id) && (current == null ? void 0 : current.edge) === (next == null ? void 0 : next.edge);
+}
+function EditorDnd({
+  blocks,
+  definitions,
+  onInsertBlock,
+  onReorder,
+  onLibraryDragStart,
+  children
+}) {
+  const blocksRef = useRef(blocks);
+  blocksRef.current = blocks;
+  const [activeDrag, setActiveDrag] = useState(null);
+  const [indicator, setIndicator] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: DRAG_ACTIVATION_DISTANCE }
+    })
+  );
+  const updateIndicator = (activeId, collisions) => {
+    const target = readDropTarget(collisions);
+    const next = target ? indicatorForDrop(
+      blocksRef.current.map((block) => block.id),
+      activeId,
+      target,
+      CANVAS_DROP_ID
+    ) : null;
+    setIndicator((current) => sameDrop(current, next) ? current : next);
+  };
+  const handleDragStart = (event) => {
+    const data = readDragData(event.active.data.current);
+    setActiveDrag(data != null ? data : { kind: "canvas" });
+    setIndicator(null);
+    if ((data == null ? void 0 : data.kind) === "library") onLibraryDragStart();
+  };
+  const handleDragMove = (event) => {
+    updateIndicator(String(event.active.id), event.collisions);
+  };
+  const clearDrag = () => {
+    setActiveDrag(null);
+    setIndicator(null);
+  };
+  const handleDragEnd = (event) => {
+    const data = readDragData(event.active.data.current);
+    const target = readDropTarget(event.collisions);
+    const overId = event.over ? String(event.over.id) : null;
+    clearDrag();
+    if ((data == null ? void 0 : data.kind) === "library") {
+      if (!target) return;
+      onInsertBlock(
+        data.type,
+        insertionIndex(
+          blocksRef.current.map((block) => block.id),
+          target,
+          CANVAS_DROP_ID
+        )
+      );
+      return;
+    }
+    if (!overId || event.active.id === overId) return;
+    onReorder(String(event.active.id), overId);
+  };
+  const overlayDefinition = (activeDrag == null ? void 0 : activeDrag.kind) === "library" ? getBlockDefinition(activeDrag.type, definitions) : void 0;
+  const dragState = useMemo(
+    () => {
+      var _a, _b;
+      return {
+        targetId: (_a = indicator == null ? void 0 : indicator.id) != null ? _a : null,
+        dropEdge: (_b = indicator == null ? void 0 : indicator.edge) != null ? _b : null
+      };
+    },
+    [indicator]
+  );
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: canvasDropCollision,
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd,
+      onDragCancel: clearDrag,
+      children: [
+        /* @__PURE__ */ jsx2(EditorDragContext.Provider, { value: dragState, children }),
+        /* @__PURE__ */ jsx2(DragOverlay, { children: overlayDefinition ? /* @__PURE__ */ jsxs("div", { className: "ree-drag-overlay", children: [
+          /* @__PURE__ */ jsx2(BlockIcon, { icon: overlayDefinition.icon, className: "ree-lib-icon" }),
+          /* @__PURE__ */ jsx2("span", { children: overlayDefinition.title })
+        ] }) : null })
+      ]
+    }
+  );
+}
+
+// src/block-library/BlockLibraryItem.tsx
+import { useDraggable } from "@dnd-kit/core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BlockLibraryItem({ definition, onAdd }) {
+  const dragData = { kind: "library", type: definition.type };
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `lib-${definition.type}`,
+    data: dragData
+  });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: setNodeRef
+    }, listeners), attributes), {
+      className: `ree-lib-item${isDragging ? " is-dragging" : ""}`,
+      onClick: onAdd,
+      title: definition.description,
+      children: [
+        /* @__PURE__ */ jsx3(BlockIcon, { icon: definition.icon, className: "ree-lib-icon" }),
+        /* @__PURE__ */ jsx3("span", { className: "ree-lib-title", children: definition.title })
+      ]
+    })
+  );
+}
+
+// src/block-library/BlockLibrary.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function BlockLibrary({ definitions, onAdd }) {
+  return /* @__PURE__ */ jsxs3("aside", { className: "ree-col ree-col-left", children: [
+    /* @__PURE__ */ jsx4("div", { className: "ree-col-head", children: "Blocks" }),
+    /* @__PURE__ */ jsx4("div", { className: "ree-lib", children: definitions.map((definition) => /* @__PURE__ */ jsx4(
+      BlockLibraryItem,
+      {
+        definition,
+        onAdd: () => onAdd(definition.type)
+      },
+      definition.type
+    )) })
+  ] });
+}
+
+// src/inspector/global-constants.ts
+var GLOBAL_FIELD_SECTIONS = [
+  { title: "General", fields: [
+    { id: "contentWidth", group: "general", label: "Content width", control: "range", min: CONTENT_WIDTH_MIN, max: CONTENT_WIDTH_MAX, step: CONTENT_WIDTH_STEP, unit: "px" },
+    { id: "contentAlign", group: "general", label: "Content alignment", control: "alignment" }
+  ] },
+  { title: "Spacing", fields: [
+    { id: "contentPadding", group: "dimension", label: "Content padding", control: "spacing" },
+    { id: "outerPadding", group: "dimension", label: "Outer padding", control: "spacing" },
+    { id: "blockGap", group: "dimension", label: "Block gap", control: "range", min: 0, max: 80, unit: "px" }
+  ] },
+  { title: "Decoration", fields: [
+    { id: "backgroundColor", group: "decorations", label: "Background", control: "color" },
+    { id: "contentBackgroundColor", group: "decorations", label: "Content", control: "color" },
+    { id: "borderWidth", group: "decorations", label: "Border width", control: "range", min: 0, max: 12, unit: "px" },
+    __spreadProps(__spreadValues({}, BORDER_STYLE), { id: "borderStyle", label: "Border style" }),
+    { id: "borderColor", group: "decorations", label: "Border", control: "color" },
+    { id: "borderRadius", group: "decorations", label: "Corner radius", control: "corners", max: 48 }
+  ] },
+  { title: "Typography", fields: [
+    { id: "fontFamily", group: "typography", label: "Font family", control: "select", options: copyFontFamilies() },
+    __spreadProps(__spreadValues({}, FONT_WEIGHT), { id: "fontWeight" }),
+    __spreadProps(__spreadValues({}, TEXT_ALIGN), { id: "textAlign" }),
+    { id: "defaultFontSize", group: "typography", label: "Font size", control: "range", min: 8, max: 72, unit: "px" },
+    { id: "defaultLineHeight", group: "typography", label: "Line height", control: "range", min: 1, max: 2.5, step: 0.05 },
+    { id: "textColor", group: "typography", label: "Text", control: "color" },
+    { id: "paragraphSpacing", group: "typography", label: "Paragraph spacing", control: "range", min: 0, max: 48, unit: "px" },
+    { id: "listSpacing", group: "typography", label: "List spacing", control: "range", min: 0, max: 48, unit: "px" },
+    { id: "listIndent", group: "typography", label: "List indent", control: "range", min: 0, max: 64, unit: "px" },
+    { id: "linkColor", group: "typography", label: "Link", control: "color" },
+    { id: "linkDecoration", group: "typography", label: "Link decoration", control: "select", options: [{ label: "Underline", value: LINK_DECORATIONS.underline }, { label: "None", value: LINK_DECORATIONS.none }] }
+  ] }
+];
+
+// src/inspector/components/InspectorSection.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function InspectorSection({ title, children }) {
+  const [open, setOpen] = useState2(true);
+  return /* @__PURE__ */ jsxs4("section", { className: "ree-inspector-section", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: "ree-inspector-section-toggle",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        children: [
+          /* @__PURE__ */ jsx5("span", { children: title }),
+          /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4 6.25 8 10.25 12 6.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx5("div", { className: "ree-inspector-section-body", children }) : null
+  ] });
+}
+
+// src/inspector/components/StyleFieldStack.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function StyleFieldStack({ fields, renderField }) {
+  const colors = fields.filter((field) => field.control === "color");
+  const rest = fields.filter((field) => field.control !== "color");
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    colors.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "ree-color-grid", children: colors.map(renderField) }) : null,
+    rest.map(renderField)
+  ] });
+}
+
+// src/inspector/StyleControl.tsx
+import { useId } from "react";
+
+// src/inspector/constants.ts
+var HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var TEXT_ALIGN_OPTIONS = [
+  { value: HORIZONTAL_ALIGNS.left, label: "Left", glyph: "\u21E4" },
+  { value: HORIZONTAL_ALIGNS.center, label: "Center", glyph: "\u21D4" },
+  { value: HORIZONTAL_ALIGNS.right, label: "Right", glyph: "\u21E5" }
+];
+var GLOBAL_FONT_WEIGHTS = [
+  { label: "Regular", value: FONT_WEIGHTS.normal },
+  { label: "Bold", value: FONT_WEIGHTS.bold }
+];
+var SPACING_SIDES = ["Top", "Right", "Bottom", "Left"];
+var CORNER_SIDES = ["Top left", "Top right", "Bottom right", "Bottom left"];
+var SPACING_MAX = 120;
+
+// src/inspector/components/AlignControl.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function AlignControl({ value, onChange }) {
+  return /* @__PURE__ */ jsx7("div", { className: "ree-align-row", children: TEXT_ALIGN_OPTIONS.map((option) => /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      className: `ree-align-btn${value === option.value ? " is-active" : ""}`,
+      onClick: () => onChange(option.value),
+      title: option.label,
+      children: option.glyph
+    },
+    option.value
+  )) });
+}
+
+// src/inspector/utils.ts
+function colorInputValue(value, fallback = "#000000") {
+  return HEX_COLOR.test(value) ? value : fallback;
+}
+function styleReset(stored, restore, inherit) {
+  if (inherit) return { resetTo: "", show: stored !== "" };
+  return { resetTo: restore, show: stored !== "" && stored !== restore };
+}
+function inheritedStyleValue(id, global) {
+  if (!id.startsWith("typography.") && !id.startsWith("element.")) return;
+  switch (id.split(".")[1]) {
+    case "fontFamily":
+      return global.fontFamily;
+    case "fontSize":
+      return global.defaultFontSize;
+    case "fontWeight":
+      return global.fontWeight;
+    case "lineHeight":
+      return global.defaultLineHeight;
+    case "color":
+      return global.textColor;
+    case "textAlign":
+      return global.textAlign;
+    case "paragraphSpacing":
+      return global.paragraphSpacing;
+    case "listSpacing":
+      return global.listSpacing;
+    case "listIndent":
+      return global.listIndent;
+    case "linkColor":
+      return global.linkColor;
+    case "linkDecoration":
+      return global.linkDecoration;
+  }
+}
+
+// src/inspector/components/ColorControl.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ColorControl({ value, fallback = "#000000", label = "Color", onChange }) {
+  const actual = value || fallback;
+  const empty = !actual || actual === "transparent" || !HEX_COLOR.test(actual);
+  return /* @__PURE__ */ jsxs6("label", { className: "ree-color-chip", children: [
+    /* @__PURE__ */ jsxs6("span", { className: "ree-color-swatch", children: [
+      /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: `ree-color-swatch-face${empty ? " is-empty" : ""}`,
+          style: empty ? void 0 : { background: actual }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "color",
+          className: "ree-color-native",
+          "aria-label": label,
+          value: colorInputValue(actual),
+          onChange: (event) => onChange(event.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("span", { className: "ree-color-chip-label", children: label })
+  ] });
+}
+
+// src/inspector/components/CssValueInput.tsx
+import { useEffect, useState as useState3 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function CssValueInput({ label, value, placeholder: placeholder2, onChange }) {
+  const [draft, setDraft] = useState3(value);
+  useEffect(() => setDraft(value), [value]);
+  return /* @__PURE__ */ jsx9(
+    "input",
+    {
+      className: "ree-input",
+      "aria-label": label,
+      value: draft,
+      placeholder: placeholder2 != null ? placeholder2 : "0px",
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: () => {
+        onChange(draft.trim());
+        setDraft(value);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") event.currentTarget.blur();
+        if (event.key === "Escape") {
+          setDraft(value);
+          event.stopPropagation();
+        }
+      }
+    }
+  );
+}
+
+// src/inspector/components/RangeControl.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function RangeControl({
+  id,
+  label,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange
+}) {
+  const progress = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+  return /* @__PURE__ */ jsx10(
+    "input",
+    {
+      id,
+      "aria-label": label,
+      type: "range",
+      className: "ree-range",
+      style: { "--ree-range-progress": `${progress}%` },
+      value,
+      min,
+      max,
+      step,
+      onChange: (event) => onChange(Number(event.target.value))
+    }
+  );
+}
+
+// src/inspector/components/LengthControl.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function bounds(unit, min, max, step) {
+  if (unit === "%") return { min: 0, max: 100, step: 1 };
+  return { min, max, step };
+}
+function snap(value, step) {
+  var _a;
+  const places = ((_a = String(step).split(".")[1]) != null ? _a : "").length;
+  return Number((Math.round(value / step) * step).toFixed(places));
+}
+function LengthControl({
+  id,
+  label,
+  amount,
+  unit,
+  units,
+  min = 0,
+  max = 200,
+  step = 1,
+  onChange
+}) {
+  const range = bounds(unit, min, max, step);
+  const shown = Math.min(range.max, Math.max(range.min, amount));
+  const commit = (nextAmount, nextUnit) => {
+    if (nextUnit === "auto") {
+      onChange("auto");
+      return;
+    }
+    const nextRange = bounds(nextUnit, min, max, step);
+    const snapped = snap(Math.min(nextRange.max, Math.max(nextRange.min, nextAmount)), nextRange.step);
+    onChange(formatCssLength(snapped, nextUnit));
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "ree-range-row", children: [
+    unit === "auto" ? null : /* @__PURE__ */ jsx11(RangeControl, { id, label, value: shown, min: range.min, max: range.max, step: range.step, onChange: (next) => commit(next, unit) }),
+    units.length > 1 ? /* @__PURE__ */ jsx11(
+      "select",
+      {
+        className: "ree-unit-select",
+        "aria-label": `${label} unit`,
+        value: unit,
+        onChange: (event) => {
+          const nextUnit = event.target.value;
+          if (nextUnit === unit) return;
+          const seed = unit === "auto" ? nextUnit === "%" ? 100 : Math.min(max, 160) : amount;
+          commit(seed, nextUnit);
+        },
+        children: units.map((option) => /* @__PURE__ */ jsx11("option", { value: option, children: option }, option))
+      }
+    ) : null
+  ] });
+}
+
+// src/inspector/components/ResetButton.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function ResetButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx12("button", { type: "button", className: "ree-reset", "aria-label": label, title: label, onClick, children: /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("path", { d: "M13 8a5 5 0 1 1-1.4-3.45", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx12("path", { d: "M12.2 2.4v2.7h-2.7", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }) });
+}
+
+// src/inspector/components/SelectControl.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function SelectControl({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "ree-select", children: [
+    /* @__PURE__ */ jsx13(
+      "select",
+      {
+        "aria-label": label,
+        className: "ree-input",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        children: options.map((option) => /* @__PURE__ */ jsx13("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ jsx13("span", { className: "ree-select-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx13(
+      "path",
+      {
+        d: "M4 6.25 8 10.25 12 6.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }) })
+  ] });
+}
+
+// src/inspector/components/SpacingControl.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function sideAmount(value, max) {
+  return Math.min(max, Math.max(0, readCssLength(value, ["px"]).amount));
+}
+function SpacingControl({
+  label,
+  value,
+  max = SPACING_MAX,
+  sides: sideLabels = SPACING_SIDES,
+  linkLabel = "Link sides",
+  uniformLabel,
+  expand = spacingSides,
+  onChange
+}) {
+  var _a;
+  const sides = expand(value);
+  const equal = sides.every((side) => sideAmount(side, max) === sideAmount(sides[0], max));
+  const [independent, setIndependent] = useState4(!equal);
+  const slider = (sideLabel, sideValue, commit) => {
+    const amount = sideAmount(sideValue, max);
+    return /* @__PURE__ */ jsxs10("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "ree-field-label", children: [
+        /* @__PURE__ */ jsx14("span", { children: sideLabel }),
+        /* @__PURE__ */ jsxs10("span", { className: "ree-field-value", children: [
+          amount,
+          "px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14(RangeControl, { label: sideLabel, value: amount, min: 0, max, step: 1, onChange: (next) => commit(`${next}px`) })
+    ] }, sideLabel);
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "ree-spacing-control", children: [
+    /* @__PURE__ */ jsxs10("label", { className: "ree-spacing-link", children: [
+      /* @__PURE__ */ jsx14(
+        "input",
+        {
+          type: "checkbox",
+          checked: !independent && equal,
+          onChange: (event) => {
+            var _a2;
+            setIndependent(!event.target.checked);
+            if (event.target.checked) onChange(`${sideAmount((_a2 = sides[0]) != null ? _a2 : "0px", max)}px`);
+          }
+        }
+      ),
+      linkLabel
+    ] }),
+    !independent && equal ? slider(uniformLabel != null ? uniformLabel : `${label} all sides`, (_a = sides[0]) != null ? _a : "0px", onChange) : /* @__PURE__ */ jsx14("div", { className: "ree-spacing-grid", children: sideLabels.map((side, index) => {
+      var _a2;
+      return slider(side, (_a2 = sides[index]) != null ? _a2 : "0px", (next) => {
+        const updated = [...sides];
+        updated[index] = next;
+        onChange(updated.join(" "));
+      });
+    }) })
+  ] });
+}
+
+// src/inspector/StyleControl.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function lengthUnits(config) {
+  var _a;
+  if ((_a = config.units) == null ? void 0 : _a.length) return config.units;
+  if (config.unit) return [config.unit];
+  return [];
+}
+function StyleControl({ config, value, fallback, resetLabel = "Reset", resetTo, showReset, onChange }) {
+  var _a, _b;
+  const id = useId();
+  const units = lengthUnits(config);
+  const stored = value === "auto" && units.length > 0 && !units.includes("auto") ? "" : value;
+  const actual = stored || fallback || config.defaultValue || "";
+  const numeric = config.control === "range" || config.control === "number";
+  const parsed = numeric ? readCssLength(actual, units) : null;
+  const options = (_a = config.options) != null ? _a : [];
+  const selectOptions = actual && !options.some((option) => option.value === actual) ? [{ label: actual, value: actual }, ...options] : options;
+  const reset = (showReset != null ? showReset : Boolean(value)) ? /* @__PURE__ */ jsx15(ResetButton, { label: resetLabel, onClick: () => onChange(resetTo != null ? resetTo : "") }) : null;
+  if (config.control === "color") {
+    return /* @__PURE__ */ jsxs11("div", { className: "ree-color-chip-row", children: [
+      /* @__PURE__ */ jsx15(ColorControl, { label: config.label, value: actual, onChange }),
+      reset
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "ree-field", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "ree-field-label", children: [
+      /* @__PURE__ */ jsx15("label", { htmlFor: numeric ? id : void 0, children: config.label }),
+      /* @__PURE__ */ jsxs11("span", { className: "ree-field-meta", children: [
+        parsed ? /* @__PURE__ */ jsx15("span", { className: "ree-field-value", children: formatCssLength(parsed.amount, parsed.unit) }) : null,
+        reset
+      ] })
+    ] }),
+    config.control === "alignment" ? /* @__PURE__ */ jsx15(AlignControl, { value: actual, onChange }) : null,
+    config.control === "select" ? /* @__PURE__ */ jsx15(SelectControl, { label: config.label, value: actual, options: selectOptions, onChange }) : null,
+    numeric && parsed ? /* @__PURE__ */ jsx15(
+      LengthControl,
+      {
+        id,
+        label: config.label,
+        amount: parsed.amount,
+        unit: parsed.unit,
+        units,
+        min: config.min,
+        max: config.max,
+        step: config.step,
+        onChange
+      }
+    ) : null,
+    config.control === "text" ? /* @__PURE__ */ jsx15(
+      CssValueInput,
+      {
+        label: config.label,
+        value: actual,
+        placeholder: config.placeholder,
+        onChange: (next) => {
+          if (!next || cssLength(next, "")) onChange(next);
+        }
+      }
+    ) : null,
+    config.control === "spacing" ? /* @__PURE__ */ jsx15(SpacingControl, { label: config.label, value: actual, onChange }) : null,
+    config.control === "corners" ? /* @__PURE__ */ jsx15(
+      SpacingControl,
+      {
+        label: config.label,
+        value: actual,
+        max: (_b = config.max) != null ? _b : 48,
+        sides: CORNER_SIDES,
+        linkLabel: "Link corners",
+        uniformLabel: "All corners",
+        expand: cornerRadii,
+        onChange
+      }
+    ) : null
+  ] });
+}
+
+// src/inspector/GlobalFields.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function GlobalFields({ global, onChange }) {
+  const settings = resolveEmailGlobal(global);
+  const renderField = (field) => {
+    const key = field.id;
+    const current = String(settings[key]);
+    const initial = String(DEFAULT_EMAIL_GLOBAL[key]);
+    return /* @__PURE__ */ jsx16(
+      StyleControl,
+      {
+        config: field,
+        value: current === initial ? "" : current,
+        fallback: initial,
+        resetLabel: "Reset",
+        onChange: (value) => onChange({
+          [key]: value === "" ? DEFAULT_EMAIL_GLOBAL[key] : key === "contentWidth" ? parseFloat(value) : value
+        })
+      },
+      key
+    );
+  };
+  return /* @__PURE__ */ jsx16("div", { className: "ree-inspector ree-inspector-global", children: GLOBAL_FIELD_SECTIONS.map((section) => /* @__PURE__ */ jsx16(InspectorSection, { title: section.title, children: /* @__PURE__ */ jsx16(StyleFieldStack, { fields: section.fields, renderField }) }, section.title)) });
+}
+
+// src/constants/style-groups.ts
+var STYLE_GROUPS = [
+  { group: "general", label: "General" },
+  { group: "dimension", label: "Spacing" },
+  { group: "typography", label: "Typography" },
+  { group: "decorations", label: "Decoration" }
+];
+
+// src/inspector/FieldControl.tsx
+import { useRef as useRef3 } from "react";
+
+// src/inspector/HtmlCodeEditor.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { EditorView as EditorView2 } from "@codemirror/view";
+
+// src/inspector/html-editor.ts
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import {
+  HighlightStyle,
+  LRLanguage,
+  LanguageSupport,
+  bracketMatching,
+  indentOnInput,
+  indentUnit,
+  syntaxHighlighting
+} from "@codemirror/language";
+import { parser as htmlParser } from "@lezer/html";
+import { EditorState } from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  drawSelection,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+  placeholder
+} from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+var htmlLanguage = LRLanguage.define({
+  name: "html",
+  parser: htmlParser.configure({ dialect: "selfClosing" }),
+  languageData: {
+    commentTokens: { block: { open: "<!--", close: "-->" } }
+  }
+});
+var htmlHighlightStyle = HighlightStyle.define([
+  { tag: tags.content, color: "#1f2328" },
+  { tag: tags.comment, color: "#6e7781", fontStyle: "italic" },
+  { tag: tags.string, color: "#0a3069" },
+  { tag: tags.documentMeta, color: "#8250df" },
+  { tag: tags.processingInstruction, color: "#8250df" },
+  { tag: tags.angleBracket, color: "#6e7781" },
+  { tag: tags.tagName, color: "#116329" },
+  { tag: tags.attributeName, color: "#0550ae" },
+  { tag: tags.definitionOperator, color: "#6e7781" },
+  { tag: tags.attributeValue, color: "#0a3069" },
+  { tag: tags.character, color: "#0550ae" },
+  { tag: tags.invalid, color: "#cf222e" }
+]);
+var htmlEditorTheme = EditorView.theme(
+  {
+    "&": {
+      color: "#1f2328",
+      backgroundColor: "#f6f8fa",
+      fontSize: "13px"
+    },
+    "&.cm-focused": {
+      outline: "none"
+    },
+    ".cm-scroller": {
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      lineHeight: "1.55"
+    },
+    ".cm-content": {
+      padding: "8px 0",
+      caretColor: "#1f2328"
+    },
+    ".cm-line": {
+      padding: "0 12px"
+    },
+    ".cm-gutters": {
+      backgroundColor: "#f6f8fa",
+      color: "#8c959f",
+      borderRight: "1px solid #e3e3e5"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "rgba(9, 105, 218, 0.06)"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "rgba(9, 105, 218, 0.08)",
+      color: "#1f2328"
+    },
+    ".cm-placeholder": {
+      color: "#8c959f"
+    }
+  },
+  { dark: false }
+);
+var templateDecoration = Decoration.mark({ class: "ree-cm-template" });
+var templateMatcher = new MatchDecorator({
+  regexp: /\{\{[^{}]*\}\}/g,
+  decoration: templateDecoration
+});
+var templateHighlight = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = templateMatcher.createDeco(view);
+    }
+    update(update) {
+      this.decorations = templateMatcher.updateDeco(update, this.decorations);
+    }
+  },
+  { decorations: (plugin) => plugin.decorations }
+);
+function createHtmlEditorExtensions(placeholderText, onChange) {
+  return [
+    lineNumbers(),
+    highlightActiveLine(),
+    highlightActiveLineGutter(),
+    drawSelection(),
+    highlightSpecialChars(),
+    history(),
+    indentOnInput(),
+    bracketMatching(),
+    EditorState.tabSize.of(2),
+    indentUnit.of("  "),
+    EditorView.lineWrapping,
+    EditorView.contentAttributes.of({
+      spellcheck: "false",
+      autocapitalize: "off",
+      autocorrect: "off",
+      "aria-label": "HTML"
+    }),
+    htmlEditorTheme,
+    syntaxHighlighting(htmlHighlightStyle),
+    templateHighlight,
+    new LanguageSupport(htmlLanguage),
+    keymap.of([...defaultKeymap, ...historyKeymap]),
+    placeholderText ? placeholder(placeholderText) : [],
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) onChange(update.state.doc.toString());
+    })
+  ];
+}
+
+// src/inspector/HtmlCodeEditor.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var LINE_HEIGHT2 = 22;
+function HtmlCodeEditor({
+  value,
+  placeholder: placeholder2,
+  rows = 10,
+  onChange
+}) {
+  const hostRef = useRef2(null);
+  const viewRef = useRef2(null);
+  const onChangeRef = useRef2(onChange);
+  onChangeRef.current = onChange;
+  useEffect2(() => {
+    const parent = hostRef.current;
+    if (!parent) return;
+    const view = new EditorView2({
+      parent,
+      state: EditorState2.create({
+        doc: value,
+        extensions: createHtmlEditorExtensions(placeholder2 != null ? placeholder2 : "", (next) => {
+          onChangeRef.current(next);
+        })
+      })
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, []);
+  useEffect2(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === value) return;
+    view.dispatch({
+      changes: { from: 0, to: current.length, insert: value }
+    });
+  }, [value]);
+  const minHeight = Math.max(rows, 8) * LINE_HEIGHT2;
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      ref: hostRef,
+      className: "ree-html-editor",
+      style: { "--ree-html-editor-min": `${minHeight}px` }
+    }
+  );
+}
+
+// src/inspector/VariablesDropdown.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function VariablesDropdown({ variables, onInsert }) {
+  const [open, setOpen] = useState5(false);
+  if (variables.length === 0) return null;
+  return /* @__PURE__ */ jsxs12("div", { className: "ree-var-wrap", children: [
+    /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        className: "ree-var-btn",
+        onClick: () => setOpen((current) => !current),
+        title: "Insert variable",
+        children: "{ }"
+      }
+    ),
+    open ? /* @__PURE__ */ jsx18("div", { className: "ree-var-menu", children: variables.map((variable) => /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        type: "button",
+        className: "ree-var-item",
+        onClick: () => {
+          onInsert(variable.name);
+          setOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx18("span", { className: "ree-var-name", children: variable.name }),
+          variable.description ? /* @__PURE__ */ jsx18("span", { className: "ree-var-label", children: variable.description }) : null
+        ]
+      },
+      variable.name
+    )) }) : null
+  ] });
+}
+
+// src/inspector/FieldControl.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function FieldControl({
+  field,
+  value,
+  variables,
+  onChange
+}) {
+  var _a, _b, _c, _d, _e;
+  const ref = useRef3(null);
+  const stringValue = value == null ? "" : String(value);
+  const insertVariable = (token) => {
+    var _a2, _b2;
+    const element = ref.current;
+    if (element && "selectionStart" in element) {
+      const start = (_a2 = element.selectionStart) != null ? _a2 : stringValue.length;
+      const end = (_b2 = element.selectionEnd) != null ? _b2 : stringValue.length;
+      onChange(stringValue.slice(0, start) + token + stringValue.slice(end));
+      return;
+    }
+    onChange(stringValue + token);
+  };
+  const handleChange = (event) => onChange(event.target.value);
+  const label = /* @__PURE__ */ jsxs13("div", { className: "ree-field-label", children: [
+    /* @__PURE__ */ jsx19("span", { children: field.label }),
+    field.type === "text" || field.type === "textarea" || field.type === "url" ? /* @__PURE__ */ jsx19(VariablesDropdown, { variables, onInsert: insertVariable }) : null
+  ] });
+  if (field.type === "html") {
+    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsx19("div", { className: "ree-field-label", children: /* @__PURE__ */ jsx19("span", { children: field.label }) }),
+      /* @__PURE__ */ jsx19(
+        HtmlCodeEditor,
+        {
+          value: stringValue,
+          placeholder: field.placeholder,
+          rows: field.rows,
+          onChange
+        }
+      )
+    ] });
+  }
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+      label,
+      /* @__PURE__ */ jsx19(
+        "textarea",
+        {
+          ref: (element) => {
+            ref.current = element;
+          },
+          className: "ree-input ree-textarea",
+          value: stringValue,
+          placeholder: field.placeholder,
+          rows: (_a = field.rows) != null ? _a : 4,
+          onChange: handleChange
+        }
+      )
+    ] });
+  }
+  if (field.type === "select") {
+    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsx19("label", { className: "ree-field-label", children: field.label }),
+      /* @__PURE__ */ jsx19(
+        SelectControl,
+        {
+          value: stringValue,
+          options: (_b = field.options) != null ? _b : [],
+          onChange
+        }
+      )
+    ] });
+  }
+  if (field.type === "color") {
+    return /* @__PURE__ */ jsx19("div", { className: "ree-color-chip-row", children: /* @__PURE__ */ jsx19(ColorControl, { label: field.label, value: stringValue, onChange: (next) => onChange(next) }) });
+  }
+  if (field.type === "number") {
+    const amount = Number(value);
+    const max = (_c = field.max) != null ? _c : 200;
+    const shown = Math.min(max, Math.max((_d = field.min) != null ? _d : 0, Number.isFinite(amount) ? amount : (_e = field.min) != null ? _e : 0));
+    return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "ree-field-label", children: [
+        /* @__PURE__ */ jsx19("span", { children: field.label }),
+        /* @__PURE__ */ jsxs13("span", { className: "ree-field-value", children: [
+          shown,
+          "px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx19(RangeControl, { label: field.label, value: shown, min: field.min, max, step: field.step, onChange })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: "ree-field", children: [
+    label,
+    /* @__PURE__ */ jsx19(
+      "input",
+      {
+        ref: (element) => {
+          ref.current = element;
+        },
+        className: "ree-input",
+        "aria-label": field.label,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        value: stringValue,
+        placeholder: field.placeholder,
+        type: "text",
+        onChange: handleChange
+      }
+    )
+  ] });
+}
+
+// src/inspector/InspectorFields.tsx
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function InspectorFields({
+  block,
+  definition,
+  variables,
+  global,
+  onCommitField,
+  onCommitStyle
+}) {
+  var _a, _b, _c;
+  const contentFields = (_a = definition.fields) != null ? _a : [];
+  const styleFields = (_b = definition.styleFields) != null ? _b : [];
+  const renderStyle = (field) => {
+    const stored = readStyleValue(block.style, field.id);
+    const inherited = inheritedStyleValue(field.id, global);
+    const restore = readStyleValue(definition.defaultStyle, field.id) || field.defaultValue || "";
+    const reset = styleReset(stored, restore, inherited !== void 0);
+    return /* @__PURE__ */ jsx20(
+      StyleControl,
+      {
+        config: field,
+        value: stored,
+        fallback: inherited,
+        resetTo: reset.resetTo,
+        showReset: reset.show,
+        resetLabel: inherited !== void 0 ? "Inherit global" : "Reset",
+        onChange: (value) => onCommitStyle(block.id, field.id, value)
+      },
+      field.id
+    );
+  };
+  const sections = STYLE_GROUPS.map((group) => __spreadProps(__spreadValues({}, group), {
+    fields: styleFields.filter((field) => field.group === group.group)
+  }));
+  const general = sections.find((section) => section.group === "general");
+  const showGeneral = contentFields.length > 0 || ((_c = general == null ? void 0 : general.fields.length) != null ? _c : 0) > 0;
+  return /* @__PURE__ */ jsxs14("div", { className: "ree-inspector", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "ree-inspector-head", children: [
+      /* @__PURE__ */ jsx20(BlockIcon, { icon: definition.icon, className: "ree-inspector-icon" }),
+      /* @__PURE__ */ jsx20("span", { className: "ree-inspector-title", children: definition.title })
+    ] }),
+    showGeneral ? /* @__PURE__ */ jsxs14(InspectorSection, { title: "General", children: [
+      contentFields.map((field) => /* @__PURE__ */ jsx20(
+        FieldControl,
+        {
+          field,
+          value: block.fields[field.name],
+          variables,
+          onChange: (value) => onCommitField(block.id, field.name, value)
+        },
+        field.name
+      )),
+      general ? /* @__PURE__ */ jsx20(StyleFieldStack, { fields: general.fields, renderField: renderStyle }) : null
+    ] }) : null,
+    sections.filter((section) => section.group !== "general" && section.fields.length > 0).map((section) => /* @__PURE__ */ jsx20(InspectorSection, { title: section.label, children: /* @__PURE__ */ jsx20(StyleFieldStack, { fields: section.fields, renderField: renderStyle }) }, section.group))
+  ] });
+}
+
+// src/inspector/Inspector.tsx
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function Inspector({
+  panel,
+  global,
+  block,
+  definition,
+  variables,
+  onPanelChange,
+  onCommitGlobal,
+  onCommitField,
+  onCommitStyle
+}) {
+  const showBlock = panel === "block" && block && definition;
+  return /* @__PURE__ */ jsxs15("aside", { className: "ree-col ree-col-right", children: [
+    /* @__PURE__ */ jsx21("div", { className: "ree-col-head ree-inspector-bar", children: /* @__PURE__ */ jsxs15("div", { className: "ree-inspector-tabs", role: "group", "aria-label": "Inspector panel", children: [
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: `ree-inspector-tab${panel === "global" ? " is-active" : ""}`,
+          "aria-pressed": panel === "global",
+          onClick: () => onPanelChange("global"),
+          children: "GLOBAL"
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: `ree-inspector-tab${showBlock ? " is-active" : ""}`,
+          "aria-pressed": Boolean(showBlock),
+          disabled: !block || !definition,
+          onClick: () => onPanelChange("block"),
+          children: "BLOCK"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx21("div", { className: "ree-inspector-scroll", children: showBlock ? /* @__PURE__ */ jsx21(
+      InspectorFields,
+      {
+        block,
+        definition,
+        variables,
+        global,
+        onCommitField,
+        onCommitStyle
+      }
+    ) : /* @__PURE__ */ jsx21(GlobalFields, { global, onChange: onCommitGlobal }) })
+  ] });
+}
+
+// src/stage/canvas/Canvas.tsx
+import { useDroppable } from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+
+// src/render/layout.ts
+function surfaceStyle(global) {
+  return __spreadProps(__spreadValues({}, decorationStyle({
+    backgroundColor: global.contentBackgroundColor,
+    borderWidth: global.borderWidth,
+    borderStyle: global.borderStyle,
+    borderColor: global.borderColor,
+    borderRadius: global.borderRadius
+  })), {
+    padding: global.contentPadding
+  });
+}
+function viewportWidth(device, global) {
+  const width = emailViewportWidth(device, global.contentWidth);
+  if (device === "mobile") return `${width}px`;
+  const [, right, , left] = spacingSides(global.outerPadding);
+  const sides = [left, right];
+  const ratio = sides.reduce((total, side) => total + (side.endsWith("%") ? parseFloat(side) / 100 : 0), 0);
+  const lengths = sides.filter((side) => !side.endsWith("%"));
+  const sum = [`${width}px`, ...lengths].join(" + ");
+  return ratio < 1 ? `calc((${sum}) / ${1 - ratio})` : `${width}px`;
+}
+
+// src/stage/canvas/CanvasBlock.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// src/render/context.ts
+function buildRenderContext(node, mode, global = DEFAULT_EMAIL_GLOBAL) {
+  var _a, _b;
+  return {
+    block: node,
+    fields: (_a = node.fields) != null ? _a : {},
+    style: (_b = node.style) != null ? _b : {},
+    mode,
+    global
+  };
+}
+
+// src/render/template-preview.ts
+var TOKEN_PATTERN = /\{\{-?([\s\S]*?)-?\}\}/g;
+function tokenize(template) {
+  var _a;
+  const tokens = [];
+  let lastIndex = 0;
+  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() });
+    lastIndex = index + match[0].length;
+  }
+  if (lastIndex < template.length) tokens.push({ text: template.slice(lastIndex) });
+  return tokens;
+}
+function parseNodes(tokens, startIndex) {
+  var _a, _b;
+  const nodes = [];
+  let index = startIndex;
+  while (index < tokens.length) {
+    const token = tokens[index];
+    if (token.text !== void 0) {
+      nodes.push({ kind: "text", value: token.text });
+      index += 1;
+      continue;
+    }
+    const tag = (_a = token.tag) != null ? _a : "";
+    if (tag === "else" || tag.startsWith("else if ")) {
+      return { nodes, nextIndex: index, stopTag: "else" };
+    }
+    if (tag === "end") return { nodes, nextIndex: index, stopTag: "end" };
+    const branchMatch = /^(if|range|with)\s+(.+)$/.exec(tag);
+    if (branchMatch) {
+      const branch = parseBranch(
+        tokens,
+        index,
+        branchMatch[1],
+        branchMatch[2]
+      );
+      nodes.push(branch.node);
+      index = branch.nextIndex + (((_b = tokens[branch.nextIndex]) == null ? void 0 : _b.tag) === "end" ? 1 : 0);
+      continue;
+    }
+    nodes.push({ kind: "expression", expression: tag });
+    index += 1;
+  }
+  return { nodes, nextIndex: index };
+}
+function parseBranch(tokens, startIndex, kind, expression) {
+  var _a, _b;
+  const body = parseNodes(tokens, startIndex + 1);
+  let alternate = [];
+  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);
+    if (elseIfMatch) {
+      const nested = parseBranch(
+        tokens,
+        body.nextIndex,
+        "if",
+        elseIfMatch[1]
+      );
+      alternate = [nested.node];
+      nextIndex = nested.nextIndex;
+    } else {
+      const alternateResult = parseNodes(tokens, body.nextIndex + 1);
+      alternate = alternateResult.nodes;
+      nextIndex = alternateResult.nextIndex;
+    }
+  }
+  return {
+    node: { kind, expression, children: body.nodes, alternate },
+    nextIndex
+  };
+}
+function readPath(value, path) {
+  if (path === "") return value;
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object") return current[key];
+    return void 0;
+  }, value);
+}
+function resolveExpression(expression, root, current) {
+  const trimmed = expression.trim();
+  if (trimmed === ".") return current;
+  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 (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;");
+}
+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));
+    }
+    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("");
+    }
+    if (!isTruthy(value)) {
+      return renderNodes(node.alternate, root, current);
+    }
+    const childContext = node.kind === "with" ? value : 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);
+}
+
+// src/render/block-html.ts
+function normalizeBlockRenderOptions(options) {
+  return typeof options === "boolean" ? { resolveHtmlTemplate: options } : options;
+}
+var LISTED_TOKEN = /^(\{\{-?)([\s\S]*?)(-?\}\})$/;
+function variableFieldName(name) {
+  const token = /^\{\{-?\s*([\s\S]*?)\s*-?\}\}$/.exec(name.trim());
+  const inner = (token ? token[1] : name).trim();
+  const field = inner.startsWith(".") ? inner.slice(1) : inner;
+  if (!field || !/^[A-Za-z_][\w.]*$/.test(field)) return null;
+  return field;
+}
+function dottedListedToken(name) {
+  const match = LISTED_TOKEN.exec(name);
+  if (!match) return null;
+  const [, open, raw, close] = match;
+  const field = variableFieldName(name);
+  if (!field || raw.trim().startsWith(".")) return null;
+  const start = raw.search(/\S/);
+  if (start < 0) return null;
+  const dotted = `${open}${raw.slice(0, start)}.${raw.slice(start)}${close}`;
+  return dotted === name ? null : dotted;
+}
+function applyListedVariableDots(html, variables) {
+  const replacements = variables.map((variable) => ({ from: variable.name, to: dottedListedToken(variable.name) })).filter((item) => item.to != null).sort((left, right) => right.from.length - left.from.length);
+  return replacements.reduce(
+    (current, item) => current.split(item.from).join(item.to),
+    html
+  );
+}
+function assignTemplateField(data, field, value) {
+  const parts = field.split(".");
+  if (parts.length === 1) {
+    data[field] = value;
+    return;
+  }
+  let current = data;
+  for (let index = 0; index < parts.length - 1; index += 1) {
+    const key = parts[index];
+    const next = current[key];
+    if (!next || typeof next !== "object" || Array.isArray(next)) current[key] = {};
+    current = current[key];
+  }
+  current[parts[parts.length - 1]] = value;
+}
+function variablesToTemplateData(variables) {
+  const data = {};
+  for (const variable of variables) {
+    if (variable.value === void 0) continue;
+    const field = variableFieldName(variable.name);
+    if (!field) continue;
+    assignTemplateField(data, field, variable.value);
+  }
+  return data;
+}
+function mergeTemplateData(variables, defaultData) {
+  const globalData = variablesToTemplateData(variables);
+  if (Object.keys(globalData).length === 0 && defaultData === void 0) {
+    return void 0;
+  }
+  return __spreadValues(__spreadValues({}, globalData), defaultData);
+}
+function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
+  var _a, _b, _c;
+  const normalizedOptions = normalizeBlockRenderOptions(options);
+  const rendered = renderBlock(
+    node,
+    definitions,
+    mode,
+    (_a = normalizedOptions.global) != null ? _a : DEFAULT_EMAIL_GLOBAL
+  );
+  if (!normalizedOptions.resolveHtmlTemplate) {
+    return applyListedVariableDots(rendered, (_b = normalizedOptions.variables) != null ? _b : []);
+  }
+  return renderTemplatePreview(
+    rendered,
+    (_c = normalizedOptions.templateData) != null ? _c : node.defaultData
+  );
+}
+function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", global = DEFAULT_EMAIL_GLOBAL) {
+  const definition = getBlockDefinition(node.type, definitions);
+  return definition ? definition.render(buildRenderContext(node, mode, global)) : `<!-- unknown block type: ${node.type} -->`;
+}
+function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
+  var _a, _b, _c, _d, _e;
+  const normalizedOptions = normalizeBlockRenderOptions(options);
+  const global = (_a = normalizedOptions.global) != null ? _a : DEFAULT_EMAIL_GLOBAL;
+  const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, normalizedOptions), {
+    global
+  }));
+  const height = cssPx((_c = (_b = node.style) == null ? void 0 : _b.dimension) == null ? void 0 : _c.height);
+  const cellAttrs = height ? ` height="${esc(height)}" valign="top"` : "";
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td style="padding:${esc(cssSpacing((_e = (_d = node.style) == null ? void 0 : _d.dimension) == null ? void 0 : _e.margin))};"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;"><tr><td${cellAttrs} style="${blockCellCss(node.style, global)}">${inner}</td></tr></table></td></tr></table>`;
+}
+
+// src/stage/rich-text/RichText.tsx
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState8 } from "react";
+import { createPortal } from "react-dom";
+import { EditorContent, useEditor } from "@tiptap/react";
+
+// src/stage/rich-text/components/RichTextToolbar.tsx
+import { useEffect as useEffect4, useRef as useRef8, useState as useState7 } from "react";
+import { useEditorState } from "@tiptap/react";
+
+// src/stage/rich-text/constants.ts
+var PARAGRAPH_SPACING_MAX = 48;
+var LINE_HEIGHT_RANGE = { min: 1, max: 2.5, step: 0.05 };
+var FONT_SIZES = [
+  "12px",
+  "13px",
+  "14px",
+  "15px",
+  "16px",
+  "18px",
+  "20px",
+  "24px",
+  "28px",
+  "32px",
+  "36px",
+  "48px"
+];
+var TEXT_COLORS = [
+  "#202223",
+  "#303030",
+  "#6d7175",
+  "#d72c0d",
+  "#b98900",
+  "#008060",
+  "#005bd3",
+  "#6d28d9",
+  "#ffffff"
+];
+var EMOJIS = [
+  "\u{1F600}",
+  "\u{1F601}",
+  "\u{1F602}",
+  "\u{1F60A}",
+  "\u{1F60D}",
+  "\u{1F60E}",
+  "\u{1F609}",
+  "\u{1F622}",
+  "\u{1F44D}",
+  "\u{1F44E}",
+  "\u{1F64F}",
+  "\u{1F44F}",
+  "\u{1F389}",
+  "\u{1F525}",
+  "\u2764\uFE0F",
+  "\u2B50",
+  "\u2705",
+  "\u2728",
+  "\u{1F4E6}",
+  "\u{1F69A}",
+  "\u{1F381}",
+  "\u{1F4A1}",
+  "\u{1F4E3}",
+  "\u{1F6D2}",
+  "\u{1F4B0}",
+  "\u{1F3F7}\uFE0F",
+  "\u23F0",
+  "\u{1F4C5}",
+  "\u{1F4CD}",
+  "\u2709\uFE0F",
+  "\u{1F517}",
+  "\u{1F440}"
+];
+var TEXT_ALIGNS2 = [
+  { value: TEXT_ALIGNS.left, title: "Align left", icon: "align-left" },
+  { value: TEXT_ALIGNS.center, title: "Align center", icon: "align-center" },
+  { value: TEXT_ALIGNS.right, title: "Align right", icon: "align-right" },
+  { value: TEXT_ALIGNS.justify, title: "Justify", icon: "align-justify" }
+];
+
+// src/stage/rich-text/useAnchoredToolbar.ts
+import { useLayoutEffect, useRef as useRef4 } from "react";
+function useAnchoredToolbar(anchorRef, active) {
+  const toolbarRef = useRef4(null);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const anchor = anchorRef.current;
+    const toolbar = toolbarRef.current;
+    if (!anchor || !toolbar) return;
+    const ownerDocument = anchor.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    if (!ownerWindow) return;
+    const place = () => {
+      var _a;
+      const block = (_a = anchor.closest(".ree-block")) != null ? _a : anchor;
+      const rect = block.getBoundingClientRect();
+      const offscreen = rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > ownerWindow.innerHeight;
+      if (offscreen) {
+        toolbar.classList.remove("is-placed");
+        return;
+      }
+      const width = Math.min(rect.width, ownerWindow.innerWidth - 16);
+      toolbar.style.width = `${width}px`;
+      const height = toolbar.offsetHeight;
+      let top = rect.top - height - 4;
+      if (top < 8) {
+        const below = rect.bottom + 4;
+        top = below + height <= ownerWindow.innerHeight - 8 ? below : 8;
+      }
+      let left = rect.left;
+      const maxLeft = Math.max(8, ownerWindow.innerWidth - width - 8);
+      if (left > maxLeft) left = maxLeft;
+      if (left < 8) left = 8;
+      toolbar.style.top = `${top}px`;
+      toolbar.style.left = `${left}px`;
+      toolbar.classList.add("is-placed");
+    };
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(toolbar);
+    ownerDocument.addEventListener("scroll", place, true);
+    ownerWindow.addEventListener("resize", place);
+    return () => {
+      observer.disconnect();
+      ownerDocument.removeEventListener("scroll", place, true);
+      ownerWindow.removeEventListener("resize", place);
+    };
+  }, [active, anchorRef]);
+  return toolbarRef;
+}
+
+// src/stage/rich-text/utils.ts
+var ALIGNMENTS = Object.values(TEXT_ALIGNS);
+function textAttribute(value) {
+  return typeof value === "string" ? value : "";
+}
+function markWeight(value) {
+  return value === FONT_WEIGHTS.normal || value === FONT_WEIGHTS.bold ? value : "";
+}
+function isVisuallyBold(markWeightValue, strong, inherited) {
+  if (strong || markWeightValue === FONT_WEIGHTS.bold) return true;
+  if (markWeightValue === FONT_WEIGHTS.normal) return false;
+  return inherited === FONT_WEIGHTS.bold;
+}
+function readToolbarState(editor) {
+  var _a;
+  const textStyle = editor.getAttributes("textStyle");
+  const link = editor.getAttributes("link");
+  return {
+    bold: editor.isActive("bold"),
+    italic: editor.isActive("italic"),
+    underline: editor.isActive("underline"),
+    strike: editor.isActive("strike"),
+    bulletList: editor.isActive("bulletList"),
+    orderedList: editor.isActive("orderedList"),
+    align: (_a = ALIGNMENTS.find((value) => editor.isActive({ textAlign: value }))) != null ? _a : "",
+    fontFamily: textAttribute(textStyle.fontFamily),
+    fontSize: textAttribute(textStyle.fontSize),
+    fontWeight: markWeight(textStyle.fontWeight),
+    color: textAttribute(textStyle.color),
+    linkHref: textAttribute(link.href),
+    spacing: textAttribute(editor.getAttributes("paragraph").spacing),
+    lineHeight: textAttribute(editor.getAttributes("paragraph").lineHeight)
+  };
+}
+function toggleVisualBold(editor, inherited) {
+  const state = readToolbarState(editor);
+  const visuallyBold = isVisuallyBold(state.fontWeight, state.bold, inherited);
+  const chain = editor.chain().focus().unsetBold();
+  if (visuallyBold) {
+    if (inherited === FONT_WEIGHTS.bold) {
+      chain.setMark("textStyle", { fontWeight: FONT_WEIGHTS.normal }).run();
+      return;
+    }
+    chain.setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
+    return;
+  }
+  if (inherited === FONT_WEIGHTS.bold) {
+    chain.setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
+    return;
+  }
+  chain.setMark("textStyle", { fontWeight: FONT_WEIGHTS.bold }).run();
+}
+function toColorInputValue(value, fallback) {
+  return /^#[0-9a-fA-F]{6}$/.test(value) ? value : fallback;
+}
+function focusSelection(editor, range) {
+  const chain = editor.chain().focus();
+  if (!range) return chain;
+  return chain.setTextSelection(range);
+}
+function currentSelection(editor) {
+  const { from, to } = editor.state.selection;
+  return { from, to };
+}
+
+// src/stage/rich-text/components/ColorMenu.tsx
+import { useRef as useRef5 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function ColorMenu({ colors, value, fallback, onSelect, onClear }) {
+  const inputRef = useRef5(null);
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx22("div", { className: "ree-rte-swatches", children: colors.map((color) => /* @__PURE__ */ jsx22(
+      "button",
+      {
+        type: "button",
+        className: `ree-rte-swatch${sameColor(color, value) ? " is-active" : ""}`,
+        style: { backgroundColor: color },
+        title: color,
+        "aria-label": color,
+        onClick: () => onSelect(color)
+      },
+      color
+    )) }),
+    /* @__PURE__ */ jsxs16("div", { className: "ree-rte-color-actions", children: [
+      /* @__PURE__ */ jsx22("button", { type: "button", className: "ree-btn", onClick: onClear, children: "Default" }),
+      /* @__PURE__ */ jsx22("button", { type: "button", className: "ree-btn", onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.click();
+      }, children: "Custom" }),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          ref: inputRef,
+          className: "ree-rte-color-input",
+          type: "color",
+          tabIndex: -1,
+          value: toColorInputValue(value, fallback),
+          onChange: (event) => onSelect(event.target.value)
+        }
+      )
+    ] })
+  ] });
+}
+function sameColor(left, right) {
+  return left.toLowerCase() === right.toLowerCase();
+}
+
+// src/stage/rich-text/components/EmojiMenu.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function EmojiMenu({ onPick }) {
+  return /* @__PURE__ */ jsx23("div", { className: "ree-rte-emoji-grid", children: EMOJIS.map((emoji) => /* @__PURE__ */ jsx23(
+    "button",
+    {
+      type: "button",
+      className: "ree-rte-emoji",
+      title: emoji,
+      onClick: () => onPick(emoji),
+      children: emoji
+    },
+    emoji
+  )) });
+}
+
+// src/stage/rich-text/components/LinkPopover.tsx
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function LinkPopover({
+  url,
+  canUnlink,
+  onUrlChange,
+  onApply,
+  onUnlink
+}) {
+  const inputRef = useRef6(null);
+  useEffect3(() => {
+    var _a, _b;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    (_b = inputRef.current) == null ? void 0 : _b.select();
+  }, []);
+  return /* @__PURE__ */ jsxs17("div", { className: "ree-rte-link", children: [
+    /* @__PURE__ */ jsxs17("label", { className: "ree-field", children: [
+      /* @__PURE__ */ jsx24("span", { className: "ree-field-label", children: "Link URL" }),
+      /* @__PURE__ */ jsx24(
+        "input",
+        {
+          ref: inputRef,
+          className: "ree-input",
+          value: url,
+          placeholder: "https://",
+          onChange: (event) => onUrlChange(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              onApply();
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: "ree-rte-link-actions", children: [
+      /* @__PURE__ */ jsx24("button", { type: "button", className: "ree-btn", disabled: !canUnlink, onClick: onUnlink, children: "Unlink" }),
+      /* @__PURE__ */ jsx24("button", { type: "button", className: "ree-btn ree-btn-primary", onClick: onApply, children: "Apply" })
+    ] })
+  ] });
+}
+
+// src/stage/rich-text/components/ToolbarButton.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function ToolbarButton({
+  title,
+  active = false,
+  disabled = false,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx25(
+    "button",
+    {
+      type: "button",
+      className: `ree-tool-btn${active ? " is-active" : ""}`,
+      title,
+      "aria-pressed": active,
+      disabled,
+      onClick,
+      children
+    }
+  );
+}
+
+// src/stage/rich-text/components/ToolbarIcon.tsx
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+function ToolbarIcon({ name }) {
+  return /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", children: iconPaths(name) });
+}
+function iconPaths(name) {
+  const stroke = {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  switch (name) {
+    case "align-left":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 10h10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 18h10" })
+      ] }));
+    case "align-center":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M7 10h10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M7 18h10" })
+      ] }));
+    case "align-right":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M10 10h10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M10 18h10" })
+      ] }));
+    case "align-justify":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M4 6h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 10h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 14h16" }),
+        /* @__PURE__ */ jsx26("path", { d: "M4 18h16" })
+      ] }));
+    case "list-bullet":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M10 7h10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M10 12h10" }),
+        /* @__PURE__ */ jsx26("path", { d: "M10 17h10" }),
+        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "7", r: "1.2", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "12", r: "1.2", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsx26("circle", { cx: "5", cy: "17", r: "1.2", fill: "currentColor", stroke: "none" })
+      ] }));
+    case "list-ordered":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M11 7h9" }),
+        /* @__PURE__ */ jsx26("path", { d: "M11 12h9" }),
+        /* @__PURE__ */ jsx26("path", { d: "M11 17h9" }),
+        /* @__PURE__ */ jsx26("text", { x: "3", y: "9", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "1" }),
+        /* @__PURE__ */ jsx26("text", { x: "3", y: "14", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "2" }),
+        /* @__PURE__ */ jsx26("text", { x: "3", y: "19", fill: "currentColor", stroke: "none", fontSize: "7", fontFamily: "sans-serif", children: "3" })
+      ] }));
+    case "emoji":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "12", r: "8" }),
+        /* @__PURE__ */ jsx26("path", { d: "M8.5 14.2a4.2 4.2 0 0 0 7 0" }),
+        /* @__PURE__ */ jsx26("path", { d: "M9 10h.01" }),
+        /* @__PURE__ */ jsx26("path", { d: "M15 10h.01" })
+      ] }));
+    case "link":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M10 13a5 5 0 0 0 7.1.1l1.8-1.8a5 5 0 0 0-7.1-7.1L10.2 5.8" }),
+        /* @__PURE__ */ jsx26("path", { d: "M14 11a5 5 0 0 0-7.1-.1L5.1 12.7a5 5 0 0 0 7.1 7.1l1.6-1.6" })
+      ] }));
+    case "unlink":
+      return /* @__PURE__ */ jsxs18("g", __spreadProps(__spreadValues({}, stroke), { children: [
+        /* @__PURE__ */ jsx26("path", { d: "M9 17H7a5 5 0 0 1 0-10h2" }),
+        /* @__PURE__ */ jsx26("path", { d: "M15 7h2a5 5 0 0 1 0 10h-2" }),
+        /* @__PURE__ */ jsx26("path", { d: "M8 12h4" }),
+        /* @__PURE__ */ jsx26("path", { d: "m4 4 16 16" })
+      ] }));
+    case "chevron":
+      return /* @__PURE__ */ jsx26(
+        "path",
+        {
+          d: "M7 10.2 12 15l5-4.8",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.8",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      );
+  }
+}
+
+// src/stage/rich-text/components/ToolbarMenu.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState6 } from "react";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+function ToolbarMenu({
+  label,
+  title,
+  open,
+  onToggle,
+  align = "start",
+  caret = true,
+  active = false,
+  variant = "select",
+  panelClassName,
+  children
+}) {
+  const rootRef = useRef7(null);
+  const [up, setUp] = useState6(false);
+  useLayoutEffect2(() => {
+    if (!open || !rootRef.current) return;
+    const ownerWindow = rootRef.current.ownerDocument.defaultView;
+    if (!ownerWindow) return;
+    const rect = rootRef.current.getBoundingClientRect();
+    setUp(rect.bottom + 260 > ownerWindow.innerHeight && rect.top > 260);
+  }, [open]);
+  const buttonClass = variant === "icon" ? `ree-tool-btn${active ? " is-active" : ""}${open ? " is-open" : ""}` : `ree-rte-select${open ? " is-open" : ""}`;
+  return /* @__PURE__ */ jsxs19("div", { className: `ree-rte-pop${up ? " is-up" : ""}`, ref: rootRef, children: [
+    /* @__PURE__ */ jsxs19(
+      "button",
+      {
+        type: "button",
+        className: buttonClass,
+        title,
+        "aria-expanded": open,
+        onClick: onToggle,
+        children: [
+          variant === "select" ? /* @__PURE__ */ jsx27("span", { className: "ree-rte-select-label", children: label }) : label,
+          caret ? /* @__PURE__ */ jsx27(ToolbarIcon, { name: "chevron" }) : null
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx27(
+      "div",
+      {
+        className: [
+          "ree-rte-menu",
+          align === "end" ? "is-end" : "",
+          panelClassName != null ? panelClassName : ""
+        ].filter(Boolean).join(" "),
+        children
+      }
+    ) : null
+  ] });
+}
+
+// src/stage/rich-text/components/MetricSlider.tsx
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+function MetricSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  display,
+  overridden,
+  onChange,
+  onReset
+}) {
+  const progress = max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+  return /* @__PURE__ */ jsxs20("div", { className: "ree-rte-metric", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "ree-rte-metric-label", children: [
+      /* @__PURE__ */ jsx28("span", { children: label }),
+      /* @__PURE__ */ jsx28("span", { children: display })
+    ] }),
+    /* @__PURE__ */ jsx28(
+      "input",
+      {
+        "aria-label": label,
+        type: "range",
+        className: "ree-range",
+        style: { "--ree-range-progress": `${progress}%` },
+        value,
+        min,
+        max,
+        step,
+        onChange: (event) => onChange(Number(event.target.value))
+      }
+    ),
+    /* @__PURE__ */ jsx28("button", { type: "button", className: "ree-rte-option", disabled: !overridden, onClick: onReset, children: "Default" })
+  ] });
+}
+
+// src/stage/rich-text/components/ParagraphMetricMenus.tsx
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+function clampAmount(value, fallback, min, max) {
+  const parsed = readCssLength(value || fallback);
+  return Math.min(max, Math.max(min, parsed.amount));
+}
+function formatStep(value, step) {
+  var _a;
+  const places = ((_a = String(step).split(".")[1]) != null ? _a : "").length;
+  return String(Number((Math.round(value / step) * step).toFixed(places)));
+}
+function ParagraphMetricMenus({
+  menu,
+  spacing,
+  lineHeight,
+  inheritedSpacing,
+  inheritedLineHeight,
+  onToggle,
+  onSpacing,
+  onLineHeight
+}) {
+  const spacingValue = clampAmount(spacing, inheritedSpacing, 0, PARAGRAPH_SPACING_MAX);
+  const lineHeightValue = clampAmount(lineHeight, inheritedLineHeight, LINE_HEIGHT_RANGE.min, LINE_HEIGHT_RANGE.max);
+  const lineHeightLabel = formatStep(lineHeightValue, LINE_HEIGHT_RANGE.step);
+  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx29(
+      ToolbarMenu,
+      {
+        title: "Paragraph spacing",
+        open: menu === "spacing",
+        onToggle: () => onToggle("spacing"),
+        label: spacing || inheritedSpacing,
+        children: /* @__PURE__ */ jsx29(
+          MetricSlider,
+          {
+            label: "Space before",
+            value: spacingValue,
+            min: 0,
+            max: PARAGRAPH_SPACING_MAX,
+            step: 1,
+            display: `${spacingValue}px`,
+            overridden: Boolean(spacing),
+            onChange: (next) => onSpacing(`${next}px`),
+            onReset: () => onSpacing(null)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      ToolbarMenu,
+      {
+        title: "Line height",
+        open: menu === "lineHeight",
+        onToggle: () => onToggle("lineHeight"),
+        label: lineHeight || inheritedLineHeight || lineHeightLabel,
+        children: /* @__PURE__ */ jsx29(
+          MetricSlider,
+          {
+            label: "Line height",
+            value: lineHeightValue,
+            min: LINE_HEIGHT_RANGE.min,
+            max: LINE_HEIGHT_RANGE.max,
+            step: LINE_HEIGHT_RANGE.step,
+            display: lineHeightLabel,
+            overridden: Boolean(lineHeight),
+            onChange: (next) => onLineHeight(formatStep(next, LINE_HEIGHT_RANGE.step)),
+            onReset: () => onLineHeight(null)
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/stage/rich-text/template-spaces.ts
+var TOKEN = /\{\{[\s\S]*?\}\}/g;
+var SPACE_ENTITY = /\u00A0|&nbsp;|&#160;|&#x0*a0;/gi;
+function preserveTemplateSpaces(value) {
+  return value.replace(TOKEN, (token) => token.replace(/ /g, "\xA0"));
+}
+function restoreTemplateSpaces(value) {
+  return value.replace(TOKEN, (token) => token.replace(SPACE_ENTITY, " "));
+}
+
+// src/stage/rich-text/components/VariableMenu.tsx
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+function VariableMenu({ variables, onInsert }) {
+  if (variables.length === 0) {
+    return /* @__PURE__ */ jsx30("div", { className: "ree-personalization-empty", children: "No personalization fields" });
+  }
+  return /* @__PURE__ */ jsx30("div", { className: "ree-rte-variables", children: variables.map((variable) => /* @__PURE__ */ jsxs22(
+    "button",
+    {
+      type: "button",
+      className: "ree-var-item",
+      onClick: () => onInsert(variable.name),
+      children: [
+        /* @__PURE__ */ jsx30("span", { className: "ree-var-name", children: variable.name }),
+        variable.description ? /* @__PURE__ */ jsx30("span", { className: "ree-var-label", children: variable.description }) : null
+      ]
+    },
+    variable.name
+  )) });
+}
+
+// src/stage/rich-text/components/RichTextToolbar.tsx
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+function RichTextToolbar({
+  editor,
+  variables,
+  anchorRef,
+  inherited
+}) {
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current ? readToolbarState(current) : null
+  });
+  const rootRef = useAnchoredToolbar(anchorRef, Boolean(state));
+  const linkRange = useRef8(null);
+  const markRange = useRef8(null);
+  const [menu, setMenu] = useState7(null);
+  const [linkUrl, setLinkUrl] = useState7("https://");
+  useEffect4(() => {
+    const root = rootRef.current;
+    if (!menu || !root) return;
+    const ownerDocument = root.ownerDocument;
+    const onPointerDown = (event) => {
+      if (!root.contains(event.target)) setMenu(null);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMenu(null);
+    };
+    ownerDocument.addEventListener("pointerdown", onPointerDown, true);
+    ownerDocument.addEventListener("keydown", onKeyDown);
+    return () => {
+      ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
+      ownerDocument.removeEventListener("keydown", onKeyDown);
+    };
+  }, [menu]);
+  if (!state) return null;
+  const fontFamily = state.fontFamily || inherited.fontFamily;
+  const fontSize = state.fontSize || inherited.fontSize;
+  const color = state.color || inherited.color;
+  const bold = isVisuallyBold(state.fontWeight, state.bold, inherited.fontWeight);
+  const toggleMenu = (next) => {
+    if (menu !== next) {
+      const range = currentSelection(editor);
+      if (next === "link") {
+        setLinkUrl(state.linkHref || "https://");
+        linkRange.current = range;
+      }
+      if (next === "color" || next === "spacing" || next === "lineHeight") markRange.current = range;
+    }
+    setMenu((current) => current === next ? null : next);
+  };
+  const applyLink = () => {
+    const href = linkUrl.trim();
+    if (!href) return;
+    const range = linkRange.current;
+    const chain = focusSelection(editor, range);
+    if (range && range.from === range.to) {
+      chain.insertContent({
+        type: "text",
+        text: href,
+        marks: [{ type: "link", attrs: { href } }]
+      }).run();
+    } else {
+      chain.extendMarkRange("link").setLink({ href }).run();
+    }
+    setMenu(null);
+  };
+  const unlinkSaved = () => {
+    focusSelection(editor, linkRange.current).extendMarkRange("link").unsetLink().run();
+    setMenu(null);
+  };
+  const unlinkSelection = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setMenu(null);
+  };
+  const run = (command) => {
+    command();
+    setMenu(null);
+  };
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: "ree-rte-toolbar",
+      ref: rootRef,
+      onMouseDown: (event) => {
+        const ownerWindow = event.currentTarget.ownerDocument.defaultView;
+        const target = event.target;
+        if (ownerWindow && target instanceof ownerWindow.Element && target.closest("input, textarea")) return;
+        event.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "ree-rte-row", children: [
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Font",
+              open: menu === "font",
+              onToggle: () => toggleMenu("font"),
+              label: fontFamilyLabel(fontFamily),
+              children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  type: "button",
+                  className: `ree-rte-option${fontFamily === font.value ? " is-active" : ""}`,
+                  style: { fontFamily: font.value },
+                  onClick: () => run(() => editor.chain().focus().setFontFamily(font.value).run()),
+                  children: font.label
+                },
+                font.value
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Font size",
+              open: menu === "size",
+              onToggle: () => toggleMenu("size"),
+              label: fontSize || "15px",
+              children: FONT_SIZES.map((size) => /* @__PURE__ */ jsx31(
+                "button",
+                {
+                  type: "button",
+                  className: `ree-rte-option${fontSize === size ? " is-active" : ""}`,
+                  onClick: () => run(() => editor.chain().focus().setFontSize(size).run()),
+                  children: size
+                },
+                size
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Bold",
+              active: bold,
+              onClick: () => toggleVisualBold(editor, inherited.fontWeight),
+              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-bold", children: "B" })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Italic",
+              active: state.italic,
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-italic", children: "I" })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Underline",
+              active: state.underline,
+              onClick: () => editor.chain().focus().toggleUnderline().run(),
+              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-underline", children: "U" })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Strikethrough",
+              active: state.strike,
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              children: /* @__PURE__ */ jsx31("span", { className: "ree-tool-strike", children: "S" })
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Emoji",
+              variant: "icon",
+              caret: false,
+              align: "end",
+              open: menu === "emoji",
+              onToggle: () => toggleMenu("emoji"),
+              label: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "emoji" }),
+              children: /* @__PURE__ */ jsx31(
+                EmojiMenu,
+                {
+                  onPick: (emoji) => run(() => editor.chain().focus().insertContent(emoji).run())
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs23("div", { className: "ree-rte-row", children: [
+          TEXT_ALIGNS2.map((align) => /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: align.title,
+              active: state.align === align.value,
+              onClick: () => editor.chain().focus().toggleTextAlign(align.value).run(),
+              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: align.icon })
+            },
+            align.value
+          )),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ParagraphMetricMenus,
+            {
+              menu,
+              spacing: state.spacing,
+              lineHeight: state.lineHeight,
+              inheritedSpacing: inherited.paragraphSpacing,
+              inheritedLineHeight: inherited.lineHeight,
+              onToggle: toggleMenu,
+              onSpacing: (value) => {
+                const chain = focusSelection(editor, markRange.current);
+                if (value) chain.updateAttributes("paragraph", { spacing: value }).run();
+                else chain.resetAttributes("paragraph", "spacing").run();
+              },
+              onLineHeight: (value) => {
+                const chain = focusSelection(editor, markRange.current);
+                if (value) chain.updateAttributes("paragraph", { lineHeight: value }).run();
+                else chain.resetAttributes("paragraph", "lineHeight").run();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Bulleted list",
+              active: state.bulletList,
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "list-bullet" })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            ToolbarButton,
+            {
+              title: "Numbered list",
+              active: state.orderedList,
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "list-ordered" })
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Text color",
+              variant: "icon",
+              align: "end",
+              open: menu === "color",
+              onToggle: () => toggleMenu("color"),
+              label: /* @__PURE__ */ jsx31("span", { className: "ree-tool-color", style: { borderBottomColor: color }, children: "A" }),
+              children: /* @__PURE__ */ jsx31(
+                ColorMenu,
+                {
+                  colors: TEXT_COLORS,
+                  value: state.color,
+                  fallback: inherited.color,
+                  onSelect: (color2) => run(() => focusSelection(editor, markRange.current).setColor(color2).run()),
+                  onClear: () => run(() => focusSelection(editor, markRange.current).unsetColor().run())
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Link",
+              variant: "icon",
+              caret: false,
+              active: Boolean(state.linkHref),
+              align: "end",
+              open: menu === "link",
+              onToggle: () => toggleMenu("link"),
+              label: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "link" }),
+              panelClassName: "is-link",
+              children: /* @__PURE__ */ jsx31(
+                LinkPopover,
+                {
+                  url: linkUrl,
+                  canUnlink: Boolean(state.linkHref),
+                  onUrlChange: setLinkUrl,
+                  onApply: applyLink,
+                  onUnlink: unlinkSaved
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx31(ToolbarButton, { title: "Unlink", disabled: !state.linkHref, onClick: unlinkSelection, children: /* @__PURE__ */ jsx31(ToolbarIcon, { name: "unlink" }) }),
+          /* @__PURE__ */ jsx31("span", { className: "ree-rte-sep" }),
+          /* @__PURE__ */ jsx31(
+            ToolbarMenu,
+            {
+              title: "Personalization",
+              align: "end",
+              open: menu === "variable",
+              onToggle: () => toggleMenu("variable"),
+              label: "Personalization",
+              children: /* @__PURE__ */ jsx31(
+                VariableMenu,
+                {
+                  variables,
+                  onInsert: (token) => run(() => editor.chain().focus().insertContent(preserveTemplateSpaces(token)).run())
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/stage/rich-text/extensions.ts
+import Placeholder from "@tiptap/extension-placeholder";
+import StarterKit from "@tiptap/starter-kit";
+import TextAlign from "@tiptap/extension-text-align";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+
+// src/stage/rich-text/font-weight.ts
+import { Extension } from "@tiptap/react";
+function parseFontWeight(value) {
+  const weight = value.trim().toLowerCase();
+  return isStyleValue(FONT_WEIGHTS, weight) ? weight : null;
+}
+var FontWeight = Extension.create({
+  name: "fontWeight",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["textStyle"],
+        attributes: {
+          fontWeight: {
+            default: null,
+            parseHTML: (element) => parseFontWeight(element.style.fontWeight),
+            renderHTML: (attributes) => {
+              if (attributes.fontWeight !== FONT_WEIGHTS.normal && attributes.fontWeight !== FONT_WEIGHTS.bold) {
+                return {};
+              }
+              return { style: `font-weight: ${attributes.fontWeight}` };
+            }
+          }
+        }
+      }
+    ];
+  }
+});
+
+// src/stage/rich-text/paragraph-style.ts
+import { Extension as Extension2 } from "@tiptap/react";
+function lengthAttribute(value) {
+  const length = cssLength(value != null ? value : "", "");
+  return length || null;
+}
+function lineHeightAttribute(value) {
+  const lineHeight = cssLineHeight(value != null ? value : "", "");
+  return lineHeight || null;
+}
+var ParagraphStyle = Extension2.create({
+  name: "paragraphStyle",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["paragraph"],
+        attributes: {
+          spacing: {
+            default: null,
+            parseHTML: (element) => lengthAttribute(
+              element.getAttribute("data-spacing") || element.style.getPropertyValue("--ree-paragraph-gap")
+            ),
+            renderHTML: (attributes) => {
+              var _a;
+              const spacing = lengthAttribute((_a = attributes.spacing) != null ? _a : null);
+              if (!spacing) return {};
+              return { "data-spacing": spacing, style: `--ree-paragraph-gap: ${spacing}` };
+            }
+          },
+          lineHeight: {
+            default: null,
+            parseHTML: (element) => lineHeightAttribute(
+              element.getAttribute("data-line-height") || element.style.lineHeight
+            ),
+            renderHTML: (attributes) => {
+              var _a;
+              const lineHeight = lineHeightAttribute((_a = attributes.lineHeight) != null ? _a : null);
+              if (!lineHeight) return {};
+              return { "data-line-height": lineHeight, style: `line-height: ${lineHeight}` };
+            }
+          }
+        }
+      }
+    ];
+  }
+});
+
+// src/stage/rich-text/extensions.ts
+function createRichTextExtensions(placeholder2) {
+  return [
+    StarterKit.configure({
+      link: { openOnClick: false, autolink: true },
+      blockquote: false,
+      code: false,
+      codeBlock: false,
+      heading: false,
+      horizontalRule: false
+    }),
+    TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
+    FontWeight,
+    ParagraphStyle,
+    TextAlign.configure({
+      types: ["paragraph"],
+      alignments: Object.values(TEXT_ALIGNS)
+    }),
+    Placeholder.configure({ placeholder: placeholder2 })
+  ];
+}
+
+// src/stage/rich-text/RichText.tsx
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+var DEFAULT_INHERITED = {
+  fontFamily: DEFAULT_EMAIL_GLOBAL.fontFamily,
+  fontSize: "15px",
+  color: DEFAULT_EMAIL_GLOBAL.textColor,
+  fontWeight: DEFAULT_EMAIL_GLOBAL.fontWeight,
+  lineHeight: DEFAULT_EMAIL_GLOBAL.defaultLineHeight,
+  paragraphSpacing: DEFAULT_EMAIL_GLOBAL.paragraphSpacing
+};
+function RichText({
+  initialHtml,
+  placeholder: placeholder2,
+  variables,
+  selected,
+  inherited = DEFAULT_INHERITED,
+  onCommit,
+  onSelect
+}) {
+  const rootRef = useRef9(null);
+  const [host, setHost] = useState8(null);
+  const editor = useEditor({
+    extensions: createRichTextExtensions(placeholder2 != null ? placeholder2 : "Type something\u2026"),
+    content: preserveTemplateSpaces(initialHtml),
+    immediatelyRender: false,
+    onUpdate: ({ editor: current }) => onCommit(restoreTemplateSpaces(current.getHTML()))
+  });
+  useLayoutEffect3(() => {
+    var _a;
+    const node = rootRef.current;
+    const themeRoot = node == null ? void 0 : node.closest(".ree-root");
+    setHost(themeRoot instanceof HTMLElement ? themeRoot : (_a = node == null ? void 0 : node.ownerDocument.body) != null ? _a : null);
+  }, []);
+  useEffect5(() => {
+    if (!editor || restoreTemplateSpaces(editor.getHTML()) === initialHtml) return;
+    editor.commands.setContent(preserveTemplateSpaces(initialHtml), { emitUpdate: false });
+  }, [editor, initialHtml]);
+  return /* @__PURE__ */ jsxs24("div", { className: "ree-rte", ref: rootRef, onClick: onSelect, children: [
+    selected && editor && host ? createPortal(
+      /* @__PURE__ */ jsx32(
+        RichTextToolbar,
+        {
+          editor,
+          variables,
+          anchorRef: rootRef,
+          inherited
+        }
+      ),
+      host
+    ) : null,
+    editor ? /* @__PURE__ */ jsx32(EditorContent, { editor }) : /* @__PURE__ */ jsx32("div", { className: "ree-rte-loading", children: "Loading editor\u2026" })
+  ] });
+}
+
+// src/stage/canvas/components/HtmlCanvas.tsx
+import { useCallback, useEffect as useEffect6, useRef as useRef10 } from "react";
+
+// src/render/head-styles.ts
+function extractHeadStyles(html) {
+  const styles = [];
+  const next = html.replace(/<!--ree-head-->([\s\S]*?)<!--\/ree-head-->/g, (_, css) => {
+    const text = css.trim();
+    if (text) styles.push(text);
+    return "";
+  });
+  return { html: next, styles: styles.join("\n") };
+}
+
+// src/stage/canvas/components/HtmlCanvas.tsx
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+function frameHtml(html) {
+  const { html: body, styles } = extractHeadStyles(html);
+  return `<!DOCTYPE html><html><head><style>html,body{margin:0;padding:0;}body{display:flow-root;}</style>${styles}</head><body>${body}</body></html>`;
+}
+function HtmlCanvas({ html, onSelect }) {
+  const hasHtmlTag = /<\/?[a-z][\w:-]*(?:\s[^>]*)?>/i.test(html);
+  const containerRef = useRef10(null);
+  const frameRef = useRef10(null);
+  const cleanupRef = useRef10();
+  const observeContent = useCallback(() => {
+    var _a;
+    (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+    const container = containerRef.current;
+    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;
+    let animationFrame = 0;
+    const fit = () => {
+      const availableWidth = container.clientWidth;
+      if (!availableWidth) return;
+      frame.style.width = `${availableWidth}px`;
+      frame.style.height = "1px";
+      const contentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+      frame.style.height = `${contentHeight}px`;
+      container.style.height = `${contentHeight}px`;
+    };
+    const scheduleFit = () => {
+      window.cancelAnimationFrame(animationFrame);
+      animationFrame = window.requestAnimationFrame(fit);
+    };
+    const observer = new window.ResizeObserver(scheduleFit);
+    let previousWidth = container.clientWidth;
+    const containerObserver = new window.ResizeObserver(() => {
+      if (container.clientWidth === previousWidth) return;
+      previousWidth = container.clientWidth;
+      scheduleFit();
+    });
+    containerObserver.observe(container);
+    for (const child of document.body.children) observer.observe(child);
+    document.addEventListener("load", scheduleFit, true);
+    fit();
+    cleanupRef.current = () => {
+      observer.disconnect();
+      containerObserver.disconnect();
+      document.removeEventListener("load", scheduleFit, true);
+      window.cancelAnimationFrame(animationFrame);
+    };
+  }, []);
+  useEffect6(() => () => {
+    var _a;
+    return (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+  }, [hasHtmlTag, html]);
+  if (!hasHtmlTag) {
+    return /* @__PURE__ */ jsx33(
+      "div",
+      {
+        className: "ree-html-canvas ree-html-canvas-text",
+        onClick: onSelect,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: containerRef,
+      className: "ree-html-canvas",
+      onClick: () => onSelect(),
+      children: [
+        /* @__PURE__ */ jsx33(
+          "button",
+          {
+            type: "button",
+            className: "ree-html-canvas-hitbox",
+            "aria-label": "Select HTML block",
+            tabIndex: -1,
+            onPointerDown: () => onSelect(),
+            onClick: () => onSelect()
+          }
+        ),
+        /* @__PURE__ */ jsx33(
+          "iframe",
+          {
+            ref: frameRef,
+            className: "ree-html-canvas-frame",
+            title: "HTML block preview",
+            srcDoc: frameHtml(html),
+            sandbox: "allow-same-origin",
+            tabIndex: -1,
+            onLoad: observeContent
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/stage/canvas/block-style.ts
+function canvasBlockStyle(block, global) {
+  var _a, _b;
+  const height = cssPx((_b = (_a = block.style) == null ? void 0 : _a.dimension) == null ? void 0 : _b.height);
+  return __spreadValues(__spreadValues(__spreadValues({}, blockContentStyle(block.style, global)), contentVariables(block.style, global)), height ? { boxSizing: "border-box", minHeight: `${height}px` } : {});
+}
+
+// src/stage/canvas/CanvasBlock.tsx
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+function CanvasBlock({
+  block,
+  global,
+  definition,
+  selected,
+  dropEdge,
+  variables,
+  onSelect,
+  onCommitField,
+  onMove,
+  onDuplicate,
+  onRemove
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const dragData = { kind: "canvas" };
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: block.id, data: dragData });
+  const stop = (event) => event.stopPropagation();
+  const select = (event) => {
+    event == null ? void 0 : event.stopPropagation();
+    onSelect();
+  };
+  const renderedHtml = definition ? renderBlockContent(block, [definition], "canvas", {
+    resolveHtmlTemplate: block.type === "html",
+    templateData: mergeTemplateData(variables, block.defaultData),
+    global
+  }) : "";
+  const usesTemplatePreview = block.type === "html";
+  return /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      ref: setNodeRef,
+      style: {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        padding: cssSpacing((_b = (_a = block.style) == null ? void 0 : _a.dimension) == null ? void 0 : _b.margin)
+      },
+      className: [
+        "ree-block",
+        selected ? "is-selected" : "",
+        isDragging ? "is-dragging" : "",
+        dropEdge === "before" ? "is-drop-before" : "",
+        dropEdge === "after" ? "is-drop-after" : ""
+      ].filter(Boolean).join(" "),
+      onClick: select,
+      children: [
+        /* @__PURE__ */ jsx34(
+          "button",
+          __spreadProps(__spreadValues(__spreadValues({
+            type: "button",
+            className: "ree-block-grip"
+          }, attributes), listeners), {
+            onClick: select,
+            title: "Drag to reorder",
+            children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "5", r: "1.6" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "5", r: "1.6" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "19", r: "1.6" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "15", cy: "19", r: "1.6" })
+            ] })
+          })
+        ),
+        selected ? /* @__PURE__ */ jsxs26(
+          "div",
+          {
+            className: "ree-block-toolbar",
+            onClick: stop,
+            onPointerDown: stop,
+            onMouseDown: stop,
+            children: [
+              /* @__PURE__ */ jsx34(
+                "button",
+                {
+                  type: "button",
+                  className: "ree-block-btn",
+                  title: "Move up",
+                  onClick: () => onMove(-1),
+                  children: /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "m18 15-6-6-6 6" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "button",
+                {
+                  type: "button",
+                  className: "ree-block-btn",
+                  title: "Move down",
+                  onClick: () => onMove(1),
+                  children: /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "m6 9 6 6 6-6" }) })
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "button",
+                {
+                  type: "button",
+                  className: "ree-block-btn",
+                  title: "Duplicate",
+                  onClick: onDuplicate,
+                  children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx34("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                    /* @__PURE__ */ jsx34("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "button",
+                {
+                  type: "button",
+                  className: "ree-block-btn ree-danger",
+                  title: "Delete",
+                  onClick: onRemove,
+                  children: /* @__PURE__ */ jsxs26("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx34("path", { d: "M3 6h18" }),
+                    /* @__PURE__ */ jsx34("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+                    /* @__PURE__ */ jsx34("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+                  ] })
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx34(
+          "div",
+          {
+            className: `ree-block-content${(definition == null ? void 0 : definition.inlineEdit) ? " is-inline" : ""}`,
+            style: canvasBlockStyle(block, global),
+            children: (definition == null ? void 0 : definition.inlineEdit) ? /* @__PURE__ */ jsx34(
+              RichText,
+              {
+                initialHtml: String((_c = block.fields.html) != null ? _c : ""),
+                variables,
+                selected,
+                inherited: {
+                  fontFamily: String(typographyStyle(block.style, global).fontFamily),
+                  fontSize: String(typographyStyle(block.style, global).fontSize),
+                  color: ((_e = (_d = block.style) == null ? void 0 : _d.typography) == null ? void 0 : _e.color) || global.textColor,
+                  fontWeight: resolvedFontWeight(
+                    (_g = (_f = block.style) == null ? void 0 : _f.typography) == null ? void 0 : _g.fontWeight,
+                    global.fontWeight
+                  ),
+                  lineHeight: String((_h = typographyStyle(block.style, global).lineHeight) != null ? _h : ""),
+                  paragraphSpacing: contentDefaults(block.style, global).paragraph
+                },
+                onSelect,
+                onCommit: (html) => onCommitField(block.id, "html", html)
+              }
+            ) : usesTemplatePreview ? /* @__PURE__ */ jsx34(
+              HtmlCanvas,
+              {
+                html: renderedHtml,
+                onSelect: select
+              }
+            ) : /* @__PURE__ */ jsx34(
+              "div",
+              {
+                className: "ree-block-static",
+                dangerouslySetInnerHTML: {
+                  __html: definition ? definition.render(buildRenderContext(block, "canvas", global)) : `<!-- ${block.type} -->`
+                }
+              }
+            )
+          }
+        ),
+        definition ? /* @__PURE__ */ jsx34("span", { className: "ree-block-badge", children: definition.title }) : null
+      ]
+    }
+  );
+}
+
+// src/stage/canvas/Canvas.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function Canvas({
+  blocks,
+  global,
+  definitions,
+  selectedId,
+  dropTargetId,
+  dropEdge,
+  variables,
+  device,
+  onSelect,
+  onCommitField,
+  onMove,
+  onDuplicate,
+  onRemove
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: CANVAS_DROP_ID,
+    data: { kind: "canvas" }
+  });
+  return /* @__PURE__ */ jsx35(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `ree-canvas${isOver ? " is-over" : ""}`,
+      onClick: (event) => {
+        const ownerDocument = event.currentTarget.ownerDocument;
+        const ownerWindow = ownerDocument.defaultView;
+        const target = event.target;
+        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();
+        }
+      },
+      children: /* @__PURE__ */ jsx35(
+        "div",
+        {
+          className: "ree-email-viewport",
+          style: {
+            width: viewportWidth(device, global),
+            fontSize: global.defaultFontSize,
+            fontFamily: global.fontFamily,
+            backgroundColor: global.backgroundColor,
+            marginLeft: global.contentAlign === "left" ? 0 : "auto",
+            marginRight: global.contentAlign === "right" ? 0 : "auto"
+          },
+          children: /* @__PURE__ */ jsx35("div", { className: "ree-email-outer", style: { padding: global.outerPadding }, children: /* @__PURE__ */ jsx35(
+            "div",
+            {
+              className: "ree-email-surface",
+              style: __spreadProps(__spreadValues({}, surfaceStyle(global)), {
+                maxWidth: global.contentWidth,
+                marginLeft: global.contentAlign === "left" ? 0 : "auto",
+                marginRight: global.contentAlign === "right" ? 0 : "auto"
+              }),
+              children: /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  className: "ree-canvas-inner",
+                  style: { "--ree-block-gap": global.blockGap },
+                  children: blocks.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "ree-canvas-empty", children: "Drag a block here or click one to get started" }) : /* @__PURE__ */ jsx35(
+                    SortableContext,
+                    {
+                      items: blocks.map((block) => block.id),
+                      strategy: verticalListSortingStrategy,
+                      children: blocks.map((block) => /* @__PURE__ */ jsx35(
+                        CanvasBlock,
+                        {
+                          block,
+                          global,
+                          definition: getBlockDefinition(block.type, definitions),
+                          selected: block.id === selectedId,
+                          dropEdge: dropTargetId === block.id ? dropEdge : null,
+                          variables,
+                          onSelect: () => onSelect(block.id),
+                          onCommitField,
+                          onMove: (direction) => onMove(block.id, direction),
+                          onDuplicate: () => onDuplicate(block.id),
+                          onRemove: () => onRemove(block.id)
+                        },
+                        block.id
+                      ))
+                    }
+                  )
+                }
+              )
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+
+// src/stage/preview/Preview.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/render/document-html.ts
+function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
+  const source = ensureEmailDocument(document);
+  const global = source.global;
+  const baseCss = emailBaseCss(global);
+  const rendered = source.blocks.map((node, index) => {
+    var _a, _b;
+    const blockData = __spreadValues(__spreadValues({}, (_a = options.templateData) != null ? _a : {}), node.defaultData);
+    const block = blockToHtml(node, definitions, "email", {
+      resolveHtmlTemplate: options.resolveHtmlTemplates,
+      global,
+      variables: options.variables,
+      templateData: mergeTemplateData(
+        (_b = options.variables) != null ? _b : [],
+        Object.keys(blockData).length > 0 ? blockData : void 0
+      )
+    });
+    const gap = index < source.blocks.length - 1 ? spacerHtml(global.blockGap) : "";
+    return block + gap;
+  }).join("\n");
+  const { html: body, 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:${esc(global.backgroundColor)};word-spacing:normal;">`,
+    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${baseCss};background-color:${esc(global.backgroundColor)};table-layout:fixed;">`,
+    "<tr>",
+    `<td align="${esc(global.contentAlign)}" style="padding:${esc(global.outerPadding)};${baseCss};">`,
+    `<table role="presentation" align="${esc(global.contentAlign)}" width="${global.contentWidth}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${global.contentWidth}px;margin-left:${global.contentAlign === "left" ? "0" : "auto"};margin-right:${global.contentAlign === "right" ? "0" : "auto"};table-layout:fixed;">`,
+    "<tr>",
+    `<td style="box-sizing:border-box;${baseCss};${styleToCss(surfaceStyle(global))};">`,
+    body,
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</body>",
+    "</html>"
+  ].join("\n");
+}
+
+// src/stage/preview/Preview.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function Preview({ document, definitions, variables, device }) {
+  const html = useMemo2(
+    () => documentToHtml(document, definitions, {
+      resolveHtmlTemplates: true,
+      variables
+    }),
+    [document, definitions, variables]
+  );
+  return /* @__PURE__ */ jsx36("div", { className: "ree-preview-stage", children: /* @__PURE__ */ jsx36(
+    "iframe",
+    {
+      className: "ree-preview-frame",
+      title: "Email preview",
+      srcDoc: html,
+      style: {
+        width: viewportWidth(device, document.global),
+        fontSize: document.global.defaultFontSize,
+        marginLeft: document.global.contentAlign === "left" ? 0 : "auto",
+        marginRight: document.global.contentAlign === "right" ? 0 : "auto",
+        backgroundColor: document.global.backgroundColor || "#ffffff"
+      }
+    }
+  ) });
+}
+
+// src/stage/StageHeader.tsx
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+function StageHeader({
+  viewMode,
+  device,
+  onViewModeChange,
+  onDeviceChange
+}) {
+  return /* @__PURE__ */ jsxs27("div", { className: "ree-col-head ree-stage-head", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "ree-segment", role: "group", "aria-label": "Editor mode", children: [
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          type: "button",
+          className: `ree-segment-btn${viewMode === "edit" ? " is-active" : ""}`,
+          "aria-pressed": viewMode === "edit",
+          "aria-label": "Edit",
+          title: "Edit",
+          onClick: () => onViewModeChange("edit"),
+          children: /* @__PURE__ */ jsxs27("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__ */ jsx37("path", { d: "M12 20h9" }),
+            /* @__PURE__ */ jsx37("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Z" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx37("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          type: "button",
+          className: `ree-segment-btn ree-segment-btn-label${viewMode === "preview" ? " is-active" : ""}`,
+          "aria-pressed": viewMode === "preview",
+          "aria-label": "Preview",
+          title: "Preview",
+          onClick: () => onViewModeChange("preview"),
+          children: /* @__PURE__ */ jsxs27("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__ */ jsx37("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__ */ jsx37("circle", { cx: "12", cy: "12", r: "2.5" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs27("div", { className: "ree-segment", role: "group", "aria-label": "Canvas device", children: [
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          type: "button",
+          className: `ree-segment-btn${device === "desktop" ? " is-active" : ""}`,
+          "aria-pressed": device === "desktop",
+          "aria-label": "Desktop",
+          title: "Desktop",
+          onClick: () => onDeviceChange("desktop"),
+          children: /* @__PURE__ */ jsxs27("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__ */ jsx37("rect", { x: "3", y: "4", width: "18", height: "12", rx: "1.5" }),
+            /* @__PURE__ */ jsx37("path", { d: "M8 20h8" }),
+            /* @__PURE__ */ jsx37("path", { d: "M12 16v4" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx37("span", { className: "ree-segment-divider", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          type: "button",
+          className: `ree-segment-btn${device === "mobile" ? " is-active" : ""}`,
+          "aria-pressed": device === "mobile",
+          "aria-label": "Mobile",
+          title: "Mobile",
+          onClick: () => onDeviceChange("mobile"),
+          children: /* @__PURE__ */ jsxs27("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__ */ jsx37("rect", { x: "7", y: "2.5", width: "10", height: "19", rx: "2" }),
+            /* @__PURE__ */ jsx37("path", { d: "M11 18.5h2" })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/stage/Stage.tsx
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+function Stage({
+  session,
+  viewMode,
+  device,
+  onViewModeChange,
+  onDeviceChange,
+  onSelectBlock
+}) {
+  const { targetId, dropEdge } = useEditorDragState();
+  return /* @__PURE__ */ jsxs28("div", { className: "ree-col ree-col-center", children: [
+    /* @__PURE__ */ jsx38(
+      StageHeader,
+      {
+        viewMode,
+        device,
+        onViewModeChange,
+        onDeviceChange
+      }
+    ),
+    viewMode === "edit" ? /* @__PURE__ */ jsx38("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx38(
+      Canvas,
+      {
+        blocks: session.document.blocks,
+        global: session.document.global,
+        definitions: session.definitions,
+        selectedId: session.selectedId,
+        dropTargetId: targetId,
+        dropEdge,
+        variables: session.variables,
+        device,
+        onSelect: onSelectBlock,
+        onCommitField: session.updateField,
+        onMove: session.moveBlock,
+        onDuplicate: session.duplicateBlock,
+        onRemove: session.removeBlock
+      }
+    ) }) : /* @__PURE__ */ jsx38("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx38(
+      Preview,
+      {
+        document: session.document,
+        definitions: session.definitions,
+        variables: session.variables,
+        device
+      }
+    ) })
+  ] });
+}
+
+// src/shell/constants.ts
+var EMPTY_BLOCK_DEFINITIONS = [];
+var EMPTY_VARIABLES = [];
+var PERSONALIZATION_HINT = "Personalization fields will appear blank if no data is available.";
+
+// src/shell/SubjectBar.tsx
+import { useRef as useRef12 } from "react";
+
+// src/shell/PersonalizationMenu.tsx
+import { useEffect as useEffect7, useRef as useRef11, useState as useState9 } from "react";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+function PersonalizationMenu({
+  variables,
+  onInsert
+}) {
+  const [open, setOpen] = useState9(false);
+  const rootRef = useRef11(null);
+  useEffect7(() => {
+    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]);
+  return /* @__PURE__ */ jsxs29("div", { className: "ree-personalization", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs29(
+      "button",
+      {
+        type: "button",
+        className: "ree-personalization-btn",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        children: [
+          "Personalization",
+          /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx39("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__ */ jsx39("div", { className: "ree-var-menu ree-personalization-menu", children: variables.length === 0 ? /* @__PURE__ */ jsx39("div", { className: "ree-personalization-empty", children: "No personalization fields" }) : variables.map((variable) => /* @__PURE__ */ jsxs29(
+      "button",
+      {
+        type: "button",
+        className: "ree-var-item",
+        onClick: () => {
+          onInsert(variable.name);
+          setOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx39("span", { className: "ree-var-name", children: variable.name }),
+          variable.description ? /* @__PURE__ */ jsx39("span", { className: "ree-var-label", children: variable.description }) : null
+        ]
+      },
+      variable.name
+    )) }) : null
+  ] });
+}
+
+// src/shell/SubjectBar.tsx
+import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+function SubjectBar({
+  subject,
+  variables,
+  onSubjectChange,
+  onReset
+}) {
+  const inputRef = useRef12(null);
+  const insertVariable = (token) => {
+    var _a, _b;
+    const input = inputRef.current;
+    const start = (_a = input == null ? void 0 : input.selectionStart) != null ? _a : subject.length;
+    const end = (_b = input == null ? void 0 : input.selectionEnd) != null ? _b : subject.length;
+    const next = (subject.slice(0, start) + token + subject.slice(end)).slice(
+      0,
+      SUBJECT_MAX_LENGTH
+    );
+    onSubjectChange(next);
+    const cursor = Math.min(start + token.length, next.length);
+    requestAnimationFrame(() => {
+      var _a2, _b2;
+      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      (_b2 = inputRef.current) == null ? void 0 : _b2.setSelectionRange(cursor, cursor);
+    });
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: "ree-subject-bar", children: [
+    /* @__PURE__ */ jsx40("label", { className: "ree-subject-label", htmlFor: "ree-email-subject", children: "Email subject" }),
+    /* @__PURE__ */ jsx40(
+      "input",
+      {
+        id: "ree-email-subject",
+        ref: inputRef,
+        className: "ree-subject-input",
+        value: subject,
+        maxLength: SUBJECT_MAX_LENGTH,
+        onChange: (event) => onSubjectChange(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs30("span", { className: "ree-subject-count", children: [
+      subject.length,
+      "/",
+      SUBJECT_MAX_LENGTH
+    ] }),
+    variables.length > 0 ? /* @__PURE__ */ jsxs30(Fragment3, { children: [
+      /* @__PURE__ */ jsx40(PersonalizationMenu, { variables, onInsert: insertVariable }),
+      /* @__PURE__ */ jsx40("p", { className: "ree-subject-hint", children: PERSONALIZATION_HINT })
+    ] }) : null,
+    /* @__PURE__ */ jsx40("button", { type: "button", className: "ree-btn ree-subject-reset", onClick: onReset, children: "Reset" })
+  ] });
+}
+
+// src/shell/useEditorSession.ts
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef13, useState as useState10 } from "react";
+
+// src/utils/id.ts
+function generateId(prefix = "block") {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return `${prefix}-${crypto.randomUUID().slice(0, 8)}`;
+  }
+  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 fields = __spreadValues({}, (_a = definition.defaultFields) != null ? _a : {});
+  for (const field of (_b = definition.fields) != null ? _b : []) {
+    if (!(field.name in fields) && field.defaultValue !== void 0) {
+      fields[field.name] = field.defaultValue;
+    }
+  }
+  if (definition.inlineEdit && !("html" in fields)) {
+    fields.html = "<p></p>";
+  }
+  return {
+    id: generateId(type),
+    type,
+    fields,
+    style: definition.defaultStyle ? structuredClone(definition.defaultStyle) : void 0,
+    defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
+  };
+}
+
+// src/document/mutations.ts
+function moveItem(items, from, to) {
+  const next = items.slice();
+  const [item] = next.splice(from, 1);
+  if (item === void 0) return items;
+  next.splice(to, 0, item);
+  return next;
+}
+function insertBlockNode(document, node, index) {
+  const blocks = [...document.blocks];
+  const at = index != null ? index : blocks.length;
+  blocks.splice(Math.max(0, Math.min(at, blocks.length)), 0, node);
+  return __spreadProps(__spreadValues({}, document), { blocks });
+}
+function updateBlockField(document, id, name, value) {
+  return __spreadProps(__spreadValues({}, document), {
+    blocks: document.blocks.map(
+      (block) => block.id === id ? __spreadProps(__spreadValues({}, block), { fields: __spreadProps(__spreadValues({}, block.fields), { [name]: value }) }) : block
+    )
+  });
+}
+function updateBlockStyle(document, id, styleId, value) {
+  return __spreadProps(__spreadValues({}, document), {
+    blocks: document.blocks.map(
+      (block) => block.id === id ? __spreadProps(__spreadValues({}, block), { style: writeStyleValue(block.style, styleId, value) }) : block
+    )
+  });
+}
+function moveBlockBy(document, id, direction) {
+  const index = document.blocks.findIndex((block) => block.id === id);
+  const target = index + direction;
+  if (index < 0 || target < 0 || target >= document.blocks.length) return document;
+  return __spreadProps(__spreadValues({}, document), { blocks: moveItem(document.blocks, index, target) });
+}
+function duplicateBlockNode(document, id) {
+  const index = document.blocks.findIndex((block) => block.id === id);
+  if (index < 0) return document;
+  const source = document.blocks[index];
+  const copy = __spreadProps(__spreadValues({}, structuredClone(source)), {
+    id: generateId(source.type)
+  });
+  const blocks = [...document.blocks];
+  blocks.splice(index + 1, 0, copy);
+  return __spreadProps(__spreadValues({}, document), { blocks });
+}
+function removeBlockNode(document, id) {
+  return __spreadProps(__spreadValues({}, document), {
+    blocks: document.blocks.filter((block) => block.id !== id)
+  });
+}
+function reorderBlockNodes(document, activeId, overId) {
+  if (activeId === overId) return document;
+  const oldIndex = document.blocks.findIndex((block) => block.id === activeId);
+  const newIndex = document.blocks.findIndex((block) => block.id === overId);
+  if (oldIndex < 0 || newIndex < 0) return document;
+  return __spreadProps(__spreadValues({}, document), { blocks: moveItem(document.blocks, oldIndex, newIndex) });
+}
+function withSubject(document, subject) {
+  return __spreadProps(__spreadValues({}, document), { subject });
+}
+function updateGlobalSettings(document, patch) {
+  return __spreadProps(__spreadValues({}, document), {
+    global: mergeEmailGlobal(document.global, patch)
+  });
+}
+
+// src/shell/useEditorSession.ts
+function useEditorSession({
+  initialDocument,
+  global,
+  blocks = EMPTY_BLOCK_DEFINITIONS,
+  variables = EMPTY_VARIABLES,
+  onChange,
+  onGlobalChange
+}) {
+  var _a;
+  const definitions = useMemo3(() => mergeBlockDefinitions(blocks), [blocks]);
+  const [baseline] = useState10(() => {
+    const base = ensureEmailDocument(
+      structuredClone(initialDocument != null ? initialDocument : createEmptyDocument())
+    );
+    if (global === void 0) return base;
+    return __spreadProps(__spreadValues({}, base), { global: mergeEmailGlobal(base.global, global) });
+  });
+  const [document, setDocument] = useState10(
+    () => structuredClone(baseline)
+  );
+  const [selectedId, setSelectedId] = useState10(null);
+  const documentRef = useRef13(document);
+  documentRef.current = document;
+  const globalPropRef = useRef13(global);
+  globalPropRef.current = global;
+  const commit = useCallback2(
+    (next) => {
+      documentRef.current = next;
+      setDocument(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [onChange]
+  );
+  useEffect8(() => {
+    if (global === void 0) return;
+    const current = documentRef.current;
+    const nextGlobal = mergeEmailGlobal(current.global, global);
+    if (sameEmailGlobal(resolveEmailGlobal(current.global), nextGlobal)) return;
+    commit(__spreadProps(__spreadValues({}, current), { global: nextGlobal }));
+  }, [global, commit]);
+  const getDocument = useCallback2(
+    () => ensureEmailDocument(structuredClone(documentRef.current)),
+    []
+  );
+  const selectBlock = useCallback2((id) => {
+    setSelectedId(id);
+  }, []);
+  const insertBlock = useCallback2(
+    (type, index) => {
+      const node = createBlockNode(type, definitions);
+      if (!node) return false;
+      commit(insertBlockNode(documentRef.current, node, index));
+      setSelectedId(node.id);
+      return true;
+    },
+    [commit, definitions]
+  );
+  const updateField = useCallback2(
+    (id, name, value) => {
+      commit(updateBlockField(documentRef.current, id, name, value));
+    },
+    [commit]
+  );
+  const updateStyle = useCallback2(
+    (id, styleId, value) => {
+      commit(updateBlockStyle(documentRef.current, id, styleId, value));
+    },
+    [commit]
+  );
+  const updateGlobal = useCallback2(
+    (patch) => {
+      const next = updateGlobalSettings(documentRef.current, patch);
+      commit(next);
+      onGlobalChange == null ? void 0 : onGlobalChange(next.global);
+    },
+    [commit, onGlobalChange]
+  );
+  const moveBlock = useCallback2(
+    (id, direction) => {
+      commit(moveBlockBy(documentRef.current, id, direction));
+    },
+    [commit]
+  );
+  const duplicateBlock = useCallback2(
+    (id) => {
+      commit(duplicateBlockNode(documentRef.current, id));
+    },
+    [commit]
+  );
+  const removeBlock = useCallback2(
+    (id) => {
+      commit(removeBlockNode(documentRef.current, id));
+      setSelectedId((current) => current === id ? null : current);
+    },
+    [commit]
+  );
+  const reorderBlocks = useCallback2(
+    (activeId, overId) => {
+      commit(reorderBlockNodes(documentRef.current, activeId, overId));
+    },
+    [commit]
+  );
+  const setSubject = useCallback2(
+    (subject) => {
+      commit(withSubject(documentRef.current, subject.slice(0, SUBJECT_MAX_LENGTH)));
+    },
+    [commit]
+  );
+  const reset = useCallback2(() => {
+    const restored = structuredClone(baseline);
+    const incoming = globalPropRef.current;
+    const next = incoming === void 0 ? restored : __spreadProps(__spreadValues({}, restored), { global: mergeEmailGlobal(restored.global, incoming) });
+    commit(next);
+    setSelectedId(null);
+  }, [baseline, commit]);
+  const resolvedDocument = useMemo3(() => ensureEmailDocument(document), [document]);
+  const selectedBlock = (_a = resolvedDocument.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
+  const selectedDefinition = selectedBlock ? getBlockDefinition(selectedBlock.type, definitions) : void 0;
+  return {
+    document: resolvedDocument,
+    getDocument,
+    definitions,
+    variables,
+    selectedId,
+    selectedBlock,
+    selectedDefinition,
+    selectBlock,
+    insertBlock,
+    updateField,
+    updateStyle,
+    updateGlobal,
+    moveBlock,
+    duplicateBlock,
+    removeBlock,
+    reorderBlocks,
+    setSubject,
+    reset
+  };
+}
+
+// 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 jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+var EmailEditorShell = forwardRef(
+  function EmailEditorShell2({
+    initialDocument,
+    global,
+    blocks,
+    variables = EMPTY_VARIABLES,
+    height = "100%",
+    onChange,
+    onGlobalChange
+  }, ref) {
+    var _a;
+    const session = useEditorSession({
+      initialDocument,
+      global,
+      blocks,
+      variables,
+      onChange,
+      onGlobalChange
+    });
+    useEditorHandle(ref, session);
+    const [viewMode, setViewMode] = useState11("edit");
+    const [device, setDevice] = useState11("desktop");
+    const [inspectorPanel, setInspectorPanel] = useState11("global");
+    useEffect9(() => {
+      if (!session.selectedId) setInspectorPanel("global");
+    }, [session.selectedId]);
+    const selectBlock = (id) => {
+      const hadSelection = session.selectedId !== null;
+      session.selectBlock(id);
+      if (!id) {
+        setInspectorPanel("global");
+        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__ */ jsxs31("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx41(
+        SubjectBar,
+        {
+          subject: (_a = session.document.subject) != null ? _a : "",
+          variables: session.variables,
+          onSubjectChange: session.setSubject,
+          onReset: session.reset
+        }
+      ),
+      /* @__PURE__ */ jsxs31("div", { className: "ree-body", children: [
+        /* @__PURE__ */ jsxs31(
+          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__ */ jsx41(
+                BlockLibrary,
+                {
+                  definitions: session.definitions,
+                  onAdd: (type) => {
+                    showCanvas();
+                    if (session.insertBlock(type)) setInspectorPanel("block");
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx41(
+                Stage,
+                {
+                  session,
+                  viewMode,
+                  device,
+                  onViewModeChange: setViewMode,
+                  onDeviceChange: setDevice,
+                  onSelectBlock: selectBlock
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          Inspector,
+          {
+            panel: inspectorPanel,
+            global: session.document.global,
+            block: session.selectedBlock,
+            definition: session.selectedDefinition,
+            variables: session.variables,
+            onPanelChange: setInspectorPanel,
+            onCommitGlobal: session.updateGlobal,
+            onCommitField: session.updateField,
+            onCommitStyle: session.updateStyle
+          }
+        )
+      ] })
+    ] });
+  }
+);
+
+// src/EmailEditor.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+var EmailEditor = forwardRef2(
+  function EmailEditor2(props, ref) {
+    return /* @__PURE__ */ jsx42(EmailEditorShell, __spreadProps(__spreadValues({}, props), { ref }));
+  }
+);
+export {
+  BLOCK_TYPES,
+  BORDER_STYLES,
+  DEFAULT_BLOCKS,
+  DEFAULT_EMAIL_GLOBAL,
+  DOCUMENT_VERSION,
+  EmailEditor,
+  FONT_FAMILIES,
+  FONT_WEIGHTS,
+  HORIZONTAL_ALIGNS,
+  LINK_DECORATIONS,
+  RichText,
+  STYLE_GROUPS,
+  TEXT_ALIGNS,
+  blockToHtml,
+  buildRenderContext,
+  createBlockNode,
+  createDecorationFields,
+  createDimensionFields,
+  createEmailDocument,
+  createTypographyFields,
+  documentToHtml,
+  generateId,
+  getBlockDefinition,
+  mergeTemplateData,
+  renderBlock,
+  renderBlockContent,
+  renderTemplatePreview,
+  resolveBlockStyleFields,
+  resolveEmailGlobal,
+  variablesToTemplateData
+};