@anthusai/papyrus 1.3.0 → 1.4.0-next.10

package/lib/layout-config.ts

@@ -0,0 +1,237 @@
+import { type LayoutCursor } from "./pretext-layout";
+import {
+  createVerticalRhythm,
+  reserveRhythmRows,
+  snapDownToRhythm,
+  type VerticalRhythm,
+} from "./blog-rhythm";
+import { type ResponsiveSpanPolicy } from "./layout-plan";
+import { type LayoutConfig, type PageChromeMetrics } from "./layout-types";
+import { getFrontGridHeight, getFrontRows } from "./front-mosaic";
+
+export const EMPTY_CURSOR: LayoutCursor = { segmentIndex: 0, graphemeIndex: 0 };
+
+export const SERIF_TEXT_FONT = 'Georgia, "Times New Roman", serif';
+
+export const SANS_TEXT_FONT = "Arial, Helvetica, sans-serif";
+
+export const IMAGE_CAPTION_FONT_SIZE = 12;
+
+export const IMAGE_CAPTION_HORIZONTAL_PADDING_EM = 0.3;
+
+const MASTHEAD_TITLE_GLYPH_HEIGHT_RATIO = 0.736;
+
+const MASTHEAD_RULE_HEIGHT = 0;
+
+const MASTHEAD_RULE_MARGIN_BOTTOM = 0;
+
+const MASTHEAD_TITLE_MARGIN_TOP = 0;
+
+const MASTHEAD_PADDING_BOTTOM = 0;
+
+const MASTHEAD_BORDER_BOTTOM = 0;
+
+const MASTHEAD_MARGIN_BOTTOM = 0;
+
+const MASTHEAD_META_BORDER_TOP = 0;
+
+const MASTHEAD_META_PADDING_TOP = 0;
+
+const MASTHEAD_META_PADDING_BOTTOM = 0;
+
+const MASTHEAD_META_BORDER_BOTTOM = 0;
+
+const INSIDE_HEADER_PADDING_BOTTOM = 8;
+
+const INSIDE_HEADER_BORDER_BOTTOM = 2;
+
+const INSIDE_HEADER_MARGIN_BOTTOM = 14;
+
+const CONTINUED_TITLE_KICKER_LINE_HEIGHT = 14;
+
+export const CONTINUED_TITLE_HEADING_MARGIN_TOP = 5;
+
+export const CONTINUED_TITLE_PADDING_BOTTOM = 0;
+
+export const CONTINUED_TITLE_BORDER_BOTTOM = 0;
+
+export const CONTINUED_TITLE_MARGIN_BOTTOM = 0;
+
+export const FURNITURE_COLLISION_GUTTER = 14;
+
+export const PULL_QUOTE_VERTICAL_PADDING = 24;
+
+const NEWSPAPER_PAINT_BUFFER_PX = 4;
+
+export function getMinimumTextFrameHeight(config: LayoutConfig): number {
+  return reserveRhythmRows(config.linePaintHeight, config.rhythm);
+}
+
+export function pageIdFor(pageNumber: number): string {
+  return `page-${pageNumber}`;
+}
+
+export function getLayoutConfig(pageWidth: number, viewportHeight: number): LayoutConfig {
+  const narrow = pageWidth < 560;
+  const medium = pageWidth >= 560 && pageWidth < 1040;
+  const bodyFontSize = narrow ? 14 : 15;
+  const bodyLineHeight = Math.ceil(bodyFontSize * 1.4);
+  const rhythm = createVerticalRhythm(bodyLineHeight, NEWSPAPER_PAINT_BUFFER_PX);
+  const gap = narrow ? 14 : 18;
+  const rowGap = rhythm.rowHeight;
+  const sideMargin = narrow ? 18 : 30;
+  const contentWidth = Math.max(280, pageWidth - sideMargin * 2);
+  const columnCount = getResponsiveColumnCount(pageWidth, contentWidth, gap);
+  const pageChrome = getPageChromeMetrics(pageWidth, narrow, rhythm, columnCount);
+  const targetPageHeight = reserveRhythmRows(getTargetPageHeight(pageWidth, viewportHeight), rhythm);
+  const frontGridHeight = snapDownToRhythm(getFrontGridHeight(targetPageHeight, narrow, medium), rhythm);
+  const frontRowMaxHeight = snapDownToRhythm(narrow ? 520 : medium ? 560 : 620, rhythm);
+  const continuationChrome =
+    pageChrome.pagePaddingTop +
+    pageChrome.insideHeaderHeight +
+    pageChrome.continuedTitleHeight +
+    pageChrome.pagePaddingBottom;
+  const continuationHeight = reserveRhythmRows(Math.max(760, targetPageHeight - continuationChrome), rhythm);
+
+  return {
+    columnCount,
+    contentWidth,
+    gap,
+    rowGap,
+    rhythm,
+    pageChrome,
+    lineHeight: rhythm.rowHeight,
+    linePaintHeight: rhythm.paintHeight,
+    bodyFontSize,
+    bodyFont: `${bodyFontSize}px ${SERIF_TEXT_FONT}`,
+    frontRows: getFrontRows(columnCount, rowGap, frontGridHeight, frontRowMaxHeight, rhythm),
+    continuationHeight,
+  };
+}
+
+export function getResponsiveColumnCount(pageWidth: number, contentWidth: number, gap: number): number {
+  if (pageWidth < 560) return 1;
+  const minimumColumnWidth = 168;
+  for (const columnCount of [6, 5, 4, 3, 2] as const) {
+    const columnWidth = (contentWidth - gap * (columnCount - 1)) / columnCount;
+    if (columnWidth >= minimumColumnWidth) return columnCount;
+  }
+  return 1;
+}
+
+function getTargetPageHeight(pageWidth: number, viewportHeight: number): number {
+  if (pageWidth < 720) return Math.max(3000, viewportHeight * 3.25);
+  if (pageWidth < 1040) return Math.max(1900, viewportHeight * 2.1);
+  return Math.max(1320, viewportHeight * 1.72);
+}
+
+function getMastheadRowPolicy(columnCount: number): { totalRows: number; titleRows: number } {
+  if (columnCount <= 1) return { totalRows: 4, titleRows: 2 };
+  if (columnCount <= 3) return { totalRows: 5, titleRows: 3 };
+  return { totalRows: 6, titleRows: 4 };
+}
+
+function getPageChromeMetrics(pageWidth: number, narrow: boolean, rhythm: VerticalRhythm, columnCount: number): PageChromeMetrics {
+  const pagePaddingTop = rhythm.rowHeight;
+  const pagePaddingX = narrow ? 18 : 30;
+  const pagePaddingBottom = reserveRhythmRows(narrow ? 18 : 30, rhythm);
+  const mastheadRows = getMastheadRowPolicy(columnCount);
+  const mastheadKickerLineHeight = 14;
+  const mastheadTitleLineHeight = rhythm.rowHeight * mastheadRows.titleRows;
+  const mastheadTitleFontSize = mastheadTitleLineHeight / MASTHEAD_TITLE_GLYPH_HEIGHT_RATIO;
+  const mastheadTitleMarginTop = rhythm.rowHeight / 2;
+  const mastheadTitleMarginBottom = rhythm.rowHeight / 2;
+  const mastheadTitleOpticalShift = -3;
+  const mastheadMetaLineHeight = rhythm.rowHeight - MASTHEAD_META_BORDER_TOP - MASTHEAD_META_BORDER_BOTTOM;
+  const mastheadMetaGap = narrow ? 5 : 0;
+  const mastheadMetaContentHeight = mastheadMetaLineHeight;
+  const rawMastheadHeight =
+    MASTHEAD_RULE_HEIGHT +
+    MASTHEAD_RULE_MARGIN_BOTTOM +
+    MASTHEAD_TITLE_MARGIN_TOP +
+    mastheadTitleMarginTop +
+    mastheadTitleLineHeight +
+    mastheadTitleMarginBottom +
+    MASTHEAD_META_BORDER_TOP +
+    MASTHEAD_META_PADDING_TOP +
+    mastheadMetaContentHeight +
+    MASTHEAD_META_PADDING_BOTTOM +
+    MASTHEAD_META_BORDER_BOTTOM +
+    MASTHEAD_PADDING_BOTTOM +
+    MASTHEAD_BORDER_BOTTOM +
+    MASTHEAD_MARGIN_BOTTOM;
+  const mastheadHeight = rhythm.rowHeight * mastheadRows.totalRows;
+  const mastheadMetaPaddingTop = MASTHEAD_META_PADDING_TOP + Math.max(0, mastheadHeight - rawMastheadHeight);
+  const frontGridMarginTop = rhythm.rowHeight;
+  const insideHeaderHeight = INSIDE_HEADER_PADDING_BOTTOM + INSIDE_HEADER_BORDER_BOTTOM + INSIDE_HEADER_MARGIN_BOTTOM + 18;
+  const continuedTitleFontSize = narrow ? clamp(pageWidth * 0.075, 28, 42) : clamp(pageWidth * 0.035, 32, 56);
+  const continuedTitleLineHeight = continuedTitleFontSize * 0.94;
+  const continuedTitleHeight = Math.ceil(
+    CONTINUED_TITLE_KICKER_LINE_HEIGHT +
+      CONTINUED_TITLE_HEADING_MARGIN_TOP +
+      continuedTitleLineHeight * 2 +
+      CONTINUED_TITLE_PADDING_BOTTOM +
+      CONTINUED_TITLE_BORDER_BOTTOM +
+      CONTINUED_TITLE_MARGIN_BOTTOM,
+  );
+
+  return {
+    pagePaddingTop,
+    pagePaddingX,
+    pagePaddingBottom,
+    mastheadHeight,
+    mastheadKickerLineHeight,
+    mastheadTitleFontSize,
+    mastheadTitleLineHeight,
+    mastheadTitleMarginTop,
+    mastheadTitleMarginBottom,
+    mastheadTitleOpticalShift,
+    mastheadMetaLineHeight,
+    mastheadMetaGap,
+    mastheadMetaPaddingTop,
+    frontGridMarginTop,
+    insideHeaderHeight: reserveRhythmRows(insideHeaderHeight, rhythm),
+    continuedTitleHeight: reserveRhythmRows(continuedTitleHeight, rhythm),
+    continuedTitleChromeHeight: reserveRhythmRows(
+      CONTINUED_TITLE_KICKER_LINE_HEIGHT +
+      CONTINUED_TITLE_HEADING_MARGIN_TOP +
+      CONTINUED_TITLE_PADDING_BOTTOM +
+      CONTINUED_TITLE_BORDER_BOTTOM +
+      CONTINUED_TITLE_MARGIN_BOTTOM,
+      rhythm,
+    ),
+    continuedTitleFontSize,
+    continuedTitleLineHeight,
+    continuationSectionSeparatorHeight: rhythm.rowHeight * 2,
+  };
+}
+
+export function getBlockSpan(config: LayoutConfig, span: ResponsiveSpanPolicy | undefined): number {
+  if (config.columnCount === 1) return 1;
+  return clamp(span?.preferred ?? config.columnCount, span?.min ?? 1, Math.min(span?.max ?? config.columnCount, config.columnCount));
+}
+
+export function getBlockWidth(config: LayoutConfig, span: ResponsiveSpanPolicy | undefined): number {
+  return getSpanWidth(config, getBlockSpan(config, span));
+}
+
+export function getSpanWidth(config: LayoutConfig, span: number): number {
+  const safeSpan = clamp(span, 1, config.columnCount);
+  const singleColumn = (config.contentWidth - config.gap * (config.columnCount - 1)) / config.columnCount;
+  return singleColumn * safeSpan + config.gap * (safeSpan - 1);
+}
+
+export function getSpanRect(config: LayoutConfig, columnStart: number, columnSpan: number): { x: number; width: number } {
+  const safeStart = clamp(columnStart, 0, Math.max(0, config.columnCount - 1));
+  const safeSpan = clamp(columnSpan, 1, config.columnCount - safeStart);
+  const columnWidth = getSpanWidth(config, 1);
+  const rawX = safeStart * (columnWidth + config.gap);
+  const rawRight = rawX + getSpanWidth(config, safeSpan);
+  const x = Math.round(rawX);
+  const right = Math.min(Math.round(rawRight), Math.floor(config.contentWidth));
+  return { x, width: Math.max(1, right - x) };
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}

