@keyfunc/keybricks-ds 2.1.1 → 2.4.0

package/DEPLOY.md

@@ -55,11 +55,11 @@ deploys the documentation site. Watch it under *Build → Pipelines*.
 **5. Cut the first release.**
 
 ```bash
-git tag v2.1.1 && git push --tags
+git tag v2.4.0 && git push --tags
 ```
 
 That tag runs `generated:check` → `version:check` → `npm publish`. Confirm under *Deploy →
-Package Registry*: `@keyfunc/keybricks-ds` 2.1.1.
+Package Registry*: `@keyfunc/keybricks-ds` 2.4.0.
 
 **6. Hand developers two things:** the Pages URL, and the `.npmrc` snippet in §4 below.
 
@@ -96,7 +96,7 @@ Published (`files` in `package.json`): `components/`, `tokens/`, `assets/`, `_sc
 > that mode — Vue apps on a git dependency should deep-import
 > `@keyfunc/keybricks-ds/components/<group>/<Name>.vue`, which is the recommended path anyway.
 
-Not published: `guidelines/`, `ui_kits/`, `templates/`, `index.html`, `gallery.html`,
+Not published: `guidelines/`, `index.html`, `gallery.html`,
 `_ds_bundle.js`. Those are the documentation site — they go to Pages, not into every
 `node_modules`.
 
@@ -112,7 +112,7 @@ import tokens from '@keyfunc/keybricks-ds/tokens.json'                 // cross-
 ```
 
 Deep imports are the better default in Vue and in any app that cares about tree-shaking —
-a barrel of 122 exports asks the bundler to prove each one is unused.
+a barrel of 129 exports asks the bundler to prove each one is unused.
 
 ## 3. Publishing (maintainers)
 
@@ -130,6 +130,12 @@ git push && git push --tags
 `.gitlab-ci.yml` then runs: `generated:check` → `version:check` (tag must equal
 `package.json` version) → `npm publish` → `pages`.
 
+**Changelog.** Every release gets an entry at the top of `changelog.js` (version, ISO date, and
+items tagged `new` / `improved` / `fixed` / `breaking` / `removed`, each in English, Chinese and
+Japanese). The documentation site renders it as the *Changelog* section under Overview. While a
+version is still being built its entry carries `status: "unreleased"`; on release, drop the status
+and set the date. Migration details stay in `INTEGRATION.md`; the changelog is the short summary.
+
 **Versioning policy.** A token's *value* changing is a minor; a token being *renamed or
 removed* is a major, because consumer code references `var(--name)` directly. Adding a
 component or a prop is a minor. Changing a component's default appearance is a major —
