@godxjp/ui-mcp 0.17.0 → 0.18.0

package/dist/index.js

@@ -950,6 +950,99 @@ export default function InvoiceList({
     storyPath: "data-display/DataTable.stories.tsx",
     rules: [24, 31, 35, 37]
   },
+  {
+    name: "DataGrid",
+    group: "data-display",
+    tagline: "Full-feature data grid \u2014 the TanStack Table adapter on `@godxjp/ui/data-grid` (NOT the data-display barrel). Adds column sort, global search, column visibility ('set view'), per-page + numbered pagination, row selection + bulk actions, and density over the styled Table* primitives. Defaults to SERVER/manual mode: wire sorting/columnFilters/globalFilter/pagination to your AJAX query (pass rowCount). Use DataTable instead for a lean server-driven list that must NOT pull TanStack. Requires the `@tanstack/react-table` peer dependency.",
+    props: [
+      {
+        name: "columns",
+        type: "ColumnDef<T, unknown>[]",
+        required: true,
+        description: "TanStack column definitions ({ accessorKey, header, cell, enableSorting, enableHiding, meta:{label} }). Set enableHiding:false to keep a column out of the ViewOptions menu; meta.label gives a human label there when header is JSX."
+      },
+      {
+        name: "data",
+        type: "T[]",
+        required: true,
+        description: "Row data. Empty + loading=false renders a built-in EmptyState in the body."
+      },
+      {
+        name: "getRowId",
+        type: "(row: T) => string",
+        description: "Stable row id (defaults to row[rowIdKey], rowIdKey defaults to 'id')."
+      },
+      {
+        name: "enableRowSelection",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Adds a checkbox column + header select-all; pair with DataGrid.BulkActions."
+      },
+      {
+        name: "sorting / onSortingChange",
+        type: "SortingState / OnChangeFn<SortingState>",
+        description: "Server sort: pass both and sort in your query (manualSorting defaults true). Omit both for client sort."
+      },
+      {
+        name: "globalFilter / onGlobalFilterChange",
+        type: "string / OnChangeFn<string>",
+        description: "Global search term, surfaced by DataGrid.Search. Server or client like sorting."
+      },
+      {
+        name: "pagination / onPaginationChange / rowCount",
+        type: "PaginationState / OnChangeFn / number",
+        description: "Server pagination: pass pagination + onPaginationChange + rowCount (total). Omit for client pagination."
+      },
+      {
+        name: "columnVisibility / onColumnVisibilityChange",
+        type: "VisibilityState / OnChangeFn<VisibilityState>",
+        description: "Column show/hide state surfaced by DataGrid.ViewOptions ('set view'). Internal if omitted."
+      },
+      {
+        name: "manualSorting / manualFiltering / manualPagination",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Default true (server/AJAX). Set false to let TanStack sort/filter/paginate in-browser."
+      },
+      {
+        name: "loading / density / onRowClick / empty",
+        type: "boolean / 'compact'|'comfortable' / (row:T)=>void / ReactNode",
+        description: "Loading row, controlled density, clickable rows, custom empty content."
+      }
+    ],
+    usage: [
+      "Import from `@godxjp/ui/data-grid` \u2014 it lives on its own subpath because it pulls @tanstack/react-table; it is NOT in the runtime-neutral root or the data-display barrel.",
+      "Compose the compound parts as children: <DataGrid.Toolbar> (holds <DataGrid.BulkActions>, <DataGrid.Search>, <DataGrid.ViewOptions>, <DataGrid.DensityToggle>), then <DataGrid.Content> (auto-included if omitted) and <DataGrid.Pagination pageSizeOptions=[...]>.",
+      "Server mode (default): drive sorting/globalFilter/pagination from useQuery and pass rowCount. Client mode: set manualSorting/manualFiltering/manualPagination={false} and the grid handles it on the data array."
+    ],
+    related: ["DataTable", "Table", "DataState", "Select", "DropdownMenu"],
+    example: `import { DataGrid, type ColumnDef } from "@godxjp/ui/data-grid";
+import { Flex } from "@godxjp/ui/layout";
+
+type Row = { id: string; name: string; amount: number };
+const columns: ColumnDef<Row, unknown>[] = [
+  { accessorKey: "name", header: "Name", meta: { label: "Name" } },
+  { accessorKey: "amount", header: "Amount", meta: { label: "Amount" } },
+];
+
+export function Grid({ rows }: { rows: Row[] }) {
+  return (
+    <DataGrid columns={columns} data={rows} getRowId={(r) => r.id} enableRowSelection manualSorting={false} manualFiltering={false} manualPagination={false}>
+      <DataGrid.Toolbar>
+        <Flex direction="row" align="center" gap="sm" className="ms-auto">
+          <DataGrid.Search />
+          <DataGrid.ViewOptions />
+          <DataGrid.DensityToggle />
+        </Flex>
+      </DataGrid.Toolbar>
+      <DataGrid.Content />
+      <DataGrid.Pagination pageSizeOptions={[10, 20, 50]} />
+    </DataGrid>
+  );
+}`,
+    storyPath: "data-display/DataGrid.stories.tsx",
+    rules: [24, 31, 35, 37]
+  },
   {
     name: "Card",
     group: "data-display",
@@ -6508,6 +6601,11 @@ var CARDINAL_RULES = [
     number: 40,
     title: "Pages are mobile-first",
     body: "Author and verify every page at 320\u2013390px FIRST. Spacing comes only from `Stack` / `Inline` `gap` + `ResponsiveGrid columns={2|3|4}` (which collapse to a single column on narrow screens) \u2014 never raw `p-*` / `gap-*` / `space-*` utilities for page layout. Wide tables scroll horizontally on small screens (don't force-fit them); dialogs and sheets are full-height on mobile. Touch targets \u2265 44\xD744px."
+  },
+  {
+    number: 41,
+    title: "Drawer & dialog footer layout",
+    body: 'Sheet/Dialog/AlertDialog footers are a pinned action bar (Ant Design Drawer footer): the footer sticks to the bottom, SheetFooter draws a full-bleed top border, and actions are RIGHT-aligned with the PRIMARY button rightmost (Cancel/secondary to its left). A destructive / clear / reset action goes far-LEFT \u2014 give that button `className="mr-auto"`. NEVER stack footer buttons full-width or center them.'
   }
 ];
 function findRule(num) {
@@ -7554,6 +7652,140 @@ XProp + XProp as XProps and register in props/registry. Then: add an MCP catalog
 real-screen docs page; verify typecheck/lint/audit/check:*/preview:build/test all green.`
       }
     ]
+  },
+  // ── design-to-page (consumer: handoff → real page) ─────────────
+  {
+    id: "design-to-page",
+    name: "Design handoff \u2192 real page (consumer build guide)",
+    whenToUse: "You (a consumer agent) received a Claude Design handoff \u2014 a bundle/mock/screenshot/HTML prototype or a written brief \u2014 and must build it as a REAL page with @godxjp/ui. Read this BEFORE writing any JSX. It teaches: read intent, map every block to a real primitive via this MCP, consume existing tokens, apply the dxs-kintai DNA, treat tables as the centerpiece, resolve gaps by extend-or-ask, and verify.",
+    source: "@godxjp/ui .design/research (chats-intent, tables, atomic-components) + dxs-kintai SKILL/colors_and_type.css",
+    sections: [
+      {
+        id: "read-intent",
+        title: "Read the intent \u2014 chats before pixels",
+        tagline: "A handoff is a prototype, not production code. Build the intent, not the markup.",
+        body: `A Claude Design bundle is HTML/CSS/JS to LOOK AT \u2014 never transcribe its DOM.
+If the bundle has chats/*.md, read them FIRST: they hold what the user actually
+wanted after iterating, the directions rejected, and the explicit rules. The final
+HTML is just the last output; the chat is the intent. Then read the README/SKILL +
+colors_and_type.css for the DNA. Distil each screen to ONE primary question it
+answers (one-intent-per-screen) before choosing components. Honesty rules that
+recur in this DNA: render only VALID actions (no disabled-button noise \u2014 a punch
+card off-state shows Check-In only, never a greyed Check-Out); label = identity
+(never changes), helper row = state (error/help goes BELOW, never recolours the
+label); entry-point affordances live in chrome, not floating in content.`
+      },
+      {
+        id: "map-to-primitives",
+        title: "Map every block to a real primitive \u2014 MCP-first, never hand-roll",
+        tagline: "For each visual block ask 'which @godxjp/ui component is this?' \u2014 list_primitives, then get_component.",
+        body: `NEVER hand-roll a styled <div> that looks like a Card, or use raw
+<input>/<select>/<button>/<table>. Decompose each screen into a shopping list and
+resolve each item through THIS MCP: list_primitives to discover, get_component to
+confirm the exact prop/union before you write (never guess a prop). Typical map:
+page chrome \u2192 AppShell/Sidebar/Topbar/PageContainer; stat row \u2192 ResponsiveGrid +
+StatCard; data grid \u2192 DataTable; status pill \u2192 Badge tone=\u2026; filter row \u2192 Form
+inline + Select/Input; org\u2192branch \u2192 Cascader/TreeSelect; date/time \u2192 DatePicker/
+TimePicker; \u2318K \u2192 Command; bulk drawer/detail \u2192 Drawer/Sheet/Dialog; split list+
+detail \u2192 SplitPane/Resizable; empty \u2192 EmptyState; confirm \u2192 AlertDialog; toast \u2192
+Sonner. No duplication: Select (showSearch/loadOptions) is the ONLY searchable/
+async select (no Combobox/Autocomplete); the 4 i18n pickers are one AppSettingPicker
+kind=\u2026. A table = Card + CardContent-flush + DataTable (not PageContainer flush).`
+      },
+      {
+        id: "tokens-exist",
+        title: "Tokens already exist \u2014 consume var(--\u2026), never redeclare",
+        tagline: "The design's colors_and_type.css is already implemented as foundation.css.",
+        body: `The handoff's colors_and_type.css (SmartHR blue, wa-iro, M PLUS 2, the
+density scale) is ALREADY shipped as @godxjp/ui's foundation tokens. Never paste a
+hex, never redeclare a token, never invent a neutral. Consume var(--\u2026) and the
+semantic utilities. Use get_tokens (MCP) to find the right name \u2014 if a token seems
+missing it almost certainly exists under a different name. Soft tints come from
+color-mix(in oklch, var(--primary) 15%, transparent), NOT a new pale hex. Control
+heights come from the density scale (xs 24 / sm 28 / default 32 / lg 36 / xl 44),
+never a literal px. Radii: card 6px, control 4px, inner pill 2px.`
+      },
+      {
+        id: "dna",
+        title: "Apply the dxs-kintai DNA",
+        tagline: "\u6E0B\u307F / \u9593 / \u7C21\u7D20 \u2014 fixed color signaling, dense, small headings, 14/1.7, no emoji.",
+        body: `These rules survive when you drop the prototype's divs:
+\u2022 \u6E0B\u307F (restraint): primary chroma \u2264 0.18 \u2014 --primary is the single most-important
+  action + brand surfaces ONLY, never status. No gradients, no pill cards, no
+  saturated brand.
+\u2022 \u9593 (breathing): body 14px / 1.7 (NEVER 16/1.5); tabular-nums on every numeric
+  column/stat so digits align under 1.7 leading.
+\u2022 \u7C21\u7D20 (simplicity): three weights only \u2014 400/500/700 (no 300, no 600). Headings
+  stay SMALL: h1 = 20px, h2 = 18 (not 32) \u2014 JP enterprise is dense, big headings
+  waste \u9593.
+\u2022 Color signaling is FIXED-mapping: success \u82E5\u7AF9 \xB7 warning \u5C71\u5439(yellow) \xB7 info \u7FA4\u9752
+  \xB7 attention \u6731(orange \u2014 PREFER over red for non-destructive: \u9045\u523B/lateness) \xB7
+  danger \u831C(destructive only). Wa-iro is decorative (charts/tags/tenant) \u2014 NEVER
+  remap a wa-iro hue to a semantic role.
+\u2022 Density up front: compact 28 (heavy tables) \xB7 default 32 \xB7 comfortable 44 (login/
+  mobile, 44px touch floor). Set on the container; don't mix mid-page.
+\u2022 Cards: 1px border, NO shadow at rest (shadows only on popover md / dialog xl).
+\u2022 Copy quiet & factual \u2014 \u300C\u627F\u8A8D\u3057\u307E\u3057\u305F\u300D not \u300C\u627F\u8A8D\u306B\u6210\u529F\u3057\u307E\u3057\u305F\u{1F389}\u300D. Empty state =
+  one calm sentence, no illustration. NO emoji in product UI; Lucide 1.5px icons,
+  currentColor, sized by context (14 table / 16 nav / 18 button / 20 header).
+\u2022 Multi-tenant: tenants override only --primary/--ring/--foreground; semantic
+  colors stay shared (a "rejected" badge means the same everywhere).`
+      },
+      {
+        id: "tables-central",
+        title: "Tables are the centerpiece \u2014 DataTable + the variant catalogue",
+        tagline: "Enterprise \u52E4\u6020/admin lives in tables; showcase the family broadly.",
+        body: `Most of this DNA's real value is in tables \u2014 make DataTable the
+centerpiece. One shell: Card + CardContent-flush wrapping DataTable (1px border,
+6px radius, no shadow). Region order: view tabs \xB7 toolbar (search + \u2318K + density +
+columns + import/export + primary CTA) \xB7 active-filter chip bar \xB7 table \xB7 footer
+totals \xB7 pagination \u2014 every region optional. Build each pattern as its own block:
+assembled CRUD list \xB7 bulk-action toolbar (selection REPLACES toolbar; cross-page
+"select all 1,284"; destructive isolated last) \xB7 column manager \xB7 advanced filter
+AND/OR \xB7 sort/resize \xB7 expandable detail row \xB7 inline editable row (row-level
+commit, dirty dot, "\u672A\u4FDD\u5B58" footer) \xB7 grouped rows w/ subtotals \xB7 tree rows \xB7 sticky
+columns + horizontal scroll \xB7 pagination \xD73 (numbered/load-more/cursor) \xB7 import/
+export stepper \xB7 empty/loading(Skeleton)/error/no-perm states \xB7 footer totals \xB7
+compact kintone grid \xB7 conditional row/cell formatting. Cells: status \u2192 Badge tone;
+identity \u2192 Avatar + two-line; numerics right-aligned tabular-nums with \u2014 for null;
+IDs mono. Confirmed (\u78BA\u5B9A\u6E08) rows are frozen \u2014 no edit, no destructive bulk. Row
+states change only background via color-mix, never height/padding. get_component
+DataTable + get_vocab ColumnDef/TableDensity/SortState before you build.`
+      },
+      {
+        id: "gaps-extend-or-ask",
+        title: "Gaps \u2192 extend or ask \u2014 never invent",
+        tagline: "A block no primitive expresses is a decision, not a hand-roll.",
+        body: `When a block has no clean primitive/prop/variant, do NOT bake a bespoke
+one-off into the page. First try to EXTEND: can an existing component take one more
+tone/size/variant/slot, or be composed from existing primitives (e.g. a punch-card
+FSM, a mobile selection-bar, an i18n locale-field are compositions over Button/Card/
+Badge/Tabs/Input, not new primitives)? If it's a genuine gap or you're unsure, STOP
+and ASK the user (or surface it as an ADR/decision) \u2014 name the gap, propose
+"new variant on <X> vs. app-level composition vs. new component", and converge
+before building. Known gaps to expect in this DNA (ask rather than invent): three-
+level table density (current is binary), multi-sort priority badges, column resize/
+manager, numbered/load-more pagination, expandable/editable/grouped/tree/sticky-col
+table modes, filter chip bar + AND/OR panel, saved-view tabs, week-timeline/staff\xD7
+time calendar, multilingual-field, no-code builders. Never silently fill a gap.`
+      },
+      {
+        id: "verify",
+        title: "Verify \u2014 states complete, a11y, build green",
+        tagline: "Every state shown, WCAG 2.2 AA, typecheck/lint/audit clean, eyeballed at 3 widths.",
+        body: `Before calling it done: every prop \xD7 union value \xD7 state is exercised
+(default/hover/focus/active/disabled/loading/empty/error) \u2014 Skeleton for INIT fetch,
+spinner/loading for active save, EmptyState for no-data, inline error near the field
+(not a disappearing toast). A11y: correct roles/landmarks, keyboard (arrows/Home/End/
+Enter/Esc, visible focus, no positive tabindex), \u226524px targets, never colour-only
+state (add sr-only text), icon-only buttons have a name; aim for 0 vitest-axe
+violations. i18n: zero hardcoded strings \u2014 every label + aria-label through t(),
+format numbers/dates via Intl. Then run the build: pnpm typecheck + pnpm lint +
+pnpm audit must be green, console clean, and eyeball the page at 390 / 768 / 1280
+(atoms never wrap, containers wrap with row-gap, tabs horizontal-scroll, grids
+minmax(0,1fr), heights never break).`
+      }
+    ]
   }
 ];
 function findSkill(id) {
@@ -7652,6 +7884,13 @@ function routeTask(task) {
     "workflow",
     "Generate design image first \u2192 analyze \u2192 implement."
   );
+  route(
+    ["handoff", "design bundle", "claude design", "prototype", "build the page", "implement the design", "build this screen", "mockup"],
+    "design-to-page",
+    "map-to-primitives",
+    "Map every block to a real @godxjp/ui primitive (MCP-first), consume existing tokens, apply the dxs-kintai DNA, tables central, gaps \u2192 extend-or-ask, verify.",
+    ["design-to-page/read-intent", "design-to-page/dna", "design-to-page/tables-central"]
+  );
   if (matches.length === 0) {
     return [
       {
@@ -9155,12 +9394,71 @@ ${c.example}
   return out;
 }
 
+// package.json
+var package_default = {
+  name: "@godxjp/ui-mcp",
+  version: "0.18.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, 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).",
+  type: "module",
+  main: "./dist/index.js",
+  module: "./dist/index.js",
+  types: "./dist/index.d.ts",
+  bin: {
+    "godx-ui-mcp": "./dist/index.js"
+  },
+  files: [
+    "dist",
+    "README.md"
+  ],
+  publishConfig: {
+    registry: "https://registry.npmjs.org/",
+    access: "public"
+  },
+  repository: {
+    type: "git",
+    url: "git+https://github.com/godx-jp/godxjp-ui.git",
+    directory: "mcp"
+  },
+  homepage: "https://github.com/godx-jp/godxjp-ui/tree/main/mcp#readme",
+  license: "Apache-2.0",
+  scripts: {
+    build: "tsup",
+    dev: "tsup --watch",
+    start: "node dist/index.js",
+    inspect: "npx @modelcontextprotocol/inspector node dist/index.js",
+    "type-check": "tsc --noEmit",
+    test: "vitest run",
+    prepublishOnly: "npm run build"
+  },
+  dependencies: {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    zod: "^4.4.3"
+  },
+  devDependencies: {
+    "@types/node": "^22.10.0",
+    tsup: "^8.5.1",
+    typescript: "^6.0.3",
+    vitest: "^4.1.6"
+  },
+  keywords: [
+    "mcp",
+    "model-context-protocol",
+    "godxjp",
+    "ui",
+    "design-system",
+    "react",
+    "claude",
+    "cursor"
+  ]
+};
+
 // src/index.ts
 async function main() {
   const server = new Server(
     {
       name: "godx-ui-mcp",
-      version: "0.1.0"
+      // Track the package version — never hardcode (see server.test.ts guard).
+      version: package_default.version
     },
     {
       capabilities: {