@godxjp/ui 30.3.1 → 30.4.0

package/agent/START-HERE.md

@@ -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,60 @@
+{
+  "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.",
+    "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,66 @@
       "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.",
+      "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 +14773,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 +14845,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"
     },
     {

package/agent/llms.txt

@@ -1,6 +1,6 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 171 components, 2071 design tokens,
+> 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.3.1.
 
 If your client can run a process, do not read these files — run the MCP server instead
@@ -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.

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,43 @@
+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.
+ *
+ * ## `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,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+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
+    }
+  );
+}
+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.3.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";

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

@@ -5,6 +5,7 @@ import type { DateRange } from "react-day-picker";
 import type * as React from "react";
 import type { UploadFileItem } from "../../components/data-entry/upload-types.js";
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
+import type { ButtonProp } from "./general.prop.js";
 import type { ClassNameProp, ControlWidthProp, DisabledProp, EmptyMessageProp, ErrorBagProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp, TitleProp, DefaultOpenProp, ControlStatusProp, ControlVariantProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, PendingProp, PadProp, PadRawProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
 /** One-outline-per-group appearance for the compound InputOTP control. */
@@ -1923,6 +1924,33 @@ export type BranchScopePickerProp = FieldA11yProps & {
  * @see ChatComposer
  */
 export type ChatComposerSubmitTypeProp = "enter" | "shiftEnter" | "modEnter";
+/**
+ * @see ChatComposer `footer` — the built-in trailing action, pre-wired (onClick/disabled/
+ * accessible name already resolved) and handed to a `footer` render function so it can be
+ * RELOCATED instead of duplicated.
+ *
+ * Ant Design X `Sender.ActionsComponents` ships four (`SendButton`/`ClearButton`/`LoadingButton`/
+ * `SpeechButton`) because `Sender` has a clear affordance and speech input this composer does not
+ * — porting those two as inert components would ship dead API (the same "not ported" discipline
+ * `docs/DESIGN-AUTHORITY.md` applies to antd fields nothing here reads). `LoadingButton` is
+ * `CancelButton` here — this composer already names the streaming state's trailing action `cancel`
+ * (`onCancel`, `cancelLabel`), so the antd-x name would be a second spelling of the same button.
+ */
+export type ChatComposerActionComponents = {
+    /** The send action — disabled while empty/disabled/readOnly/loading, exactly like the inline one. */
+    SubmitButton: React.ComponentType<ButtonProp>;
+    /** The stop action — only meaningful while `loading`; renders antd X's `LoadingButton` slot. */
+    CancelButton: React.ComponentType<ButtonProp>;
+};
+/**
+ * @see ChatComposer `footer` — either a plain node (unchanged default behaviour) or Ant Design X
+ * `Sender`'s `NodeRender` shape: a function receiving `{ components }` so a consumer can render
+ * the real send/cancel buttons BELOW the draft box instead of beside it. Combine with `actions=
+ * {false}` to hide the inline pair and avoid rendering both.
+ */
+export type ChatComposerFooterProp = React.ReactNode | ((info: {
+    components: ChatComposerActionComponents;
+}) => React.ReactNode);
 /**
  * @see ChatComposer — the message input of a conversation (Ant Design X `Sender`; the industry
  * calls the control a *composer*, so that is what it is named).
@@ -1972,10 +2000,20 @@ export type ChatComposerProp = Omit<React.HTMLAttributes<HTMLDivElement>, "onSub
     header?: React.ReactNode;
     /** Slot at the inline START of the draft row — an attach button, an avatar. */
     prefix?: React.ReactNode;
-    /** Slot BELOW the draft row — a hint line, a token counter. */
-    footer?: React.ReactNode;
-    /** Extra trailing actions, rendered BEFORE the send/cancel action. */
-    actions?: React.ReactNode;
+    /**
+     * Slot BELOW the draft row — a hint line, a token counter, or (Ant Design X `Sender`
+     * `NodeRender`) a function `({ components }) => ReactNode` that renders the real send/cancel
+     * buttons in the footer instead of beside the draft box. Pair with `actions={false}` to hide
+     * the inline pair and avoid rendering both — see the `usage` note on relocating actions.
+     */
+    footer?: ChatComposerFooterProp;
+    /**
+     * Extra trailing actions, rendered BEFORE the send/cancel action — or `false` (Ant Design X
+     * `Sender`'s `suffix` semantics: `BaseNode = ReactNode | false`) to hide the ENTIRE inline
+     * trailing-action cell, built-in send/cancel button included, when `footer` has taken over
+     * rendering it. Omitted (`undefined`) renders the cell exactly as before — no breaking change.
+     */
+    actions?: React.ReactNode | false;
     /** Control height tier on the shared `--control-height` ladder. Default `md`. */
     size?: SizeProp;
     /** Hard ceiling on the draft length, forwarded to the textarea. */