base-paint 0.3.13 → 0.3.15

package/dist/components/page-head/attrs.js

@@ -0,0 +1,53 @@
+/** page-head · **标记契约**（渲染与调用方共用的唯一事实：类名／形态闭集／入参类型）。
+ *
+ *  这一件落地的是原型墙（`.scratch/ui-组件墙/parts-01-纸面与页头.mjs`，2026-09 用户裁定）
+ *  里的**形态 B「读数当第二行」**——一页最上面那段：眉标（技能 · 域）／页标题（`<h1>`）／
+ *  **主读数第二行大字**／副题（时间窗／范围／条数）／口径行／可选右上工具位。
+ *
+ *  形态键写在 `PAGE_HEAD_FORMS`（闭集）：本件只有一格，但键必须存在——
+ *  「形态是骨架，不是地址」，日后加第二形态是在闭集里加一格，不是新开一件。
+ *  闭集外的值一律 `badInput`（不静默降级：降级会让调用方以为自己拿到了另一种骨架）。
+ */
+/** 本件的类名根：全部槽位类名都是 `PAGE_HEAD_CLASS + '-' + 槽名`。 */
+export const PAGE_HEAD_CLASS = 'ilife-block-page-head';
+/** 槽位闭集（标记契约的一部分：`render.ts` 与判据都用这里的名字拼类名，不各抄一份字面量）。 */
+export const PAGE_HEAD_SLOTS = [
+    /** 第一行：眉标 ＋ 页标题（＋ 工具位）并成的那一排。 */
+    'top',
+    /** 眉标（技能名 · 域），可换行。 */
+    'eyebrow',
+    /** 眉标左端那枚方点（纯装饰，`aria-hidden`；强调色只许出现在这类非文本位上）。 */
+    'mark',
+    /** 眉标里的技能名。 */
+    'skill',
+    /** 眉标里的域（可选；它前面的细竖线由样式画，不由标记写分隔符）。 */
+    'domain',
+    /** 可选右上工具位：一句读数或一枚状态字（**不放按钮**）。 */
+    'tool',
+    /** 页标题（一页恰好一个 `<h1>`）。 */
+    'title',
+    /** 主读数那一行（本形态的识别特征：它是标题下面那一行大字）。 */
+    'reading',
+    /** 主读数的值（含单位）。 */
+    'value',
+    /** 单位（小一号，跟在值后）。 */
+    'unit',
+    /** 分母／标尺（可选，排在主读数之后）。 */
+    'denominator',
+    /** 主读数后的说明（可选，如「七日合计」）。 */
+    'note',
+    /** 副题行：时间窗／范围／条数（逐段一枚 `<span>`，段间由列距承担、不写分隔符）。 */
+    'sub',
+    /** 口径行：这一页的数字怎么算的（弱文字，可很长、必须能换行）。 */
+    'caliber',
+];
+/** 槽类的类名（唯一拼法：别处不许再写 `PAGE_HEAD_CLASS + '-' + …`）。 */
+export function pageHeadSlot(slot, prefix = 'ilife-') {
+    return prefix + 'block-page-head-' + slot;
+}
+/** 形态闭集：本件只落地了形态 B「读数当第二行」。 */
+export const PAGE_HEAD_FORMS = ['hero'];
+/** 缺值的写法：**缺值写成 `—`，不许写 0、不许留空**（全仓同一条地板）。 */
+export const PAGE_HEAD_MISSING = '—';
+/** 口径行左端那枚标签（口径行只要出，就带它：读者一眼看出这一行是「怎么算的」）。 */
+export const PAGE_HEAD_CALIBER_LABEL = '口径';

