@sybilion/uilib 1.2.26 → 1.3.1

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';

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

@@ -6,23 +6,19 @@ import 'recharts';
 import '../../../Chart/Chart.context.js';
 import '../../../Chart/Chart.styl.js';
 import { useDebounceCallback } from '../../../../../hooks/useDebounceCallback.js';
-import useElemDrag from '../../../../../hooks/useDragElem.js';
 import { ChevronsLeftRight } from 'lucide-react';
 import S from '../../ChartAreaInteractive.styl.js';
 import { useChartYRange } from '../useChartYRange.js';
 import S$1 from './PinOverlay.styl.js';
 
-function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange, className, }) {
+function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange: _onPreviewMonthChange, className, }) {
     const { chartData } = baseChartProps;
     const chartRef = useRef(null);
     const pinRef = useRef(null);
     const pinPlaceholderRef = useRef(null);
     const pinContainerRef = useRef(null);
-    const [isDraggingPin, setIsDraggingPin] = useState(false);
-    const [isPinAnimating, setIsPinAnimating] = useState(true);
     const [isPinHovered, setIsPinHovered] = useState(false);
     const pinPosRef = useRef(0);
-    const containerRectRef = useRef(null);
     const currPinMonthRef = useRef(pinMonth);
     const debouncedOnPinMonthChange = useDebounceCallback((...args) => onPinMonthChange?.(args[0]), 500, [onPinMonthChange]);
     const { yMin, yMax } = useChartYRange({
@@ -38,7 +34,6 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             pinPlaceholderRef.current.style.left = `${position}%`;
         }
     };
-    // Get full month and year for pin position to send to parent component
     const getPinMonthAndYear = (position) => {
         if (!chartData.length)
             return null;
@@ -54,18 +49,15 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             return `${month} ${year}`;
         }
     };
