@matthieumordrel/chart-studio-ui 0.5.2

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

@@ -0,0 +1,223 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { ChartDateRangePanel, resolvePresetLabel } from "./chart-date-range-panel.mjs";
+import { ChartFiltersPanel } from "./chart-filters-panel.mjs";
+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 { getMetricLabel } from "@matthieumordrel/chart-studio/_internal";
+import { ArrowLeft, BarChart3, Calendar, ChevronRight, Clock, Database, Ellipsis, Eraser, Filter, Layers, MoveHorizontal, MoveVertical } from "lucide-react";
+//#region src/ui/chart-toolbar-overflow.tsx
+/** 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
+* the panel content with that control's detail page + back button.
+*/
+function ChartToolbarOverflow({ pinned, hidden, className }) {
+	const [isOpen, setIsOpen] = useState(false);
+	/** null = main menu, ControlId = detail page for that control */
+	const [activePage, setActivePage] = useState(null);
+	const triggerRef = useRef(null);
+	const sectionGroups = SECTIONS.map((section) => {
+		return {
+			section,
+			controls: CONTROL_IDS.filter((id) => {
+				if (pinned.has(id) || hidden.has(id)) return false;
+				return CONTROL_REGISTRY[id].section === section.id;
+			})
+		};
+	}).filter((g) => g.controls.length > 0);
+	if (sectionGroups.length === 0) return null;
+	const handleClose = () => {
+		setIsOpen(false);
+		setActivePage(null);
+	};
+	const handleToggle = () => {
+		if (isOpen) {
+			handleClose();
+			return;
+		}
+		setIsOpen(true);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref: triggerRef,
+			onClick: handleToggle,
+			className: `inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors ${isOpen ? "border-primary/50 bg-primary/10 text-primary" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"}`,
+			"aria-label": "Chart settings",
+			children: /* @__PURE__ */ jsx(Ellipsis, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
+			isOpen,
+			onClose: handleClose,
+			triggerRef,
+			align: "right",
+			width: 320,
+			repositionKey: activePage ?? "main",
+			className: "flex min-h-[280px] max-h-[min(480px,80vh)] flex-col",
+			children: activePage === null ? /* @__PURE__ */ jsx(MainMenu, {
+				sectionGroups,
+				onNavigate: setActivePage
+			}) : /* @__PURE__ */ jsx(DetailPage, {
+				controlId: activePage,
+				onBack: () => setActivePage(null)
+			})
+		})]
+	});
+}
+/** Main menu showing all controls organized by section. */
+function MainMenu({ sectionGroups, onNavigate }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "border-b border-border px-4 py-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-semibold text-foreground",
+			children: "Chart configuration"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-0.5 text-[10px] text-muted-foreground",
+			children: "Customize how your data is displayed"
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
+		onWheel: (e) => e.stopPropagation(),
+		children: sectionGroups.map(({ section, controls }, groupIdx) => /* @__PURE__ */ jsxs("div", { children: [groupIdx > 0 && /* @__PURE__ */ jsx("div", { className: "mx-2 my-1.5 border-t border-border" }), /* @__PURE__ */ jsxs("div", {
+			className: "px-2 pb-1 pt-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+				children: section.label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: controls.map((id) => COMPLEX_CONTROLS.has(id) ? /* @__PURE__ */ jsx(ComplexControlRow, {
+					controlId: id,
+					onNavigate: () => onNavigate(id)
+				}, id) : /* @__PURE__ */ jsx(SimpleControlRow, { controlId: id }, id))
+			})]
+		})] }, section.id))
+	})] });
+}
+/** Full-page detail view for a complex control, with back navigation. */
+function DetailPage({ controlId, onBack }) {
+	const entry = CONTROL_REGISTRY[controlId];
+	const { filters, clearAllFilters } = useChartContext();
+	const filterActiveCount = controlId === "filters" ? [...filters.values()].reduce((sum, set) => sum + set.size, 0) : 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 border-b border-border px-3 py-2.5",
+		children: [/* @__PURE__ */ jsx("button", {
+			onClick: onBack,
+			className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+			"aria-label": "Back",
+			children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5" })
+		}), controlId === "filters" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1 truncate text-xs font-semibold text-foreground",
+			children: "Filters"
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: () => clearAllFilters(),
+			disabled: filterActiveCount === 0,
+			className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors enabled:hover:bg-muted enabled:hover:text-foreground disabled:opacity-0",
+			"aria-label": "Clear all filters",
+			children: /* @__PURE__ */ jsx(Eraser, { className: "h-3.5 w-3.5" })
+		})] }) : /* @__PURE__ */ jsx("div", {
+			className: "text-xs font-semibold text-foreground",
+			children: entry.label
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-3",
+		onWheel: (e) => e.stopPropagation(),
+		children: [
+			controlId === "metric" && /* @__PURE__ */ jsx(ChartMetricPanel, {}),
+			controlId === "filters" && /* @__PURE__ */ jsx(ChartFiltersPanel, { showHeader: false }),
+			controlId === "dateRange" && /* @__PURE__ */ jsx(ChartDateRangePanel, {})
+		]
+	})] });
+}
+/**
+* A simple control row — label on the left, component on the right.
+* Used for selects and toggle buttons that work inline without popovers.
+*/
+function SimpleControlRow({ controlId }) {
+	const Component = CONTROL_REGISTRY[controlId].component;
+	const Icon = CONTROL_ICONS[controlId];
+	return /* @__PURE__ */ jsxs("div", {
+		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 })
+		})]
+	});
+}
+/**
+* A clickable row for complex controls — navigates to detail page on click.
+* Shows the control label, current value summary, and a chevron.
+*/
+function ComplexControlRow({ controlId, onNavigate }) {
+	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: "truncate text-xs text-foreground",
+				children: /* @__PURE__ */ jsx(ControlSummary, { controlId })
+			}),
+			/* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
+		]
+	});
+}
+/** Summary text for a complex control in the main menu. */
+function ControlSummary({ controlId }) {
+	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": {
+			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;
+	}
+}
+//#endregion
+export { ChartToolbarOverflow };

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

