@godxjp/ui 21.0.0 → 22.0.0

package/docs/layout/mobile-shell.tsx

@@ -32,6 +32,11 @@ export default function Demo() {
 
   return (
     <MobileShell
+      // `width="phone"` because this frame is READ ON A DESKTOP. The shell's own docstring already
+      // named this case on the block axis (`height="fill"` for "a phone view embedded in a wider
+      // page"); the inline axis had no answer until now, so this page drew a 1232px-wide handheld
+      // app with its four tab-bar destinations spread across the screen.
+      width="phone"
       statusBar={
         <>
           <Text size="sm" weight="medium" tabular>

package/docs/navigation/tabs.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+import { Trash2 } from "lucide-react";
+
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -44,8 +46,45 @@ const journalItems = [
   },
 ];
 
+/**
+ * 20 saved views with real Japanese labels — a strip that is wider than 1920px, so it overflows at
+ * EVERY width the browser gates sweep. `scripts/check-tabs-overflow-menu.mjs` measures this frame;
+ * it fails if the strip ever stops overflowing, because a gate over a bar that fits proves nothing.
+ */
+const savedViewItems = [
+  { value: "all", label: "すべての仕訳", content: <Text as="p">全 1,284 件</Text> },
+  { value: "pending", label: "未承認の仕訳", content: <Text as="p">未承認 2 件</Text> },
+  { value: "posted", label: "承認済の仕訳", content: <Text as="p">承認済 48 件</Text> },
+  { value: "voided", label: "取消済の仕訳", content: <Text as="p">取消済 3 件</Text> },
+  { value: "returned", label: "差戻しの仕訳", content: <Text as="p">差戻し 5 件</Text> },
+  { value: "draft", label: "下書きの仕訳", content: <Text as="p">下書き 12 件</Text> },
+  { value: "recurring", label: "定期仕訳のひな形", content: <Text as="p">ひな形 7 件</Text> },
+  { value: "accrual", label: "未払費用の計上", content: <Text as="p">未払費用 9 件</Text> },
+  { value: "prepaid", label: "前払費用の振替", content: <Text as="p">前払費用 4 件</Text> },
+  { value: "payroll", label: "給与支払の仕訳", content: <Text as="p">給与 3 件</Text> },
+  { value: "tax", label: "消費税の集計", content: <Text as="p">消費税 6 件</Text> },
+  { value: "closing", label: "決算整理の仕訳", content: <Text as="p">決算整理 11 件</Text> },
+  { value: "audit", label: "監査対象の仕訳", content: <Text as="p">監査対象 8 件</Text> },
+  {
+    value: "archived",
+    label: "アーカイブ済の仕訳",
+    content: <Text as="p">アーカイブ 214 件</Text>,
+  },
+  { value: "fx", label: "外貨建の換算差額", content: <Text as="p">換算差額 2 件</Text> },
+  { value: "intercompany", label: "関係会社間の取引", content: <Text as="p">関係会社 15 件</Text> },
+  {
+    value: "fixed-asset",
+    label: "固定資産の減価償却",
+    content: <Text as="p">減価償却 22 件</Text>,
+  },
+  { value: "inventory", label: "棚卸資産の評価替", content: <Text as="p">評価替 6 件</Text> },
+  { value: "bank", label: "銀行勘定の照合", content: <Text as="p">未照合 4 件</Text> },
+  { value: "reversal", label: "翌期首の振戻し", content: <Text as="p">振戻し 9 件</Text> },
+];
+
 export default function Demo() {
   const [activeTab, setActiveTab] = useState("pending");
+  const [reopened, setReopened] = useState(0);
   const [editableTabs, setEditableTabs] = useState([
     { value: "je-0042", label: "JE-0042", content: <Text as="p">売上計上 ¥480,000</Text> },
     { value: "je-0043", label: "JE-0043", content: <Text as="p">仕入計上 ¥120,000</Text> },
@@ -367,6 +406,116 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* antd `more` — overflow="menu" beside the default overflow="scroll" */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>overflow · scroll(既定) / menu</CardTitle>
+            <CardDescription>
+              antd の more をこのライブラリの overflow 語彙に写したもの。既定の scroll
+              は今までどおり、帯が自分の水平オーバーフローをスクロールする。menu
+              はそれに加えて、帯の外に「他のタブ」ボタンを出し、いま見えていないタブだけを並べる ·
+              antd と違いタブは帯から取り除かれない(tablist はタブ以外を持てず、display:none
+              のタブはロービングフォーカスを受け取れないため · WAI-ARIA APG)。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  overflow=&quot;scroll&quot;(既定)
+                </Text>
+                <Tabs
+                  id="antd-overflow-scroll"
+                  defaultValue="all"
+                  variant="line"
+                  items={savedViewItems}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  overflow=&quot;menu&quot;
+                </Text>
+                <Tabs
+                  id="antd-overflow-menu"
+                  defaultValue="all"
+                  variant="line"
+                  overflow="menu"
+                  items={savedViewItems}
+                />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* antd onTabClick / removeIcon / Tab.forceRender */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>onTabClick · closeIcon · forceRender</CardTitle>
+            <CardDescription>
+              onTabClick は antd の onTabClick で、ポインタで押されたときだけ発火し DOM の
+              MouseEvent を渡す(キーボードは activationMode=&quot;manual&quot;
+              でフォーカス移動と選択が分かれるため発火しない · 選択は onValueChange
+              が担当)。closeIcon は antd の removeIcon で、タブ全体の既定グリフを差し替える(item
+              側の closeIcon が優先)。item の forceRender は antd の Tab.forceRender
+              で、そのパネルだけを先にマウントし、他のタブに 切り替えても保持する。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Text as="p" size="sm" tone="muted">
+                同じタブを押し直した回数: {reopened}
+              </Text>
+              <Tabs
+                id="antd-tab-click"
+                defaultValue="pending"
+                variant="line"
+                onTabClick={(value) => {
+                  if (value === activeTab) setReopened((count) => count + 1);
+                  setActiveTab(value);
+                }}
+                items={[
+                  {
+                    value: "pending",
+                    label: "未承認",
+                    content: <Text as="p">未承認の仕訳が 2 件あります。</Text>,
+                  },
+                  {
+                    value: "chart",
+                    label: "推移グラフ",
+                    // The one panel that must survive a tab switch — antd Tab.forceRender.
+                    forceRender: true,
+                    content: <Text as="p">月次推移: 4 月 ¥3,120,000 · 5 月 ¥4,820,000</Text>,
+                  },
+                  {
+                    value: "posted",
+                    label: "承認済",
+                    content: <Text as="p">当期承認済: 48 件</Text>,
+                  },
+                ]}
+              />
+              <Tabs
+                id="antd-remove-icon"
+                variant="editable-card"
+                defaultValue="je-0042"
+                closeIcon={<Trash2 aria-hidden="true" />}
+                onEdit={() => undefined}
+                items={[
+                  {
+                    value: "je-0042",
+                    label: "JE-0042",
+                    content: <Text as="p">売上計上 ¥480,000</Text>,
+                  },
+                  {
+                    value: "je-0043",
+                    label: "JE-0043",
+                    content: <Text as="p">仕入計上 ¥120,000</Text>,
+                  },
+                ]}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>tabPlacement · size · centered</CardTitle>

package/docs/roadmap/antd-parity.md

@@ -1,6 +1,6 @@
 # Ant Design parity — the audit programme
 
-> The complaint is systemic: *"hầu hết các component thiếu tính năng so với Ant Design."*
+> The complaint is systemic: _"hầu hết các component thiếu tính năng so với Ant Design."_
 > This document is the **method**, so that 127 catalog entries can be audited by different agents
 > and still produce comparable, reviewable results. Per-component specs live in sibling files.
 
@@ -29,7 +29,7 @@ is machine-checkable, so check it before you hand it to anyone.
 
 **Spacing is not free-form.** `docs/SPACING.md` is binding:
 
-- Macro layout uses a **φ modular scale (≈1.618)**, *not* the 8pt grid. `xs`/`sm` = 4px grid,
+- Macro layout uses a **φ modular scale (≈1.618)**, _not_ the 8pt grid. `xs`/`sm` = 4px grid,
   `md` = φ⁰, `lg` = φ¹, `xl` = φ². Applying Material's 8pt grid here is wrong, not "standard".
 - Tailwind `p-*` / `m-*` / `gap-*` are rejected by `no-utility-spacing`; hand-rolled `flex`/`grid`
   by `no-utility-layout`. Rows are `<Flex>`, stacks `<Flex direction="col" gap>`, grids
@@ -63,8 +63,8 @@ pnpm check:token-tiers && pnpm check:no-hardcoded-geometry && pnpm run audit
 ```
 
 This section exists because it was violated: a comparison table in
-`badge-tag-chip-count.md` wrote an antd `Badge` + `count` example to illustrate *Ant's* API and
-`check:doc-prop-existence` correctly read it as a claim about *ours*; and three specs named tokens
+`badge-tag-chip-count.md` wrote an antd `Badge` + `count` example to illustrate _Ant's_ API and
+`check:doc-prop-existence` correctly read it as a claim about _ours_; and three specs named tokens
 `--…-surface` / `--…-bg`, which the shape above forbids. Both were caught by gates that already
 existed and simply had not been run.
 
@@ -72,8 +72,8 @@ existed and simply had not been run.
 
 One row per antd capability. No prose findings.
 
-| Ant Design prop / behaviour | Status | Evidence | Verdict |
-| --- | --- | --- | --- |
+| Ant Design prop / behaviour | Status                                                                | Evidence                                     | Verdict                                                    |
+| --------------------------- | --------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------- |
 | `<prop>` — one-line meaning | `PRESENT` / `RENAMED` / `COVERED-ELSEWHERE` / `MISSING` / `WONT-PORT` | `src/…:line`, or the grep that found nothing | for `MISSING`: the godx prop name to add, or "composition" |
 
 - `RENAMED` — present under the house spelling. Record both names; no work.
@@ -88,12 +88,12 @@ but it is hand-rolled and a11y-risky), `P2` (nice to have).
 
 ### 3.1 Already specced — see the sibling documents
 
-| Area | Verdict | Spec |
-| --- | --- | --- |
-| `Tree` / `TreeList` / `TreeSelect` | `TreeSelect` fine; `TreeList` is not a tree; **`Tree` missing entirely** | `tree-components.md` |
-| Badge / Tag / Chip / Pill / Count | Count marker missing entirely; removable chip trapped inside `TagInput`; selectable chip already is `Toggle` | `badge-tag-chip-count.md` |
-| `List` (Ant `Listy`) / `Masonry` | Both missing entirely — no virtualization and no column packing anywhere in `src/` | `list-masonry.md` |
-| AI / chat surface | Nothing exists; 4 components + 6 compositions decided | `ai-chat-components.md` |
+| Area                               | Verdict                                                                                                      | Spec                      |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------- |
+| `Tree` / `TreeList` / `TreeSelect` | `TreeSelect` fine; `TreeList` is not a tree; **`Tree` missing entirely**                                     | `tree-components.md`      |
+| Badge / Tag / Chip / Pill / Count  | Count marker missing entirely; removable chip trapped inside `TagInput`; selectable chip already is `Toggle` | `badge-tag-chip-count.md` |
+| `List` (Ant `Listy`) / `Masonry`   | Both missing entirely — no virtualization and no column packing anywhere in `src/`                           | `list-masonry.md`         |
+| AI / chat surface                  | Nothing exists; 4 components + 6 compositions decided                                                        | `ai-chat-components.md`   |
 
 ### 3.2 `Tabs`, `Steps`, `Segmented` — audited 2026-09-10
 
@@ -106,14 +106,14 @@ Present: `items` (incl. `closable`/`closeIcon`/`icon`), `value`/`defaultValue`/`
 (= antd `tabBarExtraContent`), `destroyOnHidden`, `onEdit`, `addIcon`, `hideAdd`. Overflow already
 scrolls and keeps the active tab visible (`src/components/navigation/tabs-scroll.ts`).
 
-| Gap | Priority | Verdict |
-| --- | --- | --- |
-| `moreIcon` + an overflow **"more" dropdown** when the strip cannot scroll (narrow viewports) | **P1** | Add. Scrolling alone hides tabs from a touch user with no affordance. |
-| `indicator: { size, align }` | P2 | Add as tokens (`--tabs-indicator-*`), not props — it is a design knob (cardinal rule #44). |
-| `tabBarGutter` | P2 | Token, not a prop. |
-| `animated` | P2 | `WONT-PORT` as a prop — motion is a system decision and must follow `prefers-reduced-motion`. |
-| `renderTabBar` | P2 | `WONT-PORT` — an escape hatch that lets a consumer bypass the a11y contract. |
-| `size` lacks `xs` | P2 | Add `xs` for the full `xs\|sm\|md\|lg` tier. |
+| Gap                                                                                          | Priority | Verdict                                                                                       |
+| -------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
+| `moreIcon` + an overflow **"more" dropdown** when the strip cannot scroll (narrow viewports) | **P1**   | Add. Scrolling alone hides tabs from a touch user with no affordance.                         |
+| `indicator: { size, align }`                                                                 | P2       | Add as tokens (`--tabs-indicator-*`), not props — it is a design knob (cardinal rule #44).    |
+| `tabBarGutter`                                                                               | P2       | Token, not a prop.                                                                            |
+| `animated`                                                                                   | P2       | `WONT-PORT` as a prop — motion is a system decision and must follow `prefers-reduced-motion`. |
+| `renderTabBar`                                                                               | P2       | `WONT-PORT` — an escape hatch that lets a consumer bypass the a11y contract.                  |
+| `size` lacks `xs`                                                                            | P2       | Add `xs` for the full `xs\|sm\|md\|lg` tier.                                                  |
 
 **`Steps`** (`src/props/components/navigation.prop.ts:201-240`).
 Present: `items` (`title`/`subtitle`/`description`/`icon`/`status`/`disabled`),
@@ -121,23 +121,24 @@ Present: `items` (`title`/`subtitle`/`description`/`icon`/`status`/`disabled`),
 (`default`/`dot`/`inline`/`navigation` — `dot` **is** antd's deprecated `progressDot`), `percent`,
 `titlePlacement`, `separator`.
 
-| Gap | Priority | Verdict |
-| --- | --- | --- |
-| `initial` — start the visible numbering at N | P2 | Add. Trivial, and real for resumed wizards. |
-| `responsive` — auto-switch to vertical on a narrow container | **P1** | Add. Today a horizontal 5-step bar on a phone is the caller's problem. |
-| `size` is `md\|sm` only | P2 | Extend to `xs\|sm\|md\|lg`. |
+| Gap                                                          | Priority | Verdict                                                                |
+| ------------------------------------------------------------ | -------- | ---------------------------------------------------------------------- |
+| `initial` — start the visible numbering at N                 | P2       | Add. Trivial, and real for resumed wizards.                            |
+| `responsive` — auto-switch to vertical on a narrow container | **P1**   | Add. Today a horizontal 5-step bar on a phone is the caller's problem. |
+| `size` is `md\|sm` only                                      | P2       | Extend to `xs\|sm\|md\|lg`.                                            |
 
-**`Segmented`** (`src/components/ui/segmented.tsx`). Built on Radix `RadioGroup` — the correct APG
-choice, and the comment explaining why it is not a `ToggleGroup` should be preserved verbatim.
+**`Segmented`** (`src/components/ui/segmented.tsx`). Built on react-aria-components' `RadioGroup`
+(Radix's, when this was audited) — the correct APG choice either way, and the comment explaining why
+it is not a `ToggleGroup` should be preserved verbatim.
 Present: `options` (`value`/`label`/`icon`/`disabled`), `value`/`defaultValue`/`onValueChange`,
 `block`, `vertical`, `size`, `disabled`, `name`.
 
-| Gap | Priority | Verdict |
-| --- | --- | --- |
-| `shape: 'default' \| 'round'` | P2 | Add as `shape` — the existing `ShapeProp` vocabulary already has `pill`; reuse it rather than antd's `round`. |
-| Option as a bare `string \| number` | P2 | Add. Ant accepts it; it removes ceremony for the common case. |
-| Per-option `title` (a tooltip / hover hint) | P2 | `COVERED-ELSEWHERE` — wrap the option in `Tooltip`. Do not add a second tooltip API. |
-| `size` lacks `xs` | P2 | Add. |
+| Gap                                         | Priority | Verdict                                                                                                       |
+| ------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
+| `shape: 'default' \| 'round'`               | P2       | Add as `shape` — the existing `ShapeProp` vocabulary already has `pill`; reuse it rather than antd's `round`. |
+| Option as a bare `string \| number`         | P2       | Add. Ant accepts it; it removes ceremony for the common case.                                                 |
+| Per-option `title` (a tooltip / hover hint) | P2       | `COVERED-ELSEWHERE` — wrap the option in `Tooltip`. Do not add a second tooltip API.                          |
+| `size` lacks `xs`                           | P2       | Add.                                                                                                          |
 
 **None of these three is the source of the "doesn't look like Ant Design" impression** — that is
 `TreeList`, the missing count badge, and the missing `List`/`Masonry`/`Tree`.
@@ -146,7 +147,7 @@ Present: `options` (`value`/`label`/`icon`/`disabled`), `value`/`defaultValue`/`
 
 1. Read the group's catalog entries in `mcp/src/data/components.ts` and the prop types in
    `src/props/components/<group>.prop.ts`.
-2. Fetch the matching Ant Design docs page for each. Where a component's *identity* is unclear,
+2. Fetch the matching Ant Design docs page for each. Where a component's _identity_ is unclear,
    settle it at <https://namethatui.com/?platform=web> before writing anything.
 3. Produce the §2 ledger per component. Cite file:line.
 4. Publish a GATE-0 C1–C7 ledger for anything proposed as a **new** component.