@bendyline/squisq-react 2.11.2 → 2.11.3

package/dist/{chunk-4MP7CH3C.js → chunk-XSOMFBH2.js}

@@ -365,7 +365,7 @@ function iconRunsToHtml(text) {
     (run) => run.type === "icon" ? `<i class="${iconClass(run.family, run.name)}" aria-hidden="true"></i>` : escapeHtml(run.text).replace(/\n/g, "<br>")
   ).join("");
 }
-function IconTextLayer({ layer, viewport, blockTime }) {
+function IconTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
   const { content, position, animation } = layer;
   const { text, style } = content;
   const rawX = resolveValue(position.x, viewport.width);
@@ -392,7 +392,7 @@ function IconTextLayer({ layer, viewport, blockTime }) {
     justifyContent: verticalJustify,
     padding,
     color: style.color,
-    fontSize: `${style.fontSize}px`,
+    fontSize: `${style.fontSize * textScale}px`,
     fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
     fontWeight: style.fontWeight || "normal",
     fontStyle: style.fontStyle || "normal",
@@ -413,10 +413,13 @@ function IconTextLayer({ layer, viewport, blockTime }) {
         "div",
         {
           ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          "data-squisq-text-fit": "html",
+          "data-squisq-base-font-size": style.fontSize,
           style: boxStyle,
           children: /* @__PURE__ */ jsx3(
             "div",
             {
+              "data-squisq-text-content": "true",
               style: { width: "100%", whiteSpace: "pre-wrap", wordBreak: "break-word" },
               "aria-label": plain,
               dangerouslySetInnerHTML: { __html: html }
@@ -427,7 +430,7 @@ function IconTextLayer({ layer, viewport, blockTime }) {
     }
   ) });
 }
-function PlainTextLayer({ layer, viewport, blockTime }) {
+function PlainTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
   const defsId = `${useId().replace(/:/g, "")}-${layer.id}`;
   const { content, position, animation } = layer;
   const { text, style } = content;
@@ -441,6 +444,8 @@ function PlainTextLayer({ layer, viewport, blockTime }) {
   const anchor = position.anchor ?? "top-left";
   const x = pivotX(rawX, boxWidth, anchor, textAnchor);
   const y = pivotY(rawY, boxHeight, anchor, dominantBaseline);
+  const fitWidth = boxWidth ?? (textAnchor === "middle" ? Math.max(0, Math.min(x, viewport.width - x) * 2) : textAnchor === "end" ? Math.max(0, x) : Math.max(0, viewport.width - x));
+  const fitHeight = boxHeight ?? (dominantBaseline === "middle" ? Math.max(0, Math.min(y, viewport.height - y) * 2) : dominantBaseline === "text-after-edge" ? Math.max(0, y) : Math.max(0, viewport.height - y));
   const animStyle = getAnimationStyle(animation, blockTime);
   const rawLines = (text ?? "").split("\n");
   let lines = maxWidth ? rawLines.reduce(
@@ -533,25 +538,39 @@ function PlainTextLayer({ layer, viewport, blockTime }) {
       }
     ),
     /* @__PURE__ */ jsx3(
-      "text",
+      "g",
       {
-        ref: textRef,
-        x,
-        y,
-        textAnchor,
-        dominantBaseline,
-        style: textStyles,
-        filter: filterId ? `url(#${filterId})` : void 0,
-        transform: fitTransform,
-        children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? firstLineDy : lineHeightPx, children: [
-          line || "\xA0",
-          " "
-        ] }, i))
+        "data-squisq-text-fit": "svg",
+        "data-squisq-fit-width": fitWidth,
+        "data-squisq-fit-height": fitHeight,
+        style: {
+          transform: `scale(${textScale})`,
+          transformOrigin: `${x}px ${y}px`,
+          transformBox: "view-box"
+        },
+        children: /* @__PURE__ */ jsx3(
+          "text",
+          {
+            ref: textRef,
+            "data-squisq-text-content": "true",
+            x,
+            y,
+            textAnchor,
+            dominantBaseline,
+            style: textStyles,
+            filter: filterId ? `url(#${filterId})` : void 0,
+            transform: fitTransform,
+            children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tspan", { x, dy: i === 0 ? firstLineDy : lineHeightPx, children: [
+              line || "\xA0",
+              " "
+            ] }, i))
+          }
+        )
       }
     )
   ] });
 }
