base-paint 0.3.13 → 0.3.15

package/dist/components/page-nav/index.d.ts

@@ -0,0 +1,55 @@
+/** #950 · 页面级导航一件：**分段导航**（`renderSegmentedNav`）。
+ *
+ *  **住址**：目录化批次①把它从 `src/pageNav.ts` 搬到这里（同批 `pageNavCss.ts` → `./style.ts`），
+ *  进出面一字未动：根出口仍出 `SEG_NAV_ICONS`／`pageNavCss`／`renderSegmentedNav` 与三个类型，
+ *  搬迁判据＝产物逐字节相同（`docs/base/base-render/组件目录架构.md`）。
+ *
+ *  谁在用：本包（base-paint）的页面级形状层。落点口径与 `pageShapes.ts` 同：样式随本件出
+ *  （`pageNavCss()` 由 `pageShapeCss()` 汇总进页），是否生效由整页装配的 `pageUi` 位决定。
+ *
+ *  为什么要这件（第一性：**形状必须与角色同义**）：
+ *   · **分段导航**：页内导航是**动作**，但 `renderTocBlock` 的胶囊与状态徽章（`ilife-block-chip`）
+ *     同形——读者把「能点的」读成「标签」。分段控件的隐喻是「同层互斥切换」，
+ *     与状态胶囊在形状上分得开（等宽分格 ＋ 选中项实底白卡 ＋ 图标位）。
+ *
+ *  **本件原与「胶囊行」同住**（`#950` 同批立两件），收口时按「一个问题在公共面上只留一条路」
+ *  把胶囊行**并回区块层** `blocks.ts`：那一层早已有 `renderChipRow`（`#728`，产线 8 处调用点在用），
+ *  两件同名、同容器类、入参却不兼容，且同一容器类被两层各定义一次样式会互相盖（页面层那条
+ *  会吃掉区块层的 `margin`）。语气位（`ChipItemInput.tone`）与 `role`／`extraClass` 一并并过去，
+ *  本件此后只管导航。
+ *
+ *  为什么另立一件（不并进 `pageShapes.ts`）：那一件已 452 行、越过本包 350 行告警线，
+ *  且它的三支管「媒体与事实」；本件管「导航」，变化频率不同（导航随整页骨架动）。
+ *  **已超线，需要根据规则进行重构**（指 `pageShapes.ts`，非本件）：本件即按该拆法新立的姊妹件之一；
+ *  收口票可把 `pageShapes.ts` 再按「媒体／事实／时间轴」切三支，出口留它薄转出。
+ *
+ *  色值与圆角只用冻结 token 与圆角闭集 `{8,14,20,999}`，不新增。
+ */
+/** 图标闭集（内联 SVG，无外链、无字体依赖）。清单外抛 `bad-input`。 */
+export declare const SEG_NAV_ICONS: readonly ["grid", "line", "table", "copy", "goal", "drop", "scale", "flame"];
+export type SegNavIcon = (typeof SEG_NAV_ICONS)[number];
+export interface SegNavItemInput {
+    /** 锚点 id（不带 `#`；用于 `href` 与「当前项」判定）。 */
+    readonly id: string;
+    /** 分格里的人话短名。 */
+    readonly label: string;
+    readonly icon?: SegNavIcon;
+    /** 附加计数（如「6 项」）；窄屏由样式段收起。 */
+    readonly count?: string;
+}
+export interface SegmentedNavInput {
+    /** 分格；0 格＝空串。 */
+    readonly items: readonly SegNavItemInput[];
+    /** 当前项 id：给了就给它实底 ＋ `aria-current="page"`（分格的选中态）。
+     *  用规范值 `page` 而非 `true`：读屏报「当前页面」；`true` 只说「已选中」，语义弱一档。 */
+    readonly current?: string;
+    /** 是否吸顶（缺省 `true`）：长页滚动时导航留在视口顶。 */
+    readonly sticky?: boolean;
+    readonly ariaLabel?: string;
+    readonly extraClass?: string;
+}
+/** 分段导航：等宽分格，每格「图标 ＋ 短名（＋ 计数）」，当前格实底。
+ *  `items: []` ＝ 空串；非法图标／`id` 为空即抛。 */
+export declare function renderSegmentedNav(input: SegmentedNavInput): string;
+export { pageNavCss } from './style.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/page-nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-nav/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAsCH,+CAA+C;AAC/C,eAAO,MAAM,aAAa,8EAEhB,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAkBxD,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,gBAAgB;IAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,iBAAiB;IACjB,QAAQ,CAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAC3C;gEAC4D;IAC5D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAWD;uCACuC;AACvC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CA8BnE;AAED,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,125 @@
+/** #950 · 页面级导航一件：**分段导航**（`renderSegmentedNav`）。
+ *
+ *  **住址**：目录化批次①把它从 `src/pageNav.ts` 搬到这里（同批 `pageNavCss.ts` → `./style.ts`），
+ *  进出面一字未动：根出口仍出 `SEG_NAV_ICONS`／`pageNavCss`／`renderSegmentedNav` 与三个类型，
+ *  搬迁判据＝产物逐字节相同（`docs/base/base-render/组件目录架构.md`）。
+ *
+ *  谁在用：本包（base-paint）的页面级形状层。落点口径与 `pageShapes.ts` 同：样式随本件出
+ *  （`pageNavCss()` 由 `pageShapeCss()` 汇总进页），是否生效由整页装配的 `pageUi` 位决定。
+ *
+ *  为什么要这件（第一性：**形状必须与角色同义**）：
+ *   · **分段导航**：页内导航是**动作**，但 `renderTocBlock` 的胶囊与状态徽章（`ilife-block-chip`）
+ *     同形——读者把「能点的」读成「标签」。分段控件的隐喻是「同层互斥切换」，
+ *     与状态胶囊在形状上分得开（等宽分格 ＋ 选中项实底白卡 ＋ 图标位）。
+ *
+ *  **本件原与「胶囊行」同住**（`#950` 同批立两件），收口时按「一个问题在公共面上只留一条路」
+ *  把胶囊行**并回区块层** `blocks.ts`：那一层早已有 `renderChipRow`（`#728`，产线 8 处调用点在用），
+ *  两件同名、同容器类、入参却不兼容，且同一容器类被两层各定义一次样式会互相盖（页面层那条
+ *  会吃掉区块层的 `margin`）。语气位（`ChipItemInput.tone`）与 `role`／`extraClass` 一并并过去，
+ *  本件此后只管导航。
+ *
+ *  为什么另立一件（不并进 `pageShapes.ts`）：那一件已 452 行、越过本包 350 行告警线，
+ *  且它的三支管「媒体与事实」；本件管「导航」，变化频率不同（导航随整页骨架动）。
+ *  **已超线，需要根据规则进行重构**（指 `pageShapes.ts`，非本件）：本件即按该拆法新立的姊妹件之一；
+ *  收口票可把 `pageShapes.ts` 再按「媒体／事实／时间轴」切三支，出口留它薄转出。
+ *
+ *  色值与圆角只用冻结 token 与圆角闭集 `{8,14,20,999}`，不新增。
+ */
+/** 换行（仓库口径：不写字面换行转义，与 `blocks.ts`／`pageShapes.ts` 同）。 */
+const LF = String.fromCharCode(10);
+/** 五字符转义表（与 `blocks.ts` 的 `esc` 逐字同口径，本件不引区块层内部件）。 */
+function esc(value) {
+    return value.replace(/[&<>"']/g, (ch) => {
+        if (ch === '&')
+            return '&amp;';
+        if (ch === '<')
+            return '&lt;';
+        if (ch === '>')
+            return '&gt;';
+        if (ch === '"')
+            return '&quot;';
+        return '&#39;';
+    });
+}
+function reqText(value, field) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        throw new Error('pageNav: ' + field + ' 必须是非空字符串');
+    }
+    return value;
+}
+function optText(value, field) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value !== 'string')
+        throw new Error('pageNav: ' + field + ' 必须是字符串');
+    return value === '' ? undefined : value;
+}
+function assertItems(value, field) {
+    if (!Array.isArray(value))
+        throw new Error('pageNav: ' + field + ' 必须是数组');
+    return value;
+}
+/* ══════════════════════════════════════════════════════════════
+ * ② 分段导航：等宽分格 ＋ 选中实底 ＋ 图标位（页内导航的「动作」形状）
+ * ══════════════════════════════════════════════════════════════ */
+/** 图标闭集（内联 SVG，无外链、无字体依赖）。清单外抛 `bad-input`。 */
+export const SEG_NAV_ICONS = [
+    'grid', 'line', 'table', 'copy', 'goal', 'drop', 'scale', 'flame',
+];
+/** 图标路径表（`stroke` 走 `currentColor`，随选中态变色；尺寸由样式段定）。 */
+const ICON_PATHS = Object.freeze({
+    grid: '<rect x="2" y="2" width="5" height="5" rx="1.2"/><rect x="9" y="2" width="5" height="5" rx="1.2"/>'
+        + '<rect x="2" y="9" width="5" height="5" rx="1.2"/><rect x="9" y="9" width="5" height="5" rx="1.2"/>',
+    line: '<path d="M2 11.5l4-4 3 3 5-6"/>',
+    table: '<rect x="2" y="3" width="12" height="10" rx="1.6"/><path d="M2 7h12M7 7v6"/>',
+    copy: '<rect x="5" y="5" width="9" height="9" rx="2"/><path d="M11 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1"/>',
+    goal: '<circle cx="8" cy="8" r="5.5"/><circle cx="8" cy="8" r="2"/>',
+    drop: '<path d="M8 2.5s4 4.2 4 7a4 4 0 0 1-8 0c0-2.8 4-7 4-7z"/>',
+    scale: '<path d="M3 12.5h10"/><path d="M5.5 9.5l2.5-5 2.5 5"/>',
+    flame: '<path d="M8 2.5c2 2.4 3.2 4.2 3.2 6.1a3.2 3.2 0 0 1-6.4 0c0-1 .4-1.9 1.2-2.9"/>',
+});
+/** 描边类图标（`line`／`copy`／`goal`／`drop`／`scale`／`flame`）走 `fill:none`；其余走实底。 */
+const FILLED_ICONS = ['grid', 'table'];
+function iconSvg(icon) {
+    const filled = FILLED_ICONS.includes(icon);
+    const attrs = filled
+        ? 'fill="currentColor"'
+        : 'fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"';
+    return '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" ' + attrs + '>'
+        + ICON_PATHS[icon] + '</svg>';
+}
+/** 分段导航：等宽分格，每格「图标 ＋ 短名（＋ 计数）」，当前格实底。
+ *  `items: []` ＝ 空串；非法图标／`id` 为空即抛。 */
+export function renderSegmentedNav(input) {
+    const items = assertItems(input.items, 'renderSegmentedNav: input.items');
+    if (items.length === 0)
+        return '';
+    const current = optText(input.current, 'renderSegmentedNav: input.current');
+    const sticky = input.sticky === undefined ? true : input.sticky === true;
+    const ariaLabel = optText(input.ariaLabel, 'renderSegmentedNav: input.ariaLabel');
+    const extra = optText(input.extraClass, 'renderSegmentedNav: input.extraClass');
+    const body = items.map((raw, i) => {
+        const field = 'renderSegmentedNav: input.items[' + i + ']';
+        const item = raw;
+        const id = reqText(item.id, field + '.id');
+        const label = reqText(item.label, field + '.label');
+        const icon = item.icon;
+        if (icon !== undefined && !SEG_NAV_ICONS.includes(icon)) {
+            throw new Error('pageNav: ' + field + '.icon 必须是 ' + SEG_NAV_ICONS.join('／') + ' 之一');
+        }
+        const count = optText(item.count, field + '.count');
+        const on = current !== undefined && current === id;
+        return '<a href="#' + esc(id) + '"'
+            + ' class="ilife-block-seg-nav-item' + (on ? ' is-on' : '') + '"'
+            + (on ? ' aria-current="page"' : '') + '>'
+            + (icon === undefined ? '' : iconSvg(icon))
+            + '<span class="ilife-block-seg-nav-label">' + esc(label) + '</span>'
+            + (count === undefined ? '' : '<span class="ilife-block-seg-nav-count">' + esc(count) + '</span>')
+            + '</a>';
+    }).join('');
+    return '<nav class="ilife-block-seg-nav' + (sticky ? ' is-sticky' : '')
+        + (extra === undefined ? '' : ' ' + extra) + '"'
+        + (ariaLabel === undefined ? '' : ' aria-label="' + esc(ariaLabel) + '"') + '>'
+        + body + '</nav>';
+}
+export { pageNavCss } from './style.js';

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

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

