OpenPress

@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 selectable, commentable, layout-aware regional object.

import { Frame } from "@open-press/core";
<Frame
  frameKey="cover"
  chrome?={true}
  box?={{ x: 100, y: 80, w: 720, h: 480 }}
  layout?={{ mode: "stack", gap: 32, align: "start" }}
  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. Document pages usually contain ``; fixed layouts and slide templates usually contain `Frame`, `Text`, `Line`, `MediaObject`, and other core objects.
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.
box FixedBox Fixed-layout coordinates in the current page geometry. The default 16:9 slide coordinate system is 1920 x 1080. Supports numbers or CSS length strings.
layout FrameLayout Auto layout constraints for children. Supports `stack` and `grid`, with `gap`, `padding`, `width`, `height`, and `clip` options.
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" 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>

Example: Slide Region

<Frame
  frameKey="agenda-list"
  box={{ x: 1080, y: 365, w: 650, h: 430 }}
  layout={{ mode: "stack", gap: 56, align: "start" }}
  className="op-source-deck-agenda-list"
>
  <Text as="p" label="agenda-1">1. Refresher on problem statement</Text>
  <Text as="p" label="agenda-2">2. Update on metrics</Text>
</Frame>

Frame identity is always derived from the required frameKey; editable primitive label values are for Text, Line, and MediaObject.

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, 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 Default 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-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).