@matthieumordrel/chart-studio 0.2.3 → 0.2.5

package/dist/ui/chart-date-range-panel.mjs

@@ -1,86 +1,14 @@
+import { DATE_RANGE_PRESETS, getPresetLabel } from "../core/date-range-presets.mjs";
 import { useChartContext } from "./chart-context.mjs";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/chart-date-range-panel.tsx
 /**
 * Date range panel content — reusable by both ChartDateRange (inside a popover)
 * and ChartToolbarOverflow (rendered inline).
 *
-* Shows preset buttons (All time, Last 7 days, etc.), a reference date
+* Shows preset buttons (Auto, All time, Last 7 days, etc.), a reference date
 * column picker, and custom date inputs.
 */
-/**
-* Build the list of date range presets relative to "now".
-*
-* "All time" → null (no date filtering)
-* Other presets → { from: Date, to: null } (bounded filter)
-*/
-function getPresets() {
-	return [
-		{
-			label: "All time",
-			buildFilter: () => null
-		},
-		{
-			label: "Last 7 days",
-			buildFilter: () => ({
-				from: daysAgo(7),
-				to: null
-			})
-		},
-		{
-			label: "Last 30 days",
-			buildFilter: () => ({
-				from: daysAgo(30),
-				to: null
-			})
-		},
-		{
-			label: "Last 3 months",
-			buildFilter: () => ({
-				from: monthsAgo(3),
-				to: null
-			})
-		},
-		{
-			label: "Last 6 months",
-			buildFilter: () => ({
-				from: monthsAgo(6),
-				to: null
-			})
-		},
-		{
-			label: "Last 12 months",
-			buildFilter: () => ({
-				from: monthsAgo(12),
-				to: null
-			})
-		},
-		{
-			label: "Year to date",
-			buildFilter: () => ({
-				from: startOfYear(),
-				to: null
-			})
-		}
-	];
-}
-function daysAgo(n) {
-	const d = /* @__PURE__ */ new Date();
-	d.setDate(d.getDate() - n);
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
-function monthsAgo(n) {
-	const d = /* @__PURE__ */ new Date();
-	d.setMonth(d.getMonth() - n);
-	d.setHours(0, 0, 0, 0);
-	return d;
-}
-function startOfYear() {
-	const d = /* @__PURE__ */ new Date();
-	return new Date(d.getFullYear(), 0, 1);
-}
 /** Format a Date as YYYY-MM-DD for native date input value. */
 function toInputValue(date) {
 	if (!date) return "";
@@ -93,24 +21,14 @@ function fromInputValue(value) {
 	return Number.isNaN(d.getTime()) ? null : d;
 }
 /**
-* Determine which preset label matches the current filter, or "Custom".
-* null → "All time" (no date filtering)
-* Compares dates at day-level precision.
+* Resolve the display label for the current date range state.
+*
+* When a preset is active, returns the preset label.
+* When no preset is active (custom range), returns "Custom".
 */
-function resolvePresetLabel(filter) {
-	if (filter === null) return "All time";
-	const presets = getPresets();
-	for (const preset of presets) {
-		const pf = preset.buildFilter();
-		if (pf === null) continue;
-		if (sameDay(pf.from, filter.from) && sameDay(pf.to, filter.to)) return preset.label;
-	}
-	return "Custom";
-}
-function sameDay(a, b) {
-	if (!a && !b) return true;
-	if (!a || !b) return false;
-	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function resolvePresetLabel(dateRangePreset) {
+	if (dateRangePreset === null) return "Custom";
+	return getPresetLabel(dateRangePreset);
 }
 /**
 * Date range panel content (no popover wrapper).
@@ -119,13 +37,11 @@ function sameDay(a, b) {
 * @property className - Additional CSS classes
 */
 function ChartDateRangePanel({ onClose, className }) {
-	const { dateRangeFilter, setDateRangeFilter, referenceDateId, setReferenceDateId, availableDateColumns } = useChartContext();
-	const presets = useMemo(() => getPresets(), []);
-	const activeLabel = resolvePresetLabel(dateRangeFilter);
+	const { dateRangePreset, setDateRangePreset, dateRangeFilter, setDateRangeFilter, referenceDateId, setReferenceDateId, availableDateColumns } = useChartContext();
 	const hasMultipleDateColumns = availableDateColumns.length > 1;
-	const handlePreset = (preset) => {
-		setDateRangeFilter(preset.buildFilter());
-		if (preset.label !== "Custom") onClose?.();
+	const handlePreset = (presetId) => {
+		setDateRangePreset(presetId);
+		onClose?.();
 	};
 	const handleCustomFrom = (value) => {
 		setDateRangeFilter({
@@ -166,12 +82,14 @@ function ChartDateRangePanel({ onClose, className }) {
 					children: "Range"
 				}), /* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-2 gap-1",
-					children: presets.map((preset) => {
+					children: DATE_RANGE_PRESETS.map((preset) => {
+						const isActive = dateRangePreset === preset.id;
 						return /* @__PURE__ */ jsx("button", {
-							onClick: () => handlePreset(preset),
-							className: `rounded-md px-2 py-1.5 text-left text-xs transition-colors ${activeLabel === preset.label ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"}`,
+							onClick: () => handlePreset(preset.id),
+							title: preset.description,
+							className: `rounded-md px-2 py-1.5 text-left text-xs transition-colors ${isActive ? "bg-primary/10 font-medium text-primary" : "text-foreground hover:bg-muted"}`,
 							children: preset.label
-						}, preset.label);
+						}, preset.id);
 					})
 				})]
 			}),