package/dist/components/page-nav/style.d.ts

@@ -0,0 +1,23 @@
+/** pageNavCss · #950：本族样式的**唯一产出者**（自产出器那件整段搬来，选择器与值一字未改）。
+ *
+ *  **住址**：目录化批次①把它从 `src/pageNavCss.ts` 搬到 `src/components/page-nav/style.ts`
+ *  （同批产出器 → `./index.ts`）；判据＝产物逐字节相同（`docs/base/base-render/组件目录架构.md`）。
+ *
+ *  为什么分开住：产出器那件带上这一整段就越过本包 350 行告警线；
+ *  照仓内先例（`src/render/reviewDocsCss.ts`：样式另立姊妹件、出口经件薄转出），本族样式单独一件，
+ *  产出器那件只留形状与类型，两边都落回线内。由 `pageShapeCss()` 汇总进页。
+ *
+ *  `#950` 收口：原先住这里的**胶囊行**那一段（容器 ＋ 语气色 ＋ 行内元素不被网格拉伸）已随件
+ *  移籍区块层 `blocks.ts`——同一容器类被两层各定义一次会互相盖，且胶囊的语气是胶囊自己的皮肤。
+ *
+ *  **本件是冻结面，不在「选中态与皮肤语言」那笔改动的范围内**：它是六个技能既有页面在用的
+ *  `pageShapes` 一族，值一动、老页面的观感就动（这一族早于皮肤契约，故也不在横切判据 ⑦ 的扫描面里）。
+ *  2026-09-24 有席位按新法则把 `.is-on` 改成"整块选中档"（`surface-2` ＋ `accent` 侧标）并让轨底随动，
+ *  **主控撤回**：那笔改动的代价是"轨底与选中块在无皮肤页面上取值互换"，属于要给用户看稿的改动，
+ *  不搭车。若日后要做，走独立一票，附带一张复看墙。
+ */
+/** 本族样式的唯一产出者。恒返回非空 CSS 文本（由 `pageShapeCss()` 汇总进页）。 */
+export declare function pageNavCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style.d.ts.map

