base-paint 0.3.13 → 0.3.15

package/dist/components/skeleton/style.js

@@ -0,0 +1,223 @@
+/** skeleton · **样式段**（本件唯一的样式来源）。这也是**动效常量的家**（用户裁定：动效常量住本件的 `style.ts`）。
+ *
+ *  纪律（与本层其余件同一份）：
+ *   · 只经 `skinVar()` 读皮肤 —— 组件里**不写** `var(--ilife-…)`（兜底链只许住在 `skin/contract.ts`）；
+ *   · 全部规则 scope 在 `.<prefix>page-ui` 之下；不写 `:root`／`!important`、不新增 token 名；
+ *   · **宽度只许容器判**：本件设 `container-type: inline-size`（它自己就是容器）；`@container` 只调排头那句
+ *     人话（**不碰行距与列宽**——那是「加载完不跳版」的锚点）。媒体查询只判设备能力。
+ *
+ *  **动效纪律**（判据逐条断）：只动 `opacity`（`SKELETON_PULSE_NAME` 的每一帧只有 opacity 一条声明）；
+ *  `prefers-reduced-motion: reduce` 下 `animation: none` 并换成一个**静止**的可见度（`SKELETON_STILL_OPACITY`）
+ *  —— 不许有东西卡在半路，也不许把占位块变成看不见。
+ *
+ *  几何契约（判据钉死）：
+ *   · 读数位高度 ＝ `skinVar('fs-h1') × SKELETON_READING_SCALE`（**与 `page-head` 主读数同尺度**：
+ *     真读数进来时那一行的高度逐像素不变）；
+ *   · 行距 ＝ `SKELETON_ROW_HEIGHT_PX` ＋ `SKELETON_ROW_SEPARATOR_PX`（行盒 `min-height` ＋ 行间发丝线）；
+ *   · 时间槽宽度**读 `entry-rows` 的常量**（`ENTRY_ROW_TIME_MIN_WIDTH_PX`）—— 跨两件只有一个数字，
+ *     「列对得上」由构造保证，不靠两处抄同一个数；
+ *   · 版面高度 ＝ 排头 ＋ 纸面（读数位 ＋ 行数 × 行距）⇒ 是 `rows` 的线性式。
+ */
+import { ENTRY_ROW_TIME_MIN_WIDTH_PX } from '../entry-rows/index.js';
+import { skinVar } from '../skin/contract.js';
+import { skeletonSlot } from './attrs.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 行盒高度（px）＝**行距**：真件明细行在正文 `line-height:1.5` 下的行高（`entry-rows` 的行盒子同高）。
+ *  行间那条发丝线（`SKELETON_ROW_SEPARATOR_PX`）**画在这个盒子里面**（`box-sizing:border-box`）
+ *  ⇒ 行盒高就是行距，加载前后逐行对得上（真机量的是相邻两行的 `top` 之差）。 */
+export const SKELETON_ROW_HEIGHT_PX = 35;
+/** 行间发丝线（px）：与 `entry-rows` 的行间点线同一副盒子（一条线，含在上面那个行盒里）。 */
+export const SKELETON_ROW_SEPARATOR_PX = 1;
+/** 主读数尺度：与 `page-head` 的主读数同尺度（读数 ＝ 页标题 × 2.2）—— 两件的读数是同一行字。 */
+export const SKELETON_READING_SCALE = 2.2;
+/** 值位列宽（px）：金额／热量那一列。 */
+export const SKELETON_VALUE_SLOT_PX = 64;
+/** 占位块与纸面的混合比（%）：`color-mix(in srgb, ink N%, surface)` —— **从 token 算出来**，不写死灰值。 */
+export const SKELETON_PLACEHOLDER_MIX_PERCENT = 13;
+/** 脉搏动效名（每帧只有 `opacity`）。 */
+export const SKELETON_PULSE_NAME = 'ilife-block-skeleton-pulse';
+/** 脉搏周期（ms）。 */
+export const SKELETON_PULSE_DURATION_MS = 1400;
+/** 脉搏最暗一帧的可见度（不许低到看不见）。 */
+export const SKELETON_PULSE_MIN_OPACITY = 0.55;
+/** `prefers-reduced-motion: reduce` 下的静止可见度（动效停住，占位块照旧看得见）。 */
+export const SKELETON_STILL_OPACITY = 0.72;
+/** 窄容器阈值（px，`@container` 判的是**本件自己的宽度**）：排头那句人话改两台。 */
+export const SKELETON_NARROW_PX = 420;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export function skeletonCss(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-skeleton';
+    /** 槽位的**裸类名**：跟在组合子（`+`／`>`／后代）后面时用它 —— 带 `.ilife-page-ui` 前缀的复合选择器
+     *  拼成 `A + .ilife-page-ui .x` 时，`+` 会落在 `.ilife-page-ui` 上（要求那个「页面壳」是前一行的兄弟），
+     *  规则**静默不匹配**（2026-09 真机判据抓到过这一处）。 */
+    const cls = (slot) => '.' + skeletonSlot(slot, p);
+    const s = (slot) => root + ' ' + cls(slot);
+    /** 占位块的底色：从两个 token 算出来（皮肤换取值，它跟着换）。 */
+    const block = 'color-mix(in srgb, ' + skinVar('ink') + ' ' + String(SKELETON_PLACEHOLDER_MIX_PERCENT) + '%, '
+        + skinVar('surface') + ')';
+    const pulse = SKELETON_PULSE_NAME + ' ' + String(SKELETON_PULSE_DURATION_MS) + 'ms ease-in-out infinite';
+    return [
+        '/* skeleton（加载骨架 · 形态 A「读数 ＋ 明细行骨架」）：占位块照真版式排，加载完不跳版。',
+        '   动效只走 opacity；`prefers-reduced-motion` 下停住但照样看得见。 */',
+        '@keyframes ' + SKELETON_PULSE_NAME + ' {',
+        '  0%, 100% { opacity: ' + String(SKELETON_PULSE_MIN_OPACITY) + '; }',
+        '  50% { opacity: 1; }',
+        '}',
+        box + ' {',
+        '  container-type: inline-size;',
+        '  display: grid;',
+        '  gap: 10px;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font') + ';',
+        '  font-size: ' + skinVar('fs-body') + ';',
+        '  line-height: 1.5;',
+        '}',
+        '/* 排头那句人话：正在读什么 ＋ 还要多久（骨架不是「无话可说」的样子）。 */',
+        s('cap') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 4px 10px;',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '}',
+        s('cap-text') + ' {',
+        '  min-width: 0;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('cap-eta') + ' {',
+        '  flex: none;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '}',
+        '/* 纸面：占位块落在它上面（与真件的纸面同一副盒子：同内距、同圆角、同纸边）。 */',
+        s('card') + ' {',
+        '  display: grid;',
+        '  gap: 12px;',
+        '  min-width: 0;',
+        '  padding: 14px 16px;',
+        '  border: 1px solid ' + skinVar('edge') + ';',
+        '  border-radius: ' + skinVar('radius') + ';',
+        '  background: ' + skinVar('surface') + ';',
+        '  box-shadow: ' + skinVar('shadow') + ';',
+        '}',
+        '/* 读数位：真件这里是页头的主读数大字 ⇒ 占位块的高度就是那一行字的高度（两件同尺度）。 */',
+        s('reading') + ' {',
+        '  display: grid;',
+        '  gap: 8px;',
+        '  justify-items: start;',
+        '  min-width: 0;',
+        '  padding-bottom: 12px;',
+        '  border-bottom: 1px solid ' + skinVar('line') + ';',
+        '}',
+        s('reading-value') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: min(46%, 150px);',
+        '  height: calc(' + skinVar('fs-h1') + ' * ' + String(SKELETON_READING_SCALE) + ');',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        s('reading-sub') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: min(30%, 96px);',
+        '  height: ' + skinVar('fs-sm') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        '/* 明细行组：列宽与真件一致（时间槽读 `entry-rows` 的常量、值位右对齐）。 */',
+        s('list') + ' {',
+        '  display: grid;',
+        '  gap: 0;',
+        '  min-width: 0;',
+        '}',
+        s('row') + ' {',
+        '  display: grid;',
+        '  grid-template-columns: ' + String(ENTRY_ROW_TIME_MIN_WIDTH_PX) + 'px minmax(0, 1fr) minmax(0, '
+            + String(SKELETON_VALUE_SLOT_PX) + 'px);',
+        '  gap: 10px;',
+        '  align-items: center;',
+        '  box-sizing: border-box;',
+        '  min-height: ' + String(SKELETON_ROW_HEIGHT_PX) + 'px;',
+        '  min-width: 0;',
+        '}',
+        '/* 行间一条发丝线（第一行不出，与 `entry-rows` 同一副盒子）；`box-sizing:border-box` ⇒',
+        '   线画在行盒里，行距恒 ＝ ' + String(SKELETON_ROW_HEIGHT_PX) + 'px。 */',
+        s('row') + ' + ' + cls('row') + ' {',
+        '  border-top: ' + String(SKELETON_ROW_SEPARATOR_PX) + 'px solid ' + skinVar('line') + ';',
+        '}',
+        s('row-time') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: 100%;',
+        '  height: ' + skinVar('fs-sm') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        s('row-lines') + ' {',
+        '  display: grid;',
+        '  gap: 6px;',
+        '  min-width: 0;',
+        '}',
+        s('line') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: 100%;',
+        '  height: ' + skinVar('fs-xs') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        s('line-short') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: 52%;',
+        '  height: ' + skinVar('fs-xs') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        s('row-value') + ' {',
+        '  display: block;',
+        '  box-sizing: border-box;',
+        '  width: 100%;',
+        '  height: ' + skinVar('fs-sm') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + block + ';',
+        '  animation: ' + pulse + ';',
+        '}',
+        '/* 动效停住：占位块换成一个静止的可见度（停住 ≠ 看不见）。 */',
+        '@media (prefers-reduced-motion:reduce) {',
+        '  ' + s('reading-value') + ',',
+        '  ' + s('reading-sub') + ',',
+        '  ' + s('row-time') + ',',
+        '  ' + s('line') + ',',
+        '  ' + s('line-short') + ',',
+        '  ' + s('row-value') + ' {',
+        '    animation: none;',
+        '    opacity: ' + String(SKELETON_STILL_OPACITY) + ';',
+        '  }',
+        '}',
+        '/* 窄容器（<' + String(SKELETON_NARROW_PX) + 'px）：只把排头那句人话改成两台 ——',
+        '   **行距与列宽一律不动**（它们是「加载完不跳版」的锚点，窄档改了就等于换版式）。 */',
+        '@container (max-width: ' + String(SKELETON_NARROW_PX) + 'px) {',
+        '  ' + s('cap') + ' {',
+        '    display: grid;',
+        '    gap: 2px;',
+        '    justify-items: start;',
+        '  }',
+        '}',
+    ].join(LF);
+}

