@bendyline/squisq-react 2.11.15 → 2.11.17

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

@@ -1,6 +1,8 @@
 import {
+  renderMermaidSvg,
+  useMediaProvider,
   useResourcePolicy
-} from "./chunk-LR3AIGDD.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/hooks/useMediaSchedule.ts
 import { useMemo } from "react";
@@ -475,7 +477,7 @@ function useAudioSync(audioRef, track, basePath = "", enabled = true, mode = "me
 }
 
 // src/hooks/useDocPlayback.ts
-import { useMemo as useMemo3, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useMemo as useMemo4, useCallback as useCallback2, useRef as useRef2 } from "react";
 import { resolveMotionForDoc } from "@bendyline/squisq/schemas";
 import {
   DEFAULT_THEME,
@@ -485,11 +487,145 @@ import {
 } from "@bendyline/squisq/schemas";
 import {
   expandDocBlocks,
-  flattenRenderableBlocks,
+  flattenRenderableBlocks as flattenRenderableBlocks2,
   isTemplateBlock,
   resolvePersistentLayers,
   VIEWPORT_PRESETS
 } from "@bendyline/squisq/doc";
+
+// src/hooks/useFeatureMediaAspectRatios.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
+import {
+  extractImages,
+  extractEmbeddedVideos,
+  flattenRenderableBlocks
+} from "@bendyline/squisq/doc";
+import { isResourceUrlAllowed as isResourceUrlAllowed2 } from "@bendyline/squisq/markdown";
+var EMPTY_RATIOS = {};
+var ratioCache = /* @__PURE__ */ new Map();
+var diagramSequence = 0;
+function probeAspectRatio(kind, url, report) {
+  let element;
+  let size;
+  if (kind === "image") {
+    const image = new Image();
+    element = image;
+    size = () => [image.naturalWidth, image.naturalHeight];
+  } else {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    video.muted = true;
+    element = video;
+    size = () => [video.videoWidth, video.videoHeight];
+  }
+  const event = kind === "image" ? "load" : "loadedmetadata";
+  let released = false;
+  const cleanup = () => {
+    if (released) return;
+    released = true;
+    clearTimeout(timeout);
+    element.removeEventListener(event, loaded);
+    element.removeEventListener("error", cleanup);
+    element.removeAttribute("src");
+    if (element instanceof HTMLVideoElement) element.load();
+  };
+  const loaded = () => {
+    const [width, height] = size();
+    if (width > 0 && height > 0) report(width / height);
+    cleanup();
+  };
+  const timeout = setTimeout(cleanup, 8e3);
+  element.addEventListener(event, loaded);
+  element.addEventListener("error", cleanup);
+  element.src = url;
+  return cleanup;
+}
+function useFeatureMediaAspectRatios(blocks, basePath, theme) {
+  const provider = useMediaProvider();
+  const policy = useResourcePolicy();
+  const sourceKey = useMemo3(() => {
+    const sources = /* @__PURE__ */ new Map();
+    for (const block of flattenRenderableBlocks(blocks ?? [])) {
+      if (block.summaryLayout !== "feature") continue;
+      for (const image of extractImages(block.contents))
+        sources.set(image.src, { kind: "image", source: image.src });
+      for (const video of extractEmbeddedVideos(block.contents))
+        sources.set(video.src, { kind: "video", source: video.src });
+      for (const node of block.contents ?? []) {
+        if (node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")
+          sources.set(node.value, { kind: "mermaid", source: node.value });
+      }
+    }
+    return JSON.stringify([...sources.values()]);
+  }, [blocks]);
+  const scope = useMemo3(
+    () => ({ sourceKey, provider, policy, basePath, theme }),
+    [sourceKey, provider, policy, basePath, theme]
+  );
+  const [result, setResult] = useState2();
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    let current = true;
+    const cleanups = [];
+    const ratios = {};
+    const report = (source, ratio) => {
+      if (!current || !Number.isFinite(ratio) || ratio <= 0) return;
+      ratios[source] = ratio;
+      setResult({ scope, ratios: { ...ratios } });
+    };
+    const sources = JSON.parse(sourceKey);
+    for (const { kind, source } of sources) {
+      if (kind === "mermaid") {
+        void renderMermaidSvg(
+          `squisq-feature-measure-${++diagramSequence}`,
+          source,
+          void 0,
+          theme
+        ).then(({ svg }) => {
+          if (!current) return;
+          const viewBox = new DOMParser().parseFromString(svg, "image/svg+xml").documentElement.getAttribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
+          if (viewBox?.length === 4 && viewBox[2] > 0 && viewBox[3] > 0)
+            report(source, viewBox[2] / viewBox[3]);
+        }).catch(() => {
+        });
+        continue;
+      }
+      const resolve = async () => {
+        const absolute = /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(source);
+        const fallback = absolute ? source : `${basePath.replace(/\/$/, "")}/${source}`;
+        let url = fallback;
+        if (!absolute && provider) {
+          try {
+            url = await provider.resolveUrl(source);
+          } catch {
+          }
+        }
+        if (!current || !isResourceUrlAllowed2(url, policy)) return;
+        const cacheKey = `${kind}:${url}`;
+        const cached = ratioCache.get(cacheKey);
+        if (cached !== void 0) {
+          report(source, cached);
+          return;
+        }
+        cleanups.push(
+          probeAspectRatio(kind, url, (ratio) => {
+            if (!current) return;
+            ratioCache.set(cacheKey, ratio);
+            report(source, ratio);
+          })
+        );
+      };
+      void resolve();
+    }
+    return () => {
+      current = false;
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [sourceKey, provider, policy, basePath, theme, scope]);
+  return result?.scope === scope ? result.ratios : EMPTY_RATIOS;
+}
+
+// src/hooks/useDocPlayback.ts
 function useDocPlayback(script, currentTime, options = {}) {
   const {
     viewport = VIEWPORT_PRESETS.landscape,
@@ -497,14 +633,20 @@ function useDocPlayback(script, currentTime, options = {}) {
     onSeek,
     useAudioSegmentTiming = true,
     deterministicTransitions = false,
-    motion: motionOverride
+    motion: motionOverride,
+    basePath = "."
   } = options;
-  const blocks = useMemo3(() => {
+  const mediaAspectRatios = useFeatureMediaAspectRatios(
+    script?.blocks,
+    basePath,
+    theme ?? DEFAULT_THEME
+  );
+  const blocks = useMemo4(() => {
     if (!script?.blocks) {
       return [];
     }
     const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
-    const flatBlocks = hasChildren ? flattenRenderableBlocks(script.blocks) : script.blocks;
+    const flatBlocks = hasChildren ? flattenRenderableBlocks2(script.blocks) : script.blocks;
     const hasTemplates = flatBlocks.some(isTemplateBlock);
     const resolvedTheme = theme ?? DEFAULT_THEME;
     const persistentLayers = resolvePersistentLayers(
@@ -519,6 +661,7 @@ function useDocPlayback(script, currentTime, options = {}) {
       const expanded = expandDocBlocks(flatBlocks, {
         audioSegments,
         viewport,
+        mediaAspectRatios,
         persistentLayers,
         theme,
         motion: resolveMotionForDoc(
@@ -546,24 +689,25 @@ function useDocPlayback(script, currentTime, options = {}) {
     script?.motion,
     script?.frontmatter,
     motionOverride,
+    mediaAspectRatios,
     viewport,
     theme,
     useAudioSegmentTiming
   ]);
-  const currentBlock = useMemo3(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
-  const currentBlockIndex = useMemo3(
+  const currentBlock = useMemo4(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
+  const currentBlockIndex = useMemo4(
     () => currentBlock ? blocks.indexOf(currentBlock) : -1,
     [blocks, currentBlock]
   );
-  const blockTime = useMemo3(() => {
+  const blockTime = useMemo4(() => {
     if (!currentBlock) return 0;
     return Math.max(0, currentTime - currentBlock.startTime);
   }, [currentBlock, currentTime]);
-  const blockProgress = useMemo3(() => {
+  const blockProgress = useMemo4(() => {
     if (!currentBlock || currentBlock.duration === 0) return 0;
     return Math.min(1, blockTime / currentBlock.duration);
   }, [currentBlock, blockTime]);
-  const docProgress = useMemo3(() => {
+  const docProgress = useMemo4(() => {
     if (!script || script.duration === 0) return 0;
     return Math.min(1, currentTime / script.duration);
   }, [script, currentTime]);
@@ -630,7 +774,7 @@ function useDocPlayback(script, currentTime, options = {}) {
 }
 
 // src/hooks/useViewportOrientation.ts
-import { useState as useState2, useEffect as useEffect2, useMemo as useMemo4 } from "react";
+import { useState as useState3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
 import {
   VIEWPORT_PRESETS as VIEWPORT_PRESETS2
 } from "@bendyline/squisq/doc";
@@ -656,11 +800,11 @@ function getViewportForOrientation(orientation) {
   }
 }
 function useViewportOrientation() {
-  const [windowSize, setWindowSize] = useState2(() => ({
+  const [windowSize, setWindowSize] = useState3(() => ({
     width: typeof window !== "undefined" ? window.innerWidth : 1920,
     height: typeof window !== "undefined" ? window.innerHeight : 1080
   }));
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       setWindowSize({
@@ -679,11 +823,11 @@ function useViewportOrientation() {
       clearTimeout(timeoutId);
     };
   }, []);
-  const orientation = useMemo4(
+  const orientation = useMemo5(
     () => getOrientationFromWindow(windowSize.width, windowSize.height),
     [windowSize.width, windowSize.height]
   );
-  const viewport = useMemo4(() => getViewportForOrientation(orientation), [orientation]);
+  const viewport = useMemo5(() => getViewportForOrientation(orientation), [orientation]);
   return {
     viewport,
     orientation,

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
+};

package/dist/hooks/index.d.ts

@@ -114,6 +114,8 @@ interface PlaybackActions {
     suppressOutgoingForNextBlock: (blockId: string) => void;
 }
 interface UseDocPlaybackOptions {
+    /** Fallback media root for intrinsic feature metadata. */
+    basePath?: string;
     /** Target viewport used to materialize template blocks. */
     viewport?: ViewportConfig;
     /** Active theme used for materialization and transition defaults. */

package/dist/hooks/index.js

@@ -6,7 +6,7 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "../chunk-U2FIZWAL.js";
+} from "../chunk-SVVPYDV3.js";
 import {
   useAutoSurface
 } from "../chunk-TT6ENR6T.js";
@@ -16,7 +16,7 @@ import {
   useMediaProvider,
   useMediaUrl,
   useResourcePolicy
-} from "../chunk-LR3AIGDD.js";
+} from "../chunk-63G5OJWY.js";
 export {
   MediaContext,
   ResourcePolicyContext,

package/dist/index.js

@@ -15,31 +15,17 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-VUMNXXK4.js";
+} from "./chunk-622IA3KB.js";
 import {
   PaginatedDocView
-} from "./chunk-7T26IKW2.js";
+} from "./chunk-PSAO2CTF.js";
 import {
-  BlockRenderer,
   CanvasSection,
   LinearDocView,
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-P3FJ3YKS.js";
-import {
-  ImageLayer,
-  MapLayer,
-  MermaidLayer,
-  PathLayer,
-  ShapeLayer,
-  TableLayer,
-  TextLayer,
-  TreeLayer,
-  VideoLayer,
-  getAnimationStyle,
-  getTransitionClass
-} from "./chunk-WHVSQ42V.js";
+} from "./chunk-2VSD55NT.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";
@@ -48,11 +34,11 @@ import {
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-U2FIZWAL.js";
+} from "./chunk-SVVPYDV3.js";
 import {
   JsonView,
   createJsonFormFenceRenderer
-} from "./chunk-KDTKUE53.js";
+} from "./chunk-L4LIIOU2.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -64,17 +50,33 @@ import {
   MarkdownRenderer,
   useAnimatedImage,
   useFenceRenderers
-} from "./chunk-6PUMLLJH.js";
+} from "./chunk-2FZUFQO3.js";
+import {
+  BlockRenderer
+} from "./chunk-5FJZDX7H.js";
+import {
+  ImageLayer,
+  MapLayer,
+  MermaidLayer,
+  PathLayer,
+  ShapeLayer,
+  TableLayer,
+  TextLayer,
+  TreeLayer,
+  VideoLayer,
+  getAnimationStyle,
+  getTransitionClass
+} from "./chunk-PZCWGBRQ.js";
 import {
   MermaidDiagram
-} from "./chunk-WLUZTUNZ.js";
+} from "./chunk-QXZXQPL3.js";
 import {
   MediaContext,
   ResourcePolicyContext,
   useMediaProvider,
   useMediaUrl,
   useResourcePolicy
-} from "./chunk-LR3AIGDD.js";
+} from "./chunk-63G5OJWY.js";
 export {
   AnimatedImageControls,
   BlockRenderer,

package/dist/json-view/index.js

@@ -1,11 +1,11 @@
 import {
   JsonView,
   createJsonFormFenceRenderer
-} from "../chunk-KDTKUE53.js";
+} from "../chunk-L4LIIOU2.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-6PUMLLJH.js";
-import "../chunk-WLUZTUNZ.js";
-import "../chunk-LR3AIGDD.js";
+import "../chunk-2FZUFQO3.js";
+import "../chunk-QXZXQPL3.js";
+import "../chunk-63G5OJWY.js";
 export {
   JsonView,
   createJsonFormFenceRenderer

package/dist/layers/index.js

@@ -8,9 +8,9 @@ import {
   TextLayer,
   TreeLayer,
   VideoLayer
-} from "../chunk-WHVSQ42V.js";
-import "../chunk-WLUZTUNZ.js";
-import "../chunk-LR3AIGDD.js";
+} from "../chunk-PZCWGBRQ.js";
+import "../chunk-QXZXQPL3.js";
+import "../chunk-63G5OJWY.js";
 export {
   ImageLayer,
   MapLayer,