package/dist/components/page-nav/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/page-nav/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AASH,wDAAwD;AACxD,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAoEvE"}

package/dist/components/page-nav/style.js

@@ -0,0 +1,93 @@
+/** pageNavCss · #950：本族样式的**唯一产出者**（自产出器那件整段搬来，选择器与值一字未改）。
+ *
+ *  **住址**：目录化批次①把它从 `src/pageNavCss.ts` 搬到 `src/components/page-nav/style.ts`
+ *  （同批产出器 → `./index.ts`）；判据＝产物逐字节相同（`docs/base/base-render/组件目录架构.md`）。
+ *
+ *  为什么分开住：产出器那件带上这一整段就越过本包 350 行告警线；
+ *  照仓内先例（`src/render/reviewDocsCss.ts`：样式另立姊妹件、出口经件薄转出），本族样式单独一件，
+ *  产出器那件只留形状与类型，两边都落回线内。由 `pageShapeCss()` 汇总进页。
+ *
+ *  `#950` 收口：原先住这里的**胶囊行**那一段（容器 ＋ 语气色 ＋ 行内元素不被网格拉伸）已随件
+ *  移籍区块层 `blocks.ts`——同一容器类被两层各定义一次会互相盖，且胶囊的语气是胶囊自己的皮肤。
+ *
+ *  **本件是冻结面，不在「选中态与皮肤语言」那笔改动的范围内**：它是六个技能既有页面在用的
+ *  `pageShapes` 一族，值一动、老页面的观感就动（这一族早于皮肤契约，故也不在横切判据 ⑦ 的扫描面里）。
+ *  2026-09-24 有席位按新法则把 `.is-on` 改成"整块选中档"（`surface-2` ＋ `accent` 侧标）并让轨底随动，
+ *  **主控撤回**：那笔改动的代价是"轨底与选中块在无皮肤页面上取值互换"，属于要给用户看稿的改动，
+ *  不搭车。若日后要做，走独立一票，附带一张复看墙。
+ */
+/** 换行（仓库口径：不写字面换行转义，与 `blocks.ts`／`pageShapes.ts` 同）。 */
+const LF = String.fromCharCode(10);
+/* ══════════════════════════════════════════════════════════════
+ * 样式（本族）：与产出器**分住两件**（本件）——照仓内 `reviewDocsCss.ts` 的先例，产出器那件只留形状与类型。
+ * ══════════════════════════════════════════════════════════════ */
+/** 本族样式的唯一产出者。恒返回非空 CSS 文本（由 `pageShapeCss()` 汇总进页）。 */
+export function pageNavCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    return [
+        '/* ① 胶囊行（容器 ＋ 语气色 ＋ 行内元素不被网格拉伸）已于 #950 收口时**移籍区块层** */',
+        '/*   （`blocks.ts` 的 `chipButton` 区）：容器类 `ilife-block-chip-row` 的样式原在两处各定义 */',
+        '/*   一次、页面层那条会吃掉区块层的 `margin`；且胶囊的语气本就是胶囊自己的皮肤。本件只管导航。 */',
+        '/* ② 分段导航：等宽分格 ＋ 选中实底。做「动作」的形，不做「状态」的形。 */',
+        root + ' .' + p + 'block-seg-nav {',
+        '  display: flex;',
+        '  gap: 4px;',
+        '  padding: 4px;',
+        '  background: var(--soft);',
+        '  border: 1px solid var(--line);',
+        '  border-radius: ' + 14 + 'px;',
+        '}',
+        root + ' .' + p + 'block-seg-nav.is-sticky {',
+        '  position: sticky;',
+        '  top: 0;',
+        '  z-index: 5;',
+        '}',
+        root + ' .' + p + 'block-seg-nav-item {',
+        '  flex: 1 1 0;',
+        '  display: flex;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  gap: 7px;',
+        '  box-sizing: border-box;',
+        '  min-height: 44px;',
+        '  min-width: 0;',
+        '  padding: 0 10px;',
+        '  border-radius: ' + 8 + 'px;',
+        '  color: var(--fg2);',
+        '  font-size: 13.5px;',
+        '  font-weight: 600;',
+        '  text-decoration: none;',
+        '}',
+        root + ' .' + p + 'block-seg-nav-item > svg {',
+        '  width: 15px;',
+        '  height: 15px;',
+        '  flex: none;',
+        '}',
+        root + ' .' + p + 'block-seg-nav-item.is-on {',
+        '  background: var(--card);',
+        '  color: var(--fg);',
+        '  box-shadow: ' + '0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .04)' + ';',
+        '}',
+        root + ' .' + p + 'block-seg-nav-item:focus-visible {',
+        '  outline: 2px solid var(--blue);',
+        '  outline-offset: 2px;',
+        '}',
+        root + ' .' + p + 'block-seg-nav-count {',
+        '  color: var(--fg3);',
+        '  font-size: 12px;',
+        '  font-weight: 600;',
+        '}',
+        '@media (max-width: 640px) {',
+        '  ' + root + ' .' + p + 'block-seg-nav-item {',
+        '    gap: 5px;',
+        '    padding: 0 6px;',
+        '    font-size: 12.5px;',
+        '  }',
+        '  ' + root + ' .' + p + 'block-seg-nav-count {',
+        '    display: none;',
+        '  }',
+        '}',
+    ].join(LF);
+}

