base-paint 0.3.13 → 0.3.15

package/dist/components/page-ui/index.js

@@ -0,0 +1,394 @@
+/** #525 · 页面级移动端配方（共用件）：把 HELP 页当刻的手机端能力搬进「结果型／过程型／回执」
+ *  三类页面共走的那条链，一次到位，四张下游票照抄而不必各写一遍。
+ *
+ *  谁在用（写得出哪两个在用）：**卡路里**的整页装配 `src/shared/docPage.ts` 的 `pageUi` 可选位
+ *  （`skill-calorie/src/shared/docPage.ts` 传 `pageUi: true` 时把本函数拼进 `sharedCssText`）；
+ *  **样板页** `.scratch/t525/` 的 `查身材照` 目标形态（票 #525 的照抄对象）。
+ *
+ *  为什么另立一件而不写进 `blocks.ts`：`blocks.ts` 是 12 个区块样式区的唯一定义地，本件是
+ *  **页面级**配方（断点／触摸区／安全区／窄屏表格行为），与 12 区无组合关系——与同仓先例
+ *  `block-toc`（页内导航）、`block-caliber`（口径行）、`block-conclusion`（结论条）落
+ *  `pageShell` 区同一类东西，只是体量更大，故另立文件。（#525 开工当刻 `blocks.ts` 有第二个
+ *  写窗在途，见 `docs/skills/skill-calorie/t525-证据.md` 的并发记账。）
+ *
+ *  口径（票面「手机端基准＝HELP 页当刻的能力，不是新设计」）逐条：
+ *   · 断点只用仓内既有值 **820／640／400**（`blocks.ts` 的 640、`TOAST_DEFAULTS.mobileMaxPx`
+ *     的 820、`style.ts` 的 400），**不新造断点值**；
+ *   · 触摸区 ≥44×44px（HELP `.ilife-copy-btn` 820 档 `min-height:44px` 同值）；
+ *   · 判据数值（触摸下限／正文字号下限／断点集合）的唯一一处定义地＝本件 `PAGE_LIMITS`（#868）；
+ *   · `env(safe-area-inset-*)`（HELP toast 与回顶按钮同法；须配 `viewport-fit=cover`）；
+ *   · 页脚留白 60px（HELP `.ilife-help-shell` 640 档 `padding: 20px 16px 60px` 逐值同）；
+ *   · 读数卡窄屏两格 → 400 档单列（HELP `.ilife-help-shell-grid` 640 档单列的同一条意图）；
+ *   · 页内定位：带 `id` 的区块吃 `scroll-margin-top`，锚点跳转不把标题顶到视口外。
+ *
+ *  **全部规则都挂在根类 `.ilife-page-ui` 之下**：没启用本配方的页面一条都命中不到
+ *  （产出物逐字节不变，登录门读数见证据件）。
+ */
+/** 起点色值口径：与 `blocks.ts` 同一条冻结 token 表；本件不新增 token、不新增色值。 */
+import { ACTION_BAR_DEFAULTS } from '../../spec/index.js';
+import { toastUiCss } from './toast.js';
+const LF = String.fromCharCode(10);
+/** 页面级配方的根类名：整页装配把这一颗类加到版面根上（`docPage.ts` 的 `pageUi` 位）。 */
+export const PAGE_UI_CLASS = 'ilife-page-ui';
+/** 配 `viewport-fit=cover` 的 viewport 串（`env(safe-area-inset-*)` 在 iOS 上不写它恒取 0）。
+ *  只在启用本配方时用它替换旧串；不给即老串（旧调用方逐字节不变）。 */
+export const PAGE_UI_VIEWPORT = 'width=device-width,initial-scale=1,viewport-fit=cover';
+/** #868 页面级判据数值（唯一一处定义地）：判分引擎与各域从这里取，不许在别处另写一份字面量。
+ *
+ *  · `touchMinPx`（44）＝ 可点控件的最小命中高度，与 `spec/controls.ts` 的
+ *    `ACTION_BAR_DEFAULTS.minHeightPx` 是**同一个数、同一件事**（此处只引用，不重写）；
+ *  · `textMinPx`（12）＝ 正文类字号下限，与下面 ⑥ 那条媒体查询**逐值同源**（同一个常量写进 CSS）；
+ *  · `breakpointsPx` ＝ 仓内既有断点集合，断点只许从这一份里取，不新造。
+ *
+ *  判分引擎住包内 `scripts/判分.mjs`，按包内相对路径取 `dist/pageUi.js` 的本件。 */
+export const PAGE_LIMITS = Object.freeze({
+    touchMinPx: ACTION_BAR_DEFAULTS.minHeightPx,
+    textMinPx: 12,
+    breakpointsPx: Object.freeze([400, 640, 820, 1001, 1200]),
+});
+/** #950 C1 正文列宽四档（闭集）：**缺省 `centered` ＝ 改前行为**。
+ *  · `centered`：正文 880 居中 ＋ 满铺白名单（表／图／卡排／键值行满铺）；
+ *  · `wide`：正文 1120 居中（同族先例：缺口页页宽 1120）；
+ *  · `full`：不收窄，正文满铺页壳（1280）；
+ *  · `locked`：880 居中且**满铺白名单失效**（所有子件都收进正文列）——这一档正是两个技能包
+ *    各自写过的垫片（`skill-calorie` 的 `ONE_COLUMN_CSS`／`workoutPlanCss.ts` 的 `PREVIEW_COLUMN_CSS`），
+ *    「两个包各写一份垫片 ＝ 公共层缺一个参数」，故提到这里当参数。 */
+export const PAGE_COLUMNS = ['centered', 'wide', 'full', 'locked'];
+/** 两档正文列宽（px）：`centered`／`locked` 用 880（改前既有值），`wide` 用 1120。 */
+export const PAGE_COLUMN_WIDTH_PX = Object.freeze({ centered: 880, wide: 1120 });
+/** #950 C1：宽屏档（≥1001px）那一段 CSS——按 `column` 四档生成。
+ *  `centered` 档吐出的选择器与值**逐条与改前相同**（顺序也相同），只在最前补一句档位说明。 */
+function columnCss(column, root, p) {
+    const width = column === 'wide' ? PAGE_COLUMN_WIDTH_PX.wide : PAGE_COLUMN_WIDTH_PX.centered;
+    const out = [
+        '/* #950 C1 正文列宽档：`' + column + '`（`centered` 缺省＝改前行为；`wide` 1120／`full` 满铺／',
+        '   `locked` 满铺白名单失效——后两档分别替掉页面侧改宽度与锁单列的垫片）。 */',
+        '/* ⑧ 宽屏把可用宽用起来（#525 第二轮；来源＝#525 席位版面档重判里**双方都认的那一条**',
+        '   「1280 档没把宽屏用起来」，以及编排者 2026-09-15 的补记：页面模板 960 在 1280 档左右各空 140px）。',
+        '   口径＝「宽屏不空荡、正文不散」：页面模板从 `blocks.ts` 的 960（那儿是别票写集，本件不改它）',
+        '   放宽到 **1280**，正文收成 **880px 一列**居中，栅格类与真二维数据（读数卡／表／图／键值行／',
+        '   列表行）满铺可用宽。为什么用栅格而不是 12 条 `max-width`：正文类块在各票里长得不一样，',
+        '   靠「不漏掉某个类名」的清单法必然漏（第一版注入候选就漏了无类名的 `section`），',
+        '   栅格是**默认收窄、显式放宽**，漏不掉。',
+        '   `box-sizing: border-box` 是本条的前提：本仓没有 `*{box-sizing}` 全局复位（`blocks.ts` 的',
+        '   pageShell 区注明「不搬 HELP 那一条」），页面模板是 content-box ⇒ 不写它则 `max-width` 只管内容宽、',
+        '   实占 1320（1440 档左右各空 60，不是 80）。 */',
+        '@media (min-width: 1001px) {',
+        '  ' + root + ' .' + p + 'block-page-shell {',
+        '    box-sizing: border-box;',
+        '    max-width: 1280px;',
+        '  }',
+    ];
+    if (column !== 'full') {
+        out.push('  ' + root + ' .' + p + 'block-page-shell-body {');
+        out.push('    display: grid;');
+        out.push('    grid-template-columns: minmax(0, 1fr) ' + String(width) + 'px minmax(0, 1fr);');
+        out.push('  }');
+        out.push('  ' + root + ' .' + p + 'block-page-shell-body > * {');
+        out.push('    grid-column: 2;');
+        out.push('  }');
+        if (column !== 'locked') {
+            out.push('  /* 宽的走满铺（`:where()` 保零权重，覆盖既有 `auto-fit` 时按「同权重、后出现」取胜） */');
+            out.push('  ' + root + ' .' + p + 'block-page-shell-body > :where(');
+            out.push('    .' + p + 'block-kpi-card-grid,');
+            out.push('    .' + p + 'block-data-table,');
+            out.push('    .' + p + 'block-chart-block,');
+            out.push('    .' + p + 'block-detail-section,');
+            out.push('    .' + p + 'block-list-rows');
+            out.push('  ) {');
+            out.push('    grid-column: 1 / -1;');
+            out.push('  }');
+        }
+        out.push('  /* #950（C2 守卫）：**行内级子件不被拉伸**。上面那条 `> * { grid-column: 2 }` 给每个直接子节点');
+        out.push('     整列宽（880），裸的 `span`／`a`／`b` 因此变成一条 880px 的长条——用户截图里那三根「很丑的');
+        out.push('     独占一行」正是这么来的（同一份标记窄屏好、宽屏坏）。正确入口是包一层 `renderChipRow`；');
+        out.push('     本条把「忘了包」的代价从「塌成表单」降到「各自一行、各自宽度」。 */');
+        out.push('  ' + root + ' .' + p + 'block-page-shell-body > :where(');
+        out.push('    span, a, b, i, em, strong, code, small');
+        out.push('  ) {');
+        out.push('    justify-self: start;');
+        out.push('  }');
+        out.push('  /* #728 收口：页头三级（眉标／标题／副题）跟着正文列走。');
+        out.push('     ⑧ 只把**正文**那层收成 880 居中，页头是它的兄弟节点 ⇒ 不写这一条，标题会贴在版心最左、');
+        out.push('     正文居中，整页左右不对称（t728 复评实测：标题 x≈26、正文 x≈202）。');
+        out.push('     只收宽屏档；窄屏页头与正文同为 16px 内距，本来就对齐。 */');
+        out.push('  ' + root + ' .' + p + 'block-page-shell-eyebrow,');
+        out.push('  ' + root + ' .' + p + 'block-page-shell-title,');
+        out.push('  ' + root + ' .' + p + 'block-page-shell-subtitle {');
+        out.push('    max-width: ' + String(width) + 'px;');
+        out.push('    margin-left: auto;');
+        out.push('    margin-right: auto;');
+        out.push('  }');
+    }
+    out.push('  /* 读数卡一行四张：960 档的 `auto-fit minmax(150px,1fr)` 只排得出 2 张，一行两张在宽屏上');
+    out.push('     就是「右半边空着」。四张同高靠既有 `grid-auto-rows: 1fr`（本件不动它）。');
+    out.push('     **#919 加一道守卫**：只有真排得满 4 张时才定 4 列（`:has(> :nth-child(4))`）——1～3 张卡的页');
+    out.push('     退回区块层那条 `auto-fit`（卡片自己撑满一行）。不守的代价实测过：两张卡的页在 ≥1001 缩成');
+    out.push('     各占 1/4、右半整块空着，比不开配方还难看。 */');
+    out.push('  ' + root + ' .' + p + 'block-kpi-card-grid:has(> :nth-child(4)) {');
+    out.push('    grid-template-columns: repeat(4, minmax(0, 1fr));');
+    out.push('  }');
+    out.push('}');
+    return out;
+}
+/** 页面级移动端配方的样式资产唯一产出者。恒返回非空 CSS 文本。 */
+export function pageUiCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    /* #950 C1：正文列宽档（缺省 centered ＝ 改前行为）。 */
+    const columnRaw = input === undefined || input === null ? undefined : input.column;
+    if (columnRaw !== undefined && !PAGE_COLUMNS.includes(columnRaw)) {
+        throw new Error('pageUi: input.column 必须是 ' + PAGE_COLUMNS.join('／') + ' 之一');
+    }
+    const column = columnRaw === undefined ? 'centered' : columnRaw;
+    return [
+        '/* #525 页面级移动端配方 · 只对根类 ' + root + ' 的页面生效 */',
+        '/* ① 图片与矢量图兜底：任何一张图都不许撑破容器（结果型页面的第一类溢出源）。 */',
+        root + ' img,',
+        root + ' svg {',
+        '  max-width: 100%;',
+        '}',
+        root + ' img {',
+        '  height: auto;',
+        '}',
+        '/* ② 复制区债之一（**置灰规则的定义地已上移到 `style.ts` 的 `copyButton` 区**——',
+        '   它对所有页面都成立，不属「移动端配方」，故本件不再重述第二条：同一件事只留一个定义地）。',
+        '   本件只在窄屏把命中高度补齐；宽度档的 44px 由 `ACTION_BAR_DEFAULTS.minHeightPx` 统一给。 */',
+        '/* ③ 页内定位：带 id 的区块被锚点跳转命中时，标题与视口顶留 20px（不贴着边缘）。 */',
+        root + ' .' + p + 'block-page-shell-body > *[id] {',
+        '  scroll-margin-top: 20px;',
+        '}',
+        '/* ④ 表格：列数极多的表仍可横滑时的兜底（细滚动条＋触屏惯性）。 */',
+        root + ' .' + p + 'block-data-table {',
+        '  -webkit-overflow-scrolling: touch;',
+        '  scrollbar-width: thin;',
+        '}',
+        '/* ⑤ 触摸区：**全宽档**所有页内可点元素命中区 ≥44×44px。',
+        '   #525 收口：这一条原来只在 ≤820 那条媒体查询里，实测 1440 档样板页的页内导航（`a`）',
+        '   只有 27px 高 —— 44px 是**全宽档**口径（与 `.ilife-copy-btn` 同值），故移出媒体查询。',
+        '   只加 `min-height` 与最小内距，不动任何既有选择器的语义。 */',
+        root + ' .' + p + 'copy-btn,',
+        root + ' .' + p + 'copy-menu-item,',
+        root + ' .' + p + 'action-btn,',
+        root + ' .' + p + 'block-disclosure-summary,',
+        root + ' .' + p + 'block-param-form-input,',
+        root + ' .' + p + 'block-toc a {',
+        '  min-height: ' + PAGE_LIMITS.touchMinPx + 'px;',
+        '}',
+        '/* 页内导航按胶囊排（inline 元素上 min-height 不生效，须转 inline-flex）。 */',
+        root + ' .' + p + 'block-toc a {',
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  padding-top: 0;',
+        '  padding-bottom: 0;',
+        '}',
+        '/* ⑥ 窄屏（≤640）：安全区留白、字号节奏、读数卡栅格、页内导航横滑、表格卡片化。 */',
+        '@media (max-width: 640px) {',
+        '  /* 安全区：手机横放与「小白条」机型上正文不许贴边；页脚留 60px 与 HELP 640 档逐值同。 */',
+        '  ' + root + ' .' + p + 'block-page-shell {',
+        '    padding: 20px max(16px, env(safe-area-inset-right, 0px))',
+        '      calc(60px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));',
+        '  }',
+        '  /* 字号下限：正文类文本一档不落（表格单元格／口径行／列表行／事实条标签 ≥12px）。 */',
+        '  ' + root + ' .' + p + 'block-caliber,',
+        '  ' + root + ' .' + p + 'block-list-rows-row,',
+        '  ' + root + ' .' + p + 'block-kpi-card-detail {',
+        '    font-size: ' + PAGE_LIMITS.textMinPx + 'px;',
+        '  }',
+        '  /* 读数卡：两格并排（150px 下限在 358px 可用宽里正好两格，不再被 auto-fit 挤成三格）。 */',
+        '  ' + root + ' .' + p + 'block-kpi-card-grid {',
+        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '    gap: 10px;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-kpi-card {',
+        '    padding: 12px;',
+        '  }',
+        '  /* 页内导航：一条横滑的胶囊轨（换行会把标题挤出首屏；横滑不占纵向高度）。 */',
+        '  ' + root + ' .' + p + 'block-toc {',
+        '    flex-wrap: nowrap;',
+        '    overflow-x: auto;',
+        '    -webkit-overflow-scrolling: touch;',
+        '    scrollbar-width: none;',
+        '    padding-bottom: 2px;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-toc a {',
+        '    flex: 0 0 auto;',
+        '  }',
+        '  /* 表格卡片化：每个数据格带列头文本（`td[data-label]`，由 `renderDataTable` 写入）时，',
+        '     窄屏把「一行多列」摊成「一格两行：列头 ＋ 值」，列头不再挤在 390px 里。',
+        '     属性缺席时本段全部是空选择器 ⇒ 自动退回 #457 的紧凑表形态，不静默出错。 */',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) .' + p + 'block-data-table-table,',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) tbody,',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) tr,',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) td {',
+        '    display: block;',
+        '    width: auto;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) thead {',
+        '    display: none;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) tr {',
+        '    padding: 4px 0;',
+        '    border-top: 1px solid rgba(210, 210, 215, .6);',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) tr:first-child {',
+        '    border-top: 0;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) td {',
+        '    display: flex;',
+        '    justify-content: space-between;',
+        '    gap: 12px;',
+        '    padding: 3px 10px;',
+        '    border-bottom: 0;',
+        '    text-align: left;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) td::before {',
+        '    content: attr(' + 'data-label);',
+        '    flex: 0 0 auto;',
+        // #728 逐页审计：改前取 `--fg3`（#86868b，压白底 3.62:1／压斑马行 3.33:1），
+        //   12px 正文不到 AA 的 4.5:1（多席逐像素量到）。取 `--fg2`（4.94:1）——同族深一档，不新增色值。
+        '    color: var(--fg2);',
+        // #567 J4（§5.2 次级 12 吸收 12／11.5）。
+        '    font-size: 12px;',
+        '    font-weight: 600;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(td[' + 'data-label]) td.' + p + 'block-data-table-cell-right {',
+        '    min-width: 0;',
+        '  }',
+        '}',
+        '/* ⑦ 这一段的断点上共撤过两条规则，都记在这里（本配方撤规则的地方只有此处）。',
+        '   ── 撤 1：「≤400 档：读数卡塌单列」（#728 逐页审计）。',
+        '   撤因（多席独立量到）：主流手机宽 390 正落在 `max-width: 400` 里 ⇒ ⑥ 那条「两格并排」',
+        '   在 390 上**永远不生效**，8 张读数卡一路单列排下去、吃掉整页 40～45% 的高度',
+        '   （实测卡块 y313..1164＝852px，是视口 844px 的 1.01 倍），而卡里往往只放「未给」「1 笔」这种两三个字。',
+        '   两格并排后同一批卡约占 17%；320 档每格仍有 1fr 兜底、值不裁（`overflow-wrap` 在卡值位已有）。',
+        '   撤的是档位不是能力（⑥ 的两格并排就是它的替代）。',
+        '   ── 撤 2：「宽档（≥641）两列表：键贴左缘、值贴右缘」（#879，逐变体实测裁决）。',
+        '   ① 它只右对齐 `td:last-child`、不碰 `th:last-child` ⇒ 表头贴左、同列的值贴右缘，垂直对位面劈成两半',
+        '      （备忘录「首次使用」1280 档实测：表头文字右缘 x=204.45、同列两行的值右缘都是 x=1245，Δ=1040.55px；',
+        '      768 档 Δ=528.55px —— 641～1000 也走这条，不只宽屏）。',
+        '   ② 它住错了层：表头与数据格本来就带**同一个** `cell-<align>` 档类（`blocks.ts` 的 `renderDataTable`',
+        '      一处产出），同列天然对齐；「这一列是数值列」是**数据层的语义决定**，由调用方在列上声明',
+        '      `align:"right"` 表达 —— 全仓两列表已有大量这样的声明（`skill-calorie/src/goal/resultDocs.ts`、',
+        '      `skill-schedule/src/plan/replaySections.ts`、`skill-chef/src/view/page.ts`、',
+        '      `skill-calorie/src/render/sportDocs.ts` 等），它们靠 `cell-right` 自带的 `text-align: right`',
+        '      拿到「表头与值一起右对齐」。按列数（恰两列）替调用方做这个决定，只表达「碰巧两列」、',
+        '      不表达「这一列是数值」，是对数据层语义的越权覆盖。',
+        '   ③ 这条只作用在真正产出 `pageUiCss()` 的页面上：同一张表在卡路里／账单的在建产物里**根本没有这条规则**',
+        '      （实测 `docs/skills/skill-calorie/scene02-验收墙` 87 页、`docs/skills/skill-bill` 全量各命中 0 次；',
+        '      备忘录 34 页各命中 10 次）⇒ 两列表在同一个产品里长成两种样子。#728 收口那句「UI 上没问题了」',
+        '      正是在这条不生效的那批页面上给的 ⇒ 撤掉是**向多数对齐**，不是新设计。',
+        '   撤后行为回归数据层：数值列一条不动，两列表里的文本值不再被推到卡片右缘（该页实测 Δmax 1040.55 → 0，',
+        '   行内缝隙 989 → 67px）。',
+        '   ── 判别器与窄档（#728 逐页审计实测）：它同时管着下面 ≤640 那一段 —— 改前这类表在 ≤640 走 ⑥ 的卡片化，',
+        '   每一格都 `td::before{content:attr(data-label)}` ⇒ 8 行的表在 390 档渲染成 **16 条列头线**',
+        '   （`哪一项 … 记录编号` / `记成什么 … 116`），表体 491px 里约 224px 是纯重复；',
+        '   同一张表在 1280 档只印一遍列头。判别器＝`thead tr > th:nth-child(2):last-child`',
+        '   （第二枚表头就是最后一枚 ⇒ 恰两列）。三列及以上的表（候选表、多列明细）一行不动。 */',
+        '@media (max-width: 640px) {',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) thead {',
+        '    display: none;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) table,',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) tbody {',
+        '    display: block;',
+        '    width: auto;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) tr {',
+        '    display: flex;',
+        '    align-items: baseline;',
+        '    justify-content: space-between;',
+        '    gap: 12px;',
+        '    padding: 10px 0;',
+        '    border-top: 1px solid rgba(210, 210, 215, .6);',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) tr:first-child {',
+        '    border-top: 0;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) td {',
+        '    display: block;',
+        '    width: auto;',
+        '    padding: 0;',
+        '    border-bottom: 0;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) td::before {',
+        '    content: none;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) td:first-child {',
+        // #919：这一型（窄档「一行一条事实」）原来左右内距是 0 —— 同一张表的标题有 10px（`blocks.ts` 640 档）、
+        //   普通窄档形态的单元格也是 10px，只有它写成 0 ⇒ 行文字压在卡片边框上、与标题不在同一条竖线
+        //   （实测：标题文字左缘与首格文字左缘差 10px，行文字到卡片边框左右各 1px）。
+        //   值取 10px，与同断点那两处同值；几何读数由 `scripts/check-two-col-align.mjs` 守（下限 8px）。
+        '    padding-left: 10px;',
+        '    color: var(--fg2);',
+        '    font-weight: 600;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-data-table:has(thead tr > th:nth-child(2):last-child) td:last-child {',
+        '    text-align: right;',
+        '    overflow-wrap: anywhere;',
+        '    padding-right: 10px;',
+        '  }',
+        '}',
+        /* ⑧ 宽屏正文列宽段（#525 ＋ #950 C1 四档）：由 `columnCss()` 按档生成。 */
+        ...columnCss(column, root, p),
+        '/* ⑨ 状态字抬到与正文同档（#525 第二轮票面第 3 条：状态类文字在手机档偏小）。',
+        '   390 档的徽章（`block-chip`）与读数卡说明（`block-kpi-card-detail`）都是 12px，与正文差 3px、',
+        '   与读数卡标签 12px 齐平 ⇒ 「状态」看不出是另一类信息。抬到 **13px**：',
+        '   ① 不越过正文 15px（层级仍在，不靠加粗抢戏）；② 高于 #524 基准 §3.2 的 390 档下限 12px 一档；',
+        '   ③ 与 HELP 侧 13px 那一档（`helpShell.ts` 常见档 13）逐值同。 */',
+        root + ' .' + p + 'block-chip,',
+        root + ' .' + p + 'block-kpi-card-detail {',
+        '  font-size: 13px;',
+        '}',
+        '/* ⑩ 提示块图标：`⚠️`／`✅` 这类**字形图标**在手机上小且糊（用户裁定第 5 条的同一类债）。',
+        '   根类之下把它换成**带文字的图标位**：字形隐去，底盘保留（`kind` 的语义色仍在），',
+        '   文字用 `font-size:0` 收起后由 `::after` 写一个可读的标签。',
+        '   只改观感：`aria-hidden` 的那颗字形本来就不参与朗读，标签是替代它的可见文字。',
+        '   选择器必须与 `blocks.ts` 640 档那条**同名同层**（`.block-feedback-block-note .…-icon`）：',
+        '   权重都是 3，本条在后 ⇒ 宽窄两档都盖得住（只用两颗类名会在 ≤640 档输给那条媒体查询）。',
+        '   **#733 改**：改前这条用 `font-size: 0` 收字形 ＋ `::after { content: "已完成" }` 把词画在屏幕上——',
+        '   词只活在 CSS 里（实测 32/32 页：产物里「已完成」只出现 1 次就是那行 `content:`，`<body>` 里 0 次）⇒',
+        '   不可选中、不可搜索、不可复制、屏读器读不到、打印与 PDF 取不到字。',
+        '   现在词由区块层写成**真文字节点**（`blocks.ts` 的 note 区，字形与词各一枚子件），',
+        '   本条只做「藏字形、显词」这一件事 ⇒ 屏幕上的样子与改前一模一样，词回到文档流里。 */',
+        root + ' .' + p + 'block-feedback-block-note .' + p + 'block-feedback-block-note-icon {',
+        '  width: auto;',
+        '  min-width: 44px;',
+        '  padding: 0 10px;',
+        '  border-radius: 999px;',
+        '  font-weight: 600;',
+        '}',
+        root + ' .' + p + 'block-feedback-block-note .' + p + 'block-feedback-block-note-icon-glyph {',
+        '  display: none;',
+        '}',
+        root + ' .' + p + 'block-feedback-block-note .' + p + 'block-feedback-block-note-icon-text {',
+        '  display: inline;',
+        '  font-size: 12px;',
+        '  line-height: 1;',
+        '}',
+        '/* ⑪ 桌面档（≥1001，与 ⑧ 同一条断点）：参数表单两列并排、读数卡与正文列同宽节奏。',
+        '   #728 实测的病：单列表单在 390 档每格约 350px 宽、到 1280 档被拉到版心宽（880px），',
+        '   读到的是「一列长条」而不是「一张要填的表」——桌面端「没有版式，只有一条宽度补丁」。',
+        '   两列把「一屏要填的格」收进一屏；说明句与预览位跨两列（它们不是一格）。',
+        '   只收本配方启用页（`pageUi` 是各包 opt-in 的开关），未启用的页一行不变。 */',
+        '@media (min-width: 1001px) {',
+        '  ' + root + ' .' + p + 'block-param-form {',
+        '    display: grid;',
+        '    grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '    column-gap: 24px;',
+        '    align-items: start;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-param-form-description,',
+        '  ' + root + ' .' + p + 'block-param-form-preview {',
+        '    grid-column: 1 / -1;',
+        '  }',
+        '}',
+        '/* ⑫ toast 关闭键的命中区：那一段（规则 ＋ 逐条记账）另立一件 `pageUiToast.ts`',
+        '   —— 本件加它会 366 LF、越过本包 `AGENTS.md` 钉的 350 LF 告警线；拆的口子也正好是',
+        '   层与层的接缝：本件管「版面与页内控件怎么摆」，那一件管「helpers 运行时注入的浮动件',
+        '   怎么摆」（后者挂在 document.body 下、不在版面根之内，连启用方式都多一道）。',
+        '   取值仍从本件的 `PAGE_LIMITS` 来，规则文本仍只有一处定义。 */',
+        ...toastUiCss(root, PAGE_LIMITS.touchMinPx),
+    ].join(LF);
+}

