| /** | |
| * Maps legacy / alias layout IDs to the canonical key used in LAYOUT_IMAGE_BOX_DIMS. | |
| * Add any new aliases here when templates rename layouts. | |
| */ | |
| import { buildMagazineImageBoxDims } from "./magazine/magazineImageBoxDims"; | |
| const LAYOUT_ID_ALIASES: Record<string, string> = { | |
| // nightfall legacy names | |
| cinematic_title: "cinematic_title", | |
| glass_narrative: "glass_narrative", | |
| glow_metric: "glow_metric", | |
| glass_code: "glass_code", | |
| kinetic_insight: "kinetic_insight", | |
| kinetix_insight: "kinetic_insight", | |
| glass_stack: "glass_stack", | |
| split_glass: "split_glass", | |
| chapter_break: "chapter_break", | |
| glass_image: "glass_image", | |
| // newscast legacy → normalized | |
| newscast_cinematic_title: "opening", | |
| newscast_glass_narrative: "anchor_narrative", | |
| newscast_glass_image: "field_image_focus", | |
| newscast_glass_code: "briefing_code_panel", | |
| newscast_split_glass: "side_by_side_brief", | |
| newscast_chapter_break: "segment_break", | |
| newscast_glow_metric: "live_metrics_board", | |
| newscast_glass_stack: "story_stack", | |
| newscast_kinetic_insight: "headline_insight", | |
| newscast_glass_stack2: "story_stack", | |
| // older multi-word aliases | |
| opening: "opening", | |
| anchor_narrative: "anchor_narrative", | |
| field_image_focus: "field_image_focus", | |
| briefing_code_panel: "briefing_code_panel", | |
| side_by_side_brief: "side_by_side_brief", | |
| segment_break: "segment_break", | |
| live_metrics_board: "live_metrics_board", | |
| story_stack: "story_stack", | |
| headline_insight: "headline_insight", | |
| ending_socials: "ending_socials", | |
| // gridcraft backward-compat alias | |
| intro: "bento_hero", | |
| }; | |
| /** | |
| * Normalize a raw layout ID (which may be a legacy alias) to the canonical key | |
| * used in LAYOUT_IMAGE_BOX_DIMS. Returns the input unchanged if no alias matches. | |
| */ | |
| export function normalizeLayoutId(layoutId: string): string { | |
| return LAYOUT_ID_ALIASES[layoutId] ?? layoutId; | |
| } | |
| export interface ImageBoxDims { | |
| landscape: { w: number; h: number }; | |
| portrait: { w: number; h: number }; | |
| /** When true, the layout crops the image into a circle — the adjust-modal | |
| * preview box should render round (border-radius 50%) to match. */ | |
| circular?: boolean; | |
| } | |
| /** | |
| * Image box dimensions for every layout that renders an image, expressed as | |
| * fractions of the template canvas (imageBoxWidth / canvasWidth, imageBoxHeight / canvasHeight). | |
| * | |
| * Canvas base sizes (landscape): | |
| * default, nightfall, gridcraft, spotlight, matrix, mosaic, blackswan → 1920 × 1080 | |
| * whiteboard, newspaper, newscast → 1920 × 1080 | |
| * magazine → 1920 × 1080 | |
| * | |
| * In portrait mode the canvas is rotated (e.g. 1080 × 1920), and the fractions | |
| * are applied to those swapped dimensions by getImageBoxAspectRatio(). | |
| * | |
| * Layouts with no image support are not listed — they fall back to full-canvas (w:1, h:1). | |
| */ | |
| export const LAYOUT_IMAGE_BOX_DIMS: Record<string, ImageBoxDims> = { | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // DEFAULT template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // flexRow: image is the right flex:1 cell → 50% width, full height | |
| // portrait flexColumn: bottom flex:1 cell → full width, 50% height | |
| hero_image: { | |
| landscape: { w: 0.5, h: 1.0 }, // 960 × 1080 | |
| portrait: { w: 1.0, h: 0.5 }, // 1080 × 960 | |
| }, | |
| // Use a landscape-oriented preview box for landscape projects to avoid portrait-looking framing. | |
| // Portrait keeps the tall 45% height treatment from the layout. | |
| image_caption: { | |
| landscape: { w: 0.50, h: 0.6 }, // ~960 × 304 (landscape ratio) | |
| portrait: { w: 0.907, h: 0.45 }, // ~980 × 864 on 1080×1920 | |
| }, | |
| // flexRow: right flex:1 cell — image is half the canvas width | |
| // portrait flexColumn: image takes flex:1 portion (~50% height) | |
| bullet_list: { | |
| landscape: { w: 0.5, h: 1.0 }, // 960 × 1080 | |
| portrait: { w: 1.0, h: 0.5 }, // 1080 × 960 | |
| }, | |
| // flexRow: image flex:1, portrait flex:0.6 (roughly 37% of height) | |
| timeline: { | |
| landscape: { w: 0.5, h: 1.0 }, // 960 × 1080 | |
| portrait: { w: 1.0, h: 0.40 }, // 1080 × 768 | |
| }, | |
| // legacy default image layout id still used in some scene payloads | |
| animated_image: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // NIGHTFALL template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed background — same as canvas | |
| cinematic_title: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed Ken-Burns image — same as canvas | |
| glass_image: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Landscape: image lives inside a centered card (max-width 1400) at flex 42%, fixed 380 px height. | |
| // Portrait: image is full-width inside padded card content, fixed 400 px height. | |
| glass_narrative: { | |
| landscape: { w: 0.274, h: 0.352 }, // ~527 × 380 on 1920×1080 | |
| portrait: { w: 0.751, h: 0.208 }, // ~811 × 400 on 1080×1920 | |
| }, | |
| // Landscape: image sits in the left panel and should stay landscape-oriented in adjust modal. | |
| // Portrait: split-screen card, image section is the top flex:1 half. | |
| glow_metric: { | |
| landscape: { w: 0.40, h: 0.50 }, // landscape image box (avoid portrait-looking preview) | |
| portrait: { w: 1.0, h: 0.5 }, // 1080 × 960 | |
| }, | |
| // flex "0 0 40%", height 400 px landscape / full width, height 50% portrait | |
| glass_stack: { | |
| landscape: { w: 0.40, h: 0.370 }, // 768 × 400 | |
| portrait: { w: 1.0, h: 0.5 }, // 1080 × 960 | |
| }, | |
| // top-right media card in split layout | |
| split_glass: { | |
| landscape: { w: 0.40, h: 0.370 }, | |
| portrait: { w: 1.0, h: 0.5 }, | |
| }, | |
| // image-forward title stack (full canvas treatment) | |
| kinetic_insight: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // GRIDCRAFT template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Landscape: right-top grid cell in a 2fr/1fr x 1fr/1fr grid inside a 90%×80% container. | |
| // Portrait: bottom-left grid cell in a 1fr/1fr x 2fr/1fr grid inside same container. | |
| bento_hero: { | |
| landscape: { w: 0.30, h: 0.40 }, // ~576 × 432 | |
| portrait: { w: 0.45, h: 0.267 }, // ~486 × 512 | |
| }, | |
| // flex "0 0 38%", height 320 px landscape / width 80%, height 220 px portrait | |
| bento_compare: { | |
| landscape: { w: 0.38, h: 0.296 }, // 730 × 320 | |
| portrait: { w: 0.8, h: 0.115 }, // 864 × 220 | |
| }, | |
| // identical card style to bento_compare | |
| bento_features: { | |
| landscape: { w: 0.38, h: 0.296 }, | |
| portrait: { w: 0.8, h: 0.115 }, | |
| }, | |
| // identical card style to bento_compare | |
| bento_steps: { | |
| landscape: { w: 0.38, h: 0.296 }, | |
| portrait: { w: 0.8, h: 0.115 }, | |
| }, | |
| // grid 1.8fr/1fr rows; main box spans full container width (90% canvas). | |
| // In landscape flexRow: image=left flex:1 = 45% of canvas × 50% of canvas height | |
| // In portrait flexCol: image=top flex:1 = 90% × 24% (main box ≈60% of 80%-height container) | |
| bento_highlight: { | |
| landscape: { w: 0.45, h: 0.50 }, // 864 × 540 | |
| portrait: { w: 0.90, h: 0.24 }, // 972 × 461 | |
| }, | |
| // Editorial split card: image is one flex half of a 90%×80% container. | |
| editorial_body: { | |
| landscape: { w: 0.45, h: 0.80 }, // ~864 × 864 | |
| portrait: { w: 0.90, h: 0.40 }, // ~972 × 768 | |
| }, | |
| // flex "0 0 38%", height 320 px landscape / width 100%, height 180 px portrait | |
| kpi_grid: { | |
| landscape: { w: 0.38, h: 0.296 }, // 730 × 320 | |
| portrait: { w: 1.0, h: 0.094 }, // 1080 × 180 | |
| }, | |
| // side media pane in a split code layout | |
| bento_code: { | |
| landscape: { w: 0.42, h: 1.0 }, | |
| portrait: { w: 1.0, h: 0.34 }, | |
| }, | |
| // PullQuote image card inside padded quote panel. | |
| pull_quote: { | |
| landscape: { w: 0.308, h: 0.259 }, // ~592 × 280 | |
| portrait: { w: 0.63, h: 0.104 }, // ~680 × 200 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // SPOTLIGHT template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed with vignette overlay | |
| spotlight_image: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed background under text | |
| cascade_list: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // flex "0 0 38%", height 360 px landscape / width 70%, height 220 px portrait | |
| impact_title: { | |
| landscape: { w: 0.38, h: 0.333 }, // 730 × 360 | |
| portrait: { w: 0.70, h: 0.115 }, // 756 × 220 | |
| }, | |
| // flex "0 0 38%", height 400 px landscape / width 80%, height 240 px portrait | |
| statement: { | |
| landscape: { w: 0.38, h: 0.370 }, // 730 × 400 | |
| portrait: { w: 0.80, h: 0.125 }, // 864 × 240 | |
| }, | |
| // flex "0 0 35%", height 350 px landscape / width 70%, height 200 px portrait | |
| stat_stage: { | |
| landscape: { w: 0.35, h: 0.324 }, // 672 × 350 | |
| portrait: { w: 0.70, h: 0.104 }, // 756 × 200 | |
| }, | |
| // Optional image card below headline: width 42% / height 32% landscape, 72% / 26% portrait | |
| word_punch: { | |
| landscape: { w: 0.42, h: 0.32 }, // ~806 × 346 | |
| portrait: { w: 0.72, h: 0.26 }, // ~778 × 499 | |
| }, | |
| // flex "0 0 38%", full height landscape / full width, height 280 px portrait | |
| versus: { | |
| landscape: { w: 0.38, h: 1.0 }, // 730 × 1080 | |
| portrait: { w: 1.0, h: 0.146 }, // 1080 × 280 | |
| }, | |
| // flex "0 0 38%" of padded container (outer pad 8% right), inner pad 8% top/bottom/left | |
| // → image area ~672 × 972 landscape (tall portrait box); 76% × 44% portrait | |
| rapid_points: { | |
| landscape: { w: 0.35, h: 0.90 }, // ~672 × 972 | |
| portrait: { w: 0.64, h: 0.44 }, // ~691 × 845 | |
| }, | |
| // Optional image card: width 38% / height 320 px landscape, 70% / 220 px portrait | |
| closer: { | |
| landscape: { w: 0.38, h: 0.396 }, // ~730 × 320 | |
| portrait: { w: 0.70, h: 0.115 }, // 756 × 220 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // MATRIX template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed with clip-path horizontal reveal | |
| matrix_image: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Left 50% panel, full height landscape / full width, 280 px portrait | |
| fork_choice: { | |
| landscape: { w: 0.5, h: 1.0 }, // 960 × 1080 | |
| portrait: { w: 1.0, h: 0.146 }, // 1080 × 280 | |
| }, | |
| // flex "0 0 38%", height 360 px landscape / width 70%, height 220 px portrait | |
| matrix_title: { | |
| landscape: { w: 0.38, h: 0.333 }, // 730 × 360 | |
| portrait: { w: 0.70, h: 0.115 }, // 756 × 220 | |
| }, | |
| // width 35%, height auto (approx 300 px) landscape / width 60%, height auto portrait | |
| data_stream: { | |
| landscape: { w: 0.35, h: 0.278 }, // 672 × 300 (estimated — height is "auto") | |
| portrait: { w: 0.60, h: 0.182 }, // 648 × 350 (estimated) | |
| }, | |
| // flex "0 0 38%", fixed 400 px height landscape / width 80%, fixed 240 px portrait | |
| terminal_text: { | |
| landscape: { w: 0.38, h: 0.370 }, // ~730 × 400 | |
| portrait: { w: 0.80, h: 0.125 }, // 864 × 240 | |
| }, | |
| glitch_punch: { | |
| landscape: { w: 0.38, h: 0.333 }, // ~730 × 360 | |
| portrait: { w: 0.70, h: 0.115 }, // 756 × 220 | |
| }, | |
| cipher_metric: { | |
| landscape: { w: 0.35, h: 0.324 }, // ~672 × 350 | |
| portrait: { w: 0.70, h: 0.104 }, // 756 × 200 | |
| }, | |
| transmission: { | |
| // same image rail geometry as rapid_points in landscape | |
| landscape: { w: 0.35, h: 0.90 }, // ~672 × 972 | |
| portrait: { w: 1.0, h: 1.0 }, // portrait branch currently stacks content; keep full-canvas fallback | |
| }, | |
| awakening: { | |
| landscape: { w: 0.38, h: 0.296 }, // ~730 × 320 | |
| portrait: { w: 0.70, h: 0.115 }, // 756 × 220 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // BLACKSWAN template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed with fade-in at end of scene | |
| droplet_intro: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed background at 0.18 opacity | |
| neon_narrative: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // flex:1 with CSS aspectRatio "16/9" landscape / width 88%, height 36% portrait | |
| arc_features: { | |
| landscape: { w: 0.5, h: 0.5 }, // ~960 × 540 (16/9 box in flex:1 column) | |
| portrait: { w: 0.88, h: 0.36 }, // 950 × 691 | |
| }, | |
| // absolute positioned: left/right 18%, height 45% landscape / left/right 10%, height 35% portrait | |
| dive_insight: { | |
| landscape: { w: 0.64, h: 0.45 }, // 1229 × 486 | |
| portrait: { w: 0.80, h: 0.35 }, // 864 × 672 | |
| }, | |
| pulse_metric: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| signal_split: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| reactor_code: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| flight_path: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // MOSAIC template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed tile-by-tile reveal | |
| mosaic_title: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed tile reveal (same component as mosaic_title) | |
| mosaic_punch: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Absolute-pinned left panel: width 46%, full height in both landscape and portrait | |
| mosaic_text: { | |
| landscape: { w: 0.46, h: 1.0 }, // 883 × 1080 | |
| portrait: { w: 0.46, h: 1.0 }, // 331 × 720 on 720×1280 canvas | |
| }, | |
| mosaic_stream: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| mosaic_metric: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| mosaic_phrases: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| mosaic_close: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // NEWSCAST template (canvas 1280 × 720) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed under hero chrome | |
| opening: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed with zoom+shift animation | |
| field_image_focus: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed background under split panels | |
| side_by_side_brief: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed background (NewsCastLayoutImageBackground) | |
| live_metrics_board: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Full-bleed background | |
| story_stack: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| headline_insight: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // flex "0 0 40%", full height landscape / no image panel in portrait → full canvas fallback | |
| anchor_narrative: { | |
| landscape: { w: 0.40, h: 1.0 }, // 512 × 720 | |
| portrait: { w: 1.0, h: 1.0 }, // no image panel in portrait — full canvas | |
| }, | |
| briefing_code_panel: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| segment_break: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // NEWSPAPER template (canvas 1280 × 720) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Polaroid-style card: absolute positioned 40% × 50% landscape / 80% × 35% portrait | |
| news_headline: { | |
| landscape: { w: 0.40, h: 0.5 }, // 512 × 360 | |
| portrait: { w: 0.80, h: 0.35 }, // 576 × 448 | |
| }, | |
| // Tilted photo card: 38% × 60% landscape / 88% × 38% portrait | |
| article_lead: { | |
| landscape: { w: 0.38, h: 0.6 }, // 486 × 432 | |
| portrait: { w: 0.88, h: 0.38 }, // 634 × 486 | |
| }, | |
| // Portrait-oriented card (aspect-ratio 3/4): flex 0.8 landscape / width 100%, height 300 px portrait | |
| fact_check: { | |
| landscape: { w: 0.44, h: 1.0 }, // ~563 × 720 (3/4 portrait card, clipped at canvas height) | |
| portrait: { w: 1.0, h: 0.234 }, // 720 × 300 | |
| }, | |
| // Landscape photo card: 45% × 300 px landscape / 100% × 400 px portrait | |
| news_timeline: { | |
| landscape: { w: 0.45, h: 0.417 }, // 576 × 300 | |
| portrait: { w: 1.0, h: 0.313 }, // 720 × 400 | |
| }, | |
| data_snapshot: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Polaroid expert photo: left 45% column landscape / top 38% band portrait | |
| // (see ExpertProfile.tsx). Landscape: 45%-wide column, side padding 6%/4% | |
| // (% is width-relative) → card ~448px wide; flex:1 fills the column minus the | |
| // credit line → ~76% canvas height. Portrait: top 38% band with 6% margins. | |
| expert_profile: { | |
| landscape: { w: 0.42, h: 0.76 }, // widened preview box for the left-column polaroid card | |
| portrait: { w: 0.88, h: 0.38 }, // top 38% with 6% side margin → 634 × 486 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // WHITEBOARD template (canvas 1280 × 720) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // flex "0 0 36%" of inner row (with 7% side padding), stretched to row height (~88% canvas) | |
| // portrait uses width 100% with fixed 500 px height | |
| marker_story: { | |
| landscape: { w: 0.309, h: 0.88 }, // ~396 × 634 on 1280×720 | |
| portrait: { w: 1.0, h: 0.391 }, // 720 × 500 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // CHRONICLE template (canvas 1920 × 1080) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Two-page spread: image is the right page (~flex 1.1 of ~50% canvas width). | |
| // Portrait stacks: image is ~88% × 35%. | |
| parchment_scroll: { | |
| landscape: { w: 0.52, h: 0.70 }, // ~998 × 756 | |
| portrait: { w: 0.88, h: 0.35 }, // ~950 × 672 | |
| }, | |
| // Quote with optional inline image plate (flex 0 0 30%, ~60% width within column) | |
| illuminated_quote: { | |
| landscape: { w: 0.30, h: 0.40 }, // ~576 × 432 | |
| portrait: { w: 0.60, h: 0.20 }, // ~648 × 384 | |
| }, | |
| // Two-page versus folio: each side holds an embossed image (~70% wide on each half). | |
| // We use the larger half for the preview box. | |
| versus_folio: { | |
| landscape: { w: 0.35, h: 0.55 }, // ~672 × 594 | |
| portrait: { w: 1.00, h: 0.28 }, // ~1080 × 537 (top page) | |
| }, | |
| // Unfurled cartographer's map — occupies most of the canvas. | |
| map_reveal: { | |
| landscape: { w: 0.80, h: 0.85 }, // ~1536 × 918 | |
| portrait: { w: 0.95, h: 0.70 }, // ~1026 × 1344 | |
| }, | |
| // Ledger-of-facts header image (optional): ~55% wide landscape, 85% wide portrait | |
| ledger_stats: { | |
| landscape: { w: 0.55, h: 0.40 }, // ~1056 × 432 | |
| portrait: { w: 0.85, h: 0.30 }, // ~918 × 576 | |
| }, | |
| // book_open, chapter_plate, ledger_stats, chronicle_timeline, decree_seal and | |
| // ending_socials hide the image (layouts_without_image). Let them fall back to | |
| // the default full-canvas placeholder since no image adjustment is exposed. | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // LADUC template (canvas 1920 × 1080) | |
| // Mirrors LADUC_LAYOUTS in templateConfig.tsx + LADUC_LAYOUT_REGISTRY in | |
| // laduc/layouts/index.ts. `market_annotation` and `ticker` deliberately | |
| // omitted — they're declared in meta.json `layouts_without_image`, so the | |
| // editor hides the image picker entirely. `tier_showcase` is NOT a real | |
| // LaDuc layout (no registry entry, no validLayouts membership). | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Full-bleed editorial canvas — image fills the whole frame via | |
| // LaDucLayoutImageBackground in both orientations. | |
| masthead: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| data_impact: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| two_column: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| kinetic_quote: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| sign_off: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| ending_socials: { landscape: { w: 1.0, h: 1.0 }, portrait: { w: 1.0, h: 1.0 } }, | |
| // Right-side editorial card (landscape) / full-bleed (portrait). | |
| // Each of these three render `<ZoomCropImg>` in an explicit absolute card | |
| // when landscape, and switch to a full-bleed LaDucLayoutImageBackground | |
| // in portrait — so the focus picker mirrors that shape. | |
| // DeepDive: right:0, top:0, bottom:0, width:38% → 38% × 100% (≈ 730 × 1080) | |
| // See LaDucDeepDive.tsx:132-145 | |
| deep_dive: { | |
| landscape: { w: 0.38, h: 1.00 }, | |
| portrait: { w: 1.00, h: 1.00 }, | |
| }, | |
| // ThesisStatement: right:padH(8%), top:14%, bottom:14%, width:34% | |
| // → 34% × 72% (≈ 653 × 778) | |
| // See LaDucThesisStatement.tsx:147-160 | |
| thesis_statement: { | |
| landscape: { w: 0.34, h: 0.72 }, | |
| portrait: { w: 1.00, h: 1.00 }, | |
| }, | |
| // FrameworkFlow: image card inside the steps rail. | |
| // rail ≈ canvas × (1 − 2×7.5% padH) ≈ 85% wide | |
| // rail ≈ 55% canvas height (top header + bottom footnote + padV 5.5% × 2) | |
| // image takes flex: 0 0 28% of rail width → 0.28 × 0.85 ≈ 0.24 wide × 0.55 high | |
| // See LaDucFrameworkFlow.tsx:330-344 | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // STICKMAN 2 template (canvas 1920 × 1080) | |
| // Full-bleed atmospheric background at 0.35 opacity — same as chalk_title hero. | |
| // ───────────────────────────────────────────────────────────────────────── | |
| chalk_title: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| shooting_star: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| night_walk: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| lantern_dialogue: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| neon_countdown: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // STICKMAN_FOOTBALL template (canvas 1920 × 1080) | |
| // Only kickoff_title, freekick_setup and goal_moment render an image; every | |
| // other layout is in meta.json `layouts_without_image`. All three draw the | |
| // image as a centered circular "mood" vignette of a fixed size — 560×560 in | |
| // landscape, 420×420 in portrait (see KickoffTitle/FreekickSetup/GoalMoment). | |
| // ───────────────────────────────────────────────────────────────────────── | |
| kickoff_title: { | |
| landscape: { w: 0.292, h: 0.519 }, // 560 × 560 on 1920×1080 (1:1 box) | |
| portrait: { w: 0.389, h: 0.219 }, // 420 × 420 on 1080×1920 (1:1 box) | |
| circular: true, | |
| }, | |
| freekick_setup: { | |
| landscape: { w: 0.292, h: 0.519 }, | |
| portrait: { w: 0.389, h: 0.219 }, | |
| circular: true, | |
| }, | |
| goal_moment: { | |
| landscape: { w: 0.292, h: 0.519 }, | |
| portrait: { w: 0.389, h: 0.219 }, | |
| circular: true, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // ECONOMIST template (canvas 1920 × 1080) | |
| // Image-capable: cover_reveal, image_feature, section_divider (full-bleed | |
| // hero/backdrop) and the matted leader_article (left plate) / leader_quote | |
| // (portrait mat card). See CoverReveal/ImageFeature/SectionDivider/ | |
| // LeaderArticle/LeaderQuote. | |
| // ───────────────────────────────────────────────────────────────────────── | |
| cover_reveal: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| image_feature: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| section_divider: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Left duotone plate ~42% width / full height (landscape); top band in portrait. | |
| leader_article: { | |
| landscape: { w: 0.42, h: 0.85 }, // ~806 × 918 | |
| portrait: { w: 0.86, h: 0.28 }, // ~929 × 528 | |
| }, | |
| // Matted editorial portrait card up the right margin (landscape) / lower band (portrait). | |
| leader_quote: { | |
| landscape: { w: 0.26, h: 0.58 }, // ~499 × 626 | |
| portrait: { w: 0.64, h: 0.22 }, // ~691 × 422 | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // SAKURA template (canvas 1920 × 1080) | |
| // Mirrors SAKURA_LAYOUTS in templateConfig.tsx + SAKURA_LAYOUT_REGISTRY. | |
| // Only sakura_intro, sakura_section, sakura_text_narration, | |
| // sakura_list_scene and sakura_stat_highlight render an image; every other | |
| // sakura layout (incl. sakura_two_column_detail) is in meta.json | |
| // `layouts_without_image`, so the editor hides the image picker. | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // Hero: image is a full-bleed blended BACKGROUND behind the title stack. | |
| // See SakuraIntro.tsx (heroBg). | |
| sakura_intro: { | |
| landscape: { w: 1.0, h: 1.0 }, | |
| portrait: { w: 1.0, h: 1.0 }, | |
| }, | |
| // Right-column photo panel: 620×700 landscape; (width−160)×620 portrait. | |
| // See SakuraSection.tsx (panelW/panelH). | |
| sakura_section: { | |
| landscape: { w: 0.323, h: 0.648 }, // 620 × 700 | |
| portrait: { w: 0.852, h: 0.323 }, // (1080−160) × 620 | |
| }, | |
| // Right-side supporting panel: 620×700 landscape; (width−160)×620 portrait. | |
| // See SakuraTextNarration.tsx (panelW/panelH). | |
| sakura_text_narration: { | |
| landscape: { w: 0.323, h: 0.648 }, | |
| portrait: { w: 0.852, h: 0.323 }, | |
| }, | |
| // Right-side supporting panel down the list's empty right edge: 36% × full | |
| // height landscape; bottom band (width−160 × 30%) portrait. | |
| // See SakuraListScene.tsx (imagePanel). | |
| sakura_list_scene: { | |
| landscape: { w: 0.360, h: 1.0 }, | |
| portrait: { w: 0.852, h: 0.30 }, | |
| }, | |
| // Circular vignette behind the number: 560 landscape / 420 portrait. | |
| // See SakuraStatHighlight.tsx (vignetteSize). | |
| sakura_stat_highlight: { | |
| landscape: { w: 0.292, h: 0.519 }, // 560 × 560 (1:1 box) | |
| portrait: { w: 0.389, h: 0.219 }, // 420 × 420 (1:1 box) | |
| circular: true, | |
| }, | |
| // ───────────────────────────────────────────────────────────────────────── | |
| // MAGAZINE template — computed from layout geometry (magazineImageBoxDims.ts) | |
| // ───────────────────────────────────────────────────────────────────────── | |
| ...buildMagazineImageBoxDims(), | |
| }; | |
| /** | |
| * True when a layout crops its image into a circle, so the adjust-modal preview | |
| * box should be rendered round. Falls back to false for unknown layouts. | |
| */ | |
| export function isImageBoxCircular(layoutId: string | null): boolean { | |
| if (!layoutId) return false; | |
| return LAYOUT_IMAGE_BOX_DIMS[normalizeLayoutId(layoutId)]?.circular ?? false; | |
| } | |
| /** | |
| * Compute the CSS `aspect-ratio` string for the image adjustment modal preview box. | |
| * Returns e.g. "960 / 1080", "1920 / 1080", "1080 / 1920". | |
| * | |
| * @param layoutId The scene's layout registry key (e.g. "hero_image"). Pass null for unknown. | |
| * @param aspectRatioStr Project aspect ratio — "portrait" or "landscape". | |
| * @param baseWidth Template base canvas width in landscape (from templateConfig.baseWidth). | |
| * @param baseHeight Template base canvas height in landscape (from templateConfig.baseHeight). | |
| */ | |
| export function getImageBoxAspectRatio( | |
| layoutId: string | null, | |
| aspectRatioStr: string, | |
| baseWidth: number, | |
| baseHeight: number, | |
| ): string { | |
| const isPortrait = aspectRatioStr === "portrait"; | |
| const canvasW = isPortrait ? baseHeight : baseWidth; | |
| const canvasH = isPortrait ? baseWidth : baseHeight; | |
| const dims = layoutId ? LAYOUT_IMAGE_BOX_DIMS[normalizeLayoutId(layoutId)] : undefined; | |
| const { w, h } = dims | |
| ? (isPortrait ? dims.portrait : dims.landscape) | |
| : { w: 1, h: 1 }; | |
| return `${Math.round(canvasW * w)} / ${Math.round(canvasH * h)}`; | |
| } | |