@@ -0,0 +1,33 @@
+import { ControlId } from "./toolbar-types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-toolbar.d.ts
+/**
+ * Props for ChartToolbar.
+ *
+ * @property className - Additional CSS classes for the toolbar container
+ * @property pinned - Control IDs to always show in the toolbar row (outside the overflow menu)
+ * @property hidden - Control IDs to completely hide (not in toolbar, not in overflow)
+ */
+type ChartToolbarProps = {
+  /** 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[];
+};
+/**
+ * Composable toolbar with pinned controls and an ellipsis overflow menu.
+ *
+ * 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,
+  pinned,
+  hidden
+}: ChartToolbarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartToolbar };

package/dist/ui/chart-toolbar.mjs

@@ -0,0 +1,60 @@
+import { CONTROL_IDS, CONTROL_REGISTRY } from "./toolbar-types.mjs";
+import { ChartToolbarOverflow } from "./chart-toolbar-overflow.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/chart-toolbar.tsx
+/**
+* Composable, configurable toolbar with pinned controls and an ellipsis
+* overflow menu
+*
+* Default behavior: the date range stays pinned so the active time window is
+* always visible, while the remaining controls live inside the overflow menu.
+* Developers can pin additional controls to the toolbar row and hide others.
+*
+* @example
+* ```tsx
+* // Date range pinned by default, everything else in overflow
+* <ChartToolbar />
+*
+* // Pin chart type and group-by to the toolbar row
+* <ChartToolbar pinned={['chartType', 'groupBy']} />
+*
+* // Hide time bucket and x-axis entirely
+* <ChartToolbar hidden={['timeBucket', 'xAxis']} />
+*
+* // Combine both
+* <ChartToolbar pinned={['chartType', 'metric']} hidden={['source']} />
+* ```
+*/
+const DEFAULT_PINNED_CONTROLS = ["dateRange"];
+/**
+* Composable toolbar with pinned controls and an ellipsis overflow menu.
+*
+* 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]);
+	const hiddenSet = useMemo(() => new Set(hidden), [hidden]);
+	const pinnedControls = CONTROL_IDS.filter((id) => pinnedSet.has(id) && !hiddenSet.has(id));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-start justify-between gap-2 ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
+			children: pinnedControls.map((id) => {
+				const Component = CONTROL_REGISTRY[id].component;
+				return /* @__PURE__ */ jsx(Component, {}, id);
+			})
+		}), /* @__PURE__ */ jsx(ChartToolbarOverflow, {
+			pinned: pinnedSet,
+			hidden: hiddenSet,
+			className: "shrink-0 self-start"
+		})]
+	});
+}
+//#endregion
+export { ChartToolbar };

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-type-selector.d.ts
+/**
+ * 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 with variant dropdown for chart type selection. */
+declare function ChartTypeSelector({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartTypeSelector };

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

@@ -0,0 +1,173 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/ui/chart-type-selector.tsx
+/**
+* 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%
+*/
+const CHART_TYPE_GROUPS = [
+	{
+		primary: "bar",
+		label: "Bar",
+		variants: [
+			{
+				type: "bar",
+				label: "Stacked"
+			},
+			{
+				type: "grouped-bar",
+				label: "Grouped"
+			},
+			{
+				type: "percent-bar",
+				label: "100%"
+			}
+		]
+	},
+	{
+		primary: "line",
+		label: "Line",
+		variants: []
+	},
+	{
+		primary: "area",
+		label: "Area",
+		variants: [{
+			type: "area",
+			label: "Stacked"
+		}, {
+			type: "percent-area",
+			label: "100%"
+		}]
+	},
+	{
+		primary: "pie",
+		label: "Pie",
+		variants: []
+	},
+	{
+		primary: "donut",
+		label: "Donut",
+		variants: []
+	},
+	{
+		primary: "table",
+		label: "Table",
+		variants: []
+	}
+];
+function buildVisibleGroups(availableChartTypes) {
+	const available = new Set(availableChartTypes);
+	const result = [];
+	for (const group of CHART_TYPE_GROUPS) if (group.variants.length === 0) {
+		if (available.has(group.primary)) result.push({
+			...group,
+			visibleVariants: []
+		});
+	} else {
+		const visibleVariants = group.variants.filter((v) => available.has(v.type));
+		if (visibleVariants.length > 0) result.push({
+			...group,
+			visibleVariants
+		});
+	}
+	return result;
+}
+function findGroupForType(chartType) {
+	return CHART_TYPE_GROUPS.find((g) => g.primary === chartType || g.variants.some((v) => v.type === chartType));
+}
+/** Inline toggle buttons with variant dropdown for chart type selection. */
+function ChartTypeSelector({ className }) {
+	const { chartType, setChartType, availableChartTypes } = useChartContext();
+	const [openGroup, setOpenGroup] = useState(null);
+	const visibleGroups = useMemo(() => buildVisibleGroups(availableChartTypes), [availableChartTypes]);
+	const activeGroup = useMemo(() => {
+		const staticGroup = findGroupForType(chartType);
+		if (!staticGroup) return void 0;
+		return visibleGroups.find((g) => g.primary === staticGroup.primary);
+	}, [chartType, visibleGroups]);
+	if (visibleGroups.length <= 1 && (activeGroup?.visibleVariants.length ?? 0) <= 1) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `inline-flex items-center rounded-lg border border-border/50 bg-background p-0.5 shadow-sm ${className ?? ""}`,
+		role: "tablist",
+		"aria-label": "Chart type",
+		children: visibleGroups.map((group) => {
+			const isActive = activeGroup?.primary === group.primary;
+			return /* @__PURE__ */ jsx(ChartTypeButton, {
+				group,
+				isActive,
+				hasVariants: group.visibleVariants.length > 1,
+				isDropdownOpen: openGroup === group.primary,
+				chartType,
+				onSelect: () => {
+					if (isActive) return;
+					if (availableChartTypes.includes(group.primary)) setChartType(group.primary);
+					else if (group.visibleVariants.length > 0) setChartType(group.visibleVariants[0].type);
+				},
+				onToggleDropdown: () => setOpenGroup(openGroup === group.primary ? null : group.primary),
+				onSelectVariant: (type) => {
+					setChartType(type);
+					setOpenGroup(null);
+				},
+				onCloseDropdown: () => setOpenGroup(null)
+			}, group.primary);
+		})
+	});
+}
+function ChartTypeButton({ group, isActive, hasVariants, isDropdownOpen, chartType, onSelect, onToggleDropdown, onSelectVariant, onCloseDropdown }) {
+	const triggerRef = useRef(null);
+	if (!hasVariants) return /* @__PURE__ */ jsx("button", {
+		role: "tab",
+		"aria-selected": isActive,
+		onClick: onSelect,
+		className: `rounded-md px-2.5 py-1 text-xs font-medium transition-all ${isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted/40 hover:text-foreground"}`,
+		children: group.label
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: triggerRef,
+		className: `relative flex items-center rounded-md transition-all ${isActive ? "bg-primary/10" : "hover:bg-muted/40"}`,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				role: "tab",
+				"aria-selected": isActive,
+				onClick: () => {
+					if (isActive) onToggleDropdown();
+					else onSelect();
+				},
+				className: `py-1 pl-2.5 pr-1 text-xs font-medium transition-colors ${isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"}`,
+				children: group.label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": `${group.label} options`,
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!isActive) onSelect();
+					onToggleDropdown();
+				},
+				className: `py-1 pr-2 pl-0.5 transition-colors ${isActive ? "text-primary/60 hover:text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`,
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: `h-2.5 w-2.5 transition-transform ${isDropdownOpen ? "rotate-180" : ""}` })
+			}),
+			/* @__PURE__ */ jsx(ChartDropdownPanel, {
+				isOpen: isDropdownOpen,
+				onClose: onCloseDropdown,
+				triggerRef,
+				minWidth: "trigger",
+				className: "p-1",
+				children: group.visibleVariants.map((variant) => /* @__PURE__ */ jsx("button", {
+					onClick: () => onSelectVariant(variant.type),
+					className: `flex w-full items-center rounded-md px-2.5 py-1.5 text-xs transition-colors ${variant.type === chartType ? "bg-primary/8 font-medium text-primary" : "text-foreground hover:bg-muted/60"}`,
+					children: variant.label
+				}, variant.type))
+			})
+		]
+	});
+}
+//#endregion
+export { ChartTypeSelector };

