@open-press/core 1.2.1 → 1.3.2

package/engine/runtime/source-text-tools.mjs

@@ -451,10 +451,13 @@ function applySourceBlockTableCellEditToText(documentText, {
 export async function collectSourceTextFiles(config, { scope = "content" } = {}) {
   const roots = await sourceRoots(config, scope);
   const files = [];
+  const seen = new Set();
   for (const rootInfo of roots) {
     const visit = async (absolutePath) => {
+      if (seen.has(absolutePath)) return;
       const extension = path.extname(absolutePath);
       if (!rootInfo.extensions.has(extension)) return;
+      seen.add(absolutePath);
       const relativePath = path.relative(config.root, absolutePath).replaceAll("\\", "/");
       files.push({
         scope: rootInfo.scope,
@@ -557,18 +560,30 @@ async function sourceRoots(config, scope) {
     const roots = [
       ...contentRoots,
       { scope: "design-doc", kind: "file", absolutePath: sourceConfig.paths.designDoc, extensions: MARKDOWN_EXTENSIONS },
-      { scope: "components", kind: "dir", absolutePath: sourceConfig.paths.componentsDir, extensions: ALL_SOURCE_EXTENSIONS },
-      { scope: "document-entry", kind: "file", absolutePath: sourceWorkspace.entryPath, extensions: REACT_IMPLEMENTATION_EXTENSIONS },
-      ...implementationRoots(sourceWorkspace),
+      ...await implementationRoots(sourceWorkspace),
     ];
     return roots;
   }
   return contentRoots;
 }
 
-function implementationRoots(sourceWorkspace) {
+async function implementationRoots(sourceWorkspace) {
   const roots = [];
   const seen = new Set();
+  const documentRoot = sourceWorkspace.config.paths.documentRoot;
+  const entries = await readDirectoryEntries(documentRoot);
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name.startsWith(".")) continue;
+    const absolutePath = path.join(documentRoot, entry.name);
+    if (seen.has(absolutePath)) continue;
+    seen.add(absolutePath);
+    roots.push({
+      scope: entry.name === "shared" ? "shared-source" : "press-source",
+      kind: "dir",
+      absolutePath,
+      extensions: ALL_SOURCE_EXTENSIONS,
+    });
+  }
   for (const root of sourceWorkspace.contentRoots ?? [{ kind: "dir", absolutePath: sourceWorkspace.sourceDir }]) {
     const absolutePath = root.kind === "dir" ? root.absolutePath : path.dirname(root.absolutePath);
     if (seen.has(absolutePath)) continue;
@@ -583,6 +598,15 @@ function implementationRoots(sourceWorkspace) {
   return roots;
 }
 
+async function readDirectoryEntries(directory) {
+  try {
+    return await fs.readdir(directory, { withFileTypes: true });
+  } catch (error) {
+    if (error?.code === "ENOENT") return [];
+    throw error;
+  }
+}
+
 function forEachLine(text, visit) {
   const lineRe = /([^\r\n]*)(\r\n|\n|\r|$)/g;
   let lineNumber = 1;

package/engine/runtime/source-workspace.mjs

@@ -12,7 +12,7 @@ export async function resolveActiveSourceWorkspace(config) {
   const reactEntry = await loadReactDocumentEntry(config.root);
   if (!reactEntry) {
     throw new Error(
-      "React/MDX document entry not found. Expected press/index.tsx with a Press default export before using workspace source tools.",
+      "React/MDX document entry not found. Expected one or more press/*/press.tsx files before using workspace source tools.",
     );
   }
   // Aggregate sources across every Press in the Workspace. Workspace
@@ -26,6 +26,7 @@ export async function resolveActiveSourceWorkspace(config) {
   }
   const contentRoots = contentRootsFromSources(aggregateSources, reactEntry.config);
   const sourceDir = firstDirectoryRoot(contentRoots) ?? reactEntry.config.paths.documentRoot;
+  const hasRegisteredSources = contentRoots.length > 0;
 
   return {
     kind: "react-mdx",
@@ -34,11 +35,12 @@ export async function resolveActiveSourceWorkspace(config) {
     entryPath: reactEntry.entryPath,
     sourceDir,
     contentRoots,
+    hasRegisteredSources,
     contentExtensions: REACT_MDX_CONTENT_EXTENSIONS,
     contentLabel: "React MDX chapter source",
     missingCode: "react-source.missing",
     emptyCode: "react-source.empty",
-    missingMessage: "Registered React MDX sources do not exist yet; create the files or roots declared in press/index.tsx `sources` before running export.",
+    missingMessage: "Registered React MDX sources do not exist yet; create the files or roots declared in press/*/press.tsx `sources` before running export.",
     emptyMessage: "Registered React MDX sources contain no `*.mdx` files; the document will export with zero source blocks.",
   };
 }
@@ -78,6 +80,7 @@ export async function collectActiveContentFiles(sourceWorkspace, { skipUnderscor
 
 export async function sourceDirectoryExists(sourceWorkspace) {
   const roots = sourceWorkspace.contentRoots ?? [{ kind: "dir", absolutePath: sourceWorkspace.sourceDir }];
+  if (roots.length === 0) return true;
   for (const root of roots) {
     try {
       const stat = await fs.stat(root.absolutePath);
@@ -93,13 +96,7 @@ export async function sourceDirectoryExists(sourceWorkspace) {
 function contentRootsFromSources(sources, config) {
   const entries = Object.entries(sources ?? {});
   if (entries.length === 0) {
-    return [{
-      kind: "dir",
-      absolutePath: config.paths.sourceDir,
-      basePath: config.paths.sourceDir,
-      sourceId: "default",
-      preset: "section-folders",
-    }];
+    return [];
   }
 
   const roots = [];

package/engine/runtime/validation.mjs

@@ -17,12 +17,20 @@ const PUBLIC_DEPLOY_ADAPTERS = new Set([
   "vercel",
 ]);
 
-// A directory is an OpenPress workspace if it contains a
-// press/index.tsx entry, or a package.json with an "openpress" field.
+// A directory is an OpenPress workspace if it contains folder-convention
+// Press entries, or a package.json with an "openpress" field.
 async function isWorkspaceRoot(dir) {
   try {
-    await fs.access(path.join(dir, "press", "index.tsx"));
-    return true;
+    const pressEntries = await fs.readdir(path.join(dir, "press"), { withFileTypes: true });
+    if (pressEntries.some((entry) => entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "shared")) {
+      for (const entry of pressEntries) {
+        if (!entry.isDirectory() || entry.name.startsWith(".") || entry.name === "shared") continue;
+        try {
+          await fs.access(path.join(dir, "press", entry.name, "press.tsx"));
+          return true;
+        } catch {}
+      }
+    }
   } catch {}
   try {
     const pkg = JSON.parse(await fs.readFile(path.join(dir, "package.json"), "utf8"));
@@ -60,11 +68,7 @@ export async function validateWorkspace(root) {
 
   mark("config");
   for (const [key, target] of [
-    ["sourceDir", sourceWorkspace.sourceDir],
-    ["mediaDir", activeConfig.paths.mediaDir],
-    ["themeDir", activeConfig.paths.themeDir],
     ["designDoc", activeConfig.paths.designDoc],
-    ["componentsDir", activeConfig.paths.componentsDir],
   ]) {
     if (!(await exists(target))) add("error", `config.${key}`, `Configured OpenPress path \`${key}\` does not exist.`, target);
   }
@@ -87,11 +91,11 @@ export async function validateWorkspace(root) {
 
   mark(sourceWorkspace.checkedName);
   if (!(typeof activeConfig.title === "string" && activeConfig.title.trim())) {
-    add("warning", "press.title", "<Press title> is missing in press/index.tsx; the workbench will show the default placeholder.", activeConfig.configPath);
+    add("warning", "press.title", "<Press title> is missing in press/*/press.tsx; the workbench will show the default placeholder.", activeConfig.configPath);
   }
-  if (!(await sourceDirectoryExists(sourceWorkspace))) {
+  if (sourceWorkspace.hasRegisteredSources && !(await sourceDirectoryExists(sourceWorkspace))) {
     add("warning", sourceWorkspace.missingCode, sourceWorkspace.missingMessage, sourceWorkspace.sourceDir);
-  } else {
+  } else if (sourceWorkspace.hasRegisteredSources) {
     const contentFiles = await collectActiveContentFiles(sourceWorkspace, { skipUnderscoreFiles: true });
     if (contentFiles.length === 0) {
       add("warning", sourceWorkspace.emptyCode, sourceWorkspace.emptyMessage, sourceWorkspace.sourceDir);
@@ -119,19 +123,19 @@ export async function validateWorkspace(root) {
   }
 
   mark("react-source");
-  const documentJsonPath = path.join(activeConfig.paths.publicDir, "document.json");
-  const exportedDocument = await readJsonIfExists(documentJsonPath);
-  const pressWarnings = exportedDocument?.source?.warnings;
-  if (Array.isArray(pressWarnings)) {
-    for (const warning of pressWarnings) {
-      const code = typeof warning?.code === "string" && warning.code ? warning.code : "warning";
-      add(
-        "warning",
-        `react-source.${code}`,
-        pressWarningMessage(warning),
-        documentJsonPath,
-        warning,
-      );
+  for (const exported of await readExportedPressDocuments(activeConfig.paths.publicDir)) {
+    const pressWarnings = exported.document?.source?.warnings;
+    if (Array.isArray(pressWarnings)) {
+      for (const warning of pressWarnings) {
+        const code = typeof warning?.code === "string" && warning.code ? warning.code : "warning";
+        add(
+          "warning",
+          `react-source.${code}`,
+          pressWarningMessage(warning),
+          exported.path,
+          warning,
+        );
+      }
     }
   }
 
@@ -173,6 +177,20 @@ async function readJsonIfExists(filePath) {
   }
 }
 
+async function readExportedPressDocuments(publicDir) {
+  const manifestPath = path.join(publicDir, "workspace.json");
+  const manifest = await readJsonIfExists(manifestPath);
+  if (!Array.isArray(manifest?.presses)) return [];
+  const out = [];
+  for (const press of manifest.presses) {
+    if (typeof press?.slug !== "string" || !press.slug.trim()) continue;
+    const documentJsonPath = path.join(publicDir, press.slug.trim(), "document.json");
+    const document = await readJsonIfExists(documentJsonPath);
+    if (document) out.push({ path: documentJsonPath, document });
+  }
+  return out;
+}
+
 async function exists(filePath) {
   try {
     await fs.access(filePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-press/core",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "type": "module",
   "description": "open-press core — runtime primitives, CLI, and render pipeline for AI-first fixed-layout documents.",
   "license": "MIT",

package/src/openpress/app/OpenPressApp.tsx

@@ -24,9 +24,7 @@ type LoadState =
       document: ReaderDocument;
       deploymentInfo: DeploymentInfo;
       manifest: WorkspaceManifest | null;
-      // Empty string for single-Press workspaces (no slug routing needed)
-      // or for the root entry of a multi-Press workspace. Otherwise the
-      // active press's slug — used by refresh/back/forward to re-resolve.
+      // Active Press slug, used by refresh/back/forward to re-resolve.
       activeSlug: string;
       runtimeMode: OpenPressRuntimeMode;
     }
@@ -75,16 +73,10 @@ export function OpenPressApp() {
     route: WorkspaceRoute,
     deploymentInfo: DeploymentInfo,
   ) => {
-    // No manifest (legacy deploy): always load /openpress/document.json.
     if (!manifest || manifest.presses.length === 0) {
-      const document = await loadReaderDocument("/openpress/document.json");
       setState({
-        status: "ready",
-        document,
-        deploymentInfo,
-        manifest,
-        activeSlug: "",
-        runtimeMode: resolveRuntimeMode(document, route.mode),
+        status: "error",
+        message: "OpenPress workspace manifest is missing or empty. Run open-press render to generate /openpress/workspace.json.",
       });
       return;
     }
@@ -124,8 +116,8 @@ export function OpenPressApp() {
     const press = state.manifest
       ? findManifestPress(state.manifest, state.activeSlug)
       : null;
-    const url = press?.documentUrl ?? "/openpress/document.json";
-    const document = await loadReaderDocument(url);
+    if (!press) return;
+    const document = await loadReaderDocument(press.documentUrl);
     setState((latest) => {
       if (latest.status !== "ready") return latest;
       return { ...latest, document };
@@ -133,8 +125,7 @@ export function OpenPressApp() {
   }, [state]);
 
   // Gallery click → pushState + load. Bypasses resolveFromRoute's
-  // "empty slug + multi-Press → gallery" branch: an explicit click on
-  // the unslugged root Press must enter it, not bounce back to gallery.
+  // "empty slug + multi-Press → gallery" branch.
   const enterPress = useCallback(async (press: WorkspaceManifestPress) => {
     if (state.status !== "gallery") return;
     pushPressRoute(press.slug, "preview");
@@ -230,16 +221,27 @@ export function OpenPressApp() {
   const presentationSlug = state.activeSlug || currentRouteFromLocation().slug;
   const openPresentation = state.document.meta.type === "slides" && presentationSlug
     ? (pageIndex: number) => {
+        // requestFullscreen must be called synchronously within the user gesture.
+        // window.open() creates a new browsing context, so the user gesture is lost
+        // and the browser blocks fullscreen. Navigate in-place instead.
+        const root = globalThis.document?.documentElement;
+        if (root?.requestFullscreen) void root.requestFullscreen().catch(() => {});
         const slug = normalizeSlug(presentationSlug);
-        const pathname = slug ? `/${slug}` : "/";
-        const hash = `#page-${String(pageIndex + 1).padStart(2, "0")}`;
-        window.open(`${pathname}?fullscreen=1${hash}`, "_blank", "noopener,noreferrer");
+        pushPressRoute(slug, "present", pageIndex);
+        setState((latest) => latest.status === "ready"
+          ? { ...latest, runtimeMode: "present" }
+          : latest);
       }
     : undefined;
 
   const exitPresentation = state.document.meta.type === "slides"
     ? (pageIndex: number) => {
         if (state.status !== "ready") return;
+        // Exit fullscreen before returning to the workbench.
+        const activeDoc = globalThis.document;
+        if (activeDoc?.fullscreenElement && activeDoc?.exitFullscreen) {
+          void activeDoc.exitFullscreen().catch(() => {});
+        }
         const slug = state.activeSlug || currentRouteFromLocation().slug;
         if (slug) pushPressRoute(slug, "preview", pageIndex);
         setState((latest) => latest.status === "ready"

package/src/openpress/app/OpenPressRuntime.tsx

@@ -48,7 +48,7 @@ export function OpenPressRuntime({
   // (e.g. /<slug>/present -> /<slug>/preview after exiting the slide
   // presenter), so the SlidePresentationPage exits to the wrong
   // route-driven branch (PublicViewer instead of HtmlWorkbench) and the
-  // user sees the legacy public-viewer chrome until a hard reload.
+  // user sees stale public-viewer chrome until a hard reload.
   // Bump a version on every pathname/search change so the memos
   // re-evaluate exactly when the URL does.
   const routeVersion = useLocationVersion();
@@ -125,11 +125,11 @@ function EmptyState({ style, workspaceMode }: { style: CSSProperties; workspaceM
         <p className="openpress-empty-state__eyebrow">OpenPress</p>
         <h1 className="openpress-empty-state__title">This document has no content yet.</h1>
         <p className="openpress-empty-state__body">
-          Add React MDX chapter files under <code>press/chapters/**/content/</code>, then re-build.
+          Add React MDX chapter files under <code>press/&lt;slug&gt;/chapters/**/content/</code>, then re-build.
         </p>
         {workspaceMode ? (
           <ol className="openpress-empty-state__steps">
-            <li><code>npm run build</code> &nbsp;— validates and refreshes <code>public/openpress/document.json</code></li>
+            <li><code>npm run build</code> &nbsp;— validates and refreshes <code>public/openpress/workspace.json</code></li>
             <li>Reload this page</li>
           </ol>
         ) : (

package/src/openpress/app/WorkspaceGalleryPage.tsx

@@ -1,49 +1,90 @@
 import { useEffect, useRef, useState, type CSSProperties, type KeyboardEvent } from "react";
 import type { HtmlPageBlock, ReaderDocument, WorkspaceManifest, WorkspaceManifestPress } from "../document-model";
 
+type GalleryFilter = "all" | "pages" | "slides";
+
 interface Props {
   manifest: WorkspaceManifest;
-  // Called when the reader navigates into a specific Press. The host
-  // is responsible for routing (history.pushState, hash, etc.); the
-  // gallery just emits the chosen slug.
   onSelectPress: (press: WorkspaceManifestPress) => void;
 }
 
-// Reader landing page for multi-Press workspaces. Shows a Figma-style
-// uniform-grid card per Press; each card lazily loads that Press's
-// document.json and renders the first page as a thumbnail preview.
-// Single-Press workspaces skip the gallery entirely.
 export function WorkspaceGalleryPage({ manifest, onSelectPress }: Props) {
   const heading = manifest.name ?? "Workspace";
-  const pressCount = String(manifest.presses.length).padStart(2, "0");
+  const [filter, setFilter] = useState<GalleryFilter>("all");
+
+  const counts = {
+    all: manifest.presses.length,
+    pages: manifest.presses.filter((p) => p.type === "pages").length,
+    slides: manifest.presses.filter((p) => p.type === "slides").length,
+  };
+
+  const visiblePresses = filter === "all"
+    ? manifest.presses
+    : manifest.presses.filter((p) => p.type === filter);
 
   return (
     <main className="openpress-workspace-gallery" aria-labelledby="workspace-gallery-heading">
       <header className="openpress-workspace-gallery__header">
         <div className="openpress-workspace-gallery__headline">
-          <p className="openpress-workspace-gallery__eyebrow">Workspace</p>
+          <p className="openpress-workspace-gallery__brand">
+            <span className="openpress-workspace-gallery__brand-mark">open-press</span>
+            <span className="openpress-workspace-gallery__brand-sep" aria-hidden="true">/</span>
+            <span className="openpress-workspace-gallery__eyebrow">Workspace</span>
+          </p>
           <h1 id="workspace-gallery-heading">{heading}</h1>
         </div>
-        <p className="openpress-workspace-gallery__count">
-          <span>{pressCount}</span>
-          <small>{manifest.presses.length === 1 ? "document" : "documents"}</small>
-        </p>
       </header>
 
-      <ul className="openpress-workspace-gallery__grid" role="list">
-        {manifest.presses.map((press) => (
-          <li key={press.slug || "root"} className="openpress-workspace-gallery__item">
-            <PressCard press={press} onSelect={() => onSelectPress(press)} />
-          </li>
-        ))}
-      </ul>
+      <div className="openpress-workspace-gallery__body">
+        <nav className="openpress-workspace-gallery__sidebar" aria-label="文件類型篩選">
+          <FilterButton label="All" count={counts.all} active={filter === "all"} onClick={() => setFilter("all")} />
+          <FilterButton label="Pages" count={counts.pages} active={filter === "pages"} onClick={() => setFilter("pages")} />
+          <FilterButton label="Slides" count={counts.slides} active={filter === "slides"} onClick={() => setFilter("slides")} />
+        </nav>
+
+        <section className="openpress-workspace-gallery__main" aria-label={`${filter} 文件`}>
+          {visiblePresses.length > 0 ? (
+            <ul className="openpress-workspace-gallery__grid" role="list">
+              {visiblePresses.map((press) => (
+                <li key={press.slug || "root"} className="openpress-workspace-gallery__item">
+                  <PressCard press={press} onSelect={() => onSelectPress(press)} />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="openpress-workspace-gallery__empty">No {filter} documents.</p>
+          )}
+        </section>
+      </div>
     </main>
   );
 }
 
-// Card is a div+role=button (not <button>) so it can contain the
-// rendered page HTML — buttons may only hold phrasing content, and
-// page HTML is block-level.
+function FilterButton({
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="openpress-workspace-gallery__filter-btn"
+      aria-pressed={active}
+      data-active={active ? "true" : "false"}
+      onClick={onClick}
+    >
+      <span className="openpress-workspace-gallery__filter-label">{label}</span>
+      <span className="openpress-workspace-gallery__filter-count">{String(count).padStart(2, "0")}</span>
+    </button>
+  );
+}
+
 function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelect: () => void }) {
   const handleKey = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Enter" || event.key === " ") {
@@ -62,7 +103,7 @@ function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelec
       aria-label={`Open ${press.title}`}
     >
       <PressThumbnail press={press} />
-      <div className="openpress-workspace-gallery__body">
+      <div className="openpress-workspace-gallery__card-body">
         <div className="openpress-workspace-gallery__title">{press.title}</div>
         <div className="openpress-workspace-gallery__meta">
           {press.slug ? <span className="openpress-workspace-gallery__slug">{press.slug}</span> : null}
@@ -78,9 +119,6 @@ function PressCard({ press, onSelect }: { press: WorkspaceManifestPress; onSelec
 function PressThumbnail({ press }: { press: WorkspaceManifestPress }) {
   const [state, setState] = useState<ThumbnailState>({ status: "loading" });
 
-  // Lazy-load each Press's document.json so the gallery doesn't block
-  // on a network waterfall when there are many Press. Errors degrade
-  // to the geometry-only placeholder used by the loading state.
   useEffect(() => {
     let cancelled = false;
     fetchFirstPage(press.documentUrl).then((page) => {
@@ -92,9 +130,6 @@ function PressThumbnail({ press }: { press: WorkspaceManifestPress }) {
     return () => { cancelled = true; };
   }, [press.documentUrl]);
 
-  // Outer card is uniform 4:3 (set in CSS). The page itself letterboxes
-  // inside via centered scale, so A4 portrait renders tall-and-narrow,
-  // social square renders centered, 16:9 slide stretches edge-to-edge.
   return (
     <div className="openpress-workspace-gallery__thumb" aria-hidden="true">
       {state.status === "ready" ? (
@@ -147,10 +182,6 @@ function PageMiniature({ page, press }: { page: HtmlPageBlock; press: WorkspaceM
     visibility: scale ? "visible" : "hidden",
   };
 
-  // Match the wrapping used by PublicReaderPage so scoped CSS targeting
-  // `.openpress-html-page__html` selectors lights up identically. The
-  // outer frame owns centering; the page only scales from its top-left
-  // origin, which avoids mixed translate/scale centering drift.
   const pageStyle: CSSProperties = {
     "--openpress-page-width": `${pageWidthPx}px`,
     "--openpress-page-height": `${pageHeightPx}px`,
@@ -172,7 +203,6 @@ function PageMiniature({ page, press }: { page: HtmlPageBlock; press: WorkspaceM
         <div className={pageClass} style={pageStyle} data-openpress-thumb-page="true">
           <div
             className="openpress-html-page__html"
-            // Trusted HTML — same source as the reader's main render path.
             dangerouslySetInnerHTML={{ __html: page.html }}
           />
         </div>
@@ -198,10 +228,6 @@ async function fetchFirstPage(url: string): Promise<HtmlPageBlock | null> {
   }
 }
 
-// Convert a CSS length string (px / mm / cm / in) into device pixels
-// at 96 dpi. A4 pages are stored as "210mm" / "297mm" so the gallery
-// and thumbnail scalers need this to compute their fit ratio — using
-// the bare string would always fall back to the default fallback.
 function parsePxLength(value: string | undefined): number | null {
   if (!value) return null;
   const match = value.trim().match(/^([\d.]+)\s*(px|mm|cm|in)$/i);

package/src/openpress/core/PageFolio.tsx

@@ -0,0 +1,115 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "./cn";
+
+export type PageFolioVariant = "current" | "total" | "slash" | "of" | "prefix";
+export type PageFolioNumberFormat = "plain" | "2-digit" | "3-digit";
+
+export type PageFolioProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+  variant?: PageFolioVariant;
+  currentFormat?: PageFolioNumberFormat;
+  totalFormat?: PageFolioNumberFormat;
+  prefix?: string;
+  separator?: string;
+  ofLabel?: string;
+  ariaLabel?: string;
+};
+
+export function PageFolio({
+  variant = "current",
+  currentFormat = "plain",
+  totalFormat = "plain",
+  prefix = "",
+  separator = "/",
+  ofLabel = "of",
+  ariaLabel,
+  className,
+  ...rest
+}: PageFolioProps) {
+  const current = placeholderForFormat(currentFormat);
+  const total = placeholderForFormat(totalFormat);
+  const label = ariaLabel ?? defaultAriaLabel(variant);
+
+  return (
+    <span
+      {...rest}
+      className={cn("openpress-page-folio", `openpress-page-folio--${variant}`, className)}
+      data-openpress-page-folio="true"
+      data-openpress-page-folio-variant={variant}
+      data-openpress-page-folio-current-format={currentFormat}
+      data-openpress-page-folio-total-format={totalFormat}
+      data-openpress-page-folio-prefix={prefix}
+      data-openpress-page-folio-separator={separator}
+      data-openpress-page-folio-of-label={ofLabel}
+      aria-label={label}
+    >
+      {renderFolioParts({ variant, current, total, currentFormat, totalFormat, prefix, separator, ofLabel })}
+    </span>
+  );
+}
+
+function renderFolioParts({
+  variant,
+  current,
+  total,
+  currentFormat,
+  totalFormat,
+  prefix,
+  separator,
+  ofLabel,
+}: {
+  variant: PageFolioVariant;
+  current: string;
+  total: string;
+  currentFormat: PageFolioNumberFormat;
+  totalFormat: PageFolioNumberFormat;
+  prefix: string;
+  separator: string;
+  ofLabel: string;
+}) {
+  if (variant === "total") {
+    return <span className="openpress-page-folio__total" data-openpress-page-folio-total="true" data-openpress-page-folio-format={totalFormat}>{total}</span>;
+  }
+
+  if (variant === "slash") {
+    return (
+      <>
+        <span className="openpress-page-folio__current" data-openpress-page-folio-current="true" data-openpress-page-folio-format={currentFormat}>{current}</span>
+        <span className="openpress-page-folio__separator" data-openpress-page-folio-separator-text="true">{separator}</span>
+        <span className="openpress-page-folio__total" data-openpress-page-folio-total="true" data-openpress-page-folio-format={totalFormat}>{total}</span>
+      </>
+    );
+  }
+
+  if (variant === "of") {
+    return (
+      <>
+        <span className="openpress-page-folio__current" data-openpress-page-folio-current="true" data-openpress-page-folio-format={currentFormat}>{current}</span>
+        <span className="openpress-page-folio__separator" data-openpress-page-folio-of-text="true">{ofLabel}</span>
+        <span className="openpress-page-folio__total" data-openpress-page-folio-total="true" data-openpress-page-folio-format={totalFormat}>{total}</span>
+      </>
+    );
+  }
+
+  if (variant === "prefix") {
+    return (
+      <>
+        <span className="openpress-page-folio__prefix" data-openpress-page-folio-prefix-text="true">{prefix}</span>
+        <span className="openpress-page-folio__current" data-openpress-page-folio-current="true" data-openpress-page-folio-format={currentFormat}>{current}</span>
+      </>
+    );
+  }
+
+  return <span className="openpress-page-folio__current" data-openpress-page-folio-current="true" data-openpress-page-folio-format={currentFormat}>{current}</span>;
+}
+
+function placeholderForFormat(format: PageFolioNumberFormat) {
+  if (format === "3-digit") return "000";
+  if (format === "2-digit") return "00";
+  return "0";
+}
+
+function defaultAriaLabel(variant: PageFolioVariant) {
+  if (variant === "total") return "Total pages";
+  if (variant === "slash" || variant === "of") return "Page number and total pages";
+  return "Page number";
+}