@hyper-elements/react 0.3.0 → 0.3.1

package/dist/builder.js

@@ -59,21 +59,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) {
@@ -84,6 +89,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) => {
@@ -669,6 +732,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;
 }
@@ -681,6 +764,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 block2 = node[condition.name];
+  return block2 && Object.keys(block2).length ? block2 : 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 = {
@@ -689,7 +820,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 } },
@@ -701,8 +837,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 = {
@@ -715,7 +864,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",
@@ -923,6 +1082,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: [
@@ -935,7 +1103,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: {
@@ -967,13 +1135,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",
@@ -1113,7 +1295,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 = [];
@@ -1249,6 +1434,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,
@@ -1256,6 +1446,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: [
@@ -1499,6 +1695,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"] }] }
 });
@@ -1629,6 +1826,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"] }] }
 });
@@ -1727,17 +1925,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));
@@ -1763,7 +1971,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 own3 = CUSTOM_TYPE.test(definition.type);
+  const hoverStyles = definition.hover ?? [];
+  const toHover = own3 ? `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 = own3 ? `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 && !own3 ? `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);
@@ -1803,6 +2033,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)) {
@@ -1822,21 +2061,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 own3 = {};
+      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 own3[key] = inner;
+      }
+      value = own3;
+    }
+    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 hidden2 = readHidden(input.hidden, `${path}.hidden`, id, context);
@@ -1846,7 +2113,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);
@@ -1859,9 +2126,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)) {
@@ -1878,6 +2150,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",
@@ -1891,10 +2165,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);
@@ -1908,8 +2184,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);
@@ -1920,7 +2200,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;
   }
@@ -1931,7 +2211,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) {
@@ -1964,6 +2244,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();
@@ -1980,7 +2276,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();
@@ -1992,7 +2288,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 block2 = blockOf(node, condition);
+      const byStyle = declared[condition.name];
+      if (!block2 || !byStyle || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      for (const [key, value] of Object.entries(block2)) {
+        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();
@@ -2019,27 +2328,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);
@@ -2491,11 +2807,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(text22, parent, always = []) {
   const out = [];
   for (const [key, property, write3] of TEXT_CSS) {
-    if (!parent || always.includes(key) || !same(text22[key], parent[key])) out.push([property, write3(text22[key])]);
+    if (!parent || always.includes(key) || !same2(text22[key], parent[key])) out.push([property, write3(text22[key])]);
   }
   return out;
 }
@@ -2571,7 +2887,9 @@ function classesOf(name, value) {
   if (name === "class") return (Array.isArray(value) ? value : [value]).filter((v) => typeof v === "string" && v !== "");
   const text22 = styleText(value, true);
   if (!text22) return [];
-  return [name === "phone" ? rule("phone", `&{${text22}}`) : rule("all", `&:hover{${text22}}`, "hover")];
+  if (name === "phone") return [rule(MOBILE.sheet.media, `${MOBILE.sheet.selector}{${text22}}`)];
+  const selector = name === "hoverWithin" ? HOVER.sheet.within ?? HOVER.sheet.selector : HOVER.sheet.selector;
+  return [rule(HOVER.sheet.media, `${selector}{${text22}}`, HOVER.sheet.level)];
 }
 function attributes2(props) {
   const out = [];
@@ -2579,7 +2897,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);
@@ -2595,8 +2913,8 @@ function withId(element2, id) {
   if (!id) return element2;
   const tag = /^<[a-zA-Z0-9]+/.exec(element2.markup)?.[0];
   if (!tag) throw new Error("[Elements] An id goes on an element");
-  const insert = (markup2) => `${tag} id="${escapeAttr(id)}"${markup2.slice(tag.length)}`;
-  return new Html2(insert(element2.markup), { ...element2.options, start: element2.options.start && insert(element2.options.start) });
+  const insert2 = (markup2) => `${tag} id="${escapeAttr(id)}"${markup2.slice(tag.length)}`;
+  return new Html2(insert2(element2.markup), { ...element2.options, start: element2.options.start && insert2(element2.options.start) });
 }
 function h(type, props, ...children) {
   const all = props ?? {};
@@ -2623,6 +2941,98 @@ function Merged({ children }) {
 }
 var open = (element2) => new Html2(element2.options.start ?? element2.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(html2, node) {
+  if (!current) return html2;
+  const mark = `${current.open}${current.nodes.length}${current.close}`;
+  const marked = insert(html2, mark, false) ?? insert(html2, mark, true);
+  if (!marked) return html2;
+  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(markup2, outlook) {
+  for (let i = markup2.indexOf("<"); i >= 0; i = markup2.indexOf("<", i + 1)) {
+    if (markup2.startsWith(OUTLOOK_OPEN, i)) {
+      if (outlook) {
+        i += OUTLOOK_OPEN.length - 1;
+        continue;
+      }
+      const end = markup2.indexOf(OUTLOOK_CLOSE, i);
+      if (end < 0) return -1;
+      i = end + OUTLOOK_CLOSE.length - 1;
+      continue;
+    }
+    if (markup2.startsWith("<!--", i)) {
+      const end = markup2.indexOf("-->", i + 4);
+      if (end < 0) return -1;
+      i = end + 2;
+      continue;
+    }
+    TAG2.lastIndex = i;
+    const tag = TAG2.exec(markup2);
+    if (tag) return i + tag[0].length;
+  }
+  return -1;
+}
+function insert(html2, mark, outlook) {
+  const { list, kind: kind2, start } = html2.options;
+  if (list) {
+    for (let i = 0; i < list.length; i++) {
+      const marked = insert(list[i], mark, outlook);
+      if (marked) return new Html2(html2.markup, { ...html2.options, list: list.map((piece, j) => j === i ? marked : piece) });
+    }
+    return null;
+  }
+  if (kind2 === "outlook" && !outlook) return null;
+  const at = tagEnd(html2.markup, outlook);
+  if (at < 0) return null;
+  const put = (text22) => text22.slice(0, at) + mark + text22.slice(at);
+  return new Html2(put(html2.markup), { ...html2.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 length32 = 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);
+    length32 += 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: length32 });
+  }
+  pieces2.push(written.slice(last));
+  const text22 = pieces2.join("");
+  if (text22.includes(marks.open) || text22.includes(marks.close)) return null;
+  return { text: text22, found };
+}
 function utf8Bytes(text22) {
   let bytes = 0;
   for (let i = 0; i < text22.length; i++) {
@@ -2709,7 +3119,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 {
@@ -2944,7 +3354,7 @@ var Button2 = ({ node, style, mobile, fill, phoneText: phoneText22, text: text22
     {
       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) }
     },
@@ -2955,8 +3365,11 @@ var Button2 = ({ node, style, mobile, fill, phoneText: phoneText22, text: text22
         phone: [phoneText22, { 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 }
         ]
@@ -3420,27 +3833,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 component2 = INLINES[node.type];
     if (!component2) throw new Error(`[Elements] The email exporter can't render a ${node.type} inside text`);