package/dist/ui/chart-x-axis-selector.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-x-axis-selector.d.ts
+/**
+ * X-axis selector — premium custom dropdown for choosing which column drives the X-axis.
+ */
+/** Custom dropdown to select the X-axis column. */
+declare function ChartXAxisSelector({
+  className,
+  hideIcon
+}: {
+  className?: string;
+  hideIcon?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartXAxisSelector };

package/dist/ui/chart-x-axis-selector.mjs

@@ -0,0 +1,28 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartSelect } from "./chart-select.mjs";
+import { jsx } from "react/jsx-runtime";
+import { MoveHorizontal } from "lucide-react";
+//#region src/ui/chart-x-axis-selector.tsx
+/**
+* X-axis selector — premium custom dropdown for choosing which column drives the X-axis.
+*/
+/** Custom dropdown to select the X-axis column. */
+function ChartXAxisSelector({ className, hideIcon }) {
+	const { xAxisId, setXAxis, availableXAxes } = useChartContext();
+	if (availableXAxes.length <= 1) return null;
+	const options = availableXAxes.map((col) => ({
+		value: col.id,
+		label: `X-axis: ${col.label}`
+	}));
+	return /* @__PURE__ */ jsx(ChartSelect, {
+		value: xAxisId ?? "",
+		options,
+		onChange: (v) => setXAxis(v),
+		ariaLabel: "X-axis",
+		icon: MoveHorizontal,
+		hideIcon,
+		className
+	});
+}
+//#endregion
+export { ChartXAxisSelector };

