@bendyline/squisq-editor-react 1.1.0 → 1.2.0

package/src/PreviewPanel.tsx

@@ -16,23 +16,27 @@
  * 4. Passing the prepared Doc to DocPlayer for SVG-based rendering
  */
 
-import { useMemo, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { DocPlayer, LinearDocView } from '@bendyline/squisq-react';
-import type { DisplayMode } from '@bendyline/squisq-react';
 import { flattenBlocks } from '@bendyline/squisq/doc';
 import { hasTemplate } from '@bendyline/squisq/doc';
 import { extractPlainText } from '@bendyline/squisq/markdown';
-import type { Block, Doc, ViewportConfig, ViewportPreset } from '@bendyline/squisq/schemas';
-import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
-import { getThemeSummaries, resolveTheme } from '@bendyline/squisq/schemas';
-import type { MarkdownBlockNode, MarkdownList } from '@bendyline/squisq/markdown';
+import type { Block, Doc } from '@bendyline/squisq/schemas';
+import type { MarkdownBlockNode, MarkdownList, MarkdownNode } from '@bendyline/squisq/markdown';
+import { getChildren } from '@bendyline/squisq/markdown';
+import { applyTransform } from '@bendyline/squisq/transform';
+import { resolveAudioMapping } from '@bendyline/squisq/doc';
+import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
+import { usePreviewSettings } from './PreviewControls';
 
 export interface PreviewPanelProps {
   /** Base path for resolving media URLs in DocPlayer */
   basePath?: string;
   /** Additional class name for the container */
   className?: string;
+  /** Optional ContentContainer for audio mapping (MP3 discovery + timing.json) */
+  container?: ContentContainer | null;
 }
 
 // ── Helpers ────────────────────────────────────────────────────────
@@ -50,6 +54,60 @@ function extractBodyText(contents: MarkdownBlockNode[] | undefined): string {
   return parts.join('\n').trim();
 }
 
+/**
+ * Extract images from a block's markdown contents.
+ * Walks the node tree recursively to find all MarkdownImage nodes.
+ */
+function extractBlockImages(
+  contents: MarkdownBlockNode[] | undefined,
+): Array<{ src: string; alt: string }> {
+  if (!contents || contents.length === 0) return [];
+  const images: Array<{ src: string; alt: string }> = [];
+
+  function walk(node: MarkdownNode): void {
+    if ('type' in node && node.type === 'image' && 'url' in node) {
+      const img = node as { url: string; alt?: string };
+      if (img.url) {
+        images.push({ src: img.url, alt: img.alt ?? '' });
+      }
+    }
+    for (const child of getChildren(node)) {
+      walk(child);
+    }
+  }
+
+  for (const node of contents) {
+    walk(node);
+  }
+  return images;
+}
+
+/**
+ * Collect all unique images from an entire Doc's block tree.
+ * Walks nested children to find every image across all blocks.
+ */
+function collectAllDocImages(blocks: Block[]): Array<{ src: string; alt: string }> {
+  const seen = new Set<string>();
+  const images: Array<{ src: string; alt: string }> = [];
+
+  function walkBlocks(blockList: Block[]): void {
+    for (const block of blockList) {
+      for (const img of extractBlockImages(block.contents)) {
+        if (!seen.has(img.src)) {
+          seen.add(img.src);
+          images.push(img);
+        }
+      }
+      if (block.children) {
+        walkBlocks(block.children);
+      }
+    }
+  }
+
+  walkBlocks(blocks);
+  return images;
+}
+
 /**
  * Extract list items from markdown body content.
  * Returns an array of plain text strings for each list item found.
@@ -144,7 +202,7 @@ function getTemplateDefaults(
 function blockToSlide(block: Block, index: number): Record<string, unknown> {
   const headingText = block.sourceHeading
     ? extractPlainText(block.sourceHeading)
-    : block.id || `Slide ${index + 1}`;
+    : block.title || block.id || `Slide ${index + 1}`;
 
   // Validate template name — fall back to sectionHeader for unknowns
   const requestedTemplate = block.template || 'sectionHeader';
@@ -153,6 +211,27 @@ function blockToSlide(block: Block, index: number): Record<string, unknown> {
   // Get sensible defaults for templates that need more than just `title`
   const defaults = getTemplateDefaults(template, headingText, block);
 
+  // Spread the block itself to pick up any template-specific fields
+  // placed directly on the block by applyTransform (e.g. stat, description,
+  // quote, colorScheme). These are not in templateOverrides — they live
+  // on the block object because the transform produces hybrid Block+Template
+  // objects via the timing allocator.
+  const {
+    id: _id,
+    startTime: _st,
+    duration: _d,
+    audioSegment: _as,
+    layers: _l,
+    transition: _tr,
+    template: _t,
+    title: _ti,
+    children: _c,
+    contents: _co,
+    sourceHeading: _sh,
+    templateOverrides: _to,
+    ...extraFields
+  } = block as unknown as Record<string, unknown>;
+
   return {
     id: block.id,
     template,
@@ -163,20 +242,101 @@ function blockToSlide(block: Block, index: number): Record<string, unknown> {
     title: headingText,
     // Template-specific defaults (safe fallbacks for required fields)
     ...defaults,
+    // Template-specific fields from transform (stat, description, quote, etc.)
+    ...extraFields,
     // Spread annotation overrides last so explicit values win
     ...block.templateOverrides,
   };
 }
 
+/** Ambient motions to rotate on image slides. */
+const IMAGE_MOTIONS: Array<'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight'> = [
+  'zoomIn',
+  'zoomOut',
+  'panLeft',
+  'panRight',
+];
+
 /**
  * Build a player-ready Doc from the markdown-derived Doc.
  *
  * Flattens hierarchical blocks, converts each to a TemplateBlock-compatible
  * slide, recalculates timing, and adds a synthetic audio segment.
+ *
+ * Images found in the markdown are used in two ways:
+ * 1. Per-block: if a block has images, its first image becomes the background
+ *    (via imageWithCaption template) or an accent image on text templates.
+ * 2. Global: remaining images are interleaved as standalone image slides
+ *    for visual variety.
  */
 function buildPreviewDoc(doc: Doc): Doc {
   const flat = flattenBlocks(doc.blocks);
-  const slides = flat.map(blockToSlide);
+
+  // Collect all images from the doc for global interleaving
+  const allImages = collectAllDocImages(doc.blocks);
+
+  // Track which images are used per-block so we can interleave the rest
+  const usedImageSrcs = new Set<string>();
+
+  // First pass: convert blocks to slides, using per-block images
+  const slides: Record<string, unknown>[] = [];
+  let motionIndex = 0;
+
+  for (let i = 0; i < flat.length; i++) {
+    const block = flat[i];
+    const blockImages = extractBlockImages(block.contents);
+    const slide = blockToSlide(block, i);
+
+    // If the block has images and is using the default sectionHeader template,
+    // upgrade it to imageWithCaption so the image becomes the slide background.
+    if (blockImages.length > 0 && slide.template === 'sectionHeader') {
+      const img = blockImages[0];
+      usedImageSrcs.add(img.src);
+      slide.template = 'imageWithCaption';
+      slide.imageSrc = img.src;
+      slide.imageAlt = img.alt;
+      slide.caption = slide.title as string;
+      slide.captionPosition = 'bottom';
+      slide.ambientMotion = IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length];
+    } else if (blockImages.length > 0) {
+      // For other templates, add the first image as an accent
+      const img = blockImages[0];
+      usedImageSrcs.add(img.src);
+      if (!slide.accentImage) {
+        slide.accentImage = {
+          src: img.src,
+          alt: img.alt,
+          position: 'left-strip',
+          ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
+        };
+      }
+    }
+
+    slides.push(slide);
+  }
+
+  // Second pass: interleave unused images as standalone imageWithCaption slides.
+  // Spread them evenly through the sequence for visual variety.
+  const unusedImages = allImages.filter((img) => !usedImageSrcs.has(img.src));
+  if (unusedImages.length > 0 && slides.length > 0) {
+    const interval = Math.max(2, Math.floor(slides.length / (unusedImages.length + 1)));
+    let insertOffset = 0;
+    for (let imgIdx = 0; imgIdx < unusedImages.length; imgIdx++) {
+      const insertAt = Math.min((imgIdx + 1) * interval + insertOffset, slides.length);
+      const img = unusedImages[imgIdx];
+      slides.splice(insertAt, 0, {
+        id: `img-interleave-${imgIdx}`,
+        template: 'imageWithCaption',
+        duration: 5,
+        audioSegment: 0,
+        imageSrc: img.src,
+        imageAlt: img.alt,
+        ambientMotion: IMAGE_MOTIONS[motionIndex++ % IMAGE_MOTIONS.length],
+        transition: { type: 'fade', duration: 0.5 },
+      });
+      insertOffset++;
+    }
+  }
 
   // Recalculate sequential timing
   let t = 0;
@@ -194,157 +354,66 @@ function buildPreviewDoc(doc: Doc): Doc {
       // its fallback timer to advance currentTime via requestAnimationFrame.
       segments: t > 0 ? [{ src: '', name: 'preview', duration: t, startTime: 0 }] : [],
     },
+    ...(doc.captions ? { captions: doc.captions } : {}),
   };
 }
 
