@godxjp/ui 31.15.0 → 31.17.0

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

@@ -31,6 +31,8 @@ export { EmptyState } from "./empty-state.js";
 export { Progress } from "./progress.js";
 export { CodeBlock } from "./code-block.js";
 export type { CodeBlockProp, CodeBlockProps } from "./code-block.js";
+export { TextDiff, diffText, tokenizeText } from "./text-diff.js";
+export type { TextDiffGranularity, TextDiffProp, TextDiffProps, TextDiffSegment, } from "./text-diff.js";
 export { Prose } from "./prose.js";
 export type { ProseProp, ProseProps } from "./prose.js";
 export type { ProgressProps, ProgressSegment, ProgressTone } from "./progress.js";

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

@@ -31,6 +31,7 @@ import { DataTable, flexRender } from "./data-table.js";
 import { EmptyState } from "./empty-state.js";
 import { Progress } from "./progress.js";
 import { CodeBlock } from "./code-block.js";
+import { TextDiff, diffText, tokenizeText } from "./text-diff.js";
 import { Prose } from "./prose.js";
 import { Timeline } from "./timeline.js";
 import { TimelineGrid } from "./timeline-grid.js";
@@ -134,6 +135,7 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  TextDiff,
   ThoughtChain,
   ThoughtChainItem,
   Thumbnail,
@@ -141,6 +143,8 @@ export {
   TimelineGrid,
   Tree,
   Welcome,
+  diffText,
   flexRender,
+  tokenizeText,
   useCarousel
 };

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

@@ -247,7 +247,7 @@ const TableCell = React.forwardRef(
         },
         ...props,
         children: [
-          label !== void 0 ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
+          label !== void 0 && children != null && children !== false && children !== "" ? /* @__PURE__ */ jsx("span", { className: "ui-table-stacked-collection-label", "aria-hidden": "true", children: label }) : null,
           priority === "actions" && preset === "action-collection" ? /* @__PURE__ */ jsx("span", { className: "ui-table-actions-content", children }) : children
         ]
       }

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/general/typography.js

@@ -469,9 +469,9 @@ const TextBase = React.forwardRef((props, ref) => {
     // always been, on the element itself.
     "data-truncate": truncating && !block.wrapsContent ? "" : void 0,
     "data-clamp": effectiveClamp !== void 0 && !block.wrapsContent ? "" : void 0,
-    // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
-    // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
-    "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
+    // Unset emits nothing. An EXPLICIT `normal` is emitted (gh#1083): it releases a `nowrap` the
+    // Text inherits, e.g. from a table cell. `truncate` still wins by emitting nothing.
+    "data-whitespace": whitespace && !truncating ? whitespace : void 0,
     // Same shape and the same precedence as `whitespace`: `normal` is inert, and one line has
     // nowhere to break to, so `truncate` simply does not emit it (gh#927).
     "data-break": breakMode === "anywhere" && !truncating ? "anywhere" : void 0,

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.15.0",
+  "version": "31.17.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

@@ -457,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

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

package/dist/i18n/messages/vi.json

@@ -451,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": {

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

@@ -1334,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

@@ -322,7 +322,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly TableExpandableProp: {
         readonly file: "vocabulary/data.prop.ts";
         readonly category: "data";
-        readonly description: "DataTable expandable-row config — expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick (antd/rc-table ExpandableConfig)";
+        readonly description: "DataTable expandable-row config — expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick | flush (antd/rc-table ExpandableConfig; the detail cell is padded by default, gh#1083)";
     };
     readonly TableSummaryProp: {
         readonly file: "vocabulary/data.prop.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";

package/dist/props/registry.js

@@ -320,7 +320,7 @@ const VOCABULARY_REGISTRY = {
   TableExpandableProp: {
     file: "vocabulary/data.prop.ts",
     category: "data",
-    description: "DataTable expandable-row config \u2014 expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick (antd/rc-table ExpandableConfig)"
+    description: "DataTable expandable-row config \u2014 expandedRowRender | rowExpandable | defaultExpandAllRows | expandedRowKeys | onExpandedRowsChange | expandRowByClick | flush (antd/rc-table ExpandableConfig; the detail cell is padded by default, gh#1083)"
   },
   TableSummaryProp: {
     file: "vocabulary/data.prop.ts",
@@ -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",

package/dist/props/vocabulary/data.prop.d.ts

@@ -271,6 +271,12 @@ export type TableExpandableProp<T> = {
     /** Clicking anywhere on the row toggles it (antd `expandRowByClick`). */
     expandRowByClick?: boolean;
     columnTitle?: React.ReactNode;
+    /**
+     * The detail reaches the cell edges: no inset (gh#1083). Off by default — the expanded cell is
+     * padded like any other cell (antd), retuned by `--table-row-expanded-padding`. Set it for a
+     * detail that owns its inset, such as a nested table or a `ListRow` list.
+     */
+    flush?: FlushProp;
 };
 /** Footer totals row — receives the rows currently rendered (antd/rc-table `summary`). */
 export type TableSummaryProp<T> = (rows: readonly T[]) => React.ReactNode;

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -90,6 +90,7 @@ export type TextAlignProp = "start" | "center" | "end";
  * `normal` is CSS's own behaviour and the default: newlines and runs of spaces collapse. That is
  * right for a label and wrong for text a PERSON typed into a textarea — a plain-text note, a
  * pasted log, an issue description — where the line breaks and the indentation ARE content.
+ * Passed explicitly, `normal` also releases a `nowrap` the text inherits (a table cell's, gh#1083).
  *
  * `pre-wrap` keeps both and still wraps at the container's edge, so the block cannot force a
  * horizontal scrollbar the way `pre` would. It is a closed union rather than a boolean because the

package/dist/styles/badge-layout.css

@@ -5,6 +5,11 @@
     display: inline-flex;
 
     inline-size: fit-content;
+
+    max-inline-size: 100%;
+    min-inline-size: 0;
+
+    box-sizing: border-box;
     align-items: center;
 
     vertical-align: middle;
@@ -21,6 +26,13 @@
     white-space: nowrap;
   }
 
+  [data-slot="badge-label"] {
+    min-inline-size: 0;
+    overflow-x: clip;
+    overflow-y: visible;
+    text-overflow: ellipsis;
+  }
+
   @supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
     [data-slot="badge-label"] {
       text-box-trim: trim-both;