agentcss 0.0.0-stage → 0.11.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/01-tokens/README.md +236 -0
  2. package/01-tokens/behavior/dismissable.js +132 -0
  3. package/01-tokens/behavior/emit.js +76 -0
  4. package/01-tokens/behavior/focus-return.js +81 -0
  5. package/01-tokens/behavior/roving.js +152 -0
  6. package/01-tokens/behavior/typeahead.js +124 -0
  7. package/01-tokens/focus-ring-demo.html +133 -0
  8. package/01-tokens/focus-ring.css +102 -0
  9. package/01-tokens/page.css +244 -0
  10. package/01-tokens/polyfill.js +116 -0
  11. package/01-tokens/responsive-demo.html +171 -0
  12. package/01-tokens/scrollbar-demo.html +194 -0
  13. package/01-tokens/scrollbar.css +179 -0
  14. package/01-tokens/theme-toggle.js +103 -0
  15. package/01-tokens/tokens.css +972 -0
  16. package/01-tokens/typography.css +156 -0
  17. package/02-primitives/badge/README.md +71 -0
  18. package/02-primitives/badge/badge.css +141 -0
  19. package/02-primitives/badge/demo.html +101 -0
  20. package/02-primitives/button/README.md +99 -0
  21. package/02-primitives/button/button.css +353 -0
  22. package/02-primitives/button/demo.html +200 -0
  23. package/02-primitives/card/README.md +145 -0
  24. package/02-primitives/card/card.css +246 -0
  25. package/02-primitives/card/demo.html +170 -0
  26. package/02-primitives/choice/README.md +161 -0
  27. package/02-primitives/choice/choice.css +395 -0
  28. package/02-primitives/choice/demo.html +277 -0
  29. package/02-primitives/combobox/README.md +79 -0
  30. package/02-primitives/combobox/combobox.css +223 -0
  31. package/02-primitives/combobox/combobox.js +485 -0
  32. package/02-primitives/combobox/demo.html +109 -0
  33. package/02-primitives/date-range/README.md +100 -0
  34. package/02-primitives/date-range/date-range.css +206 -0
  35. package/02-primitives/date-range/date-range.js +301 -0
  36. package/02-primitives/date-range/demo.html +104 -0
  37. package/02-primitives/input/README.md +170 -0
  38. package/02-primitives/input/demo.html +246 -0
  39. package/02-primitives/input/input.css +239 -0
  40. package/02-primitives/popover/README.md +80 -0
  41. package/02-primitives/popover/demo.html +150 -0
  42. package/02-primitives/popover/popover.css +187 -0
  43. package/02-primitives/popover/popover.js +331 -0
  44. package/02-primitives/progress/README.md +82 -0
  45. package/02-primitives/progress/demo.html +154 -0
  46. package/02-primitives/progress/progress.css +172 -0
  47. package/02-primitives/select/README.md +95 -0
  48. package/02-primitives/select/demo.html +121 -0
  49. package/02-primitives/select/select.css +151 -0
  50. package/02-primitives/select/select.js +549 -0
  51. package/02-primitives/separator/README.md +63 -0
  52. package/02-primitives/separator/demo.html +84 -0
  53. package/02-primitives/separator/separator.css +73 -0
  54. package/02-primitives/skeleton/README.md +69 -0
  55. package/02-primitives/skeleton/demo.html +110 -0
  56. package/02-primitives/skeleton/skeleton.css +96 -0
  57. package/02-primitives/switch/README.md +65 -0
  58. package/02-primitives/switch/demo.html +115 -0
  59. package/02-primitives/switch/switch.css +370 -0
  60. package/03-patterns/accordion/README.md +121 -0
  61. package/03-patterns/accordion/accordion.css +453 -0
  62. package/03-patterns/accordion/accordion.js +369 -0
  63. package/03-patterns/accordion/demo.html +223 -0
  64. package/03-patterns/content/README.md +103 -0
  65. package/03-patterns/content/content.css +286 -0
  66. package/03-patterns/content/demo.html +88 -0
  67. package/03-patterns/drawer/README.md +79 -0
  68. package/03-patterns/drawer/demo.html +101 -0
  69. package/03-patterns/drawer/drawer.css +129 -0
  70. package/03-patterns/drawer/drawer.js +258 -0
  71. package/03-patterns/dropdown/README.md +78 -0
  72. package/03-patterns/dropdown/demo.html +101 -0
  73. package/03-patterns/dropdown/dropdown.css +135 -0
  74. package/03-patterns/dropdown/dropdown.js +451 -0
  75. package/03-patterns/form-validation/README.md +147 -0
  76. package/03-patterns/form-validation/demo.html +280 -0
  77. package/03-patterns/form-validation/form-validation.css +263 -0
  78. package/03-patterns/list/README.md +150 -0
  79. package/03-patterns/list/demo.html +225 -0
  80. package/03-patterns/list/flip.js +201 -0
  81. package/03-patterns/list/list.css +162 -0
  82. package/03-patterns/nav/README.md +225 -0
  83. package/03-patterns/nav/demo.html +131 -0
  84. package/03-patterns/nav/nav.css +314 -0
  85. package/03-patterns/nav/nav.js +430 -0
  86. package/03-patterns/nav/toc.js +111 -0
  87. package/03-patterns/overlay/README.md +196 -0
  88. package/03-patterns/overlay/demo.html +241 -0
  89. package/03-patterns/overlay/overlay.css +319 -0
  90. package/03-patterns/overlay/overlay.js +563 -0
  91. package/03-patterns/pagination/README.md +114 -0
  92. package/03-patterns/pagination/demo.html +165 -0
  93. package/03-patterns/pagination/pagination.css +195 -0
  94. package/03-patterns/pagination/pagination.js +395 -0
  95. package/03-patterns/reveal/README.md +91 -0
  96. package/03-patterns/reveal/demo.html +106 -0
  97. package/03-patterns/reveal/reveal.css +93 -0
  98. package/03-patterns/reveal/reveal.js +172 -0
  99. package/03-patterns/states/README.md +141 -0
  100. package/03-patterns/states/demo.html +240 -0
  101. package/03-patterns/states/states.css +252 -0
  102. package/03-patterns/tabs/README.md +84 -0
  103. package/03-patterns/tabs/demo.html +139 -0
  104. package/03-patterns/tabs/tabs.css +172 -0
  105. package/03-patterns/tabs/tabs.js +307 -0
  106. package/03-patterns/tooltip/README.md +96 -0
  107. package/03-patterns/tooltip/demo.html +78 -0
  108. package/03-patterns/tooltip/tooltip.css +89 -0
  109. package/03-patterns/tooltip/tooltip.js +288 -0
  110. package/03-patterns/tree/README.md +94 -0
  111. package/03-patterns/tree/demo.html +138 -0
  112. package/03-patterns/tree/tree.css +113 -0
  113. package/03-patterns/tree/tree.js +456 -0
  114. package/04-recipes/analysis-report/README.md +80 -0
  115. package/04-recipes/analysis-report/analysis-report.css +187 -0
  116. package/04-recipes/analysis-report/demo.html +274 -0
  117. package/04-recipes/data-showcase/README.md +45 -0
  118. package/04-recipes/data-showcase/demo.html +247 -0
  119. package/04-recipes/detail-page/README.md +93 -0
  120. package/04-recipes/detail-page/demo.html +55 -0
  121. package/04-recipes/detail-page/detail-page.css +190 -0
  122. package/04-recipes/detail-page/full.html +60 -0
  123. package/04-recipes/detail-page/null.html +60 -0
  124. package/04-recipes/detail-page/partial.html +60 -0
  125. package/04-recipes/detail-page/verify-skeleton.py +19 -0
  126. package/04-recipes/longform/README.md +93 -0
  127. package/04-recipes/longform/agc-memory.svg +4 -0
  128. package/04-recipes/longform/content.html +610 -0
  129. package/04-recipes/longform/content.md +51 -0
  130. package/04-recipes/longform/longform.html +627 -0
  131. package/04-recipes/report/README.md +176 -0
  132. package/04-recipes/report/demo.html +355 -0
  133. package/04-recipes/report/report.css +364 -0
  134. package/04-recipes/table/README.md +103 -0
  135. package/04-recipes/table/demo.html +455 -0
  136. package/04-recipes/table/table.css +372 -0
  137. package/04-recipes/tierA-tokens.css +189 -0
  138. package/09-assets/README.md +74 -0
  139. package/09-assets/bar/README.md +94 -0
  140. package/09-assets/bar/bar.css +166 -0
  141. package/09-assets/bar/bar.js +320 -0
  142. package/09-assets/bar/demo.html +176 -0
  143. package/09-assets/echarts-adapter/demo.html +192 -0
  144. package/09-assets/echarts-adapter/echarts-adapter.js +277 -0
  145. package/09-assets/model-viewer/README.md +155 -0
  146. package/09-assets/model-viewer/demo.html +105 -0
  147. package/09-assets/model-viewer/model-viewer.css +143 -0
  148. package/09-assets/model-viewer/model-viewer.js +423 -0
  149. package/09-assets/scientific-plot/README.md +94 -0
  150. package/09-assets/scientific-plot/demo.html +252 -0
  151. package/09-assets/scientific-plot/scientific-plot.css +141 -0
  152. package/09-assets/scientific-plot/scientific-plot.js +610 -0
  153. package/09-assets/sparkline/README.md +153 -0
  154. package/09-assets/sparkline/demo.html +163 -0
  155. package/09-assets/sparkline/sparkline.css +158 -0
  156. package/09-assets/sparkline/sparkline.js +508 -0
  157. package/API.md +332 -0
  158. package/CHANGELOG.md +3138 -0
  159. package/CODE_OF_CONDUCT.md +64 -0
  160. package/CONTRIBUTING.md +89 -0
  161. package/ERRORS.md +1658 -0
  162. package/LICENSE +21 -0
  163. package/README.md +497 -2
  164. package/SECURITY.md +72 -0
  165. package/START-HERE.md +164 -0
  166. package/SUPPORT.md +109 -0
  167. package/adapters/presentation/README.md +113 -0
  168. package/adapters/presentation/check.js +101 -0
  169. package/adapters/presentation/deck.schema.json +74 -0
  170. package/adapters/presentation/to-doc.js +138 -0
  171. package/ai/START-HERE.md +104 -0
  172. package/ai/behaviors.json +380 -0
  173. package/ai/behaviors.schema.json +61 -0
  174. package/ai/capabilities.json +56 -0
  175. package/ai/cli.js +387 -0
  176. package/ai/components.json +1944 -0
  177. package/ai/components.meta.json +168 -0
  178. package/ai/components.schema.json +220 -0
  179. package/ai/contract.schema.json +147 -0
  180. package/ai/deprecations.json +55 -0
  181. package/ai/deprecations.schema.json +85 -0
  182. package/ai/motion-policy.json +22 -0
  183. package/ai/patch.js +323 -0
  184. package/ai/patch.schema.json +63 -0
  185. package/ai/profiles.json +92 -0
  186. package/ai/tokens.audience.json +55 -0
  187. package/ai/tokens.audience.schema.json +73 -0
  188. package/ai/tokens.json +762 -0
  189. package/ai/tokens.schema.json +58 -0
  190. package/ai/tokens.tree.json +752 -0
  191. package/ai/tokens.tree.schema.json +56 -0
  192. package/ai/validate.js +383 -0
  193. package/dist/01-tokens/behavior/dismissable.js +60 -0
  194. package/dist/01-tokens/behavior/emit.js +21 -0
  195. package/dist/01-tokens/behavior/focus-return.js +31 -0
  196. package/dist/01-tokens/behavior/roving.js +77 -0
  197. package/dist/01-tokens/behavior/typeahead.js +61 -0
  198. package/dist/01-tokens/focus-ring.css +1 -0
  199. package/dist/01-tokens/page.css +1 -0
  200. package/dist/01-tokens/polyfill.js +78 -0
  201. package/dist/01-tokens/scrollbar.css +1 -0
  202. package/dist/01-tokens/theme-toggle.js +61 -0
  203. package/dist/01-tokens/tokens.css +1 -0
  204. package/dist/01-tokens/typography.css +1 -0
  205. package/dist/02-primitives/badge/badge.css +1 -0
  206. package/dist/02-primitives/button/button.css +1 -0
  207. package/dist/02-primitives/card/card.css +1 -0
  208. package/dist/02-primitives/choice/choice.css +1 -0
  209. package/dist/02-primitives/combobox/combobox.css +1 -0
  210. package/dist/02-primitives/combobox/combobox.js +439 -0
  211. package/dist/02-primitives/date-range/date-range.css +1 -0
  212. package/dist/02-primitives/date-range/date-range.js +267 -0
  213. package/dist/02-primitives/input/input.css +1 -0
  214. package/dist/02-primitives/popover/popover.css +1 -0
  215. package/dist/02-primitives/popover/popover.js +257 -0
  216. package/dist/02-primitives/progress/progress.css +1 -0
  217. package/dist/02-primitives/select/select.css +1 -0
  218. package/dist/02-primitives/select/select.js +449 -0
  219. package/dist/02-primitives/separator/separator.css +1 -0
  220. package/dist/02-primitives/skeleton/skeleton.css +1 -0
  221. package/dist/02-primitives/switch/switch.css +1 -0
  222. package/dist/03-patterns/accordion/accordion.css +1 -0
  223. package/dist/03-patterns/accordion/accordion.js +219 -0
  224. package/dist/03-patterns/content/content.css +1 -0
  225. package/dist/03-patterns/drawer/drawer.css +1 -0
  226. package/dist/03-patterns/drawer/drawer.js +229 -0
  227. package/dist/03-patterns/dropdown/dropdown.css +1 -0
  228. package/dist/03-patterns/dropdown/dropdown.js +365 -0
  229. package/dist/03-patterns/form-validation/form-validation.css +1 -0
  230. package/dist/03-patterns/list/flip.js +117 -0
  231. package/dist/03-patterns/list/list.css +1 -0
  232. package/dist/03-patterns/nav/nav.css +1 -0
  233. package/dist/03-patterns/nav/nav.js +322 -0
  234. package/dist/03-patterns/nav/toc.js +76 -0
  235. package/dist/03-patterns/overlay/overlay.css +1 -0
  236. package/dist/03-patterns/overlay/overlay.js +398 -0
  237. package/dist/03-patterns/pagination/pagination.css +1 -0
  238. package/dist/03-patterns/pagination/pagination.js +273 -0
  239. package/dist/03-patterns/reveal/reveal.css +1 -0
  240. package/dist/03-patterns/reveal/reveal.js +138 -0
  241. package/dist/03-patterns/states/states.css +1 -0
  242. package/dist/03-patterns/tabs/tabs.css +1 -0
  243. package/dist/03-patterns/tabs/tabs.js +242 -0
  244. package/dist/03-patterns/tooltip/tooltip.css +1 -0
  245. package/dist/03-patterns/tooltip/tooltip.js +213 -0
  246. package/dist/03-patterns/tree/tree.css +1 -0
  247. package/dist/03-patterns/tree/tree.js +383 -0
  248. package/dist/04-recipes/analysis-report/analysis-report.css +1 -0
  249. package/dist/04-recipes/detail-page/detail-page.css +1 -0
  250. package/dist/04-recipes/report/report.css +1 -0
  251. package/dist/04-recipes/table/table.css +1 -0
  252. package/dist/04-recipes/tierA-tokens.css +1 -0
  253. package/dist/09-assets/bar/bar.css +1 -0
  254. package/dist/09-assets/bar/bar.js +222 -0
  255. package/dist/09-assets/echarts-adapter/echarts-adapter.js +185 -0
  256. package/dist/09-assets/model-viewer/model-viewer.css +1 -0
  257. package/dist/09-assets/model-viewer/model-viewer.js +320 -0
  258. package/dist/09-assets/scientific-plot/scientific-plot.css +1 -0
  259. package/dist/09-assets/scientific-plot/scientific-plot.js +568 -0
  260. package/dist/09-assets/sparkline/sparkline.css +1 -0
  261. package/dist/09-assets/sparkline/sparkline.js +265 -0
  262. package/dist/COSTS.md +56 -0
  263. package/docs/AI-CONTRACT.md +197 -0
  264. package/docs/BACKLOG.md +127 -0
  265. package/docs/BENCHMARK.md +252 -0
  266. package/docs/GUIDANCE.md +154 -0
  267. package/docs/INVARIANT.md +372 -0
  268. package/docs/LAYER-BASELINE.md +158 -0
  269. package/docs/RELEASING.md +311 -0
  270. package/docs/RFC-THEME-SCOPE.md +141 -0
  271. package/docs/ROADMAP.md +182 -0
  272. package/index.html +82 -0
  273. package/package.json +107 -4
  274. package/types/index.d.ts +310 -0
