@matthieumordrel/chart-studio-ui 0.5.2

package/dist/ui/chart-debug.mjs

@@ -0,0 +1,172 @@
+import { useChartContext } from "./chart-context.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { applyFilters, computeDateRange, filterByDateRange } from "@matthieumordrel/chart-studio/_internal";
+//#region src/ui/chart-debug.tsx
+/**
+* Debug panel — shows raw data, transformed data, series, and current state.
+* Drop `<ChartDebug />` inside a `<Chart>` to inspect what's happening.
+*/
+const TABS = [
+	{
+		id: "raw",
+		label: "Raw"
+	},
+	{
+		id: "transformed",
+		label: "Transformed"
+	},
+	{
+		id: "series",
+		label: "Series"
+	},
+	{
+		id: "state",
+		label: "State"
+	}
+];
+/**
+* Format a date as a full calendar label to avoid ambiguous numeric dates.
+*/
+function formatFullDay(date) {
+	return new Intl.DateTimeFormat("en-US", {
+		month: "long",
+		day: "numeric",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(date);
+}
+/**
+* Get the exact earliest and latest visible dates for the active date X-axis.
+*/
+function getVisibleDateRange(chart) {
+	if (!chart.isTimeSeries || !chart.xAxisId) return null;
+	const xAxisColumn = chart.columns.find((column) => column.id === chart.xAxisId);
+	if (!xAxisColumn || xAxisColumn.type !== "date") return null;
+	let visibleData = chart.rawData;
+	if (chart.dateRangeFilter && chart.referenceDateId) {
+		const referenceDateColumn = chart.columns.find((column) => column.id === chart.referenceDateId);
+		if (referenceDateColumn?.type === "date") visibleData = filterByDateRange(visibleData, referenceDateColumn, chart.dateRangeFilter);
+	}
+	visibleData = applyFilters(visibleData, chart.columns, chart.filters);
+	const { min, max } = computeDateRange(visibleData, xAxisColumn);
+	if (!min || !max) return null;
+	return {
+		columnId: xAxisColumn.id,
+		columnLabel: xAxisColumn.label,
+		earliest: { label: formatFullDay(min) },
+		latest: { label: formatFullDay(max) },
+		rule: "Uses exact dates from visible rows on the active X-axis date column."
+	};
+}
+/**
+* Build a compact UI label for the visible time range.
+*/
+function getVisibleDateRangeLabel(range) {
+	if (!range) return null;
+	const columnLabel = `${range.columnLabel} (${range.columnId})`;
+	if (range.earliest.label === range.latest.label) return `Visible exact date: ${range.earliest.label} via ${columnLabel}`;
+	return `Visible exact date range: ${range.earliest.label} -> ${range.latest.label} via ${columnLabel}`;
+}
+/**
+* Resolve the currently selected debug payload.
+*/
+function getDebugContent(chart, activeTab) {
+	switch (activeTab) {
+		case "raw": return chart.rawData;
+		case "transformed": return chart.transformedData;
+		case "series": return chart.series;
+		case "state": return {
+			activeSourceId: chart.activeSourceId,
+			chartType: chart.chartType,
+			xAxisId: chart.xAxisId,
+			groupById: chart.groupById,
+			metric: chart.metric,
+			timeBucket: chart.timeBucket,
+			availableTimeBuckets: chart.availableTimeBuckets,
+			isTimeSeries: chart.isTimeSeries,
+			filters: Object.fromEntries([...chart.filters.entries()].map(([k, v]) => [k, [...v]])),
+			sorting: chart.sorting,
+			availableChartTypes: chart.availableChartTypes,
+			availableGroupBys: chart.availableGroupBys,
+			availableMetrics: chart.availableMetrics,
+			columns: chart.columns,
+			availableFilters: chart.availableFilters.map((filter) => ({
+				...filter,
+				options: filter.options.length > 5 ? [...filter.options.slice(0, 5), {
+					value: "...",
+					label: `+${filter.options.length - 5} more`,
+					count: 0
+				}] : filter.options
+			})),
+			visibleDateRange: getVisibleDateRange(chart)
+		};
+	}
+}
+/** Tab bar button. */
+function TabButton({ tab, isActive, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		onClick,
+		className: `border-b-2 px-3 py-1.5 text-[11px] font-mono transition-colors ${isActive ? "border-primary bg-primary/10 text-primary" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+		children: tab.label
+	});
+}
+/** 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);
+	const [activeTab, setActiveTab] = useState("raw");
+	const content = getDebugContent(chart, activeTab);
+	const visibleDateRangeLabel = getVisibleDateRangeLabel(getVisibleDateRange(chart));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `overflow-hidden rounded-lg border border-dashed border-border bg-background ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("button", {
+			onClick: () => setIsOpen(!isOpen),
+			className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-mono text-foreground transition-colors hover:bg-muted/50",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: isOpen ? "▼" : "▶" }),
+					/* @__PURE__ */ jsx("span", { children: "chart-studio debug" }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground",
+						children: [
+							"(",
+							chart.rawData.length,
+							" raw, ",
+							chart.transformedData.length,
+							" points, ",
+							chart.series.length,
+							" ",
+							"series)"
+						]
+					}),
+					visibleDateRangeLabel ? /* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] text-muted-foreground",
+						children: ["• ", visibleDateRangeLabel]
+					}) : null
+				]
+			})
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			className: "border-t border-dashed border-border",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex gap-0 border-b border-border bg-muted/20",
+				children: TABS.map((tab) => /* @__PURE__ */ jsx(TabButton, {
+					tab,
+					isActive: activeTab === tab.id,
+					onClick: () => setActiveTab(tab.id)
+				}, tab.id))
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "max-h-64 overflow-auto bg-muted/20 p-3 font-mono text-[11px] leading-relaxed text-foreground",
+				onWheel: (e) => e.stopPropagation(),
+				children: JSON.stringify(content, null, 2)
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartDebug };

package/dist/ui/chart-dropdown.mjs

@@ -0,0 +1,92 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/ui/chart-dropdown.tsx
+/**
+* Shared dropdown panel primitive for chart-studio popover controls.
+* Provides a positioned floating panel with backdrop, premium layered
+* shadows, and close-on-click-outside.
+*/
+/**
+* Positioned dropdown panel with premium styling.
+* Renders a transparent backdrop overlay and a fixed-position content panel
+* anchored to a trigger element.
+*
+* @property isOpen - Whether the panel is visible
+* @property onClose - Callback to close the panel
+* @property triggerRef - Ref to the button or element that anchors the panel
+* @property align - Horizontal alignment relative to trigger ('left' | 'right')
+* @property width - Fixed panel width in pixels
+* @property minWidth - Minimum panel width in pixels or equal to trigger width
+* @property offset - Gap between trigger and panel
+* @property repositionKey - Value that forces re-measurement when panel content changes
+* @property className - Additional CSS classes for the content area
+* @property children - Panel content
+*/
+function ChartDropdownPanel({ isOpen, onClose, triggerRef, align = "left", width, minWidth, offset = 6, repositionKey, className, children }) {
+	const panelRef = useRef(null);
+	const [position, setPosition] = useState(null);
+	useLayoutEffect(() => {
+		if (!isOpen) {
+			setPosition(null);
+			return;
+		}
+		/**
+		* Measure the trigger and panel, then place the panel in the best
+		* available viewport position.
+		*/
+		function updatePosition() {
+			const trigger = triggerRef.current;
+			const panel = panelRef.current;
+			if (!trigger || !panel) return;
+			const triggerRect = trigger.getBoundingClientRect();
+			const measuredPanelWidth = width ?? panel.offsetWidth;
+			const resolvedMinWidth = minWidth === "trigger" ? triggerRect.width : minWidth;
+			const panelWidth = Math.max(measuredPanelWidth, resolvedMinWidth ?? 0);
+			const panelHeight = panel.offsetHeight;
+			let left = align === "right" ? triggerRect.right - panelWidth : triggerRect.left;
+			left = Math.min(Math.max(left, 8), window.innerWidth - panelWidth - 8);
+			let top = window.innerHeight - triggerRect.bottom < panelHeight + offset && triggerRect.top >= panelHeight + offset ? triggerRect.top - panelHeight - offset : triggerRect.bottom + offset;
+			top = Math.max(8, Math.min(top, window.innerHeight - panelHeight - 8));
+			setPosition({
+				top,
+				left
+			});
+		}
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [
+		align,
+		isOpen,
+		minWidth,
+		offset,
+		repositionKey,
+		triggerRef,
+		width
+	]);
+	if (!isOpen) return null;
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-40",
+		onClick: onClose
+	}), /* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		className: `fixed z-50 overflow-hidden rounded-xl border border-border/50 bg-popover text-popover-foreground shadow-[0_8px_30px_-6px_rgba(0,0,0,0.12),0_2px_8px_-2px_rgba(0,0,0,0.05)] ${className ?? ""}`,
+		style: {
+			top: position?.top ?? 0,
+			left: position?.left ?? 0,
+			width,
+			minWidth: minWidth === "trigger" ? triggerRef.current?.getBoundingClientRect().width : minWidth,
+			visibility: position ? "visible" : "hidden"
+		},
+		onWheel: (e) => e.stopPropagation(),
+		children
+	})] }), document.body);
+}
+//#endregion
+export { ChartDropdownPanel };

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

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-filters-panel.d.ts
+/**
+ * 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.
+ */
+/**
+ * Filters panel content (no popover wrapper).
+ *
+ * @property className - Additional CSS classes
+ * @property showHeader - When true (default), shows "Filters" title + clear button.
+ *   Set false when the header is rendered by the parent (e.g. overflow DetailPage).
+ */
+declare function ChartFiltersPanel({
+  className,
+  showHeader
+}: {
+  className?: string;
+  showHeader?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartFiltersPanel };

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

@@ -0,0 +1,258 @@
+import { useChartContext } from "./chart-context.mjs";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Eraser, Search, X } 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 "Filters" title + clear button.
+*   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 [searchQuery, setSearchQuery] = useState("");
+	const searchInputRef = useRef(null);
+	const activeCount = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
+	const activeBadges = availableFilters.flatMap((af) => {
+		const active = filters.get(af.columnId);
+		if (!active?.size) return [];
+		return [...active].map((value) => {
+			const option = af.options.find((o) => o.value === value);
+			return {
+				columnId: af.columnId,
+				value,
+				label: `${af.label}: ${option?.label ?? value}`
+			};
+		});
+	});
+	const normalizedQuery = searchQuery.trim().toLowerCase();
+	const isSearching = normalizedQuery.length > 0;
+	const filteredSections = availableFilters.map((filter) => {
+		if (!isSearching) return {
+			filter,
+			matchedOptions: filter.options
+		};
+		return {
+			filter,
+			matchedOptions: filter.options.filter((option) => option.label.toLowerCase().includes(normalizedQuery))
+		};
+	});
+	const visibleSections = isSearching ? filteredSections.filter((s) => s.matchedOptions.length > 0) : filteredSections;
+	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__ */ jsx("div", {
+					className: "truncate text-xs font-semibold text-foreground",
+					children: "Filters"
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: () => clearAllFilters(),
+					disabled: activeCount === 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__ */ jsxs("div", {
+				className: "relative mb-2",
+				children: [
+					/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" }),
+					/* @__PURE__ */ jsx("input", {
+						ref: searchInputRef,
+						type: "text",
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						placeholder: "Search filters…",
+						className: "h-8 w-full rounded-lg border border-border/50 bg-muted/30 pl-8 pr-8 text-xs text-foreground placeholder:text-muted-foreground/50 focus:border-primary/30 focus:bg-background focus:outline-none focus:ring-2 focus:ring-ring/20",
+						"aria-label": "Search filters"
+					}),
+					isSearching && /* @__PURE__ */ jsx("button", {
+						onClick: () => {
+							setSearchQuery("");
+							searchInputRef.current?.focus();
+						},
+						className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground/60 transition-colors hover:text-foreground",
+						"aria-label": "Clear search",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+					})
+				]
+			}),
+			isSearching && visibleSections.length === 0 && /* @__PURE__ */ jsxs("div", {
+				className: "py-4 text-center text-xs text-muted-foreground",
+				children: [
+					"No filters matching “",
+					searchQuery.trim(),
+					"”"
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: visibleSections.map(({ filter, matchedOptions }) => /* @__PURE__ */ jsx(FilterSection, {
+					filter,
+					matchedOptions,
+					isSearching,
+					activeValues: filters.get(filter.columnId),
+					onToggle: (value) => toggleFilter(filter.columnId, value)
+				}, filter.columnId))
+			}),
+			activeCount > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-2 border-t border-border/40 pt-2",
+				children: /* @__PURE__ */ jsx(BadgeRow, {
+					badges: activeBadges,
+					onRemove: toggleFilter
+				})
+			})
+		]
+	});
+}
+/**
+* Renders filter badges that fit within 2 rows, with a "+N" overflow pill
+* for badges that don't fit. Measures after layout to determine the cutoff.
+*/
+function BadgeRow({ badges, onRemove }) {
+	const containerRef = useRef(null);
+	const [visibleCount, setVisibleCount] = useState(null);
+	useLayoutEffect(() => {
+		setVisibleCount(null);
+	}, [badges.length]);
+	useLayoutEffect(() => {
+		if (visibleCount !== null) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const children = Array.from(container.children);
+		const first = children[0];
+		if (!first) return;
+		const gap = 4;
+		const maxBottom = first.offsetTop + first.offsetHeight * 2 + gap;
+		const badgeCount = badges.length;
+		let fits = badgeCount;
+		for (let i = 0; i < badgeCount; i++) {
+			const el = children[i];
+			if (el.offsetTop + el.offsetHeight > maxBottom) {
+				fits = i;
+				break;
+			}
+		}
+		if (fits >= badgeCount) {
+			setVisibleCount(badgeCount);
+			return;
+		}
+		const pillSpace = 34 + gap;
+		let adjusted = fits;
+		for (let i = fits - 1; i >= 0; i--) {
+			const el = children[i];
+			if (el.offsetLeft + el.offsetWidth + pillSpace <= container.clientWidth) {
+				adjusted = i + 1;
+				break;
+			}
+			adjusted = i;
+		}
+		setVisibleCount(Math.max(1, adjusted));
+	});
+	const resolved = visibleCount ?? badges.length;
+	const overflowCount = badges.length - resolved;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "flex min-w-0 flex-1 flex-wrap content-start items-start gap-1",
+		children: [badges.slice(0, resolved).map(({ columnId, value, label }) => /* @__PURE__ */ jsxs("button", {
+			onClick: () => onRemove(columnId, value),
+			className: "inline-flex items-center gap-1 rounded-md border border-primary/20 bg-primary/5 px-1.5 py-0.5 text-[10px] font-medium text-primary transition-colors hover:bg-primary/10",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "max-w-[10rem] truncate",
+				children: label
+			}), /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5 shrink-0 opacity-60" })]
+		}, `${columnId}-${value}`)), overflowCount > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "rounded-md bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground",
+			children: ["+", overflowCount]
+		})]
+	});
+}
+/** A collapsible filter column section with checkable options. */
+function FilterSection({ filter, matchedOptions, isSearching, activeValues, onToggle }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [expanded, setExpanded] = useState(false);
+	const visibleOptions = isSearching || expanded ? matchedOptions : matchedOptions.slice(0, MAX_VISIBLE_OPTIONS);
+	const hasMore = !isSearching && matchedOptions.length > MAX_VISIBLE_OPTIONS;
+	const activeCount = activeValues?.size ?? 0;
+	const effectiveIsOpen = isSearching || isOpen;
+	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 ${effectiveIsOpen ? "" : "-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
+				})
+			]
+		}), effectiveIsOpen && /* @__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 ${matchedOptions.length - MAX_VISIBLE_OPTIONS} more…`
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartFiltersPanel };

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

@@ -0,0 +1,18 @@
+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.
+ */
+/**
+ * Compact filter button + dropdown for all filterable columns.
+ * Shows a count badge when filters are active.
+ */
+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,16 @@
+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,
+  hideIcon
+}: {
+  className?: string;
+  hideIcon?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartGroupBySelector };

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

@@ -0,0 +1,32 @@
+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 { 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, hideIcon }) {
+	const { chartType, groupById, setGroupBy, availableGroupBys, isGroupByOptional } = useChartContext();
+	const options = [...isGroupByOptional ? [{
+		value: "",
+		label: "No grouping"
+	}] : [], ...availableGroupBys.map((col) => ({
+		value: col.id,
+		label: col.label
+	}))];
+	if (!CHART_TYPE_CONFIG[chartType].supportsGrouping || options.length <= 1) return null;
+	return /* @__PURE__ */ jsx(ChartSelect, {
+		value: groupById ?? "",
+		options,
+		onChange: (v) => setGroupBy(v || null),
+		ariaLabel: "Group by",
+		icon: Layers,
+		hideIcon,
+		className
+	});
+}
+//#endregion
+export { ChartGroupBySelector };