@bendyline/squisq 0.1.1

package/src/doc/templates/dateEvent.ts

@@ -0,0 +1,122 @@
+/**
+ * Date Event Template
+ *
+ * Timeline-style slide with prominent date and description.
+ * Supports different moods: neutral, somber, celebratory.
+ * Adapts font sizes and positioning for different viewports.
+ *
+ * Supports optional accent images that appear as tasteful side/bottom strips.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { DateEventInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
+
+const MOOD_COLORS = {
+  neutral: { bg: '#1a202c', date: '#63b3ed', text: '#ffffff' },
+  somber: { bg: '#1a1a2e', date: '#e53e3e', text: '#a0aec0' },
+  celebratory: { bg: '#1a365d', date: '#68d391', text: '#ffffff' },
+};
+
+export function dateEvent(input: DateEventInput, context: TemplateContext): Layer[] {
+  const { date, description, footer, mood = 'neutral', accentImage } = input;
+  const { theme } = context;
+  const colors = MOOD_COLORS[mood];
+
+  // Get layout adjustments if accent image is present
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+
+  // Scale font sizes — date is the hero element
+  const dateFontSize = scaledFontSize(96, context, true);
+  const descFontSize = scaledFontSize(30, context, false);
+  const footerFontSize = scaledFontSize(26, context, false);
+
+  const layers: Layer[] = [
+    // Background — unique diagonal gradient to differentiate from other dark templates
+    {
+      type: 'shape',
+      id: 'bg',
+      content: {
+        shape: 'rect',
+        fill: `linear-gradient(135deg, ${colors.bg} 0%, #0d1117 100%)`,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+  ];
+
+  // Add accent image layers (behind text, after background)
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+
+  // Date — hero element, much larger
+  layers.push({
+    type: 'text',
+    id: 'date',
+    content: {
+      text: date,
+      style: {
+        fontSize: dateFontSize,
+        fontWeight: 'bold',
+        color: colors.date,
+        shadow: !!accentImage,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('35%', accentLayout),
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 1.5 },
+  });
+
+  // Description - constrained width for proper text wrapping
+  layers.push({
+    type: 'text',
+    id: 'description',
+    content: {
+      text: description,
+      style: {
+        fontSize: descFontSize,
+        color: colors.text,
+        textAlign: 'center',
+        lineHeight: 1.8,
+        shadow: !!accentImage,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('58%', accentLayout),
+      width: accentLayout.textWidth,
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 2, delay: 1 },
+  });
+
+  // Add footer if provided
+  if (footer) {
+    layers.push({
+      type: 'text',
+      id: 'footer',
+      content: {
+        text: footer,
+        style: {
+          fontSize: footerFontSize,
+          color: theme.colors.textMuted,
+          shadow: !!accentImage,
+        },
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY('82%', accentLayout),
+        anchor: 'center',
+      },
+      animation: { type: 'fadeIn', duration: 1, delay: 3 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/definitionCard.ts

@@ -0,0 +1,129 @@
+/**
+ * Definition Card Template
+ *
+ * Dictionary-style slide with a large term and its definition.
+ * Good for explaining local words, place names, or cultural concepts.
+ * Supports optional accent images.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { DefinitionCardInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { resolveColorScheme } from '../utils/themeUtils.js';
+import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
+import { createBackgroundLayer } from './captionUtils.js';
+
+export function definitionCard(input: DefinitionCardInput, context: TemplateContext): Layer[] {
+  const { term, definition, origin, colorScheme = 'blue', accentImage } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+
+  // Get layout adjustments if accent image is present
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+
+  const termFontSize = scaledFontSize(72, context, true);
+  const defFontSize = scaledFontSize(32, context, false);
+  const originFontSize = scaledFontSize(22, context, false);
+
+  const layers: Layer[] = [
+    createBackgroundLayer(
+      'bg',
+      `linear-gradient(145deg, #1e2030 0%, ${theme.colors.background} 100%)`,
+    ),
+  ];
+
+  // Add accent image layers
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+
+  // Term — large, accent-colored
+  layers.push({
+    type: 'text',
+    id: 'term',
+    content: {
+      text: term,
+      style: {
+        fontSize: termFontSize,
+        fontWeight: 'bold',
+        color: colors.text,
+        textAlign: 'center',
+        shadow: !!accentImage,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('30%', accentLayout),
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 1.5 },
+  });
+
+  // Horizontal separator line
+  layers.push({
+    type: 'shape',
+    id: 'separator',
+    content: {
+      shape: 'rect',
+      fill: `${colors.text}33`, // accent color at 20% opacity
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('42%', accentLayout),
+      width: '30%',
+      height: '2px',
+      anchor: 'center',
+    },
+  });
+
+  // Definition text
+  layers.push({
+    type: 'text',
+    id: 'definition',
+    content: {
+      text: definition,
+      style: {
+        fontSize: defFontSize,
+        color: theme.colors.text,
+        textAlign: 'center',
+        lineHeight: 1.6,
+        maxLines: 4,
+        shadow: !!accentImage,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('55%', accentLayout),
+      width: accentLayout.textWidth,
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 1, delay: 0.8 },
+  });
+
+  // Origin if provided
+  if (origin) {
+    layers.push({
+      type: 'text',
+      id: 'origin',
+      content: {
+        text: origin,
+        style: {
+          fontSize: originFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+          shadow: !!accentImage,
+        },
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY('78%', accentLayout),
+        anchor: 'center',
+      },
+      animation: { type: 'fadeIn', duration: 0.8, delay: 1.5 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/factCard.ts

@@ -0,0 +1,114 @@
+/**
+ * Fact Card Template
+ *
+ * Key fact with explanation and optional source.
+ * Useful for presenting important information clearly.
+ * Adapts font sizes and positioning for different viewports.
+ *
+ * Supports optional accent images that appear as tasteful side/bottom strips.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { FactCardInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
+import { createBackgroundLayer } from './captionUtils.js';
+
+export function factCard(input: FactCardInput, context: TemplateContext): Layer[] {
+  const { fact, explanation, source, accentImage } = input;
+  const { theme } = context;
+
+  // Get layout adjustments if accent image is present
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+
+  // Scale font sizes for viewport
+  const factFontSize = scaledFontSize(56, context, true);
+  const explainFontSize = scaledFontSize(32, context, false);
+  const sourceFontSize = scaledFontSize(20, context, false);
+
+  const layers: Layer[] = [
+    createBackgroundLayer(
+      'bg',
+      `linear-gradient(170deg, #1e2030 0%, ${theme.colors.background} 100%)`,
+    ),
+  ];
+
+  // Add accent image layers (behind text, after background)
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+
+  // Fact (main statement)
+  layers.push({
+    type: 'text',
+    id: 'fact',
+    content: {
+      text: fact,
+      style: {
+        fontSize: factFontSize,
+        fontWeight: 'bold',
+        color: theme.colors.text,
+        textAlign: 'center',
+        lineHeight: 1.4,
+        shadow: true,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('35%', accentLayout),
+      width: accentLayout.textWidth,
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 1.5 },
+  });
+
+  // Explanation
+  layers.push({
+    type: 'text',
+    id: 'explanation',
+    content: {
+      text: explanation,
+      style: {
+        fontSize: explainFontSize,
+        color: theme.colors.textMuted,
+        textAlign: 'center',
+        lineHeight: 1.5,
+        shadow: !!accentImage,
+      },
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY('60%', accentLayout),
+      width: accentLayout.textWidth,
+      anchor: 'center',
+    },
+    animation: { type: 'fadeIn', duration: 1, delay: 0.8 },
+  });
+
+  // Add source if provided
+  if (source) {
+    layers.push({
+      type: 'text',
+      id: 'source',
+      content: {
+        text: source,
+        style: {
+          fontSize: sourceFontSize,
+          color: theme.colors.textMuted,
+          textAlign: 'center',
+          shadow: !!accentImage,
+        },
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY('85%', accentLayout),
+        anchor: 'center',
+      },
+      animation: { type: 'fadeIn', duration: 0.8, delay: 1.5 },
+    });
+  }
+
+  return layers;
+}

package/src/doc/templates/fullBleedQuote.ts

@@ -0,0 +1,59 @@
+/**
+ * Full Bleed Quote Template
+ *
+ * Short dramatic text filling the viewport like a movie title card.
+ * Designed for punchy text under 60 characters. Uses massive font
+ * centered on a dark vignette background.
+ *
+ * This is shared code used by both site and efb-app doc renderers.
+ */
+
+import type { Layer } from '../../schemas/Doc.js';
+import type { FullBleedQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { resolveColorScheme } from '../utils/themeUtils.js';
+
+export function fullBleedQuote(input: FullBleedQuoteInput, context: TemplateContext): Layer[] {
+  const { text, colorScheme = 'blue' } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+
+  // Massive font for dramatic impact
+  const textFontSize = scaledFontSize(120, context, true);
+
+  return [
+    // Background — dark radial vignette for cinematic feel
+    {
+      type: 'shape',
+      id: 'bg',
+      content: {
+        shape: 'rect',
+        fill: `radial-gradient(ellipse at 50% 50%, ${theme.colors.backgroundLight} 0%, #000000 100%)`,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    },
+    // The text — massive, centered
+    {
+      type: 'text',
+      id: 'impact-text',
+      content: {
+        text,
+        style: {
+          fontSize: textFontSize,
+          fontWeight: 'bold',
+          color: colors.text,
+          textAlign: 'center',
+          lineHeight: 1.2,
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: '50%',
+        anchor: 'center',
+        width: '85%',
+      },
+      animation: { type: 'fadeIn', duration: 1.5 },
+    },
+  ];
+}

package/src/doc/templates/imageWithCaption.ts

@@ -0,0 +1,167 @@
+/**
+ * Image With Caption Template
+ *
+ * Full-screen background image with text overlay.
+ * Supports Ken Burns animation effects (zoom, pan).
+ * Adapts caption positioning and font sizes 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 { ImageWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
+import { scaledFontSize } from '../../schemas/BlockTemplates.js';
+import { cleanCaption } from './captionUtils.js';
+import { mapAmbientMotion } from './accentImage.js';
+
+export function imageWithCaption(input: ImageWithCaptionInput, context: TemplateContext): Layer[] {
+  const {
+    imageSrc,
+    imageAlt,
+    caption: rawCaption,
+    captionPosition: _captionPosition = 'bottom',
+    ambientMotion,
+    isTitle,
+    subtitle,
+    imageCredit,
+    imageLicense,
+  } = input;
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+
+  // Scale font sizes for viewport
+  const captionFontSize = scaledFontSize(36, context, false);
+  const titleFontSize = scaledFontSize(96, context, true);
+  const subtitleFontSize = scaledFontSize(36, context, false);
+
+  // Determine animation based on ambientMotion setting
+  // Support both new 'ambientMotion' and legacy 'kenBurns' property
+  const legacyKenBurns = (input as unknown as Record<string, unknown>).kenBurns as
+    | string
+    | undefined;
+  const motion: string | undefined = ambientMotion || legacyKenBurns;
+  const imageAnimation = mapAmbientMotion(motion);
+
+  const layers: Layer[] = [
+    // Background image
+    {
+      type: 'image',
+      id: 'bg-image',
+      content: {
+        src: imageSrc,
+        alt: imageAlt,
+        fit: 'cover',
+        credit: imageCredit,
+        license: imageLicense,
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+      animation: imageAnimation,
+    },
+  ];
+
+  // TITLE MODE: Large centered title over hero image (like cover slide)
+  if (isTitle && caption) {
+    // Full gradient overlay for title readability (similar to cover slide)
+    layers.push({
+      type: 'shape',
+      id: 'title-gradient',
+      content: {
+        shape: 'rect',
+        fill: 'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 70%, transparent 100%)',
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    });
+
+    // Title text - large and centered in lower portion
+    layers.push({
+      type: 'text',
+      id: 'title',
+      content: {
+        text: caption,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: 'bold',
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: subtitle ? '70%' : '75%',
+        anchor: 'center',
+        width: layout.maxTextWidth,
+      },
+      animation: { type: 'fadeIn', duration: 0.8 },
+    });
+
+    // Optional subtitle
+    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: '82%',
+          anchor: 'center',
+          width: layout.maxTextWidth,
+        },
+        animation: { type: 'fadeIn', duration: 0.8, delay: 0.2 },
+      });
+    }
+
+    return layers;
+  }
+
+  // STANDARD MODE: Caption at bottom
+  if (caption) {
+    // Subtle gradient at bottom for caption readability (raised above media controls)
+    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: '65%',
+        width: '100%',
+        height: '35%',
+      },
+    });
+
+    // Caption text - raised above media controls
+    layers.push({
+      type: 'text',
+      id: 'caption',
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: 'center',
+          shadow: true,
+        },
+      },
+      position: {
+        x: '50%',
+        y: '82%',
+        anchor: 'center',
+        width: layout.maxTextWidth,
+      },
+      animation: { type: 'fadeIn', duration: 1.5, delay: 0.5 },
+    });
+  }
+
+  return layers;
+}