@lionad/cx-comps-tanstack-charts 0.1.0-alpha.27 → 0.1.0-alpha.29

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { define } from "@lionad/cx-definition";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, useAttrs, useId, watch } from "vue";
 import { Chart } from "@tanstack/charts/vue";
 import { useCxBEM } from "@lionad/cx-vue";
-import { areaX, areaY, arrow, bandX, bandY, barX, barY, binX, binXY, binY, boxRows, boxX, boxY, cell, colorGradientLegend, colorLegend, cumulative, d3Curve, defaultChartTheme, defineChart, delta, deviation, differenceX, differenceY, dodgeX, dodgeY, dot, first, fold, frame, group, groupBy, hexagon, last, lineX, lineY, linearRegressionRowsX, linearRegressionRowsY, linearRegressionX, linearRegressionY, link, median, mosaicX, mosaicY, normalize, quantile, rank, ratio, rect, ridgelineX, ridgelineY, rollingWindow, ruleX, ruleY, select, stack, stackRowsX, stackRowsY, text, tickX, tickY, variance, vector, violinX, violinY, waffleX, waffleY, waterfall } from "@tanstack/charts";
+import { areaX, areaY, arrow, bandX, bandY, barX, barY, binX, binXY, binY, boxRows, boxX, boxY, cell, colorGradientLegend, colorLegend, colorLegendItems, cumulative, d3Curve, defaultChartTheme, defineChart, delta, deviation, differenceX, differenceY, dodgeX, dodgeY, dot, first, fold, frame, group, groupBy, hexagon, last, lineX, lineY, linearRegressionRowsX, linearRegressionRowsY, linearRegressionX, linearRegressionY, link, median, mosaicX, mosaicY, normalize, quantile, rank, ratio, rect, ridgelineX, ridgelineY, rollingWindow, ruleX, ruleY, select, stack, stackRowsX, stackRowsY, text, tickX, tickY, variance, vector, violinX, violinY, waffleX, waffleY, waterfall } from "@tanstack/charts";
 import { d3AreaXCurve } from "@tanstack/charts/d3/area-x";
 import { curveBasis, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore } from "d3-shape";
 import { scaleLinear } from "@tanstack/charts/scales/linear";
@@ -32,7 +32,7 @@ import { createChartRendererAdapter } from "@tanstack/charts/adapter/renderer";
 import { motion } from "@tanstack/charts/motion";
 import { compileTrigger, createTriggerRegistry } from "@lionad/cx-stream";
 //#region src/shared/chart-skeleton.vue
