iter(g269): 新增文本差异对比组件

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-26T14:52:17.882Z",
+  "generatedAt": "2026-10-26T14:53:11.893Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -221,7 +221,8 @@
           "highlight(props)：关键词高亮，命中片段包 mark（大小写不敏感全部命中），text / keyword 支持信号响应式刷新",
           "inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输",
           "layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定）",
-          "jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑"
+          "jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑",
+          "diffView(props)：文本差异对比，行级 LCS 对齐 + 增删着色 + 双行号列，顶部带 +N / −N 统计"
         ],
         "keyTypes": [
           "ButtonProps",
@@ -4204,6 +4205,41 @@
               "数组下标与对象键都走同一套行渲染，收起时右侧显示「3 项 / 2 个键」，先看规模再决定要不要展开",
               "要展示编辑结果时不要用它（只读）：输入侧请用 textarea，展示侧再交给 jsonViewer"
             ]
+          },
+          {
+            "id": "diffView",
+            "title": "文本差异对比 DiffView",
+            "demo": "sec-diff",
+            "props": [
+              {
+                "n": "before",
+                "t": "string",
+                "d": "旧文本（按行比对，CRLF 与 LF 等价）"
+              },
+              {
+                "n": "after",
+                "t": "string",
+                "d": "新文本"
+              },
+              {
+                "n": "showStats",
+                "t": "boolean",
+                "d": "是否在顶部显示 +N / −N 统计条；缺省 true"
+              },
+              {
+                "n": "ariaLabel",
+                "t": "string",
+                "d": "可访问名；缺省自动播报「新增 N 行，删除 M 行」"
+              }
+            ],
+            "example": "diffView({ before: oldText, after: newText })",
+            "steps": [
+              "把改前 / 改后两份文本整串交给 before 与 after：不用先切行，CRLF 与 LF 视为同一行",
+              "行级对齐先剪公共前后缀、再对中间段做 LCS：改两行不会把整篇标成差异",
+              "增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制",
+              "顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听",
+              "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对"
+            ]
           }
         ]
       },

AGENTS.md

@@ -21,7 +21,7 @@
 
 - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核
 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架
-- `packages/skin/ui`（@ui-arch/ui）：78 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
+- `packages/skin/ui`（@ui-arch/ui）：79 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌
 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌
 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private）
 - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html

ARCHITECTURE.md

@@ -34,7 +34,7 @@ ui-arch-mvp/
 │   │   ├── table-core/       # 表格状态内核
 │   │   └── frame/            # 信号 + hyperscript 微框架
 │   ├── skin/                 # 皮肤层（DOM 组件，可发布）
-│   │   └── ui/               # 78 个组件 + ui.css
+│   │   └── ui/               # 79 个组件 + ui.css
 │   ├── design/               # 资产层（可发布）
 │   │   └── tokens/           # --ua-* 设计令牌
 │   └── tools/                # 工程层（private，不发布）

README.md

