update

frontend-ui/design-qa.md

@@ -8,6 +8,16 @@
 - Density normalization: devicePixelRatio 1; no resampling required
 - State: default catalog with Button state matrix; interactive Dialog state captured separately at `catalog-audit-dialog-animated.png`
 
+## Calculator workbench QA (2026-08-19)
+
+- Design reference: `/Users/xigua/.codex/visualizations/2026/08/19/01a01882-9a2a-7d63-ade8-34a8104c8a6d/calculator-workbench-concept.html`.
+- Equipment evidence: `frontend-ui-implemented-equipment-1440.png`; the 1440 px workspace keeps the equipment dictionary, character overview and damage table visible without document-level horizontal overflow.
+- Skill evidence: `frontend-ui-implemented-skill-detail-1440.png`; the 778 px configuration rail resolves to a 556 px skill-tree panel and a 210 px resident detail panel, while the 642 px result rail remains independently readable. The standard tree no longer creates a horizontal scrollbar at 1440 px.
+- Forge evidence: `frontend-ui-implemented-forge-1440.png`; the existing forge editors remain the source of truth and the new read-only summary rail does not mutate calculation data. Multi-control Sundry rows span the editor width and no longer overflow horizontally.
+- Special-job evidence: `frontend-ui-implemented-creator-skill-1440.png` and `frontend-ui-implemented-dark-knight-skill-1440.png`. Creator keeps its original coordinate-based skill-tree structure and extra awakening; Dark Knight keeps its coordinate-based tree plus six shortcuts and six five-stage combo columns. The skill picker is captured at `frontend-ui-implemented-dark-knight-picker-1440.png` and remains inside the 210 px context rail.
+- Responsive evidence: document overflow measured 0 px at 1440, 1280 and 390 widths. At 1280 the standard skill tree uses an intentional internal horizontal scroll surface (528 px content in a 471 px viewport); at 390 the context panel is hidden, both main rails measure 371 px, and document width remains 390 px.
+- Compact collapsibles (2026-08-19): equipment catalog groups and equipment detail sections now use the shared Reka-based DataSection at a measured 24 px header height. Equipment groups collapse independently while retaining the Forge-style state label. Skill-detail sections use the same compact anatomy with the 13 px indicator on the right and no expanded/collapsed copy; `基本信息` was collapsed independently without hiding `技能描述` or `技能属性`. Browser evidence is captured at `frontend-ui-compact-collapsibles-1440.png`.
+
 ## Full-view comparison
 
 The implementation keeps the source board's full-width dark surface, 46 px panel headings, brass dividers, DCalc typography, square corners, compact 30 px controls, and dense state matrices. The catalog intentionally adds a component index, theme controls, and implementation-specific copy; these are catalog navigation rather than component anatomy changes.
@@ -16,7 +26,12 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 
 - Button: three five-column state rows now match the source's Rest, Hover, Pressed, Disabled, and tone-family organization. Panel height is 281.5 px versus the 292 px source module target; the difference is the catalog's smaller bottom spacing and is visually non-material.
 - 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.
+- Tabs: the current compact-density implementation uses a 32 px list, 24 px triggers, 14 px text,
+  glow layers, divider line, and an animated line marker without a downward triangle by default.
+  The arrow marker remains available only as an explicit compatibility variant. Each list sizes
+  itself from its longest label and gives every trigger the same width; marker movement still follows
+  Reka selection state and respects reduced motion. The cited full-page image predates this compact-density
+  refresh.
 - 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
@@ -39,6 +54,12 @@ The implementation keeps the source board's full-width dark surface, 46 px panel
 
 - NumberField fast step: 1 → 11.
 - Tabs: line marker moved to `来源`; selected state became active.
+- Tabs compact refresh (2026-08-19): the variable-label catalog group measured 4 × 68 px inside a
+  284 px list instead of filling its 1155 px parent; the line-marker group measured 3 × 44 px inside
+  144 px. At 390 px both groups retained equal item widths, 32/24 px heights and zero document-level
+  horizontal overflow. The character navigation measured 3 × 68 px inside a 216 px list. DCalc and
+  Midnight themes retained the same geometry. The default marker now uses the line treatment, so
+  business tabs no longer render a downward triangle unless a caller explicitly requests `arrow`.
 - Checkbox: unchecked → checked.
 - Switch: checked → unchecked.
 - Rating: 1 → 3.