-    return component2(propsOf(node, place, options));
+    const html2 = component2(propsOf(node, place, options));
+    return UNMAPPED.has(node.type) ? html2 : markBlock(html2, node);
   }
   const component = BLOCKS[node.type];
   if (!component) throw new Error(`[Elements] The email exporter can't render a ${node.type} here (in a ${place.parent.type})`);
-  return component(propsOf(node, place, options));
+  return markBlock(component(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 markup2 = withStylesheet(sheet2, () => withBlockMarks(marks, () => String(markBlock(Email2(propsOf(root, { parent: root, fill: false, mobile: {}, inline: false, rtl: false }, options)), root))));
+    return { sheet: sheet2, markup: markup2 };
+  };
+  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;
@@ -3464,7 +3892,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"],
@@ -3472,20 +3901,38 @@ function renderEmail(resolved, options = {}) {
     ["background-color", background]
   ];
   const bodyStyle = css2(bodyDeclarations);
-  const html2 = `<!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 html2 = `${shell}${body}</body></html>`;
   const bytes = utf8Bytes(html2);
+  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: html2, head, body, bodyStyle, diagnostics: d.list };
+  return { html: html2, 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) => {
@@ -3493,41 +3940,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 block2 = blockOf(node, condition);
+      if (!block2 || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      const own3 = condition.support[target];
+      reportDeclared(d, node, `${node.path}.${condition.name}`, condition.name, block2, own3, target);
+      if (!own3 || own3.level === "none") continue;
+      for (const [key, value] of Object.entries(block2)) {
+        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;
@@ -3536,9 +4023,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) {
@@ -3551,7 +4039,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 lines = wrapsWithGap(node);
@@ -3587,6 +4076,86 @@ 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 markup2 = node.props.html.replace(OUTLOOK_ONLY2, "");
+  for (const check of HTML_CSS) {
+    if (check.pattern.test(markup2)) {
+      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 CLEARLY = 1.25;
 var sides = (value) => {
@@ -3718,15 +4287,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 line22 = node.type === "Divider" && node.style.padding !== void 0 ? ">hr" : "";
-    if (width !== void 0) classes.push(rule("phone", `&${line22}{${css2(declarationsOf({ width }), true)}}`));
+    if (width !== void 0) classes.push(rule(MOBILE.sheet.media, `${MOBILE.sheet.selector}${line22}{${css2(declarationsOf({ width }), true)}}`));
     const own3 = node.style.width === void 0 && (node.style.flex === "none" || node.style.flex === 0);
     const basis = own3 ? 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")
@@ -3934,17 +4503,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}}`;
@@ -4118,8 +4687,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,
@@ -4180,7 +4764,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">',
@@ -4200,7 +4785,7 @@ function renderText(resolved, options = {}) {
   const tag = options.mergeTag ?? ((name) => `{{${name}}}`);
   const inline2 = (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";
@@ -4224,7 +4809,7 @@ function renderText(resolved, options = {}) {
     return alt ? `[${upper ? alt.toUpperCase() : alt}]` : "";
   };
   const blocks = (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(inline2(child, Number(child.props.level) <= 2))];
@@ -4262,8 +4847,8 @@ function renderText(resolved, options = {}) {
         return blocks(child);
     }
   });
-  const shown3 = (node) => !(node.hidden?.mobile && node.hidden?.desktop);
-  const list = (node, indent) => node.children.filter((child) => typeof child !== "string" && shown3(child)).map((item, index) => {
+  const shown2 = (node) => shownAnywhere(node);
+  const list = (node, indent) => node.children.filter((child) => typeof child !== "string" && shown2(child)).map((item, index) => {
     const marker2 = node.props.type === "number" ? `${Number(node.props.start) + index}. ` : "- ";
     const lines = [];
     let run = [];
@@ -4279,13 +4864,13 @@ function renderText(resolved, options = {}) {
       }
       flush();
       if (!lines.length) lines.push(`${indent}${marker2}`.trimEnd());
-      if (shown3(child)) lines.push(list(child, `${indent}  `));
+      if (shown2(child)) lines.push(list(child, `${indent}  `));
     }
     flush();
     return (lines.length ? lines : [`${indent}${marker2}`.trimEnd()]).join("\n");
   }).join("\n");
-  const table = (node) => node.children.filter((row) => typeof row !== "string" && shown3(row)).map(
-    (row) => row.children.filter((cell) => typeof cell !== "string" && shown3(cell)).map((cell) => tidy(inline2(cell))).join(" | ")
+  const table = (node) => node.children.filter((row) => typeof row !== "string" && shown2(row)).map(
+    (row) => row.children.filter((cell) => typeof cell !== "string" && shown2(cell)).map((cell) => tidy(inline2(cell))).join(" | ")
   ).join("\n");
   return blocks(resolved.root).filter((block2) => block2.length > 0).join("\n\n");
 }
@@ -4328,52 +4913,56 @@ 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 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 text22 = renderText(resolved, options);
   const written = target === "email" ? renderEmail(resolved, options) : { ...renderPage(resolved, options), diagnostics: [] };
-  const shown3 = (html2) => options.pretty ? prettyHtml(html2) : html2;
-  return { html: shown3(written.html), head: shown3(written.head), body: shown3(written.body), bodyStyle: written.bodyStyle, text: text22, diagnostics: [...diagnostics, ...inTemplate(resolved, written.diagnostics)] };
+  const shown2 = (html2) => options.pretty ? prettyHtml(html2) : html2;
+  const blocks = "blocks" in written ? written.blocks : void 0;
+  return {
+    html: shown2(written.html),
+    head: shown2(written.head),
+    body: shown2(written.body),
+    bodyStyle: written.bodyStyle,
+    text: text22,
+    diagnostics: [...diagnostics, ...inTemplate(resolved, forEmailClients(written.diagnostics, options.emailClients))],
+    ...blocks ? { blocks } : {}
+  };
 }
 
 // src/utils/collect.ts
@@ -4404,7 +4993,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;
@@ -4450,7 +5039,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;
           }
