@adea-ai/ui 0.99.1 → 0.99.3

package/dist/components/ui/chart/chart.js

@@ -1,13 +1,15 @@
 import { cn } from "../../../lib/utils.js";
-import { Dynamic, className, createComponent, effect, insert, setStyleProperty, template } from "solid-js/web";
-import { For, splitProps } from "solid-js";
+import { chartOptions, chartSeriesColors, mergeChartOptions, resolveCssVariables } from "./chart-options.js";
+import { Dynamic, className, createComponent, effect, insert, setStyleProperty, template, use } from "solid-js/web";
+import { For, Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
 import { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from "solid-chartjs";
 import { ArcElement, BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, LogarithmicScale, PointElement, RadialLinearScale, Tooltip } from "chart.js";
 //#region src/components/ui/chart/chart.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<figure><figcaption class="flex items-start justify-between gap-3"><div><h3 class="text-sm font-semibold text-foreground">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<ul>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<li class="flex items-center gap-1.5 text-2xs text-muted-foreground"><span class="size-2 shrink-0 rounded-full"aria-hidden=true>`);
+var _tmpl$ = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<figure><figcaption class="flex items-start justify-between gap-3"><div><h3 class="text-sm font-semibold text-foreground">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<ul>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<li class="flex items-center gap-1.5 text-2xs text-muted-foreground"><span class="size-2 shrink-0 rounded-full"aria-hidden=true>`);
 /**
 * Chart.
 *
@@ -36,11 +38,16 @@ var _tmpl$4 = /*#__PURE__*/ template(`<li class="flex items-center gap-1.5 text-
 *
 * ## Theming
 *
-* Colours resolve from `--chart-1` through `--chart-5`, which every theme
-* defines, plus `--chart-grid`, `--chart-axis` and `--chart-label`. That means a
-* chart follows the accent axis, the appearance, and the font axis with no
-* per-chart configuration — and a caller that wants a specific series colour
-* passes it explicitly rather than reaching into the theme.
+* Colours come from `--chart-1` through `--chart-5`, which every theme
+* defines, and the grid, ticks and labels from `--border` and
+* `--muted-foreground`. That means a chart follows the accent axis and the
+* appearance with no per-chart configuration — and a caller that wants a
+* specific series colour passes it explicitly, as a colour or as `var(--token)`.
+*
+* A canvas cannot read a custom property, so the options and datasets carry
+* `var(--token)` strings and each chart resolves them against its own element
+* when it renders, and again whenever the root's attributes change — the
+* `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
 */
 /**
 * Register a piece with Chart.js. The escape hatch for a caller's own chart type.
@@ -53,83 +60,66 @@ function registerChartPiece(piece) {
 	Chart.register(piece);
 }
 Chart.register(CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, PointElement, LineElement, BarElement, ArcElement, Filler, Tooltip, Legend);
-/** The five series colours, in the order a multi-series chart should use them. */
-var chartSeriesColors = [
-	"var(--chart-1)",
-	"var(--chart-2)",
-	"var(--chart-3)",
-	"var(--chart-4)",
-	"var(--chart-5)"
-];
 /**
-* The theme's defaults as Chart.js options.
+* One pixel to paint a colour on, shared by every chart.
 *
-* Exported so a caller can spread it and change one thing, rather than
-* restating every colour. Everything a chart draws that is not data — grid,
-* ticks, legend, tooltip — is decided here once, which is what makes two charts
-* in one application look like they came from the same place.
+* The canvas *paints* `oklch()`, but Chart.js also *parses* colours — to derive a
+* hover shade and to animate between two colours — and its parser reads only
+* rgb, hsl, hex and names. Painting the computed value and reading the pixel
+* back gives the sRGB colour the canvas would have drawn anyway, in a form both
+* understand, whatever syntax a theme uses (`oklch()`, `color-mix()`, …).
 */
-function chartOptions(overrides) {
+var swatch;
+function toCanvasColor(value) {
+	if (typeof CSS === "undefined" || !CSS.supports("color", value)) return value;
+	if (swatch === void 0) {
+		const canvas = document.createElement("canvas");
+		canvas.width = 1;
+		canvas.height = 1;
+		swatch = canvas.getContext("2d", { willReadFrequently: true });
+	}
+	if (!swatch) return value;
+	swatch.globalCompositeOperation = "copy";
+	swatch.fillStyle = value;
+	swatch.fillRect(0, 0, 1, 1);
+	const [r, g, b, a] = swatch.getImageData(0, 0, 1, 1).data;
+	return `rgba(${r}, ${g}, ${b}, ${Math.round((a ?? 255) / 255 * 1e3) / 1e3})`;
+}
+/**
+* Resolves `var(--token)` strings against a chart's element, and re-resolves
+* them when the theme changes.
+*
+* The element rather than the root, so a chart inside a subtree with its own
+* inline tokens takes those. The observer watches every attribute on `<html>`,
+* because that is where both applications switch appearance, accent and theme
+* (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added
+* later is covered without touching this. It is released with the chart.
+*/
+function createThemeResolver() {
+	let element;
+	const [revision, invalidate] = createSignal(void 0, { equals: false });
+	onMount(() => {
+		const observer = new MutationObserver(() => invalidate());
+		observer.observe(document.documentElement, { attributes: true });
+		onCleanup(() => observer.disconnect());
+	});
 	return {
-		responsive: true,
-		maintainAspectRatio: false,
-		interaction: {
-			mode: "nearest",
-			intersect: false
+		ref: (el) => {
+			element = el;
 		},
-		plugins: {
-			legend: { labels: {
-				color: "var(--chart-label)",
-				boxWidth: 8,
-				boxHeight: 8,
-				usePointStyle: true,
-				pointStyle: "circle",
-				font: { size: 11 }
-			} },
-			tooltip: {
-				backgroundColor: "var(--popover)",
-				titleColor: "var(--popover-foreground)",
-				bodyColor: "var(--popover-foreground)",
-				borderColor: "var(--border)",
-				borderWidth: 1,
-				padding: 8,
-				cornerRadius: 6,
-				displayColors: true,
-				boxWidth: 8,
-				boxHeight: 8,
-				usePointStyle: true,
-				titleFont: {
-					size: 11,
-					weight: 600
-				},
-				bodyFont: { size: 11 }
-			}
-		},
-		scales: {
-			x: {
-				border: { color: "var(--chart-grid)" },
-				grid: {
-					color: "var(--chart-grid)",
-					drawTicks: false
-				},
-				ticks: {
-					color: "var(--chart-axis)",
-					font: { size: 10 }
-				}
-			},
-			y: {
-				border: { display: false },
-				grid: {
-					color: "var(--chart-grid)",
-					drawTicks: false
-				},
-				ticks: {
-					color: "var(--chart-axis)",
-					font: { size: 10 }
+		resolve(value) {
+			revision();
+			if (!element || typeof getComputedStyle === "undefined") return value;
+			const style = getComputedStyle(element);
+			const resolved = /* @__PURE__ */ new Map();
+			return resolveCssVariables(value, (name) => {
+				if (!resolved.has(name)) {
+					const raw = style.getPropertyValue(name).trim();
+					resolved.set(name, raw ? toCanvasColor(raw) : void 0);
 				}
-			}
-		},
-		...overrides
+				return resolved.get(name);
+			});
+		}
 	};
 }
 function ChartFrame(props) {
@@ -141,9 +131,18 @@ function ChartFrame(props) {
 		"class"
 	]);
 	return (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
 		insert(_el$4, () => local.title);
-		insert(_el$3, () => local.description, null);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return local.description;
+			},
+			get children() {
+				var _el$5 = _tmpl$();
+				insert(_el$5, () => local.description);
+				return _el$5;
+			}
+		}), null);
 		insert(_el$2, () => local.actions, null);
 		insert(_el$, () => local.children, null);
 		effect(() => className(_el$, cn("grid gap-3 rounded-lg border border-border bg-card p-4", local.class)));
@@ -171,127 +170,148 @@ function datasetsFor(series, filled) {
 		fill: filled
 	}));
 }
-function seriesOptions(props, extra) {
-	return chartOptions({
-		...extra,
-		...props.stacked ? { scales: {
-			...extra?.scales,
-			x: { stacked: true },
-			y: { stacked: true }
-		} } : {},
-		...props.options
-	});
+function seriesOptions(props, extra, shape = "cartesian") {
+	const stacked = props.stacked && shape === "cartesian" ? { scales: {
+		x: { stacked: true },
+		y: { stacked: true }
+	} } : void 0;
+	return chartOptions(mergeChartOptions(extra, stacked, props.options), shape);
 }
 /** A line chart. The default for a series over time. */
 function LineChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$5 = _tmpl$2();
-		insert(_el$5, createComponent(Line, {
+		var _el$6 = _tmpl$3();
+		var _ref$ = theme.ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$6) : theme.ref = _el$6;
+		insert(_el$6, createComponent(Line, {
 			get data() {
-				return {
+				return theme.resolve({
 					labels: [...props.labels],
 					datasets: datasetsFor(props.series, props.area ?? false)
-				};
+				});
 			},
 			get options() {
-				return seriesOptions(props);
+				return theme.resolve(seriesOptions(props));
 			}
 		}));
-		effect(() => className(_el$5, cn("h-64", props.class)));
-		return _el$5;
+		effect(() => className(_el$6, cn("h-64", props.class)));
+		return _el$6;
 	})();
 }
 /** A bar chart. `stacked` for parts of a whole over categories. */
 function BarChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$6 = _tmpl$2();
-		insert(_el$6, createComponent(Bar, {
+		var _el$7 = _tmpl$3();
+		var _ref$2 = theme.ref;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$7) : theme.ref = _el$7;
+		insert(_el$7, createComponent(Bar, {
 			get data() {
-				return {
+				return theme.resolve({
 					labels: [...props.labels],
 					datasets: datasetsFor(props.series, true).map((dataset) => ({
 						...dataset,
 						borderWidth: 0,
 						borderRadius: 3
 					}))
-				};
+				});
 			},
 			get options() {
-				return seriesOptions(props, { indexAxis: props.horizontal ? "y" : "x" });
+				return theme.resolve(seriesOptions(props, { indexAxis: props.horizontal ? "y" : "x" }));
 			}
 		}));
-		effect(() => className(_el$6, cn("h-64", props.class)));
-		return _el$6;
+		effect(() => className(_el$7, cn("h-64", props.class)));
+		return _el$7;
 	})();
 }
 /** A scatter plot, for a correlation rather than a series. */
 function ScatterChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$7 = _tmpl$2();
-		insert(_el$7, createComponent(Scatter, {
+		var _el$8 = _tmpl$3();
+		var _ref$3 = theme.ref;
+		typeof _ref$3 === "function" ? use(_ref$3, _el$8) : theme.ref = _el$8;
+		insert(_el$8, createComponent(Scatter, {
 			get data() {
-				return { datasets: props.series.map((entry, index) => ({
+				return theme.resolve({ datasets: props.series.map((entry, index) => ({
 					label: entry.label,
 					data: entry.data.map((point) => ({ ...point })),
 					backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
 					pointRadius: 3,
 					pointHoverRadius: 5
-				})) };
+				})) });
 			},
 			get options() {
-				return chartOptions(props.options);
+				return theme.resolve(chartOptions(props.options));
 			}
 		}));
-		effect(() => className(_el$7, cn("h-64", props.class)));
-		return _el$7;
+		effect(() => className(_el$8, cn("h-64", props.class)));
+		return _el$8;
 	})();
 }
 /** A bubble chart: scatter with a third dimension carried by the radius. */
 function BubbleChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$8 = _tmpl$2();
-		insert(_el$8, createComponent(Bubble, {
+		var _el$9 = _tmpl$3();
+		var _ref$4 = theme.ref;
+		typeof _ref$4 === "function" ? use(_ref$4, _el$9) : theme.ref = _el$9;
+		insert(_el$9, createComponent(Bubble, {
 			get data() {
-				return { datasets: props.series.map((entry, index) => ({
+				return theme.resolve({ datasets: props.series.map((entry, index) => ({
 					label: entry.label,
 					data: entry.data.map((point) => ({ ...point })),
 					backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length]
-				})) };
+				})) });
 			},
 			get options() {
-				return chartOptions(props.options);
+				return theme.resolve(chartOptions(props.options));
 			}
 		}));
-		effect(() => className(_el$8, cn("h-64", props.class)));
-		return _el$8;
+		effect(() => className(_el$9, cn("h-64", props.class)));
+		return _el$9;
 	})();
 }
 /** A radar chart, for a profile across fixed axes. */
 function RadarChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$9 = _tmpl$2();
-		insert(_el$9, createComponent(Radar, {
+		var _el$0 = _tmpl$3();
+		var _ref$5 = theme.ref;
+		typeof _ref$5 === "function" ? use(_ref$5, _el$0) : theme.ref = _el$0;
+		insert(_el$0, createComponent(Radar, {
 			get data() {
-				return {
+				return theme.resolve({
 					labels: [...props.labels],
 					datasets: datasetsFor(props.series, true)
-				};
+				});
 			},
 			get options() {
-				return seriesOptions(props, { scales: { r: { grid: { color: "var(--chart-grid)" } } } });
+				return theme.resolve(seriesOptions(props, void 0, "radial"));
 			}
 		}));
-		effect(() => className(_el$9, cn("h-64", props.class)));
-		return _el$9;
+		effect(() => className(_el$0, cn("h-64", props.class)));
+		return _el$0;
 	})();
 }
-/** A polar area chart: radial bars, for a composition. */
+/**
+* A polar area chart: radial bars, for a composition.
+*
+* Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
+* `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
+* but radar when it first creates the chart, so radial styling here would apply
+* only after the first theme change — a chart that restyles itself on a toggle.
+*/
 function PolarAreaChart(props) {
+	const theme = createThemeResolver();
 	return (() => {
-		var _el$0 = _tmpl$2();
-		insert(_el$0, createComponent(PolarArea, {
+		var _el$1 = _tmpl$3();
+		var _ref$6 = theme.ref;
+		typeof _ref$6 === "function" ? use(_ref$6, _el$1) : theme.ref = _el$1;
+		insert(_el$1, createComponent(PolarArea, {
 			get data() {
-				return {
+				return theme.resolve({
 					labels: [...props.labels],
 					datasets: [{
 						data: [...props.data],
@@ -299,14 +319,14 @@ function PolarAreaChart(props) {
 						borderColor: "var(--card)",
 						borderWidth: 2
 					}]
-				};
+				});
 			},
 			get options() {
-				return chartOptions(props.options);
+				return theme.resolve(chartOptions(props.options, "none"));
 			}
 		}));
-		effect(() => className(_el$0, cn("h-64", props.class)));
-		return _el$0;
+		effect(() => className(_el$1, cn("h-64", props.class)));
+		return _el$1;
 	})();
 }
 /**
@@ -319,15 +339,18 @@ function PolarAreaChart(props) {
 * past that, the smallest slices become unreadable and their labels collide.
 */
 function DonutChart(props) {
+	const theme = createThemeResolver();
 	const component = () => props.cutout === 0 ? Pie : Doughnut;
 	return (() => {
-		var _el$1 = _tmpl$2();
-		insert(_el$1, createComponent(Dynamic, {
+		var _el$10 = _tmpl$3();
+		var _ref$7 = theme.ref;
+		typeof _ref$7 === "function" ? use(_ref$7, _el$10) : theme.ref = _el$10;
+		insert(_el$10, createComponent(Dynamic, {
 			get component() {
 				return component();
 			},
 			get data() {
-				return {
+				return theme.resolve({
 					labels: [...props.labels],
 					datasets: [{
 						data: [...props.data],
@@ -335,36 +358,33 @@ function DonutChart(props) {
 						borderColor: "var(--card)",
 						borderWidth: 2
 					}]
-				};
+				});
 			},
 			get options() {
-				return chartOptions({
-					...props.options,
-					...props.cutout === 0 ? {} : { cutout: `${props.cutout ?? 60}%` }
-				});
+				return theme.resolve(chartOptions(mergeChartOptions(props.cutout === 0 ? void 0 : { cutout: `${props.cutout ?? 60}%` }, props.options), "none"));
 			}
 		}));
-		effect(() => className(_el$1, cn("h-64", props.class)));
-		return _el$1;
+		effect(() => className(_el$10, cn("h-64", props.class)));
+		return _el$10;
 	})();
 }
 /** A legend built from the same five colours, for a chart whose legend is elsewhere. */
 function ChartLegend(props) {
 	return (() => {
-		var _el$10 = _tmpl$3();
-		insert(_el$10, createComponent(For, {
+		var _el$11 = _tmpl$4();
+		insert(_el$11, createComponent(For, {
 			get each() {
 				return props.series;
 			},
 			children: (entry, index) => (() => {
-				var _el$11 = _tmpl$4(), _el$12 = _el$11.firstChild;
-				insert(_el$11, () => entry.label, null);
-				effect((_$p) => setStyleProperty(_el$12, "background", entry.color ?? chartSeriesColors[index() % chartSeriesColors.length]));
-				return _el$11;
+				var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild;
+				insert(_el$12, () => entry.label, null);
+				effect((_$p) => setStyleProperty(_el$13, "background", entry.color ?? chartSeriesColors[index() % chartSeriesColors.length]));
+				return _el$12;
 			})()
 		}));
-		effect(() => className(_el$10, cn("flex flex-wrap items-center gap-x-3 gap-y-1", props.class)));
-		return _el$10;
+		effect(() => className(_el$11, cn("flex flex-wrap items-center gap-x-3 gap-y-1", props.class)));
+		return _el$11;
 	})();
 }
 //#endregion

package/dist/components/ui/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":["For","splitProps","JSX","Dynamic","Bar","Bubble","Doughnut","Line","Pie","PolarArea","Radar","Scatter","Chart","ChartJs","ArcElement","BarElement","CategoryScale","Filler","Legend","LineElement","LinearScale","LogarithmicScale","PointElement","RadialLinearScale","Tooltip","ChartTooltip","ChartOptions","ChartType","cn","registerChartPiece","piece","Parameters","register","chartSeriesColors","const","chartOptions","overrides","responsive","maintainAspectRatio","interaction","mode","intersect","plugins","legend","labels","color","boxWidth","boxHeight","usePointStyle","pointStyle","font","size","tooltip","backgroundColor","titleColor","bodyColor","borderColor","borderWidth","padding","cornerRadius","displayColors","titleFont","weight","bodyFont","scales","x","border","grid","drawTicks","ticks","y","display","ChartFrameProps","title","description","actions","Element","children","class","ChartFrame","props","local","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","_$insert","_$effect","_$className","SeriesChartProps","series","label","data","options","stacked","datasetsFor","filled","map","entry","index","length","pointBackgroundColor","pointRadius","pointHoverRadius","tension","fill","seriesOptions","extra","LineChart","area","_el$5","_tmpl$2","_$createComponent","datasets","BarChart","horizontal","_el$6","dataset","borderRadius","indexAxis","ScatterChart","_el$7","point","BubbleChart","r","_el$8","RadarChart","_el$9","PolarAreaChart","_el$0","DonutChart","cutout","component","_el$1","_","ChartLegend","_el$10","_tmpl$3","each","_el$11","_tmpl$4","_el$12","_$p","_$setStyleProperty","ChartJs","ChartTooltip","_$className","_$createComponent","_$setStyleProperty"],"sources":["../../../../src/components/ui/chart/chart.tsx"],"sourcesContent":["import { For, splitProps, type JSX } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from 'solid-chartjs'\nimport {\n  Chart as ChartJs,\n  ArcElement,\n  BarElement,\n  CategoryScale,\n  Filler,\n  Legend,\n  LineElement,\n  LinearScale,\n  LogarithmicScale,\n  PointElement,\n  RadialLinearScale,\n  Tooltip as ChartTooltip,\n} from 'chart.js'\nimport type { ChartOptions, ChartType } from 'chart.js'\nimport { cn } from '#lib/utils'\n\n/**\n * Chart.\n *\n * A thin wrapper over Chart.js, themed through the same CSS custom properties as\n * everything else. The wrapper is thin on purpose: a design system's job here is\n * to make a chart *look like the rest of the application* — the palette, the\n * type scale, the tooltip surface, the grid lines — and not to re-implement\n * scales and axes, which is where a hand-rolled chart goes wrong.\n *\n * ## Registration, and why it is here rather than left to the caller\n *\n * Chart.js is tree-shakeable through explicit registration: nothing is bundled\n * until a controller, a scale or a plugin is registered. That is the whole reason\n * it was chosen over a batteries-included charting library, and it only pays off\n * if the registrations are scoped to what a component actually uses.\n *\n * This module registers the **shared** pieces once — scales, elements, tooltip,\n * legend, filler — and nothing else. The controllers are imported per component\n * so a `LineChart` does not carry the radar controller, and a consumer that\n * imports only `LineChart` gets only that. Measured: see the story for the\n * per-component figures the tree-shaking gate publishes.\n *\n * A caller with a chart type this file does not export registers its own\n * controller with `registerChartPiece`, which is the escape hatch rather than a\n * reason to widen the registration above.\n *\n * ## Theming\n *\n * Colours resolve from `--chart-1` through `--chart-5`, which every theme\n * defines, plus `--chart-grid`, `--chart-axis` and `--chart-label`. That means a\n * chart follows the accent axis, the appearance, and the font axis with no\n * per-chart configuration — and a caller that wants a specific series colour\n * passes it explicitly rather than reaching into the theme.\n */\n\n/**\n * Register a piece with Chart.js. The escape hatch for a caller's own chart type.\n *\n * `solid-chartjs` re-exports the typed components but not the registry, so\n * registration comes from `chart.js` itself — which is also the honest place for\n * it, since the registry is Chart.js's global.\n */\nexport function registerChartPiece(piece: Parameters<typeof ChartJs.register>[number]): void {\n  ChartJs.register(piece)\n}\n\nChartJs.register(\n  CategoryScale,\n  LinearScale,\n  LogarithmicScale,\n  RadialLinearScale,\n  PointElement,\n  LineElement,\n  BarElement,\n  ArcElement,\n  Filler,\n  ChartTooltip,\n  Legend\n)\n\n/** The five series colours, in the order a multi-series chart should use them. */\nexport const chartSeriesColors = [\n  'var(--chart-1)',\n  'var(--chart-2)',\n  'var(--chart-3)',\n  'var(--chart-4)',\n  'var(--chart-5)',\n] as const\n\n/**\n * The theme's defaults as Chart.js options.\n *\n * Exported so a caller can spread it and change one thing, rather than\n * restating every colour. Everything a chart draws that is not data — grid,\n * ticks, legend, tooltip — is decided here once, which is what makes two charts\n * in one application look like they came from the same place.\n */\nexport function chartOptions(overrides?: ChartOptions): ChartOptions {\n  return {\n    responsive: true,\n    maintainAspectRatio: false,\n    interaction: { mode: 'nearest', intersect: false },\n    plugins: {\n      legend: {\n        labels: {\n          color: 'var(--chart-label)',\n          boxWidth: 8,\n          boxHeight: 8,\n          usePointStyle: true,\n          pointStyle: 'circle',\n          font: { size: 11 },\n        },\n      },\n      tooltip: {\n        backgroundColor: 'var(--popover)',\n        titleColor: 'var(--popover-foreground)',\n        bodyColor: 'var(--popover-foreground)',\n        borderColor: 'var(--border)',\n        borderWidth: 1,\n        padding: 8,\n        cornerRadius: 6,\n        displayColors: true,\n        boxWidth: 8,\n        boxHeight: 8,\n        usePointStyle: true,\n        titleFont: { size: 11, weight: 600 },\n        bodyFont: { size: 11 },\n      },\n    },\n    scales: {\n      x: {\n        border: { color: 'var(--chart-grid)' },\n        grid: { color: 'var(--chart-grid)', drawTicks: false },\n        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },\n      },\n      y: {\n        border: { display: false },\n        grid: { color: 'var(--chart-grid)', drawTicks: false },\n        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },\n      },\n    },\n    ...overrides,\n  }\n}\n\n/** A chart's frame: a bordered surface with a title and an optional description. */\nexport type ChartFrameProps = {\n  /** The chart's title. Required — a chart with no name is not readable. */\n  title: string\n  /** What the chart shows. Announced to assistive technology, and drawn. */\n  description?: string\n  /** Trailing controls. */\n  actions?: JSX.Element\n  children: JSX.Element\n  class?: string\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n  const [local] = splitProps(props, ['title', 'description', 'actions', 'children', 'class'])\n\n  return (\n    <figure class={cn('grid gap-3 rounded-lg border border-border bg-card p-4', local.class)}>\n      <figcaption class=\"flex items-start justify-between gap-3\">\n        <div>\n          <h3 class=\"text-sm font-semibold text-foreground\">{local.title}</h3>\n          {local.description}\n        </div>\n        {local.actions}\n      </figcaption>\n      {local.children}\n    </figure>\n  )\n}\n\ntype SeriesChartProps = {\n  /** The category labels along the axis. */\n  labels: readonly string[]\n  /** One entry per series. `data` is aligned to `labels`. */\n  series: readonly { label: string; data: readonly number[]; color?: string }[]\n  /** Chart.js options, merged over the theme's defaults. */\n  options?: ChartOptions\n  /** Stack the series. */\n  stacked?: boolean\n  class?: string\n}\n\n/**\n * The data as Chart.js datasets, with the theme's colours applied in order and\n * the series' own colour winning when it has one.\n *\n * `fill: false` and a 2px border are deliberate: a filled line chart is a\n * different chart, and a 1px line at a 12px label size reads as a grid line.\n */\nfunction datasetsFor(series: SeriesChartProps['series'], filled: boolean) {\n  return series.map((entry, index) => ({\n    label: entry.label,\n    data: [...entry.data],\n    borderColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    pointBackgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    borderWidth: 2,\n    pointRadius: 0,\n    pointHoverRadius: 4,\n    tension: 0.3,\n    fill: filled,\n  }))\n}\n\nfunction seriesOptions(props: SeriesChartProps, extra?: ChartOptions): ChartOptions {\n  return chartOptions({\n    ...extra,\n    ...(props.stacked\n      ? { scales: { ...extra?.scales, x: { stacked: true }, y: { stacked: true } } }\n      : {}),\n    ...props.options,\n  })\n}\n\n/** A line chart. The default for a series over time. */\nexport function LineChart(props: SeriesChartProps & { area?: boolean }) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Line\n        data={{\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, props.area ?? false),\n        }}\n        options={seriesOptions(props)}\n      />\n    </div>\n  )\n}\n\n/** A bar chart. `stacked` for parts of a whole over categories. */\nexport function BarChart(props: SeriesChartProps & { horizontal?: boolean }) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Bar\n        data={{\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, true).map((dataset) => ({\n            ...dataset,\n            borderWidth: 0,\n            borderRadius: 3,\n          })),\n        }}\n        options={seriesOptions(props, { indexAxis: props.horizontal ? 'y' : 'x' })}\n      />\n    </div>\n  )\n}\n\n/** A scatter plot, for a correlation rather than a series. */\nexport function ScatterChart(props: {\n  series: readonly { label: string; data: readonly { x: number; y: number }[]; color?: string }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Scatter\n        data={{\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n            pointRadius: 3,\n            pointHoverRadius: 5,\n          })),\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/** A bubble chart: scatter with a third dimension carried by the radius. */\nexport function BubbleChart(props: {\n  series: readonly {\n    label: string\n    data: readonly { x: number; y: number; r: number }[]\n    color?: string\n  }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Bubble\n        data={{\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n          })),\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/** A radar chart, for a profile across fixed axes. */\nexport function RadarChart(props: SeriesChartProps) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Radar\n        data={{ labels: [...props.labels], datasets: datasetsFor(props.series, true) }}\n        options={seriesOptions(props, { scales: { r: { grid: { color: 'var(--chart-grid)' } } } })}\n      />\n    </div>\n  )\n}\n\n/** A polar area chart: radial bars, for a composition. */\nexport function PolarAreaChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  options?: ChartOptions\n  class?: string\n}) {\n  return (\n    <div class={cn('h-64', props.class)}>\n      <PolarArea\n        data={{\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: [...chartSeriesColors],\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        }}\n        options={chartOptions(props.options)}\n      />\n    </div>\n  )\n}\n\n/**\n * A doughnut or a pie, for a composition with few enough slices to name.\n *\n * Both are one component because the only difference is the hole, and a caller\n * choosing between them is choosing a ratio rather than a chart. `cutout` is the\n * hole's share of the radius: 0 is a pie, 60% is the doughnut most dashboards\n * mean. A composition with more than about six slices should be a bar chart —\n * past that, the smallest slices become unreadable and their labels collide.\n */\nexport function DonutChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  /** The hole, as a percentage of the radius. 0 for a pie. */\n  cutout?: number\n  options?: ChartOptions\n  class?: string\n}) {\n  // `Dynamic` rather than a local component accessor: Solid's JSX types require\n  // a component reference, and an accessor returning one is a call in disguise.\n  const component = () => (props.cutout === 0 ? Pie : Doughnut)\n  return (\n    <div class={cn('h-64', props.class)}>\n      <Dynamic\n        component={component()}\n        data={{\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: props.labels.map(\n                (_, index) => chartSeriesColors[index % chartSeriesColors.length]\n              ),\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        }}\n        options={chartOptions({\n          ...props.options,\n          ...(props.cutout === 0 ? {} : { cutout: `${props.cutout ?? 60}%` }),\n        })}\n      />\n    </div>\n  )\n}\n\n/** A legend built from the same five colours, for a chart whose legend is elsewhere. */\nexport function ChartLegend(props: {\n  series: readonly { label: string; color?: string }[]\n  class?: string\n}) {\n  return (\n    <ul class={cn('flex flex-wrap items-center gap-x-3 gap-y-1', props.class)}>\n      <For each={props.series}>\n        {(entry, index) => (\n          <li class=\"flex items-center gap-1.5 text-2xs text-muted-foreground\">\n            <span\n              class=\"size-2 shrink-0 rounded-full\"\n              style={{\n                background: entry.color ?? chartSeriesColors[index() % chartSeriesColors.length],\n              }}\n              aria-hidden=\"true\"\n            />\n            {entry.label}\n          </li>\n        )}\n      </For>\n    </ul>\n  )\n}\n\nexport type { ChartType, ChartOptions }\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":["For","Show","createSignal","onCleanup","onMount","splitProps","JSX","Dynamic","Bar","Bubble","Doughnut","Line","Pie","PolarArea","Radar","Scatter","Chart","ChartJs","ArcElement","BarElement","CategoryScale","Filler","Legend","LineElement","LinearScale","LogarithmicScale","PointElement","RadialLinearScale","Tooltip","ChartTooltip","ChartOptions","ChartType","cn","chartOptions","chartSeriesColors","mergeChartOptions","resolveCssVariables","ChartScaleShape","registerChartPiece","piece","Parameters","register","swatch","CanvasRenderingContext2D","toCanvasColor","value","CSS","supports","undefined","canvas","document","createElement","width","height","getContext","willReadFrequently","globalCompositeOperation","fillStyle","fillRect","r","g","b","a","getImageData","data","Math","round","createThemeResolver","element","HTMLElement","revision","invalidate","equals","observer","MutationObserver","observe","documentElement","attributes","disconnect","ref","el","resolve","T","getComputedStyle","style","resolved","Map","name","has","raw","getPropertyValue","trim","set","get","ChartFrameProps","title","description","actions","Element","children","class","ChartFrame","props","local","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_$insert","_$createComponent","when","_el$5","_tmpl$","_$effect","_$className","SeriesChartProps","labels","series","label","color","options","stacked","datasetsFor","filled","map","entry","index","borderColor","length","backgroundColor","pointBackgroundColor","borderWidth","pointRadius","pointHoverRadius","tension","fill","seriesOptions","extra","shape","scales","x","y","LineChart","area","theme","_el$6","_tmpl$3","_ref$","_$use","datasets","BarChart","horizontal","_el$7","_ref$2","dataset","borderRadius","indexAxis","ScatterChart","_el$8","_ref$3","point","BubbleChart","_el$9","_ref$4","RadarChart","_el$0","_ref$5","PolarAreaChart","_el$1","_ref$6","DonutChart","cutout","component","_el$10","_ref$7","_","ChartLegend","_el$11","_tmpl$4","each","_el$12","_tmpl$5","_el$13","_$p","_$setStyleProperty","ChartJs","ChartTooltip","_$createComponent","_$className","_$use","_$setStyleProperty"],"sources":["../../../../src/components/ui/chart/chart.tsx"],"sourcesContent":["import { For, Show, createSignal, onCleanup, onMount, splitProps, type JSX } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from 'solid-chartjs'\nimport {\n  Chart as ChartJs,\n  ArcElement,\n  BarElement,\n  CategoryScale,\n  Filler,\n  Legend,\n  LineElement,\n  LinearScale,\n  LogarithmicScale,\n  PointElement,\n  RadialLinearScale,\n  Tooltip as ChartTooltip,\n} from 'chart.js'\nimport type { ChartOptions, ChartType } from 'chart.js'\nimport { cn } from '#lib/utils'\nimport {\n  chartOptions,\n  chartSeriesColors,\n  mergeChartOptions,\n  resolveCssVariables,\n  type ChartScaleShape,\n} from './chart-options'\n\n/**\n * Chart.\n *\n * A thin wrapper over Chart.js, themed through the same CSS custom properties as\n * everything else. The wrapper is thin on purpose: a design system's job here is\n * to make a chart *look like the rest of the application* — the palette, the\n * type scale, the tooltip surface, the grid lines — and not to re-implement\n * scales and axes, which is where a hand-rolled chart goes wrong.\n *\n * ## Registration, and why it is here rather than left to the caller\n *\n * Chart.js is tree-shakeable through explicit registration: nothing is bundled\n * until a controller, a scale or a plugin is registered. That is the whole reason\n * it was chosen over a batteries-included charting library, and it only pays off\n * if the registrations are scoped to what a component actually uses.\n *\n * This module registers the **shared** pieces once — scales, elements, tooltip,\n * legend, filler — and nothing else. The controllers are imported per component\n * so a `LineChart` does not carry the radar controller, and a consumer that\n * imports only `LineChart` gets only that. Measured: see the story for the\n * per-component figures the tree-shaking gate publishes.\n *\n * A caller with a chart type this file does not export registers its own\n * controller with `registerChartPiece`, which is the escape hatch rather than a\n * reason to widen the registration above.\n *\n * ## Theming\n *\n * Colours come from `--chart-1` through `--chart-5`, which every theme\n * defines, and the grid, ticks and labels from `--border` and\n * `--muted-foreground`. That means a chart follows the accent axis and the\n * appearance with no per-chart configuration — and a caller that wants a\n * specific series colour passes it explicitly, as a colour or as `var(--token)`.\n *\n * A canvas cannot read a custom property, so the options and datasets carry\n * `var(--token)` strings and each chart resolves them against its own element\n * when it renders, and again whenever the root's attributes change — the\n * `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.\n */\n\n/**\n * Register a piece with Chart.js. The escape hatch for a caller's own chart type.\n *\n * `solid-chartjs` re-exports the typed components but not the registry, so\n * registration comes from `chart.js` itself — which is also the honest place for\n * it, since the registry is Chart.js's global.\n */\nexport function registerChartPiece(piece: Parameters<typeof ChartJs.register>[number]): void {\n  ChartJs.register(piece)\n}\n\nChartJs.register(\n  CategoryScale,\n  LinearScale,\n  LogarithmicScale,\n  RadialLinearScale,\n  PointElement,\n  LineElement,\n  BarElement,\n  ArcElement,\n  Filler,\n  ChartTooltip,\n  Legend\n)\n\nexport { chartOptions, chartSeriesColors }\n\n/**\n * One pixel to paint a colour on, shared by every chart.\n *\n * The canvas *paints* `oklch()`, but Chart.js also *parses* colours — to derive a\n * hover shade and to animate between two colours — and its parser reads only\n * rgb, hsl, hex and names. Painting the computed value and reading the pixel\n * back gives the sRGB colour the canvas would have drawn anyway, in a form both\n * understand, whatever syntax a theme uses (`oklch()`, `color-mix()`, …).\n */\nlet swatch: CanvasRenderingContext2D | null | undefined\n\nfunction toCanvasColor(value: string): string {\n  if (typeof CSS === 'undefined' || !CSS.supports('color', value)) return value\n  if (swatch === undefined) {\n    const canvas = document.createElement('canvas')\n    canvas.width = 1\n    canvas.height = 1\n    swatch = canvas.getContext('2d', { willReadFrequently: true })\n  }\n  if (!swatch) return value\n  swatch.globalCompositeOperation = 'copy'\n  swatch.fillStyle = value\n  swatch.fillRect(0, 0, 1, 1)\n  const [r, g, b, a] = swatch.getImageData(0, 0, 1, 1).data\n  return `rgba(${r}, ${g}, ${b}, ${Math.round(((a ?? 255) / 255) * 1000) / 1000})`\n}\n\n/**\n * Resolves `var(--token)` strings against a chart's element, and re-resolves\n * them when the theme changes.\n *\n * The element rather than the root, so a chart inside a subtree with its own\n * inline tokens takes those. The observer watches every attribute on `<html>`,\n * because that is where both applications switch appearance, accent and theme\n * (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added\n * later is covered without touching this. It is released with the chart.\n */\nfunction createThemeResolver() {\n  let element: HTMLElement | undefined\n  const [revision, invalidate] = createSignal(undefined, { equals: false })\n\n  onMount(() => {\n    const observer = new MutationObserver(() => invalidate())\n    observer.observe(document.documentElement, { attributes: true })\n    onCleanup(() => observer.disconnect())\n  })\n\n  return {\n    ref: (el: HTMLElement) => {\n      element = el\n    },\n    resolve<T>(value: T): T {\n      revision()\n      if (!element || typeof getComputedStyle === 'undefined') return value\n      const style = getComputedStyle(element)\n      const resolved = new Map<string, string | undefined>()\n      return resolveCssVariables(value, (name) => {\n        if (!resolved.has(name)) {\n          const raw = style.getPropertyValue(name).trim()\n          resolved.set(name, raw ? toCanvasColor(raw) : undefined)\n        }\n        return resolved.get(name)\n      })\n    },\n  }\n}\n\n/** A chart's frame: a bordered surface with a title and an optional description. */\nexport type ChartFrameProps = {\n  /** The chart's title. Required — a chart with no name is not readable. */\n  title: string\n  /** What the chart shows. Announced to assistive technology, and drawn. */\n  description?: string\n  /** Trailing controls. */\n  actions?: JSX.Element\n  children: JSX.Element\n  class?: string\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n  const [local] = splitProps(props, ['title', 'description', 'actions', 'children', 'class'])\n\n  return (\n    <figure class={cn('grid gap-3 rounded-lg border border-border bg-card p-4', local.class)}>\n      <figcaption class=\"flex items-start justify-between gap-3\">\n        <div>\n          <h3 class=\"text-sm font-semibold text-foreground\">{local.title}</h3>\n          <Show when={local.description}>\n            <p class=\"text-xs text-muted-foreground\">{local.description}</p>\n          </Show>\n        </div>\n        {local.actions}\n      </figcaption>\n      {local.children}\n    </figure>\n  )\n}\n\ntype SeriesChartProps = {\n  /** The category labels along the axis. */\n  labels: readonly string[]\n  /** One entry per series. `data` is aligned to `labels`. */\n  series: readonly { label: string; data: readonly number[]; color?: string }[]\n  /** Chart.js options, merged deeply over the theme's defaults. */\n  options?: ChartOptions\n  /** Stack the series. */\n  stacked?: boolean\n  class?: string\n}\n\n/**\n * The data as Chart.js datasets, with the theme's colours applied in order and\n * the series' own colour winning when it has one.\n *\n * `fill: false` and a 2px border are deliberate: a filled line chart is a\n * different chart, and a 1px line at a 12px label size reads as a grid line.\n */\nfunction datasetsFor(series: SeriesChartProps['series'], filled: boolean) {\n  return series.map((entry, index) => ({\n    label: entry.label,\n    data: [...entry.data],\n    borderColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    pointBackgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n    borderWidth: 2,\n    pointRadius: 0,\n    pointHoverRadius: 4,\n    tension: 0.3,\n    fill: filled,\n  }))\n}\n\nfunction seriesOptions(\n  props: SeriesChartProps,\n  extra?: ChartOptions,\n  shape: ChartScaleShape = 'cartesian'\n): ChartOptions {\n  // Stacking is a cartesian idea; a radar has no x or y to stack, and naming\n  // them would make Chart.js draw them.\n  const stacked =\n    props.stacked && shape === 'cartesian'\n      ? { scales: { x: { stacked: true }, y: { stacked: true } } }\n      : undefined\n  return chartOptions(mergeChartOptions(extra, stacked, props.options), shape)\n}\n\n/** A line chart. The default for a series over time. */\nexport function LineChart(props: SeriesChartProps & { area?: boolean }) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Line\n        data={theme.resolve({\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, props.area ?? false),\n        })}\n        options={theme.resolve(seriesOptions(props))}\n      />\n    </div>\n  )\n}\n\n/** A bar chart. `stacked` for parts of a whole over categories. */\nexport function BarChart(props: SeriesChartProps & { horizontal?: boolean }) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Bar\n        data={theme.resolve({\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, true).map((dataset) => ({\n            ...dataset,\n            borderWidth: 0,\n            borderRadius: 3,\n          })),\n        })}\n        options={theme.resolve(seriesOptions(props, { indexAxis: props.horizontal ? 'y' : 'x' }))}\n      />\n    </div>\n  )\n}\n\n/** A scatter plot, for a correlation rather than a series. */\nexport function ScatterChart(props: {\n  series: readonly { label: string; data: readonly { x: number; y: number }[]; color?: string }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Scatter\n        data={theme.resolve({\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n            pointRadius: 3,\n            pointHoverRadius: 5,\n          })),\n        })}\n        options={theme.resolve(chartOptions(props.options))}\n      />\n    </div>\n  )\n}\n\n/** A bubble chart: scatter with a third dimension carried by the radius. */\nexport function BubbleChart(props: {\n  series: readonly {\n    label: string\n    data: readonly { x: number; y: number; r: number }[]\n    color?: string\n  }[]\n  options?: ChartOptions\n  class?: string\n}) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Bubble\n        data={theme.resolve({\n          datasets: props.series.map((entry, index) => ({\n            label: entry.label,\n            data: entry.data.map((point) => ({ ...point })),\n            backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],\n          })),\n        })}\n        options={theme.resolve(chartOptions(props.options))}\n      />\n    </div>\n  )\n}\n\n/** A radar chart, for a profile across fixed axes. */\nexport function RadarChart(props: SeriesChartProps) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Radar\n        data={theme.resolve({\n          labels: [...props.labels],\n          datasets: datasetsFor(props.series, true),\n        })}\n        options={theme.resolve(seriesOptions(props, undefined, 'radial'))}\n      />\n    </div>\n  )\n}\n\n/**\n * A polar area chart: radial bars, for a composition.\n *\n * Its scale is left to Chart.js's polar-area defaults (`'none'` rather than\n * `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type\n * but radar when it first creates the chart, so radial styling here would apply\n * only after the first theme change — a chart that restyles itself on a toggle.\n */\nexport function PolarAreaChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  options?: ChartOptions\n  class?: string\n}) {\n  const theme = createThemeResolver()\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <PolarArea\n        data={theme.resolve({\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: [...chartSeriesColors],\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        })}\n        options={theme.resolve(chartOptions(props.options, 'none'))}\n      />\n    </div>\n  )\n}\n\n/**\n * A doughnut or a pie, for a composition with few enough slices to name.\n *\n * Both are one component because the only difference is the hole, and a caller\n * choosing between them is choosing a ratio rather than a chart. `cutout` is the\n * hole's share of the radius: 0 is a pie, 60% is the doughnut most dashboards\n * mean. A composition with more than about six slices should be a bar chart —\n * past that, the smallest slices become unreadable and their labels collide.\n */\nexport function DonutChart(props: {\n  labels: readonly string[]\n  data: readonly number[]\n  /** The hole, as a percentage of the radius. 0 for a pie. */\n  cutout?: number\n  options?: ChartOptions\n  class?: string\n}) {\n  const theme = createThemeResolver()\n  // `Dynamic` rather than a local component accessor: Solid's JSX types require\n  // a component reference, and an accessor returning one is a call in disguise.\n  const component = () => (props.cutout === 0 ? Pie : Doughnut)\n  return (\n    <div ref={theme.ref} class={cn('h-64', props.class)}>\n      <Dynamic\n        component={component()}\n        data={theme.resolve({\n          labels: [...props.labels],\n          datasets: [\n            {\n              data: [...props.data],\n              backgroundColor: props.labels.map(\n                (_, index) => chartSeriesColors[index % chartSeriesColors.length]\n              ),\n              borderColor: 'var(--card)',\n              borderWidth: 2,\n            },\n          ],\n        })}\n        options={theme.resolve(\n          chartOptions(\n            mergeChartOptions(\n              props.cutout === 0\n                ? undefined\n                : ({\n                    cutout: `${props.cutout ?? 60}%`,\n                  } satisfies ChartOptions<'doughnut'> as ChartOptions),\n              props.options\n            ),\n            'none'\n          )\n        )}\n      />\n    </div>\n  )\n}\n\n/** A legend built from the same five colours, for a chart whose legend is elsewhere. */\nexport function ChartLegend(props: {\n  series: readonly { label: string; color?: string }[]\n  class?: string\n}) {\n  return (\n    <ul class={cn('flex flex-wrap items-center gap-x-3 gap-y-1', props.class)}>\n      <For each={props.series}>\n        {(entry, index) => (\n          <li class=\"flex items-center gap-1.5 text-2xs text-muted-foreground\">\n            <span\n              class=\"size-2 shrink-0 rounded-full\"\n              style={{\n                background: entry.color ?? chartSeriesColors[index() % chartSeriesColors.length],\n              }}\n              aria-hidden=\"true\"\n            />\n            {entry.label}\n          </li>\n        )}\n      </For>\n    </ul>\n  )\n}\n\nexport type { ChartType, ChartOptions }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAgBsC,mBAAmBC,OAA0D;CAC3FtB,MAAQwB,SAASF,KAAK;AACxB;AAEAtB,MAAQwB,SACNrB,eACAI,aACAC,kBACAE,mBACAD,cACAH,aACAJ,YACAD,YACAG,QACAQ,SACAP,MACF;;;;;;;;;;AAaA,IAAIoB;AAEJ,SAASE,cAAcC,OAAuB;CAC5C,IAAI,OAAOC,QAAQ,eAAe,CAACA,IAAIC,SAAS,SAASF,KAAK,GAAG,OAAOA;CACxE,IAAIH,WAAWM,KAAAA,GAAW;EACxB,MAAMC,SAASC,SAASC,cAAc,QAAQ;EAC9CF,OAAOG,QAAQ;EACfH,OAAOI,SAAS;EAChBX,SAASO,OAAOK,WAAW,MAAM,EAAEC,oBAAoB,KAAK,CAAC;CAC/D;CACA,IAAI,CAACb,QAAQ,OAAOG;CACpBH,OAAOc,2BAA2B;CAClCd,OAAOe,YAAYZ;CACnBH,OAAOgB,SAAS,GAAG,GAAG,GAAG,CAAC;CAC1B,MAAM,CAACC,GAAGC,GAAGC,GAAGC,KAAKpB,OAAOqB,aAAa,GAAG,GAAG,GAAG,CAAC,CAAC,CAACC;CACrD,OAAO,QAAQL,EAAC,IAAKC,EAAC,IAAKC,EAAC,IAAKI,KAAKC,OAAQJ,KAAK,OAAO,MAAO,GAAI,IAAI,IAAI;AAC/E;;;;;;;;;;;AAYA,SAASK,sBAAsB;CAC7B,IAAIC;CACJ,MAAM,CAACE,UAAUC,cAAcrE,aAAa8C,KAAAA,GAAW,EAAEwB,QAAQ,MAAM,CAAC;CAExEpE,cAAc;EACZ,MAAMqE,WAAW,IAAIC,uBAAuBH,WAAW,CAAC;EACxDE,SAASE,QAAQzB,SAAS0B,iBAAiB,EAAEC,YAAY,KAAK,CAAC;EAC/D1E,gBAAgBsE,SAASK,WAAW,CAAC;CACvC,CAAC;CAED,OAAO;EACLC,MAAMC,OAAoB;GACxBZ,UAAUY;EACZ;EACAC,QAAWpC,OAAa;GACtByB,SAAS;GACT,IAAI,CAACF,WAAW,OAAOe,qBAAqB,aAAa,OAAOtC;GAChE,MAAMuC,QAAQD,iBAAiBf,OAAO;GACtC,MAAMiB,2BAAW,IAAIC,IAAgC;GACrD,OAAOlD,oBAAoBS,QAAQ0C,SAAS;IAC1C,IAAI,CAACF,SAASG,IAAID,IAAI,GAAG;KACvB,MAAME,MAAML,MAAMM,iBAAiBH,IAAI,CAAC,CAACI,KAAK;KAC9CN,SAASO,IAAIL,MAAME,MAAM7C,cAAc6C,GAAG,IAAIzC,KAAAA,CAAS;IACzD;IACA,OAAOqC,SAASQ,IAAIN,IAAI;GAC1B,CAAC;EACH;CACF;AACF;AAcA,SAAgBc,WAAWC,OAAwB;CACjD,MAAM,CAACC,SAASlG,WAAWiG,OAAO;EAAC;EAAS;EAAe;EAAW;EAAY;CAAO,CAAC;CAE1F,cAAA;EAAA,IAAAE,OAAAC,QAAA,GAAAC,QAAAF,KAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAD;EAAAG,OAAAD,aAI2DN,MAAMR,KAAK;EAAAe,OAAAF,OAAAG,gBAC7D9G,MAAI;GAAA,IAAC+G,OAAI;IAAA,OAAET,MAAMP;GAAW;GAAA,IAAAG,WAAA;IAAA,IAAAc,QAAAC,OAAA;IAAAJ,OAAAG,aACeV,MAAMP,WAAW;IAAA,OAAAiB;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAH,OAAAJ,aAG9DH,MAAMN,SAAO,IAAA;EAAAa,OAAAN,YAEfD,MAAMJ,UAAQ,IAAA;EAAAgB,aAAAC,UAAAZ,MAVFxE,GAAG,0DAA0DuE,MAAMH,KAAK,CAAC,CAAA;EAAA,OAAAI;CAAA,EAAA,CAAA;AAa5F;;;;;;;;AAqBA,SAASoB,YAAYL,QAAoCM,QAAiB;CACxE,OAAON,OAAOO,KAAKC,OAAOC,WAAW;EACnCR,OAAOO,MAAMP;EACbxD,MAAM,CAAC,GAAG+D,MAAM/D,IAAI;EACpBiE,aAAaF,MAAMN,SAASvF,kBAAkB8F,QAAQ9F,kBAAkBgG;EACxEC,iBAAiBJ,MAAMN,SAASvF,kBAAkB8F,QAAQ9F,kBAAkBgG;EAC5EE,sBAAsBL,MAAMN,SAASvF,kBAAkB8F,QAAQ9F,kBAAkBgG;EACjFG,aAAa;EACbC,aAAa;EACbC,kBAAkB;EAClBC,SAAS;EACTC,MAAMZ;CACR,EAAE;AACJ;AAEA,SAASa,cACPpC,OACAqC,OACAC,QAAyB,aACX;CAGd,MAAMjB,UACJrB,MAAMqB,WAAWiB,UAAU,cACvB,EAAEC,QAAQ;EAAEC,GAAG,EAAEnB,SAAS,KAAK;EAAGoB,GAAG,EAAEpB,SAAS,KAAK;CAAE,EAAE,IACzD3E,KAAAA;CACN,OAAOf,aAAaE,kBAAkBwG,OAAOhB,SAASrB,MAAMoB,OAAO,GAAGkB,KAAK;AAC7E;;AAGA,SAAgBI,UAAU1C,OAA8C;CACtE,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAAgF,QAAAC,QAAA;EAAA,IAAAC,QACYH,MAAMnE;EAAG,OAAAsE,UAAA,aAAAC,IAAAD,OAAAF,KAAA,IAATD,MAAMnE,MAAGoE;EAAArC,OAAAqC,OAAApC,gBAChBpG,MAAI;GAAA,IACHqD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ;KAClBqC,QAAQ,CAAC,GAAGhB,MAAMgB,MAAM;KACxBiC,UAAU3B,YAAYtB,MAAMiB,QAAQjB,MAAM2C,QAAQ,KAAK;IACzD,CAAC;GAAC;GAAA,IACFvB,UAAO;IAAA,OAAEwB,MAAMjE,QAAQyD,cAAcpC,KAAK,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAa,aAAAC,UAAA+B,OANpBnH,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAA+C;CAAA,EAAA,CAAA;AAUvD;;AAGA,SAAgBK,SAASlD,OAAoD;CAC3E,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAAuF,QAAAN,QAAA;EAAA,IAAAO,SACYT,MAAMnE;EAAG,OAAA4E,WAAA,aAAAL,IAAAK,QAAAD,KAAA,IAATR,MAAMnE,MAAG2E;EAAA5C,OAAA4C,OAAA3C,gBAChBvG,KAAG;GAAA,IACFwD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ;KAClBqC,QAAQ,CAAC,GAAGhB,MAAMgB,MAAM;KACxBiC,UAAU3B,YAAYtB,MAAMiB,QAAQ,IAAI,CAAC,CAACO,KAAK8B,aAAa;MAC1D,GAAGA;MACHvB,aAAa;MACbwB,cAAc;KAChB,EAAE;IACJ,CAAC;GAAC;GAAA,IACFnC,UAAO;IAAA,OAAEwB,MAAMjE,QAAQyD,cAAcpC,OAAO,EAAEwD,WAAWxD,MAAMmD,aAAa,MAAM,IAAI,CAAC,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAtC,aAAAC,UAAAsC,OAVjE1H,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAAsD;CAAA,EAAA,CAAA;AAcvD;;AAGA,SAAgBK,aAAazD,OAI1B;CACD,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAA6F,QAAAZ,QAAA;EAAA,IAAAa,SACYf,MAAMnE;EAAG,OAAAkF,WAAA,aAAAX,IAAAW,QAAAD,KAAA,IAATd,MAAMnE,MAAGiF;EAAAlD,OAAAkD,OAAAjD,gBAChBhG,SAAO;GAAA,IACNiD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ,EAClBsE,UAAUjD,MAAMiB,OAAOO,KAAKC,OAAOC,WAAW;KAC5CR,OAAOO,MAAMP;KACbxD,MAAM+D,MAAM/D,KAAK8D,KAAKoC,WAAW,EAAE,GAAGA,MAAM,EAAE;KAC9C/B,iBAAiBJ,MAAMN,SAASvF,kBAAkB8F,QAAQ9F,kBAAkBgG;KAC5EI,aAAa;KACbC,kBAAkB;IACpB,EAAE,EACJ,CAAC;GAAC;GAAA,IACFb,UAAO;IAAA,OAAEwB,MAAMjE,QAAQhD,aAAaqE,MAAMoB,OAAO,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAP,aAAAC,UAAA4C,OAX3BhI,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAA4D;CAAA,EAAA,CAAA;AAevD;;AAGA,SAAgBG,YAAY7D,OAQzB;CACD,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAAiG,QAAAhB,QAAA;EAAA,IAAAiB,SACYnB,MAAMnE;EAAG,OAAAsF,WAAA,aAAAf,IAAAe,QAAAD,KAAA,IAATlB,MAAMnE,MAAGqF;EAAAtD,OAAAsD,OAAArD,gBAChBtG,QAAM;GAAA,IACLuD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ,EAClBsE,UAAUjD,MAAMiB,OAAOO,KAAKC,OAAOC,WAAW;KAC5CR,OAAOO,MAAMP;KACbxD,MAAM+D,MAAM/D,KAAK8D,KAAKoC,WAAW,EAAE,GAAGA,MAAM,EAAE;KAC9C/B,iBAAiBJ,MAAMN,SAASvF,kBAAkB8F,QAAQ9F,kBAAkBgG;IAC9E,EAAE,EACJ,CAAC;GAAC;GAAA,IACFR,UAAO;IAAA,OAAEwB,MAAMjE,QAAQhD,aAAaqE,MAAMoB,OAAO,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAP,aAAAC,UAAAgD,OAT3BpI,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAAgE;CAAA,EAAA,CAAA;AAavD;;AAGA,SAAgBE,WAAWhE,OAAyB;CAClD,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAAoG,QAAAnB,QAAA;EAAA,IAAAoB,SACYtB,MAAMnE;EAAG,OAAAyF,WAAA,aAAAlB,IAAAkB,QAAAD,KAAA,IAATrB,MAAMnE,MAAGwF;EAAAzD,OAAAyD,OAAAxD,gBAChBjG,OAAK;GAAA,IACJkD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ;KAClBqC,QAAQ,CAAC,GAAGhB,MAAMgB,MAAM;KACxBiC,UAAU3B,YAAYtB,MAAMiB,QAAQ,IAAI;IAC1C,CAAC;GAAC;GAAA,IACFG,UAAO;IAAA,OAAEwB,MAAMjE,QAAQyD,cAAcpC,OAAOtD,KAAAA,GAAW,QAAQ,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAmE,aAAAC,UAAAmD,OANzCvI,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAAmE;CAAA,EAAA,CAAA;AAUvD;;;;;;;;;AAUA,SAAgBE,eAAenE,OAK5B;CACD,MAAM4C,QAAQ/E,oBAAoB;CAClC,cAAA;EAAA,IAAAuG,QAAAtB,QAAA;EAAA,IAAAuB,SACYzB,MAAMnE;EAAG,OAAA4F,WAAA,aAAArB,IAAAqB,QAAAD,KAAA,IAATxB,MAAMnE,MAAG2F;EAAA5D,OAAA4D,OAAA3D,gBAChBlG,WAAS;GAAA,IACRmD,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ;KAClBqC,QAAQ,CAAC,GAAGhB,MAAMgB,MAAM;KACxBiC,UAAU,CACR;MACEvF,MAAM,CAAC,GAAGsC,MAAMtC,IAAI;MACpBmE,iBAAiB,CAAC,GAAGjG,iBAAiB;MACtC+F,aAAa;MACbI,aAAa;KACf,CAAC;IAEL,CAAC;GAAC;GAAA,IACFX,UAAO;IAAA,OAAEwB,MAAMjE,QAAQhD,aAAaqE,MAAMoB,SAAS,MAAM,CAAC;GAAC;EAAA,CAAA,CAAA;EAAAP,aAAAC,UAAAsD,OAbnC1I,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAAsE;CAAA,EAAA,CAAA;AAiBvD;;;;;;;;;;AAWA,SAAgBE,WAAWtE,OAOxB;CACD,MAAM4C,QAAQ/E,oBAAoB;CAGlC,MAAM2G,kBAAmBxE,MAAMuE,WAAW,IAAIjK,MAAMF;CACpD,cAAA;EAAA,IAAAqK,SAAA3B,QAAA;EAAA,IAAA4B,SACY9B,MAAMnE;EAAG,OAAAiG,WAAA,aAAA1B,IAAA0B,QAAAD,MAAA,IAAT7B,MAAMnE,MAAGgG;EAAAjE,OAAAiE,QAAAhE,gBAChBxG,SAAO;GAAA,IACNuK,YAAS;IAAA,OAAEA,UAAU;GAAC;GAAA,IACtB9G,OAAI;IAAA,OAAEkF,MAAMjE,QAAQ;KAClBqC,QAAQ,CAAC,GAAGhB,MAAMgB,MAAM;KACxBiC,UAAU,CACR;MACEvF,MAAM,CAAC,GAAGsC,MAAMtC,IAAI;MACpBmE,iBAAiB7B,MAAMgB,OAAOQ,KAC3BmD,GAAGjD,UAAU9F,kBAAkB8F,QAAQ9F,kBAAkBgG,OAC5D;MACAD,aAAa;MACbI,aAAa;KACf,CAAC;IAEL,CAAC;GAAC;GAAA,IACFX,UAAO;IAAA,OAAEwB,MAAMjE,QACbhD,aACEE,kBACEmE,MAAMuE,WAAW,IACb7H,KAAAA,IACC,EACC6H,QAAQ,GAAGvE,MAAMuE,UAAU,GAAE,GAC/B,GACJvE,MAAMoB,OACR,GACA,MACF,CACF;GAAC;EAAA,CAAA,CAAA;EAAAP,aAAAC,UAAA2D,QA5BuB/I,GAAG,QAAQsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAA2E;CAAA,EAAA,CAAA;AAgCvD;;AAGA,SAAgBG,YAAY5E,OAGzB;CACD,cAAA;EAAA,IAAA6E,SAAAC,QAAA;EAAAtE,OAAAqE,QAAApE,gBAEK/G,KAAG;GAAA,IAACqL,OAAI;IAAA,OAAE/E,MAAMiB;GAAM;GAAApB,WACnB4B,OAAOC,iBAAK;IAAA,IAAAsD,SAAAC,QAAA,GAAAC,SAAAF,OAAA3E;IAAAG,OAAAwE,cASTvD,MAAMP,OAAK,IAAA;IAAAL,QAAAsE,QAAAC,iBAAAF,QAAA,cAJIzD,MAAMN,SAASvF,kBAAkB8F,MAAM,IAAI9F,kBAAkBgG,OAAO,CAAA;IAAA,OAAAoD;GAAA,EAAA,CAAA;EAMvF,CAAA,CAAA;EAAAnE,aAAAC,UAAA+D,QAbMnJ,GAAG,+CAA+CsE,MAAMF,KAAK,CAAC,CAAA;EAAA,OAAA+E;CAAA,EAAA,CAAA;AAiB7E"}

package/dist/components/ui/chart/index.js

@@ -1,2 +1,3 @@
-import { BarChart, BubbleChart, ChartFrame, ChartLegend, DonutChart, LineChart, PolarAreaChart, RadarChart, ScatterChart, chartOptions, chartSeriesColors, registerChartPiece } from "./chart.js";
+import { chartOptions, chartSeriesColors } from "./chart-options.js";
+import { BarChart, BubbleChart, ChartFrame, ChartLegend, DonutChart, LineChart, PolarAreaChart, RadarChart, ScatterChart, registerChartPiece } from "./chart.js";
 export { BarChart, BubbleChart, ChartFrame, ChartLegend, DonutChart, LineChart, PolarAreaChart, RadarChart, ScatterChart, chartOptions, chartSeriesColors, registerChartPiece };

package/dist/components/ui/context-menu/context-menu.d.ts

@@ -30,6 +30,14 @@ export declare function ContextMenuItem(props: ComponentProps<typeof KobalteCont
 export declare function ContextMenuCheckboxItem(props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>): import("solid-js").JSX.Element;
 export declare function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>): import("solid-js").JSX.Element;
 export declare function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>): import("solid-js").JSX.Element;
+/**
+ * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export declare function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>): import("solid-js").JSX.Element;
 export declare function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>): import("solid-js").JSX.Element;
 export declare function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>): import("solid-js").JSX.Element;

package/dist/components/ui/context-menu/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAa9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAiB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAY9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAW9F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAiBhG"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAa9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAiB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAY9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAW9F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAiBhG"}