@lyads/visual-editor 0.0.0-stage → 1.0.1

package/dist/blocks/block-checks.d.ts

@@ -0,0 +1,34 @@
+import type { BlockDocumentView } from './block-type';
+/** What the review before sending or publishing points out. */
+export type BlockCheckCode = 'PIECE_EMPTY' | 'LINK_EMPTY' | 'BUTTON_WITHOUT_LINK' | 'BUTTON_WITHOUT_TEXT' | 'IMAGE_WITHOUT_SOURCE' | 'IMAGE_WITHOUT_ALT' | 'HIDDEN_ON_EVERY_SCREEN' | 'EMAIL_NEAR_CLIP' | 'EMAIL_CLIPPED';
+export interface BlockCheck {
+    readonly code: BlockCheckCode;
+    /** `error`: the reader meets something broken; `warning`: worth a look before sending. */
+    readonly severity: 'error' | 'warning';
+    /** The block to show; absent for a finding about the whole piece. */
+    readonly blockId?: string;
+    /** Size of the e-mail in kilobytes, for the size findings. */
+    readonly kilobytes?: number;
+}
+/** Gmail shows only the first 102 KB of the HTML of a message and hides the rest behind a link. */
+export declare const GMAIL_CLIP_BYTES: number;
+/**
+ * Below the cut, but close: the host still adds its own markup (footer, tracking) to what the
+ * editor generates.
+ */
+export declare const GMAIL_NEAR_CLIP_BYTES: number;
+/**
+ * The review of a block piece before it goes out: links that lead nowhere, images without an
+ * address or a description, buttons without text or link, blocks hidden on every screen and,
+ * for an e-mail whose final HTML is given, a size Gmail would cut. It reads the piece, never
+ * changes it, and works the same in the editor and in the host.
+ */
+export declare class BlockChecker {
+    check(document: BlockDocumentView, finalHtml?: string): readonly BlockCheck[];
+    private block;
+    private filled;
+    /** An address that leads somewhere: not empty, not only `#`. */
+    private link;
+    /** A link of the text whose address is missing, empty or only `#`. */
+    private emptyAnchor;
+}

package/dist/blocks/block-inspector.d.ts

@@ -0,0 +1,55 @@
+import type { BlockDevice, BlockDocumentData, BlockPropValue } from '../core/block-document';
+import type { FieldControl, FieldOption, FieldTab } from './block-type';
+import type { BlockDefinitionRegistry } from './definitions';
+import type { StyleKeySpec, StylePath } from './styles';
+/** One property of the selected block, as the properties panel shows it. */
+export interface BlockFieldModel {
+    readonly key: string;
+    readonly tab: FieldTab;
+    readonly control: FieldControl;
+    readonly labelKey: string;
+    readonly options: readonly FieldOption[];
+    /** The value the block sets; undefined while it inherits. */
+    readonly own: BlockPropValue | undefined;
+    /** What the output uses: the block's value, else the global style, else the default. */
+    readonly effective: BlockPropValue | undefined;
+    /** The global style the value comes from while the block does not set it. */
+    readonly inherits: StylePath | undefined;
+    /** The field may take a value of its own on small screens. */
+    readonly responsive: boolean;
+    /** The screen this model shows. On mobile, `own` is the mobile value of a responsive field. */
+    readonly device: BlockDevice;
+    /** The block sets a mobile value for this field (shown on both screens). */
+    readonly mobileOverride: boolean;
+}
+export interface GlobalStyleKeyModel {
+    readonly group: string;
+    readonly key: string;
+    readonly labelKey: string;
+    readonly control: StyleKeySpec['control'];
+    readonly options: readonly FieldOption[];
+    readonly value: string;
+    readonly overridden: boolean;
+}
+export interface GlobalStyleGroupModel {
+    readonly group: string;
+    readonly labelKey: string;
+    readonly keys: readonly GlobalStyleKeyModel[];
+}
+/**
+ * Reads a block piece the way the panels show it: the fields of a block by its definition,
+ * with the inherited and default values resolved, and the global styles of its kind. The
+ * panels are generated from this, never written per block type.
+ */
+export declare class BlockInspector {
+    private readonly registry;
+    constructor(registry: BlockDefinitionRegistry);
+    /**
+     * The fields of a block. On mobile a responsive field shows its mobile value, and while it
+     * has none the value every screen uses, as what it inherits.
+     */
+    fields(document: BlockDocumentData, id: string, device?: BlockDevice): readonly BlockFieldModel[];
+    styles(document: Pick<BlockDocumentData, 'kind' | 'styles'>): readonly GlobalStyleGroupModel[];
+    private field;
+    private find;
+}

