@open-press/core 0.7.1 → 1.0.0

package/src/openpress/document-model/objectEntityModel.ts

@@ -0,0 +1,55 @@
+import type { ObjectEntity, ObjectEntityKind, ReaderDocument, SourceBlock } from "./documentTypes";
+
+export function createObjectEntityId(kind: ObjectEntityKind, ...parts: Array<string | number>) {
+  return [kind, ...parts.map((part) => encodeURIComponent(String(part)))].join(":");
+}
+
+export function createScopedObjectEntityId(kind: ObjectEntityKind, parentId: string | undefined, objectId: string) {
+  return parentId ? createObjectEntityId(kind, parentId, objectId) : createObjectEntityId(kind, objectId);
+}
+
+export function createBlockObjectEntityId(blockId: string) {
+  return createObjectEntityId("mdx-block", blockId);
+}
+
+export function createFrameObjectEntityId(frameKey: string) {
+  return createObjectEntityId("frame", frameKey);
+}
+
+export function createPageObjectEntityId(frameKey: string) {
+  return createObjectEntityId("page", frameKey);
+}
+
+export function createMdxAreaObjectEntityId(frameKey: string, chainId: string, indexInFrame: number) {
+  return createObjectEntityId("mdx-area", frameKey, chainId, indexInFrame);
+}
+
+export function getObjectEntityMap(document: Pick<ReaderDocument, "source"> | null | undefined): Record<string, ObjectEntity> {
+  return document?.source?.objectEntities ?? {};
+}
+
+export function getObjectEntity(document: Pick<ReaderDocument, "source"> | null | undefined, objectId: string): ObjectEntity | null {
+  return getObjectEntityMap(document)[objectId] ?? null;
+}
+
+export function sourceBlockToObjectEntity(block: SourceBlock): ObjectEntity {
+  return {
+    id: createBlockObjectEntityId(block.id),
+    kind: "mdx-block",
+    label: block.name ? `${block.name} ${block.id}` : block.id,
+    blockId: block.id,
+    frameKey: block.frameKey,
+    chainId: block.chainId,
+    pageId: block.frameKey ? createPageObjectEntityId(block.frameKey) : undefined,
+    source: {
+      path: block.path,
+      source: block.source,
+      line: block.source?.line,
+      column: block.source?.column,
+    },
+    metadata: {
+      blockKind: block.kind ?? null,
+      sectionSlug: block.sectionSlug ?? block.chapterSlug ?? null,
+    },
+  };
+}

package/src/openpress/{projectIdentity.ts → document-model/projectIdentityModel.ts}

@@ -1,4 +1,4 @@
-import type { DocumentMeta } from "./types";
+import type { DocumentMeta } from "./documentTypes";
 
 export interface ProjectIdentity {
   name: string;

package/src/openpress/{reactDocumentMetadata.ts → document-model/reactDocumentMetadataModel.ts}

@@ -1,7 +1,7 @@
 import type {
   ReaderDocument,
   SourceBlock,
-} from "./types";
+} from "./documentTypes";
 
 export const PRESS_TREE_MDX_SOURCE_TYPE = "openpress-press-tree-mdx";
 

package/src/openpress/document-model/workspaceManifestModel.ts

