@hyper-elements/react 0.3.0 → 0.3.1

package/dist/primitives.d.cts

@@ -30,10 +30,52 @@ interface Node {
 /** A string is text, where the parent takes text. */
 type Child = Node | string;
 
+/**
+ * The email clients Elements checks an Email for. Four were captured showing Elements 0.3.0 emails they weren't tuned
+ * on (unlayer/email-renderer), which says how closely each is measured; what's known of the rest is from caniemail's
+ * tables (caniemail.com, MIT), which test the CSS and HTML each client keeps. Either way a problem is said at its own
+ * severity; only one Elements assumes, unchecked, is a note.
+ */
+
+type EmailClient = "outlook" | "outlook-com" | "outlook-mac" | "outlook-app" | "gmail" | "gmail-app" | "gmail-app-other" | "apple-mail" | "yahoo" | "aol" | "samsung-email" | "thunderbird" | "protonmail" | "fastmail" | "hey" | "gmx" | "web-de" | "orange" | "sfr" | "laposte" | "free-fr" | "t-online-de" | "mail-ru" | "ionos" | "wp-pl" | "rainloop";
+interface EmailClientMeasurement {
+    /** The Elements version whose emails were captured. */
+    elements: string;
+    /** The client captured. */
+    against: string;
+    /** When (an ISO date). */
+    captured: string;
+    /** Of the words in emails it wasn't tuned on, the share a model of the client draws within 4px of the client. */
+    wordsWithin4px: number;
+    /** Of neighbouring word pairs, the share on the same line, or on different lines, in both. */
+    lineBreaks: number;
+}
+interface EmailClientInfo {
+    name: string;
+    /** The widths it shows an email at, where it's been measured. */
+    widths: {
+        desktop?: number;
+        phone?: number;
+    };
+    /** Whether its dark mode was measured. */
+    dark: boolean;
+    /** Whether its model is an approximation (words placed within 4px well short of all of them). */
+    approximate: boolean;
+    /** Its captures; null where what's known of it is caniemail's. */
+    measured: EmailClientMeasurement | null;
+}
+declare const EMAIL_CLIENTS: Readonly<Record<EmailClient, EmailClientInfo>>;
+/**
+ * What's checked when no clients are named: the ones most email is read in (the four captured, the Gmail and Outlook
+ * apps, Outlook for Mac, Yahoo, AOL and Samsung Email). The others only when named.
+ */
+declare const DEFAULT_EMAIL_CLIENTS: readonly EmailClient[];
+
 /**
  * What validation, resolution and conversion found: one list, each entry
  * naming the node (by id where it has one) and the path to the value.
  */
+
 type Severity = "error" | "warning" | "info";
 interface Diagnostic {
     /** Stable, for tools to match on: "prop/unknown", "layout/overflow", … */
@@ -44,8 +86,14 @@ interface Diagnostic {
     path: string;
     /** The node's id, once it has one. */
     nodeId?: string;
+    /** The email clients it's about; absent: every email, never left out by `emailClients`. */
+    clients?: EmailClient[];
+    /** What to change. */
+    fix?: string;
+    /** Where to see it: for a problem known from caniemail's tables, its page there. */
+    see?: string;
 }
-/** One line per diagnostic, for error messages and logs. */
+/** One line per diagnostic, for error messages and logs: with the email clients it's about, what to change and how to see it, where it says. */
 declare function formatDiagnostics(diagnostics: readonly Diagnostic[]): string;
 /** Thrown where a template with errors can't be rendered (`validate()` lists the problems without throwing). */
 declare class ElementsError extends Error {
@@ -78,6 +126,8 @@ interface Kind<In = unknown, Out extends Json = Json> {
     /** What it accepts, in words (for messages and descriptions). */
     readonly accepts: string;
     parse(input: unknown): Parsed<Out>;
+    /** Whether a value it parsed sets nothing (`breakpoints={{}}`): the prop is then left out, as if not given. */
+    empty?(value: Out): boolean;
     jsonSchema(): JsonSchema;
     /** Type only: what it accepts as input. */
     readonly __in?: In;
@@ -196,11 +246,20 @@ type LinkValue = string | {
 type Category = "root" | "section" | "layout" | "block" | "inline" | "shape";
 /** The outputs Elements renders. */
 type Target = "email" | "web" | "print" | "pdf" | "image";
+/** The roots a template can have: each decides the output (`render()` writes an Email's HTML, a Page's, …). */
+type RootName = "Email" | "Page" | "Document" | "Canvas";
+/** What a style is about, for the guide and `describeComponents()`: the group it's listed in. */
+type StyleGroup = "Layout" | "Size" | "Position" | "Spacing" | "Typography" | "Background" | "Border" | "Effects";
 interface PropSpec<K extends Kind<any, any> = Kind<any, any>, R extends boolean = boolean> {
     kind: K;
     required?: R;
     label: string;
     description?: string;
+    /**
+     * The roots it may be given under (default: every root its component goes in). Under another root it's a
+     * `prop/not-supported` error naming these.
+     */
+    roots?: readonly RootName[];
     /** Used where the prop isn't given (not written into the document). */
     default?: OutputOf<K>;
     /** Editors may change it (default true). */
@@ -215,17 +274,20 @@ type SupportByTarget = Partial<Record<Target, Support | readonly Support[]>>;
  * real classic Outlook for Windows; caniemail's client tables
  * (caniemail.com); the output's writer itself, which turns it into markup the
  * output shows (checked in Chromium, for email with and without <style>, and
- * against a model of Outlook's layout built from those captures); CSS written
- * as is, which browsers show as asked; or assumed, not yet checked.
+ * against a model of Outlook's layout built from those captures); captures of
+ * Gmail, Outlook.com or Apple Mail; CSS written as is, which browsers show as
+ * asked; or assumed, not yet checked.
  */
-type SupportSource = "outlook-captures" | "caniemail" | "writer" | "css" | "assumed";
+type SupportSource = "outlook-captures" | "gmail-captures" | "outlook-com-captures" | "apple-mail-captures" | "caniemail" | "writer" | "css" | "assumed";
 /**
  * How an output shows a style or prop, or some of its values (`values`, or
  * `when` the value, on a node with such props, is such): as asked (`full`); as asked but in classic
  * Outlook, which shows something else (`outlook`, email only: what it shows);
  * not quite as asked anywhere it's shown (`partial`: what it shows); or not at
  * all (`none`: what it does instead). Read by the support pass every output
- * runs: `outlook` and `partial` are notes, `none` a warning.
+ * runs: `outlook` and `partial` are notes, `none` a warning, whether the email
+ * clients it names were captured or are from caniemail's tables; one `assumed`
+ * is only ever a note.
  */
 type Support = {
     level: "full";
@@ -238,6 +300,12 @@ type Support = {
         props: Record<string, Json>;
     }) => boolean;
     source: SupportSource;
+    /** For email, the clients it's about (`outlook`: classic Outlook); absent, every email client. */
+    clients?: readonly EmailClient[];
+    /** caniemail's feature the clients are from (its slug), checked against its tables (test/caniemail.test.ts). */
+    feature?: string;
+    /** What to change. */
+    fix?: string;
 };
 interface StyleSpec<K extends Kind<any, any> = Kind<any, any>> {
     kind: K;
@@ -247,6 +315,13 @@ interface StyleSpec<K extends Kind<any, any> = Kind<any, any>> {
     inherited?: boolean;
     /** May be overridden on phones (`mobile`). */
     mobile?: boolean;
+    /**
+     * The roots it may be set under (default: every root its component goes in). Under another root it's a
+     * `style/not-supported` error naming these, in `style` and in its condition blocks alike.
+     */
+    roots?: readonly RootName[];
+    /** The group it's listed in; default: the group of its name (`STYLE_GROUP_OF`), as a style's name is CSS's. */
+    group?: StyleGroup;
     editable?: boolean;
     /** How each output shows it: required for every output its component renders to (a test checks). */
     support?: SupportByTarget;
@@ -287,7 +362,11 @@ type EditorGroup = {
     title: string;
     composite: CompositeEditor;
 };
-interface ComponentDefinition<P extends PropSpecs = PropSpecs, S extends StyleSpecs = StyleSpecs> {
+/**
+ * A component's definition. `H` is its hover styles' keys: a definition made with `defineComponent()` keeps the list it
+ * gives (none: `readonly []`), so the types of its `style.hover` can be exactly those; the default is any of its styles.
+ */
+interface ComponentDefinition<P extends PropSpecs = PropSpecs, S extends StyleSpecs = StyleSpecs, H extends readonly (keyof S & string)[] = readonly (keyof S & string)[]> {
     type: string;
     label: string;
     description: string;
@@ -306,7 +385,12 @@ interface ComponentDefinition<P extends PropSpecs = PropSpecs, S extends StyleSp
         }>;
     };
     /** Style keys that may be set for `hover`. */
-    hover?: readonly (keyof S & string)[];
+    hover?: H;
+    /**
+     * Styles a condition takes on this component that an output doesn't show under it, by condition, style and
+     * output (a Page root's phone font size): reported when the template is expanded, before a Grid is arranged.
+     */
+    conditionSupport?: Partial<Record<"mobile" | "hover", Partial<Record<keyof S & string, SupportByTarget>>>>;
     children: ChildrenRule;
     /**
      * How wide it is where nothing sets its width: `stretch` fills its parent's
@@ -323,6 +407,16 @@ interface ComponentDefinition<P extends PropSpecs = PropSpecs, S extends StyleSp
     arrange?: (node: Node) => Node;
     /** Where it renders; a target left out is a diagnostic. */
     targets: Partial<Record<Target, TargetSupport>>;
+    /**
+     * The roots it may go in, of those whose output it renders to (default: every one whose children reach it). Under
+     * another such root it's the `notAllowed` error, by default `component/not-supported` naming these; under a root
+     * whose output it doesn't render to, it's `target/unsupported`, as for any component.
+     */
+    roots?: readonly RootName[];
+    notAllowed?: {
+        code: string;
+        message: (root: string) => string;
+    };
     /** Why a target it doesn't render can't, and what to do instead (in the diagnostic). */
     unsupported?: Partial<Record<Target, string>>;
     editor?: {
@@ -480,8 +574,11 @@ declare const Email$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -559,8 +656,11 @@ declare const Email$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -568,7 +668,7 @@ declare const Email$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Page$1: ComponentDefinition<{
     readonly title: PropSpec<Kind<string, string>, false> & {
         default: undefined;
@@ -588,6 +688,15 @@ declare const Page$1: ComponentDefinition<{
     readonly description: PropSpec<Kind<string, string>, boolean> & {
         default: any;
     };
+    readonly breakpoints: PropSpec<Kind<{
+        mobile?: number;
+    }, {
+        mobile?: number;
+    } & {
+        [key: string]: Json;
+    }>, boolean> & {
+        default: any;
+    };
 }, {
     gap: {
         kind: Kind<LengthInput<"px">, number>;
@@ -687,8 +796,11 @@ declare const Page$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -766,8 +878,11 @@ declare const Page$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -775,7 +890,7 @@ declare const Page$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Section$1: ComponentDefinition<{}, {
     readonly gap: {
         kind: Kind<LengthInput<"px">, number>;
@@ -904,8 +1019,11 @@ declare const Section$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -983,8 +1101,11 @@ declare const Section$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -992,7 +1113,7 @@ declare const Section$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Row$1: ComponentDefinition<{
     readonly dir: PropSpec<Kind<"ltr" | "rtl" | "auto", "ltr" | "rtl" | "auto">, false> & {
         default: undefined;
@@ -1183,11 +1304,19 @@ declare const Row$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -1263,8 +1392,11 @@ declare const Row$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1342,8 +1474,11 @@ declare const Row$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1351,7 +1486,7 @@ declare const Row$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Column$1: ComponentDefinition<{}, {
     readonly flex: {
         kind: Kind<number | "none", number | "none">;
@@ -1519,11 +1654,19 @@ declare const Column$1: ComponentDefinition<{}, {
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -1599,8 +1742,11 @@ declare const Column$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1678,8 +1824,11 @@ declare const Column$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1687,7 +1836,7 @@ declare const Column$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Text$1: ComponentDefinition<{
     dir: PropSpec<Kind<"ltr" | "rtl" | "auto", "ltr" | "rtl" | "auto">, false> & {
         default: undefined;
@@ -1786,11 +1935,19 @@ declare const Text$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -1849,8 +2006,11 @@ declare const Text$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1928,8 +2088,11 @@ declare const Text$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -1942,8 +2105,12 @@ declare const Text$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -1951,7 +2118,7 @@ declare const Text$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Heading$1: ComponentDefinition<{
     readonly dir: PropSpec<Kind<"ltr" | "rtl" | "auto", "ltr" | "rtl" | "auto">, false> & {
         default: undefined;
@@ -2053,11 +2220,19 @@ declare const Heading$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -2116,8 +2291,11 @@ declare const Heading$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2195,8 +2373,11 @@ declare const Heading$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2209,8 +2390,12 @@ declare const Heading$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -2218,7 +2403,7 @@ declare const Heading$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Span$1: ComponentDefinition<{}, {
     readonly verticalAlign: {
         readonly kind: Kind<"sub" | "baseline" | "super", "sub" | "baseline" | "super">;
@@ -2282,8 +2467,11 @@ declare const Span$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2345,8 +2533,11 @@ declare const Span$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2359,8 +2550,12 @@ declare const Span$1: ComponentDefinition<{}, {
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -2368,7 +2563,7 @@ declare const Span$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Link$1: ComponentDefinition<{
     readonly href: PropSpec<Kind<LinkInput, LinkValue>, true> & {
         default: any;
@@ -2448,8 +2643,11 @@ declare const Link$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2511,8 +2709,11 @@ declare const Link$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2525,8 +2726,12 @@ declare const Link$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -2534,7 +2739,7 @@ declare const Link$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly ["color", "textDecoration", "backgroundColor"]>;
 declare const Button$1: ComponentDefinition<{
     readonly href: PropSpec<Kind<LinkInput, LinkValue>, true> & {
         default: any;
@@ -2668,11 +2873,19 @@ declare const Button$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -2731,8 +2944,11 @@ declare const Button$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2810,8 +3026,11 @@ declare const Button$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -2824,8 +3043,12 @@ declare const Button$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -2833,7 +3056,7 @@ declare const Button$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly ["color", "backgroundColor"]>;
 declare const Image$1: ComponentDefinition<{
     readonly src: PropSpec<Kind<AssetInput, Asset>, true> & {
         default: any;
@@ -2948,18 +3171,26 @@ declare const Image$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Divider$1: ComponentDefinition<{}, {
     readonly borderTop: {
         readonly kind: Kind<string | BorderSideInput, BorderSide>;
@@ -2997,13 +3228,13 @@ declare const Divider$1: ComponentDefinition<{}, {
             readonly web: Support;
         };
     };
-}>;
-declare const LineBreak$1: ComponentDefinition<{}, {}>;
+}, readonly []>;
+declare const LineBreak$1: ComponentDefinition<{}, {}, readonly []>;
 declare const MergeTag$1: ComponentDefinition<{
     readonly name: PropSpec<Kind<string, string>, true> & {
         default: any;
     };
-}, {}>;
+}, {}, readonly []>;
 declare const List$1: ComponentDefinition<{
     readonly type: PropSpec<Kind<"number" | "bullet", "number" | "bullet">, boolean> & {
         default: "bullet";
@@ -3178,8 +3409,11 @@ declare const List$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3257,8 +3491,11 @@ declare const List$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3266,7 +3503,7 @@ declare const List$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const ListItem$1: ComponentDefinition<{
     dir: PropSpec<Kind<"ltr" | "rtl" | "auto", "ltr" | "rtl" | "auto">, false> & {
         default: undefined;
@@ -3324,8 +3561,11 @@ declare const ListItem$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3403,8 +3643,11 @@ declare const ListItem$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3417,8 +3660,12 @@ declare const ListItem$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -3426,7 +3673,7 @@ declare const ListItem$1: ComponentDefinition<{
             };
         };
     };
-}, "color" | "fontFamily" | "fontWeight" | "lineHeight" | "fontSize" | "fontStyle" | "letterSpacing" | "textAlign" | "textTransform" | "textDecoration">>;
+}, "color" | "fontFamily" | "fontWeight" | "lineHeight" | "fontSize" | "fontStyle" | "letterSpacing" | "textAlign" | "textTransform" | "textDecoration">, readonly []>;
 declare const Table$1: ComponentDefinition<{}, {
     readonly flex: {
         kind: Kind<number | "none", number | "none">;
@@ -3589,8 +3836,11 @@ declare const Table$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3668,8 +3918,11 @@ declare const Table$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3677,7 +3930,7 @@ declare const Table$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const TableRow$1: ComponentDefinition<{
     readonly header: PropSpec<Kind<boolean, boolean>, boolean> & {
         default: false;
@@ -3750,8 +4003,11 @@ declare const TableRow$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3845,8 +4101,11 @@ declare const TableRow$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -3854,7 +4113,7 @@ declare const TableRow$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const TableCell$1: ComponentDefinition<{
     readonly dir: PropSpec<Kind<"ltr" | "rtl" | "auto", "ltr" | "rtl" | "auto">, false> & {
         default: undefined;
@@ -3982,8 +4241,11 @@ declare const TableCell$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4061,8 +4323,11 @@ declare const TableCell$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4075,8 +4340,12 @@ declare const TableCell$1: ComponentDefinition<{
         label: string;
         support: {
             email: {
-                level: "full";
+                level: "partial";
+                values: string[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
+                clients: ("gmail-app-other" | "protonmail" | "orange" | "sfr")[];
             };
             web: {
                 level: "full";
@@ -4084,7 +4353,7 @@ declare const TableCell$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Video$1: ComponentDefinition<{
     readonly src: PropSpec<Kind<string, string>, true> & {
         default: any;
@@ -4141,7 +4410,7 @@ declare const Video$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 /**
  * Markup no component says (the builder's HTML block), written as it is. A PDF and an image can't draw markup: they
  * draw its plain text, and say so.
@@ -4153,7 +4422,7 @@ declare const Html$1: ComponentDefinition<{
     readonly text: PropSpec<Kind<string, string>, boolean> & {
         default: any;
     };
-}, {}>;
+}, {}, readonly []>;
 
 declare const Social$1: ComponentDefinition<{
     readonly icons: PropSpec<Kind<{
@@ -4200,7 +4469,7 @@ declare const Social$1: ComponentDefinition<{
         readonly description: "Where the icons sit across the line.";
         readonly support: Partial<Record<Target, Support | readonly Support[]>>;
     };
-}>;
+}, readonly []>;
 declare const Menu$1: ComponentDefinition<{
     readonly items: PropSpec<Kind<{
         readonly text: string;
@@ -4286,8 +4555,11 @@ declare const Menu$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4350,8 +4622,11 @@ declare const Menu$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4359,7 +4634,7 @@ declare const Menu$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 
 declare const Grid$1: ComponentDefinition<{
     readonly columns: PropSpec<Kind<number, number>, boolean> & {
@@ -4537,11 +4812,19 @@ declare const Grid$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -4617,8 +4900,11 @@ declare const Grid$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4696,8 +4982,11 @@ declare const Grid$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4705,7 +4994,7 @@ declare const Grid$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 /**
  * A Layer's children over each other, each in its whole box (as CSS grid places children in one cell): an image with
  * words on it. On a page any children go; an email draws one shape of it, an Image as wide as the Layer with one child
@@ -4845,11 +5134,19 @@ declare const Layer$1: ComponentDefinition<{}, {
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
@@ -4908,8 +5205,11 @@ declare const Layer$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4987,8 +5287,11 @@ declare const Layer$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -4996,7 +5299,7 @@ declare const Layer$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Document$1: ComponentDefinition<{
     readonly title: PropSpec<Kind<string, string>, false> & {
         default: undefined;
@@ -5123,8 +5426,11 @@ declare const Document$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5202,8 +5508,11 @@ declare const Document$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5211,7 +5520,7 @@ declare const Document$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const DocumentPage: ComponentDefinition<{}, {
     gap: {
         kind: Kind<LengthInput<"px">, number>;
@@ -5311,8 +5620,11 @@ declare const DocumentPage: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5390,8 +5702,11 @@ declare const DocumentPage: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5399,8 +5714,8 @@ declare const DocumentPage: ComponentDefinition<{}, {
             };
         };
     };
-}>;
-declare const PageBreak$1: ComponentDefinition<{}, {}>;
+}, readonly []>;
+declare const PageBreak$1: ComponentDefinition<{}, {}, readonly []>;
 declare const PageHeader$1: ComponentDefinition<{}, {
     gap: {
         kind: Kind<LengthInput<"px">, number>;
@@ -5529,8 +5844,11 @@ declare const PageHeader$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5608,8 +5926,11 @@ declare const PageHeader$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5617,7 +5938,7 @@ declare const PageHeader$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const PageFooter$1: ComponentDefinition<{}, {
     gap: {
         kind: Kind<LengthInput<"px">, number>;
@@ -5746,8 +6067,11 @@ declare const PageFooter$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5825,8 +6149,11 @@ declare const PageFooter$1: ComponentDefinition<{}, {
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -5834,12 +6161,12 @@ declare const PageFooter$1: ComponentDefinition<{}, {
             };
         };
     };
-}>;
+}, readonly []>;
 declare const PageNumber$1: ComponentDefinition<{
     readonly total: PropSpec<Kind<boolean, boolean>, boolean> & {
         default: false;
     };
-}, {}>;
+}, {}, readonly []>;
 
 declare const Canvas$1: ComponentDefinition<{
     readonly title: PropSpec<Kind<string, string>, false> & {
@@ -5989,8 +6316,11 @@ declare const Canvas$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
+                level: "outlook";
+                values: number[];
+                shows: string;
                 source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -6068,8 +6398,11 @@ declare const Canvas$1: ComponentDefinition<{
         inherited: true;
         support: {
             email: {
-                level: "full";
-                source: "assumed";
+                level: "outlook";
+                values: string[];
+                shows: string;
+                source: "caniemail";
+                feature: string;
             };
             web: {
                 level: "full";
@@ -6077,7 +6410,7 @@ declare const Canvas$1: ComponentDefinition<{
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Svg$1: ComponentDefinition<{
     readonly width: PropSpec<Kind<number, number>, true> & {
         default: undefined;
@@ -6155,18 +6488,26 @@ declare const Svg$1: ComponentDefinition<{
         kind: Kind<RadiusInput, Radius>;
         label: string;
         support: {
-            email: {
+            email: ({
                 level: "outlook";
                 shows: string;
                 source: "caniemail";
-            };
+                feature: string;
+                clients?: undefined;
+            } | {
+                level: "partial";
+                shows: string;
+                source: "caniemail";
+                feature: string;
+                clients: ("gmx" | "web-de" | "orange")[];
+            })[];
             web: {
                 level: "full";
                 source: SupportSource;
             };
         };
     };
-}>;
+}, readonly []>;
 declare const Rect$1: ComponentDefinition<{
     readonly x: PropSpec<Kind<number, number>, false> & {
         default: 0;
@@ -6214,7 +6555,7 @@ declare const Rect$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 declare const Circle$1: ComponentDefinition<{
     readonly cx: PropSpec<Kind<number, number>, false> & {
         default: 0;
@@ -6256,7 +6597,7 @@ declare const Circle$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 declare const Ellipse$1: ComponentDefinition<{
     readonly cx: PropSpec<Kind<number, number>, false> & {
         default: 0;
@@ -6301,7 +6642,7 @@ declare const Ellipse$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 declare const Line$1: ComponentDefinition<{
     readonly x1: PropSpec<Kind<number, number>, false> & {
         default: 0;
@@ -6346,7 +6687,7 @@ declare const Line$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 declare const Polygon$1: ComponentDefinition<{
     readonly points: PropSpec<Kind<string, string>, true> & {
         default: any;
@@ -6382,7 +6723,7 @@ declare const Polygon$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 declare const Path$1: ComponentDefinition<{
     readonly d: PropSpec<Kind<string, string>, true> & {
         default: any;
@@ -6418,7 +6759,7 @@ declare const Path$1: ComponentDefinition<{
             web: Support;
         };
     };
-}>;
+}, readonly []>;
 /** Props that always have a value: required ones, and ones with a default (see `prop`). */
 type RequiredOrDefaulted<P extends PropSpecs> = {
     [K in keyof P]: Exclude<P[K]["required"], undefined> extends true ? K : [P[K]["default"]] extends [undefined] ? never : K;
@@ -6437,6 +6778,8 @@ interface ExpandContext {
     style: Record<string, Json>;
     /** Whether the template has phones (an Email or a Page): what's hidden on phones is only hidden there. */
     responsive: boolean;
+    /** A problem found while expanding that doesn't stop it (a warning or a note), said once at the expansion's place. */
+    report(diagnostic: Diagnostic): void;
 }
 interface CustomDefinition<P extends PropSpecs = PropSpecs> extends ComponentDefinition<P, typeof placementStyle> {
     custom: true;
@@ -6507,12 +6850,35 @@ interface ResolvedNode {
 }
 
 /**
- * What the email components get: one props object per node, with
- * what every component needs worked out (its styles, its phone text styles, its
- * text), and `render()` for its children, so components don't import each
- * other.
+ * Where each block of an Email is in its HTML, for render()'s `blockMap`: a tool that previews the email (marking each
+ * block, then reading where each one is drawn) finds the template path of what it draws.
+ *
+ * While the email is written, each node's markup gets a mark just after the tag name of its outermost element (the
+ * first one every client but classic Outlook reads, else the first in Outlook's own markup): two Unicode
+ * noncharacters around the node's number. Once it's written the marks are taken out, so the HTML is the same bytes as
+ * without them, and where each one was is its block's offset. A template whose own text holds those noncharacters
+ * would be misread: it's written again with another pair.
  */
 
+/** The format of render()'s `blocks`, kept by hand: raised only when the format changes (not the package's version). */
+declare const BLOCK_MAP_VERSION = 1;
+interface BlockMapEntry {
+    /** The block's place in the template (`root.children[2]`), as diagnostics give it. */
+    path: string;
+    /** Its `id`, where it has one. */
+    nodeId?: string;
+    /** The UTF-8 byte offset in `html` just after its outermost element's tag name (`<table`, `<div`). */
+    offset: number;
+}
+interface BlockMap {
+    /** `BLOCK_MAP_VERSION`. */
+    version: number;
+    /** What `offset` counts: bytes of the HTML in UTF-8. */
+    unit: "utf8";
+    /** Each block written as an element, in the order of their offsets (blocks at one offset: the outer first). */
+    entries: BlockMapEntry[];
+}
+
 interface EmailOptions {
     /** How a merge tag is written (default `{{name}}`): into the HTML as it is, the name in it escaped. */
     mergeTag?: (name: string) => string;
@@ -6535,9 +6901,23 @@ interface PageOptions {
     classPrefix?: string;
 }
 
-interface RenderOptions extends PageOptions, EmailOptions {
+interface EmailClientsOption {
+    /**
+     * For an Email, the email clients to report problems for (default: `DEFAULT_EMAIL_CLIENTS`, the ones most email is
+     * read in: classic Outlook, Outlook.com, Outlook for Mac, the Outlook and Gmail apps, Gmail, Apple Mail, Yahoo, AOL
+     * and Samsung Email). A problem about other clients is left out; `[]` leaves out every email client problem, not the
+     * problems of the email itself.
+     */
+    emailClients?: readonly EmailClient[];
+}
+interface RenderOptions extends PageOptions, EmailOptions, EmailClientsOption {
     /** The HTML indented, for reading it; for sending, the compact HTML (white space may change how some email clients show it). */
     pretty?: boolean;
+    /**
+     * For tools that preview an Email: also return `blocks`, where each block is in `html` (its template path and the
+     * UTF-8 byte offset just after its outermost element's tag name). The HTML is the same either way. Not with `pretty`.
+     */
+    blockMap?: boolean;
 }
 interface RenderResult {
     /** The whole document, from `<!DOCTYPE html>`. */
@@ -6550,6 +6930,8 @@ interface RenderResult {
     bodyStyle: string;
     /** Warnings and notes (errors are thrown). */
     diagnostics: Diagnostic[];
+    /** With `blockMap`, for an Email: where each block is in `html`. */
+    blocks?: BlockMap;
 }
 
 /**
@@ -6558,26 +6940,41 @@ interface RenderResult {
  */
 
 /** The props of a primitive: its semantic props, plus its style, phone and hover styles, and children. */
-type PrimitiveProps<D> = D extends ComponentDefinition<infer P, infer S> ? PropsInput<P> & Extras<StyleInput<S>> : never;
+type PrimitiveProps<D> = D extends ComponentDefinition<infer P, infer S, any> ? PropsInput<P> & Extras<StyleInput<S>, ConditionStyles<D>> : never;
+/** The styles that may be set on phones: those whose definition says `mobile: true`. */
+type MobileKeys<S extends StyleSpecs> = {
+    [K in keyof S]-?: S[K] extends {
+        mobile: true;
+    } ? K : never;
+}[keyof S];
+/** A condition's block of the styles `K`; where it takes none, nothing can be set in it. */
+type Block<S extends StyleSpecs, K> = [K] extends [never] ? never : {
+    [Q in K & keyof S]?: InputOf<S[Q]["kind"]>;
+};
+/**
+ * A component's condition blocks in `style`: `mobile` with the styles it takes on phones, `hover` with its hover
+ * styles (from its definition's list). Where a component takes none, the block is `never`: no value but `undefined`.
+ */
+type ConditionStyles<D> = D extends ComponentDefinition<any, infer S, infer H> ? {
+    mobile?: Block<S, MobileKeys<S>>;
+    hover?: Block<S, H[number]>;
+} : never;
 /** What every primitive takes beside its own props. */
-interface Extras<Style> {
+interface Extras<Style, Conditions> {
     /** Stable id; one is assigned in document order when it's left out. */
     id?: string;
-    style?: Style;
-    /** Style on phones (in an Email or Page). */
-    mobile?: Style;
-    /** Style while the pointer is over it, where the component has one. */
-    hover?: Style;
+    /** Its style, and inside it its styles on phones (`mobile`) and on hover (`hover`), where it takes them. */
+    style?: Style & Conditions;
     hidden?: {
         mobile?: boolean;
         desktop?: boolean;
     };
     children?: React.ReactNode;
 }
-type StyleOf<D> = D extends ComponentDefinition<any, infer S> ? {
+type StyleOf<D> = D extends ComponentDefinition<any, infer S, any> ? {
     [K in keyof S]?: InputOf<S[K]["kind"]>;
 } : never;
-type PropsOf<D, Style> = D extends ComponentDefinition<infer P, any> ? PropsInput<P> & Extras<Style> : never;
+type PropsOf<D, Style> = D extends ComponentDefinition<infer P, any, any> ? PropsInput<P> & Extras<Style, ConditionStyles<D>> : never;
 declare const Email: React.FC<EmailProps>;
 declare const Page: React.FC<PageProps>;
 declare const Section: React.FC<SectionProps>;
@@ -6865,6 +7262,8 @@ declare function component<const P extends PropSpecs>(spec: ComponentSpec<P>): C
  * template has errors (see `validate()`).
  */
 declare function render(element: React.ReactElement, options?: RenderOptions): Promise<RenderResult>;
+/** `validate()`'s and `prepare()`'s options: `emailClients`, the email clients to report an Email's problems for. */
+type ValidateOptions = EmailClientsOption;
 interface ValidationResult {
     /** No errors (there may be warnings and notes). */
     valid: boolean;
@@ -6878,9 +7277,10 @@ interface ValidationResult {
  * own checks, layout, and what the output can't do as asked (`email/…`).
  * Warnings and notes leave it valid. Only what needs the written output is
  * left to `render()`: an email's size against Gmail's limits (`email/size`,
- * `email/style-size`).
+ * `email/style-size`). An Email's problems with email clients name them
+ * (`clients`), with what to change (`fix`); `emailClients` picks the clients.
  */
-declare function validate(element: React.ReactElement): ValidationResult;
+declare function validate(element: React.ReactElement, options?: ValidateOptions): ValidationResult;
 /**
  * A template laid out, as text: each block on a line under what holds it, with its width on desktop and what it
  * shows (a heading's words, a link's URL, an image's alt text), and whether a Row stacks on phones. To check a
@@ -6893,10 +7293,10 @@ declare function outline(element: React.ReactElement): string;
  * errors. The tree is the writers' input, not a format to store: it changes with Elements, and `layout` says which
  * format it's in (a writer refuses one it doesn't read).
  */
-declare function prepare(element: React.ReactElement): {
+declare function prepare(element: React.ReactElement, options?: ValidateOptions): {
     root: ResolvedNode | null;
     diagnostics: Diagnostic[];
     layout: number;
 };
 
-export { Button, type ButtonProps, Canvas, type CanvasProps, Circle, type CircleProps, Column, type ColumnProps, type ComponentSpec, type CustomComponent, type CustomProps, type Diagnostic, Divider, type DividerProps, Document, type DocumentPageProps, type DocumentProps, ElementsError, Ellipse, type EllipseProps, Email, type EmailProps, Grid, type GridProps, Heading, type HeadingProps, Html, type HtmlProps, Image, type ImageProps, Layer, type LayerProps, Line, LineBreak, type LineBreakProps, type LineProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, MergeTag, type MergeTagProps, Page, PageBreak, type PageBreakProps, PageFooter, type PageFooterProps, PageHeader, type PageHeaderProps, PageNumber, type PageNumberProps, type PageProps, type ParagraphProps, Path, type PathProps, Polygon, type PolygonProps, type PrimitiveProps, Rect, type RectProps, type RenderOptions, type RenderResult, type ResolvedNode, Row, type RowProps, Section, type SectionProps, type Severity, Social, type SocialProps, Span, type SpanProps, Svg, type SvgProps, Table, TableCell, type TableCellProps, type TableProps, TableRow, type TableRowProps, Text, type TextProps, type ValidationResult, Video, type VideoProps, component, formatDiagnostics, outline, prepare, prop, render, validate };
+export { BLOCK_MAP_VERSION, type BlockMap, type BlockMapEntry, Button, type ButtonProps, Canvas, type CanvasProps, Circle, type CircleProps, Column, type ColumnProps, type ComponentSpec, type CustomComponent, type CustomProps, DEFAULT_EMAIL_CLIENTS, type Diagnostic, Divider, type DividerProps, Document, type DocumentPageProps, type DocumentProps, EMAIL_CLIENTS, ElementsError, Ellipse, type EllipseProps, Email, type EmailClient, type EmailClientInfo, type EmailClientMeasurement, type EmailProps, Grid, type GridProps, Heading, type HeadingProps, Html, type HtmlProps, Image, type ImageProps, Layer, type LayerProps, Line, LineBreak, type LineBreakProps, type LineProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, MergeTag, type MergeTagProps, Page, PageBreak, type PageBreakProps, PageFooter, type PageFooterProps, PageHeader, type PageHeaderProps, PageNumber, type PageNumberProps, type PageProps, type ParagraphProps, Path, type PathProps, Polygon, type PolygonProps, type PrimitiveProps, Rect, type RectProps, type RenderOptions, type RenderResult, type ResolvedNode, Row, type RowProps, Section, type SectionProps, type Severity, Social, type SocialProps, Span, type SpanProps, Svg, type SvgProps, Table, TableCell, type TableCellProps, type TableProps, TableRow, type TableRowProps, Text, type TextProps, type ValidateOptions, type ValidationResult, Video, type VideoProps, component, formatDiagnostics, outline, prepare, prop, render, validate };