@godxjp/ui 31.9.0 → 31.10.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.9.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.10.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.

package/agent/components/DataTable.json

@@ -246,7 +246,7 @@
     "DO use DataTable.Toolbar as the immediate child that wraps search/filter controls on the left and DataTable.DensityToggle/action buttons on the right. DataTable.BulkActions inside the toolbar auto-hides when selection count is 0; it accepts either plain ReactNode children (built-in 'N selected' status bar) or a (count)=>node render-prop (you own the whole bar).",
     "DO reach for the grid chrome (DataTable.Search, DataTable.ViewOptions, DataTable.Pagination pageSizeOptions) when you need global search, a column 'set view' picker, or numbered pagination — these are the merged former-DataGrid features, now on the one DataTable. Drive them client-side by default; pass the matching state + manual* flag for a server query.",
     "DataTable.Pagination OWNS ITS OWN INSET. The footer is a self-contained slot: it declares `padding-block` + `padding-inline` from `--table-pagination-padding-{y,x}` (block default = `--space-stack-sm`, inline default = `--table-cell-space-x`, so the 'rows per page' label lands on the same optical axis as the first column's text). Before the fix it declared `padding-top` only, so inside the documented flush container (`<Card><CardContent flush><DataTable/>`) the label and page-size Select sat flush against the container edge and border. DON'T ship a local `.ui-data-table-pagination { padding: … }` override in an app — retune the two tokens in your theme instead.",
-    "RESPONSIVE APPROVAL / ACTION QUEUE: reach for `preset=\"action-collection\"` when a dense five-column queue (requester · target · reason · requested date · row actions) must stay readable at 390px, and give every column a `priority` on its ColumnDef — `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved FIRST so it can never be pushed off-screen). Leave the free-text column unmarked; it takes the remaining space. This is the SAME contract, the SAME `--table-action-collection-*` tokens and the SAME container query as `Table preset=\"action-collection\"` — there is no separate DataTable family. Never add a consumer width, a hidden column, `hiddenOnMobile` or a page-local breakpoint to make a table fit: retune the tokens instead.",
+    "RESPONSIVE APPROVAL / ACTION QUEUE: reach for `preset=\"action-collection\"` when a dense five-column queue (requester · target · reason · requested date · row actions) must stay readable at 390px, and give every column a `priority` on its ColumnDef — `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved FIRST so it can never be pushed off-screen, and which grows to its content when a text action + `…` menu does not fit the icon-sized token — gh#1067). Leave the free-text column unmarked; it takes the remaining space. This is the SAME contract, the SAME `--table-action-collection-*` tokens and the SAME container query as `Table preset=\"action-collection\"` — there is no separate DataTable family. Never add a consumer width, a hidden column, `hiddenOnMobile` or a page-local breakpoint to make a table fit: retune the tokens instead.",
     "DON'T set `width` on a column that also has a `priority` — an explicit width utility wins the cascade over the priority measure and re-opens the horizontal scroll. Under the preset, `pin: 'end'` is also redundant: nothing scrolls sideways, so the actions column is already in frame.",
     "The DataTable surface's narrow-viewport width floor is `--table-surface-min-inline-size` (default 640px, released at the `sm` viewport step). It used to be a hard-coded `min-w-[640px] sm:min-w-0` utility pair on the surface — the literal that forced the horizontal scroll at 390. Retune (or zero) the token in your theme; `preset=\"action-collection\"` already opts out of it.",
     "DO use ColumnDef.render for custom cell content (Badge, Link, RowActions). For plain string/number fields render can be omitted — DataTable falls back to String(row[key]).",

package/agent/components/Select.json

@@ -13,7 +13,7 @@
   "name": "Select",
   "props": [
     {
-      "description": "Select several options; value/defaultValue become string arrays. `tags` additionally ACCEPTS what was typed (a value that is not in the list), which is antd's own split between the two. The popup list of either mode renders as `Command split` (rows ruled, list padding 0, gh#699); retune it with --command-item-divider-color / --command-item-divider-width.",
+      "description": "Select several options; value/defaultValue become string arrays. `tags` additionally ACCEPTS what was typed (a value that is not in the list), which is antd's own split between the two. `tags` needs no `options` (`<Select mode=\"tags\" />` works) and only an explicit `disabled` disables it (gh#1063). While text is typed the tags list reads create row, then an exact (case-folded) match, then options, then held values — the first enabled row is the Enter target, never a held tag (gh#1064). The popup list of either mode renders as `Command split` (rows ruled, list padding 0, gh#699); retune it with --command-item-divider-color / --command-item-divider-width.",
       "name": "mode",
       "type": "\"multiple\" | \"tags\""
     },

package/agent/components/SpaceCompact.json

@@ -18,7 +18,7 @@
     },
     {
       "defaultValue": "false",
-      "description": "The row fills its parent's inline size (antd `block`, renamed to match Button.fullWidth — the same rename, the same reason: this library's controlled vocabulary wins on values).",
+      "description": "The row fills its parent's inline size (antd `block`, renamed to match Button.fullWidth — the same rename, the same reason: this library's controlled vocabulary wins on values). Field children grow to fill it; a Button keeps its content width.",
       "name": "fullWidth",
       "type": "boolean"
     },