@@ -156,7 +162,7 @@ GitLab injects `CI_JOB_TOKEN` — use that instead and no secret is stored anywh
 **Install — straight from git** (no registry, no publish; works today)
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.1.1"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.0"
 ```
 
 Because the package has no build step, a git dependency needs no `prepare` script — npm
@@ -202,3 +208,12 @@ consuming app to fail CI on the two rules that break theming:
 
 Both are the same rule stated twice: components read the semantic layer, and only the
 semantic layer. That is what makes dark mode cost nothing.
+
+## Runtime checks
+
+`_tests/` holds browser pages that exercise the real components: `react-runtime.html` (the compiled
+bundle), `table-selection.html` (Table loaded from source: checkbox spacing at every width, code chips, two-line rows, sorting), `vue-runtime.html` (the `.vue` files, loaded with vue3-sfc-loader), `cards-interaction*.html`
+(clicks through the documentation demos) and `icon-rules.html` (the Keybricks glyphs against the drawing rules). Serve the repo root (`npx serve .`), open a page and read the
+console — every line starts with PASS or FAIL. Run them after changing a component in either framework.
+`measure-cards.html` is a tool, not a test: it measures each documentation page at its card width so the
+`viewport` sizes in the cards, `site-nav.js` and `gallery.html` can be kept in step.

package/DESIGN.md

@@ -84,7 +84,7 @@ Never put `--success` (the solid) behind text — use the `-bg` / `-text` pair.
 Series walk `--series-1…10` in order; signed values are ALWAYS `--chart-pos` / `--chart-neg`
 (diverging bars, waterfall bridges, deltas, auto sparklines); totals and combo overlay lines are
 `--chart-total`; guides are dashed `--chart-guide`. Lines are straight or monotone-cubic — never
-a spline that overshoots a real value. Numbers are `--font-mono`, compact-formatted. Every chart
+a spline that overshoots a real value. Numbers are `--font-sans` with tabular figures, compact-formatted. Every chart
 answers a hover at every size: a tile-tier chart drops its axes and legend, never its tooltip.
 Geography is data, not a drawing — country outlines come from Natural Earth via d3-geo.
 3D charts are presentation, not analysis: plain SVG painter’s-algorithm rendering, one upper-left
@@ -99,7 +99,7 @@ feedback colors mean **severity**. Do not mix the two vocabularies.
 
 ## Typography
 
-`--font-sans` is Inter. `--font-mono` is Menlo. There is no third family. Under
+`--font-sans` is Inter. `--font-mono` is Menlo, and it is for code only: code blocks, logs, inline code in the docs, and config codes (`FIN_CURRENCY_DEFAULT`), which render as a code chip — Menlo at `--text-code` (12px; 11px in sm; Latin, so not bumped in CJK) on `--bg-inset` with a hairline border (`code: true` on a Table column). Everything else in the interface — IDs, amounts, chart numbers, keyboard keys — is `--font-sans`; numbers that must line up add `font-variant-numeric: tabular-nums`. There is no third family. Under
 `lang="zh" | "ja" | "ko"` the sans stack continues into the system CJK face (PingFang SC /
 Hiragino / Apple SD Gothic Neo on macOS, Microsoft YaHei / Yu Gothic UI / Malgun Gothic on
 Windows, Noto Sans CJK elsewhere); Latin glyphs stay Inter.
@@ -138,19 +138,144 @@ and menu row is the tier's control text; a `Badge` or `Tag` is its own small obj
 exception. In content, a secondary annotation (a timestamp beside a name, a count beside a label)
 may be `--text-xs`. Never put a 14px label and a 12px control on the same baseline.
 
+### Count badges on tabs and segments
+
+A `Tabs`, `PanelTabs` or `PillTabs` tab, or a `SegmentedControl` option, may carry `count` (`{ label: "Submission", count: 3 }`).
+It renders 6px right of the label as a small full-radius badge: `--count-h` tall (sm 16 · md 18 · lg 20),
+6px sides, **12px tabular figures in the UI font** (digits are Latin, so the size is not bumped in CJK).
+The fill is the alpha wash `--neutral-alpha-8` — it darkens whatever it sits on by the same step, so the
+badge reads on a white tab, on the #f5f5f5 active pill and in dark mode alike (a solid `--bg-hover` vanished on
+the active pill). Selected is told from unselected by the text alone: `--text-heading` vs `--text-body` —
+never `--text-secondary`, which fails 4.5:1 on a grey fill at 12px. Under the blue active underline tab the
+badge stays neutral, so the blue is only the tab's own label and line. A count of 0 or none draws nothing; `showZero` (on the control, or per option) draws a muted
+0 so a filter set keeps its shape. The selected value is still matched by label — a count is decoration,
+never identity. Counts never appear in `iconOnly` segments.
+
+### App chrome
+
+The shell is `Sidebar` + optional `SidePanel` + `TopBar`, all 56px at the top edge. The rail is 240px (64px
+collapsed), with a 56px brand head without a rule, a 2px-gap list of 36px items and a pinned footer
+(Management, Knowledge Base) above a version line. Items that open a panel (`trailing: true`) carry a
+14px chevron; while a panel is open the rail collapses to its 64px icon form and the panel docks beside
+it at 240px, in the **same tone**. Tones: `recessed` (default — grey rail, the active item is a white tile
+with a hairline ring), `flush` (white rail), `contrast` (rail scoped to the dark theme) and `custom`
+(dark scope on one of ten `SIDEBAR_COLORS`). Pick one tone per product and pass it to both
+`Sidebar` and `SidePanel`. The top bar holds the bare search on the left and, on the right, the dark
+AI Assistant button, notifications, help and the user trigger, which opens `UserMenu` (identity,
+appearance switch, rows).
+
+### Menus: action vs single choice
+
+`ContextMenu` and `Menu` serve two kinds of list, and the row spacing says which one it is.
+
+- **Action menu** (Edit · Duplicate · Delete): no item is selected. Rows are flush (`gap: 0`); only the
+  hovered row is filled.
+- **Single-choice menu** (section switcher, language picker): pass `selected: true` on the current item. It
+  gets a `--bg-hover` fill and `--weight-medium` `--text-heading` — **no checkmark**, the fill is the
+  mark. Rows are announced as `menuitemradio` with `aria-checked`. As soon as any item is selected the
+  rows are spaced **2px apart** (`gap: 2px`), the same rhythm as `Sidebar`, `Tree` and `DocTree`, so a
+  hovered row's fill never runs into the selected row's fill.
+
+Dividers keep their 4px top and bottom margin in both kinds, independent of the row gap. Don't mix the
+two: a menu that both switches state and runs actions puts the actions after a divider, and the choice
+rows still carry `selected`.
+
 ### Table headers
 
 A header cell is the **same size as its data cells**, weight 600, `--text-secondary`, sentence
 case, no letter-spacing. The header is set apart by `--bg-table-header`, never by caps or a
-heavier rule. Mono columns (`mono: true`) keep the row's size in `--font-mono` with tabular
-figures — codes and amounts are never a point smaller than the words beside them.
+heavier rule. Amount and ID columns (`mono: true`) keep the row's size, font and colour and add
+only tabular figures; config-code columns (`code: true`) use the code chip — codes and amounts are never a point smaller than the words beside them.
+
+### Sortable headers
+
+Mark a column `sortable: true` and its header gets a sort button: a muted sm `IconButton` at the
+**right end of the header cell** — the same edge as a two-line row's `⋯`, so the two line up. The label
+keeps its alignment (left, or right for number columns, where it sits 4px before the button).
+
+- **Unsorted** — the button appears only while the header is hovered (or holds keyboard focus), icon
+  `arrow-up`. It keeps its space while hidden, so the label never shifts.
+- **Click** cycles ascending (`arrow-up`) → descending (`arrow-down`) → unsorted. The tooltip names the
+  next step: *Sort ascending* · *Sort descending* · *Clear sorting*.
+- **Sorted** — the button stays without hover and the label turns `--text-heading`; the header carries
+  `aria-sort`.
+- **One column at a time.** Clicking another column's button starts it at ascending and clears the first.
+- A long label truncates; the button never shrinks. With `resizable` the button sits inside the cell
+  padding, left of the divider, so the two never overlap.
+- Action columns (row ⋯, checkboxes) are never `sortable`, so they show no button.
+
+API: `sort` / `onSortChange` control it (`{ key, direction: "asc" | "desc" }` or `null`; Vue
+`v-model:sort`, `@sort-change`); `defaultSort` seeds it uncontrolled. The table reorders rows itself —
+numbers (commas allowed) numerically, text by locale with numeric collation, empty values last — unless
+the column passes `compare(a, b, rowA, rowB)` or the table sets `manualSort` (rows arrive sorted from
+the server). Selection indices and `onRowMore` always refer to the original `rows` order.
+
+### Two-line name rows
+
+The name column of a document list (folders, models, sheets) is a **two-line title cell**:
+`columns: [{ key: "name", label: "Name", width: 300, twoLine: true }, …]`. Left to right:
+
+1. an `IconTile kind="row"` tinted by the row's `hue` (`source` · `join` · `transform` · `merge` ·
+   `output`; `neutral` is the grey tile for folders and containers);
+2. two lines of text — the **title** in the tier's control text, `--text-heading`, regular weight, and the
+   **description** in `--text-xs`, `--text-secondary`. Each is one line and truncates with an ellipsis. Give the column a `width`; in a tight table it
+   shrinks to `minWidth` (default 180px) before the other columns give way;
+3. an sm `⋯` `IconButton` on the right (`onRowMore(row, index, event)`; Vue `@row-more`; `more: false` hides it).
+
+An optional 14px **mark** sits right after the title: `mark: "favorite"` is a filled star in `--warning`;
+`{ icon, color, label }` draws any 14px outline icon. Fields default to the row keys `icon`, `hue`,
+`description`, `mark`; pass `twoLine: { icon, hue, description, mark }` with field names or
+`(row, index) => value` accessors to read them from elsewhere.
+
+The header stays the tier's bar height; only body rows grow. Every other cell stays vertically centred
+and unchanged. All measures are `--title-cell-*` tier tokens:
+
+| | sm | md | lg |
+| --- | --- | --- | --- |
+| Icon tile (`--title-cell-tile`, `-tile-r`) | 28 · r8 | **32 · r8** | 40 · r10 |
+| Icon in the tile (`--title-cell-icon`) | 14 | 16 | 20 |
+| Tile → text (`--title-cell-tile-gap`) | 8 | 12 | 12 |
+| Title | 12 / 16 (13 / 18 CJK) | 14 / 20 | 14 / 20 |
+| Description | 12 / 16 (13 / 18 CJK) | 12 / 16 (13 / 18 CJK) | 12 / 16 (13 / 18 CJK) |
+| Title → description (`--title-cell-gap`) | 2 | 2 | 4 |
+| Row padding top and bottom (`--title-cell-py`) | 8 | 10 | 14 |
+| **Row height** (Latin / CJK) | **50 / 54** | **58 / 60** | **68 / 70** |
+| Header | 36 | 40 | 48 |
+| `⋯` button | sm 28 | sm 28 | sm 28 |
+
+**Opening a row.** Pass `onRowOpen(row, index, event)` (Vue `@row-open`) and the icon tile and the title open
+the row: both get the hand cursor, and the title is a keyboard target (Enter / Space). The ⋯ button and the
+expand arrow never open the row. Without the callback nothing in the cell looks clickable.
+
+**Tree rows.** Set `tree` on the table and nest rows through `children` — or set `hasChildren: true` on a
+row whose children you load when it opens. The two-line column then indents **24px per level** and reserves a
+**20px arrow slot + 4px** before the tile, so a child's arrow sits exactly under its parent's tile and leaf
+rows line up with folders. The arrow is a muted `chevron-right` (tier icon size) that turns down when
+open, with the `--overlay-hover` wash on hover; rows carry `aria-level` and `aria-expanded`. Expansion
+is `expandedKeys` / `onExpandChange(row, expanded, keys)` (Vue `v-model:expandedKeys`, `@expand-change`),
+or `defaultExpandedKeys` uncontrolled; `rowKey` names the key field (default `id`). Sorting reorders
+siblings only — children stay under their parent. Every index the table reports (selection, `onRowMore`,
+`onRowOpen`) is the row's depth-first position over all rows, expanded or not, so it never moves when the
+user sorts or expands; for a flat table that is simply its position in `rows`.
+
+**Labels.** The table draws six words itself — the sort tooltips, ⋯, and the arrow's expand / collapse.
+`labels: { sortAsc, sortDesc, sortClear, more, expand, collapse }` translates them; missing keys fall
+back to English. Pass them in the product's language — a Chinese table with English tooltips is a bug.
+
+In sm the title and description are the same size, so the description is told apart by colour alone —
+use sm two-line rows only where the list is dense and short labels are expected.
 
 ### Chinese, Japanese and Korean
 
 Han, kana and Hangul have no capitals and no italics, so emphasis is weight. Under
-`:lang(zh|ja|ko)` the tokens change for you: `--weight-medium` becomes **600** (Microsoft
-YaHei, Meiryo, Yu Gothic UI and Malgun Gothic ship no 500 face, so 500 silently renders as
-Regular on Windows) and every `--tracking-*` is **0**. CJK text is never smaller than the Latin
+`:lang(zh|ja|ko)` the tokens change for you: `--weight-medium` and `--weight-semibold` both become
+**500** — square glyphs carry more strokes, so PingFang 600 next to Inter 500 reads a full step bolder —
+and every `--tracking-*` is **0**. (Microsoft YaHei, Meiryo, Yu Gothic UI and Malgun Gothic ship no 500
+face, so on Windows these render Regular; size, colour and the header fill keep the hierarchy.) Below 14px CJK is one step larger than
+Latin — `--text-xs` 13px (leading 18) and `--text-2xs` 12px — so no square glyph renders under
+12px; chart numerals read `--text-2xs-mono` and stay 11px. Text sized from geometry (switch inside text, avatar initials) is floored at `--text-glyph-min`: 11px, 12px in CJK. Inside an sm region `--weight-medium`
+is 400 for CJK, because bold strokes merge at 13px. Simplified and Traditional Chinese, Japanese
+and Korean get the same rule. CJK text is never smaller than the Latin
 text beside it, never letter-spaced and never transformed; a CJK table header or section label
 is emphasised by weight alone. Set `lang` on `<html>`, or on the region when one panel switches
 language — every component re-reads `--font-sans`, so a per-region switch works.
@@ -175,18 +300,19 @@ so two controls that share a row can never disagree. `md` is the default on `:ro
 
 | Token | sm | md | lg | Used by |
 | --- | --- | --- | --- | --- |