package/dist/blocks/block-output.d.ts

@@ -0,0 +1,28 @@
+import type { BlockDocument } from '../core/block-document';
+import type { SourceInput } from '../core/document';
+import type { CanvasBridgeRegion } from '../renderers/canvas-bridge';
+import type { BlockPreviewInput } from '../renderers/marked-preview';
+import type { BlockDefinitionRegistry } from './definitions';
+import type { BlockEmailRenderer } from './email-renderer';
+import type { BlockPageGenerator } from './page-generator';
+/**
+ * The two outputs of a block piece, by kind: the final one the host stores, sends or publishes
+ * (the compiled e-mail, or the HTML and CSS of the page), and the marked preview of the editing
+ * frame with the regions of its blocks.
+ */
+export declare class BlockOutputRenderer {
+    private readonly registry;
+    private readonly pages;
+    private readonly emails;
+    /** The e-mail renderer of the editing frame; its compiler may queue apart from the final one. */
+    private readonly previewEmails;
+    constructor(registry: BlockDefinitionRegistry, pages: BlockPageGenerator, emails: BlockEmailRenderer, 
+    /** The e-mail renderer of the editing frame; its compiler may queue apart from the final one. */
+    previewEmails?: BlockEmailRenderer);
+    /** What is sent or published. */
+    render(document: BlockDocument): Promise<SourceInput>;
+    /** The marked markup of the editing frame and the regions of the blocks, in document order. */
+    preview(document: BlockDocument): Promise<BlockPreviewInput>;
+    /** What the frame runtime needs of each block: place, text mode, container, image. */
+    regions(document: Pick<BlockDocument, 'blocks'>): readonly CanvasBridgeRegion[];
+}

package/dist/blocks/block-type.d.ts

