@open-press/core 0.8.0 → 1.1.0

package/engine/react/document-export.mjs

@@ -6,8 +6,11 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
+import React from "react";
 import { documentRelativePath, pageToBlock } from "../output/page-block.mjs";
 import { syncPublicAssets } from "../output/public-assets.mjs";
+import { pageGeometryToTheme } from "../runtime/page-geometry.mjs";
+import { normalizePageGeometry } from "../runtime/page-geometry.mjs";
 import { createCaptionNumberingState, numberCaptionsInHtml } from "./caption-numbering.mjs";
 import { buildSectionScopedCss } from "./section-css.mjs";
 import { CORE_ENTRY, createReactSsrServer, loadReactDocumentEntry } from "./document-entry.mjs";
@@ -50,7 +53,11 @@ export async function exportReactDocument(root = ".", { syncAssets = true } = {}
     }
 
     // Discover workspace for component scope and chapter-scoped style files.
-    const workspace = await discoverSectionStyles(workspaceRoot, entry.config);
+    // Pass every Press's resolved section-folders root so per-Press chapter
+    // folders (e.g. press/userstory/chapters/) are all picked up — the
+    // workspace can host more than one chapter root.
+    const sectionRoots = collectSectionRoots(entry.presses, entry.config.paths.documentRoot);
+    const workspace = await discoverSectionStyles(workspaceRoot, entry.config, { sectionRoots });
     const coreAuthorComponents = {};
     for (const name of ["MediaFigure", "ImageFigure"]) {
       if (typeof coreModule[name] === "function") coreAuthorComponents[name] = coreModule[name];
@@ -60,199 +67,309 @@ export async function exportReactDocument(root = ".", { syncAssets = true } = {}
       ...(await loadComponentModules(server, workspace.globalComponents ?? [])),
     };
 
-    // Resolve sources.
-    const documentRoot = entry.config.paths.documentRoot;
-    const { resolved: sources, renderData: renderRegistry } = await resolveAllSources({
-      sources: entry.sources,
-      documentRoot,
-      globalComponents,
-    });
+    // Build measurement CSS once at the workspace level — shared by every
+    // Press inside the Workspace.
+    const measurementCss = await buildReactMeasurementCss(workspaceRoot, entry.config, workspace);
 
-    // Build measurement CSS.
-    const css = await buildReactMeasurementCss(workspaceRoot, entry.config, workspace);
-
-    // Iterative allocation loop.
-    let hints = null;
-    let allocation = null;
-    let lastFrames = null;
-    let warnings = [];
-    for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
-      const { html, frames } = expandPressTree({
-        Press: entry.Press,
-        PressContext,
-        sources,
-        hints,
-      });
-      lastFrames = frames;
-      validateAllChainsKnown(frames, sources);
-      const measurement = await measureFrames({
-        pressHtml: html,
-        sources,
-        renderRegistry,
-        css,
-        baseHref: pathToFileURL(`${documentRoot}${path.sep}`).href,
-        mediaDir: path.join(documentRoot, "media"),
-        captionNumbering: entry.config.captionNumbering,
+    // Write chapter-scoped CSS once (workspace shared). Every per-press
+    // readerDocument references the same file via "/openpress/chapter-scoped.css".
+    const chapterCss = await buildSectionScopedCss(workspace);
+    const sharedStyles = [];
+    await fs.mkdir(entry.config.paths.publicDir, { recursive: true });
+    if (chapterCss.trim()) {
+      await fs.writeFile(path.join(entry.config.paths.publicDir, "chapter-scoped.css"), chapterCss, "utf8");
+      sharedStyles.push({
+        kind: "chapter-scoped-css",
+        href: "/openpress/chapter-scoped.css",
+        path: "chapter-scoped.css",
       });
-      const alloc = allocateChains({
-        frames,
-        mdxAreas: measurement.mdxAreas,
-        blockHeights: measurement.blockHeights,
-        sources,
+    }
+
+    // Iterate every Press declared inside <Workspace>. Single-doc
+    // workspaces just have length-1 here; the code path is uniform.
+    const pressResults = [];
+    for (const press of entry.presses) {
+      const result = await exportSinglePress({
+        press,
+        entry,
+        workspaceRoot,
+        server,
+        coreModule,
+        PressContext,
+        workspace,
+        globalComponents,
+        measurementCss,
+        sharedStyles,
       });
-      if (process.env.OPENPRESS_DEBUG_ALLOC) {
-        const sample = measurement.mdxAreas
-          .slice(0, 5)
-          .map((a) => `${a.frameKey}#${a.indexInFrame} cap=${a.capacity.toFixed(0)} raw=${(a.rawHeight ?? 0).toFixed(0)}`);
-        const blocks = measurement.blockHeights
-          .slice(0, 8)
-          .map((b) => `${b.id} h=${b.height.toFixed(0)}`);
-        process.stderr.write(`[allocator iter ${iteration}]\n`);
-        process.stderr.write(`  mdxAreas[0..4]: ${sample.join(" | ")}\n`);
-        process.stderr.write(`  blocks[0..7]:   ${blocks.join(" | ")}\n`);
-        process.stderr.write(`  hints:          ${JSON.stringify(alloc.hints.totalPagesPerChain)}\n`);
-        if (alloc.warnings.length > 0) {
-          process.stderr.write(`  warnings:       ${JSON.stringify(alloc.warnings)}\n`);
-        }
-      }
-      if (hintsEqual(hints, alloc.hints)) {
-        allocation = alloc.allocation;
-        warnings = alloc.warnings;
-        break;
-      }
-      hints = alloc.hints;
+      pressResults.push(result);
     }
-    if (allocation == null) {
-      throw new Error(
-        `Allocation did not converge after ${MAX_ITERATIONS} iterations. ` +
-          `This usually means a chain keeps growing without fitting; check MdxArea capacities and block heights.`,
-      );
+
+    // Build workspace.json — one entry per Press. The reader fetches
+    // this first to decide between gallery (length > 1) and direct
+    // load (length 1).
+    const workspaceManifest = {
+      version: 1,
+      name: typeof entry.workspaceProps?.name === "string" && entry.workspaceProps.name.trim()
+        ? entry.workspaceProps.name.trim()
+        : null,
+      presses: pressResults.map((r) => ({
+        slug: r.slug,
+        title: r.readerDocument.meta.title,
+        page: r.readerDocument.theme ?? null,
+        pageCount: r.pageCount,
+        documentUrl: r.documentUrl,
+      })),
+    };
+    const workspacePath = path.join(entry.config.paths.publicDir, "workspace.json");
+    await fs.writeFile(workspacePath, JSON.stringify(workspaceManifest, null, 2), "utf8");
+
+    if (syncAssets) {
+      await syncPublicAssets(workspaceRoot, entry.config.paths.publicDir, entry.config);
     }
 
-    const toc = buildTocContext({ sources, frames: lastFrames ?? [], allocation });
+    const primary = pressResults[0];
+    return {
+      documentPath: primary?.documentPath,
+      pageCount: primary?.pageCount ?? 0,
+      document: primary?.readerDocument,
+      presses: pressResults,
+    };
+  } finally {
+    await server.close();
+  }
+}
+
+// Render one Press from the Workspace into its own document.json.
+// Called once per <Press> child; single-doc workspaces just call this
+// once with the only Press. Returns the per-press summary the
+// workspace manifest is built from.
+async function exportSinglePress({
+  press,
+  entry,
+  workspaceRoot,
+  server,
+  coreModule,
+  PressContext,
+  workspace,
+  globalComponents,
+  measurementCss,
+  sharedStyles,
+}) {
+  const slug = typeof press.metadata?.slug === "string" && press.metadata.slug.trim()
+    ? press.metadata.slug.trim()
+    : "";
+
+  // Effective config for this press: workspace config with per-press
+  // metadata overlaid. Press JSX page prop wins over the workspace page.
+  const effectiveConfig = applyPressOverridesToConfig(entry.config, press.metadata);
+  const documentRoot = effectiveConfig.paths.documentRoot;
+
+  // Resolve sources for this press. The 1.0 contract reads them from
+  // <Press sources={[...]}>; the v0.x legacy path uses the synthesized
+  // record from `export const sources`.
+  const sourcesRecord = press.sources ?? {};
+  const { resolved: sources, renderData: renderRegistry } = await resolveAllSources({
+    sources: sourcesRecord,
+    documentRoot,
+    globalComponents,
+  });
+
+  // Component the render pipeline drives. For Press elements captured
+  // by inspection (1.0 contract), wrap the captured element in a thin
+  // function component. For legacy projects without inspection data,
+  // fall back to the user's whole default export.
+  const PressComponent = press.element
+    ? () => press.element
+    : entry.Press;
 
-    // Final render.
-    const final = await renderFinalPress({
-      Press: entry.Press,
+  // Iterative allocation loop (identical to v0.x — paginates until the
+  // hints stabilise).
+  let hints = null;
+  let allocation = null;
+  let lastFrames = null;
+  let warnings = [];
+  for (let iteration = 0; iteration < MAX_ITERATIONS; iteration++) {
+    const { html, frames } = expandPressTree({
+      Press: PressComponent,
       PressContext,
       sources,
       hints,
-      toc,
-      allocation,
+    });
+    lastFrames = frames;
+    validateAllChainsKnown(frames, sources);
+    const measurement = await measureFrames({
+      pressHtml: html,
+      sources,
       renderRegistry,
+      css: measurementCss,
+      baseHref: pathToFileURL(`${documentRoot}${path.sep}`).href,
+      mediaDir: path.join(documentRoot, "media"),
+      captionNumbering: effectiveConfig.captionNumbering,
     });
-
-    // Write chapter-scoped CSS (under section-scoped rules but filename
-    // unchanged for now).
-    const chapterCss = await buildSectionScopedCss(workspace);
-    const styles = [];
-    await fs.mkdir(entry.config.paths.publicDir, { recursive: true });
-    if (chapterCss.trim()) {
-      await fs.writeFile(path.join(entry.config.paths.publicDir, "chapter-scoped.css"), chapterCss, "utf8");
-      styles.push({
-        kind: "chapter-scoped-css",
-        href: "/openpress/chapter-scoped.css",
-        path: "chapter-scoped.css",
-      });
+    const alloc = allocateChains({
+      frames,
+      mdxAreas: measurement.mdxAreas,
+      blockHeights: measurement.blockHeights,
+      sources,
+    });
+    if (process.env.OPENPRESS_DEBUG_ALLOC) {
+      const sample = measurement.mdxAreas
+        .slice(0, 5)
+        .map((a) => `${a.frameKey}#${a.indexInFrame} cap=${a.capacity.toFixed(0)} raw=${(a.rawHeight ?? 0).toFixed(0)}`);
+      const blocks = measurement.blockHeights
+        .slice(0, 8)
+        .map((b) => `${b.id} h=${b.height.toFixed(0)}`);
+      process.stderr.write(`[allocator press=${slug || "(root)"} iter ${iteration}]\n`);
+      process.stderr.write(`  mdxAreas[0..4]: ${sample.join(" | ")}\n`);
+      process.stderr.write(`  blocks[0..7]:   ${blocks.join(" | ")}\n`);
+      process.stderr.write(`  hints:          ${JSON.stringify(alloc.hints.totalPagesPerChain)}\n`);
+      if (alloc.warnings.length > 0) {
+        process.stderr.write(`  warnings:       ${JSON.stringify(alloc.warnings)}\n`);
+      }
+    }
+    if (hintsEqual(hints, alloc.hints)) {
+      allocation = alloc.allocation;
+      warnings = alloc.warnings;
+      break;
     }
+    hints = alloc.hints;
+  }
+  if (allocation == null) {
+    throw new Error(
+      `Allocation did not converge after ${MAX_ITERATIONS} iterations (press="${slug || "(root)"}"). ` +
+        `This usually means a chain keeps growing without fitting; check MdxArea capacities and block heights.`,
+    );
+  }
 
-    // Build document.json. The reader filters blocks by kind === "htmlPage",
-    // so wrap each frame through `pageToBlock` to inherit that contract.
-    const blockMap = {};
-    const captionState = createCaptionNumberingState();
-    const blocks = final.frames.map((frame, index) => {
-      const source = {
-        file: "index.tsx",
-        path: "document/index.tsx",
-        kind: frame.role ?? "manuscript.content",
-        slug: frame.frameKey,
-        sectionIndex: index + 1,
-      };
-      const html = numberCaptionsInHtml(frame.html, entry.config.captionNumbering, captionState);
-      for (const id of collectFrameBlockIds(frame.blockIds, html)) {
-        blockMap[id] = { id, pageIndex: index, pageNumber: index + 1, frameKey: frame.frameKey };
-      }
-      const block = pageToBlock(index, html, source, entry.config, {
-        idPrefix: "openpress-page",
-        anchorPrefix: "page",
-        titleFallback: "Page",
-      });
-      return {
-        ...block,
-        frameKey: frame.frameKey,
-        role: frame.role ?? null,
-        chrome: frame.chrome ?? true,
-        blockIds: frame.blockIds,
-      };
+  const toc = buildTocContext({ sources, frames: lastFrames ?? [], allocation });
+
+  const final = await renderFinalPress({
+    Press: PressComponent,
+    PressContext,
+    sources,
+    hints,
+    toc,
+    allocation,
+    renderRegistry,
+  });
+
+  // Build the reader's document.json. Same shape as v0.x; the only
+  // change is metadata.title comes from the per-press Press JSX prop.
+  const blockMap = {};
+  const captionState = createCaptionNumberingState();
+  const blocks = final.frames.map((frame, index) => {
+    const source = {
+      file: "index.tsx",
+      path: slug ? `press/${slug}/index.tsx` : "press/index.tsx",
+      kind: frame.role ?? "manuscript.content",
+      slug: frame.frameKey,
+      sectionIndex: index + 1,
+    };
+    const html = numberCaptionsInHtml(frame.html, effectiveConfig.captionNumbering, captionState);
+    for (const id of collectFrameBlockIds(frame.blockIds, html)) {
+      blockMap[id] = { id, pageIndex: index, pageNumber: index + 1, frameKey: frame.frameKey };
+    }
+    const block = pageToBlock(index, html, source, effectiveConfig, {
+      idPrefix: "openpress-page",
+      anchorPrefix: "page",
+      titleFallback: "Page",
     });
+    return {
+      ...block,
+      frameKey: frame.frameKey,
+      role: frame.role ?? null,
+      chrome: frame.chrome ?? true,
+      blockIds: frame.blockIds,
+    };
+  });
 
-    // Enrich blockMap with source records from resolved chains so comment
-    // tooling can resolve block IDs back to MDX positions.
-    const sourceBlockIndex = buildSourceBlockIndex(sources);
-    for (const id of Object.keys(blockMap)) {
-      const sourceRecord = sourceBlockIndex.get(id);
-      if (sourceRecord) {
-        blockMap[id] = {
-          ...blockMap[id],
-          kind: sourceRecord.kind,
-          name: sourceRecord.name,
-          path: sourceRecord.path,
-          source: sourceRecord.source,
-          chainId: sourceRecord.chainId,
-          sectionSlug: sourceRecord.sectionSlug,
-        };
-      }
+  const sourceBlockIndex = buildSourceBlockIndex(sources);
+  for (const id of Object.keys(blockMap)) {
+    const sourceRecord = sourceBlockIndex.get(id);
+    if (sourceRecord) {
+      blockMap[id] = {
+        ...blockMap[id],
+        kind: sourceRecord.kind,
+        name: sourceRecord.name,
+        path: sourceRecord.path,
+        source: sourceRecord.source,
+        chainId: sourceRecord.chainId,
+        sectionSlug: sourceRecord.sectionSlug,
+      };
     }
+  }
 
-    const objectEntities = buildObjectEntities({
-      frames: final.frames.map((frame, index) => ({ ...frame, pageIndex: index })),
-      blocks,
-      blockMap,
-    });
+  const objectEntities = buildObjectEntities({
+    frames: final.frames.map((frame, index) => ({ ...frame, pageIndex: index })),
+    blocks,
+    blockMap,
+  });
 
-    const readerDocument = {
-      meta: {
-        title: trimmedString(entry.config.title) ?? "Untitled Document",
-        subtitle: trimmedString(entry.config.subtitle) ?? "",
-        organization: trimmedString(entry.config.organization) ?? "",
-        workspaceLabel: trimmedString(entry.config.workspaceLabel) ?? "",
-        version: "openpress-press-tree-v1",
-      },
-      source: {
-        type: "openpress-press-tree-mdx",
-        contentDir: documentRelativePath(entry.config, entry.config.sourceDir),
-        editable: true,
-        editMode: "source-mdx",
-        styles,
-        blockMap,
-        objectEntities,
-        frames: final.frames.map((frame, index) => ({
-          frameKey: frame.frameKey,
-          role: frame.role ?? null,
-          pageIndex: index,
-          mdxAreas: frame.mdxAreas.map((area) => ({
-            chainId: area.chainId,
-            indexInFrame: area.indexInFrame,
-            blockIds: area.blockIds,
-          })),
+  const readerDocument = {
+    meta: {
+      title: trimmedString(effectiveConfig.title) ?? "Untitled Document",
+      subtitle: trimmedString(effectiveConfig.subtitle) ?? "",
+      organization: trimmedString(effectiveConfig.organization) ?? "",
+      workspaceLabel: trimmedString(effectiveConfig.workspaceLabel) ?? "",
+      version: "openpress-press-tree-v1",
+    },
+    theme: pageGeometryToTheme(effectiveConfig.page),
+    source: {
+      type: "openpress-press-tree-mdx",
+      contentDir: documentRelativePath(effectiveConfig, effectiveConfig.sourceDir),
+      editable: true,
+      editMode: "source-mdx",
+      styles: sharedStyles,
+      blockMap,
+      objectEntities,
+      frames: final.frames.map((frame, index) => ({
+        frameKey: frame.frameKey,
+        role: frame.role ?? null,
+        pageIndex: index,
+        mdxAreas: frame.mdxAreas.map((area) => ({
+          chainId: area.chainId,
+          indexInFrame: area.indexInFrame,
+          blockIds: area.blockIds,
         })),
-        chains: Object.keys(sources).flatMap((id) => Object.keys(sources[id].chains)),
-        warnings,
-      },
-      blocks,
-    };
+      })),
+      chains: Object.keys(sources).flatMap((id) => Object.keys(sources[id].chains)),
+      warnings,
+    },
+    blocks,
+  };
 
-    const documentPath = path.join(entry.config.paths.publicDir, "document.json");
-    await fs.writeFile(documentPath, JSON.stringify(readerDocument, null, 2), "utf8");
+  // Output path: empty slug → root /openpress/document.json (legacy
+  // single-Press shape). Non-empty slug → /openpress/<slug>/document.json.
+  const pressOutputDir = slug
+    ? path.join(effectiveConfig.paths.publicDir, slug)
+    : effectiveConfig.paths.publicDir;
+  await fs.mkdir(pressOutputDir, { recursive: true });
+  const documentPath = path.join(pressOutputDir, "document.json");
+  await fs.writeFile(documentPath, JSON.stringify(readerDocument, null, 2), "utf8");
 
-    if (syncAssets) {
-      await syncPublicAssets(workspaceRoot, entry.config.paths.publicDir, entry.config);
-    }
+  return {
+    slug,
+    documentPath,
+    documentUrl: slug ? `/openpress/${slug}/document.json` : "/openpress/document.json",
+    readerDocument,
+    pageCount: blocks.length,
+  };
+}
 
-    return { documentPath, pageCount: blocks.length, document: readerDocument };
-  } finally {
-    await server.close();
+// Apply per-Press JSX prop overrides onto the workspace-level config.
+// Returns a new config object — the original is untouched so other
+// presses in the same workspace get a clean base.
+function applyPressOverridesToConfig(workspaceConfig, pressMetadata) {
+  if (!pressMetadata) return workspaceConfig;
+  const out = { ...workspaceConfig };
+  if (pressMetadata.title) out.title = pressMetadata.title;
+  if (pressMetadata.page !== undefined) {
+    out.page = normalizePageGeometry(pressMetadata.page);
   }
+  if (pressMetadata.captionNumbering !== undefined) {
+    out.captionNumbering = { ...workspaceConfig.captionNumbering, ...pressMetadata.captionNumbering };
+  }
+  return out;
 }
 
 async function loadComponentModules(server, components) {
@@ -371,3 +488,25 @@ function trimmedString(value) {
   const trimmed = value.trim();
   return trimmed ? trimmed : null;
 }
+
+// Walk every Press's mdxSource descriptors and collect the absolute
+// path each section-folders root resolves to. discoverSectionStyles
+// iterates these to find section-scoped CSS across a multi-Press
+// workspace where chapters live under per-Press subfolders.
+function collectSectionRoots(presses, documentRoot) {
+  const roots = new Set();
+  for (const press of presses ?? []) {
+    const sources = press?.sources;
+    if (!sources || typeof sources !== "object") continue;
+    for (const descriptor of Object.values(sources)) {
+      if (descriptor?.type !== "mdx") continue;
+      if (descriptor?.preset !== "section-folders") continue;
+      const rel = typeof descriptor.root === "string" && descriptor.root.trim()
+        ? descriptor.root.trim()
+        : "chapters";
+      roots.add(path.resolve(documentRoot, rel));
+    }
+  }
+  return [...roots];
+}
+

package/engine/react/mdx-compile.mjs

@@ -183,6 +183,7 @@ function applyTableRowBlocks({
     setDataAttribute(headerRecord.node, "data-openpress-block-id", headerRecord.id);
     setDataAttribute(headerRecord.node, "data-openpress-object-id", createBlockObjectEntityId(headerRecord.id));
     setDataAttribute(headerRecord.node, "data-openpress-block-layout", "attached");
+    annotateTableCells(headerRecord.node, headerRecord.id);
   }
   if (captionRecord) {
     if (renderCaption) {
@@ -226,6 +227,13 @@ function applyTableRowBlocks({
   for (const row of selected) {
     setDataAttribute(row.node, "data-openpress-block-id", row.id);
     setDataAttribute(row.node, "data-openpress-object-id", createBlockObjectEntityId(row.id));
+    // Bake cell-level object ids into every <td>/<th>. The inspector resolves
+    // a clicked target via `closest("[data-openpress-object-id]")` — without
+    // this, a click inside a cell would walk up to the row and a comment
+    // would target the entire row. With the cell-precision id present in the
+    // static HTML the inspector targets the individual cell, matching the
+    // engine's per-cell source-edit pipeline (`cellIndex`).
+    annotateTableCells(row.node, row.id);
     blocks.push({
       id: row.id,
       kind: "table-row",
@@ -241,6 +249,28 @@ function applyTableRowBlocks({
   return "skip";
 }
 
+function annotateTableCells(rowNode, rowBlockId) {
+  const children = Array.isArray(rowNode?.children) ? rowNode.children : [];
+  let cellIndex = 0;
+  for (const child of children) {
+    if (child?.type !== "element") continue;
+    if (child.tagName !== "td" && child.tagName !== "th") continue;
+    // Inherit the row's block id so `findObjectSelection` can resolve the
+    // cell's underlying SourceBlock (which lives on the row). The
+    // cell-precision `data-openpress-object-id` + cellIndex still let the
+    // inspector / source-edit pipeline target a single cell within that row.
+    // `data-openpress-inherited-block-id="true"` keeps the same convention
+    // the inline editor uses for caption / cell descendants, so block
+    // measurement (which queries `[data-openpress-block-id]`) can skip
+    // these and not double-count the row's height across N cells.
+    setDataAttribute(child, "data-openpress-block-id", rowBlockId);
+    setDataAttribute(child, "data-openpress-inherited-block-id", "true");
+    setDataAttribute(child, "data-openpress-object-id", `${createBlockObjectEntityId(rowBlockId)}:cell:${cellIndex}`);
+    setDataAttribute(child, "data-openpress-table-cell-index", String(cellIndex));
+    cellIndex += 1;
+  }
+}
+
 export function remarkBlockOnlyMdx(options = {}) {
   const filePath = String(options.filePath ?? "document.mdx");
 

package/engine/react/measurement-css.mjs

@@ -3,6 +3,7 @@ import { createRequire } from "node:module";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { buildComponentsCss, buildContentCss } from "../runtime/file-utils.mjs";
+import { pageGeometryToTheme } from "../runtime/page-geometry.mjs";
 import { buildSectionScopedCss } from "./section-css.mjs";
 
 const require = createRequire(import.meta.url);
@@ -11,6 +12,7 @@ export async function buildReactMeasurementCss(root, config, workspace) {
   const parts = [];
   await appendOptionalFile(parts, path.join(config.paths.themeDir, "fonts.css"), "theme/fonts.css");
   await appendOptionalFile(parts, path.join(config.paths.themeDir, "tokens.css"), "theme/tokens.css");
+  appendPageGeometryCss(parts, config.page);
   parts.push("/* === public/openpress/content.css === */\n");
   parts.push(await buildContentCss(root, config));
   parts.push("\n/* === public/openpress/components.css === */\n");
@@ -23,6 +25,25 @@ export async function buildReactMeasurementCss(root, config, workspace) {
   return rewriteAssetUrls(stripViewportMediaQueries(parts.join("\n")), config);
 }
 
+function appendPageGeometryCss(parts, page) {
+  const theme = pageGeometryToTheme(page);
+  if (!theme) return;
+
+  const declarations = [
+    ["--openpress-page-width", theme.pageWidth],
+    ["--openpress-page-height", theme.pageHeight],
+    ["--openpress-page-aspect-ratio", theme.pageAspectRatio],
+    ["--openpress-page-height-ratio", theme.pageHeightRatio],
+  ].filter(([, value]) => value);
+
+  parts.push("/* === openpress page geometry === */\n");
+  parts.push(":root {\n");
+  for (const [name, value] of declarations) {
+    parts.push(`  ${name}: ${value};\n`);
+  }
+  parts.push("}\n\n");
+}
+
 async function appendOptionalFile(parts, filePath, label) {
   try {
     const css = await fs.readFile(filePath, "utf8");