best-email-builder 0.2.0 → 0.4.0

package/dist/types/features/generate/subjects.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The words of an email, as a reader sees them: the head, the styles and the
+ * markup left out.
+ * @param {string} mjml
+ */
+export function emailWords(mjml: string): string;
+/**
+ * The request as the model sees it, or an error when there is nothing to
+ * draw subjects from.
+ * @param {SubjectsInput} input
+ */
+export function cleanSubjectsInput(input: SubjectsInput): {
+    subject: string;
+    preheader: string;
+    text: string;
+    language: string;
+    variables: {
+        key: string;
+        label: string;
+    }[];
+    avoid: string[];
+};
+/** @param {ReturnType<typeof cleanSubjectsInput>} request */
+export function buildSubjectsPrompt({ subject, preheader, text, language, variables, avoid }: ReturnType<typeof cleanSubjectsInput>): string;
+/** The subjects in a model's answer: the JSON field, else one per line. @param {string} answer */
+export function parseSubjects(answer: string): any;
+/**
+ * The usable subjects, and what is wrong with the others (for the model).
+ * @param {string[]} subjects @param {ReturnType<typeof cleanSubjectsInput>} request
+ */
+export function reviewSubjects(subjects: string[], request: ReturnType<typeof cleanSubjectsInput>): {
+    usable: string[];
+    problems: string[];
+};
+/**
+ * @param {{model: import('./generator.js').EmailModel, maxAttempts?: number}} options
+ * @returns {(input: SubjectsInput, options?: {signal?: AbortSignal}) => Promise<{subjects: string[], attempts: number}>}
+ */
+export function createSubjectSuggester({ model, maxAttempts }: {
+    model: import("./generator.js").EmailModel;
+    maxAttempts?: number;
+}): (input: SubjectsInput, options?: {
+    signal?: AbortSignal;
+}) => Promise<{
+    subjects: string[];
+    attempts: number;
+}>;
+export const SUBJECT_COUNT: 3;
+export const MAX_SUBJECT_LENGTH: 150;
+export const MAX_EMAIL_WORDS: 4000;
+export namespace SUBJECTS_SCHEMA {
+    let type: string;
+    namespace properties {
+        namespace subjects {
+            let type_1: string;
+            export { type_1 as type };
+            export let description: string;
+            export namespace items {
+                let type_2: string;
+                export { type_2 as type };
+            }
+        }
+    }
+    let required: string[];
+    let additionalProperties: boolean;
+}
+export const SUBJECTS_SYSTEM_PROMPT: "You write email subject lines. You get an email (its current subject, its preview text and its words) and answer three NEW subject lines for it, in the JSON field \"subjects\".\n\nEach subject:\n- tells what the email brings, specific to its content: under 50 characters when possible, 70 at most;\n- takes its own angle: one clear and direct, one that makes the reader curious, one personal or timely;\n- is written in the language of the email;\n- invents no facts: no price, discount, date, number, name or promise the email does not contain;\n- is plain text: no HTML, no quotation marks around it, no line break;\n- has no word in capitals, at most one \"!\", no spam wording (\"free!!!\", \"act now\", \"100% guaranteed\");\n- has no emoji, unless the current subject has one;\n- differs from the current subject and from the two others, and does not repeat the preview text.\n\nMerge tags: you may personalise ONE of the three with a merge tag from the list you are given, written exactly as listed, e.g. {{contact.firstname}}. No other merge tag.";
+/**
+ * `text`: the words of the email (`emailWords`); `language`: the one of the
+ * interface, used when the email has no words yet; `avoid`: ideas already
+ * shown ("More ideas" asks for new ones).
+ */
+export type SubjectsInput = {
+    subject?: string;
+    preheader?: string;
+    text?: string;
+    language?: string;
+    variables?: {
+        key: string;
+        label?: string;
+    }[];
+    avoid?: string[];
+};

package/dist/types/features/preview/PreviewButton.d.ts

@@ -2,7 +2,7 @@ export function QualityList({ quality, warnings }: {
     quality?: never[] | undefined;
     warnings?: never[] | undefined;
 }): import("react").JSX.Element;
