@bendyline/squisq-react 2.11.2 → 2.11.3

package/dist/TableLayer-B7ADuUGc.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+import { Block, TableLayer as TableLayer$1 } from '@bendyline/squisq/schemas';
+
+interface TableLayerContentRendererProps {
+    /** Owning block, including sourceBlockId for transformed projections. */
+    block: Block;
+    layer: TableLayer$1;
+    width: number;
+    height: number;
+    /** Native themed table used while custom data is unavailable. */
+    fallback: ReactNode;
+}
+type TableLayerContentRenderer = ComponentType<TableLayerContentRendererProps>;
+interface TableLayerProps {
+    /** Owning block (custom renderers use its id to resolve sidecar data). */
+    block?: Block;
+    layer: TableLayer$1;
+    /** Viewport dimensions for percentage calculations */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** Current time relative to block start (for animation) */
+    blockTime: number;
+    /** Optional host renderer for interactive table content. */
+    contentRenderer?: TableLayerContentRenderer;
+}
+declare function TableLayer({ block, layer, viewport, blockTime, contentRenderer, }: TableLayerProps): react_jsx_runtime.JSX.Element;
+
+export { TableLayer as T, type TableLayerContentRenderer as a, type TableLayerContentRendererProps as b };

package/dist/{chunk-ZC7LI5UF.js → chunk-5UGIE2QO.js}

@@ -9,7 +9,7 @@ import {
   TreeLayer,
   VideoLayer,
   getTransitionClass
-} from "./chunk-4MP7CH3C.js";
+} from "./chunk-XSOMFBH2.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -22,13 +22,93 @@ import {
 } from "./chunk-LR3AIGDD.js";
 
 // src/BlockRenderer.tsx
-import { useId } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import { resolveTransitionDuration } from "@bendyline/squisq/schemas";
+
+// 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,
@@ -40,7 +120,9 @@ function BlockRenderer({
   isPlaying,
   muted = false,
   animationsEnabled = true,
-  theme
+  theme,
+  tableContentRenderer,
+  growTextToFit = false
 }) {
   let transitionClass = "";
   const transitionStyle = {};
@@ -54,20 +136,63 @@ function BlockRenderer({
   }
   const instanceId = useId().replace(/:/g, "");
   const clipId = `vb-clip-${instanceId}-${block.id}`;
+  const svgRef = useRef(null);
+  const [textScale, setTextScale] = useState(1);
+  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 (!growTextToFit || 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, growTextToFit, 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": growTextToFit ? 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,
@@ -75,7 +200,9 @@ function BlockRenderer({
             isPlaying,
             muted,
             animationsEnabled,
-            theme
+            theme,
+            tableContentRenderer,
+            textScale
           },
           layer.id
         )) })
@@ -84,6 +211,7 @@ function BlockRenderer({
   );
 }
 function LayerRenderer({
+  block,
   layer,
   basePath,
   viewport,
@@ -91,7 +219,9 @@ function LayerRenderer({
   isPlaying,
   muted,
   animationsEnabled,
-  theme
+  theme,
+  tableContentRenderer,
+  textScale
 }) {
   const renderedLayer = animationsEnabled || !layer.animation ? layer : { ...layer, animation: void 0 };
   switch (renderedLayer.type) {
@@ -107,7 +237,15 @@ function LayerRenderer({
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx(TextLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx(
+        TextLayer,
+        {
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          textScale
+        }
+      );
     case "shape":
       return /* @__PURE__ */ jsx(ShapeLayer, { layer: renderedLayer, viewport, blockTime });
     case "path":
@@ -135,7 +273,16 @@ function LayerRenderer({
         }
       );
     case "table":
-      return /* @__PURE__ */ jsx(TableLayer, { layer: renderedLayer, viewport, blockTime });
+      return /* @__PURE__ */ jsx(
+        TableLayer,
+        {
+          block,
+          layer: renderedLayer,
+          viewport,
+          blockTime,
+          contentRenderer: tableContentRenderer
+        }
+      );
     case "tree":
       return /* @__PURE__ */ jsx(TreeLayer, { layer: renderedLayer, viewport, blockTime });
     case "mermaid":
@@ -625,7 +772,7 @@ function PageSectionView({ entry, featureFlip, isLeadProse }) {
 }
 
 // src/LinearDocView.tsx
-import { useEffect, useMemo as useMemo2, useRef } from "react";
+import { useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
 import {
   applySurface,
   resolveFontFamily
@@ -663,7 +810,7 @@ function LinearDocView({
   htmlPolicy,
   linkSchemes
 }) {
-  const scrollRef = useRef(null);
+  const scrollRef = useRef2(null);
   const activeViewport = viewport ?? VIEWPORT_PRESETS2.landscape;
   const markdownDoc = useMemo2(
     () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,

package/dist/{chunk-HK7TY64K.js → chunk-KGWT454C.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-ZC7LI5UF.js";
+} from "./chunk-5UGIE2QO.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -2693,7 +2693,8 @@ function DocPlayerContent({
   globalKeyboardShortcuts = false,
   showCodeCopyButton = false,
   onCopyCode,
-  fenceRenderers
+  fenceRenderers,
+  tableContentRenderer
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
@@ -3600,7 +3601,9 @@ function DocPlayerContent({
               viewport: activeViewport,
               muted: renderMode || muted,
               animationsEnabled,
-              theme: effectiveTheme
+              theme: effectiveTheme,
+              tableContentRenderer,
+              growTextToFit: isSlideshowMode
             }
           ) }),
           animationsEnabled && !showCoverBlock && previousBlock && isExiting && // Keyed by block id so each block is its own DOM subtree: React never
@@ -3618,7 +3621,9 @@ function DocPlayerContent({
               viewport: activeViewport,
               muted: renderMode || muted,
               animationsEnabled,
-              theme: effectiveTheme
+              theme: effectiveTheme,
+              tableContentRenderer,
+              growTextToFit: isSlideshowMode
             }
           ) }, previousBlock.id),
           currentBlock && /* @__PURE__ */ jsx9(
@@ -3641,7 +3646,9 @@ function DocPlayerContent({
                   isPlaying,
                   muted: renderMode || muted,
                   animationsEnabled,
-                  theme: effectiveTheme
+                  theme: effectiveTheme,
+                  tableContentRenderer,
+                  growTextToFit: isSlideshowMode
                 }
               )
             },