@godxjp/ui-mcp 0.21.3 → 0.22.0

package/dist/index.js

@@ -77,7 +77,8 @@ var COMPONENTS = [
       "DO: Pass `breadcrumb` as an ordered array of `{ label, to? }` objects from root to current page. The last item is automatically rendered without a link and receives `aria-current='page'`; earlier items with `to` become router `<Link>` elements. Never hand-roll a breadcrumb nav inside a PageContainer.",
       "DON'T: Use `density` to change individual control sizes \u2014 it cascades spacing across the entire page subtree. Set it once per page (e.g. `density='compact'` for data-dense list pages) and let all child components inherit it. Do not apply density classes manually.",
       "DON'T: Confuse PageContainer's prop names with the old PageHeader's prop names \u2014 PageContainer uses `subtitle` (not `description`) and `extra` (not `actions`). If you see those legacy names in old code, migrate them to PageContainer.",
-      "DO: Leave `fill` off (the default) for ordinary pages \u2014 the body is content-height and top-packed, so a short page on a tall viewport leaves no stretched empty void below the content (the page background simply spans the shell). Only set `fill` when the body itself should occupy the full remaining height: a full-height DataTable, a SplitPane, or a chat surface whose message list scrolls and whose composer is pinned to the bottom via `footer` + `stickyFooter`. DON'T add a manual `min-h-screen` / `flex-1` wrapper or a spacer div to fight or fake this."
+      "DO: Leave `fill` off (the default) for ordinary pages \u2014 the body is content-height and top-packed, so a short page on a tall viewport leaves no stretched empty void below the content (the page background simply spans the shell). Only set `fill` when the body itself should occupy the full remaining height: a full-height DataTable, a SplitPane, or a chat surface whose message list scrolls and whose composer is pinned to the bottom via `footer` + `stickyFooter`. DON'T add a manual `min-h-screen` / `flex-1` wrapper or a spacer div to fight or fake this.",
+      "DO: Know the header draws NO bottom divider by default \u2014 it is governed by the semantic token `--page-header-divider` (default `none`). A service theme opts in once, globally, with `--page-header-divider: 1px solid hsl(var(--border));` in its theme CSS. Never re-create the divider with a `border-b` utility on the header or a `<Separator>` under the title; `variant='ghost'` stays divider-less regardless of the token."
     ],
     useCases: [
       "A master list page (e.g. invoices, journal entries, customers) where the header holds the page title, a 'New Invoice' button in `extra`, a breadcrumb trail, and a full-bleed DataTable as the body \u2014 use `variant='flush'` + `<PageContainer.Inset>` for the Toolbar above the table.",
@@ -519,6 +520,12 @@ export default function Shell() {
         defaultValue: "undefined",
         description: "Called when the search bar button (\u2318K) is clicked. Wire this to your command-palette or search dialog."
       },
+      {
+        name: "searchPlaceholder",
+        type: "string",
+        defaultValue: 'i18n "layout.topbar.searchPlaceholder" ("\u691C\u7D22\u2026")',
+        description: "Search-bar placeholder text \u2014 set a domain-specific hint (e.g. \u6848\u4EF6\u30FB\u53D7\u6CE8\u30FB\u9867\u5BA2\u3092\u691C\u7D22\u2026) instead of the generic default."
+      },
       {
         name: "onTweaksOpen",
         type: "() => void",
@@ -1315,7 +1322,7 @@ export function Grid({ rows }: { rows: Row[] }) {
   {
     name: "StatCard",
     group: "data-display",
-    tagline: "KPI tile. \u26A0\uFE0F StatCard IS ALREADY a bordered Card \u2014 render it DIRECTLY in ResponsiveGrid. NEVER wrap it in <Card>/<CardContent> (that double-borders it \u2192 looks too thick). NO accent prop (accent is a Card prop).",
+    tagline: "KPI tile. \u26A0\uFE0F StatCard IS ALREADY a bordered Card \u2014 render it DIRECTLY in ResponsiveGrid. NEVER wrap it in <Card>/<CardContent> (that double-borders it \u2192 looks too thick). Use `accent` for a semantic leading-edge rail on a KPI needing attention.",
     props: [
       { name: "label", type: "ReactNode", required: true, description: "Metric name." },
       {
@@ -1336,13 +1343,24 @@ export function Grid({ rows }: { rows: Row[] }) {
         defaultValue: '"stacked"',
         description: "stacked = label over value; inline = label left / value right."
       },
-      { name: "align", type: '"start" | "end"', description: "Align the metric group." }
+      { name: "align", type: '"start" | "end"', description: "Align the metric group." },
+      {
+        name: "inverse",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Flip delta tone semantics for metrics where lower is better (cost, error rate): '-' renders green, '+' renders red."
+      },
+      {
+        name: "accent",
+        type: '"primary" | "success" | "warning" | "info" | "attention" | "destructive"',
+        description: "Semantic 3px leading-edge rail (forwarded to the underlying Card) \u2014 flags a KPI that needs attention (e.g. attention = backlog with a deadline, destructive = overdue)."
+      }
     ],
     usage: [
       "DO place StatCard directly as a child of ResponsiveGrid \u2014 it renders its own bordered Card shell internally, so no wrapping <Card> or <CardContent> is needed or allowed. Wrapping creates a double border.",
       "DO pass `delta` as a sign-prefixed string (e.g. '+12%' or '-3%') to get automatic color tone: '+' renders text-success, '-' renders text-destructive. For metrics where a negative delta is good (e.g. cost reduction, error rate), pass `inverse` so the tone is flipped correctly.",
       "DO use `hint` for secondary context (e.g. '\u5148\u6708\u6BD4 +3%', 'last 30 days'). In the default `stacked` layout hint renders below the value; in `inline` layout it renders beside the label.",
-      "DO NOT add an `accent` prop \u2014 accent is a Card prop and StatCard does not expose it. Passing accent has no effect and creates a false expectation.",
+      "DO use `accent` (not a className border) for the semantic leading-edge rail \u2014 `attention` for a non-destructive backlog needing action, `destructive` only for overdue/exceeded states. Most tiles in a grid stay rail-less; an all-accented grid says nothing.",
       "DO NOT hand-roll a KPI tile using a plain <Card><CardContent>. StatCard is the correct primitive and token-aligns the label/value/hint/delta slots automatically.",
       "WHILE data is loading, replace each StatCard with a <SkeletonStat /> at the same grid position \u2014 never render an empty value string or a spinner inside StatCard itself."
     ],
@@ -2675,6 +2693,184 @@ export function PrioritySelect({ value, onValueChange }) {
     storyPath: "data-entry/RadioGroup.stories.tsx",
     rules: [23]
   },
+  {
+    name: "MonthPicker",
+    group: "data-entry",
+    tagline: "Year/month (yyyy/MM) input with an Ant-Design-style month-grid popover \u2014 a year chevron header over a 3x4 grid of the twelve months. The input stays typeable; the grid is the visual affordance.",
+    props: [
+      {
+        name: "value",
+        type: "Date | undefined",
+        description: "Controlled value \u2014 first day of the selected month. Pass undefined to clear."
+      },
+      {
+        name: "defaultValue",
+        type: "Date | undefined",
+        description: "Uncontrolled initial value."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: Date | undefined) => void",
+        description: "Fires on a grid pick, on a complete typed yyyy/MM, and on clear."
+      },
+      {
+        name: "placeholder",
+        type: "string",
+        defaultValue: '"yyyy/mm"',
+        description: "Placeholder shown while empty."
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Disables the input, the clear button and the grid trigger."
+      },
+      {
+        name: "className",
+        type: "string",
+        description: "Extra classes on the control shell (width/margin overrides)."
+      },
+      {
+        name: "id",
+        type: "string",
+        description: "Wired to the inner input; auto-generated when omitted so the field always has an id."
+      },
+      {
+        name: "name",
+        type: "string",
+        description: "Form field name \u2014 submits the display text (yyyy/MM)."
+      },
+      {
+        name: "fromYear",
+        type: "number",
+        description: "Inclusive lower bound for the year navigation."
+      },
+      {
+        name: "toYear",
+        type: "number",
+        description: "Inclusive upper bound for the year navigation."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Inline clear button while a value is set."
+      }
+    ],
+    usage: [
+      "DO use MonthPicker for every yyyy/MM (year-month) field \u2014 never a bare Input with a YYYY/MM helper text.",
+      "DO wrap it in FormField like every other labelled control; FormField injects id/aria wiring.",
+      "DO NOT compose two MonthPickers to fake a from~to range \u2014 that is MonthRangePicker (one control shell, like DateRangePicker)."
+    ],
+    related: [
+      "DatePicker \u2014 full date (yyyy-MM-dd); MonthPicker when the day is meaningless (\u7DE0\u3081\u5E74\u6708, \u96C6\u8A08\u5E74\u6708, \u5546\u8AC7\u767A\u751F\u5E74\u6708).",
+      "MonthRangePicker \u2014 use for a yyyy/MM from~to pair; one input-styled control, never two MonthPickers side-by-side."
+    ],
+    example: `import { useState } from "react";
+import { MonthPicker, FormField } from "@godxjp/ui/data-entry";
+
+export function OrderMonthField() {
+  const [ym, setYm] = useState<Date | undefined>(undefined);
+
+  return (
+    <FormField label="\u53D7\u6CE8\u65E5\u5E74\u6708">
+      <MonthPicker name="search_order_date_ym" value={ym} onValueChange={setYm} />
+    </FormField>
+  );
+}`,
+    storyPath: "data-entry/MonthPicker.stories.tsx",
+    rules: [3, 6, 13, 31, 43]
+  },
+  {
+    name: "MonthRangePicker",
+    group: "data-entry",
+    tagline: "Year/month (yyyy/MM) RANGE rendered as ONE input-styled control `[ from \u2192 to  \u2715 \u{1F4C5} ]` (Ant RangePicker convention, same shell as DateRangePicker) with an Ant-style month-grid popover. Both inputs stay typeable; picks are two-step with from \u2264 to always enforced.",
+    props: [
+      {
+        name: "value",
+        type: "DateRange | undefined",
+        description: "Controlled range \u2014 both edges normalized to the first day of their month. Pass undefined to clear."
+      },
+      {
+        name: "defaultValue",
+        type: "DateRange | undefined",
+        description: "Uncontrolled initial range."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: DateRange | undefined) => void",
+        description: "Fires on each grid step ({from, to: undefined} then the complete pair), on a complete typed yyyy/MM at either edge, and on clear. Never emits an inverted range \u2014 a backwards pick/typing is swapped so from \u2264 to."
+      },
+      {
+        name: "placeholder",
+        type: "string",
+        defaultValue: '"yyyy/mm"',
+        description: "Placeholder shown in both inputs while empty."
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Disables both inputs, the clear button and the grid trigger."
+      },
+      {
+        name: "className",
+        type: "string",
+        description: "Extra classes on the control shell (width/margin overrides)."
+      },
+      {
+        name: "id",
+        type: "string",
+        description: "Wired to the from input; the to input gets `${id}-to`. Auto-generated when omitted."
+      },
+      {
+        name: "name",
+        type: "string",
+        description: "Form field name \u2014 emits the range as `${name}_from` / `${name}_to` yyyy/MM fields."
+      },
+      {
+        name: "fromYear",
+        type: "number",
+        description: "Inclusive lower bound for the year navigation."
+      },
+      {
+        name: "toYear",
+        type: "number",
+        description: "Inclusive upper bound for the year navigation."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Inline clear button (clears the WHOLE range) while a value is set."
+      }
+    ],
+    usage: [
+      "DO use MonthRangePicker for every yyyy/MM from~to pair \u2014 never two MonthPickers (or bare Inputs) separated by ~; a range is ONE control, exactly like DateRangePicker.",
+      "DO rely on its built-in range validation: a backwards grid pick or typed pair is swap-normalized so the emitted range always satisfies from \u2264 to \u2014 do not re-validate order in the app.",
+      "DO wrap it in FormField like every other labelled control; FormField injects id/aria wiring.",
+      "Grid picks are two-step (from, then to) and reset-on-complete: picking while a complete range is held STARTS a new range, so the start month is never stuck."
+    ],
+    related: [
+      "MonthPicker \u2014 single yyyy/MM value; MonthRangePicker when the field is a from~to pair (\u5546\u8AC7\u767A\u751F\u5E74\u6708\u306E\u7BC4\u56F2\u691C\u7D22, \u96C6\u8A08\u671F\u9593).",
+      "DateRangePicker \u2014 full-date (yyyy-MM-dd) range with the same one-control shell; MonthRangePicker when the day is meaningless."
+    ],
+    example: `import { useState } from "react";
+import type { DateRange } from "react-day-picker";
+import { MonthRangePicker, FormField } from "@godxjp/ui/data-entry";
+
+export function NegotiationYmField() {
+  const [range, setRange] = useState<DateRange | undefined>(undefined);
+
+  return (
+    <FormField label="\u5546\u8AC7\u767A\u751F\u5E74\u6708">
+      <MonthRangePicker name="search_negotiation_ym" value={range} onValueChange={setRange} />
+    </FormField>
+  );
+}`,
+    storyPath: "data-entry/MonthRangePicker.stories.tsx",
+    rules: [3, 6, 13, 31, 43]
+  },
   {
     name: "DatePicker",
     group: "data-entry",
@@ -7027,6 +7223,18 @@ var TOKENS = [
   },
   { name: "--info", category: "semantic", tier: "semantic", role: "Information status role." },
   { name: "--attention", category: "semantic", tier: "semantic", role: "Attention status role." },
+  {
+    name: "--page-header-divider",
+    category: "semantic",
+    tier: "semantic",
+    role: "PageContainer header bottom divider. Default none; a service theme opts in with `1px solid hsl(var(--border))`."
+  },
+  {
+    name: "--page-header-pad-bottom",
+    category: "semantic",
+    tier: "semantic",
+    role: "PageContainer header bottom inset. Defaults to page top padding minus the section gap so the title band is vertically balanced."
+  },
   { name: "--badge-space-*", category: "component", tier: "component", role: "Badge spacing." },
   {
     name: "--card-*",
@@ -7041,6 +7249,18 @@ var TOKENS = [
     role: "Shared form control heights, padding, icons, and focus chrome."
   },
   { name: "--table-*", category: "component", tier: "component", role: "Table row/cell sizing." },
+  {
+    name: "--form-label-width",
+    category: "component",
+    tier: "component",
+    role: "Label column width in horizontal Form layout. Default max-content; a service theme sets it once (e.g. 110px) \u2014 the labelWidth prop overrides per form/field."
+  },
+  {
+    name: "--form-label-gap",
+    category: "component",
+    tier: "component",
+    role: "Label\u2194control column gap in horizontal Form layout. Default 16px (--space-4)."
+  },
   {
     name: "--dialog-* / --alert-* / --skeleton-*",
     category: "component",
@@ -7052,6 +7272,715 @@ function tokensByCategory(category) {
   return TOKENS.filter((t) => t.category === category);
 }
 
+// src/data/component-tokens.generated.ts
+var COMPONENT_TOKENS = [
+  {
+    "name": "--badge-space-gap",
+    "value": "var(--space-inline-xs)",
+    "description": "Badge component tokens."
+  },
+  {
+    "name": "--badge-space-x",
+    "value": "var(--space-2)",
+    "description": "Badge component tokens."
+  },
+  {
+    "name": "--badge-space-y",
+    "value": "var(--space-1)",
+    "description": "Badge component tokens."
+  },
+  {
+    "name": "--badge-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Small-by-design (badge/pill/counter). A knob (rule #45) so a service can * re-tune badge text without touching the global --font-size-xs step."
+  },
+  {
+    "name": "--card-space-inset",
+    "value": "var(--space-section-active)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-space-header-y",
+    "value": "var(--space-stack-sm)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-space-body-y",
+    "value": "var(--space-section-active)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-space-footer-y",
+    "value": "var(--space-stack-sm)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-space-gap",
+    "value": "var(--space-stack-xs)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-title-font-size",
+    "value": "var(--font-size-base)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-title-line-height",
+    "value": "var(--line-height-tight)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-title-font-weight",
+    "value": "var(--font-weight-semibold)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-description-font-size",
+    "value": "var(--font-size-sm)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-description-line-height",
+    "value": "var(--line-height-normal)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-background",
+    "value": "var(--card)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-border",
+    "value": "var(--border)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-header-background",
+    "value": "var(--muted)",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-header-background-alpha",
+    "value": "0.55",
+    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+  },
+  {
+    "name": "--card-header-border-bottom",
+    "value": "1px solid hsl(var(--card-border))",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--card-radius",
+    "value": "var(--radius)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-label-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-label-font-weight",
+    "value": "var(--font-weight-medium)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-label-letter-spacing",
+    "value": "0.04em",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-value-font-size",
+    "value": "var(--font-size-2xl)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-value-line-height",
+    "value": "1.1",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-value-font-weight",
+    "value": "var(--font-weight-semibold)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-hint-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-gap",
+    "value": "var(--space-stack-xs)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-icon-size",
+    "value": "2.25rem",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--stat-card-delta-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Banded-header divider \u2014 tokenised (rule #44) so a service theme can make it * dashed / heavier / none without forking CSS. Pair with * --card-header-background-alpha: 0 for a quiet borderless-band header."
+  },
+  {
+    "name": "--control-height-compact",
+    "value": "1.75rem",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-height-default",
+    "value": "2rem",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-height-comfortable",
+    "value": "2.75rem",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-padding-x-compact",
+    "value": "var(--space-2)",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-padding-x-default",
+    "value": "var(--space-3)",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-padding-x-comfortable",
+    "value": "var(--space-4)",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-height",
+    "value": "var(--control-height-default)",
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes."
+  },
+  {
+    "name": "--control-height-sm",
+    "value": "calc(var(--control-height) - 0.25rem)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-height-lg",
+    "value": "calc(var(--control-height) + 0.25rem)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-height-xs",
+    "value": "calc(var(--control-height) - 0.5rem)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-padding-x",
+    "value": "var(--control-padding-x-default)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-gap",
+    "value": "var(--space-inline-sm)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-gap-sm",
+    "value": "var(--space-inline-xs)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-radius",
+    "value": "var(--radius)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-icon-size",
+    "value": "1rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-icon-size-sm",
+    "value": "0.875rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-focus-ring-width",
+    "value": "2px",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--checkbox-size",
+    "value": "1rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--checkbox-size-compact",
+    "value": "0.875rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--checkbox-size-comfortable",
+    "value": "1.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--choice-gap",
+    "value": "var(--space-inline-sm)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--choice-group-gap-x",
+    "value": "var(--space-6)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--choice-group-gap-y",
+    "value": "var(--space-3)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--choice-description-gap",
+    "value": "0.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--choice-control-offset",
+    "value": "0.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-width",
+    "value": "2.25rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-width-compact",
+    "value": "2rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-width-comfortable",
+    "value": "2.5rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-height",
+    "value": "1.25rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-height-compact",
+    "value": "1.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-height-comfortable",
+    "value": "1.375rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-size",
+    "value": "1rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-size-compact",
+    "value": "0.875rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-size-comfortable",
+    "value": "1.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-translate",
+    "value": "1rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-translate-compact",
+    "value": "0.875rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--switch-thumb-translate-comfortable",
+    "value": "1.125rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--slider-track-height",
+    "value": "0.375rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--slider-thumb-size",
+    "value": "1rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--color-picker-input-width",
+    "value": "6.5rem",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--command-list-max-height",
+    "value": "min(300px, 50vh)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--command-input-padding-x",
+    "value": "var(--space-3)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--command-group-padding",
+    "value": "var(--space-1)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--command-item-padding-y",
+    "value": "var(--space-2)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--command-item-padding-x",
+    "value": "var(--space-2)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--search-input-edge-inset",
+    "value": "var(--space-3)",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--search-input-start-padding",
+    "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--search-input-end-padding",
+    "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",
+    "description": "Adjacent control sizes, derived from the active --control-height. * Default/compact use a 4px/8px step; density overrides comfortable * (which steps 44\u219236\u219232 per the design's spacing-density spec)."
+  },
+  {
+    "name": "--control-height-compact",
+    "value": "2.75rem",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--control-height-default",
+    "value": "2.75rem",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--choice-description-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--color-picker-hex-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--command-group-heading-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--search-input-label-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--tag-input-chip-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--toggle-sm-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--button-sm-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Rule #24 \u2014 on touch devices (coarse pointer) interactive controls keep a \u226544px tap target * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height * resolves through these via var(), so inputs/buttons/selects/table rows all bump together."
+  },
+  {
+    "name": "--progress-label-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--tree-item-title-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--tree-item-description-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--timeline-note-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--password-strength-score-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--password-strength-checklist-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."
+  },
+  {
+    "name": "--dialog-space-x",
+    "value": "var(--space-chrome-x)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--dialog-space-y",
+    "value": "var(--space-chrome-y)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--dialog-space-inset",
+    "value": "var(--dialog-space-y) var(--dialog-space-x)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--dialog-space-gap",
+    "value": "var(--space-stack-md)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--dialog-close-space-offset",
+    "value": "var(--space-4)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--alert-space-inset",
+    "value": "var(--space-section-active)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--alert-space-gap",
+    "value": "var(--space-inline-md)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--alert-inner-space-gap",
+    "value": "var(--space-stack-sm)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--alert-dismiss-space-offset",
+    "value": "var(--space-3)",
+    "description": "Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the * whole system, or --dialog-space-x/-y for dialogs only)."
+  },
+  {
+    "name": "--alert-bg-alpha",
+    "value": "0.05",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--alert-border-alpha",
+    "value": "0.3",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--empty-state-space-y",
+    "value": "var(--space-10)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--empty-state-space-x",
+    "value": "var(--space-6)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--skeleton-row-gap",
+    "value": "var(--space-stack-sm)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--skeleton-cell-gap",
+    "value": "var(--space-inline-lg)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--skeleton-card-inset",
+    "value": "var(--space-section-active)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--skeleton-radius",
+    "value": "var(--radius)",
+    "description": "Soft (subtle) semantic tint ratios \u2014 themeable so a service can hit its exact spec * (a brand's success-bg/-border are often more present than the faint 5%/30% default)."
+  },
+  {
+    "name": "--form-label-width",
+    "value": "max-content",
+    "description": "Width of the label column in horizontal/inline layout. A service theme sets * this once (e.g. 110px) to align every form to its design grid; the Form/ * FormField `labelWidth` prop overrides per form/field."
+  },
+  {
+    "name": "--form-label-gap",
+    "value": "var(--space-4)",
+    "description": "Column gap between the label and its control in horizontal/inline layout."
+  },
+  {
+    "name": "--pagination-gap",
+    "value": "var(--space-inline-sm)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--pagination-item-gap",
+    "value": "var(--space-inline-xs)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--pagination-size-width",
+    "value": "5.5rem",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--pagination-total-font-size",
+    "value": "var(--font-size-sm)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--filter-bar-gap",
+    "value": "var(--space-3)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--filter-bar-padding-y",
+    "value": "var(--space-2)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--filter-label-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--filter-picker-width-sm",
+    "value": "11rem",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--filter-picker-width-md",
+    "value": "14rem",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--breadcrumb-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--menubar-shortcut-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Navigation primitive tokens: pagination, filters, compact pickers."
+  },
+  {
+    "name": "--sidebar-section-label-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-product-tenant-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-badge-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-user-role-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-nav-sub-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-flyout-title-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--topbar-chip-icon-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--kbd-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-logo-mark-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-avatar-font-size",
+    "value": "var(--font-size-2xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--sidebar-user-name-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
+  },
+  {
+    "name": "--table-row-height-compact",
+    "value": "1.75rem",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-row-height-default",
+    "value": "2rem",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-row-height-comfortable",
+    "value": "2.75rem",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-row-height",
+    "value": "var(--table-row-height-default)",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-cell-padding-y",
+    "value": "var(--space-2)",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-cell-space-x",
+    "value": "var(--control-padding-x)",
+    "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-head-font-size",
+    "value": "var(--font-size-xs)",
+    "description": "Table component tokens: row height, cell padding."
+  }
+];
+
 // src/data/rules.ts
 var CARDINAL_RULES = [
   {
@@ -7263,6 +8192,26 @@ var CARDINAL_RULES = [
     number: 42,
     title: "Props & Tokens Before Customization",
     body: "Before reaching for a Tailwind class, inline `style`, or extra CSS, you MUST first check whether the component already supports the need via a PROP, a design TOKEN, or a layout/typography PRIMITIVE. godx-ui is meant to be enough on its own (Ant-Design-style): `className` is for genuine one-offs only \u2014 never to redo what an API already does. Specifically: (1) NEVER hand-roll typography \u2014 no `text-[13px]`/`text-[11px]` arbitrary px (bypasses the golden type scale), no `font-medium`/`font-semibold`/`text-muted-foreground` on a raw `<span>`; use `<Text size tone weight tabular mono>` / `<Heading level>`. (2) NEVER hand-roll a trivial flex/grid wrapper; use `<Flex>` / `<ResponsiveGrid>` / `<PageContainer>`. (3) NEVER set a control's radius/height/colour with a utility when a `shape`/`size`/`tone`/token exists. If a real need has NO prop/token/primitive, that is a library GAP \u2014 file it (draft_bug_report), don't paper over it with ad-hoc Tailwind."
+  },
+  {
+    number: 43,
+    title: "Every form control goes through FormField",
+    body: "Consumers MUST wrap every labelled form control (Input, Select, DatePicker, DateRangePicker, NumberInput, Radio.Group, Checkbox groups, range pairs, ...) in FormField \u2014 it owns the label (aria-labelledby, never a dangling <label for>), auto-generates/injects the control id, and wires aria-describedby/aria-errormessage/aria-invalid. Bare controls are the rare exception (e.g. a toolbar quick-filter with its own aria-label) and must carry id/name + aria-label themselves. Never hand-roll a label+control stack with Text/Label."
+  },
+  {
+    number: 44,
+    title: "Chrome is a token, default quiet",
+    body: "Any decorative chrome a component draws \u2014 dividers, separator borders, and the padding that exists only to space that chrome \u2014 MUST read a token; never hard-code it in `src/styles/*.css` (a hard-coded `border-bottom: 1px solid hsl(var(--border))` leaves consumers no off-switch short of a variant fork). The DEFAULT is the quietest state (`none` / balanced rhythm); a service theme opts IN, e.g. `--page-header-divider: 1px solid hsl(var(--border))`. Born from real consumption: PageContainer's header divider was undisableable until tokenised."
+  },
+  {
+    number: 45,
+    title: "Every service-tunable constant gets a knob",
+    body: 'When component CSS encodes a geometry choice that a service plausibly re-tunes to match its design handoff \u2014 form label column width, label\u2194control gap, header insets \u2014 it MUST be a documented component token (current value as the default). The theme sets it ONCE globally; props (`labelWidth`) override per instance; Form\u2192FormField priority stays intact. The test: "would a service theme.css want to change this to match its design grid?" If yes and the only route is forking CSS, that is a library gap \u2014 fix the library, don\'t patch the app. Born from real consumption: `--form-label-width` / `--form-label-gap` (design spec said 110px/8px; the values were prop-only and hard-coded `--space-4`).'
+  },
+  {
+    number: 46,
+    title: "Typography is tokens, default is base",
+    body: "A UI framework gives consumers knobs: every font-size in `src/styles/*.css` MUST reference a token \u2014 the global modular scale `var(--font-size-{2xs|xs|sm|base|lg|xl|2xl})` or a per-component `var(--{component}-\u2026-font-size)` knob (rule #45) \u2014 never a hard-coded literal (`font-size: 12px` can't be re-themed). The DEFAULT body size is `--font-size-base`; components render body/UI text at `base`, not at the `sm` alias. Smaller-by-design text (badge, section label, caption) is a component token defaulting to a small step (`--badge-font-size: var(--font-size-xs)`), so a service re-tunes that part without moving the global scale. The `sm`/`xs` tokens stay for the explicit `<Text size>` API. Every component token is surfaced in the MCP `get_component` output (check:mcp-token-sync). Enforced by `check:typography`."
   }
 ];
 function findRule(num) {
@@ -8586,6 +9535,84 @@ minimal repro, expected vs actual, the installed version, and env \u2014 enough
 reproduce in one paste.`
       }
     ]
+  },
+  // ── app-performance (consumer) ─────────────────────────────────
+  {
+    id: "app-performance",
+    audience: "consumer",
+    name: "App performance \u2014 measure-first React perf with @godxjp/ui",
+    whenToUse: "A screen built on @godxjp/ui feels slow, Chrome logs [Violation] handler warnings, typing lags in a filter pane, a panel toggle blocks, or the bundle is questioned. Distilled from a real audit (orders screen: keystroke 165ms \u2192 5ms, panel open 270ms \u2192 18ms, app bundle \u221227%). Measure FIRST \u2014 the library's per-control cost is small (~3ms/field dev); page architecture is almost always the culprit.",
+    source: "@godxjp/ui MCP (consumer surface) \u2014 2026-06 exseli audit, verified numbers",
+    sections: [
+      {
+        id: "measure-first",
+        title: "Measure before touching anything",
+        tagline: "Long tasks + a temporary React Profiler tell you WHO is slow \u2014 never guess.",
+        body: `Three probes, run in the page (devtools console / playwright evaluate):
+1) Long tasks \u2014 anything >50ms in a handler triggers Chrome's [Violation]:
+   const t=[]; new PerformanceObserver(l=>l.getEntries().forEach(e=>t.push(Math.round(e.duration))))
+     .observe({type:"longtask",buffered:true});
+2) Attribution \u2014 wrap suspect sections temporarily:
+   <Profiler id="sec" onRender={(id,phase,d)=>(window.__perf??=[]).push([id,phase,Math.round(d)])}>
+   Compare each section's actualDuration against the total long task. In the reference audit
+   25 @godxjp/ui composite fields mounted in 79ms \u2014 the other ~150ms was the PAGE re-rendering
+   everything else. Indict with numbers, then fix only what they indict.
+3) Dev-mode caveat: development React is 3\u20135\xD7 slower; a one-off 60ms task at popup-open is
+   normal. Re-measure AFTER the fix with the same probes and paste before/after numbers.`
+      },
+      {
+        id: "filter-pane-memo",
+        title: "Filter panes: per-field memo + stable setters",
+        tagline: "Page-root state with no memo boundaries = the whole pane re-renders per keystroke.",
+        body: `The classic failure: all search state lives at the page root, every field reads it
+inline \u2192 one keystroke re-renders ~30 fields + the results table (165ms/key measured).
+The proven fix shape:
+- module-level memo field units: const FText = memo(function FText({ id, label, k, value, onSet }) {
+    return <FormField id={id} label={label}><Input id={id} value={value}
+      onChange={(e) => onSet(k, e.target.value)} /></FormField>; });
+- ONE stable setter per state map: const setField = useCallback((key, value) =>
+    setCond(c => ({ ...c, [key]: value })), []);
+- the results table in its OWN memo component; pagination pages WITHIN the submitted query
+  (setSubmitted(prev => ({ ...prev, page }))) so its handler stays identity-stable.
+After: a keystroke re-renders exactly one field (5ms). Don't memo cheap leaves that re-render
+rarely \u2014 over-memoization is real overhead. react-compiler lint traps: no ref writes during
+render, no sync setState in effect bodies; the sanctioned latch is the guarded render-time set
+(if (cond && !state) setState(true)).`
+      },
+      {
+        id: "heavy-panels",
+        title: "Heavy hidden panels: defer, keep mounted, pre-mount at idle",
+        tagline: "Never mount a 25-field subtree synchronously inside a click handler.",
+        body: `A \u8A73\u7D30\u6761\u4EF6-style toggle that conditionally renders a large subtree blocks the click
+(~230ms measured). Three-layer fix, in order:
+1) urgent state drives only the button chrome (chevron/aria-expanded);
+2) const deferredOpen = useDeferredValue(open) gates the FIRST mount into a deferred lane;
+3) keep it mounted afterwards and toggle visibility: <div className={open ? "contents" : "hidden"}>
+   ("contents" keeps children in the parent flex/grid rhythm; field state lives in the page so
+   hiding loses nothing);
+4) optionally pre-mount during idle after first paint so even the FIRST open is instant:
+   useEffect(() => { const idle = window.requestIdleCallback ?? (cb => setTimeout(cb, 300));
+     const h = idle(() => setMounted(true)); return () => (window.cancelIdleCallback ?? clearTimeout)(h); }, []);
+Measured after: open 270ms \u2192 18ms, zero post-load long tasks.`
+      },
+      {
+        id: "bundle-budget",
+        title: "Code splitting + what an import costs",
+        tagline: "lazy() every page; know the per-import budget before blaming the library.",
+        body: `Route-level splitting is the default app shape: const Page = lazy(() => import("@/pages/Page"))
+behind ONE <Suspense fallback={<PageContainer title={<Skeleton \u2026/>}><Skeleton \u2026/></PageContainer>}>.
+Reference app: initial 929KB \u2192 675KB; the orders screen (day-picker + table stack, 122KB) and
+login (react-hook-form + zod, 93KB) load only when visited.
+Per-import minified budget of @godxjp/ui \u226513.10.0 (preserved-module dist \u2014 imports tree-shake
+for real): StatCard 30KB \xB7 Input 52 \xB7 Button 56 \xB7 DataTable 79 \xB7 Select 165 \xB7 DateRangePicker 207
+(genuinely needs react-day-picker + date-fns). A shared ~50KB floor is intrinsic (tailwind-merge
++ bundled 3-locale i18n) and amortizes across one vendor chunk. Virtualize lists only >100 rows \u2014
+DataTable at 50/page does not need it. The dist is bundler-oriented ESM (extensionless + JSON
+imports): fine for vite/webpack consumers; when testing against a local checkout run tests on an
+npm-pack TARBALL install, not a file: symlink (the symlink's nested node_modules creates a
+dual-React artifact under vitest).`
+      }
+    ]
   }
 ];
 function findSkill(id) {
@@ -8737,6 +9764,29 @@ function routeTask(task, opts) {
     "If @godxjp/ui itself is at fault, don't fake a workaround \u2014 file a detailed gh issue (use draft_bug_report).",
     ["design-to-page/report-bug"]
   );
+  route(
+    [
+      "slow",
+      "performance",
+      "perf",
+      "violation",
+      "long task",
+      "lag",
+      "janky",
+      "re-render",
+      "rerender",
+      "bundle size",
+      "code splitting",
+      "tree-shak",
+      "ch\u1EADm",
+      "l\u1ED7i hi\u1EC7u n\u0103ng",
+      "\u91CD\u3044"
+    ],
+    "app-performance",
+    "measure-first",
+    "Measure FIRST (longtask + temporary Profiler), then apply the matching proven fix \u2014 page architecture, not the library, is almost always the culprit.",
+    ["app-performance/filter-pane-memo", "app-performance/heavy-panels", "app-performance/bundle-budget"]
+  );
   const filtered = opts?.consumerOnly ? matches.filter((m) => {
     const sk = findSkill(m.skill);
     return !sk || sk.audience !== "core";
@@ -9952,6 +11002,62 @@ ${section.body}
 
 _Source: ${skill.source}_`;
 }
+var TOKEN_PREFIXES = {
+  Badge: ["badge"],
+  Button: ["button"],
+  Toggle: ["toggle"],
+  TagInput: ["tag-input"],
+  Card: ["card"],
+  StatCard: ["stat-card"],
+  Table: ["table"],
+  DataTable: ["table"],
+  Dialog: ["dialog"],
+  AlertDialog: ["dialog"],
+  Sheet: ["dialog"],
+  Drawer: ["dialog"],
+  Alert: ["alert"],
+  EmptyState: ["empty-state"],
+  Skeleton: ["skeleton"],
+  Pagination: ["pagination"],
+  Toolbar: ["filter"],
+  Breadcrumb: ["breadcrumb"],
+  Menubar: ["menubar"],
+  Progress: ["progress"],
+  TreeSelect: ["tree"],
+  Timeline: ["timeline"],
+  PasswordStrength: ["password-strength"],
+  PasswordInput: ["password-strength"],
+  Checkbox: ["checkbox"],
+  Switch: ["switch"],
+  Slider: ["slider"],
+  ColorPicker: ["color-picker"],
+  Command: ["command"],
+  Radio: ["choice"],
+  RadioGroup: ["choice"],
+  Field: ["choice"],
+  AppShell: ["sidebar", "topbar"],
+  Sidebar: ["sidebar"],
+  Topbar: ["topbar"],
+  Form: ["form"],
+  FormField: ["form"],
+  // Shared control sizing/typography — every plain control reads these.
+  Input: ["control"],
+  Textarea: ["control"],
+  NumberInput: ["control"],
+  Select: ["control", "search-input"],
+  Cascader: ["control"],
+  DatePicker: ["control"],
+  TimePicker: ["control"],
+  InputOTP: ["control"]
+};
+function componentTokensFor(name) {
+  const prefixes = TOKEN_PREFIXES[name] ?? [
+    name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
+  ];
+  return COMPONENT_TOKENS.filter(
+    (t) => prefixes.some((p) => t.name.startsWith(`--${p}-`))
+  );
+}
 function getComponent(name) {
   const c = findComponent(name);
   if (!c) return `Component "${name}" not found. Use \`list_primitives\` to discover.`;
@@ -9977,6 +11083,20 @@ function getComponent(name) {
 `;
   for (const p of c.props) {
     out += `| \`${p.name}\` | \`${p.type}\` | ${p.required ? "\u2713" : ""} | ${p.defaultValue ? `\`${p.defaultValue}\`` : ""} | ${p.description} |
+`;
+  }
+  const tokens = componentTokensFor(c.name);
+  if (tokens.length) {
+    out += `
+## Design tokens (theme knobs)
+
+Override these in a service \`theme.css\` to re-tune ONLY this component (never hard-code or fork CSS \u2014 rules #44/#45/#46):
+
+`;
+    out += `| Token | Default | What it controls |
+|---|---|---|
+`;
+    for (const t of tokens) out += `| \`${t.name}\` | \`${t.value}\` | ${t.description} |
 `;
   }
   if (c.usage && c.usage.length) {
@@ -10448,8 +11568,8 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "0.21.3",
-  description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 34 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
+  version: "0.22.0",
+  description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
   type: "module",
   main: "./dist/index.js",
   module: "./dist/index.js",