@open-press/core

Frame

A fixed page surface or a nested region within a page. The root Frame becomes the output page; nested Frames become selectable object boundaries within the current page.

The Frame module defines rendering content boundaries and data attributes, binding them to the page geometry allocation and markup systems of @open-press/core.

Component Impl

# `<Frame>`

Renders a <section> container affixed with data-openpress-* attributes. A root Frame declares a page boundary; a nested Frame declares a regional object.

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`		Unique identifier. The root Frame writes this to `data-openpress-frame-key`. Nested Frames write this to `data-openpress-region-frame-key`. Must not contain the `:extended:` string.
`children` required	`ReactNode`		Container content. Usually contains one or more `` components.
`role`	`string`		Semantic markup. Written to `data-frame-role`. The root Frame extracts the string after the dot (.) as the `data-page-kind` value.
`chrome`	`boolean`	`true`	Interface rendering flag (root Frame only). When set to `false`, it outputs `data-frame-chrome="false"` and `data-page-footer="false"` for the theme layer to hide frame UI.
`className`	`string`		CSS class attached to the root node. The root Frame includes the `reader-page` class by default.
`...rest`	`HTMLAttributes`		Standard HTML attributes passed through to the underlying ` ` tag.

Example: 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>

Runtime Context and Markers

Context Impl

# `FrameContext`

Provides the low-level environment information necessary for `<MdxArea>` to perform slot allocation operations. Standard components do not need to consume this Context directly.

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

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

Symbol Impl

# `FRAME_MARKER`

An internal Symbol used by the renderer during the AST traversal phase to identify whether a component instance is of a Frame type.

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

DOM Data Attribute Reference Table

The rendering system will automatically attach the following data-* attributes to the underlying <section> DOM element, acting as interfaces for selectors or inspectors:

Name	Type	Description
`data-openpress-frame-key`	`string`	Matches the root Frame's `frameKey` prop value.
`data-openpress-region-frame-key`	`string`	Matches the nested Frame region's `frameKey` prop value.
`data-openpress-object-id`	`string`	A system-generated unique object identifier.
`data-frame-role`	`string`	Matches the `role` prop value.
`data-page-kind`	`string`	A short string extracted after the dot in `role` (root Frame only).
`data-frame-chrome`	`"true" \| "false"`	Matches the `chrome` prop value (root Frame only).
`data-page-footer`	`"true" \| "false"`	Same as the `data-frame-chrome` state (root Frame only).

Role Conventions

Standard implementations adopt a two-part naming structure:

document.*: Long-form document allocation flows (e.g., document.cover, document.content).
canvas.*: Fixed layout single views (e.g., canvas.slide, canvas.card).
manuscript.*: Manuscript tags used internally by utility tools.