-function RichTextLayer({ layer, viewport, blockTime }) {
+function RichTextLayer({ layer, viewport, blockTime, textScale = 1 }) {
   const { content, position, animation } = layer;
   const { html, style } = content;
   const rawX = resolveValue(position.x, viewport.width);
@@ -577,7 +596,7 @@ function RichTextLayer({ layer, viewport, blockTime }) {
     justifyContent: verticalJustify,
     padding: style.padding ?? 0,
     color: style.color,
-    fontSize: `${style.fontSize}px`,
+    fontSize: `${style.fontSize * textScale}px`,
     fontFamily: style.fontFamily || DEFAULT_DOC_FONT,
     fontWeight: style.fontWeight || "normal",
     fontStyle: style.fontStyle || "normal",
@@ -594,7 +613,11 @@ function RichTextLayer({ layer, viewport, blockTime }) {
   };
   const cls = `squisq-rich-text-${cssId(layer.id)}`;
   const listStylePosition = style.textAlign === "center" || style.textAlign === "right" ? "inside" : "outside";
-  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .7em;padding-left:1.2em;list-style-position:${listStylePosition}}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} table{width:100%;margin:.65em 0;border-collapse:collapse;border-spacing:0;table-layout:fixed}.${cls} th,.${cls} td{box-sizing:border-box;padding:.38em .55em;border:1px solid rgba(127,127,127,.55);border-color:color-mix(in srgb,currentColor 32%,transparent);vertical-align:top;white-space:normal;overflow-wrap:anywhere}.${cls} th{background:rgba(127,127,127,.16);background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600}.${cls} tbody tr:nth-child(even){background:rgba(127,127,127,.07);background:color-mix(in srgb,currentColor 5%,transparent)}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
+  const stopEmbeddedTableEvent = (event) => {
+    const target = event.target;
+    if (target?.closest?.("[data-squisq-table-scroll]")) event.stopPropagation();
+  };
+  const scopedCss = `.${cls}{margin:0}.${cls} p{margin:0 0 .4em}.${cls} h1,.${cls} h2,.${cls} h3,.${cls} h4,.${cls} h5,.${cls} h6{margin:0 0 .3em;line-height:1.2}.${cls} ul,.${cls} ol{margin:0 0 .7em;padding-left:1.2em;list-style-position:${listStylePosition}}.${cls} li{margin:0}.${cls} li>p{display:inline;margin:0}.${cls} [data-squisq-table-scroll]{width:100%;max-height:20em;margin:.35em 0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.${cls} table{width:100%;min-width:48em;margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.76em;line-height:1.2}.${cls} th,.${cls} td{box-sizing:border-box;padding:.28em .45em;border:1px solid rgba(127,127,127,.55);border-color:color-mix(in srgb,currentColor 32%,transparent);vertical-align:top;white-space:normal;overflow-wrap:anywhere}.${cls} th{position:sticky;top:0;z-index:1;background:rgba(127,127,127,.16);background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600}.${cls} tbody tr:nth-child(even){background:rgba(127,127,127,.07);background:color-mix(in srgb,currentColor 5%,transparent)}.${cls} *:first-child{margin-top:0}.${cls} *:last-child{margin-bottom:0}.${cls} a{color:inherit;text-decoration:underline}`;
   return /* @__PURE__ */ jsx3("g", { className: `block-layer block-layer--text ${animStyle.className}`, "data-layer-id": layer.id, children: /* @__PURE__ */ jsx3(
     "foreignObject",
     {
@@ -608,12 +631,19 @@ function RichTextLayer({ layer, viewport, blockTime }) {
         "div",
         {
           ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          "data-squisq-text-fit": "html",
+          "data-squisq-base-font-size": style.fontSize,
           style: boxStyle,
+          onPointerDown: stopEmbeddedTableEvent,
+          onClick: stopEmbeddedTableEvent,
+          onWheel: stopEmbeddedTableEvent,
+          onKeyDown: stopEmbeddedTableEvent,
           children: [
             /* @__PURE__ */ jsx3("style", { children: scopedCss }),
             /* @__PURE__ */ jsx3(
               "div",
               {
+                "data-squisq-text-content": "true",
                 className: cls,
                 "aria-label": content.text,
                 style: {
@@ -761,25 +791,31 @@ function ShapeLayer({ layer, viewport, blockTime }) {
   const fill = content.fill || "none";
   const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
   if (content.shape === "rect" && isCSSGradient && !content.gradient) {
-    return /* @__PURE__ */ jsx4(
-      "g",
-      {
-        className: `block-layer block-layer--shape ${animStyle.className}`,
-        style: animStyle.style,
-        "data-layer-id": layer.id,
-        children: /* @__PURE__ */ jsx4("foreignObject", { x: paintX, y: paintY, width: paintWidth, height: paintHeight, children: /* @__PURE__ */ jsx4(
-          "div",
-          {
-            style: {
-              width: `${paintWidth}px`,
-              height: `${paintHeight}px`,
-              background: fill,
-              borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
-              pointerEvents: "none"
+    return (
+      // Shape layers are visual primitives. In particular, theme top-layers
+      // can cover the whole slide; they must not shield interactive table,
+      // map, or media layers underneath them from pointer/wheel input.
+      /* @__PURE__ */ jsx4(
+        "g",
+        {
+          className: `block-layer block-layer--shape ${animStyle.className}`,
+          style: animStyle.style,
+          "data-layer-id": layer.id,
+          pointerEvents: "none",
+          children: /* @__PURE__ */ jsx4("foreignObject", { x: paintX, y: paintY, width: paintWidth, height: paintHeight, children: /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                width: `${paintWidth}px`,
+                height: `${paintHeight}px`,
+                background: fill,
+                borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
+                pointerEvents: "none"
+              }
             }
-          }
-        ) })
-      }
+          ) })
+        }
+      )
     );
   }
   const { fill: fillValue, def: fillDef } = resolveFill(
@@ -798,52 +834,57 @@ function ShapeLayer({ layer, viewport, blockTime }) {
     strokeDasharray: dash,
     ...filterAttr ? { filter: filterAttr } : {}
   };
-  return /* @__PURE__ */ jsxs3(
-    "g",
-    {
-      className: `block-layer block-layer--shape ${animStyle.className}`,
-      style: animStyle.style,
-      "data-layer-id": layer.id,
-      children: [
-        (fillDef || filterDef) && /* @__PURE__ */ jsxs3("defs", { children: [
-          fillDef,
-          filterDef
-        ] }),
-        content.shape === "rect" && /* @__PURE__ */ jsx4(
-          "rect",
-          {
-            x: paintX,
-            y: paintY,
-            width: paintWidth,
-            height: paintHeight,
-            rx: content.borderRadius,
-            ry: content.borderRadius,
-            ...shapeProps
-          }
-        ),
-        content.shape === "circle" && /* @__PURE__ */ jsx4(
-          "circle",
-          {
-            cx: x + width / 2,
-            cy: y + height / 2,
-            r: Math.min(width, height) / 2,
-            ...shapeProps
-          }
-        ),
-        content.shape === "line" && /* @__PURE__ */ jsx4(
-          "line",
-          {
-            x1: x,
-            y1: y,
-            x2: x + width,
-            y2: y + height,
-            stroke: content.stroke || "#ffffff",
-            strokeWidth: content.strokeWidth || 2,
-            strokeDasharray: dash
-          }
-        )
-      ]
-    }
+  return (
+    // Native SVG shapes follow the same visual-only interaction contract as
+    // the foreignObject gradient branch above.
+    /* @__PURE__ */ jsxs3(
+      "g",
+      {
+        className: `block-layer block-layer--shape ${animStyle.className}`,
+        style: animStyle.style,
+        "data-layer-id": layer.id,
+        pointerEvents: "none",
+        children: [
+          (fillDef || filterDef) && /* @__PURE__ */ jsxs3("defs", { children: [
+            fillDef,
+            filterDef
+          ] }),
+          content.shape === "rect" && /* @__PURE__ */ jsx4(
+            "rect",
+            {
+              x: paintX,
+              y: paintY,
+              width: paintWidth,
+              height: paintHeight,
+              rx: content.borderRadius,
+              ry: content.borderRadius,
+              ...shapeProps
+            }
+          ),
+          content.shape === "circle" && /* @__PURE__ */ jsx4(
+            "circle",
+            {
+              cx: x + width / 2,
+              cy: y + height / 2,
+              r: Math.min(width, height) / 2,
+              ...shapeProps
+            }
+          ),
+          content.shape === "line" && /* @__PURE__ */ jsx4(
+            "line",
+            {
+              x1: x,
+              y1: y,
+              x2: x + width,
+              y2: y + height,
+              stroke: content.stroke || "#ffffff",
+              strokeWidth: content.strokeWidth || 2,
+              strokeDasharray: dash
+            }
+          )
+        ]
+      }
+    )
   );
 }
 
@@ -1395,9 +1436,17 @@ function VideoLayer({
 
 // src/layers/TableLayer.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function TableLayer({ layer, viewport, blockTime }) {
+function TableLayer({
+  block,
+  layer,
+  viewport,
+  blockTime,
+  contentRenderer
+}) {
   const { content, position, animation } = layer;
-  const { headers, rows, align, style } = content;
+  const { align, style } = content;
+  const headers = Array.isArray(content.headers) ? content.headers : [];
+  const rows = Array.isArray(content.rows) ? content.rows : [];
   const x = resolveValue(position.x, viewport.width);
   const y = resolveValue(position.y, viewport.height);
   const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
@@ -1411,6 +1460,62 @@ function TableLayer({ layer, viewport, blockTime }) {
     return a ? { textAlign: a } : void 0;
   };
   const borderRadius = style.borderRadius ?? 8;
+  const verticalCellPadding = style.fontSize * 0.6;
+  const horizontalCellPadding = style.fontSize * 0.75;
+  const nativeTable = /* @__PURE__ */ jsxs6(
+    "table",
+    {
+      style: {
+        width: "max-content",
+        minWidth: "100%",
+        borderCollapse: "separate",
+        borderSpacing: 0,
+        fontSize: `${style.fontSize}px`,
+        fontFamily: style.fontFamily ?? "system-ui, sans-serif",
+        lineHeight: 1.2
+      },
+      children: [
+        headers.length > 0 && /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx8(
+          "th",
+          {
+            style: {
+              background: style.headerBackground,
+              color: style.headerColor,
+              fontFamily: style.headerFontFamily ?? style.fontFamily ?? "system-ui, sans-serif",
+              fontWeight: 600,
+              padding: `${verticalCellPadding}px ${horizontalCellPadding}px`,
+              position: "sticky",
+              top: 0,
+              zIndex: 1,
+              whiteSpace: "nowrap",
+              borderBottom: `2px solid ${style.borderColor}`,
+              borderRight: ci < headers.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+              ...cellAlign(ci)
+            },
+            children: header
+          },
+          ci
+        )) }) }),
+        rows.length > 0 && /* @__PURE__ */ jsx8("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx8("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx8(
+          "td",
+          {
+            style: {
+              background: style.cellBackground,
+              color: style.cellColor,
+              padding: `${verticalCellPadding}px ${horizontalCellPadding}px`,
+              whiteSpace: "nowrap",
+              borderBottom: ri < rows.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+              borderRight: ci < row.length - 1 ? `1px solid ${style.borderColor}` : void 0,
+              ...cellAlign(ci)
+            },
+            children: cell
+          },
+          ci
+        )) }, ri)) })
+      ]
+    }
+  );
+  const ContentRenderer = block ? contentRenderer : void 0;
   return /* @__PURE__ */ jsx8(
     "g",
     {
@@ -1421,64 +1526,35 @@ function TableLayer({ layer, viewport, blockTime }) {
         "div",
         {
           ...{ xmlns: "http://www.w3.org/1999/xhtml" },
+          className: "squisq-table-scroll",
+          role: "region",
+          "aria-label": "Scrollable data table",
+          tabIndex: 0,
+          onPointerDown: (event) => event.stopPropagation(),
+          onClick: (event) => event.stopPropagation(),
+          onWheel: (event) => event.stopPropagation(),
+          onKeyDown: (event) => event.stopPropagation(),
           style: {
             width: `${width}px`,
             height: `${height}px`,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "16px",
-            boxSizing: "border-box"
+            boxSizing: "border-box",
+            overflow: ContentRenderer ? "hidden" : "auto",
+            overscrollBehavior: "contain",
+            scrollbarGutter: "stable",
+            border: ContentRenderer ? void 0 : `1px solid ${style.borderColor}`,
+            borderRadius: `${borderRadius}px`,
+            background: ContentRenderer ? "transparent" : style.cellBackground
           },
-          children: /* @__PURE__ */ jsxs6(
-            "table",
+          children: ContentRenderer ? /* @__PURE__ */ jsx8(
+            ContentRenderer,
             {
-              style: {
-                width: "100%",
-                borderCollapse: "separate",
-                borderSpacing: 0,
-                fontSize: `${style.fontSize}px`,
-                fontFamily: style.fontFamily ?? "system-ui, sans-serif",
-                overflow: "hidden",
-                borderRadius: `${borderRadius}px`,
-                border: `1px solid ${style.borderColor}`
-              },
-              children: [
-                headers.length > 0 && /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: headers.map((header, ci) => /* @__PURE__ */ jsx8(
-                  "th",
-                  {
-                    style: {
-                      background: style.headerBackground,
-                      color: style.headerColor,
-                      fontFamily: style.headerFontFamily ?? style.fontFamily ?? "system-ui, sans-serif",
-                      fontWeight: 600,
-                      padding: "12px 16px",
-                      borderBottom: `2px solid ${style.borderColor}`,
-                      borderRight: ci < headers.length - 1 ? `1px solid ${style.borderColor}` : void 0,
-                      ...cellAlign(ci)
-                    },
-                    children: header
-                  },
-                  ci
-                )) }) }),
-                rows.length > 0 && /* @__PURE__ */ jsx8("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx8("tr", { children: row.map((cell, ci) => /* @__PURE__ */ jsx8(
-                  "td",
-                  {
-                    style: {
-                      background: style.cellBackground,
-                      color: style.cellColor,
-                      padding: "10px 16px",
-                      borderBottom: ri < rows.length - 1 ? `1px solid ${style.borderColor}` : void 0,
-                      borderRight: ci < row.length - 1 ? `1px solid ${style.borderColor}` : void 0,
-                      ...cellAlign(ci)
-                    },
-                    children: cell
-                  },
-                  ci
-                )) }, ri)) })
-              ]
+              block,
+              layer,
+              width,
+              height,
+              fallback: nativeTable
             }
-          )
+          ) : nativeTable
         }
       ) })
     }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-DSMhm8SL.js';
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as SlideNavActions, G as SocialCaptionOverlay, H as formatTime } from './player-DSMhm8SL.js';
+import { S as SquisqRenderAPI, V as VideoPresentation$1, P as PipSize, a as PipShape, b as PipPosition } from './player-BlD8zREs.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, e as CaptionPosition, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as SlideNavActions, G as SocialCaptionOverlay, H as formatTime } from './player-BlD8zREs.js';
 import { Theme, VideoPresentation, VideoPipSize, VideoPipShape, VideoPipPosition, Doc, ScheduledClip, MediaProvider } from '@bendyline/squisq/schemas';
 import { DashboardStyleId, ViewportConfig, CoverSlideTemplate, CoverSlidePlayback } from '@bendyline/squisq/doc';
 export { getAnimationStyle, getTransitionClass } from '@bendyline/squisq/doc';
