base-paint 0.3.0 → 0.3.2

package/dist/blocks.js

@@ -8,7 +8,7 @@
  *    **不从** `src/index.ts` 导出（签名测试把 `dist/index.js` 出口与冻结清单绑死，
  *    区块接口是可演进的组合层，不是冻结签名）。消费方走子路径 `base-paint/blocks`；
  *  - 清单裁定（DB-1）：12 区块取 `docs/visual-spec-blocks.md` §1 拟定清单为终版，
- *    只做命名收敛（英文键），锚点语义不变；
+ *    只做命名统一（英文键），锚点语义不变；
  *  - 样式闭集裁定（DB-2）：新增 `BLOCK_STYLE_SECTIONS` 12 区闭集（**不改**
  *    `CONTROL_STYLE_SECTIONS`）；区块 CSS 由本模块唯一产出者 `blocksCss()` 产出，
  *    只读冻结 token（`CSS_VAR_TOKENS`）＋ 局部 CSS 常量（圆角 `{8,14,20,999}`、
@@ -29,8 +29,9 @@
  * `actionHtml`（B-10）沿用冻结语义（调用方负责内容安全）。
  */
 import { charts } from './charts.js';
-import { renderActionBar, renderEmptyState, renderErrorReceipt, renderStatusBadge, renderToast } from './controls.js';
-import { ACTION_BAR_DEFAULTS, ACTION_ID_ATTR, CHART_KINDS, COPY_ACTION_IDS, DEFAULT_DATA_ATTR, ESCAPE_HTML_CHARS, ESCAPE_HTML_ENTITIES, SCENE_STATUS, STATUS_KINDS, TOAST_DEFAULTS, } from './spec/index.js';
+import { renderActionBar, renderEmptyState, renderErrorReceipt, renderStatusBadge, renderToast, TOAST_ICON_GLYPHS } from './controls.js';
+import { BODY_FONT_STACK } from './font.js';
+import { ACTION_BAR_DEFAULTS, ACTION_ID_ATTR, CHART_KINDS, COPY_ACTION_IDS, CSS_VAR_TOKENS, DEFAULT_DATA_ATTR, ESCAPE_HTML_CHARS, ESCAPE_HTML_ENTITIES, SCENE_STATUS, STATUS_KINDS, TOAST_DEFAULTS, } from './spec/index.js';
 import { STYLE_PREFIX } from './style.js';
 /* ── 错误形态（与 TemplateError／ControlsError 同口径：抛、不返空；调用方按 name／code 判定） ── */
 /** 区块层错误。code 恒为 `bad-input`（输入缺失／非法一律抛，缺失阻断不返空）。 */