package/dist/components/page-nav/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/page-nav/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,yDAAyD;AACzD,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAEnC;;oEAEoE;AAEpE,wDAAwD;AACxD,MAAM,UAAU,UAAU,CAAC,KAAoC;IAC7D,MAAM,CAAC,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;WAC1C,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvF,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,GAAG,SAAS,CAAC;IACjC,OAAO;QACL,wDAAwD;QACxD,8EAA8E;QAC9E,2DAA2D;QAC3D,4CAA4C;QAC5C,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,iBAAiB;QACnC,kBAAkB;QAClB,aAAa;QACb,iBAAiB;QACjB,4BAA4B;QAC5B,kCAAkC;QAClC,mBAAmB,GAAG,EAAE,GAAG,KAAK;QAChC,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,2BAA2B;QAC7C,qBAAqB;QACrB,WAAW;QACX,eAAe;QACf,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,sBAAsB;QACxC,gBAAgB;QAChB,kBAAkB;QAClB,wBAAwB;QACxB,4BAA4B;QAC5B,aAAa;QACb,2BAA2B;QAC3B,qBAAqB;QACrB,iBAAiB;QACjB,oBAAoB;QACpB,mBAAmB,GAAG,CAAC,GAAG,KAAK;QAC/B,sBAAsB;QACtB,sBAAsB;QACtB,qBAAqB;QACrB,0BAA0B;QAC1B,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,4BAA4B;QAC9C,gBAAgB;QAChB,iBAAiB;QACjB,eAAe;QACf,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,4BAA4B;QAC9C,4BAA4B;QAC5B,qBAAqB;QACrB,gBAAgB,GAAG,kEAAkE,GAAG,GAAG;QAC3F,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,oCAAoC;QACtD,mCAAmC;QACnC,wBAAwB;QACxB,GAAG;QACH,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,uBAAuB;QACzC,sBAAsB;QACtB,oBAAoB;QACpB,qBAAqB;QACrB,GAAG;QACH,6BAA6B;QAC7B,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,sBAAsB;QAC/C,eAAe;QACf,qBAAqB;QACrB,wBAAwB;QACxB,KAAK;QACL,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,uBAAuB;QAChD,oBAAoB;QACpB,KAAK;QACL,GAAG;KACJ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC"}

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

