@open-press/core

MdxArea

A measurable content slot inside a Frame. The engine fills MdxArea instances with allocated blocks from a source chain — your job is to declare where MDX content goes; the engine handles measurement, pagination, and overflow.

Component Impl

# `<MdxArea>`

Renders a <div data-openpress-mdx-area> slot inside the active Frame. The engine measures the slot during export, allocates blocks from the named chain, and re-renders with the resolved content.

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

<MdxArea chainId="story" overflow?="extend" className?="my-area" />

Props

Name	Type	Default	Description
`chainId` required	`string`		The source chain this slot draws from. Sources defined with `mdxSource()` emit chains named after the source key (e.g. `story`); manuscript helpers like `Sections` pass chain ids derived from sections (`chapter:intro`).
`overflow`	`"extend" \| "truncate"`	`"extend"`	extend — when allocated blocks don't fit, the engine spawns more frames (long-form pagination). truncate — fit what you can, drop the rest (fixed-format slides / social cards).
`className`	`string`		Appended to the rendered `<div>`. Themes use this to scope typography or layout for specific slots.
`...rest`	`HTMLAttributes`		Pass-through to the underlying `<div>`.

Long-form content slot (auto-paginates)

<Frame frameKey="ch-1" role="document.content">
  <div className="page-frame">
    <main className="page-body">
      <MdxArea chainId="story" />
    </main>
  </div>
</Frame>

Fixed slide slot (truncate on overflow)

<Frame frameKey="slide-1" role="canvas.slide" chrome={false}>
  <div className="page-frame">
    <main className="page-body">
      <MdxArea chainId="slides" overflow="truncate" />
    </main>
  </div>
</Frame>

Data attributes the renderer writes

Name	Type	Description
`data-openpress-mdx-area`	`"true"`	Marker attribute, always present. Selectors target `[data-openpress-mdx-area]`.
`data-openpress-mdx-area-chain`	`string`	Mirrors `chainId`.
`data-openpress-mdx-area-index`	`number`	Slot index within the parent frame, in source order. Multiple MdxArea with the same chain in one frame get 0, 1, 2, …
`data-openpress-object-id`	`string`	MDX-area-level object id (`mdx-area:<frameKey>:<chainId>:<index>`) — used by the inspector and comment-marker system.
`data-openpress-mdx-area-overflow`	`"extend" \| "truncate"`	Mirrors the `overflow` prop.
`data-openpress-mdx-area-empty`	`"true" \| "false"`	`true` while no blocks have been allocated into this slot — useful for showing a placeholder.

Notes

An <MdxArea> outside <Frame> renders as empty — the FrameContext is required to learn its slot index.
overflow="truncate" drops content that doesn't fit without emitting a warning. Verify slide and social-card output before deploy.
The engine knows TOC chains by id prefix toc:; TocArea (in @open-press/core/manuscript) is just an MdxArea pre-configured for that prefix and wrapped in an <ol class="toc-list">.