@godxjp/ui 23.2.1 → 23.4.0

package/dist/tokens/components/welcome.css

@@ -0,0 +1,19 @@
+
+:root {
+
+  --welcome-gap: var(--space-4);
+
+  --welcome-content-gap: var(--space-1);
+
+  --welcome-title-gap: var(--space-3);
+
+  --welcome-padding-block: var(--space-4);
+  --welcome-padding-inline: var(--space-4);
+  --welcome-radius: var(--radius-lg);
+
+  --welcome-icon-size: var(--icon-size-xl);
+
+  --welcome-filled-background: initial;
+
+  --welcome-filled-border: initial;
+}

package/dist/tokens/foundation.css

@@ -108,9 +108,10 @@
     transparent 70%
   );
 
-  --focus-outline: 0;
+  --focus-outline: 1;
   --focus-outline-weight: var(--stroke-hairline);
   --focus-outline-color: var(--focus-ring-color, var(--ring));
+
   --control-outline-width: calc(var(--stroke-md) * var(--focus-outline));
   --focus-outline-offset: 0px;
 
@@ -125,7 +126,8 @@
   --focus-ring-glow-color: var(--control-outline);
   --focus-ring-glow-alpha: var(--control-outline-alpha);
 
-  --focus-field-shadow: none;
+  --focus-field-shadow: 0 0 0 var(--focus-ring-glow-width)
+    hsl(var(--focus-ring-glow-color) / var(--focus-ring-glow-alpha));
 
   --focus-ring-offset: var(--focus-outline-offset);
 
@@ -179,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;
 
@@ -255,7 +259,6 @@
   --activity-interval: var(--duration-loop);
 
   --activity-stagger-step: 160ms;
-
 }
 
 .ui-scale-fixed {
@@ -306,7 +309,6 @@
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);
   --field-label-gap: var(--space-2);
-
 }
 
 .dark,

package/docs/DESIGN-AUTHORITY.md

@@ -12,17 +12,17 @@ It changes no code by itself. It is the tie-breaker a reviewer points at.
 
 ## The layers, and who owns each
 
-| Layer                                                              | Authority                                     | Status in this repo                                                                                                               |
-| ------------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| Interaction semantics, keyboard, ARIA                              | **WAI-ARIA APG**                              | already followed — 33 references in `src/`                                                                                        |
-| Behaviour primitives                                               | **Radix**                                     | already the implementation — 193 references                                                                                       |
-| Component composition shape                                        | **shadcn**                                    | already the structural convention — 23 references                                                                                 |
-| Component taxonomy / grouping                                      | **Ant Design** groups                         | already the catalog shape: `data-entry`, `data-display`, `layout`, `feedback`, `navigation`, `general` — a naming precedent, nothing is installed |
-| Colour foundation                                                  | **SmartHR**                                   | already the palette source — `--primary` = SmartHR MAIN `#0071bd`, `--foreground` = TEXT_BLACK, `--border` = BORDER               |
-| **Derived colour — the interaction states hanging off each seed**    | **Measured contrast (WCAG 2.2 / JIS X 8341-3)** | Authored in `src/tokens/derived.css`; no algorithm derives them. Four contrast suites read that file and hold every value to a threshold — see below |
-| **Japanese UI convention — density, JP typography, form patterns** | **SmartHR**                                   | **NEW — this decision.** Extends SmartHR from "where the colours came from" to the authority for how a JP business screen behaves |
-| **Japanese accessibility / public-sector convention**              | **デジタル庁 Design System** (Digital Agency) | **NEW — this decision.** The reference when a JP customer asks which standard a screen meets (JIS X 8341-3)                       |
-| **Spacing, density, type scale, information architecture**         | **IBM Carbon**                                | **NEW — this decision**                                                                                                           |
+| Layer                                                              | Authority                                       | Status in this repo                                                                                                                                  |
+| ------------------------------------------------------------------ | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Interaction semantics, keyboard, ARIA                              | **WAI-ARIA APG**                                | already followed — 33 references in `src/`                                                                                                           |
+| Behaviour primitives                                               | **Radix**                                       | already the implementation — 193 references                                                                                                          |
+| Component composition shape                                        | **shadcn**                                      | already the structural convention — 23 references                                                                                                    |
+| Component taxonomy / grouping                                      | **Ant Design** groups                           | already the catalog shape: `data-entry`, `data-display`, `layout`, `feedback`, `navigation`, `general` — a naming precedent, nothing is installed    |
+| Colour foundation                                                  | **SmartHR**                                     | already the palette source — `--primary` = SmartHR MAIN `#0071bd`, `--foreground` = TEXT_BLACK, `--border` = BORDER                                  |
+| **Derived colour — the interaction states hanging off each seed**  | **Measured contrast (WCAG 2.2 / JIS X 8341-3)** | Authored in `src/tokens/derived.css`; no algorithm derives them. Four contrast suites read that file and hold every value to a threshold — see below |
+| **Japanese UI convention — density, JP typography, form patterns** | **SmartHR**                                     | **NEW — this decision.** Extends SmartHR from "where the colours came from" to the authority for how a JP business screen behaves                    |
+| **Japanese accessibility / public-sector convention**              | **デジタル庁 Design System** (Digital Agency)   | **NEW — this decision.** The reference when a JP customer asks which standard a screen meets (JIS X 8341-3)                                          |
+| **Spacing, density, type scale, information architecture**         | **IBM Carbon**                                  | **NEW — this decision**                                                                                                                              |
 
 The first five were already true and merely unwritten. The last three are the choices being made
 here. Carbon fills the one layer that had no outside answer at all: page rhythm, table density, form layout,
