@matthieumordrel/chart-studio 0.2.0 → 0.2.2

package/dist/ui/chart-filters-panel.mjs

@@ -0,0 +1,132 @@
+import { useChartContext } from "./chart-context.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Eraser } from "lucide-react";
+//#region src/ui/chart-filters-panel.tsx
+/**
+* Filters panel content — reusable by both ChartFilters (inside a popover)
+* and ChartToolbarOverflow (rendered inline).
+*
+* Shows filterable columns as collapsible sections with checkbox options.
+* Each column section can be expanded/collapsed independently.
+*/
+/** Maximum number of options to show per column before collapsing. */
+const MAX_VISIBLE_OPTIONS = 6;
+/**
+* Filters panel content (no popover wrapper).
+*
+* @property className - Additional CSS classes
+* @property showHeader - When true (default), shows "X filter(s) active · Filters" + clear icon.
+*   Set false when the header is rendered by the parent (e.g. overflow DetailPage).
+*/
+function ChartFiltersPanel({ className, showHeader = true }) {
+	const { availableFilters, filters, toggleFilter, clearAllFilters } = useChartContext();
+	const activeCount = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
+	if (availableFilters.length === 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "py-6 text-center text-xs text-muted-foreground",
+			children: "No filterable columns"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [showHeader && /* @__PURE__ */ jsxs("div", {
+			className: "mb-3 flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "truncate text-xs font-semibold text-foreground",
+				children: [activeCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [
+						activeCount,
+						" filter",
+						activeCount !== 1 ? "s" : "",
+						" active ·",
+						" "
+					]
+				}), "Filters"]
+			}), activeCount > 0 && /* @__PURE__ */ jsx("button", {
+				onClick: () => clearAllFilters(),
+				className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+				"aria-label": "Clear all filters",
+				children: /* @__PURE__ */ jsx(Eraser, { className: "h-3.5 w-3.5" })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-1",
+			children: availableFilters.map((filter) => /* @__PURE__ */ jsx(FilterSection, {
+				filter,
+				activeValues: filters.get(filter.columnId),
+				onToggle: (value) => toggleFilter(filter.columnId, value)
+			}, filter.columnId))
+		})]
+	});
+}
+/** A collapsible filter column section with checkable options. */
+function FilterSection({ filter, activeValues, onToggle }) {
+	const [isOpen, setIsOpen] = useState(true);
+	const [expanded, setExpanded] = useState(false);
+	const visibleOptions = expanded ? filter.options : filter.options.slice(0, MAX_VISIBLE_OPTIONS);
+	const hasMore = filter.options.length > MAX_VISIBLE_OPTIONS;
+	const activeCount = activeValues?.size ?? 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg",
+		children: [/* @__PURE__ */ jsxs("button", {
+			onClick: () => setIsOpen(!isOpen),
+			className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted/50",
+			children: [
+				/* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground transition-transform ${isOpen ? "" : "-rotate-90"}` }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-[11px] font-semibold text-foreground",
+					children: filter.label
+				}),
+				activeCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-primary/10 px-1.5 text-[9px] font-semibold text-primary",
+					children: activeCount
+				})
+			]
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			className: "pb-1 pl-2 pr-1 pt-0.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "space-y-px",
+				children: visibleOptions.map((option) => {
+					const isActive = activeValues?.has(option.value) ?? false;
+					return /* @__PURE__ */ jsxs("button", {
+						onClick: () => onToggle(option.value),
+						className: `flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors ${isActive ? "bg-primary/8 text-primary" : "text-foreground hover:bg-muted/60"}`,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${isActive ? "border-primary bg-primary" : "border-muted-foreground/30 bg-background"}`,
+								children: isActive && /* @__PURE__ */ jsx("svg", {
+									xmlns: "http://www.w3.org/2000/svg",
+									width: "10",
+									height: "10",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "white",
+									strokeWidth: "3",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1 truncate",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "shrink-0 tabular-nums text-[10px] text-muted-foreground/70",
+								children: option.count
+							})
+						]
+					}, option.value);
+				})
+			}), hasMore && /* @__PURE__ */ jsx("button", {
+				onClick: () => setExpanded(!expanded),
+				className: "mt-1 w-full rounded-md px-2 py-1 text-left text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+				children: expanded ? "Show less" : `Show ${filter.options.length - MAX_VISIBLE_OPTIONS} more…`
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartFiltersPanel };

package/dist/ui/{chart-filters.d.ts → chart-filters.d.mts}

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-filters.d.ts
 /**
  * Chart filters — compact button that shows active filter count.
  * Clicking reveals a popover wrapping ChartFiltersPanel.
@@ -6,7 +9,10 @@
  * Compact filter button + dropdown for all filterable columns.
  * Shows a count badge when filters are active.
  */
-export declare function ChartFilters({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=chart-filters.d.ts.map
+declare function ChartFilters({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartFilters };

package/dist/ui/chart-filters.mjs

@@ -0,0 +1,48 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { ChartFiltersPanel } from "./chart-filters-panel.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter } from "lucide-react";
+//#region src/ui/chart-filters.tsx
+/**
+* Chart filters — compact button that shows active filter count.
+* Clicking reveals a popover wrapping ChartFiltersPanel.
+*/
+/**
+* Compact filter button + dropdown for all filterable columns.
+* Shows a count badge when filters are active.
+*/
+function ChartFilters({ className }) {
+	const { availableFilters, filters } = useChartContext();
+	const [isOpen, setIsOpen] = useState(false);
+	const triggerRef = useRef(null);
+	if (availableFilters.length === 0) return null;
+	const activeCount = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
+	const isActive = activeCount > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: triggerRef,
+			onClick: () => setIsOpen(!isOpen),
+			className: `inline-flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 ${isActive ? "border-primary/30 bg-primary/5 text-primary shadow-sm shadow-primary/5 hover:bg-primary/8" : "border-border/50 bg-background text-muted-foreground shadow-sm hover:border-border hover:bg-muted/30 hover:shadow hover:text-foreground"}`,
+			children: [
+				/* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
+				"Filters",
+				isActive && /* @__PURE__ */ jsx("span", {
+					className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold text-primary-foreground",
+					children: activeCount
+				})
+			]
+		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
+			isOpen,
+			onClose: () => setIsOpen(false),
+			triggerRef,
+			width: 288,
+			className: "max-h-[420px] overflow-y-auto overscroll-contain p-3",
+			children: /* @__PURE__ */ jsx(ChartFiltersPanel, {})
+		})]
+	});
+}
+//#endregion
+export { ChartFilters };

package/dist/ui/chart-group-by-selector.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-group-by-selector.d.ts
+/**
+ * GroupBy selector — premium custom dropdown replacing native <select>.
+ */
+/** Custom dropdown to select the groupBy column. */
+declare function ChartGroupBySelector({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartGroupBySelector };

package/dist/ui/chart-group-by-selector.mjs

@@ -0,0 +1,29 @@
+import { CHART_TYPE_CONFIG } from "../core/chart-capabilities.mjs";
+import { useChartContext } from "./chart-context.mjs";
+import { ChartSelect } from "./chart-select.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/chart-group-by-selector.tsx
+/**
+* GroupBy selector — premium custom dropdown replacing native <select>.
+*/
+/** Custom dropdown to select the groupBy column. */
+function ChartGroupBySelector({ className }) {
+	const { chartType, groupById, setGroupBy, availableGroupBys } = useChartContext();
+	if (!CHART_TYPE_CONFIG[chartType].supportsGrouping || availableGroupBys.length === 0) return null;
+	const options = [{
+		value: "",
+		label: "No grouping"
+	}, ...availableGroupBys.map((col) => ({
+		value: col.id,
+		label: col.label
+	}))];
+	return /* @__PURE__ */ jsx(ChartSelect, {
+		value: groupById ?? "",
+		options,
+		onChange: (v) => setGroupBy(v || null),
+		ariaLabel: "Group by",
+		className
+	});
+}
+//#endregion
+export { ChartGroupBySelector };

package/dist/ui/{chart-metric-panel.d.ts → chart-metric-panel.d.mts}

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-metric-panel.d.ts
 /**
  * Metric panel content — reusable by both ChartMetricSelector (inside a popover)
  * and ChartToolbarOverflow (rendered inline).
@@ -11,8 +14,12 @@
  * @property onClose - Optional callback when user makes a definitive selection (e.g. "Count")
  * @property className - Additional CSS classes
  */
-export declare function ChartMetricPanel({ onClose, className }: {
-    onClose?: () => void;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=chart-metric-panel.d.ts.map
+declare function ChartMetricPanel({
+  onClose,
+  className
+}: {
+  onClose?: () => void;
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartMetricPanel };

package/dist/ui/chart-metric-panel.mjs

@@ -0,0 +1,172 @@
+import { DEFAULT_METRIC, isAggregateMetric } from "../core/metric-utils.mjs";
+import { useChartContext } from "./chart-context.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownToLine, ArrowUpToLine, Divide, Hash, Sigma } from "lucide-react";
+//#region src/ui/chart-metric-panel.tsx
+const AGGREGATE_OPTIONS = [
+	{
+		fn: "sum",
+		label: "Sum",
+		shortLabel: "Sum",
+		icon: /* @__PURE__ */ jsx(Sigma, { className: "h-3.5 w-3.5 shrink-0" })
+	},
+	{
+		fn: "avg",
+		label: "Average",
+		shortLabel: "Avg",
+		icon: /* @__PURE__ */ jsx(Divide, { className: "h-3.5 w-3.5 shrink-0" })
+	},
+	{
+		fn: "min",
+		label: "Minimum",
+		shortLabel: "Min",
+		icon: /* @__PURE__ */ jsx(ArrowDownToLine, { className: "h-3.5 w-3.5 shrink-0" })
+	},
+	{
+		fn: "max",
+		label: "Maximum",
+		shortLabel: "Max",
+		icon: /* @__PURE__ */ jsx(ArrowUpToLine, { className: "h-3.5 w-3.5 shrink-0" })
+	}
+];
+/** Aggregates where the "Exclude zeros" toggle is relevant */
+const ZERO_TOGGLE_AGGREGATES = new Set([
+	"avg",
+	"min",
+	"max"
+]);
+/**
+* Extract number columns from the chart column list.
+*/
+function getNumberColumns(columns) {
+	return columns.filter((column) => column.type === "number");
+}
+/**
+* Group the allowed aggregate metrics by number column while preserving column order.
+*/
+function getMetricColumnGroups(availableMetrics, columns) {
+	const aggregateMap = /* @__PURE__ */ new Map();
+	for (const metric of availableMetrics) {
+		if (metric.kind !== "aggregate") continue;
+		const aggregates = aggregateMap.get(metric.columnId) ?? /* @__PURE__ */ new Set();
+		aggregates.add(metric.aggregate);
+		aggregateMap.set(metric.columnId, aggregates);
+	}
+	return getNumberColumns(columns).filter((column) => aggregateMap.has(column.id)).map((column) => ({
+		columnId: column.id,
+		label: column.label,
+		aggregates: [...aggregateMap.get(column.id) ?? /* @__PURE__ */ new Set()]
+	}));
+}
+/** A single number column section with aggregate buttons + optional zero toggle. */
+function MetricColumnGroup({ group, isActiveColumn, activeAggregate, includeZeros, onSelectAggregate, onToggleZeros }) {
+	const isZeroToggleEnabled = isActiveColumn && activeAggregate !== null && ZERO_TOGGLE_AGGREGATES.has(activeAggregate);
+	const isZeroToggleDisabled = isActiveColumn && activeAggregate === "sum";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+				children: group.label
+			}), isActiveColumn && /* @__PURE__ */ jsxs("button", {
+				onClick: isZeroToggleDisabled ? void 0 : onToggleZeros,
+				className: `flex items-center gap-1.5 text-[10px] transition-colors ${isZeroToggleDisabled ? "cursor-not-allowed text-muted-foreground/30" : "text-muted-foreground hover:text-foreground"}`,
+				disabled: isZeroToggleDisabled,
+				title: isZeroToggleDisabled ? "Not applicable for Sum" : "Exclude zero values from calculation",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `flex h-3 w-3 shrink-0 items-center justify-center rounded-sm border transition-colors ${isZeroToggleEnabled && !includeZeros ? "border-primary bg-primary" : isZeroToggleDisabled ? "border-muted-foreground/20" : "border-muted-foreground/30"}`,
+					children: isZeroToggleEnabled && !includeZeros && /* @__PURE__ */ jsx("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "8",
+						height: "8",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "white",
+						strokeWidth: "3",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+					})
+				}), "Excl. zeros"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-1.5",
+			children: AGGREGATE_OPTIONS.filter((opt) => group.aggregates.includes(opt.fn)).map((opt) => {
+				return /* @__PURE__ */ jsxs("button", {
+					onClick: () => onSelectAggregate(opt.fn),
+					className: `inline-flex h-8 items-center justify-center gap-2 rounded-md border text-xs transition-colors ${isActiveColumn && activeAggregate === opt.fn ? "border-primary/50 bg-primary/10 font-medium text-primary" : "border-transparent bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground"}`,
+					title: opt.label,
+					children: [opt.icon, opt.shortLabel]
+				}, opt.fn);
+			})
+		})]
+	});
+}
+/**
+* Metric panel content (no popover wrapper).
+*
+* @property onClose - Optional callback when user makes a definitive selection (e.g. "Count")
+* @property className - Additional CSS classes
+*/
+function ChartMetricPanel({ onClose, className }) {
+	const { metric, setMetric, columns, availableMetrics } = useChartContext();
+	const countMetricEnabled = useMemo(() => availableMetrics.some((candidate) => candidate.kind === "count"), [availableMetrics]);
+	const metricColumnGroups = useMemo(() => getMetricColumnGroups(availableMetrics, columns), [availableMetrics, columns]);
+	const isCount = metric.kind === "count";
+	const includeZeros = isAggregateMetric(metric) ? metric.includeZeros ?? true : true;
+	const handleSelectCount = () => {
+		if (!countMetricEnabled) return;
+		setMetric(DEFAULT_METRIC);
+		onClose?.();
+	};
+	const handleSelectAggregate = (columnId, fn) => {
+		setMetric({
+			kind: "aggregate",
+			columnId,
+			aggregate: fn,
+			includeZeros: isAggregateMetric(metric) && metric.columnId === columnId ? includeZeros : true
+		});
+	};
+	const handleToggleZeros = () => {
+		if (!isAggregateMetric(metric)) return;
+		setMetric({
+			...metric,
+			includeZeros: !includeZeros
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			countMetricEnabled && /* @__PURE__ */ jsxs("button", {
+				onClick: handleSelectCount,
+				className: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-xs transition-colors ${isCount ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `flex h-6 w-6 items-center justify-center rounded-md ${isCount ? "bg-primary/15 text-primary" : "bg-muted text-muted-foreground"}`,
+					children: /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5" })
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					className: "font-medium",
+					children: "Count"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-[10px] text-muted-foreground",
+					children: "Number of items"
+				})] })]
+			}),
+			countMetricEnabled && metricColumnGroups.length > 0 && /* @__PURE__ */ jsx("div", { className: "my-4 border-t border-border" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: metricColumnGroups.map((group) => /* @__PURE__ */ jsx(MetricColumnGroup, {
+					group,
+					isActiveColumn: isAggregateMetric(metric) && metric.columnId === group.columnId,
+					activeAggregate: isAggregateMetric(metric) && metric.columnId === group.columnId ? metric.aggregate : null,
+					includeZeros,
+					onSelectAggregate: (fn) => handleSelectAggregate(group.columnId, fn),
+					onToggleZeros: handleToggleZeros
+				}, group.columnId))
+			})
+		]
+	});
+}
+//#endregion
+export { ChartMetricPanel };

package/dist/ui/chart-metric-selector.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-metric-selector.d.ts
+/**
+ * Metric selector — trigger button + popover wrapping ChartMetricPanel.
+ *
+ * Follows the same dropdown pattern as ChartFilters / ChartDateRange.
+ */
+/** Styled popover to select the Y-axis metric with grouped aggregate buttons. */
+declare function ChartMetricSelector({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartMetricSelector };

package/dist/ui/chart-metric-selector.mjs

@@ -0,0 +1,50 @@
+import { getMetricLabel, isAggregateMetric } from "../core/metric-utils.mjs";
+import { useChartContext } from "./chart-context.mjs";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { ChartMetricPanel } from "./chart-metric-panel.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, TrendingUpDown } from "lucide-react";
+//#region src/ui/chart-metric-selector.tsx
+/**
+* Metric selector — trigger button + popover wrapping ChartMetricPanel.
+*
+* Follows the same dropdown pattern as ChartFilters / ChartDateRange.
+*/
+/** Styled popover to select the Y-axis metric with grouped aggregate buttons. */
+function ChartMetricSelector({ className }) {
+	const { metric, availableMetrics, columns } = useChartContext();
+	const [isOpen, setIsOpen] = useState(false);
+	const triggerRef = useRef(null);
+	if (availableMetrics.length <= 1) return null;
+	const isActive = !(metric.kind === "count");
+	const includeZeros = isAggregateMetric(metric) ? metric.includeZeros ?? true : true;
+	const label = getMetricLabel(metric, columns);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: triggerRef,
+			onClick: () => setIsOpen(!isOpen),
+			className: `inline-flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 ${isActive ? "border-primary/30 bg-primary/5 text-primary shadow-sm shadow-primary/5 hover:bg-primary/8" : "border-border/50 bg-background text-muted-foreground shadow-sm hover:border-border hover:bg-muted/30 hover:shadow hover:text-foreground"}`,
+			"aria-label": "Metric",
+			children: [
+				/* @__PURE__ */ jsx(TrendingUpDown, { className: "h-3 w-3" }),
+				/* @__PURE__ */ jsx("span", { children: label }),
+				isActive && !includeZeros && /* @__PURE__ */ jsx("span", {
+					className: "rounded bg-muted px-1 py-px text-[9px] font-normal text-muted-foreground",
+					children: "excl. 0"
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/50 transition-transform ${isOpen ? "rotate-180" : ""}` })
+			]
+		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
+			isOpen,
+			onClose: () => setIsOpen(false),
+			triggerRef,
+			width: 288,
+			className: "p-4",
+			children: /* @__PURE__ */ jsx(ChartMetricPanel, { onClose: () => setIsOpen(false) })
+		})]
+	});
+}
+//#endregion
+export { ChartMetricSelector };

