dcalc/frontend-ui/docs/design-migration-matrix.md

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.