# Design migration matrix

`design/src-web` is the implementation source for component structure, CSS, assets and visual
interaction states. Migration means adapting that implementation to Vue and Reka UI; it does not
mean recreating the effect from screenshots.

## Rules

- Port the existing DOM anatomy, CSS values and raster assets before optimizing them.
- Keep pixel-accurate atomic dimensions, but expose component width and density through props or
  CSS custom properties.
- Move reusable colors and metrics into semantic `--ui-*` tokens after visual parity is established.
- Keep page data, routing and stores outside `src/components/ui`.
- Delete a legacy `calc-*` component only after all of its call sites have migrated.

## Matrix

| Design source           | Current target                                            | Status      | Migration notes                                          |
| ----------------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------- |
| `foundations`, `shared` | `style/tokens`, `style/themes`, shared UI contract        | Migrated    | Semantic color and overridable geometry contracts        |
| `button`                | `ui/button`                                               | Migrated    | Preserved three-slice states; exposed density and width  |
| `input`                 | `ui/input`, `ui/number-field`                             | Migrated    | Removed forced inline width; normalized text metrics     |
| `form-controls`         | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated    | Tokenized state colors and aligned label/control anatomy |
| `select`                | `ui/select`                                               | Migrated    | Preserved popup anatomy and Reka keyboard behavior       |
| `tabs`                  | `ui/tabs`                                                 | Migrated    | Preserved list-owned animated marker                     |
| `slider`                | `ui/slider`                                               | Migrated    | Preserved the Reka coordinate system                     |
| `data-table`            | `ui/data-table`                                           | Migrated    | Ported hover, selected and density behavior              |
| `dialog`                | `ui/dialog`                                               | Migrated    | Preserved the focused title effect and focus management  |
| `menu`                  | `ui/dropdown-menu`                                        | Migrated    | Ported source menu spacing and state tokens              |
| `rarity`                | `ui/item-slot`                                            | Migrated    | Retained rarity presentation as data-semantic tokens     |
| `autocomplete`          | `ui/autocomplete`                                         | Migrated    | Reka Combobox composition with source popup anatomy      |
| `navigation`            | `ui/navigation`                                           | Migrated    | Selectable navigation primitive with source assets       |
| `scrollbar`             | `ui/scroll-area`                                          | Migrated    | Reusable Reka viewport/scrollbar composition             |
| `data-section`          | `ui/data-section`                                         | Migrated    | Collapsible section and vertically centered data rows    |
| `shop-item-row`         | `ui/shop-item-row`                                        | Migrated    | Ported source row structure and selectable states        |
| `complex-dialog`        | `ui/dialog` + migrated primitives                         | Composition | Kept domain-independent by composing existing primitives |
| `settings`              | `ui/settings`                                             | Migrated    | Responsive settings group, section and row primitives    |

## Legacy replacement order

Deferred: this component-library pass does not change business call sites.

1. Shared form controls and overlays used by DNF Helper and import dialogs.
2. Forge controls (`select`, `checkbox`, `slider`, tabs and panels).
3. Equipment dictionary filters, tree, cascader and pagination.
4. Skill tree, skill detail and VP controls.
5. Result tables and remaining domain-specific components.