feat(templates): add the checkout wizard page template

[ernestt]

Stacked on #5659. Base is core-stepper-narrow-collapse, not main. This template relies on the Stepper collapsing itself at narrow widths, so it has no hand-rolled mobile fallback of its own. Retarget to main once #5659 lands.

Summary

A multi-step wizard paired with a running summary that recalculates as answers change.

The pairing is the whole point. The wizard on its own is form-wizard; what separates this one is that a total stays on screen and stays correct while the steps advance — the shape any flow needs when a price, quota or budget has to survive the sequence.

The summary is a card beside the form on wide screens and collapses inline above it on narrow ones, so the number stays reachable at both sizes without the layout keeping a rail it cannot afford. The form column owns the sequence end to end (progress on top, the step in the middle, the way out at the bottom) rather than pinning a page-wide action bar that would span the summary too.

Validation is per step and only surfaces after an attempt, so a step never opens pre-reddened. A step that has been tried and left broken keeps its error on the stepper, which is what makes going back worth doing.

Rubric result — 99/100, grade A

Graded against Template Grading Rubric v1.3. Pass bar is B (75).

Category	Score	Max
Astryx Component Purity	30	30
Icon Purity	15	15
Custom CSS	15	15
Layout & Structure	15	15
Doc Metadata — fields 6/6 · description 2/3 · naming 1/1	9	10
Image Handling	5	5
Code Quality	10	10
Overall	99	100

Counts came from exhaustive scans, not sampling:

• Component purity 30/30. Zero raw HTML elements across 985 lines. The only lowercase angle-bracket matches in the file are the TypeScript generics <string> and <number>.
• Icon purity 15/15. Zero raw <svg>/<path>; every icon is a heroicon through Icon or an icon= prop.
• Custom CSS 15/15. No stylex.create, no style={{}}, no className, no xstyle. Spacing is entirely token-valued Astryx props, which the rubric does not count.
• Layout & structure 15/15. Roots in Layout with contentWidth={1000}, correct for a Form - category. Two-column split that stacks on narrow, no global app chrome, no href anywhere so nav is inert.
• Image handling 5/5. Three /template-assets/ paths, all resolving to checked-in files. No absolute URLs or placeholder services.
• Code quality 10/10. 'use client' as the first statement after the license header (house convention), default export, imports confined to @astryxdesign/core/*, @heroicons/react/* and react, realistic fixtures, no dead code.

The one point off

Doc metadata 5b scores 2/3 — the synonyms slot is half-present. "a total, quota, or price" supplies the interchangeable example domains, but the alternate words a searcher actually types (cart, checkout, order, basket, payment) are left implicit.

Leaning on the name to carry "checkout" does not count: the rubric's own ablation found description is the only field whose removal degrades retrieval, and removing name changed nothing. Folding those synonyms in would take this to 100 — happy to do it in this PR if you'd rather not carry the finding.

Scope

Template plus its one gallery registration line. The five sibling wizard templates are registered in the same file in my working tree and are deliberately not included; they ship in their own PRs.

Also left out: an unrelated apps/template-viewer/vite.config.ts change that points the dev viewer at the docsite's public/ so image templates preview correctly. Generic dev tooling, not needed for this template to work.

Test plan

• Rubric v1.3 scored at 99/100 (A); scorecard validates against scripts/template-score-ledger.mjs --dry-run.
• Lint clean; pnpm -F @astryxdesign/cli typecheck:template-docs clean.
• Renders with zero page errors and zero console errors in light and dark, at 1280px and 390px.
• Full flow driven end to end: per-step validation blocks forward movement, errors appear only after an attempt, an errored step keeps its marker on the stepper, and the summary total tracks quantity changes.
• Reviewer: not yet recorded to the wiki ledger — page/checkout-wizard has no entry today. Say the word and I'll --push the scorecard.

Made with Cursor

Screenshots

All four captured with zero page errors and zero console errors.

Desktop 1280px, light. Summary as a card beside the form; both columns measure from the same 1000px cap, so "Checkout", "Review your cart" and "Continue" share one content line.

Desktop 1280px, dark.

Narrow 390px, light. The summary collapses inline above the form and keeps the total on its trigger, so the number survives the narrow layout. The stepper collapses to bars with the current step named below it.

Narrow 390px, dark.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 28, 2026 6:21pm

[xinzi-bot]

Thanks—the running summary is a useful wizard shape. Three paths need fixing: clicking a future Step bypasses the validation that should gate each advance; Canada and the UK still require a US ZIP; and an invalid promo still says “Press Apply” after Apply ran. These are all in this template, not inherited from #5659.

[Automated review]

[cixzhang]

Checkout users can skip required data, lose focus, and reach a Pay button that does nothing. This confirms xinzi-bot’s three exact-head findings and adds two broader failures:

1. The transition model validates only footer Continue: Step/compact navigation skips fields, invalid actions do not focus the first error, and Pay never submits or confirms. Canada/UK postal codes and invalid promo results are also incorrect.
2. Responsive mode watches viewport width, not host width. At 1280px viewport / 600px host, the form shrinks to 168px beside a 360px summary; narrow visual and keyboard order also disagree.
3. Template metadata uses a value outside TemplateCategory, and this public CLI addition has no CLI changeset.

Please make every forward path validate/focus/complete, adapt from available width, and restore metadata/release gates.

[Reviewed by Robohands]