package/dist/ui/chart-select.mjs

@@ -0,0 +1,62 @@
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/ui/chart-select.tsx
+/**
+* Custom select dropdown — premium replacement for native <select> elements.
+* Uses fixed positioning so the options list works correctly even inside
+* overflow-hidden containers (e.g. the toolbar overflow panel).
+*/
+/**
+* Premium styled select dropdown with highlight-only selection styling.
+*
+* @property value - Currently selected value
+* @property options - Array of { value, label } options
+* @property onChange - Callback when selection changes
+* @property ariaLabel - Accessible label for the trigger
+* @property className - Additional CSS classes
+*/
+function ChartSelect({ value, options, onChange, ariaLabel, className }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const selected = options.find((o) => o.value === value);
+	/** Toggle the dropdown. */
+	const handleToggle = () => {
+		setIsOpen((current) => !current);
+	};
+	/** Select an option and close the dropdown. */
+	const handleSelect = (optionValue) => {
+		onChange(optionValue);
+		setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: triggerRef,
+			onClick: handleToggle,
+			className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 text-xs font-medium text-foreground shadow-sm transition-all hover:border-border hover:bg-muted/30 hover:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
+			"aria-label": ariaLabel,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: selected?.label ?? value
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform ${isOpen ? "rotate-180" : ""}` })]
+		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
+			isOpen,
+			onClose: () => setIsOpen(false),
+			triggerRef,
+			minWidth: "trigger",
+			className: "p-1",
+			children: options.map((option) => /* @__PURE__ */ jsx("button", {
+				onClick: () => handleSelect(option.value),
+				className: `flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors ${option.value === value ? "bg-primary/8 font-medium text-primary" : "text-foreground hover:bg-muted/60"}`,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: option.label
+				})
+			}, option.value))
+		})]
+	});
+}
+//#endregion
+export { ChartSelect };

package/dist/ui/{chart-source-switcher.d.ts → chart-source-switcher.d.mts}

@@ -1,3 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-source-switcher.d.ts
 /**
  * Data source control — adapts based on single vs multi-source.
  *
@@ -10,7 +13,10 @@
  * - Single source → read-only badge: "[icon] Jobs · 1,247 records"
  * - Multi source → dropdown to switch between sources
  */
-export declare function ChartSourceSwitcher({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=chart-source-switcher.d.ts.map
+declare function ChartSourceSwitcher({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartSourceSwitcher };

package/dist/ui/chart-source-switcher.mjs

@@ -0,0 +1,54 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartSelect } from "./chart-select.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Database } from "lucide-react";
+//#region src/ui/chart-source-switcher.tsx
+/**
+* Data source control — adapts based on single vs multi-source.
+*
+* Single source: read-only badge showing source label + record count.
+* Multi source: dropdown to switch between data sources.
+*/
+/** Format a number with locale-aware separators (e.g. 1,247). */
+function formatCount(n) {
+	return n.toLocaleString("en-US");
+}
+/**
+* Data source display/switcher.
+*
+* - Single source → read-only badge: "[icon] Jobs · 1,247 records"
+* - Multi source → dropdown to switch between sources
+*/
+function ChartSourceSwitcher({ className }) {
+	const { hasMultipleSources, sources, activeSourceId, setActiveSource, recordCount } = useChartContext();
+	if (!hasMultipleSources) {
+		const label = sources[0]?.label ?? "Unnamed Source";
+		return /* @__PURE__ */ jsxs("div", {
+			className: `inline-flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground ${className ?? ""}`,
+			children: [
+				/* @__PURE__ */ jsx(Database, { className: "h-3 w-3 shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/40",
+					children: "·"
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [formatCount(recordCount), " records"] })
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx(ChartSelect, {
+		value: activeSourceId,
+		options: sources.map((source) => ({
+			value: source.id,
+			label: `Source: ${source.label}`
+		})),
+		onChange: (v) => setActiveSource(v),
+		ariaLabel: "Data source",
+		className
+	});
+}
+//#endregion
+export { ChartSourceSwitcher };

package/dist/ui/chart-time-bucket-selector.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-time-bucket-selector.d.ts
+/**
+ * Time bucket selector — premium custom dropdown.
+ * Only renders when the X-axis is a date column.
+ */
+/** Custom dropdown to select time granularity. */
+declare function ChartTimeBucketSelector({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartTimeBucketSelector };