Incremental Layout Profiler

What this demonstrates

A devtool-like trace of incremental layout behavior. Width-only changes stay on the hot path, while edits and font changes invalidate preparation and re-enter the expensive phase.

Relevant Pretext API

profilePrepare() for timing the expensive phase
prepare() and layout() to compare cold path versus hot path work

Why this matters

Teams often hear that Pretext is fast, but the more useful mental model is that some changes are cheap and some are not. Once you can see invalidation clearly, you can design UIs that maximize cache reuse instead of accidentally re-preparing text on every interaction.

import { prepare, layout, profilePrepare, buildFont } from '@chenglou/pretext';

const font = buildFont(16);

// Width-only changes reuse prepared text.
const prepared = prepare(text, font);
const hotLayout = layout(prepared, width, lineHeight);

// Text or font changes must invalidate preparation.
const profile = profilePrepare(text, font);
const newPrepared = prepare(text, font);
const coldLayout = layout(newPrepared, width, lineHeight);

trace.push({
  kind: 'edit',
  prepareMs: profile.totalMs,
  layoutUs: measureLayoutUs(newPrepared)
});