mosage 0.2.0 → 0.8.0

package/src/app/lib/print-ready.ts

@@ -0,0 +1,69 @@
+const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
+
+// `document.fonts.ready` already waits for every in-flight face. Never call
+// `face.load()` on the rest: unloaded faces were never requested by CSS, and
+// `load()` ignores `unicode-range`, so a subsetted CJK family (hundreds of
+// faces) would be force-downloaded in full and hang the tab.
+export async function waitForFonts(): Promise<void> {
+  if (!('fonts' in document)) return;
+  await document.fonts.ready;
+}
+
+export async function waitForImages(root: ParentNode, timeoutMs = 10_000): Promise<void> {
+  const images = Array.from(root.querySelectorAll('img'));
+  const pending = images.filter((img) => !img.complete);
+  if (pending.length === 0) return;
+  await Promise.race([
+    Promise.all(
+      pending.map(
+        (img) =>
+          new Promise<void>((resolve) => {
+            img.addEventListener('load', () => resolve(), { once: true });
+            img.addEventListener('error', () => resolve(), { once: true });
+          }),
+      ),
+    ),
+    sleep(timeoutMs),
+  ]);
+}
+
+export async function waitForDataWaitfor(
+  root: HTMLElement,
+  timeoutMs = DEFAULT_WAITFOR_TIMEOUT_MS,
+): Promise<void> {
+  const targets = Array.from(root.querySelectorAll<HTMLElement>('[data-waitfor]'));
+  if (targets.length === 0) return;
+  const deadline = performance.now() + timeoutMs;
+  await Promise.all(
+    targets.map(async (el) => {
+      const selector = el.getAttribute('data-waitfor');
+      if (!selector) return;
+      while (performance.now() < deadline) {
+        try {
+          if (el.querySelector(selector)) return;
+        } catch {
+          return; // invalid selector — skip rather than hang
+        }
+        await nextFrame();
+      }
+    }),
+  );
+}
+
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function nextFrame(): Promise<void> {
+  // rAF in real tabs; setTimeout fallback for hidden/throttled tabs.
+  return new Promise((resolve) => {
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      resolve();
+    };
+    requestAnimationFrame(settle);
+    setTimeout(settle, 50);
+  });
+}

package/src/app/lib/rasterize.ts