@@ -50,7 +50,7 @@
     "DON'T reach for `className=\"rounded-none\"` / `[&>*:not(:first-child)]` utilities to join controls yourself — `ui-audit`'s `no-utility-layout` rule blocks exactly that, and it is precisely the corner-radius seam this component owns.",
     "DO set `size` on each CHILD individually, not on SpaceCompact — the row has no size prop of its own by design (see `density`); every control already owns its own `size` axis (`xs|sm|md|lg`).",
     "DO use `fullWidth` inside a narrow form card so the joined row spans the field column, exactly like a lone Input would.",
-    "`fullWidth` gives EVERY child an equal share of the row — each item carries `flex: 1 1 0%`, so the split is even no matter what the children would size to on their own. Measured at a 1169px row: NumberInput+Select 585/585, and Select+Button ALSO 585/585, i.e. a Button under `fullWidth` is stretched to half the row, not left at its content width. Want the Button at content width and the field absorbing the rest? Omit `fullWidth` — the row is then `inline-flex` and sizes to content (measured 223/40). Do NOT remove the per-child `flex` to chase antd's block style: without it the items collapse to their content and the row stops filling at all (measured 203/73.6 in a 1169px column), which defeats `fullWidth`.",
+    "`fullWidth` is antd `Space.Compact block` (gh#1062): in a row, a FIELD child (Input and its affix/Password/Search forms, NumberInput, Textarea, TagInput, the Date/Time pickers, and the Select/Cascader/TreeSelect/SearchSelect trigger) grows to fill the row, and every other child — a Button, an icon button — keeps its content width. So `[Input][+ Add]` is a full-width field with its submit at content width, and two fields (NumberInput + Select) share the row evenly between them. Deviation from antd, written down: antd grows only its Input family (`width: 100%`); Select/InputNumber/DatePicker keep their own width there. Here every field grows, so two fields never leave an empty tail. `orientation=\"vertical\"` + `fullWidth` stacks full-width children as before.",
     "DON'T expect corner-radius welding on `orientation=\"vertical\"` yet — the shared border still collapses, but each child keeps all four of its own corners rounded until a block-axis radius knob exists on the Input/trigger families (documented gap, not a silent one)."
   ],
   "useCases": [

package/agent/components/Table.json

@@ -108,7 +108,7 @@
     "DO use `striped` on dense list tables so a row is easy to follow across its columns; to turn it on for EVERY Table and DataTable at once, set `:root { --table-row-striped-alpha: 100%; }` in the theme rather than passing the prop everywhere (`striped={false}` opts one table out). A detail row under a record is `<TableRow data-expanded-row=\"\">` so the stripe counts records, not DOM rows — never stripe with `:nth-child` page CSS or row utilities.",
     "DO NOT hand-roll empty-state handling inside a Table composition. When data can be empty, switch to `DataTable` (which has a built-in empty state) or wrap the `<Table>` with a conditional that renders `<EmptyState>` — never leave a table with only a header and zero rows.",
     "DO NOT use Table for lists that need sorting, filtering, pagination, or row selection — those features are only in `DataTable`. Table is intentionally stateless: it owns no TanStack Table instance, no column definitions, and no toolbar.",
-    "DO reach for `preset=\"action-collection\"` for a dense approval / action queue (requester · target · reason · requested date · row actions) that must stay readable at 390px, and mark every column with `priority` on BOTH its `TableHead` and its `TableCell`: `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved first so it can never be pushed off-screen). Leave the free-text column unmarked — it takes the remaining space. For text actions such as 対応する, set ColumnDef.width (or TableHead width) to reserve the label measure; leave a content column fluid. The default actions token is sized for icon actions. Do not add a hidden column or page-local breakpoint to make a table fit. The IDENTICAL preset exists on `DataTable` (`preset` + `collapseBelow` on the table, `priority` on the `ColumnDef`) sharing these same tokens — use DataTable when the queue is data-driven and needs sorting/selection/pagination, and reach for the raw `Table` only for a hand-authored queue.",
+    "DO reach for `preset=\"action-collection\"` for a dense approval / action queue (requester · target · reason · requested date · row actions) that must stay readable at 390px, and mark every column with `priority` on BOTH its `TableHead` and its `TableCell`: `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved first so it can never be pushed off-screen). Leave the free-text column unmarked — it takes the remaining space. The `actions` token measure is a FLOOR sized for an icon trigger: a text action (対応する, Retry) plus a `…` menu grows the column to its content on its own (gh#1067), so it never paints over the previous column and needs no ColumnDef.width; an explicit width still wins. Leave a content column fluid. Do not add a hidden column or page-local breakpoint to make a table fit. The IDENTICAL preset exists on `DataTable` (`preset` + `collapseBelow` on the table, `priority` on the `ColumnDef`) sharing these same tokens — use DataTable when the queue is data-driven and needs sorting/selection/pagination, and reach for the raw `Table` only for a hand-authored queue.",
     "DO reach for `<TableCell flush>` when the cell's CONTENT owns its inset — an expanded detail panel under a row (`<TableCell flush colSpan={n}>`), a nested table, a full-bleed media strip. It drops the cell's own padding so the child spans the whole cell; without it the panel is indented by `--table-cell-space-x` and the only route was a `p-0` utility, which no service theme can reach.",
     "DO express hierarchy with `<TableCell indent={depth}>` — a grouped table's detail rows under their subtotal header, or a tree row under its parent. The measure is `--table-cell-space-x + depth x --table-cell-indent-space-step`, so level 0 sits on the column's own text axis and a service retunes (or flattens) the step in one token. Never hand-roll `style={{ paddingInlineStart }}` at the call site — that is a per-page constant no theme can reach, and it breaks in RTL unless you remember the logical property.",
     "DO place `<Table>` inside a `<CardContent flush>` (or `p-0` card) when embedding in a Card, so the built-in `overflow-auto` wrapper sits flush to the card edges. Wrapping with plain `<CardContent>` adds padding that clips the horizontal scroll shadow."

package/agent/components.json

@@ -964,7 +964,7 @@
       },
       {
         "defaultValue": "false",
-        "description": "The row fills its parent's inline size (antd `block`, renamed to match Button.fullWidth — the same rename, the same reason: this library's controlled vocabulary wins on values).",
+        "description": "The row fills its parent's inline size (antd `block`, renamed to match Button.fullWidth — the same rename, the same reason: this library's controlled vocabulary wins on values). Field children grow to fill it; a Button keeps its content width.",
         "name": "fullWidth",
         "type": "boolean"
       },
