@godxjp/ui 23.0.0 → 23.2.0

package/docs/navigation/tabs.tsx

@@ -46,6 +46,56 @@ const journalItems = [
   },
 ];
 
+/**
+ * A 設定 screen shaped like the one gh#502 was filed from: a vertical strip beside a panel whose
+ * content does NOT collapse below about 200px (an action row of two buttons). That min-content is
+ * what starved the strip — measured at 393px before the fold, the strip was 8px wide with 0px of
+ * tab in it. `pnpm check:frame-geometry` sweeps this frame at 320/375/390 and fails on the inline
+ * overflow it produced; a demo whose panel holds one short paragraph proves nothing, because a
+ * paragraph's min-content is one character wide.
+ */
+const settingItems = [
+  {
+    value: "general",
+    label: "基本設定",
+    content: (
+      <Flex direction="col" gap="sm">
+        <Text as="p">表示名・タイムゾーン・言語。</Text>
+        <Flex gap="sm">
+          <Button variant="outline">変更を破棄</Button>
+          <Button>保存する</Button>
+        </Flex>
+      </Flex>
+    ),
+  },
+  {
+    value: "members",
+    label: "メンバー",
+    content: (
+      <Flex direction="col" gap="sm">
+        <Text as="p">招待済 8 名 · 管理者 2 名。</Text>
+        <Flex gap="sm">
+          <Button variant="outline">権限を見る</Button>
+          <Button>招待する</Button>
+        </Flex>
+      </Flex>
+    ),
+  },
+  {
+    value: "billing",
+    label: "請求",
+    content: (
+      <Flex direction="col" gap="sm">
+        <Text as="p">次回請求日 2026年10月1日。</Text>
+        <Flex gap="sm">
+          <Button variant="outline">履歴を見る</Button>
+          <Button>支払方法</Button>
+        </Flex>
+      </Flex>
+    ),
+  },
+];
+
 /**
  * 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;
@@ -553,6 +603,87 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tabPlacement=&quot;start&quot; · 狭い画面での折り返し</CardTitle>
+            <CardDescription>
+              縦のタブ列はパネルと同じインライン軸を共有するので、パネルの min-content
+              が画面の大半を占めると列が 0px
+              まで潰れ、開いているタブ以外へ行く手段が消える(gh#502)。
+              --tabs-placement-responsive-breakpoint-width(48rem)以下では start / end を top /
+              bottom へ折り返す。ロービングフォーカスの軸も一緒に切り替わる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              id="antd-start-narrow"
+              defaultValue="general"
+              variant="line"
+              tabPlacement="start"
+              items={settingItems}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>indicator · animated</CardTitle>
+            <CardDescription>
+              Ant Design の indicator
+              は下線バーの長さと寄せ方を決める。size=&quot;full&quot;(既定)はタブ全幅、size=&quot;label&quot;
+              はタブ自身の左右パディングを引いた分、つまりラベルの幅。align
+              はバーが短いときだけ効く。animated は inkBar(下線のクロスフェード・既定 ON)と
+              tabPane(パネルのフェードイン・既定 OFF)の二つのスイッチで、prefers-reduced-motion
+              では両方とも止まる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Tabs
+                id="antd-indicator-full"
+                defaultValue="pending"
+                variant="line"
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-indicator-label"
+                defaultValue="pending"
+                variant="line"
+                indicator={{ size: "label" }}
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-indicator-label-start"
+                defaultValue="pending"
+                variant="line"
+                indicator={{ size: "label", align: "start" }}
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-indicator-label-end"
+                defaultValue="pending"
+                variant="line"
+                indicator={{ size: "label", align: "end" }}
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-animated-off"
+                defaultValue="pending"
+                variant="line"
+                animated={false}
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-animated-pane"
+                defaultValue="pending"
+                variant="line"
+                animated={{ tabPane: true }}
+                items={journalItems}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/roadmap/ai-chat-components.md

@@ -4,7 +4,7 @@
 > **Naming:** when a component's identity is unclear, look it up at
 > <https://namethatui.com/?platform=web> before inventing a name.
 > **Contract:** `.claude/skills/godxjp-ui-component/SKILL.md` is the hard gate — MCP-first, real
-> primitives only, `t()` + `Intl`, WAI-ARIA APG + WCAG 2.2 AA + vitest-axe, logical CSS, controlled
+> primitives only, `t()` + `Intl`, WAI-ARIA APG + WCAG 2.2 AA, logical CSS, controlled
 > vocabulary, semantic tokens, MCP catalog entry, real-screen docs page.
 
 The library has **zero** chat/AI components today (verified against `mcp/src/data/components.ts` —
@@ -187,7 +187,6 @@ Every component in the build set ships **all** of:
    `check:token-tiers`; control boxes come from the `--control-height` tier.
 4. Keys in `src/i18n/messages/en.json`, `vi.json`, `ja.json` — all three, no exceptions.
 5. Tests in `src/components/<group>/__tests__/`: a behavior test using `@testing-library/user-event`
-   **and** a `<name>.a11y.test.tsx` with `expectNoA11yViolations` at **0 violations**.
 6. An `mcp/src/data/components.ts` entry (props / usage / useCases / related / example / rules) —
    `check:mcp-sync` and `check:mcp-orphans` must pass.
 7. A real-screen docs page under `docs/<group>/` (AppShell + PageContainer + real primitives), not

package/docs/roadmap/tree-components.md

@@ -100,7 +100,6 @@ Plus the house rules: forward `ref`, spread `...props`, accept `className` + `id
   (`margin-inline-start`, `padding-inline-start`), never `ml-`/`pl-`/`left-`.
 - Tri-state parent checkbox: checked / unchecked / **indeterminate** when only some descendants
   are checked (skip propagation entirely when `checkStrictly`).
-- Ships `tree.a11y.test.tsx` with `expectNoA11yViolations` — 0 violations.
 
 ## 5. Tokens (tier: `src/tokens/components/tree.css`, `@import`ed from `src/tokens/base.css`)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.0.0",
-  "godxUiMcp": "23.0.0",
+  "version": "23.2.0",
+  "godxUiMcp": "23.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -261,10 +261,6 @@
       "types": "./dist/components/data-entry/textarea.d.ts",
       "import": "./dist/components/data-entry/textarea.js"
     },
-    "./ui/time-input": {
-      "types": "./dist/components/data-entry/time-input.d.ts",
-      "import": "./dist/components/data-entry/time-input.js"
-    },
     "./ui/dialog": {
       "types": "./dist/components/feedback/dialog.d.ts",
       "import": "./dist/components/feedback/dialog.js"
@@ -326,29 +322,17 @@
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
     "check:voiceover-capture": "node scripts/check-voiceover-capture.mjs",
     "capture:voiceover": "node scripts/capture-voiceover-evidence.mjs",
-    "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
     "check:data-entry-owner-source": "node scripts/check-data-entry-owner-source.mjs",
     "check:data-entry-touch-aria": "node scripts/check-data-entry-touch-aria.mjs",
-    "check:layout-nav-frames": "node scripts/check-layout-nav-frames.mjs",
-    "check:provider-feedback-query-runtime": "for frames in navigation-app-setting-picker,feedback-dialog,feedback-sheet,feedback-alert-dialog feedback-tooltip,feedback-toast,feedback-skeleton,query-data-state query-infinite-query-state,query-mutation-feedback,query-prefetch-link; do FRAMES=$frames node scripts/check-provider-feedback-query-runtime.mjs || exit 1; done",
-    "check:layout-nav-closure": "for frames in layout-flex,layout-app-shell,layout-aspect-ratio,layout-auth-shell layout-page-container,layout-resizable-panel,layout-separator,layout-sidebar layout-split-pane,layout-topbar,navigation-breadcrumb,navigation-app-setting-picker navigation-dropdown-menu navigation-steps,navigation-toolbar,navigation-tabs,navigation-pagination; do FRAMES=$frames node scripts/check-layout-nav-closure.mjs || exit 1; done",
     "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
-    "check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
     "check:choice-hit-target": "node scripts/check-choice-hit-target.mjs",
-    "check:data-table-overflow": "node scripts/check-data-table-overflow.mjs",
     "check:app-shell-narrow-grid": "node scripts/check-app-shell-narrow-grid.mjs",
-    "check:segmented-wrap": "node scripts/check-segmented-wrap.mjs",
-    "check:tabs-overflow-menu": "node scripts/check-tabs-overflow-menu.mjs",
-    "check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
-    "check:timeline-title-fill": "node scripts/check-timeline-title-fill.mjs",
-    "check:descriptions-label-value-step": "node scripts/check-descriptions-label-value-step.mjs",
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
-    "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
-    "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:data-table-overflow && pnpm check:app-shell-narrow-grid && pnpm check:choice-hit-target && pnpm check:segmented-wrap && pnpm check:tabs-overflow-menu && pnpm check:button-icon-xs && pnpm check:timeline-title-fill && pnpm check:descriptions-label-value-step",
+    "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:choice-hit-target",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets",
     "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
@@ -359,6 +343,7 @@
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-catalog-coverage": "node scripts/check-mcp-catalog-coverage.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
+    "check:mcp-catalog-completeness": "node scripts/check-mcp-catalog-completeness.mjs",
     "check:catalog-contradictions": "node scripts/check-catalog-contradictions.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
     "check:doc-prop-existence": "node scripts/check-doc-prop-existence.mjs",
@@ -406,7 +391,13 @@
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs",
     "check:use-client": "node scripts/check-use-client.mjs",
-    "check:catalog-snippets": "node scripts/audit-catalog-snippets.mjs"
+    "check:catalog-snippets": "node scripts/audit-catalog-snippets.mjs",
+    "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
+    "check:data-table-empty-inset": "node scripts/check-data-table-empty-inset.mjs",
+    "check:number-input-step-target": "node scripts/check-number-input-step-target.mjs",
+    "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
+    "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
+    "check:focus-ring-paint": "node scripts/check-focus-ring-paint.mjs"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.0",

package/scripts/_agent-setup.mjs

@@ -372,6 +372,24 @@ export function ensureConsumerRules(root) {
   mkdirSync(dir, { recursive: true });
   writeFileSync(target, next);
 
+  // Prettier and this writer were fighting over the same file: the body holds aligned markdown
+  // tables, Prettier reformats them, the digest changes, the next install writes it back, and
+  // `format:check` goes red again — a loop with no winner, and the consumer is who is stuck in it
+  // (godx-jp/id#513). The file is OURS; say so to Prettier once, idempotently.
+  const ignoreFile = join(root, ".prettierignore");
+  if (existsSync(ignoreFile)) {
+    const cur = readFileSync(ignoreFile, "utf8");
+    const owned = [".ai/rules/godxjp-ui.md", ".claude/godxjp-ui-workflow.md"].filter(
+      (line) => !cur.includes(line),
+    );
+    if (owned.length) {
+      writeFileSync(
+        ignoreFile,
+        `${cur.replace(/\s*$/, "")}\n\n# Owned by @godxjp/ui — rewritten on every install, never hand-formatted.\n${owned.join("\n")}\n`,
+      );
+    }
+  }
+
   // Only touch the index when the repo keeps one; a missing index means the repo reads rule files
   // directly, and inventing one would change how it loads everything else.
   const index = join(dir, "index.md");

package/scripts/consumer-rule.md

@@ -9,6 +9,22 @@
 `docs/CONSUMER-RULES.md` (10 luật) và, với kho chuột bạch, ở
 `.claude/skills/godx-ui-guinea-pig/SKILL.md`.
 
+## Nạp style: HAI lối vào, và lối thứ hai không chở font
+
+```css
+@import "@godxjp/ui/styles";      /* mọi layer + Noto Sans JP / M PLUS 2 đóng gói sẵn */
+@import "@godxjp/ui/styles/core"; /* CÙNG các layer ấy, KHÔNG một @font-face nào */
+```
+
+Chọn `core` khi kho tự lo mặt chữ, hoặc khi không muốn chở font: `@fontsource` cắt
+Noto Sans JP thành hàng trăm lát `unicode-range`, và trình duyệt chỉ biết cần lát nào
+SAU khi đã dựng bố cục — một consumer đo được **737 lát / 13 MB**, gấp bảy lần toàn bộ
+JavaScript của họ, cộng ~8 vòng tải mỗi lần chuyển màn.
+
+`core` không phải cherry-pick: nó là một trong hai lối vào được hỗ trợ, và thứ tự layer
+vẫn nguyên vẹn. Cherry-pick từng layer riêng lẻ thì vẫn cấm — đó là thứ làm vỡ hợp đồng
+thứ tự, không phải việc chọn lối vào.
+
 ## Bố cục chuẩn của platform: BA CỘT, và ba cột là BA PHẠM VI
 
 Vỏ mặc định của mọi app trên platform là ba cột, dựng bằng một `AppShell`:

package/scripts/guinea-pig-skill.md

@@ -45,12 +45,17 @@ chúng. Không chép lại ở đây. Ba điều cấm riêng của **chuột b
    `w-[240px]`, `text-muted-foreground`.
 3. **Gõ mã màu hex hay số đo ngoài thang token.**
 
-Thước đo, chạy trước mọi lần review:
+Thước đo, chạy trước mọi lần review — **quét đúng thứ bạn vừa đụng vào**:
 
 ```bash
