feat(templates): add the inline wizard page template

[ernestt]

Sixth and last of the wizard family, and the only one that keeps every step on the page. Siblings: #5660, #5664, #5672.

Steps stack in one column inside a vertical Stepper and expand in place. A finished step collapses back to a single row carrying its result and a way back in, so the whole flow stays readable at once. That earns its keep when later steps depend on earlier ones — the decision that broke something stays on screen while you fix it.

The fixture is a continuous integration setup, picked because it has a shape the other wizards cannot show: two steps of human setup, three that run themselves, then a review.

Steps that run themselves

The automatic steps advance on a timer and report progress in place through a nested Stepper. Sub-checks are a sequence with a position in it, which is what Stepper already draws, so the connector fills check by check for free — no ProgressBar saying the same thing in a second visual language next to a line already built to say it. No core changes were needed: the running check uses Step's documented custom indicator slot with a Spinner.

The nested stepper runs on-track where the parent stays separated, because the two lines mean different things. The parent's rail marks how far down the form you are; this one is the run itself, threading through each check as it lands, and a thread should pass through its beads.

The tick is 800ms, sized to clear one full turn of the Spinner (730ms at the default motion scale) — a check that resolves mid-rotation reads as a stutter rather than as work that finished.

The failure is reachable

End-to-end tests ask for 4 GB and the small runner has 2 GB, so turning that job on without sizing the runner up halts the trial run. Nothing is hard-coded: memoryGB lives on the job, so the message can name both numbers, and the outcome is derived from the pipeline as it currently stands.

This is the layout arguing for itself. The step that caused the failure is four rows up, still legible, one click from being fixed. The banner offers one action and it is not a retry — running the same pipeline on the same runner again has only one possible outcome.

Going back into an earlier step throws away every automatic result from there on. They were computed against inputs that are now open for editing, and a green check above an edited field is a lie.

Review, and narrow

Collapsed rows hold one line down to 520px — the summary is maxLines={1} inside a filling StackItem, and the link never wraps.

Accessibility

The automatic steps advance without anyone asking, which is a change of context. Focus deliberately stays put and a polite live region reports the hand-off instead — only on the transitions that matter, since a live region that fires constantly is worse than none.

Rows are clickable for navigation, so the "Edit" and "Run again" affordances are Text, not Button: a clickable Step renders its label row as a <button>, and a control nested inside one is neither valid HTML nor separately pressable. The row is the control. Runner choice is a RadioList rather than a card grid, so three mutually exclusive options announce as one choice.

Rubric

97/100 — A.

Category	Score	Max
Astryx Component Purity	30	30
Icon Purity	15	15
Custom CSS	12	15
Layout & Structure	15	15
Doc Metadata	10	10
Image Handling	5	5
Code Quality	10	10

Zero raw HTML elements, zero raw SVG, no images, Layout root, single page. The three points come off Custom CSS for one declaration: a -28px inline-start pull on the nested Stepper so its track lands under the parent's indicator rather than 24px inside it. There is no prop for that today.

Known limitation

Step keeps the flex min-width floor on its vertical body, its clickable button row, and its content slot — only iconLabelRow releases it. Below roughly 500px that means endContent and the step's children widen the row instead of shrinking inside it, so the column overflows horizontally. Releasing min-width on those three resolves it completely and nothing inside refuses to shrink. Not fixed here, since this PR is a template and the fix belongs in core.

Test plan

• prettier --check and eslint clean on all three files
• pnpm -F docsite typecheck passes; tsc --listFiles confirms it reaches page.tsx
• Full auto run drives end to end in the viewer (11.9s), including the memory failure and recovery
• Collapsed rows measured at 28px from 1180px down to 520px — no wrapping
• Nested track centre measured at 232px against the parent's 232px at both 1180px and 720px
• Docsite preview renders in CI

Made with Cursor

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 31, 2026 11:17pm

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

No component packages changed.

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}