Three screens, built 2026-08-31

Static renders of the real components against invented data. Open them on a phone. Nothing here talks to a database, a Stripe account or the network — every stylesheet and the Alexandria font file are inlined into each page.

• Earnings — the 9:16 crop Start here. The share card inside a 390 × 693 phone frame, beside the whole screen with everything outside the crop dimmed.
• Earnings — where your money is The full screen: share card, bracket card, ledger by state, payments, both notices.
• Share card — two edge cases A first-month reseller with one bar and deliberately no graph, and a $104,182.60 total — the widest figure the type size was measured against.
• Earnings — every line The detail panel behind “See every line”, where merchant names are allowed. Includes a deliberately long name to test wrapping.
• Your book, if nothing changes The projected figure with its assumption welded into the same element.
• Admin — revenue, live mode The money screen. Three headlines, the exclusions list, by reseller, by plan, the ledger totals, and what the page cannot tell you.
• Admin — revenue, test mode The same page in the other Stripe universe, so the mode-on-the-face-of-the-screen design can be judged against its pair.

What is real here and what is not

Real: every component, every stylesheet, and all of the arithmetic. lib/billing/brackets.ts decides the bracket and the rolling-month boundary, lib/billing/book-projection.ts computes the projection, and lib/billing/revenue.ts computes every figure on the admin screen. The class names, the markup and the cascade are what the app renders.

Not real: the data. Every shop, reseller and dollar below was invented for this preview — see scripts/preview/fixtures.mts. The commission ledger uses only the Waiting and Sent states, because those are the only two anything writes today; the other three would have been a fiction.

Not rendered: the app shell each layout wraps these in — the sidebar, the sign-out control and the mobile top bar. It needs its own session reads, and it is not the design under review. On a real phone there is a 64 px band above the screen that is not here.

One edit to the markup, and only one: the buttons and links inside the screens point at real app routes, which do not exist here. Each has been repointed at the preview page that shows it, or back to this hub where there is no preview. Nothing visual was touched.

Rebuild it: bash scripts/preview/build.sh, from the repo root.