package/dist/ui/index.d.mts

@@ -0,0 +1,18 @@
+import { Chart, useChartContext, useTypedChartContext } from "./chart-context.mjs";
+import { ChartCanvas } from "./chart-canvas.mjs";
+import { ControlId } from "./toolbar-types.mjs";
+import { ChartToolbar } from "./chart-toolbar.mjs";
+import { ChartToolbarOverflow } from "./chart-toolbar-overflow.mjs";
+import { ChartSourceSwitcher } from "./chart-source-switcher.mjs";
+import { ChartTypeSelector } from "./chart-type-selector.mjs";
+import { ChartGroupBySelector } from "./chart-group-by-selector.mjs";
+import { ChartTimeBucketSelector } from "./chart-time-bucket-selector.mjs";
+import { ChartMetricSelector } from "./chart-metric-selector.mjs";
+import { ChartMetricPanel } from "./chart-metric-panel.mjs";
+import { ChartXAxisSelector } from "./chart-x-axis-selector.mjs";
+import { ChartDateRange } from "./chart-date-range.mjs";
+import { ChartDateRangeBadge } from "./chart-date-range-badge.mjs";
+import { ChartDateRangePanel } from "./chart-date-range-panel.mjs";
+import { ChartFilters } from "./chart-filters.mjs";
+import { ChartFiltersPanel } from "./chart-filters-panel.mjs";
+import { ChartDebug } from "./chart-debug.mjs";