@@ -0,0 +1,173 @@
+/**
+ * Page content as a picture — SVG, and PNG rasterised from it.
+ *
+ * The page is HTML, so the SVG is an HTML page wrapped in `<foreignObject>`.
+ * That has one hard consequence: an SVG handed to the canvas rasteriser is
+ * loaded in isolation, and it may not fetch anything. A stylesheet URL, a web
+ * font, an `<img src>` pointing at the server — all of them silently do not
+ * arrive, and what comes out is a page in fallback fonts with holes where the
+ * images were. So every referenced asset is fetched here and embedded as a
+ * `data:` URI before the SVG is built. Fonts installed on the reader's own
+ * machine still resolve by name; only fetched ones need embedding.
+ */
+
+import { designToCssVars } from './design';
+import { findCssAssetUrls, findHtmlAssetUrls, toAbsolute } from './export-dom';
+import type { DocModule } from './sdk';
+
+type Size = { width: number; height: number };
+
+/**
+ * Rasterised at twice the CSS size. A page printed at 1x is legible on screen
+ * and disappointing everywhere else — the moment someone drops it into a slide
+ * the text is soft. Twice is the cheapest size that survives that.
+ */
+const SCALE = 2;
+
+const FETCHES = 8;
+
+/** Every asset the markup and the stylesheet reference, fetched and inlined as a `data:` URI. */
+export async function inlineAssets(
+  sourceCss: string,
+  pagesHtml: string[],
+): Promise<{ css: string; html: string[] }> {
+  const joined = pagesHtml.join('\n');
+  const urls = new Set<string>([...findHtmlAssetUrls(joined), ...findCssAssetUrls(sourceCss)]);
+
+  const replacements = new Map<string, string>();
+  const queue = [...urls];
+  const fetchNext = async (): Promise<void> => {
+    for (let url = queue.shift(); url !== undefined; url = queue.shift()) {
+      const absolute = toAbsolute(url);
+      if (!absolute) continue;
+      try {
+        const res = await fetch(absolute);
+        if (!res.ok) continue;
+        replacements.set(url, await blobToDataUrl(await res.blob()));
+      } catch {
+        /* An asset that will not load is left as it was: a broken picture in the
+           output is easier to diagnose than a silently missing one. */
+      }
+    }
+  };
+  // A few at a time. A self-hosted CJK family lists a thousand-odd subsets, and
+  // fetched all at once they exhaust Chromium's per-renderer request limit: the
+  // tail fails, and those glyphs silently fall back to another face.
+  await Promise.all(Array.from({ length: Math.min(FETCHES, queue.length) }, fetchNext));
+  if (replacements.size === 0) return { css: sourceCss, html: pagesHtml };
+
+  // One pass over each string. Replacing URL by URL rescans text that grows
+  // with every inlined font — quadratic once a CJK family brings hundreds.
+  const pattern = new RegExp(
+    [...replacements.keys()]
+      .sort((a, b) => b.length - a.length)
+      .map((url) => url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+      .join('|'),
+    'g',
+  );
+  const inline = (text: string) => text.replace(pattern, (url) => replacements.get(url) ?? url);
+  return { css: inline(sourceCss), html: pagesHtml.map(inline) };
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * The design variables live on the page host, and renderPagesToHtml returns the
+ * host's innerHTML, so they are not in the markup and have to be put back.
+ */
+export function designDeclarations(doc: DocModule): string {
+  const vars = doc.design ? designToCssVars(doc.design) : null;
+  return vars
+    ? Object.entries(vars)
+        .map(([name, value]) => `${name}:${value}`)
+        .join(';')
+    : '';
+}
+
+/**
+ * The markup has to come out as XML, not HTML.
+ *
+ * `foreignObject` content is parsed by the XML parser, which stops at the first
+ * `<br>` or `<img>` that never closes — and the failure arrives as an image that
+ * will not load, with nothing said about why. So the page is parsed as HTML into
+ * a real tree and serialised back out as XML, which closes those tags properly.
+ */
+export function htmlToSvg(pageHtml: string, css: string, size: Size, declarations: string): string {
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+  const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('width', String(size.width));
+  svg.setAttribute('height', String(size.height));
+  svg.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);
+
+  const foreign = document.createElementNS(SVG_NS, 'foreignObject');
+  foreign.setAttribute('x', '0');
+  foreign.setAttribute('y', '0');
+  foreign.setAttribute('width', String(size.width));
+  foreign.setAttribute('height', String(size.height));
+
+  const wrapper = document.createElementNS(XHTML_NS, 'div');
+  wrapper.setAttribute('style', `${declarations};width:${size.width}px;height:${size.height}px`);
+
+  const style = document.createElementNS(XHTML_NS, 'style');
+  style.appendChild(document.createTextNode(css));
+  wrapper.appendChild(style);
+
+  const content = document.createElementNS(XHTML_NS, 'div');
+  content.innerHTML = pageHtml;
+  wrapper.appendChild(content);
+
+  foreign.appendChild(wrapper);
+  svg.appendChild(foreign);
+  return new XMLSerializer().serializeToString(svg);
+}
+
+/**
+ * SVG → canvas → PNG.
+ *
+ * The SVG goes in as a `data:` URI, not a `blob:` one. Chrome taints a canvas
+ * that has been drawn from a blob-backed SVG containing `<foreignObject>`, and
+ * refuses to export it; the same markup as a data URI draws and exports fine.
+ * Verified against Chrome 151 — a plain SVG is clean either way, so the taint
+ * follows the foreignObject and the URL scheme together, not either alone.
+ */
+export async function rasterise(svg: string, size: Size): Promise<Blob> {
+  const source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+  const image = new Image();
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error('The page could not be drawn as an image.'));
+    image.src = source;
+  });
+  return drawToPng(image, size);
+}
+
+export async function drawToPng(image: CanvasImageSource, size: Size): Promise<Blob> {
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.round(size.width * SCALE);
+  canvas.height = Math.round(size.height * SCALE);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('This browser would not give a 2D canvas.');
+  /* A page is paper. A transparent PNG dropped on a dark slide shows black
+     body text on black. */
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.setTransform(SCALE, 0, 0, SCALE, 0, 0);
+  ctx.drawImage(image, 0, 0, size.width, size.height);
+
+  return await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => (blob ? resolve(blob) : reject(new Error('The canvas produced no image.'))),
+      'image/png',
+    );
+  });
+}

