@godxjp/ui 30.3.1 → 30.4.1

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` 30.3.1.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 30.4.1.** 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.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 45 KB, all 171 components as name + group +
+1. `components-index.json` — 45 KB, all 172 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field

package/agent/components/ChatComposer.json

@@ -76,14 +76,14 @@
       "type": "React.ReactNode"
     },
     {
-      "description": "Slot BELOW the draft row — a hint line, a token counter.",
+      "description": "Slot BELOW the draft row — a hint line, a token counter, OR (Ant Design X Sender NodeRender) a function that receives the real SubmitButton/CancelButton components, pre-wired, so they can be rendered in the footer instead of beside the draft box. Pair with actions={false} to hide the inline pair.",
       "name": "footer",
-      "type": "React.ReactNode"
+      "type": "React.ReactNode | ((info: { components: ChatComposerActionComponents }) => React.ReactNode)"
     },
     {
-      "description": "Extra trailing actions, rendered BEFORE the send/cancel action.",
+      "description": "Extra trailing actions, rendered BEFORE the send/cancel action — or false (Ant Design X Sender suffix semantics) to hide the ENTIRE inline trailing-action cell, built-in send/cancel button included, once footer has taken it over. Omitted renders exactly as before.",
       "name": "actions",
-      "type": "React.ReactNode"
+      "type": "React.ReactNode | false"
     },
     {
       "defaultValue": "\"md\"",
@@ -148,11 +148,13 @@
     "DON'T render your own stop button beside the send button — set `loading` and the trailing action becomes cancel. Exactly one trailing action exists at a time (the picker trailing-action discipline).",
     "DO put a hint in `footer` (t('dataEntry.chatComposer.hintEnter') / 'hintShiftEnter') when you flip `submitType` — the keystroke contract is invisible otherwise. For submitType=\"modEnter\" use t('dataEntry.chatComposer.hintModEnter', { modifier: isApplePlatform() ? '⌘' : 'Ctrl' }) with isApplePlatform from @godxjp/ui/lib/utils — the same platform test the composer uses to pick metaKey vs ctrlKey.",
     "DO set `allowEmptySubmit` (not a hidden fake draft) when the composer also submits field changes from `header`/`footer`; your onSubmit receives \"\" and decides whether anything changed.",
-    "DON'T size it with a className height: the box grows between --chat-composer-min-height and --chat-composer-max-height, both derived from the --control-height tier. Use `size`, or re-tune the two tokens in your theme."
+    "DON'T size it with a className height: the box grows between --chat-composer-min-height and --chat-composer-max-height, both derived from the --control-height tier. Use `size`, or re-tune the two tokens in your theme.",
+    "DO move the toolbar BELOW a full-width draft box with `actions={false}` + a function `footer` — the function receives `{ components: { SubmitButton, CancelButton } }`, both already wired to onSubmit/onCancel/disabled/the loading swap, so nothing about the send contract is reimplemented at the call site. Put the attach control and a keyboard hint on the START side of the footer row and `<SubmitButton />` on the END side (a `Flex justify=\"between\"`), exactly like the record-comment box case. Leaving `actions` unset keeps today's inline row — this is opt-in, not a breaking change."
   ],
   "useCases": [
     "The message box of an AI assistant or support chat, under a ChatBubbleList feed.",
     "A comment composer on a record detail screen (prefix = attach Button, footer = character counter).",
+    "A record-detail comment box with a full-width textarea and a toolbar row BELOW it — attach on the start side, a keyboard hint in the middle, clear/send on the end side: `actions={false}` + `footer={({ components }) => <Flex justify=\"between\">…<components.SubmitButton /></Flex>}`.",
     "A long-form reply box where Enter must break the line: submitType=\"shiftEnter\".",
     "A comment bar on an issue/record where Enter breaks the line and ⌘/Ctrl+Enter posts, and a status change may be posted without text: submitType=\"modEnter\" + allowEmptySubmit.",
     "A streaming answer the user can stop: loading + onCancel."

package/agent/components/SpaceCompact.json

@@ -0,0 +1,61 @@
+{
+  "docPath": "layout/space-compact.tsx",
+  "example": "import { SpaceCompact } from \"@godxjp/ui/layout\";\nimport { FormField, NumberInput, Select } from \"@godxjp/ui/data-entry\";\n\n<FormField label=\"繰り返し間隔\">\n  <SpaceCompact>\n    <NumberInput aria-label=\"間隔の数\" min={1} defaultValue={2} />\n    <Select\n      aria-label=\"単位\"\n      defaultValue=\"week\"\n      options={[\n        { value: \"day\", label: \"日\" },\n        { value: \"week\", label: \"週\" },\n        { value: \"month\", label: \"月\" },\n      ]}\n    />\n  </SpaceCompact>\n</FormField>",
+  "group": "layout",
+  "importPath": "@godxjp/ui/layout",
+  "name": "SpaceCompact",
+  "props": [
+    {
+      "defaultValue": "\"horizontal\"",
+      "description": "Layout axis (antd `orientation`; the installed antd `direction` prop is itself @deprecated in favour of this, so only `orientation` is ported).",
+      "name": "orientation",
+      "type": "\"horizontal\" | \"vertical\""
+    },
+    {
+      "description": "antd's boolean spelling of orientation=\"vertical\". `orientation` wins when both are given.",
+      "name": "vertical",
+      "type": "boolean"
+    },
+    {
+      "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).",
+      "name": "fullWidth",
+      "type": "boolean"
+    },
+    {
+      "description": "Scoped control density for the whole row (antd Space.Compact `size`, small|middle|large — the ConfigProvider ambient-size cascade this library already owns under `density`; see `Form.density`). Each child still carries its OWN `size` prop.",
+      "name": "density",
+      "type": "\"compact\" | \"default\" | \"comfortable\""
+    },
+    {
+      "description": "DOM id of the row.",
+      "name": "id",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "Flex `gap` — siblings that stay visually SEPARATE (a normal control row with spacing between items). SpaceCompact is the opposite case: controls that must read as ONE box.",
+    "ResponsiveGrid — equal-width form CELLS; SpaceCompact welds controls WITHIN one cell (or one row) into a single unit.",
+    "FormField — wraps the whole SpaceCompact with one label when the pair is one field.",
+    "NumberInput, Select — the two controls the shipping use case welds; either composes cleanly inside SpaceCompact because both already expose the radius knob it reads (`--input-radius-*`, `--control-trigger-radius-*`)."
+  ],
+  "rules": [
+    2
+  ],
+  "storyPath": "layout/SpaceCompact.stories.tsx",
+  "tagline": "Weld a row (or column) of controls into one visual unit — antd Space.Compact. Inner corner radii are zeroed and the shared border collapses to one hairline; each child keeps its own focus ring and its own size.",
+  "usage": [
+    "DO reach for it when two or more controls must read as ONE field — a number + a unit (\"毎 [2] [週 ▾] ごと\"), a currency Select welded to an amount Input, a search field with an attached filter Select. `ResponsiveGrid columns={2}` puts them in separate cells (which collapses to ONE column on a narrow form card); SpaceCompact keeps them fused on one line regardless of the grid.",
+    "ONE label for the pair vs per-control: wrap the WHOLE `SpaceCompact` in a single `FormField label=\"…\"` when the pair reads as one field (\"繰り返し間隔\" over a number+unit row) — a role-less `<div>` cannot carry a cloned `aria-label`/`aria-labelledby` (axe `aria-allowed-attr`), so a NAMED SpaceCompact with no explicit `role` promotes itself to `role=\"group\"` automatically, the same contract `Flex` already honours for a range/年月 pair. Give each CHILD its own `aria-label` instead only when the two controls are independently meaningful outside the row (rare — prefer the one-label pattern for a welded control).",
+    "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` sets NO per-child flex ratio — same as antd, whose Space.Compact block style only stretches the ROW (`display: flex; width: 100%`), never the children. Two fields (NumberInput+Select, Input+Select) split the row evenly because both already default to their own full width; a Button beside a field keeps its own content width and the field absorbs the rest (Select+Button, Input+Button) — the same split you get outside SpaceCompact.",
+    "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": [
+    "定期課題 (recurring issue) interval row: 毎 [NumberInput] [Select 週/月/日 ▾] ごと, fused on one line inside a FormField, inside a 2-column ResponsiveGrid form card that collapses to one column.",
+    "A currency amount: [Select 通貨 ▾][NumberInput 金額] welded so the currency reads as part of the amount field, not a separate control beside it.",
+    "A filtered search bar: [Select scope][SearchInput query] as one visual field, `fullWidth` inside a page toolbar."
+  ]
+}

package/agent/components-index.json

@@ -54,6 +54,11 @@
     "name": "Flex",
     "tagline": "Token-spaced flex primitive with explicit direction, alignment, justification, and wrapping controls."
   },
+  {
+    "group": "layout",
+    "name": "SpaceCompact",
+    "tagline": "Weld a row (or column) of controls into one visual unit — antd Space.Compact. Inner corner radii are zeroed and the shared border collapses to one hairline; each child keeps its own focus ring and its own size."
+  },
   {
     "group": "layout",
     "name": "ResponsiveGrid",

package/agent/components.json

@@ -938,6 +938,67 @@
       "Low-level layout composition inside custom components where raw flex classes would duplicate the primitive."
     ]
   },
+  {
+    "docPath": "layout/space-compact.tsx",
+    "example": "import { SpaceCompact } from \"@godxjp/ui/layout\";\nimport { FormField, NumberInput, Select } from \"@godxjp/ui/data-entry\";\n\n<FormField label=\"繰り返し間隔\">\n  <SpaceCompact>\n    <NumberInput aria-label=\"間隔の数\" min={1} defaultValue={2} />\n    <Select\n      aria-label=\"単位\"\n      defaultValue=\"week\"\n      options={[\n        { value: \"day\", label: \"日\" },\n        { value: \"week\", label: \"週\" },\n        { value: \"month\", label: \"月\" },\n      ]}\n    />\n  </SpaceCompact>\n</FormField>",
+    "group": "layout",
+    "importPath": "@godxjp/ui/layout",
+    "name": "SpaceCompact",
+    "props": [
+      {
+        "defaultValue": "\"horizontal\"",
+        "description": "Layout axis (antd `orientation`; the installed antd `direction` prop is itself @deprecated in favour of this, so only `orientation` is ported).",
+        "name": "orientation",
+        "type": "\"horizontal\" | \"vertical\""
+      },
+      {
+        "description": "antd's boolean spelling of orientation=\"vertical\". `orientation` wins when both are given.",
+        "name": "vertical",
+        "type": "boolean"
+      },
+      {
+        "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).",
+        "name": "fullWidth",
+        "type": "boolean"
+      },
+      {
+        "description": "Scoped control density for the whole row (antd Space.Compact `size`, small|middle|large — the ConfigProvider ambient-size cascade this library already owns under `density`; see `Form.density`). Each child still carries its OWN `size` prop.",
+        "name": "density",
+        "type": "\"compact\" | \"default\" | \"comfortable\""
+      },
+      {
+        "description": "DOM id of the row.",
+        "name": "id",
+        "type": "string"
+      }
+    ],
+    "related": [
+      "Flex `gap` — siblings that stay visually SEPARATE (a normal control row with spacing between items). SpaceCompact is the opposite case: controls that must read as ONE box.",
+      "ResponsiveGrid — equal-width form CELLS; SpaceCompact welds controls WITHIN one cell (or one row) into a single unit.",
+      "FormField — wraps the whole SpaceCompact with one label when the pair is one field.",
+      "NumberInput, Select — the two controls the shipping use case welds; either composes cleanly inside SpaceCompact because both already expose the radius knob it reads (`--input-radius-*`, `--control-trigger-radius-*`)."
+    ],
+    "rules": [
+      2
+    ],
+    "storyPath": "layout/SpaceCompact.stories.tsx",
+    "tagline": "Weld a row (or column) of controls into one visual unit — antd Space.Compact. Inner corner radii are zeroed and the shared border collapses to one hairline; each child keeps its own focus ring and its own size.",
+    "usage": [
+      "DO reach for it when two or more controls must read as ONE field — a number + a unit (\"毎 [2] [週 ▾] ごと\"), a currency Select welded to an amount Input, a search field with an attached filter Select. `ResponsiveGrid columns={2}` puts them in separate cells (which collapses to ONE column on a narrow form card); SpaceCompact keeps them fused on one line regardless of the grid.",
+      "ONE label for the pair vs per-control: wrap the WHOLE `SpaceCompact` in a single `FormField label=\"…\"` when the pair reads as one field (\"繰り返し間隔\" over a number+unit row) — a role-less `<div>` cannot carry a cloned `aria-label`/`aria-labelledby` (axe `aria-allowed-attr`), so a NAMED SpaceCompact with no explicit `role` promotes itself to `role=\"group\"` automatically, the same contract `Flex` already honours for a range/年月 pair. Give each CHILD its own `aria-label` instead only when the two controls are independently meaningful outside the row (rare — prefer the one-label pattern for a welded control).",
+      "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` sets NO per-child flex ratio — same as antd, whose Space.Compact block style only stretches the ROW (`display: flex; width: 100%`), never the children. Two fields (NumberInput+Select, Input+Select) split the row evenly because both already default to their own full width; a Button beside a field keeps its own content width and the field absorbs the rest (Select+Button, Input+Button) — the same split you get outside SpaceCompact.",
+      "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": [
+      "定期課題 (recurring issue) interval row: 毎 [NumberInput] [Select 週/月/日 ▾] ごと, fused on one line inside a FormField, inside a 2-column ResponsiveGrid form card that collapses to one column.",
+      "A currency amount: [Select 通貨 ▾][NumberInput 金額] welded so the currency reads as part of the amount field, not a separate control beside it.",
+      "A filtered search bar: [Select scope][SearchInput query] as one visual field, `fullWidth` inside a page toolbar."
+    ]
+  },
   {
     "example": "import { ResponsiveGrid } from \"@godxjp/ui/layout\";\nimport { StatCard } from \"@godxjp/ui/data-display\";\n\n<ResponsiveGrid columns={4}>\n  <StatCard label=\"総会員数\" value=\"12,400\" />\n  <StatCard label=\"公開中クーポン\" value=\"8\" />\n  <StatCard label=\"月間利用数\" value=\"3,210\" />\n  <StatCard label=\"割引総額\" value=\"¥480,000\" />\n</ResponsiveGrid>",
     "group": "layout",
@@ -14713,14 +14774,14 @@
         "type": "React.ReactNode"
       },
       {
-        "description": "Slot BELOW the draft row — a hint line, a token counter.",
+        "description": "Slot BELOW the draft row — a hint line, a token counter, OR (Ant Design X Sender NodeRender) a function that receives the real SubmitButton/CancelButton components, pre-wired, so they can be rendered in the footer instead of beside the draft box. Pair with actions={false} to hide the inline pair.",
         "name": "footer",
-        "type": "React.ReactNode"
+        "type": "React.ReactNode | ((info: { components: ChatComposerActionComponents }) => React.ReactNode)"
       },
       {
-        "description": "Extra trailing actions, rendered BEFORE the send/cancel action.",
+        "description": "Extra trailing actions, rendered BEFORE the send/cancel action — or false (Ant Design X Sender suffix semantics) to hide the ENTIRE inline trailing-action cell, built-in send/cancel button included, once footer has taken it over. Omitted renders exactly as before.",
         "name": "actions",
-        "type": "React.ReactNode"
+        "type": "React.ReactNode | false"
       },
       {
         "defaultValue": "\"md\"",
@@ -14785,11 +14846,13 @@
       "DON'T render your own stop button beside the send button — set `loading` and the trailing action becomes cancel. Exactly one trailing action exists at a time (the picker trailing-action discipline).",
       "DO put a hint in `footer` (t('dataEntry.chatComposer.hintEnter') / 'hintShiftEnter') when you flip `submitType` — the keystroke contract is invisible otherwise. For submitType=\"modEnter\" use t('dataEntry.chatComposer.hintModEnter', { modifier: isApplePlatform() ? '⌘' : 'Ctrl' }) with isApplePlatform from @godxjp/ui/lib/utils — the same platform test the composer uses to pick metaKey vs ctrlKey.",
       "DO set `allowEmptySubmit` (not a hidden fake draft) when the composer also submits field changes from `header`/`footer`; your onSubmit receives \"\" and decides whether anything changed.",
-      "DON'T size it with a className height: the box grows between --chat-composer-min-height and --chat-composer-max-height, both derived from the --control-height tier. Use `size`, or re-tune the two tokens in your theme."
+      "DON'T size it with a className height: the box grows between --chat-composer-min-height and --chat-composer-max-height, both derived from the --control-height tier. Use `size`, or re-tune the two tokens in your theme.",
+      "DO move the toolbar BELOW a full-width draft box with `actions={false}` + a function `footer` — the function receives `{ components: { SubmitButton, CancelButton } }`, both already wired to onSubmit/onCancel/disabled/the loading swap, so nothing about the send contract is reimplemented at the call site. Put the attach control and a keyboard hint on the START side of the footer row and `<SubmitButton />` on the END side (a `Flex justify=\"between\"`), exactly like the record-comment box case. Leaving `actions` unset keeps today's inline row — this is opt-in, not a breaking change."
     ],
     "useCases": [
       "The message box of an AI assistant or support chat, under a ChatBubbleList feed.",
       "A comment composer on a record detail screen (prefix = attach Button, footer = character counter).",
+      "A record-detail comment box with a full-width textarea and a toolbar row BELOW it — attach on the start side, a keyboard hint in the middle, clear/send on the end side: `actions={false}` + `footer={({ components }) => <Flex justify=\"between\">…<components.SubmitButton /></Flex>}`.",
       "A long-form reply box where Enter must break the line: submitType=\"shiftEnter\".",
       "A comment bar on an issue/record where Enter breaks the line and ⌘/Ctrl+Enter posts, and a status change may be posted without text: submitType=\"modEnter\" + allowEmptySubmit.",
       "A streaming answer the user can stop: loading + onCancel."

package/agent/index.json

@@ -1,7 +1,7 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 171,
+    "components": 172,
     "patterns": 20,
     "rules": 50,
     "tokens": 2071,
@@ -10,7 +10,7 @@
   "files": [
     {
       "file": "components-index.json",
-      "note": "45 KB — name + group + tagline for all 171. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "45 KB — name + group + tagline for all 172. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-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/v30.3.1/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v30.4.1/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": "30.3.1"
+  "version": "30.4.1"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 171 components, 2071 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 30.3.1.
+> A Japanese-enterprise React design system: 172 components, 2071 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 30.4.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@30.3.1`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@30.4.1`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,7 +15,7 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 20 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 45 KB — all 171 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 45 KB — all 172 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–34 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
 - [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 103 `semantic` roles, 1757 `component` knobs.
@@ -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/v30.3.1/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v30.4.1/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/dist/components/data-entry/chat-composer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export type { ChatComposerProp, ChatComposerProp as ChatComposerProps, ChatComposerSubmitTypeProp, } from "../../props/components/data-entry.prop.js";
+export type { ChatComposerProp, ChatComposerProp as ChatComposerProps, ChatComposerSubmitTypeProp, ChatComposerActionComponents, ChatComposerFooterProp, } from "../../props/components/data-entry.prop.js";
 /**
  * ChatComposer — the message input of a conversation (Ant Design X `Sender`).
  *
@@ -37,8 +37,8 @@ export declare const ChatComposer: React.ForwardRefExoticComponent<Omit<React.HT
     readOnly?: boolean;
     header?: React.ReactNode;
     prefix?: React.ReactNode;
-    footer?: React.ReactNode;
-    actions?: React.ReactNode;
+    footer?: import("./chat-composer.js").ChatComposerFooterProp;
+    actions?: React.ReactNode | false;
     size?: import("../../props/index.js").SizeProp;
     maxLength?: number;
     status?: import("../../props/index.js").ControlStatusProp;

package/dist/components/data-entry/chat-composer.js

@@ -85,6 +85,50 @@ const ChatComposer = React.forwardRef(
     const sendName = submitLabel ?? t("dataEntry.chatComposer.send");
     const cancelName = cancelLabel ?? t("dataEntry.chatComposer.cancel");
     const actionSize = size === "xs" ? "icon-xs" : size === "sm" ? "icon-sm" : size === "lg" ? "icon-lg" : "icon";
+    const liveRef = React.useRef({ actionSize, sendName, cancelName, submit, onCancel, canSubmit, disabled });
+    liveRef.current = { actionSize, sendName, cancelName, submit, onCancel, canSubmit, disabled };
+    const SubmitButton = React.useMemo(
+      () => function SubmitButton2(buttonProps) {
+        const live = liveRef.current;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: live.actionSize,
+            "aria-label": live.sendName,
+            onClick: live.submit,
+            disabled: !live.canSubmit,
+            ...buttonProps,
+            children: buttonProps.children ?? /* @__PURE__ */ jsx(SendHorizontal, { "aria-hidden": "true" })
+          }
+        );
+      },
+      []
+    );
+    const CancelButton = React.useMemo(
+      () => function CancelButton2(buttonProps) {
+        const live = liveRef.current;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: live.actionSize,
+            variant: "secondary",
+            "aria-label": live.cancelName,
+            onClick: live.onCancel,
+            disabled: live.disabled,
+            ...buttonProps,
+            children: buttonProps.children ?? /* @__PURE__ */ jsx(Square, { "aria-hidden": "true" })
+          }
+        );
+      },
+      []
+    );
+    const actionComponents = React.useMemo(
+      () => ({ SubmitButton, CancelButton }),
+      [SubmitButton, CancelButton]
+    );
+    const footerContent = typeof footer === "function" ? footer({ components: actionComponents }) : footer;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -132,33 +176,12 @@ const ChatComposer = React.forwardRef(
                 ...identity
               }
             ),
