@godxjp/ui-mcp 0.22.0 → 13.16.3

package/dist/index.js

@@ -58,6 +58,12 @@ var COMPONENTS = [
         defaultValue: "false",
         description: 'Pin footer to viewport bottom on scroll \u2014 pairs with variant="narrow".'
       },
+      {
+        name: "footerReveal",
+        type: '"always" | "onScroll"',
+        defaultValue: '"always"',
+        description: 'When the footer is sticky, control WHEN it shows. "always" keeps it pinned the whole time; "onScroll" hides it until the header scrolls out of view then slides it up \u2014 the standard edit/create save bar. Stays mounted (no reflow \u2192 no jitter).'
+      },
       {
         name: "fill",
         type: "boolean",
@@ -82,7 +88,7 @@ var COMPONENTS = [
     ],
     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.",
-      "A detail / edit form page where the footer holds Save and Cancel buttons \u2014 use `footer={<Flex direction='row'><Button>\u4FDD\u5B58</Button><Button variant='outline'>\u30AD\u30E3\u30F3\u30BB\u30EB</Button></Flex>}` with `stickyFooter` so the actions remain reachable as the form scrolls.",
+      "A detail / edit form page where the footer holds Save and Cancel buttons \u2014 use `footer={<Flex direction='row' justify='between' className='w-full'><Button variant='outline'>\u524A\u9664</Button><Button>\u4FDD\u5B58</Button></Flex>}` with `stickyFooter` + `footerReveal='onScroll'` so the save bar slides up only once the header (and its actions) scroll out of view \u2014 the canonical edit/create pattern.",
       "A settings or narrow-form page (e.g. account profile, entity configuration) where `variant='narrow'` constrains content to a readable column width and `stickyFooter` pins the submit bar.",
       "A dashboard page with KPI cards and chart sections \u2014 use `variant='default'` with `children={<Flex direction='col' gap='lg'>\u2026</Flex>}` to vertically stack multiple Card/StatCard sections beneath the page title.",
       "Any deep-nav page in a multi-level admin (e.g. Accounting > Ledger > Journal Entry #42) where a 3-segment breadcrumb trail provides back-navigation without browser history dependence.",
@@ -941,7 +947,7 @@ import { Trash2 } from "lucide-react";
         name: "columns",
         type: "ColumnDef<T>[]",
         required: true,
-        description: "Column definitions. Each column: { value: string; header: ReactNode; render?: (row: T) => ReactNode; sortable?: boolean; width?: string; align?: 'left'|'center'|'right'; hiddenOnMobile?: boolean }. If render is omitted, the raw value at row[key] is rendered as a string."
+        description: "Column definitions. Each column: { key: string; header: ReactNode; render?: (row: T) => ReactNode; sortable?: boolean; width?: string; align?: 'left'|'center'|'right'; hiddenOnMobile?: boolean; pin?: 'end' }. If render is omitted, the raw value at row[key] is rendered as a string. pin:'end' sticks the column (typically row actions) to the inline-end edge on horizontal scroll with a separating shadow \u2014 pin at most one column."
       },
       {
         name: "getRowId",
@@ -972,15 +978,33 @@ import { Trash2 } from "lucide-react";
       },
       {
         name: "density",
-        type: "'compact' | 'comfortable'",
+        type: "'compact' | 'default' | 'comfortable'",
         defaultValue: "'compact'",
-        description: "Controlled row density. Omit to let DataTable manage density internally (user can toggle via DataTable.DensityToggle)."
+        description: "Controlled row density across all three tiers (compact 28 / default 36 / comfortable 48) \u2014 drive it from a \u8868\u793A\u5BC6\u5EA6 radio. Omit to let DataTable manage it internally (DataTable.DensityToggle flips compact\u2194comfortable)."
       },
       {
         name: "onDensityChange",
-        type: "(density: 'compact' | 'comfortable') => void",
+        type: "(density: 'compact' | 'default' | 'comfortable') => void",
         description: "Called when the user toggles density. Only needed when density is controlled."
       },
