@godxjp/ui 31.14.0 → 31.16.0

package/dist/components/data-display/text-diff.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { TextDiffProp, TextDiffSegment } from "../../props/components/data-display.prop.js";
+export type { TextDiffProp, TextDiffProp as TextDiffProps, TextDiffSegment, } from "../../props/components/data-display.prop.js";
+/** The unit a change is measured in — see `TextDiffProp["granularity"]`. */
+export type TextDiffGranularity = NonNullable<TextDiffProp["granularity"]>;
+/**
+ * Cut a text into diff tokens. `line` keeps each line with its newline; `char` is one grapheme
+ * cluster per token (an emoji or a combining mark stays whole); `word` is `Intl.Segmenter` word
+ * segmentation in `lang`; `auto` is `word`, except that a CJK run is cut per character, because a
+ * dictionary word boundary in Japanese moves when one particle changes. A newline is always its
+ * own token so a changed line never swallows the line after it.
+ */
+export declare function tokenizeText(text: string, granularity?: TextDiffGranularity, lang?: string): string[];
+/**
+ * The diff `TextDiff` renders, for a caller that needs the runs themselves (a count of changes, a
+ * plain-text export). A longest-common-subsequence over {@link tokenizeText} tokens, with the
+ * common prefix and suffix trimmed first; adjacent runs of one kind are merged, and a removal is
+ * always emitted before the addition that replaces it. Past `maxCells` LCS cells the changed
+ * middle is one removal plus one addition — a bounded cost instead of a frozen tab.
+ */
+export declare function diffText(before: string, after: string, options?: {
+    granularity?: TextDiffGranularity;
+    lang?: string;
+    maxCells?: number;
+}): TextDiffSegment[];
+/**
+ * TextDiff — what changed between two versions of a text (gh#1096): removed runs in `<del>`,
+ * added runs in `<ins>`, each with a struck-through or underlined mark AND a spoken start/end
+ * label, so the change is never carried by colour alone. Inline (one flow, GitHub's "unified")
+ * or split (before | after side by side); per line, per word, per character, or `auto` (words,
+ * with CJK cut per character). Long unchanged runs fold behind a button that reveals them.
+ */
+export declare const TextDiff: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    before: string;
+    after: string;
+    mode?: "inline" | "split";
+    granularity?: "auto" | "word" | "char" | "line";
+    collapseUnchanged?: boolean;
+    contextLines?: number;
+    maxCells?: number;
+    beforeLabel?: React.ReactNode;
+    afterLabel?: React.ReactNode;
+    lang?: string;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/text-diff.js