-    // Handle chart click to move pin to specific position
     const snapPinToPosition = (eventX, needMonthUpdate = true, immediateMonthUpdate = false) => {
         if (!pinContainerRef.current || !chartData.length)
             return;
         const pinContainerRect = pinContainerRef.current.getBoundingClientRect();
         const effectiveLeft = pinContainerRect.left;
         const effectiveWidth = pinContainerRect.width;
-        // Calculate relative position within plotted area
         const relativeX = eventX - effectiveLeft;
         const rawPercentage = effectiveWidth > 0 ? (relativeX / effectiveWidth) * 100 : 0;
         const percentage = Math.max(0, Math.min(100, isNaN(rawPercentage) ? 0 : rawPercentage));
-        // Snap to nearest data point
         const totalPoints = chartData.length;
         if (totalPoints > 1) {
             const nearestIndex = Math.round((percentage / 100) * (totalPoints - 1));
@@ -73,13 +65,11 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             const snappedPercentage = (clampedIndex / (totalPoints - 1)) * 100;
             setPinPosition(isNaN(snappedPercentage) ? 0 : snappedPercentage);
             if (needMonthUpdate) {
-                // Update news for all months (historical and forecast)
                 const monthAndYear = getPinMonthAndYear();
                 if (monthAndYear) {
                     const isNewMonth = monthAndYear !== currPinMonthRef.current;
                     if (isNewMonth)
                         currPinMonthRef.current = monthAndYear;
-                    // When immediate (e.g. dragEnd), always notify parent so showFutureOutlook is correct
                     if (immediateMonthUpdate) {
                         onPinMonthChange?.(monthAndYear);
                     }
@@ -90,11 +80,9 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             }
         }
     };
-    // Update pin position when pinMonth prop changes
     useEffect(() => {
         if (!pinMonth || !chartData.length)
             return;
-        // Find the data point index for the given month
         const dataPointIndex = chartData.findIndex(point => {
             const date = new Date(point.date);
             const month = date.toLocaleDateString('en-US', { month: 'short' });
@@ -109,57 +97,16 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             currPinMonthRef.current = pinMonth;
         }
     }, [pinMonth, chartData]);
-    useElemDrag({
-        elem: [chartRef],
-        onDragStart: () => {
-            setIsDraggingPin(true);
-            containerRectRef.current =
-                pinContainerRef.current?.getBoundingClientRect() || null;
-        },
-        onDrag: (delta) => {
-            if (pinRef.current) {
-                const containerRect = containerRectRef.current;
-                if (!containerRect)
-                    return;
-                const pinCurrentLeft = (pinPosRef.current / 100) * containerRect.width;
-                const leftLimit = -pinCurrentLeft;
-                const rightLimit = containerRect.width - pinCurrentLeft;
-                const clampedDeltaX = Math.max(leftLimit, Math.min(rightLimit, delta.x));
-                setIsPinAnimating(false);
-                pinRef.current.style.transform = `translateX(${clampedDeltaX}px)`;
-                // Calculate preview month based on current drag position
-                if (onPreviewMonthChange && chartData.length > 0) {
-                    const newPositionPixels = pinCurrentLeft + clampedDeltaX;
-                    const newPercentage = (newPositionPixels / containerRect.width) * 100;
-                    const clampedPercentage = Math.max(0, Math.min(100, newPercentage));
-                    const previewMonth = getPinMonthAndYear(clampedPercentage);
-                    if (previewMonth) {
-                        onPreviewMonthChange(previewMonth);
-                    }
-                }
-            }
-        },
-        onDragEnd: (e) => {
-            setIsDraggingPin(false);
-            setTimeout(() => setIsPinAnimating(true), 200);
-            if (pinRef.current)
-                pinRef.current.style.transform = '';
-            // Snap first so onPinMonthChange runs before we clear preview (avoids showFutureOutlook fallback)
-            snapPinToPosition(e.clientX, true, true);
-            if (onPreviewMonthChange) {
-                onPreviewMonthChange(undefined);
-            }
-        },
-    });
-    const onPointerDown = (e) => {
-        if (e.target.tagName !== 'svg')
+    const onChartClick = (e) => {
+        if (e.button !== 0)
+            return;
+        const target = e.target;
+        if (!target.closest?.('svg'))
             return;
         snapPinToPosition(e.clientX, true, false);
     };
     const overlay = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.overlay, S$1.pinContainer), ref: pinContainerRef, children: jsx("div", { className: S$1.pinLineBase, style: { left: `${pinPosRef.current}%` }, ref: pinRef, children: jsx("div", { className: S$1.pinButton, "aria-label": "News pin", title: `Current month: ${getPinMonthAndYear() || 'Loading...'}`, children: jsx(ChevronsLeftRight, { className: S$1.pinIcon, "aria-hidden": "true" }) }) }) }), jsx("div", { className: S$1.pinPlaceholder, style: { left: `${pinPosRef.current}%` }, ref: pinPlaceholderRef, onPointerEnter: () => setIsPinHovered(true), onPointerLeave: () => setIsPinHovered(false) })] }));
