@hyper-elements/react 0.3.0 → 0.3.1

package/dist/primitives.js

@@ -9,21 +9,26 @@ var Diagnostics = class {
   constructor() {
     this.list = [];
   }
-  add(code, severity, message, path, nodeId) {
-    this.list.push(nodeId === void 0 ? { code, severity, message, path } : { code, severity, message, path, nodeId });
+  add(code, severity, message, path, nodeId, extra = {}) {
+    const d = { code, severity, message, path };
+    if (nodeId !== void 0) d.nodeId = nodeId;
+    if (extra.clients) d.clients = [...extra.clients];
+    if (extra.fix) d.fix = extra.fix;
+    if (extra.see) d.see = extra.see;
+    this.list.push(d);
   }
   error(code, message, path, nodeId) {
     this.add(code, "error", message, path, nodeId);
   }
-  warning(code, message, path, nodeId) {
-    this.add(code, "warning", message, path, nodeId);
+  warning(code, message, path, nodeId, extra) {
+    this.add(code, "warning", message, path, nodeId, extra);
   }
   get hasErrors() {
     return this.list.some((d) => d.severity === "error");
   }
 };
 function formatDiagnostics(diagnostics) {
-  return diagnostics.map((d) => `${d.severity} ${d.code} at ${d.path}: ${d.message}`).join("\n");
+  return diagnostics.map((d) => `${d.severity} ${d.code} at ${d.path}: ${d.message}${d.clients ? ` [${d.clients.join(", ")}]` : ""}${d.fix ? ` Fix: ${d.fix}` : ""}${d.see ? ` See: ${d.see}` : ""}`).join("\n");
 }
 var ElementsError = class extends Error {
   constructor(diagnostics) {
@@ -34,6 +39,64 @@ ${formatDiagnostics(errors)}`);
     this.diagnostics = diagnostics;
   }
 };
+var captured = (against, wordsWithin4px, lineBreaks) => ({ elements: "0.3.0", against, captured: "2026-11-08", wordsWithin4px, lineBreaks });
+var tables = (name) => ({ name, widths: {}, dark: false, approximate: true, measured: null });
+var EMAIL_CLIENTS = {
+  outlook: { name: "Classic Outlook", widths: { desktop: 820 }, dark: false, approximate: true, measured: captured("Outlook 16.0.20527 for Windows, 96 DPI", 0.85, 0.983) },
+  "outlook-com": { name: "Outlook.com and new Outlook", widths: { desktop: 820 }, dark: false, approximate: false, measured: captured("Outlook on the web", 1, 1) },
+  "outlook-mac": tables("Outlook for Mac"),
+  "outlook-app": tables("Outlook app (iOS and Android)"),
+  gmail: { name: "Gmail", widths: { desktop: 820 }, dark: false, approximate: false, measured: captured("Gmail on the web", 1, 1) },
+  "gmail-app": { name: "Gmail app", widths: { phone: 375 }, dark: false, approximate: true, measured: null },
+  "gmail-app-other": { name: "Gmail app, another account", widths: { phone: 375 }, dark: false, approximate: true, measured: null },
+  "apple-mail": { name: "Apple Mail", widths: { desktop: 820 }, dark: true, approximate: false, measured: captured("Mail 16 on macOS 26", 0.999, 0.999) },
+  yahoo: tables("Yahoo Mail"),
+  aol: tables("AOL Mail"),
+  "samsung-email": tables("Samsung Email"),
+  thunderbird: tables("Thunderbird"),
+  protonmail: tables("Proton Mail"),
+  fastmail: tables("Fastmail"),
+  hey: tables("HEY"),
+  gmx: tables("GMX"),
+  "web-de": tables("WEB.DE"),
+  orange: tables("Orange"),
+  sfr: tables("SFR"),
+  laposte: tables("La Poste"),
+  "free-fr": tables("Free"),
+  "t-online-de": tables("T-Online"),
+  "mail-ru": tables("Mail.ru"),
+  ionos: tables("IONOS (1&1)"),
+  "wp-pl": tables("WP Poczta"),
+  rainloop: tables("RainLoop")
+};
+var DEFAULT_EMAIL_CLIENTS = ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "apple-mail", "yahoo", "aol", "samsung-email"];
+var caniemail = (feature) => `https://www.caniemail.com/features/${feature}/`;
+function checkEmailClients(clients) {
+  if (clients === void 0) return;
+  const unknown = Array.isArray(clients) ? clients.filter((c) => !Object.prototype.hasOwnProperty.call(EMAIL_CLIENTS, c)) : [clients];
+  if (unknown.length) throw new TypeError(`[Elements] emailClients takes a list of ${Object.keys(EMAIL_CLIENTS).join(", ")}, not ${unknown.map((c) => JSON.stringify(c)).join(", ")}`);
+}
+function forEmailClients(diagnostics, selection = DEFAULT_EMAIL_CLIENTS) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const d of diagnostics) {
+    if (!d.clients) {
+      out.push(d);
+      continue;
+    }
+    const clients = d.clients.filter((c) => selection.includes(c));
+    if (!clients.length) continue;
+    const key = JSON.stringify([d.code, d.path, d.severity, d.message]);
+    const same42 = seen.get(key);
+    if (same42) same42.clients = [.../* @__PURE__ */ new Set([...same42.clients, ...clients])];
+    else {
+      const kept = { ...d, clients };
+      seen.set(key, kept);
+      out.push(kept);
+    }
+  }
+  return out;
+}
 var ok = (value) => ({ ok: true, value });
 var fail = (message) => ({ ok: false, message });
 var show = (input) => {
@@ -619,6 +682,26 @@ function attributes() {
     jsonSchema: () => ({ type: "object", additionalProperties: { type: "string" } })
   });
 }
+var MIN_PHONE_WIDTH = 240;
+function breakpoints() {
+  const accepts = `{ mobile }: the phone width in px (from ${MIN_PHONE_WIDTH})`;
+  return kind({
+    name: "breakpoints",
+    editor: "number",
+    accepts,
+    parse(input) {
+      if (!isObject(input)) return fail(`expected ${accepts}, not ${show(input)}`);
+      const unknown = Object.keys(input).find((key) => key !== "mobile");
+      if (unknown !== void 0) return fail(`${show(unknown)} isn't a breakpoint a Page has: it has mobile`);
+      const { mobile } = input;
+      if (mobile === void 0) return ok({});
+      if (typeof mobile !== "number" || !Number.isInteger(mobile) || mobile < MIN_PHONE_WIDTH) return fail(`mobile is the widest window its phone styles apply to, an integer from ${MIN_PHONE_WIDTH}, not ${show(mobile)}`);
+      return ok({ mobile });
+    },
+    empty: (value) => value.mobile === void 0,
+    jsonSchema: () => ({ type: "object", properties: { mobile: { type: "integer", minimum: MIN_PHONE_WIDTH } }, additionalProperties: false })
+  });
+}
 function linkParts(value) {
   return typeof value === "string" ? { href: value } : value;
 }
@@ -632,6 +715,54 @@ function defineComponent(definition) {
 function prop(kind2, options) {
   return { kind: kind2, ...options };
 }
+var MOBILE = {
+  name: "mobile",
+  on: "on phones",
+  for: "for phones",
+  roots: (root) => !!root?.responsive,
+  notAllowed: { code: "mobile/not-supported", message: "Phone styles are for an Email or a Page, which have a phone width" },
+  sheet: { media: "phone", selector: "&" },
+  allows: (spec) => !!spec.mobile,
+  support: { web: { level: "full", source: "writer" }, email: { level: "full", source: "writer" } },
+  styles: {
+    // The email's phone text styles are rules that override a size; "normal" isn't one.
+    lineHeight: { email: { level: "none", values: ["normal"], shows: "the line height it has on desktop", source: "writer" } }
+  },
+  outlookApplies: false,
+  hiddenKey: "mobile"
+};
+var HOVER = {
+  name: "hover",
+  on: "on hover",
+  for: "for hover",
+  // Keyboard focus gets the same styles as the pointer: a link or button reached by Tab shows its hover colors.
+  // A box around the link (an email Button's cell, its background) takes them while the link in it has focus.
+  sheet: { media: "all", selector: "&:hover,&:focus-visible", within: "&:hover,&:focus-within", level: "hover" },
+  allows: (_, key, definition) => !!definition.hover?.includes(key),
+  support: {
+    web: { level: "full", source: "css" },
+    // On type selectors only in Outlook.com and Outlook for Mac (Elements' are classes); the phone apps' results don't
+    // matter, as nothing hovers there.
+    email: {
+      level: "partial",
+      shows: "no change (where it shows, keyboard focus gets it too)",
+      source: "caniemail",
+      feature: "css-pseudo-class-hover",
+      clients: ["outlook", "outlook-com", "outlook-mac", "gmx", "web-de", "sfr", "laposte", "mail-ru"]
+    }
+  },
+  paged: (node, where) => `A hover isn't possible in ${where}: nothing points at it. The ${node.type} shows its own colors`,
+  outlookApplies: false
+};
+var CONDITIONS = [MOBILE, HOVER];
+var CONDITION_NAMES = new Set(CONDITIONS.map((condition) => condition.name));
+function blockOf(node, condition) {
+  const block = node[condition.name];
+  return block && Object.keys(block).length ? block : void 0;
+}
+function shownAnywhere(node) {
+  return !(node.hidden?.mobile && node.hidden?.desktop);
+}
 var writer = { level: "full", source: "writer" };
 var css = { level: "full", source: "css" };
 var textStyle = {
@@ -640,7 +771,12 @@ var textStyle = {
   fontFamily: { kind: fontFamily(), label: "Font", inherited: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
   // Word rounds sizes to half points (13px is 10pt): a fraction of a px.
   fontSize: { kind: length(["px"], { min: 1 }), label: "Font size", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
-  fontWeight: { kind: fontWeight(), label: "Font weight", inherited: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
+  fontWeight: {
+    kind: fontWeight(),
+    label: "Font weight",
+    inherited: true,
+    support: { email: { level: "outlook", values: [100, 200, 300, 500], shows: "normal weight: Word draws only normal and bold (600 and over)", source: "caniemail", feature: "css-font-weight" }, web: css }
+  },
   fontStyle: { kind: enumOf(["normal", "italic"]), label: "Font style", inherited: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
   // Written in px with mso-line-height-rule: exactly, which Word keeps (it drops unitless ones).
   lineHeight: { kind: lineHeight(), label: "Line height", inherited: true, mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
@@ -652,8 +788,21 @@ var textStyle = {
     support: { email: { level: "outlook", shows: "normal spacing: Word keeps letter spacing but doesn't draw it", source: "outlook-captures" }, web: css }
   },
   textAlign: { kind: enumOf(["left", "center", "right", "justify"]), label: "Alignment", inherited: true, mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
-  textTransform: { kind: enumOf(["none", "uppercase", "lowercase", "capitalize"]), label: "Letter case", inherited: true, support: { email: { level: "full", source: "assumed" }, web: css } },
-  textDecoration: { kind: enumOf(["none", "underline", "line-through"]), label: "Decoration", support: { email: { level: "full", source: "caniemail" }, web: css } }
+  textTransform: {
+    kind: enumOf(["none", "uppercase", "lowercase", "capitalize"]),
+    label: "Letter case",
+    inherited: true,
+    support: { email: { level: "outlook", values: ["lowercase"], shows: "the text as written: Word doesn't lowercase it", source: "caniemail", feature: "css-text-transform" }, web: css }
+  },
+  textDecoration: {
+    kind: enumOf(["none", "underline", "line-through"]),
+    label: "Decoration",
+    support: {
+      // Removed, so "none" leaves a link the client's own underline: said only where a line is asked for.
+      email: { level: "partial", values: ["underline", "line-through"], shows: "no line: the client removes it", source: "caniemail", feature: "css-text-decoration", clients: ["gmail-app-other", "protonmail", "orange", "sfr"] },
+      web: css
+    }
+  }
 };
 var inheritedTextStyle = (({ textDecoration: _, ...rest }) => rest)(textStyle);
 var boxStyle = {
@@ -666,7 +815,17 @@ var boxStyle = {
   padding: { kind: insets(), label: "Padding", mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } },
   backgroundColor: { kind: color(), label: "Background color", support: { email: writer, web: css } },
   border: { kind: border(), label: "Border", mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
-  borderRadius: { kind: radius(), label: "Corner radius", support: { email: { level: "outlook", shows: "square corners", source: "caniemail" }, web: css } },
+  borderRadius: {
+    kind: radius(),
+    label: "Corner radius",
+    support: {
+      email: [
+        { level: "outlook", shows: "square corners", source: "caniemail", feature: "css-border-radius" },
+        { level: "partial", shows: "square corners", source: "caniemail", feature: "css-border-radius", clients: ["gmx", "web-de", "orange"] }
+      ],
+      web: css
+    }
+  },
   overflow: {
     kind: enumOf(["visible", "hidden"]),
     label: "Overflow",
@@ -874,6 +1033,15 @@ var Grid = defineComponent({
   },
   children: { categories: ["layout", "block"] },
   sizing: "stretch",
+  // Stacked on phones, every two of its children are its phone gap apart: there are no rows for a row gap.
+  conditionSupport: {
+    mobile: {
+      rowGap: {
+        web: { level: "none", when: (_, node) => node.props.stackOnMobile !== false, shows: "its phone gap between every two children", source: "writer" },
+        email: { level: "none", when: (_, node) => node.props.stackOnMobile !== false, shows: "its phone gap between every two children", source: "writer" }
+      }
+    }
+  },
   targets: { email: {}, web: {} },
   editor: {
     groups: [
@@ -886,7 +1054,7 @@ var Grid = defineComponent({
 var Layer = defineComponent({
   type: "Layer",
   label: "Layer",
-  description: "Its children over each other, in one box as tall as the tallest: an image with words on it. In an email, an Image with one child over it.",
+  description: "Its children over each other, in one box as tall as the tallest: words on an image (a background image, its first child). In an email, an Image with one child over it.",
   categories: ["layout", "block"],
   props: {},
   style: {
@@ -918,13 +1086,27 @@ var Layer = defineComponent({
   }
 });
 var WRITTEN3 = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+var NO_WEB_FONTS = ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "protonmail", "fastmail", "gmx", "web-de", "orange", "sfr", "laposte", "mail-ru", "ionos"];
 var ROOT_PROPS = {
   title: prop(text(), { support: WRITTEN3, label: "Title", description: "The document's title (shown in a browser tab, and by some email clients)." }),
-  lang: prop(text({ maxLength: 35 }), { support: WRITTEN3, label: "Language", description: 'Its language, as a BCP 47 tag ("en", "ar").' }),
-  dir: prop(enumOf(["ltr", "rtl", "auto"]), { support: WRITTEN3, label: "Text direction" }),
+  lang: prop(text({ maxLength: 35 }), {
+    support: {
+      ...WRITTEN3,
+      email: { level: "partial", shows: "no language: the client removes it, and a screen reader reads the email in its own", source: "caniemail", feature: "html-lang", clients: ["hey", "gmx", "web-de", "orange", "ionos"] }
+    },
+    label: "Language",
+    description: 'Its language, as a BCP 47 tag ("en", "ar").'
+  }),
+  dir: prop(enumOf(["ltr", "rtl", "auto"]), {
+    support: {
+      ...WRITTEN3,
+      email: { level: "partial", values: ["rtl", "auto"], shows: "left to right: the client removes the direction", source: "caniemail", feature: "html-dir", clients: ["gmx", "web-de"] }
+    },
+    label: "Text direction"
+  }),
   fonts: prop(fontFaces(), {
     support: {
-      email: { level: "partial", shows: "Apple Mail and iOS Mail load web fonts; Gmail and classic Outlook don't, and show the next font in each stack", source: "caniemail" },
+      email: { level: "partial", shows: "no web font loads: the next font in each stack shows", source: "caniemail", feature: "css-at-font-face", clients: NO_WEB_FONTS },
       web: { level: "full", source: "writer" }
     },
     label: "Web fonts",
@@ -1064,7 +1246,10 @@ var PageNumber = defineComponent({
   style: {},
   children: {},
   sizing: "none",
-  targets: { web: {} }
+  targets: { web: {} },
+  // A Page's or a Canvas's text has no page to number.
+  roots: ["Document"],
+  notAllowed: { code: "document/page-number", message: (root) => `A PageNumber is a page's number in a Document; this ${root} has no pages` }
 });
 function documentPages(root) {
   const pages = [];
@@ -1200,6 +1385,11 @@ var Page = defineComponent({
   props: {
     width: prop(length(["px"], { min: 200 }), { support: WRITTEN6, label: "Content width", description: "The widest the content gets.", default: 1200 }),
     description: prop(text(), { support: WRITTEN6, label: "Description", description: "The page's meta description." }),
+    breakpoints: prop(breakpoints(), {
+      support: { web: { level: "full", source: "writer" } },
+      label: "Breakpoints",
+      description: "Where its phone styles start: mobile, the widest window they apply to, in px (480 where it's not set)."
+    }),
     ...ROOT_PROPS
   },
   style: ROOT_STYLE,
@@ -1207,6 +1397,12 @@ var Page = defineComponent({
   children: { categories: ["section", "layout", "block"] },
   sizing: "none",
   responsive: true,
+  // The page writer writes the root's phone gap, not its phone text styles.
+  conditionSupport: {
+    mobile: Object.fromEntries(
+      ["fontSize", "lineHeight", "letterSpacing", "textAlign"].map((key) => [key, { web: { level: "none", shows: "its desktop value: set phone text styles on its Sections or Columns", source: "writer" } }])
+    )
+  },
   targets: { web: {} },
   editor: {
     groups: [
@@ -1450,6 +1646,7 @@ var Image = defineComponent({
   },
   children: {},
   sizing: "shrink",
+  conditionSupport: { mobile: { border: { email: { level: "none", shows: "its desktop border", source: "writer" } } } },
   targets: { email: {}, web: {} },
   editor: { groups: [{ title: "Image", paths: ["props.src", "props.alt", "style.width"] }, { title: "Box", paths: ["style.border", "style.borderRadius"] }] }
 });
@@ -1580,6 +1777,7 @@ var TableCell = defineComponent({
   },
   children: { text: true, categories: ["inline"], types: ["Image"] },
   sizing: "none",
+  conditionSupport: { mobile: { border: { email: { level: "none", shows: "its desktop border", source: "writer" } } } },
   targets: { email: {}, web: {} },
   editor: { groups: [{ title: "Cell", paths: ["props.colSpan", "style.width", "style.verticalAlign"] }, TEXT_EDITOR, { title: "Box", paths: ["style.padding", "style.backgroundColor", "style.border"] }] }
 });
@@ -1697,17 +1895,27 @@ function checkDocument(input, options) {
   const extra = Object.keys(input).filter((key) => key !== "root");
   for (const key of extra) d.error("document/unknown-key", `"${key}" isn't part of a document (root)`, key);
   const rootDefinition = isObject2(input.root) && typeof input.root.type === "string" ? registry.get(input.root.type) : void 0;
-  const context = { d, registry, used: /* @__PURE__ */ new Set(), responsive: !!rootDefinition?.responsive };
+  const context = { d, registry, used: /* @__PURE__ */ new Set(), root: rootDefinition };
   const root = input.root === void 0 ? null : readNode(input.root, "root", null, context);
   if (input.root === void 0) d.error("document/root", 'A document has a root: { type: "Email" }, "Page", \u2026', "root");
   return { document: root ? { root } : null, diagnostics: d.list };
 }
 function checkFragment(input, options) {
   const d = new Diagnostics();
-  const context = { d, registry: options.registry, idPrefix: options.idPrefix, used: new Set(options.taken), responsive: options.responsive };
+  const context = { d, registry: options.registry, idPrefix: options.idPrefix, used: new Set(options.taken), root: options.root };
   const node = readNode(input, options.path, options.parent, context);
   return { node, diagnostics: d.list };
 }
+function rootList(roots) {
+  const named = roots.map((root) => a(root).replace(/^A/, "a"));
+  return named.length > 1 ? `${named.slice(0, -1).join(", ")} or ${named[named.length - 1]}` : named[0] ?? "no root";
+}
+function rootTakes(roots, root) {
+  return !roots || !root || roots.includes(root.type);
+}
+function sharesOutput(definition, root) {
+  return Object.keys(definition.targets).some((target) => target in root.targets);
+}
 function allowedIn(parent, child) {
   const rule2 = parent.children;
   return !!rule2.types?.includes(child.type) || child.categories.some((category) => rule2.categories?.includes(category));
@@ -1733,7 +1941,29 @@ function editDistance(from, to) {
   }
   return row[to.length];
 }
+var OTHER_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "initial", "xs", "sm", "md", "lg", "xl", "2xl", "tablet", "desktop", "wide", "small", "medium", "large"]);
+function conditionHint(definition, key) {
+  const name = key.trim().replace(/^(&?:+|_+|\$|@)/, "").replace(/Style$/, "").toLowerCase();
+  const own = CUSTOM_TYPE.test(definition.type);
+  const hoverStyles = definition.hover ?? [];
+  const toHover = own ? `a template's own component takes only its place in a Row in its style: set hover styles in what it renders` : hoverStyles.length ? `hover styles go in its style's hover block, style={{ hover: { \u2026 } }} (it takes ${hoverStyles.join(", ")})` : `${a(definition.type).replace(/^A/, "a")} takes no hover styles (a Button's and a Link's colors do)`;
+  const toPhone = own ? `a template's own component takes only its place in a Row in its style: set phone styles in what it renders` : `phone styles go in its style's mobile block, style={{ mobile: { \u2026 } }}`;
+  if (name === "hover") return toHover;
+  if (name === "mobile" || name === "phone" || name === "phones" || key.trim().startsWith("@media")) return toPhone;
+  if (name === "focus" || name === "focus-visible" || name === "focusvisible" || name === "focus-within") {
+    return hoverStyles.length && !own ? `keyboard focus gets its hover styles: set them in style={{ hover: { \u2026 } }}` : `there are no focus styles; keyboard focus gets a Button's and a Link's hover styles`;
+  }
+  if (OTHER_BREAKPOINTS.has(name)) {
+    return `Elements has one breakpoint, phones: desktop styles go in style itself, phone styles in its mobile block, style={{ mobile: { \u2026 } }} (a Page sets where phones start with breakpoints={{ mobile }})`;
+  }
+  if (name === "active" || name === "pressed" || name === "press" || name === "visited" || name === "dark" || name === "light" || name === "print") {
+    return `there are no ${name} styles: Elements has phone styles (mobile) and hover styles (hover) in style`;
+  }
+  return void 0;
+}
 function unknownProp(definition, key) {
+  const condition = conditionHint(definition, key);
+  if (condition) return `${a(definition.type)} has no prop "${key}": ${condition}`;
   if (Object.prototype.hasOwnProperty.call(definition.style, key)) return `${a(definition.type)} has no prop "${key}": it's a style, style={{ ${key}: \u2026 }}`;
   const known = Object.keys(definition.props);
   const meant = nearest(key, known);
@@ -1773,6 +2003,15 @@ function readNode(input, path, parent, context) {
     d.error("children/not-allowed", placementMessage(parent, definition), path);
     return null;
   }
+  const root = context.root;
+  if (root && !rootTakes(definition.roots, root) && sharesOutput(definition, root)) {
+    const { code, message } = definition.notAllowed ?? {
+      code: "component/not-supported",
+      message: (under) => `${a(definition.type)} goes in ${rootList(definition.roots ?? [])}, not in ${a(under).replace(/^A/, "a")}`
+    };
+    d.error(code, message(root.type), path);
+    return null;
+  }
   let id;
   if (input.id !== void 0) {
     if (typeof input.id !== "string" || !ID.test(input.id)) {
@@ -1792,21 +2031,49 @@ function readNode(input, path, parent, context) {
     if (!NODE_KEYS.includes(key)) d.error("node/unknown-key", `"${key}" isn't part of a component (${NODE_KEYS.join(", ")})`, `${path}.${key}`, id);
   }
   const node = id === void 0 ? { type: definition.type } : { id, type: definition.type };
-  const props = readProps(input.props, definition, `${path}.props`, id, d);
+  const props = readProps(input.props, definition, `${path}.props`, id, d, context.root);
   if (props) node.props = props;
-  const style = readStyles(input.style, definition, definition.style, `${path}.style`, id, d, "style", () => true);
-  if (style) node.style = style;
-  if (input.mobile !== void 0) {
-    if (!context.responsive) d.error("mobile/not-supported", "Phone styles are for an Email or a Page, which have a phone width", `${path}.mobile`, id);
-    else {
-      const mobile = readStyles(input.mobile, definition, definition.style, `${path}.mobile`, id, d, "mobile", (spec) => !!spec.mobile);
-      if (mobile) node.mobile = mobile;
+  const lifted = {};
+  let styleInput = input.style;
+  if (isObject2(styleInput) && !CUSTOM_TYPE.test(definition.type)) {
+    const rest = {};
+    for (const [key, value] of Object.entries(styleInput)) {
+      if (CONDITION_NAMES.has(key)) lifted[key] = value;
+      else rest[key] = value;
     }
+    styleInput = rest;
   }
-  if (input.hover !== void 0) {
-    const allowed = new Set(definition.hover ?? []);
-    const hover = readStyles(input.hover, definition, definition.style, `${path}.hover`, id, d, "hover", (_, key) => allowed.has(key));
-    if (hover) node.hover = hover;
+  const style = readStyles(styleInput, definition, definition.style, `${path}.style`, id, d, "style", () => true, void 0, context.root);
+  if (style) node.style = style;
+  for (const condition of CONDITIONS) {
+    const inStyle = lifted[condition.name];
+    const given = input[condition.name];
+    if (inStyle !== void 0 && given !== void 0) {
+      d.error(
+        "style/twice",
+        `${condition.name} is given twice: as ${condition.name}={\u2026} and in style. Give it once, in style: style={{ ${condition.name}: { \u2026 } }}`,
+        `${path}.style.${condition.name}`,
+        id
+      );
+      continue;
+    }
+    let value = inStyle ?? given;
+    if (value === void 0) continue;
+    const at = inStyle !== void 0 ? `${path}.style.${condition.name}` : `${path}.${condition.name}`;
+    if (condition.roots && !condition.roots(context.root)) {
+      if (condition.notAllowed) d.error(condition.notAllowed.code, condition.notAllowed.message, at, id);
+      continue;
+    }
+    if (isObject2(value) && Object.keys(value).some((key) => CONDITION_NAMES.has(key))) {
+      const own = {};
+      for (const [key, inner] of Object.entries(value)) {
+        if (CONDITION_NAMES.has(key)) d.error("style/nested", `${key} can't be set inside ${condition.name}: a block holds styles, not another block`, `${at}.${key}`, id);
+        else own[key] = inner;
+      }
+      value = own;
+    }
+    const read2 = readStyles(value, definition, definition.style, at, id, d, condition.name, (spec, key) => condition.allows(spec, key, definition), condition.for, context.root);
+    if (read2) node[condition.name] = read2;
   }
   if (input.hidden !== void 0) {
     const hidden = readHidden(input.hidden, `${path}.hidden`, id, context);
@@ -1816,7 +2083,7 @@ function readNode(input, path, parent, context) {
   if (children.length) node.children = children;
   return node;
 }
-function readProps(input, definition, path, id, d) {
+function readProps(input, definition, path, id, d, root) {
   const out = {};
   if (input !== void 0 && !isObject2(input)) {
     d.error("props/invalid", "props is an object", path, id);
@@ -1829,9 +2096,14 @@ function readProps(input, definition, path, id, d) {
       d.error("prop/unknown", unknownProp(definition, key), `${path}.${key}`, id);
       continue;
     }
+    if (!rootTakes(spec.roots, root)) {
+      d.error("prop/not-supported", `${a(definition.type)}'s "${key}" is for ${rootList(spec.roots)}, not ${a(root.type).replace(/^A/, "a")}`, `${path}.${key}`, id);
+      continue;
+    }
     const parsed = spec.kind.parse(value);
-    if (parsed.ok) out[key] = parsed.value;
-    else d.error("prop/invalid", `${key}: ${parsed.message}`, `${path}.${key}`, id);
+    if (parsed.ok) {
+      if (!spec.kind.empty?.(parsed.value)) out[key] = parsed.value;
+    } else d.error("prop/invalid", `${key}: ${parsed.message}`, `${path}.${key}`, id);
   }
   for (const [key, spec] of Object.entries(definition.props)) {
     if (spec.required && !(key in out) && !(isObject2(input) && input[key] !== void 0)) {
@@ -1848,6 +2120,8 @@ var UNSUPPORTED_CSS = {
   marginRight: "use padding",
   display: "the component sets it",
   position: "use a Layer for content placed over other content",
+  backgroundImage: "put a Layer around it, its first child an Image (the Layer's height crops it to cover), the rest over it",
+  background: "backgroundColor for a color; for an image, a Layer: its first child an Image, the rest over it",
   float: "use a Row to put things side by side",
   // Names Elements used before it took CSS's.
   align: "it's alignItems now",
@@ -1861,10 +2135,12 @@ function styleHint(definition, specs, key) {
   if (Object.prototype.hasOwnProperty.call(definition.props, key)) return `: it's a prop, ${key}={\u2026}`;
   if (key === "padding" && definition.categories.includes("root")) return ": a root has no padding; put it on a Column (a card) or a Section (a band) inside it";
   if (UNSUPPORTED_CSS[key]) return `: ${UNSUPPORTED_CSS[key]}`;
+  const condition = conditionHint(definition, key);
+  if (condition) return `: ${condition}`;
   const meant = nearest(key, Object.keys(specs));
   return meant ? `: did you mean "${meant}"?` : "";
 }
-function readStyles(input, definition, specs, path, id, d, what, allowed) {
+function readStyles(input, definition, specs, path, id, d, what, allowed, forLabel, root) {
   if (input === void 0) return void 0;
   if (!isObject2(input)) {
     d.error(`${what}/invalid`, `${what} is an object of style properties`, path, id);
@@ -1878,8 +2154,12 @@ function readStyles(input, definition, specs, path, id, d, what, allowed) {
       d.error("style/unknown", seeing(`"${key}" isn't a style ${a(definition.type).replace(/^A/, "a")} takes${styleHint(definition, specs, key)}`, definition.type), `${path}.${key}`, id);
       continue;
     }
+    if (!rootTakes(spec.roots, root)) {
+      d.error("style/not-supported", `${a(definition.type)}'s "${key}" is for ${rootList(spec.roots)}, not ${a(root.type).replace(/^A/, "a")}`, `${path}.${key}`, id);
+      continue;
+    }
     if (!allowed(spec, key)) {
-      d.error(`${what}/not-allowed`, what === "mobile" ? `"${key}" can't be set for phones` : `"${key}" can't be set for hover`, `${path}.${key}`, id);
+      d.error(`${what}/not-allowed`, `"${key}" can't be set ${forLabel ?? "here"}`, `${path}.${key}`, id);
       continue;
     }
     const parsed = spec.kind.parse(value);
@@ -1890,7 +2170,7 @@ function readStyles(input, definition, specs, path, id, d, what, allowed) {
 }
 function readHidden(input, path, id, context) {
   const { d } = context;
-  if (!context.responsive) {
+  if (!context.root?.responsive) {
     d.error("hidden/not-supported", "Hiding on phones or desktops is for an Email or a Page", path, id);
     return void 0;
   }
@@ -1901,7 +2181,7 @@ function readHidden(input, path, id, context) {
   const out = {};
   if (input.mobile === true) out.mobile = true;
   if (input.desktop === true) out.desktop = true;
-  if (out.mobile && out.desktop) d.warning("hidden/everywhere", "Hidden on phones and on desktops, it never shows", path, id);
+  if (!shownAnywhere({ hidden: out })) d.warning("hidden/everywhere", "Hidden on phones and on desktops, it never shows", path, id);
   return Object.keys(out).length ? out : void 0;
 }
 function readChildren(input, definition, path, id, context) {
@@ -1934,6 +2214,22 @@ function readChildren(input, definition, path, id, context) {
   });
   return out;
 }
+var same = (a2, b) => JSON.stringify(a2) === JSON.stringify(b);
+function reportDeclared(d, node, at, key, value, declared, target, outlook = true) {
+  if (!declared) return;
+  for (const rule2 of [].concat(declared)) {
+    if (rule2.level === "full") continue;
+    if (rule2.level === "outlook" && !outlook) continue;
+    if (rule2.values && !rule2.values.some((v) => same(v, value))) continue;
+    if (rule2.when && !rule2.when(value, node)) continue;
+    const asked = typeof value === "string" ? `${key}: "${value}"` : key;
+    const clients = target === "email" ? rule2.clients ?? (rule2.level === "outlook" ? ["outlook"] : void 0) : void 0;
+    const output = clients ? "some email clients" : target === "web" ? "a page" : target;
+    const [code, severity, message] = rule2.level === "none" ? [`${target}/unsupported`, "warning", `${asked} isn't possible in ${output}: ${rule2.shows}`] : rule2.level === "partial" ? [`${target}/degraded`, "info", `${asked} on this ${node.type} in ${output}: ${rule2.shows}`] : ["email/outlook-degraded", "info", `${asked} on this ${node.type} in classic Outlook: ${rule2.shows}`];
+    const [said, as] = rule2.source === "assumed" ? ["info", `${message} (not checked)`] : [severity, message];
+    d.add(code, said, as, at, node.id, { clients, fix: rule2.fix, see: rule2.feature && caniemail(rule2.feature) });
+  }
+}
 var MAX_DEPTH = 32;
 function templatePathsOf(document, paths) {
   const places = /* @__PURE__ */ new Map();
@@ -1950,7 +2246,7 @@ function templatePathsOf(document, paths) {
     return path;
   };
 }
-function expandDocument(document, options) {
+function expandDocument(document, options, target) {
   const registry = registryOf(options);
   const d = new Diagnostics();
   const paths = /* @__PURE__ */ new WeakMap();
@@ -1962,7 +2258,20 @@ function expandDocument(document, options) {
   collect(document.root);
   const rootDefinition = registry.get(document.root.type);
   const responsive = !!rootDefinition?.responsive;
+  const unshown = (node, path) => {
+    const declared = target && registry.get(node.type)?.conditionSupport;
+    if (!declared) return;
+    for (const condition of CONDITIONS) {
+      const block = blockOf(node, condition);
+      const byStyle = declared[condition.name];
+      if (!block || !byStyle || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      for (const [key, value] of Object.entries(block)) {
+        reportDeclared(d, { type: node.type, id: node.id, props: node.props ?? {} }, `${path}.${condition.name}.${key}`, key, value, byStyle[key]?.[target], target);
+      }
+    }
+  };
   const visit = (given, path, depth, self = path) => {
+    unshown(given, path);
     const arrange = registry.get(given.type)?.arrange;
     if (!arrange) return walk(given, path, self, depth);
     const origins = /* @__PURE__ */ new Map();
@@ -1989,27 +2298,34 @@ function expandDocument(document, options) {
       return void 0;
     }
     let raw2;
+    const reported = [];
     try {
       const style = { ...definition.defaultStyle, ...node.style };
-      raw2 = definition.expand(propsWithDefaults(definition, node.props), { register: (custom) => registry.add(custom), style, responsive });
+      raw2 = definition.expand(propsWithDefaults(definition, node.props), { register: (custom) => registry.add(custom), style, responsive, report: (diagnostic) => reported.push(diagnostic) });
     } catch (error) {
       d.error("custom/render", `${node.type} failed to render: ${error instanceof Error ? error.message : String(error)}`, path, node.id);
       return void 0;
     }
+    const at = `${path}(${node.type})`;
+    for (const diagnostic of reported) d.list.push({ ...diagnostic, path: diagnostic.path === "root" || diagnostic.path.startsWith("root.") ? at + diagnostic.path.slice(4) : at });
     if (Array.isArray(raw2) || typeof raw2 !== "object" || raw2 === null) {
       d.error("custom/render", `${node.type} renders one component (a Column, a Section, \u2026), not ${Array.isArray(raw2) ? "several" : JSON.stringify(raw2)}`, path, node.id);
       return void 0;
     }
-    const { node: expanded, diagnostics } = checkFragment(raw2, { parent, responsive, idPrefix: node.id ?? null, taken, registry, path: `${path}(${node.type})` });
+    const { node: expanded, diagnostics } = checkFragment(raw2, { parent, root: rootDefinition, idPrefix: node.id ?? null, taken, registry, path: `${path}(${node.type})` });
     for (const diagnostic of diagnostics) d.list.push(diagnostic);
     if (!expanded) return void 0;
     collectIds(expanded);
     if (node.style?.flex !== void 0) expanded.style = { ...expanded.style, flex: node.style.flex };
     if (node.hidden) expanded.hidden = { ...expanded.hidden, ...node.hidden };
     if (node.id && !expanded.id && !CUSTOM_TYPE.test(node.type)) expanded.id = node.id;
-    for (const [key, value] of Object.entries(node.mobile ?? {})) {
-      if (registry.get(expanded.type)?.style[key]?.mobile) expanded.mobile = { [key]: value, ...expanded.mobile };
-      else d.warning("mobile/not-shown", `${node.type}'s ${key} on phones isn't shown: what it renders (a ${expanded.type}) has no ${key} for phones`, `${path}.mobile.${key}`, node.id);
+    for (const condition of CONDITIONS) {
+      const rendered = registry.get(expanded.type);
+      for (const [key, value] of Object.entries(node[condition.name] ?? {})) {
+        const spec = rendered?.style[key];
+        if (rendered && spec && condition.allows(spec, key, rendered)) expanded[condition.name] = { [key]: value, ...expanded[condition.name] };
+        else d.warning(`${condition.name}/not-shown`, `${node.type}'s ${key} ${condition.on} isn't shown: what it renders (a ${expanded.type}) has no ${key} ${condition.for}`, `${path}.${condition.name}.${key}`, node.id);
+      }
     }
     const inner = registry.get(expanded.type);
     if (isCustom(inner)) return expandOne(expanded, inner, parent, `${path}(${node.type})`, depth + 1, self);
@@ -2462,11 +2778,11 @@ var TEXT_CSS = [
   ["textAlign", "text-align", (v) => v],
   ["textTransform", "text-transform", (v) => v]
 ];
-var same = (a2, b) => a2 === b || JSON.stringify(a2) === JSON.stringify(b);
+var same2 = (a2, b) => a2 === b || JSON.stringify(a2) === JSON.stringify(b);
 function textDeclarations(text2, parent, always = []) {
   const out = [];
   for (const [key, property, write3] of TEXT_CSS) {
-    if (!parent || always.includes(key) || !same(text2[key], parent[key])) out.push([property, write3(text2[key])]);
+    if (!parent || always.includes(key) || !same2(text2[key], parent[key])) out.push([property, write3(text2[key])]);
   }
   return out;
 }
@@ -2542,7 +2858,9 @@ function classesOf(name, value) {
   if (name === "class") return (Array.isArray(value) ? value : [value]).filter((v) => typeof v === "string" && v !== "");
   const text2 = styleText(value, true);
   if (!text2) return [];
-  return [name === "phone" ? rule("phone", `&{${text2}}`) : rule("all", `&:hover{${text2}}`, "hover")];
+  if (name === "phone") return [rule(MOBILE.sheet.media, `${MOBILE.sheet.selector}{${text2}}`)];
+  const selector = name === "hoverWithin" ? HOVER.sheet.within ?? HOVER.sheet.selector : HOVER.sheet.selector;
+  return [rule(HOVER.sheet.media, `${selector}{${text2}}`, HOVER.sheet.level)];
 }
 function attributes2(props) {
   const out = [];
@@ -2550,7 +2868,7 @@ function attributes2(props) {
   let slot = -1;
   for (const [name, value] of Object.entries(props)) {
     if (name === "children" || name === "style" || value === void 0 || value === null || value === false) continue;
-    if (name === "class" || name === "phone" || name === "hover") {
+    if (name === "class" || name === "phone" || name === "hover" || name === "hoverWithin") {
       const found = classesOf(name, value);
       if (found.length && slot < 0) slot = out.push("") - 1;
       classes.push(...found);
@@ -2566,8 +2884,8 @@ function withId(element, id) {
   if (!id) return element;
   const tag = /^<[a-zA-Z0-9]+/.exec(element.markup)?.[0];
   if (!tag) throw new Error("[Elements] An id goes on an element");
-  const insert = (markup) => `${tag} id="${escapeAttr(id)}"${markup.slice(tag.length)}`;
-  return new Html2(insert(element.markup), { ...element.options, start: element.options.start && insert(element.options.start) });
+  const insert2 = (markup) => `${tag} id="${escapeAttr(id)}"${markup.slice(tag.length)}`;
+  return new Html2(insert2(element.markup), { ...element.options, start: element.options.start && insert2(element.options.start) });
 }
 function h(type, props, ...children) {
   const all = props ?? {};
@@ -2594,6 +2912,98 @@ function Merged({ children }) {
 }
 var open = (element) => new Html2(element.options.start ?? element.markup);
 var close = (tag) => new Html2(`</${tag}>`);
+var BLOCK_MAP_VERSION = 1;
+var MARK_PAIRS = 16;
+var BlockMarks = class {
+  constructor(pair) {
+    this.nodes = [];
+    this.open = String.fromCharCode(64976 + pair * 2);
+    this.close = String.fromCharCode(64977 + pair * 2);
+  }
+};
+var current = null;
+function withBlockMarks(marks, write3) {
+  const before = current;
+  current = marks;
+  try {
+    return write3();
+  } finally {
+    current = before;
+  }
+}
+function markBlock(html, node) {
+  if (!current) return html;
+  const mark = `${current.open}${current.nodes.length}${current.close}`;
+  const marked = insert(html, mark, false) ?? insert(html, mark, true);
+  if (!marked) return html;
+  current.nodes.push(node);
+  return marked;
+}
+var OUTLOOK_OPEN = "<!--[if mso]>";
+var OUTLOOK_CLOSE = "<![endif]-->";
+var TAG2 = /<[a-zA-Z][a-zA-Z0-9]*/y;
+function tagEnd(markup, outlook) {
+  for (let i = markup.indexOf("<"); i >= 0; i = markup.indexOf("<", i + 1)) {
+    if (markup.startsWith(OUTLOOK_OPEN, i)) {
+      if (outlook) {
+        i += OUTLOOK_OPEN.length - 1;
+        continue;
+      }
+      const end = markup.indexOf(OUTLOOK_CLOSE, i);
+      if (end < 0) return -1;
+      i = end + OUTLOOK_CLOSE.length - 1;
+      continue;
+    }
+    if (markup.startsWith("<!--", i)) {
+      const end = markup.indexOf("-->", i + 4);
+      if (end < 0) return -1;
+      i = end + 2;
+      continue;
+    }
+    TAG2.lastIndex = i;
+    const tag = TAG2.exec(markup);
+    if (tag) return i + tag[0].length;
+  }
+  return -1;
+}
+function insert(html, mark, outlook) {
+  const { list, kind: kind2, start } = html.options;
+  if (list) {
+    for (let i = 0; i < list.length; i++) {
+      const marked = insert(list[i], mark, outlook);
+      if (marked) return new Html2(html.markup, { ...html.options, list: list.map((piece, j) => j === i ? marked : piece) });
+    }
+    return null;
+  }
+  if (kind2 === "outlook" && !outlook) return null;
+  const at = tagEnd(html.markup, outlook);
+  if (at < 0) return null;
+  const put = (text2) => text2.slice(0, at) + mark + text2.slice(at);
+  return new Html2(put(html.markup), { ...html.options, start: start !== void 0 && at <= start.length ? put(start) : start });
+}
+function readMarks(marks, written) {
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const pieces2 = [];
+  let length3 = 0;
+  let last = 0;
+  for (const match of written.matchAll(new RegExp(`${marks.open}(\\d+)${marks.close}`, "g"))) {
+    const index = Number(match[1]);
+    const node = marks.nodes[index];
+    if (!node || seen.has(index)) return null;
+    seen.add(index);
+    const before = written.slice(last, match.index);
+    pieces2.push(before);
+    length3 += before.length;
+    last = match.index + match[0].length;
+    if (!/<[a-zA-Z][a-zA-Z0-9]*$/.test(written.slice(Math.max(0, match.index - 32), match.index).replace(new RegExp(`${marks.open}\\d+${marks.close}`, "g"), ""))) return null;
+    found.push({ node, at: length3 });
+  }
+  pieces2.push(written.slice(last));
+  const text2 = pieces2.join("");
+  if (text2.includes(marks.open) || text2.includes(marks.close)) return null;
+  return { text: text2, found };
+}
 function utf8Bytes(text2) {
   let bytes = 0;
   for (let i = 0; i < text2.length; i++) {
@@ -2680,7 +3090,7 @@ function fontFaces2(root, { swap }) {
   return [...faces.values()];
 }
 var isNode2 = (child) => typeof child !== "string";
-var shown = (node) => !(node.hidden?.mobile && node.hidden?.desktop);
+var shown = (node) => shownAnywhere(node);
 function link2(props) {
   const { href, target } = linkParts(props.href);
   return {
@@ -2915,7 +3325,7 @@ var Button2 = ({ node, style, mobile, fill, phoneText: phoneText2, text: text2 }
     {
       align: TEXT_ALIGN[node.text.textAlign],
       bgcolor: bgcolor(style.backgroundColor),
-      hover: { backgroundColor: node.hover?.backgroundColor },
+      hoverWithin: { backgroundColor: node.hover?.backgroundColor },
       phone: { border: mobile.border, backgroundColor: mobile.backgroundColor },
       style: { backgroundColor: style.backgroundColor, border: style.border, borderRadius: style.borderRadius, msoPaddingAlt: insets2(style.padding) }
     },
@@ -2926,8 +3336,11 @@ var Button2 = ({ node, style, mobile, fill, phoneText: phoneText2, text: text2 }
         phone: [phoneText2, { padding: mobile.padding }],
         hover: { color: node.hover?.color },
         style: [
-          // A button with a width fills it.
-          { display: width.width !== void 0 ? "block" : "inline-block", padding: style.padding },
+          // A button with a width fills it. Its label's words stay whole (the email's word-break: break-word
+          // is for long links in text): a button narrower than its padding otherwise sized itself to one letter
+          // and drew its label a letter a line, in Gmail and browsers; it grows to its longest word instead, as
+          // classic Outlook's and Apple Mail's do (captures of Elements 0.3.0, e3-fresh/g-0054).
+          { display: width.width !== void 0 ? "block" : "inline-block", padding: style.padding, wordBreak: "normal" },
           fullText(node),
           { textDecoration: style.textDecoration ?? "none", borderRadius: style.borderRadius }
         ]
@@ -3391,27 +3804,42 @@ function propsOf(node, place, options) {
     options
   };
 }
+var UNMAPPED = /* @__PURE__ */ new Set(["LineBreak", "MergeTag"]);
 function write(node, place, options) {
   if (place.inline) {
     if (!shown(node)) return raw("");
     const component22 = INLINES[node.type];
     if (!component22) throw new Error(`[Elements] The email exporter can't render a ${node.type} inside text`);
-    return component22(propsOf(node, place, options));
+    const html = component22(propsOf(node, place, options));
+    return UNMAPPED.has(node.type) ? html : markBlock(html, node);
   }
   const component2 = BLOCKS[node.type];
   if (!component2) throw new Error(`[Elements] The email exporter can't render a ${node.type} here (in a ${place.parent.type})`);
-  return component2(propsOf(node, place, options));
+  return markBlock(component2(propsOf(node, place, options)), node);
 }
 var EMAIL_PHONE_MARGIN = 20;
 var GMAIL_CLIP_BYTES = 102400;
 var GMAIL_STYLE_BYTES = 16384;
 function renderEmail(resolved, options = {}) {
   const root = resolved.root;
-  const sheet = new Stylesheet(options.classPrefix);
   const d = new Diagnostics();
   const fonts = fontFaces2(root, { swap: false });
   const width = root.width ?? 600;
-  const email = withStylesheet(sheet, () => String(Email2(propsOf(root, { parent: root, fill: false, mobile: {}, inline: false, rtl: false }, options))));
+  const write3 = (marks) => {
+    const sheet2 = new Stylesheet(options.classPrefix);
+    const markup = withStylesheet(sheet2, () => withBlockMarks(marks, () => String(markBlock(Email2(propsOf(root, { parent: root, fill: false, mobile: {}, inline: false, rtl: false }, options)), root))));
+    return { sheet: sheet2, markup };
+  };
+  let written = options.blockMap ? null : write3(null);
+  let marked = null;
+  for (let pair = 0; !written; pair++) {
+    if (pair === MARK_PAIRS) throw new Error("[Elements] blockMap can't mark this email: its text holds every pair of the noncharacters U+FDD0 to U+FDEF");
+    const marks = new BlockMarks(pair);
+    const attempt = write3(marks);
+    marked = readMarks(marks, attempt.markup);
+    if (marked) written = { sheet: attempt.sheet, markup: marked.text };
+  }
+  const { sheet, markup: email } = written;
   const background = root.style.backgroundColor;
   const lang = root.props.lang;
   const dir = root.props.dir;
@@ -3435,7 +3863,8 @@ function renderEmail(resolved, options = {}) {
     `<style>${stylesheet}</style>`
   ].join("");
   const preheader = preview ? `<div style="display:none;max-height:0;overflow:hidden;mso-hide:all" aria-hidden="true" data-skip-in-text="true">${escapeText(preview)}${"&#847;&zwnj;&nbsp;".repeat(30)}</div>` : "";
-  const body = preheader + `<div${attrs({ role: "article", "aria-roledescription": "email", "aria-label": title, lang, dir })}${styleAttr([["background-color", background], ["overflow-wrap", "break-word"], ["word-break", "break-word"]])}>${email}</div>`;
+  const opening = `<div${attrs({ role: "article", "aria-roledescription": "email", "aria-label": title, lang, dir })}${styleAttr([["background-color", background], ["overflow-wrap", "break-word"], ["word-break", "break-word"]])}>`;
+  const body = `${preheader}${opening}${email}</div>`;
   const bodyDeclarations = [
     ["margin", "0"],
     ["padding", "0"],
@@ -3443,20 +3872,38 @@ function renderEmail(resolved, options = {}) {
     ["background-color", background]
   ];
   const bodyStyle = css2(bodyDeclarations);
-  const html = `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html${attrs({ lang, dir, xmlns: "http://www.w3.org/1999/xhtml", "xmlns:v": "urn:schemas-microsoft-com:vml", "xmlns:o": "urn:schemas-microsoft-com:office:office" })}><head>${head}</head><body${styleAttr(bodyDeclarations)}>${body}</body></html>`;
+  const shell = `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html${attrs({ lang, dir, xmlns: "http://www.w3.org/1999/xhtml", "xmlns:v": "urn:schemas-microsoft-com:vml", "xmlns:o": "urn:schemas-microsoft-com:office:office" })}><head>${head}</head><body${styleAttr(bodyDeclarations)}>`;
+  const html = `${shell}${body}</body></html>`;
   const bytes = utf8Bytes(html);
+  const gmails = ["gmail", "gmail-app", "gmail-app-other"];
   if (bytes > GMAIL_CLIP_BYTES) {
-    d.warning("email/size", `The email is ${Math.round(bytes / 1024)} KB; Gmail clips a message after ${GMAIL_CLIP_BYTES / 1024} KB ("[Message clipped]")`, "root");
+    d.warning("email/size", `The email is ${Math.round(bytes / 1024)} KB; Gmail clips a message after ${GMAIL_CLIP_BYTES / 1024} KB ("[Message clipped]")`, "root", void 0, {
+      clients: gmails,
+      fix: "shorten the email, or move long sections to a page: what follows the clip is behind a link"
+    });
   }
   const styleBytes = utf8Bytes(stylesheet);
   if (styleBytes > GMAIL_STYLE_BYTES) {
-    d.warning("email/style-size", `The stylesheet is ${Math.round(styleBytes / 1024)} KB; Gmail reads ${GMAIL_STYLE_BYTES / 1024} KB of a <style>`, "root");
+    d.warning("email/style-size", `The stylesheet is ${Math.round(styleBytes / 1024)} KB; Gmail reads ${GMAIL_STYLE_BYTES / 1024} KB of a <style>`, "root", void 0, {
+      clients: gmails,
+      fix: "use fewer phone and hover styles: each one adds a rule"
+    });
   }
-  return { html, head, body, bodyStyle, diagnostics: d.list };
+  return { html, head, body, bodyStyle, diagnostics: d.list, ...marked ? { blocks: blockMap(resolved, marked.found, email, utf8Bytes(shell + preheader + opening)) } : {} };
+}
+function blockMap(resolved, found, email, start) {
+  const templatePath = resolved.templatePath ?? ((path) => path);
+  let offset = start;
+  let from = 0;
+  const entries = found.map(({ node, at }) => {
+    offset += utf8Bytes(email.slice(from, at));
+    from = at;
+    return { path: templatePath(node.path), ...node.id ? { nodeId: node.id } : {}, offset };
+  });
+  return { version: BLOCK_MAP_VERSION, unit: "utf8", entries };
 }
 var isNode3 = (child) => typeof child !== "string";
-var shown2 = (node) => !(node.hidden?.mobile && node.hidden?.desktop);
-var same2 = (a2, b) => JSON.stringify(a2) === JSON.stringify(b);
+var same3 = (a2, b) => JSON.stringify(a2) === JSON.stringify(b);
 function support(root, target) {
   const d = new Diagnostics();
   const visit = (node) => {
@@ -3464,41 +3911,81 @@ function support(root, target) {
     const byProp = definition.defaultStyleBy ? definition.defaultStyleBy.values[String(node.props[definition.defaultStyleBy.prop])] : void 0;
     for (const [key, value] of Object.entries(node.style)) {
       const fallback2 = byProp?.[key] ?? definition.defaultStyle?.[key];
-      report(node, "style", key, value, fallback2, definition.style[key]?.support, target, d);
+      if (same3(value, fallback2)) continue;
+      reportDeclared(d, node, `${node.path}.style.${key}`, key, value, definition.style[key]?.support?.[target], target);
     }
-    for (const [key, value] of Object.entries(node.props)) report(node, "props", key, value, definition.props[key]?.default, definition.props[key]?.support, target, d);
-    for (const child of node.children) if (isNode3(child) && shown2(child)) visit(child);
+    for (const [key, value] of Object.entries(node.props)) {
+      if (same3(value, definition.props[key]?.default)) continue;
+      reportDeclared(d, node, `${node.path}.props.${key}`, key, value, definition.props[key]?.support?.[target], target);
+    }
+    for (const condition of CONDITIONS) {
+      const block = blockOf(node, condition);
+      if (!block || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      const own = condition.support[target];
+      reportDeclared(d, node, `${node.path}.${condition.name}`, condition.name, block, own, target);
+      if (!own || own.level === "none") continue;
+      for (const [key, value] of Object.entries(block)) {
+        const rules = condition.styles?.[key]?.[target] ?? definition.style[key]?.support?.[target];
+        reportDeclared(d, node, `${node.path}.${condition.name}.${key}`, key, value, rules, target, condition.outlookApplies);
+      }
+    }
+    for (const child of node.children) if (isNode3(child) && shownAnywhere(child)) visit(child);
   };
   visit(root);
   return d.list;
 }
-function report(node, where, key, value, fallback2, declared, target, d) {
-  const rules = declared?.[target];
-  if (!rules || same2(value, fallback2)) return;
-  for (const rule2 of [].concat(rules)) {
-    if (rule2.level === "full") continue;
-    if (rule2.values && !rule2.values.some((v) => same2(v, value))) continue;
-    if (rule2.when && !rule2.when(value, node)) continue;
-    const at = `${node.path}.${where}.${key}`;
-    const asked = typeof value === "string" ? `${key}: "${value}"` : key;
-    const output = target === "web" ? "a page" : target;
-    if (rule2.level === "none") d.warning(`${target}/unsupported`, `${asked} isn't possible in ${output}: ${rule2.shows}`, at, node.id);
-    else if (rule2.level === "partial") d.add(`${target}/degraded`, "info", `${asked} on this ${node.type} in ${output}: ${rule2.shows}`, at, node.id);
-    else d.add("email/outlook-degraded", "info", `${asked} on this ${node.type} in classic Outlook: ${rule2.shows}`, at, node.id);
-  }
-}
-function emailSupport(root) {
+function emailSupport(root, templatePath = (path) => path) {
   const d = new Diagnostics();
   d.list.push(...support(root, "email"));
   const webFonts = new Set((root.props.fonts ?? []).map((face) => face.family.toLowerCase()));
+  const phone = { styled: false, phoneHidden: false, desktopHidden: false };
   const visit = (node) => {
     structure(node, d);
     fallback(node, webFonts, d);
+    if (node.type === "Html") htmlBlock(node, d);
+    if (node.type === "Image") imageFormat(node, "src", d);
+    if (node.type === "Video" && node.props.thumbnail !== void 0) imageFormat(node, "thumbnail", d);
+    if (node.mobile && Object.keys(node.mobile).length) phone.styled = true;
+    if (node.hidden?.mobile && !builtIn(templatePath(node.path))) phone.phoneHidden = true;
+    if (node.hidden?.desktop && !builtIn(templatePath(node.path))) phone.desktopHidden = true;
     for (const child of node.children) if (isNode2(child) && shown(child)) visit(child);
   };
   visit(root);
+  phoneStyles(root, phone, d);
   return d.list;
 }
+function builtIn(place) {
+  const made = [...place.matchAll(/\((\w+)\)/g)].pop()?.[1];
+  return !!made && Object.prototype.hasOwnProperty.call(COMPONENTS, made);
+}
+var NO_PHONE_STYLES = ["gmail-app-other", "sfr", "laposte", "gmx", "web-de", "rainloop"];
+function phoneStyles(root, phone, d) {
+  const parts = [phone.desktopHidden && "what's hidden on desktop shows nowhere", phone.phoneHidden && "what's hidden on phones shows", phone.styled && "it keeps its desktop styles"].filter(Boolean);
+  if (!parts.length) return;
+  d.add("email/phone-styles", phone.desktopHidden ? "warning" : "info", `On phones, the email's phone styles don't apply: ${parts.join(", ")} (Rows still stack)`, root.path, root.id, {
+    clients: NO_PHONE_STYLES,
+    fix: phone.desktopHidden ? "show what a reader needs on desktop too, and hide on phones only what they can do without" : void 0,
+    see: caniemail("css-at-media")
+  });
+}
+var IMAGE_FORMATS = {
+  webp: { clients: ["outlook"], feature: "image-webp", name: "a WebP" },
+  avif: { clients: ["outlook", "fastmail", "gmx", "web-de", "orange", "sfr", "mail-ru", "ionos"], feature: "image-avif", name: "an AVIF" },
+  svg: { clients: ["mail-ru"], feature: "image-svg", name: "an SVG" }
+};
+var FORMAT_IN = [/^data:image\/([a-z]+)/i, /[?&](?:fm|format|f)=(webp|avif|svg|png|jpe?g|gif)\b/i, /\/f_(webp|avif|svg|png|jpe?g|gif)[,/]/i, /\.([a-z]+)(?:[?#]|$)/i];
+function imageFormat(node, key, d) {
+  const src = assetParts(node.props[key]).src;
+  const format = FORMAT_IN.map((pattern) => pattern.exec(src)?.[1]).find(Boolean)?.toLowerCase();
+  const known = format && Object.prototype.hasOwnProperty.call(IMAGE_FORMATS, format) ? IMAGE_FORMATS[format] : void 0;
+  if (!known) return;
+  const what = key === "src" ? "This Image is" : "This Video's thumbnail is";
+  d.warning("email/image-format", `${what} ${known.name} file, which these email clients don't show`, `${node.path}.props.${key}`, node.id, {
+    clients: known.clients,
+    fix: "use a PNG, JPEG or GIF file",
+    see: caniemail(known.feature)
+  });
+}
 function fallback(node, webFonts, d) {
   const stack = node.style.fontFamily;
   if (typeof stack !== "string" || !webFonts.size) return;
@@ -3507,9 +3994,10 @@ function fallback(node, webFonts, d) {
   if (!last || !webFonts.has(last.toLowerCase())) return;
   d.warning(
     "email/font-fallback",
-    `This font stack ends with the web font "${last}": where it doesn't load (Gmail, classic Outlook) the email client picks its own font. Add one it has: "${stack}, Arial, sans-serif"`,
+    `This font stack ends with the web font "${last}": where it doesn't load, the email client picks its own font`,
     `${node.path}.style.fontFamily`,
-    node.id
+    node.id,
+    { clients: NO_WEB_FONTS, fix: `end it with a font the client has: "${stack}, Arial, sans-serif"`, see: caniemail("css-at-font-face") }
   );
 }
 function structure(node, d) {
@@ -3522,7 +4010,8 @@ function structure(node, d) {
         "info",
         `What it holds looks about ${past}px wide on one line, wider than its ${node.contentWidth}px (an estimate: text isn't measured yet): classic Outlook can't wrap it onto another line as other clients do, and draws it wider`,
         path,
-        id
+        id,
+        { clients: ["outlook"], fix: "put less in it, or let it stack on phones (stackOnMobile)" }
       );
     }
     const lines2 = wrapsWithGap(node);
@@ -3558,15 +4047,95 @@ function structure(node, d) {
     d.warning("email/image-width", "This Image has no width: Outlook shows it at the size of its file, however wide that is. Give it a width, or the file's width in src", `${path}.props.src`, id);
   }
 }
+var HTML_CSS = [
+  { pattern: /!\s*(?!important\b)[iI][mM][pP][oO][rR][tT][aA][nN][tT]\b/, clients: ["gmail"], removes: "!important not written in lowercase: Gmail removes the whole style attribute, or the whole <style>, that holds it", fix: "write !important in lowercase" },
+  { pattern: /margin[a-z-]*\s*:([^;"'}]*\s)?-\d/i, clients: ["gmail", "outlook-com"], removes: "a negative margin: the client removes the whole margin declaration", fix: "move it with padding on what holds it instead" },
+  {
+    pattern: /(^|[\s;{"'])position\s*:\s*absolute\b/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "hey", "sfr", "laposte", "mail-ru", "gmx", "web-de"],
+    removes: "position: absolute: the client removes it",
+    fix: "lay it out without position (a Layer puts content over an image)",
+    feature: "css-position"
+  },
+  {
+    // Outlook.com removes every position (captures); the others not named keep relative.
+    pattern: /(^|[\s;{"'])position\s*:\s*relative\b/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "mail-ru", "gmx", "web-de"],
+    removes: "position: relative: the client removes it, and what it moves stays where it is",
+    fix: "move it with padding instead",
+    feature: "css-position",
+    use: "relative"
+  },
+  {
+    pattern: /var\(\s*--|(^|[\s;{"'])--[\w-]+\s*:/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "orange", "mail-ru", "fastmail", "gmx", "web-de"],
+    removes: "CSS variables: the client removes var() and their declarations",
+    fix: "write the values themselves",
+    feature: "css-variables"
+  },
+  {
+    pattern: /gradient\(/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail-app", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "a gradient: the client removes it",
+    fix: "give it a solid background color too, or use an image",
+    feature: "css-linear-gradient"
+  },
+  { pattern: /\b(oklch|oklab|lch|lab|hwb|color-mix|color)\(/i, clients: ["gmail", "outlook-com"], removes: "a newer color syntax: Outlook.com removes the declaration, and Gmail every inline style on its element", fix: "write the color as hex or rgb()" },
+  { pattern: /rgba?\(\s*[\d.]+%?\s+[\d.]/i, clients: ["gmail"], removes: "rgb() with spaces between its numbers: Gmail removes the whole style attribute, or the whole <style>", fix: "separate them with commas: rgb(8, 121, 161)" },
+  {
+    pattern: /<style[\s>]/i,
+    clients: ["gmail", "gmail-app", "gmail-app-other", "protonmail", "gmx", "web-de", "sfr", "laposte", "rainloop"],
+    removes: "a <style> in the email's body: the client removes it, and what it styles shows without it",
+    fix: "write the styles inline, on the elements they're for",
+    feature: "html-style"
+  },
+  { pattern: /box-shadow\s*:/i, clients: ["outlook", "gmail", "gmail-app", "yahoo", "aol", "orange", "gmx", "web-de"], removes: "box-shadow: the client removes it", fix: "draw it with a border, or leave it out", feature: "css-box-shadow" },
+  { pattern: /text-shadow\s*:/i, clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other"], removes: "text-shadow: the client removes it", fix: "leave it out, and keep the text readable without it", feature: "css-text-shadow" },
+  { pattern: /display\s*:\s*flex\b/i, clients: ["outlook", "gmail-app-other", "orange", "gmx", "web-de"], removes: "display: flex: the client lays it out as blocks", fix: "lay it out with a Row", feature: "css-display-flex" },
+  {
+    pattern: /display\s*:\s*inline-flex\b/i,
+    clients: ["outlook", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "display: inline-flex: the client lays it out without flex",
+    fix: "lay it out with a Row",
+    feature: "css-display-flex",
+    use: "inline"
+  },
+  { pattern: /display\s*:\s*(inline-)?grid\b/i, clients: ["outlook", "gmail-app-other", "orange", "gmx", "web-de"], removes: "display: grid: the client lays it out as blocks", fix: "lay it out with a Row or a Grid", feature: "css-display-grid" },
+  { pattern: /(^|[\s;{"'])opacity\s*:/i, clients: ["outlook", "aol", "orange", "mail-ru", "gmx", "web-de"], removes: "opacity: the client shows it opaque", fix: "use a lighter color instead", feature: "css-opacity" },
+  {
+    pattern: /object-fit\s*:/i,
+    clients: ["outlook", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "object-fit: the client stretches the image to its box",
+    fix: "crop the image file to the size it's shown at",
+    feature: "css-object-fit"
+  },
+  {
+    pattern: /(^|[\s;{"'])aspect-ratio\s*:/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "samsung-email", "thunderbird", "fastmail", "gmx", "web-de", "orange"],
+    removes: "aspect-ratio: the client removes it",
+    fix: "give it a width and a height",
+    feature: "css-aspect-ratio"
+  }
+];
+var OUTLOOK_ONLY2 = /<!--\[if\s+(?:(?:gte?|lte?)\s+)?mso[^\]]*\]>[\s\S]*?<!\[endif\]-->/gi;
+function htmlBlock(node, d) {
+  if (typeof node.props.html !== "string") return;
+  const markup = node.props.html.replace(OUTLOOK_ONLY2, "");
+  for (const check of HTML_CSS) {
+    if (check.pattern.test(markup)) {
+      d.add("email/html-css", "info", `This Html block's markup may have ${check.removes}`, `${node.path}.props.html`, node.id, { clients: check.clients, fix: check.fix, see: check.feature && caniemail(check.feature) });
+    }
+  }
+}
 var isNode4 = (child) => typeof child !== "string";
 var OUTPUT = { pdf: "a PDF", image: "an image" };
 function pagedSupport(root, output) {
   const d = new Diagnostics();
   const where = OUTPUT[output];
   const visit = (node) => {
-    if (node.hidden?.desktop && node.hidden?.mobile) return;
-    if (node.hover && Object.keys(node.hover).length) {
-      d.warning(`${output}/unsupported`, `A hover isn't possible in ${where}: nothing points at it. The ${node.type} shows its own colors`, `${node.path}.hover`, node.id);
+    if (!shownAnywhere(node)) return;
+    for (const condition of CONDITIONS) {
+      if (condition.paged && blockOf(node, condition)) d.warning(`${output}/unsupported`, condition.paged(node, where), `${node.path}.${condition.name}`, node.id);
     }
     if (node.type === "Video") {
       const shows = output === "pdf" ? "its thumbnail (where its file is given) or its title, linked to it" : "its title";
@@ -3719,15 +4288,15 @@ function classesFor(node, parent) {
   const classes = [];
   if (node.mobile) {
     const { width, ...rest } = node.mobile;
-    if (Object.keys(rest).length) classes.push(rule("phone", `&{${css2(declarationsOf(rest), true)}}`));
+    if (Object.keys(rest).length) classes.push(rule(MOBILE.sheet.media, `${MOBILE.sheet.selector}{${css2(declarationsOf(rest), true)}}`));
     const line2 = node.type === "Divider" && node.style.padding !== void 0 ? ">hr" : "";
-    if (width !== void 0) classes.push(rule("phone", `&${line2}{${css2(declarationsOf({ width }), true)}}`));
+    if (width !== void 0) classes.push(rule(MOBILE.sheet.media, `${MOBILE.sheet.selector}${line2}{${css2(declarationsOf({ width }), true)}}`));
     const own = node.style.width === void 0 && (node.style.flex === "none" || node.style.flex === 0);
     const basis = own ? void 0 : length2(phoneWidthInRow(node, parent));
     if (basis !== void 0) classes.push(rule("phone", `&{flex:0 1 ${basis}!important}`));
   }
   classes.push(...hidingClasses(node.hidden));
-  if (node.hover) classes.push(rule("all", `&:hover{${css2(declarationsOf(node.hover), true)}}`, "hover"));
+  if (node.hover) classes.push(rule(HOVER.sheet.media, `${HOVER.sheet.selector}{${css2(declarationsOf(node.hover), true)}}`, HOVER.sheet.level));
   if (node.type === "Row" && node.props.stackOnMobile !== false) {
     classes.push(
       rule("phone", "&{flex-direction:column!important;align-items:stretch!important}&>*{flex:0 0 auto!important;width:auto!important;max-width:100%!important;align-self:stretch!important}", "layout")
@@ -3935,17 +4504,17 @@ var Layer3 = ({ node, style, parent, placement, classes, children }) => /* @__PU
   },
   children()
 );
-var current = { page: 1, total: 1 };
+var current2 = { page: 1, total: 1 };
 function numbering(numbers, write3) {
-  const before = current;
-  current = numbers;
+  const before = current2;
+  current2 = numbers;
   try {
     return write3();
   } finally {
-    current = before;
+    current2 = before;
   }
 }
-var PageNumber2 = ({ node }) => /* @__PURE__ */ h(Fragment, null, String(node.props.total ? current.total : current.page));
+var PageNumber2 = ({ node }) => /* @__PURE__ */ h(Fragment, null, String(node.props.total ? current2.total : current2.page));
 function documentCss(root) {
   const box2 = pageBox(root.props);
   return `@page{size:${box2.css};margin:0}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}@media screen{body{background:#e5e7eb;padding:24px 0}.elements-page{box-shadow:0 1px 4px rgba(0,0,0,.2)}.elements-page+.elements-page{margin-top:24px!important}}`;
@@ -4119,8 +4688,23 @@ var Video3 = ({ node, style, placement, classes }) => /* @__PURE__ */ h(
   ))
 );
 var PAGE_PHONE_WIDTH = 480;
-var PHONE = `@media (max-width: ${PAGE_PHONE_WIDTH}px)`;
-var DESKTOP = `@media (min-width: ${PAGE_PHONE_WIDTH + 1}px)`;
+function pagePhoneWidth(root) {
+  const mobile = root.props.breakpoints?.mobile;
+  return typeof mobile === "number" ? mobile : PAGE_PHONE_WIDTH;
+}
+function pageBreakpoints(root) {
+  const mobile = root.props.breakpoints?.mobile;
+  const width = typeof root.props.width === "number" ? root.props.width : void 0;
+  if (root.type !== "Page" || typeof mobile !== "number" || width === void 0 || mobile < width) return [];
+  return [
+    {
+      code: "page/phone-width",
+      severity: "warning",
+      message: `Its phone styles apply to every window up to ${mobile}px, wider than its ${width}px content: on those, the content is at its full width with its phone styles. Set breakpoints.mobile below ${width}`,
+      path: "root.props.breakpoints"
+    }
+  ];
+}
 var COMPONENTS2 = {
   Section: Section3,
   Row: Row3,
@@ -4181,7 +4765,8 @@ function renderPage(resolved, options = {}) {
   const writer2 = document ? Document2 : root.type === "Canvas" ? Canvas2 : Page2;
   const body = withStylesheet(sheet, () => String(writer2(propsOf2(root, root, [], options))));
   const fixed = !root.definition.responsive;
-  const stylesheet = [...fonts, sheet.css(fixed ? null : PHONE, fixed ? null : DESKTOP), document ? documentCss(root) : ""].join("");
+  const phoneWidth2 = pagePhoneWidth(root);
+  const stylesheet = [...fonts, sheet.css(fixed ? null : `@media (max-width: ${phoneWidth2}px)`, fixed ? null : `@media (min-width: ${phoneWidth2 + 1}px)`), document ? documentCss(root) : ""].join("");
   const head = [
     '<meta charset="utf-8">',
     '<meta name="viewport" content="width=device-width, initial-scale=1">',
@@ -4201,7 +4786,7 @@ function renderText(resolved, options = {}) {
   const tag = options.mergeTag ?? ((name) => `{{${name}}}`);
   const inline = (node, upper = false) => node.children.map((child) => {
     if (typeof child === "string") return upper ? child.toUpperCase() : child;
-    if (child.hidden?.mobile && child.hidden?.desktop) return "";
+    if (!shownAnywhere(child)) return "";
     switch (child.type) {
       case "LineBreak":
         return "\n";
@@ -4225,7 +4810,7 @@ function renderText(resolved, options = {}) {
     return alt ? `[${upper ? alt.toUpperCase() : alt}]` : "";
   };
   const blocks2 = (node) => node.children.flatMap((child) => {
-    if (typeof child === "string" || child.hidden?.mobile && child.hidden?.desktop) return [];
+    if (typeof child === "string" || !shownAnywhere(child)) return [];
     switch (child.type) {
       case "Heading":
         return [tidy(inline(child, Number(child.props.level) <= 2))];
@@ -4263,8 +4848,8 @@ function renderText(resolved, options = {}) {
         return blocks2(child);
     }
   });
-  const shown32 = (node) => !(node.hidden?.mobile && node.hidden?.desktop);
-  const list = (node, indent) => node.children.filter((child) => typeof child !== "string" && shown32(child)).map((item, index) => {
+  const shown22 = (node) => shownAnywhere(node);
+  const list = (node, indent) => node.children.filter((child) => typeof child !== "string" && shown22(child)).map((item, index) => {
     const marker2 = node.props.type === "number" ? `${Number(node.props.start) + index}. ` : "- ";
     const lines2 = [];
     let run = [];
@@ -4280,13 +4865,13 @@ function renderText(resolved, options = {}) {
       }
       flush();
       if (!lines2.length) lines2.push(`${indent}${marker2}`.trimEnd());
-      if (shown32(child)) lines2.push(list(child, `${indent}  `));
+      if (shown22(child)) lines2.push(list(child, `${indent}  `));
     }
     flush();
     return (lines2.length ? lines2 : [`${indent}${marker2}`.trimEnd()]).join("\n");
   }).join("\n");
-  const table = (node) => node.children.filter((row) => typeof row !== "string" && shown32(row)).map(
-    (row) => row.children.filter((cell) => typeof cell !== "string" && shown32(cell)).map((cell) => tidy(inline(cell))).join(" | ")
+  const table = (node) => node.children.filter((row) => typeof row !== "string" && shown22(row)).map(
+    (row) => row.children.filter((cell) => typeof cell !== "string" && shown22(cell)).map((cell) => tidy(inline(cell))).join(" | ")
   ).join("\n");
   return blocks2(resolved.root).filter((block) => block.length > 0).join("\n\n");
 }
@@ -4329,45 +4914,39 @@ var OUTPUTS = {
   Email: { target: "email", ready: true }
 };
 function prepareTemplate(input, options = {}) {
+  checkEmailClients(options.emailClients);
   const registry = registryOf(options);
   const checked = checkDocument(input, registry);
   const diagnostics = [...checked.diagnostics];
   const failed = () => diagnostics.some((d) => d.severity === "error");
   if (!checked.document || failed()) return { resolved: null, target: null, diagnostics };
   const root = checked.document.root.type;
+  const done = (resolved2, target) => {
+    if (root !== "Email" && options.emailClients) diagnostics.push({ code: "email/clients-ignored", severity: "info", message: `emailClients is for an Email; a ${root} isn't checked for email clients`, path: "root" });
+    return { resolved: resolved2, target, diagnostics: root === "Email" ? forEmailClients(diagnostics, options.emailClients) : diagnostics };
+  };
   const output = OUTPUTS[root];
   if (!output?.ready) {
     diagnostics.push({ code: "output/unavailable", severity: "error", message: output?.later ?? `A ${root} can't be rendered yet`, path: "root" });
-    return { resolved: null, target: null, diagnostics };
+    return done(null, null);
   }
-  const expanded = expandDocument(checked.document, registry);
+  const expanded = expandDocument(checked.document, registry, output.target);
   diagnostics.push(...expanded.diagnostics);
-  if (failed()) return { resolved: null, target: output.target, diagnostics };
+  if (failed()) return done(null, output.target);
   diagnostics.push(...checkTargetExpanded(expanded.document, output.target, registry, expanded.paths));
-  if (failed()) return { resolved: null, target: output.target, diagnostics };
+  if (failed()) return done(null, output.target);
   const resolved = resolveExpanded(expanded.document, registry, expanded.paths);
   diagnostics.push(...resolved.diagnostics);
-  const found = output.target === "email" ? emailSupport(resolved.root) : support(resolved.root, output.target);
+  const found = output.target === "email" ? emailSupport(resolved.root, resolved.templatePath) : support(resolved.root, output.target);
   if (root === "Document" || root === "Canvas") found.push(...overflow(resolved.root));
-  if (root !== "Document") found.push(...pageNumbersOutside(resolved.root));
+  found.push(...pageBreakpoints(resolved.root));
   diagnostics.push(...inTemplate(resolved, found));
-  return { resolved: failed() ? null : resolved, target: output.target, diagnostics };
+  return done(failed() ? null : resolved, output.target);
 }
 function inTemplate(resolved, diagnostics) {
   const { templatePath } = resolved;
   return templatePath ? diagnostics.map((diagnostic) => ({ ...diagnostic, path: templatePath(diagnostic.path) })) : diagnostics;
 }
-function pageNumbersOutside(root) {
-  const out = [];
-  const visit = (node) => {
-    if (node.type === "PageNumber") {
-      out.push({ code: "document/page-number", severity: "error", message: `A PageNumber is a page's number in a Document; this ${root.type} has no pages`, path: node.path, ...node.id ? { nodeId: node.id } : {} });
-    }
-    for (const child of node.children) if (typeof child !== "string") visit(child);
-  };
-  visit(root);
-  return out;
-}
 function validateTemplate(input, options = {}) {
   const { diagnostics, resolved } = prepareTemplate(input, options);
   const root = resolved?.root;
@@ -4376,12 +4955,22 @@ function validateTemplate(input, options = {}) {
   return { valid: !all.some((d) => d.severity === "error"), diagnostics: all };
 }
 function renderTemplate(input, options = {}) {
+  if (options.blockMap && options.pretty) throw new ElementsError([{ code: "render/block-map-pretty", severity: "error", message: "blockMap gives offsets in the compact HTML; leave pretty off", path: "root" }]);
   const { resolved, target, diagnostics } = prepareTemplate(input, options);
   if (!resolved) throw new ElementsError(diagnostics);
   const text2 = renderText(resolved, options);
   const written = target === "email" ? renderEmail(resolved, options) : { ...renderPage(resolved, options), diagnostics: [] };
-  const shown32 = (html) => options.pretty ? prettyHtml(html) : html;
-  return { html: shown32(written.html), head: shown32(written.head), body: shown32(written.body), bodyStyle: written.bodyStyle, text: text2, diagnostics: [...diagnostics, ...inTemplate(resolved, written.diagnostics)] };
+  const shown22 = (html) => options.pretty ? prettyHtml(html) : html;
+  const blocks2 = "blocks" in written ? written.blocks : void 0;
+  return {
+    html: shown22(written.html),
+    head: shown22(written.head),
+    body: shown22(written.body),
+    bodyStyle: written.bodyStyle,
+    text: text2,
+    diagnostics: [...diagnostics, ...inTemplate(resolved, forEmailClients(written.diagnostics, options.emailClients))],
+    ...blocks2 ? { blocks: blocks2 } : {}
+  };
 }
 
 // src/utils/collect.ts
@@ -4412,7 +5001,7 @@ function isAsyncComponent(type) {
 }
 var SHARED2 = Symbol.for("@hyper-elements/react/render-builds");
 var using = globalThis[SHARED2] ?? (globalThis[SHARED2] = []);
-var same3 = (a2, b) => a2.renderToString === b.renderToString;
+var same4 = (a2, b) => a2.renderToString === b.renderToString;
 function dispatcher() {
   const internals = React2;
   return internals.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE?.H ?? internals.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher?.current ?? null;
@@ -4458,7 +5047,7 @@ function secondBuild(outer) {
       for (const requirer of requirers) {
         try {
           const build = requirer()?.(id);
-          if (build?.renderToStaticMarkup && !same3(build, defaultBuild) && ![null, outer].includes(dispatcherOf(build))) {
+          if (build?.renderToStaticMarkup && !same4(build, defaultBuild) && ![null, outer].includes(dispatcherOf(build))) {
             second = build;
             break search;
           }
@@ -4472,11 +5061,11 @@ function secondBuild(outer) {
 var buildOf = (outer) => outer === null ? void 0 : [defaultBuild, second].find((b) => !!b && dispatcherOf(b) === outer);
 function withBuild(render2) {
   const outer = dispatcher();
-  let build = current2();
+  let build = current3();
   const theirs = using.length === 0 || collecting() !== void 0 ? buildOf(outer) : void 0;
   const busy = [];
   if (theirs) {
-    const free = (b) => !same3(b, theirs) && !using.some((u) => same3(u, b));
+    const free = (b) => !same4(b, theirs) && !using.some((u) => same4(u, b));
     const other = free(defaultBuild) ? defaultBuild : secondBuild(outer);
     if (other && free(other)) {
       busy.push(theirs);
@@ -4501,10 +5090,10 @@ function rendersHere(build) {
     return false;
   }
 }
-function current2() {
+function current3() {
   return using[using.length - 1] ?? defaultBuild;
 }
-var renderToString = (element, options) => current2().renderToString(element, options);
+var renderToString = (element, options) => current3().renderToString(element, options);
 
 // src/utils/render-scope.ts
 function withRenderScope(render2) {
@@ -4558,7 +5147,7 @@ function withoutAsync(children, collection) {
 }
 var ENTITIES2 = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'" };
 var unescape = (text2) => text2.replace(/&amp;|&lt;|&gt;|&quot;|&#x27;/g, (entity) => ENTITIES2[entity]);
-var NODE_KEYS2 = /* @__PURE__ */ new Set(["id", "style", "mobile", "hover", "hidden"]);
+var NODE_KEYS2 = /* @__PURE__ */ new Set(["id", "style", "hidden"]);
 function toJsonNode({ type, props }, diagnostics) {
   const node = { type, children: [] };
   const semantic = {};
@@ -4683,10 +5272,10 @@ function collectTemplate(element) {
         path: "jsx"
       });
     }
-    return { document: null, diagnostics, components };
+    return { document: null, diagnostics, components, collected: null };
   }
   const result = checkDocument({ root: top[0] }, new Registry(components));
-  return { document: result.document, diagnostics: [...diagnostics, ...result.diagnostics], components };
+  return { document: result.document, diagnostics: [...diagnostics, ...result.diagnostics], components, collected: top[0] };
 }
 
 // src/primitives/components.tsx
@@ -4776,7 +5365,8 @@ function component(spec) {
     expand(props, context) {
       const { nodes, components, diagnostics } = collectNodes(spec.render(props));
       for (const used of components) context.register(used);
-      if (diagnostics.length) throw new Error(formatDiagnostics(diagnostics));
+      if (diagnostics.some((diagnostic) => diagnostic.severity === "error")) throw new Error(formatDiagnostics(diagnostics));
+      for (const diagnostic of diagnostics) context.report(diagnostic);
       return nodes.length === 1 ? nodes[0] : nodes;
     }
   });
@@ -4795,12 +5385,12 @@ function component(spec) {
 // src/primitives/outline.ts
 var LONGEST = 80;
 var clip = (text2) => text2.length > LONGEST ? `${text2.slice(0, LONGEST - 1)}\u2026` : text2;
-var shown3 = (node) => !(node.hidden?.mobile && node.hidden?.desktop);
-var blocks = (node) => node.children.filter((child) => typeof child !== "string" && shown3(child));
+var shown2 = (node) => shownAnywhere(node);
+var blocks = (node) => node.children.filter((child) => typeof child !== "string" && shown2(child));
 function words(node) {
   return node.children.map((child) => {
     if (typeof child === "string") return child;
-    if (!shown3(child) || child.type === "List") return "";
+    if (!shown2(child) || child.type === "List") return "";
     if (child.type === "MergeTag") return `{{${child.props.name}}}`;
     if (child.type === "LineBreak") return " / ";
     if (child.type === "Image") return `[${child.props.alt ?? ""}]`;
@@ -4851,14 +5441,16 @@ function template(element, call) {
   return collectTemplate(element);
 }
 async function render(element, options = {}) {
+  checkEmailClients(options.emailClients);
   const { document, diagnostics, components } = template(element, "render");
   if (!document || diagnostics.some((d) => d.severity === "error")) throw new ElementsError(diagnostics);
   const rendered = renderTemplate(document, { ...options, components });
   return { ...rendered, diagnostics: [...diagnostics, ...rendered.diagnostics] };
 }
-function validate(element) {
+function validate(element, options = {}) {
+  checkEmailClients(options.emailClients);
   const { document, diagnostics, components } = template(element, "validate");
-  const all = [...diagnostics, ...document && !diagnostics.some((d) => d.severity === "error") ? validateTemplate(document, { components }).diagnostics : []];
+  const all = [...diagnostics, ...document && !diagnostics.some((d) => d.severity === "error") ? validateTemplate(document, { components, emailClients: options.emailClients }).diagnostics : []];
   return { valid: !all.some((d) => d.severity === "error"), diagnostics: all };
 }
 function outline(element) {
@@ -4869,15 +5461,16 @@ function outline(element) {
   if (!root) throw new ElementsError([...diagnostics, ...prepared.diagnostics]);
   return outlineOf(root);
 }
-function prepare(element) {
+function prepare(element, options = {}) {
+  checkEmailClients(options.emailClients);
   const { document, diagnostics, components } = template(element, "prepare");
   if (!document || diagnostics.some((d) => d.severity === "error")) return { root: null, diagnostics, layout: LAYOUT_VERSION };
-  const prepared = prepareTemplate(document, { components });
+  const prepared = prepareTemplate(document, { components, emailClients: options.emailClients });
   const root = prepared.resolved?.root ?? null;
   const paged = root?.type === "Document" ? pagedSupport(root, "pdf") : root?.type === "Canvas" ? pagedSupport(root, "image") : [];
   return { root, diagnostics: [...diagnostics, ...prepared.diagnostics, ...paged], layout: LAYOUT_VERSION };
 }
 
-export { Button4 as Button, Canvas3 as Canvas, Circle2 as Circle, Column4 as Column, Divider4 as Divider, Document3 as Document, ElementsError, Ellipse2 as Ellipse, Email3 as Email, Grid2 as Grid, Heading4 as Heading, Html3 as Html, Image4 as Image, Layer4 as Layer, Line2 as Line, LineBreak4 as LineBreak, Link4 as Link, List4 as List, ListItem4 as ListItem, Menu2 as Menu, MergeTag4 as MergeTag, Page3 as Page, PageBreak2 as PageBreak, PageFooter2 as PageFooter, PageHeader2 as PageHeader, PageNumber3 as PageNumber, Path2 as Path, Polygon2 as Polygon, Rect2 as Rect, Row4 as Row, Section4 as Section, Social2 as Social, Span4 as Span, Svg3 as Svg, Table5 as Table, TableCell4 as TableCell, TableRow4 as TableRow, Text4 as Text, Video4 as Video, component, formatDiagnostics, outline, prepare, prop2 as prop, render, validate };
+export { BLOCK_MAP_VERSION, Button4 as Button, Canvas3 as Canvas, Circle2 as Circle, Column4 as Column, DEFAULT_EMAIL_CLIENTS, Divider4 as Divider, Document3 as Document, EMAIL_CLIENTS, ElementsError, Ellipse2 as Ellipse, Email3 as Email, Grid2 as Grid, Heading4 as Heading, Html3 as Html, Image4 as Image, Layer4 as Layer, Line2 as Line, LineBreak4 as LineBreak, Link4 as Link, List4 as List, ListItem4 as ListItem, Menu2 as Menu, MergeTag4 as MergeTag, Page3 as Page, PageBreak2 as PageBreak, PageFooter2 as PageFooter, PageHeader2 as PageHeader, PageNumber3 as PageNumber, Path2 as Path, Polygon2 as Polygon, Rect2 as Rect, Row4 as Row, Section4 as Section, Social2 as Social, Span4 as Span, Svg3 as Svg, Table5 as Table, TableCell4 as TableCell, TableRow4 as TableRow, Text4 as Text, Video4 as Video, component, formatDiagnostics, outline, prepare, prop2 as prop, render, validate };
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map