base-paint 0.3.14 → 0.3.16

package/dist/components/flow-ribbon/render.js

@@ -0,0 +1,191 @@
+/** flow-ribbon · **渲染**（纯函数产 HTML；三个形态各一支骨架，分派在文件末尾）。
+ *
+ *  —— 三个形态 ——
+ *   · `sankey` 左边一列来源、右边一列用途，中间一条条带子：**带宽＝金额**，两列同一把尺子，
+ *     故左边一股与右边一格可以横着比；
+ *   · `matrix` 行＝来源、列＝用途：格里的金额 ＋ 占比，条长按**全表最大格**算（不是按本行最大），
+ *     空格写 `—`（不是 0）；
+ *   · `rails` 上下两条构成轨 ＋ 中间汇合读数（进 ＝ 出）：每格宽度＝这一格占总额的比例，
+ *     两条轨同一总额、各自拉满 100%，故上下两轨可以横着比。
+ *
+ *  三条硬口径（判据断的就是它们）：
+ *   · **两处几何都由 `model.ts` 算好**：这一支只拼标记（百分比直接写进行内样式），静态规则一律住 `style.ts`；
+ *   · **每一条读数恰好印一次**：桑基里装不进节点框的读数搬到下面那张名单里，**不压字、不截断**；
+ *   · **色不是唯一信息**：带子有色阶 ＋ 图例给名字、格有深浅 ＋ 数字、格宽与条长 ＋ 百分数；
+ *     三形态的可点元素数为零，调用方若把某一行包成入口，焦点环由 `style.ts` 那一档兜住。
+ */
+import { esc } from '../shared/escape.js';
+import { FLOW_RIBBON_CLASS, FLOW_RIBBON_HEIGHT_VAR, FLOW_RIBBON_LANE_L1_VAR, FLOW_RIBBON_LANE_L2_VAR, FLOW_RIBBON_LANE_R1_VAR, FLOW_RIBBON_LANE_R2_VAR, FLOW_RIBBON_MIX_VAR, FLOW_RIBBON_PLOT_VAR, FLOW_RIBBON_TOP_VAR, FLOW_RIBBON_USE_ATTR, FLOW_RIBBON_WIDTH_VAR, flowRibbonSlot, } from './attrs.js';
+import { normalizeFlowRibbon, } from './model.js';
+/** 百分比 → 行内样式里那个串（几何一律两位小数，与 `model.ts` 的取整同口径）。 */
+const pct = (n) => String(n) + '%';
+/** 卡头：标题 ＋ 时间窗 ＋ **从数据算出来**的总额。三形态共用。 */
+function headHtml(m) {
+    const parts = ['<div class="' + flowRibbonSlot('hd') + '">',
+        '<h4 class="' + flowRibbonSlot('title') + '">' + esc(m.title) + '</h4>'];
+    if (m.stamp !== undefined) {
+        parts.push('<span class="' + flowRibbonSlot('stamp') + '">' + esc(m.stamp) + '</span>');
+    }
+    parts.push('<span class="' + flowRibbonSlot('tail') + '">' + esc(m.totalText) + '</span>', '</div>');
+    return parts.join('');
+}
+/** 一条读数的名单行（名字 ＋ 金额 ＋ 占比；色块与图例同一档——**序 ＋ 色 ＋ 字**三样对得上）。 */
+function readoutRowHtml(row) {
+    return '<div class="' + flowRibbonSlot('readout-row') + '">'
+        + '<i class="' + flowRibbonSlot('swatch') + ' ' + row.mark + '" aria-hidden="true"></i>'
+        + '<b class="' + flowRibbonSlot('readout-name') + '">' + esc(row.name) + '</b>'
+        + '<span class="' + flowRibbonSlot('readout-amount') + '">' + esc(row.amountText) + '</span>'
+        + '<span class="' + flowRibbonSlot('readout-share') + '">' + esc(row.shareText) + '</span></div>';
+}
+/** 脚注：口径行（本件永远出一句——不给就由 `model.ts` 写自己的口径）。 */
+function noteHtml(m) {
+    return '<p class="' + flowRibbonSlot('note') + '">' + esc(m.note) + '</p>';
+}
+/** 图例（每一项：色块 ＋ 名字）。三形态里只有桑基出（那三个色阶档是它独有的读法）。 */
+function legendHtml(m) {
+    if (m.legend.length === 0)
+        return '';
+    return '<ul class="' + flowRibbonSlot('legend') + '">'
+        + m.legend.map((one) => '<li class="' + flowRibbonSlot('legend-item') + '">'
+            + '<i class="' + flowRibbonSlot('legend-mark') + ' ' + one.mark + '" aria-hidden="true"></i>'
+            + esc(one.text) + '</li>').join('')
+        + '</ul>';
+}
+/* ── 形态 `sankey` ──────────────────────────────────────────────── */
+/** 一个节点框：左列读数字在右侧贴着带子、右列贴着带子那一侧对齐（原型同款）。 */
+function sankeyNodeHtml(node, side) {
+    const style = ' style="' + FLOW_RIBBON_TOP_VAR + ': ' + pct(node.topPct) + '; '
+        + FLOW_RIBBON_HEIGHT_VAR + ': ' + pct(node.heightPct) + '"';
+    const title = ' title="' + esc(node.name + ' ' + node.amountText) + '"';
+    if (!node.inside) {
+        /* 读数搬去下面那张名单了：框里只留一条**无文字的图形**（名字与金额一个不少地印在名单里）。 */
+        return '<span class="' + flowRibbonSlot('node') + ' is-' + side + ' is-bare" aria-hidden="true"' + style + title
+            + '></span>';
+    }
+    return '<span class="' + flowRibbonSlot('node') + ' is-' + side + '"' + style + title + '>'
+        + '<b class="' + flowRibbonSlot('nd-name') + '">' + esc(node.name) + '</b>'
+        + '<em class="' + flowRibbonSlot('nd-amount') + '">' + esc(node.amountText) + '</em></span>';
+}
+/** 桑基骨架：卡头 → 画布（带子 ＋ 两列节点）→ 读数名单（有装不下的才出）→ 图例 → 脚注。 */
+function renderSankey(m) {
+    const parts = [headHtml(m),
+        '<div class="' + flowRibbonSlot('plot') + '" role="img" aria-label="' + esc(m.ariaLabel)
+            + '" style="' + FLOW_RIBBON_PLOT_VAR + ': ' + String(m.plotPx) + 'px">'];
+    /* 带子在下、节点在上（节点是不透明的框，压在带子的两头收口）。 */
+    for (const lane of m.lanes) {
+        parts.push('<span class="' + flowRibbonSlot('lane') + ' ' + lane.mark + '" aria-hidden="true" title="'
+            + esc(lane.title) + '" style="'
+            + FLOW_RIBBON_LANE_L1_VAR + ': ' + pct(lane.l1) + '; '
+            + FLOW_RIBBON_LANE_L2_VAR + ': ' + pct(lane.l2) + '; '
+            + FLOW_RIBBON_LANE_R1_VAR + ': ' + pct(lane.r1) + '; '
+            + FLOW_RIBBON_LANE_R2_VAR + ': ' + pct(lane.r2) + '"></span>');
+    }
+    for (const node of m.sources)
+        parts.push(sankeyNodeHtml(node, 'src'));
+    for (const node of m.uses)
+        parts.push(sankeyNodeHtml(node, 'use'));
+    parts.push('</div>');
+    if (m.readouts.length > 0) {
+        parts.push('<div class="' + flowRibbonSlot('readout') + '">', '<p class="' + flowRibbonSlot('readout-hd') + '">装不进节点框的读数 · '
+            + String(m.readouts.length) + ' 条（那一股太细、或名字与金额比框宽——读数在这里一个不少）</p>', m.readouts.map(readoutRowHtml).join(''), '</div>');
+    }
+    parts.push(legendHtml(m));
+    parts.push(noteHtml(m));
+    return parts.join('');
+}
+/* ── 形态 `matrix` ──────────────────────────────────────────────── */
+/** 一格：条（无文字的图形）＋ 金额 ＋ 占总额的百分数；空格写 `—`。
+ *  合计行那一列不出条（它是各行的和，与「某一格 ÷ 全表最大格」不是同一把尺子）。 */
+function matrixCellHtml(cell, which) {
+    const attrs = ' ' + FLOW_RIBBON_USE_ATTR + '="' + esc(cell.use) + '" title="' + esc(cell.title) + '"';
+    if (cell.empty) {
+        return '<td class="' + flowRibbonSlot('mat-cell') + ' is-empty"' + attrs + '><b class="'
+            + flowRibbonSlot('cell-num') + '">' + esc(cell.amountText) + '</b></td>';
+    }
+    const bar = which === 'mat-total' ? '' : '<i class="' + flowRibbonSlot('cell-bar') + '" aria-hidden="true" style="'
+        + FLOW_RIBBON_WIDTH_VAR + ': ' + pct(cell.barPct) + '; '
+        + FLOW_RIBBON_MIX_VAR + ': ' + pct(cell.mixPct) + '"></i>';
+    return '<td class="' + flowRibbonSlot(which) + '"' + attrs + '>' + bar
+        + '<b class="' + flowRibbonSlot('cell-num') + '">' + esc(cell.amountText) + '</b>'
+        + '<em class="' + flowRibbonSlot('cell-pct') + '">' + esc(cell.shareText) + '</em></td>';
+}
+/** 矩阵骨架：卡头 → 表（表头 ＋ 逐来源一行 ＋ 合计行）→ 脚注。 */
+function renderMatrix(m) {
+    const parts = [headHtml(m),
+        '<table class="' + flowRibbonSlot('matrix') + '" aria-label="' + esc(m.ariaLabel) + '">',
+        '<thead class="' + flowRibbonSlot('mat-head') + '"><tr>',
+        '<th class="' + flowRibbonSlot('mat-rowhd') + '" scope="col">来源 ＼ 用途</th>'];
+    for (const name of m.useNames) {
+        parts.push('<th class="' + flowRibbonSlot('mat-cell') + '" scope="col" ' + FLOW_RIBBON_USE_ATTR + '="'
+            + esc(name) + '">' + esc(name) + '</th>');
+    }
+    parts.push('</tr></thead><tbody class="' + flowRibbonSlot('mat-body') + '">');
+    for (const row of m.rows) {
+        parts.push('<tr class="' + flowRibbonSlot('mat-row') + '"><th class="' + flowRibbonSlot('mat-rowhd')
+            + '" scope="row">' + esc(row.name) + '<em class="' + flowRibbonSlot('cell-num') + '">'
+            + esc(row.amountText) + '</em></th>');
+        for (const cell of row.cells)
+            parts.push(matrixCellHtml(cell, 'mat-cell'));
+        parts.push('</tr>');
+    }
+    parts.push('</tbody><tfoot class="' + flowRibbonSlot('mat-foot') + '"><tr class="' + flowRibbonSlot('mat-row')
+        + '"><th class="' + flowRibbonSlot('mat-rowhd') + '">合计</th>');
+    for (const cell of m.foot)
+        parts.push(matrixCellHtml(cell, 'mat-total'));
+    parts.push('</tr></tfoot></table>');
+    parts.push(noteHtml(m));
+    return parts.join('');
+}
+/* ── 形态 `rails` ───────────────────────────────────────────────── */
+/** 一条构成轨：逐格宽度＝占比（绝对值写在下面的名单里，格小到放不下百分数时那一格不出字）。 */
+function railHtml(m, side) {
+    const segs = side === 'src' ? m.sourceSegs : m.useSegs;
+    const head = side === 'src' ? m.sourceHead : m.useHead;
+    const parts = ['<span class="' + flowRibbonSlot('rails-hd') + '">' + esc(head) + '</span>',
+        '<div class="' + flowRibbonSlot('rail') + ' is-' + side + '">'];
+    for (const seg of segs) {
+        parts.push('<span class="' + flowRibbonSlot('seg') + '" aria-hidden="true" title="'
+            + esc(seg.name + ' ' + seg.amountText + '（占总额 ' + seg.shareText + '）') + '" style="'
+            + FLOW_RIBBON_WIDTH_VAR + ': ' + pct(seg.widthPct) + '">'
+            + (seg.numbered ? '<b class="' + flowRibbonSlot('seg-pct') + '">' + esc(seg.shareText) + '</b>' : '')
+            + '</span>');
+    }
+    parts.push('</div>');
+    return parts.join('');
+}
+/** 轨下那一栏名单（来源栏 ／ 用途栏；两条轨的读数逐条写全）。 */
+function railsColHtml(head, rows) {
+    return '<div class="' + flowRibbonSlot('rails-col') + '">'
+        + '<p class="' + flowRibbonSlot('rails-hd') + '">' + esc(head) + '</p>'
+        + rows.map(readoutRowHtml).join('') + '</div>';
+}
+/** 构成轨骨架：卡头 → 两轨 ＋ 中间汇合读数 → 逐条名单 → 脚注。 */
+function renderRails(m) {
+    const parts = [headHtml(m),
+        '<div class="' + flowRibbonSlot('rails') + '" role="img" aria-label="' + esc(m.ariaLabel) + '">'];
+    parts.push(railHtml(m, 'src'));
+    parts.push('<div class="' + flowRibbonSlot('hub') + '">'
+        + '<span class="' + flowRibbonSlot('hub-eq') + '">' + esc(m.hubEqText) + '</span>'
+        + '<span class="' + flowRibbonSlot('hub-net') + '">' + esc(m.hubNetText) + '</span></div>');
+    parts.push(railHtml(m, 'use'));
+    parts.push('</div>');
+    parts.push('<div class="' + flowRibbonSlot('rails-list') + '">');
+    parts.push(railsColHtml('来源 · ' + String(m.sourceSegs.length) + ' 股', m.sourceRows.map((r, i) => ({ ...r, mark: 'is-s' + String(i + 1) }))));
+    parts.push(railsColHtml('用途 · ' + String(m.useSegs.length) + ' 类', m.useRows.map((r) => ({ ...r, mark: 'is-tgt' }))));
+    parts.push('</div>');
+    parts.push(noteHtml(m));
+    return parts.join('');
+}
+/** 形态 → 骨架（分派写在这里，加第四形态就是加一支）。 */
+const SKELETONS = {
+    sankey: (m) => renderSankey(m),
+    matrix: (m) => renderMatrix(m),
+    rails: (m) => renderRails(m),
+};
+/** 渲染流向带（纯函数：同样的入参恒产同样的字节；转义只经 `shared/escape.ts`）。 */
+export function renderFlowRibbon(input) {
+    const m = normalizeFlowRibbon(input);
+    const extra = m.extraClass === undefined ? '' : ' ' + m.extraClass;
+    return '<div class="' + FLOW_RIBBON_CLASS + ' is-' + m.form + extra + '">' + SKELETONS[m.form](m) + '</div>';
+}
+//# sourceMappingURL=render.js.map

