@open-press/cli 0.3.0 → 0.6.0

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

@@ -0,0 +1,107 @@
+import type { Manifest } from "@openpress/core";
+import { BaseBackCoverPage, BaseCoverPage, BaseTocPage } from "@openpress/core";
+
+export const config: Manifest = {
+  title: "Paper Title",
+  subtitle: "An academic-paper draft built with open-press",
+  organization: "Department · Institution",
+  sourceDir: "chapters",
+  mediaDir: "media",
+  themeDir: "theme",
+  designDoc: "design.md",
+  componentsDir: "components",
+  publicDir: "public/openpress",
+  outputDir: "dist-react",
+  pdf: {
+    filename: "paper.pdf",
+  },
+  deploy: {
+    adapter: "cloudflare-pages",
+    source: ".deploy/document",
+    projectName: null,
+    commitDirty: false,
+    requiresConfirmation: true,
+  },
+};
+
+/**
+ * The cover renders the academic title block: paper title, author grid,
+ * abstract band, and index terms. Replace the placeholders with your own.
+ */
+export const cover = (
+  <BaseCoverPage data-page-title="Title page" aria-labelledby="paper-title">
+    <div className="paper-cover">
+      <h1 id="paper-title" className="paper-title">
+        Conference Paper Title
+      </h1>
+      <p className="paper-subtitle">
+        Sub-title (optional). Not captured by indexing services like IEEE Xplore.
+      </p>
+
+      <ol className="paper-authors" aria-label="Authors">
+        <li className="paper-author">
+          <p className="paper-author-name">First Author Surname</p>
+          <p className="paper-author-affiliation">dept. of organization</p>
+          <p className="paper-author-affiliation">name of organization</p>
+          <p className="paper-author-location">City, Country</p>
+          <p className="paper-author-contact">email or ORCID</p>
+        </li>
+        <li className="paper-author">
+          <p className="paper-author-name">Second Author Surname</p>
+          <p className="paper-author-affiliation">dept. of organization</p>
+          <p className="paper-author-affiliation">name of organization</p>
+          <p className="paper-author-location">City, Country</p>
+          <p className="paper-author-contact">email or ORCID</p>
+        </li>
+        <li className="paper-author">
+          <p className="paper-author-name">Third Author Surname</p>
+          <p className="paper-author-affiliation">dept. of organization</p>
+          <p className="paper-author-affiliation">name of organization</p>
+          <p className="paper-author-location">City, Country</p>
+          <p className="paper-author-contact">email or ORCID</p>
+        </li>
+      </ol>
+
+      <section className="paper-abstract" aria-label="Abstract">
+        <p>
+          <span className="paper-abstract-label">Abstract</span>—This document
+          is a model and starting point for an academic paper drafted in
+          open-press. Replace this abstract with your own — keep it under
+          250 words. Do not use abbreviations, symbols, footnotes, or math
+          in the abstract.
+        </p>
+      </section>
+
+      <section className="paper-index-terms" aria-label="Index terms">
+        <p>
+          <span className="paper-abstract-label">Index Terms</span>—keyword
+          one, keyword two, keyword three, keyword four
+        </p>
+      </section>
+    </div>
+  </BaseCoverPage>
+);
+
+export const toc = (
+  <BaseTocPage data-page-title="Contents" id="toc">
+    <div className="page-frame">
+      <header className="page-header" aria-hidden="true"></header>
+      <main className="page-body">
+        <h2 id="toc-title" className="toc-heading">Contents</h2>
+      </main>
+    </div>
+  </BaseTocPage>
+);
+
+export const backCover = (
+  <BaseBackCoverPage data-page-title="Back cover">
+    <div className="paper-back-cover">
+      <p className="paper-back-kicker">open-press · academic-paper</p>
+      <p className="paper-back-statement">
+        Draft built with open-press. When the paper is ready for submission,
+        port the prose into the publisher's LaTeX class (IEEEtran, acmart,
+        etc.). open-press is the iteration loop, not the camera-ready output.
+      </p>
+    </div>
+  </BaseBackCoverPage>
+);

package/template/packs/academic-paper/document/openpress.config.mjs

@@ -0,0 +1,26 @@
+// academic-paper starter — replace with your paper's metadata.
+export default {
+  title: "Paper Title",
+  subtitle: "An academic-paper draft built with open-press",
+  organization: "Department · Institution",
+
+  sourceDir: "chapters",
+  mediaDir: "media",
+  themeDir: "theme",
+  designDoc: "design.md",
+  componentsDir: "components",
+  publicDir: "public/openpress",
+  outputDir: "dist-react",
+
+  pdf: {
+    filename: "paper.pdf",
+  },
+
+  deploy: {
+    adapter: "cloudflare-pages",
+    source: ".deploy/document",
+    projectName: null,
+    commitDirty: false,
+    requiresConfirmation: true,
+  },
+};

package/template/packs/academic-paper/document/theme/page-surfaces/cover.css

