best-email-builder 0.2.0 → 0.4.0

package/dist/chunk-NAEGU6PR.js

@@ -0,0 +1,538 @@
+import {
+  Button,
+  EmailPreview,
+  Input,
+  NoticeArea,
+  SectionLabel,
+  TEMPLATE_GALLERY,
+  UiProvider,
+  buildGallery,
+  cn,
+  createHttpStorage,
+  useBrand,
+  useLayoutWidth,
+  useUi,
+  withPlaceholderImages
+} from "./chunk-AT73Y7JA.js";
+import {
+  brandTemplate,
+  brandedSender
+} from "./chunk-HHLOE6OZ.js";
+
+// src/ui/library/TemplateLibrary.jsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  AlertCircle,
+  ArrowLeft,
+  Copy,
+  Download,
+  LayoutTemplate,
+  Loader2,
+  PencilRuler,
+  Plus,
+  RefreshCw,
+  Search,
+  Star,
+  Trash2,
+  X
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DATE_FORMAT = { day: "2-digit", month: "2-digit", year: "numeric" };
+var DEFAULT_FAVORITES_KEY = "best-email-builder:favorites";
+var matches = (query, ...fields) => {
+  const q = query.trim().toLowerCase();
+  return !q || fields.some((f) => String(f || "").toLowerCase().includes(q));
+};
+var codeOf = (name, fallback) => String(name || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 48) || fallback;
+function useFavorites(storageKey) {
+  const [favorites, setFavorites] = useState(() => {
+    if (!storageKey) return /* @__PURE__ */ new Set();
+    try {
+      return new Set(JSON.parse(localStorage.getItem(storageKey) || "[]"));
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  });
+  const toggle = useCallback(
+    (key) => setFavorites((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      try {
+        localStorage.setItem(storageKey, JSON.stringify([...next]));
+      } catch {
+      }
+      return next;
+    }),
+    [storageKey]
+  );
+  return { enabled: Boolean(storageKey), favorites, toggle };
+}
+function download(name, html) {
+  const blob = new Blob([html], { type: "text/html;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${codeOf(name, "email")}.html`;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function Badge({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "eb:inline-flex eb:w-fit eb:shrink-0 eb:items-center eb:rounded-md eb:border eb:border-border eb:px-1.5 eb:py-0 eb:text-[10px] eb:whitespace-nowrap eb:text-foreground", children });
+}
+function Row({ entry, selected, favorite, onSelect, testId }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      "aria-current": selected ? "true" : void 0,
+      "data-testid": testId,
+      className: cn(
+        "eb:w-full eb:rounded-lg2 eb:border eb:px-2.5 eb:py-2 eb:text-left eb:transition-colors eb:outline-none",
+        "eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
+        selected ? "eb:border-primary/50 eb:bg-primary/5" : "eb:border-transparent eb:hover:bg-surface-75"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "eb:flex eb:items-center eb:gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "eb:min-w-0 eb:flex-1 eb:truncate eb:text-[13px] eb:text-foreground", children: entry.name }),
+          favorite && /* @__PURE__ */ jsx(Star, { className: "eb:size-3.5 eb:shrink-0 eb:fill-current eb:text-warning", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "eb:mt-0.5 eb:block eb:truncate eb:font-mono eb:text-[11px] eb:text-foreground-lighter", children: entry.code }),
+        /* @__PURE__ */ jsxs("span", { className: "eb:mt-1 eb:flex eb:flex-wrap eb:items-center eb:gap-1", children: [
+          /* @__PURE__ */ jsx(Badge, { children: entry.badge }),
+          entry.date && /* @__PURE__ */ jsx("span", { className: "eb:ml-auto eb:text-[10.5px] eb:text-foreground-muted", children: entry.date })
+        ] })
+      ]
+    }
+  );
+}
+function Section({ label, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", ...props, children: [
+    /* @__PURE__ */ jsx(SectionLabel, { children: label }),
+    children
+  ] });
+}
+function Library({
+  storage: injectedStorage,
+  sender,
+  templates: galleryProp,
+  title,
+  description,
+  selectedId = null,
+  favoritesKey = DEFAULT_FAVORITES_KEY,
+  onEdit,
+  onCreate,
+  onClose,
+  className
+}) {
+  const { t, locale, notify, confirm } = useUi();
+  const storage = useMemo(() => injectedStorage || createHttpStorage(), [injectedStorage]);
+  const { brand } = useBrand(storage);
+  const bases = useMemo(
+    () => buildGallery({ templates: galleryProp ?? TEMPLATE_GALLERY, sender: brandedSender(sender, brand), t }).map((base2) => ({
+      ...base2,
+      mjml: brandTemplate(base2.mjml, brand, { sender, t })
+    })),
+    [galleryProp, sender, brand, t]
+  );
+  const dateFormat = useMemo(() => new Intl.DateTimeFormat(locale, DATE_FORMAT), [locale]);
+  const formatDate = useCallback((at) => at ? dateFormat.format(new Date(at)) : "", [dateFormat]);
+  const stars = useFavorites(favoritesKey);
+  const rootRef = useRef(null);
+  const searchRef = useRef(null);
+  const layout = useLayoutWidth(rootRef);
+  const [items, setItems] = useState({ status: "loading", list: [], error: null });
+  const [query, setQuery] = useState("");
+  const [selection, setSelection] = useState(selectedId != null ? `template:${selectedId}` : null);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [detail, setDetail] = useState({ status: "idle", template: null, error: null });
+  const [preview, setPreview] = useState({ html: "", loading: false, error: null });
+  const [device, setDevice] = useState("desktop");
+  const [busy, setBusy] = useState(null);
+  const lastRead = useRef(0);
+  const reload = useCallback(async () => {
+    const ticket = ++lastRead.current;
+    if (typeof storage.list !== "function") {
+      setItems({ status: "ready", list: [], error: null });
+      return;
+    }
+    setItems((s) => ({ ...s, status: s.list.length ? "ready" : "loading", error: null }));
+    try {
+      const list = await storage.list();
+      if (ticket === lastRead.current) setItems({ status: "ready", list, error: null });
+    } catch (error) {
+      if (ticket === lastRead.current) setItems({ status: "error", list: [], error: error.message });
+    }
+  }, [storage]);
+  useEffect(() => {
+    reload();
+  }, [reload]);
+  const templateEntries = useMemo(
+    () => items.list.map((item) => ({
+      key: `template:${item.id}`,
+      kind: "template",
+      id: item.id,
+      name: item.name,
+      code: codeOf(item.name, `#${item.id}`),
+      badge: t("Builder"),
+      date: formatDate(item.updatedAt || item.createdAt),
+      subject: item.subject,
+      item
+    })),
+    [items.list, t, formatDate]
+  );
+  const baseEntries = useMemo(
+    () => bases.map((base2) => ({
+      key: `base:${base2.id}`,
+      kind: "base",
+      id: base2.id,
+      name: base2.name,
+      code: `base_${base2.id}`,
+      badge: t("Base"),
+      date: "",
+      subject: base2.subject,
+      base: base2
+    })),
+    [bases, t]
+  );
+  const shown = (entries) => entries.filter((e) => matches(query, e.name, e.code, e.subject, e.base?.description));
+  const favoriteEntries = shown([...templateEntries, ...baseEntries]).filter((e) => stars.favorites.has(e.key));
+  const otherTemplates = shown(templateEntries).filter((e) => !stars.favorites.has(e.key));
+  const otherBases = shown(baseEntries).filter((e) => !stars.favorites.has(e.key));
+  useEffect(() => {
+    if (items.status !== "ready" || selection) return;
+    const base2 = bases.find((b) => b.mjml.includes("<mj-section")) || bases[0];
+    if (items.list.length) setSelection(`template:${items.list[0].id}`);
+    else if (base2) setSelection(`base:${base2.id}`);
+  }, [items, selection, bases]);
+  useEffect(() => {
+    const onKey = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k" && rootRef.current?.isConnected) {
+        event.preventDefault();
+        searchRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const selected = templateEntries.find((e) => e.key === selection) || baseEntries.find((e) => e.key === selection) || null;
+  const base = selected?.kind === "base" ? selected.base : null;
+  const templateId = selection?.startsWith("template:") ? selection.slice("template:".length) : null;
+  useEffect(() => {
+    if (templateId == null) {
+      setDetail({ status: "idle", template: null, error: null });
+      return void 0;
+    }
+    let live = true;
+    setDetail((d) => ({ status: "loading", template: String(d.template?.id) === templateId ? d.template : null, error: null }));
+    storage.load(templateId).then(
+      (template2) => live && setDetail({ status: "ready", template: template2, error: null }),
+      (error) => live && setDetail({ status: "error", template: null, error: error.message })
+    );
+    return () => {
+      live = false;
+    };
+  }, [templateId, storage]);
+  const template = detail.template;
+  const source = base ? { mjml: base.mjml, subject: base.subject, preheader: base.preheader, html: "" } : template ? { mjml: template.mjml, subject: template.subject, preheader: template.preheader, html: template.html || "" } : null;
+  const sourceKey = base ? `base:${base.id}:${locale}` : template ? `template:${template.id}:${template.revision}` : "";
+  useEffect(() => {
+    if (!source) {
+      setPreview({ html: "", loading: templateId != null && detail.status === "loading", error: null });
+      return void 0;
+    }
+    if (typeof storage.render !== "function" || !source.mjml) {
+      setPreview({ html: source.html, loading: false, error: source.html ? null : t("No preview: this storage cannot render emails.") });
+      return void 0;
+    }
+    let live = true;
+    setPreview((p) => ({ ...p, loading: true, error: null }));
+    storage.render({ mjml: source.mjml, subject: source.subject, preheader: source.preheader }).then(
+      (result) => live && setPreview({ html: withPlaceholderImages(result.html), loading: false, error: null }),
+      (error) => live && setPreview({ html: source.html, loading: false, error: source.html ? null : error.message })
+    );
+    return () => {
+      live = false;
+    };
+  }, [sourceKey, storage]);
+  const select = (key) => {
+    setSelection(key);
+    setDetailsOpen(true);
+  };
+  const remove = async () => {
+    const ok = await confirm({
+      title: t("Delete \u201C{name}\u201D?", { name: template.name }),
+      description: t("The template and its versions will be deleted."),
+      confirmLabel: t("Delete"),
+      destructive: true
+    });
+    if (!ok) return;
+    setBusy("delete");
+    try {
+      await storage.remove(template.id);
+      setSelection(null);
+      setDetailsOpen(false);
+      await reload();
+      notify("success", t("Template deleted."));
+    } catch (error) {
+      notify("error", error.message);
+    } finally {
+      setBusy(null);
+    }
+  };
+  const duplicate = async () => {
+    setBusy("duplicate");
+    try {
+      const { template: copy } = await storage.duplicate(template.id);
+      await reload();
+      setSelection(`template:${copy.id}`);
+      notify("success", t("Template duplicated."));
+    } catch (error) {
+      notify("error", error.message);
+    } finally {
+      setBusy(null);
+    }
+  };
+  const copyHtml = async () => {
+    try {
+      await navigator.clipboard.writeText(template.html);
+      notify("success", t("HTML copied."));
+    } catch {
+      notify("error", t("The browser refused to copy."));
+    }
+  };
+  const canList = typeof storage.list === "function";
+  const rowProps = (entry) => ({
+    entry,
+    testId: entry.kind === "base" ? "eb-library-base" : "eb-library-template",
+    selected: entry.key === selection,
+    favorite: stars.favorites.has(entry.key),
+    onSelect: () => select(entry.key)
+  });
+  const listColumn = /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:min-h-0 eb:min-w-0 eb:flex-col", "data-testid": "eb-library-list", children: [
+    /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:shrink-0 eb:flex-col eb:gap-2 eb:border-b eb:border-border eb:p-3", children: [
+      onCreate && /* @__PURE__ */ jsxs(Button, { className: "eb:w-full", onClick: () => onCreate(null), children: [
+        /* @__PURE__ */ jsx(PencilRuler, {}),
+        t("New template")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "eb:relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: searchRef,
+            type: "search",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Escape" && query) {
+                e.preventDefault();
+                setQuery("");
+              }
+            },
+            placeholder: t("Search templates"),
+            "aria-label": t("Search templates"),
+            "aria-keyshortcuts": "Control+K",
+            className: "eb:pr-16 eb:pl-8 eb:[&::-webkit-search-cancel-button]:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "eb:absolute eb:top-1/2 eb:right-2 eb:flex eb:-translate-y-1/2 eb:items-center eb:gap-1", children: [
+          query && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setQuery(""), "aria-label": t("Clear the search"), className: "eb:cursor-pointer", children: /* @__PURE__ */ jsx(X, { className: "eb:size-3.5 eb:text-foreground-muted eb:hover:text-foreground" }) }),
+          /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              className: "eb:inline-flex eb:h-5 eb:items-center eb:rounded eb:border eb:border-border eb:bg-surface-100 eb:px-1.5 eb:font-mono eb:text-[10px] eb:text-foreground-muted",
+              "aria-hidden": "true",
+              children: query ? "Esc" : "Ctrl K"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:min-h-0 eb:flex-1 eb:flex-col eb:gap-4 eb:overflow-y-auto eb:p-3", children: [
+      stars.enabled && favoriteEntries.length > 0 && /* @__PURE__ */ jsx(Section, { label: t("Favorites"), role: "group", "aria-label": t("Favorites"), "data-testid": "eb-library-favorites", children: favoriteEntries.map((entry) => /* @__PURE__ */ jsx(Row, { ...rowProps(entry) }, entry.key)) }),
+      canList && /* @__PURE__ */ jsx(Section, { label: `${t("Templates")} (${otherTemplates.length})`, "data-testid": "eb-library-templates", children: items.status === "loading" ? /* @__PURE__ */ jsxs("p", { className: "eb:m-0 eb:flex eb:items-center eb:gap-2 eb:px-1 eb:text-[12px] eb:text-foreground-lighter", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "eb:size-3.5 eb:animate-spin" }),
+        t("Loading\u2026")
+      ] }) : items.status === "error" ? /* @__PURE__ */ jsxs("div", { className: "eb:px-1 eb:text-[12px] eb:text-destructive", children: [
+        /* @__PURE__ */ jsx("p", { className: "eb:m-0", children: t("Could not load the templates.") }),
+        /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:mt-0.5 eb:text-foreground-muted", children: items.error }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm-compact", className: "eb:mt-2", onClick: reload, children: [
+          /* @__PURE__ */ jsx(RefreshCw, {}),
+          t("Retry")
+        ] })
+      ] }) : otherTemplates.length === 0 ? /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:px-1 eb:text-[12px] eb:leading-relaxed eb:text-foreground-lighter", children: query ? t("Nothing matches \u201C{query}\u201D.", { query }) : templateEntries.length ? t("All your templates are in the favorites.") : t("No template yet. Start from a base, or create a new one.") }) : otherTemplates.map((entry) => /* @__PURE__ */ jsx(Row, { ...rowProps(entry) }, entry.key)) }),
+      otherBases.length > 0 && /* @__PURE__ */ jsx(Section, { label: `${t("Bases")} (${otherBases.length})`, "data-testid": "eb-library-bases", children: otherBases.map((entry) => /* @__PURE__ */ jsx(Row, { ...rowProps(entry) }, entry.key)) })
+    ] })
+  ] }, "list");
+  const meta = base ? { name: base.name, code: `base_${base.id}`, description: base.description, origin: t("Base"), subject: base.subject, preheader: base.preheader } : selected || template ? {
+    name: template?.name ?? selected.name,
+    code: selected?.code ?? codeOf(template?.name, `#${templateId}`),
+    description: template?.description ?? selected?.item?.description,
+    origin: t("Builder"),
+    subject: (template ?? selected?.item)?.subject,
+    preheader: (template ?? selected?.item)?.preheader,
+    createdAt: (template ?? selected?.item)?.createdAt,
+    createdBy: (template ?? selected?.item)?.createdBy,
+    updatedAt: (template ?? selected?.item)?.updatedAt,
+    updatedBy: (template ?? selected?.item)?.updatedBy
+  } : null;
+  const favorite = selection ? stars.favorites.has(selection) : false;
+  const detailsBody = templateId != null && detail.status === "error" ? /* @__PURE__ */ jsxs("p", { className: "eb:m-0 eb:flex eb:items-start eb:gap-2 eb:text-[13px] eb:text-destructive", children: [
+    /* @__PURE__ */ jsx(AlertCircle, { className: "eb:mt-0.5 eb:size-4 eb:shrink-0" }),
+    detail.error
+  ] }) : meta ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:items-center eb:gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "eb:m-0 eb:min-w-0 eb:flex-1 eb:text-[15px] eb:font-medium eb:text-foreground", children: meta.name }),
+        stars.enabled && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm-compact",
+            className: cn("eb:shrink-0", favorite ? "eb:text-warning" : "eb:text-foreground-muted eb:hover:text-warning"),
+            onClick: () => stars.toggle(selection),
+            "aria-pressed": favorite,
+            "aria-label": favorite ? t("Remove from favorites") : t("Add to favorites"),
+            title: favorite ? t("Remove from favorites") : t("Add to favorites"),
+            children: /* @__PURE__ */ jsx(Star, { className: cn("eb:size-4", favorite && "eb:fill-current") })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:font-mono eb:text-[11.5px] eb:text-foreground-lighter", children: meta.code }),
+      meta.description && /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:text-[12.5px] eb:leading-relaxed eb:text-foreground-lighter", children: meta.description })
+    ] }),
+    /* @__PURE__ */ jsxs("dl", { className: "eb:m-0 eb:grid eb:grid-cols-[110px_minmax(0,1fr)] eb:gap-x-3 eb:gap-y-1.5 eb:text-[12px]", children: [
+      /* @__PURE__ */ jsx("dt", { className: "eb:text-foreground-muted", children: t("Origin") }),
+      /* @__PURE__ */ jsx("dd", { className: "eb:m-0 eb:text-foreground", children: meta.origin }),
+      /* @__PURE__ */ jsx("dt", { className: "eb:text-foreground-muted", children: t("Subject") }),
+      /* @__PURE__ */ jsx("dd", { className: "eb:m-0 eb:break-words eb:text-foreground", children: meta.subject || "\u2014" }),
+      /* @__PURE__ */ jsx("dt", { className: "eb:text-foreground-muted", children: t("Preview text") }),
+      /* @__PURE__ */ jsx("dd", { className: "eb:m-0 eb:break-words eb:text-foreground-lighter", children: meta.preheader || "\u2014" }),
+      !base && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("dt", { className: "eb:text-foreground-muted", children: t("Created") }),
+        /* @__PURE__ */ jsxs("dd", { className: "eb:m-0 eb:text-foreground", children: [
+          formatDate(meta.createdAt) || "\u2014",
+          meta.createdBy ? ` ${t("by {name}", { name: meta.createdBy })}` : ""
+        ] }),
+        meta.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "eb:text-foreground-muted", children: t("Updated") }),
+          /* @__PURE__ */ jsxs("dd", { className: "eb:m-0 eb:text-foreground", children: [
+            formatDate(meta.updatedAt),
+            meta.updatedBy ? ` ${t("by {name}", { name: meta.updatedBy })}` : ""
+          ] })
+        ] })
+      ] })
+    ] }),
+    base && /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:p-2.5 eb:text-[12px] eb:leading-relaxed eb:text-foreground-lighter", children: t("Base \u2014 not editable: start from it to create your template.") })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "eb:flex eb:flex-1 eb:items-center eb:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:w-full eb:flex-col eb:items-center eb:justify-center eb:gap-2 eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:px-6 eb:py-12 eb:text-center", children: [
+    /* @__PURE__ */ jsx("span", { className: "eb:flex eb:size-12 eb:items-center eb:justify-center eb:rounded-full eb:bg-surface-200 eb:text-foreground-muted", children: /* @__PURE__ */ jsx(LayoutTemplate, { className: "eb:size-6" }) }),
+    /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:text-[13px] eb:font-medium eb:text-foreground", children: t("Choose a template") }),
+    /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:max-w-sm eb:text-[13px] eb:leading-relaxed eb:text-foreground-muted", children: t("Select a template on the left.") })
+  ] }) });
+  const actions = base ? onCreate && /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: "eb:w-full",
+      onClick: () => onCreate({ baseId: base.id, mjml: base.mjml, meta: { subject: base.subject, preheader: base.preheader } }),
+      children: [
+        /* @__PURE__ */ jsx(Plus, {}),
+        t("Start from this base")
+      ]
+    }
+  ) : template ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:gap-2", children: [
+      onEdit && /* @__PURE__ */ jsxs(Button, { className: "eb:flex-1", onClick: () => onEdit(template), children: [
+        /* @__PURE__ */ jsx(PencilRuler, {}),
+        t("Edit")
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "eb:flex-1", disabled: !!busy, onClick: duplicate, children: [
+        busy === "duplicate" ? /* @__PURE__ */ jsx(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx(Copy, {}),
+        t("Duplicate")
+      ] })
+    ] }),
+    (template.html || typeof storage.remove === "function") && /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:gap-2", children: [
+      template.html && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm-compact", className: "eb:flex-1", onClick: copyHtml, children: [
+          /* @__PURE__ */ jsx(Copy, {}),
+          t("Copy HTML")
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm-compact", className: "eb:flex-1", onClick: () => download(template.name, template.html), children: [
+          /* @__PURE__ */ jsx(Download, {}),
+          t("Download")
+        ] })
+      ] }),
+      typeof storage.remove === "function" && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm-compact",
+          className: cn("eb:text-destructive", !template.html && "eb:ml-auto"),
+          disabled: !!busy,
+          onClick: remove,
+          "aria-label": t("Delete"),
+          title: t("Delete"),
+          children: [
+            busy === "delete" ? /* @__PURE__ */ jsx(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx(Trash2, {}),
+            !template.html && t("Delete")
+          ]
+        }
+      )
+    ] })
+  ] }) : null;
+  const previewPane = preview.html || preview.loading || preview.error ? /* @__PURE__ */ jsx(EmailPreview, { html: preview.html, loading: preview.loading, error: preview.error, device, onDeviceChange: setDevice }) : /* @__PURE__ */ jsx("div", { className: "eb:flex eb:h-full eb:min-h-40 eb:items-center eb:justify-center eb:rounded-lg2 eb:border eb:border-dashed eb:border-border eb:p-6 eb:text-center eb:text-[13px] eb:text-foreground-lighter", children: t("The template preview appears here.") });
+  const detailsColumn = /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:min-h-0 eb:min-w-0 eb:flex-col", "data-testid": "eb-library-details", children: [
+    layout === "narrow" && /* @__PURE__ */ jsx("div", { className: "eb:shrink-0 eb:border-b eb:border-border eb:px-2 eb:py-1.5", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm-compact", onClick: () => setDetailsOpen(false), children: [
+      /* @__PURE__ */ jsx(ArrowLeft, {}),
+      t("All templates")
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:min-h-0 eb:flex-1 eb:flex-col eb:gap-4 eb:overflow-y-auto eb:p-4", children: [
+      detailsBody,
+      layout !== "wide" && meta && /* @__PURE__ */ jsx("div", { className: "eb:h-[560px] eb:shrink-0", children: previewPane })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "eb:flex eb:shrink-0 eb:flex-col eb:gap-2 eb:border-t eb:border-border eb:p-3", children: actions })
+  ] }, "details");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("eb-root eb:relative eb:flex eb:h-full eb:min-h-0 eb:flex-col eb:bg-background eb:text-foreground", className),
+      "data-testid": "template-library",
+      "data-layout": layout,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "eb:flex eb:shrink-0 eb:items-center eb:gap-3 eb:border-b eb:border-border eb:px-5 eb:py-3.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-lg2 eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx(LayoutTemplate, { className: "eb:size-5" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "eb:min-w-0 eb:flex-1", children: [
+            /* @__PURE__ */ jsx("h2", { className: "eb:m-0 eb:truncate eb:text-base eb:font-normal eb:text-foreground", children: title ?? t("Email template library") }),
+            /* @__PURE__ */ jsx("p", { className: "eb:m-0 eb:truncate eb:text-[13px] eb:text-foreground-muted", children: description ?? t("Ready-made templates to copy into your campaigns.") })
+          ] }),
+          onClose && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx(X, {}) })
+        ] }),
+        layout === "narrow" ? /* @__PURE__ */ jsx("div", { className: "eb:grid eb:min-h-0 eb:flex-1 eb:grid-cols-[minmax(0,1fr)]", children: detailsOpen && selection ? detailsColumn : listColumn }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "eb:grid eb:min-h-0 eb:flex-1 eb:grid-rows-1 eb:divide-x eb:divide-border eb:overflow-hidden",
+              layout === "wide" ? "eb:grid-cols-[290px_minmax(0,1fr)_minmax(0,1fr)]" : "eb:grid-cols-[260px_minmax(0,1fr)]"
+            ),
+            children: [
+              listColumn,
+              detailsColumn,
+              layout === "wide" && /* @__PURE__ */ jsx("div", { className: "eb:min-h-0 eb:min-w-0 eb:p-3", "data-testid": "eb-library-preview", children: previewPane })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(NoticeArea, {})
+      ]
+    }
+  );
+}
+function TemplateLibrary({ locale = "en", messages, onNotify, ...props }) {
+  return /* @__PURE__ */ jsx(UiProvider, { locale, messages, onNotify, children: /* @__PURE__ */ jsx(Library, { ...props }) });
+}
+
+export {
+  TemplateLibrary
+};
+//# sourceMappingURL=chunk-NAEGU6PR.js.map