@bendyline/squisq-react 2.11.15 → 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-VUMNXXK4.js → chunk-622IA3KB.js}

@@ -1,28 +1,30 @@
 import {
-  BlockRenderer,
   LinearDocView
-} from "./chunk-P3FJ3YKS.js";
-import {
-  isCaptureDrivenVideo,
-  seekVideoToFrame
-} from "./chunk-WHVSQ42V.js";
+} from "./chunk-2VSD55NT.js";
 import {
   useAudioSync,
   useDocPlayback,
   useMediaSchedule,
   useViewportOrientation
-} from "./chunk-U2FIZWAL.js";
+} from "./chunk-SVVPYDV3.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-6PUMLLJH.js";
+} from "./chunk-2FZUFQO3.js";
+import {
+  BlockRenderer
+} from "./chunk-5FJZDX7H.js";
+import {
+  isCaptureDrivenVideo,
+  seekVideoToFrame
+} from "./chunk-PZCWGBRQ.js";
 import {
   useMediaProvider,
   useMediaUrl,
   useResourcePolicy
-} from "./chunk-LR3AIGDD.js";
+} from "./chunk-63G5OJWY.js";
 
 // src/MediaClipLayer.tsx
 import { useEffect, useRef } from "react";
@@ -2833,6 +2835,7 @@ function DocPlayerContent({
     blocks: expandedBlocks,
     suppressOutgoingForNextBlock
   } = useDocPlayback(doc, currentTime, {
+    basePath,
     viewport: activeViewport,
     theme: effectiveTheme,
     motion: motionProp,

package/dist/chunk-63G5OJWY.js

@@ -0,0 +1,123 @@
+// src/hooks/MediaContext.tsx
+import { createContext, useContext, useState, useEffect, useMemo } from "react";
+import {
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+  isResourceUrlAllowed
+} from "@bendyline/squisq/markdown";
+var MediaContext = createContext(null);
+var ResourcePolicyContext = createContext(
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY
+);
+function useResourcePolicy() {
+  return useContext(ResourcePolicyContext);
+}
+function useMediaProvider() {
+  return useContext(MediaContext);
+}
+function useMediaUrl(relativePath, basePath) {
+  const provider = useMediaProvider();
+  const resourcePolicy = useResourcePolicy();
+  const safePath = typeof relativePath === "string" ? relativePath : "";
+  const isAbsolute = !safePath || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(safePath);
+  const fallback = useMemo(() => {
+    const candidate = isAbsolute ? safePath : `${basePath.replace(/\/$/, "")}/${safePath}`;
+    return isResourceUrlAllowed(candidate, resourcePolicy) ? candidate : "";
+  }, [isAbsolute, safePath, basePath, resourcePolicy]);
+  const needsProvider = !isAbsolute && !!provider;
+  const [url, setUrl] = useState(fallback);
+  useEffect(() => {
+    if (!needsProvider) {
+      setUrl(fallback);
+      return;
+    }
+    let cancelled = false;
+    setUrl(fallback);
+    provider.resolveUrl(safePath).then(
+      (resolved) => {
+        if (!cancelled) {
+          setUrl(isResourceUrlAllowed(resolved, resourcePolicy) ? resolved : "");
+        }
+      },
+      () => {
+        if (!cancelled) setUrl(fallback);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [needsProvider, provider, safePath, fallback, resourcePolicy]);
+  return needsProvider ? url : fallback;
+}
+
+// src/mermaid/mermaidRuntime.ts
+import { buildMermaidThemeVariables } from "@bendyline/squisq/schemas";
+import { DEFAULT_THEME } from "@bendyline/squisq/doc";
+var mermaidPromise = null;
+var MERMAID_BASE_CONFIG = {
+  startOnLoad: false,
+  securityLevel: "strict",
+  suppressErrorRendering: true,
+  deterministicIds: false,
+  logLevel: "error"
+};
+async function loadMermaid() {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then(({ default: mermaid }) => mermaid).catch((error) => {
+      mermaidPromise = null;
+      throw error;
+    });
+  }
+  return mermaidPromise;
+}
+function enqueue(run) {
+  const host = globalThis;
+  const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
+  const result = previous.then(run, run);
+  host.__squisqMermaidWorkQueue = result.then(
+    () => void 0,
+    () => void 0
+  );
+  return result;
+}
+function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
+  return enqueue(async () => {
+    const mermaid = await loadMermaid();
+    mermaid.initialize({
+      ...MERMAID_BASE_CONFIG,
+      theme: "base",
+      themeVariables: buildMermaidThemeVariables(theme)
+    });
+    const { svg, diagramType } = await mermaid.render(id, source, container);
+    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.";
+}
+
+export {
+  MediaContext,
+  ResourcePolicyContext,
+  useResourcePolicy,
+  useMediaProvider,
+  useMediaUrl,
+  renderMermaidSvg,
+  renderMermaidSvgForExport,
+  mermaidRenderErrorMessage
+};

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

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

package/dist/{chunk-7T26IKW2.js → chunk-PSAO2CTF.js}

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

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

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

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

@@ -1,62 +1,18 @@
+import {
+  mermaidRenderErrorMessage,
+  renderMermaidSvg
+} from "./chunk-63G5OJWY.js";
+
 // src/mermaid/MermaidDiagram.tsx
 import { useEffect, useState } from "react";
-import { DEFAULT_THEME as DEFAULT_THEME2 } from "@bendyline/squisq/doc";
-
-// src/mermaid/mermaidRuntime.ts
-import { buildMermaidThemeVariables } from "@bendyline/squisq/schemas";
 import { DEFAULT_THEME } from "@bendyline/squisq/doc";
-var mermaidPromise = null;
-var MERMAID_BASE_CONFIG = {
-  startOnLoad: false,
-  securityLevel: "strict",
-  suppressErrorRendering: true,
-  deterministicIds: false,
-  logLevel: "error"
-};
-async function loadMermaid() {
-  if (!mermaidPromise) {
-    mermaidPromise = import("mermaid").then(({ default: mermaid }) => mermaid).catch((error) => {
-      mermaidPromise = null;
-      throw error;
-    });
-  }
-  return mermaidPromise;
-}
-function enqueue(run) {
-  const host = globalThis;
-  const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
-  const result = previous.then(run, run);
-  host.__squisqMermaidWorkQueue = result.then(
-    () => void 0,
-    () => void 0
-  );
-  return result;
-}
-function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
-  return enqueue(async () => {
-    const mermaid = await loadMermaid();
-    mermaid.initialize({
-      ...MERMAID_BASE_CONFIG,
-      theme: "base",
-      themeVariables: buildMermaidThemeVariables(theme)
-    });
-    const { svg, diagramType } = await mermaid.render(id, source, container);
-    return { svg, diagramType };
-  });
-}
-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.";
-}
-
-// src/mermaid/MermaidDiagram.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var renderSequence = 0;
 function MermaidDiagram({
   source,
   className,
   ariaLabel = "Mermaid diagram",
-  theme = DEFAULT_THEME2
+  theme = DEFAULT_THEME
 }) {
   const [svg, setSvg] = useState("");
   const [error, setError] = useState("");