# 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`, `ui/command-input`         | Migrated    | Removed forced inline width; normalized text metrics; retained FastStep and command-prefix anatomy          |
| `form-controls`         | `ui/checkbox`, `ui/radio-group`, `ui/switch`, `ui/rating` | Migrated    | Tokenized state colors and aligned label/control anatomy                                                    |
| `select`                | `ui/select`, `ui/tree-select`, `ui/cascader`              | Migrated    | Flat, hierarchical and two-level responsive selection; TreeSelect preserves parent-toggle and rarity states |
| `tabs`                  | `ui/tabs`, `ui/pagination`                                | Migrated    | Animated list marker and compact result navigation                                                          |
| `slider`                | `ui/slider`                                               | Migrated    | Preserved the Reka coordinate system                                                                        |
| `data-table`            | `ui/data-table`, `ui/progress`                            | Migrated    | Added compact density, row eligibility, note/summary/footer rows, empty state and multi-marker progress     |
| `dialog`                | `ui/dialog`, `ui/utility-sheet`                           | Migrated    | Kept WindowDialog and UtilitySheet as separate families while sharing focus-safe dialog chrome              |
| `menu`                  | `ui/dropdown-menu`, `ui/settings-dropdown`                | Migrated    | Preserved the distinct compact-context and full settings-menu anatomies                                     |
| `rarity`                | `ui/item-slot`, `ui/notice-badge`                         | Migrated    | Retained rarity data semantics plus the native Notice raster and independent Level badge family             |
| `autocomplete`          | `ui/autocomplete`, `ui/search-tree`                       | Migrated    | Kept flat Combobox and toolbar-plus-tree search as separate reusable families                               |
| `navigation`            | `ui/navigation`, `ui/favorite-drawer`                     | Migrated    | Preserved selectable SettingsNav and removable, scrollable FavoriteDrawer composition                       |
| `scrollbar`             | `ui/scroll-area`                                          | Migrated    | Reusable Reka viewport/scrollbar composition                                                                |
| shared overlay help     | `ui/popover`, simple/rich `ui/tooltip`                    | Migrated    | Portal z-index, collision and responsive width contracts for both tooltip anatomies                         |
| `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

Business replacement is now in progress. Each slice keeps its route, events, API calls and stored
values, and a legacy component is deleted only after repository-wide references reach zero.

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.

## Remaining gaps

- `SkillDamageDetail` and `ItemRow` remain domain compositions on top of `ui/data-table`; the
  generic table contract now exposes the structural slots they require.
- Complex product dialogs remain compositions, not a claim that every business dialog has reached
  source-level visual parity.
- Business call sites in the active routes are migrated, the superseded equipment page is removed,
  and the repository-wide `components/calc` call-site check is now at zero.