@sybilion/uilib 1.0.20

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

@@ -0,0 +1,113 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import useElemDrag from '../../../../../hooks/useDragElem.js';
+import { useThrottledCallback } from '../../../../../hooks/useThrottledCallback.js';
+
+function useThresholdButton({ lineRef, overlayContainerRef, initialValue, minValue, maxValue, yMin, yMax, onValueChange, discreteValues, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const initialValueRef = useRef(initialValue);
+    const startYRef = useRef(0);
+    const onValueChangeThrottled = useThrottledCallback(onValueChange, 50);
+    const percentToValue = useCallback((percent) => {
+        const normalized = 1 - percent / 100;
+        return yMin + normalized * (yMax - yMin);
+    }, [yMin, yMax]);
+    const valueToPercent = useCallback((value) => {
+        const normalized = (value - yMin) / (yMax - yMin);
+        return Math.max(0, Math.min(100, (1 - normalized) * 100));
+    }, [yMin, yMax]);
+    const minPercent = valueToPercent(maxValue);
+    const maxPercent = valueToPercent(minValue);
+    const clientYToValue = useCallback((clientY) => {
+        if (!overlayContainerRef.current)
+            return initialValueRef.current;
+        const rect = overlayContainerRef.current.getBoundingClientRect();
+        const relativeY = clientY - rect.top;
+        const rawPercent = (relativeY / rect.height) * 100;
+        const clampedPercent = Math.max(minPercent, Math.min(maxPercent, rawPercent));
+        const value = Math.max(minValue, Math.min(maxValue, percentToValue(clampedPercent)));
+        return value;
+    }, [
+        overlayContainerRef,
+        percentToValue,
+        minPercent,
+        maxPercent,
+        minValue,
+        maxValue,
+    ]);
+    const setLinePosition = percent => {
+        if (lineRef.current) {
+            lineRef.current.style.top = `${percent}%`;
+        }
+    };
+    // Helper function to find closest discrete value
+    const findClosestDiscreteValue = useCallback((value, discreteValues) => {
+        if (discreteValues.length === 0)
+            return value;
+        let closest = discreteValues[0];
+        let minDiff = Math.abs(discreteValues[0] - value);
+        for (const discreteValue of discreteValues) {
+            const diff = Math.abs(discreteValue - value);
+            if (diff < minDiff) {
+                minDiff = diff;
+                closest = discreteValue;
+            }
+        }
+        return closest;
+    }, []);
+    // Sync button position when initialValue changes (outside of drag)
+    useEffect(() => {
+        if (!isDragging && lineRef.current) {
+            const clampedValue = Math.max(minValue, Math.min(maxValue, initialValue));
+            const percent = valueToPercent(clampedValue);
+            setLinePosition(percent);
+        }
+    }, [initialValue, isDragging, lineRef, minValue, maxValue, valueToPercent]);
+    const handleDrag = useCallback((delta, e) => {
+        const newValue = clientYToValue(e.clientY);
+        const clampedValue = Math.max(minValue, Math.min(maxValue, newValue));
+        const percent = valueToPercent(clampedValue);
+        setLinePosition(percent);
+        onValueChangeThrottled(clampedValue);
+    }, [clientYToValue, valueToPercent, minValue, maxValue]);
+    const handleDragStart = useCallback((e) => {
+        initialValueRef.current = initialValue;
+        startYRef.current = e.clientY;
+        setIsDragging(true);
+    }, [initialValue]);
+    const handleDragEnd = useCallback((e) => {
+        const finalValue = clientYToValue(e.clientY);
+        let clampedValue = Math.max(minValue, Math.min(maxValue, finalValue));
+        // Snap to nearest discrete value if provided (only values within bounds)
+        if (discreteValues && discreteValues.length > 0) {
+            const validDiscreteValues = discreteValues.filter(v => v >= minValue && v <= maxValue);
+            if (validDiscreteValues.length > 0) {
+                clampedValue = findClosestDiscreteValue(clampedValue, validDiscreteValues);
+            }
+            clampedValue = Math.max(minValue, Math.min(maxValue, clampedValue));
+            const percent = valueToPercent(clampedValue);
+            setLinePosition(percent);
+        }
+        // Update React state for persistence
+        onValueChange(clampedValue);
+        setIsDragging(false);
+    }, [
+        overlayContainerRef,
+        clientYToValue,
+        minValue,
+        maxValue,
+        onValueChange,
+        discreteValues,
+        findClosestDiscreteValue,
+        valueToPercent,
+    ]);
+    useElemDrag({
+        elem: lineRef,
+        onDrag: handleDrag,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        isActive: true,
+    });
+    return { isDragging };
+}
+
+export { useThresholdButton };

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

@@ -0,0 +1,114 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef, useCallback } from 'react';
+import { BaseChartWrapper } from '../../../Chart/components/BaseChartWrapper.js';
+import 'recharts';
+import 'classnames';
+import '../../../Chart/Chart.context.js';
+import '../../../Chart/Chart.styl.js';
+import { DraggingButton } from '../../../DraggingButton/DraggingButton.js';
+import { formatQuantileRangeLabel } from '../../../../../utils/quantileFormat.js';
+import { ChevronsUpDown } from 'lucide-react';
+import SI from '../IntervalsOverlay/IntervalsOverlay.styl.js';
+import { useChartYRange } from '../useChartYRange.js';
+import { useForecastColor } from '../useForecastColor.js';
+import { useQuantileBands } from '../useQuantileBands.js';
+import { useThresholdButton } from './ThresholdsOverlay.hooks.js';
+import S from './ThresholdsOverlay.styl.js';
+
+function ThresholdsOverlay({ baseChartProps, selectedForecast, className, lowerThreshold = 0, upperThreshold = 0, onLowerThresholdChange, onUpperThresholdChange, discreteThresholdValues, overlayForecastData: forecastData, }) {
+    // Discover available quantiles dynamically
+    const availableQuantiles = useMemo(() => {
+        if (!selectedForecast?.id || !forecastData[selectedForecast.id]) {
+            return null;
+        }
+        const forecastDataForSelected = forecastData[selectedForecast.id];
+        const allQuantiles = forecastDataForSelected.allQuantiles;
+        if (!allQuantiles) {
+            return null;
+        }
+        const keys = Object.keys(allQuantiles);
+        const sortedKeys = keys.map(Number).sort((a, b) => a - b);
+        return {
+            lowerQuantiles: sortedKeys.filter(q => q < 0.5).map(String),
+            upperQuantiles: sortedKeys.filter(q => q > 0.5).map(String),
+            allQuantiles: sortedKeys.map(String),
+            medianQuantile: sortedKeys.find(q => q === 0.5)?.toString() || null,
+            lowestQuantile: sortedKeys[0]?.toString() || null,
+            highestQuantile: sortedKeys[sortedKeys.length - 1]?.toString() || null,
+        };
+    }, [selectedForecast?.id, forecastData]);
+    // Refs
+    const overlayContainerRef = useRef(null);
+    const lineRef = useRef(null);
+    // Transform chart data with quantile band - needed before useChartYRange
+    const bandKey = selectedForecast?.id
+        ? `band_10_90_${selectedForecast.id}`
+        : 'band_10_90';
+    const getBandValues = useCallback((date, dateIndex, allQuantiles) => {
+        if (!availableQuantiles ||
+            !availableQuantiles.lowestQuantile ||
+            !availableQuantiles.highestQuantile) {
+            return null;
+        }
+        const lowerValue = allQuantiles[availableQuantiles.lowestQuantile]?.[dateIndex];
+        const upperValue = allQuantiles[availableQuantiles.highestQuantile]?.[dateIndex];
+        if (lowerValue !== undefined &&
+            upperValue !== undefined &&
+            typeof lowerValue === 'number' &&
+            typeof upperValue === 'number') {
+            return [lowerValue, upperValue];
+        }
+        return null;
+    }, [availableQuantiles]);
+    const { quantileBandColor } = useForecastColor(selectedForecast, baseChartProps.forecastData);
+    const getBandConfig = useCallback((bk) => {
+        const lowerQuantile = availableQuantiles?.lowestQuantile || '0.1';
+        const upperQuantile = availableQuantiles?.highestQuantile || '0.9';
+        return {
+            key: bk,
+            quantiles: [lowerQuantile, upperQuantile],
+            opacity: 0.15,
+            color: quantileBandColor,
+            name: formatQuantileRangeLabel(lowerQuantile, upperQuantile),
+            type: 'monotone',
+        };
+    }, [quantileBandColor, availableQuantiles]);
+    const { transformedChartData, quantileBands } = useQuantileBands({
+        chartData: baseChartProps.chartData,
+        selectedForecastId: selectedForecast?.id,
+        forecastData,
+        bandKey,
+        getBandValues,
+        getBandConfig,
+    });
+    const { yMin, yMax } = useChartYRange({
+        baseChartProps,
+        chartData: transformedChartData,
+        selectedForecastId: selectedForecast?.id,
+    });
+    // Full chart range for threshold drag
+    const boundaryConstraints = useMemo(() => ({ upperMin: yMin, upperMax: yMax }), [yMin, yMax]);
+    // Convert value to percentage position
+    useCallback((value) => {
+        const normalized = (value - yMin) / (yMax - yMin);
+        const percent = Math.max(0, Math.min(100, (1 - normalized) * 100));
+        return `${percent}%`;
+    }, [yMin, yMax]);
+    // Use threshold button hooks
+    const upperButton = useThresholdButton({
+        lineRef,
+        overlayContainerRef,
+        initialValue: upperThreshold,
+        minValue: boundaryConstraints.upperMin,
+        maxValue: boundaryConstraints.upperMax,
+        yMin,
+        yMax,
+        onValueChange: onUpperThresholdChange || (() => { }),
+        discreteValues: discreteThresholdValues?.upper,
+    });
+    // Render overlay elements - always render container, conditionally render buttons
+    const overlay = (jsx("div", { ref: overlayContainerRef, className: SI.root, children: jsx("div", { className: S.line, ref: lineRef, children: jsx(DraggingButton, { size: "md", left: "50%", icon: jsx(ChevronsUpDown, { size: 16 }), title: `Upper threshold: ${upperThreshold.toFixed(2)}`, isDragging: upperButton.isDragging, className: S.centeredButton }) }) }));
+    return (jsx("div", { className: className, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, showTooltip: !upperButton.isDragging, autoScaleYAxis: false, chartData: transformedChartData, quantileBands: quantileBands, overlayElements: overlay }) }));
+}
+
+export { ThresholdsOverlay };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".ThresholdsOverlay_line__L-3vC,.ThresholdsOverlay_line__L-3vC:before{height:1px;left:0;position:absolute;width:100%}.ThresholdsOverlay_line__L-3vC:before{background-color:var(--brand-color-400);content:\"\";pointer-events:none;z-index:4}.ThresholdsOverlay_centeredButton__4ICvp{transform:translate(-50%,-50%)!important}";
+var S = {"line":"ThresholdsOverlay_line__L-3vC","centeredButton":"ThresholdsOverlay_centeredButton__4ICvp"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,155 @@
+import { useRef, useMemo } from 'react';
+
+/**
+ * Hook to calculate yMin and yMax from chart data
+ * Optionally includes quantile values from forecast data
+ */
+function useChartYRange({ baseChartProps, chartData, disableRescaleWhenQuantileChanges, excludeQuantileBands = false, selectedForecastId, }) {
+    // Store initial Y-range when disableRescaleWhenQuantileChanges is true
+    const stableYRangeRef = useRef(null);
+    const prevBaseChartDataRef = useRef(baseChartProps.chartData);
+    // Helper function to calculate Y-range from data
+    const calculateYRange = (dataToUse, excludeQuantileBands, forecastId) => {
+        const allValues = [];
+        dataToUse.forEach(point => {
+            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)
+                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
+                    if (key.startsWith('q') && !key.endsWith(`_${forecastId}`))
+                        return;
+                }
+                // When excludeQuantileBands is true, exclude:
+                // 1. Quantile band arrays ([number, number])
+                // 2. Individual quantile values (q{quantile}_{analysisId} properties)
+                // Only include historical and forecast line values
+                if (excludeQuantileBands) {
+                    // Skip quantile band arrays
+                    if (Array.isArray(value) &&
+                        value.length === 2 &&
+                        typeof value[0] === 'number' &&
+                        typeof value[1] === 'number') {
+                        return;
+                    }
+                    // Skip individual quantile values (properties starting with 'q' followed by number/underscore)
+                    // Format: q{quantile}_{analysisId} (e.g., q0.05_123, q0.95_123)
+                    if (key.startsWith('q') && typeof value === 'number') {
+                        return;
+                    }
+                    // Include only historical and forecast line values
+                    if (typeof value === 'number') {
+                        allValues.push(value);
+                    }
+                    return;
+                }
+                // When not excluding, include both numbers and quantile band arrays
+                if (typeof value === 'number') {
+                    allValues.push(value);
+                }
+                else if (Array.isArray(value) &&
+                    value.length === 2 &&
+                    typeof value[0] === 'number' &&
+                    typeof value[1] === 'number') {
+                    allValues.push(value[0], value[1]);
+                }
+            });
+        });
+        if (allValues.length === 0) {
+            return { yMin: 0, yMax: 100 };
+        }
+        const min = Math.min(...allValues);
+        const max = Math.max(...allValues);
+        const diff = max - min;
+        return {
+            yMin: min - diff * 0.1,
+            yMax: max + diff * 0.1,
+        };
+    };
+    // When disableRescaleWhenQuantileChanges is true, calculate initial stable range
+    // If chartData (transformedChartData) is provided, use it WITH quantile bands for initial calculation
+    // Then keep it stable when dragging quantiles
+    const stableRange = useMemo(() => {
+        if (baseChartProps.yMin !== undefined &&
+            baseChartProps.yMax !== undefined) {
+            return {
+                yMin: baseChartProps.yMin,
+                yMax: baseChartProps.yMax,
+            };
+        }
+        if (!disableRescaleWhenQuantileChanges) {
+            return null;
+        }
+        // Reset stable range when dataset or selected forecast changes
+        if (prevBaseChartDataRef.current !== baseChartProps.chartData) {
+            prevBaseChartDataRef.current = baseChartProps.chartData;
+            stableYRangeRef.current = null;
+        }
+        if (stableYRangeRef.current?.forecastId !== selectedForecastId) {
+            stableYRangeRef.current = null;
+        }
+        // If chartData (transformedChartData) is provided, use it WITH quantile bands for initial calculation
+        // This ensures IntervalsOverlay includes quantile bands in Y-scale
+        const dataToUse = chartData ?? baseChartProps.chartData;
+        const shouldExcludeQuantileBands = chartData
+            ? false // Include quantile bands when using transformedChartData
+            : excludeQuantileBands || true; // Exclude when using baseChartProps.chartData
+        const result = calculateYRange(dataToUse, shouldExcludeQuantileBands, selectedForecastId);
+        // Store in ref on first calculation or after dataset/forecast change
+        if (!stableYRangeRef.current) {
+            stableYRangeRef.current = {
+                ...result,
+                forecastId: selectedForecastId,
+            };
+        }
+        return result;
+    }, [
+        baseChartProps.yMin,
+        baseChartProps.yMax,
+        baseChartProps.chartData,
+        chartData,
+        disableRescaleWhenQuantileChanges,
+        excludeQuantileBands,
+        selectedForecastId,
+    ]);
+    // When disableRescaleWhenQuantileChanges is false, calculate from transformed data
+    const dynamicRange = useMemo(() => {
+        if (baseChartProps.yMin !== undefined &&
+            baseChartProps.yMax !== undefined) {
+            return {
+                yMin: baseChartProps.yMin,
+                yMax: baseChartProps.yMax,
+            };
+        }
+        if (disableRescaleWhenQuantileChanges) {
+            return null;
+        }
+        const dataToUse = chartData ?? baseChartProps.chartData;
+        return calculateYRange(dataToUse, excludeQuantileBands, selectedForecastId);
+    }, [
+        baseChartProps.yMin,
+        baseChartProps.yMax,
+        baseChartProps.chartData,
+        chartData,
+        disableRescaleWhenQuantileChanges,
+        excludeQuantileBands,
+        selectedForecastId,
+    ]);
+    // Return appropriate range
+    if (disableRescaleWhenQuantileChanges) {
+        const cached = stableYRangeRef.current;
+        const cachedMatchesForecast = cached && cached.forecastId === selectedForecastId;
+        return cachedMatchesForecast
+            ? { yMin: cached.yMin, yMax: cached.yMax }
+            : (stableRange ?? { yMin: 0, yMax: 100 });
+    }
+    return dynamicRange;
+}
+
+export { useChartYRange };

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

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { DEFAULT_QUANTILE_BAND_COLOR } from '../../Chart/components/QuantileBands.js';
+import { FORECAST_LINE_COLORS, FORECAST_COLORS_MAP, getForecastQuantileBandColor } from '../ChartLines.js';
+
+const DEFAULT_FORECAST_COLORS = {
+    lineColor: DEFAULT_QUANTILE_BAND_COLOR,
+    quantileBandColor: DEFAULT_QUANTILE_BAND_COLOR,
+};
+/**
+ * Hook to get the forecast color using the same logic as ChartLines
+ * Finds the forecast in forecastData array and returns its color or a color from forecastColors array
+ */
+function useForecastColor(selectedForecast, forecastData) {
+    return useMemo(() => {
+        if (!selectedForecast?.id || !forecastData)
+            return DEFAULT_FORECAST_COLORS;
+        const forecastIndex = forecastData.findIndex(item => item.id === selectedForecast.id);
+        if (forecastIndex === -1)
+            return DEFAULT_FORECAST_COLORS;
+        const forecastItem = forecastData[forecastIndex];
+        const lineColor = forecastItem.color ||
+            FORECAST_LINE_COLORS[forecastIndex % FORECAST_LINE_COLORS.length];
+        const quantileBandColor = forecastItem.color
+            ? FORECAST_COLORS_MAP[forecastItem.color]
+            : getForecastQuantileBandColor(forecastIndex);
+        return {
+            lineColor,
+            quantileBandColor,
+        };
+    }, [selectedForecast?.id, forecastData]);
+}
+
+export { useForecastColor };

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