package/04-recipes/detail-page/null.html ADDED
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" href="data:,">
7
+ <title>detail-page · 无数据</title>
8
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
9
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
10
+ <link rel="stylesheet" href="../../01-tokens/page.css">
11
+ <link rel="stylesheet" href="detail-page.css">
12
+ </head>
13
+ <body class="page">
14
+ <main class="wrap">
15
+ <p class="dp-demo">detail-page · 无数据</p>
16
+ <p class="lede">一条数据都没有时，页面仍然成立：不隐藏、不用 0 冒充、明确说明为什么。</p>
17
+
18
+ <section class="detail-page" data-state="null">
19
+ <div class="detail-hero">
20
+ <div class="detail-hero__deco" aria-hidden="true"></div>
21
+ <div class="detail-hero__body">
22
+ <p class="detail-hero__eyebrow">服务 · SVC-1099</p>
23
+ <h1 class="detail-hero__title">示例对象 C</h1>
24
+ <p class="detail-hero__meta"><span>分类：待补录</span><span>状态：待接入</span></p>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="detail-kpis">
29
+ <div class="detail-kpi">
30
+ <span class="detail-kpi__label">月度调用量</span>
31
+ <span class="num detail-kpi__value detail-kpi__value--missing">暂无数据</span>
32
+ <span class="num detail-kpi__delta">未接入数据源</span>
33
+ </div>
34
+ <div class="detail-kpi">
35
+ <span class="detail-kpi__label">平均响应</span>
36
+ <span class="num detail-kpi__value detail-kpi__value--missing">暂无数据</span>
37
+ <span class="num detail-kpi__delta">未接入数据源</span>
38
+ </div>
39
+ <div class="detail-kpi">
40
+ <span class="detail-kpi__label">可用率</span>
41
+ <span class="num detail-kpi__value detail-kpi__value--missing">暂无数据</span>
42
+ <span class="num detail-kpi__delta">未接入数据源</span>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="detail-null">
47
+ <p class="detail-null__title">暂无数据</p>
48
+ <p class="detail-null__reason">该对象尚未接入数据源，因此没有可展示的指标。这不是"全部为零"，也不代表服务不可用。</p>
49
+ </div>
50
+
51
+ <article class="detail-body">
52
+ <section class="detail-body__section">
53
+ <h2 class="detail-body__heading">为什么保留这张图纸</h2>
54
+ <p class="detail-body__text">无数据是常态而不是异常。把结构留住、把原因说清，比让整页变成一片空白更有用；后续数据接进来时，页面不需要重新设计。</p>
55
+ </section>
56
+ </article>
57
+ </section>
58
+ </main>
59
+ </body>
60
+ </html>
package/04-recipes/detail-page/partial.html ADDED
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <link rel="icon" href="data:,">
7
+ <title>detail-page · 部分缺失</title>
8
+ <link rel="stylesheet" href="../../01-tokens/tokens.css">
9
+ <link rel="stylesheet" href="../../01-tokens/typography.css">
10
+ <link rel="stylesheet" href="../../01-tokens/page.css">
11
+ <link rel="stylesheet" href="detail-page.css">
12
+ </head>
13
+ <body class="page">
14
+ <main class="wrap">
15
+ <p class="dp-demo">detail-page · 部分缺失</p>
16
+ <p class="lede">部分字段缺失时，结构不变：缺的那一项仍然占位，只是值写成"未披露"，不是 0。</p>
17
+
18
+ <section class="detail-page" data-state="partial">
19
+ <div class="detail-hero">
20
+ <div class="detail-hero__deco" aria-hidden="true"></div>
21
+ <div class="detail-hero__body">
22
+ <p class="detail-hero__eyebrow">服务 · SVC-1031</p>
23
+ <h1 class="detail-hero__title">示例对象 B</h1>
24
+ <p class="detail-hero__meta"><span>分类：基础服务</span><span>状态：运行中</span></p>
25
+ </div>
26
+ </div>
27
+
28
+ <div class="detail-kpis">
29
+ <div class="detail-kpi">
30
+ <span class="detail-kpi__label">月度调用量</span>
31
+ <span class="num detail-kpi__value">316 万</span>
32
+ <span class="num detail-kpi__delta">较上月 +2.1%</span>
33
+ </div>
34
+ <div class="detail-kpi">
35
+ <span class="detail-kpi__label">平均响应</span>
36
+ <span class="num detail-kpi__value detail-kpi__value--missing">未披露</span>
37
+ <span class="num detail-kpi__delta">数据源未提供</span>
38
+ </div>
39
+ <div class="detail-kpi">
40
+ <span class="detail-kpi__label">可用率</span>
41
+ <span class="num detail-kpi__value">99.72%</span>
42
+ <span class="num detail-kpi__delta">近 30 天</span>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="detail-null">
47
+ <p class="detail-null__title">数据完整度：2 / 3</p>
48
+ <p class="detail-null__reason">平均响应缺一项：上游未提供该项，不是零。</p>
49
+ </div>
50
+
51
+ <article class="detail-body">
52
+ <section class="detail-body__section">
53
+ <h2 class="detail-body__heading">缺失时怎么排</h2>
54
+ <p class="detail-body__text">缺值写"未披露"并用弱化色，读者一眼能分清"没有数据"和"数据是零"。整块隐藏会让版面塌陷，也会让人误以为没这项。</p>
55
+ </section>
56
+ </article>
57
+ </section>
58
+ </main>
59
+ </body>
60
+ </html>
package/04-recipes/detail-page/verify-skeleton.py ADDED
@@ -0,0 +1,19 @@
1
+ #!/usr/bin/env python3
2
+ # -*- coding: utf-8 -*-
3
+ """
4
+ verify-skeleton.py — 配方自带校验收口（实现在 05-audit/detail-page-contract.py）
5
+
6
+ 🔴 为什么做成转发而不是各写一份：
7
+ 两处实现早晚会漂移，而"同构"这条恰恰是最怕漂移的判据。
8
+ ⇒ 配方里的人跑这一条，门禁里跑的是同一份代码。
9
+
10
+ 用法：python 04-recipes/detail-page/verify-skeleton.py [--selftest]
11
+ """
12
+ import os
13
+ import sys
14
+ import runpy
15
+
16
+ ROOT = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
17
+ GATE = os.path.join(ROOT, '05-audit', 'detail-page-contract.py')
18
+ sys.argv[0] = GATE
19
+ sys.exit(runpy.run_path(GATE, run_name='__main__') or 0)
package/04-recipes/longform/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # recipe：长文阅读页（精简档）
2
+
3
+ | 字段 | 内容 |
4
+ |---|---|
5
+ | **来源** | 原创。内容为 APOLLO-11 AGC 技术考古（真实素材，证据分级） |
6
+ | **文件** | `longform.html` —— **单文件自包含，24.8 KB** |
7
+ | **用途** | 本库的**图纸**：展示 tokens + patterns 怎么拼成一个真实页面 |
8
+ | **门禁** | ✅ 五道全过 + 精简档 硬约束全部满足 |
9
+
10
+ ---
11
+
12
+ ## 为什么先做这个（不是先做列表）
13
+
14
+ `04-recipes` 空了很久，而它比"再做一个 pattern"更该先做，原因有三：
15
+
16
+ 1. **它是最初需求** —— 换个人网站文章展示区的 UI，做了八轮才动手
17
+ 2. **它是"弹药箱的说明书"** —— 库有零件了，但没展示过零件怎么拼
18
+ 3. **它验证库够不够用** —— 如果真实页面做不出来，说明缺零件
19
+
20
+ ---
21
+
22
+ ## 精简档 硬约束（本库最严的验收环境）
23
+
24
+ | 约束 | 实测 | 状态 |
25
+ |---|---|---|
26
+ | 单文件 ≤ 100 KB | **24.8 KB** | ✅ 余量 76% |
27
+ | 零外部请求 | 无 `http(s)://`、无 `src=` | ✅ |
28
+ | 零 `:has()`（CSS Level 4） | 0 处 | ✅ |
29
+ | 零 ES6 语法（脚本） | 0 处 | ✅ |
30
+ | 语义层级不跳级 | h1 × 1，h2 × 5 | ✅ |
31
+
32
+ ⚠️ 这里的 24.8 KB 是**全量**（含内联 token、样式、脚本），
33
+ 说明 token 层内联只占约 2 KB —— 精简档 完全撑得住。
34
+
35
+ ---
36
+
37
+ ## 品味取舍
38
+
39
+ | 决定 | 具体做法 | 为什么 |
40
+ |---|---|---|
41
+ | **唯一视觉焦点** | 标题 `max-width: 15ch`，必然换三行 | 眯眼时第一眼必须落在某处 |
42
+ | **不对称** | 目录 13rem + 正文 68ch，两列不等宽 | 均一不产生节奏 |
43
+ | **段落零框** | 只给代码块和引文加框 | 满屏卡片 = slop 的第一特征 |
44
+ | **衬线标题 + 无衬线正文** | Georgia/Songti + PingFang | 衬线给编辑感与严肃感，正文无衬线保证可读 |
45
+ | **标题 `font-weight: 400`** | 靠字号建层级，不靠粗体 | 衬线体的粗体很丑 |
46
+ | **通栏禁令** | 正文一律 `max-width: 62ch` | 行长超过 75ch 阅读就开始跳行 |
47
+ | **真实数据** | AGC 内存表、861k 记录等 | 模板生成器 2 秒做不出来的东西 |
48
+
49
+ ---
50
+
51
+ ## 几个具体做法
52
+
53
+ **目录高亮用 `IntersectionObserver`，但必须有降级路径。**
54
+ 精简档 的 WebView 版本不确定，所以：
55
+
56
+ ```js
57
+ if (!('IntersectionObserver' in window)) { return; } // 降级：不高亮，功能不受损
58
+ ```
59
+
60
+ 不支持时目录仍然是普通链接，**可用性不受影响**。
61
+
62
+ **跳到主内容链接**：键盘用户第一个 Tab 就能跳过 5 项目录。
63
+
64
+ **代码块 `overflow-x: auto` 而不是让页面撑破** —— 窄屏时横向滚动在代码块内部，不影响整页布局。
65
+
66
+ **证据分级标记**（`A/B/C`）：考古文章最容易出问题的是数字。
67
+ 本文中标 `C` 的数字**只用于说明结构，不用于支撑论断** —— 这条是编辑纪律，不是免责声明。
68
+
69
+ ---
70
+
71
+ ## 反例 —— 什么时候不该用它
72
+
73
+ - ❌ **界面类项目用这个 recipe** —— 它是 68ch 窄栏单栏排版。
74
+ 数据看板、工作台需要另一套（密度更高、容器更多）
75
+ - ❌ **直接在标准档/C 用它** —— 标准档/C 可以引外部 CSS，不必内联。
76
+ 硬内联会让缓存失效
77
+ - ❌ **拿它当"排版规范"** —— 它是一篇**具体文章**。
78
+ 可复用的规则散在 `01-tokens` 和各组件 README 里，那些才是规范
79
+
80
+ ---
81
+
82
+ ## 它验证了什么（对库的意义）
83
+
84
+ | 验证项 | 结果 |
85
+ |---|---|
86
+ | 精简档 能不能承载一个真实页面 | ✅ 能，且余量充足 |
87
+ | 品味规范能不能被执行 | ✅ 能 |
88
+ | token 层够不够 | ✅ 够，17KB 里样式只占很小一块 |
89
+ | 六道门禁在真实页面上会不会误报 | ✅ 没有 |
90
+ | 长文排版（行长/行高/层级）是否可复用 | ✅ 可，已进 charter |
91
+
92
+ **长文排版的可复用结论**：
93
+ 行长 68ch、正文行高 1.7、标题窄栏 —— 这三条对中文长文是硬约束，不是风格偏好。
package/04-recipes/longform/agc-memory.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="600" height="120" viewBox="0 0 600 120" role="img" aria-label="AGC memory board">
2
+ <rect width="600" height="120" fill="#f1f3f5"/>
3
+ <text x="300" y="66" text-anchor="middle" font-family="monospace" font-size="14" fill="#6b7280">AGC memory board (600×120)</text>
4
+ </svg>