@@ -0,0 +1,267 @@
+/* page-surfaces / cover
+ * Cover and back-cover share most of their layout chrome (meta header, byline
+ * footer, central main column). Shared selectors live here so cover is the
+ * primary reference; back-cover.css only refines the parts that differ.
+ */
+
+.reader-page--cover,
+.reader-page--back-cover {
+  background: var(--openpress-color-document);
+  padding: clamp(28px, 5cqw, 48px) clamp(24px, 4.5cqw, 42px);
+  flex-direction: column;
+  justify-content: space-between;
+  gap: clamp(16px, 2.5cqw, 24px);
+}
+
+.reader-app.is-ready .reader-page--cover,
+.reader-app.is-ready .reader-page--back-cover,
+.reader-page--cover.is-active,
+.reader-page--back-cover.is-active {
+  display: flex;
+}
+
+.cover-meta,
+.back-cover-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--openpress-space-3);
+  padding-bottom: var(--openpress-space-2);
+  border-bottom: 1px solid var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(8pt, 1.25cqw, 9.5pt);
+  color: var(--openpress-color-muted);
+  letter-spacing: 0.12em;
+  flex-shrink: 0;
+}
+
+.mihua-logo,
+.openpress-logo {
+  display: block;
+  width: clamp(112px, 18cqw, 154px);
+  height: auto;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.cover-meta-title {
+  margin-left: auto;
+  max-width: 48%;
+  padding-top: 0.35em;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.cover-main,
+.back-cover-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.cover-title {
+  margin: 0;
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(36px, 8.5cqw, 64px);
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: var(--openpress-color-ink);
+}
+
+.cover-tagline {
+  margin: var(--openpress-space-2) 0 0;
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(14px, 2.4cqw, 20px);
+  font-weight: 300;
+  letter-spacing: 0.08em;
+  color: var(--openpress-color-muted);
+}
+
+.cover-rule,
+.back-cover-rule {
+  height: 1px;
+  width: 40px;
+  background: var(--openpress-color-ink);
+  margin: var(--openpress-space-3) 0;
+}
+
+.cover-subtitle {
+  margin: 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(10.5pt, 1.85cqw, 12.5pt);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  line-height: 1.55;
+  color: var(--openpress-color-ink);
+}
+
+.cover-summary {
+  margin: var(--openpress-space-2) 0 0;
+  font-family: var(--openpress-font-body);
+  font-size: clamp(9pt, 1.65cqw, 10pt);
+  line-height: 1.8;
+  color: var(--openpress-color-muted);
+  max-width: 90%;
+}
+
+.cover-visual,
+.back-cover-visual {
+  margin: var(--openpress-space-3) 0 0;
+  flex-shrink: 0;
+}
+
+.cover-visual img,
+.back-cover-visual img {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 22cqh;
+  object-fit: cover;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.cover-byline,
+.back-cover-byline {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-top: var(--openpress-space-2);
+  border-top: 1px solid var(--openpress-color-ink);
+  font-family: var(--openpress-font-body);
+  font-size: clamp(8pt, 1.25cqw, 9.5pt);
+  color: var(--openpress-color-muted);
+  letter-spacing: 0.12em;
+  flex-shrink: 0;
+}
+
+.cover-byline span:first-child,
+.back-cover-byline span:first-child {
+  font-family: var(--openpress-font-serif);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--openpress-color-ink);
+}
+
+/* ─ academic-paper title block ──────────────────────────────────────────── */
+/* IEEE-style title page: large serif title, optional subtitle, 3-column     */
+/* author grid, abstract band, index terms band. Single-column body picks   */
+/* up after this surface. Two-column body arrives with the v0.8 paged.js    */
+/* migration.                                                                */
+
+.paper-cover {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(18px, 2.4cqw, 32px);
+  padding-block: clamp(24px, 3cqw, 40px) 0;
+  font-family: var(--openpress-font-serif);
+  color: var(--openpress-color-ink);
+}
+
+.paper-title {
+  font-family: var(--openpress-font-serif);
+  font-size: clamp(28px, 4.4cqw, 36px);
+  line-height: 1.2;
+  font-weight: 400;
+  text-align: center;
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.paper-subtitle {
+  font-size: clamp(11px, 1.4cqw, 12px);
+  font-style: italic;
+  text-align: center;
+  color: var(--openpress-color-muted);
+  margin: 0;
+}
+
+.paper-authors {
+  list-style: none;
+  padding: 0;
+  margin: clamp(8px, 1.6cqw, 16px) 0 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: clamp(10px, 1.4cqw, 16px) clamp(8px, 1.2cqw, 14px);
+}
+
+.paper-author {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-size: clamp(10.5px, 1.3cqw, 11.5px);
+  line-height: 1.35;
+  gap: 0;
+}
+
+.paper-author-name {
+  font-weight: 500;
+  margin: 0 0 0.25em 0;
+}
+
+.paper-author-affiliation {
+  font-style: italic;
+  margin: 0;
+  color: var(--openpress-color-ink);
+}
+
+.paper-author-location,
+.paper-author-contact {
+  margin: 0;
+  color: var(--openpress-color-ink);
+}
+
+.paper-abstract,
+.paper-index-terms {
+  margin-top: clamp(8px, 1.6cqw, 14px);
+  font-size: clamp(10.5px, 1.3cqw, 11.5px);
+  line-height: 1.45;
+}
+
+.paper-abstract p,
+.paper-index-terms p {
+  margin: 0;
+  text-indent: 1.2em;
+  font-style: italic;
+}
+
+.paper-abstract-label {
+  font-style: normal;
+  font-weight: 700;
+}
+
+/* Single-column flush body (v0.6). The v0.8 paged.js migration replaces */
+/* this declaration with `column-count: 2; column-gap: 1rem;` and adds    */
+/* `column-span: all` for the title block + abstract above.               */
+.reader-page--content .page-body {
+  max-width: none;
+}
+
+/* ─ academic-paper back cover ───────────────────────────────────────────── */
+
+.paper-back-cover {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(10px, 1.6cqw, 16px);
+  font-family: var(--openpress-font-serif);
+  padding-inline: clamp(24px, 4cqw, 56px);
+}
+
+.paper-back-kicker {
+  font-family: var(--openpress-font-mono, monospace);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--openpress-color-muted);
+  margin: 0;
+}
+
+.paper-back-statement {
+  font-size: clamp(13px, 1.6cqw, 15px);
+  line-height: 1.5;
+  margin: 0;
+}

package/template/{skills/editorial-monograph/starter → packs/editorial-monograph}/document/chapters/03-agent-skills-contributors/content/01-agent-skills-contributors.mdx

@@ -10,7 +10,7 @@
 | 從既有資料建立文件 | 請參考這一份文件（自行上傳），使用 `openpress-writing skill` 協助整理成 8 頁產品提案。保留既有事實，不要新增未確認的數字。 |
 | 以風格起手建立新文件 | 請以 `editorial-monograph skill` 作為風格，使用 `openpress-writing skill` 建立一份研究報告。讀者是管理層，缺少的事實請標成 placeholder。 |
 | 開啟本機審稿 | 請使用 `openpress skill` 打開本機 workbench，讓我檢查 Document、Design System 與 Project 狀態。 |
-| 規劃長篇文件層級 | 請使用 `openpress-document-hierarchy skill` 規劃 H2/H3/H4、目錄深度與附錄位置。 |
+| 規劃長篇文件層級 | 請使用 `openpress-writing skill` 規劃 H2/H3/H4、目錄深度與附錄位置（已併入 writing skill 的 Hierarchy section）。 |
 | 重寫章節 | 請使用 `openpress-writing skill` 重整章節，讓第一章先講問題、第二章講方案，語氣維持正式研究報告。 |
 | 調整版面 | 請使用 `openpress-design skill` 調整 theme 與 components，讓文件維持 A4 長文閱讀節奏。 |
 | 中文潤飾 | 請使用 `chinese-ai-writing-polish skill` 潤飾中文，保留原意，不要改成廣告文案。 |
@@ -26,8 +26,7 @@ open-press 使用 skill 讓 Agent 在不同層次工作。`openpress` 是 Core /
 | --- | --- | --- |
 | `openpress` | CLI、workspace inspect/search/replace、本機 workbench、驗證與輸出邊界 | Agent 不確定該用哪個 open-press 工具、要開本機審稿、或要選 specialist skill |
 | `openpress-deploy` | 部署設定、preflight、dry run、公開發布確認 | 準備上線或接前端部署按鈕 |
-| `openpress-document-hierarchy` | H1/H2/H3/H4、TOC 深度、reader outline、附錄位置 | 長篇文件或多章節文件需要重整骨架 |
-| `openpress-writing` | 章節順序、敘事結構、表格與 caption 文案 | 建立、重寫或重整內容 |
+| `openpress-writing` | 章節順序、敘事結構、表格與 caption 文案、**H1/H2/H3/H4 結構、TOC 深度、附錄位置** | 建立、重寫或重整內容；長文骨架調整 |
 | `openpress-design` | theme、版面、page rhythm、components | 調整視覺系統與輸出穩定性 |
 | `openpress-style-pack-contributor` | style pack 設計、starter 契約、貢獻驗證 | 新增或改良 `skills/<pack>/starter/` |
 | `editorial-monograph` | A4 嚴肅長文風格 | 報告、提案、白皮書、產品說明 |

package/template/packs/editorial-monograph/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/editorial-monograph/document/components/Page.tsx

@@ -0,0 +1,27 @@
+import type { PageProps } from "@openpress/core";
+
+export default function Page({
+  pageIndex,
+  totalPages,
+  chapterSlug,
+  chapterTone,
+  children,
+}: PageProps) {
+  return (
+    <section
+      className="reader-page reader-page--content"
+      data-page-kind="content"
+      data-page-footer="true"
+      data-page-index={pageIndex}
+      data-total-pages={totalPages}
+      data-chapter-slug={chapterSlug}
+      data-chapter-tone={chapterTone}
+    >
+      <div className="page-frame">
+        <header className="page-header" aria-hidden="true" />
+        <main className="page-body">{children}</main>
+        <footer className="page-footer" aria-hidden="true" />
+      </div>
+    </section>
+  );
+}

package/template/packs/editorial-monograph/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/editorial-monograph/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/editorial-monograph/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>
+  );
+}