@assistant-ui/react-generative-ui 0.0.21 → 0.0.22

package/dist/vocabulary/data.js

@@ -1,25 +1,111 @@
 import { toTextContent } from "./toTextContent.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { formatValue, isNumericTableFormat } from "./formatValue.js";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { z } from "zod";
 //#region src/vocabulary/data.tsx
-const columnSchema = z.object({ label: z.string().describe("Column header label.") });
+const columnSchema = z.object({
+	label: z.string().describe("Column header label."),
+	align: z.enum(["start", "end"]).optional().describe("Cell alignment."),
+	format: z.object({
+		kind: z.enum([
+			"number",
+			"currency",
+			"percent",
+			"date"
+		]).describe("Format kind. `percent` takes a fraction, so 0.25 renders as 25%."),
+		currency: z.string().optional().describe("Currency code."),
+		decimals: z.number().optional().describe("Decimal places.")
+	}).optional().describe("Cell value format.")
+});
 const cellSchema = z.union([
 	z.string(),
 	z.number(),
 	z.boolean()
 ]).describe("A cell value.");
+const tableCollator = new Intl.Collator("en-US", { numeric: true });
 const isTableColumn = (column) => column !== null && typeof column === "object" && "label" in column && typeof column.label === "string";
 const isTableCell = (cell) => typeof cell === "string" || typeof cell === "number" || typeof cell === "boolean";
+const tableAlignment = (column) => {
+	if (!isTableColumn(column)) return void 0;
+	if (column.align === "start" || column.align === "end") return column.align;
+	return isNumericTableFormat(column.format) ? "end" : void 0;
+};
+const compareTableCells = (left, right) => {
+	if (typeof left === "number" && Number.isFinite(left) && typeof right === "number" && Number.isFinite(right)) return left - right;
+	if (typeof left === "number" && Number.isFinite(left)) return -1;
+	if (typeof right === "number" && Number.isFinite(right)) return 1;
+	return tableCollator.compare(isTableCell(left) ? String(left) : "", isTableCell(right) ? String(right) : "");
+};
+function TableView({ columns, rows, children, sort, onSort }) {
+	const safeColumns = Array.isArray(columns) ? columns : [];
+	const hasColumns = safeColumns.some(isTableColumn);
+	const safeRows = Array.isArray(rows) ? rows.filter(Array.isArray) : [];
+	const sortedRows = sort === void 0 ? safeRows : safeRows.map((row, index) => ({
+		row,
+		index
+	})).sort((left, right) => {
+		const comparison = compareTableCells(left.row[sort.column], right.row[sort.column]);
+		return comparison === 0 ? left.index - right.index : sort.direction === "ascending" ? comparison : -comparison;
+	}).map(({ row }) => row);
+	return /* @__PURE__ */ jsxs("table", {
+		"data-aui": "table",
+		children: [
+			hasColumns ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: safeColumns.map((column, i) => {
+				const label = isTableColumn(column) ? column.label : "";
+				const direction = sort?.column === i ? sort.direction : void 0;
+				return /* @__PURE__ */ jsx("th", {
+					"data-aui": "table-col",
+					"data-aui-align": tableAlignment(column),
+					"aria-sort": direction,
+					children: onSort ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-aui": "table-sort",
+						onClick: () => onSort(i),
+						children: [label, direction ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-aui": "table-sort-direction",
+							children: direction === "ascending" ? "↑" : "↓"
+						}) : null]
+					}) : label
+				}, i);
+			}) }) }) : null,
+			safeRows.length ? /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, r) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, c) => /* @__PURE__ */ jsx("td", {
+				"data-aui-align": tableAlignment(safeColumns[c]),
+				children: formatValue(cell, isTableColumn(safeColumns[c]) ? safeColumns[c].format : void 0)
+			}, c)) }, r)) }) : null,
+			children
+		]
+	});
+}
+function SortableTable(props) {
+	const [sort, setSort] = React.useState();
+	return /* @__PURE__ */ jsx(TableView, {
+		...props,
+		sort,
+		onSort: (column) => setSort((current) => current?.column !== column ? {
+			column,
+			direction: "ascending"
+		} : current.direction === "ascending" ? {
+			column,
+			direction: "descending"
+		} : void 0)
+	});
+}
 const CHART_HEIGHT = 40;
 const CHART_WIDTH = 100;