@@ -0,0 +1,240 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../general/button.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+const DEFAULT_MAX_CELLS = 4e6;
+const MIN_HIDDEN_LINES = 2;
+function segmenter(lang, granularity) {
+  if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") return null;
+  try {
+    return new Intl.Segmenter(lang, { granularity });
+  } catch {
+    return new Intl.Segmenter(void 0, { granularity });
+  }
+}
+function graphemes(text, lang) {
+  const s = segmenter(lang, "grapheme");
+  return s ? Array.from(s.segment(text), (part) => part.segment) : Array.from(text);
+}
+function tokenizeText(text, granularity = "auto", lang) {
+  if (text === "") return [];
+  if (granularity === "line") return text.match(/[^\n]*\n|[^\n]+/g) ?? [];
+  if (granularity === "char") return graphemes(text, lang);
+  const s = segmenter(lang, "word");
+  const words = s ? Array.from(s.segment(text), (part) => part.segment) : text.match(/\s+|[^\s]+/g) ?? [];
+  const tokens = [];
+  for (const word of words) {
+    const pieces = word.length > 1 && word.includes("\n") ? word.split(/(\n)/) : [word];
+    for (const piece of pieces) {
+      if (piece === "") continue;
+      if (granularity === "auto" && CJK.test(piece)) tokens.push(...graphemes(piece, lang));
+      else tokens.push(piece);
+    }
+  }
+  return tokens;
+}
+function push(segments, kind, text) {
+  if (text === "") return;
+  const last = segments[segments.length - 1];
+  if (last !== void 0 && last.kind === kind) last.text += text;
+  else segments.push({ kind, text });
+}
+function diffText(before, after, options = {}) {
+  const { granularity = "auto", lang, maxCells = DEFAULT_MAX_CELLS } = options;
+  const a = tokenizeText(before, granularity, lang);
+  const b = tokenizeText(after, granularity, lang);
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) start++;
+  let endA = a.length;
+  let endB = b.length;
+  while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
+    endA--;
+    endB--;
+  }
+  const segments = [];
+  push(segments, "same", a.slice(0, start).join(""));
+  const midA = a.slice(start, endA);
+  const midB = b.slice(start, endB);
+  if ((midA.length + 1) * (midB.length + 1) > maxCells) {
+    push(segments, "removed", midA.join(""));
+    push(segments, "added", midB.join(""));
+  } else {
+    const width = midB.length + 1;
+    const lengths = new Uint32Array((midA.length + 1) * width);
+    for (let i2 = midA.length - 1; i2 >= 0; i2--) {
+      for (let j2 = midB.length - 1; j2 >= 0; j2--) {
+        lengths[i2 * width + j2] = midA[i2] === midB[j2] ? lengths[(i2 + 1) * width + j2 + 1] + 1 : Math.max(lengths[(i2 + 1) * width + j2], lengths[i2 * width + j2 + 1]);
+      }
+    }
+    let i = 0;
+    let j = 0;
+    while (i < midA.length || j < midB.length) {
+      if (i < midA.length && j < midB.length && midA[i] === midB[j]) {
+        push(segments, "same", midA[i]);
+        i++;
+        j++;
+      } else if (i < midA.length && (j === midB.length || lengths[(i + 1) * width + j] >= lengths[i * width + j + 1])) {
+        push(segments, "removed", midA[i]);
+        i++;
+      } else {
+        push(segments, "added", midB[j]);
+        j++;
+      }
+    }
+  }
+  push(segments, "same", a.slice(endA).join(""));
+  return segments;
+}
+function toLines(segments) {
+  const lines = [];
+  let current = [];
+  for (const segment of segments) {
+    for (const piece of segment.text.split(/(?<=\n)/)) {
+      if (piece === "") continue;
+      current.push({ kind: segment.kind, text: piece });
+      if (piece.endsWith("\n")) {
+        lines.push(current);
+        current = [];
+      }
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines;
+}
+function toItems(lines, collapse, context) {
+  const runs = [];
+  for (const line of lines) {
+    const changed = line.some((piece) => piece.kind !== "same");
+    const last = runs[runs.length - 1];
+    if (last !== void 0 && last.changed === changed) last.lines.push(line);
+    else runs.push({ changed, lines: [line] });
+  }
+  const anyChange = runs.some((run) => run.changed);
+  const items = [];
+  runs.forEach((run, index) => {
+    if (run.changed || !collapse || !anyChange) {
+      items.push({ type: "lines", ...run });
+      return;
+    }
+    const head = index === 0 ? 0 : context;
+    const tail = index === runs.length - 1 ? 0 : context;
+    const hidden = run.lines.length - head - tail;
+    if (hidden < MIN_HIDDEN_LINES) {
+      items.push({ type: "lines", ...run });
+      return;
+    }
+    if (head > 0) items.push({ type: "lines", changed: false, lines: run.lines.slice(0, head) });
+    items.push({ type: "gap", id: index, lines: run.lines.slice(head, head + hidden) });
+    if (tail > 0) {
+      items.push({ type: "lines", changed: false, lines: run.lines.slice(head + hidden) });
+    }
+  });
+  return items;
+}
+function Runs({ lines, side }) {
+  const { t } = useTranslation();
+  const runs = [];
+  for (const piece of lines.flat()) {
+    if (side === "before" && piece.kind === "added") continue;
+    if (side === "after" && piece.kind === "removed") continue;
+    push(runs, piece.kind, piece.text);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: runs.map(
+    (run, index) => run.kind === "same" ? /* @__PURE__ */ jsx(React.Fragment, { children: run.text }, index) : run.kind === "removed" ? /* @__PURE__ */ jsxs("del", { className: "ui-text-diff-removed", children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("ui.textDiff.removedStart") }),
+      run.text,
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("ui.textDiff.removedEnd") })
+    ] }, index) : /* @__PURE__ */ jsxs("ins", { className: "ui-text-diff-added", children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("ui.textDiff.addedStart") }),
+      run.text,
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t("ui.textDiff.addedEnd") })
+    ] }, index)
+  ) });
+}
+const TextDiff = React.forwardRef(function TextDiff2({
+  before,
+  after,
+  mode = "inline",
+  granularity = "auto",
+  collapseUnchanged = true,
+  contextLines = 2,
+  maxCells,
+  beforeLabel,
+  afterLabel,
+  lang,
+  className,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const items = React.useMemo(
+    () => toItems(
+      toLines(diffText(before, after, { granularity, lang, maxCells })),
+      collapseUnchanged,
+      Math.max(0, contextLines)
+    ),
+    [before, after, granularity, lang, maxCells, collapseUnchanged, contextLines]
+  );
+  const [expanded, setExpanded] = React.useState(() => /* @__PURE__ */ new Set());
+  React.useEffect(() => setExpanded(/* @__PURE__ */ new Set()), [items]);
+  const gap = (item, split) => /* @__PURE__ */ jsx("div", { className: "ui-text-diff-gap", "data-span": split || void 0, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "xs",
+      onClick: () => setExpanded((previous) => new Set(previous).add(item.id)),
+      children: t("ui.textDiff.showUnchanged", { count: item.lines.length })
+    }
+  ) }, `gap-${item.id}`);
+  const resolved = items.map(
+    (item) => item.type === "gap" && expanded.has(item.id) ? { type: "lines", changed: false, lines: item.lines } : item
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "text-diff",
+      "data-mode": mode,
+      lang,
+      className: cn("ui-text-diff", className),
+      ...props,
+      children: mode === "split" ? /* @__PURE__ */ jsxs("div", { className: "ui-text-diff-split", children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-text-diff-heading", children: beforeLabel ?? t("ui.textDiff.before") }),
+        /* @__PURE__ */ jsx("div", { className: "ui-text-diff-heading", children: afterLabel ?? t("ui.textDiff.after") }),
+        resolved.map(
+          (item, index) => item.type === "gap" ? gap(item, true) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ui-text-diff-cell",
+                "data-side": "before",
+                "data-changed": item.changed || void 0,
+                children: /* @__PURE__ */ jsx(Runs, { lines: item.lines, side: "before" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "ui-text-diff-cell",
+                "data-side": "after",
+                "data-changed": item.changed || void 0,
+                children: /* @__PURE__ */ jsx(Runs, { lines: item.lines, side: "after" })
+              }
+            )
+          ] }, index)
+        )
+      ] }) : /* @__PURE__ */ jsx("div", { className: "ui-text-diff-body", children: resolved.map(
+        (item, index) => item.type === "gap" ? gap(item, false) : /* @__PURE__ */ jsx(Runs, { lines: item.lines, side: "both" }, index)
+      ) })
+    }
+  );
+});
+export {
+  TextDiff,
+  diffText,
+  tokenizeText
+};

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.16.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",
@@ -452,6 +457,18 @@
       "copy": "Copy code",
       "copied": "Copied",
       "copiedAnnounce": "Code copied to clipboard"
