@godxjp/ui 30.3.1 → 30.4.0

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

@@ -1,7 +1,7 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, DensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
 /**
  * Arrangement of the page header's title band and its `extra` slot below the 640px step.
@@ -338,6 +338,53 @@ export type FlexProp = React.HTMLAttributes<HTMLElement> & {
      */
     measure?: FlexMeasureProp;
 };
+/**
+ * @see SpaceCompact — antd `Space.Compact`, a row of controls welded into one visual unit: the
+ * inner corner radii are zeroed and the shared border is collapsed so two boxes read as one,
+ * while each child keeps its own focus ring and its own `size`.
+ *
+ * ## Deviations from `antd/es/space/Compact.d.ts` (read at `@ant-design/x` install time, not
+ * from memory — see the PR for the exact checkout), each written down per `DESIGN-AUTHORITY.md`
+ *
+ * - **No `Space`.** antd's `Space.Compact` is a static member of `Space`; this library has no
+ *   `Space` at all, and does not gain one here — `Space`'s only other job (gaps between siblings)
+ *   already lives on `Flex`/`ResponsiveGrid` `gap`, so a `Space` built only to host `.Compact`
+ *   would duplicate that primitive for nothing (`docs/roadmap/parity-audit-layout-navigation-
+ *   general.md` §4.2 marks bare `Space` a composition, not a gap). `SpaceCompact` ships standalone
+ *   — the same flat-export shape as `CheckboxGroup`/`ToggleGroup`/`SearchSelect`/`TagInput`, not a
+ *   `Space.Compact` dotted member.
+ * - **`size` → `density`, not forwarded.** antd's `size?: SizeType` (`small|middle|large`) is the
+ *   `ConfigProvider` ambient-size cascade (`SpaceCompactItemContext`/`useCompactItemContext`,
+ *   read by antd's own `Input`/`Select`/`Button`) — the exact capability this library already
+ *   owns under `density` (`compact|default|comfortable`, `docs/DESIGN-AUTHORITY.md` "A capability
+ *   this library already has keeps its own name"). `density` scopes `--scaling` to this row via
+ *   `.ui-density-*` (the same class `Form.density`/`FormRoot.density` already emit), and each
+ *   child keeps its OWN `size` (`SizeProp`) exactly as it does anywhere else — a second axis
+ *   would be the duplicate spelling `check:prop-vocabulary` exists to prevent.
+ * - **`direction` not ported, only `orientation`.** The installed `SpaceCompactProps.direction` is
+ *   itself `@deprecated please use \`orientation\` instead`; only the current, non-deprecated name
+ *   is carried, reusing the vocabulary `OrientationProp` already shared by `Separator`/`Steps`/
+ *   `RadioGroup`/`Toolbar` rather than a second `"horizontal" | "vertical"` spelling.
+ * - **`block` → `fullWidth`.** Same rename already applied to `Button.block`
+ *   (`ButtonProp.fullWidth`) for the same reason — "this library's controlled vocabulary wins on
+ *   values" — so one word means the same thing on both components.
+ * - **No `prefixCls`/`rootClassName`.** Plumbing for antd's `prefixCls`-rooted styling system,
+ *   which this library does not have; every component here takes one `className`.
+ */
+export type SpaceCompactProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The controls to weld into one row — antd `Space.Compact` children. */
+    children?: ChildrenProp;
+    /** Layout axis. Default `horizontal` (antd `orientation`, `direction` deprecated upstream). */
+    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`). */
+    fullWidth?: boolean;
+    /** Scoped control density for the whole row (antd `Space.Compact` `size`). */
+    density?: DensityProp;
+    id?: IdProp;
+    className?: ClassNameProp;
+};
 /** Container column counts; omitted steps inherit from the previous step. Base defaults to 1. */
 export type ResponsiveGridColumnsProp = number | {
     base?: number;

package/dist/props/registry.d.ts

@@ -837,6 +837,19 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: 'The CENTRED, CAPPED column (narrow | medium | wide), backed by --page-measure-* — the inner half of "full-bleed outside, measured column inside" (gh#839). Same word and same three token steps as PageContainer `measure`, on the primitive a full-bleed <section> can actually use: PageContainer owns page padding and a header scaffold, which is why measure="wide" was refused there, and the refusal left the centred column with no owner at all — three showcases hand-wrote the same four declarations. It adds NO gutter (that is `pad`), and an explicit `width` wins over it.';
         }];
     };
+    readonly SpaceCompactProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["OrientationProp", {
+            readonly field: "vertical";
+            readonly local: true;
+            readonly reason: "antd's boolean spelling of orientation=\"vertical\"; orientation wins over it.";
+        }, {
+            readonly field: "fullWidth";
+            readonly local: true;
+            readonly reason: "antd Space.Compact `block`, renamed to match the existing Button.block → fullWidth rename (same axis, same word everywhere it appears).";
+        }, "DensityProp", "IdProp", "ClassNameProp"];
+    };
     readonly ResponsiveGridFlowProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -3538,6 +3551,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly ChatComposerFooterProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [];
+    };
     readonly ChatComposerProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";

package/dist/props/registry.js

@@ -838,6 +838,26 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  SpaceCompactProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: [
+      "OrientationProp",
+      {
+        field: "vertical",
+        local: true,
+        reason: `antd's boolean spelling of orientation="vertical"; orientation wins over it.`
+      },
+      {
+        field: "fullWidth",
+        local: true,
+        reason: "antd Space.Compact `block`, renamed to match the existing Button.block \u2192 fullWidth rename (same axis, same word everywhere it appears)."
+      },
+      "DensityProp",
+      "IdProp",
+      "ClassNameProp"
+    ]
+  },
   ResponsiveGridFlowProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   ResponsiveGridColumnsProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
   ResponsiveGridPresetProp: { group: "layout", file: "components/layout.prop.ts", vocabulary: [] },
