@sybilion/uilib 1.2.24 → 1.3.0

package/dist/esm/components/ui/Chart/Chart.js

@@ -16,6 +16,7 @@ import '../TextShimmer/TextShimmer.js';
 import '@phosphor-icons/react';
 import '../AnalysesSelector/AnalysesSelector.styl.js';
 import './components/CustomChartLegend/CustomChartLegend.styl.js';
+import './components/ChartEmptyState/ChartEmptyState.styl.js';
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 const ChartLegend = RechartsPrimitive.Legend;

package/dist/esm/components/ui/Chart/components/BaseChartWrapper.js

@@ -1,46 +1,21 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
-import { ChartTooltip } from '../Chart.js';
-import { QuantileBands } from './QuantileBands.js';
 import { getForecastColor, ChartLines } from '../../ChartAreaInteractive/ChartLines.js';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
 import { chartRenderQueue } from '../../../../utils/chartRenderQueue.js';
-import { LineChart, ComposedChart } from 'recharts';
+import { Tooltip, LineChart, ComposedChart } from 'recharts';
+import { ChartContainer } from './ChartContainer.js';
+import { ChartTooltipContent } from './ChartTooltipContent.js';
+import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
+import { QuantileBands } from './QuantileBands.js';
+import { resolveChartMargin, getPlotViewBox } from '../tools/chartPlotGeometry.js';
 import { formatDate } from '../tools/formatters.js';
 import S from './BaseChartWrapper.styl.js';
 import { ChartAxes } from './ChartAxes.js';
 import { ChartGrid } from './ChartGrid.js';
 import { LegendSvg } from './LegendSvg/LegendSvg.js';
-import { ChartContainer } from './ChartContainer.js';
-import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
-import { ChartTooltipContent } from './ChartTooltipContent.js';
 
-const DEFAULT_CHART_MARGIN = {
-    top: 5,
-    right: 5,
-    bottom: 5,
-    left: 5,
-};
-function resolveChartMargin(margin) {
-    return {
-        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
-        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
-        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
-        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
-    };
-}
-/** Plot box inside `.recharts-wrapper`, same convention as Recharts cartesian viewBox. */
-function getPlotViewBox(wrapper, m) {
-    const w = wrapper.clientWidth;
-    const h = wrapper.clientHeight;
-    return {
-        x: m.left,
-        y: m.top,
-        width: Math.max(0, w - m.left - m.right),
-        height: Math.max(0, h - m.top - m.bottom),
-    };
-}
 function clampTooltipTranslate(args) {
     const { coordinate, viewBox, tooltipWidth: tw, tooltipHeight: th, offset, edgeMargin, } = args;
     const minX = viewBox.x + edgeMargin;
@@ -332,7 +307,7 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
     }
     const ChartComponent = chartType === 'line' ? LineChart : ComposedChart;
     const defaultLabelFormatter = (v) => formatDateFn(v, true);