-const clampValue = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : 0;
-const yFor = (value, max) => max > 0 ? CHART_HEIGHT - value / max * CHART_HEIGHT : CHART_HEIGHT;
+const clampValue = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
+const yFor = (value, scale) => {
+	const span = scale.max - scale.min;
+	return span > 0 ? CHART_HEIGHT - (value - scale.min) / span * CHART_HEIGHT : CHART_HEIGHT;
+};
 const pointSchema = z.object({
 	label: z.string().optional().describe("Point label."),
 	value: z.number().describe("Point value.")
 });
 const seriesSchema = z.object({
 	label: z.string().optional().describe("Series label, shown in the legend."),
+	color: z.string().optional().describe("Series color. One of `emphasis`, `secondary`, `alpha-70`, `white`, `white-70`, or `white-50`, matching Text's `color` tokens; other values have no visual effect."),
 	data: z.array(pointSchema).describe("Data points for this series.")
 });
 /** Pads every series to the longest series' length, treating a shorter series' missing points as `{ value: 0 }` so mismatched series never misalign or throw. */
@@ -42,25 +128,46 @@ function normalizeSeries(seriesProp, dataProp) {
 			}
 			return {
 				label: typeof s?.label === "string" ? s.label : void 0,
+				color: typeof s?.color === "string" ? s.color : void 0,
 				values,
 				labels
 			};
 		})
 	};
 }