@@ -8,7 +8,8 @@ export { a as CodeBlockCopyContext, M as MarkdownRenderer, b as MarkdownRenderer
 export { FenceRendererContext, MermaidDiagram, MermaidDiagramProps, useFenceRenderers } from './markdown/index.js';
 export { CanvasSection, CanvasSectionProps, ImageDisplayMode, LinearDocView, LinearDocViewProps, PageSectionView, PageSectionViewProps, PageViewContext, PageViewContextValue, usePageView } from './page/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TableLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
+export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TextLayer, TreeLayer, VideoLayer } from './layers/index.js';
+export { T as TableLayer, a as TableLayerContentRenderer, b as TableLayerContentRendererProps } from './TableLayer-B7ADuUGc.js';
 export { MediaContext, MediaScheduleController, ModalDialogOptions, ResourcePolicyContext, UseDocPlaybackOptions, useAudioSync, useAutoSurface, useDocPlayback, useMediaProvider, useMediaSchedule, useMediaUrl, useModalDialog, useResourcePolicy, useViewportOrientation } from './hooks/index.js';
 export { FenceRenderContext, FenceRenderer, FenceRendererMap } from '@bendyline/squisq/fence';
 export { A as AudioActions, a as AudioController, b as AudioState } from './AudioController-DwMsPe38.js';

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-HK7TY64K.js";
+} from "./chunk-KGWT454C.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -23,7 +23,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-ZC7LI5UF.js";
+} from "./chunk-5UGIE2QO.js";
 import {
   ImageLayer,
   MapLayer,
@@ -36,7 +36,7 @@ import {
   VideoLayer,
   getAnimationStyle,
   getTransitionClass
-} from "./chunk-4MP7CH3C.js";
+} from "./chunk-XSOMFBH2.js";
 import {
   useModalDialog
 } from "./chunk-65POMKHR.js";

