@keyfunc/keybricks-ds 1.0.4 → 2.3.1

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#v1.0.4"
+"@keyfunc/keybricks-ds": "git+ssh://git@gitlab.epm2demo.cn/Felix/keybricks-ds.git#v2.3.1"
 ```
 
 **Source-only package.** `.jsx` and `.vue` files are published as authored, so your
@@ -46,7 +46,10 @@ import '@keyfunc/keybricks-ds/styles.css'
 ```
 
 This one line brings in the fonts, the color ramps, the type scale, spacing, radii,
-shadows, motion, the global press/focus layer, and the dark theme. **Nothing renders
+shadows, motion, the global press/focus layer, the hover hooks, and the dark theme.
+(The npm path `styles.css` resolves to `keybricks.css`, which imports the token sheet
+`styles.css` plus `tokens/hover.css`. If you link the files directly instead of importing
+the package, load both `styles.css` and `tokens/hover.css`.) **Nothing renders
 correctly without it** — components reference `var(--action-primary)`, not hex codes.
 
 Dark mode follows the OS automatically. To let users override it:
@@ -64,11 +67,11 @@ import { Button, Field, Input } from '@keyfunc/keybricks-ds'
 
 export function LoginForm() {
   return (
-    <form>
+    <form data-size="lg">
       <Field label="Work email" required>
         <Input type="email" placeholder="you@company.com" />
       </Field>
-      <Button variant="primary" size="md">Sign in</Button>
+      <Button variant="primary">Sign in</Button>
     </form>
   )
 }
@@ -85,29 +88,32 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 </script>
 
 <template>
-  <form>
+  <form data-size="lg">
     <Field label="Work email" required>
       <Input type="email" placeholder="you@company.com" />
     </Field>
-    <Button variant="primary" size="md">Sign in</Button>
+    <Button variant="primary">Sign in</Button>
   </form>
 </template>
 ```
 
-That is the whole integration. Everything below is reference material.
+That is the whole integration. The `data-size="lg"` on the form is the size tier — every control
+inside it is 40px tall; leave it off and they are the app default, 32px (see *Size tiers* below).
+Everything below is reference material.
 
 ---
 
 ## What you can and cannot change
 
-Props are the knobs the design system deliberately exposes. **`variant`, `size`, `icon`,
-`disabled`, `loading` are yours to set.** The height, radius, exact blue, hover step, press
-step, focus ring and dark-mode behavior are not — they live inside the component so that
-every Button in every product looks like the same Button.
+Props are the knobs the design system deliberately exposes. **`variant`, `icon`, `disabled`,
+`loading` are yours to set — and the size tier of the region the control sits in.** The height,
+radius, exact blue, hover step, press step, focus ring and dark-mode behavior are not — they live
+inside the component so that every Button in every product looks like the same Button.
 
 ```jsx
-<Button variant="primary" size="lg" icon="download">Export</Button>   // ✅ intended
+<Button variant="primary" icon="download">Export</Button>                   // ✅ intended
 <Button style={{ background: '#0055ff', borderRadius: 2 }}>Export</Button>  // ❌ breaks the system
+<Button style={{ height: 28, fontSize: 12 }}>Export</Button>                // ❌ set data-size on the bar instead
 ```
 
 Need something the props don't cover? That is a design-system request, not a local
@@ -122,19 +128,63 @@ still flips correctly in dark mode:
               borderRadius: 'var(--radius-lg)', padding: 'var(--space-4)' }}>
 ```
 