package/dist/components/page-ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/page-ui/index.ts"],"names":[],"mappings":"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"}

package/dist/components/page-ui/toast.d.ts

@@ -0,0 +1,16 @@
+/** #870 · 页面级配方的**第三段**（目录化批次②从 `src/pageUiToast.ts` 原样搬来，正文一字未改）：helpers 运行时**注入**的那些控件（今天的全部内容 = toast 栈的关闭键）。
+ *
+ *  为什么另立一件（不是「顺手拆」）：
+ *   · 那一段要 30 行上下（规则 ＋ 逐条记账注释），而 `pageUi.ts` 加它就 366 LF，**越过本包
+ *     AGENTS.md 钉的 350 LF 告警线**（口径：LF、只数换行符、范围本包 src 下的 .ts）。
+ *     按本包规矩「超线即触发必报五步的第四步」——这一件就是那一步给的拆法；
+ *   · 拆的口子也正好是**层与层的接缝**：`pageUi.ts` 管「版面与页内控件怎么摆」，本件管
+ *     「运行时注入的浮动件怎么摆」——后者挂在 `document.body` 下、**不在版面根之内**，
+ *     连启用方式都多一道。
+ *
+ *  纯度：本件**不 import 任何东西**（连 `pageUi.ts` 也不 import，避免 `pageUi ↔ pageUiToast` 成环），
+ *  取值由调用方按参数给。产出恒为非空 CSS 片段（调用方拼进样式资产）。 */
+/** toast 关闭键的命中区规则（#870）。`root` 是配方根选择器（如 `.ilife-page-ui`），
+ *  `touchMinPx` 是最小命中边长（＝ `PAGE_LIMITS.touchMinPx`，44）。 */
+export declare function toastUiCss(root: string, touchMinPx: number): readonly string[];
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/page-ui/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/page-ui/toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;2CAW2C;AAE3C;2DAC2D;AAC3D,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAgC9E"}