package/dist/components/page-head/attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.js","sourceRoot":"","sources":["../../../src/components/page-head/attrs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,oDAAoD;AACpD,MAAM,CAAC,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAEvD,yDAAyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,iCAAiC;IACjC,KAAK;IACL,uBAAuB;IACvB,SAAS;IACT,mDAAmD;IACnD,MAAM;IACN,eAAe;IACf,OAAO;IACP,sCAAsC;IACtC,QAAQ;IACR,oCAAoC;IACpC,MAAM;IACN,0BAA0B;IAC1B,OAAO;IACP,oCAAoC;IACpC,SAAS;IACT,kBAAkB;IAClB,OAAO;IACP,oBAAoB;IACpB,MAAM;IACN,yBAAyB;IACzB,aAAa;IACb,2BAA2B;IAC3B,MAAM;IACN,kDAAkD;IAClD,KAAK;IACL,qCAAqC;IACrC,SAAS;CACD,CAAC;AAGX,sDAAsD;AACtD,MAAM,UAAU,YAAY,CAAC,IAAkB,EAAE,MAAM,GAAG,QAAQ;IAChE,OAAO,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAAC;AAC5C,CAAC;AAED,+BAA+B;AAC/B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAM,CAAU,CAAC;AAGjD,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAErC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,IAAI,CAAC"}

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

@@ -0,0 +1,13 @@
+/** page-head · **组件出口**（本组件对外的唯一名字面）。
+ *
+ *  五个运行名：`renderPageHead(input)`（产标记，零 DOM）／`pageHeadCss()`（样式段）／
+ *  形态闭集 `PAGE_HEAD_FORMS`（本件只落地形态 B「读数当第二行」）／类名根 `PAGE_HEAD_CLASS`／
+ *  尺寸事实 `PAGE_HEAD_READING_SCALE`（主读数 ＝ 页标题 × 它）。加三个类型名（入参面）。
+ *
+ *  用法与参数表见同目录 `README.md`。消费方走 `base-paint/blocks`（组件层出口），不走根出口。
+ */
+export { PAGE_HEAD_CLASS, PAGE_HEAD_FORMS } from './attrs.js';
+export type { PageHeadForm, PageHeadInput, PageHeadReading } from './attrs.js';
+export { renderPageHead } from './render.js';
+export { PAGE_HEAD_READING_SCALE, pageHeadCss } from './style.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-head/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC9D,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,11 @@
+/** page-head · **组件出口**（本组件对外的唯一名字面）。
+ *
+ *  五个运行名：`renderPageHead(input)`（产标记，零 DOM）／`pageHeadCss()`（样式段）／
+ *  形态闭集 `PAGE_HEAD_FORMS`（本件只落地形态 B「读数当第二行」）／类名根 `PAGE_HEAD_CLASS`／
+ *  尺寸事实 `PAGE_HEAD_READING_SCALE`（主读数 ＝ 页标题 × 它）。加三个类型名（入参面）。
+ *
+ *  用法与参数表见同目录 `README.md`。消费方走 `base-paint/blocks`（组件层出口），不走根出口。
+ */
+export { PAGE_HEAD_CLASS, PAGE_HEAD_FORMS } from './attrs.js';
+export { renderPageHead } from './render.js';
+export { PAGE_HEAD_READING_SCALE, pageHeadCss } from './style.js';

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/page-head/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/page-head/model.d.ts

@@ -0,0 +1,23 @@
+import { type PageHeadForm } from './attrs.js';
+/** 内部类型：每个字段都已校验、已归一（`undefined` 一律换成「不给」或空数组）。 */
+export interface PageHeadModel {
+    readonly form: PageHeadForm;
+    readonly skill: string;
+    readonly domain?: string;
+    readonly title: string;
+    readonly reading: {
+        readonly value: string;
+        readonly unit?: string;
+        readonly denominator?: string;
+        readonly note?: string;
+    };
+    readonly sub: readonly string[];
+    readonly caliber: readonly string[];
+    readonly tool?: string;
+    readonly extraClass?: string;
+}
+/** 入参归一化。**唯一入口**：`render.ts` 只吃它产出的 `PageHeadModel`，不再自己碰 `any`。 */
+export declare function normalizePageHead(input: unknown): PageHeadModel;
+/** 口径行左端的标签（归一化期就定下来：口径行只要出，就带它）。 */
+export declare const PAGE_HEAD_CALIBER = "\u53E3\u5F84";
+//# sourceMappingURL=model.d.ts.map