-## Component index (118 components)
+## Size tiers
+
+Every control reads its height, text size, icon size and padding from one set of CSS custom
+properties — `--control-h`, `--control-text`, `--control-icon`, `--control-px`, `--control-gap`,
+`--group-gap`, `--bar-h`, `--edge-pad`, `--cell-px`, `--check-size`, `--tag-h`, `--switch-w/h`.
+A **region** sets them with one attribute:
+
+```html
+<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>   <!-- 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`
+prop unset: they inherit, so nothing in one row can be a different height. Some components are
+regions of their own: `Modal` is always `lg`; `SmartTable`, `Spreadsheet` and `DataPreview` are
+`sm`; `Table`, `FilterBar`, `Drawer`, `ConfigPanel`, `PageToolbar` and `ContextMenu` take a
+`size` prop and otherwise inherit.
+
+Every sized component still accepts `size="sm" | "md" | "lg"` — it stamps `data-size` on that one
+element. Use it for a control that stands alone (a single icon button in a card corner), not to
+adjust one control inside a bar. Nothing interactive is smaller than 24px; the 1.x `xs` sizes and
+the `dense` props are kept as aliases of `sm`.
+
+New in 2.0 alongside the tiers: `Field` takes `inline` (label beside the control, for bars) and
+`size`; `DatePicker` takes `locale` (BCP 47 — `"zh-CN"`, `"ja-JP"` — for the month grid and
+field text); `Pagination` takes `format(from, to, total, page, pageCount)` to localise its
+range label; `Table` takes `size` (`dense` remains as `size="sm"`).
+
+Text, weight and tracking follow the tier through `--control-text` / `--control-leading` /
+`--control-tracking`. Under `lang="zh" | "ja" | "ko"` on `<html>` or on a region, the medium
+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)
 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.
 
+**Style units differ between the two trees.** React appends `px` to unitless numbers in a
+style object; Vue's `:style` binding does not — `{ height: 30 }` is silently dropped by the
+browser in Vue (only `0` survives, which is why it "sometimes works"). Every `.vue` file in
+this package therefore writes lengths as strings (`'30px'`) or wraps numeric props in
+`px()` from `components/px.js`. Do the same in your own Vue code. In React, the one trap is
+`lineHeight`: a bare number is a multiplier, not pixels — use the `--leading-*` tokens.
+
 **One difference between the two trees.** A `.jsx` file may export several related
 components (`Input.jsx` exports `Input` and `Textarea`; `Badge.jsx` exports `Badge` and
 `IconTile`). Vue single-file components hold exactly one component and `<script setup>`
 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`, `ButtonGroup.vue`, `StatCard.vue`, `Toast.vue`,
+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`), `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
@@ -145,46 +195,41 @@ import Input from '@keyfunc/keybricks-ds/components/forms/Input.vue'
 import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 ```
 
-### `brand/` — brand expression
-| Component | What it's for |
-| --- | --- |
-| `BrandVisual` | Generative brand artwork for heroes, section headers and card headers. Seven motifs (`orbit`, `entropy`, `focal`, `manifold`, `tesseract`, `meridian`, `ledger`), each authored on one 1200×400 canvas and cropped to fill any box. Always dark — it does not follow the theme. Pass `children` to overlay headings. |
-
 ### `buttons/` — actions
 | Component | What it's for |
 | --- | --- |
-| `Button` | The primary action element. 8 variants (primary, dark, outline, ghost, primary-soft, danger, danger-soft, text) × 3 sizes, with icon, loading and disabled states. |
-| `IconButton` | Square glyph-only button for toolbars and headers. 4 sizes, danger and muted tones, toggle-on `active` state. |
+| `Button` | The primary action element. 8 variants (primary, dark, outline, ghost, primary-soft, danger, danger-soft, text), with icon, loading and disabled states. Height and text come from the region's size tier (24 · 32 · 36). |
+| `IconButton` | Square glyph-only button for toolbars and headers. A square of the tier's control height (24 · 32 · 36), danger and muted tones, toggle-on `active` state. |
 | `ButtonGroup` | Joins buttons into a segmented control or split button — handles the shared borders and corner radii. |
 | `ActionChip` | Compact pill action, used in toolbars and empty states. |
 
 ### `forms/` — data entry
 | Component | What it's for |
 | --- | --- |
