@matthieumordrel/chart-studio-ui 0.5.2

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

@@ -0,0 +1,101 @@
+import { ReactElement, ReactNode } from "react";
+import { ChartColumn, ChartInstance, ChartInstanceFromSchemaDefinition, ChartSchemaDefinition, Metric } from "@matthieumordrel/chart-studio";
+
+//#region src/ui/chart-context.d.ts
+/**
+ * Type-erased chart instance stored in React context.
+ * This keeps the default UI primitives honest and safe for both single-source
+ * and multi-source charts.
+ */
+type ChartContextChart = Omit<ChartInstance<unknown, string>, 'columns' | 'filters'> & {
+  columns: readonly ChartColumn<any, string>[];
+  filters: Map<string, Set<string>>;
+};
+type AnyChartInstance = {
+  activeSourceId: string;
+  setActiveSource: (...args: any[]) => unknown;
+  hasMultipleSources: boolean;
+  sources: Array<{
+    id: string;
+    label: string;
+  }>;
+  chartType: ChartContextChart['chartType'];
+  setChartType: (...args: any[]) => unknown;
+  availableChartTypes: ChartContextChart['availableChartTypes'];
+  xAxisId: string | null;
+  setXAxis: (...args: any[]) => unknown;
+  availableXAxes: ChartContextChart['availableXAxes'];
+  groupById: string | null;
+  setGroupBy: (...args: any[]) => unknown;
+  availableGroupBys: ChartContextChart['availableGroupBys'];
+  isGroupByOptional: boolean;
+  metric: Metric<any>;
+  setMetric: (...args: any[]) => unknown;
+  availableMetrics: ChartContextChart['availableMetrics'];
+  timeBucket: ChartContextChart['timeBucket'];
+  setTimeBucket: (...args: any[]) => unknown;
+  availableTimeBuckets: ChartContextChart['availableTimeBuckets'];
+  isTimeSeries: boolean;
+  connectNulls: boolean;
+  dataScopeControl: ChartContextChart['dataScopeControl'];
+  filters: Map<any, Set<string>>;
+  toggleFilter: (...args: any[]) => unknown;
+  clearFilter: (...args: any[]) => unknown;
+  clearAllFilters: () => void;
+  availableFilters: ChartContextChart['availableFilters'];
+  sorting: ChartContextChart['sorting'];
+  setSorting: (...args: any[]) => unknown;
+  dateRange: ChartContextChart['dateRange'];
+  referenceDateId: string | null;
+  setReferenceDateId: (...args: any[]) => unknown;
+  availableDateColumns: ChartContextChart['availableDateColumns'];
+  dateRangePreset: ChartContextChart['dateRangePreset'];
+  setDateRangePreset: (...args: any[]) => unknown;
+  dateRangeFilter: ChartContextChart['dateRangeFilter'];
+  setDateRangeFilter: (...args: any[]) => unknown;
+  transformedData: ChartContextChart['transformedData'];
+  series: ChartContextChart['series'];
+  columns: readonly ChartColumn<any, string>[];
+  rawData: readonly unknown[];
+  recordCount: number;
+};
+/**
+ * Hook to access the chart instance from context.
+ * Must be used within a `<Chart>` provider.
+ *
+ * This hook stays intentionally broad so the default UI primitives remain safe
+ * for both single-source and multi-source charts.
+ */
+declare function useChartContext(): ChartContextChart;
+/**
+ * Typed single-source chart context escape hatch for inferred charts.
+ * React cannot infer provider generics through arbitrary subtrees, so callers
+ * provide the row type (and optional schema type) explicitly.
+ */
+declare function useTypedChartContext<T, const TSchema extends ChartSchemaDefinition<T, any> | undefined = undefined>(): ChartInstanceFromSchemaDefinition<T, TSchema>;
+/**
+ * Root provider component. Wraps children with the chart instance context.
+ *
+ * @param chart - The chart instance to share
+ * @param children - The children to render
+ * @param className - Additional CSS classes for the chart container
+ *
+ * @example
+ * ```tsx
+ * <Chart chart={chart}>
+ *   <ChartToolbar />
+ *   <ChartCanvas />
+ * </Chart>
+ * ```
+ */
+declare function Chart({
+  chart,
+  children,
+  className
+}: {
+  /** The chart instance to share. Create it with `useChart()` first.*/chart: AnyChartInstance; /** The children to render. Can be any UI primitives from the UI package. */
+  children: ReactNode; /** Additional CSS classes for the chart container. */
+  className?: string;
+}): ReactElement;
+//#endregion
+export { Chart, useChartContext, useTypedChartContext };