package/dist/components/page-head/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/components/page-head/model.ts"],"names":[],"mappings":"AASA,OAAO,EAIL,KAAK,YAAY,EAElB,MAAM,YAAY,CAAC;AAEpB,mDAAmD;AACnD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,QAAQ,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAwCD,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,CAsB/D;AAED,qCAAqC;AACrC,eAAO,MAAM,iBAAiB,iBAA0B,CAAC"}

package/dist/components/page-head/model.js

@@ -0,0 +1,77 @@
+/** page-head · **入参归一化与校验**（把 `any` 与说不出的 `unknown` 挡在门外，产出内部类型）。
+ *
+ *  三条口径：
+ *   1. **非法入参一律 `badInput()`**（抛 `BlocksError`）——不静默降级、不「尽量猜」：
+ *      猜出来的骨架会在页面上长成另一种东西，而调用方以为拿到了本件。
+ *   2. **缺值与空串是两件事**：`reading.value` 给 `null` ＝ 缺值（写成 `—`）；给空串 ＝ 错。
+ *   3. 归一化只做「形状」：取整、千分位、单位口径**归调用方**——本件只收「已经是给人看的样子」的串。
+ */
+import { assertPlainObject, badInput, optExtraClass, optText, reqText } from '../shared/validate.js';
+import { PAGE_HEAD_CALIBER_LABEL, PAGE_HEAD_FORMS, PAGE_HEAD_MISSING, } from './attrs.js';
+/** 串或串数组 → 段数组（`''` 与 `[]` 都按「不出这一行」处理；数组里的空串与非串一律拒）。 */
+function reqTextList(value, field) {
+    if (value === undefined)
+        return [];
+    if (typeof value === 'string') {
+        const one = optText(value, field);
+        return one === undefined ? [] : [one];
+    }
+    if (!Array.isArray(value))
+        badInput(field + ' 必须是字符串，或字符串数组（逐段一枚）');
+    const out = [];
+    for (let i = 0; i < value.length; i += 1)
+        out.push(reqText(value[i], field + '[' + i + ']'));
+    return out;
+}
+/** 主读数：`null` ＝ 缺值（`—`）；空串与缺席都是错（它们说不清「这页到底有没有数」）。 */
+function reqReading(value) {
+    assertPlainObject(value, 'page-head: input.reading');
+    const raw = value;
+    const given = raw.value;
+    let shown;
+    if (given === null) {
+        shown = PAGE_HEAD_MISSING;
+    }
+    else if (given === undefined) {
+        badInput('page-head: input.reading.value 必填（缺值请显式给 null）');
+    }
+    else if (typeof given !== 'string') {
+        badInput('page-head: input.reading.value 必须是字符串或 null（缺值）');
+    }
+    else if (given === '') {
+        badInput('page-head: input.reading.value 不许给空串：缺值请给 null（写成 ' + PAGE_HEAD_MISSING + '）');
+    }
+    else {
+        shown = given;
+    }
+    return {
+        value: shown,
+        unit: optText(raw.unit, 'page-head: input.reading.unit'),
+        denominator: optText(raw.denominator, 'page-head: input.reading.denominator'),
+        note: optText(raw.note, 'page-head: input.reading.note'),
+    };
+}
+/** 入参归一化。**唯一入口**：`render.ts` 只吃它产出的 `PageHeadModel`，不再自己碰 `any`。 */
+export function normalizePageHead(input) {
+    assertPlainObject(input, 'renderPageHead: input');
+    const raw = input;
+    const form = raw.form === undefined ? PAGE_HEAD_FORMS[0] : raw.form;
+    if (!PAGE_HEAD_FORMS.includes(form)) {
+        badInput('page-head: input.form 必须是 ' + PAGE_HEAD_FORMS.join('／') + ' 之一（本件只落地形态 B「读数当第二行」）');
+    }
+    const sub = reqTextList(raw.sub, 'page-head: input.sub');
+    const caliber = reqTextList(raw.caliber, 'page-head: input.caliber');
+    return {
+        form: form,
+        skill: reqText(raw.skill, 'page-head: input.skill'),
+        domain: optText(raw.domain, 'page-head: input.domain'),
+        title: reqText(raw.title, 'page-head: input.title'),
+        reading: reqReading(raw.reading),
+        sub,
+        caliber,
+        tool: optText(raw.tool, 'page-head: input.tool'),
+        extraClass: optExtraClass(raw.extraClass, 'page-head: input.extraClass'),
+    };
+}
+/** 口径行左端的标签（归一化期就定下来：口径行只要出，就带它）。 */
+export const PAGE_HEAD_CALIBER = PAGE_HEAD_CALIBER_LABEL;