-            /* @__PURE__ */ jsxs("div", { "data-slot": "chat-composer-actions", className: "ui-chat-composer-actions", children: [
+            actions === false ? null : /* @__PURE__ */ jsxs("div", { "data-slot": "chat-composer-actions", className: "ui-chat-composer-actions", children: [
               actions,
-              loading ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: actionSize,
-                  variant: "secondary",
-                  "aria-label": cancelName,
-                  onClick: onCancel,
-                  disabled,
-                  children: /* @__PURE__ */ jsx(Square, { "aria-hidden": "true" })
-                }
-              ) : /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  size: actionSize,
-                  "aria-label": sendName,
-                  onClick: submit,
-                  disabled: !canSubmit,
-                  children: /* @__PURE__ */ jsx(SendHorizontal, { "aria-hidden": "true" })
-                }
-              )
+              loading ? /* @__PURE__ */ jsx(CancelButton, {}) : /* @__PURE__ */ jsx(SubmitButton, {})
             ] })
           ] }),
-          footer ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-composer-footer", className: "ui-chat-composer-footer", children: footer }) : null
+          footerContent ? /* @__PURE__ */ jsx("div", { "data-slot": "chat-composer-footer", className: "ui-chat-composer-footer", children: footerContent }) : null
         ]
       }
     );

