base-paint 0.3.13 → 0.3.15

package/dist/blocks.js

@@ -32,6 +32,7 @@ import { charts } from './charts.js';
 import { renderActionBar, renderEmptyState, renderErrorReceipt, renderStatusBadge, renderToast, TOAST_ICON_GLYPHS, TOAST_ICON_LABELS } 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 { skinVar } from './components/skin/contract.js';
 import { STYLE_PREFIX } from './style.js';
 /* ── 错误形态（与 TemplateError／ControlsError 同口径：抛、不返空；调用方按 name／code 判定） ── */
 /** 区块层错误。code 恒为 `bad-input`（输入缺失／非法一律抛，缺失阻断不返空）。 */
@@ -70,6 +71,26 @@ function reqText(value, field) {
 function optText(value) {
     return typeof value === 'string' && value !== '' ? value : undefined;
 }
+/** 可选**闭环位**校验（#950 回灌六件共用）：`undefined` 透传（＝缺省形态，产物零变化）；
+ *  给了须是闭集里的一个值，闭集外一律点名拒（含 `null`／数字／数组这类非串值，不静默择一）。 */
+function optClosed(value, allowed, field) {
+    if (value === undefined)
+        return undefined;
+    if (!allowed.includes(value)) {
+        badInput(field + ' 必须是 ' + allowed.join('／') + ' 之一');
+    }
+    return value;
+}
+/** 可选**字符串槽**（#950 回灌）：`undefined` 透传；给了须是字符串（空串＝不给，与 `optText` 同口径）。
+ *  与 `reqText` 分工：这里管「给了才出、空串即不出」的槽（如 `helpText`），
+ *  空串也要拒的槽（如字段级 `unit`／`error`）一律走 `reqText`。 */
+function optSlot(value, field) {
+    if (value === undefined)
+        return undefined;
+    if (typeof value !== 'string')
+        badInput(field + ' 必须是字符串');
+    return value === '' ? undefined : value;
+}
 /** 可选数字约束（#397）：`undefined` 透传；数字收 `String(value)`，字串须非空非空白且 `Number()` 有限。 */
 function optNumeric(value, field) {
     if (value === undefined)
@@ -248,7 +269,9 @@ export function renderCaliberLine(text) {
     return '<p class="' + cls + '">'
         + segs.map((seg) => '<span>' + esc(seg) + '</span>').join(' ') + '</p>';
 }
-/** #507 结论条（审查必改 #3）：一行判定句的浅底条，形状住公共层、**调用方只传文本**。
+/** 结论条的语气闭集（#950 B2）：`ok` 主色／`warn` 琥珀／`danger` 红／`info` 蓝，只改**强调条**底色。 */
+export const CONCLUSION_TONES = ['ok', 'warn', 'danger', 'info'];
+/** #507 结论条（审查必改 #3）＋ #950 B2 扩参：一行判定句的浅底条，形状住公共层、**调用方只传文本**。
  *
  *  与 `renderCaliberLine` 同族（页面级、单参纯文本、五字符转义同源 `esc`；样式随 `pageShell` 区落盘，
  *  不进 `BLOCK_STYLE_SECTIONS` 那 12 项闭集）。区别只在角色：口径行是**旁注**（灰小字），
@@ -257,9 +280,33 @@ export function renderCaliberLine(text) {
  *  此前这条形状是**页面内联 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>';
+ *  页面侧只留「传什么文本」。
+ *
+ *  **#950 B2 扩参（两种入参形态，串形态逐字节不变）**：
+ *   · 串：`renderConclusionBar('热量在目标内，还差 990 卡。')` —— 改前那条路，产物**一字不差**；
+ *   · 对象：`{ text, tone?, badge? }` —— 多出「语气」与「态徽标」两位：
+ *     语气只改左侧强调条的底色（1 档 3 色，取本文件里既有的同族色值），不改文字与底色；
+ *     徽标是「这句话在什么前提下成立」的短词（如「目标暂停中」），与结论句同处一行。
+ *   同时把左边框的承载方式从 `border-left` 改成 `::before`——原来 `border-left:3px` 与
+ *   `border-radius` 同处一盒时，圆角会把那条 3px 边裁成**月牙**，窄屏上读成一个游离的「(」。 */
+export function renderConclusionBar(input) {
+    if (typeof input === 'string') {
+        return '<p class="' + pageLevelBlock('conclusion') + '">' + esc(reqText(input, 'renderConclusionBar: text')) + '</p>';
+    }
+    assertPlainObject(input, 'renderConclusionBar: input');
+    assertNoInlineHandler(input, 'renderConclusionBar: input');
+    const bar = input;
+    const text = reqText(bar.text, 'renderConclusionBar: input.text');
+    const tone = bar.tone;
+    if (tone !== undefined && !CONCLUSION_TONES.includes(tone)) {
+        badInput('renderConclusionBar: input.tone 必须是 ' + CONCLUSION_TONES.join('／') + ' 之一');
+    }
+    const badge = optText(bar.badge);
+    const cls = pageLevelBlock('conclusion')
+        + (tone === undefined ? '' : ' ' + pageLevelPart('conclusion', 'tone-' + tone));
+    return '<p class="' + cls + '">'
+        + (badge === undefined ? '' : '<span class="' + pageLevelPart('conclusion', 'badge') + '">' + esc(badge) + '</span>')
+        + esc(text) + '</p>';
 }
 /** #860 正文段落（一页里「一段正文」的落点：步骤动作、菜谱描述与背景、回执失败说明）。
  *
@@ -399,8 +446,17 @@ const MINI_BAR_NAME = 'mini-bar';
 const DIST_ROW_NAME = 'dist-row';
 const CHIP_NAME = 'chip';
 const CHANGE_ROW_NAME = 'change-row';
+/** #950 回灌（对照行）：`'delta'` 形态的**组容器**（只为口径脚注有落点而存在）。 */
+const CHANGE_ROWS_NAME = 'change-rows';
 /** 箭头字形（#421-4）：`arrow: false` 靠可见性占位，字形逐字保留（栏位不塌）。 */
 const CHANGE_ARROW_GLYPH = '\u2192';
+/** 变化量的方向字形（#950 回灌·对照行）**唯一**出处：方向由件出，色只是第二样。
+ *  `＝` 取全角等号（U+FF1D）——与 `▲`／`▼` 同宽，三档字形在等宽数字栈里对齐。 */
+const CHANGE_DIRECTION_GLYPHS = Object.freeze({
+    up: '\u25b2',
+    down: '\u25bc',
+    flat: '\uff1d',
+});
 /** #421-1 占比迷你条（「数字＋图形同格」的图形侧）：一截横条按 `pct` 撑宽。
  *  只表达「一眼看出差距」，不替代图表——精确读数（坐标／悬停）仍走 `renderChartBlock` 的共享图表。 */
 export function renderMiniBar(input) {
@@ -444,9 +500,12 @@ export function renderDistributionRows(input) {
             + '</div>';
     }).join('');
 }
-/** #421-3 徽章（并列小标签，如分类／标签这类短词并排）：逐项 `<span class="ilife-block-chip">`。
- *  项即件（不另加容器类）；`items: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。 */
-export function renderChips(input) {
+/** 胶囊语气闭集（`neutral` ＝ 中性，`ok`／`warn`／`danger` 三档改边线与底色）。#950 从页面层并进来：
+ *  胶囊是区块自己的形状，它的语气与它同住一处；色值取自同仓语义色，不发明新值。 */
+export const CHIP_TONES = ['neutral', 'ok', 'warn', 'danger'];
+/** 徽章串的**唯一**产出器（`renderChips` 与 `renderChipRow` 都走这里，两件不各写一份）。
+ *  `role` 只有徽章行会给：`renderChips` 恒不给 ⇒ 它的产物里零 aria 属性（#421 的口径锁着这一条）。 */
+function chipsHtml(input, role) {
     assertPlainObject(input, 'renderChips: input');
     assertNoInlineHandler(input, 'renderChips: input');
     const block = input;
@@ -458,10 +517,23 @@ export function renderChips(input) {
         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>';
+        const text = reqText(entry.text, field + '.text');
+        const tone = entry.tone;
+        if (tone !== undefined && !CHIP_TONES.includes(tone)) {
+            badInput(field + '.tone 必须是 ' + CHIP_TONES.join('／') + ' 之一');
+        }
+        return '<span class="' + pageLevelBlock(CHIP_NAME)
+            + (tone === undefined ? '' : ' ' + pageLevelBlock(CHIP_NAME + '-' + tone)) + '"'
+            + (role === 'list' ? ' role="listitem"' : '') + '>'
+            + esc(text) + '</span>';
     }).join('');
 }
+/** #421-3 徽章（并列小标签，如分类／标签这类短词并排）：逐项 `<span class="ilife-block-chip">`。
+ *  项即件（不另加容器类）；`items: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。
+ *  要「成一行」就换 `renderChipRow`——它给这一串加容器。 */
+export function renderChips(input) {
+    return chipsHtml(input, undefined);
+}
 /** #728 徽章行（**并列标签要对齐成一行**时用这一件）：把 `renderChips` 那一串裸 `<span>` 收进一个
  *  容器 `<div>`，行距／换行／对齐交 CSS，调用方仍然只给标签文本。
  *
@@ -470,42 +542,126 @@ export function renderChips(input) {
  *  于是「一行徽章」会被摊成「一行一枚」。有了本件，徽章行是一个块级子件，栅格里占一格。
  *  `items: []` 且没给 `tailHtml` ＝ 空串（与 `renderChips` 同口径：没内容不留空块）；
  *  `items` 缺失／非数组 → `bad-input`；`tailHtml` 给了字符串即透传（与 `renderPageShell` 的
- *  `content` 同一条受信口径）。 */
+ *  `content` 同一条受信口径）。
+ *
+ *  `#950`：本件此后是**唯一**的徽章行实现。页面层原先另立过一件**同名不同参**的（入参 `{ chips }`），
+ *  两件的容器类名相同、`ChipRowInput` 类型名也相同，样式被两层各定义一次互相盖——已按「一个问题在
+ *  公共面上只留一条路」并回本件：语气位走 `ChipItemInput.tone`，`role`／`extraClass` 走本件可选位。 */
 export function renderChipRow(input) {
-    const inner = renderChips(input);
+    const role = input.role;
+    if (role !== undefined && role !== 'list' && role !== 'none') {
+        badInput('renderChipRow: input.role 必须是 list／none 之一');
+    }
+    const inner = chipsHtml(input, role);
     const tail = typeof input.tailHtml === 'string' ? input.tailHtml : '';
     if (inner === '' && tail === '')
         return '';
-    return '<div class="' + pageLevelBlock('chip-row') + '">' + inner + tail + '</div>';
+    const extra = optText(input.extraClass);
+    return '<div class="' + pageLevelBlock('chip-row') + (extra === undefined ? '' : ' ' + esc(extra)) + '"'
+        + (role === 'list' ? ' role="list"' : '') + '>' + inner + tail + '</div>';
 }
+/** 行内对照的排面闭集（不给＝`'replace'`，即改前「改前 → 改后」一行）。 */
+export const CHANGE_ROWS_VARIANTS = ['replace', 'delta'];
+/** 变化量的方向闭集（字形由件出：▲／▼／＝；色只是第二样，方向本身看得见）。 */
+export const CHANGE_DIRECTIONS = ['up', 'down', 'flat'];
+/** 变化量的语气闭集（只改颜色；`flat` ＝ 与「不给」同色，类名在场便于页面再加工）。 */
+export const CHANGE_TONES = ['ok', 'danger', 'flat'];
 /** #421-4 字段变更行（回执页「改前 → 改后」对照）：`字段名 ｜ 改前 ｜ 箭头 ｜ 改后`。
  *  `arrow: false` 只把字形藏起来、不删栏位（与老技能同一手法：左右栏靠箭位对齐）；
- *  `rows: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。 */
+ *  `rows: []` ＝ 空串；缺失（`undefined`）→ `bad-input`（非数组即拒）。
+ *
+ *  **#950 回灌（对照行 `delta-row` → 本件）**：只加可选形态 `'delta'`（**变化量为先**：第一行
+ *  标签＋变化量，第二行旧值 → 新值 ＋ 对照窗口）。`'replace'`／不给走改前那条路（逐字节相同），
+ *  且改前的四个槽（`-label`／`-old`／`-arrow`／`-new`）、`visibility:hidden` 手法、五字符转义一字不动。
+ *  `'delta'` 形态下组容器 `…-change-rows` 才出现（脚注要有落点）；`'replace'` 保持「行即件、不另加容器」的既有口径。 */
 export function renderChangeRows(input) {
     assertPlainObject(input, 'renderChangeRows: input');
     assertNoInlineHandler(input, 'renderChangeRows: input');
     const block = input;
     if (!Array.isArray(block.rows))
         badInput('renderChangeRows: input.rows 必须是数组');
+    const variant = optClosed(block.variant, CHANGE_ROWS_VARIANTS, 'renderChangeRows: input.variant');
+    const delta = variant === 'delta';
+    const footnote = block.footnote === undefined
+        ? undefined
+        : reqText(block.footnote, 'renderChangeRows: input.footnote');
     if (block.rows.length === 0)
         return '';
-    return block.rows.map((row, i) => {
+    const rows = 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) + '">'
+        if (!delta) {
+            // `'replace'`：两种主位不许混在一行——变化量与对照窗口都是 `'delta'` 的槽，给了即点名拒
+            //（不做静默忽略：静默忽略会让「我给了变化量却没出来」变成一个查不出的现象）。
+            if (item.change !== undefined)
+                badInput(field + '.change 只在 variant 为 delta 时给（replace 形态是「改前 → 改后」一行）');
+            if (item.basis !== undefined)
+                badInput(field + '.basis 只在 variant 为 delta 时给');
+            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>';
+        }
+        // `'delta'`：变化量是主语，故必给；`arrow` 是另一种主位的槽，给了即点名拒。
+        if (item.arrow !== undefined)
+            badInput(field + '.arrow 只在 replace 形态给（delta 形态没有箭位）');
+        if (item.change === undefined)
+            badInput(field + '.change 必给（delta 形态以变化量为主语）');
+        assertPlainObject(item.change, field + '.change');
+        assertNoInlineHandler(item.change, field + '.change');
+        const deltaInput = item.change;
+        const changeText = reqText(deltaInput.text, field + '.change.text');
+        const direction = optClosed(deltaInput.direction, CHANGE_DIRECTIONS, field + '.change.direction');
+        if (direction === undefined)
+            badInput(field + '.change.direction 必给（' + CHANGE_DIRECTIONS.join('／') + ' 之一）');
+        const tone = optClosed(deltaInput.tone, CHANGE_TONES, field + '.change.tone');
+        const changeUnit = optSlot(deltaInput.unit, field + '.change.unit');
+        const basis = optSlot(item.basis, field + '.basis');
+        // 变化量槽：字形（`aria-hidden`，读屏只读数字与单位）＋ 数字文本 ＋ 可选单位（`<u>` 去下划线，只是承载）。
+        const changeCls = pageLevelPart(CHANGE_ROW_NAME, 'change')
+            + (tone === undefined ? '' : ' ' + pageLevelPart(CHANGE_ROW_NAME, 'change-' + tone));
+        const changeHtml = '<span class="' + changeCls + '">'
+            + '<i class="' + pageLevelPart(CHANGE_ROW_NAME, 'change-mark') + '" aria-hidden="true">'
+            + CHANGE_DIRECTION_GLYPHS[direction] + '</i>'
+            + esc(changeText)
+            + (changeUnit === undefined ? '' : '<u class="' + pageLevelPart(CHANGE_ROW_NAME, 'change-unit') + '">'
+                + esc(changeUnit) + '</u>')
+            + '</span>';
+        // 备查行：旧值 → 新值（`→` 复用既有 `CHANGE_ARROW_GLYPH`；两值仍走既有 `cellText` 的缺值空槽），
+        // 对照窗口与前段之间那条分隔**不进产物文本**——原型里的 `·` 是字符分隔，本仓口径是「拿版式当分隔」，
+        // 故改由 `-trace-gap` 一枚空 `<i>` ＋ CSS 的间距／竖线承担。
+        const traceHtml = '<span class="' + pageLevelPart(CHANGE_ROW_NAME, 'trace') + '">'
+            + cellText(item.before, field + '.before') + ' ' + CHANGE_ARROW_GLYPH + ' '
+            + cellText(item.after, field + '.after')
+            + (basis === undefined ? ''
+                : '<i class="' + pageLevelPart(CHANGE_ROW_NAME, 'trace-gap') + '" aria-hidden="true"></i>' + esc(basis))
+            + '</span>';
+        return '<div class="' + pageLevelBlock(CHANGE_ROW_NAME) + ' '
+            + pageLevelPart(CHANGE_ROW_NAME, 'delta') + '">'
             + '<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>';
+            + changeHtml + traceHtml + '</div>';
     }).join('');
+    if (!delta)
+        return rows;
+    return '<div class="' + pageLevelBlock(CHANGE_ROWS_NAME) + '">' + rows
+        + (footnote === undefined ? ''
+            : '<div class="' + pageLevelPart(CHANGE_ROWS_NAME, 'footnote') + '">'
+                + renderCaliberLine(footnote) + '</div>')
+        + '</div>';
 }
