best-email-builder 0.4.0 → 0.5.1

package/dist/ai.js

@@ -0,0 +1,852 @@
+import {
+  cleanRichText
+} from "./chunk-SAIW46IC.js";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Input,
+  Label,
+  SEARCH_KEYS,
+  SearchKeyHint,
+  SectionLabel,
+  Textarea,
+  cn,
+  createHttpCaller,
+  useSearchShortcut,
+  useUi
+} from "./chunk-N7DEVAIP.js";
+import "./chunk-H4W65GBX.js";
+import {
+  AI_MESSAGES,
+  AI_PROVIDERS,
+  DEFAULT_CLAUDE_MODEL,
+  EMAIL_PURPOSES,
+  EmailGenerationError,
+  GENERATION_ERRORS,
+  MAX_DETAILS_LENGTH,
+  MAX_REWRITE_INSTRUCTION,
+  PURPOSE_CATEGORIES,
+  REWRITE_ACTIONS,
+  REWRITE_LANGUAGES,
+  claudeEmailModel,
+  createEmailGenerator,
+  emailWords,
+  providerEmailModel,
+  purposesByCategory,
+  resolveProvider
+} from "./chunk-BAA5XMWY.js";
+import "./chunk-OWVXKMLI.js";
+import "./chunk-W424KPCR.js";
+import {
+  brandTemplate,
+  hasBrand
+} from "./chunk-JI36FNWE.js";
+
+// src/ai/keys.js
+var STORAGE_PREFIX = "best-email-builder:ai-key:";
+function browserStorage() {
+  try {
+    const storage = globalThis.localStorage;
+    return storage && typeof storage.getItem === "function" ? storage : null;
+  } catch {
+    return null;
+  }
+}
+function createKeyStore(provider) {
+  const slot = STORAGE_PREFIX + provider.id;
+  let memory = "";
+  let refused = false;
+  let pending = null;
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot;
+  const read = () => {
+    try {
+      return browserStorage()?.getItem(slot) || "";
+    } catch {
+      return "";
+    }
+  };
+  const write = (value) => {
+    try {
+      const storage = browserStorage();
+      if (value) storage?.setItem(slot, value);
+      else storage?.removeItem(slot);
+    } catch {
+    }
+  };
+  const get = () => memory || read();
+  const changed = () => {
+    snapshot = Object.freeze({ asking: Boolean(pending), refused, connected: Boolean(get()) });
+    for (const listener of [...listeners]) listener();
+  };
+  snapshot = Object.freeze({ asking: false, refused: false, connected: Boolean(get()) });
+  const answer = (key) => {
+    const value = String(key || "").trim();
+    if (value) {
+      memory = value;
+      refused = false;
+      write(value);
+    }
+    const waiting = pending;
+    pending = null;
+    changed();
+    waiting?.resolve(value);
+  };
+  return Object.freeze({
+    provider: Object.freeze({ id: provider.id, name: provider.name, keyUrl: provider.keyUrl, keyHint: provider.keyHint, free: provider.free }),
+    get,
+    set: (key) => {
+      if (typeof key !== "string" || !key.trim()) throw new TypeError("ai.key.set: a non-empty key");
+      answer(key);
+    },
+    forget: () => {
+      memory = "";
+      write("");
+      changed();
+    },
+    request: () => {
+      if (!pending) {
+        let resolve = () => {
+        };
+        const promise = new Promise((done) => resolve = done);
+        pending = { promise, resolve };
+        changed();
+      }
+      return pending.promise;
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    state: () => snapshot,
+    answer: (key) => answer(key || ""),
+    refuse: () => {
+      memory = "";
+      write("");
+      refused = true;
+      changed();
+    }
+  });
+}
+
+// src/ai/ConnectAi.jsx
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { ArrowUpRight, Eye, EyeOff, Gift, KeyRound, ShieldCheck, TriangleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConnectAi({ aiKey }) {
+  const { t } = useUi();
+  const state = useSyncExternalStore(aiKey.subscribe, aiKey.state, aiKey.state);
+  const [value, setValue] = useState("");
+  const [shown, setShown] = useState(false);
+  const inputRef = useRef(
+    /** @type {HTMLInputElement|null} */
+    null
+  );
+  const inputId = useId();
+  const hintId = useId();
+  const { name, keyUrl, keyHint, free } = aiKey.provider;
+  useEffect(() => {
+    if (!state.asking) return;
+    setValue("");
+    setShown(false);
+  }, [state.asking]);
+  const key = value.trim();
+  const unusual = Boolean(key && keyHint && !key.startsWith(keyHint));
+  const submit = (event) => {
+    event.preventDefault();
+    if (key) aiKey.answer(key);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: state.asking, onOpenChange: (open) => !open && aiKey.answer(null), children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      className: "eb:gap-0 eb:overflow-hidden eb:p-0 eb:sm:max-w-md",
+      "data-testid": "eb-ai-connect",
+      onOpenAutoFocus: (event) => {
+        event.preventDefault();
+        inputRef.current?.focus();
+      },
+      children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
+        /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-5 eb:px-6 eb:pt-6 eb:pb-5", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { className: "eb:flex-row eb:items-start eb:gap-3.5 eb:pr-6", children: [
+            /* @__PURE__ */ jsx("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-full eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx(KeyRound, { className: "eb:size-5", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { children: t("Connect {provider}", { provider: name }) }),
+              /* @__PURE__ */ jsx(DialogDescription, { className: "eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", children: t("The AI writes with your own {provider} key. Connect it once: this browser remembers it.", { provider: name }) })
+            ] })
+          ] }),
+          state.refused && /* @__PURE__ */ jsxs("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-2 eb:rounded-md eb:border eb:border-destructive/30 eb:bg-destructive/10 eb:px-3 eb:py-2 eb:text-[12.5px] eb:text-destructive", children: [
+            /* @__PURE__ */ jsx(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+            t("{provider} refused the last key. Paste another one.", { provider: name })
+          ] }),
+          (keyUrl || free) && /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-wrap eb:items-center eb:gap-x-3 eb:gap-y-2", children: [
+            keyUrl && /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm-compact", children: /* @__PURE__ */ jsxs("a", { href: keyUrl, target: "_blank", rel: "noopener noreferrer", "data-testid": "eb-ai-connect-get-key", children: [
+              t("Get a key"),
+              /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+            ] }) }),
+            free && /* @__PURE__ */ jsxs("span", { className: "eb:inline-flex eb:items-center eb:gap-1.5 eb:rounded-full eb:bg-success/10 eb:px-2.5 eb:py-1 eb:text-[11.5px] eb:font-medium eb:text-success", children: [
+              /* @__PURE__ */ jsx(Gift, { className: "eb:size-3.5", "aria-hidden": "true" }),
+              t(free)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("API key") }),
+            /* @__PURE__ */ jsxs("div", { className: "eb:relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  type: shown ? "text" : "password",
+                  value,
+                  onChange: (event) => setValue(event.target.value),
+                  placeholder: keyHint ? `${keyHint}\u2026` : t("Paste the key"),
+                  autoComplete: "off",
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: false,
+                  "aria-describedby": hintId,
+                  className: "eb:h-9 eb:pr-10 eb:font-mono eb:text-[12.5px]",
+                  "data-testid": "eb-ai-connect-key"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "eb:absolute eb:top-1/2 eb:right-1 eb:flex eb:size-7 eb:-translate-y-1/2 eb:items-center eb:justify-center eb:rounded eb:text-foreground-muted eb:transition-colors eb:outline-none eb:hover:bg-muted eb:hover:text-foreground eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
+                  onClick: () => setShown((current) => !current),
+                  "aria-label": shown ? t("Hide the key") : t("Show the key"),
+                  "aria-pressed": shown,
+                  children: shown ? /* @__PURE__ */ jsx(EyeOff, { className: "eb:size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "eb:size-4", "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { id: hintId, className: "eb:min-h-4 eb:text-[11.5px] eb:text-foreground-muted", children: unusual ? /* @__PURE__ */ jsx("span", { className: "eb:text-warning", children: t("{provider} keys usually start with {prefix}.", { provider: name, prefix: keyHint }) }) : keyHint ? t("{provider} keys start with {prefix}.", { provider: name, prefix: keyHint }) : null })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:items-start eb:gap-2 eb:border-t eb:border-border eb:bg-surface-75 eb:px-6 eb:py-3 eb:text-[11.5px] eb:leading-relaxed eb:text-foreground-lighter", children: [
+          /* @__PURE__ */ jsx(ShieldCheck, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-foreground-muted", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: t("The key stays in this browser and is sent only to {provider}.", { provider: name }) })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "eb:border-t eb:border-border eb:px-6 eb:py-4", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => aiKey.answer(null), children: t("Cancel") }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !key, "data-testid": "eb-ai-connect-submit", children: t("Connect") })
+        ] })
+      ] })
+    }
+  ) });
+}
+
+// src/ai/GenerateButton.jsx
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Check, Loader2, Search, Sparkles, TriangleAlert as TriangleAlert2 } from "lucide-react";
+
+// src/ai/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/ai/GenerateButton.jsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var fold = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function GenerateButton({ context, generate: generateEmail }) {
+  const { editor, ready, isDirty, markDirty, template, setMeta, variables, sender, brand } = context;
+  const { t, locale, notify } = useUi();
+  const [open, setOpen] = useState2(false);
+  const [purpose, setPurpose] = useState2(
+    /** @type {string|null} */
+    null
+  );
+  const [details, setDetails] = useState2("");
+  const [query, setQuery] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const [error, setError] = useState2("");
+  const [seconds, setSeconds] = useState2(0);
+  const [dirty, setDirty] = useState2(false);
+  const abortRef = useRef2(
+    /** @type {AbortController|null} */
+    null
+  );
+  const searchRef = useRef2(
+    /** @type {HTMLInputElement|null} */
+    null
+  );
+  useSearchShortcut(searchRef);
+  useEffect2(() => () => abortRef.current?.abort(), []);
+  useEffect2(() => {
+    if (!busy) return void 0;
+    setSeconds(0);
+    const timer = setInterval(() => setSeconds((s) => s + 1), 1e3);
+    return () => clearInterval(timer);
+  }, [busy]);
+  const groups = useMemo(() => {
+    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 generateEmail(
+        {
+          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(err?.message ? t(err.message) : t("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__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, children: [
+      /* @__PURE__ */ jsx2(Sparkles, {}),
+      t("Generate")
+    ] }),
+    /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs2(
+      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__ */ jsxs2(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-3", children: [
+            /* @__PURE__ */ jsx2(DialogTitle, { children: t("Generate an email") }),
+            /* @__PURE__ */ jsx2(DialogDescription, { children: t("Pick what it is for. AI writes a complete email that opens here, ready to edit.") })
+          ] }),
+          /* @__PURE__ */ jsx2("div", { className: "eb:px-6 eb:pb-3", children: /* @__PURE__ */ jsxs2("div", { className: "eb:relative", children: [
+            /* @__PURE__ */ jsx2(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                ref: searchRef,
+                type: "search",
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                placeholder: t("Search: sale, password, birthday\u2026"),
+                "aria-label": t("Search"),
+                "aria-keyshortcuts": SEARCH_KEYS,
+                className: "eb:pr-16 eb:pl-8 eb:[&::-webkit-search-cancel-button]:hidden",
+                disabled: busy
+              }
+            ),
+            /* @__PURE__ */ jsx2(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-2 eb:-translate-y-1/2" })
+          ] }) }),
+          /* @__PURE__ */ jsx2("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__ */ jsxs2("fieldset", { disabled: busy, className: "eb:m-0 eb:min-w-0 eb:border-0 eb:p-0", children: [
+            /* @__PURE__ */ jsx2("legend", { className: "eb:sr-only", children: t("What is the email for?") }),
+            groups.length === 0 && /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: "eb:flex eb:flex-col eb:gap-4", children: groups.map((group) => /* @__PURE__ */ jsxs2("section", { className: "eb:flex eb:flex-col eb:gap-2", "aria-label": t(group.label), children: [
+              /* @__PURE__ */ jsx2(SectionLabel, { children: t(group.label) }),
+              /* @__PURE__ */ jsx2("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: group.purposes.map((entry) => {
+                const selected = purpose === entry.id;
+                return /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-pressed": selected,
+                    "data-purpose": entry.id,
+                    onClick: () => setPurpose(selected ? null : entry.id),
+                    className: chipClassName(selected),
+                    children: [
+                      selected && /* @__PURE__ */ jsx2(Check, { className: "eb:size-3", "aria-hidden": "true" }),
+                      t(entry.label)
+                    ]
+                  },
+                  entry.id
+                );
+              }) })
+            ] }, group.id)) })
+          ] }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
+            /* @__PURE__ */ jsx2(
+              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__ */ jsxs2("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+              /* @__PURE__ */ jsx2(TriangleAlert2, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+              error
+            ] }) : dirty && !busy && /* @__PURE__ */ jsx2("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The email being edited will be replaced, unsaved changes included.") }),
+            /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:justify-end eb:gap-2", children: [
+              busy && /* @__PURE__ */ jsx2("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__ */ jsx2(Button, { variant: "outline", size: "sm", onClick: cancel, children: t("Cancel") }),
+              /* @__PURE__ */ jsxs2(Button, { size: "sm", onClick: generate, disabled: !canGenerate || busy, "data-testid": "eb-generate-submit", children: [
+                busy ? /* @__PURE__ */ jsx2(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx2(Sparkles, {}),
+                t("Generate")
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/ai/RewriteText.jsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { ChevronDown, Languages, Loader2 as Loader22, Sparkles as Sparkles2, TriangleAlert as TriangleAlert3 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } 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] = useState3(
+    /** @type {string|null} */
+    null
+  );
+  const [error, setError] = useState3("");
+  const [instruction, setInstruction] = useState3("");
+  const abortRef = useRef3(
+    /** @type {AbortController|null} */
+    null
+  );
+  const label = selection.tagName === "mj-button";
+  useEffect3(() => () => 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(err?.message ? t(err.message) : t("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__ */ jsx3(Loader22, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs3("section", { className: "eb:space-y-2.5", "aria-label": t("Rewrite with AI"), "data-testid": "eb-rewrite", children: [
+    /* @__PURE__ */ jsxs3(SectionLabel, { className: "eb:flex eb:items-center eb:gap-1.5", children: [
+      /* @__PURE__ */ jsx3(Sparkles2, { className: "eb:size-3", "aria-hidden": "true" }),
+      t("Rewrite with AI")
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: [
+      REWRITE_ACTIONS.map((action) => /* @__PURE__ */ jsxs3("button", { type: "button", className: chipClassName(), disabled: busy, onClick: () => run(action.id), children: [
+        running === action.id && spinner,
+        t(action.label)
+      ] }, action.id)),
+      /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, disabled: busy, children: /* @__PURE__ */ jsxs3("button", { type: "button", className: chipClassName(), children: [
+          running === "translate" ? spinner : /* @__PURE__ */ jsx3(Languages, { className: "eb:size-3", "aria-hidden": "true" }),
+          t("Translate"),
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "eb:size-3", "aria-hidden": "true" })
+        ] }) }),
+        /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "start", "aria-label": t("Translate into"), children: REWRITE_LANGUAGES.map((code) => /* @__PURE__ */ jsx3(DropdownMenuItem, { lang: code, onSelect: () => run("translate", { targetLanguage: code }), children: nativeName(code) }, code)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        className: "eb:flex eb:gap-1.5",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (instruction.trim()) run("custom", { instruction: instruction.trim() });
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            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__ */ jsx3(Button, { type: "submit", variant: "outline", size: "icon-sm", "aria-label": t("Rewrite"), disabled: busy || !instruction.trim(), children: running === "custom" ? /* @__PURE__ */ jsx3(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx3(Sparkles2, {}) })
+        ]
+      }
+    ),
+    running && /* @__PURE__ */ jsxs3("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__ */ jsx3(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
+    ] }),
+    error && /* @__PURE__ */ jsxs3("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+      /* @__PURE__ */ jsx3(TriangleAlert3, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+      error
+    ] })
+  ] });
+}
+
+// src/ai/SubjectIdeas.jsx
+import { useEffect as useEffect4, useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
+import { Check as Check2, Loader2 as Loader23, Sparkles as Sparkles3, TriangleAlert as TriangleAlert4 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MAX_AVOID = 12;
+function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
+  const { t, locale } = useUi();
+  const [running, setRunning] = useState4(false);
+  const [error, setError] = useState4("");
+  const [ideas, setIdeas] = useState4(
+    /** @type {string[]|null} */
+    null
+  );
+  const [original, setOriginal] = useState4("");
+  const shownRef = useRef4(
+    /** @type {string[]} */
+    []
+  );
+  const abortRef = useRef4(
+    /** @type {AbortController|null} */
+    null
+  );
+  const subjectRef = useRef4(meta.subject);
+  subjectRef.current = meta.subject;
+  const rootRef = useRef4(
+    /** @type {HTMLDivElement|null} */
+    null
+  );
+  const focusRef = useRef4(
+    /** @type {'list'|'button'|null} */
+    null
+  );
+  useEffect4(() => () => abortRef.current?.abort(), []);
+  useEffect4(
+    () => editor.on("load", () => {
+      abortRef.current?.abort();
+      abortRef.current = null;
+      shownRef.current = [];
+      setRunning(false);
+      setIdeas(null);
+      setError("");
+      setOriginal("");
+    }),
+    [editor]
+  );
+  const typed = meta.subject.trim();
+  useEffect4(() => {
+    if (ideas && typed && !ideas.includes(meta.subject) && typed !== original) setOriginal(typed);
+  }, [ideas, meta.subject, typed, original]);
+  useLayoutEffect(() => {
+    const target = focusRef.current;
+    if (!target || running) return;
+    focusRef.current = null;
+    const root = rootRef.current;
+    const element = target === "list" ? root?.querySelector('[role="radio"][tabindex="0"]') : root?.querySelector("[data-subject-ideas-button]");
+    element?.focus();
+  });
+  const ready = editor.status === "ready";
+  const run = async () => {
+    if (running || editor.status !== "ready") return;
+    const first = !ideas;
+    const yours = first ? subjectRef.current.trim() : original;
+    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, kind }) => ({ key, label, kind })),
+          avoid: shownRef.current.slice(-MAX_AVOID)
+        },
+        { signal: controller.signal }
+      );
+      if (controller.signal.aborted) return;
+      const current = subjectRef.current;
+      const kept = ideas?.includes(current) ? [current] : [];
+      const next = [...kept, ...result.subjects.filter((subject) => subject !== current)];
+      shownRef.current = [...shownRef.current, ...result.subjects];
+      setOriginal(current.trim() && !ideas?.includes(current) ? current.trim() : yours);
+      setIdeas(next);
+      if (first) focusRef.current = "list";
+    } 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();
+    abortRef.current = null;
+    setRunning(false);
+    focusRef.current = "button";
+  };
+  const done = () => {
+    setIdeas(null);
+    setError("");
+    shownRef.current = [];
+    focusRef.current = "button";
+  };
+  const options = ideas ? [...original ? [{ text: original, yours: true }] : [], ...ideas.map((text) => ({ text, yours: false }))] : [];
+  const checked = options.findIndex((option) => option.text === meta.subject);
+  const tabStop = checked === -1 ? 0 : checked;
+  const onKeyDown = (event) => {
+    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    const to = step ? (tabStop + step + options.length) % options.length : event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : -1;
+    if (to === -1 || !options.length) return;
+    event.preventDefault();
+    onSubject(options[to].text);
+    rootRef.current?.querySelectorAll('[role="radio"]')[to]?.focus();
+  };
+  const spinner = /* @__PURE__ */ jsx4(Loader23, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-2", "data-testid": "eb-subject-ideas", ref: rootRef, children: [
+    !ideas && /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
+      running ? spinner : /* @__PURE__ */ jsx4(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
+      t("Suggest subjects")
+    ] }),
+    ideas && /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-2 eb:rounded-md eb:border eb:border-border eb:p-1.5", children: [
+      /* @__PURE__ */ jsx4("div", { role: "radiogroup", "aria-label": t("Subject ideas"), className: "eb:space-y-0.5", onKeyDown, children: options.map((option, index) => {
+        const chosen = index === checked;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": chosen,
+            tabIndex: index === tabStop ? 0 : -1,
+            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__ */ jsx4(Check2, { className: cn("eb:mt-0.5 eb:size-3.5 eb:shrink-0", chosen ? "eb:text-primary" : "eb:invisible"), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx4("span", { className: "eb:min-w-0 eb:flex-1 eb:break-words", children: option.text }),
+              option.yours && /* @__PURE__ */ jsx4("span", { className: "eb:shrink-0 eb:text-[11px] eb:text-foreground-muted", children: t("yours") })
+            ]
+          },
+          `${option.yours ? "yours" : "idea"}:${option.text}`
+        );
+      }) }),
+      /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:items-center eb:gap-1.5 eb:px-1 eb:pb-0.5", children: [
+        /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
+          running ? spinner : /* @__PURE__ */ jsx4(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
+          t("More ideas")
+        ] }),
+        /* @__PURE__ */ jsx4(Button, { type: "button", variant: "ghost", size: "xs", className: "eb:ml-auto", disabled: running, onClick: done, children: t("Done") })
+      ] })
+    ] }),
+    running && /* @__PURE__ */ jsxs4("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__ */ jsx4(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
+    ] }),
+    error && /* @__PURE__ */ jsxs4("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+      /* @__PURE__ */ jsx4(TriangleAlert4, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+      error
+    ] })
+  ] });
+}
+
+// src/ai/createAi.js
+var PARTS = (
+  /** @type {const} */
+  ["generate", "rewrite", "suggestSubjects"]
+);
+var ROUTES = { generate: "/generate", rewrite: "/rewrite", suggestSubjects: "/subjects" };
+function createAi(options = {}) {
+  if (!options || typeof options !== "object") throw new TypeError("createAi: options must be an object");
+  const { model, maxAttempts, compile, baseUrl, headers, fetch: fetchImpl, provider: providerOption, apiKey, askKey = false } = options;
+  const usesProvider = providerOption !== void 0;
+  const http = baseUrl !== void 0 || headers !== void 0 || fetchImpl !== void 0 && !usesProvider;
+  if (model !== void 0 && typeof model !== "function") throw new TypeError("createAi: `model` must be a function");
+  if (model && http) throw new TypeError("createAi: pass `model` (the AI runs in the page) or `baseUrl` (on the server), not both");
+  if (usesProvider && (model || http)) {
+    throw new TypeError("createAi: `provider` runs the AI in the page \u2014 not with `model`, `baseUrl` or `headers` (give the provider `{ id, model, baseUrl, headers }`)");
+  }
+  if (!usesProvider && (apiKey !== void 0 || options.askKey !== void 0)) {
+    throw new TypeError('createAi: `apiKey` and `askKey` go with a `provider` (e.g. provider: "openrouter")');
+  }
+  if (apiKey !== void 0 && (typeof apiKey !== "string" || !apiKey)) throw new TypeError("createAi: `apiKey` must be a non-empty string");
+  if (compile !== void 0 && (typeof compile !== "function" || !model && !usesProvider)) {
+    throw new TypeError("createAi: `compile` must be a function, and goes with `provider` or `model` (the AI in the page)");
+  }
+  if (typeof askKey !== "boolean") throw new TypeError("createAi: `askKey` must be true or false");
+  if (apiKey && askKey) throw new TypeError("createAi: `apiKey` (one key for all) or `askKey` (each user's own), not both");
+  const provider = usesProvider ? resolveProvider(providerOption) : null;
+  if (provider && !apiKey && !askKey && !provider.keyless) {
+    throw new TypeError(`createAi: ${provider.name} needs a key \u2014 \`apiKey\`, or \`askKey: true\` to let each user connect their own`);
+  }
+  for (const part of PARTS) {
+    const value = options[part];
+    if (value !== void 0 && typeof value !== "boolean" && typeof value !== "function") {
+      throw new TypeError(`createAi: \`${part}\` must be a function, true or false`);
+    }
+  }
+  const ownOnly = !model && !http && PARTS.some((part) => typeof options[part] === "function");
+  let transport = {};
+  const key = provider && askKey ? createKeyStore(provider) : null;
+  if (provider) {
+    const generator = createEmailGenerator({
+      model: providerEmailModel({
+        provider,
+        fetch: fetchImpl,
+        // The user's key, asked when there is none ('' when they cancel: KEY_MISSING).
+        apiKey: key ? async () => key.get() || await key.request() : apiKey
+      }),
+      maxAttempts,
+      compile
+    });
+    for (const part of PARTS) transport[part] = key ? askedAgain(generator[part], key) : generator[part];
+  } else if (model) {
+    transport = createEmailGenerator({ model, maxAttempts, compile });
+  } else if (!ownOnly) {
+    const { call } = createHttpCaller({ baseUrl, headers, fetch: fetchImpl });
+    for (const part of PARTS) {
+      transport[part] = (input, { signal } = {}) => call(ROUTES[part], { method: "POST", body: JSON.stringify(input), signal });
+    }
+  }
+  const resolve = (part) => {
+    const value = options[part];
+    if (typeof value === "function") return value;
+    if (value === false) return null;
+    return transport[part] || null;
+  };
+  return Object.freeze({
+    generate: (
+      /** @type {GenerateFn|null} */
+      resolve("generate")
+    ),
+    rewrite: (
+      /** @type {RewriteFn|null} */
+      resolve("rewrite")
+    ),
+    suggestSubjects: (
+      /** @type {SuggestSubjectsFn|null} */
+      resolve("suggestSubjects")
+    ),
+    key,
+    messages: AI_MESSAGES,
+    components: Object.freeze({ Generate: GenerateButton, Rewrite: RewriteText, Subjects: SubjectIdeas, Connect: key ? ConnectAi : null })
+  });
+}
+function askedAgain(run, key) {
+  return async (input, options) => {
+    try {
+      return await run(input, options);
+    } catch (error) {
+      if (
+        /** @type {any} */
+        error?.code !== "KEY_REFUSED" || options?.signal?.aborted
+      ) throw error;
+      key.refuse();
+      try {
+        return await run(input, options);
+      } catch (again) {
+        if (
+          /** @type {any} */
+          again?.code === "KEY_REFUSED"
+        ) key.refuse();
+        throw again;
+      }
+    }
+  };
+}
+export {
+  AI_MESSAGES,
+  AI_PROVIDERS,
+  DEFAULT_CLAUDE_MODEL,
+  EMAIL_PURPOSES,
+  EmailGenerationError,
+  GENERATION_ERRORS,
+  PURPOSE_CATEGORIES,
+  REWRITE_ACTIONS,
+  REWRITE_LANGUAGES,
+  claudeEmailModel,
+  createAi,
+  createEmailGenerator,
+  emailWords,
+  providerEmailModel,
+  resolveProvider
+};
+//# sourceMappingURL=ai.js.map