package/dist/components/layout/index.d.ts

@@ -2,6 +2,8 @@ export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
+export { SpaceCompact } from "./space-compact.js";
+export type { SpaceCompactProp, SpaceCompactProps } from "./space-compact.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 export { NavList } from "./nav-list.js";
 export type { NavListProp, NavListProps } from "./nav-list.js";

package/dist/components/layout/index.js

@@ -1,5 +1,6 @@
 import { PageContainer } from "./page-container.js";
 import { Flex } from "./flex.js";
+import { SpaceCompact } from "./space-compact.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
@@ -64,6 +65,7 @@ export {
   SidebarHeader,
   SidebarItem,
   SidebarSection,
+  SpaceCompact,
   SplitPane,
   Topbar,
   TopbarItem,

package/dist/components/layout/space-compact.d.ts

@@ -0,0 +1,65 @@
+import { type JSX } from "react";
+import type { SpaceCompactProp } from "../../props/components/layout.prop.js";
+export type { SpaceCompactProp, SpaceCompactProp as SpaceCompactProps, } from "../../props/components/layout.prop.js";
+/**
+ * SpaceCompact — antd `Space.Compact`: weld a row of controls into one visual unit.
+ *
+ * A plain `<div>`, matching antd's own DOM (no ARIA role by default — each child keeps its own
+ * accessible name; this is a visual join, not a semantic group, exactly like antd's
+ * `Space.Compact`). The corner radii and shared border seam are zeroed/collapsed in CSS — the
+ * "not expressible from primitives + tokens" case `docs/roadmap/parity-audit-layout-navigation-
+ * general.md` §4.1 describes: doing this at the call site would need `[&>*:not(:first-child)]`
+ * utilities, which `ui-audit`'s `no-utility-layout` rule blocks.
+ *
+ * ## ONE label for the pair (`FormField` wrapping a `SpaceCompact`)
+ *
+ * `FormField` lands its label contract on its single direct child (`docs/FORMS.md`). Cloned
+ * `aria-label`/`aria-labelledby` onto a role-less `<div>` would be inert (axe `aria-allowed-attr`
+ * disagrees, and no AT reads a name off a generic element) — so, like `Flex` (which `FormField`
+ * already lands on for a range/`年/月` pair), a NAMED `SpaceCompact` with no explicit `role`
+ * becomes `role="group"` and keeps only the aria a group allows: `aria-errormessage` folds
+ * into `aria-describedby`, and the widget-only `aria-required`/`aria-invalid` are dropped. Pass an
+ * explicit `role` to opt out and own the attribute set yourself.
+ *
+ * NOT quite "exactly like `Flex`" any more: since gh#916 `Flex` skips that promotion when its `as`
+ * renders an element that already has a role (`ul`, `ol`, `li`), because a name should improve
+ * such a role rather than replace it. This component always renders a `<div>`, which has no role
+ * to lose, so the promotion is unconditional here and the two agree on every case `Flex` still
+ * promotes.
+ *
+ * ## ONE WRAPPER PER CHILD, and why removing it re-breaks the headline case (gh#919)
+ *
+ * Every rule in `src/styles/layout.css` — the `flex` basis, the negative seam margin, the
+ * `position: relative` + `z-index` raise, and the `:not(:first-child)`/`:not(:last-child)` corner
+ * zeroing — used to key on `> *`, the DIRECT ELEMENT children. That silently assumed one child
+ * element == one flex item, and `Select` breaks the assumption on purpose: `.ui-select-root` is
+ * `display: contents` (`src/styles/control.css`) precisely so the TRIGGER is the box a flex row
+ * sees, and react-aria renders a `<template>` beside it. So `> *` matched a root that generates no
+ * box at all — flex, margin, position and z-index all landed on nothing, the trigger inherited
+ * none of them and kept its own `w-full`, and the `<template>` shifted first/last-child by one.
+ * Measured by the guinea-pig consumer on `NumberInput` + `Select`, the pattern in this component's
+ * own catalog entry: trigger 562px (the whole row), spinbutton 54px with its step buttons pushed
+ * outside the box.
+ *
+ * Wrapping each child in a box this component owns makes "one child, one flex item" true no matter
+ * what the child renders, which is the property every one of those rules needed in the first place.
+ * The radius knobs still reach the control because custom properties inherit — through the wrapper
+ * and through `display: contents` alike. antd solves the same problem the other way, by passing
+ * position down `SpaceCompactItemContext` for each child to apply to its own root; that needs every
+ * control to participate, which is the port `docs/roadmap/parity-audit-layout-navigation-general.md`
+ * §4.2 records as not done.
+ *
+ * ## `orientation="vertical"` — a written-down partial port
+ *
+ * Layout (column stacking, border collapse) works on both axes. Corner-zeroing currently only
+ * covers the INLINE seam (`orientation="horizontal"`, the default and the only axis the shipping
+ * use case needs): it reads the same `--input-radius-start`/`--input-radius-end` and
+ * `--control-trigger-radius-start`/`--control-trigger-radius-end` knobs the Input and trigger
+ * families already expose, and both pairs are inline-only. A BLOCK-axis pair does not exist on
+ * either family yet, so a vertical stack collapses its shared border but each child keeps all
+ * four of its own corners rounded. Follow-up, not a silent gap.
+ */
+export declare function SpaceCompact({ children, orientation, vertical, fullWidth, density, className, ...props }: SpaceCompactProp): JSX.Element;
+export declare namespace SpaceCompact {
+    var displayName: string;
+}

package/dist/components/layout/space-compact.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { mergeAriaIds } from "../../lib/field-a11y.js";
+import { cn } from "../../lib/utils.js";
+function SpaceCompact({
+  children,
+  orientation,
+  vertical,
+  fullWidth,
+  density,
+  className,
+  ...props
+}) {
+  const resolvedOrientation = orientation ?? (vertical ? "vertical" : "horizontal");
+  let domProps = props;
+  if (props.role === void 0 && (props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0)) {
+    const {
+      "aria-required": _ariaRequired,
+      "aria-invalid": _ariaInvalid,
+      "aria-errormessage": ariaErrorMessage,
+      ...allowed
+    } = props;
+    domProps = {
+      ...allowed,
+      role: "group",
+      "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
+    };
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "space-compact",
+      "data-orientation": resolvedOrientation,
+      "data-full-width": fullWidth ? "true" : void 0,
+      className: cn("ui-space-compact", density && `ui-density-${density}`, className),
+      ...domProps,
+      children: Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "space-compact-item",
+          children: child
+        },
+        index
+      ))
+    }
+  );
+}
+SpaceCompact.displayName = "SpaceCompact";
+export {
+  SpaceCompact
+};

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": "30.3.0",
+  "version": "30.4.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/lib/control-styles.d.ts