package/dist/components/skeleton/style.js.map

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

package/dist/components/skin/contract.d.ts

@@ -0,0 +1,177 @@
+/** skin · **皮肤契约**（唯一事实）：token 名单 ＋ 兜底链 ＋ 读法。
+ *
+ *  为什么有这一层：组件样式**只读 token 名、永不读值**，换皮才机械地「不换结构」。
+ *  60 件 × 3 皮肤若各自写值，颜色必然走散（铁律二：概念唯一）。
+ *
+ *  三条纪律：
+ *   1. **名单只在本件**：`SKIN_TOKENS` 是唯一出处，各皮肤取值表按它对账（判据也按它对账）。
+ *   2. **兜底链只在本件**：`skinVar()` 产出带兜底的 `var()` 串，兜底到那 11 个冻结 token 或字面值
+ *      ⇒ 新件在老页面（没挂皮肤类）里也照常出得来，**零接线**，且老页面逐字节不变（加法式）。
+ *   3. **组件里不许手写 `var(--ilife-…)`**：一律经 `skinVar()`，否则兜底会在 N 处走散。
+ */
+import type { CssVarName } from '../../spec/style.js';
+/** 皮肤名闭集（与 `skinCss()` 产出的类名一一对应）。
+ *  四套＝**原型墙打分胜出那一批**（paper／broadsheet／neutral）＋ **2026-09-24 新皮肤墙唯一活下来的 ink**。
+ *  同日被整体否掉的两套（`terminal` 终端暗色／`blueprint` 蓝图工程）**已删**——理由见
+ *  `docs/base/base-render/选中态与皮肤语言.md` 第六节：留在注册表里的每一套皮肤都是一份承诺
+ *  （对比地板、判据、清单、维护），**不能被选中的皮肤只剩负债**，且会诱人误用。
+ *  **顺序必须与 `SKINS` 的键顺序一致**（判据 `assert.deepEqual(Object.keys(SKINS), [...SKIN_NAMES])`）。 */
+export declare const SKIN_NAMES: readonly ["paper", "broadsheet", "neutral", "ink"];
+export type SkinName = (typeof SKIN_NAMES)[number];
+/** 缺省皮肤：原型墙打分胜出者（3.83 分，≥4 占 76.6%）。 */
+export declare const SKIN_DEFAULT: SkinName;
+/** 皮肤 token 名单 ＋ 兜底链（唯一事实）。
+ *  兜底链优先用那 11 个冻结 token（老页面已注入），再落到字面值。 */
+export declare const SKIN_TOKENS: Readonly<{
+    readonly ground: {
+        readonly fallback: readonly ["--bg", "#f5f5f7"];
+        readonly note: "页面底（整页的背景）";
+    };
+    readonly surface: {
+        readonly fallback: readonly ["--card", "#ffffff"];
+        readonly note: "纸面／卡面（内容浮在它上面）";
+    };
+    readonly 'surface-2': {
+        readonly fallback: readonly ["--soft", "#f5f8ff"];
+        readonly note: "次要面（软底块、表头、选中行）";
+    };
+    readonly line: {
+        readonly fallback: readonly ["--line", "#d2d2d7"];
+        readonly note: "分隔线（发丝线的颜色）";
+    };
+    readonly edge: {
+        readonly fallback: readonly ["--line", "#d2d2d7"];
+        readonly note: "纸边（纸面与桌面之间那道边）";
+    };
+    readonly ink: {
+        readonly fallback: readonly ["--fg", "#1d1d1f"];
+        readonly note: "主文字（读数、标题）";
+    };
+    readonly 'ink-2': {
+        readonly fallback: readonly ["--fg2", "#6e6e73"];
+        readonly note: "副文字（标签、副语）";
+    };
+    readonly 'ink-3': {
+        readonly fallback: readonly ["--fg3", "#86868b"];
+        readonly note: "弱文字（脚注、口径行）——**须过对比地板**";
+    };
+    readonly accent: {
+        readonly fallback: readonly ["--blue", "#007aff"];
+        readonly note: "强调色：**非文本**（条、边、底）与大字用";
+    };
+    readonly 'accent-text': {
+        readonly fallback: readonly ["--blue2", "#0a63ce"];
+        readonly note: "强调色的**文本**档（对底 ≥4.5:1）";
+    };
+    readonly 'accent-ink': {
+        readonly fallback: readonly ["--card", "#ffffff"];
+        readonly note: "强调底上的字色";
+    };
+    readonly 'accent-soft': {
+        readonly fallback: readonly ["--soft", "#f5f8ff"];
+        readonly note: "强调的软底";
+    };
+    readonly ok: {
+        readonly fallback: readonly ["--ok", "#34c759"];
+        readonly note: "正常／达标";
+    };
+    readonly 'ok-soft': {
+        readonly fallback: readonly ["#e6f7ec"];
+        readonly note: "正常档的软底";
+    };
+    readonly warn: {
+        readonly fallback: readonly ["#a25b00"];
+        readonly note: "临近／提醒";
+    };
+    readonly 'warn-soft': {
+        readonly fallback: readonly ["#fff5e0"];
+        readonly note: "提醒档的软底";
+    };
+    readonly danger: {
+        readonly fallback: readonly ["#a83228"];
+        readonly note: "危险／逾期";
+    };
+    readonly 'danger-soft': {
+        readonly fallback: readonly ["#fff0ee"];
+        readonly note: "危险档的软底";
+    };
+    readonly radius: {
+        readonly fallback: readonly ["14px"];
+        readonly note: "件的主圆角（皮肤的结构开关之一）";
+    };
+    readonly 'radius-sm': {
+        readonly fallback: readonly ["8px"];
+        readonly note: "小圆角（输入框、格）";
+    };
+    readonly 'radius-pill': {
+        readonly fallback: readonly ["999px"];
+        readonly note: "胶囊圆角（chip、进度条）";
+    };
+    readonly shadow: {
+        readonly fallback: readonly ["--shadow", "0 1px 2px rgba(0,0,0,.04), 0 12px 36px rgba(0,0,0,.06)"];
+        readonly note: "常驻投影";
+    };
+    readonly 'shadow-pop': {
+        readonly fallback: readonly ["0 8px 24px rgba(0,0,0,.14)"];
+        readonly note: "浮层投影";
+    };
+    readonly font: {
+        readonly fallback: readonly ["\"SF Pro Display\",-apple-system,BlinkMacSystemFont,\"PingFang SC\",\"Microsoft YaHei\",\"Noto Sans SC\",sans-serif"];
+        readonly note: "正文字面";
+    };
+    readonly 'font-num': {
+        readonly fallback: readonly ["inherit"];
+        readonly note: "数字字面（paper／broadsheet 下换等宽或衬线）";
+    };
+    readonly 'font-display': {
+        readonly fallback: readonly ["inherit"];
+        readonly note: "显示字面（大数字、大标题）";
+    };
+    readonly 'fs-body': {
+        readonly fallback: readonly ["15px"];
+        readonly note: "正文";
+    };
+    readonly 'fs-sm': {
+        readonly fallback: readonly ["13px"];
+        readonly note: "小字";
+    };
+    readonly 'fs-xs': {
+        readonly fallback: readonly ["12px"];
+        readonly note: "更小字";
+    };
+    readonly 'fs-h1': {
+        readonly fallback: readonly ["28px"];
+        readonly note: "页标题";
+    };
+    readonly 'fs-h2': {
+        readonly fallback: readonly ["18px"];
+        readonly note: "卡标题";
+    };
+    readonly 'fs-h3': {
+        readonly fallback: readonly ["15px"];
+        readonly note: "小节标题";
+    };
+    readonly space: {
+        readonly fallback: readonly ["16px"];
+        readonly note: "块间距";
+    };
+    readonly 'pad-x': {
+        readonly fallback: readonly ["20px"];
+        readonly note: "页面左右内距";
+    };
+}>;
+export type SkinTokenName = keyof typeof SKIN_TOKENS;
+/** token 名单的稳定顺序（判据与取值表都按它走）。 */
+export declare const SKIN_TOKEN_NAMES: readonly ("ink" | "ground" | "surface" | "surface-2" | "line" | "edge" | "ink-2" | "ink-3" | "accent" | "accent-text" | "accent-ink" | "accent-soft" | "ok" | "ok-soft" | "warn" | "warn-soft" | "danger" | "danger-soft" | "radius" | "radius-sm" | "radius-pill" | "shadow" | "shadow-pop" | "font" | "font-num" | "font-display" | "fs-body" | "fs-sm" | "fs-xs" | "fs-h1" | "fs-h2" | "fs-h3" | "space" | "pad-x")[];
+/** 一条 token 的完整 CSS 变量名。 */
+export declare function skinTokenVar(name: SkinTokenName): string;
+/** **读法**：产出带兜底链的 `var()` 串（组件只经本函数读皮肤）。
+ *
+ *  兜底链形如 `var(--ilife-surface, var(--card, #ffffff))`：挂了皮肤走皮肤，没挂皮肤走冻结 token，
+ *  再没注入就落到字面值 ⇒ 新件在任何老页面里都出得来。 */
+export declare function skinVar(name: SkinTokenName): string;
+/** 皮肤类的类名（页面挂 `<prefix>skin-<name>` 即启用该皮肤）。 */
+export declare function skinClass(name: SkinName, prefix?: string): string;
+/** 旧的冻结 token 名单（**只读不改**：那是老页面的对外契约；本层只是**兜底**到它）。 */
+export type FrozenTokenName = CssVarName;
+//# sourceMappingURL=contract.d.ts.map