package/dist/components/page-head/model.js.map

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

package/dist/components/page-head/render.d.ts

@@ -0,0 +1,3 @@
+/** 渲染页头（纯函数：同样的入参恒产同样的字节；转义只经 `shared/escape.ts`）。 */
+export declare function renderPageHead(input: unknown): string;
+//# sourceMappingURL=render.d.ts.map

package/dist/components/page-head/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/components/page-head/render.ts"],"names":[],"mappings":"AAyFA,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAIrD"}

package/dist/components/page-head/render.js

@@ -0,0 +1,84 @@
+/** page-head · **渲染**（纯函数产 HTML；本件只有形态 B「读数当第二行」一种骨架）。
+ *
+ *  —— 形态 B：读数当第二行 ——
+ *
+ *  第一行是「这一页叫什么」（眉标 ＋ `<h1>` 并成一排），**第二行是那个数**（大字），
+ *  之后才是副题（时间窗／范围／条数）与口径行（这一页的数字怎么算的）。
+ *  它替掉的两种错法：
+ *   · 把口径写成一句灰字塞在标题下面 —— 读者分不清哪一行是「标题」、哪一行是「算法说明」；
+ *   · 主读数与标题抢同一行 —— 窄容器下标题被挤成一列孤字，主读数被压成正文大小。
+ *
+ *  三条硬口径（判据断的就是它们）：
+ *   · 主读数字号**严格大于**页标题，且**不小于正文的 2 倍**（尺寸事实住在 `style.ts` 的
+ *     `PAGE_HEAD_READING_SCALE`，随皮肤一起缩放）；
+ *   · 长标题／眉标／副题**不许 `…` 截断**（可以换行）；
+ *   · 标记里**不写分隔符与缺省占位**：段间分隔由列距与发丝线承担；缺值写成 `—`。
+ */
+import { esc } from '../shared/escape.js';
+import { PAGE_HEAD_CALIBER_LABEL, PAGE_HEAD_CLASS, pageHeadSlot, } from './attrs.js';
+import { normalizePageHead } from './model.js';
+/** 眉标：品牌位（技能名）＋ 范围位（域），中间那条细竖线由样式的 `::before` 画。 */
+function eyebrowHtml(m) {
+    const parts = ['<p class="' + pageHeadSlot('eyebrow') + '">'];
+    parts.push('<i class="' + pageHeadSlot('mark') + '" aria-hidden="true"></i>');
+    parts.push('<b class="' + pageHeadSlot('skill') + '">' + esc(m.skill) + '</b>');
+    if (m.domain !== undefined) {
+        parts.push('<span class="' + pageHeadSlot('domain') + '">' + esc(m.domain) + '</span>');
+    }
+    parts.push('</p>');
+    return parts.join('');
+}
+/** 主读数行：值（＋单位）／分母／说明——附属位比值小一号，随 `flex-wrap` 自己折行。 */
+function readingHtml(m) {
+    const r = m.reading;
+    const parts = ['<p class="' + pageHeadSlot('reading') + '">'];
+    parts.push('<b class="' + pageHeadSlot('value') + '">' + esc(r.value)
+        + (r.unit === undefined ? '' : '<small class="' + pageHeadSlot('unit') + '">' + esc(r.unit) + '</small>')
+        + '</b>');
+    if (r.denominator !== undefined) {
+        parts.push('<span class="' + pageHeadSlot('denominator') + '">' + esc(r.denominator) + '</span>');
+    }
+    if (r.note !== undefined) {
+        parts.push('<span class="' + pageHeadSlot('note') + '">' + esc(r.note) + '</span>');
+    }
+    parts.push('</p>');
+    return parts.join('');
+}
+/** 逐段一枚 `<span>`（**不写分隔符**：段间那道缝由样式的列距／发丝线承担）。 */
+function segmentHtml(slot, segments) {
+    const spans = segments.map((s) => '<span>' + esc(s) + '</span>').join('');
+    return '<p class="' + pageHeadSlot(slot) + '">' + spans + '</p>';
+}
+/** 口径行：左端一枚标签（「口径」）＋ 逐段一枚 `<span>`（段间一条发丝线）。 */
+function caliberHtml(segments) {
+    const spans = segments.map((s) => '<span>' + esc(s) + '</span>').join('');
+    return '<p class="' + pageHeadSlot('caliber') + '"><b>' + esc(PAGE_HEAD_CALIBER_LABEL) + '</b>' + spans + '</p>';
+}
+/** 形态 B 的骨架。**眉标与页标题住在同一排**（`top`）——正是这一步让主读数落成「第二行」：
+ *  拆成两排的话，读数是第三行，形态就变了。容器够窄时眉标与工具位自己折上去，标题不掉字。 */
+function renderHero(m) {
+    const parts = [];
+    parts.push('<div class="' + pageHeadSlot('top') + '">');
+    parts.push(eyebrowHtml(m));
+    parts.push('<h1 class="' + pageHeadSlot('title') + '">' + esc(m.title) + '</h1>');
+    if (m.tool !== undefined) {
+        parts.push('<span class="' + pageHeadSlot('tool') + '">' + esc(m.tool) + '</span>');
+    }
+    parts.push('</div>');
+    parts.push(readingHtml(m));
+    if (m.sub.length > 0)
+        parts.push(segmentHtml('sub', m.sub));
+    if (m.caliber.length > 0)
+        parts.push(caliberHtml(m.caliber));
+    return parts.join('');
+}
+/** 形态 → 骨架（本件只有一格；分派写在这里，加第二形态就是加一支）。 */
+const SKELETONS = {
+    hero: renderHero,
+};
+/** 渲染页头（纯函数：同样的入参恒产同样的字节；转义只经 `shared/escape.ts`）。 */
+export function renderPageHead(input) {
+    const m = normalizePageHead(input);
+    const extra = m.extraClass === undefined ? '' : ' ' + m.extraClass;
+    return '<div class="' + PAGE_HEAD_CLASS + ' is-' + m.form + extra + '">' + SKELETONS[m.form](m) + '</div>';
+}