@@ -46,7 +46,7 @@ export declare const controlOpenRingClass = "ui-control-trigger";
  *
  * The clamp keeps it to one line, so a wrappable value cannot grow the control.
  */
-export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
+export declare const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-s-[var(--control-trigger-radius-start,var(--control-radius))] rounded-e-[var(--control-trigger-radius-end,var(--control-radius))] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
 /**
  * The trigger WITH the resting surface — `.ui-control-outlined-surface`, which paints the identical
  * border and fill from `--control-surface-border-color` / `--control-surface-background`.
@@ -55,9 +55,9 @@ export declare const controlTriggerBaseClass = "ui-control ui-control-trigger fl
  * outranks `@layer components`, so those two tokens could not reach it (gh#880). The painted result
  * is unchanged; what changed is that a theme can now reach it.
  */
-export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-outlined-surface";
+export declare const controlTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-s-[var(--control-trigger-radius-start,var(--control-radius))] rounded-e-[var(--control-trigger-radius-end,var(--control-radius))] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-outlined-surface";
 /** `controlTriggerBaseClass` + the token-driven surface — the select-family trigger. */
-export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-surface";
+export declare const controlSurfaceTriggerClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-s-[var(--control-trigger-radius-start,var(--control-radius))] rounded-e-[var(--control-trigger-radius-end,var(--control-radius))] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis ui-control-surface";
 export declare const controlIconClass = "size-[length:var(--control-height)] shrink-0";
 export declare const controlIconSmClass = "size-[calc(var(--control-height)-0.5rem)] shrink-0";
 /** Leading/affix icon inside an input row (search, command) — sized to `--control-icon-size`. */

