@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.41

package/dist/chunk-LUPRGPKP.js

@@ -0,0 +1,2540 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-B4CKCNWD.js';
+import { RichTextEditor } from './chunk-SACHTD7B.js';
+import { Switch } from './chunk-AQ564XO7.js';
+import { Textarea } from './chunk-H3YO5GBM.js';
+import { Select } from './chunk-VCI2Y7ST.js';
+import { Input } from './chunk-3IMM2PM4.js';
+import { useLiveAnnouncement } from './chunk-HNXLLDPN.js';
+import { Button } from './chunk-WFBUBT54.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React3 from 'react';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Undo2, Redo2, Monitor, Smartphone, PanelBottom, Code, Table, Quote, Share2, MoveVertical, Minus, Image, MousePointerClick, Type, Heading, Columns2, Megaphone, GripVertical, ChevronUp, ChevronDown, Copy, Trash2, Plus, Upload, Globe, Github, Youtube, Instagram, Linkedin, Twitter, Facebook } from 'lucide-react';
+import DOMPurify from 'dompurify';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/EmailEditor/types.ts
+function generateEmailBlockId() {
+  return globalThis.crypto?.randomUUID?.() ?? `b${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+}
+function createDefaultDesignSettings() {
+  return {
+    bodyBackgroundColor: "#f4f4f5",
+    contentBackgroundColor: "#ffffff",
+    contentWidth: 600,
+    textColor: "#374151",
+    fontFamily: "Arial, Helvetica, sans-serif",
+    headingColor: "#111827",
+    linkColor: "#2563eb",
+    buttonBackgroundColor: "#2563eb",
+    buttonTextColor: "#ffffff",
+    buttonBorderRadius: 6
+  };
+}
+function resolveDesignSettings(design) {
+  const defined = Object.entries(design ?? {}).filter(
+    ([, v]) => v !== void 0
+  );
+  return { ...createDefaultDesignSettings(), ...Object.fromEntries(defined) };
+}
+function createEmailBlock(type) {
+  return newBlock(type);
+}
+function newBlock(type) {
+  const id = generateEmailBlockId();
+  switch (type) {
+    case "heading":
+      return { id, type, level: 2, text: "Heading", alignment: "left" };
+    case "text":
+      return { id, type, content: "<p>Write your message here.</p>" };
+    case "button":
+      return {
+        id,
+        type,
+        text: "Learn more",
+        url: "https://",
+        alignment: "center"
+      };
+    case "image":
+      return { id, type, src: "", alt: "", alignment: "center" };
+    case "divider":
+      return { id, type, style: "solid", color: "#e5e7eb" };
+    case "spacer":
+      return { id, type, height: 24 };
+    case "social":
+      return {
+        id,
+        type,
+        alignment: "center",
+        iconSize: "md",
+        links: [
+          { platform: "linkedin", url: "https://linkedin.com" },
+          { platform: "website", url: "https://" }
+        ]
+      };
+    case "html":
+      return { id, type, html: "<p>Custom HTML</p>" };
+    case "footer":
+      return {
+        id,
+        type,
+        showUnsubscribe: true,
+        unsubscribeText: "Unsubscribe from these emails",
+        alignment: "center",
+        color: "#6b7280"
+      };
+    case "quote":
+      return {
+        id,
+        type,
+        text: "A short testimonial.",
+        author: "Name",
+        role: "Title"
+      };
+    case "table":
+      return {
+        id,
+        type,
+        headerRow: true,
+        rows: [
+          ["Item", "Detail"],
+          ["", ""]
+        ]
+      };
+    case "hero":
+      return {
+        id,
+        type,
+        headline: "Big announcement",
+        subtitle: "One line that says why it matters.",
+        ctaText: "Read more",
+        ctaUrl: "https://",
+        backgroundColor: "#1e3a5f",
+        textColor: "#ffffff",
+        alignment: "center",
+        padding: 48
+      };
+    case "columns":
+      return {
+        id,
+        type,
+        columnCount: 2,
+        columns: [
+          { id: generateEmailBlockId(), width: 50, blocks: [] },
+          { id: generateEmailBlockId(), width: 50, blocks: [] }
+        ]
+      };
+  }
+}
+function createEmptyEmailContentTree() {
+  return {
+    version: "1.0",
+    blocks: [
+      {
+        ...createEmailBlock("heading"),
+        level: 1,
+        text: "Your email title",
+        alignment: "center"
+      },
+      createEmailBlock("text"),
+      createEmailBlock("footer")
+    ]
+  };
+}
+
+// src/components/EmailEditor/renderEmailMjml.ts
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function isSafeUrl(value) {
+  return /^(https?:|mailto:|tel:|#|\/(?![/\\\s])|\{\{[^{}]*\}\}$)/i.test(
+    (value ?? "").trim()
+  );
+}
+function safeUrl(value) {
+  const url = (value ?? "").trim();
+  return isSafeUrl(url) ? escapeHtml(url) : "#";
+}
+var COLOR = /^(#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|(rgb|rgba|hsl|hsla)\([\d\s.,%]+\)|[a-z]+)$/i;
+function safeColor(value, fallback) {
+  return value && COLOR.test(value.trim()) ? value.trim() : fallback;
+}
+function safeGradient(value) {
+  const gradient = value?.trim() ?? "";
+  return /^(linear|radial)-gradient\([^;{}<>"()]*(\([^;{}<>"()]*\)[^;{}<>"()]*)*\)$/i.test(
+    gradient
+  ) && !/url\s*\(/i.test(gradient) ? gradient : null;
+}
+function heroGradient(block) {
+  return /^[\w-]+$/.test(block.id) ? safeGradient(block.backgroundGradient) : null;
+}
+function hasHeroCta(block) {
+  return Boolean(block.ctaText && block.ctaUrl);
+}
+function align(value, fallback) {
+  return value === "left" || value === "center" || value === "right" ? value : fallback;
+}
+function px(value, fallback, max = 2e3) {
+  const n = Number(value);
+  return Number.isFinite(n) ? Math.min(Math.max(Math.round(n), 0), max) : fallback;
+}
+var SANITIZE_CONFIG = {
+  FORBID_TAGS: ["style", "form", "input", "textarea", "select", "button"],
+  // Host CSS classes (e.g. `fixed inset-0`) and ids would escape the style
+  // allowlist; srcset/xlink:href would escape the URL policy below.
+  FORBID_ATTR: ["class", "id", "srcset", "xlink:href"]
+};
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "src", "background", "poster"]);
+var SAFE_STYLE_PROPERTY = /^(color|background-color|font(-[a-z]+)?|text-(align|decoration|transform|indent)|line-height|letter-spacing|word-spacing|white-space|vertical-align|(margin|padding)(-(top|right|bottom|left))?|border(-(top|right|bottom|left))?(-(width|style|color))?|border-(collapse|spacing|radius)|(max-|min-)?(width|height)|display|list-style(-type)?)$/;
+function sanitizeInlineStyle(style) {
+  return style.split(";").map((declaration) => {
+    const colon = declaration.indexOf(":");
+    if (colon === -1) return "";
+    const property = declaration.slice(0, colon).trim().toLowerCase();
+    const value = declaration.slice(colon + 1).trim();
+    return SAFE_STYLE_PROPERTY.test(property) && value && !/url\s*\(|expression\s*\(|@import|[<>\\]/i.test(value) && // Negative margins could pull content over the surrounding page.
+    !(property.startsWith("margin") && value.includes("-")) ? `${property}: ${value}` : "";
+  }).filter(Boolean).join("; ");
+}
+var purifier;
+function installEmailPolicy(instance) {
+  instance.addHook("uponSanitizeAttribute", (_node, data) => {
+    if (URL_ATTRIBUTES.has(data.attrName)) {
+      if (!isSafeUrl(data.attrValue)) data.keepAttr = false;
+      return;
+    }
+    if (data.attrName !== "style") return;
+    data.attrValue = sanitizeInlineStyle(data.attrValue);
+    if (!data.attrValue) data.keepAttr = false;
+  });
+  return instance;
+}
+function createEmailHtmlSanitizer(win) {
+  const instance = DOMPurify(win);
+  if (!instance.isSupported) {
+    throw new Error(
+      "createEmailHtmlSanitizer: the supplied window cannot run DOMPurify."
+    );
+  }
+  installEmailPolicy(instance);
+  return (html) => instance.sanitize(html, SANITIZE_CONFIG);
+}
+function getPurifier() {
+  if (purifier !== void 0) return purifier;
+  if (typeof window === "undefined") return null;
+  const instance = DOMPurify(window);
+  if (!instance.isSupported) return purifier = null;
+  return purifier = installEmailPolicy(instance);
+}
+function sanitizeEmailHtml(html) {
+  return getPurifier()?.sanitize(html, SANITIZE_CONFIG) ?? null;
+}
+function defaultSanitize(html) {
+  const clean = sanitizeEmailHtml(html);
+  if (clean === null) {
+    throw new Error(
+      "renderEmailMjml: no DOM is available to sanitise HTML. Pass options.sanitizeHtml."
+    );
+  }
+  return clean;
+}
+var HEADING_SIZES = { 1: 32, 2: 26, 3: 22, 4: 18 };
+var SOCIAL_NAMES = {
+  facebook: "facebook-noshare",
+  twitter: "twitter-noshare",
+  linkedin: "linkedin-noshare",
+  instagram: "instagram",
+  youtube: "youtube",
+  github: "github",
+  website: "web"
+};
+var ICON_SIZES = { sm: 20, md: 25, lg: 35 };
+function renderContent(block, ctx, pad, available) {
+  const { design } = ctx;
+  switch (block.type) {
+    case "heading": {
+      const level = HEADING_SIZES[block.level] ? block.level : 2;
+      const color = safeColor(block.color, design.headingColor);
+      const size = HEADING_SIZES[level];
+      return `<mj-text align="${align(block.alignment, "left")}" font-size="${size}px" font-weight="bold" color="${color}" padding="${pad}"><h${level} style="font-size: ${size}px; line-height: 1.25;">${escapeHtml(block.text)}</h${level}></mj-text>`;
+    }
+    case "text": {
+      const color = block.color ? ` color="${safeColor(block.color, design.textColor)}"` : "";
+      return `<mj-text align="${align(block.alignment, "left")}"${color} padding="${pad}">${ctx.sanitize(block.content)}</mj-text>`;
+    }
+    case "button": {
+      const bg = safeColor(block.backgroundColor, design.buttonBackgroundColor);
+      const fg = safeColor(block.textColor, design.buttonTextColor);
+      const radius = px(
+        block.borderRadius ?? design.buttonBorderRadius,
+        6,
+        100
+      );
+      const width = block.fullWidth ? ' width="100%"' : "";
+      return `<mj-button align="${align(block.alignment, "center")}" background-color="${bg}" color="${fg}" border-radius="${radius}px" href="${safeUrl(block.url)}" font-size="16px" padding="${pad}"${width}>${escapeHtml(block.text)}</mj-button>`;
+    }
+    case "image": {
+      if (!block.src) return "";
+      const percent = /^(\d+(?:\.\d+)?|\.\d+)%$/.exec(
+        String(block.width ?? "").trim()
+      );
+      const share = percent ? Math.min(Number(percent[1]), 100) : 0;
+      const widthPx = percent ? Math.round(available * share / 100) : parseInt(String(block.width ?? ""), 10);
+      const width = Number.isFinite(widthPx) && widthPx > 0 && share !== 100 ? ` width="${px(widthPx, 600)}px"` : "";
+      const href = block.href ? ` href="${safeUrl(block.href)}"` : "";
+      const radius = block.borderRadius ? ` border-radius="${px(block.borderRadius, 0, 100)}px"` : "";
+      return `<mj-image src="${safeUrl(block.src)}" alt="${escapeHtml(block.alt ?? "")}" align="${align(block.alignment, "center")}"${width} padding="${pad}"${href}${radius} />`;
+    }
+    case "divider": {
+      const style = ["solid", "dashed", "dotted"].includes(block.style ?? "") ? block.style : "solid";
+      const width = /^\d+(px|%)$/.test(block.width ?? "") ? block.width : "100%";
+      return `<mj-divider border-color="${safeColor(block.color, "#e5e7eb")}" border-style="${style}" border-width="1px" width="${width}" padding="${pad}" />`;
+    }
+    case "spacer":
+      return `<mj-spacer height="${px(block.height, 24, 400)}px" />`;
+    case "social": {
+      const size = ICON_SIZES[block.iconSize ?? "md"] ?? ICON_SIZES.md;
+      const items = block.links.filter((link) => SOCIAL_NAMES[link.platform]).map(
+        (link) => `<mj-social-element name="${SOCIAL_NAMES[link.platform]}" href="${safeUrl(link.url)}" icon-size="${size}px" />`
+      ).join("");
+      return `<mj-social align="${align(block.alignment, "center")}" icon-size="${size}px" mode="horizontal" padding="${pad}">${items}</mj-social>`;
+    }
+    case "html":
+      return `<mj-raw>${ctx.sanitize(block.html)}</mj-raw>`;
+    case "footer": {
+      const color = safeColor(block.color, "#6b7280");
+      const lines = [block.companyName, block.address, block.phone].filter((line) => Boolean(line)).map(escapeHtml);
+      const links = [];
+      if (block.showUnsubscribe) {
+        links.push(
+          `<a href="${safeUrl(ctx.unsubscribeUrl)}" style="color: ${color};">${escapeHtml(block.unsubscribeText || "Unsubscribe")}</a>`
+        );
+      }
+      if (block.managePreferencesUrl) {
+        links.push(
+          `<a href="${safeUrl(block.managePreferencesUrl)}" style="color: ${color};">${escapeHtml(block.managePreferencesText || "Manage preferences")}</a>`
+        );
+      }
+      if (links.length) lines.push(links.join(" &nbsp; "));
+      return `<mj-text align="${align(block.alignment, "center")}" color="${color}" font-size="12px" padding="${pad}">${lines.join("<br />")}</mj-text>`;
+    }
+    case "quote": {
+      const fg = safeColor(block.textColor, "#1e293b");
+      const accent = safeColor(block.accentColor, design.linkColor);
+      const bg = safeColor(block.backgroundColor, "#f8fafc");
+      let attribution = "";
+      if (block.author) {
+        attribution = `<p style="margin: 12px 0 0; font-weight: 600;">${escapeHtml(block.author)}</p>`;
+        if (block.role) {
+          attribution += `<p style="margin: 2px 0 0; font-size: 13px; opacity: 0.75;">${escapeHtml(block.role)}</p>`;
+        }
+      }
+      return `<mj-text align="${align(block.alignment, "left")}" color="${fg}" container-background-color="${bg}" padding="${pad}"><div style="border-left: 4px solid ${accent}; padding: 8px 0 8px 16px;"><p style="font-size: 18px; font-style: italic; line-height: 1.6; margin: 0;">&ldquo;${escapeHtml(block.text)}&rdquo;</p>${attribution}</div></mj-text>`;
+    }
+    case "table": {
+      if (!block.rows.length) return "";
+      const border = safeColor(block.borderColor, "#e5e7eb");
+      const headBg = safeColor(block.headerBackgroundColor, "#f3f4f6");
+      const headFg = safeColor(block.headerTextColor, design.headingColor);
+      const textAlign = align(block.alignment, "left");
+      const rows = block.rows.map((row, r) => {
+        const head = block.headerRow && r === 0;
+        const tag = head ? "th" : "td";
+        const style = head ? `background-color: ${headBg}; color: ${headFg}; font-weight: 600; ` : "";
+        return `<tr>${row.map(
+          (cell) => `<${tag} style="${style}padding: 10px 12px; border: 1px solid ${border}; text-align: ${textAlign};">${escapeHtml(cell)}</${tag}>`
+        ).join("")}</tr>`;
+      }).join("");
+      return `<mj-table padding="${pad}" width="100%" cellpadding="0" cellspacing="0" css-class="email-table">${rows}</mj-table>`;
+    }
+    // Unsupported block types (host-owned blocks in a loaded document) are
+    // omitted from the email; the canvas shows a placeholder for them.
+    default:
+      return "";
+  }
+}
+function renderHero(block) {
+  const bg = safeColor(block.backgroundColor, "#1e3a5f");
+  const fg = safeColor(block.textColor, "#ffffff");
+  const a = align(block.alignment, "center");
+  const parts = [];
+  if (block.categoryText) {
+    parts.push(
+      `<mj-text align="${a}" color="${fg}" font-size="12px" font-weight="700" letter-spacing="2px" text-transform="uppercase" padding="0 0 8px 0">${escapeHtml(block.categoryText)}</mj-text>`
+    );
+  }
+  parts.push(
+    `<mj-text align="${a}" color="${fg}" font-size="32px" font-weight="bold" line-height="1.2" padding="0 0 8px 0"><h1 style="color: ${fg}; margin: 0; font-size: 32px; line-height: 1.2;">${escapeHtml(block.headline)}</h1></mj-text>`
+  );
+  if (block.subtitle) {
+    parts.push(
+      `<mj-text align="${a}" color="${fg}" font-size="16px" line-height="1.5" padding="0 0 16px 0">${escapeHtml(block.subtitle)}</mj-text>`
+    );
+  }
+  if (hasHeroCta(block)) {
+    parts.push(
+      `<mj-button align="${a}" background-color="${safeColor(block.ctaColor, "#ffffff")}" color="${bg}" font-size="16px" font-weight="600" border-radius="6px" padding="8px 0" href="${safeUrl(block.ctaUrl)}">${escapeHtml(block.ctaText ?? "")}</mj-button>`
+    );
+  }
+  const gradient = heroGradient(block) ? ` css-class="hero-gradient-${block.id}"` : "";
+  return `<mj-section full-width="full-width" background-color="${bg}" padding="${px(block.padding, 48, 200)}px 25px"${gradient}><mj-column>${parts.join("")}</mj-column></mj-section>`;
+}
+function renderBlock(block, ctx) {
+  if (block.type === "hero") return renderHero(block);
+  if (block.type === "columns") {
+    const bg = block.backgroundColor ? ` background-color="${safeColor(block.backgroundColor, "transparent")}"` : "";
+    const columns = block.columns.map((column) => {
+      const width = column.width ? ` width="${px(column.width, 50, 100)}%"` : "";
+      const colBg = column.backgroundColor ? ` background-color="${safeColor(column.backgroundColor, "transparent")}"` : "";
+      const share = px(column.width ?? 100 / block.columns.length, 50, 100);
+      const available = Math.round(ctx.design.contentWidth * share / 100) - 24;
+      const inner = column.blocks.map((b) => renderContent(b, ctx, "8px 12px", available)).join("");
+      return `<mj-column${width}${colBg}>${inner || "<mj-text> </mj-text>"}</mj-column>`;
+    }).join("");
+    return `<mj-section${bg}>${columns}</mj-section>`;
+  }
+  const content = renderContent(
+    block,
+    ctx,
+    "10px 25px",
+    ctx.design.contentWidth - 50
+  );
+  return content ? `<mj-section><mj-column>${content}</mj-column></mj-section>` : "";
+}
+function normalizeDesignSettings(design) {
+  const defaults = createDefaultDesignSettings();
+  const d = resolveDesignSettings(design);
+  const color = (key) => safeColor(d[key], defaults[key]);
+  return {
+    bodyBackgroundColor: color("bodyBackgroundColor"),
+    contentBackgroundColor: color("contentBackgroundColor"),
+    textColor: color("textColor"),
+    headingColor: color("headingColor"),
+    linkColor: color("linkColor"),
+    buttonBackgroundColor: color("buttonBackgroundColor"),
+    buttonTextColor: color("buttonTextColor"),
+    buttonBorderRadius: px(d.buttonBorderRadius, 6, 100),
+    // The design UI's 320px floor also applies to documents set programmatically.
+    contentWidth: Math.max(320, px(d.contentWidth, 600, 1200)),
+    fontFamily: typeof d.fontFamily === "string" && /^[\w\s,'-]+$/.test(d.fontFamily) ? d.fontFamily : defaults.fontFamily
+  };
+}
+function renderEmailMjml(tree, options = {}) {
+  const design = normalizeDesignSettings(options.design);
+  const ctx = {
+    design,
+    sanitize: options.sanitizeHtml ?? defaultSanitize,
+    unsubscribeUrl: options.unsubscribeUrl ?? "{{unsubscribe_url}}"
+  };
+  const gradients = tree.blocks.filter((b) => b.type === "hero").map((b) => {
+    const gradient = heroGradient(b);
+    return gradient ? `.hero-gradient-${b.id} { background: ${gradient} !important; }` : "";
+  }).filter(Boolean).join("\n");
+  return `<mjml>
+  <mj-head>
+    <mj-attributes>
+      <mj-all font-family="${escapeHtml(design.fontFamily)}" color="${design.textColor}" />
+      <mj-text font-size="16px" line-height="1.6" />
+      <mj-section background-color="${design.contentBackgroundColor}" />
+    </mj-attributes>
+    <mj-style>
+      a { color: ${design.linkColor}; }
+      h1, h2, h3, h4 { color: inherit; margin: 0; }
+      ${gradients}
+    </mj-style>
+    <mj-style inline="inline">
+      .email-table table { border-collapse: collapse; }
+    </mj-style>
+  </mj-head>
+  <mj-body background-color="${design.bodyBackgroundColor}" width="${design.contentWidth}px">
+    ${tree.blocks.map((block) => renderBlock(block, ctx)).join("\n    ")}
+  </mj-body>
+</mjml>`;
+}
+var SOCIAL_ICONS = {
+  facebook: Facebook,
+  twitter: Twitter,
+  linkedin: Linkedin,
+  instagram: Instagram,
+  youtube: Youtube,
+  github: Github,
+  website: Globe
+};
+var HEADING_SIZES2 = { 1: 32, 2: 26, 3: 22, 4: 18 };
+function SafeHtml({
+  html,
+  style
+}) {
+  const [clean, setClean] = React3.useState("");
+  React3.useEffect(() => setClean(sanitizeEmailHtml(html) ?? ""), [html]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style,
+      className: "[&_a]:underline [&_ol]:list-decimal [&_ol]:ps-6 [&_p]:my-3 [&_ul]:list-disc [&_ul]:ps-6",
+      dangerouslySetInnerHTML: { __html: clean }
+    }
+  );
+}
+function EmailBlockPreview({
+  block,
+  design,
+  renderChild,
+  emptyColumnLabel,
+  unsupportedBlockLabel,
+  platformLabels
+}) {
+  const pad = "10px 25px";
+  switch (block.type) {
+    case "heading": {
+      const Tag = `h${block.level}`;
+      return /* @__PURE__ */ jsx(
+        Tag,
+        {
+          style: {
+            margin: 0,
+            padding: pad,
+            fontSize: HEADING_SIZES2[block.level],
+            fontWeight: 700,
+            lineHeight: 1.25,
+            textAlign: block.alignment ?? "left",
+            color: safeColor(block.color, design.headingColor)
+          },
+          children: block.text
+        }
+      );
+    }
+    case "text":
+      return /* @__PURE__ */ jsx(
+        SafeHtml,
+        {
+          html: block.content,
+          style: {
+            padding: pad,
+            textAlign: block.alignment ?? "left",
+            color: safeColor(block.color, design.textColor)
+          }
+        }
+      );
+    case "button":
+      return /* @__PURE__ */ jsx("div", { style: { padding: pad, textAlign: block.alignment ?? "center" }, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: block.fullWidth ? "block" : "inline-block",
+            padding: "10px 25px",
+            background: safeColor(
+              block.backgroundColor,
+              design.buttonBackgroundColor
+            ),
+            color: safeColor(block.textColor, design.buttonTextColor),
+            borderRadius: block.borderRadius ?? design.buttonBorderRadius,
+            fontWeight: 600
+          },
+          children: block.text
+        }
+      ) });
+    case "image":
+      return /* @__PURE__ */ jsx("div", { style: { padding: pad, textAlign: block.alignment ?? "center" }, children: block.src ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: block.src,
+          alt: block.alt,
+          style: {
+            display: "inline-block",
+            maxWidth: "100%",
+            // Zero/invalid widths fall back to full width, matching the
+            // omitted width in renderEmailMjml.
+            width: parseFloat(String(block.width ?? "")) > 0 ? block.width : "100%",
+            borderRadius: block.borderRadius
+          }
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "border-border text-muted-foreground flex h-32 items-center justify-center rounded-md border-2 border-dashed", children: /* @__PURE__ */ jsx(Image, { className: "h-8 w-8", "aria-hidden": "true" }) }) });
+    case "divider":
+      return /* @__PURE__ */ jsx("div", { style: { padding: pad }, children: /* @__PURE__ */ jsx(
+        "hr",
+        {
+          style: {
+            margin: "0 auto",
+            border: 0,
+            borderTop: `1px ${block.style ?? "solid"} ${safeColor(block.color, "#e5e7eb")}`,
+            width: block.width ?? "100%"
+          }
+        }
+      ) });
+    case "spacer":
+      return /* @__PURE__ */ jsx("div", { style: { height: block.height } });
+    case "social": {
+      const size = { sm: 20, md: 25, lg: 35 }[block.iconSize ?? "md"];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: pad,
+            display: "flex",
+            gap: 8,
+            justifyContent: block.alignment === "left" ? "flex-start" : block.alignment === "right" ? "flex-end" : "center"
+          },
+          children: block.links.map((link, i) => {
+            const Icon = SOCIAL_ICONS[link.platform] ?? Globe;
+            return /* @__PURE__ */ jsx(
+              Icon,
+              {
+                width: size,
+                height: size,
+                role: "img",
+                "aria-label": platformLabels[link.platform] ?? link.platform
+              },
+              i
+            );
+          })
+        }
+      );
+    }
+    case "html":
+      return /* @__PURE__ */ jsx(SafeHtml, { html: block.html, style: { padding: pad } });
+    case "footer": {
+      const color = safeColor(block.color, "#6b7280");
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: pad,
+            fontSize: 12,
+            color,
+            textAlign: block.alignment ?? "center"
+          },
+          children: [
+            [block.companyName, block.address, block.phone].filter(Boolean).map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)),
+            /* @__PURE__ */ jsxs("div", { children: [
+              block.showUnsubscribe && /* @__PURE__ */ jsx("span", { style: { textDecoration: "underline" }, children: block.unsubscribeText || "Unsubscribe" }),
+              block.managePreferencesUrl && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: { textDecoration: "underline", marginInlineStart: 12 },
+                  children: block.managePreferencesText || "Manage preferences"
+                }
+              )
+            ] })
+          ]
+        }
+      );
+    }
+    case "quote":
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            margin: pad,
+            padding: "8px 16px",
+            background: safeColor(block.backgroundColor, "#f8fafc"),
+            color: safeColor(block.textColor, "#1e293b"),
+            borderInlineStart: `4px solid ${safeColor(block.accentColor, design.linkColor)}`,
+            textAlign: block.alignment ?? "left"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 18, fontStyle: "italic" }, children: [
+              "\u201C",
+              block.text,
+              "\u201D"
+            ] }),
+            block.author && /* @__PURE__ */ jsx("p", { style: { margin: "12px 0 0", fontWeight: 600 }, children: block.author }),
+            block.author && block.role && /* @__PURE__ */ jsx("p", { style: { margin: "2px 0 0", fontSize: 13, opacity: 0.75 }, children: block.role })
+          ]
+        }
+      );
+    case "table": {
+      const border = `1px solid ${safeColor(block.borderColor, "#e5e7eb")}`;
+      return /* @__PURE__ */ jsx("div", { style: { padding: pad }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsx("tbody", { children: block.rows.map((row, r) => {
+        const head = block.headerRow && r === 0;
+        return /* @__PURE__ */ jsx("tr", { children: row.map((cell, c) => {
+          const Cell = head ? "th" : "td";
+          return /* @__PURE__ */ jsx(
+            Cell,
+            {
+              style: {
+                border,
+                padding: "10px 12px",
+                textAlign: block.alignment ?? "left",
+                ...head && {
+                  background: safeColor(
+                    block.headerBackgroundColor,
+                    "#f3f4f6"
+                  ),
+                  color: safeColor(
+                    block.headerTextColor,
+                    design.headingColor
+                  )
+                }
+              },
+              children: cell
+            },
+            c
+          );
+        }) }, r);
+      }) }) }) });
+    }
+    case "hero": {
+      const color = safeColor(block.textColor, "#ffffff");
+      const bg = safeColor(block.backgroundColor, "#1e3a5f");
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: `${block.padding ?? 48}px 25px`,
+            background: safeGradient(block.backgroundGradient) ?? bg,
+            color,
+            textAlign: block.alignment ?? "center"
+          },
+          children: [
+            block.categoryText && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: 12,
+                  fontWeight: 700,
+                  letterSpacing: 2,
+                  textTransform: "uppercase",
+                  marginBottom: 8
+                },
+                children: block.categoryText
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "h1",
+              {
+                style: { margin: "0 0 8px", fontSize: 32, lineHeight: 1.2, color },
+                children: block.headline
+              }
+            ),
+            block.subtitle && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px" }, children: block.subtitle }),
+            hasHeroCta(block) && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  padding: "10px 25px",
+                  borderRadius: 6,
+                  fontWeight: 600,
+                  background: safeColor(block.ctaColor, "#ffffff"),
+                  color: bg
+                },
+                children: block.ctaText
+              }
+            )
+          ]
+        }
+      );
+    }
+    case "columns":
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            background: block.backgroundColor ? safeColor(block.backgroundColor, "transparent") : void 0
+          },
+          children: block.columns.map((column) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: `1 1 ${column.width ?? 100 / block.columns.length}%`,
+                minWidth: 160,
+                padding: 4,
+                background: column.backgroundColor ? safeColor(column.backgroundColor, "transparent") : void 0
+              },
+              children: column.blocks.length ? column.blocks.map((child) => /* @__PURE__ */ jsx(React3.Fragment, { children: renderChild(child) }, child.id)) : /* @__PURE__ */ jsx("div", { className: "border-border text-muted-foreground rounded-md border border-dashed p-4 text-center text-xs", children: emptyColumnLabel })
+            },
+            column.id
+          ))
+        }
+      );
+    // Host-owned block types (e.g. Waggleline-only blocks) are kept in the
+    // document but rendered as a visible placeholder; `renderEmailMjml` omits them.
+    default:
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "note",
+          className: "border-border text-muted-foreground m-2 rounded-md border border-dashed p-4 text-center text-xs",
+          children: unsupportedBlockLabel.replace(
+            "{type}",
+            block.type
+          )
+        }
+      );
+  }
+}
+function Button2(props) {
+  return /* @__PURE__ */ jsx(Button, { type: "button", ...props });
+}
+function TextField({
+  multiline,
+  ...props
+}) {
+  const Control = multiline ? Textarea : Input;
+  return /* @__PURE__ */ jsx(
+    Control,
+    {
+      label: props.label,
+      value: props.value ?? "",
+      placeholder: props.placeholder,
+      onChange: (e) => props.onChange(e.target.value)
+    }
+  );
+}
+function NumberField({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "number",
+      label,
+      min,
+      max,
+      value: value ?? "",
+      onChange: (e) => {
+        const n = Number(e.target.value);
+        if (e.target.value !== "" && Number.isFinite(n)) onChange(n);
+      }
+    }
+  );
+}
+var HEX6 = /^#[0-9a-f]{6}$/i;
+function ColorField({
+  label,
+  value,
+  onChange,
+  fallback = "#000000"
+}) {
+  const swatch = value && HEX6.test(value) ? value : fallback;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        value: value ?? "",
+        placeholder: fallback,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        "aria-label": label,
+        value: HEX6.test(swatch) ? swatch : "#000000",
+        onChange: (e) => onChange(e.target.value),
+        className: "border-border bg-background h-10 w-10 shrink-0 cursor-pointer rounded-md border p-1"
+      }
+    )
+  ] });
+}
+function SelectField({
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label,
+      value,
+      options,
+      onValueChange: (v) => onChange(v)
+    }
+  );
+}
+function SwitchField({ label, value, onChange }) {
+  return /* @__PURE__ */ jsx(Switch, { label, checked: Boolean(value), onCheckedChange: onChange });
+}
+var SOCIAL_PLATFORMS = [
+  "facebook",
+  "twitter",
+  "linkedin",
+  "instagram",
+  "youtube",
+  "github",
+  "website"
+];
+var CONTENT_BLOCK_TYPES = [
+  "heading",
+  "text",
+  "button",
+  "image",
+  "divider",
+  "spacer",
+  "social",
+  "quote",
+  "table",
+  "html",
+  "footer"
+];
+function resizeColumns(columns, count) {
+  const width = Math.floor(100 / count);
+  const next = Array.from({ length: count }, (_, i) => ({
+    ...columns[i] ?? { id: generateEmailBlockId(), blocks: [] },
+    // The last column absorbs the rounding remainder so widths sum to 100.
+    width: i === count - 1 ? 100 - width * (count - 1) : width
+  }));
+  const dropped = columns.slice(count).flatMap((c) => c.blocks);
+  next[count - 1] = {
+    ...next[count - 1],
+    blocks: [...next[count - 1].blocks, ...dropped]
+  };
+  return next;
+}
+function EmailBlockSettings({
+  block,
+  design,
+  onChange,
+  onAddToColumn,
+  labels,
+  variableGroups,
+  onUploadImage
+}) {
+  const f = labels.fields;
+  const o = labels.options;
+  const set = onChange;
+  const alignOptions = [
+    { value: "left", label: o.left },
+    { value: "center", label: o.center },
+    { value: "right", label: o.right }
+  ];
+  const alignment = (value, fallback) => /* @__PURE__ */ jsx(
+    SelectField,
+    {
+      label: f.alignment,
+      value: value ?? fallback,
+      options: alignOptions,
+      onChange: (v) => onChange({ alignment: v })
+    }
+  );
+  const uploadRef = React3.useRef(null);
+  const [uploading, setUploading] = React3.useState(false);
+  const [uploadFailed, setUploadFailed] = React3.useState(false);
+  const emitted = React3.useRef(null);
+  switch (block.type) {
+    case "heading":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.text,
+            value: block.text,
+            onChange: (text) => set({ text })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: f.level,
+            value: String(block.level),
+            options: ["1", "2", "3", "4"].map((v) => ({
+              value: v,
+              label: `H${v}`
+            })),
+            onChange: (v) => set({ level: Number(v) })
+          }
+        ),
+        alignment(block.alignment, "left"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.color,
+            value: block.color,
+            fallback: design.headingColor,
+            onChange: (color) => set({ color })
+          }
+        )
+      ] });
+    case "text":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          RichTextEditor,
+          {
+            "aria-label": f.content,
+            value: block.content === emitted.current ? block.content : sanitizeEmailHtml(block.content) ?? "",
+            onChange: (content) => {
+              emitted.current = content;
+              set({ content });
+            },
+            sanitizeHtml: (html) => sanitizeEmailHtml(html) ?? "",
+            variableGroups,
+            enableDictation: false
+          }
+        ),
+        alignment(block.alignment, "left"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.color,
+            value: block.color,
+            fallback: design.textColor,
+            onChange: (color) => set({ color })
+          }
+        )
+      ] });
+    case "button":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.text,
+            value: block.text,
+            onChange: (text) => set({ text })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.url,
+            value: block.url,
+            onChange: (url) => set({ url })
+          }
+        ),
+        alignment(block.alignment, "center"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.backgroundColor,
+            value: block.backgroundColor,
+            fallback: design.buttonBackgroundColor,
+            onChange: (backgroundColor) => set({ backgroundColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.textColor,
+            value: block.textColor,
+            fallback: design.buttonTextColor,
+            onChange: (textColor) => set({ textColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: f.borderRadius,
+            value: block.borderRadius ?? design.buttonBorderRadius,
+            max: 100,
+            onChange: (borderRadius) => set({ borderRadius })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SwitchField,
+          {
+            label: f.fullWidth,
+            value: block.fullWidth,
+            onChange: (fullWidth) => set({ fullWidth })
+          }
+        )
+      ] });
+    case "image":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.imageUrl,
+            value: block.src,
+            onChange: (src) => set({ src })
+          }
+        ),
+        onUploadImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: uploadRef,
+              type: "file",
+              accept: "image/*",
+              className: "sr-only",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              onChange: async (e) => {
+                const file = e.target.files?.[0];
+                e.target.value = "";
+                if (!file) return;
+                setUploading(true);
+                setUploadFailed(false);
+                try {
+                  set({ src: await onUploadImage(file) });
+                } catch {
+                  setUploadFailed(true);
+                } finally {
+                  setUploading(false);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              variant: "outline",
+              size: "sm",
+              isLoading: uploading,
+              leftIcon: /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4", "aria-hidden": "true" }),
+              onClick: () => uploadRef.current?.click(),
+              children: f.uploadImage
+            }
+          ),
+          uploadFailed && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", children: f.uploadFailed })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.altText,
+            value: block.alt,
+            onChange: (alt) => set({ alt })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.url,
+            value: block.href,
+            onChange: (href) => set({ href })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.width,
+            value: block.width === void 0 ? "" : String(block.width),
+            placeholder: "100%",
+            onChange: (width) => set({ width: /^\d+$/.test(width) ? Number(width) : width })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: f.borderRadius,
+            value: block.borderRadius,
+            max: 100,
+            onChange: (borderRadius) => set({ borderRadius })
+          }
+        ),
+        alignment(block.alignment, "center")
+      ] });
+    case "divider":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: f.style,
+            value: block.style ?? "solid",
+            options: ["solid", "dashed", "dotted"].map((v) => ({
+              value: v,
+              label: o[v]
+            })),
+            onChange: (style) => set({ style })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.color,
+            value: block.color,
+            onChange: (color) => set({ color })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.width,
+            value: block.width,
+            placeholder: "100%",
+            onChange: (width) => set({ width })
+          }
+        )
+      ] });
+    case "spacer":
+      return /* @__PURE__ */ jsx(
+        NumberField,
+        {
+          label: f.height,
+          value: block.height,
+          max: 400,
+          onChange: (height) => set({ height })
+        }
+      );
+    case "social":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        alignment(block.alignment, "center"),
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: f.iconSize,
+            value: block.iconSize ?? "md",
+            options: ["sm", "md", "lg"].map((v) => ({
+              value: v,
+              label: o[v]
+            })),
+            onChange: (iconSize) => set({ iconSize })
+          }
+        ),
+        block.links.map((link, i) => {
+          const update = (patch) => set({
+            links: block.links.map(
+              (l, j) => j === i ? { ...l, ...patch } : l
+            )
+          });
+          return /* @__PURE__ */ jsxs(
+            "fieldset",
+            {
+              className: "border-border space-y-2 rounded-md border p-3",
+              children: [
+                /* @__PURE__ */ jsx("legend", { className: "sr-only", children: f.socialLink.replace("{number}", String(i + 1)) }),
+                /* @__PURE__ */ jsx(
+                  SelectField,
+                  {
+                    label: f.platform,
+                    value: link.platform,
+                    options: SOCIAL_PLATFORMS.map((p) => ({
+                      value: p,
+                      label: labels.platforms[p]
+                    })),
+                    onChange: (platform) => update({ platform })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: f.url,
+                    value: link.url,
+                    onChange: (url) => update({ url })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button2,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    leftIcon: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" }),
+                    onClick: () => set({ links: block.links.filter((_, j) => j !== i) }),
+                    children: f.removeLink
+                  }
+                )
+              ]
+            },
+            i
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "outline",
+            size: "sm",
+            leftIcon: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" }),
+            onClick: () => set({
+              links: [
+                ...block.links,
+                { platform: "website", url: "https://" }
+              ]
+            }),
+            children: f.addLink
+          }
+        )
+      ] });
+    case "html":
+      return /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          label: f.html,
+          value: block.html,
+          rows: 10,
+          className: "font-mono text-xs",
+          onChange: (e) => set({ html: e.target.value })
+        }
+      );
+    case "footer":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.companyName,
+            value: block.companyName,
+            onChange: (companyName) => set({ companyName })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.address,
+            value: block.address,
+            onChange: (address) => set({ address })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.phone,
+            value: block.phone,
+            onChange: (phone) => set({ phone })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SwitchField,
+          {
+            label: f.showUnsubscribe,
+            value: block.showUnsubscribe,
+            onChange: (showUnsubscribe) => set({ showUnsubscribe })
+          }
+        ),
+        block.showUnsubscribe && /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.unsubscribeText,
+            value: block.unsubscribeText,
+            onChange: (unsubscribeText) => set({ unsubscribeText })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.managePreferencesUrl,
+            value: block.managePreferencesUrl,
+            onChange: (managePreferencesUrl) => set({ managePreferencesUrl })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.managePreferencesText,
+            value: block.managePreferencesText,
+            onChange: (managePreferencesText) => set({ managePreferencesText })
+          }
+        ),
+        alignment(block.alignment, "center"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.color,
+            value: block.color,
+            onChange: (color) => set({ color })
+          }
+        )
+      ] });
+    case "quote":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            multiline: true,
+            label: f.text,
+            value: block.text,
+            onChange: (text) => set({ text })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.author,
+            value: block.author,
+            onChange: (author) => set({ author })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.role,
+            value: block.role,
+            onChange: (role) => set({ role })
+          }
+        ),
+        alignment(block.alignment, "left"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.backgroundColor,
+            value: block.backgroundColor,
+            onChange: (backgroundColor) => set({ backgroundColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.textColor,
+            value: block.textColor,
+            onChange: (textColor) => set({ textColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.accentColor,
+            value: block.accentColor,
+            fallback: design.linkColor,
+            onChange: (accentColor) => set({ accentColor })
+          }
+        )
+      ] });
+    case "table": {
+      const cols = Math.max(1, ...block.rows.map((r) => r.length));
+      const setCell = (r, c, value) => set({
+        rows: block.rows.map(
+          (row, i) => i === r ? row.map((cell, j) => j === c ? value : cell) : row
+        )
+      });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SwitchField,
+          {
+            label: f.headerRow,
+            value: block.headerRow,
+            onChange: (headerRow) => set({ headerRow })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid gap-1",
+            style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+            children: block.rows.map(
+              (row, r) => row.map((cell, c) => /* @__PURE__ */ jsx(
+                "input",
+                {
+                  "aria-label": f.cell.replace("{row}", String(r + 1)).replace("{column}", String(c + 1)),
+                  value: cell,
+                  onChange: (e) => setCell(r, c, e.target.value),
+                  className: "border-input bg-background text-foreground focus-visible:ring-ring h-8 min-w-0 rounded-md border px-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+                },
+                `${r}-${c}`
+              ))
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => set({ rows: [...block.rows, Array(cols).fill("")] }),
+              children: f.addRow
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => set({ rows: block.rows.map((r) => [...r, ""]) }),
+              children: f.addColumn
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              variant: "ghost",
+              size: "sm",
+              disabled: block.rows.length <= 1,
+              onClick: () => set({ rows: block.rows.slice(0, -1) }),
+              children: f.removeRow
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button2,
+            {
+              variant: "ghost",
+              size: "sm",
+              disabled: cols <= 1,
+              onClick: () => set({ rows: block.rows.map((r) => r.slice(0, -1)) }),
+              children: f.removeColumn
+            }
+          )
+        ] }),
+        alignment(block.alignment, "left"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.borderColor,
+            value: block.borderColor,
+            onChange: (borderColor) => set({ borderColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.headerBackgroundColor,
+            value: block.headerBackgroundColor,
+            onChange: (headerBackgroundColor) => set({ headerBackgroundColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.headerTextColor,
+            value: block.headerTextColor,
+            onChange: (headerTextColor) => set({ headerTextColor })
+          }
+        )
+      ] });
+    }
+    case "hero":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.categoryText,
+            value: block.categoryText,
+            onChange: (categoryText) => set({ categoryText })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.headline,
+            value: block.headline,
+            onChange: (headline) => set({ headline })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            multiline: true,
+            label: f.subtitle,
+            value: block.subtitle,
+            onChange: (subtitle) => set({ subtitle })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.ctaText,
+            value: block.ctaText,
+            onChange: (ctaText) => set({ ctaText })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.ctaUrl,
+            value: block.ctaUrl,
+            onChange: (ctaUrl) => set({ ctaUrl })
+          }
+        ),
+        alignment(block.alignment, "center"),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.backgroundColor,
+            value: block.backgroundColor,
+            onChange: (backgroundColor) => set({ backgroundColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: f.backgroundGradient,
+            value: block.backgroundGradient,
+            placeholder: "linear-gradient(135deg, #1e3a5f, #2563eb)",
+            onChange: (backgroundGradient) => set({ backgroundGradient })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.textColor,
+            value: block.textColor,
+            onChange: (textColor) => set({ textColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.ctaColor,
+            value: block.ctaColor,
+            onChange: (ctaColor) => set({ ctaColor })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberField,
+          {
+            label: f.padding,
+            value: block.padding,
+            max: 200,
+            onChange: (padding) => set({ padding })
+          }
+        )
+      ] });
+    case "columns":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: f.columnCount,
+            value: String(block.columnCount),
+            options: ["1", "2", "3"].map((v) => ({
+              value: v,
+              label: v
+            })),
+            onChange: (v) => {
+              const columnCount = Number(v);
+              set({
+                columnCount,
+                columns: resizeColumns(block.columns, columnCount)
+              });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorField,
+          {
+            label: f.backgroundColor,
+            value: block.backgroundColor,
+            onChange: (backgroundColor) => set({ backgroundColor })
+          }
+        ),
+        block.columns.map((column, i) => /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: `${labels.addBlock} \u2014 ${labels.column} ${i + 1}`,
+            placeholder: labels.addBlock,
+            value: "",
+            options: CONTENT_BLOCK_TYPES.map((type) => ({
+              value: type,
+              label: labels.blockTypes[type]
+            })),
+            onValueChange: (type) => onAddToColumn(
+              i,
+              createEmailBlock(
+                type
+              )
+            )
+          },
+          column.id
+        ))
+      ] });
+  }
+}
+var FONT_OPTIONS = [
+  "Arial, Helvetica, sans-serif",
+  "Helvetica, Arial, sans-serif",
+  "Verdana, Geneva, sans-serif",
+  "Tahoma, Geneva, sans-serif",
+  "'Trebuchet MS', Helvetica, sans-serif",
+  "Georgia, serif",
+  "'Times New Roman', Times, serif",
+  "'Courier New', Courier, monospace"
+];
+function EmailDesignPanel({
+  design,
+  onChange,
+  labels
+}) {
+  const f = labels.fields;
+  const fonts = FONT_OPTIONS.includes(design.fontFamily) ? FONT_OPTIONS : [design.fontFamily, ...FONT_OPTIONS];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectField,
+      {
+        label: f.fontFamily,
+        value: design.fontFamily,
+        options: fonts.map((font) => ({
+          value: font,
+          label: font.split(",")[0].replace(/'/g, "")
+        })),
+        onChange: (fontFamily) => onChange({ fontFamily })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberField,
+      {
+        label: f.contentWidth,
+        value: design.contentWidth,
+        min: 320,
+        max: 1200,
+        onChange: (contentWidth) => onChange({ contentWidth })
+      }
+    ),
+    [
+      "bodyBackgroundColor",
+      "contentBackgroundColor",
+      "textColor",
+      "headingColor",
+      "linkColor",
+      "buttonBackgroundColor",
+      "buttonTextColor"
+    ].map((key) => /* @__PURE__ */ jsx(
+      ColorField,
+      {
+        label: f[key],
+        value: design[key],
+        onChange: (v) => onChange({ [key]: v })
+      },
+      key
+    )),
+    /* @__PURE__ */ jsx(
+      NumberField,
+      {
+        label: f.buttonBorderRadius,
+        value: design.buttonBorderRadius,
+        max: 100,
+        onChange: (buttonBorderRadius) => onChange({ buttonBorderRadius })
+      }
+    )
+  ] });
+}
+
+// src/components/EmailEditor/labels.ts
+var defaultEmailEditorLabels = {
+  blocks: "Blocks",
+  design: "Design",
+  blockSettings: "Block settings",
+  undo: "Undo",
+  redo: "Redo",
+  viewport: "Preview width",
+  desktop: "Desktop",
+  mobile: "Mobile",
+  canvas: "Email canvas",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  duplicate: "Duplicate",
+  remove: "Delete",
+  dragHandle: "Drag to reorder",
+  addBlock: "Add block",
+  emptyCanvas: "Drag a block here, or click one in the palette.",
+  emptyColumn: "Empty column",
+  unsupportedBlock: "Unsupported block ({type}). It will not be included in the sent email.",
+  noSelection: "Select a block in the canvas to edit it.",
+  column: "Column",
+  selectBlock: "Select {item}",
+  announceAdded: "{item} added.",
+  announceMoved: "{item} moved to position {position}.",
+  announceDuplicated: "{item} duplicated.",
+  announceRemoved: "{item} deleted.",
+  blockTypes: {
+    heading: "Heading",
+    text: "Text",
+    button: "Button",
+    image: "Image",
+    divider: "Divider",
+    spacer: "Spacer",
+    columns: "Columns",
+    social: "Social links",
+    hero: "Hero banner",
+    html: "Custom HTML",
+    footer: "Footer",
+    quote: "Quote",
+    table: "Table"
+  },
+  platforms: {
+    facebook: "Facebook",
+    twitter: "Twitter",
+    linkedin: "LinkedIn",
+    instagram: "Instagram",
+    youtube: "YouTube",
+    github: "GitHub",
+    website: "Website"
+  },
+  fields: {
+    text: "Text",
+    content: "Content",
+    level: "Level",
+    alignment: "Alignment",
+    color: "Color",
+    textColor: "Text color",
+    backgroundColor: "Background color",
+    backgroundGradient: "Background gradient (CSS)",
+    accentColor: "Accent color",
+    url: "Link URL",
+    borderRadius: "Corner radius (px)",
+    fullWidth: "Full width",
+    imageUrl: "Image URL",
+    uploadImage: "Upload image",
+    uploadFailed: "The image could not be uploaded. Try again.",
+    altText: "Alt text",
+    width: "Width (px or %)",
+    style: "Style",
+    height: "Height (px)",
+    iconSize: "Icon size",
+    platform: "Platform",
+    socialLink: "Link {number}",
+    addLink: "Add link",
+    removeLink: "Remove link",
+    html: "HTML",
+    companyName: "Company name",
+    address: "Address",
+    phone: "Phone",
+    showUnsubscribe: "Show unsubscribe link",
+    unsubscribeText: "Unsubscribe text",
+    managePreferencesUrl: "Preferences URL",
+    managePreferencesText: "Preferences text",
+    author: "Author",
+    role: "Role",
+    headerRow: "First row is a header",
+    headerBackgroundColor: "Header background",
+    headerTextColor: "Header text color",
+    borderColor: "Border color",
+    addRow: "Add row",
+    addColumn: "Add column",
+    removeRow: "Remove last row",
+    removeColumn: "Remove last column",
+    cell: "Row {row}, column {column}",
+    categoryText: "Eyebrow",
+    headline: "Headline",
+    subtitle: "Subtitle",
+    ctaText: "Button text",
+    ctaUrl: "Button URL",
+    ctaColor: "Button color",
+    padding: "Vertical padding (px)",
+    columnCount: "Columns",
+    bodyBackgroundColor: "Page background",
+    contentBackgroundColor: "Content background",
+    contentWidth: "Content width (px)",
+    fontFamily: "Font",
+    headingColor: "Heading color",
+    linkColor: "Link color",
+    buttonBackgroundColor: "Button color",
+    buttonTextColor: "Button text color",
+    buttonBorderRadius: "Button corner radius (px)"
+  },
+  options: {
+    left: "Left",
+    center: "Center",
+    right: "Right",
+    solid: "Solid",
+    dashed: "Dashed",
+    dotted: "Dotted",
+    sm: "Small",
+    md: "Medium",
+    lg: "Large"
+  }
+};
+function mergeEmailEditorLabels(overrides) {
+  if (!overrides) return defaultEmailEditorLabels;
+  const d = defaultEmailEditorLabels;
+  return {
+    ...d,
+    ...overrides,
+    blockTypes: { ...d.blockTypes, ...overrides.blockTypes },
+    platforms: { ...d.platforms, ...overrides.platforms },
+    fields: { ...d.fields, ...overrides.fields },
+    options: { ...d.options, ...overrides.options }
+  };
+}
+
+// src/components/EmailEditor/tree.ts
+function editContaining(blocks, id, edit) {
+  const index = blocks.findIndex((b) => b.id === id);
+  if (index !== -1) return edit(blocks, index);
+  let changed = false;
+  const next = blocks.map((block) => {
+    if (block.type !== "columns") return block;
+    let hit = false;
+    const columns = block.columns.map((column) => {
+      const inner = editContaining(column.blocks, id, edit);
+      if (inner === column.blocks) return column;
+      hit = changed = true;
+      return { ...column, blocks: inner };
+    });
+    return hit ? { ...block, columns } : block;
+  });
+  return changed ? next : blocks;
+}
+function findEmailBlock(blocks, id) {
+  if (!id) return void 0;
+  for (const block of blocks) {
+    if (block.id === id) return block;
+    if (block.type === "columns") {
+      for (const column of block.columns) {
+        const found = findEmailBlock(column.blocks, id);
+        if (found) return found;
+      }
+    }
+  }
+  return void 0;
+}
+function updateEmailBlock(blocks, id, patch) {
+  return editContaining(
+    blocks,
+    id,
+    (list, i) => list.map((b, j) => j === i ? { ...b, ...patch } : b)
+  );
+}
+function removeEmailBlock(blocks, id) {
+  return editContaining(
+    blocks,
+    id,
+    (list, i) => list.filter((_, j) => j !== i)
+  );
+}
+function moveEmailBlock(blocks, id, delta) {
+  return editContaining(blocks, id, (list, i) => {
+    const target = i + delta;
+    if (target < 0 || target >= list.length) return list;
+    const next = [...list];
+    const [moved] = next.splice(i, 1);
+    next.splice(target, 0, moved);
+    return next;
+  });
+}
+function cloneWithNewIds(block) {
+  const copy = { ...block, id: generateEmailBlockId() };
+  if (copy.type === "columns") {
+    copy.columns = copy.columns.map((column) => ({
+      ...column,
+      id: generateEmailBlockId(),
+      blocks: column.blocks.map(cloneWithNewIds)
+    }));
+  }
+  return copy;
+}
+function duplicateEmailBlock(blocks, id) {
+  let newId = null;
+  const next = editContaining(blocks, id, (list, i) => {
+    const copy = cloneWithNewIds(list[i]);
+    newId = copy.id;
+    return [...list.slice(0, i + 1), copy, ...list.slice(i + 1)];
+  });
+  return { blocks: next, newId };
+}
+function addBlockToColumn(blocks, columnsId, columnIndex, block) {
+  return blocks.map(
+    (b) => b.id === columnsId && b.type === "columns" ? {
+      ...b,
+      columns: b.columns.map(
+        (column, i) => i === columnIndex ? { ...column, blocks: [...column.blocks, block] } : column
+      )
+    } : b
+  );
+}
+var BLOCK_ICONS = {
+  hero: Megaphone,
+  columns: Columns2,
+  heading: Heading,
+  text: Type,
+  button: MousePointerClick,
+  image: Image,
+  divider: Minus,
+  spacer: MoveVertical,
+  social: Share2,
+  quote: Quote,
+  table: Table,
+  html: Code,
+  footer: PanelBottom
+};
+var EMAIL_BLOCK_TYPES = Object.keys(BLOCK_ICONS);
+var PALETTE = "palette:";
+var CANVAS_END = "canvas:end";
+var MOBILE_WIDTH = 375;
+function fill(template, values) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (_, key) => String(values[key] ?? "")
+  );
+}
+function BlockFrame({
+  block,
+  selected,
+  labels,
+  onSelect,
+  onMove,
+  onDuplicate,
+  onRemove,
+  isFirst,
+  isLast,
+  dragHandle,
+  children
+}) {
+  const name = labels.blockTypes[block.type] ?? block.type;
+  const tool = "text-muted-foreground hover:text-foreground h-7 w-7";
+  const own = (action) => (e) => {
+    e.stopPropagation();
+    action();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "email-editor-block",
+      "data-selected": selected || void 0,
+      className: cn(
+        "relative outline-offset-[-2px]",
+        selected ? "outline-primary-500 outline outline-2" : "hover:outline-primary-300 focus-within:outline-primary-300 focus-within:outline-1 focus-within:outline-dashed hover:outline-1 hover:outline-dashed"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "email-editor-block-toolbar",
+            className: cn(
+              "bg-background border-border absolute end-2 -top-3.5 z-10 flex items-center rounded-md border shadow-sm",
+              // Reveal on hover of this frame only, not of a frame nested inside it.
+              !selected && "opacity-0 focus-within:opacity-100 [[data-slot=email-editor-block]:hover:not(:has([data-slot=email-editor-block]:hover))>&]:opacity-100"
+            ),
+            children: [
+              dragHandle,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": selected,
+                  "aria-label": fill(labels.selectBlock, { item: name }),
+                  onClick: own(onSelect),
+                  className: "text-foreground focus-visible:ring-ring rounded px-2 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none",
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: tool,
+                  "aria-label": labels.moveUp,
+                  disabled: isFirst,
+                  onClick: own(() => onMove(-1)),
+                  children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: tool,
+                  "aria-label": labels.moveDown,
+                  disabled: isLast,
+                  onClick: own(() => onMove(1)),
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: tool,
+                  "aria-label": labels.duplicate,
+                  onClick: own(onDuplicate),
+                  children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: cn(tool, "hover:text-destructive"),
+                  "aria-label": labels.remove,
+                  onClick: own(onRemove),
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              if (e.target.closest("a")) e.preventDefault();
+              onSelect();
+            },
+            className: "cursor-pointer [&_a]:pointer-events-none",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function SortableBlock({
+  id,
+  children
+}) {
+  const {
+    setNodeRef,
+    setActivatorNodeRef,
+    listeners,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const handle = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: setActivatorNodeRef,
+      ...listeners,
+      "aria-hidden": "true",
+      className: "text-muted-foreground flex h-7 w-6 cursor-grab touch-none items-center justify-center",
+      children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style: { transform: CSS.Transform.toString(transform), transition },
+      className: cn(isDragging && "relative z-20 opacity-60"),
+      children: children(handle)
+    }
+  );
+}
+function PaletteItem({
+  type,
+  label,
+  onAdd
+}) {
+  const { setNodeRef, listeners } = useDraggable({ id: PALETTE + type });
+  const Icon = BLOCK_ICONS[type];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      onPointerDown: listeners?.onPointerDown,
+      onClick: onAdd,
+      className: "border-border bg-background hover:bg-muted hover:border-primary-300 text-foreground focus-visible:ring-ring flex w-24 shrink-0 flex-col items-center gap-1 rounded-md border p-2 text-xs focus-visible:ring-2 focus-visible:outline-none lg:w-auto",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground h-5 w-5", "aria-hidden": "true" }),
+        label
+      ]
+    }
+  );
+}
+function CanvasEnd({ empty, label }) {
+  const { setNodeRef, isOver } = useDroppable({ id: CANVAS_END });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "text-muted-foreground flex items-center justify-center text-center text-sm",
+        empty ? "border-border m-4 min-h-32 rounded-md border-2 border-dashed p-6" : "min-h-8",
+        isOver && "bg-primary-500/10"
+      ),
+      children: empty && label
+    }
+  );
+}
+var EmailEditor = React3.forwardRef(
+  ({
+    value,
+    onChange,
+    design: designProp,
+    onDesignChange,
+    mergeTags,
+    blockTypes = EMAIL_BLOCK_TYPES,
+    onUploadImage,
+    labels: labelOverrides,
+    className
+  }, ref) => {
+    const labels = React3.useMemo(
+      () => mergeEmailEditorLabels(labelOverrides),
+      [labelOverrides]
+    );
+    const design = React3.useMemo(
+      () => normalizeDesignSettings(designProp),
+      [designProp]
+    );
+    const [selectedId, setSelectedId] = React3.useState(null);
+    const [viewport, setViewport] = React3.useState(
+      "desktop"
+    );
+    const [dragging, setDragging] = React3.useState(null);
+    const [past, setPast] = React3.useState([]);
+    const [future, setFuture] = React3.useState([]);
+    const [announcement, announce] = useLiveAnnouncement();
+    const variableGroups = React3.useMemo(() => {
+      if (!mergeTags?.length) return void 0;
+      const groups = /* @__PURE__ */ new Map();
+      for (const tag of mergeTags) {
+        const group = groups.get(tag.group) ?? {
+          label: tag.group,
+          variables: []
+        };
+        group.variables.push({ label: tag.label, value: tag.token });
+        groups.set(tag.group, group);
+      }
+      return [...groups.values()];
+    }, [mergeTags]);
+    const latest = React3.useRef({ value, designProp, onChange });
+    React3.useEffect(() => {
+      latest.current = { value, designProp, onChange };
+    });
+    const present = (changed) => ({
+      tree: value,
+      design: designProp,
+      changed
+    });
+    const commit = (tree, nextDesign) => {
+      const current = latest.current;
+      const changed = {
+        tree: tree !== current.value,
+        design: Boolean(nextDesign)
+      };
+      if (!changed.tree && !changed.design) return;
+      setPast((p) => [
+        ...p.slice(-49),
+        { tree: current.value, design: current.designProp, changed }
+      ]);
+      setFuture([]);
+      if (changed.tree) current.onChange(tree);
+      if (nextDesign) onDesignChange?.(nextDesign);
+    };
+    const setBlocks = (blocks) => commit({ ...value, blocks });
+    const patchBlock = (id, patch) => {
+      const doc = latest.current.value;
+      if (!findEmailBlock(doc.blocks, id)) return;
+      commit({ ...doc, blocks: updateEmailBlock(doc.blocks, id, patch) });
+    };
+    const restore = (snapshot) => {
+      if (snapshot.changed.tree) onChange(snapshot.tree);
+      if (snapshot.changed.design) onDesignChange?.(snapshot.design ?? {});
+    };
+    const undo = () => {
+      const previous = past[past.length - 1];
+      if (!previous) return;
+      setPast((p) => p.slice(0, -1));
+      setFuture((f) => [present(previous.changed), ...f]);
+      restore(previous);
+    };
+    const redo = () => {
+      const next = future[0];
+      if (!next) return;
+      setFuture((f) => f.slice(1));
+      setPast((p) => [...p, present(next.changed)]);
+      restore(next);
+    };
+    const nameOf = (type) => labels.blockTypes[type] ?? type;
+    const insertBlock = (type, index) => {
+      const block = createEmailBlock(type);
+      const blocks = [...value.blocks];
+      const selectedIndex = blocks.findIndex(
+        (b) => Boolean(findEmailBlock([b], selectedId))
+      );
+      const at = index ?? (selectedIndex === -1 ? blocks.length : selectedIndex + 1);
+      blocks.splice(at, 0, block);
+      setBlocks(blocks);
+      setSelectedId(block.id);
+      announce(fill(labels.announceAdded, { item: nameOf(type) }));
+    };
+    const selected = findEmailBlock(value.blocks, selectedId);
+    const frameProps = (block, siblings, index) => ({
+      block,
+      labels,
+      selected: block.id === selectedId,
+      isFirst: index === 0,
+      isLast: index === siblings.length - 1,
+      onSelect: () => setSelectedId(block.id),
+      onMove: (delta) => {
+        setBlocks(moveEmailBlock(value.blocks, block.id, delta));
+        announce(
+          fill(labels.announceMoved, {
+            item: nameOf(block.type),
+            position: index + 1 + delta
+          })
+        );
+      },
+      onDuplicate: () => {
+        const { blocks, newId } = duplicateEmailBlock(value.blocks, block.id);
+        setBlocks(blocks);
+        setSelectedId(newId);
+        announce(fill(labels.announceDuplicated, { item: nameOf(block.type) }));
+      },
+      onRemove: () => {
+        setBlocks(removeEmailBlock(value.blocks, block.id));
+        if (findEmailBlock([block], selectedId)) setSelectedId(null);
+        announce(fill(labels.announceRemoved, { item: nameOf(block.type) }));
+      }
+    });
+    const renderPreview = (block) => /* @__PURE__ */ jsx(
+      EmailBlockPreview,
+      {
+        block,
+        design,
+        emptyColumnLabel: labels.emptyColumn,
+        unsupportedBlockLabel: labels.unsupportedBlock,
+        platformLabels: labels.platforms,
+        renderChild: (child) => {
+          const column = block.type === "columns" ? block.columns.find(
+            (c) => c.blocks.some((b) => b.id === child.id)
+          ) : void 0;
+          const siblings = column?.blocks ?? [];
+          return /* @__PURE__ */ jsx(
+            BlockFrame,
+            {
+              ...frameProps(child, siblings, siblings.indexOf(child)),
+              children: renderPreview(child)
+            }
+          );
+        }
+      }
+    );
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
+    );
+    const onDragStart = (event) => setDragging(String(event.active.id));
+    const onDragEnd = ({ active, over }) => {
+      setDragging(null);
+      if (!over) return;
+      const activeId = String(active.id);
+      const overId = String(over.id);
+      const overIndex = value.blocks.findIndex((b) => b.id === overId);
+      if (activeId.startsWith(PALETTE)) {
+        insertBlock(
+          activeId.slice(PALETTE.length),
+          overIndex === -1 ? value.blocks.length : overIndex
+        );
+        return;
+      }
+      const from = value.blocks.findIndex((b) => b.id === activeId);
+      const to = overId === CANVAS_END ? value.blocks.length - 1 : overIndex;
+      if (from === -1 || to === -1 || from === to) return;
+      setBlocks(arrayMove(value.blocks, from, to));
+      announce(
+        fill(labels.announceMoved, {
+          item: nameOf(value.blocks[from].type),
+          position: to + 1
+        })
+      );
+    };
+    const onKeyDown = (event) => {
+      const target = event.target;
+      if (target.closest('input, textarea, select, [contenteditable="true"]'))
+        return;
+      if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "z")
+        return;
+      event.preventDefault();
+      if (event.shiftKey) redo();
+      else undo();
+    };
+    const draggingType = dragging?.startsWith(PALETTE) ? dragging.slice(PALETTE.length) : value.blocks.find((b) => b.id === dragging)?.type ?? null;
+    const panel = "border-border bg-background flex min-h-0 flex-col";
+    const panelBody = "flex flex-col gap-3 overflow-y-auto p-4";
+    return /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragStart,
+        onDragEnd,
+        onDragCancel: () => setDragging(null),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref,
+              "data-slot": "email-editor",
+              onKeyDown,
+              className: cn(
+                "border-border bg-muted/30 text-foreground flex min-h-[640px] flex-col overflow-hidden rounded-lg border lg:flex-row",
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "aside",
+                  {
+                    "data-slot": "email-editor-palette",
+                    className: cn(panel, "border-b lg:w-64 lg:border-e lg:border-b-0"),
+                    children: /* @__PURE__ */ jsxs(
+                      Tabs,
+                      {
+                        defaultValue: "blocks",
+                        className: "flex min-h-0 flex-1 flex-col",
+                        children: [
+                          /* @__PURE__ */ jsxs(TabsList, { className: "px-2", children: [
+                            /* @__PURE__ */ jsx(TabsTrigger, { value: "blocks", children: labels.blocks }),
+                            onDesignChange && /* @__PURE__ */ jsx(TabsTrigger, { value: "design", children: labels.design })
+                          ] }),
+                          /* @__PURE__ */ jsx(TabsContent, { value: "blocks", className: "overflow-y-auto p-3", children: /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "flex gap-2 overflow-x-auto pb-1 lg:grid lg:grid-cols-2 lg:overflow-visible lg:pb-0",
+                              "aria-label": labels.addBlock,
+                              role: "group",
+                              children: blockTypes.map((type) => /* @__PURE__ */ jsx(
+                                PaletteItem,
+                                {
+                                  type,
+                                  label: nameOf(type),
+                                  onAdd: () => insertBlock(type)
+                                },
+                                type
+                              ))
+                            }
+                          ) }),
+                          onDesignChange && /* @__PURE__ */ jsx(TabsContent, { value: "design", className: panelBody, children: /* @__PURE__ */ jsx(
+                            EmailDesignPanel,
+                            {
+                              design: resolveDesignSettings(designProp),
+                              labels,
+                              onChange: (patch) => commit(value, { ...designProp, ...patch })
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    "data-slot": "email-editor-canvas",
+                    "aria-label": labels.canvas,
+                    className: "flex min-w-0 flex-1 flex-col",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "border-border bg-background flex items-center gap-1 border-b px-3 py-2", children: [
+                        /* @__PURE__ */ jsx(
+                          Button2,
+                          {
+                            variant: "ghost",
+                            size: "icon",
+                            "aria-label": labels.undo,
+                            title: labels.undo,
+                            disabled: !past.length,
+                            onClick: undo,
+                            children: /* @__PURE__ */ jsx(Undo2, { className: "h-4 w-4", "aria-hidden": "true" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button2,
+                          {
+                            variant: "ghost",
+                            size: "icon",
+                            "aria-label": labels.redo,
+                            title: labels.redo,
+                            disabled: !future.length,
+                            onClick: redo,
+                            children: /* @__PURE__ */ jsx(Redo2, { className: "h-4 w-4", "aria-hidden": "true" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            role: "group",
+                            "aria-label": labels.viewport,
+                            className: "ms-auto flex gap-1",
+                            children: [
+                              ["desktop", Monitor, labels.desktop],
+                              ["mobile", Smartphone, labels.mobile]
+                            ].map(([mode, Icon, label]) => /* @__PURE__ */ jsx(
+                              Button2,
+                              {
+                                variant: viewport === mode ? "secondary" : "ghost",
+                                size: "icon",
+                                "aria-label": label,
+                                title: label,
+                                "aria-pressed": viewport === mode,
+                                onClick: () => setViewport(mode),
+                                children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" })
+                              },
+                              mode
+                            ))
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex-1 overflow-auto px-2 py-8 sm:px-6",
+                          style: { background: design.bodyBackgroundColor },
+                          onClick: (e) => e.target === e.currentTarget && setSelectedId(null),
+                          children: /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              dir: "ltr",
+                              className: "mx-auto shadow-sm transition-[width]",
+                              style: {
+                                width: viewport === "mobile" ? MOBILE_WIDTH : design.contentWidth,
+                                maxWidth: "100%",
+                                background: design.contentBackgroundColor,
+                                color: design.textColor,
+                                fontFamily: design.fontFamily,
+                                fontSize: 16,
+                                lineHeight: 1.6
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  SortableContext,
+                                  {
+                                    items: value.blocks.map((b) => b.id),
+                                    strategy: verticalListSortingStrategy,
+                                    children: value.blocks.map((block, index) => /* @__PURE__ */ jsx(SortableBlock, { id: block.id, children: (handle) => /* @__PURE__ */ jsx(
+                                      BlockFrame,
+                                      {
+                                        ...frameProps(block, value.blocks, index),
+                                        dragHandle: handle,
+                                        children: renderPreview(block)
+                                      }
+                                    ) }, block.id))
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  CanvasEnd,
+                                  {
+                                    empty: !value.blocks.length,
+                                    label: labels.emptyCanvas
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "aside",
+                  {
+                    "data-slot": "email-editor-settings",
+                    "aria-label": labels.blockSettings,
+                    className: cn(panel, "border-t lg:w-80 lg:border-s lg:border-t-0"),
+                    children: [
+                      /* @__PURE__ */ jsx("h2", { className: "border-border border-b px-4 py-3 text-sm font-semibold", children: selected ? nameOf(selected.type) : labels.blockSettings }),
+                      /* @__PURE__ */ jsx("div", { className: panelBody, children: selected ? /* @__PURE__ */ jsx(
+                        EmailBlockSettings,
+                        {
+                          block: selected,
+                          design,
+                          labels,
+                          variableGroups,
+                          onUploadImage,
+                          onChange: (patch) => patchBlock(selected.id, patch),
+                          onAddToColumn: (columnIndex, block) => {
+                            setBlocks(
+                              addBlockToColumn(
+                                value.blocks,
+                                selected.id,
+                                columnIndex,
+                                block
+                              )
+                            );
+                            setSelectedId(block.id);
+                            announce(
+                              fill(labels.announceAdded, { item: nameOf(block.type) })
+                            );
+                          }
+                        },
+                        selected.id
+                      ) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.noSelection }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "sr-only", children: announcement })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: draggingType && dragging?.startsWith(PALETTE) ? /* @__PURE__ */ jsx("div", { className: "bg-background border-primary-500 text-foreground rounded-md border px-3 py-2 text-xs font-medium shadow-lg", children: nameOf(draggingType) }) : null })
+        ]
+      }
+    );
+  }
+);
+EmailEditor.displayName = "EmailEditor";
+
+export { EMAIL_BLOCK_TYPES, EmailEditor, createDefaultDesignSettings, createEmailBlock, createEmailHtmlSanitizer, createEmptyEmailContentTree, defaultEmailEditorLabels, generateEmailBlockId, renderEmailMjml };
+//# sourceMappingURL=chunk-LUPRGPKP.js.map
+//# sourceMappingURL=chunk-LUPRGPKP.js.map