@godxjp/ui 31.15.0 → 31.16.0

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 31.15.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 31.16.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -47,7 +47,7 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    task is a task** — "build a settings page", "confirm a destructive delete", "a list page with
    filters" — start HERE, not at the components. Then fetch `patterns/<name>.json` for complete,
    copy-paste-ready code. A component index answers "does X exist"; it cannot answer "build Y".
-1. `components-index.json` — 48 KB, all 178 components as name + group +
+1. `components-index.json` — 48 KB, all 179 components as name + group +
    tagline. Read this when you already know the SHAPE you need. Each entry may carry `absorbed`:
    names that **do not exist** and map to it — `Combobox`, `Autocomplete`, `CountrySelect` and
    `SearchSelect` are all `Select`. If you are about to hand-roll something, search this field
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 50 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2121 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2126 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1806 `component` entries are per-part knobs; reach for one only when a role is
+   1811 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 104 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1806 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1811 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/TextDiff.json

@@ -0,0 +1,86 @@
+{
+  "example": "import { TextDiff } from \"@godxjp/ui/data-display\";\n\n<TextDiff before={row.previous_original} after={original} lang=\"ja\" />\n\n<TextDiff mode=\"split\" granularity=\"line\" before={previousBody} after={body} />",
+  "group": "data-display",
+  "importPath": "@godxjp/ui/data-display",
+  "name": "TextDiff",
+  "props": [
+    {
+      "description": "The earlier text (the original a translation was written against, the saved version).",
+      "name": "before",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "description": "The current text.",
+      "name": "after",
+      "required": true,
+      "type": "string"
+    },
+    {
+      "defaultValue": "\"inline\"",
+      "description": "inline — one flow with removals and additions in place (GitHub's unified view). split — two columns, before | after, with changed hunks aligned row by row and localized column headings.",
+      "name": "mode",
+      "type": "\"inline\" | \"split\""
+    },
+    {
+      "defaultValue": "\"auto\"",
+      "description": "The unit a change is measured in. auto = Intl.Segmenter words, with Han/Hiragana/Katakana/Hangul runs cut per character (no spaces to split on, and a dictionary word boundary moves when one particle changes). word = Intl.Segmenter words in `lang`. char = one grapheme cluster per token. line = whole lines.",
+      "name": "granularity",
+      "type": "\"auto\" | \"word\" | \"char\" | \"line\""
+    },
+    {
+      "defaultValue": "true",
+      "description": "Fold long unchanged runs of lines behind a localized 'show N unchanged lines' button.",
+      "name": "collapseUnchanged",
+      "type": "boolean"
+    },
+    {
+      "defaultValue": "2",
+      "description": "Unchanged lines kept visible beside each change when folding (git's -U<n>).",
+      "name": "contextLines",
+      "type": "number"
+    },
+    {
+      "defaultValue": "4000000",
+      "description": "LCS cost cap (tokens before × tokens after). Past it the changed middle is one removal plus one addition instead of freezing the tab.",
+      "name": "maxCells",
+      "type": "number"
+    },
+    {
+      "description": "Heading of the before column in split mode. Default: localized 'Before'.",
+      "name": "beforeLabel",
+      "type": "ReactNode"
+    },
+    {
+      "description": "Heading of the after column in split mode. Default: localized 'After'.",
+      "name": "afterLabel",
+      "type": "ReactNode"
+    },
+    {
+      "description": "BCP-47 language of the text — set on the element (screen-reader pronunciation, CJK font selection) and used as the Intl.Segmenter locale.",
+      "name": "lang",
+      "type": "string"
+    }
+  ],
+  "related": [
+    "CodeBlock — shows ONE preformatted text; TextDiff shows how two versions differ.",
+    "Text — `delete` / `mark` style a run you already chose; TextDiff decides the runs and announces them.",
+    "Timeline — the list of revisions; TextDiff is what one revision changed."
+  ],
+  "rules": [],
+  "storyPath": "data-display/TextDiff.stories.tsx",
+  "tagline": "What changed between two versions of a text — removed runs in <del>, added runs in <ins>, inline or side by side, per line / word / character, with CJK cut per character and long unchanged runs folded.",
+  "usage": [
+    "DO import from `@godxjp/ui/data-display`: `import { TextDiff } from \"@godxjp/ui/data-display\";`",
+    "DO pass the two raw strings — the component tokenizes, diffs (LCS) and renders. Use the exported `diffText(before, after, { granularity, lang })` only when you need the runs themselves (a change count, a plain-text export).",
+    "DO pass `lang` for the text's language, not the UI's: a Japanese original in an English UI still needs lang=\"ja\".",
+    "DO use mode=\"split\" when there is room for two columns and the texts are long; inline for a drawer, a list row or a narrow panel.",
+    "DON'T hand-roll a diff from `Text delete` / `Text mark` — those carry no spoken start/end label, so a screen reader reads the old and new words run together.",
+    "DON'T colour a run without its mark: removals are struck through and additions underlined, plus a visually hidden start/end label — colour is never the only carrier (WCAG 1.4.1)."
+  ],
+  "useCases": [
+    "A translation drawer: what changed in the original since this translation was written (old original → current original).",
+    "A document or wiki page revision history: one revision against the previous one.",
+    "A settings or template audit log: the previous value of a long text field against the new one."
+  ]
+}