@@ -12,13 +12,13 @@ npm run docs            # 生成人类文档站 apps/docs/index.html + Agent 全
 npm run changelog       # 依据 git 提交史重写 CHANGELOG.md（发版前跑；changelog:check 可查漂移）
 ```
 
-## 组件（共 78 个）
+## 组件（共 79 个）
 
 <!-- ua:components -->
-accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · copyButton · countdown · dataTable · datePicker · descriptions · divider · drawer · empty · floatButton · form · grid · highlight · image · inputNumber · inputTag · jsonViewer · kbd · layout · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark
+accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup · backTop · badge · breadcrumb · button · calendar · carousel · card · cascader · checkbox · checkboxGroup · colorPicker · commandPalette · copyButton · countdown · dataTable · datePicker · descriptions · diffView · divider · drawer · empty · floatButton · form · grid · highlight · image · inputNumber · inputTag · jsonViewer · kbd · layout · link · list · menu · modal · mentions · multiSelect · notification · pagination · pinInput · popover · popconfirm · progress · radioGroup · rate · result · segmented · select · skeleton · slider · space · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · timePicker · toast · tooltip · tour · transfer · tree · treeSelect · typography · upload · virtualList · watermark
 <!-- /ua:components -->
 
-分组：表单（button / copyButton / textField / inputNumber / inputTag / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic / countdown）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / jsonViewer / descriptions / card / list / kbd / highlight / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / layout / link / space / divider / splitter / backTop / affix / tour / watermark）。
+分组：表单（button / copyButton / textField / inputNumber / inputTag / textarea / checkbox / checkboxGroup / colorPicker / switchButton / select / mentions / multiSelect / radioGroup / slider / rate / autoComplete / datePicker / timePicker / pinInput / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic / countdown）、浮层（tooltip / popover / popconfirm / modal / drawer / menu / commandPalette）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree / treeSelect / anchor）、数据展示（dataTable / jsonViewer / diffView / descriptions / card / list / kbd / highlight / timeline / tag / avatar / avatarGroup / image / carousel / calendar / typography / virtualList）、其他（floatButton / grid / layout / link / space / divider / splitter / backTop / affix / tour / watermark）。
 
 ## 可访问性约定
 
@@ -34,7 +34,7 @@ accordion · affix · alert · anchor · autoComplete · avatar · avatarGroup
 |---|---|
 | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） |
 | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） |
-| `packages/skin/ui` | @ui-arch/ui：78 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
+| `packages/skin/ui` | @ui-arch/ui：79 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） |
 | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） |
 | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server |
 | `apps/demo` | 交互演示（esbuild 打包成单文件） |

apps/demo/main.ts

@@ -37,6 +37,7 @@ import {
   datePicker,
   transfer,
   descriptions,
+  diffView,
   divider,
   drawer,
   empty,
@@ -1739,6 +1740,31 @@ const content = h(
       maxHeight: 260,
     }),
   ),
+  section(
+    'sec-diff',
+    '文本差异对比',
+    'diffView：改前 / 改后整串丢进去——先剪公共前后缀再对中间段做 LCS，所以改两行不会把整篇标红；增删行同时有底色与 + / − 符号两条通道。',
+    diffView({
+      before: [
+        'export function sum(a, b) {',
+        '  return a + b;',
+        '}',
+        '',
+        '// 用法',
+        'sum(1, 2);',
+      ].join('\n'),
+      after: [
+        'export function sum(a, b) {',
+        "  if (typeof a !== 'number') throw new TypeError('a 必须是数字');",
+        '  return a + b;',
+        '}',
+        '',
+        '// 用法',
+        'sum(1, 2);',
+        "sum(1, '2');",
+      ].join('\n'),
+    }),
+  ),
 );
 
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-26T14:52:17.882Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-26T14:53:11.893Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -2233,6 +2233,31 @@ jsonViewer({ value: payload, depth: 2, rootLabel: 'response', maxHeight: 320 })
 
 现场演示：apps/docs/demo.html#sec-jsonviewer
 
+### diffView — 文本差异对比 DiffView
+
+参数：
+
+- before：string —— 旧文本（按行比对，CRLF 与 LF 等价）
+- after：string —— 新文本
+- showStats：boolean —— 是否在顶部显示 +N / −N 统计条；缺省 true
+- ariaLabel：string —— 可访问名；缺省自动播报「新增 N 行，删除 M 行」
+
+示例：
+
+```
+diffView({ before: oldText, after: newText })
+```
+
+手把手：
+
+1. 把改前 / 改后两份文本整串交给 before 与 after：不用先切行，CRLF 与 LF 视为同一行
+2. 行级对齐先剪公共前后缀、再对中间段做 LCS：改两行不会把整篇标成差异
+3. 增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制
+4. 顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听
+5. 超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对
+
+现场演示：apps/docs/demo.html#sec-diff
+
 API 速览：
 
 - button(props)：按钮，variant 三档视觉强度，disabled / loading 支持布尔或信号动态同步（loading 转圈并禁点），onClick 点击回调
@@ -2315,6 +2340,7 @@ API 速览：
 - inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输
 - layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定）
 - jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑
+- diffView(props)：文本差异对比，行级 LCS 对齐 + 增删着色 + 双行号列，顶部带 +N / −N 统计
 
 一行用法：
 

llms.txt

@@ -127,6 +127,7 @@
   - inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输
   - layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定）
   - jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑
+  - diffView(props)：文本差异对比，行级 LCS 对齐 + 增删着色 + 双行号列，顶部带 +N / −N 统计
 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
 - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号
 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调

packages/skin/ui/src/diffView.ts

@@ -0,0 +1,85 @@
+import { h } from '@ui-arch/frame';
+import type { DiffViewProps } from './types.js';
+
+// 一条差异：same 原样、add 只在右边、del 只在左边
+type DiffOp = { type: 'same' | 'add' | 'del'; text: string };
+// LCS 计算上限：中间段行数乘积超过这个值就退化为「整段替换」，避免大文件把主线程卡住
+const DP_LIMIT = 400_000;
+
+/*** 切行：末尾换行不产生一行空内容（否则每个文件都会多出一条假的空行差异） ***/
+function toLines(text: string): string[] {
+  const lines = text.split(/\r?\n/);
+  if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop(); // 尾部换行忽略
+  return lines;
+}
+
+/*** 中间段做 LCS 对齐：先剪掉公共前后缀，剩下的才真算，日常改动只占几行 ***/
+function alignMiddle(a: string[], b: string[]): DiffOp[] {
+  if (!a.length || !b.length) return [...a.map((text) => ({ type: 'del' as const, text })), ...b.map((text) => ({ type: 'add' as const, text }))];
+  if (a.length * b.length > DP_LIMIT) return [...a.map((text) => ({ type: 'del' as const, text })), ...b.map((text) => ({ type: 'add' as const, text }))]; // 超限：整段替换，语义仍正确
+  const dp: number[][] = Array.from({ length: a.length + 1 }, () => new Array<number>(b.length + 1).fill(0)); // dp[i][j]：a 前 i 行与 b 前 j 行的 LCS 长度
+  for (let i = a.length - 1; i >= 0; i -= 1) {
+    for (let j = b.length - 1; j >= 0; j -= 1) {
+      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+  const ops: DiffOp[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) { ops.push({ type: 'same', text: a[i] }); i += 1; j += 1; continue; }
+    if (dp[i + 1][j] >= dp[i][j + 1]) { ops.push({ type: 'del', text: a[i] }); i += 1; continue; }
+    ops.push({ type: 'add', text: b[j] }); j += 1;
+  }
+  for (; i < a.length; i += 1) ops.push({ type: 'del', text: a[i] });
+  for (; j < b.length; j += 1) ops.push({ type: 'add', text: b[j] });
+  return ops;
+}
+
+/*** 逐行差异：剪公共前后缀后对齐中间段，输出完整 same / add / del 序列 ***/
+function diffLines(before: string, after: string): DiffOp[] {
+  const a = toLines(before);
+  const b = toLines(after);
+  let head = 0;
+  while (head < a.length && head < b.length && a[head] === b[head]) head += 1; // 公共前缀
+  let tail = 0;
+  while (tail < a.length - head && tail < b.length - head && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail += 1; // 公共后缀
+  const midA = a.slice(head, a.length - tail);
+  const midB = b.slice(head, b.length - tail);
+  return [
+    ...a.slice(0, head).map((text) => ({ type: 'same' as const, text })),
+    ...alignMiddle(midA, midB),
+    ...a.slice(a.length - tail).map((text) => ({ type: 'same' as const, text })),
+  ];
+}
+
+/*** 文本差异对比：行级对齐 + 增删着色 + 双行号列，超限时退化为整段替换（只影响精度不影响语义） ***/
+export function diffView(props: DiffViewProps): HTMLElement {
+  const ops = diffLines(props.before, props.after);
+  const added = ops.filter((o) => o.type === 'add').length; // 新增行数：统计条与读屏共用
+  const removed = ops.filter((o) => o.type === 'del').length; // 删除行数
+  let oldNo = 0;
+  let newNo = 0;
+  const rows = ops.map((op) => {
+    if (op.type !== 'add') oldNo += 1; // same 与 del 占旧行号
+    if (op.type !== 'del') newNo += 1; // same 与 add 占新行号
+    const sign = op.type === 'add' ? '+' : op.type === 'del' ? '−' : ' ';
+    return h(
+      'div',
+      { class: `ua-diff-row is-${op.type}` },
+      h('span', { class: 'ua-diff-no' }, op.type === 'add' ? '' : String(oldNo)),
+      h('span', { class: 'ua-diff-no' }, op.type === 'del' ? '' : String(newNo)),
+      h('span', { class: 'ua-diff-sign', 'aria-hidden': 'true' }, sign),
+      h('span', { class: 'ua-diff-text' }, op.text || ' '),
+    );
+  });
+  const stats = props.showStats === false
+    ? null
+    : h('div', { class: 'ua-diff-stats' }, h('span', { class: 'ua-diff-add' }, `+${added}`), h('span', { class: 'ua-diff-del' }, `−${removed}`));
+  return h(
+    'div',
+    { class: 'ua-diff', role: 'group', 'aria-label': props.ariaLabel ?? `文本差异：新增 ${added} 行，删除 ${removed} 行` },
+    stats,
+    h('div', { class: 'ua-diff-body' }, ...rows),
+  );
+}

packages/skin/ui/src/index.ts

@@ -78,3 +78,4 @@ export { highlight } from './highlight.js';
 export { inputTag } from './inputTag.js';
 export { layout } from './layout.js';
 export { jsonViewer } from './jsonViewer.js';
+export { diffView } from './diffView.js';

packages/skin/ui/src/types.ts

@@ -1030,3 +1030,11 @@ export interface JsonViewerProps {
   maxHeight?: number;              // 最高高度（px），超出在框内滚动；缺省不限高
   ariaLabel?: string;              // 可访问名；缺省「JSON 数据」
 }
+
+/*** 文本差异对比入参 ***/
+export interface DiffViewProps {
+  before: string;                  // 旧文本（按行比对，CRLF 与 LF 等价）
+  after: string;                   // 新文本
+  showStats?: boolean;             // 是否在顶部显示 +N / −N 统计条；缺省 true
+  ariaLabel?: string;              // 可访问名；缺省自动播报「新增 N 行，删除 M 行」
+}

packages/skin/ui/ua.manifest.json

@@ -92,7 +92,8 @@
       "highlight(props)：关键词高亮，命中片段包 mark（大小写不敏感全部命中），text / keyword 支持信号响应式刷新",
       "inputTag(props)：标签输入，输入后回车 / 逗号成标签、chip 可单个删除、空框退格删末个，value 信号双向绑定，max 满额自动禁输",
       "layout(props, ...children)：布局骨架，页头 / 侧栏 / 内容 / 页脚四区一次成型，侧栏可折叠（collapsed 信号双向绑定）",
-      "jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑"
+      "jsonViewer(props)：JSON 树查看，按层折叠、分支带计数摘要、叶子按类型着色，只读不编辑",
+      "diffView(props)：文本差异对比，行级 LCS 对齐 + 增删着色 + 双行号列，顶部带 +N / −N 统计"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -4075,6 +4076,41 @@
           "数组下标与对象键都走同一套行渲染，收起时右侧显示「3 项 / 2 个键」，先看规模再决定要不要展开",
           "要展示编辑结果时不要用它（只读）：输入侧请用 textarea，展示侧再交给 jsonViewer"
         ]
+      },
+      {
+        "id": "diffView",
+        "title": "文本差异对比 DiffView",
+        "demo": "sec-diff",
+        "props": [
+          {
+            "n": "before",
+            "t": "string",
+            "d": "旧文本（按行比对，CRLF 与 LF 等价）"
+          },
+          {
+            "n": "after",
+            "t": "string",
+            "d": "新文本"
+          },
+          {
+            "n": "showStats",
+            "t": "boolean",
+            "d": "是否在顶部显示 +N / −N 统计条；缺省 true"
+          },
+          {
+            "n": "ariaLabel",
+            "t": "string",
+            "d": "可访问名；缺省自动播报「新增 N 行，删除 M 行」"
+          }
+        ],
+        "example": "diffView({ before: oldText, after: newText })",
+        "steps": [
+          "把改前 / 改后两份文本整串交给 before 与 after：不用先切行，CRLF 与 LF 视为同一行",
+          "行级对齐先剪公共前后缀、再对中间段做 LCS：改两行不会把整篇标成差异",
+          "增删行同时有底色与行首 + / − 符号两条通道，色盲用户也能分辨；行号列不参与复制",
+          "顶部统计条给 +N / −N，读屏在容器上直接播报同一组数字，不必逐行听",
+          "超大文本（中间段行数乘积超过 40 万）会退化成「整段替换」——语义仍对，只是不再逐行对齐；要逐行对齐就先分段比对"
+        ]
       }
     ]
   }

packages/skin/ui/ui.css

@@ -4994,7 +4994,8 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 .ua-cmdk-list,
 .ua-timepicker-col,
 .ua-layout-content,
-.ua-json {
+.ua-json,
+.ua-diff {
   scrollbar-width: thin; /* 标准属性：Firefox / Chromium 121+ 生效，细条不挤内容 */
   scrollbar-color: var(--ua-color-scrollbar) transparent; /* 拇指走令牌、轨道透明，避免画出方块底 */
 }
@@ -5555,3 +5556,76 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
     color: GrayText;
   }
 }
+
+/* ---- 文本差异对比：增删只靠底色 + 符号双通道，色盲用户也能分辨（符号列 aria-hidden，读屏靠底色语义类） ---- */
+.ua-diff {
+  overflow: auto;
+  border: 1px solid var(--ua-border-subtle);
+  border-radius: var(--ua-radius-md);
+  background: var(--ua-color-surface);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 等宽：差异对齐才看得出来 */
+  font-size: var(--ua-font-size-sm);
+  line-height: var(--ua-leading-normal);
+}
+
+.ua-diff-stats {
+  display: flex;
+  gap: var(--ua-space-3);
+  padding: var(--ua-space-2) var(--ua-space-3);
+  border-bottom: 1px solid var(--ua-border-subtle);
+  background: var(--ua-color-surface-inset);
+  font-size: var(--ua-font-size-xs);
+}
+
+/* 统计条两个数字与行底色同源：+ 走成功色、− 走危险色，不另造一套色 */
+.ua-diff-add {
+  color: var(--ua-color-success);
+}
+
+.ua-diff-del {
+  color: var(--ua-color-danger);
+}
+
+.ua-diff-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ua-space-2);
+  padding: 0 var(--ua-space-3);
+  white-space: pre; /* 缩进与空格是差异的一部分，不能被折行压平 */
+}
+
+.ua-diff-no {
+  flex: 0 0 auto;
+  min-width: var(--ua-space-6);
+  color: var(--ua-color-text-faint);
+  font-size: var(--ua-font-size-xs);
+  text-align: right;
+  user-select: none; /* 行号不进复制内容：复制差异时只带走代码 */
+}
+
+.ua-diff-sign {
+  flex: 0 0 auto;
+  width: var(--ua-space-3);
+  color: var(--ua-color-text-faint);
+  text-align: center;
+}
+
+.ua-diff-text {
+  flex: 1 1 auto;
+}
+
+.ua-diff-row.is-add {
+  background: color-mix(in srgb, var(--ua-color-success) var(--ua-alpha-tint), transparent);
+}
+
+.ua-diff-row.is-add .ua-diff-sign {
+  color: var(--ua-color-success);
+}
+
+.ua-diff-row.is-del {
+  background: color-mix(in srgb, var(--ua-color-danger) var(--ua-alpha-tint), transparent);
+}
+
+.ua-diff-row.is-del .ua-diff-sign {
+  color: var(--ua-color-danger);
+}