package/dist/ui/chart-context.mjs

@@ -0,0 +1,117 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/chart-context.tsx
+/**
+* React context for sharing the chart instance across composable UI components.
+*/
+const ChartContext = createContext(null);
+/**
+* Check whether a candidate column ID exists in the current chart.
+*/
+function isKnownColumnId(columnIds, columnId) {
+	return columnIds.has(columnId);
+}
+/**
+* Create the broad-but-safe chart shape shared through React context.
+*/
+function createChartContextChart(chart) {
+	const columnIds = new Set(chart.columns.map((column) => column.id));
+	return {
+		activeSourceId: chart.activeSourceId,
+		setActiveSource: chart.setActiveSource,
+		hasMultipleSources: chart.hasMultipleSources,
+		sources: chart.sources,
+		chartType: chart.chartType,
+		setChartType: chart.setChartType,
+		availableChartTypes: chart.availableChartTypes,
+		xAxisId: chart.xAxisId,
+		setXAxis: (columnId) => {
+			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
+			chart.setXAxis(columnId);
+		},
+		availableXAxes: chart.availableXAxes,
+		groupById: chart.groupById,
+		setGroupBy: (columnId) => {
+			if (columnId === null) {
+				chart.setGroupBy(null);
+				return;
+			}
+			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
+			chart.setGroupBy(columnId);
+		},
+		availableGroupBys: chart.availableGroupBys,
+		isGroupByOptional: chart.isGroupByOptional,
+		metric: chart.metric,
+		setMetric: (metric) => {
+			if (metric.kind === "aggregate" && !isKnownColumnId(columnIds, metric.columnId)) throw new Error(`Unknown metric column ID: "${metric.columnId}"`);
+			chart.setMetric(metric);
+		},
+		availableMetrics: chart.availableMetrics,
+		timeBucket: chart.timeBucket,
+		setTimeBucket: chart.setTimeBucket,
+		availableTimeBuckets: chart.availableTimeBuckets,
+		isTimeSeries: chart.isTimeSeries,
+		connectNulls: chart.connectNulls,
+		dataScopeControl: chart.dataScopeControl,
+		filters: new Map(chart.filters),
+		toggleFilter: (columnId, value) => {
+			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
+			chart.toggleFilter(columnId, value);
+		},
+		clearFilter: (columnId) => {
+			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
+			chart.clearFilter(columnId);
+		},
+		clearAllFilters: chart.clearAllFilters,
+		availableFilters: chart.availableFilters,
+		sorting: chart.sorting,
+		setSorting: chart.setSorting,
+		dateRange: chart.dateRange,
+		referenceDateId: chart.referenceDateId,
+		setReferenceDateId: (columnId) => {
+			if (!isKnownColumnId(columnIds, columnId)) throw new Error(`Unknown chart column ID: "${columnId}"`);
+			chart.setReferenceDateId(columnId);
+		},
+		availableDateColumns: chart.availableDateColumns,
+		dateRangePreset: chart.dateRangePreset,
+		setDateRangePreset: chart.setDateRangePreset,
+		dateRangeFilter: chart.dateRangeFilter,
+		setDateRangeFilter: chart.setDateRangeFilter,
+		transformedData: chart.transformedData,
+		series: chart.series,
+		columns: chart.columns,
+		rawData: chart.rawData,
+		recordCount: chart.recordCount
+	};
+}
+function useChartContext() {
+	const ctx = useContext(ChartContext);
+	if (!ctx) throw new Error("useChartContext must be used within a <Chart> provider");
+	return ctx.chart;
+}
+/**
+* Typed single-source chart context escape hatch for inferred charts.
+* React cannot infer provider generics through arbitrary subtrees, so callers
+* provide the row type (and optional schema type) explicitly.
+*/
+function useTypedChartContext() {
+	const ctx = useContext(ChartContext);
+	if (!ctx) throw new Error("useTypedChartContext must be used within a <Chart> provider");
+	if (ctx.chart.hasMultipleSources) throw new Error("useTypedChartContext only supports single-source charts right now. Multi-source charts stay broad because the active source schema can change.");
+	return ctx.typedChart;
+}
+function Chart({ chart, children, className }) {
+	const contextValue = useMemo(() => ({
+		chart: createChartContextChart(chart),
+		typedChart: chart
+	}), [chart]);
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			children
+		})
+	});
+}
+//#endregion
+export { Chart, useChartContext, useTypedChartContext };