package/dist/components/flow-ribbon/render.js.map

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

package/dist/components/flow-ribbon/style-forms.d.ts

@@ -0,0 +1,8 @@
+/** 桑基与矩阵两段的样式（由 `flowRibbonCss()` 插在卡头与共用名单之间）。恒返回非空 CSS 文本。
+ *
+ *  边界：这两段住本文件，**两条构成轨那一段住 `style-rails.ts`**（同一条前缀、同一份纪律，
+ *  由 `style.ts` 一次调用把三段按原顺序汇总——顺序即层叠顺序）。 */
+export declare function flowRibbonFormsCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style-forms.d.ts.map

package/dist/components/flow-ribbon/style-forms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-forms.d.ts","sourceRoot":"","sources":["../../../src/components/flow-ribbon/style-forms.ts"],"names":[],"mappings":"AA0BA;;;4CAG4C;AAC5C,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAsO/E"}

package/dist/components/flow-ribbon/style-forms.js

@@ -0,0 +1,255 @@
+/** flow-ribbon · **三个骨架各自的形状**（同目录第二份样式来源；由 `style.ts` 的 `flowRibbonCss()` 汇总）。
+ *
+ *  为什么有这一件：本件一次落三个形态，样式段一度到 400 行（本包告警线 350，`packages/base-render/AGENTS.md`）。
+ *  「桑基画布」「交叉矩阵」「两条构成轨」各自是一段边界干净的形状，独立成件；
+ *  **取值一个字节都不许改**——搬的只是「住哪个文件」。
+ *
+ *  纪律同 `style.ts`：只经 `skinVar()` 读皮肤／全部规则 scope 在 `.<prefix>page-ui` 之下且**每条里作用域恰一次**
+ *  （拼后代选择器时只用不带 scope 的裸槽类 `c()`）／零 `:root`／零 `!important`／零颜色字面量
+ *  （色阶与深浅都走 `color-mix()` 从 `accent` 与 `surface` 算，**任何一处都不拿 `ink` 系当面**）。
+ */
+import { skinVar } from '../skin/contract.js';
+import { FLOW_RIBBON_NARROW_PX, FLOW_RIBBON_NODE_COL_PX, flowRibbonSlot } from './attrs.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 来源那一列的色阶（第 1 股最深 → 第 6 股最浅）：**从 `accent` 往卡面掺出来的淡洗**，不是色值。 */
+const SOURCE_WASH = [46, 36, 29, 23, 18, 14];
+/** 桑基画布高（px）：`--flow-ribbon-plot-h` 没给时用它兜底（正常情况下那个变量由 `forms.ts` 算出来）。 */
+const PLOT_FALLBACK_PX = 240;
+/** 一个百分比档：强调色往卡面掺 `weight`%（淡洗＝合法的面；不是"拿墨色当面"）。 */
+const wash = (weight) => 'color-mix(in srgb, ' + skinVar('accent') + ' ' + String(weight)
+    + '%, ' + skinVar('surface') + ')';
+/** 桑基与矩阵两段的样式（由 `flowRibbonCss()` 插在卡头与共用名单之间）。恒返回非空 CSS 文本。
+ *
+ *  边界：这两段住本文件，**两条构成轨那一段住 `style-rails.ts`**（同一条前缀、同一份纪律，
+ *  由 `style.ts` 一次调用把三段按原顺序汇总——顺序即层叠顺序）。 */
+export function flowRibbonFormsCss(input) {
+    const p = input !== undefined && input !== null
+        && typeof input.prefix === 'string' && input.prefix !== '' ? input.prefix : 'ilife-';
+    const root = '.' + p + 'page-ui';
+    const s = (slot) => root + ' .' + flowRibbonSlot(slot, p);
+    /* 槽类名（**不带 scope**）：只用在**已经落进本件某条选择器内部**的位置（前缀由外层那条选择器给）。 */
+    const c = (slot) => '.' + flowRibbonSlot(slot, p);
+    /** 一条色阶档位：带子、图例色块、名单色块三处**共用同一档**（序与色对得上才读得出对应）。 */
+    const mark = (i) => [c('lane') + '.is-s' + String(i + 1), c('legend-mark') + '.is-s' + String(i + 1),
+        c('swatch') + '.is-s' + String(i + 1)].map((one) => root + ' ' + one).join(', ');
+    /** 两列节点的宽度：**按轨道的同一把尺子**——列宽固定，带子只占中间那一段。 */
+    const colW = 'max(' + String(FLOW_RIBBON_NODE_COL_PX) + 'px, 28%)';
+    return [
+        [`/* ── 桑基带：两列节点 ＋ 中间一条条带子 ────────────────────────────
+   节点的高、带子两端的上下沿**全是算出来的百分比**（model.ts 的一把尺子），
+   故这里只写位置与外观；带子的多边形由四个行内自定义属性给。 */`,
+            s('plot') + ' {',
+            '  position: relative;',
+            '  height: var(' + '--flow-ribbon-plot-h, ' + String(PLOT_FALLBACK_PX) + 'px);',
+            '  min-width: 0;',
+            '}',
+            /* 一条带子：上下沿在左右两端各给一对（`l1`／`l2` 在左、`r1`／`r2` 在右），
+               `clip-path` 把整块方盒裁成那条带子。**两端的高相等**＝这笔金额 × 同一把尺子。 */
+            s('lane') + ' {',
+            '  position: absolute;',
+            '  top: 0;',
+            '  bottom: 0;',
+            '  left: ' + colW + ';',
+            '  right: ' + colW + ';',
+            '  clip-path: polygon(0% var(--flow-ribbon-l1), 100% var(--flow-ribbon-r1), 100% var(--flow-ribbon-r2), 0% var(--flow-ribbon-l2));',
+            '}',
+            ...SOURCE_WASH.map((weight, i) => mark(i) + ' {'
+                + LF + '  background: ' + wash(weight) + ';'
+                + LF + '}'),
+            /* 用途那一列的空心档：形上与来源色阶分得开（不是靠色相）。 */
+            root + ' ' + c('swatch') + '.is-tgt, ' + root + ' ' + c('legend-mark') + '.is-tgt {',
+            '  background: ' + skinVar('surface') + ';',
+            '  border: 1px solid ' + skinVar('accent') + ';',
+            '}',
+            /* 一个节点：不透明的框压在带子两头收口；框里放名字与金额（**放不下就不放字，读数搬到下面名单里**）。
+               顶边与高都取行内算出来的百分比——**与带子两端同一把尺子**。 */
+            s('node') + ' {',
+            '  position: absolute;',
+            '  top: var(' + '--flow-ribbon-t, 0%);',
+            '  height: var(' + '--flow-ribbon-h, 0%);',
+            '  display: flex;',
+            '  flex-wrap: wrap;',
+            '  align-content: center;',
+            '  align-items: baseline;',
+            '  gap: 0 6px;',
+            '  padding: 2px 6px;',
+            '  border: 1px solid ' + skinVar('line') + ';',
+            '  border-radius: ' + skinVar('radius-sm') + ';',
+            '  background: ' + skinVar('surface-2') + ';',
+            '  color: ' + skinVar('ink') + ';',
+            '  font-size: ' + skinVar('fs-xs') + ';',
+            '  line-height: 1.3;',
+            '}',
+            s('node') + '.is-src {',
+            '  left: 0;',
+            '  width: ' + colW + ';',
+            '  justify-content: flex-end;',
+            '  text-align: right;',
+            '}',
+            s('node') + '.is-use {',
+            '  right: 0;',
+            '  width: ' + colW + ';',
+            '}',
+            s('nd-name') + ' {',
+            '  min-width: 0;',
+            '  color: ' + skinVar('ink') + ';',
+            '  font-weight: 700;',
+            '}',
+            s('nd-amount') + ' {',
+            '  min-width: 0;',
+            '  color: ' + skinVar('ink-2') + ';',
+            '  font-family: ' + skinVar('font-num') + ';',
+            '  font-style: normal;',
+            '  font-variant-numeric: tabular-nums;',
+            '  white-space: nowrap;',
+            '}'].join(LF),
+        [`/* ── 交叉矩阵：行＝来源、列＝用途 ────────────────────────────────
+   格宽按占比画的那一条在矩阵里是「条长」：--flow-ribbon-w 是这一格 ÷ **全表最大格**
+   （不是本行最大——否则每行最深的那一格看起来一样重要）。 */`,
+            s('matrix') + ' {',
+            '  width: 100%;',
+            '  min-width: 0;',
+            '  border-collapse: collapse;',
+            '}',
+            /* 行头那一列**按内容定宽**（`width: 1%` ＋ 自动表布局：先缩到内容宽，余下的均分给各列）
+               ——12 位金额的行合计写在这个格子里，定宽会让它溢出。 */
+            s('mat-rowhd') + ' {',
+            '  width: 1%;',
+            '  min-width: 0;',
+            '  padding: 4px 6px 4px 0;',
+            '  text-align: left;',
+            '  vertical-align: middle;',
+            '  border-bottom: 1px solid ' + skinVar('line') + ';',
+            '  color: ' + skinVar('ink') + ';',
+            '  font-size: ' + skinVar('fs-xs') + ';',
+            '  font-weight: 700;',
+            '}',
+            s('mat-rowhd') + ' ' + c('cell-num') + ' {',
+            '  display: block;',
+            '  color: ' + skinVar('ink-2') + ';',
+            '  font-weight: 600;',
+            '  font-variant-numeric: tabular-nums;',
+            '  white-space: nowrap;',
+            '}',
+            /* 一格：底色深浅与条长**都是同一把尺子**（都按全表最大格）——色只走强调色系的淡洗。 */
+            s('mat-cell') + ', ' + s('mat-total') + ' {',
+            '  position: relative;',
+            '  padding: 5px 2px 8px;',
+            '  text-align: center;',
+            '  vertical-align: middle;',
+            '  border-bottom: 1px solid ' + skinVar('line') + ';',
+            '  background: color-mix(in srgb, ' + skinVar('accent') + ' var(' + '--flow-ribbon-mix, 0%), '
+                + skinVar('surface') + ');',
+            '}',
+            s('mat-head') + ' ' + c('mat-cell') + ' {',
+            '  padding-bottom: 4px;',
+            '  color: ' + skinVar('ink-2') + ';',
+            '  font-size: ' + skinVar('fs-xs') + ';',
+            '  font-weight: 600;',
+            '  background: none;',
+            '  overflow-wrap: anywhere;',
+            '}',
+            /* 左上角那格（那一列的宽由它兜底）：一行写清行与列是什么——它是**列宽的底线**，
+               折成三行会让整张表的第一列看起来像坏了（实测过）。 */
+            s('mat-head') + ' ' + c('mat-rowhd') + ' {',
+            '  white-space: nowrap;',
+            '}',
+            s('mat-foot') + ' ' + c('mat-rowhd') + ', ' + s('mat-foot') + ' ' + c('mat-total') + ' {',
+            '  border-top: 2px solid ' + skinVar('line') + ';',
+            '  border-bottom: 0;',
+            '  color: ' + skinVar('ink') + ';',
+            '  font-weight: 700;',
+            '}',
+            s('mat-foot') + ' ' + c('mat-total') + ' {',
+            '  background: ' + skinVar('surface-2') + ';',
+            '}',
+            /* 条：**无文字的图形 ⇒ `accent` 实底**（宽＝算出来的百分比）。 */
+            s('cell-bar') + ' {',
+            '  position: absolute;',
+            '  left: 0;',
+            '  bottom: 0;',
+            '  height: 3px;',
+            '  width: var(' + '--flow-ribbon-w, 0%);',
+            '  border-radius: ' + skinVar('radius-pill') + ';',
+            '  background: ' + skinVar('accent') + ';',
+            '}',
+            s('cell-num') + ' {',
+            '  display: block;',
+            '  color: ' + skinVar('ink') + ';',
+            '  font-family: ' + skinVar('font-num') + ';',
+            '  font-size: ' + skinVar('fs-xs') + ';',
+            '  font-weight: 700;',
+            '  font-variant-numeric: tabular-nums;',
+            '  white-space: nowrap;',
+            '}',
+            s('cell-pct') + ' {',
+            '  display: block;',
+            '  color: ' + skinVar('ink-2') + ';',
+            '  font-style: normal;',
+            '  font-size: ' + skinVar('fs-xs') + ';',
+            '  font-weight: 600;',
+            '  font-variant-numeric: tabular-nums;',
+            '  white-space: nowrap;',
+            '}',
+            /* 窄容器：矩阵改成**一行一格**（列名顶在数字前）——四列并排时一格只有 60 出头，
+               金额只能截断才塞得下，而金额永远不许截断。骨架没换（还是行＝来源、列＝用途），
+               换的是「一行放几列」这一处排版；**格宽照旧按占比画**（一格满宽，条长就是占比的尺子）。 */
+            '@container (max-width: ' + String(FLOW_RIBBON_NARROW_PX) + 'px) {',
+            '  ' + s('matrix') + ' {',
+            '    display: block;',
+            '  }',
+            '  ' + s('mat-head') + ' {',
+            '    display: none;',
+            '  }',
+            '  ' + s('mat-body') + ', ' + s('mat-foot') + ' {',
+            '    display: block;',
+            '  }',
+            '  ' + s('mat-row') + ' {',
+            '    display: block;',
+            '    min-width: 0;',
+            '    padding: 6px 0;',
+            '    border-bottom: 1px solid ' + skinVar('line') + ';',
+            '  }',
+            '  ' + s('mat-foot') + ' ' + c('mat-row') + ' {',
+            '    border-bottom: 0;',
+            '  }',
+            '  ' + s('mat-rowhd') + ' {',
+            '    display: flex;',
+            '    align-items: baseline;',
+            '    gap: 8px;',
+            '    width: auto;',
+            '    min-width: 0;',
+            '    padding: 0 0 2px;',
+            '    border-bottom: 0;',
+            '    overflow-wrap: anywhere;',
+            '  }',
+            '  ' + s('mat-foot') + ' ' + c('mat-rowhd') + ' {',
+            '    border-top: 0;',
+            '  }',
+            /* 一格独占一行：**条照旧按占比画**（一格满宽 ⇒ 每一格与同行别格同一个满格参照）。 */
+            '  ' + s('mat-cell') + ', ' + s('mat-total') + ' {',
+            '    display: block;',
+            '    min-width: 0;',
+            '    padding: 1px 0 7px;',
+            '    border-bottom: 0;',
+            '    text-align: left;',
+            '  }',
+            '  ' + s('mat-cell') + '::before, ' + s('mat-total') + '::before {',
+            '    content: attr(data-use);',
+            '    margin-right: 6px;',
+            '    color: ' + skinVar('ink-3') + ';',
+            '    font-size: ' + skinVar('fs-xs') + ';',
+            '    font-weight: 600;',
+            '  }',
+            '  ' + s('cell-num') + ' {',
+            '    display: inline;',
+            '  }',
+            '  ' + s('cell-pct') + ' {',
+            '    display: inline;',
+            '    margin-left: 6px;',
+            '  }',
+            '}'].join(LF),
+    ].join(LF);
+}
+//# sourceMappingURL=style-forms.js.map

package/dist/components/flow-ribbon/style-forms.js.map

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

package/dist/components/flow-ribbon/style-rails.d.ts

@@ -0,0 +1,5 @@
+/** 构成轨那一段的样式（由 `flowRibbonCss()` 插在矩阵之后、共用名单与脚注之前）。恒返回非空 CSS 文本。 */
+export declare function flowRibbonRailsCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style-rails.d.ts.map

package/dist/components/flow-ribbon/style-rails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-rails.d.ts","sourceRoot":"","sources":["../../../src/components/flow-ribbon/style-rails.ts"],"names":[],"mappings":"AA0BA,oEAAoE;AACpE,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA2G/E"}