@keyfunc/keybricks-ds 1.0.4 → 2.1.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.1.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 36px 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,60 @@ 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>   <!-- 24px controls · 12px text · 32px 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 -->
+```
+
+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`.
+`pipeline/pipeline-catalog.js` (`PIPELINE_CATALOG`), `pipeline/port-skin.js` (`portSkin`), `px.js` (`px`), `icons/icon-paths.js`.
 
 ```js
 // React
@@ -145,46 +192,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 +249,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
@@ -301,8 +343,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 +357,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 +369,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 +446,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 +463,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,9 +487,87 @@ 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.1.1"
 ```
 
+### 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.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.
+
 Release mechanics, the CI pipeline and the Pages site are documented in `DEPLOY.md`.
 
 ## Templates

package/SKILL.md

@@ -6,8 +6,8 @@ user-invocable: true
 
 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）、五种节点分类色，以及标志性的数据管道编辑器。）
+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/`。）
 
@@ -16,8 +16,10 @@ If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy as
 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 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。）
 - 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).