agentcss 0.0.0-stage → 0.11.2

package/03-patterns/form-validation/form-validation.css

@@ -0,0 +1,263 @@
+/* ============================================================================
+   frontend-lib / 03-patterns / form-validation / form-validation.css
+   表单校验
+
+   依赖：01-tokens/tokens.css  +  02-primitives/input/input.css
+   版本：A ✅ / B ✅ / C ✅
+
+   🔴 本组件只做"编排"，不重定义输入框 —— 那是 input 的事。
+      这里负责三件 input 管不了的事：
+        1. 校验时机（什么时候才报错了）
+        2. 错误汇总（提交失败时怎么让人一次看到全部问题）
+        3. 焦点管理（提交失败后焦点去哪）
+   ========================================================================= */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+}
+
+.form__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-5);
+}
+
+.form__actions {
+  display: flex;
+  gap: var(--sp-3);
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: var(--sp-2);
+  border-top: 1px solid var(--border-decor);
+}
+
+/* ============================================================================
+   1. 错误汇总 —— 提交失败时必做
+   =========================================================================
+   🔴 这是 WCAG 3.3.1（错误识别）和 3.3.3（错误建议）的落点。
+
+   为什么必须有：
+   一个 12 字段的表单，3 个字段错了。错误提示分散在各字段下方时，
+   用户要上下扫、自己数"还错几个"、猜"上面那个是不是也错了"。
+   汇总把三件事一次说清：有几处错了 / 分别是哪里 / 怎么改。
+   ========================================================================= */
+.form__summary {
+  /* 🔴 改成**一行且宽度按内容**（要求：错误多的时候提示太大，
+     应该收窄，然后放到一行去就可以了）。
+     原来是 column 竖排：标题一行 + <ul> 里每项一行 ⇒ 错 5 处就占 7 行。
+     现在 inline-flex：整条提示只占一行，宽度由内容决定。
+     —— 信息量没变（几处 / 哪几处 / 可点击跳转），但**占用的竖向空间从 O(n) 变成 O(1)**。 */
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--sp-2) var(--sp-3);
+  max-width: 100%;
+  padding: var(--sp-3) var(--sp-4);
+  background: var(--danger-bg);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+}
+
+/* 🔴 去掉 `border: 1px solid danger` + `border-left: 4px solid`。
+   原来那两条的理由写得很清楚：「左边框加粗，色弱用户也能靠"这里有个条"发现它」。
+   **这个理由本身是对的，但手段选错了** ——
+     4px 竖条在页面上拉出一条与内容无关的硬边，视觉噪声大于信息量。
+   改用**图标**承担同一份职责：同样让色弱用户一眼看到"这里出错了"，
+   但它跟着文字走，不会形成横贯页面的竖线。 */
+.form__summary::before {
+  content: "!";
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: var(--sp-2);
+  border-radius: 50%;
+  background: var(--danger);
+  /* 🔴 同上：暗色下 danger 变亮 ⇒ 白叹号看不清。 */
+  color: var(--text-on-accent);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.form__summary-title {
+  margin: 0;
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--danger);   /* 6.26 AA on danger-bg */
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+
+/* 汇总里每条都是可点击的链接，点了跳到对应字段并聚焦它。
+   <a href="#field-id"> 天然支持键盘和"复制链接"，比 <div onclick> 好。 */
+  /* 🔴 汇总条目不再包 <ul>，直接是并列的 <a>。
+     <ul> 的竖排是"提示占满竖向空间"的元凶。 */
+  .form__summary-link + .form__summary-link { margin-inline-start: var(--sp-1); }
+
+.form__summary-link {
+  display: inline-block;
+  color: var(--danger);
+  font-size: var(--fs-sm);
+  text-decoration: underline;
+  text-underline-offset: 2px;   /* 下划线离字远一点，中文小字更易读 */
+  text-decoration-thickness: 1px;
+}
+@media (hover: hover) and (pointer: fine) {
+.form__summary-link:hover { color: var(--text-primary); }
+}
+.form__summary-link:focus-visible {
+  outline: 2px solid var(--danger);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* ============================================================================
+   2. 校验时机 —— 本组件最关键的判断
+   =========================================================================
+   🔴 不要在 oninput 时报错。
+
+   用户刚开始打字，字段就变红 —— 打到一半全是红字，用户根本不知道自己
+   哪里错了，也不敢继续打。这个反馈是纯噪音，甚至会让人放弃填表。
+
+   正确时机（三层）：
+     a) onblur        —— 字段失焦时校验一次（用户已经输完一段了）
+     b) 之后才实时    —— 字段"脏"过之后（用户回来修改）才实时报错
+     c) onsubmit     —— 提交时全量校验，并弹出错误汇总
+
+   "脏"用 `data-dirty` 标记，由 JS 加。CSS 只负责让脏字段的错误显示出来。
+
+   🔴 这里刻意**不用 `:has()`**（写第一版时用了，是错的）：
+      一是把"何时校验"这个逻辑硬塞进样式层，行为不可测；
+      二是 `:has()` 属 CSS Level 4，兼容性不稳 —— 某项目 上的 WebView
+      版本不确定，精简档 不能冒这个险。
+      控制权交给 JS：字段校验后由 JS 加 `data-dirty`，CSS 只认这个属性。
+
+   ⚠️ 为什么是 `data-dirty` 而不是 `data-state="dirty"`：
+      `data-state` 是"这个组件当前处于哪个枚举状态"（open/closed/…），
+      "脏"是**正交标记**（一个字段可以同时是 dirty 且 state=invalid）。
+      塞进同一个属性 ⇒ 两个维度互斥，表达不了组合。
+   ------------------------------------------------------------------------ */
+.field__error { display: none; }
+.field[data-dirty] .field__error { display: flex; }
+
+/* 错误汇总展开时，全部错误强制显示，不管字段脏不脏 —— 那是用户主动要看清单。
+   ⚠️ 原来这里是 `.form--has-summary .field__error`（不带 :not(:empty)），
+   它会把**空元素也显示出来** —— 于是没填错的字段下方挂着空红点。
+   实测反馈"下方的红点一直存在"，根因就在这里。 */
+.form--has-summary .field__error:not(:empty) { display: flex; }
+
+/* 🔴 兜底（必须放在上面两条**之后**）：**没有文字的错误提示一律不显示**。
+   `[data-dirty]` 只表示"这个字段被校验过"，**不表示"它现在有错"**。
+   以前没内容时看不出问题（空元素不渲染任何东西），
+   加了错误图标之后，空元素会露出一个圆点。
+
+   🔴 教训：我第一次把这条写在**上面**，被后面同优先级的
+   `.form--has-summary .field__error` 覆盖掉了，等于没写。
+   **兜底规则必须放在它要约束的所有规则之后**，否则会被吃掉。 */
+.field__error:empty { display: none; }
+
+/* 错误图标 —— 兑现 README「三条线索」里的第 2 条（红边框 + 叹号 + 错误文字）。
+   🔴 补的：README 一直这么写，但实现里一直缺这一条
+   （审核时才发现"文档承诺 ≠ 实现存在"）。
+
+   为什么不用 Unicode 符号（❌ ⚠ 等）：
+   缺字会渲染成**空心方框（tofu）**，而且小尺寸下与实心符号肉眼难分。
+   `!` 是 ASCII，任何字体都有，**不可能缺字**。
+
+   为什么画成圆底而不直接放一个叹号：
+   直接放字符在小字号下会像"多了一个字"，不像"这是个状态标记"。 */
+.field__error::before {
+  content: "!";
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-inline-end: var(--sp-1);
+  border-radius: 50%;
+  background: var(--danger);
+  /* 🔴 暗色下底色变亮，写死的白字会看不清。 */
+  color: var(--text-on-accent);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* ============================================================================
+   3. 提交成功后的焦点去向
+   =========================================================================
+   提交成功后焦点必须**移走**。留在提交按钮上，用户按 Enter 会重复提交。
+   移到成功提示上，让屏幕阅读器读出来。
+   ------------------------------------------------------------------------ */
+.form__notice {
+  padding: var(--sp-4) var(--sp-5);
+  background: var(--success-bg);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-sm);
+  color: var(--text-primary);
+}
+
+/* ============================================================================
+   4. 校验中的状态（异步校验，比如"检查用户名是否可用"）
+   =========================================================================
+   🔴 别让输入框变灰或禁用 —— 用户会以为不能打字了。
+   正确做法：保持可输入，在旁边显示一个小小的 pending 指示。
+   ------------------------------------------------------------------------ */
+.field--checking .field__input::after { content: ""; }   /* 占位，禁止改用 padding 挤压 */
+.field__checking-hint {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-1);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+.field__checking-hint::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border-control);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: form-spin 700ms linear infinite;
+}
+@keyframes form-spin { to { transform: rotate(360deg); } }
+
+/* ============================================================================
+   reduced-motion
+   =========================================================================
+   与库内其他规则一致：原地旋转的 spinner 保留但放慢（停了以为卡死）。
+   ========================================================================= */
+@media (prefers-reduced-motion: reduce) {
+  .field__checking-hint::before { animation-duration: 1.2s !important; }
+}
+
+/* ============================================================================
+   反模式
+   =========================================================================
+   1. oninput 时实时报错
+      用户刚开始打字就一片红，噪音，且会让人放弃填表。
+
+   2. 没有错误汇总
+      12 个字段错 3 个，用户要自己数、自己找。WCAG 3.3.1 要求错误可识别。
+
+   3. 汇总里的条目用 <div onclick> 跳转
+      键盘不可达。用 <a href="#id">。
+
+   4. 提交失败后焦点不动
+      焦点还留在提交按钮，用户按 Enter 又提交一次。必须移到汇总上。
+
+   5. 提交成功后焦点不动
+      同上，会重复提交。移到成功提示上。
+
+   6. 异步校验时禁用输入框
+      用户以为不能打字了。保持可输入，旁边给小提示。
+
+   7. 错误文案只说"格式错误"
+      3.3.3 要求给修正建议。要写"最多两位小数，例如 12.34"，
+      不要写"格式错误"或"非法输入"。
+   ========================================================================= */