+    },
+    "textDiff": {
+      "before": "Before",
+      "after": "After",
+      "removedStart": "[removed: ",
+      "removedEnd": "]",
+      "addedStart": "[added: ",
+      "addedEnd": "]",
+      "showUnchanged": {
+        "one": "Show {count} unchanged line",
+        "other": "Show {count} unchanged lines"
+      }
     }
   },
   "navigation": {

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": "思考の手順",
@@ -445,6 +450,15 @@
       "copy": "コードをコピー",
       "copied": "コピーしました",
       "copiedAnnounce": "コードをクリップボードにコピーしました"
+    },
+    "textDiff": {
+      "before": "変更前",
+      "after": "変更後",
+      "removedStart": "［削除: ",
+      "removedEnd": "］",
+      "addedStart": "［追加: ",
+      "addedEnd": "］",
+      "showUnchanged": "変更のない{count}行を表示"
     }
   },
   "navigation": {

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",
@@ -446,6 +451,15 @@
       "copy": "Sao chép mã",
       "copied": "Đã sao chép",
       "copiedAnnounce": "Đã sao chép mã vào bộ nhớ tạm"
+    },
+    "textDiff": {
+      "before": "Trước",
+      "after": "Sau",
+      "removedStart": "[đã xoá: ",
+      "removedEnd": "]",
+      "addedStart": "[đã thêm: ",
+      "addedEnd": "]",
+      "showUnchanged": "Hiện {count} dòng không đổi"
     }
   },
   "navigation": {