package/dist/layers/index.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageLayer as ImageLayer$1, TextLayer as TextLayer$1, ShapeLayer as ShapeLayer$1, PathLayer as PathLayer$1, VideoLayer as VideoLayer$1, TableLayer as TableLayer$1, TreeLayer as TreeLayer$1, MapLayer as MapLayer$1, MermaidLayer as MermaidLayer$1, Theme } from '@bendyline/squisq/schemas';
+import { ImageLayer as ImageLayer$1, TextLayer as TextLayer$1, ShapeLayer as ShapeLayer$1, PathLayer as PathLayer$1, VideoLayer as VideoLayer$1, TreeLayer as TreeLayer$1, MapLayer as MapLayer$1, MermaidLayer as MermaidLayer$1, Theme } from '@bendyline/squisq/schemas';
+export { T as TableLayer, a as TableLayerContentRenderer, b as TableLayerContentRendererProps } from '../TableLayer-B7ADuUGc.js';
+import 'react';
 
 interface ImageLayerProps {
     layer: ImageLayer$1;
@@ -26,6 +28,8 @@ interface TextLayerProps {
     };
     /** Current time relative to block start */
     blockTime: number;
+    /** Shared scale selected once for every text layer on this slide. */
+    textScale?: number;
 }
 /**
  * Dispatch between the plain SVG-text renderer and the rich HTML renderer
@@ -75,18 +79,6 @@ interface VideoLayerProps {
 }
 declare function VideoLayer({ layer, basePath, viewport, blockTime, isPlaying, muted, }: VideoLayerProps): react_jsx_runtime.JSX.Element;
 
-interface TableLayerProps {
-    layer: TableLayer$1;
-    /** Viewport dimensions for percentage calculations */
-    viewport: {
-        width: number;
-        height: number;
-    };
-    /** Current time relative to block start (for animation) */
-    blockTime: number;
-}
-declare function TableLayer({ layer, viewport, blockTime }: TableLayerProps): react_jsx_runtime.JSX.Element;
-
 interface TreeLayerProps {
     layer: TreeLayer$1;
     viewport: {
@@ -123,4 +115,4 @@ interface MermaidLayerProps {
 /** Mermaid diagram hosted in HTML inside the slide SVG. */
 declare function MermaidLayer({ layer, viewport, blockTime, theme }: MermaidLayerProps): react_jsx_runtime.JSX.Element;
 
-export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TableLayer, TextLayer, TreeLayer, VideoLayer };
+export { ImageLayer, MapLayer, MermaidLayer, PathLayer, ShapeLayer, TextLayer, TreeLayer, VideoLayer };

package/dist/layers/index.js

@@ -8,7 +8,7 @@ import {
   TextLayer,
   TreeLayer,
   VideoLayer
-} from "../chunk-4MP7CH3C.js";
+} from "../chunk-XSOMFBH2.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/page/index.js

@@ -4,8 +4,8 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-ZC7LI5UF.js";
-import "../chunk-4MP7CH3C.js";
+} from "../chunk-5UGIE2QO.js";
+import "../chunk-XSOMFBH2.js";
 import "../chunk-TT6ENR6T.js";
 import "../chunk-ZY5N3JPM.js";
 import "../chunk-WLUZTUNZ.js";

