@godxjp/ui 31.8.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.8.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/SplitPane.json

@@ -32,6 +32,12 @@
       "description": "Take the remaining height of the parent instead of growing with the content. Default false keeps the pane content-height, which is right inside a scrolling page. Set it for an app-shell surface whose columns own their own scrolling — a chat transcript with a pinned composer, a full-height table beside a detail rail: the pane and both columns get a DEFINITE height, so overflow inside a column scrolls that column instead of pushing the page taller. The parent still decides how much height there is to fill: inside a flex column, give the wrapper `flex: 1; min-height: 0`.",
       "name": "fill",
       "type": "boolean"
+    },
+    {
+      "defaultValue": "\"main-first\"",
+      "description": "Which pane comes first when the pane is too narrow to split and the columns stack. `aside-first` puts the aside on top — a detail page whose properties card must not fall below a long comment thread on a phone. It moves the `<aside>` first in the DOM (not a CSS `order` swap), so in the stacked layout reading and Tab order match the screen (WCAG 1.3.2 / 2.4.3); once the pane splits, grid placement keeps main in the leading column and the aside inline-end, geometry identical to the default. No antd equivalent (antd's closest tool is Grid `Col order`, a visual-only reorder).",
+      "name": "stackOrder",
+      "type": "\"main-first\" | \"aside-first\""
     }
   ],
   "related": [
@@ -48,11 +54,12 @@
   "usage": [
     "DO: pass all right-panel content via the `aside` prop — it renders inside a semantic `<aside>` element at a fixed rem width (sm=20rem, md=22rem). The `children` prop fills the main `1fr` column. Both accept any ReactNode.",
     "DO: reach for `fill` when the pane is an app-shell surface rather than a block in a scrolling page — a chat transcript whose composer stays pinned to the bottom, a full-height table beside a detail rail. It is the supported way to say \"be as tall as what is left\"; a consumer that instead styles the pane's wrapper divs from outside (`[&>*]`, `[&>*>*]`) is targeting this component's internal DOM by position and will break the day another wrapper appears.",
+    "DO: set `stackOrder=\"aside-first\"` when the aside is what a phone user needs first — an issue's properties / agent card above its comment thread. DON'T render the aside twice (once above, once beside) or reorder with a CSS `order` override: the prop already puts it first in the DOM, so focus order follows the stacked screen, and restores the side-by-side placement once the pane splits.",
     "DO: choose `asideWidth=\"sm\"` for compact detail panels (filters, quick stats, key-value summaries) and the default `asideWidth=\"md\"` for richer panels (forms, timelines, long metadata lists).",
     "DO: wrap SplitPane inside `PageContainer` or `PageContainer.Inset` — SplitPane provides no page padding of its own. It is a grid primitive, not a page scaffold.",
     "DO: close a collapsible rail with `aside={null}` — a Slack-style thread, a Linear-style detail panel — rather than swapping `<SplitPane aside={<Thread />}>{page}</SplitPane>` for a bare `{page}`. Both look the same on screen; only the prop keeps `children` mounted. The conditional swap changes the DEPTH of `{page}` in the React tree, so React remounts it: measured in a consumer as a message list jumping from scrollTop 400 to the bottom the instant a thread opened, losing the reader's place and any component state below it.",
     "DON'T: leave `SplitPane` mounted with an empty `aside={<div />}` to avoid that remount — an empty aside still reserves its rail, leaving a blank 20-30rem column. `aside={null}` removes the element AND the column (the pane sets `data-aside=\"closed\"` on itself, so the collapse is one CSS rule, not a call-site width override).",
-    "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
+    "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below — `stackOrder=\"aside-first\"` flips that); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
     "DON'T: add a CSS `overflow: hidden` or fixed height on the SplitPane wrapper; both columns carry `min-width: 0` to handle overflow correctly, and the grid uses `minmax(0, 1fr)` — adding external constraints will break the overflow contract.",
     "DON'T: hand-roll a two-column div layout with flexbox or CSS Grid when SplitPane already ships — that duplicates the responsive breakpoint logic and the semantic `<aside>` element."
   ],

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": [
@@ -2070,6 +2070,12 @@
         "description": "Take the remaining height of the parent instead of growing with the content. Default false keeps the pane content-height, which is right inside a scrolling page. Set it for an app-shell surface whose columns own their own scrolling — a chat transcript with a pinned composer, a full-height table beside a detail rail: the pane and both columns get a DEFINITE height, so overflow inside a column scrolls that column instead of pushing the page taller. The parent still decides how much height there is to fill: inside a flex column, give the wrapper `flex: 1; min-height: 0`.",
         "name": "fill",
         "type": "boolean"
+      },
+      {
+        "defaultValue": "\"main-first\"",
+        "description": "Which pane comes first when the pane is too narrow to split and the columns stack. `aside-first` puts the aside on top — a detail page whose properties card must not fall below a long comment thread on a phone. It moves the `<aside>` first in the DOM (not a CSS `order` swap), so in the stacked layout reading and Tab order match the screen (WCAG 1.3.2 / 2.4.3); once the pane splits, grid placement keeps main in the leading column and the aside inline-end, geometry identical to the default. No antd equivalent (antd's closest tool is Grid `Col order`, a visual-only reorder).",
+        "name": "stackOrder",
+        "type": "\"main-first\" | \"aside-first\""
       }
     ],
     "related": [
@@ -2086,11 +2092,12 @@
     "usage": [
       "DO: pass all right-panel content via the `aside` prop — it renders inside a semantic `<aside>` element at a fixed rem width (sm=20rem, md=22rem). The `children` prop fills the main `1fr` column. Both accept any ReactNode.",
       "DO: reach for `fill` when the pane is an app-shell surface rather than a block in a scrolling page — a chat transcript whose composer stays pinned to the bottom, a full-height table beside a detail rail. It is the supported way to say \"be as tall as what is left\"; a consumer that instead styles the pane's wrapper divs from outside (`[&>*]`, `[&>*>*]`) is targeting this component's internal DOM by position and will break the day another wrapper appears.",
+      "DO: set `stackOrder=\"aside-first\"` when the aside is what a phone user needs first — an issue's properties / agent card above its comment thread. DON'T render the aside twice (once above, once beside) or reorder with a CSS `order` override: the prop already puts it first in the DOM, so focus order follows the stacked screen, and restores the side-by-side placement once the pane splits.",
       "DO: choose `asideWidth=\"sm\"` for compact detail panels (filters, quick stats, key-value summaries) and the default `asideWidth=\"md\"` for richer panels (forms, timelines, long metadata lists).",
       "DO: wrap SplitPane inside `PageContainer` or `PageContainer.Inset` — SplitPane provides no page padding of its own. It is a grid primitive, not a page scaffold.",
       "DO: close a collapsible rail with `aside={null}` — a Slack-style thread, a Linear-style detail panel — rather than swapping `<SplitPane aside={<Thread />}>{page}</SplitPane>` for a bare `{page}`. Both look the same on screen; only the prop keeps `children` mounted. The conditional swap changes the DEPTH of `{page}` in the React tree, so React remounts it: measured in a consumer as a message list jumping from scrollTop 400 to the bottom the instant a thread opened, losing the reader's place and any component state below it.",
       "DON'T: leave `SplitPane` mounted with an empty `aside={<div />}` to avoid that remount — an empty aside still reserves its rail, leaving a blank 20-30rem column. `aside={null}` removes the element AND the column (the pane sets `data-aside=\"closed\"` on itself, so the collapse is one CSS rule, not a call-site width override).",
-      "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
+      "DON'T: expect two columns below 48rem OF THE PANE'S OWN WIDTH (64rem for `asideWidth=\"lg\"`). The split is a CSS container query on the pane, not a viewport media query, so a narrow embedded pane on a large screen correctly stays single-column and a wide pane on a small screen still splits. Below the threshold it stacks (main on top, aside below — `stackOrder=\"aside-first\"` flips that); for layouts that must stay side-by-side at any width use CSS Grid or `ResponsiveGrid`.",
       "DON'T: add a CSS `overflow: hidden` or fixed height on the SplitPane wrapper; both columns carry `min-width: 0` to handle overflow correctly, and the grid uses `minmax(0, 1fr)` — adding external constraints will break the overflow contract.",
       "DON'T: hand-roll a two-column div layout with flexbox or CSS Grid when SplitPane already ships — that duplicates the responsive breakpoint logic and the semantic `<aside>` element."
     ],
@@ -3618,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]).",
@@ -5200,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."
@@ -6194,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.8.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.8.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.8.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.8.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.8.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/components/layout/split-pane.d.ts