package/dist/ui/chart-date-range-badge.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-date-range-badge.d.ts
+/**
+ * Read-only badge that always displays the current date range in the toolbar.
+ *
+ * Shows the preset label (e.g. "All time") and the computed min–max range.
+ * Non-interactive — purely informational so users always know the date window.
+ */
+/**
+ * Read-only badge showing the active date range preset and computed bounds.
+ * Renders nothing if no date columns are available.
+ */
+declare function ChartDateRangeBadge({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartDateRangeBadge };

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

@@ -0,0 +1,49 @@
+import { useChartContext } from "./chart-context.mjs";
+import { resolvePresetLabel } from "./chart-date-range-panel.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Calendar } from "lucide-react";
+//#region src/ui/chart-date-range-badge.tsx
+/**
+* Read-only badge that always displays the current date range in the toolbar.
+*
+* Shows the preset label (e.g. "All time") and the computed min–max range.
+* Non-interactive — purely informational so users always know the date window.
+*/
+/** Format a Date into a compact, readable string (e.g. "Jan 5, 25"). */
+function formatDate(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "2-digit"
+	});
+}
+/**
+* Read-only badge showing the active date range preset and computed bounds.
+* Renders nothing if no date columns are available.
+*/
+function ChartDateRangeBadge({ className }) {
+	const { dateRange, dateRangePreset, availableDateColumns } = useChartContext();
+	if (availableDateColumns.length === 0) return null;
+	const activeLabel = resolvePresetLabel(dateRangePreset);
+	const hasRange = dateRange?.min && dateRange?.max;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `inline-flex h-7 items-center gap-1.5 rounded-lg border border-border/50 bg-muted/30 px-2.5 text-xs text-muted-foreground ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3 shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: activeLabel
+			}),
+			hasRange && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground/40",
+				children: "·"
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				formatDate(dateRange.min),
+				" – ",
+				formatDate(dateRange.max)
+			] })] })
+		]
+	});
+}
+//#endregion
+export { ChartDateRangeBadge };

package/dist/ui/chart-date-range-panel.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-date-range-panel.d.ts
+/**
+ * Date range panel content (no popover wrapper).
+ *
+ * @property onClose - Optional callback when user selects a preset
+ * @property className - Additional CSS classes
+ */
+declare function ChartDateRangePanel({
+  onClose,
+  className
+}: {
+  onClose?: () => void;
+  className?: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ChartDateRangePanel };

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

@@ -0,0 +1,126 @@
+import { useChartContext } from "./chart-context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DATE_RANGE_PRESETS, getPresetLabel } from "@matthieumordrel/chart-studio/_internal";
+//#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 (Auto, All time, Last 7 days, etc.), a reference date
+* column picker, and custom date inputs.
+*/
+/** Format a Date as YYYY-MM-DD for native date input value. */
+function toInputValue(date) {
+	if (!date) return "";
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+/** Parse a YYYY-MM-DD string into a Date, or null if empty/invalid. */
+function fromInputValue(value) {
+	if (!value) return null;
+	const d = /* @__PURE__ */ new Date(value + "T00:00:00");
+	return Number.isNaN(d.getTime()) ? null : d;
+}
+/**
+* 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(dateRangePreset) {
+	if (dateRangePreset === null) return "Custom";
+	return getPresetLabel(dateRangePreset);
+}
+/**
+* Date range panel content (no popover wrapper).
+*
+* @property onClose - Optional callback when user selects a preset
+* @property className - Additional CSS classes
+*/
+function ChartDateRangePanel({ onClose, className }) {
+	const { dateRangePreset, setDateRangePreset, dateRangeFilter, setDateRangeFilter, referenceDateId, setReferenceDateId, availableDateColumns } = useChartContext();
+	const hasMultipleDateColumns = availableDateColumns.length > 1;
+	const handlePreset = (presetId) => {
+		setDateRangePreset(presetId);
+		onClose?.();
+	};
+	const handleCustomFrom = (value) => {
+		setDateRangeFilter({
+			from: fromInputValue(value),
+			to: dateRangeFilter?.to ?? null
+		});
+	};
+	const handleCustomTo = (value) => {
+		const to = fromInputValue(value);
+		setDateRangeFilter({
+			from: dateRangeFilter?.from ?? null,
+			to
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			hasMultipleDateColumns && /* @__PURE__ */ jsxs("div", {
+				className: "mb-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+					children: "Date field"
+				}), /* @__PURE__ */ jsx("select", {
+					className: "h-7 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+					value: referenceDateId ?? "",
+					onChange: (e) => setReferenceDateId(e.target.value),
+					"aria-label": "Reference date column",
+					children: availableDateColumns.map((col) => /* @__PURE__ */ jsx("option", {
+						value: col.id,
+						children: col.label
+					}, col.id))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+					children: "Range"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 gap-1",
+					children: DATE_RANGE_PRESETS.map((preset) => {
+						const isActive = dateRangePreset === preset.id;
+						return /* @__PURE__ */ jsx("button", {
+							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.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+				children: "Custom range"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "date",
+						className: "h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+						value: toInputValue(dateRangeFilter?.from ?? null),
+						onChange: (e) => handleCustomFrom(e.target.value),
+						"aria-label": "From date"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "–"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "date",
+						className: "h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+						value: toInputValue(dateRangeFilter?.to ?? null),
+						onChange: (e) => handleCustomTo(e.target.value),
+						"aria-label": "To date"
+					})
+				]
+			})] })
+		]
+	});
+}
+//#endregion
+export { ChartDateRangePanel, resolvePresetLabel };

package/dist/ui/chart-date-range.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-date-range.d.ts
+/**
+ * Date range control — interactive button that shows the current date range
+ * and opens a popover wrapping ChartDateRangePanel.
+ *
+ * Acts as both a display and a filter control for the reference date column.
+ */
+/**
+ * Interactive date range control with presets and custom date inputs.
+ * Also serves as the reference date column picker when multiple date columns exist.
+ */
+declare function ChartDateRange({
+  className
+}: {
+  className?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartDateRange };

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

@@ -0,0 +1,67 @@
+import { useChartContext } from "./chart-context.mjs";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { ChartDateRangePanel, resolvePresetLabel } from "./chart-date-range-panel.mjs";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Calendar } from "lucide-react";
+//#region src/ui/chart-date-range.tsx
+/**
+* Date range control — interactive button that shows the current date range
+* and opens a popover wrapping ChartDateRangePanel.
+*
+* Acts as both a display and a filter control for the reference date column.
+*/
+/** Format a Date into a compact, readable string (e.g. "Jan 5, 25"). */
+function formatDate(date) {
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "2-digit"
+	});
+}
+/**
+* Interactive date range control with presets and custom date inputs.
+* Also serves as the reference date column picker when multiple date columns exist.
+*/
+function ChartDateRange({ className }) {
+	const { dateRange, dateRangePreset, availableDateColumns } = useChartContext();
+	const [isOpen, setIsOpen] = useState(false);
+	const triggerRef = useRef(null);
+	if (availableDateColumns.length === 0) return null;
+	const activeLabel = resolvePresetLabel(dateRangePreset);
+	const isFiltered = dateRangePreset !== "all-time";
+	const hasRange = dateRange?.min && dateRange?.max;
+	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 ${isFiltered ? "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(Calendar, { className: "h-3 w-3" }),
+				/* @__PURE__ */ jsx("span", { children: activeLabel }),
+				hasRange && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/40",
+					children: "·"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-normal",
+					children: [
+						formatDate(dateRange.min),
+						" – ",
+						formatDate(dateRange.max)
+					]
+				})] })
+			]
+		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
+			isOpen,
+			onClose: () => setIsOpen(false),
+			triggerRef,
+			align: "right",
+			width: 288,
+			className: "p-3",
+			children: /* @__PURE__ */ jsx(ChartDateRangePanel, { onClose: () => setIsOpen(false) })
+		})]
+	});
+}
+//#endregion
+export { ChartDateRange };

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/chart-debug.d.ts
+/**
+ * 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.
+ *
+ * @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
+}: {
+  /** 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
+export { ChartDebug };