package/dist/ui/chart-date-range.mjs

@@ -24,12 +24,12 @@ function formatDate(date) {
 * Also serves as the reference date column picker when multiple date columns exist.
 */
 function ChartDateRange({ className }) {
-	const { dateRange, dateRangeFilter, availableDateColumns } = useChartContext();
+	const { dateRange, dateRangePreset, availableDateColumns } = useChartContext();
 	const [isOpen, setIsOpen] = useState(false);
 	const triggerRef = useRef(null);
 	if (availableDateColumns.length === 0) return null;
-	const activeLabel = resolvePresetLabel(dateRangeFilter);
-	const isFiltered = dateRangeFilter !== null;
+	const activeLabel = resolvePresetLabel(dateRangePreset);
+	const isFiltered = dateRangePreset !== "all-time";
 	const hasRange = dateRange?.min && dateRange?.max;
 	return /* @__PURE__ */ jsxs("div", {
 		className,

package/dist/ui/chart-debug.d.mts

@@ -5,12 +5,16 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * Debug panel — shows raw data, transformed data, series, and current state.
  * Drop `<ChartDebug />` inside a `<Chart>` to inspect what's happening.
  */
-/** Debug panel that renders chart internals as formatted JSON. */
+/** Debug panel that renders chart internals as formatted JSON.
+ *
+ * @param className - Additional CSS classes for the debug panel.
+ * @param defaultOpen - Whether the debug panel should be open by default. (default: false)
+ */
 declare function ChartDebug({
   className,
   defaultOpen
 }: {
-  className?: string;
+  /** Additional CSS classes for the debug panel. */className?: string; /** Whether the debug panel should be open by default. (default: false) */
   defaultOpen?: boolean;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/ui/chart-debug.mjs

@@ -112,7 +112,11 @@ function TabButton({ tab, isActive, onClick }) {
 		children: tab.label
 	});
 }
-/** Debug panel that renders chart internals as formatted JSON. */
+/** Debug panel that renders chart internals as formatted JSON.
+* 
+* @param className - Additional CSS classes for the debug panel.
+* @param defaultOpen - Whether the debug panel should be open by default. (default: false)
+*/
 function ChartDebug({ className, defaultOpen = false }) {
 	const chart = useChartContext();
 	const [isOpen, setIsOpen] = useState(defaultOpen);

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

@@ -6,9 +6,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 /** Custom dropdown to select the groupBy column. */
 declare function ChartGroupBySelector({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { ChartGroupBySelector };

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

@@ -2,12 +2,13 @@ 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";
+import { Layers } from "lucide-react";
 //#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 }) {
+function ChartGroupBySelector({ className, hideIcon }) {
 	const { chartType, groupById, setGroupBy, availableGroupBys } = useChartContext();
 	if (!CHART_TYPE_CONFIG[chartType].supportsGrouping || availableGroupBys.length === 0) return null;
 	const options = [{
@@ -22,6 +23,8 @@ function ChartGroupBySelector({ className }) {
 		options,
 		onChange: (v) => setGroupBy(v || null),
 		ariaLabel: "Group by",
+		icon: Layers,
+		hideIcon,
 		className
 	});
 }

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

@@ -4,7 +4,7 @@ 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";
+import { ChevronDown, MoveVertical } from "lucide-react";
 //#region src/ui/chart-metric-selector.tsx
 /**
 * Metric selector — trigger button + popover wrapping ChartMetricPanel.
@@ -28,7 +28,7 @@ function ChartMetricSelector({ className }) {
 			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(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",

package/dist/ui/chart-select.mjs

@@ -4,11 +4,6 @@ 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
@@ -17,7 +12,7 @@ import { ChevronDown } from "lucide-react";
 * @property ariaLabel - Accessible label for the trigger
 * @property className - Additional CSS classes
 */
-function ChartSelect({ value, options, onChange, ariaLabel, className }) {
+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);
@@ -37,10 +32,14 @@ function ChartSelect({ value, options, onChange, ariaLabel, className }) {
 			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" : ""}` })]
+			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),

package/dist/ui/chart-source-switcher.d.mts

@@ -14,9 +14,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * - Multi source → dropdown to switch between sources
  */
 declare function ChartSourceSwitcher({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ChartSourceSwitcher };

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

@@ -19,14 +19,14 @@ function formatCount(n) {
 * - Single source → read-only badge: "[icon] Jobs · 1,247 records"
 * - Multi source → dropdown to switch between sources
 */
-function ChartSourceSwitcher({ className }) {
+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: [
-				/* @__PURE__ */ jsx(Database, { className: "h-3 w-3 shrink-0" }),
+				!hideIcon && /* @__PURE__ */ jsx(Database, { className: "h-3 w-3 shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
 					className: "font-medium text-foreground",
 					children: label
@@ -47,6 +47,8 @@ function ChartSourceSwitcher({ className }) {
 		})),
 		onChange: (v) => setActiveSource(v),
 		ariaLabel: "Data source",
+		icon: Database,
+		hideIcon,
 		className
 	});
 }

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

@@ -7,9 +7,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 /** Custom dropdown to select time granularity. */
 declare function ChartTimeBucketSelector({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { ChartTimeBucketSelector };

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

@@ -2,6 +2,7 @@ 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";
+import { Clock } from "lucide-react";
 //#region src/ui/chart-time-bucket-selector.tsx
 /**
 * Time bucket selector — premium custom dropdown.
@@ -16,7 +17,7 @@ const BUCKET_LABELS = {
 	year: "Year"
 };
 /** Custom dropdown to select time granularity. */
-function ChartTimeBucketSelector({ className }) {
+function ChartTimeBucketSelector({ className, hideIcon }) {
 	const { chartType, isTimeSeries, timeBucket, setTimeBucket, availableTimeBuckets } = useChartContext();
 	if (!isTimeSeries || !CHART_TYPE_CONFIG[chartType].supportsTimeBucketing || availableTimeBuckets.length === 0) return null;
 	return /* @__PURE__ */ jsx(ChartSelect, {
@@ -27,6 +28,8 @@ function ChartTimeBucketSelector({ className }) {
 		})),
 		onChange: setTimeBucket,
 		ariaLabel: "Time granularity",
+		icon: Clock,
+		hideIcon,
 		className
 	});
 }

package/dist/ui/chart-toolbar-overflow.mjs

@@ -7,22 +7,25 @@ import { ChartMetricPanel } from "./chart-metric-panel.mjs";
 import { CONTROL_IDS, CONTROL_REGISTRY, SECTIONS } from "./toolbar-types.mjs";
 import { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeft, ChevronRight, Ellipsis, Eraser } from "lucide-react";
+import { ArrowLeft, BarChart3, Calendar, ChevronRight, Clock, Database, Ellipsis, Eraser, Filter, Layers, MoveHorizontal, MoveVertical } from "lucide-react";
 //#region src/ui/chart-toolbar-overflow.tsx
-/**
-* Overflow menu for toolbar controls — Notion-inspired configuration panel.
-*
-* Renders an ellipsis button that opens a panel with all non-pinned controls.
-* Simple controls (selects, toggle buttons) render inline in rows.
-* Complex controls (metric, filters, date range) show as clickable rows that
-* navigate to a full-page detail view within the panel (Notion-style drill-down).
-*/
 /** Controls that drill-down into a detail page instead of rendering inline. */
 const COMPLEX_CONTROLS = new Set([
 	"metric",
 	"filters",
 	"dateRange"
 ]);
+/** Icon for each control in the overflow menu. */
+const CONTROL_ICONS = {
+	source: Database,
+	xAxis: MoveHorizontal,
+	chartType: BarChart3,
+	groupBy: Layers,
+	timeBucket: Clock,
+	metric: MoveVertical,
+	filters: Filter,
+	dateRange: Calendar
+};
 /**
 * Ellipsis overflow menu with Notion-style drill-down navigation.
 * Main view shows all controls. Clicking a complex control replaces
@@ -157,16 +160,13 @@ function DetailPage({ controlId, onBack }) {
 * Used for selects and toggle buttons that work inline without popovers.
 */
 function SimpleControlRow({ controlId }) {
-	const entry = CONTROL_REGISTRY[controlId];
-	const Component = entry.component;
+	const Component = CONTROL_REGISTRY[controlId].component;
+	const Icon = CONTROL_ICONS[controlId];
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 rounded-lg px-1 py-1.5",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "shrink-0 text-xs text-muted-foreground",
-			children: entry.label
-		}), /* @__PURE__ */ jsx("div", {
-			className: "ml-auto flex min-w-0 items-center",
-			children: /* @__PURE__ */ jsx(Component, {})
+		className: "flex items-center gap-3 rounded-lg px-2 py-1.5",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center",
+			children: /* @__PURE__ */ jsx(Component, { hideIcon: true })
 		})]
 	});
 }
@@ -175,17 +175,14 @@ function SimpleControlRow({ controlId }) {
 * Shows the control label, current value summary, and a chevron.
 */
 function ComplexControlRow({ controlId, onNavigate }) {
-	const entry = CONTROL_REGISTRY[controlId];
+	const Icon = CONTROL_ICONS[controlId];
 	return /* @__PURE__ */ jsxs("button", {
 		onClick: onNavigate,
 		className: "flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-muted/50",
 		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
 			/* @__PURE__ */ jsx("div", {
-				className: "shrink-0 text-xs text-muted-foreground",
-				children: entry.label
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "ml-auto truncate text-xs text-foreground",
+				className: "truncate text-xs text-foreground",
 				children: /* @__PURE__ */ jsx(ControlSummary, { controlId })
 			}),
 			/* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
@@ -194,14 +191,39 @@ function ComplexControlRow({ controlId, onNavigate }) {
 }
 /** Summary text for a complex control in the main menu. */
 function ControlSummary({ controlId }) {
-	const { metric, columns, filters, dateRangeFilter } = useChartContext();
+	const { metric, columns, filters, dateRange, dateRangePreset } = useChartContext();
 	switch (controlId) {
 		case "metric": return /* @__PURE__ */ jsx("span", { children: getMetricLabel(metric, columns) });
 		case "filters": {
 			const count = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
 			return /* @__PURE__ */ jsx("span", { children: count > 0 ? `${count} active` : "None" });
 		}
-		case "dateRange": return /* @__PURE__ */ jsx("span", { children: resolvePresetLabel(dateRangeFilter) });
+		case "dateRange": {
+			const label = resolvePresetLabel(dateRangePreset);
+			if (dateRange?.min && dateRange?.max) {
+				const fmt = (d) => d.toLocaleDateString("en-US", {
+					month: "short",
+					day: "numeric",
+					year: "2-digit"
+				});
+				return /* @__PURE__ */ jsxs("span", { children: [
+					label,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/40",
+						children: " · "
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-normal",
+						children: [
+							fmt(dateRange.min),
+							" – ",
+							fmt(dateRange.max)
+						]
+					})
+				] });
+			}
+			return /* @__PURE__ */ jsx("span", { children: label });
+		}
 		default: return null;
 	}
 }

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

@@ -10,8 +10,8 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * @property hidden - Control IDs to completely hide (not in toolbar, not in overflow)
  */
 type ChartToolbarProps = {
-  className?: string;
-  pinned?: readonly ControlId[];
+  /** Additional CSS classes for the toolbar container. */className?: string; /** Control IDs to always show in the toolbar row (outside the overflow menu) */
+  pinned?: readonly ControlId[]; /** Control IDs to completely hide (not in toolbar, not in overflow) */
   hidden?: readonly ControlId[];
 };
 /**
@@ -19,6 +19,10 @@ type ChartToolbarProps = {
  *
  * Controls are rendered in registry order. Each sub-component still
  * auto-hides when not relevant (e.g. time bucket only shows for date X-axis).
+ *
+ * @param className - Additional CSS classes for the toolbar container
+ * @param pinned - Control IDs to always show in the toolbar row (outside the overflow menu)
+ * @param hidden - Control IDs to completely hide (not in toolbar, not in overflow)
  */
 declare function ChartToolbar({
   className,

package/dist/ui/chart-toolbar.mjs

@@ -32,6 +32,10 @@ const DEFAULT_PINNED_CONTROLS = ["dateRange"];
 *
 * Controls are rendered in registry order. Each sub-component still
 * auto-hides when not relevant (e.g. time bucket only shows for date X-axis).
+* 
+* @param className - Additional CSS classes for the toolbar container
+* @param pinned - Control IDs to always show in the toolbar row (outside the overflow menu)
+* @param hidden - Control IDs to completely hide (not in toolbar, not in overflow)
 */
 function ChartToolbar({ className, pinned = DEFAULT_PINNED_CONTROLS, hidden = [] }) {
 	const pinnedSet = useMemo(() => new Set(pinned), [pinned]);

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

@@ -2,9 +2,14 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ui/chart-type-selector.d.ts
 /**
- * Chart type selector — inline toggle buttons for bar/line/area/pie/donut.
+ * Chart type selector — inline toggle buttons with variant dropdown.
+ *
+ * Primary types: Bar, Line, Area, Pie, Donut.
+ * Types with variants show a small chevron that opens a dropdown:
+ *   Bar  → Stacked, Grouped, 100%
+ *   Area → Stacked, 100%
  */
-/** Inline toggle buttons to select the chart type. */
+/** Inline toggle buttons with variant dropdown for chart type selection. */
 declare function ChartTypeSelector({
   className
 }: {