package/src/app/lib/scan.ts

@@ -0,0 +1,26 @@
+import { collectLabels, getLabels, type LabelSnapshot, setLabels } from './labels';
+import { collectOutline, getOutline, type OutlineEntry, setOutline } from './outline';
+import type { DocMeta } from './sdk';
+
+export type ScanSnapshot = { outline: OutlineEntry[]; labels: LabelSnapshot };
+
+/**
+ * Reads everything the rendered pages know that the source does not: which
+ * headings exist and where they landed, and what number each figure, table, and
+ * footnote ended up with. One call, because the two scans must always describe
+ * the same copy of the document — the viewer's pages, or an exporter's private
+ * one.
+ */
+export function scanDocument(root: ParentNode, meta?: DocMeta): void {
+  setOutline(collectOutline(root));
+  setLabels(collectLabels(root), meta?.labels);
+}
+
+export function captureScan(): ScanSnapshot {
+  return { outline: getOutline(), labels: getLabels() };
+}
+
+export function restoreScan(snapshot: ScanSnapshot): void {
+  setOutline(snapshot.outline);
+  setLabels(snapshot.labels.entries, snapshot.labels.vocabulary);
+}

package/src/app/lib/sdk.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { PAGE_SIZE_NAMES, PAGE_SIZES, resolvePageGeometry } from './sdk.ts';
+
+describe('resolvePageGeometry', () => {
+  it('defaults to portrait A4', () => {
+    expect(resolvePageGeometry()).toEqual({
+      width: PAGE_SIZES.A4.width,
+      height: PAGE_SIZES.A4.height,
+      mm: [210, 297],
+      css: '210mm 297mm',
+    });
+  });
+
+  it('offers A4, B4 and A3 and nothing else', () => {
+    expect([...PAGE_SIZE_NAMES]).toEqual(['A4', 'B4', 'A3']);
+    expect(Object.keys(PAGE_SIZES)).toEqual([...PAGE_SIZE_NAMES]);
+  });
+
+  it('swaps both the pixel axes and the @page descriptor for landscape', () => {
+    const geo = resolvePageGeometry({ pageSize: 'B4', orientation: 'landscape' });
+    expect(geo.width).toBe(PAGE_SIZES.B4.height);
+    expect(geo.height).toBe(PAGE_SIZES.B4.width);
+    // Chromium drops `<mm> <mm> landscape` entirely — the axes must be swapped.
+    expect(geo.css).toBe('364mm 257mm');
+    expect(geo.mm).toEqual([364, 257]);
+  });
+
+  it('falls back to A4 for a page size that is no longer offered', () => {
+    const geo = resolvePageGeometry({ pageSize: 'Letter' as never });
+    expect(geo.width).toBe(PAGE_SIZES.A4.width);
+  });
+});

package/src/app/lib/sdk.ts