-function computeMax(series, count, stacked) {
+function valueScale(values) {
+	let min = 0;
+	let max = 0;
+	for (const value of values) {
+		min = Math.min(min, value);
+		max = Math.max(max, value);
+	}
+	return {
+		min,
+		max
+	};
+}
+function computeScale(series, count, stacked) {
 	if (stacked) {
+		let min = 0;
 		let max = 0;
 		for (let i = 0; i < count; i++) {
-			let sum = 0;
-			for (const s of series) sum += s.values[i] ?? 0;
-			max = Math.max(max, sum);
+			let negative = 0;
+			let positive = 0;
+			for (const s of series) {
+				const value = s.values[i] ?? 0;
+				if (value < 0) negative += value;
+				else positive += value;
+			}
+			min = Math.min(min, negative);
+			max = Math.max(max, positive);
 		}
-		return max;
+		return {
+			min,
+			max
+		};
 	}
-	let max = 0;
-	for (const s of series) for (const v of s.values) max = Math.max(max, v);
-	return max;
+	return valueScale(series.flatMap((s) => s.values));
 }
 const NICE_MULTIPLES = [
 	1,
@@ -78,100 +185,168 @@ function niceMax(max) {
 	return 10 ** (exponent + 1);
 }
 const TICK_COUNT = 5;
-/** `TICK_COUNT` evenly spaced ticks from `max` down to `0`, for a top-to-bottom y-axis column. */
-function tickValues(max) {
+function axisScale(scale) {
+	if (scale.min === 0) return {
+		min: 0,
+		max: niceMax(scale.max)
+	};
+	if (scale.max === 0) return {
+		min: -niceMax(-scale.min),
+		max: 0
+	};
+	const step = niceMax(Math.max(-scale.min, scale.max) / 2);
+	return {
+		min: -2 * step,
+		max: 2 * step
+	};
+}
+/** `TICK_COUNT` evenly spaced ticks from the top of the scale down to its bottom, for a top-to-bottom y-axis column. */
+function tickValues(scale) {
 	const ticks = [];
-	for (let i = 0; i < TICK_COUNT; i++) ticks.push(max * (4 - i) / 4);
+	if (scale.min === 0) {
+		for (let i = 0; i < TICK_COUNT; i++) ticks.push(scale.max * (4 - i) / 4);
+		return ticks;
+	}
+	for (let i = 0; i < TICK_COUNT; i++) ticks.push(scale.min + (scale.max - scale.min) * (4 - i) / 4);
 	return ticks;
 }
 function formatTick(value) {
 	return (Math.round(value * 100) / 100).toLocaleString("en-US");
 }
 const SERIES_PALETTE_SIZE = 5;
-function renderSeriesMarks(variant, series, count, scaleMax, stacked) {
+const tooltipText = (seriesLabel, pointLabel, index, value) => `${seriesLabel ? `${seriesLabel}, ` : ""}${pointLabel || index + 1}: ${formatTick(value)}`;
+const seriesColor = (series, seriesCount, color) => series.color ?? (seriesCount === 1 && typeof color === "string" ? color : void 0);
+const xFor = (index, count) => count === 1 ? CHART_WIDTH / 2 : index / (count - 1) * CHART_WIDTH;
+function pointTargets(series, positions, count, scale) {
+	return series.values.map((value, i) => /* @__PURE__ */ jsx("circle", {
+		"data-aui": "chart-point",
+		cx: xFor(i, count),
+		cy: yFor(positions[i] ?? 0, scale),
+		r: 4,
+		fill: "transparent",
+		children: /* @__PURE__ */ jsx("title", { children: tooltipText(series.label, series.labels[i], i, value) })
+	}, i));
+}
+function barGeometry(value, start, scale) {
+	const end = start + value;
+	if (scale.min === 0 && start >= 0 && end >= 0) {
+		const height = scale.max > 0 ? value / scale.max * CHART_HEIGHT : 0;
+		const belowHeight = scale.max > 0 ? start / scale.max * CHART_HEIGHT : 0;
+		return {
+			y: CHART_HEIGHT - belowHeight - height,
+			height
+		};
+	}
+	const startY = yFor(start, scale);
+	const endY = yFor(end, scale);
+	return {
+		y: Math.min(startY, endY),
+		height: Math.abs(endY - startY)
+	};
+}
+function renderSeriesMarks(variant, series, count, scale, stacked, color) {
+	const seriesCount = series.length;
 	if (variant === "bar") {
 		const slot = count > 0 ? CHART_WIDTH / count : 0;
 		const gap = slot * .2;
 		const groupWidth = slot - gap;
-		const seriesCount = series.length;
 		const perSeriesWidth = stacked || seriesCount <= 1 ? groupWidth : groupWidth / seriesCount;
-		const cumulative = new Array(count).fill(0);
+		const negatives = new Array(count).fill(0);
+		const positives = new Array(count).fill(0);
 		return series.map((s, seriesIndex) => {
 			const marks = s.values.map((value, i) => {
-				const height = scaleMax > 0 ? value / scaleMax * CHART_HEIGHT : 0;
-				const belowHeight = stacked && scaleMax > 0 ? (cumulative[i] ?? 0) / scaleMax * CHART_HEIGHT : 0;
+				const { y, height } = barGeometry(value, stacked ? value < 0 ? negatives[i] ?? 0 : positives[i] ?? 0 : 0, scale);
 				const x = stacked || seriesCount <= 1 ? i * slot + gap / 2 : i * slot + gap / 2 + seriesIndex * perSeriesWidth;
 				return /* @__PURE__ */ jsx("rect", {
 					x,
-					y: CHART_HEIGHT - belowHeight - height,
+					y,
 					width: perSeriesWidth,
 					height,
-					fill: "currentColor"
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("title", { children: tooltipText(s.label, s.labels[i], i, value) })
 				}, i);
 			});
-			if (stacked) for (let i = 0; i < count; i++) cumulative[i] = (cumulative[i] ?? 0) + (s.values[i] ?? 0);
+			if (stacked) for (let i = 0; i < count; i++) {
+				const value = s.values[i] ?? 0;
+				if (value < 0) negatives[i] = (negatives[i] ?? 0) + value;
+				else positives[i] = (positives[i] ?? 0) + value;
+			}
 			return /* @__PURE__ */ jsx("g", {
 				"data-aui": "chart-series",
 				"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE,
+				"data-aui-color": seriesColor(s, seriesCount, color),
 				children: marks
 			}, seriesIndex);
 		});
 	}
 	if (variant === "area") {
-		const cumulative = new Array(count).fill(0);
+		const negatives = new Array(count).fill(0);
+		const positives = new Array(count).fill(0);
 		return series.map((s, seriesIndex) => {
-			const bottoms = stacked ? cumulative.slice() : new Array(count).fill(0);
-			if (stacked) for (let i = 0; i < count; i++) cumulative[i] = (cumulative[i] ?? 0) + (s.values[i] ?? 0);
-			const tops = stacked ? cumulative.slice() : s.values.slice();
+			const bottoms = s.values.map((value, i) => stacked ? value < 0 ? negatives[i] ?? 0 : positives[i] ?? 0 : 0);
+			const tops = s.values.map((value, i) => stacked ? (bottoms[i] ?? 0) + value : value);
+			if (stacked) for (let i = 0; i < count; i++) {
+				const value = s.values[i] ?? 0;
+				if (value < 0) negatives[i] = (negatives[i] ?? 0) + value;
+				else positives[i] = (positives[i] ?? 0) + value;
+			}
 			if (count === 1) {
-				const y = yFor(tops[0] ?? 0, scaleMax);
-				return /* @__PURE__ */ jsx("g", {
+				const y = yFor(tops[0] ?? 0, scale);
+				return /* @__PURE__ */ jsxs("g", {
 					"data-aui": "chart-series",
 					"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE,
-					children: /* @__PURE__ */ jsx("circle", {
+					"data-aui-color": seriesColor(s, seriesCount, color),
+					children: [/* @__PURE__ */ jsx("circle", {
 						cx: CHART_WIDTH / 2,
 						cy: y,
 						r: 2,
 						fill: "currentColor"
-					})
+					}), pointTargets(s, tops, count, scale)]
 				}, seriesIndex);
 			}
 			if (count === 0) return /* @__PURE__ */ jsx("g", {
 				"data-aui": "chart-series",
-				"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE
+				"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE,
+				"data-aui-color": seriesColor(s, seriesCount, color)
 			}, seriesIndex);
-			const topPoints = tops.map((v, i) => `${i / (count - 1) * CHART_WIDTH},${yFor(v, scaleMax)}`);
-			const bottomPoints = bottoms.map((v, i) => `${i / (count - 1) * CHART_WIDTH},${yFor(v, scaleMax)}`).reverse();
+			const topPoints = tops.map((v, i) => `${xFor(i, count)},${yFor(v, scale)}`);
+			const bottomPoints = bottoms.map((v, i) => `${xFor(i, count)},${yFor(v, scale)}`).reverse();
 			return /* @__PURE__ */ jsxs("g", {
 				"data-aui": "chart-series",
 				"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE,
-				children: [/* @__PURE__ */ jsx("polygon", {
-					points: [...topPoints, ...bottomPoints].join(" "),
-					fill: "currentColor",
-					fillOpacity: "0.25"
-				}), /* @__PURE__ */ jsx("polyline", {
-					points: topPoints.join(" "),
-					fill: "none",
-					stroke: "currentColor",
-					vectorEffect: "non-scaling-stroke"
-				})]
+				"data-aui-color": seriesColor(s, seriesCount, color),
+				children: [
+					/* @__PURE__ */ jsx("polygon", {
+						points: [...topPoints, ...bottomPoints].join(" "),
+						fill: "currentColor",
+						fillOpacity: "0.25"
+					}),
+					/* @__PURE__ */ jsx("polyline", {
+						points: topPoints.join(" "),
+						fill: "none",
+						stroke: "currentColor",
+						vectorEffect: "non-scaling-stroke"
+					}),
+					pointTargets(s, tops, count, scale)
+				]
 			}, seriesIndex);
 		});
 	}
-	return series.map((s, seriesIndex) => /* @__PURE__ */ jsx("g", {
+	return series.map((s, seriesIndex) => /* @__PURE__ */ jsxs("g", {
 		"data-aui": "chart-series",
 		"data-aui-series": seriesIndex % SERIES_PALETTE_SIZE,
-		children: count === 1 ? /* @__PURE__ */ jsx("circle", {
+		"data-aui-color": seriesColor(s, series.length, color),
+		children: [count === 1 ? /* @__PURE__ */ jsx("circle", {
 			cx: CHART_WIDTH / 2,
-			cy: yFor(s.values[0] ?? 0, scaleMax),
+			cy: yFor(s.values[0] ?? 0, scale),
 			r: 2,
 			fill: "currentColor"
 		}) : count > 1 ? /* @__PURE__ */ jsx("polyline", {
-			points: s.values.map((v, i) => `${i / (count - 1) * CHART_WIDTH},${yFor(v, scaleMax)}`).join(" "),
+			points: s.values.map((v, i) => `${xFor(i, count)},${yFor(v, scale)}`).join(" "),
 			fill: "none",
 			stroke: "currentColor",
 			vectorEffect: "non-scaling-stroke"
-		}) : null
+		}) : null, variant === "line" ? pointTargets(s, s.values, count, scale) : null]
 	}, seriesIndex));
 }
 const dataVocabulary = {
@@ -179,24 +354,18 @@ const dataVocabulary = {
 		description: "Tabular data. Provide `columns` and `rows`; each row is an array of cells matching the columns.",
 		properties: z.object({
 			columns: z.array(columnSchema).optional().describe("Column definitions."),
-			rows: z.array(z.array(cellSchema)).optional().describe("Rows of cells.")
+			rows: z.array(z.array(cellSchema)).optional().describe("Rows of cells."),
+			sortable: z.boolean().optional().describe("Allow header sorting.")
 		}),
-		render: ({ columns, rows, children }) => {
-			const safeColumns = Array.isArray(columns) ? columns : [];
-			const hasColumns = safeColumns.some(isTableColumn);
-			const safeRows = Array.isArray(rows) ? rows.filter(Array.isArray) : [];
-			return /* @__PURE__ */ jsxs("table", {
-				"data-aui": "table",
-				children: [
-					hasColumns ? /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: safeColumns.map((column, i) => /* @__PURE__ */ jsx("th", {
-						"data-aui": "table-col",
-						children: isTableColumn(column) ? column.label : ""
-					}, i)) }) }) : null,
-					safeRows.length ? /* @__PURE__ */ jsx("tbody", { children: safeRows.map((row, r) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, c) => /* @__PURE__ */ jsx("td", { children: isTableCell(cell) ? String(cell) : "" }, c)) }, r)) }) : null,
-					children
-				]
-			});
-		}
+		render: ({ columns, rows, sortable, children }) => sortable === true ? /* @__PURE__ */ jsx(SortableTable, {
+			columns,
+			rows,
+			children
+		}) : /* @__PURE__ */ jsx(TableView, {
+			columns,
+			rows,
+			children
+		})
 	},
 	Markdown: {
 		description: "A markdown string. Rendered as-is by default; override this component for a full markdown renderer.",
@@ -228,11 +397,18 @@ const dataVocabulary = {
 				const points = Array.isArray(data) ? data : [];
 				const n = points.length;
 				const values = points.map((d) => clampValue(d?.value));
-				const max = values.reduce((m, v) => Math.max(m, v), 0);
+				const scale = valueScale(values);
+				const chartSeries = {
+					label: void 0,
+					color: void 0,
+					values,
+					labels: points.map((point) => typeof point?.label === "string" ? point.label : void 0)
+				};
 				const slot = n > 0 ? CHART_WIDTH / n : 0;
 				const gap = slot * .2;
 				const barWidth = slot - gap;
-				return /* @__PURE__ */ jsx("svg", {
+				const crossesZero = scale.min < 0 && scale.max > 0;
+				return /* @__PURE__ */ jsxs("svg", {
 					"data-aui": "chart",
 					"data-aui-variant": variant,
 					"data-aui-color": color,
@@ -240,33 +416,43 @@ const dataVocabulary = {
 					"aria-label": `${variant} chart with ${n} data points`,
 					viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
 					preserveAspectRatio: "none",
-					children: variant === "bar" ? values.map((v, i) => {
-						const height = max > 0 ? v / max * CHART_HEIGHT : 0;
+					children: [crossesZero ? /* @__PURE__ */ jsx("line", {
+						"data-aui": "chart-zero",
+						x1: 0,
+						x2: CHART_WIDTH,
+						y1: yFor(0, scale),
+						y2: yFor(0, scale),
+						stroke: "currentColor",
+						vectorEffect: "non-scaling-stroke"
+					}) : null, variant === "bar" ? values.map((v, i) => {
+						const { y, height } = barGeometry(v, 0, scale);
 						return /* @__PURE__ */ jsx("rect", {
 							x: i * slot + gap / 2,
-							y: CHART_HEIGHT - height,
+							y,
 							width: barWidth,
 							height,
-							fill: "currentColor"
+							fill: "currentColor",
+							children: /* @__PURE__ */ jsx("title", { children: tooltipText(void 0, chartSeries.labels[i], i, v) })
 						}, i);
-					}) : n === 1 ? /* @__PURE__ */ jsx("circle", {
+					}) : n === 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
 						cx: CHART_WIDTH / 2,
-						cy: yFor(values[0] ?? 0, max),
+						cy: yFor(values[0] ?? 0, scale),
 						r: 2,
 						fill: "currentColor"
-					}) : n > 1 ? /* @__PURE__ */ jsx("polyline", {
-						points: values.map((v, i) => `${i / (n - 1) * CHART_WIDTH},${yFor(v, max)}`).join(" "),
+					}), variant === "line" ? pointTargets(chartSeries, values, n, scale) : null] }) : n > 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("polyline", {
+						points: values.map((v, i) => `${xFor(i, n)},${yFor(v, scale)}`).join(" "),
 						fill: "none",
 						stroke: "currentColor"
-					}) : null
+					}), variant === "line" ? pointTargets(chartSeries, values, n, scale) : null] }) : null]
 				});
 			}
 			const { count, series: normalized } = normalizeSeries(series, data);
 			const stackedScale = !!stacked && (variant === "bar" || variant === "area");
