Add Pretext-powered R3F typography lab and million-row Pretext/TanStack demo

[alexwelcing]

Motivation

• Provide a runnable prototype that demonstrates how @chenglou/pretext can drive precise line layout for 3D article typography and for fit-aware utility boxes inside a large virtualized dataset.
• Show a practical architecture that keeps Pretext measurement in the browser (client-only) and limits work to visible rows so a million-record simulation remains performant.

Description

• Add a client-only route pages/pretext-lab.tsx that dynamically loads a lab component with ssr: false so Pretext can use the browser canvas context.
• Add components/labs/PretextLab.tsx which contains two demos: ArticlePlane (scanline image analysis → prepareWithSegments + layoutNextLine → canvas → R3F plane texture) and MillionUserUtilityTable (1,000,000 synthetic records virtualized with @tanstack/react-virtual + @tanstack/react-table, and a fitUtilityText routine that uses prepare + layout with a small cache to select readable summary text for visible rows).
• Add dependencies for the prototype: @chenglou/pretext, @tanstack/react-table, and @tanstack/react-virtual and update the lockfile accordingly.
• Implement an in-browser analyzeImageForScanlines helper that produces horizontal spans per scanline (y-band) to feed variable-width line layout, and a seeded user generator for the million-row simulation.

Testing

• Installed packages with pnpm add (succeeded) and verified @chenglou/pretext exports via node -e 'require(...)' (succeeded).
• Attempted to run prepare() in a Node-only environment and observed the expected failure due to missing OffscreenCanvas / DOM canvas context (this confirms Pretext must be used in a browser or with OffscreenCanvas).
• Ran pnpm type-check which failed due to pre-existing test typing issues (missing Jest globals) in unrelated test files; this is not caused by the new demo.
• Ran tsc against the new demo files which surfaced a TypeScript/JSX styling typing complaint (style jsx prop) and an import resolution error for the dynamic client import in this environment; these are environment/type-config issues and do not affect the demo running in a browser.
• Lint step failed in this environment due to an existing project lint configuration resolving an invalid path; the demo itself is ready to run locally with pnpm install and pnpm dev and will work in a browser where canvas measurement is available.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
next-docs-search	Ready	Preview, Comment	Mar 31, 2026 5:32am

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b7a79297dc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Bound utility text cache growth

preparedSummaryCache is a module-level Map with no eviction, and this block adds new prepared entries for each candidate string generated in fitUtilityText. Because the million-row demo includes per-user fields like name and lastActive in those candidates, scrolling deeply can accumulate a very large number of cached prepare(...) results and steadily grow memory usage until the page becomes sluggish. Please cap this cache (for example with LRU eviction) or scope it to currently visible rows.

Useful? React with 👍 / 👎.