-| `Field` | Label + required marker + hint + error wrapper. Wrap every input in one. |
-| `Input` | Single-line text input. Sizes, prefix/suffix, error and read-only states. |
+| `Field` | Label + required marker + hint + error wrapper. Wrap every input in one. `inline` puts the label beside the control for toolbars and filter bars. |
+| `Input` | Single-line text input. Prefix/suffix, error and read-only states; height and text from the size tier. |
 | `Textarea` | Multi-line input with optional character counter and auto-resize. |
 | `Select` | Native-feeling dropdown for a known list of options. |
 | `Combobox` | Type-to-filter single select, with keyboard nav and a no-results row. |
 | `MultiSelect` | Checkbox dropdown; picks render as removable tags with `+n` overflow. |
 | `SearchInput` | Search field with a leading glyph and a clear button. |
-| `Checkbox` | Two sizes, plus an indeterminate state for parent rows. |
+| `Checkbox` | A 14 / 16 / 16px box by tier, plus an indeterminate state for parent rows. |
 | `Radio` / `RadioGroup` | Single choice from 2–5 visible options (past five, use `Select`). `description` adds a muted second line; `row` lays out horizontally; `variant="cards"` renders bordered selectable cards for choices a user must weigh. Arrow keys move the selection. Vue: `v-model`. |
-| `Switch` | Immediate on/off setting (no Save button). Three sizes; `size="lg"` when the knob carries `knobIcon` / `knobText` (one character). `insideOn`/`insideOff` for text in the pill, `labelOn`/`labelOff` for captions beside it (or `label` for a single settings caption). `tone="semantic"` is danger-off → success-on — reserve it for states with real consequence. `beforeChange(next)` returns a promise; the knob spins until it settles. Vue: `v-model:checked`. |
+| `Switch` | Immediate on/off setting (no Save button). Track 28×16 / 36×20 / 44×24 by tier; the lg tier is roomy enough for a knob glyph (`knobIcon` / `knobText`, one character). `insideOn`/`insideOff` for text in the pill, `labelOn`/`labelOff` for captions beside it (or `label` for a single settings caption). `tone="semantic"` is danger-off → success-on — reserve it for states with real consequence. `beforeChange(next)` returns a promise; the knob spins until it settles. Vue: `v-model:checked`. |
 | `NumberStepper` | Numeric input with − / + buttons and min/max clamping. |
 | `Slider` | Range input with a filled track, drag value bubble and optional min/max labels. |
-| `DatePicker` | Text field plus a month-grid popover. Values are `YYYY-MM-DD` strings. |
+| `DatePicker` | Text field plus a month-grid popover. Values are `YYYY-MM-DD` strings; `locale` localises the month title, weekday initials and field text. |
 | `Dropzone` | File drop target with hover, drag-over, uploaded and error states. |
 
 ### `data/` — tables and structured values
 | Component | What it's for |
 | --- | --- |
-| `DataTable` | The standard table: sortable headers, per-column render functions, alignment, selection. |
+| `Table` | The standard table (renamed from `DataTable` in 1.0.6; the old name still works as a deprecated alias from the package entry until 3.0, but file imports must point at `data/Table.jsx` / `Table.vue`): sortable headers, per-column render functions, alignment, selection. It is a size region — rows are 32 / 40 / 44px and cells share the tier's text; `size="sm"` (or the 1.x `dense`) for preview grids. Put it in a rounded box with `bordered` (it draws its own frame), or `framed` when it sits flush inside a `Card pad={false}` — never wrap it in your own bordered div, the header rule doubles against the frame. `empty` (Vue: `#empty` slot) renders inside the table when there are no rows. `resizable` adds a short divider between header cells — hover darkens it, drag sets the width; pass `columnWidths` + `onColumnResize` to persist. |
 | `SmartTable` | Notion/Airtable-style table — typed field columns, inline editing, row hover actions. |
 | `Spreadsheet` | Excel-style grid: formula bar, frozen headers, range selection, `=SUM()` evaluation, sheet tabs. |
 | `FilterBar` | List-report filter bar with variant title, wrapping filter fields, and Adapt Filters / Go. |
 | `ListRow` | One row of a list view — icon, title, meta, trailing actions. |