package/03-patterns/list/README.md

@@ -0,0 +1,150 @@
+# list —— 列表
+
+| 字段 | 内容 |
+|---|---|
+| **来源** | 原创。FLIP 原理是公开技术，无第三方代码 |
+| **实测** | `demo.html` 四种交互可实际操作；JS 语法经 `node --check` 验证 |
+| **适用** | 精简档 / B / C，`flip.js` 为 ES5 |
+| **依赖** | `01-tokens/tokens.css` + `02-primitives/button/button.css` `03-patterns/states/states.css`（空状态用 `.state--empty`） + `01-tokens/typography.css`（`.note` 提示框） + `01-tokens/page.css`（页面骨架：`.wrap` / `.lede` / `.note`） |
+
+---
+
+## 🔴 为什么不用 auto-animate
+
+评估过 auto-animate（8 KB min+gzip，精简档 装得下，MIT 协议），
+但列表真正需要的只有**"增删时其余项平滑移动"**这一件事。
+
+| | auto-animate | 自己写 FLIP |
+|---|---|---|
+| 体积 | ~8 KB | **~1.5 KB** |
+| 协议尽调 | 必需 | **零风险** |
+| 依赖风险 | 供应链 / 更新 | 无 |
+| 能力 | 增删改 + 颜色 + 尺寸 + 表单值 | 只做平滑移动 |
+
+**为不需要的能力引入 8 KB 第三方，要承担协议尽调与供应链风险，不划算。**
+（协议已核实：MIT，无条款冲突。但核实这件事本身就花掉了 70 行 + 3 波调研，
+而且对方发新版时还要重新判断——这是持续的维护成本，不是一次性的。）
+
+---
+
+## FLIP 四步
+
+```
+First   记录变化前的位置（getBoundingClientRect）
+Last    DOM 变化后记录新位置
+Invert   用 transform 反向偏移回去（视觉上"没动"）
+Play    过渡到 transform: 0（看起来平滑滑过去）
+```
+
+### 用法
+
+```js
+FLIP.flip(listEl, function () {
+  listEl.removeChild(row);          // 任意 DOM 改动
+});
+```
+
+```js
+FLIP.remove(listEl, rowEl, function () {
+  // 退场动画结束、元素已从 DOM 移除，此时再触发其余项的 FLIP 重排
+});
+```
+
+🔴 **顺序很关键**：`FLIP.remove` 先让被删的行淡出**并留在原位**，
+等它退场完毕再重排。直接先删再动画，其余项会瞬间跳过去，没有补间。
+
+### 必须给每个项一个 `data-flip-id`
+
+```html
+<li class="list__item" data-flip-id="r42">…</li>
+```
+
+它是 FLIP 识别"这是同一个项"的**唯一依据**。缺了动画静默失效。
+
+---
+
+## 三个关键判断
+
+### 1. hover 绝不能让内容跳动
+
+```css
+.list__item { border-left: 2px solid transparent; }   /* 预留位 */
+.list__item:hover { border-left-color: var(--border-decor-str); }  /* 只改颜色 */
+```
+
+如果写成"hover 时才加 `border-left`"，内容会**横移 2px**——列表"在抖"。
+**border 的宽度必须始终占位。**
+
+### 2. Tab 不为每一行多停一次
+
+```css
+.list__item:focus-within { border-left-color: var(--accent); }
+```
+
+**不给整行加 `tabindex="0"`**。那样 20 行的列表，键盘用户要按 20 次 Tab 才能穿过。
+行内按钮本身可聚焦就够了，用 `:focus-within` 给整行视觉反馈。
+
+🔴 **配套要求**：行内操作用 `opacity: 0` 隐藏，**绝不能用 `display:none` /
+`visibility:hidden`** —— 那会让"删除"按钮从 tab 顺序消失，键盘用户永远到不了。
+
+### 3. 涨跌色用**红涨绿跌**
+
+```css
+.list__value--up   { color: var(--danger);  }  /* 涨 = 红 */
+.list__value--down { color: var(--success); }  /* 跌 = 绿 */
+```
+
+🔴 与欧美惯例相反，是**刻意的**——本库面向中国 A 股用户，做反了会被当成数据出错。
+
+---
+
+## reduced-motion：跳过，不是缩短
+
+```js
+if (prefersReducedMotion()) { return; }   // 直接到最终态
+```
+
+**"省略"优于"缩短"**。位置直接跳到最终态，不是"用 1ms 过渡"。
+
+CSS 里另外关掉 hover 等微交互过渡——那是**不同层次**，别漏。
+
+---
+
+## 窄屏：行内操作必须常显
+
+```css
+@media (max-width: 34rem) {
+  .list__actions { width: 100%; opacity: 1; }
+}
+```
+
+触屏**没有 hover**，操作会彻底消失。
+
+---
+
+## 反模式
+
+- ❌ **hover 时加 border / 改 padding** —— 内容横移，列表在抖
+- ❌ **整行加 `tabindex="0"`** —— Tab 为每行多停一次
+- ❌ **行内操作用 `display:none`** —— 从 tab 顺序消失，键盘到不了
+- ❌ **缺 `data-flip-id`** —— 动画静默失效，且**不报错**
+- ❌ **先删元素再动画** —— 其余项瞬间跳位，没有补间
+- ❌ **长文本直接换行** —— 行高跳变，破坏列表节奏。用 `ellipsis` + `title`
+- ❌ **涨跌色按欧美习惯** —— 会被当成数据出错
+- ❌ **窄屏仍隐藏行内操作** —— 触屏没有 hover
+- ❌ **reduced-motion 下"缩短"动画** —— 应当完全跳过
+
+---
+
+## 门禁能查与查不到的
+
+| 项 | 能否机械检查 |
+|---|---|
+| class 引用完整性 | ✅ `refs.py` |
+| JS 语法 | ✅ `node --check`（**不启动浏览器，零负载**）|
+| 动画是否真的顺 | ❌ **必须真机看** |
+| hover 是否真的不抖 | ❌ **必须真机看** |
+| `data-flip-id` 是否齐全 | ❌ 目前靠人工，`refs.py` 查不了 |
+
+🔴 **诚实标注**：本 pattern 的核心价值（动画顺不顺、抖不抖）**静态检查查不出来**。
+`demo.html` 的第一屏就是让你自己看的。