@@ -0,0 +1,124 @@
+import type { Block, BlockDocumentData, BlockNodeType, BlockPropValue, BlockProps } from '../core/block-document';
+import type { DocumentKind } from '../core/document';
+import type { GlobalStyleSpec, StylePath, StyleResolver } from './styles';
+import type { ValueSpec } from './values';
+/** What the generators read of a piece: a `BlockDocument` or its validated data. */
+export type BlockDocumentView = Pick<BlockDocumentData, 'kind' | 'meta' | 'styles' | 'blocks'>;
+/** The definitions the generators need; implemented by `BlockDefinitionRegistry`. */
+export interface BlockTypeCatalog {
+    readonly styles: GlobalStyleSpec;
+    definition(type: BlockNodeType): BlockTypeDefinition;
+}
+/** `preview` feeds the editing frame; `final` is what is sent or published. */
+export type OutputMode = 'preview' | 'final';
+export type FieldTab = 'content' | 'style' | 'advanced';
+export type FieldControl = 'text'
+/** Markup on several lines (the free HTML block), edited in the code editor of the shell. */
+ | 'code' | 'richtext' | 'color' | 'length' | 'select' | 'image' | 'link' | 'toggle';
+export interface FieldOption {
+    readonly value: string;
+    readonly labelKey: string;
+}
+/** One property of a block as the properties panel shows it and the generators read it. */
+export interface BlockField {
+    readonly key: string;
+    readonly tab: FieldTab;
+    readonly control: FieldControl;
+    readonly labelKey: string;
+    readonly value: ValueSpec;
+    /** The global style this property inherits while the block does not set it. */
+    readonly inherits?: StylePath;
+    /** Value used while neither the block nor a global style says otherwise. */
+    readonly defaultValue?: BlockPropValue;
+    readonly options?: readonly FieldOption[];
+    readonly required?: boolean;
+    /** Hidden from the panel: set together with another field (e.g. the asset of an image). */
+    readonly internal?: boolean;
+    /**
+     * The field may take a value of its own on small screens. A page writes it with `css`
+     * inside the mobile rule; an e-mail only where the definition says how (`mobileEmail`).
+     */
+    readonly responsive?: boolean;
+    /** MJML attribute written when the block overrides the value. */
+    readonly mjml?: {
+        readonly attribute: string;
+        readonly map?: Readonly<Record<string, string>>;
+    };
+    /** CSS declaration written in `.ve-<id>` when the block overrides the value. */
+    readonly css?: {
+        readonly property: string;
+        readonly target?: 'self' | 'inner';
+        readonly map?: Readonly<Record<string, string>>;
+    };
+}
+interface RenderContext {
+    readonly block: Block;
+    readonly kind: DocumentKind;
+    readonly mode: OutputMode;
+    readonly styles: StyleResolver;
+    /** The block's own value, else the inherited global style, else the field default. */
+    value(key: string): BlockPropValue | undefined;
+    /** Markup of the children, in order (reversed when asked). */
+    children(reverse?: boolean): string;
+}
+export interface EmailBlockContext extends RenderContext {
+    /** Width of a column within its section, e.g. `50%`. */
+    readonly columnWidth?: string | undefined;
+    /**
+     * ` name="value"` pairs: overridden fields mapped to MJML, the extra pairs given here and,
+     * in preview, the `css-class` of `previewClass()`. Values are escaped.
+     */
+    attributes(extra?: Readonly<Record<string, string | undefined>>): string;
+    /** Registers a raw region of generated, sanitized markup and returns its `mj-raw`. */
+    raw(fragment: string): string;
+    /** In preview, the class the preview marker looks for; undefined otherwise. */
+    previewClass(): string | undefined;
+    /**
+     * Every class of the cell of the block: the preview class, the device classes (hidden on a
+     * screen, mobile values) and nothing else; undefined when there is none.
+     */
+    cellClass(): string | undefined;
+}
+export interface PageBlockContext extends RenderContext {
+    /** ` class="<base> ve-b-<id>"`. */
+    classes(base: string): string;
+    /** In preview, the canvas attribute of a selectable block; empty otherwise. */
+    node(): string;
+    /** In preview, the canvas attribute of the element whose text is edited in place. */
+    editable(): string;
+    /** Adds a structural rule for this block, e.g. the grid of a section. */
+    rule(selectorSuffix: string, declarations: string): void;
+    /** The same, only on small screens. */
+    mobileRule(selectorSuffix: string, declarations: string): void;
+}
+/**
+ * How an e-mail writes the mobile value of a field: CSS rules for the cell `.ve-m-<id>` that
+ * MJML gives the block (`''` is the cell itself, `'>div'` its text, `' a'` the link of a
+ * button), each with the properties to set (by default the CSS property of the field).
+ */
+export interface MobileEmailRule {
+    readonly selectors: readonly string[];
+    readonly properties?: readonly string[];
+}
+/** What one block type is: its place in the tree, its fields and its two generators. */
+export interface BlockTypeDefinition {
+    readonly type: BlockNodeType;
+    readonly labelKey: string;
+    readonly kinds: readonly DocumentKind[];
+    readonly root?: boolean;
+    readonly childTypes: readonly BlockNodeType[];
+    readonly childCount: {
+        readonly min: number;
+        readonly max: number;
+    };
+    readonly fields: readonly BlockField[];
+    /** CSS selector, relative to `.ve-b-<id>`, of the element `inner` overrides apply to. */
+    readonly innerSelector?: string;
+    /** By field key: how an e-mail writes its mobile value. A field absent here has none. */
+    readonly mobileEmail?: Readonly<Partial<Record<string, MobileEmailRule>>>;
+    /** A new block of this type with the given values. */
+    create(nextId: () => string, props?: BlockProps): Block;
+    email?(context: EmailBlockContext): string;
+    page(context: PageBlockContext): string;
+}
+export {};

