@sybilion/uilib 1.2.26 → 1.3.1

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

@@ -16,6 +16,11 @@ import '../TextShimmer/TextShimmer.js';
 import '@phosphor-icons/react';
 import '../AnalysesSelector/AnalysesSelector.styl.js';
 import './components/CustomChartLegend/CustomChartLegend.styl.js';
+import '../ChartAreaInteractive/ChartLines.js';
+import '../Skeleton/Skeleton.styl.js';
+import 'lightweight-charts';
+import './lightweight/LightweightForecastChart.styl.js';
+import './components/ChartEmptyState/ChartEmptyState.styl.js';
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 const ChartLegend = RechartsPrimitive.Legend;

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

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

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

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

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

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

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

@@ -0,0 +1,460 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useId, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { ChartContext } from '../Chart.context.js';
+import { ChartStyle } from '../components/ChartContainer.js';
+import { ChartTooltipContent } from '../components/ChartTooltipContent.js';
+import { CustomChartLegend } from '../components/CustomChartLegend/CustomChartLegend.js';
+import { formatDate } from '../tools/formatters.js';
+import { getForecastColor, getForecastQuantileBandColor } from '../../ChartAreaInteractive/ChartLines.js';
+import { Skeleton } from '../../Skeleton/Skeleton.js';
+import { ensureChartForecastBridge } from '../../../../utils/chartConnectionPoint.js';
+import { createChart, LineSeries, LineType, LineStyle } from 'lightweight-charts';
+import S from './LightweightForecastChart.styl.js';
+import { buildLightweightChartOptions, buildHistoricalLineData, buildForecastLineData, buildQuantileBandCustomData, findNearestChartRow } from './lightweightForecastChart.helpers.js';
+import { QuantileBandPaneView } from './quantileBandCustomSeries.js';
+
+function clampTooltipTranslate(args) {
+    const { coordinate, viewW, viewH, tooltipWidth: tw, tooltipHeight: th, offset, edgeMargin, } = args;
+    const minX = edgeMargin;
+    const maxX = Math.max(edgeMargin, viewW - tw - edgeMargin);
+    const minY = edgeMargin;
+    const maxY = Math.max(edgeMargin, viewH - th - edgeMargin);
+    const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+    let tx = coordinate.x + offset;
+    if (tx + tw > viewW - edgeMargin) {
+        tx = coordinate.x - tw - offset;
+    }
+    tx = clamp(tx, minX, maxX);
+    let ty = coordinate.y + offset;
+    if (ty + th > viewH - edgeMargin) {
+        ty = coordinate.y - th - offset;
+    }
+    ty = clamp(ty, minY, maxY);
+    return { x: tx, y: ty };
+}
+function scheduleFitTimeScale(chart) {
+    requestAnimationFrame(() => {
+        chart.timeScale().fitContent();
+    });
+}
+function LightweightForecastChart(props) {
+    const { chartData, forecastData = [], quantileBands, chartConfig: chartConfigProp = {}, historicalLineColor: historicalLineColorProp, isDarkTheme, height, className, hiddenSeries: hiddenSeriesProp, onLegendClick, disableForecastHistoricalBridge = false, forecastLineStyle = 'dashed', formatDate: formatDateFn = formatDate, formatNumber, loading = false, error = null, noDataMessage = 'No data available', showLegend = true, showTooltip = true, } = props;
+    const chartId = useId().replace(/:/g, '');
+    const shellRef = useRef(null);
+    const hostRef = useRef(null);
+    const modelRef = useRef(null);
+    const bridgedRef = useRef([]);
+    const tooltipRef = useRef(null);
+    const tooltipSizeRef = useRef({ width: 0, height: 0 });
+    const [localHidden, setLocalHidden] = useState(() => new Set());
+    const hiddenSeries = hiddenSeriesProp ?? localHidden;
+    const hiddenControlled = hiddenSeriesProp !== undefined;
+    const pixelHeight = height ?? 280;
+    const historicalLineColor = historicalLineColorProp ?? (isDarkTheme ? '#ffffff' : '#000000');
+    const bridgedChartData = useMemo(() => {
+        if (disableForecastHistoricalBridge) {
+            return chartData;
+        }
+        return ensureChartForecastBridge(chartData, {
+            forecastSeriesIds: forecastData?.map(f => f.id),
+        });
+    }, [chartData, disableForecastHistoricalBridge, forecastData]);
+    bridgedRef.current = bridgedChartData;
+    const hiddenRef = useRef(hiddenSeries);
+    const forecastRef = useRef(forecastData);
+    const quantileBandsRef = useRef(quantileBands);
+    const formatDateRef = useRef(formatDateFn);
+    const histColorRef = useRef(historicalLineColor);
+    useEffect(() => {
+        hiddenRef.current = hiddenSeries;
+    }, [hiddenSeries]);
+    useEffect(() => {
+        forecastRef.current = forecastData;
+    }, [forecastData]);
+    useEffect(() => {
+        quantileBandsRef.current = quantileBands;
+    }, [quantileBands]);
+    useEffect(() => {
+        formatDateRef.current = formatDateFn;
+    }, [formatDateFn]);
+    useEffect(() => {
+        histColorRef.current = historicalLineColor;
+    }, [historicalLineColor]);
+    const mergedChartConfig = useMemo(() => {
+        const base = {
+            historical: { label: 'Historical Data', color: historicalLineColor },
+            ...chartConfigProp,
+        };
+        forecastData.forEach((f, index) => {
+            const key = `forecast_${f.id}`;
+            base[key] = {
+                label: f.name?.toString() ?? key,
+                color: f.color?.toString() ?? getForecastColor(index),
+            };
+        });
+        quantileBands?.forEach((band, index) => {
+            base[band.key] = {
+                label: band.name,
+                color: band.color ?? getForecastQuantileBandColor(index),
+            };
+        });
+        return base;
+    }, [chartConfigProp, forecastData, historicalLineColor, quantileBands]);
+    const legendPayload = useMemo(() => {
+        if (!showLegend)
+            return [];
+        return forecastData.map((item, index) => ({
+            value: item.name?.toString() || item.id?.toString() || '',
+            color: item.color?.toString() || getForecastColor(index),
+            dataKey: `forecast_${item.id}`,
+            icon: item.icon,
+            status: item.status,
+            dimmed: item.dimmed,
+            updated_at: item.updated_at,
+        }));
+    }, [forecastData, showLegend]);
+    const structureKey = useMemo(() => [
+        quantileBands?.map(b => b.key).join(',') ?? '',
+        forecastData.map(f => f.id).join(','),
+    ].join('|'), [forecastData, quantileBands]);
+    const [tooltipState, setTooltipState] = useState({
+        active: false,
+        x: 0,
+        y: 0,
+        label: '',
+        payload: [],
+    });
+    const applyTooltipPosition = useCallback(() => {
+        const shell = shellRef.current;
+        const wrapper = tooltipRef.current;
+        if (!shell || !wrapper)
+            return;
+        const tw = tooltipSizeRef.current.width || wrapper.offsetWidth;
+        const th = tooltipSizeRef.current.height || wrapper.offsetHeight;
+        if (tw <= 0 || th <= 0)
+            return;
+        const { width: viewW, height: viewH } = shell.getBoundingClientRect();
+        const next = clampTooltipTranslate({
+            coordinate: { x: tooltipState.x, y: tooltipState.y },
+            viewW,
+            viewH,
+            tooltipWidth: tw,
+            tooltipHeight: th,
+            offset: 10,
+            edgeMargin: 8,
+        });
+        wrapper.style.transform = `translate(${next.x}px, ${next.y}px)`;
+    }, [tooltipState.x, tooltipState.y]);
+    useEffect(() => {
+        if (!tooltipState.active)
+            return;
+        applyTooltipPosition();
+    }, [
+        applyTooltipPosition,
+        tooltipState.active,
+        tooltipState.payload,
+        tooltipState.label,
+        tooltipState.x,
+        tooltipState.y,
+    ]);
+    useEffect(() => {
+        const el = tooltipRef.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width, height: h } = entry.contentRect;
+            tooltipSizeRef.current = { width, height: h };
+            requestAnimationFrame(() => applyTooltipPosition());
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [applyTooltipPosition]);
+    useEffect(() => {
+        const onWin = () => requestAnimationFrame(() => {
+            applyTooltipPosition();
+        });
+        window.addEventListener('resize', onWin);
+        return () => window.removeEventListener('resize', onWin);
+    }, [applyTooltipPosition]);
+    // Structural chart lifecycle
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        if (!bridgedChartData.length) {
+            modelRef.current?.chart.remove();
+            modelRef.current = null;
+            return;
+        }
+        const iw = Math.max(1, Math.floor(host.clientWidth || host.offsetWidth || 640));
+        const ih = Math.max(1, Math.floor(pixelHeight));
+        const chart = createChart(host, {
+            ...buildLightweightChartOptions({
+                isDarkTheme,
+                width: iw,
+                height: ih,
+            }),
+        });
+        const bands = new Map();
+        quantileBands?.forEach((band, index) => {
+            const fill = band.color ?? getForecastQuantileBandColor(index);
+            const view = new QuantileBandPaneView({
+                fill,
+                stroke: band.strokeWidth ? fill : undefined,
+                strokeWidth: band.strokeWidth ?? 0,
+                strokeDasharray: band.strokeDasharray,
+                strokeOpacity: band.strokeOpacity,
+            });
+            const api = chart.addCustomSeries(view, {
+                color: fill,
+                lastValueVisible: false,
+                priceLineVisible: false,
+                visible: !hiddenRef.current.has(band.key),
+            });
+            bands.set(band.key, { api, view });
+        });
+        const forecasts = new Map();
+        forecastData.forEach((f, index) => {
+            const key = `forecast_${f.id}`;
+            const color = f.color?.toString() ?? getForecastColor(index);
+            const api = chart.addSeries(LineSeries, {
+                color,
+                lineWidth: 1,
+                lineType: LineType.Curved,
+                lineStyle: forecastLineStyle === 'dashed' ? LineStyle.Dashed : LineStyle.Solid,
+                lastValueVisible: false,
+                priceLineVisible: false,
+                visible: !hiddenRef.current.has(key),
+            });
+            forecasts.set(key, api);
+        });
+        const historical = chart.addSeries(LineSeries, {
+            color: historicalLineColor,
+            lineWidth: 1,
+            lineType: LineType.Curved,
+            lineStyle: LineStyle.Solid,
+            lastValueVisible: false,
+            priceLineVisible: false,
+            visible: !hiddenRef.current.has('historical'),
+        });
+        modelRef.current = {
+            chart,
+            historical,
+            forecasts,
+            bands,
+        };
+        const onMove = (param) => {
+            if (!showTooltip) {
+                setTooltipState(s => ({ ...s, active: false, payload: [] }));
+                return;
+            }
+            const rows = bridgedRef.current;
+            if (!param.point || param.time === undefined || rows.length === 0) {
+                setTooltipState(s => ({ ...s, active: false, payload: [] }));
+                return;
+            }
+            const time = param.time;
+            const row = findNearestChartRow(rows, time);
+            if (!row) {
+                setTooltipState(s => ({ ...s, active: false, payload: [] }));
+                return;
+            }
+            const forecastsList = forecastRef.current;
+            const bandsCfg = quantileBandsRef.current;
+            const hid = hiddenRef.current;
+            const fmt = formatDateRef.current;
+            const histColor = histColorRef.current;
+            const payload = [];
+            const hVal = row.historical;
+            if (typeof hVal === 'number' && Number.isFinite(hVal)) {
+                payload.push({
+                    type: 'line',
+                    name: 'Historical Data',
+                    value: hVal,
+                    color: histColor,
+                    dataKey: 'historical',
+                    payload: row,
+                });
+            }
+            forecastsList.forEach((f, index) => {
+                const forecastKey = `forecast_${f.id}`;
+                if (hid.has(forecastKey))
+                    return;
+                const value = row[forecastKey];
+                if (typeof value !== 'number' || !Number.isFinite(value))
+                    return;
+                const color = f.color?.toString() ?? getForecastColor(index);
+                payload.push({
+                    type: 'line',
+                    name: f.name?.toString() ?? forecastKey,
+                    value,
+                    color,
+                    dataKey: forecastKey,
+                    payload: row,
+                });
+            });
+            bandsCfg?.forEach((band, index) => {
+                if (hid.has(band.key))
+                    return;
+                const tuple = row[band.key];
+                if (Array.isArray(tuple) &&
+                    tuple.length === 2 &&
+                    typeof tuple[0] === 'number' &&
+                    typeof tuple[1] === 'number') {
+                    const color = band.color ?? getForecastQuantileBandColor(index);
+                    payload.push({
+                        type: 'line',
+                        name: band.name,
+                        value: [tuple[0], tuple[1]],
+                        color,
+                        dataKey: band.key,
+                        payload: row,
+                    });
+                }
+            });
+            if (!payload.length) {
+                setTooltipState(s => ({ ...s, active: false, payload: [] }));
+                return;
+            }
+            const label = fmt(row.date, true);
+            setTooltipState({
+                active: true,
+                x: param.point.x,
+                y: param.point.y,
+                label,
+                payload,
+            });
+        };
+        chart.subscribeCrosshairMove(onMove);
+        const resizeToHost = () => {
+            const ww = Math.max(1, Math.floor(host.clientWidth));
+            const hh = Math.max(1, Math.floor(host.clientHeight));
+            chart.resize(ww, hh);
+            scheduleFitTimeScale(chart);
+        };
+        let resizeObserver;
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(resizeToHost);
+            });
+            resizeObserver.observe(host);
+        }
+        requestAnimationFrame(resizeToHost);
+        return () => {
+            resizeObserver?.disconnect();
+            chart.unsubscribeCrosshairMove(onMove);
+            chart.remove();
+            modelRef.current = null;
+        };
+    }, [
+        structureKey,
+        isDarkTheme,
+        pixelHeight,
+        showTooltip,
+        bridgedChartData.length,
+    ]);
+    // Push data / band styles
+    useEffect(() => {
+        const model = modelRef.current;
+        if (!model)
+            return;
+        model.historical?.setData(buildHistoricalLineData(bridgedChartData));
+        for (const [key, api] of model.forecasts.entries()) {
+            api.setData(buildForecastLineData(bridgedChartData, key));
+        }
+        quantileBands?.forEach((band, index) => {
+            const entry = model.bands.get(band.key);
+            if (!entry)
+                return;
+            const fill = band.color ?? getForecastQuantileBandColor(index);
+            entry.view.updateStyle({
+                fill,
+                stroke: band.strokeWidth ? fill : undefined,
+                strokeWidth: band.strokeWidth ?? 0,
+                strokeDasharray: band.strokeDasharray,
+                strokeOpacity: band.strokeOpacity,
+            });
+            entry.api.applyOptions({ color: fill });
+            entry.api.setData(buildQuantileBandCustomData(bridgedChartData, band.key));
+        });
+        scheduleFitTimeScale(model.chart);
+    }, [bridgedChartData, quantileBands]);
+    // Visibility toggles
+    useEffect(() => {
+        const model = modelRef.current;
+        if (!model)
+            return;
+        model.historical?.applyOptions({
+            visible: !hiddenSeries.has('historical'),
+        });
+        for (const [key, api] of model.forecasts.entries()) {
+            api.applyOptions({ visible: !hiddenSeries.has(key) });
+        }
+        for (const [key, { api }] of model.bands.entries()) {
+            api.applyOptions({ visible: !hiddenSeries.has(key) });
+        }
+        scheduleFitTimeScale(model.chart);
+    }, [hiddenSeries]);
+    // Line styling updates without structural rebuild
+    useEffect(() => {
+        const model = modelRef.current;
+        if (!model?.historical)
+            return;
+        model.historical.applyOptions({ color: historicalLineColor });
+    }, [historicalLineColor]);
+    useEffect(() => {
+        const model = modelRef.current;
+        if (!model)
+            return;
+        const style = forecastLineStyle === 'dashed' ? LineStyle.Dashed : LineStyle.Solid;
+        for (const api of model.forecasts.values()) {
+            api.applyOptions({ lineStyle: style });
+        }
+    }, [forecastLineStyle]);
+    const handleLegendClick = useCallback((data, index, event) => {
+        const payloadItem = data;
+        const key = payloadItem.dataKey;
+        if (key) {
+            if (!hiddenControlled) {
+                setLocalHidden(prev => {
+                    const next = new Set(prev);
+                    if (next.has(key))
+                        next.delete(key);
+                    else
+                        next.add(key);
+                    return next;
+                });
+            }
+        }
+        onLegendClick?.(data, index, event);
+    }, [hiddenControlled, onLegendClick]);
+    if (error) {
+        return (jsx("div", { className: cn(S.root, className), children: jsxs("div", { style: { color: 'var(--destructive, #f43f5e)' }, children: ["Error: ", error] }) }));
+    }
+    if (loading) {
+        return (jsx("div", { className: cn(S.root, className), children: jsx("div", { style: { height: pixelHeight }, children: jsx(Skeleton, { style: { width: '100%', height: '100%' } }) }) }));
+    }
+    if (!bridgedChartData.length) {
+        return (jsx("div", { className: cn(S.root, className), children: jsx("div", { style: { height: pixelHeight }, children: noDataMessage }) }));
+    }
+    return (jsx(ChartContext.Provider, { value: { config: mergedChartConfig }, children: jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { "data-slot": "chart", "data-chart": `chart-${chartId}`, className: S.shell, ref: shellRef, style: { position: 'relative', width: '100%' }, children: [jsx(ChartStyle, { id: `chart-${chartId}`, config: mergedChartConfig }), jsx("div", { ref: hostRef, className: S.host, style: { width: '100%', height: pixelHeight } }), showTooltip ? (jsx("div", { ref: tooltipRef, className: S.tooltipMove, style: {
+                                opacity: tooltipState.active && tooltipState.payload.length ? 1 : 0,
+                            }, children: jsx(ChartTooltipContent, { active: tooltipState.active && tooltipState.payload.length > 0, label: tooltipState.label, payload: tooltipState.active && tooltipState.payload.length
+                                    ? tooltipState.payload
+                                    : [], labelFormatter: lbl => formatDateFn(typeof lbl === 'string' ? lbl : String(lbl), true), formatter: formatNumber
+                                    ? (value, name) => {
+                                        const v = typeof value === 'number'
+                                            ? formatNumber(value)
+                                            : Array.isArray(value)
+                                                ? `${formatNumber(value[0])} – ${formatNumber(value[1])}`
+                                                : String(value ?? '');
+                                        return (jsxs(Fragment, { children: [jsxs("span", { children: [name, ": "] }), jsx("span", { children: v })] }));
+                                    }
+                                    : undefined }) })) : null] }), showLegend ? (jsx("div", { className: S.footer, children: jsx(CustomChartLegend, { payload: legendPayload, hiddenSeries: hiddenSeries, onClick: handleLegendClick }) })) : null] }) }));
+}
+
+export { LightweightForecastChart };

