@bendyline/squisq-react 2.11.16 → 2.11.17

package/dist/chunk-5FJZDX7H.js

@@ -0,0 +1,298 @@
+import {
+  ImageLayer,
+  MapLayer,
+  MermaidLayer,
+  PathLayer,
+  ShapeLayer,
+  TableLayer,
+  TextLayer,
+  TreeLayer,
+  VideoLayer,
+  getTransitionClass
+} from "./chunk-PZCWGBRQ.js";
+
+// src/BlockRenderer.tsx
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
+import { isGeometryBoundTemplate } from "@bendyline/squisq/doc";
+
+// src/utils/textFit.ts
+function largestFittingTextScale(fits, maximum = 2) {
+  if (maximum <= 1 || !fits(1)) return 1;
+  if (fits(maximum)) return maximum;
+  let low = 1;
+  let high = maximum;
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    const candidate = (low + high) / 2;
+    if (fits(candidate)) low = candidate;
+    else high = candidate;
+  }
+  return Math.max(1, Math.floor(low * 100) / 100);
+}
+
+// src/BlockRenderer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_VIEWPORT = {
+  width: 1920,
+  height: 1080
+};
+var FIT_TOLERANCE_PX = 1;
+function applyTextScale(targets, scale) {
+  for (const target of targets) {
+    if (target.dataset.squisqTextFit === "html") {
+      const baseFontSize = Number(target.dataset.squisqBaseFontSize);
+      if (Number.isFinite(baseFontSize)) target.style.fontSize = `${baseFontSize * scale}px`;
+    } else {
+      target.style.transform = `scale(${scale})`;
+    }
+  }
+}
+function cssPixels(value) {
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function htmlTargetFits(target) {
+  const content = target.querySelector('[data-squisq-text-content="true"]');
+  if (!content || content.scrollWidth <= 0 || content.scrollHeight <= 0) return false;
+  const view = target.ownerDocument.defaultView;
+  const computed = view?.getComputedStyle(target);
+  const horizontalInset = computed ? cssPixels(computed.paddingLeft) + cssPixels(computed.paddingRight) + cssPixels(computed.borderLeftWidth) + cssPixels(computed.borderRightWidth) : 0;
+  const verticalInset = computed ? cssPixels(computed.paddingTop) + cssPixels(computed.paddingBottom) + cssPixels(computed.borderTopWidth) + cssPixels(computed.borderBottomWidth) : 0;
+  const availableWidth = Math.max(0, target.clientWidth - horizontalInset);
+  const availableHeight = Math.max(0, target.clientHeight - verticalInset);
+  if (content.scrollWidth > availableWidth + FIT_TOLERANCE_PX || content.scrollHeight > availableHeight + FIT_TOLERANCE_PX) {
+    return false;
+  }
+  for (const scrollRegion of content.querySelectorAll("[data-squisq-table-scroll]")) {
+    if (scrollRegion.clientWidth > 0 && scrollRegion.scrollWidth > scrollRegion.clientWidth + FIT_TOLERANCE_PX || scrollRegion.clientHeight > 0 && scrollRegion.scrollHeight > scrollRegion.clientHeight + FIT_TOLERANCE_PX) {
+      return false;
+    }
+  }
+  return true;
+}
+function svgTargetFits(target, scale) {
+  const content = target.querySelector('[data-squisq-text-content="true"]');
+  if (!content || typeof content.getBBox !== "function") return false;
+  try {
+    const box = content.getBBox();
+    const availableWidth = Number(target.dataset.squisqFitWidth);
+    const availableHeight = Number(target.dataset.squisqFitHeight);
+    return box.width > 0 && box.height > 0 && box.width * scale <= availableWidth + FIT_TOLERANCE_PX && box.height * scale <= availableHeight + FIT_TOLERANCE_PX;
+  } catch {
+    return false;
+  }
+}
+function renderedTextRects(targets) {
+  return targets.map(
+    (target) => target.querySelector('[data-squisq-text-content="true"]')?.getBoundingClientRect()
+  ).filter((rect) => !!rect && rect.width > 0 && rect.height > 0);
+}
+function overlapPairs(rects) {
+  const pairs = /* @__PURE__ */ new Set();
+  for (let left = 0; left < rects.length; left += 1) {
+    for (let right = left + 1; right < rects.length; right += 1) {
+      const a = rects[left];
+      const b = rects[right];
+      if (a.left < b.right - FIT_TOLERANCE_PX && a.right > b.left + FIT_TOLERANCE_PX && a.top < b.bottom - FIT_TOLERANCE_PX && a.bottom > b.top + FIT_TOLERANCE_PX) {
+        pairs.add(`${left}:${right}`);
+      }
+    }
+  }
+  return pairs;
+}
+function BlockRenderer({
+  block,
+  blockTime,
+  basePath,
+  isEntering = false,
+  isExiting = false,
+  transition,
+  viewport = DEFAULT_VIEWPORT,
+  isPlaying,
+  muted = false,
+  animationsEnabled = true,
+  theme,
+  tableContentRenderer,
+  growTextToFit = false
+}) {
+  let transitionClass = "";
+  const transitionStyle = {};
+  const activeTransition = animationsEnabled ? transition ?? block.transition : void 0;
+  if (activeTransition && isEntering) {
+    transitionClass = getTransitionClass(activeTransition.type, true, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
+  } else if (activeTransition && isExiting) {
+    transitionClass = getTransitionClass(activeTransition.type, false, activeTransition.direction);
+    transitionStyle["--transition-duration"] = `${resolveTransitionDuration(activeTransition)}s`;
+  }
+  const instanceId = useId().replace(/:/g, "");
+  const clipId = `vb-clip-${instanceId}-${block.id}`;
+  const svgRef = useRef(null);
+  const [textScale, setTextScale] = useState(1);
+  const growText = growTextToFit && !isGeometryBoundTemplate(block.template);
+  useLayoutEffect(() => {
+    const svg = svgRef.current;
+    let cancelled = false;
+    if (!svg) return;
+    const measure = () => {
+      if (cancelled) return;
+      const targets = Array.from(svg.querySelectorAll("[data-squisq-text-fit]"));
+      if (!growText || targets.length === 0) {
+        applyTextScale(targets, 1);
+        setTextScale(1);
+        return;
+      }
+      applyTextScale(targets, 1);
+      const baselineOverlaps = overlapPairs(renderedTextRects(targets));
+      const fits = (scale) => {
+        applyTextScale(targets, scale);
+        if (targets.some(
+          (target) => target.dataset.squisqTextFit === "html" ? !htmlTargetFits(target) : !svgTargetFits(target, scale)
+        )) {
+          return false;
+        }
+        const candidateOverlaps = overlapPairs(renderedTextRects(targets));
+        for (const pair of candidateOverlaps) {
+          if (!baselineOverlaps.has(pair)) return false;
+        }
+        return true;
+      };
+      const nextScale = largestFittingTextScale(fits);
+      applyTextScale(targets, nextScale);
+      setTextScale((current) => current === nextScale ? current : nextScale);
+    };
+    measure();
+    const fonts = svg.ownerDocument?.fonts;
+    if (fonts && fonts.status !== "loaded") void fonts.ready.then(measure);
+    return () => {
+      cancelled = true;
+    };
+  }, [block.layers, growText, viewport.height, viewport.width]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      className: `block-svg ${transitionClass}`,
+      style: transitionStyle,
+      viewBox: `0 0 ${viewport.width} ${viewport.height}`,
+      preserveAspectRatio: "xMidYMid meet",
+      overflow: "hidden",
+      "data-block-id": block.id,
+      "data-squisq-text-scale": growText ? textScale : void 0,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: viewport.width, height: viewport.height }) }) }),
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: (block.layers ?? []).map((layer) => /* @__PURE__ */ jsx(
+          LayerRenderer,
+          {
+            block,
+            layer,
+            basePath,
+            viewport,
+            blockTime,
+            isPlaying,
+            muted,
+            animationsEnabled,
+            theme,
+            tableContentRenderer,
+            textScale
+          },
+          layer.id
+        )) })
+      ]
+    }
+  );
+}
+function LayerRenderer({
+  block,
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  isPlaying,
+  muted,
+  animationsEnabled,
+  theme,
+  tableContentRenderer,
+  textScale
+}) {
+  const renderedLayer = animationsEnabled || !layer.animation ? layer : { ...layer, animation: void 0 };
+  switch (renderedLayer.type) {
+    case "image":
+      return /* @__PURE__ */ jsx(
+        ImageLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime,
+          animationsEnabled
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextLayer,
+        {
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          textScale
+        }
+      );
+    case "shape":
+      return /* @__PURE__ */ jsx(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
+    case "path":
+      return /* @__PURE__ */ jsx(PathLayer, { layer: renderedLayer, viewport, blockTime });
+    case "map":
+      return /* @__PURE__ */ jsx(
+        MapLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ jsx(
+        VideoLayer,
+        {
+          layer: renderedLayer,
+          basePath,
+          viewport,
+          blockTime,
+          isPlaying,
+          muted
+        }
+      );
+    case "table":
+      return /* @__PURE__ */ jsx(
+        TableLayer,
+        {
+          block,
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          contentRenderer: tableContentRenderer
+        }
+      );
+    case "tree":
+      return /* @__PURE__ */ jsx(TreeLayer, { layer: renderedLayer, viewport, blockTime });
+    case "mermaid":
+      return /* @__PURE__ */ jsx(
+        MermaidLayer,
+        {
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          theme
+        }
+      );
+    default:
+      console.warn(`Unknown layer type: ${renderedLayer.type}`);
+      return null;
+  }
+}
+
+export {
+  BlockRenderer
+};

package/dist/{chunk-5JGUJDPD.js → chunk-622IA3KB.js}

@@ -1,28 +1,30 @@
 import {
-  BlockRenderer,
   LinearDocView
-} from "./chunk-62UYYVCB.js";
-import {
-  isCaptureDrivenVideo,
-  seekVideoToFrame
-} from "./chunk-GFUEFU6X.js";
+} from "./chunk-2VSD55NT.js";
 import {
   useAudioSync,
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-CYXFNHWK.js";
+} from "./chunk-SVVPYDV3.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-BSDTS72D.js";
+} from "./chunk-2FZUFQO3.js";
+import {
+  BlockRenderer
+} from "./chunk-5FJZDX7H.js";
+import {
+  isCaptureDrivenVideo,
+  seekVideoToFrame
+} from "./chunk-PZCWGBRQ.js";
 import {
   useMediaProvider,
   useMediaUrl,
   useResourcePolicy
-} from "./chunk-4L5MZ5OL.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/MediaClipLayer.tsx
 import { useEffect, useRef } from "react";

