@bendyline/squisq 2.0.1 → 2.2.0

package/src/doc/templates/photoGrid.ts

@@ -1,190 +0,0 @@
-/**
- * Photo Grid Template
- *
- * Displays 2-4 images in a tiled layout for visual variety.
- * Layout adapts based on image count and viewport orientation:
- *
- * Landscape:
- * - 2 images: side-by-side 50/50
- * - 3 images: one large left (60%) + two stacked right
- * - 4 images: 2x2 grid
- *
- * Portrait (9:16): images stack horizontally (top/bottom) instead of
- * side-by-side, giving each image full width on narrow screens.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { PhotoGridInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { getThemeFont, themedFontSize, themedImageTreatment } from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { cleanCaption } from './captionUtils.js';
-
-/** Gap between images as percentage */
-const GAP = 1.2;
-
-export function photoGrid(input: PhotoGridInput, context: TemplateContext): Layer[] {
-  const { images, caption: rawCaption, ambientMotion } = input;
-
-  // Guard: images array is required
-  if (!images || images.length === 0) return [];
-
-  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
-  const { theme, layout } = context;
-
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-
-  const layers: Layer[] = [
-    // Theme surface background (visible in gaps between images)
-    {
-      type: 'shape',
-      id: 'bg',
-      content: { shape: 'rect', fill: theme.colors.background },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  const gridHeight = 100;
-
-  // Generate image positions based on count; stack vertically in portrait
-  const positions = getGridPositions(images.length, gridHeight, layout.stackColumns);
-
-  for (let i = 0; i < Math.min(images.length, 4); i++) {
-    const img = images[i];
-    const pos = positions[i];
-
-    // Placeholder behind image (visible if image fails to load)
-    layers.push({
-      type: 'shape',
-      id: `grid-placeholder-${i}`,
-      content: { shape: 'rect', fill: theme.colors.background },
-      position: { x: `${pos.x}%`, y: `${pos.y}%`, width: `${pos.w}%`, height: `${pos.h}%` },
-    });
-
-    // Image layer (covers placeholder when loaded)
-    layers.push({
-      type: 'image',
-      id: `grid-img-${i}`,
-      content: {
-        src: img.src,
-        alt: img.alt,
-        fit: 'cover',
-        credit: img.credit,
-        license: img.license,
-        ...(treatment ? { treatment } : {}),
-      },
-      position: {
-        x: `${pos.x}%`,
-        y: `${pos.y}%`,
-        width: `${pos.w}%`,
-        height: `${pos.h}%`,
-      },
-      // Apply ambient motion to the first (largest) image only
-      animation:
-        i === 0 && ambientMotion
-          ? { type: ambientMotion, duration: 15 }
-          : { type: 'fadeIn', duration: 1, delay: 0.2 * i },
-    });
-  }
-
-  // Caption in a compact translucent chip above player controls. Long
-  // archival/Wikimedia descriptions are intentionally clamped.
-  if (caption) {
-    const captionFontSize = themedFontSize(layout.stackColumns ? 24 : 26, context, false);
-    const captionY = layout.stackColumns ? '78%' : '74%';
-    const captionBgY = layout.stackColumns ? '72%' : '68%';
-    const captionHeight = layout.stackColumns ? '13%' : '16%';
-    const bg = theme.colors.background;
-
-    layers.push({
-      type: 'shape',
-      id: 'caption-bg',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(90deg, ${withAlpha(bg, 0)}, ${withAlpha(bg, 0.78)} 16%, ${withAlpha(bg, 0.78)} 84%, ${withAlpha(bg, 0)})`,
-      },
-      position: { x: 0, y: captionBgY, width: '100%', height: captionHeight },
-    });
-
-    layers.push({
-      type: 'text',
-      id: 'caption',
-      content: {
-        text: caption,
-        style: {
-          fontSize: captionFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.text,
-          textAlign: 'center',
-          shadow: true,
-          lineHeight: 1.18,
-          maxLines: layout.stackColumns ? 2 : 1,
-        },
-      },
-      position: {
-        x: '50%',
-        y: captionY,
-        anchor: 'center',
-        width: '78%',
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 0.5 },
-    });
-  }
-
-  return layers;
-}
-
-interface GridPos {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-}
-
-function getGridPositions(count: number, gridHeight: number, stacked: boolean): GridPos[] {
-  const halfW = 50 - GAP / 2;
-  const halfH = gridHeight / 2 - GAP / 2;
-
-  switch (count) {
-    case 2:
-      if (stacked) {
-        // Portrait: stack top/bottom
-        return [
-          { x: 0, y: 0, w: 100, h: halfH },
-          { x: 0, y: gridHeight / 2 + GAP / 2, w: 100, h: halfH },
-        ];
-      }
-      return [
-        { x: 0, y: 0, w: halfW, h: gridHeight },
-        { x: 50 + GAP / 2, y: 0, w: halfW, h: gridHeight },
-      ];
-    case 3: {
-      if (stacked) {
-        // Portrait: stack all three vertically
-        const thirdH = gridHeight / 3 - (GAP * 2) / 3;
-        return [
-          { x: 0, y: 0, w: 100, h: thirdH },
-          { x: 0, y: gridHeight / 3 + GAP / 3, w: 100, h: thirdH },
-          { x: 0, y: (gridHeight * 2) / 3 + (GAP * 2) / 3, w: 100, h: thirdH },
-        ];
-      }
-      const leftW = 60 - GAP / 2;
-      const rightW = 40 - GAP / 2;
-      return [
-        { x: 0, y: 0, w: leftW, h: gridHeight },
-        { x: 60 + GAP / 2, y: 0, w: rightW, h: halfH },
-        { x: 60 + GAP / 2, y: gridHeight / 2 + GAP / 2, w: rightW, h: halfH },
-      ];
-    }
-    case 4:
-    default:
-      // 2x2 grid works well in both orientations
-      return [
-        { x: 0, y: 0, w: halfW, h: halfH },
-        { x: 50 + GAP / 2, y: 0, w: halfW, h: halfH },
-        { x: 0, y: gridHeight / 2 + GAP / 2, w: halfW, h: halfH },
-        { x: 50 + GAP / 2, y: gridHeight / 2 + GAP / 2, w: halfW, h: halfH },
-      ];
-  }
-}

package/src/doc/templates/pullQuote.ts

@@ -1,141 +0,0 @@
-/**
- * Pull Quote Template
- *
- * Quote text over a full-bleed background image with dark overlay.
- * Cinematic alternative to quoteBlock when a high-quality image is available.
- * Combines the visual impact of imageWithCaption with the text focus of quoteBlock.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { PullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  themedEntrance,
-  themedFontSize,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-import { estimateTextHeight } from './captionUtils.js';
-
-export function pullQuote(input: PullQuoteInput, context: TemplateContext): Layer[] {
-  const { text, attribution, backgroundImage, ambientMotion } = input;
-  const { viewport } = context;
-
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-
-  // Guard: backgroundImage is required
-  if (!backgroundImage?.src) return [];
-
-  const quoteFontSize = themedFontSize(52, context, true);
-  const attrFontSize = themedFontSize(26, context, false);
-  const decoFontSize = themedFontSize(200, context, true);
-  const quoteLineHeight = 1.4;
-  const quoteYPct = attribution ? 45 : 50;
-
-  const layers: Layer[] = [
-    // Full-bleed background image
-    {
-      type: 'image',
-      id: 'bg-image',
-      content: {
-        src: backgroundImage.src,
-        alt: backgroundImage.alt,
-        fit: 'cover',
-        credit: backgroundImage.credit,
-        license: backgroundImage.license,
-        ...(treatment ? { treatment } : {}),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-      animation: ambientMotion ? { type: ambientMotion, duration: 15 } : undefined,
-    },
-
-    // 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,
-          fontFamily: getThemeFont(context, 'title'),
-          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,
-          fontFamily: getThemeFont(context, 'title'),
-          color: '#ffffff',
-          textAlign: 'center',
-          lineHeight: quoteLineHeight,
-          shadow: true,
-        },
-      },
-      position: {
-        x: '50%',
-        y: `${quoteYPct}%`,
-        anchor: 'center',
-        width: '72%',
-      },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 2 }),
-    },
-  ];
-
-  // Attribution \u2014 hangs just below the quote's estimated bottom edge so
-  // the two read as one lockup instead of stranding near the bottom.
-  if (attribution) {
-    const quoteWidthPx = 0.72 * viewport.width;
-    const quoteHeightPx = estimateTextHeight(text, quoteFontSize, quoteWidthPx, quoteLineHeight);
-    const attrYPct = Math.min(
-      82,
-      quoteYPct + ((quoteHeightPx / 2 + quoteFontSize * 1.7) / viewport.height) * 100,
-    );
-    layers.push({
-      type: 'text',
-      id: 'attribution',
-      content: {
-        text: `\u2014 ${attribution}`,
-        style: {
-          fontSize: attrFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: 'rgba(255, 255, 255, 0.85)',
-          textAlign: 'center',
-          shadow: true,
-        },
-      },
-      position: {
-        x: '50%',
-        y: `${attrYPct}%`,
-        anchor: 'center',
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 1.5 },
-    });
-  }
-
-  return layers;
-}

package/src/doc/templates/quoteBlock.ts

@@ -1,141 +0,0 @@
-/**
- * Quote Block Template
- *
- * Large centered quote with optional attribution, composed as one
- * vertically-centered lockup: the attribution hangs a fixed distance
- * below the quote's estimated bottom edge instead of being pinned to a
- * far-away layout slot.
- * 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 { QuoteBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  shouldUseShadow,
-  themedEntrance,
-  themedFontSize,
-  themedSurfaceGradient,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
-import { createBackgroundLayer, estimateTextHeight } from './captionUtils.js';
-
-export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): Layer[] {
-  const { quote, attribution, accentImage } = input;
-  const { theme, viewport } = context;
-
-  // Get layout adjustments if accent image is present
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-
-  // Scale font sizes for viewport
-  const quoteFontSize = themedFontSize(48, context, true);
-  const attrFontSize = themedFontSize(26, context, false);
-  const quoteLineHeight = Math.max(theme.typography.titleLineHeight ?? 1.4, 1.25);
-
-  // Decorative quotation mark font size
-  const decorativeQuoteFontSize = themedFontSize(280, context, true);
-
-  const layers: Layer[] = [createBackgroundLayer('bg', themedSurfaceGradient(context, 160))];
-
-  // Add accent image layers (behind text, after background)
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment),
-      ),
-    );
-  }
-
-  // Decorative opening quotation mark — oversized, low-opacity behind the
-  // quote. Derived from the theme text color so it stays a subtle ornament
-  // on light and dark surfaces alike (a hard-coded white glyph was
-  // invisible on both).
-  layers.push({
-    type: 'text',
-    id: 'deco-quote',
-    content: {
-      text: '“',
-      style: {
-        fontSize: decorativeQuoteFontSize,
-        fontFamily: getThemeFont(context, 'title'),
-        color: withAlpha(theme.colors.text, 0.09),
-        textAlign: 'center',
-      },
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY('26%', accentLayout),
-      anchor: 'center',
-    },
-  });
-
-  // Quote text — optically centered, nudged up slightly when an
-  // attribution hangs below it.
-  const quoteYPct = attribution ? 45 : 50;
-  layers.push({
-    type: 'text',
-    id: 'quote',
-    content: {
-      text: quote,
-      style: {
-        fontSize: quoteFontSize,
-        fontFamily: getThemeFont(context, 'title'),
-        color: theme.colors.text,
-        textAlign: 'center',
-        lineHeight: quoteLineHeight,
-        shadow: shouldUseShadow(context),
-      },
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY(`${quoteYPct}%`, accentLayout),
-      anchor: 'center',
-      width: accentLayout.textWidth,
-    },
-    animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 2 }),
-  });
-
-  // Attribution hangs just below the quote's estimated bottom edge, so
-  // the two read as one lockup instead of the attribution stranding near
-  // the bottom of the block.
-  if (attribution) {
-    const quoteWidthPx = (parseFloat(accentLayout.textWidth) / 100) * viewport.width;
-    const quoteHeightPx = estimateTextHeight(quote, quoteFontSize, quoteWidthPx, quoteLineHeight);
-    const gapPx = quoteFontSize * 1.7;
-    const attrYPct = Math.min(
-      82,
-      quoteYPct + ((quoteHeightPx / 2 + gapPx) / viewport.height) * 100,
-    );
-
-    layers.push({
-      type: 'text',
-      id: 'attribution',
-      content: {
-        text: `— ${attribution}`,
-        style: {
-          fontSize: attrFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-          textAlign: 'center',
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY(`${attrYPct}%`, accentLayout),
-        anchor: 'center',
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 1.5 },
-    });
-  }
-
-  return layers;
-}

package/src/doc/templates/registry.ts

@@ -1,88 +0,0 @@
-/** Runtime registry composition for built-in and document-scoped templates. */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type {
-  TemplateBlock,
-  TemplateContext,
-  TemplateRegistry,
-} from '../../schemas/BlockTemplates.js';
-import type { CustomTemplateDefinition } from '../../schemas/CustomTemplates.js';
-import { makeCustomTemplateFn } from './customTemplate.js';
-
-import { titleBlock } from './titleBlock.js';
-import { sectionHeader } from './sectionHeader.js';
-import { statHighlight } from './statHighlight.js';
-import { quoteBlock } from './quoteBlock.js';
-import { factCard } from './factCard.js';
-import { twoColumn } from './twoColumn.js';
-import { dateEvent } from './dateEvent.js';
-import { imageWithCaption } from './imageWithCaption.js';
-import { leftFeature, rightFeature } from './featureBlock.js';
-import { mapBlock } from './mapBlock.js';
-import { fullBleedQuote } from './fullBleedQuote.js';
-import { listBlock } from './listBlock.js';
-import { photoGrid } from './photoGrid.js';
-import { definitionCard } from './definitionCard.js';
-import { comparisonBar } from './comparisonBar.js';
-import { pullQuote } from './pullQuote.js';
-import { videoWithCaption } from './videoWithCaption.js';
-import { videoPullQuote } from './videoPullQuote.js';
-import { dataTable } from './dataTable.js';
-import { diagramBlock } from './diagramBlock.js';
-import { treeBlock } from './treeBlock.js';
-import { timelineBlock } from './timelineBlock.js';
-import { drawingBlock } from './drawingBlock.js';
-import { layoutBlock } from './layoutBlock.js';
-
-/** Built-in templates keyed by the ids used in document annotations. */
-export const templateRegistry: TemplateRegistry = {
-  title: titleBlock,
-  sectionHeader,
-  statHighlight,
-  quote: quoteBlock,
-  factCard,
-  twoColumn,
-  dateEvent,
-  imageWithCaption,
-  leftFeature,
-  rightFeature,
-  map: mapBlock,
-  fullBleedQuote,
-  list: listBlock,
-  photoGrid,
-  definitionCard,
-  comparisonBar,
-  pullQuote,
-  videoWithCaption,
-  videoPullQuote,
-  dataTable,
-  diagram: diagramBlock,
-  tree: treeBlock,
-  timeline: timelineBlock,
-  layout: layoutBlock,
-  drawing: drawingBlock,
-};
-
-/** Broad runtime view used after a template name has selected its function. */
-export type RuntimeTemplateRegistry = Record<
-  string,
-  (input: TemplateBlock, context: TemplateContext) => Layer[]
->;
-
-/** Merge document-scoped templates without mutating the built-in registry. */
-export function buildRegistry(
-  custom?: readonly CustomTemplateDefinition[],
-): RuntimeTemplateRegistry {
-  const merged: RuntimeTemplateRegistry = {
-    ...(templateRegistry as unknown as RuntimeTemplateRegistry),
-  };
-  if (custom) {
-    for (const definition of custom) {
-      if (merged[definition.name]) continue;
-      merged[definition.name] = makeCustomTemplateFn(
-        definition,
-      ) as unknown as RuntimeTemplateRegistry[string];
-    }
-  }
-  return merged;
-}

package/src/doc/templates/sectionHeader.ts

@@ -1,120 +0,0 @@
-/**
- * Section Header Template
- *
- * Section title card with optional background image.
- * Used to introduce new sections of a story.
- * When an image is provided, displays like a title slide with the image as background.
- * Without an image, falls back to a colored background.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer, AnimationType } from '../../schemas/Doc.js';
-import type { SectionHeaderInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  resolveColorScheme,
-  getThemeFont,
-  shouldUseShadow,
-  themedEntrance,
-  themedFontSize,
-  themedScrim,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-
-export function sectionHeader(input: SectionHeaderInput, context: TemplateContext): Layer[] {
-  const { title = '', colorScheme = 'blue', imageSrc, imageAlt, ambientMotion } = input;
-  const { theme, layout } = context;
-
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const colors = resolveColorScheme(context, colorScheme);
-
-  // Scale font sizes for viewport. Section dividers are the loudest
-  // interstitial in a doc, so the title sits a step above ordinary
-  // content-block headings.
-  const titleFontSize = themedFontSize(84, context, true);
-
-  const layers: Layer[] = [];
-
-  // Background - either image or solid color
-  if (imageSrc) {
-    // Image background with Ken Burns effect
-    layers.push({
-      type: 'image',
-      id: 'bg-image',
-      content: {
-        src: imageSrc,
-        alt: imageAlt || title,
-        fit: 'cover',
-        ...(treatment ? { treatment } : {}),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-      animation: ambientMotion
-        ? { type: ambientMotion as AnimationType, duration: 8 }
-        : { type: 'slowZoom', duration: 8, direction: 'in' },
-    });
-
-    // Theme-tinted overlay for text readability — light themes get a
-    // light scrim with dark theme text, dark themes the familiar dark one.
-    layers.push({
-      type: 'shape',
-      id: 'overlay',
-      content: {
-        shape: 'rect',
-        fill: themedScrim(context),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    });
-  } else {
-    // Solid color background
-    layers.push({
-      type: 'shape',
-      id: 'bg',
-      content: {
-        shape: 'rect',
-        fill: colors.bg,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    });
-
-    // Decorative lines above and below title
-    layers.push({
-      type: 'shape',
-      id: 'line-top',
-      content: { shape: 'rect', fill: `${colors.text}33` },
-      position: { x: '50%', y: '40%', width: '20%', height: '2px', anchor: 'center' },
-    });
-    layers.push({
-      type: 'shape',
-      id: 'line-bottom',
-      content: { shape: 'rect', fill: `${colors.text}33` },
-      position: { x: '50%', y: '60%', width: '20%', height: '2px', anchor: 'center' },
-    });
-  }
-
-  // Section title — theme text over the theme-tinted scrim (readable by
-  // construction), scheme text on the solid-color fallback
-  layers.push({
-    type: 'text',
-    id: 'title',
-    content: {
-      text: title,
-      style: {
-        fontSize: titleFontSize,
-        fontFamily: getThemeFont(context, 'title'),
-        fontWeight: 'bold',
-        color: imageSrc ? theme.colors.text : colors.text,
-        textAlign: 'center',
-        shadow: shouldUseShadow(context),
-      },
-    },
-    position: {
-      x: '50%',
-      y: '50%',
-      anchor: 'center',
-      width: layout.maxTextWidth,
-    },
-    animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 1.5 }),
-  });
-
-  return layers;
-}