@signalflare-ai/ui 0.5.0 → 1.0.0

package/dist/{chart-Bes4MN3C.js → chart-BK3sVPnD.js}

@@ -1,249 +1,8 @@
 "use client";
 import { t as cn } from "./cn-YROP2_ox.js";
-import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { i as ChartPalette, n as CHART_DARK_COLORS, r as CHART_LIGHT_COLORS, t as Chart } from "./echart-DURZEyai.js";
+import { useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/chart/color.ts
-/**
-* Categorical colors for light mode — used when assigning colors to data series
-* by index (e.g. the first series gets Blue, the second gets Violet, etc.).
-*/
-var ChartCategoricalLightColors = /* @__PURE__ */ function(ChartCategoricalLightColors) {
-	ChartCategoricalLightColors["Blue"] = "#086FFF";
-	ChartCategoricalLightColors["Violet"] = "#CF7EE9";
-	ChartCategoricalLightColors["Cyan"] = "#73CEE6";
-	ChartCategoricalLightColors["Indigo"] = "#5B5FEF";
-	ChartCategoricalLightColors["LightBlue"] = "#82B6FF";
-	ChartCategoricalLightColors["Pink"] = "#F5609F";
-	ChartCategoricalLightColors["Indigo3"] = "#C2BDF3";
-	ChartCategoricalLightColors["Violet2"] = "#8D1EB1";
-	ChartCategoricalLightColors["Violet3"] = "#EBCAF6";
-	ChartCategoricalLightColors["Indigo2"] = "#7366E4";
-	return ChartCategoricalLightColors;
-}(ChartCategoricalLightColors || {});
-/**
-* Categorical colors for dark mode — same hues as the light palette but with
-* `E6` alpha (90% opacity) appended to soften contrast on dark backgrounds.
-*/
-var ChartCategoricalDarkColors = /* @__PURE__ */ function(ChartCategoricalDarkColors) {
-	ChartCategoricalDarkColors["Blue"] = "#086FFFE6";
-	ChartCategoricalDarkColors["Violet"] = "#CF7EE9E6";
-	ChartCategoricalDarkColors["Cyan"] = "#73CEE6E6";
-	ChartCategoricalDarkColors["Indigo"] = "#5B5FEFE6";
-	ChartCategoricalDarkColors["LightBlue"] = "#82B6FFE6";
-	ChartCategoricalDarkColors["Pink"] = "#F5609FE6";
-	ChartCategoricalDarkColors["Indigo3"] = "#C2BDF3E6";
-	ChartCategoricalDarkColors["Violet2"] = "#8D1EB1E6";
-	ChartCategoricalDarkColors["Violet3"] = "#EBCAF6E6";
-	ChartCategoricalDarkColors["Indigo2"] = "#7366E4E6";
-	return ChartCategoricalDarkColors;
-}(ChartCategoricalDarkColors || {});
-/**
-* Semantic colors for light mode — used to convey meaning (status, severity)
-* rather than just distinguishing series. Use via `ChartPalette.semantic()`.
-*/
-var ChartSemanticLightColors = /* @__PURE__ */ function(ChartSemanticLightColors) {
-	ChartSemanticLightColors["Attention"] = "#FC574A";
-	ChartSemanticLightColors["Warning"] = "#F8A054";
-	ChartSemanticLightColors["Neutral"] = "#82B6FF";
-	ChartSemanticLightColors["NeutralLight"] = "#B9D6FF";
-	ChartSemanticLightColors["Disabled"] = "#B6B6B6";
-	ChartSemanticLightColors["DisabledLight"] = "#D9D9D9";
-	return ChartSemanticLightColors;
-}(ChartSemanticLightColors || {});
-/**
-* Semantic colors for dark mode — same meanings as the light palette but with
-* `E6` alpha (90% opacity) for dark backgrounds.
-*/
-var ChartSemanticDarkColors = /* @__PURE__ */ function(ChartSemanticDarkColors) {
-	ChartSemanticDarkColors["Attention"] = "#FC574AE6";
-	ChartSemanticDarkColors["Warning"] = "#F8A054E6";
-	ChartSemanticDarkColors["Neutral"] = "#82B6FFE6";
-	ChartSemanticDarkColors["NeutralLight"] = "#B9D6FFE6";
-	ChartSemanticDarkColors["Disabled"] = "#B6B6B6E6";
-	ChartSemanticDarkColors["DisabledLight"] = "#D9D9D9E6";
-	return ChartSemanticDarkColors;
-}(ChartSemanticDarkColors || {});
-/**
-* Ordered list of categorical colors for light mode, indexed by series position.
-* Used as the default ECharts color palette when `isDarkMode` is `false`.
-*/
-var CHART_LIGHT_COLORS = [
-	ChartCategoricalLightColors.Blue,
-	ChartCategoricalLightColors.Violet,
-	ChartCategoricalLightColors.Cyan,
-	ChartCategoricalLightColors.Indigo,
-	ChartCategoricalLightColors.LightBlue,
-	ChartCategoricalLightColors.Pink,
-	ChartCategoricalLightColors.Indigo3,
-	ChartCategoricalLightColors.Violet2,
-	ChartCategoricalLightColors.Violet3,
-	ChartCategoricalLightColors.Indigo2
-];
-/**
-* Ordered list of categorical colors for dark mode, indexed by series position.
-* Used as the default ECharts color palette when `isDarkMode` is `true`.
-*/
-var CHART_DARK_COLORS = [
-	ChartCategoricalDarkColors.Blue,
-	ChartCategoricalDarkColors.Violet,
-	ChartCategoricalDarkColors.Cyan,
-	ChartCategoricalDarkColors.Indigo,
-	ChartCategoricalDarkColors.LightBlue,
-	ChartCategoricalDarkColors.Pink,
-	ChartCategoricalDarkColors.Indigo3,
-	ChartCategoricalDarkColors.Violet2,
-	ChartCategoricalDarkColors.Violet3,
-	ChartCategoricalDarkColors.Indigo2
-];
-/**
-* Returns the hex color for a named semantic value (status, severity, etc.).
-*
-* @example
-* ```ts
-* ChartPalette.semantic("Attention")           // "#FC574A" (light)
-* ChartPalette.semantic("Warning", true)       // "#F8A054E6" (dark)
-* ```
-*/
-function semantic(name, isDarkMode = false) {
-	return isDarkMode ? ChartSemanticDarkColors[name] : ChartSemanticLightColors[name];
-}
-/**
-* Returns the categorical color for a given series index.
-* Wraps around via modulo when `index` exceeds the palette length (10 colors).
-*
-* @example
-* ```ts
-* ChartPalette.color(0)        // Blue (light)
-* ChartPalette.color(0, true)  // Blue with E6 alpha (dark)
-* ChartPalette.color(10)       // wraps back to Blue
-* ```
-*/
-function color(index, isDarkMode = false) {
-	return isDarkMode ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length] : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];
-}
-/**
-* Utilities for resolving SignalFlare chart colors by semantic name or series index.
-* Both functions accept an `isDarkMode` flag and return the appropriate hex color.
-*/
-var ChartPalette = {
-	semantic,
-	color
-};
-//#endregion
-//#region src/components/chart/echart.tsx
-/**
-* Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).
-*
-* Manages the ECharts instance lifecycle (init, option updates, event binding,
-* resize observation, and disposal). Exposes the raw `echarts.ECharts` instance
-* via `ref` for imperative access when needed.
-*
-* Prefer `TimeseriesChart` for time-series data; use this component when you
-* need full control over the ECharts option object.
-*
-* @example
-* ```tsx
-* import * as echarts from "echarts/core";
-* import { BarChart } from "echarts/charts";
-* import { GridComponent } from "echarts/components";
-* import { CanvasRenderer } from "echarts/renderers";
-*
-* echarts.use([BarChart, GridComponent, CanvasRenderer]);
-*
-* <Chart
-*   echarts={echarts}
-*   options={{ xAxis: { data: ["A", "B"] }, yAxis: {}, series: [{ type: "bar", data: [1, 2] }] }}
-* />
-* ```
-*/
-var Chart = forwardRef(function Chart({ echarts, options, optionUpdateBehavior, className, isDarkMode, height = 350, onEvents }, ref) {
-	const elRef = useRef(null);
-	const chartRef = useRef(null);
-	const handlersRef = useRef({});
-	const wrappersRef = useRef({});
-	const boundEventsRef = useRef(/* @__PURE__ */ new Set());
-	useEffect(() => {
-		if (!elRef.current) return;
-		const chart = echarts.init(elRef.current, isDarkMode ? "dark" : { color: isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS });
-		chartRef.current = chart;
-		if (typeof ref === "function") ref(chart);
-		else if (ref) ref.current = chart;
-		return () => {
-			for (const event of boundEventsRef.current) {
-				const wrapper = wrappersRef.current[event];
-				if (wrapper) chart.off(event, wrapper);
-			}
-			boundEventsRef.current.clear();
-			if (typeof ref === "function") ref(null);
-			else if (ref) ref.current = null;
-			chartRef.current = null;
-			chart.dispose();
-		};
-	}, [elRef, isDarkMode]);
-	useEffect(() => {
-		const chart = chartRef.current;
-		if (!chart) return;
-		chart.setOption(options, {
-			notMerge: false,
-			lazyUpdate: true,
-			...optionUpdateBehavior
-		});
-	}, [
-		isDarkMode,
-		optionUpdateBehavior,
-		options
-	]);
-	useEffect(() => {
-		handlersRef.current = onEvents ?? {};
-	}, [onEvents]);
-	useEffect(() => {
-		const chart = chartRef.current;
-		if (!chart) return;
-		const nextBound = /* @__PURE__ */ new Set();
-		for (const [event, handler] of Object.entries(onEvents ?? {})) {
-			if (typeof handler !== "function") continue;
-			nextBound.add(event);
-			if (!wrappersRef.current[event]) wrappersRef.current[event] = (params) => {
-				handlersRef.current[event]?.(params);
-			};
-			if (!boundEventsRef.current.has(event)) chart.on(event, wrappersRef.current[event]);
-		}
-		for (const event of boundEventsRef.current) {
-			if (nextBound.has(event)) continue;
-			const wrapper = wrappersRef.current[event];
-			if (wrapper) chart.off(event, wrapper);
-		}
-		boundEventsRef.current = nextBound;
-	}, [
-		echarts,
-		isDarkMode,
-		onEvents
-	]);
-	useEffect(() => {
-		const chart = chartRef.current;
-		const el = elRef.current;
-		if (!chart || !el) return;
-		let isInitial = true;
-		const ro = new ResizeObserver(() => {
-			if (isInitial) {
-				isInitial = false;
-				return;
-			}
-			chart.resize();
-		});
-		ro.observe(el);
-		return () => ro.disconnect();
-	}, []);
-	return /* @__PURE__ */ jsx("div", {
-		ref: elRef,
-		className: cn("w-full", className),
-		style: { height },
-		tabIndex: options.aria?.enabled ? 0 : void 0,
-		role: options.aria?.enabled ? "img" : void 0
-	});
-});
-Chart.displayName = "Chart";
-//#endregion
 //#region src/components/chart/timeseries-chart.tsx
 /**
 * TimeseriesChart — a time-series line or bar chart.
@@ -368,7 +127,14 @@ function TimeseriesChart({ echarts, type = "line", data, xAxisName, xAxisTickCou
 				nameLocation: "middle",
 				nameGap: 30,
 				type: "time",
-				splitLine: { show: false },
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: ChartPalette.axisLine(isDarkMode),
+						type: "dashed",
+						width: 1
+					}
+				},
 				axisLine: { show: false },
 				splitNumber: xAxisTickCount ?? 5,
 				...xAxisTickFormat && { axisLabel: { formatter: (value) => xAxisTickFormat(value) } }
@@ -378,7 +144,8 @@ function TimeseriesChart({ echarts, type = "line", data, xAxisName, xAxisTickCou
 				nameLocation: "middle",
 				nameGap: 40,
 				type: "value",
-				axisTick: { show: true },
+				axisLine: { show: false },
+				axisTick: { show: false },
 				axisLabel: {
 					margin: 15,
 					...yAxisTickFormat && { formatter: (value) => yAxisTickFormat(value) }
@@ -386,6 +153,7 @@ function TimeseriesChart({ echarts, type = "line", data, xAxisName, xAxisTickCou
 				splitLine: {
 					show: true,
 					lineStyle: {
+						color: ChartPalette.axisLine(isDarkMode),
 						type: "dashed",
 						width: 1
 					}
@@ -523,7 +291,7 @@ function ChartWaveLoader({ height, isDarkMode }) {
 */
 function colorWithOpacity(color, alpha) {
 	const a = Math.max(0, Math.min(1, alpha));
-	const rgbMatch = color.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+	const rgbMatch = /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i.exec(color);
 	if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;
 	let hex = color.replace(/^#/, "");
 	if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
@@ -613,6 +381,432 @@ var ChartLegend = {
 	LargeItem
 };
 //#endregion
-export { ChartPalette as i, TimeseriesChart as n, Chart as r, ChartLegend as t };
+//#region src/components/chart/bar-chart.tsx
+/**
+* BarChart — categorical bar chart for comparing discrete values.
+*
+* Consumer must register `BarChart`, `GridComponent`, `TooltipComponent`, and a
+* renderer (e.g. `CanvasRenderer`) on the passed-in `echarts` instance.
+*
+* @example
+* ```tsx
+* <BarChart
+*   echarts={echarts}
+*   data={[
+*     { name: "Mon", value: 120 },
+*     { name: "Tue", value: 200 },
+*     { name: "Wed", value: 150 },
+*   ]}
+* />
+* ```
+*/
+function BarChart({ echarts, data, orientation = "vertical", height = 320, yAxisTickFormat, tooltipValueFormat, isDarkMode, loading, onBarClick, className }) {
+	const options = useMemo(() => {
+		const palette = isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS;
+		const axis = ChartPalette.axisDefaults(isDarkMode);
+		const categoryAxis = {
+			...axis,
+			type: "category",
+			data: data.map((d) => d.name)
+		};
+		const valueAxis = {
+			...axis,
+			type: "value",
+			axisLabel: yAxisTickFormat ? { formatter: (v) => yAxisTickFormat(v) } : void 0
+		};
+		return {
+			grid: {
+				left: 40,
+				right: 16,
+				top: 24,
+				bottom: 32,
+				containLabel: true
+			},
+			tooltip: {
+				trigger: "axis",
+				axisPointer: { type: "shadow" },
+				valueFormatter: tooltipValueFormat ? (value) => typeof value === "number" ? tooltipValueFormat(value) : String(value) : void 0
+			},
+			xAxis: orientation === "vertical" ? categoryAxis : valueAxis,
+			yAxis: orientation === "vertical" ? valueAxis : categoryAxis,
+			series: [{
+				type: "bar",
+				data: data.map((d, i) => ({
+					value: d.value,
+					itemStyle: { color: d.color ?? palette[i % palette.length] }
+				}))
+			}]
+		};
+	}, [
+		data,
+		orientation,
+		yAxisTickFormat,
+		tooltipValueFormat,
+		isDarkMode
+	]);
+	const onEvents = useMemo(() => onBarClick ? { click: (params) => {
+		if (params.name) onBarClick(params.name);
+	} } : void 0, [onBarClick]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className,
+		style: { height },
+		"data-sf-skeleton": "",
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-sf-fill" })
+	});
+	return /* @__PURE__ */ jsx(Chart, {
+		echarts,
+		options,
+		height,
+		isDarkMode,
+		className,
+		onEvents
+	});
+}
+//#endregion
+//#region src/components/chart/stacked-bar-chart.tsx
+/**
+* StackedBarChart — stacked categorical bar chart for part-to-whole comparisons.
+*
+* @example
+* ```tsx
+* <StackedBarChart
+*   echarts={echarts}
+*   categories={["Mon", "Tue", "Wed"]}
+*   series={[
+*     { name: "Desktop", data: [100, 120, 90] },
+*     { name: "Mobile", data: [60, 80, 110] },
+*   ]}
+* />
+* ```
+*/
+function StackedBarChart({ echarts, categories, series, orientation = "vertical", percent = false, height = 320, yAxisTickFormat, tooltipValueFormat, isDarkMode, loading, className }) {
+	const options = useMemo(() => {
+		const palette = isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS;
+		const resolvedSeries = percent ? series.map((s) => ({
+			...s,
+			data: s.data.map((v, i) => {
+				const total = series.reduce((acc, other) => acc + (other.data[i] ?? 0), 0);
+				return total === 0 ? 0 : v / total * 100;
+			})
+		})) : series;
+		const axis = ChartPalette.axisDefaults(isDarkMode);
+		const categoryAxis = {
+			...axis,
+			type: "category",
+			data: categories
+		};
+		const valueAxis = {
+			...axis,
+			type: "value",
+			max: percent ? 100 : void 0,
+			axisLabel: yAxisTickFormat ? { formatter: (v) => yAxisTickFormat(v) } : percent ? { formatter: "{value}%" } : void 0
+		};
+		return {
+			legend: { bottom: 0 },
+			grid: {
+				left: 40,
+				right: 16,
+				top: 24,
+				bottom: 48,
+				containLabel: true
+			},
+			tooltip: {
+				trigger: "axis",
+				axisPointer: { type: "shadow" },
+				valueFormatter: tooltipValueFormat ? (value) => typeof value === "number" ? tooltipValueFormat(value) : String(value) : void 0
+			},
+			xAxis: orientation === "vertical" ? categoryAxis : valueAxis,
+			yAxis: orientation === "vertical" ? valueAxis : categoryAxis,
+			series: resolvedSeries.map((s, i) => ({
+				name: s.name,
+				type: "bar",
+				stack: "total",
+				data: s.data,
+				itemStyle: { color: s.color ?? palette[i % palette.length] }
+			}))
+		};
+	}, [
+		categories,
+		series,
+		orientation,
+		percent,
+		yAxisTickFormat,
+		tooltipValueFormat,
+		isDarkMode
+	]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-sf-fill" })
+	});
+	return /* @__PURE__ */ jsx(Chart, {
+		echarts,
+		options,
+		height,
+		isDarkMode,
+		className
+	});
+}
+//#endregion
+//#region src/components/chart/pie-chart.tsx
+/**
+* PieChart — single-series pie or donut chart for part-to-whole relationships.
+*
+* @example
+* ```tsx
+* <PieChart
+*   echarts={echarts}
+*   variant="donut"
+*   data={[
+*     { name: "Prod", value: 60 },
+*     { name: "Staging", value: 30 },
+*     { name: "Dev", value: 10 },
+*   ]}
+*   centerSlot={<span className="text-sf-strong">100</span>}
+* />
+* ```
+*/
+function PieChart({ echarts, data, variant = "pie", height = 320, showLegend, tooltipValueFormat, isDarkMode, loading, centerSlot, className }) {
+	const options = useMemo(() => {
+		const palette = isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS;
+		return {
+			legend: showLegend ? { bottom: 0 } : void 0,
+			tooltip: {
+				trigger: "item",
+				valueFormatter: tooltipValueFormat ? (value) => typeof value === "number" ? tooltipValueFormat(value) : String(value) : void 0
+			},
+			series: [{
+				type: "pie",
+				radius: variant === "donut" ? ["55%", "80%"] : "75%",
+				avoidLabelOverlap: true,
+				label: {
+					show: variant !== "donut",
+					color: isDarkMode ? "#e5e5e5" : "#1a1a1a",
+					textBorderWidth: 0,
+					textBorderColor: "transparent"
+				},
+				labelLine: {
+					show: variant !== "donut",
+					lineStyle: { color: isDarkMode ? "#e5e5e5" : "#1a1a1a" }
+				},
+				data: data.map((d, i) => ({
+					name: d.name,
+					value: d.value,
+					itemStyle: { color: d.color ?? palette[i % palette.length] }
+				}))
+			}]
+		};
+	}, [
+		data,
+		variant,
+		showLegend,
+		tooltipValueFormat,
+		isDarkMode
+	]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-full bg-sf-fill" })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		style: { height },
+		children: [/* @__PURE__ */ jsx(Chart, {
+			echarts,
+			options,
+			height,
+			isDarkMode
+		}), centerSlot !== void 0 && variant === "donut" ? /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: centerSlot
+		}) : null]
+	});
+}
+//#endregion
+//#region src/components/chart/area-chart.tsx
+/**
+* AreaChart — filled line chart with gradient fill, suitable for trend
+* visualisations on either a time or category x-axis.
+*
+* Unlike `TimeseriesChart`, this component also accepts a category x-axis,
+* making it useful for cohort or bucketed trend displays.
+*
+* @example
+* ```tsx
+* <AreaChart
+*   echarts={echarts}
+*   xAxisType="category"
+*   categories={["W1", "W2", "W3", "W4"]}
+*   series={[{ name: "Signups", data: [120, 180, 240, 200] }]}
+* />
+* ```
+*/
+function AreaChart({ echarts, series, xAxisType = "time", categories, height = 320, xAxisName, yAxisName, yAxisTickFormat, tooltipValueFormat, isDarkMode, stacked, loading, className }) {
+	const options = useMemo(() => {
+		const palette = isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS;
+		return {
+			grid: {
+				left: 40,
+				right: 16,
+				top: 24,
+				bottom: 32,
+				containLabel: true
+			},
+			legend: series.length > 1 ? { bottom: 0 } : void 0,
+			tooltip: {
+				trigger: "axis",
+				valueFormatter: tooltipValueFormat ? (value) => typeof value === "number" ? tooltipValueFormat(value) : String(value) : void 0
+			},
+			xAxis: xAxisType === "category" ? {
+				...ChartPalette.axisDefaults(isDarkMode),
+				type: "category",
+				name: xAxisName,
+				data: categories,
+				boundaryGap: false
+			} : {
+				...ChartPalette.axisDefaults(isDarkMode),
+				type: "time",
+				name: xAxisName
+			},
+			yAxis: {
+				...ChartPalette.axisDefaults(isDarkMode),
+				type: "value",
+				name: yAxisName,
+				axisLabel: yAxisTickFormat ? { formatter: (v) => yAxisTickFormat(v) } : void 0
+			},
+			series: series.map((s, i) => {
+				const color = s.color ?? palette[i % palette.length];
+				return {
+					name: s.name,
+					type: "line",
+					smooth: true,
+					showSymbol: false,
+					stack: stacked ? "total" : void 0,
+					data: s.data,
+					itemStyle: { color },
+					lineStyle: { color },
+					areaStyle: {
+						color: {
+							type: "linear",
+							x: 0,
+							y: 0,
+							x2: 0,
+							y2: 1,
+							colorStops: [{
+								offset: 0,
+								color
+							}, {
+								offset: 1,
+								color: "rgba(0,0,0,0)"
+							}]
+						},
+						opacity: .4
+					}
+				};
+			})
+		};
+	}, [
+		series,
+		xAxisType,
+		categories,
+		xAxisName,
+		yAxisName,
+		yAxisTickFormat,
+		tooltipValueFormat,
+		stacked,
+		isDarkMode
+	]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-sf-fill" })
+	});
+	return /* @__PURE__ */ jsx(Chart, {
+		echarts,
+		options,
+		height,
+		isDarkMode,
+		className
+	});
+}
+//#endregion
+//#region src/components/chart/scatter-chart.tsx
+/**
+* ScatterChart — multi-series scatter/point cloud for correlation visualisations.
+*
+* @example
+* ```tsx
+* <ScatterChart
+*   echarts={echarts}
+*   series={[
+*     { name: "Group A", data: [[1, 2], [2, 3], [3, 4]] },
+*     { name: "Group B", data: [[1.5, 4], [2.5, 5]] },
+*   ]}
+*   xAxisName="Cost"
+*   yAxisName="Value"
+* />
+* ```
+*/
+function ScatterChart({ echarts, series, height = 320, xAxisName, yAxisName, xAxisTickFormat, yAxisTickFormat, isDarkMode, loading, className }) {
+	const options = useMemo(() => {
+		const palette = isDarkMode ? CHART_DARK_COLORS : CHART_LIGHT_COLORS;
+		return {
+			grid: {
+				left: 40,
+				right: 16,
+				top: 24,
+				bottom: 40,
+				containLabel: true
+			},
+			legend: series.length > 1 ? { bottom: 0 } : void 0,
+			tooltip: { trigger: "item" },
+			xAxis: {
+				...ChartPalette.axisDefaults(isDarkMode),
+				type: "value",
+				name: xAxisName,
+				axisLabel: xAxisTickFormat ? { formatter: (v) => xAxisTickFormat(v) } : void 0
+			},
+			yAxis: {
+				...ChartPalette.axisDefaults(isDarkMode),
+				type: "value",
+				name: yAxisName,
+				axisLabel: yAxisTickFormat ? { formatter: (v) => yAxisTickFormat(v) } : void 0
+			},
+			series: series.map((s, i) => ({
+				name: s.name,
+				type: "scatter",
+				data: s.data,
+				symbolSize: s.symbolSize ?? 8,
+				itemStyle: { color: s.color ?? palette[i % palette.length] }
+			}))
+		};
+	}, [
+		series,
+		xAxisName,
+		yAxisName,
+		xAxisTickFormat,
+		yAxisTickFormat,
+		isDarkMode
+	]);
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": "true",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-sf-fill" })
+	});
+	return /* @__PURE__ */ jsx(Chart, {
+		echarts,
+		options,
+		height,
+		isDarkMode,
+		className
+	});
+}
+//#endregion
+export { BarChart as a, StackedBarChart as i, AreaChart as n, ChartLegend as o, PieChart as r, TimeseriesChart as s, ScatterChart as t };
 
-//# sourceMappingURL=chart-Bes4MN3C.js.map
+//# sourceMappingURL=chart-BK3sVPnD.js.map