-// ── Viewport helpers ───────────────────────────────────────────────
-
-/** All viewport preset entries for the dropdown */
-const VIEWPORT_OPTIONS: { key: ViewportPreset; label: string }[] = [
-  { key: 'landscape', label: '16:9 Landscape' },
-  { key: 'portrait', label: '9:16 Portrait' },
-  { key: 'square', label: '1:1 Square' },
-  { key: 'standard', label: '4:3 Standard' },
-];
-
-/**
- * Resolve a `document-render-as` frontmatter value to a ViewportPreset.
- * Accepts preset names ("landscape"), aspect ratio shorthand ("16:9"),
- * and common aliases ("widescreen", "vertical", "stories").
- */
-function resolveRenderAs(value: unknown): ViewportPreset | null {
-  if (typeof value !== 'string') return null;
-  const v = value.trim().toLowerCase();
-  const mapping: Record<string, ViewportPreset> = {
-    landscape: 'landscape',
-    '16:9': 'landscape',
-    widescreen: 'landscape',
-    portrait: 'portrait',
-    '9:16': 'portrait',
-    vertical: 'portrait',
-    stories: 'portrait',
-    square: 'square',
-    '1:1': 'square',
-    standard: 'standard',
-    '4:3': 'standard',
-  };
-  return mapping[v] ?? null;
-}
-
-/** Display mode options for the dropdown */
-const DISPLAY_MODE_OPTIONS: { key: DisplayMode; label: string }[] = [
-  { key: 'video', label: 'Video' },
-  { key: 'slideshow', label: 'Slideshow' },
-  { key: 'linear', label: 'Document' },
-];
-
-/** Theme options for the dropdown */
-const THEME_OPTIONS = getThemeSummaries().map((s) => ({ key: s.id, label: s.name }));
-
-/** Set of valid theme IDs for fast lookup */
-const VALID_THEME_IDS = new Set(THEME_OPTIONS.map((o) => o.key));
-
-/**
- * Resolve a `theme` frontmatter value to a theme id.
- * Accepts exact theme ids ('documentary', 'bold') and common aliases.
- */
-function resolveFrontmatterTheme(value: unknown): string | null {
-  if (typeof value !== 'string') return null;
-  const v = value.trim().toLowerCase();
-  if (VALID_THEME_IDS.has(v)) return v;
-  // Allow hyphenated/spaced aliases: "morning light" → "morning-light"
-  const normalized = v.replace(/\s+/g, '-');
-  if (VALID_THEME_IDS.has(normalized)) return normalized;
-  return null;
-}
-
-/**
- * Resolve a `display-mode` frontmatter value to a DisplayMode.
- */
-function resolveDisplayMode(value: unknown): DisplayMode | null {
-  if (typeof value !== 'string') return null;
-  const v = value.trim().toLowerCase();
-  if (v === 'video' || v === 'slideshow' || v === 'linear') return v;
-  if (v === 'slides' || v === 'presentation' || v === 'deck') return 'slideshow';
-  if (v === 'document' || v === 'scroll' || v === 'page') return 'linear';
-  return null;
-}
-
 // ── Component ──────────────────────────────────────────────────────
 
 /**
- * Live preview panel that renders the current document as a slideshow.
- * Uses DocPlayer from @bendyline/squisq-react for SVG block rendering
- * with template expansion, transitions, and playback controls.
- *
- * Includes a viewport format dropdown above the player. The default
- * format can be hinted via YAML frontmatter `document-render-as:`.
+ * Live preview panel that renders the current document as a slideshow
+ * or document view. Controls (viewport, mode, theme, transform, captions)
+ * are rendered in the main toolbar via PreviewToolbarControls.
  */
