@godxjp/ui 31.13.0 → 31.15.0

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;
@@ -2687,6 +2726,58 @@
     border-radius: inherit;
   }
 
+  .ui-image[data-sized],
+  .ui-image-tile[data-sized] {
+    inline-size: var(--image-inline-size, auto);
+  }
+
+  .ui-image[data-sized] {
+    block-size: var(--image-block-size, auto);
+  }
+
+  .ui-image[data-sized] > .ui-image-img {
+    inline-size: 100%;
+    max-inline-size: none;
+    block-size: 100%;
+  }
+
+  :is(.ui-image, .ui-image-tile)[data-size="sm"] {
+    --image-block-size: var(--thumbnail-block-size-sm);
+  }
+
+  :is(.ui-image, .ui-image-tile)[data-size="md"] {
+    --image-block-size: var(--thumbnail-block-size);
+  }
+
+  :is(.ui-image, .ui-image-tile)[data-size="lg"] {
+    --image-block-size: var(--thumbnail-block-size-lg);
+  }
+
+  :is(.ui-image, .ui-image-tile)[data-size] {
+    --image-inline-size: calc(var(--image-block-size) * var(--thumbnail-width-ratio));
+  }
+
+  .ui-image-img[data-fit="cover"] {
+    object-fit: cover;
+  }
+
+  .ui-image-img[data-fit="contain"] {
+    object-fit: contain;
+  }
+
+  .ui-image-tile {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--space-stack-xs);
+    max-inline-size: 100%;
+    margin: 0;
+    vertical-align: top;
+  }
+
+  .ui-image-caption {
+    min-inline-size: 0;
+  }
+
   .ui-image-placeholder {
     position: absolute;
     inset: 0;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.13.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/data-display.css

@@ -169,6 +169,7 @@
   --thumbnail-block-size-sm: 4rem;
   --thumbnail-block-size: 6rem;
   --thumbnail-block-size-lg: 10rem;
+  --thumbnail-width-ratio: 4 / 3;
   --thumbnail-border-width: initial;
   --thumbnail-radius: initial;
 

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/DESIGN-AUTHORITY.md

@@ -399,6 +399,12 @@ bottomEnd | none` (`TablePaginationPositionProp`, default `['bottomEnd']`), the
   would rule every existing tree, including the picker-sized and `size="xs"` outlines where a rule
   every 24px is noise rather than structure. A tree used as page navigation opts in.
 
+- **`Image size` / `fit` / `caption` have no antd counterpart.** antd's Image takes `width` /
+  `height` on the frame and the picture, and those are ported as antd has them (a fixed height
+  crops with `fit`, default `cover`, where antd stretches). godx adds `size?: "sm" | "md" | "lg"`
+  — the Thumbnail height scale at `--thumbnail-width-ratio` (4 / 3) — `fit?: "cover" | "contain"`,
+  and `caption`, a figcaption held to the picture's width so a file name truncates under it.
+
 - **`Timeline density` has no antd counterpart.** antd's Timeline spaces items with one fixed
   token (`itemPaddingBottom`, 20px) and offers no size or density prop. godx adds
   `density?: "default" | "compact"` — the ListRow-shaped subset of `DensityProp` — driving one

package/docs/FRAME-COVERAGE-REPORT.md

@@ -212,7 +212,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Actions | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ThoughtChain | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | OrgChart | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
-| Image | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| Image | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Attachments | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | Marquee | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Masonry | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/image.tsx

@@ -124,6 +124,46 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Thumbnail size · fit · caption</CardTitle>
+            <CardDescription>
+              size puts the frame on the Thumbnail height scale (sm 64px, md 96px, lg 160px) at 4:3,
+              cropped to fill; fit=&quot;contain&quot; letterboxes instead. caption keeps a long
+              file name under the picture, truncated at the picture&apos;s width.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ImagePreviewGroup>
+              <Flex gap="sm" wrap align="start">
+                <Image
+                  src={shotLandscape}
+                  size="md"
+                  alt="Dashboard"
+                  caption={
+                    <Text size="xs" truncate>
+                      dashboard-after-the-fix-2026-09-30-full-resolution.png
+                    </Text>
+                  }
+                />
+                <Image
+                  src={shotPortrait}
+                  size="md"
+                  fit="contain"
+                  alt="List screen"
+                  caption={
+                    <Text size="xs" truncate>
+                      list-screen.png
+                    </Text>
+                  }
+                />
+                <Image src={coverTerrain} size="sm" alt="Cover image" />
+                <Image src={portraitIris} size="lg" alt="Portrait" />
+              </Flex>
+            </ImagePreviewGroup>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

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.13.0",
-  "godxUiMcp": "31.13.0",
+  "version": "31.15.0",
+  "godxUiMcp": "31.15.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",