package/dist/player/index.d.ts

@@ -1,9 +1,10 @@
-export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as SlideNavActions, G as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, H as formatTime } from '../player-DSMhm8SL.js';
+export { B as BlockMarker, c as BlockRenderer, C as CaptionMode, d as CaptionOverlay, f as CaptionStyle, g as ControlsLayout, D as DisplayMode, h as DocControlsBottom, i as DocControlsOverlay, j as DocControlsSidebar, k as DocControlsSlideshow, l as DocPlayer, m as DocPlayerProps, n as DocPlayerWithSidebar, o as DocProgressBar, F as FlashcardFaceView, p as FlashcardFaceViewProps, q as FlashcardView, r as FlashcardViewProps, I as InlineAudioPlayer, s as InlineAudioPlayerProps, t as InlineVideoPlayer, u as InlineVideoPlayerProps, M as MediaClipLayer, v as MediaClipLayerProps, b as PipPosition, a as PipShape, P as PipSize, w as PlaybackActions, x as PlaybackState, R as RenderAudioSegmentInfo, y as RenderBlockInfo, z as RenderCaptionInfo, A as RenderChapterInfo, E as SlideNavActions, G as SocialCaptionOverlay, S as SquisqRenderAPI, V as VideoPresentation, H as formatTime } from '../player-BlD8zREs.js';
 export { a as CodeBlockCopyContext, C as CodeBlockCopyHandler } from '../MarkdownRenderer-CC9dOc6b.js';
 import 'react/jsx-runtime';
 import '@bendyline/squisq/schemas';
 import '@bendyline/squisq/doc';
 import '@bendyline/squisq/fence';
 import '../AudioController-DwMsPe38.js';