package/dist/blocks/content-guard.d.ts

@@ -0,0 +1,52 @@
+import type { DocumentKind } from '../core/document';
+import { UrlPolicy } from '../security/url-policy';
+import type { UrlPurpose } from '../security/url-policy';
+import type { RichTextMode } from '../core/rich-text-markup';
+/**
+ * The content rules of the texts, links and free HTML a block carries. A text is the rich
+ * text projection the in-place editing protocol already transports: it is accepted only when
+ * it is a fixed point of `RichTextProjection`, imports without any notice other than `info`,
+ * is writable under `ContentPolicy.writable` and uses only the tags and attributes of its
+ * mode. A free HTML block of an e-mail is refused when the e-mail rules would remove anything.
+ */
+export declare class BlockContentGuard {
+    #private;
+    constructor(urls?: UrlPolicy);
+    acceptsUrl(value: string, purpose: UrlPurpose): boolean;
+    /** The settled projection of a text; throws `INVALID_BLOCK_TEXT` when it has none. */
+    normalizeText(value: string, mode: RichTextMode, kind: DocumentKind): string;
+    acceptsText(value: string, mode: RichTextMode, kind: DocumentKind): boolean;
+    /** Balanced markup as the parser reads it back; nothing is removed here. */
+    normalizeHtml(value: string): string;
+    acceptsHtml(value: string, kind: DocumentKind): boolean;
+    /**
+     * Every element as a browser without scripting reads it (inside SVG, `noscript` and
+     * `template` too): no generated class, no element which swallows the rest of the output
+     * and, in an e-mail, nothing that redirects it or renders markup as text.
+     */
+    private authorElements;
+    /**
+     * The only external style resources an e-mail may load are Google Fonts: style sheets from
+     * `fonts.googleapis.com` and font files from `fonts.gstatic.com`.
+     */
+    private emailResources;
+    /** The document a fragment imports as, when the codec reads it with nothing but `info`. */
+    private inspected;
+    private projectionNodes;
+    /**
+     * One line: paragraphs become line breaks and, for a button, links become their text. The
+     * result is projected again, so it is a fixed point.
+     */
+    private flatten;
+    private unwrapLinks;
+    /**
+     * Results by kind, mode and SHA-256 of the value: the cache keeps 2.000 short keys, never
+     * the texts themselves (an HTML block may have hundreds of kilobytes).
+     */
+    private cached;
+    /** Entries currently held and the characters of their keys, for the bound on memory. */
+    cacheFootprint(): {
+        readonly entries: number;
+        readonly keyCharacters: number;
+    };
+}

package/dist/blocks/conversion.d.ts

@@ -0,0 +1,22 @@
+import type { BlockDocument } from '../core/block-document';
+import type { Diagnostic, EditorDocumentData } from '../core/document';
+import type { HtmlDocumentCodec } from '../codecs/html';
+import type { BlockEmailRenderer } from './email-renderer';
+import type { BlockPageGenerator } from './page-generator';
+export declare class BlockConversionError extends Error {
+    readonly diagnostics: readonly Diagnostic[];
+    constructor(diagnostics: readonly Diagnostic[]);
+}
+/**
+ * "Convert to editable HTML": one way only, from a block piece (schema 2) to the HTML document
+ * of the editor (schema 1), made of the final output of the generators. Nothing converts back.
+ * The new document keeps the id and the title; its revision follows the block piece, so a
+ * host saving it over the same record moves forward.
+ */
+export declare class BlockToHtmlConversion {
+    private readonly codec;
+    private readonly email;
+    private readonly page;
+    constructor(codec: HtmlDocumentCodec, email: BlockEmailRenderer, page: BlockPageGenerator);
+    convert(document: BlockDocument): Promise<EditorDocumentData>;
+}

package/dist/blocks/definitions.d.ts