-| `--control-h` | 24 | **32** | 36 | buttons, inputs, selects, search, steppers, segmented controls, chips, pagination items, menu rows |
-| `--control-text` | 12 | **14** | 14 | text in controls and their labels, table cells |
+| `--control-h` | 28 | **32** | 40 | buttons, inputs, selects, search, steppers, segmented controls, chips, pagination items, menu rows |
+| `--control-text` | 12 (13 CJK) | **14** | 14 | text in controls and their labels, table cells |
 | `--control-icon` | 14 | 16 | 16 | icon inside a control |
 | `--control-px` | 8 | 12 | 16 | horizontal padding of a text control or button |
 | `--control-gap` | 8 | 8 | 8 | inside one group: label → its control, button → button |
 | `--group-gap` | 12 | 16 | 24 | between groups in one bar: field → next field |
-| `--bar-h` | 32 | 40 | 44 | toolbar, filter bar, tab bar, table row, list row |
-| `--bar-card-h` | 40 | 48 | 52 | a bar inside a bordered card (table toolbar, pagination) |
+| `--bar-h` | 36 | 40 | 48 | toolbar, filter bar, tab bar, table row, list row |
+| `--bar-card-h` | 44 | 48 | 56 | a bar inside a bordered card (table toolbar, pagination) |
 | `--edge-pad` | 12 | 16 | 16 | card edge → first control or cell |
 | `--cell-px` | 8 | 12 | 16 | horizontal padding of a table cell |
 | `--check-size` | 14 | 16 | 16 | checkbox and radio box |
 | `--tag-h` | 20 | 24 | 28 | `Tag` |
