@godxjp/ui-mcp 0.21.1 → 0.21.3

package/dist/index.js

@@ -57,6 +57,17 @@ var COMPONENTS = [
         type: "boolean",
         defaultValue: "false",
         description: 'Pin footer to viewport bottom on scroll \u2014 pairs with variant="narrow".'
+      },
+      {
+        name: "fill",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Grow the body to fill the remaining shell height. Default false = top-packed, content-height (short pages leave no stretched void). Enable for a full-height DataTable, SplitPane, or a chat surface."
+      },
+      {
+        name: "linkComponent",
+        type: "React.ElementType",
+        description: "Link component used for breadcrumb / header links (e.g. an Inertia or React Router `Link`). Defaults to a native `<a>`."
       }
     ],
     usage: [
@@ -65,7 +76,8 @@ var COMPONENTS = [
       "DO: Use `variant='flush'` when the page body contains a full-bleed component like DataTable. Inside a flush container, wrap any padded strips (Toolbar, intro text) in `<PageContainer.Inset>` to align them with the header. Never add manual `px-*` or `p-*` padding to compensate \u2014 use PageContainer.Inset.",
       "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."
+      "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."
     ],
     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.",
@@ -73,11 +85,12 @@ var COMPONENTS = [
       "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.",
-      "A high-density data reconciliation page where an analyst needs to see maximum rows \u2014 use `density='compact'` to tighten all spacing across the DataTable, Toolbar, and controls in a single prop."
+      "A high-density data reconciliation page where an analyst needs to see maximum rows \u2014 use `density='compact'` to tighten all spacing across the DataTable, Toolbar, and controls in a single prop.",
+      "A chat / messaging detail page where the message list should scroll inside the page and the composer stays pinned at the bottom \u2014 use `fill` so the body occupies the full shell height, with `footer={<Composer/>}` + `stickyFooter`. Without `fill` the page would top-pack and the composer would float mid-screen on a tall viewport."
     ],
     related: [
       "PageContainer.Inset \u2014 use INSIDE a `variant='flush'` PageContainer to re-introduce horizontal padding for strips like Toolbar or intro text that should align with the page header, while the surrounding DataTable stays full-bleed. Not a standalone page shell.",
-      "PageContainer \u2014 always use PageContainer for new pages; it supports `children`, `footer`, `variant`, `density`, and `stickyFooter`. Legacy code using the old prop names (`description` \u2192 `subtitle`, `actions` \u2192 `extra`) should be migrated to PageContainer.",
+      "PageContainer \u2014 always use PageContainer for new pages; it supports `children`, `footer`, `variant`, `density`, `stickyFooter`, and `fill`. Legacy code using the old prop names (`description` \u2192 `subtitle`, `actions` \u2192 `extra`) should be migrated to PageContainer.",
       "AppShell \u2014 the outer shell that owns the sidebar/topbar layout grid; PageContainer lives inside AppShell's `children` slot. Do not put AppShell inside PageContainer \u2014 the nesting order is AppShell \u2192 PageContainer.",
       "SplitPane \u2014 use instead of PageContainer when the page body needs a fixed-width aside panel alongside main content (e.g. a detail drawer next to a list). PageContainer has no aside slot; SplitPane fills that gap and can itself be placed inside PageContainer's children."
     ],
@@ -267,6 +280,11 @@ import { StatCard } from "@godxjp/ui/data-display";
         name: "footer",
         type: "ReactNode",
         description: "App-level footer outside the main content area."
+      },
+      {
+        name: "breadcrumb",
+        type: "BreadcrumbProp",
+        description: "Breadcrumb trail rendered in the topbar header for back-navigation."
       }
     ],
     usage: [
@@ -750,6 +768,23 @@ function MyShell({ children }: { content: React.ReactNode }) {
         name: "onClick",
         type: "React.MouseEventHandler<HTMLButtonElement>",
         description: "Click handler. Does not fire while `loading` or `disabled`."
+      },
+      {
+        name: "count",
+        type: "number",
+        description: 'Trailing borderless counter pill after the label (filter tabs / segmented toggles, e.g. "Ch\u1EDD bay 18"). Localized via `Intl.NumberFormat`; styled per variant \u2014 never nest a `Badge` in a Button for this. Ignored when `asChild`.'
+      },
+      {
+        name: "overflowCount",
+        type: "number",
+        defaultValue: "99",
+        description: "Cap for `count` (Ant Badge parity) \u2014 when `count` exceeds it the pill renders `{overflowCount}+` (e.g. `99+`)."
+      },
+      {
+        name: "showZero",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Whether the pill renders when `count` is 0 (Ant Badge parity). Pass `false` to hide the pill at zero."
       }
     ],
     usage: [
@@ -818,6 +853,11 @@ import { Trash2 } from "lucide-react";
         type: '"span" | "p" | "div" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr"',
         defaultValue: '"span"',
         description: "Rendered element. `code`/`kbd` are monospace by default."
+      },
+      {
+        name: "htmlFor",
+        type: "string",
+        description: "When set, Text renders as a `<label>` bound to this control id (polymorphic label use)."
       }
     ],
     usage: [
@@ -1415,6 +1455,11 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         type: "ReactNode",
         required: true,
         description: "Descriptions.Item elements."
+      },
+      {
+        name: "items",
+        type: "DescriptionsItemProp[]",
+        description: "Data-driven rows `{ label, value, span? }` (label/value are ReactNode) \u2014 the alternative to composing `Descriptions.Item` children."
       }
     ],
     usage: [
@@ -1900,6 +1945,17 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         name: "onChange",
         type: "React.ChangeEventHandler<HTMLInputElement>",
         description: "Native change handler."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Opt-in inline \u2715 that clears the field while it holds text (works controlled + uncontrolled). Off by default, so existing inputs are unchanged."
+      },
+      {
+        name: "onClear",
+        type: "() => void",
+        description: "Called after the field is cleared via the inline \u2715 (requires `allowClear`)."
       }
     ],
     usage: [
@@ -2066,6 +2122,32 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
         type: "number",
         defaultValue: "250",
         description: "Debounce delay (ms)."
+      },
+      {
+        name: "id",
+        type: "string",
+        description: "Input id; pair with `label` or an external `<label htmlFor>`."
+      },
+      {
+        name: "label",
+        type: "React.ReactNode",
+        description: "Optional visible label rendered above the search box (falls back to an sr-only label)."
+      },
+      {
+        name: "onChange",
+        type: "(value: string) => void",
+        description: "Fires on EVERY keystroke (immediate) \u2014 required to keep a controlled `value` responsive."
+      },
+      {
+        name: "onSearchChange",
+        type: "(value: string) => void",
+        description: "Fires the DEBOUNCED search term after `debounceMs` \u2014 wire your query/filter here, not onChange."
+      },
+      {
+        name: "debounceMs",
+        type: "number",
+        defaultValue: "250",
+        description: "Debounce delay (ms) before `onSearchChange` / `onSearch` fires."
       }
     ],
     usage: [
@@ -2103,7 +2185,7 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
       {
         name: "options",
         type: "SearchSelectOptionProp[]",
-        description: "Static option list. Passing this (or loadOptions) switches Select from the compound API to the data-driven API. Each option has { value, label, sublabel?, group?, disabled? }. group buckets the option under an optgroup-style heading."
+        description: "Static option list. Passing this (or loadOptions) switches Select from the compound API to the data-driven API. Each option has { value, label, sublabel?, icon?, group?, disabled? }. `icon` (avatar / flag / lucide node) renders before the label in the rows AND on the trigger once selected. group buckets the option under an optgroup-style heading."
       },
       {
         name: "loadOptions",
@@ -2135,13 +2217,23 @@ import { ResponsiveGrid } from "@godxjp/ui/layout";
       {
         name: "renderOption",
         type: "(option: SearchSelectOptionProp) => React.ReactNode",
-        description: "Custom per-option renderer (Ant-Design style). Defaults to label + optional sublabel."
+        description: "Custom per-option renderer for the dropdown ROWS (Ant-Design style). Defaults to label + optional sublabel. Does not change the trigger \u2014 use `labelRender` for that."
+      },
+      {
+        name: "labelRender",
+        type: "(selected: { value: string; label: React.ReactNode; option?: SearchSelectOptionProp }) => React.ReactNode",
+        description: "Custom renderer for the SELECTED value shown on the TRIGGER (Ant Design `labelRender`) \u2014 avatar + name + role badge, etc. `option` is undefined for an async preset whose page hasn't loaded. Only used while a value is selected; the placeholder still shows when empty."
       },
       {
         name: "selectedLabel",
         type: "string",
         description: "Display label for the current value when its option is not in the loaded page (async). Prevents a flash of the raw id."
       },
+      {
+        name: "selectedIcon",
+        type: "React.ReactNode",
+        description: "Leading icon shown on the trigger for the current value when its option isn't loaded yet (async preset) \u2014 the trigger counterpart of `selectedLabel`, so an edit form pre-filled from the server shows the avatar/flag at rest."
+      },
       {
         name: "placeholder",
         type: "string",
@@ -2390,6 +2482,17 @@ export function PrioritySelect({ value, onValueChange }) {
         name: "onChange",
         type: "React.ChangeEventHandler<HTMLTextAreaElement>",
         description: "Change handler."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "false",
+        description: "Opt-in inline \u2715 at the top-end that clears the field while it holds text (controlled + uncontrolled). Off by default."
+      },
+      {
+        name: "onClear",
+        type: "() => void",
+        description: "Called after the field is cleared via the inline \u2715 (requires `allowClear`)."
       }
     ],
     usage: [
@@ -2524,6 +2627,21 @@ export function PrioritySelect({ value, onValueChange }) {
         type: '"horizontal" | "vertical"',
         defaultValue: '"vertical"',
         description: "Layout direction."
+      },
+      {
+        name: "defaultValue",
+        type: "string",
+        description: "Uncontrolled initial selected value."
+      },
+      {
+        name: "disabled",
+        type: "boolean",
+        description: "Disable the whole group."
+      },
+      {
+        name: "name",
+        type: "string",
+        description: "Form field name for native submission."
       }
     ],
     usage: [
@@ -2613,6 +2731,22 @@ export function PrioritySelect({ value, onValueChange }) {
         name: "toDate",
         type: "Date",
         description: "Latest selectable date in the calendar. Days after this date are disabled in the grid, and the calendar navigation ends at this month."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Inline \u2715 on the trigger that resets the value when one is set (Ant-style). Pass `false` to hide it (e.g. a required field)."
+      },
+      {
+        name: "defaultValue",
+        type: "Date",
+        description: "Uncontrolled initial date."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: Date | undefined) => void",
+        description: "Fires with the selected date (undefined when cleared)."
       }
     ],
     usage: [
@@ -2881,6 +3015,11 @@ import { Button } from "@godxjp/ui/general";
         name: "icon",
         type: "LucideIcon | false",
         description: "Override or hide (false) the icon."
+      },
+      {
+        name: "tone",
+        type: '"success" | "warning" | "destructive" | "info" | "neutral"',
+        description: "Semantic tone driving the colour + leading icon."
       }
     ],
     usage: [
@@ -3072,6 +3211,16 @@ toast.error("\u4FDD\u5B58\u306B\u5931\u6557\u3057\u307E\u3057\u305F");`,
         name: "onValueChange",
         type: "(page: number, pageSize: number) => void",
         description: "Page / page-size change handler."
+      },
+      {
+        name: "pageSizeOptions",
+        type: "number[]",
+        description: "Selectable page sizes shown in the size changer."
+      },
+      {
+        name: "showSizeChanger",
+        type: "boolean",
+        description: "Show the page-size selector beside the pager."
       }
     ],
     usage: [
@@ -3176,6 +3325,31 @@ import { Button } from "@godxjp/ui/general";
         type: '"horizontal" | "vertical"',
         defaultValue: '"horizontal"',
         description: "Layout direction."
+      },
+      {
+        name: "status",
+        type: '"wait" | "process" | "finish" | "error"',
+        description: "Status of the CURRENT step (drives the active step colour)."
+      },
+      {
+        name: "type",
+        type: '"default" | "dot"',
+        description: "Render full steps or compact dots."
+      },
+      {
+        name: "size",
+        type: '"md" | "sm"',
+        description: "Step size."
+      },
+      {
+        name: "titlePlacement",
+        type: '"horizontal" | "vertical"',
+        description: "Lay step titles beside or below the step icons."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: number) => void",
+        description: "Fires with the clicked step index (0-based)."
       }
     ],
     usage: [
@@ -3365,6 +3539,17 @@ formatDate(order.createdAt, { kind: "relative" });  // "3\u65E5\u524D"`,
         name: "className",
         type: "string",
         description: "Extra Tailwind classes applied to the outer wrapper `<div>`. Use for width overrides (e.g. `w-32`)."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Inline \u2715 on the trigger that resets the value when one is set (Ant-style). Pass `false` to hide it (e.g. a required field)."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: string) => void",
+        description: "Fires with the canonical 24h `HH:mm` string (empty when cleared)."
       }
     ],
     usage: [
@@ -3485,6 +3670,22 @@ export function CutoffTimeForm() {
         name: "className",
         type: "string",
         description: "Extra CSS classes applied to the root flex container (flex items-center gap-1). Use to constrain width or adjust layout; avoid overriding token colors."
+      },
+      {
+        name: "allowClear",
+        type: "boolean",
+        defaultValue: "true",
+        description: "Inline \u2715 on the trigger that resets the range when one is set (Ant-style). Pass `false` to hide it."
+      },
+      {
+        name: "defaultValue",
+        type: "DateRange",
+        description: "Uncontrolled initial range."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: DateRange | undefined) => void",
+        description: "Fires with the selected range (undefined when cleared)."
       }
     ],
     usage: [
@@ -3964,6 +4165,11 @@ export function DepartmentFilter() {
         name: "onSelectChange",
         type: "(sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void",
         description: "Called whenever the checked selection in either panel changes. Provides updated arrays for source and target selections. Required when `selectedKeys` is controlled."
+      },
+      {
+        name: "onValueChange",
+        type: '(targetKeys: string[], direction: "left" | "right", moveKeys: string[]) => void',
+        description: "Fires when items move between panels; you own `targetKeys` state."
       }
     ],
     usage: [
@@ -4086,6 +4292,11 @@ export function AccountMapping() {
         name: "children",
         type: "React.ReactNode",
         description: "Custom button label for variant='button'. Falls back to the i18n 'Upload file' string."
+      },
+      {
+        name: "onValueChange",
+        type: "(items: UploadFileItemProp[]) => void",
+        description: "Fires with the current file list."
       }
     ],
     usage: [
@@ -4295,6 +4506,11 @@ export function AvatarField() {
         type: "string",
         defaultValue: "undefined",
         description: "DOM id applied to the hidden native <input type='color'>. Pass the FormField id here so the label's htmlFor targets this control correctly."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: string) => void",
+        description: "Fires with the committed hex string."
       }
     ],
     usage: [
@@ -5009,6 +5225,11 @@ function AccountQuickPick({ onSelect }: { onSelect: (id: string) => void }) {
         name: "children",
         type: "React.ReactNode",
         description: "Manual children mode: used when `options` is omitted or empty. Render Checkbox items directly as children. You are responsible for composing each Checkbox with a Field for correct label/description layout."
+      },
+      {
+        name: "onValueChange",
+        type: "(value: string[]) => void",
+        description: "Fires with the checked values array."
       }
     ],
     usage: [
@@ -8304,7 +8525,12 @@ primitive, see gaps handling in design-to-page/gaps-extend-or-ask + report-bug.`
 1\u20132 hero facts + ONE primary list/form + contextual actions; push tertiary content to
 a Sheet/Dialog/next page. An 8-stat-card wall is a red flag. Use real page chrome
 (AppShell/Sidebar/Topbar/PageContainer) \u2014 content never touches the viewport edge,
-two bordered surfaces never touch (\u9593/breathing via Stack gap). Exactly ONE --primary
+two bordered surfaces never touch (\u9593/breathing via Stack gap). PageContainer is
+top-packed by default: a short page on a tall viewport leaves NO stretched void
+(the page background just spans the shell) \u2014 never add min-h-screen / flex-1 / a
+spacer div to fight it. Reach for PageContainer fill ONLY when the body must own
+the full height: a full-height DataTable, a SplitPane, or a chat surface whose
+composer is pinned to the bottom via footer + stickyFooter. Exactly ONE --primary
 action per view; status uses the FIXED semantic mapping (success/warning/info/
 attention/danger) \u2014 never recolor a wa-iro hue into a role, never use --primary for
 status. Pick density up front (compact 28 heavy-table / default 32 / comfortable 44
@@ -10222,7 +10448,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "0.21.1",
+  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).",
   type: "module",
   main: "./dist/index.js",