@@ -0,0 +1,57 @@
+// Shape of /openpress/workspace.json — the reader fetches this on
+// boot to decide between gallery routing (multi-Press) and direct
+// load (single Press). One entry per <Press> child of <Workspace>.
+//
+// Single-Press workspaces emit one entry with slug = "" and the
+// legacy /openpress/document.json path. Multi-Press emits one entry
+// per slug; each `documentUrl` resolves to /openpress/<slug>/document.json.
+
+export interface WorkspaceManifest {
+  version: 1;
+  // <Workspace name="..."> prop. Null when the user did not set one.
+  // Surfaced as the gallery header in the reader.
+  name: string | null;
+  presses: WorkspaceManifestPress[];
+}
+
+export interface WorkspaceManifestPress {
+  // Slug for this Press. Empty string for single-Press workspaces
+  // (legacy root); slug-shaped string for multi-Press.
+  slug: string;
+  // <Press title="..."> prop. Required in v1.0 contract.
+  title: string;
+  // Page geometry summary. Same shape as the reader's
+  // ReaderDocument.theme — readers can show a thumb in the gallery
+  // without loading the full document.json.
+  page: {
+    pagePreset?: string;
+    pageLabel?: string;
+    pageWidth?: string;
+    pageHeight?: string;
+    pageAspectRatio?: string;
+    pageHeightRatio?: string;
+  } | null;
+  // Number of pages produced for this Press.
+  pageCount: number;
+  // Absolute path the reader fetches for this Press's full document.json.
+  documentUrl: string;
+}
+
+// True when the reader should render the gallery first instead of
+// going straight into a single Press's document.
+export function manifestHasMultiplePresses(manifest: WorkspaceManifest): boolean {
+  return manifest.presses.length > 1;
+}
+
+// Find a Press entry by slug. Returns null when the slug is unknown.
+export function findManifestPress(
+  manifest: WorkspaceManifest,
+  slug: string,
+): WorkspaceManifestPress | null {
+  const normalized = slug.replace(/^\/+|\/+$/g, "");
+  for (const press of manifest.presses) {
+    const normalizedSlug = press.slug.replace(/^\/+|\/+$/g, "");
+    if (normalizedSlug === normalized) return press;
+  }
+  return null;
+}

package/src/openpress/manuscript/index.tsx

@@ -9,9 +9,10 @@
 // document type that wants section flow imports from here; documents that
 // do not (slides, folios, calendars) skip this module entirely.
 
-import { Fragment, useContext, type ReactNode } from "react";
-import { Frame, FrameContext, PressContext, useSource } from "../core";
+import { Fragment, useContext, type ComponentType, type ReactNode } from "react";
+import { Frame, FrameContext, MdxArea, PressContext, useSource } from "../core";
 import type { MdxAreaOverflow, ResolvedSource } from "../core";
+import { createMdxAreaObjectEntityId } from "../document-model/objectEntityModel";
 
 // ---------------------------------------------------------------------------
 // <Sections>