-export function PreviewPanel({ basePath = '/', className }: PreviewPanelProps) {
+export function PreviewPanel({ basePath = '/', className, container }: PreviewPanelProps) {
   const { doc, parseError, isParsing } = useEditorContext();
+  const {
+    activeViewport,
+    activeDisplayMode,
+    activeTheme,
+    activeTransformStyle,
+    activeCaptionStyle,
+  } = usePreviewSettings();
+
+  // Build the player-ready Doc whenever the parsed doc changes.
+  // Transform runs on the ORIGINAL doc (which has block.contents with
+  // markdown body text) so the content extractor can analyze it.
+  // Then buildPreviewDoc converts the result for DocPlayer.
+  //
+  // Audio mapping is async (reads container files), so we use a two-phase
+  // approach: first build the base doc synchronously, then resolve audio
+  // in an effect and update the state.
+  const [previewDoc, setPreviewDoc] = useState<Doc | null>(null);
 
-  // Determine the frontmatter-hinted viewport preset (if any)
-  const frontmatterPreset = useMemo<ViewportPreset | null>(() => {
-    if (!doc?.frontmatter) return null;
-    return resolveRenderAs(doc.frontmatter['document-render-as']);
-  }, [doc?.frontmatter]);
-
-  // Track user-selected viewport; null means "use frontmatter or default"
-  const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);
-
-  // When frontmatter preset changes and user hasn't explicitly chosen, sync
-  useEffect(() => {
-    setSelectedPreset(null);
-  }, [frontmatterPreset]);
-
-  // Active preset: explicit user choice > frontmatter hint > landscape
-  const activePreset: ViewportPreset = selectedPreset ?? frontmatterPreset ?? 'landscape';
-  const activeViewport: ViewportConfig = VIEWPORT_PRESETS[activePreset];
-
-  // ── Display mode (video vs slideshow) ──────────────────────────
-
-  // Determine the frontmatter-hinted display mode (if any)
-  const frontmatterDisplayMode = useMemo<DisplayMode | null>(() => {
-    if (!doc?.frontmatter) return null;
-    return resolveDisplayMode(doc.frontmatter['display-mode']);
-  }, [doc?.frontmatter]);
-
-  // Track user-selected display mode; null means "use frontmatter or default"
-  const [selectedDisplayMode, setSelectedDisplayMode] = useState<DisplayMode | null>(null);
-
-  // When frontmatter display mode changes and user hasn't explicitly chosen, sync
   useEffect(() => {
-    setSelectedDisplayMode(null);
-  }, [frontmatterDisplayMode]);
-
-  // Active display mode: explicit user choice > frontmatter hint > video
-  const activeDisplayMode: DisplayMode = selectedDisplayMode ?? frontmatterDisplayMode ?? 'video';
-
-  // ── Theme selection ────────────────────────────────────────────
-
-  // Determine the frontmatter-hinted theme (if any)
-  const frontmatterThemeId = useMemo<string | null>(() => {
-    if (!doc?.frontmatter) return null;
-    return resolveFrontmatterTheme(doc.frontmatter['theme']);
-  }, [doc?.frontmatter]);
-
-  // Track user-selected theme; null means "use frontmatter or default"
-  const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
+    if (!doc || !doc.blocks.length) {
+      setPreviewDoc(null);
+      return;
+    }
 
-  // When frontmatter theme changes and user hasn't explicitly chosen, sync
-  useEffect(() => {
-    setSelectedThemeId(null);
-  }, [frontmatterThemeId]);
+    let sourceDoc = doc;
+    if (activeTransformStyle) {
+      const result = applyTransform(doc, activeTransformStyle);
+      sourceDoc = result.doc;
+    }
 
-  // Active theme: explicit user choice > frontmatter hint > documentary
-  const activeThemeId = selectedThemeId ?? frontmatterThemeId ?? 'documentary';
-  const activeTheme = useMemo(() => resolveTheme(activeThemeId), [activeThemeId]);
+    // If we have a container, try to resolve audio mapping before building preview
+    if (container) {
+      let cancelled = false;
+      resolveAudioMapping(sourceDoc, container).then((audioDoc) => {
+        if (!cancelled) {
+          setPreviewDoc(buildPreviewDoc(audioDoc));
+        }
+      });
+      // Set an immediate preview without audio while mapping resolves
+      setPreviewDoc(buildPreviewDoc(sourceDoc));
+      return () => {
+        cancelled = true;
+      };
+    }
 
-  // Build the player-ready Doc whenever the parsed doc changes
-  const previewDoc = useMemo(() => {
-    if (!doc || !doc.blocks.length) return null;
-    return buildPreviewDoc(doc);
-  }, [doc]);
+    setPreviewDoc(buildPreviewDoc(sourceDoc));
+  }, [doc, activeTransformStyle, container]);
 
   // Status overlays for non-ready states
   if (isParsing) {
@@ -385,147 +454,6 @@ export function PreviewPanel({ basePath = '/', className }: PreviewPanelProps) {
         background: 'var(--squisq-bg, #f5f5f5)',
       }}
     >