package/dist/components/skin/contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract.d.ts","sourceRoot":"","sources":["../../../src/components/skin/contract.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;4FAK4F;AAC5F,eAAO,MAAM,UAAU,oDAAqD,CAAC;AAC7E,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,wCAAwC;AACxC,eAAO,MAAM,YAAY,EAAE,QAAkB,CAAC;AAE9C;2CAC2C;AAC3C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6Cb,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AAErD,iCAAiC;AACjC,eAAO,MAAM,gBAAgB,0ZAA6D,CAAC;AAE3F,4BAA4B;AAC5B,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAExD;AAED;;;kCAGkC;AAClC,wBAAgB,OAAO,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM,CAWnD;AAED,gDAAgD;AAChD,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,SAAW,GAAG,MAAM,CAOnE;AAED,uDAAuD;AACvD,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC"}

package/dist/components/skin/contract.js

@@ -0,0 +1,89 @@
+/** 皮肤名闭集（与 `skinCss()` 产出的类名一一对应）。
+ *  四套＝**原型墙打分胜出那一批**（paper／broadsheet／neutral）＋ **2026-09-24 新皮肤墙唯一活下来的 ink**。
+ *  同日被整体否掉的两套（`terminal` 终端暗色／`blueprint` 蓝图工程）**已删**——理由见
+ *  `docs/base/base-render/选中态与皮肤语言.md` 第六节：留在注册表里的每一套皮肤都是一份承诺
+ *  （对比地板、判据、清单、维护），**不能被选中的皮肤只剩负债**，且会诱人误用。
+ *  **顺序必须与 `SKINS` 的键顺序一致**（判据 `assert.deepEqual(Object.keys(SKINS), [...SKIN_NAMES])`）。 */
+export const SKIN_NAMES = ['paper', 'broadsheet', 'neutral', 'ink'];
+/** 缺省皮肤：原型墙打分胜出者（3.83 分，≥4 占 76.6%）。 */
+export const SKIN_DEFAULT = 'paper';
+/** 皮肤 token 名单 ＋ 兜底链（唯一事实）。
+ *  兜底链优先用那 11 个冻结 token（老页面已注入），再落到字面值。 */
+export const SKIN_TOKENS = Object.freeze({
+    /* 面与线 */
+    ground: { fallback: ['--bg', '#f5f5f7'], note: '页面底（整页的背景）' },
+    surface: { fallback: ['--card', '#ffffff'], note: '纸面／卡面（内容浮在它上面）' },
+    'surface-2': { fallback: ['--soft', '#f5f8ff'], note: '次要面（软底块、表头、选中行）' },
+    line: { fallback: ['--line', '#d2d2d7'], note: '分隔线（发丝线的颜色）' },
+    edge: { fallback: ['--line', '#d2d2d7'], note: '纸边（纸面与桌面之间那道边）' },
+    /* 字 */
+    ink: { fallback: ['--fg', '#1d1d1f'], note: '主文字（读数、标题）' },
+    'ink-2': { fallback: ['--fg2', '#6e6e73'], note: '副文字（标签、副语）' },
+    'ink-3': { fallback: ['--fg3', '#86868b'], note: '弱文字（脚注、口径行）——**须过对比地板**' },
+    /* 强调 */
+    accent: { fallback: ['--blue', '#007aff'], note: '强调色：**非文本**（条、边、底）与大字用' },
+    'accent-text': { fallback: ['--blue2', '#0a63ce'], note: '强调色的**文本**档（对底 ≥4.5:1）' },
+    'accent-ink': { fallback: ['--card', '#ffffff'], note: '强调底上的字色' },
+    'accent-soft': { fallback: ['--soft', '#f5f8ff'], note: '强调的软底' },
+    /* 语义 */
+    ok: { fallback: ['--ok', '#34c759'], note: '正常／达标' },
+    'ok-soft': { fallback: ['#e6f7ec'], note: '正常档的软底' },
+    warn: { fallback: ['#a25b00'], note: '临近／提醒' },
+    'warn-soft': { fallback: ['#fff5e0'], note: '提醒档的软底' },
+    danger: { fallback: ['#a83228'], note: '危险／逾期' },
+    'danger-soft': { fallback: ['#fff0ee'], note: '危险档的软底' },
+    /* 形状 */
+    radius: { fallback: ['14px'], note: '件的主圆角（皮肤的结构开关之一）' },
+    'radius-sm': { fallback: ['8px'], note: '小圆角（输入框、格）' },
+    'radius-pill': { fallback: ['999px'], note: '胶囊圆角（chip、进度条）' },
+    shadow: { fallback: ['--shadow', '0 1px 2px rgba(0,0,0,.04), 0 12px 36px rgba(0,0,0,.06)'], note: '常驻投影' },
+    'shadow-pop': { fallback: ['0 8px 24px rgba(0,0,0,.14)'], note: '浮层投影' },
+    /* 字面 */
+    font: {
+        fallback: ['"SF Pro Display",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif'],
+        note: '正文字面',
+    },
+    'font-num': { fallback: ['inherit'], note: '数字字面（paper／broadsheet 下换等宽或衬线）' },
+    'font-display': { fallback: ['inherit'], note: '显示字面（大数字、大标题）' },
+    /* 尺 */
+    'fs-body': { fallback: ['15px'], note: '正文' },
+    'fs-sm': { fallback: ['13px'], note: '小字' },
+    'fs-xs': { fallback: ['12px'], note: '更小字' },
+    'fs-h1': { fallback: ['28px'], note: '页标题' },
+    'fs-h2': { fallback: ['18px'], note: '卡标题' },
+    'fs-h3': { fallback: ['15px'], note: '小节标题' },
+    space: { fallback: ['16px'], note: '块间距' },
+    'pad-x': { fallback: ['20px'], note: '页面左右内距' },
+});
+/** token 名单的稳定顺序（判据与取值表都按它走）。 */
+export const SKIN_TOKEN_NAMES = Object.freeze(Object.keys(SKIN_TOKENS));
+/** 一条 token 的完整 CSS 变量名。 */
+export function skinTokenVar(name) {
+    return '--ilife-' + name;
+}
+/** **读法**：产出带兜底链的 `var()` 串（组件只经本函数读皮肤）。
+ *
+ *  兜底链形如 `var(--ilife-surface, var(--card, #ffffff))`：挂了皮肤走皮肤，没挂皮肤走冻结 token，
+ *  再没注入就落到字面值 ⇒ 新件在任何老页面里都出得来。 */
+export function skinVar(name) {
+    if (!Object.prototype.hasOwnProperty.call(SKIN_TOKENS, name)) {
+        // 名单外一律报错：写错的 token 名若被静默兜底，换皮就会"只是没生效"而无处可查。
+        const err = new Error('skin: 未知 token `' + String(name) + '`（名单住 skin/contract.ts）');
+        err.name = 'BlocksError';
+        throw err;
+    }
+    const chain = SKIN_TOKENS[name].fallback;
+    let out = chain[chain.length - 1];
+    for (let i = chain.length - 2; i >= 0; i -= 1)
+        out = 'var(' + chain[i] + ', ' + out + ')';
+    return 'var(' + skinTokenVar(name) + ', ' + out + ')';
+}
+/** 皮肤类的类名（页面挂 `<prefix>skin-<name>` 即启用该皮肤）。 */
+export function skinClass(name, prefix = 'ilife-') {
+    if (!SKIN_NAMES.includes(name)) {
+        const err = new Error('skin: 未知皮肤 `' + String(name) + '`，须是 ' + SKIN_NAMES.join('／') + ' 之一');
+        err.name = 'BlocksError';
+        throw err;
+    }
+    return prefix + 'skin-' + name;
+}

