@zerodep-dev/vue-tsx-pro-ui 0.3.2 → 0.4.0

package/dist/charts/shape.d.ts

@@ -0,0 +1,46 @@
+/** 一个点 [x, y] */
+export type ChartPoint = readonly [number, number];
+/** 线的形状 */
+export interface LineCurves {
+    /** 折线：相邻的点直线相连（默认） */
+    linear: unknown;
+    /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */
+    monotone: unknown;
+    /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */
+    step: unknown;
+}
+/**
+ * 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。
+ * 少于三个点时平滑曲线退化成直线
+ */
+export declare function linePath(points: readonly ChartPoint[], curve?: keyof LineCurves, start?: 'M' | 'L'): string;
+/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */
+export declare function areaPath(top: readonly ChartPoint[], bottom: readonly ChartPoint[], curve?: keyof LineCurves): string;
+/** 柱子的哪一端是圆角：柱顶朝哪个方向 */
+export type BarEnd = 'top' | 'bottom' | 'left' | 'right' | 'none';
+/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */
+export declare function barPath(x: number, y: number, width: number, height: number, radius: number, end: BarEnd): string;
+/** 环形的一段：角度从 12 点钟方向顺时针（弧度），圆心在原点 */
+export interface ArcShape {
+    /** 内半径；0 是饼图的扇形 */
+    inner: number;
+    /** 外半径 */
+    outer: number;
+    /** 起始角 */
+    start: number;
+    /** 结束角 */
+    end: number;
+    /** 四个角的圆角半径，默认 0 */
+    corner?: number;
+}
+/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */
+export declare function polarPoint(r: number, angle: number): [number, number];
+/**
+ * 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧
+ * （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）
+ */
+export declare function arcPath({ inner, outer, start, end, corner }: ArcShape): string;
+/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */
+export declare function ribbonPath(radius: number, source: readonly [number, number], target: readonly [number, number]): string;
+/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */
+export declare function horizontalLinkPath(x0: number, y0: number, x1: number, y1: number): string;

package/dist/charts/shape.js

@@ -0,0 +1,131 @@
+import { svgNumber } from "../utils/data/number.js";
+//#region src/charts/shape.ts
+/**
+* 图形的 SVG 路径：折线与面积（直线、单调平滑、阶梯）、一端圆角的柱子、环形的扇区、弦图的弦、桑基图的带子。
+* 曲线的算法同 d3-shape（curveMonotoneX 是 Steffen 的单调三次插值，不会越过数据点），写成只产出路径字符串的精简版。
+* 坐标保留三位小数（svgNumber）：服务端与浏览器算出的路径一致。
+*
+*   linePath([[0, 10], [40, 30], [80, 20]], 'monotone')   // 'M0,10C13.333,…'
+*   areaPath(top, bottom, 'linear')                       // 上沿从左到右、下沿从右到左，闭合
+*   arcPath({ inner: 60, outer: 88, start: 0, end: Math.PI / 2, corner: 3 })
+*/
+/** 两个数字写成“x,y” */
+var pair = (x, y) => `${svgNumber(x)},${svgNumber(y)}`;
+var sign = (value) => value < 0 ? -1 : 1;
+/** 中间一点的切线斜率：两侧的斜率异号时为 0（极值点不越过），否则取不超过两侧的调和值（同 d3 的 slope3） */
+function interiorSlope(a, b, c) {
+	const h0 = b[0] - a[0];
+	const h1 = c[0] - b[0];
+	const s0 = (b[1] - a[1]) / (h0 || (h1 < 0 ? -0 : 0));
+	const s1 = (c[1] - b[1]) / (h1 || (h0 < 0 ? -0 : 0));
+	const p = (s0 * h1 + s1 * h0) / (h0 + h1);
+	return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), .5 * Math.abs(p)) || 0;
+}
+/** 端点的切线斜率：由相邻一段的斜率与相邻点的切线推出（同 d3 的 slope2） */
+function endSlope(a, b, tangent) {
+	const h = b[0] - a[0];
+	return h ? (3 * (b[1] - a[1]) / h - tangent) / 2 : tangent;
+}
+/** 单调三次插值：各点的切线，再按 Hermite 写成三次贝塞尔 */
+function monotoneCommands(points) {
+	const n = points.length;
+	const tangents = points.map((point, i) => i > 0 && i < n - 1 ? interiorSlope(points[i - 1], point, points[i + 1]) : 0);
+	tangents[0] = endSlope(points[0], points[1], tangents[1]);
+	tangents[n - 1] = endSlope(points[n - 2], points[n - 1], tangents[n - 2]);
+	let path = "";
+	for (let i = 1; i < n; i += 1) {
+		const [x0, y0] = points[i - 1];
+		const [x1, y1] = points[i];
+		const dx = (x1 - x0) / 3;
+		path += `C${pair(x0 + dx, y0 + dx * tangents[i - 1])},${pair(x1 - dx, y1 - dx * tangents[i])},${pair(x1, y1)}`;
+	}
+	return path;
+}
+/**
+* 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。
+* 少于三个点时平滑曲线退化成直线
+*/
+function linePath(points, curve = "linear", start = "M") {
+	if (points.length === 0) return "";
+	const [first, ...rest] = points;
+	let path = `${start}${pair(first[0], first[1])}`;
+	if (curve === "monotone" && points.length > 2) return path + monotoneCommands(points);
+	let previous = first;
+	for (const point of rest) {
+		if (curve === "step") path += `L${pair(point[0], previous[1])}`;
+		path += `L${pair(point[0], point[1])}`;
+		previous = point;
+	}
+	return path;
+}
+/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */
+function areaPath(top, bottom, curve = "linear") {
+	if (top.length === 0) return "";
+	const back = curve === "step" ? bottom.flatMap((point, i) => i === 0 ? [point] : [[point[0], bottom[i - 1][1]], point]) : bottom;
+	return `${linePath(top, curve)}${linePath([...back].reverse(), curve === "step" ? "linear" : curve, "L")}Z`;
+}
+/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */
+function barPath(x, y, width, height, radius, end) {
+	const w = Math.max(width, 0);
+	const h = Math.max(height, 0);
+	const vertical = end === "top" || end === "bottom";
+	const r = end === "none" ? 0 : Math.max(0, Math.min(radius, vertical ? w / 2 : h / 2, vertical ? h : w));
+	const [x1, y1] = [x + w, y + h];
+	const corner = (cx, cy) => `A${pair(r, r)},0,0,1,${pair(cx, cy)}`;
+	if (!r) return `M${pair(x, y)}H${svgNumber(x1)}V${svgNumber(y1)}H${svgNumber(x)}Z`;
+	if (end === "top") return `M${pair(x, y1)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1)}Z`;
+	if (end === "bottom") return `M${pair(x1, y)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y)}Z`;
+	if (end === "right") return `M${pair(x, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x)}Z`;
+	return `M${pair(x1, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1)}Z`;
+}
+/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */
+function polarPoint(r, angle) {
+	return [r * Math.sin(angle), -r * Math.cos(angle)];
+}
+/**
+* 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧
+* （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）
+*/
+function arcPath({ inner, outer, start, end, corner = 0 }) {
+	const sweep = end - start;
+	if (!(sweep > 0) || !(outer > 0)) return "";
+	const at = (r, angle) => pair(...polarPoint(r, angle));
+	const arc = (r, to, clockwise, span) => `A${pair(r, r)},0,${span > Math.PI ? 1 : 0},${clockwise ? 1 : 0},${at(r, to)}`;
+	if (sweep >= Math.PI * 2 - 1e-9) {
+		const outerRing = `M${at(outer, 0)}${arc(outer, Math.PI, true, Math.PI)}${arc(outer, 0, true, Math.PI)}Z`;
+		if (inner <= 0) return outerRing;
+		return `${outerRing}M${at(inner, 0)}${arc(inner, Math.PI, false, Math.PI)}${arc(inner, 0, false, Math.PI)}Z`;
+	}
+	const r = Math.max(0, Math.min(corner, (outer - inner) / 2, (inner > 0 ? inner : outer) * sweep / 2.2));
+	if (r < .5) {
+		const outerPart = `M${at(outer, start)}${arc(outer, end, true, sweep)}`;
+		if (inner <= 0) return `${outerPart}L0,0Z`;
+		return `${outerPart}L${at(inner, end)}${arc(inner, start, false, sweep)}Z`;
+	}
+	const outerShift = Math.asin(r / (outer - r));
+	const outerEdge = Math.sqrt((outer - r) ** 2 - r * r);
+	const fillet = (to) => `A${pair(r, r)},0,0,1,${to}`;
+	let path = `M${at(outerEdge, start)}${fillet(at(outer, start + outerShift))}${arc(outer, end - outerShift, true, sweep - outerShift * 2)}${fillet(at(outerEdge, end))}`;
+	if (inner <= 0) return `${path}L0,0Z`;
+	const innerShift = Math.asin(r / (inner + r));
+	const innerEdge = Math.sqrt((inner + r) ** 2 - r * r);
+	path += `L${at(innerEdge, end)}${fillet(at(inner, end - innerShift))}${arc(inner, start + innerShift, false, sweep - innerShift * 2)}${fillet(at(innerEdge, start))}Z`;
+	return path;
+}
+/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */
+function ribbonPath(radius, source, target) {
+	const at = (angle) => pair(...polarPoint(radius, angle));
+	const arc = ([from, to]) => `A${pair(radius, radius)},0,${to - from > Math.PI ? 1 : 0},1,${at(to)}`;
+	let path = `M${at(source[0])}${arc(source)}`;
+	if (source[0] !== target[0] || source[1] !== target[1]) path += `Q0,0,${at(target[0])}${arc(target)}`;
+	return `${path}Q0,0,${at(source[0])}Z`;
+}
+/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */
+function horizontalLinkPath(x0, y0, x1, y1) {
+	const middle = (x0 + x1) / 2;
+	return `M${pair(x0, y0)}C${pair(middle, y0)},${pair(middle, y1)},${pair(x1, y1)}`;
+}
+//#endregion
+export { arcPath, areaPath, barPath, horizontalLinkPath, linePath, polarPoint, ribbonPath };
+
+//# sourceMappingURL=shape.js.map

