@bendyline/squisq 1.3.0 → 1.4.0

package/dist/chunk-5WFRKURX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schemas/Viewport.ts","../src/schemas/LayoutStrategy.ts","../src/schemas/BlockTemplates.ts"],"sourcesContent":["/**\n * Viewport Configuration\n *\n * Defines viewport dimensions for doc rendering across different aspect ratios.\n * Templates use this configuration to adapt their layouts appropriately.\n *\n * Supported aspect ratios:\n * - landscape (16:9) - Default, standard video/presentation format\n * - portrait (9:16) - Vertical video, mobile stories\n * - square (1:1) - Social media posts\n * - standard (4:3) - Legacy presentation format\n */\n\n/**\n * Viewport configuration for doc rendering.\n */\nexport interface ViewportConfig {\n  /** Canonical width in virtual pixels */\n  width: number;\n  /** Canonical height in virtual pixels */\n  height: number;\n  /** Human-readable name for debugging/display */\n  name: string;\n}\n\n/**\n * Standard viewport presets for common aspect ratios.\n */\nexport const VIEWPORT_PRESETS = {\n  /** 16:9 landscape (default, 1080p) */\n  landscape: { width: 1920, height: 1080, name: '16:9 Landscape' },\n  /** 9:16 portrait (vertical video, stories) */\n  portrait: { width: 1080, height: 1920, name: '9:16 Portrait' },\n  /** 1:1 square (social media) */\n  square: { width: 1080, height: 1080, name: '1:1 Square' },\n  /** 4:3 standard (legacy) */\n  standard: { width: 1440, height: 1080, name: '4:3 Standard' },\n} as const;\n\n/**\n * Viewport preset name.\n */\nexport type ViewportPreset = keyof typeof VIEWPORT_PRESETS;\n\n/**\n * Viewport orientation derived from aspect ratio.\n */\nexport type ViewportOrientation = 'landscape' | 'portrait' | 'square';\n\n/**\n * Get a viewport configuration from a preset name or return the config if already a ViewportConfig.\n */\nexport function getViewport(viewport: ViewportPreset | ViewportConfig): ViewportConfig {\n  if (typeof viewport === 'string') {\n    return VIEWPORT_PRESETS[viewport];\n  }\n  return viewport;\n}\n\n/**\n * Calculate font scale factor for a viewport.\n * Based on diagonal pixels relative to 1080p landscape reference.\n * This ensures text remains readable across different viewport sizes.\n */\nconst REFERENCE_DIAGONAL = Math.sqrt(1920 * 1920 + 1080 * 1080); // ~2203\n\nexport function calculateFontScale(viewport: ViewportConfig): number {\n  const currentDiagonal = Math.sqrt(\n    viewport.width * viewport.width + viewport.height * viewport.height,\n  );\n  return currentDiagonal / REFERENCE_DIAGONAL;\n}\n\n/**\n * Determine if viewport is landscape, portrait, or square.\n */\nexport function getViewportOrientation(viewport: ViewportConfig): ViewportOrientation {\n  const ratio = viewport.width / viewport.height;\n  // Allow small tolerance for \"square\" classification\n  if (Math.abs(ratio - 1) < 0.05) return 'square';\n  return ratio > 1 ? 'landscape' : 'portrait';\n}\n\n/**\n * Get aspect ratio as a string (e.g., \"16:9\", \"9:16\", \"1:1\").\n */\nexport function getAspectRatioString(viewport: ViewportConfig): string {\n  const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));\n  const divisor = gcd(viewport.width, viewport.height);\n  return `${viewport.width / divisor}:${viewport.height / divisor}`;\n}\n","/**\n * Layout Strategy\n *\n * Provides orientation-specific layout hints for slide templates.\n * Templates use these hints to position content appropriately for\n * different aspect ratios (landscape, portrait, square).\n *\n * Key adaptations by orientation:\n * - Portrait: Larger relative text, stacked layouts instead of side-by-side\n * - Square: Balanced layout with moderate adjustments\n * - Landscape: Default/reference layout\n */\n\nimport type { ViewportOrientation, ViewportConfig } from './Viewport.js';\nimport { calculateFontScale } from './Viewport.js';\n\n/**\n * Layout hints for template positioning based on orientation.\n */\nexport interface LayoutHints {\n  /** Primary content Y position (percentage string, e.g., \"35%\") */\n  primaryY: string;\n  /** Secondary content Y position (percentage string) */\n  secondaryY: string;\n  /** Tertiary/detail Y position (percentage string) */\n  tertiaryY: string;\n  /** Title font size multiplier (relative to base) */\n  titleScale: number;\n  /** Body text font size multiplier (relative to base) */\n  bodyScale: number;\n  /** Two-column: left X position (percentage string) */\n  columnLeftX: string;\n  /** Two-column: right X position (percentage string) */\n  columnRightX: string;\n  /** Two-column in portrait: top Y position for stacked layout */\n  columnTopY: string;\n  /** Two-column in portrait: bottom Y position for stacked layout */\n  columnBottomY: string;\n  /** Whether two-column should stack vertically */\n  stackColumns: boolean;\n  /** Max text width (percentage string) for wrapping */\n  maxTextWidth: string;\n  /** Horizontal padding from edges (percentage string) */\n  horizontalPadding: string;\n  /** Caption position Y for imageWithCaption (percentage string) */\n  captionY: string;\n  /** Caption font size multiplier */\n  captionScale: number;\n}\n\n/**\n * Layout configurations by orientation.\n */\nconst LAYOUT_CONFIGS: Record<ViewportOrientation, LayoutHints> = {\n  landscape: {\n    primaryY: '35%',\n    secondaryY: '55%',\n    tertiaryY: '75%',\n    titleScale: 1.0,\n    bodyScale: 1.0,\n    columnLeftX: '25%',\n    columnRightX: '75%',\n    columnTopY: '35%',\n    columnBottomY: '65%',\n    stackColumns: false,\n    maxTextWidth: '80%',\n    horizontalPadding: '10%',\n    captionY: '85%',\n    captionScale: 1.0,\n  },\n  portrait: {\n    // Content positioned higher for thumb-reach zone on mobile\n    primaryY: '25%',\n    secondaryY: '42%',\n    tertiaryY: '58%',\n    // Titles scale down for narrower width; body text scales up to fill vertical space\n    titleScale: 0.7,\n    bodyScale: 1.5,\n    // Stacked columns instead of side-by-side\n    columnLeftX: '50%',\n    columnRightX: '50%',\n    columnTopY: '30%',\n    columnBottomY: '55%',\n    stackColumns: true,\n    // Wider relative to viewport to use available space\n    maxTextWidth: '90%',\n    horizontalPadding: '5%',\n    captionY: '75%',\n    captionScale: 0.85,\n  },\n  square: {\n    primaryY: '30%',\n    secondaryY: '50%',\n    tertiaryY: '70%',\n    titleScale: 0.85,\n    bodyScale: 0.9,\n    columnLeftX: '25%',\n    columnRightX: '75%',\n    columnTopY: '35%',\n    columnBottomY: '65%',\n    stackColumns: false,\n    maxTextWidth: '85%',\n    horizontalPadding: '7.5%',\n    captionY: '82%',\n    captionScale: 0.9,\n  },\n};\n\n/**\n * Get layout hints for a given orientation.\n */\nexport function getLayoutHints(orientation: ViewportOrientation): LayoutHints {\n  return LAYOUT_CONFIGS[orientation];\n}\n\n/**\n * Calculate a scaled font size based on viewport and layout hints.\n *\n * @param basePx - Base font size in pixels (designed for 1920x1080)\n * @param viewport - Target viewport configuration\n * @param orientation - Viewport orientation\n * @param isTitle - Whether this is title text (uses titleScale) or body (uses bodyScale)\n */\nexport function scaledFontSize(\n  basePx: number,\n  viewport: ViewportConfig,\n  orientation: ViewportOrientation,\n  isTitle: boolean = false,\n): number {\n  const fontScale = calculateFontScale(viewport);\n  const layout = getLayoutHints(orientation);\n  const typeScale = isTitle ? layout.titleScale : layout.bodyScale;\n  return Math.round(basePx * fontScale * typeScale);\n}\n\n/**\n * Get position for two-column layout based on orientation.\n * Returns { left: {x, y}, right: {x, y} } positions.\n */\nexport function getTwoColumnPositions(orientation: ViewportOrientation): {\n  left: { x: string; y: string };\n  right: { x: string; y: string };\n} {\n  const layout = getLayoutHints(orientation);\n\n  if (layout.stackColumns) {\n    // Portrait: stack vertically\n    return {\n      left: { x: '50%', y: layout.columnTopY },\n      right: { x: '50%', y: layout.columnBottomY },\n    };\n  }\n\n  // Landscape/square: side by side\n  return {\n    left: { x: layout.columnLeftX, y: '50%' },\n    right: { x: layout.columnRightX, y: '50%' },\n  };\n}\n\n/**\n * Get safe text bounds for a given orientation.\n * Returns margins to keep text away from edges.\n */\nexport function getSafeTextBounds(orientation: ViewportOrientation): {\n  left: string;\n  right: string;\n  top: string;\n  bottom: string;\n} {\n  const layout = getLayoutHints(orientation);\n  return {\n    left: layout.horizontalPadding,\n    right: layout.horizontalPadding,\n    top: '10%',\n    bottom: '10%',\n  };\n}\n","/**\n * Block Templates Schema\n *\n * Defines a template system for AI-generated doc blocks. Instead of\n * specifying low-level layers, positions, and animations, AI can use\n * high-level templates like \"title\" or \"statHighlight\" with simple\n * content parameters.\n *\n * Templates are expanded into full Block structures at render time,\n * ensuring consistent styling and reducing AI generation errors.\n *\n * Template Types:\n * - title: Doc intro with title + subtitle\n * - sectionHeader: Colored section divider\n * - statHighlight: Big number/stat with description\n * - quote: Large centered quote\n * - factCard: Key fact with explanation\n * - twoColumn: Side-by-side comparison\n * - dateEvent: Timeline-style date + description\n * - imageWithCaption: Image with text overlay\n */\n\nimport type { Layer, Block, Transition, MapTileStyle, MapMarker } from './Doc.js';\nimport type { ViewportConfig, ViewportOrientation } from './Viewport.js';\nimport type { LayoutHints } from './LayoutStrategy.js';\nimport type { Theme } from './Theme.js';\nimport { VIEWPORT_PRESETS, getViewportOrientation, calculateFontScale } from './Viewport.js';\nimport { getLayoutHints, scaledFontSize as scaleFontSize } from './LayoutStrategy.js';\n\n/**\n * Name of a color scheme defined in the active theme's `colorSchemes` map.\n * Templates reference schemes by name (e.g. 'blue', 'green') and the theme\n * resolves them to actual colors at render time via `resolveColorScheme()`.\n */\nexport type ColorScheme = string;\n\n/**\n * Default font family for doc text.\n * PT Serif provides a classic, readable appearance for documentary-style content.\n * Used as a fallback in TextLayer when no font is specified.\n */\nexport const DEFAULT_DOC_FONT = 'system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif';\n\n/**\n * Default font family for titles.\n */\nexport const DEFAULT_TITLE_FONT = 'Georgia, \"Times New Roman\", serif';\n\n// ============================================\n// Accent Image System\n// ============================================\n\n/**\n * Position options for accent images on text-based blocks.\n * Accents are tasteful image additions that complement rather than overwhelm text.\n */\nexport type AccentPosition =\n  | 'left-strip' // Vertical strip on left (25-30% width), text shifts right\n  | 'right-strip' // Vertical strip on right (25-30% width), text shifts left\n  | 'bottom-strip' // Horizontal strip at bottom (25-30% height), text shifts up\n  | 'corner-inset'; // Small inset image in corner with vignette edge\n\n/**\n * Accent image configuration for text-based blocks.\n * When present, the template adjusts layout to accommodate the image tastefully.\n */\nexport interface AccentImage {\n  /** Path to image file (relative to article media dir) */\n  src: string;\n  /** Alt text for accessibility */\n  alt: string;\n  /** Where to position the accent image */\n  position: AccentPosition;\n  /** Ambient motion effect (subtle Ken Burns) */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n  /** Photo credit / artist name */\n  credit?: string;\n  /** License identifier (e.g., 'CC BY-SA 4.0') */\n  license?: string;\n}\n\n// ============================================\n// Template Input Types\n// ============================================\n\n/**\n * Base properties shared by all template blocks.\n */\ninterface BaseTemplateBlock {\n  /** Unique block ID */\n  id: string;\n  /** Block duration in seconds */\n  duration: number;\n  /** Which audio segment this block belongs to */\n  audioSegment: number;\n  /** Entry transition */\n  transition?: Transition;\n  /** Show doc's bottom layers (default: true) */\n  useBottomLayer?: boolean;\n  /** Show doc's top layers (default: true) */\n  useTopLayer?: boolean;\n  /**\n   * Start time within the audio segment when this content is spoken.\n   * Used to sync the block appearance with the narration.\n   * If not provided, blocks are distributed evenly across the segment.\n   */\n  sourceStartTime?: number;\n  /**\n   * Duration of the spoken content this block represents.\n   * Used with sourceStartTime to precisely position the block.\n   */\n  sourceDuration?: number;\n}\n\n/**\n * Title block - doc intro with large title and subtitle.\n */\nexport interface TitleBlockInput extends BaseTemplateBlock {\n  template: 'title';\n  /** Main title text */\n  title: string;\n  /** Subtitle or tagline (supports \\n for line breaks) */\n  subtitle?: string;\n  /** Background color (defaults to theme primary) */\n  backgroundColor?: string;\n}\n\n/**\n * Section header - section title card with optional background image.\n * Displays the section title prominently, optionally over an image.\n */\nexport interface SectionHeaderInput extends BaseTemplateBlock {\n  template: 'sectionHeader';\n  /** Section title */\n  title: string;\n  /** Color scheme for the section (used for fallback background) */\n  colorScheme?: ColorScheme;\n  /** Optional background image path */\n  imageSrc?: string;\n  /** Alt text for background image */\n  imageAlt?: string;\n  /** Ambient motion for background image */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n}\n\n/**\n * Stat highlight - big number with description and optional detail.\n */\nexport interface StatHighlightInput extends BaseTemplateBlock {\n  template: 'statHighlight';\n  /** The statistic (e.g., \"89%\", \"2x\", \"7 miles\") */\n  stat: string;\n  /** Description of what the stat means */\n  description: string;\n  /** Additional detail or context */\n  detail?: string;\n  /** Color scheme for the stat */\n  colorScheme?: ColorScheme;\n  /** Optional accent image to complement the text */\n  accentImage?: AccentImage;\n}\n\n/**\n * Quote block - large centered quote text.\n */\nexport interface QuoteBlockInput extends BaseTemplateBlock {\n  template: 'quote';\n  /** The quote text (supports \\n for line breaks) */\n  quote: string;\n  /** Attribution (author, source) */\n  attribution?: string;\n  /** Optional accent image to complement the text */\n  accentImage?: AccentImage;\n}\n\n/**\n * Fact card - key fact with explanation.\n */\nexport interface FactCardInput extends BaseTemplateBlock {\n  template: 'factCard';\n  /** The main fact or statement */\n  fact: string;\n  /** Explanation or context */\n  explanation: string;\n  /** Optional source citation */\n  source?: string;\n  /** Optional accent image to complement the text */\n  accentImage?: AccentImage;\n}\n\n/**\n * Two column - side-by-side comparison.\n */\nexport interface TwoColumnInput extends BaseTemplateBlock {\n  template: 'twoColumn';\n  /** Left column content */\n  left: {\n    label: string;\n    sublabel?: string;\n  };\n  /** Right column content */\n  right: {\n    label: string;\n    sublabel?: string;\n  };\n  /** Optional header above columns */\n  header?: string;\n  /** Color schemes for left and right */\n  leftColor?: ColorScheme;\n  rightColor?: ColorScheme;\n}\n\n/**\n * Date event - timeline-style date with description.\n */\nexport interface DateEventInput extends BaseTemplateBlock {\n  template: 'dateEvent';\n  /** The date (e.g., \"July 14, 1974\") */\n  date: string;\n  /** Description of what happened (supports \\n) */\n  description: string;\n  /** Optional footer text */\n  footer?: string;\n  /** Mood: 'neutral', 'somber', 'celebratory' */\n  mood?: 'neutral' | 'somber' | 'celebratory';\n  /** Optional accent image to complement the text */\n  accentImage?: AccentImage;\n}\n\n/**\n * Image with caption - background image with text overlay.\n */\nexport interface ImageWithCaptionInput extends BaseTemplateBlock {\n  template: 'imageWithCaption';\n  /** Path to image file */\n  imageSrc: string;\n  /** Alt text for accessibility */\n  imageAlt: string;\n  /** Caption text */\n  caption?: string;\n  /** Caption position */\n  captionPosition?: 'bottom' | 'top' | 'center';\n  /** Ambient motion effect: slow zoom or pan for visual interest */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n  /** When true, style caption as a title (larger, centered, prominent) */\n  isTitle?: boolean;\n  /** Optional subtitle shown below the title (only when isTitle is true) */\n  subtitle?: string;\n  /** Photo credit / artist name */\n  imageCredit?: string;\n  /** License identifier (e.g., 'CC BY-SA 4.0') */\n  imageLicense?: string;\n}\n\n/**\n * Shared fields for left/right feature blocks. A \"feature\" pairs an\n * image on one side of the block with a title and body paragraph on\n * the other — a common editorial layout for product highlights,\n * profile callouts, or section intros.\n */\ninterface FeatureInputBase extends BaseTemplateBlock {\n  /** Path to the feature image. */\n  imageSrc: string;\n  /** Alt text for accessibility. */\n  imageAlt?: string;\n  /**\n   * Explicit display width of the image, in pixels (typically pulled\n   * from a `<img width>` attribute when the WYSIWYG editor resized it).\n   * When set, the renderer treats the image as a sized asset and\n   * centers it inside its half with padding instead of stretching it\n   * to fill the cell.\n   */\n  imageWidth?: number;\n  /** Explicit display height of the image, in pixels. */\n  imageHeight?: number;\n  /** Heading / title text shown next to the image. */\n  title?: string;\n  /** Body text shown below the title. */\n  body?: string;\n}\n\n/**\n * Left feature — image on the left, title + body stacked on the right.\n */\nexport interface LeftFeatureInput extends FeatureInputBase {\n  template: 'leftFeature';\n}\n\n/**\n * Right feature — image on the right, title + body stacked on the left.\n */\nexport interface RightFeatureInput extends FeatureInputBase {\n  template: 'rightFeature';\n}\n\n/**\n * Map block - geographic map showing article location.\n *\n * Displays a map centered on given coordinates with optional title,\n * caption, and markers. Great for establishing geographic context.\n * See docs/MAP_TILES.md for available tile styles and attribution.\n */\nexport interface MapBlockInput extends BaseTemplateBlock {\n  template: 'map';\n  /** Map center coordinates */\n  center: {\n    lat: number;\n    lng: number;\n  };\n  /** Zoom level (4-16, typically 8-12 for regional context) */\n  zoom: number;\n  /** Map tile style (default: 'terrain') */\n  mapStyle?: MapTileStyle;\n  /** Optional title overlay at top */\n  title?: string;\n  /** Optional caption at bottom */\n  caption?: string;\n  /** Optional markers to show on map */\n  markers?: MapMarker[];\n  /** Ambient motion effect: slow zoom or pan for visual interest */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n  /** Pre-rendered static image path (set by prerender-maps command) */\n  staticSrc?: string;\n}\n\n/**\n * Full-bleed quote - dramatic short text filling the viewport.\n * Like a movie title card. For short, punchy sentences < 60 chars.\n */\nexport interface FullBleedQuoteInput extends BaseTemplateBlock {\n  template: 'fullBleedQuote';\n  /** Short dramatic text (< 60 chars recommended) */\n  text: string;\n  /** Color scheme for text tint */\n  colorScheme?: ColorScheme;\n}\n\n/**\n * List block - 3-5 items stacked vertically with subtle numbering.\n * Good for enumerations like \"things to see\" or \"key features\".\n */\nexport interface ListBlockInput extends BaseTemplateBlock {\n  template: 'list';\n  /** List items (3-5 recommended) */\n  items: string[];\n  /** Optional header above the list */\n  title?: string;\n  /** Color scheme for numbering accents */\n  colorScheme?: ColorScheme;\n  /** Optional accent image */\n  accentImage?: AccentImage;\n}\n\n/**\n * Photo grid - 2-4 images in a tiled layout.\n * Used when multiple images are available for visual variety.\n */\nexport interface PhotoGridInput extends BaseTemplateBlock {\n  template: 'photoGrid';\n  /** Images to display (2-4) */\n  images: { src: string; alt: string; credit?: string; license?: string }[];\n  /** Optional caption below the grid */\n  caption?: string;\n  /** Ambient motion effect for the largest image */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n}\n\n/**\n * Definition card - dictionary-style term with definition.\n * Large term at top, definition below, optional origin note.\n */\nexport interface DefinitionCardInput extends BaseTemplateBlock {\n  template: 'definitionCard';\n  /** The term being defined */\n  term: string;\n  /** The definition text */\n  definition: string;\n  /** Optional etymology or origin note */\n  origin?: string;\n  /** Color scheme for term accent */\n  colorScheme?: ColorScheme;\n  /** Optional accent image */\n  accentImage?: AccentImage;\n}\n\n/**\n * Comparison bar - two horizontal bars showing relative numeric values.\n * Good for side-by-side numeric comparisons with visual weight.\n */\nexport interface ComparisonBarInput extends BaseTemplateBlock {\n  template: 'comparisonBar';\n  /** Left bar label */\n  leftLabel: string;\n  /** Left bar numeric value */\n  leftValue: number;\n  /** Right bar label */\n  rightLabel: string;\n  /** Right bar numeric value */\n  rightValue: number;\n  /** Unit label (e.g., \"km\", \"people\") */\n  unit?: string;\n  /** Color scheme */\n  colorScheme?: ColorScheme;\n}\n\n/**\n * Pull quote - quote text over a full-bleed background image with dark overlay.\n * Cinematic alternative to quoteBlock when a high-quality image is available.\n */\nexport interface PullQuoteInput extends BaseTemplateBlock {\n  template: 'pullQuote';\n  /** Quote text */\n  text: string;\n  /** Optional attribution */\n  attribution?: string;\n  /** Background image (fills entire viewport) */\n  backgroundImage: { src: string; alt: string; credit?: string; license?: string };\n  /** Ambient motion for background image */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n}\n\n/**\n * Video with caption - background video clip with text overlay.\n * Plays a short clip from a source video, always muted (narration is the audio track).\n * Mirrors ImageWithCaptionInput but with video-specific fields.\n */\nexport interface VideoWithCaptionInput extends BaseTemplateBlock {\n  template: 'videoWithCaption';\n  /** Path to video file */\n  videoSrc: string;\n  /** Path to poster frame (shown before video loads) */\n  posterSrc?: string;\n  /** Alt text for accessibility */\n  videoAlt: string;\n  /** Start time within source video (seconds) */\n  clipStart: number;\n  /** End time within source video (seconds) */\n  clipEnd: number;\n  /** Source video total duration (for validation) */\n  sourceDuration?: number;\n  /** Caption text overlay */\n  caption?: string;\n  /** Caption position */\n  captionPosition?: 'bottom' | 'top' | 'center';\n  /** Video credit / artist name */\n  videoCredit?: string;\n  /** License identifier */\n  videoLicense?: string;\n}\n\n/**\n * Video pull quote - quote text over a video clip background with dark overlay.\n * Cinematic alternative to pullQuote when a video clip is available.\n */\nexport interface VideoPullQuoteInput extends BaseTemplateBlock {\n  template: 'videoPullQuote';\n  /** Quote text */\n  text: string;\n  /** Optional attribution */\n  attribution?: string;\n  /** Background video clip */\n  backgroundVideo: {\n    src: string;\n    posterSrc?: string;\n    alt: string;\n    clipStart: number;\n    clipEnd: number;\n    credit?: string;\n    license?: string;\n  };\n}\n\n/**\n * Data table - renders a themed table with headers and rows.\n * Ideal for structured data, comparisons, and reference information.\n */\nexport interface DataTableInput extends BaseTemplateBlock {\n  template: 'dataTable';\n  /** Optional title displayed above the table */\n  title?: string;\n  /** Header cell values */\n  headers: string[];\n  /** Data rows (array of cell value arrays) */\n  rows: string[][];\n  /** Per-column alignment */\n  align?: (('left' | 'right' | 'center') | null)[];\n  /** Color scheme for the table header */\n  colorScheme?: ColorScheme;\n}\n\n/**\n * Union of all template block types.\n */\nexport type TemplateBlock =\n  | TitleBlockInput\n  | SectionHeaderInput\n  | StatHighlightInput\n  | QuoteBlockInput\n  | FactCardInput\n  | TwoColumnInput\n  | DateEventInput\n  | ImageWithCaptionInput\n  | LeftFeatureInput\n  | RightFeatureInput\n  | MapBlockInput\n  | FullBleedQuoteInput\n  | ListBlockInput\n  | PhotoGridInput\n  | DefinitionCardInput\n  | ComparisonBarInput\n  | PullQuoteInput\n  | VideoWithCaptionInput\n  | VideoPullQuoteInput\n  | DataTableInput;\n\n/**\n * A block can be either a raw Block or a TemplateBlock.\n */\nexport type DocBlock = Block | TemplateBlock;\n\n/**\n * Check if a block is a template block.\n */\nexport function isTemplateBlock(block: DocBlock): block is TemplateBlock {\n  return 'template' in block && typeof block.template === 'string';\n}\n\n// ============================================\n// Template Function Type\n// ============================================\n\n/**\n * Template context passed to template functions.\n * Includes viewport information for multi-aspect ratio support.\n */\nexport interface TemplateContext {\n  /** Full theme (colors, typography, style, renderStyle, colorSchemes) */\n  theme: Theme;\n  /** Block index in the doc */\n  blockIndex: number;\n  /** Total number of blocks */\n  totalBlocks: number;\n  /** Target viewport configuration */\n  viewport: ViewportConfig;\n  /** Computed font scale factor for this viewport */\n  fontScale: number;\n  /** Viewport orientation (landscape, portrait, square) */\n  orientation: ViewportOrientation;\n  /** Layout hints for this orientation */\n  layout: LayoutHints;\n}\n\n/**\n * Create a template context with viewport-derived values.\n */\nexport function createTemplateContext(\n  theme: Theme,\n  blockIndex: number,\n  totalBlocks: number,\n  viewport: ViewportConfig = VIEWPORT_PRESETS.landscape,\n): TemplateContext {\n  const orientation = getViewportOrientation(viewport);\n  return {\n    theme,\n    blockIndex,\n    totalBlocks,\n    viewport,\n    fontScale: calculateFontScale(viewport),\n    orientation,\n    layout: getLayoutHints(orientation),\n  };\n}\n\n/**\n * Calculate a scaled font size for the given context.\n * Use this in templates to ensure text scales appropriately.\n *\n * @param basePx - Base font size in pixels (designed for 1920x1080)\n * @param context - Template context with viewport info\n * @param isTitle - Whether this is title text (larger scale) or body text\n */\nexport function scaledFontSize(\n  basePx: number,\n  context: TemplateContext,\n  isTitle: boolean = false,\n): number {\n  return scaleFontSize(basePx, context.viewport, context.orientation, isTitle);\n}\n\n/**\n * Template function signature.\n * Takes template input and returns layers array.\n */\nexport type TemplateFunction<T extends TemplateBlock> = (\n  input: T,\n  context: TemplateContext,\n) => Layer[];\n\n/**\n * Registry of all template functions.\n */\nexport type TemplateRegistry = {\n  [K in TemplateBlock['template']]: TemplateFunction<Extract<TemplateBlock, { template: K }>>;\n};\n\n// ============================================\n// Persistent Layer System\n// ============================================\n\n/**\n * Configuration for persistent doc-wide layers.\n * Bottom layers render behind all block content, top layers on top.\n */\nexport interface PersistentLayerConfig {\n  /** Layers rendered behind all block content */\n  bottomLayers?: PersistentLayer[];\n  /** Layers rendered on top of all block content */\n  topLayers?: PersistentLayer[];\n}\n\n/**\n * A persistent layer - either a template or raw Layer.\n */\nexport type PersistentLayer = PersistentLayerTemplate | Layer;\n\n/**\n * Check if a persistent layer is a template.\n */\nexport function isPersistentLayerTemplate(\n  layer: PersistentLayer,\n): layer is PersistentLayerTemplate {\n  return 'template' in layer && typeof layer.template === 'string';\n}\n\n/**\n * Template-based persistent layer for easy configuration.\n */\nexport interface PersistentLayerTemplate {\n  template: PersistentLayerTemplateType;\n  config: PersistentLayerTemplateConfig;\n}\n\n/**\n * Available persistent layer template types.\n */\nexport type PersistentLayerTemplateType =\n  | 'solidBackground' // Solid color fill\n  | 'gradientBackground' // CSS gradient or preset\n  | 'imageBackground' // Blurred/faded hero image\n  | 'patternBackground' // Subtle pattern (dots, grid)\n  | 'titleCaption' // Article title in corner\n  | 'cornerBranding' // Logo or text badge\n  | 'progressIndicator'; // Bar/dots showing position\n\n/**\n * Union of all persistent layer template configs.\n */\nexport type PersistentLayerTemplateConfig =\n  | SolidBackgroundConfig\n  | GradientBackgroundConfig\n  | ImageBackgroundConfig\n  | PatternBackgroundConfig\n  | TitleCaptionConfig\n  | CornerBrandingConfig\n  | ProgressIndicatorConfig;\n\n// ============================================\n// Background Layer Configs\n// ============================================\n\n/**\n * Solid color background.\n */\nexport interface SolidBackgroundConfig {\n  type: 'solidBackground';\n  /** CSS color value */\n  color: string;\n}\n\n/**\n * Gradient background (CSS gradient or preset).\n */\nexport interface GradientBackgroundConfig {\n  type: 'gradientBackground';\n  /** Custom CSS gradient string */\n  gradient?: string;\n  /** Preset gradient name */\n  preset?: 'dark-vignette' | 'radial-dark' | 'warm-sunset' | 'cool-blue' | 'earth-tones';\n}\n\n/**\n * Image background (blurred/faded hero image).\n */\nexport interface ImageBackgroundConfig {\n  type: 'imageBackground';\n  /** Path to image file */\n  src: string;\n  /** Blur radius in pixels (0-20) */\n  blur?: number;\n  /** Opacity (0-1) */\n  opacity?: number;\n  /** Ambient motion effect */\n  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';\n}\n\n/**\n * Pattern background (subtle repeating pattern).\n */\nexport interface PatternBackgroundConfig {\n  type: 'patternBackground';\n  /** Pattern type */\n  pattern: 'dots' | 'grid' | 'diagonal' | 'noise';\n  /** Pattern color */\n  color?: string;\n  /** Pattern opacity (0-1) */\n  opacity?: number;\n  /** Pattern scale multiplier */\n  scale?: number;\n}\n\n// ============================================\n// Overlay Layer Configs\n// ============================================\n\n/**\n * Title caption overlay (article title in corner).\n */\nexport interface TitleCaptionConfig {\n  type: 'titleCaption';\n  /** Title text */\n  title: string;\n  /** Subtitle text (e.g., short URL like \"qual..la/slug\") */\n  subtitle?: string;\n  /** Position on screen */\n  position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  /** Font size in pixels (default: 18) */\n  fontSize?: number;\n  /** Show thumbnail alongside title */\n  showThumbnail?: boolean;\n  /** Thumbnail image path */\n  thumbnailSrc?: string;\n}\n\n/**\n * Corner branding overlay (logo or text badge).\n */\nexport interface CornerBrandingConfig {\n  type: 'cornerBranding';\n  /** Text content or image path */\n  content: string;\n  /** Position on screen */\n  position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  /** Whether content is an image path (vs text) */\n  isImage?: boolean;\n}\n\n/**\n * Progress indicator overlay (bar or dots showing position).\n */\nexport interface ProgressIndicatorConfig {\n  type: 'progressIndicator';\n  /** Indicator style */\n  style: 'bar' | 'dots' | 'fraction';\n  /** Position on screen */\n  position: 'bottom' | 'top';\n  /** Indicator color */\n  color?: string;\n}\n"],"mappings":";AA4BO,IAAM,mBAAmB;AAAA;AAAA,EAE9B,WAAW,EAAE,OAAO,MAAM,QAAQ,MAAM,MAAM,iBAAiB;AAAA;AAAA,EAE/D,UAAU,EAAE,OAAO,MAAM,QAAQ,MAAM,MAAM,gBAAgB;AAAA;AAAA,EAE7D,QAAQ,EAAE,OAAO,MAAM,QAAQ,MAAM,MAAM,aAAa;AAAA;AAAA,EAExD,UAAU,EAAE,OAAO,MAAM,QAAQ,MAAM,MAAM,eAAe;AAC9D;AAeO,SAAS,YAAY,UAA2D;AACrF,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,iBAAiB,QAAQ;AAAA,EAClC;AACA,SAAO;AACT;AAOA,IAAM,qBAAqB,KAAK,KAAK,OAAO,OAAO,OAAO,IAAI;AAEvD,SAAS,mBAAmB,UAAkC;AACnE,QAAM,kBAAkB,KAAK;AAAA,IAC3B,SAAS,QAAQ,SAAS,QAAQ,SAAS,SAAS,SAAS;AAAA,EAC/D;AACA,SAAO,kBAAkB;AAC3B;AAKO,SAAS,uBAAuB,UAA+C;AACpF,QAAM,QAAQ,SAAS,QAAQ,SAAS;AAExC,MAAI,KAAK,IAAI,QAAQ,CAAC,IAAI,KAAM,QAAO;AACvC,SAAO,QAAQ,IAAI,cAAc;AACnC;AAKO,SAAS,qBAAqB,UAAkC;AACrE,QAAM,MAAM,CAAC,GAAW,MAAuB,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AACzE,QAAM,UAAU,IAAI,SAAS,OAAO,SAAS,MAAM;AACnD,SAAO,GAAG,SAAS,QAAQ,OAAO,IAAI,SAAS,SAAS,OAAO;AACjE;;;ACrCA,IAAM,iBAA2D;AAAA,EAC/D,WAAW;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,cAAc;AAAA,IACd,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA;AAAA,IAER,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA,IAEX,YAAY;AAAA,IACZ,WAAW;AAAA;AAAA,IAEX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,cAAc;AAAA;AAAA,IAEd,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,cAAc;AAAA,EAChB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,cAAc;AAAA,IACd,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,cAAc;AAAA,EAChB;AACF;AAKO,SAAS,eAAe,aAA+C;AAC5E,SAAO,eAAe,WAAW;AACnC;AAUO,SAAS,eACd,QACA,UACA,aACA,UAAmB,OACX;AACR,QAAM,YAAY,mBAAmB,QAAQ;AAC7C,QAAM,SAAS,eAAe,WAAW;AACzC,QAAM,YAAY,UAAU,OAAO,aAAa,OAAO;AACvD,SAAO,KAAK,MAAM,SAAS,YAAY,SAAS;AAClD;AAMO,SAAS,sBAAsB,aAGpC;AACA,QAAM,SAAS,eAAe,WAAW;AAEzC,MAAI,OAAO,cAAc;AAEvB,WAAO;AAAA,MACL,MAAM,EAAE,GAAG,OAAO,GAAG,OAAO,WAAW;AAAA,MACvC,OAAO,EAAE,GAAG,OAAO,GAAG,OAAO,cAAc;AAAA,IAC7C;AAAA,EACF;AAGA,SAAO;AAAA,IACL,MAAM,EAAE,GAAG,OAAO,aAAa,GAAG,MAAM;AAAA,IACxC,OAAO,EAAE,GAAG,OAAO,cAAc,GAAG,MAAM;AAAA,EAC5C;AACF;AAMO,SAAS,kBAAkB,aAKhC;AACA,QAAM,SAAS,eAAe,WAAW;AACzC,SAAO;AAAA,IACL,MAAM,OAAO;AAAA,IACb,OAAO,OAAO;AAAA,IACd,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACF;;;ACxIO,IAAM,mBAAmB;AAKzB,IAAM,qBAAqB;AA6d3B,SAAS,gBAAgB,OAAyC;AACvE,SAAO,cAAc,SAAS,OAAO,MAAM,aAAa;AAC1D;AA8BO,SAAS,sBACd,OACA,YACA,aACA,WAA2B,iBAAiB,WAC3B;AACjB,QAAM,cAAc,uBAAuB,QAAQ;AACnD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,mBAAmB,QAAQ;AAAA,IACtC;AAAA,IACA,QAAQ,eAAe,WAAW;AAAA,EACpC;AACF;AAUO,SAASA,gBACd,QACA,SACA,UAAmB,OACX;AACR,SAAO,eAAc,QAAQ,QAAQ,UAAU,QAAQ,aAAa,OAAO;AAC7E;AAyCO,SAAS,0BACd,OACkC;AAClC,SAAO,cAAc,SAAS,OAAO,MAAM,aAAa;AAC1D;","names":["scaledFontSize"]}