package/agent/components-index.json

@@ -251,6 +251,11 @@
     "name": "Swatch",
     "tagline": "A READ-ONLY sample of ONE colour a person chose — a brand's primary_color, a calendar category, a tag tint. The colour is a VALUE on the element, never a token in a stylesheet."
   },
+  {
+    "group": "data-display",
+    "name": "TextDiff",
+    "tagline": "What changed between two versions of a text — removed runs in <del>, added runs in <ins>, inline or side by side, per line / word / character, with CJK cut per character and long unchanged runs folded."
+  },
   {
     "group": "data-display",
     "name": "FeatureList",

package/agent/components.json

@@ -4209,6 +4209,92 @@
       "A table cell whose column is 'colour' — one sample per row, named by the row header."
     ]
   },
+  {
+    "example": "import { TextDiff } from \"@godxjp/ui/data-display\";\n\n<TextDiff before={row.previous_original} after={original} lang=\"ja\" />\n\n<TextDiff mode=\"split\" granularity=\"line\" before={previousBody} after={body} />",
+    "group": "data-display",
+    "importPath": "@godxjp/ui/data-display",
+    "name": "TextDiff",
+    "props": [
+      {
+        "description": "The earlier text (the original a translation was written against, the saved version).",
+        "name": "before",
+        "required": true,
+        "type": "string"
+      },
+      {
+        "description": "The current text.",
+        "name": "after",
+        "required": true,
+        "type": "string"
+      },
+      {
+        "defaultValue": "\"inline\"",
+        "description": "inline — one flow with removals and additions in place (GitHub's unified view). split — two columns, before | after, with changed hunks aligned row by row and localized column headings.",
+        "name": "mode",
+        "type": "\"inline\" | \"split\""
+      },
+      {
+        "defaultValue": "\"auto\"",
+        "description": "The unit a change is measured in. auto = Intl.Segmenter words, with Han/Hiragana/Katakana/Hangul runs cut per character (no spaces to split on, and a dictionary word boundary moves when one particle changes). word = Intl.Segmenter words in `lang`. char = one grapheme cluster per token. line = whole lines.",
+        "name": "granularity",
+        "type": "\"auto\" | \"word\" | \"char\" | \"line\""
+      },
+      {
+        "defaultValue": "true",
+        "description": "Fold long unchanged runs of lines behind a localized 'show N unchanged lines' button.",
+        "name": "collapseUnchanged",
+        "type": "boolean"
+      },
+      {
+        "defaultValue": "2",
+        "description": "Unchanged lines kept visible beside each change when folding (git's -U<n>).",
+        "name": "contextLines",
+        "type": "number"
+      },
+      {
+        "defaultValue": "4000000",
+        "description": "LCS cost cap (tokens before × tokens after). Past it the changed middle is one removal plus one addition instead of freezing the tab.",
+        "name": "maxCells",
+        "type": "number"
+      },
+      {
+        "description": "Heading of the before column in split mode. Default: localized 'Before'.",
+        "name": "beforeLabel",
+        "type": "ReactNode"
+      },
+      {
+        "description": "Heading of the after column in split mode. Default: localized 'After'.",
+        "name": "afterLabel",
+        "type": "ReactNode"
+      },
+      {
+        "description": "BCP-47 language of the text — set on the element (screen-reader pronunciation, CJK font selection) and used as the Intl.Segmenter locale.",
+        "name": "lang",
+        "type": "string"
+      }
+    ],
+    "related": [
+      "CodeBlock — shows ONE preformatted text; TextDiff shows how two versions differ.",
+      "Text — `delete` / `mark` style a run you already chose; TextDiff decides the runs and announces them.",
+      "Timeline — the list of revisions; TextDiff is what one revision changed."
+    ],
+    "rules": [],
+    "storyPath": "data-display/TextDiff.stories.tsx",
+    "tagline": "What changed between two versions of a text — removed runs in <del>, added runs in <ins>, inline or side by side, per line / word / character, with CJK cut per character and long unchanged runs folded.",
+    "usage": [
+      "DO import from `@godxjp/ui/data-display`: `import { TextDiff } from \"@godxjp/ui/data-display\";`",
+      "DO pass the two raw strings — the component tokenizes, diffs (LCS) and renders. Use the exported `diffText(before, after, { granularity, lang })` only when you need the runs themselves (a change count, a plain-text export).",
+      "DO pass `lang` for the text's language, not the UI's: a Japanese original in an English UI still needs lang=\"ja\".",
+      "DO use mode=\"split\" when there is room for two columns and the texts are long; inline for a drawer, a list row or a narrow panel.",
+      "DON'T hand-roll a diff from `Text delete` / `Text mark` — those carry no spoken start/end label, so a screen reader reads the old and new words run together.",
+      "DON'T colour a run without its mark: removals are struck through and additions underlined, plus a visually hidden start/end label — colour is never the only carrier (WCAG 1.4.1)."
+    ],
+    "useCases": [
+      "A translation drawer: what changed in the original since this translation was written (old original → current original).",
+      "A document or wiki page revision history: one revision against the previous one.",
+      "A settings or template audit log: the previous value of a long text field against the new one."
+    ]
+  },
   {
     "docPath": "data-display/feature-list.tsx",
     "example": "import { FeatureList } from \"@godxjp/ui/data-display\";\n\n<FeatureList\n  items={[\n    { state: \"included\", label: \"SSO\", description: \"SAML と OIDC\" },\n    { state: \"limited\", label: \"API 呼び出し\", description: \"月 10,000 回まで\" },\n    { state: \"excluded\", label: \"監査ログのエクスポート\" },\n  ]}\n/>",

package/agent/index.json

@@ -1,16 +1,16 @@
 {
   "counts": {
     "anti-ai-tells": 26,
-    "components": 178,
+    "components": 179,
     "patterns": 21,
     "rules": 50,
-    "tokens": 2121,
+    "tokens": 2126,
     "vocabulary": 14
   },
   "files": [
     {
       "file": "components-index.json",
-      "note": "48 KB — name + group + tagline for all 178. FETCH THIS FIRST, then fetch only the components you chose.",
+      "note": "48 KB — name + group + tagline for all 179. FETCH THIS FIRST, then fetch only the components you chose.",
       "url": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json"
     },
     {
@@ -48,19 +48,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.15.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v31.16.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1806,
+      "component": 1811,
       "foundation": 211,
       "semantic": 104
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "31.15.0"
+  "version": "31.16.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 178 components, 2121 design tokens,
-> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.15.0.
+> A Japanese-enterprise React design system: 179 components, 2126 design tokens,
+> 50 cardinal rules. This file is the entry point for AI agents. Catalog version 31.16.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@31.15.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@31.16.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -15,10 +15,10 @@ that can only fetch URLs.
 ## Catalog
 
 - [patterns-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/patterns-index.json): 21 whole-task patterns (name, tagline, tags). Start here when the task is a TASK — "build a settings page" — then fetch `patterns/<name>.json` for complete code.
-- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 48 KB — all 178 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
+- [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 48 KB — all 179 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/&lt;Name&gt;.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–36 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.2 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1806 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 104 `semantic` roles, 1811 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 50 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v31.15.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v31.16.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -5651,6 +5651,36 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "TextDiff (gh#1096) — the grounds under a removed and an added run. The INK stays the text colour: the mark that carries the meaning is the strike-through / underline plus a spoken label, so the tint only has to separate the run from its neighbours. The grounds read the status surface role (gh#866) and fall back to the tone at these alphas.",
+    "name": "--text-diff-removed-background-alpha",
+    "tier": "component",
+    "value": "0.12"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--text-diff-added-background-alpha",
+    "tier": "component",
+    "value": "0.16"
+  },
+  {
+    "description": "The underline/strike weight — the resting hairline, so it survives forced-colors as ink.",
+    "name": "--text-diff-mark-line-width",
+    "tier": "component",
+    "value": "var(--stroke-hairline)"
+  },
+  {
+    "description": "Space between the before and after columns in split mode, and around a folded run.",
+    "name": "--text-diff-space-gap",
+    "tier": "component",
+    "value": "var(--space-3)"
+  },
+  {
+    "description": "Data-display component tokens — small-by-design text knobs (rule #45/#46).",
+    "name": "--text-diff-space-inset",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
   {
     "description": "Timeline accents — `initial` so the dot/line role defaults re-resolve under a scoped theme. ONE HUE down the whole progress column (gh#731): done, current and the travelled line all default to hsl(var(--primary)), the way Steps paints `finish` and `process`; current is told apart by its ring, not by a second role. To restore the pre-27.9 green/violet pairing, set the done dot's FILL and its INK together — the two roles have opposite ink polarity, so the fill alone leaves a near-white glyph on 若竹 green at 2.19:1 (gh#643): --timeline-dot-done-background: hsl(var(--success)); --timeline-dot-done-foreground: hsl(var(--success-foreground));",
     "name": "--timeline-dot-done-background",

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/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/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.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

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

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

@@ -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/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;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.15.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/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/i18n/messages/en.json

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

package/docs/i18n/messages/ja.json

@@ -1542,5 +1542,22 @@
       "comment": "グエン がコメント",
       "assignee": "田中 が担当者を変更"
     }
+  },
+  "textDiffDocs": {
+    "subtitle": "二つの版のテキストの差分を、削除と追加で示す",
+    "source": {
+      "title": "原文の変更を見る",
+      "description": "翻訳を書いた時点の原文と、いまの原文の差分です。日本語は一文字ずつ比べるので、助詞ひとつの変更でも文全体が変わったようには見えません。"
+    },
+    "policy": {
+      "title": "規程の改訂（左右に並べる）",
+      "description": "変更のない行は折りたたまれ、ボタンで開けます。削除は取り消し線、追加は下線で示し、色だけに頼りません。",
+      "before": "改訂前",
+      "after": "改訂後"
+    },
+    "words": {
+      "title": "英文は単語単位で",
+      "description": "スペースで区切られる言語は単語ごとに比べます。行単位にしたい場合は granularity=\"line\" を指定します。"
+    }
   }
 }

package/docs/i18n/messages/vi.json

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

package/package.json

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