best-email-builder 0.3.0 → 0.4.0

package/dist/{chunk-ZSUHOCCE.js → chunk-AT73Y7JA.js}

@@ -1,14 +1,23 @@
 import {
+  DARK_PAGE,
   DEFAULT_ASSETS_PATH,
+  DEFAULT_BUTTON_URL,
   DEFAULT_VARIABLES,
   EMAIL_MOBILE_WIDTH,
+  FONT_STACK,
+  GROUPS,
   IMAGE_TYPES,
+  PALETTE,
+  cleanBrand,
   identity,
   imageUploadError,
+  inWhiteSection,
+  prop,
   readDocument,
+  simulateDarkMode,
   translatorFor,
   validateCustomVariable
-} from "./chunk-3M36VVXS.js";
+} from "./chunk-HHLOE6OZ.js";
 
 // src/ui/context.jsx
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -117,6 +126,40 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
     }
   ) });
 }
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "eb-scope eb:z-50 eb:max-h-(--radix-dropdown-menu-content-available-height) eb:min-w-[8rem] eb:origin-(--radix-dropdown-menu-content-transform-origin) eb:overflow-x-hidden eb:overflow-y-auto eb:rounded-lg2 eb:border eb:border-border eb:bg-popover eb:p-1 eb:text-popover-foreground eb:shadow-md",
+        FADE_ZOOM,
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      className: cn(
+        "eb:relative eb:flex eb:cursor-default eb:items-center eb:gap-2 eb:rounded-sm eb:px-2 eb:py-1.5 eb:text-[13px] eb:outline-hidden eb:select-none eb:focus:bg-accent eb:focus:text-accent-foreground eb:data-[disabled]:pointer-events-none eb:data-[disabled]:opacity-50 eb:[&_svg]:pointer-events-none eb:[&_svg]:shrink-0 eb:[&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function Select(props) {
   return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -409,7 +452,14 @@ function UiProvider({ locale = "en", messages, onNotify, children }) {
         return;
       }
       const id = nextId.current += 1;
-      setNotices((list) => [...list.slice(-3), { id, level, message }]);
+      setNotices((list) => {
+        const same = list.filter((n) => n.level === level && n.message === message);
+        for (const notice of same) {
+          clearTimeout(timers.current.get(notice.id));
+          timers.current.delete(notice.id);
+        }
+        return [...list.filter((n) => !same.includes(n)).slice(-3), { id, level, message }];
+      });
       timers.current.set(
         id,
         setTimeout(() => dismiss(id), NOTICE_TTL[level] || 4e3)
@@ -470,65 +520,6 @@ function UiProvider({ locale = "en", messages, onNotify, children }) {
   ] }) });
 }
 