+| `--count-h` | 16 | 18 | 20 | count badge beside a segment / pill label |
 | `--switch-w` × `--switch-h` | 28 × 16 | 36 × 20 | 44 × 24 | `Switch` track |
 
 Where each tier belongs:
@@ -198,18 +324,18 @@ Where each tier belongs:
 
 Rules:
 
-- **One tier per row.** Never a 24px icon button beside a 32px input.
+- **One tier per row.** Never a 28px icon button beside a 32px input.
 - **Nothing interactive is smaller than 24px.** The former `xs` sizes and `dense` props map to `sm`.
 - A per-control `size` prop only stamps `data-size` on that control. Use it for a control that
   stands alone in its band — never to "fix" one control inside a bar.
 - Text inside a control is `--control-text`, not `--text-xs` because it looks tidier.
-- `--h-button` and `--h-input` are aliases of `--control-h`; `--h-button-sm` is 24px. Prefer the
+- `--h-button` and `--h-input` are aliases of `--control-h`; `--h-button-sm` is 28px. Prefer the
   tier tokens in new code.
 
 ### Button emphasis — pick the variant, never the size
 
 The tier says how dense a region is; the **variant** says how important an action is. Never
-shrink a button to make it feel lighter: a 24px button beside 32px controls and 14px text reads
+shrink a button to make it feel lighter: a 28px button beside 32px controls and 14px text reads
 as a mistake on a calm page, and the tier rule above forbids it anyway. Reach for a quieter
 variant instead.
 
@@ -267,7 +393,9 @@ Nothing bounces. Nothing slides more than a few pixels. Keyframes available:
 
 - **Hover** — every pointer target answers it, one step at a time:
   filled and boxed buttons, menu rows, list rows, nav and tree items, segments → one surface step
