@matthieumordrel/chart-studio 0.1.0

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

@@ -0,0 +1,9 @@
+/**
+ * Time bucket selector — premium custom dropdown.
+ * Only renders when the X-axis is a date column.
+ */
+/** Custom dropdown to select time granularity. */
+export declare function ChartTimeBucketSelector({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chart-time-bucket-selector.d.ts.map

package/dist/ui/chart-time-bucket-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-bucket-selector.d.ts","sourceRoot":"","sources":["../../src/ui/chart-time-bucket-selector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAgBH,kDAAkD;AAClD,wBAAgB,uBAAuB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,kDAkBxE"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Time bucket selector — premium custom dropdown.
+ * Only renders when the X-axis is a date column.
+ */
+import { CHART_TYPE_CONFIG } from '../core/chart-capabilities.js';
+import { useChartContext } from './chart-context.js';
+import { ChartSelect } from './chart-select.js';
+/** Labels for each time bucket. */
+const BUCKET_LABELS = {
+    day: 'Day',
+    week: 'Week',
+    month: 'Month',
+    quarter: 'Quarter',
+    year: 'Year',
+};
+/** Custom dropdown to select time granularity. */
+export function ChartTimeBucketSelector({ className }) {
+    const { chartType, isTimeSeries, timeBucket, setTimeBucket, availableTimeBuckets } = useChartContext();
+    if (!isTimeSeries || !CHART_TYPE_CONFIG[chartType].supportsTimeBucketing || availableTimeBuckets.length === 0) {
+        return null;
+    }
+    const options = availableTimeBuckets.map((bucket) => ({ value: bucket, label: BUCKET_LABELS[bucket] }));
+    return (_jsx(ChartSelect, { value: timeBucket, options: options, onChange: setTimeBucket, ariaLabel: "Time granularity", className: className }));
+}
+//# sourceMappingURL=chart-time-bucket-selector.js.map

package/dist/ui/chart-time-bucket-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-bucket-selector.js","sourceRoot":"","sources":["../../src/ui/chart-time-bucket-selector.tsx"],"names":[],"mappings":";AAAA;;;GAGG;AAEH,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAA;AAE/D,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAE7C,mCAAmC;AACnC,MAAM,aAAa,GAA+B;IAChD,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACb,CAAA;AAED,kDAAkD;AAClD,MAAM,UAAU,uBAAuB,CAAC,EAAC,SAAS,EAAuB;IACvE,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,oBAAoB,EAAC,GAAG,eAAe,EAAE,CAAA;IAEpG,IAAI,CAAC,YAAY,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,qBAAqB,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9G,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,OAAO,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,MAAoB,CAAC,EAAC,CAAC,CAAC,CAAA;IAEnH,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAC,kBAAkB,EAC5B,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC"}

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

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

package/dist/ui/chart-toolbar-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-toolbar-overflow.d.ts","sourceRoot":"","sources":["../../src/ui/chart-toolbar-overflow.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,KAAK,EAAC,SAAS,EAAiB,MAAM,oBAAoB,CAAA;AAMjE;;;;;;GAMG;AACH,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC9B,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,EAAE,yBAAyB,kDAgE1F"}

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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).
+ */
+import { useRef, useState } from 'react';
+import { ArrowLeft, ChevronRight, Ellipsis, Eraser } from 'lucide-react';
+import { getMetricLabel } from '../core/metric-utils.js';
+import { useChartContext } from './chart-context.js';
+import { ChartDropdownPanel } from './chart-dropdown.js';
+import { ChartDateRangePanel, resolvePresetLabel } from './chart-date-range-panel.js';
+import { ChartFiltersPanel } from './chart-filters-panel.js';
+import { ChartMetricPanel } from './chart-metric-panel.js';
+import { CONTROL_IDS, CONTROL_REGISTRY, SECTIONS } from './toolbar-types.js';
+/** Controls that drill-down into a detail page instead of rendering inline. */
+const COMPLEX_CONTROLS = new Set(['metric', 'filters', 'dateRange']);
+/**
+ * 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.
+ */
+export 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);
+    // Collect overflow controls (not pinned, not hidden) grouped by section
+    const sectionGroups = SECTIONS.map((section) => {
+        const controls = CONTROL_IDS.filter((id) => {
+            if (pinned.has(id) || hidden.has(id))
+                return false;
+            return CONTROL_REGISTRY[id].section === section.id;
+        });
+        return { section, controls };
+    }).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 (_jsxs("div", { className: className, children: [_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: _jsx(Ellipsis, { className: "h-4 w-4" }) }), _jsx(ChartDropdownPanel, { isOpen: isOpen, onClose: handleClose, triggerRef: triggerRef, align: "right", width: 320, repositionKey: activePage ?? 'main', className: "flex min-h-[280px] max-h-[min(480px,80vh)] flex-col", children: activePage === null ? (_jsx(MainMenu, { sectionGroups: sectionGroups, onNavigate: setActivePage })) : (_jsx(DetailPage, { controlId: activePage, onBack: () => setActivePage(null) })) })] }));
+}
+// ---------------------------------------------------------------------------
+// Main menu view
+// ---------------------------------------------------------------------------
+/** Main menu showing all controls organized by section. */
+function MainMenu({ sectionGroups, onNavigate, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-b border-border px-4 py-3", children: [_jsx("div", { className: "text-xs font-semibold text-foreground", children: "Chart configuration" }), _jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground", children: "Customize how your data is displayed" })] }), _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) => (_jsxs("div", { children: [groupIdx > 0 && _jsx("div", { className: "mx-2 my-1.5 border-t border-border" }), _jsxs("div", { className: "px-2 pb-1 pt-2", children: [_jsx("div", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: section.label }), _jsx("div", { className: "space-y-1", children: controls.map((id) => COMPLEX_CONTROLS.has(id) ? (_jsx(ComplexControlRow, { controlId: id, onNavigate: () => onNavigate(id) }, id)) : (_jsx(SimpleControlRow, { controlId: id }, id))) })] })] }, section.id))) })] }));
+}
+// ---------------------------------------------------------------------------
+// Detail page view (drill-down)
+// ---------------------------------------------------------------------------
+/** 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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2.5", children: [_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: _jsx(ArrowLeft, { className: "h-3.5 w-3.5" }) }), controlId === 'filters' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-w-0 flex-1 truncate text-xs font-semibold text-foreground", children: [filterActiveCount > 0 && (_jsxs("span", { className: "text-muted-foreground", children: [filterActiveCount, " filter", filterActiveCount !== 1 ? 's' : '', " active \u00B7", ' '] })), "Filters"] }), filterActiveCount > 0 && (_jsx("button", { onClick: () => clearAllFilters(), className: "shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", "aria-label": "Clear all filters", children: _jsx(Eraser, { className: "h-3.5 w-3.5" }) }))] })) : (_jsx("div", { className: "text-xs font-semibold text-foreground", children: entry.label }))] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-3", onWheel: (e) => e.stopPropagation(), children: [controlId === 'metric' && _jsx(ChartMetricPanel, {}), controlId === 'filters' && _jsx(ChartFiltersPanel, { showHeader: false }), controlId === 'dateRange' && _jsx(ChartDateRangePanel, {})] })] }));
+}
+// ---------------------------------------------------------------------------
+// Control rows
+// ---------------------------------------------------------------------------
+/**
+ * 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 entry = CONTROL_REGISTRY[controlId];
+    const Component = entry.component;
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-1 py-1.5", children: [_jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: entry.label }), _jsx("div", { className: "ml-auto flex min-w-0 items-center", children: _jsx(Component, {}) })] }));
+}
+/**
+ * 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 entry = CONTROL_REGISTRY[controlId];
+    return (_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: [_jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: entry.label }), _jsx("div", { className: "ml-auto truncate text-xs text-foreground", children: _jsx(ControlSummary, { controlId: controlId }) }), _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, dateRangeFilter } = useChartContext();
+    switch (controlId) {
+        case 'metric':
+            return _jsx("span", { children: getMetricLabel(metric, columns) });
+        case 'filters': {
+            const count = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
+            return _jsx("span", { children: count > 0 ? `${count} active` : 'None' });
+        }
+        case 'dateRange':
+            return _jsx("span", { children: resolvePresetLabel(dateRangeFilter) });
+        default:
+            return null;
+    }
+}
+//# sourceMappingURL=chart-toolbar-overflow.js.map

package/dist/ui/chart-toolbar-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-toolbar-overflow.js","sourceRoot":"","sources":["../../src/ui/chart-toolbar-overflow.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AAEH,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AACtC,OAAO,EAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAC,MAAM,cAAc,CAAA;AACtE,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAC,mBAAmB,EAAE,kBAAkB,EAAC,MAAM,6BAA6B,CAAA;AACnF,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAA;AAExD,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAA;AAE1E,+EAA+E;AAC/E,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAY,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAe/E;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,EAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAA4B;IACzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,iEAAiE;IACjE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC,CAAA;IACpE,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IAElD,wEAAwE;IACxE,MAAM,aAAa,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE;YACzC,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;gBAAE,OAAO,KAAK,CAAA;YAClD,OAAO,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,EAAE,CAAA;QACpD,CAAC,CAAC,CAAA;QACF,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,CAAA;IAC5B,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAEvC,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,aAAa,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,MAAM,EAAE,CAAC;YACX,WAAW,EAAE,CAAA;YACb,OAAM;QACR,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aAEvB,iBACE,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,uFACT,MAAM;oBACJ,CAAC,CAAC,8CAA8C;oBAChD,CAAC,CAAC,wFACN,EAAE,gBACS,gBAAgB,YAE3B,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,EAGT,KAAC,kBAAkB,IACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,GAAG,EACV,aAAa,EAAE,UAAU,IAAI,MAAM,EACnC,SAAS,EAAC,qDAAqD,YAE9D,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,GAAI,CACtE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,GAAI,CACzE,GACkB,IACjB,CACP,CAAA;AACH,CAAC;AAED,8EAA8E;AAC9E,iBAAiB;AACjB,8EAA8E;AAE9E,2DAA2D;AAC3D,SAAS,QAAQ,CAAC,EAChB,aAAa,EACb,UAAU,GAOX;IACC,OAAO,CACL,8BAEE,eAAK,SAAS,EAAC,kCAAkC,aAC/C,cAAK,SAAS,EAAC,uCAAuC,oCAA0B,EAChF,cAAK,SAAS,EAAC,0CAA0C,qDAEnD,IACF,EAGN,cACE,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAElC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,CACpD,0BACG,QAAQ,GAAG,CAAC,IAAI,cAAK,SAAS,EAAC,oCAAoC,GAAG,EACvE,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cAAK,SAAS,EAAC,+EAA+E,YAC3F,OAAO,CAAC,KAAK,GACV,EACN,cAAK,SAAS,EAAC,WAAW,YACvB,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CACnB,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CACzB,KAAC,iBAAiB,IAAU,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,IAAnD,EAAE,CAAqD,CAChF,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,IAAU,SAAS,EAAE,EAAE,IAAjB,EAAE,CAAmB,CAC7C,CACF,GACG,IACF,KAfE,OAAO,CAAC,EAAE,CAgBd,CACP,CAAC,GACE,IACL,CACJ,CAAA;AACH,CAAC;AAED,8EAA8E;AAC9E,gCAAgC;AAChC,8EAA8E;AAE9E,yEAAyE;AACzE,SAAS,UAAU,CAAC,EAAC,SAAS,EAAE,MAAM,EAA6C;IACjF,MAAM,KAAK,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACzC,MAAM,EAAC,OAAO,EAAE,eAAe,EAAC,GAAG,eAAe,EAAE,CAAA;IACpD,MAAM,iBAAiB,GACrB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE7F,OAAO,CACL,8BAEE,eAAK,SAAS,EAAC,4DAA4D,aACzE,iBACE,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,kJAAkJ,gBACjJ,MAAM,YAEjB,KAAC,SAAS,IAAC,SAAS,EAAC,aAAa,GAAG,GAC9B,EACR,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,8BACE,eAAK,SAAS,EAAC,+DAA+D,aAC3E,iBAAiB,GAAG,CAAC,IAAI,CACxB,gBAAM,SAAS,EAAC,uBAAuB,aACpC,iBAAiB,aAAS,iBAAiB,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,oBAAW,GAAG,IACtE,CACR,eAEG,EACL,iBAAiB,GAAG,CAAC,IAAI,CACxB,iBACE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,EAChC,SAAS,EAAC,wGAAwG,gBACvG,mBAAmB,YAE9B,KAAC,MAAM,IAAC,SAAS,EAAC,aAAa,GAAG,GAC3B,CACV,IACA,CACJ,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,uCAAuC,YAAE,KAAK,CAAC,KAAK,GAAO,CAC3E,IACG,EAGN,eACE,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAElC,SAAS,KAAK,QAAQ,IAAI,KAAC,gBAAgB,KAAG,EAC9C,SAAS,KAAK,SAAS,IAAI,KAAC,iBAAiB,IAAC,UAAU,EAAE,KAAK,GAAI,EACnE,SAAS,KAAK,WAAW,IAAI,KAAC,mBAAmB,KAAG,IACjD,IACL,CACJ,CAAA;AACH,CAAC;AAED,8EAA8E;AAC9E,eAAe;AACf,8EAA8E;AAE9E;;;GAGG;AACH,SAAS,gBAAgB,CAAC,EAAC,SAAS,EAAyB;IAC3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;IAEjC,OAAO,CACL,eAAK,SAAS,EAAC,gDAAgD,aAC7D,cAAK,SAAS,EAAC,wCAAwC,YAAE,KAAK,CAAC,KAAK,GAAO,EAC3E,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,SAAS,KAAG,GACT,IACF,CACP,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,SAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,UAAU,GAIX;IACC,MAAM,KAAK,GAAG,gBAAgB,CAAC,SAAS,CAAC,CAAA;IAEzC,OAAO,CACL,kBACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,mGAAmG,aAE7G,cAAK,SAAS,EAAC,wCAAwC,YAAE,KAAK,CAAC,KAAK,GAAO,EAC3E,cAAK,SAAS,EAAC,0CAA0C,YACvD,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,GAAI,GACpC,EACN,KAAC,YAAY,IAAC,SAAS,EAAC,wCAAwC,GAAG,IAC5D,CACV,CAAA;AACH,CAAC;AAED,2DAA2D;AAC3D,SAAS,cAAc,CAAC,EAAC,SAAS,EAAyB;IACzD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAC,GAAG,eAAe,EAAE,CAAA;IAErE,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,QAAQ;YACX,OAAO,yBAAO,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,GAAQ,CAAA;QACvD,KAAK,SAAS,CAAC,CAAC,CAAC;YACf,MAAM,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;YAC3E,OAAO,yBAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,GAAQ,CAAA;QAC9D,CAAC;QACD,KAAK,WAAW;YACd,OAAO,yBAAO,kBAAkB,CAAC,eAAe,CAAC,GAAQ,CAAA;QAC3D;YACE,OAAO,IAAI,CAAA;IACf,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,45 @@
+/**
+ * Composable, configurable toolbar with pinned controls and an ellipsis
+ * overflow menu — inspired by Notion's clean database view toolbar.
+ *
+ * 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']} />
+ * ```
+ */
+import type { ControlId } from './toolbar-types.js';
+/**
+ * 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 = {
+    className?: string;
+    pinned?: readonly ControlId[];
+    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).
+ */
+export declare function ChartToolbar({ className, pinned, hidden, }: ChartToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chart-toolbar.d.ts.map

package/dist/ui/chart-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/chart-toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAA;AAKjD;;;;;;GAMG;AACH,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;IAC7B,MAAM,CAAC,EAAE,SAAS,SAAS,EAAE,CAAA;CAC9B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,MAAgC,EAChC,MAAW,GACZ,EAAE,iBAAiB,2CAoBnB"}

package/dist/ui/chart-toolbar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Composable, configurable toolbar with pinned controls and an ellipsis
+ * overflow menu — inspired by Notion's clean database view toolbar.
+ *
+ * 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']} />
+ * ```
+ */
+import { useMemo } from 'react';
+import { ChartToolbarOverflow } from './chart-toolbar-overflow.js';
+import { CONTROL_IDS, CONTROL_REGISTRY } from './toolbar-types.js';
+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).
+ */
+export function ChartToolbar({ className, pinned = DEFAULT_PINNED_CONTROLS, hidden = [], }) {
+    const pinnedSet = useMemo(() => new Set(pinned), [pinned]);
+    const hiddenSet = useMemo(() => new Set(hidden), [hidden]);
+    // Pinned controls in registry order
+    const pinnedControls = CONTROL_IDS.filter((id) => pinnedSet.has(id) && !hiddenSet.has(id));
+    return (_jsxs("div", { className: `flex items-start justify-between gap-2 ${className ?? ''}`, children: [_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 _jsx(Component, {}, id);
+                }) }), _jsx(ChartToolbarOverflow, { pinned: pinnedSet, hidden: hiddenSet, className: "shrink-0 self-start" })] }));
+}
+//# sourceMappingURL=chart-toolbar.js.map

package/dist/ui/chart-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-toolbar.js","sourceRoot":"","sources":["../../src/ui/chart-toolbar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAA;AAC7B,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEhE,MAAM,uBAAuB,GAAG,CAAC,WAAW,CAAyC,CAAA;AAerF;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,MAAM,GAAG,uBAAuB,EAChC,MAAM,GAAG,EAAE,GACO;IAClB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAC1D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAE1D,oCAAoC;IACpC,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1F,OAAO,CACL,eAAK,SAAS,EAAE,0CAA0C,SAAS,IAAI,EAAE,EAAE,aAEzE,cAAK,SAAS,EAAC,kDAAkD,YAC9D,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;oBACzB,MAAM,SAAS,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC,SAAS,CAAA;oBAChD,OAAO,KAAC,SAAS,MAAM,EAAE,CAAI,CAAA;gBAC/B,CAAC,CAAC,GACE,EAEN,KAAC,oBAAoB,IAAC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAC,qBAAqB,GAAG,IAC1F,CACP,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * Chart type selector — inline toggle buttons for bar/line/area/pie/donut.
+ */
+/** Inline toggle buttons to select the chart type. */
+export declare function ChartTypeSelector({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chart-type-selector.d.ts.map

package/dist/ui/chart-type-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-type-selector.d.ts","sourceRoot":"","sources":["../../src/ui/chart-type-selector.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAcH,sDAAsD;AACtD,wBAAgB,iBAAiB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,kDA+BlE"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChartContext } from './chart-context.js';
+/** Labels for each chart type. */
+const CHART_TYPE_LABELS = {
+    bar: 'Bar',
+    line: 'Line',
+    area: 'Area',
+    pie: 'Pie',
+    donut: 'Donut',
+};
+/** Inline toggle buttons to select the chart type. */
+export function ChartTypeSelector({ className }) {
+    const { chartType, setChartType, availableChartTypes } = useChartContext();
+    if (availableChartTypes.length <= 1)
+        return null;
+    return (_jsx("div", { className: `inline-flex items-center rounded-lg border border-border/50 bg-muted/50 p-0.5 shadow-sm ${className ?? ''}`, role: "tablist", "aria-label": "Chart type", children: availableChartTypes.map((type) => {
+            const isActive = type === chartType;
+            return (_jsx("button", { role: "tab", "aria-selected": isActive, onClick: () => setChartType(type), className: `rounded-md px-2.5 py-1 text-xs font-medium transition-all ${isActive
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:bg-background/50 hover:text-foreground'}`, children: CHART_TYPE_LABELS[type] }, type));
+        }) }));
+}
+//# sourceMappingURL=chart-type-selector.js.map

