@bendyline/squisq 0.1.1

package/src/doc/templates/titleBlock.ts

@@ -0,0 +1,100 @@
+/**
+ * Title Block Template
+ *
+ * Large title with optional subtitle for doc intros.
+ * Centered text with fade-in animations.
+ * Adapts font sizes and positioning for different viewports.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { TitleBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+
+export function titleBlock(input: TitleBlockInput, context: TemplateContext): Layer[] {
+  const { title, subtitle, backgroundColor } = input;
+  const { theme, layout } = context;
+
+  // Scale font sizes for viewport
+  const titleFontSize = scaledFontSize(96, context, true);
+  const subtitleFontSize = scaledFontSize(36, context, false);
+
+  const baseBg = backgroundColor || theme.colors.primary;
+
+  const layers: Layer[] = [
+    // Background — radial gradient for depth instead of flat color
+    {
+      type: 'shape',
+      id: 'bg',
+      content: {
+        shape: 'rect',
+        fill: `radial-gradient(ellipse at 50% 40%, ${baseBg} 0%, ${theme.colors.background} 100%)`,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+    // Subtle decorative line above title
+    {
+      type: 'shape',
+      id: 'accent-line',
+      content: {
+        shape: 'rect',
+        fill: 'rgba(255, 255, 255, 0.2)',
+      },
+      position: {
+        x: '40%',
+        y: subtitle ? '28%' : '38%',
+        width: '20%',
+        height: '2px',
+      },
+    },
+    // Title
+    {
+      type: 'text',
+      id: 'title',
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: 'bold',
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: subtitle ? layout.primaryY : '50%',
+        anchor: 'center',
+        width: layout.maxTextWidth,
+      },
+      animation: { type: 'fadeIn', duration: 2 },
+    },
+  ];
+
+  // Add subtitle if provided
+  if (subtitle) {
+    layers.push({
+      type: 'text',
+      id: 'subtitle',
+      content: {
+        text: subtitle,
+        style: {
+          fontSize: subtitleFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+          lineHeight: 1.5,
+        },
+      },
+      position: {
+        x: '50%',
+        y: layout.secondaryY,
+        anchor: 'center',
+        width: layout.maxTextWidth,
+      },
+      animation: { type: 'fadeIn', duration: 1.5, delay: 1 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/twoColumn.ts

@@ -0,0 +1,239 @@
+/**
+ * Two Column Template
+ *
+ * Side-by-side comparison of two items.
+ * Each column has a label and optional sublabel.
+ * Adapts font sizes and positioning for different viewports.
+ *
+ * Portrait mode: Stacks columns vertically (top/bottom) instead of side-by-side.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { TwoColumnInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { resolveColorScheme } from '../utils/themeUtils.js';
+import { getTwoColumnPositions } from '../../schemas/LayoutStrategy.js';
+
+export function twoColumn(input: TwoColumnInput, context: TemplateContext): Layer[] {
+  const { left, right, header, leftColor = 'green', rightColor = 'blue' } = input;
+
+  // Guard: required fields may be absent when generated from sparse markdown
+  if (!left?.label || !right?.label) return [];
+
+  const { theme, layout, orientation } = context;
+  const leftColors = resolveColorScheme(context, leftColor);
+  const rightColors = resolveColorScheme(context, rightColor);
+
+  // Get column positions based on orientation
+  const positions = getTwoColumnPositions(orientation);
+  const isStacked = layout.stackColumns;
+
+  // Column width ~42% for side-by-side, ~85% for stacked
+  const columnWidth = isStacked ? '85%' : '42%';
+
+  // Calculate font sizes based on viewport
+  const headerFontSize = scaledFontSize(32, context, false);
+  const labelFontSize = scaledFontSize(44, context, true);
+  const sublabelFontSize = scaledFontSize(22, context, false);
+
+  const layers: Layer[] = [
+    // Background — subtle gradient to add depth
+    {
+      type: 'shape',
+      id: 'bg',
+      content: {
+        shape: 'rect',
+        fill: `linear-gradient(135deg, ${theme.colors.background} 0%, #16202e 100%)`,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+  ];
+
+  if (!isStacked) {
+    // Left column background panel
+    layers.push({
+      type: 'shape',
+      id: 'left-panel',
+      content: {
+        shape: 'rect',
+        fill: 'rgba(255, 255, 255, 0.04)',
+      },
+      position: { x: '3%', y: '15%', width: '44%', height: '70%' },
+    });
+
+    // Right column background panel
+    layers.push({
+      type: 'shape',
+      id: 'right-panel',
+      content: {
+        shape: 'rect',
+        fill: 'rgba(255, 255, 255, 0.04)',
+      },
+      position: { x: '53%', y: '15%', width: '44%', height: '70%' },
+    });
+  }
+
+  // Header position adjusts based on layout
+  const headerY = isStacked ? '12%' : '22%';
+
+  // Add header if provided
+  if (header) {
+    layers.push({
+      type: 'text',
+      id: 'header',
+      content: {
+        text: header,
+        style: {
+          fontSize: headerFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+        },
+      },
+      position: { x: '50%', y: headerY, anchor: 'center' },
+      animation: { type: 'fadeIn', duration: 0.8 },
+    });
+  }
+
+  // Calculate Y positions based on layout mode and header presence
+  let leftY: string;
+  let leftSublabelY: string;
+  let rightY: string;
+  let rightSublabelY: string;
+
+  if (isStacked) {
+    // Portrait: stacked vertically
+    leftY = header ? '30%' : '25%';
+    leftSublabelY = header ? '40%' : '35%';
+    rightY = header ? '60%' : '55%';
+    rightSublabelY = header ? '70%' : '65%';
+  } else {
+    // Landscape/square: side by side — vertically centered in panels (15%-85%)
+    const baseY = header ? '47%' : '45%';
+    const sublabelOffset = header ? '58%' : '56%';
+    leftY = baseY;
+    leftSublabelY = sublabelOffset;
+    rightY = baseY;
+    rightSublabelY = sublabelOffset;
+  }
+
+  // Left column (or top in portrait)
+  layers.push({
+    type: 'text',
+    id: 'left-label',
+    content: {
+      text: left.label,
+      style: {
+        fontSize: labelFontSize,
+        fontWeight: 'bold',
+        color: leftColors.text,
+        textAlign: 'center',
+        lineHeight: 1.3,
+      },
+    },
+    position: {
+      x: positions.left.x,
+      y: leftY,
+      anchor: 'center',
+      width: columnWidth,
+    },
+    animation: { type: 'fadeIn', duration: 1 },
+  });
+
+  if (left.sublabel) {
+    layers.push({
+      type: 'text',
+      id: 'left-sublabel',
+      content: {
+        text: left.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+          lineHeight: 1.4,
+        },
+      },
+      position: {
+        x: positions.left.x,
+        y: leftSublabelY,
+        anchor: 'center',
+        width: columnWidth,
+      },
+      animation: { type: 'fadeIn', duration: 0.8, delay: 0.3 },
+    });
+  }
+
+  // Visual connector between columns (bold arrow)
+  const connectorFontSize = scaledFontSize(120, context, true);
+  const connectorY = isStacked ? '48%' : '50%'; // Centered in viewport
+  const connectorSymbol = isStacked ? '\u2193' : '\u2192'; // ↓ for stacked, → for side-by-side
+
+  layers.push({
+    type: 'text',
+    id: 'connector',
+    content: {
+      text: connectorSymbol,
+      style: {
+        fontSize: connectorFontSize,
+        fontWeight: 'bold',
+        color: 'rgba(255, 255, 255, 0.6)',
+        textAlign: 'center',
+      },
+    },
+    position: {
+      x: '50%',
+      y: connectorY,
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 0.6, delay: 0.4 },
+  });
+
+  // Right column (or bottom in portrait)
+  layers.push({
+    type: 'text',
+    id: 'right-label',
+    content: {
+      text: right.label,
+      style: {
+        fontSize: labelFontSize,
+        fontWeight: 'bold',
+        color: rightColors.text,
+        textAlign: 'center',
+        lineHeight: 1.3,
+      },
+    },
+    position: {
+      x: positions.right.x,
+      y: rightY,
+      anchor: 'center',
+      width: columnWidth,
+    },
+    animation: { type: 'fadeIn', duration: 1, delay: 0.5 },
+  });
+
+  if (right.sublabel) {
+    layers.push({
+      type: 'text',
+      id: 'right-sublabel',
+      content: {
+        text: right.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+          lineHeight: 1.4,
+        },
+      },
+      position: {
+        x: positions.right.x,
+        y: rightSublabelY,
+        anchor: 'center',
+        width: columnWidth,
+      },
+      animation: { type: 'fadeIn', duration: 0.8, delay: 0.8 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/videoPullQuote.ts

@@ -0,0 +1,128 @@
+/**
+ * Video Pull Quote Template
+ *
+ * Quote text over a video clip background with dark overlay.
+ * Cinematic alternative to pullQuote when a video clip is available.
+ * Combines the visual dynamism of live video with the text focus of quoteBlock.
+ *
+ * The video plays muted — narration audio is the only sound track.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ *
+ * Related Files:
+ * - shared/story/templates/pullQuote.ts — image-based equivalent
+ * - schemas/StoryScript.ts — VideoLayer type
+ * - site/src/components/story/layers/VideoLayer.tsx — rendering component
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { VideoPullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+
+export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateContext): Layer[] {
+  const { text, attribution, backgroundVideo } = input;
+
+  // Guard: backgroundVideo is required
+  if (!backgroundVideo?.src) return [];
+
+  const quoteFontSize = scaledFontSize(52, context, true);
+  const attrFontSize = scaledFontSize(24, context, false);
+  const decoFontSize = scaledFontSize(200, context, true);
+
+  const layers: Layer[] = [
+    // Full-bleed background video clip
+    {
+      type: 'video',
+      id: 'bg-video',
+      content: {
+        src: backgroundVideo.src,
+        posterSrc: backgroundVideo.posterSrc,
+        alt: backgroundVideo.alt,
+        fit: 'cover',
+        clipStart: backgroundVideo.clipStart,
+        clipEnd: backgroundVideo.clipEnd,
+        credit: backgroundVideo.credit,
+        license: backgroundVideo.license,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+
+    // Dark overlay for text readability
+    {
+      type: 'shape',
+      id: 'overlay',
+      content: {
+        shape: 'rect',
+        fill: 'rgba(0, 0, 0, 0.55)',
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+
+    // Decorative quotation mark
+    {
+      type: 'text',
+      id: 'deco-quote',
+      content: {
+        text: '\u201C',
+        style: {
+          fontSize: decoFontSize,
+          color: 'rgba(255, 255, 255, 0.08)',
+          textAlign: 'center',
+        },
+      },
+      position: {
+        x: '50%',
+        y: '20%',
+        anchor: 'center',
+      },
+    },
+
+    // Quote text
+    {
+      type: 'text',
+      id: 'quote-text',
+      content: {
+        text,
+        style: {
+          fontSize: quoteFontSize,
+          color: '#ffffff',
+          textAlign: 'center',
+          lineHeight: 1.5,
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: attribution ? '45%' : '50%',
+        anchor: 'center',
+        width: '80%',
+      },
+      animation: { type: 'fadeIn', duration: 2 },
+    },
+  ];
+
+  // Attribution
+  if (attribution) {
+    layers.push({
+      type: 'text',
+      id: 'attribution',
+      content: {
+        text: `\u2014 ${attribution}`,
+        style: {
+          fontSize: attrFontSize,
+          color: 'rgba(255, 255, 255, 0.7)',
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: '72%',
+        anchor: 'center',
+      },
+      animation: { type: 'fadeIn', duration: 1, delay: 1.5 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/videoWithCaption.ts

@@ -0,0 +1,126 @@
+/**
+ * Video With Caption Template
+ *
+ * Full-screen background video clip with text overlay. Mirrors the structure of
+ * imageWithCaption but uses a VideoLayer instead of an ImageLayer. The video
+ * plays muted — narration audio is the only sound track.
+ *
+ * Adapts caption positioning and font sizes for different viewports.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ *
+ * Related Files:
+ * - shared/story/templates/imageWithCaption.ts — image equivalent
+ * - schemas/StoryScript.ts — VideoLayer type
+ * - site/src/components/story/layers/VideoLayer.tsx — rendering component
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { VideoWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { cleanCaption } from './captionUtils.js';
+
+export function videoWithCaption(input: VideoWithCaptionInput, context: TemplateContext): Layer[] {
+  const {
+    videoSrc,
+    posterSrc,
+    videoAlt,
+    clipStart,
+    clipEnd,
+    sourceDuration,
+    caption: rawCaption,
+    captionPosition = 'bottom',
+    videoCredit,
+    videoLicense,
+  } = input;
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+
+  const captionFontSize = scaledFontSize(36, context, false);
+  const creditFontSize = scaledFontSize(16, context, false);
+
+  const layers: Layer[] = [
+    // Background video clip
+    {
+      type: 'video',
+      id: 'bg-video',
+      content: {
+        src: videoSrc,
+        posterSrc,
+        alt: videoAlt,
+        fit: 'cover',
+        clipStart,
+        clipEnd,
+        sourceDuration,
+        credit: videoCredit,
+        license: videoLicense,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+  ];
+
+  // Caption text at bottom with gradient for readability
+  if (caption) {
+    layers.push({
+      type: 'shape',
+      id: 'caption-gradient',
+      content: {
+        shape: 'rect',
+        fill: 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%)',
+      },
+      position: {
+        x: 0,
+        y: captionPosition === 'top' ? 0 : '65%',
+        width: '100%',
+        height: '35%',
+      },
+    });
+
+    const captionY =
+      captionPosition === 'top' ? '15%' : captionPosition === 'center' ? '50%' : '82%';
+
+    layers.push({
+      type: 'text',
+      id: 'caption',
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: captionY,
+        anchor: 'center',
+        width: layout.maxTextWidth,
+      },
+      animation: { type: 'fadeIn', duration: 1.5, delay: 0.5 },
+    });
+  }
+
+  // Small credit text in bottom-right corner
+  if (videoCredit) {
+    layers.push({
+      type: 'text',
+      id: 'credit',
+      content: {
+        text: videoCredit,
+        style: {
+          fontSize: creditFontSize,
+          color: 'rgba(255, 255, 255, 0.5)',
+          textAlign: 'right',
+        },
+      },
+      position: {
+        x: '96%',
+        y: '96%',
+        anchor: 'bottom-right',
+      },
+    });
+  }
+
+  return layers;
+}