@hyper-elements/react 0.0.1 → 0.3.1

package/dist/inspect.js

@@ -0,0 +1,3572 @@
+import React from 'react';
+import * as defaultBuild from 'react-dom/server';
+
+// src/inspect/index.ts
+
+// ../core/dist/index.js
+function isNode(child) {
+  return typeof child === "object" && child !== null;
+}
+var Diagnostics = class {
+  constructor() {
+    this.list = [];
+  }
+  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, extra) {
+    this.add(code, "warning", message, path, nodeId, extra);
+  }
+  get hasErrors() {
+    return this.list.some((d) => d.severity === "error");
+  }
+};
+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 same4 = seen.get(key);
+    if (same4) same4.clients = [.../* @__PURE__ */ new Set([...same4.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) => {
+  try {
+    return typeof input === "string" ? JSON.stringify(input) : typeof input === "function" ? "a function" : JSON.stringify(input) ?? String(input);
+  } catch {
+    return String(input);
+  }
+};
+var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function kind(spec) {
+  return spec;
+}
+var NUMBER = "-?(?:\\d+(?:\\.\\d*)?|\\.\\d+)";
+var LENGTH = new RegExp(`^(${NUMBER})(px|%|pt|mm|in)?$`);
+function readLength(input) {
+  if (typeof input === "number") return Number.isFinite(input) ? { value: input, unit: "px" } : void 0;
+  if (typeof input !== "string") return void 0;
+  const match = LENGTH.exec(input.trim());
+  return match ? { value: Number(match[1]), unit: match[2] ?? "px" } : void 0;
+}
+function px(input, min, what) {
+  const length3 = readLength(input);
+  if (!length3 || length3.unit !== "px") return fail(`${what} must be a number of px or a px string ("8px"), not ${show(input)}`);
+  if (length3.value < min) return fail(`${what} can't be less than ${min}, not ${show(input)}`);
+  return ok(length3.value);
+}
+function length(units = ["px"], options = {}) {
+  const min = options.min ?? 0;
+  const accepts = `a length (${units.map((u) => u === "px" ? "a number of px" : u).join(", ")})`;
+  return kind({
+    name: "length",
+    editor: "length",
+    accepts,
+    parse(input) {
+      const parsed = readLength(input);
+      if (!parsed) return fail(`expected ${accepts}, not ${show(input)}`);
+      if (!units.includes(parsed.unit)) return fail(`${parsed.unit} isn't accepted here; expected ${accepts}`);
+      if (parsed.value < min) return fail(`can't be less than ${min}, not ${show(input)}`);
+      return ok(parsed.unit === "px" ? parsed.value : `${parsed.value}${parsed.unit}`);
+    },
+    jsonSchema: () => ({
+      anyOf: [
+        ...units.includes("px") ? [{ type: "number", minimum: min }] : [],
+        { type: "string", pattern: `^${NUMBER}(${units.map((u) => u === "%" ? "%" : u).join("|")})${units.includes("px") ? "?" : ""}$` }
+      ]
+    })
+  });
+}
+function number(options = {}) {
+  const { min = -Infinity, max = Infinity, integer = false } = options;
+  const accepts = `${integer ? "an integer" : "a number"}${Number.isFinite(min) ? ` from ${min}` : ""}${Number.isFinite(max) ? ` to ${max}` : ""}`;
+  return kind({
+    name: "number",
+    editor: "number",
+    accepts,
+    parse(input) {
+      if (typeof input !== "number" || !Number.isFinite(input) || integer && !Number.isInteger(input) || input < min || input > max) {
+        return fail(`expected ${accepts}, not ${show(input)}`);
+      }
+      return ok(input);
+    },
+    jsonSchema: () => ({
+      type: integer ? "integer" : "number",
+      ...Number.isFinite(min) ? { minimum: min } : {},
+      ...Number.isFinite(max) ? { maximum: max } : {}
+    })
+  });
+}
+function flex() {
+  return kind({
+    name: "flex",
+    editor: "number",
+    accepts: 'a share of the free width (0 or more), or "none"',
+    parse: (input) => input === "none" || typeof input === "number" && Number.isFinite(input) && input >= 0 ? ok(input) : fail(`expected a share of the free width (0 or more) or "none", not ${show(input)}`),
+    jsonSchema: () => ({ anyOf: [{ type: "number", minimum: 0 }, { const: "none" }] })
+  });
+}
+var SIDES = ["top", "right", "bottom", "left"];
+function fourSides(values) {
+  const [a2, b = a2, c = a2, d = b] = values;
+  return [a2, b, c, d];
+}
+function insets() {
+  const accepts = 'px for all sides, "8px 16px" (1 to 4 values), [v, h] or [t, r, b, l], or { top, right, bottom, left }';
+  const read2 = (values) => {
+    if (values.length < 1 || values.length > 4) return fail(`expected ${accepts}`);
+    const out = [];
+    for (const value of values) {
+      const side2 = px(value, 0, "each side");
+      if (!side2.ok) return side2;
+      out.push(side2.value);
+    }
+    const [top, right, bottom, left] = fourSides(out);
+    return ok({ top, right, bottom, left });
+  };
+  return kind({
+    name: "insets",
+    editor: "insets",
+    accepts,
+    parse(input) {
+      if (typeof input === "number") return read2([input]);
+      if (typeof input === "string") return read2(input.trim().split(/\s+/));
+      if (Array.isArray(input)) return read2(input);
+      if (isObject(input)) {
+        const extra = Object.keys(input).find((key) => !SIDES.includes(key));
+        if (extra) return fail(`"${extra}" isn't a side; expected top, right, bottom or left`);
+        const out = { top: 0, right: 0, bottom: 0, left: 0 };
+        for (const side2 of SIDES) {
+          if (input[side2] === void 0) continue;
+          const value = px(input[side2], 0, side2);
+          if (!value.ok) return value;
+          out[side2] = value.value;
+        }
+        return ok(out);
+      }
+      return fail(`expected ${accepts}, not ${show(input)}`);
+    },
+    jsonSchema: () => {
+      const side2 = { anyOf: [{ type: "number", minimum: 0 }, { type: "string", pattern: `^${NUMBER}(px)?$` }] };
+      return {
+        anyOf: [
+          side2.anyOf[0],
+          { type: "string" },
+          { type: "array", items: side2, minItems: 1, maxItems: 4 },
+          { type: "object", properties: Object.fromEntries(SIDES.map((s) => [s, side2])), additionalProperties: false }
+        ]
+      };
+    }
+  });
+}
+var BORDER_STYLES = ["solid", "dashed", "dotted", "none"];
+function borderSide(input) {
+  const out = { width: 1, style: "solid", color: "#000000" };
+  if (typeof input === "string") {
+    for (const token of input.match(/rgba?\([^)]*\)|\S+/g) ?? []) {
+      if (readLength(token)) {
+        const width = px(token, 0, "a border's width");
+        if (!width.ok) return width;
+        out.width = width.value;
+      } else if (BORDER_STYLES.includes(token)) {
+        out.style = token;
+      } else {
+        const c = parseColor(token);
+        if (!c.ok) return fail(`"${token}" in ${show(input)} isn't a width, a style (${BORDER_STYLES.join(", ")}) or a color`);
+        out.color = c.value;
+      }
+    }
+    return ok(out);
+  }
+  if (!isObject(input)) return fail(`expected "1px solid #ccc" or { width, style, color }, not ${show(input)}`);
+  const extra = Object.keys(input).find((key) => !["width", "style", "color"].includes(key));
+  if (extra) return fail(`"${extra}" isn't part of a border side; expected width, style or color`);
+  if (input.width !== void 0) {
+    const width = px(input.width, 0, "a border's width");
+    if (!width.ok) return width;
+    out.width = width.value;
+  }
+  if (input.style !== void 0) {
+    if (!BORDER_STYLES.includes(input.style)) return fail(`a border's style is one of ${BORDER_STYLES.join(", ")}, not ${show(input.style)}`);
+    out.style = input.style;
+  }
+  if (input.color !== void 0) {
+    const c = parseColor(input.color);
+    if (!c.ok) return c;
+    out.color = c.value;
+  }
+  return ok(out);
+}
+function line() {
+  return kind({
+    name: "line",
+    editor: "border",
+    accepts: '"1px solid #ccc" or { width, style, color }',
+    parse: (input) => borderSide(input),
+    jsonSchema: () => ({
+      anyOf: [
+        { type: "string" },
+        {
+          type: "object",
+          properties: { width: { anyOf: [{ type: "number", minimum: 0 }, { type: "string" }] }, style: { enum: [...BORDER_STYLES] }, color: { type: "string" } },
+          additionalProperties: false
+        }
+      ]
+    })
+  });
+}
+function border() {
+  return kind({
+    name: "border",
+    editor: "border",
+    accepts: '"1px solid #ccc", { width, style, color } for all sides, or { top, right, bottom, left } with one of those each',
+    parse(input) {
+      const perSide = isObject(input) && Object.keys(input).some((key) => SIDES.includes(key));
+      if (!perSide) {
+        const side2 = borderSide(input);
+        return side2.ok ? ok({ top: side2.value, right: side2.value, bottom: side2.value, left: side2.value }) : side2;
+      }
+      const out = {};
+      for (const [key, value] of Object.entries(input)) {
+        if (!SIDES.includes(key)) return fail(`"${key}" isn't a side; expected top, right, bottom or left`);
+        const side2 = borderSide(value);
+        if (!side2.ok) return fail(`${key}: ${side2.message}`);
+        out[key] = side2.value;
+      }
+      return ok(out);
+    },
+    jsonSchema: () => {
+      const side2 = {
+        anyOf: [
+          { type: "string" },
+          {
+            type: "object",
+            properties: { width: { anyOf: [{ type: "number", minimum: 0 }, { type: "string" }] }, style: { enum: [...BORDER_STYLES] }, color: { type: "string" } },
+            additionalProperties: false
+          }
+        ]
+      };
+      return { anyOf: [...side2.anyOf, { type: "object", properties: Object.fromEntries(SIDES.map((s) => [s, side2])), additionalProperties: false }] };
+    }
+  });
+}
+var CORNERS = ["topLeft", "topRight", "bottomRight", "bottomLeft"];
+function radius() {
+  const accepts = "px for every corner, [topLeft, topRight, bottomRight, bottomLeft], or { topLeft, topRight, bottomRight, bottomLeft }";
+  return kind({
+    name: "radius",
+    editor: "radius",
+    accepts,
+    parse(input) {
+      let values;
+      if (Array.isArray(input)) {
+        if (input.length !== 4) return fail(`expected ${accepts}`);
+        values = input;
+      } else if (isObject(input)) {
+        const extra = Object.keys(input).find((key) => !CORNERS.includes(key));
+        if (extra) return fail(`"${extra}" isn't a corner; expected ${CORNERS.join(", ")}`);
+        values = CORNERS.map((corner) => input[corner] ?? 0);
+      } else {
+        return px(input, 0, "a radius");
+      }
+      const out = [];
+      for (const value of values) {
+        const corner = px(value, 0, "a corner");
+        if (!corner.ok) return corner;
+        out.push(corner.value);
+      }
+      if (out.every((value) => value === out[0])) return ok(out[0]);
+      const [topLeft, topRight, bottomRight, bottomLeft] = out;
+      return ok({ topLeft, topRight, bottomRight, bottomLeft });
+    },
+    jsonSchema: () => {
+      const corner = { anyOf: [{ type: "number", minimum: 0 }, { type: "string", pattern: `^${NUMBER}(px)?$` }] };
+      return {
+        anyOf: [
+          ...corner.anyOf,
+          { type: "array", items: corner, minItems: 4, maxItems: 4 },
+          { type: "object", properties: Object.fromEntries(CORNERS.map((c) => [c, corner])), additionalProperties: false }
+        ]
+      };
+    }
+  });
+}
+function enumOf(values) {
+  const accepts = `one of ${values.map((v) => JSON.stringify(v)).join(", ")}`;
+  return kind({
+    name: "enum",
+    editor: "choice",
+    accepts,
+    parse: (input) => values.includes(input) ? ok(input) : fail(`expected ${accepts}, not ${show(input)}`),
+    jsonSchema: () => ({ enum: [...values] })
+  });
+}
+function text(options = {}) {
+  return kind({
+    name: "text",
+    editor: "text",
+    accepts: "text",
+    parse(input) {
+      if (typeof input !== "string") return fail(`expected text, not ${show(input)}`);
+      if (options.maxLength !== void 0 && input.length > options.maxLength) return fail(`is longer than ${options.maxLength} characters`);
+      if (options.pattern && !options.pattern.test(input)) return fail(options.mismatch ?? `doesn't match ${options.pattern.source}`);
+      return ok(input);
+    },
+    jsonSchema: () => ({ type: "string", ...options.maxLength !== void 0 ? { maxLength: options.maxLength } : {}, ...options.pattern ? { pattern: options.pattern.source } : {} })
+  });
+}
+function boolean() {
+  return kind({
+    name: "boolean",
+    editor: "toggle",
+    accepts: "true or false",
+    parse: (input) => typeof input === "boolean" ? ok(input) : fail(`expected true or false, not ${show(input)}`),
+    jsonSchema: () => ({ type: "boolean" })
+  });
+}
+var NAMED_COLORS = new Set(
+  "aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent".split(" ")
+);
+var HEX = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+var RGB = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*\.?\d+%?)\s*)?\)$/i;
+var hex2 = (n) => n.toString(16).padStart(2, "0");
+function parseColor(input) {
+  if (typeof input !== "string") return fail(`expected a color ("#0879a1", "rgb(\u2026)", "rgba(\u2026)" or a CSS name), not ${show(input)}`);
+  const value = input.trim().toLowerCase();
+  const hex = HEX.exec(value);
+  if (hex) {
+    const digits = hex[1].length <= 4 ? [...hex[1]].map((d) => d + d).join("") : hex[1];
+    if (digits.length === 6 || digits.slice(6) === "ff") return ok(`#${digits.slice(0, 6)}`);
+    const alpha = Math.round(parseInt(digits.slice(6), 16) / 255 * 1e3) / 1e3;
+    return ok(`rgba(${parseInt(digits.slice(0, 2), 16)}, ${parseInt(digits.slice(2, 4), 16)}, ${parseInt(digits.slice(4, 6), 16)}, ${alpha})`);
+  }
+  const rgb = RGB.exec(value);
+  if (rgb) {
+    const channels = rgb.slice(1, 4).map(Number);
+    if (channels.some((c) => c > 255)) return fail(`a color channel is 0 to 255 in ${show(input)}`);
+    let alpha = 1;
+    if (rgb[4] !== void 0) {
+      alpha = rgb[4].endsWith("%") ? Number(rgb[4].slice(0, -1)) / 100 : Number(rgb[4]);
+      if (!(alpha >= 0 && alpha <= 1)) return fail(`a color's alpha is 0 to 1 in ${show(input)}`);
+    }
+    return ok(alpha === 1 ? `#${channels.map(hex2).join("")}` : `rgba(${channels.join(", ")}, ${alpha})`);
+  }
+  if (NAMED_COLORS.has(value)) return ok(value);
+  return fail(`expected a color ("#0879a1", "rgb(\u2026)", "rgba(\u2026)" or a CSS name), not ${show(input)}`);
+}
+function color() {
+  return kind({
+    name: "color",
+    editor: "color",
+    accepts: 'a color ("#0879a1", "rgb(\u2026)", "rgba(\u2026)" or a CSS name)',
+    parse: parseColor,
+    jsonSchema: () => ({ type: "string" })
+  });
+}
+var FONT_UNSAFE = /[;{}<>\\\n\r]/;
+function fontFamily() {
+  const accepts = 'a font stack, as CSS writes it ("Inter, Arial, sans-serif")';
+  return kind({
+    name: "fontFamily",
+    editor: "fontFamily",
+    accepts,
+    parse(input) {
+      if (isObject(input) && "src" in input) return fail("a web font is declared once, in the root's fonts ({ family, src, weight, style }); fontFamily names it in a stack");
+      if (typeof input !== "string" || !input.trim() || FONT_UNSAFE.test(input)) return fail(`expected ${accepts}, not ${show(input)}`);
+      return ok(input.trim());
+    },
+    jsonSchema: () => ({ type: "string", minLength: 1 })
+  });
+}
+function fontStack(stack) {
+  return stack.split(",").map((family) => family.trim().replace(/^(["'])(.*)\1$/, "$2")).filter(Boolean);
+}
+var FONT_FORMATS = ["woff2", "woff", "truetype", "opentype"];
+function items(fields, noun) {
+  const names = Object.keys(fields);
+  const shape2 = `{ ${names.join(", ")} }`;
+  const accepts = `a list of ${noun}s, each ${shape2}`;
+  return kind({
+    name: "items",
+    editor: "items",
+    accepts,
+    parse(input) {
+      if (!Array.isArray(input)) return fail(`expected ${accepts}, not ${show(input)}`);
+      const out = [];
+      for (const [index, item] of input.entries()) {
+        const at = `${noun} ${index + 1}`;
+        if (!isObject(item)) return fail(`${at}: expected ${shape2}, not ${show(item)}`);
+        const extra = Object.keys(item).find((key) => !names.includes(key));
+        if (extra) return fail(`${at}: "${extra}" isn't one of its fields (${names.join(", ")})`);
+        const value = {};
+        for (const name of names) {
+          if (item[name] === void 0) return fail(`${at}: ${name} is missing`);
+          const parsed = fields[name].parse(item[name]);
+          if (!parsed.ok) return fail(`${at}: ${name}: ${parsed.message}`);
+          value[name] = parsed.value;
+        }
+        out.push(value);
+      }
+      return ok(out);
+    },
+    jsonSchema: () => ({
+      type: "array",
+      items: { type: "object", required: names, properties: Object.fromEntries(names.map((name) => [name, fields[name].jsonSchema()])), additionalProperties: false }
+    })
+  });
+}
+function fontFaces() {
+  const accepts = "a list of { family, src, format, weight, style }";
+  const face = (input, index) => {
+    const at = `font ${index + 1}`;
+    if (!isObject(input)) return fail(`${at}: expected { family, src, format, weight, style }, not ${show(input)}`);
+    const extra = Object.keys(input).find((key) => !["family", "src", "format", "weight", "style"].includes(key));
+    if (extra) return fail(`${at}: "${extra}" isn't part of a font; expected family, src, format, weight or style`);
+    if (typeof input.family !== "string" || !input.family.trim() || FONT_UNSAFE.test(input.family) || input.family.includes(",")) {
+      return fail(`${at}: family is one font's name ("Inter"), not ${show(input.family)}`);
+    }
+    if (typeof input.src !== "string" || !input.src.trim() || unsafeUrl(input.src, /^data:(font|application)\//)) {
+      return fail(`${at}: src is the font file's http(s) URL (or a data:font URI), not ${show(input.src)}`);
+    }
+    const out = { family: input.family.trim(), src: input.src.trim() };
+    if (input.format !== void 0) {
+      if (!FONT_FORMATS.includes(input.format)) return fail(`${at}: format is one of ${FONT_FORMATS.join(", ")}, not ${show(input.format)}`);
+      out.format = input.format;
+    }
+    if (input.weight !== void 0) {
+      const range = typeof input.weight === "string" ? /^\s*(\d+)\s+(\d+)\s*$/.exec(input.weight) : Array.isArray(input.weight) && input.weight.length === 2 && input.weight.every(Number.isInteger) ? [null, ...input.weight] : null;
+      const weight = input.weight === "normal" ? 400 : input.weight === "bold" ? 700 : input.weight;
+      if (range && Number(range[1]) >= 1 && Number(range[2]) <= 1e3 && Number(range[1]) <= Number(range[2])) out.weight = [Number(range[1]), Number(range[2])];
+      else if (typeof weight === "number" && Number.isInteger(weight) && weight >= 1 && weight <= 1e3) out.weight = weight;
+      else return fail(`${at}: weight is 1 to 1000, "normal", "bold", or a range ("100 900"), not ${show(input.weight)}`);
+    }
+    if (input.style !== void 0) {
+      if (input.style !== "normal" && input.style !== "italic") return fail(`${at}: style is "normal" or "italic", not ${show(input.style)}`);
+      out.style = input.style;
+    }
+    return ok(out);
+  };
+  return kind({
+    name: "fontFaces",
+    editor: "fontFaces",
+    accepts,
+    parse(input) {
+      if (!Array.isArray(input)) return fail(`expected ${accepts}, not ${show(input)}`);
+      const out = [];
+      for (const [index, item] of input.entries()) {
+        const parsed = face(item, index);
+        if (!parsed.ok) return parsed;
+        out.push(parsed.value);
+      }
+      return ok(out);
+    },
+    jsonSchema: () => ({
+      type: "array",
+      items: {
+        type: "object",
+        required: ["family", "src"],
+        properties: {
+          family: { type: "string", minLength: 1 },
+          src: { type: "string", minLength: 1 },
+          format: { enum: [...FONT_FORMATS] },
+          weight: { anyOf: [{ type: "number", minimum: 1, maximum: 1e3 }, { type: "string" }, { type: "array", items: { type: "integer", minimum: 1, maximum: 1e3 }, minItems: 2, maxItems: 2 }] },
+          style: { enum: ["normal", "italic"] }
+        },
+        additionalProperties: false
+      }
+    })
+  });
+}
+function fontWeight() {
+  return kind({
+    name: "fontWeight",
+    editor: "fontWeight",
+    accepts: '100 to 900 in hundreds, "normal" or "bold"',
+    parse(input) {
+      if (input === "normal") return ok(400);
+      if (input === "bold") return ok(700);
+      if (typeof input === "number" && input >= 100 && input <= 900 && input % 100 === 0) return ok(input);
+      return fail(`expected 100 to 900 in hundreds, "normal" or "bold", not ${show(input)}`);
+    },
+    jsonSchema: () => ({ anyOf: [{ enum: [100, 200, 300, 400, 500, 600, 700, 800, 900] }, { enum: ["normal", "bold"] }] })
+  });
+}
+function lineHeight() {
+  const accepts = `a multiple of the font size (1.5), a percentage ("150%"), px ("24px") or "normal" (the font's own)`;
+  return kind({
+    name: "lineHeight",
+    editor: "lineHeight",
+    accepts,
+    parse(input) {
+      if (input === "normal") return ok("normal");
+      if (typeof input === "number") return input > 0 && Number.isFinite(input) ? ok(input) : fail(`expected ${accepts}, not ${show(input)}`);
+      const parsed = typeof input === "string" && /^\s*-?[\d.]+\s*$/.test(input) ? void 0 : readLength(input);
+      if (!parsed || parsed.value <= 0 || parsed.unit !== "px" && parsed.unit !== "%") return fail(`expected ${accepts}, not ${show(input)}`);
+      return ok(parsed.unit === "%" ? Math.round(parsed.value * 1e3) / 1e5 : `${parsed.value}px`);
+    },
+    jsonSchema: () => ({ anyOf: [{ type: "number", exclusiveMinimum: 0 }, { type: "string", pattern: `^${NUMBER}(px|%)$` }, { const: "normal" }] })
+  });
+}
+var SERVICE_TAG = /<%[\s\S]*?%>|\{%[\s\S]*?%\}|\{\{[\s\S]*?\}\}|\uFDD0\d+\uFDD1/g;
+function unsafeUrl(url, allowedData) {
+  const compact = url.replace(SERVICE_TAG, "").replace(/[\u0000- \u007f-\u009f]/g, "").toLowerCase();
+  if (compact.startsWith("data:")) return !allowedData || !allowedData.test(compact);
+  return /^(javascript|vbscript|file):/.test(compact);
+}
+var IMAGE_DATA = /^data:image\/(png|jpeg|jpg|gif|webp|svg\+xml)[;,]/;
+function asset() {
+  const accepts = "an image URL (http, https or a data:image URI), or { src, width, height }";
+  return kind({
+    name: "asset",
+    editor: "image",
+    accepts,
+    parse(input) {
+      const src = typeof input === "string" ? input : isObject(input) ? input.src : void 0;
+      if (typeof src !== "string" || !src.trim()) return fail(`expected ${accepts}, not ${show(input)}`);
+      if (unsafeUrl(src, IMAGE_DATA)) return fail(`${show(src)} isn't an image URL Elements will write`);
+      if (typeof input === "string") return ok(src.trim());
+      const extra = Object.keys(input).find((key) => !["src", "width", "height"].includes(key));
+      if (extra) return fail(`"${extra}" isn't part of an image; expected src, width or height`);
+      const out = { src: src.trim() };
+      for (const side2 of ["width", "height"]) {
+        const value = input[side2];
+        if (value === void 0) continue;
+        if (typeof value !== "number" || !(value > 0)) return fail(`an image's ${side2} is its size in px, not ${show(value)}`);
+        out[side2] = value;
+      }
+      return ok(out);
+    },
+    jsonSchema: () => ({
+      anyOf: [
+        { type: "string", minLength: 1 },
+        {
+          type: "object",
+          required: ["src"],
+          properties: { src: { type: "string", minLength: 1 }, width: { type: "number", exclusiveMinimum: 0 }, height: { type: "number", exclusiveMinimum: 0 } },
+          additionalProperties: false
+        }
+      ]
+    })
+  });
+}
+var YOUTUBE = /^https:\/\/(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:[^#]*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/;
+var VIMEO = /^https:\/\/(?:www\.|player\.)?vimeo\.com\/(?:video\/)?(\d+)/;
+function videoParts(url) {
+  const youtube = YOUTUBE.exec(url);
+  if (youtube) return { provider: "youtube", id: youtube[1], embed: `https://www.youtube.com/embed/${youtube[1]}`, thumbnail: `https://img.youtube.com/vi/${youtube[1]}/0.jpg` };
+  const vimeo = VIMEO.exec(url);
+  if (vimeo) return { provider: "vimeo", id: vimeo[1], embed: `https://player.vimeo.com/video/${vimeo[1]}` };
+  return void 0;
+}
+function video() {
+  const accepts = "a YouTube or Vimeo video's https link";
+  return kind({
+    name: "video",
+    editor: "link",
+    accepts,
+    parse(input) {
+      if (typeof input !== "string" || !videoParts(input.trim())) return fail(`expected ${accepts}, not ${show(input)}`);
+      return ok(input.trim());
+    },
+    jsonSchema: () => ({ type: "string", pattern: "^https://" })
+  });
+}
+function link() {
+  const accepts = "a URL (http, https, mailto, tel, a path, or a merge tag) or { href, target }";
+  return kind({
+    name: "link",
+    editor: "link",
+    accepts,
+    parse(input) {
+      const href = typeof input === "string" ? input : isObject(input) ? input.href : void 0;
+      if (typeof href !== "string" || !href.trim() && (typeof input === "string" || href !== "")) return fail(`expected ${accepts}, not ${show(input)}`);
+      if (unsafeUrl(href)) return fail(`${show(href)} isn't a link Elements will write (scripts, data and local files aren't)`);
+      if (typeof input === "string") return ok(href.trim());
+      const extra = Object.keys(input).find((key) => !["href", "target"].includes(key));
+      if (extra) return fail(`"${extra}" isn't part of a link; expected href or target`);
+      const target = input.target;
+      if (target === void 0) return ok(href ? href.trim() : { href });
+      if (target !== "_blank" && target !== "_self") return fail(`a link's target is "_blank" or "_self", not ${show(target)}`);
+      return ok({ href: href.trim(), target });
+    },
+    jsonSchema: () => ({
+      anyOf: [
+        { type: "string", minLength: 1 },
+        { type: "object", required: ["href"], properties: { href: { type: "string" }, target: { enum: ["_blank", "_self"] } }, additionalProperties: false }
+      ]
+    })
+  });
+}
+function attributes() {
+  const accepts = "attributes by name, each a text value (no on\u2026 handlers, href or style)";
+  return kind({
+    name: "attributes",
+    editor: "text",
+    accepts,
+    parse(input) {
+      if (!isObject(input)) return fail(`expected ${accepts}, not ${show(input)}`);
+      for (const [name, value] of Object.entries(input)) {
+        if (!/^[a-zA-Z_:][\w:.-]*$/.test(name) || /^(on|href$|style$)/i.test(name) || typeof value !== "string") return fail(`${show(name)} isn't an attribute Elements will write, with ${show(value)}`);
+      }
+      return ok(input);
+    },
+    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 assetParts(value) {
+  return typeof value === "string" ? { src: value } : value;
+}
+var ROOT_NAMES = ["Email", "Page", "Document", "Canvas"];
+function defineComponent(definition) {
+  return definition;
+}
+function prop(kind2, options) {
+  return { kind: kind2, ...options };
+}
+var MOBILE = {
+  name: "mobile",
+  on: "on phones",
+  for: "for phones",
+  roots: (root) => !!root?.responsive,
+  notAllowed: { code: "mobile/not-supported", message: "Phone styles are for an Email or a Page, which have a phone width" },
+  sheet: { media: "phone", selector: "&" },
+  allows: (spec) => !!spec.mobile,
+  support: { web: { level: "full", source: "writer" }, email: { level: "full", source: "writer" } },
+  styles: {
+    // The email's phone text styles are rules that override a size; "normal" isn't one.
+    lineHeight: { email: { level: "none", values: ["normal"], shows: "the line height it has on desktop", source: "writer" } }
+  },
+  outlookApplies: false,
+  hiddenKey: "mobile"
+};
+var HOVER = {
+  name: "hover",
+  on: "on hover",
+  for: "for hover",
+  // Keyboard focus gets the same styles as the pointer: a link or button reached by Tab shows its hover colors.
+  // A box around the link (an email Button's cell, its background) takes them while the link in it has focus.
+  sheet: { media: "all", selector: "&:hover,&:focus-visible", within: "&:hover,&:focus-within", level: "hover" },
+  allows: (_, key, definition) => !!definition.hover?.includes(key),
+  support: {
+    web: { level: "full", source: "css" },
+    // On type selectors only in Outlook.com and Outlook for Mac (Elements' are classes); the phone apps' results don't
+    // matter, as nothing hovers there.
+    email: {
+      level: "partial",
+      shows: "no change (where it shows, keyboard focus gets it too)",
+      source: "caniemail",
+      feature: "css-pseudo-class-hover",
+      clients: ["outlook", "outlook-com", "outlook-mac", "gmx", "web-de", "sfr", "laposte", "mail-ru"]
+    }
+  },
+  paged: (node, where) => `A hover isn't possible in ${where}: nothing points at it. The ${node.type} shows its own colors`,
+  outlookApplies: false
+};
+var CONDITIONS = [MOBILE, HOVER];
+var CONDITION_NAMES = new Set(CONDITIONS.map((condition) => condition.name));
+function blockOf(node, condition) {
+  const block = node[condition.name];
+  return block && Object.keys(block).length ? block : void 0;
+}
+function shownAnywhere(node) {
+  return !(node.hidden?.mobile && node.hidden?.desktop);
+}
+var writer = { level: "full", source: "writer" };
+var css = { level: "full", source: "css" };
+var textStyle = {
+  color: { kind: color(), label: "Text color", inherited: true, support: { email: writer, web: css } },
+  // A web font in a stack is reported from the root's fonts (whether it loads depends on the client).
+  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: "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 } },
+  letterSpacing: {
+    kind: length(["px"], { min: -100 }),
+    label: "Letter spacing",
+    inherited: true,
+    mobile: true,
+    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: "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 = {
+  // Widths are the resolver's, written as table, cell and image attributes in px (what Word sizes by).
+  width: { kind: length(["px", "%"]), label: "Width", mobile: true, support: { email: writer, web: css } },
+  minWidth: { kind: length(["px", "%"]), label: "Minimum width", support: { email: writer, web: css } },
+  maxWidth: { kind: length(["px", "%"]), label: "Maximum width", mobile: true, support: { email: writer, web: css } },
+  height: { kind: length(["px"]), label: "Height", support: { email: writer, web: css } },
+  // Cell padding, which Word keeps (it drops a div's).
+  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", 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",
+    description: "Whether content past a set height is cut off.",
+    support: { email: { level: "outlook", shows: "content past the height: Word doesn't cut it off", values: ["hidden"], source: "caniemail" }, web: css }
+  }
+};
+var layoutStyle = {
+  gap: { kind: length(["px"]), label: "Gap", description: "Space between children.", mobile: true, support: { email: writer, web: css } },
+  alignItems: {
+    kind: enumOf(["start", "center", "end", "stretch"]),
+    label: "Align items",
+    description: "Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.",
+    // A cell's align, and a Row's cells' valign.
+    support: { email: writer, web: css }
+  },
+  justifyContent: {
+    kind: enumOf(["start", "center", "end", "space-between"]),
+    label: "Justify content",
+    description: "Where children sit along the layout's direction, as CSS justify-content.",
+    support: { email: writer, web: css }
+  }
+};
+var placementStyle = {
+  flex: {
+    kind: flex(),
+    label: "Share",
+    description: 'In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.',
+    support: { email: writer, web: css }
+  }
+};
+function pick(group, ...keys) {
+  return Object.fromEntries(keys.map((key) => [key, group[key]]));
+}
+var STYLE_GROUP_OF = {
+  // How children are placed, and how a box sits among its siblings.
+  alignItems: "Layout",
+  justifyContent: "Layout",
+  justifyItems: "Layout",
+  alignSelf: "Layout",
+  verticalAlign: "Layout",
+  flex: "Layout",
+  flexWrap: "Layout",
+  overflow: "Layout",
+  // A box's size.
+  width: "Size",
+  minWidth: "Size",
+  maxWidth: "Size",
+  height: "Size",
+  boxSizing: "Size",
+  // Space inside a box and between its children.
+  padding: "Spacing",
+  gap: "Spacing",
+  rowGap: "Spacing",
+  indent: "Spacing",
+  cellPadding: "Spacing",
+  // Text.
+  color: "Typography",
+  fontFamily: "Typography",
+  fontSize: "Typography",
+  fontWeight: "Typography",
+  fontStyle: "Typography",
+  lineHeight: "Typography",
+  letterSpacing: "Typography",
+  textAlign: "Typography",
+  textTransform: "Typography",
+  textDecoration: "Typography",
+  // What's drawn behind content, and a shape's paint.
+  backgroundColor: "Background",
+  fill: "Background",
+  // Lines around and between boxes, and a shape's outline.
+  border: "Border",
+  borderTop: "Border",
+  borderRadius: "Border",
+  borderCollapse: "Border",
+  rowBorder: "Border",
+  separatorColor: "Border",
+  stroke: "Border",
+  strokeWidth: "Border",
+  opacity: "Effects"
+};
+function styleGroup(key, spec) {
+  return spec.group ?? STYLE_GROUP_OF[key];
+}
+var WRITTEN = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+var BY_PARTS = { email: { level: "full", source: "writer" }, web: css };
+function defineComposite(definition) {
+  return { ...definition, custom: true };
+}
+var SOCIAL_ICONS = "https://cdn.tools.unlayer.com/social/icons";
+var Social = defineComposite({
+  type: "Social",
+  label: "Social icons",
+  description: "Links to social profiles: a line of the networks' icons, each linked to its profile.",
+  categories: ["block"],
+  props: {
+    // Its icon is found by its name's letters and digits ("LinkedIn": linkedin.png): a name needs one.
+    icons: prop(items({ name: text({ maxLength: 40, pattern: /[A-Za-z0-9]/, mismatch: `has no letter (a to z) or digit, which its icon is found by ("Instagram")` }), href: link() }, "icon"), {
+      support: WRITTEN,
+      label: "Icons",
+      required: true,
+      description: 'Each network by name ("Instagram", "LinkedIn") and the link to its profile.'
+    }),
+    iconType: prop(enumOf(["circle", "rounded", "squared"]), { support: WRITTEN, label: "Icon style", default: "circle" }),
+    size: prop(number({ min: 1, integer: true }), { support: WRITTEN, label: "Icon size", description: "Each icon's width and height, in px.", default: 32 })
+  },
+  style: {
+    gap: { ...layoutStyle.gap, label: "Space between icons", support: BY_PARTS },
+    justifyContent: { kind: enumOf(["start", "center", "end"]), label: "Alignment", description: "Where the icons sit across the line.", support: BY_PARTS },
+    ...placementStyle
+  },
+  defaultStyle: { gap: 5, justifyContent: "center" },
+  children: {},
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Social icons", paths: ["props.icons", "props.iconType", "props.size", "style.gap", "style.justifyContent"] }] },
+  expand: ({ icons, iconType, size: size2 }, { style }) => ({
+    type: "Row",
+    props: { stackOnMobile: false },
+    style: { gap: style.gap, justifyContent: style.justifyContent },
+    children: icons.map((icon) => ({
+      type: "Link",
+      // Each opens in a new window, as the builder's do, unless it says otherwise.
+      props: { href: typeof icon.href === "string" ? { href: icon.href, target: "_blank" } : icon.href, title: icon.name },
+      style: { flex: "none" },
+      children: [
+        {
+          type: "Image",
+          props: { src: `${SOCIAL_ICONS}/${iconType}/${icon.name.toLowerCase().replace(/[^a-z0-9]+/g, "")}.png`, alt: icon.name },
+          style: { width: size2 }
+        }
+      ]
+    }))
+  })
+});
+var MENU_TEXT = ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textTransform"];
+var Menu = defineComposite({
+  type: "Menu",
+  label: "Menu",
+  description: "A line of links (a site's sections, a footer's), onto more lines where they don't fit, with a separator between them on desktop; or links down a column.",
+  categories: ["block"],
+  props: {
+    items: prop(items({ text: text({ maxLength: 200 }), href: link() }, "item"), {
+      support: WRITTEN,
+      label: "Items",
+      required: true,
+      description: "Each link's text and where it goes."
+    }),
+    separator: prop(text({ maxLength: 10 }), { support: WRITTEN, label: "Separator", description: 'Between the links of a horizontal menu ("|", "\xB7"), on desktop: phones show none.', default: "" }),
+    layout: prop(enumOf(["horizontal", "vertical"]), { support: WRITTEN, label: "Layout", default: "horizontal" })
+  },
+  style: {
+    ...pick(textStyle, "color", ...MENU_TEXT),
+    separatorColor: { kind: color(), label: "Separator color", support: BY_PARTS },
+    padding: { kind: insets(), label: "Each link's padding", description: "Around each link: its sides are the space between them.", support: BY_PARTS },
+    justifyContent: { kind: enumOf(["start", "center", "end"]), label: "Alignment", description: "Where the links sit.", support: BY_PARTS },
+    ...placementStyle
+  },
+  defaultStyle: {
+    color: "#0068A5",
+    fontSize: 14,
+    lineHeight: 1.2,
+    separatorColor: "#444444",
+    padding: { top: 5, right: 15, bottom: 5, left: 15 },
+    justifyContent: "center"
+  },
+  children: {},
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: {
+    groups: [
+      { title: "Menu", paths: ["props.items", "props.layout", "props.separator", "style.justifyContent"] },
+      { title: "Text", paths: ["style.color", "style.separatorColor", ...MENU_TEXT.map((key) => `style.${key}`)] },
+      { title: "Spacing", paths: ["style.padding"] }
+    ]
+  },
+  expand: ({ items: links, separator, layout }, { style, responsive }) => {
+    const padding = style.padding;
+    const text2 = Object.fromEntries(MENU_TEXT.filter((key) => style[key] !== void 0).map((key) => [key, style[key]]));
+    const link3 = (item2) => ({ type: "Link", props: { href: item2.href }, style: { color: style.color, textDecoration: "none" }, children: [item2.text] });
+    if (layout === "vertical") {
+      return { type: "Column", style: { ...text2, gap: padding.top + padding.bottom, padding, alignItems: style.justifyContent }, children: links.map(link3) };
+    }
+    const item = (entry) => ({ type: "Text", style: { flex: "none", padding }, children: [link3(entry)] });
+    const between = {
+      type: "Text",
+      ...responsive ? { hidden: { mobile: true } } : {},
+      style: { flex: "none", padding: { top: padding.top, right: 0, bottom: padding.bottom, left: 0 }, color: style.separatorColor },
+      children: [separator]
+    };
+    return {
+      type: "Row",
+      props: { stackOnMobile: false },
+      // Links that don't fit on one line go onto another, as today's Menu's do.
+      style: { ...text2, flexWrap: "wrap", justifyContent: style.justifyContent },
+      children: links.flatMap((entry, index) => [...index && separator ? [between] : [], item(entry)])
+    };
+  }
+});
+var WRITTEN2 = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+var BOX = [...Object.keys(boxStyle), "flex", ...Object.keys(inheritedTextStyle)];
+var only = (style, keys) => {
+  const out = Object.fromEntries(Object.entries(style ?? {}).filter(([key]) => keys.includes(key)));
+  return Object.keys(out).length ? out : void 0;
+};
+function arrangeGrid(node) {
+  const columns = Math.max(1, Math.floor(Number(node.props?.columns ?? 2)));
+  const stackOnMobile = node.props?.stackOnMobile !== false;
+  const style = node.style ?? {};
+  const gap = style.gap;
+  const rowGap = style.rowGap ?? gap;
+  const children = (node.children ?? []).filter((child) => typeof child === "object" && child !== null);
+  const rows = [];
+  for (let start = 0; start < children.length; start += columns) {
+    const cells = children.slice(start, start + columns).map((child) => ({ type: "Column", children: [child] }));
+    while (cells.length < columns) cells.push({ type: "Column", ...stackOnMobile ? { hidden: { mobile: true } } : {}, children: [] });
+    const mobileGap = node.mobile?.gap;
+    rows.push({
+      type: "Row",
+      props: { stackOnMobile },
+      style: { ...gap !== void 0 ? { gap } : {}, ...style.alignItems !== void 0 ? { alignItems: style.alignItems } : {} },
+      ...mobileGap !== void 0 ? { mobile: { gap: mobileGap } } : {},
+      children: cells
+    });
+  }
+  const box2 = only(style, BOX);
+  const mobileBox = only(node.mobile, BOX);
+  const phoneGap = node.mobile?.gap ?? gap ?? 0;
+  const mobileRowGap = stackOnMobile ? phoneGap !== (rowGap ?? 0) ? phoneGap : void 0 : node.mobile?.rowGap ?? node.mobile?.gap;
+  return {
+    type: "Column",
+    ...node.id ? { id: node.id } : {},
+    style: { ...box2, ...rowGap !== void 0 ? { gap: rowGap } : {} },
+    ...mobileBox || mobileRowGap !== void 0 ? { mobile: { ...mobileBox, ...mobileRowGap !== void 0 ? { gap: mobileRowGap } : {} } } : {},
+    ...node.hidden ? { hidden: node.hidden } : {},
+    children: rows
+  };
+}
+var Grid = defineComponent({
+  type: "Grid",
+  label: "Grid",
+  description: "Its children in columns of equal width, row after row; on phones, one under another.",
+  categories: ["layout", "block"],
+  props: {
+    columns: prop(number({ min: 1, max: 12, integer: true }), { support: WRITTEN2, label: "Columns", description: "How many children to a row.", default: 2 }),
+    stackOnMobile: prop(boolean(), { support: WRITTEN2, label: "Stack on phones", description: "Its children one under another on phones (in an Email or a Page).", default: true })
+  },
+  style: {
+    ...inheritedTextStyle,
+    ...boxStyle,
+    gap: { ...layoutStyle.gap, description: "Space between its children, across and down (unless rowGap is set)." },
+    rowGap: { ...layoutStyle.gap, label: "Row gap", description: "Space between its rows (gap by default); on phones, where the children stack, gap is between them." },
+    alignItems: { ...layoutStyle.alignItems, description: "Where each child sits in its row's height, as CSS align-items." },
+    ...placementStyle
+  },
+  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: [
+      { title: "Grid", paths: ["props.columns", "props.stackOnMobile", "style.gap", "style.rowGap", "style.alignItems"] },
+      { title: "Box", paths: ["style.backgroundColor", "style.padding", "style.border", "style.borderRadius", "style.width"] }
+    ]
+  },
+  arrange: arrangeGrid
+});
+var Layer = defineComponent({
+  type: "Layer",
+  label: "Layer",
+  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: {
+    ...inheritedTextStyle,
+    ...pick(boxStyle, "width", "minWidth", "maxWidth", "backgroundColor", "border", "borderRadius"),
+    height: { ...boxStyle.height, description: "Its height: the image under its children covers it, cut at its sides or its top and bottom." },
+    alignItems: {
+      ...layoutStyle.alignItems,
+      description: "Where its children sit in its height, as CSS align-items.",
+      support: { email: { level: "partial", values: ["stretch"], shows: "the child over the image as tall as its content", source: "writer" }, web: css }
+    },
+    justifyItems: {
+      kind: enumOf(["start", "center", "end", "stretch"]),
+      label: "Justify items",
+      description: "Where its children sit across its width, as CSS justify-items: stretched to it by default.",
+      support: { email: { level: "full", source: "writer" }, web: css }
+    },
+    ...placementStyle
+  },
+  defaultStyle: { alignItems: "start", justifyItems: "stretch" },
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { email: { note: "An Image as wide as the Layer, with one child over it" }, web: {} },
+  editor: {
+    groups: [
+      { title: "Layer", paths: ["style.height", "style.alignItems", "style.justifyItems"] },
+      { title: "Box", paths: ["style.backgroundColor", "style.border", "style.borderRadius", "style.width"] }
+    ]
+  }
+});
+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,
+      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: "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",
+    description: "The font files the template loads: a family's file for each weight and style it uses. Text names a family in its fontFamily stack, before the fonts to show where it can't load."
+  })
+};
+var ROOT_STYLE = {
+  ...inheritedTextStyle,
+  backgroundColor: { ...boxStyle.backgroundColor, label: "Background color", description: "The window's background, behind the content." },
+  ...pick(layoutStyle, "gap", "alignItems")
+};
+var ROOT_DEFAULT_STYLE = {
+  color: "#000000",
+  fontFamily: "Arial, Helvetica, sans-serif",
+  fontSize: 16,
+  fontWeight: 400,
+  lineHeight: 1.5,
+  textAlign: "left"
+};
+var TEXT_EDITOR = { title: "Text", paths: ["style.fontFamily", "style.fontSize", "style.fontWeight", "style.color", "style.lineHeight", "style.letterSpacing", "style.textAlign"] };
+var WRITTEN4 = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+var SIZES = {
+  A3: [297 / 25.4, 420 / 25.4],
+  A4: [210 / 25.4, 297 / 25.4],
+  A5: [148 / 25.4, 210 / 25.4],
+  Letter: [8.5, 11],
+  Legal: [8.5, 14],
+  Tabloid: [11, 17]
+};
+var PX_PER_INCH = 96;
+function pageBox(props) {
+  const size2 = props.size ?? "A4";
+  const [w, h2] = SIZES[size2] ?? SIZES.A4;
+  const landscape = props.orientation === "landscape";
+  const width = Math.round((landscape ? h2 : w) * PX_PER_INCH * 100) / 100;
+  const height = Math.round((landscape ? w : h2) * PX_PER_INCH * 100) / 100;
+  const margin = props.margin ?? { top: 48, right: 48, bottom: 48, left: 48 };
+  return {
+    width,
+    height,
+    margin,
+    contentWidth: Math.round(width - margin.left - margin.right),
+    contentHeight: Math.round(height - margin.top - margin.bottom),
+    css: `${size2} ${landscape ? "landscape" : "portrait"}`
+  };
+}
+var PAGE_STYLE = {
+  ...inheritedTextStyle,
+  backgroundColor: { ...boxStyle.backgroundColor, description: "The page's background, out to its edges." },
+  ...pick(layoutStyle, "gap", "alignItems")
+};
+var Document = defineComponent({
+  type: "Document",
+  label: "Document",
+  description: "A printed document: its children on pages of its size (Document.Page, or split by PageBreaks), a PageHeader and a PageFooter on each. Renders to print HTML, and to PDF with @hyper-elements/react/pdf.",
+  categories: ["root"],
+  props: {
+    size: prop(enumOf(["A3", "A4", "A5", "Letter", "Legal", "Tabloid"]), { support: WRITTEN4, label: "Page size", default: "A4" }),
+    orientation: prop(enumOf(["portrait", "landscape"]), { support: WRITTEN4, label: "Orientation", default: "portrait" }),
+    margin: prop(insets(), {
+      support: WRITTEN4,
+      label: "Margins",
+      description: "Around each page's content (its header and footer too), in px: 96 to the inch.",
+      default: { top: 48, right: 48, bottom: 48, left: 48 }
+    }),
+    ...ROOT_PROPS
+  },
+  style: { ...ROOT_STYLE, backgroundColor: { ...ROOT_STYLE.backgroundColor, description: "Each page's background, out to its edges." } },
+  defaultStyle: ROOT_DEFAULT_STYLE,
+  children: { types: ["DocumentPage", "PageBreak", "PageHeader", "PageFooter"], categories: ["section", "layout", "block"] },
+  sizing: "none",
+  targets: { web: {} },
+  editor: {
+    groups: [
+      { title: "Document", paths: ["props.size", "props.orientation", "props.margin", "props.title"] },
+      { title: "Background", paths: ["style.backgroundColor"] },
+      TEXT_EDITOR
+    ]
+  }
+});
+var DocumentPage = defineComponent({
+  type: "DocumentPage",
+  label: "Page",
+  description: "One page of a Document (Document.Page in JSX): its children stacked down it, inside the Document's margins.",
+  categories: [],
+  props: {},
+  style: PAGE_STYLE,
+  children: { categories: ["section", "layout", "block"] },
+  sizing: "stretch",
+  targets: { web: {} },
+  editor: { groups: [{ title: "Page", paths: ["style.backgroundColor", "style.gap"] }, TEXT_EDITOR] }
+});
+var PageBreak = defineComponent({
+  type: "PageBreak",
+  label: "Page break",
+  description: "In a Document, where a page ends: what follows starts the next page.",
+  categories: [],
+  props: {},
+  style: {},
+  children: {},
+  sizing: "none",
+  targets: { web: {} }
+});
+var HEADER_STYLE = { ...inheritedTextStyle, ...pick(boxStyle, "padding", "backgroundColor", "border"), ...pick(layoutStyle, "gap", "alignItems") };
+var PageHeader = defineComponent({
+  type: "PageHeader",
+  label: "Page header",
+  description: "In a Document: drawn at the top of every page, inside its margins.",
+  categories: [],
+  props: {},
+  style: HEADER_STYLE,
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { web: {} },
+  editor: { groups: [{ title: "Header", paths: ["style.padding", "style.backgroundColor", "style.border", "style.gap"] }, TEXT_EDITOR] }
+});
+var PageFooter = defineComponent({
+  type: "PageFooter",
+  label: "Page footer",
+  description: "In a Document: drawn at the bottom of every page, inside its margins.",
+  categories: [],
+  props: {},
+  style: HEADER_STYLE,
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { web: {} },
+  editor: { groups: [{ title: "Footer", paths: ["style.padding", "style.backgroundColor", "style.border", "style.gap"] }, TEXT_EDITOR] }
+});
+var PageNumber = defineComponent({
+  type: "PageNumber",
+  label: "Page number",
+  description: "In a Document's text: the number of the page it's on, or (total) how many pages there are.",
+  categories: ["inline"],
+  props: {
+    total: prop(boolean(), { support: WRITTEN4, label: "Page count", description: "How many pages the Document has, instead of this page's number.", default: false })
+  },
+  style: {},
+  children: {},
+  sizing: "none",
+  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 = [];
+  let run = [];
+  const end = () => {
+    if (run.length) pages.push({ children: run });
+    run = [];
+  };
+  let header;
+  let footer;
+  for (const child of root.children) {
+    if (typeof child === "string") continue;
+    if (child.type === "PageHeader") header = child;
+    else if (child.type === "PageFooter") footer = child;
+    else if (child.type === "PageBreak") end();
+    else if (child.type === "DocumentPage") {
+      end();
+      pages.push({ page: child, children: child.children.filter((c) => typeof c !== "string") });
+    } else run.push(child);
+  }
+  end();
+  if (!pages.length) pages.push({ children: [] });
+  return { pages, header, footer };
+}
+var WRITTEN5 = { web: { level: "full", source: "writer" } };
+var coordinate = (label, description) => prop(number(), { support: WRITTEN5, label, ...{}, default: 0 });
+var size = (label) => prop(number({ min: 0 }), { support: WRITTEN5, label, required: true });
+var Canvas = defineComponent({
+  type: "Canvas",
+  label: "Canvas",
+  description: "An image of a fixed size (a social card, a banner): its children laid out in it as on a page. Written as PNG or SVG with @hyper-elements/react/image.",
+  categories: ["root"],
+  props: {
+    width: prop(length(["px"], { min: 16 }), { support: WRITTEN5, label: "Width", description: "The image's width, in px.", default: 1200 }),
+    height: prop(length(["px"], { min: 16 }), { support: WRITTEN5, label: "Height", description: "The image's height, in px: what's past it is cut.", default: 630 }),
+    ...ROOT_PROPS
+  },
+  style: { ...ROOT_STYLE, padding: boxStyle.padding, justifyContent: layoutStyle.justifyContent },
+  defaultStyle: ROOT_DEFAULT_STYLE,
+  children: { categories: ["section", "layout", "block"] },
+  sizing: "none",
+  targets: { web: {} },
+  editor: {
+    groups: [
+      { title: "Canvas", paths: ["props.width", "props.height", "style.backgroundColor", "style.padding"] },
+      { title: "Layout", paths: ["style.gap", "style.alignItems", "style.justifyContent"] },
+      TEXT_EDITOR
+    ]
+  }
+});
+var Svg = defineComponent({
+  type: "Svg",
+  label: "Vector drawing",
+  description: "Shapes (Rect, Circle, Ellipse, Line, Polygon, Path) drawn in a box of its own: its width and height, and the coordinates its viewBox gives them.",
+  categories: ["block"],
+  props: {
+    width: size("Width"),
+    height: size("Height"),
+    viewBox: prop(text({ maxLength: 100 }), { support: WRITTEN5, label: "View box", description: `The shapes' coordinates in it, as "x y width height" (its width and height by default).` }),
+    title: prop(text({ maxLength: 200 }), { support: WRITTEN5, label: "Title", description: "What it shows, read out by screen readers." })
+  },
+  style: { ...pick(boxStyle, "padding", "backgroundColor", "border", "borderRadius"), ...placementStyle },
+  children: { categories: ["shape"] },
+  sizing: "shrink",
+  targets: { web: {} },
+  unsupported: { email: "Gmail and classic Outlook don't show inline SVG; use an Image of it (a PNG) instead" },
+  editor: { groups: [{ title: "Drawing", paths: ["props.width", "props.height", "props.viewBox", "props.title"] }] }
+});
+var PAINT = {
+  fill: { kind: color(), label: "Fill", description: 'Its inside ("transparent" for none).', support: { web: css } },
+  stroke: { kind: color(), label: "Stroke", description: "Its outline's color.", support: { web: css } },
+  strokeWidth: { kind: number({ min: 0 }), label: "Stroke width", support: { web: css } },
+  opacity: { kind: number({ min: 0, max: 1 }), label: "Opacity", support: { web: css } }
+};
+var PAINT_DEFAULT = { fill: "#000000" };
+var shape = (type, label, description, props) => defineComponent({ type, label, description, categories: ["shape"], props, style: PAINT, defaultStyle: PAINT_DEFAULT, children: {}, sizing: "none", targets: { web: {} } });
+var Rect = shape("Rect", "Rectangle", "A rectangle at x, y in its Svg, rounded by rx.", {
+  x: coordinate("X"),
+  y: coordinate("Y"),
+  width: size("Width"),
+  height: size("Height"),
+  rx: prop(number({ min: 0 }), { support: WRITTEN5, label: "Corner radius" })
+});
+var Circle = shape("Circle", "Circle", "A circle centered at cx, cy in its Svg.", { cx: coordinate("Center X"), cy: coordinate("Center Y"), r: size("Radius") });
+var Ellipse = shape("Ellipse", "Ellipse", "An ellipse centered at cx, cy in its Svg.", { cx: coordinate("Center X"), cy: coordinate("Center Y"), rx: size("Radius across"), ry: size("Radius down") });
+var Line = shape("Line", "Line", "A straight line from x1, y1 to x2, y2 in its Svg (drawn by its stroke).", {
+  x1: coordinate("Start X"),
+  y1: coordinate("Start Y"),
+  x2: coordinate("End X"),
+  y2: coordinate("End Y")
+});
+var Polygon = shape("Polygon", "Polygon", 'A closed shape through its points ("0,0 40,0 20,30"), in its Svg.', {
+  points: prop(text({ maxLength: 1e4 }), { support: WRITTEN5, label: "Points", required: true })
+});
+var Path = shape("Path", "Path", "A shape drawn by an SVG path (d), in its Svg.", {
+  d: prop(text({ maxLength: 1e5 }), { support: WRITTEN5, label: "Path", description: 'SVG path data ("M0 0 L40 0 L20 30 Z").', required: true })
+});
+var SHAPES = [Rect, Circle, Ellipse, Line, Polygon, Path];
+var WRITTEN6 = { email: { level: "full", source: "writer" }, web: { level: "full", source: "writer" } };
+var TEXT_DIR = {
+  dir: prop(enumOf(["ltr", "rtl", "auto"]), { support: WRITTEN6, label: "Text direction", description: "Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise." })
+};
+var SPACING_EDITOR = { title: "Spacing", paths: ["style.padding"] };
+var Email = defineComponent({
+  type: "Email",
+  label: "Email",
+  description: "An email. Its children are stacked down the content width, centered in the window.",
+  categories: ["root"],
+  props: {
+    width: prop(length(["px"], { min: 200 }), { support: WRITTEN6, label: "Content width", default: 600 }),
+    previewText: prop(text(), { support: WRITTEN6, label: "Preview text", description: "Shown after the subject in inbox lists, not in the email." }),
+    ...ROOT_PROPS
+  },
+  style: ROOT_STYLE,
+  defaultStyle: ROOT_DEFAULT_STYLE,
+  children: { categories: ["section", "layout", "block"] },
+  sizing: "none",
+  responsive: true,
+  targets: { email: {} },
+  editor: {
+    groups: [
+      { title: "Email", paths: ["props.width", "props.previewText", "props.title"] },
+      { title: "Background", paths: ["style.backgroundColor"] },
+      TEXT_EDITOR
+    ]
+  }
+});
+var Page = defineComponent({
+  type: "Page",
+  label: "Page",
+  description: "A web page. Its children are stacked down the content width, centered in the window.",
+  categories: ["root"],
+  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,
+  defaultStyle: ROOT_DEFAULT_STYLE,
+  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: [
+      { title: "Page", paths: ["props.width", "props.title", "props.description"] },
+      { title: "Background", paths: ["style.backgroundColor"] },
+      TEXT_EDITOR
+    ]
+  }
+});
+var Section = defineComponent({
+  type: "Section",
+  label: "Section",
+  description: "A band across the whole window, directly in an Email or Page: its background spans the window, its children are stacked at the content width.",
+  categories: ["section"],
+  props: {},
+  style: { ...inheritedTextStyle, ...pick(boxStyle, "backgroundColor", "padding", "border"), ...pick(layoutStyle, "gap", "alignItems") },
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Section", paths: ["style.backgroundColor", "style.padding", "style.border", "style.gap"] }, TEXT_EDITOR] }
+});
+var Row = defineComponent({
+  type: "Row",
+  label: "Row",
+  description: "Lays its children out side by side. A child takes its width, or a share of what's left (its flex, 1 by default).",
+  categories: ["layout", "block"],
+  props: {
+    stackOnMobile: prop(boolean(), { support: WRITTEN6, label: "Stack on phones", description: "Its children stack full-width on phones (in an Email or a Page).", default: true }),
+    ...TEXT_DIR
+  },
+  style: {
+    ...inheritedTextStyle,
+    ...boxStyle,
+    ...layoutStyle,
+    alignItems: {
+      ...layoutStyle.alignItems,
+      support: { email: { level: "partial", values: ["stretch"], shows: "children not stretched to one height: each background or border ends with its content", source: "writer" }, web: css }
+    },
+    justifyContent: {
+      ...layoutStyle.justifyContent,
+      support: { email: { level: "none", values: ["space-between"], shows: "children start at the left", source: "writer" }, web: css }
+    },
+    flexWrap: {
+      kind: enumOf(["nowrap", "wrap", "words"]),
+      label: "Wrap",
+      description: `"wrap": children that don't fit wrap onto another line, as CSS flex-wrap (in an email, in a Row kept side by side on phones, with no gap between the lines). "words": in an email, also a space of the text's font apart, on lines at least as tall as its, as words are.`,
+      // A Row kept side by side wraps in an email (but classic Outlook, which the email's checks say where it matters).
+      support: {
+        email: { level: "none", values: ["wrap", "words"], when: (_, row) => row.props.stackOnMobile !== false, shows: "children on one line on desktop, stacked on phones", source: "writer" },
+        web: css
+      }
+    },
+    ...placementStyle
+  },
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: {
+    groups: [
+      { title: "Layout", paths: ["style.gap", "style.alignItems", "style.justifyContent", "props.stackOnMobile"] },
+      { title: "Box", paths: ["style.backgroundColor", "style.padding", "style.border", "style.borderRadius"] }
+    ]
+  }
+});
+var Column = defineComponent({
+  type: "Column",
+  label: "Column",
+  description: "Stacks its children vertically, with its own spacing and box.",
+  categories: ["layout", "block"],
+  props: {},
+  style: {
+    ...inheritedTextStyle,
+    ...boxStyle,
+    ...layoutStyle,
+    justifyContent: {
+      ...layoutStyle.justifyContent,
+      support: { email: { level: "partial", values: ["center", "end", "space-between"], shows: "no effect: its children start at the top", source: "writer" }, web: css }
+    },
+    ...placementStyle
+  },
+  children: { categories: ["layout", "block"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: {
+    groups: [
+      { title: "Layout", paths: ["style.gap", "style.alignItems"] },
+      { title: "Box", paths: ["style.backgroundColor", "style.padding", "style.border", "style.borderRadius", "style.width"] }
+    ]
+  }
+});
+var TEXT_BLOCK_STYLE = {
+  ...textStyle,
+  ...pick(boxStyle, "width", "maxWidth", "padding", "backgroundColor", "border", "borderRadius"),
+  ...placementStyle
+};
+var TEXT_CHILDREN = { text: true, categories: ["inline"] };
+var Text = defineComponent({
+  type: "Text",
+  label: "Text",
+  description: "A paragraph of text.",
+  categories: ["block"],
+  props: TEXT_DIR,
+  style: TEXT_BLOCK_STYLE,
+  children: { ...TEXT_CHILDREN, types: ["Image"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [TEXT_EDITOR, SPACING_EDITOR] }
+});
+var Heading = defineComponent({
+  type: "Heading",
+  label: "Heading",
+  description: "A heading, from level 1 (the page's title) to 6.",
+  categories: ["block"],
+  props: {
+    level: prop(enumOf([1, 2, 3, 4, 5, 6]), { support: WRITTEN6, label: "Level", default: 1 }),
+    ...TEXT_DIR
+  },
+  style: TEXT_BLOCK_STYLE,
+  defaultStyle: { fontWeight: 700, lineHeight: 1.25 },
+  defaultStyleBy: {
+    prop: "level",
+    values: { 1: { fontSize: 32 }, 2: { fontSize: 24 }, 3: { fontSize: 20 }, 4: { fontSize: 18 }, 5: { fontSize: 16 }, 6: { fontSize: 14 } }
+  },
+  children: TEXT_CHILDREN,
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Heading", paths: ["props.level"] }, TEXT_EDITOR, SPACING_EDITOR] }
+});
+var RUN_STYLE = {
+  ...pick(textStyle, "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform", "textDecoration"),
+  backgroundColor: boxStyle.backgroundColor
+};
+var Span = defineComponent({
+  type: "Span",
+  label: "Span",
+  description: "Styled text inside text; raised or lowered (superscript, subscript) with verticalAlign.",
+  categories: ["inline"],
+  props: {},
+  style: {
+    ...RUN_STYLE,
+    verticalAlign: {
+      kind: enumOf(["baseline", "super", "sub"]),
+      label: "Raise or lower",
+      description: '"super": superscript (\xAE, a footnote mark); "sub": subscript; as CSS vertical-align.',
+      // Written as <sup> and <sub>, which every client (Word too) raises and lowers.
+      support: { email: { level: "full", source: "caniemail" }, web: css }
+    }
+  },
+  children: { text: true, categories: ["inline"] },
+  sizing: "none",
+  targets: { email: {}, web: {} }
+});
+var Link = defineComponent({
+  type: "Link",
+  label: "Link",
+  description: "A link: text inside text, or around an Image.",
+  categories: ["inline", "block"],
+  props: {
+    href: prop(link(), { support: WRITTEN6, label: "Link", required: true }),
+    title: prop(text(), { support: WRITTEN6, label: "Title", description: "Shown as a tooltip by mail clients and browsers that show one." }),
+    "aria-label": prop(text(), { support: WRITTEN6, label: "Label for screen readers", description: `What a screen reader says for it, where its text alone doesn't say enough ("Read more about pricing").` }),
+    attrs: prop(attributes(), { support: WRITTEN6, editable: false, label: "More attributes", description: "More attributes for it: a class, a `data-` attribute." })
+  },
+  style: { ...RUN_STYLE, ...placementStyle },
+  defaultStyle: { color: "#0000ee", textDecoration: "underline" },
+  hover: ["color", "textDecoration", "backgroundColor"],
+  children: { text: true, categories: ["inline"], types: ["Image"] },
+  sizing: "shrink",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Link", paths: ["props.href", "style.color", "style.textDecoration", "hover.color"] }] }
+});
+var buttonColors = {
+  editor: "buttonColors",
+  covers: ["style.color", "style.backgroundColor", "hover.color", "hover.backgroundColor"],
+  read: (node) => ({
+    color: node.style?.color,
+    backgroundColor: node.style?.backgroundColor,
+    hoverColor: node.hover?.color,
+    hoverBackgroundColor: node.hover?.backgroundColor
+  }),
+  write: (value) => ({
+    style: { color: value.color, backgroundColor: value.backgroundColor },
+    hover: { color: value.hoverColor, backgroundColor: value.hoverBackgroundColor }
+  })
+};
+var Button = defineComponent({
+  type: "Button",
+  label: "Button",
+  description: "A link drawn as a button.",
+  categories: ["block"],
+  props: {
+    href: prop(link(), { support: WRITTEN6, label: "Link", required: true }),
+    title: prop(text(), { support: WRITTEN6, label: "Title", description: "Shown as a tooltip by mail clients and browsers that show one." }),
+    "aria-label": prop(text(), { support: WRITTEN6, label: "Label for screen readers", description: `What a screen reader says for it, where its text alone doesn't say enough ("Read more about pricing").` }),
+    attrs: prop(attributes(), { support: WRITTEN6, editable: false, label: "More attributes", description: "More attributes for its link: a class, a `data-` attribute." })
+  },
+  style: {
+    ...textStyle,
+    ...pick(boxStyle, "width", "maxWidth", "padding", "backgroundColor", "border", "borderRadius"),
+    boxSizing: { kind: enumOf(["border-box", "content-box"]), label: "Width holds", description: "Whether its width holds its padding and border (border-box), or they go on top of it (content-box).", support: { email: { level: "none", shows: "a width that holds them", source: "writer" }, web: css } },
+    alignSelf: { kind: enumOf(["start", "center", "end"]), label: "Place", description: "Where it sits in its stack, whatever the stack's alignItems: on phones too, another place than on desktop.", mobile: true, support: { email: { level: "full", source: "writer" }, web: css } },
+    ...placementStyle
+  },
+  defaultStyle: {
+    color: "#ffffff",
+    backgroundColor: "#0879a1",
+    fontSize: 14,
+    lineHeight: 1.2,
+    textAlign: "center",
+    padding: { top: 10, right: 20, bottom: 10, left: 20 },
+    borderRadius: 4
+  },
+  hover: ["color", "backgroundColor"],
+  children: { text: true, types: ["Span", "MergeTag", "LineBreak"] },
+  sizing: "shrink",
+  targets: { email: {}, web: {} },
+  editor: {
+    groups: [
+      { title: "Button", paths: ["props.href", "style.width"] },
+      { title: "Colors", composite: buttonColors },
+      TEXT_EDITOR,
+      { title: "Spacing", paths: ["style.padding", "style.border", "style.borderRadius"] }
+    ]
+  }
+});
+var Image = defineComponent({
+  type: "Image",
+  label: "Image",
+  description: "An image in the content. Without a width it takes its own size, no wider than its parent.",
+  categories: ["block"],
+  props: {
+    src: prop(asset(), { support: WRITTEN6, label: "Image", required: true }),
+    alt: prop(text(), { support: WRITTEN6, label: "Alternate text", description: "Read out by screen readers, and shown where images don't load.", default: "" }),
+    title: prop(text(), { support: WRITTEN6, label: "Title", description: "Shown as a tooltip by mail clients and browsers that show one." })
+  },
+  style: {
+    ...pick(boxStyle, "width", "maxWidth", "height", "border", "borderRadius"),
+    ...placementStyle,
+    alignSelf: { kind: enumOf(["start", "center", "end"]), label: "Place", description: "Where it sits in its stack on phones, where that's another place than on desktop.", mobile: true, support: { email: { level: "full", source: "caniemail" }, web: css } },
+    verticalAlign: { kind: enumOf(["top", "middle"]), label: "Place in its line", description: "Where it sits in a line of text it's in.", support: { email: { level: "full", source: "caniemail" }, web: css } }
+  },
+  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"] }] }
+});
+var Divider = defineComponent({
+  type: "Divider",
+  label: "Divider",
+  description: "A horizontal line.",
+  categories: ["block"],
+  props: {},
+  style: {
+    borderTop: { kind: line(), label: "Line", description: 'The line, as CSS border-top: "1px solid #bbbbbb".', support: { email: { level: "full", source: "writer" }, web: css } },
+    width: { kind: length(["px", "%"]), label: "Length", mobile: true, support: { email: { level: "full", source: "writer" }, web: css } },
+    padding: { kind: insets(), label: "Padding", mobile: true, support: { email: { level: "full", source: "outlook-captures" }, web: css } }
+  },
+  defaultStyle: { borderTop: { width: 1, style: "solid", color: "#bbbbbb" }, width: "100%" },
+  children: {},
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Line", paths: ["style.borderTop", "style.width"] }, SPACING_EDITOR] }
+});
+var LineBreak = defineComponent({
+  type: "LineBreak",
+  label: "Line break",
+  description: "Starts a new line inside text.",
+  categories: ["inline"],
+  props: {},
+  style: {},
+  children: {},
+  sizing: "none",
+  targets: { email: {}, web: {} }
+});
+var MergeTag = defineComponent({
+  type: "MergeTag",
+  label: "Merge tag",
+  description: "A value the sending service fills in (a name, a link), written in the service's own syntax.",
+  categories: ["inline"],
+  props: {
+    name: prop(text({ maxLength: 200 }), { support: WRITTEN6, label: "Name", required: true })
+  },
+  style: {},
+  children: {},
+  sizing: "none",
+  targets: { email: {}, web: {} }
+});
+var List = defineComponent({
+  type: "List",
+  label: "List",
+  description: "A bulleted or numbered list of ListItems. Its markers sit in a column of their own (indent) before the items.",
+  categories: ["block"],
+  props: {
+    type: prop(enumOf(["bullet", "number"]), { support: WRITTEN6, label: "Type", default: "bullet" }),
+    start: prop(number({ min: 0, integer: true }), { support: WRITTEN6, label: "Starts at", description: "The first item's number, in a numbered list.", default: 1 })
+  },
+  style: {
+    ...inheritedTextStyle,
+    ...pick(boxStyle, "width", "maxWidth", "padding", "backgroundColor", "border"),
+    gap: { kind: length(["px"]), label: "Gap", description: "Space between items.", mobile: true, support: { email: { level: "full", source: "writer" }, web: css } },
+    indent: { kind: length(["px"], { min: 0 }), label: "Indent", description: "The width of the markers' column, before the items.", support: { email: { level: "full", source: "writer" }, web: css } },
+    ...placementStyle
+  },
+  defaultStyle: { indent: 24 },
+  children: { types: ["ListItem"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "List", paths: ["props.type", "props.start", "style.gap", "style.indent"] }, TEXT_EDITOR, SPACING_EDITOR] }
+});
+var ListItem = defineComponent({
+  type: "ListItem",
+  label: "List item",
+  description: "An item of a List: text, and a List of its own to nest one.",
+  categories: [],
+  props: TEXT_DIR,
+  style: pick(textStyle, "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration"),
+  children: { text: true, categories: ["inline"], types: ["List"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [TEXT_EDITOR] }
+});
+var Table = defineComponent({
+  type: "Table",
+  label: "Table",
+  description: "A table of data: TableRows of TableCells. Columns take their cells' widths; the rest share what's left.",
+  categories: ["block"],
+  props: {},
+  style: {
+    ...inheritedTextStyle,
+    ...pick(boxStyle, "width", "maxWidth", "backgroundColor", "border"),
+    cellPadding: { kind: insets(), label: "Cell padding", description: "Every cell's padding, where the cell doesn't set its own.", support: { email: { level: "full", source: "writer" }, web: css } },
+    rowBorder: { kind: line(), label: "Line between rows", support: { email: { level: "full", source: "writer" }, web: css } },
+    borderCollapse: { kind: enumOf(["separate", "collapse"]), label: "Cell borders", description: "Whether cells side by side draw a border each (separate) or share one (collapse).", support: { email: { level: "full", source: "caniemail" }, web: css } },
+    ...placementStyle
+  },
+  children: { types: ["TableRow"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Table", paths: ["style.cellPadding", "style.rowBorder", "style.border", "style.backgroundColor"] }, TEXT_EDITOR] }
+});
+var TableRow = defineComponent({
+  type: "TableRow",
+  label: "Table row",
+  description: "A row of a Table. A header row's cells are header cells, in bold.",
+  categories: [],
+  props: {
+    header: prop(boolean(), { support: WRITTEN6, label: "Header", description: "Its cells head the columns below them.", default: false }),
+    footer: prop(boolean(), { support: WRITTEN6, label: "Footer", description: "It ends the table (printed, on each page the table runs to).", default: false })
+  },
+  style: { ...pick(textStyle, "color", "fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight", "letterSpacing", "textAlign", "textTransform"), backgroundColor: boxStyle.backgroundColor, height: boxStyle.height },
+  defaultStyleBy: { prop: "header", values: { true: { fontWeight: 700 } } },
+  children: { types: ["TableCell"] },
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Row", paths: ["props.header", "style.backgroundColor"] }, TEXT_EDITOR] }
+});
+var TableCell = defineComponent({
+  type: "TableCell",
+  label: "Table cell",
+  description: "A cell of a TableRow: text, and images. Its width sets its column's.",
+  categories: [],
+  props: {
+    colSpan: prop(number({ min: 1, integer: true }), { support: WRITTEN6, label: "Columns", description: "How many columns it spans.", default: 1 }),
+    ...TEXT_DIR
+  },
+  style: {
+    ...textStyle,
+    ...pick(boxStyle, "padding", "backgroundColor", "border"),
+    width: { kind: length(["px", "%"]), label: "Width", description: "Its column's width (of a cell spanning one column).", support: { email: { level: "full", source: "writer" }, web: css } },
+    verticalAlign: { kind: enumOf(["top", "middle", "bottom"]), label: "Vertical alignment", support: { email: { level: "full", source: "caniemail" }, web: css } }
+  },
+  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"] }] }
+});
+var Video = defineComponent({
+  type: "Video",
+  label: "Video",
+  description: "A YouTube or Vimeo video: its player on a page; in an email (which can't play one), its thumbnail, linked to it.",
+  categories: ["block"],
+  props: {
+    src: prop(video(), { support: WRITTEN6, label: "Video", required: true, description: "The video's YouTube or Vimeo link." }),
+    thumbnail: prop(asset(), {
+      support: { email: { level: "full", source: "writer" }, web: { level: "none", shows: "the video's player: a page plays the video", source: "writer" } },
+      label: "Thumbnail",
+      description: "The image an email shows, linked to the video. A YouTube video's own where there's none; a Vimeo video's can't be found without the network."
+    }),
+    title: prop(text(), { support: WRITTEN6, label: "Title", description: "The player's title on a page, the thumbnail's alternate text in an email.", default: "Video" })
+  },
+  style: { ...pick(boxStyle, "width", "maxWidth"), ...placementStyle },
+  children: {},
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "Video", paths: ["props.src", "props.thumbnail", "props.title", "style.width", "style.maxWidth"] }] }
+});
+var Html = defineComponent({
+  type: "Html",
+  label: "HTML",
+  description: "Markup written as it is, for what no component says (the builder's HTML block): in an email and on a page as given, nothing in it checked or escaped. A Document's PDF and a Canvas's image draw its plain text.",
+  categories: ["block"],
+  props: {
+    html: prop(text(), { support: WRITTEN6, label: "HTML", required: true, description: "The markup, written as it is: only markup you trust. Or give it as JSX inside the block, which React writes." }),
+    text: prop(text(), { support: WRITTEN6, label: "Plain text", description: "What it reads as in the plain-text version, and in a PDF or an image (its markup's words where there's none)." })
+  },
+  style: {},
+  children: {},
+  sizing: "stretch",
+  targets: { email: {}, web: {} },
+  editor: { groups: [{ title: "HTML", paths: ["props.html", "props.text"] }] }
+});
+var COMPONENTS = Object.freeze(
+  Object.fromEntries(
+    [Email, Page, Document, DocumentPage, PageBreak, PageHeader, PageFooter, PageNumber, Canvas, Svg, ...SHAPES, Section, Row, Column, Grid, Layer, Text, Heading, Span, Link, Button, Image, Divider, LineBreak, MergeTag, List, ListItem, Table, TableRow, TableCell, Video, Social, Menu, Html].map((d) => [
+      d.type,
+      d
+    ])
+  )
+);
+var CUSTOM_TYPE = /^[a-z][a-z0-9-]*\.[A-Z][A-Za-z0-9]*$/;
+function isCustom(definition) {
+  return definition.custom === true;
+}
+var Registry = class {
+  constructor(components = []) {
+    this.custom = /* @__PURE__ */ new Map();
+    for (const definition of components) this.add(definition);
+  }
+  add(definition) {
+    if (!isCustom(definition) || !CUSTOM_TYPE.test(definition.type)) {
+      throw new Error(`[Elements] ${JSON.stringify(definition?.type)} isn't a custom component (make one with component())`);
+    }
+    const known = this.custom.get(definition.type);
+    if (known && known !== definition) throw new Error(`[Elements] Two custom components are named ${definition.type}`);
+    this.custom.set(definition.type, definition);
+  }
+  get(type) {
+    if (Object.prototype.hasOwnProperty.call(COMPONENTS, type)) return COMPONENTS[type];
+    return this.custom.get(type);
+  }
+  get customs() {
+    return [...this.custom.values()];
+  }
+  all() {
+    return [...Object.values(COMPONENTS), ...this.custom.values()];
+  }
+};
+function propsWithDefaults(definition, props) {
+  const out = {};
+  for (const [key, spec] of Object.entries(definition.props)) if (spec.default !== void 0) out[key] = spec.default;
+  return { ...out, ...props };
+}
+function registryOf(options) {
+  return options instanceof Registry ? options : new Registry(options?.components);
+}
+var NODE_KEYS = ["id", "type", "props", "style", "mobile", "hover", "hidden", "children"];
+var ID = /^[A-Za-z][A-Za-z0-9_-]*$/;
+var isObject2 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function checkDocument(input, options) {
+  const registry = registryOf(options);
+  const d = new Diagnostics();
+  if (!isObject2(input)) {
+    d.error("document/invalid", 'A document is an object: { root: { type: "Email", \u2026 } }', "");
+    return { document: null, diagnostics: d.list };
+  }
+  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(), 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), 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));
+}
+var GUIDE = "@hyper-elements/react/GUIDE.md";
+var seeing = (message, type) => `${message}${/[?.]$/.test(message) ? "" : "."} See ${type} in ${GUIDE}`;
+var a = (type) => `${/^[AEIOU]/.test(type) ? "An" : "A"} ${type}`;
+function nearest(key, names) {
+  const lower = key.toLowerCase();
+  let best;
+  for (const name of names) {
+    const distance = name.toLowerCase() === lower ? 0 : editDistance(lower, name.toLowerCase());
+    if (distance <= (key.length > 4 ? 2 : 1) && (!best || distance < best.distance)) best = { name, distance };
+  }
+  return best?.name;
+}
+function editDistance(from, to) {
+  let row = Array.from({ length: to.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= from.length; i++) {
+    const next = [i];
+    for (let j = 1; j <= to.length; j++) next[j] = Math.min(row[j] + 1, next[j - 1] + 1, row[j - 1] + (from[i - 1] === to[j - 1] ? 0 : 1));
+    row = next;
+  }
+  return row[to.length];
+}
+var OTHER_BREAKPOINTS = /* @__PURE__ */ new Set(["base", "initial", "xs", "sm", "md", "lg", "xl", "2xl", "tablet", "desktop", "wide", "small", "medium", "large"]);
+function conditionHint(definition, key) {
+  const name = key.trim().replace(/^(&?:+|_+|\$|@)/, "").replace(/Style$/, "").toLowerCase();
+  const own = CUSTOM_TYPE.test(definition.type);
+  const hoverStyles = definition.hover ?? [];
+  const toHover = own ? `a template's own component takes only its place in a Row in its style: set hover styles in what it renders` : hoverStyles.length ? `hover styles go in its style's hover block, style={{ hover: { \u2026 } }} (it takes ${hoverStyles.join(", ")})` : `${a(definition.type).replace(/^A/, "a")} takes no hover styles (a Button's and a Link's colors do)`;
+  const toPhone = own ? `a template's own component takes only its place in a Row in its style: set phone styles in what it renders` : `phone styles go in its style's mobile block, style={{ mobile: { \u2026 } }}`;
+  if (name === "hover") return toHover;
+  if (name === "mobile" || name === "phone" || name === "phones" || key.trim().startsWith("@media")) return toPhone;
+  if (name === "focus" || name === "focus-visible" || name === "focusvisible" || name === "focus-within") {
+    return hoverStyles.length && !own ? `keyboard focus gets its hover styles: set them in style={{ hover: { \u2026 } }}` : `there are no focus styles; keyboard focus gets a Button's and a Link's hover styles`;
+  }
+  if (OTHER_BREAKPOINTS.has(name)) {
+    return `Elements has one breakpoint, phones: desktop styles go in style itself, phone styles in its mobile block, style={{ mobile: { \u2026 } }} (a Page sets where phones start with breakpoints={{ mobile }})`;
+  }
+  if (name === "active" || name === "pressed" || name === "press" || name === "visited" || name === "dark" || name === "light" || name === "print") {
+    return `there are no ${name} styles: Elements has phone styles (mobile) and hover styles (hover) in style`;
+  }
+  return void 0;
+}
+function unknownProp(definition, key) {
+  const condition = conditionHint(definition, key);
+  if (condition) return `${a(definition.type)} has no prop "${key}": ${condition}`;
+  if (Object.prototype.hasOwnProperty.call(definition.style, key)) return `${a(definition.type)} has no prop "${key}": it's a style, style={{ ${key}: \u2026 }}`;
+  const known = Object.keys(definition.props);
+  const meant = nearest(key, known);
+  return seeing(`${a(definition.type)} has no prop "${key}"${meant ? `: did you mean "${meant}"?` : known.length ? ` (it has ${known.join(", ")})` : ""}`, definition.type);
+}
+function placementMessage(parent, child) {
+  if (child.categories.includes("section")) return `A ${child.type} goes directly in an Email or Page, not in a ${parent.type}`;
+  if (child.categories.includes("root")) return `A ${child.type} is a root: it can't be inside a ${parent.type}`;
+  const takes = [...parent.children.text ? ["text"] : [], ...(parent.children.categories ?? []).map((c) => `${c} components`), ...parent.children.types ?? []];
+  return takes.length ? seeing(`A ${parent.type} takes ${takes.join(", ")}; a ${child.type} can't go in it`, parent.type) : `A ${parent.type} has no children`;
+}
+function readNode(input, path, parent, context) {
+  const { d } = context;
+  if (!isObject2(input)) {
+    d.error("node/invalid", `Expected a component ({ "type": \u2026 }), not ${JSON.stringify(input) ?? String(input)}`, path);
+    return null;
+  }
+  if (typeof input.type !== "string") {
+    d.error("node/type", 'A component has a "type" ("Row", "Heading", \u2026)', `${path}.type`);
+    return null;
+  }
+  const definition = context.registry.get(input.type);
+  if (!definition) {
+    const custom = CUSTOM_TYPE.test(input.type);
+    d.error(
+      "node/unknown-type",
+      custom ? `"${input.type}" is a custom component this document wasn't given: pass it in the components option` : `"${input.type}" isn't a component Elements knows`,
+      `${path}.type`
+    );
+    return null;
+  }
+  if (!parent && !definition.categories.includes("root")) {
+    d.error("root/invalid", `A document's root is an Email or Page, not a ${definition.type}`, `${path}.type`);
+    return null;
+  }
+  if (parent && !allowedIn(parent, definition)) {
+    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)) {
+      d.error("id/invalid", `An id starts with a letter and holds letters, digits, "_" and "-", not ${JSON.stringify(input.id)}`, `${path}.id`);
+    } else if (context.idPrefix === null) {
+      d.add("id/dropped", "info", `The id "${input.id}" is left out: inside a custom component, ids are kept only when the component is given one (a block used many times can't own an id)`, `${path}.id`);
+    } else {
+      const full = context.idPrefix ? `${context.idPrefix}-${input.id}` : input.id;
+      if (context.used.has(full)) d.error("id/duplicate", `The id "${full}" is already used by another component`, `${path}.id`);
+      else {
+        id = full;
+        context.used.add(full);
+      }
+    }
+  }
+  for (const key of Object.keys(input)) {
+    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, context.root);
+  if (props) node.props = props;
+  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;
+  }
+  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 given2 = input[condition.name];
+    if (inStyle !== void 0 && given2 !== 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 ?? given2;
+    if (value === void 0) continue;
+    const at = inStyle !== void 0 ? `${path}.style.${condition.name}` : `${path}.${condition.name}`;
+    if (condition.roots && !condition.roots(context.root)) {
+      if (condition.notAllowed) d.error(condition.notAllowed.code, condition.notAllowed.message, at, id);
+      continue;
+    }
+    if (isObject2(value) && Object.keys(value).some((key) => CONDITION_NAMES.has(key))) {
+      const own = {};
+      for (const [key, inner] of Object.entries(value)) {
+        if (CONDITION_NAMES.has(key)) d.error("style/nested", `${key} can't be set inside ${condition.name}: a block holds styles, not another block`, `${at}.${key}`, id);
+        else own[key] = inner;
+      }
+      value = own;
+    }
+    const read2 = readStyles(value, definition, definition.style, at, id, d, condition.name, (spec, key) => condition.allows(spec, key, definition), condition.for, context.root);
+    if (read2) node[condition.name] = read2;
+  }
+  if (input.hidden !== void 0) {
+    const hidden = readHidden(input.hidden, `${path}.hidden`, id, context);
+    if (hidden) node.hidden = hidden;
+  }
+  const children = readChildren(input.children, definition, `${path}.children`, id, context);
+  if (children.length) node.children = children;
+  return node;
+}
+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);
+    input = void 0;
+  }
+  for (const [key, value] of Object.entries(input ?? {})) {
+    if (value === void 0) continue;
+    const spec = Object.prototype.hasOwnProperty.call(definition.props, key) ? definition.props[key] : void 0;
+    if (!spec) {
+      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) {
+      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)) {
+      d.error("prop/required", `A ${definition.type} needs "${key}" (${spec.kind.accepts})`, `${path}.${key}`, id);
+    }
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+var UNSUPPORTED_CSS = {
+  margin: "use the parent's gap for space between siblings, or padding for space inside",
+  marginTop: "use the parent's gap, or padding",
+  marginBottom: "use the parent's gap, or padding",
+  marginLeft: "use padding",
+  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",
+  justify: `it's justifyContent now ("between" is "space-between")`,
+  wrap: "a Row stays side by side on phones with its stackOnMobile prop set to false; flexWrap wraps it on the web",
+  color: "a Divider's line is its borderTop, with its color",
+  thickness: `a Divider's line is borderTop now: "1px solid #bbbbbb"`,
+  lineStyle: `a Divider's line is borderTop now: "1px solid #bbbbbb"`
+};
+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, 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);
+    return void 0;
+  }
+  const out = {};
+  for (const [key, value] of Object.entries(input)) {
+    if (value === void 0) continue;
+    const spec = Object.prototype.hasOwnProperty.call(specs, key) ? specs[key] : void 0;
+    if (!spec) {
+      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`, `"${key}" can't be set ${forLabel ?? "here"}`, `${path}.${key}`, id);
+      continue;
+    }
+    const parsed = spec.kind.parse(value);
+    if (parsed.ok) out[key] = parsed.value;
+    else d.error(`${what}/invalid`, `${key}: ${parsed.message}`, `${path}.${key}`, id);
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+function readHidden(input, path, id, context) {
+  const { d } = context;
+  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;
+  }
+  if (!isObject2(input) || Object.entries(input).some(([key, value]) => key !== "mobile" && key !== "desktop" || value !== void 0 && typeof value !== "boolean")) {
+    d.error("hidden/invalid", "hidden is { mobile?: boolean, desktop?: boolean }", path, id);
+    return void 0;
+  }
+  const out = {};
+  if (input.mobile === true) out.mobile = true;
+  if (input.desktop === true) out.desktop = true;
+  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) {
+  const { d } = context;
+  if (input === void 0) return [];
+  if (!Array.isArray(input)) {
+    d.error("children/invalid", "children is an array of components and text", path, id);
+    return [];
+  }
+  const out = [];
+  input.forEach((child, index) => {
+    const at = `${path}[${index}]`;
+    if (typeof child === "string") {
+      if (!child) return;
+      if (definition.children.text) {
+        const last = out[out.length - 1];
+        if (typeof last === "string") out[out.length - 1] = last + child;
+        else out.push(child);
+      } else if (child.trim()) {
+        d.error("children/text-not-allowed", `Text can't go straight in a ${definition.type}: put it in a Text or Heading`, at, id);
+      }
+      return;
+    }
+    const node = readNode(child, at, definition, context);
+    if (!node) return;
+    if (definition.type === "Document" && (node.type === "PageHeader" || node.type === "PageFooter") && out.some((other) => typeof other !== "string" && other.type === node.type)) {
+      d.error("children/one-only", `A Document has one ${node.type}, drawn on every page: this is a second (put what both hold in one)`, at, node.id);
+    }
+    out.push(node);
+  });
+  return out;
+}
+function describeComponent(type, options) {
+  const registry = registryOf(options);
+  const definition = registry.get(type);
+  if (!definition) return void 0;
+  const described = describe(definition, registry, reachable(registry));
+  return options?.root ? forRoot(described, options.root, registry) : described;
+}
+function describeComponents(options) {
+  const registry = registryOf(options);
+  const reach = reachable(registry);
+  const all = registry.all().map((definition) => describe(definition, registry, reach));
+  const root = options?.root;
+  if (!root) return all;
+  return all.flatMap((description) => forRoot(description, root, registry) ?? []);
+}
+function describeConditions(options) {
+  const registry = registryOf(options);
+  return CONDITIONS.map((condition) => ({
+    name: condition.name,
+    on: condition.on,
+    roots: rootDefinitions(registry).filter((root) => !condition.roots || condition.roots(root)).map((root) => root.type)
+  }));
+}
+function forRoot(description, root, registry) {
+  if (!description.roots.includes(root)) return void 0;
+  const responsive = !!registry.get(root)?.responsive;
+  return {
+    ...description,
+    roots: [root],
+    properties: description.properties.filter((property) => property.roots.includes(root)).map((property) => ({ ...property, roots: [root], mobile: property.mobile && responsive }))
+  };
+}
+function rootDefinitions(registry) {
+  return ROOT_NAMES.flatMap((name) => registry.get(name) ?? []);
+}
+function holds(parent, child) {
+  return !!parent.children.types?.includes(child.type) || child.categories.some((category) => parent.children.categories?.includes(category));
+}
+function reachable(registry) {
+  const all = registry.all();
+  const out = /* @__PURE__ */ new Map();
+  for (const root of rootDefinitions(registry)) {
+    const seen = /* @__PURE__ */ new Set([root.type]);
+    const queue = [root];
+    while (queue.length) {
+      const parent = queue.shift();
+      for (const child of all) {
+        if (seen.has(child.type) || child.categories.includes("root") || !holds(parent, child)) continue;
+        seen.add(child.type);
+        queue.push(child);
+      }
+    }
+    out.set(root.type, seen);
+  }
+  return out;
+}
+function componentRoots(definition, options, reach = reachable(registryOf(options))) {
+  const registry = registryOf(options);
+  return rootDefinitions(registry).filter((root) => reach.get(root.type)?.has(definition.type)).filter((root) => Object.keys(definition.targets).some((target) => target in root.targets)).filter((root) => !definition.roots || definition.roots.includes(root.type)).map((root) => root.type);
+}
+function describe(definition, registry, reach) {
+  const roots = componentRoots(definition, registry, reach);
+  const within2 = (declared) => declared ? roots.filter((root) => declared.includes(root)) : roots;
+  const properties = [];
+  for (const [key, spec] of Object.entries(definition.props)) {
+    properties.push({
+      path: `props.${key}`,
+      label: spec.label,
+      ...spec.description ? { description: spec.description } : {},
+      kind: spec.kind.name,
+      accepts: spec.kind.accepts,
+      editor: spec.kind.editor,
+      editable: spec.editable !== false,
+      required: !!spec.required,
+      ...spec.default !== void 0 ? { default: spec.default } : {},
+      inherited: false,
+      mobile: false,
+      roots: within2(spec.roots),
+      schema: spec.kind.jsonSchema()
+    });
+  }
+  const defaults = definition.defaultStyle ?? {};
+  const hover = new Set(definition.hover ?? []);
+  const targets = Object.keys(definition.targets);
+  const unshownOnPhones = (key) => {
+    const declared = definition.conditionSupport?.mobile?.[key];
+    return !!declared && targets.every((target) => [].concat(declared[target] ?? []).some((rule2) => rule2.level === "none" && !rule2.values && !rule2.when));
+  };
+  for (const [key, spec] of Object.entries(definition.style)) {
+    const group = styleGroup(key, spec);
+    const base = {
+      label: spec.label,
+      ...spec.description ? { description: spec.description } : {},
+      kind: spec.kind.name,
+      accepts: spec.kind.accepts,
+      editor: spec.kind.editor,
+      editable: spec.editable !== false,
+      required: false,
+      inherited: !!spec.inherited,
+      mobile: !!spec.mobile && !unshownOnPhones(key),
+      roots: within2(spec.roots),
+      ...group ? { group } : {},
+      schema: spec.kind.jsonSchema()
+    };
+    properties.push({ path: `style.${key}`, ...base, ...defaults[key] !== void 0 ? { default: defaults[key] } : {} });
+    if (hover.has(key)) properties.push({ path: `hover.${key}`, ...base, label: `${spec.label} on hover`, mobile: false });
+  }
+  return {
+    type: definition.type,
+    label: definition.label,
+    description: definition.description,
+    categories: definition.categories,
+    properties,
+    children: { text: !!definition.children.text, categories: definition.children.categories ?? [], types: definition.children.types ?? [] },
+    targets: Object.keys(definition.targets),
+    roots,
+    groups: (definition.editor?.groups ?? []).map(
+      (group) => "composite" in group ? { title: group.title, paths: group.composite.covers, composite: group.composite.editor } : { title: group.title, paths: group.paths }
+    )
+  };
+}
+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();
+  const visit = (node, at) => {
+    places.set(at, paths.get(node) ?? at);
+    node.children?.forEach((child, index) => isNode(child) && visit(child, `${at}.children[${index}]`));
+  };
+  visit(document.root, "root");
+  return (path) => {
+    for (let at = path; at; at = at.slice(0, Math.max(at.lastIndexOf("."), at.lastIndexOf("["), 0))) {
+      const place = places.get(at);
+      if (place !== void 0) return place + path.slice(at.length);
+    }
+    return path;
+  };
+}
+function expandDocument(document, options, target) {
+  const registry = registryOf(options);
+  const d = new Diagnostics();
+  const paths = /* @__PURE__ */ new WeakMap();
+  const taken = /* @__PURE__ */ new Set();
+  const collect = (node) => {
+    if (node.id) taken.add(node.id);
+    node.children?.forEach((child) => isNode(child) && collect(child));
+  };
+  collect(document.root);
+  const rootDefinition = registry.get(document.root.type);
+  const responsive = !!rootDefinition?.responsive;
+  const unshown = (node, path) => {
+    const declared = target && registry.get(node.type)?.conditionSupport;
+    if (!declared) return;
+    for (const condition of CONDITIONS) {
+      const block = blockOf(node, condition);
+      const byStyle = declared[condition.name];
+      if (!block || !byStyle || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      for (const [key, value] of Object.entries(block)) {
+        reportDeclared(d, { type: node.type, id: node.id, props: node.props ?? {} }, `${path}.${condition.name}.${key}`, key, value, byStyle[key]?.[target], target);
+      }
+    }
+  };
+  const visit = (given2, path, depth, self = path) => {
+    unshown(given2, path);
+    const arrange = registry.get(given2.type)?.arrange;
+    if (!arrange) return walk(given2, path, self, depth);
+    const origins = /* @__PURE__ */ new Map();
+    given2.children?.forEach((child, index) => isNode(child) && origins.set(child, `${path}.children[${index}]`));
+    return walk(arrange(given2), path, self, depth, origins);
+  };
+  const walk = (node, path, self, depth, origins) => {
+    const definition = registry.get(node.type);
+    const children = node.children?.map((child, index) => {
+      if (!isNode(child)) return child;
+      const at = origins ? origins.get(child) ?? self : `${path}.children[${index}]`;
+      const childDefinition = registry.get(child.type);
+      if (childDefinition && isCustom(childDefinition)) return expandOne(child, childDefinition, definition, at, depth) ?? null;
+      if (origins && !origins.has(child)) return walk(child, self, self, depth, origins);
+      return visit(child, at, depth);
+    });
+    const out = children?.length ? { ...node, children: children.filter((child) => child !== null) } : node;
+    paths.set(out, self);
+    return out;
+  };
+  const expandOne = (node, definition, parent, path, depth, self = path) => {
+    if (depth >= MAX_DEPTH) {
+      d.error("custom/depth", `${node.type} expands into custom components ${MAX_DEPTH} deep: does it contain itself?`, path, node.id);
+      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, 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, 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 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);
+    return visit(expanded, `${path}(${node.type})`, depth + 1, self);
+  };
+  const collectIds = (node) => {
+    if (node.id) taken.add(node.id);
+    node.children?.forEach((child) => isNode(child) && collectIds(child));
+  };
+  return { document: { ...document, root: visit(document.root, "root", 0) }, diagnostics: d.list, paths };
+}
+var INITIAL_TEXT = {
+  color: "#000000",
+  fontFamily: "Arial, Helvetica, sans-serif",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  lineHeight: 1.5,
+  letterSpacing: 0,
+  textAlign: "left",
+  textTransform: "none"
+};
+var INHERITED = Object.keys(INITIAL_TEXT);
+function toPx(value, of) {
+  const length3 = readLength(value);
+  if (!length3) return null;
+  switch (length3.unit) {
+    case "px":
+      return length3.value;
+    case "%":
+      return of === null ? null : of * length3.value / 100;
+    case "pt":
+      return length3.value * 96 / 72;
+    case "mm":
+      return length3.value * 96 / 25.4;
+    case "in":
+      return length3.value * 96;
+  }
+}
+function lineHeightPx(lineHeight3, fontSize) {
+  if (lineHeight3 === "normal") return Math.round(1.2 * fontSize * 100) / 100;
+  return typeof lineHeight3 === "number" ? Math.round(lineHeight3 * fontSize * 100) / 100 : Number.parseFloat(lineHeight3);
+}
+function horizontalFrame(style) {
+  const padding = style.padding;
+  const border3 = style.border;
+  return (padding ? padding.left + padding.right : 0) + (border3?.left?.width ?? 0) + (border3?.right?.width ?? 0);
+}
+function resolveExpanded(document, options, paths) {
+  const registry = registryOf(options);
+  const d = new Diagnostics();
+  const definition = registry.get(document.root.type);
+  const context = { d, registry, responsive: !!definition.responsive, root: document.root.type };
+  const root = resolveNode(document.root, "root", { ...INITIAL_TEXT, lineHeightPx: 24 }, null, context);
+  const width = root.type === "Document" ? pageBox(root.props).contentWidth : toPx(root.props.width, null);
+  root.width = width;
+  root.contentWidth = width === null ? null : width - horizontalFrame(root.style);
+  root.children = resolveChildren(document.root, "root", root, root.contentWidth, "stack", context);
+  const templatePath = paths ? templatePathsOf(document, paths) : (path) => path;
+  return { root, diagnostics: d.list.map((diagnostic) => ({ ...diagnostic, path: templatePath(diagnostic.path) })), templatePath };
+}
+function styleOf(node, definition, props, context) {
+  const style = { ...definition.defaultStyle ?? {} };
+  const by = definition.defaultStyleBy;
+  if (by) Object.assign(style, by.values[String(props[by.prop])] ?? {});
+  return { ...style, ...node.style };
+}
+function textOf(parent, style) {
+  const text2 = { ...parent };
+  for (const key of INHERITED) if (style[key] !== void 0) text2[key] = style[key];
+  const out = text2;
+  out.lineHeightPx = lineHeightPx(out.lineHeight, out.fontSize);
+  return out;
+}
+function directed(text2, dir, ownAlign) {
+  if (ownAlign !== void 0 || dir !== "rtl" && dir !== "ltr") return text2;
+  return { ...text2, textAlign: dir === "rtl" ? "right" : "left" };
+}
+function resolveNode(node, path, parentText, available, context) {
+  const definition = context.registry.get(node.type);
+  const props = propsWithDefaults(definition, node.props);
+  const style = styleOf(node, definition, props);
+  return {
+    ...node.id ? { id: node.id } : {},
+    path,
+    type: node.type,
+    definition,
+    props,
+    style,
+    ...node.hover ? { hover: node.hover } : {},
+    ...node.mobile ? { mobile: node.mobile } : {},
+    ...node.hidden ? { hidden: node.hidden } : {},
+    text: directed(textOf(parentText, style), props.dir, node.style?.textAlign),
+    available,
+    width: null,
+    contentWidth: null,
+    children: []
+  };
+}
+function clamp(width, style, of) {
+  const min = toPx(style.minWidth, of);
+  const max = toPx(style.maxWidth, of);
+  if (max !== null) width = Math.min(width, max);
+  if (min !== null) width = Math.max(width, min);
+  return width;
+}
+function intrinsicWidth(resolved, available) {
+  if (resolved.type === "Svg" && typeof resolved.props.width === "number") return resolved.props.width + horizontalFrame(resolved.style);
+  if (resolved.type !== "Image" || resolved.props.src === void 0) return null;
+  const own = assetParts(resolved.props.src).width ?? null;
+  if (own === null) return null;
+  return clamp(available === null ? own : Math.min(own, available), resolved.style, available);
+}
+function stackedWidth(resolved, available) {
+  const set = toPx(resolved.style.width, available);
+  if (set !== null) return clamp(set, resolved.style, available);
+  if (resolved.definition.sizing === "stretch") return available === null ? null : clamp(available, resolved.style, available);
+  if (resolved.definition.sizing === "shrink") return intrinsicWidth(resolved, available);
+  return null;
+}
+function setWidth(resolved, width) {
+  resolved.width = width === null ? null : Math.round(width);
+  resolved.contentWidth = resolved.width === null ? null : Math.max(0, resolved.width - horizontalFrame(resolved.style));
+}
+function resolveChildren(node, path, parent, available, layout, context) {
+  const out = [];
+  const nodes = [];
+  (node.children ?? []).forEach((child, index) => {
+    if (!isNode(child)) {
+      out.push(child);
+      return;
+    }
+    const at = `${path}.children[${index}]`;
+    const inText = layout === "text" && !!context.registry.get(child.type)?.categories.includes("inline");
+    const resolved = resolveNode(child, at, parent.text, inText ? null : available, context);
+    if (resolved.style.flex !== void 0 && layout !== "row") {
+      context.d.warning("style/ignored", `flex only applies to a child of a Row; this ${child.type} is in a ${parent.type}`, `${at}.style.flex`, child.id);
+    }
+    nodes.push({ source: child, resolved, at });
+    out.push(resolved);
+  });
+  if (layout === "row") layOutRow(parent, nodes, available, path, context);
+  else {
+    for (const { resolved, at, source } of nodes) {
+      if (resolved.available === null && layout === "text") continue;
+      const across = parent.type === "Layer" ? parent.style.justifyItems : parent.style.alignItems;
+      const stretched = layout === "stack" && across === "stretch" && resolved.definition.sizing === "shrink" && resolved.style.width === void 0 && resolved.type !== "Svg";
+      const width = stretched && resolved.available !== null ? clamp(resolved.available, resolved.style, resolved.available) : stackedWidth(resolved, resolved.available);
+      if (width !== null && resolved.available !== null && width > resolved.available + 0.5) {
+        context.d.warning("layout/overflow", `This ${source.type} is ${Math.round(width)}px wide, wider than the ${Math.round(resolved.available)}px it's in`, at, source.id);
+      }
+      setWidth(resolved, width);
+    }
+  }
+  for (const { source, resolved, at } of nodes) {
+    if (source.type === "Table") {
+      resolved.children = resolveTable(source, at, resolved, context);
+      continue;
+    }
+    const own = source.type === "Row" ? "row" : resolved.definition.children.text ? "text" : "stack";
+    let inner = resolved.contentWidth ?? resolved.available ?? (layout === "text" ? available : null);
+    if (source.type === "List" && inner !== null) inner = Math.max(0, inner - (toPx(resolved.style.indent, null) ?? 0));
+    resolved.children = resolveChildren(source, at, resolved, inner, own, context);
+    if (resolved.width === null && source.type === "Link" && layout !== "text") {
+      const image = resolved.children.find((c) => typeof c !== "string" && c.type === "Image");
+      if (image && image.width !== null) setWidth(resolved, image.width + horizontalFrame(resolved.style));
+    }
+  }
+  return out;
+}
+function layOutRow(row, nodes, available, path, context) {
+  if (available === null) return;
+  const desktop = nodes.filter(({ resolved }) => !resolved.hidden?.desktop);
+  for (const { resolved } of nodes) if (resolved.hidden?.desktop) setWidth(resolved, available);
+  const gap = toPx(row.style.gap, null) ?? 0;
+  const items2 = desktop.map(({ resolved }) => flexItem(resolved, available));
+  const wraps = row.style.flexWrap === "wrap" && (context.root === "Page" || context.root === "Email" && row.props.stackOnMobile === false);
+  for (const line2 of wraps ? wrappedLines(items2, gap, available) : [items2.map((_, index) => index)]) {
+    const room = available - gap * Math.max(0, line2.length - 1);
+    const ownItems = line2.map((index) => items2[index]);
+    const widths = roundTogether(flexWidths(ownItems, room));
+    line2.forEach((index, at) => setWidth(desktop[index].resolved, items2[index].unknown ? null : widths[at]));
+    const asked = ownItems.reduce((sum, item) => sum + item.base, 0);
+    const used = widths.reduce((sum, width) => sum + width, 0);
+    if (used > room + 0.5) {
+      context.d.warning("layout/overflow", `The Row's children need ${Math.round(used - room)}px more than the ${Math.round(available)}px it has, at their minimum widths`, path, row.id);
+    } else if (asked > room + 0.5 && ownItems.some((item) => item.shrink > 0 && item.inner > 0)) {
+      context.d.warning("layout/shrunk", `The Row's children's widths add up to ${Math.round(asked)}px, more than the ${Math.round(room)}px it has: they're narrowed to fit, as a browser does`, path, row.id);
+    }
+  }
+}
+function wrappedLines(items2, gap, available) {
+  const lines = [];
+  let used = 0;
+  items2.forEach((item, index) => {
+    const size2 = Math.max(item.min, Math.min(item.max, item.base));
+    const line2 = lines[lines.length - 1];
+    if (line2 && used + gap + size2 <= available + 0.5) {
+      line2.push(index);
+      used += gap + size2;
+    } else {
+      lines.push([index]);
+      used = size2;
+    }
+  });
+  return lines;
+}
+function flexItem(resolved, available) {
+  const { style } = resolved;
+  const frame2 = horizontalFrame(style);
+  const width = toPx(style.width, available);
+  const own = style.flex === "none" || style.flex === 0 || resolved.type === "Svg";
+  const intrinsic = own && width === null ? intrinsicWidth(resolved, available) : null;
+  const base = width !== null ? width : own ? intrinsic ?? 0 : frame2;
+  const min = Math.max(frame2, toPx(style.minWidth, available) ?? 0);
+  const max = Math.max(min, toPx(style.maxWidth, available) ?? Number.POSITIVE_INFINITY);
+  return {
+    base,
+    inner: Math.max(0, base - frame2),
+    min,
+    max,
+    grow: width !== null || own ? 0 : typeof style.flex === "number" ? style.flex : 1,
+    shrink: own ? 0 : 1,
+    unknown: own && width === null && intrinsic === null
+  };
+}
+function flexWidths(items2, room) {
+  const clamp2 = (item, width) => Math.max(item.min, Math.min(item.max, width));
+  const sum = (values) => values.reduce((total, value) => total + value, 0);
+  const hypothetical = items2.map((item) => clamp2(item, item.base));
+  const growing = sum(hypothetical) <= room;
+  const factor = (item) => growing ? item.grow : item.shrink;
+  const target = items2.map((item) => item.base);
+  const frozen = items2.map((item, index) => {
+    const inflexible = factor(item) === 0 || (growing ? item.base > hypothetical[index] : item.base < hypothetical[index]);
+    if (inflexible) target[index] = hypothetical[index];
+    return inflexible;
+  });
+  const initialFree = room - sum(items2.map((item, index) => frozen[index] ? target[index] : item.base));
+  for (let round = 0; round <= items2.length && frozen.includes(false); round++) {
+    const open2 = items2.map((_, index) => index).filter((index) => !frozen[index]);
+    let free = room - sum(items2.map((item, index) => frozen[index] ? target[index] : item.base));
+    const factors = sum(open2.map((index) => factor(items2[index])));
+    if (factors < 1 && Math.abs(initialFree * factors) < Math.abs(free)) free = initialFree * factors;
+    const weights = open2.map((index) => growing ? items2[index].grow : items2[index].shrink * items2[index].inner);
+    const total = sum(weights);
+    open2.forEach((index, k) => {
+      target[index] = items2[index].base + (total > 0 ? free * weights[k] / total : 0);
+    });
+    const violation = open2.map((index) => clamp2(items2[index], target[index]) - target[index]);
+    const net = sum(violation);
+    open2.forEach((index, k) => {
+      const past = Math.abs(net) < 1e-9 || (net > 0 ? violation[k] > 0 : violation[k] < 0);
+      target[index] = clamp2(items2[index], target[index]);
+      if (past) frozen[index] = true;
+    });
+  }
+  return target;
+}
+function roundTogether(widths) {
+  const floors = widths.map(Math.floor);
+  let left = Math.round(widths.reduce((sum, width) => sum + width, 0)) - floors.reduce((sum, width) => sum + width, 0);
+  const order = widths.map((width, index) => ({ index, rest: width - Math.floor(width) })).sort((a2, b) => b.rest - a2.rest || a2.index - b.index);
+  for (const { index } of order) {
+    if (left <= 0) break;
+    floors[index] += 1;
+    left -= 1;
+  }
+  return floors;
+}
+function share(free, weights) {
+  const total = weights.reduce((sum, w) => sum + w, 0);
+  const room = Math.floor(free);
+  const exact = weights.map((w) => total ? room * w / total : 0);
+  const widths = exact.map(Math.floor);
+  let left = room - widths.reduce((a2, b) => a2 + b, 0);
+  const order = exact.map((value, index) => ({ index, rest: value - Math.floor(value) })).sort((a2, b) => b.rest - a2.rest || a2.index - b.index);
+  for (const { index } of order) {
+    if (left <= 0) break;
+    widths[index] += 1;
+    left -= 1;
+  }
+  return widths;
+}
+function resolveTable(source, path, table, context) {
+  const available = table.contentWidth;
+  const rows = (source.children ?? []).flatMap((child, index) => {
+    if (!isNode(child)) return [];
+    const at = `${path}.children[${index}]`;
+    const row = resolveNode(child, at, table.text, available, context);
+    setWidth(row, available);
+    const cells = (child.children ?? []).flatMap((cell, cellIndex) => {
+      if (!isNode(cell)) return [];
+      const resolved = resolveNode(cell, `${at}.children[${cellIndex}]`, row.text, available, context);
+      if (resolved.style.padding === void 0 && table.style.cellPadding !== void 0) resolved.style.padding = table.style.cellPadding;
+      return [{ source: cell, resolved, at: `${at}.children[${cellIndex}]` }];
+    });
+    return [{ row, cells }];
+  });
+  const span = (cell) => Math.max(1, Number(cell.props.colSpan) || 1);
+  const count = Math.max(0, ...rows.map(({ cells }) => cells.reduce((sum, { resolved }) => sum + span(resolved), 0)));
+  let columns = null;
+  if (available !== null && count > 0) {
+    const set = new Array(count).fill(null);
+    const own = new Array(count).fill(false);
+    for (const { cells } of rows) {
+      let column = 0;
+      for (const { resolved } of cells) {
+        if (span(resolved) === 1 && set[column] === null) {
+          const width = toPx(resolved.style.width, available);
+          set[column] = width === null ? null : Math.round(width);
+          own[column] = typeof resolved.style.width === "number";
+        }
+        column += span(resolved);
+      }
+    }
+    const fixed = set.reduce((sum, width) => sum + (width ?? 0), 0);
+    if (fixed > available + count / 2) {
+      context.d.warning("layout/overflow", `The Table's columns are ${Math.round(fixed - available)}px wider than the ${Math.round(available)}px it has`, path, table.id);
+    }
+    const free = set.map((width, index) => width === null ? index : -1).filter((index) => index >= 0);
+    const shared = share(Math.max(0, available - fixed), free.map(() => 1));
+    columns = set.map((width, index) => width === null ? shared[free.indexOf(index)] : width);
+    if (free.length === 0 && fixed > 0 && Math.abs(fixed - available) > 0.5) columns = share(available, columns);
+    if (free.length > 0 && own.some(Boolean)) {
+      const sizes = set.map((width, index) => own[index] ? "px" : width === null ? "free" : "share");
+      table.columnSizes = sizes;
+      for (const { row } of rows) row.columnSizes = sizes;
+    }
+  }
+  table.columns = columns;
+  const rowBorder = table.style.rowBorder;
+  rows.forEach(({ cells }, index) => {
+    if (!rowBorder || index === rows.length - 1) return;
+    for (const { resolved } of cells) {
+      const own = resolved.style.border;
+      if (!own?.bottom) resolved.style.border = { ...own, bottom: rowBorder };
+    }
+  });
+  for (const { row, cells } of rows) {
+    let column = 0;
+    for (const { source: cell, resolved, at } of cells) {
+      const width = columns ? columns.slice(column, column + span(resolved)).reduce((sum, w) => sum + w, 0) : null;
+      column += span(resolved);
+      resolved.available = width;
+      setWidth(resolved, width);
+      resolved.children = resolveChildren(cell, at, resolved, resolved.contentWidth, "text", context);
+    }
+    row.children = cells.map(({ resolved }) => resolved);
+  }
+  return rows.map(({ row }) => row);
+}
+function checkTargetExpanded(document, target, options, paths) {
+  const registry = registryOf(options);
+  const d = new Diagnostics();
+  const visit = (node, path) => {
+    const definition = registry.get(node.type);
+    if (definition && !definition.targets[target]) {
+      const why = definition.unsupported?.[target];
+      d.error("target/unsupported", `A ${node.type} can't be rendered to ${target}${why ? `: ${why}` : ""}`, path, node.id);
+      return;
+    }
+    node.children?.forEach((child, index) => isNode(child) && visit(child, `${path}.children[${index}]`));
+  };
+  visit(document.root, "root");
+  const templatePath = paths ? templatePathsOf(document, paths) : (path) => path;
+  return d.list.map((diagnostic) => ({ ...diagnostic, path: templatePath(diagnostic.path) }));
+}
+var isNode2 = (child) => typeof child !== "string";
+var shown = (node) => shownAnywhere(node);
+function layerShape(node) {
+  const children = node.children.filter(isNode2).filter(shown);
+  const [base, over] = children;
+  if (!base || base.type !== "Image" || children.length > 2) {
+    return { problem: `In an email, a Layer is an Image with one child over it (drawn as the image's background); this one has ${children.length > 2 ? `${children.length} children` : base ? `a ${base.type} under` : "no children"}`, path: node.path };
+  }
+  if (base.width === null || node.contentWidth === null || Math.abs(base.width - node.contentWidth) > 1) {
+    return { problem: "In an email, a Layer's Image is as wide as the Layer (it's drawn as its background): give it width 100%", path: `${base.path}.style.width` };
+  }
+  if (typeof node.style.height === "number") return { base, over, height: node.style.height };
+  const { width, height } = assetParts(base.props.src);
+  if (!width || !height) {
+    return { problem: "In an email, a Layer is as tall as its Image, which needs its file's width and height (src={{ src, width, height }}); or give the Layer a height", path: `${base.path}.props.src` };
+  }
+  return { base, over, height: Math.round(base.width * height / width) };
+}
+var CHARACTER = 0.45;
+var characters = (node) => node.children.reduce((sum, child) => sum + (typeof child === "string" ? child.length : child.type === "MergeTag" ? String(child.props.name ?? "").length + 4 : characters(child)), 0);
+function widthOf(node, phone) {
+  const own = phone === void 0 ? void 0 : node.mobile?.width;
+  if (typeof own === "number") return own;
+  if (typeof own === "string") return Number.parseFloat(own) / 100 * phone;
+  if (node.width !== null) return node.width;
+  const images = node.children.reduce((sum, child) => sum + (typeof child !== "string" && child.type === "Image" && child.width !== null ? child.width : 0), 0);
+  return characters(node) * node.text.fontSize * CHARACTER + images + horizontalFrame(node.style);
+}
+function oneLineWidth(row, phone) {
+  const children = row.children.filter((child) => typeof child !== "string" && !(phone === void 0 ? child.hidden?.desktop : child.hidden?.mobile));
+  const gap = gapOf2(row, phone !== void 0);
+  return children.reduce((sum, child) => sum + widthOf(child, phone), 0) + gap * Math.max(0, children.length - 1);
+}
+var gapOf2 = (row, phone) => phone && typeof row.mobile?.gap === "number" ? row.mobile.gap : typeof row.style.gap === "number" ? row.style.gap : 0;
+function wrapsPastIts(row) {
+  if (row.type !== "Row" || row.style.flexWrap !== "wrap" || row.contentWidth === null) return null;
+  const width = oneLineWidth(row);
+  return width > row.contentWidth + 0.5 ? Math.round(width) : null;
+}
+function wrapsWithGap(row) {
+  if (row.props.stackOnMobile !== false || row.style.flexWrap !== "wrap" && row.style.flexWrap !== "words" || row.contentWidth === null) return null;
+  const room = Math.min(row.contentWidth, 320);
+  const desktop = !row.hidden?.desktop && gapOf2(row, false) > 0 && oneLineWidth(row) > row.contentWidth + 0.5;
+  const phones = !row.hidden?.mobile && gapOf2(row, true) > 0 && oneLineWidth(row, room) > room + 0.5;
+  return desktop && phones ? "desktop and phones" : desktop ? "desktop" : phones ? "phones" : null;
+}
+var isNode3 = (child) => typeof child !== "string";
+var same3 = (a2, b) => JSON.stringify(a2) === JSON.stringify(b);
+function support(root, target) {
+  const d = new Diagnostics();
+  const visit = (node) => {
+    const { definition } = node;
+    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];
+      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)) {
+      if (same3(value, definition.props[key]?.default)) continue;
+      reportDeclared(d, node, `${node.path}.props.${key}`, key, value, definition.props[key]?.support?.[target], target);
+    }
+    for (const condition of CONDITIONS) {
+      const block = blockOf(node, condition);
+      if (!block || condition.hiddenKey && node.hidden?.[condition.hiddenKey]) continue;
+      const own = condition.support[target];
+      reportDeclared(d, node, `${node.path}.${condition.name}`, condition.name, block, own, target);
+      if (!own || own.level === "none") continue;
+      for (const [key, value] of Object.entries(block)) {
+        const rules = condition.styles?.[key]?.[target] ?? definition.style[key]?.support?.[target];
+        reportDeclared(d, node, `${node.path}.${condition.name}.${key}`, key, value, rules, target, condition.outlookApplies);
+      }
+    }
+    for (const child of node.children) if (isNode3(child) && shownAnywhere(child)) visit(child);
+  };
+  visit(root);
+  return d.list;
+}
+function 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;
+  const families = fontStack(stack);
+  const last = families[families.length - 1];
+  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, the email client picks its own font`,
+    `${node.path}.style.fontFamily`,
+    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) {
+  const { path, id } = node;
+  if (node.type === "Row") {
+    const past = node.props.stackOnMobile === false ? wrapsPastIts(node) : null;
+    if (past !== null) {
+      d.add(
+        "email/outlook-degraded",
+        "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,
+        { clients: ["outlook"], fix: "put less in it, or let it stack on phones (stackOnMobile)" }
+      );
+    }
+    const lines = wrapsWithGap(node);
+    if (lines !== null) {
+      d.add(
+        "email/degraded",
+        "info",
+        `What it holds looks too wide for one line on ${lines} (an estimate), and an email can't keep its gap between the lines it wraps onto: they touch. Give what's in it padding, or put each line in a Row of its own`,
+        `${path}.style.gap`,
+        id
+      );
+    }
+    for (const child of node.children.filter(isNode2).filter(shown)) {
+      if (child.width === null && child.type !== "Link" && child.type !== "Text") {
+        d.warning("email/width", `This ${child.type} takes its own size in a Row, and its size isn't known: give it a width, so Outlook can lay the Row out`, `${child.path}.style.width`, child.id);
+      }
+    }
+  }
+  if (node.type === "Layer") {
+    const shape2 = layerShape(node);
+    if ("problem" in shape2) d.error("email/layer", shape2.problem, shape2.path, id);
+    else if (node.style.height === void 0 && !shape2.base.hidden?.mobile) {
+      d.add("email/layer-phone", "info", "On phones, the email keeps this Layer's height and cuts its image at the sides (a page scales it): give the Layer a height to draw both the same", `${path}.style.height`, id);
+    }
+  }
+  if (node.type === "TableCell" && node.hidden) {
+    d.warning("email/unsupported", "A TableCell can't be hidden in email (its row would lose a column): hide its TableRow", `${path}.hidden`, id);
+  }
+  if (node.type === "Video" && node.props.thumbnail === void 0 && !videoParts(String(node.props.src))?.thumbnail) {
+    d.warning("email/video-thumbnail", "A Vimeo video's thumbnail can't be found without the network: give this Video a thumbnail, or the email shows a link with its title", `${path}.props.thumbnail`, id);
+  }
+  if (node.type === "Image" && node.width === null) {
+    d.warning("email/image-width", "This Image has no width: Outlook shows it at the size of its file, however wide that is. Give it a width, or the file's width in src", `${path}.props.src`, id);
+  }
+}
+var HTML_CSS = [
+  { pattern: /!\s*(?!important\b)[iI][mM][pP][oO][rR][tT][aA][nN][tT]\b/, clients: ["gmail"], removes: "!important not written in lowercase: Gmail removes the whole style attribute, or the whole <style>, that holds it", fix: "write !important in lowercase" },
+  { pattern: /margin[a-z-]*\s*:([^;"'}]*\s)?-\d/i, clients: ["gmail", "outlook-com"], removes: "a negative margin: the client removes the whole margin declaration", fix: "move it with padding on what holds it instead" },
+  {
+    pattern: /(^|[\s;{"'])position\s*:\s*absolute\b/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "hey", "sfr", "laposte", "mail-ru", "gmx", "web-de"],
+    removes: "position: absolute: the client removes it",
+    fix: "lay it out without position (a Layer puts content over an image)",
+    feature: "css-position"
+  },
+  {
+    // Outlook.com removes every position (captures); the others not named keep relative.
+    pattern: /(^|[\s;{"'])position\s*:\s*relative\b/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "mail-ru", "gmx", "web-de"],
+    removes: "position: relative: the client removes it, and what it moves stays where it is",
+    fix: "move it with padding instead",
+    feature: "css-position",
+    use: "relative"
+  },
+  {
+    pattern: /var\(\s*--|(^|[\s;{"'])--[\w-]+\s*:/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "orange", "mail-ru", "fastmail", "gmx", "web-de"],
+    removes: "CSS variables: the client removes var() and their declarations",
+    fix: "write the values themselves",
+    feature: "css-variables"
+  },
+  {
+    pattern: /gradient\(/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail-app", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "a gradient: the client removes it",
+    fix: "give it a solid background color too, or use an image",
+    feature: "css-linear-gradient"
+  },
+  { pattern: /\b(oklch|oklab|lch|lab|hwb|color-mix|color)\(/i, clients: ["gmail", "outlook-com"], removes: "a newer color syntax: Outlook.com removes the declaration, and Gmail every inline style on its element", fix: "write the color as hex or rgb()" },
+  { pattern: /rgba?\(\s*[\d.]+%?\s+[\d.]/i, clients: ["gmail"], removes: "rgb() with spaces between its numbers: Gmail removes the whole style attribute, or the whole <style>", fix: "separate them with commas: rgb(8, 121, 161)" },
+  {
+    pattern: /<style[\s>]/i,
+    clients: ["gmail", "gmail-app", "gmail-app-other", "protonmail", "gmx", "web-de", "sfr", "laposte", "rainloop"],
+    removes: "a <style> in the email's body: the client removes it, and what it styles shows without it",
+    fix: "write the styles inline, on the elements they're for",
+    feature: "html-style"
+  },
+  { pattern: /box-shadow\s*:/i, clients: ["outlook", "gmail", "gmail-app", "yahoo", "aol", "orange", "gmx", "web-de"], removes: "box-shadow: the client removes it", fix: "draw it with a border, or leave it out", feature: "css-box-shadow" },
+  { pattern: /text-shadow\s*:/i, clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other"], removes: "text-shadow: the client removes it", fix: "leave it out, and keep the text readable without it", feature: "css-text-shadow" },
+  { pattern: /display\s*:\s*flex\b/i, clients: ["outlook", "gmail-app-other", "orange", "gmx", "web-de"], removes: "display: flex: the client lays it out as blocks", fix: "lay it out with a Row", feature: "css-display-flex" },
+  {
+    pattern: /display\s*:\s*inline-flex\b/i,
+    clients: ["outlook", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "display: inline-flex: the client lays it out without flex",
+    fix: "lay it out with a Row",
+    feature: "css-display-flex",
+    use: "inline"
+  },
+  { pattern: /display\s*:\s*(inline-)?grid\b/i, clients: ["outlook", "gmail-app-other", "orange", "gmx", "web-de"], removes: "display: grid: the client lays it out as blocks", fix: "lay it out with a Row or a Grid", feature: "css-display-grid" },
+  { pattern: /(^|[\s;{"'])opacity\s*:/i, clients: ["outlook", "aol", "orange", "mail-ru", "gmx", "web-de"], removes: "opacity: the client shows it opaque", fix: "use a lighter color instead", feature: "css-opacity" },
+  {
+    pattern: /object-fit\s*:/i,
+    clients: ["outlook", "gmail-app-other", "yahoo", "aol", "orange", "gmx", "web-de"],
+    removes: "object-fit: the client stretches the image to its box",
+    fix: "crop the image file to the size it's shown at",
+    feature: "css-object-fit"
+  },
+  {
+    pattern: /(^|[\s;{"'])aspect-ratio\s*:/i,
+    clients: ["outlook", "outlook-com", "outlook-mac", "outlook-app", "gmail", "gmail-app", "gmail-app-other", "yahoo", "aol", "samsung-email", "thunderbird", "fastmail", "gmx", "web-de", "orange"],
+    removes: "aspect-ratio: the client removes it",
+    fix: "give it a width and a height",
+    feature: "css-aspect-ratio"
+  }
+];
+var OUTLOOK_ONLY2 = /<!--\[if\s+(?:(?:gte?|lte?)\s+)?mso[^\]]*\]>[\s\S]*?<!\[endif\]-->/gi;
+function htmlBlock(node, d) {
+  if (typeof node.props.html !== "string") return;
+  const markup = node.props.html.replace(OUTLOOK_ONLY2, "");
+  for (const check of HTML_CSS) {
+    if (check.pattern.test(markup)) {
+      d.add("email/html-css", "info", `This Html block's markup may have ${check.removes}`, `${node.path}.props.html`, node.id, { clients: check.clients, fix: check.fix, see: check.feature && caniemail(check.feature) });
+    }
+  }
+}
+var isNode4 = (child) => typeof child !== "string";
+var OUTPUT = { pdf: "a PDF", image: "an image" };
+function pagedSupport(root, output) {
+  const d = new Diagnostics();
+  const where = OUTPUT[output];
+  const visit = (node) => {
+    if (!shownAnywhere(node)) return;
+    for (const condition of CONDITIONS) {
+      if (condition.paged && blockOf(node, condition)) d.warning(`${output}/unsupported`, condition.paged(node, where), `${node.path}.${condition.name}`, node.id);
+    }
+    if (node.type === "Video") {
+      const shows = output === "pdf" ? "its thumbnail (where its file is given) or its title, linked to it" : "its title";
+      d.warning(`${output}/unsupported`, `A Video isn't possible in ${where}: it has no player. It shows ${shows}`, node.path, node.id);
+    }
+    if (node.type === "Html") {
+      d.warning(`${output}/unsupported`, `Markup isn't possible in ${where}: it has no browser. The Html block shows its plain text`, node.path, node.id);
+    }
+    const past = wrapsPastIts(node);
+    if (past !== null) {
+      d.warning(
+        `${output}/unsupported`,
+        `What it holds looks about ${past}px wide on one line, wider than its ${node.contentWidth}px (an estimate: text isn't measured yet), and ${where} can't wrap it onto another line: it goes past the edge`,
+        node.path,
+        node.id
+      );
+    }
+    node.children.filter(isNode4).forEach(visit);
+  };
+  visit(root);
+  return d.list;
+}
+var CLEARLY = 1.25;
+var sides = (value) => {
+  const s = value ?? {};
+  return { top: s.top ?? 0, bottom: s.bottom ?? 0 };
+};
+var lineWidth = (line2) => line2 && typeof line2 === "object" && typeof line2.width === "number" ? line2.width : 0;
+var frame = (node) => {
+  const padding = sides(node.style.padding);
+  const border3 = node.style.border ?? {};
+  return padding.top + padding.bottom + lineWidth(border3.top) + lineWidth(border3.bottom) + lineWidth(node.style.borderTop) + lineWidth(node.style.borderBottom);
+};
+var SIDE_BY_SIDE = /* @__PURE__ */ new Set(["Row", "TableRow", "Layer"]);
+function heightOf(node, available) {
+  if (node.hidden?.desktop) return 0;
+  const set = toPx(node.style.height, null);
+  if (set !== null) return set;
+  const width = node.contentWidth ?? node.width ?? available;
+  if (node.children.some((child) => typeof child === "string" && child.trim())) {
+    const perLine = Math.max(1, Math.floor(width / (node.text.fontSize * CHARACTER)));
+    return Math.ceil(characters(node) / perLine) * node.text.lineHeightPx + frame(node);
+  }
+  if (node.type === "Image" && node.props.src !== void 0) {
+    const { width: w, height: h2 } = assetParts(node.props.src);
+    return (w && h2 ? (node.width ?? w) * h2 / w : 0) + frame(node);
+  }
+  const children = node.children.filter(isNode4).filter((child) => !child.hidden?.desktop);
+  if (SIDE_BY_SIDE.has(node.type)) return Math.max(0, ...children.map((child) => heightOf(child, width))) + frame(node);
+  const gap = toPx(node.style.gap, null) ?? 0;
+  return children.reduce((sum, child) => sum + heightOf(child, width), 0) + gap * Math.max(0, children.length - 1) + frame(node);
+}
+function overflow(root) {
+  const d = new Diagnostics();
+  const say = (code, height, room, path, what) => {
+    if (room <= 0 || height <= room * CLEARLY) return;
+    d.warning(code, `${what} looks about ${Math.round(height / room * 100)}% as tall as its room (an estimate: text isn't measured yet). What doesn't fit is cut off`, path);
+  };
+  if (root.type === "Document") {
+    const box2 = pageBox(root.props);
+    const { pages, header, footer } = documentPages(root);
+    const room = box2.contentHeight - (header ? heightOf(header, box2.contentWidth) : 0) - (footer ? heightOf(footer, box2.contentWidth) : 0);
+    pages.forEach(({ page, children }, i) => {
+      const holder = page ?? root;
+      const gap = toPx(holder.style.gap, null) ?? 0;
+      const height = children.reduce((sum, child) => sum + heightOf(child, box2.contentWidth), 0) + gap * Math.max(0, children.length - 1) + (page ? frame(page) : 0);
+      say("document/overflow", height, room, page?.path ?? children[0]?.path ?? "root", `Page ${i + 1}'s content (split it with a PageBreak, or into pages)`);
+    });
+  } else if (root.type === "Canvas") {
+    const room = Number(root.props.height) - frame(root);
+    say("canvas/overflow", heightOf(root, Number(root.props.width)) - frame(root), room, "root", "The Canvas's content");
+  }
+  return d.list;
+}
+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 OUTPUTS = {
+  Page: { target: "web", ready: true },
+  // Print HTML: a page writer's, each page a box of the paper's size.
+  Document: { target: "web", ready: true },
+  // A Canvas as HTML, to look at (@hyper-elements/react/image writes the image).
+  Canvas: { target: "web", ready: true },
+  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 done(null, null);
+  }
+  const expanded = expandDocument(checked.document, registry, output.target);
+  diagnostics.push(...expanded.diagnostics);
+  if (failed()) return done(null, output.target);
+  diagnostics.push(...checkTargetExpanded(expanded.document, output.target, registry, expanded.paths));
+  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, resolved.templatePath) : support(resolved.root, output.target);
+  if (root === "Document" || root === "Canvas") found.push(...overflow(resolved.root));
+  found.push(...pageBreakpoints(resolved.root));
+  diagnostics.push(...inTemplate(resolved, found));
+  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 validateTemplate(input, options = {}) {
+  const { diagnostics, resolved } = prepareTemplate(input, options);
+  const root = resolved?.root;
+  const paged = root?.type === "Document" ? pagedSupport(root, "pdf") : root?.type === "Canvas" ? pagedSupport(root, "image") : [];
+  const all = [...diagnostics, ...resolved ? inTemplate(resolved, paged) : paged];
+  return { valid: !all.some((d) => d.severity === "error"), diagnostics: all };
+}
+
+// src/utils/collect.ts
+var SHARED = Symbol.for("@hyper-elements/react/collecting");
+var frames = globalThis[SHARED] ?? (globalThis[SHARED] = []);
+function collecting() {
+  return frames[frames.length - 1] ?? void 0;
+}
+function within(frame2, run) {
+  frames.push(frame2);
+  try {
+    return run();
+  } finally {
+    frames.pop();
+  }
+}
+var RENDERS = Symbol.for("@hyper-elements/react/renders");
+function nonce() {
+  const shared = globalThis;
+  const clock = globalThis.performance;
+  return [shared[RENDERS] = (shared[RENDERS] ?? 0) + 1, (clock?.timeOrigin ?? 0) * 1e3, (clock?.now() ?? 0) * 1e6].map((n) => Math.floor(n).toString(36)).join("_");
+}
+var SHARED2 = Symbol.for("@hyper-elements/react/render-builds");
+var using = globalThis[SHARED2] ?? (globalThis[SHARED2] = []);
+var same2 = (a2, b) => a2.renderToString === b.renderToString;
+function dispatcher() {
+  const internals = React;
+  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;
+}
+var dispatchers = /* @__PURE__ */ new Map();
+function dispatcherOf(build) {
+  if (!dispatchers.has(build)) {
+    let seen = null;
+    try {
+      class Probe extends React.Component {
+        render() {
+          seen = dispatcher();
+          return null;
+        }
+      }
+      build.renderToStaticMarkup(React.createElement(Probe));
+    } catch {
+    }
+    dispatchers.set(build, seen);
+  }
+  return dispatchers.get(build);
+}
+var second;
+function secondBuild(outer) {
+  if (second === void 0) {
+    second = null;
+    const node = globalThis.process;
+    const requirers = [
+      // (`module`'s, read so that a bundler doesn't take it for a require of a path worked out when it runs.)
+      () => {
+        return void 0;
+      },
+      // From this module's URL (as a stack names it: webpack 4 can't parse the syntax for it), the app's script, then
+      // the folder Node started in; only where `react` is this React. Another React's isn't loaded (React 19's browser
+      // build keeps Node running).
+      ...[/file:\/\/\S+?(?=:\d+:\d+)/.exec(String(new Error().stack))?.[0], node?.argv?.[1], `${node?.cwd?.()}/`].map((from) => () => {
+        const required = node?.getBuiltinModule?.("module")?.createRequire(from);
+        return required?.("react")?.createElement === React.createElement ? required : void 0;
+      })
+    ];
+    const ids = ["react-dom/server.bun", ...Number.parseInt(React.version) >= 19 ? [] : ["react-dom/server.browser"], "react-dom/server.node"];
+    search: for (const id of ids) {
+      for (const requirer of requirers) {
+        try {
+          const build = requirer()?.(id);
+          if (build?.renderToStaticMarkup && !same2(build, defaultBuild) && ![null, outer].includes(dispatcherOf(build))) {
+            second = build;
+            break search;
+          }
+        } catch {
+        }
+      }
+    }
+  }
+  return second ?? void 0;
+}
+var buildOf = (outer) => outer === null ? void 0 : [defaultBuild, second].find((b) => !!b && dispatcherOf(b) === outer);
+function withBuild(render) {
+  const outer = dispatcher();
+  let build = current();
+  const theirs = using.length === 0 || collecting() !== void 0 ? buildOf(outer) : void 0;
+  const busy = [];
+  if (theirs) {
+    const free = (b) => !same2(b, theirs) && !using.some((u) => same2(u, b));
+    const other = free(defaultBuild) ? defaultBuild : secondBuild(outer);
+    if (other && free(other)) {
+      busy.push(theirs);
+      build = other;
+    } else build = theirs;
+  }
+  using.push(...busy, build);
+  try {
+    return render();
+  } catch (error) {
+    if (build !== theirs && !rendersHere(build)) throw Object.assign(new Error("[Unlayer] react-dom can't render with this React (React Server Components', as in Next.js's edge runtime): render emails in the Node.js runtime."), { cause: error });
+    throw error;
+  } finally {
+    using.length -= busy.length + 1;
+  }
+}
+function rendersHere(build) {
+  try {
+    build.renderToStaticMarkup(React.createElement(() => null));
+    return true;
+  } catch {
+    return false;
+  }
+}
+function current() {
+  return using[using.length - 1] ?? defaultBuild;
+}
+var renderToString = (element, options) => current().renderToString(element, options);
+
+// src/utils/render-scope.ts
+function withRenderScope(render) {
+  return withBuild(() => within(null, render));
+}
+
+// src/primitives/collect.tsx
+var SHARED3 = Symbol.for("@hyper-elements/react/primitives/collecting");
+var frames2 = globalThis[SHARED3] ?? (globalThis[SHARED3] = []);
+var MARK = "elements-node";
+var ENTITIES = { "&amp;": "&", "&lt;": "<", "&gt;": ">", "&quot;": '"', "&#x27;": "'" };
+var unescape = (text2) => text2.replace(/&amp;|&lt;|&gt;|&quot;|&#x27;/g, (entity) => ENTITIES[entity]);
+var NODE_KEYS2 = /* @__PURE__ */ new Set(["id", "style", "hidden"]);
+function toJsonNode({ type, props }, diagnostics) {
+  const node = { type, children: [] };
+  const semantic = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key === "compat") diagnostics.push({ code: "jsx/compat", severity: "warning", message: `A <${type}>'s compat isn't a prop of a template: it's left out`, path: "jsx" });
+    else if (NODE_KEYS2.has(key)) node[key] = value;
+    else semantic[key] = value;
+  }
+  if (Object.keys(semantic).length) node.props = semantic;
+  return node;
+}
+function read(html, collection, diagnostics) {
+  const pattern = new RegExp(`<${MARK} data-n="${collection.nonce}" data-i="(\\d+)" data-e="([oc])"></${MARK}>`, "g");
+  const top = [];
+  const open = [{ node: null, children: top }];
+  let last = 0;
+  const text2 = (between) => {
+    var _a;
+    if (!between) return;
+    const into = open[open.length - 1];
+    if (into.node?.type === "Html") {
+      const props = (_a = into.node).props ?? (_a.props = {});
+      props.html = `${typeof props.html === "string" ? props.html : ""}${between}`;
+      return;
+    }
+    if (/<[a-zA-Z!/]/.test(between)) {
+      const where = into.node ? `in a ${into.node.type}` : "around the root";
+      diagnostics.push({
+        code: "jsx/markup",
+        severity: "error",
+        message: `HTML ${where} isn't part of an Elements document: use the primitives (Text, Link, Image, \u2026) instead of ${JSON.stringify(between.slice(0, 60))}. Every component: @hyper-elements/react/GUIDE.md`,
+        path: "jsx"
+      });
+      return;
+    }
+    into.children.push(unescape(between));
+  };
+  for (const match of html.matchAll(pattern)) {
+    text2(html.slice(last, match.index));
+    last = match.index + match[0].length;
+    if (match[2] === "o") {
+      const node = toJsonNode(collection.recorded[Number(match[1])], diagnostics);
+      open[open.length - 1].children.push(node);
+      open.push({ node, children: node.children });
+    } else open.pop();
+  }
+  text2(html.slice(last));
+  return top;
+}
+var COMMENTS = /<!--[\s\S]*?-->/g;
+var ASYNC_ERROR = /^(?:Objects are not valid as a React child \(found: \[object Promise\]\)|A component suspended while responding to synchronous input|Minified React error #426\b|Minified React error #31\b.*%5Bobject%20Promise%5D)/;
+var ASYNC_MESSAGE = "A component is async or suspends (an async function, React.lazy, use()): render() doesn't wait for it yet. Load its data first and pass it in as props";
+var SUSPENDED = /does not support Suspense|did not finish this Suspense boundary/;
+function unfinished(html) {
+  const reasons = [];
+  let [out, at] = ["", 0];
+  for (let start = html.indexOf("<!--$!-->"); start >= 0; start = html.indexOf("<!--$!-->", at)) {
+    out += html.slice(at, start);
+    reasons.push(unescape(/^<!--\$!--><template[^>]*?\bdata-msg="([^"]*)"/.exec(html.slice(start))?.[1] ?? ""));
+    const marks = /<!--(\$[!?]?|\/\$)-->/g;
+    marks.lastIndex = start;
+    let depth = 0;
+    for (let mark = marks.exec(html); mark; mark = marks.exec(html)) {
+      depth += mark[1] === "/$" ? -1 : 1;
+      if (depth === 0) break;
+    }
+    at = depth === 0 ? marks.lastIndex : html.length;
+  }
+  return { html: out + html.slice(at), reasons };
+}
+function unfinishedDiagnostic(reason) {
+  const said = reason.replace(/^Switched to client rendering because the server rendering errored:\s*/, "");
+  const thrown = reason && !SUSPENDED.test(reason) && !ASYNC_ERROR.test(said) ? said : "";
+  if (thrown) return { code: "jsx/error", severity: "error", message: `A component inside <Suspense> threw: ${thrown}`, path: "jsx" };
+  const message = reason ? ASYNC_MESSAGE : `${ASYNC_MESSAGE}. (With React's production build, a component that threw inside <Suspense> looks the same: check it too.)`;
+  return { code: "jsx/async", severity: "error", message, path: "jsx" };
+}
+function collectNodes(element) {
+  const diagnostics = [];
+  const collection = { nonce: nonce(), recorded: [], components: /* @__PURE__ */ new Map(), clashes: /* @__PURE__ */ new Set() };
+  let html;
+  try {
+    html = withRenderScope(() => {
+      frames2.push(collection);
+      try {
+        return within(collection, () => renderToString(element));
+      } finally {
+        frames2.pop();
+      }
+    });
+  } catch (error) {
+    if (!ASYNC_ERROR.test(String(error?.message))) throw error;
+    diagnostics.push({ code: "jsx/async", severity: "error", message: ASYNC_MESSAGE, path: "jsx" });
+    return { nodes: [], components: [...collection.components.values()], diagnostics, aborted: true };
+  }
+  if (collection.async) diagnostics.push({ code: "jsx/async", severity: "error", message: ASYNC_MESSAGE, path: "jsx" });
+  const done = unfinished(html);
+  for (const reason of done.reasons) {
+    const diagnostic = unfinishedDiagnostic(reason);
+    if (!diagnostics.some((d) => d.code === diagnostic.code && d.message === diagnostic.message)) diagnostics.push(diagnostic);
+  }
+  const nodes = read(done.html.replace(COMMENTS, ""), collection, diagnostics).filter((child) => typeof child !== "string" || child.trim());
+  for (const type of collection.clashes) {
+    diagnostics.push({
+      code: "custom/duplicate",
+      severity: "error",
+      message: `Two different custom components are named ${type}. If component() ran more than once (inside a function or a component, or in a module loaded twice), call it once, at the top of a module; if they're different components, give each its own type`,
+      path: "jsx"
+    });
+  }
+  return { nodes, components: [...collection.components.values()], diagnostics, aborted: nodes.length === 0 && done.reasons.length > 0 };
+}
+function collectTemplate(element) {
+  const { nodes: top, components, diagnostics, aborted } = collectNodes(element);
+  if (top.length !== 1 || typeof top[0] === "string") {
+    if (!aborted) {
+      diagnostics.push({
+        code: "jsx/root",
+        severity: "error",
+        message: top.length ? "A template renders one root (an Email or a Page) and nothing beside it" : "The JSX rendered no Elements root (an Email or a Page)",
+        path: "jsx"
+      });
+    }
+    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, collected: top[0] };
+}
+
+// src/inspect/index.ts
+var INSPECT_VERSION = 1;
+var coreOptions = (options) => ({ components: (options.components ?? []).map((component) => component.definition), ...options.root ? { root: options.root } : {} });
+function describeComponents2(options = {}) {
+  const conditions = describeConditions(coreOptions(options));
+  return {
+    version: INSPECT_VERSION,
+    ...options.root ? { root: options.root } : {},
+    roots: options.root ? [options.root] : [...ROOT_NAMES],
+    components: describeComponents(coreOptions(options)),
+    conditions: options.root ? conditions.filter((condition) => condition.roots.includes(options.root)).map((condition) => ({ ...condition, roots: [options.root] })) : conditions
+  };
+}
+function describeComponent2(type, options = {}) {
+  const described = describeComponent(type, coreOptions(options));
+  return described && { version: INSPECT_VERSION, ...described };
+}
+function inspect(element) {
+  if (!React.isValidElement(element)) {
+    throw new TypeError(`[Elements] inspect() takes a template as JSX (<Email>\u2026</Email>, <Page>\u2026</Page>), not ${element === null ? "null" : typeof element}`);
+  }
+  const { document, diagnostics: read2, components, collected } = collectTemplate(element);
+  const failed = read2.some((d) => d.severity === "error");
+  const diagnostics = [...read2, ...document && !failed ? validateTemplate(document, { components }).diagnostics : []];
+  const registry = new Registry(components);
+  const rootType = document?.root.type;
+  const root = rootType && ROOT_NAMES.includes(rootType) ? rootType : null;
+  const nodes = [];
+  const visit = (node, path) => {
+    const definition = registry.get(node.type);
+    const roots = definition ? componentRoots(definition, registry) : [];
+    nodes.push({
+      path,
+      type: node.type,
+      ...typeof node.id === "string" && node.id ? { id: node.id } : {},
+      roots,
+      allowed: !!root && roots.includes(root),
+      given: given(node),
+      problems: diagnostics.filter((diagnostic) => on(diagnostic.path, path))
+    });
+    (Array.isArray(node.children) ? node.children : []).forEach((child, index) => {
+      if (child && typeof child === "object") visit(child, `${path}.children[${index}]`);
+    });
+  };
+  if (document && collected) visit(collected, "root");
+  return { version: INSPECT_VERSION, root, valid: !diagnostics.some((d) => d.severity === "error"), nodes, diagnostics };
+}
+function given(node) {
+  const keys = (prefix, values) => values && typeof values === "object" && !Array.isArray(values) ? Object.keys(values).map((key) => `${prefix}.${key}`) : [];
+  const style = node.style && typeof node.style === "object" && !Array.isArray(node.style) ? node.style : {};
+  const lifts = !CUSTOM_TYPE.test(node.type);
+  const own = Object.keys(style).filter((key) => !(lifts && CONDITION_NAMES.has(key)));
+  const condition = (name) => [...keys(name, node[name]), ...lifts ? keys(name, style[name]) : []];
+  return [...keys("props", node.props), ...own.map((key) => `style.${key}`), ...condition("mobile"), ...condition("hover"), ...keys("hidden", node.hidden)];
+}
+function on(diagnostic, node) {
+  if (diagnostic === node) return true;
+  if (!diagnostic.startsWith(node)) return false;
+  const rest = diagnostic.slice(node.length);
+  return (rest.startsWith(".") || rest.startsWith("(")) && !rest.startsWith(".children[");
+}
+
+export { INSPECT_VERSION, describeComponent2 as describeComponent, describeComponents2 as describeComponents, inspect };
+//# sourceMappingURL=inspect.js.map
+//# sourceMappingURL=inspect.js.map