package/dist/lib/control-styles.js

@@ -2,7 +2,14 @@ const controlMultilineClass = "ui-control-multiline ui-control-outlined-surface
 const controlMultilineGhostClass = "ui-control-multiline data-[status=error]:border-destructive data-[status=warning]:border-warning w-full min-h-0 border-0 bg-transparent shadow-none placeholder:text-muted-foreground focus-visible:ring-0";
 const controlMultilineFilledClass = "ui-control-multiline ui-control--filled aria-invalid:border-destructive data-[status=error]:border-destructive data-[status=warning]:border-warning w-full rounded-[var(--control-radius)] ring-offset-background placeholder:text-muted-foreground";
 const controlOpenRingClass = "ui-control-trigger";
-const controlTriggerBaseClass = "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-[var(--control-radius)] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis";
+const controlTriggerBaseClass = (
+  // PER-EDGE RADIUS THROUGH A KNOB, same repair as Input's `--input-radius-start`/`-end`
+  // (gh#841): a plain `rounded-[var(--control-radius)]` is a utility, and `@layer utilities`
+  // outranks `@layer components`, so a joined-control seam (SpaceCompact) can never zero one
+  // side of it from a components-layer rule. Unset, both knobs fall back to `--control-radius`
+  // exactly as before — no existing trigger changes.
+  "ui-control ui-control-trigger flex items-center justify-between gap-2 whitespace-nowrap rounded-s-[var(--control-trigger-radius-start,var(--control-radius))] rounded-e-[var(--control-trigger-radius-end,var(--control-radius))] transition-[color,box-shadow] [&>[data-slot=select-value]]:line-clamp-1 [&>[data-slot=select-value]]:whitespace-normal [&>[data-slot=select-value]]:text-ellipsis"
+);
 const controlTriggerClass = `${controlTriggerBaseClass} ui-control-outlined-surface`;
 const controlSurfaceTriggerClass = `${controlTriggerBaseClass} ui-control-surface`;
 const controlIconClass = "size-[length:var(--control-height)] shrink-0";