@@ -38,11 +39,11 @@ export interface SectionsOpenerProps {
 
 export interface SectionsProps {
   source: string;
-  page: React.ComponentType<SectionsPageProps>;
-  opener?: React.ComponentType<SectionsOpenerProps>;
+  page?: ComponentType<SectionsPageProps>;
+  opener?: ComponentType<SectionsOpenerProps>;
 }
 
-export function Sections({ source: sourceId, page: Page, opener: Opener }: SectionsProps) {
+export function Sections({ source: sourceId, page: Page = DefaultSectionPage, opener: Opener }: SectionsProps) {
   const source = useSource(sourceId);
   const press = useContext(PressContext);
   const hints = press?.hints ?? null;
@@ -92,6 +93,41 @@ export function Sections({ source: sourceId, page: Page, opener: Opener }: Secti
 export const Chapters = Sections;
 export type ChaptersProps = SectionsProps;
 
+export function DefaultSectionPage({
+  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>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // <Toc>
 // ---------------------------------------------------------------------------
@@ -178,15 +214,21 @@ function DefaultTocPage({ frameKey, chainId, pageIndex, totalPages, heading, cla
 
 export function TocArea({ chainId, maxLevel, overflow = "extend", className }: TocAreaProps) {
   const frame = useContext(FrameContext);
-  const blocks = frame?.consumeArea(chainId) ?? null;
+  const consumed = frame?.consumeArea(chainId) ?? null;
+  const blocks = consumed?.blocks ?? null;
+  const objectId = frame && consumed
+    ? createMdxAreaObjectEntityId(frame.frameKey, chainId, consumed.indexInFrame)
+    : undefined;
   return (
     <div
       className="openpress-mdx-area openpress-toc-area"
       data-openpress-mdx-area="true"
       data-openpress-mdx-area-chain={chainId}
+      data-openpress-mdx-area-index={consumed?.indexInFrame}
+      data-openpress-object-id={objectId}
       data-openpress-toc-max-level={maxLevel}
       data-openpress-mdx-area-overflow={overflow}
-      data-openpress-mdx-area-empty={blocks == null ? "true" : undefined}
+      data-openpress-mdx-area-empty={blocks == null ? "true" : "false"}
     >
       <ol className={["toc-list", className].filter(Boolean).join(" ") || undefined}>
         {blocks}

package/src/openpress/mdx/index.ts

@@ -27,14 +27,17 @@ export type {
   SourceNode,
 } from "../core/types";
 
+// All presets accept an optional `id` for the 1.0 contract where sources
+// are an array passed via <Press sources>. In v0.x the id came from the
+// record key in `export const sources = { story: mdxSource(...) }`.
 type MdxSourceOptions =
-  | { preset: "section-folders"; root?: string }
-  | { preset: "section-files"; root?: string }
-  | { preset: "file-list"; files: string[] };
+  | { id?: string; preset: "section-folders"; root?: string }
+  | { id?: string; preset: "section-files"; root?: string }
+  | { id?: string; preset: "file-list"; files: string[] };
 
 const VALID_PRESETS = new Set(["section-folders", "section-files", "file-list"]);
 
-export function mdxSource(options: MdxSourceOptions): MdxSourceDescriptor {
+export function mdxSource(options: MdxSourceOptions): MdxSourceDescriptor & { id?: string } {
   if (!options || typeof options !== "object") {
     throw new Error("mdxSource() requires an options object.");
   }
@@ -46,11 +49,15 @@ export function mdxSource(options: MdxSourceOptions): MdxSourceDescriptor {
     );
   }
 
+  const id = typeof options.id === "string" && options.id.trim() ? options.id.trim() : undefined;
+
   if (options.preset === "section-folders") {
-    return normalizeRooted("section-folders", options.root, "chapters") as MdxSourceDescriptorSectionFolders;
+    const desc = normalizeRooted("section-folders", options.root, "chapters") as MdxSourceDescriptorSectionFolders;
+    return id ? { ...desc, id } : desc;
   }
   if (options.preset === "section-files") {
-    return normalizeRooted("section-files", options.root, "content") as MdxSourceDescriptorSectionFiles;
+    const desc = normalizeRooted("section-files", options.root, "content") as MdxSourceDescriptorSectionFiles;
+    return id ? { ...desc, id } : desc;
   }
 
   // file-list
@@ -69,7 +76,8 @@ export function mdxSource(options: MdxSourceOptions): MdxSourceDescriptor {
   if (files.length === 0) {
     throw new Error('mdxSource({ preset: "file-list" }) requires at least one file.');
   }
-  return { type: "mdx", preset: "file-list", files };
+  const desc: MdxSourceDescriptor = { type: "mdx", preset: "file-list", files };
+  return id ? { ...desc, id } : desc;
 }
 
 function normalizeRooted(

package/src/openpress/reader/PageThumbnailsPanel.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import type { HtmlPageBlock, Theme } from "../document-model";
+import { Panel } from "../shared";
+
+// Used by canvas-style Press (slides, social posts) that don't have an
+// MDX-derived TOC. Renders each page as a clickable miniature so the user
+// can navigate without bookmarks. The miniature embeds the same HTML
+// that the main reader renders, scaled to fit the panel width.
+
+const FALLBACK_PAGE_WIDTH_PX = 794; // A4 portrait at 96dpi — matches reader default.
+
+export function PageThumbnails({
+  pages,
+  currentPageIndex,
+  onSelectPage,
+  theme,
+}: {
+  pages: HtmlPageBlock[];
+  currentPageIndex: number;
+  onSelectPage: (pageIndex: number, options?: { behavior?: ScrollBehavior }) => void;
+  theme?: Theme;
+}) {
+  const pageWidthPx = parsePxLength(theme?.pageWidth) ?? FALLBACK_PAGE_WIDTH_PX;
+  const pageHeightPx = parsePxLength(theme?.pageHeight) ?? pageWidthPx;
+  // Compute aspect from the parsed dimensions so it always matches the
+  // page render. theme.pageAspectRatio may be missing on per-Press
+  // documents in multi-Press workspaces, which is why we don't read it
+  // here.
+  const aspectRatio = `${pageWidthPx} / ${pageHeightPx}`;
+
+  if (pages.length === 0) {
+    return <Panel.Empty className="openpress-asset-empty" role="status">尚無頁面</Panel.Empty>;
+  }
+
+  return (
+    <ul className="openpress-thumb-list" aria-label="頁面縮圖">
+      {pages.map((page, index) => (
+        <li key={page.id}>
+          <ThumbnailCard
+            page={page}
+            index={index}
+            active={index === currentPageIndex}
+            onClick={() => onSelectPage(index, { behavior: "smooth" })}
+            pageWidthPx={pageWidthPx}
+            pageHeightPx={pageHeightPx}
+            aspectRatio={aspectRatio}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function ThumbnailCard({
+  page,
+  index,
+  active,
+  onClick,
+  pageWidthPx,
+  pageHeightPx,
+  aspectRatio,
+}: {
+  page: HtmlPageBlock;
+  index: number;
+  active: boolean;
+  onClick: () => void;
+  pageWidthPx: number;
+  pageHeightPx: number;
+  aspectRatio: string;
+}) {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState<number | null>(null);
+
+  useEffect(() => {
+    const el = surfaceRef.current;
+    if (!el) return;
+    const update = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (w > 0 && h > 0) setScale(Math.min(w / pageWidthPx, h / pageHeightPx));
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [pageWidthPx, pageHeightPx]);
+
+  const className = `openpress-thumb-card${active ? " is-active" : ""}`;
+  // Wrap the page HTML using the same class structure as the main
+  // reader (`.openpress-html-page > .openpress-html-page__html`) so
+  // section-scoped CSS that targets those classes still applies in
+  // the miniature.
+  const pageClass = page.className
+    ? `openpress-html-page ${page.className}`
+    : "openpress-html-page";
+  const scaledWidth = scale ? pageWidthPx * scale : 0;
+  const scaledHeight = scale ? pageHeightPx * scale : 0;
+  const frameStyle: CSSProperties = {
+    width: `${scaledWidth}px`,
+    height: `${scaledHeight}px`,
+    position: "relative",
+    visibility: scale ? "visible" : "hidden",
+  };
+  const pageStyle: CSSProperties = {
+    "--openpress-page-width": `${pageWidthPx}px`,
+    "--openpress-page-height": `${pageHeightPx}px`,
+    width: `${pageWidthPx}px`,
+    height: `${pageHeightPx}px`,
+    transform: scale ? `scale(${scale})` : undefined,
+    transformOrigin: "top left",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  } as CSSProperties;
+  const pageTitle = page.title || `Page ${index + 1}`;
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={className}
+      data-openpress-thumb-index={index}
+      aria-label={`前往第 ${index + 1} 頁：${pageTitle}`}
+      aria-current={active ? "page" : undefined}
+      onClick={onClick}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      <div className="openpress-thumb-card__surface" ref={surfaceRef} style={{ aspectRatio }}>
+        <div className="openpress-thumb-card__frame" style={frameStyle}>
+          <div className={pageClass} style={pageStyle} data-openpress-thumb-page="true">
+            <div
+              className="openpress-html-page__html"
+              // Page HTML comes from the trusted build pipeline (same source
+              // as the main reader).
+              dangerouslySetInnerHTML={{ __html: page.html }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="openpress-thumb-card__meta">
+        <span className="openpress-thumb-card__index">{String(index + 1).padStart(2, "0")}</span>
+        <span className="openpress-thumb-card__title">{pageTitle}</span>
+      </div>
+    </div>
+  );
+}
+
+function parsePxLength(value: string | undefined): number | null {
+  if (!value) return null;
+  const match = value.trim().match(/^([\d.]+)\s*(px|mm|cm|in)$/i);
+  if (!match) return null;
+  const n = Number(match[1]);
+  if (!Number.isFinite(n) || n <= 0) return null;
+  const unit = match[2].toLowerCase();
+  switch (unit) {
+    case "px": return n;
+    case "mm": return n * (96 / 25.4);
+    case "cm": return n * (96 / 2.54);
+    case "in": return n * 96;
+    default: return null;
+  }
+}

package/src/openpress/{publicPage.tsx → reader/PublicReaderPage.tsx}

@@ -1,30 +1,33 @@
 import {
-  useLayoutEffect,
   useMemo,
   useRef,
-  useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
   type RefCallback,
   type RefObject,
 } from "react";
 import { BookOpen, ExternalLink, X } from "lucide-react";
-import { createAnchorPageMap, resolveAnchorPageIndex } from "./anchorMap";
-import { collectBookmarkIndex } from "./indexes";
-import type { InspectorState } from "./inspector";
-import { getProjectIdentity } from "./projectIdentity";
-import { useReaderRuntime } from "./readerRuntime";
-import { scheduleBrowserFrame } from "./frameScheduler";
-import type { DeploymentInfo, ReaderDocument, HtmlPageBlock } from "./types";
-import { Bookmarks, CurrentPagePanel } from "./workbenchPanels";
-import type { DisplayPage } from "./workbenchTypes";
+import {
+  collectBookmarkIndex,
+  createAnchorPageMap,
+  createPageObjectEntityId,
+  getProjectIdentity,
+  resolveAnchorPageIndex,
+  type DeploymentInfo,
+  type HtmlPageBlock,
+  type ReaderDocument,
+} from "../document-model";
+import type { InspectorState } from "../workbench/inspector";
+import { useReaderRuntime } from "./useReaderRuntime";
+import { Bookmarks, CurrentPagePanel } from "./ReaderNavigationPanel";
+import type { DisplayPage } from "./readerTypes";
+import { usePageViewportScale } from "./usePageViewportScale";
+import type { PageLayoutMode } from "./pageViewportScaleModel";
 
 export const PUBLIC_DRAWER_BREAKPOINT = 1185;
-export type ViewMode = "reading" | "paged";
+export type ViewMode = "paged";
 export type PageInspector = Pick<InspectorState, "enabled" | "handleClick">;
 
-const PAGED_VIEW_MIN_WIDTH = 360;
-
 export function PublicViewer({
   document,
   pages,
@@ -46,6 +49,12 @@ export function PublicViewer({
     pageCount: displayPages.length,
     rightPanelBreakpoint: PUBLIC_DRAWER_BREAKPOINT,
   });
+  usePageViewportScale({
+    stageRef: reader.stageRef,
+    pageContainerRef: sourceContainerRef,
+    pageCount: displayPages.length,
+    layoutMode: "single",
+  });
   const currentPage = displayPages[reader.currentPageIndex];
   const staticPdfHref = deploymentInfo.pdf;
   const projectIdentity = getProjectIdentity(document.meta);
@@ -135,7 +144,7 @@ export function PublicViewer({
             totalPageLabel={reader.totalPageLabel}
             progressPercent={reader.progressPercent}
             title={currentPage?.title || document.meta.title}
-            pageLabelPrefix={viewMode === "reading" ? "節" : "頁"}
+            pageLabelPrefix="頁"
             showHeading={false}
             showTitle={false}
           />
@@ -145,37 +154,8 @@ export function PublicViewer({
   );
 }
 
-export function useViewMode() {
-  const [pagedAllowed, setPagedAllowed] = useState(() => {
-    if (typeof window === "undefined") return true;
-    return viewportAllowsPagedMode();
-  });
-
-  useLayoutEffect(() => {
-    if (typeof window === "undefined") return undefined;
-
-    let cancelFrame: (() => void) | null = null;
-    const sync = () => {
-      cancelFrame?.();
-      cancelFrame = scheduleBrowserFrame(() => {
-        cancelFrame = null;
-        setPagedAllowed(viewportAllowsPagedMode());
-      });
-    };
-
-    sync();
-    window.addEventListener("resize", sync);
-    window.visualViewport?.addEventListener("resize", sync);
-    return () => {
-      window.removeEventListener("resize", sync);
-      window.visualViewport?.removeEventListener("resize", sync);
-      cancelFrame?.();
-    };
-  }, []);
-
-  const viewMode: ViewMode = pagedAllowed ? "paged" : "reading";
-
-  return { viewMode };
+export function useViewMode(): { viewMode: ViewMode } {
+  return { viewMode: "paged" };
 }
 
 export function PrintDocument({
@@ -210,11 +190,6 @@ export function PrintDocument({
   );
 }
 
-function viewportAllowsPagedMode() {
-  if (typeof window === "undefined") return true;
-  return window.innerWidth >= PAGED_VIEW_MIN_WIDTH;
-}
-
 export function PublicPage({
   pages,
   currentPageIndex,
@@ -224,6 +199,7 @@ export function PublicPage({
   exposeSourceData = false,
   inspector,
   onInternalAnchorNavigate,
+  pageLayoutMode = "single",
 }: {
   pages: DisplayPage[];
   currentPageIndex: number;
@@ -233,6 +209,7 @@ export function PublicPage({
   exposeSourceData?: boolean;
   inspector?: PageInspector;
   onInternalAnchorNavigate?: (anchorId: string, pageIndex?: number) => boolean;
+  pageLayoutMode?: PageLayoutMode;
 }) {
   const handlePageClick = (event: ReactMouseEvent<HTMLDivElement>) => {
     if (inspector?.enabled && inspector.handleClick(event)) return;
@@ -257,6 +234,7 @@ export function PublicPage({
       className="reader-pages openpress-public-page"
       ref={sourceContainerRef}
       data-openpress-public-page="true"
+      data-openpress-page-layout={pageLayoutMode}
       onClick={handlePageClick}
     >
       {pages.map((page) => (
@@ -265,7 +243,9 @@ export function PublicPage({
           ref={registerPage(page.pageNumber - 1)}
           id={`page-${String(page.pageNumber).padStart(2, "0")}`}
           className="openpress-html-page"
+          data-openpress-object-id={page.frameKey ? createPageObjectEntityId(page.frameKey) : undefined}
           data-openpress-page-index={page.pageNumber - 1}
+          data-openpress-page-spread-side={pageLayoutMode === "spread" ? ((page.pageNumber - 1) % 2 === 0 ? "left" : "right") : undefined}
           data-openpress-active={currentPageIndex === page.pageNumber - 1 ? "true" : "false"}
           data-source-path={exposeSourceData ? page.source?.path : undefined}
           data-source-file={exposeSourceData ? page.source?.file : undefined}

package/src/openpress/{workbenchPanels.tsx → reader/ReaderNavigationPanel.tsx}

@@ -1,5 +1,6 @@
 import { type CSSProperties, type MouseEvent as ReactMouseEvent } from "react";
-import type { BookmarkItem } from "./indexes";
+import type { BookmarkItem } from "../document-model";
+import { Panel } from "../shared";
 
 type BookmarkSelectOptions = {
   behavior?: ScrollBehavior;
@@ -20,7 +21,7 @@ export function Bookmarks({
   };
 
   if (items.length === 0) {
-    return <p className="openpress-asset-empty">尚無書籤</p>;
+    return <Panel.Empty className="openpress-asset-empty" role="status">尚無書籤</Panel.Empty>;
   }
 
   return (
@@ -103,8 +104,8 @@ export function CurrentPagePanel({
   showTitle?: boolean;
 }) {
   return (
-    <section className="openpress-panel-section openpress-panel-section--current" aria-label="目前頁面">
-      {showHeading ? <div className="openpress-panel-heading">目前頁面</div> : null}
+    <Panel.Section className="openpress-panel-section--current" aria-label="目前頁面">
+      {showHeading ? <Panel.SectionTitle className="openpress-panel-heading">目前頁面</Panel.SectionTitle> : null}
       <div className="openpress-current-page-card">
         <div className="openpress-current-page-card__number" aria-label="目前頁數">
           {pageLabelPrefix ? <span className="openpress-current-page-card__prefix">{pageLabelPrefix}</span> : null}
@@ -117,6 +118,6 @@ export function CurrentPagePanel({
           <span style={{ "--progress": `${progressPercent}%` } as CSSProperties} />
         </div>
       </div>
-    </section>
+    </Panel.Section>
   );
 }

package/src/openpress/reader/index.ts

@@ -0,0 +1,11 @@
+export * from "./PageThumbnailsPanel";
+export * from "./PublicReaderPage";
+export * from "./ReaderNavigationPanel";
+export * from "./pageViewportScaleModel";
+export * from "./readerPageRegistry";
+export * from "./readerPageRoute";
+export * from "./readerScroll";
+export * from "./readerStateModel";
+export * from "./readerTypes";
+export * from "./usePageViewportScale";
+export * from "./useReaderRuntime";