@godxjp/ui 23.3.0 → 23.4.0

package/dist/tokens/foundation.css

@@ -181,6 +181,8 @@
   --heading-h3: var(--font-size-base);
   --heading-h4: var(--font-size-xs);
 
+  --heading-h5: var(--font-size-2xs);
+
   --font-weight-normal: 400;
   --font-weight-medium: 500;
 

package/docs/DESIGN-AUTHORITY.md

@@ -248,6 +248,95 @@ in page CSS.
 replace the rendered markup. This library answers that layer with tokens (cardinal rule #45), so
 those are deliberately NOT adopted — adopting them would re-open the hole the token tiers close.
 
+## One `Dialog`, not two families — and the rule a consumer picks by
+
+**Status:** accepted · 2026-09-12 · gh#567
+
+### The measurement that forced it
+
+On `dist/components/feedback/dialog.d.ts` at `23.2.0`, the feedback group published **26** things:
+**14** `Dialog*`, **12** `AlertDialog*`, **12 name-pairs**, **0** parts that only `AlertDialog`
+had, and 2 that only `Dialog` had (`DialogBody`, `DialogClose`). `AlertDialog` carried no part of
+its own; it was a full mirror minus two.
+
+The real difference was two internal props on one shared shell — `role` and `isDismissable` — and
+`AlertDialogRoot` is literally that shell with `role="alertdialog"` and `isDismissable={false}`.
+Twelve exports were the price of publishing one ARIA attribute.
+
+**A sweep of the whole public surface says this was the only place it happened.** Scanning the 270
+callable exports in `component-api-manifest.json` for a prefixed mirror of another export
+(`Alert*`, `Compact*`, `Simple*`, `Mini*`, `Basic*`, `Confirm*`, `Destructive*`) returns **11
+pairs, all 11 of them this one family**. There is no second drifted pair to find.
+
+### Why antd wins here
+
+antd has **one** `Modal`. Danger is a prop — `okType="danger"`, `okButtonProps`, with
+`Modal.confirm()` as the flat preset alongside `info/success/error/warning`. antd has no
+`AlertModal`. The split came from Radix, which ships `@radix-ui/react-dialog` and
+`@radix-ui/react-alert-dialog` as two packages — and this library no longer runs on Radix.
+react-aria-components has a single `Dialog` whose `role` is an ordinary prop, so the shape that
+made two families necessary is gone from the implementation as well as from the authority.
+
+### The decision
+
+`Dialog` takes **`variant`** (`"default" | "destructive"`), on the root or on `DialogContent`, and
+that one prop decides three things that always travel together in practice:
+
+| `variant`             | ARIA role     | outside click | primary action                                |
+| --------------------- | ------------- | ------------- | --------------------------------------------- |
+| `"default"` (default) | `dialog`      | dismisses     | default emphasis                              |
+| `"destructive"`       | `alertdialog` | ignored       | destructive emphasis (antd `okType="danger"`) |
+
+The 12 `AlertDialog*` exports **stay and keep working unchanged**. Deleting them is a breaking
+change and belongs in a major; nothing here retints or re-roles an existing tree, because the new
+prop defaults to `"default"` and no existing `AlertDialog*` call site passes it.
+
+### The rule for choosing — answer these in order
+
+1. **Is it dangerous or irreversible?** No → plain `Dialog`, no `variant`. Yes → keep going.
+2. **Does the flat preset cover it?** Title, description, confirm/cancel labels, an optional typed
+   challenge, an optional step-up re-auth, a pending state, and nothing else in the body → use the
+   `AlertDialog` **preset**. It is one element and it already forces the destructive tone.
+3. **Does the body need anything else** — a required reason field, a summary table, a diff, a
+   nested list? → `Dialog` with `variant="destructive"`. You get `role="alertdialog"` and the
+   non-dismissable scrim, plus `DialogBody` and `DialogClose`, which the `AlertDialog*` family
+   never had.
+4. **Are you writing new code with the `AlertDialog*` compound parts?** Don't. They are the legacy
+   spelling of step 3. Existing code stays valid.
+
+That third row is the reported case: a destructive confirmation with a **required free-text reason**
+that still has to be announced as an alert dialog. Before this, `Dialog` gave the form and lost the
+role, `AlertDialog` gave the role and forced the footer to be rebuilt, and either way it was a
+rewrite rather than a prop.
+
+### Four places this deliberately departs from the issue's proposal
+
+1. **The prop is `variant`, not `severity`.** antd has no name for a one-knob-three-effects switch,
+   so there is nothing to port verbatim. But the axis already exists here as `ConfirmVariantProp`
+   and the `AlertDialog` preset already spells it `variant` — and "this library's controlled
+   vocabulary wins on values" is the rule two sections up. `check:prop-vocabulary` maps a field
+   named `variant` to a `*VariantProp` type for exactly this reason.
+2. **Escape still closes a `destructive` dialog.** The issue wanted the prop to govern Escape too.
+   It does not, because Escape-closes-an-alertdialog is the behaviour the 12 existing exports have
+   today, with a test measuring it (`dialog-alert-primitives.test.tsx` · "closes on Escape and
+   restores focus"). Making the new prop disable Escape would make `variant="destructive"` differ
+   from `AlertDialogContent`, which is the one thing it must not do. antd agrees: `keyboard`
+   defaults to `true`. The prop governs the outside click; `maskClosable` is antd's name for that
+   same switch.
+3. **The corner ✕ defaults off under `destructive`.** It is a fourth effect, and it follows from
+   the second: a ✕ is an accidental-dismiss affordance like the scrim. It keeps
+   `DialogContent variant="destructive"` byte-identical to `AlertDialogContent`, and
+   `showCloseButton` still overrides it either way.
+4. **The header band tone is NOT forced.** `DialogHeader tone` is a separate published axis with
+   seven values; the preset is where a destructive tone is imposed on both the band and the button
+   at once. Forcing it from `variant` would put two props on the same pixel.
+
+### And the `Sheet` question in the same issue
+
+Asked, measured, no change. antd keeps `Drawer` and `Modal` as two components and splits them by
+**where the surface comes from**, not by danger — which is exactly the `Sheet` / `Dialog` boundary
+here. That pair never drifted from the authority, so there is nothing to merge.
+
 ## Derived colour is AUTHORED, and MEASUREMENT is what makes it authoritative
 
 **Twenty values, in `src/tokens/derived.css`:** `--primary-hover`, `--primary-active`,

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: **150**
-- With ≥1 frame: **134** · zero-frame: **16**
+- Public components: **152**
+- With ≥1 frame: **135** · zero-frame: **17**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -22,6 +22,7 @@
 - [ ] `SkeletonAvatar`
 - [ ] `SkeletonButton`
 - [ ] `SkeletonInput`
+- [ ] `SkeletonForm`
 - [ ] `SkeletonNode`
 - [ ] `SkeletonImage`
 - [ ] `ChatBubbleList`
@@ -57,6 +58,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | ErrorSurface | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | LegalDocumentShell | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Breadcrumb | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| FloatButton | ✓ | · | · | · | · | · | · | · | · | · |
 | Button | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | Text | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Heading | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
@@ -141,6 +143,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | SkeletonAvatar | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
 | SkeletonButton | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
 | SkeletonInput | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
+| SkeletonForm | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | SkeletonNode | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | SkeletonImage | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | Toggle | ✓ | ✓ | · | N/A | · | · | · | · | · | · |

package/docs/data-display/card/examples/tab-list.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  Descriptions,
+  type CardTabItemProp,
+} from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Card `tabList` — Ant Design's card-head tab strip.
+ *
+ * The strip lives INSIDE the card's head: under the title, on the same surface, inside the same
+ * border, so the card and its tabs read as one object. The card's children are the selected tab's
+ * body — here a `DataTable` in a `CardContent flush`, which is what lets the table reach the card
+ * edge instead of sitting in a second, narrower frame.
+ *
+ * What NOT to reach for instead: a `Tabs` parked on the page above a card (the strip floats off
+ * the card and the two read as two objects), or a `Card` repeated inside every tab (the same
+ * header and body shell copied once per view).
+ */
+const tabList: CardTabItemProp[] = [
+  { key: "members", tab: "メンバー" },
+  { key: "invitations", tab: "招待" },
+  { key: "settings", tab: "設定" },
+];
+
+const members = [
+  { id: "1", name: "佐藤 花子", email: "sato@example.co.jp", role: "管理者" },
+  { id: "2", name: "鈴木 一郎", email: "suzuki@example.co.jp", role: "編集者" },
+  { id: "3", name: "高橋 美咲", email: "takahashi@example.co.jp", role: "閲覧者" },
+];
+
+const invitations = [{ id: "4", name: "田中 健", email: "tanaka@example.co.jp", role: "編集者" }];
+
+export default function Demo() {
+  const [activeTabKey, setActiveTabKey] = useState("members");
+
+  return (
+    <PageContainer title="組織設定" subtitle="株式会社ベトヤ">
+      <Card
+        tabList={tabList}
+        activeTabKey={activeTabKey}
+        onTabChange={setActiveTabKey}
+        extra={<Button size="sm">メンバーを招待</Button>}
+      >
+        <CardHeader>
+          <CardTitle level={2}>チーム</CardTitle>
+        </CardHeader>
+
+        {activeTabKey === "settings" ? (
+          <CardContent>
+            <Descriptions>
+              <Descriptions.Item label="組織名">株式会社ベトヤ</Descriptions.Item>
+              <Descriptions.Item label="ドメイン">example.co.jp</Descriptions.Item>
+              <Descriptions.Item label="既定の権限">閲覧者</Descriptions.Item>
+            </Descriptions>
+          </CardContent>
+        ) : (
+          <CardContent flush>
+            <DataTable
+              data={activeTabKey === "members" ? members : invitations}
+              getRowId={(row) => row.id}
+              columns={[
+                { key: "name", header: "名前" },
+                { key: "email", header: "メール" },
+                {
+                  key: "role",
+                  header: "権限",
+                  render: (row) => <Badge tone="info">{row.role}</Badge>,
+                },
+              ]}
+            />
+          </CardContent>
+        )}
+
+        <CardFooter separated>
+          <Flex direction="row" justify="between" align="center" gap="sm">
+            <Text tone="muted" size="sm">
+              {activeTabKey === "invitations" ? "1件の保留中の招待" : "3名のメンバー"}
+            </Text>
+            <Button variant="outline" size="sm">
+              CSV で書き出す
+            </Button>
+          </Flex>
+        </CardFooter>
+      </Card>
+    </PageContainer>
+  );
+}

package/docs/data-display/thought-chain.tsx

@@ -0,0 +1,176 @@
+import { useState } from "react";
+
+import { ChatBubble, ThoughtChain, ThoughtChainItem } from "@godxjp/ui/data-display";
+import { Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Bot, MessageSquare, Search, Settings, Users } from "lucide-react";
+
+/**
+ * ThoughtChain — the assistant's reasoning, step by step (Ant Design X `ThoughtChain`).
+ *
+ * Each card is one axis at rest: the chain as it appears above an answer, the four statuses, the
+ * three connector strokes, and the standalone `ThoughtChainItem` chip in its three variants.
+ *
+ * The step that collapses is a real disclosure button, so this page is drivable from the keyboard
+ * alone; Ant X's own step is a `<div onClick>`.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "アシスタント",
+    items: [
+      { id: "chat", label: "チャット", icon: MessageSquare },
+      { id: "agents", label: "エージェント", icon: Bot },
+      { id: "members", label: "メンバー", icon: Users },
+    ],
+  },
+  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
+];
+
+export default function ThoughtChainDoc() {
+  const [open, setOpen] = useState<string[]>(["search"]);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chat"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={<Topbar />}
+    >
+      <PageContainer
+        title="思考の手順"
+        subtitle="ThoughtChain · 回答の前に何をしたのか。畳める手順は本物の開閉ボタン。"
+      >
+        {/* IN PLACE: above the answer it explains. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            in place · 回答の前
+          </Text>
+          <ThoughtChain
+            label="思考の手順"
+            expandedKeys={open}
+            onExpand={setOpen}
+            items={[
+              {
+                key: "read",
+                title: "添付の請求書を読む",
+                description: "3件",
+                status: "success",
+              },
+              {
+                key: "search",
+                title: "社内規程を検索",
+                description: "「支払期日」",
+                status: "success",
+                collapsible: true,
+                content: (
+                  <Text size="xs" tone="muted">
+                    第4章 支払 — 請求書の支払期日は受領月の翌月末日とする。
+                  </Text>
+                ),
+              },
+              {
+                key: "write",
+                title: "差分をまとめる",
+                status: "loading",
+                blink: true,
+              },
+            ]}
+          />
+          <ChatBubble placement="start" variant="filled">
+            差分は3件でした。金額、支払期日、宛名のうちどれから直しますか。
+          </ChatBubble>
+        </Flex>
+
+        {/* THE FOUR STATUSES. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            status · loading · success · error · abort
+          </Text>
+          <Text size="xs" tone="muted">
+            状態は字にもなる。読み上げでは各手順のあとに「完了」「失敗」などが続く。
+          </Text>
+          <ThoughtChain
+            label="状態の一覧"
+            items={[
+              { key: "a", title: "実行中の手順", status: "loading" },
+              { key: "b", title: "終わった手順", status: "success" },
+              { key: "c", title: "失敗した手順", status: "error" },
+              { key: "d", title: "中断した手順", status: "abort" },
+            ]}
+          />
+        </Flex>
+
+        {/* THE CONNECTOR. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            line · solid · dashed · none
+          </Text>
+          <ThoughtChain
+            label="実線"
+            line="solid"
+            items={[
+              { key: "a", title: "一歩目" },
+              { key: "b", title: "二歩目" },
+            ]}
+          />
+          <ThoughtChain
+            label="破線"
+            line="dashed"
+            items={[
+              { key: "a", title: "一歩目" },
+              { key: "b", title: "二歩目" },
+            ]}
+          />
+          <ThoughtChain
+            label="線なし"
+            line={false}
+            items={[
+              { key: "a", title: "一歩目" },
+              { key: "b", title: "二歩目" },
+            ]}
+          />
+        </Flex>
+
+        {/* THE STANDALONE CHIP. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            ThoughtChainItem · solid · outlined · text
+          </Text>
+          <Text size="xs" tone="muted">
+            押せる手順は本物のボタンとして描かれる。押せないものは div のまま。要素が実体に従う。
+          </Text>
+          <Flex gap="sm">
+            <ThoughtChainItem
+              variant="solid"
+              icon={<Search />}
+              title="社内規程を検索"
+              description="3件ヒット"
+              status="success"
+            />
+            <ThoughtChainItem variant="outlined" icon={<Search />} title="再検索" />
+            <ThoughtChainItem
+              variant="text"
+              icon={<Search />}
+              title="詳細を見る"
+              onClick={() => setOpen(["search"])}
+            />
+          </Flex>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}

package/docs/data-display/welcome.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+
+import { Welcome } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import {
+  AppShell,
+  Flex,
+  PageContainer,
+  Sidebar,
+  type SidebarSectionProp,
+  Topbar,
+} from "@godxjp/ui/layout";
+import { Bot, MessageSquare, Settings, Sparkles, Users } from "lucide-react";
+
+/**
+ * Welcome — the greeting block at the head of an empty conversation (Ant Design X `Welcome`).
+ *
+ * It is the first thing an assistant says, so every slot on this page is one Ant X slot at rest:
+ * the full block, the two variants, the block with no glyph, and the `icon`-as-URL rule that Ant
+ * ports from a string beginning with `http`.
+ *
+ * Composed only from real @godxjp/ui components.
+ */
+const sections: SidebarSectionProp[] = [
+  {
+    label: "アシスタント",
+    items: [
+      { id: "chat", label: "チャット", icon: MessageSquare },
+      { id: "agents", label: "エージェント", icon: Bot },
+      { id: "members", label: "メンバー", icon: Users },
+    ],
+  },
+  { label: "管理", items: [{ id: "settings", label: "設定", icon: Settings }] },
+];
+
+export default function WelcomeDoc() {
+  const [dismissed, setDismissed] = useState(false);
+
+  return (
+    <AppShell
+      sidebar={
+        <Sidebar
+          activeId="chat"
+          sections={sections}
+          onSelect={() => {}}
+          product={{ name: "CoreDesk", role: "アシスタント", color: "hsl(var(--primary))" }}
+        />
+      }
+      topbar={<Topbar />}
+    >
+      <PageContainer
+        title="あいさつ"
+        subtitle="Welcome · 会話がまだ一件もない画面の先頭に置く四つのスロット"
+      >
+        {/* THE WHOLE BLOCK. `extra` sits on the title row, which is the placement a hand-roll
+            usually gets wrong (it lands under the description instead). */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            icon · title · description · extra
+          </Text>
+          {dismissed ? (
+            <Text size="xs" tone="muted">
+              閉じました。
+            </Text>
+          ) : (
+            <Welcome
+              icon={<Sparkles />}
+              title="こんにちは、何からはじめますか"
+              description="請求、経費、勤怠のことならお手伝いできます。左の履歴から続きを開くこともできます。"
+              extra={
+                <Button variant="ghost" size="sm" onClick={() => setDismissed(true)}>
+                  閉じる
+                </Button>
+              }
+            />
+          )}
+        </Flex>
+
+        {/* THE TWO VARIANTS, side by side. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            variant · filled と borderless
+          </Text>
+          <Welcome
+            variant="filled"
+            icon={<Bot />}
+            title="filled"
+            description="自分の地色と髪の毛一本分の境界を持つ。カードの中に置いても沈まない。"
+          />
+          <Welcome
+            variant="borderless"
+            icon={<Bot />}
+            title="borderless"
+            description="ページの地の上にそのまま置く。上下に他の要素が続くときはこちら。"
+          />
+        </Flex>
+
+        {/* NO GLYPH, AND AN IMAGE GLYPH. */}
+        <Flex direction="col" gap="sm">
+          <Text size="sm" weight="medium">
+            icon · 省略と URL
+          </Text>
+          <Welcome
+            title="アイコンなし"
+            description="スロットを渡さなければ、その列自体が出ない。"
+          />
+          <Text size="xs" tone="muted">
+            http で始まる文字列は装飾画像として描かれる（Ant Design X と同じ規則、ただし alt
+            は空）。
+          </Text>
+        </Flex>
+      </PageContainer>
+    </AppShell>
+  );
+}