-    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(ChartTooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
+    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(Tooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
                         (legendVariant === 'svg' ? (jsx(LegendSvg, { payload: legendPayload.map(p => ({
                                 value: p.value,
                                 color: p.color,

package/dist/esm/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './ChartEmptyState.styl.js';
+
+function isNonEmpty(node) {
+    if (node == null || node === false)
+        return false;
+    if (typeof node === 'string')
+        return node.trim().length > 0;
+    return true;
+}
+function ChartEmptyState({ className, hint, status, statusTone = 'muted', variant = 'panel', align = 'center', }) {
+    const hasHint = isNonEmpty(hint);
+    const hasStatus = isNonEmpty(status);
+    if (!hasHint && !hasStatus) {
+        return null;
+    }
+    return (jsxs("div", { className: cn(S.root, variant === 'panel' && S.rootPanel, variant === 'inline' && S.rootInline, align === 'start' && S.rootAlignStart, align === 'center' && S.rootAlignCenter, className), children: [hasHint && jsx("div", { className: S.hint, children: hint }), hasStatus && (jsx("div", { className: cn(S.status, statusTone === 'destructive' && S.statusDestructive, statusTone === 'muted' && S.statusMuted), children: status }))] }));
+}
+
+export { ChartEmptyState };

package/dist/esm/components/ui/Chart/components/ChartEmptyState/ChartEmptyState.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChartEmptyState_root__-Dzme{backdrop-filter:blur(4px);border-radius:var(--p-4);box-shadow:0 0 0 2px var(--page-color);display:flex;flex-direction:column;gap:var(--p-1);max-width:42rem;padding:0 var(--p-3);pointer-events:auto}.ChartEmptyState_rootPanel__hiHyM{background:var(--muted)/.35;border-radius:var(--radius-md);justify-content:center;min-height:var(--chart-height);padding:var(--p-6);width:100%}.ChartEmptyState_rootInline__NV7yu{max-width:100%;width:-moz-fit-content;width:fit-content}.ChartEmptyState_rootAlignCenter__9LySU{align-items:center;text-align:center}.ChartEmptyState_rootAlignStart__fA7lc{align-items:flex-start;text-align:left}.ChartEmptyState_hint__9PSr1{color:var(--muted-foreground);font-size:14px;font-weight:400;line-height:1.5;margin:0}.ChartEmptyState_hint__9PSr1 a{color:var(--sb-cyan-400);font-weight:500;text-decoration:underline}.ChartEmptyState_hint__9PSr1 a:hover{opacity:.9}.ChartEmptyState_status__sR1qq{font-size:14px;font-weight:400;line-height:1.5;margin:0}.ChartEmptyState_statusMuted__h0nek{color:var(--muted-foreground)}.ChartEmptyState_statusDestructive__cMCuF{color:var(--destructive)}";
+var S = {"root":"ChartEmptyState_root__-Dzme","rootPanel":"ChartEmptyState_rootPanel__hiHyM","rootInline":"ChartEmptyState_rootInline__NV7yu","rootAlignCenter":"ChartEmptyState_rootAlignCenter__9LySU","rootAlignStart":"ChartEmptyState_rootAlignStart__fA7lc","hint":"ChartEmptyState_hint__9PSr1","status":"ChartEmptyState_status__sR1qq","statusMuted":"ChartEmptyState_statusMuted__h0nek","statusDestructive":"ChartEmptyState_statusDestructive__cMCuF"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Chart/tools/chartPlotGeometry.js

@@ -0,0 +1,65 @@
+/**
+ * Shared Recharts plot / margin math (DOM-agnostic except measurement entry points).
+ * Keeps BaseChartWrapper tooltip clamp and ChartAreaInteractive brush in sync.
+ */
+const DEFAULT_CHART_MARGIN = {
+    top: 5,
+    right: 5,
+    bottom: 5,
+    left: 5,
+};
+function resolveChartMargin(margin) {
+    return {
+        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+    };
+}
+/** Plot box inside `.recharts-wrapper` (Recharts cartesian convention). */
+function getPlotViewBox(wrapper, m) {
+    const w = wrapper.clientWidth;
+    const h = wrapper.clientHeight;
+    return {
+        x: m.left,
+        y: m.top,
+        width: Math.max(0, w - m.left - m.right),
+        height: Math.max(0, h - m.top - m.bottom),
+    };
+}
+const GRID_BOUNDS_MIN_PX = 2;
+/**
+ * Plot area in `host` local px: prefer painted `.recharts-cartesian-grid`, else
+ * last `.recharts-wrapper` + margins. One `hostRect` read; grid/wrapper rects as needed.
+ */
+function measureHostRelativePlotRect(host, margin) {
+    const hostRect = host.getBoundingClientRect();
+    const grid = host.querySelector('.recharts-cartesian-grid');
+    if (grid) {
+        const gr = grid.getBoundingClientRect();
+        if (gr.width > GRID_BOUNDS_MIN_PX && gr.height > GRID_BOUNDS_MIN_PX) {
+            return {
+                left: gr.left - hostRect.left,
+                top: gr.top - hostRect.top,
+                width: gr.width,
+                height: gr.height,
+            };
+        }
+    }
+    const wrappers = host.querySelectorAll('.recharts-wrapper');
+    const wrapper = wrappers[wrappers.length - 1];
+    if (!(wrapper instanceof HTMLElement))
+        return null;
+    const vb = getPlotViewBox(wrapper, margin);
+    if (vb.width <= 0 || vb.height <= 0)
+        return null;
+    const wrapRect = wrapper.getBoundingClientRect();
+    return {
+        left: wrapRect.left - hostRect.left + vb.x,
+        top: wrapRect.top - hostRect.top + vb.y,
+        width: vb.width,
+        height: vb.height,
+    };
+}
+
+export { DEFAULT_CHART_MARGIN, getPlotViewBox, measureHostRelativePlotRect, resolveChartMargin };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.js

@@ -6,6 +6,30 @@ const timeRangeToMonths = {
     '5y': 60,
     All: 12,
 };
+const DRAG_TIME_RANGE_PREFIX = '__drag:';
+function encodeDragTimeRange(a, b) {
+    const t0 = Math.min(a.getTime(), b.getTime());
+    const t1 = Math.max(a.getTime(), b.getTime());
+    return `${DRAG_TIME_RANGE_PREFIX}${t0},${t1}`;
+}
+function parseDragTimeRange(s) {
+    if (!s.startsWith(DRAG_TIME_RANGE_PREFIX))
+        return null;
+    const body = s.slice(DRAG_TIME_RANGE_PREFIX.length);
+    const comma = body.indexOf(',');
+    if (comma === -1)
+        return null;
+    const a = Number(body.slice(0, comma));
+    const b = Number(body.slice(comma + 1));
+    if (!Number.isFinite(a) || !Number.isFinite(b))
+        return null;
+    const t0 = Math.min(a, b);
+    const t1 = Math.max(a, b);
+    return { start: new Date(t0), end: new Date(t1) };
+}
+function isTimeRangePreset(s) {
+    return Object.prototype.hasOwnProperty.call(timeRangeToMonths, s);
+}
 function isPlottableNumber(value) {
     return typeof value === 'number' && Number.isFinite(value);
 }
@@ -76,8 +100,20 @@ function computeLatestPlottableDate(data, options) {
     return latest;
 }
 const filterDataForTimeRange = (data, currentTimeRange, options) => {
+    const dragRange = parseDragTimeRange(currentTimeRange);
+    if (dragRange) {
+        const { start, end } = dragRange;
+        return data.filter(item => {
+            if (!item.date)
+                return false;
+            const d = new Date(item.date);
+            return d >= start && d <= end;
+        });
+    }
     if (currentTimeRange === 'All')
         return data;
+    if (!isTimeRangePreset(currentTimeRange))
+        return data;
     const latestDate = computeLatestPlottableDate(data, options);
     // Pre-compute start date based on latest date in data
     let startDate = null;
@@ -112,4 +148,4 @@ const longDateFormatter = (value) => {
     });
 };
 
-export { filterDataForTimeRange, longDateFormatter, shortDateFormatter };
+export { DRAG_TIME_RANGE_PREFIX, encodeDragTimeRange, filterDataForTimeRange, isTimeRangePreset, longDateFormatter, parseDragTimeRange, shortDateFormatter };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.js

@@ -8,6 +8,7 @@ import { ensureChartForecastBridge } from '../../../utils/chartConnectionPoint.j
 import { CHART_MARGINS } from './ChartAreaInteractive.constants.js';
 import { filterDataForTimeRange, shortDateFormatter, longDateFormatter } from './ChartAreaInteractive.helpers.js';
 import S from './ChartAreaInteractive.styl.js';
+import { TimeRangeBrushHost } from './TimeRangeBrushLayer.js';
 import { PinOverlay } from './overlays/PinOverlay/PinOverlay.js';
 import { IntervalsOverlay } from './overlays/IntervalsOverlay/IntervalsOverlay.js';
 import { ThresholdsOverlay } from './overlays/ThresholdsOverlay/ThresholdsOverlay.js';
@@ -15,7 +16,7 @@ import { ThresholdsOverlay } from './overlays/ThresholdsOverlay/ThresholdsOverla
 const chartConfig = {
 // Chart now supports light/dark themes with dynamic colors
 };
-function ChartAreaInteractive({ className, chartContainerClassName, legendClassName, xAxisClassName, yAxisClassName, timeRange, onTimeRangeChange, pinMonth, onPinMonthChange, onPreviewMonthChange, chartData, forecastData, error, loading = false, isDarkTheme = false, footerActions, mode, selectedForecast, upperQuantiles, lowerQuantiles, selectedLowerQuantile, selectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, lowerThreshold, upperThreshold, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, headerActions, excludeLegendIds, loadingAnalyses, onLegendClick, onAnalysisSelect, disableTimeRangeSelector, forecastLineStyle = 'dashed', selectedAnalysisId, chartRenderId, toggleLegendSeries, ensureAnalysisSeriesVisible, overlayForecastData = {}, hiddenSeries, disableForecastHistoricalBridge, ...restProps }) {
+function ChartAreaInteractive({ className, chartContainerClassName, legendClassName, xAxisClassName, yAxisClassName, timeRange, onTimeRangeChange, pinMonth, onPinMonthChange, onPreviewMonthChange, chartData, forecastData, error, loading = false, isDarkTheme = false, footerActions, mode, selectedForecast, upperQuantiles, lowerQuantiles, selectedLowerQuantile, selectedUpperQuantile, onLowerQuantileChange, onUpperQuantileChange, lowerThreshold, upperThreshold, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, headerActions, excludeLegendIds, loadingAnalyses, onLegendClick, onAnalysisSelect, disableTimeRangeSelector, forecastLineStyle = 'dashed', selectedAnalysisId, chartRenderId, toggleLegendSeries, ensureAnalysisSeriesVisible, overlayForecastData = {}, hiddenSeries, disableForecastHistoricalBridge, overlayElements: overlayElementsProp, ...restProps }) {
     const seriesHidden = hiddenSeries ?? new Set();
     const hiddenSeriesRef = useRef(seriesHidden);
     const prevSelectedAnalysisIdRef = useRef(selectedAnalysisId);
@@ -90,9 +91,11 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
         loadingMessage,
         excludeLegendIds,
         forecastLineStyle,
+        overlayElements: overlayElementsProp,
         // loadingAnalyses,
         ...restProps,
     };
+    const brushEnabled = !disableTimeRangeSelector && !loading && bridgedChartData.length > 1;
     const renderChart = () => {
         const overlayClassName = cn(chartContainerClassName);
         switch (mode) {
@@ -106,7 +109,7 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
                 return (jsx(BaseChartWrapper, { ...baseChartProps, chartClassName: cn(S.chartContainer, chartContainerClassName) }));
         }
     };
-    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), renderChart()] }));
+    return (jsxs(InteractionOverlay, { className: cn(className, loading && S.loading), children: [(!disableTimeRangeSelector || headerActions) && (jsxs("div", { className: S.chartHeaderContainer, children: [!disableTimeRangeSelector && (jsx(TimeRangeControls, { timeRange: timeRange, onTimeRangeChange: onTimeRangeChange, loading: loading })), headerActions] })), jsx(TimeRangeBrushHost, { chartData: bridgedChartData, onTimeRangeChange: onTimeRangeChange, enabled: brushEnabled, layoutKey: chartRenderId ?? null, children: renderChart() })] }));
 }
 
 export { ChartAreaInteractive, chartConfig };

package/dist/esm/components/ui/ChartAreaInteractive/TimeRangeBrushLayer.js

@@ -0,0 +1,205 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import debounce from '../../../tools/debounce.js';
+import { CHART_MARGINS } from './ChartAreaInteractive.constants.js';
+import { encodeDragTimeRange } from './ChartAreaInteractive.helpers.js';
+import S from './TimeRangeBrushLayer.styl.js';
+import { BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS, BRUSH_MIN_DRAG_PX, brushClientXToDate, BRUSH_DOUBLE_TAP_MS, BRUSH_DOUBLE_TAP_MAX_DIST_PX, measureBrushPlotLayout, brushPlotLayoutsEqual } from './TimeRangeBrushLayout.helpers.js';
+import { resolveChartMargin } from '../Chart/tools/chartPlotGeometry.js';
+
+/**
+ * Wraps chart; pointerdown on SVG starts horizontal brush. Plot box tracks the
+ * painted grid / Recharts plot (see TimeRangeBrushLayout.helpers).
+ */
+function TimeRangeBrushHost({ chartData, onTimeRangeChange, enabled, layoutKey, children, }) {
+    const hostRef = useRef(null);
+    const plotRef = useRef(null);
+    const lastUpRef = useRef(null);
+    const dragPointerIdRef = useRef(null);
+    const startClientXRef = useRef(0);
+    const chartDataRef = useRef(chartData);
+    const onTimeRangeChangeRef = useRef(onTimeRangeChange);
+    const lastLayoutRef = useRef(null);
+    chartDataRef.current = chartData;
+    onTimeRangeChangeRef.current = onTimeRangeChange;
+    const moveRef = useRef(() => { });
+    const upRef = useRef(() => { });
+    const onMoveStableRef = useRef((e) => moveRef.current(e));
+    const onUpStableRef = useRef((e) => upRef.current(e));
+    const [band, setBand] = useState(null);
+    const [plotLayout, setPlotLayout] = useState(null);
+    useLayoutEffect(() => {
+        if (!enabled) {
+            lastLayoutRef.current = null;
+            setPlotLayout(null);
+            return;
+        }
+        const host = hostRef.current;
+        if (!host)
+            return;
+        const margin = resolveChartMargin(CHART_MARGINS);
+        let raf = 0;
+        let wrapperRo = null;
+        let observedWrapper = null;
+        const commitLayout = (next) => {
+            if (brushPlotLayoutsEqual(next, lastLayoutRef.current))
+                return;
+            lastLayoutRef.current = next;
+            setPlotLayout(next);
+        };
+        const runSync = () => {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(() => {
+                const h = hostRef.current;
+                if (!h) {
+                    commitLayout(null);
+                    return;
+                }
+                const wrappers = h.querySelectorAll('.recharts-wrapper');
+                const wrapper = wrappers[wrappers.length - 1];
+                if (!(wrapper instanceof HTMLElement)) {
+                    if (wrapperRo) {
+                        wrapperRo.disconnect();
+                        wrapperRo = null;
+                    }
+                    observedWrapper = null;
+                    commitLayout(null);
+                    return;
+                }
+                if (wrapper !== observedWrapper) {
+                    if (wrapperRo) {
+                        wrapperRo.disconnect();
+                        wrapperRo = null;
+                    }
+                    observedWrapper = wrapper;
+                    wrapperRo = new ResizeObserver(() => runSync());
+                    wrapperRo.observe(wrapper);
+                }
+                let next = measureBrushPlotLayout(h, margin);
+                if (!next) {
+                    requestAnimationFrame(() => {
+                        const h2 = hostRef.current;
+                        if (!h2) {
+                            commitLayout(null);
+                            return;
+                        }
+                        commitLayout(measureBrushPlotLayout(h2, margin));
+                    });
+                    return;
+                }
+                commitLayout(next);
+            });
+        };
+        const debouncedWindowResize = debounce(runSync, BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS, { leading: false });
+        runSync();
+        const roHost = new ResizeObserver(() => runSync());
+        roHost.observe(host);
+        const mo = new MutationObserver(() => runSync());
+        mo.observe(host, { childList: true, subtree: true });
+        window.addEventListener('resize', debouncedWindowResize);
+        return () => {
+            cancelAnimationFrame(raf);
+            debouncedWindowResize.cancel();
+            roHost.disconnect();
+            mo.disconnect();
+            wrapperRo?.disconnect();
+            window.removeEventListener('resize', debouncedWindowResize);
+        };
+    }, [enabled, chartData.length, layoutKey]);
+    useLayoutEffect(() => {
+        moveRef.current = (e) => {
+            if (e.pointerId !== dragPointerIdRef.current)
+                return;
+            const plot = plotRef.current?.getBoundingClientRect();
+            if (!plot)
+                return;
+            const x0 = startClientXRef.current;
+            const x1 = e.clientX;
+            const left = Math.min(x0, x1);
+            const right = Math.max(x0, x1);
+            const leftClamped = Math.max(plot.left, Math.min(plot.right, left));
+            const rightClamped = Math.max(plot.left, Math.min(plot.right, right));
+            setBand({
+                left: leftClamped - plot.left,
+                width: Math.max(0, rightClamped - leftClamped),
+            });
+        };
+        upRef.current = (e) => {
+            if (e.pointerId !== dragPointerIdRef.current)
+                return;
+            const mv = onMoveStableRef.current;
+            const up = onUpStableRef.current;
+            if (mv)
+                window.removeEventListener('pointermove', mv);
+            if (up) {
+                window.removeEventListener('pointerup', up);
+                window.removeEventListener('pointercancel', up);
+            }
+            dragPointerIdRef.current = null;
+            const data = chartDataRef.current;
+            const plot = plotRef.current?.getBoundingClientRect();
+            const span = Math.abs(e.clientX - startClientXRef.current);
+            let committed = false;
+            if (plot && data.length > 1 && span >= BRUSH_MIN_DRAG_PX) {
+                const d0 = brushClientXToDate(startClientXRef.current, plot, data);
+                const d1 = brushClientXToDate(e.clientX, plot, data);
+                if (d0 && d1) {
+                    onTimeRangeChangeRef.current(encodeDragTimeRange(d0, d1));
+                    committed = true;
+                }
+            }
+            setBand(null);
+            if (committed) {
+                lastUpRef.current = null;
+                return;
+            }
+            const now = performance.now();
+            const prev = lastUpRef.current;
+            if (prev &&
+                now - prev.t <= BRUSH_DOUBLE_TAP_MS &&
+                Math.hypot(e.clientX - prev.x, e.clientY - prev.y) <=
+                    BRUSH_DOUBLE_TAP_MAX_DIST_PX) {
+                onTimeRangeChangeRef.current('All');
+                lastUpRef.current = null;
+            }
+            else {
+                lastUpRef.current = { t: now, x: e.clientX, y: e.clientY };
+            }
+        };
+    }, []);
+    const onPointerDown = (e) => {
+        if (!enabled || e.button !== 0)
+            return;
+        if (e.target.tagName !== 'svg')
+            return;
+        if (chartData.length < 2)
+            return;
+        dragPointerIdRef.current = e.pointerId;
+        startClientXRef.current = e.clientX;
+        const plot = plotRef.current?.getBoundingClientRect();
+        if (plot) {
+            const x = Math.max(plot.left, Math.min(plot.right, e.clientX));
+            setBand({ left: x - plot.left, width: 0 });
+        }
+        window.addEventListener('pointermove', onMoveStableRef.current);
+        window.addEventListener('pointerup', onUpStableRef.current);
+        window.addEventListener('pointercancel', onUpStableRef.current);
+    };
+    if (!enabled) {
+        return jsx(Fragment, { children: children });
+    }
+    const plotBoxStyle = plotLayout && plotLayout.width > 0 && plotLayout.height > 0
+        ? {
+            position: 'absolute',
+            zIndex: 8,
+            pointerEvents: 'none',
+            left: plotLayout.left,
+            top: plotLayout.top,
+            width: plotLayout.width,
+            height: plotLayout.height,
+        }
+        : { display: 'none' };
+    return (jsxs("div", { ref: hostRef, className: S.host, onPointerDown: onPointerDown, children: [children, jsx("div", { ref: plotRef, className: S.plotBox, style: plotBoxStyle, "aria-hidden": true, children: band != null && band.width > 0 && (jsx("div", { className: S.selection, style: { left: band.left, width: band.width } })) })] }));
+}
+
+export { TimeRangeBrushHost };

package/dist/esm/components/ui/ChartAreaInteractive/TimeRangeBrushLayer.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".TimeRangeBrushLayer_selection__X7h7U{background-color:var(--brand-color-500);border:1px solid var(--ring);bottom:0;box-sizing:border-box;opacity:.1;pointer-events:none;position:absolute;top:0}.TimeRangeBrushLayer_host__aAQTn{overflow:visible;position:relative;touch-action:pan-y;width:100%}.TimeRangeBrushLayer_plotBox__YRfgK{box-sizing:border-box;pointer-events:none;position:absolute;z-index:8}";
+var S = {"selection":"TimeRangeBrushLayer_selection__X7h7U","host":"TimeRangeBrushLayer_host__aAQTn","plotBox":"TimeRangeBrushLayer_plotBox__YRfgK"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/ChartAreaInteractive/TimeRangeBrushLayout.helpers.js

@@ -0,0 +1,37 @@
+import { measureHostRelativePlotRect } from '../Chart/tools/chartPlotGeometry.js';
+export { resolveChartMargin } from '../Chart/tools/chartPlotGeometry.js';
+
+/** Debounce for `window` resize only (RO uses rAF-coalesced sync). */
+const BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS = 500;
+const BRUSH_MIN_DRAG_PX = 8;
+const BRUSH_DOUBLE_TAP_MS = 300;
+const BRUSH_DOUBLE_TAP_MAX_DIST_PX = 24;
+/** Host-relative plot rect (grid-first, then wrapper + margins). */
+const measureBrushPlotLayout = measureHostRelativePlotRect;
+function brushPlotLayoutsEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return (a.left === b.left &&
+        a.top === b.top &&
+        a.width === b.width &&
+        a.height === b.height);
+}
+function brushClientXToDate(clientX, plotRect, chartData) {
+    if (!chartData.length || plotRect.width <= 0)
+        return null;
+    const rel = clientX - plotRect.left;
+    const pct = Math.max(0, Math.min(100, (rel / plotRect.width) * 100));
+    const n = chartData.length;
+    if (n === 1) {
+        const d = chartData[0]?.date;
+        return d ? new Date(d) : null;
+    }
+    const idx = Math.round((pct / 100) * (n - 1));
+    const clamped = Math.max(0, Math.min(n - 1, idx));
+    const raw = chartData[clamped]?.date;
+    return raw ? new Date(raw) : null;
+}
+
+export { BRUSH_DOUBLE_TAP_MAX_DIST_PX, BRUSH_DOUBLE_TAP_MS, BRUSH_LAYOUT_RESIZE_DEBOUNCE_MS, BRUSH_MIN_DRAG_PX, brushClientXToDate, brushPlotLayoutsEqual, measureBrushPlotLayout };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/IntervalsOverlay/IntervalsOverlay.hooks.js

@@ -76,6 +76,7 @@ function useQuantileButton({ buttonRef, overlayContainerRef, quantiles, selected
         onQuantileChange,
     ]);
     const handleDragStart = useCallback((e) => {
+        e.stopPropagation();
         setIsDragging(true);
         if (buttonRef.current) {
             buttonRef.current.style.transition = 'none';