package/dist/ui/chart-type-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-type-selector.js","sourceRoot":"","sources":["../../src/ui/chart-type-selector.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAA;AAElD,kCAAkC;AAClC,MAAM,iBAAiB,GAA8B;IACnD,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;CACf,CAAA;AAED,sDAAsD;AACtD,MAAM,UAAU,iBAAiB,CAAC,EAAC,SAAS,EAAuB;IACjE,MAAM,EAAC,SAAS,EAAE,YAAY,EAAE,mBAAmB,EAAC,GAAG,eAAe,EAAE,CAAA;IAExE,IAAI,mBAAmB,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAEhD,OAAO,CACL,cACE,SAAS,EAAE,2FAA2F,SAAS,IAAI,EAAE,EAAE,EACvH,IAAI,EAAC,SAAS,gBACH,YAAY,YAEtB,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAChC,MAAM,QAAQ,GAAG,IAAI,KAAK,SAAS,CAAA;YACnC,OAAO,CACL,iBAEE,IAAI,EAAC,KAAK,mBACK,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,SAAS,EAAE,6DACT,QAAQ;oBACN,CAAC,CAAC,yCAAyC;oBAC3C,CAAC,CAAC,oEACN,EAAE,YAED,iBAAiB,CAAC,IAAI,CAAC,IAVnB,IAAI,CAWF,CACV,CAAA;QACH,CAAC,CAAC,GACE,CACP,CAAA;AACH,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * X-axis selector — premium custom dropdown for choosing which column drives the X-axis.
+ */
+/** Custom dropdown to select the X-axis column. */
+export declare function ChartXAxisSelector({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=chart-x-axis-selector.d.ts.map

package/dist/ui/chart-x-axis-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-x-axis-selector.d.ts","sourceRoot":"","sources":["../../src/ui/chart-x-axis-selector.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,mDAAmD;AACnD,wBAAgB,kBAAkB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,kDAgBnE"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * X-axis selector — premium custom dropdown for choosing which column drives the X-axis.
+ */
+import { useChartContext } from './chart-context.js';
+import { ChartSelect } from './chart-select.js';
+/** Custom dropdown to select the X-axis column. */
+export function ChartXAxisSelector({ className }) {
+    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 (_jsx(ChartSelect, { value: xAxisId ?? '', options: options, onChange: (v) => setXAxis(v), ariaLabel: "X-axis", className: className }));
+}
+//# sourceMappingURL=chart-x-axis-selector.js.map

package/dist/ui/chart-x-axis-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-x-axis-selector.js","sourceRoot":"","sources":["../../src/ui/chart-x-axis-selector.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAE7C,mDAAmD;AACnD,MAAM,UAAU,kBAAkB,CAAC,EAAC,SAAS,EAAuB;IAClE,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAC,GAAG,eAAe,EAAE,CAAA;IAE7D,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAE3C,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,WAAW,GAAG,CAAC,KAAK,EAAE,EAAC,CAAC,CAAC,CAAA;IAE7F,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,OAAO,IAAI,EAAE,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5B,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * UI exports for chart-studio.
+ *
+ * Composable React components that consume the useChart hook via context.
+ * Use `<Chart>` as the root provider, then compose any combination of controls.
+ */
+export { Chart, useChartContext, useTypedChartContext } from './chart-context.js';
+export { ChartCanvas } from './chart-canvas.js';
+export { ChartToolbar } from './chart-toolbar.js';
+export { ChartToolbarOverflow } from './chart-toolbar-overflow.js';
+export type { ControlId } from './toolbar-types.js';
+export { ChartSourceSwitcher } from './chart-source-switcher.js';
+export { ChartTypeSelector } from './chart-type-selector.js';
+export { ChartGroupBySelector } from './chart-group-by-selector.js';
+export { ChartTimeBucketSelector } from './chart-time-bucket-selector.js';
+export { ChartMetricSelector } from './chart-metric-selector.js';
+export { ChartMetricPanel } from './chart-metric-panel.js';
+export { ChartXAxisSelector } from './chart-x-axis-selector.js';
+export { ChartDateRange } from './chart-date-range.js';
+export { ChartDateRangeBadge } from './chart-date-range-badge.js';
+export { ChartDateRangePanel } from './chart-date-range-panel.js';
+export { ChartFilters } from './chart-filters.js';
+export { ChartFiltersPanel } from './chart-filters-panel.js';
+export { ChartDebug } from './chart-debug.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAA;AAChE,YAAY,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAC,cAAc,EAAC,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA"}

package/dist/ui/index.js

@@ -0,0 +1,24 @@
+/**
+ * UI exports for chart-studio.
+ *
+ * Composable React components that consume the useChart hook via context.
+ * Use `<Chart>` as the root provider, then compose any combination of controls.
+ */
+export { Chart, useChartContext, useTypedChartContext } from './chart-context.js';
+export { ChartCanvas } from './chart-canvas.js';
+export { ChartToolbar } from './chart-toolbar.js';
+export { ChartToolbarOverflow } from './chart-toolbar-overflow.js';
+export { ChartSourceSwitcher } from './chart-source-switcher.js';
+export { ChartTypeSelector } from './chart-type-selector.js';
+export { ChartGroupBySelector } from './chart-group-by-selector.js';
+export { ChartTimeBucketSelector } from './chart-time-bucket-selector.js';
+export { ChartMetricSelector } from './chart-metric-selector.js';
+export { ChartMetricPanel } from './chart-metric-panel.js';
+export { ChartXAxisSelector } from './chart-x-axis-selector.js';
+export { ChartDateRange } from './chart-date-range.js';
+export { ChartDateRangeBadge } from './chart-date-range-badge.js';
+export { ChartDateRangePanel } from './chart-date-range-panel.js';
+export { ChartFilters } from './chart-filters.js';
+export { ChartFiltersPanel } from './chart-filters-panel.js';
+export { ChartDebug } from './chart-debug.js';
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAC/E,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,oBAAoB,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAC,cAAc,EAAC,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA"}

package/dist/ui/theme.css

@@ -0,0 +1,62 @@
+@source "./";
+
+@theme inline {
+  --color-background: hsl(var(--cs-background));
+  --color-foreground: hsl(var(--cs-foreground));
+  --color-card: hsl(var(--cs-card));
+  --color-card-foreground: hsl(var(--cs-card-foreground));
+  --color-popover: hsl(var(--cs-popover));
+  --color-popover-foreground: hsl(var(--cs-popover-foreground));
+  --color-primary: hsl(var(--cs-primary));
+  --color-primary-foreground: hsl(var(--cs-primary-foreground));
+  --color-muted: hsl(var(--cs-muted));
+  --color-muted-foreground: hsl(var(--cs-muted-foreground));
+  --color-border: hsl(var(--cs-border));
+  --color-input: hsl(var(--cs-input));
+  --color-ring: hsl(var(--cs-ring));
+}
+
+:root {
+  color-scheme: light;
+  --cs-background: var(--background, 220 16% 97.5%);
+  --cs-foreground: var(--foreground, 224 71% 4%);
+  --cs-card: var(--card, 0 0% 100%);
+  --cs-card-foreground: var(--card-foreground, 224 71% 4%);
+  --cs-popover: var(--popover, 0 0% 100%);
+  --cs-popover-foreground: var(--popover-foreground, 224 71% 4%);
+  --cs-primary: var(--primary, 245 72% 57%);
+  --cs-primary-foreground: var(--primary-foreground, 0 0% 100%);
+  --cs-muted: var(--muted, 220 14% 93.5%);
+  --cs-muted-foreground: var(--muted-foreground, 220 9% 46%);
+  --cs-border: var(--border, 220 13% 90%);
+  --cs-input: var(--input, 220 13% 90%);
+  --cs-ring: var(--ring, 245 72% 57%);
+  --cs-chart-1: 245 72% 57%;
+  --cs-chart-2: 271 72% 55%;
+  --cs-chart-3: 330 68% 54%;
+  --cs-chart-4: 170 65% 38%;
+  --cs-chart-5: 30 90% 54%;
+}
+
+:root[data-theme='dark'],
+.dark {
+  color-scheme: dark;
+  --cs-background: var(--background, 228 25% 7%);
+  --cs-foreground: var(--foreground, 220 15% 93%);
+  --cs-card: var(--card, 228 22% 10%);
+  --cs-card-foreground: var(--card-foreground, 220 15% 93%);
+  --cs-popover: var(--popover, 228 20% 12%);
+  --cs-popover-foreground: var(--popover-foreground, 220 15% 93%);
+  --cs-primary: var(--primary, 245 80% 67%);
+  --cs-primary-foreground: var(--primary-foreground, 0 0% 100%);
+  --cs-muted: var(--muted, 228 16% 14%);
+  --cs-muted-foreground: var(--muted-foreground, 220 10% 54%);
+  --cs-border: var(--border, 228 14% 15%);
+  --cs-input: var(--input, 228 14% 18%);
+  --cs-ring: var(--ring, 245 80% 67%);
+  --cs-chart-1: 245 85% 70%;
+  --cs-chart-2: 271 82% 68%;
+  --cs-chart-3: 190 85% 55%;
+  --cs-chart-4: 155 72% 50%;
+  --cs-chart-5: 38 90% 62%;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Toolbar control identifiers and registry.
+ *
+ * Each control has an ID, a label (for the overflow menu), a section
+ * (for grouping in the overflow panel), and the React component to render.
+ *
+ * @property CONTROL_IDS - All valid control identifier strings
+ * @property ControlId - Union type of all valid control identifiers
+ * @property ControlEntry - Registry entry for a single toolbar control
+ * @property CONTROL_REGISTRY - Ordered mapping of ControlId → ControlEntry
+ */
+import type { ComponentType } from 'react';
+/** All valid toolbar control identifiers. */
+export declare const CONTROL_IDS: readonly ["source", "xAxis", "chartType", "groupBy", "timeBucket", "metric", "filters", "dateRange"];
+/** Union type of all valid toolbar control identifiers. */
+export type ControlId = (typeof CONTROL_IDS)[number];
+/** Section label for grouping controls in the overflow panel. */
+export type ControlSection = 'data' | 'visualization' | 'filters';
+/**
+ * Registry entry for a single toolbar control.
+ *
+ * @property label - Human-readable label for the overflow menu
+ * @property section - Section grouping in the overflow panel
+ * @property component - React component to render
+ */
+export type ControlEntry = {
+    label: string;
+    section: ControlSection;
+    component: ComponentType<{
+        className?: string;
+    }>;
+};
+/**
+ * Ordered registry of all toolbar controls.
+ * Controls render in this order both pinned and inside the overflow menu.
+ */
+export declare const CONTROL_REGISTRY: Record<ControlId, ControlEntry>;
+/** Section metadata for the overflow panel. */
+export declare const SECTIONS: Array<{
+    id: ControlSection;
+    label: string;
+}>;
+//# sourceMappingURL=toolbar-types.d.ts.map

package/dist/ui/toolbar-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-types.d.ts","sourceRoot":"","sources":["../../src/ui/toolbar-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAA;AAUxC,6CAA6C;AAC7C,eAAO,MAAM,WAAW,sGASd,CAAA;AAEV,2DAA2D;AAC3D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,eAAe,GAAG,SAAS,CAAA;AAEjE;;;;;;GAMG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,cAAc,CAAA;IACvB,SAAS,EAAE,aAAa,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAA;CAC/C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAS5D,CAAA;AAED,+CAA+C;AAC/C,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAI/D,CAAA"}

package/dist/ui/toolbar-types.js

@@ -0,0 +1,51 @@
+/**
+ * Toolbar control identifiers and registry.
+ *
+ * Each control has an ID, a label (for the overflow menu), a section
+ * (for grouping in the overflow panel), and the React component to render.
+ *
+ * @property CONTROL_IDS - All valid control identifier strings
+ * @property ControlId - Union type of all valid control identifiers
+ * @property ControlEntry - Registry entry for a single toolbar control
+ * @property CONTROL_REGISTRY - Ordered mapping of ControlId → ControlEntry
+ */
+import { ChartDateRange } from './chart-date-range.js';
+import { ChartFilters } from './chart-filters.js';
+import { ChartGroupBySelector } from './chart-group-by-selector.js';
+import { ChartMetricSelector } from './chart-metric-selector.js';
+import { ChartSourceSwitcher } from './chart-source-switcher.js';
+import { ChartTimeBucketSelector } from './chart-time-bucket-selector.js';
+import { ChartTypeSelector } from './chart-type-selector.js';
+import { ChartXAxisSelector } from './chart-x-axis-selector.js';
+/** All valid toolbar control identifiers. */
+export const CONTROL_IDS = [
+    'source',
+    'xAxis',
+    'chartType',
+    'groupBy',
+    'timeBucket',
+    'metric',
+    'filters',
+    'dateRange',
+];
+/**
+ * Ordered registry of all toolbar controls.
+ * Controls render in this order both pinned and inside the overflow menu.
+ */
+export const CONTROL_REGISTRY = {
+    source: { label: 'Data source', section: 'data', component: ChartSourceSwitcher },
+    xAxis: { label: 'X-axis', section: 'data', component: ChartXAxisSelector },
+    chartType: { label: 'Chart type', section: 'visualization', component: ChartTypeSelector },
+    groupBy: { label: 'Group by', section: 'visualization', component: ChartGroupBySelector },
+    timeBucket: { label: 'Time bucket', section: 'visualization', component: ChartTimeBucketSelector },
+    metric: { label: 'Metric', section: 'visualization', component: ChartMetricSelector },
+    filters: { label: 'Filters', section: 'filters', component: ChartFilters },
+    dateRange: { label: 'Date range', section: 'filters', component: ChartDateRange },
+};
+/** Section metadata for the overflow panel. */
+export const SECTIONS = [
+    { id: 'data', label: 'Data' },
+    { id: 'visualization', label: 'Visualization' },
+    { id: 'filters', label: 'Filters' },
+];
+//# sourceMappingURL=toolbar-types.js.map

package/dist/ui/toolbar-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-types.js","sourceRoot":"","sources":["../../src/ui/toolbar-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAC,cAAc,EAAC,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAC,oBAAoB,EAAC,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAC,uBAAuB,EAAC,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAE7D,6CAA6C;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ;IACR,OAAO;IACP,WAAW;IACX,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,SAAS;IACT,WAAW;CACH,CAAA;AAqBV;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC;IAC/D,MAAM,EAAE,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAC;IAC/E,KAAK,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAC;IACxE,SAAS,EAAE,EAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,iBAAiB,EAAC;IACxF,OAAO,EAAE,EAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAC;IACvF,UAAU,EAAE,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,uBAAuB,EAAC;IAChG,MAAM,EAAE,EAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAC;IACnF,OAAO,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAC;IACxE,SAAS,EAAE,EAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAC;CAChF,CAAA;AAED,+CAA+C;AAC/C,MAAM,CAAC,MAAM,QAAQ,GAA+C;IAClE,EAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAC;IAC3B,EAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAC;IAC7C,EAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC;CAClC,CAAA"}