@godxjp/ui 31.14.0 → 31.16.0

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:
@@ -1295,3 +1334,46 @@ export type ImagePreviewGroupProp = {
     preview?: boolean | ImagePreviewGroupConfigProp;
     children?: React.ReactNode;
 };
+/** @see diffText — one run of a diff: kept, taken out of `before`, or put into `after`. */
+export type TextDiffSegment = {
+    kind: "same" | "removed" | "added";
+    text: string;
+};
+/**
+ * @see TextDiff — what changed between two versions of a text (gh#1096).
+ *
+ * antd ships no diff, so the shape follows GitHub/GitLab: `<del>`/`<ins>` with a spoken start/end
+ * label (never colour alone), inline ("unified") or split, unchanged runs folded around the
+ * changes. Text keeps its newlines (`pre-wrap`) and a long token breaks anywhere.
+ */
+export type TextDiffProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The earlier text — what a translation was written against, the saved version. */
+    before: string;
+    /** The current text. */
+    after: string;
+    /** `inline` (default) — one flow; `split` — two columns, before | after, hunks aligned. */
+    mode?: "inline" | "split";
+    /**
+     * The unit a change is measured in. `auto` (default) is words for alphabetic text and one
+     * character per token for Han / Hiragana / Katakana / Hangul runs, which have no spaces to split
+     * on. `word` is `Intl.Segmenter` word segmentation in `lang` (dictionary words for Japanese),
+     * `char` is one grapheme cluster per token, `line` compares whole lines.
+     */
+    granularity?: "auto" | "word" | "char" | "line";
+    /** Fold long unchanged runs of lines behind a "show N unchanged lines" button. Default `true`. */
+    collapseUnchanged?: boolean;
+    /** Unchanged lines kept visible next to each change when folding. Default `2`. */
+    contextLines?: number;
+    /**
+     * The LCS cost cap (tokens before × tokens after). Past it the changed middle is shown as one
+     * removal and one addition instead of freezing the tab. Default `4_000_000`.
+     */
+    maxCells?: number;
+    /** Heading of the before column in `split` mode. Default: the localized "Before". */
+    beforeLabel?: React.ReactNode;
+    /** Heading of the after column in `split` mode. Default: the localized "After". */
+    afterLabel?: React.ReactNode;
+    /** BCP-47 language of the text — set on the element and used for `Intl.Segmenter`. */
+    lang?: string;
+    className?: ClassNameProp;
+};

package/dist/props/registry.d.ts

@@ -2881,6 +2881,51 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "The sample's accessible NAME, which is what lets a read-only colour be shown with no visible label. Absent, the mark is aria-hidden (Legend's rule) — so colour is never the sole carrier either way.";
         }];
     };
+    readonly TextDiffProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp", {
+            readonly field: "before";
+            readonly local: true;
+            readonly reason: "The earlier version of the text being compared — DATA, the left side of a diff (gh#1096).";
+        }, {
+            readonly field: "after";
+            readonly local: true;
+            readonly reason: "The current version of the text being compared — DATA, the right side of a diff (gh#1096).";
+        }, {
+            readonly field: "mode";
+            readonly local: true;
+            readonly reason: "inline | split — GitHub's unified vs side-by-side diff layout; not a size or tone axis.";
+        }, {
+            readonly field: "granularity";
+            readonly local: true;
+            readonly reason: "auto | word | char | line — the token unit, the same word Intl.Segmenter uses for it.";
+        }, {
+            readonly field: "collapseUnchanged";
+            readonly local: true;
+            readonly reason: "Positive boolean: fold long unchanged runs of lines behind a reveal button.";
+        }, {
+            readonly field: "contextLines";
+            readonly local: true;
+            readonly reason: "Unchanged lines kept beside each change when folding — git's -U<n> context.";
+        }, {
+            readonly field: "maxCells";
+            readonly local: true;
+            readonly reason: "Cost cap of the LCS table; past it the changed middle is one removal plus one addition.";
+        }, {
+            readonly field: "beforeLabel";
+            readonly local: true;
+            readonly reason: "Heading of the before column in split mode; defaults to the localized word.";
+        }, {
+            readonly field: "afterLabel";
+            readonly local: true;
+            readonly reason: "Heading of the after column in split mode; defaults to the localized word.";
+        }, {
+            readonly field: "lang";
+            readonly local: true;
+            readonly reason: "The HTML lang attribute, also the Intl.Segmenter locale for word/char segmentation.";
+        }];
+    };
     readonly FeatureStateProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -3165,6 +3210,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

@@ -3398,6 +3398,63 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  TextDiffProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      "ClassNameProp",
+      {
+        field: "before",
+        local: true,
+        reason: "The earlier version of the text being compared \u2014 DATA, the left side of a diff (gh#1096)."
+      },
+      {
+        field: "after",
+        local: true,
+        reason: "The current version of the text being compared \u2014 DATA, the right side of a diff (gh#1096)."
+      },
+      {
+        field: "mode",
+        local: true,
+        reason: "inline | split \u2014 GitHub's unified vs side-by-side diff layout; not a size or tone axis."
+      },
+      {
+        field: "granularity",
+        local: true,
+        reason: "auto | word | char | line \u2014 the token unit, the same word Intl.Segmenter uses for it."
+      },
+      {
+        field: "collapseUnchanged",
+        local: true,
+        reason: "Positive boolean: fold long unchanged runs of lines behind a reveal button."
+      },
+      {
+        field: "contextLines",
+        local: true,
+        reason: "Unchanged lines kept beside each change when folding \u2014 git's -U<n> context."
+      },
+      {
+        field: "maxCells",
+        local: true,
+        reason: "Cost cap of the LCS table; past it the changed middle is one removal plus one addition."
+      },
+      {
+        field: "beforeLabel",
+        local: true,
+        reason: "Heading of the before column in split mode; defaults to the localized word."
+      },
+      {
+        field: "afterLabel",
+        local: true,
+        reason: "Heading of the after column in split mode; defaults to the localized word."
+      },
+      {
+        field: "lang",
+        local: true,
+        reason: "The HTML lang attribute, also the Intl.Segmenter locale for word/char segmentation."
+      }
+    ]
+  },
   FeatureStateProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -3751,6 +3808,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

