@astryx-vue/charts 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2667 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onScopeDispose, openBlock, provide, ref, render, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect, watchPostEffect, withCtx } from "vue";
+import { HStack, Text, VStack, VisuallyHidden, characterCount, truncateCharacters, useLayer, useLocale, useTranslator } from "@astryx-vue/core";
+import "../styles/chart-swatch.css";
+import "../styles/chart-legend.css";
+import "../styles/chart-tooltip.css";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { area as area$1, curveLinear, curveMonotoneX, curveNatural, curveStep, line as line$1, stack, stackOffsetNone, stackOrderNone } from "d3-shape";
+import "../styles/chart.css";
+import "../styles/chart-axis.css";
+import "../styles/chart-grid.css";
+//#region src/color.ts
+const NAMED_COLORS = {
+	transparent: {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	},
+	black: {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	},
+	white: {
+		r: 255,
+		g: 255,
+		b: 255,
+		a: 1
+	}
+};
+function clamp$1(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+/** 把简写 hex 的每个字符重复一遍：`rgb` → `rrggbb`。 */
+function expandShorthand(body) {
+	return body.split("").map((c) => c + c).join("");
+}
+/**
+* 解析 hex 颜色。支持 `#rgb`、`#rgba`、`#rrggbb`、`#rrggbbaa`，`#` 可有可无。
+* 其它输入返回 null。
+*/
+function parseHex(hex) {
+	if (typeof hex !== "string") return null;
+	const body = hex.trim().replace(/^#/, "");
+	const normalized = body.length === 3 || body.length === 4 ? expandShorthand(body) : body;
+	if (normalized.length !== 6 && normalized.length !== 8 || !/^[0-9a-f]+$/i.test(normalized)) return null;
+	return {
+		r: Number.parseInt(normalized.slice(0, 2), 16),
+		g: Number.parseInt(normalized.slice(2, 4), 16),
+		b: Number.parseInt(normalized.slice(4, 6), 16),
+		a: normalized.length === 8 ? Number.parseInt(normalized.slice(6, 8), 16) / 255 : 1
+	};
+}
+/**
+* 解析 `rgb()` / `rgba()`。通道可以用逗号或空格分隔，可以用 `/ alpha`，
+* 也可以写百分比。通道和透明度都会夹到合法范围。
+*/
+function parseRgb(value) {
+	const open = value.indexOf("(");
+	if (open === -1 || !value.trim().endsWith(")")) return null;
+	const parts = value.slice(open + 1, value.lastIndexOf(")")).replace(/\//g, " ").split(/[\s,]+/).map((p) => p.trim()).filter(Boolean);
+	if (parts.length < 3) return null;
+	function channel(p) {
+		return clamp$1(p.endsWith("%") ? Number.parseFloat(p) / 100 * 255 : Number.parseFloat(p), 0, 255);
+	}
+	const r = channel(parts[0]);
+	const g = channel(parts[1]);
+	const b = channel(parts[2]);
+	if ([
+		r,
+		g,
+		b
+	].some(Number.isNaN)) return null;
+	let a = 1;
+	if (parts.length >= 4) {
+		const raw = parts[3];
+		a = raw.endsWith("%") ? Number.parseFloat(raw) / 100 : Number.parseFloat(raw);
+		if (Number.isNaN(a)) return null;
+		a = clamp$1(a, 0, 1);
+	}
+	return {
+		r,
+		g,
+		b,
+		a
+	};
+}
+/**
+* 解析一个具体的 CSS 颜色字符串：hex、`rgb()` / `rgba()`，以及 token 表达式里
+* 用到的几个颜色名。解析不了返回 null。
+*/
+function parseColor(value) {
+	const trimmed = value.trim();
+	const named = NAMED_COLORS[trimmed.toLowerCase()];
+	if (named) return { ...named };
+	if (trimmed.startsWith("#")) return parseHex(trimmed);
+	if (/^rgba?\(/i.test(trimmed)) return parseRgb(trimmed);
+	return null;
+}
+/** 把 0-255 的三个通道拼成大写 `#RRGGBB`。 */
+function formatHex(r, g, b) {
+	function channel(c) {
+		return clamp$1(Math.round(c), 0, 255).toString(16).padStart(2, "0").toUpperCase();
+	}
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+/** 完全不透明时输出 `#RRGGBB`，否则输出 `rgba(r, g, b, a)`。 */
+function formatColor({ r, g, b, a }) {
+	if (a >= 1) return formatHex(r, g, b);
+	const round = (n) => clamp$1(Math.round(n), 0, 255);
+	return `rgba(${round(r)}, ${round(g)}, ${round(b)}, ${Number.parseFloat(a.toFixed(4))})`;
+}
+/** 解析不了的颜色（null）和非有限通道用这个中性灰兜底，让 GPU 不会拿到 NaN。 */
+const GL_FALLBACK = [
+	.5,
+	.5,
+	.5
+];
+/**
+* 把解析后的颜色转成 0-1 的 `[r, g, b]` 浮点数，给 WebGL 的 uniform 和顶点属性用。
+*
+* 参数是解析后的结果，所以每个调用方都走同一条校验路径：`toGLFloats(parseHex(color))`。
+* 传 null 或通道非有限时返回中性灰。透明度故意丢掉，GL 那边自己混合。
+*/
+function toGLFloats(color) {
+	if (color === null || ![
+		color.r,
+		color.g,
+		color.b
+	].every(Number.isFinite)) return GL_FALLBACK;
+	const channel = (c) => clamp$1(c, 0, 255) / 255;
+	return [
+		channel(color.r),
+		channel(color.g),
+		channel(color.b)
+	];
+}
+//#endregion
+//#region src/ChartSwatch/ChartSwatch.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartSwatch",
+	__name: "ChartSwatch",
+	props: {
+		color: {},
+		variant: { default: "square" }
+	},
+	setup(__props) {
+		const props = __props;
+		const classes = computed(() => ["astryx-chart-swatch", `astryx-chart-swatch--${props.variant}`]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" 颜色是运行时值，只能走内联样式；形状和尺寸在样式表里。 "), createElementVNode("div", {
+				"aria-hidden": "true",
+				class: normalizeClass(classes.value),
+				style: normalizeStyle({ backgroundColor: __props.color })
+			}, null, 6)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/ChartSwatch/swatch.ts
+/**
+* 标记类型对应的色块形态：柱状是方块，其余（折线、散点、面积……）都是一小段线。
+*
+* 图例和提示框都走这一条规则，同一个系列在两处长得一样。
+*/
+function swatchVariantForType(type) {
+	return type === "bar" ? "square" : "line";
+}
+//#endregion
+//#region src/messages.ts
+/** 和上游 `locales/en.json`、`locales/zh-CN.json` 里的文案一字不差。 */
+const FALLBACKS = {
+	"@astryx.chart.label": {
+		"en": "Chart",
+		"zh-CN": "图表"
+	},
+	"@astryx.chart.labelWithSeries": {
+		"en": "Chart of {series} by {xKey}",
+		"zh-CN": "按 {xKey} 显示 {series} 的图表"
+	},
+	"@astryx.chart.dataTableCaption": {
+		"en": "{label} data",
+		"zh-CN": "{label}的数据"
+	},
+	"@astryx.chartLegend.label": {
+		"en": "Chart legend",
+		"zh-CN": "图表图例"
+	}
+};
+/** 把 `{name}` 占位符换成实际值，认不出的占位符原样留着。 */
+function fillPlaceholders(template, values) {
+	return template.replace(/\{(\w+)\}/g, (whole, name) => {
+		const value = values?.[name];
+		return value === void 0 ? whole : String(value);
+	});
+}
+/** 取图表文案的翻译函数，优先用 core 的译文，没有就用包内的兜底。 */
+function useChartMessages() {
+	const { t } = useTranslator();
+	const { locale } = useLocale();
+	return (key, values) => {
+		const translated = t(key, values);
+		if (translated !== key) return translated;
+		const table = FALLBACKS[key];
+		return fillPlaceholders(table[locale.value === "zh-CN" ? "zh-CN" : "en"], values);
+	};
+}
+//#endregion
+//#region src/ChartLegend/ChartLegend.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartLegend",
+	__name: "ChartLegend",
+	props: {
+		items: { default: () => [] },
+		position: { default: "bottom" },
+		alignment: { default: "start" }
+	},
+	setup(__props) {
+		const props = __props;
+		const t = useChartMessages();
+		const isVertical = computed(() => props.position === "start" || props.position === "end");
+		/** `start` / `end` 摆在图表两侧，用纵向列表；`top` / `bottom` 用可换行的横向列表。 */
+		const listComponent = computed(() => isVertical.value ? VStack : HStack);
+		const listProps = computed(() => isVertical.value ? {
+			gap: 2,
+			hAlign: props.alignment,
+			class: ["astryx-chart-legend", "astryx-chart-legend--vertical"]
+		} : {
+			gap: 4,
+			justify: props.alignment,
+			vAlign: "center",
+			wrap: "wrap",
+			class: "astryx-chart-legend"
+		});
+		return (_ctx, _cache) => {
+			return __props.items.length > 0 ? (openBlock(), createBlock(resolveDynamicComponent(listComponent.value), mergeProps({
+				key: 0,
+				role: "list",
+				"aria-label": unref(t)("@astryx.chartLegend.label")
+			}, listProps.value), {
+				default: withCtx(() => [createCommentVNode(" 文案不保证不重（两个系列可以共用一个 label），所以键里带上序号。 "), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+					return openBlock(), createBlock(unref(HStack), {
+						key: `${item.label}-${index}`,
+						align: "center",
+						gap: 2,
+						role: "listitem"
+					}, {
+						default: withCtx(() => [createVNode(unref(_sfc_main$4), {
+							color: item.color,
+							variant: unref(swatchVariantForType)(item.type)
+						}, null, 8, ["color", "variant"]), createVNode(unref(Text), { type: "supporting" }, {
+							default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, 1024);
+				}), 128))]),
+				_: 1
+			}, 16, ["aria-label"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+//#region src/context.ts
+/** 图表根把上下文挂在这个键上，子组件（坐标轴、网格、提示框）从它读比例尺和尺寸。 */
+const chartContextKey = Symbol("astryx-chart");
+/**
+* 读当前图表的上下文。只能在 `<Chart>` 里用。
+*
+* 返回的对象身份不变，字段是活的：图表重新量到宽度、重新布局之后，
+* 同样的对象读出来的比例尺和尺寸就是新的。所以取值要写在 `computed` 或渲染里，
+* 不要在 `setup` 里一次性解构出来。
+*/
+function useChart() {
+	const ctx = inject(chartContextKey, null);
+	if (ctx === null) throw new Error("useChart() 必须在 <Chart> 里调用");
+	return ctx;
+}
+//#endregion
+//#region src/types.ts
+/**
+* 既没有显式颜色、也没有被图表根分配调色板颜色时，最后兜底用的颜色。
+*
+* 用 core 真正输出的 `--color-accent`：数据配色的 `--color-data-*` 是 JS 里算出来的
+* 具体颜色值，不是 CSS 变量，写 `var(--color-data-*)` 什么也画不出来。正常情况图表根
+* 会给每个系列分配颜色，所以这只是最后一道兜底。
+*/
+const DEFAULT_SERIES_COLOR = "var(--color-accent)";
+/**
+* 只做标注、不承载数据的标记类型。它们不参与图例和提示框，因为用户不是拿它们比大小。
+*/
+const UTILITY_MARK_TYPES = /* @__PURE__ */ new Set([
+	"referenceLine",
+	"errorBar",
+	"band"
+]);
+/** 这个标记类型是不是纯标注类。 */
+function isUtilityMarkType(type) {
+	return UTILITY_MARK_TYPES.has(type);
+}
+//#endregion
+//#region src/tooltip.ts
+/**
+* 生成提示框要显示的行。跳过标注类标记，也跳过布局没能算出点位的系列。
+*
+* 纯函数、同步，调用方可以放心缓存结果。
+*/
+function deriveTooltipSeriesValues(series, datum, resolvedKeys) {
+	if (!datum) return [];
+	const out = [];
+	for (const s of series) {
+		if (isUtilityMarkType(s.type)) continue;
+		if (!s._uid || !resolvedKeys.has(s._uid)) continue;
+		out.push({
+			key: s.key,
+			label: s.label ?? s.key,
+			color: s.color ?? s._resolvedColor ?? "var(--color-accent)",
+			type: s.type,
+			value: datum[s.dataKeys[0]]
+		});
+	}
+	return out;
+}
+/**
+* 鼠标停在某个下标上时，这个系列要不要画一个悬停圆点。
+* 柱状改成高亮整条「带」，标注类标记没有数据点可高亮。
+*/
+function shouldRenderHoverDot(seriesType) {
+	return seriesType !== "bar" && !isUtilityMarkType(seriesType);
+}
+//#endregion
+//#region src/utils.ts
+/** 判断一个比例尺是不是 d3 的 band 比例尺（分类轴上每个类占一条「带」）。 */
+function isBandScale(scale) {
+	return typeof scale === "function" && "bandwidth" in scale;
+}
+/**
+* 算出一条数据在 x 方向的像素位置。band 比例尺返回这条「带」的中心。
+*
+* 非 band 比例尺走数值路径：有限数字直接用，Date 和数字字符串也照 d3 的规则转换。
+* 转出来不是有限值的（读不成数字、或者原始值就是 ±Infinity）一律给 NaN——标记看到
+* NaN 会跳过这个点（画在画布外），而不是照 d3 的换算画到某个错位置。
+*/
+function xPixel(d, xKey, xScale) {
+	const raw = d[xKey];
+	if (isBandScale(xScale)) return (xScale(String(raw)) ?? 0) + xScale.bandwidth() / 2;
+	const value = typeof raw === "number" ? raw : Number(raw);
+	return Number.isFinite(value) ? xScale(value) : NaN;
+}
+//#endregion
+//#region src/ChartTooltip/ChartTooltipContent.vue
+/**
+* 提示框的默认内容：上面一行是悬停的 x 值，下面每个系列一行。
+* 只有一个系列时省掉系列名——图里只有一个东西，写出来是多余的。
+*/
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartTooltipContent",
+	__name: "ChartTooltipContent",
+	props: {
+		xValue: {},
+		rows: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(VStack), { gap: 1 }, {
+				default: withCtx(() => [createVNode(unref(Text), {
+					type: "body",
+					weight: "semibold"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(String(__props.xValue)), 1)]),
+					_: 1
+				}), __props.rows.length === 1 ? (openBlock(), createBlock(unref(Text), {
+					key: 0,
+					type: "supporting"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(String(__props.rows[0].value)), 1)]),
+					_: 1
+				})) : (openBlock(), createBlock(unref(VStack), {
+					key: 1,
+					gap: 1
+				}, {
+					default: withCtx(() => [createCommentVNode(" 文案不保证不重，键里带上序号。 "), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, index) => {
+						return openBlock(), createBlock(unref(HStack), {
+							key: `${row.key}-${index}`,
+							align: "center",
+							gap: 2
+						}, {
+							default: withCtx(() => [
+								createVNode(unref(_sfc_main$4), {
+									color: row.color,
+									variant: unref(swatchVariantForType)(row.type)
+								}, null, 8, ["color", "variant"]),
+								createVNode(unref(Text), { type: "supporting" }, {
+									default: withCtx(() => [createTextVNode(toDisplayString(row.label), 1)]),
+									_: 2
+								}, 1024),
+								createVNode(unref(Text), {
+									type: "supporting",
+									weight: "semibold"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(String(row.value)), 1)]),
+									_: 2
+								}, 1024)
+							]),
+							_: 2
+						}, 1024);
+					}), 128))]),
+					_: 1
+				}))]),
+				_: 1
+			});
+		};
+	}
+});
+/**
+* 算提示卡片在视口里的坐标。`auto` 默认放右边，右边放不下就翻到左边；
+* 最后四边都夹进视口内，免得卡片被裁掉。
+*/
+/** 量出来的尺寸读不成有限数时（比如非浏览器环境）当 0，否则坐标会算成 NaN。 */
+function finiteSize(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function computeCardPosition(input, placement) {
+	const { anchorLeft, anchorTop, viewportWidth, viewportHeight } = input;
+	const width = finiteSize(input.width);
+	const height = finiteSize(input.height);
+	let x;
+	let y = anchorTop;
+	switch (placement) {
+		case "left":
+			x = anchorLeft - width - 8;
+			break;
+		case "right":
+			x = anchorLeft + 8;
+			break;
+		case "top":
+			x = anchorLeft - width / 2;
+			y = anchorTop - height - 8;
+			break;
+		default: {
+			const right = anchorLeft + 8;
+			x = right + width > viewportWidth ? anchorLeft - width - 8 : right;
+		}
+	}
+	return {
+		x: Math.max(8, Math.min(x, viewportWidth - width - 8)),
+		y: Math.max(8, Math.min(y, viewportHeight - height - 8))
+	};
+}
+//#endregion
+//#region src/ChartTooltip/useTooltipCard.ts
+/** 卡片内容渲染完以后还要再等一帧，`v-show` 才把元素显示出来、量得到尺寸。 */
+const MEASURE_TICKS = 2;
+/**
+* 提示卡片的状态机：订阅图表的指针事件、算出该显示哪一行、量出卡片尺寸再定位置。
+*
+* 只在下标的「行」变化时才更新状态，同一行里挪动鼠标不会引起重排。
+* 卡片内容为空（自定义内容故意不返回东西）时按隐藏处理，但高亮和圆点照画。
+*/
+function useTooltipCard(options) {
+	const chart = useChart();
+	const hoveredIndex = ref(null);
+	const cardHidden = ref(true);
+	const cardPosition = ref({
+		x: 0,
+		y: 0
+	});
+	const cardRef = ref(null);
+	let lastEvent = null;
+	const layer = useLayer({
+		mode: "fixed",
+		x: () => cardPosition.value.x,
+		y: () => cardPosition.value.y
+	});
+	/** 卡片挂到图表所在的 HTML 容器里，这样外层主题（含深浅色）对它同样生效。 */
+	const portalTarget = ref(null);
+	watchEffect(() => {
+		portalTarget.value = chart.svgRef.value?.parentElement ?? null;
+	});
+	const datum = computed(() => hoveredIndex.value == null ? void 0 : chart.data[hoveredIndex.value]);
+	const xValue = computed(() => datum.value?.[chart.xKey]);
+	const resolvedKeys = computed(() => new Set(chart.resolved.keys()));
+	const seriesValues = computed(() => deriveTooltipSeriesValues(options.series(), datum.value, resolvedKeys.value));
+	/** 自定义内容渲染出来是空的，就等于上游 `render()` 返回 `null`：不显示卡片。 */
+	function hasRenderedContent(element) {
+		if ((element.textContent ?? "").trim() !== "") return true;
+		return element.children.length > 0;
+	}
+	function resolveHidden() {
+		if (hoveredIndex.value == null || datum.value == null) {
+			cardHidden.value = true;
+			return;
+		}
+		if (!options.hasCustomContent()) {
+			cardHidden.value = false;
+			return;
+		}
+		const card = cardRef.value;
+		cardHidden.value = card == null || !hasRenderedContent(card);
+	}
+	function place(event) {
+		const card = cardRef.value;
+		const svg = chart.svgRef.value;
+		if (!card || !svg || !event.nearest) return;
+		const svgRect = svg.getBoundingClientRect();
+		cardPosition.value = computeCardPosition({
+			anchorLeft: svgRect.left + chart.margin.left + event.nearest.px,
+			anchorTop: svgRect.top + chart.margin.top,
+			width: card.offsetWidth,
+			height: card.offsetHeight,
+			viewportWidth: window.innerWidth,
+			viewportHeight: window.innerHeight
+		}, options.placement());
+	}
+	/** 等内容和显隐都落到 DOM 上，再量尺寸定位置，否则量到的是上一帧的卡片。 */
+	async function sync() {
+		for (let i = 0; i < MEASURE_TICKS; i++) await nextTick();
+		resolveHidden();
+		if (cardHidden.value || !lastEvent || !portalTarget.value) {
+			layer.hide();
+			return;
+		}
+		layer.show();
+		await nextTick();
+		place(lastEvent);
+	}
+	let pending = false;
+	async function scheduleSync() {
+		if (pending) return;
+		pending = true;
+		try {
+			await sync();
+		} finally {
+			pending = false;
+		}
+	}
+	const unsubscribe = chart.onPointer((event) => {
+		lastEvent = event;
+		const index = event.nearest?.dataIndex ?? null;
+		if (index !== hoveredIndex.value) {
+			hoveredIndex.value = index;
+			if (index == null) cardHidden.value = true;
+		}
+		scheduleSync();
+	});
+	onScopeDispose(unsubscribe);
+	watch([
+		hoveredIndex,
+		seriesValues,
+		portalTarget
+	], () => {
+		scheduleSync();
+	});
+	const isVisible = computed(() => !cardHidden.value && layer.isOpen.value);
+	return {
+		cardRef,
+		cardStyle: computed(() => layer.contentStyle.value),
+		isVisible,
+		portalTarget,
+		hoveredIndex,
+		xValue,
+		hasDatum: computed(() => datum.value != null),
+		seriesValues
+	};
+}
+//#endregion
+//#region src/ChartTooltip/ChartTooltip.vue
+const _hoisted_1$3 = [
+	"x",
+	"y",
+	"width",
+	"height"
+];
+const _hoisted_2$3 = [
+	"x1",
+	"x2",
+	"y2"
+];
+const _hoisted_3$2 = [
+	"cx",
+	"cy",
+	"stroke"
+];
+const _sfc_main$5 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartTooltip",
+	__name: "ChartTooltip",
+	props: {
+		series: { default: () => [] },
+		hoverIndicator: {
+			type: Boolean,
+			default: true
+		},
+		showHoverDots: {
+			type: Boolean,
+			default: true
+		},
+		placement: { default: "auto" }
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		/** 调用方给了自定义内容插槽，就不再用内置样式。 */
+		const hasCustomContent = computed(() => slots.content != null);
+		const chart = useChart();
+		const { cardRef, cardStyle, isVisible, portalTarget, hoveredIndex, xValue, hasDatum, seriesValues } = useTooltipCard({
+			series: () => props.series,
+			placement: () => props.placement,
+			hasCustomContent: () => hasCustomContent.value
+		});
+		/**
+		* 卡片是 HTML，不能跟着 `<svg>` 里的元素一起创建——那样元素会落到 SVG 命名空间里，
+		* 浏览器不认。所以卡片容器用 `document.createElement` 造出来，再挂到图表所在的 HTML 容器里，
+		* 内容用 `render()` 单独渲染一遍。
+		*/
+		const cardHost = ref(null);
+		const currentInstance = getCurrentInstance();
+		/**
+		* 内容的渲染外壳。它是一次独立渲染的根组件，负责把当前组件的 provide
+		* （语言、主题……）转给卡片内容，用户自己写的插槽内容也就能读同一套上下文。
+		*/
+		const CardBody = defineComponent({
+			name: "AstryxChartTooltipBody",
+			setup(_, { slots: cardSlots }) {
+				return () => cardSlots.default?.() ?? null;
+			}
+		});
+		function cardBody() {
+			if (!hasDatum.value) return null;
+			if (hasCustomContent.value) return slots.content?.({
+				xValue: xValue.value,
+				rows: seriesValues.value
+			});
+			return h(_sfc_main$6, {
+				xValue: xValue.value,
+				rows: seriesValues.value
+			});
+		}
+		function renderCard() {
+			const host = cardHost.value;
+			if (!host) return;
+			const vnode = h(CardBody, null, { default: cardBody });
+			const provides = currentInstance?.provides;
+			if (currentInstance) vnode.appContext = {
+				...currentInstance.appContext,
+				provides: provides ?? currentInstance.appContext.provides
+			};
+			render(vnode, host);
+		}
+		function removeCard() {
+			const host = cardHost.value;
+			if (!host) return;
+			render(null, host);
+			host.remove();
+			cardHost.value = null;
+			cardRef.value = null;
+		}
+		watch(portalTarget, (target) => {
+			removeCard();
+			if (!target || typeof document === "undefined") return;
+			const host = document.createElement("div");
+			host.className = "astryx-chart-tooltip";
+			host.setAttribute("role", "tooltip");
+			host.style.display = "none";
+			target.appendChild(host);
+			cardHost.value = host;
+			cardRef.value = host;
+			renderCard();
+		}, { immediate: true });
+		onScopeDispose(removeCard);
+		/** 位置和显隐直接写在卡片元素上，不再经过模板。 */
+		watchPostEffect(() => {
+			const host = cardHost.value;
+			if (!host) return;
+			for (const [name, value] of Object.entries(cardStyle.value)) host.style.setProperty(name, value);
+			host.style.display = isVisible.value ? "" : "none";
+		});
+		/**
+		* 悬停指示：图里有柱状系列时在分类轴上高亮整列，其余情况画一条竖线。
+		* 两种画法共用同一个「悬停在哪一行」的状态，只是视觉惯例不同。
+		*/
+		const bandHighlight = computed(() => {
+			if (!props.hoverIndicator || hoveredIndex.value == null) return null;
+			const hoveredDatum = chart.data[hoveredIndex.value];
+			const xv = hoveredDatum?.[chart.xKey];
+			if (hoveredDatum == null || xv == null) return null;
+			if (!props.series.some((s) => s.type === "bar") || !isBandScale(chart.xScale)) return null;
+			const x = chart.xScale(String(xv)) ?? 0;
+			const bandwidth = chart.xScale.bandwidth();
+			const pad = 8;
+			const rectX = Math.max(0, x - pad);
+			const rectRight = Math.min(chart.width, x + bandwidth + pad);
+			const topPad = Math.min(pad, chart.margin.top);
+			return {
+				x: rectX,
+				y: -topPad,
+				width: rectRight - rectX,
+				height: chart.height + topPad
+			};
+		});
+		/** 折线、面积、散点的悬停位置画竖线；x 读不成有限值时跳过，免得画出 NaN 坐标。 */
+		const crosshairX = computed(() => {
+			if (!props.hoverIndicator || hoveredIndex.value == null || bandHighlight.value) return null;
+			const hoveredDatum = chart.data[hoveredIndex.value];
+			if (!hoveredDatum) return null;
+			const px = xPixel(hoveredDatum, chart.xKey, chart.xScale);
+			return Number.isFinite(px) ? px : null;
+		});
+		/**
+		* 每个系列的悬停圆点。这一点在这里没值（坐标是 NaN）时跳过——
+		* 标记自己也会跳过这种点，圆点跟着一致。
+		*/
+		const hoverDots = computed(() => {
+			if (!props.showHoverDots || hoveredIndex.value == null) return [];
+			const dots = [];
+			for (const series of props.series) {
+				if (!shouldRenderHoverDot(series.type)) continue;
+				const point = (series._uid ? chart.resolved.get(series._uid) : void 0)?.find((p) => p.dataIndex === hoveredIndex.value);
+				if (!point || !Number.isFinite(point.px) || !Number.isFinite(point.py)) continue;
+				dots.push({
+					key: series._uid ?? `${series.key}-${dots.length}`,
+					px: point.px,
+					py: point.py,
+					color: series.color ?? series._resolvedColor ?? "var(--astryx-color-border-emphasized)"
+				});
+			}
+			return dots;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [bandHighlight.value ? (openBlock(), createElementBlock("rect", {
+				key: 0,
+				x: bandHighlight.value.x,
+				y: bandHighlight.value.y,
+				width: bandHighlight.value.width,
+				height: bandHighlight.value.height,
+				fill: "currentColor",
+				opacity: .06,
+				rx: 4,
+				"pointer-events": "none"
+			}, null, 8, _hoisted_1$3)) : crosshairX.value !== null ? (openBlock(), createElementBlock("line", {
+				key: 1,
+				x1: crosshairX.value,
+				x2: crosshairX.value,
+				y1: "0",
+				y2: unref(chart).height,
+				class: "astryx-chart-tooltip__crosshair",
+				"pointer-events": "none"
+			}, null, 8, _hoisted_2$3)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(hoverDots.value, (dot) => {
+				return openBlock(), createElementBlock("circle", {
+					key: dot.key,
+					cx: dot.px,
+					cy: dot.py,
+					r: 4,
+					fill: "var(--astryx-color-background-surface)",
+					stroke: dot.color,
+					"stroke-width": 2,
+					"pointer-events": "none"
+				}, null, 8, _hoisted_3$2);
+			}), 128))], 64);
+		};
+	}
+});
+//#endregion
+//#region src/formatters.ts
+/** 每个语言只建一次格式化器，之后复用。 */
+function byLocale(create) {
+	const cache = /* @__PURE__ */ new Map();
+	return (locale) => {
+		let value = cache.get(locale);
+		if (value === void 0) {
+			value = create(locale);
+			cache.set(locale, value);
+		}
+		return value;
+	};
+}
+const getCompactFormat = byLocale((locale) => new Intl.NumberFormat(locale, {
+	notation: "compact",
+	maximumFractionDigits: 1
+}));
+const getPercentFormat = byLocale((locale) => new Intl.NumberFormat(locale, {
+	style: "percent",
+	maximumFractionDigits: 1
+}));
+const getShortDateFormat = byLocale((locale) => new Intl.DateTimeFormat(locale, {
+	month: "short",
+	day: "numeric",
+	calendar: "gregory"
+}));
+const getMonthYearFormat = byLocale((locale) => new Intl.DateTimeFormat(locale, {
+	month: "short",
+	year: "numeric",
+	calendar: "gregory"
+}));
+const getListFormat = byLocale((locale) => new Intl.ListFormat(locale, {
+	style: "long",
+	type: "conjunction"
+}));
+/** 按语言把几个词连成「甲、乙和丙」这样的并列短语。 */
+function formatList(values, locale) {
+	return getListFormat(locale).format(values);
+}
+/**
+* 缩写数字：`1200` → 「1.2K」，`1500000` → 「1.5M」，`1e12` → 「1T」。
+*
+* 读不成有限数的值原样返回，所以可以直接拿它当坐标轴刻度格式化器。
+*/
+function compactNumber(value, locale) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return String(value);
+	return getCompactFormat(locale).format(n);
+}
+/**
+* 生成货币格式化函数。
+*
+* 负号的顺序是「符号在前、货币符号在后」，所以负数读作「-$1.5K」而不是「$-1.5K」。
+* 一千以上用缩写，一千以内用带千分位的普通数字。
+*
+* @example
+* ```
+* currency('$', locale)(1500)  // $1.5K
+* currency('€', locale)(12)    // €12
+* ```
+*/
+function currency(symbol = "$", locale) {
+	return (value) => {
+		const n = Number(value);
+		if (!Number.isFinite(n)) return String(value);
+		const sign = n < 0 ? "-" : "";
+		const abs = Math.abs(n);
+		return `${sign}${symbol}${abs >= 1e3 ? getCompactFormat(locale).format(abs) : abs.toLocaleString(locale)}`;
+	};
+}
+/**
+* 百分比格式化：`0.45` → 「45%」，`1.2` → 「120%」，`0.005` → 「0.5%」。
+*
+* 入参是比例，不是百分数。整数百分比不显示小数位，其余最多一位。
+*/
+function percent(value, locale) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return String(value);
+	return getPercentFormat(locale).format(n);
+}
+/**
+* 把值转成 Date，转不了就返回一个无效 Date，让调用方原样返回原值。
+*
+* 接受 `Date`、毫秒时间戳（数字或纯数字字符串）、日期字符串（ISO 8601、RFC 2822 等）。
+*
+* 只有年月日的字符串（`YYYY-MM-DD`）按本地零点构造，而不是规范里的 UTC 零点，
+* 这样在负时区里格式化出来还是同一天（`"2024-01-05"` 不会变成 1 月 4 日）。
+*/
+function toDate(value) {
+	if (value instanceof Date) return value;
+	if (typeof value === "number") return new Date(value);
+	if (typeof value === "string") {
+		const s = value.trim();
+		if (s === "") return /* @__PURE__ */ new Date(NaN);
+		const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+		if (dateOnly) {
+			const year = Number(dateOnly[1]);
+			const month = Number(dateOnly[2]);
+			const day = Number(dateOnly[3]);
+			const local = new Date(year, month - 1, day);
+			if (local.getFullYear() !== year || local.getMonth() !== month - 1 || local.getDate() !== day) return /* @__PURE__ */ new Date(NaN);
+			return local;
+		}
+		const asNumber = Number(s);
+		return new Date(Number.isFinite(asNumber) ? asNumber : s);
+	}
+	return /* @__PURE__ */ new Date(NaN);
+}
+/** 短日期，例如「Jan 5」「Mar 12」。 */
+function shortDate(value, locale) {
+	const d = toDate(value);
+	if (Number.isNaN(d.getTime())) return String(value);
+	return getShortDateFormat(locale).format(d);
+}
+/** 年月，例如「Jan 2024」「Mar 2025」。 */
+function monthYear(value, locale) {
+	const d = toDate(value);
+	if (Number.isNaN(d.getTime())) return String(value);
+	return getMonthYearFormat(locale).format(d);
+}
+//#endregion
+//#region src/legend.ts
+/**
+* 一个系列要不要进图例：只有承载数据的主标记才进，标注类标记不进。
+* 代表色依次取：写死的颜色、图表根分配的调色板颜色、兜底 token。
+* 所以自动配色的系列和按点取色的系列都会出现在图例里。
+*/
+function legendColor(series) {
+	if (isUtilityMarkType(series.type)) return void 0;
+	return series.color ?? series._resolvedColor ?? "var(--color-accent)";
+}
+/** 从系列列表推出图例项，跳过标注类标记。 */
+function deriveLegendItems(series) {
+	const items = [];
+	for (const s of series) {
+		const color = legendColor(s);
+		if (color == null) continue;
+		items.push({
+			label: s.label ?? s.key,
+			color,
+			type: s.type
+		});
+	}
+	return items;
+}
+//#endregion
+//#region src/Chart/ChartMarks.ts
+/**
+* 把每个系列的画法装进一个按绘图区裁切的组里。
+*
+* 裁切是为了让曲线过冲（monotone / natural 会在端点外拱出去一点）跑不到内边距里。
+* 每个系列一个 `<g>`，键用布局分配的 `_uid`（`key` 可以重名，不能当键）。
+*/
+var ChartMarks_default = defineComponent({
+	name: "AstryxChartMarks",
+	props: {
+		series: {
+			type: Array,
+			required: true
+		},
+		resolved: {
+			type: Object,
+			required: true
+		},
+		seriesCtx: {
+			type: Object,
+			required: true
+		},
+		clipId: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => h("g", { "clip-path": `url(#${props.clipId})` }, props.series.map((series) => {
+			const points = series._uid ? props.resolved.get(series._uid) : void 0;
+			if (!points || !series.render) return null;
+			const content = series.render(points, props.seriesCtx);
+			return h("g", { key: series._uid }, [content]);
+		}));
+	}
+});
+//#endregion
+//#region src/Chart/types.ts
+/** 不写 `margin` 时绘图区四周留多少像素。 */
+const DEFAULT_MARGIN = {
+	top: 24,
+	right: 24,
+	bottom: 32,
+	left: 48
+};
+/**
+* 数据点（行数 × 数据列数）不超过这个数时，额外输出一张视觉隐藏的数据表。
+* 再多的表对读屏用户只是噪音，所以大图表只保留名字。
+*/
+const MAX_TABLE_POINTS = 100;
+//#endregion
+//#region src/layout.ts
+/**
+* 一次布局算出所有系列共用的东西：x/y 比例尺、堆叠、分组，然后挨个调用系列的
+* `resolve()`。布局本身不认识任何具体标记类型。
+*/
+/**
+* 只有连续点的图表（没有柱和面积那种零基线）上下各留数据范围的这个比例当余量，
+* 免得端点和曲线过冲贴到绘图区边缘。
+*/
+const CONTINUOUS_HEADROOM = .08;
+/** 只有显式范围的两头都是可用的有限数时才算数。 */
+function isFiniteDomain(domain) {
+	return Number.isFinite(domain[0]) && Number.isFinite(domain[1]);
+}
+/**
+* 一列数字的 `[min, max]`，避开 `Math.min(...arr)` / `Math.max(...arr)` 的两个坑：
+* 一个 NaN/Infinity 把结果污染掉，以及数组太大时展开参数把调用栈撑爆
+* （GL 标记一次几十万个点）。空的范围或全都相等时会把范围撑开，
+* 免得比例尺塌到一个像素上。
+*/
+function finiteExtent(nums) {
+	let lo = Number.POSITIVE_INFINITY;
+	let hi = Number.NEGATIVE_INFINITY;
+	for (const v of nums) if (Number.isFinite(v)) {
+		if (v < lo) lo = v;
+		if (v > hi) hi = v;
+	}
+	if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0, 1];
+	if (lo === hi) {
+		const pad = Math.abs(lo) * .5 || 1;
+		return [lo - pad, hi + pad];
+	}
+	return [lo, hi];
+}
+function computeLayout({ data, xKey, series, width, height, yBaseline, yDomain, xDomain }) {
+	const yBandKey = series.find((s) => s.layout.yBandKey != null)?.layout.yBandKey;
+	const isCategoricalGrid = yBandKey != null;
+	const xValues = data.map((d) => d[xKey]);
+	const isNumericX = xValues.length > 0 && xValues.every((v) => typeof v === "number");
+	let xScale;
+	if (xDomain && isFiniteDomain(xDomain)) xScale = scaleLinear().domain(xDomain).range([0, width]);
+	else if (isNumericX) {
+		const [lo, hi] = finiteExtent(xValues);
+		xScale = scaleLinear().domain([lo, hi]).range([0, width]).nice();
+	} else xScale = scaleBand().domain(xValues.map(String)).range([0, width]).padding(isCategoricalGrid ? 0 : .2);
+	const allKeys = /* @__PURE__ */ new Set();
+	let includeZero = false;
+	const stackGroups = /* @__PURE__ */ new Map();
+	for (const s of series) {
+		for (const k of s.dataKeys) allKeys.add(k);
+		if (s.layout.includeZero) includeZero = true;
+		const primaryKey = s.dataKeys[0];
+		if (s.layout.stack && primaryKey != null) {
+			const group = stackGroups.get(s.layout.stack) ?? [];
+			group.push(primaryKey);
+			stackGroups.set(s.layout.stack, group);
+		}
+	}
+	let yMin = Number.POSITIVE_INFINITY;
+	let yMax = Number.NEGATIVE_INFINITY;
+	const stackedKeys = /* @__PURE__ */ new Set();
+	for (const [, keys] of stackGroups) {
+		for (const k of keys) stackedKeys.add(k);
+		for (const d of data) {
+			let acc = 0;
+			if (acc < yMin) yMin = acc;
+			if (acc > yMax) yMax = acc;
+			for (const k of keys) {
+				const v = d[k];
+				if (Number.isFinite(v)) {
+					acc += v;
+					if (acc < yMin) yMin = acc;
+					if (acc > yMax) yMax = acc;
+				}
+			}
+		}
+	}
+	for (const d of data) for (const k of allKeys) {
+		if (stackedKeys.has(k)) continue;
+		const v = d[k];
+		if (Number.isFinite(v)) {
+			const n = v;
+			if (n < yMin) yMin = n;
+			if (n > yMax) yMax = n;
+		}
+	}
+	let yDomainFinal;
+	let applyNice = true;
+	if (yDomain && isFiniteDomain(yDomain)) {
+		yDomainFinal = yDomain;
+		applyNice = false;
+	} else {
+		if (!Number.isFinite(yMin) || !Number.isFinite(yMax)) {
+			yMin = 0;
+			yMax = 1;
+		}
+		if (yMin === yMax) {
+			const pad = Math.abs(yMin) * .5 || 1;
+			yMin -= pad;
+			yMax += pad;
+		}
+		const mode = yBaseline ?? "auto";
+		if (mode === "zero") {
+			const abs = Math.max(Math.abs(yMin), Math.abs(yMax));
+			yMin = -abs;
+			yMax = abs;
+		} else if (mode === "data") {} else if (includeZero) {
+			if (yMin > 0) yMin = 0;
+			if (yMax < 0) yMax = 0;
+		} else {
+			const pad = (yMax - yMin || 1) * CONTINUOUS_HEADROOM;
+			yMin -= pad;
+			yMax += pad;
+		}
+		yDomainFinal = [yMin, yMax];
+	}
+	const yScaleBase = scaleLinear().domain(yDomainFinal).range([height, 0]);
+	const yScale = applyNice ? yScaleBase.nice() : yScaleBase;
+	let yBandScale;
+	if (yBandKey != null) {
+		const cats = [...new Set(data.map((d) => String(d[yBandKey])))];
+		yBandScale = scaleBand().domain(cats).range([0, height]).padding(0);
+	}
+	const stackedData = /* @__PURE__ */ new Map();
+	for (const [, keys] of stackGroups) {
+		const stacked = stack().keys(keys).order(stackOrderNone).offset(stackOffsetNone)(data);
+		for (const layer of stacked) stackedData.set(layer.key, layer.map((d) => ({
+			y0: d[0],
+			y1: d[1]
+		})));
+	}
+	const barGroups = /* @__PURE__ */ new Map();
+	for (const s of series) if (s.type === "bar" && s.layout.group) {
+		const group = barGroups.get(s.layout.group) ?? [];
+		const slotKey = s.layout.stack ?? s.key;
+		if (!group.includes(slotKey)) group.push(slotKey);
+		barGroups.set(s.layout.group, group);
+	}
+	const ctx = {
+		data,
+		xKey,
+		xScale,
+		yScale,
+		yBandScale,
+		width,
+		height
+	};
+	const resolved = /* @__PURE__ */ new Map();
+	const stackTopKeys = /* @__PURE__ */ new Set();
+	for (const [, keys] of stackGroups) if (keys.length > 0) stackTopKeys.add(keys[keys.length - 1]);
+	for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
+		const s = series[seriesIndex];
+		s._uid = `${seriesIndex}:${s.key}`;
+		const stackOffsets = stackedData.get(s.dataKeys[0]);
+		if (s.layout.stack) s._isTopOfStack = stackTopKeys.has(s.dataKeys[0]);
+		else s._isTopOfStack = true;
+		let groupInfo;
+		if (s.layout.group) {
+			const groupKeys = barGroups.get(s.layout.group);
+			if (groupKeys) {
+				const slotKey = s.layout.stack ?? s.key;
+				groupInfo = {
+					index: groupKeys.indexOf(slotKey),
+					count: groupKeys.length
+				};
+			}
+		}
+		const points = s.resolve(ctx, stackOffsets, groupInfo);
+		resolved.set(s._uid, points);
+	}
+	return {
+		xScale,
+		yScale,
+		yBandScale,
+		resolved
+	};
+}
+//#endregion
+//#region src/getChartColors.ts
+const CATEGORICAL_TOKENS = [
+	"--color-data-categorical-blue",
+	"--color-data-categorical-orange",
+	"--color-data-categorical-purple",
+	"--color-data-categorical-green",
+	"--color-data-categorical-pink",
+	"--color-data-categorical-cyan",
+	"--color-data-categorical-red",
+	"--color-data-categorical-teal",
+	"--color-data-categorical-brown",
+	"--color-data-categorical-indigo"
+];
+const SEQUENTIAL_HUES = [
+	"blue",
+	"shamrock",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"teal",
+	"yellow",
+	"gray"
+];
+/** 在 sRGB 空间里对两个 hex 颜色插值。读不出 hex 时退到更近的那个端点。 */
+function lerpHex(a, b, t) {
+	const ca = parseHex(a);
+	const cb = parseHex(b);
+	if (ca === null || cb === null) return t < .5 ? a : b;
+	function mix(x, y) {
+		return x + (y - x) * t;
+	}
+	return formatHex(mix(ca.r, cb.r), mix(ca.g, cb.g), mix(ca.b, cb.b));
+}
+/**
+* 从一串有序的停靠点里取 `n` 个颜色。
+* - `n` 不超过停靠点个数：挑最接近的那几个，保留设计好的色值。
+* - `n` 更多：在色阶上插值，要多少个都有，而不是悄悄卡在停靠点个数上。
+* - `n === 1`：取中间那档，当作这一阶的代表色。
+*/
+function sampleRamp(stops, n) {
+	const len = stops.length;
+	if (!Number.isFinite(n) || n <= 0 || len === 0) return [];
+	if (n === 1) return [stops[Math.floor((len - 1) / 2)]];
+	if (len === 1) return Array.from({ length: n }).fill(stops[0]);
+	if (n <= len) return Array.from({ length: n }, (_, i) => stops[Math.round(i * (len - 1) / (n - 1))]);
+	return Array.from({ length: n }, (_, i) => {
+		const t = i * (len - 1) / (n - 1);
+		const lo = Math.floor(t);
+		const frac = t - lo;
+		return frac === 0 ? stops[lo] : lerpHex(stops[lo], stops[lo + 1], frac);
+	});
+}
+/**
+* 给一个具体颜色加上透明度。hex（带不带 `#`）、`rgb()` / `rgba()`、颜色名都行。
+* 传进来的 `opacity` 总是覆盖颜色里原有的透明度。读不出来（比如 `var()`）就原样返回。
+*/
+function hexAlpha(hex, opacity) {
+	const rgba = parseColor(hex) ?? parseHex(hex);
+	if (rgba === null) return hex;
+	const a = Number.isFinite(opacity) ? Math.max(0, Math.min(1, opacity)) : 1;
+	return formatColor({
+		...rgba,
+		a
+	});
+}
+/** 从一个取变量值的函数算出整套配色。这是最底层的入口。 */
+function getChartColorsFromResolver(resolve) {
+	const categorical = CATEGORICAL_TOKENS.map((t) => resolve(t));
+	function ramp(hue) {
+		return [
+			5,
+			4,
+			3,
+			2,
+			1
+		].map((step) => resolve(`--color-data-${hue}-${step}`));
+	}
+	const gray1 = resolve("--color-data-gray-1");
+	function buildDiverging(negHue, posHue, n, midpoint = gray1) {
+		if (n <= 0) return [];
+		if (n === 1) return [midpoint];
+		const half = Math.floor(n / 2);
+		const hasCenter = n % 2 === 1;
+		const negSide = sampleRamp(ramp(negHue), half);
+		const posSide = sampleRamp(ramp(posHue), half).reverse();
+		if (hasCenter) return [
+			...negSide,
+			midpoint,
+			...posSide
+		];
+		return [...negSide, ...posSide];
+	}
+	return {
+		categorical(n) {
+			if (!Number.isFinite(n) || n <= 0 || categorical.length === 0) return [];
+			return Array.from({ length: n }, (_, i) => categorical[i % categorical.length]);
+		},
+		sequential: Object.fromEntries(SEQUENTIAL_HUES.map((hue) => [hue, (n) => sampleRamp(ramp(hue), n)])),
+		diverging: {
+			positiveNegative: (n) => buildDiverging("shamrock", "red", n),
+			coldHot: (n) => buildDiverging("blue", "red", n),
+			custom: (neg, pos, n, mid) => buildDiverging(neg, pos, n, mid)
+		},
+		semantic: {
+			positive: resolve("--color-data-categorical-green"),
+			negative: resolve("--color-data-categorical-red"),
+			warning: resolve("--color-data-categorical-orange"),
+			neutral: resolve("--color-data-neutral")
+		},
+		structural: {
+			axis: resolve("--color-border-emphasized"),
+			grid: resolve("--color-border"),
+			tick: resolve("--color-border-emphasized"),
+			label: resolve("--color-text-secondary")
+		},
+		alpha: hexAlpha
+	};
+}
+//#endregion
+//#region src/useChartColors.ts
+/**
+* 图表配色。上游从当前主题对象里读出变量的具体值，我们在变量名前面加一层
+* `--astryx-` 之后直接返回 `var(...)` 字符串：SVG 的 `fill` / `stroke` 认 CSS 变量，
+* 浏览器解析出来的颜色和上游一模一样，而且换主题（或者深浅色切换）时不用重新渲染 ——
+* 变量跟着所在元素重新求值。服务端没有 DOM，这条路同样走得通。
+* `alpha()` 收到 `var(...)` 时改用 `color-mix()` 混透明，效果和上游拼出来的 `rgba()` 相同。
+*/
+/** 变量名映射：上游读 `--color-data-*`，我们的主题里叫 `--astryx-color-data-*`。 */
+function cssVariable(name) {
+	return `var(--astryx-${name.replace(/^--/, "")})`;
+}
+const BASE_COLORS = getChartColorsFromResolver(cssVariable);
+/** 颜色是 `var(...)` 时按比例混透明；其余照旧交给按 hex 解析的实现。 */
+function alpha(color, opacity) {
+	if (!color.trimStart().startsWith("var(")) return BASE_COLORS.alpha(color, opacity);
+	return `color-mix(in srgb, ${color} ${Math.round((Number.isFinite(opacity) ? Math.max(0, Math.min(1, opacity)) : 1) * 1e3) / 10}%, transparent)`;
+}
+const CHART_COLORS = {
+	...BASE_COLORS,
+	alpha
+};
+/**
+* 当前主题下的图表配色。
+*
+* ```ts
+* const colors = useChartColors()
+* colors.categorical(5)
+* colors.semantic.positive
+* ```
+*
+* 返回的对象整个包共用一份，身份不变，可以直接放进 `watch` / `computed` 的依赖里。
+*/
+function useChartColors() {
+	return CHART_COLORS;
+}
+//#endregion
+//#region src/Chart/useChartFrame.ts
+/** 把 `[0, ∞)` 之外的值（NaN、负数）压成 0，比例尺的取值域不能是负数。 */
+function nonNegative$1(value) {
+	return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+/**
+* 图表根的全部计算：量宽度、定尺寸、分配调色板、跑布局、分发指针事件。
+*
+* 宽度有两个来源：浏览器里量容器（`ResizeObserver`，量到之后一直用），
+* 量不到时用 `width` prop。服务端没有 DOM，只有 `width` 这一条路。
+*/
+function useChartFrame(props) {
+	const containerRef = ref(null);
+	const svgRef = ref(null);
+	const measuredWidth = ref(null);
+	onMounted(() => {
+		const element = containerRef.value;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) measuredWidth.value = entry.contentRect.width;
+		});
+		observer.observe(element);
+		onScopeDispose(() => observer.disconnect());
+	});
+	const margin = computed(() => ({
+		...DEFAULT_MARGIN,
+		...props.margin
+	}));
+	const safeHeight = computed(() => nonNegative$1(props.height));
+	const containerWidth = computed(() => measuredWidth.value ?? props.width ?? 0);
+	const innerWidth = computed(() => nonNegative$1(containerWidth.value - margin.value.left - margin.value.right));
+	const innerHeight = computed(() => nonNegative$1(safeHeight.value - margin.value.top - margin.value.bottom));
+	const chartColors = useChartColors();
+	watch(() => props.series, (series) => {
+		const needsColor = series.filter((s) => !isUtilityMarkType(s.type) && s.color == null);
+		const palette = chartColors.categorical(Math.max(needsColor.length, 1));
+		for (let i = 0; i < needsColor.length; i++) needsColor[i]._resolvedColor = palette[i % palette.length];
+	}, { immediate: true });
+	const layout = computed(() => computeLayout({
+		data: props.data,
+		xKey: props.xKey,
+		series: props.series,
+		width: innerWidth.value,
+		height: innerHeight.value,
+		yBaseline: props.yBaseline,
+		yDomain: props.yDomain,
+		xDomain: props.xDomain
+	}));
+	const xScale = computed(() => layout.value.xScale);
+	const yScale = computed(() => layout.value.yScale);
+	const yBandScale = computed(() => layout.value.yBandScale);
+	const resolved = computed(() => layout.value.resolved);
+	const seriesCtx = computed(() => ({
+		data: props.data,
+		xKey: props.xKey,
+		xScale: layout.value.xScale,
+		yScale: layout.value.yScale,
+		yBandScale: layout.value.yBandScale,
+		width: innerWidth.value,
+		height: innerHeight.value
+	}));
+	const pointerHandlers = /* @__PURE__ */ new Set();
+	function onPointer(handler) {
+		pointerHandlers.add(handler);
+		return () => {
+			pointerHandlers.delete(handler);
+		};
+	}
+	function dispatch(event) {
+		for (const handler of pointerHandlers) handler(event);
+	}
+	function handlePointerMove(event) {
+		const svg = svgRef.value;
+		const target = event.currentTarget;
+		if (!svg || !target) return;
+		const point = svg.createSVGPoint();
+		point.x = event.clientX;
+		point.y = event.clientY;
+		const matrix = target.getScreenCTM()?.inverse();
+		if (!matrix) return;
+		const cursor = point.matrixTransform(matrix);
+		let nearest = null;
+		let bestXDistance = Number.POSITIVE_INFINITY;
+		for (const [seriesKey, points] of layout.value.resolved) for (const p of points) {
+			const distance = Math.abs(p.px - cursor.x);
+			if (distance < bestXDistance) {
+				bestXDistance = distance;
+				nearest = {
+					...p,
+					seriesKey
+				};
+			}
+		}
+		dispatch({
+			x: cursor.x,
+			y: cursor.y,
+			nearest,
+			active: event.buttons > 0
+		});
+	}
+	function handlePointerLeave() {
+		dispatch({
+			x: -1,
+			y: -1,
+			nearest: null,
+			active: false
+		});
+	}
+	return {
+		containerRef,
+		svgRef,
+		containerWidth,
+		safeHeight,
+		margin,
+		innerWidth,
+		innerHeight,
+		xScale,
+		yScale,
+		yBandScale,
+		resolved,
+		seriesCtx,
+		chart: {
+			get width() {
+				return innerWidth.value;
+			},
+			get height() {
+				return innerHeight.value;
+			},
+			get margin() {
+				return margin.value;
+			},
+			get data() {
+				return props.data;
+			},
+			get xKey() {
+				return props.xKey;
+			},
+			get xScale() {
+				return layout.value.xScale;
+			},
+			get yScale() {
+				return layout.value.yScale;
+			},
+			get yBandScale() {
+				return layout.value.yBandScale;
+			},
+			get resolved() {
+				return layout.value.resolved;
+			},
+			onPointer,
+			svgRef
+		},
+		handlePointerMove,
+		handlePointerLeave
+	};
+}
+/** 一次渲染里唯一的 id，给 clipPath 和无障碍描述引用。 */
+function useChartIds() {
+	const chartId = useId();
+	return {
+		clipId: `plot-${chartId.replace(/:/g, "")}`,
+		descId: `${chartId}-desc`
+	};
+}
+//#endregion
+//#region src/Chart/Chart.vue
+const _hoisted_1$2 = {
+	key: 0,
+	class: "astryx-chart__header"
+};
+const _hoisted_2$2 = ["data-legend-position"];
+const _hoisted_3$1 = { class: "astryx-chart__plot" };
+const _hoisted_4$1 = [
+	"height",
+	"aria-label",
+	"aria-describedby"
+];
+const _hoisted_5$1 = { key: 0 };
+const _hoisted_6$1 = ["id"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["width", "height"];
+const _hoisted_9 = ["transform"];
+const _hoisted_10 = ["width", "height"];
+const _hoisted_11 = { scope: "col" };
+const _hoisted_12 = { scope: "row" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxChart",
+	inheritAttrs: false,
+	__name: "Chart",
+	props: {
+		data: {},
+		xKey: {},
+		series: {},
+		height: { default: 300 },
+		width: { default: 0 },
+		margin: { default: void 0 },
+		yBaseline: { default: "auto" },
+		yDomain: { default: void 0 },
+		xDomain: { default: void 0 },
+		legend: {
+			type: [Boolean, Object],
+			default: false
+		},
+		tooltip: {
+			type: [Boolean, Object],
+			default: false
+		},
+		title: { default: void 0 },
+		subtitle: { default: void 0 }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { containerRef, svgRef, containerWidth, safeHeight, margin, innerWidth, innerHeight, resolved, seriesCtx, chart, handlePointerMove, handlePointerLeave } = useChartFrame(props);
+		const { clipId, descId } = useChartIds();
+		/** 模板里写变量名的 ref 读不到类型，绑定统一用函数式 ref 显式赋值。 */
+		function setSvgRef(element) {
+			svgRef.value = element ?? null;
+		}
+		function setContainerRef(element) {
+			containerRef.value = element ?? null;
+		}
+		provide(chartContextKey, chart);
+		const t = useChartMessages();
+		const { locale } = useLocale();
+		const primarySeries = computed(() => props.series.filter((s) => !isUtilityMarkType(s.type)));
+		/**
+		* SVG 的无障碍名字。给了 `title` 就用它，否则按主系列和 x 字段生成一句，
+		* 没有主系列（全是标注）时退到通用的「图表」。
+		*/
+		const accessibleLabel = computed(() => {
+			if (props.title) return props.title;
+			if (primarySeries.value.length === 0) return t("@astryx.chart.label");
+			return t("@astryx.chart.labelWithSeries", {
+				series: formatList(primarySeries.value.map((s) => s.label ?? s.key), locale.value),
+				xKey: props.xKey
+			});
+		});
+		const tableKeys = computed(() => Array.from(new Set(primarySeries.value.flatMap((s) => s.dataKeys))));
+		/** 数据量小的时候额外给一张表；点太多就成了噪音，只留名字。 */
+		const showDataTable = computed(() => props.data.length > 0 && tableKeys.value.length > 0 && props.data.length * tableKeys.value.length <= 100);
+		/** 表格单元格里怎么显示一个值。 */
+		function tableCell(value) {
+			return value == null ? "" : String(value);
+		}
+		const legendConfig = computed(() => props.legend === true ? {} : props.legend || null);
+		const legendItems = computed(() => legendConfig.value?.items ?? deriveLegendItems(props.series));
+		const legendPosition = computed(() => legendConfig.value?.position ?? "bottom");
+		const legendAlignment = computed(() => legendConfig.value?.alignment ?? "start");
+		const tooltipConfig = computed(() => props.tooltip === true ? {} : props.tooltip || {});
+		/** 量到宽度之前只用高度撑住占位；量到之后由标题、绘图区、图例自然撑开。 */
+		const chartStyle = computed(() => containerWidth.value === 0 ? { height: `${safeHeight.value}px` } : void 0);
+		__expose({ element: containerRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n    只有一个根元素：量宽度的 `ResizeObserver` 盯着它，换元素就会跟丢。\n    还没量到宽度时它只撑住高度、不画内容，免得首帧画在 0 宽上。\n  "), createElementVNode("div", mergeProps({ ref: setContainerRef }, _ctx.$attrs, {
+				class: "astryx-chart",
+				style: chartStyle.value
+			}), [unref(containerWidth) !== 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				__props.title || __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1$2, [__props.title ? (openBlock(), createBlock(unref(Text), {
+					key: 0,
+					type: "body",
+					weight: "semibold",
+					display: "block"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true), __props.subtitle ? (openBlock(), createBlock(unref(Text), {
+					key: 1,
+					type: "supporting",
+					display: "block"
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.subtitle), 1)]),
+					_: 1
+				})) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					class: "astryx-chart__body",
+					"data-legend-position": legendConfig.value ? legendPosition.value : void 0
+				}, [legendConfig.value ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 0,
+					class: "astryx-chart__legend",
+					items: legendItems.value,
+					position: legendPosition.value,
+					alignment: legendAlignment.value
+				}, null, 8, [
+					"items",
+					"position",
+					"alignment"
+				])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3$1, [(openBlock(), createElementBlock("svg", {
+					ref: setSvgRef,
+					role: "img",
+					width: "100%",
+					height: unref(safeHeight),
+					"aria-label": accessibleLabel.value,
+					"aria-describedby": __props.subtitle ? unref(descId) : void 0
+				}, [
+					__props.title ? (openBlock(), createElementBlock("title", _hoisted_5$1, toDisplayString(__props.title), 1)) : createCommentVNode("v-if", true),
+					__props.subtitle ? (openBlock(), createElementBlock("desc", {
+						key: 1,
+						id: unref(descId)
+					}, toDisplayString(__props.subtitle), 9, _hoisted_6$1)) : createCommentVNode("v-if", true),
+					createElementVNode("defs", null, [createElementVNode("clipPath", { id: unref(clipId) }, [createElementVNode("rect", {
+						x: "0",
+						y: "0",
+						width: unref(innerWidth),
+						height: unref(innerHeight)
+					}, null, 8, _hoisted_8)], 8, _hoisted_7)]),
+					createElementVNode("g", { transform: `translate(${unref(margin).left},${unref(margin).top})` }, [
+						createCommentVNode(" 1. 网格 "),
+						renderSlot(_ctx.$slots, "grid"),
+						createCommentVNode(" 2. 系列：每个系列自己画，整体按绘图区裁切 "),
+						createVNode(unref(ChartMarks_default), {
+							series: __props.series,
+							resolved: unref(resolved),
+							"series-ctx": unref(seriesCtx),
+							"clip-id": unref(clipId)
+						}, null, 8, [
+							"series",
+							"resolved",
+							"series-ctx",
+							"clip-id"
+						]),
+						createCommentVNode(" 3. 坐标轴 "),
+						renderSlot(_ctx.$slots, "axes"),
+						createCommentVNode(" 4. 指针捕获层和交互层 "),
+						createElementVNode("rect", {
+							x: "0",
+							y: "0",
+							width: unref(innerWidth),
+							height: unref(innerHeight),
+							fill: "transparent",
+							onPointermove: _cache[0] || (_cache[0] = (...args) => unref(handlePointerMove) && unref(handlePointerMove)(...args)),
+							onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(handlePointerLeave) && unref(handlePointerLeave)(...args))
+						}, null, 40, _hoisted_10),
+						renderSlot(_ctx.$slots, "interactions"),
+						createCommentVNode(" 5. 提示框：声明式开关；要完全控制就自己写一个 <ChartTooltip> 放进默认插槽 "),
+						__props.tooltip ? (openBlock(), createBlock(_sfc_main$5, mergeProps({
+							key: 0,
+							series: __props.series
+						}, tooltipConfig.value), createSlots({ _: 2 }, [_ctx.$slots.tooltip ? {
+							name: "content",
+							fn: withCtx((scope) => [renderSlot(_ctx.$slots, "tooltip", normalizeProps(guardReactiveProps(scope)))]),
+							key: "0"
+						} : void 0]), 1040, ["series"])) : createCommentVNode("v-if", true),
+						createCommentVNode(" 6. 逃生口 "),
+						renderSlot(_ctx.$slots, "default")
+					], 8, _hoisted_9)
+				], 8, _hoisted_4$1))])], 8, _hoisted_2$2),
+				showDataTable.value ? (openBlock(), createBlock(unref(VisuallyHidden), {
+					key: 1,
+					as: "div"
+				}, {
+					default: withCtx(() => [createElementVNode("table", null, [
+						createElementVNode("caption", null, toDisplayString(unref(t)("@astryx.chart.dataTableCaption", { label: accessibleLabel.value })), 1),
+						createElementVNode("thead", null, [createElementVNode("tr", null, [createElementVNode("th", _hoisted_11, toDisplayString(__props.xKey), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(tableKeys.value, (key) => {
+							return openBlock(), createElementBlock("th", {
+								key,
+								scope: "col"
+							}, toDisplayString(key), 1);
+						}), 128))])]),
+						createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (row, index) => {
+							return openBlock(), createElementBlock("tr", { key: index }, [createElementVNode("th", _hoisted_12, toDisplayString(tableCell(row[__props.xKey])), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(tableKeys.value, (key) => {
+								return openBlock(), createElementBlock("td", { key }, toDisplayString(tableCell(row[key])), 1);
+							}), 128))]);
+						}), 128))])
+					])]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			], 64)) : createCommentVNode("v-if", true)], 16)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/ChartAxis/ChartAxis.vue
+const _hoisted_1$1 = ["transform", "aria-label"];
+const _hoisted_2$1 = [
+	"x2",
+	"y1",
+	"y2"
+];
+const _hoisted_3 = ["y2"];
+const _hoisted_4 = ["y"];
+const _hoisted_5 = ["x2"];
+const _hoisted_6 = ["x", "text-anchor"];
+const TICK_SIZE = 6;
+/**
+* 生成刻度：分类轴一个类一个刻度、对齐到带中心，连续轴用 d3 的 `ticks()`。
+*
+* 标签会按可用空间自动抽稀：横向按「宽度 ÷ 最宽标签」、纵向按「高度 ÷ 行高」估计上限，
+* 再按等间隔跳过。`maxTicks` 由调用方指定时优先用它。
+*/
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartAxis",
+	__name: "ChartAxis",
+	props: {
+		position: {},
+		tickCount: { default: 5 },
+		maxTicks: { default: void 0 },
+		tickFormat: {
+			type: Function,
+			default: void 0
+		},
+		truncate: { default: void 0 },
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		showAxisLine: {
+			type: Boolean,
+			default: void 0
+		},
+		showTicks: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		/** 刻度线伸出轴线的长度。文字再往外让 4px，两者不重叠。 */
+		const chart = useChart();
+		const width = computed(() => chart.width);
+		const height = computed(() => chart.height);
+		const isHorizontal = computed(() => props.position === "top" || props.position === "bottom");
+		/**
+		* 分类 y 轴（比如热力图的每一行）走 `yBandScale`，要优先于线性 `yScale`：
+		* 否则左轴会画一堆没有意义的数值刻度，而不是对齐到每一行的分类。
+		*/
+		const scale = computed(() => isHorizontal.value ? chart.xScale : chart.yBandScale ?? chart.yScale);
+		/** 开了 `showTicks` 就必须有轴线，不然短刻度线悬在空中。 */
+		const renderAxisLine = computed(() => (props.showAxisLine ?? props.position === "bottom") || props.showTicks);
+		/**
+		* 交给 d3 之前先收拾刻度数量：`.ticks(n)` 会按 n 分配数组，
+		* 特别大的 n 直接抛 `RangeError`，非有限值或负数则画不出刻度。
+		* 所以夹到合理的整数（0 仍然表示不要刻度），非法输入退回默认值。
+		*/
+		const safeTickCount = computed(() => Number.isFinite(props.tickCount) && props.tickCount >= 0 ? Math.min(Math.floor(props.tickCount), 1e3) : 5);
+		/**
+		* 连续比例尺（数值、时间）默认用 d3 自己的刻度格式化：数值不会出现
+		* `0.30000000000000004` 这类浮点尘埃，时间也按日历写法输出。
+		* 分类比例尺保留类名本身。
+		*/
+		const autoFormat = computed(() => {
+			const current = scale.value;
+			if (props.tickFormat || isBandScale(current)) return null;
+			const tickFormat = current.tickFormat(safeTickCount.value);
+			return (value) => tickFormat(value);
+		});
+		function format(value) {
+			const str = (props.tickFormat ?? autoFormat.value ?? String)(value);
+			if (!props.truncate) return str;
+			const shortened = truncateCharacters(str, props.truncate, "");
+			return shortened === str ? str : `${shortened}\u2026`;
+		}
+		const ticks = computed(() => {
+			const current = scale.value;
+			let allTicks;
+			if (isBandScale(current)) {
+				const band = current;
+				allTicks = band.domain().map((d) => ({
+					value: d,
+					offset: (band(d) ?? 0) + band.bandwidth() / 2,
+					label: format(d)
+				}));
+			} else {
+				const linear = current;
+				allTicks = linear.ticks(safeTickCount.value).map((d) => ({
+					value: d,
+					offset: linear(d),
+					label: format(d)
+				}));
+			}
+			let cap = props.maxTicks;
+			if (cap == null && allTicks.length > 1) {
+				if (isHorizontal.value && chart.width > 0) {
+					const approxLabelPx = allTicks.reduce((max, tick) => Math.max(max, characterCount(tick.label)), 1) * 7 + 16;
+					cap = Math.max(1, Math.floor(chart.width / approxLabelPx));
+				} else if (!isHorizontal.value && chart.height > 0) cap = Math.max(1, Math.floor(chart.height / 18));
+			}
+			if (cap && allTicks.length > cap) {
+				const step = Math.ceil(allTicks.length / cap);
+				allTicks = allTicks.filter((_, index) => index % step === 0);
+			}
+			return allTicks;
+		});
+		const transform = computed(() => {
+			if (props.position === "bottom") return `translate(0,${chart.height})`;
+			if (props.position === "right") return `translate(${chart.width},0)`;
+		});
+		/**
+		* 底轴的轴线默认压在绘图区底边；但 y 轴范围跨过 0 时，轴线要落在 0 的位置，
+		* 才能代表「零」而不是图表边缘。分类 y 轴没有零可言，仍贴底边。
+		*/
+		const axisLineY = computed(() => {
+			if (props.position !== "bottom" || chart.yBandScale) return 0;
+			const domain = chart.yScale.domain();
+			if (domain[0] < 0 && domain[1] > 0) return chart.yScale(0) - chart.height;
+			return 0;
+		});
+		const tickTransition = computed(() => props.animated ? "transform 150ms linear, opacity 150ms ease" : void 0);
+		/** 刻度在绘图区坐标里的位置。超出绘图区一截的刻度淡出，滑动过程中不会突然跳出来。 */
+		function tickStyle(tick) {
+			const axisLength = isHorizontal.value ? chart.width : chart.height;
+			const isVisible = tick.offset >= -10 && tick.offset <= axisLength + 10;
+			return {
+				transform: isHorizontal.value ? `translateX(${tick.offset}px)` : `translateY(${tick.offset}px)`,
+				...tickTransition.value ? { transition: tickTransition.value } : {},
+				opacity: isVisible ? 1 : 0
+			};
+		}
+		const tickLineOffset = computed(() => props.position === "bottom" || props.position === "right" ? TICK_SIZE : -6);
+		const labelY = computed(() => props.position === "bottom" ? 18 : -10);
+		const labelX = computed(() => props.position === "left" ? -10 : 10);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", {
+				transform: transform.value,
+				role: "group",
+				"aria-label": `${__props.position} axis`
+			}, [renderAxisLine.value ? (openBlock(), createElementBlock("line", {
+				key: 0,
+				x1: 0,
+				x2: isHorizontal.value ? width.value : 0,
+				y1: isHorizontal.value ? axisLineY.value : 0,
+				y2: isHorizontal.value ? axisLineY.value : height.value,
+				class: "astryx-chart-axis__line"
+			}, null, 8, _hoisted_2$1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(ticks.value, (tick) => {
+				return openBlock(), createElementBlock("g", {
+					key: String(tick.value),
+					style: normalizeStyle(tickStyle(tick))
+				}, [isHorizontal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.showTicks ? (openBlock(), createElementBlock("line", {
+					key: 0,
+					y2: tickLineOffset.value,
+					class: "astryx-chart-axis__mark"
+				}, null, 8, _hoisted_3)) : createCommentVNode("v-if", true), createElementVNode("text", {
+					y: labelY.value,
+					"text-anchor": "middle",
+					class: "astryx-chart-axis__label"
+				}, toDisplayString(tick.label), 9, _hoisted_4)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.showTicks ? (openBlock(), createElementBlock("line", {
+					key: 0,
+					x2: tickLineOffset.value,
+					class: "astryx-chart-axis__mark"
+				}, null, 8, _hoisted_5)) : createCommentVNode("v-if", true), createElementVNode("text", {
+					x: labelX.value,
+					dy: "0.32em",
+					"text-anchor": __props.position === "left" ? "end" : "start",
+					class: "astryx-chart-axis__label"
+				}, toDisplayString(tick.label), 9, _hoisted_6)], 64))], 4);
+			}), 128))], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/ChartGrid/ChartGrid.vue
+const _hoisted_1 = [
+	"x2",
+	"y1",
+	"y2"
+];
+const _hoisted_2 = [
+	"x1",
+	"x2",
+	"y2"
+];
+/**
+* 横向网格线。跳过 y=0 那一条：零线由坐标轴自己强调，画两遍会叠出一条更深的线。
+* 键用刻度的值而不是像素位置——退化比例尺（零宽、还没量到宽度）会算出重复或 NaN 的位置。
+*/
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxChartGrid",
+	__name: "ChartGrid",
+	props: {
+		horizontal: {
+			type: Boolean,
+			default: true
+		},
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		tickCount: { default: 5 }
+	},
+	setup(__props) {
+		const props = __props;
+		const chart = useChart();
+		const width = computed(() => chart.width);
+		const height = computed(() => chart.height);
+		/**
+		* 交给 d3 之前先收拾刻度数量：`.ticks(n)` 会按 n 分配数组，特别大的 n 直接抛
+		* `RangeError`，非有限值或负数则画不出线。夹到合理整数（0 表示不要线），非法输入退回默认值。
+		*/
+		const safeTickCount = computed(() => Number.isFinite(props.tickCount) && props.tickCount >= 0 ? Math.min(Math.floor(props.tickCount), 1e3) : 5);
+		const horizontalLines = computed(() => {
+			if (!props.horizontal) return [];
+			return chart.yScale.ticks(safeTickCount.value).filter((tick) => tick !== 0).map((tick) => ({
+				value: String(tick),
+				pos: chart.yScale(tick)
+			}));
+		});
+		/** 纵向网格线。分类轴对齐到每条带的中心，连续轴用 d3 的刻度。 */
+		const verticalLines = computed(() => {
+			if (!props.vertical) return [];
+			const scale = chart.xScale;
+			if (isBandScale(scale)) return scale.domain().map((d) => ({
+				value: String(d),
+				pos: (scale(d) ?? 0) + scale.bandwidth() / 2
+			}));
+			const linear = scale;
+			return linear.ticks(safeTickCount.value).map((d) => ({
+				value: String(d),
+				pos: linear(d)
+			}));
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("g", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(horizontalLines.value, (line) => {
+				return openBlock(), createElementBlock("line", {
+					key: `h-${line.value}`,
+					x1: 0,
+					x2: width.value,
+					y1: line.pos,
+					y2: line.pos,
+					class: "astryx-chart-grid__line"
+				}, null, 8, _hoisted_1);
+			}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(verticalLines.value, (line) => {
+				return openBlock(), createElementBlock("line", {
+					key: `v-${line.value}`,
+					x1: line.pos,
+					x2: line.pos,
+					y1: 0,
+					y2: height.value,
+					class: "astryx-chart-grid__line"
+				}, null, 8, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
+//#region src/markColor.ts
+/**
+* 决定一个标记最终用什么颜色，各个标记共用。
+*
+* 优先级：显式给的颜色（固定串或按点取色的函数）最高；没给就用图表根分配的调色板
+* 颜色（`_resolvedColor`）；都没有才用兜底 token。所以一个没写颜色的
+* `bar('revenue')` 也能画出真颜色。
+*
+* 空字符串在每一层都当作「没设」——空的 `fill` / `stroke` 什么也画不出来。按点取色的
+* 函数返回非字符串或空串时也退回调色板，免得把非法颜色写进属性。
+*/
+/** 判断一个值能不能当 CSS 颜色用：非空白字符串。 */
+function isPaint(value) {
+	return typeof value === "string" && value.trim().length > 0;
+}
+/** 图表根分配的颜色，没有就用最后兜底的 token。 */
+function fallbackFill(def) {
+	return isPaint(def._resolvedColor) ? def._resolvedColor : DEFAULT_SERIES_COLOR;
+}
+/** 整个系列共用一种颜色时（line、area、band 等）的取色。 */
+function seriesFill(def, color) {
+	if (isPaint(color)) return color;
+	return fallbackFill(def);
+}
+/** 每个数据点各取一色：取色函数优先，其次固定串，最后调色板。 */
+function pointFill(def, color, datum, index) {
+	if (typeof color === "function") try {
+		const resolved = color(datum, index);
+		if (isPaint(resolved)) return resolved;
+	} catch {}
+	else if (isPaint(color)) return color;
+	return fallbackFill(def);
+}
+//#endregion
+//#region src/marks/area.ts
+const CURVES$1 = {
+	linear: curveLinear,
+	monotone: curveMonotoneX,
+	natural: curveNatural,
+	step: curveStep
+};
+/** 面积的两条边界都有限，这段才画得出来。 */
+function isFinitePoint$1(p) {
+	return Number.isFinite(p.px) && Number.isFinite(p.py) && Number.isFinite(p.py0);
+}
+/**
+* 面积系列：线下面填色，支持堆叠和渐变。
+*
+* 缺失值、非有限值（包括堆叠基线断开的位置）给 NaN，画的时候留空洞，
+* 而不是掉到 0 画成一片假的面积。
+*/
+function area(dataKey, options = {}) {
+	const color = options.color;
+	const opacity = typeof options.opacity === "number" && Number.isFinite(options.opacity) ? Math.min(1, Math.max(0, options.opacity)) : .3;
+	const curve = options.curve ?? "monotone";
+	const gradient = options.gradient ?? false;
+	const stroke = options.stroke ?? true;
+	const seriesDef = {
+		type: "area",
+		key: dataKey,
+		dataKeys: [dataKey],
+		color,
+		label: options.label ?? dataKey,
+		layout: {
+			stack: options.stack,
+			includeZero: true
+		},
+		resolve(ctx, stackOffsets) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				let py;
+				let py0;
+				if (stackOffsets) {
+					const offset = stackOffsets[i];
+					py = offset ? yScale(offset.y1) : NaN;
+					py0 = offset ? yScale(offset.y0) : NaN;
+				} else {
+					const raw = d[dataKey];
+					py = yScale(typeof raw === "number" && Number.isFinite(raw) ? raw : NaN);
+					py0 = yScale(0);
+				}
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py,
+					py0,
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved) {
+			if (resolved.length === 0) return null;
+			const curveFactory = CURVES$1[curve] ?? curveMonotoneX;
+			const pathD = area$1().defined(isFinitePoint$1).x((d) => d.px).y0((d) => d.py0).y1((d) => d.py).curve(curveFactory)(resolved) ?? "";
+			const strokeD = line$1().defined(isFinitePoint$1).x((d) => d.px).y((d) => d.py).curve(curveFactory)(resolved) ?? "";
+			const gradientId = `area-grad-${(seriesDef._uid ?? dataKey).replace(/[^\w-]/g, "-")}`;
+			const fillColor = seriesFill(seriesDef, color);
+			return h("g", [
+				gradient ? h("defs", [h("linearGradient", {
+					id: gradientId,
+					x1: 0,
+					y1: 0,
+					x2: 0,
+					y2: 1
+				}, [h("stop", {
+					"offset": "0%",
+					"stop-color": fillColor,
+					"stop-opacity": opacity
+				}), h("stop", {
+					"offset": "100%",
+					"stop-color": fillColor,
+					"stop-opacity": 0
+				})])]) : null,
+				h("path", {
+					"d": pathD,
+					"fill": gradient ? `url(#${gradientId})` : fillColor,
+					"fill-opacity": gradient ? 1 : opacity,
+					"stroke": "none"
+				}),
+				stroke ? h("path", {
+					"d": strokeD,
+					"fill": "none",
+					"stroke": fillColor,
+					"stroke-width": 2
+				}) : null
+			]);
+		}
+	};
+	return seriesDef;
+}
+//#endregion
+//#region src/marks/band.ts
+/**
+* 置信区间带：上下界之间的那条面积。
+*
+* 上下界缺失或不是数字时给 NaN，画的时候断成空洞，而不是塌成一条零基线。
+* 属于标注类标记，不进图例和提示框。
+*/
+function band(options) {
+	const color = options.color ?? "var(--color-accent)";
+	const opacity = options.opacity ?? .15;
+	return {
+		type: "band",
+		key: `band-${options.upper}-${options.lower}`,
+		dataKeys: [options.upper, options.lower],
+		color: options.color ?? "var(--color-accent)",
+		layout: {},
+		resolve(ctx) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const upperVal = d[options.upper];
+				const lowerVal = d[options.lower];
+				const upper = typeof upperVal === "number" && Number.isFinite(upperVal) ? upperVal : NaN;
+				const lower = typeof lowerVal === "number" && Number.isFinite(lowerVal) ? lowerVal : NaN;
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py: yScale(upper),
+					py0: yScale(lower),
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved) {
+			if (resolved.length === 0) return null;
+			const pathD = area$1().defined((d) => Number.isFinite(d.px) && Number.isFinite(d.py) && Number.isFinite(d.py0)).x((d) => d.px).y0((d) => d.py0).y1((d) => d.py).curve(curveMonotoneX)(resolved) ?? "";
+			if (!pathD) return null;
+			return h("path", {
+				"d": pathD,
+				"fill": color,
+				"fill-opacity": opacity,
+				"stroke": "none"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/marks/bar.ts
+/** 把用户给的透明度夹进 [0,1]，不是有限数就用兜底值。 */
+function clampOpacity(value, fallback) {
+	return Math.min(1, Math.max(0, typeof value === "number" && Number.isFinite(value) ? value : fallback));
+}
+/** 把用户给的长度（圆角、宽度）变成有限非负数。 */
+function nonNegative(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+/** 四个坐标都有限才算得出一条能画的矩形——非有限值会画出坏路径。 */
+function rectIsFinite(x, y, w, h) {
+	return Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(w) && Number.isFinite(h);
+}
+/**
+* 只圆上两个角的矩形路径。半径为 0 时画直角矩形；
+* 坐标非有限时返回空路径（也就是什么都不画）。
+*/
+function roundedTopRect(x, y, w, h, r) {
+	if (!rectIsFinite(x, y, w, h)) return "";
+	const cr = Math.min(r, w / 2, h / 2);
+	if (!(cr > 0)) return `M${x},${y + h}V${y}H${x + w}V${y + h}Z`;
+	return `M${x},${y + h}V${y + cr}Q${x},${y} ${x + cr},${y}H${x + w - cr}Q${x + w},${y} ${x + w},${y + cr}V${y + h}Z`;
+}
+/** 只圆下两个角的矩形路径。坐标非有限时返回空路径。 */
+function roundedBottomRect(x, y, w, h, r) {
+	if (!rectIsFinite(x, y, w, h)) return "";
+	const cr = Math.min(r, w / 2, h / 2);
+	if (!(cr > 0)) return `M${x},${y}V${y + h}H${x + w}V${y}Z`;
+	return `M${x},${y}V${y + h - cr}Q${x},${y + h} ${x + cr},${y + h}H${x + w - cr}Q${x + w},${y + h} ${x + w},${y + h - cr}V${y}Z`;
+}
+/**
+* 柱状图系列。y 轴按 `includeZero` 把 0 算进范围，负值从 0 往下长。
+*
+* 每条柱的像素宽度和偏移取决于分组情况，由 `resolve()` 现算并记在 `slot` 里，
+* 画的时候从同一份状态里取，所以两条路径看到的是同一个宽度。
+*/
+function bar(dataKey, options = {}) {
+	const color = options.color;
+	const opacity = clampOpacity(options.opacity, 1);
+	const radius = nonNegative(options.radius, 4);
+	/** 一条柱的像素宽度，以及它相对所在「带」左边的偏移。 */
+	const slot = {
+		width: 0,
+		offset: 0
+	};
+	const seriesDef = {
+		type: "bar",
+		key: dataKey,
+		dataKeys: [dataKey],
+		color: typeof color === "string" ? color : void 0,
+		label: options.label ?? dataKey,
+		layout: {
+			stack: options.stack,
+			group: options.group,
+			includeZero: true
+		},
+		resolve(ctx, stackOffsets, groupInfo) {
+			const { data, xKey, xScale, yScale } = ctx;
+			if (!("bandwidth" in xScale)) return [];
+			const bandScale = xScale;
+			const bw = bandScale.bandwidth();
+			if (groupInfo && groupInfo.count > 0) {
+				const gutter = bw * .05;
+				const totalGutters = gutter * (groupInfo.count - 1);
+				slot.width = Math.max(0, (bw - totalGutters) / groupInfo.count);
+				slot.offset = groupInfo.index * (slot.width + gutter);
+			} else {
+				slot.width = bw;
+				slot.offset = 0;
+			}
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const xBase = bandScale(String(d[xKey]));
+				const px = xBase == null ? NaN : xBase + slot.offset + slot.width / 2;
+				let py;
+				let py0;
+				if (stackOffsets) {
+					const offset = stackOffsets[i];
+					py = offset ? yScale(offset.y1) : NaN;
+					py0 = offset ? yScale(offset.y0) : NaN;
+				} else {
+					const raw = d[dataKey];
+					py = yScale(typeof raw === "number" && Number.isFinite(raw) ? raw : NaN);
+					py0 = yScale(0);
+				}
+				points.push({
+					px,
+					py,
+					py0,
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved, ctx) {
+			const { data } = ctx;
+			const r = seriesDef._isTopOfStack !== false ? radius : 0;
+			if (!(slot.width > 0)) return null;
+			return h("g", { opacity }, resolved.map((p) => {
+				const d = data[p.dataIndex];
+				if (!d || !Number.isFinite(p.px) || !Number.isFinite(p.py) || !Number.isFinite(p.py0)) return null;
+				const fill = pointFill(seriesDef, color, d, p.dataIndex);
+				const x = p.px - slot.width / 2;
+				const y = Math.min(p.py, p.py0);
+				const barHeight = Math.max(0, Math.abs(p.py0 - p.py));
+				const pathData = p.py <= p.py0 ? roundedTopRect(x, y, slot.width, barHeight, r) : roundedBottomRect(x, y, slot.width, barHeight, r);
+				return h("path", {
+					key: p.dataIndex,
+					d: pathData,
+					fill
+				});
+			}));
+		}
+	};
+	return seriesDef;
+}
+//#endregion
+//#region src/marks/candlestick.ts
+/** 读一个数据列的有限数字，缺失或不是数字时给 NaN。 */
+function readNumber(d, key) {
+	const v = d[key];
+	return typeof v === "number" && Number.isFinite(v) ? v : NaN;
+}
+/**
+* 一根蜡烛实体的像素宽度。band 比例尺就是带宽；线性/时间比例尺按相邻点的
+* 最小间距推，只有一个点时退到一个不大的固定宽度。
+*/
+function candleSlot(resolved, ctx) {
+	const { xScale, width } = ctx;
+	if (isBandScale(xScale)) return xScale.bandwidth();
+	const xs = resolved.map((p) => p.px).filter((x) => Number.isFinite(x)).sort((a, b) => a - b);
+	let minGap = Number.POSITIVE_INFINITY;
+	for (let i = 1; i < xs.length; i++) {
+		const gap = xs[i] - xs[i - 1];
+		if (gap > 0 && gap < minGap) minGap = gap;
+	}
+	return Number.isFinite(minGap) ? minGap : Math.min(width, 40);
+}
+/**
+* K 线（OHLC）系列。band 比例尺和线性/时间比例尺都能用。
+* 点位的 y 取收盘价；缺任何一个 OHLC 字段的那根蜡烛画的时候跳过，而不是画到 0。
+* 属于数据系列，会进图例和提示框。
+*/
+function candlestick(options) {
+	const upColor = options.upColor ?? "var(--astryx-color-success)";
+	const downColor = options.downColor ?? "var(--astryx-color-error)";
+	return {
+		type: "candlestick",
+		key: `ohlc-${options.close}`,
+		dataKeys: [
+			options.open,
+			options.high,
+			options.low,
+			options.close
+		],
+		layout: {},
+		resolve(ctx) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const close = readNumber(d, options.close);
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py: yScale(close),
+					py0: yScale(0),
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved, ctx) {
+			const { data, yScale } = ctx;
+			const bodyWidth = Math.max(1, candleSlot(resolved, ctx) * .6);
+			return h("g", resolved.map((p) => {
+				const d = data[p.dataIndex];
+				const o = readNumber(d, options.open);
+				const c = readNumber(d, options.close);
+				const hi = readNumber(d, options.high);
+				const lo = readNumber(d, options.low);
+				if (!Number.isFinite(p.px) || !Number.isFinite(o) || !Number.isFinite(c) || !Number.isFinite(hi) || !Number.isFinite(lo)) return null;
+				const col = c >= o ? upColor : downColor;
+				const bodyTop = yScale(Math.max(o, c));
+				const bodyHeight = Math.max(1, Math.abs(yScale(o) - yScale(c)));
+				return h("g", { key: p.dataIndex }, [h("line", {
+					"x1": p.px,
+					"x2": p.px,
+					"y1": yScale(hi),
+					"y2": yScale(lo),
+					"stroke": col,
+					"stroke-width": 1
+				}), h("rect", {
+					x: p.px - bodyWidth / 2,
+					y: bodyTop,
+					width: bodyWidth,
+					height: bodyHeight,
+					fill: col
+				})]);
+			}));
+		}
+	};
+}
+//#endregion
+//#region src/marks/dot.ts
+/**
+* 散点系列。
+*
+* 缺失值和非有限值给 NaN，画的时候跳过，不会落到基线上。开了 `dodge` 会把落在
+* 同一 x 上的点横向错开，错开时不管非有限的点，一个缺失值不会把整组挤歪。
+*/
+function dot(dataKey, options = {}) {
+	const color = options.color;
+	const radius = typeof options.radius === "number" && Number.isFinite(options.radius) ? Math.max(0, options.radius) : 4;
+	const opacity = typeof options.opacity === "number" && Number.isFinite(options.opacity) ? Math.min(1, Math.max(0, options.opacity)) : .8;
+	const dodge = options.dodge ?? false;
+	const seriesDef = {
+		type: "dot",
+		key: dataKey,
+		dataKeys: [dataKey],
+		color: typeof color === "string" ? color : void 0,
+		label: options.label ?? dataKey,
+		layout: {},
+		resolve(ctx) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const raw = d[dataKey];
+				const v = typeof raw === "number" && Number.isFinite(raw) ? raw : NaN;
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py: yScale(v),
+					py0: yScale(0),
+					dataIndex: i
+				});
+			}
+			if (dodge) {
+				const groups = /* @__PURE__ */ new Map();
+				for (const p of points) {
+					if (!Number.isFinite(p.px) || !Number.isFinite(p.py)) continue;
+					const key = Math.round(p.px);
+					const group = groups.get(key) ?? [];
+					group.push(p);
+					groups.set(key, group);
+				}
+				const spacing = radius * 2 + 1;
+				for (const group of groups.values()) {
+					if (group.length < 2) continue;
+					const mid = (group.length - 1) / 2;
+					group.forEach((p, idx) => {
+						p.px += (idx - mid) * spacing;
+					});
+				}
+			}
+			return points;
+		},
+		render(resolved, ctx) {
+			const { data } = ctx;
+			return h("g", resolved.map((p) => {
+				const d = data[p.dataIndex];
+				if (!d || !Number.isFinite(p.px) || !Number.isFinite(p.py)) return null;
+				const fill = pointFill(seriesDef, color, d, p.dataIndex);
+				return h("circle", {
+					key: p.dataIndex,
+					cx: p.px,
+					cy: p.py,
+					r: radius,
+					fill,
+					opacity
+				});
+			}));
+		}
+	};
+	return seriesDef;
+}
+//#endregion
+//#region src/marks/errorBar.ts
+/**
+* 误差条（须线）系列：上下界是绝对值，所以不对称的区间也能画。
+* 配对 `bar()` 或 `dot()` 用。缺任何一侧上下界的点画的时候跳过，
+* 而不是贴着坐标轴画一根误导人的零高度须线。
+* 属于标注类标记，不进图例和提示框。
+*
+* @example
+* ```
+* series={[bar('mean'), errorBar({high: 'upper95', low: 'lower95'})]}
+* ```
+*/
+function errorBar(options) {
+	const { high, low } = options;
+	const color = options.color ?? "var(--astryx-color-text-primary)";
+	const strokeWidth = options.strokeWidth ?? 1.5;
+	const capWidth = options.capWidth ?? 8;
+	return {
+		type: "errorBar",
+		key: `errorBar-${high}-${low}`,
+		dataKeys: [high, low],
+		layout: {},
+		resolve(ctx) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const hiVal = d[high];
+				const loVal = d[low];
+				const upper = typeof hiVal === "number" && Number.isFinite(hiVal) ? hiVal : NaN;
+				const lower = typeof loVal === "number" && Number.isFinite(loVal) ? loVal : NaN;
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py: yScale(upper),
+					py0: yScale(lower),
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved) {
+			const half = Number.isFinite(capWidth) ? Math.max(0, capWidth) / 2 : 0;
+			return h("g", resolved.map((p) => {
+				if (!Number.isFinite(p.px) || !Number.isFinite(p.py) || !Number.isFinite(p.py0)) return null;
+				return h("g", { key: p.dataIndex }, [
+					h("line", {
+						"x1": p.px,
+						"x2": p.px,
+						"y1": p.py,
+						"y2": p.py0,
+						"stroke": color,
+						"stroke-width": strokeWidth
+					}),
+					h("line", {
+						"x1": p.px - half,
+						"x2": p.px + half,
+						"y1": p.py,
+						"y2": p.py,
+						"stroke": color,
+						"stroke-width": strokeWidth
+					}),
+					h("line", {
+						"x1": p.px - half,
+						"x2": p.px + half,
+						"y1": p.py0,
+						"y2": p.py0,
+						"stroke": color,
+						"stroke-width": strokeWidth
+					})
+				]);
+			}));
+		}
+	};
+}
+//#endregion
+//#region src/marks/line.ts
+const CURVES = {
+	linear: curveLinear,
+	monotone: curveMonotoneX,
+	natural: curveNatural,
+	step: curveStep
+};
+/** 两个坐标都有限的点才画得出来。 */
+function isFinitePoint(p) {
+	return Number.isFinite(p.px) && Number.isFinite(p.py);
+}
+/**
+* 折线系列。
+*
+* 缺失值和非有限值给 NaN，画的时候会断开（而不是掉到基线画出一条假线），
+* 逐点的小圆点也只画在有限的位置上。
+*/
+function line(dataKey, options = {}) {
+	const color = options.color;
+	const curve = options.curve ?? "monotone";
+	const strokeWidth = typeof options.strokeWidth === "number" && Number.isFinite(options.strokeWidth) ? Math.max(0, options.strokeWidth) : 2;
+	const dots = options.dots ?? false;
+	const seriesDef = {
+		type: "line",
+		key: dataKey,
+		dataKeys: [dataKey],
+		color,
+		label: options.label ?? dataKey,
+		layout: {},
+		resolve(ctx) {
+			const { data, xKey, xScale, yScale } = ctx;
+			const points = [];
+			for (let i = 0; i < data.length; i++) {
+				const d = data[i];
+				const raw = d[dataKey];
+				const v = typeof raw === "number" && Number.isFinite(raw) ? raw : NaN;
+				points.push({
+					px: xPixel(d, xKey, xScale),
+					py: yScale(v),
+					py0: yScale(0),
+					dataIndex: i
+				});
+			}
+			return points;
+		},
+		render(resolved) {
+			if (resolved.length === 0) return null;
+			const pathD = line$1().defined(isFinitePoint).x((d) => d.px).y((d) => d.py).curve(CURVES[curve] ?? curveMonotoneX)(resolved) ?? "";
+			const strokeColor = seriesFill(seriesDef, color);
+			return h("g", [h("path", {
+				"d": pathD,
+				"fill": "none",
+				"stroke": strokeColor,
+				"stroke-width": strokeWidth
+			}), dots ? resolved.filter(isFinitePoint).map((p) => h("circle", {
+				key: p.dataIndex,
+				cx: p.px,
+				cy: p.py,
+				r: 3,
+				fill: strokeColor
+			})) : null]);
+		}
+	};
+	return seriesDef;
+}
+//#endregion
+//#region src/marks/referenceLine.ts
+const BADGE_H = 14;
+const BADGE_RX = 3;
+const LABEL_FONT_SIZE = 10;
+const LABEL_CHAR_W = 6.5;
+const LABEL_PAD = 12;
+function clamp(v, lo, hi) {
+	return Math.max(lo, Math.min(v, hi));
+}
+/** 标签牌的估算宽度；没有标签就是 0。 */
+function labelWidth(label) {
+	return label ? label.length * LABEL_CHAR_W + LABEL_PAD : 0;
+}
+/**
+* 标签牌，按左上角定位。调用方先把左上角夹进绘图区，所以横线、竖线两个方向
+* 都能用同一套代码摆正。
+*/
+function referenceLabel(x, topY, width, color, text) {
+	return h("g", {
+		"transform": `translate(${x},${topY})`,
+		"pointer-events": "none"
+	}, [h("rect", {
+		"x": 0,
+		"y": 0,
+		width,
+		"height": BADGE_H,
+		"rx": BADGE_RX,
+		"fill": "var(--astryx-color-background-popover)",
+		"fill-opacity": .85,
+		"stroke": color,
+		"stroke-width": .5
+	}), h("text", {
+		"x": width / 2,
+		"y": BADGE_H / 2,
+		"dy": "0.35em",
+		"text-anchor": "middle",
+		"font-size": LABEL_FONT_SIZE,
+		"font-weight": 500,
+		"fill": color
+	}, text)]);
+}
+/**
+* 横向或纵向的参考线、参考带。它不是数据系列，画在固定的数值上。
+*
+* 画的位置要现算（取决于比例尺、绘图区大小和标签宽度），所以这个工厂没有点位可算，
+* `resolve()` 永远返回空数组——所有几何都在 `render()` 里。
+* 标签牌会被夹在绘图区内（绘图区本身是裁切的），横竖两个方向都一样。
+*/
+function referenceLine(options) {
+	const color = options.color ?? "var(--astryx-color-border-emphasized)";
+	const strokeWidth = options.strokeWidth ?? 1;
+	const strokeDasharray = options.strokeDasharray ?? "6 3";
+	const label = options.label;
+	const labelPosition = options.labelPosition ?? "end";
+	const bandOpacity = options.bandOpacity ?? .1;
+	const textW = labelWidth(label);
+	return {
+		type: "referenceLine",
+		key: `ref-${options.y ?? options.x ?? "none"}`,
+		dataKeys: [],
+		layout: {},
+		resolve() {
+			return [];
+		},
+		render(_resolved, ctx) {
+			const { width, height, xScale, yScale } = ctx;
+			const bxMax = width - textW - 2;
+			if (options.y != null) {
+				if (!Number.isFinite(options.y)) return null;
+				const py = yScale(options.y);
+				if (!Number.isFinite(py)) return null;
+				const bx = clamp(labelPosition === "end" ? bxMax : 2, 2, bxMax);
+				const labelTopY = clamp(py - BADGE_H / 2, 0, height - BADGE_H);
+				if (options.y2 != null && Number.isFinite(options.y2)) {
+					const py2 = yScale(options.y2);
+					const top = Math.min(py, py2);
+					const bandHeight = Math.abs(py2 - py);
+					return h("g", [
+						h("rect", {
+							x: 0,
+							y: top,
+							width,
+							height: bandHeight,
+							fill: color,
+							opacity: bandOpacity
+						}),
+						h("line", {
+							"x1": 0,
+							"x2": width,
+							"y1": py,
+							"y2": py,
+							"stroke": color,
+							"stroke-width": strokeWidth,
+							"stroke-dasharray": strokeDasharray
+						}),
+						h("line", {
+							"x1": 0,
+							"x2": width,
+							"y1": py2,
+							"y2": py2,
+							"stroke": color,
+							"stroke-width": strokeWidth,
+							"stroke-dasharray": strokeDasharray
+						}),
+						label ? referenceLabel(bx, labelTopY, textW, color, label) : null
+					]);
+				}
+				return h("g", [h("line", {
+					"x1": 0,
+					"x2": width,
+					"y1": py,
+					"y2": py,
+					"stroke": color,
+					"stroke-width": strokeWidth,
+					"stroke-dasharray": strokeDasharray
+				}), label ? referenceLabel(bx, labelTopY, textW, color, label) : null]);
+			}
+			if (options.x != null && !isBandScale(xScale)) {
+				if (!Number.isFinite(options.x)) return null;
+				const px = xScale(options.x);
+				if (!Number.isFinite(px)) return null;
+				const labelTopY = clamp(labelPosition === "end" ? 4 : height - BADGE_H - 4, 0, height - BADGE_H);
+				const bx = clamp(px - textW / 2, 2, bxMax);
+				return h("g", [h("line", {
+					"x1": px,
+					"x2": px,
+					"y1": 0,
+					"y2": height,
+					"stroke": color,
+					"stroke-width": strokeWidth,
+					"stroke-dasharray": strokeDasharray
+				}), label ? referenceLabel(bx, labelTopY, textW, color, label) : null]);
+			}
+			return null;
+		}
+	};
+}
+//#endregion
+export { _sfc_main as Chart, _sfc_main$1 as ChartAxis, _sfc_main$2 as ChartGrid, _sfc_main$3 as ChartLegend, _sfc_main$4 as ChartSwatch, _sfc_main$5 as ChartTooltip, DEFAULT_MARGIN, MAX_TABLE_POINTS, area, band, bar, candlestick, compactNumber, computeCardPosition, computeLayout, currency, deriveLegendItems, deriveTooltipSeriesValues, dot, errorBar, formatColor, formatHex, formatList, getChartColorsFromResolver, isBandScale, isUtilityMarkType, line, monthYear, parseColor, parseHex, parseRgb, percent, pointFill, referenceLine, seriesFill, shortDate, shouldRenderHoverDot, swatchVariantForType, toGLFloats, useChart, useChartColors, xPixel };