@@ -0,0 +1,43 @@
+import type { Block, BlockDocumentData, BlockNodeType, BlockPropValue, BlockProps, BlockRules, GlobalStyles, StyleValue } from '../core/block-document';
+import type { DocumentKind } from '../core/document';
+import type { BlockField, BlockTypeCatalog, BlockTypeDefinition } from './block-type';
+import { BlockContentGuard } from './content-guard';
+import { GlobalStyleSpec } from './styles';
+export declare function defaultBlockTypes(): readonly BlockTypeDefinition[];
+export declare class BlockDefinitionRegistry implements BlockRules, BlockTypeCatalog {
+    #private;
+    readonly styles: GlobalStyleSpec;
+    constructor(content?: BlockContentGuard, styles?: GlobalStyleSpec, types?: readonly BlockTypeDefinition[]);
+    definition(type: BlockNodeType): BlockTypeDefinition;
+    /** The types an author may insert in a piece of this kind. */
+    list(kind: DocumentKind): readonly BlockTypeDefinition[];
+    field(type: BlockNodeType, key: string): BlockField | undefined;
+    /** A new block; the document validates it when it is inserted. */
+    create(type: BlockNodeType, nextId: () => string, props?: BlockProps): Block;
+    isRoot(type: BlockNodeType): boolean;
+    childTypes(type: BlockNodeType): readonly BlockNodeType[];
+    childCount(type: BlockNodeType): {
+        readonly min: number;
+        readonly max: number;
+    };
+    allows(type: BlockNodeType, kind: DocumentKind): boolean;
+    validateProps(type: BlockNodeType, props: BlockProps, kind: DocumentKind): string | undefined;
+    normalizeProp(type: BlockNodeType, key: string, value: BlockPropValue, kind: DocumentKind): BlockPropValue;
+    textKeys(type: BlockNodeType): readonly string[];
+    /**
+     * A field with a mobile value: marked responsive and written by the output of the kind (CSS
+     * in a page, a mobile rule of the definition in an e-mail).
+     */
+    responsive(type: BlockNodeType, key: string, kind: DocumentKind): boolean;
+    validateStyles(styles: GlobalStyles, kind: DocumentKind): string | undefined;
+    normalizeStyle(group: string, key: string, value: StyleValue, kind: DocumentKind): StyleValue;
+    /**
+     * The output of the piece must fit what consumes it: the MJML of an e-mail (preview, the
+     * larger of the two) within the compilation limit, and the HTML and CSS of a page within
+     * the source limits of the HTML document a conversion would create.
+     */
+    validateDocument(data: BlockDocumentData): string | undefined;
+    /** Every label key the definitions and the global styles refer to. */
+    labelKeys(): readonly string[];
+    private refusal;
+}

package/dist/blocks/device-styles.d.ts

@@ -0,0 +1,31 @@
+import type { Block, BlockPropValue } from '../core/block-document';
+import type { BlockField, BlockTypeDefinition, OutputMode } from './block-type';
+/** Which device classes a piece uses, so the generators write only the rules it needs. */
+export interface DeviceUsage {
+    hideDesktop: boolean;
+    hideMobile: boolean;
+}
+/**
+ * A CSS value written from a block value. The values were already checked by their field
+ * (lengths, colors, choices); this refuses anything that could close the declaration anyway.
+ */
+export declare function cssValue(field: BlockField, value: BlockPropValue): string | undefined;
+/**
+ * The device rules of a block piece: values of small screens and blocks hidden on one screen.
+ * Pages write them as CSS on the classes of the blocks; e-mails as `mj-style`, where hiding on
+ * large screens is inlined (Outlook for Windows reads no media rule) and every small-screen
+ * rule sits in a media rule with `!important`, which wins over the inline styles of MJML.
+ */
+export declare class BlockDeviceStyles {
+    private readonly breakpoint;
+    constructor(breakpoint: number);
+    usage(block: Block, usage: DeviceUsage): void;
+    /** Mobile rules of the cell `.ve-m-<id>` of an e-mail block; empty when it has none. */
+    emailRules(block: Block, definition: BlockTypeDefinition): readonly string[];
+    /** Mobile rules of `.ve-b-<id>` (and its inner element) of a page block. */
+    pageRules(block: Block, definition: BlockTypeDefinition): readonly string[];
+    /** The `mj-style` elements of an e-mail; empty when the piece has no device rule. */
+    emailHead(mode: OutputMode, usage: DeviceUsage, mobile: readonly string[]): string;
+    /** The device CSS of a page: visibility on each screen and the mobile rules. */
+    pageCss(mode: OutputMode, usage: DeviceUsage, mobile: readonly string[]): string;
+}