package/dist/components/page-ui/toast.js

@@ -0,0 +1,47 @@
+/** #870 · 页面级配方的**第三段**（目录化批次②从 `src/pageUiToast.ts` 原样搬来，正文一字未改）：helpers 运行时**注入**的那些控件（今天的全部内容 = toast 栈的关闭键）。
+ *
+ *  为什么另立一件（不是「顺手拆」）：
+ *   · 那一段要 30 行上下（规则 ＋ 逐条记账注释），而 `pageUi.ts` 加它就 366 LF，**越过本包
+ *     AGENTS.md 钉的 350 LF 告警线**（口径：LF、只数换行符、范围本包 src 下的 .ts）。
+ *     按本包规矩「超线即触发必报五步的第四步」——这一件就是那一步给的拆法；
+ *   · 拆的口子也正好是**层与层的接缝**：`pageUi.ts` 管「版面与页内控件怎么摆」，本件管
+ *     「运行时注入的浮动件怎么摆」——后者挂在 `document.body` 下、**不在版面根之内**，
+ *     连启用方式都多一道。
+ *
+ *  纯度：本件**不 import 任何东西**（连 `pageUi.ts` 也不 import，避免 `pageUi ↔ pageUiToast` 成环），
+ *  取值由调用方按参数给。产出恒为非空 CSS 片段（调用方拼进样式资产）。 */
+/** toast 关闭键的命中区规则（#870）。`root` 是配方根选择器（如 `.ilife-page-ui`），
+ *  `touchMinPx` 是最小命中边长（＝ `PAGE_LIMITS.touchMinPx`，44）。 */
+export function toastUiCss(root, touchMinPx) {
+    return [
+        '/* ⑫ toast 关闭键的命中区（全宽档；#870）。',
+        '   来源：#870 接线后，页面按钮的复制提示由公共层 helpers 出，而这个键是那一档里',
+        '   唯一一个视觉尺寸只有 26px 高的可点元素（实测 62×26，压 t849 §2「触摸档可点元素',
+        '   命中区 ≥44×44px，零不足」这条硬线）。',
+        '   做法照本仓 #642 的既有先例（HELP 外壳三个小关闭键）：**命中区用绝对定位的 ::after 覆盖层',
+        '   撑到 44×44，视觉尺寸一个字不动** —— 与直接把 min-height 抬到 44px 相比，它不改那个键在',
+        '   深色卡里的观感（卡高、字位都不动），只把可点面放大。',
+        '   ① 键自身 `position: relative`（**必需**：覆盖层绝对定位的锚点就是它；写成 static 的话锚点',
+        '      会落到视口，可点面跑到页角去）；`min-width` 只补横向。',
+        '   ② 覆盖层 `inset: 50% auto auto 50%` ＋ `translate(-50%,-50%)`：中心对齐、向外撑，',
+        '      不参与布局（绝对定位），故卡面尺寸逐值不变。',
+        '   ③ **本条的适用条件**：`.ilife-toast-stack` 与它里面每次弹出的 `.ilife-toast` 由 helpers',
+        '      运行时挂在 `document.body` 下（不在版面根之内）⇒ 想让本条命中，启用 pageUi 的整页装配',
+        '      要在 `document.body` 上带一颗同样的标记（本配方的 opt-in 开关本来就是「页面声明自己是',
+        '      pageUi 页」；带标记 ＝ 这一页接受本配方的全部行为）。',
+        '   ④ 与 `pageUi.ts` ⑤ 那条的分工：⑤ 管页内控件（`.copy-btn` 那一族），本件管 helpers 运行时',
+        '      **注入**的那一颗（它不在页内标记里，⑤ 的选择器扫不到）。 */',
+        root + ' .ilife-toast-close {',
+        '  position: relative;',
+        '  min-width: ' + touchMinPx + 'px;',
+        '}',
+        root + ' .ilife-toast-close::after {',
+        '  content: "";',
+        '  position: absolute;',
+        '  inset: 50% auto auto 50%;',
+        '  transform: translate(-50%, -50%);',
+        '  width: ' + touchMinPx + 'px;',
+        '  height: ' + touchMinPx + 'px;',
+        '}',
+    ];
+}