package/03-patterns/list/demo.html

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>列表 · 增删的平滑过渡</title>
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+<link rel="stylesheet" href="../../02-primitives/button/button.css">
+<link rel="stylesheet" href="../../03-patterns/states/states.css">
+<link rel="stylesheet" href="list.css">
+<style>
+.standfirst { font-size: var(--fs-md); color: var(--text-secondary);
+                max-width: var(--measure-lede); line-height: 1.55; margin: 0 0 var(--sp-6); }
+p { max-width: var(--measure-prose); margin: 0 0 var(--sp-3); }
+p.small { font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.65; }
+.bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
+</style>
+</head>
+<body class="page page">
+<main class="wrap">">
+
+  <h1>删掉一行，其余行不该瞬移</h1>
+  <p class="standfirst">
+    列表增删最容易做砸的地方不是动画本身，是<strong>动画缺失</strong>——
+    项目瞬间跳位，用户还没看清删了哪条，下一秒已经找不到刚才在看的内容。
+  </p>
+
+  <div class="bar">
+    <button class="btn btn--sm btn--primary" id="add">添加一条</button>
+    <button class="btn btn--sm btn--secondary" id="sort">按记录数排序</button>
+    <button class="btn btn--sm btn--secondary" id="reverse">按名称倒序</button>
+    <button class="btn btn--sm btn--ghost" id="clear">清空</button>
+  </div>
+
+  <ul class="list" id="list" role="list"></ul>
+
+  <!-- 空状态：删光后显示，容器位置不变所以不跳动 -->
+  <div id="empty" hidden>
+    <div class="state state--empty">
+      <div class="state__icon" aria-hidden="true">□</div>
+      <h3 class="state__title">工作区里没有实体了</h3>
+      <p class="state__desc">导入一份 CSV，或者从沪深 300 全池里选一个起始集合。</p>
+      <div class="state__action">
+        <button class="btn btn--sm btn--primary" id="reload">导入 CSV</button>
+      </div>
+    </div>
+  </div>
+
+  <h2>请试这四件事</h2>
+
+  <p>
+    <strong>1. 删中间任意一条。</strong>上下两行会<strong>平滑滑过去</strong>，
+    不是瞬间跳位。盯着两行之间的缝隙看。
+  </p>
+  <p>
+    <strong>2. 点"按记录数排序"。</strong>整列重排，每一行各自从旧位置滑到新位置——
+    这也是 FLIP，只是位移不为零。
+  </p>
+  <p>
+    <strong>3. 鼠标横着扫过列表。</strong>行<strong>不会抖</strong>。
+    做法是左侧线用 <code>transparent</code> 预留 2px，hover 时只改颜色；
+    如果 hover 才加 border，内容会横移 1–2px，一眼能看出"在抖"。
+  </p>
+  <p>
+    <strong>4. 键盘 Tab 进列表。</strong>整行会亮起左边线——但 <strong>Tab 不会为每一行多停一次</strong>，
+    只在行内按钮上停。这是 <code>:focus-within</code> 的用途。
+  </p>
+
+  <h2>为什么不用 auto-animate</h2>
+  <div class="note">
+    评估过 auto-animate（8 KB min+gzip，精简档 装得下），但列表真正需要的
+    只有"增删时其余项平滑移动"这一件事——<strong>为此引入 8 KB 第三方，
+    要承担协议尽调与供应链风险，不划算</strong>。<br><br>
+    <code>flip.js</code> 用 <strong>FLIP</strong>（First-Last-Invert-Play）四步做这件事，
+    约 40 行，<strong>零依赖</strong>。顺带保证了 <code>prefers-reduced-motion</code>
+    下是<strong>完全跳过</strong>而不是"缩短"——位置直接到最终态。
+  </div>
+
+  <h2>涨跌色说明</h2>
+  <p class="small">
+    本库用<strong>红涨绿跌</strong>，与中国 A 股用户习惯一致。
+    这一点与欧美惯例相反，是刻意的——做反了会被当成数据出错。
+  </p>
+
+</main>
+
+<script src="flip.js"></script>
+<script>
+// 真实数据（某项目 企业分析工作区，WS_95 导入公司）——不是 User 123
+var SEED = [
+  { name: '中国平安',  rec: 26831, sector: '金融',     chg:  2.41 },
+  { name: '宁德时代',  rec: 19204, sector: '工业',     chg: -0.87 },
+  { name: '招商银行',  rec: 31556, sector: '金融',     chg:  1.13 },
+  { name: '比亚迪',    rec: 28912, sector: '工业',     chg:  3.69 },
+  { name: '长江电力',  rec: 17443, sector: '公用事业', chg: -1.24 },
+  { name: '中芯国际',  rec: 15827, sector: '半导体',   chg:  5.02 },
+  { name: '恒瑞医药',  rec: 16205, sector: '医药',     chg: -0.45 },
+  { name: '五粮液',    rec: 14188, sector: '消费',     chg:  1.87 }
+];
+
+var EXTRA = [
+  { name: '美的集团',  rec: 24310, sector: '家电',     chg:  0.64 },
+  { name: '兴业银行',  rec: 27905, sector: '金融',     chg: -0.31 },
+  { name: '海康威视',  rec: 18734, sector: '电子',     chg:  2.11 }
+];
+
+var list = document.getElementById('list');
+var emptyBox = document.getElementById('empty');
+var data = SEED.slice();
+var seq = 100;
+
+function esc(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;'); }
+
+/* 千分位。🔴 不用 toLocaleString —— 老 WebView 上行为不一致，
+   有些会返回带窄不换行空格（U+202F）的字符串，反而更糟。 */
+function num(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+/* closest 的兼容回退。老 WebView（尤其 IE 系）没有 Element.closest。 */
+function closestOf(node, sel) {
+  if (node && node.closest) { return node.closest(sel); }
+  while (node && node !== document.body) {
+    if (node.getAttribute && node.getAttribute('data-del') !== null) { return node; }
+    node = node.parentNode;
+  }
+  return null;
+}
+
+function rowHtml(d) {
+  var id = d.id;
+  var dir = d.chg >= 0 ? 'up' : 'down';
+  var sign = d.chg >= 0 ? '+' : '';
+  /* 🔴 data-flip-id 是 FLIP 识别"同一个项"的唯一依据，缺了它动画整个失效。
+     <li> + .list__item 也必须有：容器是 <ul>，子元素必须是 <li>。 */
+  return '<li class="list__item" data-flip-id="' + id + '">' +
+    '<span class="list__main">' +
+      '<span class="list__title" title="' + esc(d.name) + '">' + esc(d.name) + '</span>' +
+      '<span class="list__meta">' + num(d.rec) +
+        ' 条记录 · ' + esc(d.sector) + '</span></span>' +
+    '<span class="list__value num list__value--' + dir + '">' +
+      sign + d.chg.toFixed(2) + '%</span>' +
+    '<span class="list__actions">' +
+      '<button class="btn btn--sm btn--ghost" data-del="' + id + '">移除</button>' +
+    '</span></li>';
+}
+
+function paint() {
+  // 一次性重建（真实项目里会做增量 diff；这里保持可读）
+  var html = '';
+  for (var i = 0; i < data.length; i++) { html += rowHtml(data[i]); }
+  list.innerHTML = html;
+  emptyBox.hidden = data.length > 0;
+}
+
+function repaint(mutate) {
+  FLIP.flip(list, function () {
+    mutate();
+    var html = '';
+    for (var i = 0; i < data.length; i++) { html += rowHtml(data[i]); }
+    list.innerHTML = html;
+    emptyBox.hidden = data.length > 0;
+  });
+}
+
+// 初始化：给每条一个稳定 id（FLIP 靠它识别"同一个项"）
+for (var i = 0; i < data.length; i++) { data[i].id = 'r' + (++seq); }
+
+// 事件委托：一次绑定，处理所有行
+list.addEventListener('click', function (e) {
+  var btn = closestOf(e.target, '[data-del]');
+  if (!btn || !btn.getAttribute) return;
+  var id = btn.getAttribute('data-del');
+  var victim = null;
+  for (var i = 0; i < data.length; i++) { if (data[i].id === id) victim = data[i]; }
+  if (!victim) return;
+
+  var node = list.querySelector('[data-flip-id="' + id + '"]');
+  var keep = victim;
+
+  // 先让被删的行淡出并留在原位，等它退场完毕再触发 FLIP 重排
+  FLIP.remove(list, node, function () {
+    repaint(function () {
+      for (var k = 0; k < data.length; k++) {
+        if (data[k].id === keep.id) { data.splice(k, 1); break; }
+      }
+    });
+  });
+});
+
+document.getElementById('add').onclick = function () {
+  var d = EXTRA.shift() || { name: '新增实体 ' + (seq), rec: 10000 + seq, sector: '未分类', chg: 0 };
+  d.id = 'r' + (++seq);
+  repaint(function () { data.unshift(d); });
+};
+
+document.getElementById('sort').onclick = function () {
+  repaint(function () {
+    data.sort(function (a, b) { return b.rec - a.rec; });
+  });
+};
+
+document.getElementById('reverse').onclick = function () {
+  repaint(function () {
+    data.sort(function (a, b) { return a.name.localeCompare(b.name, 'zh-Hans-CN'); });
+  });
+};
+
+document.getElementById('clear').onclick = function () {
+  repaint(function () { data = []; });
+};
+
+document.getElementById('reload').onclick = function () {
+  data = SEED.slice();
+  for (var i = 0; i < data.length; i++) { data[i].id = 'r' + (++seq); }
+  paint();
+};
+
+paint();
+</script>
+</body>
+</html>