package/dist/{chunk-4L5MZ5OL.js → chunk-63G5OJWY.js}

@@ -91,6 +91,21 @@ function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
     return { svg, diagramType };
   });
 }
+function renderMermaidSvgForExport(id, source, theme = DEFAULT_THEME, fontFamily) {
+  return enqueue(async () => {
+    const mermaid = await loadMermaid();
+    const themeVariables = buildMermaidThemeVariables(theme);
+    mermaid.initialize({
+      ...MERMAID_BASE_CONFIG,
+      theme: "base",
+      themeVariables: fontFamily ? { ...themeVariables, fontFamily } : themeVariables,
+      htmlLabels: false,
+      journey: { textPlacement: "tspan" }
+    });
+    const { svg } = await mermaid.render(id, source);
+    return svg;
+  });
+}
 function mermaidRenderErrorMessage(error) {
   const raw = error instanceof Error ? error.message : String(error);
   return raw.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(0, 6).join("\n") || "Unknown Mermaid rendering error.";
@@ -103,5 +118,6 @@ export {
   useMediaProvider,
   useMediaUrl,
   renderMermaidSvg,
+  renderMermaidSvgForExport,
   mermaidRenderErrorMessage
 };

package/dist/{chunk-VZ43ACHC.js → chunk-L4LIIOU2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-BSDTS72D.js";
+} from "./chunk-2FZUFQO3.js";
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo } from "react";

