@godxjp/ui 31.14.0 → 31.15.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.14.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.15.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2119 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2121 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1804 `component` entries are per-part knobs; reach for one only when a role is
+   1806 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1804 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1806 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/Timeline.json

@@ -1,11 +1,11 @@
 {
-  "example": "import { Timeline } from \"@godxjp/ui/data-display\";\n\n// Default icon variant\n<Timeline items={[\n  { title: \"注文受付\", time: \"2024-06-01 10:00\" },\n  { title: \"発送準備中\", time: \"2024-06-01 14:00\" },\n  { title: \"配送中\", current: true },\n]} />\n\n// Numbered route stepper (Pattern A)\n<Timeline variant=\"ordinal\" items={[\n  { title: \"集荷\", location: \"東京 → 名古屋\", status: \"pending\" },\n  { title: \"幹線輸送\", location: \"名古屋 → 大阪\", status: \"pending\" },\n]} />\n\n// Status tracker (Pattern B): done → check, current → dot, pending → number\n<Timeline variant=\"status\" items={[\n  { title: \"請求書を発行\", status: \"done\" },\n  { title: \"承認待ち\", status: \"current\" },\n  { title: \"消費税を計上\", status: \"pending\" },\n]} />",
+  "example": "import { Timeline } from \"@godxjp/ui/data-display\";\nimport { ArrowRightLeft, MessageSquare } from \"lucide-react\";\n\n// Default icon variant\n<Timeline items={[\n  { title: \"注文受付\", time: \"2024-06-01 10:00\" },\n  { title: \"発送準備中\", time: \"2024-06-01 14:00\" },\n  { title: \"配送中\", current: true },\n]} />\n\n// Numbered route stepper (Pattern A)\n<Timeline variant=\"ordinal\" items={[\n  { title: \"集荷\", location: \"東京 → 名古屋\", status: \"pending\" },\n  { title: \"幹線輸送\", location: \"名古屋 → 大阪\", status: \"pending\" },\n]} />\n\n// Activity log / issue history: neutral dots, no status prefix (gh#1092)\n<Timeline density=\"compact\" items={[\n  { title: \"Aki がステータスを変更 未対応 → 処理中\", time: \"10/01 08:12\", status: \"log\", icon: ArrowRightLeft },\n  { title: \"Ken がコメント\", time: \"10/01 09:30\", status: \"log\", icon: MessageSquare },\n]} />\n\n// Status tracker (Pattern B): done → check, current → dot, pending → number\n<Timeline variant=\"status\" items={[\n  { title: \"請求書を発行\", status: \"done\" },\n  { title: \"承認待ち\", status: \"current\" },\n  { title: \"消費税を計上\", status: \"pending\" },\n]} />",
   "group": "data-display",
   "importPath": "@godxjp/ui/data-display",
   "name": "Timeline",
   "props": [
     {
-      "description": "Array of `{ title, location?, time?, note?, current?, status?, icon? }`. `status` is the explicit 3-state ('done' | 'current' | 'pending'); `current: true` is shorthand for `status: 'current'`. `icon` (a LucideIcon) overrides the auto-glyph for that item.",
+      "description": "Array of `{ title, location?, time?, note?, current?, status?, icon? }`. `status` is 'done' | 'current' | 'pending' | 'log'; `current: true` is shorthand for `status: 'current'`. 'log' (gh#1092) is an activity-log / history row: the neutral dot + hairline rail `pending` draws, and NO sr-only status prefix (antd's `color=\"gray\"` item). `icon` (a LucideIcon) overrides the auto-glyph for that item.",
       "name": "items",
       "required": true,
       "type": "TimelineItem[]"
@@ -29,7 +29,7 @@
   ],
   "rules": [],
   "storyPath": "data-display/Timeline.stories.tsx",
-  "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a 3-state `status` (done/current/pending) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`.",
+  "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a `status` (done/current/pending, or `log` for an activity-log entry with no status semantics) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`.",
   "usage": [
     "DO pass an array of `TimelineItem` objects to `items`. Each item is `{ title, location?, time?, note?, current?, status?, icon? }`. All fields except `title` are optional. The only other props are `variant` and `density`.",
     "DO mark the in-progress event with `current: true` (or `status: 'current'`). In the default `variant='icon'`, the current item renders a `Plane` icon and every other item a `CheckCircle2`. Use `variant='ordinal'` for a numbered route stepper (1,2,3…) or `variant='status'` for a done→check / current→dot / pending→number tracker. Pass `status: 'done' | 'current' | 'pending'` per item to drive colour and (in the status variant) the glyph; pass `icon` (a LucideIcon) to override the glyph for a single item.",
@@ -39,6 +39,7 @@
     "DO NOT use Timeline for user-facing wizard progress (steps the user must complete in order) — use `Steps` for that. Timeline is read-only historical/status display; it has no interactive state, no `onClick`, and no concept of 'go to step'.",
     "DO wrap Timeline in `<CardContent>` when placing it inside a `Card` — bare `Card` has no inner padding, so the rail will render flush against the card edge without `CardContent`.",
     "THE PROGRESS COLUMN IS ONE HUE (gh#731). The done dot, the current dot and the travelled line all default to `hsl(var(--primary))` — the same contract `Steps` uses for `finish` + `process`, and antd's (only `error` leaves the primary hue). The current item is told apart by a ring (`--timeline-dot-current-ring-width`, `--steps-dot-process-ring-width`'s value), by `aria-current=\"step\"` + a localized sr-only prefix, and by a different glyph — never by a second colour role. Re-theme `--primary` and the whole rail follows. Measured light: done 2.18:1 → 6.31:1 against the card, glyph 6.31:1 on the fill; dark 7.22:1 → 9.84:1, glyph 10.72:1.",
+    "DO use `status: 'log'` for every row of an activity log / issue history / audit trail (gh#1092). Those rows already HAPPENED and are not steps: `done` paints them primary and prefixes 「Completed:」, `pending` reads 「Upcoming:」 to a screen reader. `log` draws the quiet neutral dot (a plain pip, or the item's `icon`) and hairline rail, with no prefix — antd's gray item.",
     "DON'T expect `--success` on a `status: 'done'` item — `done | current | pending` is POSITION IN A SEQUENCE, not status, and Timeline has no `tone` axis. Put a real status on the item's `title` or `note` with a `<Badge tone=\"success\">`, which is the surface that owns the status green.",
     "TO RESTORE the pre-27.9 green/violet pairing, set the done dot's fill AND its ink together in your theme (global or `[data-tenant]`) — the two roles have opposite ink polarity, so the fill alone leaves a near-white glyph on 若竹 green at 2.18:1 (gh#643): `--timeline-dot-done-background: hsl(var(--success)); --timeline-dot-done-foreground: hsl(var(--success-foreground));`. `--timeline-dot-current-background` and `--timeline-line-completed-background` retint the other two surfaces the same way."
   ],

package/agent/components/Tree.json

@@ -90,6 +90,27 @@
       "name": "loadData",
       "type": "(node: TreeNodeProp) => void | Promise<void>"
     },
+    {
+      "defaultValue": "false",
+      "description": "Move nodes by dragging (antd `draggable`, gh#1093). Dropping on a row's upper / lower quarter lands in the gap before / after it, the middle files it inside. The tree never edits `treeData` — it reports the move via `onDrop` and you persist it. Keyboard equivalent (WCAG 2.5.7): Alt+↑ / Alt+↓ move past the previous / next sibling, Alt+← outdents (after the parent), Alt+→ indents (into the previous sibling, as its last child); every move is announced in a live region and described on the tree. A node never drops into itself or its own subtree.",
+      "name": "draggable",
+      "type": "boolean"
+    },
+    {
+      "description": "Per-node drag gate (antd `draggable.nodeDraggable`). Disabled nodes never drag.",
+      "name": "allowDrag",
+      "type": "(node: TreeNodeProp) => boolean"
+    },
+    {
+      "description": "Per-target drop gate (antd `allowDrop`), asked for pointer AND keyboard moves. Use it for your own rules (max depth, no leaf parents); the self/subtree cycle is already refused.",
+      "name": "allowDrop",
+      "type": "(info: { dragNode: TreeNodeProp; dropNode: TreeNodeProp; dropPosition: -1 | 0 | 1 }) => boolean"
+    },
+    {
+      "description": "A committed move (antd `onDrop`). `dropPosition` is RELATIVE to `node` — -1 before, 0 inside, 1 after (antd reports an absolute index that every antd demo converts back to this). `dropToGap` is true for before/after (sibling of `node`), false for inside (child of `node`). Update `treeData` here.",
+      "name": "onDrop",
+      "type": "(info: { dragNode: TreeNodeProp; node: TreeNodeProp; dropPosition: -1 | 0 | 1; dropToGap: boolean }) => void"
+    },
     {
       "description": "Render a node's title yourself (antd `titleRender`).",
       "name": "titleRender",
@@ -179,7 +200,7 @@
     45
   ],
   "storyPath": "data-display/Tree.stories.tsx",
-  "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes and async `loadData`. Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover.",
+  "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes, async `loadData` and `draggable` reorder/reparent (antd `onDrop`). Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover.",
   "usage": [
     "DO name the tree — pass `aria-label` (through your own `t()`) or `aria-labelledby`. A tree with no name is an unlabelled landmark for every screen reader user.",
     "DO keep SELECTION and CHECKS apart: `value`/`onValueChange` is which node is open in the detail pane; `checkedValues`/`onCheckedValuesChange` is which nodes are ticked. They are two axes, exactly as in antd — never drive one from the other.",

package/agent/components-index.json

@@ -304,7 +304,7 @@
   {
     "group": "data-display",
     "name": "Timeline",
-    "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a 3-state `status` (done/current/pending) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`."
+    "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a `status` (done/current/pending, or `log` for an activity-log entry with no status semantics) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`."
   },
   {
     "group": "data-display",
@@ -585,7 +585,7 @@
   {
     "group": "data-display",
     "name": "Tree",
-    "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes and async `loadData`. Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover."
+    "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes, async `loadData` and `draggable` reorder/reparent (antd `onDrop`). Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover."
   },
   {
     "group": "feedback",

package/agent/components.json

@@ -4959,13 +4959,13 @@
     ]
   },
   {
-    "example": "import { Timeline } from \"@godxjp/ui/data-display\";\n\n// Default icon variant\n<Timeline items={[\n  { title: \"注文受付\", time: \"2024-06-01 10:00\" },\n  { title: \"発送準備中\", time: \"2024-06-01 14:00\" },\n  { title: \"配送中\", current: true },\n]} />\n\n// Numbered route stepper (Pattern A)\n<Timeline variant=\"ordinal\" items={[\n  { title: \"集荷\", location: \"東京 → 名古屋\", status: \"pending\" },\n  { title: \"幹線輸送\", location: \"名古屋 → 大阪\", status: \"pending\" },\n]} />\n\n// Status tracker (Pattern B): done → check, current → dot, pending → number\n<Timeline variant=\"status\" items={[\n  { title: \"請求書を発行\", status: \"done\" },\n  { title: \"承認待ち\", status: \"current\" },\n  { title: \"消費税を計上\", status: \"pending\" },\n]} />",
+    "example": "import { Timeline } from \"@godxjp/ui/data-display\";\nimport { ArrowRightLeft, MessageSquare } from \"lucide-react\";\n\n// Default icon variant\n<Timeline items={[\n  { title: \"注文受付\", time: \"2024-06-01 10:00\" },\n  { title: \"発送準備中\", time: \"2024-06-01 14:00\" },\n  { title: \"配送中\", current: true },\n]} />\n\n// Numbered route stepper (Pattern A)\n<Timeline variant=\"ordinal\" items={[\n  { title: \"集荷\", location: \"東京 → 名古屋\", status: \"pending\" },\n  { title: \"幹線輸送\", location: \"名古屋 → 大阪\", status: \"pending\" },\n]} />\n\n// Activity log / issue history: neutral dots, no status prefix (gh#1092)\n<Timeline density=\"compact\" items={[\n  { title: \"Aki がステータスを変更 未対応 → 処理中\", time: \"10/01 08:12\", status: \"log\", icon: ArrowRightLeft },\n  { title: \"Ken がコメント\", time: \"10/01 09:30\", status: \"log\", icon: MessageSquare },\n]} />\n\n// Status tracker (Pattern B): done → check, current → dot, pending → number\n<Timeline variant=\"status\" items={[\n  { title: \"請求書を発行\", status: \"done\" },\n  { title: \"承認待ち\", status: \"current\" },\n  { title: \"消費税を計上\", status: \"pending\" },\n]} />",
     "group": "data-display",
     "importPath": "@godxjp/ui/data-display",
     "name": "Timeline",
     "props": [
       {
-        "description": "Array of `{ title, location?, time?, note?, current?, status?, icon? }`. `status` is the explicit 3-state ('done' | 'current' | 'pending'); `current: true` is shorthand for `status: 'current'`. `icon` (a LucideIcon) overrides the auto-glyph for that item.",
+        "description": "Array of `{ title, location?, time?, note?, current?, status?, icon? }`. `status` is 'done' | 'current' | 'pending' | 'log'; `current: true` is shorthand for `status: 'current'`. 'log' (gh#1092) is an activity-log / history row: the neutral dot + hairline rail `pending` draws, and NO sr-only status prefix (antd's `color=\"gray\"` item). `icon` (a LucideIcon) overrides the auto-glyph for that item.",
         "name": "items",
         "required": true,
         "type": "TimelineItem[]"
@@ -4989,7 +4989,7 @@
     ],
     "rules": [],
     "storyPath": "data-display/Timeline.stories.tsx",
-    "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a 3-state `status` (done/current/pending) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`.",
+    "tagline": "Vertical event list with an icon rail. Current item gets a highlighted glyph. `variant` switches the rail to numbered (ordinal) or status-driven glyphs, and each item carries a `status` (done/current/pending, or `log` for an activity-log entry with no status semantics) plus an optional per-item `icon`. The whole progress column is ONE hue: done dot, current dot and travelled line all paint `--primary`, exactly as `Steps` paints `finish` and `process`.",
     "usage": [
       "DO pass an array of `TimelineItem` objects to `items`. Each item is `{ title, location?, time?, note?, current?, status?, icon? }`. All fields except `title` are optional. The only other props are `variant` and `density`.",
       "DO mark the in-progress event with `current: true` (or `status: 'current'`). In the default `variant='icon'`, the current item renders a `Plane` icon and every other item a `CheckCircle2`. Use `variant='ordinal'` for a numbered route stepper (1,2,3…) or `variant='status'` for a done→check / current→dot / pending→number tracker. Pass `status: 'done' | 'current' | 'pending'` per item to drive colour and (in the status variant) the glyph; pass `icon` (a LucideIcon) to override the glyph for a single item.",
@@ -4999,6 +4999,7 @@
       "DO NOT use Timeline for user-facing wizard progress (steps the user must complete in order) — use `Steps` for that. Timeline is read-only historical/status display; it has no interactive state, no `onClick`, and no concept of 'go to step'.",
       "DO wrap Timeline in `<CardContent>` when placing it inside a `Card` — bare `Card` has no inner padding, so the rail will render flush against the card edge without `CardContent`.",
       "THE PROGRESS COLUMN IS ONE HUE (gh#731). The done dot, the current dot and the travelled line all default to `hsl(var(--primary))` — the same contract `Steps` uses for `finish` + `process`, and antd's (only `error` leaves the primary hue). The current item is told apart by a ring (`--timeline-dot-current-ring-width`, `--steps-dot-process-ring-width`'s value), by `aria-current=\"step\"` + a localized sr-only prefix, and by a different glyph — never by a second colour role. Re-theme `--primary` and the whole rail follows. Measured light: done 2.18:1 → 6.31:1 against the card, glyph 6.31:1 on the fill; dark 7.22:1 → 9.84:1, glyph 10.72:1.",
+      "DO use `status: 'log'` for every row of an activity log / issue history / audit trail (gh#1092). Those rows already HAPPENED and are not steps: `done` paints them primary and prefixes 「Completed:」, `pending` reads 「Upcoming:」 to a screen reader. `log` draws the quiet neutral dot (a plain pip, or the item's `icon`) and hairline rail, with no prefix — antd's gray item.",
       "DON'T expect `--success` on a `status: 'done'` item — `done | current | pending` is POSITION IN A SEQUENCE, not status, and Timeline has no `tone` axis. Put a real status on the item's `title` or `note` with a `<Badge tone=\"success\">`, which is the surface that owns the status green.",
       "TO RESTORE the pre-27.9 green/violet pairing, set the done dot's fill AND its ink together in your theme (global or `[data-tenant]`) — the two roles have opposite ink polarity, so the fill alone leaves a near-white glyph on 若竹 green at 2.18:1 (gh#643): `--timeline-dot-done-background: hsl(var(--success)); --timeline-dot-done-foreground: hsl(var(--success-foreground));`. `--timeline-dot-current-background` and `--timeline-line-completed-background` retint the other two surfaces the same way."
     ],
@@ -11130,6 +11131,27 @@
         "name": "loadData",
         "type": "(node: TreeNodeProp) => void | Promise<void>"
       },
+      {
+        "defaultValue": "false",
+        "description": "Move nodes by dragging (antd `draggable`, gh#1093). Dropping on a row's upper / lower quarter lands in the gap before / after it, the middle files it inside. The tree never edits `treeData` — it reports the move via `onDrop` and you persist it. Keyboard equivalent (WCAG 2.5.7): Alt+↑ / Alt+↓ move past the previous / next sibling, Alt+← outdents (after the parent), Alt+→ indents (into the previous sibling, as its last child); every move is announced in a live region and described on the tree. A node never drops into itself or its own subtree.",
+        "name": "draggable",
+        "type": "boolean"
+      },
+      {
+        "description": "Per-node drag gate (antd `draggable.nodeDraggable`). Disabled nodes never drag.",
+        "name": "allowDrag",
+        "type": "(node: TreeNodeProp) => boolean"
+      },
+      {
+        "description": "Per-target drop gate (antd `allowDrop`), asked for pointer AND keyboard moves. Use it for your own rules (max depth, no leaf parents); the self/subtree cycle is already refused.",
+        "name": "allowDrop",
+        "type": "(info: { dragNode: TreeNodeProp; dropNode: TreeNodeProp; dropPosition: -1 | 0 | 1 }) => boolean"
+      },
+      {
+        "description": "A committed move (antd `onDrop`). `dropPosition` is RELATIVE to `node` — -1 before, 0 inside, 1 after (antd reports an absolute index that every antd demo converts back to this). `dropToGap` is true for before/after (sibling of `node`), false for inside (child of `node`). Update `treeData` here.",
+        "name": "onDrop",
+        "type": "(info: { dragNode: TreeNodeProp; node: TreeNodeProp; dropPosition: -1 | 0 | 1; dropToGap: boolean }) => void"
+      },
       {
         "description": "Render a node's title yourself (antd `titleRender`).",
         "name": "titleRender",
@@ -11219,7 +11241,7 @@
       45
     ],
     "storyPath": "data-display/Tree.stories.tsx",
-    "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes and async `loadData`. Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover.",
+    "tagline": "The standalone WAI-ARIA tree view on a page (antd `Tree` / `DirectoryTree`) — nested `treeData`, a disclosure triangle per branch, roving-tabindex arrow navigation, optional tri-state checkboxes, async `loadData` and `draggable` reorder/reparent (antd `onDrop`). Reach for it whenever nodes expand, collapse or are navigated by keyboard; TreeSelect is the same hierarchy inside a Popover.",
     "usage": [
       "DO name the tree — pass `aria-label` (through your own `t()`) or `aria-labelledby`. A tree with no name is an unlabelled landmark for every screen reader user.",
       "DO keep SELECTION and CHECKS apart: `value`/`onValueChange` is which node is open in the detail pane; `checkedValues`/`onCheckedValuesChange` is which nodes are ticked. They are two axes, exactly as in antd — never drive one from the other.",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 178,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2119,
+    "tokens": 2121,
     "vocabulary": 14
   },
   "files": [
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.14.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.15.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1804,
+      "component": 1806,
       "foundation": 211,
       "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.14.0"
+  "version": "31.15.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 178 components, 2119 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.14.0.
+> A Japanese-enterprise React design system: 178 components, 2121 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.15.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.14.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.15.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -18,7 +18,7 @@ that can only fetch URLs.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 48 KB — all 178 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/<Name>.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1804 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1806 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.14.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.15.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -12317,6 +12317,18 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Drop indicator of a `draggable` tree (gh#1093): the gap line / inside frame. A role mirror, so `initial` with the role at the call site. Documented defaults: --tree-drop-indicator-color = hsl(var(--primary)); --tree-drop-indicator-width = var(--stroke-md).",
+    "name": "--tree-drop-indicator-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "TREE — the standalone, on-page WAI-ARIA \"Tree View\" (`src/components/data-display/tree.tsx`). Every value the tree paints is a knob (cardinal rule #45), and the defaults are the QUIETEST reading (#44): no rails, a muted disclosure glyph, a selected band that tints rather than inverts. A service retunes the whole outline in one place instead of forking a row. ROLE-MIRROR KNOBS ARE `initial`, WITH THE DEFAULT AT THE CALL SITE. A knob whose default is a role token or a RE-SCOPED tier may not be bound at `:root` — CSS substitutes the `var()` where it is DECLARED, so the value would freeze at `:root` and a scoped `[data-tenant]` / `.dark` / a shell that re-scopes `--control-height` would never reach it. @see docs/TOKENS.md · \"Role-mirror knobs MUST be `initial`\".",
+    "name": "--tree-drop-indicator-width",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Width of the indeterminate bar shown while `loadData` resolves a branch. A fraction, not a length: it has to read as \"part of a row\" at every row width and every density.",
     "name": "--tree-loading-bar-inline-size",

package/dist/components/data-display/index.d.ts

@@ -52,7 +52,7 @@ export type { RangeTimelineProps, RangeTimelineRow } from "./range-timeline.js";
 export { ChatBubble, ChatBubbleList } from "./chat-bubble.js";
 export type { ChatBubbleListProp, ChatBubbleListProps, ChatBubblePlacementProp, ChatBubbleProp, ChatBubbleProps, ChatBubbleToneProp, ChatBubbleTypingProp, ChatBubbleVariantProp, ChatMessageProp, } from "./chat-bubble.js";
 export { Tree } from "./tree.js";
-export type { TreeNodeProp, TreeProp, TreeProps } from "./tree.js";
+export type { TreeAllowDropInfoProp, TreeDropInfoProp, TreeDropPositionProp, TreeNodeProp, TreeProp, TreeProps, } from "./tree.js";
 export { OrgChart } from "./org-chart.js";
 export type { OrgChartNodeProp, OrgChartNodeVariantProp, OrgChartProp, OrgChartProps, } from "./org-chart.js";
 export { Welcome } from "./welcome.js";

package/dist/components/data-display/timeline.d.ts

@@ -1,6 +1,13 @@
 import type { ReactNode } from "react";
 import { type LucideIcon } from "lucide-react";
-export type TimelineStatus = "done" | "current" | "pending";
+/**
+ * `done` / `current` / `pending` are a PROCESS: steps behind, the one you are on, steps ahead.
+ * `log` is not a step at all — it is an entry in an activity log or history (antd's
+ * `<Timeline.Item color="gray">`, GitHub's conversation rail): a neutral dot, a hairline rail and
+ * NO screen-reader status prefix, because a thing that merely happened is neither "completed" nor
+ * "upcoming" (gh#1092).
+ */
+export type TimelineStatus = "done" | "current" | "pending" | "log";
 export type TimelineVariant = "icon" | "ordinal" | "status";
 /**
  * A Timeline-local subset of the density vocabulary — it has no `comfortable` step, the same shape
@@ -14,7 +21,10 @@ export type TimelineItem = {
     note?: ReactNode;
     /** Shorthand for `status: "current"`. `status` wins when both are set. */
     current?: boolean;
-    /** Explicit 3-state. Resolves as `status ?? */
+    /**
+     * Explicit status. Resolves as `status ?? (current ? "current" : "done")`. Use `log` for an
+     * activity-log / history row: neutral look, no "Completed:"/"Upcoming:" prefix.
+     */
     status?: TimelineStatus;
     /** Per-item glyph override; wins over the variant/status auto-glyph. */
     icon?: LucideIcon;

package/dist/components/data-display/timeline.js

@@ -5,7 +5,9 @@ import { Check, CheckCircle2, Plane } from "lucide-react";
 const SR_PREFIX_KEY = {
   done: "dataDisplay.timeline.statusDone",
   current: "dataDisplay.timeline.statusCurrent",
-  pending: "dataDisplay.timeline.statusPending"
+  pending: "dataDisplay.timeline.statusPending",
+  // A log entry carries no status semantics (antd's items have no prefix at all), gh#1092.
+  log: null
 };
 function resolveStatus(item) {
   if (item.status) {
@@ -27,6 +29,8 @@ function Timeline({ items, variant = "icon", density = "default" }) {
     if (item.icon) {
       const Icon = item.icon;
       glyph = /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" });
+    } else if (status === "log" && variant !== "ordinal") {
+      glyph = /* @__PURE__ */ jsx("span", { className: "ui-timeline-pip", "aria-hidden": "true" });
     } else if (variant === "ordinal") {
       glyph = /* @__PURE__ */ jsx("span", { className: "ui-timeline-ordinal", children: ordinal });
     } else if (variant === "status") {
@@ -69,7 +73,7 @@ function Timeline({ items, variant = "icon", density = "default" }) {
           /* @__PURE__ */ jsxs("div", { className: "ui-timeline-body", children: [
             /* @__PURE__ */ jsxs("div", { className: "ui-timeline-head", children: [
               /* @__PURE__ */ jsxs("span", { className: "ui-timeline-title", "data-current": isCurrent ? "true" : void 0, children: [
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(SR_PREFIX_KEY[status]) }),
+                SR_PREFIX_KEY[status] ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(SR_PREFIX_KEY[status]) }) : null,
                 item.title
               ] }),
               item.time ? /* @__PURE__ */ jsx("span", { className: "ui-timeline-time", children: item.time }) : null

package/dist/components/data-display/tree.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { TreeProp } from "../../props/components/data-display.prop.js";
-export type { TreeNodeProp, TreeProp, TreeProp as TreeProps, } from "../../props/components/data-display.prop.js";
+export type { TreeAllowDropInfoProp, TreeDropInfoProp, TreeDropPositionProp, TreeNodeProp, TreeProp, TreeProp as TreeProps, } from "../../props/components/data-display.prop.js";
 /**
  * `ref` reaches the `role="tree"` container — the element a page scrolls to, measures, or
  * focus-manages. Every unknown prop (`aria-*`, `data-*`) rides `...ariaProps` onto the same node.

package/dist/components/data-display/tree.js

@@ -71,6 +71,10 @@ function TreeRoot({
   showLine = false,
   showIcon = false,
   divided = false,
+  draggable = false,
+  allowDrag,
+  allowDrop,
+  onDrop,
   variant = "default",
   size = "md",
   disabled = false,
@@ -82,6 +86,7 @@ function TreeRoot({
   const { t } = useTranslation();
   const reactId = React.useId();
   const treeId = id ?? `${reactId}-tree`;
+  const dragHintId = `${treeId}-drag-hint`;
   const options = React.useMemo(
     () => normalizeTreeOptions(treeData, fieldNames),
     [treeData, fieldNames]
@@ -166,6 +171,92 @@ function TreeRoot({
       if (node) requestLoadRef.current(node);
     }
   }, [expandedSet, loadData, nodesByValue, requestLoadRef]);
+  const parentOf = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const walk = (list, parent) => {
+      for (const node of list) {
+        map.set(node.value, parent);
+        if (node.children?.length) walk(node.children, node);
+      }
+    };
+    walk(options, null);
+    return map;
+  }, [options]);
+  const isDraggable = draggable && !disabled;
+  const canDrag = (node) => isDraggable && !node.disabled && (allowDrag ? allowDrag(node) : true);
+  const canDrop = (dragNode, dropNode, dropPosition) => {
+    for (let cursor = dropNode; cursor; ) {
+      if (cursor.value === dragNode.value) return false;
+      cursor = parentOf.get(cursor.value);
+    }
+    return allowDrop ? allowDrop({
+      dragNode,
+      dropNode,
+      dropPosition
+    }) : true;
+  };
+  const dragRef = React.useRef(null);
+  const [dragValue, setDragValue] = React.useState(null);
+  const [dropTarget, setDropTarget] = React.useState(null);
+  const [moveAnnouncement, setMoveAnnouncement] = React.useState("");
+  const commitDrop = (dragNode, dropNode, dropPosition) => {
+    onDrop?.({
+      dragNode,
+      node: dropNode,
+      dropPosition,
+      dropToGap: dropPosition !== 0
+    });
+    const key = dropPosition === -1 ? "dataDisplay.tree.movedBefore" : dropPosition === 1 ? "dataDisplay.tree.movedAfter" : "dataDisplay.tree.movedInside";
+    setMoveAnnouncement(
+      t(key, { node: reactNodeText(dragNode.label), target: reactNodeText(dropNode.label) })
+    );
+  };
+  const dropPositionAt = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (rect.height <= 0) return 0;
+    const offset = (event.clientY - rect.top) / rect.height;
+    if (offset < 0.25) return -1;
+    if (offset > 0.75) return 1;
+    return 0;
+  };
+  const clearDrag = () => {
+    dragRef.current = null;
+    setDragValue(null);
+    setDropTarget(null);
+  };
+  const keyboardMove = (node, direction) => {
+    const parent = parentOf.get(node.value) ?? null;
+    const siblings = parent ? parent.children ?? [] : options;
+    const position = siblings.findIndex((entry) => entry.value === node.value);
+    let target;
+    let dropPosition;
+    if (direction === "up") {
+      target = siblings[position - 1];
+      dropPosition = -1;
+    } else if (direction === "down") {
+      target = siblings[position + 1];
+      dropPosition = 1;
+    } else if (direction === "out") {
+      target = parent;
+      dropPosition = 1;
+    } else {
+      const previous = siblings[position - 1];
+      const lastChild = previous?.children?.[previous.children.length - 1];
+      target = lastChild ?? previous;
+      dropPosition = lastChild ? 1 : 0;
+    }
+    if (!target || !canDrag(node) || !canDrop(node, target, dropPosition)) {
+      setMoveAnnouncement(t("dataDisplay.tree.moveRefused", { node: reactNodeText(node.label) }));
+      return;
+    }
+    if (direction === "in") {
+      const host = dropPosition === 0 ? target : siblings[position - 1];
+      if (host && !expandedSet.has(host.value)) commitExpanded([...expanded, host.value]);
+    }
+    commitDrop(node, target, dropPosition);
+    setActiveValue(node.value);
+    pendingFocus.current = node.value;
+  };
   const visible = flattenVisibleTree(options, expandedSet);
   const visibleIndex = new Map(visible.map((entry, index) => [entry.node.value, index]));
   const [activeValue, setActiveValue] = React.useState(null);
@@ -300,6 +391,14 @@ function TreeRoot({
     const rtl = isRtl(event.currentTarget);
     const inward = rtl ? "ArrowLeft" : "ArrowRight";
     const outward = rtl ? "ArrowRight" : "ArrowLeft";
+    if (isDraggable && event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === inward || event.key === outward)) {
+      event.preventDefault();
+      keyboardMove(
+        node,
+        event.key === "ArrowUp" ? "up" : event.key === "ArrowDown" ? "down" : event.key === inward ? "in" : "out"
+      );
+      return;
+    }
     if (event.key === "ArrowDown") {
       event.preventDefault();
       moveTo(index + 1);
@@ -366,6 +465,8 @@ function TreeRoot({
     const checkState = checkableProp ? checkStateOf(node) : "unchecked";
     const nodeDisabled = disabled || Boolean(node.disabled);
     const labelId = `${treeId}-${node.value}-label`;
+    const nodeDraggable = canDrag(node);
+    const dropHere = dropTarget?.value === node.value ? dropTarget.position : void 0;
     const glyph = node.icon ?? (variant === "directory" ? hasChildren ? isOpen ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder, {}) : /* @__PURE__ */ jsx(FileIcon, {}) : null);
     return /* @__PURE__ */ jsxs(
       "div",
@@ -395,6 +496,47 @@ function TreeRoot({
         "data-selected": isSelected ? "true" : void 0,
         "data-disabled": nodeDisabled ? "" : void 0,
         "data-filter-node": isFilterMatch ? "true" : void 0,
+        draggable: nodeDraggable || void 0,
+        "data-dragging": dragValue === node.value ? "true" : void 0,
+        "data-drop-position": dropHere === void 0 ? void 0 : dropHere === -1 ? "before" : dropHere === 1 ? "after" : "inside",
+        onDragStart: isDraggable ? (event) => {
+          if (!nodeDraggable) {
+            event.preventDefault();
+            return;
+          }
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", node.value);
+          dragRef.current = node.value;
+          setDragValue(node.value);
+        } : void 0,
+        onDragOver: isDraggable ? (event) => {
+          const dragged = dragRef.current === null ? void 0 : nodesByValue.get(dragRef.current);
+          if (!dragged) return;
+          const position = dropPositionAt(event);
+          if (!canDrop(dragged, node, position)) {
+            if (dropTarget) setDropTarget(null);
+            return;
+          }
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "move";
+          if (dropTarget?.value !== node.value || dropTarget.position !== position) {
+            setDropTarget({ value: node.value, position });
+          }
+        } : void 0,
+        onDragLeave: isDraggable ? (event) => {
+          if (event.currentTarget.contains(event.relatedTarget)) return;
+          if (dropTarget?.value === node.value) setDropTarget(null);
+        } : void 0,
+        onDrop: isDraggable ? (event) => {
+          event.preventDefault();
+          const dragged = dragRef.current === null ? void 0 : nodesByValue.get(dragRef.current);
+          const position = dropPositionAt(event);
+          if (dragged && canDrop(dragged, node, position)) {
+            commitDrop(dragged, node, position);
+          }
+          clearDrag();
+        } : void 0,
+        onDragEnd: isDraggable ? clearDrag : void 0,
         className: "ui-tree-node ui-focus-ring",
         style: { "--tree-node-level": depth },
         children: [
@@ -549,6 +691,7 @@ function TreeRoot({
       "div",
       {
         ...ariaProps,
+        "aria-describedby": isDraggable ? [ariaProps["aria-describedby"], dragHintId].filter(Boolean).join(" ") : ariaProps["aria-describedby"],
         ref: mergeRefs(forwardedRef, treeRef),
         id: treeId,
         role: "tree",
@@ -602,6 +745,10 @@ function TreeRoot({
         ]
       }
     ),
+    isDraggable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { id: dragHintId, className: "sr-only", children: t("dataDisplay.tree.dragHint") }),
+      /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: moveAnnouncement })
+    ] }) : null,
     isEmpty ? /* @__PURE__ */ jsx("p", { role: "status", className: "ui-tree-empty", children: t("dataDisplay.tree.empty") }) : null
   ] });
 }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.14.0",
+  "version": "31.15.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -364,7 +364,12 @@
       "loading": "Loading child nodes…",
       "empty": "Nothing to show",
       "selected": "Selected",
-      "filterMatch": "Matches the filter"
+      "filterMatch": "Matches the filter",
+      "dragHint": "Alt plus arrow keys move the focused item: up and down past a sibling, left to outdent, right to indent.",
+      "movedBefore": "{node} moved before {target}",
+      "movedAfter": "{node} moved after {target}",
+      "movedInside": "{node} moved into {target}",
+      "moveRefused": "{node} cannot move there"
     },
     "thoughtChain": {
       "label": "Reasoning steps",

package/dist/i18n/messages/ja.json

@@ -357,7 +357,12 @@
       "loading": "子ノードを読み込み中…",
       "empty": "表示する項目がありません",
       "selected": "選択中",
-      "filterMatch": "フィルターに一致"
+      "filterMatch": "フィルターに一致",
+      "dragHint": "Alt キーと矢印キーでフォーカス中の項目を移動します。上下で兄弟の前後へ、左で階層を上げ、右で階層を下げます。",
+      "movedBefore": "{node} を {target} の前に移動しました",
+      "movedAfter": "{node} を {target} の後に移動しました",
+      "movedInside": "{node} を {target} の中に移動しました",
+      "moveRefused": "{node} はそこへ移動できません"
     },
     "thoughtChain": {
       "label": "思考の手順",

package/dist/i18n/messages/vi.json

@@ -358,7 +358,12 @@
       "loading": "Đang tải nút con…",
       "empty": "Không có gì để hiển thị",
       "selected": "Đã chọn",
-      "filterMatch": "Khớp bộ lọc"
+      "filterMatch": "Khớp bộ lọc",
+      "dragHint": "Alt cùng phím mũi tên di chuyển mục đang chọn: lên và xuống qua mục ngang hàng, trái để lùi cấp, phải để thụt cấp.",
+      "movedBefore": "Đã chuyển {node} lên trước {target}",
+      "movedAfter": "Đã chuyển {node} xuống sau {target}",
+      "movedInside": "Đã chuyển {node} vào trong {target}",
+      "moveRefused": "Không thể chuyển {node} tới đó"
     },
     "thoughtChain": {
       "label": "Các bước suy luận",

package/dist/props/components/data-display.prop.d.ts

@@ -711,6 +711,29 @@ export type TreeNodeProp = TreeOptionProp & {
  * `checkedValues`/`defaultCheckedValues`/`onCheckedValuesChange`.
  * @see docs/roadmap/tree-components.md §3
  */
+/**
+ * Where a drop lands relative to `node` (gh#1093): `-1` in the gap BEFORE it, `0` INSIDE it (the
+ * dragged node becomes its child), `1` in the gap AFTER it. antd's `onDrop` reports an absolute
+ * index and every antd demo subtracts the node's position back out to get exactly this number, so
+ * the relative form is what a consumer needs.
+ */
+export type TreeDropPositionProp = -1 | 0 | 1;
+/** `allowDrop` argument (antd `allowDrop({ dragNode, dropNode, dropPosition })`). */
+export type TreeAllowDropInfoProp = {
+    dragNode: TreeNodeProp;
+    dropNode: TreeNodeProp;
+    dropPosition: TreeDropPositionProp;
+};
+/** `onDrop` argument (antd `onDrop({ dragNode, node, dropPosition, dropToGap })`). */
+export type TreeDropInfoProp = {
+    /** The node being moved. */
+    dragNode: TreeNodeProp;
+    /** The node it was dropped on or beside. */
+    node: TreeNodeProp;
+    dropPosition: TreeDropPositionProp;
+    /** `true` when it lands in a gap (becomes a SIBLING of `node`), `false` when it lands inside. */
+    dropToGap: boolean;
+};
 export type TreeProp = {
     /** The hierarchy (antd `treeData`). Use `fieldNames` to remap keys off an API response. */
     treeData: readonly TreeNodeProp[];
@@ -781,6 +804,21 @@ export type TreeProp = {
      * capability; see docs/DESIGN-AUTHORITY.md.
      */
     divided?: boolean;
+    /**
+     * Let the reader move nodes by dragging (antd `draggable`, gh#1093): drop on the upper or lower
+     * quarter of a row to land in the gap before / after it, on the middle to file it inside. The
+     * tree never mutates `treeData` — it reports the move through `onDrop` and the consumer persists
+     * it. Keyboard equivalent (WCAG 2.5.7): Alt+↑ / Alt+↓ move past the previous / next sibling,
+     * Alt+← outdents (after its parent), Alt+→ indents (into the previous sibling); each move is
+     * announced through a live region. A node is never dropped into itself or its own subtree.
+     */
+    draggable?: boolean;
+    /** Per-node drag gate (antd `draggable.nodeDraggable`). Disabled nodes never drag. */
+    allowDrag?: (node: TreeNodeProp) => boolean;
+    /** Per-target drop gate (antd `allowDrop`). Asked for pointer AND keyboard moves. */
+    allowDrop?: (info: TreeAllowDropInfoProp) => boolean;
+    /** A move the reader committed (antd `onDrop`). Update `treeData` here. */
+    onDrop?: (info: TreeDropInfoProp) => void;
     /** Draw each node's `icon` (antd `showIcon`). `variant="directory"` supplies folder/file glyphs. */
     showIcon?: boolean;
     /** `directory` is antd's `<DirectoryTree>`: folder/file glyphs and a full-row selected band. */
@@ -793,7 +831,8 @@ export type TreeProp = {
     id?: IdProp;
     /** Accessible name of the `role="tree"` container. Required unless `aria-labelledby` is given. */
     "aria-label"?: string;
-    "aria-labelledby"?: string;
+    "aria-labelledby"?: string; /** Extra description ids; a `draggable` tree appends its own keyboard-move hint. */
+    "aria-describedby"?: string;
 };
 /**
  * @see ChatBubble — which side of the conversation the message sits on. LOGICAL, not physical:

package/dist/props/registry.d.ts

@@ -3165,6 +3165,49 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "The node's own child nodes — the hierarchy itself, not a slot.";
         }];
     };
+    readonly TreeDropPositionProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [];
+    };
+    readonly TreeAllowDropInfoProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "dragNode";
+            readonly local: true;
+            readonly reason: "antd `allowDrop` argument: the node being moved (gh#1093).";
+        }, {
+            readonly field: "dropNode";
+            readonly local: true;
+            readonly reason: "antd `allowDrop` argument: the node it would land on or beside.";
+        }, {
+            readonly field: "dropPosition";
+            readonly local: true;
+            readonly reason: "antd `allowDrop` argument: -1 before, 0 inside, 1 after.";
+        }];
+    };
+    readonly TreeDropInfoProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "dragNode";
+            readonly local: true;
+            readonly reason: "antd `onDrop` info: the node being moved (gh#1093).";
+        }, {
+            readonly field: "node";
+            readonly local: true;
+            readonly reason: "antd `onDrop` info: the node it landed on or beside.";
+        }, {
+            readonly field: "dropPosition";
+            readonly local: true;
+            readonly reason: "antd `onDrop` info, relative: -1 before, 0 inside, 1 after.";
+        }, {
+            readonly field: "dropToGap";
+            readonly local: true;
+            readonly reason: "antd `onDrop` info: true when it lands as a sibling, false inside.";
+        }];
+    };
     readonly TreeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";

package/dist/props/registry.js

@@ -3751,6 +3751,58 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  TreeDropPositionProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: []
+  },
+  TreeAllowDropInfoProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "dragNode",
+        local: true,
+        reason: "antd `allowDrop` argument: the node being moved (gh#1093)."
+      },
+      {
+        field: "dropNode",
+        local: true,
+        reason: "antd `allowDrop` argument: the node it would land on or beside."
+      },
+      {
+        field: "dropPosition",
+        local: true,
+        reason: "antd `allowDrop` argument: -1 before, 0 inside, 1 after."
+      }
+    ]
+  },
+  TreeDropInfoProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "dragNode",
+        local: true,
+        reason: "antd `onDrop` info: the node being moved (gh#1093)."
+      },
+      {
+        field: "node",
+        local: true,
+        reason: "antd `onDrop` info: the node it landed on or beside."
+      },
+      {
+        field: "dropPosition",
+        local: true,
+        reason: "antd `onDrop` info, relative: -1 before, 0 inside, 1 after."
+      },
+      {
+        field: "dropToGap",
+        local: true,
+        reason: "antd `onDrop` info: true when it lands as a sibling, false inside."
+      }
+    ]
+  },
   TreeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",

package/dist/styles/data-display-layout.css

@@ -523,7 +523,8 @@
       hsl(var(--primary) / 0.2);
   }
 
-  .ui-timeline-dot[data-status="pending"] {
+  .ui-timeline-dot[data-status="pending"],
+  .ui-timeline-dot[data-status="log"] {
     border-color: hsl(var(--border));
     background: hsl(var(--background));
     color: hsl(var(--muted-foreground));
@@ -2126,6 +2127,44 @@
     opacity: var(--disabled-opacity);
   }
 
+  .ui-tree-node[draggable="true"] {
+    cursor: grab;
+  }
+
+  .ui-tree-node[data-dragging="true"] {
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-tree-node[data-drop-position] {
+    position: relative;
+  }
+
+  .ui-tree-node[data-drop-position="before"]::after,
+  .ui-tree-node[data-drop-position="after"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: calc(
+        var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width)
+      )
+      0;
+    block-size: var(--tree-drop-indicator-width, var(--stroke-md));
+    background: var(--tree-drop-indicator-color, hsl(var(--primary)));
+    pointer-events: none;
+  }
+
+  .ui-tree-node[data-drop-position="before"]::after {
+    inset-block-start: 0;
+  }
+
+  .ui-tree-node[data-drop-position="after"]::after {
+    inset-block-end: 0;
+  }
+
+  .ui-tree-node[data-drop-position="inside"] {
+    box-shadow: inset 0 0 0 var(--tree-drop-indicator-width, var(--stroke-md))
+      var(--tree-drop-indicator-color, hsl(var(--primary)));
+  }
+
   .ui-tree-switcher {
     display: inline-flex;
     flex: none;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.14.0",
+  "version": "31.15.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/tokens/components/tree.css

@@ -29,5 +29,8 @@
 
   --tree-node-filter-foreground: initial;
 
+  --tree-drop-indicator-color: initial;
+  --tree-drop-indicator-width: initial;
+
   --tree-loading-bar-inline-size: 40%;
 }

package/docs/data-display/timeline.tsx

@@ -13,6 +13,7 @@ import {
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { ArrowRightLeft, MessageSquare } from "lucide-react";
 
 /**
  * Timeline — vertical event list with an icon rail; the current item gets a
@@ -89,6 +90,23 @@ const richItems: TimelineItem[] = [
 
 export default function Demo() {
   const { t, locale } = useTranslation();
+  // An activity log (gh#1092): every row already happened, so none is "done" or "upcoming" —
+  // `status: "log"` keeps the neutral dot and adds no screen-reader status prefix.
+  const logItems: TimelineItem[] = [
+    {
+      title: t("timelineDocs.log.status"),
+      time: "10/01 08:12",
+      status: "log",
+      icon: ArrowRightLeft,
+    },
+    {
+      title: t("timelineDocs.log.comment"),
+      time: "10/01 09:30",
+      status: "log",
+      icon: MessageSquare,
+    },
+    { title: t("timelineDocs.log.assignee"), time: "10/01 10:05", status: "log" },
+  ];
   const dayLabel = (day: number) =>
     new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }).format(
       Date.UTC(2026, 8, day),
@@ -139,6 +157,16 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("timelineDocs.log.title")}</CardTitle>
+            <CardDescription>{t("timelineDocs.log.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Timeline density="compact" items={logItems} />
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>配送ルート進捗</CardTitle>

package/docs/data-display/tree.tsx

@@ -10,6 +10,7 @@ import {
   EmptyState,
   ScrollArea,
   Tree,
+  type TreeDropInfoProp,
   type TreeNodeProp,
 } from "@godxjp/ui/data-display";
 import { SearchInput } from "@godxjp/ui/data-entry";
@@ -246,6 +247,52 @@ function labelSuiteTree(
   });
 }
 
+// ── card · draggable (gh#1093) ─────────────────────────────────────────────────────────────
+const movablePagesSeed: TreeNodeProp[] = [
+  {
+    value: "guide",
+    label: "guide",
+    children: [
+      { value: "guide/start", label: "start" },
+      { value: "guide/setup", label: "setup" },
+    ],
+  },
+  { value: "faq", label: "faq" },
+  { value: "notes", label: "notes" },
+];
+
+/** The seed's labels are catalogue keys (`treeDocs.drag.pages.*`), read in the reader's locale. */
+function labelPages(
+  data: TreeNodeProp[],
+  t: (key: string) => string,
+): TreeNodeProp[] {
+  return data.map((node) => ({
+    ...node,
+    label: t(`treeDocs.drag.pages.${String(node.label)}`),
+    children: node.children ? labelPages(node.children, t) : undefined,
+  }));
+}
+
+/** What a consumer does in `onDrop`: take the node out, put it back where the drop says. */
+function moveNode(data: TreeNodeProp[], info: TreeDropInfoProp): TreeNodeProp[] {
+  let moved: TreeNodeProp | undefined;
+  const without = (list: TreeNodeProp[]): TreeNodeProp[] =>
+    list
+      .filter((node) => (node.value === info.dragNode.value ? ((moved = node), false) : true))
+      .map((node) => (node.children ? { ...node, children: without(node.children) } : node));
+  const place = (list: TreeNodeProp[]): TreeNodeProp[] =>
+    list.flatMap((node) => {
+      if (node.value !== info.node.value) {
+        return node.children ? [{ ...node, children: place(node.children) }] : [node];
+      }
+      if (info.dropPosition === 0)
+        return [{ ...node, children: [...(node.children ?? []), moved!] }];
+      return info.dropPosition === -1 ? [moved!, node] : [node, moved!];
+    });
+  const rest = without(data);
+  return moved ? place(rest) : data;
+}
+
 export default function Demo() {
   const { t } = useTranslation();
   // Card 1 — checks are controlled so the readout beside the tree can never disagree with it.
@@ -253,6 +300,8 @@ export default function Demo() {
   // Card 2 — selection is controlled and drives the detail pane.
   const [openFile, setOpenFile] = React.useState<string | undefined>("src/components/tree.tsx");
   // The page index — the tree IS the navigation, so selection is what the reading pane follows.
+  const [movablePages, setMovablePages] = React.useState(movablePagesSeed);
+  const [lastMove, setLastMove] = React.useState("");
   const [openPage, setOpenPage] = React.useState<string | undefined>("handbook/security/passwords");
   // Card 3 — async children land in state, exactly as a real fetch would.
   const [departments, setDepartments] = React.useState<Department[]>(initialDepartments);
@@ -452,6 +501,35 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("treeDocs.drag.title")}</CardTitle>
+            <CardDescription>{t("treeDocs.drag.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <Tree
+                aria-label={t("treeDocs.drag.treeLabel")}
+                treeData={labelPages(movablePages, t)}
+                defaultExpandAll
+                draggable
+                allowDrop={({ dropNode, dropPosition }) =>
+                  !(dropNode.value === "notes" && dropPosition === 0)
+                }
+                onDrop={(info) => {
+                  setMovablePages((current) => moveNode(current, info));
+                  setLastMove(
+                    `${String(info.dragNode.label)} → ${String(info.node.label)}（dropPosition ${info.dropPosition}, dropToGap ${info.dropToGap}）`,
+                  );
+                }}
+              />
+              <Text size="sm" tone="muted">
+                {t("treeDocs.drag.lastMove", { move: lastMove || t("treeDocs.drag.none") })}
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>組織ツリー（loadData · fieldNames · titleRender）</CardTitle>
@@ -632,6 +710,10 @@ export default function Demo() {
                 },
                 { label: "*", children: "同じ階層の兄弟をすべて展開" },
                 { label: "文字キー", children: "先頭一致で次のノードへジャンプ（type-ahead）" },
+                {
+                  label: "Alt + ↑ / ↓ / ← / →",
+                  children: t("treeDocs.drag.keys"),
+                },
               ]}
             />
           </CardContent>

package/docs/i18n/messages/en.json

@@ -1507,6 +1507,21 @@
         "one": "Load {count} more",
         "other": "Load {count} more"
       }
+    },
+    "drag": {
+      "title": "Drag to reorder or reparent (draggable · allowDrop · onDrop)",
+      "description": "Drop on the upper quarter of a row to land before it, the lower quarter after it, the middle inside it. Tree never edits treeData; onDrop reports the move. From the keyboard: Alt+↑ / Alt+↓ move past a sibling, Alt+← outdents, Alt+→ indents into the previous sibling. Every move is announced in a live region. Here allowDrop refuses dropping inside “Release notes”.",
+      "treeLabel": "Reorderable pages",
+      "lastMove": "Last move: {move}",
+      "none": "none",
+      "keys": "When draggable: past a sibling / outdent / indent",
+      "pages": {
+        "guide": "User guide",
+        "start": "Getting started",
+        "setup": "Setup",
+        "faq": "FAQ",
+        "notes": "Release notes"
+      }
     }
   },
   "progressDocs": {
@@ -1525,5 +1540,14 @@
     "home": "Home",
     "longSuite": "Q3 integration test · payment module · invoice re-issue scenarios",
     "longSection": "Acceptance criteria review for the release candidate of September 2026"
+  },
+  "timelineDocs": {
+    "log": {
+      "title": "status=\"log\" (activity log)",
+      "description": "For a record of things that already happened, such as an issue history, use status=\"log\": a neutral dot and hairline rail, and no “Completed:” / “Upcoming:” prefix read out (antd's gray item).",
+      "status": "Tanaka changed the status Open → In progress",
+      "comment": "Nguyen commented",
+      "assignee": "Tanaka changed the assignee"
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1500,6 +1500,21 @@
       "loadMore": {
         "other": "さらに {count} 件を読み込む"
       }
+    },
+    "drag": {
+      "title": "ドラッグで並べ替え・親を変更（draggable · allowDrop · onDrop）",
+      "description": "行の上 1/4 に落とすと前へ、下 1/4 で後ろへ、中央でその中（子）へ移動します。Tree は treeData を書き換えず、onDrop で移動を知らせるだけです。キーボードでは Alt+↑ / Alt+↓ で兄弟の前後へ、Alt+← で階層を上げ、Alt+→ で直前の兄弟の中へ。移動は毎回ライブリージョンで読み上げられます。ここでは allowDrop で「リリースノート」の中へは落とせません。",
+      "treeLabel": "並べ替えできるページ一覧",
+      "lastMove": "最後の移動: {move}",
+      "none": "なし",
+      "keys": "draggable のとき：兄弟の前後へ／階層を上げる／階層を下げる",
+      "pages": {
+        "guide": "利用ガイド",
+        "start": "はじめに",
+        "setup": "初期設定",
+        "faq": "よくある質問",
+        "notes": "リリースノート"
+      }
     }
   },
   "progressDocs": {
@@ -1518,5 +1533,14 @@
     "home": "ホーム",
     "longSuite": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオ",
     "longSection": "2026年9月 リリース候補の受入基準レビュー"
+  },
+  "timelineDocs": {
+    "log": {
+      "title": "status=\"log\"（アクティビティログ）",
+      "description": "課題の履歴のように、すべて起きたことの記録には status=\"log\"。中立の点と細い線で描き、「完了:」「予定:」のような読み上げ接頭辞を付けません（antd の gray item と同じ）。",
+      "status": "田中 がステータスを変更 未対応 → 処理中",
+      "comment": "グエン がコメント",
+      "assignee": "田中 が担当者を変更"
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1500,6 +1500,21 @@
       "loadMore": {
         "other": "Tải thêm {count} ca"
       }
+    },
+    "drag": {
+      "title": "Kéo để sắp xếp hoặc đổi cha (draggable · allowDrop · onDrop)",
+      "description": "Thả vào 1/4 trên của dòng để đặt trước nó, 1/4 dưới để đặt sau, phần giữa để đặt vào trong. Tree không sửa treeData; onDrop báo nước đi. Bàn phím: Alt+↑ / Alt+↓ qua mục ngang hàng, Alt+← lùi cấp, Alt+→ thụt vào mục liền trước. Mỗi lần di chuyển được đọc qua live region. Ở đây allowDrop không cho thả vào trong “Ghi chú phát hành”.",
+      "treeLabel": "Danh sách trang sắp xếp được",
+      "lastMove": "Lần di chuyển cuối: {move}",
+      "none": "chưa có",
+      "keys": "Khi draggable: qua mục ngang hàng / lùi cấp / thụt cấp",
+      "pages": {
+        "guide": "Hướng dẫn sử dụng",
+        "start": "Bắt đầu",
+        "setup": "Cài đặt",
+        "faq": "Câu hỏi thường gặp",
+        "notes": "Ghi chú phát hành"
+      }
     }
   },
   "progressDocs": {
@@ -1518,5 +1533,14 @@
     "home": "Trang chủ",
     "longSuite": "Kiểm thử tích hợp quý 3 · mô-đun thanh toán · kịch bản xuất lại hoá đơn",
     "longSection": "Rà soát tiêu chí nghiệm thu cho bản ứng viên tháng 9/2026"
+  },
+  "timelineDocs": {
+    "log": {
+      "title": "status=\"log\" (nhật ký hoạt động)",
+      "description": "Với bản ghi những việc đã xảy ra như lịch sử issue, dùng status=\"log\": chấm trung tính, đường mảnh, không đọc tiền tố “Hoàn thành:” / “Sắp tới:” (giống item gray của antd).",
+      "status": "Tanaka đổi trạng thái Mở → Đang xử lý",
+      "comment": "Nguyễn đã bình luận",
+      "assignee": "Tanaka đổi người phụ trách"
+    }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.14.0",
-  "godxUiMcp": "31.14.0",
+  "version": "31.15.0",
+  "godxUiMcp": "31.15.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",