package/dist/blocks/email-generator.d.ts

@@ -0,0 +1,22 @@
+import { GeneratedMjml } from '../compilation/generated-mjml';
+import type { BlockDocumentView, BlockTypeCatalog, OutputMode } from './block-type';
+/** Columns sit side by side above this width and stack below it, as in the e-mail models. */
+export declare const EMAIL_BREAKPOINT = "641px";
+/**
+ * Writes the MJML of a block e-mail. The global styles become `<mj-attributes>` (and named
+ * `mj-class` for headings and footers), so a style is written once and MJML spreads it over
+ * every element it generates (cell, link, Outlook markup). A block writes only the values it
+ * overrides. Columns are real `mj-column`. In preview every component also carries
+ * `css-class="ve-p-<token>-<id>"`, with a token drawn for the rendering, which the preview
+ * marker turns into the canvas attributes.
+ */
+export declare class BlockMjmlGenerator {
+    #private;
+    private readonly registry;
+    constructor(registry: BlockTypeCatalog);
+    toMjml(document: BlockDocumentView, mode: OutputMode, token?: string): GeneratedMjml;
+    private block;
+    /** Shares of the columns of a section, in percent with at most two decimals. */
+    private widths;
+    private attributes;
+}

package/dist/blocks/email-preview.d.ts

@@ -0,0 +1,23 @@
+import type { BlockDocument } from '../core/block-document';
+/**
+ * Turns the preview classes `ve-p-<token>-<id>` of a compiled preview e-mail into the canvas
+ * attributes: the selectable element of each block gets `data-visual-editor-node`, and the
+ * element holding an editable text gets `data-visual-editor-edit-node`. Only classes with the
+ * token of this rendering count, each block is marked once (its first element in document
+ * order), and the preview classes are taken out again. Works on the parsed tree, never by text
+ * replacement. The e-mail that is sent has neither class nor attribute.
+ *
+ * `<mj-html-attributes>` was tried first and dropped: it re-serializes the whole body with
+ * cheerio in XML mode, which turns `<br>` into an element that swallows the following text and
+ * changes white space, so the preview would no longer be the e-mail that is sent.
+ */
+export declare class EmailPreviewMarker {
+    mark(html: string, document: Pick<BlockDocument, 'blocks'>, token: string): string;
+    /** Depth-first, in document order, `template` contents included. */
+    private walk;
+    /** Removes the preview classes of this rendering and returns the block id they name. */
+    private take;
+    private annotate;
+    private descendant;
+    private set;
+}

package/dist/blocks/email-renderer.d.ts

@@ -0,0 +1,20 @@
+import type { BlockDocument } from '../core/block-document';
+import type { SourceInput } from '../core/document';
+import { SecureIdentifier } from '../security/identity';
+import type { GeneratedMjmlCompilerPort } from '../compilation/generated-mjml';
+import type { OutputMode } from './block-type';
+import type { BlockMjmlGenerator } from './email-generator';
+import { EmailPreviewMarker } from './email-preview';
+/**
+ * The HTML of a block e-mail: generated MJML, compiled by the isolated compiler (which checks
+ * the output against the e-mail rules), and, for the preview, marked for the canvas.
+ */
+export declare class BlockEmailRenderer {
+    private readonly generator;
+    private readonly compiler;
+    private readonly marker;
+    private readonly identity;
+    constructor(generator: BlockMjmlGenerator, compiler: GeneratedMjmlCompilerPort, marker?: EmailPreviewMarker, identity?: SecureIdentifier);
+    /** A new preview token for every rendering: markup of the author cannot guess it. */
+    render(document: BlockDocument, mode: OutputMode): Promise<SourceInput>;
+}

package/dist/blocks/fields.d.ts

