@hyper-elements/react 0.0.1 → 0.3.1

package/dist/pdf.js

@@ -0,0 +1,1254 @@
+import { createHash } from 'crypto';
+import { View, Page, renderToBuffer, Font, Path, Polygon, Line, Ellipse, Circle, Rect, Svg, Link, Image, Text, Document } from '@react-pdf/renderer';
+import { createElement } from 'react';
+import { prepare, ElementsError } from '@hyper-elements/react';
+
+// ../core/dist/pdf.js
+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 length2 = readLength(input);
+  if (!length2 || length2.unit !== "px") return fail(`${what} must be a number of px or a px string ("8px"), not ${show(input)}`);
+  if (length2.value < min) return fail(`${what} can't be less than ${min}, not ${show(input)}`);
+  return ok(length2.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") ? "?" : ""}$` }
+      ]
+    })
+  });
+}
+var SIDES = ["top", "right", "bottom", "left"];
+function fourSides(values) {
+  const [a, b = a, c = a, d = b] = values;
+  return [a, 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 read = (values) => {
+    if (values.length < 1 || values.length > 4) return fail(`expected ${accepts}`);
+    const out = [];
+    for (const value of values) {
+      const side = px(value, 0, "each side");
+      if (!side.ok) return side;
+      out.push(side.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 read([input]);
+      if (typeof input === "string") return read(input.trim().split(/\s+/));
+      if (Array.isArray(input)) return read(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 side of SIDES) {
+          if (input[side] === void 0) continue;
+          const value = px(input[side], 0, side);
+          if (!value.ok) return value;
+          out[side] = value.value;
+        }
+        return ok(out);
+      }
+      return fail(`expected ${accepts}, not ${show(input)}`);
+    },
+    jsonSchema: () => {
+      const side = { anyOf: [{ type: "number", minimum: 0 }, { type: "string", pattern: `^${NUMBER}(px)?$` }] };
+      return {
+        anyOf: [
+          side.anyOf[0],
+          { type: "string" },
+          { type: "array", items: side, minItems: 1, maxItems: 4 },
+          { type: "object", properties: Object.fromEntries(SIDES.map((s) => [s, side])), 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 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 side = borderSide(input);
+        return side.ok ? ok({ top: side.value, right: side.value, bottom: side.value, left: side.value }) : side;
+      }
+      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 side = borderSide(value);
+        if (!side.ok) return fail(`${key}: ${side.message}`);
+        out[key] = side.value;
+      }
+      return ok(out);
+    },
+    jsonSchema: () => {
+      const side = {
+        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: [...side.anyOf, { type: "object", properties: Object.fromEntries(SIDES.map((s) => [s, side])), 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 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 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 linkParts(value) {
+  return typeof value === "string" ? { href: value } : value;
+}
+function assetParts(value) {
+  return typeof value === "string" ? { src: value } : value;
+}
+function defineComponent(definition) {
+  return definition;
+}
+function prop(kind2, options) {
+  return { kind: kind2, ...options };
+}
+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 }
+  }
+};
+function pick(group, ...keys) {
+  return Object.fromEntries(keys.map((key) => [key, group[key]]));
+}
+var WRITTEN = { 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: WRITTEN, label: "Title", description: "The document's title (shown in a browser tab, and by some email clients)." }),
+  lang: prop(text({ maxLength: 35 }), {
+    support: {
+      ...WRITTEN,
+      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: {
+      ...WRITTEN,
+      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 WRITTEN2 = { 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 size = props.size ?? "A4";
+  const [w, h] = SIZES[size] ?? SIZES.A4;
+  const landscape = props.orientation === "landscape";
+  const width = Math.round((landscape ? h : w) * PX_PER_INCH * 100) / 100;
+  const height = Math.round((landscape ? w : h) * 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: `${size} ${landscape ? "landscape" : "portrait"}`
+  };
+}
+({
+  ...inheritedTextStyle,
+  ...pick(layoutStyle, "gap", "alignItems")
+});
+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: WRITTEN2, label: "Page size", default: "A4" }),
+    orientation: prop(enumOf(["portrait", "landscape"]), { support: WRITTEN2, label: "Orientation", default: "portrait" }),
+    margin: prop(insets(), {
+      support: WRITTEN2,
+      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
+    ]
+  }
+});
+({ ...inheritedTextStyle, ...pick(boxStyle, "padding", "backgroundColor", "border"), ...pick(layoutStyle, "gap", "alignItems") });
+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: WRITTEN2, 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 LAYOUT_VERSION = 1;
+var DROPPED = /<(style|script|head|title|template)\b[^>]*>[\s\S]*?<\/\1\s*>|<!--[\s\S]*?-->/gi;
+var LINE = /<\s*(br|\/?(p|div|h[1-6]|li|ul|ol|tr|table|blockquote|section|article|header|footer|pre))\b[^>]*>/gi;
+var CELL = /<\s*\/\s*(td|th)\s*>/gi;
+var TAG = /<[^>]*>/g;
+var ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " ", copy: "\xA9", reg: "\xAE", trade: "\u2122", mdash: "\u2014", ndash: "\u2013", hellip: "\u2026", rsquo: "\u2019", lsquo: "\u2018", rdquo: "\u201D", ldquo: "\u201C", bull: "\u2022", middot: "\xB7", euro: "\u20AC", pound: "\xA3" };
+var decode = (text2) => text2.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (match, name) => {
+  if (name[0] !== "#") return Object.prototype.hasOwnProperty.call(ENTITIES, name.toLowerCase()) ? ENTITIES[name.toLowerCase()] : match;
+  const code = name[1] === "x" || name[1] === "X" ? parseInt(name.slice(2), 16) : parseInt(name.slice(1), 10);
+  return code > 0 && code <= 1114111 ? String.fromCodePoint(code) : match;
+});
+function markupText(html) {
+  const text2 = decode(html.replace(DROPPED, "").replace(LINE, "\n").replace(CELL, " ").replace(TAG, ""));
+  return text2.split("\n").map((line) => line.replace(/[ \t\r\f\v\u00a0]+/g, " ").trim()).filter(Boolean).join("\n");
+}
+function htmlText(node) {
+  return (typeof node.props.text === "string" ? node.props.text : markupText(String(node.props.html ?? ""))).trim();
+}
+var pt = (px2) => Math.round(px2 * 0.75 * 1e3) / 1e3;
+var STANDARD = [
+  [/^(courier|courier new|consolas|menlo|monaco|monospace|ui-monospace|sf mono)$/i, "Courier"],
+  [/^(times|times new roman|georgia|garamond|cambria|serif|ui-serif|palatino)$/i, "Times-Roman"]
+];
+function pdfFamily(stack, given) {
+  const families = fontStack(stack);
+  const known = families.find((family) => given.has(family.toLowerCase()));
+  if (known) return known.toLowerCase();
+  for (const family of families) for (const [pattern, standard] of STANDARD) if (pattern.test(family)) return standard;
+  return "Helvetica";
+}
+function textStyle2(node, given) {
+  const text2 = node.text;
+  return {
+    color: text2.color,
+    fontFamily: pdfFamily(String(text2.fontFamily), given),
+    fontSize: pt(text2.fontSize),
+    fontWeight: text2.fontWeight,
+    fontStyle: text2.fontStyle,
+    // A multiple of the font size.
+    lineHeight: text2.fontSize ? Math.round(text2.lineHeightPx / text2.fontSize * 1e3) / 1e3 : void 0,
+    letterSpacing: text2.letterSpacing ? pt(text2.letterSpacing) : void 0,
+    textAlign: text2.textAlign,
+    textTransform: text2.textTransform === "none" ? void 0 : text2.textTransform
+  };
+}
+function runStyle(node, given) {
+  const style = node.style;
+  const out = { ...textStyle2(node, given), textAlign: void 0 };
+  if (style.textDecoration !== void 0) out.textDecoration = String(style.textDecoration);
+  if (style.backgroundColor !== void 0) out.backgroundColor = String(style.backgroundColor);
+  if (style.verticalAlign === "super" || style.verticalAlign === "sub") out.verticalAlign = style.verticalAlign;
+  return out;
+}
+var sides = (value) => value && typeof value === "object" ? value : void 0;
+function boxStyle2(node) {
+  const style = node.style;
+  const out = {};
+  const padding = sides(style.padding);
+  if (padding) Object.assign(out, { paddingTop: pt(padding.top), paddingRight: pt(padding.right), paddingBottom: pt(padding.bottom), paddingLeft: pt(padding.left) });
+  if (typeof style.backgroundColor === "string") out.backgroundColor = style.backgroundColor;
+  Object.assign(out, borderStyle(style.border));
+  Object.assign(out, radiusStyle(style.borderRadius));
+  if (typeof style.height === "number") out.height = pt(style.height);
+  if (style.overflow === "hidden") out.overflow = "hidden";
+  return out;
+}
+function borderStyle(border2) {
+  const out = {};
+  if (!border2) return out;
+  for (const side of ["top", "right", "bottom", "left"]) {
+    const line = border2[side];
+    if (!line) continue;
+    const name = side[0].toUpperCase() + side.slice(1);
+    out[`border${name}Width`] = line.style === "none" ? 0 : pt(line.width);
+    out[`border${name}Style`] = line.style === "none" ? "solid" : line.style;
+    out[`border${name}Color`] = line.color;
+  }
+  return out;
+}
+function radiusStyle(radius2) {
+  if (radius2 === void 0) return {};
+  if (typeof radius2 === "number") return { borderRadius: pt(radius2) };
+  return {
+    borderTopLeftRadius: pt(radius2.topLeft),
+    borderTopRightRadius: pt(radius2.topRight),
+    borderBottomRightRadius: pt(radius2.bottomRight),
+    borderBottomLeftRadius: pt(radius2.bottomLeft)
+  };
+}
+var FLEX = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", "space-between": "space-between" };
+var flex2 = (value) => typeof value === "string" ? FLEX[value] : void 0;
+function alignSelf(child, stack) {
+  const sized = child.style.width !== void 0 || child.style.maxWidth !== void 0;
+  if (child.type === "Divider" || child.definition.sizing !== "shrink" && !sized) return void 0;
+  const align = child.style.alignSelf ?? stack.style.alignItems;
+  if (align === "stretch") return void 0;
+  if (align) return flex2(align);
+  return { left: "flex-start", justify: "flex-start", center: "center", right: "flex-end" }[stack.text.textAlign];
+}
+var registered = /* @__PURE__ */ new Set();
+var base64 = (bytes) => Buffer.from(bytes).toString("base64");
+function register(fonts) {
+  const byFamily = /* @__PURE__ */ new Map();
+  for (const font of fonts) byFamily.set(font.family, [...byFamily.get(font.family) ?? [], { data: base64(font.data), weight: font.weight, style: font.style }]);
+  const names = /* @__PURE__ */ new Map();
+  for (const [family, files] of byFamily) {
+    const hash = createHash("sha256");
+    for (const file of files) hash.update(`${file.weight}|${file.style}|${file.data}
+`);
+    const name = `elements-${hash.digest("hex").slice(0, 32)}`;
+    if (!registered.has(name)) {
+      for (const file of files) Font.register({ family: name, src: `data:font/ttf;base64,${file.data}`, fontWeight: file.weight, fontStyle: file.style });
+      registered.add(name);
+    }
+    names.set(family, { name, styles: new Set(files.map((file) => file.style)) });
+  }
+  return names;
+}
+var SHAPES = { rect: Rect, circle: Circle, ellipse: Ellipse, line: Line, polygon: Polygon, path: Path };
+var el = (type, props, ...children) => createElement(type, props, ...children);
+var reactPdf = async (document) => {
+  const names = register(document.fonts);
+  const styled = (style) => {
+    const family = style.fontFamily === void 0 ? void 0 : names.get(String(style.fontFamily));
+    if (!family) return style;
+    const fontStyle = family.styles.has(String(style.fontStyle ?? "normal")) ? style.fontStyle : [...family.styles][0];
+    return { ...style, fontFamily: family.name, fontStyle };
+  };
+  const run = (item, key) => {
+    if (typeof item === "string") return item;
+    switch (item.kind) {
+      case "span":
+        return el(Text, { key, style: styled(item.style) }, item.runs.map(run));
+      case "link":
+        return el(Link, { key, src: item.href, style: styled(item.style) }, item.runs.map(run));
+      case "image":
+        return el(Image, { key, src: item.src, style: item.style });
+    }
+  };
+  const block = (item, key) => {
+    switch (item.kind) {
+      case "box":
+        return el(View, { key, style: styled(item.style) }, item.children.map(block));
+      case "text":
+        return el(Text, { key, style: styled(item.style) }, item.runs.map(run));
+      case "image":
+        return el(Image, { key, src: item.src, style: item.style });
+      case "link":
+        return el(Link, { key, src: item.href, style: styled(item.style) }, item.children.map(block));
+      case "drawing":
+        return el(
+          Svg,
+          { key, width: item.width, height: item.height, viewBox: item.viewBox },
+          item.shapes.map((shape, i) => el(SHAPES[shape.kind], { key: i, ...shape.attributes }))
+        );
+    }
+  };
+  const pages = document.pages.map(
+    (page, index) => el(
+      Page,
+      {
+        key: index,
+        size: [page.width, page.height],
+        style: { paddingTop: page.margin.top, paddingRight: page.margin.right, paddingBottom: page.margin.bottom, paddingLeft: page.margin.left, backgroundColor: page.background, flexDirection: "column" }
+      },
+      // The page's box inside its margins, which nothing leaves: what doesn't fit is cut, not moved on.
+      el(
+        View,
+        { wrap: false, style: { height: page.contentHeight, overflow: "hidden", flexDirection: "column" } },
+        page.header && block(page.header),
+        // The content laid out at its own height and cut where the page ends: react-pdf squeezes text into a box's
+        // height (lines drawn over each other), not into one placed on its own.
+        el(
+          View,
+          { style: { flexGrow: 1, flexShrink: 1, overflow: "hidden", position: "relative" } },
+          el(View, { style: { position: "absolute", top: 0, left: 0, right: 0, flexDirection: "column", ...page.gap !== void 0 ? { gap: page.gap } : {} } }, page.content.map(block))
+        ),
+        page.footer && block(page.footer)
+      )
+    )
+  );
+  const element = el(Document, { title: document.title, language: document.lang, creationDate: document.date, modificationDate: document.date, producer: "Hyper Elements", creator: "Hyper Elements" }, pages);
+  return new Uint8Array(await renderToBuffer(element));
+};
+var thumbnailOf = (video) => video.props.thumbnail ? assetParts(video.props.thumbnail).src : videoParts(String(video.props.src))?.thumbnail;
+var shown = (node) => !node.hidden?.desktop;
+var nodes = (node) => node.children.filter((child) => typeof child !== "string" && shown(child));
+var present = (items) => items.filter((item) => item !== void 0);
+function writeDocument(root, context) {
+  const box = pageBox(root.props);
+  const { pages, header, footer } = documentPages(root);
+  const total = pages.length;
+  const write = new Writer(context);
+  return {
+    title: root.props.title,
+    lang: root.props.lang,
+    date: context.date,
+    fonts: context.fonts,
+    pages: pages.map(({ page, children }, index) => {
+      write.page = { number: index + 1, total };
+      const content = page ?? root;
+      const margin = { top: pt(box.margin.top), right: pt(box.margin.right), bottom: pt(box.margin.bottom), left: pt(box.margin.left) };
+      return {
+        width: pt(box.width),
+        height: pt(box.height),
+        margin,
+        // Paper is white: a page with no background of its own paints one, as a viewer may show a page left
+        // transparent as black (in dark mode), under text that's dark.
+        background: page?.style.backgroundColor ?? root.style.backgroundColor ?? "#ffffff",
+        // The room inside the margins, as react-pdf works it out (the paper's height less them, in points), less a
+        // thousandth: react-pdf warns that a box taller than the room can't wrap, and Yoga lays it out in 32-bit
+        // floats (A4's 769.89 points is 769.8900146). The page box's contentHeight is a whole px (1027 for 1026.52).
+        contentHeight: Math.floor((pt(box.height) - margin.bottom - margin.top - 1e-3) * 1e3) / 1e3,
+        header: header && write.block(header, root),
+        content: present(children.filter(shown).map((child) => write.block(child, content))),
+        gap: typeof content.style.gap === "number" ? pt(content.style.gap) : void 0,
+        footer: footer && write.block(footer, root)
+      };
+    })
+  };
+}
+var gap = (node) => typeof node.style.gap === "number" ? { gap: pt(node.style.gap) } : {};
+var Writer = class {
+  constructor(context) {
+    this.context = context;
+    this.page = { number: 1, total: 1 };
+  }
+  /** A block in a stack (or a Row, `row`), at the width the resolver gave it. */
+  block(node, parent, row = false) {
+    const placed = row ? { width: node.width !== null ? pt(node.width) : void 0, flexShrink: 0, flexGrow: 0, alignSelf: node.definition.sizing === "shrink" ? flex2(parent.style.alignItems ?? "start") : void 0 } : { alignSelf: alignSelf(node, parent), width: node.width !== null && (node.style.width !== void 0 || node.style.maxWidth !== void 0 || node.definition.sizing === "shrink") ? pt(node.width) : void 0 };
+    const families = this.context.families;
+    switch (node.type) {
+      case "Text":
+      case "Heading":
+        return { kind: "text", style: { ...textStyle2(node, families), ...boxStyle2(node), ...placed }, runs: this.runs(node) };
+      case "Button":
+        return {
+          kind: "link",
+          href: linkParts(node.props.href).href,
+          style: { ...placed, textDecoration: "none" },
+          children: [{ kind: "box", style: { ...boxStyle2(node), width: node.width !== null ? pt(node.width) : void 0 }, children: [{ kind: "text", style: { ...textStyle2(node, families), textAlign: "center" }, runs: this.runs(node) }] }]
+        };
+      case "Image":
+        return this.image(node, placed);
+      case "Link": {
+        const words = node.children.some((child) => typeof child === "string" || child.definition.categories.includes("inline"));
+        return {
+          kind: "link",
+          href: linkParts(node.props.href).href,
+          style: { ...placed, textDecoration: "none" },
+          children: words ? [{ kind: "text", style: textStyle2(node, families), runs: this.runs(node) }] : present(nodes(node).map((child) => this.block(child, node)))
+        };
+      }
+      case "Divider": {
+        const line = node.style.borderTop;
+        return { kind: "box", style: { ...boxStyle2(node), ...placed, width: node.width !== null ? pt(node.width) : void 0 }, children: [{ kind: "box", style: borderStyle(line ? { top: line } : void 0), children: [] }] };
+      }
+      case "Row":
+        return {
+          kind: "box",
+          style: { ...boxStyle2(node), ...placed, flexDirection: "row", ...gap(node), alignItems: flex2(node.style.alignItems ?? "start"), justifyContent: flex2(node.style.justifyContent) },
+          children: present(nodes(node).map((child) => this.block(child, node, true)))
+        };
+      case "Layer":
+        return this.layer(node, placed);
+      case "List":
+        return this.list(node, placed);
+      case "Table":
+        return this.table(node, placed);
+      case "Video":
+        return this.video(node, placed);
+      case "Html":
+        return { kind: "text", style: { ...textStyle2(node, families), ...placed }, runs: [htmlText(node)] };
+      case "Svg":
+        return this.svg(node, placed);
+      case "Section":
+      case "Column":
+      case "PageHeader":
+      case "PageFooter":
+        return { kind: "box", style: { ...boxStyle2(node), ...placed, flexDirection: "column", ...gap(node), justifyContent: flex2(node.style.justifyContent) }, children: present(nodes(node).map((child) => this.block(child, node))) };
+      default:
+        throw new Error(`[Elements] The PDF writer draws no ${node.type}`);
+    }
+  }
+  /** A block of text's children: its words and runs (Span, Link, a line break, a merge tag, a page number). */
+  runs(node) {
+    return present(
+      node.children.map((child) => {
+        if (typeof child === "string") return child;
+        if (!shown(child)) return void 0;
+        switch (child.type) {
+          case "LineBreak":
+            return "\n";
+          case "MergeTag":
+            return `{{${child.props.name}}}`;
+          case "PageNumber":
+            return String(child.props.total ? this.page.total : this.page.number);
+          case "Link":
+            return { kind: "link", href: linkParts(child.props.href).href, style: runStyle(child, this.context.families), runs: this.runs(child) };
+          case "Image": {
+            const image = this.image(child, {});
+            return image.kind === "image" ? image : String(child.props.alt ?? "");
+          }
+          default:
+            return { kind: "span", style: runStyle(child, this.context.families), runs: this.runs(child) };
+        }
+      })
+    );
+  }
+  /** An Image; one the PDF can't draw (an SVG), its alt text in a box of its size, as a browser shows one it can't. */
+  image(node, placed, cover) {
+    const { src, width, height } = assetParts(node.props.src);
+    const drawn = node.width ?? width;
+    const style = { ...placed, ...boxStyle2(node), width: drawn !== void 0 && drawn !== null ? pt(drawn) : void 0 };
+    if (cover !== void 0) Object.assign(style, { width: "100%", height: pt(cover), objectFit: "cover" });
+    else if (typeof node.style.height !== "number" && drawn && width && height) style.height = pt(drawn * height / width);
+    const source = this.context.image(src);
+    if (source) return { kind: "image", src: source, style };
+    const alt = String(node.props.alt ?? "");
+    return { kind: "box", style: { ...style, objectFit: void 0, overflow: "hidden" }, children: alt ? [{ kind: "text", style: textStyle2(node, this.context.families), runs: [alt] }] : [] };
+  }
+  /** A Layer: its first child in place, the others over it, each in the Layer's whole box, placed by its alignment. */
+  layer(node, placed) {
+    const [base, ...over] = nodes(node);
+    const height = typeof node.style.height === "number" ? node.style.height : void 0;
+    const under = base && (base.type === "Image" && height !== void 0 ? this.image(base, {}, height) : this.block(base, node));
+    return {
+      kind: "box",
+      style: { ...boxStyle2(node), ...placed, position: "relative", overflow: node.style.borderRadius !== void 0 ? "hidden" : void 0 },
+      children: present([
+        under,
+        ...over.map((child) => ({
+          kind: "box",
+          style: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, flexDirection: "column", justifyContent: flex2(node.style.alignItems ?? "start"), alignItems: flex2(node.style.justifyItems ?? "stretch") },
+          children: present([this.block(child, node)])
+        }))
+      ])
+    };
+  }
+  list(node, placed) {
+    const indent = typeof node.style.indent === "number" ? node.style.indent : 24;
+    const start = Number(node.props.start ?? 1);
+    return {
+      kind: "box",
+      style: { ...boxStyle2(node), ...placed, flexDirection: "column", ...gap(node) },
+      children: nodes(node).map((item, i) => ({
+        kind: "box",
+        style: { flexDirection: "row" },
+        children: [
+          { kind: "text", style: { ...textStyle2(item, this.context.families), width: pt(indent), textAlign: "left" }, runs: [node.props.type === "number" ? `${start + i}.` : "\u2022"] },
+          { kind: "box", style: { flexGrow: 1, flexShrink: 1, flexDirection: "column" }, children: this.itemParts(item) }
+        ]
+      }))
+    };
+  }
+  /** A list item's text and the Lists in it, in their order: each run of text a paragraph, each List under it. */
+  itemParts(item) {
+    const parts = [];
+    let text2 = [];
+    const flush = () => {
+      if (text2.some((child) => typeof child !== "string" || child.trim() !== "")) parts.push({ kind: "text", style: textStyle2(item, this.context.families), runs: this.runs({ ...item, children: text2 }) });
+      text2 = [];
+    };
+    for (const child of item.children) {
+      if (typeof child !== "string" && child.type === "List") {
+        flush();
+        if (shown(child)) parts.push(this.list(child, {}));
+      } else text2.push(child);
+    }
+    flush();
+    return parts;
+  }
+  table(node, placed) {
+    const columns = node.columns ?? null;
+    const cellPadding = node.style.cellPadding;
+    const rowBorder = node.style.rowBorder;
+    const rows = nodes(node);
+    return {
+      kind: "box",
+      style: { ...boxStyle2(node), ...placed, flexDirection: "column" },
+      children: rows.map((row, r) => {
+        let column = 0;
+        return {
+          kind: "box",
+          style: { flexDirection: "row", ...boxStyle2(row), ...r < rows.length - 1 && rowBorder ? borderStyle({ bottom: rowBorder }) : {} },
+          children: nodes(row).map((cell) => {
+            const span = Math.max(1, Number(cell.props.colSpan ?? 1));
+            const width = columns ? columns.slice(column, column + span).reduce((sum, w) => sum + w, 0) : void 0;
+            column += span;
+            const padding = cellPadding ? { paddingTop: pt(cellPadding.top), paddingRight: pt(cellPadding.right), paddingBottom: pt(cellPadding.bottom), paddingLeft: pt(cellPadding.left) } : {};
+            return {
+              kind: "box",
+              style: { ...padding, ...boxStyle2(cell), width: width !== void 0 ? pt(width) : void 0, flexGrow: width === void 0 ? 1 : 0 },
+              children: [{ kind: "text", style: { ...textStyle2(cell, this.context.families), ...row.props.header ? { fontWeight: 700 } : {} }, runs: this.runs(cell) }]
+            };
+          })
+        };
+      })
+    };
+  }
+  /** An Svg: its box in points, its shapes in its viewBox's units. */
+  svg(node, placed) {
+    const { width, height, viewBox } = node.props;
+    const paint = (value) => value === "transparent" ? "none" : value;
+    const KINDS = { Rect: "rect", Circle: "circle", Ellipse: "ellipse", Line: "line", Polygon: "polygon", Path: "path" };
+    const shapes = nodes(node).filter((shape) => KINDS[shape.type]).map((shape) => ({
+      kind: KINDS[shape.type],
+      attributes: { ...shape.props, fill: paint(shape.style.fill), stroke: paint(shape.style.stroke), strokeWidth: shape.style.strokeWidth, opacity: shape.style.opacity }
+    }));
+    return {
+      kind: "box",
+      style: { ...boxStyle2(node), ...placed, width: void 0 },
+      children: [{ kind: "drawing", width: pt(width), height: pt(height), viewBox: viewBox ?? `0 0 ${width} ${height}`, style: {}, shapes }]
+    };
+  }
+  /** A Video: its thumbnail linked to it where its bytes are given, else a link with its title. */
+  video(node, placed) {
+    const src = String(node.props.src);
+    const thumbnail = thumbnailOf(node);
+    const image = thumbnail ? this.context.image(thumbnail) : void 0;
+    return {
+      kind: "link",
+      href: src,
+      style: { ...placed, textDecoration: "none" },
+      children: [image ? { kind: "image", src: image, style: { width: node.width !== null ? pt(node.width) : void 0 } } : { kind: "text", style: textStyle2(node, this.context.families), runs: [String(node.props.title ?? "Video")] }]
+    };
+  }
+};
+var FIXED_DATE = new Date(Date.UTC(2026, 0, 1));
+async function renderPdf(element, options = {}) {
+  const { root, diagnostics, layout } = prepare(element);
+  readable(layout, "pdf");
+  if (!root) throw new ElementsError(diagnostics);
+  if (root.type !== "Document") {
+    throw new ElementsError([...diagnostics, { code: "pdf/root", severity: "error", message: `PDF output is a Document's: this template is a ${root.type}`, path: "root" }]);
+  }
+  const found = [];
+  const fonts = fontFiles(root, options.fonts ?? [], found);
+  const images = imageSources(root, options.images ?? {}, found);
+  if (found.some((d) => d.severity === "error")) throw new ElementsError([...diagnostics, ...found]);
+  found.push(...missingFaces(root, fonts, options.fonts ?? []), ...beyondStandard(root, new Set(fonts.map((font) => font.family))));
+  const pages = writeDocument(root, { families: new Set(fonts.map((font) => font.family)), fonts, image: (src) => images.get(src), date: options.date ?? FIXED_DATE });
+  return { pdf: await reactPdf(pages), diagnostics: [...diagnostics, ...found] };
+}
+function readable(layout, output) {
+  if (layout === LAYOUT_VERSION) return;
+  throw new ElementsError([
+    {
+      code: `${output}/version`,
+      severity: "error",
+      message: `@hyper-elements/react/${output} reads layout version ${LAYOUT_VERSION}; the main entry writes ${typeof layout === "number" ? layout : "none"}: update @hyper-elements/react`,
+      path: "root"
+    }
+  ]);
+}
+function base642(bytes) {
+  return Buffer.from(bytes instanceof ArrayBuffer ? new Uint8Array(bytes) : bytes).toString("base64");
+}
+var woff2 = (bytes) => String.fromCharCode(...bytes.subarray(0, 4)) === "wOF2";
+function fontFiles(root, given, found) {
+  const files = given.map((font) => ({ font, data: font.src instanceof ArrayBuffer ? new Uint8Array(font.src) : font.src }));
+  const drawn = files.filter(({ data }) => !woff2(data));
+  const families = new Set(drawn.map(({ font }) => font.family.toLowerCase()));
+  for (const { font, data } of files) {
+    if (!woff2(data)) continue;
+    const meanwhile = families.has(font.family.toLowerCase()) ? `${font.family}'s other files` : "a standard PDF font";
+    found.push({ code: "pdf/font", severity: "warning", message: `${font.family}'s file is WOFF2: a PDF draws TTF, OTF and WOFF files. Its text is drawn in ${meanwhile} meanwhile`, path: "root.props.fonts" });
+  }
+  const named = new Set(given.map((font) => font.family.toLowerCase()));
+  for (const face of root.props.fonts ?? []) {
+    if (named.has(face.family.toLowerCase())) continue;
+    found.push({
+      code: "pdf/font",
+      severity: "warning",
+      message: `PDF output loads no fonts: give ${face.family}'s file in renderPdf's fonts option. Its text is drawn in a standard PDF font meanwhile`,
+      path: "root.props.fonts"
+    });
+  }
+  return drawn.map(({ font, data }) => ({ family: font.family.toLowerCase(), data, weight: font.weight ?? 400, style: font.style ?? "normal" }));
+}
+function missingFaces(root, fonts, given) {
+  const out = /* @__PURE__ */ new Map();
+  const families = new Set(fonts.map((font) => font.family));
+  const visit = (node) => {
+    if (node.hidden?.desktop) return;
+    const family = pdfFamily(String(node.text.fontFamily), families);
+    if (families.has(family) && node.children.some((child) => typeof child === "string" && child.trim())) {
+      const faces = fonts.filter((font) => font.family === family);
+      const { fontWeight: weight, fontStyle: style } = node.text;
+      const key = `${family}|${weight}|${style}`;
+      if (!faces.some((face) => face.weight === weight && face.style === style) && !out.has(key)) {
+        const name = given.find((font) => font.family.toLowerCase() === family)?.family ?? family;
+        const has = faces.map((face) => `${face.weight}${face.style === "italic" ? " italic" : ""}`).join(", ");
+        out.set(key, {
+          code: "pdf/font-weight",
+          severity: "warning",
+          message: `Text in ${name} at ${weight}${style === "italic" ? " italic" : ""}, which is given at ${has} only: it's drawn in the nearest. Give that file in renderPdf's fonts option`,
+          path: node.path,
+          ...node.id ? { nodeId: node.id } : {}
+        });
+      }
+    }
+    for (const child of node.children) if (typeof child !== "string") visit(child);
+  };
+  visit(root);
+  return [...out.values()];
+}
+var WIN_ANSI = "\u20AC\u201A\u0192\u201E\u2026\u2020\u2021\u02C6\u2030\u0160\u2039\u0152\u017D\u2018\u2019\u201C\u201D\u2022\u2013\u2014\u02DC\u2122\u0161\u203A\u0153\u017E\u0178";
+var drawnInStandard = (char) => {
+  const code = char.codePointAt(0);
+  return code >= 32 && code <= 126 || code >= 160 && code <= 255 || WIN_ANSI.includes(char) || char === "\n" || char === "	" || char === "\r";
+};
+function beyondStandard(root, families) {
+  const out = /* @__PURE__ */ new Map();
+  const visit = (node) => {
+    if (node.hidden?.desktop) return;
+    const family = pdfFamily(String(node.text.fontFamily), families);
+    if (!families.has(family) && !out.has(family)) {
+      const char = node.children.flatMap((child) => typeof child === "string" ? [...child] : []).find((c) => !drawnInStandard(c));
+      if (char) {
+        out.set(family, {
+          code: "pdf/font",
+          severity: "warning",
+          message: `Text in ${family} has characters a standard PDF font can't draw ("${char}"): it draws Western European characters only, and no font file is given for this text's fontFamily. Give one that has them in renderPdf's fonts option. They come out as other characters meanwhile`,
+          path: node.path,
+          ...node.id ? { nodeId: node.id } : {}
+        });
+      }
+    }
+    for (const child of node.children) if (typeof child !== "string") visit(child);
+  };
+  visit(root);
+  return [...out.values()];
+}
+function mime(bytes) {
+  if (bytes[0] === 137 && bytes[1] === 80 && bytes[2] === 78 && bytes[3] === 71) return "image/png";
+  if (bytes[0] === 255 && bytes[1] === 216) return "image/jpeg";
+  const head = new TextDecoder().decode(bytes.subarray(0, 256)).trimStart();
+  if (head.startsWith("<svg") || head.startsWith("<?xml")) return "image/svg+xml";
+  return void 0;
+}
+var DRAWN = /^data:image\/(png|jpeg|jpg)[;,]/;
+var SVG = /^data:image\/svg\+xml[;,]/;
+function imageSources(root, given, found) {
+  const out = /* @__PURE__ */ new Map();
+  const bytes = (src) => given[src] instanceof ArrayBuffer ? new Uint8Array(given[src]) : given[src];
+  const resolve = (src) => {
+    if (out.has(src)) return out.get(src);
+    if (DRAWN.test(src)) out.set(src, src);
+    else if (SVG.test(src)) return "svg";
+    else if (given[src]) {
+      const type = mime(bytes(src));
+      if (type === "image/svg+xml") return "svg";
+      if (type) out.set(src, `data:${type};base64,${base642(bytes(src))}`);
+    }
+    return out.get(src);
+  };
+  const visit = (node) => {
+    if (node.hidden?.desktop) return;
+    if (node.type === "Image") {
+      const { src } = assetParts(node.props.src);
+      const source = resolve(src);
+      const where = { path: `${node.path}.props.src`, ...node.id ? { nodeId: node.id } : {} };
+      if (source === "svg") {
+        found.push({
+          code: "pdf/image",
+          severity: "warning",
+          message: "A PDF draws PNG and JPEG images, not SVG: give this one as a PNG or JPEG (its file in renderPdf's images option, by its URL, or a data: URI). Its alt text is shown in its box meanwhile",
+          ...where
+        });
+      } else if (!source) {
+        found.push({
+          code: "pdf/image",
+          severity: "error",
+          message: given[src] ? "This image's file isn't a PNG or JPEG, the formats a PDF draws" : "PDF output loads no images: give this one's file in renderPdf's images option (by its URL), or its src as a data: URI",
+          ...where
+        });
+      }
+    }
+    if (node.type === "Video") {
+      const thumbnail = thumbnailOf(node);
+      if (thumbnail) resolve(thumbnail);
+    }
+    for (const child of node.children) if (typeof child !== "string") visit(child);
+  };
+  visit(root);
+  return out;
+}
+
+export { renderPdf };
+//# sourceMappingURL=pdf.js.map
+//# sourceMappingURL=pdf.js.map