package/dist/ui/percent-stacked.mjs

@@ -0,0 +1,36 @@
+//#region src/ui/percent-stacked.ts
+/**
+* Recharts stacked graphical entries expose [lower, upper] bounds after
+* stackOffset="expand". The visible segment size is upper - lower.
+*/
+function getPercentStackedProportion(entry) {
+	const value = entry.value;
+	if (Array.isArray(value) && typeof value[0] === "number" && typeof value[1] === "number") return value[1] - value[0];
+	return null;
+}
+/**
+* Recharts tooltip payload entries are rebuilt from the raw transformed row,
+* so value stays as the raw metric and payload contains the full bucket.
+*/
+function getPercentStackedProportionFromPayload(payload, dataKey, seriesKeys) {
+	if (!payload || typeof payload !== "object") return null;
+	const point = payload;
+	const rawValue = point[dataKey];
+	if (typeof rawValue !== "number") return null;
+	let total = 0;
+	for (const seriesKey of seriesKeys) {
+		const seriesValue = point[seriesKey];
+		if (typeof seriesValue === "number") total += seriesValue;
+	}
+	if (total <= 0) return null;
+	return rawValue / total;
+}
+/**
+* Prefer the raw-row calculation because it works for both tooltip payloads
+* and label entries, then fall back to stacked bounds when present.
+*/
+function getPercentStackedDisplayValue(entry, dataKey, seriesKeys) {
+	return getPercentStackedProportionFromPayload(entry.payload, dataKey, seriesKeys) ?? getPercentStackedProportion(entry);
+}
+//#endregion
+export { getPercentStackedDisplayValue };

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

@@ -0,0 +1,7 @@
+//#region src/ui/toolbar-types.d.ts
+/** All valid toolbar control identifiers. */
+declare const CONTROL_IDS: readonly ["source", "xAxis", "chartType", "groupBy", "timeBucket", "metric", "filters", "dateRange"];
+/** Union type of all valid toolbar control identifiers. */
+type ControlId = (typeof CONTROL_IDS)[number];
+//#endregion
+export { ControlId };