@@ -0,0 +1,115 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { DesignSystem } from './design.ts';
+import type { LabelVocabulary } from './labels.ts';
+
+/** The only sheets a document may be laid out on. */
+export const PAGE_SIZE_NAMES = ['A4', 'B4', 'A3'] as const;
+
+export type PageSizeName = (typeof PAGE_SIZE_NAMES)[number];
+
+export const ORIENTATIONS = ['portrait', 'landscape'] as const;
+
+export type Orientation = (typeof ORIENTATIONS)[number];
+
+/**
+ * Portrait dimensions in CSS pixels at 96dpi — the unit authors write in —
+ * paired with the physical millimetres used when printing. Keeping both means a
+ * page laid out at 794×1123 on screen maps to a real A4 sheet with no rescaling.
+ */
+export const PAGE_SIZES: Record<
+  PageSizeName,
+  { width: number; height: number; mm: readonly [number, number] }
+> = {
+  A4: { width: 794, height: 1123, mm: [210, 297] },
+  // JIS B4, not the ISO B4 (250×353mm) that the CSS `size: B4` keyword means —
+  // which is why the descriptor is written in millimetres rather than by name.
+  B4: { width: 971, height: 1376, mm: [257, 364] },
+  A3: { width: 1123, height: 1587, mm: [297, 420] },
+};
+
+export const DEFAULT_PAGE_SIZE: PageSizeName = 'A4';
+
+export const DEFAULT_ORIENTATION: Orientation = 'portrait';
+
+export function isPageSizeName(value: unknown): value is PageSizeName {
+  return typeof value === 'string' && value in PAGE_SIZES;
+}
+
+export function isOrientation(value: unknown): value is Orientation {
+  return value === 'portrait' || value === 'landscape';
+}
+
+export type PageGeometry = {
+  width: number;
+  height: number;
+  /** The printed sheet in millimetres, across then down — what a Word section is sized in. */
+  mm: readonly [number, number];
+  /** Value for the `@page { size: … }` descriptor, orientation included. */
+  css: string;
+};
+
+export type DocPage = ComponentType;
+
+/**
+ * A run of continuous content the framework paginates itself. Build one with
+ * `flow(...)` and put it in the page array alongside fixed pages.
+ */
+export type FlowSection = {
+  readonly __odFlow: true;
+  blocks: ReactNode[];
+  /** Rendered on every page the section expands into. */
+  footer?: ComponentType;
+  /** Page padding override in px; defaults to the design's `margin`. */
+  padding?: number;
+};
+
+/** What a document's default export may contain: fixed pages, flow sections, or both. */
+export type DocEntry = DocPage | FlowSection;
+
+export type DocMeta = {
+  title?: string;
+  subtitle?: string;
+  author?: string;
+  pageSize?: PageSizeName;
+  orientation?: Orientation;
+  /** Id of a theme under `themes/` this document was built from. Adds a back-link. */
+  theme?: string;
+  /** ISO 8601 timestamp. Set once at scaffold time; used to sort the doc list. */
+  createdAt?: string;
+  /** What numbered items are called — `圖`/`表` instead of `Figure`/`Table`. */
+  labels?: Partial<LabelVocabulary>;
+};
+
+export type FolderIcon = { type: 'emoji'; value: string } | { type: 'color'; value: string };
+
+export type Folder = {
+  id: string;
+  name: string;
+  icon: FolderIcon;
+};
+
+export type FoldersManifest = {
+  folders: Folder[];
+  assignments: Record<string, string>;
+};
+
+export type DocModule = {
+  default: DocEntry[];
+  meta?: DocMeta;
+  design?: DesignSystem;
+};
+
+export function resolvePageGeometry(meta?: DocMeta): PageGeometry {
+  const size = PAGE_SIZES[meta?.pageSize ?? DEFAULT_PAGE_SIZE] ?? PAGE_SIZES[DEFAULT_PAGE_SIZE];
+  const landscape = meta?.orientation === 'landscape';
+  const [across, down] = landscape ? [size.mm[1], size.mm[0]] : size.mm;
+  return {
+    width: landscape ? size.height : size.width,
+    height: landscape ? size.width : size.height,
+    mm: [across, down],
+    // Not `<mm> <mm> landscape`: the `landscape` keyword is only valid next to a
+    // page-size *name*, and Chromium drops the whole descriptor if it sees both,
+    // which silently prints a landscape sheet at the dialog's default size.
+    css: `${across}mm ${down}mm`,
+  };
+}

package/src/app/lib/themes.ts

