best-email-builder 0.4.0 → 0.5.1

package/dist/{chunk-MY6WPDT4.js → chunk-7QQH6MTV.js}

@@ -1,3 +1,26 @@
+import {
+  FRAME_SCROLLBAR_CSS,
+  PreviewButton,
+  TEMPLATE_GALLERY,
+  brandOf,
+  buildGallery,
+  createStarterMjml,
+  socialBlock,
+  socialElementBlock,
+  useBrand,
+  useLayoutWidth,
+  withThumbnailImages
+} from "./chunk-2RKVJQSD.js";
+import {
+  BRAND_NOTES,
+  countImagesWithoutPicture,
+  logoWidthFor
+} from "./chunk-4U7L2NYQ.js";
+import {
+  cleanRichText,
+  escapeText,
+  textOfHtml
+} from "./chunk-SAIW46IC.js";
 import {
   Button,
   Dialog,
@@ -5,18 +28,14 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  FRAME_SCROLLBAR_CSS,
   Input,
   Label,
   NoticeArea,
   Popover,
   PopoverContent,
   PopoverTrigger,
-  PreviewButton,
+  SEARCH_KEYS,
+  SearchKeyHint,
   SectionLabel,
   Select,
   SelectContent,
@@ -25,7 +44,6 @@ import {
   SelectValue,
   Separator,
   Skeleton,
-  TEMPLATE_GALLERY,
   Tabs,
   TabsList,
   TabsTrigger,
@@ -33,42 +51,34 @@ import {
   TooltipWrap,
   TruncatedText,
   UiProvider,
-  brandOf,
-  buildGallery,
   cn,
   createHttpStorage,
-  createStarterMjml,
-  socialBlock,
-  socialElementBlock,
-  useBrand,
-  useLayoutWidth,
+  useSearchShortcut,
   useT,
-  useUi,
-  withThumbnailImages
-} from "./chunk-AT73Y7JA.js";
+  useUi
+} from "./chunk-N7DEVAIP.js";
+import {
+  EMAIL_BUILDER_VERSION,
+  EMAIL_DEVICES,
+  createDocument,
+  imageUploadError,
+  readDocument
+} from "./chunk-H4W65GBX.js";
 import {
-  BRAND_NOTES,
-  INLINE_TAGS,
   LONGHAND_SPACING,
-  MAX_DETAILS_LENGTH,
-  MAX_REWRITE_INSTRUCTION,
-  REWRITE_ACTIONS,
-  REWRITE_LANGUAGES,
-  emailWords,
+  MJML_DEFAULTS,
   formatSpacing,
-  isSafeUrl,
-  logoWidthFor,
   parseSpacing,
-  purposesByCategory,
   toAttributes,
   toValues
-} from "./chunk-JNHFZXDL.js";
+} from "./chunk-OWVXKMLI.js";
+import {
+  isSafeUrl
+} from "./chunk-W424KPCR.js";
 import {
   CUSTOM_GROUP,
   DEFAULT_BUTTON_URL,
   DEFAULT_VARIABLES,
-  EMAIL_BUILDER_VERSION,
-  EMAIL_DEVICES,
   FONT_OPTIONS,
   FONT_STACK,
   GROUPS,
@@ -84,7 +94,6 @@ import {
   cloneWithNewIds,
   closestOfTags,
   contrastRatio,
-  createDocument,
   createNode,
   defineVariables,
   escapeXml,
@@ -93,11 +102,11 @@ import {
   fromProject,
   hasBrand,
   identity,
-  imageUploadError,
   inWhiteSection,
   insertNodes,
   keyFromLabel,
   mergeVariables,
+  messagesOf,
   moveNode,
   parentOf,
   parseMjml,
@@ -105,7 +114,6 @@ import {
   pathTo,
   positionOf,
   prop,
-  readDocument,
   readableOn,
   removeNode,
   serializeMjml,
@@ -115,7 +123,7 @@ import {
   tokenOf,
   translatorFor,
   validateCustomVariable
-} from "./chunk-HHLOE6OZ.js";
+} from "./chunk-JI36FNWE.js";
 
 // src/core/events.js
 function createEmitter({ onError } = {}) {
@@ -148,62 +156,6 @@ function createEmitter({ onError } = {}) {
   };
 }
 
-// src/core/mjmlDefaults.js
-var MJML_DEFAULTS = {
-  "mj-body": { width: "600px" },
-  "mj-section": {
-    "background-repeat": "repeat",
-    "background-size": "auto",
-    "background-position": "top center",
-    padding: "20px 0",
-    "text-align": "center"
-  },
-  "mj-wrapper": { "background-repeat": "repeat", "background-size": "auto", "background-position": "top center", padding: "20px 0" },
-  "mj-column": { "vertical-align": "top" },
-  "mj-text": {
-    align: "left",
-    color: "#000000",
-    "font-family": "Ubuntu, Helvetica, Arial, sans-serif",
-    "font-size": "13px",
-    "line-height": "1",
-    padding: "10px 25px"
-  },
-  "mj-image": { align: "center", height: "auto", padding: "10px 25px" },
-  "mj-button": {
-    align: "center",
-    "background-color": "#414141",
-    "border-radius": "3px",
-    color: "#ffffff",
-    "font-family": "Ubuntu, Helvetica, Arial, sans-serif",
-    "font-size": "13px",
-    "font-weight": "normal",
-    "inner-padding": "10px 25px",
-    "line-height": "120%",
-    padding: "10px 25px"
-  },
-  "mj-divider": { "border-color": "#000000", "border-style": "solid", "border-width": "4px", padding: "10px 25px", width: "100%", align: "center" },
-  "mj-spacer": { height: "20px" },
-  "mj-social": {
-    align: "center",
-    "border-radius": "3px",
-    "icon-size": "20px",
-    mode: "horizontal",
-    padding: "10px 25px"
-  },
-  "mj-social-element": { "border-radius": "3px", padding: "4px" },
-  "mj-navbar": { align: "center" },
-  "mj-navbar-link": {
-    color: "#000000",
-    "font-family": "Ubuntu, Helvetica, Arial, sans-serif",
-    "font-size": "13px",
-    "font-weight": "normal",
-    "line-height": "22px",
-    padding: "15px 10px",
-    "text-transform": "uppercase"
-  },
-  "mj-hero": { "background-color": "#ffffff", padding: "0px" }
-};
-
 // src/core/EmailEditor.js
 function resolveBlock(block, t = identity) {
   const text = (value) => typeof value === "function" ? String(value(t)) : value;
@@ -298,7 +250,7 @@ function createEmailEditor({ adapter, blocks, features = null, t = identity }) {
     get adapterName() {
       return adapter.name;
     },
-    async initialize({ container, document: document2 = null }) {
+    async initialize({ container, document = null }) {
       if (!container) throw new Error("EmailEditor: missing container");
       if (status !== "idle") {
         throw new Error(`EmailEditor: initialization refused (status "${status}")`);
@@ -309,7 +261,7 @@ function createEmailEditor({ adapter, blocks, features = null, t = identity }) {
         await adapter.initialize({
           container,
           blocks: blocks.list(),
-          document: document2 ? readDocument(document2) : null,
+          document: document ? readDocument(document) : null,
           t,
           labelOf: (selection) => t(labelFor(selection, blockForTag(selection.tagName))),
           onEvent: (type, payload) => {
@@ -417,18 +369,18 @@ function createEmailEditor({ adapter, blocks, features = null, t = identity }) {
      */
     loadDocument(raw, { mjml: mjml6 = null } = {}) {
       requireReady("loadDocument");
-      const document2 = readDocument(raw);
-      if (document2.engine !== adapter.name) {
+      const document = readDocument(raw);
+      if (document.engine !== adapter.name) {
         if (mjml6) {
           adapter.loadMjml(String(mjml6));
           adapter.clearHistory();
           return;
         }
         throw new Error(
-          `EmailEditor: document written for engine "${document2.engine}", editor runs on "${adapter.name}"`
+          `EmailEditor: document written for engine "${document.engine}", editor runs on "${adapter.name}"`
         );
       }
-      adapter.loadProject(document2.project);
+      adapter.loadProject(document.project);
       adapter.clearHistory();
     },
     loadMjml(mjml6) {
@@ -1244,6 +1196,11 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
   const [query, setQuery] = useState3("");
   const [active, setActive] = useState3(0);
   const listRef = useRef(null);
+  const searchRef = useRef(
+    /** @type {HTMLInputElement|null} */
+    null
+  );
+  useSearchShortcut(searchRef);
   const matches = useMemo2(() => {
     const q = query.trim().toLowerCase();
     return variables.filter((v) => filter ? filter(v) : true).filter(
@@ -1275,15 +1232,18 @@ function VariablePicker({ variables, onPick, onCreate = null, onEdit = null, fil
       /* @__PURE__ */ jsx3(
         "input",
         {
+          ref: searchRef,
           autoFocus: true,
           value: query,
           onChange: (e) => setQuery(e.target.value),
           onKeyDown,
           placeholder: t("Search variables\u2026"),
           "aria-label": t("Search variables\u2026"),
-          className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-2 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"
+          "aria-keyshortcuts": SEARCH_KEYS,
+          className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-14 eb:pl-7 eb:text-[13px] eb:text-foreground eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40"
         }
-      )
+      ),
+      /* @__PURE__ */ jsx3(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: [
@@ -1694,222 +1654,15 @@ var templatesFeature = {
   isAvailable: (context) => Array.isArray(context.templates) && context.templates.length > 0
 };
 
-// src/features/generate/GenerateButton.jsx
-import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState7 } from "react";
-import { Check, Loader2 as Loader23, Search as Search2, Sparkles, TriangleAlert } from "lucide-react";
-
-// src/features/generate/chip.js
-var chipClassName = (selected = false) => cn(
-  "eb:inline-flex eb:h-7 eb:items-center eb:gap-1 eb:rounded-full eb:border eb:px-3 eb:text-[12px] eb:font-medium eb:transition-colors eb:outline-none eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50 eb:disabled:opacity-50",
-  selected ? "eb:border-primary eb:bg-primary eb:text-primary-foreground" : "eb:border-border eb:bg-background eb:text-foreground eb:hover:border-primary/50 eb:hover:bg-primary/5"
-);
-
-// src/features/generate/GenerateButton.jsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var fold = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
-function GenerateButton({ context }) {
-  const { editor, ready, storage, isDirty, markDirty, template, setMeta, variables, sender, brand } = context;
-  const { t, locale, notify } = useUi();
-  const [open, setOpen] = useState7(false);
-  const [purpose, setPurpose] = useState7(
-    /** @type {string|null} */
-    null
-  );
-  const [details, setDetails] = useState7("");
-  const [query, setQuery] = useState7("");
-  const [busy, setBusy] = useState7(false);
-  const [error, setError] = useState7("");
-  const [seconds, setSeconds] = useState7(0);
-  const [dirty, setDirty] = useState7(false);
-  const abortRef = useRef2(
-    /** @type {AbortController|null} */
-    null
-  );
-  const searchRef = useRef2(
-    /** @type {HTMLInputElement|null} */
-    null
-  );
-  useEffect4(() => () => abortRef.current?.abort(), []);
-  useEffect4(() => {
-    if (!busy) return void 0;
-    setSeconds(0);
-    const timer = setInterval(() => setSeconds((s) => s + 1), 1e3);
-    return () => clearInterval(timer);
-  }, [busy]);
-  const groups = useMemo4(() => {
-    const words = fold(query.trim()).split(/\s+/).filter(Boolean);
-    return purposesByCategory().map((group) => ({
-      ...group,
-      purposes: group.purposes.filter((entry) => {
-        const label = fold(`${t(entry.label)} ${entry.label} ${t(group.label)}`);
-        return words.every((word) => label.includes(word));
-      })
-    })).filter((group) => group.purposes.length > 0);
-  }, [query, t]);
-  const openDialog = () => {
-    setError("");
-    setDirty(isDirty());
-    setOpen(true);
-  };
-  const close = (next) => {
-    if (next) return;
-    abortRef.current?.abort();
-    setOpen(false);
-  };
-  const generate = async () => {
-    if (busy || !purpose && !details.trim()) return;
-    setError("");
-    setBusy(true);
-    const controller = new AbortController();
-    abortRef.current = controller;
-    try {
-      const email = await storage.generate(
-        {
-          purpose,
-          details: details.trim(),
-          language: String(locale || "en").slice(0, 2),
-          sender: sender || {},
-          ...hasBrand(brand) ? { brand: { primary: brand.primary, heading: brand.heading, font: brand.font } } : {},
-          variables: (variables || []).map((variable) => ({ key: variable.key, label: variable.label }))
-        },
-        { signal: controller.signal }
-      );
-      if (controller.signal.aborted) return;
-      editor.loadMjml(hasBrand(brand) ? brandTemplate(email.mjml, brand, { sender, t }) : email.mjml);
-      setMeta((meta) => ({
-        ...meta,
-        name: meta.name || email.name,
-        subject: email.subject || meta.subject,
-        preheader: email.preheader || meta.preheader
-      }));
-      if (template.id) markDirty();
-      setOpen(false);
-      notify("success", t("Your email is ready. Edit anything, then save."));
-    } catch (err) {
-      if (!controller.signal.aborted) setError(t(err?.message || "The email could not be generated."));
-    } finally {
-      if (abortRef.current === controller) abortRef.current = null;
-      setBusy(false);
-    }
-  };
-  const cancel = () => {
-    abortRef.current?.abort();
-    setBusy(false);
-  };
-  const canGenerate = Boolean(purpose || details.trim());
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsxs7(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, children: [
-      /* @__PURE__ */ jsx7(Sparkles, {}),
-      t("Generate")
-    ] }),
-    /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs7(
-      DialogContent,
-      {
-        className: "eb:flex eb:max-h-[calc(100dvh-2rem)] eb:flex-col eb:gap-0 eb:p-0 eb:sm:max-w-2xl",
-        "data-testid": "eb-generate",
-        onOpenAutoFocus: (event) => {
-          event.preventDefault();
-          searchRef.current?.focus();
-        },
-        children: [
-          /* @__PURE__ */ jsxs7(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-3", children: [
-            /* @__PURE__ */ jsx7(DialogTitle, { children: t("Generate an email") }),
-            /* @__PURE__ */ jsx7(DialogDescription, { children: t("Pick what it is for. AI writes a complete email that opens here, ready to edit.") })
-          ] }),
-          /* @__PURE__ */ jsx7("div", { className: "eb:px-6 eb:pb-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", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx7(
-              Input,
-              {
-                ref: searchRef,
-                type: "search",
-                value: query,
-                onChange: (event) => setQuery(event.target.value),
-                placeholder: t("Search: sale, password, birthday\u2026"),
-                "aria-label": t("Search"),
-                className: "eb:pl-8",
-                disabled: busy
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsx7("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-4", "data-testid": "eb-generate-purposes", children: /* @__PURE__ */ jsxs7("fieldset", { disabled: busy, className: "eb:m-0 eb:min-w-0 eb:border-0 eb:p-0", children: [
-            /* @__PURE__ */ jsx7("legend", { className: "eb:sr-only", children: t("What is the email for?") }),
-            groups.length === 0 && /* @__PURE__ */ jsx7("p", { className: "eb:py-6 eb:text-center eb:text-[13px] eb:text-foreground-muted", children: t("Nothing matches. Describe your email in the details below.") }),
-            /* @__PURE__ */ jsx7("div", { className: "eb:flex eb:flex-col eb:gap-4", children: groups.map((group) => /* @__PURE__ */ jsxs7("section", { className: "eb:flex eb:flex-col eb:gap-2", "aria-label": t(group.label), children: [
-              /* @__PURE__ */ jsx7(SectionLabel, { children: t(group.label) }),
-              /* @__PURE__ */ jsx7("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: group.purposes.map((entry) => {
-                const selected = purpose === entry.id;
-                return /* @__PURE__ */ jsxs7(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-pressed": selected,
-                    "data-purpose": entry.id,
-                    onClick: () => setPurpose(selected ? null : entry.id),
-                    className: chipClassName(selected),
-                    children: [
-                      selected && /* @__PURE__ */ jsx7(Check, { className: "eb:size-3", "aria-hidden": "true" }),
-                      t(entry.label)
-                    ]
-                  },
-                  entry.id
-                );
-              }) })
-            ] }, group.id)) })
-          ] }) }),
-          /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
-            /* @__PURE__ */ jsx7(
-              Textarea,
-              {
-                value: details,
-                onChange: (event) => setDetails(event.target.value.slice(0, MAX_DETAILS_LENGTH)),
-                placeholder: t("Details (optional): product, dates, offer, tone, language\u2026"),
-                "aria-label": t("Details (optional)"),
-                rows: 2,
-                className: "eb:min-h-14",
-                disabled: busy,
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) generate();
-                }
-              }
-            ),
-            error ? /* @__PURE__ */ jsxs7("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-              /* @__PURE__ */ jsx7(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
-              error
-            ] }) : dirty && !busy && /* @__PURE__ */ jsx7("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The email being edited will be replaced, unsaved changes included.") }),
-            /* @__PURE__ */ jsxs7("div", { className: "eb:flex eb:items-center eb:justify-end eb:gap-2", children: [
-              busy && /* @__PURE__ */ jsx7("p", { className: "eb:mr-auto eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: t("Writing your email\u2026 {seconds} s", { seconds }) }),
-              busy && /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", onClick: cancel, children: t("Cancel") }),
-              /* @__PURE__ */ jsxs7(Button, { size: "sm", onClick: generate, disabled: !canGenerate || busy, "data-testid": "eb-generate-submit", children: [
-                busy ? /* @__PURE__ */ jsx7(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx7(Sparkles, {}),
-                t("Generate")
-              ] })
-            ] })
-          ] })
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/features/generate/index.js
-var generateFeature = {
-  id: "generate",
-  label: "Generate",
-  order: 4,
-  toolbar: GenerateButton,
-  isAvailable: (context) => typeof context.storage?.generate === "function"
-};
-
 // src/features/brand/BrandButton.jsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState9 } from "react";
-import { Globe, ImageOff, Loader2 as Loader24, Palette, Trash2 as Trash22, TriangleAlert as TriangleAlert2, Upload, WandSparkles } from "lucide-react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState8 } from "react";
+import { Globe, ImageOff, Loader2 as Loader23, Palette, Trash2 as Trash22, TriangleAlert, Upload, WandSparkles } from "lucide-react";
 
 // src/ui/primitives/color-picker.jsx
-import { useState as useState8 } from "react";
+import { useState as useState7 } from "react";
 import { HexAlphaColorPicker } from "react-colorful";
-import { Check as Check2 } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var PRESET_COLORS = [
   "#8B5CF6",
   "#A78BFA",
@@ -1940,20 +1693,20 @@ function normalizeHex(v) {
 }
 function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
   const t = useT();
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState7(false);
   const valid = isValidHex(value);
   const normalized = valid ? normalizeHex(value) : "";
   const emit = (hex) => onChange(normalizeHex(hex));
-  return /* @__PURE__ */ jsxs8("div", { className: cn("eb:flex eb:gap-2", className), children: [
-    /* @__PURE__ */ jsxs8(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx8(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ 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(
         "button",
         {
           type: "button",
           "aria-label": t("Pick a colour"),
           title: t("Pick a colour"),
           className: "eb-checker eb:relative eb:h-8 eb:w-[44px] eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:shadow-sm eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-[1.04]",
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx7(
             "span",
             {
               className: "eb:absolute eb:inset-0",
@@ -1963,18 +1716,18 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
           )
         }
       ) }),
-      /* @__PURE__ */ jsxs8(PopoverContent, { align: "start", className: "eb:w-64 eb:space-y-3 eb:p-3", children: [
-        /* @__PURE__ */ jsx8("div", { className: "eb-picker", children: /* @__PURE__ */ jsx8(HexAlphaColorPicker, { color: valid ? value : FALLBACK_COLOR, onChange: emit }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
-          /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ 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(
             "span",
             {
               className: "eb-checker eb:relative eb:size-8 eb:shrink-0 eb:overflow-hidden eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset",
               "aria-hidden": true,
-              children: /* @__PURE__ */ jsx8("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
+              children: /* @__PURE__ */ jsx7("span", { className: "eb:absolute eb:inset-0", style: { backgroundColor: valid ? value : "transparent" } })
             }
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(
             Input,
             {
               value: value || "",
@@ -1986,7 +1739,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx8("div", { className: "eb:grid eb:grid-cols-6 eb:gap-1.5 eb:border-t eb:border-border eb:pt-2.5", children: PRESET_COLORS.map((c) => /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ 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(
           "button",
           {
             type: "button",
@@ -1995,13 +1748,13 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
             "aria-label": c,
             className: "eb:relative eb:size-6 eb:rounded-lg2 eb:ring-1 eb:ring-black/10 eb:ring-inset eb:transition-transform eb:hover:scale-110",
             style: { backgroundColor: c },
-            children: normalized === c && /* @__PURE__ */ jsx8(Check2, { 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__ */ 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)]" })
           },
           c
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       Input,
       {
         id,
@@ -2016,7 +1769,7 @@ function ColorPicker({ value, onChange, id, className, placeholder = "" }) {
 }
 
 // src/features/brand/BrandButton.jsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var toForm = (brand) => ({
   name: brand.name || "",
   logoUrl: brand.logoUrl || "",
@@ -2030,31 +1783,31 @@ var isLogoUrl = (url) => !url || url.startsWith("/") || /^https:\/\//i.test(url)
 function BrandButton({ context }) {
   const { editor, ready, storage, brand, setBrand, hostSender } = context;
   const { t, notify } = useUi();
-  const [open, setOpen] = useState9(false);
-  const [form, setForm] = useState9(() => toForm(brand || {}));
-  const [applyNow, setApplyNow] = useState9(true);
-  const [reading, setReading] = useState9(false);
-  const [readError, setReadError] = useState9("");
-  const [notes, setNotes] = useState9(
+  const [open, setOpen] = 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(
     /** @type {string[]} */
     []
   );
-  const [uploading, setUploading] = useState9(false);
-  const [saving, setSaving] = useState9(false);
-  const [error, setError] = useState9("");
-  const abortRef = useRef3(
+  const [uploading, setUploading] = useState8(false);
+  const [saving, setSaving] = useState8(false);
+  const [error, setError] = useState8("");
+  const abortRef = useRef2(
     /** @type {AbortController|null} */
     null
   );
-  const fileRef = useRef3(
+  const fileRef = useRef2(
     /** @type {HTMLInputElement|null} */
     null
   );
   const canRead = typeof storage.importBrand === "function";
   const canUpload = typeof storage.uploadImage === "function";
-  useEffect5(() => () => abortRef.current?.abort(), []);
+  useEffect4(() => () => abortRef.current?.abort(), []);
   const logoUrl = form.logoUrl;
-  useEffect5(() => {
+  useEffect4(() => {
     if (!logoUrl || !isLogoUrl(logoUrl)) return void 0;
     let live = true;
     const image = new Image();
@@ -2163,11 +1916,11 @@ function BrandButton({ context }) {
     }
   };
   const swatch = brand?.primary;
-  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-    /* @__PURE__ */ jsxs9(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, "data-testid": "eb-brand-button", children: [
-      /* @__PURE__ */ jsx9(Palette, {}),
+  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, {}),
       t("Brand"),
-      swatch && /* @__PURE__ */ jsx9(
+      swatch && /* @__PURE__ */ jsx8(
         "span",
         {
           "aria-hidden": "true",
@@ -2176,18 +1929,18 @@ function BrandButton({ context }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx8(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs8(
       DialogContent,
       {
         className: "eb:flex eb:max-h-[calc(100dvh-2rem)] eb:flex-col eb:gap-0 eb:p-0 eb:sm:max-w-2xl",
         "data-testid": "eb-brand",
         children: [
-          /* @__PURE__ */ jsxs9(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-4", children: [
-            /* @__PURE__ */ jsx9(DialogTitle, { children: t("Your brand") }),
-            /* @__PURE__ */ jsx9(DialogDescription, { children: t("Set it once: new emails, templates and blocks take your logo, colors and font.") })
+          /* @__PURE__ */ 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("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-5", children: [
-            canRead && /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ 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(
               "form",
               {
                 className: "eb:mb-5 eb:flex eb:flex-col eb:gap-1.5",
@@ -2196,11 +1949,11 @@ function BrandButton({ context }) {
                   readWebsite();
                 },
                 children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-website", children: t("Your website") }),
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-2 eb:sm:flex-row", children: [
-                    /* @__PURE__ */ jsxs9("div", { className: "eb:relative eb:min-w-0 eb:flex-1", children: [
-                      /* @__PURE__ */ jsx9(Globe, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
-                      /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ 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(
                         Input,
                         {
                           id: "eb-brand-website",
@@ -2214,28 +1967,28 @@ function BrandButton({ context }) {
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs9(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
-                      reading ? /* @__PURE__ */ jsx9(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx9(WandSparkles, {}),
+                    /* @__PURE__ */ jsxs8(Button, { type: "submit", size: "sm", disabled: reading || !form.website.trim(), children: [
+                      reading ? /* @__PURE__ */ jsx8(Loader23, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx8(WandSparkles, {}),
                       t("Get my brand")
                     ] })
                   ] }),
-                  reading ? /* @__PURE__ */ jsx9("p", { role: "status", className: "eb:text-[12px] eb:text-foreground-muted", children: t("Reading the website\u2026") }) : readError ? /* @__PURE__ */ jsxs9("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-                    /* @__PURE__ */ jsx9(TriangleAlert2, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+                  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" }),
                     readError
-                  ] }) : notes.length ? /* @__PURE__ */ jsx9("ul", { className: "eb:flex eb:flex-col eb:gap-1 eb:text-[12px] eb:text-foreground-muted", "data-testid": "eb-brand-notes", children: notes.map((note) => /* @__PURE__ */ jsx9("li", { children: t(BRAND_NOTES[note]) }, note)) }) : /* @__PURE__ */ jsx9("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The logo, colors and font are read from it. You can change them before saving.") })
+                  ] }) : notes.length ? /* @__PURE__ */ 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.") })
                 ]
               }
             ),
-            /* @__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(Fragment5, { children: [
-                        /* @__PURE__ */ jsx9(
+            /* @__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(
                           "input",
                           {
                             ref: fileRef,
@@ -2248,18 +2001,18 @@ function BrandButton({ context }) {
                             onChange: pickLogo
                           }
                         ),
-                        /* @__PURE__ */ jsxs9(Button, { type: "button", variant: "outline", size: "sm", disabled: uploading, onClick: () => fileRef.current?.click(), children: [
-                          uploading ? /* @__PURE__ */ jsx9(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx9(Upload, {}),
+                        /* @__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, {}),
                           t("Upload")
                         ] })
                       ] }),
-                      form.logoUrl && /* @__PURE__ */ jsxs9(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
-                        /* @__PURE__ */ jsx9(Trash22, {}),
+                      form.logoUrl && /* @__PURE__ */ jsxs8(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ logoUrl: "", logoWidth: 0 }), children: [
+                        /* @__PURE__ */ jsx8(Trash22, {}),
                         t("Remove")
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx8(
                     Input,
                     {
                       id: "eb-brand-logo",
@@ -2270,11 +2023,11 @@ function BrandButton({ context }) {
                       className: "eb:text-[12px]"
                     }
                   ),
-                  logoInvalid && /* @__PURE__ */ jsx9("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
+                  logoInvalid && /* @__PURE__ */ jsx8("p", { className: "eb:text-[12px] eb:text-destructive", children: t("An https:// address is required") })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-name", children: t("Company name") }),
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ 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(
                     Input,
                     {
                       id: "eb-brand-name",
@@ -2285,36 +2038,36 @@ function BrandButton({ context }) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:grid eb:gap-4 eb:sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                    /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-primary", children: t("Main color") }),
-                    /* @__PURE__ */ jsx9(ColorPicker, { id: "eb-brand-primary", value: form.primary, onChange: (primary) => set({ primary }), placeholder: PALETTE.navy }),
-                    /* @__PURE__ */ jsx9("p", { className: "eb:text-[11px] eb:text-foreground-muted", children: t("Buttons, banners, links") })
+                /* @__PURE__ */ 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: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: (heading) => set({ heading }), placeholder: PALETTE.navy })
+                  /* @__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: (heading) => set({ heading }), placeholder: PALETTE.navy })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-                  /* @__PURE__ */ jsx9(Label, { htmlFor: "eb-brand-font", children: t("Font") }),
-                  /* @__PURE__ */ jsxs9(Select, { value: form.font || FONT_STACK, onValueChange: (font) => set({ font }), children: [
-                    /* @__PURE__ */ jsx9(SelectTrigger, { id: "eb-brand-font", children: /* @__PURE__ */ jsx9(SelectValue, {}) }),
-                    /* @__PURE__ */ jsx9(SelectContent, { children: FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx9(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx9("span", { style: { fontFamily: option.value }, children: option.label }) }, option.value)) })
+                /* @__PURE__ */ 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__ */ jsx9(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
+              /* @__PURE__ */ jsx8(BrandPreview, { brand: draft, fallbackName: hostSender?.name || t("Your company") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
-            error && /* @__PURE__ */ jsxs9("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-              /* @__PURE__ */ jsx9(TriangleAlert2, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+          /* @__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" }),
               error
             ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:sm:flex-row eb:sm:items-center", children: [
-              /* @__PURE__ */ jsxs9("label", { className: "eb:flex eb:cursor-pointer eb:items-center eb:gap-2 eb:text-[13px] eb:sm:mr-auto", children: [
-                /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ 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(
                   "input",
                   {
                     type: "checkbox",
@@ -2326,10 +2079,10 @@ function BrandButton({ context }) {
                 ),
                 t("Also apply to this email")
               ] }),
-              /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:justify-end eb:gap-2", children: [
-                /* @__PURE__ */ jsx9(Button, { variant: "outline", size: "sm", onClick: () => close(false), children: t("Cancel") }),
-                /* @__PURE__ */ jsxs9(Button, { size: "sm", onClick: save, disabled: saving || reading || uploading || logoInvalid, "data-testid": "eb-brand-save", children: [
-                  saving && /* @__PURE__ */ jsx9(Loader24, { className: "eb:animate-spin" }),
+              /* @__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" }),
                   t("Save")
                 ] })
               ] })
@@ -2348,30 +2101,30 @@ function BrandPreview({ brand, fallbackName }) {
   const link2 = contrastRatio(primary, PALETTE.white) >= 3 ? primary : heading;
   const font = brand.font || FONT_STACK;
   const name = brand.name || fallbackName;
-  return /* @__PURE__ */ jsxs9("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-    /* @__PURE__ */ jsx9("span", { className: "eb:text-[12px] eb:font-medium eb:text-foreground-muted", children: t("Preview") }),
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ 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(
       "div",
       {
         className: "eb:overflow-hidden eb:rounded-lg2 eb:p-2.5 eb:ring-1 eb:ring-border",
         style: { backgroundColor: PALETTE.canvas, fontFamily: font },
         "data-testid": "eb-brand-preview",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsxs9("div", { className: "eb:overflow-hidden eb:rounded-[3px]", style: { backgroundColor: PALETTE.white }, children: [
-          /* @__PURE__ */ jsx9("div", { className: "eb:px-3 eb:pt-3 eb:pb-2", children: brand.logoUrl ? /* @__PURE__ */ jsx9("img", { src: brand.logoUrl, alt: "", style: { width: Math.round((brand.logoWidth || 140) * 0.45), maxWidth: "100%" } }) : /* @__PURE__ */ jsx9("span", { className: "eb:text-[11px] eb:font-bold", style: { color: PALETTE.ink }, children: name }) }),
-          /* @__PURE__ */ jsxs9("div", { className: "eb:px-3 eb:py-4 eb:text-center", style: { backgroundColor: primary, color: onPrimary }, children: [
-            /* @__PURE__ */ jsx9("div", { className: "eb:text-[13px] eb:leading-tight eb:font-bold", children: t("Big news") }),
-            /* @__PURE__ */ jsx9("div", { className: "eb:mt-1 eb:text-[9px] eb:opacity-90", children: t("A short line under the title.") })
+        children: /* @__PURE__ */ 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.") })
           ] }),
-          /* @__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: heading }, children: t("A headline") }),
-            /* @__PURE__ */ jsxs9("div", { className: "eb:text-[9px] eb:leading-snug", style: { color: PALETTE.ink }, children: [
+          /* @__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: heading }, children: t("A headline") }),
+            /* @__PURE__ */ jsxs8("div", { className: "eb:text-[9px] eb:leading-snug", style: { color: PALETTE.ink }, children: [
               t("Some text, with"),
               " ",
-              /* @__PURE__ */ jsx9("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
+              /* @__PURE__ */ jsx8("span", { className: "eb:underline", style: { color: link2 }, children: t("a link") }),
               "."
             ] }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx8(
               "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"),
@@ -2380,7 +2133,7 @@ function BrandPreview({ brand, fallbackName }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
+          /* @__PURE__ */ jsx8("div", { className: "eb:px-3 eb:pb-2.5 eb:text-center eb:text-[7px]", style: { color: "#6d7484" }, children: name })
         ] })
       }
     )
@@ -2398,7 +2151,6 @@ var brandFeature = {
 
 // src/features/index.js
 var FEATURES = [
-  generateFeature,
   templatesFeature,
   brandFeature,
   variablesFeature,
@@ -2529,93 +2281,6 @@ function betweenSections(body, point, boxOf, skip, wrap) {
   };
 }
 
-// src/engine/richText.js
-var DROPPED_WITH_CONTENT = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "embed", "template", "svg", "math", "head", "title", "meta", "link"]);
-var KEPT_ATTRIBUTES = {
-  "*": /* @__PURE__ */ new Set(["style"]),
-  a: /* @__PURE__ */ new Set(["href", "target", "title", "rel"]),
-  font: /* @__PURE__ */ new Set(["color", "face", "size"])
-};
-var KEPT_STYLES = /* @__PURE__ */ new Set([
-  "color",
-  "background-color",
-  "font-weight",
-  "font-style",
-  "font-size",
-  "font-family",
-  "text-decoration",
-  "text-align",
-  "line-height",
-  "letter-spacing"
-]);
-function cleanStyle(style) {
-  return style.split(";").map((part) => part.trim()).filter(Boolean).map((part) => {
-    const colon = part.indexOf(":");
-    if (colon === -1) return null;
-    const name = part.slice(0, colon).trim().toLowerCase();
-    const value = part.slice(colon + 1).trim();
-    if (!KEPT_STYLES.has(name) || /expression|url\s*\(|javascript:/i.test(value)) return null;
-    return `${name}:${value}`;
-  }).filter(Boolean).join(";");
-}
-function cleanAttributes(element) {
-  const tag = element.tagName.toLowerCase();
-  const own = (
-    /** @type {Record<string, Set<string>>} */
-    KEPT_ATTRIBUTES[tag]
-  );
-  for (const attribute of [...element.attributes]) {
-    const name = attribute.name.toLowerCase();
-    if (!KEPT_ATTRIBUTES["*"].has(name) && !(own && own.has(name))) {
-      element.removeAttribute(attribute.name);
-      continue;
-    }
-    if (name === "href" && !isSafeUrl(attribute.value, "link")) element.removeAttribute(attribute.name);
-    if (name === "style") {
-      const style = cleanStyle(attribute.value);
-      if (style) element.setAttribute("style", style);
-      else element.removeAttribute("style");
-    }
-  }
-  if (tag === "a" && element.getAttribute("target") === "_blank") element.setAttribute("rel", "noopener");
-}
-function cleanChildren(node) {
-  for (const child of [...node.childNodes]) {
-    if (child.nodeType === 8) {
-      child.remove();
-      continue;
-    }
-    if (child.nodeType !== 1) continue;
-    const element = (
-      /** @type {Element} */
-      child
-    );
-    const tag = element.tagName.toLowerCase();
-    if (DROPPED_WITH_CONTENT.has(tag)) {
-      element.remove();
-      continue;
-    }
-    cleanChildren(element);
-    if (!INLINE_TAGS.has(tag)) {
-      element.replaceWith(...element.childNodes);
-      continue;
-    }
-    cleanAttributes(element);
-  }
-}
-function cleanRichText(html, document2) {
-  const template = document2.createElement("template");
-  template.innerHTML = String(html || "");
-  cleanChildren(template.content);
-  return template.innerHTML.replace(/<br>/g, "<br />").replace(/(<br \/>)+$/, "").trim();
-}
-function escapeText(text) {
-  return String(text ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function textOfHtml(html) {
-  return String(html || "").replace(/<br\s*\/?>/gi, " ").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").trim();
-}
-
 // src/engine/canvasMjml.js
 var MARKED_TAGS = /* @__PURE__ */ new Set([
   "mj-body",
@@ -2737,7 +2402,7 @@ function sameKind(from, to) {
   );
 }
 function morphChildren(from, to, skip = () => false) {
-  const document2 = (
+  const document = (
     /** @type {Document} */
     from.ownerDocument || from
   );
@@ -2746,9 +2411,9 @@ function morphChildren(from, to, skip = () => false) {
     const target = targets[i];
     const current = from.childNodes[i];
     if (!current) {
-      from.appendChild(document2.importNode(target, true));
+      from.appendChild(document.importNode(target, true));
     } else if (!sameKind(current, target)) {
-      from.replaceChild(document2.importNode(target, true), current);
+      from.replaceChild(document.importNode(target, true), current);
     } else if (current.nodeType === 1) {
       const element = (
         /** @type {Element} */
@@ -4063,7 +3728,7 @@ function createNativeAdapter({ loadCompiler = defaultLoadCompiler } = {}) {
     get root() {
       return root;
     },
-    async initialize({ container: host, document: document2, onEvent, t: translate, labelOf: label }) {
+    async initialize({ container: host, document, onEvent, t: translate, labelOf: label }) {
       if (view) throw new Error("NativeAdapter: already initialized");
       const ticket = ++generation;
       const loaded = await loadCompiler();
@@ -4073,7 +3738,7 @@ function createNativeAdapter({ loadCompiler = defaultLoadCompiler } = {}) {
       if (label) labelOf = label;
       compile = loaded;
       container = host;
-      root = document2 ? fromProject(document2.project) : parseMjml(EMPTY_MJML);
+      root = document ? fromProject(document.project) : parseMjml(EMPTY_MJML);
       selectedId = null;
       history = { past: [], future: [], key: null, at: 0 };
       view = createCanvasView({
@@ -4302,14 +3967,14 @@ function createDefaultEmailEditor(options = {}) {
 }
 
 // src/ui/EmailCanvas.jsx
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function EmailCanvas({ editor, document: document2 = null, onReady, onError, className }) {
-  const ref = useRef4(null);
-  const documentRef = useRef4(document2);
-  const callbacks = useRef4({ onReady, onError });
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function EmailCanvas({ editor, document = null, onReady, onError, className }) {
+  const ref = useRef3(null);
+  const documentRef = useRef3(document);
+  const callbacks = useRef3({ onReady, onError });
   callbacks.current = { onReady, onError };
-  useEffect6(() => {
+  useEffect5(() => {
     if (!editor || !ref.current) return void 0;
     let alive = true;
     editor.initialize({ container: ref.current, document: documentRef.current }).then(() => {
@@ -4322,12 +3987,12 @@ function EmailCanvas({ editor, document: document2 = null, onReady, onError, cla
       editor.destroy();
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx10("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
+  return /* @__PURE__ */ jsx9("div", { ref, className: cn("eb-canvas eb:h-full eb:w-full", className), "data-testid": "eb-canvas" });
 }
 
 // src/ui/EmailBuilder.jsx
-import { useCallback as useCallback2, useEffect as useEffect12, useMemo as useMemo6, useRef as useRef11, useState as useState15 } from "react";
-import { AlertTriangle, Loader2 as Loader28, Plus as Plus2, Save, SlidersHorizontal } from "lucide-react";
+import { useCallback as useCallback2, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef8, useState as useState12 } from "react";
+import { AlertTriangle, Loader2 as Loader25, Plus as Plus2, Save, SlidersHorizontal } from "lucide-react";
 
 // src/features/autosave/scheduler.js
 function createAutosaveScheduler({
@@ -4386,11 +4051,11 @@ function defaultStore() {
     return null;
   }
 }
-function saveLocalDraft({ document: document2, meta }, store = defaultStore()) {
+function saveLocalDraft({ document, meta }, store = defaultStore()) {
   const target = usable(store);
   if (!target) return false;
   try {
-    target.setItem(KEY2, JSON.stringify({ savedAt: Date.now(), document: document2, meta }));
+    target.setItem(KEY2, JSON.stringify({ savedAt: Date.now(), document, meta }));
     return true;
   } catch {
     return false;
@@ -4437,8 +4102,8 @@ import {
   Square,
   Type
 } from "lucide-react";
-import { useRef as useRef5 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var DRAG_THRESHOLD = 5;
 var ICONS2 = {
   Heading,
@@ -4463,8 +4128,8 @@ var GROUPS2 = [
 function BlockTile({ block, disabled, onAdd, onDragStart }) {
   const t = useT();
   const Icon = ICONS2[block.icon] || Square;
-  const press = useRef5(null);
-  return /* @__PURE__ */ jsx11(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs10(
+  const press = useRef4(null);
+  return /* @__PURE__ */ jsx10(TooltipWrap, { label: block.description ? t(block.description) : block.description, children: /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
@@ -4504,8 +4169,8 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
         disabled && "eb:cursor-not-allowed eb:opacity-50"
       ),
       children: [
-        /* @__PURE__ */ jsx11(Icon, { className: "eb:h-5 eb:w-5 eb:text-foreground-lighter", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx11("span", { className: "eb:text-[12px] eb:text-foreground", children: t(block.label) })
+        /* @__PURE__ */ 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) })
       ]
     }
   ) });
@@ -4513,12 +4178,12 @@ function BlockTile({ block, disabled, onAdd, onDragStart }) {
 function BlockSidebar({ editor, disabled = false, onAdded }) {
   const t = useT();
   const blocks = editor.listBlocks();
-  return /* @__PURE__ */ jsx11("aside", { "aria-label": t("Blocks"), className: "eb:min-h-0 eb:space-y-5 eb:overflow-y-auto eb:border-r eb:border-border eb:p-3", children: GROUPS2.map((group) => {
+  return /* @__PURE__ */ 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) => {
     const items = blocks.filter((b) => b.kind === group.kind && b.mjml);
     if (!items.length) return null;
-    return /* @__PURE__ */ jsxs10("section", { className: "eb:space-y-2", children: [
-      /* @__PURE__ */ jsx11(SectionLabel, { children: t(group.title) }),
-      /* @__PURE__ */ jsx11("div", { className: "eb:grid eb:grid-cols-2 eb:gap-2", children: items.map((block) => /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ 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(
         BlockTile,
         {
           block,
@@ -4536,15 +4201,15 @@ function BlockSidebar({ editor, disabled = false, onAdded }) {
 
 // src/ui/ElementActions.jsx
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Copy, Trash2 as Trash23 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ElementActions({ editor, selection }) {
   const t = useT();
   if (!selection || !selection.canRemove && !selection.canDuplicate) return null;
   const horizontal = selection.tagName === "mj-column";
   const [Prev, Next] = horizontal ? [ArrowLeft, ArrowRight] : [ArrowUp, ArrowDown];
   const [prevLabel, nextLabel] = horizontal ? [t("Move left"), t("Move right")] : [t("Move up"), t("Move down")];
-  return /* @__PURE__ */ jsxs11("div", { className: "eb:flex eb:items-center eb:gap-0.5 eb:border-b eb:border-border eb:px-3 eb:py-1.5", role: "toolbar", "aria-label": t("Element actions"), children: [
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: prevLabel, children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ 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(
       Button,
       {
         variant: "ghost",
@@ -4552,10 +4217,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": prevLabel,
         disabled: !selection.canMoveUp,
         onClick: () => editor.move(-1, selection.id),
-        children: /* @__PURE__ */ jsx12(Prev, {})
+        children: /* @__PURE__ */ jsx11(Prev, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(TooltipWrap, { label: nextLabel, children: /* @__PURE__ */ jsx11(
       Button,
       {
         variant: "ghost",
@@ -4563,10 +4228,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": nextLabel,
         disabled: !selection.canMoveDown,
         onClick: () => editor.move(1, selection.id),
-        children: /* @__PURE__ */ jsx12(Next, {})
+        children: /* @__PURE__ */ jsx11(Next, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(TooltipWrap, { label: t("Duplicate"), children: /* @__PURE__ */ jsx11(
       Button,
       {
         variant: "ghost",
@@ -4574,10 +4239,10 @@ function ElementActions({ editor, selection }) {
         "aria-label": t("Duplicate"),
         disabled: !selection.canDuplicate,
         onClick: () => editor.duplicate(selection.id),
-        children: /* @__PURE__ */ jsx12(Copy, {})
+        children: /* @__PURE__ */ jsx11(Copy, {})
       }
     ) }),
-    /* @__PURE__ */ jsx12(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(TooltipWrap, { label: t("Delete (Del)"), children: /* @__PURE__ */ jsx11(
       Button,
       {
         variant: "ghost",
@@ -4586,20 +4251,20 @@ function ElementActions({ editor, selection }) {
         disabled: !selection.canRemove,
         onClick: () => editor.remove(selection.id),
         className: "eb:ml-auto eb:text-foreground-muted eb:hover:bg-destructive/10 eb:hover:text-destructive",
-        children: /* @__PURE__ */ jsx12(Trash23, {})
+        children: /* @__PURE__ */ jsx11(Trash23, {})
       }
     ) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { useMemo as useMemo5, useRef as useRef9 } from "react";
+import { useMemo as useMemo4, useRef as useRef6 } from "react";
 import { X } from "lucide-react";
 
 // src/ui/fields.jsx
-import { useEffect as useEffect7, useRef as useRef6, useState as useState10 } from "react";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader25, Upload as Upload2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef5, useState as useState9 } from "react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Loader2 as Loader24, Upload as Upload2 } from "lucide-react";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var COLOR_DEBOUNCE_MS = 250;
 function emailColor(value) {
   const v = String(value || "").trim();
@@ -4608,11 +4273,11 @@ function emailColor(value) {
   return null;
 }
 function useDraft(value, toDraft) {
-  const [draft, setDraft] = useState10(() => toDraft(value));
-  const ref = useRef6(null);
-  const convert = useRef6(toDraft);
+  const [draft, setDraft] = useState9(() => toDraft(value));
+  const ref = useRef5(null);
+  const convert = useRef5(toDraft);
   convert.current = toDraft;
-  useEffect7(() => {
+  useEffect6(() => {
     const el = ref.current;
     const focused = el && el.ownerDocument?.activeElement && el.contains(el.ownerDocument.activeElement);
     if (!focused) setDraft(convert.current(value));
@@ -4621,10 +4286,10 @@ function useDraft(value, toDraft) {
 }
 var asText = (v) => v || "";
 function FieldLabel({ id, children }) {
-  return /* @__PURE__ */ jsx13(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
+  return /* @__PURE__ */ jsx12(Label, { htmlFor: id, className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children });
 }
 function FieldError({ children }) {
-  return children ? /* @__PURE__ */ jsx13("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
+  return children ? /* @__PURE__ */ jsx12("p", { className: "eb:text-[12px] eb:text-destructive", children }) : null;
 }
 function TextField({ id, property, value, fallback = "", onCommit, addon = null, error = null }) {
   const t = useT();
@@ -4655,23 +4320,23 @@ function TextField({ id, property, value, fallback = "", onCommit, addon = null,
     onKeyDown: keyDown,
     "aria-invalid": invalid || void 0
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    property.type === "textarea" ? /* @__PURE__ */ jsx13(Textarea, { rows: 3, ...shared }) : addon ? /* @__PURE__ */ jsxs12("div", { className: "eb:flex eb:gap-2", children: [
-      /* @__PURE__ */ jsx13(Input, { ...shared, className: "eb:min-w-0 eb:flex-1" }),
+  return /* @__PURE__ */ 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" }),
       addon
-    ] }) : /* @__PURE__ */ jsx13(Input, { ...shared }),
-    /* @__PURE__ */ jsx13(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
+    ] }) : /* @__PURE__ */ jsx12(Input, { ...shared }),
+    /* @__PURE__ */ jsx12(FieldError, { children: invalid ? kind === "image" ? t("An https:// address is required") : t("Address not allowed") : error })
   ] });
 }
 function ImageField({ id, property, value, onCommit, services }) {
   const t = useT();
-  const inputRef = useRef6(
+  const inputRef = useRef5(
     /** @type {HTMLInputElement|null} */
     null
   );
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10(
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(
     /** @type {string|null} */
     null
   );
@@ -4693,8 +4358,8 @@ function ImageField({ id, property, value, onCommit, services }) {
       setBusy(false);
     }
   };
-  const addon = upload ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsx13(
+  const addon = upload ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsx12(
       "input",
       {
         ref: inputRef,
@@ -4707,7 +4372,7 @@ function ImageField({ id, property, value, onCommit, services }) {
         onChange: pick
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs11(
       Button,
       {
         type: "button",
@@ -4716,13 +4381,13 @@ function ImageField({ id, property, value, onCommit, services }) {
         disabled: busy,
         onClick: () => inputRef.current?.click(),
         children: [
-          busy ? /* @__PURE__ */ jsx13(Loader25, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx13(Upload2, {}),
+          busy ? /* @__PURE__ */ jsx12(Loader24, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx12(Upload2, {}),
           t("Upload")
         ]
       }
     )
   ] }) : null;
-  return /* @__PURE__ */ jsx13(TextField, { id, property, value, onCommit, addon, error });
+  return /* @__PURE__ */ jsx12(TextField, { id, property, value, onCommit, addon, error });
 }
 var asNumber = (v) => {
   const n = Number.parseFloat(String(v || ""));
@@ -4744,10 +4409,10 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
     const next = `${n}${property.unit || "px"}`;
     if (next !== value) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs12("div", { className: "eb:relative", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ 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(
         Input,
         {
           id,
@@ -4766,17 +4431,17 @@ function SizeField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:pr-9 eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx13("span", { className: "eb:pointer-events-none eb:absolute eb:right-3 eb:top-1/2 eb:-translate-y-1/2 eb:text-[12px] eb:text-foreground-muted", children: property.unit || "px" })
+      /* @__PURE__ */ 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" })
     ] })
   ] });
 }
 function ColorField({ id, property, value, fallback = "", onCommit }) {
   const t = useT();
   const [draft, setDraft, ref] = useDraft(value, asText);
-  const timer = useRef6(null);
-  const latest = useRef6({ value, onCommit });
+  const timer = useRef5(null);
+  const latest = useRef5({ value, onCommit });
   latest.current = { value, onCommit };
-  useEffect7(() => () => clearTimeout(timer.current), []);
+  useEffect6(() => () => clearTimeout(timer.current), []);
   const change = (next) => {
     setDraft(next);
     clearTimeout(timer.current);
@@ -4789,9 +4454,9 @@ function ColorField({ id, property, value, fallback = "", onCommit }) {
       }
     }, COLOR_DEBOUNCE_MS);
   };
-  return /* @__PURE__ */ jsxs12("div", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx13(ColorPicker, { id, value: draft, placeholder: emailColor(fallback) || "", onChange: change })
+  return /* @__PURE__ */ 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 })
   ] });
 }
 var DEFAULT_OPTION = "__default__";
@@ -4801,9 +4466,9 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
   const words = (v) => String(v || "").trim().split(/\s+/).sort().join(" ");
   const fallbackOption = (property.options || []).find((o) => o.value && words(o.value) === words(fallback));
   const defaultLabel = fallbackOption ? t("Default ({value})", { value: t(fallbackOption.label) }) : t("Default");
-  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsxs11(
       Select,
       {
         value: current,
@@ -4812,10 +4477,10 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
           if (v !== (value || "")) onCommit(v || null);
         },
         children: [
-          /* @__PURE__ */ jsx13(SelectTrigger, { id, className: "eb:w-full", children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: defaultLabel }) }),
-          /* @__PURE__ */ jsxs12(SelectContent, { children: [
-            !(property.options || []).some((o) => !o.value) && /* @__PURE__ */ jsx13(SelectItem, { value: DEFAULT_OPTION, children: defaultLabel }),
-            (property.options || []).map((o) => /* @__PURE__ */ jsx13(SelectItem, { value: o.value || DEFAULT_OPTION, children: t(o.label) }, o.value || DEFAULT_OPTION))
+          /* @__PURE__ */ 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))
           ] })
         ]
       }
@@ -4825,9 +4490,9 @@ function SelectField({ id, property, value, fallback = "", onCommit }) {
 var ALIGN_ICONS = { left: AlignLeft, center: AlignCenter, right: AlignRight, justify: AlignJustify };
 function AlignField({ id, property, value, fallback = "", onCommit }) {
   const t = useT();
-  return /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13(FieldLabel, { id, children: t(property.label) }),
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs11("div", { className: "eb:space-y-1.5", children: [
+    /* @__PURE__ */ jsx12(FieldLabel, { id, children: t(property.label) }),
+    /* @__PURE__ */ jsx12(
       "div",
       {
         id,
@@ -4837,7 +4502,7 @@ function AlignField({ id, property, value, fallback = "", onCommit }) {
         children: (property.options || []).map((option) => {
           const Icon = ALIGN_ICONS[option.value] || AlignLeft;
           const active = (value || fallback) === option.value;
-          return /* @__PURE__ */ jsx13(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx13(
+          return /* @__PURE__ */ jsx12(TooltipWrap, { label: t(option.label), children: /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -4849,7 +4514,7 @@ function AlignField({ id, property, value, fallback = "", onCommit }) {
                 "eb:inline-flex eb:h-7 eb:w-7 eb:items-center eb:justify-center eb:rounded-lg2 eb:transition-colors",
                 active ? "eb:bg-primary eb:text-primary-foreground" : "eb:text-foreground-lighter eb:hover:bg-surface-200 eb:hover:text-foreground"
               ),
-              children: /* @__PURE__ */ jsx13(Icon, { className: "eb:h-3.5 eb:w-3.5" })
+              children: /* @__PURE__ */ jsx12(Icon, { className: "eb:h-3.5 eb:w-3.5" })
             }
           ) }, option.value);
         })
@@ -4878,10 +4543,10 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
     );
     if (next !== (value || "")) onCommit(next);
   };
-  return /* @__PURE__ */ jsxs12("fieldset", { ref, className: "eb:space-y-1.5", children: [
-    /* @__PURE__ */ jsx13("legend", { className: "eb:mb-1.5 eb:text-[12px] eb:text-foreground-lighter", children: t(property.label) }),
-    /* @__PURE__ */ jsx13("div", { className: "eb:grid eb:grid-cols-4 eb:gap-1.5", children: SIDE_LABELS.map(([side, label], i) => /* @__PURE__ */ jsxs12("div", { className: "eb:space-y-1", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ 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(
         Input,
         {
           id: `${id}-${side}`,
@@ -4900,7 +4565,7 @@ function SpacingField({ id, property, value, fallback = "", onCommit }) {
           className: "eb:px-2 eb:text-center eb:tabular-nums"
         }
       ),
-      /* @__PURE__ */ jsx13("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
+      /* @__PURE__ */ jsx12("span", { className: "eb:block eb:text-center eb:text-[10.5px] eb:text-foreground-muted", children: t(label) })
     ] }, side)) })
   ] });
 }
@@ -4918,15 +4583,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__ */ jsx13(Field, { id, property, value, fallback, onCommit, services });
+  return /* @__PURE__ */ jsx12(Field, { id, property, value, fallback, onCommit, services });
 }
 
 // src/features/variables/VariableInsertButton.jsx
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 import { Braces as Braces3 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState10(false);
   const insert = (variable) => {
     const input = inputRef.current;
     const text = String(value || "");
@@ -4942,228 +4607,14 @@ function VariableInsertButton({ variables, inputRef, value, onChange, label }) {
       input.setSelectionRange(start + token.length, start + token.length);
     });
   };
-  return /* @__PURE__ */ jsxs13(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx14(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx14(Braces3, {}) }) }),
-    /* @__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/features/generate/RewriteText.jsx
-import { useEffect as useEffect8, useRef as useRef7, useState as useState12 } from "react";
-import { ChevronDown, Languages, Loader2 as Loader26, Sparkles as Sparkles2, TriangleAlert as TriangleAlert3 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-function nativeName(code) {
-  try {
-    const name = new Intl.DisplayNames([code], { type: "language" }).of(code) || code;
-    return name.charAt(0).toLocaleUpperCase(code) + name.slice(1);
-  } catch {
-    return code;
-  }
-}
-function RewriteText({ editor, selection, rewrite }) {
-  const { t, notify } = useUi();
-  const [running, setRunning] = useState12(
-    /** @type {string|null} */
-    null
-  );
-  const [error, setError] = useState12("");
-  const [instruction, setInstruction] = useState12("");
-  const abortRef = useRef7(
-    /** @type {AbortController|null} */
-    null
-  );
-  const label = selection.tagName === "mj-button";
-  useEffect8(() => () => abortRef.current?.abort(), []);
-  const currentText = () => {
-    const element = editor.getElement(selection.id);
-    return (label ? element?.content : element?.html) ?? "";
-  };
-  const run = async (action, extra = {}) => {
-    if (running) return;
-    const text = currentText();
-    setError("");
-    setRunning(action);
-    const controller = new AbortController();
-    abortRef.current = controller;
-    try {
-      const result = await rewrite({ action, text, format: label ? "plain" : "html", ...extra }, { signal: controller.signal });
-      if (controller.signal.aborted) return;
-      if (currentText() !== text) {
-        setError(t("The text changed in the meantime, so it was left as it is."));
-        return;
-      }
-      editor.setContent(label ? result.text : cleanRichText(result.text, document), selection.id);
-      if (action === "custom") setInstruction("");
-      notify("success", t("Text rewritten. Ctrl+Z brings back the previous one."));
-    } catch (err) {
-      if (!controller.signal.aborted) setError(t(err?.message || "The text could not be rewritten."));
-    } finally {
-      if (abortRef.current === controller) abortRef.current = null;
-      setRunning(null);
-    }
-  };
-  const cancel = () => {
-    abortRef.current?.abort();
-    setRunning(null);
-  };
-  const busy = Boolean(running);
-  const spinner = /* @__PURE__ */ jsx15(Loader26, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
-  return /* @__PURE__ */ jsxs14("section", { className: "eb:space-y-2.5", "aria-label": t("Rewrite with AI"), "data-testid": "eb-rewrite", children: [
-    /* @__PURE__ */ jsxs14(SectionLabel, { className: "eb:flex eb:items-center eb:gap-1.5", children: [
-      /* @__PURE__ */ jsx15(Sparkles2, { className: "eb:size-3", "aria-hidden": "true" }),
-      t("Rewrite with AI")
-    ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: [
-      REWRITE_ACTIONS.map((action) => /* @__PURE__ */ jsxs14("button", { type: "button", className: chipClassName(), disabled: busy, onClick: () => run(action.id), children: [
-        running === action.id && spinner,
-        t(action.label)
-      ] }, action.id)),
-      /* @__PURE__ */ jsxs14(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx15(DropdownMenuTrigger, { asChild: true, disabled: busy, children: /* @__PURE__ */ jsxs14("button", { type: "button", className: chipClassName(), children: [
-          running === "translate" ? spinner : /* @__PURE__ */ jsx15(Languages, { className: "eb:size-3", "aria-hidden": "true" }),
-          t("Translate"),
-          /* @__PURE__ */ jsx15(ChevronDown, { className: "eb:size-3", "aria-hidden": "true" })
-        ] }) }),
-        /* @__PURE__ */ jsx15(DropdownMenuContent, { align: "start", "aria-label": t("Translate into"), children: REWRITE_LANGUAGES.map((code) => /* @__PURE__ */ jsx15(DropdownMenuItem, { lang: code, onSelect: () => run("translate", { targetLanguage: code }), children: nativeName(code) }, code)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs14(
-      "form",
-      {
-        className: "eb:flex eb:gap-1.5",
-        onSubmit: (event) => {
-          event.preventDefault();
-          if (instruction.trim()) run("custom", { instruction: instruction.trim() });
-        },
-        children: [
-          /* @__PURE__ */ jsx15(
-            Input,
-            {
-              value: instruction,
-              onChange: (event) => setInstruction(event.target.value),
-              maxLength: MAX_REWRITE_INSTRUCTION,
-              placeholder: t("Or say what to change\u2026"),
-              "aria-label": t("What to change"),
-              disabled: busy
-            }
-          ),
-          /* @__PURE__ */ jsx15(Button, { type: "submit", variant: "outline", size: "icon-sm", "aria-label": t("Rewrite"), disabled: busy || !instruction.trim(), children: running === "custom" ? /* @__PURE__ */ jsx15(Loader26, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx15(Sparkles2, {}) })
-        ]
-      }
-    ),
-    running && /* @__PURE__ */ jsxs14("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
-      t("Rewriting\u2026"),
-      /* @__PURE__ */ jsx15(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
-    ] }),
-    error && /* @__PURE__ */ jsxs14("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-      /* @__PURE__ */ jsx15(TriangleAlert3, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
-      error
-    ] })
-  ] });
-}
-
-// src/features/generate/SubjectIdeas.jsx
-import { useEffect as useEffect9, useRef as useRef8, useState as useState13 } from "react";
-import { Check as Check3, Loader2 as Loader27, Sparkles as Sparkles3, TriangleAlert as TriangleAlert4 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
-  const { t, locale } = useUi();
-  const [running, setRunning] = useState13(false);
-  const [error, setError] = useState13("");
-  const [ideas, setIdeas] = useState13(
-    /** @type {string[]|null} */
-    null
-  );
-  const [original, setOriginal] = useState13("");
-  const abortRef = useRef8(
-    /** @type {AbortController|null} */
-    null
-  );
-  useEffect9(() => () => abortRef.current?.abort(), []);
-  const run = async () => {
-    if (running) return;
-    const yours = ideas ? original : meta.subject.trim();
-    const controller = new AbortController();
-    abortRef.current = controller;
-    setError("");
-    setRunning(true);
-    try {
-      const result = await suggest(
-        {
-          subject: yours,
-          preheader: meta.preheader,
-          text: emailWords(editor.exportMjml()),
-          language: locale,
-          variables: variables?.map(({ key, label }) => ({ key, label })),
-          avoid: ideas || []
-        },
-        { signal: controller.signal }
-      );
-      if (controller.signal.aborted) return;
-      setOriginal(yours);
-      setIdeas(result.subjects);
-    } catch (err) {
-      if (!controller.signal.aborted) setError(err?.message ? t(err.message) : t("No subject could be suggested."));
-    } finally {
-      if (abortRef.current === controller) abortRef.current = null;
-      setRunning(false);
-    }
-  };
-  const cancel = () => {
-    abortRef.current?.abort();
-    setRunning(false);
-  };
-  const options = ideas ? [...original ? [{ text: original, yours: true }] : [], ...ideas.map((text) => ({ text, yours: false }))] : [];
-  const spinner = /* @__PURE__ */ jsx16(Loader27, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
-  return /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-2", "data-testid": "eb-subject-ideas", children: [
-    !ideas && /* @__PURE__ */ jsxs15("button", { type: "button", className: chipClassName(), disabled: running, onClick: run, children: [
-      running ? spinner : /* @__PURE__ */ jsx16(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
-      t("Suggest subjects")
-    ] }),
-    ideas && /* @__PURE__ */ jsxs15("div", { className: "eb:space-y-2 eb:rounded-md eb:border eb:border-border eb:p-1.5", children: [
-      /* @__PURE__ */ jsx16("div", { role: "radiogroup", "aria-label": t("Subject ideas"), className: "eb:space-y-0.5", children: options.map((option) => {
-        const chosen = meta.subject === option.text;
-        return /* @__PURE__ */ jsxs15(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": chosen,
-            className: cn(
-              "eb:flex eb:w-full eb:items-start eb:gap-2 eb:rounded eb:px-2 eb:py-1.5 eb:text-left eb:text-[12.5px] eb:leading-snug eb:transition-colors eb:outline-none eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
-              chosen ? "eb:bg-primary/10 eb:text-foreground" : "eb:text-foreground-lighter eb:hover:bg-muted"
-            ),
-            onClick: () => onSubject(option.text),
-            children: [
-              /* @__PURE__ */ jsx16(Check3, { className: cn("eb:mt-0.5 eb:size-3.5 eb:shrink-0", chosen ? "eb:text-primary" : "eb:invisible"), "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx16("span", { className: "eb:min-w-0 eb:flex-1 eb:break-words", children: option.text }),
-              option.yours && /* @__PURE__ */ jsx16("span", { className: "eb:shrink-0 eb:text-[11px] eb:text-foreground-muted", children: t("yours") })
-            ]
-          },
-          `${option.yours ? "yours" : "idea"}:${option.text}`
-        );
-      }) }),
-      /* @__PURE__ */ jsxs15("div", { className: "eb:flex eb:items-center eb:gap-1.5 eb:px-1 eb:pb-0.5", children: [
-        /* @__PURE__ */ jsxs15("button", { type: "button", className: chipClassName(), disabled: running, onClick: run, children: [
-          running ? spinner : /* @__PURE__ */ jsx16(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
-          t("More ideas")
-        ] }),
-        /* @__PURE__ */ jsx16(Button, { type: "button", variant: "ghost", size: "xs", className: "eb:ml-auto", disabled: running, onClick: () => setIdeas(null), children: t("Done") })
-      ] })
-    ] }),
-    running && /* @__PURE__ */ jsxs15("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
-      t("Reading the email\u2026"),
-      /* @__PURE__ */ jsx16(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
-    ] }),
-    error && /* @__PURE__ */ jsxs15("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-      /* @__PURE__ */ jsx16(TriangleAlert4, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
-      error
-    ] })
+  return /* @__PURE__ */ jsxs12(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx13(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(Button, { variant: "ghost", size: "icon-xs", "aria-label": label, title: label, children: /* @__PURE__ */ jsx13(Braces3, {}) }) }),
+    /* @__PURE__ */ jsx13(PopoverContent, { align: "end", className: "eb:w-72 eb:p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx13(VariablePicker, { variables, onPick: insert, filter: (v) => v.kind !== "link" }) })
   ] });
 }
 
 // src/ui/PropertiesPanel.jsx
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var GROUP_ORDER = Object.values(GROUPS);
 function grouped(properties) {
   const map = /* @__PURE__ */ new Map();
@@ -5177,9 +4628,9 @@ function grouped(properties) {
 }
 function PropertyGroups({ editor, element, block, idPrefix, services = null }) {
   const t = useT();
-  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
-    /* @__PURE__ */ jsx17(SectionLabel, { children: t(group) }),
-    properties.map((property) => /* @__PURE__ */ jsx17(
+  return grouped(block?.properties || []).map(([group, properties]) => /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+    /* @__PURE__ */ jsx14(SectionLabel, { children: t(group) }),
+    properties.map((property) => /* @__PURE__ */ jsx14(
       PropertyField,
       {
         idPrefix,
@@ -5197,31 +4648,31 @@ 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__ */ jsxs16("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__ */ jsx17("h3", { className: "eb:min-w-0 eb:flex-1 eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx17(TruncatedText, { children: title }) }),
-    onClose && /* @__PURE__ */ jsx17(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t(closeLabel), children: /* @__PURE__ */ jsx17(X, {}) })
+  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(X, {}) })
   ] });
 }
-function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, services = null, onDismiss = null }) {
+function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, variables = null, ai = null, onDismiss = null }) {
   const t = useT();
-  const subjectRef = useRef9(null);
-  const preheaderRef = useRef9(null);
+  const subjectRef = useRef6(null);
+  const preheaderRef = useRef6(null);
   const rootId = editor.getRootId();
-  const root = useMemo5(() => rootId ? editor.getElement(rootId) : null, [editor, rootId, changes]);
+  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__ */ jsxs16(Fragment7, { children: [
-    /* @__PURE__ */ jsx17(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
-    /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-5 eb:p-4", children: [
-      /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx17(SectionLabel, { children: t("Template") }),
-        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs16(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx14(PanelHeader, { title: t("Email"), onClose: onDismiss, closeLabel: "Close" }),
+    /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-5 eb:p-4", children: [
+      /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx14(SectionLabel, { children: t("Template") }),
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13(Label, { htmlFor: "eb-meta-name", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: [
             t("Name"),
             " ",
-            /* @__PURE__ */ jsx17("span", { className: "eb:text-destructive", children: "*" })
+            /* @__PURE__ */ jsx14("span", { className: "eb:text-destructive", children: "*" })
           ] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx14(
             Input,
             {
               id: "eb-meta-name",
@@ -5231,12 +4682,12 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               "aria-invalid": showErrors && !meta.name.trim() || void 0
             }
           ),
-          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx17("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
+          showErrors && !meta.name.trim() && /* @__PURE__ */ jsx14("p", { className: "eb:text-[12px] eb:text-destructive", children: t("Name is required") })
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx17(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
-            variables && /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx14(Label, { htmlFor: "eb-meta-subject", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Subject") }),
+            variables && /* @__PURE__ */ jsx14(
               VariableInsertButton,
               {
                 variables,
@@ -5247,22 +4698,22 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx17(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
-          services?.suggestSubjects && /* @__PURE__ */ jsx17(
-            SubjectIdeas,
+          /* @__PURE__ */ jsx14(Input, { ref: subjectRef, id: "eb-meta-subject", maxLength: 250, value: meta.subject, onChange: field("subject") }),
+          ai?.suggestSubjects && /* @__PURE__ */ jsx14(
+            ai.components.Subjects,
             {
               editor,
               meta,
               onSubject: (subject) => onMetaChange({ ...meta, subject }),
-              suggest: services.suggestSubjects,
+              suggest: ai.suggestSubjects,
               variables
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-1.5", children: [
-          /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
-            /* @__PURE__ */ jsx17(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
-            variables && /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-1.5", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "eb:flex eb:h-6 eb:items-center eb:justify-between", children: [
+            /* @__PURE__ */ jsx14(Label, { htmlFor: "eb-meta-preheader", className: "eb:text-[12px] eb:font-normal eb:text-foreground-lighter", children: t("Preview text") }),
+            variables && /* @__PURE__ */ jsx14(
               VariableInsertButton,
               {
                 variables,
@@ -5273,7 +4724,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
               }
             )
           ] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx14(
             Textarea,
             {
               ref: preheaderRef,
@@ -5287,7 +4738,7 @@ function TemplateSettings({ editor, meta, onMetaChange, changes, showErrors, var
           )
         ] })
       ] }),
-      root && bodyBlock2 && /* @__PURE__ */ jsx17(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
+      root && bodyBlock2 && /* @__PURE__ */ jsx14(PropertyGroups, { editor, element: root, block: bodyBlock2, idPrefix: "eb-page" })
     ] })
   ] });
 }
@@ -5300,12 +4751,13 @@ function PropertiesPanel({
   actions = null,
   showErrors = false,
   services = null,
+  ai = null,
   variables = null,
   onDismiss = null
 }) {
   const t = useT();
   const block = selection?.blockId ? editor.getBlock(selection.blockId) : null;
-  return /* @__PURE__ */ jsx17("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__ */ jsx17(
+  return /* @__PURE__ */ jsx14("aside", { "aria-label": t("Properties"), className: "eb:min-h-0 eb:overflow-y-auto eb:border-l eb:border-border", "data-testid": "eb-properties", children: !selection ? /* @__PURE__ */ jsx14(
     TemplateSettings,
     {
       editor,
@@ -5314,11 +4766,11 @@ function PropertiesPanel({
       changes,
       showErrors,
       variables,
-      services,
+      ai,
       onDismiss
     }
-  ) : /* @__PURE__ */ jsxs16(Fragment7, { children: [
-    /* @__PURE__ */ jsx17(
+  ) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx14(
       PanelHeader,
       {
         title: t(selection.label),
@@ -5327,12 +4779,12 @@ function PropertiesPanel({
       }
     ),
     actions,
-    selection.multiple ? /* @__PURE__ */ jsx17("p", { className: "eb:p-4 eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-select-all", children: t("{count} sections selected. Press Delete to remove them (Ctrl+Z brings them back).", {
+    selection.multiple ? /* @__PURE__ */ jsx14("p", { className: "eb:p-4 eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-select-all", children: t("{count} sections selected. Press Delete to remove them (Ctrl+Z brings them back).", {
       count: selection.multiple
-    }) }) : /* @__PURE__ */ jsxs16("div", { className: "eb:space-y-5 eb:p-4", children: [
-      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs16("section", { className: "eb:space-y-3", children: [
-        /* @__PURE__ */ jsx17(SectionLabel, { children: t(GROUPS.content) }),
-        /* @__PURE__ */ jsx17(
+    }) }) : /* @__PURE__ */ jsxs13("div", { className: "eb:space-y-5 eb:p-4", children: [
+      selection.content !== null && selection.content !== void 0 && /* @__PURE__ */ jsxs13("section", { className: "eb:space-y-3", children: [
+        /* @__PURE__ */ jsx14(SectionLabel, { children: t(GROUPS.content) }),
+        /* @__PURE__ */ jsx14(
           PropertyField,
           {
             idPrefix: "eb-prop",
@@ -5343,16 +4795,16 @@ function PropertiesPanel({
           `${selection.id}:content`
         )
       ] }),
-      selection.tagName === "mj-text" && /* @__PURE__ */ jsx17("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
-      services?.rewrite && REWRITABLE_TAGS.has(selection.tagName) && /* @__PURE__ */ jsx17(RewriteText, { editor, selection, rewrite: services.rewrite }, selection.id),
-      /* @__PURE__ */ jsx17(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
+      selection.tagName === "mj-text" && /* @__PURE__ */ jsx14("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("Double-click the text to edit it.") }),
+      ai?.rewrite && REWRITABLE_TAGS.has(selection.tagName) && /* @__PURE__ */ jsx14(ai.components.Rewrite, { editor, selection, rewrite: ai.rewrite }, selection.id),
+      /* @__PURE__ */ jsx14(PropertyGroups, { editor, element: selection, block, idPrefix: "eb-prop", services })
     ] })
   ] }) });
 }
 
 // src/ui/Toolbar.jsx
 import { ArrowLeft as ArrowLeft2, Monitor, Redo2, Smartphone, Undo2 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Toolbar({
   title,
   status,
@@ -5369,8 +4821,8 @@ function Toolbar({
   compact = false
 }) {
   const t = useT();
-  const identity2 = /* @__PURE__ */ jsxs17(Fragment8, { children: [
-    /* @__PURE__ */ jsxs17(
+  const identity2 = /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    /* @__PURE__ */ jsxs14(
       Button,
       {
         variant: "ghost",
@@ -5378,50 +4830,50 @@ function Toolbar({
         onClick: onBack,
         "aria-label": compact ? t("Back") : void 0,
         children: [
-          /* @__PURE__ */ jsx18(ArrowLeft2, {}),
+          /* @__PURE__ */ jsx15(ArrowLeft2, {}),
           !compact && t("Back")
         ]
       }
     ),
-    /* @__PURE__ */ jsx18(Separator, { orientation: "vertical", className: "eb:h-5" }),
-    /* @__PURE__ */ jsxs17("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
-      /* @__PURE__ */ jsx18("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx18(TruncatedText, { children: title || t("New template") }) }),
-      /* @__PURE__ */ jsx18("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
+    /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "eb:h-5" }),
+    /* @__PURE__ */ jsxs14("div", { className: cn("eb:min-w-0 eb:flex-1", !compact && "eb:max-w-[320px]"), children: [
+      /* @__PURE__ */ jsx15("p", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: /* @__PURE__ */ jsx15(TruncatedText, { children: title || t("New template") }) }),
+      /* @__PURE__ */ jsx15("p", { className: "eb:text-[11px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: status })
     ] })
   ] });
-  const editing = /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
-      /* @__PURE__ */ jsx18(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx18(Undo2, {}) }) }),
-      /* @__PURE__ */ jsx18(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx18(Redo2, {}) }) })
+  const editing = /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:items-center eb:gap-0.5", children: [
+      /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Undo (Ctrl+Z)"), children: /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onUndo, disabled: !ready || !canUndo, "aria-label": t("Undo"), children: /* @__PURE__ */ jsx15(Undo2, {}) }) }),
+      /* @__PURE__ */ jsx15(TooltipWrap, { label: t("Redo (Ctrl+Y)"), children: /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onRedo, disabled: !ready || !canRedo, "aria-label": t("Redo"), children: /* @__PURE__ */ jsx15(Redo2, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx18(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs17(TabsList, { "aria-label": t("Device"), children: [
-      /* @__PURE__ */ jsxs17(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
-        /* @__PURE__ */ jsx18(Monitor, {}),
+    /* @__PURE__ */ jsx15(Tabs, { value: device, onValueChange: onDeviceChange, children: /* @__PURE__ */ jsxs14(TabsList, { "aria-label": t("Device"), children: [
+      /* @__PURE__ */ jsxs14(TabsTrigger, { value: "desktop", disabled: !ready, "aria-label": compact ? t("Desktop") : void 0, children: [
+        /* @__PURE__ */ jsx15(Monitor, {}),
         !compact && t("Desktop")
       ] }),
-      /* @__PURE__ */ jsxs17(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
-        /* @__PURE__ */ jsx18(Smartphone, {}),
+      /* @__PURE__ */ jsxs14(TabsTrigger, { value: "mobile", disabled: !ready, "aria-label": compact ? t("Mobile") : void 0, children: [
+        /* @__PURE__ */ jsx15(Smartphone, {}),
         !compact && t("Mobile")
       ] })
     ] }) })
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs17("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
-      /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
+    return /* @__PURE__ */ jsxs14("div", { className: "eb:shrink-0 eb:border-b eb:border-border", "data-layout": "compact", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-12 eb:items-center eb:gap-2 eb:px-2", children: [
         identity2,
         primary
       ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:items-center eb:gap-2 eb:overflow-x-auto eb:px-2 eb:pb-2", "data-testid": "eb-toolbar-actions", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:items-center eb:gap-2 eb:overflow-x-auto eb:px-2 eb:pb-2", "data-testid": "eb-toolbar-actions", children: [
         editing,
-        /* @__PURE__ */ jsx18(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
-        /* @__PURE__ */ jsx18("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
+        /* @__PURE__ */ jsx15(Separator, { orientation: "vertical", className: "eb:h-5 eb:shrink-0" }),
+        /* @__PURE__ */ jsx15("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2", children: actions })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "eb:flex eb:h-12 eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-3", children: [
     identity2,
     editing,
-    /* @__PURE__ */ jsxs17("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "eb:ml-auto eb:flex eb:items-center eb:gap-2", "data-testid": "eb-toolbar-actions", children: [
       actions,
       primary
     ] })
@@ -5429,12 +4881,12 @@ function Toolbar({
 }
 
 // src/ui/Drawer.jsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { X as X2 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Drawer({ open, side = "left", title, onClose, children, testId, header = true }) {
   const t = useT();
-  useEffect10(() => {
+  useEffect7(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -5442,9 +4894,9 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
-  return /* @__PURE__ */ jsxs18("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
-    /* @__PURE__ */ jsx19("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("eb:absolute eb:inset-0 eb:z-20", !open && "eb:hidden"), "data-testid": testId, "data-open": open ? "true" : "false", children: [
+    /* @__PURE__ */ jsx16("div", { className: "eb:absolute eb:inset-0 eb:bg-black/30", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs15(
       "section",
       {
         role: "dialog",
@@ -5454,11 +4906,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: [
-          header && /* @__PURE__ */ jsxs18("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__ */ jsx19("h3", { className: "eb:text-[13px] eb:font-medium eb:text-foreground", children: title }),
-            /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon-sm-compact", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx19(X2, {}) })
+          header && /* @__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(X2, {}) })
           ] }),
-          /* @__PURE__ */ jsx19("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
+          /* @__PURE__ */ jsx16("div", { className: "eb:grid eb:min-h-0 eb:flex-1", children })
         ]
       }
     )
@@ -5466,10 +4918,10 @@ function Drawer({ open, side = "left", title, onClose, children, testId, header
 }
 
 // src/ui/useEmailEditorState.js
-import { useCallback, useEffect as useEffect11, useRef as useRef10, useState as useState14 } from "react";
+import { useCallback, useEffect as useEffect8, useRef as useRef7, useState as useState11 } from "react";
 var DIRTY_CHECK_MS = 150;
 function useEmailEditorState(editor) {
-  const [state, setState] = useState14(() => ({
+  const [state, setState] = useState11(() => ({
     status: editor?.status || "idle",
     selection: null,
     canUndo: false,
@@ -5478,9 +4930,9 @@ function useEmailEditorState(editor) {
     changes: 0,
     dirty: false
   }));
-  const clean = useRef10(null);
-  const forced = useRef10(false);
-  const timer = useRef10(null);
+  const clean = useRef7(null);
+  const forced = useRef7(false);
+  const timer = useRef7(null);
   const snapshot = useCallback(() => {
     try {
       return editor.status === "ready" ? editor.exportMjml() : null;
@@ -5503,7 +4955,7 @@ function useEmailEditorState(editor) {
     forced.current = true;
     setState((s) => ({ ...s, dirty: true }));
   }, []);
-  useEffect11(() => {
+  useEffect8(() => {
     if (!editor) return void 0;
     const patch = (values) => setState((s) => ({ ...s, ...values }));
     const measure = () => {
@@ -5550,7 +5002,7 @@ function useEmailEditorState(editor) {
 }
 
 // src/ui/EmailBuilder.jsx
-import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var EMPTY_META = { name: "", subject: "", preheader: "", description: "" };
 function metaOf(template) {
   return {
@@ -5576,19 +5028,20 @@ function Builder({
   onSaved,
   onDirtyChange,
   dirtyCheckRef,
+  ai,
   className
 }) {
   const { t, locale, notify, confirm } = useUi();
-  const tRef = useRef11(t);
+  const tRef = useRef8(t);
   tRef.current = t;
-  const editor = useMemo6(
+  const editor = useMemo5(
     () => injected || createDefaultEmailEditor({ locale, t: (key, values) => tRef.current(key, values) }),
     [injected, locale]
   );
-  const storage = useMemo6(() => injectedStorage || createHttpStorage(), [injectedStorage]);
-  const systemVariables = useMemo6(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
-  const [customVariables, setCustomVariables] = useState15([]);
-  const variables = useMemo6(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
+  const storage = useMemo5(() => injectedStorage || createHttpStorage(), [injectedStorage]);
+  const systemVariables = useMemo5(() => defineVariables(variablesProp || DEFAULT_VARIABLES), [variablesProp]);
+  const [customVariables, setCustomVariables] = useState12([]);
+  const variables = useMemo5(() => mergeVariables(systemVariables, customVariables), [systemVariables, customVariables]);
   const canManageVariables = typeof storage.saveVariable === "function" && typeof storage.listVariables === "function";
   const reloadVariables = useCallback2(async () => {
     if (typeof storage.listVariables !== "function") return;
@@ -5598,52 +5051,45 @@ function Builder({
       notify("error", error.message);
     }
   }, [storage, notify]);
-  useEffect12(() => {
+  useEffect9(() => {
     reloadVariables();
   }, [reloadVariables]);
   const { brand, setBrand } = useBrand(storage);
-  const brandSender = useMemo6(() => brandedSender(sender, brand), [sender, brand]);
-  const starter = useMemo6(
+  const brandSender = useMemo5(() => brandedSender(sender, brand), [sender, brand]);
+  const starter = useMemo5(
     () => brandTemplate(starterMjml || createStarterMjml({ sender: brandSender, t }), brand, { sender, t }),
     [starterMjml, brandSender, brand, sender, t]
   );
-  const templates = useMemo6(
+  const templates = useMemo5(
     () => buildGallery({ templates: galleryProp ?? TEMPLATE_GALLERY, sender: brandSender, t }).map((template2) => ({
       ...template2,
       mjml: brandTemplate(template2.mjml, brand, { sender, t })
     })),
     [galleryProp, brandSender, brand, sender, t]
   );
-  useEffect12(() => {
+  useEffect9(() => {
     editor.setBrand?.(hasBrand(brand) ? brand : null);
   }, [editor, brand]);
-  const services = useMemo6(
-    () => ({
-      uploadImage: (file) => storage.uploadImage(file),
-      rewrite: typeof storage.rewrite === "function" ? (input, options) => storage.rewrite(input, options) : null,
-      suggestSubjects: typeof storage.suggestSubjects === "function" ? (input, options) => storage.suggestSubjects(input, options) : null
-    }),
-    [storage]
-  );
+  const services = useMemo5(() => ({ uploadImage: (file) => storage.uploadImage(file) }), [storage]);
   const state = useEmailEditorState(editor);
   const autosaveOn = isFeatureEnabled("autosave");
   const autosaveOptions = emailBuilderFeatures.get("autosave")?.options || {};
-  const [template, setTemplate] = useState15({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
-  const [boot, setBoot] = useState15({ status: "loading", document: null, mjml: null, draft: false, message: null });
-  const [meta, setMeta] = useState15(EMPTY_META);
-  const [savedMeta, setSavedMeta] = useState15(EMPTY_META);
-  const [saving, setSaving] = useState15(null);
-  const [showErrors, setShowErrors] = useState15(false);
-  const [autosaveBlocked, setAutosaveBlocked] = useState15(null);
-  const [engineError, setEngineError] = useState15(null);
-  const [attempt, setAttempt] = useState15(0);
-  const rootRef = useRef11(null);
+  const [template, setTemplate] = useState12({ id: initialTemplateId, revision: null, savedAt: null, auto: false });
+  const [boot, setBoot] = useState12({ status: "loading", document: null, mjml: null, draft: false, message: null });
+  const [meta, setMeta] = useState12(EMPTY_META);
+  const [savedMeta, setSavedMeta] = useState12(EMPTY_META);
+  const [saving, setSaving] = useState12(null);
+  const [showErrors, setShowErrors] = useState12(false);
+  const [autosaveBlocked, setAutosaveBlocked] = useState12(null);
+  const [engineError, setEngineError] = useState12(null);
+  const [attempt, setAttempt] = useState12(0);
+  const rootRef = useRef8(null);
   const layout2 = useLayoutWidth(rootRef);
   const compact = layout2 !== "wide";
   const blocksInDrawer = layout2 === "narrow";
-  const [drawer, setDrawer] = useState15(null);
+  const [drawer, setDrawer] = useState12(null);
   const closeDrawer = useCallback2(() => setDrawer(null), []);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!compact) setDrawer(null);
     else if (!blocksInDrawer) setDrawer((d) => d === "blocks" ? null : d);
   }, [compact, blocksInDrawer]);
@@ -5654,8 +5100,8 @@ function Builder({
     (date) => date ? new Date(date).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }) : "",
     [locale]
   );
-  const booted = useRef11(false);
-  useEffect12(() => {
+  const booted = useRef8(false);
+  useEffect9(() => {
     if (booted.current) return;
     booted.current = true;
     (async () => {
@@ -5715,26 +5161,26 @@ function Builder({
     if (!boot.document) editor.loadMjml(boot.mjml || initialMjml || starter);
   }, [editor, boot.document, boot.mjml, starter, initialMjml]);
   const { markDirty, markClean, checkDirty } = state;
-  useEffect12(() => {
+  useEffect9(() => {
     if (ready && boot.draft) markDirty();
   }, [ready, boot.draft, markDirty]);
   const isDirty = useCallback2(
     () => editor.status === "ready" && checkDirty() || metaDirty,
     [editor, checkDirty, metaDirty]
   );
-  const reportDirty = useRef11(onDirtyChange);
+  const reportDirty = useRef8(onDirtyChange);
   reportDirty.current = onDirtyChange;
-  useEffect12(() => {
+  useEffect9(() => {
     reportDirty.current?.(dirty);
   }, [dirty]);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!dirtyCheckRef) return void 0;
     dirtyCheckRef.current = isDirty;
     return () => {
       dirtyCheckRef.current = null;
     };
   }, [dirtyCheckRef, isDirty]);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!dirty) return void 0;
     const warn = (e) => {
       e.preventDefault();
@@ -5743,8 +5189,8 @@ function Builder({
     window.addEventListener("beforeunload", warn);
     return () => window.removeEventListener("beforeunload", warn);
   }, [dirty]);
-  const savingRef = useRef11(false);
-  const latest = useRef11({});
+  const savingRef = useRef8(false);
+  const latest = useRef8({});
   latest.current = { template, meta, onSaved, compact };
   const save = useCallback2(
     async ({ auto = false } = {}) => {
@@ -5759,9 +5205,9 @@ function Builder({
         }
         return false;
       }
-      const document2 = editor.getDocument();
+      const document = editor.getDocument();
       const mjml6 = editor.exportMjml();
-      const payload = { ...currentMeta, document: document2, mjml: mjml6 };
+      const payload = { ...currentMeta, document, mjml: mjml6 };
       savingRef.current = true;
       setSaving(auto ? "auto" : "manual");
       try {
@@ -5774,11 +5220,19 @@ function Builder({
         if (!current.id) clearLocalDraft();
         latest.current.onSaved?.(result.template);
         const warnings = result.warnings || [];
+        const withoutPicture = auto ? 0 : countImagesWithoutPicture(mjml6);
         if (warnings.length) {
           notify(
             "warning",
             t("Saved, with {count} MJML warning(s): {message}", { count: warnings.length, message: warnings[0].message })
           );
+        } else if (withoutPicture) {
+          notify(
+            "warning",
+            t("Saved. {count} image(s) have no picture yet: they are left out of the email until you add one.", {
+              count: withoutPicture
+            })
+          );
         } else if (!auto) {
           notify(
             "success",
@@ -5827,7 +5281,7 @@ function Builder({
     },
     [editor, storage, markClean, notify, confirm, t]
   );
-  useEffect12(() => {
+  useEffect9(() => {
     const onKey = (e) => {
       if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "s") {
         e.preventDefault();
@@ -5837,11 +5291,11 @@ function Builder({
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
   }, [save]);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!ready) return void 0;
     return editor.addShortcut("save", "mod+s", () => save());
   }, [ready, editor, save]);
-  const scheduler = useMemo6(
+  const scheduler = useMemo5(
     () => createAutosaveScheduler({
       run: () => save({ auto: true }),
       idleMs: autosaveOptions.idleMs,
@@ -5849,13 +5303,13 @@ function Builder({
     }),
     [save, autosaveOptions.idleMs, autosaveOptions.maxWaitMs]
   );
-  useEffect12(() => () => scheduler.dispose(), [scheduler]);
-  useEffect12(() => {
+  useEffect9(() => () => scheduler.dispose(), [scheduler]);
+  useEffect9(() => {
     if (!autosaveOn || !ready || !template.id || autosaveBlocked) return;
     if (dirty) scheduler.notify();
     else scheduler.reset();
   }, [autosaveOn, ready, template.id, autosaveBlocked, dirty, state.changes, meta, scheduler]);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!autosaveOn || !ready || template.id || !dirty) return void 0;
     const timer = setTimeout(() => {
       if (editor.status === "ready") saveLocalDraft({ document: editor.getDocument(), meta });
@@ -5896,12 +5350,13 @@ function Builder({
     sender: brandSender,
     hostSender: sender,
     brand,
-    setBrand
+    setBrand,
+    ai
   };
   const toolbarFeatures = emailBuilderFeatures.list(
     (f) => f.enabled !== false && Boolean(f.toolbar) && (f.isAvailable ? f.isAvailable(featureContext) : true)
   );
-  const properties = /* @__PURE__ */ jsx20(
+  const properties = /* @__PURE__ */ jsx17(
     PropertiesPanel,
     {
       onDismiss: compact ? closeDrawer : null,
@@ -5911,12 +5366,13 @@ function Builder({
       onMetaChange: setMeta,
       changes: state.changes,
       showErrors,
-      actions: /* @__PURE__ */ jsx20(ElementActions, { editor, selection: state.selection }),
+      actions: /* @__PURE__ */ jsx17(ElementActions, { editor, selection: state.selection }),
       services,
+      ai,
       variables
     }
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: rootRef,
@@ -5926,7 +5382,7 @@ function Builder({
       "data-layout": layout2,
       "data-template-id": template.id || "",
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx17(
           Toolbar,
           {
             title: meta.name,
@@ -5940,17 +5396,21 @@ function Builder({
             onDeviceChange: (device) => editor.setDevice(device),
             onBack: onClose ? back : void 0,
             compact,
-            actions: toolbarFeatures.map((feature) => {
-              const Action = feature.toolbar;
-              return /* @__PURE__ */ jsx20(Action, { context: featureContext }, feature.id);
-            }),
-            primary: /* @__PURE__ */ jsxs19(Button, { size: "sm-compact", onClick: () => save(), disabled: !ready || saving !== null, children: [
-              saving === "manual" ? /* @__PURE__ */ jsx20(Loader28, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx20(Save, {}),
+            actions: [
+              // The AI module's button first, when the host gave the module.
+              ai?.generate && /* @__PURE__ */ jsx17(ai.components.Generate, { context: featureContext, generate: ai.generate }, "ai-generate"),
+              ...toolbarFeatures.map((feature) => {
+                const Action = feature.toolbar;
+                return /* @__PURE__ */ jsx17(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, {}),
               t("Save")
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             className: cn(
@@ -5960,12 +5420,12 @@ function Builder({
               layout2 === "narrow" && "eb:grid-cols-1"
             ),
             children: [
-              !blocksInDrawer && /* @__PURE__ */ jsx20(BlockSidebar, { editor, disabled: !ready, onAdded: compact ? () => setDrawer("properties") : void 0 }),
-              /* @__PURE__ */ jsx20("div", { className: "eb:relative eb:min-w-0 eb:bg-surface-75", "aria-busy": !ready, children: boot.status === "error" || engineError ? /* @__PURE__ */ jsxs19("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__ */ jsx20(AlertTriangle, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx20("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__ */ jsx20("p", { className: "eb:max-w-sm eb:text-[12px] eb:text-foreground-muted", children: boot.message || engineError }),
-                engineError && /* @__PURE__ */ jsx20(
+              !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(
                   Button,
                   {
                     variant: "outline",
@@ -5977,8 +5437,8 @@ function Builder({
                     children: t("Retry")
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs19(Fragment9, { children: [
-                boot.status === "ready" && /* @__PURE__ */ jsx20(
+              ] }) : /* @__PURE__ */ jsxs16(Fragment8, { children: [
+                boot.status === "ready" && /* @__PURE__ */ jsx17(
                   EmailCanvas,
                   {
                     editor,
@@ -5988,14 +5448,14 @@ function Builder({
                   },
                   attempt
                 ),
-                !ready && /* @__PURE__ */ jsxs19("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__ */ jsx20(Loader28, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx20("span", { className: "eb:sr-only", children: t("Loading the builder") })
+                !ready && /* @__PURE__ */ jsxs16("div", { className: "eb:absolute eb:inset-0 eb:flex eb:items-center eb:justify-center eb:bg-surface-75", role: "status", "aria-live": "polite", children: [
+                  /* @__PURE__ */ jsx17(Loader25, { className: "eb:size-6 eb:animate-spin eb:text-foreground-muted", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx17("span", { className: "eb:sr-only", children: t("Loading the builder") })
                 ] })
               ] }) }),
               !compact && properties,
-              blocksInDrawer && /* @__PURE__ */ jsx20(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx20(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
-              compact && /* @__PURE__ */ jsx20(
+              blocksInDrawer && /* @__PURE__ */ jsx17(Drawer, { open: drawer === "blocks", side: "left", title: t("Add a block"), onClose: closeDrawer, testId: "eb-blocks-drawer", children: /* @__PURE__ */ jsx17(BlockSidebar, { editor, disabled: !ready, onAdded: () => setDrawer("properties") }) }),
+              compact && /* @__PURE__ */ jsx17(
                 Drawer,
                 {
                   open: drawer === "properties",
@@ -6010,12 +5470,12 @@ function Builder({
             ]
           }
         ),
-        compact && /* @__PURE__ */ jsxs19("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__ */ jsxs19(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
-            /* @__PURE__ */ jsx20(Plus2, {}),
+        compact && /* @__PURE__ */ jsxs16("div", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-2 eb:border-t eb:border-border eb:px-2 eb:py-2", "data-testid": "eb-compact-bar", children: [
+          blocksInDrawer && /* @__PURE__ */ jsxs16(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: () => setDrawer("blocks"), children: [
+            /* @__PURE__ */ jsx17(Plus2, {}),
             t("Add a block")
           ] }),
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs16(
             Button,
             {
               variant: state.selection ? "default" : "outline",
@@ -6024,25 +5484,44 @@ function Builder({
               disabled: !ready,
               onClick: () => setDrawer("properties"),
               children: [
-                /* @__PURE__ */ jsx20(SlidersHorizontal, {}),
-                /* @__PURE__ */ jsx20("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
+                /* @__PURE__ */ jsx17(SlidersHorizontal, {}),
+                /* @__PURE__ */ jsx17("span", { className: "eb:truncate", children: ready && state.selection ? t("Edit: {element}", { element: t(state.selection.label) }) : t("Email settings") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx20(NoticeArea, {})
+        /* @__PURE__ */ jsx17(NoticeArea, {}),
+        ai?.key && ai.components.Connect && /* @__PURE__ */ jsx17(ai.components.Connect, { aiKey: ai.key })
       ]
     }
   );
 }
-function EmailBuilder({ locale = "en", messages, onNotify, ...props }) {
-  return /* @__PURE__ */ jsx20(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx20(Builder, { ...props, templateId: props.templateId ?? null }) });
+function EmailBuilder({ locale = "en", messages, onNotify, ai: aiProp = null, ...props }) {
+  const ai = useAiModule(aiProp);
+  const allMessages = useMemo5(
+    () => 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 }) });
+}
+function useAiModule(value) {
+  const valid = Boolean(value && typeof value === "object" && /** @type {any} */
+  value.components);
+  useEffect9(() => {
+    if (value && !valid) {
+      console.warn("EmailBuilder: `ai` must be made by createAi() from best-email-builder/ai \u2014 the AI stays off.");
+    }
+  }, [value, valid]);
+  return valid ? (
+    /** @type {import('../ai/createAi.js').EmailBuilderAi} */
+    value
+  ) : null;
 }
 
 // src/ui/EmailBuilderBoundary.jsx
 import { Component } from "react";
 import { AlertTriangle as AlertTriangle2, ArrowLeft as ArrowLeft3, RefreshCw } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var isChunkError = (error) => error?.name === "ChunkLoadError" || /Loading (CSS )?chunk .* failed/i.test(String(error?.message || ""));
 var english = (text) => text;
 var EmailBuilderBoundary = class extends Component {
@@ -6067,23 +5546,23 @@ var EmailBuilderBoundary = class extends Component {
     const { error, attempt } = this.state;
     const t = this.props.t || english;
     if (!error) {
-      return /* @__PURE__ */ jsx21("div", { style: { height: "100%" }, children: this.props.children }, attempt);
+      return /* @__PURE__ */ jsx18("div", { style: { height: "100%" }, children: this.props.children }, attempt);
     }
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         role: "alert",
         className: "eb-root eb:flex eb:h-full eb:flex-col eb:items-center eb:justify-center eb:gap-3 eb:p-6 eb:text-center",
         children: [
-          /* @__PURE__ */ jsx21(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx21("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
-          /* @__PURE__ */ jsxs20("div", { className: "eb:flex eb:gap-2", children: [
-            this.props.onClose && /* @__PURE__ */ jsxs20(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
-              /* @__PURE__ */ jsx21(ArrowLeft3, {}),
+          /* @__PURE__ */ jsx18(AlertTriangle2, { className: "eb:size-6 eb:text-destructive", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx18("p", { className: "eb:text-[13px] eb:text-foreground", children: t("The builder could not load.") }),
+          /* @__PURE__ */ jsxs17("div", { className: "eb:flex eb:gap-2", children: [
+            this.props.onClose && /* @__PURE__ */ jsxs17(Button, { variant: "outline", size: "sm", onClick: this.props.onClose, children: [
+              /* @__PURE__ */ jsx18(ArrowLeft3, {}),
               t("Back")
             ] }),
-            /* @__PURE__ */ jsxs20(Button, { size: "sm", onClick: this.retry, children: [
-              /* @__PURE__ */ jsx21(RefreshCw, {}),
+            /* @__PURE__ */ jsxs17(Button, { size: "sm", onClick: this.retry, children: [
+              /* @__PURE__ */ jsx18(RefreshCw, {}),
               t("Retry")
             ] })
           ] })
@@ -6107,4 +5586,4 @@ export {
   EmailBuilder,
   EmailBuilderBoundary
 };
-//# sourceMappingURL=chunk-MY6WPDT4.js.map
+//# sourceMappingURL=chunk-7QQH6MTV.js.map