-    return (jsx("div", { className: cn(className, S$1.root, isDraggingPin && S$1.pinDragging, isPinAnimating && S$1.pinAnimating, isPinHovered && S$1.pinHovered), onPointerDown: onPointerDown, 
-        // onClick={e => snapPinToPosition(e.clientX)}
-        ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
+    return (jsx("div", { className: cn(className, S$1.root, S$1.pinAnimating, isPinHovered && S$1.pinHovered), onClick: onChartClick, ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
 }
 
 export { PinOverlay };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background-alpha-700)}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:grab;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinButton__cnV1K{transition:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:grab;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
-var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinDragging":"PinOverlay_pinDragging__gu3xp","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
+var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:pointer;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:pointer;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
+var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -70,6 +70,7 @@ function useThresholdButton({ lineRef, overlayContainerRef, initialValue, minVal
         onValueChangeThrottled(clampedValue);
     }, [clientYToValue, valueToPercent, minValue, maxValue]);
     const handleDragStart = useCallback((e) => {
+        e.stopPropagation();
         initialValueRef.current = initialValue;
         startYRef.current = e.clientY;
         setIsDragging(true);

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

@@ -15,11 +15,9 @@ function useChartYRange({ baseChartProps, chartData, disableRescaleWhenQuantileC
             Object.entries(point).forEach(([key, value]) => {
                 if (key === 'date')
                     return;
-                // When selectedForecastId is provided, scale only from selected forecast + its quantile band
-                // (exclude historical, other forecasts, and other forecasts' quantile values)
+                // When selectedForecastId is provided, scale from historical + selected forecast + its
+                // quantile band (exclude other forecasts and their quantile values only).
                 if (forecastId !== undefined) {
-                    if (key === 'historical')
-                        return;
                     if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
                         return;
                     // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles

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

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { applyQuantileBandConeToChartData } from '../../Chart/quantileBandConeChartData.js';
 
 /**
  * Hook to transform chart data and create quantile band configuration
@@ -12,128 +13,29 @@ function useQuantileBands({ color, chartData, selectedForecastId, forecastData,
         const forecastDataForSelected = forecastData[selectedForecastId];
         const allQuantilesData = forecastDataForSelected.allQuantiles;
         const clonedData = [...chartData];
-        // Get forecast dates to map quantile array indices correctly
         const forecastDates = forecastDataForSelected.dates || [];
         const forecastDatesSet = new Set(forecastDates);
-        // Find the last historical point for connection
-        const historicalPoints = clonedData.filter(point => point.historical !== undefined);
-        const lastHistoricalPoint = historicalPoints.length > 0
-            ? historicalPoints[historicalPoints.length - 1]
-            : null;
-        const lastHistoricalDate = lastHistoricalPoint?.date;
-        const lastHistoricalValue = lastHistoricalPoint?.historical;
-        // Get first forecast date
-        const firstForecastDate = forecastDates[0];
-        const firstForecastDateObj = firstForecastDate
-            ? new Date(firstForecastDate)
-            : null;
-        const lastHistoricalDateObj = lastHistoricalDate
-            ? new Date(lastHistoricalDate)
-            : null;
-        // Check if there's a gap between historical and forecast data (forecast starts after historical)
-        const hasGap = lastHistoricalDate &&
-            firstForecastDate &&
-            lastHistoricalValue !== undefined &&
-            firstForecastDateObj &&
-            lastHistoricalDateObj &&
-            firstForecastDateObj.getTime() > lastHistoricalDateObj.getTime();
-        // Check if forecast starts before or at last historical point (need bridge point)
-        const needsBridgePoint = lastHistoricalDate &&
-            firstForecastDate &&
-            lastHistoricalValue !== undefined &&
-            firstForecastDateObj &&
-            lastHistoricalDateObj &&
-            firstForecastDateObj.getTime() <= lastHistoricalDateObj.getTime();
-        // Find bridge point when forecast starts before or at last historical point
-        let bridgePoint = null;
-        let pointBeforeForecast = null;
-        if (needsBridgePoint && historicalPoints.length > 0) {
-            // Find the last historical point before or at the first forecast date
-            // If dates are equal, use lastHistoricalPoint; otherwise find the point before
-            bridgePoint =
-                firstForecastDateObj &&
-                    lastHistoricalDateObj &&
-                    firstForecastDateObj.getTime() === lastHistoricalDateObj.getTime()
-                    ? lastHistoricalPoint
-                    : [...historicalPoints]
-                        .reverse()
-                        .find(p => firstForecastDateObj &&
-                        new Date(p.date).getTime() < firstForecastDateObj.getTime()) || lastHistoricalPoint;
-            // Find the actual point BEFORE the first forecast date for connection
-            if (firstForecastDateObj) {
-                pointBeforeForecast = [...historicalPoints].findLast(p => new Date(p.date).getTime() < firstForecastDateObj.getTime());
-            }
-        }
-        // Create a map from date to quantile array index
         const dateToQuantileIndex = new Map();
         forecastDates.forEach((date, index) => {
             dateToQuantileIndex.set(date, index);
         });
-        const result = clonedData.map(point => {
+        const withRawBands = clonedData.map(point => {
             const newPoint = { ...point };
-            // If there's a gap and this is the last historical point, add band data for connection
-            if (hasGap &&
-                point.date === lastHistoricalDate &&
-                lastHistoricalValue !== undefined) {
-                // Set zero-width band at the last historical value for visual connection
-                newPoint[bandKey] = [lastHistoricalValue, lastHistoricalValue];
-            }
-            // If forecast starts before or at last historical point, add bridge point connection
-            // Set connection band at the point BEFORE the first forecast date (if exists)
-            const isBridgePointDate = needsBridgePoint &&
-                bridgePoint &&
-                bridgePoint.historical !== undefined &&
-                point.date === bridgePoint.date;
-            const isPointBeforeForecast = needsBridgePoint &&
-                pointBeforeForecast &&
-                pointBeforeForecast.historical !== undefined &&
-                point.date === pointBeforeForecast.date;
-            const isAlsoForecastDate = forecastDatesSet.has(point.date);
-            // Set zero-width connection band at the point BEFORE forecast starts
-            if (isPointBeforeForecast && !isAlsoForecastDate) {
-                newPoint[bandKey] = [
-                    pointBeforeForecast.historical,
-                    pointBeforeForecast.historical,
-                ];
-            }
-            else if (isBridgePointDate && !isAlsoForecastDate) {
-                // Fallback: if no point before forecast, use bridge point
-                newPoint[bandKey] = [
-                    bridgePoint.historical,
-                    bridgePoint.historical,
-                ];
-            }
-            // Only update band data for forecast dates
             if (forecastDatesSet.has(point.date)) {
                 const quantileIndex = dateToQuantileIndex.get(point.date);
                 if (quantileIndex !== undefined) {
                     const bandValues = getBandValues(point.date, quantileIndex, allQuantilesData);
                     if (bandValues) {
-                        // If this is also the bridge point (forecast starts at same date as last historical),
-                        // start the band from the historical value for smooth connection
-                        const isBridgePointDate = needsBridgePoint &&
-                            bridgePoint &&
-                            point.date === bridgePoint.date &&
-                            bridgePoint.historical !== undefined;
-                        if (isBridgePointDate && quantileIndex === 0) {
-                            // Start from historical value, expand to forecast upper bound
-                            newPoint[bandKey] = [bridgePoint.historical, bandValues[1]];
-                        }
-                        else {
-                            newPoint[bandKey] = bandValues;
-                        }
+                        newPoint[bandKey] = bandValues;
                     }
                     else {
-                        // Remove band data if values don't exist
                         delete newPoint[bandKey];
                     }
                 }
             }
-            // For non-forecast dates, preserve existing band data if it exists
-            // This ensures continuity of the band visualization
             return newPoint;
         });
-        return result;
+        return applyQuantileBandConeToChartData(withRawBands, bandKey);
     }, [chartData, selectedForecastId, forecastData, bandKey, getBandValues]);
     const quantileBands = useMemo(() => {
         if (!selectedForecastId || !forecastData[selectedForecastId]) {

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

@@ -5,9 +5,14 @@ import { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup.js';
 import { TIME_RANGES } from './TimeRangeControls.constants.js';
 import S from './TimeRangeControls.styl.js';
 
-const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: timeRange, onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
+function toggleValueForTimeRange(timeRange) {
+    return TIME_RANGES.includes(timeRange)
+        ? timeRange
+        : '';
+}
+const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: toggleValueForTimeRange(timeRange), onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
 TimeRangeControls.displayName = 'TimeRangeControls';
-const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: timeRange, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
+const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: toggleValueForTimeRange(timeRange) || undefined, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
 TimeRangeSelect.displayName = 'TimeRangeSelect';
 
 export { TimeRangeControls, TimeRangeSelect };

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './WorldMap.styl.js';
+import mapBgUrl from './map.svg.js';
+
+function WorldMap({ className }) {
+    const src = mapBgUrl;
+    return (jsx("img", { alt: "", className: cn(S.worldMap, className), decoding: "async", draggable: false, src: src }));
+}
+
+export { WorldMap };

package/dist/esm/components/ui/WorldMap/WorldMap.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".WorldMap_worldMap__XTiex{aspect-ratio:623.2/341.276;display:block;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}";
+var S = {"worldMap":"WorldMap_worldMap__XTiex"};
+styleInject(css_248z);
+
+export { S as default };