@@ -0,0 +1,34 @@
+import type { BlockField, FieldOption } from './block-type';
+import type { StylePath } from './styles';
+import type { RichTextMode } from '../core/rich-text-markup';
+/** Builders of the fields several block types share. Defaults follow MJML's own. */
+export declare const ALIGN_OPTIONS: readonly FieldOption[];
+export declare const BLOCK_PADDING = "10px 25px";
+/** The two visibility toggles every block but a column has. */
+export declare const DEVICE_KEYS: readonly ["hideOnDesktop", "hideOnMobile"];
+/** E-mail mobile rules shared by the text blocks: the cell and the text inside it. */
+export declare const TEXT_MOBILE_EMAIL: Readonly<{
+    fontSize: {
+        selectors: string[];
+    };
+    lineHeight: {
+        selectors: string[];
+    };
+    align: {
+        selectors: string[];
+    };
+    padding: {
+        selectors: string[];
+    };
+}>;
+export declare const fields: Readonly<{
+    text(mode: RichTextMode): BlockField;
+    color(key: string, labelKey: string, inherits?: StylePath, target?: "inner"): BlockField;
+    fontSize(inherits: StylePath, target?: "inner"): BlockField;
+    lineHeight(inherits: StylePath): BlockField;
+    align(defaultValue: "left" | "center" | "right", property?: string): BlockField;
+    padding(defaultValue?: string, inherits?: StylePath): BlockField;
+    /** Hide the block on large or on small screens. The generators read them, not `css`. */
+    visibility(): readonly BlockField[];
+    link(key?: string): BlockField;
+}>;

package/dist/blocks/page-generator.d.ts

@@ -0,0 +1,16 @@
+import type { SourceInput } from '../core/document';
+import type { BlockDocumentView, BlockTypeCatalog, OutputMode } from './block-type';
+import type { StylePath } from './styles';
+/** Width below which the columns of a section stack, as in the e-mail breakpoint. */
+export declare const PAGE_BREAKPOINT = 640;
+/** CSS variable of a global style: `body.textColor` is `--ve-body-text-color`. */
+export declare function styleVariable(path: StylePath): string;
+export declare class BlockPageGenerator {
+    #private;
+    private readonly registry;
+    constructor(registry: BlockTypeCatalog);
+    toHtml(document: BlockDocumentView, mode: OutputMode): SourceInput;
+    private block;
+    /** `.ve-b-<id>{...}` and `.ve-b-<id> <inner>{...}` for the values the block overrides. */
+    private overrides;
+}

package/dist/blocks/render-context.d.ts

@@ -0,0 +1,58 @@
+import type { Block, BlockPropValue } from '../core/block-document';
+import type { DocumentKind } from '../core/document';
+import type { BlockTypeDefinition, EmailBlockContext, OutputMode, PageBlockContext } from './block-type';
+import type { StyleResolver } from './styles';
+/**
+ * Class of a block in the page output: `ve-b-<id>`. The prefix keeps it apart from the
+ * structural classes (`ve-page`, `ve-section`, `ve-button`...) whatever the id is.
+ */
+export declare function blockClass(block: Block): string;
+/**
+ * Class of a block in an e-mail preview: `ve-p-<token>-<id>`, with a token drawn for each
+ * rendering, so markup of the author can never pose as a block for the marker.
+ */
+export declare function previewClass(token: string, block: Block): string;
+/** Classes of a block hidden on a screen; the generators write what each one does. */
+export declare const HIDE_DESKTOP_CLASS = "ve-hide-d";
+export declare const HIDE_MOBILE_CLASS = "ve-hide-m";
+/** Class of the cell of an e-mail block with mobile values: `ve-m-<id>`. */
+export declare function mobileClass(block: Block): string;
+/** The visibility classes of a block, in a fixed order. */
+export declare function visibilityClasses(block: Block): readonly string[];
+/** Shared reading of values: own, else inherited, else the field default. */
+declare abstract class BaseContext {
+    readonly block: Block;
+    readonly definition: BlockTypeDefinition;
+    readonly kind: DocumentKind;
+    readonly mode: OutputMode;
+    readonly styles: StyleResolver;
+    private readonly renderChildren;
+    constructor(block: Block, definition: BlockTypeDefinition, kind: DocumentKind, mode: OutputMode, styles: StyleResolver, renderChildren: (reverse: boolean) => string);
+    value(key: string): BlockPropValue | undefined;
+    children(reverse?: boolean): string;
+}
+export declare class EmailRenderContext extends BaseContext implements EmailBlockContext {
+    private readonly fragments;
+    private readonly token;
+    readonly columnWidth?: string | undefined;
+    /** Whether the generator wrote mobile rules for the cell of this block. */
+    private readonly mobile;
+    constructor(block: Block, definition: BlockTypeDefinition, mode: OutputMode, styles: StyleResolver, renderChildren: (reverse: boolean) => string, fragments: string[], token: string, columnWidth?: string | undefined, 
+    /** Whether the generator wrote mobile rules for the cell of this block. */
+    mobile?: boolean);
+    attributes(extra?: Readonly<Record<string, string | undefined>>): string;
+    cellClass(): string | undefined;
+    raw(fragment: string): string;
+    previewClass(): string | undefined;
+}
+export declare class PageRenderContext extends BaseContext implements PageBlockContext {
+    private readonly rules;
+    private readonly mobileRules;
+    constructor(block: Block, definition: BlockTypeDefinition, mode: OutputMode, styles: StyleResolver, renderChildren: (reverse: boolean) => string, rules: string[], mobileRules?: string[]);
+    classes(base: string): string;
+    node(): string;
+    editable(): string;
+    rule(selectorSuffix: string, declarations: string): void;
+    mobileRule(selectorSuffix: string, declarations: string): void;
+}
+export {};

