@matthieumordrel/chart-studio-ui 0.5.2

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

@@ -0,0 +1,25 @@
+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).
+ *
+ * Shows a "Count" option plus grouped number columns with aggregate buttons
+ * (Sum, Avg, Min, Max) and an "Exclude zeros" toggle per column.
+ */
+/**
+ * Metric panel content (no popover wrapper).
+ *
+ * @property onClose - Optional callback when user makes a definitive selection (e.g. "Count")
+ * @property className - Additional CSS classes
+ */
+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 { useChartContext } from "./chart-context.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DEFAULT_METRIC, isAggregateMetric } from "@matthieumordrel/chart-studio/_internal";
+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 { 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 { getMetricLabel, isAggregateMetric } from "@matthieumordrel/chart-studio/_internal";
+import { ChevronDown, MoveVertical } 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(MoveVertical, { 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,61 @@
+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
+/**
+* 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, icon: Icon, hideIcon, 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: [
+				Icon && !hideIcon && /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+				/* @__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.mts

@@ -0,0 +1,24 @@
+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.
+ *
+ * Single source: read-only badge showing source label + record count.
+ * Multi source: dropdown to switch between data sources.
+ */
+/**
+ * Data source display/switcher.
+ *
+ * - Single source → read-only badge: "[icon] Jobs · 1,247 records"
+ * - Multi source → dropdown to switch between sources
+ */
+declare function ChartSourceSwitcher({
+  className,
+  hideIcon
+}: {
+  className?: string;
+  hideIcon?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartSourceSwitcher };

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

@@ -0,0 +1,56 @@
+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, hideIcon }) {
+	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: [
+				!hideIcon && /* @__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",
+		icon: Database,
+		hideIcon,
+		className
+	});
+}
+//#endregion
+export { ChartSourceSwitcher };

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

@@ -0,0 +1,17 @@
+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,
+  hideIcon
+}: {
+  className?: string;
+  hideIcon?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartTimeBucketSelector };

package/dist/ui/chart-time-bucket-selector.mjs

@@ -0,0 +1,37 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartSelect } from "./chart-select.mjs";
+import { jsx } from "react/jsx-runtime";
+import { CHART_TYPE_CONFIG } from "@matthieumordrel/chart-studio/_internal";
+import { Clock } from "lucide-react";
+//#region src/ui/chart-time-bucket-selector.tsx
+/**
+* Time bucket selector — premium custom dropdown.
+* Only renders when the X-axis is a date column.
+*/
+/** Labels for each time bucket. */
+const BUCKET_LABELS = {
+	day: "Day",
+	week: "Week",
+	month: "Month",
+	quarter: "Quarter",
+	year: "Year"
+};
+/** Custom dropdown to select time granularity. */
+function ChartTimeBucketSelector({ className, hideIcon }) {
+	const { chartType, isTimeSeries, timeBucket, setTimeBucket, availableTimeBuckets } = useChartContext();
+	if (!isTimeSeries || !CHART_TYPE_CONFIG[chartType].supportsTimeBucketing || availableTimeBuckets.length <= 1) return null;
+	return /* @__PURE__ */ jsx(ChartSelect, {
+		value: timeBucket,
+		options: availableTimeBuckets.map((bucket) => ({
+			value: bucket,
+			label: BUCKET_LABELS[bucket]
+		})),
+		onChange: setTimeBucket,
+		ariaLabel: "Time granularity",
+		icon: Clock,
+		hideIcon,
+		className
+	});
+}
+//#endregion
+export { ChartTimeBucketSelector };

package/dist/ui/chart-toolbar-overflow.d.mts

@@ -0,0 +1,28 @@
+import { ControlId } from "./toolbar-types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-toolbar-overflow.d.ts
+/**
+ * Props for ChartToolbarOverflow.
+ *
+ * @property pinned - Controls shown outside the overflow (excluded from menu)
+ * @property hidden - Controls completely hidden everywhere
+ * @property className - Additional CSS classes
+ */
+type ChartToolbarOverflowProps = {
+  pinned: ReadonlySet<ControlId>;
+  hidden: ReadonlySet<ControlId>;
+  className?: string;
+};
+/**
+ * Ellipsis overflow menu with Notion-style drill-down navigation.
+ * Main view shows all controls. Clicking a complex control replaces
+ * the panel content with that control's detail page + back button.
+ */
+declare function ChartToolbarOverflow({
+  pinned,
+  hidden,
+  className
+}: ChartToolbarOverflowProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartToolbarOverflow };