best-email-builder 0.13.0 → 0.14.0

package/dist/{chunk-G7G3TRWG.js → chunk-2ZRGQFX6.js}

@@ -6,17 +6,17 @@ import {
   useLayoutWidth,
   useSearchShortcut,
   withThumbnailImages
-} from "./chunk-LSOR4OII.js";
+} from "./chunk-NEEOZR5C.js";
 import {
   BRAND_NOTES,
   countImagesWithoutPicture,
   logoWidthFor
-} from "./chunk-Q2ZUJFOY.js";
+} from "./chunk-VHTV32EW.js";
 import {
   cleanRichText,
   escapeText,
   textOfHtml
-} from "./chunk-UGF3YJ64.js";
+} from "./chunk-7JJ4EZAZ.js";
 import {
   Button,
   Dialog,
@@ -51,7 +51,7 @@ import {
   createHttpStorage,
   useT,
   useUi
-} from "./chunk-6QTSXJG4.js";
+} from "./chunk-O2A2DPFJ.js";
 import {
   DEFAULT_BUTTON_URL,
   EMAIL_BUILDER_VERSION,
@@ -94,10 +94,10 @@ import {
   setAttributes,
   setContent,
   toProject
-} from "./chunk-Q5UPFM7J.js";
+} from "./chunk-SAYIBNH5.js";
 import {
   isSafeUrl
-} from "./chunk-A4KF7NMP.js";
+} from "./chunk-R3DWMSSR.js";
 import {
   CUSTOM_GROUP,
   DEFAULT_VARIABLES,
@@ -110,7 +110,7 @@ import {
   tokenOf,
   translatorFor,
   validateCustomVariable
-} from "./chunk-ZTUW25BG.js";
+} from "./chunk-SYEUC7I2.js";
 
 // src/core/events.js
 function createEmitter({ onError } = {}) {
@@ -1113,7 +1113,7 @@ function createStarterMjml({ sender = {}, buttonUrl = DEFAULT_BUTTON_URL, t = id
     `<mj-section background-color="${PALETTE.surface}" padding-top="8px" padding-bottom="28px">`,
     "<mj-column>",
     `<mj-text ${TEXT} font-size="24px" line-height="32px" font-weight="bold" ${SIDE}>${escapeXml2(t("Your headline"))}</mj-text>`,
-    `<mj-text ${TEXT} font-size="15px" line-height="24px" ${SIDE}>${escapeXml2(t("Hello {name},", { name: "{{contact.firstname}}" }))}<br /><br />${escapeXml2(t("Your text."))}</mj-text>`,
+    `<mj-text ${TEXT} font-size="15px" line-height="24px" ${SIDE}>${escapeXml2(t("Hello,"))}<br /><br />${escapeXml2(t("Your text."))}</mj-text>`,
     `<mj-button href="${escapeXml2(buttonUrl)}" background-color="${PALETTE.navy}" color="${PALETTE.white}" font-family="${FONT_STACK}" font-size="15px" font-weight="bold" border-radius="6px" inner-padding="12px 28px" align="left" ${SIDE}>${escapeXml2(t("Learn more"))}</mj-button>`,
     "</mj-column>",
     "</mj-section>",
@@ -1223,7 +1223,7 @@ var TEMPLATE_GALLERY = [
     create: ({ sender, t }) => email(
       header(sender, t) + section(
         column(
-          heading(esc(t("Welcome, {name}!", { name: "{{contact.firstname}}" })), { size: 28 }) + paragraph(esc(t("Thank you for joining us. Here is how to get the most out of your account.")))
+          heading(esc(t("Welcome aboard!")), { size: 28 }) + paragraph(esc(t("Thank you for joining us. Here is how to get the most out of your account.")))
         ),
         { top: 16, bottom: 8 }
       ) + section(
@@ -1438,112 +1438,20 @@ var versionsFeature = {
 };
 
 // src/features/variables/VariablesBar.jsx
-import { useId, useState as useState2 } from "react";
-import { Braces, ChevronDown } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function VariablesBar({ context }) {
-  const { editor, ready, variables } = context;
-  const { t, notify } = useUi();
-  const [hovered, setHovered] = useState2(false);
-  const [open, setOpen] = useState2(false);
-  const listId = useId();
-  const fields = variables.filter((v) => v.kind !== "link");
-  if (!fields.length) return null;
-  const expanded = hovered || open;
-  const insert = (variable) => {
-    if (!editor.insertText(tokenOf(variable))) notify("info", t("Select a text or a button first."));
-  };
-  return /* @__PURE__ */ jsx2("div", { className: "eb:relative eb:z-10 eb:h-6 eb:shrink-0", "data-testid": "eb-variables-bar", children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "eb:absolute eb:inset-x-0 eb:top-0 eb:border-b eb:border-border eb:bg-background eb:transition-shadow",
-        expanded && "eb:shadow-md"
-      ),
-      "data-expanded": expanded,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onKeyDown: (e) => e.key === "Escape" && open && setOpen(false),
-      onMouseDown: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsxs2(
-          "button",
-          {
-            type: "button",
-            "aria-expanded": expanded,
-            "aria-controls": listId,
-            onClick: () => setOpen((value) => !value),
-            className: "eb:flex eb:h-6 eb:w-full eb:items-center eb:gap-1.5 eb:px-3 eb:text-[11px] eb:font-medium eb:text-foreground-lighter eb:outline-none eb:hover:text-foreground eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40 eb:focus-visible:ring-inset",
-            children: [
-              /* @__PURE__ */ jsx2(Braces, { className: "eb:size-3", "aria-hidden": "true" }),
-              t("Personalization fields"),
-              /* @__PURE__ */ jsx2("span", { className: "eb:text-foreground-muted", children: fields.length }),
-              /* @__PURE__ */ jsx2(ChevronDown, { className: cn("eb:ml-auto eb:size-3.5 eb:transition-transform", expanded && "eb:rotate-180"), "aria-hidden": "true" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            id: listId,
-            className: cn(
-              "eb:grid eb:transition-[grid-template-rows,visibility] eb:duration-200 eb:ease-out",
-              expanded ? "eb:visible eb:grid-rows-[1fr]" : "eb:invisible eb:grid-rows-[0fr]"
-            ),
-            children: /* @__PURE__ */ jsx2("div", { className: "eb:min-h-0 eb:overflow-hidden", children: /* @__PURE__ */ jsx2(
-              "div",
-              {
-                role: "group",
-                "aria-label": t("Personalization fields"),
-                className: "eb:flex eb:max-h-24 eb:flex-wrap eb:gap-1 eb:overflow-y-auto eb:px-3 eb:pt-0.5 eb:pb-2",
-                children: fields.map((variable) => /* @__PURE__ */ jsx2(
-                  TooltipWrap,
-                  {
-                    label: /* @__PURE__ */ jsx2("code", { className: "eb:font-mono", children: tokenOf(variable) }),
-                    delayDuration: 100,
-                    hoverable: false,
-                    children: /* @__PURE__ */ jsx2(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: !ready,
-                        "data-variable": variable.key,
-                        onMouseEnter: () => editor.previewText(tokenOf(variable)),
-                        onMouseLeave: () => editor.clearPreview(),
-                        onFocus: () => editor.previewText(tokenOf(variable)),
-                        onBlur: () => editor.clearPreview(),
-                        onClick: () => insert(variable),
-                        className: "eb:inline-flex eb:h-5.5 eb:items-center eb:rounded-full eb:border eb:border-border eb:bg-surface-75 eb:px-2 eb:text-[11px] eb:font-medium eb:text-foreground eb:transition-colors eb:outline-none eb:hover:border-primary/50 eb:hover:bg-primary/5 eb:hover:text-primary eb:focus-visible:ring-2 eb:focus-visible:ring-ring/50 eb:disabled:opacity-50",
-                        children: variable.custom ? variable.label : t(variable.label)
-                      }
-                    )
-                  },
-                  variable.key
-                ))
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  ) });
-}
-
-// src/features/variables/VariablesMenu.jsx
-import { useState as useState5 } from "react";
-import { Braces as Braces3 } from "lucide-react";
+import { Fragment, useId, useState as useState3 } from "react";
+import { Braces as Braces2, ChevronDown, Link2, Pencil, Plus } from "lucide-react";
 
 // src/features/variables/VariableDialog.jsx
-import { useEffect, useMemo, useState as useState3 } from "react";
-import { Braces as Braces2, Loader2, Trash2 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect, useMemo, useState as useState2 } from "react";
+import { Braces, Loader2, Trash2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function VariableDialog({ open, onOpenChange, variable = null, initialLabel = "", variables, storage, onSaved, onDeleted }) {
   const { t, notify, confirm } = useUi();
   const editing = Boolean(variable);
-  const [form, setForm] = useState3({ label: "", key: "", group: "", sample: "", fallback: "" });
-  const [keyTouched, setKeyTouched] = useState3(false);
-  const [errors, setErrors] = useState3({});
-  const [busy, setBusy] = useState3(false);
+  const [form, setForm] = useState2({ label: "", key: "", group: "", sample: "", fallback: "" });
+  const [keyTouched, setKeyTouched] = useState2(false);
+  const [errors, setErrors] = useState2({});
+  const [busy, setBusy] = useState2(false);
   useEffect(() => {
     if (!open) return;
     setForm(
@@ -1610,9 +1518,9 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
       setBusy(false);
     }
   };
-  const field = (name, label, props = {}, hint = null) => /* @__PURE__ */ jsxs3("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx3(Label, { htmlFor: `eb-var-${name}`, children: label }),
-    /* @__PURE__ */ jsx3(
+  const field = (name, label, props = {}, hint = null) => /* @__PURE__ */ jsxs2("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx2(Label, { htmlFor: `eb-var-${name}`, children: label }),
+    /* @__PURE__ */ jsx2(
       Input,
       {
         id: `eb-var-${name}`,
@@ -1623,23 +1531,23 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
         ...props
       }
     ),
-    (errors[name] || hint) && /* @__PURE__ */ jsx3("p", { id: `eb-var-${name}-hint`, className: errors[name] ? "eb:text-[12px] eb:text-destructive" : "eb:text-[11px] eb:text-foreground-muted", children: errors[name] || hint })
+    (errors[name] || hint) && /* @__PURE__ */ jsx2("p", { id: `eb-var-${name}-hint`, className: errors[name] ? "eb:text-[12px] eb:text-destructive" : "eb:text-[11px] eb:text-foreground-muted", children: errors[name] || hint })
   ] });
-  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
     DialogContent,
     {
       className: "eb:sm:max-w-[440px]",
       onMouseDown: (e) => e.stopPropagation(),
       onCloseAutoFocus: (e) => e.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx3(DialogHeader, { children: /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-          /* @__PURE__ */ jsx3("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx3(Braces2, { className: "eb:size-5" }) }),
-          /* @__PURE__ */ jsxs3("div", { children: [
-            /* @__PURE__ */ jsx3(DialogTitle, { className: "eb:text-base eb:font-normal", children: editing ? t("Edit variable") : t("New variable") }),
-            /* @__PURE__ */ jsx3(DialogDescription, { className: "eb:text-[13px]", children: t("Available in every template.") })
+        /* @__PURE__ */ jsx2(DialogHeader, { children: /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+          /* @__PURE__ */ jsx2("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx2(Braces, { className: "eb:size-5" }) }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(DialogTitle, { className: "eb:text-base eb:font-normal", children: editing ? t("Edit variable") : t("New variable") }),
+            /* @__PURE__ */ jsx2(DialogDescription, { className: "eb:text-[13px]", children: t("Available in every template.") })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxs3("form", { onSubmit: submit, className: "eb:space-y-3", noValidate: true, children: [
+        /* @__PURE__ */ jsxs2("form", { onSubmit: submit, className: "eb:space-y-3", noValidate: true, children: [
           field("label", t("Name"), { autoFocus: true, maxLength: VARIABLE_LIMITS.label, placeholder: t("Order number") }),
           field(
             "key",
@@ -1647,9 +1555,9 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
             { disabled: editing, maxLength: VARIABLE_LIMITS.key, className: "eb:font-mono eb:text-[12px]" },
             form.key ? `{{${form.key}}}` : null
           ),
-          /* @__PURE__ */ jsxs3("div", { className: "eb:space-y-1.5", children: [
-            /* @__PURE__ */ jsx3(Label, { htmlFor: "eb-var-group", children: t("Group") }),
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs2("div", { className: "eb:space-y-1.5", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: "eb-var-group", children: t("Group") }),
+            /* @__PURE__ */ jsx2(
               Input,
               {
                 id: "eb-var-group",
@@ -1660,21 +1568,21 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
                 placeholder: t(CUSTOM_GROUP)
               }
             ),
-            /* @__PURE__ */ jsx3("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx3("option", { value: g }, g)) })
+            /* @__PURE__ */ jsx2("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx2("option", { value: g }, g)) })
           ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "eb:grid eb:grid-cols-2 eb:gap-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "eb:grid eb:grid-cols-2 eb:gap-3", children: [
             field("sample", t("Sample value"), { maxLength: VARIABLE_LIMITS.sample, placeholder: "CMD-1042" }, t("Preview and tests")),
             field("fallback", t("Value if empty"), { maxLength: VARIABLE_LIMITS.fallback }, t("When a recipient has none"))
           ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:items-center eb:gap-2 eb:pt-1", children: [
-            editing && /* @__PURE__ */ jsxs3(Button, { variant: "ghost", className: "eb:text-destructive eb:hover:text-destructive", onClick: remove, disabled: busy, children: [
-              /* @__PURE__ */ jsx3(Trash2, {}),
+          /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:gap-2 eb:pt-1", children: [
+            editing && /* @__PURE__ */ jsxs2(Button, { variant: "ghost", className: "eb:text-destructive eb:hover:text-destructive", onClick: remove, disabled: busy, children: [
+              /* @__PURE__ */ jsx2(Trash2, {}),
               t("Delete")
             ] }),
-            /* @__PURE__ */ jsxs3("div", { className: "eb:ml-auto eb:flex eb:gap-2", children: [
-              /* @__PURE__ */ jsx3(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t("Cancel") }),
-              /* @__PURE__ */ jsxs3(Button, { type: "submit", disabled: busy, children: [
-                busy && /* @__PURE__ */ jsx3(Loader2, { className: "eb:animate-spin" }),
+            /* @__PURE__ */ jsxs2("div", { className: "eb:ml-auto eb:flex eb:gap-2", children: [
+              /* @__PURE__ */ jsx2(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t("Cancel") }),
+              /* @__PURE__ */ jsxs2(Button, { type: "submit", disabled: busy, children: [
+                busy && /* @__PURE__ */ jsx2(Loader2, { className: "eb:animate-spin" }),
                 editing ? t("Save") : t("Create")
               ] })
             ] })
@@ -1685,199 +1593,137 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
   ) });
 }
 
-// src/features/variables/VariablePicker.jsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState4 } from "react";
-import { Pencil, Plus, Search } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, filter }) {
-  const t = useT();
-  const [query, setQuery] = useState4("");
-  const [active, setActive] = useState4(0);
-  const listRef = useRef(null);
-  const searchRef = useRef(
-    /** @type {HTMLInputElement|null} */
-    null
-  );
-  useSearchShortcut(searchRef);
-  const matches = useMemo2(() => {
-    const q = query.trim().toLowerCase();
-    return variables.filter((v) => filter ? filter(v) : true).filter(
-      (v) => !q || t(v.label).toLowerCase().includes(q) || v.key.toLowerCase().includes(q) || t(v.group).toLowerCase().includes(q)
-    );
-  }, [variables, query, filter, t]);
-  const groups = useMemo2(() => [...new Set(matches.map((v) => v.group))], [matches]);
-  const ordered = useMemo2(() => groups.flatMap((g) => matches.filter((v) => v.group === g)), [groups, matches]);
-  useEffect2(() => setActive(0), [query]);
-  useEffect2(() => {
-    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
-  }, [active]);
-  const onKeyDown = (e) => {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setActive((i) => Math.min(i + 1, ordered.length - 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setActive((i) => Math.max(i - 1, 0));
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (ordered[active]) onPick(ordered[active]);
-      else if (onCreate && query.trim()) onCreate(query.trim());
-    }
+// src/features/variables/VariablesBar.jsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var BADGE = "eb:inline-flex eb:h-5.5 eb:items-center eb:gap-1 eb:rounded-full eb:border eb:border-border eb:bg-surface-75 eb:px-2 eb:text-[11px] eb:font-medium eb:text-foreground eb:transition-colors eb:outline-none eb:hover:border-primary/50 eb:hover:bg-primary/5 eb:hover:text-primary eb:focus-visible:ring-2 eb:focus-visible:ring-ring/50 eb:disabled:opacity-50";
+function VariablesBar({ context }) {
+  const { editor, ready, variables, storage, canManageVariables, reloadVariables } = context;
+  const { t, notify } = useUi();
+  const [hovered, setHovered] = useState3(false);
+  const [open, setOpen] = useState3(false);
+  const [dialog, setDialog] = useState3(null);
+  const listId = useId();
+  if (!variables.length && !canManageVariables) return null;
+  const expanded = hovered || open;
+  const fields = variables.filter((v) => v.kind !== "link");
+  const links = variables.filter((v) => v.kind === "link");
+  const insert = (variable) => {
+    const done = variable.kind === "link" ? editor.insertLink(tokenOf(variable), t("Unsubscribe")) : editor.insertText(tokenOf(variable));
+    if (!done) notify("info", t("Select a text or a button first."));
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:max-h-[min(440px,70vh)] eb:flex-col", "data-testid": "variable-picker", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "eb:relative eb:border-b eb:border-border eb:p-2", children: [
-      /* @__PURE__ */ jsx4(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-4 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
-      /* @__PURE__ */ jsx4(
-        "input",
-        {
-          ref: searchRef,
-          autoFocus: true,
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          onKeyDown,
-          placeholder: t("Search variables\u2026"),
-          "aria-label": t("Search variables\u2026"),
-          "aria-keyshortcuts": SEARCH_KEYS,
-          className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-14 eb:pl-7 eb:text-[13px] eb:text-foreground eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40"
-        }
-      ),
-      /* @__PURE__ */ jsx4(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-4 eb:-translate-y-1/2" })
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { ref: listRef, role: "listbox", "aria-label": t("Variables"), className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: [
-      ordered.length === 0 && /* @__PURE__ */ jsxs4("div", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: [
-        /* @__PURE__ */ jsx4("p", { children: t("No variable found.") }),
-        onCreate && query.trim() && /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            type: "button",
-            onClick: () => onCreate(query.trim()),
-            className: "eb:mt-2 eb:inline-flex eb:items-center eb:gap-1 eb:rounded-md eb:px-2 eb:py-1 eb:text-[12px] eb:font-medium eb:text-primary eb:hover:bg-accent",
-            children: [
-              /* @__PURE__ */ jsx4(Plus, { className: "eb:size-3.5" }),
-              t("Create \u201C{name}\u201D", { name: query.trim() })
-            ]
-          }
-        )
-      ] }),
-      groups.map((group) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": t(group), children: [
-        /* @__PURE__ */ jsx4("p", { className: "eb:px-2 eb:pt-2 eb:pb-1 eb:text-[11px] eb:text-foreground-muted", children: t(group) }),
-        ordered.filter((v) => v.group === group).map((variable) => {
-          const index = ordered.indexOf(variable);
-          return /* @__PURE__ */ jsxs4(
-            "div",
-            {
-              "data-active": index === active,
-              className: cn(
-                "eb:group/var eb:flex eb:items-center eb:gap-1 eb:rounded-md",
-                index === active ? "eb:bg-accent eb:text-accent-foreground" : "eb:hover:bg-accent/60"
-              ),
-              onMouseEnter: () => setActive(index),
-              children: [
-                /* @__PURE__ */ jsxs4(
-                  "button",
-                  {
-                    type: "button",
-                    role: "option",
-                    "aria-selected": index === active,
-                    "data-variable": variable.key,
-                    onClick: () => onPick(variable),
-                    className: "eb:flex eb:min-w-0 eb:flex-1 eb:items-center eb:gap-2 eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px]",
-                    title: variable.description || void 0,
-                    children: [
-                      /* @__PURE__ */ jsx4("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate", children: variable.custom ? variable.label : t(variable.label) }),
-                      /* @__PURE__ */ jsx4("code", { className: "eb:shrink-0 eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: tokenOf(variable) })
-                    ]
-                  }
-                ),
-                onEdit && variable.custom && /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": t("Edit \u201C{name}\u201D", { name: variable.label }),
-                    title: t("Edit"),
-                    onClick: () => onEdit(variable),
-                    className: "eb:mr-1 eb:flex eb:size-6 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-md eb:text-foreground-muted eb:opacity-0 eb:group-hover/var:opacity-100 eb:hover:bg-background eb:hover:text-foreground eb:focus-visible:opacity-100",
-                    children: /* @__PURE__ */ jsx4(Pencil, { className: "eb:size-3" })
-                  }
-                )
-              ]
-            },
-            variable.key
-          );
-        })
-      ] }, group))
-    ] }),
-    onCreate && /* @__PURE__ */ jsx4("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs4(
+  const badge = (variable) => {
+    const link2 = variable.kind === "link";
+    const label = variable.custom ? variable.label : t(variable.label);
+    const editable = canManageVariables && variable.custom;
+    const button2 = /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
-        onClick: () => onCreate(query.trim()),
-        className: "eb:flex eb:w-full eb:items-center eb:gap-2 eb:rounded-md eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px] eb:font-medium eb:text-primary eb:hover:bg-accent",
+        disabled: !ready,
+        "data-variable": variable.key,
+        onMouseEnter: link2 ? void 0 : () => editor.previewText(tokenOf(variable)),
+        onMouseLeave: link2 ? void 0 : () => editor.clearPreview(),
+        onFocus: link2 ? void 0 : () => editor.previewText(tokenOf(variable)),
+        onBlur: link2 ? void 0 : () => editor.clearPreview(),
+        onClick: () => insert(variable),
+        className: cn(BADGE, editable && "eb:rounded-r-none eb:border-r-0 eb:pr-1.5"),
         children: [
-          /* @__PURE__ */ jsx4(Plus, { className: "eb:size-4" }),
-          t("New variable")
+          link2 && /* @__PURE__ */ jsx3(Link2, { className: "eb:size-3", "aria-hidden": "true" }),
+          label
         ]
       }
-    ) })
-  ] });
-}
-
-// src/features/variables/VariablesMenu.jsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function VariablesMenu({ context }) {
-  const { editor, ready, variables, storage, canManageVariables, reloadVariables } = context;
-  const { t, notify } = useUi();
-  const [open, setOpen] = useState5(false);
-  const [dialog, setDialog] = useState5(null);
-  const insert = (variable) => {
-    setOpen(false);
-    const done = variable.kind === "link" ? editor.insertLink(tokenOf(variable), t("Unsubscribe")) : editor.insertText(tokenOf(variable));
-    if (!done) notify("info", t("Select a text or a button first."));
-    return done;
-  };
-  const manage = canManageVariables ? {
-    onCreate: (label) => {
-      setOpen(false);
-      setDialog({ variable: null, label });
-    },
-    onEdit: (variable) => {
-      setOpen(false);
-      setDialog({ variable, label: "" });
-    }
-  } : {};
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
-        Button,
-        {
-          variant: "outline",
-          size: "sm-compact",
-          disabled: !ready,
-          onPointerDown: (e) => e.pointerType === "mouse" && e.preventDefault(),
-          children: [
-            /* @__PURE__ */ jsx5(Braces3, {}),
-            t("Variables")
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx5(
-        PopoverContent,
+    );
+    const tip = /* @__PURE__ */ jsx3(TooltipWrap, { label: /* @__PURE__ */ jsx3("code", { className: "eb:font-mono", children: tokenOf(variable) }), delayDuration: 100, hoverable: false, children: button2 });
+    if (!editable) return /* @__PURE__ */ jsx3(Fragment, { children: tip }, variable.key);
+    return /* @__PURE__ */ jsxs3("span", { className: "eb:inline-flex", children: [
+      tip,
+      /* @__PURE__ */ jsx3(
+        "button",
         {
-          align: "end",
-          className: "eb:w-80 eb:p-0",
-          onCloseAutoFocus: (e) => e.preventDefault(),
-          onMouseDown: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx5(VariablePicker, { variables, onPick: insert, ...manage })
+          type: "button",
+          "aria-label": t("Edit \u201C{name}\u201D", { name: variable.label }),
+          title: t("Edit"),
+          onClick: () => setDialog({ variable }),
+          className: cn(BADGE, "eb:rounded-l-none eb:px-1.5 eb:text-foreground-muted"),
+          children: /* @__PURE__ */ jsx3(Pencil, { className: "eb:size-2.5", "aria-hidden": "true" })
         }
       )
-    ] }),
-    canManageVariables && /* @__PURE__ */ jsx5(
+    ] }, variable.key);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "eb:relative eb:z-10 eb:h-6 eb:shrink-0", "data-testid": "eb-variables-bar", children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "eb:absolute eb:inset-x-0 eb:top-0 eb:border-b eb:border-border eb:bg-background eb:transition-shadow",
+          expanded && "eb:shadow-md"
+        ),
+        "data-expanded": expanded,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onKeyDown: (e) => e.key === "Escape" && open && setOpen(false),
+        onMouseDown: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              "aria-expanded": expanded,
+              "aria-controls": listId,
+              onClick: () => setOpen((value) => !value),
+              className: "eb:flex eb:h-6 eb:w-full eb:items-center eb:gap-1.5 eb:px-3 eb:text-[11px] eb:font-medium eb:text-foreground-lighter eb:outline-none eb:hover:text-foreground eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40 eb:focus-visible:ring-inset",
+              children: [
+                /* @__PURE__ */ jsx3(Braces2, { className: "eb:size-3", "aria-hidden": "true" }),
+                t("Email provider variables"),
+                fields.length > 0 && /* @__PURE__ */ jsx3("span", { className: "eb:text-foreground-muted", children: fields.length }),
+                /* @__PURE__ */ jsx3(ChevronDown, { className: cn("eb:ml-auto eb:size-3.5 eb:transition-transform", expanded && "eb:rotate-180"), "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              id: listId,
+              className: cn(
+                "eb:grid eb:transition-[grid-template-rows,visibility] eb:duration-200 eb:ease-out",
+                expanded ? "eb:visible eb:grid-rows-[1fr]" : "eb:invisible eb:grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsx3("div", { className: "eb:min-h-0 eb:overflow-hidden", children: /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": t("Email provider variables"),
+                  className: "eb:flex eb:max-h-24 eb:flex-wrap eb:items-center eb:gap-1 eb:overflow-y-auto eb:px-3 eb:pt-0.5 eb:pb-2",
+                  children: [
+                    fields.map(badge),
+                    !fields.length && /* @__PURE__ */ jsx3("span", { className: "eb:text-[11px] eb:text-foreground-muted", children: t("No variables yet.") }),
+                    canManageVariables && /* @__PURE__ */ jsx3(TooltipWrap, { label: t("New variable"), delayDuration: 100, hoverable: false, children: /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: !ready,
+                        "aria-label": t("New variable"),
+                        onClick: () => setDialog({}),
+                        className: cn(BADGE, "eb:w-5.5 eb:justify-center eb:border-dashed eb:bg-transparent eb:px-0 eb:text-primary"),
+                        children: /* @__PURE__ */ jsx3(Plus, { className: "eb:size-3.5", "aria-hidden": "true" })
+                      }
+                    ) }),
+                    links.length > 0 && /* @__PURE__ */ jsx3("span", { className: "eb:mx-1 eb:h-3.5 eb:w-px eb:bg-border", "aria-hidden": "true" }),
+                    links.map(badge)
+                  ]
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ),
+    canManageVariables && /* @__PURE__ */ jsx3(
       VariableDialog,
       {
         open: Boolean(dialog),
         onOpenChange: (next) => !next && setDialog(null),
         variable: dialog?.variable || null,
-        initialLabel: dialog?.label || "",
         variables,
         storage,
         onSaved: async (variable, created) => {
@@ -1906,7 +1752,6 @@ var variablesFeature = {
   id: "variables",
   label: "Variables",
   order: 10,
-  toolbar: VariablesMenu,
   canvasBar: VariablesBar
 };
 
@@ -1920,9 +1765,9 @@ var previewFeature = {
 };
 
 // src/features/test-email/TestEmailButton.jsx
-import { useState as useState6 } from "react";
+import { useState as useState4 } from "react";
 import { CheckCircle2, Loader2 as Loader22, Send, XCircle } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var KEY = "best-email-builder:test-addresses";
 function readAddresses(fallback) {
   try {
@@ -1940,10 +1785,10 @@ function rememberAddresses(value) {
 function TestEmailButton({ context }) {
   const { editor, ready, meta, storage, testRecipients = [] } = context;
   const { t, notify } = useUi();
-  const [open, setOpen] = useState6(false);
-  const [addresses, setAddresses] = useState6("");
-  const [sending, setSending] = useState6(false);
-  const [report, setReport] = useState6(null);
+  const [open, setOpen] = useState4(false);
+  const [addresses, setAddresses] = useState4("");
+  const [sending, setSending] = useState4(false);
+  const [report, setReport] = useState4(null);
   const emails = addresses.split(/[,;\s]+/).map((a) => a.trim()).filter(Boolean);
   const send = async () => {
     if (!emails.length) return;
@@ -1966,8 +1811,8 @@ function TestEmailButton({ context }) {
       setSending(false);
     }
   };
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
       Button,
       {
         variant: "outline",
@@ -1979,22 +1824,22 @@ function TestEmailButton({ context }) {
           setOpen(true);
         },
         children: [
-          /* @__PURE__ */ jsx6(Send, {}),
+          /* @__PURE__ */ jsx4(Send, {}),
           t("Test")
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs6(DialogContent, { className: "eb:sm:max-w-[460px]", children: [
-      /* @__PURE__ */ jsx6(DialogHeader, { children: /* @__PURE__ */ jsxs6("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-        /* @__PURE__ */ jsx6("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx6(Send, { className: "eb:size-5" }) }),
-        /* @__PURE__ */ jsxs6("div", { children: [
-          /* @__PURE__ */ jsx6(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Send a test") }),
-          /* @__PURE__ */ jsx6(DialogDescription, { className: "eb:text-[13px]", children: t("The email on screen, to reviewers\u2019 addresses.") })
+    /* @__PURE__ */ jsx4(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs4(DialogContent, { className: "eb:sm:max-w-[460px]", children: [
+      /* @__PURE__ */ jsx4(DialogHeader, { children: /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+        /* @__PURE__ */ jsx4("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx4(Send, { className: "eb:size-5" }) }),
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Send a test") }),
+          /* @__PURE__ */ jsx4(DialogDescription, { className: "eb:text-[13px]", children: t("The email on screen, to reviewers\u2019 addresses.") })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "eb:space-y-2", children: [
-        /* @__PURE__ */ jsx6(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-2", children: [
+        /* @__PURE__ */ jsx4(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
+        /* @__PURE__ */ jsx4(
           Textarea,
           {
             id: "eb-test-addresses",
@@ -2005,20 +1850,20 @@ function TestEmailButton({ context }) {
           }
         )
       ] }),
-      report && /* @__PURE__ */ jsxs6("ul", { className: "eb:space-y-1", "aria-label": t("Results"), children: [
-        report.results.map((r) => /* @__PURE__ */ jsxs6("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
-          r.ok ? /* @__PURE__ */ jsx6(CheckCircle2, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx6(XCircle, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs6("span", { className: "eb:min-w-0 eb:break-all", children: [
+      report && /* @__PURE__ */ jsxs4("ul", { className: "eb:space-y-1", "aria-label": t("Results"), children: [
+        report.results.map((r) => /* @__PURE__ */ jsxs4("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
+          r.ok ? /* @__PURE__ */ jsx4(CheckCircle2, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(XCircle, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs4("span", { className: "eb:min-w-0 eb:break-all", children: [
             r.email,
             r.error ? ` \u2014 ${r.error}` : ""
           ] })
         ] }, r.email)),
-        report.invalid.map((email2) => /* @__PURE__ */ jsx6("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email: email2 }) }, `invalid-${email2}`))
+        report.invalid.map((email2) => /* @__PURE__ */ jsx4("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email: email2 }) }, `invalid-${email2}`))
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-        /* @__PURE__ */ jsx6(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
-        /* @__PURE__ */ jsxs6(Button, { onClick: send, disabled: sending || !emails.length, children: [
-          sending ? /* @__PURE__ */ jsx6(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx6(Send, {}),
+      /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
+        /* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
+        /* @__PURE__ */ jsxs4(Button, { onClick: send, disabled: sending || !emails.length, children: [
+          sending ? /* @__PURE__ */ jsx4(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx4(Send, {}),
           t("Send")
         ] })
       ] })
@@ -2036,9 +1881,9 @@ var testEmailFeature = {
 };
 
 // src/features/templates/TemplateGallery.jsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState7 } from "react";
-import { LayoutTemplate, Search as Search2, X } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState5 } from "react";
+import { LayoutTemplate, Search, X } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var THUMBNAIL_SCALE = 0.38;
 var EMAIL_WIDTH = 600;
 var FADE_LINE = "eb:block eb:overflow-hidden eb:whitespace-nowrap eb:[mask-image:linear-gradient(to_right,#000_calc(100%-2.5rem),transparent)]";
@@ -2046,12 +1891,12 @@ var NO_SCROLLBAR = "<style>html,body{overflow:hidden!important;scrollbar-width:n
 var withoutScrollbar = (html) => !html ? html : /<\/head>/i.test(html) ? html.replace(/<\/head>/i, `${NO_SCROLLBAR}</head>`) : NO_SCROLLBAR + html;
 var fold = (text) => String(text || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 function Thumbnail({ html, title }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: "eb:relative eb:h-[220px] eb:shrink-0 eb:overflow-hidden eb:rounded-md eb:border eb:border-border eb:bg-surface-75",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx5(
         "iframe",
         {
           title,
@@ -2073,11 +1918,11 @@ function Thumbnail({ html, title }) {
 function TemplateGalleryButton({ context }) {
   const { editor, ready, templates, isDirty, markDirty, template, setMeta } = context;
   const { t, confirm, notify } = useUi();
-  const [open, setOpen] = useState7(false);
-  const [query, setQuery] = useState7("");
-  const [chosen, setChosen] = useState7(() => /* @__PURE__ */ new Set());
-  const [rendered, setRendered] = useState7({});
-  useEffect3(() => {
+  const [open, setOpen] = useState5(false);
+  const [query, setQuery] = useState5("");
+  const [chosen, setChosen] = useState5(() => /* @__PURE__ */ new Set());
+  const [rendered, setRendered] = useState5({});
+  useEffect2(() => {
     if (!open || !ready) return void 0;
     let alive = true;
     Promise.all(
@@ -2095,12 +1940,12 @@ function TemplateGalleryButton({ context }) {
       alive = false;
     };
   }, [open, ready, templates, editor]);
-  const cards = useMemo3(
+  const cards = useMemo2(
     () => open ? templates.map((entry) => ({ ...entry, tags: entry.tags || [], html: rendered[entry.id] ?? "" })) : [],
     [open, templates, rendered]
   );
-  const tags = useMemo3(() => [...new Set(templates.flatMap((entry) => entry.tags || []))], [templates]);
-  const shown = useMemo3(() => {
+  const tags = useMemo2(() => [...new Set(templates.flatMap((entry) => entry.tags || []))], [templates]);
+  const shown = useMemo2(() => {
     const q = fold(query.trim());
     return cards.filter(
       (card) => (chosen.size === 0 || card.tags.some((tag) => chosen.has(tag))) && (!q || [card.name, card.description, ...card.tags].some((field) => fold(field).includes(q)))
@@ -2133,8 +1978,8 @@ function TemplateGalleryButton({ context }) {
     setOpen(false);
     notify("success", t("\u201C{name}\u201D template applied.", { name: entry.name }));
   };
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5(
       Button,
       {
         variant: "outline",
@@ -2146,12 +1991,12 @@ function TemplateGalleryButton({ context }) {
           setOpen(true);
         },
         children: [
-          /* @__PURE__ */ jsx7(LayoutTemplate, {}),
+          /* @__PURE__ */ jsx5(LayoutTemplate, {}),
           t("Templates")
         ]
       }
     ),
-    /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx5(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs5(
       DialogContent,
       {
         className: "eb:flex eb:h-[min(48rem,calc(100dvh-2rem))] eb:flex-col eb:sm:max-w-4xl",
@@ -2163,14 +2008,14 @@ function TemplateGalleryButton({ context }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs7(DialogHeader, { children: [
-            /* @__PURE__ */ jsx7(DialogTitle, { children: t("Start from a template") }),
-            /* @__PURE__ */ jsx7(DialogDescription, { children: t("Picking a template replaces the email being edited.") })
+          /* @__PURE__ */ jsxs5(DialogHeader, { children: [
+            /* @__PURE__ */ jsx5(DialogTitle, { children: t("Start from a template") }),
+            /* @__PURE__ */ jsx5(DialogDescription, { children: t("Picking a template replaces the email being edited.") })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:shrink-0 eb:flex-col eb:gap-3", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "eb:relative", children: [
-              /* @__PURE__ */ jsx7(Search2, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
-              /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:shrink-0 eb:flex-col eb:gap-3", children: [
+            /* @__PURE__ */ jsxs5("div", { className: "eb:relative", children: [
+              /* @__PURE__ */ jsx5(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
+              /* @__PURE__ */ jsx5(
                 Input,
                 {
                   type: "search",
@@ -2181,20 +2026,20 @@ function TemplateGalleryButton({ context }) {
                   className: "eb:pr-8 eb:pl-8 eb:[&::-webkit-search-cancel-button]:hidden"
                 }
               ),
-              query && /* @__PURE__ */ jsx7(
+              query && /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
                   onClick: () => setQuery(""),
                   "aria-label": t("Clear the search"),
                   className: "eb:absolute eb:top-1/2 eb:right-2.5 eb:-translate-y-1/2 eb:cursor-pointer",
-                  children: /* @__PURE__ */ jsx7(X, { className: "eb:size-3.5 eb:text-foreground-muted eb:hover:text-foreground" })
+                  children: /* @__PURE__ */ jsx5(X, { className: "eb:size-3.5 eb:text-foreground-muted eb:hover:text-foreground" })
                 }
               )
             ] }),
-            tags.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:items-start eb:gap-1.5", children: [
-              /* @__PURE__ */ jsx7("div", { role: "group", "aria-label": t("Filter by tag"), className: "eb:flex eb:min-w-0 eb:flex-1 eb:flex-wrap eb:gap-1.5", "data-testid": "eb-gallery-tags", children: tags.map((tag) => /* @__PURE__ */ jsx7(FilterChip, { pressed: chosen.has(tag), onClick: () => toggle(tag), children: tag }, tag)) }),
-              /* @__PURE__ */ jsx7(
+            tags.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:items-start eb:gap-1.5", children: [
+              /* @__PURE__ */ jsx5("div", { role: "group", "aria-label": t("Filter by tag"), className: "eb:flex eb:min-w-0 eb:flex-1 eb:flex-wrap eb:gap-1.5", "data-testid": "eb-gallery-tags", children: tags.map((tag) => /* @__PURE__ */ jsx5(FilterChip, { pressed: chosen.has(tag), onClick: () => toggle(tag), children: tag }, tag)) }),
+              /* @__PURE__ */ jsx5(
                 FilterReset,
                 {
                   label: t("Clear the tag filters"),
@@ -2205,7 +2050,7 @@ function TemplateGalleryButton({ context }) {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx7("div", { className: "eb:-m-1 eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: shown.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "eb:m-0 eb:py-10 eb:text-center eb:text-[13px] eb:text-foreground-muted", children: t("Nothing matches \u201C{query}\u201D.", { query: query.trim() }) }) : /* @__PURE__ */ jsx7("ul", { className: "eb:m-0 eb:grid eb:list-none eb:grid-cols-1 eb:gap-3 eb:p-0 eb:sm:grid-cols-2 eb:md:grid-cols-3", children: shown.map((card) => /* @__PURE__ */ jsx7("li", { className: "eb:min-w-0", children: /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsx5("div", { className: "eb:-m-1 eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: shown.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "eb:m-0 eb:py-10 eb:text-center eb:text-[13px] eb:text-foreground-muted", children: t("Nothing matches \u201C{query}\u201D.", { query: query.trim() }) }) : /* @__PURE__ */ jsx5("ul", { className: "eb:m-0 eb:grid eb:list-none eb:grid-cols-1 eb:gap-3 eb:p-0 eb:sm:grid-cols-2 eb:md:grid-cols-3", children: shown.map((card) => /* @__PURE__ */ jsx5("li", { className: "eb:min-w-0", children: /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -2214,10 +2059,10 @@ function TemplateGalleryButton({ context }) {
               title: card.description,
               className: "eb:group eb:flex eb:h-full eb:w-full eb:flex-col eb:gap-2 eb:rounded-lg2 eb:border eb:border-border eb:bg-background eb:p-2 eb:text-left eb:transition-colors eb:hover:border-primary/50 eb:hover:bg-primary/5 eb:focus-visible:outline-none eb:focus-visible:ring-2 eb:focus-visible:ring-ring/50",
               children: [
-                /* @__PURE__ */ jsx7(Thumbnail, { html: card.html, title: card.name }),
-                /* @__PURE__ */ jsxs7("span", { className: "eb:block eb:min-w-0 eb:px-1", children: [
-                  /* @__PURE__ */ jsx7("span", { className: cn(FADE_LINE, "eb:text-[13px] eb:font-medium eb:text-foreground"), children: card.name }),
-                  /* @__PURE__ */ jsx7("span", { className: cn(FADE_LINE, "eb:text-[12px] eb:text-foreground-muted"), children: card.description })
+                /* @__PURE__ */ jsx5(Thumbnail, { html: card.html, title: card.name }),
+                /* @__PURE__ */ jsxs5("span", { className: "eb:block eb:min-w-0 eb:px-1", children: [
+                  /* @__PURE__ */ jsx5("span", { className: cn(FADE_LINE, "eb:text-[13px] eb:font-medium eb:text-foreground"), children: card.name }),
+                  /* @__PURE__ */ jsx5("span", { className: cn(FADE_LINE, "eb:text-[12px] eb:text-foreground-muted"), children: card.description })
                 ] })
               ]
             }
@@ -2238,14 +2083,14 @@ var templatesFeature = {
 };
 
 // src/features/brand/BrandButton.jsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState9 } from "react";
+import { useEffect as useEffect3, useRef, useState as useState7 } from "react";
 import { Globe, ImageOff, Loader2 as Loader23, Palette, Trash2 as Trash22, TriangleAlert, Upload, WandSparkles } from "lucide-react";
 
 // src/ui/primitives/color-picker.jsx
-import { useState as useState8 } from "react";
+import { useState as useState6 } from "react";
 import { HexAlphaColorPicker } from "react-colorful";
 import { Check } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var PRESET_COLORS = [
   "#8B5CF6",
   "#A78BFA",
@@ -2276,20 +2121,20 @@ function normalizeHex(v) {
 }
 function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
   const t = useT();
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState6(false);
   const valid = isValidHex(value);
   const normalized = valid ? normalizeHex(value) : "";
   const emit = (hex) => onChange(normalizeHex(hex));
-  return /* @__PURE__ */ jsxs8("div", { className: cn("eb:flex eb:gap-2", className), children: [
-    /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: cn("eb:flex eb:gap-2", className), children: [
+    /* @__PURE__ */ jsxs6(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
         "button",
         {
           type: "button",
           "aria-label": t("Pick a colour"),
           title: t("Pick a colour"),
           className: "eb-checker eb:relative eb:h-8 eb:w-[44px] eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:shadow-sm eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-[1.04]",
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx6(
             "span",
             {
               className: "eb:absolute eb:inset-0",
@@ -2299,18 +2144,18 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
           )
         }
       ) }),
-      /* @__PURE__ */ jsxs8(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
-        /* @__PURE__ */ jsx8("div", { className: "eb-picker", children: /* @__PURE__ */ jsx8(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-          /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsxs6(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
+        /* @__PURE__ */ jsx6("div", { className: "eb-picker", children: /* @__PURE__ */ jsx6(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: "eb-checker eb:relative eb:size-8 eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset",
               "aria-hidden": true,
-              children: /* @__PURE__ */ jsx8("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
+              children: /* @__PURE__ */ jsx6("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             Input,
             {
               value: value || "",
@@ -2322,7 +2167,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx6("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -2331,13 +2176,13 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
             "aria-label": c,
             className: "eb:relative eb:size-6 eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-110",
             style: { backgroundColor: c },
-            children: normalized === c && /* @__PURE__ */ jsx8(Check, { className: "eb:absolute eb:inset-0 eb:m-auto eb:size-3.5 eb:text-white eb:drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]" })
+            children: normalized === c && /* @__PURE__ */ jsx6(Check, { className: "eb:absolute eb:inset-0 eb:m-auto eb:size-3.5 eb:text-white eb:drop-shadow-[0_1px_1px_rgba(0,0,0,0.6)]" })
           },
           c
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx6(
       Input,
       {
         id,
@@ -2352,7 +2197,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
 }
 
 // src/features/brand/BrandButton.jsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var toForm = (brand) => ({
   name: brand.name || "",
   logoUrl: brand.logoUrl || "",
@@ -2366,31 +2211,31 @@ var isLogoUrl = (url) => !url || url.startsWith("/") || /^https:\/\//i.test(url)
 function BrandButton({ context }) {
   const { editor, ready, storage, brand, setBrand, hostSender } = context;
   const { t, notify } = useUi();
-  const [open, setOpen] = useState9(false);
-  const [form, setForm] = useState9(() => toForm(brand || {}));
-  const [applyNow, setApplyNow] = useState9(true);
-  const [reading, setReading] = useState9(false);
-  const [readError, setReadError] = useState9("");
-  const [notes, setNotes] = useState9(
+  const [open, setOpen] = useState7(false);
+  const [form, setForm] = useState7(() => toForm(brand || {}));
+  const [applyNow, setApplyNow] = useState7(true);
+  const [reading, setReading] = useState7(false);
+  const [readError, setReadError] = useState7("");
+  const [notes, setNotes] = useState7(
     /** @type {string[]} */
     []
   );
-  const [uploading, setUploading] = useState9(false);
-  const [saving, setSaving] = useState9(false);
-  const [error, setError] = useState9("");
-  const abortRef = useRef2(
+  const [uploading, setUploading] = useState7(false);
+  const [saving, setSaving] = useState7(false);
+  const [error, setError] = useState7("");
+  const abortRef = useRef(
     /** @type {AbortController|null} */
     null
   );
-  const fileRef = useRef2(
+  const fileRef = useRef(
     /** @type {HTMLInputElement|null} */
     null
   );
   const canRead = typeof storage.importBrand === "function";
   const canUpload = typeof storage.uploadImage === "function";
-  useEffect4(() => () => abortRef.current?.abort(), []);
+  useEffect3(() => () => abortRef.current?.abort(), []);
   const logoUrl = form.logoUrl;
-  useEffect4(() => {
+  useEffect3(() => {
     if (!logoUrl || !isLogoUrl(logoUrl)) return void 0;
     let live = true;
     const image = new Image();
@@ -2499,11 +2344,11 @@ function BrandButton({ context }) {
     }
   };
   const swatch = brand?.primary;
-  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
-    /* @__PURE__ */ jsxs9(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, "data-testid": "eb-brand-button", children: [
-      /* @__PURE__ */ jsx9(Palette, {}),
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsxs7(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, "data-testid": "eb-brand-button", children: [
+      /* @__PURE__ */ jsx7(Palette, {}),
       t("Brand"),
-      swatch && /* @__PURE__ */ jsx9(
+      swatch && /* @__PURE__ */ jsx7(
         "span",
         {
           "aria-hidden": "true",
@@ -2512,18 +2357,18 @@ function BrandButton({ context }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs7(
       DialogContent,
       {
         className: "eb:flex eb:max-h-[calc(100dvh-2rem)] eb:flex-col eb:gap-0 eb:p-0 eb:sm:max-w-2xl",
         "data-testid": "eb-brand",
         children: [
-          /* @__PURE__ */ jsxs9(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-4", children: [
-            /* @__PURE__ */ jsx9(DialogTitle, { children: t("Your brand") }),
-            /* @__PURE__ */ jsx9(DialogDescription, { children: t("Set it once: new emails, templates and blocks take your logo, colors and font.") })
+          /* @__PURE__ */ jsxs7(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-4", children: [
+            /* @__PURE__ */ jsx7(DialogTitle, { children: t("Your brand") }),
+            /* @__PURE__ */ jsx7(DialogDescription, { children: t("Set it once: new emails, templates and blocks take your logo, colors and font.") })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-5", children: [
-            canRead && /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs7("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-5", children: [
+            canRead && /* @__PURE__ */ jsxs7(
               "form",
               {
                 className: "eb:mb-5 eb:flex eb:flex-col eb:gap-1.5",
@@ -2532,11 +2377,11 @@ function BrandButton({ context }) {
                   readWebsite();
                 },
                 children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-website", children: t("Your website") }),
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-2 eb:sm:flex-row", children: [
-                    /* @__PURE__ */ jsxs9("div", { className: "eb:relative eb:min-w-0 eb:flex-1", children: [
-                      /* @__PURE__ */ jsx9(Globe, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-website", children: t("Your website") }),
+                  /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-2 eb:sm:flex-row", children: [
+                    /* @__PURE__ */ jsxs7("div", { className: "eb:relative eb:min-w-0 eb:flex-1", children: [
+                      /* @__PURE__ */ jsx7(Globe, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx7(
                         Input,
                         {
                           id: "eb-brand-website",
@@ -2550,28 +2395,28 @@ function BrandButton({ context }) {
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs9(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
-                      reading ? /* @__PURE__ */ jsx9(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx9(WandSparkles, {}),
+                    /* @__PURE__ */ jsxs7(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
+                      reading ? /* @__PURE__ */ jsx7(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx7(WandSparkles, {}),
                       t("Get my brand")
                     ] })
                   ] }),
-                  reading ? /* @__PURE__ */ jsx9("p", { role: "status", className: "eb:text-[12px] eb:text-foreground-muted", children: t("Reading the website\u2026") }) : readError ? /* @__PURE__ */ jsxs9("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-                    /* @__PURE__ */ jsx9(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+                  reading ? /* @__PURE__ */ jsx7("p", { role: "status", className: "eb:text-[12px] eb:text-foreground-muted", children: t("Reading the website\u2026") }) : readError ? /* @__PURE__ */ jsxs7("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+                    /* @__PURE__ */ jsx7(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
                     readError
-                  ] }) : notes.length ? /* @__PURE__ */ jsx9("ul", { className: "eb:flex eb:flex-col eb:gap-1 eb:text-[12px] eb:text-foreground-muted", "data-testid": "eb-brand-notes", children: notes.map((note) => /* @__PURE__ */ jsx9("li", { children: t(BRAND_NOTES[note]) }, note)) }) : /* @__PURE__ */ jsx9("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The logo, colors and font are read from it. You can change them before saving.") })
+                  ] }) : notes.length ? /* @__PURE__ */ jsx7("ul", { className: "eb:flex eb:flex-col eb:gap-1 eb:text-[12px] eb:text-foreground-muted", "data-testid": "eb-brand-notes", children: notes.map((note) => /* @__PURE__ */ jsx7("li", { children: t(BRAND_NOTES[note]) }, note)) }) : /* @__PURE__ */ jsx7("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The logo, colors and font are read from it. You can change them before saving.") })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs9("div", { className: "eb:grid eb:gap-6 eb:sm:grid-cols-[minmax(0,1fr)_220px]", children: [
-              /* @__PURE__ */ jsxs9("fieldset", { disabled: reading, className: "eb:m-0 eb:flex eb:min-w-0 eb:flex-col eb:gap-4 eb:border-0 eb:p-0", children: [
-                /* @__PURE__ */ jsx9("legend", { className: "eb:sr-only", children: t("Your brand") }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-logo", children: t("Logo") }),
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-                    /* @__PURE__ */ jsx9("div", { className: "eb-checker eb:flex eb:h-12 eb:w-24 eb:shrink-0 eb:items-center eb:justify-center eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-border eb:ring-inset", children: form.logoUrl && !logoInvalid ? /* @__PURE__ */ jsx9("img", { src: form.logoUrl, alt: t("Logo"), className: "eb:max-h-10 eb:max-w-20 eb:object-contain" }) : /* @__PURE__ */ jsx9(ImageOff, { className: "eb:size-4 eb:text-foreground-muted", "aria-hidden": "true" }) }),
-                    /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-wrap eb:gap-2", children: [
-                      canUpload && /* @__PURE__ */ jsxs9(Fragment4, { children: [
-                        /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsxs7("div", { className: "eb:grid eb:gap-6 eb:sm:grid-cols-[minmax(0,1fr)_220px]", children: [
+              /* @__PURE__ */ jsxs7("fieldset", { disabled: reading, className: "eb:m-0 eb:flex eb:min-w-0 eb:flex-col eb:gap-4 eb:border-0 eb:p-0", children: [
+                /* @__PURE__ */ jsx7("legend", { className: "eb:sr-only", children: t("Your brand") }),
+                /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+                  /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-logo", children: t("Logo") }),
+                  /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
+                    /* @__PURE__ */ jsx7("div", { className: "eb-checker eb:flex eb:h-12 eb:w-24 eb:shrink-0 eb:items-center eb:justify-center eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-border eb:ring-inset", children: form.logoUrl && !logoInvalid ? /* @__PURE__ */ jsx7("img", { src: form.logoUrl, alt: t("Logo"), className: "eb:max-h-10 eb:max-w-20 eb:object-contain" }) : /* @__PURE__ */ jsx7(ImageOff, { className: "eb:size-4 eb:text-foreground-muted", "aria-hidden": "true" }) }),
+                    /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-wrap eb:gap-2", children: [
+                      canUpload && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+                        /* @__PURE__ */ jsx7(
                           "input",
                           {
                             ref: fileRef,
@@ -2584,18 +2429,18 @@ function BrandButton({ context }) {
                             onChange: pickLogo
                           }
                         ),
-                        /* @__PURE__ */ jsxs9(Button, { type: "button", variant: "outline", size: "sm", disabled: uploading, onClick: () => fileRef.current?.click(), children: [
-                          uploading ? /* @__PURE__ */ jsx9(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx9(Upload, {}),
+                        /* @__PURE__ */ jsxs7(Button, { type: "button", variant: "outline", size: "sm", disabled: uploading, onClick: () => fileRef.current?.click(), children: [
+                          uploading ? /* @__PURE__ */ jsx7(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx7(Upload, {}),
                           t("Upload")
                         ] })
                       ] }),
-                      form.logoUrl && /* @__PURE__ */ jsxs9(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
-                        /* @__PURE__ */ jsx9(Trash22, {}),
+                      form.logoUrl && /* @__PURE__ */ jsxs7(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
+                        /* @__PURE__ */ jsx7(Trash22, {}),
                         t("Remove")
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx7(
                     Input,
                     {
                       id: "eb-brand-logo",
@@ -2606,11 +2451,11 @@ function BrandButton({ context }) {
                       className: "eb:text-[12px]"
                     }
                   ),
-                  logoInvalid && /* @__PURE__ */ jsx9("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
+                  logoInvalid && /* @__PURE__ */ jsx7("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-name", children: t("Company name") }),
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+                  /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-name", children: t("Company name") }),
+                  /* @__PURE__ */ jsx7(
                     Input,
                     {
                       id: "eb-brand-name",
@@ -2621,36 +2466,36 @@ function BrandButton({ context }) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:grid eb:gap-4 eb:sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                    /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-primary", children: t("Main color") }),
-                    /* @__PURE__ */ jsx9(ColorPicker, { id: "eb-brand-primary", value: form.primary, onChange: (primary) => set({ primary }), placeholder: PALETTE.navy }),
-                    /* @__PURE__ */ jsx9("p", { className: "eb:text-[11px] eb:text-foreground-muted", children: t("Buttons, banners, links") })
+                /* @__PURE__ */ jsxs7("div", { className: "eb:grid eb:gap-4 eb:sm:grid-cols-2", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+                    /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-primary", children: t("Main color") }),
+                    /* @__PURE__ */ jsx7(ColorPicker, { id: "eb-brand-primary", value: form.primary, onChange: (primary) => set({ primary }), placeholder: PALETTE.navy }),
+                    /* @__PURE__ */ jsx7("p", { className: "eb:text-[11px] eb:text-foreground-muted", children: t("Buttons, banners, links") })
                   ] }),
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                    /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-heading", children: t("Headings color") }),
-                    /* @__PURE__ */ jsx9(ColorPicker, { id: "eb-brand-heading", value: form.heading, onChange: (heading2) => set({ heading: heading2 }), placeholder: PALETTE.navy })
+                  /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+                    /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-heading", children: t("Headings color") }),
+                    /* @__PURE__ */ jsx7(ColorPicker, { id: "eb-brand-heading", value: form.heading, onChange: (heading2) => set({ heading: heading2 }), placeholder: PALETTE.navy })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-font", children: t("Font") }),
-                  /* @__PURE__ */ jsxs9(Select, { value: form.font || FONT_STACK, onValueChange: (font) => set({ font }), children: [
-                    /* @__PURE__ */ jsx9(SelectTrigger, { id: "eb-brand-font", children: /* @__PURE__ */ jsx9(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx9(SelectContent, { children: FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx9(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx9("span", { style: { fontFamily: option.value }, children: option.label }) }, option.value)) })
+                /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+                  /* @__PURE__ */ jsx7(Label, { htmlFor: "eb-brand-font", children: t("Font") }),
+                  /* @__PURE__ */ jsxs7(Select, { value: form.font || FONT_STACK, onValueChange: (font) => set({ font }), children: [
+                    /* @__PURE__ */ jsx7(SelectTrigger, { id: "eb-brand-font", children: /* @__PURE__ */ jsx7(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx7(SelectContent, { children: FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx7(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx7("span", { style: { fontFamily: option.value }, children: option.label }) }, option.value)) })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx9(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
+              /* @__PURE__ */ jsx7(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
-            error && /* @__PURE__ */ jsxs9("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-              /* @__PURE__ */ jsx9(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
+            error && /* @__PURE__ */ jsxs7("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+              /* @__PURE__ */ jsx7(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
               error
             ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:sm:flex-row eb:sm:items-center", children: [
-              /* @__PURE__ */ jsxs9("label", { className: "eb:flex eb:cursor-pointer eb:items-center eb:gap-2 eb:text-[13px] eb:sm:mr-auto", children: [
-                /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:sm:flex-row eb:sm:items-center", children: [
+              /* @__PURE__ */ jsxs7("label", { className: "eb:flex eb:cursor-pointer eb:items-center eb:gap-2 eb:text-[13px] eb:sm:mr-auto", children: [
+                /* @__PURE__ */ jsx7(
                   "input",
                   {
                     type: "checkbox",
@@ -2662,10 +2507,10 @@ function BrandButton({ context }) {
                 ),
                 t("Also apply to this email")
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-                /* @__PURE__ */ jsx9(Button, { variant: "outline", size: "sm", onClick: () => close(false), children: t("Cancel") }),
-                /* @__PURE__ */ jsxs9(Button, { size: "sm", onClick: save, disabled: saving || reading || uploading || logoInvalid, "data-testid": "eb-brand-save", children: [
-                  saving && /* @__PURE__ */ jsx9(Loader23, { className: "eb:animate-spin" }),
+              /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
+                /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", onClick: () => close(false), children: t("Cancel") }),
+                /* @__PURE__ */ jsxs7(Button, { size: "sm", onClick: save, disabled: saving || reading || uploading || logoInvalid, "data-testid": "eb-brand-save", children: [
+                  saving && /* @__PURE__ */ jsx7(Loader23, { className: "eb:animate-spin" }),
                   t("Save")
                 ] })
               ] })
@@ -2684,30 +2529,30 @@ function BrandPreview({ brand, fallbackName }) {
   const link2 = contrastRatio(primary, PALETTE.white) >= 3 ? primary : heading2;
   const font = brand.font || FONT_STACK;
   const name = brand.name || fallbackName;
-  return /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-    /* @__PURE__ */ jsx9("span", { className: "eb:text-[12px] eb:font-medium eb:text-foreground-muted", children: t("Preview") }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+    /* @__PURE__ */ jsx7("span", { className: "eb:text-[12px] eb:font-medium eb:text-foreground-muted", children: t("Preview") }),
+    /* @__PURE__ */ jsx7(
       "div",
       {
         className: "eb:overflow-hidden eb:rounded-lg2 eb:p-2.5 eb:ring-1 eb:ring-border",
         style: { backgroundColor: PALETTE.canvas, fontFamily: font },
         "data-testid": "eb-brand-preview",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsxs9("div", { className: "eb:overflow-hidden eb:rounded-[3px]", style: { backgroundColor: PALETTE.white }, children: [
-          /* @__PURE__ */ jsx9("div", { className: "eb:px-3 eb:pt-3 eb:pb-2", children: brand.logoUrl ? /* @__PURE__ */ jsx9("img", { src: brand.logoUrl, alt: "", style: { width: Math.round((brand.logoWidth || 140) * 0.45), maxWidth: "100%" } }) : /* @__PURE__ */ jsx9("span", { className: "eb:text-[11px] eb:font-bold", style: { color: PALETTE.ink }, children: name }) }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:px-3 eb:py-4 eb:text-center", style: { backgroundColor: primary, color: onPrimary }, children: [
-            /* @__PURE__ */ jsx9("div", { className: "eb:text-[13px] eb:leading-tight eb:font-bold", children: t("Big news") }),
-            /* @__PURE__ */ jsx9("div", { className: "eb:mt-1 eb:text-[9px] eb:opacity-90", children: t("A short line under the title.") })
+        children: /* @__PURE__ */ jsxs7("div", { className: "eb:overflow-hidden eb:rounded-[3px]", style: { backgroundColor: PALETTE.white }, children: [
+          /* @__PURE__ */ jsx7("div", { className: "eb:px-3 eb:pt-3 eb:pb-2", children: brand.logoUrl ? /* @__PURE__ */ jsx7("img", { src: brand.logoUrl, alt: "", style: { width: Math.round((brand.logoWidth || 140) * 0.45), maxWidth: "100%" } }) : /* @__PURE__ */ jsx7("span", { className: "eb:text-[11px] eb:font-bold", style: { color: PALETTE.ink }, children: name }) }),
+          /* @__PURE__ */ jsxs7("div", { className: "eb:px-3 eb:py-4 eb:text-center", style: { backgroundColor: primary, color: onPrimary }, children: [
+            /* @__PURE__ */ jsx7("div", { className: "eb:text-[13px] eb:leading-tight eb:font-bold", children: t("Big news") }),
+            /* @__PURE__ */ jsx7("div", { className: "eb:mt-1 eb:text-[9px] eb:opacity-90", children: t("A short line under the title.") })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5 eb:px-3 eb:py-3", children: [
-            /* @__PURE__ */ jsx9("div", { className: "eb:text-[11px] eb:leading-tight eb:font-bold", style: { color: heading2 }, children: t("A headline") }),
-            /* @__PURE__ */ jsxs9("div", { className: "eb:text-[9px] eb:leading-snug", style: { color: PALETTE.ink }, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-1.5 eb:px-3 eb:py-3", children: [
+            /* @__PURE__ */ jsx7("div", { className: "eb:text-[11px] eb:leading-tight eb:font-bold", style: { color: heading2 }, children: t("A headline") }),
+            /* @__PURE__ */ jsxs7("div", { className: "eb:text-[9px] eb:leading-snug", style: { color: PALETTE.ink }, children: [
               t("Some text, with"),
               " ",
-              /* @__PURE__ */ jsx9("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
+              /* @__PURE__ */ jsx7("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
               "."
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx7(
               "span",
               {
                 className: cn("eb:mt-1 eb:self-start eb:rounded-[3px] eb:px-2.5 eb:py-1 eb:text-[9px] eb:font-bold"),
@@ -2716,7 +2561,7 @@ function BrandPreview({ brand, fallbackName }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
+          /* @__PURE__ */ jsx7("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
         ] })
       }
     )
@@ -4672,14 +4517,14 @@ function createDefaultEmailEditor(options = {}) {
 }
 
 // src/ui/EmailCanvas.jsx
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function EmailCanvas({ editor, document = null, onReady, onError, className }) {
-  const ref = useRef3(null);
-  const documentRef = useRef3(document);
-  const callbacks = useRef3({ onReady, onError });
+  const ref = useRef2(null);
+  const documentRef = useRef2(document);
+  const callbacks = useRef2({ onReady, onError });
   callbacks.current = { onReady, onError };
-  useEffect5(() => {
+  useEffect4(() => {
     if (!editor || !ref.current) return void 0;
     let alive = true;
     editor.initialize({ container: ref.current, document: documentRef.current }).then(() => {
@@ -4692,15 +4537,15 @@ function EmailCanvas({ editor, document = null, onReady, onError, className }) {
       editor.destroy();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx10("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
+  return /* @__PURE__ */ jsx8("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
 }
 
 // src/ui/EmailBuilder.jsx
-import { useCallback as useCallback3, useEffect as useEffect10, useMemo as useMemo5, useRef as useRef8, useState as useState14 } from "react";
-import { AlertTriangle, Loader2 as Loader25, Plus as Plus2, Save, SlidersHorizontal } from "lucide-react";
+import { useCallback as useCallback3, useEffect as useEffect10, useMemo as useMemo5, useRef as useRef8, useState as useState13 } from "react";
+import { AlertTriangle, Loader2 as Loader25, Plus as Plus3, Save, SlidersHorizontal } from "lucide-react";
 
 // src/features/brand/useBrand.js
-import { useCallback, useEffect as useEffect6, useState as useState10 } from "react";
+import { useCallback, useEffect as useEffect5, useState as useState8 } from "react";
 var entries = /* @__PURE__ */ new WeakMap();
 function brandOf(storage) {
   let entry = entries.get(storage);
@@ -4721,8 +4566,8 @@ function brandOf(storage) {
   return created;
 }
 function useBrand(storage) {
-  const [brand, setState] = useState10(() => brandOf(storage).value);
-  useEffect6(() => {
+  const [brand, setState] = useState8(() => brandOf(storage).value);
+  useEffect5(() => {
     const entry = brandOf(storage);
     setState(entry.value);
     entry.listeners.add(setState);
@@ -4849,8 +4694,8 @@ import {
   Square,
   Type
 } from "lucide-react";
-import { useRef as useRef4 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useRef as useRef3 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var DRAG_THRESHOLD = 5;
 var ICONS2 = {
   Heading,
@@ -4875,8 +4720,8 @@ var GROUPS2 = [
 function BlockTile({ block, disabled, onAdd, onDragStart }) {
   const t = useT();
   const Icon = ICONS2[block.icon] || Square;
-  const press = useRef4(null);
-  return /* @__PURE__ */ jsx11(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs10(
+  const press = useRef3(null);
+  return /* @__PURE__ */ jsx9(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
@@ -4916,8 +4761,8 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
         disabled && "eb:cursor-not-allowed eb:opacity-50"
       ),
       children: [
-        /* @__PURE__ */ jsx11(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx11("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
+        /* @__PURE__ */ jsx9(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx9("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
       ]
     }
   ) });
@@ -4925,12 +4770,12 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
 function BlockSidebar({ editor, disabled = false, onAdded }) {
   const t = useT();
   const blocks = editor.listBlocks();
-  return /* @__PURE__ */ jsx11("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
+  return /* @__PURE__ */ jsx9("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
     const items = blocks.filter((b) => b.kind === group.kind && b.mjml);
     if (!items.length) return null;
-    return /* @__PURE__ */ jsxs10("section", { className: "eb:space-y-2", children: [
-      /* @__PURE__ */ jsx11(SectionLabel, { children: t(group.title) }),
-      /* @__PURE__ */ jsx11("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs8("section", { className: "eb:space-y-2", children: [
+      /* @__PURE__ */ jsx9(SectionLabel, { children: t(group.title) }),
+      /* @__PURE__ */ jsx9("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx9(
         BlockTile,
         {
           block,
@@ -4948,15 +4793,15 @@ function BlockSidebar({ editor, disabled = false, onAdded }) {
 
 // src/ui/ElementActions.jsx
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Copy, Trash2 as Trash23 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ElementActions({ editor, selection }) {
   const t = useT();
   if (!selection || !selection.canRemove && !selection.canDuplicate) return null;
   const horizontal = selection.tagName === "mj-column";
   const [Prev, Next] = horizontal ? [ArrowLeft, ArrowRight] : [ArrowUp, ArrowDown];
   const [prevLabel, nextLabel] = horizontal ? [t("Move left"), t("Move right")] : [t("Move up"), t("Move down")];
-  return /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
+    /* @__PURE__ */ jsx10(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "ghost",
@@ -4964,10 +4809,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": prevLabel,
         disabled: !selection.canMoveUp,
         onClick: () => editor.move(-1, selection.id),
-        children: /* @__PURE__ */ jsx12(Prev, {})
+        children: /* @__PURE__ */ jsx10(Prev, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx10(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "ghost",
@@ -4975,10 +4820,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": nextLabel,
         disabled: !selection.canMoveDown,
         onClick: () => editor.move(1, selection.id),
-        children: /* @__PURE__ */ jsx12(Next, {})
+        children: /* @__PURE__ */ jsx10(Next, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx10(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "ghost",
@@ -4986,10 +4831,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": t("Duplicate"),
         disabled: !selection.canDuplicate,
         onClick: () => editor.duplicate(selection.id),
-        children: /* @__PURE__ */ jsx12(Copy, {})
+        children: /* @__PURE__ */ jsx10(Copy, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx10(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "ghost",
@@ -4998,7 +4843,7 @@ function ElementActions({ editor, selection }) {
         disabled: !selection.canRemove,
         onClick: () => editor.remove(selection.id),
         className: "eb:ml-auto eb:text-foreground-muted eb:hover:bg-destructive/10 eb:hover:text-destructive",
-        children: /* @__PURE__ */ jsx12(Trash23, {})
+        children: /* @__PURE__ */ jsx10(Trash23, {})
       }
     ) })
   ] });
@@ -5009,9 +4854,9 @@ import { useMemo as useMemo4, useRef as useRef6 } from "react";
 import { X as X2 } from "lucide-react";
 
 // src/ui/fields.jsx
-import { useEffect as useEffect7, useRef as useRef5, useState as useState11 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState9 } from "react";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader24, Upload as Upload2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var COLOR_DEBOUNCE_MS = 250;
 function emailColor(value) {
   const v = String(value || "").trim();
@@ -5020,11 +4865,11 @@ function emailColor(value) {
   return null;
 }
 function useDraft(value, toDraft) {
-  const [draft, setDraft] = useState11(() => toDraft(value));
-  const ref = useRef5(null);
-  const convert = useRef5(toDraft);
+  const [draft, setDraft] = useState9(() => toDraft(value));
+  const ref = useRef4(null);
+  const convert = useRef4(toDraft);
   convert.current = toDraft;
-  useEffect7(() => {
+  useEffect6(() => {
     const el = ref.current;
     const focused = el && el.ownerDocument?.activeElement && el.contains(el.ownerDocument.activeElement);
     if (!focused) setDraft(convert.current(value));
@@ -5033,10 +4878,10 @@ function useDraft(value, toDraft) {
 }
 var asText = (v) => v || "";
 function FieldLabel({ id, children }) {
-  return /* @__PURE__ */ jsx13(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
+  return /* @__PURE__ */ jsx11(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
 }
 function FieldError({ children }) {
-  return children ? /* @__PURE__ */ jsx13("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
+  return children ? /* @__PURE__ */ jsx11("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
 }
 function TextField({ id, property, value, fallback = "", onCommit, addon = null, error = null }) {
   const t = useT();
@@ -5067,23 +4912,23 @@ function TextField({ id, property, value, fallback = "", onCommit, addon = null,
     onKeyDown: keyDown,
     "aria-invalid": invalid || void 0
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    property.type === "textarea" ? /* @__PURE__ */ jsx13(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:gap-2", children: [
-      /* @__PURE__ */ jsx13(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    property.type === "textarea" ? /* @__PURE__ */ jsx11(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs10("div", { className: "eb:flex eb:gap-2", children: [
+      /* @__PURE__ */ jsx11(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
       addon
-    ] }) : /* @__PURE__ */ jsx13(Input, { ...shared }),
-    /* @__PURE__ */ jsx13(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
+    ] }) : /* @__PURE__ */ jsx11(Input, { ...shared }),
+    /* @__PURE__ */ jsx11(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
   ] });
 }
 function ImageField({ id, property, value, onCommit, services }) {
   const t = useT();
-  const inputRef = useRef5(
+  const inputRef = useRef4(
     /** @type {HTMLInputElement|null} */
     null
   );
-  const [busy, setBusy] = useState11(false);
-  const [error, setError] = useState11(
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(
     /** @type {string|null} */
     null
   );
@@ -5105,8 +4950,8 @@ function ImageField({ id, property, value, onCommit, services }) {
       setBusy(false);
     }
   };
-  const addon = upload ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
-    /* @__PURE__ */ jsx13(
+  const addon = upload ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsx11(
       "input",
       {
         ref: inputRef,
@@ -5119,7 +4964,7 @@ function ImageField({ id, property, value, onCommit, services }) {
         onChange: pick
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs10(
       Button,
       {
         type: "button",
@@ -5128,13 +4973,13 @@ function ImageField({ id, property, value, onCommit, services }) {
         disabled: busy,
         onClick: () => inputRef.current?.click(),
         children: [
-          busy ? /* @__PURE__ */ jsx13(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx13(Upload2, {}),
+          busy ? /* @__PURE__ */ jsx11(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx11(Upload2, {}),
           t("Upload")
         ]
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsx13(TextField, { id, property, value, onCommit, addon, error });
+  return /* @__PURE__ */ jsx11(TextField, { id, property, value, onCommit, addon, error });
 }
 var asNumber = (v) => {
   const n = Number.parseFloat(String(v || ""));
@@ -5156,10 +5001,10 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
     const next = `${n}${property.unit || "px"}`;
     if (next !== value) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs12("div", { className: "eb:relative", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs10("div", { className: "eb:relative", children: [
+      /* @__PURE__ */ jsx11(
         Input,
         {
           id,
@@ -5178,17 +5023,17 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:pr-9 eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx13("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
+      /* @__PURE__ */ jsx11("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
     ] })
   ] });
 }
 function ColorField({ id, property, value, fallback = "", onCommit }) {
   const t = useT();
   const [draft, setDraft, ref] = useDraft(value, asText);
-  const timer = useRef5(null);
-  const latest = useRef5({ value, onCommit });
+  const timer = useRef4(null);
+  const latest = useRef4({ value, onCommit });
   latest.current = { value, onCommit };
-  useEffect7(() => () => clearTimeout(timer.current), []);
+  useEffect6(() => () => clearTimeout(timer.current), []);
   const change = (next) => {
     setDraft(next);
     clearTimeout(timer.current);
@@ -5201,9 +5046,9 @@ function ColorField({ id, property, value, fallback = "", onCommit }) {
       }
     }, COLOR_DEBOUNCE_MS);
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx13(ColorPicker, { id, value: draft, placeholder: emailColor(fallback) || "", onChange: change })
+  return /* @__PURE__ */ jsxs10("div", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx11(ColorPicker, { id, value: draft, placeholder: emailColor(fallback) || "", onChange: change })
   ] });
 }
 var DEFAULT_OPTION = "__default__";
@@ -5213,9 +5058,9 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
   const words = (v) => String(v || "").trim().split(/\s+/).sort().join(" ");
   const fallbackOption = (property.options || []).find((o) => o.value && words(o.value) === words(fallback));
   const defaultLabel = fallbackOption ? t("Default ({value})", { value: t(fallbackOption.label) }) : t("Default");
-  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs10("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs10(
       Select,
       {
         value: current,
@@ -5224,10 +5069,10 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
           if (v !== (value || "")) onCommit(v || null);
         },
         children: [
-          /* @__PURE__ */ jsx13(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: defaultLabel }) }),
-          /* @__PURE__ */ jsxs12(SelectContent, { children: [
-            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx13(SelectItem, { value: DEFAULT_OPTION, children: defaultLabel }),
-            (property.options || []).map((o) => /* @__PURE__ */ jsx13(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
+          /* @__PURE__ */ jsx11(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: defaultLabel }) }),
+          /* @__PURE__ */ jsxs10(SelectContent, { children: [
+            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx11(SelectItem, { value: DEFAULT_OPTION, children: defaultLabel }),
+            (property.options || []).map((o) => /* @__PURE__ */ jsx11(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
           ] })
         ]
       }
@@ -5237,9 +5082,9 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
 var ALIGN_ICONS = { left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify };
 function AlignField({ id, property, value, fallback = "", onCommit }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs10("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx11(
       "div",
       {
         id,
@@ -5249,7 +5094,7 @@ function AlignField({ id, property, value, fallback = "", onCommit }) {
         children: (property.options || []).map((option) => {
           const Icon = ALIGN_ICONS[option.value] || AlignLeft;
           const active = (value || fallback) === option.value;
-          return /* @__PURE__ */ jsx13(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx11(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -5261,7 +5106,7 @@ function AlignField({ id, property, value, fallback = "", onCommit }) {
                 "eb:inline-flex eb:h-7 eb:w-7 eb:items-center eb:justify-center eb:rounded-lg2 eb:transition-colors",
                 active ? "eb:bg-primary eb:text-primary-foreground" : "eb:text-foreground-lighter eb:hover:bg-surface-200 eb:hover:text-foreground"
               ),
-              children: /* @__PURE__ */ jsx13(Icon, { className: "eb:h-3.5 eb:w-3.5" })
+              children: /* @__PURE__ */ jsx11(Icon, { className: "eb:h-3.5 eb:w-3.5" })
             }
           ) }, option.value);
         })
@@ -5290,10 +5135,10 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
     );
     if (next !== (value || "")) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs12("fieldset", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
-    /* @__PURE__ */ jsx13("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs10("fieldset", { ref, className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx11("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
+    /* @__PURE__ */ jsx11("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs10("div", { className: "eb:space-y-1", children: [
+      /* @__PURE__ */ jsx11(
         Input,
         {
           id: `${id}-${side}`,
@@ -5312,7 +5157,7 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:px-2 eb:text-center eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx13("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
+      /* @__PURE__ */ jsx11("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
     ] }, side)) })
   ] });
 }
@@ -5330,15 +5175,154 @@ var FIELDS = {
 function PropertyField({ property, value, fallback = "", onCommit, idPrefix = "eb", services = null }) {
   const Field = FIELDS[property.type] || TextField;
   const id = `${idPrefix}-${property.key}`;
-  return /* @__PURE__ */ jsx13(Field, { id, property, value, fallback, onCommit, services });
+  return /* @__PURE__ */ jsx11(Field, { id, property, value, fallback, onCommit, services });
+}
+
+// src/features/variables/VariableInsertButton.jsx
+import { useState as useState11 } from "react";
+import { Braces as Braces3 } from "lucide-react";
+
+// src/features/variables/VariablePicker.jsx
+import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef5, useState as useState10 } from "react";
+import { Pencil as Pencil2, Plus as Plus2, Search as Search2 } from "lucide-react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, filter }) {
+  const t = useT();
+  const [query, setQuery] = useState10("");
+  const [active, setActive] = useState10(0);
+  const listRef = useRef5(null);
+  const searchRef = useRef5(
+    /** @type {HTMLInputElement|null} */
+    null
+  );
+  useSearchShortcut(searchRef);
+  const matches = useMemo3(() => {
+    const q = query.trim().toLowerCase();
+    return variables.filter((v) => filter ? filter(v) : true).filter(
+      (v) => !q || t(v.label).toLowerCase().includes(q) || v.key.toLowerCase().includes(q) || t(v.group).toLowerCase().includes(q)
+    );
+  }, [variables, query, filter, t]);
+  const groups = useMemo3(() => [...new Set(matches.map((v) => v.group))], [matches]);
+  const ordered = useMemo3(() => groups.flatMap((g) => matches.filter((v) => v.group === g)), [groups, matches]);
+  useEffect7(() => setActive(0), [query]);
+  useEffect7(() => {
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, ordered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (ordered[active]) onPick(ordered[active]);
+      else if (onCreate && query.trim()) onCreate(query.trim());
+    }
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:max-h-[min(440px,70vh)] eb:flex-col", "data-testid": "variable-picker", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "eb:relative eb:border-b eb:border-border eb:p-2", children: [
+      /* @__PURE__ */ jsx12(Search2, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-4 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          ref: searchRef,
+          autoFocus: true,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown,
+          placeholder: t("Search variables\u2026"),
+          "aria-label": t("Search variables\u2026"),
+          "aria-keyshortcuts": SEARCH_KEYS,
+          className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-14 eb:pl-7 eb:text-[13px] eb:text-foreground eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40"
+        }
+      ),
+      /* @__PURE__ */ jsx12(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-4 eb:-translate-y-1/2" })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { ref: listRef, role: "listbox", "aria-label": t("Variables"), className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: [
+      ordered.length === 0 && /* @__PURE__ */ jsxs11("div", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: [
+        /* @__PURE__ */ jsx12("p", { children: t("No variable found.") }),
+        onCreate && query.trim() && /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            type: "button",
+            onClick: () => onCreate(query.trim()),
+            className: "eb:mt-2 eb:inline-flex eb:items-center eb:gap-1 eb:rounded-md eb:px-2 eb:py-1 eb:text-[12px] eb:font-medium eb:text-primary eb:hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx12(Plus2, { className: "eb:size-3.5" }),
+              t("Create \u201C{name}\u201D", { name: query.trim() })
+            ]
+          }
+        )
+      ] }),
+      groups.map((group) => /* @__PURE__ */ jsxs11("div", { role: "group", "aria-label": t(group), children: [
+        /* @__PURE__ */ jsx12("p", { className: "eb:px-2 eb:pt-2 eb:pb-1 eb:text-[11px] eb:text-foreground-muted", children: t(group) }),
+        ordered.filter((v) => v.group === group).map((variable) => {
+          const index = ordered.indexOf(variable);
+          return /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              "data-active": index === active,
+              className: cn(
+                "eb:group/var eb:flex eb:items-center eb:gap-1 eb:rounded-md",
+                index === active ? "eb:bg-accent eb:text-accent-foreground" : "eb:hover:bg-accent/60"
+              ),
+              onMouseEnter: () => setActive(index),
+              children: [
+                /* @__PURE__ */ jsxs11(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": index === active,
+                    "data-variable": variable.key,
+                    onClick: () => onPick(variable),
+                    className: "eb:flex eb:min-w-0 eb:flex-1 eb:items-center eb:gap-2 eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px]",
+                    title: variable.description || void 0,
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate", children: variable.custom ? variable.label : t(variable.label) }),
+                      /* @__PURE__ */ jsx12("code", { className: "eb:shrink-0 eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: tokenOf(variable) })
+                    ]
+                  }
+                ),
+                onEdit && variable.custom && /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("Edit \u201C{name}\u201D", { name: variable.label }),
+                    title: t("Edit"),
+                    onClick: () => onEdit(variable),
+                    className: "eb:mr-1 eb:flex eb:size-6 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-md eb:text-foreground-muted eb:opacity-0 eb:group-hover/var:opacity-100 eb:hover:bg-background eb:hover:text-foreground eb:focus-visible:opacity-100",
+                    children: /* @__PURE__ */ jsx12(Pencil2, { className: "eb:size-3" })
+                  }
+                )
+              ]
+            },
+            variable.key
+          );
+        })
+      ] }, group))
+    ] }),
+    onCreate && /* @__PURE__ */ jsx12("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        onClick: () => onCreate(query.trim()),
+        className: "eb:flex eb:w-full eb:items-center eb:gap-2 eb:rounded-md eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px] eb:font-medium eb:text-primary eb:hover:bg-accent",
+        children: [
+          /* @__PURE__ */ jsx12(Plus2, { className: "eb:size-4" }),
+          t("New variable")
+        ]
+      }
+    ) })
+  ] });
 }
 
 // src/features/variables/VariableInsertButton.jsx
-import { useState as useState12 } from "react";
-import { Braces as Braces4 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState11(false);
   const insert = (variable) => {
     const input = inputRef.current;
     const text = String(value || "");
@@ -5354,14 +5338,14 @@ function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
       input.setSelectionRange(start + token.length, start + token.length);
     });
   };
-  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx14(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx14(Braces4, {}) }) }),
-    /* @__PURE__ */ jsx14(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx14(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
+  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx13(Braces3, {}) }) }),
+    /* @__PURE__ */ jsx13(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx13(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var GROUP_ORDER = Object.values(GROUPS);
 function grouped(properties) {
   const map = /* @__PURE__ */ new Map();
@@ -5375,9 +5359,9 @@ function grouped(properties) {
 }
 function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
   const t = useT();
-  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs14("section", { className: "eb:space-y-3", children: [
-    /* @__PURE__ */ jsx15(SectionLabel, { children: t(group) }),
-    properties.map((property) => /* @__PURE__ */ jsx15(
+  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+    /* @__PURE__ */ jsx14(SectionLabel, { children: t(group) }),
+    properties.map((property) => /* @__PURE__ */ jsx14(
       PropertyField,
       {
         idPrefix,
@@ -5395,9 +5379,9 @@ var LABEL_PROPERTY = { key: "content", label: "Label", type: "text", group: GROU
 var REWRITABLE_TAGS = /* @__PURE__ */ new Set(["mj-text", "mj-button"]);
 function PanelHeader({ title, onClose, closeLabel = "Deselect" }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs14("header", { className: "eb:sticky eb:top-0 eb:z-10 eb:flex eb:h-11 eb:shrink-0 eb:items-center eb:gap-2 eb:border-b eb:border-border eb:bg-background eb:px-4", children: [
-    /* @__PURE__ */ jsx15("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx15(TruncatedText, { children: title }) }),
-    onClose && /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t(closeLabel), children: /* @__PURE__ */ jsx15(X2, {}) })
+  return /* @__PURE__ */ jsxs13("header", { className: "eb:sticky eb:top-0 eb:z-10 eb:flex eb:h-11 eb:shrink-0 eb:items-center eb:gap-2 eb:border-b eb:border-border eb:bg-background eb:px-4", children: [
+    /* @__PURE__ */ jsx14("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx14(TruncatedText, { children: title }) }),
+    onClose && /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t(closeLabel), children: /* @__PURE__ */ jsx14(X2, {}) })
   ] });
 }
 function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, ai = null, onDismiss = null }) {
@@ -5408,18 +5392,18 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
   const root = useMemo4(() => rootId ? editor.getElement(rootId) : null, [editor, rootId, changes]);
   const bodyBlock2 = root?.blockId ? editor.getBlock(root.blockId) : null;
   const field = (key) => (e) => onMetaChange({ ...meta, [key]: e.target.value });
-  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsx15(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
-    /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-5 eb:p-4", children: [
-      /* @__PURE__ */ jsxs14("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx15(SectionLabel, { children: t("Template") }),
-        /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs14(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx14(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
+    /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-5 eb:p-4", children: [
+      /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx14(SectionLabel, { children: t("Template") }),
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
             t("Name"),
             " ",
-            /* @__PURE__ */ jsx15("span", { className: "eb:text-destructive", children: "*" })
+            /* @__PURE__ */ jsx14("span", { className: "eb:text-destructive", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx14(
             Input,
             {
               id: "eb-meta-name",
@@ -5429,12 +5413,12 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               "aria-invalid": showErrors && !meta.name.trim() || void 0
             }
           ),
-          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx15("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
+          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx14("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx15(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
-            variables && /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx14(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
+            variables && /* @__PURE__ */ jsx14(
               VariableInsertButton,
               {
                 variables,
@@ -5445,8 +5429,8 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx15(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
-          ai?.suggestSubjects && /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx14(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
+          ai?.suggestSubjects && /* @__PURE__ */ jsx14(
             ai.components.Subjects,
             {
               editor,
@@ -5457,10 +5441,10 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx15(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
-            variables && /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx14(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
+            variables && /* @__PURE__ */ jsx14(
               VariableInsertButton,
               {
                 variables,
@@ -5471,7 +5455,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx14(
             Textarea,
             {
               ref: preheaderRef,
@@ -5485,7 +5469,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
           )
         ] })
       ] }),
-      root && bodyBlock2 && /* @__PURE__ */ jsx15(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
+      root && bodyBlock2 && /* @__PURE__ */ jsx14(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
     ] })
   ] });
 }
@@ -5504,7 +5488,7 @@ function PropertiesPanel({
 }) {
   const t = useT();
   const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
-  return /* @__PURE__ */ jsx15("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx14("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx14(
     TemplateSettings,
     {
       editor,
@@ -5516,8 +5500,8 @@ function PropertiesPanel({
       ai,
       onDismiss
     }
-  ) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
-    /* @__PURE__ */ jsx15(
+  ) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx14(
       PanelHeader,
       {
         title: t(selection.label),
@@ -5526,12 +5510,12 @@ function PropertiesPanel({
       }
     ),
     actions,
-    selection.multiple ? /* @__PURE__ */ jsx15("p", { className: "eb:p-4 eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-select-all", children: t("{count} sections selected. Press Delete to remove them (Ctrl+Z brings them back).", {
+    selection.multiple ? /* @__PURE__ */ jsx14("p", { className: "eb:p-4 eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-select-all", children: t("{count} sections selected. Press Delete to remove them (Ctrl+Z brings them back).", {
       count: selection.multiple
-    }) }) : /* @__PURE__ */ jsxs14("div", { className: "eb:space-y-5 eb:p-4", children: [
-      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs14("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx15(SectionLabel, { children: t(GROUPS.content) }),
-        /* @__PURE__ */ jsx15(
+    }) }) : /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-5 eb:p-4", children: [
+      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx14(SectionLabel, { children: t(GROUPS.content) }),
+        /* @__PURE__ */ jsx14(
           PropertyField,
           {
             idPrefix: "eb-prop",
@@ -5542,16 +5526,16 @@ function PropertiesPanel({
           `${selection.id}:content`
         )
       ] }),
-      selection.tagName === "mj-text" && /* @__PURE__ */ jsx15("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
-      ai?.rewrite && REWRITABLE_TAGS.has(selection.tagName) && /* @__PURE__ */ jsx15(ai.components.Rewrite, { editor, selection, rewrite: ai.rewrite }, selection.id),
-      /* @__PURE__ */ jsx15(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
+      selection.tagName === "mj-text" && /* @__PURE__ */ jsx14("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
+      ai?.rewrite && REWRITABLE_TAGS.has(selection.tagName) && /* @__PURE__ */ jsx14(ai.components.Rewrite, { editor, selection, rewrite: ai.rewrite }, selection.id),
+      /* @__PURE__ */ jsx14(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
     ] })
   ] }) });
 }
 
 // src/ui/Toolbar.jsx
 import { ArrowLeft as ArrowLeft2, Monitor, Redo2, Smartphone, Undo2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Toolbar({
   title,
   status,
@@ -5568,8 +5552,8 @@ function Toolbar({
   compact = false
 }) {
   const t = useT();
-  const identity2 = /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsxs15(
+  const identity2 = /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    /* @__PURE__ */ jsxs14(
       Button,
       {
         variant: "ghost",
@@ -5577,50 +5561,50 @@ function Toolbar({
         onClick: onBack,
         "aria-label": compact ? t("Back") : void 0,
         children: [
-          /* @__PURE__ */ jsx16(ArrowLeft2, {}),
+          /* @__PURE__ */ jsx15(ArrowLeft2, {}),
           !compact && t("Back")
         ]
       }
     ),
-    /* @__PURE__ */ jsx16(Separator, { orientation: "vertical", className: "eb:h-5" }),
-    /* @__PURE__ */ jsxs15("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
-      /* @__PURE__ */ jsx16("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx16(TruncatedText, { children: title || t("New template") }) }),
-      /* @__PURE__ */ jsx16("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
+    /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "eb:h-5" }),
+    /* @__PURE__ */ jsxs14("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
+      /* @__PURE__ */ jsx15("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx15(TruncatedText, { children: title || t("New template") }) }),
+      /* @__PURE__ */ jsx15("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
     ] })
   ] });
-  const editing = /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
-      /* @__PURE__ */ jsx16(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx16(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx16(Undo2, {}) }) }),
-      /* @__PURE__ */ jsx16(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx16(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx16(Redo2, {}) }) })
+  const editing = /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
+      /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx15(Undo2, {}) }) }),
+      /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx15(Redo2, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx16(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs15(TabsList, { "aria-label": t("Device"), children: [
-      /* @__PURE__ */ jsxs15(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
-        /* @__PURE__ */ jsx16(Monitor, {}),
+    /* @__PURE__ */ jsx15(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs14(TabsList, { "aria-label": t("Device"), children: [
+      /* @__PURE__ */ jsxs14(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
+        /* @__PURE__ */ jsx15(Monitor, {}),
         !compact && t("Desktop")
       ] }),
-      /* @__PURE__ */ jsxs15(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
-        /* @__PURE__ */ jsx16(Smartphone, {}),
+      /* @__PURE__ */ jsxs14(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
+        /* @__PURE__ */ jsx15(Smartphone, {}),
         !compact && t("Mobile")
       ] })
     ] }) })
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs15("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
+    return /* @__PURE__ */ jsxs14("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
         identity2,
         primary
       ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:items-center eb:gap-2 eb:overflow-x-auto eb:px-2 eb:pb-2", "data-testid": "eb-toolbar-actions", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:items-center eb:gap-2 eb:overflow-x-auto eb:px-2 eb:pb-2", "data-testid": "eb-toolbar-actions", children: [
         editing,
-        /* @__PURE__ */ jsx16(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
-        /* @__PURE__ */ jsx16("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
+        /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
+        /* @__PURE__ */ jsx15("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
     identity2,
     editing,
-    /* @__PURE__ */ jsxs15("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
       actions,
       primary
     ] })
@@ -5630,7 +5614,7 @@ function Toolbar({
 // src/ui/Drawer.jsx
 import { useEffect as useEffect8 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Drawer({ open, side = "left", title, onClose, children, testId, header: header2 = true }) {
   const t = useT();
   useEffect8(() => {
@@ -5641,9 +5625,9 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header:
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
-  return /* @__PURE__ */ jsxs16("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
-    /* @__PURE__ */ jsx17("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
+    /* @__PURE__ */ jsx16("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs15(
       "section",
       {
         role: "dialog",
@@ -5653,11 +5637,11 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header:
           side === "left" ? "eb:left-0 eb:border-r eb:border-border" : "eb:right-0 eb:border-l eb:border-border"
         ),
         children: [
-          header2 && /* @__PURE__ */ jsxs16("header", { className: "eb:flex eb:h-10 eb:shrink-0 eb:items-center eb:justify-between eb:border-b eb:border-border eb:px-3", children: [
-            /* @__PURE__ */ jsx17("h3", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: title }),
-            /* @__PURE__ */ jsx17(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx17(X3, {}) })
+          header2 && /* @__PURE__ */ jsxs15("header", { className: "eb:flex eb:h-10 eb:shrink-0 eb:items-center eb:justify-between eb:border-b eb:border-border eb:px-3", children: [
+            /* @__PURE__ */ jsx16("h3", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: title }),
+            /* @__PURE__ */ jsx16(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx16(X3, {}) })
           ] }),
-          /* @__PURE__ */ jsx17("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
+          /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
         ]
       }
     )
@@ -5665,10 +5649,10 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header:
 }
 
 // src/ui/useEmailEditorState.js
-import { useCallback as useCallback2, useEffect as useEffect9, useRef as useRef7, useState as useState13 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect9, useRef as useRef7, useState as useState12 } from "react";
 var DIRTY_CHECK_MS = 150;
 function useEmailEditorState(editor) {
-  const [state, setState] = useState13(() => ({
+  const [state, setState] = useState12(() => ({
     status: editor?.status || "idle",
     selection: null,
     canUndo: false,
@@ -5749,7 +5733,7 @@ function useEmailEditorState(editor) {
 }
 
 // src/ui/EmailBuilder.jsx
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var EMPTY_META = { name: "", subject: "", preheader: "", description: "" };
 function metaOf(template) {
   return {
@@ -5787,7 +5771,7 @@ function Builder({
   );
   const storage = useMemo5(() => injectedStorage || createHttpStorage(), [injectedStorage]);
   const systemVariables = useMemo5(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
-  const [customVariables, setCustomVariables] = useState14([]);
+  const [customVariables, setCustomVariables] = useState13([]);
   const variables = useMemo5(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
   const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
   const reloadVariables = useCallback3(async () => {
@@ -5821,20 +5805,20 @@ function Builder({
   const state = useEmailEditorState(editor);
   const autosaveOn = isFeatureEnabled("autosave");
   const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
-  const [template, setTemplate] = useState14({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
-  const [boot, setBoot] = useState14({ status: "loading", document: null, mjml: null, draft: false, message: null });
-  const [meta, setMeta] = useState14(EMPTY_META);
-  const [savedMeta, setSavedMeta] = useState14(EMPTY_META);
-  const [saving, setSaving] = useState14(null);
-  const [showErrors, setShowErrors] = useState14(false);
-  const [autosaveBlocked, setAutosaveBlocked] = useState14(null);
-  const [engineError, setEngineError] = useState14(null);
-  const [attempt, setAttempt] = useState14(0);
+  const [template, setTemplate] = useState13({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
+  const [boot, setBoot] = useState13({ status: "loading", document: null, mjml: null, draft: false, message: null });
+  const [meta, setMeta] = useState13(EMPTY_META);
+  const [savedMeta, setSavedMeta] = useState13(EMPTY_META);
+  const [saving, setSaving] = useState13(null);
+  const [showErrors, setShowErrors] = useState13(false);
+  const [autosaveBlocked, setAutosaveBlocked] = useState13(null);
+  const [engineError, setEngineError] = useState13(null);
+  const [attempt, setAttempt] = useState13(0);
   const rootRef = useRef8(null);
   const layout2 = useLayoutWidth(rootRef);
   const compact = layout2 !== "wide";
   const blocksInDrawer = layout2 === "narrow";
-  const [drawer, setDrawer] = useState14(null);
+  const [drawer, setDrawer] = useState13(null);
   const closeDrawer = useCallback3(() => setDrawer(null), []);
   useEffect10(() => {
     if (!compact) setDrawer(null);
@@ -6103,7 +6087,7 @@ function Builder({
   const featuresWith = (slot) => emailBuilderFeatures.list((f) => f.enabled !== false && Boolean(f[slot]) && (f.isAvailable ? f.isAvailable(featureContext) : true));
   const toolbarFeatures = featuresWith("toolbar");
   const canvasBars = featuresWith("canvasBar");
-  const properties = /* @__PURE__ */ jsx18(
+  const properties = /* @__PURE__ */ jsx17(
     PropertiesPanel,
     {
       onDismiss: compact ? closeDrawer : null,
@@ -6113,13 +6097,13 @@ function Builder({
       onMetaChange: setMeta,
       changes: state.changes,
       showErrors,
-      actions: /* @__PURE__ */ jsx18(ElementActions, { editor, selection: state.selection }),
+      actions: /* @__PURE__ */ jsx17(ElementActions, { editor, selection: state.selection }),
       services,
       ai,
       variables
     }
   );
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: rootRef,
@@ -6129,7 +6113,7 @@ function Builder({
       "data-layout": layout2,
       "data-template-id": template.id || "",
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx17(
           Toolbar,
           {
             title: meta.name,
@@ -6145,19 +6129,19 @@ function Builder({
             compact,
             actions: [
               // The AI module's button first, when the host gave the module.
-              ai?.proofread && /* @__PURE__ */ jsx18(ai.components.Proofread, { context: featureContext, proofread: ai.proofread }, "ai-proofread"),
+              ai?.proofread && /* @__PURE__ */ jsx17(ai.components.Proofread, { context: featureContext, proofread: ai.proofread }, "ai-proofread"),
               ...toolbarFeatures.map((feature) => {
                 const Action = feature.toolbar;
-                return /* @__PURE__ */ jsx18(Action, { context: featureContext }, feature.id);
+                return /* @__PURE__ */ jsx17(Action, { context: featureContext }, feature.id);
               })
             ].filter(Boolean),
-            primary: /* @__PURE__ */ jsxs17(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
-              saving === "manual" ? /* @__PURE__ */ jsx18(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx18(Save, {}),
+            primary: /* @__PURE__ */ jsxs16(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
+              saving === "manual" ? /* @__PURE__ */ jsx17(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx17(Save, {}),
               t("Save")
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             className: cn(
@@ -6167,12 +6151,12 @@ function Builder({
               layout2 === "narrow" && "eb:grid-cols-1"
             ),
             children: [
-              !blocksInDrawer && /* @__PURE__ */ jsx18(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
-              /* @__PURE__ */ jsx18("div", { className: "eb:relative eb:flex eb:min-w-0 eb:flex-col eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs17("div", { role: "alert", className: "eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:p-6 eb:text-center", children: [
-                /* @__PURE__ */ jsx18(AlertTriangle, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx18("p", { className: "eb:text-[13px] eb:text-foreground", children: boot.status === "error" ? t("The template could not be loaded.") : t("The builder could not start.") }),
-                /* @__PURE__ */ jsx18("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
-                engineError && /* @__PURE__ */ jsx18(
+              !blocksInDrawer && /* @__PURE__ */ jsx17(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
+              /* @__PURE__ */ jsx17("div", { className: "eb:relative eb:flex eb:min-w-0 eb:flex-col eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs16("div", { role: "alert", className: "eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:p-6 eb:text-center", children: [
+                /* @__PURE__ */ jsx17(AlertTriangle, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx17("p", { className: "eb:text-[13px] eb:text-foreground", children: boot.status === "error" ? t("The template could not be loaded.") : t("The builder could not start.") }),
+                /* @__PURE__ */ jsx17("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
+                engineError && /* @__PURE__ */ jsx17(
                   Button,
                   {
                     variant: "outline",
@@ -6184,12 +6168,12 @@ function Builder({
                     children: t("Retry")
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs17(Fragment8, { children: [
+              ] }) : /* @__PURE__ */ jsxs16(Fragment8, { children: [
                 canvasBars.map((feature) => {
                   const Bar = feature.canvasBar;
-                  return /* @__PURE__ */ jsx18(Bar, { context: featureContext }, feature.id);
+                  return /* @__PURE__ */ jsx17(Bar, { context: featureContext }, feature.id);
                 }),
-                /* @__PURE__ */ jsx18("div", { className: "eb:relative eb:min-h-0 eb:flex-1", children: boot.status === "ready" && /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx17("div", { className: "eb:relative eb:min-h-0 eb:flex-1", children: boot.status === "ready" && /* @__PURE__ */ jsx17(
                   EmailCanvas,
                   {
                     editor,
@@ -6199,14 +6183,14 @@ function Builder({
                   },
                   attempt
                 ) }),
-                !ready && /* @__PURE__ */ jsxs17("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
-                  /* @__PURE__ */ jsx18(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx18("span", { className: "eb:sr-only", children: t("Loading the builder") })
+                !ready && /* @__PURE__ */ jsxs16("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ jsx17(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx17("span", { className: "eb:sr-only", children: t("Loading the builder") })
                 ] })
               ] }) }),
               !compact && properties,
-              blocksInDrawer && /* @__PURE__ */ jsx18(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx18(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
-              compact && /* @__PURE__ */ jsx18(
+              blocksInDrawer && /* @__PURE__ */ jsx17(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx17(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
+              compact && /* @__PURE__ */ jsx17(
                 Drawer,
                 {
                   open: drawer === "properties",
@@ -6221,12 +6205,12 @@ function Builder({
             ]
           }
         ),
-        compact && /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2 eb:border-t eb:border-border eb:px-2 eb:py-2", "data-testid": "eb-compact-bar", children: [
-          blocksInDrawer && /* @__PURE__ */ jsxs17(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
-            /* @__PURE__ */ jsx18(Plus2, {}),
+        compact && /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2 eb:border-t eb:border-border eb:px-2 eb:py-2", "data-testid": "eb-compact-bar", children: [
+          blocksInDrawer && /* @__PURE__ */ jsxs16(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
+            /* @__PURE__ */ jsx17(Plus3, {}),
             t("Add a block")
           ] }),
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs16(
             Button,
             {
               variant: state.selection ? "default" : "outline",
@@ -6235,14 +6219,14 @@ function Builder({
               disabled: !ready,
               onClick: () => setDrawer("properties"),
               children: [
-                /* @__PURE__ */ jsx18(SlidersHorizontal, {}),
-                /* @__PURE__ */ jsx18("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
+                /* @__PURE__ */ jsx17(SlidersHorizontal, {}),
+                /* @__PURE__ */ jsx17("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx18(NoticeArea, {}),
-        ai?.key && ai.components.Connect && /* @__PURE__ */ jsx18(ai.components.Connect, { aiKey: ai.key })
+        /* @__PURE__ */ jsx17(NoticeArea, {}),
+        ai?.key && ai.components.Connect && /* @__PURE__ */ jsx17(ai.components.Connect, { aiKey: ai.key })
       ]
     }
   );
@@ -6253,7 +6237,7 @@ function EmailBuilder({ locale = "en", messages, onNotify, ai: aiProp = null, ..
     () => ai ? { ...messagesOf(ai.messages, locale), ...messages } : messages,
     [ai, locale, messages]
   );
-  return /* @__PURE__ */ jsx18(UiProvider, { locale, messages: allMessages, onNotify, children: /* @__PURE__ */ jsx18(Builder, { ...props, ai, templateId: props.templateId ?? null }) });
+  return /* @__PURE__ */ jsx17(UiProvider, { locale, messages: allMessages, onNotify, children: /* @__PURE__ */ jsx17(Builder, { ...props, ai, templateId: props.templateId ?? null }) });
 }
 function useAiModule(value) {
   const valid = Boolean(value && typeof value === "object" && /** @type {any} */
@@ -6272,7 +6256,7 @@ function useAiModule(value) {
 // src/ui/EmailBuilderBoundary.jsx
 import { Component } from "react";
 import { AlertTriangle as AlertTriangle2, ArrowLeft as ArrowLeft3, RefreshCw } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var isChunkError = (error) => error?.name === "ChunkLoadError" || /Loading (CSS )?chunk .* failed/i.test(String(error?.message || ""));
 var english = (text) => text;
 var EmailBuilderBoundary = class extends Component {
@@ -6297,23 +6281,23 @@ var EmailBuilderBoundary = class extends Component {
     const { error, attempt } = this.state;
     const t = this.props.t || english;
     if (!error) {
-      return /* @__PURE__ */ jsx19("div", { style: { height: "100%" }, children: this.props.children }, attempt);
+      return /* @__PURE__ */ jsx18("div", { style: { height: "100%" }, children: this.props.children }, attempt);
     }
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         role: "alert",
         className: "eb-root eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-3 eb:p-6 eb:text-center",
         children: [
-          /* @__PURE__ */ jsx19(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx19("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
-          /* @__PURE__ */ jsxs18("div", { className: "eb:flex eb:gap-2", children: [
-            this.props.onClose && /* @__PURE__ */ jsxs18(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
-              /* @__PURE__ */ jsx19(ArrowLeft3, {}),
+          /* @__PURE__ */ jsx18(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx18("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
+          /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:gap-2", children: [
+            this.props.onClose && /* @__PURE__ */ jsxs17(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
+              /* @__PURE__ */ jsx18(ArrowLeft3, {}),
               t("Back")
             ] }),
-            /* @__PURE__ */ jsxs18(Button, { size: "sm", onClick: this.retry, children: [
-              /* @__PURE__ */ jsx19(RefreshCw, {}),
+            /* @__PURE__ */ jsxs17(Button, { size: "sm", onClick: this.retry, children: [
+              /* @__PURE__ */ jsx18(RefreshCw, {}),
               t("Retry")
             ] })
           ] })
@@ -6341,4 +6325,4 @@ export {
   EmailBuilder,
   EmailBuilderBoundary
 };
-//# sourceMappingURL=chunk-G7G3TRWG.js.map
+//# sourceMappingURL=chunk-2ZRGQFX6.js.map