package/dist/components/page-ui/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/page-ui/toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;2CAW2C;AAE3C;2DAC2D;AAC3D,MAAM,UAAU,UAAU,CAAC,IAAY,EAAE,UAAkB;IACzD,OAAO;QACL,+BAA+B;QAC/B,kDAAkD;QAClD,sDAAsD;QACtD,4BAA4B;QAC5B,4DAA4D;QAC5D,+DAA+D;QAC/D,+BAA+B;QAC/B,mEAAmE;QACnE,yCAAyC;QACzC,wEAAwE;QACxE,8BAA8B;QAC9B,0EAA0E;QAC1E,gEAAgE;QAChE,+DAA+D;QAC/D,uCAAuC;QACvC,qEAAqE;QACrE,0CAA0C;QAC1C,IAAI,GAAG,uBAAuB;QAC9B,uBAAuB;QACvB,eAAe,GAAG,UAAU,GAAG,KAAK;QACpC,GAAG;QACH,IAAI,GAAG,8BAA8B;QACrC,gBAAgB;QAChB,uBAAuB;QACvB,6BAA6B;QAC7B,qCAAqC;QACrC,WAAW,GAAG,UAAU,GAAG,KAAK;QAChC,YAAY,GAAG,UAAU,GAAG,KAAK;QACjC,GAAG;KACJ,CAAC;AACJ,CAAC"}

