base-paint 0.3.13 → 0.3.15

package/dist/components/progress-ring/render.js

@@ -0,0 +1,91 @@
+/** progress-ring · **渲染**（纯函数产 HTML；本件只有形态 A「半环 ＋ 环下大字 ＋ 右侧读数」一种骨架）。
+ *
+ *  —— 形态 A：半环 ＋ 环下大字 ＋ 右侧读数 ——
+ *
+ *  左边一格是**内联 SVG 画的半环**（180°）＋ 环下那行大字（值 ＋ 单位 ＋ 分母 ＋ 百分数），
+ *  右边一列是「还能吃多少／还差多少／照此收尾」这类读数。它替掉的三种错法：
+ *   · 只报一个百分数 —— 读者看不出「还差多少」；
+ *   · 环心用 SVG `<text>` 写字 —— 字号随 SVG 一起缩放，窄容器里读数先糊；
+ *     （本件的大字是 **HTML 叠在环下**，与别的读数同一套字号阶梯）
+ *   · 超目标时把弧画到底就不管了（颜色不变、也不说超了多少）。
+ *
+ *  三条硬口径（判据断的就是它们）：
+ *   · 弧长与读数**同一份真值**：`stroke-dasharray` 的实线长 ÷ `PROGRESS_RING_ARC_LEN`
+ *     ＝ 那句百分数；超目标时弧**画满**（形状不变、只换色，与同族 `scale-bar` 的「满格」同一条口径）；
+ *   · 超目标**不是错**：`value > goal` 合法，出 `is-over` ＋ 换色 ＋ 一句人话（调用方不给就本件算）；
+ *   · 标记里不写分隔符与缺省占位：段间由列距与发丝线承担；缺值由调用方写成 `—`。
+ */
+import { esc } from '../shared/escape.js';
+import { PROGRESS_RING_ARC_LEN, PROGRESS_RING_CLASS, PROGRESS_RING_RADIUS_PX, PROGRESS_RING_STROKE_PX, progressRingSlot, } from './attrs.js';
+import { normalizeProgressRing } from './model.js';
+/** SVG 画布（px）：宽 ＝ 2r ＋ 两侧描边余量；高 ＝ 圆心 y ＋ 半描边 ＋ 一点余量。
+ *  圆心 (90, 90)、半径 70、描边 16 ⇒ 弧顶 90 − 70 = 20，描边外沿 12 ⇒ 全在画布内。 */
+const CX = 90;
+const CY = 90;
+const VIEW_BOX = '0 0 ' + String(2 * CX) + ' ' + String(CY + PROGRESS_RING_STROKE_PX / 2 + 4);
+/** 半环的路径（M 左端点 → A 半径 半径 0 0 1 右端点）。两个端点与半径都从常量算，不抄字面量。 */
+const ARC_PATH = 'M' + String(CX - PROGRESS_RING_RADIUS_PX) + ' ' + String(CY)
+    + 'A' + String(PROGRESS_RING_RADIUS_PX) + ' ' + String(PROGRESS_RING_RADIUS_PX) + ' 0 0 1 '
+    + String(CX + PROGRESS_RING_RADIUS_PX) + ' ' + String(CY);
+/** 环：一条底轨 ＋ 一条填充弧。**`stroke-dasharray` 的两个数就是「画出来多少／整条多长」**。 */
+function gaugeHtml(m) {
+    const dash = String(m.dash) + ' ' + String(PROGRESS_RING_ARC_LEN);
+    const parts = [];
+    parts.push('<div class="' + progressRingSlot('gauge') + '">');
+    parts.push('<svg class="' + progressRingSlot('svg') + '" viewBox="' + VIEW_BOX + '" role="img" aria-label="'
+        + esc(m.title + m.ariaLabel) + '">');
+    parts.push('<path class="' + progressRingSlot('trk') + '" d="' + ARC_PATH + '" fill="none" stroke-width="'
+        + String(PROGRESS_RING_STROKE_PX) + '" stroke-linecap="butt"/>');
+    parts.push('<path class="' + progressRingSlot('fil') + '" d="' + ARC_PATH + '" fill="none" stroke-width="'
+        + String(PROGRESS_RING_STROKE_PX) + '" stroke-linecap="butt" stroke-dasharray="' + dash + '"/>');
+    parts.push('</svg>');
+    parts.push('<p class="' + progressRingSlot('hero') + '">');
+    parts.push('<b class="' + progressRingSlot('value') + '">' + esc(m.valueText) + '</b>');
+    if (m.unit !== undefined) {
+        parts.push('<span class="' + progressRingSlot('unit') + '">' + esc(m.unit) + '</span>');
+    }
+    parts.push('<span class="' + progressRingSlot('denom') + '">／'
+        + esc(m.goalText + (m.unit === undefined ? '' : ' ' + m.unit)) + '</span>');
+    parts.push('<span class="' + progressRingSlot('pct') + '">' + esc(m.pctText + '%') + '</span>');
+    parts.push('</p>');
+    parts.push('</div>');
+    return parts.join('');
+}
+/** 右侧读数：逐行「名字 ｜ 值」，值永不换行、永不截断（它是读者要看的那一个数）。 */
+function rowsHtml(m) {
+    if (m.rows.length === 0)
+        return '';
+    const parts = ['<div class="' + progressRingSlot('kvs') + '">'];
+    for (const row of m.rows) {
+        parts.push('<div class="' + progressRingSlot('kv') + '">');
+        parts.push('<span class="' + progressRingSlot('kv-label') + '">' + esc(row.label) + '</span>');
+        parts.push('<b class="' + progressRingSlot('kv-value') + '">' + esc(row.value) + '</b>');
+        parts.push('</div>');
+    }
+    parts.push('</div>');
+    return parts.join('');
+}
+/** 形态 A 的骨架：卡头 → （环 ＋ 右侧读数）→ 脚注那句人话。 */
+function renderArc(m) {
+    const parts = [];
+    parts.push('<div class="' + progressRingSlot('hd') + '">');
+    parts.push('<h4 class="' + progressRingSlot('title') + '">' + esc(m.title) + '</h4>');
+    if (m.stamp !== undefined) {
+        parts.push('<span class="' + progressRingSlot('stamp') + '">' + esc(m.stamp) + '</span>');
+    }
+    parts.push('</div>');
+    parts.push('<div class="' + progressRingSlot('split') + '">' + gaugeHtml(m) + rowsHtml(m) + '</div>');
+    parts.push('<p class="' + progressRingSlot('note') + '">' + esc(m.note) + '</p>');
+    return parts.join('');
+}
+/** 形态 → 骨架（本件只有一格；分派写在这里，加第二形态就是加一支）。 */
+const SKELETONS = {
+    arc: renderArc,
+};
+/** 渲染进度环（纯函数：同样的入参恒产同样的字节；转义只经 `shared/escape.ts`）。 */
+export function renderProgressRing(input) {
+    const m = normalizeProgressRing(input);
+    const extra = m.extraClass === undefined ? '' : ' ' + m.extraClass;
+    return '<div class="' + PROGRESS_RING_CLASS + ' is-' + m.form + (m.over ? ' is-over' : '') + extra + '">'
+        + SKELETONS[m.form](m) + '</div>';
+}

