@godxjp/ui 19.6.0 → 20.1.0

package/docs/README.md

@@ -1,26 +1,26 @@
 # @godxjp/ui Documentation
 
-| Doc                                          | Purpose                                                                                                                                                                         |
-| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [CONSUMER-RULES.md](./CONSUMER-RULES.md)     | **Start here if you build an app with @godxjp/ui** — the ten rules the audit enforces (styles entry, layout owners, real primitives, tokens)                                    |
-| [DEVELOPMENT.md](./DEVELOPMENT.md)           | **Contributor guideline** — role/boundary, architecture, how to add/extend, verify                                                                                              |
-| [COMPONENTS.md](./COMPONENTS.md)             | Component catalog by Ant Design group                                                                                                                                           |
-| [PROPS-VOCABULARY.md](./PROPS-VOCABULARY.md) | Atomic prop types (`*Prop` suffix)                                                                                                                                              |
-| [PROPS-REGISTRY.md](./PROPS-REGISTRY.md)     | Machine-readable registry + forbidden aliases                                                                                                                                   |
-| [DATETIME.md](./DATETIME.md)                 | **Mandatory** `formatDate` — all date/time display                                                                                                                              |
-| [DESIGN-AUTHORITY.md](./DESIGN-AUTHORITY.md) | **Which external standard owns which decision** — APG, Radix, shadcn, Ant Design groups, SmartHR colour, Carbon geometry. Read before inventing a spacing/density/layout answer |
-| [SPACING.md](./SPACING.md)                   | Golden ratio (φ) macro spacing — PageContainer sections, Flex gap, Card rhythm                                                                                                  |
-| [FORMS.md](./FORMS.md)                       | **Mandatory** react-hook-form + Zod 4                                                                                                                                           |
-| [TESTING.md](./TESTING.md)                   | **Mandatory** Vitest per component                                                                                                                                              |
-| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md)       | Per-frame axe a11y + geometry + coverage CI gates — how to run/regenerate locally                                                                                               |
-| [../README.md](../README.md)                 | Setup, workspace wiring, theme                                                                                                                                                  |
+| Doc                                          | Purpose                                                                                                                                                                                                               |
+| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [CONSUMER-RULES.md](./CONSUMER-RULES.md)     | **Start here if you build an app with @godxjp/ui** — the ten rules the audit enforces (styles entry, layout owners, real primitives, tokens)                                                                          |
+| [DEVELOPMENT.md](./DEVELOPMENT.md)           | **Contributor guideline** — role/boundary, architecture, how to add/extend, verify                                                                                                                                    |
+| [COMPONENTS.md](./COMPONENTS.md)             | Component catalog by taxonomy group                                                                                                                                                                                   |
+| [PROPS-VOCABULARY.md](./PROPS-VOCABULARY.md) | Atomic prop types (`*Prop` suffix)                                                                                                                                                                                    |
+| [PROPS-REGISTRY.md](./PROPS-REGISTRY.md)     | Machine-readable registry + forbidden aliases                                                                                                                                                                         |
+| [DATETIME.md](./DATETIME.md)                 | **Mandatory** `formatDate` — all date/time display                                                                                                                                                                    |
+| [DESIGN-AUTHORITY.md](./DESIGN-AUTHORITY.md) | **Which external standard owns which decision** — APG, Radix, shadcn, Ant Design groups, SmartHR colour, Carbon geometry, measured contrast for derived colour. Read before inventing a spacing/density/layout answer |
+| [SPACING.md](./SPACING.md)                   | Golden ratio (φ) macro spacing — PageContainer sections, Flex gap, Card rhythm                                                                                                                                        |
+| [FORMS.md](./FORMS.md)                       | **Mandatory** react-hook-form + Zod 4                                                                                                                                                                                 |
+| [TESTING.md](./TESTING.md)                   | **Mandatory** Vitest per component                                                                                                                                                                                    |
+| [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md)       | Per-frame axe a11y + geometry + coverage CI gates — how to run/regenerate locally                                                                                                                                     |
+| [../README.md](../README.md)                 | Setup, workspace wiring, theme                                                                                                                                                                                        |
 
 ## Preview
 
 ```bash
 cd packages/ui
 pnpm preview          # http://localhost:6008
-pnpm preview:build    # static site → preview/dist/
+pnpm preview:build    # static site → preview/dist/ — heavy; CI's job, run at most once pre-PR
 ```
 
 ### Preview doc format