package/dist/components/skin/contract.js.map

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

package/dist/components/skin/index.d.ts

@@ -0,0 +1,29 @@
+/** skin · **出口**（本目录对外的唯一名字面）。
+ *
+ *  皮肤层给组件两样东西：**读法**（`skinVar`，带兜底链）与**一份 CSS 文本**（`skinCss`，把若干皮肤
+ *  的取值表落成类作用域下的自定义属性）。组件只要经 `skinVar` 读，就自动支持全部皮肤。
+ *
+ *  加法式：页面不挂皮肤类、不调 `skinCss()` ⇒ 零命中、产物逐字节不变。
+ */
+import { type SkinName, type SkinTokenName } from './contract.js';
+export { SKIN_DEFAULT, SKIN_NAMES, SKIN_TOKENS, SKIN_TOKEN_NAMES, skinClass, skinTokenVar, skinVar, } from './contract.js';
+export type { SkinName, SkinTokenName } from './contract.js';
+export { INK_NOTE, INK_VALUES } from './skins/ink.js';
+export { BROADSHEET_NOTE, BROADSHEET_VALUES } from './skins/broadsheet.js';
+export { NEUTRAL_NOTE, NEUTRAL_VALUES } from './skins/neutral.js';
+export { PAPER_NOTE, PAPER_VALUES } from './skins/paper.js';
+interface SkinEntry {
+    readonly note: string;
+    readonly values: Readonly<Record<SkinTokenName, string>>;
+}
+/** 皮肤注册表：名字 → 说明 ＋ 取值表。**加一套皮肤只在这里加一行**（顺序须与 `SKIN_NAMES` 一致）。 */
+export declare const SKINS: Readonly<Record<SkinName, SkinEntry>>;
+export interface SkinCssInput {
+    /** 缺省既有 `ilife-`。 */
+    readonly prefix?: string;
+    /** 要出哪几套；缺省＝全部（顺序按 `SKIN_NAMES`）。 */
+    readonly skins?: readonly SkinName[];
+}
+/** 皮肤样式段：一套皮肤一段 `.<prefix>skin-<名>{ --ilife-…: … ; 旧名映射 }`。恒返回非空 CSS 文本。 */
+export declare function skinCss(input?: SkinCssInput): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAuC,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAMvG,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,OAAO,GACR,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAK5D,UAAU,SAAS;IACjB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;CAC1D;AAED,kEAAkE;AAClE,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAKtD,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,qBAAqB;IACrB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,QAAQ,EAAE,CAAC;CACtC;AAwBD,4EAA4E;AAC5E,wBAAgB,OAAO,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CA0BpD"}

