agentcss 0.0.0-stage → 0.11.2

package/04-recipes/table/table.css

@@ -0,0 +1,372 @@
+/* ============================================================================
+   table.css — 数据表格（B1 /
+   ============================================================================
+   ⭐ 某项目 最需要的组件：几百行财务数据，没它就没法看。
+
+   三条硬要求（缺一就不算"能上线"）：
+     ① **粘性表头**：横向滚动时必须知道"这一列是什么"
+     ② **数字列右对齐 + tabular-nums**：不对齐的数字没法竖着比大小
+     ③ **空 / 加载 / 出错三态齐全**：只画表格的组件，一半场景没法用
+
+   ⚠️ 不做虚拟滚动（那是独立）——
+     本组件的定位是「结构正确 + 状态齐全 + 粘性可用」，
+     行数上限交给调用方判断（> 200 行请配合分页或虚拟滚动）。
+   ============================================================================ */
+
+.table {
+  position: relative;
+  overflow: auto;                    /* 横向滚动容器 */
+  max-height: var(--table-max-h, 70vh);
+  background: var(--surface);
+  border: 1px solid var(--border-decor);
+  border-radius: var(--r-md);
+  /* ⚠️ 圆角 + overflow:auto 会让 sticky 表头的角上露白
+     ⇒ 表头自带背景色，不透明，问题自然消失 */
+}
+
+.table table {
+  width: 100%;
+  border-collapse: separate;         /* 🔴 sticky 需要 separate（不是 collapse）*/
+  border-spacing: 0;
+  font-size: var(--fs-sm);
+}
+
+/* ---------- ① 粘性表头 ---------- */
+.table thead th {
+  /* 🔴 position:sticky 必须配 border-collapse:separate，否则浏览器里不生效 */
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);          /* 走令牌，不写死 */
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  font-weight: 600;
+  text-align: start;
+  white-space: nowrap;
+  padding: var(--sp-2) var(--sp-3);
+  border-bottom: 1px solid var(--border-decor);
+}
+
+/* 排序按钮：表头可点排序时用它 */
+.table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  min-height: 32px;                  /* 表头内可点区（不是 44，见 README 说明）*/
+  padding: 0 var(--sp-1);
+  margin: 0 calc(-1 * var(--sp-1));
+  background: none;
+  border: 0;
+  border-radius: var(--r-xs, 3px);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* 🔴 修正：原来 fallback 写死了 `#1b4d8f`（被 contract-kit 抓到）
+   ⇒ 换主题时这个环不会跟着变。
+   ⇒ 焦点环令牌定义在 01-tokens/focus-ring.css：
+        --focus-ring-width / --focus-ring-offset / --focus-ring-color(=var(--accent))
+   ⇒ 直接用令牌，**不给 fallback**（缺令牌时要能立刻发现，而不是悄悄变蓝）。 */
+.table__sort:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.table__sort::after {
+  content: "↕";                      /* 未排序：上下双向箭头 */
+  opacity: .45;
+  font-size: .9em;
+}
+
+/* 🔴🔴 排序指示符：三态必须**同时**用形状 + 颜色表达（WCAG 1.4.1）
+   --------------------------------------------------------------------
+   外部评审 VIZ-REPORT-01 · P1-1 实测到的缺陷：
+     demo 把 `aria-sort` 放在**外围 <th>** 上（这是符合 ARIA 规范的写法），
+     而这里的旧选择器要求它长在**按钮自己**身上 ⇒ 选择器永远匹配不上
+     ⇒ 数据明明排好了，箭头一直是"↕"。
+     更糟的是当时的门禁 table-check.js 只检查了"aria-sort 在不在 th 上"，
+     ⇒ 结构对了、结果错了，门禁还是绿的。**只看结构不看结果，就是这么翻车的。**
+
+   ⇒ 修法是把选择器改成"从 th 往下找按钮"，而不是把 aria-sort 搬到按钮上
+     （那会违反 ARIA：`aria-sort` 属于 columnheader / rowheader 角色）。
+
+   ⚠️ 为什么**两种位置都支持**：本库是给别人抄的，外部集成方完全可能写在
+     按钮上（写错一次不值得付出"整列失去排序线索"的代价）。
+     ⇒ 两条选择器并存，任何一种写法都能把箭头点亮。 */
+.table th[aria-sort="ascending"] .table__sort::after,
+.table__sort[aria-sort="ascending"]::after {
+  content: "↑";
+  opacity: 1;
+}
+
+.table th[aria-sort="descending"] .table__sort::after,
+.table__sort[aria-sort="descending"]::after {
+  content: "↓";
+  opacity: 1;
+}
+
+/* ---------- 行 ---------- */
+.table tbody td,
+.table tbody th {
+  padding: var(--sp-2) var(--sp-3);
+  text-align: start;
+  border-bottom: 1px solid var(--border-decor);
+  vertical-align: top;
+}
+
+.table tbody tr:last-child td { border-bottom: 0; }
+
+/* 行高亮：只对真能悬停的设备（触屏上 hover 会"粘住"）*/
+@media (hover: hover) and (pointer: fine) {
+  .table tbody tr:hover { background: var(--surface-sunken); }
+}
+
+/* ---------- ② 数字列：右对齐 + 等宽数字 ---------- */
+.table .num {
+  text-align: end;
+  /* ⭐ tabular-nums：让每个数字占同样宽 ⇒ 可以竖着比大小
+     这是「财务表格」和「装饰表格」的分界线 */
+  font-variant-numeric: tabular-nums;
+  font-family: var(--mono);
+  white-space: nowrap;
+}
+
+/* 正负号用颜色 + 符号双线索（不能只靠红绿）*/
+.table .num--pos { color: var(--success); }
+.table .num--neg { color: var(--danger); }
+.table .num--pos::before { content: "+"; }   /* ⭐ 符号是第二线索 */
+.table .num--neg::before { content: "−"; }   /* ⭐ 用真正的减号，不是连字符 */
+
+/* ---------- ③ 三态 ---------- */
+.table__empty,
+.table__error,
+.table__loading {
+  padding: var(--sp-7) var(--sp-4);
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: var(--fs-sm);
+}
+
+.table__empty { background: var(--surface-sunken); }
+.table__error  { background: var(--surface-sunken); color: var(--danger); }
+.table__loading { color: var(--text-tertiary); }
+
+/* 加载态：骨架条（配 aria-busy，容器有语义）*/
+.table__bar {
+  height: 8px;
+  margin: var(--sp-2) auto;
+  max-width: 220px;
+  background: var(--surface-sunken);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .table__bar::after {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 40%;
+    background: var(--accent-soft);
+    border-radius: 999px;
+    animation: table-shimmer 1.2s var(--ease-in-out, ease-in-out) infinite;
+  }
+  @keyframes table-shimmer {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(250%); }
+  }
+}
+
+/* 空态里的行动入口 */
+.table__empty .btn,
+.table__error .btn { margin-top: var(--sp-3); }
+
+/* ---------- 窄屏：表格横向滚动，不挤压列 ---------- */
+.table--compact { font-size: var(--fs-xs); }
+.table--compact thead th,
+.table--compact tbody td { padding: var(--sp-1) var(--sp-2); }
+
+/* ============================================================================
+   表题 / 脚注 / 来源
+   ============================================================================
+   学术与统计表格要求"这张表是什么、数据从哪来"与表本身绑在一起，
+   不能只靠正文的一句话。⇒ 用 <caption>（表题）+ 表后脚注两块表达。
+   ============================================================================ */
+.table__cap {
+  caption-side: top;
+  text-align: start;
+  padding: var(--sp-2) var(--sp-3);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+}
+
+.table__foot {
+  margin: var(--sp-2) 0 0;
+  padding: 0 var(--sp-1);
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+  line-height: 1.6;
+}
+.table__foot ol { margin: 0; padding-inline-start: var(--sp-4); }
+
+/* ============================================================================
+   多级表头
+   ============================================================================
+   🔴 多级表头不是"多画一行 <th>"就完事：
+      屏幕阅读器靠 scope / id / headers 把单元格和它真正的表头对上。
+      只画两层 <tr> 而不标 scope ⇒ 读屏读到"3.2"时不知道它是哪一列的。
+      ⇒ 样式只负责让它看起来是两层，**语义由 HTML 负责**（见 demo.html）。
+   ============================================================================ */
+.table thead tr + tr th {
+  /* 第二层表头：贴近第一层，靠上边框区分而不是加粗字号 */
+  top: 2.4em;                        /* 跟着第一层 sticky 一起粘 */
+  font-weight: 500;
+  font-size: var(--fs-xs);
+  color: var(--text-tertiary);
+  border-bottom: 1px solid var(--border-decor);
+}
+
+/* 分组表头（跨列）居中，让"这两列属于同一组"看得出来 */
+.table thead th[colspan] {
+  text-align: center;
+  border-inline-start: 1px solid var(--border-decor);
+}
+.table thead th[colspan]:first-child { border-inline-start: 0; }
+
+/* ============================================================================
+   预设一：业务 / 财务数据表（默认观感的明确化）
+   ============================================================================
+   重点：数字比较、金额精度、单位、负数、正负号语义。
+   单位写在**列头**而不是每个单元格里 —— 一列重复 20 次"万元"只会增加噪音。
+   ============================================================================ */
+.table--financial thead th { white-space: nowrap; }
+/* 行表头（公司名等）不换行 —— 换来换去会让整张表的行高参差，难竖着读 */
+.table--financial tbody th { white-space: nowrap; }
+
+/* 🔴 数值列的**列头必须与数字同侧**（右对齐）：<th> 默认 center，而数字是 end
+   ⇒ 列头「2021」居中、下面的「1,095」靠右，两者不在一条竖线上，列数和行长
+      越极端错位越明显（五年表实测错开约半个列宽）。会计排版与 Excel「会计格式」
+      都是"表头与数据同侧"。⚠️ 只改 financial：三线表的表头居中是学科惯例。 */
+.table--financial thead th:not(:first-child) { text-align: end; }
+
+/* ============================================================================
+   🔴 单位在列头的写法 —— 跟着学科规范走，不是随手设计（0.8.5）
+   ============================================================================
+   依据（五处权威口径一致，不是"我觉得"）：
+     · GB/T 7713.2-2022《学术论文编写规则》5.5.4
+         「表头栏目的标注应正确、齐全」；同时用量与单位表示时采用
+         「**量的符号或名称/单位符号**」的标准化形式
+     · CY/T 170—2019《学术出版规范 表格》
+         表头标注形式为「量的名称或符号/单位符号」；
+         且「表身中单元格内的数值**不宜带单位**」
+     · Science（Author Guidelines）
+         "Every vertical column should have a heading, **followed by a unit of
+         measure (if any) in parentheses**"
+     · IEEE Standards Style Manual 14.3.1
+         "Units of measure shall always be provided ... **in parentheses**, or
+         preceded by a solidus in the column headings [E (V) or E/V]"
+     · 三线表通行做法：项目栏 =「量的名称 +（单位）」，同栏单位不得变化
+
+   🔴 为什么原来不对（用户指出的问题）：
+     原来 `.table__unit` 是「小一号 + 更浅的灰」，**贴在列名后面**。
+     两点都不合规范：
+       ① **字号更小** ⇒ 视觉上像"这是两样东西"，而不是"这是列名的单位"
+       ② **没有括号** ⇒ 国标/IEEE/Science 三方都要求 `列名 (单位)` 或 `列名/单位`，
+          裸写 `抗拉强度 MPa` 不符合「量的名称/单位符号」的标准化形式
+     规范做法：`抗拉强度 (MPa)` —— 单位带括号、同字号、
+     与列名成组从同一条线起排 ⇒ 竖着读数列时视线只走一条直线。
+   ============================================================================ */
+.table__unit {
+  font-weight: 400;
+  /* 🔴 不再缩小：字号差会造成"这是两样东西"的错觉。
+     规范里单位与列名同字号（可选斜体区分）。 */
+  font-size: inherit;
+  color: var(--text-secondary);
+  /* ① 单位与列名之间留一个空格，避免「抗拉强度MPa」读起来粘连 */
+  margin-inline-start: 0.35em;
+  /* ② 🔴 关键：整组不拆行 —— 规范要求单位紧跟列名，
+     折行会让"这一列叫什么"变难读 */
+  white-space: nowrap;
+}
+
+/* 🔴 缺失值：既不是 0，也不是空字符串 —— 必须看得出"这里没数据" */
+.table .num--na,
+.table .cell--na {
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+/* ============================================================================
+   预设二：学术出版表格（三线表）
+   ============================================================================
+   为什么不是"把财务表改成灰的"：
+   论文表格的读者要**逐格比对数值**，竖线和斑马纹会干扰视线；
+   三线表只留顶线、表头下线、底线三条，把注意力留给数字本身。
+   ============================================================================ */
+.table--academic {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  max-height: none;                  /* 三线表不滚动：它应当完整呈现 */
+}
+.table--academic table { background: transparent; }
+
+.table--academic thead th {
+  background: transparent;
+  color: var(--text-primary);
+  font-weight: 600;
+  border-top: 2px solid var(--border-decor-str);
+  border-bottom: 1px solid var(--border-decor);
+  position: static;                  /* 不滚动 ⇒ 不需要 sticky */
+}
+.table--academic thead tr + tr th {
+  font-weight: 400;
+  border-top: 0;
+  border-bottom: 1px solid var(--border-decor);
+}
+.table--academic tbody td,
+.table--academic tbody th {
+  border-bottom: 0;                  /* 行间不画线 */
+}
+.table--academic tbody tr:last-child td,
+.table--academic tbody tr:last-child th {
+  border-bottom: 1px solid var(--border-decor);   /* 底线 */
+}
+@media (hover: hover) and (pointer: fine) {
+  .table--academic tbody tr:hover { background: transparent; }
+}
+
+/* ============================================================================
+   预设三：统计 / 实验结果表
+   ============================================================================
+   🔴 这些列的格式**不能**交给通用数字格式化：
+      · 估计值与其标准误是**两个数**，不是"一个带括号的字符串"
+      · 置信区间是**区间**，不是两个独立数字
+      · p 值有自己的书写惯例（< .001 不写 0.000）
+   组件只负责把它们放在各自的语义位置，**不替调用方计算显著性**。
+   ============================================================================ */
+.table--stats .stat__se {            /* 标准误：次级信息，弱化 */
+  color: var(--text-tertiary);
+  font-size: var(--fs-xs);
+}
+.table--stats .stat__p {             /* p 值：等宽且右对齐 */
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+}
+.table--stats .stat__p--sig {        /* 达到显著性水平：加粗（不只靠颜色） */
+  font-weight: 700;
+  color: var(--text-primary);
+}
+.table--stats .stat__ci {            /* 置信区间：方括号是它的语义符号 */
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* ---------- 窄屏：表格横向滚动，不挤压列 ---------- */
+/* ---------- 打印：去掉粘性（打印时不需要）---------- */
+@media print {
+  .table { max-height: none; overflow: visible; }
+  .table thead th { position: static; }
+  .table--academic thead th { border-top: 2px solid var(--text-primary); }
+}

package/04-recipes/tierA-tokens.css

@@ -0,0 +1,189 @@
+/* ============================================================================
+   精简档 专用：内联用令牌（某项目 / 单文件）
+   ============================================================================
+   本文件由 `python 05-audit/make-tiersnippet.py` 从 01-tokens/tokens.css
+   **自动抽取**，请不要手改 —— 改源头，然后重新生成。
+
+   🔴 它为什么存在：
+      charter 一直写着"精简档 只需复制 tokens.css 的 [核心] 段"，
+      但**那个区块从来不存在**。复用的人照着做只会找不到。
+      这个文件就是那个"核心"，真的、能复制、能用。
+
+   体积：浅色 102 个令牌 + 暗色 33 个，零外链零构建。
+   --------------------------------------------------------------------- */
+
+:root {
+
+  --paper:            #f6f7f8;
+  --surface:          #ffffff;
+  --surface-sunken:   #f1f3f5;
+  --surface-raised:   #ffffff;
+
+  --scrollbar-size:      10px;
+  --scrollbar-size-thin: 6px;
+  --scrollbar-thumb:     #7A808A;
+  --scrollbar-thumb-hov: #6E747E;
+  --scrollbar-radius:    5px;
+
+  --text-primary:     #15181c;
+  --text-secondary:   #4f555e;
+  --text-tertiary:    #606770;
+  --text-on-accent:   #ffffff;
+
+  --text-on-solid:    #ffffff;
+  --skeleton-bg:       #e9ecef;
+  --skeleton-shimmer:   rgba(255, 255, 255, 0.72);
+  --skeleton-h:         1em;
+  --skeleton-size:      40px;
+  --skeleton-duration:  1.4s;
+  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
+  --progress-h:      6px;
+  --progress-dur:    240ms;
+  --r-full:          999px;
+  --ring-size:       64px;
+  --ring-thickness:  8px;
+  --progress:        0%;
+  --progress-num:    0;
+
+  --z-popover:        60;
+  --popover-min-w:    200px;
+  --popover-max-w:    320px;
+  --popover-p:        12px;
+  --popover-gap:      8px;
+  --popover-dur:      140ms;
+
+  --border-control:   #868b94;
+  --border-decor:     #e2e5e9;
+  --border-decor-str: #c8cdd4;
+
+  --danger:           #c0392b;
+  --danger-hover:     #8f1e17;
+  --scrim:            rgba(21, 24, 28, 0.4);
+  --success:          #2f6b3a;
+  --warning:          #8a5a00;
+  --info:             #1d5f8a;
+
+  --danger-bg:        #fdeeec;
+  --success-bg:       #eaf2e6;
+  --warning-bg:       #fbf1dd;
+  --info-bg:          #e8f1f8;
+
+  --accent:           #1b4d8f;
+  --switch-on:         #1b4d8f;
+  --accent-hover:     #163a6d;
+  --accent-soft:      #e6eef7;
+
+  --tooltip-bg:       #15181c;
+  --tooltip-fg:       #f6f7f8;
+  --tooltip-border:   #15181c;
+
+  --sp-1:  4px;
+  --sp-2:  8px;
+  --sp-3:  12px;
+  --sp-4:  clamp(1rem,     0.95rem + 0.3vw,  1.25rem);
+  --sp-5:  clamp(1.25rem,  1.15rem + 0.7vw,  1.75rem);
+  --sp-6:  clamp(1.5rem,   1.3rem  + 1.2vw,  2.25rem);
+  --sp-7:  clamp(2rem,     1.7rem  + 1.8vw,  3.5rem);
+  --sp-8:  clamp(2.5rem,   2.1rem  + 2.4vw,  4.5rem);
+
+  --bp-sm: 30rem;
+  --bp-md: 48rem;
+  --bp-lg: 64rem;
+  --bp-xl: 80rem;
+
+  --fs-xs:   0.75rem;
+  --fs-sm:   0.875rem;
+  --fs-base: clamp(1rem,       0.95rem + 0.3vw,  1.125rem);
+  --fs-md:   clamp(1.125rem,   1.05rem + 0.5vw,  1.3125rem);
+  --fs-lg:   clamp(1.3125rem,  1.2rem  + 0.7vw,  1.5rem);
+  --fs-xl:   clamp(1.5rem,     1.3rem  + 1.2vw,  1.875rem);
+  --fs-2xl:  clamp(1.75rem,    1.45rem + 1.8vw,  2.5rem);
+
+  --lh-tight:  1.25;
+  --lh-base:   1.7;
+  --lh-loose:  1.85;
+
+  --measure-page: 52rem;
+
+  --tracking-title: -0.02em;
+
+  --r-sm:    6px;
+  --r-xs:    3px;
+  --r-md:   10px;
+  --r-lg:   14px;
+  --r-pill: 999px;
+
+  --shadow-1: 0 1px 2px rgba(31, 29, 25, 0.05), 0 1px 3px rgba(31, 29, 25, 0.06);
+  --shadow-2: 0 2px 4px rgba(31, 29, 25, 0.05), 0 6px 16px rgba(31, 29, 25, 0.08);
+
+  --dur-fast:  120ms;
+  --dur-base:  180ms;
+  --dur-slow:  280ms;
+
+  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
+  --lift-sm: 1px;
+  --lift-md: 2px;
+  --lift-lg: 8px;
+
+  --z-base:    0;
+  --z-sticky: 10;
+  --z-header: 20;
+  --z-raised:  5;
+  --z-overlay: 30;
+  --z-modal:  40;
+  --z-toast:  50;
+
+  --sz-touch:    44px;
+  --sz-touch-sm: 32px;
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+:root:not([data-theme="light"]) {
+  --paper:           #14171A;
+  --surface:         #1C2024;
+  --surface-raised:  #232830;
+  --surface-sunken:  #1A1D21;
+
+  --scrollbar-thumb:     #6E747E;
+  --scrollbar-thumb-hov: #7D828A;
+
+  --border-decor:     #2A3038;
+  --border-decor-str: #3A424C;
+  --border-control:   #8A9099;
+
+  --text-primary:    #E4E7EA;
+  --text-secondary:  #AEB6C0;
+  --text-tertiary:   #9BA3AD;
+  --text-on-accent:  #0D1114;
+  --text-on-solid:   #0D1114;
+  --skeleton-bg:       #2E343C;
+  --skeleton-shimmer:   rgba(255, 255, 255, 0.06);
+
+  --danger:          #E07A6E;
+  --danger-hover:    #F09A90;
+  --danger-bg:       #341D1A;
+  --success:         #6FAA7A;
+  --success-bg:      #16241A;
+  --warning:         #C99A3F;
+
+  --warning-bg:      #242A31;
+  --info:            #5B9BC4;
+  --info-bg:         #13242F;
+
+  --accent:          #7AA9DE;
+  --switch-on:       #3E6EA8;
+  --accent-hover:    #8FB8E6;
+  --accent-soft:     #1C2C3D;
+
+  --tooltip-bg:      #232830;
+  --tooltip-fg:      #E4E7EA;
+  --tooltip-border:  #2A3038;
+
+  --scrim:           rgba(0, 0, 0, 0.62);
+}
+}

package/09-assets/README.md

@@ -0,0 +1,74 @@
+# 素材（图表与可视化）
+
+> 这一层放**按需取用**的可视化能力 —— 用哪个拿哪个，互不牵连。
+> 本库**不内置图标**；需要图形时怎么加，见文末。
+
+## 这一层有什么
+
+<!-- ==== ASSET-LIST-BEGIN ==== -->
+| 目录 | 它解决什么 |
+|---|---|
+| `09-assets/bar/` | 柱状图，含 charter 13 图表规范的裁剪铁律 |
+| `09-assets/echarts-adapter/` | 把令牌喂给 ECharts，按需引入；本库不含 ECharts |
+| `09-assets/model-viewer/` | 惰性加载的 3D 模型查看器 |
+| `09-assets/scientific-plot/` | 二维科学绘图：坐标轴 / 误差棒 / 置信区间带 / 对数轴 |
+| `09-assets/sparkline/` | 迷你趋势线，没有坐标轴的走势提示 |
+<!-- ==== ASSET-LIST-END ==== -->
+
+> 上面这张表由 `python 05-audit/fix-start-here.py` 生成，与 `ai/START-HERE.md` 同源。
+> 新增目录后先在那份脚本里补一句「它解决什么」，再跑脚本。
+
+每个目录下都有 `demo.html`。起个静态服务就能直接看：
+
+```bash
+python -m http.server 8000
+# 然后打开 http://127.0.0.1:8000/09-assets/sparkline/demo.html
+```
+
+## 图标：本库不内置，需要就自己内联
+
+要"关闭""警告""箭头"这类图形时，**一律内联 SVG** ——
+不引图标字体、不引图片文件。三条都是硬收益：
+
+- **零外部请求** —— 不能外链的页面（精简档）依然能用
+- 颜色随 `currentColor`，**暗色模式自动跟随**
+- 描边粗细随字号变，不会出现"小图标过粗、大图标过细"
+
+反例（不要这样做）：
+
+```html
+<!-- ❌ 引入字体：一个大文件 + FOUT + 违反零外部资产 -->
+<link rel="stylesheet" href="//cdn.example.com/icons.css">
+<i class="icon icon-close"></i>
+
+<!-- ❌ 引入图片：无法跟随 currentColor，暗色模式下要换图 -->
+<img src="close.png" alt="">
+```
+
+### 规格
+
+按下面这套参数内联，与 Lucide 混用看不出接缝：
+
+```
+viewBox   0 0 24 24
+width     1em          ← 跟随字号，不是固定 px
+height    1em
+fill      none
+stroke    currentColor
+stroke-width  2
+stroke-linecap  round
+stroke-linejoin round
+```
+
+图标本体请自备：从 [lucide.dev](https://lucide.dev) 取（**ISC 协议**，商用无需署名），
+按上面规格内联进页面即可。本库不提供图标文件，也不设图标目录。
+
+## 一条已经做过的决定
+
+**不做"签名图标"**（本库自画的品牌性图形）。
+
+画过 3 个后停了，原因不是画不好，而是**没有使用场景**：
+全库没有任何地方引用它们 —— 有真实场景才画得出来，脱离场景画出来的图形读不出概念。
+
+⇒ 什么时候再做：等真出现一个现成图标库没有、而我们确实需要的概念时，画那一个。
+在那之前，先把现成图标用起来更有价值。