-/** Sandboxed preview frame, desktop or mobile width. */
+/** Sandboxed preview frame, desktop or mobile width, light or dark. */
 export function EmailPreview({ html, loading, error, device, onDeviceChange, onRefresh, hint }: {
     html: any;
     loading?: boolean | undefined;

package/dist/types/features/preview/darkMode.d.ts

@@ -0,0 +1,48 @@
+/** @typedef {{r: number, g: number, b: number, a: number}} Rgba  channels 0–255, alpha 0–1 */
+/** @param {string} token @returns {Rgba|null} */
+export function parseCssColor(token: string): Rgba | null;
+/** WCAG relative luminance, 0 (black) to 1 (white). @param {Rgba} color */
+export function luminance({ r, g, b }: Rgba): number;
+/**
+ * One color in dark mode. `surface`: a background or a border; otherwise a
+ * text color. Unknown values (`transparent`, `inherit`…) come back as given.
+ * @param {string} token @param {'surface'|'text'} role
+ */
+export function darkColor(token: string, role: "surface" | "text"): string;
+/** The colors of a CSS text (a sheet, or a `style` attribute) in dark mode. @param {string} css */
+export function darkCss(css: string): string;
+/**
+ * A compiled email as a dark-mode app would show it.
+ * @param {string} html
+ */
+export function simulateDarkMode(html: string): string;
+/**
+ * DARK MODE, simulated — an email as the mail apps that repaint it in dark
+ * mode show it (Gmail and Outlook apps, Outlook.com): light backgrounds
+ * turned dark, dark text turned light, everything else left as it is.
+ *
+ *   surfaces   background and border colors (`background`, `bgcolor`,
+ *              `border-color`…): a LIGHT one becomes dark, same hue; a dark
+ *              or saturated one (a brand button) stays.
+ *   text       `color`: a DARK one becomes light, same hue; a light one
+ *              (white on a button) stays.
+ *   images     untouched: a dark logo on a transparent background disappears
+ *              here as it does in those apps — what the preview is for.
+ *
+ * Works on the compiled HTML as a string: the colors of `style` attributes,
+ * of `<style>` sheets and of `bgcolor`. No script, no DOM: the preview frame
+ * stays sandboxed.
+ *
+ * Dependency-free: runs in the browser, on the server and in unit tests.
+ */
+/** The page behind the email, and its default text, in dark apps. */
+export const DARK_PAGE: "#121212";
+/**
+ * channels 0–255, alpha 0–1
+ */
+export type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};

package/dist/types/features/templates/gallery.d.ts

@@ -22,6 +22,13 @@ export function buildGallery({ templates, sender, t }?: {
  * @param {string} mjml
  */
 export function withThumbnailImages(mjml: string): string;
+/**
+ * Compiled HTML for a thumbnail or a preview: an image not chosen yet (an
+ * `<img>` with no `src`) gets the same grey frame. For HTML that went through
+ * the server's validator, which rightly refuses `data:` images in MJML.
+ * @param {string} html
+ */
+export function withPlaceholderImages(html: string): string;
 /** @type {GalleryTemplate[]} */
 export const TEMPLATE_GALLERY: GalleryTemplate[];
 export type StarterSender = import("./starter.js").StarterSender;

package/dist/types/index.d.ts

@@ -1,26 +1,30 @@
-/**
- * An editor wired to the default engine and the built-in registries.
- *
- * @param {{locale?: string}} [options]  `locale`: engine UI locale (`'en'` by default)
- */
-export function createDefaultEmailEditor(options?: {
-    locale?: string;
-}): import("./core/EmailEditor.js").EmailEditor;
 export { createEmailEditor } from "./core/EmailEditor.js";
 export { emailBlocks } from "./blocks/index.js";
+export { createDefaultEmailEditor } from "./defaultEditor.js";
 export { default as EmailBuilder } from "./ui/EmailBuilder.jsx";
+export { default as TemplateLibrary } from "./ui/library/TemplateLibrary.jsx";
+export { default as EmailStudio } from "./ui/EmailStudio.jsx";
 export { default as EmailBuilderBoundary } from "./ui/EmailBuilderBoundary.jsx";
 export { default as EmailCanvas } from "./ui/EmailCanvas.jsx";
-export { createGrapesJsAdapter } from "./adapters/grapesjs/GrapesJsAdapter.js";
 export { createRegistry } from "./core/registry.js";
+export { createEmailGenerator } from "./features/generate/generator.js";
+export { EmailGenerationError } from "./features/generate/draft.js";
+export { emailWords } from "./features/generate/subjects.js";
+export { simulateDarkMode } from "./features/preview/darkMode.js";
 export { emailBuilderFeatures, isFeatureEnabled } from "./features/index.js";
 export { UiProvider, useUi, useT } from "./ui/context.jsx";
 export { createHttpStorage, createMemoryStorage, StorageError } from "./storage/client.js";
+export { createNativeAdapter, ENGINE_NAME, EMPTY_MJML } from "./engine/NativeAdapter.js";
+export { parseMjml, parseMjmlFragment, serializeMjml } from "./engine/mjml.js";
 export { readDocument, createDocument, serializeDocument, EmailDocumentError } from "./core/document.js";
 export { EMAIL_BUILDER_VERSION, EMAIL_DOCUMENT_SCHEMA_VERSION, EMAIL_DEVICES } from "./core/constants.js";
 export { DEFAULT_VARIABLES, CUSTOM_GROUP, defineVariables, mergeVariables, keyFromLabel, validateCustomVariable, tokenOf } from "./features/variables/catalog.js";
 export { applyVariables, applyVariablesToText, usedVariables, unknownVariables } from "./features/variables/service.js";
 export { createStarterMjml, STARTER_MJML } from "./features/templates/starter.js";
-export { TEMPLATE_GALLERY, buildGallery } from "./features/templates/gallery.js";
+export { TEMPLATE_GALLERY, buildGallery, withPlaceholderImages } from "./features/templates/gallery.js";
 export { isAssetPath, absoluteAssetUrls, DEFAULT_ASSETS_PATH } from "./renderer/links.js";
+export { claudeEmailModel, DEFAULT_CLAUDE_MODEL } from "./features/generate/claude.js";
+export { EMAIL_PURPOSES, PURPOSE_CATEGORIES } from "./features/generate/purposes.js";
+export { REWRITE_ACTIONS, REWRITE_LANGUAGES } from "./features/generate/rewrite.js";
+export { applyBrand, cleanBrand, brandedSender } from "./features/brand/brand.js";
 export { createTranslator, translatorFor, LOCALES } from "./i18n/index.js";

package/dist/types/library.d.ts

@@ -0,0 +1,5 @@
+export { default as TemplateLibrary } from "./ui/library/TemplateLibrary.jsx";
+export { EMAIL_BUILDER_VERSION } from "./core/constants.js";
+export { createHttpStorage, createMemoryStorage, StorageError } from "./storage/client.js";
+export { TEMPLATE_GALLERY, buildGallery, withPlaceholderImages } from "./features/templates/gallery.js";
+export { createTranslator, translatorFor, LOCALES } from "./i18n/index.js";

package/dist/types/server/brand.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @typedef {import('../features/brand/brand.js').Brand} Brand
+ *
+ * @typedef {{
+ *   get: () => Promise<Brand|null>,
+ *   save: (brand: Brand & {updatedBy: string|null}) => Promise<void>,
+ * }} BrandRepository
+ */
+/**
+ * @param {{repository?: BrandRepository|null, t?: import('../i18n/index.js').Translate}} options
+ */
+export function createBrandService({ repository, t }: {
+    repository?: BrandRepository | null;
+    t?: import("../i18n/index.js").Translate;
+}): {
+    /** The brand, `{}` when none was set (or no repository). */
+    get(): Promise<import("../features/brand/brand.js").Brand>;
+    /** @param {unknown} input @param {{id?: string|number, name?: string}|null} [user] */
+    save(input: unknown, user?: {
+        id?: string | number;
+        name?: string;
+    } | null): Promise<import("../features/brand/brand.js").Brand>;
+};
+/** @returns {BrandRepository} */
+export function createMemoryBrandRepository(): BrandRepository;
+export type Brand = import("../features/brand/brand.js").Brand;
+export type BrandRepository = {
+    get: () => Promise<Brand | null>;
+    save: (brand: Brand & {
+        updatedBy: string | null;
+    }) => Promise<void>;
+};

package/dist/types/server/brandImport.d.ts

@@ -0,0 +1,93 @@
+/**
+ * May the server connect to this IP address? Public unicast only.
+ * @param {string} address
+ */
+export function isPublicAddress(address: string): boolean;
+/**
+ * What the user typed, as the address of a home page: "acme.com" →
+ * "https://acme.com/".
+ * @param {unknown} input
+ */
+export function siteUrl(input: unknown): string;
+/**
+ * GET one address and its redirects, under the rules above.
+ * @param {string} address
+ * @param {{
+ *   allow: (address: string) => boolean,
+ *   allowPort?: (port: number) => boolean,
+ *   signal: AbortSignal,
+ *   maxBytes: number,
+ *   truncate?: boolean,
+ *   accept?: string,
+ *   redirects?: number,
+ * }} options
+ *   `truncate`: past `maxBytes`, keep what came (a page's head, the start of
+ *   a stylesheet) instead of failing.
+ * @returns {Promise<{bytes: Buffer, url: string, contentType: string}>}
+ */
+export function safeGet(address: string, { allow, allowPort, signal, maxBytes, truncate, accept, redirects }: {
+    allow: (address: string) => boolean;
+    allowPort?: (port: number) => boolean;
+    signal: AbortSignal;
+    maxBytes: number;
+    truncate?: boolean;
+    accept?: string;
+    redirects?: number;
+}): Promise<{
+    bytes: Buffer;
+    url: string;
+    contentType: string;
+}>;
+/**
+ * @param {{
+ *   timeoutMs?: number,
+ *   allowAddress?: (address: string) => boolean,
+ *   allowPort?: (port: number) => boolean,
+ * }} [options]
+ *   `allowAddress`, `allowPort`: which IP addresses and ports may be reached
+ *   (default: public addresses, ports 80 and 443). Tests reading a local
+ *   server loosen them; nothing else should.
+ */
+export function createBrandImporter({ timeoutMs, allowAddress, allowPort, }?: {
+    timeoutMs?: number;
+    allowAddress?: (address: string) => boolean;
+    allowPort?: (port: number) => boolean;
+}): {
+    import: (input: unknown, { signal }?: {
+        signal?: AbortSignal;
+    }) => Promise<BrandImport>;
+};
+export namespace BRAND_IMPORT_LIMITS {
+    export let pageBytes: number;
+    export let cssBytes: number;
+    export { MAX_IMAGE_BYTES as logoBytes };
+    export let stylesheets: number;
+    export let logos: number;
+    export let redirects: number;
+    export let timeoutMs: number;
+}
+/** Why an import failed; the handler turns `code` into a message. */
+export class BrandImportError extends Error {
+    /** @param {BrandImportCode} code @param {string} [detail] */
+    constructor(code: BrandImportCode, detail?: string);
+    code: BrandImportCode;
+}
+export type BrandImportCode = "BAD_URL" | "PRIVATE_ADDRESS" | "UNREACHABLE" | "TIMEOUT" | "HTTP_ERROR" | "NOT_HTML" | "TOO_MANY_REDIRECTS" | "TOO_LARGE";
+/**
+ * `LOGO_UNSUPPORTED`: the site's logo is an SVG or a WebP, which most email
+ * apps do not show; `LOGO_ICON`: the site's icon was used instead.
+ */
+export type BrandNote = "LOGO_NOT_FOUND" | "LOGO_UNSUPPORTED" | "LOGO_ICON" | "COLORS_NOT_FOUND";
+export type BrandImport = {
+    brand: import("../features/brand/brand.js").Brand;
+    logo: {
+        bytes: Uint8Array;
+        width: number;
+        height: number;
+        type: string;
+        ext: string;
+        shownWidth: number;
+    } | null;
+    notes: BrandNote[];
+};
+import { MAX_IMAGE_BYTES } from '../validation/images.js';

package/dist/types/server/compileMjml.d.ts

@@ -1,3 +1,5 @@
+/** @param {string} html */
+export function withClientMetas(html: string): string;
 /** @typedef {{line?: number, message: string, tagName?: string}} CompileWarning */
 /**
  * @param {string} mjml

package/dist/types/server/handler.d.ts

@@ -23,8 +23,29 @@ export type HandlerOptions = {
     assetsPath?: string;
     publicUrl?: string | null;
     transport?: import("./sendTest.js").EmailTransport | null;
+    generator?: {
+        generate: (input: import("../features/generate/generator.js").GenerateInput, options?: {
+            signal?: AbortSignal;
+        }) => Promise<import("../features/generate/generator.js").GeneratedEmail>;
+        rewrite?: (input: import("../features/generate/rewrite.js").RewriteInput, options?: {
+            signal?: AbortSignal;
+        }) => Promise<{
+            text: string;
+        }>;
+        suggestSubjects?: (input: import("../features/generate/subjects.js").SubjectsInput, options?: {
+            signal?: AbortSignal;
+        }) => Promise<{
+            subjects: string[];
+        }>;
+    } | null;
     variables?: import("../features/variables/catalog.js").EmailVariable[];
     variableStore?: import("./variables.js").VariableRepository | null;
+    brandStore?: import("./brand.js").BrandRepository | null;
+    brandImporter?: {
+        import: (url: string, options?: {
+            signal?: AbortSignal;
+        }) => Promise<import("./brandImport.js").BrandImport>;
+    } | null;
     locale?: string;
     messages?: Record<string, string>;
     lang?: string;
@@ -34,6 +55,10 @@ export type HandlerOptions = {
     rateLimits?: {
         testPerHour?: number;
         uploadsPerHour?: number;
+        generatePerHour?: number;
+        rewritePerHour?: number;
+        subjectsPerHour?: number;
+        brandImportsPerHour?: number;
     };
     onError?: (error: unknown, request: Request) => void;
 };

package/dist/types/server/index.d.ts

@@ -2,12 +2,23 @@ export { createEmailBuilderHandler } from "./handler.js";
 export { toNodeListener } from "./node.js";
 export { HttpError } from "./errors.js";
 export { compileMjml } from "./compileMjml.js";
+export { simulateDarkMode } from "../features/preview/darkMode.js";
 export { prepareMjml } from "../renderer/prepareMjml.js";
 export { createTemplateService, createMemoryTemplateRepository, MAX_ACTIVE_VERSIONS, LIMITS } from "./templates.js";
 export { createAssetService, createMemoryAssetRepository, inspectAsset } from "./assets.js";
 export { compileTemplate, personalize, renderEmail, htmlToText } from "./render.js";
 export { sendTestEmail, MAX_TEST_RECIPIENTS } from "./sendTest.js";
+export { createEmailGenerator, cleanGenerateInput, MAX_DETAILS_LENGTH } from "../features/generate/generator.js";
+export { claudeEmailModel, DEFAULT_CLAUDE_MODEL } from "../features/generate/claude.js";
+export { EmailGenerationError, GENERATION_ERRORS, normalizeGeneratedMjml, parseDraft, reviewDraft } from "../features/generate/draft.js";
+export { EMAIL_PURPOSES, PURPOSE_CATEGORIES, purposeById, purposesByCategory } from "../features/generate/purposes.js";
+export { SYSTEM_PROMPT, EMAIL_DRAFT_SCHEMA, buildUserPrompt } from "../features/generate/prompt.js";
+export { REWRITE_ACTIONS, REWRITE_LANGUAGES, REWRITE_SYSTEM_PROMPT, createRewriter, reviewRewrite } from "../features/generate/rewrite.js";
+export { SUBJECTS_SYSTEM_PROMPT, createSubjectSuggester, emailWords, reviewSubjects } from "../features/generate/subjects.js";
 export { createVariableService, createMemoryVariableRepository } from "./variables.js";
+export { createBrandService, createMemoryBrandRepository } from "./brand.js";
+export { createBrandImporter, isPublicAddress, BrandImportError, BRAND_IMPORT_LIMITS } from "./brandImport.js";
+export { applyBrand, cleanBrand } from "../features/brand/brand.js";
 export { DEFAULT_VARIABLES, defineVariables, mergeVariables, tokenOf, keyFromLabel, validateCustomVariable } from "../features/variables/catalog.js";
 export { applyVariables, applyVariablesToText, mapVariables, sampleValues, usedVariables, unknownVariables } from "../features/variables/service.js";
 export { applyServiceLinks, absoluteAssetUrls, isAssetPath, DEFAULT_ASSETS_PATH } from "../renderer/links.js";

package/dist/types/storage/client.d.ts

@@ -1,34 +1,61 @@
 /**
  * Client for the routes of `createEmailBuilderHandler` (`best-email-builder/server`).
  *
+ * `generate: true` turns on "Generate", the AI rewriting of a text and the
+ * subject ideas: the server must have a `generator` (otherwise it answers 501). Off by default,
+ * as the buttons would only fail.
+ *
+ * `brand: true` turns on the Brand button: the server must have a
+ * `brandStore`, and a `brandImporter` to read a brand from a website
+ * (`brand: {import: false}` when it has none).
+ *
  * @param {{
  *   baseUrl?: string,
  *   headers?: Record<string, string> | (() => Record<string, string>),
  *   fetch?: typeof fetch,
+ *   generate?: boolean,
+ *   brand?: boolean|{import?: boolean},
  * }} [options]
  * @returns {TemplateStorage}
  */
-export function createHttpStorage({ baseUrl, headers, fetch: fetchImpl }?: {
+export function createHttpStorage({ baseUrl, headers, fetch: fetchImpl, generate, brand }?: {
     baseUrl?: string;
     headers?: Record<string, string> | (() => Record<string, string>);
     fetch?: typeof fetch;
+    generate?: boolean;
+    brand?: boolean | {
+        import?: boolean;
+    };
 }): TemplateStorage;
 /**
  * In-memory storage, same contract. Documents are kept SERIALIZED.
  * `render` and `sendTest` cannot run in a browser (MJML compiles on the
- * server): pass implementations to enable the preview and test buttons.
+ * server): pass implementations to enable the preview and test buttons;
+ * `generate`, `rewrite` and `suggestSubjects` likewise for the AI, `importBrand` for reading a
+ * brand from a website. The brand itself is kept in memory (`brand`: the
+ * one to start with).
  *
  * @param {{
  *   render?: TemplateStorage['render'],
  *   sendTest?: TemplateStorage['sendTest'],
+ *   generate?: TemplateStorage['generate'],
+ *   rewrite?: TemplateStorage['rewrite'],
+ *   suggestSubjects?: TemplateStorage['suggestSubjects'],
+ *   importBrand?: TemplateStorage['importBrand'],
+ *   brand?: Brand|null,
  *   assetsPath?: string,
  *   systemVariables?: EmailVariable[],
  * }} [options]  `systemVariables`: keys a custom variable may not take
  * @returns {TemplateStorage & {dump: () => object}}
  */
-export function createMemoryStorage({ render, sendTest, assetsPath, systemVariables }?: {
+export function createMemoryStorage({ render, sendTest, generate, rewrite, suggestSubjects, importBrand, brand, assetsPath, systemVariables, }?: {
     render?: TemplateStorage["render"];
     sendTest?: TemplateStorage["sendTest"];
+    generate?: TemplateStorage["generate"];
+    rewrite?: TemplateStorage["rewrite"];
+    suggestSubjects?: TemplateStorage["suggestSubjects"];
+    importBrand?: TemplateStorage["importBrand"];
+    brand?: Brand | null;
     assetsPath?: string;
     systemVariables?: EmailVariable[];
 }): TemplateStorage & {
@@ -74,11 +101,21 @@ export function createMemoryStorage({ render, sendTest, assetsPath, systemVariab
  *
  * @typedef {{mjml: string, subject?: string|null, preheader?: string|null}} RenderInput
  * @typedef {{html: string, warnings: {message: string}[], quality: {code: string, level: string, message: string}[]}} RenderResult
+ * @typedef {import('../features/generate/generator.js').GenerateInput} GenerateInput
+ * @typedef {import('../features/generate/generator.js').GeneratedEmail} GeneratedEmail
+ * @typedef {import('../features/generate/rewrite.js').RewriteInput} RewriteInput
+ * @typedef {import('../features/generate/subjects.js').SubjectsInput} SubjectsInput
+ * @typedef {import('../features/brand/brand.js').Brand} Brand
+ * @typedef {{brand: Brand, notes: string[]}} BrandImportResult
+ *   `notes`: what could not be read (`LOGO_NOT_FOUND`, `LOGO_UNSUPPORTED`,
+ *   `LOGO_ICON`, `COLORS_NOT_FOUND`).
  * @typedef {{email: string, ok: boolean, error: string|null}} TestResult
  * @typedef {{sent: number, failed: number, invalid: string[], results: TestResult[]}} SendTestResult
  *
  * @typedef {{
+ *   list?: () => Promise<StoredTemplate[]>,
  *   load: (id: number|string) => Promise<StoredTemplate>,
+ *   remove?: (id: number|string) => Promise<void>,
  *   create: (payload: SavePayload & {name: string}) => Promise<{template: StoredTemplate, warnings: object[]}>,
  *   duplicate: (id: number|string) => Promise<{template: StoredTemplate, warnings: object[]}>,
  *   save: (id: number|string, payload: SavePayload) => Promise<{template: StoredTemplate, warnings: object[], version: {id: number|string, versionNumber: number}|null}>,
@@ -90,6 +127,12 @@ export function createMemoryStorage({ render, sendTest, assetsPath, systemVariab
  *   listVariables?: () => Promise<EmailVariable[]>,
  *   saveVariable?: (variable: Partial<EmailVariable>, options?: {create?: boolean}) => Promise<EmailVariable>,
  *   deleteVariable?: (key: string) => Promise<void>,
+ *   generate?: (input: GenerateInput, options?: {signal?: AbortSignal}) => Promise<GeneratedEmail>,
+ *   rewrite?: (input: RewriteInput, options?: {signal?: AbortSignal}) => Promise<{text: string}>,
+ *   suggestSubjects?: (input: SubjectsInput, options?: {signal?: AbortSignal}) => Promise<{subjects: string[]}>,
+ *   loadBrand?: () => Promise<Brand>,
+ *   saveBrand?: (brand: Brand) => Promise<Brand>,
+ *   importBrand?: (url: string, options?: {signal?: AbortSignal}) => Promise<BrandImportResult>,
  * }} TemplateStorage
  */
 export class StorageError extends Error {
@@ -147,6 +190,19 @@ export type RenderResult = {
         message: string;
     }[];
 };
+export type GenerateInput = import("../features/generate/generator.js").GenerateInput;
+export type GeneratedEmail = import("../features/generate/generator.js").GeneratedEmail;
+export type RewriteInput = import("../features/generate/rewrite.js").RewriteInput;
+export type SubjectsInput = import("../features/generate/subjects.js").SubjectsInput;
+export type Brand = import("../features/brand/brand.js").Brand;
+/**
+ * `notes`: what could not be read (`LOGO_NOT_FOUND`, `LOGO_UNSUPPORTED`,
+ * `LOGO_ICON`, `COLORS_NOT_FOUND`).
+ */
+export type BrandImportResult = {
+    brand: Brand;
+    notes: string[];
+};
 export type TestResult = {
     email: string;
     ok: boolean;
@@ -159,7 +215,9 @@ export type SendTestResult = {
     results: TestResult[];
 };
 export type TemplateStorage = {
+    list?: () => Promise<StoredTemplate[]>;
     load: (id: number | string) => Promise<StoredTemplate>;
+    remove?: (id: number | string) => Promise<void>;
     create: (payload: SavePayload & {
         name: string;
     }) => Promise<{
@@ -197,4 +255,22 @@ export type TemplateStorage = {
         create?: boolean;
     }) => Promise<EmailVariable>;
     deleteVariable?: (key: string) => Promise<void>;
+    generate?: (input: GenerateInput, options?: {
+        signal?: AbortSignal;
+    }) => Promise<GeneratedEmail>;
+    rewrite?: (input: RewriteInput, options?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        text: string;
+    }>;
+    suggestSubjects?: (input: SubjectsInput, options?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        subjects: string[];
+    }>;
+    loadBrand?: () => Promise<Brand>;
+    saveBrand?: (brand: Brand) => Promise<Brand>;
+    importBrand?: (url: string, options?: {
+        signal?: AbortSignal;
+    }) => Promise<BrandImportResult>;
 };

package/dist/types/ui/EmailStudio.d.ts

@@ -0,0 +1,42 @@
+/**
+ * EMAIL STUDIO — the two screens wired together.
+ *
+ *   TemplateLibrary ── Edit / New template / Start from this base ──▶ EmailBuilder
+ *         ▲                                                              │
+ *         └──────────────────────────── Back ───────────────────────────┘
+ *
+ * Nothing here that a host could not write itself: both screens are exported
+ * on their own, and an application that only wants the editor mounts
+ * `EmailBuilder` alone (or the library alone, opening its own editor).
+ *
+ * Shared props go to both screens — except `templates` (the bases), which
+ * only the library shows: the editor gets `[]`, so no second gallery replaces
+ * the email being edited (`builderProps.templates` brings it back).
+ * `libraryProps` / `builderProps` reach only one. Coming back from the editor, the library selects the template that was
+ * just edited or created.
+ *
+ * @param {{
+ *   storage?: import('../storage/client.js').TemplateStorage,
+ *   locale?: string,
+ *   messages?: Record<string, string>,
+ *   onNotify?: (level: 'success'|'info'|'warning'|'error', message: string) => void,
+ *   sender?: import('../features/templates/starter.js').StarterSender,
+ *   templates?: import('../features/templates/gallery.js').GalleryTemplate[],
+ *   onClose?: () => void,
+ *   libraryProps?: object,
+ *   builderProps?: object,
+ *   className?: string,
+ * }} props  `onClose`: shows the library's close button.
+ */
+export default function EmailStudio({ storage: injectedStorage, locale, messages, onNotify, sender, templates, onClose, libraryProps, builderProps, className, }: {
+    storage?: import("../storage/client.js").TemplateStorage;
+    locale?: string;
+    messages?: Record<string, string>;
+    onNotify?: (level: "success" | "info" | "warning" | "error", message: string) => void;
+    sender?: import("../features/templates/starter.js").StarterSender;
+    templates?: import("../features/templates/gallery.js").GalleryTemplate[];
+    onClose?: () => void;
+    libraryProps?: object;
+    builderProps?: object;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/types/ui/fields.d.ts

@@ -4,9 +4,10 @@ export function emailColor(value: any): string | null;
  * Field of a property. The caller's `key` (element + property) remounts it on
  * every selection change: a draft never carries over from one element to another.
  */
-export function PropertyField({ property, value, onCommit, idPrefix, services }: {
+export function PropertyField({ property, value, fallback, onCommit, idPrefix, services }: {
     property: any;
     value: any;
+    fallback?: string | undefined;
     onCommit: any;
     idPrefix?: string | undefined;
     services?: null | undefined;

package/dist/types/ui/library/TemplateLibrary.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @param {{
+ *   storage?: import('../../storage/client.js').TemplateStorage,
+ *   locale?: string,
+ *   messages?: Record<string, string>,
+ *   onNotify?: (level: 'success'|'info'|'warning'|'error', message: string) => void,
+ *   sender?: import('../../features/templates/starter.js').StarterSender,
+ *   templates?: import('../../features/templates/gallery.js').GalleryTemplate[],
+ *   title?: string,
+ *   description?: string,
+ *   selectedId?: string|number|null,
+ *   favoritesKey?: string|null,
+ *   onEdit?: (template: import('../../storage/client.js').StoredTemplate) => void,
+ *   onCreate?: (start: null | {baseId: string, mjml: string, meta: {subject?: string, preheader?: string}}) => void,
+ *   onClose?: () => void,
+ *   className?: string,
+ * }} props
+ */
+export default function TemplateLibrary({ locale, messages, onNotify, ...props }: {
+    storage?: import("../../storage/client.js").TemplateStorage;
+    locale?: string;
+    messages?: Record<string, string>;
+    onNotify?: (level: "success" | "info" | "warning" | "error", message: string) => void;
+    sender?: import("../../features/templates/starter.js").StarterSender;
+    templates?: import("../../features/templates/gallery.js").GalleryTemplate[];
+    title?: string;
+    description?: string;
+    selectedId?: string | number | null;
+    favoritesKey?: string | null;
+    onEdit?: (template: import("../../storage/client.js").StoredTemplate) => void;
+    onCreate?: (start: null | {
+        baseId: string;
+        mjml: string;
+        meta: {
+            subject?: string;
+            preheader?: string;
+        };
+    }) => void;
+    onClose?: () => void;
+    className?: string;
+}): import("react").JSX.Element;