@@ -4464,11 +5053,11 @@ function secondBuild(outer) {
 var buildOf = (outer) => outer === null ? void 0 : [defaultBuild, second].find((b) => !!b && dispatcherOf(b) === outer);
 function withBuild(render) {
   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);
@@ -4493,10 +5082,10 @@ function rendersHere(build) {
     return false;
   }
 }
-function current2() {
+function current3() {
   return using[using.length - 1] ?? defaultBuild;
 }
-var renderToString = (element2, options) => current2().renderToString(element2, options);
+var renderToString = (element2, options) => current3().renderToString(element2, options);
 
 // src/utils/render-scope.ts
 function withRenderScope(render) {
@@ -4545,7 +5134,7 @@ function withoutAsync(children, collection) {
 }
 var ENTITIES2 = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'" };
 var unescape = (text4) => text4.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 = {};
@@ -4670,10 +5259,10 @@ function collectTemplate(element2) {
         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
@@ -4744,9 +5333,8 @@ function propsOf3(node) {
   return {
     ...node.id !== void 0 ? { id: node.id } : {},
     ...node.props,
-    ...node.style && Object.keys(node.style).length ? { style: node.style } : {},
-    ...node.mobile ? { mobile: node.mobile } : {},
-    ...node.hover ? { hover: node.hover } : {},
+    // Phone and hover styles inside the style, as a template writes them now.
+    ...node.style && Object.keys(node.style).length || node.mobile || node.hover ? { style: { ...node.style, ...node.mobile ? { mobile: node.mobile } : {}, ...node.hover ? { hover: node.hover } : {} } } : {},
     ...node.hidden ? { hidden: node.hidden } : {}
   };
 }
@@ -4800,15 +5388,15 @@ function text2(value, flat) {
   return kept ? value : `{${JSON.stringify(value)}}`;
 }
 var inline = (node) => (node.children ?? []).some((child) => typeof child === "string" || ["Span", "Link", "LineBreak", "MergeTag", "PageNumber"].includes(child.type));
-function element(node, indent, flat, path, report2) {
+function element(node, indent, flat, path, report) {
   if (!TYPE_NAME.test(node.type)) {
-    report2.push(`${path}: ${JSON.stringify(node.type)} isn't a component's name: it's left out of the code`);
+    report.push(`${path}: ${JSON.stringify(node.type)} isn't a component's name: it's left out of the code`);
     return flat ? "" : "{/* left out: not a component's name */}";
   }
   const name = tagName(node.type);
-  const attributes5 = Object.entries(propsOf3(node)).filter(([key]) => PROP_NAME.test(key) || (report2.push(`${path}: a prop named ${JSON.stringify(key)} isn't one JSX can write: it's left out of the code`), false)).map(([key, value]) => ` ${attribute(key, value)}`).join("");
+  const attributes5 = Object.entries(propsOf3(node)).filter(([key]) => PROP_NAME.test(key) || (report.push(`${path}: a prop named ${JSON.stringify(key)} isn't one JSX can write: it's left out of the code`), false)).map(([key, value]) => ` ${attribute(key, value)}`).join("");
   const children = node.children ?? [];
-  const child = (c, i, inner2, oneLine) => typeof c === "string" ? text2(c, oneLine) : element(c, inner2, oneLine, `${path}.children[${i}]`, report2);
+  const child = (c, i, inner2, oneLine) => typeof c === "string" ? text2(c, oneLine) : element(c, inner2, oneLine, `${path}.children[${i}]`, report);
   if (!children.length) return `<${name}${attributes5} />`;
   if (flat || inline(node)) return `<${name}${attributes5}>${children.map((c, i) => child(c, i, indent, true)).join("")}</${name}>`;
   const inner = `${indent}  `;
@@ -4816,9 +5404,9 @@ function element(node, indent, flat, path, report2) {
 ${children.map((c, i) => `${inner}${child(c, i, inner, false)}`).join("\n")}
 ${indent}</${name}>`;
 }
-function printTemplate(root, name = "Template", report2 = []) {
+function printTemplate(root, name = "Template", report = []) {
   if (!IDENTIFIER.test(name)) {
-    report2.push(`the component's name ${JSON.stringify(name)} isn't one JavaScript can write: it's named Template`);
+    report.push(`the component's name ${JSON.stringify(name)} isn't one JavaScript can write: it's named Template`);
     name = "Template";
   }
   const used = /* @__PURE__ */ new Set();
@@ -4835,7 +5423,7 @@ function printTemplate(root, name = "Template", report2 = []) {
 
 export default function ${name}() {
   return (
-    ${element(root, "    ", false, "root", report2)}
+    ${element(root, "    ", false, "root", report)}
   );
 }
 `;
@@ -5356,7 +5944,7 @@ function readHidden2(tool, type, values, say) {
 // src/builder/malformed.ts
 var DEPTH = 32;
 var coerces = (value) => ["toString", "valueOf"].some((key) => Object.hasOwn(value, key) && typeof value[key] !== "function");
-function withoutMalformed(design, report2) {
+function withoutMalformed(design, report) {
   const found = [];
   const walk = (value, path) => {
     if (!value || typeof value !== "object" || path.length > DEPTH) return;
@@ -5374,7 +5962,7 @@ function withoutMalformed(design, report2) {
     const last = path[path.length - 1];
     if (Array.isArray(holder)) holder[Number(last)] = null;
     else if (holder) delete holder[last];
-    report2.push(`${path.map((key, i) => /^\d+$/.test(key) ? `[${key}]` : i ? `.${key}` : key).join("")}: a value whose own toString or valueOf isn't a function can't be read: left out`);
+    report.push(`${path.map((key, i) => /^\d+$/.test(key) ? `[${key}]` : i ? `.${key}` : key).join("")}: a value whose own toString or valueOf isn't a function can't be read: left out`);
   }
   return copy2;
 }
@@ -5383,8 +5971,8 @@ function withoutMalformed(design, report2) {
 var ZERO = { top: 0, right: 0, bottom: 0, left: 0 };
 var obj = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
 var str = (value) => typeof value === "string" ? value : void 0;
-var same4 = (a2, b) => JSON.stringify(a2)?.toLowerCase() === JSON.stringify(b)?.toLowerCase();
-var unless = (value, taken) => value === void 0 || same4(value, taken) ? void 0 : value;
+var same5 = (a2, b) => JSON.stringify(a2)?.toLowerCase() === JSON.stringify(b)?.toLowerCase();
+var unless = (value, taken) => value === void 0 || same5(value, taken) ? void 0 : value;
 var lineHeight4 = (value) => {
   const read2 = lineHeight3(value);
   return typeof read2 === "string" && read2.endsWith("%") ? Math.round(parseFloat(read2) * 100) / 1e4 : read2;
@@ -5433,7 +6021,7 @@ function phoneText2(values) {
 }
 
 // src/builder/read-runs.ts
-var TAG2 = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)([^>]*?)\/?\s*>/g;
+var TAG3 = /<(\/?)([a-zA-Z][a-zA-Z0-9]*)([^>]*?)\/?\s*>/g;
 var ATTRIBUTE = /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
 var ENTITIES3 = {
   amp: "&",
@@ -5574,16 +6162,16 @@ function parseRuns(html2, { weight = 400, links = true, builder = false } = {})
   const left = [];
   if (/<[!?]|<\/(?![a-zA-Z])/.test(html2)) left.push("a comment or a processing instruction");
   const lines = [];
-  let current3 = { tag: "", node: null, children: [], weight };
-  const stack = [current3];
+  let current4 = { tag: "", node: null, children: [], weight };
+  const stack = [current4];
   const top = () => stack[stack.length - 1];
   const endParagraph = (last2 = false) => {
     if (stack.length > 1) left.push("a paragraph inside text that's styled");
-    const runs = tidy2(current3.children);
+    const runs = tidy2(current4.children);
     if (runs.length > 1 && isBreak(runs[runs.length - 1]) && !(builder && last2)) runs.pop();
     if (runs.length) lines.push(runs.length === 1 && isBreak(runs[0]) ? [] : runs);
-    current3 = { tag: "", node: null, children: [], weight };
-    stack.splice(0, stack.length, current3);
+    current4 = { tag: "", node: null, children: [], weight };
+    stack.splice(0, stack.length, current4);
   };
   let last = 0;
   let afterParagraph = false;
@@ -5593,7 +6181,7 @@ function parseRuns(html2, { weight = 400, links = true, builder = false } = {})
     const value = decode3(raw2, left);
     if (value) top().children.push(value);
   };
-  for (const match of html2.matchAll(TAG2)) {
+  for (const match of html2.matchAll(TAG3)) {
     const tag = match[2].toLowerCase();
     text4(html2.slice(last, match.index), tag === "p" || tag === "div");
     last = match.index + match[0].length;
@@ -5936,7 +6524,7 @@ function textJsonHtml(textJson) {
 }
 
 // src/builder/text.ts
-var TAG3 = /<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9]*)([^>]*?)(\/?)\s*>/g;
+var TAG4 = /<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9]*)([^>]*?)(\/?)\s*>/g;
 var styleOf2 = (attrs2) => /\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/i.exec(attrs2)?.slice(1).find((v) => v !== void 0) ?? "";
 var declarations2 = (css3) => Object.fromEntries(css3.split(";").map((d) => d.split(":")).filter((p) => p.length >= 2 && p[0].trim()).map(([name, ...rest]) => [name.trim().toLowerCase(), rest.join(":").trim()]));
 var ATTRIBUTES = `(?:[^>"']|"[^"]*"|'[^']*')*`;
@@ -6025,7 +6613,7 @@ var DEEPEST = 64;
 var VOID3 = /* @__PURE__ */ new Set(["br", "img", "hr", "input", "meta", "link", "wbr", "source", "area", "col", "embed", "param", "track"]);
 function tooDeep(html2) {
   let depth = 0;
-  for (const match of html2.matchAll(TAG3)) {
+  for (const match of html2.matchAll(TAG4)) {
     if (match[1]) depth = Math.max(0, depth - 1);
     else if (!match[4] && !VOID3.has(match[2].toLowerCase()) && ++depth > DEEPEST) return true;
   }
@@ -6050,7 +6638,7 @@ function readText(html2, { weight = 400, pages = false, links = true, fontSize =
     inline2 = "";
   };
   let at = 0;
-  for (const match of [...html2.matchAll(TAG3)]) {
+  for (const match of [...html2.matchAll(TAG4)]) {
     if (match.index < at) continue;
     const tag = match[2].toLowerCase();
     if (match[1] || !/^(p|ul|ol|h[1-6])$/.test(tag)) continue;
@@ -6147,7 +6735,7 @@ function readList(tag, attrs2, inner, runs, fontSize, left) {
   const items2 = [];
   let gap;
   let at = 0;
-  for (const match of [...inner.matchAll(TAG3)]) {
+  for (const match of [...inner.matchAll(TAG4)]) {
     if (match.index < at || match[1] || match[2].toLowerCase() !== "li") continue;
     const end = closing(inner, "li", match.index + match[0].length);
     if (end === null) {
@@ -6393,14 +6981,14 @@ function sayUnread(tool, values, defaults, say) {
   const given = defaults ?? FRAMES[tool] ?? {};
   const known = /* @__PURE__ */ new Set([...NOTHING, ...read2.values, ...hidden2]);
   for (const [key, value] of Object.entries(values)) {
-    if (known.has(key) || tool === "body" && key.startsWith("popup") || empty(value) || Object.hasOwn(given, key) && same4(value, given[key])) continue;
+    if (known.has(key) || tool === "body" && key.startsWith("popup") || empty(value) || Object.hasOwn(given, key) && same5(value, given[key])) continue;
     say(Object.hasOwn(WHAT, key) ? `its ${WHAT[key]}` : `its ${key} ${JSON.stringify(value) ?? ""} isn't read: left out`);
   }
   const override = values._override && typeof values._override === "object" ? values._override : {};
   const phone = override.mobile && typeof override.mobile === "object" ? override.mobile : {};
   const phoneKnown = /* @__PURE__ */ new Set([...read2.phone, ...hidden2]);
   for (const [key, value] of Object.entries(phone)) {
-    if (phoneKnown.has(key) || empty(value) || same4(value, values[key])) continue;
+    if (phoneKnown.has(key) || empty(value) || same5(value, values[key])) continue;
     say(`its ${key} on phones ${JSON.stringify(value) ?? ""} isn't read: left out`);
   }
   for (const device of Object.keys(override)) {
@@ -6648,8 +7236,8 @@ function fold(blocks, space) {
     if (!some(s)) return block2;
     const holds = ["Text", "Heading", "Divider", "Column"].includes(block2.type) && !BOX2.some((key) => block2.style?.[key] !== void 0);
     if (holds) return { ...block2, style: { ...block2.style, padding: add2(block2.style?.padding ?? ZERO2, s) } };
-    const { hidden: hidden2, ...shown3 } = block2;
-    return { type: "Column", style: { padding: s }, ...hidden2 ? { hidden: hidden2 } : {}, children: [shown3] };
+    const { hidden: hidden2, ...shown2 } = block2;
+    return { type: "Column", style: { padding: s }, ...hidden2 ? { hidden: hidden2 } : {}, children: [shown2] };
   });
 }
 function phoneOf(columnValues) {
@@ -6682,14 +7270,14 @@ function columnOf(columnValues, children, share3, say) {
 function stretched(columns, stacks) {
   if (columns.length < 2) return { style: {} };
   const style = (column) => column.style ?? {};
-  const same5 = (values) => values[0] !== void 0 && values.every((value) => JSON.stringify(value) === JSON.stringify(values[0]));
+  const same6 = (values) => values[0] !== void 0 && values.every((value) => JSON.stringify(value) === JSON.stringify(values[0]));
   const out = {};
   const backgrounds = columns.map((column) => style(column).backgroundColor);
-  if (same5(backgrounds) && columns.every((column) => style(column).borderRadius === void 0)) out.backgroundColor = backgrounds[0];
+  if (same6(backgrounds) && columns.every((column) => style(column).borderRadius === void 0)) out.backgroundColor = backgrounds[0];
   const lines = {};
   for (const side2 of ["top", "bottom"]) {
     const each = columns.map((column) => style(column).border?.[side2]);
-    if (same5(each)) lines[side2] = each[0];
+    if (same6(each)) lines[side2] = each[0];
   }
   if (!out.backgroundColor && !Object.keys(lines).length) return { style: {} };
   for (const column of columns) {
@@ -6786,13 +7374,13 @@ var defined3 = (record) => Object.fromEntries(Object.entries(record).filter(([,
 var wordsIn = (value, depth) => typeof value === "string" ? [value] : depth > 0 && value && typeof value === "object" ? Object.values(value).flatMap((held) => wordsIn(held, depth - 1)) : [];
 var ROOTS = { email: "Email", web: "Page", document: "Document" };
 var SIZES2 = /* @__PURE__ */ new Set(["A3", "A4", "A5", "Letter", "Legal", "Tabloid"]);
-function readDesign(given, displayMode, report2, toSafeHtml) {
-  const design = withoutMalformed(given, report2);
+function readDesign(given, displayMode, report, toSafeHtml) {
+  const design = withoutMalformed(given, report);
   const body = obj3(obj3(design).body);
-  if (!Object.keys(body).length) report2.push("the design has no body: an empty template");
+  if (!Object.keys(body).length) report.push("the design has no body: an empty template");
   const values = { ...BodyDefaults, ...obj3(body.values) };
   const rowsOf = (key) => {
-    if (body[key] !== void 0 && !Array.isArray(body[key])) report2.push(`body.${key} isn't a list of rows: left out`);
+    if (body[key] !== void 0 && !Array.isArray(body[key])) report.push(`body.${key} isn't a list of rows: left out`);
     return arr2(body[key]);
   };
   const rows = rowsOf("rows");
@@ -6800,15 +7388,15 @@ function readDesign(given, displayMode, report2, toSafeHtml) {
   const footers = rowsOf("footers");
   const breaks = rows.some((row) => arr2(obj3(row).columns).some((column) => arr2(obj3(column).contents).some((content2) => obj3(content2).type === "page_break")));
   const mode = displayMode && Object.hasOwn(ROOTS, displayMode) ? displayMode : headers.length || footers.length || breaks ? "document" : "email";
-  const root = rootOf(mode, values, (message) => report2.push(`body: ${message}`));
-  sayUnread("body", obj3(body.values), void 0, (message) => report2.push(`body: ${message}`));
+  const root = rootOf(mode, values, (message) => report.push(`body: ${message}`));
+  sayUnread("body", obj3(body.values), void 0, (message) => report.push(`body: ${message}`));
   const context = (where) => ({
     inherited: { color: root.style?.color ?? "#000000", fontFamily: root.style?.fontFamily ?? "Arial, Helvetica, sans-serif", fontWeight: root.style?.fontWeight ?? 400 },
     mode,
     dir: root.props?.dir ?? "ltr",
     safe: (html2) => toSafeHtml ? toSafeHtml(html2) : html2,
     document: mode === "document",
-    say: (message) => report2.push(`${where}: ${message}`)
+    say: (message) => report.push(`${where}: ${message}`)
   });
   const children = [];
   const place = (list, part) => list.flatMap((row, r) => readRow(obj3(row), `${part}[${r}]`, { context, body: values, document: mode === "document", part: mode === "document" && part !== "rows" }));
@@ -6823,12 +7411,12 @@ function readDesign(given, displayMode, report2, toSafeHtml) {
   }
   const all = [...rows, ...headers, ...footers];
   const items2 = all.flatMap((row) => [row, ...arr2(obj3(row).columns).flatMap((column) => [column, ...arr2(obj3(column).contents)])]).map((item) => obj3(obj3(item).values));
-  if (items2.some((held) => held.hideMobile === true || held.hideDesktop === true)) report2.push("body: what it hides on phones or on desktop is written as an older design's, which the builder moves when it opens one: left out, so it shows. Open it in the builder and save it first");
+  if (items2.some((held) => held.hideMobile === true || held.hideDesktop === true)) report.push("body: what it hides on phones or on desktop is written as an older design's, which the builder moves when it opens one: left out, so it shows. Open it in the builder and save it first");
   const ownFonts = new Set(arr2(root.props?.fonts).map((face) => obj3(face).family));
   const webFonts = [...new Set([values, ...items2].map((held) => obj3(held.fontFamily)).filter((family) => typeof family.url === "string" && family.url && !ownFonts.has(family.label)).map((family) => String(family.label ?? family.value)))];
-  if (webFonts.length) report2.push(`body: ${webFonts.join(", ")}: web fonts the builder loads from a stylesheet, which a root doesn't take (its fonts are font files): left out, so text shows in the next font of its stack`);
+  if (webFonts.length) report.push(`body: ${webFonts.join(", ")}: web fonts the builder loads from a stylesheet, which a root doesn't take (its fonts are font files): left out, so text shows in the next font of its stack`);
   const tags = [...new Set(wordsIn(all, 12).flatMap((text4) => [...text4.matchAll(/\[\[\s*[\w.-]+\s*\]\]/g)].map((match) => match[0])))];
-  if (tags.length) report2.push(`body: ${tags.join(", ")}: design tags are filled in by the builder, from what it's given: written as they are`);
+  if (tags.length) report.push(`body: ${tags.join(", ")}: design tags are filled in by the builder, from what it's given: written as they are`);
   return { ...root, children };
 }
 function rootOf(mode, values, say) {
@@ -6870,23 +7458,23 @@ function rootOf(mode, values, say) {
 // src/builder/check.ts
 var LINK = definitionOf("Link").props.href.kind;
 var holdsText = (type) => !!definitionOf(type)?.children?.text;
-function itemLinks(value, key, path, report2) {
+function itemLinks(value, key, path, report) {
   if (!Array.isArray(value)) return value;
   return value.map((item, i) => {
     if (!item || typeof item !== "object" || Array.isArray(item) || !("href" in item) || LINK.parse(item.href).ok) return item;
-    report2.push(`${path}: its ${key}[${i}]'s link ${JSON.stringify(item.href)} isn't one Elements writes: it's "#"`);
+    report.push(`${path}: its ${key}[${i}]'s link ${JSON.stringify(item.href)} isn't one Elements writes: it's "#"`);
     return { ...item, href: "#" };
   });
 }
-function checkNode(node, path, report2, inText2 = false) {
+function checkNode(node, path, report, inText2 = false) {
   const definition = definitionOf(node.type);
   if (!definition) {
-    report2.push(`${path}: ${JSON.stringify(node.type)} isn't a component: left out`);
+    report.push(`${path}: ${JSON.stringify(node.type)} isn't a component: left out`);
     return null;
   }
   const out = { ...node };
   if (out.id !== void 0 && !/^[A-Za-z][\w-]*$/.test(out.id)) {
-    report2.push(`${path}: its id ${JSON.stringify(out.id)} isn't one a template takes: left out`);
+    report.push(`${path}: its id ${JSON.stringify(out.id)} isn't one a template takes: left out`);
     delete out.id;
   }
   for (const part of ["props", "style", "mobile", "hover"]) {
@@ -6895,7 +7483,7 @@ function checkNode(node, path, report2, inText2 = false) {
     const specs = part === "props" ? definition.props : definition.style;
     const kept = {};
     for (const [key, given] of Object.entries(values)) {
-      const value = part === "props" ? itemLinks(given, key, path, report2) : given;
+      const value = part === "props" ? itemLinks(given, key, path, report) : given;
       const spec = Object.hasOwn(specs, key) ? specs[key] : void 0;
       const parsed = spec ? spec.kind.parse(value) : void 0;
       if (parsed?.ok) {
@@ -6904,35 +7492,35 @@ function checkNode(node, path, report2, inText2 = false) {
       }
       if (part === "props" && (key === "href" || key === "src")) {
         if (node.type === "Button") {
-          report2.push(`${path}: its link ${JSON.stringify(value)} isn't one Elements writes: it's "#"`);
+          report.push(`${path}: its link ${JSON.stringify(value)} isn't one Elements writes: it's "#"`);
           kept.href = "#";
           continue;
         }
         if (node.type !== "Link") {
-          report2.push(`${path}: its ${key} ${JSON.stringify(value)} isn't one Elements writes: left out`);
+          report.push(`${path}: its ${key} ${JSON.stringify(value)} isn't one Elements writes: left out`);
           return null;
         }
-        report2.push(`${path}: its ${key} ${JSON.stringify(value)} isn't one Elements writes: ${inText2 ? "its words" : "what it holds"} without it`);
-        const children = checkChildren(node.children ?? [], path, report2, true);
+        report.push(`${path}: its ${key} ${JSON.stringify(value)} isn't one Elements writes: ${inText2 ? "its words" : "what it holds"} without it`);
+        const children = checkChildren(node.children ?? [], path, report, true);
         return inText2 ? { type: "Span", children } : children;
       }
-      report2.push(`${path}: its ${part === "props" ? "" : `${part} `}${key} ${JSON.stringify(value)}${parsed && !parsed.ok ? ` (${parsed.message})` : ""} isn't one a ${node.type} takes: left out`);
+      report.push(`${path}: its ${part === "props" ? "" : `${part} `}${key} ${JSON.stringify(value)}${parsed && !parsed.ok ? ` (${parsed.message})` : ""} isn't one a ${node.type} takes: left out`);
     }
     if (Object.keys(kept).length) out[part] = kept;
     else delete out[part];
   }
-  if (node.children) out.children = checkChildren(node.children, path, report2, holdsText(node.type));
+  if (node.children) out.children = checkChildren(node.children, path, report, holdsText(node.type));
   return out;
 }
-function checkChildren(children, path, report2, inText2) {
+function checkChildren(children, path, report, inText2) {
   return children.flatMap((child, i) => {
     if (typeof child === "string") return [child];
-    const checked = checkNode(child, `${path}.children[${i}]`, report2, inText2);
+    const checked = checkNode(child, `${path}.children[${i}]`, report, inText2);
     return Array.isArray(checked) ? checked : checked ? [checked] : [];
   });
 }
-function checkTemplate(root, report2) {
-  const checked = checkNode(root.type === "Document" ? withoutPhones(root) : root, "root", report2);
+function checkTemplate(root, report) {
+  const checked = checkNode(root.type === "Document" ? withoutPhones(root) : root, "root", report);
   return checked && !Array.isArray(checked) ? checked : { type: root.type };
 }
 function withoutPhones(node) {
@@ -7608,7 +8196,8 @@ function renderSubtree(node, width, root, components, inherited) {
   const tokens2 = (n) => n.type === "PageNumber" ? { type: "MergeTag", props: { name: n.props?.total ? "page_count" : "page_number" } } : n.children ? { ...n, children: n.children.map((child) => typeof child === "string" ? child : tokens2(child)) } : n;
   const own3 = tokens2(node);
   const around = { ...inherited, ...drawn < 200 ? { width: drawn } : {} };
-  const page = { type: root.type === "Email" ? "Email" : "Page", props: { width: Math.max(200, drawn) }, style: root.style, children: [Object.keys(around).length ? { type: "Column", style: around, children: [own3] } : own3] };
+  const breakpoints2 = root.type === "Page" && root.props?.breakpoints ? { breakpoints: root.props.breakpoints } : {};
+  const page = { type: root.type === "Email" ? "Email" : "Page", props: { width: Math.max(200, drawn), ...breakpoints2 }, style: root.style, children: [Object.keys(around).length ? { type: "Column", style: around, children: [own3] } : own3] };
   const { head, body } = renderTemplate({ root: page }, { components });
   const style = /<style>[\s\S]*?<\/style>/.exec(head)?.[0] ?? "";
   const filled = body.replace(/^<main style="/, '<main style="width:100%;');
@@ -7620,14 +8209,14 @@ var holdsPageNumber = (node) => node.type === "PageNumber" || (node.children ??
 var PAINT2 = ["backgroundColor", "border", "borderRadius"];
 var BROWSER_TEXT = { fontSize: 16, fontStyle: "normal", letterSpacing: 0, textAlign: "left", textTransform: "none" };
 function raise(element2) {
-  const report2 = [];
+  const report = [];
   const { document, diagnostics, components } = collectTemplate(element2);
   if (!document || diagnostics.some((d) => d.severity === "error")) return { body: null, report: diagnostics.filter((d) => d.severity === "error").map((d) => `${d.path}: ${d.message}`) };
   const root = document.root;
   if (root.type !== "Email" && root.type !== "Page" && root.type !== "Document") {
     return { body: null, report: [`root: the builder edits an Email, a Page or a Document, not a ${root.type}`] };
   }
-  if (holdsPageNumber(root)) report2.push("root: a PageNumber goes to the builder as its token ({{page_number}}), which the editor's PDF prints as it is: the builder has no page numbers yet");
+  if (holdsPageNumber(root)) report.push("root: a PageNumber goes to the builder as its token ({{page_number}}), which the editor's PDF prints as it is: the builder has no page numbers yet");
   const prepared = prepareTemplate(document, { components });
   if (!prepared.resolved) return { body: null, report: prepared.diagnostics.filter((d) => d.severity === "error").map((d) => `${d.path}: ${d.message}`) };
   const resolvedRoot = prepared.resolved.root;
@@ -7644,7 +8233,7 @@ function raise(element2) {
   };
   const sayLeftOut = (tool, node, path, fields) => {
     const left = leftOut(tool, node, fields);
-    if (left.length) report2.push(`${path}: the builder's ${tool} has no place for ${left.join(", ")}: left out`);
+    if (left.length) report.push(`${path}: the builder's ${tool} has no place for ${left.join(", ")}: left out`);
   };
   const unsized = (node, path) => childrenOf2(node, path).some(({ child, path: childPath }) => !child.hidden?.desktop && resolved.get(childPath)?.width === null);
   const childrenOf2 = (node, path) => (node.children ?? []).map((child, i) => ({ child, path: `${path}.children[${i}]` })).filter((c) => typeof c.child !== "string");
@@ -7663,11 +8252,11 @@ function raise(element2) {
   };
   const place = {
     at,
-    report: report2,
+    report,
     put,
     sayLeftOut,
     locked: (node, path, why, around) => {
-      report2.push(`${path}: ${why}: ${root.type === "Document" ? `it's an HTML block of its own markup in the design: ${NOT_IN_DOCUMENTS}` : "it's an HTML block of its own markup in the builder (it can be moved, not edited)"}`);
+      report.push(`${path}: ${why}: ${root.type === "Document" ? `it's an HTML block of its own markup in the design: ${NOT_IN_DOCUMENTS}` : "it's an HTML block of its own markup in the builder (it can be moved, not edited)"}`);
       const own3 = at(path);
       return put(lockedHtml(node, own3.width ?? own3.available ?? Number(resolvedRoot.width), root, components, around, inheritedText(path)));
     },
@@ -7801,7 +8390,7 @@ function raise(element2) {
       const own3 = at(path);
       sayLeftOut("row", child, path, ["style.backgroundColor", "style.padding", "style.border", "style.gap", "style.alignItems", ...TEXT_FOLDED]);
       const band = own3.style.backgroundColor !== void 0 ? { backgroundColor: own3.style.backgroundColor } : {};
-      if (child.mobile?.border !== void 0) report2.push(`${path}: the builder's row has no border on phones: left out`);
+      if (child.mobile?.border !== void 0) report.push(`${path}: the builder's row has no border on phones: left out`);
       const sectionRows = rows(childrenOf2(child, path), own3, band, padding2(child), child);
       if (child.id && sectionRows[0]) put(sectionRows[0], builderId(child.id, "u_row"));
       body.push(...sectionRows.length ? sectionRows : [oneColumn([], own3, band, padding2(child), {}, hiding2(child))]);
@@ -7815,7 +8404,7 @@ function raise(element2) {
     } else if (child.type === "PageBreak") {
       flushLoose();
       const content2 = top.slice(i + 1).some((c) => !["PageHeader", "PageFooter", "PageBreak"].includes(c.child.type));
-      if (last === null || !content2) report2.push(`${path}: a page break with nothing before or after it is no page in Elements, and a blank page in the builder`);
+      if (last === null || !content2) report.push(`${path}: a page break with nothing before or after it is no page in Elements, and a blank page in the builder`);
       body.push(pageBreak());
       last = "break";
     } else if (child.type === "PageHeader" || child.type === "PageFooter") {
@@ -7858,10 +8447,10 @@ function raise(element2) {
   const bodyHidden = { ...hiddenOf("body", root, ["props.margin"]), ...margin, ...title, backgroundColor: style.backgroundColor ?? "" };
   if (root.type === "Document") {
     const paper = { documentSize: root.props?.size ?? "A4", documentOrientation: root.props?.orientation ?? "portrait" };
-    return { body: { root: root.type, fields: { ...common, ...paper }, values: bodyHidden, rows: body, headers, footers }, report: report2 };
+    return { body: { root: root.type, fields: { ...common, ...paper }, values: bodyHidden, rows: body, headers, footers }, report };
   }
   const previewText = root.type === "Email" && root.props?.previewText ? { previewText: String(root.props.previewText) } : {};
-  return { body: { root: root.type, fields: common, ...previewText, values: bodyHidden, rows: body }, report: report2 };
+  return { body: { root: root.type, fields: common, ...previewText, values: bodyHidden, rows: body }, report };
 }
 function countRows(children) {
   let count = 0;
@@ -7907,10 +8496,10 @@ function nodeOf(node) {
 
 // src/builder/write.ts
 function writeDesign(element2) {
-  const { body, report: report2 } = raise(element2);
+  const { body, report } = raise(element2);
   if (!body) throw new Error(`[Elements] This template can't go to the builder:
-${report2.join("\n")}`);
-  return { design: withFontStylesheets(writeParts(body)), report: report2 };
+${report.join("\n")}`);
+  return { design: withFontStylesheets(writeParts(body)), report };
 }
 
 // src/builder/index.ts
@@ -7918,10 +8507,10 @@ function toDesign(element2) {
   return writeDesign(element2);
 }
 function fromDesign(design, options = {}) {
-  const report2 = [];
-  const root = checkTemplate(uniqueIds(readDesign(design, options.displayMode, report2, options.toSafeHtml)), report2);
-  const code = printTemplate(root, options.name, report2);
-  return { element: toElement(root), code, report: report2 };
+  const report = [];
+  const root = checkTemplate(uniqueIds(readDesign(design, options.displayMode, report, options.toSafeHtml)), report);
+  const code = printTemplate(root, options.name, report);
+  return { element: toElement(root), code, report };
 }
 
 export { fromDesign, toDesign };