feat(ui): add shared component layer (stat-card/pill/tag/toolbar/bar-list) + define missing button variants (rant 2026-09-11, PR3)

[argszero]

Summary

PR3 of the front-end adaptation to the new high-fidelity prototype — the shared component layer: the prototype's widget vocabulary (stat-card / pill / tag / toolbar / search / bar-list / empty / trend / split …) is now real CSS in the live stylesheet, and the DOM producers emit those class names.

Rant addressed (verbatim quote of the relevant section):

【六、建议实施顺序（分批 PR，避免一次巨型改动不可控）】

• PR3：共享组件层（stat-card / pill / tag / trend / bar-list / toolbar / search / empty）

2. 统一组件词表（新原型定义，全站复用）

• 按钮：.btn-primary / .btn-secondary / .btn-ghost / .btn-danger，尺寸 .btn-sm
• 卡片：.stat-card（数值卡：label / value / sub / delta，支持 .accent 变体）
• 状态：.pill（.pill-ok / .pill-warn / .pill-danger / .pill-muted / .pill-accent）
• 标签：.tag（中性标签）
• 趋势：.trend（.up / .down）
• 条状图：.bar-list > .bar-row > .bar-top + .bar-track > .bar-fill
• 工具栏：.toolbar（左输入 + 右操作）
• 搜索：.search（.input + .search-clear）
• 空态：.empty（icon + text + 可选 action）

Rant timestamp: 2026-09-11T16:23:43.625143+08:00 (project aitokenpool).

Changes

Two button variants that markup already used but never had styles

.btn-secondary and .btn-sm are referenced from ui/index.html and ui/js/app.js, but the stylesheet never declared them — those buttons were silently rendering with no variant styling at all. They are now defined (secondary = soft surface + border, sm = compact padding/font, composable with any variant). This is a real defect fix, not just a rename.

Component layer added to ui/css/style.css

Migrated from the prototype stylesheet: stat-card (with delta / accent / unit variants), pill + pill-ok / pill-warn / pill-danger / pill-muted / pill-accent, tag (+ tag-accent), trend (+ up / down), bar-list / bar-row / bar-top / bar-track / bar-fill, toolbar, search (+ search-clear), empty, card-sub, split (+ split-1fr / split-1.6fr), spread, legend, check-line.

Everything is expressed with the OKLCH design tokens landed in PR1 (--accent, --ok-soft, --fg-soft, --text-mute …), so the whole layer themes correctly in dark and light without per-theme overrides.

One vocabulary across producers

The prototype names are now the only names the producers use:

old	new	sites
search-box	search	5 in index.html, 2 in app.js (wireSearch / resetSearch closest-lookups)
stat	stat-card	stat() helper in app.js (feeds all five stat-grids)
badge ok/warn/danger/dim/accent	pill pill-ok/pill-warn/pill-danger/pill-muted/pill-accent	badge() helper + marketplace table + transactions type/status + API-key status + member role + model vision + department quota + ops status
badge (neutral)	tag / tag-accent	marketplace multi marker and peak-price marker
bar-label + .bar > i	bar-top + bar-track > bar-fill	barRow() in app.js (admin usage by model / member / department)

.badge is retained as a compatibility alias (with its .ok / .warn / .danger / .accent / .dim modifiers) so any out-of-tree markup or saved snippet keeps working; the semantic colour dots are unchanged.

The duplicated .toolbar .search / .search rule pair is consolidated, and the responsive section was updated for the renamed selectors.

Coverage

Prototype component coverage is now 48/48 — every widget class the prototype defines has a live rule.

Verification

• cargo test — 148/148 passed
• cargo fmt --check / cargo clippy --all-targets -- -D warnings — clean
• node --check on all four ui/js/*.js — OK
• i18n parity: 706 zh / 706 en keys, no divergence in either direction (this PR needs no new keys — all renamed classes are structural, not textual)
• CSS integrity: balanced braces, 0 undefined var() references
• No orphaned producers or rules for the old names (.search-box, .stat, .bar-label, .bar > i all gone from ui/)
• Rendered headless in Chrome and visually inspected: a component gallery page exercising all 48 widgets in both dark and light themes, plus the live app shell — no layout regressions, all variants render with the intended tokens

Remaining rant work

PR4 dashboard/marketplace/sharing · PR5 wallet/transactions · PR6 settings/admin/ops.