package/dist/{chunk-UD3VI5UB.js → chunk-PSAO2CTF.js}

@@ -1,6 +1,6 @@
 import {
   LinearDocView
-} from "./chunk-62UYYVCB.js";
+} from "./chunk-2VSD55NT.js";
 
 // src/PaginatedDocView.tsx
 import {

package/dist/{chunk-GFUEFU6X.js → chunk-PZCWGBRQ.js}

@@ -1,10 +1,10 @@
 import {
   MermaidDiagram
-} from "./chunk-RJ3SNKB7.js";
+} from "./chunk-QXZXQPL3.js";
 import {
   useMediaUrl,
   useResourcePolicy
-} from "./chunk-4L5MZ5OL.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/utils/animationUtils.ts
 import {

package/dist/{chunk-RJ3SNKB7.js → chunk-QXZXQPL3.js}

@@ -1,7 +1,7 @@
 import {
   mermaidRenderErrorMessage,
   renderMermaidSvg
-} from "./chunk-4L5MZ5OL.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/mermaid/MermaidDiagram.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-CYXFNHWK.js → chunk-SVVPYDV3.js}

@@ -2,7 +2,7 @@ import {
   renderMermaidSvg,
   useMediaProvider,
   useResourcePolicy
-} from "./chunk-4L5MZ5OL.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/hooks/useMediaSchedule.ts
 import { useMemo } from "react";

package/dist/diagram-pictures/index.d.ts

@@ -0,0 +1,61 @@
+import { Theme } from '@bendyline/squisq/schemas';
+
+/**
+ * PNG pictures of diagrams, for document exports (DOCX, EPUB, PDF, PPTX).
+ *
+ * Browser-only. A diagram is drawn as SVG, the SVG is loaded as an image,
+ * and the image is painted onto a canvas and read back as PNG. That last
+ * step fails in some browsers once the SVG holds `<foreignObject>`, so every
+ * path here produces plain SVG: Mermaid with SVG-text labels, Squisq
+ * diagrams through `BlockRenderer` without their slide chrome, and file
+ * trees as monospace text. A picture also cannot load the page's web fonts,
+ * so text is set in a system font stack.
+ *
+ * `createDiagramPictureRenderer` matches the `DiagramRasterizer` that
+ * `@bendyline/squisq-formats/diagrams` takes.
+ */
+
+/** A PNG and the size it should display at, in CSS pixels. */
+interface DiagramPicturePng {
+    data: Uint8Array;
+    width: number;
+    height: number;
+}
+interface DiagramPictureOptions {
+    /** Colors for the diagram. Default: Squisq's default (light) theme. */
+    theme?: Theme;
+    /** Pixel density of the PNG relative to its display size. Default: 2. */
+    scale?: number;
+    /** Widest display size in CSS pixels. Default: 680. */
+    maxWidth?: number;
+    /** Background painted behind the diagram. Default: white. */
+    background?: string;
+}
+/** The diagram description `@bendyline/squisq-formats/diagrams` passes. */
+interface DiagramToPicture {
+    kind: 'mermaid' | 'diagram' | 'timeline' | 'tree' | 'container';
+    markdown: string;
+    source: string;
+}
+/** System fonts every platform has, since a picture can't load web fonts. */
+declare const EXPORT_FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+/** Paint `svg` (viewBox already set) at `width` × `height` CSS pixels and read back PNG bytes. */
+declare function svgToPng(svg: SVGSVGElement, width: number, height: number, options?: DiagramPictureOptions): Promise<DiagramPicturePng>;
+/** A Mermaid diagram as a PNG at its natural size (capped at `maxWidth`). */
+declare function renderMermaidPicture(source: string, options?: DiagramPictureOptions): Promise<DiagramPicturePng>;
+/** A file-tree fence as monospace text lines, exactly as written. */
+declare function renderTreePicture(source: string, options?: DiagramPictureOptions): Promise<DiagramPicturePng | null>;
+/**
+ * A Squisq-rendered diagram — an ASCII diagram or timeline fence, or a
+ * drawing, layout, or diagram heading block — as a PNG cropped to its
+ * content, or null when it has nothing to draw.
+ */
+declare function renderSquisqDiagramPicture(markdown: string, options?: DiagramPictureOptions): Promise<DiagramPicturePng | null>;
+/**
+ * A renderer for `rasterizeDiagrams` from `@bendyline/squisq-formats/diagrams`:
+ * Mermaid, ASCII diagrams and timelines, file trees, and drawing, layout,
+ * and diagram blocks.
+ */
+declare function createDiagramPictureRenderer(options?: DiagramPictureOptions): (diagram: DiagramToPicture) => Promise<DiagramPicturePng | null>;
+
+export { type DiagramPictureOptions, type DiagramPicturePng, type DiagramToPicture, EXPORT_FONT_STACK, createDiagramPictureRenderer, renderMermaidPicture, renderSquisqDiagramPicture, renderTreePicture, svgToPng };

package/dist/diagram-pictures/index.js

@@ -0,0 +1,213 @@
+import {
+  BlockRenderer
+} from "../chunk-5FJZDX7H.js";
+import "../chunk-PZCWGBRQ.js";
+import "../chunk-QXZXQPL3.js";
+import {
+  renderMermaidSvgForExport
+} from "../chunk-63G5OJWY.js";
+
+// src/export/diagramPictures.ts
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { VIEWPORT_PRESETS } from "@bendyline/squisq/schemas";
+import {
+  DEFAULT_THEME,
+  flattenRenderableBlocks,
+  markdownToDoc,
+  materializeBlockLayers
+} from "@bendyline/squisq/doc";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+var EXPORT_FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+var EXPORT_MONO_STACK = "ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+var CANVAS_UNITS_PER_CSS_PIXEL = 2.5;
+var PADDING = 16;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var pictureCount = 0;
+function settings(options) {
+  return {
+    theme: options.theme ?? DEFAULT_THEME,
+    scale: options.scale ?? 2,
+    maxWidth: options.maxWidth ?? 680,
+    background: options.background ?? "#ffffff"
+  };
+}
+async function svgToPng(svg, width, height, options = {}) {
+  const { scale, background } = settings(options);
+  const pixelWidth = Math.max(1, Math.round(width * scale));
+  const pixelHeight = Math.max(1, Math.round(height * scale));
+  const clone = svg.cloneNode(true);
+  clone.setAttribute("xmlns", SVG_NS);
+  clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  clone.setAttribute("width", String(pixelWidth));
+  clone.setAttribute("height", String(pixelHeight));
+  clone.removeAttribute("style");
+  const xml = new XMLSerializer().serializeToString(clone);
+  const image = new Image();
+  image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+  await image.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = pixelWidth;
+  canvas.height = pixelHeight;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("No 2D canvas is available to draw the diagram.");
+  context.fillStyle = background;
+  context.fillRect(0, 0, pixelWidth, pixelHeight);
+  context.drawImage(image, 0, 0, pixelWidth, pixelHeight);
+  const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (!blob) throw new Error("The diagram could not be encoded as PNG.");
+  return {
+    data: new Uint8Array(await blob.arrayBuffer()),
+    width: Math.round(width),
+    height: Math.round(height)
+  };
+}
+function parseViewBox(svg) {
+  const values = (svg.getAttribute("viewBox") ?? "").trim().split(/[\s,]+/u).map(Number);
+  if (values.length !== 4 || values.some((value) => !Number.isFinite(value))) return null;
+  const [x = 0, y = 0, width = 0, height = 0] = values;
+  return width > 0 && height > 0 ? { x, y, width, height } : null;
+}
+async function renderMermaidPicture(source, options = {}) {
+  const { theme, maxWidth } = settings(options);
+  const markup = await renderMermaidSvgForExport(
+    `squisq-export-mermaid-${String(++pictureCount)}`,
+    source,
+    theme,
+    EXPORT_FONT_STACK
+  );
+  const template = document.createElement("template");
+  template.innerHTML = markup;
+  const svg = template.content.querySelector("svg");
+  if (!svg) throw new Error("Mermaid produced no SVG.");
+  const box = parseViewBox(svg);
+  if (!box) throw new Error("The Mermaid SVG has no size.");
+  const style = document.createElementNS(SVG_NS, "style");
+  style.textContent = `.edgeLabel text, .edgeLabel tspan { fill: ${theme.colors.text} !important; }`;
+  svg.append(style);
+  const width = Math.min(maxWidth, box.width);
+  return svgToPng(svg, width, box.height * width / box.width, options);
+}
+async function renderTreePicture(source, options = {}) {
+  const { theme, maxWidth } = settings(options);
+  const lines = source.replace(/\s+$/u, "").split("\n");
+  if (lines.length === 0) return null;
+  const fontSize = 14;
+  const lineHeight = 20;
+  const longest = Math.max(...lines.map((line) => [...line].length));
+  const width = Math.min(maxWidth, Math.ceil(longest * fontSize * 0.62) + 2 * PADDING);
+  const height = lines.length * lineHeight + 2 * PADDING;
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", `0 0 ${String(width)} ${String(height)}`);
+  const text = document.createElementNS(SVG_NS, "text");
+  text.setAttribute("font-family", EXPORT_MONO_STACK);
+  text.setAttribute("font-size", String(fontSize));
+  text.setAttribute("fill", theme.colors.text);
+  text.setAttribute("xml:space", "preserve");
+  lines.forEach((line, index) => {
+    const span = document.createElementNS(SVG_NS, "tspan");
+    span.setAttribute("x", String(PADDING));
+    span.setAttribute("y", String(PADDING + (index + 0.75) * lineHeight));
+    span.textContent = line;
+    text.append(span);
+  });
+  svg.append(text);
+  return svgToPng(svg, width, height, options);
+}
+function isChrome(layer) {
+  const id = layer.id;
+  if (id === "bg" || id === "title" || id.endsWith("-title") || id.endsWith("-description")) {
+    return true;
+  }
+  if (id.endsWith("-empty")) return true;
+  return layer.type === "shape" && typeof layer.content.fill === "string" && layer.content.fill.includes("gradient(");
+}
+function withExportFont(layer) {
+  if (layer.type !== "text") return layer;
+  return {
+    ...layer,
+    content: { ...layer.content, style: { ...layer.content.style, fontFamily: EXPORT_FONT_STACK } }
+  };
+}
+async function settle() {
+  await document.fonts?.ready;
+  for (let frame = 0; frame < 2; frame++) {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+  }
+}
+async function renderSquisqDiagramPicture(markdown, options = {}) {
+  const { theme, maxWidth } = settings(options);
+  const doc = markdownToDoc(parseMarkdown(markdown), { generateCoverBlock: false });
+  const block = flattenRenderableBlocks(doc.blocks)[0];
+  if (!block) return null;
+  const viewport = VIEWPORT_PRESETS.landscape;
+  const { layers } = materializeBlockLayers(block, { theme, viewport, persistentLayers: false });
+  const kept = layers.filter((layer) => !isChrome(layer)).map(withExportFont);
+  if (kept.length === 0) return null;
+  const host = document.createElement("div");
+  host.setAttribute("aria-hidden", "true");
+  host.style.cssText = `position:fixed;left:-${String(viewport.width * 2)}px;top:0;width:${String(
+    viewport.width
+  )}px;height:${String(viewport.height)}px;pointer-events:none;`;
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    const pictureBlock = {
+      id: `squisq-export-${String(++pictureCount)}`,
+      startTime: 0,
+      duration: 0,
+      audioSegment: 0,
+      layers: kept
+    };
+    root.render(
+      createElement(BlockRenderer, {
+        block: pictureBlock,
+        blockTime: 0,
+        basePath: "",
+        viewport,
+        animationsEnabled: false,
+        theme
+      })
+    );
+    await settle();
+    const svg = host.querySelector("svg.block-svg");
+    if (!svg) return null;
+    const box = svg.getBBox();
+    if (box.width <= 0 || box.height <= 0) return null;
+    const x = box.x - PADDING;
+    const y = box.y - PADDING;
+    const contentWidth = box.width + 2 * PADDING;
+    const contentHeight = box.height + 2 * PADDING;
+    const cropped = svg.cloneNode(true);
+    cropped.setAttribute(
+      "viewBox",
+      `${String(x)} ${String(y)} ${String(contentWidth)} ${String(contentHeight)}`
+    );
+    cropped.removeAttribute("clip-path");
+    const width = Math.min(maxWidth, contentWidth / CANVAS_UNITS_PER_CSS_PIXEL);
+    return await svgToPng(cropped, width, contentHeight * width / contentWidth, options);
+  } finally {
+    root.unmount();
+    host.remove();
+  }
+}
+function createDiagramPictureRenderer(options = {}) {
+  return async (diagram) => {
+    switch (diagram.kind) {
+      case "mermaid":
+        return renderMermaidPicture(diagram.source, options);
+      case "tree":
+        return renderTreePicture(diagram.source, options);
+      default:
+        return renderSquisqDiagramPicture(diagram.markdown, options);
+    }
+  };
+}
+export {
+  EXPORT_FONT_STACK,
+  createDiagramPictureRenderer,
+  renderMermaidPicture,
+  renderSquisqDiagramPicture,
+  renderTreePicture,
+  svgToPng
+};