best-email-builder 0.12.0 → 0.13.0

package/dist/{chunk-OACK2DIW.js → chunk-G7G3TRWG.js}

@@ -6,17 +6,17 @@ import {
   useLayoutWidth,
   useSearchShortcut,
   withThumbnailImages
-} from "./chunk-UUS325J7.js";
+} from "./chunk-LSOR4OII.js";
 import {
   BRAND_NOTES,
   countImagesWithoutPicture,
   logoWidthFor
-} from "./chunk-MOWQZKIQ.js";
+} from "./chunk-Q2ZUJFOY.js";
 import {
   cleanRichText,
   escapeText,
   textOfHtml
-} from "./chunk-RONYPWDK.js";
+} from "./chunk-UGF3YJ64.js";
 import {
   Button,
   Dialog,
@@ -51,7 +51,7 @@ import {
   createHttpStorage,
   useT,
   useUi
-} from "./chunk-LAUNZIFX.js";
+} from "./chunk-6QTSXJG4.js";
 import {
   DEFAULT_BUTTON_URL,
   EMAIL_BUILDER_VERSION,
@@ -94,10 +94,10 @@ import {
   setAttributes,
   setContent,
   toProject
-} from "./chunk-LZYDCWVH.js";
+} from "./chunk-Q5UPFM7J.js";
 import {
   isSafeUrl
-} from "./chunk-46ZVS2VX.js";
+} from "./chunk-A4KF7NMP.js";
 import {
   CUSTOM_GROUP,
   DEFAULT_VARIABLES,
@@ -110,7 +110,7 @@ import {
   tokenOf,
   translatorFor,
   validateCustomVariable
-} from "./chunk-JFIXYIZ3.js";
+} from "./chunk-ZTUW25BG.js";
 
 // src/core/events.js
 function createEmitter({ onError } = {}) {
@@ -450,6 +450,19 @@ function createEmailEditor({ adapter, blocks, features = null, t = identity }) {
       requireReady("insertLink");
       return adapter.insertLink(String(href || ""), String(label || href || ""));
     },
+    /**
+     * Shows a text where `insertText` would put it, without inserting it (a
+     * variable under the pointer). False if nothing would take it, or if the
+     * engine cannot preview. Not ready yet: nothing to show, no error.
+     */
+    previewText(text) {
+      if (status !== "ready" || !adapter.previewText) return false;
+      return adapter.previewText(String(text ?? ""));
+    },
+    /** Takes the previewed text away. */
+    clearPreview() {
+      if (status === "ready") adapter.clearPreview?.();
+    },
     undo() {
       requireReady("undo");
       adapter.undo();
@@ -1424,21 +1437,113 @@ var versionsFeature = {
   toolbar: VersionsMenu
 };
 
+// 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 useState4 } from "react";
-import { Braces as Braces2 } from "lucide-react";
+import { useState as useState5 } from "react";
+import { Braces as Braces3 } from "lucide-react";
 
 // src/features/variables/VariableDialog.jsx
-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";
+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";
 function VariableDialog({ open, onOpenChange, variable = null, initialLabel = "", variables, storage, onSaved, onDeleted }) {
   const { t, notify, confirm } = useUi();
   const editing = Boolean(variable);
-  const [form, setForm] = useState2({ label: "", key: "", group: "", sample: "", fallback: "" });
-  const [keyTouched, setKeyTouched] = useState2(false);
-  const [errors, setErrors] = useState2({});
-  const [busy, setBusy] = useState2(false);
+  const [form, setForm] = useState3({ label: "", key: "", group: "", sample: "", fallback: "" });
+  const [keyTouched, setKeyTouched] = useState3(false);
+  const [errors, setErrors] = useState3({});
+  const [busy, setBusy] = useState3(false);
   useEffect(() => {
     if (!open) return;
     setForm(
@@ -1505,9 +1610,9 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
       setBusy(false);
     }
   };
-  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(
+  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(
       Input,
       {
         id: `eb-var-${name}`,
@@ -1518,23 +1623,23 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
         ...props
       }
     ),
-    (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 })
+    (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 })
   ] });