+      {
+        name: "striped",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Zebra-stripe the body rows (even rows get a subtle muted fill)."
+      },
+      {
+        name: "hoverable",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Highlight a row on hover even when it is not clickable. onRowClick already implies hover; use this for read-only tables that still want the hover affordance."
+      },
+      {
+        name: "stickyHeader",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Pin the header to the top while the body scrolls (\u30D8\u30C3\u30C0\u8FFD\u5F93). Set false to let it scroll away with the rows."
+      },
       {
         name: "sort",
         type: "{ value: string; direction: 'asc' | 'desc' }",
@@ -995,7 +1019,7 @@ import { Trash2 } from "lucide-react";
         name: "loading",
         type: "boolean",
         defaultValue: "false",
-        description: "When true, renders a full-width loading row instead of data rows or the empty state. Use during initial fetch or pagination transitions."
+        description: "When true, swaps the body for SHAPED skeleton rows rendered inside the table's own grid (one border, aligned columns) \u2014 never a separate <SkeletonTable> in a Card (that double-borders). With React Query keepPreviousData, drive this off isPlaceholderData (pagination/search) || isLoading (first load), NOT isLoading alone. Suppresses the empty state while true."
       },
       {
         name: "empty",
@@ -1210,7 +1234,7 @@ export function Grid({ rows }: { rows: Row[] }) {
   {
     name: "Card",
     group: "data-display",
-    tagline: 'Surface container with optional accent stripe, variant fill, size, and density. \u26A0\uFE0F The bare <Card> has NO inner padding \u2014 body content MUST be wrapped in <CardContent> (titles in <CardHeader>), or it sits FLUSH against the card edges. Never hand-roll padding with className="p-4"; use <CardContent>. Compose with CardHeader/CardTitle/CardContent/CardFooter.',
+    tagline: 'Surface container with optional accent stripe, variant fill, size, and density. \u26A0\uFE0F The bare <Card> has NO inner padding \u2014 body content MUST be wrapped in <CardContent> (titles in <CardHeader>), or it sits FLUSH against the card edges. Never hand-roll padding with className="p-4"; use <CardContent>. Compose with CardHeader/CardTitle/CardContent/CardFooter. For a tab/toolbar/filter strip (view tabs, list controls) use <CardBar extra={\u2026}> \u2014 a positionable bar that auto-draws its separator from its position (top\u2192bottom border, bottom\u2192top border, middle\u2192both) and pins `extra` content to the inline-end edge; place it as first/last child of the Card. Never hand-roll a bordered div for this.',
     props: [
       {
         name: "accent",
@@ -3604,9 +3628,40 @@ import { Button } from "@godxjp/ui/general";
         type: '"24h" | "12h" | "locale"',
         defaultValue: '"locale"',
         description: "Initial clock format."
+      },
+      {
+        name: "theme",
+        type: '"light" | "dark"',
+        defaultValue: '"light"',
+        description: 'Theme axis \u2192 <html data-theme>. Equal alias of the legacy .dark class. Persisted; change via setTheme / <AppSettingPicker kind="theme">.'
+      },
+      {
+        name: "brand",
+        type: '"brand" | "crm" | "logistics" | "partner" | "slate" | null',
+        defaultValue: "null",
+        description: "Brand-palette axis \u2192 <html data-brand> (sets --primary/--ring/--accent). OPT-IN: null keeps the --primary your own theme.css defines."
+      },
+      {
+        name: "density",
+        type: '"compact" | "default" | "comfortable"',
+        defaultValue: '"default"',
+        description: "Density axis \u2192 <html data-density>. A named preset of the global --scaling factor (compact .92 / default 1 / comfortable 1.08): every size token rescales in proportion app-wide. PageContainer density= overrides locally."
+      },
+      {
+        name: "scaling",
+        type: "number | null",
+        defaultValue: "null",
+        description: "Continuous global size multiplier \u2192 inline --scaling on <html> (Radix model). Scales spacing, control/table/checkbox/switch heights, radius in proportion. null defers to the density preset; a number (e.g. 0.95) overrides it. Type is NOT scaled (separate fontSize axis)."
+      },
+      {
+        name: "fontSize",
+        type: '"sm" | "default" | "lg"',
+        defaultValue: '"default"',
+        description: "Base type-size axis \u2192 <html data-font-size>. A preset sets --font-size-base and the whole golden scale rescales. Orthogonal to --scaling."
       }
     ],
     usage: [
+      'DO drive the four theme axes (theme / brand / density / fontSize) from AppProvider props ONLY \u2014 they are written to <html data-*> and read by every component via tokens. Never hand-set --font-size-base or .ui-density-* in app CSS; that bypasses persistence + the runtime switchers. For runtime switching mount `<AppSettingPicker kind="density" | "fontSize" | "theme" | "brand" >` or call setDensity/setFontSize/setTheme/setBrand from useAppContext().',
       "DO mount AppProvider ONCE at the application root (e.g. in app.tsx or the Inertia layout), wrapping ALL children \u2014 every godx-ui picker (LocalePicker, TimezonePicker, DateFormatPicker, TimeFormatPicker), every formatDate call, and the Toaster all rely on the single context it provides. Nesting two AppProviders creates split contexts; inner pickers silently read the wrong one.",
       "DO NOT omit AppProvider and then try to use LocalePicker, TimezonePicker, or formatDate standalone \u2014 useAppContext() throws 'useAppContext must be used within <AppProvider>' at runtime. The only exception is using those pickers in fully controlled mode (value + onChange) which reads useOptionalAppContext() and returns null safely.",
       "DO use the `persist={false}` prop on AppProvider when writing isolated tests or standalone settings forms where localStorage should not be read or written. With the default `persist={true}` the provider reads from localStorage key `godxjp.app` on mount (after first render), so initial state may differ between SSR and client.",
@@ -6993,12 +7048,12 @@ export default function PasswordBlock() {
   {
     name: "AppSettingPicker",
     group: "navigation",
-    tagline: "One provider-bound Select for a single AppProvider setting, chosen by `kind` (locale | timezone | dateFormat | timeFormat) \u2014 replaces the former Locale/Timezone/Date-format/Time-format pickers. Throws if used without AppProvider AND without controlled value+onValueChange.",
+    tagline: "One provider-bound Select for a single AppProvider setting, chosen by `kind` (locale | timezone | dateFormat | timeFormat | theme | brand | density | fontSize) \u2014 covers locale/format AND the four theme axes. Throws if used without AppProvider AND without controlled value+onValueChange.",
     props: [
       {
         name: "kind",
-        type: '"locale" | "timezone" | "dateFormat" | "timeFormat"',
-        description: "Which AppProvider setting this picker reads and writes. Determines the option list, icon, trigger width, and the context value/setter used."
+        type: '"locale" | "timezone" | "dateFormat" | "timeFormat" | "theme" | "brand" | "density" | "fontSize"',
+        description: "Which AppProvider setting this picker reads and writes. Determines the option list, icon, trigger width, and the context value/setter used. The theme-axis kinds (theme/brand/density/fontSize) write <html data-*>; brand's first option opts out (null \u2192 app token)."
       },
       {
         name: "value",
@@ -7456,257 +7511,257 @@ var COMPONENT_TOKENS = [
   },
   {
     "name": "--control-height",
-    "value": "var(--control-height-default)",
+    "value": "calc(var(--control-height-default) * var(--scaling))",
     "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)."
+    "value": "calc(var(--control-height) - calc(0.25rem * var(--scaling)))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(var(--control-height) + calc(0.25rem * var(--scaling)))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(var(--control-height) - calc(0.5rem * var(--scaling)))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(1rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(0.875rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(1rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(2.25rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(1.25rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(1rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "value": "calc(1rem * var(--scaling))",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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)."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "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."
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
     "name": "--button-sm-font-size",
     "value": "var(--font-size-xs)",
+    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+  },
+  {
+    "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."
   },
   {
@@ -7961,7 +8016,7 @@ var COMPONENT_TOKENS = [
   },
   {
     "name": "--table-row-height",
-    "value": "var(--table-row-height-default)",
+    "value": "calc(var(--table-row-height-default) * var(--scaling))",
     "description": "Table component tokens: row height, cell padding."
   },
   {
@@ -7978,6 +8033,11 @@ var COMPONENT_TOKENS = [
     "name": "--table-head-font-size",
     "value": "var(--font-size-xs)",
     "description": "Table component tokens: row height, cell padding."
+  },
+  {
+    "name": "--table-pin-shadow",
+    "value": "-6px 0 6px -5px hsl(var(--foreground) / 0.12)",
+    "description": "Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over."
   }
 ];
 
@@ -8751,6 +8811,71 @@ broken). Spinner during init is wrong (nothing to spin over).`
       }
     ]
   },
+  // ── crud-list (search/list pages) ─────────────────────────────
+  {
+    id: "crud-list",
+    audience: "consumer",
+    name: "CRUD list / search page \u2014 DataTable + search recipe",
+    whenToUse: "Building any list/index/search screen over a paginated API: an admin table with a search panel, pagination, and row actions. The invariant contract for 'processing' feedback, disabled controls, sticky actions, and the search form.",
+    source: "@godxjp/ui DataTable + TanStack Query keepPreviousData contract",
+    sections: [
+      {
+        id: "fetch-contract",
+        title: "Fetch contract \u2014 keepPreviousData \u2192 isPlaceholderData",
+        tagline: "Pagination/search keeps the old page on screen; isPlaceholderData IS the processing flag.",
+        body: `Use React Query with placeholderData: keepPreviousData and the
+search params IN the queryKey (["orders", params]). On a new page/search
+the previous rows stay mounted, so isLoading is FALSE \u2014 do NOT key
+loading UI off isLoading. The processing signal is isPlaceholderData
+(params changed, new data in flight). First-ever load (no prior data) is
+isLoading. So: loading = isLoading || isPlaceholderData. Idle the query
+(enabled: params !== null) until the user searches.`
+      },
+      {
+        id: "loading-skeleton",
+        title: "Skeleton via DataTable loading \u2014 never hand-roll",
+        tagline: "Pass loading to <DataTable>; it renders a shaped skeleton INSIDE its own grid.",
+        body: `<DataTable data={rows} columns={columns} loading={loading} />.
+DataTable swaps its body for shaped skeleton rows that reuse its own
+grid \u2014 one border, aligned columns. NEVER render a separate
+<SkeletonTable> inside a <Card> next to/around the table: the skeleton's
+frame + the Card's border = an ugly DOUBLE BORDER. Keep summary lines as
+Skeleton bars while loading too, so stale counts don't flash.`
+      },
+      {
+        id: "disable-controls",
+        title: "Disable search + pager while fetching",
+        tagline: "A request is in flight \u2192 block re-submits. loading on Button, disabled on Pagination.",
+        body: `The \u7167\u4F1A/Search button: <Button loading={isFetching}> (loading
+implies disabled). The pager: <Pagination disabled={loading} /> \u2014 it
+blocks prev/next/page clicks AND onValueChange while a fetch is running,
+so the user can't queue a second request mid-flight. Drive both off the
+SAME processing flag as the skeleton so the screen is coherent.`
+      },
+      {
+        id: "sticky-actions",
+        title: "Row-actions column is pinned to the end",
+        tagline: "Action buttons must stay visible on horizontal scroll \u2014 column pin: 'end'.",
+        body: `Give the actions column { key: "actions", header: "\u64CD\u4F5C",
+pin: "end", align: "right" }. DataTable makes it position:sticky at the
+inline-end edge with an opaque, hover/selection-aware background and a
+separating shadow (\u2014table-pin-shadow), and suppresses the scroll fade so
+it isn't dimmed. Pin at most ONE column per table. RTL-correct out of the
+box (logical inset-inline-end).`
+      },
+      {
+        id: "search-form",
+        title: "Search panel is Form + FormField + real pickers",
+        tagline: "No ad-hoc labels/inputs; date ranges use the range pickers; no hard-coded text sizes.",
+        body: `Build the search conditions with <Form>/<FormField> (label +
+a11y wiring), real DatePicker/DateRangePicker/MonthPicker/NumberInput/
+Select for each field \u2014 never bare <input> or hand-rolled labels. Group
+advanced conditions behind a \u8A73\u7D30\u6761\u4EF6 toggle. Submit copies the live
+condition state into the query params (a new object \u2192 new queryKey \u2192
+fetch). Clear resets to the idle (null) state.`
+      }
+    ]
+  },
   // ── soft (Awwwards / premium agency) ───────────────────────────
   {
     id: "soft",
@@ -11568,7 +11693,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "0.22.0",
+  version: "13.16.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, 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",