@open-press/core

Frame

固定されたページ表面、またはページ内のネストされた領域。ルート Frame は出力のページになり、ネストされた Frame は現在のページ内で選択可能なオブジェクトの境界になります。

Frame モジュールは、レンダリングコンテンツの境界とデータプロパティを定義し、それらを @open-press/core のページジオメトリ割り当てとマーキングシステムにバインドします。

Component Impl

# `<Frame>`

data-openpress-* 属性を持つ <section> コンテナをレンダリングします。ルート Frame はページアドレスとして宣言され、ネストされた Frame は領域オブジェクトになります。

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

<Frame
  frameKey="cover"
  role?="document.cover"
  chrome?={true}
  className?="reader-page--cover"
  ...sectionProps
>
  {/* page or region contents */}
</Frame>

プロパティ (Props)

Name	Type	Default	Description
`frameKey` required	`string`		一意の識別子。ルート Frame は `data-openpress-frame-key` に書き込まれます。ネストされた Frame は `data-openpress-region-frame-key` に書き込まれます。`:extended:` 文字列を含めることは禁止されています。
`children` required	`ReactNode`		コンテナの内容。通常、1つ以上の `` コンポーネントを含みます。
`role`	`string`		セマンティックタグ。`data-frame-role` に書き込まれます。ルート Frame はドット (.) のサフィックスをキャプチャし、`data-page-kind` 値として使用します。
`chrome`	`boolean`	`true`	インターフェースレンダリングフラグ (ルート Frame のみ)。`false` に設定すると、テーマ層がフレーム UI を非表示にできるように `data-frame-chrome="false"` と `data-page-footer="false"` が出力されます。
`className`	`string`		ルートノードに追加される CSS クラス。ルート Frame はデフォルトで `reader-page` クラスを含みます。
`...rest`	`HTMLAttributes`		基盤となる ` ` タグに渡される標準 HTML 属性。

例：ドキュメントページ (Document Page)

<Frame frameKey="ch-2" role="document.content" className="reader-page--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="story" />
    </main>
  </div>
</Frame>

実行時コンテキストとマーカー

Context Impl

# `FrameContext`

`<MdxArea>` がスロット割り当て操作を実行するために必要な低レベルの環境情報を提供します。一般的なコンポーネントがこの Context を直接消費する必要はありません。

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

const frame = useContext(FrameContext);
// -> { frameKey, objectId, pageId, consumeArea(chainId) } | null

Symbol Impl

# `FRAME_MARKER`

レンダラーが AST トラバーサルフェーズで使用する内部 Symbol。コンポーネントインスタンスが Frame タイプであるかどうかを識別するために使用されます。

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

DOM データ属性リファレンス表

レンダリングシステムは、セレクタまたはインスペクタのインターフェースとして、基盤となる <section> DOM 要素に以下の data-* 属性を自動的に追加します：

Name	Type	Description
`data-openpress-frame-key`	`string`	ルート Frame の `frameKey` プロパティ値に対応します。
`data-openpress-region-frame-key`	`string`	ネストされた Frame 領域の `frameKey` プロパティ値に対応します。
`data-openpress-object-id`	`string`	システムが生成した一意のオブジェクト識別子。
`data-frame-role`	`string`	`role` プロパティ値に対応します。
`data-page-kind`	`string`	`role` のドットの後から抽出された短い文字列 (ルート Frame のみ)。
`data-frame-chrome`	`"true" \| "false"`	`chrome` プロパティ値に対応します (ルート Frame のみ)。
`data-page-footer`	`"true" \| "false"`	`data-frame-chrome` の状態と同じです (ルート Frame のみ)。

ロールの規約 (Role Conventions)

標準的な実装では、2段階の命名構造を採用しています：

document.*：長編ドキュメントのフロー割り当て (例：document.cover, document.content)。
canvas.*：固定レイアウトの単一ビュー (例：canvas.slide, canvas.card)。
manuscript.*：補助ツールが内部で使用する原稿タグ。