package/docs/STANDARDS-vocabulary-tokens.md

@@ -1,6 +1,6 @@
 # Prop Vocabulary + Design Token Standards
 
-These rules are normative for @godxjp/ui 8.0.0. They mirror `debate/props-vocab-token-consistency/04-Decision.md`.
+These rules are normative for @godxjp/ui. They came out of the props-vocabulary / token-consistency debate, whose record lived in `debate/` until that directory was removed — this file is now the normative source, not a mirror of one.
 
 1. Prop vocabulary: every exported `*Prop` type in `src/props/components/` MUST have exactly one `COMPONENT_PROP_REGISTRY` entry.
 2. Prop vocabulary: every public property in an exported component prop type MUST map to one `VOCABULARY_REGISTRY` entry or to a `local: true` registry record with a non-empty `reason`.

package/docs/TESTING.md

@@ -5,10 +5,16 @@ Every component **must** ship with a Vitest suite before merge.
 ## Run
 
 ```bash
-cd packages/ui
-pnpm test              # single run
-pnpm test:watch        # watch mode
-pnpm test:coverage     # v8 coverage report
+# While working — ONLY the tests for what you touched. Tests sit beside the
+# component in `src/components/<group>/__tests__/`, so scope to that folder.
+pnpm vitest run src/components/<group>/__tests__ --maxWorkers=2
+pnpm vitest watch src/components/<group>/__tests__     # watch one component
+
+# CI only — 506 files / 3700+ tests. Do NOT run these from an agent loop or with
+# other agents on the machine: measured 70 vitest workers at load 90, an overheating
+# laptop and a burnt monthly API budget.
+pnpm test              # single run — CI
+pnpm test:coverage     # v8 coverage report — CI
 ```
 
 ## File location
@@ -68,7 +74,7 @@ import "@testing-library/jest-dom/vitest";
 | `react-hooks/set-state-in-effect` | sync setState in effects         |
 | `RenderLoopGuard` in tests        | runaway re-renders during Vitest |
 
-Run `pnpm lint` before `pnpm test` — official React Compiler rules align with test guard.
+Run `pnpm lint` before your scoped test run — official React Compiler rules align with test guard.
 
 ## Forms testing
 