package/dist/components/progress-ring/render.js.map

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

package/dist/components/progress-ring/style.d.ts

@@ -0,0 +1,9 @@
+/** 环下大字的字号（px）：两档之间只差这一处——窄容器不让大字把版面顶宽。 */
+export declare const PROGRESS_RING_VALUE_PX = 44;
+/** 环的最大直径（px）：容器再宽也不让环长成一块空地（读数是主角、环是标尺）。 */
+export declare const PROGRESS_RING_MAX_DIAMETER_PX = 280;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export declare function progressRingCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style.d.ts.map

package/dist/components/progress-ring/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/progress-ring/style.ts"],"names":[],"mappings":"AAkBA,2CAA2C;AAC3C,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAMzC,6CAA6C;AAC7C,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,4BAA4B;AAC5B,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA8M5E"}

package/dist/components/progress-ring/style.js

@@ -0,0 +1,230 @@
+/** progress-ring · **样式段**（本件唯一的样式来源）。
+ *
+ *  纪律（与本节其余件同一份）：
+ *   · 只经 `skinVar()` 读皮肤 —— 组件里**不写** `var(--ilife-…)`（兜底链只许住在 `skin/contract.ts`）；
+ *   · 全部规则 scope 在 `.<prefix>page-ui` 之下（不开本配方页零命中）；不写 `:root`／`!important`、不新增 token 名；
+ *   · **宽度只许容器判**：布局靠 `@container` ＋ 内在尺寸 ＋ `flex-wrap`；本件不写任何 `@media`（视口宽 ≠ 组件宽）。
+ *
+ *  几何契约（判据钉住）：
+ *   · 半环是内联 SVG、宽度 100% 自适应，**根不留横向滚动**（`min-width:0` ＋ `max-width` 撑底）；
+ *   · 环下大字是 **HTML**，与右侧读数是同一套字号阶梯 ⇒ 窄容器里不会随 SVG 一起糊掉；
+ *   · 数据色一律**算出来**：底轨 ＝ 主文字往卡面混，填充 ＝ 强调色，超目标 ＝ 危险色（三档都是 token）。
+ */
+import { skinVar } from '../skin/contract.js';
+import { progressRingSlot } from './attrs.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 环下大字的字号（px）：两档之间只差这一处——窄容器不让大字把版面顶宽。 */
+export const PROGRESS_RING_VALUE_PX = 44;
+const NARROW_VALUE_PX = 36;
+/** 窄容器阈值（px）：大字与小环一起收一档。**这是本件自己的宽度**（`@container` 判的），不是视口宽度。 */
+const NARROW_PX = 420;
+/** 环的最大直径（px）：容器再宽也不让环长成一块空地（读数是主角、环是标尺）。 */
+export const PROGRESS_RING_MAX_DIAMETER_PX = 280;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export function progressRingCss(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-progress-ring';
+    const s = (slot) => root + ' .' + progressRingSlot(slot, p);
+    /* 槽类名（**不带 scope**）：只用在**已经落进本件某条选择器内部**的位置（前缀由外层那条选择器给）。
+       拿 `s()` 去拼后代／兄弟选择器会拼出 `.page-ui .a .page-ui .b` —— 第二条 `.page-ui` 永远匹配不到，
+       规则「看着在、其实不生效」（2026-09 样张页上抓到过一次：超目标态那三处换色全没生效）。 */
+    const c = (slot) => '.' + progressRingSlot(slot, p);
+    return [
+        '/* progress-ring（进度环 · 形态 A「半环 ＋ 环下大字 ＋ 右侧读数」）：一块「已完成／目标」的环。',
+        '   环是内联 SVG（弧长按 2πr 的一半算），大字是 HTML ⇒ 窄容器里读数不随 SVG 一起缩放。 */',
+        box + ' {',
+        /* 宽度判据的落点：本件是**自己的容器**——嵌进侧栏／面板／卡片时照样按自己的宽度折行。 */
+        '  container-type: inline-size;',
+        /* 宿主页不保证是 `border-box`（真页面默认 content-box）：本件带边框／内距的位子
+           在那种页里会比容器宽出边框那几像素 ⇒ 在本件**自己的子树里**把 `box-sizing` 钉成 `border-box`。 */
+        '  box-sizing: border-box;',
+        '  display: grid;',
+        '  gap: 10px;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font') + ';',
+        '  font-size: ' + skinVar('fs-body') + ';',
+        '  line-height: 1.5;',
+        '}',
+        box + ' * {',
+        '  box-sizing: border-box;',
+        '}',
+        /* 卡头：标题与右侧口径同一排；容器一窄，口径自己折到下一行（标题不掉字、不用 `…`）。 */
+        s('hd') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 3px 10px;',
+        '  min-width: 0;',
+        '}',
+        s('title') + ' {',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-display') + ';',
+        '  font-size: ' + skinVar('fs-h3') + ';',
+        '  font-weight: 700;',
+        '  line-height: 1.35;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('stamp') + ' {',
+        '  flex: none;',
+        '  margin-left: auto;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        /* 环与右侧读数：一排两格，`flex-wrap` 让它在窄容器里自己叠起来（不判视口宽度）。 */
+        s('split') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: center;',
+        '  gap: 12px 20px;',
+        '  min-width: 0;',
+        '}',
+        s('gauge') + ' {',
+        '  flex: 1 1 220px;',
+        '  min-width: 0;',
+        '}',
+        /* 环：宽度跟着容器走，但长不过 `PROGRESS_RING_MAX_DIAMETER_PX`（环是标尺、不是主角）。 */
+        s('svg') + ' {',
+        '  display: block;',
+        '  width: 100%;',
+        '  max-width: ' + String(PROGRESS_RING_MAX_DIAMETER_PX) + 'px;',
+        '  height: auto;',
+        '  margin: 0 auto;',
+        '  overflow: visible;',
+        '}',
+        '/* 底轨：主文字往卡面混一档（不是硬编码灰），换皮自动跟着走。 */',
+        s('trk') + ' {',
+        '  stroke: color-mix(in srgb, ' + skinVar('ink') + ' 13%, ' + skinVar('surface') + ');',
+        '}',
+        '/* 填充弧：强调色是**非文本**档，正好用在这里；超目标换危险色（形状不变：弧画满）。 */',
+        s('fil') + ' {',
+        '  stroke: ' + skinVar('accent') + ';',
+        '}',
+        box + '.is-over ' + c('fil') + ' {',
+        '  stroke: ' + skinVar('danger') + ';',
+        '}',
+        /* 环下大字：值（大字）／单位／分母另起一行／百分数一枚胶囊——四枚都在同一行里换行，不压字。 */
+        s('hero') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  justify-content: center;',
+        '  gap: 2px 8px;',
+        '  margin: 8px 0 0;',
+        '  min-width: 0;',
+        '}',
+        s('value') + ' {',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: ' + String(PROGRESS_RING_VALUE_PX) + 'px;',
+        '  font-weight: 700;',
+        '  line-height: 1.05;',
+        '  letter-spacing: -.02em;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        s('unit') + ' {',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-weight: 600;',
+        '}',
+        '/* 分母占满一整行（`flex-basis:100%`）：它再长也只把自己这行撑开，不把大字挤窄。 */',
+        s('denom') + ' {',
+        '  flex: 1 0 100%;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-variant-numeric: tabular-nums;',
+        '  text-align: center;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        '/* 百分数：那条弧的读数。**数字永不换行、永不截断**（它是本件的第二识别特征）。 */',
+        s('pct') + ' {',
+        '  flex: none;',
+        '  padding: 1px 8px;',
+        '  border-radius: ' + skinVar('radius-pill') + ';',
+        '  background: ' + skinVar('accent-soft') + ';',
+        '  color: ' + skinVar('accent-text') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        box + '.is-over ' + c('pct') + ' {',
+        '  background: ' + skinVar('danger-soft') + ';',
+        '  color: ' + skinVar('danger') + ';',
+        '}',
+        /* 右侧读数：宽容器多列、窄容器一列；名字可换行，值永不换行、永不截断。 */
+        s('kvs') + ' {',
+        '  flex: 2 1 260px;',
+        '  display: grid;',
+        '  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));',
+        '  gap: 0 20px;',
+        '  min-width: 0;',
+        '}',
+        s('kv') + ' {',
+        '  display: flex;',
+        '  align-items: baseline;',
+        '  gap: 10px;',
+        '  min-width: 0;',
+        '  padding: 8px 0;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '}',
+        s('kv-label') + ' {',
+        '  flex: 1 1 auto;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('kv-value') + ' {',
+        '  flex: none;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        /* 脚注那句人话：**超目标时换色**（不只换色——同一句话里带差额与百分比，字也在说话）。 */
+        s('note') + ' {',
+        '  margin: 0;',
+        '  padding-top: 10px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  line-height: 1.6;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        box + '.is-over ' + c('note') + ' {',
+        '  color: ' + skinVar('danger') + ';',
+        '  font-weight: 600;',
+        '}',
+        '/* 本件自身不带可点元素。这一条是**地板**：调用方把环包成链接时，焦点必须看得见。 */',
+        box + ' :focus-visible {',
+        '  outline: 2px solid ' + skinVar('accent') + ';',
+        '  outline-offset: 2px;',
+        '}',
+        '/* 窄容器（<' + String(NARROW_PX) + 'px）：大字与环各收一档——环占满整行、读数跟着缩，',
+        '   免得环下大字把自己撑出容器。判的是**本件自己的宽度**（本件会被嵌进侧栏／面板／卡片）。 */',
+        '@container (max-width: ' + String(NARROW_PX) + 'px) {',
+        '  ' + s('value') + ' {',
+        '    font-size: ' + String(NARROW_VALUE_PX) + 'px;',
+        '  }',
+        '  ' + s('svg') + ' {',
+        '    max-width: 220px;',
+        '  }',
+        '  ' + s('kvs') + ' {',
+        '    grid-template-columns: minmax(0, 1fr);',
+        '  }',
+        '}',
+    ].join(LF);
+}

package/dist/components/progress-ring/style.js.map

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

package/dist/components/punch-strip/index.d.ts

@@ -0,0 +1,12 @@
+/** punch-strip · **组件出口**（本组件对外的唯一名字面）。
+ *
+ *  四件出口：`renderPunchStrip(input)`（产标记，零 DOM）／`punchStripCss()`（样式段）／
+ *  两个常量（`PUNCH_STRIP_MAX_CELLS`／`PUNCH_STRIP_EMPTY_MARK`）。
+ *
+ *  用法与参数表见同目录 `README.md`。消费方走 `base-paint/blocks`（组件层出口），不走根出口。
+ *  样式由本族汇总入口 `sheetCss()` 一并挂上（与另四件同一条口径）。
+ */
+export { PUNCH_STRIP_EMPTY_MARK, PUNCH_STRIP_MAX_CELLS, renderPunchStrip } from './render.js';
+export type { PunchCellInput, PunchStripInput } from './render.js';
+export { PUNCH_STRIP_BOX_HEIGHT_PX, PUNCH_STRIP_BOX_RADIUS_PX, punchStripCss } from './style.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/punch-strip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/punch-strip/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC9F,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/punch-strip/index.js

@@ -0,0 +1,10 @@
+/** punch-strip · **组件出口**（本组件对外的唯一名字面）。
+ *
+ *  四件出口：`renderPunchStrip(input)`（产标记，零 DOM）／`punchStripCss()`（样式段）／
+ *  两个常量（`PUNCH_STRIP_MAX_CELLS`／`PUNCH_STRIP_EMPTY_MARK`）。
+ *
+ *  用法与参数表见同目录 `README.md`。消费方走 `base-paint/blocks`（组件层出口），不走根出口。
+ *  样式由本族汇总入口 `sheetCss()` 一并挂上（与另四件同一条口径）。
+ */
+export { PUNCH_STRIP_EMPTY_MARK, PUNCH_STRIP_MAX_CELLS, renderPunchStrip } from './render.js';
+export { PUNCH_STRIP_BOX_HEIGHT_PX, PUNCH_STRIP_BOX_RADIUS_PX, punchStripCss } from './style.js';

package/dist/components/punch-strip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/punch-strip/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/punch-strip/render.d.ts

@@ -0,0 +1,24 @@
+/** 一行最多几格（600px 纸上格宽 ≥40px、390px 屏上 ≥25px 的实测口径）；更多天请用账目行。 */
+export declare const PUNCH_STRIP_MAX_CELLS = 14;
+/** 缺数格里的缺省占位（与全仓"缺数一律写 —"同字，同 `DAY_STRIP_EMPTY_MARK`）。 */
+export declare const PUNCH_STRIP_EMPTY_MARK = "\u2014";
+export interface PunchCellInput {
+    /** 格上的日期串（如 `09-17`；「今天」二字带不带由调用方定）。 */
+    readonly label: string;
+    /** 那天的读数（**已是给人看的样子**）；`null` ＝ 那天缺数（空心盒 ＋ `emptyMark`）。 */
+    readonly value: string | null;
+    /** 当前正在细看的那天（朱红描边，一页至多一格）；缺省 `false`。 */
+    readonly selected?: boolean;
+}
+export interface PunchStripInput {
+    /** 逐天的格子（顺序＝时间顺序）；0 格＝空串（与"没内容不留空块"同口径）。 */
+    readonly days: readonly PunchCellInput[];
+    /** 小标题（如「这 7 天」）；不给＝不出。字距由样式段统一，调用方不要自己加空格的写法。 */
+    readonly heading?: string;
+    /** 缺数格里的占位；缺省 `—`；给空串＝空格（原型缺数格就是空格）。 */
+    readonly emptyMark?: string;
+    readonly extraClass?: string;
+}
+/** 打孔格带：把"哪几天有数、各是多少"画成一排格。空数组出不了一个字。 */
+export declare function renderPunchStrip(input: PunchStripInput): string;
+//# sourceMappingURL=render.d.ts.map

package/dist/components/punch-strip/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/components/punch-strip/render.ts"],"names":[],"mappings":"AAwBA,8DAA8D;AAC9D,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,WAAW,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,CAAC;IACzC,kDAAkD;IAClD,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,yCAAyC;AACzC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CA+B/D"}

package/dist/components/punch-strip/render.js

@@ -0,0 +1,63 @@
+/** punch-strip · **渲染**（打孔格带：N 天里"哪几天有数、各是多少"，像纸边一排打孔刻度）。
+ *
+ *  —— 打孔格带 ——
+ *
+ *  形状：一格一天——**日期在上、格在下**；格是一只虚线小盒，那天有数就**填深色、值写在盒里**，
+ *  缺数留空心盒（写 `—`）；"当前正在细看的那天"套一圈朱红描边（一页至多一格）。
+ *
+ *  它替掉的是哪几种错法：
+ *   · 逐日只说一句「有记录 1/7 天」——句子报得出**数量**，报不出**哪几天**；
+ *   · 用折线讲 7 天的日级读数——7 个点在窄档挤成一条毛刺，读者要的是"哪几天有、各多少"；
+ *   · 逐日做成六列表（日期／摄入／三宏量）——窄档被卡片化成一列七块，一屏放不下；
+ *   · 逐日做成一行小字的并列串（`09-14 · 09-15 · …`）——分隔符串里读不出值，还犯去分隔符门禁。
+ *
+ *  与既有件的关系（**选型先看这三条**）：
+ *   · 要"哪天有／哪天没有"的**格带**、值进格 → 本件；
+ *   · 要"标签 → 值"的**清单**（整窗逐日、行数不定）→ `renderLedgerRows`；
+ *   · 要"值／目标"的**比例形状** → `renderScaleBar`；要"哪几天有记录"的**行式提要** → `renderDayStrip`。
+ *
+ *  出处＝原型 `.scratch/diet-ui-proto/v2-小票.html` 的 `.punch` 一族（用户点名那件「这 7 天」控件）。
+ *  格数上限住 `PUNCH_STRIP_MAX_CELLS`：它是"一行可数"的形状，再多天就该换账目行（**本件不替表格**）。
+ */
+import { esc } from '../shared/escape.js';
+import { assertPlainObject, badInput, optExtraClass, optText, reqText } from '../shared/validate.js';
+/** 一行最多几格（600px 纸上格宽 ≥40px、390px 屏上 ≥25px 的实测口径）；更多天请用账目行。 */
+export const PUNCH_STRIP_MAX_CELLS = 14;
+/** 缺数格里的缺省占位（与全仓"缺数一律写 —"同字，同 `DAY_STRIP_EMPTY_MARK`）。 */
+export const PUNCH_STRIP_EMPTY_MARK = '\u2014';
+/** 打孔格带：把"哪几天有数、各是多少"画成一排格。空数组出不了一个字。 */
+export function renderPunchStrip(input) {
+    assertPlainObject(input, 'renderPunchStrip: input');
+    const days = input.days;
+    if (!Array.isArray(days))
+        badInput('punch-strip: input.days 必须是数组');
+    if (days.length === 0)
+        return '';
+    if (days.length > PUNCH_STRIP_MAX_CELLS) {
+        badInput('punch-strip: input.days 最多 ' + PUNCH_STRIP_MAX_CELLS + ' 格（一行可数；更多天请用账目行）');
+    }
+    let emptyMark = PUNCH_STRIP_EMPTY_MARK;
+    if (input.emptyMark !== undefined) {
+        if (typeof input.emptyMark !== 'string')
+            badInput('punch-strip: input.emptyMark 必须是字符串');
+        emptyMark = input.emptyMark;
+    }
+    const heading = optText(input.heading, 'punch-strip: input.heading');
+    const extra = optExtraClass(input.extraClass, 'punch-strip: input.extraClass');
+    const p = 'ilife-block-punch-strip';
+    const cells = days.map((raw, i) => {
+        const field = 'punch-strip: input.days[' + i + ']';
+        assertPlainObject(raw, field);
+        const label = reqText(raw.label, field + '.label');
+        const value = raw.value === null || raw.value === undefined ? null : reqText(raw.value, field + '.value');
+        return '<div class="' + p + '-cell' + (value === null ? '' : ' is-on')
+            + (raw.selected === true ? ' is-selected' : '') + '">'
+            + '<span class="' + p + '-date">' + esc(label) + '</span>'
+            + '<span class="' + p + '-box">' + esc(value === null ? emptyMark : value) + '</span>'
+            + '</div>';
+    }).join('');
+    return '<div class="' + p + (extra === undefined ? '' : ' ' + extra) + '">'
+        + (heading === undefined ? '' : '<div class="' + p + '-heading">' + esc(heading) + '</div>')
+        + '<div class="' + p + '-cells">' + cells + '</div>'
+        + '</div>';
+}

package/dist/components/punch-strip/render.js.map

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

package/dist/components/punch-strip/style.d.ts

@@ -0,0 +1,8 @@
+/** 盒子的几何（px）：高度与被"打孔"的方角——两处读数住这里，样式与测试都读它。 */
+export declare const PUNCH_STRIP_BOX_HEIGHT_PX = 34;
+export declare const PUNCH_STRIP_BOX_RADIUS_PX = 3;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export declare function punchStripCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style.d.ts.map

package/dist/components/punch-strip/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/punch-strip/style.ts"],"names":[],"mappings":"AAoBA,+CAA+C;AAC/C,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C,4BAA4B;AAC5B,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAuE1E"}

package/dist/components/punch-strip/style.js

@@ -0,0 +1,94 @@
+/** punch-strip · **样式段**（本组件唯一的样式来源）。
+ *
+ *  纪律（与本层其余件同一份）：只读 token，不新增 token 名；全部规则 scope 在 `.<prefix>page-ui` 下。
+ *  **色一律读 token**：文字走冻结 token（皮肤作用域里有旧名映射），虚线／软底／描边几处显式经 `skinVar()` 读皮肤。
+ *
+ *  几何契约（钉在测试里）：
+ *   · 格宽是**份数**（`flex: 1 1 0`）⇒ 总宽永远等于容器宽，N 格换 M 格不横滑（390 档无横滚）；
+ *   · 空心盒与实心盒**同一副盒模型**（描边改成实色、不删边框）⇒ 有数／没数的格子等高等宽，不跳版；
+ *   · 日期位与盒子里的小字（两处都是"数"）都经 `skinVar('font-num')` 读皮肤的数字字面。
+ *
+ *  色（选中态口径）：打孔虚线走 `line`、选中描边走 `accent`；**有数格走"有文字的选中面"那一档**
+ *  （底 `accent-soft`、字 `accent-text`、描边 `accent`）——盒里那枚 10.5px 读数是**字**，
+ *  而实心 `accent` 那一档只许放图形／勾／大字（`accent-ink` on `accent` 在 `neutral` 只有 4.02:1，
+ *  过不了文本地板 ⇒ 读数不许坐在实心强调底上）。件里零颜色字面量。
+ */
+import { skinVar } from '../skin/contract.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 盒子的几何（px）：高度与被"打孔"的方角——两处读数住这里，样式与测试都读它。 */
+export const PUNCH_STRIP_BOX_HEIGHT_PX = 34;
+export const PUNCH_STRIP_BOX_RADIUS_PX = 3;
+/** 本组件的样式段。恒返回非空 CSS 文本。 */
+export function punchStripCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    const s = root + ' .' + p + 'block-punch-strip';
+    return [
+        '/* punch-strip（打孔格带）：一格一天，虚线"打孔"盒；有数格填主色软底＋主色字、选中套主色圈。 */',
+        s + ' {',
+        '  display: flex;',
+        '  flex-direction: column;',
+        '  gap: 4px;',
+        '  min-width: 0;',
+        '}',
+        '/* 小标题与"账目/明细"两件的标题同一套字距语汇（同一族里只有一种小标题写法）。 */',
+        s + '-heading {',
+        '  margin-bottom: 2px;',
+        '  color: var(--fg3);',
+        '  font-size: 11.5px;',
+        '  font-weight: 700;',
+        '  letter-spacing: .22em;',
+        '}',
+        s + '-cells {',
+        '  display: flex;',
+        '  align-items: flex-end;',
+        '  gap: 6px;',
+        '  min-width: 0;',
+        '}',
+        s + '-cell {',
+        '  flex: 1 1 0;',
+        '  min-width: 0;',
+        '  display: flex;',
+        '  flex-direction: column;',
+        '  gap: 4px;',
+        '}',
+        s + '-date {',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: 10px;',
+        '  letter-spacing: -.02em;',
+        '  color: var(--fg3);',
+        '  text-align: center;',
+        '  white-space: nowrap;',
+        '}',
+        s + '-box {',
+        '  box-sizing: border-box;',
+        '  height: ' + PUNCH_STRIP_BOX_HEIGHT_PX + 'px;',
+        '  border: 1px dashed ' + skinVar('line') + ';',
+        '  border-radius: ' + PUNCH_STRIP_BOX_RADIUS_PX + 'px;',
+        '  display: flex;',
+        '  align-items: flex-end;',
+        '  justify-content: center;',
+        '  padding-bottom: 4px;',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: 10.5px;',
+        '  color: var(--fg3);',
+        '  overflow: hidden;',
+        '}',
+        '/* 有数：底改主色软底、字取强调色的文本档、描边取主色（**面上有读数 ⇒ 走"有文字的选中面"那一档**；',
+        '   实心 accent 那一档只许放图形／勾／大写大字）。描边改实色、不删边框 ⇒ 与空心盒等高等宽、不跳版。 */',
+        s + '-cell.is-on ' + '.' + p + 'block-punch-strip-box {',
+        '  background: ' + skinVar('accent-soft') + ';',
+        '  border-color: ' + skinVar('accent') + ';',
+        '  border-style: solid;',
+        '  color: ' + skinVar('accent-text') + ';',
+        '  font-weight: 700;',
+        '}',
+        '/* 选中：一格主色描边（一页至多一格；只描边、不改字色 ⇒ 不写成反白）。 */',
+        s + '-cell.is-selected ' + '.' + p + 'block-punch-strip-box {',
+        '  outline: 1.5px solid ' + skinVar('accent') + ';',
+        '  outline-offset: 1px;',
+        '}',
+    ].join(LF);
+}

package/dist/components/punch-strip/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/components/punch-strip/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,yBAAyB;AACzB,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;AAEnC,+CAA+C;AAC/C,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAC5C,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC;AAE3C,4BAA4B;AAC5B,MAAM,UAAU,aAAa,CAAC,KAAoC;IAChE,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,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,mBAAmB,CAAC;IAChD,OAAO;QACL,2DAA2D;QAC3D,CAAC,GAAG,IAAI;QACR,kBAAkB;QAClB,2BAA2B;QAC3B,aAAa;QACb,iBAAiB;QACjB,GAAG;QACH,+CAA+C;QAC/C,CAAC,GAAG,YAAY;QAChB,uBAAuB;QACvB,sBAAsB;QACtB,sBAAsB;QACtB,qBAAqB;QACrB,0BAA0B;QAC1B,GAAG;QACH,CAAC,GAAG,UAAU;QACd,kBAAkB;QAClB,0BAA0B;QAC1B,aAAa;QACb,iBAAiB;QACjB,GAAG;QACH,CAAC,GAAG,SAAS;QACb,gBAAgB;QAChB,iBAAiB;QACjB,kBAAkB;QAClB,2BAA2B;QAC3B,aAAa;QACb,GAAG;QACH,CAAC,GAAG,SAAS;QACb,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG;QAC7C,oBAAoB;QACpB,2BAA2B;QAC3B,sBAAsB;QACtB,uBAAuB;QACvB,wBAAwB;QACxB,GAAG;QACH,CAAC,GAAG,QAAQ;QACZ,2BAA2B;QAC3B,YAAY,GAAG,yBAAyB,GAAG,KAAK;QAChD,uBAAuB,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG;QAC/C,mBAAmB,GAAG,yBAAyB,GAAG,KAAK;QACvD,kBAAkB;QAClB,0BAA0B;QAC1B,4BAA4B;QAC5B,wBAAwB;QACxB,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG,GAAG;QAC7C,sBAAsB;QACtB,sBAAsB;QACtB,qBAAqB;QACrB,GAAG;QACH,yDAAyD;QACzD,6DAA6D;QAC7D,CAAC,GAAG,cAAc,GAAG,GAAG,GAAG,CAAC,GAAG,yBAAyB;QACxD,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,GAAG;QAC/C,kBAAkB,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,GAAG;QAC5C,wBAAwB;QACxB,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,GAAG;QAC1C,qBAAqB;QACrB,GAAG;QACH,2CAA2C;QAC3C,CAAC,GAAG,oBAAoB,GAAG,GAAG,GAAG,CAAC,GAAG,yBAAyB;QAC9D,yBAAyB,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,GAAG;QACnD,wBAAwB;QACxB,GAAG;KACJ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC"}