+import '../TableLayer-B7ADuUGc.js';
 import 'react';
 import '@bendyline/squisq/markdown';

package/dist/player/index.js

@@ -12,11 +12,11 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-HK7TY64K.js";
+} from "../chunk-KGWT454C.js";
 import {
   BlockRenderer
-} from "../chunk-ZC7LI5UF.js";
-import "../chunk-4MP7CH3C.js";
+} from "../chunk-5UGIE2QO.js";
+import "../chunk-XSOMFBH2.js";
 import "../chunk-MVJQL2W2.js";
 import "../chunk-TT6ENR6T.js";
 import {

package/dist/{player-DSMhm8SL.d.ts → player-BlD8zREs.d.ts}

@@ -4,6 +4,7 @@ import { ViewportConfig, DashboardStyleId, CoverSlideTemplate, CoverSlidePlaybac
 import { FenceRendererMap } from '@bendyline/squisq/fence';
 import { a as AudioController } from './AudioController-DwMsPe38.js';
 import { C as CodeBlockCopyHandler } from './MarkdownRenderer-CC9dOc6b.js';
+import { a as TableLayerContentRenderer } from './TableLayer-B7ADuUGc.js';
 import { CSSProperties } from 'react';
 
 /**
@@ -281,6 +282,8 @@ interface DocPlayerProps {
      * as SVG layers and do not consult it.
      */
     fenceRenderers?: FenceRendererMap;
+    /** Optional host renderer for interactive table-layer content. */
+    tableContentRenderer?: TableLayerContentRenderer;
 }
 
 /**
@@ -323,8 +326,12 @@ interface BlockRendererProps {
     animationsEnabled?: boolean;
     /** Resolved theme inherited by rich-media renderers such as Mermaid. */
     theme?: Theme;
+    /** Optional host renderer for interactive table content. */
+    tableContentRenderer?: TableLayerContentRenderer;
+    /** Grow all slide text by one shared factor without overflow or new overlap. */
+    growTextToFit?: boolean;
 }
-declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, transition, viewport, isPlaying, muted, animationsEnabled, theme, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
+declare function BlockRenderer({ block, blockTime, basePath, isEntering, isExiting, transition, viewport, isPlaying, muted, animationsEnabled, theme, tableContentRenderer, growTextToFit, }: BlockRendererProps): react_jsx_runtime.JSX.Element;
 
 interface CaptionOverlayProps {
     /** Caption track with timestamped phrases */