@hyper-elements/react 0.0.1 → 0.3.1

package/dist/image.cjs

@@ -0,0 +1,472 @@
+'use strict';
+
+var resvgJs = require('@resvg/resvg-js');
+var react$1 = require('react');
+var satori = require('satori');
+var react = require('@hyper-elements/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var satori__default = /*#__PURE__*/_interopDefault(satori);
+
+// ../core/dist/image.js
+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(" ")
+);
+function fontStack(stack) {
+  return stack.split(",").map((family) => family.trim().replace(/^(["'])(.*)\1$/, "$2")).filter(Boolean);
+}
+function assetParts(value) {
+  return typeof value === "string" ? { src: value } : value;
+}
+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 = (text) => text.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 text = decode(html.replace(DROPPED, "").replace(LINE, "\n").replace(CELL, " ").replace(TAG, ""));
+  return text.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();
+}
+function clean(node) {
+  if (Array.isArray(node)) return node.map(clean);
+  if (!react$1.isValidElement(node)) return node;
+  const { style, children, ...props } = node.props;
+  const kept = style && Object.fromEntries(Object.entries(style).filter(([, value]) => value !== void 0 && value !== null));
+  const list = [].concat(children ?? []).filter((child) => child !== null && child !== void 0 && child !== false).map(clean);
+  return react$1.createElement(node.type, { ...props, key: node.key, ...kept ? { style: kept } : {} }, ...list);
+}
+var picture = (item, key) => react$1.createElement("img", { key, src: item.src, alt: item.alt, style: item.style });
+var run = (item, key) => {
+  if (typeof item === "string") return item;
+  if (item.kind === "span") return react$1.createElement("span", { key, style: item.style }, ...item.runs.map(run));
+  return picture(item, key);
+};
+var block = (item, key) => {
+  switch (item.kind) {
+    case "box":
+      return react$1.createElement("div", { key, style: item.style }, ...item.children.map(block));
+    case "text":
+      return react$1.createElement("div", { key, style: item.style }, ...item.runs.map(run));
+    case "image":
+      return picture(item, key);
+    case "drawing":
+      return react$1.createElement(
+        "svg",
+        { key, width: item.width, height: item.height, viewBox: item.viewBox, xmlns: "http://www.w3.org/2000/svg" },
+        ...item.shapes.map((shape, i) => react$1.createElement(shape.kind, { key: i, ...shape.attributes }))
+      );
+  }
+};
+var satoriResvg = async (canvas, output) => {
+  const tree = clean(react$1.createElement("div", { style: canvas.style }, ...canvas.children.map(block)));
+  const fonts = canvas.fonts.map((font) => ({ name: font.family, data: font.data, weight: font.weight, style: font.style }));
+  const svg = await satori__default.default(tree, { width: canvas.width, height: canvas.height, fonts });
+  if (output.format === "svg") return new TextEncoder().encode(svg);
+  return new Uint8Array(new resvgJs.Resvg(svg, { fitTo: { mode: "width", value: Math.round(canvas.width * output.scale) }, font: { loadSystemFonts: false } }).render().asPng());
+};
+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);
+var px = (value) => `${Math.round(value * 100) / 100}px`;
+var FLEX = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", "space-between": "space-between" };
+var flex = (value) => typeof value === "string" ? FLEX[value] : void 0;
+var aligned = (style) => {
+  const justify = { center: "center", right: "flex-end" }[String(style.textAlign)];
+  return justify ? { ...style, justifyContent: justify } : style;
+};
+function writeCanvas(root, context) {
+  const write = new Writer(context);
+  return {
+    width: Number(root.props.width),
+    height: Number(root.props.height),
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      width: px(Number(root.props.width)),
+      height: px(Number(root.props.height)),
+      overflow: "hidden",
+      justifyContent: flex(root.style.justifyContent),
+      ...write.box(root),
+      ...write.text(root),
+      ...gap(root)
+    },
+    children: present(nodes(root).map((child) => write.block(child, root))),
+    fonts: context.fonts
+  };
+}
+var gap = (node) => typeof node.style.gap === "number" ? { gap: px(node.style.gap) } : {};
+var Writer = class {
+  constructor(context) {
+    this.context = context;
+  }
+  /** The family a stack is drawn in: the first given in it, else the first given. */
+  family(stack) {
+    return fontStack(stack).find((family) => this.context.families.has(family.toLowerCase())) ?? this.context.fallback;
+  }
+  text(node) {
+    const text = node.text;
+    return {
+      color: text.color,
+      fontFamily: this.family(String(text.fontFamily)),
+      fontSize: px(text.fontSize),
+      fontWeight: text.fontWeight,
+      fontStyle: text.fontStyle,
+      lineHeight: px(text.lineHeightPx),
+      letterSpacing: text.letterSpacing ? px(text.letterSpacing) : void 0,
+      textAlign: text.textAlign,
+      textTransform: text.textTransform === "none" ? void 0 : text.textTransform
+    };
+  }
+  box(node) {
+    const style = node.style;
+    const out = {};
+    const padding = style.padding;
+    if (padding) out.padding = `${px(padding.top)} ${px(padding.right)} ${px(padding.bottom)} ${px(padding.left)}`;
+    if (typeof style.backgroundColor === "string") out.backgroundColor = style.backgroundColor;
+    const border = style.border;
+    for (const side of ["top", "right", "bottom", "left"]) {
+      const line = border?.[side];
+      if (line) out[`border${side[0].toUpperCase()}${side.slice(1)}`] = line.style === "none" ? "none" : `${px(line.width)} ${line.style} ${line.color}`;
+    }
+    const radius = style.borderRadius;
+    if (typeof radius === "number") out.borderRadius = px(radius);
+    else if (radius) out.borderRadius = `${px(radius.topLeft)} ${px(radius.topRight)} ${px(radius.bottomRight)} ${px(radius.bottomLeft)}`;
+    if (typeof style.height === "number") out.height = px(style.height);
+    if (style.overflow === "hidden") out.overflow = "hidden";
+    return out;
+  }
+  /** Where a child of its own size sits across a stack, as in the other outputs. */
+  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 flex(align);
+    return { left: "flex-start", justify: "flex-start", center: "center", right: "flex-end" }[stack.text.textAlign];
+  }
+  block(node, parent, row = false) {
+    const width = node.width !== null ? px(node.width) : void 0;
+    const placed = row ? { width, flexShrink: 0, flexGrow: 0, alignSelf: node.definition.sizing === "shrink" ? flex(parent.style.alignItems ?? "start") : void 0 } : { alignSelf: this.alignSelf(node, parent), width: node.style.width !== void 0 || node.style.maxWidth !== void 0 || node.definition.sizing === "shrink" ? width : void 0 };
+    switch (node.type) {
+      case "Text":
+      case "Heading":
+        return this.paragraph(node, { ...placed, ...this.box(node) });
+      case "Button":
+        return { kind: "box", style: { display: "flex", justifyContent: "center", ...placed, ...this.box(node), width }, children: [this.paragraph(node, { textAlign: "center" })] };
+      case "Image":
+        return this.image(node, placed);
+      case "Divider": {
+        const line = node.style.borderTop;
+        return {
+          kind: "box",
+          style: { display: "flex", ...this.box(node), ...placed, width },
+          children: [{ kind: "box", style: { display: "flex", flexGrow: 1, borderTop: line ? `${px(line.width)} ${line.style} ${line.color}` : void 0 }, children: [] }]
+        };
+      }
+      case "Row":
+        return {
+          kind: "box",
+          style: { display: "flex", flexDirection: "row", ...this.box(node), ...placed, ...gap(node), alignItems: flex(node.style.alignItems ?? "start"), justifyContent: flex(node.style.justifyContent) },
+          children: present(nodes(node).map((child) => this.block(child, node, true)))
+        };
+      case "Layer":
+        return this.layer(node, placed);
+      case "Svg":
+        return this.svg(node, placed);
+      case "Link":
+        if (node.children.some((child) => typeof child === "string" || child.definition.categories.includes("inline"))) return this.paragraph(node, { ...placed, ...this.box(node) });
+        return { kind: "box", style: { display: "flex", flexDirection: "column", ...placed }, children: present(nodes(node).map((child) => this.block(child, node))) };
+      case "List":
+        return this.list(node, placed);
+      case "Table":
+        return this.table(node, placed);
+      case "Html":
+        return { kind: "text", style: aligned({ display: "flex", ...this.text(node), ...placed }), runs: [htmlText(node)] };
+      case "Video":
+        return { kind: "text", style: aligned({ display: "flex", ...this.text(node), ...this.box(node), ...placed }), runs: [String(node.props.title ?? "Video")] };
+      case "Section":
+      case "Column":
+        return {
+          kind: "box",
+          style: { display: "flex", flexDirection: "column", ...this.box(node), ...placed, ...gap(node), justifyContent: flex(node.style.justifyContent) },
+          children: present(nodes(node).map((child) => this.block(child, node)))
+        };
+      default:
+        throw new Error(`[Elements] The image writer draws no ${node.type}`);
+    }
+  }
+  /** A List: each item a marker (its number, or a bullet) beside its text, a List in it under the text. */
+  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: { display: "flex", flexDirection: "column", ...this.box(node), ...placed, ...gap(node) },
+      children: nodes(node).map((item, i) => ({
+        kind: "box",
+        style: { display: "flex", flexDirection: "row" },
+        children: [
+          { kind: "text", style: { display: "flex", ...this.text(item), width: px(indent), flexShrink: 0, textAlign: "left" }, runs: [node.props.type === "number" ? `${start + i}.` : "\u2022"] },
+          { kind: "box", style: { display: "flex", flexDirection: "column", flexGrow: 1, flexShrink: 1 }, 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 text = [];
+    const flush = () => {
+      if (text.some((child) => typeof child !== "string" || child.trim() !== "")) parts.push(this.paragraph({ ...item, children: text }, {}));
+      text = [];
+    };
+    for (const child of item.children) {
+      if (typeof child !== "string" && child.type === "List") {
+        flush();
+        if (shown(child)) parts.push(this.list(child, {}));
+      } else text.push(child);
+    }
+    flush();
+    return parts;
+  }
+  /** A Table: its rows one under another, each cell at its columns' width (a header row's text bold). */
+  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: { display: "flex", flexDirection: "column", ...this.box(node), ...placed },
+      children: rows.map((row, r) => {
+        let column = 0;
+        const line = r < rows.length - 1 && rowBorder ? `${px(rowBorder.width)} ${rowBorder.style} ${rowBorder.color}` : void 0;
+        return {
+          kind: "box",
+          style: { display: "flex", flexDirection: "row", ...this.box(row), borderBottom: line },
+          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 ? `${px(cellPadding.top)} ${px(cellPadding.right)} ${px(cellPadding.bottom)} ${px(cellPadding.left)}` : void 0;
+            return {
+              kind: "box",
+              style: { display: "flex", flexDirection: "column", padding, ...this.box(cell), width: width !== void 0 ? px(width) : void 0, flexGrow: width === void 0 ? 1 : 0, flexShrink: 0 },
+              children: [this.paragraph(cell, row.props.header ? { fontWeight: 700 } : {})]
+            };
+          })
+        };
+      })
+    };
+  }
+  /** A block of text: its runs, a line break starting a new line. */
+  paragraph(node, style) {
+    const breaks = node.children.some((child) => typeof child !== "string" && child.type === "LineBreak");
+    return { kind: "text", style: aligned({ display: "flex", flexWrap: "wrap", ...this.text(node), ...style, whiteSpace: breaks ? "pre-wrap" : void 0 }), runs: this.runs(node) };
+  }
+  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 "Image":
+            return this.image(child, {});
+          default: {
+            const style = { ...this.text(child), textAlign: void 0 };
+            if (child.style.textDecoration !== void 0) style.textDecoration = String(child.style.textDecoration);
+            if (typeof child.style.backgroundColor === "string") style.backgroundColor = child.style.backgroundColor;
+            return { kind: "span", style, runs: this.runs(child) };
+          }
+        }
+      })
+    );
+  }
+  image(node, placed, cover) {
+    const { src, width, height } = assetParts(node.props.src);
+    const source = this.context.image(src);
+    if (!source) return void 0;
+    const drawn = node.width ?? width;
+    const style = { ...placed, ...this.box(node) };
+    if (cover !== void 0) Object.assign(style, { width: "100%", height: px(cover), objectFit: "cover" });
+    else if (drawn && width && height) Object.assign(style, { width: px(drawn), height: typeof node.style.height === "number" ? px(node.style.height) : px(drawn * height / width) });
+    return { kind: "image", src: source, alt: String(node.props.alt ?? ""), style };
+  }
+  /** 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: { display: "flex", position: "relative", ...this.box(node), ...placed, overflow: node.style.borderRadius !== void 0 ? "hidden" : void 0 },
+      children: present([
+        under,
+        ...over.map((child) => ({
+          kind: "box",
+          style: { display: "flex", flexDirection: "column", position: "absolute", top: 0, right: 0, bottom: 0, left: 0, justifyContent: flex(node.style.alignItems ?? "start"), alignItems: flex(node.style.justifyItems ?? "stretch") },
+          children: present([this.block(child, node)])
+        }))
+      ])
+    };
+  }
+  /** An Svg as a drawing, 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).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: { display: "flex", ...this.box(node), ...placed, width: void 0 }, children: [{ kind: "drawing", width, height, viewBox: viewBox ?? `0 0 ${width} ${height}`, shapes }] };
+  }
+};
+async function renderImage(element, options = {}) {
+  const { root, diagnostics, layout } = react.prepare(element);
+  readable(layout, "image");
+  if (!root) throw new react.ElementsError(diagnostics);
+  if (root.type !== "Canvas") {
+    throw new react.ElementsError([...diagnostics, { code: "image/root", severity: "error", message: `Image output is a Canvas's: this template is a ${root.type}`, path: "root" }]);
+  }
+  const found = [];
+  const fonts = fontsOf(root, options.fonts ?? [], found);
+  const images = imageSources(root, options.images ?? {}, found);
+  if (found.some((d) => d.severity === "error")) throw new react.ElementsError([...diagnostics, ...found]);
+  found.push(...missingFaces(root, fonts));
+  const width = Number(root.props.width);
+  const height = Number(root.props.height);
+  const families = new Set(fonts.map((font) => font.family.toLowerCase()));
+  const canvas = writeCanvas(root, { families, fallback: fonts[0]?.family ?? "", fonts, image: (src) => images.get(src) });
+  const scale = options.scale ?? 1;
+  if (options.format === "svg") return { image: await satoriResvg(canvas, { format: "svg", scale }), width, height, diagnostics: [...diagnostics, ...found] };
+  const image = await satoriResvg(canvas, { format: "png", scale });
+  return { image, width: Math.round(width * scale), height: Math.round(height * scale), diagnostics: [...diagnostics, ...found] };
+}
+function readable(layout, output) {
+  if (layout === LAYOUT_VERSION) return;
+  throw new react.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"
+    }
+  ]);
+}
+var buffer = (bytes) => {
+  if (bytes instanceof ArrayBuffer) return bytes;
+  return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+};
+var weight = (value) => Math.min(900, Math.max(100, Math.round((value ?? 400) / 100) * 100));
+var woff2 = (bytes) => String.fromCharCode(...new Uint8Array(buffer(bytes)).subarray(0, 4)) === "wOF2";
+function fontsOf(root, given, found) {
+  const drawn = (family, bytes) => {
+    if (!woff2(bytes)) return true;
+    found.push({ code: "image/font", severity: "warning", message: `${family}'s file is WOFF2: an image draws TTF, OTF and WOFF files. Its text is drawn in another font meanwhile`, path: "root.props.fonts" });
+    return false;
+  };
+  const out = given.filter((font) => drawn(font.family, font.src)).map((font) => ({ family: font.family, data: buffer(font.src), weight: weight(font.weight), style: font.style ?? "normal" }));
+  const named = new Set(out.map((font) => font.family.toLowerCase()));
+  for (const face of root.props.fonts ?? []) {
+    if (named.has(face.family.toLowerCase())) continue;
+    const data = /^data:[^,]*;base64,(.*)$/.exec(face.src)?.[1];
+    if (data && !drawn(face.family, Uint8Array.from(Buffer.from(data, "base64")))) continue;
+    if (data) {
+      out.push({ family: face.family, data: buffer(Uint8Array.from(Buffer.from(data, "base64"))), weight: weight(Array.isArray(face.weight) ? face.weight[0] : face.weight), style: face.style ?? "normal" });
+      continue;
+    }
+    found.push({ code: "image/font", severity: "warning", message: `Image output loads no fonts: give ${face.family}'s file in renderImage's fonts option. Its text is drawn in another font meanwhile`, path: "root.props.fonts" });
+  }
+  if (!out.length && hasText(root)) {
+    found.push({ code: "image/font", severity: "error", message: "An image draws its text with the fonts it's given, and has none: give a font file in renderImage's fonts option", path: "root" });
+  }
+  return out;
+}
+function missingFaces(root, fonts) {
+  const out = /* @__PURE__ */ new Map();
+  const given = /* @__PURE__ */ new Map();
+  for (const font of fonts) given.set(font.family.toLowerCase(), [...given.get(font.family.toLowerCase()) ?? [], font]);
+  const visit = (node) => {
+    if (node.hidden?.desktop) return;
+    if (node.children.some((child) => typeof child === "string" && child.trim())) {
+      const stack = fontStack(String(node.text.fontFamily));
+      const family = stack.find((name) => given.has(name.toLowerCase())) ?? fonts[0]?.family;
+      const faces = family ? given.get(family.toLowerCase()) ?? [] : [];
+      const weight2 = node.text.fontWeight;
+      const style = node.text.fontStyle;
+      if (family && !faces.some((face) => face.weight === weight2 && (face.style ?? "normal") === style)) {
+        const key = `${family}|${weight2}|${style}`;
+        if (!out.has(key)) {
+          const has = faces.map((face) => `${face.weight}${face.style === "italic" ? " italic" : ""}`).join(", ");
+          out.set(key, {
+            code: "image/font-weight",
+            severity: "warning",
+            message: `Text in ${family} at ${weight2}${style === "italic" ? " italic" : ""}, which is given at ${has} only: it's drawn in the nearest. Give that file in renderImage'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()];
+}
+function hasText(node) {
+  if (node.hidden?.desktop) return false;
+  return node.children.some((child) => typeof child === "string" ? child.trim() !== "" : hasText(child));
+}
+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";
+  if (bytes[0] === 71 && bytes[1] === 73 && bytes[2] === 70) return "image/gif";
+  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|gif|svg\+xml)[;,]/;
+function imageSources(root, given, found) {
+  const out = /* @__PURE__ */ new Map();
+  const visit = (node) => {
+    if (node.hidden?.desktop) return;
+    if (node.type === "Image") {
+      const { src } = assetParts(node.props.src);
+      const bytes = given[src] ? new Uint8Array(buffer(given[src])) : void 0;
+      const type = bytes && mime(bytes);
+      if (DRAWN.test(src)) out.set(src, src);
+      else if (bytes && type) out.set(src, `data:${type};base64,${Buffer.from(bytes).toString("base64")}`);
+      else {
+        found.push({
+          code: "image/image",
+          severity: "error",
+          message: bytes ? "This image's file isn't a PNG, JPEG, GIF or SVG" : "Image output loads no images: give this one's file in renderImage's images option (by its URL), or its src as a data: URI",
+          path: `${node.path}.props.src`,
+          ...node.id ? { nodeId: node.id } : {}
+        });
+      }
+    }
+    for (const child of node.children) if (typeof child !== "string") visit(child);
+  };
+  visit(root);
+  return out;
+}
+
+exports.renderImage = renderImage;
+//# sourceMappingURL=image.cjs.map
+//# sourceMappingURL=image.cjs.map