@open-press/cli 0.5.0 → 0.7.0

package/template/core/src/openpress/workbench.tsx

@@ -33,18 +33,14 @@ import {
   ProjectEntryPanel,
   type ProjectMentionItem,
 } from "./projectWorkspace";
-import { paginateSourcePages, type PaginatedPage } from "./pagination";
+import { createAnchorPageMap, resolveAnchorPageIndex } from "./anchorMap";
 import { scheduleBrowserFrame } from "./frameScheduler";
 import {
-  createAnchorPageMap,
-  numberSourceHeadings,
   PUBLIC_DRAWER_BREAKPOINT,
   PublicPage,
-  resolveAnchorPageIndex,
   useViewMode,
 } from "./publicPage";
 import { getProjectIdentity } from "./projectIdentity";
-import { hasBuildTimePagination } from "./reactDocumentMetadata";
 import { buildPublicPreviewHref, isLocalWorkspaceHost } from "./runtimeMode";
 import { useReaderRuntime } from "./readerRuntime";
 import type { DeploymentInfo, ReaderDocument, HtmlPageBlock, SourceBlock } from "./types";
@@ -123,14 +119,9 @@ export function HtmlWorkbench({
   deploymentInfo: DeploymentInfo;
 }) {
   const sourceContainerRef = useRef<HTMLDivElement | null>(null);
-  const numberedPages = useMemo(() => numberSourceHeadings(pages), [pages]);
+  const displayPages = pages;
   const viewModeState = useViewMode();
   const { viewMode } = viewModeState;
-  const buildTimePaginated = hasBuildTimePagination(document);
-  const [paginatedPages, setPaginatedPages] = useState<PaginatedPage[] | null>(null);
-  const displayPages: DisplayPage[] = viewMode === "paged" && !buildTimePaginated
-    ? (paginatedPages ?? numberedPages)
-    : numberedPages;
   const mediaAssets = useMemo(() => collectMediaAssetIndex(displayPages), [displayPages]);
   const anchorPageMap = useMemo(() => createAnchorPageMap(displayPages), [displayPages]);
   const projectComponentUsages = useMemo(() => createProjectComponentUsages(displayPages), [displayPages]);
@@ -163,7 +154,6 @@ export function HtmlWorkbench({
   const pdfButtonText = workbenchPdfButtonText(localDeployEnabled, pdfActionStatus, staticPdfHref);
   const pdfStatusMessage = workbenchPdfStatusMessage(localDeployEnabled, pdfActionStatus);
   const pdfButtonDisabled = localDeployEnabled ? pdfActionStatus === "generating" || pdfActionStatus === "opening" : !staticPdfHref;
-  const activePaginatedReady = viewMode === "reading" || buildTimePaginated || Boolean(paginatedPages);
   const inspectorSelectionLabel = formatInspectorSelection(inspector.selectedBlock);
   const activeInlineSavedComment = getInlineSavedCommentForTarget(inlineSavedComment, inspector.selectedTarget);
   const inspectorCommentDisabled = !inspector.selectedBlock || !inspectorCommentText.trim() || inspectorCommentStatus === "submitting";
@@ -392,10 +382,6 @@ export function HtmlWorkbench({
     scheduleBrowserFrame(() => reader.setPage(reader.currentPageIndex, { behavior: "auto" }));
   };
 
-  useLayoutEffect(() => {
-    setPaginatedPages(null);
-  }, [numberedPages]);
-
   useEffect(() => {
     setInspectorCommentStatus("idle");
     setInspectorCommentError("");
@@ -407,24 +393,6 @@ export function HtmlWorkbench({
     void refreshPendingComments();
   }, [devMode, refreshPendingComments, workspaceView]);
 
-  useLayoutEffect(() => {
-    if (buildTimePaginated) return undefined;
-    if (viewMode !== "paged" || paginatedPages) return undefined;
-    const sourceContainer = sourceContainerRef.current;
-    if (!sourceContainer) return undefined;
-
-    let cancelled = false;
-    const cancelFrame = scheduleBrowserFrame(() => {
-      const nextPages = paginateSourcePages(sourceContainer, numberedPages);
-      if (!cancelled) setPaginatedPages(nextPages);
-    });
-
-    return () => {
-      cancelled = true;
-      cancelFrame();
-    };
-  }, [buildTimePaginated, numberedPages, paginatedPages, viewMode]);
-
   const actionSection = (
     <section className="openpress-public-action-section" aria-label="輸出">
       <span className="openpress-public-action-heading">輸出</span>
@@ -512,7 +480,6 @@ export function HtmlWorkbench({
         className={`reader-app openpress-reader-app openpress-public-viewer openpress-dev-public-viewer is-ready${reader.rightPanelOpen ? "" : " is-closed-right"}`}
         data-openpress-react-runtime="true"
         data-openpress-view-mode={viewMode}
-        data-openpress-pagination={activePaginatedReady ? "ready" : "pending"}
         data-openpress-inspector-mode={inspector.inspectorMode ? "on" : "off"}
         data-active-workspace={workspaceView}
       >
@@ -533,7 +500,6 @@ export function HtmlWorkbench({
               pages={displayPages}
               currentPageIndex={reader.currentPageIndex}
               devMode={devMode}
-              paginatedReady={activePaginatedReady}
               sourceContainerRef={sourceContainerRef}
               registerPage={reader.registerPage}
               exposeSourceData={devMode}

package/template/core/src/styles/openpress/responsive.css

@@ -269,12 +269,6 @@
     box-shadow: none;
   }
 
-  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-navigation {
-    transform: translateX(-110%);
-    pointer-events: none;
-    box-shadow: none;
-  }
-
   .openpress-public-viewer.openpress-reader-app .openpress-public-scrim {
     position: fixed;
     inset: 0;
@@ -309,14 +303,6 @@
     display: block;
   }
 
-  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-scrim {
-    display: none;
-  }
-
-  .openpress-public-viewer.openpress-reader-app[data-openpress-pagination="pending"] .openpress-public-fab {
-    display: flex;
-  }
-
   .openpress-public-viewer[data-openpress-view-mode="paged"] .reader-pages {
     --openpress-public-page-width: min(
       var(--openpress-page-width),

package/template/core/tsconfig.json

@@ -17,7 +17,10 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "@openpress/core": ["./src/openpress/core/index.tsx"],
+      "@open-press/core": ["./src/openpress/core/index.tsx"],
+      "@open-press/core/mdx": ["./src/openpress/mdx/index.ts"],
+      "@open-press/core/manuscript": ["./src/openpress/manuscript/index.tsx"],
+      "@open-press/core/numbering": ["./src/openpress/numbering/index.ts"],
       "@/components": ["./document/components/index.ts", "./document/components/index.tsx"],
       "@/components/*": ["./document/components/*"],
       "@/*": ["./src/*"]

package/template/core/vite.config.ts

@@ -5,7 +5,7 @@ import path from "node:path";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import { loadConfig, publicPdfHref } from "./engine/config.mjs";
+import { loadConfig, publicPdfHref } from "./engine/runtime/config.mjs";
 import { handleCommentRequest } from "./engine/react/comment-endpoint.mjs";
 import { handleProjectAssetRequest } from "./engine/react/project-asset-endpoint.mjs";
 
@@ -15,8 +15,11 @@ const workspaceRoot = process.env.OPENPRESS_WORKSPACE_ROOT
   : frameworkRoot;
 const sourceRoot = path.join(frameworkRoot, "src");
 const openpressCliPath = path.join(frameworkRoot, "engine", "cli.mjs");
-const staticServerPath = path.join(frameworkRoot, "engine", "static-server.mjs");
+const staticServerPath = path.join(frameworkRoot, "engine", "output", "static-server.mjs");
 const openpressCoreEntry = path.join(frameworkRoot, "src", "openpress", "core", "index.tsx");
+const openpressMdxEntry = path.join(frameworkRoot, "src", "openpress", "mdx", "index.ts");
+const openpressManuscriptEntry = path.join(frameworkRoot, "src", "openpress", "manuscript", "index.tsx");
+const openpressNumberingEntry = path.join(frameworkRoot, "src", "openpress", "numbering", "index.ts");
 const openpressConfig = await loadConfig(workspaceRoot);
 const outputDir = openpressConfig.paths.outputDir;
 const reactDocumentRoot = openpressConfig.paths.documentRoot;
@@ -55,7 +58,11 @@ export default defineConfig({
   resolve: {
     dedupe: ["react", "react-dom", "@mdx-js/react"],
     alias: {
-      "@openpress/core": openpressCoreEntry,
+      // Subpaths must come before the base path so resolution matches longest first.
+      "@open-press/core/mdx": openpressMdxEntry,
+      "@open-press/core/manuscript": openpressManuscriptEntry,
+      "@open-press/core/numbering": openpressNumberingEntry,
+      "@open-press/core": openpressCoreEntry,
       "@/components": reactDocumentComponentsRoot,
       "@": sourceRoot,
       ...workspaceAliases,

package/template/packs/academic-paper/document/chapters/01-introduction/content/01-introduction.mdx

@@ -0,0 +1,21 @@
+## Introduction
+
+This document is a model and starting point for an academic paper drafted in open-press. The structure follows the IEEE conference template conventions where they make sense for screen-first reading: numbered sections, italic sub-sections, an abstract block, and a numbered references list. The two-column body of IEEEtran is not yet supported — single-column will land as the v0.8 paged.js migration arrives.
+
+Use this pack for **drafting, iteration, and preprint distribution**. When the paper is ready for venue submission, export the prose into the publisher's required LaTeX class (`IEEEtran`, `acmart`, etc.). The pack does not replace LaTeX for camera-ready submission; it replaces the awkward iteration loop *before* submission.
+
+### Where to start
+
+Each chapter directory under `document/chapters/` is one paper section:
+
+- `01-introduction/` — motivate the work, state the contribution, summarise the structure.
+- `02-methods/` — describe what you did, with enough detail to reproduce.
+- `03-results-and-discussion/` — present results with figures and tables; interpret what they mean.
+- `04-acknowledgment/` — acknowledge funding, collaborators, reviewers.
+- `05-references/` — numbered `[1]`, `[2]` references.
+
+Replace each chapter's MDX content with your own. The skeleton text below each `##` heading is illustrative — overwrite it.
+
+### Abstract and Index Terms
+
+Edit the abstract and index terms inside `document/index.tsx` (the `cover` JSX export). They render on the title page above the body. Keep the abstract under 250 words and avoid abbreviations, symbols, or math in it.

package/template/packs/academic-paper/document/chapters/02-methods/content/01-methods.mdx

@@ -0,0 +1,30 @@
+## Methods
+
+Describe the materials, instruments, datasets, models, or procedures you used. Anyone familiar with the field should be able to reproduce your work from this section.
+
+### Apparatus and Materials
+
+Specify hardware, software versions, datasets, and any pre-processing. Cite reused work using `[N]` numeric references (e.g. "we trained the encoder following the procedure of [3]").
+
+### Procedure
+
+Describe the experimental procedure as steps a reader could follow:
+
+1. State the input data and pre-processing.
+2. State the model / algorithm / instrument settings.
+3. State the evaluation metric(s) and any held-out splits.
+4. State randomness control (seeds, repeats, confidence reporting).
+
+### Notation
+
+Define notation early. Italicise Roman symbols for quantities and variables, but not Greek symbols. Use a long dash rather than a hyphen for a minus sign. Number equations consecutively:
+
+$$a + b = \gamma \tag{1}$$
+
+Refer to equations by `(1)`, not `Eq. (1)` or `equation (1)`, except at the start of a sentence: "Equation (1) shows ...".
+
+### Reporting Units
+
+- Use SI (MKS) as primary units; English units only as secondary (in parentheses).
+- Don't mix complete spellings and abbreviations: "Wb/m²" or "webers per square meter", not "webers/m²".
+- Use a zero before decimal points: `0.25`, not `.25`.

package/template/packs/academic-paper/document/chapters/03-results-and-discussion/content/01-results.mdx

@@ -0,0 +1,29 @@
+## Results and Discussion
+
+Present the findings of your study, then interpret what they mean for the research question stated in the introduction.
+
+### Quantitative Results
+
+Use a table to summarise results across conditions. Caption above the table.
+
+<TableCaption>Sample comparison of conditions.</TableCaption>
+
+| Condition | Metric A | Metric B | Notes |
+| --- | --- | --- | --- |
+| Baseline | 0.71 | 0.65 | Prior work [3] |
+| Ours (v1) | 0.78 | 0.69 | This work |
+| Ours (v2) | **0.83** | **0.72** | Best |
+
+Cite figures and tables in the text the first time they appear: "Fig. 1 shows the architecture", "Table I summarises the conditions". Use `Fig.` even at the start of a sentence; spell out `Figure` only when it is the subject.
+
+### Qualitative Discussion
+
+Discuss what the results mean. State the limitations honestly — if the experiment doesn't cover a case you'd like to claim, say so. Avoid the word "essentially" when you mean "approximately" or "effectively".
+
+### Threats to Validity
+
+Briefly list what could invalidate the results: small sample size, single dataset, environmental drift, evaluator bias, etc. Reviewers will look for this section; pre-empt it.
+
+### Future Work
+
+Indicate where the work goes next. Keep this to one short paragraph — over-claiming future scope hurts more than it helps in review.

package/template/packs/academic-paper/document/chapters/04-acknowledgment/content/01-acknowledgment.mdx

@@ -0,0 +1,12 @@
+## Acknowledgment
+
+The preferred American spelling is *acknowledgment* without an "e" after the "g". Avoid stilted constructions like "one of us (R. B. G.) thanks ...". Prefer "R. B. G. thanks ...".
+
+Acknowledge:
+
+- Funding sources (with grant numbers if applicable).
+- Collaborators who contributed materially but are not listed as authors.
+- Anonymous reviewers whose comments improved the paper.
+- Institutional or computational resources.
+
+Place sponsor acknowledgments in the unnumbered footnote on the first page of the published version. In this draft pack, keep them here until you migrate to a publisher's class file at submission time.

package/template/packs/academic-paper/document/chapters/05-references/content/01-references.mdx

@@ -0,0 +1,27 @@
+## References
+
+Number citations consecutively within square brackets `[1]`. Sentence punctuation follows the bracket. Refer simply to the reference number, as in `[3]` — do not use `Ref. [3]` or `reference [3]` except at the start of a sentence: "Reference [3] was the first ...".
+
+Unless there are six authors or more, give all authors' names; do not use `et al.`. Papers not yet published should be cited as *unpublished*; accepted but not yet published as *in press*. Capitalize only the first word in a paper title, except for proper nouns and element symbols.
+
+For papers published in translation journals, give the English citation first, followed by the original foreign-language citation.
+
+---
+
+[1] G. Eason, B. Noble, and I. N. Sneddon, "On certain integrals of Lipschitz–Hankel type involving products of Bessel functions," *Phil. Trans. Roy. Soc. London*, vol. A247, pp. 529–551, April 1955.
+
+[2] J. Clerk Maxwell, *A Treatise on Electricity and Magnetism*, 3rd ed., vol. 2. Oxford: Clarendon, 1892, pp. 68–73.
+
+[3] I. S. Jacobs and C. P. Bean, "Fine particles, thin films and exchange anisotropy," in *Magnetism*, vol. III, G. T. Rado and H. Suhl, Eds. New York: Academic, 1963, pp. 271–350.
+
+[4] K. Elissa, "Title of paper if known," unpublished.
+
+[5] R. Nicole, "Title of paper with only first word capitalized," *J. Name Stand. Abbrev.*, in press.
+
+[6] Y. Yorozu, M. Hirano, K. Oka, and Y. Tagawa, "Electron spectroscopy studies on magneto-optical media and plastic substrate interface," *IEEE Transl. J. Magn. Japan*, vol. 2, pp. 740–741, August 1987.
+
+[7] M. Young, *The Technical Writer's Handbook*. Mill Valley, CA: University Science, 1989.
+
+---
+
+> **Reminder**: replace the seven placeholder references above with your own bibliography before circulating the draft. They are the IEEE conference template's example citations and have nothing to do with your paper.

package/template/packs/academic-paper/document/components/ChapterOpenerVisual/index.tsx

@@ -0,0 +1,76 @@
+const TONES = new Set(["sage", "lavender", "mint", "amber"]);
+
+const VISUALS = {
+  "linked-list": `<svg viewBox="0 0 520 330" focusable="false" aria-hidden="true">
+      <rect class="chapter-opener-illustration__paper" x="42" y="96" width="116" height="82" rx="4" />
+      <rect class="chapter-opener-illustration__paper" x="204" y="96" width="116" height="82" rx="4" />
+      <rect class="chapter-opener-illustration__paper" x="366" y="96" width="116" height="82" rx="4" />
+      <path class="chapter-opener-illustration__stroke" d="M158 137 H204" />
+      <path class="chapter-opener-illustration__stroke" d="M320 137 H366" />
+      <path class="chapter-opener-illustration__arrow" d="M190 122 206 137 190 152" />
+      <path class="chapter-opener-illustration__arrow" d="M352 122 368 137 352 152" />
+      <path class="chapter-opener-illustration__thin" d="M72 128 H118 M72 150 H128 M234 128 H280 M234 150 H286 M396 128 H442 M396 150 H452" />
+      <circle class="chapter-opener-illustration__node" cx="144" cy="137" r="13" />
+      <circle class="chapter-opener-illustration__node" cx="306" cy="137" r="13" />
+      <circle class="chapter-opener-illustration__node" cx="468" cy="137" r="13" />
+      <path class="chapter-opener-illustration__stroke" d="M262 178 C262 222 220 244 158 244 C98 244 68 222 68 190" />
+      <path class="chapter-opener-illustration__arrow" d="M52 204 68 188 84 204" />
+    </svg>`,
+  tree: `<svg viewBox="0 0 520 330" focusable="false" aria-hidden="true">
+      <path class="chapter-opener-illustration__paper" d="M232 40 316 40 352 86 330 132 218 132 194 86Z" />
+      <path class="chapter-opener-illustration__paper" d="M88 198 170 178 228 218 204 288 100 288 58 240Z" />
+      <path class="chapter-opener-illustration__paper" d="M314 198 400 176 466 224 450 292 328 292 282 238Z" />
+      <path class="chapter-opener-illustration__stroke" d="M262 118 160 214 M270 118 374 214" />
+      <path class="chapter-opener-illustration__stroke" d="M160 214 122 258 M160 214 204 258 M374 214 330 258 M374 214 420 258" />
+      <circle class="chapter-opener-illustration__node" cx="266" cy="100" r="24" />
+      <circle class="chapter-opener-illustration__node" cx="160" cy="214" r="22" />
+      <circle class="chapter-opener-illustration__node" cx="374" cy="214" r="22" />
+      <circle class="chapter-opener-illustration__dot" cx="122" cy="258" r="13" />
+      <circle class="chapter-opener-illustration__dot" cx="204" cy="258" r="13" />
+      <circle class="chapter-opener-illustration__dot" cx="330" cy="258" r="13" />
+      <circle class="chapter-opener-illustration__dot" cx="420" cy="258" r="13" />
+    </svg>`,
+  code: `<svg viewBox="0 0 520 330" focusable="false" aria-hidden="true">
+      <path class="chapter-opener-illustration__paper" d="M92 52 338 52 386 104 386 286 92 286Z" />
+      <path class="chapter-opener-illustration__paper" d="M348 82 438 82 476 122 452 226 356 226 326 154Z" />
+      <path class="chapter-opener-illustration__thin" d="M132 112 H250 M132 146 H292 M132 180 H238 M132 214 H276" />
+      <path class="chapter-opener-illustration__stroke" d="M308 114 C340 122 356 148 356 180 C356 220 332 244 292 250" />
+      <path class="chapter-opener-illustration__arrow" d="M304 226 288 250 316 260" />
+      <path class="chapter-opener-illustration__stroke" d="M406 124 V202" />
+      <circle class="chapter-opener-illustration__node" cx="406" cy="124" r="17" />
+      <circle class="chapter-opener-illustration__node" cx="406" cy="202" r="17" />
+    </svg>`,
+  answers: `<svg viewBox="0 0 520 330" focusable="false" aria-hidden="true">
+      <path class="chapter-opener-illustration__paper" d="M128 44 396 44 440 90 418 292 104 292 82 86Z" />
+      <path class="chapter-opener-illustration__thin" d="M178 116 H350 M178 168 H350 M178 220 H322" />
+      <path class="chapter-opener-illustration__stroke" d="M128 112 148 134 190 88" />
+      <path class="chapter-opener-illustration__stroke" d="M128 164 148 186 190 140" />
+      <path class="chapter-opener-illustration__stroke" d="M128 216 148 238 190 192" />
+      <circle class="chapter-opener-illustration__node" cx="386" cy="92" r="18" />
+      <path class="chapter-opener-illustration__stroke" d="M386 92 C420 126 424 172 394 208" />
+      <path class="chapter-opener-illustration__arrow" d="M380 186 394 210 420 200" />
+    </svg>`,
+};
+
+export type ChapterOpenerVisualVariant = keyof typeof VISUALS;
+
+export interface ChapterOpenerVisualProps {
+  variant?: ChapterOpenerVisualVariant;
+  tone?: string;
+}
+
+export default function ChapterOpenerVisual({
+  variant = "linked-list",
+  tone = "sage",
+}: ChapterOpenerVisualProps) {
+  const visual = VISUALS[variant] ?? VISUALS["linked-list"];
+  const safeTone = TONES.has(tone) ? tone : "sage";
+
+  return (
+    <figure
+      className={`chapter-opener-illustration chapter-opener-illustration--${variant} chapter-opener-tone--${safeTone}`}
+      aria-hidden="true"
+      dangerouslySetInnerHTML={{ __html: visual }}
+    />
+  );
+}

package/template/packs/academic-paper/document/components/Page.tsx

@@ -0,0 +1,37 @@
+import { Frame, MdxArea } from "@open-press/core";
+import type { SectionsPageProps } from "@open-press/core/manuscript";
+
+export default function Page({
+  frameKey,
+  chainId,
+  pageIndex,
+  totalPages,
+  sectionSlug,
+  sectionTitle,
+  sectionTone,
+}: SectionsPageProps) {
+  return (
+    <Frame
+      frameKey={frameKey}
+      role="manuscript.content"
+      className="reader-page--content"
+      data-page-index={pageIndex}
+      data-total-pages={totalPages}
+      data-section-id={sectionSlug}
+      data-chapter-tone={sectionTone}
+    >
+      <div className="page-frame">
+        <header className="page-header" aria-hidden="true" />
+        <main className="page-body">
+          <MdxArea chainId={chainId} />
+        </main>
+        <footer className="page-footer" aria-hidden="true">
+          <span className="footer-left">{sectionTitle}</span>
+          <span className="footer-right">
+            {totalPages > 1 ? `${pageIndex + 1}/${totalPages}` : pageIndex + 1}
+          </span>
+        </footer>
+      </div>
+    </Frame>
+  );
+}

package/template/packs/academic-paper/document/components/TokenSwatchGrid/index.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties } from "react";
+
+export interface TokenSwatch {
+  name: string;
+  hex: string;
+  summary: string;
+  swatchVar: string;
+  swatchBorderVar?: string;
+  dark?: boolean;
+}
+
+export interface TokenSwatchGridProps {
+  ariaLabel?: string;
+  swatches: TokenSwatch[];
+}
+
+export default function TokenSwatchGrid({
+  ariaLabel = "Color specimen",
+  swatches,
+}: TokenSwatchGridProps) {
+  return (
+    <section className="token-swatch-grid" data-openpress-component="TokenSwatchGrid" aria-label={ariaLabel}>
+      {swatches.map((swatch) => (
+        <article
+          key={swatch.name}
+          className={swatch.dark ? "token-swatch token-swatch--dark" : "token-swatch"}
+          style={swatchStyle(swatch)}
+        >
+          <div className="token-swatch__sample" />
+          <div className="token-swatch__body">
+            <h4>{swatch.name}</h4>
+            <code>{swatch.hex}</code>
+            <p>{swatch.summary}</p>
+          </div>
+        </article>
+      ))}
+    </section>
+  );
+}
+
+function swatchStyle(swatch: TokenSwatch): CSSProperties {
+  return {
+    "--swatch": swatch.swatchVar,
+    ...(swatch.swatchBorderVar ? { "--swatch-border": swatch.swatchBorderVar } : {}),
+  } as CSSProperties;
+}

package/template/packs/academic-paper/document/components/TokenSwatchGrid/style.css

@@ -0,0 +1,63 @@
+/* token-swatch-grid
+ * Color specimen grid referenced by design.md to display each color token with
+ * its sample, hex, and usage note.
+ */
+
+.token-swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 3mm;
+  margin: var(--openpress-space-3) 0 var(--openpress-space-4);
+  break-inside: avoid;
+}
+
+.token-swatch {
+  min-height: 42mm;
+  overflow: hidden;
+  border: 1px solid var(--openpress-color-line);
+  border-radius: 6px;
+  background: var(--openpress-color-document);
+  box-sizing: border-box;
+  break-inside: avoid;
+}
+
+.token-swatch__sample {
+  height: 17mm;
+  background: var(--swatch);
+  border-bottom: 1px solid var(--swatch-border, var(--openpress-color-line));
+}
+
+.token-swatch__body {
+  padding: 3mm;
+}
+
+.token-swatch h4 {
+  margin: 0;
+  color: var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: 9pt;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.token-swatch code {
+  display: block;
+  margin-top: 1mm;
+  color: var(--openpress-color-muted);
+  font-size: 8pt;
+  line-height: 1.35;
+}
+
+.token-swatch p {
+  margin: 2mm 0 0;
+  color: #333333;
+  font-size: 8.4pt;
+  line-height: 1.45;
+}
+
+@media (max-width: 899px) {
+  .token-swatch-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/template/packs/academic-paper/document/components/TypeSpecimen/index.tsx

@@ -0,0 +1,38 @@
+export type TypeSpecimenVariant =
+  | "metric"
+  | "cover-title"
+  | "chapter-title"
+  | "section-title"
+  | "body"
+  | "caption";
+
+export interface TypeSpecimenRow {
+  name: string;
+  spec: string;
+  sample: string;
+  sampleVariant: TypeSpecimenVariant;
+}
+
+export interface TypeSpecimenProps {
+  ariaLabel?: string;
+  rows: TypeSpecimenRow[];
+}
+
+export default function TypeSpecimen({
+  ariaLabel = "Typography specimen",
+  rows,
+}: TypeSpecimenProps) {
+  return (
+    <section className="type-specimen" data-openpress-component="TypeSpecimen" aria-label={ariaLabel}>
+      {rows.map((row) => (
+        <div className="type-specimen__row" key={row.name}>
+          <div className="type-specimen__meta">
+            <strong>{row.name}</strong>
+            <span>{row.spec}</span>
+          </div>
+          <p className={`type-specimen__sample type-specimen__sample--${row.sampleVariant}`}>{row.sample}</p>
+        </div>
+      ))}
+    </section>
+  );
+}