-  return /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(
     DialogContent,
     {
       className: "eb:sm:max-w-[440px]",
       onMouseDown: (e) => e.stopPropagation(),
       onCloseAutoFocus: (e) => e.preventDefault(),
       children: [
-        /* @__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__ */ 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__ */ jsxs2("form", { onSubmit: submit, className: "eb:space-y-3", noValidate: true, children: [
+        /* @__PURE__ */ jsxs3("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",
@@ -1542,9 +1647,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__ */ jsxs2("div", { className: "eb:space-y-1.5", children: [
-            /* @__PURE__ */ jsx2(Label, { htmlFor: "eb-var-group", children: t("Group") }),
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs3("div", { className: "eb:space-y-1.5", children: [
+            /* @__PURE__ */ jsx3(Label, { htmlFor: "eb-var-group", children: t("Group") }),
+            /* @__PURE__ */ jsx3(
               Input,
               {
                 id: "eb-var-group",
@@ -1555,21 +1660,21 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
                 placeholder: t(CUSTOM_GROUP)
               }
             ),
-            /* @__PURE__ */ jsx2("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx2("option", { value: g }, g)) })
+            /* @__PURE__ */ jsx3("datalist", { id: "eb-var-groups", children: groups.map((g) => /* @__PURE__ */ jsx3("option", { value: g }, g)) })
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "eb:grid eb:grid-cols-2 eb:gap-3", children: [
+          /* @__PURE__ */ jsxs3("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__ */ 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, {}),
+          /* @__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, {}),
               t("Delete")
             ] }),
-            /* @__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" }),
+            /* @__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" }),
                 editing ? t("Save") : t("Create")
               ] })
             ] })
@@ -1581,13 +1686,13 @@ function VariableDialog({ open, onOpenChange, variable = null, initialLabel = ""
 }
 
 // src/features/variables/VariablePicker.jsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState4 } from "react";
 import { Pencil, Plus, Search } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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] = useState3("");
-  const [active, setActive] = useState3(0);
+  const [query, setQuery] = useState4("");
+  const [active, setActive] = useState4(0);
   const listRef = useRef(null);
   const searchRef = useRef(
     /** @type {HTMLInputElement|null} */
@@ -1619,10 +1724,10 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
       else if (onCreate && query.trim()) onCreate(query.trim());
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:max-h-[min(440px,70vh)] eb:flex-col", "data-testid": "variable-picker", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "eb:relative eb:border-b eb:border-border eb:p-2", children: [
-      /* @__PURE__ */ jsx3(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__ */ jsx3(
+  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,
@@ -1636,29 +1741,29 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
           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__ */ jsx3(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-4 eb:-translate-y-1/2" })
+      /* @__PURE__ */ jsx4(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-4 eb:-translate-y-1/2" })
     ] }),
-    /* @__PURE__ */ jsxs3("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__ */ jsxs3("div", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: [
-        /* @__PURE__ */ jsx3("p", { children: t("No variable found.") }),
-        onCreate && query.trim() && /* @__PURE__ */ jsxs3(
+    /* @__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__ */ jsx3(Plus, { className: "eb:size-3.5" }),
+              /* @__PURE__ */ jsx4(Plus, { className: "eb:size-3.5" }),
               t("Create \u201C{name}\u201D", { name: query.trim() })
             ]
           }
         )
       ] }),
-      groups.map((group) => /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": t(group), children: [
-        /* @__PURE__ */ jsx3("p", { className: "eb:px-2 eb:pt-2 eb:pb-1 eb:text-[11px] eb:text-foreground-muted", children: t(group) }),
+      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__ */ jsxs3(
+          return /* @__PURE__ */ jsxs4(
             "div",
             {
               "data-active": index === active,
@@ -1668,7 +1773,7 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
               ),
               onMouseEnter: () => setActive(index),
               children: [
-                /* @__PURE__ */ jsxs3(
+                /* @__PURE__ */ jsxs4(
                   "button",
                   {
                     type: "button",
@@ -1679,12 +1784,12 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
                     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__ */ jsx3("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate", children: variable.custom ? variable.label : t(variable.label) }),
-                      /* @__PURE__ */ jsx3("code", { className: "eb:shrink-0 eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: tokenOf(variable) })
+                      /* @__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__ */ jsx3(
+                onEdit && variable.custom && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -1692,7 +1797,7 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
                     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__ */ jsx3(Pencil, { className: "eb:size-3" })
+                    children: /* @__PURE__ */ jsx4(Pencil, { className: "eb:size-3" })
                   }
                 )
               ]
@@ -1702,14 +1807,14 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
         })
       ] }, group))
     ] }),
-    onCreate && /* @__PURE__ */ jsx3("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs3(
+    onCreate && /* @__PURE__ */ jsx4("div", { className: "eb:border-t eb:border-border eb:p-1", children: /* @__PURE__ */ jsxs4(
       "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__ */ jsx3(Plus, { className: "eb:size-4" }),
+          /* @__PURE__ */ jsx4(Plus, { className: "eb:size-4" }),
           t("New variable")
         ]
       }
@@ -1718,12 +1823,12 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
 }
 
 // src/features/variables/VariablesMenu.jsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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] = useState4(false);
-  const [dialog, setDialog] = useState4(null);
+  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));
@@ -1740,9 +1845,9 @@ function VariablesMenu({ context }) {
       setDialog({ variable, label: "" });
     }
   } : {};
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx5(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
         Button,
         {
           variant: "outline",
@@ -1750,23 +1855,23 @@ function VariablesMenu({ context }) {
           disabled: !ready,
           onPointerDown: (e) => e.pointerType === "mouse" && e.preventDefault(),
           children: [
-            /* @__PURE__ */ jsx4(Braces2, {}),
+            /* @__PURE__ */ jsx5(Braces3, {}),
             t("Variables")
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         PopoverContent,
         {
           align: "end",
           className: "eb:w-80 eb:p-0",
           onCloseAutoFocus: (e) => e.preventDefault(),
           onMouseDown: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsx4(VariablePicker, { variables, onPick: insert, ...manage })
+          children: /* @__PURE__ */ jsx5(VariablePicker, { variables, onPick: insert, ...manage })
         }
       )
     ] }),
-    canManageVariables && /* @__PURE__ */ jsx4(
+    canManageVariables && /* @__PURE__ */ jsx5(
       VariableDialog,
       {
         open: Boolean(dialog),
@@ -1801,7 +1906,8 @@ var variablesFeature = {
   id: "variables",
   label: "Variables",
   order: 10,
-  toolbar: VariablesMenu
+  toolbar: VariablesMenu,
+  canvasBar: VariablesBar
 };
 
 // src/features/preview/index.js
@@ -1814,9 +1920,9 @@ var previewFeature = {
 };
 
 // src/features/test-email/TestEmailButton.jsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { CheckCircle2, Loader2 as Loader22, Send, XCircle } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var KEY = "best-email-builder:test-addresses";
 function readAddresses(fallback) {
   try {
@@ -1834,10 +1940,10 @@ function rememberAddresses(value) {
 function TestEmailButton({ context }) {
   const { editor, ready, meta, storage, testRecipients = [] } = context;
   const { t, notify } = useUi();
-  const [open, setOpen] = useState5(false);
-  const [addresses, setAddresses] = useState5("");
-  const [sending, setSending] = useState5(false);
-  const [report, setReport] = useState5(null);
+  const [open, setOpen] = useState6(false);
+  const [addresses, setAddresses] = useState6("");
+  const [sending, setSending] = useState6(false);
+  const [report, setReport] = useState6(null);
   const emails = addresses.split(/[,;\s]+/).map((a) => a.trim()).filter(Boolean);
   const send = async () => {
     if (!emails.length) return;
@@ -1860,8 +1966,8 @@ function TestEmailButton({ context }) {
       setSending(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6(
       Button,
       {
         variant: "outline",
@@ -1873,22 +1979,22 @@ function TestEmailButton({ context }) {
           setOpen(true);
         },
         children: [
-          /* @__PURE__ */ jsx5(Send, {}),
+          /* @__PURE__ */ jsx6(Send, {}),
           t("Test")
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "eb:sm:max-w-[460px]", children: [
-      /* @__PURE__ */ jsx5(DialogHeader, { children: /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-        /* @__PURE__ */ jsx5("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__ */ jsx5(Send, { className: "eb:size-5" }) }),
-        /* @__PURE__ */ jsxs5("div", { children: [
-          /* @__PURE__ */ jsx5(DialogTitle, { className: "eb:text-base eb:font-normal", children: t("Send a test") }),
-          /* @__PURE__ */ jsx5(DialogDescription, { className: "eb:text-[13px]", children: t("The email on screen, to reviewers\u2019 addresses.") })
+    /* @__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__ */ jsxs5("div", { className: "eb:space-y-2", children: [
-        /* @__PURE__ */ jsx5(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
-        /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsxs6("div", { className: "eb:space-y-2", children: [
+        /* @__PURE__ */ jsx6(Label, { htmlFor: "eb-test-addresses", children: t("Addresses") }),
+        /* @__PURE__ */ jsx6(
           Textarea,
           {
             id: "eb-test-addresses",
@@ -1899,20 +2005,20 @@ function TestEmailButton({ context }) {
           }
         )
       ] }),
-      report && /* @__PURE__ */ jsxs5("ul", { className: "eb:space-y-1", "aria-label": t("Results"), children: [
-        report.results.map((r) => /* @__PURE__ */ jsxs5("li", { className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-foreground", children: [
-          r.ok ? /* @__PURE__ */ jsx5(CheckCircle2, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-success", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(XCircle, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs5("span", { className: "eb:min-w-0 eb:break-all", children: [
+      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: [
             r.email,
             r.error ? ` \u2014 ${r.error}` : ""
           ] })
         ] }, r.email)),
-        report.invalid.map((email2) => /* @__PURE__ */ jsx5("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email: email2 }) }, `invalid-${email2}`))
+        report.invalid.map((email2) => /* @__PURE__ */ jsx6("li", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Ignored (invalid): {email}", { email: email2 }) }, `invalid-${email2}`))
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-        /* @__PURE__ */ jsx5(Button, { variant: "outline", onClick: () => setOpen(false), children: t("Close") }),
-        /* @__PURE__ */ jsxs5(Button, { onClick: send, disabled: sending || !emails.length, children: [
-          sending ? /* @__PURE__ */ jsx5(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx5(Send, {}),
+      /* @__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, {}),
           t("Send")
         ] })
       ] })
@@ -1930,9 +2036,9 @@ var testEmailFeature = {
 };
 
 // src/features/templates/TemplateGallery.jsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState6 } from "react";
+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 jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } 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)]";
@@ -1940,12 +2046,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__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "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__ */ jsx6(
+      children: /* @__PURE__ */ jsx7(
         "iframe",
         {
           title,
@@ -1967,10 +2073,10 @@ function Thumbnail({ html, title }) {
 function TemplateGalleryButton({ context }) {
   const { editor, ready, templates, isDirty, markDirty, template, setMeta } = context;
   const { t, confirm, notify } = useUi();
-  const [open, setOpen] = useState6(false);
-  const [query, setQuery] = useState6("");
-  const [chosen, setChosen] = useState6(() => /* @__PURE__ */ new Set());
-  const [rendered, setRendered] = useState6({});
+  const [open, setOpen] = useState7(false);
+  const [query, setQuery] = useState7("");
+  const [chosen, setChosen] = useState7(() => /* @__PURE__ */ new Set());
+  const [rendered, setRendered] = useState7({});
   useEffect3(() => {
     if (!open || !ready) return void 0;
     let alive = true;
@@ -2027,8 +2133,8 @@ function TemplateGalleryButton({ context }) {
     setOpen(false);
     notify("success", t("\u201C{name}\u201D template applied.", { name: entry.name }));
   };
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsxs7(
       Button,
       {
         variant: "outline",
@@ -2040,12 +2146,12 @@ function TemplateGalleryButton({ context }) {
           setOpen(true);
         },
         children: [
-          /* @__PURE__ */ jsx6(LayoutTemplate, {}),
+          /* @__PURE__ */ jsx7(LayoutTemplate, {}),
           t("Templates")
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs7(
       DialogContent,
       {
         className: "eb:flex eb:h-[min(48rem,calc(100dvh-2rem))] eb:flex-col eb:sm:max-w-4xl",
@@ -2057,14 +2163,14 @@ function TemplateGalleryButton({ context }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsxs6(DialogHeader, { children: [
-            /* @__PURE__ */ jsx6(DialogTitle, { children: t("Start from a template") }),
-            /* @__PURE__ */ jsx6(DialogDescription, { children: t("Picking a template replaces the email being edited.") })
+          /* @__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__ */ jsxs6("div", { className: "eb:flex eb:shrink-0 eb:flex-col eb:gap-3", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "eb:relative", children: [
-              /* @__PURE__ */ jsx6(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__ */ jsx6(
+          /* @__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(
                 Input,
                 {
                   type: "search",
@@ -2075,20 +2181,20 @@ function TemplateGalleryButton({ context }) {
                   className: "eb:pr-8 eb:pl-8 eb:[&::-webkit-search-cancel-button]:hidden"
                 }
               ),
-              query && /* @__PURE__ */ jsx6(
+              query && /* @__PURE__ */ jsx7(
                 "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__ */ jsx6(X, { className: "eb:size-3.5 eb:text-foreground-muted eb:hover:text-foreground" })
+                  children: /* @__PURE__ */ jsx7(X, { className: "eb:size-3.5 eb:text-foreground-muted eb:hover:text-foreground" })
                 }
               )
             ] }),
-            tags.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "eb:flex eb:items-start eb:gap-1.5", children: [
-              /* @__PURE__ */ jsx6("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__ */ jsx6(FilterChip, { pressed: chosen.has(tag), onClick: () => toggle(tag), children: tag }, tag)) }),
-              /* @__PURE__ */ jsx6(
+            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(
                 FilterReset,
                 {
                   label: t("Clear the tag filters"),
@@ -2099,7 +2205,7 @@ function TemplateGalleryButton({ context }) {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx6("div", { className: "eb:-m-1 eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:p-1", children: shown.length === 0 ? /* @__PURE__ */ jsx6("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__ */ jsx6("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__ */ jsx6("li", { className: "eb:min-w-0", children: /* @__PURE__ */ jsxs6(
+          /* @__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(
             "button",
             {
               type: "button",
@@ -2108,10 +2214,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__ */ jsx6(Thumbnail, { html: card.html, title: card.name }),
-                /* @__PURE__ */ jsxs6("span", { className: "eb:block eb:min-w-0 eb:px-1", children: [
-                  /* @__PURE__ */ jsx6("span", { className: cn(FADE_LINE, "eb:text-[13px] eb:font-medium eb:text-foreground"), children: card.name }),
-                  /* @__PURE__ */ jsx6("span", { className: cn(FADE_LINE, "eb:text-[12px] eb:text-foreground-muted"), children: card.description })
+                /* @__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 })
                 ] })
               ]
             }
@@ -2132,14 +2238,14 @@ var templatesFeature = {
 };
 
 // src/features/brand/BrandButton.jsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState8 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState9 } 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 useState7 } from "react";
+import { useState as useState8 } from "react";
 import { HexAlphaColorPicker } from "react-colorful";
 import { Check } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var PRESET_COLORS = [
   "#8B5CF6",
   "#A78BFA",
@@ -2170,20 +2276,20 @@ function normalizeHex(v) {
 }
 function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
   const t = useT();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const valid = isValidHex(value);
   const normalized = valid ? normalizeHex(value) : "";
   const emit = (hex) => onChange(normalizeHex(hex));
-  return /* @__PURE__ */ jsxs7("div", { className: cn("eb:flex eb:gap-2", className), children: [
-    /* @__PURE__ */ jsxs7(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(
+  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(
         "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__ */ jsx7(
+          children: /* @__PURE__ */ jsx8(
             "span",
             {
               className: "eb:absolute eb:inset-0",
@@ -2193,18 +2299,18 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
           )
         }
       ) }),
-      /* @__PURE__ */ jsxs7(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
-        /* @__PURE__ */ jsx7("div", { className: "eb-picker", children: /* @__PURE__ */ jsx7(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
-        /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-          /* @__PURE__ */ jsx7(
+      /* @__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(
             "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__ */ jsx7("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
+              children: /* @__PURE__ */ jsx8("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             Input,
             {
               value: value || "",
@@ -2216,7 +2322,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx7("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__ */ jsx7(
+        /* @__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(
           "button",
           {
             type: "button",
@@ -2225,13 +2331,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__ */ jsx7(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__ */ 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)]" })
           },
           c
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Input,
       {
         id,
@@ -2246,7 +2352,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
 }
 
 // src/features/brand/BrandButton.jsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var toForm = (brand) => ({
   name: brand.name || "",
   logoUrl: brand.logoUrl || "",
@@ -2260,18 +2366,18 @@ 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] = useState8(false);
-  const [form, setForm] = useState8(() => toForm(brand || {}));
-  const [applyNow, setApplyNow] = useState8(true);
-  const [reading, setReading] = useState8(false);
-  const [readError, setReadError] = useState8("");
-  const [notes, setNotes] = useState8(
+  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(
     /** @type {string[]} */
     []
   );
-  const [uploading, setUploading] = useState8(false);
-  const [saving, setSaving] = useState8(false);
-  const [error, setError] = useState8("");
+  const [uploading, setUploading] = useState9(false);
+  const [saving, setSaving] = useState9(false);
+  const [error, setError] = useState9("");
   const abortRef = useRef2(
     /** @type {AbortController|null} */
     null
@@ -2393,11 +2499,11 @@ function BrandButton({ context }) {
     }
   };
   const swatch = brand?.primary;
-  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    /* @__PURE__ */ jsxs8(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, "data-testid": "eb-brand-button", children: [
-      /* @__PURE__ */ jsx8(Palette, {}),
+  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, {}),
       t("Brand"),
-      swatch && /* @__PURE__ */ jsx8(
+      swatch && /* @__PURE__ */ jsx9(
         "span",
         {
           "aria-hidden": "true",
@@ -2406,18 +2512,18 @@ function BrandButton({ context }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs9(
       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__ */ jsxs8(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-4", children: [
-            /* @__PURE__ */ jsx8(DialogTitle, { children: t("Your brand") }),
-            /* @__PURE__ */ jsx8(DialogDescription, { children: t("Set it once: new emails, templates and blocks take your logo, colors and font.") })
+          /* @__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__ */ jsxs8("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__ */ jsxs8(
+          /* @__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(
               "form",
               {
                 className: "eb:mb-5 eb:flex eb:flex-col eb:gap-1.5",
@@ -2426,11 +2532,11 @@ function BrandButton({ context }) {
                   readWebsite();
                 },
                 children: [
-                  /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-website", children: t("Your website") }),
-                  /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-2 eb:sm:flex-row", children: [
-                    /* @__PURE__ */ jsxs8("div", { className: "eb:relative eb:min-w-0 eb:flex-1", children: [
-                      /* @__PURE__ */ jsx8(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__ */ jsx8(
+                  /* @__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(
                         Input,
                         {
                           id: "eb-brand-website",
@@ -2444,28 +2550,28 @@ function BrandButton({ context }) {
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs8(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
-                      reading ? /* @__PURE__ */ jsx8(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx8(WandSparkles, {}),
+                    /* @__PURE__ */ jsxs9(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
+                      reading ? /* @__PURE__ */ jsx9(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx9(WandSparkles, {}),
                       t("Get my brand")
                     ] })
                   ] }),
-                  reading ? /* @__PURE__ */ jsx8("p", { role: "status", className: "eb:text-[12px] eb:text-foreground-muted", children: t("Reading the website\u2026") }) : readError ? /* @__PURE__ */ jsxs8("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-                    /* @__PURE__ */ jsx8(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+                  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" }),
                     readError
-                  ] }) : notes.length ? /* @__PURE__ */ jsx8("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__ */ jsx8("li", { children: t(BRAND_NOTES[note]) }, note)) }) : /* @__PURE__ */ jsx8("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__ */ 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.") })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs8("div", { className: "eb:grid eb:gap-6 eb:sm:grid-cols-[minmax(0,1fr)_220px]", children: [
-              /* @__PURE__ */ jsxs8("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__ */ jsx8("legend", { className: "eb:sr-only", children: t("Your brand") }),
-                /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-logo", children: t("Logo") }),
-                  /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:items-center eb:gap-3", children: [
-                    /* @__PURE__ */ jsx8("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__ */ jsx8("img", { src: form.logoUrl, alt: t("Logo"), className: "eb:max-h-10 eb:max-w-20 eb:object-contain" }) : /* @__PURE__ */ jsx8(ImageOff, { className: "eb:size-4 eb:text-foreground-muted", "aria-hidden": "true" }) }),
-                    /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-wrap eb:gap-2", children: [
-                      canUpload && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-                        /* @__PURE__ */ jsx8(
+            /* @__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(
                           "input",
                           {
                             ref: fileRef,
@@ -2478,18 +2584,18 @@ function BrandButton({ context }) {
                             onChange: pickLogo
                           }
                         ),
-                        /* @__PURE__ */ jsxs8(Button, { type: "button", variant: "outline", size: "sm", disabled: uploading, onClick: () => fileRef.current?.click(), children: [
-                          uploading ? /* @__PURE__ */ jsx8(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx8(Upload, {}),
+                        /* @__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, {}),
                           t("Upload")
                         ] })
                       ] }),
-                      form.logoUrl && /* @__PURE__ */ jsxs8(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
-                        /* @__PURE__ */ jsx8(Trash22, {}),
+                      form.logoUrl && /* @__PURE__ */ jsxs9(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
+                        /* @__PURE__ */ jsx9(Trash22, {}),
                         t("Remove")
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     Input,
                     {
                       id: "eb-brand-logo",
@@ -2500,11 +2606,11 @@ function BrandButton({ context }) {
                       className: "eb:text-[12px]"
                     }
                   ),
-                  logoInvalid && /* @__PURE__ */ jsx8("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
+                  logoInvalid && /* @__PURE__ */ jsx9("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
                 ] }),
-                /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-name", children: t("Company name") }),
-                  /* @__PURE__ */ jsx8(
+                /* @__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(
                     Input,
                     {
                       id: "eb-brand-name",
@@ -2515,36 +2621,36 @@ function BrandButton({ context }) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs8("div", { className: "eb:grid eb:gap-4 eb:sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                    /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-primary", children: t("Main color") }),
-                    /* @__PURE__ */ jsx8(ColorPicker, { id: "eb-brand-primary", value: form.primary, onChange: (primary) => set({ primary }), placeholder: PALETTE.navy }),
-                    /* @__PURE__ */ jsx8("p", { className: "eb:text-[11px] eb:text-foreground-muted", children: t("Buttons, banners, links") })
+                /* @__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__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                    /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-heading", children: t("Headings color") }),
-                    /* @__PURE__ */ jsx8(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-heading", children: t("Headings color") }),
+                    /* @__PURE__ */ jsx9(ColorPicker, { id: "eb-brand-heading", value: form.heading, onChange: (heading2) => set({ heading: heading2 }), placeholder: PALETTE.navy })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx8(Label, { htmlFor: "eb-brand-font", children: t("Font") }),
-                  /* @__PURE__ */ jsxs8(Select, { value: form.font || FONT_STACK, onValueChange: (font) => set({ font }), children: [
-                    /* @__PURE__ */ jsx8(SelectTrigger, { id: "eb-brand-font", children: /* @__PURE__ */ jsx8(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx8(SelectContent, { children: FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx8(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx8("span", { style: { fontFamily: option.value }, children: option.label }) }, option.value)) })
+                /* @__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__ */ jsx8(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
+              /* @__PURE__ */ jsx9(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
-            error && /* @__PURE__ */ jsxs8("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-              /* @__PURE__ */ jsx8(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+          /* @__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" }),
               error
             ] }),
-            /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:sm:flex-row eb:sm:items-center", children: [
-              /* @__PURE__ */ jsxs8("label", { className: "eb:flex eb:cursor-pointer eb:items-center eb:gap-2 eb:text-[13px] eb:sm:mr-auto", children: [
-                /* @__PURE__ */ jsx8(
+            /* @__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(
                   "input",
                   {
                     type: "checkbox",
@@ -2556,10 +2662,10 @@ function BrandButton({ context }) {
                 ),
                 t("Also apply to this email")
               ] }),
-              /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-                /* @__PURE__ */ jsx8(Button, { variant: "outline", size: "sm", onClick: () => close(false), children: t("Cancel") }),
-                /* @__PURE__ */ jsxs8(Button, { size: "sm", onClick: save, disabled: saving || reading || uploading || logoInvalid, "data-testid": "eb-brand-save", children: [
-                  saving && /* @__PURE__ */ jsx8(Loader23, { className: "eb:animate-spin" }),
+              /* @__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" }),
                   t("Save")
                 ] })
               ] })
@@ -2578,30 +2684,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__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-    /* @__PURE__ */ jsx8("span", { className: "eb:text-[12px] eb:font-medium eb:text-foreground-muted", children: t("Preview") }),
-    /* @__PURE__ */ jsx8(
+  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(
       "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__ */ jsxs8("div", { className: "eb:overflow-hidden eb:rounded-[3px]", style: { backgroundColor: PALETTE.white }, children: [
-          /* @__PURE__ */ jsx8("div", { className: "eb:px-3 eb:pt-3 eb:pb-2", children: brand.logoUrl ? /* @__PURE__ */ jsx8("img", { src: brand.logoUrl, alt: "", style: { width: Math.round((brand.logoWidth || 140) * 0.45), maxWidth: "100%" } }) : /* @__PURE__ */ jsx8("span", { className: "eb:text-[11px] eb:font-bold", style: { color: PALETTE.ink }, children: name }) }),
-          /* @__PURE__ */ jsxs8("div", { className: "eb:px-3 eb:py-4 eb:text-center", style: { backgroundColor: primary, color: onPrimary }, children: [
-            /* @__PURE__ */ jsx8("div", { className: "eb:text-[13px] eb:leading-tight eb:font-bold", children: t("Big news") }),
-            /* @__PURE__ */ jsx8("div", { className: "eb:mt-1 eb:text-[9px] eb:opacity-90", children: t("A short line under the title.") })
+        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.") })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:flex-col eb:gap-1.5 eb:px-3 eb:py-3", children: [
-            /* @__PURE__ */ jsx8("div", { className: "eb:text-[11px] eb:leading-tight eb:font-bold", style: { color: heading2 }, children: t("A headline") }),
-            /* @__PURE__ */ jsxs8("div", { className: "eb:text-[9px] eb:leading-snug", style: { color: PALETTE.ink }, children: [
+          /* @__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: [
               t("Some text, with"),
               " ",
-              /* @__PURE__ */ jsx8("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
+              /* @__PURE__ */ jsx9("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
               "."
             ] }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "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"),
@@ -2610,7 +2716,7 @@ function BrandPreview({ brand, fallbackName }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx8("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
+          /* @__PURE__ */ jsx9("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
         ] })
       }
     )
@@ -2921,6 +3027,9 @@ body { margin: 0; }
 .eb-node a { cursor: pointer; }
 [contenteditable="true"] { outline: none; cursor: text; caret-color: ${PRIMARY}; }
 td.eb-placeholder { outline: 1.5px dashed #c3cad6; outline-offset: -8px; }
+.eb-preview-text[data-typing]::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px;
+  vertical-align: -0.12em; background: currentColor; animation: eb-preview-caret 0.7s steps(1) infinite; }
+@keyframes eb-preview-caret { 50% { opacity: 0; } }
 .eb-placeholder { user-select: none; }
 
 #eb-ui { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483000;
@@ -3205,6 +3314,7 @@ function createCanvasView(options) {
     }
     syncAttributes(doc.body, parsed.body);
     morphChildren(doc.body, parsed.body, (element) => element === editingEl);
+    if (preview && !preview.el.isConnected) dropPreview();
     if (editingId && editingEl && !editingEl.isConnected) {
       const again = editableOf(editingId);
       if (again) {
@@ -3364,6 +3474,7 @@ function createCanvasView(options) {
   function startEditing(id, at = null) {
     if (editingId === id) return;
     finishEditing();
+    dropPreview();
     const el = editableOf(id);
     if (!el) return;
     editingId = id;
@@ -3380,10 +3491,18 @@ function createCanvasView(options) {
     refreshOverlays();
   }
   function contentOfEditing() {
-    return editingEl ? cleanRichText(editingEl.innerHTML, doc) : "";
+    if (!editingEl) return "";
+    let source = editingEl;
+    if (preview && editingEl.contains(preview.el)) {
+      source = /** @type {HTMLElement} */
+      editingEl.cloneNode(true);
+      source.querySelectorAll(`.${PREVIEW_CLASS}`).forEach((el) => el.remove());
+    }
+    return cleanRichText(source.innerHTML, doc);
   }
   function finishEditing() {
     if (!editingId || !editingEl) return;
+    dropPreview();
     const id = editingId;
     const html = contentOfEditing();
     editingEl.removeAttribute("contenteditable");
@@ -3439,6 +3558,90 @@ function createCanvasView(options) {
     } else placeCaret(null);
     return true;
   }
+  let preview = null;
+  const PREVIEW_CLASS = "eb-preview-text";
+  function previewSpot() {
+    if (editingEl) {
+      const range = savedRange && editingEl.contains(savedRange.commonAncestorContainer) ? savedRange.cloneRange() : null;
+      if (range) {
+        range.collapse(false);
+        return { range, prefix: "" };
+      }
+      return { parent: editingEl, prefix: "" };
+    }
+    const tag = selectedId ? info(selectedId)?.tag : null;
+    if (!selectedId || tag !== "mj-text" && tag !== "mj-button") return null;
+    const parent = tag === "mj-text" ? editableOf(selectedId) : elementOf(selectedId)?.querySelector("a, p");
+    return parent ? { parent, prefix: " " } : null;
+  }
+  function stepPreview() {
+    if (!preview) return;
+    const current = preview;
+    const { shown, target } = current;
+    const next = !target.startsWith(shown) ? shown.slice(0, -1) : shown.length < target.length ? target.slice(0, shown.length + 1) : null;
+    if (next === null) {
+      current.timer = 0;
+      current.el.removeAttribute("data-typing");
+      if (!target) dropPreview();
+      return;
+    }
+    current.shown = next;
+    current.el.textContent = next;
+    current.el.setAttribute("data-typing", "");
+    current.timer = win.setTimeout(stepPreview, next.length < shown.length ? 12 : 22);
+    scheduleOverlays();
+  }
+  function animatePreview() {
+    if (!preview || preview.timer) return;
+    if (win.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      preview.shown = preview.target;
+      preview.el.textContent = preview.target;
+      if (!preview.target) dropPreview();
+      scheduleOverlays();
+      return;
+    }
+    stepPreview();
+  }
+  function previewText(text) {
+    if (!text) {
+      hidePreview();
+      return false;
+    }
+    if (preview && !preview.el.isConnected) dropPreview();
+    if (!preview) {
+      const spot = previewSpot();
+      if (!spot) return false;
+      const el = doc.createElement("span");
+      el.className = PREVIEW_CLASS;
+      el.setAttribute("contenteditable", "false");
+      el.setAttribute("data-testid", "eb-canvas-preview");
+      if (spot.range) spot.range.insertNode(el);
+      else spot.parent?.appendChild(el);
+      preview = { el, prefix: spot.prefix, shown: "", target: "", timer: 0 };
+    }
+    preview.target = preview.prefix + text;
+    animatePreview();
+    return true;
+  }
+  function hidePreview() {
+    if (!preview) return;
+    preview.target = "";
+    animatePreview();
+  }
+  function dropPreview() {
+    if (!preview) return;
+    win.clearTimeout(preview.timer);
+    preview.el.remove();
+    preview = null;
+    scheduleOverlays();
+  }
+  function settlePreview() {
+    if (!preview) return;
+    win.clearTimeout(preview.timer);
+    preview.el.textContent = preview.target;
+    preview.el.removeAttribute("data-typing");
+    preview = null;
+  }
   const TEXT_BUTTONS = [
     ["bold", t("Bold (Ctrl+B)")],
     ["italic", t("Italic (Ctrl+I)")],
@@ -3760,6 +3963,7 @@ function createCanvasView(options) {
     /** @param {string|null} id */
     setSelection(id) {
       if (editingId && editingId !== id) finishEditing();
+      if (id !== selectedId) dropPreview();
       selectedId = id;
       refreshOverlays();
       if (id) {
@@ -3792,6 +3996,7 @@ function createCanvasView(options) {
     editingId: () => editingId,
     /** @param {string} text */
     insertText(text) {
+      dropPreview();
       if (!restoreCaret()) return false;
       doc.execCommand("insertText", false, text);
       options.onEditInput(
@@ -3803,6 +4008,7 @@ function createCanvasView(options) {
     },
     /** @param {string} html */
     insertHtml(html) {
+      dropPreview();
       if (!restoreCaret()) return false;
       doc.execCommand("insertHTML", false, html);
       options.onEditInput(
@@ -3812,8 +4018,12 @@ function createCanvasView(options) {
       );
       return true;
     },
+    previewText,
+    hidePreview,
+    settlePreview,
     destroy() {
       destroyed = true;
+      dropPreview();
       cancelDrag();
       resizeObserver.disconnect();
       if (overlayFrame) win.cancelAnimationFrame(overlayFrame);
@@ -4358,9 +4568,16 @@ function createNativeAdapter({ loadCompiler = defaultLoadCompiler } = {}) {
       if (view.editingId()) return view.insertText(text);
       const node = selectedId ? findNode(root, selectedId) : null;
       if (!node || !TEXT_TAGS.has(node.tag)) return false;
+      view.settlePreview();
       commit(setContent(root, node.id, `${node.content || ""} ${escapeText(text)}`));
       return true;
     },
+    previewText(text) {
+      return view ? view.previewText(text) : false;
+    },
+    clearPreview() {
+      view?.hidePreview();
+    },
     insertLink(href, label) {
       if (!view || !root) return false;
       const safeHref = escapeText(href).replace(/"/g, "&quot;");
@@ -4456,7 +4673,7 @@ function createDefaultEmailEditor(options = {}) {
 
 // src/ui/EmailCanvas.jsx
 import { useEffect as useEffect5, useRef as useRef3 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function EmailCanvas({ editor, document = null, onReady, onError, className }) {
   const ref = useRef3(null);
   const documentRef = useRef3(document);
@@ -4475,15 +4692,15 @@ function EmailCanvas({ editor, document = null, onReady, onError, className }) {
       editor.destroy();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx9("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
+  return /* @__PURE__ */ jsx10("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 useState13 } from "react";
+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";
 
 // src/features/brand/useBrand.js
-import { useCallback, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback, useEffect as useEffect6, useState as useState10 } from "react";
 var entries = /* @__PURE__ */ new WeakMap();
 function brandOf(storage) {
   let entry = entries.get(storage);
@@ -4504,7 +4721,7 @@ function brandOf(storage) {
   return created;
 }
 function useBrand(storage) {
-  const [brand, setState] = useState9(() => brandOf(storage).value);
+  const [brand, setState] = useState10(() => brandOf(storage).value);
   useEffect6(() => {
     const entry = brandOf(storage);
     setState(entry.value);
@@ -4633,7 +4850,7 @@ import {
   Type
 } from "lucide-react";
 import { useRef as useRef4 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var DRAG_THRESHOLD = 5;
 var ICONS2 = {
   Heading,
@@ -4659,7 +4876,7 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
   const t = useT();
   const Icon = ICONS2[block.icon] || Square;
   const press = useRef4(null);
-  return /* @__PURE__ */ jsx10(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx11(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
@@ -4699,8 +4916,8 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
         disabled && "eb:cursor-not-allowed eb:opacity-50"
       ),
       children: [
-        /* @__PURE__ */ jsx10(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx10("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
+        /* @__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) })
       ]
     }
   ) });
@@ -4708,12 +4925,12 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
 function BlockSidebar({ editor, disabled = false, onAdded }) {
   const t = useT();
   const blocks = editor.listBlocks();
-  return /* @__PURE__ */ jsx10("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__ */ 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) => {
     const items = blocks.filter((b) => b.kind === group.kind && b.mjml);
     if (!items.length) return null;
-    return /* @__PURE__ */ jsxs9("section", { className: "eb:space-y-2", children: [
-      /* @__PURE__ */ jsx10(SectionLabel, { children: t(group.title) }),
-      /* @__PURE__ */ jsx10("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx10(
+    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(
         BlockTile,
         {
           block,
@@ -4731,15 +4948,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 jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } 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__ */ jsxs10("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__ */ jsx11(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx11(
+  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(
       Button,
       {
         variant: "ghost",
@@ -4747,10 +4964,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": prevLabel,
         disabled: !selection.canMoveUp,
         onClick: () => editor.move(-1, selection.id),
-        children: /* @__PURE__ */ jsx11(Prev, {})
+        children: /* @__PURE__ */ jsx12(Prev, {})
       }
     ) }),
-    /* @__PURE__ */ jsx11(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx12(
       Button,
       {
         variant: "ghost",
@@ -4758,10 +4975,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": nextLabel,
         disabled: !selection.canMoveDown,
         onClick: () => editor.move(1, selection.id),
-        children: /* @__PURE__ */ jsx11(Next, {})
+        children: /* @__PURE__ */ jsx12(Next, {})
       }
     ) }),
-    /* @__PURE__ */ jsx11(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx12(
       Button,
       {
         variant: "ghost",
@@ -4769,10 +4986,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": t("Duplicate"),
         disabled: !selection.canDuplicate,
         onClick: () => editor.duplicate(selection.id),
-        children: /* @__PURE__ */ jsx11(Copy, {})
+        children: /* @__PURE__ */ jsx12(Copy, {})
       }
     ) }),
-    /* @__PURE__ */ jsx11(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx12(
       Button,
       {
         variant: "ghost",
@@ -4781,7 +4998,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__ */ jsx11(Trash23, {})
+        children: /* @__PURE__ */ jsx12(Trash23, {})
       }
     ) })
   ] });
@@ -4792,9 +5009,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 useState10 } from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState11 } from "react";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader24, Upload as Upload2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var COLOR_DEBOUNCE_MS = 250;
 function emailColor(value) {
   const v = String(value || "").trim();
@@ -4803,7 +5020,7 @@ function emailColor(value) {
   return null;
 }
 function useDraft(value, toDraft) {
-  const [draft, setDraft] = useState10(() => toDraft(value));
+  const [draft, setDraft] = useState11(() => toDraft(value));
   const ref = useRef5(null);
   const convert = useRef5(toDraft);
   convert.current = toDraft;
@@ -4816,10 +5033,10 @@ function useDraft(value, toDraft) {
 }
 var asText = (v) => v || "";
 function FieldLabel({ id, children }) {
-  return /* @__PURE__ */ jsx12(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
+  return /* @__PURE__ */ jsx13(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
 }
 function FieldError({ children }) {
-  return children ? /* @__PURE__ */ jsx12("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
+  return children ? /* @__PURE__ */ jsx13("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
 }
 function TextField({ id, property, value, fallback = "", onCommit, addon = null, error = null }) {
   const t = useT();
@@ -4850,13 +5067,13 @@ function TextField({ id, property, value, fallback = "", onCommit, addon = null,
     onKeyDown: keyDown,
     "aria-invalid": invalid || void 0
   };
-  return /* @__PURE__ */ jsxs11("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
-    property.type === "textarea" ? /* @__PURE__ */ jsx12(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:gap-2", children: [
-      /* @__PURE__ */ jsx12(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
+  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" }),
       addon
-    ] }) : /* @__PURE__ */ jsx12(Input, { ...shared }),
-    /* @__PURE__ */ jsx12(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
+    ] }) : /* @__PURE__ */ jsx13(Input, { ...shared }),
+    /* @__PURE__ */ jsx13(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
   ] });
 }
 function ImageField({ id, property, value, onCommit, services }) {
@@ -4865,8 +5082,8 @@ function ImageField({ id, property, value, onCommit, services }) {
     /** @type {HTMLInputElement|null} */
     null
   );
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10(
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11(
     /** @type {string|null} */
     null
   );
@@ -4888,8 +5105,8 @@ function ImageField({ id, property, value, onCommit, services }) {
       setBusy(false);
     }
   };
-  const addon = upload ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsx12(
+  const addon = upload ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx13(
       "input",
       {
         ref: inputRef,
@@ -4902,7 +5119,7 @@ function ImageField({ id, property, value, onCommit, services }) {
         onChange: pick
       }
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       Button,
       {
         type: "button",
@@ -4911,13 +5128,13 @@ function ImageField({ id, property, value, onCommit, services }) {
         disabled: busy,
         onClick: () => inputRef.current?.click(),
         children: [
-          busy ? /* @__PURE__ */ jsx12(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx12(Upload2, {}),
+          busy ? /* @__PURE__ */ jsx13(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx13(Upload2, {}),
           t("Upload")
         ]
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsx12(TextField, { id, property, value, onCommit, addon, error });
+  return /* @__PURE__ */ jsx13(TextField, { id, property, value, onCommit, addon, error });
 }
 var asNumber = (v) => {
   const n = Number.parseFloat(String(v || ""));
@@ -4939,10 +5156,10 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
     const next = `${n}${property.unit || "px"}`;
     if (next !== value) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs11("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs11("div", { className: "eb:relative", children: [
-      /* @__PURE__ */ jsx12(
+  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(
         Input,
         {
           id,
@@ -4961,7 +5178,7 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:pr-9 eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx12("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__ */ 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" })
     ] })
   ] });
 }
@@ -4984,9 +5201,9 @@ function ColorField({ id, property, value, fallback = "", onCommit }) {
       }
     }, COLOR_DEBOUNCE_MS);
   };
-  return /* @__PURE__ */ jsxs11("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx12(ColorPicker, { id, value: draft, placeholder: emailColor(fallback) || "", onChange: change })
+  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 })
   ] });
 }
 var DEFAULT_OPTION = "__default__";
@@ -4996,9 +5213,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__ */ jsxs11("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs12(
       Select,
       {
         value: current,
@@ -5007,10 +5224,10 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
           if (v !== (value || "")) onCommit(v || null);
         },
         children: [
-          /* @__PURE__ */ jsx12(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx12(SelectValue, { placeholder: defaultLabel }) }),
-          /* @__PURE__ */ jsxs11(SelectContent, { children: [
-            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx12(SelectItem, { value: DEFAULT_OPTION, children: defaultLabel }),
-            (property.options || []).map((o) => /* @__PURE__ */ jsx12(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
+          /* @__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))
           ] })
         ]
       }
@@ -5020,9 +5237,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__ */ jsxs11("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx13(
       "div",
       {
         id,
@@ -5032,7 +5249,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__ */ jsx12(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx12(
+          return /* @__PURE__ */ jsx13(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -5044,7 +5261,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__ */ jsx12(Icon, { className: "eb:h-3.5 eb:w-3.5" })
+              children: /* @__PURE__ */ jsx13(Icon, { className: "eb:h-3.5 eb:w-3.5" })
             }
           ) }, option.value);
         })
@@ -5073,10 +5290,10 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
     );
     if (next !== (value || "")) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs11("fieldset", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx12("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
-    /* @__PURE__ */ jsx12("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs11("div", { className: "eb:space-y-1", children: [
-      /* @__PURE__ */ jsx12(
+  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(
         Input,
         {
           id: `${id}-${side}`,
@@ -5095,7 +5312,7 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:px-2 eb:text-center eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx12("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
+      /* @__PURE__ */ jsx13("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
     ] }, side)) })
   ] });
 }
@@ -5113,15 +5330,15 @@ 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__ */ jsx12(Field, { id, property, value, fallback, onCommit, services });
+  return /* @__PURE__ */ jsx13(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";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { Braces as Braces4 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState12(false);
   const insert = (variable) => {
     const input = inputRef.current;
     const text = String(value || "");
@@ -5137,14 +5354,14 @@ function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
       input.setSelectionRange(start + token.length, start + token.length);
     });
   };
-  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" }) })
+  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" }) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var GROUP_ORDER = Object.values(GROUPS);
 function grouped(properties) {
   const map = /* @__PURE__ */ new Map();
@@ -5158,9 +5375,9 @@ function grouped(properties) {
 }
 function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
   const t = useT();
-  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(
+  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(
       PropertyField,
       {
         idPrefix,
@@ -5178,9 +5395,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__ */ 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, {}) })
+  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, {}) })
   ] });
 }
 function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, ai = null, onDismiss = null }) {
@@ -5191,18 +5408,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__ */ 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: [
+  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: [
             t("Name"),
             " ",
-            /* @__PURE__ */ jsx14("span", { className: "eb:text-destructive", children: "*" })
+            /* @__PURE__ */ jsx15("span", { className: "eb:text-destructive", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Input,
             {
               id: "eb-meta-name",
@@ -5212,12 +5429,12 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               "aria-invalid": showErrors && !meta.name.trim() || void 0
             }
           ),
-          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx14("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
+          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx15("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
         ] }),
-        /* @__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(
+        /* @__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(
               VariableInsertButton,
               {
                 variables,
@@ -5228,8 +5445,8 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx14(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
-          ai?.suggestSubjects && /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
+          ai?.suggestSubjects && /* @__PURE__ */ jsx15(
             ai.components.Subjects,
             {
               editor,
@@ -5240,10 +5457,10 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
             }
           )
         ] }),
-        /* @__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(
+        /* @__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(
               VariableInsertButton,
               {
                 variables,
@@ -5254,7 +5471,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Textarea,
             {
               ref: preheaderRef,
@@ -5268,7 +5485,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
           )
         ] })
       ] }),
-      root && bodyBlock2 && /* @__PURE__ */ jsx14(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
+      root && bodyBlock2 && /* @__PURE__ */ jsx15(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
     ] })
   ] });
 }
@@ -5287,7 +5504,7 @@ function PropertiesPanel({
 }) {
   const t = useT();
   const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
-  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(
+  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(
     TemplateSettings,
     {
       editor,
@@ -5299,8 +5516,8 @@ function PropertiesPanel({
       ai,
       onDismiss
     }
-  ) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx14(
+  ) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx15(
       PanelHeader,
       {
         title: t(selection.label),
@@ -5309,12 +5526,12 @@ function PropertiesPanel({
       }
     ),
     actions,
-    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).", {
+    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).", {
       count: selection.multiple
-    }) }) : /* @__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(
+    }) }) : /* @__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(
           PropertyField,
           {
             idPrefix: "eb-prop",
@@ -5325,16 +5542,16 @@ function PropertiesPanel({
           `${selection.id}:content`
         )
       ] }),
-      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 })
+      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 })
     ] })
   ] }) });
 }
 
 // src/ui/Toolbar.jsx
 import { ArrowLeft as ArrowLeft2, Monitor, Redo2, Smartphone, Undo2 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Toolbar({
   title,
   status,
@@ -5351,8 +5568,8 @@ function Toolbar({
   compact = false
 }) {
   const t = useT();
-  const identity2 = /* @__PURE__ */ jsxs14(Fragment7, { children: [
-    /* @__PURE__ */ jsxs14(
+  const identity2 = /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsxs15(
       Button,
       {
         variant: "ghost",
@@ -5360,50 +5577,50 @@ function Toolbar({
         onClick: onBack,
         "aria-label": compact ? t("Back") : void 0,
         children: [
-          /* @__PURE__ */ jsx15(ArrowLeft2, {}),
+          /* @__PURE__ */ jsx16(ArrowLeft2, {}),
           !compact && t("Back")
         ]
       }
     ),
-    /* @__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 })
+    /* @__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 })
     ] })
   ] });
-  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, {}) }) })
+  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, {}) }) })
     ] }),
-    /* @__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, {}),
+    /* @__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, {}),
         !compact && t("Desktop")
       ] }),
-      /* @__PURE__ */ jsxs14(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
-        /* @__PURE__ */ jsx15(Smartphone, {}),
+      /* @__PURE__ */ jsxs15(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
+        /* @__PURE__ */ jsx16(Smartphone, {}),
         !compact && t("Mobile")
       ] })
     ] }) })
   ] });
   if (compact) {
-    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: [
+    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: [
         identity2,
         primary
       ] }),
-      /* @__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: [
+      /* @__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: [
         editing,
-        /* @__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 })
+        /* @__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 })
       ] })
     ] });
   }
-  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: [
+  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: [
     identity2,
     editing,
-    /* @__PURE__ */ jsxs14("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
       actions,
       primary
     ] })
@@ -5413,7 +5630,7 @@ function Toolbar({
 // src/ui/Drawer.jsx
 import { useEffect as useEffect8 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function Drawer({ open, side = "left", title, onClose, children, testId, header: header2 = true }) {
   const t = useT();
   useEffect8(() => {
@@ -5424,9 +5641,9 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header:
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
-  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(
+  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(
       "section",
       {
         role: "dialog",
@@ -5436,11 +5653,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__ */ 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, {}) })
+          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, {}) })
           ] }),
-          /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
+          /* @__PURE__ */ jsx17("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
         ]
       }
     )
@@ -5448,10 +5665,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 useState12 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect9, useRef as useRef7, useState as useState13 } from "react";
 var DIRTY_CHECK_MS = 150;
 function useEmailEditorState(editor) {
-  const [state, setState] = useState12(() => ({
+  const [state, setState] = useState13(() => ({
     status: editor?.status || "idle",
     selection: null,
     canUndo: false,
@@ -5532,7 +5749,7 @@ function useEmailEditorState(editor) {
 }
 
 // src/ui/EmailBuilder.jsx
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var EMPTY_META = { name: "", subject: "", preheader: "", description: "" };
 function metaOf(template) {
   return {
@@ -5570,7 +5787,7 @@ function Builder({
   );
   const storage = useMemo5(() => injectedStorage || createHttpStorage(), [injectedStorage]);
   const systemVariables = useMemo5(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
-  const [customVariables, setCustomVariables] = useState13([]);
+  const [customVariables, setCustomVariables] = useState14([]);
   const variables = useMemo5(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
   const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
   const reloadVariables = useCallback3(async () => {
@@ -5604,20 +5821,20 @@ function Builder({
   const state = useEmailEditorState(editor);
   const autosaveOn = isFeatureEnabled("autosave");
   const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
-  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 [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 rootRef = useRef8(null);
   const layout2 = useLayoutWidth(rootRef);
   const compact = layout2 !== "wide";
   const blocksInDrawer = layout2 === "narrow";
-  const [drawer, setDrawer] = useState13(null);
+  const [drawer, setDrawer] = useState14(null);
   const closeDrawer = useCallback3(() => setDrawer(null), []);
   useEffect10(() => {
     if (!compact) setDrawer(null);
@@ -5883,10 +6100,10 @@ function Builder({
     setBrand,
     ai
   };
-  const toolbarFeatures = emailBuilderFeatures.list(
-    (f) => f.enabled !== false && Boolean(f.toolbar) && (f.isAvailable ? f.isAvailable(featureContext) : true)
-  );
-  const properties = /* @__PURE__ */ jsx17(
+  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(
     PropertiesPanel,
     {
       onDismiss: compact ? closeDrawer : null,
@@ -5896,13 +6113,13 @@ function Builder({
       onMetaChange: setMeta,
       changes: state.changes,
       showErrors,
-      actions: /* @__PURE__ */ jsx17(ElementActions, { editor, selection: state.selection }),
+      actions: /* @__PURE__ */ jsx18(ElementActions, { editor, selection: state.selection }),
       services,
       ai,
       variables
     }
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: rootRef,
@@ -5912,7 +6129,7 @@ function Builder({
       "data-layout": layout2,
       "data-template-id": template.id || "",
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           Toolbar,
           {
             title: meta.name,
@@ -5928,19 +6145,19 @@ function Builder({
             compact,
             actions: [
               // The AI module's button first, when the host gave the module.
-              ai?.proofread && /* @__PURE__ */ jsx17(ai.components.Proofread, { context: featureContext, proofread: ai.proofread }, "ai-proofread"),
+              ai?.proofread && /* @__PURE__ */ jsx18(ai.components.Proofread, { context: featureContext, proofread: ai.proofread }, "ai-proofread"),
               ...toolbarFeatures.map((feature) => {
                 const Action = feature.toolbar;
-                return /* @__PURE__ */ jsx17(Action, { context: featureContext }, feature.id);
+                return /* @__PURE__ */ jsx18(Action, { context: featureContext }, feature.id);
               })
             ].filter(Boolean),
-            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, {}),
+            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, {}),
               t("Save")
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             className: cn(
@@ -5950,12 +6167,12 @@ function Builder({
               layout2 === "narrow" && "eb:grid-cols-1"
             ),
             children: [
-              !blocksInDrawer && /* @__PURE__ */ jsx17(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
-              /* @__PURE__ */ jsx17("div", { className: "eb:relative eb:min-w-0 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(
+              !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(
                   Button,
                   {
                     variant: "outline",
@@ -5967,8 +6184,12 @@ function Builder({
                     children: t("Retry")
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs16(Fragment8, { children: [
-                boot.status === "ready" && /* @__PURE__ */ jsx17(
+              ] }) : /* @__PURE__ */ jsxs17(Fragment8, { children: [
+                canvasBars.map((feature) => {
+                  const Bar = feature.canvasBar;
+                  return /* @__PURE__ */ jsx18(Bar, { context: featureContext }, feature.id);
+                }),
+                /* @__PURE__ */ jsx18("div", { className: "eb:relative eb:min-h-0 eb:flex-1", children: boot.status === "ready" && /* @__PURE__ */ jsx18(
                   EmailCanvas,
                   {
                     editor,
@@ -5977,15 +6198,15 @@ function Builder({
                     onError: (error) => setEngineError(error.message)
                   },
                   attempt
-                ),
-                !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") })
+                ) }),
+                !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") })
                 ] })
               ] }) }),
               !compact && properties,
-              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(
+              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(
                 Drawer,
                 {
                   open: drawer === "properties",
@@ -6000,12 +6221,12 @@ function Builder({
             ]
           }
         ),
-        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(Plus2, {}),
+        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, {}),
             t("Add a block")
           ] }),
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             Button,
             {
               variant: state.selection ? "default" : "outline",
@@ -6014,14 +6235,14 @@ function Builder({
               disabled: !ready,
               onClick: () => setDrawer("properties"),
               children: [
-                /* @__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(SlidersHorizontal, {}),
+                /* @__PURE__ */ jsx18("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx17(NoticeArea, {}),
-        ai?.key && ai.components.Connect && /* @__PURE__ */ jsx17(ai.components.Connect, { aiKey: ai.key })
+        /* @__PURE__ */ jsx18(NoticeArea, {}),
+        ai?.key && ai.components.Connect && /* @__PURE__ */ jsx18(ai.components.Connect, { aiKey: ai.key })
       ]
     }
   );
@@ -6032,7 +6253,7 @@ function EmailBuilder({ locale = "en", messages, onNotify, ai: aiProp = null, ..
     () => ai ? { ...messagesOf(ai.messages, locale), ...messages } : messages,
     [ai, locale, messages]
   );
-  return /* @__PURE__ */ jsx17(UiProvider, { locale, messages: allMessages, onNotify, children: /* @__PURE__ */ jsx17(Builder, { ...props, ai, templateId: props.templateId ?? null }) });
+  return /* @__PURE__ */ jsx18(UiProvider, { locale, messages: allMessages, onNotify, children: /* @__PURE__ */ jsx18(Builder, { ...props, ai, templateId: props.templateId ?? null }) });
 }
 function useAiModule(value) {
   const valid = Boolean(value && typeof value === "object" && /** @type {any} */
@@ -6051,7 +6272,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 jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs18 } 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 {
@@ -6076,23 +6297,23 @@ var EmailBuilderBoundary = class extends Component {
     const { error, attempt } = this.state;
     const t = this.props.t || english;
     if (!error) {
-      return /* @__PURE__ */ jsx18("div", { style: { height: "100%" }, children: this.props.children }, attempt);
+      return /* @__PURE__ */ jsx19("div", { style: { height: "100%" }, children: this.props.children }, attempt);
     }
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       "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__ */ 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, {}),
+          /* @__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, {}),
               t("Back")
             ] }),
-            /* @__PURE__ */ jsxs17(Button, { size: "sm", onClick: this.retry, children: [
-              /* @__PURE__ */ jsx18(RefreshCw, {}),
+            /* @__PURE__ */ jsxs18(Button, { size: "sm", onClick: this.retry, children: [
+              /* @__PURE__ */ jsx19(RefreshCw, {}),
               t("Retry")
             ] })
           ] })
@@ -6120,4 +6341,4 @@ export {
   EmailBuilder,
   EmailBuilderBoundary
 };
-//# sourceMappingURL=chunk-OACK2DIW.js.map
+//# sourceMappingURL=chunk-G7G3TRWG.js.map