@@ -0,0 +1,67 @@
+/** #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` 之下**：没启用本配方的页面一条都命中不到
+ *  （产出物逐字节不变，登录门读数见证据件）。
+ */
+/** 页面级配方的根类名：整页装配把这一颗类加到版面根上（`docPage.ts` 的 `pageUi` 位）。 */
+export declare const PAGE_UI_CLASS = "ilife-page-ui";
+/** 配 `viewport-fit=cover` 的 viewport 串（`env(safe-area-inset-*)` 在 iOS 上不写它恒取 0）。
+ *  只在启用本配方时用它替换旧串；不给即老串（旧调用方逐字节不变）。 */
+export declare 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 declare const PAGE_LIMITS: Readonly<{
+    readonly touchMinPx: 44;
+    readonly textMinPx: 12;
+    readonly breakpointsPx: readonly number[];
+}>;
+/** #950 C1 正文列宽四档（闭集）：**缺省 `centered` ＝ 改前行为**。
+ *  · `centered`：正文 880 居中 ＋ 满铺白名单（表／图／卡排／键值行满铺）；
+ *  · `wide`：正文 1120 居中（同族先例：缺口页页宽 1120）；
+ *  · `full`：不收窄，正文满铺页壳（1280）；
+ *  · `locked`：880 居中且**满铺白名单失效**（所有子件都收进正文列）——这一档正是两个技能包
+ *    各自写过的垫片（`skill-calorie` 的 `ONE_COLUMN_CSS`／`workoutPlanCss.ts` 的 `PREVIEW_COLUMN_CSS`），
+ *    「两个包各写一份垫片 ＝ 公共层缺一个参数」，故提到这里当参数。 */
+export declare const PAGE_COLUMNS: readonly ["centered", "wide", "full", "locked"];
+export type PageColumn = (typeof PAGE_COLUMNS)[number];
+/** 两档正文列宽（px）：`centered`／`locked` 用 880（改前既有值），`wide` 用 1120。 */
+export declare const PAGE_COLUMN_WIDTH_PX: Readonly<{
+    readonly centered: 880;
+    readonly wide: 1120;
+}>;
+export interface PageUiCssInput {
+    /** 类名前缀；缺省 `ilife-`（与 `blocksCss({ prefix })` 同口径）。 */
+    readonly prefix?: string;
+    /** **正文列宽档**（#950 C1）：缺省 `centered`（＝改前行为，选择器与值逐条不变）。 */
+    readonly column?: PageColumn;
+}
+/** 页面级移动端配方的样式资产唯一产出者。恒返回非空 CSS 文本。 */
+export declare function pageUiCss(input?: PageUiCssInput): string;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAQH,4DAA4D;AAC5D,eAAO,MAAM,aAAa,kBAAkB,CAAC;AAE7C;uCACuC;AACvC,eAAO,MAAM,gBAAgB,0DAA0D,CAAC;AAExF;;;;;;;8DAO8D;AAC9D,eAAO,MAAM,WAAW;;;;EAIb,CAAC;AAEZ;;;;;;yCAMyC;AACzC,eAAO,MAAM,YAAY,iDAAkD,CAAC;AAC5E,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,iEAAiE;AACjE,eAAO,MAAM,oBAAoB;;;EAAwD,CAAC;AAE1F,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;CAC9B;AA8ED,uCAAuC;AACvC,wBAAgB,SAAS,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,CAoQxD"}