@@ -28,5 +28,20 @@ export type SplitPaneProps = {
      * not invent it. Inside a flex column give the wrapper `flex: 1; min-height: 0`.
      */
     fill?: boolean;
+    /**
+     * Which pane comes first when the pane is too narrow to split and the columns STACK.
+     *
+     * `main-first` (default) keeps today's order: main on top, aside below. `aside-first` puts the
+     * aside on top — for a detail page whose properties / agent card must not fall below a long
+     * comment thread on a phone.
+     *
+     * `aside-first` moves the `<aside>` FIRST IN THE DOM, not just visually, so in the stacked
+     * layout the reading and focus order match what is on screen (WCAG 1.3.2 / 2.4.3 — a CSS
+     * `order` swap would leave Tab going through the whole main column before reaching the aside
+     * drawn above it). Once the pane is wide enough to split, grid placement puts main back in the
+     * leading column and the aside in the trailing one (inline-end, so it flips under RTL); there
+     * the DOM order is aside → main, which reads as two independent regions, not a broken sequence.
+     */
+    stackOrder?: "main-first" | "aside-first";
 };
-export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, }: SplitPaneProps): import("react").JSX.Element;
+export declare function SplitPane({ children, aside, asideWidth, asideLabel, fill, stackOrder, }: SplitPaneProps): import("react").JSX.Element;