@@ -467,6 +467,58 @@
     block-size: var(--thumbnail-block-size-lg);
   }
 
+  .ui-text-diff {
+    min-inline-size: 0;
+  }
+
+  :is(.ui-text-diff-body, .ui-text-diff-cell) {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  .ui-text-diff-removed {
+    background: var(
+      --surface-destructive,
+      hsl(var(--destructive) / var(--text-diff-removed-background-alpha))
+    );
+    color: inherit;
+    text-decoration-line: line-through;
+    text-decoration-thickness: var(--text-diff-mark-line-width);
+  }
+
+  .ui-text-diff-added {
+    background: var(
+      --surface-success,
+      hsl(var(--success) / var(--text-diff-added-background-alpha))
+    );
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--text-diff-mark-line-width);
+  }
+
+  .ui-text-diff-gap {
+    display: block;
+    padding-block: var(--text-diff-space-inset);
+  }
+
+  .ui-text-diff-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: var(--text-diff-space-gap);
+  }
+
+  .ui-text-diff-split > .ui-text-diff-gap {
+    grid-column: 1 / -1;
+  }
+
+  .ui-text-diff-heading {
+    padding-block-end: var(--text-diff-space-inset);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-sm, var(--font-size-base));
+    font-weight: var(--font-weight-medium);
+  }
+
   .ui-timeline {
     display: flex;
     flex-direction: column;
@@ -523,7 +575,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 +2179,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.16.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -1053,6 +1053,11 @@
         "dialog-layout.css"
       ]
     },
+    "TextDiff": {
+      "layers": [
+        "control.css"
+      ]
+    },
     "Textarea": {
       "layers": [
         "control.css"

package/dist/tokens/components/data-display.css

@@ -173,6 +173,14 @@
   --thumbnail-border-width: initial;
   --thumbnail-radius: initial;
 
+  --text-diff-removed-background-alpha: 0.12;
+  --text-diff-added-background-alpha: 0.16;
+
+  --text-diff-mark-line-width: var(--stroke-hairline);
+
+  --text-diff-space-gap: var(--space-3);
+  --text-diff-space-inset: var(--space-2);
+
   --timeline-dot-done-background: initial;
   --timeline-dot-done-foreground: initial;
   --timeline-dot-current-background: 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/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **178**
-- With ≥1 frame: **154** · zero-frame: **24**
+- Public components: **179**
+- With ≥1 frame: **155** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -88,6 +88,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Badge | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Legend | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Swatch | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| TextDiff | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | FeatureList | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Thumbnail | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ListRow | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |

package/docs/data-display/text-diff.tsx

@@ -0,0 +1,89 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TextDiff,
+} from "@godxjp/ui/data-display";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const PREVIOUS_ORIGINAL = "来週の定例会議までに、見積書を承認してください。";
+const CURRENT_ORIGINAL = "今週金曜までに、見積書と請求書を却下してください。";
+
+const PREVIOUS_POLICY = [
+  "1. 申請は月末までに提出する。",
+  "2. 領収書の原本を添付する。",
+  "3. 上長の承認を得る。",
+  "4. 経理部が内容を確認する。",
+  "5. 承認後、翌月の給与と合わせて支払う。",
+  "6. 不備がある場合は差し戻す。",
+  "7. 差し戻しから五営業日以内に再提出する。",
+  "8. 期限を過ぎた申請は受け付けない。",
+].join("\n");
+
+const CURRENT_POLICY = [
+  "1. 申請は毎月二十日までに提出する。",
+  "2. 領収書の原本を添付する。",
+  "3. 上長の承認を得る。",
+  "4. 経理部が内容を確認する。",
+  "5. 承認後、翌月の給与と合わせて支払う。",
+  "6. 不備がある場合は差し戻す。",
+  "7. 差し戻しから五営業日以内に再提出する。",
+  "8. 期限を過ぎた申請は、部長の承認があれば受け付ける。",
+].join("\n");
+
+/**
+ * TextDiff — what changed between two versions of a text (gh#1096).
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const { t } = useTranslation();
+  return (
+    <PageContainer title="TextDiff" subtitle={t("textDiffDocs.subtitle")}>
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.source.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.source.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff before={PREVIOUS_ORIGINAL} after={CURRENT_ORIGINAL} lang="ja" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.policy.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.policy.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff
+              mode="split"
+              before={PREVIOUS_POLICY}
+              after={CURRENT_POLICY}
+              lang="ja"
+              beforeLabel={t("textDiffDocs.policy.before")}
+              afterLabel={t("textDiffDocs.policy.after")}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("textDiffDocs.words.title")}</CardTitle>
+            <CardDescription>{t("textDiffDocs.words.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TextDiff
+              before="Please approve the quotation before next week's meeting."
+              after="Please reject the quotation and the invoice by Friday."
+              lang="en"
+            />
+          </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>