-// src/blocks/shared.js
-var PALETTE = {
-  ink: "#2b3038",
-  inkSoft: "#41506b",
-  navy: "#212e5a",
-  brand: "#2977bc",
-  border: "#dfe6f0",
-  canvas: "#eceff4",
-  surface: "#ffffff",
-  white: "#ffffff"
-};
-var DEFAULT_BUTTON_URL = "https://example.com";
-var FONT_STACK = "Arial, Helvetica, sans-serif";
-var FONT_OPTIONS = [
-  { value: "Arial, Helvetica, sans-serif", label: "Arial" },
-  { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
-  { value: "Tahoma, Geneva, sans-serif", label: "Tahoma" },
-  { value: "'Trebuchet MS', Helvetica, sans-serif", label: "Trebuchet" },
-  { value: "Georgia, Times, serif", label: "Georgia" },
-  { value: "'Times New Roman', Times, serif", label: "Times" },
-  { value: "'Courier New', Courier, monospace", label: "Courier" }
-];
-var ALIGN_OPTIONS = [
-  { value: "left", label: "Left" },
-  { value: "center", label: "Center" },
-  { value: "right", label: "Right" }
-];
-var GROUPS = {
-  content: "Content",
-  link: "Link",
-  typography: "Typography",
-  colors: "Colors",
-  layout: "Layout",
-  spacing: "Spacing"
-};
-var prop = {
-  /** @returns {BlockProperty} */
-  fontFamily: () => ({ key: "font-family", label: "Font", type: "select", group: GROUPS.typography, options: FONT_OPTIONS }),
-  /** @returns {BlockProperty} */
-  fontSize: (min = 10, max = 48) => ({ key: "font-size", label: "Size", type: "size", group: GROUPS.typography, min, max, unit: "px" }),
-  /** @returns {BlockProperty} */
-  lineHeight: () => ({ key: "line-height", label: "Line height", type: "size", group: GROUPS.typography, min: 10, max: 80, unit: "px" }),
-  /** @returns {BlockProperty} */
-  color: (label = "Text") => ({ key: "color", label, type: "color", group: GROUPS.colors }),
-  /** @returns {BlockProperty} */
-  background: (key = "background-color", label = "Background") => ({ key, label, type: "color", group: GROUPS.colors }),
-  /** @returns {BlockProperty} */
-  align: (options = ALIGN_OPTIONS) => ({ key: "align", label: "Alignment", type: "align", group: GROUPS.layout, options }),
-  /** @returns {BlockProperty} */
-  padding: (key = "padding", label = "Padding") => ({ key, label, type: "spacing", group: GROUPS.spacing }),
-  /** @returns {BlockProperty} */
-  href: (label = "Link URL") => ({ key: "href", label, type: "url", group: GROUPS.link, placeholder: "https://" }),
-  /** @returns {BlockProperty} */
-  radius: (max = 40) => ({ key: "border-radius", label: "Corner radius", type: "size", group: GROUPS.layout, min: 0, max, unit: "px" })
-};
-function inWhiteSection(inner) {
-  return `<mj-section background-color="${PALETTE.surface}" padding-top="0px" padding-bottom="0px"><mj-column>${inner}</mj-column></mj-section>`;
-}
-
 // src/features/templates/starter.js
 function escapeXml(text) {
   return String(text ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
@@ -834,7 +825,7 @@ function withDocument(template) {
   if (!template || !template.document) return template;
   return { ...template, document: readDocument(template.document) };
 }
-function createHttpStorage({ baseUrl = "/api/email-builder", headers = {}, fetch: fetchImpl } = {}) {
+function createHttpStorage({ baseUrl = "/api/email-builder", headers = {}, fetch: fetchImpl, generate = false, brand = false } = {}) {
   const root = baseUrl.replace(/\/+$/, "");
   const doFetch = fetchImpl || ((input, init) => fetch(input, init));
   const extraHeaders = () => typeof headers === "function" ? headers() : headers;
@@ -873,6 +864,18 @@ function createHttpStorage({ baseUrl = "/api/email-builder", headers = {}, fetch
     deleteVariable: async (key) => {
       await call(`/variables/${encodeURIComponent(key)}`, { method: "DELETE" });
     },
+    ...generate ? {
+      generate: async (input, { signal } = {}) => call("/generate", { method: "POST", body: JSON.stringify(input), signal }),
+      rewrite: async (input, { signal } = {}) => call("/rewrite", { method: "POST", body: JSON.stringify(input), signal }),
+      suggestSubjects: async (input, { signal } = {}) => call("/subjects", { method: "POST", body: JSON.stringify(input), signal })
+    } : {},
+    ...brand ? {
+      loadBrand: async () => call("/brand"),
+      saveBrand: async (value) => call("/brand", { method: "PUT", body: JSON.stringify(value) }),
+      ...brand === true || brand.import !== false ? {
+        importBrand: async (url, { signal } = {}) => call("/brand/import", { method: "POST", body: JSON.stringify({ url }), signal })
+      } : {}
+    } : {},
     async uploadImage(file) {
       assertUploadable(file);
       const form = new FormData();
@@ -883,11 +886,22 @@ function createHttpStorage({ baseUrl = "/api/email-builder", headers = {}, fetch
     }
   };
 }
-function createMemoryStorage({ render, sendTest, assetsPath = DEFAULT_ASSETS_PATH, systemVariables = DEFAULT_VARIABLES } = {}) {
+function createMemoryStorage({
+  render,
+  sendTest,
+  generate,
+  rewrite,
+  suggestSubjects,
+  importBrand,
+  brand = null,
+  assetsPath = DEFAULT_ASSETS_PATH,
+  systemVariables = DEFAULT_VARIABLES
+} = {}) {
   const rows = /* @__PURE__ */ new Map();
   const versions = /* @__PURE__ */ new Map();
   const images = /* @__PURE__ */ new Map();
   const customVariables = /* @__PURE__ */ new Map();
+  let savedBrand = cleanBrand(brand);
   let nextId = 1;
   let tick = Date.parse("2026-01-01T00:00:00.000Z");
   const now = () => new Date(tick += 1e3).toISOString();
@@ -1025,13 +1039,25 @@ function createMemoryStorage({ render, sendTest, assetsPath = DEFAULT_ASSETS_PAT
     async deleteVariable(key) {
       if (!customVariables.delete(String(key))) throw new StorageError("Variable not found", 404, "NOT_FOUND");
     },
+    async loadBrand() {
+      return { ...savedBrand };
+    },
+    async saveBrand(value) {
+      savedBrand = cleanBrand(value);
+      return { ...savedBrand };
+    },
+    ...importBrand ? { importBrand } : {},
     ...render ? { render } : {},
     ...sendTest ? { sendTest } : {},
+    ...generate ? { generate } : {},
+    ...rewrite ? { rewrite } : {},
+    ...suggestSubjects ? { suggestSubjects } : {},
     dump: () => ({
       rows: [...rows.values()],
       versions: Object.fromEntries(versions),
       images: [...images.keys()],
-      variables: [...customVariables.values()]
+      variables: [...customVariables.values()],
+      brand: savedBrand
     })
   };
   return storage;
@@ -1088,7 +1114,7 @@ function Label({ className, ...props }) {
 
 // src/features/preview/PreviewButton.jsx
 import { useMemo as useMemo2, useState as useState2 } from "react";
-import { AlertTriangle, CheckCircle2 as CheckCircle22, Eye, Info as Info2, Loader2, Monitor, RefreshCw, Smartphone } from "lucide-react";
+import { AlertTriangle, CheckCircle2 as CheckCircle22, Eye, Info as Info2, Loader2, Monitor, Moon, RefreshCw, Smartphone, Sun } from "lucide-react";
 
 // src/core/scrollbars.js
 var FRAME_SCROLLBAR_CSS = `
@@ -1145,9 +1171,11 @@ var withPreviewScrollbars = (html) => !html ? "" : /<\/head>/i.test(html) ? html
 function EmailPreview({ html, loading = false, error = null, device = "desktop", onDeviceChange, onRefresh, hint = true }) {
   const { t } = useUi();
   const isMobile = device === "mobile";
-  const srcDoc = useMemo2(() => withPreviewScrollbars(html), [html]);
+  const [scheme, setScheme] = useState2("light");
+  const dark = scheme === "dark";
+  const srcDoc = useMemo2(() => withPreviewScrollbars(dark ? simulateDarkMode(html) : html), [html, dark]);
   return /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:h-full eb:min-h-0 eb:flex-col", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "eb:mb-2 eb:flex eb:shrink-0 eb:items-center eb:justify-between eb:gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "eb:mb-2 eb:flex eb:shrink-0 eb:flex-wrap eb:items-center eb:gap-2", children: [
       /* @__PURE__ */ jsx6(Tabs, { value: device, onValueChange: (value) => onDeviceChange?.(value), children: /* @__PURE__ */ jsxs4(TabsList, { "aria-label": t("Device"), children: [
         /* @__PURE__ */ jsxs4(TabsTrigger, { value: "desktop", children: [
           /* @__PURE__ */ jsx6(Monitor, {}),
@@ -1158,36 +1186,42 @@ function EmailPreview({ html, loading = false, error = null, device = "desktop",
           t("Mobile")
         ] })
       ] }) }),
+      /* @__PURE__ */ jsx6(Tabs, { value: scheme, onValueChange: setScheme, children: /* @__PURE__ */ jsxs4(TabsList, { "aria-label": t("Color scheme"), children: [
+        /* @__PURE__ */ jsx6(TabsTrigger, { value: "light", "aria-label": t("Light mode"), title: t("Light mode"), children: /* @__PURE__ */ jsx6(Sun, {}) }),
+        /* @__PURE__ */ jsx6(TabsTrigger, { value: "dark", "aria-label": t("Dark mode"), title: t("Dark mode"), children: /* @__PURE__ */ jsx6(Moon, {}) })
+      ] }) }),
+      /* @__PURE__ */ jsx6("span", { className: "eb:flex-1" }),
       onRefresh && /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm-compact", onClick: onRefresh, disabled: loading, children: [
         loading ? /* @__PURE__ */ jsx6(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx6(RefreshCw, {}),
         t("Refresh")
       ] })
     ] }),
     /* @__PURE__ */ jsx6("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-auto eb:rounded-lg2 eb:border eb:border-border eb:bg-surface-75 eb:p-3", children: error ? /* @__PURE__ */ jsx6("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-destructive", children: error }) : !srcDoc ? /* @__PURE__ */ jsx6("div", { className: "eb:flex eb:h-full eb:items-center eb:justify-center eb:p-6 eb:text-center eb:text-[13px] eb:text-foreground-lighter", children: loading ? t("Rendering\u2026") : t("Nothing to show yet.") }) : (
-      // Narrows and widens like the editor's canvas (GrapesJS: width .35s ease).
+      // Narrows and widens like the editor's canvas (width .35s ease).
       /* @__PURE__ */ jsx6(
         "div",
         {
           className: cn(
-            "eb:mx-auto eb:max-w-full eb:bg-white eb:transition-[width,box-shadow] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
+            "eb:mx-auto eb:max-w-full eb:transition-[width,box-shadow] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
             isMobile && "eb:shadow-sm"
           ),
-          style: { width: isMobile ? EMAIL_MOBILE_WIDTH : "100%" },
+          style: { width: isMobile ? EMAIL_MOBILE_WIDTH : "100%", background: dark ? DARK_PAGE : "#ffffff" },
           "data-device": device,
+          "data-scheme": scheme,
           children: /* @__PURE__ */ jsx6(
             "iframe",
             {
               sandbox: "",
               srcDoc,
               title: t("Email preview"),
-              className: "eb:block eb:w-full eb:border-0 eb:bg-white eb:transition-[height] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
-              style: { height: isMobile ? 760 : 900 }
+              className: "eb:block eb:w-full eb:border-0 eb:transition-[height] eb:duration-[350ms] eb:ease-in-out eb:motion-reduce:transition-none",
+              style: { height: isMobile ? 760 : 900, background: dark ? DARK_PAGE : "#ffffff" }
             }
           )
         }
       )
     ) }),
-    hint && /* @__PURE__ */ jsx6("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", children: t("Indicative preview \u2014 check it with \u201CSend test\u201D.") })
+    dark ? /* @__PURE__ */ jsx6("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", "data-testid": "eb-dark-hint", children: t("Dark mode as Gmail and Outlook apps show it: light backgrounds turn dark, dark text turns light, images stay as they are.") }) : hint && /* @__PURE__ */ jsx6("p", { className: "eb:mt-2 eb:shrink-0 eb:text-[11px] eb:leading-relaxed eb:text-foreground-lighter", children: t("Indicative preview \u2014 check it with \u201CSend test\u201D.") })
   ] });
 }
 function PreviewButton({ context }) {
@@ -1270,8 +1304,50 @@ function PreviewButton({ context }) {
   ] });
 }
 
+// src/features/brand/useBrand.js
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
+var entries = /* @__PURE__ */ new WeakMap();
+function brandOf(storage) {
+  let entry = entries.get(storage);
+  if (entry) return entry;
+  const created = { value: {}, loaded: Promise.resolve({}), listeners: /* @__PURE__ */ new Set() };
+  created.loaded = typeof storage?.loadBrand === "function" ? Promise.resolve().then(() => storage.loadBrand()).then(
+    (brand) => cleanBrand(brand),
+    () => (
+      /** @type {Brand} */
+      {}
+    )
+  ).then((brand) => {
+    created.value = brand;
+    created.listeners.forEach((listener) => listener(brand));
+    return brand;
+  }) : created.loaded;
+  if (storage && typeof storage === "object") entries.set(storage, created);
+  return created;
+}
+function useBrand(storage) {
+  const [brand, setState] = useState3(() => brandOf(storage).value);
+  useEffect2(() => {
+    const entry = brandOf(storage);
+    setState(entry.value);
+    entry.listeners.add(setState);
+    return () => {
+      entry.listeners.delete(setState);
+    };
+  }, [storage]);
+  const setBrand = useCallback2(
+    (value) => {
+      const entry = brandOf(storage);
+      entry.value = cleanBrand(value);
+      entry.listeners.forEach((listener) => listener(entry.value));
+    },
+    [storage]
+  );
+  return { brand, setBrand };
+}
+
 // src/ui/useLayoutWidth.js
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 var LAYOUT_BREAKPOINTS = { wide: 1180, medium: 760 };
 function layoutFor(width) {
   if (width >= LAYOUT_BREAKPOINTS.wide) return "wide";
@@ -1279,11 +1355,11 @@ function layoutFor(width) {
   return "narrow";
 }
 function useLayoutWidth(ref) {
-  const [layout, setLayout] = useState3(
+  const [layout, setLayout] = useState4(
     /** @type {'wide'|'medium'|'narrow'} */
     "wide"
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return void 0;
     const measure = () => setLayout(layoutFor(el.getBoundingClientRect().width));
@@ -1296,12 +1372,6 @@ function useLayoutWidth(ref) {
 }
 
 export {
-  PALETTE,
-  DEFAULT_BUTTON_URL,
-  FONT_STACK,
-  GROUPS,
-  prop,
-  inWhiteSection,
   socialBlock,
   socialElementBlock,
   cn,
@@ -1326,6 +1396,10 @@ export {
   Popover,
   PopoverTrigger,
   PopoverContent,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
   Select,
   SelectValue,
   SelectTrigger,
@@ -1343,9 +1417,11 @@ export {
   buildGallery,
   withThumbnailImages,
   withPlaceholderImages,
+  brandOf,
+  useBrand,
   StorageError,
   createHttpStorage,
   createMemoryStorage,
   useLayoutWidth
 };
-//# sourceMappingURL=chunk-ZSUHOCCE.js.map
+//# sourceMappingURL=chunk-AT73Y7JA.js.map