-      {/* Viewport format selector */}
-      <div
-        className="squisq-preview-toolbar"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '8px',
-          padding: '6px 12px',
-          borderBottom: '1px solid var(--squisq-border, #e0e0e0)',
-          flexShrink: 0,
-          fontSize: '13px',
-        }}
-      >
-        <label htmlFor="viewport-preset" style={{ color: 'var(--squisq-text-muted, #6b7280)' }}>
-          Format:
-        </label>
-        <select
-          id="viewport-preset"
-          value={activePreset}
-          onChange={(e) => setSelectedPreset(e.target.value as ViewportPreset)}
-          style={{
-            padding: '3px 8px',
-            borderRadius: '4px',
-            border: '1px solid var(--squisq-border, #d1d5db)',
-            background: 'var(--squisq-input-bg, #fff)',
-            color: 'var(--squisq-text, #1f2937)',
-            fontSize: '13px',
-            cursor: 'pointer',
-          }}
-        >
-          {VIEWPORT_OPTIONS.map((opt) => (
-            <option key={opt.key} value={opt.key}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        {frontmatterPreset && selectedPreset === null && (
-          <span
-            style={{
-              fontSize: '11px',
-              color: 'var(--squisq-text-muted, #9ca3af)',
-              fontStyle: 'italic',
-            }}
-          >
-            (from frontmatter)
-          </span>
-        )}
-
-        {/* Divider */}
-        <span
-          style={{
-            width: '1px',
-            height: '18px',
-            background: 'var(--squisq-border, #d1d5db)',
-            margin: '0 4px',
-          }}
-        />
-
-        {/* Display mode selector */}
-        <label htmlFor="display-mode" style={{ color: 'var(--squisq-text-muted, #6b7280)' }}>
-          Mode:
-        </label>
-        <select
-          id="display-mode"
-          value={activeDisplayMode}
-          onChange={(e) => setSelectedDisplayMode(e.target.value as DisplayMode)}
-          style={{
-            padding: '3px 8px',
-            borderRadius: '4px',
-            border: '1px solid var(--squisq-border, #d1d5db)',
-            background: 'var(--squisq-input-bg, #fff)',
-            color: 'var(--squisq-text, #1f2937)',
-            fontSize: '13px',
-            cursor: 'pointer',
-          }}
-        >
-          {DISPLAY_MODE_OPTIONS.map((opt) => (
-            <option key={opt.key} value={opt.key}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        {frontmatterDisplayMode && selectedDisplayMode === null && (
-          <span
-            style={{
-              fontSize: '11px',
-              color: 'var(--squisq-text-muted, #9ca3af)',
-              fontStyle: 'italic',
-            }}
-          >
-            (from frontmatter)
-          </span>
-        )}
-
-        {/* Divider */}
-        <span
-          style={{
-            width: '1px',
-            height: '18px',
-            background: 'var(--squisq-border, #d1d5db)',
-            margin: '0 4px',
-          }}
-        />
-
-        {/* Theme selector */}
-        <label htmlFor="theme-select" style={{ color: 'var(--squisq-text-muted, #6b7280)' }}>
-          Theme:
-        </label>
-        <select
-          id="theme-select"
-          value={activeThemeId}
-          onChange={(e) => setSelectedThemeId(e.target.value)}
-          style={{
-            padding: '3px 8px',
-            borderRadius: '4px',
-            border: '1px solid var(--squisq-border, #d1d5db)',
-            background: 'var(--squisq-input-bg, #fff)',
-            color: 'var(--squisq-text, #1f2937)',
-            fontSize: '13px',
-            cursor: 'pointer',
-          }}
-        >
-          {THEME_OPTIONS.map((opt) => (
-            <option key={opt.key} value={opt.key}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        {frontmatterThemeId && selectedThemeId === null && (
-          <span
-            style={{
-              fontSize: '11px',
-              color: 'var(--squisq-text-muted, #9ca3af)',
-              fontStyle: 'italic',
-            }}
-          >
-            (from frontmatter)
-          </span>
-        )}
-      </div>
-
       {/* Player / Document view */}
       <div
         className="squisq-preview-player"
@@ -554,6 +482,7 @@ export function PreviewPanel({ basePath = '/', className }: PreviewPanelProps) {
             forceViewport={activeViewport}
             displayMode={activeDisplayMode}
             theme={activeTheme}
+            captionStyle={activeCaptionStyle}
           />
         )}
       </div>