init

frontend-ui/design-qa.md

@@ -18,6 +18,10 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 - NumberField: 30 px field, 23 px spinner, visible up/down arrows, and two 14 px `+10`/`-10` fast-step buttons match the source anatomy.
 - Tabs: 40 px list, 30 px triggers, glow layers, divider line, animated 39 × 5 px arrow marker, and line-marker variant are present. Marker movement follows Reka selection state and respects reduced motion.
 - Dialog: the titlebar uses the exact 45 raster frames from `windowheadereffect.img`, advances every 66 ms while focused, and hides the effect in the unfocused/reduced-motion state.
+- TreeSelect: the Reka tree now opens the selected path, uses the source's flush 2 px row rhythm,
+  eight rarity colors, pixel branch glyph, selected border, and distinct hover/active/focus-visible
+  states. Desktop and 390 px evidence is captured at `tree-select-fixed-1440.png` and
+  `tree-select-fixed-390.png`.
 - Responsive: document overflow is absent at 1920, 1280, 768, and 390 widths. At 390 px, DataTable keeps a 328 px viewport with an intentional 560 px internal scroll surface.
 
 ## Required fidelity surfaces
@@ -25,7 +29,10 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 - Fonts and typography: DCalc/SimSun control typography and Segoe UI/Chinese fallbacks retain the source hierarchy and compact line-height.
 - Spacing and layout rhythm: page gutters use `clamp()`, panels use container-relative padding, grids collapse at 1280/900/520 breakpoints, and atomic game-control sizes stay pixel-aligned.
 - Colors and tokens: blue action surfaces, brass edges, gold selection, blue focus, disabled gray, semantic status colors, and rarity colors map to DCalc CSS variables.
-- Image quality and assets: stars, rarity frames, item icons, select arrow, dialog close icon, and all 45 title-effect frames use original raster assets with zero broken images.
+- Image quality and assets: stars, rarity frames, item icons, dialog close icon, and all 45
+  title-effect frames use original raster assets with zero broken images. Select, TreeSelect and
+  Autocomplete use the Design source's CSS gradient button and clipped arrow instead of a raster
+  arrow.
 - Copy and content: catalog copy differs only where it documents the Reka implementation or exposes live state; component labels and source examples remain representative.
 
 ## Interaction verification
@@ -38,12 +45,32 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 - Select: 装备 → 材料.
 - DropdownMenu: `导出结果` updated live status.
 - Dialog: title frame changed from `4.PNG` to `5.PNG`; cancel restored focus to `打开 WindowDialog`.
+- Dialog drag: the standard window moved by `120 × 66 px`; the complex window moved by
+  `-100 × 39 px`, while both title center deltas remained `0 px`.
+- Dialog responsive boundary: at 390 px, reopening reset the desktop offset and dragging to the
+  upper-left stopped at the 8 px viewport margin.
+- TreeSelect parent toggle: collapsing and reopening `所有稀有度` preserved the `稀有` leaf value;
+  the parent never received `data-selected`.
+- TreeSelect keyboard: ArrowDown moved focus to `稀有` with a solid 1 px blue outline at -2 px
+  offset, without applying the hover brightness filter.
+- TreeSelect responsive boundary: at 390 px the 319 px popup remained between x=30 and x=349,
+  rendered all nine rows, and retained the selected leaf.
 
 ## Comparison history
 
 - P1: NumberField step affordances were too small and FastStep was missing. Fixed with source-sized arrows and `+10`/`-10` controls.
 - P1: Tabs used a trigger-local pseudo marker and could not reproduce source movement. Fixed with a list-owned marker driven by active Reka tab geometry.
 - P1: Dialog titlebar had a static gradient only. Fixed with the exact focused 45-frame animation.
+- P1: Dialog had no draggable window behavior and long header descriptions could offset the title.
+  Fixed with a bounded Pointer Events drag model, open/resize recentering, and title-only centered
+  header composition.
+- P1: TreeSelect inherited native `ul` margin and padding, so rows were inset and narrowed; Portal
+  content also lost scoped rarity colors, and parent clicks replaced the selected leaf. Fixed with
+  a reset tree root, global rarity semantics, selected-path expansion, and prevented parent select
+  events while retaining Reka expansion.
+- P2: Select, TreeSelect and Autocomplete imported the shared arrow PNG even though the Design
+  control anatomy is CSS-rendered. Replaced all three with one theme-aware CSS indicator contract;
+  retained raster assets only where the source treats them as game artwork.
 - P2: Button showcase omitted source state rows. Fixed with the complete three-row state matrix.
 - P2: shadcn-like radii, generic focus rings, menu surface, and tooltip transitions drifted from DNF styling. Replaced with source-specific square surfaces and state treatments.
 - P2: layout relied on fixed page spacing. Replaced page-level spacing and grids with fluid/container-responsive rules while preserving atomic raster dimensions.
@@ -51,6 +78,10 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 ## Remaining intentional deviations
 
 - The catalog header includes theme switching and a component index that are not present on Design board 2.
-- Components not yet migrated (CommandInput, TreeSelect, Cascader, navigation, ScrollArea, and complex product dialogs) are out of this comparison and must be covered in later migration batches.
+- The cited full-page 1920 px comparison predates Cascader, Pagination and Popover. TreeSelect has
+  since received a focused Design/source-CSS comparison and browser verification; the other three
+  still require refreshed design-side screenshots before claiming pixel-level comparison evidence.
+- SearchTree/CommandInput and domain-specific complex product dialogs remain outside this comparison.
+- Navigation and ScrollArea are migrated; business call-site replacement remains a separate phase.
 
 final result: passed