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

package/dist/vocabulary/collectFormValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"collectFormValues.js","names":[],"sources":["../../src/vocabulary/collectFormValues.ts"],"sourcesContent":["import type { FormEvent } from \"react\";\nimport { GENERATED_NAME_ATTR } from \"../constants\";\n\n/**\n * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.\n */\nexport type FormControlElementLike = {\n  readonly name: string;\n  readonly type: string;\n  readonly value: string;\n  readonly checked?: boolean;\n  readonly disabled: boolean;\n  readonly hasAttribute: (name: string) => boolean;\n  readonly matches?: ((selector: string) => boolean) | undefined;\n};\n\n/**\n * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.\n */\nexport function collectFormValues(\n  elements: ArrayLike<FormControlElementLike>,\n): Record<string, unknown> {\n  const values: Record<string, unknown> = Object.create(null);\n\n  for (const element of Array.from(elements)) {\n    const { name, disabled } = element;\n    if (\n      !name ||\n      disabled ||\n      element.hasAttribute(GENERATED_NAME_ATTR) ||\n      element.matches?.(\":disabled\")\n    )\n      continue;\n\n    if (element.type === \"radio\") {\n      if (element.checked) values[name] = element.value;\n      else if (!Object.hasOwn(values, name)) values[name] = undefined;\n      continue;\n    }\n\n    const value: string | boolean =\n      element.type === \"checkbox\" ? (element.checked ?? false) : element.value;\n\n    if (Object.hasOwn(values, name)) {\n      const existing = values[name];\n      values[name] = Array.isArray(existing)\n        ? [...existing, value]\n        : [existing, value];\n    } else {\n      values[name] = value;\n    }\n  }\n\n  return values;\n}\n\n/**\n * Convenience wrapper around {@link collectFormValues} for a native form submit event; the cast from `HTMLFormControlsCollection` to `ArrayLike<FormControlElementLike>` lives here once instead of at every call site.\n */\nexport function collectFormValuesFromEvent(\n  event: FormEvent<HTMLFormElement>,\n): Record<string, unknown> {\n  return collectFormValues(\n    event.currentTarget\n      .elements as unknown as ArrayLike<FormControlElementLike>,\n  );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,kBACd,UACyB;CACzB,MAAM,SAAkC,OAAO,OAAO,IAAI;CAE1D,KAAK,MAAM,WAAW,MAAM,KAAK,QAAQ,GAAG;EAC1C,MAAM,EAAE,MAAM,aAAa;EAC3B,IACE,CAAC,QACD,YACA,QAAQ,aAAA,yBAAgC,KACxC,QAAQ,UAAU,WAAW,GAE7B;EAEF,IAAI,QAAQ,SAAS,SAAS;GAC5B,IAAI,QAAQ,SAAS,OAAO,QAAQ,QAAQ;QACvC,IAAI,CAAC,OAAO,OAAO,QAAQ,IAAI,GAAG,OAAO,QAAQ,KAAA;GACtD;EACF;EAEA,MAAM,QACJ,QAAQ,SAAS,aAAc,QAAQ,WAAW,QAAS,QAAQ;EAErE,IAAI,OAAO,OAAO,QAAQ,IAAI,GAAG;GAC/B,MAAM,WAAW,OAAO;GACxB,OAAO,QAAQ,MAAM,QAAQ,QAAQ,IACjC,CAAC,GAAG,UAAU,KAAK,IACnB,CAAC,UAAU,KAAK;EACtB,OACE,OAAO,QAAQ;CAEnB;CAEA,OAAO;AACT;;;;AAKA,SAAgB,2BACd,OACyB;CACzB,OAAO,kBACL,MAAM,cACH,QACL;AACF"}
+{"version":3,"file":"collectFormValues.js","names":[],"sources":["../../src/vocabulary/collectFormValues.ts"],"sourcesContent":["import type { FormEvent } from \"react\";\nimport {\n  CHECKBOX_GROUP_ATTR,\n  FIELD_NAME_ATTR,\n  FIELD_VALUE_ATTR,\n  GENERATED_NAME_ATTR,\n} from \"../constants\";\nimport {\n  fromLocalDateTime,\n  normalizeTemporalInputValue,\n  toPickerLocalDateTime,\n} from \"../temporal\";\n\n/**\n * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.\n */\nexport type FormControlElementLike = {\n  readonly name: string;\n  readonly type: string;\n  readonly value: string;\n  readonly checked?: boolean;\n  readonly disabled: boolean;\n  readonly hasAttribute: (name: string) => boolean;\n  readonly getAttribute?: ((name: string) => string | null) | undefined;\n  readonly matches?: ((selector: string) => boolean) | undefined;\n};\n\n/**\n * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. A checkbox group resolves to its checked options' values in document order, or an empty array if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. A time or datetime-local control's `data-aui-field-value` preserves the canonical string when its local projection is unchanged; an edited instant retains its original offset and precision. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.\n */\nexport function collectFormValues(\n  elements: ArrayLike<FormControlElementLike>,\n): Record<string, unknown> {\n  const values: Record<string, unknown> = Object.create(null);\n\n  for (const element of Array.from(elements)) {\n    const { disabled } = element;\n    const name = element.getAttribute?.(FIELD_NAME_ATTR) ?? element.name;\n    if (\n      !name ||\n      disabled ||\n      element.hasAttribute(GENERATED_NAME_ATTR) ||\n      element.matches?.(\":disabled\")\n    )\n      continue;\n\n    if (element.type === \"radio\") {\n      if (element.checked) values[name] = element.value;\n      else if (!Object.hasOwn(values, name)) values[name] = undefined;\n      continue;\n    }\n\n    if (\n      element.type === \"checkbox\" &&\n      element.hasAttribute(CHECKBOX_GROUP_ATTR)\n    ) {\n      const existing = values[name];\n      const checked = Array.isArray(existing) ? existing : [];\n      values[name] = element.checked ? [...checked, element.value] : checked;\n      continue;\n    }\n\n    const temporalType =\n      element.type === \"datetime-local\" || element.type === \"time\"\n        ? element.type\n        : element.getAttribute?.(\"type\");\n    const inputValue =\n      temporalType === \"datetime-local\" || temporalType === \"time\"\n        ? normalizeTemporalInputValue(element.value)\n        : element.value;\n    const fieldValue =\n      temporalType === \"datetime-local\" || temporalType === \"time\"\n        ? element.getAttribute?.(FIELD_VALUE_ATTR)\n        : undefined;\n    const value: string | number | boolean =\n      element.type === \"checkbox\"\n        ? (element.checked ?? false)\n        : element.type === \"range\"\n          ? Number(element.value)\n          : fieldValue && inputValue !== \"\"\n            ? normalizeTemporalInputValue(inputValue) ===\n              normalizeTemporalInputValue(\n                temporalType === \"time\"\n                  ? fieldValue\n                  : toPickerLocalDateTime(fieldValue),\n              )\n              ? fieldValue\n              : temporalType === \"datetime-local\"\n                ? fromLocalDateTime(inputValue, fieldValue)\n                : inputValue\n            : inputValue;\n\n    if (Object.hasOwn(values, name)) {\n      const existing = values[name];\n      values[name] = Array.isArray(existing)\n        ? [...existing, value]\n        : [existing, value];\n    } else {\n      values[name] = value;\n    }\n  }\n\n  return values;\n}\n\n/**\n * Convenience wrapper around {@link collectFormValues} for a native form submit event; the cast from `HTMLFormControlsCollection` to `ArrayLike<FormControlElementLike>` lives here once instead of at every call site.\n */\nexport function collectFormValuesFromEvent(\n  event: FormEvent<HTMLFormElement>,\n): Record<string, unknown> {\n  return collectFormValues(\n    event.currentTarget\n      .elements as unknown as ArrayLike<FormControlElementLike>,\n  );\n}\n"],"mappings":";;;;;;AA8BA,SAAgB,kBACd,UACyB;CACzB,MAAM,SAAkC,OAAO,OAAO,IAAI;CAE1D,KAAK,MAAM,WAAW,MAAM,KAAK,QAAQ,GAAG;EAC1C,MAAM,EAAE,aAAa;EACrB,MAAM,OAAO,QAAQ,eAAA,qBAA8B,KAAK,QAAQ;EAChE,IACE,CAAC,QACD,YACA,QAAQ,aAAA,yBAAgC,KACxC,QAAQ,UAAU,WAAW,GAE7B;EAEF,IAAI,QAAQ,SAAS,SAAS;GAC5B,IAAI,QAAQ,SAAS,OAAO,QAAQ,QAAQ;QACvC,IAAI,CAAC,OAAO,OAAO,QAAQ,IAAI,GAAG,OAAO,QAAQ,KAAA;GACtD;EACF;EAEA,IACE,QAAQ,SAAS,cACjB,QAAQ,aAAA,yBAAgC,GACxC;GACA,MAAM,WAAW,OAAO;GACxB,MAAM,UAAU,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC;GACtD,OAAO,QAAQ,QAAQ,UAAU,CAAC,GAAG,SAAS,QAAQ,KAAK,IAAI;GAC/D;EACF;EAEA,MAAM,eACJ,QAAQ,SAAS,oBAAoB,QAAQ,SAAS,SAClD,QAAQ,OACR,QAAQ,eAAe,MAAM;EACnC,MAAM,aACJ,iBAAiB,oBAAoB,iBAAiB,SAClD,4BAA4B,QAAQ,KAAK,IACzC,QAAQ;EACd,MAAM,aACJ,iBAAiB,oBAAoB,iBAAiB,SAClD,QAAQ,eAAe,gBAAgB,IACvC,KAAA;EACN,MAAM,QACJ,QAAQ,SAAS,aACZ,QAAQ,WAAW,QACpB,QAAQ,SAAS,UACf,OAAO,QAAQ,KAAK,IACpB,cAAc,eAAe,KAC3B,4BAA4B,UAAU,MACtC,4BACE,iBAAiB,SACb,aACA,sBAAsB,UAAU,CACtC,IACE,aACA,iBAAiB,mBACf,kBAAkB,YAAY,UAAU,IACxC,aACJ;EAEV,IAAI,OAAO,OAAO,QAAQ,IAAI,GAAG;GAC/B,MAAM,WAAW,OAAO;GACxB,OAAO,QAAQ,MAAM,QAAQ,QAAQ,IACjC,CAAC,GAAG,UAAU,KAAK,IACnB,CAAC,UAAU,KAAK;EACtB,OACE,OAAO,QAAQ;CAEnB;CAEA,OAAO;AACT;;;;AAKA,SAAgB,2BACd,OACyB;CACzB,OAAO,kBACL,MAAM,cACH,QACL;AACF"}

