The whole page flows.

This entire page is laid out by the docs.dev engine, not the browser's stacked block model. Every paragraph you are reading is measured with pretext and positioned around the orb on the right — the prose narrows as it passes the figure and widens again below it, wrapping on both sides at once. Inline formatting survives:bold, italic, and inline code all keep working, and a link like pretext stays a real anchor. None of this touches getBoundingClientRect for the text or triggers a reflow.

The difference from a single Spread is that the engine flows the whole document. Paragraphs flow as text, but structural blocks are kept intact as measured boxes rather than flattened. Watch what happens with the code block below — it is not turned into inline text; it stays a real, highlighted, copyable code block, placed in the column beneath the figure while the prose around it flows.

import { prepareRichInline, layoutNextRichInlineLineRange } from '@chenglou/pretext/rich-inline';

const prepared = prepareRichInline(runs);
// walk lines, carving slots around obstacles — pure arithmetic

After the code block, the column continues. An atomic block like that one is measured once and never collides with a figure — if it would overlap, the engine pushes it below. This is the foundation: a measured, flowing canvas where text, code, and figures coexist, and where a future editor can let you drop an image anywhere on the page and watch everything reflow in real time.