base-paint 0.3.13 → 0.3.15

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"}

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

@@ -0,0 +1,130 @@
+/** flow-ribbon · **两条构成轨那一段的形状**（同目录第三份样式来源；由 `style.ts` 的 `flowRibbonCss()` 汇总）。
+ *
+ *  为什么独立成件：`style-forms.ts` 里桑基与矩阵两段已经够长，再叠这一段就过本包的行数告警线
+ *  （350 行／LF 口径，见 `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, flowRibbonSlot } from './attrs.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 构成轨里两层的深浅（同一条 `accent`，只换掺进去的权重）：来源那一层比用途那一层深一档。 */
+const RAIL_WASH_SRC = 26;
+const RAIL_WASH_USE = 13;
+/** 一条轨的高度（px）：够放一个百分数，又不至于在窄档把版面顶长。 */
+const RAIL_PX = 34;
+/** 一个百分比档：强调色往卡面掺 `weight`%（淡洗＝合法的面；不是"拿墨色当面"）。 */
+const wash = (weight) => 'color-mix(in srgb, ' + skinVar('accent') + ' ' + String(weight)
+    + '%, ' + skinVar('surface') + ')';
+/** 构成轨那一段的样式（由 `flowRibbonCss()` 插在矩阵之后、共用名单与脚注之前）。恒返回非空 CSS 文本。 */
+export function flowRibbonRailsCss(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);
+    return [
+        `/* ── 两条构成轨 ＋ 中间汇合读数 ──────────────────────────────────
+   每格宽度＝这一格占总额的比例：**同一个总额、两条轨各自拉满 100%**，故上下两轨可以横着比。
+   宽度写在 width 上（不是靠内容撑），这正是原型阶段踩过的那个坑（flex: 0 0 auto 按文字宽度排）。 */`,
+        s('rails') + ' {',
+        '  display: grid;',
+        '  gap: 5px;',
+        '  min-width: 0;',
+        '}',
+        s('rails-hd') + ' {',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 700;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('rail') + ' {',
+        '  display: flex;',
+        '  height: ' + String(RAIL_PX) + 'px;',
+        '  min-width: 0;',
+        '  border: 1px solid ' + skinVar('line') + ';',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  overflow: hidden;',
+        '}',
+        /* 一格：宽＝占比；段与段之间留 1px 纸缝（`border-right` 走卡面色，**不占额外宽度**）。 */
+        s('seg') + ' {',
+        '  flex: 0 0 auto;',
+        '  display: flex;',
+        '  align-items: center;',
+        '  justify-content: center;',
+        '  min-width: 0;',
+        '  width: var(' + '--flow-ribbon-w, 0%);',
+        '  border-right: 1px solid ' + skinVar('surface') + ';',
+        '  overflow: hidden;',
+        '}',
+        s('rail') + '.is-src ' + c('seg') + ' {',
+        '  background: ' + wash(RAIL_WASH_SRC) + ';',
+        '}',
+        s('rail') + '.is-use ' + c('seg') + ' {',
+        '  background: ' + wash(RAIL_WASH_USE) + ';',
+        '}',
+        s('rail') + ' ' + c('seg') + ':last-child {',
+        '  border-right: 0;',
+        '}',
+        s('seg-pct') + ' {',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        s('hub') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 2px 10px;',
+        '  min-width: 0;',
+        '  padding: 6px 0;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '  border-bottom: 1px solid ' + skinVar('line') + ';',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '}',
+        s('hub-eq') + ' {',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('hub-net') + ' {',
+        '  margin-left: auto;',
+        '  min-width: 0;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        s('rails-list') + ' {',
+        '  display: grid;',
+        '  grid-template-columns: repeat(2, minmax(0, 1fr));',
+        '  gap: 6px 18px;',
+        '  min-width: 0;',
+        '  padding-top: 8px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '}',
+        s('rails-col') + ' {',
+        '  display: grid;',
+        '  gap: 4px;',
+        '  min-width: 0;',
+        '}',
+        /* 窄容器：名单由两栏改一栏（一栏里名字与金额都放得下，两栏会挤到折行折得难看）。 */
+        '@container (max-width: ' + String(FLOW_RIBBON_NARROW_PX) + 'px) {',
+        '  ' + s('rails-list') + ' {',
+        '    grid-template-columns: minmax(0, 1fr);',
+        '  }',
+        '}',
+    ].join(LF);
+}
+//# sourceMappingURL=style-rails.js.map

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

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

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