@@ -83,7 +89,10 @@ Never test forms with raw `useState` — mirror production `FormRoot` + `FormFie
 
 ## CI gate
 
-`pnpm test` in `packages/ui` must pass with zero failures before any UI PR merges.
+The full suite must pass with zero failures before any UI PR merges — **and that run belongs
+to CI, not to you.** Locally you run only the tests for the files you changed; CI runs
+everything on the PR. `tal --help` states the same rule for the agent loop: *FULL SUITE KHÔNG
+THUỘC VỀ VÒNG LẶP.*
 
 ## When tests fail
 

package/docs/WHAT-BELONGS-HERE.md

@@ -0,0 +1,179 @@
+# Cái gì đáng đưa vào @godxjp/ui
+
+Một design system hỏng theo hai hướng ngược nhau, và cả hai đều hỏng thật:
+
+- **Quá hẹp** — thiếu prop, nên consumer buộc phải lách bằng class hoặc mã màu
+  gõ tay. Đây là hướng đang hỏng: một lượt kiểm trên godx-chat (08/09/2026) ra
+  **51 lỗi, 42 trong đó đến từ ĐÚNG MỘT prop còn thiếu** (đệm trên primitive bố
+  cục).
+- **Quá rộng** — nhận mọi yêu cầu, thành một đống prop không ai nhớ, và mỗi
+  prop là một mảnh DOM nội bộ bị đóng băng thành API công khai.
+
+Tài liệu này là bộ lọc giữa hai hướng đó. Nó cố tình viết thành câu hỏi **trả
+lời được bằng có/không**, không phải nguyên tắc để cảm nhận.
+
+---
+
+## Ba câu hỏi — phải ĐỦ CẢ BA
+
+### 1. Có phải consumer KHÔNG CÓ nước đi hợp lệ nào không?
+
+Không phải "bất tiện". Là **bất khả**: mọi prop và token đang có đều không nói
+được điều cần nói, và mọi đường còn lại đều bị `ui-audit` chặn.
+
+- ✅ Thiết kế cần 12px giữa hai phần tử trên một HÀNG. Thang bậc tên đọc trục
+  dọc nên `md` = 16px; làm tròn thì lệch bố cục; viết `gap: 12px` thì
+  `no-arbitrary-spacing` chặn. **Không có nước đi.** → gh#401, đã vá.
+- ❌ "Viết `<Flex gap={3}>` dài hơn `gap-3`." Có nước đi, chỉ là dài hơn.
+
+Cách kiểm: viết ra đoạn mã bạn _muốn_ viết, chạy `ui-audit` lên nó. Nếu nó
+xanh, bạn đã có nước đi.
+
+### 2. Nó thuộc về HÌNH DẠNG của component, hay thuộc về NỘI DUNG của một màn?
+
+Design system sở hữu hình dạng. Màn hình sở hữu nội dung.
+
+- ✅ `Flex` không có đệm. Mọi hàng/cột trong mọi ứng dụng đều có thể cần đệm.
+- ✅ `TableHead` không có trục căn lề. Mọi bảng có cột số đều cần.
+- ❌ "Bảng quản trị thành viên cần cột vai trò rộng 8rem." Đó là màn hình ấy.
+- ❌ "Dashboard cần bốn thẻ chỉ số xếp ngang." Đó là bố cục của một trang.
+
+Câu hỏi phụ khi phân vân: **consumer thứ hai có gặp không?** Nếu câu trả lời là
+"chắc là không" thì gần như luôn là nội dung, không phải hình dạng.
+
+### 3. Diễn đạt được thành một TRỤC CÓ TÊN không?
+
+Một prop phải gọi được **ý định**, không chỉ mở một lỗ.
+
+- ✅ `pad={{ blockStart: 3 }}` — trục logic, bậc thang, đọc ra nghĩa.
+- ❌ `styles={{ body: {...}, header: {...} }}` — không phải một trục; nó là một
+  lỗ tự do, và nó đóng băng tên khe DOM nội bộ thành API công khai. Xem mục
+  "Không đáng" bên dưới.
+
+---
+
+## Bốn dấu hiệu MẠNH — một cái là đủ để ưu tiên làm ngay
+
+Ba câu trên quyết định _có thuộc về đây không_. Bốn dấu hiệu này quyết định
+_làm trước hay sau_.
+
+### a. Nó chặn một yêu cầu TIẾP CẬN
+
+Không thương lượng, làm trước.
+Ví dụ đã gặp: vòng tiêu điểm của Input là 1px (hạ xuống có chủ ý), không
+đạt WCAG 2.4.11 vốn đòi vùng chỉ báo tương đương đường 2px. Và `FormRoot` không
+có móc `onInvalid`, nên không đưa được tiêu điểm về trường lỗi đầu tiên — WCAG
+3.3.1 / 2.4.3.
+
+### b. Nó hỏng IM LẶNG
+
+Không lỗi biên dịch, không test đỏ, không cảnh báo — chỉ sai.
+Ví dụ đã gặp: `AppShell` nhận cả `logo` lẫn `topbar` nhưng `resolvedTopbar` trả
+thẳng `topbar`, nên `logo` **không bao giờ được vẽ**. godx-chat truyền cả hai
+suốt nhiều tháng và không ai phát hiện.
+
+Lớp lỗi này đắt gấp nhiều lần lớp lỗi ồn ào, vì nó không có ai báo.
+
+### c. Đếm được
+
+Một khoảng trống đẻ ra N lỗi audit là một khoảng trống có số đo, không phải một
+ý kiến. 42 lỗi từ một prop thiếu là một ưu tiên; một lỗi từ một prop thiếu thì
+chưa chắc.
+
+### d. Nó BẤT ĐỐI XỨNG với thứ đã có
+
+Nếu trục dọc có `xl` mà trục ngang không có, khoảng trống ấy gần như luôn là
+**quên**, không phải quyết định. Sửa cho cân là rẻ và không tranh cãi.
+
+---
+
+## Cái KHÔNG đáng vào — và vì sao
+
+**Bố cục của một màn hình cụ thể.** Nó thuộc về màn hình đó. Nếu ba màn cùng
+cần, lúc ấy nó đã thành hình dạng và quay lại câu hỏi 2.
+
+**Một giá trị dùng đúng một lần.** Đừng đẻ prop cho nó — dùng cửa thoát
+(`gapRaw`, `padRaw`). Cửa thoát để lại `data-*-raw` trên DOM nên đếm được; khi
+số đếm ấy lớn lên, ĐÓ mới là lúc nó thành một trục đáng có tên.
+
+**Lỗ kiểu dáng tự do** (`styles={{ slot }}`, `classNames={{ slot }}`). Nó đóng
+băng cấu trúc DOM nội bộ thành API công khai, và audit **không đếm được** nó
+(một object style dựng ở đâu cũng được rồi spread vào). Nó cũng ngược hẳn với
+`style: 0/289` — lập trường nhất quán hiện nay là cho prop ý định, không cho lỗ
+kiểu dáng.
+
+**Gu thẩm mỹ.** "Dùng nhiều khoảng trắng", "hai màu nhấn là đủ", "tránh lưới
+bento". Không kiểm chứng được, không cổng nào canh, và khi nó tới tay agent
+TRƯỚC luật cứng thì kết quả là mã đẹp mà sai hợp đồng.
+
+**Thứ chỉ tiết kiệm vài dòng ở call site.** Nếu đường hiện tại đã hợp lệ và
+đọc được, việc rút ngắn nó không phải việc của design system.
+
+---
+
+## Thêm rồi thì NỢ gì
+
+Một prop mới chưa xong khi nó biên dịch được. Ba việc bắt buộc, và cả ba đều đã
+có cổng CI:
+
+1. **Vào catalog.** Chạy `node scripts/gen-component-api-manifest.mjs`.
+   `check:component-api-manifest` canh việc này. **Không vào catalog thì agent
+   không biết nó tồn tại** — và đó không phải giả thuyết: `pad`/`padRaw` được
+   thêm vào gói nhưng catalog phát hành chưa có, nên một agent tra MCP đúng quy
+   trình vẫn kết luận "Flex chỉ có gap" và bỏ cuộc trước 21 lỗi mà nó có thể
+   sửa.
+
+2. **Có bằng chứng phủ từng nhánh giá trị.** `component-case-evidence.json` +
+   `check:frame-coverage-ledger`. Bằng chứng phải trỏ vào test THẬT SỰ chạy qua
+   nhánh ấy, không phải một tệp cho có.
+
+3. **Có ví dụ BIÊN DỊCH ĐƯỢC.** Hậu quả đo được khi không kiểm: pattern
+   `confirm-destructive` truyền cho `Dialog` một prop `mode` không tồn tại,
+   hướng dẫn DataTable dùng `variant="success"` (chính thứ luật
+   `status-tone-not-variant` cấm), và ví dụ `Input` gọi một prop
+   `onValueChange` không có thật. Agent chép chúng và viết ra mã hỏng.
+
+   Ba chỗ ấy đã sửa, và `check:doc-prop-existence` nay bắt được lớp lỗi đó.
+   Lưu ý khi viết tài liệu: cổng ấy đọc mọi đoạn JSX trong `docs/**` như mã
+   THẬT, nên **trích dẫn một API sai để làm ví dụ cũng bị bắt**. Mô tả bằng lời
+   như đoạn trên, đừng dán một thẻ JSX hoàn chỉnh vào.
+
+---
+
+## Một lợi ích ẩn của việc rời Radix, đo được
+
+`check:doc-prop-existence` canh chiều "mọi prop dùng trong ví dụ đều phải tồn
+tại" — chính lớp lỗi khiến agent chép ví dụ rồi viết ra mã hỏng (prop `mode`
+trên `Dialog`, prop `onValueChange` trên `Input`). Nhưng nó **bỏ qua mọi
+component bọc primitive bên thứ ba**, vì với chúng manifest chỉ là cận dưới:
+prop thật nằm trong types của Radix, generator không mở ra được.
+
+Số đo (08/09/2026):
+
+|                                               | component KHÔNG kiểm được |
+| --------------------------------------------- | ------------------------- |
+| `main`                                        | **139 / 289**             |
+| `feat/v20-react-aria` (6 primitive đã chuyển) | **126 / 289**             |
+
+Mỗi primitive rời Radix là `declaredIn` chuyển từ `node_modules` vào `src/`, và
+component đó **bước vào vùng kiểm được**. Sáu primitive đầu đã gỡ rào cho 13
+component.
+
+Nên đợt đổi nền không chỉ là thay thư viện. Nó là cách duy nhất làm cho 126
+component còn lại có thể được canh — và trong số đó có `Dialog`, `Input`,
+`Badge`, tức đúng những component mà ví dụ sai đã lọt qua.
+
+## Khi câu trả lời là "không thuộc về đây"
+
+Nói ra ở chỗ gặp nó, bằng mã:
+
+```tsx
+/*
+ * KHÔNG thuộc về design system: bề rộng này là số đo của riêng màn hình
+ * quản trị thành viên, không phải một trục của Table. Nếu màn thứ hai cần
+ * cùng thứ, lúc đó mở issue.
+ */
+```
+
+Một dòng như thế đáng giá hơn một issue mở rồi bỏ đấy — nó nói cho người sau
+biết ai đã cân nhắc, và cân nhắc ra sao.

package/docs/charts/cjk-category-axis.tsx

@@ -0,0 +1,81 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { BarChart } from "@godxjp/ui/charts";
+
+/**
+ * 横棒グラフの分類軸と、カードの見出しとの重複 — gh#409 · 1 と 2。
+ *
+ * 監理団体の実習実施者（受入企業）名は「株式会社」を含む 8〜10 文字の全角で、幅は 100〜125px に
+ * なります。分類軸の幅を固定にすると、名前の**先頭**、つまり識別に必要な部分から切り落とされます。
+ * BarChart は実際に描画される字形で各目盛りを実測し、いちばん広い目盛りに合わせて軸を確保します。
+ * 上限はトークン `--chart-category-axis-max-fraction` が持ち、これを超える名前だけが**末尾**で
+ * 省略され、全文は目盛りの `<title>` と図の代替テキストに残ります。
+ *
+ * 下段のカードは `showCaption={false}`。`CardTitle` が見出しを担うので、キャプションは
+ * `sr-only` として DOM に残り、`role="img"` の名前は失われません。
+ */
+
+/** 実習実施者ごとの受入人数。企業名は 8〜10 文字の全角で、固定幅の軸では先頭が消えていました。 */
+const acceptances = [
+  { company: "株式会社山田製作所", trainees: 42 },
+  { company: "佐藤食品株式会社", trainees: 35 },
+  { company: "株式会社中村建設", trainees: 28 },
+  { company: "東海精密工業株式会社", trainees: 24 },
+  { company: "みどり農産株式会社", trainees: 18 },
+  { company: "大和金属加工株式会社", trainees: 12 },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="CJK category axis"
+      subtitle="横棒グラフの分類軸を実測で確保し、見出しの重複をなくす"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>横棒 BarChart · 分類軸は目盛りの実測で決まる</CardTitle>
+            <CardDescription>
+              いちばん広い目盛りに合わせて軸幅を確保します。キャプションは既定どおり表示。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart
+              id="cjk-axis-chart"
+              label="実習実施者別 受入人数"
+              data={acceptances}
+              categoryKey="company"
+              series={[{ dataKey: "trainees", label: "受入人数" }]}
+              showLegend={false}
+              size="md"
+              horizontal
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>実習実施者別 受入人数</CardTitle>
+            <CardDescription>
+              `showCaption={"{false}"}` — 見出しは CardTitle が担い、キャプションは sr-only
+              として残るのでアクセシブルな名前は保たれます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart
+              id="cjk-axis-chart-no-caption"
+              label="実習実施者別 受入人数"
+              data={acceptances}
+              categoryKey="company"
+              series={[{ dataKey: "trainees", label: "受入人数" }]}
+              showLegend={false}
+              showCaption={false}
+              size="md"
+              horizontal
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

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

@@ -281,6 +281,28 @@ export default function Demo() {
             </Card>
           </ResponsiveGrid>
         </Flex>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>連続したツールバー</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text>本文</Text>
+          </CardContent>
+          <CardBar pad={{ block: 1, inline: 3 }} surface="muted" border="block-start" gap="sm">
+            <Button variant="ghost" size="sm">
+              添付
+            </Button>
+          </CardBar>
+          <CardBar
+            pad={{ block: 2, inline: 3 }}
+            border="block-start"
+            gap="sm"
+            extra={<Button>送信</Button>}
+          >
+            <Text tone="muted">下書きを保存しました</Text>
+          </CardBar>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/data-display/data-table/examples/antd-parity.tsx

@@ -0,0 +1,257 @@
+import { useState } from "react";
+
+import {
+  Card,
+  CardContent,
+  Badge,
+  DataTable,
+  Descriptions,
+  TableCell,
+  TableRow,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * DataTable / Descriptions — the Ant Design 6.6.2 parity surface on one screen: frozen columns
+ * (`fixed`), truncation (`ellipsis`), multi-column sort (`sorter.multiple`), header filters
+ * (`filters` + `onFilter`), the full `rowSelection` object, `expandable` detail rows, a `summary`
+ * totals row, a `scroll` envelope and a bordered `Descriptions` on a responsive column ladder.
+ *
+ * It is also the MEASUREMENT surface: the frozen columns and the scroll envelope are geometry, and
+ * geometry is verified against this page in a browser, not by eye.
+ */
+type Line = {
+  id: string;
+  code: string;
+  partner: string;
+  note: string;
+  status: "active" | "pending" | "failed";
+  region: string;
+  owner: string;
+  updated: string;
+  amount: number;
+};
+
+const STATUS_TONE = { active: "success", pending: "warning", failed: "destructive" } as const;
+const STATUS_LABEL = { active: "有効", pending: "保留", failed: "失敗" } as const;
+
+const BASE_ROWS: Line[] = [
+  {
+    id: "L-1",
+    code: "INV-0312",
+    partner: "株式会社ベトヤ",
+    note: "四月分の請求。検収は完了しているが振込確認が未了のため保留にしている。",
+    status: "active",
+    region: "関東",
+    owner: "田中",
+    updated: "2024-04-12",
+    amount: 482000,
+  },
+  {
+    id: "L-2",
+    code: "INV-0311",
+    partner: "ハノイ物流",
+    note: "越境輸送分。通関書類の差し替えを依頼済み。",
+    status: "pending",
+    region: "海外",
+    owner: "佐藤",
+    updated: "2024-04-11",
+    amount: 128400,
+  },
+  {
+    id: "L-3",
+    code: "INV-0310",
+    partner: "GMO決済",
+    note: "決済手数料。月次で自動計上される。",
+    status: "active",
+    region: "関東",
+    owner: "田中",
+    updated: "2024-04-10",
+    amount: 64800,
+  },
+  {
+    id: "L-4",
+    code: "INV-0309",
+    partner: "東京ロジ",
+    note: "再送分。前回の請求が差し戻されたため再発行している。",
+    status: "failed",
+    region: "関東",
+    owner: "鈴木",
+    updated: "2024-04-09",
+    amount: 312000,
+  },
+  {
+    id: "L-5",
+    code: "INV-0308",
+    partner: "大阪商事",
+    note: "年間契約の四半期按分。",
+    status: "pending",
+    region: "関西",
+    owner: "鈴木",
+    updated: "2024-04-08",
+    amount: 900500,
+  },
+];
+
+/**
+ * Enough rows for the `scroll.y` envelope to actually bite — five rows never reach an 18rem cap,
+ * and a cap that never clips proves nothing.
+ */
+const ROWS: Line[] = [
+  ...BASE_ROWS,
+  ...BASE_ROWS.map((row, i) => ({
+    ...row,
+    id: `${row.id}-b`,
+    code: `INV-02${String(10 + i).padStart(2, "0")}`,
+    updated: `2024-03-${String(10 + i).padStart(2, "0")}`,
+  })),
+];
+
+const yen = new Intl.NumberFormat("ja-JP", {
+  style: "currency",
+  currency: "JPY",
+  maximumFractionDigits: 0,
+});
+
+const columns: ColumnDef<Line>[] = [
+  // Frozen to the inline start — the identity column stays put while the grid scrolls.
+  { key: "code", header: "伝票番号", fixed: "start", width: "150px", sorter: { multiple: 2 } },
+  { key: "partner", header: "取引先", width: "220px" },
+  // One line, truncated, with the full text kept as the cell's title.
+  { key: "note", header: "備考", ellipsis: true, width: "260px" },
+  {
+    key: "status",
+    header: "状態",
+    width: "140px",
+    filters: [
+      { text: "有効", value: "active" },
+      { text: "保留", value: "pending" },
+      { text: "失敗", value: "failed" },
+    ],
+    onFilter: (value, row) => row.status === value,
+    render: (row) => <Badge tone={STATUS_TONE[row.status]}>{STATUS_LABEL[row.status]}</Badge>,
+  },
+  {
+    key: "region",
+    header: "地域",
+    width: "140px",
+    filters: [
+      { text: "関東", value: "関東" },
+      { text: "関西", value: "関西" },
+      { text: "海外", value: "海外" },
+    ],
+    filterMultiple: false,
+    onFilter: (value, row) => row.region === value,
+  },
+  { key: "owner", header: "担当", width: "140px", sorter: { multiple: 1 } },
+  {
+    key: "updated",
+    header: "更新日",
+    width: "160px",
+    sorter: true,
+    sortDirections: ["desc", "asc"],
+  },
+  // Frozen to the inline end — the amount stays readable at any scroll position.
+  {
+    key: "amount",
+    header: "金額",
+    align: "right",
+    fixed: "end",
+    width: "160px",
+    sorter: (a, b) => a.amount - b.amount,
+    render: (row) => yen.format(row.amount),
+  },
+];
+
+export default function AntdParityDemo() {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <PageContainer title="Ant Design パリティ" subtitle="DataTable / Descriptions">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardContent flush>
+            <DataTable
+              data={ROWS}
+              columns={columns}
+              getRowId={(row) => row.id}
+              bordered
+              showSorterTooltip
+              scroll={{ x: 1400, y: "18rem" }}
+              sticky
+              rowSelection={{
+                selectedRowKeys: selected,
+                onChange: (keys) => {
+                  setSelected(keys);
+                },
+                selections: true,
+                getCheckboxProps: (row) => ({ disabled: row.status === "failed" }),
+                preserveSelectedRowKeys: true,
+              }}
+              expandable={{
+                expandedRowRender: (row) => (
+                  <Descriptions bordered columns={{ sm: 2, lg: 3 }} layout="horizontal">
+                    <Descriptions.Item label="伝票番号" mono>
+                      {row.code}
+                    </Descriptions.Item>
+                    <Descriptions.Item label="担当">{row.owner}</Descriptions.Item>
+                    <Descriptions.Item label="地域">{row.region}</Descriptions.Item>
+                    <Descriptions.Item label="備考" span="filled">
+                      {row.note}
+                    </Descriptions.Item>
+                  </Descriptions>
+                ),
+                rowExpandable: (row) => row.status !== "failed",
+              }}
+              summary={(rows) => (
+                <TableRow>
+                  <TableCell />
+                  <TableCell />
+                  <TableCell>合計</TableCell>
+                  <TableCell />
+                  <TableCell />
+                  <TableCell />
+                  <TableCell />
+                  <TableCell />
+                  <TableCell>
+                    {yen.format(rows.reduce((sum, row) => sum + row.amount, 0))}
+                  </TableCell>
+                </TableRow>
+              )}
+              onRow={(row) => ({ "data-row-key": row.id })}
+            >
+              <DataTable.Toolbar>
+                <DataTable.Search />
+                <Flex direction="row" gap="sm" align="center">
+                  <DataTable.ViewOptions />
+                  <DataTable.DensityToggle />
+                </Flex>
+              </DataTable.Toolbar>
+              <DataTable.Content />
+              <DataTable.Pagination />
+            </DataTable>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent>
+            <Text size="sm" tone="muted">
+              選択中: {selected.length} 件
+            </Text>
+            <Descriptions bordered columns={{ sm: 2, lg: 4 }}>
+              <Descriptions.Item label="伝票数">{ROWS.length}</Descriptions.Item>
+              <Descriptions.Item label="通貨">JPY</Descriptions.Item>
+              <Descriptions.Item label="期間">2024-04-08 ～ 2024-04-12</Descriptions.Item>
+              <Descriptions.Item label="ステータス">確定前</Descriptions.Item>
+              <Descriptions.Item label="メモ" span="filled">
+                Ant Design 6.6.2 の `bordered` と `column` レスポンシブ指定をそのまま受ける。
+              </Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}