@oneclick.dev/cms-core-modules 0.0.123 → 0.0.125

package/dist/TemplateBuilder.vue_vue_type_script_setup_true_lang-D85V4nrQ.mjs

@@ -0,0 +1,2886 @@
+import { defineComponent as me, useModel as kt, computed as j, resolveComponent as U, openBlock as s, createElementBlock as u, createElementVNode as l, createTextVNode as c, toDisplayString as $, createBlock as N, withCtx as p, createVNode as o, unref as w, createCommentVNode as T, Fragment as P, renderList as te, normalizeClass as ie, resolveDynamicComponent as fe, mergeModels as Xe, h as lt, withModifiers as ye, normalizeStyle as K, ref as D, reactive as ht, watch as he, onBeforeUnmount as ot, withDirectives as G, vShow as wt, vModelSelect as Me, vModelCheckbox as St, withKeys as _e, vModelText as ne, createStaticVNode as Ct, Transition as $t, onMounted as Bt } from "vue";
+import { useModuleApi as nt, useModulePermissions as Tt, useModuleRoute as Vt, useRouter as Ut, useModuleBreadcrumbs as Dt } from "@oneclick.dev/cms-kit";
+import { Plus as Le, Search as zt, ChevronRight as It, Mail as Ee, ShieldCheck as Mt, Bell as Lt, CreditCard as At, KeyRound as Rt, UserPlus as jt, GripVertical as Et, Pencil as at, MoveUp as Nt, MoveDown as Ht, Copy as Oe, Trash2 as st, Image as We, Undo2 as Pt, Redo2 as Ft, Download as Ot, Loader2 as Ne, Check as He, Eye as Wt, Code2 as it, Monitor as Jt, Tablet as qt, Smartphone as Yt, Type as rt, AlignLeft as Pe, MousePointer as dt, Columns as ut, Minus as mt, Square as Fe, AlertCircle as Kt, Bold as Gt, Italic as Qt, Underline as Zt, Strikethrough as Xt, List as _t, ListOrdered as el, Link as tl, Unlink as ll, RemoveFormatting as ol, X as nl, AlignCenter as al, AlignRight as sl, Code as il, RotateCcw as rl, Palette as dl, Settings2 as ul, PanelLeft as ml, SlidersHorizontal as cl } from "lucide-vue-next";
+import { t as ae } from "./index-RLz1QPrf.mjs";
+import { _ as ct } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { E as pl, M as vl, C as fl, I as bl, O as xl } from "./index-DH2z0W_w.mjs";
+const Ue = {
+  bodyBg: "#f4f4f5",
+  contentBg: "#ffffff",
+  footerBg: "#f4f4f5",
+  footerTextColor: "#71717a",
+  primaryColor: "#18181b",
+  primaryForeground: "#ffffff",
+  textColor: "#18181b",
+  secondaryTextColor: "#71717a",
+  linkColor: "#2563eb",
+  fontFamily: "Arial, Helvetica, sans-serif",
+  borderRadius: 8,
+  contentWidth: 600,
+  contentPadding: 40,
+  logoUrl: "",
+  footerText: "© {{year}} {{agency_name}}. All rights reserved.",
+  showUnsubscribe: !0,
+  showSocialLinks: !1
+};
+function je(t) {
+  switch (t) {
+    case "header":
+      return { text: "Heading", level: "h2", align: "left" };
+    case "text":
+      return { html: "<p>Enter your text here...</p>" };
+    case "button":
+      return { text: "Click Here", url: "#", align: "center", variant: "primary" };
+    case "image":
+      return { src: "", alt: "Image", width: 600, align: "center" };
+    case "divider":
+      return { color: "#e5e7eb" };
+    case "spacer":
+      return { height: 24 };
+    case "columns":
+      return { columns: [{ label: "Label", value: "Value" }, { label: "Label", value: "Value" }] };
+    default:
+      return {};
+  }
+}
+const pt = [
+  {
+    name: "Welcome Email",
+    subject: "Welcome to {{agency_name}}, {{user_name}}!",
+    description: "Sent when a new user is invited to the dashboard.",
+    category: "onboarding",
+    status: "active",
+    blocks: [
+      { id: "welcome-header", type: "header", content: { text: "Welcome aboard, {{user_name}}!", level: "h1", align: "center" } },
+      { id: "welcome-text", type: "text", content: { html: "<p>You've been invited to join <strong>{{project_name}}</strong> on {{agency_name}}. Click the button below to get started.</p>" } },
+      { id: "welcome-btn", type: "button", content: { text: "Accept Invitation", url: "{{invite_url}}", align: "center", variant: "primary" } },
+      { id: "welcome-divider", type: "divider", content: { color: "#e5e7eb" } },
+      { id: "welcome-footer", type: "text", content: { html: `<p style="text-align:center">If you didn't expect this invitation, you can safely ignore this email.</p>` } }
+    ]
+  },
+  {
+    name: "Password Reset",
+    subject: "Reset your password — {{agency_name}}",
+    description: "Sent when a user requests a password reset.",
+    category: "authentication",
+    status: "active",
+    blocks: [
+      { id: "reset-header", type: "header", content: { text: "Password Reset", level: "h2", align: "left" } },
+      { id: "reset-text", type: "text", content: { html: "<p>Hi {{user_name}},</p><p>We received a request to reset the password for your account ({{user_email}}). Click the button below to choose a new password.</p>" } },
+      { id: "reset-btn", type: "button", content: { text: "Reset Password", url: "{{reset_url}}", align: "center", variant: "primary" } },
+      { id: "reset-spacer", type: "spacer", content: { height: 16 } },
+      { id: "reset-note", type: "text", content: { html: `<p style="font-size:13px;color:#71717a">If you didn't request this, no action is needed — your password will remain unchanged.</p>` } }
+    ]
+  },
+  {
+    name: "Payment Confirmation",
+    subject: "Payment received — {{agency_name}}",
+    description: "Sent after a successful payment is processed.",
+    category: "billing",
+    status: "active",
+    blocks: [
+      { id: "payment-header", type: "header", content: { text: "Payment Confirmed", level: "h2", align: "left" } },
+      { id: "payment-text", type: "text", content: { html: "<p>Hi {{user_name}},</p><p>We've successfully received your payment. Thank you for your continued support!</p>" } },
+      { id: "payment-divider", type: "divider", content: { color: "#e5e7eb" } },
+      { id: "payment-footer", type: "text", content: { html: '<p style="font-size:13px;color:#71717a">If you have questions about this charge, reach out at {{support_email}}.</p>' } }
+    ]
+  },
+  {
+    name: "Notification Digest",
+    subject: "Your latest updates — {{agency_name}}",
+    description: "Periodic summary of recent activity and notifications.",
+    category: "notifications",
+    blocks: [
+      { id: "digest-header", type: "header", content: { text: "Here's what you missed", level: "h2", align: "left" } },
+      { id: "digest-text", type: "text", content: { html: "<p>Hi {{user_name}},</p><p>Here's a summary of recent activity on {{project_name}}.</p>" } },
+      { id: "digest-spacer", type: "spacer", content: { height: 16 } },
+      { id: "digest-btn", type: "button", content: { text: "View Dashboard", url: "{{dashboard_url}}", align: "center", variant: "primary" } }
+    ]
+  },
+  {
+    name: "System Maintenance",
+    subject: "Scheduled maintenance — {{agency_name}}",
+    description: "Sent before planned system downtime or maintenance windows.",
+    category: "system",
+    blocks: [
+      { id: "maint-header", type: "header", content: { text: "Scheduled Maintenance", level: "h2", align: "left" } },
+      { id: "maint-text", type: "text", content: { html: "<p>Hi {{user_name}},</p><p>We'll be performing scheduled maintenance on {{project_name}}. During this time, some services may be temporarily unavailable.</p>" } },
+      { id: "maint-divider", type: "divider", content: { color: "#e5e7eb" } },
+      { id: "maint-footer", type: "text", content: { html: '<p style="font-size:13px;color:#71717a">No action is required on your part. If you have questions, contact {{support_email}}.</p>' } }
+    ]
+  },
+  {
+    name: "Notification",
+    subject: "{{notification_title}} — {{agency_name}}",
+    description: "Sent when a user receives a notification and has email notifications enabled.",
+    category: "notifications",
+    status: "active",
+    blocks: [
+      { id: "notif-header", type: "header", content: { text: "{{notification_title}}", level: "h2", align: "left" } },
+      { id: "notif-text", type: "text", content: { html: "<p>Hi {{user_name}},</p><p>{{notification_body}}</p>" } },
+      { id: "notif-btn", type: "button", content: { text: "View in Dashboard", url: "{{notification_url}}", align: "center", variant: "primary" } },
+      { id: "notif-divider", type: "divider", content: { color: "#e5e7eb" } },
+      { id: "notif-footer", type: "text", content: { html: `<p style="font-size:13px;color:#71717a;text-align:center">You're receiving this because you have email notifications enabled. You can update your preferences in your dashboard settings.</p>` } }
+    ]
+  }
+];
+function gl() {
+  return structuredClone(Ue);
+}
+function et(t, A) {
+  const i = pt.find((f) => A ? f.system_key === A : f.name === t);
+  return i ? structuredClone(i) : null;
+}
+function yl() {
+  return structuredClone(pt);
+}
+function vt(t) {
+  const { name: A, subject: i, preheader: f, description: m, category: B, status: g, blocks: I, styles: Y } = t;
+  return { name: A, subject: i, preheader: f, description: m, category: B, status: g, blocks: I, styles: Y };
+}
+function ke(t) {
+  return JSON.stringify(vt(t));
+}
+function Ve(t, A = 60) {
+  let i = [t], f = 0;
+  return {
+    get canUndo() {
+      return f > 0;
+    },
+    get canRedo() {
+      return f < i.length - 1;
+    },
+    record(m) {
+      i[f] !== m && (i = i.slice(0, f + 1), i.push(m), i.length > A && i.shift(), f = i.length - 1);
+    },
+    undo() {
+      return f > 0 ? i[--f] : null;
+    },
+    redo() {
+      return f < i.length - 1 ? i[++f] : null;
+    }
+  };
+}
+function kl(...t) {
+  const A = JSON.stringify(t).matchAll(/\{\{(\w+)\}\}/g);
+  return [...new Set(Array.from(A, (i) => i[1]))].sort();
+}
+const hl = { class: "w-full xl:w-[240px] xl:min-w-[240px] border-r bg-card flex flex-col" }, wl = { class: "p-4 border-b" }, Sl = { class: "flex items-center justify-between mb-3" }, Cl = { class: "text-sm font-semibold" }, $l = { class: "ml-1 text-xs text-muted-foreground" }, Bl = { class: "relative" }, Tl = { class: "p-2" }, Vl = ["onClick"], Ul = { class: "flex items-start gap-3" }, Dl = { class: "min-w-0 flex-1" }, zl = { class: "flex items-center gap-2" }, Il = { class: "font-medium text-sm truncate" }, Ml = {
+  key: 0,
+  class: "size-1.5 shrink-0 rounded-full bg-amber-500",
+  title: "Unsaved changes",
+  "aria-label": "Unsaved changes"
+}, Ll = { class: "text-xs text-muted-foreground mt-0.5 truncate" }, Al = {
+  key: 0,
+  class: "text-[11px] text-muted-foreground/60 mt-1"
+}, Rl = {
+  key: 0,
+  class: "text-center py-12 px-4"
+}, jl = /* @__PURE__ */ me({
+  __name: "TemplateList",
+  props: /* @__PURE__ */ Xe({
+    templates: {},
+    selectedTemplateId: {},
+    dirtyTemplateIds: {},
+    canCreate: { type: Boolean }
+  }, {
+    searchQuery: { default: "" },
+    searchQueryModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Xe(["select", "create"], ["update:searchQuery"]),
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = kt(t, "searchQuery"), B = (V) => ({
+      onboarding: jt,
+      authentication: Rt,
+      billing: At,
+      notifications: Lt,
+      system: Mt
+    })[V] ?? Ee, g = (V) => ({
+      onboarding: "text-emerald-500",
+      authentication: "text-amber-500",
+      billing: "text-blue-500",
+      notifications: "text-purple-500",
+      system: "text-stone-500"
+    })[V] ?? "text-stone-400", I = (V) => {
+      const v = Math.floor((Date.now() - new Date(V).getTime()) / 1e3);
+      if (v < 60) return "just now";
+      const b = Math.floor(v / 60);
+      if (b < 60) return `${b}m ago`;
+      const C = Math.floor(b / 60);
+      if (C < 24) return `${C}h ago`;
+      const H = Math.floor(C / 24);
+      return H < 30 ? `${H}d ago` : `${Math.floor(H / 30)}mo ago`;
+    }, Y = j(() => {
+      let V = i.templates;
+      if (m.value.trim()) {
+        const v = m.value.toLowerCase();
+        V = V.filter(
+          (b) => b.name.toLowerCase().includes(v) || (b.description || "").toLowerCase().includes(v) || b.subject.toLowerCase().includes(v)
+        );
+      }
+      return V;
+    });
+    return (V, v) => {
+      const b = U("Button"), C = U("Input"), H = U("ScrollArea");
+      return s(), u("div", hl, [
+        l("div", wl, [
+          l("div", Sl, [
+            l("h2", Cl, [
+              v[2] || (v[2] = c("Mail templates ", -1)),
+              l("span", $l, $(t.templates.length), 1)
+            ]),
+            t.canCreate ? (s(), N(b, {
+              key: 0,
+              variant: "ghost",
+              size: "icon",
+              class: "size-7",
+              "aria-label": "Create template",
+              title: "Create template",
+              onClick: v[0] || (v[0] = (k) => f("create"))
+            }, {
+              default: p(() => [
+                o(w(Le), { class: "size-4" })
+              ]),
+              _: 1
+            })) : T("", !0)
+          ]),
+          l("div", Bl, [
+            o(C, {
+              modelValue: m.value,
+              "onUpdate:modelValue": v[1] || (v[1] = (k) => m.value = k),
+              type: "search",
+              placeholder: "Search templates...",
+              "aria-label": "Search templates",
+              class: "pl-9 h-9 text-sm appearance-none [&::-webkit-search-cancel-button]:appearance-none"
+            }, null, 8, ["modelValue"]),
+            o(w(zt), { class: "absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" })
+          ])
+        ]),
+        o(H, { class: "flex-1" }, {
+          default: p(() => [
+            l("div", Tl, [
+              (s(!0), u(P, null, te(Y.value, (k) => (s(), u("button", {
+                key: k.id,
+                onClick: (h) => f("select", k.id),
+                class: ie(["w-full text-left p-3 rounded-lg mb-1 transition-all duration-150 group", t.selectedTemplateId === k.id ? "bg-primary/5 border border-primary/20 shadow-sm" : "hover:bg-accent/50 border border-transparent"])
+              }, [
+                l("div", Ul, [
+                  l("div", {
+                    class: ie(["mt-0.5 size-8 rounded-lg flex items-center justify-center shrink-0", t.selectedTemplateId === k.id ? "bg-primary/10" : "bg-secondary"])
+                  }, [
+                    (s(), N(fe(B(k.category)), {
+                      class: ie(["size-4", g(k.category)])
+                    }, null, 8, ["class"]))
+                  ], 2),
+                  l("div", Dl, [
+                    l("div", zl, [
+                      l("span", Il, $(k.name), 1),
+                      t.dirtyTemplateIds.includes(k.id) ? (s(), u("span", Ml)) : T("", !0)
+                    ]),
+                    l("p", Ll, $(k.description), 1),
+                    k.updated_at ? (s(), u("p", Al, "Edited " + $(I(k.updated_at)), 1)) : T("", !0)
+                  ]),
+                  o(w(It), {
+                    class: ie(["size-4 text-muted-foreground/40 shrink-0 mt-1 transition-transform", t.selectedTemplateId === k.id ? "text-primary" : "opacity-0 group-hover:opacity-100"])
+                  }, null, 8, ["class"])
+                ])
+              ], 10, Vl))), 128)),
+              Y.value.length === 0 ? (s(), u("div", Rl, [
+                o(w(Ee), { class: "mx-auto size-10 text-muted-foreground/30" }),
+                v[3] || (v[3] = l("p", { class: "text-sm text-muted-foreground mt-2" }, "No templates found", -1)),
+                v[4] || (v[4] = l("p", { class: "text-xs text-muted-foreground/60 mt-1" }, "Try a different search or create a template", -1))
+              ])) : T("", !0)
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+function ft(t) {
+  const A = {}, { color: i, fontSize: f, textAlign: m } = t.style;
+  return /^(#[\da-f]{3,8}|[a-z]+|rgba?\([\d.,%\s]+\)|hsla?\([\d.,%\s]+\))$/i.test(i) && (A.color = i), /^\d+(\.\d+)?px$/.test(f) && parseFloat(f) >= 8 && parseFloat(f) <= 72 && (A.fontSize = f), ["left", "center", "right", "justify"].includes(m) && (A.textAlign = m), A;
+}
+function tt(t) {
+  return /^(https?:\/\/[^\s]+|mailto:[^\s]+|tel:[+\d\s()-]+|#[\w-]*|\{\{\w+\}\})$/i.test(t.trim());
+}
+const El = /* @__PURE__ */ new Set(["p", "br", "strong", "b", "em", "i", "u", "s", "a", "ul", "ol", "li", "blockquote", "span", "h1", "h2", "h3"]), Nl = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "embed", "svg", "math", "template", "head"]);
+function Hl(t) {
+  if (typeof DOMParser > "u") return [t.replace(/<[^>]*>/g, "")];
+  const A = new DOMParser().parseFromString(t, "text/html"), i = (f) => {
+    if (f.nodeType === 3) return f.textContent ?? "";
+    if (f.nodeType !== 1) return null;
+    const m = f, B = m.tagName.toLowerCase();
+    if (Nl.has(B)) return null;
+    const g = Array.from(m.childNodes, i);
+    return El.has(B) ? lt(B === "a" ? "span" : B, {
+      style: ft(m),
+      ...B === "a" ? { class: "email-preview-link" } : {}
+    }, B === "br" ? void 0 : g) : g;
+  };
+  return Array.from(A.body.childNodes, i);
+}
+const Pl = ["aria-label"], Fl = ["aria-label"], Ol = ["aria-label"], Wl = ["disabled"], Jl = ["disabled"], ql = { class: "p-3 text-center" }, Yl = { class: "mt-1 text-xs text-muted-foreground" }, Kl = ["src", "alt"], Gl = /* @__PURE__ */ me({
+  __name: "BlockRenderer",
+  props: {
+    block: {},
+    index: {},
+    totalBlocks: {},
+    selectedBlockId: {},
+    templateStyles: {}
+  },
+  emits: ["select", "move", "duplicate", "delete", "drag-start", "drag-end"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = j(() => ({ header: "Heading", text: "Text", button: "Button", image: "Image", divider: "Divider", spacer: "Spacer", columns: "Columns" })[i.block.type]), B = j(() => i.selectedBlockId === i.block.id), g = j(() => ["h1", "h2", "h3"].includes(i.block.content.level) ? i.block.content.level : "h2"), I = (k, h, e) => k === "" || k === void 0 || k === null || !Number.isFinite(Number(k)) ? h : Math.min(e, Math.max(0, Number(k))), Y = j(() => ({
+      paddingTop: `${I(i.block.content.paddingTop, ["button", "divider"].includes(i.block.type) ? 8 : 0, 80)}px`,
+      paddingBottom: `${I(i.block.content.paddingBottom, i.block.type === "spacer" ? 0 : 16, 80)}px`
+    })), V = j(() => ({
+      color: i.block.content.color || i.templateStyles.textColor,
+      fontSize: `${I(i.block.content.fontSize, i.block.type === "header" ? { h1: 28, h2: 22, h3: 18 }[g.value] || 22 : 15, 72)}px`,
+      textAlign: i.block.content.align || "left",
+      lineHeight: i.block.type === "header" ? "1.3" : "1.6"
+    })), v = j(() => /^https?:\/\/[^\s]+$/i.test(i.block.content.src || "") ? i.block.content.src : ""), b = me({
+      props: { html: { type: String, default: "" } },
+      setup: (k) => () => lt("div", { class: "email-block-rich-text" }, Hl(k.html))
+    });
+    function C(k) {
+      const h = k.target.closest("button");
+      if (h && !h.hasAttribute("data-email-drag-handle")) {
+        k.preventDefault();
+        return;
+      }
+      if (k.dataTransfer) {
+        k.dataTransfer.effectAllowed = "move", k.dataTransfer.setData("text/plain", i.block.id);
+        const e = k.currentTarget, x = e.getBoundingClientRect();
+        k.dataTransfer.setDragImage(e, k.clientX - x.left, k.clientY - x.top);
+      }
+      f("drag-start", i.block.id);
+    }
+    function H(k) {
+      k.target === k.currentTarget && (k.key === "Enter" || k.key === " ") && (k.preventDefault(), f("select", i.block.id));
+    }
+    return (k, h) => (s(), u("div", {
+      draggable: "true",
+      tabindex: "0",
+      role: "group",
+      "aria-label": `${m.value} block ${t.index + 1} of ${t.totalBlocks}${B.value ? ", selected" : ""}. Press Enter to edit.`,
+      class: ie(["group relative min-h-6 cursor-grab select-none rounded outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", B.value ? "ring-2 ring-primary ring-offset-2" : "hover:ring-1 hover:ring-primary/30 hover:ring-offset-1"]),
+      style: K(Y.value),
+      onClick: h[6] || (h[6] = ye((e) => f("select", t.block.id), ["stop"])),
+      onKeydown: H,
+      onDragstart: ye(C, ["stop"]),
+      onDragend: h[7] || (h[7] = ye((e) => f("drag-end"), ["stop"]))
+    }, [
+      l("div", {
+        class: ie(["absolute -right-1 -top-3 z-10 flex items-center gap-0.5 rounded border bg-card p-0.5 text-card-foreground shadow-sm transition-opacity group-focus-within:opacity-100", B.value ? "opacity-100" : "opacity-0 group-hover:opacity-100"]),
+        onClick: h[5] || (h[5] = ye(() => {
+        }, ["stop"]))
+      }, [
+        l("button", {
+          type: "button",
+          draggable: "true",
+          "data-email-drag-handle": "",
+          "aria-label": `Drag ${m.value.toLowerCase()} block to reorder`,
+          title: "Drag to reorder; use arrow buttons for keyboard control",
+          class: "cursor-grab rounded p-1.5 hover:bg-accent active:cursor-grabbing"
+        }, [
+          o(w(Et), { class: "size-3.5" })
+        ], 8, Fl),
+        l("button", {
+          type: "button",
+          "aria-label": `Edit ${m.value.toLowerCase()} block`,
+          title: "Edit block",
+          class: "rounded p-1.5 hover:bg-accent",
+          onClick: h[0] || (h[0] = (e) => f("select", t.block.id))
+        }, [
+          o(w(at), { class: "size-3.5" })
+        ], 8, Ol),
+        l("button", {
+          type: "button",
+          "aria-label": "Move block up",
+          title: "Move block up",
+          disabled: t.index === 0,
+          class: "rounded p-1.5 hover:bg-accent disabled:pointer-events-none disabled:opacity-30",
+          onClick: h[1] || (h[1] = (e) => f("move", t.block.id, "up"))
+        }, [
+          o(w(Nt), { class: "size-3.5" })
+        ], 8, Wl),
+        l("button", {
+          type: "button",
+          "aria-label": "Move block down",
+          title: "Move block down",
+          disabled: t.index === t.totalBlocks - 1,
+          class: "rounded p-1.5 hover:bg-accent disabled:pointer-events-none disabled:opacity-30",
+          onClick: h[2] || (h[2] = (e) => f("move", t.block.id, "down"))
+        }, [
+          o(w(Ht), { class: "size-3.5" })
+        ], 8, Jl),
+        l("button", {
+          type: "button",
+          "aria-label": "Duplicate block",
+          title: "Duplicate block",
+          class: "rounded p-1.5 hover:bg-accent",
+          onClick: h[3] || (h[3] = (e) => f("duplicate", t.block.id))
+        }, [
+          o(w(Oe), { class: "size-3.5" })
+        ]),
+        l("button", {
+          type: "button",
+          "aria-label": "Delete block",
+          title: "Delete block",
+          class: "rounded p-1.5 hover:bg-destructive/10 hover:text-destructive",
+          onClick: h[4] || (h[4] = (e) => f("delete", t.block.id))
+        }, [
+          o(w(st), { class: "size-3.5" })
+        ])
+      ], 2),
+      t.block.type === "header" ? (s(), N(fe(g.value), {
+        key: 0,
+        class: "m-0 font-bold",
+        style: K(V.value)
+      }, {
+        default: p(() => [
+          c($(t.block.content.text), 1)
+        ]),
+        _: 1
+      }, 8, ["style"])) : t.block.type === "text" ? (s(), N(w(b), {
+        key: 1,
+        html: t.block.content.html || "",
+        style: K({ ...V.value, "--email-link-color": t.templateStyles.linkColor })
+      }, null, 8, ["html", "style"])) : t.block.type === "button" ? (s(), u("div", {
+        key: 2,
+        style: K({ textAlign: t.block.content.align || "center" })
+      }, [
+        l("span", {
+          class: "inline-block px-7 py-3 text-[15px] font-semibold",
+          style: K({
+            backgroundColor: t.block.content.variant === "secondary" ? "transparent" : t.templateStyles.primaryColor,
+            color: t.block.content.variant === "secondary" ? t.templateStyles.primaryColor : t.templateStyles.primaryForeground,
+            border: t.block.content.variant === "secondary" ? `2px solid ${t.templateStyles.primaryColor}` : "none",
+            borderRadius: t.templateStyles.borderRadius + "px"
+          })
+        }, $(t.block.content.text), 5)
+      ], 4)) : t.block.type === "image" ? (s(), u("div", {
+        key: 3,
+        style: K({ textAlign: t.block.content.align || "center" })
+      }, [
+        v.value ? (s(), u("img", {
+          key: 1,
+          src: v.value,
+          alt: t.block.content.alt || "",
+          style: K({ width: I(t.block.content.width, 600, 800) + "px", maxWidth: "100%" }),
+          class: "inline-block h-auto",
+          draggable: "false"
+        }, null, 12, Kl)) : (s(), u("div", {
+          key: 0,
+          class: "inline-flex max-w-full items-center justify-center rounded-lg border-2 border-dashed bg-muted/30",
+          style: K({ width: Math.min(t.block.content.width || 200, 400) + "px", minHeight: "120px" })
+        }, [
+          l("div", ql, [
+            o(w(We), { class: "mx-auto size-8 text-muted-foreground/40" }),
+            l("p", Yl, $(t.block.content.src ? "Image preview available after variables are filled" : "Select to add an image"), 1)
+          ])
+        ], 4))
+      ], 4)) : t.block.type === "divider" ? (s(), u("hr", {
+        key: 4,
+        class: "m-0 border-0",
+        style: K({ borderTopColor: t.block.content.color || "#e5e7eb", borderTopWidth: `${I(t.block.content.thickness, 1, 8)}px`, borderTopStyle: ["solid", "dashed", "dotted"].includes(t.block.content.style) ? t.block.content.style : "solid" })
+      }, null, 4)) : t.block.type === "spacer" ? (s(), u("div", {
+        key: 5,
+        style: K({ height: `${I(t.block.content.height, 24, 200)}px` }),
+        class: "min-h-2"
+      }, null, 4)) : t.block.type === "columns" ? (s(), u("div", {
+        key: 6,
+        class: "grid gap-2 p-2",
+        style: K({ gridTemplateColumns: `repeat(${Math.min(t.block.content.columns?.length || 2, 4)}, minmax(0, 1fr))`, backgroundColor: t.templateStyles.bodyBg, borderRadius: t.templateStyles.borderRadius + "px" })
+      }, [
+        (s(!0), u(P, null, te(t.block.content.columns, (e, x) => (s(), u("div", {
+          key: x,
+          class: "min-w-0 px-3 py-2"
+        }, [
+          l("p", {
+            class: "m-0 text-xs font-semibold uppercase tracking-wide",
+            style: K({ color: t.templateStyles.secondaryTextColor })
+          }, $(e.label), 5),
+          l("p", {
+            class: "mb-0 mt-1 break-words text-[15px] font-medium",
+            style: K({ color: t.templateStyles.textColor })
+          }, $(e.value), 5)
+        ]))), 128))
+      ], 4)) : T("", !0)
+    ], 46, Pl));
+  }
+}), Ql = /* @__PURE__ */ ct(Gl, [["__scopeId", "data-v-48c20c32"]]), Zl = {
+  class: "flex min-w-0 flex-1 flex-col bg-background",
+  "aria-label": "Email builder"
+}, Xl = { class: "flex flex-wrap items-center justify-between gap-3 border-b bg-card px-4 py-3" }, _l = { class: "min-w-0 flex-1" }, eo = { class: "truncate text-sm font-semibold" }, to = {
+  class: "mt-0.5 text-xs text-muted-foreground",
+  role: "status"
+}, lo = { class: "flex items-center gap-1.5" }, oo = { class: "flex flex-wrap items-center justify-between gap-2 border-b bg-card px-4 py-2" }, no = {
+  class: "flex gap-1 rounded-md bg-muted p-0.5",
+  "aria-label": "Editor mode"
+}, ao = {
+  key: 0,
+  class: "flex items-center gap-1",
+  "aria-label": "Preview viewport"
+}, so = { class: "ml-1 text-[11px] tabular-nums text-muted-foreground" }, io = {
+  key: 1,
+  class: "flex items-center gap-2"
+}, ro = {
+  key: 0,
+  class: "flex flex-wrap gap-1 border-b bg-card/50 px-3 py-2",
+  "aria-label": "Add email block"
+}, uo = {
+  key: 1,
+  class: "border-b bg-card px-4 py-2"
+}, mo = { class: "flex items-center justify-between gap-3" }, co = { class: "truncate text-xs" }, po = {
+  key: 0,
+  class: "space-y-3 py-3"
+}, vo = { class: "flex items-center gap-2 text-xs" }, fo = { class: "grid max-h-48 grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2" }, bo = { class: "mb-1 block font-mono text-muted-foreground" }, xo = {
+  key: 2,
+  class: "flex items-center justify-between gap-2 border-b bg-destructive/5 px-4 py-3 text-sm text-destructive",
+  role: "alert"
+}, go = {
+  key: 3,
+  class: "max-h-28 overflow-auto border-b bg-amber-500/10 px-4 py-2 text-xs",
+  role: "alert"
+}, yo = { class: "relative min-h-0 flex-1 overflow-auto bg-muted/40" }, ko = {
+  key: 0,
+  class: "sticky top-2 z-10 mx-auto flex w-fit items-center gap-2 rounded-full border bg-card px-3 py-1.5 text-xs shadow-sm",
+  role: "status"
+}, ho = ["src"], wo = {
+  key: 1,
+  class: "rounded-lg border-2 border-dashed p-8 text-center"
+}, So = ["data-email-block-id"], Co = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "pointer-events-none absolute -top-1 inset-x-0 z-20 border-t-2 border-primary"
+}, $o = {
+  key: 2,
+  class: "relative h-8 text-center text-xs leading-8 text-muted-foreground"
+}, Bo = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "pointer-events-none absolute inset-x-0 top-0 border-t-2 border-primary"
+}, To = {
+  key: 1,
+  class: "mt-3"
+}, Vo = {
+  key: 2,
+  class: "h-full min-h-[500px] p-3 sm:p-5"
+}, Uo = ["srcdoc"], Do = {
+  key: 3,
+  class: "h-full p-4"
+}, zo = ["value"], Io = { class: "flex flex-wrap items-center justify-between gap-2 border-t bg-card px-4 py-2 text-[11px] text-muted-foreground" }, Mo = {
+  key: 0,
+  class: "relative"
+}, Lo = { class: "flex cursor-pointer list-none items-center gap-1 text-amber-600" }, Ao = { class: "absolute bottom-6 right-0 z-20 w-72 space-y-2 rounded-md border bg-card p-3 text-xs shadow-lg" }, Ro = {
+  key: 1,
+  class: "flex items-center gap-1"
+}, jo = {
+  key: 1,
+  class: "flex flex-1 flex-col items-center justify-center p-8 text-center"
+}, Eo = /* @__PURE__ */ me({
+  __name: "EmailCanvas",
+  props: {
+    template: {},
+    selectedBlockId: {},
+    templateStyles: {},
+    saving: { type: Boolean },
+    hasUnsavedChanges: { type: Boolean },
+    canUndo: { type: Boolean },
+    canRedo: { type: Boolean },
+    dirtyCount: {},
+    canEdit: { type: Boolean },
+    canCreate: { type: Boolean },
+    canDelete: { type: Boolean }
+  },
+  emits: ["select-block", "add-block", "move-block", "reorder-block", "duplicate-block", "delete-block", "save", "undo", "redo", "duplicate-template", "create", "delete-template"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = nt(), B = (z) => m.post("/render", { body: z }), g = D(i.canEdit ? "edit" : "preview"), I = D("desktop"), Y = D("mjml"), V = j(() => I.value === "mobile" ? 375 : I.value === "tablet" ? 768 : Math.max(680, i.templateStyles.contentWidth + 80)), v = D(null), b = D(!1), C = D(""), H = D(!1), k = D(!1), h = D(!0), e = ht({
+      agency_name: "Your agency",
+      user_name: "Alex Morgan",
+      user_email: "alex@example.com",
+      project_name: "Your project",
+      year: String((/* @__PURE__ */ new Date()).getFullYear()),
+      inviter_name: "Jamie",
+      support_email: "support@example.com",
+      dashboard_url: "https://example.com/dashboard",
+      invite_url: "https://example.com/invitation",
+      reset_url: "https://example.com/reset",
+      unsubscribe_url: "https://example.com/unsubscribe",
+      expires_at: new Date(Date.now() + 7 * 864e5).toLocaleDateString()
+    }), x = j(() => kl(
+      i.template?.subject,
+      i.template?.preheader,
+      i.template?.blocks,
+      i.templateStyles,
+      i.templateStyles.showUnsubscribe ? "{{unsubscribe_url}}" : ""
+    )), M = j(() => x.value.filter((z) => !e[z])), W = j(() => {
+      const z = [];
+      for (const [r, L] of (i.template?.blocks || []).entries())
+        L.type === "image" && !L.content.src && z.push(`Block ${r + 1}: add an image URL.`), L.type === "image" && L.content.src && !L.content.alt && z.push(`Block ${r + 1}: add alternative text for accessibility.`), L.type === "button" && (!L.content.url || L.content.url === "#") && z.push(`Block ${r + 1}: add a destination for the button.`);
+      return i.template?.subject.trim() || z.unshift("Add an email subject in Settings."), z;
+    }), R = j(() => Y.value === "mjml" ? v.value?.mjml || "" : v.value?.html || ""), ee = j(() => v.value ? Math.ceil(new TextEncoder().encode(v.value.html).length / 1024) : 0), oe = j(() => v.value?.subject || i.template?.subject);
+    let se, J = 0;
+    async function F() {
+      const z = ++J;
+      if (i.template) {
+        b.value = !0, C.value = "";
+        try {
+          const r = await B({
+            blocks: i.template.blocks,
+            subject: i.template.subject,
+            preheader: i.template.preheader,
+            styles: i.templateStyles,
+            variables: g.value === "source" || !h.value ? {} : { ...e },
+            preserveVariables: g.value === "source" || !h.value
+          });
+          z === J && (v.value = r);
+        } catch (r) {
+          z === J && (C.value = r?.data?.statusMessage || (r instanceof Error ? r.message : "Could not compile this email."), v.value = null);
+        } finally {
+          z === J && (b.value = !1);
+        }
+      }
+    }
+    he(() => [i.template, i.templateStyles, e, h.value, g.value], () => {
+      if (clearTimeout(se), J++, g.value === "edit") {
+        b.value = !1;
+        return;
+      }
+      b.value = !0, se = setTimeout(F, 450);
+    }, { deep: !0, immediate: !0 }), he(() => i.template?.id, () => {
+      v.value = null, C.value = "", k.value = !1;
+    }), ot(() => {
+      clearTimeout(se), J++;
+    });
+    async function be(z) {
+      if (!i.template || H.value) return;
+      H.value = !0;
+      const r = i.template.name;
+      try {
+        const L = await B({ blocks: i.template.blocks, subject: i.template.subject, preheader: i.template.preheader, styles: i.templateStyles, preserveVariables: !0 }), ve = new Blob([L[z]], { type: z === "html" ? "text/html;charset=utf-8" : "text/plain;charset=utf-8" }), de = URL.createObjectURL(ve), ue = document.createElement("a");
+        ue.href = de, ue.download = `${r.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "email"}.${z}`, document.body.appendChild(ue), ue.click(), ue.remove(), setTimeout(() => URL.revokeObjectURL(de), 1e3), ae.success(`${z.toUpperCase()} exported with template variables preserved`);
+      } catch (L) {
+        ae.error(L?.data?.statusMessage || (L instanceof Error ? L.message : "Export failed"));
+      } finally {
+        H.value = !1;
+      }
+    }
+    async function ce() {
+      try {
+        await navigator.clipboard.writeText(R.value), ae.success("Source copied");
+      } catch {
+        ae.error("Could not copy. Use Download instead.");
+      }
+    }
+    const X = D(null), a = D(null), q = D(!1), Q = D(null);
+    function we() {
+      X.value = null, a.value = null, q.value = !1;
+    }
+    function De(z) {
+      const r = Array.from(Q.value?.querySelectorAll("[data-email-block-id]") ?? []);
+      for (const L of r) {
+        const ve = L.getBoundingClientRect();
+        if (z < ve.top + ve.height / 2) return L.dataset.emailBlockId ?? null;
+      }
+      return null;
+    }
+    function re(z) {
+      !X.value || !i.canEdit || (z.preventDefault(), z.dataTransfer && (z.dataTransfer.dropEffect = "move"), a.value = De(z.clientY), q.value = !0);
+    }
+    function Se(z) {
+      !X.value || !i.canEdit || (z.preventDefault(), f("reorder-block", X.value, De(z.clientY)), we());
+    }
+    function pe(z) {
+      (!(z.relatedTarget instanceof Node) || !z.currentTarget.contains(z.relatedTarget)) && (q.value = !1);
+    }
+    he(() => [i.template?.id, g.value], we);
+    const Ce = [
+      { type: "header", label: "Heading", icon: rt },
+      { type: "text", label: "Text", icon: Pe },
+      { type: "button", label: "Button", icon: dt },
+      { type: "image", label: "Image", icon: We },
+      { type: "columns", label: "Columns", icon: ut },
+      { type: "divider", label: "Divider", icon: mt },
+      { type: "spacer", label: "Spacer", icon: Fe }
+    ];
+    return (z, r) => {
+      const L = U("Button"), ve = U("DropdownMenuTrigger"), de = U("DropdownMenuItem"), ue = U("DropdownMenuSeparator"), Ae = U("DropdownMenuContent"), Re = U("DropdownMenu"), ze = U("Input");
+      return s(), u("section", Zl, [
+        t.template ? (s(), u(P, { key: 0 }, [
+          l("header", Xl, [
+            l("div", _l, [
+              l("h1", eo, $(t.template.name), 1),
+              l("p", to, $(t.hasUnsavedChanges ? `Unsaved changes${t.dirtyCount > 1 ? ` in ${t.dirtyCount} templates` : ""}` : "All changes saved"), 1)
+            ]),
+            l("div", lo, [
+              t.canEdit ? (s(), N(L, {
+                key: 0,
+                variant: "ghost",
+                size: "icon",
+                class: "size-8",
+                disabled: !t.canUndo,
+                "aria-label": "Undo",
+                title: "Undo (⌘/Ctrl Z)",
+                onClick: r[0] || (r[0] = (y) => f("undo"))
+              }, {
+                default: p(() => [
+                  o(w(Pt), { class: "size-4" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : T("", !0),
+              t.canEdit ? (s(), N(L, {
+                key: 1,
+                variant: "ghost",
+                size: "icon",
+                class: "size-8",
+                disabled: !t.canRedo,
+                "aria-label": "Redo",
+                title: "Redo (⌘/Ctrl Shift Z)",
+                onClick: r[1] || (r[1] = (y) => f("redo"))
+              }, {
+                default: p(() => [
+                  o(w(Ft), { class: "size-4" })
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : T("", !0),
+              o(Re, null, {
+                default: p(() => [
+                  o(ve, { "as-child": "" }, {
+                    default: p(() => [
+                      o(L, {
+                        variant: "outline",
+                        size: "sm",
+                        class: "h-8",
+                        "aria-label": "Template actions"
+                      }, {
+                        default: p(() => [
+                          o(w(Ot), { class: "size-3.5" }),
+                          r[17] || (r[17] = l("span", { class: "hidden 2xl:inline" }, "Export", -1))
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  o(Ae, { align: "end" }, {
+                    default: p(() => [
+                      o(de, {
+                        disabled: H.value,
+                        onSelect: r[2] || (r[2] = (y) => be("mjml"))
+                      }, {
+                        default: p(() => [...r[18] || (r[18] = [
+                          c("Download MJML", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["disabled"]),
+                      o(de, {
+                        disabled: H.value,
+                        onSelect: r[3] || (r[3] = (y) => be("html"))
+                      }, {
+                        default: p(() => [...r[19] || (r[19] = [
+                          c("Download HTML", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["disabled"]),
+                      o(ue),
+                      t.canCreate ? (s(), N(de, {
+                        key: 0,
+                        onSelect: r[4] || (r[4] = (y) => f("duplicate-template"))
+                      }, {
+                        default: p(() => [...r[20] || (r[20] = [
+                          c("Duplicate template", -1)
+                        ])]),
+                        _: 1
+                      })) : T("", !0),
+                      t.canDelete ? (s(), N(de, {
+                        key: 1,
+                        class: "text-destructive",
+                        onSelect: r[5] || (r[5] = (y) => f("delete-template"))
+                      }, {
+                        default: p(() => [...r[21] || (r[21] = [
+                          c("Delete template", -1)
+                        ])]),
+                        _: 1
+                      })) : T("", !0)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t.canEdit ? (s(), N(L, {
+                key: 2,
+                size: "sm",
+                class: "h-8",
+                disabled: !t.hasUnsavedChanges || t.saving,
+                onClick: r[6] || (r[6] = (y) => f("save"))
+              }, {
+                default: p(() => [
+                  t.saving ? (s(), N(w(Ne), {
+                    key: 0,
+                    class: "size-3.5 animate-spin"
+                  })) : (s(), N(w(He), {
+                    key: 1,
+                    class: "size-3.5"
+                  })),
+                  c($(t.saving ? "Saving…" : "Save changes"), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled"])) : T("", !0)
+            ])
+          ]),
+          l("div", oo, [
+            l("div", no, [
+              (s(!0), u(P, null, te([{ value: "edit", label: "Build", icon: w(at) }, { value: "preview", label: "Preview", icon: w(Wt) }, { value: "source", label: "Source", icon: w(it) }], (y) => G((s(), N(L, {
+                key: y.value,
+                variant: g.value === y.value ? "secondary" : "ghost",
+                size: "sm",
+                class: "h-7 px-2.5 text-xs",
+                "aria-pressed": g.value === y.value,
+                onClick: (Z) => g.value = y.value
+              }, {
+                default: p(() => [
+                  (s(), N(fe(y.icon), { class: "size-3.5" })),
+                  c($(y.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["variant", "aria-pressed", "onClick"])), [
+                [wt, y.value !== "edit" || t.canEdit]
+              ])), 128))
+            ]),
+            g.value !== "source" ? (s(), u("div", ao, [
+              (s(!0), u(P, null, te([{ value: "desktop", label: "Desktop", icon: w(Jt) }, { value: "tablet", label: "Tablet", icon: w(qt) }, { value: "mobile", label: "Mobile", icon: w(Yt) }], (y) => (s(), N(L, {
+                key: y.value,
+                variant: I.value === y.value ? "secondary" : "ghost",
+                size: "icon",
+                class: "size-7",
+                "aria-label": y.label,
+                title: y.label,
+                "aria-pressed": I.value === y.value,
+                onClick: (Z) => I.value = y.value
+              }, {
+                default: p(() => [
+                  (s(), N(fe(y.icon), { class: "size-3.5" }))
+                ]),
+                _: 2
+              }, 1032, ["variant", "aria-label", "title", "aria-pressed", "onClick"]))), 128)),
+              l("span", so, $(V.value) + "px", 1)
+            ])) : (s(), u("div", io, [
+              G(l("select", {
+                "onUpdate:modelValue": r[7] || (r[7] = (y) => Y.value = y),
+                "aria-label": "Source format",
+                class: "h-7 rounded border bg-background px-2 text-xs"
+              }, [...r[22] || (r[22] = [
+                l("option", { value: "mjml" }, "MJML", -1),
+                l("option", { value: "html" }, "HTML", -1)
+              ])], 512), [
+                [Me, Y.value]
+              ]),
+              o(L, {
+                variant: "ghost",
+                size: "sm",
+                class: "h-7 text-xs",
+                disabled: !R.value || b.value,
+                onClick: ce
+              }, {
+                default: p(() => [
+                  o(w(Oe), { class: "size-3.5" }),
+                  r[23] || (r[23] = c(" Copy", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]))
+          ]),
+          g.value === "edit" ? (s(), u("div", ro, [
+            (s(), u(P, null, te(Ce, (y) => o(L, {
+              key: y.type,
+              variant: "ghost",
+              size: "sm",
+              class: "h-8 gap-1.5 px-2 text-xs",
+              title: `Add ${y.label.toLowerCase()}${t.selectedBlockId ? " after selection" : ""}`,
+              onClick: (Z) => f("add-block", y.type)
+            }, {
+              default: p(() => [
+                (s(), N(fe(y.icon), { class: "size-3.5" })),
+                c($(y.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["title", "onClick"])), 64))
+          ])) : g.value === "preview" ? (s(), u("div", uo, [
+            l("div", mo, [
+              l("p", co, [
+                r[24] || (r[24] = l("span", { class: "text-muted-foreground" }, "Subject: ", -1)),
+                c($(oe.value), 1)
+              ]),
+              o(L, {
+                variant: "ghost",
+                size: "sm",
+                class: "h-7 shrink-0 text-xs",
+                onClick: r[8] || (r[8] = (y) => k.value = !k.value)
+              }, {
+                default: p(() => [
+                  c("Sample data" + $(M.value.length ? ` (${M.value.length} missing)` : ""), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            k.value ? (s(), u("div", po, [
+              l("label", vo, [
+                G(l("input", {
+                  "onUpdate:modelValue": r[9] || (r[9] = (y) => h.value = y),
+                  type: "checkbox"
+                }, null, 512), [
+                  [St, h.value]
+                ]),
+                r[25] || (r[25] = c(" Preview with sample values", -1))
+              ]),
+              r[26] || (r[26] = l("p", { class: "text-xs text-muted-foreground" }, "Preview only. Saved HTML and downloads preserve your template variables.", -1)),
+              l("div", fo, [
+                (s(!0), u(P, null, te(x.value, (y) => (s(), u("label", {
+                  key: y,
+                  class: "text-xs"
+                }, [
+                  l("span", bo, $(y), 1),
+                  o(ze, {
+                    modelValue: e[y],
+                    "onUpdate:modelValue": (Z) => e[y] = Z,
+                    disabled: !h.value,
+                    placeholder: `Sample ${y.replaceAll("_", " ")}`,
+                    class: "h-8 text-xs"
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "placeholder"])
+                ]))), 128))
+              ])
+            ])) : T("", !0)
+          ])) : T("", !0),
+          C.value && g.value !== "edit" ? (s(), u("div", xo, [
+            l("span", null, $(C.value), 1),
+            o(L, {
+              variant: "outline",
+              size: "sm",
+              onClick: F
+            }, {
+              default: p(() => [...r[27] || (r[27] = [
+                c("Retry", -1)
+              ])]),
+              _: 1
+            })
+          ])) : T("", !0),
+          g.value !== "edit" && v.value?.errors?.length ? (s(), u("div", go, [
+            (s(!0), u(P, null, te(v.value.errors, (y, Z) => (s(), u("p", { key: Z }, $(y.line ? `Line ${y.line}: ` : "") + $(y.message), 1))), 128))
+          ])) : T("", !0),
+          l("div", yo, [
+            b.value && g.value !== "edit" ? (s(), u("div", ko, [
+              o(w(Ne), { class: "size-3 animate-spin" }),
+              r[28] || (r[28] = c(" Compiling email…", -1))
+            ])) : T("", !0),
+            g.value === "edit" ? (s(), u("div", {
+              key: 1,
+              class: "min-h-full p-4 sm:p-6",
+              style: K({ backgroundColor: t.templateStyles.bodyBg }),
+              onDragenter: re,
+              onDragover: re,
+              onDrop: Se,
+              onDragleave: pe
+            }, [
+              l("div", {
+                class: "mx-auto w-full overflow-visible rounded-lg shadow-sm",
+                style: K({ maxWidth: Math.min(V.value, t.templateStyles.contentWidth) + "px", backgroundColor: t.templateStyles.contentBg, fontFamily: t.templateStyles.fontFamily, borderRadius: t.templateStyles.borderRadius + "px" })
+              }, [
+                l("div", {
+                  ref_key: "blockList",
+                  ref: Q,
+                  style: K({ padding: Math.min(t.templateStyles.contentPadding, I.value === "mobile" ? 20 : 64) + "px" })
+                }, [
+                  t.templateStyles.logoUrl ? (s(), u("img", {
+                    key: 0,
+                    src: t.templateStyles.logoUrl,
+                    alt: "Agency logo",
+                    class: "mx-auto mb-6 max-h-12 max-w-full"
+                  }, null, 8, ho)) : T("", !0),
+                  t.template.blocks.length ? T("", !0) : (s(), u("div", wo, [
+                    o(w(Le), { class: "mx-auto mb-3 size-5 text-muted-foreground" }),
+                    r[30] || (r[30] = l("p", { class: "text-sm text-muted-foreground" }, "Add your first block using the toolbar.", -1)),
+                    o(L, {
+                      variant: "outline",
+                      size: "sm",
+                      class: "mt-3",
+                      onClick: r[10] || (r[10] = (y) => f("add-block", "text"))
+                    }, {
+                      default: p(() => [...r[29] || (r[29] = [
+                        c("Add text", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ])),
+                  (s(!0), u(P, null, te(t.template.blocks, (y, Z) => (s(), u("div", {
+                    key: y.id,
+                    "data-email-block-id": y.id,
+                    class: ie(["relative", { "opacity-40": X.value === y.id }])
+                  }, [
+                    X.value && q.value && a.value === y.id ? (s(), u("div", Co)) : T("", !0),
+                    o(Ql, {
+                      block: y,
+                      index: Z,
+                      "total-blocks": t.template.blocks.length,
+                      "selected-block-id": t.selectedBlockId,
+                      "template-styles": t.templateStyles,
+                      onSelect: r[11] || (r[11] = (_) => f("select-block", _)),
+                      onMove: r[12] || (r[12] = (_, xe) => f("move-block", _, xe)),
+                      onDuplicate: r[13] || (r[13] = (_) => f("duplicate-block", _)),
+                      onDelete: r[14] || (r[14] = (_) => f("delete-block", _)),
+                      onDragStart: r[15] || (r[15] = (_) => X.value = _),
+                      onDragEnd: we
+                    }, null, 8, ["block", "index", "total-blocks", "selected-block-id", "template-styles"])
+                  ], 10, So))), 128)),
+                  X.value ? (s(), u("div", $o, [
+                    q.value && a.value === null ? (s(), u("div", Bo)) : T("", !0),
+                    r[31] || (r[31] = c("Drop here to move to end", -1))
+                  ])) : T("", !0)
+                ], 4),
+                t.templateStyles.footerText || t.templateStyles.showUnsubscribe || t.templateStyles.showSocialLinks ? (s(), u("div", {
+                  key: 0,
+                  class: "rounded-b-lg px-6 py-6 text-center text-xs",
+                  style: K({ backgroundColor: t.templateStyles.footerBg, color: t.templateStyles.footerTextColor })
+                }, [
+                  l("p", null, $(t.templateStyles.footerText), 1),
+                  t.templateStyles.showUnsubscribe ? (s(), u("p", {
+                    key: 0,
+                    class: "mt-3 underline",
+                    style: K({ color: t.templateStyles.linkColor })
+                  }, "Unsubscribe", 4)) : T("", !0),
+                  t.templateStyles.showSocialLinks ? (s(), u("p", To, "Social links appear when their URL variables are supplied.")) : T("", !0)
+                ], 4)) : T("", !0)
+              ], 4)
+            ], 36)) : g.value === "preview" && v.value ? (s(), u("div", Vo, [
+              l("iframe", {
+                srcdoc: v.value.html,
+                title: "Compiled email preview",
+                sandbox: "",
+                referrerpolicy: "no-referrer",
+                class: "mx-auto block h-full min-h-[480px] max-w-none border bg-white shadow-sm",
+                style: K({ width: V.value + "px" })
+              }, null, 12, Uo)
+            ])) : g.value === "source" ? (s(), u("div", Do, [
+              r[32] || (r[32] = l("p", { class: "mb-3 text-xs text-muted-foreground" }, "Generated from your blocks. Downloads preserve template variables.", -1)),
+              l("textarea", {
+                value: R.value,
+                readonly: "",
+                "aria-label": "Generated email source",
+                spellcheck: "false",
+                class: "h-[calc(100%-2rem)] min-h-[350px] w-full resize-none rounded-md border bg-card p-4 font-mono text-xs leading-5 outline-none focus:ring-2 focus:ring-ring"
+              }, null, 8, zo)
+            ])) : T("", !0)
+          ]),
+          l("footer", Io, [
+            l("span", null, $(t.template.blocks.length) + " blocks · " + $(g.value === "edit" ? "Select a block to edit · Drag to reorder" : `MJML preview${ee.value ? ` · ${ee.value} KB HTML` : ""}`), 1),
+            W.value.length ? (s(), u("details", Mo, [
+              l("summary", Lo, [
+                o(w(Kt), { class: "size-3" }),
+                c($(W.value.length) + " " + $(W.value.length === 1 ? "check" : "checks") + " to review", 1)
+              ]),
+              l("ul", Ao, [
+                (s(!0), u(P, null, te(W.value, (y) => (s(), u("li", { key: y }, $(y), 1))), 128))
+              ])
+            ])) : g.value !== "edit" && v.value && !b.value && !v.value.errors?.length ? (s(), u("span", Ro, [
+              o(w(He), { class: "size-3" }),
+              r[33] || (r[33] = c("Compiled successfully", -1))
+            ])) : T("", !0)
+          ])
+        ], 64)) : (s(), u("div", jo, [
+          o(w(Ee), { class: "mb-4 size-10 text-muted-foreground/40" }),
+          r[35] || (r[35] = l("h1", { class: "text-lg font-semibold" }, "Build your next email", -1)),
+          r[36] || (r[36] = l("p", { class: "mt-2 max-w-xs text-sm text-muted-foreground" }, "Choose a template or create one with responsive blocks and a live email preview.", -1)),
+          t.canCreate ? (s(), N(L, {
+            key: 0,
+            class: "mt-5",
+            onClick: r[16] || (r[16] = (y) => f("create"))
+          }, {
+            default: p(() => [
+              o(w(Le), { class: "size-4" }),
+              r[34] || (r[34] = c("Create template", -1))
+            ]),
+            _: 1
+          })) : T("", !0)
+        ]))
+      ]);
+    };
+  }
+}), No = { class: "overflow-hidden rounded-md border bg-background focus-within:ring-2 focus-within:ring-ring/30" }, Ho = {
+  class: "flex flex-wrap items-center gap-0.5 border-b bg-muted/30 p-1",
+  role: "toolbar",
+  "aria-label": "Text formatting"
+}, Po = ["title", "aria-label", "aria-pressed", "onClick"], Fo = ["aria-expanded"], Oo = ["aria-pressed", "title"], Wo = {
+  key: 0,
+  class: "space-y-2 border-b p-2"
+}, Jo = { class: "block text-xs font-medium" }, qo = {
+  key: 0,
+  role: "alert",
+  class: "text-xs text-destructive"
+}, Yo = { class: "flex justify-end gap-1" }, Ko = ["value", "aria-label"], Go = /* @__PURE__ */ me({
+  __name: "RichTextEditor",
+  props: {
+    modelValue: {},
+    label: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = D(!1), B = D(!1), g = D(""), I = D(""), V = {
+      default: null,
+      parseHTML: (e) => Object.entries(ft(e)).map(([x, M]) => `${x.replace(/[A-Z]/g, (W) => `-${W.toLowerCase()}`)}: ${M}`).join("; ") || null,
+      renderHTML: (e) => e.emailStyle ? { style: e.emailStyle } : {}
+    }, v = pl.create({
+      name: "emailTextStyles",
+      addGlobalAttributes() {
+        return [{
+          types: ["paragraph", "heading", "blockquote", "listItem"],
+          attributes: {
+            emailStyle: V
+          }
+        }];
+      }
+    }), b = vl.create({
+      name: "emailInlineStyle",
+      addAttributes: () => ({ emailStyle: V }),
+      parseHTML: () => [{ tag: "span[style]" }],
+      renderHTML: ({ HTMLAttributes: e }) => ["span", e, 0]
+    }), C = fl({
+      content: i.modelValue || "",
+      extensions: [
+        bl.configure({
+          heading: { levels: [1, 2, 3] },
+          code: !1,
+          codeBlock: !1,
+          horizontalRule: !1,
+          link: { openOnClick: !1, defaultProtocol: "https", isAllowedUri: tt }
+        }),
+        v,
+        b
+      ],
+      editorProps: {
+        attributes: {
+          class: "email-text-editor min-h-36 px-3 py-2 text-sm focus:outline-none",
+          "aria-label": i.label || "Email text content",
+          role: "textbox",
+          "aria-multiline": "true"
+        }
+      },
+      onUpdate: ({ editor: e }) => f("update:modelValue", e.getHTML())
+    });
+    he(() => i.modelValue, (e) => {
+      C.value && C.value.getHTML() !== e && C.value.commands.setContent(e || "", { emitUpdate: !1 });
+    });
+    const H = j(() => [
+      { label: "Bold", icon: Gt, active: C.value?.isActive("bold"), action: () => C.value?.chain().focus().toggleBold().run() },
+      { label: "Italic", icon: Qt, active: C.value?.isActive("italic"), action: () => C.value?.chain().focus().toggleItalic().run() },
+      { label: "Underline", icon: Zt, active: C.value?.isActive("underline"), action: () => C.value?.chain().focus().toggleUnderline().run() },
+      { label: "Strikethrough", icon: Xt, active: C.value?.isActive("strike"), action: () => C.value?.chain().focus().toggleStrike().run() },
+      { label: "Bullet list", icon: _t, active: C.value?.isActive("bulletList"), action: () => C.value?.chain().focus().toggleBulletList().run() },
+      { label: "Numbered list", icon: el, active: C.value?.isActive("orderedList"), action: () => C.value?.chain().focus().toggleOrderedList().run() }
+    ]);
+    function k() {
+      g.value = C.value?.getAttributes("link").href || "", I.value = "", B.value = !B.value;
+    }
+    function h() {
+      const e = g.value.trim();
+      if (e && !tt(e)) {
+        I.value = "Use https://, mailto:, tel:, or a template variable.";
+        return;
+      }
+      e ? C.value?.chain().focus().extendMarkRange("link").setLink({ href: e }).run() : C.value?.chain().focus().extendMarkRange("link").unsetLink().run(), B.value = !1;
+    }
+    return (e, x) => {
+      const M = U("Input"), W = U("Button");
+      return s(), u("div", No, [
+        l("div", Ho, [
+          m.value ? T("", !0) : (s(), u(P, { key: 0 }, [
+            (s(!0), u(P, null, te(H.value, (R) => (s(), u("button", {
+              key: R.label,
+              type: "button",
+              title: R.label,
+              "aria-label": R.label,
+              "aria-pressed": !!R.active,
+              class: ie(["rounded p-1.5 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", R.active ? "bg-accent text-foreground" : "text-muted-foreground"]),
+              onClick: R.action
+            }, [
+              (s(), N(fe(R.icon), { class: "size-3.5" }))
+            ], 10, Po))), 128)),
+            l("button", {
+              type: "button",
+              title: "Add or edit link",
+              "aria-label": "Add or edit link",
+              "aria-expanded": B.value,
+              class: "rounded p-1.5 hover:bg-accent",
+              onClick: k
+            }, [
+              o(w(tl), { class: "size-3.5" })
+            ], 8, Fo),
+            w(C)?.isActive("link") ? (s(), u("button", {
+              key: 0,
+              type: "button",
+              title: "Remove link",
+              "aria-label": "Remove link",
+              class: "rounded p-1.5 hover:bg-accent",
+              onClick: x[0] || (x[0] = (R) => w(C)?.chain().focus().extendMarkRange("link").unsetLink().run())
+            }, [
+              o(w(ll), { class: "size-3.5" })
+            ])) : T("", !0),
+            l("button", {
+              type: "button",
+              title: "Clear formatting",
+              "aria-label": "Clear formatting",
+              class: "rounded p-1.5 hover:bg-accent",
+              onClick: x[1] || (x[1] = (R) => w(C)?.chain().focus().unsetAllMarks().clearNodes().run())
+            }, [
+              o(w(ol), { class: "size-3.5" })
+            ])
+          ], 64)),
+          l("button", {
+            type: "button",
+            "aria-pressed": m.value,
+            class: "ml-auto inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] hover:bg-accent",
+            title: m.value ? "Switch to visual editor" : "Edit HTML source",
+            onClick: x[2] || (x[2] = (R) => {
+              m.value = !m.value, B.value = !1;
+            })
+          }, [
+            o(w(it), { class: "size-3.5" }),
+            c($(m.value ? "Visual" : "HTML"), 1)
+          ], 8, Oo)
+        ]),
+        B.value && !m.value ? (s(), u("div", Wo, [
+          l("label", Jo, [
+            x[7] || (x[7] = c("Link URL ", -1)),
+            o(M, {
+              modelValue: g.value,
+              "onUpdate:modelValue": x[3] || (x[3] = (R) => g.value = R),
+              class: "mt-1 h-8 text-xs",
+              placeholder: "https://example.com",
+              onKeydown: [
+                _e(ye(h, ["prevent"]), ["enter"]),
+                x[4] || (x[4] = _e(ye((R) => B.value = !1, ["prevent"]), ["esc"]))
+              ]
+            }, null, 8, ["modelValue", "onKeydown"])
+          ]),
+          I.value ? (s(), u("p", qo, $(I.value), 1)) : T("", !0),
+          l("div", Yo, [
+            o(W, {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              class: "h-7 text-xs",
+              onClick: x[5] || (x[5] = (R) => B.value = !1)
+            }, {
+              default: p(() => [...x[8] || (x[8] = [
+                c("Cancel", -1)
+              ])]),
+              _: 1
+            }),
+            o(W, {
+              type: "button",
+              size: "sm",
+              class: "h-7 text-xs",
+              onClick: h
+            }, {
+              default: p(() => [...x[9] || (x[9] = [
+                c("Apply link", -1)
+              ])]),
+              _: 1
+            })
+          ])
+        ])) : T("", !0),
+        m.value ? (s(), u("textarea", {
+          key: 1,
+          value: t.modelValue,
+          "aria-label": `${t.label || "Email text"} HTML source`,
+          rows: "8",
+          class: "block min-h-36 w-full resize-y bg-transparent p-3 font-mono text-xs outline-none",
+          spellcheck: "false",
+          onInput: x[6] || (x[6] = (R) => f("update:modelValue", R.target.value))
+        }, null, 40, Ko)) : (s(), N(w(xl), {
+          key: 2,
+          editor: w(C)
+        }, null, 8, ["editor"]))
+      ]);
+    };
+  }
+}), Qo = /* @__PURE__ */ ct(Go, [["__scopeId", "data-v-accbd7a8"]]), Zo = { class: "p-4 space-y-6" }, Xo = { class: "flex items-center justify-between" }, _o = { class: "flex items-center gap-2" }, en = { class: "text-sm font-semibold" }, tn = { class: "block text-xs font-medium text-muted-foreground" }, ln = {
+  key: 1,
+  class: "space-y-1.5"
+}, on = { class: "block text-xs font-medium text-muted-foreground" }, nn = { class: "block text-xs font-medium text-muted-foreground" }, an = { class: "block text-xs font-medium text-muted-foreground" }, sn = { class: "block text-xs font-medium text-muted-foreground" }, rn = { class: "block text-xs font-medium text-muted-foreground" }, dn = { class: "block text-xs font-medium text-muted-foreground" }, un = { class: "flex items-center gap-2" }, mn = ["value"], cn = { class: "block text-xs font-medium text-muted-foreground" }, pn = {
+  key: 5,
+  class: "block text-xs font-medium text-muted-foreground"
+}, vn = { class: "flex items-center justify-between" }, fn = { class: "text-xs font-medium" }, bn = ["aria-label", "title", "disabled", "onClick"], xn = { class: "block text-xs text-muted-foreground" }, gn = { class: "block text-xs text-muted-foreground" }, yn = { class: "mb-1.5 flex items-center justify-between" }, kn = { class: "flex items-center gap-2" }, hn = ["value"], wn = { class: "block text-xs font-medium text-muted-foreground" }, Sn = { key: 8 }, Cn = { class: "border-t pt-4" }, $n = { class: "grid grid-cols-2 gap-3" }, Bn = { class: "text-xs text-muted-foreground" }, Tn = { class: "text-xs text-muted-foreground" }, Vn = { class: "block text-xs font-medium text-muted-foreground" }, Un = { class: "space-y-3" }, Dn = { class: "flex items-center gap-2" }, zn = { class: "flex items-center gap-2" }, In = { class: "flex items-center gap-2" }, Mn = { class: "flex items-center gap-2" }, Ln = { class: "flex items-center gap-2" }, An = { class: "flex items-center gap-2" }, Rn = { class: "flex items-center gap-2" }, jn = { class: "flex items-center gap-2" }, En = { class: "flex items-center gap-2" }, Nn = { class: "space-y-3" }, Hn = { class: "space-y-3" }, Pn = { class: "flex items-center gap-3" }, Fn = { class: "text-xs text-muted-foreground font-mono w-12 text-right" }, On = { class: "flex items-center gap-3" }, Wn = { class: "text-xs text-muted-foreground font-mono w-12 text-right" }, Jn = { class: "flex items-center gap-3" }, qn = { class: "text-xs text-muted-foreground font-mono w-12 text-right" }, Yn = { class: "space-y-3" }, Kn = { class: "flex items-center justify-between" }, Gn = /* @__PURE__ */ me({
+  __name: "DesignPanel",
+  props: {
+    selectedBlock: {},
+    templateStyles: {}
+  },
+  emits: ["deselect-block", "update:hasUnsavedChanges"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = () => f("update:hasUnsavedChanges", !0), B = [
+      { value: "left", label: "Align left", icon: Pe },
+      { value: "center", label: "Align center", icon: al },
+      { value: "right", label: "Align right", icon: sl }
+    ], g = j(() => i.selectedBlock?.content.columns || []), I = j(() => i.selectedBlock?.type === "header" ? { h1: 28, h2: 22, h3: 18 }[i.selectedBlock.content.level] || 22 : 15), Y = j(() => ["button", "divider"].includes(i.selectedBlock?.type || "") ? 8 : 0);
+    function V(h, e) {
+      i.selectedBlock && (i.selectedBlock.content[h] = e, m());
+    }
+    function v(h, e, x, M, W = !1) {
+      if (e === "") {
+        i.selectedBlock && delete i.selectedBlock.content[h], m();
+        return;
+      }
+      const R = Number(e);
+      Number.isFinite(R) && V(h, W ? Math.min(M, Math.max(x, R)) : R);
+    }
+    function b() {
+      g.value.length >= 4 || V("columns", [...g.value, { label: "Label", value: "Value" }]);
+    }
+    function C(h) {
+      g.value.length <= 1 || V("columns", g.value.filter((e, x) => x !== h));
+    }
+    const H = (h) => ({
+      header: "Heading",
+      text: "Text Block",
+      button: "Button",
+      image: "Image",
+      divider: "Divider",
+      spacer: "Spacer",
+      columns: "Columns"
+    })[h] ?? h, k = (h) => ({
+      header: rt,
+      text: Pe,
+      button: dt,
+      image: We,
+      divider: mt,
+      spacer: Fe,
+      columns: ut
+    })[h] ?? Fe;
+    return (h, e) => {
+      const x = U("Input"), M = U("SegmentedControlButton"), W = U("SegmentedControl"), R = U("Button"), ee = U("Separator"), oe = U("SelectValue"), se = U("SelectTrigger"), J = U("SelectItem"), F = U("SelectContent"), be = U("Select"), ce = U("Textarea"), X = U("Switch");
+      return s(), u("div", Zo, [
+        t.selectedBlock ? (s(), u(P, { key: 0 }, [
+          (s(), u("section", {
+            key: t.selectedBlock.id,
+            "aria-label": "Selected block design",
+            class: "space-y-4"
+          }, [
+            l("div", Xo, [
+              l("div", _o, [
+                (s(), N(fe(k(t.selectedBlock.type)), { class: "size-4 text-muted-foreground" })),
+                l("h4", en, $(H(t.selectedBlock.type)), 1)
+              ]),
+              l("button", {
+                type: "button",
+                "aria-label": "Deselect block",
+                title: "Deselect block",
+                class: "rounded p-1 hover:bg-accent",
+                onClick: e[0] || (e[0] = (a) => f("deselect-block"))
+              }, [
+                o(w(nl), { class: "size-3.5 text-muted-foreground" })
+              ])
+            ]),
+            t.selectedBlock.type === "header" ? (s(), u(P, { key: 0 }, [
+              l("label", tn, [
+                e[54] || (e[54] = c("Heading text ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.text,
+                  "onUpdate:modelValue": [
+                    e[1] || (e[1] = (a) => t.selectedBlock.content.text = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("div", null, [
+                e[58] || (e[58] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Heading level", -1)),
+                o(W, {
+                  "model-value": t.selectedBlock.content.level || "h2",
+                  class: "w-full",
+                  "aria-label": "Heading level",
+                  "onUpdate:modelValue": e[2] || (e[2] = (a) => V("level", a))
+                }, {
+                  default: p(() => [
+                    o(M, {
+                      value: "h1",
+                      class: "text-xs"
+                    }, {
+                      default: p(() => [...e[55] || (e[55] = [
+                        c("H1", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(M, {
+                      value: "h2",
+                      class: "text-xs"
+                    }, {
+                      default: p(() => [...e[56] || (e[56] = [
+                        c("H2", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(M, {
+                      value: "h3",
+                      class: "text-xs"
+                    }, {
+                      default: p(() => [...e[57] || (e[57] = [
+                        c("H3", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value"])
+              ])
+            ], 64)) : t.selectedBlock.type === "text" ? (s(), u("div", ln, [
+              e[59] || (e[59] = l("p", { class: "text-xs font-medium text-muted-foreground" }, "Content", -1)),
+              (s(), N(Qo, {
+                key: t.selectedBlock.id,
+                "model-value": t.selectedBlock.content.html || "",
+                "onUpdate:modelValue": e[3] || (e[3] = (a) => V("html", a))
+              }, null, 8, ["model-value"])),
+              e[60] || (e[60] = l("p", { class: "text-[11px] leading-relaxed text-muted-foreground" }, [
+                c("Variables work in text and links, e.g. "),
+                l("code", null, "{{user_name}}"),
+                c(".")
+              ], -1))
+            ])) : t.selectedBlock.type === "button" ? (s(), u(P, { key: 2 }, [
+              l("label", on, [
+                e[61] || (e[61] = c("Button text ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.text,
+                  "onUpdate:modelValue": [
+                    e[4] || (e[4] = (a) => t.selectedBlock.content.text = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("label", nn, [
+                e[62] || (e[62] = c("Link URL ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.url,
+                  "onUpdate:modelValue": [
+                    e[5] || (e[5] = (a) => t.selectedBlock.content.url = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm",
+                  placeholder: "https://… or {{invite_url}}"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("div", null, [
+                e[65] || (e[65] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Style", -1)),
+                o(W, {
+                  "model-value": t.selectedBlock.content.variant || "primary",
+                  class: "w-full",
+                  "aria-label": "Button style",
+                  "onUpdate:modelValue": e[6] || (e[6] = (a) => V("variant", a))
+                }, {
+                  default: p(() => [
+                    o(M, {
+                      value: "primary",
+                      class: "text-xs"
+                    }, {
+                      default: p(() => [...e[63] || (e[63] = [
+                        c("Filled", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(M, {
+                      value: "secondary",
+                      class: "text-xs"
+                    }, {
+                      default: p(() => [...e[64] || (e[64] = [
+                        c("Outline", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value"])
+              ])
+            ], 64)) : t.selectedBlock.type === "image" ? (s(), u(P, { key: 3 }, [
+              l("label", an, [
+                e[66] || (e[66] = c("Image URL ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.src,
+                  "onUpdate:modelValue": [
+                    e[7] || (e[7] = (a) => t.selectedBlock.content.src = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm",
+                  placeholder: "https://…"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("label", sn, [
+                e[67] || (e[67] = c("Alt text ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.alt,
+                  "onUpdate:modelValue": [
+                    e[8] || (e[8] = (a) => t.selectedBlock.content.alt = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm",
+                  placeholder: "Describe the image"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("label", rn, [
+                e[68] || (e[68] = c("Link URL (optional) ", -1)),
+                o(x, {
+                  modelValue: t.selectedBlock.content.href,
+                  "onUpdate:modelValue": [
+                    e[9] || (e[9] = (a) => t.selectedBlock.content.href = a),
+                    m
+                  ],
+                  class: "mt-1.5 h-9 text-sm",
+                  placeholder: "https://…"
+                }, null, 8, ["modelValue"])
+              ]),
+              l("label", dn, [
+                e[69] || (e[69] = c("Width (px) ", -1)),
+                o(x, {
+                  "model-value": t.selectedBlock.content.width ?? 600,
+                  type: "number",
+                  min: "24",
+                  max: "800",
+                  class: "mt-1.5 h-9 text-sm",
+                  "onUpdate:modelValue": e[10] || (e[10] = (a) => v("width", a, 24, 800)),
+                  onChange: e[11] || (e[11] = (a) => v("width", a.target.value, 24, 800, !0))
+                }, null, 8, ["model-value"])
+              ]),
+              e[70] || (e[70] = l("p", { class: "text-[11px] text-muted-foreground" }, "Images scale down to fit the email on smaller screens.", -1))
+            ], 64)) : t.selectedBlock.type === "divider" ? (s(), u(P, { key: 4 }, [
+              l("div", null, [
+                e[71] || (e[71] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Line color", -1)),
+                l("div", un, [
+                  l("input", {
+                    type: "color",
+                    value: t.selectedBlock.content.color || "#e5e7eb",
+                    "aria-label": "Divider color picker",
+                    class: "size-9 shrink-0 cursor-pointer rounded border",
+                    onInput: e[12] || (e[12] = (a) => V("color", a.target.value))
+                  }, null, 40, mn),
+                  o(x, {
+                    "model-value": t.selectedBlock.content.color || "#e5e7eb",
+                    "aria-label": "Divider color",
+                    class: "h-9 flex-1 font-mono text-sm",
+                    "onUpdate:modelValue": e[13] || (e[13] = (a) => V("color", a))
+                  }, null, 8, ["model-value"])
+                ])
+              ]),
+              l("label", cn, [
+                e[72] || (e[72] = c("Thickness (px) ", -1)),
+                o(x, {
+                  "model-value": t.selectedBlock.content.thickness ?? 1,
+                  type: "number",
+                  min: "1",
+                  max: "8",
+                  class: "mt-1.5 h-9 text-sm",
+                  "onUpdate:modelValue": e[14] || (e[14] = (a) => v("thickness", a, 1, 8)),
+                  onChange: e[15] || (e[15] = (a) => v("thickness", a.target.value, 1, 8, !0))
+                }, null, 8, ["model-value"])
+              ]),
+              l("div", null, [
+                e[76] || (e[76] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Line style", -1)),
+                o(W, {
+                  "model-value": t.selectedBlock.content.style || "solid",
+                  class: "w-full",
+                  "aria-label": "Divider line style",
+                  "onUpdate:modelValue": e[16] || (e[16] = (a) => V("style", a))
+                }, {
+                  default: p(() => [
+                    o(M, {
+                      value: "solid",
+                      class: "px-2 text-xs"
+                    }, {
+                      default: p(() => [...e[73] || (e[73] = [
+                        c("Solid", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(M, {
+                      value: "dashed",
+                      class: "px-2 text-xs"
+                    }, {
+                      default: p(() => [...e[74] || (e[74] = [
+                        c("Dashed", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(M, {
+                      value: "dotted",
+                      class: "px-2 text-xs"
+                    }, {
+                      default: p(() => [...e[75] || (e[75] = [
+                        c("Dotted", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["model-value"])
+              ])
+            ], 64)) : t.selectedBlock.type === "spacer" ? (s(), u("label", pn, [
+              e[77] || (e[77] = c("Height (px) ", -1)),
+              o(x, {
+                "model-value": t.selectedBlock.content.height ?? 24,
+                type: "number",
+                min: "0",
+                max: "200",
+                class: "mt-1.5 h-9 text-sm",
+                "onUpdate:modelValue": e[17] || (e[17] = (a) => v("height", a, 0, 200)),
+                onChange: e[18] || (e[18] = (a) => v("height", a.target.value, 0, 200, !0))
+              }, null, 8, ["model-value"])
+            ])) : t.selectedBlock.type === "columns" ? (s(), u(P, { key: 6 }, [
+              e[81] || (e[81] = l("p", { class: "text-xs leading-relaxed text-muted-foreground" }, "Present details side by side. Columns stack on mobile.", -1)),
+              (s(!0), u(P, null, te(g.value, (a, q) => (s(), u("div", {
+                key: q,
+                class: "space-y-2 rounded-md border p-3"
+              }, [
+                l("div", vn, [
+                  l("p", fn, "Column " + $(q + 1), 1),
+                  l("button", {
+                    type: "button",
+                    "aria-label": `Remove column ${q + 1}`,
+                    title: `Remove column ${q + 1}`,
+                    disabled: g.value.length <= 1,
+                    class: "rounded p-1 text-muted-foreground hover:bg-accent hover:text-destructive disabled:opacity-30",
+                    onClick: (Q) => C(q)
+                  }, [
+                    o(w(st), { class: "size-3.5" })
+                  ], 8, bn)
+                ]),
+                l("label", xn, [
+                  e[78] || (e[78] = c("Label", -1)),
+                  o(x, {
+                    modelValue: a.label,
+                    "onUpdate:modelValue": [(Q) => a.label = Q, m],
+                    class: "mt-1 h-8 text-xs"
+                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                ]),
+                l("label", gn, [
+                  e[79] || (e[79] = c("Value", -1)),
+                  o(x, {
+                    modelValue: a.value,
+                    "onUpdate:modelValue": [(Q) => a.value = Q, m],
+                    class: "mt-1 h-8 text-xs"
+                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                ])
+              ]))), 128)),
+              o(R, {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                class: "w-full gap-1.5",
+                disabled: g.value.length >= 4,
+                onClick: b
+              }, {
+                default: p(() => [
+                  o(w(Le), { class: "size-3.5" }),
+                  e[80] || (e[80] = c("Add column", -1))
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ], 64)) : T("", !0),
+            ["header", "text"].includes(t.selectedBlock.type) ? (s(), u(P, { key: 7 }, [
+              l("div", null, [
+                l("div", yn, [
+                  e[82] || (e[82] = l("p", { class: "text-xs font-medium text-muted-foreground" }, "Text color", -1)),
+                  t.selectedBlock.content.color ? (s(), u("button", {
+                    key: 0,
+                    type: "button",
+                    class: "text-[11px] text-muted-foreground hover:text-foreground",
+                    onClick: e[19] || (e[19] = (a) => {
+                      delete t.selectedBlock.content.color, m();
+                    })
+                  }, "Use template color")) : T("", !0)
+                ]),
+                l("div", kn, [
+                  l("input", {
+                    type: "color",
+                    value: t.selectedBlock.content.color || t.templateStyles.textColor,
+                    "aria-label": "Block text color picker",
+                    class: "size-9 shrink-0 cursor-pointer rounded border",
+                    onInput: e[20] || (e[20] = (a) => V("color", a.target.value))
+                  }, null, 40, hn),
+                  o(x, {
+                    "model-value": t.selectedBlock.content.color || t.templateStyles.textColor,
+                    "aria-label": "Block text color",
+                    class: "h-9 flex-1 font-mono text-sm",
+                    "onUpdate:modelValue": e[21] || (e[21] = (a) => V("color", a))
+                  }, null, 8, ["model-value"])
+                ])
+              ]),
+              l("label", wn, [
+                e[83] || (e[83] = c("Font size (px) ", -1)),
+                o(x, {
+                  "model-value": t.selectedBlock.content.fontSize ?? I.value,
+                  type: "number",
+                  min: "8",
+                  max: "72",
+                  class: "mt-1.5 h-9 text-sm",
+                  "onUpdate:modelValue": e[22] || (e[22] = (a) => v("fontSize", a, 8, 72)),
+                  onChange: e[23] || (e[23] = (a) => v("fontSize", a.target.value, 8, 72, !0))
+                }, null, 8, ["model-value"])
+              ])
+            ], 64)) : T("", !0),
+            ["header", "text", "button", "image"].includes(t.selectedBlock.type) ? (s(), u("div", Sn, [
+              e[84] || (e[84] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Alignment", -1)),
+              o(W, {
+                "model-value": t.selectedBlock.content.align || (["button", "image"].includes(t.selectedBlock.type) ? "center" : "left"),
+                class: "w-full",
+                "aria-label": "Block alignment",
+                "onUpdate:modelValue": e[24] || (e[24] = (a) => V("align", a))
+              }, {
+                default: p(() => [
+                  (s(), u(P, null, te(B, (a) => o(M, {
+                    key: a.value,
+                    value: a.value,
+                    "aria-label": a.label,
+                    title: a.label
+                  }, {
+                    default: p(() => [
+                      (s(), N(fe(a.icon), { class: "mx-auto size-3.5" }))
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "aria-label", "title"])), 64))
+                ]),
+                _: 1
+              }, 8, ["model-value"])
+            ])) : T("", !0),
+            l("div", Cn, [
+              e[87] || (e[87] = l("p", { class: "mb-2 text-xs font-medium text-muted-foreground" }, "Spacing (px)", -1)),
+              l("div", $n, [
+                l("label", Bn, [
+                  e[85] || (e[85] = c("Above", -1)),
+                  o(x, {
+                    "model-value": t.selectedBlock.content.paddingTop ?? Y.value,
+                    type: "number",
+                    min: "0",
+                    max: "80",
+                    class: "mt-1 h-8 text-xs",
+                    "onUpdate:modelValue": e[25] || (e[25] = (a) => v("paddingTop", a, 0, 80)),
+                    onChange: e[26] || (e[26] = (a) => v("paddingTop", a.target.value, 0, 80, !0))
+                  }, null, 8, ["model-value"])
+                ]),
+                l("label", Tn, [
+                  e[86] || (e[86] = c("Below", -1)),
+                  o(x, {
+                    "model-value": t.selectedBlock.content.paddingBottom ?? (t.selectedBlock.type === "spacer" ? 0 : 16),
+                    type: "number",
+                    min: "0",
+                    max: "80",
+                    class: "mt-1 h-8 text-xs",
+                    "onUpdate:modelValue": e[27] || (e[27] = (a) => v("paddingBottom", a, 0, 80)),
+                    onChange: e[28] || (e[28] = (a) => v("paddingBottom", a.target.value, 0, 80, !0))
+                  }, null, 8, ["model-value"])
+                ])
+              ])
+            ])
+          ])),
+          o(ee)
+        ], 64)) : T("", !0),
+        e[118] || (e[118] = l("div", { class: "rounded-lg bg-muted/50 border border-border/50 p-3 mb-2" }, [
+          l("h4", { class: "mb-1 text-xs font-semibold" }, "Template design"),
+          l("p", { class: "text-[11px] text-muted-foreground leading-snug" }, [
+            c("These design settings apply to "),
+            l("strong", null, "this template"),
+            c(".")
+          ])
+        ], -1)),
+        l("div", null, [
+          e[89] || (e[89] = l("h4", { class: "mb-3 text-sm font-semibold" }, "Branding", -1)),
+          l("label", Vn, [
+            e[88] || (e[88] = c("Logo URL ", -1)),
+            o(x, {
+              modelValue: t.templateStyles.logoUrl,
+              "onUpdate:modelValue": [
+                e[29] || (e[29] = (a) => t.templateStyles.logoUrl = a),
+                m
+              ],
+              class: "mt-1.5 h-9 text-sm",
+              placeholder: "https://example.com/logo.png"
+            }, null, 8, ["modelValue"])
+          ]),
+          e[90] || (e[90] = l("p", { class: "mt-1.5 text-[11px] text-muted-foreground" }, "Appears above the email content. Leave empty to hide it.", -1))
+        ]),
+        l("div", null, [
+          e[101] || (e[101] = l("h4", { class: "text-sm font-semibold mb-3" }, "Colors", -1)),
+          l("div", Un, [
+            l("div", null, [
+              e[91] || (e[91] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Body Background", -1)),
+              l("div", Dn, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[30] || (e[30] = (a) => t.templateStyles.bodyBg = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.bodyBg]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.bodyBg,
+                  "onUpdate:modelValue": e[31] || (e[31] = (a) => t.templateStyles.bodyBg = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[92] || (e[92] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Content Background", -1)),
+              l("div", zn, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[32] || (e[32] = (a) => t.templateStyles.contentBg = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.contentBg]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.contentBg,
+                  "onUpdate:modelValue": e[33] || (e[33] = (a) => t.templateStyles.contentBg = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[93] || (e[93] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Footer Background", -1)),
+              l("div", In, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[34] || (e[34] = (a) => t.templateStyles.footerBg = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.footerBg]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.footerBg,
+                  "onUpdate:modelValue": e[35] || (e[35] = (a) => t.templateStyles.footerBg = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[94] || (e[94] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Footer Text Color", -1)),
+              l("div", Mn, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[36] || (e[36] = (a) => t.templateStyles.footerTextColor = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.footerTextColor]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.footerTextColor,
+                  "onUpdate:modelValue": e[37] || (e[37] = (a) => t.templateStyles.footerTextColor = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[95] || (e[95] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Primary / Button Color", -1)),
+              l("div", Ln, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[38] || (e[38] = (a) => t.templateStyles.primaryColor = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.primaryColor]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.primaryColor,
+                  "onUpdate:modelValue": e[39] || (e[39] = (a) => t.templateStyles.primaryColor = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[96] || (e[96] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Button Text Color", -1)),
+              l("div", An, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[40] || (e[40] = (a) => t.templateStyles.primaryForeground = a),
+                  "aria-label": "Button text color picker",
+                  class: "size-9 shrink-0 cursor-pointer rounded border",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.primaryForeground]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.primaryForeground,
+                  "onUpdate:modelValue": [
+                    e[41] || (e[41] = (a) => t.templateStyles.primaryForeground = a),
+                    m
+                  ],
+                  "aria-label": "Button text color",
+                  class: "h-9 flex-1 font-mono text-sm"
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[97] || (e[97] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Text Color", -1)),
+              l("div", Rn, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[42] || (e[42] = (a) => t.templateStyles.textColor = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.textColor]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.textColor,
+                  "onUpdate:modelValue": e[43] || (e[43] = (a) => t.templateStyles.textColor = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", null, [
+              e[98] || (e[98] = l("p", { class: "mb-1.5 text-xs font-medium text-muted-foreground" }, "Secondary Text Color", -1)),
+              l("div", jn, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[44] || (e[44] = (a) => t.templateStyles.secondaryTextColor = a),
+                  "aria-label": "Secondary text color picker",
+                  class: "size-9 shrink-0 cursor-pointer rounded border",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.secondaryTextColor]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.secondaryTextColor,
+                  "onUpdate:modelValue": [
+                    e[45] || (e[45] = (a) => t.templateStyles.secondaryTextColor = a),
+                    m
+                  ],
+                  "aria-label": "Secondary text color",
+                  class: "h-9 flex-1 font-mono text-sm"
+                }, null, 8, ["modelValue"])
+              ]),
+              e[99] || (e[99] = l("p", { class: "mt-1.5 text-[11px] text-muted-foreground" }, "Used for column labels and supporting text.", -1))
+            ]),
+            l("div", null, [
+              e[100] || (e[100] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Link Color", -1)),
+              l("div", En, [
+                G(l("input", {
+                  type: "color",
+                  "onUpdate:modelValue": e[46] || (e[46] = (a) => t.templateStyles.linkColor = a),
+                  class: "size-9 rounded border cursor-pointer",
+                  onInput: m
+                }, null, 544), [
+                  [ne, t.templateStyles.linkColor]
+                ]),
+                o(x, {
+                  modelValue: t.templateStyles.linkColor,
+                  "onUpdate:modelValue": e[47] || (e[47] = (a) => t.templateStyles.linkColor = a),
+                  class: "h-9 text-sm flex-1 font-mono",
+                  onInput: m
+                }, null, 8, ["modelValue"])
+              ])
+            ])
+          ])
+        ]),
+        o(ee),
+        l("div", null, [
+          e[110] || (e[110] = l("h4", { class: "text-sm font-semibold mb-3" }, "Typography", -1)),
+          l("div", Nn, [
+            l("div", null, [
+              e[109] || (e[109] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Font Family", -1)),
+              o(be, {
+                modelValue: t.templateStyles.fontFamily,
+                "onUpdate:modelValue": [
+                  e[48] || (e[48] = (a) => t.templateStyles.fontFamily = a),
+                  m
+                ]
+              }, {
+                default: p(() => [
+                  o(se, { class: "h-9 text-sm" }, {
+                    default: p(() => [
+                      o(oe)
+                    ]),
+                    _: 1
+                  }),
+                  o(F, null, {
+                    default: p(() => [
+                      o(J, { value: "Arial, Helvetica, sans-serif" }, {
+                        default: p(() => [...e[102] || (e[102] = [
+                          c("Arial", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "'Helvetica Neue', Helvetica, Arial, sans-serif" }, {
+                        default: p(() => [...e[103] || (e[103] = [
+                          c("Helvetica", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "Georgia, 'Times New Roman', serif" }, {
+                        default: p(() => [...e[104] || (e[104] = [
+                          c("Georgia", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "Verdana, Geneva, sans-serif" }, {
+                        default: p(() => [...e[105] || (e[105] = [
+                          c("Verdana", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "Tahoma, Geneva, sans-serif" }, {
+                        default: p(() => [...e[106] || (e[106] = [
+                          c("Tahoma", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "'Trebuchet MS', Helvetica, sans-serif" }, {
+                        default: p(() => [...e[107] || (e[107] = [
+                          c("Trebuchet MS", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(J, { value: "'Courier New', Courier, monospace" }, {
+                        default: p(() => [...e[108] || (e[108] = [
+                          c("Courier New", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ])
+        ]),
+        o(ee),
+        l("div", null, [
+          e[114] || (e[114] = l("h4", { class: "text-sm font-semibold mb-3" }, "Layout", -1)),
+          l("div", Hn, [
+            l("div", null, [
+              e[111] || (e[111] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Content Width", -1)),
+              l("div", Pn, [
+                G(l("input", {
+                  type: "range",
+                  "onUpdate:modelValue": e[49] || (e[49] = (a) => t.templateStyles.contentWidth = a),
+                  min: "400",
+                  max: "800",
+                  step: "10",
+                  class: "flex-1 accent-primary",
+                  onInput: m
+                }, null, 544), [
+                  [
+                    ne,
+                    t.templateStyles.contentWidth,
+                    void 0,
+                    { number: !0 }
+                  ]
+                ]),
+                l("span", Fn, $(t.templateStyles.contentWidth) + "px", 1)
+              ])
+            ]),
+            l("div", null, [
+              e[112] || (e[112] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Content Padding", -1)),
+              l("div", On, [
+                G(l("input", {
+                  type: "range",
+                  "onUpdate:modelValue": e[50] || (e[50] = (a) => t.templateStyles.contentPadding = a),
+                  min: "16",
+                  max: "64",
+                  step: "4",
+                  class: "flex-1 accent-primary",
+                  onInput: m
+                }, null, 544), [
+                  [
+                    ne,
+                    t.templateStyles.contentPadding,
+                    void 0,
+                    { number: !0 }
+                  ]
+                ]),
+                l("span", Wn, $(t.templateStyles.contentPadding) + "px", 1)
+              ])
+            ]),
+            l("div", null, [
+              e[113] || (e[113] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Border Radius", -1)),
+              l("div", Jn, [
+                G(l("input", {
+                  type: "range",
+                  "onUpdate:modelValue": e[51] || (e[51] = (a) => t.templateStyles.borderRadius = a),
+                  min: "0",
+                  max: "24",
+                  step: "2",
+                  class: "flex-1 accent-primary",
+                  onInput: m
+                }, null, 544), [
+                  [
+                    ne,
+                    t.templateStyles.borderRadius,
+                    void 0,
+                    { number: !0 }
+                  ]
+                ]),
+                l("span", qn, $(t.templateStyles.borderRadius) + "px", 1)
+              ])
+            ])
+          ])
+        ]),
+        o(ee),
+        l("div", null, [
+          e[117] || (e[117] = l("h4", { class: "text-sm font-semibold mb-3" }, "Footer", -1)),
+          l("div", Yn, [
+            l("div", null, [
+              e[115] || (e[115] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Footer Text", -1)),
+              o(ce, {
+                modelValue: t.templateStyles.footerText,
+                "onUpdate:modelValue": e[52] || (e[52] = (a) => t.templateStyles.footerText = a),
+                rows: "2",
+                class: "text-sm resize-none",
+                onInput: m
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", Kn, [
+              e[116] || (e[116] = l("label", { class: "text-sm" }, "Show Unsubscribe Link", -1)),
+              o(X, {
+                modelValue: t.templateStyles.showUnsubscribe,
+                "onUpdate:modelValue": [
+                  e[53] || (e[53] = (a) => t.templateStyles.showUnsubscribe = a),
+                  m
+                ]
+              }, null, 8, ["modelValue"])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+}), Qn = { class: "p-4 space-y-6" }, Zn = { class: "space-y-3" }, Xn = { class: "space-y-1.5" }, _n = ["onClick"], ea = { class: "text-xs font-mono flex-1" }, ta = { class: "space-y-2" }, la = { class: "text-[11px] text-muted-foreground/60" }, oa = /* @__PURE__ */ me({
+  __name: "SettingsPanel",
+  props: {
+    template: {},
+    templateStyles: {}
+  },
+  emits: ["update:hasUnsavedChanges", "reset-styles", "reset-template"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = () => f("update:hasUnsavedChanges", !0), B = j(() => !!et(i.template.name, i.template.system_key)), g = () => {
+      f("reset-styles", gl());
+      const v = et(i.template.name, i.template.system_key);
+      v && f("reset-template", v.blocks), f("update:hasUnsavedChanges", !0);
+    }, I = D(null), Y = async (v) => {
+      try {
+        await navigator.clipboard.writeText(v);
+      } catch {
+        return;
+      }
+      I.value = v, setTimeout(() => {
+        I.value === v && (I.value = null);
+      }, 1500);
+    }, V = [
+      "{{agency_name}}",
+      "{{user_name}}",
+      "{{user_email}}",
+      "{{dashboard_url}}",
+      "{{project_name}}",
+      "{{year}}",
+      "{{reset_url}}",
+      "{{invite_url}}",
+      "{{support_email}}",
+      "{{inviter_name}}",
+      "{{expires_at}}"
+    ];
+    return (v, b) => {
+      const C = U("Input"), H = U("Textarea"), k = U("Separator"), h = U("Button");
+      return s(), u("div", Qn, [
+        l("div", null, [
+          b[14] || (b[14] = l("h4", { class: "text-sm font-semibold mb-3" }, "Template Info", -1)),
+          l("div", Zn, [
+            l("div", null, [
+              b[6] || (b[6] = l("label", {
+                for: "email-template-name",
+                class: "mb-1.5 block text-xs font-medium text-muted-foreground"
+              }, "Name", -1)),
+              o(C, {
+                id: "email-template-name",
+                modelValue: t.template.name,
+                "onUpdate:modelValue": [
+                  b[0] || (b[0] = (e) => t.template.name = e),
+                  m
+                ],
+                class: "h-9 text-sm"
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", null, [
+              b[7] || (b[7] = l("label", {
+                for: "email-template-description",
+                class: "mb-1.5 block text-xs font-medium text-muted-foreground"
+              }, "Description", -1)),
+              o(H, {
+                id: "email-template-description",
+                modelValue: t.template.description,
+                "onUpdate:modelValue": [
+                  b[1] || (b[1] = (e) => t.template.description = e),
+                  m
+                ],
+                rows: "2",
+                class: "text-sm"
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", null, [
+              b[9] || (b[9] = l("label", {
+                for: "email-template-category",
+                class: "mb-1.5 block text-xs font-medium text-muted-foreground"
+              }, "Category", -1)),
+              G(l("select", {
+                id: "email-template-category",
+                "onUpdate:modelValue": b[2] || (b[2] = (e) => t.template.category = e),
+                class: "h-9 w-full rounded-md border bg-background px-2 text-sm",
+                onChange: m
+              }, [...b[8] || (b[8] = [
+                Ct('<option value="authentication">Authentication</option><option value="billing">Billing</option><option value="notifications">Notifications</option><option value="onboarding">Onboarding</option><option value="system">System</option>', 5)
+              ])], 544), [
+                [Me, t.template.category]
+              ])
+            ]),
+            l("div", null, [
+              b[11] || (b[11] = l("label", {
+                for: "email-template-status",
+                class: "mb-1.5 block text-xs font-medium text-muted-foreground"
+              }, "Status", -1)),
+              G(l("select", {
+                id: "email-template-status",
+                "onUpdate:modelValue": b[3] || (b[3] = (e) => t.template.status = e),
+                class: "h-9 w-full rounded-md border bg-background px-2 text-sm",
+                onChange: m
+              }, [...b[10] || (b[10] = [
+                l("option", { value: "draft" }, "Draft", -1),
+                l("option", { value: "active" }, "Active", -1),
+                l("option", { value: "inactive" }, "Inactive", -1)
+              ])], 544), [
+                [Me, t.template.status]
+              ])
+            ]),
+            l("div", null, [
+              b[12] || (b[12] = l("label", { class: "text-xs font-medium text-muted-foreground mb-1.5 block" }, "Subject", -1)),
+              o(C, {
+                modelValue: t.template.subject,
+                "onUpdate:modelValue": [
+                  b[4] || (b[4] = (e) => t.template.subject = e),
+                  m
+                ],
+                class: "h-9 text-sm"
+              }, null, 8, ["modelValue"]),
+              b[13] || (b[13] = l("p", { class: "text-[11px] text-muted-foreground/60 mt-1" }, [
+                c("Use "),
+                l("code", { class: "text-[10px] bg-muted px-1 py-0.5 rounded" }, "{{variables}}"),
+                c(" for dynamic content")
+              ], -1))
+            ])
+          ])
+        ]),
+        l("div", null, [
+          b[15] || (b[15] = l("label", {
+            for: "email-preheader",
+            class: "mb-1.5 block text-xs font-medium text-muted-foreground"
+          }, "Inbox preview text", -1)),
+          o(H, {
+            id: "email-preheader",
+            modelValue: t.template.preheader,
+            "onUpdate:modelValue": [
+              b[5] || (b[5] = (e) => t.template.preheader = e),
+              m
+            ],
+            rows: "2",
+            maxlength: "300",
+            class: "text-sm",
+            placeholder: "A short preview shown beside the subject…"
+          }, null, 8, ["modelValue"]),
+          b[16] || (b[16] = l("p", { class: "mt-1 text-[11px] text-muted-foreground" }, "Keep it short. Variables are supported.", -1))
+        ]),
+        o(k),
+        l("div", null, [
+          b[17] || (b[17] = l("h4", { class: "text-sm font-semibold mb-3" }, "Available Variables", -1)),
+          l("div", Xn, [
+            (s(), u(P, null, te(V, (e) => l("button", {
+              type: "button",
+              key: e,
+              class: ie(["w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-muted transition-all cursor-pointer group", I.value === e ? "bg-primary/10" : "bg-muted/50"]),
+              onClick: (x) => Y(e)
+            }, [
+              o(w(il), { class: "size-3 text-muted-foreground" }),
+              l("code", ea, $(e), 1),
+              o($t, {
+                name: "fade",
+                mode: "out-in"
+              }, {
+                default: p(() => [
+                  I.value === e ? (s(), N(w(He), {
+                    key: 0,
+                    class: "size-3 text-primary"
+                  })) : (s(), N(w(Oe), {
+                    key: 1,
+                    class: "size-3 text-muted-foreground/0 group-hover:text-muted-foreground transition-colors"
+                  }))
+                ]),
+                _: 2
+              }, 1024)
+            ], 10, _n)), 64))
+          ])
+        ]),
+        o(k),
+        l("div", null, [
+          b[19] || (b[19] = l("h4", { class: "text-sm font-semibold text-destructive mb-3" }, "Danger Zone", -1)),
+          l("div", ta, [
+            o(h, {
+              variant: "outline",
+              size: "sm",
+              class: "w-full justify-start gap-2 h-9 text-sm",
+              onClick: g
+            }, {
+              default: p(() => [
+                o(w(rl), { class: "size-3.5" }),
+                b[18] || (b[18] = c(" Reset to Default ", -1))
+              ]),
+              _: 1
+            }),
+            l("p", la, " Resets this template’s design" + $(B.value ? " and restores the template content." : "."), 1)
+          ])
+        ])
+      ]);
+    };
+  }
+}), na = {
+  class: "w-full min-w-0 xl:w-[300px] xl:shrink-0 border-t xl:border-t-0 xl:border-l bg-card flex flex-col",
+  "aria-label": "Email design and settings"
+}, aa = { class: "p-3 border-b" }, sa = /* @__PURE__ */ me({
+  __name: "RightSidebar",
+  props: {
+    template: {},
+    selectedBlock: {},
+    templateStyles: {}
+  },
+  emits: ["deselect-block", "update:hasUnsavedChanges", "reset-styles", "reset-template"],
+  setup(t, { emit: A }) {
+    const i = t, f = A, m = D("style");
+    return he(() => i.selectedBlock?.id, (B) => {
+      B && (m.value = "style");
+    }), (B, g) => {
+      const I = U("SegmentedControlButton"), Y = U("SegmentedControl"), V = U("ScrollArea");
+      return s(), u("aside", na, [
+        l("div", aa, [
+          o(Y, {
+            modelValue: m.value,
+            "onUpdate:modelValue": g[0] || (g[0] = (v) => m.value = v),
+            class: "w-full",
+            "aria-label": "Email settings panels"
+          }, {
+            default: p(() => [
+              o(I, {
+                value: "style",
+                class: "flex justify-center items-center gap-1.5"
+              }, {
+                default: p(() => [
+                  o(w(dl), { class: "size-3.5" }),
+                  g[6] || (g[6] = c(" Design ", -1))
+                ]),
+                _: 1
+              }),
+              o(I, {
+                value: "settings",
+                class: "flex justify-center items-center gap-1.5"
+              }, {
+                default: p(() => [
+                  o(w(ul), { class: "size-3.5" }),
+                  g[7] || (g[7] = c(" Settings ", -1))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        o(V, { class: "flex-1 min-h-0" }, {
+          default: p(() => [
+            m.value === "style" ? (s(), N(Gn, {
+              key: 0,
+              "selected-block": t.selectedBlock,
+              "template-styles": t.templateStyles,
+              onDeselectBlock: g[1] || (g[1] = (v) => f("deselect-block")),
+              "onUpdate:hasUnsavedChanges": g[2] || (g[2] = (v) => f("update:hasUnsavedChanges", v))
+            }, null, 8, ["selected-block", "template-styles"])) : m.value === "settings" ? (s(), N(oa, {
+              key: 1,
+              template: t.template,
+              "template-styles": t.templateStyles,
+              "onUpdate:hasUnsavedChanges": g[3] || (g[3] = (v) => f("update:hasUnsavedChanges", v)),
+              onResetStyles: g[4] || (g[4] = (v) => f("reset-styles", v)),
+              onResetTemplate: g[5] || (g[5] = (v) => f("reset-template", v))
+            }, null, 8, ["template", "template-styles"])) : T("", !0)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), ia = { class: "mail-builder -m-4 flex h-[calc(100dvh-8rem)] min-h-[500px] flex-col overflow-hidden" }, ra = {
+  key: 0,
+  class: "flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground"
+}, da = {
+  key: 1,
+  class: "flex flex-1 flex-col items-center justify-center gap-4"
+}, ua = {
+  key: 0,
+  class: "flex items-center justify-between gap-3 border-b bg-amber-500/10 px-4 py-2 text-xs",
+  role: "alert"
+}, ma = { class: "flex items-center justify-between border-b bg-card px-3 py-2 xl:hidden" }, ca = { class: "relative flex min-h-0 flex-1" }, pa = {
+  key: 0,
+  value: "duplicate"
+}, va = ["value"], ha = /* @__PURE__ */ me({
+  __name: "TemplateBuilder",
+  setup(t) {
+    const A = nt(), { hasPermission: i } = Tt(), f = Vt(), m = Ut();
+    Dt(() => []);
+    const B = j(() => i("edit-template")), g = j(() => i("create-template")), I = j(() => i("delete-template")), Y = () => A.get("/templates"), V = (d) => A.post("/templates", { body: d }), v = (d, n) => A.patch(`/templates/${encodeURIComponent(d)}`, { body: n }), b = (d, n) => d?.data?.statusMessage || d?.message || n, C = D(!0), H = D(""), k = D(""), h = D(null), e = D(null), x = D(!1), M = D([]), W = j(() => F.value?.styles ?? { ...Ue }), R = D({}), ee = D({}), oe = D(null), se = D(!1), J = D(!1), F = j(() => M.value.find((d) => d.id === h.value) ?? null), be = j(() => F.value?.blocks.find((d) => d.id === e.value) ?? null), ce = j(() => M.value.filter((d) => ke(d) !== R.value[d.id]).map((d) => d.id)), X = j(() => !C.value && !H.value && ce.value.length > 0), a = () => JSON.stringify({ templates: M.value });
+    let q = Ve(a());
+    const Q = D(0), we = j(() => (Q.value, q.canUndo)), De = j(() => (Q.value, q.canRedo));
+    let re, Se = !1;
+    function pe() {
+      clearTimeout(re), q.record(a()), Q.value++;
+    }
+    he(M, () => {
+      C.value || Se || (clearTimeout(re), re = setTimeout(pe, 400));
+    }, { deep: !0, flush: "sync" });
+    function Ce(d) {
+      if (!B.value) return;
+      pe();
+      const n = q[d]();
+      if (!n) return;
+      Se = !0;
+      const S = JSON.parse(n);
+      M.value = S.templates, M.value.some((O) => O.id === h.value) || (h.value = M.value[0]?.id ?? null), e.value = null, Se = !1, Q.value++;
+    }
+    function z(d) {
+      pe(), h.value = d, e.value = null, se.value = !1;
+    }
+    function r(d) {
+      e.value = d, J.value = !0;
+    }
+    function L(d) {
+      !F.value || !B.value || (pe(), d(F.value.blocks), pe());
+    }
+    function ve(d) {
+      const n = { id: crypto.randomUUID(), type: d, content: je(d) };
+      L((S) => {
+        const O = S.findIndex((le) => le.id === e.value);
+        S.splice(O < 0 ? S.length : O + 1, 0, n);
+      }), r(n.id);
+    }
+    function de(d) {
+      L((n) => {
+        const S = n.findIndex((O) => O.id === d);
+        S >= 0 && n.splice(S, 1);
+      }), e.value === d && (e.value = null);
+    }
+    function ue(d, n) {
+      L((S) => {
+        const O = S.findIndex((ge) => ge.id === d), le = O + (n === "up" ? -1 : 1);
+        O >= 0 && le >= 0 && le < S.length && ([S[O], S[le]] = [S[le], S[O]]);
+      });
+    }
+    function Ae(d, n) {
+      d !== n && L((S) => {
+        const O = S.findIndex((Te) => Te.id === d);
+        if (O < 0) return;
+        const [le] = S.splice(O, 1), ge = n ? S.findIndex((Te) => Te.id === n) : S.length;
+        S.splice(ge < 0 ? S.length : ge, 0, le);
+      });
+    }
+    function Re(d) {
+      L((n) => {
+        const S = n.findIndex((le) => le.id === d);
+        if (S < 0) return;
+        const O = { ...JSON.parse(JSON.stringify(n[S])), id: crypto.randomUUID() };
+        n.splice(S + 1, 0, O), e.value = O.id;
+      });
+    }
+    async function ze() {
+      if (x.value || !X.value || !B.value) return;
+      pe();
+      const d = JSON.parse(JSON.stringify(M.value.filter((n) => ce.value.includes(n.id))));
+      for (const n of d) {
+        const S = !n.name.trim() || !n.subject.trim() ? "Every template needs a name and subject." : null;
+        if (S) {
+          ae.error(S), z(n.id);
+          return;
+        }
+      }
+      x.value = !0;
+      try {
+        for (const n of d) {
+          const S = await v(n.id, { ...vt(n), updatedAt: ee.value[n.id] });
+          ee.value[n.id] = S.updatedAt, oe.value === n.id && (oe.value = null), R.value[n.id] = ke(n);
+        }
+        ae.success("All changes saved");
+      } catch (n) {
+        (n?.statusCode === 409 || n?.status === 409) && (oe.value = d.find((S) => ke(S) !== R.value[S.id])?.id ?? null), ae.error(b(n, "Could not save changes. Your drafts are still here."));
+      } finally {
+        x.value = !1;
+      }
+    }
+    const y = D(!1), Z = D(""), _ = D("blank"), xe = D(!1), Je = yl().filter((d) => !d.system_key);
+    function Ie(d = !1) {
+      Z.value = d && F.value ? `${F.value.name} copy` : "", _.value = d ? "duplicate" : "blank", y.value = !0;
+    }
+    async function bt() {
+      if (!Z.value.trim() || xe.value || !g.value) return;
+      xe.value = !0;
+      const d = _.value === "duplicate" ? F.value : Je.find((n) => n.name === _.value);
+      try {
+        const n = await V({
+          name: Z.value.trim(),
+          subject: d?.subject || Z.value.trim(),
+          preheader: d?.preheader || "",
+          description: d?.description || "",
+          category: d?.category || "notifications",
+          status: "draft",
+          styles: JSON.parse(JSON.stringify(d?.styles || Ue)),
+          blocks: (d?.blocks || [{ type: "header", content: je("header") }, { type: "text", content: je("text") }]).map((S) => ({ ...JSON.parse(JSON.stringify(S)), id: crypto.randomUUID() }))
+        });
+        M.value.push(n), R.value[n.id] = ke(n), ee.value[n.id] = n.updatedAt, clearTimeout(re), q = Ve(a()), Q.value++, z(n.id), y.value = !1, ae.success("Template created");
+      } catch (n) {
+        ae.error(b(n, "Could not create template"));
+      } finally {
+        xe.value = !1;
+      }
+    }
+    const $e = D(!1), Be = D(!1);
+    async function xt() {
+      if (!F.value || !I.value || Be.value) return;
+      const d = F.value.id;
+      Be.value = !0;
+      try {
+        await A.del(`/templates/${encodeURIComponent(d)}`), M.value = M.value.filter((n) => n.id !== d), delete R.value[d], delete ee.value[d], oe.value === d && (oe.value = null), h.value = M.value[0]?.id ?? null, e.value = null, clearTimeout(re), q = Ve(a()), Q.value++, $e.value = !1, ae.success("Template deleted");
+      } catch (n) {
+        ae.error(b(n, "Could not delete template"));
+      } finally {
+        Be.value = !1;
+      }
+    }
+    async function gt() {
+      const d = oe.value;
+      if (!(!d || !window.confirm("Reload the saved version? This discards your local changes to this template. You can duplicate or export your draft first.")))
+        try {
+          const n = await A.get(`/templates/${encodeURIComponent(d)}`), S = M.value.findIndex((O) => O.id === d);
+          if (S < 0) return;
+          M.value[S] = { ...n, styles: { ...Ue, ...n.styles } }, R.value[d] = ke(M.value[S]), ee.value[d] = n.updatedAt, oe.value = null, clearTimeout(re), q = Ve(a()), Q.value++;
+        } catch (n) {
+          ae.error(b(n, "Could not reload the template"));
+        }
+    }
+    function qe(d) {
+      X.value && (d.preventDefault(), d.returnValue = "");
+    }
+    function Ye(d) {
+      if (!(d.metaKey || d.ctrlKey) || d.altKey) return;
+      const n = d.key.toLowerCase();
+      if (n === "s") {
+        d.preventDefault(), ze();
+        return;
+      }
+      d.target.closest('input, textarea, [contenteditable="true"]') || (n === "z" || n === "y") && (d.preventDefault(), Ce(n === "y" || d.shiftKey ? "redo" : "undo"));
+    }
+    const yt = m.beforeEach((d, n) => d.fullPath === n.fullPath || !X.value || window.confirm("You have unsaved email changes. Leave without saving?"));
+    async function Ke() {
+      C.value = !0, H.value = "";
+      try {
+        const d = (await Y()).map((n) => ({ ...n, styles: { ...Ue, ...n.styles }, updated_at: n.updatedAt || n.updated_at }));
+        M.value = d, R.value = Object.fromEntries(d.map((n) => [n.id, ke(n)])), ee.value = Object.fromEntries(d.map((n) => [n.id, n.updatedAt])), h.value = d.find((n) => n.id === f.params.value.optionId)?.id ?? d[0]?.id ?? null, f.currentPath.value === "new" && g.value && Ie(), q = Ve(a()), Q.value++;
+      } catch (d) {
+        H.value = b(d, "Could not load templates. Check the module’s Firebase integration and collection settings.");
+      } finally {
+        C.value = !1;
+      }
+    }
+    return Bt(() => {
+      Ke(), window.addEventListener("beforeunload", qe), window.addEventListener("keydown", Ye);
+    }), ot(() => {
+      yt(), clearTimeout(re), window.removeEventListener("beforeunload", qe), window.removeEventListener("keydown", Ye);
+    }), (d, n) => {
+      const S = U("Button"), O = U("DialogTitle"), le = U("DialogDescription"), ge = U("DialogHeader"), Te = U("Input"), Ge = U("DialogFooter"), Qe = U("DialogContent"), Ze = U("Dialog");
+      return s(), u("div", ia, [
+        C.value ? (s(), u("div", ra, [
+          o(w(Ne), { class: "size-4 animate-spin" }),
+          n[18] || (n[18] = c(" Loading email workspace…", -1))
+        ])) : H.value ? (s(), u("div", da, [
+          l("p", null, $(H.value), 1),
+          o(S, { onClick: Ke }, {
+            default: p(() => [...n[19] || (n[19] = [
+              c("Try again", -1)
+            ])]),
+            _: 1
+          })
+        ])) : (s(), u(P, { key: 2 }, [
+          oe.value ? (s(), u("div", ua, [
+            n[21] || (n[21] = l("span", null, "A template changed elsewhere. Your local draft is intact; duplicate or export it to keep a copy.", -1)),
+            o(S, {
+              variant: "outline",
+              size: "sm",
+              onClick: gt
+            }, {
+              default: p(() => [...n[20] || (n[20] = [
+                c("Reload latest", -1)
+              ])]),
+              _: 1
+            })
+          ])) : T("", !0),
+          l("div", ma, [
+            o(S, {
+              variant: "outline",
+              size: "sm",
+              onClick: n[0] || (n[0] = (E) => {
+                se.value = !se.value, J.value = !1;
+              })
+            }, {
+              default: p(() => [
+                o(w(ml), { class: "size-4" }),
+                n[22] || (n[22] = c(" Templates", -1))
+              ]),
+              _: 1
+            }),
+            F.value && B.value ? (s(), N(S, {
+              key: 0,
+              variant: "outline",
+              size: "sm",
+              onClick: n[1] || (n[1] = (E) => {
+                J.value = !J.value, se.value = !1;
+              })
+            }, {
+              default: p(() => [
+                o(w(cl), { class: "size-4" }),
+                c(" " + $(be.value ? "Edit block" : "Design"), 1)
+              ]),
+              _: 1
+            })) : T("", !0)
+          ]),
+          l("div", ca, [
+            l("div", {
+              class: ie(se.value ? "absolute inset-0 z-30 bg-card xl:static" : "hidden xl:flex")
+            }, [
+              o(jl, {
+                templates: M.value,
+                "selected-template-id": h.value,
+                "dirty-template-ids": ce.value,
+                "can-create": g.value,
+                "search-query": k.value,
+                "onUpdate:searchQuery": n[2] || (n[2] = (E) => k.value = E),
+                onSelect: z,
+                onCreate: n[3] || (n[3] = (E) => Ie())
+              }, null, 8, ["templates", "selected-template-id", "dirty-template-ids", "can-create", "search-query"])
+            ], 2),
+            o(Eo, {
+              template: F.value,
+              "selected-block-id": e.value,
+              "template-styles": W.value,
+              saving: x.value,
+              "has-unsaved-changes": X.value,
+              "can-undo": we.value,
+              "can-redo": De.value,
+              "dirty-count": ce.value.length,
+              "can-edit": B.value,
+              "can-create": g.value,
+              "can-delete": I.value,
+              onSelectBlock: r,
+              onAddBlock: ve,
+              onMoveBlock: ue,
+              onReorderBlock: Ae,
+              onDuplicateBlock: Re,
+              onDeleteBlock: de,
+              onSave: ze,
+              onUndo: n[4] || (n[4] = (E) => Ce("undo")),
+              onRedo: n[5] || (n[5] = (E) => Ce("redo")),
+              onDuplicateTemplate: n[6] || (n[6] = (E) => Ie(!0)),
+              onCreate: n[7] || (n[7] = (E) => Ie()),
+              onDeleteTemplate: n[8] || (n[8] = (E) => $e.value = !0)
+            }, null, 8, ["template", "selected-block-id", "template-styles", "saving", "has-unsaved-changes", "can-undo", "can-redo", "dirty-count", "can-edit", "can-create", "can-delete"]),
+            F.value && B.value ? (s(), u("div", {
+              key: 0,
+              class: ie(J.value ? "absolute inset-0 z-20 overflow-auto bg-card xl:static xl:flex" : "hidden xl:flex")
+            }, [
+              o(sa, {
+                template: F.value,
+                "selected-block": be.value,
+                "template-styles": W.value,
+                onDeselectBlock: n[9] || (n[9] = (E) => e.value = null),
+                onResetStyles: n[10] || (n[10] = (E) => Object.assign(W.value, E)),
+                onResetTemplate: n[11] || (n[11] = (E) => {
+                  F.value && (F.value.blocks = E);
+                })
+              }, null, 8, ["template", "selected-block", "template-styles"])
+            ], 2)) : T("", !0)
+          ])
+        ], 64)),
+        o(Ze, {
+          open: y.value,
+          "onUpdate:open": n[15] || (n[15] = (E) => y.value = E)
+        }, {
+          default: p(() => [
+            o(Qe, { class: "sm:max-w-md" }, {
+              default: p(() => [
+                o(ge, null, {
+                  default: p(() => [
+                    o(O, null, {
+                      default: p(() => [...n[23] || (n[23] = [
+                        c("New email template", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(le, null, {
+                      default: p(() => [...n[24] || (n[24] = [
+                        c("Start fresh, use a starter, or make a copy of your current design.", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                l("form", {
+                  class: "space-y-4",
+                  onSubmit: ye(bt, ["prevent"])
+                }, [
+                  l("div", null, [
+                    n[25] || (n[25] = l("label", {
+                      for: "template-name",
+                      class: "mb-1.5 block text-sm font-medium"
+                    }, "Template name", -1)),
+                    o(Te, {
+                      id: "template-name",
+                      modelValue: Z.value,
+                      "onUpdate:modelValue": n[12] || (n[12] = (E) => Z.value = E),
+                      placeholder: "e.g. Product announcement",
+                      maxlength: "120",
+                      required: ""
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  l("div", null, [
+                    n[27] || (n[27] = l("label", {
+                      for: "template-starter",
+                      class: "mb-1.5 block text-sm font-medium"
+                    }, "Start from", -1)),
+                    G(l("select", {
+                      id: "template-starter",
+                      "onUpdate:modelValue": n[13] || (n[13] = (E) => _.value = E),
+                      class: "h-10 w-full rounded-md border bg-background px-3 text-sm"
+                    }, [
+                      n[26] || (n[26] = l("option", { value: "blank" }, "Blank email", -1)),
+                      F.value ? (s(), u("option", pa, "Copy of " + $(F.value.name), 1)) : T("", !0),
+                      (s(!0), u(P, null, te(w(Je), (E) => (s(), u("option", {
+                        key: E.name,
+                        value: E.name
+                      }, $(E.name), 9, va))), 128))
+                    ], 512), [
+                      [Me, _.value]
+                    ])
+                  ]),
+                  o(Ge, null, {
+                    default: p(() => [
+                      o(S, {
+                        type: "button",
+                        variant: "outline",
+                        onClick: n[14] || (n[14] = (E) => y.value = !1)
+                      }, {
+                        default: p(() => [...n[28] || (n[28] = [
+                          c("Cancel", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      o(S, {
+                        type: "submit",
+                        disabled: xe.value || !Z.value.trim()
+                      }, {
+                        default: p(() => [
+                          c($(xe.value ? "Creating…" : "Create template"), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["disabled"])
+                    ]),
+                    _: 1
+                  })
+                ], 32)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"]),
+        o(Ze, {
+          open: $e.value,
+          "onUpdate:open": n[17] || (n[17] = (E) => $e.value = E)
+        }, {
+          default: p(() => [
+            o(Qe, { class: "sm:max-w-md" }, {
+              default: p(() => [
+                o(ge, null, {
+                  default: p(() => [
+                    o(O, null, {
+                      default: p(() => [
+                        c("Delete " + $(F.value?.name) + "?", 1)
+                      ]),
+                      _: 1
+                    }),
+                    o(le, null, {
+                      default: p(() => [...n[29] || (n[29] = [
+                        c("This permanently removes the saved template from the configured collection.", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                o(Ge, null, {
+                  default: p(() => [
+                    o(S, {
+                      variant: "outline",
+                      onClick: n[16] || (n[16] = (E) => $e.value = !1)
+                    }, {
+                      default: p(() => [...n[30] || (n[30] = [
+                        c("Cancel", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    o(S, {
+                      variant: "destructive",
+                      disabled: Be.value,
+                      onClick: xt
+                    }, {
+                      default: p(() => [
+                        c($(Be.value ? "Deleting…" : "Delete template"), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open"])
+      ]);
+    };
+  }
+});
+export {
+  ha as _
+};