+/** 未记录态的两个字面（值位占位与徽标词），与仓内「缺数一律写 —」同字。 */
+const KPI_PENDING_MARK = '\u2014';
+const KPI_PENDING_TEXT = '未记录';
+/** 「还差」徽章的前缀词（`gap` 位）。 */
+const KPI_GAP_PREFIX = '还差 ';
 /** #418 条位判档（只此一处）：>=90 高档／>=60 中档／其余低档。 */
 function kpiBarClass(pct) {
     if (pct >= 90)
@@ -514,31 +670,49 @@ function kpiBarClass(pct) {
         return 'bar-mid';
     return 'bar-low';
 }
-/** B-02：单张 KPI 卡（value 带 `tnum`；非法 status 由冻结语义降级 `empty`）。 */
+/** B-02：单张 KPI 卡（value 带 `tnum`；非法 status 由冻结语义降级 `empty`）。
+ *
+ *  **#950 B1 扩参**：值位可缺省（判定卡）＋「还差 N」徽章 ＋「未记录」态。
+ *  两条互斥硬止（都是「一个槽两个来源」，点名拒而不是静默择一）：
+ *   · `gap` 与 `status` 同住徽章槽；· `pending` 与 `value` 同住值位。
+ *  给了 `value`／`status`／`bar` 的既有调用点产物**逐字节不变**（本函数只加分支，不改旧路）。 */
 export function renderKpiCard(input) {
     assertPlainObject(input, 'renderKpiCard: input');
     assertNoInlineHandler(input, 'renderKpiCard: input');
     const card = input;
     const label = reqText(card.label, 'renderKpiCard: input.label');
-    const value = reqText(card.value, 'renderKpiCard: input.value');
-    const parts = ['<div class="' + blockRoot('kpiCard') + '">'];
+    const pending = card.pending === true;
+    if (card.gap !== undefined && card.status !== undefined) {
+        badInput('renderKpiCard: input.gap 与 input.status 只能给一个（同住徽章槽）');
+    }
+    if (pending && card.value !== undefined) {
+        badInput('renderKpiCard: input.pending 与 input.value 只能给一个（未记录＝值位没有数）');
+    }
+    const rootCls = blockRoot('kpiCard') + (pending ? ' ' + blockPart('kpiCard', 'pending') : '');
+    const parts = ['<div class="' + rootCls + '">'];
     parts.push('<div class="' + blockPart('kpiCard', 'label') + '">' + esc(label) + '</div>');
-    parts.push('<div class="' + blockPart('kpiCard', 'value-row') + '">'
-        + '<span class="' + blockPart('kpiCard', 'value') + '">' + esc(value) + '</span>');
+    // 值位三态：有值（旧路）／未记录（占位）／不给（判定卡：整格不出）。
     const unit = optText(card.unit);
-    if (unit !== undefined)
-        parts.push('<span class="' + blockPart('kpiCard', 'unit') + '">' + esc(unit) + '</span>');
-    parts.push('</div>');
+    if (card.value !== undefined || pending) {
+        const shown = pending ? KPI_PENDING_MARK : reqText(card.value, 'renderKpiCard: input.value');
+        parts.push('<div class="' + blockPart('kpiCard', 'value-row') + '">'
+            + '<span class="' + blockPart('kpiCard', 'value') + '">' + esc(shown) + '</span>');
+        if (unit !== undefined)
+            parts.push('<span class="' + blockPart('kpiCard', 'unit') + '">' + esc(unit) + '</span>');
+        parts.push('</div>');
+    }
     const detail = optText(card.detail);
     if (detail !== undefined)
         parts.push('<div class="' + blockPart('kpiCard', 'detail') + '">' + esc(detail) + '</div>');
     const bar = card.bar;
     if (bar !== undefined) {
         assertPlainObject(bar, 'renderKpiCard: bar');
-        const pct = bar.pct;
-        if (typeof pct !== 'number' || !Number.isFinite(pct) || pct < 0 || pct > 100) {
+        const pctRaw = bar.pct;
+        if (typeof pctRaw !== 'number' || !Number.isFinite(pctRaw) || pctRaw < 0 || pctRaw > 100) {
             badInput('renderKpiCard: bar.pct 必须在 0–100 之间');
         }
+        // 未记录时进度不可知：条照出（形状不塌），宽度归零。
+        const pct = pending ? 0 : pctRaw;
         parts.push('<div class="' + blockPart('kpiCard', 'bar') + '">'
             + '<div class="' + blockPart('kpiCard', 'bar-fill') + ' ' + blockPart('kpiCard', kpiBarClass(pct)) + '" style="width:' + pct + '%"></div>'
             + '</div>');
@@ -548,10 +722,28 @@ export function renderKpiCard(input) {
         const badge = renderStatusBadge(card.statusText === undefined ? { status } : { status, text: card.statusText });
         parts.push('<div class="' + blockPart('kpiCard', 'badge') + '">' + badge + '</div>');
     }
+    else if (card.gap !== undefined) {
+        assertPlainObject(card.gap, 'renderKpiCard: gap');
+        const gapValue = reqText(card.gap.value, 'renderKpiCard: input.gap.value');
+        const gapUnit = optText(card.gap.unit);
+        parts.push('<div class="' + blockPart('kpiCard', 'badge') + '">'
+            + '<span class="' + blockPart('kpiCard', 'gap') + '">' + KPI_GAP_PREFIX + esc(gapValue)
+            + (gapUnit === undefined ? '' : ' ' + esc(gapUnit)) + '</span></div>');
+    }
+    else if (pending) {
+        parts.push('<div class="' + blockPart('kpiCard', 'badge') + '">'
+            + '<span class="' + blockPart('kpiCard', 'gap') + '">' + KPI_PENDING_TEXT + '</span></div>');
+    }
     parts.push('</div>');
     return parts.join('');
 }
-/** B-02 伴生布局：KPI 卡网格（不是第 13 个区块，无独立样式区，用 `kpiCard` 区）。 */
+/** 网格形态闭集（与既有 `'cards'` 共存；不给＝`'cards'`）。 */
+export const KPI_GRID_VARIANTS = ['cards', 'flat'];
+/** B-02 伴生布局：KPI 卡网格（不是第 13 个区块，无独立样式区，用 `kpiCard` 区）。
+ *
+ *  **#950 回灌（读数格 `metric-grid` → 本件）**：只加可选形态 `'flat'`（整组共一个框），
+ *  缺省／`'cards'` 走改前那条路（逐字节相同）；`renderKpiCard` 的产物**一字不动**（去框全在 CSS）。
+ *  新形态多一层容器 `…-kpi-card-flat`（`@container` 需要祖先容器，元素不能当自己的容器）。 */
 export function renderKpiGrid(cards, opts) {
     if (!Array.isArray(cards) || cards.length === 0)
         badInput('renderKpiGrid: cards 必须是非空数组');
@@ -559,16 +751,23 @@ export function renderKpiGrid(cards, opts) {
         assertPlainObject(opts, 'renderKpiGrid: opts');
         assertNoInlineHandler(opts, 'renderKpiGrid: opts');
     }
-    const grid = '<div class="' + blockPart('kpiCard', 'grid') + '">'
+    const variant = opts === undefined ? undefined : optClosed(opts.variant, KPI_GRID_VARIANTS, 'renderKpiGrid: opts.variant');
+    const inner = '<div class="' + blockPart('kpiCard', 'grid') + '">'
         + cards.map((card) => renderKpiCard(card)).join('') + '</div>';
+    const grid = variant === 'flat'
+        ? '<div class="' + blockPart('kpiCard', 'flat') + '">' + inner + '</div>'
+        : inner;
     // #513：不给 title 即返回原 grid 串（与改前逐字节同）；给了即标题 h2 ＋原 grid
     // （与页面当刻手写形一致，页面票后迁可逐字节对）。标题类复用 #507 已落盘的 `kpi-card-title`
     //（15px／700），不新增类名、不新增样式区。
+    // #950：标题**仍在最前**（`h2` ＋ 形态容器 ＋ 网格），与既有次序一致。
     const title = opts === undefined ? undefined : optText(opts.title);
     if (title === undefined)
         return grid;
     return '<h2 class="' + blockPart('kpiCard', 'title') + '">' + esc(title) + '</h2>' + grid;
 }
+/** 数据表排面闭集（不给＝`'plain'`，即改前：视口驱动的窄档卡片化 ＋ 根留横滑兜底）。 */
+export const DATA_TABLE_VARIANTS = ['plain', 'carded'];
 const TABLE_ALIGNS = ['left', 'center', 'right'];
 function cellText(value, field) {
     if (value === null || value === undefined)
@@ -578,7 +777,26 @@ function cellText(value, field) {
     }
     badInput(field + ' 只许 string／number／boolean／bigint／null／undefined');
 }
-/** B-03：语义表格（`table／thead／th／td`；零行 → `renderEmptyState`，不渲染空表）。 */
+/** `bar` 列的缺值占位（#950 回灌·数据表）：与仓内「缺数一律写 —」同字（取 `KPI_PENDING_MARK` 同一字面）。 */
+const DATA_TABLE_DASH = KPI_PENDING_MARK;
+/** `bar` 列的数据格（#950 回灌·数据表）：0–100 的有限数 ⇒ 一条迷你条 ＋ 百分数；
+ *  缺值 ⇒ `—`（不画条）；其余（字串／对象／`NaN`／`Infinity`）→ `bad-input`（点名到 `rows[i].<key>`）。
+ *  条**逐字复用** `renderMiniBar`（占比迷你条的唯一实现），本件只补这一列特有的读数文本。 */
+function dataTableBarHtml(value, field) {
+    if (value === null || value === undefined)
+        return DATA_TABLE_DASH;
+    const pct = reqPct(value, field);
+    return '<span class="' + blockPart('dataTable', 'bar') + '">'
+        + renderMiniBar({ pct })
+        + '<span class="' + blockPart('dataTable', 'bar-pct') + '">' + String(pct) + '%</span>'
+        + '</span>';
+}
+/** B-03：语义表格（`table／thead／th／td`；零行 → `renderEmptyState`，不渲染空表）。
+ *
+ *  **#950 回灌（数据表 `data-table` → 本件）**：形态键只管**窄档排面**（`'carded'` ＝ 根挂容器锚点，
+ *  窄档卡化沿用既有视口媒体档——容器档那半见 `variant` 的注释），另两个槽（`bar` 列／`footnote`）
+ *  **两形态都可给**、各自可选、各自零变化。
+ *  `'plain'`／不给走改前那条路（产物与改前逐字节相同，根上 `overflow-x: auto` 的横滑兜底一字不动）。 */
 export function renderDataTable(input) {
     assertPlainObject(input, 'renderDataTable: input');
     assertNoInlineHandler(input, 'renderDataTable: input');
@@ -591,6 +809,10 @@ export function renderDataTable(input) {
     if (table.cellHtml !== undefined && typeof table.cellHtml !== 'function') {
         badInput('renderDataTable: input.cellHtml 必须是函数');
     }
+    const variant = optClosed(table.variant, DATA_TABLE_VARIANTS, 'renderDataTable: input.variant');
+    const footnote = table.footnote === undefined
+        ? undefined
+        : reqText(table.footnote, 'renderDataTable: input.footnote');
     const cellHtml = table.cellHtml;
     const columns = table.columns.map((column, i) => {
         const field = 'renderDataTable: input.columns[' + i + ']';
@@ -600,7 +822,10 @@ export function renderDataTable(input) {
         const align = column.align ?? 'left';
         if (!TABLE_ALIGNS.includes(align))
             badInput(field + '.align 必须是 left／center／right');
-        return { key, label, align: align };
+        const bar = column.bar;
+        if (bar !== undefined && typeof bar !== 'boolean')
+            badInput(field + '.bar 必须是布尔值');
+        return { key, label, align: align, bar: bar === true };
     });
     if (table.rows.length === 0) {
         const text = optText(table.emptyText) ?? '无数据';
@@ -634,9 +859,10 @@ export function renderDataTable(input) {
             // 390px 里。**只加属性**：既有类名、既有结构、既有文本一字不动，桌面档（≥641）没有任何
             // 规则引用它 ⇒ 桌面渲染逐像素不变（自证读数见证据件）。列头文本与 `th` 同源（同一个
             // `column.label`），不存在两处文案漂移。`esc` 已含 `"`（五字符表）⇒ 标签含引号也安全。
-            const text = trusted === undefined
-                ? cellText(raw, 'renderDataTable: input.rows[' + ri + '].' + column.key)
-                : trusted;
+            const text = trusted !== undefined ? trusted
+                : column.bar
+                    ? dataTableBarHtml(raw, 'renderDataTable: input.rows[' + ri + '].' + column.key)
+                    : cellText(raw, 'renderDataTable: input.rows[' + ri + '].' + column.key);
             const open = '<td class="' + blockPart('dataTable', 'cell-' + column.align) + '" data-label="' + esc(column.label) + '">';
             // #513：行标记只进首格（转义后前插；`cellHtml` 受信透传不受影响）。
             const head = ci === 0 && marker !== undefined
@@ -646,11 +872,24 @@ export function renderDataTable(input) {
         }).join('') + '</tr>';
     }).join('') + '</tbody>';
     const caption = optText(table.caption);
-    return '<div class="' + blockRoot('dataTable') + '"><table class="' + blockPart('dataTable', 'table') + '">'
+    // #950：`'carded'` 只在根上多一枚修饰类（零横滑与容器驱动全在 CSS 里，见 `dataTable` 区尾部）；
+    // `footnote` 两形态都可给，住 `</table>` 之后、根 `</div>` 之前，内层逐字走 `renderCaliberLine`。
+    const rootClass = blockRoot('dataTable')
+        + (variant === 'carded' ? ' ' + blockPart('dataTable', 'carded') : '');
+    return '<div class="' + rootClass + '"><table class="' + blockPart('dataTable', 'table') + '">'
         + (caption === undefined ? '' : '<caption class="' + blockPart('dataTable', 'caption') + '">' + esc(caption) + '</caption>')
-        + head + body + '</table></div>';
+        + head + body + '</table>'
+        + (footnote === undefined ? ''
+            : '<div class="' + blockPart('dataTable', 'footnote') + '">' + renderCaliberLine(footnote) + '</div>')
+        + '</div>';
 }
-/** B-04：图表区块（分发给冻结 `charts` 8 接口；空数组走空态／结构违规抛错恒为冻结语义）。 */
+/** 图表区块排面闭集（不给＝`'plain'`，即改前「可选标题 ＋ 图」）。 */
+export const CHART_BLOCK_VARIANTS = ['plain', 'annotated'];
+/** B-04：图表区块（分发给冻结 `charts` 8 接口；空数组走空态／结构违规抛错恒为冻结语义）。
+ *
+ *  **#950 回灌（图表框 `chart-frame` → 本件）**：只加可选形态 `'annotated'`（头栏＝标题＋单位、
+ *  图下＝口径脚注，两处注都在框里）。`'plain'`／不给走改前那条路（逐字节相同，`<h2>` 仍是
+ *  `section` 的直接子元素）；脚注**不另造口径行**，逐字走既有 `renderCaliberLine`。 */
 export function renderChartBlock(input) {
     assertPlainObject(input, 'renderChartBlock: input');
     assertNoInlineHandler(input, 'renderChartBlock: input');
@@ -660,6 +899,23 @@ export function renderChartBlock(input) {
     }
     if (block.input === null || typeof block.input !== 'object')
         badInput('renderChartBlock: input.input 必须是对象');
+    // #950：两处注只在 `'annotated'` 下生效。`'plain'` 下给了即点名拒（不做静默忽略——静默忽略会让
+    // 「我给了单位却没出来」变成一个查不出的现象）；校验排在 `charts.*` 分发**之前**，
+    // 保证这条拒绝与图表本身的取值无关（结构违规仍透传抛错，是另一条路）。
+    const variant = optClosed(block.variant, CHART_BLOCK_VARIANTS, 'renderChartBlock: input.variant');
+    const annotated = variant === 'annotated';
+    if (!annotated) {
+        if (block.unit !== undefined)
+            badInput('renderChartBlock: input.unit 只在 variant 为 annotated 时给');
+        if (block.caliber !== undefined)
+            badInput('renderChartBlock: input.caliber 只在 variant 为 annotated 时给');
+    }
+    const unit = !annotated || block.unit === undefined ? undefined
+        : reqText(block.unit, 'renderChartBlock: input.unit');
+    const caliber = annotated ? optSlot(block.caliber, 'renderChartBlock: input.caliber') : undefined;
+    if (annotated && unit === undefined && caliber === undefined) {
+        badInput('renderChartBlock: variant 为 annotated 时 input.unit 与 input.caliber 至少给一个（空形态）');
+    }
     const chartHtml = (() => {
         switch (block.kind) {
             case 'bar': return charts.bar(block.input).html;
@@ -674,18 +930,41 @@ export function renderChartBlock(input) {
         }
     })();
     const title = optText(block.title);
-    return '<section class="' + blockRoot('chartBlock') + '">'
-        + (title === undefined ? '' : '<h2 class="' + blockPart('chartBlock', 'title') + '">' + esc(title) + '</h2>')
-        + '<div class="' + blockPart('chartBlock', 'canvas') + '">' + chartHtml + '</div>'
+    const canvas = '<div class="' + blockPart('chartBlock', 'canvas') + '">' + chartHtml + '</div>';
+    if (!annotated) {
+        return '<section class="' + blockRoot('chartBlock') + '">'
+            + (title === undefined ? '' : '<h2 class="' + blockPart('chartBlock', 'title') + '">' + esc(title) + '</h2>')
+            + canvas
+            + '</section>';
+    }
+    // 头栏只在有 `title` 或 `unit` 时出（两者都没有时头栏是空的——只有 `caliber` 的框不出头栏）。
+    const head = title === undefined && unit === undefined ? ''
+        : '<div class="' + blockPart('chartBlock', 'head') + '">'
+            + (title === undefined ? '' : '<h2 class="' + blockPart('chartBlock', 'title') + '">' + esc(title) + '</h2>')
+            + (unit === undefined ? '' : '<span class="' + blockPart('chartBlock', 'unit') + '">' + esc(unit) + '</span>')
+            + '</div>';
+    return '<section class="' + blockRoot('chartBlock') + ' '
+        + blockPart('chartBlock', 'annotated') + '">'
+        + head + canvas
+        + (caliber === undefined ? ''
+            : '<div class="' + blockPart('chartBlock', 'caliber') + '">' + renderCaliberLine(caliber) + '</div>')
         + '</section>';
 }
-/** B-05：行列表（首行无边框；`done` → 删除线＋成功色；零行 → 空态）。 */
+/** 条目行组排面闭集（不给＝`'one-line'`，即改前三槽一行）。 */
+export const LIST_ROWS_VARIANTS = ['one-line', 'two-line'];
+/** B-05：行列表（首行无边框；`done` → 删除线＋成功色；零行 → 空态）。
+ *
+ *  **#950 回灌（条目行组 `list-rows` → 本件）**：只加可选形态 `'two-line'`（主行＋副语）。
+ *  行级修饰类一字不动（仍是 `-row`〔`-row-done`〕〔`-row-no-left`〕）——两行式由**根**的 `-two-line`
+ *  类驱动，行只多出中间槽的子件与右槽的单位子件 ⇒ `-row` 的栅格轨道判据（#567 D2）一字不受影响。 */
 export function renderListRows(input) {
     assertPlainObject(input, 'renderListRows: input');
     assertNoInlineHandler(input, 'renderListRows: input');
     const list = input;
     if (!Array.isArray(list.items))
         badInput('renderListRows: input.items 必须是数组');
+    const variant = optClosed(list.variant, LIST_ROWS_VARIANTS, 'renderListRows: input.variant');
+    const twoLine = variant === 'two-line';
     if (list.items.length === 0) {
         const text = optText(list.emptyText) ?? '无数据';
         return '<div class="' + blockRoot('listRows') + '">' + renderEmptyState({ text }) + '</div>';
@@ -698,19 +977,41 @@ export function renderListRows(input) {
         const done = row.done === true;
         const left = optText(row.left);
         const right = optText(row.right);
+        // #950：两个新槽只在 `'two-line'` 下生效；`'one-line'` 下给了即点名拒（不做静默忽略——
+        // 静默忽略会让「我给了副语却没出来」变成一个查不出的现象）。
+        if (!twoLine) {
+            if (row.note !== undefined)
+                badInput(field + '.note 只在 variant 为 two-line 时给');
+            if (row.unit !== undefined)
+                badInput(field + '.unit 只在 variant 为 two-line 时给');
+        }
+        // `note` 给空串即拒（副语是这一形态的内容，给了却写不出东西＝形态残缺）；`unit` 只拒非串，空串＝不给。
+        const note = twoLine && row.note !== undefined ? reqText(row.note, field + '.note') : undefined;
+        const unit = twoLine ? optSlot(row.unit, field + '.unit') : undefined;
         // 没给 `left` 时**不占那一列**：`44px` 那列是给 `▲`／`▼`／`—` 这类标记用的，而栅格是自动排布——
         // 若仍按三列排，`main` 会落进 44px 那列、被 `nowrap` ＋ `ellipsis` 截断（#154 实测：备注标签
         // 「晨起空腹」显示成「晨起…」）。修饰类只改列定义，不动任何既有行。
         const cls = blockPart('listRows', 'row')
             + (done ? ' ' + blockPart('listRows', 'row-done') : '')
             + (left === undefined ? ' ' + blockPart('listRows', 'row-no-left') : '');
+        // #950：两行式的中间槽恒出 `-main-line`（形态定骨架），`note` 缺则不出 `-note`（槽定内容）；
+        // `'one-line'` 里仍是裸文本（判据钉死：不许顺手把 `-main-line` 也加进既有形态）。
+        const mainHtml = twoLine
+            ? '<span class="' + blockPart('listRows', 'main-line') + '">' + esc(main) + '</span>'
+                + (note === undefined ? '' : '<span class="' + blockPart('listRows', 'note') + '">' + esc(note) + '</span>')
+            : esc(main);
+        const rightHtml = right === undefined ? '' : '<span class="' + blockPart('listRows', 'right') + '">'
+            + esc(right)
+            + (unit === undefined ? '' : '<span class="' + blockPart('listRows', 'unit') + '">' + esc(unit) + '</span>')
+            + '</span>';
         return '<div class="' + cls + '">'
             + (left === undefined ? '' : '<span class="' + blockPart('listRows', 'left') + '">' + esc(left) + '</span>')
-            + '<span class="' + blockPart('listRows', 'main') + '">' + esc(main) + '</span>'
-            + (right === undefined ? '' : '<span class="' + blockPart('listRows', 'right') + '">' + esc(right) + '</span>')
+            + '<span class="' + blockPart('listRows', 'main') + '">' + mainHtml + '</span>'
+            + rightHtml
             + '</div>';
     }).join('');
-    return '<div class="' + blockRoot('listRows') + '" role="list">' + rows + '</div>';
+    return '<div class="' + blockRoot('listRows')
+        + (twoLine ? ' ' + blockPart('listRows', 'two-line') : '') + '" role="list">' + rows + '</div>';
 }
 /** B-06：指令块（`<pre>` 逐字命令；无命令 → `bad-input`，不渲染空板）。 */
 export function renderPreBlock(input) {
@@ -806,13 +1107,22 @@ export function renderDisclosure(input) {
         + '<div class="' + blockPart('disclosure', 'body') + '">' + block.contentHtml + '</div>'
         + '</details>';
 }
+/** 表单排面闭集（不给＝`'stack'`，即改前单列）。 */
+export const PARAM_FORM_VARIANTS = ['stack', 'grid'];
+/** 错误行的前缀词（#950 回灌·字段行）：与原型 `parts-08-表与输入.mjs:603` 同一句读法
+ *  （`要改：2,180.00 超过单笔上限 2,000`），件出前缀、调用方只说错在哪。 */
+const PARAM_ERROR_PREFIX = '要改：';
+/** 字段槽 id 的命名空间前缀（`ilife-param-form-<name>-help|error`）。 */
+const PARAM_FORM_ID_PREFIX = 'ilife-param-form-';
 /** 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` 是显示文本；字符串项走原路，全字符串调用方的产物**逐字节不变**。 */
+ *  `label` 是显示文本；字符串项走原路，全字符串调用方的产物**逐字节不变**。
+ *  #950 回灌（字段行 `field-row` → 本件）：只加可选形态 `'grid'`（宽屏两列／窄屏一列的字段组）
+ *  ＋三个字段槽（`unit`／`helpText`／`error`）；`'stack'`／不给 ＋ 三槽全不给 ⇒ 逐字节相同。 */
 export function renderParamForm(input) {
     assertPlainObject(input, 'renderParamForm: input');
     assertNoInlineHandler(input, 'renderParamForm: input');
@@ -820,11 +1130,18 @@ export function renderParamForm(input) {
     if (!Array.isArray(form.fields) || form.fields.length === 0) {
         badInput('renderParamForm: input.fields 必须是非空数组');
     }
-    const parts = ['<div class="' + blockRoot('paramForm') + '">'];
+    const variant = optClosed(form.variant, PARAM_FORM_VARIANTS, 'renderParamForm: input.variant');
+    const rootClass = blockRoot('paramForm')
+        + (variant === 'grid' ? ' ' + blockPart('paramForm', 'grid') : '');
+    const parts = ['<div class="' + rootClass + '">'];
     const description = optText(form.description);
     if (description !== undefined) {
         parts.push('<p class="' + blockPart('paramForm', 'description') + '">' + esc(description) + '</p>');
     }
+    // #950：`'grid'` 才把逐字段收进 `-fields` 一格组；`-description` 与 `-preview` 留在它**外面**
+    //（那是整组的头尾，不是字段——收进去会把说明行也摆成栅格项）。
+    if (variant === 'grid')
+        parts.push('<div class="' + blockPart('paramForm', 'fields') + '">');
     form.fields.forEach((field, i) => {
         const path = 'renderParamForm: input.fields[' + i + ']';
         assertPlainObject(field, path);
@@ -848,42 +1165,69 @@ export function renderParamForm(input) {
         if (options !== undefined && (step !== undefined || min !== undefined || max !== undefined)) {
             badInput(path + '.options 与 step／min／max 互斥');
         }
+        // #950 三个字段槽：`unit`／`error` 给空串即拒（给了却写不出东西＝形态残缺）；
+        // `helpText` 只拒非串（空串＝不给这一行，与 `optText` 同口径）。
+        const unit = item.unit === undefined ? undefined : reqText(item.unit, path + '.unit');
+        const helpText = optSlot(item.helpText, path + '.helpText');
+        const errorText = item.error === undefined ? undefined : reqText(item.error, path + '.error');
+        // aria 只描述**实际存在**的那几行（`-help` → `-error` 按产物次序拼）；`aria-invalid` 跟 `error` 走。
+        const helpId = PARAM_FORM_ID_PREFIX + esc(name) + '-help';
+        const errorId = PARAM_FORM_ID_PREFIX + esc(name) + '-error';
+        const described = (helpText === undefined ? '' : helpId)
+            + (helpText !== undefined && errorText !== undefined ? ' ' : '')
+            + (errorText === undefined ? '' : errorId);
+        const aria = (errorText === undefined ? '' : ' aria-invalid="true"')
+            + (described === '' ? '' : ' aria-describedby="' + described + '"');
+        const fieldOpen = '<label class="' + blockPart('paramForm', 'field') + '">'
+            + '<span class="' + blockPart('paramForm', 'label') + '">' + esc(label)
+            + (required ? '<span class="' + blockPart('paramForm', 'required') + '" aria-hidden="true"> *</span>' : '')
+            + '</span>';
+        const helpHtml = helpText === undefined
+            ? ''
+            : '<span class="' + blockPart('paramForm', 'help') + '" id="' + helpId + '">' + esc(helpText) + '</span>';
+        const errorHtml = errorText === undefined
+            ? ''
+            : '<span class="' + blockPart('paramForm', 'error') + '" id="' + errorId + '">'
+                + PARAM_ERROR_PREFIX + esc(errorText) + '</span>';
+        /** 单位后缀：给了才包 `-control`（那一层就是后缀的落点），不给时控件原样落进 `label`。 */
+        const wrapControl = (html) => (unit === undefined ? html
+            : '<span class="' + blockPart('paramForm', 'control') + '">' + html
+                + '<span class="' + blockPart('paramForm', 'unit') + '">' + esc(unit) + '</span></span>');
         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>'
+            parts.push(fieldOpen
+                + wrapControl('<select class="' + blockPart('paramForm', 'input') + '"' + aria
+                    + ' 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>')
+                + helpHtml + errorHtml
                 + '</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') + '"'
-            + (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) + '"')
-            + ' />'
+        parts.push(fieldOpen
+            + wrapControl('<input class="' + blockPart('paramForm', 'input') + '"' + aria
+                + (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) + '"')
+                + ' />')
+            + helpHtml + errorHtml
             + '</label>');
     });
+    if (variant === 'grid')
+        parts.push('</div>');
     if (typeof form.previewText === 'string' && form.previewText !== '') {
         parts.push('<pre class="' + blockPart('preBlock', 'code') + ' ' + blockPart('paramForm', 'preview') + '">'
             + esc(form.previewText) + '</pre>');
@@ -1217,9 +1561,9 @@ const BLOCK_SECTION_BUILDERS = {
         // 审查第 3 点给的形态就是这一条「左 3px 主色边 ＋ 浅底」，它同时把**结论条**与 `renderStatusBadge`
         // 的「`--soft` 底 ＋ 色字」形态分开——此前两者底同、字色同，一个静态陈述一个算出来的档位却长得一样。
         '.' + p + 'block-conclusion {',
+        '  position: relative;',
         '  margin: 0 0 16px;',
         '  padding: 12px 16px;',
-        '  border-left: 3px solid var(--blue);',
         '  border-radius: ' + RADIUS_MD + 'px;',
         '  background: var(--card);',
         '  color: var(--blue2);',
@@ -1227,6 +1571,44 @@ const BLOCK_SECTION_BUILDERS = {
         '  font-size: 15px;',
         '  font-weight: 600;',
         '}',
+        // #950 B2：左边框改由伪元素承载。原来 `border-left: 3px solid` 与 `border-radius: 14px` 同处一盒，
+        // 圆角会把那条 3px 边**裁成月牙**（窄屏上读成一个游离的「(」，用户 2026-09-24 图报）；
+        // 伪元素与圆角互不干涉，强调条的位置与粗细逐值不变（左 0／宽 3px／上下各让 12px 内距）。
+        '.' + p + 'block-conclusion::before {',
+        '  content: "";',
+        '  position: absolute;',
+        '  left: 0;',
+        '  top: 12px;',
+        '  bottom: 12px;',
+        '  width: 3px;',
+        '  border-radius: 2px;',
+        '  background: var(--blue);',
+        '}',
+        // #950 B2 语气四档：**只改强调条底色**（文字色与底一个字不动——不引入新的浅底色值）。
+        // 三档取本文件里既有的同族色值（条位三档同源 `#34c759`／`#ff9500`／`#ff3b30`），`info` 用主色 token。
+        '.' + p + 'block-conclusion-tone-ok::before {',
+        '  background: #34c759;',
+        '}',
+        '.' + p + 'block-conclusion-tone-warn::before {',
+        '  background: #ff9500;',
+        '}',
+        '.' + p + 'block-conclusion-tone-danger::before {',
+        '  background: #ff3b30;',
+        '}',
+        '.' + p + 'block-conclusion-tone-info::before {',
+        '  background: var(--blue);',
+        '}',
+        // #950 B2 态徽标（「这句话在什么前提下成立」的短词，与结论句同处一行）。
+        '.' + p + 'block-conclusion-badge {',
+        '  display: inline-block;',
+        '  margin-right: 8px;',
+        '  padding: 2px 8px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--fg2);',
+        '  font-size: 12px;',
+        '  font-weight: 700;',
+        '}',
         // #860 正文段落件（一段正文的落点）：排印与正文同档（15px／1.7），色只取冻结 `--fg`；
         // 取值出处＝`t768` 原型页内补丁 `.v768-prose`（15px／1.7／`var(--fg)`）逐值上移，
         // 间距取 8px 档（区块层既有节奏：口径行下距／标题下距同值，不新造）；
@@ -1432,6 +1814,26 @@ const BLOCK_SECTION_BUILDERS = {
         '  padding-top: 0;',
         '  padding-bottom: 0;',
         '}',
+        // #950：胶囊语气三档（`ok`／`warn`／`danger`）随件**移籍**到这里——原先住在页面层
+        //   （`pageNavCss` 的 chip 段，前缀 `.ilife-page-ui`）。移籍两个理由：① 胶囊的语气是胶囊
+        //   自己的皮肤，跟它同住一处；② 两层各定义一次同一个容器类会互相盖（页面层那条会吃掉
+        //   区块层的 `margin: 0 0 8px`，既有调用点的下边距被悄悄改）。值一字未改。
+        //   `neutral` 不写规则：它与「不给 tone」同色，只是类名在场，方便页面自己再加工。
+        '.' + p + 'block-chip-ok {',
+        '  border-color: rgba(52, 199, 89, .38);',
+        '  background: rgba(52, 199, 89, .12);',
+        '  color: #1a7f4b;',
+        '}',
+        '.' + p + 'block-chip-warn {',
+        '  border-color: rgba(199, 119, 0, .34);',
+        '  background: rgba(255, 159, 10, .14);',
+        '  color: #a15a06;',
+        '}',
+        '.' + p + 'block-chip-danger {',
+        '  border-color: rgba(192, 57, 43, .34);',
+        '  background: rgba(255, 59, 48, .12);',
+        '  color: #8f2f24;',
+        '}',
         '.' + p + 'block-change-row {',
         '  display: flex;',
         '  align-items: baseline;',
@@ -1492,6 +1894,77 @@ const BLOCK_SECTION_BUILDERS = {
         '    margin: 12mm;',
         '  }',
         '}',
+        // #950 回灌（对照行 `delta-row` 形态 A「极简变化式」）：主语从「改前 → 改后」换成「变化量」。
+        // 本节十条规则排在 `pageShell` 区**尾部**（与既有五条 `change-row` 规则同区、源序在后），
+        // 一切覆盖既有槽位的写法都带祖先前缀（`.…-change-row-delta .…-change-row-label`）
+        // ⇒ `-change-row-label` 的基座规则仍恰 1 条；新槽位（`-change`／`-trace`／语气三档…）用新类名。
+        // 版式：两列栅格（标签可缩、变化量只吃内容宽），备查行横跨两列。
+        '.' + p + 'block-change-row-delta {',
+        '  display: grid;',
+        '  grid-template-columns: minmax(0, 1fr) auto;',
+        '  gap: 2px 12px;',
+        '  align-items: baseline;',
+        '}',
+        '.' + p + 'block-change-row-delta .' + p + 'block-change-row-label {',
+        '  grid-column: 1;',
+        '}',
+        // 变化量：主位，21px／700；`nowrap` 只吃内容宽（第二列 `auto`），第一列 `minmax(0, 1fr)` 可缩
+        // ⇒ 超长标签由 `-label` 折行承担，窄档不横向溢出。不设任何 `text-overflow`（关键语义不许被 `…` 截断）。
+        '.' + p + 'block-change-row-change {',
+        '  font-size: 21px;',
+        '  font-weight: 700;',
+        '  white-space: nowrap;',
+        '  text-align: right;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        '.' + p + 'block-change-row-change-mark {',
+        '  font-style: normal;',
+        '  font-size: 13px;',
+        '  margin-right: 2px;',
+        '}',
+        '.' + p + 'block-change-row-change-unit {',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '  margin-left: 3px;',
+        '  text-decoration: none;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '}',
+        // 语气三档只改 `color`：方向本身由字形承担，色不是唯一信息（色盲可读）。
+        '.' + p + 'block-change-row-change-ok {',
+        '  color: ' + skinVar('ok') + ';',
+        '}',
+        '.' + p + 'block-change-row-change-danger {',
+        '  color: ' + skinVar('danger') + ';',
+        '}',
+        '.' + p + 'block-change-row-change-flat {',
+        '  color: ' + skinVar('ink-3') + ';',
+        '}',
+        '.' + p + 'block-change-row-trace {',
+        '  grid-column: 1 / -1;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: 12px;',
+        '  line-height: 1.5;',
+        '  overflow-wrap: anywhere;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        // 对照窗口与前段之间的那条分隔：一枚空 `<i>` 出竖线 ＋ 两侧留白（字符不进产物文本）。
+        '.' + p + 'block-change-row-trace-gap {',
+        '  display: inline-block;',
+        '  width: 1px;',
+        '  height: 1em;',
+        '  margin: 0 5px;',
+        '  border-left: 1px solid ' + skinVar('line') + ';',
+        '}',
+        // 口径脚注的承载层：只出上边线与上距；内层口径行（`renderCaliberLine` 的唯一产物）边距归零，
+        // 免得与页面里那些口径行撞版式。
+        '.' + p + 'block-change-rows-footnote {',
+        '  margin-top: 10px;',
+        '  padding-top: 8px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '}',
+        '.' + p + 'block-change-rows-footnote > .' + p + 'block-caliber {',
+        '  margin: 0;',
+        '}',
     ].join(LF),
     kpiCard: (p) => [
         // #179 类名对账（硬证据：`.scratch/t179` 的类名对账脚本）：本区 6 条内层规则此前写成
@@ -1601,6 +2074,19 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-kpi-card-bar-low {',
         '  background: #ff3b30;',
         '}',
+        // #950 B1：「还差 N 单位」徽章（与状态徽章**同槽**，故同位同形）＋「未记录」态的值位降调。
+        '.' + p + 'block-kpi-card-gap {',
+        '  display: inline-block;',
+        '  padding: 2px 8px;',
+        '  border-radius: ' + RADIUS_PILL + 'px;',
+        '  background: var(--soft);',
+        '  color: var(--fg2);',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '}',
+        '.' + p + 'block-kpi-card-pending .' + p + 'block-kpi-card-value {',
+        '  color: var(--fg2);',
+        '}',
         // #507 段标题统一（审查必改 #5）：`blocks.ts` 从 #401 起就给过这条类名产出器的位置
         // （`homeDocs.ts:247` 用 `<h2 class="ilife-block-kpi-card-title">` 出「今日速览」段标题），
         // 但**本区从来没有这条 CSS 规则** ⇒ 那个 h2 一路落回浏览器缺省 `h2{font-size:1.17em}`
@@ -1630,6 +2116,49 @@ const BLOCK_SECTION_BUILDERS = {
         '    grid-template-columns: minmax(0, 1fr);',
         '  }',
         '}',
+        // #950 回灌（读数格 `metric-grid` 形态 C「无框栅格」）：框从「每卡」搬到「整组」——
+        // 卡自身的边框／圆角／底／投影全撤，卡间改出发丝线，主数字提一档（22px → 30px）。
+        // 三条纪律落点（照 `0.3`）：
+        //  ① **源序**：本节七条规则排在区内两条既有媒体规则**之后**——新形态与 `.…-page-shell .…-kpi-card-grid`
+        //     覆盖同一个类名，本仓没有层叠层（`@layer`），同特异性下先到者胜 ⇒ 必须靠源序取胜
+        //     （将来谁把这段挪到媒体段之前，`test/blocks.test.mjs` 的源序判据当场红）；
+        //  ② **基座规则恰 1 条**：覆盖既有槽位一律写祖先前缀（`.…-flat .…-kpi-card`），
+        //     不给 `.…-kpi-card` 再写一条同名基础规则（`test/ui-fix-154.test.mjs` 的 `declsOf` 会把同名数成 2 条）；
+        //  ③ **皮肤读法**：色值一律经 `skinVar()`（产出的兜底链落到同一个冻结 token ⇒ 未挂皮肤的页上无色差），
+        //     未挂皮肤的页上兜底链落在同一个冻结 token ⇒ 与既有规则并置无色差。
+        // `container-type: inline-size` 挂在新容器上：`@container` 要有一个祖先容器，元素不能当自己的容器。
+        '.' + p + 'block-kpi-card-flat {',
+        '  container-type: inline-size;',
+        '}',
+        '.' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card-grid {',
+        '  display: grid;',
+        '  grid-template-columns: minmax(0, 1fr);',
+        '  gap: 0;',
+        '}',
+        // 主数字提一档（识别特征：只有数字与发丝线，卡上不再有框）。
+        '.' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card-value {',
+        '  font-size: 30px;',
+        '}',
+        // 容器 ≥461px：两列成组。格间发丝线由卡的 `border-top` ＋ 偶数列的 `border-left` 出（首行无顶线）。
+        '@container (min-width: 461px) {',
+        '  .' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card-grid {',
+        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '  }',
+        '  .' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card {',
+        '    border: 0;',
+        '    border-radius: 0;',
+        '    background: none;',
+        '    box-shadow: none;',
+        '    padding: 12px 14px;',
+        '    border-top: 1px solid ' + skinVar('line') + ';',
+        '  }',
+        '  .' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card:nth-child(-n+2) {',
+        '    border-top: 0;',
+        '  }',
+        '  .' + p + 'block-kpi-card-flat .' + p + 'block-kpi-card:nth-child(even) {',
+        '    border-left: 1px solid ' + skinVar('line') + ';',
+        '  }',
+        '}',
     ].join(LF),
     dataTable: (p) => [
         // #154（2026-09-14 交付页返工）① 区块间距：本区块级此前**一条 margin 都没有**（只有 caption／th／td
@@ -1877,6 +2406,45 @@ const BLOCK_SECTION_BUILDERS = {
         '    text-align: left;',
         '  }',
         '}',
+        // #950 回灌（数据表 `data-table` 形态 A）：以下规则排在 `dataTable` 区**尾部**（既有媒体段之后）。
+        // 覆盖既有槽位一律走新类名或祖先前缀 ⇒ `.…-data-table`／`.…-mini-bar` 的基座规则各仍恰 1 条
+        //（`test/ui-fix-154.test.mjs` 的 `declsOf` 口径）。**既有 ≤640 段一字不动**：本形态只挂修饰类，
+        // 窄档卡化仍由那条既有媒体段（视口驱动）承担；`overflow-x: auto` 的横滑兜底也不撤。
+        // **未落的一半（交裁记录）**：设计 §5.4 指定的 `@container (max-width: 560px)` 段（把既有 ≤640 段的
+        // 声明组复制到容器档、再把根上的横滑兜底换成 `overflow-x: visible`）**本轮不落**——它一旦落在媒体段
+        // 之外，就会让 `table-mobile-t541` ③／`table-caption-box-547`／`rowcard-caliber-t154r3` ③ 三条既有判据
+        // 变红（那三条按「切掉 ≤640 段后剩下的就是桌面档」扫全表文本，而卡化声明本就含 `data-label`／`attr(`／
+        // `thead`／`space-between` 这些断点）。故 `'carded'` 现只挂容器锚点：窄档排面沿用既有视口媒体档，
+        // 等设计席改判（改那三条判据，或接受把容器段嵌进既有媒体段而牺牲「容器比视口更早卡化」）。
+        '.' + p + 'block-data-table-carded {',
+        '  container-type: inline-size;',
+        '}',
+        // 行内迷你条列：条吃余宽、百分数贴右。只在本列命中（`.…-mini-bar` 的基座 `width: 72px` 不动）。
+        '.' + p + 'block-data-table-bar {',
+        '  display: flex;',
+        '  align-items: center;',
+        '  gap: 6px;',
+        '  min-width: 0;',
+        '}',
+        '.' + p + 'block-data-table-bar .' + p + 'block-mini-bar {',
+        '  width: auto;',
+        '  flex: 1 1 24px;',
+        '  min-width: 24px;',
+        '}',
+        '.' + p + 'block-data-table-bar-pct {',
+        '  flex: 0 0 auto;',
+        '  text-align: right;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        // 表下口径脚注的承载层：只出上边线与边距；内层口径行（`renderCaliberLine` 的唯一产物）边距归零。
+        '.' + p + 'block-data-table-footnote {',
+        '  margin: 0 14px 12px;',
+        '  padding-top: 8px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '}',
+        '.' + p + 'block-data-table-footnote > .' + p + 'block-caliber {',
+        '  margin: 0;',
+        '}',
     ].join(LF),
     chartBlock: (p) => [
         '.' + p + 'block-chart-block {',
@@ -1898,6 +2466,36 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-chart-block-canvas {',
         '  padding: 0;',
         '}',
+        // #950 回灌（图表框 `chart-frame` 形态 A「带注的图表框」）：头栏（标题＋单位）＋图＋口径脚注。
+        // 本节五条规则排在 `chartBlock` 区**尾部**；`-head .-title { margin: 0 }` 是**覆盖既有声明**
+        // （既有 `-title` 有 `margin: 0 0 10px`，那是标题单独一行时的下边距），选择器带祖先前缀、
+        // 排在后面 ⇒ 基座规则不受影响（`declsOf` 仍恰 1 条），源序取胜。
+        // 图例与画布盒**不落**（`charts.*` 已出图例：`options.legend`；图的盒子归 `options.height/width`）——
+        // 同一概念不许开第二条路，见设计 §4.2。
+        '.' + p + 'block-chart-block-head {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 10px;',
+        '}',
+        '.' + p + 'block-chart-block-head .' + p + 'block-chart-block-title {',
+        '  margin: 0;',
+        '}',
+        '.' + p + 'block-chart-block-unit {',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '}',
+        // 脚注承载层：只出上边线与上距；`overflow-wrap: anywhere` 让整行折行、关键语义不被 `…` 截断。
+        '.' + p + 'block-chart-block-caliber {',
+        '  margin-top: 10px;',
+        '  padding-top: 8px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '.' + p + 'block-chart-block-caliber > .' + p + 'block-caliber {',
+        '  margin: 0;',
+        '}',
     ].join(LF),
     listRows: (p) => [
         // #154（2026-09-14 交付页返工）① 区块间距：同 dataTable——本区块级此前一条 margin 都没有
@@ -1947,6 +2545,49 @@ const BLOCK_SECTION_BUILDERS = {
         '  color: var(--ok);',
         '  text-decoration: line-through;',
         '}',
+        // #950 回灌（条目行组 `list-rows` 形态 B「两行式」）：中间槽拆成主行＋副语，行高提一档、
+        // 交叉轴对齐改顶对齐（长副语折行时主行仍在首行）。本节七条规则排在 `listRows` 区**尾部**；
+        // 覆盖既有槽位一律带祖先前缀 `.…-two-line` ⇒ `-row`／`-row-no-left`／`-left`／`-main`／`-right`／
+        // `-row-done` 的基座规则各仍恰 1 条，`-row` 的两份轨定义一字不动（#567 D2 不受影响）。
+        // 两行式由**根**的类驱动（不在行上加类）：行级修饰类保持既有三件，`role="list"` 也不动。
+        '.' + p + 'block-list-rows-two-line .' + p + 'block-list-rows-row {',
+        '  min-height: 56px;',
+        '  align-items: start;',
+        '}',
+        // 取消中槽的 `ellipsis`／`nowrap`（改折行）——只在两行式里；既有 `'one-line'` 的截断一字不动
+        //（它是 40+ 处调用点的既有观感）。
+        '.' + p + 'block-list-rows-two-line .' + p + 'block-list-rows-main {',
+        '  overflow: visible;',
+        '  text-overflow: clip;',
+        '  white-space: normal;',
+        '}',
+        // 右读数恒单行（金额／时长不许截断，也不许拆行）：中槽可缩（`minmax(0, 1fr)`），故不顶破容器。
+        '.' + p + 'block-list-rows-two-line .' + p + 'block-list-rows-right {',
+        '  white-space: nowrap;',
+        '}',
+        '.' + p + 'block-list-rows-main-line {',
+        '  display: block;',
+        '  font-size: 15px;',
+        '  font-weight: 600;',
+        '}',
+        '.' + p + 'block-list-rows-note {',
+        '  display: block;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: 12px;',
+        '  line-height: 1.45;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '.' + p + 'block-list-rows-unit {',
+        '  margin-left: 1px;',
+        '  font-size: 12px;',
+        '  font-weight: 400;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '}',
+        // 完成态的两个信号照旧（删除线 ＋ 成功色），只把落点从中槽移到主行（副语不划线更好读）。
+        '.' + p + 'block-list-rows-two-line .' + p + 'block-list-rows-row-done .' + p + 'block-list-rows-main-line {',
+        '  text-decoration: line-through;',
+        '  color: ' + skinVar('ok') + ';',
+        '}',
     ].join(LF),
     preBlock: (p) => [
         '.' + p + 'block-pre-block {',
@@ -2129,6 +2770,60 @@ const BLOCK_SECTION_BUILDERS = {
         '.' + p + 'block-param-form-preview {',
         '  margin-top: 10px;',
         '}',
+        // #950 回灌（字段行 `field-row` 形态 A「宽屏两列／窄屏一列的字段组」）：本节九条规则排在
+        // `paramForm` 区**尾部**。列数由**容器**驱动（`@container`），与 `pageUi` 的视口配方各管各档。
+        // 除 `.…-grid`（新类名）外，一切覆盖既有槽位的写法都带祖先前缀 `.…-grid`／`.…-control`
+        // ⇒ `-input`／`-label`／`-field` 的基座规则各仍恰 1 条（`test/ui-fix-154.test.mjs` 的 `declsOf`）。
+        // 「两列栅格是排面、不是皮肤」：列数写死在容器查询里，不进任何皮肤取值表。
+        '.' + p + 'block-param-form-grid {',
+        '  container-type: inline-size;',
+        '}',
+        '.' + p + 'block-param-form-grid .' + p + 'block-param-form-fields {',
+        '  display: grid;',
+        '  grid-template-columns: minmax(0, 1fr);',
+        '  gap: 0 16px;',
+        '}',
+        // 两列的每一格不许溢出：栅格项缺省 `min-width: auto` 会被长内容（长标签／长值）顶破轨道。
+        '.' + p + 'block-param-form-grid .' + p + 'block-param-form-fields > * {',
+        '  min-width: 0;',
+        '}',
+        '@container (min-width: 461px) {',
+        '  .' + p + 'block-param-form-grid .' + p + 'block-param-form-fields {',
+        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '  }',
+        '}',
+        // 控件 ＋ 单位后缀。`gap: 8px` 与 `-input` 的 `min-height: 44px` 一起保证 44px 命中盒与
+        // 相邻项的间距 ≥8px（触控目标口径不动）；`flex-wrap: wrap` 让窄档下后缀换行、不顶破容器。
+        '.' + p + 'block-param-form-control {',
+        '  display: flex;',
+        '  align-items: center;',
+        '  gap: 8px;',
+        '  flex-wrap: wrap;',
+        '}',
+        '.' + p + 'block-param-form-control .' + p + 'block-param-form-input {',
+        '  flex: 1 1 8em;',
+        '  min-width: 0;',
+        '}',
+        '.' + p + 'block-param-form-unit {',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: 13px;',
+        '  white-space: nowrap;',
+        '}',
+        '.' + p + 'block-param-form-help {',
+        '  display: block;',
+        '  margin-top: 4px;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: 12px;',
+        '  line-height: 1.5;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '.' + p + 'block-param-form-error {',
+        '  display: block;',
+        '  margin-top: 4px;',
+        '  color: ' + skinVar('danger') + ';',
+        '  font-size: 12px;',
+        '  line-height: 1.5;',
+        '}',
     ].join(LF),
     emptyBlock: (p) => [
         '.' + p + 'block-empty-block {',
@@ -2281,4 +2976,12 @@ export function blocksCss(input) {
 }
 /* ── 再导出冻结引用（只读透传，方便 108–113 从单一入口取双属性名；零新语义） ── */
 export { ACTION_ID_ATTR, COPY_ACTION_IDS, DEFAULT_DATA_ATTR, TOAST_DEFAULTS };
+/* ── 组件层薄转出（`src/components/**`：一个组件一个目录的**可演进组合层**） ──
+ *
+ * 为什么走本文件的出口而不是根出口：根出口（`src/index.ts`）与 `SPEC_FROZEN_SURFACE` 逐名绑死
+ * （签名测试钉死「新增运行时出口恰好等于清单里 implemented 的项」）；组件层属**防火墙层**
+ * （不进 `SPEC_FROZEN_SURFACE`、不从根导出，见 `src/components/index.ts`），可以独立演进。
+ * 组件自带的样式／运行时**随页 opt-in**（`renderDocShell({ editableValue: true })`）⇒ 不用它的页产物零变化。
+ * **新增组件只改 `src/components/index.ts` 一行**，不必回来动本文件。 */
+export * from './components/index.js';
 //# sourceMappingURL=blocks.js.map