@@ -0,0 +1,170 @@
+import { useMemo } from 'react';
+
+/**
+ * Hook to transform chart data and create quantile band configuration
+ */
+function useQuantileBands({ color, chartData, selectedForecastId, forecastData, bandKey, getBandValues, getBandConfig, }) {
+    const transformedChartData = useMemo(() => {
+        if (!selectedForecastId ||
+            !forecastData[selectedForecastId]?.allQuantiles) {
+            return chartData;
+        }
+        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 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;
+                        }
+                    }
+                    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;
+    }, [chartData, selectedForecastId, forecastData, bandKey, getBandValues]);
+    const quantileBands = useMemo(() => {
+        if (!selectedForecastId || !forecastData[selectedForecastId]) {
+            return [];
+        }
+        // Get sample values to create config
+        const forecastDataForSelected = forecastData[selectedForecastId];
+        const forecastDates = forecastDataForSelected.dates || [];
+        if (forecastDates.length === 0)
+            return [];
+        const allQuantilesData = forecastDataForSelected.allQuantiles;
+        if (!allQuantilesData)
+            return [];
+        const lastIndex = forecastDates.length - 1;
+        const bandValues = getBandValues(forecastDates[lastIndex], lastIndex, allQuantilesData);
+        if (!bandValues)
+            return [];
+        // const [lowerValue, upperValue] = bandValues;
+        return [getBandConfig(bandKey, color)];
+    }, [
+        selectedForecastId,
+        forecastData,
+        bandKey,
+        getBandValues,
+        getBandConfig,
+        color,
+    ]);
+    return {
+        transformedChartData,
+        quantileBands,
+    };
+}
+
+export { useQuantileBands };

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

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { ChatPresets } from './ChatPresets/ChatPresets.js';
+import S from './Chat.styl.js';
+import { ChatEmptyState } from './ChatEmptyState/ChatEmptyState.js';
+import { ChatMessage } from './ChatMessage/ChatMessage.js';
+import { ChatPrompt } from './ChatPrompt/ChatPrompt.js';
+
+function Chat({ children, className, isEmpty, ...props }) {
+    return (jsx("div", { className: cn(S.root, className, isEmpty && S.isEmpty), ...props, children: children }));
+}
+Chat.Prompt = ChatPrompt;
+Chat.Message = ChatMessage;
+Chat.Presets = ChatPresets;
+Chat.EmptyState = ChatEmptyState;
+
+export { Chat };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Chat_root__IWt99{display:flex;flex-direction:column;height:100%}.Chat_isEmpty__b4ViB{padding-bottom:170px}";
+var S = {"root":"Chat_root__IWt99","isEmpty":"Chat_isEmpty__b4ViB"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Chat/Chat.types.js

@@ -0,0 +1,10 @@
+var MessageRole;
+(function (MessageRole) {
+    MessageRole["USER"] = "user";
+    MessageRole["ASSISTANT"] = "assistant";
+    MessageRole["SYSTEM"] = "system";
+})(MessageRole || (MessageRole = {}));
+/** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
+const GENERATING_DASHBOARD_SYSTEM_TEXT = 'Generating dashboard…';
+
+export { GENERATING_DASHBOARD_SYSTEM_TEXT, MessageRole };