@@ -69,6 +70,46 @@ function reqText(value, field) {
 function optText(value) {
     return typeof value === 'string' && value !== '' ? value : undefined;
 }
+/** 可选数字约束（#397）：`undefined` 透传；数字收 `String(value)`，字串须非空非空白且 `Number()` 有限。 */
+function optNumeric(value, field) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value))
+            badInput(field + ' 必须是数字串或有限数');
+        return String(value);
+    }
+    if (typeof value !== 'string' || value.trim() === '')
+        badInput(field + ' 必须是数字串或有限数');
+    if (!Number.isFinite(Number(value)))
+        badInput(field + ' 必须是数字串或有限数');
+    return value;
+}
+/** 候选项（#397）：`undefined` 透传；给了须是非空数组且逐项非空字串。 */
+function optOptions(value, field) {
+    if (value === undefined)
+        return undefined;
+    if (!Array.isArray(value) || value.length === 0)
+        badInput(field + ' 必须是非空数组');
+    value.forEach((opt, j) => {
+        if (typeof opt === 'string') {
+            if (opt === '')
+                badInput(field + '[' + j + '] 必须是非空字符串');
+            return;
+        }
+        // 值＋标签对照项（#474 追加）：`value` 是**机器值**（下拉选中后递给宿主的还是它），
+        //  `label` 只是给人看的显示文本；全仓只有「机器码 + 中文词」这一种用法。
+        if (opt === null || typeof opt !== 'object' || Array.isArray(opt)) {
+            badInput(field + '[' + j + '] 必须是非空字符串或 { value, label } 对象');
+        }
+        const entry = opt;
+        if (typeof entry.value !== 'string' || entry.value === '')
+            badInput(field + '[' + j + '].value 必须是非空字符串');
+        if (typeof entry.label !== 'string' || entry.label === '')
+            badInput(field + '[' + j + '].label 必须是非空字符串');
+    });
+    return value;
+}
 /* ── 区块样式区闭集（DB-2：新增闭集，不改 CONTROL_STYLE_SECTIONS） ── */
 /** 12 区块样式区（DB-1 清单的代码落点；顺序即 B-01…B-12）。 */
 export const BLOCK_STYLE_SECTIONS = [
@@ -97,6 +138,17 @@ function blockRoot(section) {
 function blockPart(section, part) {
     return STYLE_PREFIX + 'block-' + sectionSlug(section) + '-' + part;
 }
+/** 可打印版式根类的主体（#420）：`ilife-page-printable`。它不是第 13 个区块——`BLOCK_STYLE_SECTIONS`
+ *  由 `test/blocks.test.mjs` 钉死 12 项，故样式落在 `pageShell` 区，仅作页面级开关。 */
+const PRINTABLE_SLUG = 'page-printable';
+/** 打印页名（#420）：`.ilife-page-printable` 用 `page: printable` 绑到具名页 `@page printable` 上。
+ *  裸 `@page` 是**全局规则**（CSS 没法把它绑到类上：任何页一打印就吃它），具名页才落在类作用域内。 */
+const PRINTABLE_PAGE_NAME = 'printable';
+/** 页面级区块类（#420：页内导航／口径说明行）：`ilife-block-<name>`。
+ *  与 12 区同命名空间、同 `ilife-block-` 前缀，但不进 `BLOCK_STYLE_SECTIONS`（样式仍落 `pageShell` 区）。 */
+function pageLevelBlock(name) {
+    return STYLE_PREFIX + 'block-' + name;
+}
 /** B-01：单页容器＋标题三件套（eyebrow／title／subtitle）＋正文。 */
 export function renderPageShell(input) {
     assertPlainObject(input, 'renderPageShell: input');
@@ -105,7 +157,9 @@ export function renderPageShell(input) {
     const title = reqText(shell.title, 'renderPageShell: input.title');
     if (typeof shell.content !== 'string')
         badInput('renderPageShell: input.content 必须是字符串');
-    const parts = ['<section class="' + blockRoot('pageShell') + '">'];
+    const rootClass = blockRoot('pageShell')
+        + (shell.printable === true ? ' ' + STYLE_PREFIX + PRINTABLE_SLUG : '');
+    const parts = ['<section class="' + rootClass + '">'];
     const eyebrow = optText(shell.eyebrow);
     if (eyebrow !== undefined)
         parts.push('<p class="' + blockPart('pageShell', 'eyebrow') + '">' + esc(eyebrow) + '</p>');
@@ -117,6 +171,259 @@ export function renderPageShell(input) {
     parts.push('</section>');
     return parts.join('');
 }
+/** #420-1 页内导航区块（`<nav aria-label="页内导航">` ＋ 逐项 `<a href="#id">`）。
+ *  空列表＝不出这一块（与「没内容不留空块」同口径，返回空串）；非数组／项缺 `id`／`text` → `bad-input`。 */
+export function renderTocBlock(input) {
+    assertPlainObject(input, 'renderTocBlock: input');
+    assertNoInlineHandler(input, 'renderTocBlock: input');
+    const block = input;
+    if (!Array.isArray(block.items))
+        badInput('renderTocBlock: input.items 必须是数组');
+    if (block.items.length === 0)
+        return '';
+    const links = [];
+    for (const item of block.items) {
+        assertPlainObject(item, 'renderTocBlock: items[] 元素');
+        assertNoInlineHandler(item, 'renderTocBlock: items[] 元素');
+        links.push('<a href="#' + esc(reqText(item.id, 'renderTocBlock: items[].id')) + '">'
+            + esc(reqText(item.text, 'renderTocBlock: items[].text')) + '</a>');
+    }
+    return '<nav class="' + pageLevelBlock('toc') + '" aria-label="页内导航">' + links.join('') + '</nav>';
+}
+/** 口径行的并列分隔符（U+FF5C 全角竖线）：**唯一**被当作「并列」的字符。
+ *  #514 立规把它计入可见文本的设计债（R4），本票（负责人第三轮要求 1）就是把这笔债在
+ *  **公共层一次还掉**：该字符不再进产物文本，分隔改由版式承担（见 `renderCaliberLine` 与本区 CSS）。 */
+const CALIBER_SEP = '｜';
+/** #420-2 口径说明行（纯文本单参；五字符转义表与区块层其余函数同源 `esc`）。
+ *  聚合数字旁那句灰色小字（例如「周目标口径＝每日目标 × 7」）的唯一落点。
+ *
+ *  t154-r3（负责人第三轮要求 1「用竖线分割的部分都要优化」）：**签名一字不改**（全仓 141 处
+ *  调用点一行不用动），函数内部按全角竖线拆段 ⇒ 逐段一枚 `<span>`，段间分隔交给 CSS 的细竖线
+ *  （`.…-caliber > span + span` 的 `border-left` hairline ＋ flex 间距）——「拿字符当分隔」换成
+ *  「拿版式当分隔」。判据：产物该行的**文本里不再出现该竖线字符**（分隔只活在版式里）。
+ *  · 不带分隔符的行（多数调用点）**逐字节同改前**：仍是「一个 `<p>` ＋ 一段纯文本」；
+ *    flex 只对「真的有 span 子件」的行生效（CSS 侧 `.…-caliber:has(> span)`）。
+ *  · 空段丢弃（首尾竖线／连续两条竖线）：不出版面的空位；全空的无实义行退化回原样文本
+ *    （没有可分的段，不静默吞字符）。 */
+export function renderCaliberLine(text) {
+    const raw = reqText(text, 'renderCaliberLine: text');
+    const cls = pageLevelBlock('caliber');
+    if (!raw.includes(CALIBER_SEP))
+        return '<p class="' + cls + '">' + esc(raw) + '</p>';
+    const segs = raw.split(CALIBER_SEP).map((seg) => seg.trim()).filter((seg) => seg !== '');
+    if (segs.length === 0)
+        return '<p class="' + cls + '">' + esc(raw) + '</p>';
+    // 段间留一个空格：flex 容器里纯空白文本节点不成匿名项（不占版面），但**文本面**（复制／
+    // 无障碍树／测试的可见文本读数）读出来仍是「甲 乙」而不是「甲乙」。
+    return '<p class="' + cls + '">'
+        + segs.map((seg) => '<span>' + esc(seg) + '</span>').join(' ') + '</p>';
+}
+/** #507 结论条（审查必改 #3）：一行判定句的浅底条，形状住公共层、**调用方只传文本**。
+ *
+ *  与 `renderCaliberLine` 同族（页面级、单参纯文本、五字符转义同源 `esc`；样式随 `pageShell` 区落盘，
+ *  不进 `BLOCK_STYLE_SECTIONS` 那 12 项闭集）。区别只在角色：口径行是**旁注**（灰小字），
+ *  结论条是**主读法**（一行结论句，读者扫一眼就知道今天怎么样）。
+ *
+ *  此前这条形状是**页面内联 8 个魔法值**（`homeDocs.ts` 的 `CONCLUSION_STYLE`，逐字照搬老实物
+ *  `.view-summary`），与本仓「版面单源住公共层」的纪律冲突——该件自述「本页不再出现任何一条
+ *  自写 `font-size`／`color` 规则」，而 `color:var(--blue2)` 就在那串内联里。搬到这里之后，
+ *  页面侧只留「传什么文本」。 */
+export function renderConclusionBar(text) {
+    return '<p class="' + pageLevelBlock('conclusion') + '">' + esc(reqText(text, 'renderConclusionBar: text')) + '</p>';
+}
+/* ══════════════════════════════════════════════════════════════
+ * #421 页面融合四件（与领域无关：文案／数值／颜色全由调用方给）
+ *   占比迷你条／分布条行＝「数字＋图形同格」；徽章＝并列小标签；字段变更行＝改前改后对照。
+ *   四件都是页面级（不属 12 区块），样式随 `pageShell` 区落盘（同 #420 处置：不新增样式区）。
+ * ══════════════════════════════════════════════════════════════ */
+/** 页面级子件类（#421）：`ilife-block-<名>-<件>`（与 `pageLevelBlock` 同命名空间，不进 12 区闭集）。 */
+function pageLevelPart(name, part) {
+    return pageLevelBlock(name) + '-' + part;
+}
+/** 百分比（#421）：只收有限数，两端都夹到 0–100（越界夹取是本条唯一口径；非数走 `badInput`）。 */
+function reqPct(value, field) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        badInput(field + ' 必须是 0–100 的有限数（越界夹取）');
+    }
+    return Math.min(100, Math.max(0, value));
+}
+/** 填充条的内联声明（#421／#431）：宽度恒有；**背景只在调用方给了颜色时才出现**——不给时不落内联色，
+ *  填充色由样式段两条 `-fill` 规则里的**冻结 token** `var(--blue)` 兜底（缺省色走冻结 token，
+ *  区块自身不写死任何色值字面量；判据见 `test/page-viz-421.test.mjs`「缺省色走冻结 token」一条）。 */
+function fillDecls(pct, color) {
+    return 'width:' + String(pct) + '%' + (color === undefined ? '' : ';background:' + color);
+}
+/** 冻结 token 名（#431）：色值入参里 `var()` 只许引用 `CSS_VAR_TOKENS` 的 11 个名字——公共层只定义
+ *  这 11 个，引用没定义的名字会让填充的 `background` 变成 guaranteed-invalid（条静默变透明、不报错），
+ *  故清单外一律 `bad-input`（与 `blocksCss` 的「`var()` 引用必须是冻结 token」同一条纪律）。 */
+function isFrozenToken(name) {
+    return Object.hasOwn(CSS_VAR_TOKENS, name);
+}
+/** CSS 具名色全表（#431 色值允许清单第四支）：CSS Color Level 4「Named colors」的 148 个具名色。
+ *  这里只管**收不收**（比对时大小写不敏感），取值由浏览器定、本仓不写第二份。`transparent` 与
+ *  `currentColor` 是关键字不是具名色，不在表内。 */
+const CSS_NAMED_COLORS = new Set(('aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown'
+    + ' burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan'
+    + ' darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid'
+    + ' darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet'
+    + ' deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro'
+    + ' ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki'
+    + ' lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow'
+    + ' lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray'
+    + ' lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine'
+    + ' mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise'
+    + ' mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab'
+    + ' orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru'
+    + ' pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown'
+    + ' seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan'
+    + ' teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen').split(' '));
+/** `rgb()`／`rgba()` 形态（#431）：分量只许数字（可带 `%`），逗号或空格分隔、alpha 可用 `/` 引。
+ *  只校验形态、不校验取值范围（越界由 CSS 自己夹取）；`expression(`／`url(` 这类带字母的实参在此挡下。 */
+function isRgbFunction(raw) {
+    const hit = /^rgba?\(\s*([^)]*)\)$/i.exec(raw);
+    if (hit === null)
+        return false;
+    const parts = hit[1].split(/[,/]|\s+/).filter((part) => part !== '');
+    return (parts.length === 3 || parts.length === 4)
+        && parts.every((part) => /^\d*\.?\d+%?$/.test(part));
+}
+/** 色值入参（#421／#431）：`undefined` 透传（缺省色走样式段的冻结 token）；清单内的写法**逐字透传**
+ *  （裸 token 名 `--x` 包成 `var(--x)`）。允许清单＝`#rgb`／`#rrggbb`／`rgb()`／`rgba()`／
+ *  `var(--<冻结 token 名>)`／CSS 具名色；**清单外一律 `bad-input`**——`;`／`expression(`／`url(` 这类
+ *  注入形态在这一步挡住，不让 `;` 穿进内联声明列表（审查 S3-6）。 */
+function optColor(value, field) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== 'string' || value.trim() === '')
+        badInput(field + ' 必须是非空字符串（冻结 token 名或色值）');
+    const raw = value.trim();
+    if (/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(raw))
+        return raw;
+    if (isRgbFunction(raw))
+        return raw;
+    const tokenRef = /^var\(\s*(--[A-Za-z0-9-]+)\s*\)$/.exec(raw);
+    if (tokenRef !== null) {
+        if (!isFrozenToken(tokenRef[1]))
+            badInput(field + ' 引用了未冻结的 token（只许 11 个冻结 token）：' + tokenRef[1]);
+        return raw;
+    }
+    if (/^--[A-Za-z0-9-]+$/.test(raw)) {
+        if (!isFrozenToken(raw))
+            badInput(field + ' 引用了未冻结的 token（只许 11 个冻结 token）：' + raw);
+        return 'var(' + raw + ')';
+    }
+    if (CSS_NAMED_COLORS.has(raw.toLowerCase()))
+        return raw;
+    badInput(field + ' 不在色值允许清单里（#rgb／#rrggbb／rgb()／rgba()／var(--<冻结 token>)／CSS 具名色）：' + raw);
+}
+/** 附加类名（#421）：`undefined` 透传；给了须是空格分隔的类名（调用方按域标色，区块不认领域）。 */
+function optExtraClass(value, field) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== 'string' || value.trim() === '')
+        badInput(field + ' 必须是非空字符串');
+    const names = value.trim().split(/\s+/);
+    for (const name of names) {
+        if (!/^-?[A-Za-z_][A-Za-z0-9_-]*$/.test(name))
+            badInput(field + ' 只许空格分隔的类名：' + name);
+    }
+    return names.join(' ');
+}
+/** #421 四件的类名主体（`pageLevelBlock(名)` → `ilife-block-<名>`）。 */
+const MINI_BAR_NAME = 'mini-bar';
+const DIST_ROW_NAME = 'dist-row';
+const CHIP_NAME = 'chip';
+const CHANGE_ROW_NAME = 'change-row';
+/** 箭头字形（#421-4）：`arrow: false` 靠可见性占位，字形逐字保留（栏位不塌）。 */
+const CHANGE_ARROW_GLYPH = '\u2192';
+/** #421-1 占比迷你条（「数字＋图形同格」的图形侧）：一截横条按 `pct` 撑宽。
+ *  只表达「一眼看出差距」，不替代图表——精确读数（坐标／悬停）仍走 `renderChartBlock` 的共享图表。 */
+export function renderMiniBar(input) {
+    assertPlainObject(input, 'renderMiniBar: input');
+    assertNoInlineHandler(input, 'renderMiniBar: input');
+    const bar = input;
+    const pct = reqPct(bar.pct, 'renderMiniBar: input.pct');
+    const color = optColor(bar.color, 'renderMiniBar: input.color');
+    return '<span class="' + pageLevelBlock(MINI_BAR_NAME) + '" role="img" aria-label="' + String(pct) + '%">'
+        + '<span class="' + pageLevelPart(MINI_BAR_NAME, 'fill') + '" style="' + esc(fillDecls(pct, color)) + '"></span>'
+        + '</span>';
+}
+/** #421-2 分布条行：`名称 ｜ 条 ｜ 数值` 一格三栏，逐行拼出（行即件，不另加容器类）。
+ *  `rows: []` ＝ 空串（与「没内容不留空块」同口径）；行内校验逐条 fail-fast。 */
+export function renderDistributionRows(input) {
+    assertPlainObject(input, 'renderDistributionRows: input');
+    assertNoInlineHandler(input, 'renderDistributionRows: input');
+    const block = input;
+    if (!Array.isArray(block.rows))
+        badInput('renderDistributionRows: input.rows 必须是数组');
+    if (block.rows.length === 0)
+        return '';
+    return block.rows.map((row, i) => {
+        const field = 'renderDistributionRows: input.rows[' + i + ']';
+        assertPlainObject(row, field);
+        assertNoInlineHandler(row, field);
+        const item = row;
+        const label = reqText(item.label, field + '.label');
+        const pct = reqPct(item.pct, field + '.pct');
+        const color = optColor(item.color, field + '.color');
+        const extra = optExtraClass(item.labelClass, field + '.labelClass');
+        return '<div class="' + pageLevelBlock(DIST_ROW_NAME) + '">'
+            + '<span class="' + pageLevelPart(DIST_ROW_NAME, 'name') + (extra === undefined ? '' : ' ' + extra) + '">'
+            + esc(label) + '</span>'
+            + '<span class="' + pageLevelPart(DIST_ROW_NAME, 'bar') + '">'
+            + '<span class="' + pageLevelPart(DIST_ROW_NAME, 'fill') + '" style="' + esc(fillDecls(pct, color)) + '"></span>'
+            + '</span>'
+            + '<span class="' + pageLevelPart(DIST_ROW_NAME, 'val') + '">'
+            + cellText(item.value, field + '.value') + '</span>'
+            + '</div>';
+    }).join('');
+}
+/** #421-3 徽章（并列小标签，如分类／标签这类短词并排）：逐项 `<span class="ilife-block-chip">`。
+ *  项即件（不另加容器类）；`items: []` ＝ 空串。 */
+export function renderChips(input) {
+    assertPlainObject(input, 'renderChips: input');
+    assertNoInlineHandler(input, 'renderChips: input');
+    const block = input;
+    if (!Array.isArray(block.items))
+        badInput('renderChips: input.items 必须是数组');
+    if (block.items.length === 0)
+        return '';
+    return block.items.map((entry, i) => {
+        const field = 'renderChips: input.items[' + i + ']';
+        assertPlainObject(entry, field);
+        assertNoInlineHandler(entry, field);
+        return '<span class="' + pageLevelBlock(CHIP_NAME) + '">'
+            + esc(reqText(entry.text, field + '.text')) + '</span>';
+    }).join('');
+}
+/** #421-4 字段变更行（回执页「改前 → 改后」对照）：`字段名 ｜ 改前 ｜ 箭头 ｜ 改后`。
+ *  `arrow: false` 只把字形藏起来、不删栏位（与老技能同一手法：左右栏靠箭位对齐）；
+ *  `rows: []` ＝ 空串。 */
+export function renderChangeRows(input) {
+    assertPlainObject(input, 'renderChangeRows: input');
+    assertNoInlineHandler(input, 'renderChangeRows: input');
+    const block = input;
+    if (!Array.isArray(block.rows))
+        badInput('renderChangeRows: input.rows 必须是数组');
+    if (block.rows.length === 0)
+        return '';
+    return block.rows.map((row, i) => {
+        const field = 'renderChangeRows: input.rows[' + i + ']';
+        assertPlainObject(row, field);
+        assertNoInlineHandler(row, field);
+        const item = row;
+        const label = reqText(item.label, field + '.label');
+        return '<div class="' + pageLevelBlock(CHANGE_ROW_NAME) + '">'
+            + '<span class="' + pageLevelPart(CHANGE_ROW_NAME, 'label') + '">' + esc(label) + '</span>'
+            + '<span class="' + pageLevelPart(CHANGE_ROW_NAME, 'old') + '">'
+            + cellText(item.before, field + '.before') + '</span>'
+            + '<span class="' + pageLevelPart(CHANGE_ROW_NAME, 'arrow') + '" aria-hidden="true"'
+            + (item.arrow === false ? ' style="visibility:hidden"' : '') + '>' + CHANGE_ARROW_GLYPH + '</span>'
+            + '<span class="' + pageLevelPart(CHANGE_ROW_NAME, 'new') + '">'
+            + cellText(item.after, field + '.after') + '</span>'
+            + '</div>';
+    }).join('');
+}
 /** B-02：单张 KPI 卡（value 带 `tnum`；非法 status 由冻结语义降级 `empty`）。 */
 export function renderKpiCard(input) {
     assertPlainObject(input, 'renderKpiCard: input');
@@ -169,6 +476,10 @@ export function renderDataTable(input) {
     }
     if (!Array.isArray(table.rows))
         badInput('renderDataTable: input.rows 必须是数组');
+    if (table.cellHtml !== undefined && typeof table.cellHtml !== 'function') {
+        badInput('renderDataTable: input.cellHtml 必须是函数');
+    }
+    const cellHtml = table.cellHtml;
     const columns = table.columns.map((column, i) => {
         const field = 'renderDataTable: input.columns[' + i + ']';
         assertPlainObject(column, field);
@@ -186,9 +497,30 @@ export function renderDataTable(input) {
     const head = '<thead><tr>' + columns.map((column) => '<th scope="col" class="' + blockPart('dataTable', 'cell-' + column.align) + '">' + esc(column.label) + '</th>').join('') + '</tr></thead>';
     const body = '<tbody>' + table.rows.map((row, ri) => {
         assertPlainObject(row, 'renderDataTable: input.rows[' + ri + ']');
-        return '<tr>' + columns.map((column) => '<td class="' + blockPart('dataTable', 'cell-' + column.align) + '">'
-            + cellText(row[column.key], 'renderDataTable: input.rows[' + ri + '].' + column.key)
-            + '</td>').join('') + '</tr>';
+        return '<tr>' + columns.map((column) => {
+            const raw = row[column.key];
+            // #567 `cellHtml`：给了且对本格返回字符串即受信透传（调用方已转义）；
+            // 返回 `undefined` 即走缺省转义文本。不给 `cellHtml` 时本行与改前逐字同。
+            let trusted;
+            if (cellHtml !== undefined) {
+                const out = cellHtml(column.key, raw);
+                if (out !== undefined) {
+                    if (typeof out !== 'string')
+                        badInput('renderDataTable: input.cellHtml 必须返回 string／undefined');
+                    trusted = out;
+                }
+            }
+            // t154-r3（负责人第三轮要求 2）：每个数据格带上**列头文本**（`data-label`），窄屏行卡化
+            // 时由 CSS 的 `td::before{content:attr(data-label)}` 出「标签 ＋ 值」，列头因此不必再挤在
+            // 390px 里。**只加属性**：既有类名、既有结构、既有文本一字不动，桌面档（≥641）没有任何
+            // 规则引用它 ⇒ 桌面渲染逐像素不变（自证读数见证据件）。列头文本与 `th` 同源（同一个
+            // `column.label`），不存在两处文案漂移。`esc` 已含 `"`（五字符表）⇒ 标签含引号也安全。
+            const text = trusted === undefined
+                ? cellText(raw, 'renderDataTable: input.rows[' + ri + '].' + column.key)
+                : trusted;
+            return '<td class="' + blockPart('dataTable', 'cell-' + column.align) + '" data-label="' + esc(column.label) + '">'
+                + text + '</td>';
+        }).join('') + '</tr>';
     }).join('') + '</tbody>';
     const caption = optText(table.caption);
     return '<div class="' + blockRoot('dataTable') + '"><table class="' + blockPart('dataTable', 'table') + '">'
@@ -241,9 +573,14 @@ export function renderListRows(input) {
         const row = item;
         const main = reqText(row.main, field + '.main');
         const done = row.done === true;
-        const cls = blockPart('listRows', 'row') + (done ? ' ' + blockPart('listRows', 'row-done') : '');
         const left = optText(row.left);
         const right = optText(row.right);
+        // 没给 `left` 时**不占那一列**：`44px` 那列是给 `▲`／`▼`／`—` 这类标记用的，而栅格是自动排布——
+        // 若仍按三列排，`main` 会落进 44px 那列、被 `nowrap` ＋ `ellipsis` 截断（#154 实测：备注标签
+        // 「晨起空腹」显示成「晨起…」）。修饰类只改列定义，不动任何既有行。
+        const cls = blockPart('listRows', 'row')
+            + (done ? ' ' + blockPart('listRows', 'row-done') : '')
+            + (left === undefined ? ' ' + blockPart('listRows', 'row-no-left') : '');
         return '<div class="' + cls + '">'
             + (left === undefined ? '' : '<span class="' + blockPart('listRows', 'left') + '">' + esc(left) + '</span>')
             + '<span class="' + blockPart('listRows', 'main') + '">' + esc(main) + '</span>'
@@ -346,7 +683,13 @@ export function renderDisclosure(input) {
         + '<div class="' + blockPart('disclosure', 'body') + '">' + block.contentHtml + '</div>'
         + '</details>';
 }
-/** B-09：参数表单（`placeholder = hint`；`required` 落 `data-required` 供宿主拦截；零 JS）。 */
+/** B-09：参数表单（`placeholder = hint`；`required` 落 `data-required` 供宿主拦截；零 JS）。
+ *  #397 可选约束：`readonly` 落裸 `readonly`；`step／min／max` 落同名属性（任一出现即
+ *  `type="number"`，`step` 须大于 0，`min` 不得大于 `max`，非法一律 `bad-input`）；
+ *  `options` 给了即渲染 `<select>`（`value` 命中项 `selected`，`hint` 化作首项占位，
+ *  `readonly` 化作 `disabled`，与 `step／min／max` 互斥）。
+ *  #474 追加：`options` 收 `{ value, label }` 对象项——`value` 是机器值（`selected` 按它比）、
+ *  `label` 是显示文本；字符串项走原路，全字符串调用方的产物**逐字节不变**。 */
 export function renderParamForm(input) {
     assertPlainObject(input, 'renderParamForm: input');
     assertNoInlineHandler(input, 'renderParamForm: input');
@@ -369,13 +712,52 @@ export function renderParamForm(input) {
         const hint = optText(item.hint);
         const value = typeof item.value === 'string' ? item.value : '';
         const required = item.required === true;
+        const readonly = item.readonly === true;
+        const step = optNumeric(item.step, path + '.step');
+        const min = optNumeric(item.min, path + '.min');
+        const max = optNumeric(item.max, path + '.max');
+        if (step !== undefined && !(Number(step) > 0))
+            badInput(path + '.step 必须是大于 0 的数字');
+        if (min !== undefined && max !== undefined && Number(min) > Number(max)) {
+            badInput(path + '.min 不得大于 ' + path + '.max');
+        }
+        const options = optOptions(item.options, path + '.options');
+        if (options !== undefined && (step !== undefined || min !== undefined || max !== undefined)) {
+            badInput(path + '.options 与 step／min／max 互斥');
+        }
+        if (options !== undefined) {
+            // #474：对象项按**机器值**比 `selected`，显示文本取 `label`；字符串项与旧行为逐字节一致。
+            const entries = options.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt));
+            const optionHtml = entries.map((opt) => '<option value="' + esc(opt.value) + '"'
+                + (value === opt.value ? ' selected' : '') + '>' + esc(opt.label) + '</option>').join('');
+            parts.push('<label class="' + blockPart('paramForm', 'field') + '">'
+                + '<span class="' + blockPart('paramForm', 'label') + '">' + esc(label)
+                + (required ? '<span class="' + blockPart('paramForm', 'required') + '" aria-hidden="true"> *</span>' : '')
+                + '</span>'
+                + '<select class="' + blockPart('paramForm', 'input') + '" name="' + esc(name) + '"'
+                + (required ? ' data-required="1" required' : '')
+                + (readonly ? ' disabled' : '')
+                + '>'
+                + (hint === undefined ? '' : '<option value="" disabled' + (entries.some((opt) => opt.value === value) ? '' : ' selected') + '>'
+                    + esc(hint) + '</option>')
+                + optionHtml
+                + '</select>'
+                + '</label>');
+            return;
+        }
         parts.push('<label class="' + blockPart('paramForm', 'field') + '">'
             + '<span class="' + blockPart('paramForm', 'label') + '">' + esc(label)
             + (required ? '<span class="' + blockPart('paramForm', 'required') + '" aria-hidden="true"> *</span>' : '')
             + '</span>'
-            + '<input class="' + blockPart('paramForm', 'input') + '" name="' + esc(name) + '" value="' + esc(value) + '"'
+            + '<input class="' + blockPart('paramForm', 'input') + '"'
+            + (step === undefined && min === undefined && max === undefined ? '' : ' type="number"')
+            + ' name="' + esc(name) + '" value="' + esc(value) + '"'
             + (hint === undefined ? '' : ' placeholder="' + esc(hint) + '"')
             + (required ? ' data-required="1" required' : '')
+            + (readonly ? ' readonly' : '')
+            + (step === undefined ? '' : ' step="' + esc(step) + '"')
+            + (min === undefined ? '' : ' min="' + esc(min) + '"')
+            + (max === undefined ? '' : ' max="' + esc(max) + '"')
             + ' />'
             + '</label>');
     });
@@ -397,19 +779,27 @@ export function renderEmptyBlock(input) {
         + renderEmptyState(block)
         + '</section>';
 }
-/** B-11：复制区块（冻结 `renderActionBar`；id 缺省取 `COPY_ACTION_IDS.actionBar.*`，调用方须保页内唯一）。 */
+/** B-11：复制区块（冻结 `renderActionBar`；id 缺省取 `COPY_ACTION_IDS.actionBar.*`，调用方须保页内唯一）。
+ *  `dataFormats` 给三格式形态（`dataText` 单格式），两者同给 → `bad-input`。
+ *  标题去重（#336 base 侧兜底，与 `copyArea` 的 `COPY_TITLE_DUP_OF_BUTTON` 同口径）：
+ *  `title` 与复制数据按钮同名（`ACTION_BAR_DEFAULTS.copyDataLabel`＝「复制数据」）时不出 `<h2>`
+ *  （只留动作不留说明文本）；其他标题照旧。 */
 export function renderCopyBlock(input) {
     assertPlainObject(input, 'renderCopyBlock: input');
     assertNoInlineHandler(input, 'renderCopyBlock: input');
     const block = input;
+    if (block.dataFormats !== undefined && block.dataText !== undefined) {
+        badInput('renderCopyBlock: input.dataFormats 与 input.dataText 只能给一个');
+    }
     const bar = {};
     if (block.buttons !== undefined)
         bar.buttons = block.buttons;
-    if (block.dataText !== undefined || block.dataActionId !== undefined) {
+    if (block.dataText !== undefined || block.dataActionId !== undefined || block.dataFormats !== undefined) {
         bar.copyData = {
             actionId: block.dataActionId ?? COPY_ACTION_IDS.actionBar.copyData,
             label: ACTION_BAR_DEFAULTS.copyDataLabel,
             ...(block.dataText === undefined ? {} : { text: block.dataText }),
+            ...(block.dataFormats === undefined ? {} : { formats: block.dataFormats }),
         };
     }
     if (block.logText !== undefined || block.logActionId !== undefined) {
@@ -419,13 +809,56 @@ export function renderCopyBlock(input) {
             ...(block.logText === undefined ? {} : { text: block.logText }),
         };
     }
-    const title = optText(block.title);
+    const rawTitle = optText(block.title);
+    // #336：与按钮同名的标题只留按钮（`copyArea` 去重口径的 base 侧兜底，直调本函数同样生效）。
+    const title = rawTitle === ACTION_BAR_DEFAULTS.copyDataLabel ? undefined : rawTitle;
     return '<section class="' + blockRoot('copyBlock') + '">'
         + (title === undefined ? '' : '<h2 class="' + blockPart('copyBlock', 'title') + '">' + esc(title) + '</h2>')
         + renderActionBar(bar)
         + '</section>';
 }
-/** B-12：反馈区块（冻结 `renderToast` 和／或 `renderErrorReceipt`；两者至少其一）。 */
+/** 页内静态提示**不出**的内容（#154，fail-fast 而非静默丢）：可点控件在静态提示里没有行为位，
+ *  徽章／计数是 toast 卡头部的配件。给了就抛 `bad-input`（要这些就用 toast 形态：不传 `staticNotice`）。
+ *  寿命字段（`timeoutMs`／`maxStack`）只关乎 toast 栈，静态形态下**无意义、静默忽略**。 */
+const STATIC_NOTICE_REJECTED_FIELDS = ['actions', 'badge', 'count'];
+/** B-12 的浅色形态产出器（#154）：结构 = 图标 ＋ 正文（标题／详情／多行／代码块）。
+ *  与 `renderToast` **同源不重述**：图标字形、`icon` 非法回落、转义表都取既有唯一产出者／冻结表。 */
+function renderStaticNotice(toast) {
+    assertPlainObject(toast, 'renderFeedbackBlock: input.toast');
+    if (typeof toast.msg !== 'string')
+        badInput('renderFeedbackBlock: input.toast.msg 必须是字符串');
+    for (const field of STATIC_NOTICE_REJECTED_FIELDS) {
+        const value = toast[field];
+        if (value !== undefined && value !== null) {
+            badInput('renderFeedbackBlock: staticNotice 形态不出可点控件／徽章／计数，input.toast.'
+                + field + ' 不得给（要这些就传 toast 形态：去掉 staticNotice）');
+        }
+    }
+    const icon = typeof toast.icon === 'string' && toast.icon in TOAST_ICON_GLYPHS
+        ? toast.icon
+        : TOAST_DEFAULTS.defaultIcon;
+    const parts = [
+        '<div class="' + blockPart('feedbackBlock', 'note') + '">',
+        '<span class="' + blockPart('feedbackBlock', 'note-icon') + ' '
+            + blockPart('feedbackBlock', 'note-icon-' + icon) + '" aria-hidden="true">' + TOAST_ICON_GLYPHS[icon] + '</span>',
+        '<div class="' + blockPart('feedbackBlock', 'note-body') + '">',
+        '<div class="' + blockPart('feedbackBlock', 'note-title') + '">' + esc(toast.msg) + '</div>',
+    ];
+    if (typeof toast.detail === 'string' && toast.detail !== '') {
+        parts.push('<div class="' + blockPart('feedbackBlock', 'note-detail') + '">' + esc(toast.detail) + '</div>');
+    }
+    if (Array.isArray(toast.lines) && toast.lines.length > 0) {
+        parts.push('<div class="' + blockPart('feedbackBlock', 'note-lines') + '">'
+            + toast.lines.map((line) => esc(String(line))).join('<br>') + '</div>');
+    }
+    if (typeof toast.code === 'string' && toast.code !== '') {
+        parts.push('<pre class="' + blockPart('feedbackBlock', 'note-code') + '">' + esc(toast.code) + '</pre>');
+    }
+    parts.push('</div>', '</div>');
+    return parts.join('');
+}
+/** B-12：反馈区块（冻结 `renderToast` 和／或 `renderErrorReceipt`；两者至少其一）。
+ *  `staticNotice === true` 时 `toast` 改走浅色静态形态（#154），其余逐字照旧。 */
 export function renderFeedbackBlock(input) {
     assertPlainObject(input, 'renderFeedbackBlock: input');
     assertNoInlineHandler(input, 'renderFeedbackBlock: input');
@@ -434,9 +867,12 @@ export function renderFeedbackBlock(input) {
         badInput('renderFeedbackBlock: input.toast 与 input.error 至少其一');
     }
     const title = optText(block.title);
+    const toastHtml = block.toast === undefined
+        ? ''
+        : (block.staticNotice === true ? renderStaticNotice(block.toast) : renderToast(block.toast));
     return '<section class="' + blockRoot('feedbackBlock') + '">'
         + (title === undefined ? '' : '<h2 class="' + blockPart('feedbackBlock', 'title') + '">' + esc(title) + '</h2>')
-        + (block.toast === undefined ? '' : renderToast(block.toast))
+        + toastHtml
         + (block.error === undefined ? '' : renderErrorReceipt(block.error))
         + '</section>';
 }
@@ -450,10 +886,10 @@ const LF = String.fromCharCode(10);
 const LINE_RGB = '210, 210, 215';
 /** 主色 RGB（`--blue` `#007aff`；与 `src/style.ts` 同值，复用罗列处注明出处）。 */
 const BLUE_RGB = '0, 122, 255';
-/** 待开发徽章配色（沿用 HELP 壳 `help-shell-badge-dev` 逐值，不另发明）。 */
+/** 待开发徽章配色（沿用 help 模板 `help-shell-badge-dev` 逐值，不另发明）。 */
 const DEV_BG = 'rgba(255, 149, 0, .12)';
 const DEV_FG = '#b25000';
-/** 必填星号色（沿用 HELP 壳 `help-shell-field-required` 逐值）。 */
+/** 必填星号色（沿用 help 模板 `help-shell-field-required` 逐值）。 */
 const REQUIRED_FG = '#c0392b';
 /** 局部圆角常量（D-5：`{8,14,20,999}`，不新增 token 名）。 */
 const RADIUS_SM = 8;
@@ -463,6 +899,23 @@ const RADIUS_PILL = 999;
 /** 区块 CSS：12 区各自实现（键与 `BLOCK_STYLE_SECTIONS` 一一对应，缺区导入即抛，防静默缺样式）。 */
 const BLOCK_SECTION_BUILDERS = {
     pageShell: (p) => [
+        // #179 整页基础（文档级）：本区是「共享页面模板」的唯一落点（`style.test.mjs` T22 明写 body／html
+        // 规则归 #104，`buildStyleSheet()` 不得产）。此前一条都没有 → 实测 `body` 吃 UA 的 8px 外边距、
+        // 白底（`--bg` `#f5f5f7` 定义了却没人用）＋ 系统默认字体（computed 回落到 Noto Sans SC）。
+        // 这三条与参照件 HELP 的 `body{font-family…;background:var(--bg);color:var(--text)}` 对齐；
+        // 字体栈取 `src/font.ts` 唯一真相源（不各抄一份）。**不搬** HELP 的 `*{margin:0;padding:0}`：
+        // 本页没有任何盒子靠全局复位才不溢出（唯一需要 `box-sizing` 的输入框已自带），
+        // 搬了会把 `.ilife-block-page-shell` 的桌面内容宽从 960 压到 920（45 张页面一起变），
+        // 属另一题材。 */
+        'body {',
+        '  margin: 0;',
+        '  background: var(--bg);',
+        '  color: var(--fg);',
+        '  font-family: ' + BODY_FONT_STACK + ';',
+        '  font-size: 15px;',
+        '  line-height: 1.5;',
+        '  -webkit-font-smoothing: antialiased;',
+        '}',
         '.' + p + 'block-page-shell {',
         '  display: block;',
         '  max-width: 960px;',
@@ -473,7 +926,8 @@ const BLOCK_SECTION_BUILDERS = {
         '}',
         '.' + p + 'block-page-shell-eyebrow {',
         '  margin: 0;',
-        '  color: var(--blue);',
+        // #179 对比度：12px 小字压白底，`--blue` 4.02:1 不到 AA 的 4.5:1 → 同族深一档 `--blue2`（5.6:1）。
+        '  color: var(--blue2);',
         '  font-size: 12px;',
         '  font-weight: 600;',
         '  letter-spacing: .08em;',
@@ -481,7 +935,8 @@ const BLOCK_SECTION_BUILDERS = {
         '}',
         '.' + p + 'block-page-shell-title {',
         '  margin: 6px 0 0;',
-        '  font-size: 32px;',
+        // #567 J4（§5.2 大数 28 吸收 26／28／32／40）：页标题 32→28。
+        '  font-size: 28px;',
         '  font-weight: 700;',
         '  letter-spacing: -.4px;',
         '  line-height: 1.2;',
@@ -495,20 +950,259 @@ const BLOCK_SECTION_BUILDERS = {
         '  display: block;',
         '  margin-top: 16px;',
         '}',
+        // #457 顶层区块统一间隔：正文里每个区块（非首个）上方恒 16px。此前各区块根规则各自给上下
+        // 外边距，`dataTable`／`listRows` 两条**一条都没给**，于是「表接表」实测间距 0 —— 两张表的
+        // 1px 边框贴在一起，看不出是两块（267 页「延迟相关性」与「分层对比」）。
+        // 写在**一处**、用相邻兄弟收口，而不是给 12 个区各补一条上下边距：相邻两块的边距会折叠，
+        // 既有的 12／16 都不超过 16，折叠后恒为 16，不需要改各区的既有值。
+        // 作用域限死在本区正文的直接子级，两条都在防误伤：① `.ilife-block-kpi-card` 也是 `.ilife-block`，
+        // 若全局写 `.ilife-block + .ilife-block`，KPI 卡网格里第 2 张起会各被推下 16px（同排错位、网格失效）；
+        // ② 选择器只用 `.ilife-block` 作「后一块」，不给非区块元素（口径行／图例）加边距，也不动嵌在
+        // 折叠区里的块（它不是正文的直接子级）。
+        // **与 #154「各区自补 16px」重叠（同一根因的另一处补法）**：那批区间给 `dataTable`／`listRows`／
+        // `kpiCardGrid` 各补了 `margin: 16px 0`，与本条命中同一处时两边同值、走 margin 折叠，恒 16px、
+        // 不翻倍（实测 regen-262：表接表 16px）。两票都实施后由后续票合并成单一落点，本票不撤。
+        '.' + p + 'block-page-shell-body > * + .' + p + 'block {',
+        '  margin-top: 16px;',
+        '}',
         '@media (max-width: 640px) {',
         '  .' + p + 'block-page-shell {',
         '    padding: 20px 16px 60px;',
         '  }',
         '  .' + p + 'block-page-shell-title {',
-        '    font-size: 26px;',
+        // #567 J4：桌面 32→28 后窄屏 26 按旧收缩比（26／32≈0.81）收到 22（28×0.79），复用 KPI 主数字档，
+        // 不另立一档；仍比正文大 9px，主次不断。
+        '    font-size: 22px;',
+        '  }',
+        '}',
+        // #420 页面级三件的样式随本区落盘（`BLOCK_STYLE_SECTIONS` 由 `test/blocks.test.mjs` 钉死 12 项，
+        // 不新增样式区；三件都是页面级、与 12 区块无组合关系）。
+        '.' + p + 'block-toc {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  gap: 8px;',
+        '  margin: 0 0 16px;',
+        '}',
+        '.' + p + 'block-toc a {',
+        // #567 D6：页内导航可点高 33.5px＜44px（一页两套触摸档：同页输入框与复制按钮已 44px）。
+        // `min-height:44px`＋纵向居中定死触摸目标（`box-sizing` 显式钉死，免得被页面 `*{}` 改写）；
+        // 纵向内距 6px→8px（4 的倍数；横向 12px 不动；`gap:8px` 已是 4 的倍数）。
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  box-sizing: border-box;',
+        '  min-height: 44px;',
+        '  padding: 8px 12px;',
+        '  border: 1px solid var(--line);',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--card);',
+        // #179 对比度口径：13px 小字压白底用 `--blue2`（5.6:1），`--blue` 4.02:1 不到 AA 的 4.5:1。
+        '  color: var(--blue2);',
+        '  font-size: 13px;',
+        '  font-weight: 600;',
+        '  text-decoration: none;',
+        '}',
+        '.' + p + 'block-toc a:focus-visible {',
+        '  outline: 2px solid var(--blue);',
+        '  outline-offset: 2px;',
+        '}',
+        // 口径说明行：聚合数字旁的灰色小字。12px 取 `--fg2`（4.94:1）；`--fg3` 只有 3.62:1，不到 AA。
+        '.' + p + 'block-caliber {',
+        '  margin: 0 0 8px;',
+        '  color: var(--fg2);',
+        '  font-size: 12px;',
+        '  line-height: 1.5;',
+        '}',
+        // t154-r3（负责人第三轮要求 1）：口径行的**并列分隔**从「文本里的全角竖线字符」改成「版式里的细竖线」。
+        //  拆段住在产出器（`renderCaliberLine` 逐段出一枚 `<span>`），本处只给版式：段间一枚 hairline
+        //  ＋ 间距；窄屏靠 `flex-wrap` 换行（不再靠竖线字符挤在一行）。
+        //  **`:has(> span)` 是这条的鉴别器**：只有真拆过段的行才是 flex 容器；没带分隔符的口径行
+        //  （多数调用点）连 flex 都不是 ⇒ 版面与改前逐值相同（「桌面档不变」在口径行这侧的保证）。
+        //  `gap: 4px 12px`＝行距 4px／列距 12px；竖线借 `> span + span` 的 `border-left`（首段无线）。
+        //  色取既有 `LINE_RGB` 的 .6 透明档（与表行分隔同一档，不新增色值、不新增 token）。
+        //  列距 12px 落在「竖线两侧不对称」的观感上偏紧，故每段再补 8px 左内距：竖线两侧留白
+        //  12px／8px，读到的是「一条细线把两段分开」，而不是「一行贴着线条」。
+        //  注：本条注释不写那个竖线字符本身 —— 产物里「全角竖线」的命中数是个判据，注释不该去凑它。
+        '.' + p + 'block-caliber:has(> span) {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  gap: 4px 12px;',
+        '  align-items: baseline;',
+        '}',
+        '.' + p + 'block-caliber > span + span {',
+        '  padding-left: 8px;',
+        '  border-left: 1px solid rgba(' + LINE_RGB + ', .6);',
+        '}',
+        // #507 结论条（审查必改 #3）：形状住公共层，调用方只传文本。
+        // 起因：这一条此前是**页面内联 8 个魔法值**（`homeDocs.ts` 的 `CONCLUSION_STYLE`：
+        // `margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--soft);color:var(--blue2);
+        // font-weight:600` 写在一处 `style="…"` 里），与「版面单源住公共层」的纪律冲突（该件自述
+        // 「本页不再出现任何一条自写 `font-size`／`color` 规则」，而 `color:var(--blue2)` 就在其中）。
+        // 取值**逐条落在 11 个冻结 token ＋ 圆角闭集 `{8,14,20,999}` 内**，不新增 token：
+        //   底 `var(--card)`（白，与卡片同底）、强调字 `var(--blue2)`（5.6:1）、左 3px `var(--blue)` 主色边、
+        //   圆角 `' + RADIUS_MD + '`（14，闭集里既有中档）、内距 12px／16px（12／16 倍数）、下距 16px（同族值）。
+        // 审查第 3 点给的形态就是这一条「左 3px 主色边 ＋ 浅底」，它同时把**结论条**与 `renderStatusBadge`
+        // 的「`--soft` 底 ＋ 色字」形态分开——此前两者底同、字色同，一个静态陈述一个算出来的档位却长得一样。
+        '.' + p + 'block-conclusion {',
+        '  margin: 0 0 16px;',
+        '  padding: 12px 16px;',
+        '  border-left: 3px solid var(--blue);',
+        '  border-radius: ' + RADIUS_MD + 'px;',
+        '  background: var(--card);',
+        '  color: var(--blue2);',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15）。
+        '  font-size: 15px;',
+        '  font-weight: 600;',
+        '}',
+        // #421 页面融合四件的样式随本区落盘（同 #420 处置：四件都是页面级、不属 12 区块，
+        // `BLOCK_STYLE_SECTIONS` 由 `test/blocks.test.mjs` 钉死 12 项，故不新增样式区、不新增 token）。
+        // **色值口径（#431 定稿）**：区块自身不写死任何色值字面量——样式里只出现冻结 token。不给 `color`
+        // 时填充色的兜底就是下面两条 `-fill` 规则里的冻结 token `var(--blue)`（缺省色走冻结 token，不是
+        // 字面量，也不是「没有色」）；调用方给的色值由 `optColor` 按允许清单收下、逐字进产物的内联
+        // `background`。三处说法（本条注释／证据件／判据名）同口径。
+        '.' + p + 'block-mini-bar {',
+        '  display: inline-block;',
+        '  overflow: hidden;',
+        '  width: 72px;',
+        '  height: 6px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--line);',
+        '  vertical-align: middle;',
+        '}',
+        '.' + p + 'block-mini-bar-fill {',
+        '  display: block;',
+        '  height: 100%;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--blue);',
+        '}',
+        '.' + p + 'block-dist-row {',
+        '  display: grid;',
+        '  grid-template-columns: minmax(0, 6em) minmax(0, 1fr) auto;',
+        '  align-items: center;',
+        '  gap: 8px;',
+        '  padding: 5px 0;',
+        '  font-size: 13px;',
+        '}',
+        // 13px 小字压白底：`--fg2`（4.94:1）达 AA；`--fg3`（3.62:1）不到，不用（#179 口径）。
+        '.' + p + 'block-dist-row-name {',
+        '  color: var(--fg2);',
+        '  overflow: hidden;',
+        '  text-overflow: ellipsis;',
+        '  white-space: nowrap;',
+        '}',
+        '.' + p + 'block-dist-row-bar {',
+        '  display: block;',
+        '  overflow: hidden;',
+        '  height: 8px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--line);',
+        '}',
+        '.' + p + 'block-dist-row-fill {',
+        '  display: block;',
+        '  height: 100%;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--blue);',
+        '}',
+        '.' + p + 'block-dist-row-val {',
+        '  color: var(--fg);',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '  text-align: right;',
+        '}',
+        // 12px 小字取 `--blue2`（压 `--soft` 约 5.4:1）；`--blue` 4.02:1 不到 AA 的 4.5:1（#179 口径）。
+        '.' + p + 'block-chip {',
+        '  display: inline-block;',
+        '  margin: 0 6px 6px 0;',
+        '  padding: 2px 8px;',
+        '  border: 1px solid var(--line);',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--blue2);',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '  line-height: 1.5;',
+        '}',
+        '.' + p + 'block-change-row {',
+        '  display: flex;',
+        '  align-items: baseline;',
+        '  gap: 8px;',
+        '  padding: 6px 0;',
+        '  border-top: 1px solid var(--line);',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15；`page-viz-421` 同步改 14→15）。
+        '  font-size: 15px;',
+        '}',
+        '.' + p + 'block-change-row-label {',
+        '  flex: 1;',
+        '  min-width: 0;',
+        '  color: var(--fg2);',
+        '}',
+        // 改前＝灰字加删除线；改后＝正文字重 600（层次靠字重与线，不靠更浅的灰，同 #179 口径）。
+        '.' + p + 'block-change-row-old {',
+        '  color: var(--fg2);',
+        '  text-decoration: line-through;',
+        '}',
+        // 箭位恒占宽：`arrow: false` 只加内联 `visibility: hidden`，栏宽与真行逐字同（`display: none` 会塌）。
+        '.' + p + 'block-change-row-arrow {',
+        '  flex: 0 0 auto;',
+        '  min-width: 1.2em;',
+        '  color: var(--fg2);',
+        '  text-align: center;',
+        '}',
+        '.' + p + 'block-change-row-new {',
+        '  color: var(--fg);',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        // #533 触屏两件（照 HELP `button.copy` 与卡路里 `pageChromeCss`）：壳内可点件去蓝块、防双击缩放延迟。
+        // 只补两条声明，不改版式文案；第三件（`-webkit-touch-callout`）口径未定，见证据件交裁，本票不自定。
+        '.' + p + 'block-page-shell button,',
+        '.' + p + 'block-page-shell summary {',
+        '  -webkit-tap-highlight-color: transparent;',
+        '  touch-action: manipulation;',
+        '}',
+        // #420-3 打印段：**必须显式打开**——只有 `renderPageShell({ printable: true })` 的页才带
+        // `.ilife-page-printable`；不给的调用点类名不出现，规则虽在样式段里但一律不命中（逐字零变）。
+        // 打印段里**每条规则**都挂在该类作用域下（不出现裸 `body`／裸 `.wrap`）：样式表是共享资产、
+        // 注入到全部页面，裸选择器会在别的页上生效。页面留白交给**具名页** `@page printable`
+        // （`.ilife-page-printable { page: printable }` 绑定；裸 `@page` 会让全部页面吃这 12mm）。
+        // 屏幕上那 32px 留白在纸上没有意义，故打印时清零、改由页边距承担。
+        '@media print {',
+        '  .' + p + PRINTABLE_SLUG + ' {',
+        '    page: ' + PRINTABLE_PAGE_NAME + ';',
+        '    max-width: none;',
+        '    padding: 0;',
+        '  }',
+        '  .' + p + PRINTABLE_SLUG + ' .' + p + 'block-toc {',
+        '    display: none;',
+        '  }',
+        '  .' + p + PRINTABLE_SLUG + ' .' + p + 'block-copy-block {',
+        '    display: none;',
+        '  }',
+        '  @page ' + PRINTABLE_PAGE_NAME + ' {',
+        '    margin: 12mm;',
         '  }',
         '}',
     ].join(LF),
     kpiCard: (p) => [
+        // #179 类名对账（硬证据：`.scratch/t179` 的类名对账脚本）：本区 6 条内层规则此前写成
+        // `block-kpi-*`，而 `blockPart('kpiCard', …)` 真产出的是 `block-kpi-card-*`
+        // → label／value-row／value／unit／detail／badge **6 条全部落空**（computed 实测：值 16px/400
+        // 普通正文色，不是设计的 28px/700）。本区逐条改回真产出的类名，并把说明落在每条前面。
+        // #154（2026-09-14 交付页返工）① 区块间距：本区此前**块级一条 margin 都没有**，与同族区块
+        // （`chartBlock`／`detailSection`／`emptyBlock`／`copyBlock`／`feedbackBlock` 都是 `margin: 16px 0`）
+        // 不一致 ⇒ 交付页实测「KPI 网格与上下卡片贴死」。取同族值 `16px 0`（相邻外边距自然折叠，不翻倍）。
+        // 与 #457 的 `.ilife-block-page-shell-body > * + .ilife-block`（相邻兄弟补上边距）**互补不冲突**：
+        // 那条匹配不到本网格——网格根类是 `block-kpi-card-grid`，**不带** `ilife-block` 类；
+        // 两处都命中同一条边距时同值（16px）且折叠，不会翻倍。
+        // ② 四张卡等高：`auto-fit` 网格**逐行各自量高**，第一行若有一张卡的值长（如日期区间
+        // `2026-08-09 ~ 2026-09-07`）折成 2~3 行，就把那一行撑高、同行另一张被拉长，第二行又是另一个高度。
+        // `grid-auto-rows: 1fr` 让全部隐式行取同一个高（fr 轨道先取各自 max-content，余量均分 ⇒ 行行等高），
+        // 网格项默认 `stretch`，四张卡因此看起来一样高（用户原话要求）。
         '.' + p + 'block-kpi-card-grid {',
         '  display: grid;',
         '  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));',
+        '  grid-auto-rows: 1fr;',
         '  gap: 12px;',
+        '  margin: 16px 0;',
         '}',
         '.' + p + 'block-kpi-card {',
         '  padding: 14px;',
@@ -517,43 +1211,94 @@ const BLOCK_SECTION_BUILDERS = {
         '  background: var(--card);',
         '  box-shadow: var(--shadow);',
         '}',
-        '.' + p + 'block-kpi-label {',
+        '.' + p + 'block-kpi-card-label {',
         '  color: var(--fg2);',
         '  font-size: 12px;',
         '  font-weight: 600;',
         '}',
-        '.' + p + 'block-kpi-value-row {',
+        '.' + p + 'block-kpi-card-value-row {',
         '  display: flex;',
         '  align-items: baseline;',
         '  gap: 6px;',
+        '  min-width: 0;',
         '  margin-top: 4px;',
         '}',
-        '.' + p + 'block-kpi-value {',
+        '.' + p + 'block-kpi-card-value {',
+        '  min-width: 0;',
         '  color: var(--fg);',
-        '  font-size: 28px;',
+        // #154（2026-09-14 交付页返工）③ 主数字收一号：用户原话「内容太大了」。28px → 22px。
+        // 22 是**阶梯里还站得住**的一档（#567 后 `detail-section-title` 17→18：22 − 18 ＝ 4px ≥ 4px，
+        // C1:349「相邻级差 ≥4px」仍成立；22 本身是 #544 终审既判的整排字号，不动）；对 `unit` 13px
+        // 仍大 9px ≥ 8px（本尺 B-02「unit 比 value 小 ≥8px」）。
+        // `overflow-wrap: anywhere` 保留（防长串溢出）——字号小了之后长值折行显著变少。
+        '  font-size: 22px;',
         '  font-weight: 700;',
         '  line-height: 1.2;',
+        '  overflow-wrap: anywhere;',
         '  font-variant-numeric: tabular-nums;',
         '}',
-        '.' + p + 'block-kpi-unit {',
+        '.' + p + 'block-kpi-card-unit {',
         '  color: var(--fg2);',
         '  font-size: 13px;',
         '}',
-        '.' + p + 'block-kpi-detail {',
+        '.' + p + 'block-kpi-card-detail {',
         '  margin-top: 4px;',
-        '  color: var(--fg3);',
+        // #179 对比度：12px 小字取 `--fg3`（`#86868b`）压卡片白底只有 3.62:1，不到 AA 的 4.5:1
+        // → 与 label 同色 `--fg2`（4.94:1），层次由字重（600／400）和字号承担，不靠更浅的灰。
+        '  color: var(--fg2);',
         '  font-size: 12px;',
+        '  overflow-wrap: anywhere;',
         '}',
-        '.' + p + 'block-kpi-badge {',
+        '.' + p + 'block-kpi-card-badge {',
         '  margin-top: 8px;',
         '}',
+        // #507 段标题统一（审查必改 #5）：`blocks.ts` 从 #401 起就给过这条类名产出器的位置
+        // （`homeDocs.ts:247` 用 `<h2 class="ilife-block-kpi-card-title">` 出「今日速览」段标题），
+        // 但**本区从来没有这条 CSS 规则** ⇒ 那个 h2 一路落回浏览器缺省 `h2{font-size:1.17em}`
+        // （15px 正文的 1.17 倍＝17.5px），与同级的 `.ilife-block-copy-block-title`（15px）量出来两样。
+        // 本条补上与另两族**同字号同字重**的一档：15px／700／`margin:0 0 8px`
+        // （边距本区原无先例，取 `copy-block-title` 那档；`chart-block-title` 的 10px 是 #154 已有值，
+        // 不在本票写集，故三族**字号与字重全同、边距两档**——审查第 5 条点的是字号。）
+        '.' + p + 'block-kpi-card-title {',
+        '  margin: 0 0 8px;',
+        '  font-size: 15px;',
+        '  font-weight: 700;',
+        '}',
+        // #507 窄屏档（审查必改 #4）：`auto-fit minmax(150px,1fr)` 只在容器有效宽 ≥474px 时排 3 列
+        // （3×150 ＋ 2×12 间隙），而手机端页面模板 `padding:20px 16px`（见本区 ≤640px 段）——
+        // 512 视口下栅格有效宽仅 480px ⇒ 正好卡在 3 列下沿，第 4 张卡单独占一行、宽度只有前三张的
+        // 1/3（`grid-auto-rows:1fr` 又让它与前三张**等高**），看着像漏了一张。
+        // 本条只加**窄屏一档**：≤640px 显式 2 列 ⇒ 4 张卡排成整齐 2×2；`minmax(0,1fr)` 里的 0
+        // 是下限（不是 `auto` 那种取内容最小宽），长值卡不会被撑破。桌面档一行不动
+        // （桌面列数上限是另一票的事，本票不碰）。断点取本文件既有先例：`dataTable` 与 `pageShell`
+        // 两处都是 `@media (max-width: 640px)`。
+        // 选择器是 `.ilife-block-page-shell .ilife-block-kpi-card-grid`（基础类名前挂一个祖先类），
+        // **不是**同名再写一条：① 网格落在页面模板正文里（`renderKpiGrid` 的唯一用法），该祖先恒成立；
+        // ② 本仓的 CSS 纪律测试（`test/ui-fix-154.test.mjs` 的 `declsOf`）按「某类名的**基础规则**恰 1 条」
+        // 判账，同名再起一条会被数成 2 条而红；`dataTable` 区那条同名 640px 规则是历史写法，本票不动它。
+        '@media (max-width: 640px) {',
+        '  .' + p + 'block-page-shell .' + p + 'block-kpi-card-grid {',
+        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '  }',
+        '}',
     ].join(LF),
     dataTable: (p) => [
+        // #154（2026-09-14 交付页返工）① 区块间距：本区块级此前**一条 margin 都没有**（只有 caption／th／td
+        // 的内距），与同族区块的 `margin: 16px 0` 不一致 ⇒ 交付页实测「表格和上下卡片完全贴在一起」。
+        // 取同族值 `16px 0`；与 #457 的相邻兄弟规则同值时折叠为 16px，不翻倍。
         '.' + p + 'block-data-table {',
+        '  margin: 16px 0;',
         '  overflow-x: auto;',
         '  border: 1px solid var(--line);',
         '  border-radius: ' + RADIUS_MD + 'px;',
         '  background: var(--card);',
+        // #512（最后一公里）表格「两个角落」的旧解（已撤，见下）：当时给表卡加宽度上限收中缝；
+        // 试过的另一条路（复审也提了）**无效**：`td` 上的 `max-width` 在 `table-layout:auto` 下不生效
+        // （读数见 `docs/base/base-render/t512-最后一公里-证据.md`），上限只加在 `td` 上等于没加。
+        // #567 D1：撤掉 680 上限，表卡吃满内容列（#512 那 398px 窄表是旧约束：行首列收窄＋数值列
+        // 下限已由后票接管列宽分配；上限在时表盒 682 vs 内容列 1080、两侧各空 199px）。
+        // `margin: 16px 0` 不动（#154 块级外边距＋`ui-fix-154` 同值守卫）；居中 `margin-inline:auto`
+        // 随上限一起撤（满宽下无意义）。窄档（≤640 上限本就不触发）逐字不变。
         '}',
         '.' + p + 'block-data-table-table {',
         '  width: 100%;',
@@ -571,10 +1316,18 @@ const BLOCK_SECTION_BUILDERS = {
         '  padding: 10px 14px;',
         '  border-bottom: 1px solid var(--line);',
         '  background-color: transparent;',
+        // #507 列头压一档（审查必改 #2）：此前 `th` 取 `--fg2`／12px／600，与数据行 `--fg2`／13px／400
+        // 几乎同色同重 ⇒ 列头「日期」与数据「2026-09-07」分不出主次。改成 `--fg3`／12px（#567 前是
+        // 11.5px，列头最浅）＋ 数据行的**数值列**取 `--fg`（见下方 `td.…-cell-right` 一条），
+        // 「列头弱、数据强」的层级才读出来。
+        // #572-S3-3（转 #567）：`text-transform: uppercase` 把表头里的单位一并抬大写
+        // （`模拟体重（kg）`→`模拟体重（KG）`、`饮水（ml）`→`饮水（ML）`，1440 档实测）。
+        // 列头层级改由字号／字重／颜色承担（11.5px→12px 仍是最浅 `--fg3`＋600 字重），不再靠大写。
+        // 对比度账（#179）：`--fg3` 压白底 3.62:1，按 WCAG 短标签 3:1 一档仍有富余；数据行一律不动色。
+        // 短英文标签此前靠大写撑出的形态改由既有 `letter-spacing` 保留。
         '  color: var(--fg3);',
         '  font-size: 12px;',
         '  font-weight: 600;',
-        '  text-transform: uppercase;',
         '  letter-spacing: .04em;',
         '  white-space: nowrap;',
         '}',
@@ -596,6 +1349,162 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-data-table-cell-right {',
         '  text-align: right;',
         '}',
+        // #507 数值列主次（审查必改 #2）：`align:'right'` 是本层「这一列是数值」的唯一既有信号
+        // （`renderDataTable` 的 `align` 三态里只有它带「数字成栈右对齐」的语义），故**数值列的提权
+        // 挂在这条既有类名上**，不新造类名、不改产出器签名 —— 三族调用点（60 件）一行不用改。
+        // 三处逐条：
+        //  ① `color:var(--fg)`：同一语义（摄入＝1189）在 KPI 卡里是 `--fg`／700／22px，在表里此前是
+        //     `--fg2`／400／13px —— 同一语义两种长法。数值列的**数据**取正文字色，与列头（`--fg3`）分开。
+        //     不改字重（加粗到 600 会把整表拉响亮，`docs/visual-spec-blocks.md:73` 只要 `th` 最浅灰、
+        //     `td` 次级灰、未禁数据加粗；本层取最小改动＝只换色，层级已够）。
+        //  ② `min-width:5.5em`：此前数值列**没有宽度下限**，日期列（`align` 缺省 left）默认吃掉大半
+        //     行宽，两个数值列被挤到右缘四个字符里（1000px 下两列中心相距 ~160px、右侧还空 60px），
+        //     读起来像「数字都堆在角落」。5.5em 按本档 13px 算＝71.5px，容得下「2706」与「—」两种内容。
+        //     只加下限，列宽仍由 `table-layout:auto` 按内容分。
+        //  ③ 等宽轨 ＋ `tnum`：数字列换成等宽栈（与 `pre-block-code` 同一个栈口径，不新造字体面），
+        //     位数不同的数字仍按列对齐；`tnum` 那一条在 `.…-data-table-table` 上已经是全表口径，
+        //     这里在**单元格**上重申一次，防将来有人在 `td` 上写 `font-variant-numeric` 把它顶掉。
+        // **只命中 `td`**（`align:'right'` 的列头 `th` 不跟着变重）：`th` 的色与字号由本区 `th` 规则管。
+        '.' + p + 'block-data-table td.' + p + 'block-data-table-cell-right {',
+        '  min-width: 5.5em;',
+        '  color: var(--fg);',
+        '  font-family: "SF Mono", monospace;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        // #512（列宽按内容给）行首列收窄到内容所需，余量归数值列。
+        // 病根：`table-layout:auto` 下剩段行宽按各列 max-content 比例分，而行首列（`align` 缺省 left；
+        // 本页就是日期列）的 max-content 比数值列重 ⇒ 1000／1440 档实测该列 415.23px（**占表宽 43%**），
+        // 两个数值列各只 271.38px。日期串长度固定（`2026-09-07（今日）`），不需要半屏。
+        // 手段：`width:1%` ＋ `white-space:nowrap` —— 1% 把该列的**目标宽**压到最小，`nowrap` 让它的
+        // min-content ＝ max-content ＝ 内容自然宽，两下一夹，列宽**恰好收在内容上**（实测 152.25px），
+        // 余下的整段行宽归 auto 的数值列（实测 402.88px×2）。#507 那条 `min-width:5.5em` ＋ 等宽栈
+        // ＋ `tabular-nums`（上一行 `td.…-cell-right`）本票一字不动：数值列的**下限**与**余量**是两件事。
+        // 只钉**行首列**（`td.…-cell-left:first-child`）：本层没有「这一列是日期」的信号（`left` 是缺省，
+        // 表里人人 `cell-left`），行首是唯一的既有信号。把**所有** left 列一律钉住（试过）会把本仓 141 处
+        // 调用点里「左列装长文本」的表整表重排：账单候选表（5 列）实测数值列由 99.11px 涨到 375.22px，
+        // 且长文本列失去折行兜底（`nowrap`），内容一超宽就横滚 —— 本票不碰那些表。
+        // 只在**桌面档**：`nowrap` 与 ≤640 档 #457 的「靠折行换不横滚」硬碰。本条按 640 断点的桌面侧
+        // 加一档（`min-width:641px` 与既有 `max-width:640px` 互为补集，不新增断点值），窄屏段一字不动
+        // —— 实测 512 档列宽／折行／横滚与改前逐值相同（211.97／133／133.03，0 折行、0 横滚）。
+        '@media (min-width: 641px) {',
+        '  .' + p + 'block-data-table td.' + p + 'block-data-table-cell-left:first-child {',
+        '    width: 1%;',
+        '    white-space: nowrap;',
+        '  }',
+        '}',
+        // #457 手机端（≤640px）紧凑形态：不靠左右滑动看全 —— 收字号（表头 12→11px、单元格 13→12px）、
+        // 收内边距、放开 `th` 的 `white-space: nowrap`（表宽的硬来源）。容器留 `overflow-x: auto` 兜底。
+        // **与 #154 给本区根补的 `margin: 16px 0` 不冲突**：窄屏段只碰字号／内距／换行，不碰边距。
+        //
+        // t154-r3（负责人第三轮要求 2「这张表在手机宽度上效果很差，所有用到该表格的页面都要整改」）：
+        // 窄屏从「折行硬挤」改成**行卡化**。病根是上一张票选的「靠折行换不横滚」：`td{overflow-wrap:anywhere}`
+        // 把单元格的最小内容宽度压到 **1 个字符**，五列表（两列长文本）在 390px 里于是被压成「一个汉字宽」，
+        // 日期串按任意位置断行 → 一个字一行（负责人实拍）。
+        // 行卡化＝窄屏不再有「列」：`thead` 收起（列名不再占位），`tr` 变一张张小卡，每格一行「标签 ＋ 值」，
+        // 标签来自产出器写在 `td` 上的 `data-label`（`td::before{content:attr(data-label)}`）。
+        // `overflow-wrap:anywhere` **仍留着**（长串——网址／UUID／长数字——不溢出），但它此时作用在
+        // **满宽**的格上，最小宽度是「整格宽」而不是「1 个汉字」⇒ 不会再断成竖排。
+        // 桌面档（≥641）零变化：下面每一条都住在这条既有 `@media (max-width: 640px)` 里，且没有任何
+        // ≥641 的规则引用 `data-label`（属性本身不带任何桌面档样式）。
+        '@media (max-width: 640px) {',
+        '  .' + p + 'block-data-table-table {',
+        // 表格、行、格在窄屏一律走块／栅格流（`table` 的列布局是把内容挤扁的机制本身）。
+        '    display: block;',
+        '    font-size: 12px;',
+        '  }',
+        '  .' + p + 'block-data-table-caption {',
+        '    padding: 8px 10px;',
+        '    font-size: 12px;',
+        // 表注是 `<caption>`，缺省 `display:table-caption`；表在窄屏已 `display:block`（行卡化），
+        // 表注留 `table-caption` 会被挤成**一个汉字宽**的竖排（负责人截图实拍的那一列）⇒ 显式转回块级、占满整卡。
+        '    display: block;',
+        '    width: 100%;',
+        // #547：`width:100%` 只管内容宽，而本仓结果页没有全局 `border-box`（`pageUi.ts:173`）⇒
+        // 实占 100%＋左右内距，在 390 档撑出 20px 横滑（容器 376＞356，真机实测）。只加这一条声明，
+        // 不新增规则（`ui-fix-154` 守卫按选择器计条，加声明不触发），桌面档不在本段、一字不动。
+        '    box-sizing: border-box;',
+        '  }',
+        // 列名不再占一行：它们改住每格的标签里（`data-label`），留着只会把行挤窄。
+        '  .' + p + 'block-data-table thead {',
+        '    display: none;',
+        '  }',
+        // 保留 #457 的 `th` 一档：本组件不再产 `thead` 之外的 `th`，但手写表可能有 `tbody` 里的
+        // `th`（行首标签列），那类格走「标签 ＋ 值」的同一套字号与换行，不能因为「本组件用不到」而删。
+        '  .' + p + 'block-data-table th {',
+        '    padding: 6px 8px;',
+        '    font-size: 11px;',
+        '    letter-spacing: 0;',
+        '    white-space: normal;',
+        '  }',
+        '  .' + p + 'block-data-table tbody {',
+        '    display: block;',
+        '  }',
+        // 一行＝一张卡：卡间一条 hairline（首卡无线），卡内左右各 12px 内距（值与容器边框不贴）。
+        '  .' + p + 'block-data-table tr {',
+        '    display: block;',
+        '    padding: 8px 12px;',
+        '    border-top: 1px solid rgba(' + LINE_RGB + ', .6);',
+        '  }',
+        '  .' + p + 'block-data-table tr:first-child {',
+        '    border-top: 0;',
+        '  }',
+        // 一格＝一行「标签 ＋ 值」。**#541（负责人第四轮）**：此前是两轨栅格（`5em` 标签轨 ＋ `1fr` 值轨），
+        // 但值轨里的文字**左对齐**且轨本身吃掉整行余宽 ⇒ 390 档实测值与容器右缘之间空掉**半张卡**（负责人
+        // 截图实拍的那片空白），一列行卡读起来像「左边一小撮字，右边一大片空」。
+        // 改成一个 flex 行 ＋ `space-between`：**值贴容器右缘**，标签贴左缘，两端各自成轴。
+        // 长度自适应是 `space-between` 自带的：短值（`70.4`／`2026-09-07`）的伸缩项收到内容宽、被推到右缘；
+        // 长值（备注里一整句）的 max-content 超过可用宽 ⇒ 伸缩项撑满到标签之后并换行，**不会被挤成一条窄柱**。
+        // `align-items: baseline`：值换行成多行时，标签仍落在**首行**的基线上（同族先例 `weightUi.ts` 的
+        // `.wui-strip-v .wui-fact{justify-content:space-between}`）。
+        // 格的底边线在卡形态下取消（分隔已由卡间线承担）；值取正文字色 `--fg`，标签取 `--fg3`（判据同列头）。
+        '  .' + p + 'block-data-table td {',
+        '    display: flex;',
+        '    align-items: baseline;',
+        '    justify-content: space-between;',
+        '    gap: 2px 10px;',
+        '    padding: 4px 0;',
+        '    border-bottom: 0;',
+        '    color: var(--fg);',
+        '    font-size: 12px;',
+        '    overflow-wrap: anywhere;',
+        '  }',
+        '  .' + p + 'block-data-table td::before {',
+        '    content: attr(data-label);',
+        // #541：标签轨**不许收缩**。值很长时（备注里一整句）值的伸缩项撑满余宽，标签轨若还能被压，就会
+        // 被压到「一个汉字宽」并按字断行——正是这一票要消灭的那类形态（负责人截图里的竖排）。
+        // `flex: none`＝`0 0 auto`：宽度取标签自己的内容宽，既不缩也不长；值那一侧 `min-width:auto` ＋
+        // `overflow-wrap:anywhere` 仍能一直缩到 1 个字，所以整行永远不会溢出。
+        '    flex: none;',
+        '    color: var(--fg3);',
+        '    font-size: 11.5px;',
+        '    font-weight: 600;',
+        '  }',
+        // 没拿到标签的格（手写 `td`／极端情况下没有列头）**退化**：不出版面的空标签，值单独占满一格。
+        // 判据：空标签不许出现 —— `content:none` 让伪元素整个不生成（不是「生成一个空盒子」）。
+        // 两条选择器**各占一条规则**（不合并成选择器列表）：机检按「选择器逐字相等」查规则，
+        // 合并成列表后按单条选择器会找不到（t154-r3 用例实测）。
+        // #541：三件一行的 flex 形态下「只有值」的那一格不需要任何拉开——**去掉 flex 行**，值就是一块满宽的文字。
+        '  .' + p + 'block-data-table td:not([data-label]) {',
+        '    display: block;',
+        '  }',
+        '  .' + p + 'block-data-table td[data-label=""] {',
+        '    display: block;',
+        '  }',
+        '  .' + p + 'block-data-table td:not([data-label])::before {',
+        '    content: none;',
+        '  }',
+        '  .' + p + 'block-data-table td[data-label=""]::before {',
+        '    content: none;',
+        '  }',
+        // 列已经不在，列对齐（`center`／`right`）在卡里只剩副作用：`min-width:5.5em` 会把值轨顶开 ⇒ 下限
+        // 一律收回 0。`text-align` 只留 `left`：`#541` 起「值贴右缘」由容器上的 `justify-content:space-between`
+        // 承担（那是**盒子**的位置），这条管的是**值换行成多行时行内文字怎么排**——长文本左对齐才好读。
+        '  .' + p + 'block-data-table-table td.' + p + 'block-data-table-cell-center,',
+        '  .' + p + 'block-data-table-table td.' + p + 'block-data-table-cell-right {',
+        '    min-width: 0;',
+        '    text-align: left;',
+        '  }',
+        '}',
     ].join(LF),
     chartBlock: (p) => [
         '.' + p + 'block-chart-block {',
@@ -605,6 +1514,10 @@ const BLOCK_SECTION_BUILDERS = {
         '  border-radius: ' + RADIUS_MD + 'px;',
         '  background: var(--card);',
         '}',
+        // #507 段标题统一（审查必改 #5）：本条与 `copy-block-title`／`kpi-card-title` 同一条尺子。
+        // 审查点的是**字号**（本族 15px vs `kpi-card-title` 落回 `h2` 缺省的 17.5px）；`margin:0 0 10px`
+        // 是 #154 已有的 10px 档，不在本票写集（动它会连带 `test/ui-fix-154.test.mjs` 的同族同值判据），
+        // 故这条只把字号与字重对齐，边距一字不改。
         '.' + p + 'block-chart-block-title {',
         '  margin: 0 0 10px;',
         '  font-size: 15px;',
@@ -615,14 +1528,20 @@ const BLOCK_SECTION_BUILDERS = {
         '}',
     ].join(LF),
     listRows: (p) => [
+        // #154（2026-09-14 交付页返工）① 区块间距：同 dataTable——本区块级此前一条 margin 都没有
+        // （只有 row 的内距），与同族区块的 `margin: 16px 0` 不一致。取同族值（折叠后与 #457 那条同值 16px）。
         '.' + p + 'block-list-rows {',
+        '  margin: 16px 0;',
         '  border: 1px solid var(--line);',
         '  border-radius: ' + RADIUS_MD + 'px;',
         '  background: var(--card);',
         '}',
         '.' + p + 'block-list-rows-row {',
         '  display: grid;',
-        '  grid-template-columns: 44px minmax(0, 1fr) auto;',
+        // #567 D2：首轨 44px 定死把「合计摄入」四字硬折两行（1440 与 390 同值）。
+        // `minmax(44px, auto)`：短内容（▲／▼／— 标记）仍是 44px（旧观感不动、跨行最小对齐不动），
+        // 长标签按内容撑开、恒单行。行自身仍是独立栅格（跨行不对齐本就只靠 44px 下限）。
+        '  grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto;',
         '  gap: 8px;',
         '  align-items: center;',
         '  padding: 10px 14px;',
@@ -632,6 +1551,11 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-list-rows-row:first-child {',
         '  border-top: 0;',
         '}',
+        // 没给 `left` 的行：#154 加的形态——**不占标记列**（`44px` 是给 `▲`／`▼`／`—` 用的）。
+        // 不给这条规则的话，缺 `left` 的行里 `main` 会落进 44px、被 `nowrap` ＋ `ellipsis` 截断。
+        '.' + p + 'block-list-rows-row-no-left {',
+        '  grid-template-columns: minmax(0, 1fr) auto;',
+        '}',
         '.' + p + 'block-list-rows-left {',
         '  color: var(--fg3);',
         '  font-variant-numeric: tabular-nums;',
@@ -686,7 +1610,9 @@ const BLOCK_SECTION_BUILDERS = {
         '}',
         '.' + p + 'block-detail-section-title {',
         '  margin: 0;',
-        '  font-size: 17px;',
+        // #567 J4（§5.2 标题 18 吸收 17／18／20／22）：17→18。KPI 主数字 22 不动（#154 用户 verdict＋
+        // #544 终审既判），级差 22−18＝4 仍满足 `ui-fix-154`（≥4px）。
+        '  font-size: 18px;',
         '  font-weight: 600;',
         '}',
         '.' + p + 'block-detail-section-meta {',
@@ -699,7 +1625,8 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-detail-section-wake {',
         '  color: var(--fg3);',
         '  font-family: "SF Mono", monospace;',
-        '  font-size: 11.5px;',
+        // #567 J4（§5.2 次级 12 吸收 12／11.5）。
+        '  font-size: 12px;',
         '}',
         '.' + p + 'block-detail-section-dev {',
         '  display: inline-flex;',
@@ -734,8 +1661,14 @@ const BLOCK_SECTION_BUILDERS = {
         '  background: var(--card);',
         '}',
         '.' + p + 'block-disclosure-summary {',
-        '  padding: 10px 14px;',
-        '  font-size: 14px;',
+        // #179 触控目标：折叠区整条是可点区域，实测 40px 高（10px 上下留白＋14px 字）不到 44px
+        // → 改 44px 定高＋纵向居中，横向留白不变（与 `.block-disclosure-body` 的 14px 对齐）。
+        '  display: flex;',
+        '  align-items: center;',
+        '  min-height: 44px;',
+        '  padding: 0 14px;',
+        // #567 J4（§5.2 区块标题 15 吸收 14／15）。
+        '  font-size: 15px;',
         '  font-weight: 600;',
         '  cursor: pointer;',
         '  list-style: none;',
@@ -835,6 +1768,98 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-size: 15px;',
         '  font-weight: 700;',
         '}',
+        // ── #154 页内静态提示（浅色形态）─────────────────────────────────────────────
+        // 2026-09-14 用户返工：「顶部有个奇怪的弹窗这是什么？」——页顶那条「本窗只有 1 条记录…」由
+        // `renderFeedbackBlock` 经冻结 `renderToast` 产出，穿的是**深色毛玻璃卡 ＋「✓ 知道了」**的
+        // 弹窗外衣，而它是页面流里的一段静态块（t375 证据件：整份产物 `position: fixed` 出现 0 次、
+        // 没有遮罩与焦点陷阱）。深色卡面是**运行时瞬时 toast** 的形态（2026-09-12 用户亲自裁定），
+        // 两者不是一回事：本形态只在 `staticNotice === true` 时出现（缺省逐字节不变）。
+        // 浅底／描边／圆角逐值取本文件里既有口径：底 `var(--soft)`、描边 1px `var(--line)`、
+        // 圆角 `RADIUS_MD`（14px，闭集 {8,14,20,999} 内）；**不带关闭按钮**（静态提示不该能被点掉）。
+        '.' + p + 'block-feedback-block-note {',
+        '  display: flex;',
+        '  align-items: flex-start;',
+        '  gap: 10px;',
+        '  margin: 16px 0;',
+        '  padding: 12px 14px;',
+        '  border: 1px solid var(--line);',
+        '  border-radius: ' + RADIUS_MD + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '  line-height: 1.5;',
+        '}',
+        // 图标底盘：`kind` 的语义色落在**底盘底色＋字色**上。字形是 emoji（`TOAST_ICON_GLYPHS`，
+        // 与 toast 同源），彩色 emoji 的 `color` 对它无效——语义色因此由底盘承担，`color` 只对
+        // 无彩色字形（等宽／降级字体）生效，两处都写着，缺一不可。
+        '.' + p + 'block-feedback-block-note-icon {',
+        '  display: inline-flex;',
+        '  flex: 0 0 auto;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  width: 22px;',
+        '  height: 22px;',
+        '  border-radius: ' + RADIUS_SM + 'px;',
+        '  background: var(--card);',
+        '  color: var(--fg2);',
+        '  font-size: 13px;',
+        '  line-height: 1;',
+        '}',
+        // 三档实色**逐值取同仓既有的状态徽章**（`src/style.ts` 的 `statusBadge` 区：ok `#e6f7ec`／`#1f8c3d`、
+        // warn `#fff5e0`／`#a25b00`、danger `#fff0ee`／`#a83228`，原样取自旧层 `.hm-status.*`）——
+        // 不发明新色值；`info`／`copy` 两档走冻结 token（`--card`／`--blue2`／`--fg2`），也不发明。
+        '.' + p + 'block-feedback-block-note-icon-ok {',
+        '  background: #e6f7ec;',
+        '  color: #1f8c3d;',
+        '}',
+        '.' + p + 'block-feedback-block-note-icon-warn {',
+        '  background: #fff5e0;',
+        '  color: #a25b00;',
+        '}',
+        '.' + p + 'block-feedback-block-note-icon-danger {',
+        '  background: #fff0ee;',
+        '  color: #a83228;',
+        '}',
+        '.' + p + 'block-feedback-block-note-icon-info {',
+        '  background: var(--card);',
+        '  color: var(--blue2);',
+        '}',
+        '.' + p + 'block-feedback-block-note-icon-copy {',
+        '  background: var(--card);',
+        '  color: var(--fg2);',
+        '}',
+        '.' + p + 'block-feedback-block-note-body {',
+        '  flex: 1 1 auto;',
+        '  min-width: 0;',
+        '}',
+        // 正文＝正文字色 ＋ 600 字重（与 `.toast-title` 的层级口径一致，但取浅色面 token）。
+        '.' + p + 'block-feedback-block-note-title {',
+        '  color: var(--fg);',
+        '  font-weight: 600;',
+        '}',
+        '.' + p + 'block-feedback-block-note-detail {',
+        '  margin-top: 2px;',
+        '  color: var(--fg2);',
+        '}',
+        '.' + p + 'block-feedback-block-note-lines {',
+        '  margin-top: 2px;',
+        '  color: var(--fg2);',
+        '  white-space: pre-wrap;',
+        '}',
+        // 代码块：与 `preBlock`／help 的等宽口径同族（12px／1.55／pre-wrap／overflow-x:auto），
+        // 但浅色面用 `var(--card)` 抬一级底色（`var(--soft)` 上再放浅底会糊成一片）。
+        '.' + p + 'block-feedback-block-note-code {',
+        '  margin: 6px 0 0;',
+        '  padding: 8px 10px;',
+        '  border-radius: ' + RADIUS_SM + 'px;',
+        '  background: var(--card);',
+        '  color: var(--fg2);',
+        '  font-family: "SF Mono", monospace;',
+        '  font-size: 12px;',
+        '  line-height: 1.55;',
+        '  white-space: pre-wrap;',
+        '  overflow-x: auto;',
+        '}',
     ].join(LF),
 };
 /** 闭集漂移 fail-fast（与 `src/style.ts` 同口径）：缺区实现导入即抛。 */
@@ -845,7 +1870,7 @@ for (const section of BLOCK_STYLE_SECTIONS) {
 }
 /** 区块样式资产唯一产出者（用法：调用方把返回值拼进 `TemplateAssets.sharedCssText`
  *  再交 `fillTemplate` 包裹注入；不得走 `StyleSheetInput.extraCss`——其语义被契约
- *  限死为技能作用域 token 覆盖块，不得塞壳层样式）。恒返回非空 CSS 文本。 */
+ *  限死为技能作用域 token 覆盖块，不得塞共享页面模板的样式）。恒返回非空 CSS 文本。 */
 export function blocksCss(input) {
     const prefix = input !== undefined && input !== null && typeof input.prefix === 'string' && input.prefix !== ''
         ? input.prefix