-			const rawMax = computeMax(normalized, count, stackedScale);
-			const scaleMax = showAxis ? niceMax(rawMax) : rawMax;
-			const marks = renderSeriesMarks(variant, normalized, count, scaleMax, stackedScale);
-			const svg = /* @__PURE__ */ jsx("svg", {
+			const rawScale = computeScale(normalized, count, stackedScale);
+			const scale = showAxis ? axisScale(rawScale) : rawScale;
+			const marks = renderSeriesMarks(variant, normalized, count, scale, stackedScale, color);
+			const crossesZero = rawScale.min < 0 && rawScale.max > 0;
+			const svg = /* @__PURE__ */ jsxs("svg", {
 				"data-aui": "chart",
 				"data-aui-variant": variant,
 				"data-aui-color": color,
@@ -274,7 +460,15 @@ const dataVocabulary = {
 				"aria-label": `${variant} chart with ${count} data points`,
 				viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
 				preserveAspectRatio: "none",
-				children: marks
+				children: [crossesZero ? /* @__PURE__ */ jsx("line", {
+					"data-aui": "chart-zero",
+					x1: 0,
+					x2: CHART_WIDTH,
+					y1: yFor(0, scale),
+					y2: yFor(0, scale),
+					stroke: "currentColor",
+					vectorEffect: "non-scaling-stroke"
+				}) : null, marks]
 			});
 			if (!showAxis && !showLegend) return svg;
 			return /* @__PURE__ */ jsxs("div", {
@@ -282,7 +476,7 @@ const dataVocabulary = {
 				children: [
 					showAxis ? /* @__PURE__ */ jsx("div", {
 						"data-aui": "chart-ticks",
-						children: tickValues(scaleMax).map((tick, i) => /* @__PURE__ */ jsx("div", { children: formatTick(tick) }, i))
+						children: tickValues(scale).map((tick, i) => /* @__PURE__ */ jsx("div", { children: formatTick(tick) }, i))
 					}) : null,
 					svg,
 					showAxis ? /* @__PURE__ */ jsx("div", {
@@ -294,6 +488,7 @@ const dataVocabulary = {
 						children: normalized.map((s, i) => /* @__PURE__ */ jsxs("span", {
 							"data-aui": "chart-legend-item",
 							"data-aui-series": i % SERIES_PALETTE_SIZE,
+							"data-aui-color": seriesColor(s, normalized.length, color),
 							children: [/* @__PURE__ */ jsx("span", { "data-aui": "chart-legend-swatch" }), s.label ?? `Series ${i + 1}`]
 						}, i))
 					}) : null