package/dist/esm/components/ui/Chart/lightweight/LightweightForecastChart.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".LightweightForecastChart_root__QK05J{display:flex;flex-direction:column;gap:12px;width:100%}.LightweightForecastChart_shell__fRJV5{position:relative;width:100%}.LightweightForecastChart_host__lxD2b{box-sizing:border-box;display:block;width:100%}.LightweightForecastChart_host__lxD2b #tv-attr-logo{display:none}.LightweightForecastChart_tooltipMove__BIKnO{pointer-events:none;position:absolute;z-index:5}.LightweightForecastChart_footer__t5N7A{width:100%}";
+var S = {"root":"LightweightForecastChart_root__QK05J","shell":"LightweightForecastChart_shell__fRJV5","host":"LightweightForecastChart_host__lxD2b","tooltipMove":"LightweightForecastChart_tooltipMove__BIKnO","footer":"LightweightForecastChart_footer__t5N7A"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,16 @@
+/**
+ * Parse `YYYY-MM-DD` dates as UTC midnight → Lightweight Charts unix seconds.
+ */
+function chartDateToUtcTimestamp(dateStr) {
+    const trimmed = dateStr.slice(0, 10);
+    const [y, m, d] = trimmed.split('-').map(Number);
+    if (!Number.isFinite(y) ||
+        !Number.isFinite(m) ||
+        !Number.isFinite(d) ||
+        trimmed.length !== 10) {
+        return Math.floor(new Date(dateStr).getTime() / 1000);
+    }
+    return Math.floor(Date.UTC(y, m - 1, d, 0, 0, 0, 0) / 1000);
+}
+
+export { chartDateToUtcTimestamp };