-node node_modules/@godxjp/ui/scripts/ui-audit.mjs resources/js   # 0 lỗi là mức đạt
+node node_modules/@godxjp/ui/scripts/ui-audit.mjs --changed   # 0 lỗi là mức đạt
 ```
 
+`--changed` lấy danh sách từ diff so với merge-base, nên nó thấy cả file sửa bằng
+shell — thứ hook `PostToolUse` không thấy. Quét cả `resources/js` chỉ khi việc được
+giao ĐÚNG là soát toàn bộ UI: trên một kho cũ, nó trả về hàng trăm phát hiện thuộc
+mã kế thừa và chôn mất cái bạn vừa tạo ra.
+
 Một lỗi bạn **không sửa được ở phía consumer** chính là một khoảng trống của DS.
 Nó là đầu vào của §3, không phải một ngoại lệ để nới.
 
@@ -116,10 +121,11 @@ tarball đường dẫn máy bạn lọt vào commit. `main` phải `npm ci` đ
 
 ### Bước 5 — Cổng của DS
 
-```bash
-# = verify:ci:static + check:frame-contracts + pnpm test, tức ĐÚNG những gì ci.yml chạy.
-cd ~/Herd/godxjp-ui && pnpm verify:ci
-```
+**KHÔNG chạy `pnpm verify:ci` / `pnpm test` của kho DS khi chưa được chủ dự án cho
+phép trong chính lượt trao đổi ấy.** Đó là bộ đầy đủ của một kho KHÁC — hàng nghìn
+test cộng các cổng trình duyệt, hàng chục phút máy mỗi lượt. Chạy đúng test bạn vừa
+viết cho thay đổi này, đẩy nhánh, rồi đọc cổng đỏ trên Actions: `ci.yml` chạy y hệt
+những thứ ấy trên PR. **Tới được bước này KHÔNG phải là được phép.**
 
 **Không nới, không tắt, không thêm ngoại lệ để lấy màu xanh.** Một cổng đỏ là
 một câu hỏi, không phải một chướng ngại. Nếu bạn tin cổng ấy sai thì nói ra và