@@ -4226,6 +4246,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: []
   },
+  ChatComposerFooterProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: []
+  },
   ChatComposerProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",

package/dist/styles/layout.css

@@ -123,6 +123,57 @@
     flex-direction: column;
   }
 
+  .ui-space-compact {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .ui-space-compact[data-full-width="true"] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .ui-space-compact[data-full-width="true"] > * {
+    flex: 1 1 0%;
+    min-inline-size: 0;
+  }
+
+  .ui-space-compact[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .ui-space-compact[data-orientation="vertical"][data-full-width="true"] > * {
+    min-inline-size: auto;
+    min-block-size: 0;
+  }
+
+  .ui-space-compact[data-orientation="horizontal"] > * + * {
+    margin-inline-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
+  }
+
+  .ui-space-compact[data-orientation="vertical"] > * + * {
+    margin-block-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
+  }
+
+  .ui-space-compact > * {
+    position: relative;
+  }
+
+  .ui-space-compact > *:hover,
+  .ui-space-compact > *:focus-within {
+    z-index: 1;
+  }
+
+  .ui-space-compact[data-orientation="horizontal"] > *:not(:first-child) {
+    --input-radius-start: 0;
+    --control-trigger-radius-start: 0;
+  }
+
+  .ui-space-compact[data-orientation="horizontal"] > *:not(:last-child) {
+    --input-radius-end: 0;
+    --control-trigger-radius-end: 0;
+  }
+
   .ui-empty-state[data-variant="section"] {
     padding: var(--empty-state-section-space-y) var(--empty-state-section-space-x);
   }

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **171**
-- With ≥1 frame: **150** · zero-frame: **21**
+- Public components: **172**
+- With ≥1 frame: **151** · zero-frame: **21**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -48,6 +48,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | RangeTimeline | **✗** | · | N/A | N/A | · | · | · | · | · | · |
 | PageContainer | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Flex | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| SpaceCompact | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ResponsiveGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AppShell | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AuthShell | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |

package/docs/data-entry/chat-composer.tsx

@@ -168,6 +168,16 @@ export default function Demo() {
   const [savedStatus, setSavedStatus] = useState("open");
   const [comments, setComments] = useState<Comment[]>([]);
 
+  // ── Card 2c: footer as a NodeRender — the toolbar-below layout ─────────────────────────────
+  const [toolbarDraft, setToolbarDraft] = useState("");
+  const [toolbarComments, setToolbarComments] = useState<string[]>([]);
+
+  function postToolbarComment(text: string) {
+    if (!text) return;
+    setToolbarComments((current) => [...current, text]);
+    setToolbarDraft("");
+  }
+
   function postComment(text: string) {
     const changed = status !== savedStatus;
     // An empty draft with no status change carries nothing — the consumer decides, not the box.
@@ -263,13 +273,17 @@ export default function Demo() {
                       onCancel={cancel}
                       placeholder="メッセージを入力"
                       prefix={
-                        <Button size="icon-sm" variant="ghost" aria-label="ファイルを添付">
+                        <Button
+                          size="icon-sm"
+                          variant="ghost"
+                          aria-label={t("chatComposerDocs.attach")}
+                        >
                           <Paperclip aria-hidden="true" />
                         </Button>
                       }
                       footer={
                         <Text size="xs" tone="muted">
-                          Enter で送信 · Shift + Enter で改行
+                          {t("chatComposerDocs.enterHint")}
                         </Text>
                       }
                     />
@@ -301,7 +315,7 @@ export default function Demo() {
                   }}
                   footer={
                     <Text size="xs" tone="muted">
-                      Enter で送信 · Shift + Enter で改行
+                      {t("chatComposerDocs.enterHint")}
                     </Text>
                   }
                 />
@@ -340,7 +354,7 @@ export default function Demo() {
               <Flex direction="col" gap="md">
                 {comments.length === 0 ? (
                   <Text size="sm" tone="muted">
-                    まだコメントはありません
+                    {t("chatComposerDocs.noComments")}
                   </Text>
                 ) : (
                   comments.map((comment) => (
@@ -362,7 +376,7 @@ export default function Demo() {
                   value={commentDraft}
                   onValueChange={setCommentDraft}
                   onSubmit={postComment}
-                  placeholder="コメントを入力"
+                  placeholder={t("chatComposerDocs.commentPlaceholder")}
                   submitLabel="コメントを投稿"
                   footer={
                     <Flex direction="row" gap="sm" align="center" justify="between" wrap>
@@ -385,6 +399,48 @@ export default function Demo() {
             </CardContent>
           </Card>
 
+          {/* ── 2c. footer as NodeRender — toolbar BELOW a full-width draft box ─────────────── */}
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>{t("chatComposerDocs.footerTitle")}</CardTitle>
+              <CardDescription>{t("chatComposerDocs.footerBody")}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Flex direction="col" gap="md">
+                {toolbarComments.length === 0 ? (
+                  <Text size="sm" tone="muted">
+                    {t("chatComposerDocs.noComments")}
+                  </Text>
+                ) : (
+                  toolbarComments.map((body, index) => <Text key={index}>{body}</Text>)
+                )}
+                <ChatComposer
+                  aria-label={t("chatComposerDocs.commentLabel")}
+                  value={toolbarDraft}
+                  onValueChange={setToolbarDraft}
+                  onSubmit={postToolbarComment}
+                  placeholder={t("chatComposerDocs.commentPlaceholder")}
+                  actions={false}
+                  footer={({ components: { SubmitButton } }) => (
+                    <Flex direction="row" gap="sm" align="center" justify="between">
+                      <Button
+                        size="icon-sm"
+                        variant="ghost"
+                        aria-label={t("chatComposerDocs.attach")}
+                      >
+                        <Paperclip aria-hidden="true" />
+                      </Button>
+                      <Text size="xs" tone="muted">
+                        {t("chatComposerDocs.enterHint")}
+                      </Text>
+                      <SubmitButton aria-label={t("chatComposerDocs.sendComment")} />
+                    </Flex>
+                  )}
+                />
+              </Flex>
+            </CardContent>
+          </Card>
+
           {/* ── 3. Every size step ───────────────────────────────────────────────────────── */}
           <Card>
             <CardHeader>
@@ -440,7 +496,7 @@ export default function Demo() {
                   </Flex>
                 }
                 prefix={
-                  <Button size="icon-sm" variant="ghost" aria-label="ファイルを添付">
+                  <Button size="icon-sm" variant="ghost" aria-label={t("chatComposerDocs.attach")}>
                     <Paperclip aria-hidden="true" />
                   </Button>
                 }

package/docs/i18n/messages/en.json

@@ -1201,5 +1201,64 @@
       "recovery": "Store these recovery codes somewhere safe. They are shown once.",
       "acknowledge": "I have saved them"
     }
+  },
+  "spaceCompactDocs": {
+    "title": "SpaceCompact",
+    "subtitle": "Read a row of controls as ONE box — recurrence, search, an amount with its unit",
+    "recur": {
+      "title": "Recurrence (every N weeks)",
+      "body": "The number and the unit are one setting, so they read as one box. FormField lands the label on the ROW, so a screen reader opens with “Recurrence, group” and each control inside keeps its own name.",
+      "label": "Recurrence",
+      "helper": "How often the invoice is issued automatically.",
+      "every": "Interval",
+      "unit": "Unit",
+      "reads": "Reads as",
+      "role": "role",
+      "roleValue": "group (only on a NAMED row)"
+    },
+    "unit": {
+      "day": "day",
+      "week": "week",
+      "month": "month"
+    },
+    "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.",
+      "row": "Search employees",
+      "term": "Search term",
+      "run": "Run the search",
+      "placeholder": "Name or employee number"
+    },
+    "amount": {
+      "title": "Amount, currency, and fullWidth",
+      "body": "`fullWidth` stretches the row to its parent (antd `block`). The proportions inside stay each control's own, so the digits do not crush on a narrow screen.",
+      "label": "Invoice amount",
+      "value": "Amount",
+      "currency": "Currency"
+    },
+    "vertical": {
+      "title": "orientation=\"vertical\" — a written-down partial port",
+      "body": "A vertical stack collapses the shared border, but corner-zeroing is inline-only for now: the Input and trigger corner tokens exist on the inline axis only. Written down as a follow-up rather than left as a silent gap.",
+      "row": "Note and send",
+      "note": "Handover note",
+      "send": "Send",
+      "alias": "`vertical` is antd's boolean spelling. Set both and `orientation` wins."
+    },
+    "dont": {
+      "title": "When NOT to weld",
+      "body": "Joining things that are not one setting makes unrelated values look like one box. Keep them in separate FormFields.",
+      "dept": "Department code",
+      "ext": "Extension"
+    }
+  },
+  "chatComposerDocs": {
+    "footerTitle": "footer as NodeRender · move attach / hint / send into a bottom toolbar",
+    "footerBody": "With `actions={false}` the inline send button is hidden, and passing a function to `footer` hands you `components.SubmitButton` — already wired to onSubmit, disabled and the loading swap. The draft box keeps its full width; attach sits at the row start and send at the end.",
+    "noComments": "No comments yet",
+    "commentLabel": "Comment (bottom toolbar)",
+    "commentPlaceholder": "Write a comment",
+    "attach": "Attach a file",
+    "enterHint": "Enter to send · Shift + Enter for a new line",
+    "sendComment": "Send the comment"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1195,5 +1195,64 @@
       "recovery": "リカバリーコードは安全な場所に保管してください。表示は一度きりです。",
       "acknowledge": "保管しました"
     }
+  },
+  "spaceCompactDocs": {
+    "title": "SpaceCompact",
+    "subtitle": "くっつけた1つの箱として読ませる — 繰り返し設定・検索・単位つき金額",
+    "recur": {
+      "title": "繰り返し（毎 N 週ごと）",
+      "body": "数値と単位はひとつの設定なので、ひとつの箱に見せます。ラベルは FormField が行に付けるので、読み上げは「繰り返し、グループ」から始まり、中のコントロールはそれぞれの名前を保ちます。",
+      "label": "繰り返し",
+      "helper": "請求書を自動発行する間隔です。",
+      "every": "間隔",
+      "unit": "単位",
+      "reads": "読み方",
+      "role": "role",
+      "roleValue": "group（名前が付いた行のみ）"
+    },
+    "unit": {
+      "day": "日",
+      "week": "週",
+      "month": "月"
+    },
+    "search": {
+      "title": "検索とボタン",
+      "body": "入力と実行は一続きの操作なので継ぎ目をなくします。ボタンは本物の Button のままなので、フォーカスリングも disabled もそのまま効きます。",
+      "row": "社員を検索",
+      "term": "検索語",
+      "run": "検索する",
+      "placeholder": "氏名・社員番号"
+    },
+    "amount": {
+      "title": "金額と通貨、そして fullWidth",
+      "body": "`fullWidth` は行を親の幅いっぱいに広げます（antd の `block`）。中の比率は各コントロールのままなので、狭い画面でも桁が潰れません。",
+      "label": "請求金額",
+      "value": "金額",
+      "currency": "通貨"
+    },
+    "vertical": {
+      "title": "orientation=\"vertical\" — 書かれた上での部分対応",
+      "body": "縦積みは共有の境界線を潰しますが、角の丸めは今のところ横方向だけです。Input とトリガーの角トークンが inline 方向にしか無いためで、黙って欠けているのではなくフォローアップとして書いてあります。",
+      "row": "メモと送信",
+      "note": "申し送り事項",
+      "send": "送信",
+      "alias": "`vertical` は antd 互換の真偽値スペルです。`orientation` と両方指定すると `orientation` が勝ちます。"
+    },
+    "dont": {
+      "title": "くっつけない方がよい場合",
+      "body": "ひとつの設定ではないものを繋ぐと、関係のない値が同じ箱に見えます。別々の FormField に分けてください。",
+      "dept": "部署コード",
+      "ext": "内線"
+    }
+  },
+  "chatComposerDocs": {
+    "footerTitle": "footer as NodeRender · attach / hint / send を下段のツールバーへ",
+    "footerBody": "actions={false} で行内の送信ボタンを隠し、footer に関数を渡すと components.SubmitButton（onSubmit / disabled / ローディング切替が配線済み）を受け取れます。下書き欄は全幅のまま、添付は行頭・送信は行末に配置できます。",
+    "noComments": "まだコメントはありません",
+    "commentLabel": "コメント（下段ツールバー）",
+    "commentPlaceholder": "コメントを入力",
+    "attach": "ファイルを添付",
+    "enterHint": "Enter で送信 · Shift + Enter で改行",
+    "sendComment": "コメントを送信"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1195,5 +1195,64 @@
       "recovery": "Hãy cất các mã khôi phục ở nơi an toàn. Chúng chỉ hiện một lần.",
       "acknowledge": "Tôi đã lưu lại"
     }
+  },
+  "spaceCompactDocs": {
+    "title": "SpaceCompact",
+    "subtitle": "Đọc một hàng control như MỘT hộp — lặp lại, tìm kiếm, số tiền kèm đơn vị",
+    "recur": {
+      "title": "Lặp lại (mỗi N tuần)",
+      "body": "Con số và đơn vị là một thiết lập, nên chúng đọc như một hộp. FormField gắn nhãn lên HÀNG, nên screen reader mở đầu bằng “Lặp lại, nhóm” và mỗi control bên trong vẫn giữ tên riêng.",
+      "label": "Lặp lại",
+      "helper": "Tần suất phát hành hoá đơn tự động.",
+      "every": "Khoảng",
+      "unit": "Đơn vị",
+      "reads": "Đọc thành",
+      "role": "role",
+      "roleValue": "group (chỉ khi hàng CÓ tên)"
+    },
+    "unit": {
+      "day": "ngày",
+      "week": "tuần",
+      "month": "tháng"
+    },
+    "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.",
+      "row": "Tìm nhân viên",
+      "term": "Từ khoá",
+      "run": "Chạy tìm kiếm",
+      "placeholder": "Tên hoặc mã nhân viên"
+    },
+    "amount": {
+      "title": "Số tiền, tiền tệ và fullWidth",
+      "body": "`fullWidth` kéo hàng đầy chiều rộng cha (antd `block`). Tỉ lệ bên trong vẫn của từng control nên chữ số không bị bóp trên màn hẹp.",
+      "label": "Số tiền hoá đơn",
+      "value": "Số tiền",
+      "currency": "Tiền tệ"
+    },
+    "vertical": {
+      "title": "orientation=\"vertical\" — phần port còn thiếu, đã ghi rõ",
+      "body": "Xếp dọc thì gộp được đường viền chung, nhưng bo góc hiện chỉ làm ở trục ngang: token góc của Input và trigger chỉ có ở trục inline. Ghi rõ thành việc tiếp theo, không để thiếu âm thầm.",
+      "row": "Ghi chú và gửi",
+      "note": "Ghi chú bàn giao",
+      "send": "Gửi",
+      "alias": "`vertical` là cách viết boolean của antd. Đặt cả hai thì `orientation` thắng."
+    },
+    "dont": {
+      "title": "Khi KHÔNG nên nối",
+      "body": "Nối những thứ không phải một thiết lập sẽ khiến các giá trị không liên quan trông như một hộp. Hãy tách FormField riêng.",
+      "dept": "Mã phòng ban",
+      "ext": "Số máy lẻ"
+    }
+  },
+  "chatComposerDocs": {
+    "footerTitle": "footer dạng NodeRender · đưa đính kèm / gợi ý / gửi xuống thanh dưới",
+    "footerBody": "Với `actions={false}` nút gửi nội dòng bị ẩn, và truyền một hàm vào `footer` sẽ trả về `components.SubmitButton` — đã nối sẵn onSubmit, disabled và trạng thái loading. Ô soạn giữ nguyên toàn chiều rộng; đính kèm ở đầu hàng, gửi ở cuối.",
+    "noComments": "Chưa có bình luận nào",
+    "commentLabel": "Bình luận (thanh dưới)",
+    "commentPlaceholder": "Nhập bình luận",
+    "attach": "Đính kèm tệp",
+    "enterHint": "Enter để gửi · Shift + Enter để xuống dòng",
+    "sendComment": "Gửi bình luận"
   }
 }