@bendyline/squisq-react 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-react",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "React component library for doc playback, block rendering, and media layers",
   "license": "MIT",
   "author": "Bendyline",
@@ -52,7 +52,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "1.2.1"
+    "@bendyline/squisq": "1.2.2"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/DocPlayer.tsx

@@ -323,11 +323,17 @@ export function DocPlayer({
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode) {
       coverWasShowing.current = false;
       setCoverGraceActive(true);
+      // Intentionally no cleanup: if coverBlock's memoized reference changes
+      // mid-grace (e.g., due to a preview re-render), clearing the timer would
+      // leave coverGraceActive stuck at true because the effect body won't
+      // re-run (coverWasShowing.current is now false).
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3000);
-      return () => clearTimeout(coverGraceTimer.current);
     }
   }, [isPlaying, coverBlock, renderMode]);
 
+  // Always clear the grace timer on unmount
+  useEffect(() => () => clearTimeout(coverGraceTimer.current), []);
+
   // Determine if we should show the cover block
   // Show cover when: has cover block, not playing, at time 0, not in render mode
   // OR during the grace period after first play, OR when coverForced (render mode)

package/src/LinearDocView.tsx

@@ -257,8 +257,10 @@ function getTemplateDefaults(
       return { fact: headingText, explanation: bodyText || headingText };
     case 'comparisonBar':
       return { leftLabel: 'A', leftValue: 60, rightLabel: 'B', rightValue: 40 };
-    case 'listBlock':
-      return { items: extractListItems(contents) || ['Item 1', 'Item 2', 'Item 3'] };
+    case 'listBlock': {
+      const items = extractListItems(contents);
+      return { items: items.length > 0 ? items : ['Item 1', 'Item 2', 'Item 3'] };
+    }
     case 'definitionCard':
       return { term: headingText, definition: bodyText || headingText };
     case 'dateEvent':
@@ -406,6 +408,12 @@ export function LinearDocView({
             border-top: 1px solid var(--squisq-linear-muted);
             margin: 1.5em 0;
           }
+          .squisq-linear-content img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 6px;
+            margin: 0.5em 0;
+          }
           .squisq-linear-content strong {
             font-weight: 700;
           }

package/src/MarkdownRenderer.tsx

@@ -22,6 +22,7 @@ import type {
   MarkdownTableRow,
   MarkdownTableCell,
 } from '@bendyline/squisq/markdown';
+import { useMediaUrl } from './hooks/MediaContext';
 
 // ── Props ──────────────────────────────────────────────────────────
 
@@ -86,13 +87,7 @@ function renderInline(nodes: MarkdownInlineNode[], keyPrefix = ''): React.ReactN
 
       case 'image':
         return (
-          <img
-            key={key}
-            className="squisq-md-image"
-            src={node.url}
-            alt={node.alt ?? ''}
-            title={node.title ?? undefined}
-          />
+          <MdImage key={key} src={node.url} alt={node.alt ?? ''} title={node.title ?? undefined} />
         );
 
       case 'break':
@@ -343,6 +338,14 @@ function renderBlocks(nodes: MarkdownBlockNode[], keyPrefix = ''): React.ReactNo
   return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`));
 }
 
+// ── Image with MediaProvider resolution ───────────────────────────
+
+/** Renders an <img> that resolves its src through the MediaProvider when available. */
+function MdImage({ src, alt, title }: { src: string; alt: string; title?: string }) {
+  const resolved = useMediaUrl(src, '.');
+  return <img className="squisq-md-image" src={resolved} alt={alt} title={title} />;
+}
+
 // ── Main Component ─────────────────────────────────────────────────
 
 /**

package/src/layers/ImageLayer.tsx

@@ -61,8 +61,8 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
         <foreignObject x={finalX} y={finalY} width={width} height={height}>
           <div
             style={{
-              width: '100%',
-              height: '100%',
+              width: `${width}px`,
+              height: `${height}px`,
               overflow: 'hidden',
             }}
           >
@@ -71,8 +71,8 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
               alt={content.alt || ''}
               className={kbStyle.className}
               style={{
-                width: '100%',
-                height: '100%',
+                width: `${width}px`,
+                height: `${height}px`,
                 objectFit: 'cover',
                 objectPosition: 'center',
                 display: 'block',
@@ -101,8 +101,8 @@ export function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerP
             src={src}
             alt={content.alt || ''}
             style={{
-              width: '100%',
-              height: '100%',
+              width: `${width}px`,
+              height: `${height}px`,
               objectFit: 'cover',
               objectPosition: 'center',
               display: 'block',

package/src/layers/ShapeLayer.tsx

@@ -49,8 +49,8 @@ export function ShapeLayer({ layer, viewport, blockTime }: ShapeLayerProps) {
         <foreignObject x={x} y={y} width={width} height={height}>
           <div
             style={{
-              width: '100%',
-              height: '100%',
+              width: `${width}px`,
+              height: `${height}px`,
               background: fill,
               borderRadius: content.borderRadius ? `${content.borderRadius}px` : undefined,
               pointerEvents: 'none',

package/src/layers/TableLayer.tsx

@@ -51,8 +51,8 @@ export function TableLayer({ layer, viewport, blockTime }: TableLayerProps) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}
         style={{
-          width: '100%',
-          height: '100%',
+          width: `${width}px`,
+          height: `${height}px`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',

package/src/layers/VideoLayer.tsx

@@ -134,8 +134,8 @@ export function VideoLayer({
           data-clip-start={content.clipStart}
           data-clip-end={content.clipEnd}
           style={{
-            width: '100%',
-            height: '100%',
+            width: `${width}px`,
+            height: `${height}px`,
             objectFit: content.fit || 'cover',
             objectPosition: 'center',
             display: 'block',

package/src/standalone-entry.tsx

@@ -86,10 +86,22 @@ function createInlineMediaProvider(
   images: Record<string, string>,
   basePath: string,
 ): MediaProvider {
+  // Doc image references may not exactly match image map keys
+  // (e.g., "images/hero.jpg" vs "hero.jpg"). Build a filename-keyed
+  // lookup so resolution can fall back to basename matching.
+  const byFilename: Record<string, string> = {};
+  for (const key of Object.keys(images)) {
+    const filename = key.split('/').pop()!;
+    byFilename[filename] = images[key];
+  }
+
   return {
     async resolveUrl(relativePath: string): Promise<string> {
       if (relativePath in images) return images[relativePath];
-      // Fallback to basePath
+      const stripped = relativePath.replace(/^\.\//, '');
+      if (stripped !== relativePath && stripped in images) return images[stripped];
+      const filename = relativePath.split('/').pop()!;
+      if (filename in byFilename) return byFilename[filename];
       if (
         relativePath.startsWith('http') ||
         relativePath.startsWith('data:') ||