package/dist/charts/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","names":[],"sources":["../../src/charts/shape.ts"],"sourcesContent":["/**\n * 图形的 SVG 路径：折线与面积（直线、单调平滑、阶梯）、一端圆角的柱子、环形的扇区、弦图的弦、桑基图的带子。\n * 曲线的算法同 d3-shape（curveMonotoneX 是 Steffen 的单调三次插值，不会越过数据点），写成只产出路径字符串的精简版。\n * 坐标保留三位小数（svgNumber）：服务端与浏览器算出的路径一致。\n *\n *   linePath([[0, 10], [40, 30], [80, 20]], 'monotone')   // 'M0,10C13.333,…'\n *   areaPath(top, bottom, 'linear')                       // 上沿从左到右、下沿从右到左，闭合\n *   arcPath({ inner: 60, outer: 88, start: 0, end: Math.PI / 2, corner: 3 })\n */\nimport { svgNumber } from '../utils/data/number';\n\n/** 一个点 [x, y] */\nexport type ChartPoint = readonly [number, number];\n\n/** 线的形状 */\nexport interface LineCurves {\n  /** 折线：相邻的点直线相连（默认） */\n  linear: unknown;\n  /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */\n  monotone: unknown;\n  /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */\n  step: unknown;\n}\n\n/** 两个数字写成“x,y” */\nconst pair = (x: number, y: number) => `${svgNumber(x)},${svgNumber(y)}`;\n\nconst sign = (value: number) => (value < 0 ? -1 : 1);\n\n/** 中间一点的切线斜率：两侧的斜率异号时为 0（极值点不越过），否则取不超过两侧的调和值（同 d3 的 slope3） */\nfunction interiorSlope(a: ChartPoint, b: ChartPoint, c: ChartPoint): number {\n  const h0 = b[0] - a[0];\n  const h1 = c[0] - b[0];\n  // 横坐标相同时除以带符号的 0：得到同向的无穷大，下面取 min 时自然被别的值替代\n  const s0 = (b[1] - a[1]) / (h0 || (h1 < 0 ? -0 : 0));\n  const s1 = (c[1] - b[1]) / (h1 || (h0 < 0 ? -0 : 0));\n  const p = (s0 * h1 + s1 * h0) / (h0 + h1);\n  return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;\n}\n\n/** 端点的切线斜率：由相邻一段的斜率与相邻点的切线推出（同 d3 的 slope2） */\nfunction endSlope(a: ChartPoint, b: ChartPoint, tangent: number): number {\n  const h = b[0] - a[0];\n  return h ? ((3 * (b[1] - a[1])) / h - tangent) / 2 : tangent;\n}\n\n/** 单调三次插值：各点的切线，再按 Hermite 写成三次贝塞尔 */\nfunction monotoneCommands(points: readonly ChartPoint[]): string {\n  const n = points.length;\n  const tangents = points.map((point, i) =>\n    i > 0 && i < n - 1 ? interiorSlope(points[i - 1]!, point, points[i + 1]!) : 0,\n  );\n  tangents[0] = endSlope(points[0]!, points[1]!, tangents[1]!);\n  tangents[n - 1] = endSlope(points[n - 2]!, points[n - 1]!, tangents[n - 2]!);\n  let path = '';\n  for (let i = 1; i < n; i += 1) {\n    const [x0, y0] = points[i - 1]!;\n    const [x1, y1] = points[i]!;\n    const dx = (x1 - x0) / 3;\n    path += `C${pair(x0 + dx, y0 + dx * tangents[i - 1]!)},${pair(x1 - dx, y1 - dx * tangents[i]!)},${pair(x1, y1)}`;\n  }\n  return path;\n}\n\n/**\n * 一串点连成的路径；start 是开头的命令（M 新起一段，L 接着上一段画：面积的下沿）。\n * 少于三个点时平滑曲线退化成直线\n */\nexport function linePath(\n  points: readonly ChartPoint[],\n  curve: keyof LineCurves = 'linear',\n  start: 'M' | 'L' = 'M',\n): string {\n  if (points.length === 0) return '';\n  const [first, ...rest] = points;\n  let path = `${start}${pair(first![0], first![1])}`;\n  if (curve === 'monotone' && points.length > 2) return path + monotoneCommands(points);\n  let previous = first!;\n  for (const point of rest) {\n    // 阶梯：横着走到下一个点的横坐标，再竖着跳到它的值\n    if (curve === 'step') path += `L${pair(point[0], previous[1])}`;\n    path += `L${pair(point[0], point[1])}`;\n    previous = point;\n  }\n  return path;\n}\n\n/** 面积：上沿 top 从左到右，下沿 bottom（与 top 一一对应）从右到左，同一种曲线，闭合 */\nexport function areaPath(\n  top: readonly ChartPoint[],\n  bottom: readonly ChartPoint[],\n  curve: keyof LineCurves = 'linear',\n): string {\n  if (top.length === 0) return '';\n  // 阶梯的下沿倒着画时要先竖后横，才与上沿的拐角对齐：倒着画的阶梯把每一步的值挪到前一个点\n  const back =\n    curve === 'step'\n      ? bottom.flatMap((point, i) =>\n          i === 0 ? [point] : [[point[0], bottom[i - 1]![1]] as const, point],\n        )\n      : bottom;\n  return `${linePath(top, curve)}${linePath([...back].reverse(), curve === 'step' ? 'linear' : curve, 'L')}Z`;\n}\n\n/** 柱子的哪一端是圆角：柱顶朝哪个方向 */\nexport type BarEnd = 'top' | 'bottom' | 'left' | 'right' | 'none';\n\n/** 柱子：矩形（左上角 x、y，宽高），end 那一端的两个角是半径 radius 的圆角（不超过宽或高的一半） */\nexport function barPath(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  radius: number,\n  end: BarEnd,\n): string {\n  const w = Math.max(width, 0);\n  const h = Math.max(height, 0);\n  const vertical = end === 'top' || end === 'bottom';\n  const r =\n    end === 'none' ? 0 : Math.max(0, Math.min(radius, vertical ? w / 2 : h / 2, vertical ? h : w));\n  const [x1, y1] = [x + w, y + h];\n  const corner = (cx: number, cy: number) => `A${pair(r, r)},0,0,1,${pair(cx, cy)}`;\n  if (!r) return `M${pair(x, y)}H${svgNumber(x1)}V${svgNumber(y1)}H${svgNumber(x)}Z`;\n  if (end === 'top')\n    return `M${pair(x, y1)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1)}Z`;\n  if (end === 'bottom')\n    return `M${pair(x1, y)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y)}Z`;\n  if (end === 'right')\n    return `M${pair(x, y)}H${svgNumber(x1 - r)}${corner(x1, y + r)}V${svgNumber(y1 - r)}${corner(x1 - r, y1)}H${svgNumber(x)}Z`;\n  return `M${pair(x1, y1)}H${svgNumber(x + r)}${corner(x, y1 - r)}V${svgNumber(y + r)}${corner(x + r, y)}H${svgNumber(x1)}Z`;\n}\n\n/** 环形的一段：角度从 12 点钟方向顺时针（弧度），圆心在原点 */\nexport interface ArcShape {\n  /** 内半径；0 是饼图的扇形 */\n  inner: number;\n  /** 外半径 */\n  outer: number;\n  /** 起始角 */\n  start: number;\n  /** 结束角 */\n  end: number;\n  /** 四个角的圆角半径，默认 0 */\n  corner?: number;\n}\n\n/** 半径 r、角度 angle（12 点钟方向顺时针）处的点 */\nexport function polarPoint(r: number, angle: number): [number, number] {\n  return [r * Math.sin(angle), -r * Math.cos(angle)];\n}\n\n/**\n * 环形一段的路径：两条径向的边、内外两段弧；corner 时四个角各是一段与边、弧都相切的小圆弧\n * （边是径向的，与圆正交，切点可以直接算出）。整圈时画成两段弧（没有边）\n */\nexport function arcPath({ inner, outer, start, end, corner = 0 }: ArcShape): string {\n  const sweep = end - start;\n  if (!(sweep > 0) || !(outer > 0)) return '';\n  const at = (r: number, angle: number) => pair(...polarPoint(r, angle));\n  const arc = (r: number, to: number, clockwise: boolean, span: number) =>\n    `A${pair(r, r)},0,${span > Math.PI ? 1 : 0},${clockwise ? 1 : 0},${at(r, to)}`;\n  if (sweep >= Math.PI * 2 - 1e-9) {\n    const outerRing = `M${at(outer, 0)}${arc(outer, Math.PI, true, Math.PI)}${arc(outer, 0, true, Math.PI)}Z`;\n    if (inner <= 0) return outerRing;\n    return `${outerRing}M${at(inner, 0)}${arc(inner, Math.PI, false, Math.PI)}${arc(inner, 0, false, Math.PI)}Z`;\n  }\n  // 圆角不超过环宽的一半，也不超过这一段在内（饼图是外）弧上长度的一半\n  const r = Math.max(\n    0,\n    Math.min(corner, (outer - inner) / 2, ((inner > 0 ? inner : outer) * sweep) / 2.2),\n  );\n  if (r < 0.5) {\n    const outerPart = `M${at(outer, start)}${arc(outer, end, true, sweep)}`;\n    if (inner <= 0) return `${outerPart}L0,0Z`;\n    return `${outerPart}L${at(inner, end)}${arc(inner, start, false, sweep)}Z`;\n  }\n  // 外角：小圆心在半径 outer - r 上，切边的点离圆心 √((outer-r)² - r²)，切弧的点偏开 asin(r / (outer - r))\n  const outerShift = Math.asin(r / (outer - r));\n  const outerEdge = Math.sqrt((outer - r) ** 2 - r * r);\n  const fillet = (to: string) => `A${pair(r, r)},0,0,1,${to}`;\n  let path =\n    `M${at(outerEdge, start)}${fillet(at(outer, start + outerShift))}` +\n    `${arc(outer, end - outerShift, true, sweep - outerShift * 2)}${fillet(at(outerEdge, end))}`;\n  if (inner <= 0) return `${path}L0,0Z`;\n  // 内角：小圆心在半径 inner + r 上\n  const innerShift = Math.asin(r / (inner + r));\n  const innerEdge = Math.sqrt((inner + r) ** 2 - r * r);\n  path +=\n    `L${at(innerEdge, end)}${fillet(at(inner, end - innerShift))}` +\n    `${arc(inner, start + innerShift, false, sweep - innerShift * 2)}${fillet(at(innerEdge, start))}Z`;\n  return path;\n}\n\n/** 弦图的一根弦：两端是圆上的两段弧（半径 radius，角度同 arcPath），中间经圆心的二次曲线相连（同 d3 的 ribbon） */\nexport function ribbonPath(\n  radius: number,\n  source: readonly [number, number],\n  target: readonly [number, number],\n): string {\n  const at = (angle: number) => pair(...polarPoint(radius, angle));\n  const arc = ([from, to]: readonly [number, number]) =>\n    `A${pair(radius, radius)},0,${to - from > Math.PI ? 1 : 0},1,${at(to)}`;\n  let path = `M${at(source[0])}${arc(source)}`;\n  if (source[0] !== target[0] || source[1] !== target[1])\n    path += `Q0,0,${at(target[0])}${arc(target)}`;\n  return `${path}Q0,0,${at(source[0])}Z`;\n}\n\n/** 横向的流向带（桑基图的连线）：从 (x0, y0) 到 (x1, y1) 的 S 形三次曲线，控制点在两端的中间 */\nexport function horizontalLinkPath(x0: number, y0: number, x1: number, y1: number): string {\n  const middle = (x0 + x1) / 2;\n  return `M${pair(x0, y0)}C${pair(middle, y0)},${pair(middle, y1)},${pair(x1, y1)}`;\n}\n"],"mappings":"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"}

package/dist/charts/stack.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 堆叠：各系列在同一类目上依次叠起，正值从 0 往上叠、负值从 0 往下叠（同 d3 的 stackOffsetDiverging）。
+ * 柱状图、面积图、组合图的堆叠与十字线圆点、标注圈的位置共用。
+ *
+ *   stackValues([[3, 5], [2, -1]])   // 系列 0：[[0,3], [0,5]]；系列 1：[[3,5], [-1,0]]
+ */
+/** 一个系列在一行上叠出的一段 */
+export interface StackSegment {
+    /** 下沿（负值是靠近 0 的一端以外的那端） */
+    low: number;
+    /** 上沿 */
+    high: number;
+    /** 原值；空值是 undefined，这时 low、high 都在当前的正向累计处（高度为 0，面积连续） */
+    value: number | undefined;
+}
+/** values[系列][行] → 每个系列在每一行的一段 */
+export declare function stackValues(values: readonly (readonly (number | undefined)[])[]): StackSegment[][];

package/dist/charts/stack.js

@@ -0,0 +1,35 @@
+//#region src/charts/stack.ts
+/** values[系列][行] → 每个系列在每一行的一段 */
+function stackValues(values) {
+	const rows = Math.max(0, ...values.map((list) => list.length));
+	const positive = Array.from({ length: rows }, () => 0);
+	const negative = Array.from({ length: rows }, () => 0);
+	return values.map((list) => Array.from({ length: rows }, (_, row) => {
+		const value = list[row];
+		if (value === void 0 || !Number.isFinite(value)) return {
+			low: positive[row],
+			high: positive[row],
+			value: void 0
+		};
+		if (value >= 0) {
+			const low = positive[row];
+			positive[row] = low + value;
+			return {
+				low,
+				high: low + value,
+				value
+			};
+		}
+		const high = negative[row];
+		negative[row] = high + value;
+		return {
+			low: high + value,
+			high,
+			value
+		};
+	}));
+}
+//#endregion
+export { stackValues };
+
+//# sourceMappingURL=stack.js.map

package/dist/charts/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/charts/stack.ts"],"sourcesContent":["/**\n * 堆叠：各系列在同一类目上依次叠起，正值从 0 往上叠、负值从 0 往下叠（同 d3 的 stackOffsetDiverging）。\n * 柱状图、面积图、组合图的堆叠与十字线圆点、标注圈的位置共用。\n *\n *   stackValues([[3, 5], [2, -1]])   // 系列 0：[[0,3], [0,5]]；系列 1：[[3,5], [-1,0]]\n */\n\n/** 一个系列在一行上叠出的一段 */\nexport interface StackSegment {\n  /** 下沿（负值是靠近 0 的一端以外的那端） */\n  low: number;\n  /** 上沿 */\n  high: number;\n  /** 原值；空值是 undefined，这时 low、high 都在当前的正向累计处（高度为 0，面积连续） */\n  value: number | undefined;\n}\n\n/** values[系列][行] → 每个系列在每一行的一段 */\nexport function stackValues(\n  values: readonly (readonly (number | undefined)[])[],\n): StackSegment[][] {\n  const rows = Math.max(0, ...values.map((list) => list.length));\n  const positive = Array.from({ length: rows }, () => 0);\n  const negative = Array.from({ length: rows }, () => 0);\n  return values.map((list) =>\n    Array.from({ length: rows }, (_, row) => {\n      const value = list[row];\n      if (value === undefined || !Number.isFinite(value))\n        return { low: positive[row]!, high: positive[row]!, value: undefined };\n      if (value >= 0) {\n        const low = positive[row]!;\n        positive[row] = low + value;\n        return { low, high: low + value, value };\n      }\n      const high = negative[row]!;\n      negative[row] = high + value;\n      return { low: high + value, high, value };\n    }),\n  );\n}\n"],"mappings":";;AAkBA,SAAgB,YACd,QACkB;CAClB,MAAM,OAAO,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,SAAS,KAAK,MAAM,CAAC;CAC7D,MAAM,WAAW,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CACrD,MAAM,WAAW,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CACrD,OAAO,OAAO,KAAK,SACjB,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,QAAQ;EACvC,MAAM,QAAQ,KAAK;EACnB,IAAI,UAAU,KAAA,KAAa,CAAC,OAAO,SAAS,KAAK,GAC/C,OAAO;GAAE,KAAK,SAAS;GAAO,MAAM,SAAS;GAAO,OAAO,KAAA;EAAU;EACvE,IAAI,SAAS,GAAG;GACd,MAAM,MAAM,SAAS;GACrB,SAAS,OAAO,MAAM;GACtB,OAAO;IAAE;IAAK,MAAM,MAAM;IAAO;GAAM;EACzC;EACA,MAAM,OAAO,SAAS;EACtB,SAAS,OAAO,OAAO;EACvB,OAAO;GAAE,KAAK,OAAO;GAAO;GAAM;EAAM;CAC1C,CAAC,CACH;AACF"}

package/dist/charts/text-size.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。
+ * 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，
+ * 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。
+ *
+ *   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72
+ *   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'
+ */
+/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */
+export declare function estimateTextWidth(text: string, fontSize?: number): number;
+/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */
+export declare function truncateText(text: string, maxWidth: number, fontSize?: number): string;

package/dist/charts/text-size.js

@@ -0,0 +1,32 @@
+//#region src/charts/text-size.ts
+/**
+* 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。
+* 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，
+* 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。
+*
+*   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72
+*   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'
+*/
+/** 按一个字号宽算的字：中日韩文字、全角标点、假名、谚文 */
+var WIDE = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;
+/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */
+function estimateTextWidth(text, fontSize = 12) {
+	let width = 0;
+	for (const char of text) width += WIDE.test(char) ? fontSize : fontSize * .6;
+	return width;
+}
+/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */
+function truncateText(text, maxWidth, fontSize = 12) {
+	if (estimateTextWidth(text, fontSize) <= maxWidth) return text;
+	const room = maxWidth - fontSize;
+	let result = "";
+	for (const char of text) {
+		if (estimateTextWidth(result + char, fontSize) > room) break;
+		result += char;
+	}
+	return `${result}…`;
+}
+//#endregion
+export { estimateTextWidth, truncateText };
+
+//# sourceMappingURL=text-size.js.map

package/dist/charts/text-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-size.js","names":[],"sources":["../../src/charts/text-size.ts"],"sourcesContent":["/**\n * 图表里文字的宽度估算：留坐标轴的边距、决定类目刻度隔几个写一个、地点名字的避让都要在画之前知道文字多宽。\n * 不去量 DOM（服务端渲染、还没挂上时也要算）：中日韩文字、全角符号按一个字号宽，其余按 0.6 个字号宽，\n * 宁宽勿窄（宽了只是多留一点空，窄了会叠在一起）。\n *\n *   estimateTextWidth('华东区 2026', 12)    // 3 × 12 + 5 × 7.2 = 72\n *   truncateText('很长很长的类目名', 60, 12)   // '很长很长…'\n */\n\n/** 按一个字号宽算的字：中日韩文字、全角标点、假名、谚文 */\nconst WIDE = /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦]/u;\n\n/** 估算文字的宽度（px）；fontSize 是字号（px），默认 12（主题的 xs） */\nexport function estimateTextWidth(text: string, fontSize = 12): number {\n  let width = 0;\n  for (const char of text) width += WIDE.test(char) ? fontSize : fontSize * 0.6;\n  return width;\n}\n\n/** 文字超过 maxWidth 时截短并加省略号；放得下时原样返回 */\nexport function truncateText(text: string, maxWidth: number, fontSize = 12): string {\n  if (estimateTextWidth(text, fontSize) <= maxWidth) return text;\n  const room = maxWidth - fontSize;\n  let result = '';\n  for (const char of text) {\n    if (estimateTextWidth(result + char, fontSize) > room) break;\n    result += char;\n  }\n  return `${result}…`;\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,OAAO;;AAGb,SAAgB,kBAAkB,MAAc,WAAW,IAAY;CACrE,IAAI,QAAQ;CACZ,KAAK,MAAM,QAAQ,MAAM,SAAS,KAAK,KAAK,IAAI,IAAI,WAAW,WAAW;CAC1E,OAAO;AACT;;AAGA,SAAgB,aAAa,MAAc,UAAkB,WAAW,IAAY;CAClF,IAAI,kBAAkB,MAAM,QAAQ,KAAK,UAAU,OAAO;CAC1D,MAAM,OAAO,WAAW;CACxB,IAAI,SAAS;CACb,KAAK,MAAM,QAAQ,MAAM;EACvB,IAAI,kBAAkB,SAAS,MAAM,QAAQ,IAAI,MAAM;EACvD,UAAU;CACZ;CACA,OAAO,GAAG,OAAO;AACnB"}

package/dist/display/VirtualList.d.ts

@@ -37,7 +37,7 @@ export interface VirtualListProps<T> extends PartProps<'div', VirtualListManaged
     horizontal?: boolean;
     /** 没有数据时显示的内容 */
     empty?: VNodeChild;
-    /** 加载中：没有数据时显示骨架行，已有数据时顶部显示进度条 */
+    /** 加载中：没有数据时铺几行骨架，已有数据（加载更多）时骨架接在末尾 */
     loading?: boolean;
     /** 加载中占位行的部件属性 */
     propsSkeleton?: SkeletonShapeProps;
@@ -62,7 +62,6 @@ export declare const virtualListStyles: Readonly<{
     itemHorizontal: css.CompiledStyles;
     itemVertical: css.CompiledStyles;
     list: css.CompiledStyles;
-    progress: css.CompiledStyles;
     root: css.CompiledStyles;
     skeleton: css.CompiledStyles;
     skeletonRow: css.CompiledStyles;

package/dist/display/VirtualList.js

@@ -1,11 +1,9 @@
-import { useLang } from "../config/context.js";
 import { elementProps, mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { focusRingStyles } from "../utils/style/styles.js";
 import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
 import { ScrollArea } from "../layout/ScrollArea.js";
 import "../utils/style/shimmer.js";
 import { Skeleton } from "../feedback/Skeleton.js";
-import { Progress } from "../feedback/Progress.js";
 import { useVirtualizer } from "../utils/virtual/use-virtualizer.js";
 import { Fragment, createVNode, isVNode, shallowRef, watch } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
@@ -19,8 +17,9 @@ import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-/** 加载中显示几行骨架 */
+/** 加载中显示几行骨架：没有数据时铺几行，加载更多时接在末尾几行 */
 var SKELETON_ROWS = 5;
+var MORE_SKELETON_ROWS = 2;
 /** VirtualList 的样式：root、container、list、item、itemVertical、itemHorizontal 等 */
 var virtualListStyles = css.create({
 	root: { overflowAnchor: "none" },
@@ -37,12 +36,6 @@ var virtualListStyles = css.create({
 	},
 	itemVertical: { width: "_full" },
 	itemHorizontal: { height: "_full" },
-	progress: {
-		position: "sticky",
-		top: 0,
-		zIndex: 1,
-		height: 0
-	},
 	skeletonRow: { paddingBlock: "_xs" },
 	skeleton: {
 		display: "block",
@@ -77,10 +70,16 @@ var VirtualList = /*#__PURE__*/ _component((_props, _ctx) => {
 	const propsList = readonlyProp(_props, "propsList");
 	const propsItem = readonlyProp(_props, "propsItem");
 	const rest = restProps(_props, _ctx, false);
-	const lang = useLang();
 	const indicator = useDelayedLoading(() => loading.value);
 	let root = shallowRef(null);
 	let list = shallowRef(null);
+	const skeletonRows = (count) => Array.from({ length: count }, (_, index) => createVNode("div", mergeJsxProps({
+		"key": `skeleton-${index}`,
+		"aria-hidden": "true"
+	}, css.attrs(virtualListStyles.skeletonRow)), [createVNode(Skeleton, mergePartProps({
+		sx: [virtualListStyles.skeleton, virtualListSizeStyles.skeleton(typeof estimateSize.value === "number" ? estimateSize.value : 40)],
+		delay: index * 120
+	}, propsSkeleton.value), null)]));
 	const virtual = useVirtualizer(() => {
 		const data = items.value;
 		const estimate = estimateSize.value;
@@ -112,10 +111,7 @@ var VirtualList = /*#__PURE__*/ _component((_props, _ctx) => {
 			"aria-busy": loading.value || void 0,
 			tabindex: isContainer ? 0 : void 0
 		});
-		const content = createVNode(Fragment, null, [indicator.value && hasItems && createVNode("div", mergeJsxProps({ "aria-hidden": "true" }, css.attrs(virtualListStyles.progress)), [createVNode(Progress, {
-			"size": "xs",
-			"aria-label": lang.loading
-		}, null)]), hasItems ? createVNode("div", mergeAttrs({ sx: virtualListStyles.list }, propsList.value, {
+		const content = createVNode(Fragment, null, [hasItems ? createVNode("div", mergeAttrs({ sx: virtualListStyles.list }, propsList.value, {
 			sx: horizontal.value ? css.bind(virtualListSizeStyles.width, () => [virtual.total], true) : css.bind(virtualListSizeStyles.height, () => [virtual.total], true),
 			ref: list,
 			role: "presentation"
@@ -129,13 +125,7 @@ var VirtualList = /*#__PURE__*/ _component((_props, _ctx) => {
 				"aria-setsize": items.value.length,
 				"aria-posinset": item.index + 1
 			}), { "data-index": item.index }), [children.value(data, item.index)]);
-		})]) : loading.value ? indicator.value && Array.from({ length: SKELETON_ROWS }, (_, index) => createVNode("div", mergeJsxProps({
-			"key": index,
-			"aria-hidden": "true"
-		}, css.attrs(virtualListStyles.skeletonRow)), [createVNode(Skeleton, mergePartProps({
-			sx: [virtualListStyles.skeleton, css.bind(virtualListSizeStyles.skeleton, () => [typeof estimateSize.value === "number" ? estimateSize.value : 40], true)],
-			delay: index * 120
-		}, propsSkeleton.value), null)])) : empty.value]);
+		})]) : loading.value ? indicator.value && skeletonRows(SKELETON_ROWS) : empty.value, hasItems && indicator.value && skeletonRows(MORE_SKELETON_ROWS)]);
 		return isContainer ? createVNode(ScrollArea, {
 			"axis": horizontal.value ? "x" : "y",
 			"focusable": false,

package/dist/display/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/display/VirtualList.tsx"],"sourcesContent":["/**\n * 虚拟列表：只渲染可见范围内的项，上万条数据也流畅。行高可以不固定，渲染后自动测量（COMPONENTS.md §10.7）。\n *\n *   <VirtualList items={users} getKey={(user) => user.id} estimateSize={48} sx={styles.list}>\n *     {(user) => <UserRow user={user} />}\n *   </VirtualList>\n *\n * 默认组件自己是滚动容器，高度由使用方给（sx、class 或 style）；scroll=\"window\" 时随页面滚动。\n * 读屏：role=\"list\"，每项带 aria-setsize / aria-posinset，未渲染的项也算在总数里；没有数据时是 role=\"group\"（空状态、骨架不是列表项）。\n * loading：没有数据时显示骨架行（按 estimateSize 的高度），已有数据（刷新、加载更多）时顶部显示进度条；带 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { useLang } from '../config/context';\nimport { Progress } from '../feedback/Progress';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from '../feedback/Skeleton';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport {\n  elementProps,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useVirtualizer } from '../utils/virtual/use-virtualizer';\nimport type { VirtualScrollOptions, VisibleRange } from '../utils/virtual/virtualizer';\n\n/** 跟着谁滚动 */\nexport interface VirtualListScrolls {\n  /** 组件自己是滚动容器（默认）：要给它高度（横向时给宽度） */\n  container: unknown;\n  /** 随页面（window）滚动：列表按总高度撑开，放在页面的普通流里 */\n  window: unknown;\n}\n\n/** handle 拿到的方法 */\nexport interface VirtualListHandle {\n  /** 滚动到第 index 项；align 默认 auto（已经完整可见就不动） */\n  scrollToIndex: (index: number, options?: VirtualScrollOptions) => void;\n  /** 滚动到相对列表开头的位置（px） */\n  scrollToOffset: (offset: number, options?: VirtualScrollOptions) => void;\n}\n\n/** 受管属性：角色与可聚焦由组件决定 */\nexport type VirtualListManaged = 'role' | 'tabindex';\n\n/** 未声明的属性落到外层元素（滚动容器）上；aria-label 写在这里就是列表的名称 */\nexport interface VirtualListProps<T> extends PartProps<'div', VirtualListManaged> {\n  /** 数据 */\n  items: readonly T[];\n  /** 渲染一项：`{(item, index) => …}` */\n  children: (item: T, index: number) => VNodeChild;\n  /** 每项的 key，默认用序号；数据会重排、增删时一定要给，测量结果与组件状态才对得上 */\n  getKey?: (item: T, index: number) => PropertyKey;\n  /** 每项的估计大小（px），数字或按项计算；渲染后以实际大小为准，默认 40 */\n  estimateSize?: number | ((item: T, index: number) => number);\n  /** 可见范围前后各多渲染几项，默认 4 */\n  overscan?: number;\n  /** 跟着谁滚动，默认 container */\n  scroll?: keyof VirtualListScrolls;\n  /** 横向排列与滚动 */\n  horizontal?: boolean;\n  /** 没有数据时显示的内容 */\n  empty?: VNodeChild;\n  /** 加载中：没有数据时显示骨架行，已有数据时顶部显示进度条 */\n  loading?: boolean;\n  /** 加载中占位行的部件属性 */\n  propsSkeleton?: SkeletonShapeProps;\n  /** 拿到滚动方法：`handle={(list) => (listHandle = list)}` */\n  handle?: (handle: VirtualListHandle) => void;\n  /** 可见范围变化（不含 overscan）：接近末尾时加载更多 */\n  onRangeChange?: (range: VisibleRange) => void;\n  /** 列表层（撑开总高度、role=\"list\" 的项都在它里面）的部件属性 */\n  propsList?: PartProps<'div', 'role'>;\n  /**\n   * 每一项外层（role=\"listitem\"）的部件属性；可以按项计算：`(item, index) => ({ class: … })`。\n   * 位置、序号与无障碍属性由组件管理\n   */\n  propsItem?: ItemProps | ((item: T, index: number) => ItemProps);\n}\n\n/** 项外层可以定制的属性 */\ntype ItemProps = PartProps<'div', 'role' | 'aria-setsize' | 'aria-posinset'>;\n\n/** 加载中显示几行骨架 */\nconst SKELETON_ROWS = 5;\n\n/** VirtualList 的样式：root、container、list、item、itemVertical、itemHorizontal 等 */\nexport const virtualListStyles = css.create({\n  // 自己调整滚动位置（见 virtualizer.ts），不要浏览器再按锚点调整一次\n  root: { overflowAnchor: 'none' },\n  // 容器模式：列表元素是 ScrollArea 的视口（浮层滚动条）\n  container: { overscrollBehavior: 'contain' },\n  list: { position: 'relative', overflowAnchor: 'none' },\n  item: { position: 'absolute', top: 0, left: 0, overflowAnchor: 'none' },\n  itemVertical: { width: '_full' },\n  itemHorizontal: { height: '_full' },\n  // 刷新中的进度条贴在可见区域顶部\n  progress: { position: 'sticky', top: 0, zIndex: 1, height: 0 },\n  skeletonRow: { paddingBlock: '_xs' },\n  skeleton: { display: 'block', width: '_full' },\n});\n\n// 总大小与位置是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** VirtualList 的样式：height、width、y、x、skeleton */\nexport const virtualListSizeStyles = css.create({\n  height: (px: number) => ({ height: px }),\n  width: (px: number) => ({ width: px, height: '_full' }),\n  y: (px: number) => ({ transform: `translateY(${px}px)` }),\n  x: (px: number) => ({ transform: `translateX(${px}px)` }),\n  // 骨架行比一项略矮：上下留出间隔\n  skeleton: (px: number) => ({ height: Math.max(8, px - 8) }),\n});\n\n/** 虚拟列表：只渲染可见范围内的项，行高渲染后自动测量 */\nexport const VirtualList = _component(\n  <T,>({\n    items,\n    children,\n    getKey,\n    estimateSize = 40,\n    overscan = 4,\n    scroll = 'container',\n    horizontal = false,\n    empty,\n    loading = false,\n    propsSkeleton,\n    handle,\n    onRangeChange,\n    propsList,\n    propsItem,\n    ...rest\n  }: VirtualListProps<T>) => {\n    const lang = useLang();\n    // 骨架、进度条防闪烁；aria-busy 按真实的 loading\n    const indicator = useDelayedLoading(() => loading);\n    let root = _state.raw<HTMLElement | null>(null);\n    let list = _state.raw<HTMLElement | null>(null);\n    const virtual = useVirtualizer(() => {\n      const data = items;\n      const estimate = estimateSize;\n      const keyOf = getKey;\n      return {\n        count: data.length,\n        overscan,\n        horizontal,\n        scrollElement: scroll === 'window' ? window : root,\n        list,\n        estimateSize: (index: number) =>\n          typeof estimate === 'number' ? estimate : estimate(data[index]!, index),\n        getItemKey: keyOf ? (index: number) => keyOf(data[index]!, index) : undefined,\n        onRangeChange,\n      };\n    });\n\n    // 挂载之后才交出 handle：使用方在回调里立即滚动（恢复上次的位置）也能生效。\n    // handle 不放进监听源：父级写的箭头函数每次渲染都是新的，不该因此重新交出\n    const api: VirtualListHandle = {\n      scrollToIndex: virtual.scrollToIndex,\n      scrollToOffset: virtual.scrollToOffset,\n    };\n    watch(\n      () => root,\n      (element) => {\n        if (element) handle?.(api);\n      },\n      { flush: 'post' },\n    );\n\n    return () => {\n      const isContainer = scroll === 'container';\n      const hasItems = items.length > 0;\n      const props = mergeProps<'div'>(\n        {\n          sx: [\n            virtualListStyles.root,\n            isContainer && [virtualListStyles.container, focusRingStyles.visible],\n          ],\n        },\n        rest,\n        {\n          ref: _toRef(root),\n          // 没有数据（空状态、首次加载的骨架）时不是列表；仍给 group 角色，写在外层的 aria-label 才有效\n          role: hasItems ? 'list' : 'group',\n          'aria-busy': loading || undefined,\n          // 容器模式下可以用键盘滚动\n          tabindex: isContainer ? 0 : undefined,\n        },\n      );\n      const content = (\n        <>\n          {indicator.value && hasItems && (\n            <div aria-hidden=\"true\" {...css.attrs(virtualListStyles.progress)}>\n              <Progress size=\"xs\" aria-label={lang.loading} />\n            </div>\n          )}\n          {hasItems ? (\n            <div\n              {...mergeAttrs<'div'>({ sx: virtualListStyles.list }, propsList, {\n                sx: horizontal\n                  ? virtualListSizeStyles.width(virtual.total)\n                  : virtualListSizeStyles.height(virtual.total),\n                ref: _toRef(list),\n                role: 'presentation',\n              })}\n            >\n              {virtual.items.map((item) => {\n                const data = items[item.index]!;\n                const own =\n                  typeof propsItem === 'function' ? propsItem(data, item.index) : propsItem;\n                return (\n                  <div\n                    key={item.key}\n                    {...mergeAttrs<'div'>(\n                      {\n                        sx: [\n                          virtualListStyles.item,\n                          horizontal\n                            ? virtualListStyles.itemHorizontal\n                            : virtualListStyles.itemVertical,\n                        ],\n                      },\n                      own,\n                      {\n                        sx: horizontal\n                          ? virtualListSizeStyles.x(item.start)\n                          : virtualListSizeStyles.y(item.start),\n                        ref: virtual.measure,\n                        role: 'listitem',\n                        'aria-setsize': items.length,\n                        'aria-posinset': item.index + 1,\n                      },\n                    )}\n                    data-index={item.index}\n                  >\n                    {children(data, item.index)}\n                  </div>\n                );\n              })}\n            </div>\n          ) : loading ? (\n            indicator.value &&\n            Array.from({ length: SKELETON_ROWS }, (_, index) => (\n              <div key={index} aria-hidden=\"true\" {...css.attrs(virtualListStyles.skeletonRow)}>\n                <Skeleton\n                  {...mergePartProps<SkeletonProps>(\n                    {\n                      sx: [\n                        virtualListStyles.skeleton,\n                        virtualListSizeStyles.skeleton(\n                          typeof estimateSize === 'number' ? estimateSize : 40,\n                        ),\n                      ],\n                      delay: index * SHIMMER_STAGGER,\n                    },\n                    propsSkeleton,\n                  )}\n                />\n              </div>\n            ))\n          ) : (\n            empty\n          )}\n        </>\n      );\n      // 容器模式：列表元素就是 ScrollArea 的视口，滚动条是浮层的；跟着页面滚动时就是普通的 div\n      return isContainer ? (\n        <ScrollArea\n          axis={horizontal ? 'x' : 'y'}\n          focusable={false}\n          propsViewport={props as PartProps<'div'>}\n        >\n          {content}\n        </ScrollArea>\n      ) : (\n        <div {...elementProps(props)}>{content}</div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"VirtualList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/display/VirtualList.tsx"],"sourcesContent":["/**\n * 虚拟列表：只渲染可见范围内的项，上万条数据也流畅。行高可以不固定，渲染后自动测量（COMPONENTS.md §10.7）。\n *\n *   <VirtualList items={users} getKey={(user) => user.id} estimateSize={48} sx={styles.list}>\n *     {(user) => <UserRow user={user} />}\n *   </VirtualList>\n *\n * 默认组件自己是滚动容器，高度由使用方给（sx、class 或 style）；scroll=\"window\" 时随页面滚动。\n * 读屏：role=\"list\"，每项带 aria-setsize / aria-posinset，未渲染的项也算在总数里；没有数据时是 role=\"group\"（空状态、骨架不是列表项）。\n * loading：只用骨架行（按 estimateSize 的高度）：没有数据时铺满，已有数据（加载更多）时接在列表末尾，不另加进度条；带 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch, type VNodeChild } from 'vue';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from '../feedback/Skeleton';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport {\n  elementProps,\n  mergeAttrs,\n  mergePartProps,\n  mergeProps,\n  type PartProps,\n} from '../utils/props';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useVirtualizer } from '../utils/virtual/use-virtualizer';\nimport type { VirtualScrollOptions, VisibleRange } from '../utils/virtual/virtualizer';\n\n/** 跟着谁滚动 */\nexport interface VirtualListScrolls {\n  /** 组件自己是滚动容器（默认）：要给它高度（横向时给宽度） */\n  container: unknown;\n  /** 随页面（window）滚动：列表按总高度撑开，放在页面的普通流里 */\n  window: unknown;\n}\n\n/** handle 拿到的方法 */\nexport interface VirtualListHandle {\n  /** 滚动到第 index 项；align 默认 auto（已经完整可见就不动） */\n  scrollToIndex: (index: number, options?: VirtualScrollOptions) => void;\n  /** 滚动到相对列表开头的位置（px） */\n  scrollToOffset: (offset: number, options?: VirtualScrollOptions) => void;\n}\n\n/** 受管属性：角色与可聚焦由组件决定 */\nexport type VirtualListManaged = 'role' | 'tabindex';\n\n/** 未声明的属性落到外层元素（滚动容器）上；aria-label 写在这里就是列表的名称 */\nexport interface VirtualListProps<T> extends PartProps<'div', VirtualListManaged> {\n  /** 数据 */\n  items: readonly T[];\n  /** 渲染一项：`{(item, index) => …}` */\n  children: (item: T, index: number) => VNodeChild;\n  /** 每项的 key，默认用序号；数据会重排、增删时一定要给，测量结果与组件状态才对得上 */\n  getKey?: (item: T, index: number) => PropertyKey;\n  /** 每项的估计大小（px），数字或按项计算；渲染后以实际大小为准，默认 40 */\n  estimateSize?: number | ((item: T, index: number) => number);\n  /** 可见范围前后各多渲染几项，默认 4 */\n  overscan?: number;\n  /** 跟着谁滚动，默认 container */\n  scroll?: keyof VirtualListScrolls;\n  /** 横向排列与滚动 */\n  horizontal?: boolean;\n  /** 没有数据时显示的内容 */\n  empty?: VNodeChild;\n  /** 加载中：没有数据时铺几行骨架，已有数据（加载更多）时骨架接在末尾 */\n  loading?: boolean;\n  /** 加载中占位行的部件属性 */\n  propsSkeleton?: SkeletonShapeProps;\n  /** 拿到滚动方法：`handle={(list) => (listHandle = list)}` */\n  handle?: (handle: VirtualListHandle) => void;\n  /** 可见范围变化（不含 overscan）：接近末尾时加载更多 */\n  onRangeChange?: (range: VisibleRange) => void;\n  /** 列表层（撑开总高度、role=\"list\" 的项都在它里面）的部件属性 */\n  propsList?: PartProps<'div', 'role'>;\n  /**\n   * 每一项外层（role=\"listitem\"）的部件属性；可以按项计算：`(item, index) => ({ class: … })`。\n   * 位置、序号与无障碍属性由组件管理\n   */\n  propsItem?: ItemProps | ((item: T, index: number) => ItemProps);\n}\n\n/** 项外层可以定制的属性 */\ntype ItemProps = PartProps<'div', 'role' | 'aria-setsize' | 'aria-posinset'>;\n\n/** 加载中显示几行骨架：没有数据时铺几行，加载更多时接在末尾几行 */\nconst SKELETON_ROWS = 5;\nconst MORE_SKELETON_ROWS = 2;\n\n/** VirtualList 的样式：root、container、list、item、itemVertical、itemHorizontal 等 */\nexport const virtualListStyles = css.create({\n  // 自己调整滚动位置（见 virtualizer.ts），不要浏览器再按锚点调整一次\n  root: { overflowAnchor: 'none' },\n  // 容器模式：列表元素是 ScrollArea 的视口（浮层滚动条）\n  container: { overscrollBehavior: 'contain' },\n  list: { position: 'relative', overflowAnchor: 'none' },\n  item: { position: 'absolute', top: 0, left: 0, overflowAnchor: 'none' },\n  itemVertical: { width: '_full' },\n  itemHorizontal: { height: '_full' },\n  skeletonRow: { paddingBlock: '_xs' },\n  skeleton: { display: 'block', width: '_full' },\n});\n\n// 总大小与位置是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** VirtualList 的样式：height、width、y、x、skeleton */\nexport const virtualListSizeStyles = css.create({\n  height: (px: number) => ({ height: px }),\n  width: (px: number) => ({ width: px, height: '_full' }),\n  y: (px: number) => ({ transform: `translateY(${px}px)` }),\n  x: (px: number) => ({ transform: `translateX(${px}px)` }),\n  // 骨架行比一项略矮：上下留出间隔\n  skeleton: (px: number) => ({ height: Math.max(8, px - 8) }),\n});\n\n/** 虚拟列表：只渲染可见范围内的项，行高渲染后自动测量 */\nexport const VirtualList = _component(\n  <T,>({\n    items,\n    children,\n    getKey,\n    estimateSize = 40,\n    overscan = 4,\n    scroll = 'container',\n    horizontal = false,\n    empty,\n    loading = false,\n    propsSkeleton,\n    handle,\n    onRangeChange,\n    propsList,\n    propsItem,\n    ...rest\n  }: VirtualListProps<T>) => {\n    // 骨架防闪烁；aria-busy 按真实的 loading\n    const indicator = useDelayedLoading(() => loading);\n    let root = _state.raw<HTMLElement | null>(null);\n    let list = _state.raw<HTMLElement | null>(null);\n    const skeletonRows = (count: number) =>\n      Array.from({ length: count }, (_, index) => (\n        <div\n          key={`skeleton-${index}`}\n          aria-hidden=\"true\"\n          {...css.attrs(virtualListStyles.skeletonRow)}\n        >\n          <Skeleton\n            {...mergePartProps<SkeletonProps>(\n              {\n                sx: [\n                  virtualListStyles.skeleton,\n                  virtualListSizeStyles.skeleton(\n                    typeof estimateSize === 'number' ? estimateSize : 40,\n                  ),\n                ],\n                delay: index * SHIMMER_STAGGER,\n              },\n              propsSkeleton,\n            )}\n          />\n        </div>\n      ));\n    const virtual = useVirtualizer(() => {\n      const data = items;\n      const estimate = estimateSize;\n      const keyOf = getKey;\n      return {\n        count: data.length,\n        overscan,\n        horizontal,\n        scrollElement: scroll === 'window' ? window : root,\n        list,\n        estimateSize: (index: number) =>\n          typeof estimate === 'number' ? estimate : estimate(data[index]!, index),\n        getItemKey: keyOf ? (index: number) => keyOf(data[index]!, index) : undefined,\n        onRangeChange,\n      };\n    });\n\n    // 挂载之后才交出 handle：使用方在回调里立即滚动（恢复上次的位置）也能生效。\n    // handle 不放进监听源：父级写的箭头函数每次渲染都是新的，不该因此重新交出\n    const api: VirtualListHandle = {\n      scrollToIndex: virtual.scrollToIndex,\n      scrollToOffset: virtual.scrollToOffset,\n    };\n    watch(\n      () => root,\n      (element) => {\n        if (element) handle?.(api);\n      },\n      { flush: 'post' },\n    );\n\n    return () => {\n      const isContainer = scroll === 'container';\n      const hasItems = items.length > 0;\n      const props = mergeProps<'div'>(\n        {\n          sx: [\n            virtualListStyles.root,\n            isContainer && [virtualListStyles.container, focusRingStyles.visible],\n          ],\n        },\n        rest,\n        {\n          ref: _toRef(root),\n          // 没有数据（空状态、首次加载的骨架）时不是列表；仍给 group 角色，写在外层的 aria-label 才有效\n          role: hasItems ? 'list' : 'group',\n          'aria-busy': loading || undefined,\n          // 容器模式下可以用键盘滚动\n          tabindex: isContainer ? 0 : undefined,\n        },\n      );\n      const content = (\n        <>\n          {hasItems ? (\n            <div\n              {...mergeAttrs<'div'>({ sx: virtualListStyles.list }, propsList, {\n                sx: horizontal\n                  ? virtualListSizeStyles.width(virtual.total)\n                  : virtualListSizeStyles.height(virtual.total),\n                ref: _toRef(list),\n                role: 'presentation',\n              })}\n            >\n              {virtual.items.map((item) => {\n                const data = items[item.index]!;\n                const own =\n                  typeof propsItem === 'function' ? propsItem(data, item.index) : propsItem;\n                return (\n                  <div\n                    key={item.key}\n                    {...mergeAttrs<'div'>(\n                      {\n                        sx: [\n                          virtualListStyles.item,\n                          horizontal\n                            ? virtualListStyles.itemHorizontal\n                            : virtualListStyles.itemVertical,\n                        ],\n                      },\n                      own,\n                      {\n                        sx: horizontal\n                          ? virtualListSizeStyles.x(item.start)\n                          : virtualListSizeStyles.y(item.start),\n                        ref: virtual.measure,\n                        role: 'listitem',\n                        'aria-setsize': items.length,\n                        'aria-posinset': item.index + 1,\n                      },\n                    )}\n                    data-index={item.index}\n                  >\n                    {children(data, item.index)}\n                  </div>\n                );\n              })}\n            </div>\n          ) : loading ? (\n            indicator.value && skeletonRows(SKELETON_ROWS)\n          ) : (\n            empty\n          )}\n          {/* 加载更多：骨架接在已有的项后面（列表元素的高度就是全部项的总高度） */}\n          {hasItems && indicator.value && skeletonRows(MORE_SKELETON_ROWS)}\n        </>\n      );\n      // 容器模式：列表元素就是 ScrollArea 的视口，滚动条是浮层的；跟着页面滚动时就是普通的 div\n      return isContainer ? (\n        <ScrollArea\n          axis={horizontal ? 'x' : 'y'}\n          focusable={false}\n          propsViewport={props as PartProps<'div'>}\n        >\n          {content}\n        </ScrollArea>\n      ) : (\n        <div {...elementProps(props)}>{content}</div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Combobox.d.ts

@@ -34,7 +34,7 @@ export interface ComboboxBaseProps<T> extends PartProps<'input', ComboboxManaged
     showToggle?: boolean;
     /** 没有可选的项时不弹出列表（不显示“没有匹配的选项”）：只当带建议的输入框用时（Autocomplete） */
     hideEmpty?: boolean;
-    /** 正在取选项（异步搜索）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */
+    /** 正在取选项（异步搜索）：列表里换成骨架行 */
     loading?: boolean;
     /** 弹出位置，默认 bottom-start */
     placement?: FloatingPlacement;