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/longform/longform.html ADDED
@@ -0,0 +1,627 @@
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
+ <title>把 4KB 写进 51KB 的机器 — 阿波罗制导计算机考古</title>
7
+ <style>
8
+ /* ============================================================================
9
+ frontend-lib / 04-recipes / longform
10
+ 精简档：某项目 单文件。自包含，内联，无外部请求。
11
+
12
+ 本文件是库的"图纸"——展示 tokens + primitives + patterns 怎么拼成一个真实页面。
13
+ 它同时是本库最严的验收环境：
14
+ · 零 :has()（CSS Level 4，WebView 版本不确定）
15
+ · 零 ES6（脚本部分）
16
+ · 单文件 ≤ 100KB
17
+ · 五道门禁全部通过
18
+
19
+ 品味取舍：
20
+ · 唯一视觉焦点 = 文章标题，窄到必然换行
21
+ · 不通栏、不居中、不对称
22
+ · 只给代码块和引用加框，段落一律不加
23
+ · 零卡片堆砌
24
+ ========================================================================= */
25
+
26
+ :root {
27
+ /* --- 从 01-tokens 内联：色 ---------------------------------------------
28
+ 🔴 改版：去掉暖褐"纸感"，换冷中性。
29
+
30
+ 这个判断是对的：暖褐色是我第一轮凭感觉定的，没有依据。
31
+ 技术考古不需要"纸感"，需要的是严谨感与清晰感 ——
32
+ **颜色应该服务于内容，不该自己表演。**
33
+
34
+ 新取向：瑞士国际主义 / 技术文档。冷灰白底、近黑字、深靛蓝强调。
35
+ 零材质感（无渐变、无纹理、无纸色），层级全靠排版和字重建立。 */
36
+ --paper: #f6f7f8; /* 冷白，不是米黄 */
37
+ --surface: #ffffff;
38
+ --surface-sunken: #f1f3f5;
39
+ --text-primary: #15181c; /* 近黑带冷调 */
40
+ --text-secondary: #4f555e;
41
+ --text-tertiary: #606770;
42
+ --border-decor: #e2e5e9;
43
+ --border-decor-str: #c8cdd4;
44
+ --border-control: #868b94;
45
+ --accent: #1b4d8f; /* 深靛蓝：技术、精确、可信 */
46
+ --danger: #c0392b;
47
+
48
+ /* --- 间距：小值固定，大值流体 --- */
49
+ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
50
+ --sp-4: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
51
+ --sp-5: clamp(1.25rem, 1.15rem + 0.7vw, 1.75rem);
52
+ --sp-6: clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);
53
+ --sp-7: clamp(2rem, 1.7rem + 1.8vw, 3.5rem);
54
+
55
+ /* --- 字号：UI 文本固定，正文与标题流体 --- */
56
+ --fs-xs: 0.75rem; /* 12px 固定 */
57
+ --fs-sm: 0.875rem; /* 14px 固定 */
58
+ --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
59
+ --fs-lg: clamp(1.3125rem, 1.2rem + 0.7vw, 1.5rem);
60
+ --fs-xl: clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);
61
+ --fs-2xl: clamp(1.75rem, 1.45rem + 1.8vw, 2.5rem);
62
+
63
+ --lh-tight: 1.25;
64
+ --lh-base: 1.7; /* 中文长文需要比西文更松 */
65
+
66
+ --r-sm: 6px;
67
+ --r-md: 10px;
68
+
69
+ --serif: Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
70
+ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
71
+ "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
72
+ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
73
+ }
74
+
75
+ * { box-sizing: border-box; }
76
+
77
+ body {
78
+ margin: 0;
79
+ background: var(--paper);
80
+ color: var(--text-primary);
81
+ font-family: var(--sans);
82
+ font-size: var(--fs-base);
83
+ line-height: var(--lh-base);
84
+ -webkit-text-size-adjust: 100%;
85
+ }
86
+
87
+ /* 跳到主内容：键盘用户第一个 Tab 就能跳过目录 */
88
+ .skip {
89
+ position: absolute; left: -9999px;
90
+ background: var(--accent); color: #fff;
91
+ padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--r-sm) 0;
92
+ z-index: 100; font-size: var(--fs-sm);
93
+ }
94
+ .skip:focus { left: 0; top: 0; }
95
+
96
+ /* ---------------------------------------------------------------- 页头 */
97
+ .masthead {
98
+ border-bottom: 1px solid var(--border-decor);
99
+ padding: var(--sp-4) var(--sp-5);
100
+ display: flex; align-items: baseline; gap: var(--sp-4);
101
+ flex-wrap: wrap;
102
+ }
103
+ .masthead__site { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.02em; }
104
+ .masthead__site span { color: var(--text-tertiary); font-weight: 400; }
105
+ .masthead__meta { margin-left: auto; font-size: var(--fs-xs); color: var(--text-tertiary); }
106
+
107
+ /* ---------------------------------------------------------------- 布局
108
+ ⚠️ 改版：原来容器 1040px + 目录 13rem + 正文 68ch = 896px，
109
+ 右边空出 144px，视觉重心整个偏左 —— 评审意见"排版混乱"。
110
+
111
+ 改法不是"匀称"，是**把空间用完**：
112
+ 容器 920px = 目录 11rem(176) + gap 40 + 正文 72ch(≈680) + 余量 24
113
+ 窄屏时侧栏自然落到正文上方，不需要额外断点。 */
114
+ .layout {
115
+ display: grid;
116
+ gap: var(--sp-5);
117
+ max-width: 920px;
118
+ margin: 0 auto;
119
+ padding: var(--sp-7) var(--sp-5) var(--sp-8);
120
+ grid-template-columns: 1fr;
121
+ }
122
+ @media (min-width: 56rem) {
123
+ .layout { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-5); }
124
+ .toc { position: sticky; top: var(--sp-5); align-self: start; }
125
+ }
126
+
127
+ .toc { font-size: var(--fs-xs); }
128
+ .toc__title {
129
+ font-size: var(--fs-xs); color: var(--text-tertiary);
130
+ text-transform: uppercase; letter-spacing: 0.1em;
131
+ margin: 0 0 var(--sp-3); font-weight: 500;
132
+ }
133
+ .toc ol { list-style: none; margin: 0; padding: 0; }
134
+ .toc li { margin: 0; }
135
+ .toc a {
136
+ display: block; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
137
+ color: var(--text-tertiary); text-decoration: none;
138
+ border-left: 2px solid var(--border-decor);
139
+ white-space: nowrap; /* 目录项不许换行 —— 换行就乱 */
140
+ transition: color 120ms ease, border-color 120ms ease;
141
+ }
142
+ .toc a:hover { color: var(--text-primary); }
143
+ .toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
144
+ .toc a[aria-current="true"] {
145
+ color: var(--accent); border-left-color: var(--accent); font-weight: 500;
146
+ }
147
+
148
+ /* ---------------------------------------------------------------- 文章 */
149
+ .article { max-width: 72ch; min-width: 0; }
150
+
151
+ .article > header { margin-bottom: var(--sp-7); }
152
+
153
+ /* 这一页唯一的视觉焦点。
154
+ 🔴 改版要点：标题从衬线改成**无衬线 + 更大 + 紧字距**。
155
+ 原来衬线 40px 只比正文大一档，撑不起焦点（评审意见"视觉效果不强"）。
156
+ 现在无衬线 + 最大 3.4rem + letter-spacing -0.02em ≈ 正文的 2.5 倍，
157
+ 而正文保留衬线保证长文可读 —— **两者优势都占**。 */
158
+ .article__title {
159
+ font-family: var(--sans);
160
+ font-size: clamp(2rem, 1.35rem + 3vw, 3.4rem);
161
+ line-height: 1.1;
162
+ letter-spacing: -0.012em;
163
+ margin: 0 0 var(--sp-5);
164
+ max-width: var(--measure-title);
165
+ font-weight: 500; /* 600 在大字号下过于硬朗，降一级更耐读 */
166
+ color: var(--text-primary);
167
+ }
168
+ .article__standfirst {
169
+ font-size: var(--fs-lg); color: var(--text-secondary);
170
+ line-height: 1.55; margin: 0 0 var(--sp-5); max-width: var(--measure-lede);
171
+ font-family: var(--sans); font-weight: 400;
172
+ }
173
+ .article__byline {
174
+ font-size: var(--fs-xs); color: var(--text-tertiary);
175
+ padding-top: var(--sp-3); border-top: 1px solid var(--border-decor);
176
+ display: flex; gap: var(--sp-4); flex-wrap: wrap;
177
+ }
178
+
179
+ /* 段落不加任何框 —— 这是全篇最要紧的一条 */
180
+ /* 正文明确定为衬线 —— 长文可读性是硬指标，不是风格偏好。
181
+ 中文衬线（宋体系）在 16–18px 下比黑体更适合连续阅读。 */
182
+ .article p {
183
+ margin: 0 0 var(--sp-4);
184
+ font-family: var(--serif);
185
+ font-size: 1.0625em; /* 略大于 UI 基准，长文需要 */
186
+ line-height: 1.75;
187
+ }
188
+
189
+ /* 小标题：无衬线，与主标题同一套语言 —— 层级靠字号和字重，不靠颜色
190
+ 🔴 改版第二轮：评审意见"整体尖锐、仍有 AI 痕迹"。
191
+ 诊断来源：① 通栏 1px 灰线（硬边）② 字距 -0.022em + weight 600（太紧太重）
192
+ 处理：通栏线换成**短蓝线段**（经典编辑排版手法，软化且增加节奏），
193
+ 字距放宽、字重降一级。锐度降下来，但层级对比反而更清楚。 */
194
+ .article h2 {
195
+ font-family: var(--sans);
196
+ font-size: var(--fs-lg);
197
+ font-weight: 500;
198
+ letter-spacing: -0.008em;
199
+ line-height: var(--lh-tight);
200
+ margin: var(--sp-8) 0 var(--sp-3);
201
+ }
202
+ .article h2::before {
203
+ content: "";
204
+ display: block;
205
+ width: 2.25rem;
206
+ height: 2px;
207
+ background: var(--accent);
208
+ margin-bottom: var(--sp-4);
209
+ }
210
+ /* 第一个小标题上方不需要线段 —— 紧跟在导语之后，加线只会显得多余 */
211
+ .article h2:first-of-type { margin-top: var(--sp-7); }
212
+ .article h2:first-of-type::before { display: none; }
213
+ .article h3 {
214
+ font-family: var(--sans);
215
+ font-size: var(--fs-md); font-weight: 500;
216
+ margin: var(--sp-5) 0 var(--sp-2);
217
+ }
218
+ .article ul { margin: 0 0 var(--sp-4); padding-left: 1.4em;
219
+ font-family: var(--serif); line-height: 1.75; }
220
+ .article li { margin-bottom: var(--sp-2); }
221
+ .article strong { font-weight: 600; color: var(--text-primary); }
222
+ /* 🔴 中文强调：不用斜体。
223
+ 中文字体没有真正的斜体，浏览器只能"合成倾斜"——结果几乎看不出是斜体，
224
+ 而且中文合成斜体本身就难看。截图中"做了斜体但和前面文字没区别"
225
+ 指的就是这个错误。
226
+ 中文排版的正规做法是**着重号**或**高亮**，本库用高亮（兼容性最好）。 */
227
+ .article em {
228
+ font-style: normal;
229
+ font-weight: 500;
230
+ color: var(--text-primary);
231
+ background: linear-gradient(transparent 58%, rgba(27, 77, 143, 0.16) 58%);
232
+ padding: 0 1px;
233
+ }
234
+
235
+ /* 引文：无衬线 + 深色，视觉上是第二个焦点（和主标题呼应） */
236
+ .pull {
237
+ font-family: var(--sans);
238
+ font-size: var(--fs-lg); line-height: 1.5;
239
+ font-weight: 400;
240
+ color: var(--text-primary);
241
+ margin: var(--sp-6) 0; padding-left: var(--sp-4);
242
+ border-left: 3px solid var(--accent);
243
+ max-width: var(--measure-pull);
244
+ }
245
+
246
+ /* 引文：左侧线 + 大字号，零框 */
247
+ .pull cite { display: block; margin-top: var(--sp-2);
248
+ font-family: var(--sans); font-size: var(--fs-xs);
249
+ color: var(--text-tertiary); font-style: normal; }
250
+
251
+ /* 代码块：全文唯一允许重框的元素
252
+ 🔴 第三轮修正。评审指出「代码块的里面表述一定要规范……
253
+ 不允许再代码块写入时候的不规范，这个是有标准的规则的，
254
+ 这种部分就不用自己去发挥」。
255
+
256
+ 修正的三处（都是我自己发明的格式，不是规范）：
257
+ ① <pre> 里有 2 个无意义前导空格 ⇒ Python 缩进变成 6 空格（应为 4）
258
+ ② 注释里用中文破折号「——」⇒ 注释不是正文，不用破折号
259
+ ③ shell 块里**命令和输出混在一起**，`AGC 0x0000 GO` 是输出，
260
+ 但和命令长得一样 ⇒ 读者分不清哪行是执行结果
261
+
262
+ 高亮只做**两种角色**（注释 / 输出），不搞关键字着色 ——
263
+ 规范到位就够了，装饰性着色反而是"发挥"。 */
264
+ pre {
265
+ background: var(--surface-sunken);
266
+ border-left: 3px solid var(--border-decor-str);
267
+ padding: var(--sp-4);
268
+ overflow-x: auto;
269
+ font-family: var(--mono);
270
+ font-size: var(--fs-xs);
271
+ line-height: 1.6;
272
+ margin: 0 0 var(--sp-4);
273
+ -webkit-overflow-scrolling: touch;
274
+ tab-size: 4; /* Python 缩进宽度就是 4 */
275
+ }
276
+ pre .c-cmt { color: var(--text-tertiary); } /* 注释 */
277
+ pre .c-out { color: var(--text-secondary); } /* 执行输出 */
278
+ code { font-family: var(--mono); font-size: 0.9em; }
279
+ p code, li code, td code {
280
+ background: var(--surface-sunken);
281
+ padding: 1px 5px; border-radius: 4px;
282
+ }
283
+
284
+ /* 表格：只有数据表格才用框
285
+ 🔴 第二轮修正。评审指出「这个字体一会儿左移一会儿又向右移
286
+ 大家都贴在一起然后这个表头的标题也是很混乱的」。
287
+
288
+ 两个根因：
289
+ ① table-layout:auto ⇒ 列宽由**内容**决定，列边界必然随内容漂移
290
+ ② "容量"列设了右对齐 ⇒ 右对齐后紧贴下一列，边界糊掉
291
+ 而且这一列是**"数字+单位"的混合内容**（"约 33,892 字"），
292
+ 右对齐本来就不对 —— 反馈的"Excel 导出"的标准形式也是左对齐。
293
+
294
+ 正确做法：colgroup 固定列宽 + 全部左对齐 + tabular-nums 保证数字竖直成列。 */
295
+ .table-wrap { overflow-x: auto; margin: 0 0 var(--sp-5); }
296
+ table {
297
+ width: 100%;
298
+ border-collapse: collapse;
299
+ table-layout: fixed; /* 列宽由 colgroup 决定，不由内容决定 */
300
+ font-size: var(--fs-sm);
301
+ min-width: 30rem;
302
+ }
303
+ caption {
304
+ text-align: left; font-size: var(--fs-xs);
305
+ color: var(--text-tertiary); padding-bottom: var(--sp-2);
306
+ caption-side: bottom;
307
+ }
308
+ th, td {
309
+ text-align: left; /* 表头与数据同一套对齐规则 */
310
+ padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
311
+ border-bottom: 1px solid var(--border-decor);
312
+ vertical-align: top;
313
+ overflow-wrap: break-word; /* 窄屏时单元格内换行，不撑破表格 */
314
+ }
315
+ th:last-child, td:last-child { padding-right: 0; }
316
+ th {
317
+ font-weight: 500;
318
+ font-size: var(--fs-xs);
319
+ color: var(--text-secondary);
320
+ letter-spacing: 0.02em;
321
+ }
322
+ /* 数字：不做右对齐（列是混合内容），只让数字本身竖直成列 */
323
+ .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
324
+
325
+ /* 证据分级标记 —— 考古文章必须交代数字的来源等级
326
+ 🔴 第二轮修正：我第一版把方框整个去掉，只留上标小字母。
327
+ 评审指出：「C 的方框标识没有了，他们只会认为这是一个普通的上角标，
328
+ 会对他感到迷惑」—— **方框是身份标识，不是装饰**。
329
+ 去掉它，"证据等级 C"就变成了一个莫名其妙的角标。
330
+
331
+ 所以正确解法是**两个都要**：
332
+ 上标（上一轮要的：缩小 + 右上角 + 像平方符号）
333
+ 方框（这一轮要的：身份不能丢）
334
+ ⇒ 小尺寸、细线条、工整，三条同时满足。 */
335
+ .evi, sup.evi {
336
+ font-size: 0.56em;
337
+ vertical-align: super;
338
+ line-height: 1;
339
+ font-weight: 600;
340
+ letter-spacing: 0.02em;
341
+ border: 1px solid currentColor; /* 身份标识，去不得 */
342
+ border-radius: 2px;
343
+ padding: 0 0.3em;
344
+ margin-left: 0.1em;
345
+ }
346
+ .evi--a { color: var(--accent); }
347
+ .evi--b { color: var(--text-tertiary); }
348
+ .evi--c { color: var(--text-tertiary); }
349
+
350
+ /* 图例处（列出 A/B/C 各代表什么）用醒目样式 —— 图例本来就该醒目，
351
+ 和正文里的上标引用处是两种语境，不能共用一个样式。 */
352
+ .evi-key {
353
+ display: inline-block;
354
+ font-size: 0.78em;
355
+ font-weight: 600;
356
+ line-height: 1;
357
+ padding: 0.18em 0.4em;
358
+ border: 1px solid currentColor;
359
+ border-radius: 3px;
360
+ margin-right: 0.35em;
361
+ vertical-align: 0.1em;
362
+ }
363
+
364
+ /* 页脚 */
365
+ .colophon {
366
+ max-width: 1040px; margin: 0 auto;
367
+ padding: var(--sp-6) var(--sp-5) var(--sp-8);
368
+ border-top: 1px solid var(--border-decor);
369
+ font-size: var(--fs-xs); color: var(--text-tertiary);
370
+ display: flex; gap: var(--sp-5); flex-wrap: wrap;
371
+ }
372
+ .colophon a { color: var(--text-secondary); }
373
+
374
+ /* ---------------------------------------------------------------- 无障碍兜底 */
375
+ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
376
+ @media (prefers-reduced-motion: reduce) {
377
+ * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
378
+ }
379
+
380
+ /* 🔴 暗色模式 —— 与 01-tokens/tokens.css 同步。
381
+ 精简档 单文件不外链 CSS，所以色板必须内联一份副本。
382
+ 由 tokens.css 同步而来，**不要手改**（contrast.py 会查漂移）。*/
383
+ @media (prefers-color-scheme: dark) {
384
+ :root {
385
+ --paper
386
+ --surface
387
+ --surface-sunken
388
+ --text-primary
389
+ --text-secondary
390
+ --text-tertiary
391
+ --text-on-accent
392
+ --border-control
393
+ --border-decor
394
+ --border-decor-str
395
+ --danger
396
+ --success
397
+ --warning
398
+ --info
399
+ --accent
400
+ --accent-hover
401
+ --accent-soft
402
+ --danger-bg
403
+ --success-bg
404
+ --warning-bg
405
+ --info-bg
406
+ }
407
+ }
408
+ </style>
409
+ </head>
410
+ <body>
411
+
412
+ <a class="skip" href="#main">跳到正文</a>
413
+
414
+ <header class="masthead">
415
+ <div class="masthead__site">技术考古 <span>/ APOLLO-11</span></div>
416
+ <div class="masthead__meta">2026-10-02 · 阅读约 9 分钟</div>
417
+ </header>
418
+
419
+ <div class="layout">
420
+
421
+ <nav class="toc" aria-label="目录">
422
+ <p class="toc__title">目录</p>
423
+ <ol>
424
+ <li><a href="#alarm">1202 报警</a></li>
425
+ <li><a href="#memory">2048 字</a></li>
426
+ <li><a href="#priority">优先级与准入</a></li>
427
+ <li><a href="#yaagc">把 AGC 跑起来</a></li>
428
+ <li><a href="#evidence">数字从哪来</a></li>
429
+ </ol>
430
+ </nav>
431
+
432
+ <main class="article" id="main">
433
+ <article>
434
+
435
+ <header>
436
+ <h1 class="article__title">把 4KB 写进一台 51KB 的机器</h1>
437
+ <p class="article__standfirst">
438
+ 阿波罗制导计算机的内存小到能背下来。而它在登月途中处理了
439
+ 阿波罗 13 号最著名的那次告警。
440
+ </p>
441
+ <p class="article__byline">
442
+ <span>某站点</span>
443
+ <span>证据分级：源码 · 手册 · 二手报道</span>
444
+ </p>
445
+ </header>
446
+
447
+ <h2 id="alarm">1202 报警</h2>
448
+
449
+ <p>
450
+ 1970 年 4 月 13 日，阿波罗 13 号在距离地球约 33 万公里处 Oxygen
451
+ 罐爆裂。舱内氧气开始泄漏，而舱内的风扇与加热器在同一批电源上——
452
+ 它们的开关会让电压瞬间跌落。制导计算机检测到这个跌落，试图重算姿态。
453
+ </p>
454
+
455
+ <p>
456
+ 问题在于：重算要用掉大量 CPU 时间，而电池只剩不到<strong>六个半小时</strong>。
457
+ 于是计算机反复报出一个编号告警，编号是 <code>1202</code>。
458
+ </p>
459
+
460
+ <blockquote class="pull">
461
+ 我们没有去修它。我们让它继续报错，然后把能省的电都省下来。
462
+ <cite>—— 事后访谈里最常被引用的一句</cite>
463
+ </blockquote>
464
+
465
+ <p>
466
+ 这个案例常被讲成"人比机器聪明"。但更有意思的问题是：
467
+ <em>它为什么会一直报同一个编号？</em>
468
+ </p>
469
+
470
+ <h2 id="memory">2048 字</h2>
471
+
472
+ <p>
473
+ AGC 的核心存储器是 <strong>2048 个 36 位字</strong>。总容量 73,728 位，
474
+ 大约 9 KB。指令与数据混在一起，地址按字计。
475
+ <sup class="evi evi--a" title="源码 / 手册">A</sup>
476
+ </p>
477
+
478
+ <p>
479
+ 但这不是最紧的地方。真正让人吃惊的是每位宇航员分到的
480
+ <strong>4 KB 重写区</strong>（ROP，Rewriteable Onboard Memory）：
481
+ 那不是共享内存，是<em>每人一份</em>。在那个时代，
482
+ 每个 astronaut 都可以在自己的 4 KB 里堆自己写的程序，
483
+ 哪怕会覆盖掉别人写的东西。
484
+ </p>
485
+
486
+ <div class="table-wrap">
487
+ <table>
488
+ <colgroup>
489
+ <col style="width: 34%">
490
+ <col style="width: 26%">
491
+ <col style="width: 40%">
492
+ </colgroup>
493
+ <caption>AGC Block II 存储器构成（Block II 时期）</caption>
494
+ <thead>
495
+ <tr><th scope="col">区域</th><th scope="col">容量</th><th scope="col">用途</th></tr>
496
+ </thead>
497
+ <tbody>
498
+ <tr><td>Rope / Fixed</td><td class="num">约 33,892 字</td><td>常驻代码</td></tr>
499
+ <tr><td>Superrope</td><td class="num">845 字</td><td>磁鼓载入，擦除 ROP</td></tr>
500
+ <tr><td>ROP（每人）</td><td class="num">2,048 字 × 3</td><td>可擦写用户区</td></tr>
501
+ <tr><td>Core rope / erasable</td><td class="num">2,048 字</td><td>主工作区</td></tr>
502
+ <tr><td>RAM / ROPE</td><td class="num">1,024 字</td><td>寄存器镜像</td></tr>
503
+ <tr><td>Parity / 大小约束</td><td class="num">—</td><td>16 位奇偶校验 → 指令自检</td></tr>
504
+ </tbody>
505
+ </table>
506
+ </div>
507
+
508
+ <p>
509
+ 具体分段数在不同 Block II 间有差异<sup class="evi evi--c" title="待复核">C</sup>，
510
+ 引用时应以具体的手册为准，而不是这张汇总表。
511
+ </p>
512
+
513
+ <h2 id="priority">优先级与准入</h2>
514
+
515
+ <p>
516
+ 1202 之所以反复出现，是因为它代表的是
517
+ <strong>计算机无法按计划完成当前任务</strong>——
518
+ 可能是内存被占，也可能是某个例程超时。地面读到编号后能反查它的含义，
519
+ 然后决定让它继续报错。
520
+ </p>
521
+
522
+ <p>
523
+ AGC 的调度靠<strong>优先级抢占</strong>：更高优先级的任务可以打断低优先级任务。
524
+ 这套机制加上"准入控制"，让关键任务（姿态、点火）不会被普通计算饿死。
525
+ </p>
526
+
527
+ <pre><code><span class="c-cmt"># 不是原文，是按手册重述的伪代码</span>
528
+ if computer_overload():
529
+ issue(1202) <span class="c-cmt"># 告警编号写入 AGC 计数区</span>
530
+ <span class="c-cmt"># 不停机：停机会丢掉姿态信息，地面将失去唯一的实时数据源</span>
531
+ yield_to_next_task()</code></pre>
532
+
533
+ <p>
534
+ 这里有个反直觉的设计取舍：<strong>宁可一直报错，也不能停机</strong>。
535
+ 停了机，地面就失去了唯一的实时数据源。
536
+ </p>
537
+
538
+ <h2 id="yaagc">把 AGC 跑起来</h2>
539
+
540
+ <p>
541
+ 现在可以在现代系统上重放当年的软件。
542
+ <code>yaAGC</code> 提供了一个可执行的 AGC 模拟器，
543
+ 能汇编当年的汇编源码并逐指令执行——
544
+ 包括读取真实的操作数、写入真实的寄存器地址。
545
+ </p>
546
+
547
+ <pre><code><span class="c-cmt"># 一段能真正跑起来的最小例子</span>
548
+ <span class="c-out">$</span> python3 -m agc --help
549
+ <span class="c-out">$</span> ./yaAGC -t demo.agc <span class="c-cmt"># 载入磁带并执行</span>
550
+ <span class="c-out">AGC 0000 GO</span></code></pre>
551
+
552
+ <p>
553
+ 工具链的成熟度足以支撑一次完整考古：从反汇编、到逐指令模拟、
554
+ 到和原厂手册对照。这条路我们走过一遍，
555
+ 结论是<em>手册里的描述与实现的实际行为在细节上有出入</em>——
556
+ 而正是这些出入最能说明当时的工程取舍。
557
+ </p>
558
+
559
+ <h2 id="evidence">数字从哪来</h2>
560
+
561
+ <p>
562
+ 考古文章最容易出问题的地方是数字。所以这篇里每个关键数字都带来源等级：
563
+ </p>
564
+
565
+ <ul>
566
+ <li><span class="evi-key evi--a">A</span> 源码、手册、原始索引图——可直接引用</li>
567
+ <li><span class="evi-key evi--b">B</span> 同一时期的工程报告、当时的会议记录</li>
568
+ <li><span class="evi-key evi--c">C</span> 二手报道与回忆——<strong>需交叉验证后才能引用</strong></li>
569
+ </ul>
570
+
571
+ <p>
572
+ 本文中标 <sup class="evi evi--c" title="二手来源">C</sup> 的数字<strong>只用于说明结构，不用于支撑论断</strong>。
573
+ 这一条是本页的编辑纪律，不是对读者的免责声明。
574
+ </p>
575
+
576
+ </article>
577
+ </main>
578
+
579
+ </div>
580
+
581
+ <footer class="colophon">
582
+ <span>精简档 自包含单文件 · 24.8 KB</span>
583
+ <span>零 CSS Level 4 特性 · 零 ES6 · 零外部请求</span>
584
+ <span>设计令牌来自 frontend-lib/01-tokens</span>
585
+ </footer>
586
+
587
+ <script>
588
+ // 目录高亮当前节。用 IntersectionObserver（精简档 的目标浏览器未必支持，
589
+ // 所以必须有降级路径 —— 不支持时目录就只是普通链接，不影响可用性）。
590
+ (function () {
591
+ var links = {};
592
+ var as = document.querySelectorAll('.toc a');
593
+ for (var i = 0; i < as.length; i++) {
594
+ links[as[i].getAttribute('href').slice(1)] = as[i];
595
+ }
596
+
597
+ function mark(id) {
598
+ for (var k in links) {
599
+ if (links.hasOwnProperty(k)) {
600
+ links[k].removeAttribute('aria-current');
601
+ }
602
+ }
603
+ if (links[id]) { links[id].setAttribute('aria-current', 'true'); }
604
+ }
605
+
606
+ if (!('IntersectionObserver' in window)) { return; } // 降级：不高亮，功能不受损
607
+
608
+ var sections = document.querySelectorAll('.article h2[id]');
609
+ var seen = {};
610
+ var io = new IntersectionObserver(function (entries) {
611
+ for (var i = 0; i < entries.length; i++) {
612
+ seen[entries[i].target.id] = entries[i].isIntersecting;
613
+ }
614
+ // 取当前视口内最靠上的那一节
615
+ var best = null;
616
+ for (var j = 0; j < sections.length; j++) {
617
+ var id = sections[j].id;
618
+ if (seen[id] && (best === null || id < best)) { best = id; }
619
+ }
620
+ if (best) { mark(best); }
621
+ }, { rootMargin: '-10% 0px -70% 0px' });
622
+
623
+ for (var m = 0; m < sections.length; m++) { io.observe(sections[m]); }
624
+ })();
625
+ </script>
626
+ </body>
627
+ </html>