@sybilion/uilib 1.0.20

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

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getPayloadConfigFromPayload } from '../Chart.helpers.js';
+import S from '../Chart.styl.js';
+
+function ChartLegendItem({ item, config, hideIcon, nameKey, }) {
+    const key = `${nameKey || item.dataKey || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    return (jsxs("div", { className: S.legendItem, children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: S.legendIndicator, style: {
+                    backgroundColor: item.color,
+                } })), itemConfig?.label] }, item.value));
+}
+
+export { ChartLegendItem };

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

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useEffect, useMemo } from 'react';
+import { useChart } from '../Chart.context.js';
+import { getPayloadConfigFromPayload } from '../Chart.helpers.js';
+import S from '../Chart.styl.js';
+import { ChartTooltipItem } from './ChartTooltipItem.js';
+
+function ChartTooltipContent({ active, className, indicator = 'dot', hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, payload, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    // Keep last tooltip data in state to maintain position when inactive
+    const [lastTooltipData, setLastTooltipData] = useState(null);
+    // Update last tooltip data when active
+    useEffect(() => {
+        // Clear lastTooltipData immediately if label changed (prevents stale data)
+        // Only clear if label is explicitly provided and different (not undefined)
+        if (lastTooltipData && label && lastTooltipData.label !== label) {
+            setLastTooltipData(null);
+        }
+        if (active && payload?.length) {
+            setLastTooltipData({
+                active,
+                payload: payload,
+                label,
+            });
+        }
+        // Don't clear lastTooltipData when mouse moves out - keep it for position maintenance
+        // It will be cleared when label changes (above) or when new active data arrives
+    }, [active, payload, label]);
+    // Use last tooltip data if current is inactive, otherwise use current
+    // lastTooltipData is already cleared in useEffect if label changed, so safe to use here
+    active || (lastTooltipData?.active ?? false);
+    const displayPayload = active && payload?.length
+        ? payload
+        : lastTooltipData?.payload;
+    const displayLabel = active ? label : lastTooltipData?.label;
+    const tooltipLabel = useMemo(() => {
+        if (hideLabel || !displayPayload?.length) {
+            return null;
+        }
+        const payloadArray = displayPayload;
+        const [item] = payloadArray;
+        const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof displayLabel === 'string'
+            ? config[displayLabel]?.label || displayLabel
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (jsx("div", { className: cn('font-medium', labelClassName), children: labelFormatter(value, displayPayload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return jsx("div", { className: cn('font-medium', labelClassName), children: value });
+    }, [
+        displayLabel,
+        labelFormatter,
+        displayPayload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    // Don't return null - keep rendering last tooltip to maintain position
+    if (!displayPayload?.length) {
+        return null;
+    }
+    const nestLabel = displayPayload.length === 1 && indicator !== 'dot';
+    return (jsxs("div", { className: cn(S.tooltipContainer, className), children: [!nestLabel ? tooltipLabel : null, jsx("div", { className: "grid gap-1.5", children: displayPayload
+                    .filter(item => item.type !== 'none')
+                    .map((item, index) => (jsx(ChartTooltipItem, { item: item, index: index, config: config, indicator: indicator, hideIndicator: hideIndicator, nestLabel: nestLabel, tooltipLabel: tooltipLabel, color: color, nameKey: nameKey, formatter: formatter }, item.dataKey || index))) })] }));
+}
+
+export { ChartTooltipContent };

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { getPayloadConfigFromPayload } from '../Chart.helpers.js';
+import S from '../Chart.styl.js';
+
+function ChartTooltipItem({ item, index, config, indicator, hideIndicator, nestLabel, tooltipLabel, color, nameKey, formatter, }) {
+    const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const payloadFill = item.payload &&
+        typeof item.payload === 'object' &&
+        'fill' in item.payload &&
+        typeof item.payload.fill === 'string'
+        ? item.payload.fill
+        : undefined;
+    const indicatorColor = color || payloadFill || item.color;
+    return (jsx("div", { className: cn(S.tooltipItem, indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn(S.tooltipIndicator, S[`indicator-${indicator}`], nestLabel && S.nested), style: {
+                        '--color-bg': indicatorColor,
+                        '--color-border': indicatorColor,
+                    } }))), jsxs("div", { className: cn(S.tooltipContent, nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: S.tooltipLabel, children: [nestLabel ? tooltipLabel : null, jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: S.tooltipValue, children: Array.isArray(item.value)
+                                ? `${item.value[0].toLocaleString(undefined, { maximumFractionDigits: 20 })} – ${item.value[1].toLocaleString(undefined, { maximumFractionDigits: 20 })}`
+                                : item.value.toLocaleString(undefined, {
+                                    maximumFractionDigits: 20,
+                                }) }))] })] })) }, item.dataKey));
+}
+
+export { ChartTooltipItem };

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

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useMemo, useCallback } from 'react';
+import { AnalysesSelector } from '../../../AnalysesSelector/AnalysesSelector.js';
+import S from './CustomChartLegend.styl.js';
+
+function extractIdFromDataKey(dataKey) {
+    if (!dataKey)
+        return undefined;
+    const id = dataKey.startsWith('forecast_')
+        ? dataKey.replace('forecast_', '')
+        : dataKey;
+    return /^\d+$/.test(id) ? parseInt(id, 10) : undefined;
+}
+/**
+ * Custom chart legend using AnalysesSelector (inline mode)
+ * Supports forecast icon indicator, failed badge, toggle visibility
+ */
+function CustomChartLegend({ payload, onClick, hiddenSeries, className, onAnalysisSelect, onFailedAnalysisClick, maxVisibleItems, preventDeselection = true, }) {
+    const items = useMemo(() => (payload ?? []).map(p => ({
+        id: extractIdFromDataKey(p.dataKey),
+        label: p.value,
+        color: p.color,
+        status: p.status,
+        icon: p.icon,
+        updated_at: p.updated_at,
+    })), [payload]);
+    const selectedIds = useMemo(() => {
+        if (preventDeselection) {
+            // Always keep all items selected when preventDeselection is true
+            // AnalysesSelector will show maxVisibleItems inline based on this
+            return new Set(items.map(item => item.id));
+        }
+        return new Set(items
+            .filter(item => {
+            const dataKey = `forecast_${item.id}`;
+            return !hiddenSeries?.has(dataKey);
+        })
+            .map(item => item.id));
+    }, [items, hiddenSeries, preventDeselection]);
+    const handleToggleSeriesVisibility = useCallback((analysisId) => {
+        const dataKey = Number(analysisId) === -1 ? 'historical' : `forecast_${analysisId}`;
+        const index = payload?.findIndex(p => p.dataKey === dataKey) ??
+            payload?.findIndex(p => extractIdFromDataKey(p.dataKey) === Number(analysisId)) ??
+            0;
+        const payloadItem = payload?.[index];
+        onClick?.({ dataKey, value: payloadItem?.value, ...payloadItem }, index, {});
+    }, [onClick, payload]);
+    const handleItemToggle = useCallback((id) => {
+        const dataKey = `forecast_${id}`;
+        const payloadItem = payload?.find(p => extractIdFromDataKey(p.dataKey) === id);
+        const wasHidden = hiddenSeries?.has(dataKey);
+        const index = payload?.findIndex(p => extractIdFromDataKey(p.dataKey) === id) ?? 0;
+        onClick?.({ dataKey, value: payloadItem?.value, ...payloadItem }, index, {});
+        if (wasHidden && onAnalysisSelect) {
+            onAnalysisSelect(id);
+        }
+    }, [onClick, payload, hiddenSeries, onAnalysisSelect]);
+    if (!items.length)
+        return null;
+    return (jsx("div", { className: cn(S.legendContainer, className), children: jsx(AnalysesSelector, { items: items, selectedIds: selectedIds, onItemToggle: handleItemToggle, inlineMode: true, size: "sm", variant: "clear", onFailedItemClick: onFailedAnalysisClick, enableToggleHidden: true, maxVisibleItems: maxVisibleItems, preventDeselection: preventDeselection, hiddenSeries: hiddenSeries ?? new Set(), onToggleSeries: handleToggleSeriesVisibility }) }));
+}
+
+export { CustomChartLegend };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".CustomChartLegend_legendContainer__-oSYW{align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-4);justify-content:flex-start}.CustomChartLegend_legendItem__Ubx0E{align-items:center;cursor:pointer;display:flex;gap:var(--p-2);transition:opacity .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CustomChartLegend_legendItem__Ubx0E.CustomChartLegend_disabled__ElsSq,.CustomChartLegend_legendItem__Ubx0E:hover{opacity:.5}.CustomChartLegend_legendItem__Ubx0E.CustomChartLegend_disabled__ElsSq:hover{opacity:.8}.CustomChartLegend_legendLineIcon__Sb1zT{align-items:center;display:flex;flex-shrink:0;gap:2px;height:12px}.CustomChartLegend_line__hOJIj{--line-size:1.5px;align-items:center;display:flex;height:1.5px;height:var(--line-size);width:16px}.CustomChartLegend_line__hOJIj.CustomChartLegend_dashed__3E8Hv{border-top:var(--line-size) dashed;height:0}.CustomChartLegend_dot__3NR9t{flex-shrink:0;height:6px;transform:rotate(45deg);width:6px}.CustomChartLegend_forecastIcon__tt3gP{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;position:relative;width:16px}.CustomChartLegend_forecastArrow__Tr5oW{height:100%;position:relative;width:100%}.CustomChartLegend_forecastArrow__Tr5oW:before{background:currentColor;bottom:3px;content:\"\";height:2px;left:2px;opacity:.7;position:absolute;transform:rotate(-45deg);transform-origin:left bottom;width:10px}.CustomChartLegend_forecastArrow__Tr5oW:after{border-right:2px solid;border-top:2px solid;content:\"\";height:5px;opacity:.7;position:absolute;right:2px;top:2px;width:5px}.CustomChartLegend_legendLabel__HhtLm{color:var(--foreground);font-size:var(--text-xs);line-height:var(--line-height-base);white-space:nowrap}.CustomChartLegend_selectTrigger__LaO8g{font-size:var(--text-xs);height:auto;min-width:auto;padding:var(--p-1) var(--p-2)}.CustomChartLegend_selectItemContent__LB8K0{align-items:center;display:flex;gap:var(--p-2)}";
+var S = {"legendContainer":"CustomChartLegend_legendContainer__-oSYW","legendItem":"CustomChartLegend_legendItem__Ubx0E","disabled":"CustomChartLegend_disabled__ElsSq","legendLineIcon":"CustomChartLegend_legendLineIcon__Sb1zT","line":"CustomChartLegend_line__hOJIj","dashed":"CustomChartLegend_dashed__3E8Hv","dot":"CustomChartLegend_dot__3NR9t","forecastIcon":"CustomChartLegend_forecastIcon__tt3gP","forecastArrow":"CustomChartLegend_forecastArrow__Tr5oW","legendLabel":"CustomChartLegend_legendLabel__HhtLm","selectTrigger":"CustomChartLegend_selectTrigger__LaO8g","selectItemContent":"CustomChartLegend_selectItemContent__LB8K0"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const ITEM_GAP = 12;
+const ICON_WIDTH = 18;
+const FONT_SIZE = 16;
+const ROW_HEIGHT = 24;
+function LegendSvg({ payload, width, marginLeft = 0 }) {
+    if (payload.length === 0)
+        return null;
+    let x = marginLeft;
+    const items = [];
+    payload.forEach(item => {
+        items.push({ x, item });
+        x += ICON_WIDTH + ITEM_GAP + item.value.length * FONT_SIZE * 0.6 + ITEM_GAP;
+    });
+    return (jsx("svg", { width: width, height: ROW_HEIGHT, viewBox: `0 0 ${Math.max(width, x)} ${ROW_HEIGHT}`, style: { display: 'block' }, children: items.map(({ x: itemX, item }) => (jsxs("g", { transform: `translate(${itemX}, 0)`, children: [jsx("line", { x1: 0, y1: ROW_HEIGHT / 2, x2: ICON_WIDTH, y2: ROW_HEIGHT / 2, stroke: item.color, strokeWidth: 2, strokeDasharray: "3 3" }), jsx("circle", { cx: 20, cy: ROW_HEIGHT / 2, r: 3, fill: item.color }), jsx("text", { x: ICON_WIDTH + ITEM_GAP, y: ROW_HEIGHT / 2, dy: "0.35em", fontSize: FONT_SIZE, fill: "#333333", children: item.value })] }, item.dataKey))) }));
+}
+
+export { LegendSvg };

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

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { getForecastQuantileBandColor, FORECAST_COLORS_MAP } from '../../ChartAreaInteractive/ChartLines.js';
+import { Area } from 'recharts';
+
+const DEFAULT_QUANTILE_BAND_COLOR = FORECAST_COLORS_MAP['#04ADC3'];
+/**
+ * Renders quantile bands as Area components using array values
+ * Each band uses [lower, upper] array format to fill between two values
+ */
+function QuantileBands({ color, hiddenBands = new Set(), quantileBandKey, animate = true, animationDuration, animationBegin, customBands, showLegend = true, }) {
+    return (jsx(Fragment, { children: customBands.map((band, index) => {
+            if (hiddenBands.has(band.key))
+                return null;
+            const fillColor = color || band.color || getForecastQuantileBandColor(index);
+            return (jsx(Area, { type: band.type || 'monotone', dataKey: band.key, name: band.name, stroke: band.strokeWidth ? fillColor : 'none', strokeWidth: band.strokeWidth || 0, strokeDasharray: band.strokeDasharray, strokeOpacity: band.strokeOpacity, fill: fillColor, 
+                // fillOpacity={band.opacity}
+                legendType: showLegend === false ? 'none' : undefined, connectNulls: true, dot: false, activeDot: false, isAnimationActive: animate, animationDuration: animationDuration, animationBegin: animationBegin, animationEasing: "ease-out" }, quantileBandKey
+                ? `${quantileBandKey}-${index}`
+                : `quantile-band-${index}`));
+        }) }));
+}
+
+export { DEFAULT_QUANTILE_BAND_COLOR, QuantileBands };

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

@@ -0,0 +1,81 @@
+/**
+ * Format number for display (with k/m abbreviations)
+ */
+const formatNumber = (value) => {
+    if (Math.abs(value) >= 1000000) {
+        return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+    }
+    else if (Math.abs(value) >= 1000) {
+        return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+    }
+    return value.toFixed(0);
+};
+/**
+ * Round a number based on its magnitude
+ * - 2 digits (10-99): round to nearest 10
+ * - 3 digits (100-999): round to nearest 100
+ * - 4 digits (1000-9999): round to nearest 1000
+ * - etc.
+ */
+const roundByMagnitude = (value) => {
+    const absValue = Math.abs(value);
+    // Handle zero and very small numbers
+    if (absValue === 0)
+        return 0;
+    if (absValue < 10)
+        return Math.round(value);
+    // Calculate number of digits
+    const numDigits = Math.floor(Math.log10(absValue)) + 1;
+    // Round to nearest 10^(n-1) where n is number of digits
+    const roundingFactor = Math.pow(10, numDigits - 1);
+    return Math.round(value / roundingFactor) * roundingFactor;
+};
+/**
+ * Format Y-axis number with smart rounding based on magnitude
+ */
+const formatYAxisNumber = (value) => {
+    const rounded = roundByMagnitude(value);
+    return rounded.toFixed(0);
+};
+/**
+ * Generate simple Y-axis ticks
+ * - Get the highest chart point (max)
+ * - Round max to nearest appropriate value
+ * - Divide rounded max by 10 and round to get the step
+ * - Add legend for every step from top to bottom
+ * - No extra gaps from top/bottom
+ */
+const generateRoundedYTicks = (min, max) => {
+    if (min === max)
+        return [min];
+    if (max <= 0)
+        return [0];
+    const rawStep = (max - min) / 10; // generate 10 ticks
+    // Round step to nearest power of 10 (10, 100, 1000, ...)
+    const magnitude = Math.floor(Math.log10(rawStep));
+    const powerOf10 = Math.pow(10, magnitude);
+    const step = rawStep >= powerOf10 * 5 ? powerOf10 * 10 : powerOf10;
+    // find start round number that > min
+    const startMin = Math.ceil(min / step) * step;
+    // find end round number that < max
+    const endMax = Math.floor(max / step) * step;
+    return Array.from({ length: (endMax - startMin) / step + 1 }, (_, i) => startMin + i * step);
+};
+/**
+ * Format date for display
+ */
+const formatDate = (dateStr, long = false) => {
+    const date = new Date(dateStr);
+    if (long) {
+        return date.toLocaleDateString('en-US', {
+            month: 'long',
+            year: 'numeric',
+        });
+    }
+    return date.toLocaleDateString('en-US', {
+        month: 'short',
+        year: '2-digit',
+    });
+};
+
+export { formatDate, formatNumber, formatYAxisNumber, generateRoundedYTicks };

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

@@ -0,0 +1,15 @@
+// Helper function to format large numbers with k/m abbreviations
+const shortDateFormatter = (value) => {
+    return new Date(value).toLocaleDateString('en-US', {
+        month: 'short',
+        year: '2-digit',
+    });
+};
+const longDateFormatter = (value) => {
+    return new Date(value).toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+};
+
+export { longDateFormatter, shortDateFormatter };

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

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useRef, useEffect, useMemo } from 'react';
+import { BaseChartWrapper } from '../Chart/components/BaseChartWrapper.js';
+import { InteractionOverlay } from '../InteractionOverlay/InteractionOverlay.js';
+import { TimeRangeControls } from '../TimeRangeControls/TimeRangeControls.js';
+import { ensureChartForecastBridge } from '../../../utils/chartConnectionPoint.js';
+import { shortDateFormatter, longDateFormatter } from './ChartAreaInteractive.helpers.js';
+import S from './ChartAreaInteractive.styl.js';
+import { PinOverlay } from './overlays/PinOverlay/PinOverlay.js';
+import { IntervalsOverlay } from './overlays/IntervalsOverlay/IntervalsOverlay.js';
+import { ThresholdsOverlay } from './overlays/ThresholdsOverlay/ThresholdsOverlay.js';
+
+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 }) {
+    const seriesHidden = hiddenSeries ?? new Set();
+    const hiddenSeriesRef = useRef(seriesHidden);
+    const prevSelectedAnalysisIdRef = useRef(selectedAnalysisId);
+    // Keep ref in sync with hiddenSeries (use seriesHidden so ref is always a Set)
+    useEffect(() => {
+        hiddenSeriesRef.current = seriesHidden;
+    }, [seriesHidden]);
+    // When analysis selected in CardTable, ensure it's visible in chart legend
+    // Only run when selectedAnalysisId changes, not when hiddenSeries changes
+    // This allows users to manually hide selected analyses via legend toggle
+    useEffect(() => {
+        // Only run when selectedAnalysisId actually changes
+        if (prevSelectedAnalysisIdRef.current === selectedAnalysisId)
+            return;
+        prevSelectedAnalysisIdRef.current = selectedAnalysisId;
+        if (selectedAnalysisId == null)
+            return;
+        const dataKey = `forecast_${selectedAnalysisId}`;
+        if (hiddenSeriesRef.current.has(dataKey)) {
+            ensureAnalysisSeriesVisible(selectedAnalysisId);
+        }
+    }, [selectedAnalysisId, ensureAnalysisSeriesVisible]);
+    const bridgedChartData = useMemo(() => disableForecastHistoricalBridge
+        ? chartData
+        : ensureChartForecastBridge(chartData, {
+            forecastSeriesIds: forecastData?.map(f => f.id),
+        }), [chartData, disableForecastHistoricalBridge, forecastData]);
+    // Extract quantileBands from restProps
+    // const quantileBands = (restProps as any).quantileBands;
+    const getLoadingMessage = () => {
+        // Always return undefined - BaseChartWrapper will handle loading state
+        // This prevents showing spinner when data is cached but timeRangedChartData hasn't been computed yet
+        return undefined;
+    };
+    const handleLegendClick = data => {
+        const seriesName = data.dataKey;
+        if (onLegendClick?.(data) === false)
+            return;
+        toggleLegendSeries(seriesName);
+    };
+    const loadingMessage = getLoadingMessage();
+    const baseChartProps = {
+        renderId: chartRenderId?.toString(),
+        xAxisClassName,
+        yAxisClassName,
+        chartData: bridgedChartData,
+        chartClassName: S.chartContainer,
+        // chartClassName: cn(S.chartContainer, chartContainerClassName),
+        legendClassName,
+        forecastData,
+        loading,
+        hasCombinedData: restProps.hasCombinedData,
+        isDarkTheme,
+        // formatNumber,
+        formatDate: shortDateFormatter,
+        labelFormatter: (v) => longDateFormatter(v),
+        chartType: 'composed',
+        margin: { left: -10, right: 30, top: 20, bottom: 20 },
+        hiddenSeries: seriesHidden,
+        onLegendClick: handleLegendClick,
+        onAnalysisSelect: onAnalysisSelect,
+        error,
+        footerActions,
+        loadingMessage,
+        excludeLegendIds,
+        forecastLineStyle,
+        // loadingAnalyses,
+        ...restProps,
+    };
+    const renderChart = () => {
+        const overlayClassName = cn(chartContainerClassName);
+        switch (mode) {
+            case 'pin':
+                return (jsx(PinOverlay, { className: overlayClassName, baseChartProps: baseChartProps, pinMonth: pinMonth, onPinMonthChange: onPinMonthChange, onPreviewMonthChange: onPreviewMonthChange }));
+            case 'intervals':
+                return (jsx(IntervalsOverlay, { className: overlayClassName, baseChartProps: baseChartProps, selectedForecast: selectedForecast, upperQuantiles: upperQuantiles, lowerQuantiles: lowerQuantiles, selectedLowerQuantile: selectedLowerQuantile, selectedUpperQuantile: selectedUpperQuantile, onLowerQuantileChange: onLowerQuantileChange, onUpperQuantileChange: onUpperQuantileChange, overlayForecastData: overlayForecastData }));
+            case 'thresholds':
+                return (jsx(ThresholdsOverlay, { className: overlayClassName, baseChartProps: baseChartProps, selectedForecast: selectedForecast, lowerThreshold: lowerThreshold, upperThreshold: upperThreshold, onLowerThresholdChange: onLowerThresholdChange, onUpperThresholdChange: onUpperThresholdChange, discreteThresholdValues: discreteThresholdValues, overlayForecastData: overlayForecastData }));
+            default:
+                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()] }));
+}
+
+export { ChartAreaInteractive, chartConfig };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.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)}}:root{--chart-height:586px}@media (max-width:768px){:root{--chart-height:300px}}.ChartAreaInteractive_loadingSpinner__A7jox{animation:ChartAreaInteractive_spin__zU5LX 1s linear infinite;border-top-color:var(--muted-foreground);border:2px solid var(--muted-foreground);border-radius:9999px;height:1.5rem;width:1.5rem}.ChartAreaInteractive_chartHeaderContainer__XkPiP{align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-2);justify-content:space-between;margin-bottom:1rem}.ChartAreaInteractive_chartContainerWrapper__sa2zO{position:relative}.ChartAreaInteractive_chartContainer__PLbGm{aspect-ratio:auto;height:var(--chart-height);transition:opacity .3s ease-out;width:100%}.ChartAreaInteractive_loading__M0in3 .ChartAreaInteractive_chartContainer__PLbGm{opacity:.3;pointer-events:none}.ChartAreaInteractive_chartContainer__PLbGm .recharts-legend-item{cursor:pointer;margin-right:var(--p-6)!important}.ChartAreaInteractive_overlay__V8w04{inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);position:absolute}@media (max-width:768px){.ChartAreaInteractive_overlay__V8w04{height:230px!important}}@keyframes ChartAreaInteractive_spin__zU5LX{to{transform:rotate(1turn)}}@keyframes ChartAreaInteractive_fadeIn__qDomf{0%{opacity:0}to{opacity:1}}";
+var S = {"loadingSpinner":"ChartAreaInteractive_loadingSpinner__A7jox","spin":"ChartAreaInteractive_spin__zU5LX","chartHeaderContainer":"ChartAreaInteractive_chartHeaderContainer__XkPiP","chartContainerWrapper":"ChartAreaInteractive_chartContainerWrapper__sa2zO","chartContainer":"ChartAreaInteractive_chartContainer__PLbGm","loading":"ChartAreaInteractive_loading__M0in3","overlay":"ChartAreaInteractive_overlay__V8w04","fadeIn":"ChartAreaInteractive_fadeIn__qDomf"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,81 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import { Line } from 'recharts';
+
+const ANIMATION_DURATION = 300;
+// Colors for different forecast series
+const FORECAST_COLORS_MAP = {
+    '#C08F09': '#F9D56733',
+    '#216BF7': '#84C6FB33',
+    '#F103F1': '#EDB1F733',
+    '#059643': '#80F3B033',
+    '#FD1515': '#80F3B033',
+    '#04ADC3': '#65EEFF33',
+    '#3C42A9': '#ADB1F633',
+    '#795548': '#D0B8AF33',
+};
+const FORECAST_LINE_COLORS = Object.keys(FORECAST_COLORS_MAP);
+const getForecastColor = (index) => FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length];
+const getForecastQuantileBandColor = (index) => FORECAST_COLORS_MAP[FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length]];
+// Memoized component for chart lines - only re-renders when data/analyses/hiddenSeries change
+const ChartLines = memo(({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor = isDarkTheme ? '#ffffff' : '#000000', showLegend = true, forecastLineStyle = 'dashed', disableHistoricalAnimation = false, }) => {
+    const dotStroke = isDarkTheme ? '#000000' : '#FFFFFF';
+    const activeDotHistorical = {
+        r: 6,
+        fill: historicalLineColor,
+        stroke: dotStroke,
+        strokeWidth: 3,
+        filter: 'drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2))',
+        style: { zIndex: 20 },
+    };
+    const activeDotForecast = (color) => ({
+        ...activeDotHistorical,
+        fill: color,
+    });
+    // Memoize last historical index to avoid recalculating on every render call
+    const lastHistoricalIndex = useMemo(() => {
+        for (let i = chartData.length - 1; i >= 0; i--) {
+            const value = chartData[i].historical;
+            if (value !== undefined && value !== null) {
+                return i;
+            }
+        }
+        return -1;
+    }, [chartData]);
+    // Memoize last forecast indices per forecast ID
+    const lastForecastIndices = useMemo(() => {
+        const indices = {};
+        forecastData?.forEach(({ id }) => {
+            const dataKey = `forecast_${id}`;
+            for (let i = chartData.length - 1; i >= 0; i--) {
+                const value = chartData[i][dataKey];
+                if (value !== undefined && value !== null) {
+                    indices[id] = i;
+                    break;
+                }
+            }
+        });
+        return indices;
+    }, [chartData, forecastData]);
+    // Helper to render dot at last data point
+    const renderDot = (props, lastIndex, dataKey, color) => {
+        if (lastIndex >= 0 &&
+            props.index === lastIndex &&
+            chartData[props.index]?.[dataKey] != null &&
+            props.cy != null &&
+            props.cx != null) {
+            return jsx("circle", { cx: props.cx, cy: props.cy, r: 3, fill: color });
+        }
+        return null;
+    };
+    const renderHistoricalDot = (props) => renderDot(props, lastHistoricalIndex, 'historical', historicalLineColor);
+    const renderForecastDot = (props, id, color) => renderDot(props, lastForecastIndices[id] ?? -1, `forecast_${id}`, color);
+    return (jsxs(Fragment, { children: [jsx(Line, { type: "monotone", dataKey: "historical", stroke: historicalLineColor, strokeWidth: 1, dot: props => renderHistoricalDot(props), activeDot: activeDotHistorical, name: "Historical Data", legendType: showLegend === false ? 'none' : undefined, strokeDasharray: "0", hide: hiddenSeries?.has('historical'), isAnimationActive: shouldAnimate && !disableHistoricalAnimation, animationDuration: disableHistoricalAnimation ? 0 : ANIMATION_DURATION, animationBegin: 0, animationEasing: "ease-out" }, "historical"), forecastData?.map((data, index) => {
+                const { id, name, color = FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length], } = data;
+                const dataKey = `forecast_${id}`;
+                return (jsx(Line, { type: "monotone", dataKey: dataKey, stroke: color, strokeWidth: 1, strokeDasharray: forecastLineStyle === 'dashed' ? '4 2' : '0', dot: props => renderForecastDot(props, id, color), activeDot: activeDotForecast(color), name: `${name || `${id}`}`, legendType: showLegend === false ? 'none' : undefined, hide: hiddenSeries?.has(dataKey), isAnimationActive: shouldAnimate, animationDuration: ANIMATION_DURATION, animationBegin: 0, animationEasing: "ease-out", className: "chart-line-blinking" }, `forecast-${id}`));
+            })] }));
+});
+ChartLines.displayName = 'ChartLines';
+
+export { ChartLines, FORECAST_COLORS_MAP, FORECAST_LINE_COLORS, getForecastColor, getForecastQuantileBandColor };