@@ -0,0 +1,31 @@
+import { loadThemeDemo as load, themes as raw } from 'virtual:mosage/themes';
+import type { DesignSystem } from './design';
+import type { DocPage } from './sdk';
+
+export type ThemeMeta = {
+  id: string;
+  name: string;
+  description: string;
+  /** Frontmatter hint — 'A4' | 'Letter' | … or '' when the theme doesn't say. */
+  pageSize: string;
+  /** Frontmatter hint — 'light' | 'dark' | '' */
+  mode: string;
+  body: string;
+  hasDemo: boolean;
+};
+
+export type ThemeDemoModule = {
+  default: DocPage[];
+  design?: DesignSystem;
+};
+
+export const themes: ThemeMeta[] = raw;
+
+export function findTheme(id: string | undefined): ThemeMeta | undefined {
+  if (!id) return undefined;
+  return themes.find((t) => t.id === id);
+}
+
+export async function loadThemeDemo(id: string): Promise<ThemeDemoModule> {
+  return load(id);
+}

package/src/app/lib/use-doc-module.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { docChangeIncludes, loadDoc } from './docs';
+import type { DocModule } from './sdk';
+
+export type DocState =
+  | { status: 'loading'; doc: null; error: null }
+  | { status: 'ready'; doc: DocModule; error: null }
+  | { status: 'error'; doc: null; error: Error };
+
+const LOADING: DocState = { status: 'loading', doc: null, error: null };
+
+export function useDocModule(docId: string | undefined): DocState {
+  const [state, setState] = useState<DocState>(LOADING);
+
+  useEffect(() => {
+    if (!docId) return;
+    let cancelled = false;
+
+    const read = () => {
+      loadDoc(docId)
+        .then((doc) => {
+          if (!cancelled) setState({ status: 'ready', doc, error: null });
+        })
+        .catch((err: unknown) => {
+          if (cancelled) return;
+          setState({
+            status: 'error',
+            doc: null,
+            error: err instanceof Error ? err : new Error(String(err)),
+          });
+        });
+    };
+
+    setState(LOADING);
+    read();
+
+    if (!import.meta.hot)
+      return () => {
+        cancelled = true;
+      };
+
+    const onChange = (data: unknown) => {
+      if (docChangeIncludes(data, docId)) read();
+    };
+    import.meta.hot.on('mosage:doc-changed', onChange);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('mosage:doc-changed', onChange);
+    };
+  }, [docId]);
+
+  return state;
+}

package/src/app/lib/use-doc-pages.ts