package/dist/components/layout/split-pane.js

@@ -4,9 +4,12 @@ function SplitPane({
   aside,
   asideWidth = "md",
   asideLabel,
-  fill = false
+  fill = false,
+  stackOrder = "main-first"
 }) {
   const closed = aside === null || aside === void 0;
+  const asideFirst = stackOrder === "aside-first";
+  const asideElement = closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside });
   return (
     // `data-fill` is published on BOTH wrappers, not just the grid: the scope element is the one
     // the consumer's own box actually contains, so without it the height stops at the scope and
@@ -19,9 +22,11 @@ function SplitPane({
         "data-aside-width": asideWidth,
         "data-aside": closed ? "closed" : void 0,
         "data-fill": fill ? "true" : void 0,
+        "data-stack-order": asideFirst ? "aside-first" : void 0,
         children: [
+          asideFirst ? asideElement : null,
           /* @__PURE__ */ jsx("div", { className: "ui-split-pane-main", children }),
-          closed ? null : /* @__PURE__ */ jsx("aside", { className: "ui-split-pane-aside", "aria-label": asideLabel, children: aside })
+          asideFirst ? null : asideElement
         ]
       }
     ) })

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.8.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.8.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;
   }
@@ -608,6 +612,10 @@
     min-block-size: 0;
   }
 
