@hyper-elements/react 0.3.0 → 0.3.1

package/dist/primitives.cjs

@@ -34,21 +34,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) {
@@ -59,6 +64,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) => {
@@ -644,6 +707,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;
 }
@@ -657,6 +740,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 = {
@@ -665,7 +796,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 } },
@@ -677,8 +813,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 = {
@@ -691,7 +840,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",
@@ -899,6 +1058,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: [
@@ -911,7 +1079,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: {
@@ -943,13 +1111,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",
@@ -1089,7 +1271,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 = [];
@@ -1225,6 +1410,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,
@@ -1232,6 +1422,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: [
@@ -1475,6 +1671,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"] }] }
 });
@@ -1605,6 +1802,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"] }] }
 });
@@ -1722,17 +1920,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));
@@ -1758,7 +1966,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);
@@ -1798,6 +2028,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)) {
@@ -1817,21 +2056,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);
@@ -1841,7 +2108,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);
@@ -1854,9 +2121,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)) {
@@ -1873,6 +2145,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",
@@ -1886,10 +2160,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);
@@ -1903,8 +2179,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);
@@ -1915,7 +2195,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;
   }
@@ -1926,7 +2206,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) {
@@ -1959,6 +2239,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();
@@ -1975,7 +2271,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();
@@ -1987,7 +2283,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();
@@ -2014,27 +2323,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);
@@ -2487,11 +2803,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;
 }
@@ -2567,7 +2883,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 = [];
@@ -2575,7 +2893,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);
@@ -2591,8 +2909,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 ?? {};
@@ -2619,6 +2937,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++) {
@@ -2705,7 +3115,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 {
@@ -2940,7 +3350,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) }
     },
@@ -2951,8 +3361,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 }
         ]
@@ -3416,27 +3829,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;
@@ -3460,7 +3888,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"],
@@ -3468,20 +3897,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) => {
@@ -3489,41 +3936,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;
@@ -3532,9 +4019,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) {
@@ -3547,7 +4035,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);
@@ -3583,15 +4072,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";
@@ -3744,15 +4313,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")
@@ -3960,17 +4529,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}}`;
@@ -4144,8 +4713,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,
@@ -4206,7 +4790,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">',
@@ -4226,7 +4811,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";
@@ -4250,7 +4835,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))];
@@ -4288,8 +4873,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 = [];
@@ -4305,13 +4890,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");
 }
@@ -4354,45 +4939,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;
@@ -4401,12 +4980,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
@@ -4437,7 +5026,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__default.default;
   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;
@@ -4484,7 +5073,7 @@ function secondBuild(outer) {
       for (const requirer of requirers) {
         try {
           const build = requirer()?.(id);
-          if (build?.renderToStaticMarkup && !same3(build, defaultBuild__namespace) && ![null, outer].includes(dispatcherOf(build))) {
+          if (build?.renderToStaticMarkup && !same4(build, defaultBuild__namespace) && ![null, outer].includes(dispatcherOf(build))) {
             second = build;
             break search;
           }
@@ -4498,11 +5087,11 @@ function secondBuild(outer) {
 var buildOf = (outer) => outer === null ? void 0 : [defaultBuild__namespace, 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__namespace) ? defaultBuild__namespace : secondBuild(outer);
     if (other && free(other)) {
       busy.push(theirs);
@@ -4527,10 +5116,10 @@ function rendersHere(build) {
     return false;
   }
 }
-function current2() {
+function current3() {
   return using[using.length - 1] ?? defaultBuild__namespace;
 }
-var renderToString = (element, options) => current2().renderToString(element, options);
+var renderToString = (element, options) => current3().renderToString(element, options);
 
 // src/utils/render-scope.ts
 function withRenderScope(render2) {
@@ -4584,7 +5173,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 = {};
@@ -4709,10 +5298,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
@@ -4802,7 +5391,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;
     }
   });
@@ -4821,12 +5411,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 ?? ""}]`;
@@ -4877,14 +5467,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) {
@@ -4895,21 +5487,25 @@ 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 };
 }
 
+exports.BLOCK_MAP_VERSION = BLOCK_MAP_VERSION;
 exports.Button = Button4;
 exports.Canvas = Canvas3;
 exports.Circle = Circle2;
 exports.Column = Column4;
+exports.DEFAULT_EMAIL_CLIENTS = DEFAULT_EMAIL_CLIENTS;
 exports.Divider = Divider4;
 exports.Document = Document3;
+exports.EMAIL_CLIENTS = EMAIL_CLIENTS;
 exports.ElementsError = ElementsError;
 exports.Ellipse = Ellipse2;
 exports.Email = Email3;