@@ -197,10 +197,34 @@ rows or a totals row — which is how a consumer ends up hand-rolling a `<tfoot>
 in page CSS.
 
 **The rule: where antd names a capability, this library takes antd's name and antd's semantics.**
-The gap is read out of the INSTALLED types (`antd/es/table/interface.d.ts`,
-`antd/es/table/InternalTable.d.ts` and the `@rc-component/table` interface they extend) — never
-from memory, because antd's own names move between majors (`fixed: 'left'` is deprecated in favour
-of `start` inside rc-table itself).
+
+> **Restated and widened by the repo owner on 2026-09-12, because the rule above was being read as
+> advice rather than as the standard it is: Ant Design IS the standard. A missing capability is
+> ported from antd 100% FIRST — its names, its props, its semantics — and improved afterwards.
+> Not redesigned first, and not half-ported.**
+>
+> Two things forced the restatement, both measured rather than felt:
+>
+> - `Dialog` + `AlertDialog` ship **26** exports with **12 name-for-name pairs and 0 parts unique
+>   to `AlertDialog`**, whose entire difference is `role="alertdialog"` plus `isDismissable={false}`
+>   — two props the shell already takes. antd has exactly one `Modal`, where danger is `okType`
+>   and `Modal.confirm()`. The shape here came from Radix, silently, against this very rule
+>   (gh#567). A package-wide sweep over all 272 public exports found this is the ONLY such pair:
+>   `Skeleton.Avatar/Button/Input/Image/Node` looks identical in shape but is antd's own naming,
+>   so it is compliance, not drift.
+> - Whole families arrived half-ported: Ant Design X without `Conversations`, `Attachments`,
+>   `ThoughtChain`, `Welcome` or `Actions` (gh#559); `FloatButton` never at all (gh#558);
+>   `Typography` reduced to `Text` + `Heading`, with `Paragraph`, `Link`, `copyable`, `editable`,
+>   `mark`, `keyboard` and `italic` simply absent.
+>
+> A deviation from antd is still allowed — the three below are — but it must be WRITTEN DOWN at
+> the point of deviation. An undocumented deviation is a bug, and gh#567 is what that bug costs:
+> a consumer forced to pick between the right ARIA role and a form it needs, and an accessibility
+> decision pushed onto the party least able to make it.
+> The gap is read out of the INSTALLED types (`antd/es/table/interface.d.ts`,
+> `antd/es/table/InternalTable.d.ts` and the `@rc-component/table` interface they extend) — never
+> from memory, because antd's own names move between majors (`fixed: 'left'` is deprecated in favour
+> of `start` inside rc-table itself).
 
 > Đọc sau 20.0.0: bản major ấy đã **gỡ `antd` khỏi devDependencies** cùng máy sinh màu của nó, và
 > `check:no-antd-runtime` canh cho nó không quay lại. Câu trên mô tả cách bề mặt prop này ĐƯỢC ĐỌC
@@ -224,6 +248,95 @@ of `start` inside rc-table itself).
 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`,
@@ -240,12 +353,12 @@ to trust them had to.
 **The authority is now the measurement, not the derivation.** Four suites read `derived.css`
 directly and hold every value in it to a threshold this repo has already committed to:
 
-| suite                                                   | what it holds                                                                                                                                                        |
-| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| suite                                                    | what it holds                                                                                                                                                          |
+| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `src/tokens/__tests__/focus-ring-contrast.test.ts`       | the focus mark in both switch positions — ≥3:1 (WCAG 2.2 SC 1.4.11) on every surface a control sits on, and the halo proven to be decoration rather than the indicator |
-| `src/tokens/__tests__/interactive-fill-contrast.test.ts` | an interactive fill must clear **4.5:1** against the label sitting on it                                                                                              |
-| `src/tokens/__tests__/destructive-contrast.test.ts`      | `--destructive-hover` / `--destructive-active` against the same bar                                                                                                  |
-| `src/lib/__tests__/theme-tokens-css.test.ts`             | the tier is actually loaded, and complete in both themes                                                                                                             |
+| `src/tokens/__tests__/interactive-fill-contrast.test.ts` | an interactive fill must clear **4.5:1** against the label sitting on it                                                                                               |
+| `src/tokens/__tests__/destructive-contrast.test.ts`      | `--destructive-hover` / `--destructive-active` against the same bar                                                                                                    |
+| `src/lib/__tests__/theme-tokens-css.test.ts`             | the tier is actually loaded, and complete in both themes                                                                                                               |
 
 The first three also pin each value as a literal, so an edit to `derived.css` alone turns CI red
 rather than quietly retinting the library. **That is a stronger claim than the generator made, not

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>
+  );
+}