# Guided editor

The long Global Store product editor as a guided flow: a step rail on the left, section cards that show complete, current, error or locked, and the sticky action bar with one primary. Phone: one section at a time.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** Card, Progress
- **Build:** No shadcn stepper: an `<ol>` of step buttons with `aria-current="step"`; Radix `Progress` for meters.
- **In apps/admin today:** Card and Progress exist.
- **Client component:** yes. 

## Content rules

- Section titles: Pick a product, Options & prices, Price & combos, Photos, Review & publish.

## Do

- Let people move freely between complete sections.

## Don't

- Force a linear wizard when sections are independent.

## Accessibility

- **Keyboard:** Rail links jump to sections; Tab through fields in order.
- **ARIA:** Each section `<section aria-labelledby>`; rail `aria-current="step"`.
- **Focus:** Jumping focuses the section heading.

## Tokens

`--font-voice` `--font-stretch-title` `--accent` `--primary` `--destructive` `--muted` `--border` `--muted-foreground` `--primary-foreground` `--r-card` `--card` `--s-4` `--s-3` `--s-2` `--text-card` `--w-semibold` `--text-small` `--e-1` `--text-section` `--s-5` `--s-6` `--background`

## Files

`guided-editor.html` live specimen · `guided-editor.css` kit rules · `guided-editor.d.ts` props · full page: `docs/components/guided-editor/` (phone: `m/`).