-  (`--bg-hover`, `--action-primary-hover`, `--soft-hover`); field boxes (inputs, selects, date,
+  (`--bg-hover`, `--action-primary-hover`, `--soft-hover`); a borderless `IconButton` → the alpha
+  overlay `--overlay-hover` (press `--overlay-press`), because it sits on white rows, grey table headers
+  and grey bars alike and a solid `--bg-hover` disappears on `--bg-table-header`; field boxes (inputs, selects, date,
   combobox, multi-select, search, stepper) → border `--border-control` to `--border-strong`;
   text-only controls (inactive tabs, legend items, clear ×, copy) → ink to `--text-heading`;
   table body rows → `--bg-inset`; checkbox and radio rings → `--text-muted`; switch tracks →
@@ -320,22 +448,22 @@ The list that prevents the most rework. These are absolute.
 - **Do not mix size tiers in one row.** The region declares `data-size`; the controls inherit. A
   `size` prop on one control inside a bar is a bug, not a fix.
 - **Do not shrink, letter-space or uppercase Chinese, Japanese or Korean text.** Under `lang`
-  the emphasis weight is 600 and tracking is 0 — that is the whole CJK rule.
+  the emphasis and heading weight is 500 (medium 400 at sm), tracking is 0, and sizes under 14px step up by one — that is the whole CJK rule.
 - **Do not put dark text on a saturated fill.** `--on-accent` (white) is the only option,
   in both themes — this is why the dark-mode primary button keeps white text.
 - **Do not scale or shift elements on press.** Press is a color step only.
 - **Do not show a drop indicator where the drop is impossible.** No half-row boxes on a
   container, no insert rules on a node that can't take children.
 - **Do not build a new primitive when one exists.** Check the component index in
-  `INTEGRATION.md` first — there are 117.
-- **Do not use emoji as icons.** Use `<Icon name="..." />` (362 glyphs) or `<Unicon>` (1,206).
+  `INTEGRATION.md` first — there are 120.
+- **Do not use emoji as icons.** Use `<Icon name="..." />` (330 glyphs) or `<Unicon>` (1,206).
 - **Do not invent new component variants.** If `Button` lacks the variant you want, that is a
   design-system request, not a local override.
 - **Do not stack two primary buttons.** One primary action per view; everything else is
   `outline`, `ghost`, or `text`.
 - **Do not use full-uppercase text.** Table headers and section labels are sentence case, weight
-  600, tracking 0 — the same size as the text they label. (The 10px eyebrows in this site's own
-  card chrome are documentation furniture, not a component pattern.)
+  600, tracking 0 — the same size as the text they label. (This site's own card labels follow the
+  same rule: 12px, sentence case.)
 - **Do not animate anything longer than 360ms** or with a bounce/elastic easing.
 
 ---

package/INTEGRATION.md

@@ -31,7 +31,7 @@ Not using a registry yet? A git dependency works with no publishing at all — t
 has no build step, so npm can use the checkout as-is:
 
 ```json
-"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.1.1"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.4.0"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -98,7 +98,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 ```
 
 That is the whole integration. The `data-size="lg"` on the form is the size tier — every control
-inside it is 36px tall; leave it off and they are the app default, 32px (see *Size tiers* below).
+inside it is 40px tall; leave it off and they are the app default, 32px (see *Size tiers* below).
 Everything below is reference material.
 
 ---
@@ -136,9 +136,9 @@ properties — `--control-h`, `--control-text`, `--control-icon`, `--control-px`
 A **region** sets them with one attribute:
 
 ```html
-<div data-size="sm">…</div>   <!-- 24px controls · 12px text · 32px rows — dense grids, pipeline nodes -->
+<div data-size="sm">…</div>   <!-- 28px controls · 12px text (13px CJK) · 36px rows — dense grids, pipeline nodes -->
 <div data-size="md">…</div>   <!-- 32px controls · 14px text · 40px rows — the app default (:root) -->
-<div data-size="lg">…</div>   <!-- 36px controls · 14px text · 44px rows — dialogs, short forms -->
+<div data-size="lg">…</div>   <!-- 40px controls · 14px text · 48px rows — dialogs, short forms -->
 ```
 
 Put `data-size` on the toolbar, filter bar, form, table or panel and leave the controls' `size`
@@ -162,7 +162,7 @@ Text, weight and tracking follow the tier through `--control-text` / `--control-
 weight becomes 600 and all tracking is 0 — nothing to configure. `DESIGN.md` has the full token
 table and the rules behind it.
 
-## Component index (117 components)
+## Component index (120 components)
 Import path is `@keyfunc/keybricks-ds/components/<group>/<Name>.jsx` (React) or `.vue` (Vue 3).
 Every component has a sibling `.d.ts` with its full props contract, and each group has a
 `.prompt.md` with usage notes.
@@ -180,8 +180,11 @@ components (`Input.jsx` exports `Input` and `Textarea`; `Badge.jsx` exports `Bad
 cannot export values, so on the Vue side every such secondary is its own file with a default
 export — `Textarea.vue`, `IconTile.vue`, `StatusBadge.vue`, `Tooltip.vue`, `ToastStack.vue`, `Port.vue`, `PortLabel.vue`, `ChartLegend.vue`, `ChartTooltip.vue`, `PlotGrid.vue`, `XLabels.vue`, `ButtonGroup.vue`, `StatCard.vue`, `Toast.vue`,
 `Spinner.vue`, `PageHeading.vue`, and so on — always named exactly as the React export.
-Shared non-component values live in plain modules: `forms/input-base.js` (`inputBase`),
-`pipeline/pipeline-catalog.js` (`PIPELINE_CATALOG`), `pipeline/port-skin.js` (`portSkin`), `px.js` (`px`), `icons/icon-paths.js`.
+Shared non-component values live in plain modules: `navigation/nav-model.js` (`KEYBRICKS_NAV`),
+`navigation/theme-store.js` (`applyStoredTheme`), `pipeline/pipeline-catalog.js` (`PIPELINE_CATALOG`),
+`icons/icon-paths.js`, `icons/feather-paths.js` — all five are also exported from
+`@keyfunc/keybricks-ds/vue` — plus the internal helpers `forms/input-base.js` (`inputBase`),
+`pipeline/port-skin.js` (`portSkin`) and `px.js` (`px`).
 
 ```js
 // React
@@ -235,7 +238,9 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | Component | What it's for |
 | --- | --- |
 | `Sidebar` | The app's primary nav: collapsible sections, active state, footer items. `KEYBRICKS_NAV` is the product's real nav tree. |
+| `SidePanel` | 240px panel docked beside the sidebar (Documents, Management), in the rail's tone. |
 | `TopBar` | Global header — search, notifications, theme toggle, avatar. |
+| `UserMenu` | Account menu from the top bar's user trigger: identity, appearance switch, rows. |
 | `PageHeading` | Page title with optional subtitle and right-aligned actions. |
 | `PageToolbar` | Secondary bar under the heading: filters, view toggles, bulk actions. |
 | `Breadcrumb` | Path trail; collapses to an ellipsis dropdown past `maxItems`. |
@@ -246,9 +251,10 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 ### `tabs/` — switching views
 | Component | What it's for |
 | --- | --- |
-| `Tabs` | Page-level underline tabs. |
-| `PanelTabs` | Compact tabs inside a detail panel or drawer. |
-| `PillTabs` | Filter/status tabs as pills. |
+| `Tabs` | Page-level underline tabs; `{ label, count }` adds a count badge. |
+| `PanelTabs` | Compact tabs inside a detail panel or drawer; `{ label, count }` adds a count badge. |
+| `PillTabs` | Filter/status tabs as pills; `{ label, count }` adds a count badge. |
+| `CountBadge` | The count badge beside a segment / pill label (`--count-h`, 12px tabular figures); used by `SegmentedControl` and `PillTabs`, exported for custom filter bars. |
 | `SegmentedControl` | Switches views of the same data, applies instantly — not a saved form value (`RadioGroup`) and not page navigation (`Tabs`). Reads the size tier, `icon` per option, `iconOnly`, per-option or whole-control `disabled`, `fullWidth`. ← → keyboard. |
 | `ViewToggle` | List/grid icon toggle. |
 
@@ -287,7 +293,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 ### `icons/` — iconography
 | Component | What it's for |
 | --- | --- |
-| `Icon` | 362 stroke glyphs (the product's own set plus all of Feather). `<Icon name="download" size={16} />` |
+| `Icon` | 330 stroke glyphs: the 83-glyph core set plus all of Feather (on a shared name the core glyph wins). `<Icon name="download" size={16} />` |
 | `Unicon` | 1,206 additional Unicons line glyphs, loaded from CDN. Use when `Icon` has no match. |
 
 ### `pipeline/` — the data-pipeline editor
@@ -487,7 +493,7 @@ a migration note in the release. Token renames are major because your own code r
 Pin a minor range and update deliberately:
 
 ```json
-"@keyfunc/keybricks-ds": "~2.1.1"
+"@keyfunc/keybricks-ds": "~2.4.0"
 ```
 
 ### Migrating from 1.x to 2.0
@@ -513,6 +519,85 @@ Pin a minor range and update deliberately:
 - **Tokens outside CSS.** `tokens.json` / `tokens.js` / `tokens.d.ts` gained the tier tokens
   (`--control-*`, `--bar-h`, `--group-gap`, …) — 352 light tokens in all (2.0.2 adds `--danger-soft-hover`).
 
+### 2.4.0
+
+- **App Chrome matches the product.** `Sidebar`: 56px brand head without a rule, `--text-md` brand, a 2px-gap list, `trailing: true` items with a chevron (they open a side panel), Collapse / Expand item (chevron-left / panel-left), pinned footer and an optional `version` line. New `tone` prop — `"recessed"` (grey rail, active item a white tile with a hairline ring; **the new default**), `"flush"` (the old white look), `"contrast"` (dark-scoped rail), `"custom"` + `color` (`SIDEBAR_COLORS` or any hex). `KEYBRICKS_NAV` is the product's nav (Home … Task Execution); new `KEYBRICKS_NAV_FOOTER` (Management, Knowledge Base) is the default footer (was Help / Settings / Dark Mode) and `KEYBRICKS_MGMT` holds the Management panel groups. To keep the old look pass `tone="flush"` and your own `footerItems`.
+- **Data-source logos:** 17 logo images (databases, SAP, protocols, file types) in `assets/logos/datasource/<id>.png`, 500×500 PNG, listed on the new *Data Source Logos* icons page. They are plain images, not `Icon` glyphs — use them with `<img>`.
+- **New `SidePanel`**: the 240px panel docked beside the sidebar (Documents, Management), same tone as the rail, opens from 0 width with a fade; 56px header with title, actions and close.
+- **`TopBar`**: dark **AI Assistant** (`ai` icon) first, then notifications and help `IconButton`s, then a user trigger (`user={{ name, email }}`) that opens a menu. The bell is no longer `lg`. **New `UserMenu`**: avatar, name, email, an Appearance row (icon-only light / dark / system) and menu rows.
+
+- **`ContextMenu` / `Menu` single-choice state.** Items accept `selected: true` (section switcher, language picker): `--bg-hover` fill, `--weight-medium` `--text-heading`, no checkmark; rows become `menuitemradio` with `aria-checked`. When any item is selected the rows are spaced 2px apart (as in `Sidebar`, `Tree`, `DocTree`); action menus with nothing selected keep flush rows. Dividers keep 4px above and below.
+
+- **Docs:** new *Icon Usage* page at the top of Icons (monochrome vs coloured glyphs: IconTile hues, Tree/DocTree document hues, status, marks). The documentation site itself now follows the system rules — neutral selected segments, sentence-case labels, sm-tier toolbar controls, 32px Sidebar-spec nav rows.
+### 2.3.2
+
+- **Counts on `Tabs`, `PanelTabs`, `PillTabs` and `SegmentedControl`.** Tabs / options accept `{ label, count?, showZero? }`; a count renders as a `CountBadge` 6px right of the label — `--count-h` tall (new tier token: sm 16 · md 18 · lg 20), 6px sides, full radius, 12px tabular figures; fill `--neutral-alpha-8` on any surface, text `--text-body`, `--text-heading` when selected. 0 or no count hides it; `showZero` (control or option) draws a muted 0. Selection is still matched by label. `CountBadge` is exported (React `Tabs.jsx`, Vue `CountBadge.vue`).
+- Additive only.
+
+### 2.3.1
+
+- **`Table` row open, tree rows and labels.** `onRowOpen(row, index, event)` (Vue `@row-open`) makes the icon tile and title of a two-line cell open the row (hand cursor; Enter / Space on the title). `tree` with nested `children` (or `hasChildren` for lazy rows) indents the two-line column 24px per level with an expand arrow — `expandedKeys` / `defaultExpandedKeys` / `onExpandChange(row, expanded, keys)` (Vue `v-model:expandedKeys`, `@expand-change`), `rowKey` (default `id`); sorting reorders siblings only. `labels: { sortAsc, sortDesc, sortClear, more, expand, collapse }` translates every word the table draws (English by default). Indices reported by selection and callbacks are depth-first over all rows — unchanged for flat tables.
+- Additive only: flat tables, existing props and indices behave exactly as in 2.3.0.
+
+### 2.3.0
+
+- **sm and lg size tiers.** sm controls are **28px** (was 24) with 36px rows and bars (was 32);
+  lg controls are **40px** (was 36) with 48px rows (was 44); md is unchanged. 24px sat at the
+  floor of the industry range and left the segmented control's segments 18px tall; 36 was only
+  4px above md, where Ant Design, Fluent 2, Primer and shadcn all step to 40. sm text stays 12px
+  for Latin. Layouts built on the tier tokens follow automatically; anything you sized by hand to
+  sit beside an sm or lg control should be re-checked.
+- **CJK small sizes are one step larger.** Under `lang="zh" | "ja" | "ko"` (Simplified and
+  Traditional Chinese alike) `--text-xs` / `--text-sm` are 13px with 18px leading and
+  `--text-2xs` is 12px, so no CJK text renders below 12px. 14px and up are unchanged. In sm
+  regions the CJK medium weight is 400. Outside sm, CJK `--weight-medium` and `--weight-semibold` are both 500 (they were 600): at the same number, CJK glyphs read heavier than Latin, so 600 looked a step bolder than English and erased the difference between labels and headers. On Windows (no 500 face in YaHei / Meiryo / Malgun) both render Regular. Chart numerals use the new `--text-2xs-mono`
+  (11px in every language).
+- `Table` selection: the checkbox now sits in the first column's leading space instead of a column of its own. Both sides of the checkbox now equal the edge padding (16px; 12px in sm), so the box sits evenly between the card edge and the first column's text and stays aligned with card titles and toolbars. Before, the gap was 40px and grew with the table width when columns declared widths (up to ~120px). If you styled the old selection cell (`td:first-child` holding only the checkbox), move that styling to the first data cell.
+- **`Table` two-line name rows**: a `twoLine` column renders an `IconTile` (kind "row", tinted by `hue`; `neutral` = grey), a title over a description (each one line, truncated), an optional 14px mark (`"favorite"` = filled star in `--warning`) and a trailing sm `⋯` (`onRowMore(row, index, event)`, Vue `@row-more`). md rows are 58px (sm 50 · lg 68; CJK 54 · 60 · 70); the header keeps the bar height. New tier tokens `--title-cell-py`, `--title-cell-gap`, `--title-cell-tile`, `--title-cell-icon`, `--title-cell-tile-r`, `--title-cell-tile-gap`. `IconTile kind="row"` is now tinted when you pass `hue` (unchanged without it), adds `hue="neutral"` and an `iconStyle` prop.
+- **`Table` sortable headers**: `sortable: true` on a column adds a muted sm sort button at the header cell's right end (in line with a two-line row's `⋯`) — on hover while unsorted (`arrow-up`), kept while sorted (`arrow-up` / `arrow-down`, label `--text-heading`, `aria-sort`). Click cycles ascending → descending → none; one column at a time; tooltips *Sort ascending* / *Sort descending* / *Clear sorting*. New props `sort`, `defaultSort`, `onSortChange` (Vue `v-model:sort`, `@sort-change`), `manualSort`; column `compare`. Selection indices keep referring to the original `rows` order.
+- `IconButton` hover and press are now alpha overlays (`--overlay-hover`, `--overlay-press`) instead of the solid `--bg-hover` / `--bg-press`. On white they are the same colour as before; on a grey surface (table header, toolbar) the hover is now visible instead of matching the background. `--overlay-press` is 12% (was 8%, unused) and the dark theme gets its own overlay values (8% / 16%).
+- **Fix — `Table` `code` columns:** only text and number values get the code chip; an element in the cell (a `Skeleton` while loading, a link) renders as is. Before, a loading row in a code column drew a chip around the skeleton and grew to about 50px.
+- **Two AI glyphs join the core icon set**: `ai` (rounded frame, open at the top-right, with a large and a small four-point star) and `ai-sparkles` (a large and a small four-point star). Both are traced from the reference glyphs and redrawn to the core-set rules: stroke 2 with no fill, integer endpoints, at least 2px clear between separate elements. The core set is 83 glyphs; `Icon` resolves 330 names. Search terms: ai, assistant, copilot, agent, intelligent, generative, sparkles, magic.
+- `Pagination`: page items and prev/next lose their border (GitHub Primer / Atlassian style). The current page takes the neutral selected fill (`--bg-active`, weight 600) instead of the action blue — it is a state, not an action; the others are plain until hovered. Size is unchanged — items stay control-height (32px at md).
+- The monospace font is now for code only (`CodeBlock`, `LogViewer`, code in the docs). `Table`/`SmartTable` `mono` columns, `KeyValue` and `DiffValue` `mono`, `Spreadsheet` numbers and formula bar, `Kbd`, the `Input`/`Textarea` counter, the `Slider` value and every chart number now use `--font-sans` with tabular figures; `mono` columns also take the normal text colour. The `mono` props and the `--text-2xs-mono` token keep their names. Config codes get a new column option, `code: true`: a code chip — Menlo at the new `--text-code` / `--leading-code` (12/18px, 11/16px in sm, not bumped in CJK) on `--bg-inset` with a hairline border. Switch config-code columns from `mono` to `code`.
+- `Table` column separators (the resize handles in the header) are one step darker: new token `--border-split` — `#D4D4D4` light, `#404040` dark (was `--border-control`, #E5E5E5 / #333333). Hover and drag still turn them blue.
+- New tokens: `--text-2xs-mono` and `--text-glyph-min` (11px, 12px in CJK) — the floor for text that is sized from geometry: `Switch` inside/knob text and `Avatar` initials no longer drop to 9–10px. `--h-button-sm` is 28px.
+- Removed the `ui_kits/keybricks-app` product recreation and the `templates/web-app` starter: the
+  production designs now live in their own projects. No component or token is affected.
+- **Fix — React entry:** `applyStoredTheme` was documented but missing from
+  `@keyfunc/keybricks-ds` (the barrel generator skipped lower-case names). It is exported now.
+- **Fix — Vue entry:** `KEYBRICKS_NAV` and `applyStoredTheme` existed for Vue only as comments.
+  They now live in `navigation/nav-model.js` and `navigation/theme-store.js`, which React re-exports
+  and `@keyfunc/keybricks-ds/vue` exports directly, along with `PIPELINE_CATALOG`, `VUE_ICON_PATHS`
+  and `FEATHER_PATHS` — one source for both frameworks.
+- **Fixes — Vue matched to React** (found by a token-by-token and prop-by-prop audit of every
+  React/Vue pair): `Tree` keyboard focus ring uses `--focus-border` (was `--focus-ring`) and now
+  accepts `treeData`, `expandedKeys`, `selectedKeys`, `checkedKeys`; `Switch` accepts
+  `inlinePrompt`; `Timeline` title and meta carry their line-height and tracking (CJK meta now
+  gets its 18px leading); `Spreadsheet` column headers carry `--tracking-xs`; `SmartTable` URL
+  cells use `--link`; `FunnelChart` bands animate width; `WaterfallChart` shows the hover band.
+  `BulletChart` range bands use `--neutral-alpha-12` in both frameworks (theme-aware; was a
+  hard-coded black in Vue and an undefined token in React).
+- Sidebar nav model (`KEYBRICKS_NAV`): Reconciliation uses the `reconciliation` icon and
+  Consolidation the `consolidation` icon; the Management › Reconciliation entry no longer reuses
+  `network`.
+- Component cards share one specimen layout (label column, 12px sentence-case labels) and every
+  size-tier demo shows a Latin row and a CJK row.
+
+### 2.2.0
+
+- **Eleven Keybricks glyphs join the core icon set** — `<Icon name="journal" />` in React and
+  Vue alike. Modules: `reconciliation`, `consolidation`, `journal`, `event`, `view-tree`.
+  Actions: `drilldown`, `add-below`, `copy-data`, `task-execution`, `time-future`,
+  `time-restatement`. Each was checked against the core-set drawing rules, now written down in
+  the Iconography section of `readme.md`; six were redrawn to meet them (paths inside 2–22,
+  integer coordinates, 2px between separate elements, rx 1 on small rects, true circular
+  corners). The core set is now 81 glyphs; with Feather, `Icon` resolves 328 names.
+- Two submitted glyphs were already in the library and were not duplicated: *hierarchy* is
+  `layers` and *change* is Feather's `repeat`. Both words now find them in the icon search.
+- The docs gave the icon total as 362. That counted the 40 names Feather shares with the core
+  set twice; the number of distinct names is now 328.
+
 ### 2.1.1
 
 - **Chart series palette replaced** (`--series-1…8`, light and dark). One lightness band, a chroma
@@ -570,18 +655,6 @@ Pin a minor range and update deliberately:
 
 Release mechanics, the CI pipeline and the Pages site are documented in `DEPLOY.md`.
 
-## Templates
-
-A template is a ready-made screen you copy into a new project as a starting point, rather than a
-component you import. Each lives in `templates/<slug>/`.
-
-| Template | What you get |
-| --- | --- |
-| `templates/web-app/` | The full app shell: sidebar with the real nav model, top bar, page heading, stat tiles and a data table. |
-
-Copy the folder, then edit one line — the `base` in `ds-base.js` — to point at wherever the design
-system sits relative to the copied page.
-
 ## Getting help
 
 - **Documentation site** — the GitLab Pages build: `index.html` for the browsable system

package/SKILL.md

@@ -4,30 +4,30 @@ description: Use this skill to generate well-branded interfaces and assets for K
 user-invocable: true
 ---
 
-Read the README.md file within this skill, and explore the other available files. This skill's documentation is bilingual (English / 中文)。
+Read the readme.md file within this skill, and explore the other available files. This skill's documentation is bilingual (English / 中文)。
 
 Key facts / 关键信息: Keybricks is a near-monochrome, hairline-bordered, 14px-Inter enterprise UI with one action blue (#155dfc, dark mode #1f6feb), five node-category hues, and a signature node-pipeline editor.
 （Keybricks 是一个近乎单色、细边框、以 14px Inter 为主的企业级界面，仅有一个强调蓝（浅色 #155dfc / 深色 #1f6feb）、五种节点分类色，以及标志性的数据管道编辑器。）
-Tokens live in `tokens/*.css` (linked via `styles.css`, includes `tokens/dark.css` for dark mode and `tokens/motion.css` for motion); React components in `components/<group>/` (each with a `.d.ts` contract and `.prompt.md` usage note); full-screen recreations in `ui_kits/keybricks-app/`.
-（设计令牌位于 `tokens/*.css`（经 `styles.css` 汇总，含深色模式 `tokens/dark.css` 与动效 `tokens/motion.css`）；React 组件位于 `components/<分组>/`（各附 `.d.ts` 类型定义与 `.prompt.md` 用法说明）；完整界面复刻位于 `ui_kits/keybricks-app/`。）
+Tokens live in `tokens/*.css` (linked via `styles.css`, includes `tokens/dark.css` for dark mode and `tokens/motion.css` for motion); React and Vue 3 components in `components/<group>/` (each React file with a `.d.ts` contract; each group with a `.prompt.md` usage note).
+（设计令牌位于 `tokens/*.css`（经 `styles.css` 汇总，含深色模式 `tokens/dark.css` 与动效 `tokens/motion.css`）；React 与 Vue 3 组件位于 `components/<分组>/`（React 文件附 `.d.ts` 类型定义，每个分组附 `.prompt.md` 用法说明）。）
 
 If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
 
 If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.
 
 Rules of thumb / 要点速览:
-- Inter 14px/400 is the default; 500 for nav/headings/labels; 600 for node & panel titles and table headers; 300 only for big numerals. Menlo for codes, data cells, logs — at the row's own size. In Chinese/Japanese/Korean, 500 becomes 600 and tracking is 0.
-  （Inter 14px/常规 为默认；500 用于导航/标题/标签；600 用于节点与面板标题及表头；300 仅用于大号数字。代码/数据/日志用 Menlo，与所在行同字号。中/日/韩文中 500 改为 600，字距为 0。）
-- One size tier per region: `data-size="sm" | "md" | "lg"` = 24 / 32 / 36px controls. Set it on the bar, form, table or dialog; controls inherit. Never mix heights or text sizes in one row; nothing interactive under 24px.
-  （每个区域只用一档尺寸：`data-size="sm" | "md" | "lg"` 对应 24 / 32 / 36px 控件。设在工具栏、表单、表格或对话框上，控件自动继承。同一行不混用高度或字号；可交互元素不小于 24px。）
+- Inter 14px/400 is the default; 500 for nav/headings/labels; 600 for node & panel titles and table headers; 300 only for big numerals. Menlo only for code — CodeBlock, LogViewer and config-code chips; amounts and IDs stay in Inter with tabular figures. In Chinese/Japanese/Korean, 500 and 600 both become 500, tracking is 0, and text below 14px is one step larger (12→13, 11→12).
+  （Inter 14px/常规 为默认；500 用于导航/标题/标签；600 用于节点与面板标题及表头；300 仅用于大号数字。Menlo 只用于代码——代码块、日志和配置代码标签；金额与编号仍用 Inter 等宽数字。中/日/韩文中 500 与 600 都改为 500（同字重下方块字更显粗），字距为 0，14px 以下的字号比英文大一档（12→13、11→12）。）
+- One size tier per region: `data-size="sm" | "md" | "lg"` = 28 / 32 / 40px controls (rows and bars 36 / 40 / 48). Set it on the bar, form, table or dialog; controls inherit. Never mix heights or text sizes in one row; nothing interactive under 24px.
+  （每个区域只用一档尺寸：`data-size="sm" | "md" | "lg"` 对应 28 / 32 / 40px 控件（行与工具栏 36 / 40 / 48）。设在工具栏、表单、表格或对话框上，控件自动继承。同一行不混用高度或字号；可交互元素不小于 24px。）
 - Backgrounds: app #fafafa, surfaces white, hairline borders rgba(229,229,229,.6); shadows only on canvas nodes.
   （背景：应用层 #fafafa，卡片层白色，细边框；仅画布节点有阴影。）
 - One blue CTA per view; ghost text buttons beside it. Color only for meaning (category hues, status).
   （每个界面只有一个蓝色主按钮，旁边配文字按钮；颜色只用于表达含义。）
-- Icons: Lucide stroke set via the Icon component — never emoji, never hand-drawn SVG.
-  （图标统一用 Icon 组件封装的 Lucide 线性图标集——禁止 emoji，禁止手绘 SVG。）
-- Radii: 4 controls · 8 buttons/inputs · 10 cards · 14/16 tiles & nodes · full circles.
-  （圆角：4px 控件、8px 按钮/输入框、10px 卡片、14/16px 图标块与节点、端口/胶囊全圆角。）
+- Icons: the Icon component — Lucide stroke glyphs plus the Keybricks glyphs drawn to the same rules (`ai`, `ai-sparkles`, module icons) — never emoji, never ad-hoc SVG.
+  （图标统一用 Icon 组件：Lucide 线性图标，加上按同一规范绘制的 Keybricks 图标（`ai`、`ai-sparkles`、模块图标）——禁止 emoji，禁止临时手绘 SVG。）
+- Radii: 4 checkboxes · 8 buttons/inputs/row icon tiles · 10 cards · 14/16 tiles & nodes · full circles.
+  （圆角：4px 复选框、8px 按钮/输入框/行内图标块、10px 卡片、14/16px 图标块与节点、端口/胶囊全圆角。）
 - Copy: Title Case labels, imperative verb-first buttons ("Run Test", "Mark as New"), terse technical vocabulary.
   （文案：标签用词首大写，按钮用祈使动词开头，术语简洁精确。）
 - Dark mode: set `<html data-theme="dark">`. Style only via semantic tokens (`--bg-surface`, `--text-body`, `--border-card`, `--track`, `--soft-bg`, `--info-bg`, `--on-accent`, `--ring-surface`) — never raw `--neutral-*`/`--blue-*` — and both themes work automatically.