-const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	__name: "chart-skeleton",
 	props: { height: { default: 320 } },
 	setup(__props) {
@@ -123,6 +123,85 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
+//#region src/shared/chart-empty.vue
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	__name: "chart-empty",
+	props: { height: { default: 320 } },
+	setup(__props) {
+		const props = __props;
+		const ns = useCxBEM("tanstack-charts-chart-empty");
+		const normalizedHeight = computed(() => Number.isFinite(props.height) && props.height > 0 ? props.height : 320);
+		const shellStyle = computed(() => ({
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "0.375rem",
+			width: "100%",
+			boxSizing: "border-box",
+			height: `${normalizedHeight.value}px`,
+			border: "1px dashed rgba(148, 163, 184, 0.35)",
+			borderRadius: "0.75rem",
+			color: "rgba(148, 163, 184, 0.9)",
+			textAlign: "center"
+		}));
+		const iconStyle = {
+			width: "2rem",
+			height: "2rem",
+			opacity: .7
+		};
+		const titleStyle = {
+			margin: 0,
+			fontSize: "0.875rem",
+			fontWeight: 500
+		};
+		const descStyle = {
+			margin: 0,
+			fontSize: "0.75rem",
+			opacity: .75
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" 图表终态空态：数据集占位/不可渲染时替换 Chart 占位（空壳 svg 无反馈等同未渲染）。\n       全 inline style：保持包零 css 分发契约（同 chart-skeleton 模式） "), createElementVNode("div", {
+				class: normalizeClass(unref(ns).b()),
+				style: normalizeStyle(shellStyle.value),
+				"data-testid": "cx-tanstack-charts-chart-empty",
+				role: "status"
+			}, [
+				(openBlock(), createElementBlock("svg", {
+					style: iconStyle,
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"aria-hidden": "true"
+				}, [..._cache[0] || (_cache[0] = [
+					createElementVNode("circle", {
+						cx: "12",
+						cy: "12",
+						r: "9"
+					}, null, -1),
+					createElementVNode("line", {
+						x1: "12",
+						y1: "7.5",
+						x2: "12",
+						y2: "13",
+						"stroke-linecap": "round"
+					}, null, -1),
+					createElementVNode("circle", {
+						cx: "12",
+						cy: "16.5",
+						r: "0.9",
+						fill: "currentColor",
+						stroke: "none"
+					}, null, -1)
+				])])),
+				createElementVNode("p", { style: titleStyle }, "图表数据不可用"),
+				createElementVNode("p", { style: descStyle }, "数据集中缺少可渲染的数据，已跳过绘制")
+			], 6)], 2112);
+		};
+	}
+});
+//#endregion
 //#region src/shared/streaming.ts
 /**
 * 读取 trigger 注入的流式骨架标记（_cx_streaming，下划线前缀键不会透传物料）。
@@ -294,6 +373,7 @@ function translateAxisPresentation(axis) {
 	if (axis === false) return false;
 	const presentation = {};
 	if (axis.label !== void 0) presentation.label = axis.label;
+	if (axis.line !== void 0) presentation.line = axis.line;
 	if (axis.ticks !== void 0) {
 		const ticks = {};
 		if (axis.ticks.count !== void 0) ticks.count = axis.ticks.count;
@@ -321,6 +401,55 @@ function translateAxis(spec, fallbackKind) {
 	return axis;
 }
 //#endregion
+//#region src/shared/translate/geometry.ts
+/**
+* 占位几何检测：LLM 在数据集缺席时可能产出 geometry 为占位字符串的示意 spec
+* （如 "…（命名数据集）…"）。翻译层与渲染层对缺失数据容错回退空数组，占位字符串
+* 则被库静默忽略——两者都渲染为空壳 svg 且无任何反馈。本模块提供「数据集整体
+* 不可渲染」的判定与翻译期警告，让空壳显式化为空态反馈。
+*
+* 流式安全性：占位字符串只可能出现在完整闭合的 JSON 中（流式截断停在字符层，
+* 截断帧不可解析即不会产出 spec），检测不存在流式中间态误报面。
+*/
+/** 数据集为 GeoJSON Feature 数组（rows 平铺 features 与命名 geo 数据集同形态） */
+function isFeatureArray(rows) {
+	return rows.length > 0 && rows.every((f) => f?.type === "Feature");
+}
+/**
+* 单数据集整体不可渲染判定：Feature 数组且全部条目几何缺失或为占位字符串。
+* 混合场景（部分真实几何）不算——部分数据仍可渲染，整体空态会误杀；
+* geometry: null 是 GeoJSON 合法形态，但全部条目皆 null 时渲染结果同为空壳。
+*/
+function isPlaceholderGeometryDataset(rows) {
+	if (!isFeatureArray(rows)) return false;
+	return rows.every((f) => {
+		const geometry = f.geometry;
+		return geometry == null || typeof geometry === "string";
+	});
+}
+/**
+* 组件层空态判定：数据集表中存在 GeoJSON 形态数据集，且全部占位。
+* 存在任一可用数据集时返回 false（部分数据仍可渲染）。
+*/
+function hasOnlyPlaceholderGeometry(datasets) {
+	if (!datasets) return false;
+	const geoSets = Object.values(datasets).filter((arr) => arr !== void 0 && isFeatureArray(arr));
+	return geoSets.length > 0 && geoSets.every((arr) => isPlaceholderGeometryDataset(arr));
+}
+/** 翻译期警告去重：同数组引用只警告一次（Vue computed 重算与多 mark 共享数据集会重复调用） */
+const warned = /* @__PURE__ */ new WeakSet();
+/**
+* 翻译期占位几何警告：数据集整体占位时 console.warn 指出空壳根因与修复方向。
+* 只挂在 geoShape（占位字符串的高发地——示意 spec 的外部轮廓数据集）；普通 mark
+* 的数据集在途是流式常态，warn 会成噪音。WeakSet 按引用去重，数据集内容更新
+* （新引用）视为新数据集重新警告。
+*/
+function warnPlaceholderGeometry(rows, datasetName, markType) {
+	if (!isPlaceholderGeometryDataset(rows) || warned.has(rows)) return;
+	warned.add(rows);
+	console.warn(`[cx-charts] ${markType} 数据集${datasetName ? ` "${datasetName}"` : ""} 的 geometry 全部缺失或为占位字符串，渲染为空壳——须以真实 GeoJSON 数据集整体替换示意占位（技能侧见「数据供给」表）。`);
+}
+//#endregion
 //#region src/shared/translate/transforms.ts
 /**
 * 数据预处理管道翻译：spec 顶层 transforms 按序执行，产物以 name 注册进数据集表。
@@ -530,7 +659,6 @@ const SCALAR_KEYS = [
 	"positiveFillOpacity",
 	"negativeFillOpacity",
 	"comparisonStroke",
-	"cornerRadius",
 	"padAngle",
 	"radiusOffset",
 	"baseline",
@@ -608,7 +736,9 @@ function assertChannels(spec) {
 	}
 	for (const key of CHANNEL_FLEX_KEYS) {
 		const value = spec[key];
-		if (value !== void 0 && typeof value !== "string" && typeof value !== "number") throw new Error(`translateMark: channel "${key}" 只支持字段名或数值，收到 ${typeof value}`);
+		if (value !== void 0 && typeof value !== "string" && typeof value !== "number") {
+			if (!(Array.isArray(value) && value.length === 4 && value.every((n) => typeof n === "number" && Number.isFinite(n)))) throw new Error(`translateMark: channel "${key}" 只支持字段名、数值或四角数组，收到 ${typeof value}`);
+		}
 	}
 }
 /**
@@ -705,6 +835,7 @@ function translateMark(spec, datasets) {
 	if (rScale !== void 0) options.rScale = rScale;
 	for (const key of STYLE_KEYS) if (spec[key] !== void 0) options[key] = spec[key];
 	for (const key of SCALAR_KEYS) if (spec[key] !== void 0) options[key] = spec[key];
+	if ((spec.type === "barX" || spec.type === "barY") && spec.cornerRadius !== void 0 && spec.radius === void 0) options.radius = spec.cornerRadius;
 	if (spec.id !== void 0) options.id = spec.id;
 	if (spec.curve !== void 0) options.curve = spec.type === "violinY" ? translateAreaXCurve(spec.curve) : translateCurve(spec.curve);
 	if (spec.layout !== void 0) options.layout = translateLayout(spec.layout);
@@ -825,6 +956,9 @@ function translatePolarAxis(spec, { allowRange = false } = {}) {
 * polar 容器：{ type:'polar', marks:[radialXxx...], angleAxis, radiusAxis, radiusRatio,
 * startAngle, endAngle, inset, polarGuides } → polar({...})。
 * extraMarks：调用方预组装的 PolarMark（sunburst 等自包含层级 mark 不走 radial 直译）。
+* 0.18 契约：angle/radius scale 配置收进容器级 options.scales 保留通道
+* （resolvePolarLayout 读 options.scales 的 reserved angle/radius 条目），
+* 不再是顶层 angle/radius 字段；definition.scales 只需 x/y null 占位。
 */
 function translatePolar(spec, datasets, extraMarks = []) {
 	const options = { marks: [...(spec.marks ?? []).map((m) => translateRadialMark(m, datasets)), ...extraMarks] };
@@ -833,12 +967,28 @@ function translatePolar(spec, datasets, extraMarks = []) {
 	if (spec.endAngle !== void 0) options.endAngle = spec.endAngle;
 	if (spec.inset !== void 0) options.inset = spec.inset;
 	if (spec.id !== void 0) options.id = spec.id;
+	const MATERIALIZING_TYPES = /* @__PURE__ */ new Set([
+		"radialBarRadius",
+		"radialBarAngle",
+		"radialLine",
+		"radialArea",
+		"radialText",
+		"radialRule",
+		"radialDot"
+	]);
+	const marksSpecs = spec.marks ?? [];
+	const hasRadialBarRadius = marksSpecs.some((m) => m.type === "radialBarRadius");
+	const hasRadialBarAngle = marksSpecs.some((m) => m.type === "radialBarAngle");
+	const materializesChannel = marksSpecs.some((m) => MATERIALIZING_TYPES.has(m.type));
 	const angle = translatePolarAxis(spec.angleAxis);
 	const radius = translatePolarAxis(spec.radiusAxis, { allowRange: true });
-	const hasRadialBarRadius = (spec.marks ?? []).some((m) => m.type === "radialBarRadius");
-	const hasRadialBarAngle = (spec.marks ?? []).some((m) => m.type === "radialBarAngle");
-	options.angle = angle ?? { scale: () => hasRadialBarRadius ? scaleBand() : scalePoint() };
-	options.radius = radius ?? { scale: hasRadialBarAngle ? () => scaleBand() : scaleLinear };
+	options.scales = materializesChannel ? {
+		angle: angle ?? { scale: () => hasRadialBarRadius ? scaleBand() : scalePoint() },
+		radius: radius ?? { scale: hasRadialBarAngle ? () => scaleBand() : scaleLinear }
+	} : {
+		angle: angle ?? null,
+		radius: radius ?? null
+	};
 	if (spec.polarGuides?.length) options.guides = spec.polarGuides.map(translatePolarGuide);
 	return polar(options);
 }
@@ -1132,6 +1282,7 @@ const GEO_PROJECTION_FACTORIES = {
 /** geoShape：projection 名称枚举 → descriptor {type, fit, inset}；fit:'data' 由库拟合数据本体，{data:'<name>'} 拟合另一命名数据集 */
 function translateGeoShape(spec, datasets) {
 	const rows = resolveMarkData(spec.data, datasets);
+	warnPlaceholderGeometry(rows, typeof spec.data === "string" ? spec.data : void 0, "geoShape");
 	const projectionName = spec.projection ?? "mercator";
 	if (typeof projectionName === "object") throw new Error("translateGeoShape: projection {$by} 仅允许出现在 facet chart 子模板内");
 	const factory = GEO_PROJECTION_FACTORIES[projectionName];
@@ -1275,7 +1426,7 @@ function translateViewGrid(spec, datasets, hooks) {
 */
 /** color.legend 声明 → 图例实例；true 等价 { kind:'color' } 缺省配置 */
 function translateLegend(legend) {
-	const { kind, label, placement, itemWidth, steps, width } = legend === true ? {} : legend;
+	const { kind, label, placement, itemWidth, steps, width, items: itemSpec } = legend === true ? {} : legend;
 	if (kind === "gradient") {
 		const gradient = {};
 		if (label !== void 0) gradient.label = label;
@@ -1289,6 +1440,15 @@ function translateLegend(legend) {
 	if (placement !== void 0) items.placement = placement;
 	if (itemWidth !== void 0) items.itemWidth = itemWidth;
 	if (width !== void 0) items.width = width;
+	if (itemSpec !== void 0) {
+		const itemOptions = {};
+		if (itemSpec.justify !== void 0) itemOptions.justify = itemSpec.justify;
+		if (itemSpec.gap !== void 0) itemOptions.gap = itemSpec.gap;
+		if (itemSpec.rowGap !== void 0) itemOptions.rowGap = itemSpec.rowGap;
+		if (itemSpec.indicator !== void 0) itemOptions.indicator = itemSpec.indicator;
+		if (itemSpec.label !== void 0) itemOptions.label = itemSpec.label;
+		items.items = colorLegendItems(itemOptions);
+	}
 	return colorLegend(items);
 }
 /**
@@ -1401,6 +1561,7 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 		} else pushMark(bound, translateMark(bound, table));
 	}
 	if (mode === "child" && spec.theme?.background !== void 0) throw new Error("translateViewGrid 子视图不得声明 theme.background（库拒绝子图持有场景背景；背景用子图内普通 mark 表达）");
+	if (mode === "child" && spec.gradients !== void 0) throw new Error("translateViewGrid 子视图不得声明 gradients（host 权属渐变资源，配置在外层 spec）");
 	const theme = mode === "child" ? spec.theme === void 0 ? void 0 : { ...spec.theme } : {
 		...defaultChartTheme,
 		...spec.theme
@@ -1412,21 +1573,22 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 	const axisless = polarOnly || geoOnly;
 	const xSpec = spec.x === void 0 && axisless ? null : spec.x;
 	const ySpec = spec.y === void 0 && axisless ? null : spec.y;
+	const scales = {};
 	const x = translateAxis(xSpec ?? void 0, "point");
 	const y = translateAxis(ySpec ?? void 0, "linear");
-	if (xSpec !== null && x) definition.x = x;
-	if (xSpec === null) definition.x = null;
-	if (ySpec !== null && y) definition.y = y;
-	if (ySpec === null) definition.y = null;
-	if (derivedXDomain && spec.x?.scale?.domain === void 0) definition.x = {
-		...definition.x,
+	scales.x = xSpec === null ? null : x;
+	scales.y = ySpec === null ? null : y;
+	definition.scales = scales;
+	if (derivedXDomain && spec.x?.scale?.domain === void 0) scales.x = {
+		...x,
 		scale: scaleLinear().domain(derivedXDomain)
 	};
-	if (derivedYDomain && spec.y?.scale?.domain === void 0) definition.y = {
-		...definition.y,
+	if (derivedYDomain && spec.y?.scale?.domain === void 0) scales.y = {
+		...y,
 		scale: scaleLinear().domain(derivedYDomain)
 	};
 	if (spec.margin !== void 0) definition.margin = spec.margin;
+	if (spec.gradients !== void 0) definition.gradients = spec.gradients;
 	if (spec.guides !== void 0) definition.guides = spec.guides;
 	else if (polarOnly) definition.guides = false;
 	if (spec.clip !== void 0) definition.clip = spec.clip;
@@ -1570,6 +1732,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 		const { spec, datasets, hostProps, ariaLabel } = useChartProps(attrs);
 		const definition = computed(() => translateChartSpec(spec.value, datasets.value));
 		const isStreaming = computed(() => streamingFields(attrs).includes("definition"));
+		const hasPlaceholderGeometry = computed(() => hasOnlyPlaceholderGeometry(datasets.value));
 		const skeletonHeight = computed(() => {
 			const h = Number(attrs.height);
 			return Number.isFinite(h) && h > 0 ? h : 320;
@@ -1578,10 +1741,10 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" 库根元素 inheritAttrs:false 且多根（host + tooltip Teleport），testid/BEM 类须由本层 wrapper 承担。\n       cx-charts 为主题桥作用域类（cx-comps charts-theme 映射 design token 到 --ts-chart-N/--chart-N）：\n       随组件自动声明，宿主无需手动加类——shadcn 系 spec 的 var(--chart-N, ...) 引用在此获得色板 "), createElementVNode("div", {
 				class: normalizeClass([unref(ns).b(), "cx-charts"]),
 				"data-testid": "cx-tanstack-charts-chart"
-			}, [createCommentVNode(" definition 未闭合期间骨架占位：空壳帧的空 marks 只渲染不可见空 svg，无反馈等同未渲染 "), isStreaming.value ? (openBlock(), createBlock(_sfc_main$7, {
+			}, [createCommentVNode(" definition 未闭合期间骨架占位：空壳帧的空 marks 只渲染不可见空 svg，无反馈等同未渲染 "), isStreaming.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 0,
 				height: skeletonHeight.value
-			}, null, 8, ["height"])) : unref(spec).motion !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" motion 声明走自研挂载分支：库 vue adapter 无 motion renderer 注入口子 "), createVNode(_sfc_main$6, mergeProps({
+			}, null, 8, ["height"])) : hasPlaceholderGeometry.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" 终态占位几何空态：全部 GeoJSON 数据集均占位/缺失时渲染必为空壳,显式降级为空态反馈 "), createVNode(_sfc_main$7, { height: skeletonHeight.value }, null, 8, ["height"])], 2112)) : unref(spec).motion !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" motion 声明走自研挂载分支：库 vue adapter 无 motion renderer 注入口子 "), createVNode(_sfc_main$6, mergeProps({
 				definition: definition.value,
 				ariaLabel: unref(ariaLabel),
 				"motion-options": unref(spec).motion
@@ -1589,7 +1752,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 				"definition",
 				"ariaLabel",
 				"motion-options"
-			])], 2112)) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 2 }, unref(hostProps), {
+			])], 2112)) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 3 }, unref(hostProps), {
 				definition: definition.value,
 				"aria-label": unref(ariaLabel)
 			}), null, 16, ["definition", "aria-label"]))], 2)], 2112);
@@ -2166,15 +2329,25 @@ function usePieChart(attrs) {
 			const clean = rows.filter((row) => row !== null && typeof row === "object" && Number.isFinite(Number(row[valueField])) && Number(row[valueField]) >= 0);
 			const slices = pie(clean, { value: (datum) => Number(datum[valueField]) });
 			const ratio = typeof attrs.innerRadiusRatio === "number" && Number.isFinite(attrs.innerRadiusRatio) ? Math.min(Math.max(attrs.innerRadiusRatio, 0), .95) : 0;
-			return defineChart({ marks: [polar({
-				inset: 8,
-				marks: [radialArc(slices, {
-					color: (datum) => String(datum[nameField]),
-					key: (datum) => String(datum[nameField]),
-					innerRadius: ratio > 0 ? ({ radius }) => radius * ratio : 0,
-					cornerRadius: 2
-				})]
-			})] });
+			return defineChart({
+				marks: [polar({
+					inset: 8,
+					scales: {
+						angle: null,
+						radius: null
+					},
+					marks: [radialArc(slices, {
+						color: (datum) => String(datum[nameField]),
+						key: (datum) => String(datum[nameField]),
+						innerRadius: ratio > 0 ? ({ radius }) => radius * ratio : 0,
+						cornerRadius: 2
+					})]
+				})],
+				scales: {
+					x: null,
+					y: null
+				}
+			});
 		}),
 		hostProps,
 		ariaLabel
@@ -2383,4 +2556,4 @@ const CxTanstackChartsBundle = {
 	materials: [...CxTanstackCharts]
 };
 //#endregion
-export { COMPOSITE_TYPES, CX_CHART_CURVE_NAMES, CxTanstackCharts, area_default as CxTanstackChartsArea, bar_default as CxTanstackChartsBar, CxTanstackChartsBundle, chart_default as CxTanstackChartsChart, dot_default as CxTanstackChartsDot, line_default as CxTanstackChartsLine, pie_default as CxTanstackChartsPie, POLAR_FAMILY_TYPES, TANSTACK_CHARTS_STREAM_TRIGGERS, applyTransforms, createTanstackChartsTriggerRegistry, mainArrayOf, resolveMarkData, resolveRScaleOption, translateAxis, translateChartSpec, translateCompositeMark, translateCurve, translateMark, translateOutputs, translatePie, translatePolar, translateReduce, translateScale, translateTransform };
+export { COMPOSITE_TYPES, CX_CHART_CURVE_NAMES, CxTanstackCharts, area_default as CxTanstackChartsArea, bar_default as CxTanstackChartsBar, CxTanstackChartsBundle, chart_default as CxTanstackChartsChart, dot_default as CxTanstackChartsDot, line_default as CxTanstackChartsLine, pie_default as CxTanstackChartsPie, POLAR_FAMILY_TYPES, TANSTACK_CHARTS_STREAM_TRIGGERS, applyTransforms, createTanstackChartsTriggerRegistry, hasOnlyPlaceholderGeometry, isPlaceholderGeometryDataset, mainArrayOf, resolveMarkData, resolveRScaleOption, translateAxis, translateChartSpec, translateCompositeMark, translateCurve, translateMark, translateOutputs, translatePie, translatePolar, translateReduce, translateScale, translateTransform, warnPlaceholderGeometry };

package/dist/shared/chart-empty.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    height?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/shared/translate/geometry.d.ts

@@ -0,0 +1,19 @@
+import type { CxChartDatasets } from './types';
+/**
+ * 单数据集整体不可渲染判定：Feature 数组且全部条目几何缺失或为占位字符串。
+ * 混合场景（部分真实几何）不算——部分数据仍可渲染，整体空态会误杀；
+ * geometry: null 是 GeoJSON 合法形态，但全部条目皆 null 时渲染结果同为空壳。
+ */
+export declare function isPlaceholderGeometryDataset(rows: readonly unknown[]): boolean;
+/**
+ * 组件层空态判定：数据集表中存在 GeoJSON 形态数据集，且全部占位。
+ * 存在任一可用数据集时返回 false（部分数据仍可渲染）。
+ */
+export declare function hasOnlyPlaceholderGeometry(datasets: CxChartDatasets): boolean;
+/**
+ * 翻译期占位几何警告：数据集整体占位时 console.warn 指出空壳根因与修复方向。
+ * 只挂在 geoShape（占位字符串的高发地——示意 spec 的外部轮廓数据集）；普通 mark
+ * 的数据集在途是流式常态，warn 会成噪音。WeakSet 按引用去重，数据集内容更新
+ * （新引用）视为新数据集重新警告。
+ */
+export declare function warnPlaceholderGeometry(rows: readonly unknown[], datasetName: string | undefined, markType: string): void;

package/dist/shared/translate/index.d.ts

@@ -8,6 +8,7 @@ export type { CxChartAxisSpec, CxChartCurveName, CxChartDatasets, CxChartForceSp
 export { CX_CHART_CURVE_NAMES, translateCurve } from './curve';
 export { translateScale } from './scale';
 export { translateAxis } from './axis';
+export { hasOnlyPlaceholderGeometry, isPlaceholderGeometryDataset, warnPlaceholderGeometry } from './geometry';
 export { resolveMarkData, resolveRScaleOption, translateMark } from './mark';
 export { applyTransforms, translateOutputs, translateReduce, translateTransform } from './transforms';
 export { POLAR_FAMILY_TYPES, translatePie, translatePolar } from './polar';

package/dist/shared/translate/polar.d.ts

@@ -4,6 +4,9 @@ import type { CxChartDatasets, CxChartMarkSpec } from './types';
  * polar 容器：{ type:'polar', marks:[radialXxx...], angleAxis, radiusAxis, radiusRatio,
  * startAngle, endAngle, inset, polarGuides } → polar({...})。
  * extraMarks：调用方预组装的 PolarMark（sunburst 等自包含层级 mark 不走 radial 直译）。
+ * 0.18 契约：angle/radius scale 配置收进容器级 options.scales 保留通道
+ * （resolvePolarLayout 读 options.scales 的 reserved angle/radius 条目），
+ * 不再是顶层 angle/radius 字段；definition.scales 只需 x/y null 占位。
  */
 export declare function translatePolar(spec: CxChartMarkSpec, datasets: CxChartDatasets | undefined, extraMarks?: readonly unknown[]): ChartMark<unknown, any, any>;
 /**

package/dist/shared/translate/types.d.ts

@@ -38,11 +38,47 @@ export type CxChartScaleSpec = {
     kind: 'ordinal';
     domain?: string[];
 };
+/** 网格线/轴基线渲染中立描边样式（官方 ChartGuideLineStyle 的 JSON 投影） */
+export interface CxChartGuideLineStyle {
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    lineCap?: 'butt' | 'round' | 'square';
+}
+/** 渐变 stop（0–1 objectBoundingBox；offset 回退时由渲染器向前钳制） */
+export interface CxChartGradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+/** 线性渐变：type 可省；坐标缺省垂直自底向上 (0,1)→(0,0) */
+export interface CxChartLinearGradient {
+    type?: 'linear';
+    id: string;
+    stops: CxChartGradientStop[];
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+}
+/** 径向渐变：type 必填；cx/cy/r 缺省 0.5，fx/fy 缺省继承中心 */
+export interface CxChartRadialGradient {
+    type: 'radial';
+    id: string;
+    stops: CxChartGradientStop[];
+    cx?: number;
+    cy?: number;
+    r?: number;
+    fx?: number;
+    fy?: number;
+}
 export interface CxChartAxisSpec {
     scale?: CxChartScaleSpec;
     nice?: boolean | number;
     reverse?: boolean;
-    grid?: boolean;
+    /** true 画缺省网格；对象形态覆盖网格线描边呈现（0.18 ChartGuideLineStyle） */
+    grid?: boolean | CxChartGuideLineStyle;
     /**
      * 半径像素 range 的比例对（相对 polar 最终半径，0–1），仅 polar 容器的
      * radiusAxis 消费；物化为官方 PolarLength 回调数组（resize 时随最终半径重解析）。
@@ -50,7 +86,17 @@ export interface CxChartAxisSpec {
      */
     range?: [number, number];
     axis?: false | {
-        label?: string;
+        /** 轴标题：字符串缺省呈现；对象形态定制字号/字重/填充/偏移（0.18 ChartAxisLabelOptions） */
+        label?: string | {
+            text: string;
+            offset?: number | 'auto';
+            fontSize?: number;
+            fontWeight?: number;
+            fill?: string;
+            opacity?: number;
+        };
+        /** 轴基线：缺省不画；true 画缺省基线，对象形态覆盖基线描边（0.18 axis.line） */
+        line?: boolean | CxChartGuideLineStyle;
         ticks?: {
             count?: number;
             size?: number;
@@ -136,7 +182,13 @@ export interface CxChartMarkSpec {
         range?: [number, number];
     };
     angle?: string | number;
-    radius?: string | number;
+    /**
+     * 双语义：radial 系是 radius channel（字段名/数值常量）；直角 barX/barY 是圆角
+     * BarRadius——数值全角、[tl,tr,br,bl] 四角差异化（对象形态 {end,stack} 不收，
+     * 防与 channel 语义混淆）。cornerRadius 是 polar 族字段名（radialArc），直角系
+     * 由翻译层别名归一到本字段（显式 radius 优先）。
+     */
+    radius?: string | number | readonly [number, number, number, number];
     width?: string | number;
     height?: string | number;
     length?: string | number;
@@ -513,6 +565,12 @@ export interface CxChartSpec {
     };
     guides?: boolean;
     clip?: boolean;
+    /**
+     * 渐变资源（0.18 ChartGradient 投影）：mark 以 fill/stroke 'url(#id)' 引用。
+     * host 权属资源——views 子图声明即拒绝（官方 child 契约），归外层组合定义。
+     * 坐标与 stop offset 为 0–1 objectBoundingBox；linear 缺省垂直自底向上。
+     */
+    gradients?: (CxChartLinearGradient | CxChartRadialGradient)[];
     /** 数据预处理管道（顶层声明，marks 之前执行；产物注册进 datasets 表） */
     transforms?: CxChartTransformSpec[];
     /** color scale 声明式（domain/range 直可 JSON；legend 为图例声明） */
@@ -526,6 +584,24 @@ export interface CxChartSpec {
             itemWidth?: number;
             steps?: number;
             width?: number;
+            /** 条目子集定制（仅 kind:'color'；物化为 colorLegendItems，0.18 契约） */
+            items?: {
+                justify?: 'start' | 'center' | 'stretch';
+                gap?: number;
+                rowGap?: number;
+                indicator?: {
+                    shape?: 'dot' | 'square' | 'line' | 'line-dot';
+                    width?: number;
+                    height?: number;
+                    gap?: number;
+                };
+                label?: {
+                    fontSize?: number;
+                    fontWeight?: number;
+                    fill?: string;
+                    fillOpacity?: number;
+                };
+            };
         };
     };
     tooltip?: boolean | {
@@ -551,7 +627,13 @@ export interface CxChartSpec {
     };
     pointer?: boolean;
     keyboard?: boolean;
-    focusRing?: boolean;
+    /** 焦点环：true/false 显隐；对象形态定制几何与描边填充（0.18 ChartFocusRingOptions） */
+    focusRing?: boolean | {
+        radius?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     focus?: 'nearest' | 'nearest-x' | 'nearest-y' | 'group-x' | 'group-y';
     /**
      * 动效声明（可 JSON 化子集）。声明即走 motion 挂载分支：库 vue adapter 未暴露

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lionad/cx-comps-tanstack-charts",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.29",
   "description": "cx material components wrapping TanStack Charts (@tanstack/charts/vue)",
   "keywords": [
     "charts",
@@ -34,16 +34,20 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vp pack && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsgo --tsdk ../../node_modules/.pnpm/typescript@7.0.2/node_modules/typescript --noEmit"
+  },
   "dependencies": {
-    "@lionad/cx-definition": "0.1.0-alpha.10",
-    "@lionad/cx-stream": "0.1.0-alpha.14",
-    "@lionad/cx-vue": "0.1.0-alpha.11",
+    "@lionad/cx-definition": "workspace:*",
+    "@lionad/cx-stream": "workspace:*",
+    "@lionad/cx-vue": "workspace:*",
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@tanstack/charts": "^0.14.0",
+    "@tanstack/charts": "^0.18.0",
     "@types/d3-geo": "^3.1.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
@@ -56,9 +60,5 @@
     "@tanstack/charts": "^0.14.0",
     "@vueuse/core": "^13.0.0 || ^14.0.0",
     "vue": "^3.5.0"
-  },
-  "scripts": {
-    "build": "vp pack && vue-tsc -p tsconfig.build.json",
-    "typecheck": "vue-tsgo --tsdk ../../node_modules/.pnpm/typescript@7.0.2/node_modules/typescript --noEmit"
   }
-}
+}