package/dist/components/skin/index.js

@@ -0,0 +1,75 @@
+/** skin · **出口**（本目录对外的唯一名字面）。
+ *
+ *  皮肤层给组件两样东西：**读法**（`skinVar`，带兜底链）与**一份 CSS 文本**（`skinCss`，把若干皮肤
+ *  的取值表落成类作用域下的自定义属性）。组件只要经 `skinVar` 读，就自动支持全部皮肤。
+ *
+ *  加法式：页面不挂皮肤类、不调 `skinCss()` ⇒ 零命中、产物逐字节不变。
+ */
+import { SKIN_NAMES, skinClass, skinTokenVar } from './contract.js';
+import { PAPER_NOTE, PAPER_VALUES } from './skins/paper.js';
+import { BROADSHEET_NOTE, BROADSHEET_VALUES } from './skins/broadsheet.js';
+import { NEUTRAL_NOTE, NEUTRAL_VALUES } from './skins/neutral.js';
+import { INK_NOTE, INK_VALUES } from './skins/ink.js';
+export { SKIN_DEFAULT, SKIN_NAMES, SKIN_TOKENS, SKIN_TOKEN_NAMES, skinClass, skinTokenVar, skinVar, } from './contract.js';
+export { INK_NOTE, INK_VALUES } from './skins/ink.js';
+export { BROADSHEET_NOTE, BROADSHEET_VALUES } from './skins/broadsheet.js';
+export { NEUTRAL_NOTE, NEUTRAL_VALUES } from './skins/neutral.js';
+export { PAPER_NOTE, PAPER_VALUES } from './skins/paper.js';
+/** 换行（仓库口径：不写字面换行转义，与本层其余件同）。 */
+const LF = String.fromCharCode(10);
+/** 皮肤注册表：名字 → 说明 ＋ 取值表。**加一套皮肤只在这里加一行**（顺序须与 `SKIN_NAMES` 一致）。 */
+export const SKINS = Object.freeze({
+    paper: { note: PAPER_NOTE, values: PAPER_VALUES },
+    broadsheet: { note: BROADSHEET_NOTE, values: BROADSHEET_VALUES },
+    neutral: { note: NEUTRAL_NOTE, values: NEUTRAL_VALUES },
+    ink: { note: INK_NOTE, values: INK_VALUES },
+});
+/** 旧 token 名 → 皮肤 token 名（**唯一一份映射**）。
+ *
+ *  为什么皮肤类里也要给出这 11 个旧名：老页面与既有件（`blocks.ts` 一族）读的是旧名，新件读的是 `--ilife-*`。
+ *  若皮肤只给新名，一块挂上皮肤的页面上就会出现「新件跟皮肤、老件不跟」的**部分换皮**——同一张卡里两种色。
+ *  把旧名在**皮肤类作用域内**映射过去，则「挂皮肤 = 整页一种语言」对老件新件同时成立；
+ *  页面级的 `:root` 契约一个字没动（没挂皮肤类的页照旧走默认 token 表）。
+ *
+ *  值写成 `var(--ilife-*)` 而不是字面值：同一份取值只住一处（铁律二），皮肤改值这里自动跟。 */
+const LEGACY_MAP = Object.freeze([
+    ['--fg', 'ink'],
+    ['--fg2', 'ink-2'],
+    ['--fg3', 'ink-3'],
+    ['--bg', 'ground'],
+    ['--card', 'surface'],
+    ['--line', 'line'],
+    ['--blue', 'accent'],
+    ['--blue2', 'accent-text'],
+    ['--soft', 'surface-2'],
+    ['--ok', 'ok'],
+    ['--shadow', 'shadow'],
+]);
+/** 皮肤样式段：一套皮肤一段 `.<prefix>skin-<名>{ --ilife-…: … ; 旧名映射 }`。恒返回非空 CSS 文本。 */
+export function skinCss(input) {
+    const prefix = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const want = input === undefined || input === null || input.skins === undefined
+        ? SKIN_NAMES
+        : input.skins;
+    const out = ['/* skin：' + SKIN_NAMES.length + ' 套语言的取值表（组件只读 token 名，值住这里）。 */'];
+    for (const name of want) {
+        if (!SKIN_NAMES.includes(name)) {
+            const err = new Error('skin: 未知皮肤 `' + String(name) + '`，须是 ' + SKIN_NAMES.join('／') + ' 之一');
+            err.name = 'BlocksError';
+            throw err;
+        }
+        const entry = SKINS[name];
+        out.push('/* ' + entry.note + ' */');
+        out.push('.' + skinClass(name, prefix) + ' {');
+        for (const token of Object.keys(entry.values)) {
+            out.push('  ' + skinTokenVar(token) + ': ' + entry.values[token] + ';');
+        }
+        out.push('  /* 旧 token 名映射（作用域内）：让既有件与老页面跟着这套语言走，避免"部分换皮"。 */');
+        for (const [legacy, token] of LEGACY_MAP) {
+            out.push('  ' + legacy + ': var(' + skinTokenVar(token) + ');');
+        }
+        out.push('}');
+    }
+    return out.join(LF);
+}

