@godxjp/ui 31.14.0 → 31.16.0

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,31 @@
     "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"
+    }
+  },
+  "textDiffDocs": {
+    "subtitle": "Show what changed between two versions of a text, as removals and additions",
+    "source": {
+      "title": "See what changed in the original",
+      "description": "The original a translation was written against, compared with the original now. Japanese is compared character by character, so changing one particle does not mark the whole sentence."
+    },
+    "policy": {
+      "title": "Policy revision (side by side)",
+      "description": "Unchanged lines fold away behind a button. Removals are struck through and additions underlined, so colour is never the only signal.",
+      "before": "Before revision",
+      "after": "After revision"
+    },
+    "words": {
+      "title": "Alphabetic text, word by word",
+      "description": "Languages that separate words with spaces are compared per word. Pass granularity=\"line\" to compare whole lines."
+    }
   }
 }

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,31 @@
     "home": "ホーム",
     "longSuite": "第3四半期 結合テスト 決済モジュール 請求書再発行シナリオ",
     "longSection": "2026年9月 リリース候補の受入基準レビュー"
+  },
+  "timelineDocs": {
+    "log": {
+      "title": "status=\"log\"（アクティビティログ）",
+      "description": "課題の履歴のように、すべて起きたことの記録には status=\"log\"。中立の点と細い線で描き、「完了:」「予定:」のような読み上げ接頭辞を付けません（antd の gray item と同じ）。",
+      "status": "田中 がステータスを変更 未対応 → 処理中",
+      "comment": "グエン がコメント",
+      "assignee": "田中 が担当者を変更"
+    }
+  },
+  "textDiffDocs": {
+    "subtitle": "二つの版のテキストの差分を、削除と追加で示す",
+    "source": {
+      "title": "原文の変更を見る",
+      "description": "翻訳を書いた時点の原文と、いまの原文の差分です。日本語は一文字ずつ比べるので、助詞ひとつの変更でも文全体が変わったようには見えません。"
+    },
+    "policy": {
+      "title": "規程の改訂（左右に並べる）",
+      "description": "変更のない行は折りたたまれ、ボタンで開けます。削除は取り消し線、追加は下線で示し、色だけに頼りません。",
+      "before": "改訂前",
+      "after": "改訂後"
+    },
+    "words": {
+      "title": "英文は単語単位で",
+      "description": "スペースで区切られる言語は単語ごとに比べます。行単位にしたい場合は granularity=\"line\" を指定します。"
+    }
   }
 }

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,31 @@
     "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"
+    }
+  },
+  "textDiffDocs": {
+    "subtitle": "Cho thấy điều gì đã đổi giữa hai phiên bản của một văn bản, dưới dạng phần xoá và phần thêm",
+    "source": {
+      "title": "Xem thay đổi của bản gốc",
+      "description": "Bản gốc lúc viết bản dịch so với bản gốc hiện tại. Tiếng Nhật được so từng ký tự, nên đổi một trợ từ không làm cả câu bị đánh dấu."
+    },
+    "policy": {
+      "title": "Sửa đổi quy định (đặt cạnh nhau)",
+      "description": "Các dòng không đổi được thu gọn sau một nút. Phần xoá bị gạch ngang, phần thêm được gạch chân, không chỉ dựa vào màu.",
+      "before": "Trước sửa đổi",
+      "after": "Sau sửa đổi"
+    },
+    "words": {
+      "title": "Văn bản chữ Latinh, theo từng từ",
+      "description": "Ngôn ngữ tách từ bằng dấu cách được so theo từng từ. Truyền granularity=\"line\" để so cả dòng."
+    }
   }
 }

package/package.json

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