-| `Pagination` | Page controls with a row-range label and first/last disabled states. |
+| `Pagination` | Page controls with a row-range label and first/last disabled states; `format` localises the label. |
 | `KeyValue` / `KeyValueList` | Label-and-value pairs for detail panels and summaries. |
 | `DiffValue` | Before → after comparison, used in migration and confirmation steps. |
 | `CodeBlock` | Monospace block with optional line numbers and a copy button. |
@@ -207,7 +252,7 @@ import Textarea from '@keyfunc/keybricks-ds/components/forms/Textarea.vue'
 | `Tabs` | Page-level underline tabs. |
 | `PanelTabs` | Compact tabs inside a detail panel or drawer. |
 | `PillTabs` | Filter/status tabs as pills. |
-| `SegmentedControl` | Switches views of the same data, applies instantly — not a saved form value (`RadioGroup`) and not page navigation (`Tabs`). Two sizes, `icon` per option, `iconOnly`, per-option or whole-control `disabled`, `fullWidth`. ← → keyboard. |
+| `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. |
 
 ### `feedback/` — status, overlays, progress
@@ -245,7 +290,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
@@ -301,8 +346,8 @@ being dragged (`outputTone="active"`), and a crosshair drop target (`inputTones[
 Pass `onConnect` to `PipelineCanvas` to enable wiring: holding an output port drags a dashed
 bezier, the canvas hit-tests the pointer against input-port geometry within `snapRadius`
 (30px), and the drop reports `{from, to, toPort}`. `DataPreview` is only the bottom drawer
-chrome (title, Debug Mode, collapse) around the shared dense `DataTable` — reach for
-`DataTable` directly unless you need that drawer.
+chrome (title, Debug Mode, collapse) around the shared `Table` at the sm tier — reach for
+`Table` directly unless you need that drawer.
 
 ---
 
@@ -315,7 +360,8 @@ cards; the ones you will reach for daily:
 | --- | --- |
 | Page background | `--bg-app` |
 | Card / panel background | `--bg-surface` |
-| Nested well, table header | `--bg-inset` |
+| Nested well | `--bg-inset` |
+| Table header row | `--bg-table-header` |
 | Row hover | `--bg-hover` |
 | Body text | `--text-body` |
 | Headings | `--text-heading` |
@@ -326,6 +372,9 @@ cards; the ones you will reach for daily:
 | Primary action | `--action-primary` |
 | Text on any saturated fill | `--on-accent` |
 | Success / warning / danger / info | `--success` `--warning` `--danger` `--info-fg` (each with `-bg` and `-text` companions) |
+| Control height / text / padding | `--control-h` `--control-text` `--control-px` — set by the region's `data-size` |
+| Row height, gaps | `--bar-h` `--control-gap` (inside a group) `--group-gap` (between groups) `--edge-pad` |
+| UI text | `--text-xs` 12 · `--text-base` 14 · `--text-md` 16 · `--text-lg` 20 (each with `--leading-*` and `--tracking-*`) |
 
 Three rules that keep a UI consistent:
 
@@ -400,7 +449,8 @@ it will flip for free. Two things to watch:
 
 ## Interaction states — you get these for free
 
-`tokens/interaction.css` delivers press and keyboard focus globally: `:active` adds
+`tokens/interaction.css` delivers press and keyboard focus globally, and `tokens/hover.css` the hover
+step for controls whose colours are inline (both arrive through the `styles.css` import) — `:active` adds
 `filter: var(--press-filter)` (which darkens in light mode and brightens in dark), and
 `:focus-visible` draws a 2px `--focus-border` outline. It applies to `button`, `a`, `label`,
 and anything with `role="button"`, `menuitem`, `option`, `tab`, `switch`, `treeitem` etc.
@@ -416,6 +466,20 @@ both states:
 Button and IconButton carry `data-press="own"` because their press colors are explicit
 tokens rather than a filter.
 
+Hover for your own controls uses the same hooks the components use. Each sets a custom
+property on hover that your inline style reads, so focus, error and selected colours you write
+as plain values always win:
+
+| Attribute | Read this in your style | Hover result |
+| --- | --- | --- |
+| `data-field` | `border: 1px solid var(--field-border, var(--border-control))` | border → `--border-strong` |
+| `data-wash` | `background: var(--wash, transparent)` | surface → `--bg-hover` |
+| `data-ink` | `color: var(--ink, var(--text-secondary))` | ink → `--text-heading` |
+| `data-row` | `background: var(--row-wash, transparent)` | row → `--bg-inset` |
+| `data-link` | `text-decoration-line: var(--link-line, none)` | underline appears |
+
+Leave the attribute off while the control is disabled, selected or open.
+
 ## Versioning
 
 Semver, tagged in GitLab. Patch = fixes; minor = new components, new props, and token
@@ -426,22 +490,152 @@ 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": "~1.0.4"
+"@keyfunc/keybricks-ds": "~2.3.1"
 ```
 
-Release mechanics, the CI pipeline and the Pages site are documented in `DEPLOY.md`.
+### Migrating from 1.x to 2.0
+
+2.0 is a visual major: no component was removed and no token was removed, but values moved.
+
+- **The 14px scale.** `--text-base` is 14px (was 13), `--text-xs` 12 (was 11), `--text-md` 16,
+  `--text-lg` 20, `--text-xl` 24; line-heights are whole numbers on a 4px rhythm. `--text-sm` is
+  now an alias of `--text-xs` (12px) — replace it with `--text-xs` when you touch the code.
+  `--text-2xs` (11px) is for chart tick labels only.
+- **Controls are 32px by default, not 36.** `--h-input` and `--h-button` now both resolve to
+  `--control-h`; `--h-button-sm` is 24 (was 30). Anything you sized to sit beside an input
+  should read `var(--control-h)` instead of a literal.
+- **Size tiers replace per-control sizing.** `size` props still work on every component, but set
+  `data-size` on the region instead. `xs` on `IconButton` and `dense` on `Table` / `DataPreview`
+  are aliases of `sm`; nothing renders below 24px any more.
+- **Tables.** Header cells are the same size as body cells, weight 600, sentence case, no
+  letter-spacing; mono columns match the row's size. Rows are 40px at md (were 51.5) and 32px at sm.
+- **Chrome.** `--h-nav-item` 36 (was 35.5), `--h-subnav-item` 32 (was 31.5), `--h-tree-item` 32
+  (was 30).
+- **CJK.** Under `lang="zh" | "ja" | "ko"`, `--weight-medium` resolves to 600 and every
+  `--tracking-*` to 0. If your app sets `lang` on `<html>` already, nothing to do.
+- **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.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
+  floor, no green or red in the sequence (those stay on `--chart-pos` / `--chart-neg` and status):
+  blue `#3b82f6` · orange `#e16c10` · teal `#079a94` · violet `#8254c4` · gold `#b98705` ·
+  magenta `#bc378d` · olive `#7a8d30` · sky `#2f99c0`; dark values are tuned for `#161616`.
+  `--series-9` is now a grey (was danger red); `--series-10` is unchanged. Every adjacent pair
+  passes ΔE ≥ 8 under colour-vision-deficiency simulation and ≥ 3:1 on the surface. Charts that
+  read `--series-*` pick the new colours up automatically; nothing to change in app code.
+  `CandlestickChart`'s moving-average line is now `--chart-total` (was `--series-8`), in line with
+  every other overlay line; status bands in demos read `--warning`, never a series slot.
+- **Hover hooks moved to `tokens/hover.css`.** The npm path `@keyfunc/keybricks-ds/styles.css`
+  now resolves to `keybricks.css`, which imports the token sheet and the hooks together, so the
+  one-line import is unchanged. Only apps that link the raw files must add `tokens/hover.css`.
+- **CJK scope** is `[lang|="zh"]` / `[lang|="ja"]` / `[lang|="ko"]` instead of `:lang()` — same
+  result when `lang` is set on `<html>` or a region. (A nested region that switches *back* to a
+  Latin language no longer regains letter-spacing; set the tracking locally if you need that.)
+
+### 2.1.0
+
+- **`BrandVisual` is removed**, with its seven generated motifs, its card and its lint rules. The
+  artwork was retired; a new brand visual language will ship separately when it is ready.
+  Nothing else in the system used it. If your code imports `BrandVisual`, keep it pinned to
+  `~2.0.3` until the import is gone. 117 components remain.
+
+### 2.0.3
+
+- Housekeeping, no component or token changes. Removed files nothing used: the empty
+  `Canvas.dc.html` and the root `support.js` only it loaded; the frozen pre-2.0 export
+  `Keybricks App.html` and its source `ui_kits/keybricks-app/standalone-src.html` (the live UI kit
+  is `ui_kits/keybricks-app/index.html`); the eleven `components/*/_dir.card.html` placeholder cards
+  that the site never showed; and `github.md`, whose icon-source notes now live in `readme.md`.
+
+### 2.0.2
+
+- Hover on every pointer target. Field boxes (`Input`, `Textarea`, `Select`, `Combobox`,
+  `MultiSelect`, `DatePicker`, `SearchInput`, `NumberStepper`) darken their border; stepper
+  − / +, pagination items, pill tabs, spreadsheet tools, accordion and palette headers, sidebar
+  sections and doc-tree items take the `--bg-hover` wash; inactive tabs, segments, legend items
+  and clear / copy buttons darken their ink; table body rows take `--bg-inset`; checkbox rings,
+  switch tracks and slider thumbs respond too. The hooks are documented under *Interaction states*.
+- `NodeCard` subtitle icon is 12px and sits on the cap height of its 12px label.
+- `BrandVisual` (React) passes camelCase SVG props — no more console warnings.
+- The icon index had `calendar` twice; the Feather Library card now counts 317 icons.
+
+### 2.0.1
+
+- Card and section headers: secondary actions are `ghost` at the region's tier, never a smaller
+  button; the rule is in `DESIGN.md` → *Button emphasis*.
+- Icons beside multi-line text (`Alert`, `Banner`, `Toast`, `NodeCard` subtitle) centre on the first
+  line; overlay close buttons (`Modal`, `Drawer`) centre on the title line at every tier.
+- `Banner` and `Toast` dismiss buttons are the sm tier (24px). `Breadcrumb`'s overflow toggle is a
+  24px hit target. Palette tile labels are 12px.
+- Every control card on the site shows its sm / md / lg tiers; demo content is English throughout.
 
-## 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.
+Release mechanics, the CI pipeline and the Pages site are documented in `DEPLOY.md`.
 
 ## Getting help
 

package/SKILL.md

@@ -4,28 +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, 13px-Inter enterprise UI with one action blue (#155dfc, dark mode #1f6feb), five node-category hues, and a signature node-pipeline editor.
-（Keybricks 是一个近乎单色、细边框、以 13px 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/`。）
+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 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 13px/400 is the default; 500 for nav/headings/labels; 600 for node & panel titles; 300 only for big numerals. Menlo for codes, data cells, logs.
-  （Inter 13px/常规 为默认；500 用于导航/标题/标签；600 用于节点与面板标题；300 仅用于大号数字。代码/数据/日志用 Menlo。）
+- 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.