package/lib/layout-plan.ts

@@ -1,3 +1,4 @@
+import { warnAboutMissingMedia } from "./layout-warnings";
 import { z } from "zod";
 import {
   type PublicationItem,
@@ -469,7 +470,12 @@ export type LayoutRegionSpec = z.infer<typeof LayoutRegionSchema>;
 export type LayoutPageSpec = z.infer<typeof LayoutPageSchema>;
 export type EditionLayoutPlan = z.infer<typeof EditionLayoutPlanSchema>;
 
-export function createDefaultEditionLayoutPlan(itemIds: string[]): EditionLayoutPlan {
+export type ArticleCutPolicy = ArticleFrameBlockSpec["cutPolicy"];
+
+export function createDefaultEditionLayoutPlan(
+  itemIds: string[],
+  cutPoliciesByItemId: Record<string, ArticleCutPolicy> = {},
+): EditionLayoutPlan {
   const frontItemIds = getDefaultFrontItemOrder(itemIds);
   const frontBlocks = frontItemIds.map((itemId, index) => ({
     id: `front-${itemId}`,
@@ -563,7 +569,7 @@ export function createDefaultEditionLayoutPlan(itemIds: string[]): EditionLayout
           ],
         }
       : undefined,
-    cutPolicy: getDefaultCutPolicy(itemId),
+    cutPolicy: cutPoliciesByItemId[itemId],
   }));
 
   const plan: EditionLayoutPlan = normalizeEditionLayoutPlan({
@@ -812,9 +818,39 @@ export function validateEditionLayoutPlanForItems(
     }
   }
 
+  validateJumpTargetsHaveContinuationFrames(layoutPlan, label);
+
   return layoutPlan;
 }
 
+function validateJumpTargetsHaveContinuationFrames(layoutPlan: EditionLayoutPlan, label: string): void {
+  const continuationFlowKeysByPageNumber = new Map<number, Set<string>>();
+  for (const page of layoutPlan.pages) {
+    const flowKeys = new Set<string>();
+    for (const region of page.regions) {
+      for (const block of region.blocks) {
+        if (block.type === "articleFrame" && block.startCursor === "current") flowKeys.add(block.flowKey ?? block.itemId);
+      }
+    }
+    continuationFlowKeysByPageNumber.set(page.pageNumber, flowKeys);
+  }
+  for (const page of layoutPlan.pages) {
+    for (const region of page.regions) {
+      for (const block of region.blocks) {
+        if (block.type !== "articleFrame") continue;
+        const jumpTargetPage = block.cutPolicy?.jumpTargetPage;
+        if (!jumpTargetPage) continue;
+        const flowKey = block.flowKey ?? block.itemId;
+        if (!continuationFlowKeysByPageNumber.get(jumpTargetPage)?.has(flowKey)) {
+          throw new Error(
+            `${label}.pages[${page.pageNumber}].regions.${region.id}.${block.id} advertises page ${jumpTargetPage} but that page has no startCursor "current" frame for flow ${flowKey}`,
+          );
+        }
+      }
+    }
+  }
+}
+
 function validateBlock(
   block: LayoutBlockSpec,
   itemsBySlug: Map<string, PublicationItem>,
@@ -859,7 +895,7 @@ function validateBlock(
   if (block.type === "mediaCluster") {
     const assets = findAssetsByRole(item, block.assetRole);
     if (block.required && assets.length < block.count.min) {
-      throw new Error(`${label}.${block.id} requires at least ${block.count.min} media assets`);
+      warnAboutMissingMedia(`${label}.${block.id} requires at least ${block.count.min} media assets`);
     }
   }
 }
@@ -867,7 +903,7 @@ function validateBlock(
 function validateMediaSpec(item: PublicationItem, media: LayoutMediaSpec, label: string): void {
   const matchingAssets = findAssetsByRole(item, media.assetRole);
   if (media.required && matchingAssets.length === 0) {
-    throw new Error(`${label} requires an image asset${media.assetRole ? ` with role ${media.assetRole}` : ""}`);
+    warnAboutMissingMedia(`${label} requires an image asset${media.assetRole ? ` with role ${media.assetRole}` : ""} and renders without it`);
   }
 }
 
@@ -954,13 +990,6 @@ function getDefaultFrontItemOrder(itemIds: string[]): string[] {
   return [itemIds[1], itemIds[0], itemIds[2], ...itemIds.slice(3)];
 }
 
-function getDefaultCutPolicy(itemId: string): ArticleFrameBlockSpec["cutPolicy"] | undefined {
-  if (itemId === "agent-procedure-patterns") return { maxBodyLines: 22, jumpTargetPage: 2 };
-  if (itemId === "schools-reading-lab") return { maxBodyLines: 16, jumpTargetPage: 3 };
-  if (itemId === "market-hall") return { maxBodyLines: 14, jumpTargetPage: 3 };
-  return undefined;
-}
-
 function parseMaybeJson(value: unknown, label: string): unknown {
   if (typeof value !== "string") {
     if (value === undefined || value === null) throw new Error(`${label} is required`);

package/lib/layout-scenarios.ts

@@ -1,7 +1,7 @@
 import { type Article, type ArticleVideoAsset, articles, editionDate } from "./articles";
 import type { EditionContent, NewsDeskAppendix } from "./content-types";
 import { createEditionSectionPlan } from "./edition-sections";
-import { createDefaultEditionLayoutPlan, type EditionLayoutPlan } from "./layout-plan";
+import { createDefaultEditionLayoutPlan, type ArticleCutPolicy, type EditionLayoutPlan } from "./layout-plan";
 import { articleToPublicationItem, cloneArticle } from "./publication-items";
 import { PILOBOL_SAMPLE_SCENARIO_ID, createPilobolSampleEditionContent } from "./pilobol-sample";
 import { SITE_BRAND } from "./site-brand";
@@ -17,6 +17,16 @@ type RawLayoutScenario = Omit<LayoutScenario, "sections"> & {
   sections?: LayoutScenario["sections"];
 };
 
+const fixtureCutPoliciesByItemId: Record<string, ArticleCutPolicy> = {
+  "agent-procedure-patterns": { maxBodyLines: 22, jumpTargetPage: 2 },
+  "schools-reading-lab": { maxBodyLines: 16, jumpTargetPage: 3 },
+  "market-hall": { maxBodyLines: 14, jumpTargetPage: 3 },
+};
+
+export function createFixtureEditionLayoutPlan(itemIds: string[]): EditionLayoutPlan {
+  return createDefaultEditionLayoutPlan(itemIds, fixtureCutPoliciesByItemId);
+}
+
 const defaultScenarioSeed = getDefaultScenarioSeed();
 
 const rawLayoutScenarios: RawLayoutScenario[] = [
@@ -27,7 +37,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     editionDate: defaultScenarioSeed.editionDate,
     scenarioId: DEFAULT_LAYOUT_SCENARIO_ID,
     description: defaultScenarioSeed.description,
-    layoutPlan: createDefaultEditionLayoutPlan(defaultScenarioSeed.articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(defaultScenarioSeed.articles.map((article) => article.slug)),
     items: cloneArticles(defaultScenarioSeed.articles).map(articleToPublicationItem),
     suppressNewsDeskAppendix: defaultScenarioSeed.suppressNewsDeskAppendix,
     editionVideo: defaultScenarioSeed.editionVideo,
@@ -40,7 +50,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     editionDate,
     scenarioId: "blank-edition-title",
     description: "A fixture edition with a blank title used to verify masthead fallback labeling.",
-    layoutPlan: createDefaultEditionLayoutPlan(articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(articles.map((article) => article.slug)),
     items: cloneArticles(articles).map(articleToPublicationItem),
   },
   {
@@ -51,7 +61,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     scenarioId: "shared-blank-column-pressure",
     description:
       "Shorter shared continuation tails with images and pull quotes, used to prove that empty columns are repaired with solved furniture.",
-    layoutPlan: createDefaultEditionLayoutPlan(articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(articles.map((article) => article.slug)),
     items: createSharedBlankColumnPressureArticles().map(articleToPublicationItem),
   },
   {
@@ -62,7 +72,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     scenarioId: "shared-continuation-no-pull-quotes",
     description:
       "The shared continuation page with editorial pull quotes removed, used to prove pull quotes are optional display furniture.",
-    layoutPlan: createDefaultEditionLayoutPlan(articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(articles.map((article) => article.slug)),
     items: createNoPullQuoteArticles().map(articleToPublicationItem),
   },
   {
@@ -106,7 +116,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     scenarioId: "long-image-caption",
     description:
       "A continuation image with a long caption proves image furniture reserves enough rhythm rows for complete caption text.",
-    layoutPlan: createDefaultEditionLayoutPlan(articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(articles.map((article) => article.slug)),
     items: createLongImageCaptionArticles().map(articleToPublicationItem),
   },
   {
@@ -116,7 +126,7 @@ const rawLayoutScenarios: RawLayoutScenario[] = [
     editionDate,
     scenarioId: "themed-ink-study",
     description: "A raster fixture verifies dark-mode image variant switching in solved newspaper image furniture.",
-    layoutPlan: createDefaultEditionLayoutPlan(articles.map((article) => article.slug)),
+    layoutPlan: createFixtureEditionLayoutPlan(articles.map((article) => article.slug)),
     items: createThemedInkStudyArticles().map(articleToPublicationItem),
   },
   {
@@ -377,7 +387,7 @@ function createHeightPolicyLayoutPlan({
   defaultRows?: number;
   blockShrinkToContent?: boolean;
 }): EditionLayoutPlan {
-  const plan = cloneLayoutPlan(createDefaultEditionLayoutPlan(articles.map((article) => article.slug)));
+  const plan = cloneLayoutPlan(createFixtureEditionLayoutPlan(articles.map((article) => article.slug)));
   const region = findPlanRegion(plan, "harbor-continuation");
   if (region) {
     if (regionShrinkToContent === undefined) {
@@ -472,7 +482,7 @@ function cloneArticles(source: Article[]): Article[] {
 }
 
 function createCompactChromeLayoutPlan(): EditionLayoutPlan {
-  const plan = cloneLayoutPlan(createDefaultEditionLayoutPlan(articles.map((article) => article.slug)));
+  const plan = cloneLayoutPlan(createFixtureEditionLayoutPlan(articles.map((article) => article.slug)));
   const frontPage = plan.pages.find((page) => page.pageNumber === 1);
   const frontBlocks = frontPage?.regions.flatMap((region) => region.blocks) ?? [];
   for (const block of frontBlocks) {
@@ -498,7 +508,7 @@ function createCompactChromeLayoutPlan(): EditionLayoutPlan {
 }
 
 function createFrontBodyDepthLayoutPlan(): EditionLayoutPlan {
-  const plan = cloneLayoutPlan(createDefaultEditionLayoutPlan(articles.map((article) => article.slug)));
+  const plan = cloneLayoutPlan(createFixtureEditionLayoutPlan(articles.map((article) => article.slug)));
   for (const blockId of ["front-agent-procedure-patterns", "front-schools-reading-lab", "front-market-hall"]) {
     const block = findPlanBlock(plan, blockId);
     if (block?.type !== "articleFrame") continue;
@@ -511,7 +521,7 @@ function createFrontBodyDepthLayoutPlan(): EditionLayoutPlan {
 }
 
 function createFurnitureSufficiencyLayoutPlan(): EditionLayoutPlan {
-  const plan = cloneLayoutPlan(createDefaultEditionLayoutPlan(articles.map((article) => article.slug)));
+  const plan = cloneLayoutPlan(createFixtureEditionLayoutPlan(articles.map((article) => article.slug)));
   const frontSchoolsBlock = findPlanBlock(plan, "front-schools-reading-lab");
   if (frontSchoolsBlock?.type === "articleFrame") {
     frontSchoolsBlock.cutPolicy = { maxBodyLines: 4, jumpTargetPage: 3 };