# Substitutions — Prototype

Functional prototype generated by **RDOS · SKILL 6** from the refined design
(`design/refined/substitutions-final.html`) and its engineer spec.

## Run
```
npm install
npm run dev
```

## Tech stack is configurable
This build targets **React + Vite**. The pipeline is **tech-stack-agnostic** — SKILL 6
renders the refined design into whatever stack the team uses. To target another
(Vue, Svelte, SwiftUI, a specific component library, web components…), set the target
in `research/inputs/context/design_system.md` and re-run SKILL 6. The design,
research, and spec upstream don't change — only the renderer does.

## Connecting a design system
The components read tokens from `src/theme.css` **only** — never hardcoded values.
To connect a real design system, replace the token values (or map them to your
library's tokens), or swap the primitive components for your library's equivalents.

## Structure
```
src/
  data/order.js          — order items + status (rep / keep / locked)
  components/
    SummaryTabs.jsx      — summary bar that doubles as the tab bar
    ItemRow.jsx          — item + inline Replace/Keep toggle (or locked chip)
    Toast.jsx            — "Moved · Undo" confirmation
    components.md        — component reference
  screens/
    SubstitutionsScreen.jsx — state + logic (filter, search, toggle, undo, counts)
  theme.css              — design tokens
  screen.css             — layout
```