package/dist/blocks/styles.d.ts

@@ -0,0 +1,54 @@
+import type { GlobalStyles } from '../core/block-document';
+import type { DocumentKind } from '../core/document';
+import type { ValueSpec } from './values';
+/** An MJML component, or a named `mj-class`, whose attribute carries a global style. */
+export interface MjmlTarget {
+    readonly element: 'mj-all' | 'mj-text' | 'mj-button' | 'mj-divider' | 'mj-section';
+    readonly mjClass?: string;
+    readonly attribute: string;
+}
+export interface StyleKeySpec {
+    readonly key: string;
+    readonly labelKey: string;
+    readonly control: 'color' | 'length' | 'select';
+    readonly value: ValueSpec;
+    readonly default: string | Readonly<Record<DocumentKind, string>>;
+    readonly options?: readonly {
+        readonly value: string;
+        readonly labelKey: string;
+    }[];
+    /** Where an e-mail carries it in `<mj-attributes>`; absent for page-only styles. */
+    readonly mjml?: readonly MjmlTarget[];
+    readonly kinds?: readonly DocumentKind[];
+}
+export interface StyleGroupSpec {
+    readonly group: string;
+    readonly labelKey: string;
+    readonly keys: readonly StyleKeySpec[];
+}
+/** `group.key` of a global style, the path a block field inherits from. */
+export type StylePath = `${string}.${string}`;
+/**
+ * The global styles of a piece and their catalog defaults. A piece stores only what differs;
+ * "restore default" removes the key. Labels are keys of the package catalogs.
+ */
+export declare const GLOBAL_STYLE_GROUPS: readonly StyleGroupSpec[];
+export declare class GlobalStyleSpec {
+    #private;
+    readonly groups: readonly StyleGroupSpec[];
+    constructor(groups?: readonly StyleGroupSpec[]);
+    key(group: string, key: string): StyleKeySpec | undefined;
+    has(path: string): path is StylePath;
+    paths(): readonly StylePath[];
+    defaultOf(path: StylePath, kind: DocumentKind): string;
+}
+/** The effective value of every global style: the piece's override, or the catalog default. */
+export declare class StyleResolver {
+    private readonly spec;
+    private readonly styles;
+    private readonly kind;
+    constructor(spec: GlobalStyleSpec, styles: GlobalStyles, kind: DocumentKind);
+    value(path: StylePath): string;
+    /** Whether the piece overrides this style; false means the catalog default applies. */
+    overridden(path: StylePath): boolean;
+}