package/dist/components/photo-compare/attrs.d.ts

@@ -0,0 +1,84 @@
+/** photo-compare · **标记契约**（渲染与运行时共用的唯一事实：类名／形态闭集／方向闭集／入参类型）。
+ *
+ *  这一件是**重做件**（原型墙 3/3/3，`.scratch/ui-组件墙/重做设计口径.md` §4）：原型只给了「拖动」，
+ *  读者拖半天读不出「变了多少」。重做后**三个读数一起给**：
+ *   ① 拖动的视觉（竖线 ＋ 把手，钉在照片上）；
+ *   ② **两张的日期标签**（左／右角，各自贴在自己那张上）；
+ *   ③ **数值差值行**（体重 70.8 → 68.4 千克，Δ −2.4 千克）——拖动读不出来的那件事，这里读得出。
+ *
+ *  门槛与降级：拖动把手命中盒 **≥ PHOTO_COMPARE_MIN_HIT_PX（44px）**、键盘 `←`／`→` 可调（原生 `range`）；
+ *  容器窄于 `PHOTO_COMPARE_NARROW_PX` 时**退成左右并排两张 ＋ 中间差值条**（不许变成没法用的小滑块）。
+ *
+ *  占位物同 `photo-grid`：定形框 ＋ 四角取景角标 ＋ 题注条 ⇒ 没真图时也读得出那是相片位。
+ */
+/** 本件的类名根。 */
+export declare const PHOTO_COMPARE_CLASS = "ilife-block-photo-compare";
+/** 槽位闭集。 */
+export declare const PHOTO_COMPARE_SLOTS: readonly ["stage", "layer", "frame", "marks", "lens", "alt", "img", "tag", "caption", "text", "size", "divider", "range", "deltas", "delta", "delta-mark", "delta-label", "delta-value", "delta-arrow", "delta-change", "verdict", "note"];
+export type PhotoCompareSlot = (typeof PHOTO_COMPARE_SLOTS)[number];
+/** 槽类的类名（唯一拼法）。 */
+export declare function photoCompareSlot(slot: PhotoCompareSlot, prefix?: string): string;
+/** 形态闭集：本件只落地了形态 A「拖动对照」。 */
+export declare const PHOTO_COMPARE_FORMS: readonly ["drag"];
+export type PhotoCompareForm = (typeof PHOTO_COMPARE_FORMS)[number];
+/** 「变了多少」的方向闭集（**只改视觉档**：正负号写在那句话里，色只是第二样）。 */
+export declare const PHOTO_COMPARE_TONES: readonly ["down", "up", "same"];
+export type PhotoCompareTone = (typeof PHOTO_COMPARE_TONES)[number];
+/** 方向 → 屏上那个记号（钉在差值行左端，色之外的第二样）。 */
+export declare const PHOTO_COMPARE_TONE_MARKS: Readonly<Record<PhotoCompareTone, string>>;
+/** 拖动把手的命中下限（px）：**命中盒不得小于它**（视觉圆可以小，命中盒必须够）。 */
+export declare const PHOTO_COMPARE_MIN_HIT_PX = 44;
+/** 拖动位置住在**本件自己的一个局部自定义属性**里（竖线、把手、裁切三处都从它算——一个事实一处存）。
+ *  它是**几何量**，不是皮肤 token：不占 `--ilife-` 名字空间，也不经 `skinVar()` 读。
+ *  唯一出处在本行，`render.ts`（渲初值）／`style.ts`（算位置）／`runtime.ts`（写新值）三处都引它。 */
+export declare const PHOTO_COMPARE_SPLIT_VAR = "--photo-compare-split";
+/** 拖动的档数（`←`／`→` 各移一格；`range` 的 `step`）。 */
+export declare const PHOTO_COMPARE_STEP = 2;
+/** 缺值那一栏的写法（缺的读数不编数）。 */
+export declare const PHOTO_COMPARE_MISSING = "\u2014";
+/** 一张照片（前或后）。 */
+export interface PhotoCompareSide {
+    /** 日期（「08-30」）——**必填**：它是这一件的第二个读数（读者要知道比的是哪两天）。 */
+    readonly date: string;
+    /** 这一格该放什么照片（「正面」）。**必填**：占位格上唯一说得清「放什么」的话；真图时也是 `alt`。 */
+    readonly alt: string;
+    /** 图源；不给＝占位格（取景角标 ＋ 相机记号 ＋ `alt`）。 */
+    readonly src?: string;
+    /** 题注条里的说明（「沙发 · 修复前」）；不给＝题注条只有读数（或整条不出）。 */
+    readonly caption?: string;
+    /** 一行读数（「1120×1480 · 1.8 MB」）；不给＝不出。 */
+    readonly size?: string;
+}
+/** 一行数值差值。 */
+export interface PhotoCompareDelta {
+    /** 读数名（「体重」「腰围」）。**非空**。 */
+    readonly label: string;
+    /** 前值（「70.8」）。**非空**。 */
+    readonly before: string;
+    /** 后值（「68.4」）。**非空**。 */
+    readonly after: string;
+    /** 变了多少那句（「−2.4 千克」／「可比」）。**非空**——这一件重做就是为了它。 */
+    readonly change: string;
+    /** 方向档（`down`／`up`／`same`）：只改视觉，正负号已在 `change` 里。 */
+    readonly tone?: PhotoCompareTone;
+}
+/** 前后对比的入参。`before`／`after`／`deltas` 必填——没有差值的「前后对比」只剩两张图。 */
+export interface PhotoCompareInput {
+    /** 前一张。 */
+    readonly before: PhotoCompareSide;
+    /** 后一张。 */
+    readonly after: PhotoCompareSide;
+    /** 数值差值行（一件里通常 2–4 行）。**空数组＝错**：那正是本件要替掉的「只有拖动」。 */
+    readonly deltas: readonly PhotoCompareDelta[];
+    /** 窄档差值条那句话（「比 08-30 轻 2.4 千克」）；不给＝窄档只靠差值行。 */
+    readonly verdict?: string;
+    /** 底下那句口径（怎么读这块）。 */
+    readonly note?: string;
+    /** 拖动竖线的初始位置（0–100，缺省 50）。 */
+    readonly position?: number;
+    /** 形态键（闭集，缺省 `drag`）。 */
+    readonly form?: PhotoCompareForm;
+    /** 附加类名（空格分隔；逐个过类名正则）。 */
+    readonly extraClass?: string;
+}
+//# sourceMappingURL=attrs.d.ts.map

