@open-press/core/manuscript

原稿補助ツール

長編の章フローのための選択可能な補助ツールです。Sections は登録されたソースを反復処理し、各章ごとにフレームを発行し、コンテンツの長さに応じて自動的に複数のフレームにページ分割します。Toc + TocArea は自動生成された目次を提供します。

@open-press/core/manuscript モジュールは、長編の章、自動ページ分割、および目次生成をサポートする React コンポーネントとユーティリティ関数を提供します。主にレポート、論文、書籍などのドキュメントタイプに適用されます。固定レイアウトのプレゼンテーションやカードデザインでは、このモジュールをスキップする必要があります。

Component Impl

# `<Sections>`

指定された MDX ソースを反復処理し、対応するフレームシーケンスを自動生成します。コンテンツのオーバーフローを処理する際に新しいページを自動的にインスタンス化します。

import { Sections } from "@open-press/core/manuscript";

<Sections
  source="story"
  page?={SectionsPageComponent}
  opener?={SectionsOpenerComponent}
/>

プロパティ (Props)

Name	Type	Default	Description
`source` required	`string`		`` で登録されたソース識別子 (`id`)。
`page`	`ComponentType<SectionsPageProps>`	`DefaultSectionPage`	単一ページレンダリングコンポーネント。`frameKey`、`chainId`、`pageIndex`、`totalPages`、`sectionSlug`、`sectionTitle`、`sectionTone` などのコンテキストプロパティを受け取ります。
`opener`	`ComponentType<SectionsOpenerProps>`		章のオープナー（セパレーター）レンダリングコンポーネント。指定された場合、各章の最初のページの前に挿入されます。

例：カスタマイズされたコンテンツのページ分割

function ContentPage({
  frameKey, chainId, pageIndex, totalPages, sectionTitle,
}: SectionsPageProps) {
  return (
    <Frame frameKey={frameKey} role="document.content">
      <div className="flex h-full flex-col px-16 py-12">
        <main className="min-h-0 flex-1 text-[22px] leading-relaxed">
          <MdxArea chainId={chainId} />
        </main>
        <footer className="flex justify-between text-xs uppercase tracking-wide text-neutral-500">
          <span>{sectionTitle}</span>
          <span>{pageIndex + 1}/{totalPages}</span>
        </footer>
      </div>
    </Frame>
  );
}

<Press><Sections source="story" page={ContentPage} /></Press>

Component Impl

# `Chapters`

`<Sections>` のエイリアスコンポーネント。コンテンツ階層のセマンティクスが「章」(Chapter) である場合に使用し、プロパティインターフェースは `<Sections>` と完全に同じです。

import { Chapters } from "@open-press/core/manuscript";

Component Impl

# `DefaultSectionPage`

システムのデフォルトの章ページ分割コンポーネント。標準のヘッダー、フッター、および `<MdxArea>` コンテンツスロットの実装が組み込まれています。

import { DefaultSectionPage } from "@open-press/core/manuscript";

<DefaultSectionPage {...sectionsPageProps} />

Component Impl

# `<Toc>`

ドキュメントの見出し構造に基づいて目次 (Table of Contents) を生成します。自動的に `<Frame>` として設定され、ページをまたぐオーバーフローをサポートします。

import { Toc } from "@open-press/core/manuscript";

<Toc
  source="story"
  maxLevel?={3}
  page?={TocPageComponent}
/>

プロパティ (Props)

Name	Type	Default	Description
`source` required	`string`		見出し階層を抽出するターゲット MDX ソース識別子。
`maxLevel`	`number`	`3`	抽出する見出しの最大深度（例: `3` は H1 から H3 までを抽出することを示します）。
`page`	`ComponentType<TocPageProps>`		カスタマイズされた目次コンテナコンポーネント。デフォルトの実装では、標準の Frame と `` がレンダリングされます。

Component Impl

# `<TocArea>`

管理された目次コンテンツスロット。目次シナリオ向けの `<MdxArea>` の特化ラッパーであり、`<Toc>` カスタムページ内で使用する必要があります。

import { TocArea } from "@open-press/core/manuscript";

<TocArea
  chainId="toc:story"
  maxLevel?={3}
  overflow?="extend"
  className?
/>

プロパティ (Props)

Name	Type	Default	Description
`chainId` required	`string`		システムが生成する目次チェーン識別子（フォーマットは `toc:`）。
`maxLevel`	`number`	`3`	目次リスト出力の見出しの深さを制御します。
`overflow`	`"extend" \| "truncate"`	`"extend"`	`MdxArea` のオーバーフロー処理セマンティクスと一致します。
`className`	`string`		ルートの ` ` 要素に追加される CSS クラス。

実装上の注意点

暗黙の CSS スコープ：原稿によって生成される <Frame> には、テーマスタイルシートのカスケード選択用にデフォルトで role="manuscript.content" または role="manuscript.toc" 属性が付与されます。
内部リンクバインディング：目次ソースリンク（例: toc:story）は、ビルドフェーズでエンジンが見出しを反復処理することによって自動的に生成され、開発者が手動で書き込んだり登録したりすることはできません。
デザインパターンの境界：ドキュメントに高度にカスタマイズされた固定レイアウトデザインが必要な場合は、<Sections> 補助ツールの使用を放棄し、代わりに Frame の手動宣言と overflow="truncate" の <MdxArea> 実装を組み合わせて使用する必要があります。