package/dist/vocabulary/data.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { z } from "zod";
 export declare const dataVocabulary: {
     Table: {
@@ -5,10 +6,25 @@ export declare const dataVocabulary: {
         properties: z.ZodObject<{
             columns: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 label: z.ZodString;
+                align: z.ZodOptional<z.ZodEnum<{
+                    start: "start";
+                    end: "end";
+                }>>;
+                format: z.ZodOptional<z.ZodObject<{
+                    kind: z.ZodEnum<{
+                        number: "number";
+                        date: "date";
+                        currency: "currency";
+                        percent: "percent";
+                    }>;
+                    currency: z.ZodOptional<z.ZodString>;
+                    decimals: z.ZodOptional<z.ZodNumber>;
+                }, z.core.$strip>>;
             }, z.core.$strip>>>;
             rows: z.ZodOptional<z.ZodArray<z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean]>>>>;
+            sortable: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>;
-        render: ({ columns, rows, children }: any) => import("react").JSX.Element;
+        render: ({ columns, rows, sortable, children }: any) => React.JSX.Element;
     };
     Markdown: {
         description: string;
@@ -16,16 +32,16 @@ export declare const dataVocabulary: {
             value: z.ZodString;
         }, z.core.$strip>;
         streamProperties: true;
-        render: ({ value, children }: any) => import("react").JSX.Element;
+        render: ({ value, children }: any) => React.JSX.Element;
     };
     Chart: {
         description: string;
         properties: z.ZodObject<{
             variant: z.ZodEnum<{
-                bar: "bar";
+                area: "area";
                 line: "line";
+                bar: "bar";
                 sparkline: "sparkline";
-                area: "area";
             }>;
             data: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 label: z.ZodOptional<z.ZodString>;
@@ -33,6 +49,7 @@ export declare const dataVocabulary: {
             }, z.core.$strip>>>;
             series: z.ZodOptional<z.ZodArray<z.ZodObject<{
                 label: z.ZodOptional<z.ZodString>;
+                color: z.ZodOptional<z.ZodString>;
                 data: z.ZodArray<z.ZodObject<{
                     label: z.ZodOptional<z.ZodString>;
                     value: z.ZodNumber;
@@ -43,7 +60,7 @@ export declare const dataVocabulary: {
             showLegend: z.ZodOptional<z.ZodBoolean>;
             color: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>;
-        render: ({ variant, data, series, stacked, showAxis, showLegend, color, }: any) => import("react").JSX.Element;
+        render: ({ variant, data, series, stacked, showAxis, showLegend, color, }: any) => React.JSX.Element;
     };
 };
 //# sourceMappingURL=data.d.ts.map

package/dist/vocabulary/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/vocabulary/data.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAmSxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOI,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/vocabulary/data.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAojBxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6PI,CAAC"}

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