@vitrina/email-builder 0.1.4

package/dist/index.js

@@ -0,0 +1,1475 @@
+'use client';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { Undo2, Redo2, Eye, Monitor, Smartphone, X, ChevronLeft, GripVertical, Copy, Trash2, Heading, Type, MousePointerClick, Image, Minus, MoveVertical, Menu, Share2, Code2, Plus, ChevronUp, ChevronDown, Bold, Italic, Underline, Strikethrough, List, ListOrdered, Link2, Eraser, Upload } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import hljs from 'highlight.js/lib/core';
+import xml from 'highlight.js/lib/languages/xml';
+
+// src/EmailBuilder.tsx
+
+// src/types.ts
+function uid() {
+  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+}
+var EMAIL_FONT_STACKS = [
+  { label: "Sistema", value: '-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' },
+  { label: "Arial", value: "Arial, Helvetica, sans-serif" },
+  { label: "Georgia", value: 'Georgia, "Times New Roman", serif' },
+  { label: "Verdana", value: "Verdana, Geneva, sans-serif" },
+  { label: "Trebuchet", value: '"Trebuchet MS", Tahoma, sans-serif' },
+  { label: "Courier", value: '"Courier New", Courier, monospace' }
+];
+var ROW_LAYOUTS = [
+  { key: "1", weights: [1] },
+  { key: "1-1", weights: [1, 1] },
+  { key: "1-2", weights: [1, 2] },
+  { key: "2-1", weights: [2, 1] },
+  { key: "1-1-1", weights: [1, 1, 1] },
+  { key: "1-2-1", weights: [1, 2, 1] },
+  { key: "2-1-1", weights: [2, 1, 1] },
+  { key: "1-1-2", weights: [1, 1, 2] },
+  { key: "1-1-1-1", weights: [1, 1, 1, 1] }
+];
+function defaultSettings() {
+  return {
+    backgroundColor: "#f4f4f5",
+    contentWidth: 600,
+    fontFamily: EMAIL_FONT_STACKS[0].value,
+    textColor: "#18181b",
+    linkColor: "#2563eb",
+    preheader: ""
+  };
+}
+function makeBlock(type) {
+  const base = { id: uid(), padding: 0 };
+  switch (type) {
+    case "text":
+      return { ...base, type, html: "Escribe tu mensaje aqu\xED\u2026", align: "left", fontSize: 15, color: "#3f3f46", lineHeight: 1.6 };
+    case "heading":
+      return { ...base, type, html: "Un t\xEDtulo que engancha", level: 2, align: "left", color: "#18181b" };
+    case "button":
+      return { ...base, type, label: "Ver m\xE1s", href: "https://", align: "left", background: "#2563eb", color: "#ffffff", radius: 8, fullWidth: false };
+    case "image":
+      return { ...base, type, src: "", alt: "", href: "", linkAction: "url", align: "center", width: 0 };
+    case "divider":
+      return { ...base, type, color: "#e4e4e7", thickness: 1 };
+    case "spacer":
+      return { ...base, type, height: 24 };
+    case "social":
+      return { ...base, type, align: "center", size: 32, spacing: 8, iconStyle: "circle", items: [{ network: "instagram", url: "https://" }, { network: "facebook", url: "https://" }, { network: "whatsapp", url: "https://" }] };
+    case "html":
+      return { ...base, type, html: "" };
+    case "menu":
+      return { ...base, type, layout: "horizontal", align: "center", fontSize: 14, color: "#3f3f46", gap: 20, items: [{ label: "Inicio", url: "https://" }, { label: "Productos", url: "https://" }, { label: "Contacto", url: "https://" }] };
+    default: {
+      const never = type;
+      throw new Error(`unknown block type ${String(never)}`);
+    }
+  }
+}
+function makeColumn(weight = 1, blocks = []) {
+  return { id: uid(), weight, background: "", paddingX: 0, paddingY: 0, blocks };
+}
+function makeRow(weights = [1]) {
+  const ws = weights.length ? weights : [1];
+  return { id: uid(), background: "#ffffff", contentBackground: "", backgroundImage: "", paddingY: 24, gap: 16, columns: ws.map((w) => makeColumn(w)) };
+}
+function defaultDesign() {
+  const row = makeRow([1]);
+  row.paddingY = 32;
+  row.columns[0].blocks = [makeBlock("heading"), makeBlock("text"), makeBlock("button")];
+  return { version: 1, settings: defaultSettings(), rows: [row] };
+}
+function blockCount(design) {
+  return design.rows.reduce((n, r) => n + r.columns.reduce((m, c) => m + c.blocks.length, 0), 0);
+}
+function relayoutRow(row, weights) {
+  const ws = weights.length ? weights : [1];
+  const cols = ws.map((w, i) => row.columns[i] ? { ...row.columns[i], weight: w } : makeColumn(w));
+  if (row.columns.length > ws.length) {
+    const overflow = row.columns.slice(ws.length).flatMap((c) => c.blocks);
+    const last = cols[cols.length - 1];
+    cols[cols.length - 1] = { ...last, blocks: [...last.blocks, ...overflow] };
+  }
+  return { ...row, columns: cols };
+}
+
+// src/compile.ts
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s) {
+  return escapeHtml(s).replace(/"/g, "&quot;");
+}
+function styleToString(style) {
+  return Object.entries(style).map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`).join(";");
+}
+var HEADING_SIZE = { 1: "28px", 2: "22px", 3: "18px" };
+function textStyle(b, s) {
+  return {
+    margin: "0",
+    fontFamily: s.fontFamily,
+    fontSize: `${b.fontSize}px`,
+    lineHeight: String(b.lineHeight),
+    color: b.color,
+    textAlign: b.align
+  };
+}
+function headingStyle(b, s) {
+  return {
+    margin: "0",
+    fontFamily: s.fontFamily,
+    fontSize: HEADING_SIZE[b.level],
+    lineHeight: "1.3",
+    fontWeight: "700",
+    color: b.color,
+    textAlign: b.align
+  };
+}
+var SOCIAL_NETWORKS = {
+  instagram: { label: "Instagram", bg: "#E4405F", mark: "IG" },
+  facebook: { label: "Facebook", bg: "#1877F2", mark: "f" },
+  whatsapp: { label: "WhatsApp", bg: "#25D366", mark: "WA" },
+  x: { label: "X", bg: "#000000", mark: "X" },
+  twitter: { label: "Twitter", bg: "#1DA1F2", mark: "t" },
+  linkedin: { label: "LinkedIn", bg: "#0A66C2", mark: "in" },
+  youtube: { label: "YouTube", bg: "#FF0000", mark: "YT" },
+  tiktok: { label: "TikTok", bg: "#111111", mark: "TT" },
+  pinterest: { label: "Pinterest", bg: "#E60023", mark: "P" },
+  snapchat: { label: "Snapchat", bg: "#FFFC00", mark: "SC" },
+  telegram: { label: "Telegram", bg: "#26A5E4", mark: "TG" },
+  messenger: { label: "Messenger", bg: "#0084FF", mark: "M" },
+  reddit: { label: "Reddit", bg: "#FF4500", mark: "R" },
+  spotify: { label: "Spotify", bg: "#1DB954", mark: "S" },
+  threads: { label: "Threads", bg: "#000000", mark: "@" },
+  github: { label: "GitHub", bg: "#181717", mark: "GH" },
+  vimeo: { label: "Vimeo", bg: "#1AB7EA", mark: "V" },
+  tumblr: { label: "Tumblr", bg: "#36465D", mark: "t" },
+  discord: { label: "Discord", bg: "#5865F2", mark: "D" },
+  email: { label: "Email", bg: "#52525b", mark: "@" },
+  website: { label: "Sitio web", bg: "#52525b", mark: "WWW" }
+};
+var SOCIAL_SLUGS = Object.keys(SOCIAL_NETWORKS);
+function socialMeta(network) {
+  return SOCIAL_NETWORKS[network] ?? { label: network, bg: "#52525b", mark: (network[0] ?? "?").toUpperCase() };
+}
+var MOBILE_STACK_CSS = "<style>@media only screen and (max-width:600px){.eb-col{max-width:100%!important}}</style>";
+var ALLOWED_INLINE = /* @__PURE__ */ new Set(["B", "STRONG", "I", "EM", "U", "S", "STRIKE", "A", "BR", "SPAN", "FONT", "UL", "OL", "LI", "DIV", "P"]);
+var DROP_ENTIRELY = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "NOSCRIPT"]);
+var ALLOWED_STYLE = /^(color|font-size|font-weight|font-style|text-decoration|text-align|background-color|line-height)$/;
+function scrubStyle(el) {
+  const raw = el.getAttribute("style");
+  if (!raw) return;
+  const kept = raw.split(";").map((d) => d.trim()).filter(Boolean).filter((d) => ALLOWED_STYLE.test(d.split(":")[0]?.trim() ?? ""));
+  if (kept.length) el.setAttribute("style", kept.join(";"));
+  else el.removeAttribute("style");
+}
+function scrub(node) {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === 3) continue;
+    if (child.nodeType !== 1) {
+      child.parentNode?.removeChild(child);
+      continue;
+    }
+    const el = child;
+    if (DROP_ENTIRELY.has(el.tagName)) {
+      el.remove();
+      continue;
+    }
+    scrub(el);
+    if (!ALLOWED_INLINE.has(el.tagName)) {
+      el.replaceWith(...Array.from(el.childNodes));
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      if (el.tagName === "A" && attr.name === "href") continue;
+      if (attr.name === "style") continue;
+      if (el.tagName === "FONT" && (attr.name === "color" || attr.name === "size")) continue;
+      el.removeAttribute(attr.name);
+    }
+    scrubStyle(el);
+    if (el.tagName === "A") {
+      const href = el.getAttribute("href") ?? "";
+      if (!/^(https?:|mailto:)/i.test(href)) el.replaceWith(...Array.from(el.childNodes));
+    }
+  }
+}
+function sanitizeInline(html) {
+  if (typeof document === "undefined") return html.replace(/<[^>]+>/g, "");
+  const root = document.createElement("div");
+  root.innerHTML = html;
+  scrub(root);
+  return root.innerHTML.trim();
+}
+function sanitizeRawHtml(html) {
+  return html.replace(/<script[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?<\/style>/gi, "").replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+}
+var SAMPLE = { nombre: "Mar\xEDa", name: "Mar\xEDa", email: "maria@ejemplo.cl" };
+function previewFill(html) {
+  return html.replace(/\{\{\s*([a-z_]+)(?:\|([^}]*))?\s*\}\}/gi, (_m, key, fb) => SAMPLE[key.toLowerCase()] ?? fb ?? "");
+}
+function iconRadius(style, size) {
+  if (style === "square") return "0";
+  if (style === "rounded") return `${Math.round(size * 0.25)}px`;
+  return "50%";
+}
+function renderSocial(block, opts) {
+  const s = block.size;
+  const gap = Math.max(0, Math.round((block.spacing ?? 8) / 2));
+  const radius = iconRadius(block.iconStyle, s);
+  const base = opts?.socialIconBase?.replace(/\/+$/, "");
+  const chips = block.items.map((it) => {
+    const m = socialMeta(it.network);
+    const inner = base ? `<img src="${escapeAttr(`${base}/${it.network}.png`)}" alt="${escapeAttr(m.label)}" width="${s}" height="${s}" style="display:inline-block;width:${s}px;height:${s}px;border:0;outline:none;border-radius:${radius};" />` : `<span style="display:inline-block;width:${s}px;height:${s}px;line-height:${s}px;background:${m.bg};color:#ffffff;border-radius:${radius};text-align:center;font-family:Arial,sans-serif;font-size:${Math.round(s * 0.4)}px;font-weight:700;">${escapeHtml(m.mark)}</span>`;
+    return `<a href="${escapeAttr(it.url || "#")}" target="_blank" style="display:inline-block;margin:0 ${gap}px;text-decoration:none;">${inner}</a>`;
+  }).join("");
+  return `<div style="text-align:${block.align};font-size:0;">${chips}</div>`;
+}
+function renderMenu(block, s) {
+  const sep = block.layout === "horizontal" ? `margin:0 ${Math.round(block.gap / 2)}px` : `display:block;margin:${Math.round(block.gap / 2)}px 0`;
+  const links = block.items.map((it) => `<a href="${escapeAttr(it.url || "#")}" target="_blank" style="${sep};font-family:${s.fontFamily};font-size:${block.fontSize}px;color:${block.color};text-decoration:none;">${escapeHtml(it.label)}</a>`).join("");
+  return `<div style="text-align:${block.align};">${links}</div>`;
+}
+function imageHref(block) {
+  const raw = block.href.trim();
+  if (!raw) return "";
+  if (block.linkAction === "email") return raw.startsWith("mailto:") ? raw : `mailto:${raw}`;
+  if (block.linkAction === "phone") return raw.startsWith("tel:") ? raw : `tel:${raw.replace(/[^\d+]/g, "")}`;
+  return raw;
+}
+function compileBlockInner(block, s, opts) {
+  switch (block.type) {
+    case "text":
+      return `<div style="${styleToString(textStyle(block, s))}">${block.html || "&nbsp;"}</div>`;
+    case "heading":
+      return `<div style="${styleToString(headingStyle(block, s))}">${block.html || "&nbsp;"}</div>`;
+    case "button": {
+      const a = `<a href="${escapeAttr(block.href || "#")}" target="_blank" style="display:${block.fullWidth ? "block" : "inline-block"};padding:12px 24px;font-family:${s.fontFamily};font-size:15px;font-weight:600;color:${block.color};text-decoration:none;border-radius:${block.radius}px;text-align:center;">${escapeHtml(block.label)}</a>`;
+      const tableStyle = block.fullWidth ? "width:100%;" : "display:inline-block;";
+      const table = `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="${tableStyle}border-collapse:separate;line-height:1;"><tr><td align="center" bgcolor="${block.background}" style="background:${block.background};border-radius:${block.radius}px;">${a}</td></tr></table>`;
+      return `<div style="text-align:${block.align};">${table}</div>`;
+    }
+    case "image": {
+      if (!block.src) return "";
+      const w = block.width > 0 ? `${block.width}px` : "100%";
+      const wAttr = block.width > 0 ? String(block.width) : "100%";
+      const img = `<img src="${escapeAttr(block.src)}" alt="${escapeAttr(block.alt)}" width="${wAttr}" style="display:inline-block;border:0;outline:none;text-decoration:none;width:${w};max-width:100%;height:auto;" />`;
+      const href = imageHref(block);
+      const linked = href ? `<a href="${escapeAttr(href)}" target="_blank">${img}</a>` : img;
+      return `<div style="text-align:${block.align};">${linked}</div>`;
+    }
+    case "divider":
+      return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-top:${block.thickness}px solid ${block.color};font-size:0;line-height:0;">&nbsp;</td></tr></table>`;
+    case "spacer":
+      return `<div style="height:${block.height}px;line-height:${block.height}px;font-size:0;">&nbsp;</div>`;
+    case "social":
+      return renderSocial(block, opts);
+    case "menu":
+      return renderMenu(block, s);
+    case "html":
+      return sanitizeRawHtml(block.html);
+    default: {
+      const never = block;
+      throw new Error(`unknown block ${JSON.stringify(never)}`);
+    }
+  }
+}
+function bandWrap(row, content) {
+  const bandImg = row.backgroundImage ? `background-image:url('${escapeAttr(row.backgroundImage)}');background-size:cover;background-position:center;` : "";
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:${row.background};${bandImg}"><tr><td align="center" style="padding:${row.paddingY}px 12px;">${content}</td></tr></table>`;
+}
+function compileRow(row, s, opts) {
+  const cw = s.contentWidth;
+  const contentBg = row.contentBackground ? `background:${row.contentBackground};` : "";
+  const total = row.columns.reduce((n, c) => n + (c.weight || 1), 0) || 1;
+  const colStyle = (c) => `${c.background ? `background:${c.background};` : ""}padding:${c.paddingY}px ${c.paddingX}px;`;
+  if (row.columns.length === 1) {
+    const c = row.columns[0];
+    const content2 = `<table role="presentation" width="${cw}" cellpadding="0" cellspacing="0" border="0" align="center" style="width:100%;max-width:${cw}px;${contentBg}"><tr><td valign="top" style="${colStyle(c)}">${columnBody(c, row.gap, s, opts)}</td></tr></table>`;
+    return bandWrap(row, content2);
+  }
+  const cells = row.columns.map((c) => {
+    const px = Math.max(1, Math.round(cw * (c.weight || 1) / total));
+    const body = columnBody(c, row.gap, s, opts);
+    return `<!--[if mso]><td width="${px}" valign="top"><![endif]--><div class="eb-col" style="display:inline-block;width:100%;max-width:${px}px;vertical-align:top;box-sizing:border-box;font-size:14px;text-align:left;${colStyle(c)}">${body}</div><!--[if mso]></td><![endif]-->`;
+  }).join("");
+  const content = `<table role="presentation" width="${cw}" cellpadding="0" cellspacing="0" border="0" align="center" style="width:100%;max-width:${cw}px;${contentBg}"><tr><td align="center" style="font-size:0;"><!--[if mso]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><![endif]-->` + cells + "<!--[if mso]></tr></table><![endif]--></td></tr></table>";
+  return bandWrap(row, content);
+}
+function columnBody(col, gap, s, opts) {
+  const last = col.blocks.length - 1;
+  const cells = col.blocks.map((b, i) => {
+    const inner = compileBlockInner(b, s, opts);
+    if (!inner) return "";
+    const padded = b.padding ? `<div style="padding:${b.padding}px;">${inner}</div>` : inner;
+    return `<div style="${i < last ? `padding-bottom:${gap}px;` : ""}">${padded}</div>`;
+  }).join("");
+  return cells || "&nbsp;";
+}
+function preheaderSpan(text) {
+  if (!text.trim()) return "";
+  return `<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#ffffff;opacity:0;">${escapeHtml(text)}</div>`;
+}
+function compileDesign(design, opts) {
+  const rows = design.rows.map((r) => compileRow(r, design.settings, opts)).join("");
+  return `${preheaderSpan(design.settings.preheader)}<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:${design.settings.backgroundColor};margin:0;"><tr><td align="center" style="padding:0;">${rows}</td></tr></table>`;
+}
+
+// src/dnd.ts
+var MIME = "application/x-eb-block";
+function setDrag(e, data) {
+  e.dataTransfer.setData(MIME, JSON.stringify(data));
+  e.dataTransfer.setData("text/plain", "");
+  e.dataTransfer.effectAllowed = "move";
+}
+function getDrag(e) {
+  try {
+    return JSON.parse(e.dataTransfer.getData(MIME));
+  } catch {
+    return null;
+  }
+}
+function EditableText({ id, html, style, onCommit, onFocus }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (el && document.activeElement !== el && el.innerHTML !== html) el.innerHTML = html;
+  }, [html, id]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      spellCheck: false,
+      className: "outline-none focus:ring-2 focus:ring-primary/40 rounded-sm [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5",
+      style,
+      onFocus,
+      onBlur: (e) => onCommit(sanitizeInline(e.currentTarget.innerHTML))
+    }
+  );
+}
+var SWATCHES = ["#18181b", "#71717a", "#ffffff", "#2563eb", "#dc2626", "#16a34a", "#d97706", "#7c3aed"];
+function TextToolbar({ labels }) {
+  const [linkOpen, setLinkOpen] = useState(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [sizeOpen, setSizeOpen] = useState(false);
+  const savedRange = useRef(null);
+  const exec = (cmd, value) => document.execCommand(cmd, false, value);
+  const hold = (fn) => (e) => {
+    e.preventDefault();
+    fn();
+  };
+  const btn = "rounded p-1.5 hover:bg-muted text-foreground";
+  const applyFontSize = (px) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    const range = sel.getRangeAt(0);
+    const span = document.createElement("span");
+    span.style.fontSize = `${px}px`;
+    try {
+      range.surroundContents(span);
+    } catch {
+      span.appendChild(range.extractContents());
+      range.insertNode(span);
+    }
+    sel.removeAllRanges();
+  };
+  const saveRange = () => {
+    const sel = window.getSelection();
+    savedRange.current = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+  };
+  const applyLink = () => {
+    const sel = window.getSelection();
+    if (savedRange.current && sel) {
+      sel.removeAllRanges();
+      sel.addRange(savedRange.current);
+    }
+    if (linkUrl.trim()) exec("createLink", linkUrl.trim());
+    setLinkOpen(false);
+    setLinkUrl("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "absolute -top-10 left-0 z-20 flex items-center gap-0.5 rounded-md border border-border bg-popover p-0.5 shadow-md", children: [
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.bold, className: btn, onMouseDown: hold(() => exec("bold")), children: /* @__PURE__ */ jsx(Bold, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.italic, className: btn, onMouseDown: hold(() => exec("italic")), children: /* @__PURE__ */ jsx(Italic, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.underline, className: btn, onMouseDown: hold(() => exec("underline")), children: /* @__PURE__ */ jsx(Underline, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.strike, className: btn, onMouseDown: hold(() => exec("strikeThrough")), children: /* @__PURE__ */ jsx(Strikethrough, { size: 14 }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", title: labels.fontSize, className: `${btn} text-xs font-semibold`, onMouseDown: hold(() => setSizeOpen((v) => !v)), children: "A\xB1" }),
+      sizeOpen && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-8 z-30 flex flex-col rounded-md border border-border bg-popover p-0.5 shadow-md", children: [12, 14, 16, 18, 20, 24, 28, 32].map((n) => /* @__PURE__ */ jsxs("button", { type: "button", className: "rounded px-3 py-1 text-left text-xs hover:bg-muted", onMouseDown: hold(() => {
+        applyFontSize(n);
+        setSizeOpen(false);
+      }), children: [
+        n,
+        "px"
+      ] }, n)) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "mx-0.5 h-4 w-px bg-border" }),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.bulletList, className: btn, onMouseDown: hold(() => exec("insertUnorderedList")), children: /* @__PURE__ */ jsx(List, { size: 14 }) }),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.numberList, className: btn, onMouseDown: hold(() => exec("insertOrderedList")), children: /* @__PURE__ */ jsx(ListOrdered, { size: 14 }) }),
+    /* @__PURE__ */ jsx("span", { className: "mx-0.5 h-4 w-px bg-border" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", title: labels.link, className: btn, onMouseDown: hold(() => {
+        saveRange();
+        setLinkOpen((v) => !v);
+      }), children: /* @__PURE__ */ jsx(Link2, { size: 14 }) }),
+      linkOpen && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-8 z-30 flex gap-1 rounded-md border border-border bg-popover p-1 shadow-md", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            autoFocus: true,
+            value: linkUrl,
+            placeholder: labels.linkUrl,
+            className: "w-44 rounded border border-input bg-background px-2 py-1 text-xs outline-none",
+            onChange: (e) => setLinkUrl(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                applyLink();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "rounded bg-primary px-2 text-xs text-primary-foreground", onMouseDown: (e) => {
+          e.preventDefault();
+          applyLink();
+        }, children: "OK" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "mx-0.5 flex items-center gap-0.5", children: SWATCHES.map((c) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        title: labels.textColor,
+        className: "h-4 w-4 rounded-full border border-border",
+        style: { background: c },
+        onMouseDown: hold(() => document.execCommand("foreColor", false, c))
+      },
+      c
+    )) }),
+    /* @__PURE__ */ jsx("span", { className: "mx-0.5 h-4 w-px bg-border" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "rounded bg-transparent px-1 py-0.5 text-xs outline-none hover:bg-muted",
+        value: "",
+        onMouseDown: (e) => e.stopPropagation(),
+        onChange: (e) => {
+          const v = e.target.value;
+          if (v) exec("insertText", v);
+          e.currentTarget.value = "";
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: labels.insertField }),
+          /* @__PURE__ */ jsx("option", { value: "{{nombre|cliente}}", children: "nombre" }),
+          /* @__PURE__ */ jsx("option", { value: "{{email}}", children: "email" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", title: labels.clearFormat, className: btn, onMouseDown: hold(() => exec("removeFormat")), children: /* @__PURE__ */ jsx(Eraser, { size: 14 }) })
+  ] });
+}
+function ImageDrop({ labels, uploadImage, onDone }) {
+  const ref = useRef(null);
+  const [busy, setBusy] = useState(false);
+  const [over, setOver] = useState(false);
+  const take = async (f) => {
+    if (!f || !uploadImage) return;
+    setBusy(true);
+    try {
+      onDone(await uploadImage(f));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex h-28 cursor-pointer flex-col items-center justify-center gap-1 rounded border border-dashed text-muted-foreground ${over ? "border-primary bg-primary/5" : "border-border"}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (uploadImage) ref.current?.click();
+      },
+      onDragOver: (e) => {
+        if (uploadImage) {
+          e.preventDefault();
+          e.stopPropagation();
+          setOver(true);
+        }
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOver(false);
+        void take(e.dataTransfer.files?.[0]);
+      },
+      children: [
+        uploadImage ? /* @__PURE__ */ jsx(Upload, { size: 20 }) : /* @__PURE__ */ jsx(Image, { size: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "px-2 text-center text-xs", children: busy ? labels.uploading : uploadImage ? labels.dropImage : labels.blockNames.image }),
+        /* @__PURE__ */ jsx("input", { ref, type: "file", accept: "image/*", className: "hidden", onChange: (e) => {
+          void take(e.target.files?.[0]);
+          if (ref.current) ref.current.value = "";
+        } })
+      ]
+    }
+  );
+}
+function SelectionTag({ text }) {
+  return /* @__PURE__ */ jsx("span", { className: "absolute -top-[7px] left-2 z-10 rounded bg-primary px-1.5 py-px text-[10px] font-medium leading-tight text-primary-foreground", children: text });
+}
+function SocialChip({ network, size, base }) {
+  const [failed, setFailed] = useState(false);
+  const m = SOCIAL_NETWORKS[network] ?? { label: network, bg: "#52525b", mark: (network[0] ?? "?").toUpperCase() };
+  if (base && !failed) {
+    return /* @__PURE__ */ jsx("img", { src: `${base.replace(/\/+$/, "")}/${network}.png`, alt: m.label, width: size, height: size, style: { display: "inline-block" }, onError: () => setFailed(true) });
+  }
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: size, height: size, lineHeight: `${size}px`, background: m.bg, color: "#fff", borderRadius: "50%", textAlign: "center", fontFamily: "Arial, sans-serif", fontSize: Math.round(size * 0.4), fontWeight: 700 }, children: m.mark });
+}
+function SocialPreview({ block, base }) {
+  const gap = Math.max(0, Math.round((block.spacing ?? 8) / 2));
+  return /* @__PURE__ */ jsx("div", { style: { textAlign: block.align, fontSize: 0 }, children: block.items.map((it, i) => /* @__PURE__ */ jsx("span", { style: { display: "inline-block", margin: `0 ${gap}px` }, children: /* @__PURE__ */ jsx(SocialChip, { network: it.network, size: block.size, base }) }, i)) });
+}
+function BlockPlaceholder({ label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-24 flex-col items-center justify-center gap-1 rounded border border-dashed border-border text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Code2, { size: 20 }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs", children: label })
+  ] });
+}
+function BlockView({ block, rowId, props }) {
+  const selected = props.selectedBlockId === block.id;
+  const editable = block.type === "text" || block.type === "heading";
+  const style = block.type === "text" ? textStyle(block, props.design.settings) : block.type === "heading" ? headingStyle(block, props.design.settings) : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `group relative ${selected ? "ring-2 ring-primary" : "ring-1 ring-transparent hover:ring-primary/30"} rounded-sm`,
+      onClick: (e) => {
+        e.stopPropagation();
+        props.onSelectBlock(block.id, rowId);
+      },
+      children: [
+        selected && /* @__PURE__ */ jsx(SelectionTag, { text: props.labels.blockNames[block.type] }),
+        selected && editable && /* @__PURE__ */ jsx(TextToolbar, { labels: props.labels }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            draggable: true,
+            onDragStart: (e) => {
+              setDrag(e, { kind: "move-block", blockId: block.id });
+              props.onDragStateChange(true);
+            },
+            onDragEnd: () => props.onDragStateChange(false),
+            className: `absolute -left-6 top-0 hidden cursor-grab items-center text-muted-foreground group-hover:flex ${selected ? "flex" : ""}`,
+            title: "Drag",
+            children: /* @__PURE__ */ jsx(GripVertical, { size: 15 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `absolute -top-3 right-1 z-10 hidden items-center gap-0.5 rounded-md border border-border bg-popover p-0.5 shadow-sm group-hover:flex ${selected ? "flex" : ""}`, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.moveUp, className: "rounded p-1 hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onBlockAction(block.id, "up");
+          }, children: /* @__PURE__ */ jsx(ChevronUp, { size: 13 }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.moveDown, className: "rounded p-1 hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onBlockAction(block.id, "down");
+          }, children: /* @__PURE__ */ jsx(ChevronDown, { size: 13 }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.duplicate, className: "rounded p-1 hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onBlockAction(block.id, "duplicate");
+          }, children: /* @__PURE__ */ jsx(Copy, { size: 13 }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.remove, className: "rounded p-1 text-destructive hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onBlockAction(block.id, "remove");
+          }, children: /* @__PURE__ */ jsx(Trash2, { size: 13 }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { padding: block.padding || void 0 }, children: editable ? /* @__PURE__ */ jsx(
+          EditableText,
+          {
+            id: block.id,
+            html: block.html,
+            style,
+            onFocus: () => props.onSelectBlock(block.id, rowId),
+            onCommit: (html) => props.onBlockChange({ ...block, html })
+          }
+        ) : block.type === "image" && !block.src ? /* @__PURE__ */ jsx(ImageDrop, { labels: props.labels, uploadImage: props.uploadImage, onDone: (src) => props.onBlockChange({ ...block, src }) }) : block.type === "social" ? /* @__PURE__ */ jsx(SocialPreview, { block, base: props.socialIconBase }) : block.type === "html" && !block.html.trim() ? /* @__PURE__ */ jsx(BlockPlaceholder, { label: props.labels.blockNames.html }) : /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: previewFill(compileBlockInner(block, props.design.settings, { socialIconBase: props.socialIconBase })) } }) })
+      ]
+    }
+  );
+}
+function DropZone({ colId, index, props }) {
+  const ref = useRef(null);
+  const setActive = (on) => {
+    if (ref.current) ref.current.dataset.active = on ? "1" : "";
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setActive(true);
+      },
+      onDragLeave: () => setActive(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setActive(false);
+        props.onDragStateChange(false);
+        const data = getDrag(e);
+        if (data && (data.kind === "new-block" || data.kind === "move-block")) props.onDropInColumn(colId, index, data);
+      },
+      className: `${props.dragging ? "h-6" : "h-2"} -my-1 rounded transition-[height] data-[active=1]:bg-primary/15 data-[active=1]:outline data-[active=1]:outline-2 data-[active=1]:outline-primary/50`
+    }
+  );
+}
+function ColumnView({ col, rowId, gap, props }) {
+  const selected = props.selectedColumnId === col.id && !props.selectedBlockId;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative min-w-0 ${selected ? "outline outline-2 -outline-offset-2 outline-primary" : "hover:outline hover:outline-1 hover:-outline-offset-1 hover:outline-primary/30"}`,
+      style: { background: col.background || void 0, padding: `${col.paddingY}px ${col.paddingX}px` },
+      onClick: (e) => {
+        e.stopPropagation();
+        props.onSelectColumn(col.id, rowId);
+      },
+      children: [
+        selected && /* @__PURE__ */ jsx(SelectionTag, { text: props.labels.columnSettings }),
+        /* @__PURE__ */ jsx(DropZone, { colId: col.id, index: 0, props }),
+        col.blocks.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-5 text-center text-xs text-muted-foreground", children: props.labels.empty }),
+        col.blocks.map((b, i) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: i < col.blocks.length - 1 ? gap : 0 }, children: [
+          /* @__PURE__ */ jsx(BlockView, { block: b, rowId, props }),
+          /* @__PURE__ */ jsx(DropZone, { colId: col.id, index: i + 1, props })
+        ] }, b.id))
+      ]
+    }
+  );
+}
+function RowView({ row, props }) {
+  const selected = props.selectedRowId === row.id && !props.selectedBlockId && !props.selectedColumnId;
+  const cols = row.columns.map((c) => `${c.weight || 1}fr`).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `group/row relative ${selected ? "outline outline-2 -outline-offset-2 outline-primary" : ""}`,
+      style: {
+        background: row.background,
+        padding: `${row.paddingY}px 12px`,
+        ...row.backgroundImage ? { backgroundImage: `url('${row.backgroundImage}')`, backgroundSize: "cover", backgroundPosition: "center" } : {}
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        props.onSelectRow(row.id);
+      },
+      children: [
+        selected && /* @__PURE__ */ jsx(SelectionTag, { text: props.labels.rowSettings }),
+        /* @__PURE__ */ jsxs("div", { className: `absolute right-1 top-1 z-10 hidden items-center gap-0.5 rounded-md border border-border bg-popover p-0.5 shadow-sm group-hover/row:flex ${selected ? "flex" : ""}`, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (e) => {
+                setDrag(e, { kind: "move-row", rowId: row.id });
+                props.onDragStateChange(true);
+              },
+              onDragEnd: () => props.onDragStateChange(false),
+              className: "cursor-grab rounded p-1 hover:bg-muted",
+              title: props.labels.moveUp,
+              children: /* @__PURE__ */ jsx(GripVertical, { size: 13 })
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.duplicate, className: "rounded p-1 hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onRowAction(row.id, "duplicate");
+          }, children: /* @__PURE__ */ jsx(Copy, { size: 13 }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", title: props.labels.remove, className: "rounded p-1 text-destructive hover:bg-muted", onClick: (e) => {
+            e.stopPropagation();
+            props.onRowAction(row.id, "remove");
+          }, children: /* @__PURE__ */ jsx(Trash2, { size: 13 }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { maxWidth: props.design.settings.contentWidth, margin: "0 auto", background: row.contentBackground || void 0 }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: cols, gap: 0 }, children: row.columns.map((c) => /* @__PURE__ */ jsx(ColumnView, { col: c, rowId: row.id, gap: row.gap, props }, c.id)) }) })
+      ]
+    }
+  );
+}
+function RowDrop({ index, props }) {
+  const ref = useRef(null);
+  const setActive = (on) => {
+    if (ref.current) ref.current.dataset.active = on ? "1" : "";
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setActive(true);
+      },
+      onDragLeave: () => setActive(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setActive(false);
+        props.onDragStateChange(false);
+        const data = getDrag(e);
+        if (data && (data.kind === "new-row" || data.kind === "move-row")) props.onDropRow(index, data);
+      },
+      className: `${props.dragging ? "h-7" : "h-2"} mx-auto rounded transition-[height] data-[active=1]:bg-primary/20 data-[active=1]:outline data-[active=1]:outline-2 data-[active=1]:outline-primary/60`,
+      style: { maxWidth: props.design.settings.contentWidth }
+    }
+  );
+}
+function Canvas(props) {
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-8", style: { background: "#e9e9ec" }, onClick: () => props.onSelectNone(), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto shadow-sm", style: { maxWidth: props.design.settings.contentWidth + 48, background: props.design.settings.backgroundColor }, children: [
+    /* @__PURE__ */ jsx(RowDrop, { index: 0, props }),
+    props.design.rows.map((r, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(RowView, { row: r, props }),
+      /* @__PURE__ */ jsx(RowDrop, { index: i + 1, props })
+    ] }, r.id)),
+    props.design.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "py-16 text-center text-sm text-muted-foreground", children: props.labels.dropRowHere })
+  ] }) });
+}
+if (!hljs.getLanguage("xml")) hljs.registerLanguage("xml", xml);
+function escapeHtml2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function CodeArea({ value, onChange, placeholder, height = 200 }) {
+  const taRef = useRef(null);
+  const gutRef = useRef(null);
+  const preRef = useRef(null);
+  const lineCount = Math.max(1, value.split("\n").length);
+  const highlighted = useMemo(() => {
+    try {
+      return hljs.highlight(value || "", { language: "xml" }).value;
+    } catch {
+      return escapeHtml2(value);
+    }
+  }, [value]);
+  const onScroll = (e) => {
+    const { scrollTop, scrollLeft } = e.currentTarget;
+    if (gutRef.current) gutRef.current.scrollTop = scrollTop;
+    if (preRef.current) {
+      preRef.current.scrollTop = scrollTop;
+      preRef.current.scrollLeft = scrollLeft;
+    }
+  };
+  const onKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    e.preventDefault();
+    const ta = e.currentTarget;
+    const start = ta.selectionStart;
+    onChange(`${value.slice(0, start)}  ${value.slice(ta.selectionEnd)}`);
+    requestAnimationFrame(() => {
+      ta.selectionStart = ta.selectionEnd = start + 2;
+    });
+  };
+  const boxStyle = { fontSize: 12, lineHeight: "18px", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" };
+  return /* @__PURE__ */ jsxs("div", { className: "flex overflow-hidden rounded-md border border-input bg-background", style: { height, ...boxStyle }, children: [
+    /* @__PURE__ */ jsx("div", { ref: gutRef, className: "select-none overflow-hidden border-r border-border bg-muted/40 py-2 pl-2 pr-1.5 text-right text-muted-foreground", style: { minWidth: 34 }, children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("pre", { ref: preRef, "aria-hidden": true, className: "pointer-events-none absolute inset-0 m-0 overflow-hidden whitespace-pre px-2 py-2", style: boxStyle, children: /* @__PURE__ */ jsx("code", { className: "hljs language-xml", style: { background: "transparent", padding: 0 }, dangerouslySetInnerHTML: { __html: `${highlighted}
+` } }) }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: taRef,
+          value,
+          placeholder,
+          spellCheck: false,
+          wrap: "off",
+          onChange: (e) => onChange(e.target.value),
+          onScroll,
+          onKeyDown,
+          className: "absolute inset-0 resize-none whitespace-pre bg-transparent px-2 py-2 text-transparent caret-foreground outline-none",
+          style: boxStyle
+        }
+      )
+    ] })
+  ] });
+}
+var field = "mb-3";
+var lbl = "mb-1 block text-xs font-medium text-muted-foreground";
+var input = "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring";
+function Text({ label, value, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: label }),
+    /* @__PURE__ */ jsx("input", { className: input, value, placeholder, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function Num({ label, value, onChange, min = 0, max = 999 }) {
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: label }),
+    /* @__PURE__ */ jsx("input", { type: "number", className: input, value, min, max, onChange: (e) => onChange(Math.max(min, Math.min(max, Number(e.target.value) || 0))) })
+  ] });
+}
+function Color({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("input", { type: "color", className: "h-8 w-9 shrink-0 cursor-pointer rounded border border-input bg-background p-0.5", value: value || "#ffffff", onChange: (e) => onChange(e.target.value) }),
+      /* @__PURE__ */ jsx("input", { className: input, value, placeholder: "\u2014", onChange: (e) => onChange(e.target.value) })
+    ] })
+  ] });
+}
+function Select({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: label }),
+    /* @__PURE__ */ jsx("select", { className: input, value, onChange: (e) => onChange(e.target.value), children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)) })
+  ] });
+}
+function Toggle({ label, value, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { className: `${field} flex cursor-pointer items-center justify-between`, children: [
+    /* @__PURE__ */ jsx("span", { className: lbl.replace("mb-1 block", ""), children: label }),
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), className: "h-4 w-4 accent-[var(--primary)]" })
+  ] });
+}
+function AlignPicker({ label, value, onChange }) {
+  const opts = ["left", "center", "right"];
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: label }),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md border border-input p-0.5", children: opts.map((o) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange(o), className: `rounded px-3 py-1 text-xs ${value === o ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"}`, children: o === "left" ? "\u2B05" : o === "center" ? "\u2B0C" : "\u27A1" }, o)) })
+  ] });
+}
+function ImageUpload({ labels, uploadImage, onDone }) {
+  const ref = useRef(null);
+  const [busy, setBusy] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: field, children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "file", accept: "image/*", className: "hidden", onChange: async (e) => {
+      const f = e.target.files?.[0];
+      if (!f) return;
+      setBusy(true);
+      try {
+        onDone(await uploadImage(f));
+      } finally {
+        setBusy(false);
+        if (ref.current) ref.current.value = "";
+      }
+    } }),
+    /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: () => ref.current?.click(), className: "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm hover:bg-muted disabled:opacity-60", children: busy ? labels.uploading : labels.uploadImage })
+  ] });
+}
+function ItemCard({ children, onRemove }) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-2 rounded-md border border-border p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1.5", children }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "shrink-0 rounded p-1 text-destructive hover:bg-muted", onClick: onRemove, children: /* @__PURE__ */ jsx(Trash2, { size: 14 }) })
+  ] }) });
+}
+function SocialEditor({ block, labels, onChange }) {
+  const networks = Object.keys(SOCIAL_NETWORKS);
+  const set = (items) => onChange({ ...block, items });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: labels.socialAdd }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 grid grid-cols-6 gap-1.5", children: SOCIAL_SLUGS.map((slug) => {
+      const m = SOCIAL_NETWORKS[slug];
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: m.label,
+          onClick: () => set([...block.items, { network: slug, url: "https://" }]),
+          className: "flex h-8 w-8 items-center justify-center rounded-full text-[9px] font-bold text-white transition-opacity hover:opacity-80",
+          style: { background: m.bg },
+          children: m.mark
+        },
+        slug
+      );
+    }) }),
+    /* @__PURE__ */ jsx(Select, { label: labels.iconStyle, value: block.iconStyle, options: [{ label: labels.styleCircle, value: "circle" }, { label: labels.styleRounded, value: "rounded" }, { label: labels.styleSquare, value: "square" }], onChange: (v) => onChange({ ...block, iconStyle: v }) }),
+    /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: block.align, onChange: (align) => onChange({ ...block, align }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.size, value: block.size, min: 16, max: 64, onChange: (size) => onChange({ ...block, size }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.iconSpacing, value: block.spacing, min: 0, max: 40, onChange: (spacing) => onChange({ ...block, spacing }) }),
+    /* @__PURE__ */ jsx("label", { className: lbl, children: labels.socialLinks }),
+    block.items.map((it, i) => /* @__PURE__ */ jsxs(ItemCard, { onRemove: () => set(block.items.filter((_, j) => j !== i)), children: [
+      /* @__PURE__ */ jsx("select", { className: input, value: it.network, onChange: (e) => set(block.items.map((x, j) => j === i ? { ...x, network: e.target.value } : x)), children: networks.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: SOCIAL_NETWORKS[n].label }, n)) }),
+      /* @__PURE__ */ jsx("input", { className: input, value: it.url, placeholder: "https://", onChange: (e) => set(block.items.map((x, j) => j === i ? { ...x, url: e.target.value } : x)) })
+    ] }, i))
+  ] });
+}
+function MenuEditor({ block, labels, onChange }) {
+  const set = (items) => onChange({ ...block, items });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: labels.menuItems }),
+    block.items.map((it, i) => /* @__PURE__ */ jsxs(ItemCard, { onRemove: () => set(block.items.filter((_, j) => j !== i)), children: [
+      /* @__PURE__ */ jsx("input", { className: input, value: it.label, placeholder: labels.buttonLabel, onChange: (e) => set(block.items.map((x, j) => j === i ? { ...x, label: e.target.value } : x)) }),
+      /* @__PURE__ */ jsx("input", { className: input, value: it.url, placeholder: "https://", onChange: (e) => set(block.items.map((x, j) => j === i ? { ...x, url: e.target.value } : x)) })
+    ] }, i)),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: "mb-3 flex items-center gap-1 text-xs text-primary hover:underline", onClick: () => set([...block.items, { label: "Enlace", url: "https://" }]), children: [
+      /* @__PURE__ */ jsx(Plus, { size: 13 }),
+      labels.menuAdd
+    ] }),
+    /* @__PURE__ */ jsx(Select, { label: labels.layout, value: block.layout, options: [{ label: labels.horizontal, value: "horizontal" }, { label: labels.vertical, value: "vertical" }], onChange: (v) => onChange({ ...block, layout: v }) }),
+    /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: block.align, onChange: (align) => onChange({ ...block, align }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.fontSize, value: block.fontSize, min: 10, max: 28, onChange: (fontSize) => onChange({ ...block, fontSize }) }),
+    /* @__PURE__ */ jsx(Color, { label: labels.textColor, value: block.color, onChange: (color) => onChange({ ...block, color }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.itemGap, value: block.gap, min: 0, max: 60, onChange: (gap) => onChange({ ...block, gap }) })
+  ] });
+}
+function BlockEditor({ block, labels, uploadImage, onChange }) {
+  const patch = (p) => onChange({ ...block, ...p });
+  switch (block.type) {
+    case "text": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: labels.textEditHint }),
+        /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: b.align, onChange: (align) => patch({ align }) }),
+        /* @__PURE__ */ jsx(Num, { label: labels.fontSize, value: b.fontSize, min: 10, max: 48, onChange: (fontSize) => patch({ fontSize }) }),
+        /* @__PURE__ */ jsx(Color, { label: labels.textColor, value: b.color, onChange: (color) => patch({ color }) }),
+        /* @__PURE__ */ jsx(Num, { label: labels.lineHeight, value: b.lineHeight, min: 1, max: 3, onChange: (lineHeight) => patch({ lineHeight }) })
+      ] });
+    }
+    case "heading": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: labels.textEditHint }),
+        /* @__PURE__ */ jsx(Select, { label: labels.level, value: String(b.level), options: [{ label: "H1", value: "1" }, { label: "H2", value: "2" }, { label: "H3", value: "3" }], onChange: (v) => patch({ level: Number(v) }) }),
+        /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: b.align, onChange: (align) => patch({ align }) }),
+        /* @__PURE__ */ jsx(Color, { label: labels.textColor, value: b.color, onChange: (color) => patch({ color }) })
+      ] });
+    }
+    case "button": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { label: labels.buttonLabel, value: b.label, onChange: (label) => patch({ label }) }),
+        /* @__PURE__ */ jsx(Text, { label: labels.buttonHref, value: b.href, placeholder: "https://", onChange: (href) => patch({ href }) }),
+        /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: b.align, onChange: (align) => patch({ align }) }),
+        /* @__PURE__ */ jsx(Toggle, { label: labels.fullWidth, value: b.fullWidth, onChange: (fullWidth) => patch({ fullWidth }) }),
+        /* @__PURE__ */ jsx(Color, { label: labels.buttonBg, value: b.background, onChange: (background) => patch({ background }) }),
+        /* @__PURE__ */ jsx(Color, { label: labels.textColor, value: b.color, onChange: (color) => patch({ color }) }),
+        /* @__PURE__ */ jsx(Num, { label: labels.radius, value: b.radius, min: 0, max: 40, onChange: (radius) => patch({ radius }) })
+      ] });
+    }
+    case "image": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        uploadImage && /* @__PURE__ */ jsx(ImageUpload, { labels, uploadImage, onDone: (src) => patch({ src }) }),
+        /* @__PURE__ */ jsx(Text, { label: labels.imageUrl, value: b.src, placeholder: "https://\u2026", onChange: (src) => patch({ src }) }),
+        /* @__PURE__ */ jsx(Text, { label: labels.imageAlt, value: b.alt, onChange: (alt) => patch({ alt }) }),
+        /* @__PURE__ */ jsx(AlignPicker, { label: labels.align, value: b.align, onChange: (align) => patch({ align }) }),
+        /* @__PURE__ */ jsx(Num, { label: labels.imageWidth, value: b.width, min: 0, max: 600, onChange: (width) => patch({ width }) }),
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: labels.imageWidthHint }),
+        /* @__PURE__ */ jsx("div", { className: "mb-2 border-t border-border pt-3 text-xs font-semibold text-muted-foreground", children: labels.action }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            label: labels.linkType,
+            value: b.linkAction,
+            options: [{ label: labels.openWebsite, value: "url" }, { label: labels.sendEmail, value: "email" }, { label: labels.callPhone, value: "phone" }],
+            onChange: (v) => patch({ linkAction: v })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { label: labels.linkValue, value: b.href, placeholder: b.linkAction === "email" ? "correo@dominio.cl" : b.linkAction === "phone" ? "+56 9 \u2026" : "https://", onChange: (href) => patch({ href }) })
+      ] });
+    }
+    case "divider": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Color, { label: labels.color, value: b.color, onChange: (color) => patch({ color }) }),
+        /* @__PURE__ */ jsx(Num, { label: labels.thickness, value: b.thickness, min: 1, max: 12, onChange: (thickness) => patch({ thickness }) })
+      ] });
+    }
+    case "spacer": {
+      const b = block;
+      return /* @__PURE__ */ jsx(Num, { label: labels.height, value: b.height, min: 4, max: 160, onChange: (height) => patch({ height }) });
+    }
+    case "social":
+      return /* @__PURE__ */ jsx(SocialEditor, { block, labels, onChange });
+    case "menu":
+      return /* @__PURE__ */ jsx(MenuEditor, { block, labels, onChange });
+    case "html": {
+      const b = block;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("label", { className: lbl, children: labels.htmlContent }),
+        /* @__PURE__ */ jsx(CodeArea, { value: b.html, onChange: (html) => patch({ html }), placeholder: "<div>\u2026</div>", height: 220 }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.htmlHint })
+      ] });
+    }
+    default:
+      return null;
+  }
+}
+var TOOLS = [
+  { type: "heading", Icon: Heading },
+  { type: "text", Icon: Type },
+  { type: "button", Icon: MousePointerClick },
+  { type: "image", Icon: Image },
+  { type: "divider", Icon: Minus },
+  { type: "spacer", Icon: MoveVertical },
+  { type: "menu", Icon: Menu },
+  { type: "social", Icon: Share2 },
+  { type: "html", Icon: Code2 }
+];
+function ContentPalette({ labels, onAppend, onDragState }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: TOOLS.map(({ type, Icon }) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      draggable: true,
+      onDragStart: (e) => {
+        setDrag(e, { kind: "new-block", blockType: type });
+        onDragState(true);
+      },
+      onDragEnd: () => onDragState(false),
+      onClick: () => onAppend(type),
+      className: "flex cursor-grab flex-col items-center gap-1.5 rounded-md border border-border bg-background px-2 py-3 text-[11px] text-muted-foreground transition-colors hover:border-primary/40 hover:bg-muted hover:text-foreground",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: 17 }),
+        labels.blockNames[type]
+      ]
+    },
+    type
+  )) });
+}
+function LayoutGrid({ onPick, onDragState }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1.5", children: ROW_LAYOUTS.map((layout) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      draggable: Boolean(onDragState),
+      onDragStart: onDragState ? (e) => {
+        setDrag(e, { kind: "new-row", weights: layout.weights });
+        onDragState(true);
+      } : void 0,
+      onDragEnd: onDragState ? () => onDragState(false) : void 0,
+      onClick: () => onPick(layout.weights),
+      className: `flex items-stretch gap-0.5 rounded-md border border-border bg-background p-1.5 transition-colors hover:border-primary/40 hover:bg-muted ${onDragState ? "cursor-grab" : "cursor-pointer"}`,
+      style: { height: 34 },
+      children: layout.weights.map((w, i) => /* @__PURE__ */ jsx("span", { className: "rounded-sm bg-muted-foreground/30", style: { flex: w } }, i))
+    },
+    layout.key
+  )) });
+}
+function RowsPalette({ onAppend, onDragState }) {
+  return /* @__PURE__ */ jsx(LayoutGrid, { onPick: onAppend, onDragState });
+}
+function RowEditor({ row, labels, uploadImage, onRowChange, onColumnChange, onRowLayout }) {
+  const [colIdx, setColIdx] = useState(0);
+  const active = row.columns[Math.min(colIdx, row.columns.length - 1)];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("label", { className: lbl, children: labels.columns }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(LayoutGrid, { onPick: (w) => onRowLayout(row.id, w) }) }),
+    /* @__PURE__ */ jsx(Color, { label: labels.rowBg, value: row.background, onChange: (background) => onRowChange({ ...row, background }) }),
+    /* @__PURE__ */ jsx(Color, { label: labels.contentBg, value: row.contentBackground, onChange: (contentBackground) => onRowChange({ ...row, contentBackground }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.paddingY, value: row.paddingY, min: 0, max: 80, onChange: (paddingY) => onRowChange({ ...row, paddingY }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.blockGap, value: row.gap, min: 0, max: 48, onChange: (gap) => onRowChange({ ...row, gap }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-2 mt-1 border-t border-border pt-3 text-xs font-semibold text-muted-foreground", children: labels.backgroundImage }),
+    uploadImage && /* @__PURE__ */ jsx(ImageUpload, { labels, uploadImage, onDone: (url) => onRowChange({ ...row, backgroundImage: url }) }),
+    /* @__PURE__ */ jsx(Text, { label: labels.imageUrl, value: row.backgroundImage, placeholder: "https://\u2026", onChange: (backgroundImage) => onRowChange({ ...row, backgroundImage }) }),
+    row.columns.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-2 mt-1 border-t border-border pt-3 text-xs font-semibold text-muted-foreground", children: labels.columnSettings }),
+      /* @__PURE__ */ jsx("div", { className: "mb-3 flex gap-1", children: row.columns.map((c, i) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setColIdx(i), className: `rounded px-2.5 py-1 text-xs ${i === colIdx ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"}`, children: i + 1 }, c.id)) }),
+      /* @__PURE__ */ jsx(Color, { label: labels.columnBg, value: active.background, onChange: (background) => onColumnChange({ ...active, background }) }),
+      /* @__PURE__ */ jsx(Num, { label: labels.paddingX, value: active.paddingX, min: 0, max: 48, onChange: (paddingX) => onColumnChange({ ...active, paddingX }) }),
+      /* @__PURE__ */ jsx(Num, { label: labels.paddingY, value: active.paddingY, min: 0, max: 48, onChange: (paddingY) => onColumnChange({ ...active, paddingY }) })
+    ] })
+  ] });
+}
+function SettingsPanel({ settings, labels, onChange }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Color, { label: labels.pageBg, value: settings.backgroundColor, onChange: (backgroundColor) => onChange({ ...settings, backgroundColor }) }),
+    /* @__PURE__ */ jsx(Num, { label: labels.contentWidth, value: settings.contentWidth, min: 480, max: 800, onChange: (contentWidth) => onChange({ ...settings, contentWidth }) }),
+    /* @__PURE__ */ jsx(Select, { label: labels.font, value: settings.fontFamily, options: EMAIL_FONT_STACKS, onChange: (fontFamily) => onChange({ ...settings, fontFamily }) }),
+    /* @__PURE__ */ jsx(Color, { label: labels.textColor, value: settings.textColor, onChange: (textColor) => onChange({ ...settings, textColor }) }),
+    /* @__PURE__ */ jsx(Color, { label: labels.linkColor, value: settings.linkColor, onChange: (linkColor) => onChange({ ...settings, linkColor }) }),
+    /* @__PURE__ */ jsxs("div", { className: field, children: [
+      /* @__PURE__ */ jsx("label", { className: lbl, children: labels.preheader }),
+      /* @__PURE__ */ jsx("input", { className: input, value: settings.preheader, onChange: (e) => onChange({ ...settings, preheader: e.target.value }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.preheaderHint })
+    ] })
+  ] });
+}
+function RightPanel(props) {
+  const { design, labels } = props;
+  const [tab, setTab] = useState("content");
+  const block = props.selectedBlockId ? design.rows.flatMap((r) => r.columns.flatMap((c) => c.blocks)).find((b) => b.id === props.selectedBlockId) ?? null : null;
+  const column = !block && props.selectedColumnId ? design.rows.flatMap((r) => r.columns).find((c) => c.id === props.selectedColumnId) ?? null : null;
+  const row = !block && !column && props.selectedRowId ? design.rows.find((r) => r.id === props.selectedRowId) ?? null : null;
+  const selection = block ?? column ?? row;
+  let title = "";
+  let body = null;
+  if (block) {
+    title = labels.blockNames[block.type];
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BlockEditor, { block, labels, uploadImage: props.uploadImage, onChange: props.onBlockChange }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 border-t border-border pt-3", children: /* @__PURE__ */ jsx(Num, { label: labels.containerPadding, value: block.padding ?? 0, min: 0, max: 60, onChange: (padding) => props.onBlockChange({ ...block, padding }) }) })
+    ] });
+  } else if (column) {
+    title = labels.columnSettings;
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Color, { label: labels.columnBg, value: column.background, onChange: (background) => props.onColumnChange({ ...column, background }) }),
+      /* @__PURE__ */ jsx(Num, { label: labels.paddingX, value: column.paddingX, min: 0, max: 48, onChange: (paddingX) => props.onColumnChange({ ...column, paddingX }) }),
+      /* @__PURE__ */ jsx(Num, { label: labels.paddingY, value: column.paddingY, min: 0, max: 48, onChange: (paddingY) => props.onColumnChange({ ...column, paddingY }) })
+    ] });
+  } else if (row) {
+    title = labels.rowSettings;
+    body = /* @__PURE__ */ jsx(RowEditor, { row, labels, uploadImage: props.uploadImage, onRowChange: props.onRowChange, onColumnChange: props.onColumnChange, onRowLayout: props.onRowLayout });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex w-72 shrink-0 flex-col overflow-hidden border-l border-border bg-card", children: selection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", onClick: props.onClearSelection, className: "flex items-center gap-1 border-b border-border px-3 py-2.5 text-sm font-medium hover:bg-muted", children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { size: 15 }),
+      " ",
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: body })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex border-b border-border", children: ["content", "rows", "settings"].map((t) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setTab(t), className: `flex-1 border-b-2 py-2.5 text-xs font-medium ${tab === t ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`, children: t === "content" ? labels.tabContent : t === "rows" ? labels.tabRows : labels.tabSettings }, t)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
+      tab === "content" && /* @__PURE__ */ jsx(ContentPalette, { labels, onAppend: props.onAppendBlock, onDragState: props.onDragStateChange }),
+      tab === "rows" && /* @__PURE__ */ jsx(RowsPalette, { onAppend: props.onAppendRow, onDragState: props.onDragStateChange }),
+      tab === "settings" && /* @__PURE__ */ jsx(SettingsPanel, { settings: design.settings, labels, onChange: props.onSettingsChange })
+    ] })
+  ] }) });
+}
+
+// src/labels.ts
+var DEFAULT_LABELS = {
+  tabContent: "Content",
+  tabRows: "Rows",
+  tabSettings: "Settings",
+  blockNames: { text: "Text", heading: "Heading", button: "Button", image: "Image", divider: "Divider", spacer: "Spacer", social: "Social", html: "HTML", menu: "Menu" },
+  emailSettings: "Email settings",
+  rowSettings: "Row",
+  columnSettings: "Column",
+  columns: "Columns",
+  back: "Back",
+  duplicate: "Duplicate",
+  remove: "Remove",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  addRow: "Add row",
+  empty: "Drag a block here",
+  dropRowHere: "Drop a row here",
+  undo: "Undo",
+  redo: "Redo",
+  preview: "Preview",
+  desktop: "Desktop",
+  mobile: "Mobile",
+  edit: "Edit",
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  strike: "Strikethrough",
+  link: "Link",
+  linkUrl: "Paste a URL",
+  bulletList: "Bulleted list",
+  numberList: "Numbered list",
+  clearFormat: "Clear formatting",
+  insertField: "Field",
+  align: "Alignment",
+  fontSize: "Font size",
+  textColor: "Text color",
+  lineHeight: "Line height",
+  level: "Level",
+  buttonLabel: "Label",
+  buttonHref: "Link",
+  buttonBg: "Background",
+  radius: "Corner radius",
+  fullWidth: "Full width",
+  imageUrl: "Image URL",
+  imageAlt: "Alt text",
+  imageHref: "Link (optional)",
+  imageWidth: "Width (px)",
+  imageWidthHint: "0 = full column width",
+  uploadImage: "Upload image",
+  uploading: "Uploading\u2026",
+  dropImage: "Drop an image or click to upload",
+  color: "Color",
+  thickness: "Thickness",
+  height: "Height",
+  size: "Size",
+  textEditHint: "Click the text on the canvas to edit it.",
+  socialLinks: "Networks",
+  socialAdd: "Add icons",
+  socialNetwork: "Network",
+  socialUrl: "URL",
+  iconSpacing: "Icon spacing",
+  htmlContent: "HTML",
+  htmlHint: "Raw HTML \u2014 scripts are stripped.",
+  menuItems: "Menu items",
+  menuAdd: "Add item",
+  layout: "Layout",
+  horizontal: "Horizontal",
+  vertical: "Vertical",
+  itemGap: "Space between items",
+  action: "Action",
+  linkType: "Link type",
+  openWebsite: "Open website",
+  sendEmail: "Send email",
+  callPhone: "Call phone",
+  linkValue: "Value",
+  rowBg: "Background",
+  contentBg: "Content background",
+  backgroundImage: "Background image",
+  paddingY: "Vertical padding",
+  paddingX: "Horizontal padding",
+  blockGap: "Space between blocks",
+  columnBg: "Background",
+  containerPadding: "Container padding",
+  iconStyle: "Icon shape",
+  styleCircle: "Circle",
+  styleRounded: "Rounded",
+  styleSquare: "Square",
+  pageBg: "Page background",
+  contentWidth: "Content width",
+  font: "Font",
+  linkColor: "Link color",
+  preheader: "Preheader",
+  preheaderHint: "Preview line shown after the subject in the inbox."
+};
+function mapColumns(design, colId, fn) {
+  return { ...design, rows: design.rows.map((r) => ({ ...r, columns: r.columns.map((c) => c.id === colId ? { ...c, blocks: fn(c.blocks) } : c) })) };
+}
+function locateBlock(design, blockId) {
+  for (const r of design.rows) {
+    for (const c of r.columns) {
+      const index = c.blocks.findIndex((b) => b.id === blockId);
+      if (index >= 0) return { colId: c.id, index, block: c.blocks[index] };
+    }
+  }
+  return null;
+}
+var cloneBlock = (b) => ({ ...b, id: uid() });
+var cloneColumn = (c) => ({ ...c, id: uid(), blocks: c.blocks.map(cloneBlock) });
+var cloneRow = (r) => ({ ...r, id: uid(), columns: r.columns.map(cloneColumn) });
+function EmailBuilder({ value, onChange, labels: labelOverrides, uploadImage, socialIconBase, height = 640 }) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides, blockNames: { ...DEFAULT_LABELS.blockNames, ...labelOverrides?.blockNames } };
+  const [selectedBlockId, setSelectedBlockId] = useState(null);
+  const [selectedRowId, setSelectedRowId] = useState(null);
+  const [selectedColumnId, setSelectedColumnId] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const [preview, setPreview] = useState(null);
+  const [past, setPast] = useState([]);
+  const [future, setFuture] = useState([]);
+  const commit = (next) => {
+    setPast((p) => [...p, value].slice(-50));
+    setFuture([]);
+    onChange(next);
+  };
+  const undo = () => {
+    if (!past.length) return;
+    const prev = past[past.length - 1];
+    setPast((p) => p.slice(0, -1));
+    setFuture((f) => [value, ...f]);
+    onChange(prev);
+  };
+  const redo = () => {
+    if (!future.length) return;
+    const nxt = future[0];
+    setFuture((f) => f.slice(1));
+    setPast((p) => [...p, value]);
+    onChange(nxt);
+  };
+  const selectBlock = (blockId, rowId) => {
+    setSelectedBlockId(blockId);
+    setSelectedRowId(rowId);
+    setSelectedColumnId(null);
+  };
+  const selectRow = (rowId) => {
+    setSelectedBlockId(null);
+    setSelectedColumnId(null);
+    setSelectedRowId(rowId);
+  };
+  const selectColumn = (colId, rowId) => {
+    setSelectedBlockId(null);
+    setSelectedColumnId(colId);
+    setSelectedRowId(rowId);
+  };
+  const selectNone = () => {
+    setSelectedBlockId(null);
+    setSelectedRowId(null);
+    setSelectedColumnId(null);
+  };
+  const dropInColumn = (colId, index, data) => {
+    if (data.kind === "new-block") {
+      const block = makeBlock(data.blockType);
+      commit(mapColumns(value, colId, (bs) => [...bs.slice(0, index), block, ...bs.slice(index)]));
+      const row = value.rows.find((r) => r.columns.some((c) => c.id === colId));
+      selectBlock(block.id, row?.id ?? "");
+      return;
+    }
+    if (data.kind !== "move-block") return;
+    const found = locateBlock(value, data.blockId);
+    if (!found) return;
+    let idx = index;
+    if (found.colId === colId && found.index < index) idx -= 1;
+    const removed = mapColumns(value, found.colId, (bs) => bs.filter((b) => b.id !== data.blockId));
+    commit(mapColumns(removed, colId, (bs) => [...bs.slice(0, idx), found.block, ...bs.slice(idx)]));
+  };
+  const dropRow = (index, data) => {
+    if (data.kind === "new-row") {
+      const row = makeRow(data.weights);
+      const rows2 = [...value.rows.slice(0, index), row, ...value.rows.slice(index)];
+      commit({ ...value, rows: rows2 });
+      selectRow(row.id);
+      return;
+    }
+    if (data.kind !== "move-row") return;
+    const from = value.rows.findIndex((r) => r.id === data.rowId);
+    if (from < 0) return;
+    let to = index;
+    if (from < index) to -= 1;
+    const rows = [...value.rows];
+    const [moved] = rows.splice(from, 1);
+    rows.splice(to, 0, moved);
+    commit({ ...value, rows });
+  };
+  const blockAction = (blockId, action) => {
+    const found = locateBlock(value, blockId);
+    if (!found) return;
+    if (action === "remove") {
+      commit(mapColumns(value, found.colId, (bs) => bs.filter((b) => b.id !== blockId)));
+      if (selectedBlockId === blockId) setSelectedBlockId(null);
+      return;
+    }
+    commit(mapColumns(value, found.colId, (bs) => {
+      const i = bs.findIndex((b) => b.id === blockId);
+      const next = [...bs];
+      if (action === "duplicate") next.splice(i + 1, 0, cloneBlock(bs[i]));
+      else if (action === "up" && i > 0) {
+        [next[i - 1], next[i]] = [next[i], next[i - 1]];
+      } else if (action === "down" && i < bs.length - 1) {
+        [next[i + 1], next[i]] = [next[i], next[i + 1]];
+      }
+      return next;
+    }));
+  };
+  const changeBlock = (block) => {
+    const found = locateBlock(value, block.id);
+    if (found) commit(mapColumns(value, found.colId, (bs) => bs.map((b) => b.id === block.id ? block : b)));
+  };
+  const changeRow = (row) => commit({ ...value, rows: value.rows.map((r) => r.id === row.id ? row : r) });
+  const changeColumn = (col) => commit({ ...value, rows: value.rows.map((r) => ({ ...r, columns: r.columns.map((c) => c.id === col.id ? col : c) })) });
+  const changeRowLayout = (rowId, weights) => commit({ ...value, rows: value.rows.map((r) => r.id === rowId ? relayoutRow(r, weights) : r) });
+  const changeSettings = (settings) => commit({ ...value, settings });
+  const rowAction = (rowId, action) => {
+    const i = value.rows.findIndex((r) => r.id === rowId);
+    if (i < 0) return;
+    const next = [...value.rows];
+    if (action === "remove") {
+      next.splice(i, 1);
+      if (selectedRowId === rowId) selectNone();
+    } else if (action === "duplicate") next.splice(i + 1, 0, cloneRow(value.rows[i]));
+    commit({ ...value, rows: next });
+  };
+  const appendBlock = (type) => {
+    const block = makeBlock(type);
+    const colId = selectedColumnId ?? value.rows.find((r) => r.id === selectedRowId)?.columns[0].id ?? value.rows[value.rows.length - 1]?.columns[0].id;
+    if (!colId) {
+      const row2 = makeRow([1]);
+      row2.columns[0].blocks = [block];
+      commit({ ...value, rows: [row2] });
+      selectBlock(block.id, row2.id);
+      return;
+    }
+    commit(mapColumns(value, colId, (bs) => [...bs, block]));
+    const row = value.rows.find((r) => r.columns.some((c) => c.id === colId));
+    selectBlock(block.id, row?.id ?? "");
+  };
+  const appendRow = (weights) => {
+    const row = makeRow(weights);
+    commit({ ...value, rows: [...value.rows, row] });
+    selectRow(row.id);
+  };
+  const onKeyDown = (e) => {
+    const el = document.activeElement;
+    if (el?.isContentEditable || el?.tagName === "INPUT" || el?.tagName === "TEXTAREA") return;
+    const mod = e.metaKey || e.ctrlKey;
+    if (mod && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+    }
+  };
+  const previewHtml = `<!doctype html><html><body style="margin:0;background:${value.settings.backgroundColor};">${previewFill(compileDesign(value, { socialIconBase }))}</body></html>`;
+  const iconBtn = "rounded-md p-1.5 text-muted-foreground enabled:hover:bg-muted enabled:hover:text-foreground disabled:opacity-40";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col overflow-hidden rounded-lg border border-border bg-background", style: { height }, onKeyDown, tabIndex: -1, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border bg-card px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", title: labels.undo, className: iconBtn, disabled: !past.length, onClick: undo, children: /* @__PURE__ */ jsx(Undo2, { size: 16 }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", title: labels.redo, className: iconBtn, disabled: !future.length, onClick: redo, children: /* @__PURE__ */ jsx(Redo2, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setPreview("desktop"), className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-muted", children: [
+        /* @__PURE__ */ jsx(Eye, { size: 14 }),
+        " ",
+        labels.preview
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        Canvas,
+        {
+          design: value,
+          labels,
+          selectedBlockId,
+          selectedRowId,
+          selectedColumnId,
+          dragging,
+          socialIconBase,
+          uploadImage,
+          onSelectBlock: selectBlock,
+          onSelectRow: selectRow,
+          onSelectColumn: selectColumn,
+          onSelectNone: selectNone,
+          onBlockChange: changeBlock,
+          onBlockAction: blockAction,
+          onRowAction: rowAction,
+          onDragStateChange: setDragging,
+          onDropInColumn: dropInColumn,
+          onDropRow: dropRow
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RightPanel,
+        {
+          design: value,
+          labels,
+          uploadImage,
+          selectedBlockId,
+          selectedRowId,
+          selectedColumnId,
+          onBlockChange: changeBlock,
+          onRowChange: changeRow,
+          onColumnChange: changeColumn,
+          onRowLayout: changeRowLayout,
+          onSettingsChange: changeSettings,
+          onAppendBlock: appendBlock,
+          onAppendRow: appendRow,
+          onClearSelection: selectNone,
+          onDragStateChange: setDragging
+        }
+      )
+    ] }),
+    preview && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-50 flex flex-col bg-black/60", onClick: () => setPreview(null), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-3", onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { className: "inline-flex rounded-md bg-card p-0.5", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setPreview("desktop"), className: `flex items-center gap-1 rounded px-3 py-1 text-xs ${preview === "desktop" ? "bg-primary text-primary-foreground" : "text-muted-foreground"}`, children: [
+            /* @__PURE__ */ jsx(Monitor, { size: 13 }),
+            " ",
+            labels.desktop
+          ] }),
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setPreview("mobile"), className: `flex items-center gap-1 rounded px-3 py-1 text-xs ${preview === "mobile" ? "bg-primary text-primary-foreground" : "text-muted-foreground"}`, children: [
+            /* @__PURE__ */ jsx(Smartphone, { size: 13 }),
+            " ",
+            labels.mobile
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setPreview(null), className: "rounded-md bg-card p-1.5 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx(X, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-center overflow-y-auto p-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          title: labels.preview,
+          sandbox: "",
+          srcDoc: previewHtml,
+          className: "h-full rounded-lg border-0 bg-white shadow-xl",
+          style: { width: preview === "mobile" ? 375 : value.settings.contentWidth + 40 }
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { DEFAULT_LABELS, EmailBuilder, MOBILE_STACK_CSS, blockCount, compileDesign, defaultDesign };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map