package/dist/components/skin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/skin/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAqC,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,iCAAiC;AACjC,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAOnC,kEAAkE;AAClE,MAAM,CAAC,MAAM,KAAK,GAA0C,MAAM,CAAC,MAAM,CAAC;IACxE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE;IACjD,UAAU,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE;IAChE,OAAO,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE;IACvD,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE;CAC5C,CAAC,CAAC;AASH;;;;;;;4DAO4D;AAC5D,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC;IAC/B,CAAC,MAAM,EAAE,KAAK,CAAC;IACf,CAAC,OAAO,EAAE,OAAO,CAAC;IAClB,CAAC,OAAO,EAAE,OAAO,CAAC;IAClB,CAAC,MAAM,EAAE,QAAQ,CAAC;IAClB,CAAC,QAAQ,EAAE,SAAS,CAAC;IACrB,CAAC,QAAQ,EAAE,MAAM,CAAC;IAClB,CAAC,QAAQ,EAAE,QAAQ,CAAC;IACpB,CAAC,SAAS,EAAE,aAAa,CAAC;IAC1B,CAAC,QAAQ,EAAE,WAAW,CAAC;IACvB,CAAC,MAAM,EAAE,IAAI,CAAC;IACd,CAAC,UAAU,EAAE,QAAQ,CAAC;CAC0C,CAAC,CAAC;AAEpE,4EAA4E;AAC5E,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,MAAM,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;WAC/C,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,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;QAC7E,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAChB,MAAM,GAAG,GAAa,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,GAAG,iCAAiC,CAAC,CAAC;IAC3F,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,CAAE,UAAgC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtD,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;YAC9F,GAAG,CAAC,IAAI,GAAG,aAAa,CAAC;YACzB,MAAM,GAAG,CAAC;QACZ,CAAC;QACD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC1B,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;QACrC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;QAC/C,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAoB,EAAE,CAAC;YACjE,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC;QAC1E,CAAC;QACD,GAAG,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;QAChE,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,UAAU,EAAE,CAAC;YACzC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAClE,CAAC;QACD,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChB,CAAC;IACD,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}