+  .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:not([data-aside="closed"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -662,12 +670,53 @@
     .ui-split-pane[data-aside-width="md"] {
       grid-template-columns: minmax(0, 1fr) 22rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      ):not([data-aside="closed"]) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   @container split-pane (min-width: 64rem) {
     .ui-split-pane[data-aside-width="lg"] {
       grid-template-columns: minmax(0, 1fr) 30rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"][data-aside-width="lg"]:not(
+        [data-aside="closed"]
+      ) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   .ui-split-pane-main,

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"
@@ -561,6 +561,16 @@
       "presetsOnlyDescription": "panelRender returns only Presets — people pick from the palette and cannot type an arbitrary hex.",
       "tagColorLabel": "Tag colour",
       "tagColorHelper": "Arrow keys move between swatches; the selected one is announced."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — the aside first when the panes stack",
+      "lead": "stackOrder=\"aside-first\" puts the aside above main once the pane is too narrow to split, and first in the DOM, so Tab reaches it first too. Wide enough to split, it sits in the trailing column exactly as it does by default. The embed below is narrower than the split width, so the properties card sits above the thread.",
+      "propertiesTitle": "Properties",
+      "status": "Status",
+      "statusValue": "In progress",
+      "assignee": "Assignee",
+      "threadTitle": "Comments",
+      "threadLead": "Long threads no longer push the properties below the fold on a phone."
     }
   },
   "serviceLauncherShowcase": {
@@ -1257,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": "まだ作成されていません"
@@ -555,6 +555,16 @@
       "presetsOnlyDescription": "panelRender で Presets だけを返すと、パレットからの選択のみになり任意の HEX は入力できない。",
       "tagColorLabel": "タグの色",
       "tagColorHelper": "矢印キーでスウォッチ間を移動し、選択中の色が読み上げられる。"
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — 縦積み時にサイドを先頭へ",
+      "lead": "stackOrder=\"aside-first\" は、分割できない幅になったときにサイドをメインの上に置き、DOM でも先頭にするため Tab でも先に届きます。分割できる幅では既定と同じく後方の列に並びます。下の埋め込みは分割幅より狭いため、プロパティがスレッドの上に来ます。",
+      "propertiesTitle": "プロパティ",
+      "status": "ステータス",
+      "statusValue": "対応中",
+      "assignee": "担当者",
+      "threadTitle": "コメント",
+      "threadLead": "スマートフォンでも、長いスレッドがプロパティを画面外へ押し出しません。"
     }
   },
   "serviceLauncherShowcase": {
@@ -1251,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ì"
@@ -555,6 +555,16 @@
       "presetsOnlyDescription": "panelRender chỉ trả về Presets — người dùng chọn trong bảng màu, không gõ được mã hex tuỳ ý.",
       "tagColorLabel": "Màu thẻ",
       "tagColorHelper": "Phím mũi tên di chuyển giữa các ô màu; ô đang chọn được đọc lên."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — đưa cột phụ lên trước khi xếp chồng",
+      "lead": "stackOrder=\"aside-first\" đặt cột phụ lên trên cột chính khi khung quá hẹp để chia đôi, và đặt nó trước trong DOM nên phím Tab cũng tới nó trước. Khi đủ rộng để chia, nó nằm ở cột cuối như mặc định. Khung nhúng bên dưới hẹp hơn ngưỡng chia đôi, nên thẻ thuộc tính nằm trên luồng bình luận.",
+      "propertiesTitle": "Thuộc tính",
+      "status": "Trạng thái",
+      "statusValue": "Đang xử lý",
+      "assignee": "Người phụ trách",
+      "threadTitle": "Bình luận",
+      "threadLead": "Trên điện thoại, luồng bình luận dài không còn đẩy phần thuộc tính xuống dưới."
     }
   },
   "serviceLauncherShowcase": {
@@ -1251,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/docs/layout/split-pane.tsx

@@ -10,6 +10,7 @@ import {
   StatCard,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-react";
 
 /**
@@ -98,6 +99,7 @@ const yen = (n: number) => yenFormat.format(Math.round(n));
 const toNumber = (amount: string) => Number(amount.replace(/[^0-9]/g, ""));
 
 export default function Demo() {
+  const { t } = useTranslation();
   const [selectedId, setSelectedId] = useState<string>("INV-0241");
   const [asideWidth, setAsideWidth] = useState<"sm" | "md">("md");
   const [threadOpen, setThreadOpen] = useState(true);
@@ -406,6 +408,69 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* ── stackOrder="aside-first" (gh#1057) — the aside stacks ABOVE main when narrow ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.splitPaneStackOrder.title")}</CardTitle>
+            <CardDescription>{t("showcase.splitPaneStackOrder.lead")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card className="max-w-md">
+              <CardContent>
+                <SplitPane
+                  stackOrder="aside-first"
+                  asideWidth="sm"
+                  asideLabel={t("showcase.splitPaneStackOrder.propertiesTitle")}
+                  aside={
+                    <Card variant="muted">
+                      <CardHeader>
+                        <CardTitle level={3} className="text-sm">
+                          {t("showcase.splitPaneStackOrder.propertiesTitle")}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <Flex direction="col" gap="xs">
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.status")}</Text>
+                            <Badge tone="info">
+                              {t("showcase.splitPaneStackOrder.statusValue")}
+                            </Badge>
+                          </Flex>
+                          <Flex direction="row" justify="between" gap="sm">
+                            <Text tone="muted">{t("showcase.splitPaneStackOrder.assignee")}</Text>
+                            <Text>{THREAD_REPLIES[0].author}</Text>
+                          </Flex>
+                        </Flex>
+                      </CardContent>
+                    </Card>
+                  }
+                >
+                  <Card>
+                    <CardHeader>
+                      <CardTitle level={3} className="text-sm">
+                        {t("showcase.splitPaneStackOrder.threadTitle")}
+                      </CardTitle>
+                      <CardDescription>
+                        {t("showcase.splitPaneStackOrder.threadLead")}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <Flex direction="col" gap="sm">
+                        {CHANNEL_MESSAGES.map((message) => (
+                          <Flex key={message.author} direction="col" gap="xs">
+                            <Text weight="medium">{message.author}</Text>
+                            <Text tone="muted">{message.body}</Text>
+                          </Flex>
+                        ))}
+                      </Flex>
+                    </CardContent>
+                  </Card>
+                </SplitPane>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>

package/package.json

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