@@ -0,0 +1,5 @@
+/** 本组件的样式段（＝这一份 ＋ `style-forms.ts` 那一份，**一次调用拿全部**）。恒返回非空 CSS 文本。 */
+export declare function flowRibbonCss(input?: {
+    readonly prefix?: string;
+}): string;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/components/flow-ribbon/style.ts"],"names":[],"mappings":"AAqBA,qEAAqE;AACrE,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAmM1E"}

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

@@ -0,0 +1,216 @@
+/** flow-ribbon · **样式段**（本件唯一的样式出口；三个骨架各自的形状在 `style-forms.ts`，由这里汇总）。
+ *
+ *  纪律（与本节其余件同一份）：
+ *   · 只经 `skinVar()` 读皮肤 —— 组件里**不写** `var(--ilife-…)`（兜底链只许住在 `skin/contract.ts`）；
+ *   · 全部规则 scope 在 `.<prefix>page-ui` 之下、**每条里作用域恰一次**；不写 `:root`／`!important`、不新增 token 名；
+ *   · **宽度只许容器判**：布局靠 `@container` ＋ 内在尺寸 ＋ `flex-wrap`；本件不写任何 `@media`（视口宽 ≠ 组件宽）。
+ *
+ *  几何契约（判据钉住）：
+ *   · **两处几何都是算出来的百分比**（写在进行内样式里），静态规则一条都不许写死宽度；
+ *   · **读数永不截断**：会随调用方文本变长的槽一律 `min-width: 0` ＋ 可换行；金额与占比 `nowrap` ＋ `tabular-nums`；
+ *   · **色只走强调色系**：色阶是从 `accent` 往 `surface` 掺出来的淡洗（权重按来源序号由深到浅），
+ *     任何一处都不拿 `ink` 系当面、也没有一处是写死的色值。
+ */
+import { skinVar } from '../skin/contract.js';
+import { FLOW_RIBBON_NARROW_PX, flowRibbonSlot } from './attrs.js';
+import { flowRibbonFormsCss } from './style-forms.js';
+import { flowRibbonRailsCss } from './style-rails.js';
+/** 换行（仓库口径：不写字面换行转义）。 */
+const LF = String.fromCharCode(10);
+/** 本组件的样式段（＝这一份 ＋ `style-forms.ts` 那一份，**一次调用拿全部**）。恒返回非空 CSS 文本。 */
+export function flowRibbonCss(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-flow-ribbon';
+    const s = (slot) => root + ' .' + flowRibbonSlot(slot, p);
+    return [
+        '/* flow-ribbon（流向带）：三个骨架——桑基带／交叉矩阵／两条构成轨＋汇合读数。',
+        '   一把尺子贯穿三处几何：每 1% 高／宽＝同一个钱数（从总额与跨度算出，写在标记的行内样式里）。',
+        '   色一律从强调色系算（淡洗），读数不截断；宽度只由容器判。 */',
+        box + ' {',
+        /* 宽度判据的落点：本件是**自己的容器**——嵌进侧栏／面板／卡片时照样按自己的宽度排。 */
+        '  container-type: inline-size;',
+        /* 宿主页不保证是 `border-box`：本件有「满宽 ＋ 1px 边框」的轨与表，在默认 content-box 下
+           会比容器宽出两像素 ⇒ 窄档实测横溢。故在**自己的子树里**钉成 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;',
+        '}',
+        /* 时间窗与总额：**可收窄**（`flex: 0 1 auto` ＋ `min-width: 0`）——内容撑宽是横溢的来源，
+           `flex: none` 会让这一项拒绝收窄、把父行顶出容器。 */
+        s('stamp') + ' {',
+        '  flex: 0 1 auto;',
+        '  min-width: 0;',
+        '  margin-left: auto;',
+        '  padding: 1px 8px;',
+        '  border-radius: ' + skinVar('radius-pill') + ';',
+        '  background: ' + skinVar('surface-2') + ';',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('tail') + ' {',
+        '  flex: 0 1 auto;',
+        '  min-width: 0;',
+        '  margin-left: auto;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        /* 三个骨架各自的形状：桑基与矩阵住 `style-forms.ts`、两条构成轨住 `style-rails.ts`——
+           在这一行的位置上依次汇总，顺序即层叠顺序，**产物逐字节不变**。 */
+        flowRibbonFormsCss({ prefix: p }),
+        flowRibbonRailsCss({ prefix: p }),
+        /* ── 读数名单（桑基装不下的读数、构成轨的两栏名单都用它）──────────────── */
+        s('readout') + ' {',
+        '  display: grid;',
+        '  gap: 6px;',
+        '  min-width: 0;',
+        '  padding-top: 8px;',
+        '  border-top: 1px solid ' + skinVar('line') + ';',
+        '}',
+        s('readout-hd') + ' {',
+        '  margin: 0;',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink-3') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('readout-row') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  align-items: baseline;',
+        '  gap: 2px 8px;',
+        '  min-width: 0;',
+        '}',
+        s('readout-name') + ' {',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-weight: 700;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        /* 金额：**永不 `…` 截断**（`nowrap` ＋ 不设 `overflow: hidden`；放不下就整行换行）。 */
+        s('readout-amount') + ' {',
+        '  min-width: 0;',
+        '  color: ' + skinVar('ink') + ';',
+        '  font-family: ' + skinVar('font-num') + ';',
+        '  font-size: ' + skinVar('fs-sm') + ';',
+        '  font-weight: 700;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        s('readout-share') + ' {',
+        '  margin-left: auto;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '  font-variant-numeric: tabular-nums;',
+        '  white-space: nowrap;',
+        '}',
+        /* 点名色块：**无文字的图形 ⇒ `accent` 实底**；`is-s1`…`is-s6` 的深浅档住 `style-forms.ts`。 */
+        s('swatch') + ' {',
+        '  display: block;',
+        '  flex: none;',
+        '  width: 10px;',
+        '  height: 10px;',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + skinVar('accent') + ';',
+        '}',
+        /* ── 图例（桑基那三档色阶的键）────────────────────────────────── */
+        s('legend') + ' {',
+        '  display: flex;',
+        '  flex-wrap: wrap;',
+        '  gap: 4px 16px;',
+        '  min-width: 0;',
+        '  margin: 0;',
+        '  padding: 0;',
+        '  list-style: none;',
+        '  color: ' + skinVar('ink-2') + ';',
+        '  font-size: ' + skinVar('fs-xs') + ';',
+        '  font-weight: 600;',
+        '}',
+        s('legend-item') + ' {',
+        '  display: inline-flex;',
+        '  align-items: center;',
+        '  gap: 6px;',
+        '  min-width: 0;',
+        '  overflow-wrap: anywhere;',
+        '}',
+        s('legend-mark') + ' {',
+        '  display: block;',
+        '  flex: none;',
+        '  width: 14px;',
+        '  height: 10px;',
+        '  border-radius: ' + skinVar('radius-sm') + ';',
+        '  background: ' + skinVar('accent') + ';',
+        '}',
+        /* ── 脚注 ─────────────────────────────────────────────────────── */
+        s('note') + ' {',
+        '  margin: 0;',
+        '  min-width: 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;',
+        '}',
+        /* 本件自身不带可点元素。下面三条是**地板**：调用方把某一格或某一行包成入口（点开那一股的钱）时，
+           命中盒不许小于 44×44（触屏地板），焦点必须看得见。
+           两条分开写（不写 `:is(a, button)`）：选择器逐条带上本件的作用域，纪律判据按逗号逐段查。 */
+        box + ' a {',
+        '  min-width: 44px;',
+        '  min-height: 44px;',
+        '}',
+        box + ' button {',
+        '  min-width: 44px;',
+        '  min-height: 44px;',
+        '}',
+        box + ' :focus-visible {',
+        '  outline: 2px solid ' + skinVar('accent') + ';',
+        '  outline-offset: 2px;',
+        '}',
+        /* 窄容器（<' + String(FLOW_RIBBON_NARROW_PX) + 'px）：**桑基一处几何都不改**——改了就等于换了一把尺子
+           （窄档里带子会细到看不出对应，那是形态的事：要窄就换 `rails` 形态）。
+           矩阵与构成轨那两处「一行里塞太多列」的松开住 `style-forms.ts`（同一份纪律、同一条阈值）。 */
+        '@container (max-width: ' + String(FLOW_RIBBON_NARROW_PX) + 'px) {',
+        '  ' + s('readout-name') + ' {',
+        '    font-size: ' + skinVar('fs-xs') + ';',
+        '  }',
+        '}',
+    ].join(LF);
+}
+//# sourceMappingURL=style.js.map