package/dist/components/page-head/render.js.map

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

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

@@ -0,0 +1,9 @@
+/** **主读数相对页标题的倍数**：本形态的尺寸事实只有这一个数（样式里也只写它一处）。
+ *  它同时满足两条不变量：读数 > 页标题（`2.2 > 1`）；读数 ≥ 正文的 2 倍
+ *  （三套皮肤下 `2.2 × fs-h1 ÷ fs-body` ＝ 4.11／4.68／4.11，最小值仍 > 2）。 */
+export declare const PAGE_HEAD_READING_SCALE = 2.2;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export declare function pageHeadCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/page-head/style.ts"],"names":[],"mappings":"AAgBA;;iEAEiE;AACjE,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAM3C,4BAA4B;AAC5B,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA+NxE"}

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

@@ -0,0 +1,245 @@
+/** page-head · **样式段**（本件唯一的样式来源）。
+ *
+ *  纪律（与本节其余件同一份）：
+ *   · 只经 `skinVar()` 读皮肤 —— 组件里**不写** `var(--ilife-…)`（兜底链只许住在 `skin/contract.ts`）；
+ *   · 全部规则 scope 在 `.<prefix>page-ui` 之下（不开本配方的页零命中）；不写 `:root`／`!important`、不新增 token 名；
+ *   · **宽度只许容器判**：布局靠 `@container` ＋ 内在尺寸 ＋ `flex-wrap`；本件不写任何 `@media`（视口宽 ≠ 组件宽）。
+ *
+ *  几何契约（判据钉住）：主读数 ＝ 页标题 × `PAGE_HEAD_READING_SCALE`，皮肤只给 `fs-h1` 一档 ⇒
+ *  读数跟着皮肤缩放，而「读数 > 标题」「读数 ≥ 正文字号 2 倍」两条不变量在三套皮肤下都成立。
+ */
+import { skinVar } from '../skin/contract.js';
+import { pageHeadSlot } from './attrs.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** **主读数相对页标题的倍数**：本形态的尺寸事实只有这一个数（样式里也只写它一处）。
+ *  它同时满足两条不变量：读数 > 页标题（`2.2 > 1`）；读数 ≥ 正文的 2 倍
+ *  （三套皮肤下 `2.2 × fs-h1 ÷ fs-body` ＝ 4.11／4.68／4.11，最小值仍 > 2）。 */
+export const PAGE_HEAD_READING_SCALE = 2.2;
+/** 窄容器阈值（px）：主读数后的附属位（单位／分母／说明）改走「另起一行」。
+ *  **这是本件自己的宽度**（`@container` 判的），不是视口宽度。 */
+const NARROW_PX = 420;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export function pageHeadCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    const box = root + ' .' + p + 'block-page-head';
+    /** **槽类名**（不带 scope）：写「某槽下的子件」时只许用它。
+     *  坑（本件真踩过，判据已钉住）：把带 scope 的完整选择器再拼一次，会拼出
+     *  `.…-reading > .ilife-page-ui .…-value` 这种**永远不命中**的死规则——语法合法、编译不报错、
+     *  屏幕上「看起来也还行」，只有把图放大看才会发现那一条根本没生效。 */
+    const sc = (slot) => '.' + pageHeadSlot(slot, p);
+    /** **带 scope 的完整选择器**（一条规则打头用）。 */
+    const s = (slot) => root + ' ' + sc(slot);
+    return [
+        '/* page-head（页头 · 形态 B「读数当第二行」）：眉标（技能 · 域）／页标题／主读数大字／副题／口径行。',
+        '   层次不靠阴影与大圆角（小票纸零阴影、大字报刊零圆角）：靠发丝线、字重与尺度差 ⇒ 换皮只换取值。 */',
+        box + ' {',
+        /* 宽度判据的落点：本件是**自己的容器**——嵌进侧栏／面板／卡片时照样按自己的宽度折行。 */
+        '  container-type: inline-size;',
+        '  display: grid;',
+        '  gap: 8px;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font') + ';',
+        '  font-size: ' + skinVar('fs-body') + ';',
+        '  line-height: 1.5;',
+        '}',
+        '/* 第一行：眉标与页标题**同一排**（读的是「这一页叫什么」）。标题的内在宽度撑到 18ch：',
+        '   容器一窄，眉标与工具位自己折到上一行——标题不被挤成一列孤字，也不掉字（不用 `…`）。 */',
+        s('top') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 12px;',
+        '  min-width: 0;',
+        '}',
+        s('top') + ' > ' + sc('eyebrow') + ' {',
+        '  flex: 0 1 auto;',
+        '  min-width: 0;',
+        '}',
+        s('top') + ' > ' + sc('title') + ' {',
+        '  flex: 1 1 max-content;',
+        '  min-width: min(100%, 18ch);',
+        '}',
+        '/* 眉标：品牌位（技能名）＋ 范围位（域），两枚都能换行——**中间那条细竖线是样式画的，不是字。 */',
+        s('eyebrow') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: center;',
+        '  gap: 4px 8px;',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 700;',
+        '  line-height: 1.4;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('mark') + ' {',
+        '  flex: none;',
+        '  display: block;',
+        '  width: 8px;',
+        '  height: 8px;',
+        '  background: ' + skinVar('accent') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '}',
+        '/* 技能名走 `accent-text`（强调色的**文本**档）——`accent` 是非文本档，只许做条／边／底与大字。 */',
+        s('skill') + ' {',
+        '  color: ' + skinVar('accent-text') + ';',
+        '  letter-spacing: .06em;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('domain') + ' {',
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  gap: 8px;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-weight: 600;',
+        '  letter-spacing: .02em;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('domain') + '::before {',
+        '  content: "";',
+        '  flex: none;',
+        '  display: block;',
+        '  width: 1px;',
+        '  height: 11px;',
+        '  background: ' + skinVar('line') + ';',
+        '}',
+        s('title') + ' {',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-display') + ';',
+        '  font-size: ' + skinVar('fs-h1') + ';',
+        '  font-weight: 700;',
+        '  line-height: 1.15;',
+        '  letter-spacing: -.01em;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 右上工具位：**只放一句读数或一枚状态字**（不放按钮——按钮归 `action-bar`）。',
+        '   `margin-left:auto` 把它顶到右缘；容器窄到放不下时它自己折到下一行，不压标题。 */',
+        s('tool') + ' {',
+        '  flex: none;',
+        '  margin-left: auto;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 主读数行：本形态就靠这一行认出来——它是**页标题下面**那一行大字。 */',
+        s('reading') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 10px;',
+        '  margin: 4px 0 0;',
+        '  min-width: 0;',
+        '}',
+        '/* 尺寸事实只有这一个数（读数 ＝ 页标题 × ' + String(PAGE_HEAD_READING_SCALE) + '）：',
+        '   皮肤只给 h1 一档 ⇒ 读数跟着皮肤一起缩放，「读数 > 标题」与「读数 ≥ 正文 2 倍」两条同时成立。 */',
+        s('value') + ' {',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: calc(' + skinVar('fs-h1') + ' * ' + String(PAGE_HEAD_READING_SCALE) + ');',
+        '  font-weight: 700;',
+        '  line-height: 1;',
+        '  letter-spacing: -.02em;',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('unit') + ' {',
+        '  margin-left: 4px;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-weight: 600;',
+        '  letter-spacing: 0;',
+        '}',
+        s('denominator') + ' {',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('note') + ' {',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-weight: 600;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 副题（时间窗／范围／条数）：逐段一枚 `span`、段间只靠列距——**标记里不写分隔符**。 */',
+        s('sub') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 12px;',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  line-height: 1.6;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('sub') + ' > span {',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 口径行：这一页的数字怎么算的（一句话，可以很长）。走 `ink-2` 不走 `ink-3`：',
+        '   本行是**要读的正文**，弱文字档在三套皮肤下更浅，宁可深一档。段间一条发丝线。 */',
+        s('caliber') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 8px;',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  line-height: 1.7;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('caliber') + ' > b {',
+        '  flex: none;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-weight: 700;',
+        '  letter-spacing: .06em;',
+        '}',
+        s('caliber') + ' > span {',
+        '  padding-left: 8px;',
+        '  border-left: 1px solid ' + skinVar('line') + ';',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 本件自身不带可点元素（工具位只放一句读数或一枚状态字）。这一条是**地板**：',
+        '   调用方若把标题或工具位包成链接，焦点必须看得见——不许只写 `outline:none` 而不给替代。 */',
+        box + ' :focus-visible {',
+        '  outline: 2px solid ' + skinVar('accent') + ';',
+        '  outline-offset: 2px;',
+        '}',
+        '/* 窄容器（<' + String(NARROW_PX) + 'px）：附属位（分母／说明）与值挤在一行会把值压窄',
+        '   （分母一长最明显）⇒ **值独占一行**，分母与说明并成下一行（比「逐枚一行」省一行高度）。',
+        '   判的是**本件自己的宽度**：本件会被嵌进侧栏／面板／卡片，视口宽 ≠ 组件宽（所以这里不用 `@media`）。 */',
+        '@container (max-width: ' + String(NARROW_PX) + 'px) {',
+        '  /* 窄容器：右上工具位排到**眉标那一排**的右端（与宽档同一个「右上角」）。',
+        '     不让它插进标题与主读数之间——一插，主读数就掉到第四行，本形态的识别特征当场没了',
+        '     （看图抓出来的：标题的 18ch 下限先把标题挤下去，再让工具位掉到自己那一行）。 */',
+        '  ' + s('eyebrow') + ' {',
+        '    order: -2;',
+        '  }',
+        '  ' + s('tool') + ' {',
+        '    order: -1;',
+        '  }',
+        '  ' + s('reading') + ' {',
+        '    display: grid;',
+        '    grid-template-columns: auto auto;',
+        '    justify-content: start;',
+        '    gap: 4px 10px;',
+        '  }',
+        '  ' + s('reading') + ' > ' + sc('value') + ' {',
+        '    grid-column: 1 / -1;',
+        '  }',
+        '}',
+    ].join(LF);
+}

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

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