package/dist/components/photo-compare/attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.d.ts","sourceRoot":"","sources":["../../../src/components/photo-compare/attrs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc;AACd,eAAO,MAAM,mBAAmB,8BAA8B,CAAC;AAE/D,YAAY;AACZ,eAAO,MAAM,mBAAmB,4OA6CtB,CAAC;AACX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,mBAAmB;AACnB,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,SAAW,GAAG,MAAM,CAElF;AAED,6BAA6B;AAC7B,eAAO,MAAM,mBAAmB,mBAAoB,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,+CAA+C;AAC/C,eAAO,MAAM,mBAAmB,iCAAkC,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,oCAAoC;AACpC,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAI9E,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C;;uEAEuE;AACvE,eAAO,MAAM,uBAAuB,0BAA0B,CAAC;AAE/D,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,yBAAyB;AACzB,eAAO,MAAM,qBAAqB,WAAM,CAAC;AAEzC,iBAAiB;AACjB,MAAM,WAAW,gBAAgB;IAC/B,oDAAoD;IACpD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,cAAc;AACd,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,yBAAyB;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;CAClC;AAED,8DAA8D;AAC9D,MAAM,WAAW,iBAAiB;IAChC,WAAW;IACX,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,WAAW;IACX,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,oDAAoD;IACpD,QAAQ,CAAC,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAC9C,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,yBAAyB;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACjC,0BAA0B;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B"}