@matthieumordrel/chart-studio 0.2.0 → 0.2.2

package/dist/ui/chart-metric-panel.js

@@ -1,118 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { ArrowDownToLine, ArrowUpToLine, Divide, Hash, Sigma } from 'lucide-react';
-import { DEFAULT_METRIC, isAggregateMetric } from '../core/metric-utils.js';
-import { useChartContext } from './chart-context.js';
-const AGGREGATE_OPTIONS = [
-    { fn: 'sum', label: 'Sum', shortLabel: 'Sum', icon: _jsx(Sigma, { className: "h-3.5 w-3.5 shrink-0" }) },
-    {
-        fn: 'avg',
-        label: 'Average',
-        shortLabel: 'Avg',
-        icon: _jsx(Divide, { className: "h-3.5 w-3.5 shrink-0" }),
-    },
-    {
-        fn: 'min',
-        label: 'Minimum',
-        shortLabel: 'Min',
-        icon: _jsx(ArrowDownToLine, { className: "h-3.5 w-3.5 shrink-0" }),
-    },
-    {
-        fn: 'max',
-        label: 'Maximum',
-        shortLabel: 'Max',
-        icon: _jsx(ArrowUpToLine, { className: "h-3.5 w-3.5 shrink-0" }),
-    },
-];
-/** Aggregates where the "Exclude zeros" toggle is relevant */
-const ZERO_TOGGLE_AGGREGATES = new Set(['avg', 'min', 'max']);
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-/**
- * Extract number columns from the chart column list.
- */
-function getNumberColumns(columns) {
-    return columns.filter((column) => column.type === 'number');
-}
-/**
- * Group the allowed aggregate metrics by number column while preserving column order.
- */
-function getMetricColumnGroups(availableMetrics, columns) {
-    const aggregateMap = new Map();
-    for (const metric of availableMetrics) {
-        if (metric.kind !== 'aggregate') {
-            continue;
-        }
-        const aggregates = aggregateMap.get(metric.columnId) ?? new Set();
-        aggregates.add(metric.aggregate);
-        aggregateMap.set(metric.columnId, aggregates);
-    }
-    return getNumberColumns(columns)
-        .filter(column => aggregateMap.has(column.id))
-        .map(column => ({
-        columnId: column.id,
-        label: column.label,
-        aggregates: [...(aggregateMap.get(column.id) ?? new Set())],
-    }));
-}
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-/** A single number column section with aggregate buttons + optional zero toggle. */
-function MetricColumnGroup({ group, isActiveColumn, activeAggregate, includeZeros, onSelectAggregate, onToggleZeros, }) {
-    const isZeroToggleEnabled = isActiveColumn && activeAggregate !== null && ZERO_TOGGLE_AGGREGATES.has(activeAggregate);
-    const isZeroToggleDisabled = isActiveColumn && activeAggregate === 'sum';
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group.label }), isActiveColumn && (_jsxs("button", { onClick: isZeroToggleDisabled ? undefined : onToggleZeros, className: `flex items-center gap-1.5 text-[10px] transition-colors ${isZeroToggleDisabled
-                            ? 'cursor-not-allowed text-muted-foreground/30'
-                            : 'text-muted-foreground hover:text-foreground'}`, disabled: isZeroToggleDisabled, title: isZeroToggleDisabled
-                            ? 'Not applicable for Sum'
-                            : 'Exclude zero values from calculation', children: [_jsx("div", { className: `flex h-3 w-3 shrink-0 items-center justify-center rounded-sm border transition-colors ${isZeroToggleEnabled && !includeZeros
-                                    ? 'border-primary bg-primary'
-                                    : isZeroToggleDisabled
-                                        ? 'border-muted-foreground/20'
-                                        : 'border-muted-foreground/30'}`, children: isZeroToggleEnabled && !includeZeros && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) }), "Excl. zeros"] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: AGGREGATE_OPTIONS.filter(opt => group.aggregates.includes(opt.fn)).map((opt) => {
-                    const isActive = isActiveColumn && activeAggregate === opt.fn;
-                    return (_jsxs("button", { onClick: () => onSelectAggregate(opt.fn), className: `inline-flex h-8 items-center justify-center gap-2 rounded-md border text-xs transition-colors ${isActive
-                            ? 'border-primary/50 bg-primary/10 font-medium text-primary'
-                            : 'border-transparent bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground'}`, title: opt.label, children: [opt.icon, opt.shortLabel] }, opt.fn));
-                }) })] }));
-}
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-/**
- * Metric panel content (no popover wrapper).
- *
- * @property onClose - Optional callback when user makes a definitive selection (e.g. "Count")
- * @property className - Additional CSS classes
- */
-export function ChartMetricPanel({ onClose, className }) {
-    const { metric, setMetric, columns, availableMetrics } = useChartContext();
-    const countMetricEnabled = useMemo(() => availableMetrics.some(candidate => candidate.kind === 'count'), [availableMetrics]);
-    const metricColumnGroups = useMemo(() => getMetricColumnGroups(availableMetrics, columns), [availableMetrics, columns]);
-    const isCount = metric.kind === 'count';
-    const includeZeros = isAggregateMetric(metric) ? (metric.includeZeros ?? true) : true;
-    const handleSelectCount = () => {
-        if (!countMetricEnabled) {
-            return;
-        }
-        setMetric(DEFAULT_METRIC);
-        onClose?.();
-    };
-    const handleSelectAggregate = (columnId, fn) => {
-        setMetric({
-            kind: 'aggregate',
-            columnId,
-            aggregate: fn,
-            includeZeros: isAggregateMetric(metric) && metric.columnId === columnId ? includeZeros : true,
-        });
-    };
-    const handleToggleZeros = () => {
-        if (!isAggregateMetric(metric)) {
-            return;
-        }
-        setMetric({ ...metric, includeZeros: !includeZeros });
-    };
-    return (_jsxs("div", { className: className, children: [countMetricEnabled && (_jsxs("button", { onClick: handleSelectCount, className: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-xs transition-colors ${isCount ? 'bg-primary/10 font-medium text-primary' : 'text-foreground hover:bg-muted'}`, children: [_jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md ${isCount ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'}`, children: _jsx(Hash, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Count" }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: "Number of items" })] })] })), countMetricEnabled && metricColumnGroups.length > 0 && _jsx("div", { className: "my-4 border-t border-border" }), _jsx("div", { className: "space-y-4", children: metricColumnGroups.map((group) => (_jsx(MetricColumnGroup, { group: group, isActiveColumn: isAggregateMetric(metric) && metric.columnId === group.columnId, activeAggregate: isAggregateMetric(metric) && metric.columnId === group.columnId ? metric.aggregate : null, includeZeros: includeZeros, onSelectAggregate: (fn) => handleSelectAggregate(group.columnId, fn), onToggleZeros: handleToggleZeros }, group.columnId))) })] }));
-}

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

@@ -1,10 +0,0 @@
-/**
- * Metric selector — trigger button + popover wrapping ChartMetricPanel.
- *
- * Follows the same dropdown pattern as ChartFilters / ChartDateRange.
- */
-/** Styled popover to select the Y-axis metric with grouped aggregate buttons. */
-export declare function ChartMetricSelector({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=chart-metric-selector.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"chart-metric-selector.d.ts","sourceRoot":"","sources":["../../src/ui/chart-metric-selector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,kDAiDpE"}

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

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Metric selector — trigger button + popover wrapping ChartMetricPanel.
- *
- * Follows the same dropdown pattern as ChartFilters / ChartDateRange.
- */
-import { useRef, useState } from 'react';
-import { ChevronDown, TrendingUpDown } from 'lucide-react';
-import { getMetricLabel, isAggregateMetric } from '../core/metric-utils.js';
-import { useChartContext } from './chart-context.js';
-import { ChartDropdownPanel } from './chart-dropdown.js';
-import { ChartMetricPanel } from './chart-metric-panel.js';
-/** Styled popover to select the Y-axis metric with grouped aggregate buttons. */
-export function ChartMetricSelector({ className }) {
-    const { metric, availableMetrics, columns } = useChartContext();
-    const [isOpen, setIsOpen] = useState(false);
-    const triggerRef = useRef(null);
-    if (availableMetrics.length <= 1)
-        return null;
-    const isCount = metric.kind === 'count';
-    const isActive = !isCount;
-    const includeZeros = isAggregateMetric(metric) ? (metric.includeZeros ?? true) : true;
-    const label = getMetricLabel(metric, columns);
-    return (_jsxs("div", { className: className, children: [_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'}`, "aria-label": "Metric", children: [_jsx(TrendingUpDown, { className: "h-3 w-3" }), _jsx("span", { children: label }), isActive && !includeZeros && (_jsx("span", { className: "rounded bg-muted px-1 py-px text-[9px] font-normal text-muted-foreground", children: "excl. 0" })), _jsx(ChevronDown, { className: `h-3 w-3 text-muted-foreground/50 transition-transform ${isOpen ? 'rotate-180' : ''}` })] }), _jsx(ChartDropdownPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: triggerRef, width: 288, className: "p-4", children: _jsx(ChartMetricPanel, { onClose: () => setIsOpen(false) }) })] }));
-}

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

@@ -1,25 +0,0 @@
-/**
- * Custom select dropdown — premium replacement for native <select> elements.
- * Uses fixed positioning so the options list works correctly even inside
- * overflow-hidden containers (e.g. the toolbar overflow panel).
- */
-/**
- * Premium styled select dropdown with highlight-only selection styling.
- *
- * @property value - Currently selected value
- * @property options - Array of { value, label } options
- * @property onChange - Callback when selection changes
- * @property ariaLabel - Accessible label for the trigger
- * @property className - Additional CSS classes
- */
-export declare function ChartSelect<T extends string>({ value, options, onChange, ariaLabel, className, }: {
-    value: T;
-    options: ReadonlyArray<{
-        value: T;
-        label: string;
-    }>;
-    onChange: (value: T) => void;
-    ariaLabel?: string;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=chart-select.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"chart-select.d.ts","sourceRoot":"","sources":["../../src/ui/chart-select.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC5C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE;IACD,KAAK,EAAE,CAAC,CAAA;IACR,OAAO,EAAE,aAAa,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAA;IACjD,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAuDA"}

package/dist/ui/chart-select.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Custom select dropdown — premium replacement for native <select> elements.
- * Uses fixed positioning so the options list works correctly even inside
- * overflow-hidden containers (e.g. the toolbar overflow panel).
- */
-import { useRef, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { ChartDropdownPanel } from './chart-dropdown.js';
-/**
- * Premium styled select dropdown with highlight-only selection styling.
- *
- * @property value - Currently selected value
- * @property options - Array of { value, label } options
- * @property onChange - Callback when selection changes
- * @property ariaLabel - Accessible label for the trigger
- * @property className - Additional CSS classes
- */
-export function ChartSelect({ value, options, onChange, ariaLabel, className, }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const triggerRef = useRef(null);
-    const selected = options.find((o) => o.value === value);
-    /** Toggle the dropdown. */
-    const handleToggle = () => {
-        setIsOpen((current) => !current);
-    };
-    /** Select an option and close the dropdown. */
-    const handleSelect = (optionValue) => {
-        onChange(optionValue);
-        setIsOpen(false);
-    };
-    return (_jsxs("div", { className: className, children: [_jsxs("button", { ref: triggerRef, onClick: handleToggle, className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 text-xs font-medium text-foreground shadow-sm transition-all hover:border-border hover:bg-muted/30 hover:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20", "aria-label": ariaLabel, children: [_jsx("span", { className: "truncate", children: selected?.label ?? value }), _jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform ${isOpen ? 'rotate-180' : ''}` })] }), _jsx(ChartDropdownPanel, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: triggerRef, minWidth: "trigger", className: "p-1", children: options.map((option) => (_jsx("button", { onClick: () => handleSelect(option.value), className: `flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors ${option.value === value
-                        ? 'bg-primary/8 font-medium text-primary'
-                        : 'text-foreground hover:bg-muted/60'}`, children: _jsx("span", { className: "truncate", children: option.label }) }, option.value))) })] }));
-}

package/dist/ui/chart-source-switcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart-source-switcher.d.ts","sourceRoot":"","sources":["../../src/ui/chart-source-switcher.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,2CA+BpE"}

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

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Data source control — adapts based on single vs multi-source.
- *
- * Single source: read-only badge showing source label + record count.
- * Multi source: dropdown to switch between data sources.
- */
-import { Database } from 'lucide-react';
-import { useChartContext } from './chart-context.js';
-import { ChartSelect } from './chart-select.js';
-/** Format a number with locale-aware separators (e.g. 1,247). */
-function formatCount(n) {
-    return n.toLocaleString('en-US');
-}
-/**
- * Data source display/switcher.
- *
- * - Single source → read-only badge: "[icon] Jobs · 1,247 records"
- * - Multi source → dropdown to switch between sources
- */
-export function ChartSourceSwitcher({ className }) {
-    const { hasMultipleSources, sources, activeSourceId, setActiveSource, recordCount } = useChartContext();
-    // Single source — read-only info badge
-    if (!hasMultipleSources) {
-        const label = sources[0]?.label ?? 'Unnamed Source';
-        return (_jsxs("div", { className: `inline-flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground ${className ?? ''}`, children: [_jsx(Database, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "font-medium text-foreground", children: label }), _jsx("span", { className: "text-muted-foreground/40", children: "\u00B7" }), _jsxs("span", { children: [formatCount(recordCount), " records"] })] }));
-    }
-    // Multi source — dropdown select
-    const options = sources.map((source) => ({ value: source.id, label: `Source: ${source.label}` }));
-    return (_jsx(ChartSelect, { value: activeSourceId, options: options, onChange: (v) => setActiveSource(v), ariaLabel: "Data source", className: className }));
-}

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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,25 +0,0 @@
-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 }));
-}

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

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,109 +0,0 @@
-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;
-    }
-}

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

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,44 +0,0 @@
-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" })] }));
-}

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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,22 +0,0 @@
-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));
-        }) }));
-}

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

@@ -1,8 +0,0 @@
-/**
- * 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

@@ -1 +0,0 @@
-{"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

@@ -1,14 +0,0 @@
-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 }));
-}