@@ -996,7 +996,7 @@
       "DON'T reach for `className=\"rounded-none\"` / `[&>*:not(:first-child)]` utilities to join controls yourself — `ui-audit`'s `no-utility-layout` rule blocks exactly that, and it is precisely the corner-radius seam this component owns.",
       "DO set `size` on each CHILD individually, not on SpaceCompact — the row has no size prop of its own by design (see `density`); every control already owns its own `size` axis (`xs|sm|md|lg`).",
       "DO use `fullWidth` inside a narrow form card so the joined row spans the field column, exactly like a lone Input would.",
-      "`fullWidth` gives EVERY child an equal share of the row — each item carries `flex: 1 1 0%`, so the split is even no matter what the children would size to on their own. Measured at a 1169px row: NumberInput+Select 585/585, and Select+Button ALSO 585/585, i.e. a Button under `fullWidth` is stretched to half the row, not left at its content width. Want the Button at content width and the field absorbing the rest? Omit `fullWidth` — the row is then `inline-flex` and sizes to content (measured 223/40). Do NOT remove the per-child `flex` to chase antd's block style: without it the items collapse to their content and the row stops filling at all (measured 203/73.6 in a 1169px column), which defeats `fullWidth`.",
+      "`fullWidth` is antd `Space.Compact block` (gh#1062): in a row, a FIELD child (Input and its affix/Password/Search forms, NumberInput, Textarea, TagInput, the Date/Time pickers, and the Select/Cascader/TreeSelect/SearchSelect trigger) grows to fill the row, and every other child — a Button, an icon button — keeps its content width. So `[Input][+ Add]` is a full-width field with its submit at content width, and two fields (NumberInput + Select) share the row evenly between them. Deviation from antd, written down: antd grows only its Input family (`width: 100%`); Select/InputNumber/DatePicker keep their own width there. Here every field grows, so two fields never leave an empty tail. `orientation=\"vertical\"` + `fullWidth` stacks full-width children as before.",
       "DON'T expect corner-radius welding on `orientation=\"vertical\"` yet — the shared border still collapses, but each child keeps all four of its own corners rounded until a block-axis radius knob exists on the Input/trigger families (documented gap, not a silent one)."
     ],
     "useCases": [
@@ -3625,7 +3625,7 @@
       "DO use DataTable.Toolbar as the immediate child that wraps search/filter controls on the left and DataTable.DensityToggle/action buttons on the right. DataTable.BulkActions inside the toolbar auto-hides when selection count is 0; it accepts either plain ReactNode children (built-in 'N selected' status bar) or a (count)=>node render-prop (you own the whole bar).",
       "DO reach for the grid chrome (DataTable.Search, DataTable.ViewOptions, DataTable.Pagination pageSizeOptions) when you need global search, a column 'set view' picker, or numbered pagination — these are the merged former-DataGrid features, now on the one DataTable. Drive them client-side by default; pass the matching state + manual* flag for a server query.",
       "DataTable.Pagination OWNS ITS OWN INSET. The footer is a self-contained slot: it declares `padding-block` + `padding-inline` from `--table-pagination-padding-{y,x}` (block default = `--space-stack-sm`, inline default = `--table-cell-space-x`, so the 'rows per page' label lands on the same optical axis as the first column's text). Before the fix it declared `padding-top` only, so inside the documented flush container (`<Card><CardContent flush><DataTable/>`) the label and page-size Select sat flush against the container edge and border. DON'T ship a local `.ui-data-table-pagination { padding: … }` override in an app — retune the two tokens in your theme instead.",
-      "RESPONSIVE APPROVAL / ACTION QUEUE: reach for `preset=\"action-collection\"` when a dense five-column queue (requester · target · reason · requested date · row actions) must stay readable at 390px, and give every column a `priority` on its ColumnDef — `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved FIRST so it can never be pushed off-screen). Leave the free-text column unmarked; it takes the remaining space. This is the SAME contract, the SAME `--table-action-collection-*` tokens and the SAME container query as `Table preset=\"action-collection\"` — there is no separate DataTable family. Never add a consumer width, a hidden column, `hiddenOnMobile` or a page-local breakpoint to make a table fit: retune the tokens instead.",
+      "RESPONSIVE APPROVAL / ACTION QUEUE: reach for `preset=\"action-collection\"` when a dense five-column queue (requester · target · reason · requested date · row actions) must stay readable at 390px, and give every column a `priority` on its ColumnDef — `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved FIRST so it can never be pushed off-screen, and which grows to its content when a text action + `…` menu does not fit the icon-sized token — gh#1067). Leave the free-text column unmarked; it takes the remaining space. This is the SAME contract, the SAME `--table-action-collection-*` tokens and the SAME container query as `Table preset=\"action-collection\"` — there is no separate DataTable family. Never add a consumer width, a hidden column, `hiddenOnMobile` or a page-local breakpoint to make a table fit: retune the tokens instead.",
       "DON'T set `width` on a column that also has a `priority` — an explicit width utility wins the cascade over the priority measure and re-opens the horizontal scroll. Under the preset, `pin: 'end'` is also redundant: nothing scrolls sideways, so the actions column is already in frame.",
       "The DataTable surface's narrow-viewport width floor is `--table-surface-min-inline-size` (default 640px, released at the `sm` viewport step). It used to be a hard-coded `min-w-[640px] sm:min-w-0` utility pair on the surface — the literal that forced the horizontal scroll at 390. Retune (or zero) the token in your theme; `preset=\"action-collection\"` already opts out of it.",
       "DO use ColumnDef.render for custom cell content (Badge, Link, RowActions). For plain string/number fields render can be omitted — DataTable falls back to String(row[key]).",
@@ -5207,7 +5207,7 @@
       "DO use `striped` on dense list tables so a row is easy to follow across its columns; to turn it on for EVERY Table and DataTable at once, set `:root { --table-row-striped-alpha: 100%; }` in the theme rather than passing the prop everywhere (`striped={false}` opts one table out). A detail row under a record is `<TableRow data-expanded-row=\"\">` so the stripe counts records, not DOM rows — never stripe with `:nth-child` page CSS or row utilities.",
       "DO NOT hand-roll empty-state handling inside a Table composition. When data can be empty, switch to `DataTable` (which has a built-in empty state) or wrap the `<Table>` with a conditional that renders `<EmptyState>` — never leave a table with only a header and zero rows.",
       "DO NOT use Table for lists that need sorting, filtering, pagination, or row selection — those features are only in `DataTable`. Table is intentionally stateless: it owns no TanStack Table instance, no column definitions, and no toolbar.",
-      "DO reach for `preset=\"action-collection\"` for a dense approval / action queue (requester · target · reason · requested date · row actions) that must stay readable at 390px, and mark every column with `priority` on BOTH its `TableHead` and its `TableCell`: `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved first so it can never be pushed off-screen). Leave the free-text column unmarked — it takes the remaining space. For text actions such as 対応する, set ColumnDef.width (or TableHead width) to reserve the label measure; leave a content column fluid. The default actions token is sized for icon actions. Do not add a hidden column or page-local breakpoint to make a table fit. The IDENTICAL preset exists on `DataTable` (`preset` + `collapseBelow` on the table, `priority` on the `ColumnDef`) sharing these same tokens — use DataTable when the queue is data-driven and needs sorting/selection/pagination, and reach for the raw `Table` only for a hand-authored queue.",
+      "DO reach for `preset=\"action-collection\"` for a dense approval / action queue (requester · target · reason · requested date · row actions) that must stay readable at 390px, and mark every column with `priority` on BOTH its `TableHead` and its `TableCell`: `primary` (the row subject), `secondary` (its target), `meta` (a timestamp/id), `actions` (the row-action affordance, whose measure is reserved first so it can never be pushed off-screen). Leave the free-text column unmarked — it takes the remaining space. The `actions` token measure is a FLOOR sized for an icon trigger: a text action (対応する, Retry) plus a `…` menu grows the column to its content on its own (gh#1067), so it never paints over the previous column and needs no ColumnDef.width; an explicit width still wins. Leave a content column fluid. Do not add a hidden column or page-local breakpoint to make a table fit. The IDENTICAL preset exists on `DataTable` (`preset` + `collapseBelow` on the table, `priority` on the `ColumnDef`) sharing these same tokens — use DataTable when the queue is data-driven and needs sorting/selection/pagination, and reach for the raw `Table` only for a hand-authored queue.",
       "DO reach for `<TableCell flush>` when the cell's CONTENT owns its inset — an expanded detail panel under a row (`<TableCell flush colSpan={n}>`), a nested table, a full-bleed media strip. It drops the cell's own padding so the child spans the whole cell; without it the panel is indented by `--table-cell-space-x` and the only route was a `p-0` utility, which no service theme can reach.",
       "DO express hierarchy with `<TableCell indent={depth}>` — a grouped table's detail rows under their subtotal header, or a tree row under its parent. The measure is `--table-cell-space-x + depth x --table-cell-indent-space-step`, so level 0 sits on the column's own text axis and a service retunes (or flattens) the step in one token. Never hand-roll `style={{ paddingInlineStart }}` at the call site — that is a per-page constant no theme can reach, and it breaks in RTL unless you remember the logical property.",
       "DO place `<Table>` inside a `<CardContent flush>` (or `p-0` card) when embedding in a Card, so the built-in `overflow-auto` wrapper sits flush to the card edges. Wrapping with plain `<CardContent>` adds padding that clips the horizontal scroll shadow."
@@ -6201,7 +6201,7 @@
     "name": "Select",
     "props": [
       {
-        "description": "Select several options; value/defaultValue become string arrays. `tags` additionally ACCEPTS what was typed (a value that is not in the list), which is antd's own split between the two. The popup list of either mode renders as `Command split` (rows ruled, list padding 0, gh#699); retune it with --command-item-divider-color / --command-item-divider-width.",
+        "description": "Select several options; value/defaultValue become string arrays. `tags` additionally ACCEPTS what was typed (a value that is not in the list), which is antd's own split between the two. `tags` needs no `options` (`<Select mode=\"tags\" />` works) and only an explicit `disabled` disables it (gh#1063). While text is typed the tags list reads create row, then an exact (case-folded) match, then options, then held values — the first enabled row is the Enter target, never a held tag (gh#1064). The popup list of either mode renders as `Command split` (rows ruled, list padding 0, gh#699); retune it with --command-item-divider-color / --command-item-divider-width.",
         "name": "mode",
         "type": "\"multiple\" | \"tags\""
       },

package/agent/index.json

@@ -48,7 +48,7 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.9.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.10.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
@@ -62,5 +62,5 @@
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.9.0"
+  "version": "31.10.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
 > A Japanese-enterprise React design system: 177 components, 2104 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.9.0.
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.10.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.9.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.10.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.9.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.10.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -11640,7 +11640,7 @@
     "value": "12%"
   },
   {
-    "description": "row-action affordance, never clipped",
+    "description": "row-action affordance: a FLOOR, not a cap — Table grows the column to a wider actions cell content (a text button + `…` menu), gh#1067",
     "name": "--table-action-collection-actions-width",
     "tier": "component",
     "value": "3.5rem"

package/dist/components/data-display/data-table.js

@@ -680,6 +680,7 @@ DataTable.BulkActions = function DataTableBulkActions({
         direction: "row",
         align: "center",
         gap: "sm",
+        wrap: true,
         role: "region",
         "aria-label": t("dataTable.bulkActions"),
         className,

package/dist/components/data-display/table.js

@@ -8,6 +8,43 @@ import { cn } from "../../lib/utils.js";
 function scrollRegionLabel(label, t) {
   return typeof label === "string" && label.trim() !== "" ? label : t("dataTable.scrollRegion");
 }
+const ACTIONS_CONTENT_WIDTH = "--table-action-collection-actions-content-width";
+function useActionsColumnFit(ref, enabled) {
+  React.useLayoutEffect(() => {
+    const box = ref.current;
+    if (!enabled || !box || typeof ResizeObserver === "undefined") return void 0;
+    const measure = () => {
+      box.style.removeProperty(ACTIONS_CONTENT_WIDTH);
+      let needed = 0;
+      box.querySelectorAll(".ui-table-actions-content").forEach((content) => {
+        const cell = content.parentElement;
+        if (!cell) return;
+        const style = getComputedStyle(cell);
+        const inset = parseFloat(style.paddingInlineStart) + parseFloat(style.paddingInlineEnd);
+        const width = content.getBoundingClientRect().width;
+        if (width <= cell.clientWidth + 0.5) return;
+        const edges = style.boxSizing === "border-box" ? inset + parseFloat(style.borderInlineStartWidth) + parseFloat(style.borderInlineEndWidth) : 0;
+        needed = Math.max(needed, Math.ceil(width + edges));
+      });
+      if (needed > 0) box.style.setProperty(ACTIONS_CONTENT_WIDTH, `${needed}px`);
+    };
+    const resize = new ResizeObserver(measure);
+    const observeAll = () => {
+      resize.disconnect();
+      resize.observe(box);
+      box.querySelectorAll(".ui-table-actions-content").forEach((content) => resize.observe(content));
+      measure();
+    };
+    const mutations = new MutationObserver(observeAll);
+    mutations.observe(box, { childList: true, subtree: true });
+    observeAll();
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      box.style.removeProperty(ACTIONS_CONTENT_WIDTH);
+    };
+  }, [ref, enabled]);
+}
 const Table = React.forwardRef(
   ({
     className,
@@ -23,6 +60,7 @@ const Table = React.forwardRef(
     const { t } = useTranslation();
     const scrollRef = React.useRef(null);
     const scrolls = useScrollsHorizontally(scrollRef, scrollable);
+    useActionsColumnFit(scrollRef, preset === "action-collection");
     return (
       // A table wider than its container scrolls horizontally in this wrapper; keep it
       // keyboard-reachable so it can be scrolled without a pointer (WCAG 2.1.1 / axe
@@ -162,7 +200,7 @@ const TableCell = React.forwardRef(
       ...props,
       children: [
         label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
-        children
+        priority === "actions" ? /* @__PURE__ */ jsx("span", { className: "ui-table-actions-content", children }) : children
       ]
     }
   )

package/dist/components/data-entry/search-select.js

@@ -161,22 +161,26 @@ function SearchSelect(props) {
   const isSelected = (optionValue) => multiple ? values.includes(optionValue) : value === optionValue;
   const hasSelection = multiple ? values.length > 0 : Boolean(value);
   const reqId = React.useRef(0);
+  const resetActiveRef = React.useRef(false);
+  const matchesQuery = React.useCallback(
+    (option, needle) => {
+      if (filterOption) return filterOption(option, needle);
+      const haystack = optionFilterProp ? [String(option[optionFilterProp] ?? "")] : [option.label, option.value];
+      return haystack.some((field) => fold(String(field)).includes(fold(needle)));
+    },
+    [filterOption, optionFilterProp, fold]
+  );
   const resolvedLoad = React.useMemo(
     () => loadOptions ?? (async ({ query: search }) => {
       const needle = search.trim();
       const list = staticOptions ?? [];
-      const matches = (option) => {
-        if (filterOption) return filterOption(option, needle);
-        const haystack = optionFilterProp ? [String(option[optionFilterProp] ?? "")] : [option.label, option.value];
-        return haystack.some((field) => fold(String(field)).includes(fold(needle)));
-      };
-      const kept = needle ? list.filter(matches) : list;
+      const kept = needle ? list.filter((option) => matchesQuery(option, needle)) : list;
       return {
         options: filterSort ? [...kept].sort((a, b) => filterSort(a, b, { searchValue: needle })) : kept,
         hasMore: false
       };
     }),
-    [loadOptions, staticOptions, filterOption, optionFilterProp, filterSort, fold]
+    [loadOptions, staticOptions, matchesQuery, filterSort]
   );
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
@@ -191,10 +195,7 @@ function SearchSelect(props) {
         const result = await resolvedLoad({ query: search, page: nextPage });
         if (ticket !== reqId.current) return;
         setLoaded((prev) => append ? [...prev, ...result.options] : result.options);
-        if (!append) {
-          const firstEnabled = result.options.findIndex((option) => !option.disabled);
-          setActiveIndex(firstEnabled >= 0 ? firstEnabled : 0);
-        }
+        if (!append) resetActiveRef.current = true;
         setHasMore(Boolean(result.hasMore));
         setPage(nextPage);
       } catch {
@@ -221,18 +222,33 @@ function SearchSelect(props) {
     for (const entry of values) {
       if (known.has(entry)) continue;
       known.add(entry);
-      extras.push(pickedOptions[entry] ?? { value: entry, label: entry });
+      const held = pickedOptions[entry] ?? { value: entry, label: entry };
+      if (!typedText || matchesQuery(held, typedText)) extras.push(held);
     }
     const typed = fold(typedText);
     const exists = [...known].some((entry) => fold(entry) === typed) || [...staticOptions ?? [], ...loaded].some(
       (option) => fold(option.value) === typed || fold(option.label) === typed
     );
     const create = typedText && !exists && canCreate(typedText) ? { value: typedText, label: typedText } : void 0;
+    const exact = typedText ? loaded.find(
+      (option) => !values.includes(option.value) && (fold(option.value) === typed || fold(option.label) === typed)
+    ) : void 0;
+    const rest = exact ? loaded.filter((option) => option !== exact) : loaded;
     return {
-      displayOptions: create || extras.length ? [...create ? [create] : [], ...extras, ...loaded] : loaded,
+      displayOptions: create || exact || extras.length ? [...create ? [create] : [], ...exact ? [exact] : [], ...rest, ...extras] : loaded,
       createOption: create
     };
-  }, [tagsMode, loaded, values, typedText, pickedOptions, staticOptions, fold, canCreate]);
+  }, [
+    tagsMode,
+    loaded,
+    values,
+    typedText,
+    pickedOptions,
+    staticOptions,
+    fold,
+    canCreate,
+    matchesQuery
+  ]);
   const grouped = React.useMemo(() => {
     const order = [];
     const buckets = /* @__PURE__ */ new Map();
@@ -254,6 +270,15 @@ function SearchSelect(props) {
     () => grouped.flatMap((group) => group.items.map((entry) => entry.option)),
     [grouped]
   );
+  const lastTypedRef = React.useRef(typedText);
+  React.useEffect(() => {
+    const typedChanged = lastTypedRef.current !== typedText;
+    lastTypedRef.current = typedText;
+    if (!typedChanged && !resetActiveRef.current) return;
+    resetActiveRef.current = false;
+    const firstEnabled = flatOrdered.findIndex((option) => !option.disabled);
+    setActiveIndex(firstEnabled >= 0 ? firstEnabled : 0);
+  }, [flatOrdered, typedText]);
   const resolvedPlaceholder = placeholder ?? t("dataEntry.searchSelect.placeholder");
   const optionFor = (optionValue) => pickedOptions[optionValue] ?? (staticOptions ?? []).find((option) => option.value === optionValue) ?? loaded.find((option) => option.value === optionValue) ?? null;
   const selectedOption = value ? optionFor(value) : null;

package/dist/components/data-entry/select.js

@@ -30,7 +30,7 @@ import { SearchSelect } from "./search-select.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { normalizeSelectOptions } from "../../lib/select-options.js";
 function isDataSelect(props) {
-  return "options" in props || "loadOptions" in props;
+  return "options" in props || "loadOptions" in props || props.mode !== void 0;
 }
 const SelectFieldA11yContext = React.createContext(null);
 function toKey(value) {

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.9.0",
+  "version": "31.10.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/components/data-entry.prop.d.ts

@@ -1572,7 +1572,10 @@ export type SearchSelectSingleProp = {
 export type SearchSelectMultipleProp = {
     /**
      * `multiple` picks from the list; `tags` also ACCEPTS what was typed, so a value that is not in
-     * the list can still be committed (antd's own distinction between the two).
+     * the list can still be committed (antd's own distinction between the two). A `tags` Select
+     * needs no `options` at all and is never disabled for having none (gh#1063). While text is
+     * typed its list reads create row → exact match → options → held values, and the first enabled
+     * row is the active (Enter) row (gh#1064).
      */
     mode: "multiple" | "tags";
     /** @see SelectLabelInValueMultipleProp for the `{value,label}` dialect. */

package/dist/props/components/layout.prop.d.ts

@@ -378,7 +378,10 @@ export type SpaceCompactProp = Omit<React.HTMLAttributes<HTMLDivElement>, "child
     orientation?: OrientationProp;
     /** antd's boolean spelling of `orientation="vertical"`. `orientation` wins when both are set. */
     vertical?: boolean;
-    /** Row fills its parent's inline size (antd `block`, renamed to match `Button.fullWidth`). */
+    /**
+     * Row fills its parent's inline size (antd `block`, renamed to match `Button.fullWidth`). Field
+     * children grow to fill it; a Button (any non-field child) keeps its content width (gh#1062).
+     */
     fullWidth?: boolean;
     /** Scoped control density for the whole row (antd `Space.Compact` `size`). */
     density?: DensityProp;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.9.0",
+  "version": "31.10.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -138,6 +138,10 @@
     min-inline-size: 0;
   }
 
+  .ui-space-compact[data-orientation="horizontal"][data-full-width="true"] > [data-slot="space-compact-item"]:not(:has(.ui-control, .ui-control-multiline, .ui-tag-input)) {
+    flex: none;
+  }
+
   .ui-space-compact[data-orientation="vertical"] {
     flex-direction: column;
   }

package/dist/styles/table-layout.css

@@ -231,6 +231,7 @@
 
   .ui-data-table-bulk {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--space-inline-sm);
     font-size: var(--font-size-base);
@@ -238,6 +239,7 @@
 
   .ui-data-table-bulk-actions {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--space-inline-sm);
   }
@@ -642,9 +644,23 @@
   }
 
   .ui-table-collection [data-priority="actions"] {
-    --table-action-collection-column-width: var(--table-action-collection-actions-width);
+
+    --table-action-collection-column-width: var(
+      --table-action-collection-actions-content-width,
+      var(--table-action-collection-actions-width)
+    );
     text-align: end;
   }
+
+  .ui-table-actions-content {
+    display: contents;
+  }
+
+  .ui-table-collection .ui-table-actions-content {
+    display: inline-block;
+    white-space: nowrap;
+    vertical-align: top;
+  }
 }
 
 @layer components {

package/dist/tokens/components/table.css

@@ -56,6 +56,7 @@
   --table-action-collection-primary-width: 18%;
   --table-action-collection-secondary-width: 22%;
   --table-action-collection-meta-width: 12%;
+
   --table-action-collection-actions-width: 3.5rem;
 
   --table-action-collection-primary-width-compact: 24%;

package/docs/data-display/data-table/index.tsx

@@ -156,7 +156,7 @@ export default function Demo() {
                 key: "action",
                 header: "操作",
                 priority: "actions",
-                width: "104px",
+                // No width: the actions column grows to the text button on its own (gh#1067).
                 render: () => (
                   <Button size="sm" variant="ghost">
                     対応する

package/docs/i18n/messages/en.json

@@ -546,7 +546,7 @@
     },
     "select": {
       "createTitle": "Tags: create row, onCreate and case-insensitive matching",
-      "createDescription": "Typed text that matches no option is offered as an explicit “Create” row. onCreate reports only invented text, never an option id. Typing “bug” finds “Bug” instead of creating a duplicate (caseSensitive restores exact matching). Unlike antd, the create row is labelled and text longer than 12 characters is refused through allowCreate.",
+      "createDescription": "Typed text that matches no option is offered as an explicit “Create” row. onCreate reports only invented text, never an option id. Typing “bug” finds “Bug” instead of creating a duplicate (caseSensitive restores exact matching). Unlike antd, the create row is labelled and text longer than 12 characters is refused through allowCreate. While you type, the create row (or an option that exactly matches) is the first and active row, so Enter never takes off a tag you already picked; also unlike antd, that exact match is lifted to the top.",
       "createField": "Labels",
       "createdHelper": "Created in this session: {list}",
       "createdNone": "Nothing created yet"
@@ -1267,7 +1267,7 @@
     },
     "search": {
       "title": "Search and its button",
-      "body": "Typing and running are one continuous action, so the seam goes. The button is still a real Button — focus ring and disabled keep working.",
+      "body": "Typing and running are one continuous action, so the seam goes. The button is still a real Button — focus ring and disabled keep working. With `fullWidth` the field fills the row and the button keeps its own width (antd `block`).",
       "row": "Search employees",
       "term": "Search term",
       "run": "Run the search",

package/docs/i18n/messages/ja.json

@@ -540,7 +540,7 @@
     },
     "select": {
       "createTitle": "タグ: 作成行・onCreate・大文字小文字を区別しない照合",
-      "createDescription": "どの選択肢にも一致しない入力は「作成」行として明示されます。onCreate は新しく作られたテキストだけを通知し、選択肢の ID では発火しません。「bug」と入力すると「Bug」が見つかり、重複は作られません（caseSensitive で完全一致に戻せます）。antd と異なり作成行にはラベルが付き、12 文字を超える入力は allowCreate で拒否しています。",
+      "createDescription": "どの選択肢にも一致しない入力は「作成」行として明示されます。onCreate は新しく作られたテキストだけを通知し、選択肢の ID では発火しません。「bug」と入力すると「Bug」が見つかり、重複は作られません（caseSensitive で完全一致に戻せます）。antd と異なり作成行にはラベルが付き、12 文字を超える入力は allowCreate で拒否しています。入力中は作成行（または完全一致する選択肢）が先頭のアクティブ行になるため、Enter で選択済みのタグが外れることはありません。完全一致を先頭に上げる点も antd と異なります。",
       "createField": "ラベル",
       "createdHelper": "このセッションで作成: {list}",
       "createdNone": "まだ作成されていません"
@@ -1261,7 +1261,7 @@
     },
     "search": {
       "title": "検索とボタン",
-      "body": "入力と実行は一続きの操作なので継ぎ目をなくします。ボタンは本物の Button のままなので、フォーカスリングも disabled もそのまま効きます。",
+      "body": "入力と実行は一続きの操作なので継ぎ目をなくします。ボタンは本物の Button のままなので、フォーカスリングも disabled もそのまま効きます。`fullWidth` では入力欄が行の残りを埋め、ボタンは自分の幅のままです（antd の `block`）。",
       "row": "社員を検索",
       "term": "検索語",
       "run": "検索する",

package/docs/i18n/messages/vi.json

@@ -540,7 +540,7 @@
     },
     "select": {
       "createTitle": "Tags: dòng tạo mới, onCreate và so khớp không phân biệt hoa thường",
-      "createDescription": "Văn bản gõ vào không khớp tùy chọn nào được đưa ra thành dòng “Tạo” rõ ràng. onCreate chỉ báo văn bản mới tạo, không bao giờ báo id của tùy chọn. Gõ “bug” sẽ tìm thấy “Bug” thay vì tạo bản trùng (caseSensitive trả lại so khớp chính xác). Khác antd, dòng tạo có nhãn và văn bản dài hơn 12 ký tự bị allowCreate từ chối.",
+      "createDescription": "Văn bản gõ vào không khớp tùy chọn nào được đưa ra thành dòng “Tạo” rõ ràng. onCreate chỉ báo văn bản mới tạo, không bao giờ báo id của tùy chọn. Gõ “bug” sẽ tìm thấy “Bug” thay vì tạo bản trùng (caseSensitive trả lại so khớp chính xác). Khác antd, dòng tạo có nhãn và văn bản dài hơn 12 ký tự bị allowCreate từ chối. Khi đang gõ, dòng tạo (hoặc tùy chọn khớp chính xác) là dòng đầu tiên và đang được chọn, nên Enter không bao giờ gỡ một thẻ đã chọn; cũng khác antd, tùy chọn khớp chính xác được đưa lên đầu.",
       "createField": "Nhãn",
       "createdHelper": "Đã tạo trong phiên này: {list}",
       "createdNone": "Chưa tạo gì"
@@ -1261,7 +1261,7 @@
     },
     "search": {
       "title": "Tìm kiếm và nút của nó",
-      "body": "Gõ và chạy là một thao tác liền mạch nên bỏ đường nối. Nút vẫn là Button thật — vòng focus và disabled vẫn hoạt động.",
+      "body": "Gõ và chạy là một thao tác liền mạch nên bỏ đường nối. Nút vẫn là Button thật — vòng focus và disabled vẫn hoạt động. Với `fullWidth`, ô nhập lấp phần còn lại của hàng, nút giữ đúng bề rộng của nó (antd `block`).",
       "row": "Tìm nhân viên",
       "term": "Từ khoá",
       "run": "Chạy tìm kiếm",

package/docs/layout/space-compact.tsx

@@ -110,7 +110,7 @@ export default function SpaceCompactShowcase() {
             <CardDescription>{t("spaceCompactDocs.search.body")}</CardDescription>
           </CardHeader>
           <CardContent>
-            <SpaceCompact aria-label={t("spaceCompactDocs.search.row")}>
+            <SpaceCompact fullWidth aria-label={t("spaceCompactDocs.search.row")}>
               <SearchInput
                 value={query}
                 onValueChange={setQuery}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.9.0",
-  "godxUiMcp": "31.9.0",
+  "version": "31.10.0",
+  "godxUiMcp": "31.10.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",