@@ -0,0 +1,147 @@
+import { createElement, type ReactNode, useEffect, useMemo, useState } from 'react';
+import { FlowPage } from '../components/flow-page';
+import type { DesignSystem } from './design';
+import { type DocEntry, type FlowSection, isFlowSection, paginateBlocks } from './flow';
+import { type MeasurableSection, measureFlowSections } from './flow-measure';
+import {
+  type ExtractedNote,
+  extractSectionFootnotes,
+  notesForPage,
+  type PreparedSection,
+} from './footnotes';
+import type { DocModule, PageGeometry } from './sdk';
+
+/** The slice of a flow section one sheet shows. */
+export type FlowSlice = {
+  /** Index into the document's entries; every sheet of one section shares it. */
+  entry: number;
+  section: FlowSection;
+  blocks: ReactNode[];
+  blockIndices: number[];
+  notes: ExtractedNote[];
+};
+
+export type ExpandedPage = {
+  key: string;
+  content: ReactNode;
+  /** Set on a flow section's sheets, so an exporter that reflows can join them up again. */
+  flow?: FlowSlice;
+};
+
+type Plan = {
+  /** Section index → block indices per page. */
+  bySection: number[][][];
+  overflowing: Array<{ section: number; block: number }>;
+};
+
+const EMPTY_PLAN: Plan = { bySection: [], overflowing: [] };
+
+/** A plan is only current for the sections it was measured from. */
+type Measured = { plan: Plan; sections: FlowSection[] | null };
+
+const NOT_MEASURED: Measured = { plan: EMPTY_PLAN, sections: null };
+
+function entriesOf(doc: DocModule | null): DocEntry[] {
+  return (doc?.default ?? []) as DocEntry[];
+}
+
+/**
+ * Turns the authored entry list into the pages actually rendered: fixed page
+ * components pass through, flow sections expand into as many pages as their
+ * measured content needs.
+ */
+export function useDocPages(
+  doc: DocModule | null,
+  geometry: PageGeometry,
+): { pages: ExpandedPage[]; measuring: boolean; overflowing: Plan['overflowing'] } {
+  const entries = useMemo(() => entriesOf(doc), [doc]);
+  const sections = useMemo(() => entries.filter(isFlowSection), [entries]);
+  const design = doc?.design as DesignSystem | undefined;
+
+  // Footnotes come out of the blocks before anything is measured: what they
+  // cost at the foot of a page is part of that page's budget.
+  const prepared = useMemo<PreparedSection[]>(
+    () => sections.map((section, index) => extractSectionFootnotes(section.blocks, index)),
+    [sections],
+  );
+  const measurable = useMemo<MeasurableSection[]>(
+    () =>
+      sections.map((section, index) => ({
+        blocks: prepared[index].blocks,
+        notesByBlock: prepared[index].notesByBlock,
+        ...(section.padding !== undefined ? { padding: section.padding } : {}),
+      })),
+    [sections, prepared],
+  );
+
+  const [state, setState] = useState<Measured>(NOT_MEASURED);
+  // Derived, not stored: a `measuring` flag set from an effect stays false for
+  // one commit after the document loads, and anything reading the page list in
+  // that window — the outline scan, the headless bridge — sees a whole flow
+  // section as one unpaginated page.
+  const measuring = sections.length > 0 && state.sections !== sections;
+
+  useEffect(() => {
+    if (sections.length === 0) {
+      setState({ plan: EMPTY_PLAN, sections });
+      return;
+    }
+    let cancelled = false;
+    measureFlowSections(measurable, { geometry, design })
+      .then((measurements) => {
+        if (cancelled) return;
+        const bySection: number[][][] = [];
+        const overflowing: Plan['overflowing'] = [];
+        measurements.forEach((measurement, sectionIndex) => {
+          const result = paginateBlocks(measurement.metrics, measurement.available, {
+            footnoteOverhead: measurement.footnoteOverhead,
+          });
+          bySection.push(result.pages);
+          for (const block of result.overflowing) {
+            overflowing.push({ section: sectionIndex, block });
+          }
+        });
+        setState({ plan: { bySection, overflowing }, sections });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ plan: EMPTY_PLAN, sections });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [sections, measurable, geometry, design]);
+
+  const plan = state.plan;
+
+  const pages = useMemo(() => {
+    const out: ExpandedPage[] = [];
+    let sectionIndex = -1;
+
+    entries.forEach((entry, entryIndex) => {
+      if (!isFlowSection(entry)) {
+        const Page = entry;
+        out.push({ key: `p${entryIndex}`, content: createElement(Page) });
+        return;
+      }
+      sectionIndex++;
+      const section = entry as FlowSection;
+      const ready = prepared[sectionIndex];
+      const blocks = ready?.blocks ?? section.blocks;
+      // Before measurement lands, render the section as a single page so the
+      // viewer shows something rather than flashing empty.
+      const chunks = plan.bySection[sectionIndex] ?? [blocks.map((_, i) => i)];
+      chunks.forEach((blockIndices, pageIndex) => {
+        const notes = ready ? notesForPage(ready.notesByBlock, blockIndices) : [];
+        out.push({
+          key: `f${entryIndex}-${pageIndex}`,
+          content: createElement(FlowPage, { section, design, blockIndices, blocks, notes }),
+          flow: { entry: entryIndex, section, blocks, blockIndices, notes },
+        });
+      });
+    });
+
+    return out;
+  }, [entries, plan, prepared, design]);
+
+  return { pages, measuring, overflowing: plan.overflowing };
+}

package/src/app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}