@sybilion/uilib 1.3.21 → 1.3.23

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
-import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
+import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPresetScriptGraph, branchesFromPresetScriptGraph, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant } from '../ChatMessage/presetScript.js';
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
@@ -425,7 +425,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onMessage,
         onScriptComplete,
     ]);
-    const submitPreset = async (preset) => {
+    const submitPreset = useCallback(async (preset) => {
         const script = preset.script;
         const scriptGraph = isPresetScriptGraph(script);
         const hasLinearScript = Array.isArray(script) && script.length > 0;
@@ -518,7 +518,24 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         finally {
             setLocalUiBusy(false);
         }
-    };
+    }, [
+        currentChatId,
+        endLocalDemoFlow,
+        handlePromptSubmit,
+        addMessage,
+        presetsWithFreeform,
+    ]);
+    const resolvedEmptyState = useMemo(() => {
+        if (!emptyState)
+            return undefined;
+        const { additionalContent, ...rest } = emptyState;
+        return {
+            ...rest,
+            additionalContent: typeof additionalContent === 'function'
+                ? additionalContent({ submitPreset })
+                : additionalContent,
+        };
+    }, [emptyState, submitPreset]);
     const activeScript = currentChatId
         ? scriptByChatId[currentChatId]
         : undefined;
@@ -765,7 +782,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onPromptSubmit: handlePromptSubmit,
         onChatDeleted: endLocalDemoFlow,
         promptPrefill: promptLinkPrefill,
-        emptyState,
+        emptyState: resolvedEmptyState,
         allowedAttachments,
         allowPdfAttachments,
         onAttachmentsDropped,

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
+import { ChartAreaInteractive } from '../../ui/ChartAreaInteractive/ChartAreaInteractive.js';
+import { getForecastColor } from '../../ui/ChartAreaInteractive/ChartLines.js';
+import '../../ui/Page/AppShell/AppShell.js';
+import 'react-router-dom';
+import '../../ui/Sidebar/Sidebar.js';
+import 'lucide-react';
+import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
+import '../../ui/Page/pageContext.js';
+import '@radix-ui/react-tooltip';
+import '../../ui/Tooltip/Tooltip.styl.js';
+import '../../ui/Page/PageHeader/PageHeader.styl.js';
+import '../../ui/Page/PageEmptyCanvas/PageEmptyCanvas.styl.js';
+import '../../ui/Page/PageContent/PageContent.styl.js';
+import '@homecode/ui';
+import '../../ui/Page/PageScroll/PageScroll.styl.js';
+import { PageXScroll } from '../../ui/Page/PageXScroll/PageXScroll.js';
+import '../../ui/Page/PageFooter/PageFooter.styl.js';
+import '@radix-ui/react-tabs';
+import '../../ui/Tabs/Tabs.styl.js';
+import '../../ui/Page/PageTabs/PageTabs.styl.js';
+import '../../ui/Page/PageColumns/PageColumns.styl.js';
+import '../../ui/Page/SectionHeader/SectionHeader.styl.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../ui/Table/Table.js';
+import { TextShimmer } from '../../ui/TextShimmer/TextShimmer.js';
+import { TIME_RANGES } from '../../ui/TimeRangeControls/TimeRangeControls.constants.js';
+import S from './DriversComparisonChart.styl.js';
+import { mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
+
+const ALL_TIME_RANGE = TIME_RANGES[TIME_RANGES.length - 1];
+function toForecastDataKey(id) {
+    const s = String(id);
+    return s.startsWith('forecast_') ? s : `forecast_${id}`;
+}
+function DriversComparisonChart({ payload, datasetHistorical = [], loading = false, chartLoading = false, statusHint = null, statusTone = 'muted', runAnalysisHint = false, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme = false, className, seriesInitKey, }) {
+    const [internalTimeRange, setInternalTimeRange] = useState(ALL_TIME_RANGE);
+    const [hiddenSeries, setHiddenSeries] = useState(new Set());
+    const timeRange = timeRangeProp ?? internalTimeRange;
+    const handleTimeRangeChange = useCallback((val) => {
+        if (!val)
+            return;
+        onTimeRangeChange?.(val);
+        if (timeRangeProp === undefined) {
+            setInternalTimeRange(val);
+        }
+    }, [onTimeRangeChange, timeRangeProp]);
+    const toggleSeries = useCallback((id) => {
+        const key = toForecastDataKey(id);
+        setHiddenSeries(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }, []);
+    const showSeries = useCallback((id) => {
+        const key = toForecastDataKey(id);
+        setHiddenSeries(prev => {
+            if (!prev.has(key))
+                return prev;
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+        });
+    }, []);
+    const sortedDriversWithData = useMemo(() => {
+        const driversList = payload?.drivers ?? [];
+        if (!driversList.length)
+            return [];
+        return [...driversList]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+    }, [payload?.drivers]);
+    const mergedChartData = useMemo(() => mergeBacktestsChartData(payload), [payload]);
+    const mergedWithHistorical = useMemo(() => mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, mergedChartData), [datasetHistorical, mergedChartData]);
+    const chartForecastData = useMemo(() => {
+        if (!payload?.target?.normalized_series)
+            return [];
+        return sortedDriversWithData.map((driver, idx) => ({
+            id: DRIVER_FORECAST_ID_BASE + idx,
+            name: driver.name || String(driver.id),
+            color: getForecastColor(idx + 1),
+        }));
+    }, [payload?.target?.normalized_series, sortedDriversWithData]);
+    const tableSeriesRows = useMemo(() => {
+        if (sortedDriversWithData.length === 0)
+            return [];
+        return sortedDriversWithData.map((driver, idx) => {
+            const raw = driver.importance;
+            const importance = typeof raw === 'number' && Number.isFinite(raw) ? raw : null;
+            return {
+                id: DRIVER_FORECAST_ID_BASE + idx,
+                name: driver.name || String(driver.id),
+                color: getForecastColor(idx + 1),
+                importance,
+                lag: driver.lag,
+            };
+        });
+    }, [sortedDriversWithData]);
+    const seriesInitKeyResolved = seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    const backtestsSeriesInitKeyRef = useRef('');
+    useEffect(() => {
+        if (tableSeriesRows.length === 0)
+            return;
+        const initKey = seriesInitKeyResolved;
+        if (backtestsSeriesInitKeyRef.current === initKey)
+            return;
+        backtestsSeriesInitKeyRef.current = initKey;
+        setHiddenSeries(() => {
+            const next = new Set();
+            tableSeriesRows.forEach((row, idx) => {
+                const key = toForecastDataKey(row.id);
+                if (idx >= INITIAL_VISIBLE_SERIES_COUNT) {
+                    next.add(key);
+                }
+            });
+            return next;
+        });
+    }, [seriesInitKeyResolved, tableSeriesRows]);
+    const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id)), [chartForecastData, datasetHistorical, mergedWithHistorical]);
+    const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;
+    return (jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { className: cn(S.chartShell, loading && S.chartShellLoading), children: [jsx("div", { className: S.chartSlot, children: jsxs("div", { className: S.chartWithOverlay, children: [jsx("div", { className: cn(S.chartInteractiveLayer, showEmptyOverlay && S.chartInteractiveDimmed), children: jsx(ChartAreaInteractive, { disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, chartContainerClassName: S.chartContainer, chartData: driversComparisonChartData, forecastData: chartForecastData, timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, pinMonth: undefined, onPinMonthChange: () => { }, isDarkTheme: isDarkTheme, loading: chartLoading, hasCombinedData: mergedWithHistorical.length > 0, forecastLineStyle: "solid", showLegend: false, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleSeries, ensureAnalysisSeriesVisible: showSeries }) }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint
+                                                ? 'Run a completed analysis to load the drivers comparison chart for an analysis.'
+                                                : undefined, status: statusHint ?? undefined, statusTone: statusTone }) }) }))] }) }), loading && (jsx("div", { className: S.loadingLayer, "aria-busy": "true", "aria-live": "polite", children: jsx("div", { className: S.loadingMessage, children: jsx(TextShimmer, { as: "span", className: S.loadingText, children: "Loading drivers comparison\u2026" }) }) }))] }), jsx("div", { className: S.seriesSection, children: tableSeriesRows.length === 0 ? (jsx("div", { className: S.seriesEmptyWrap, children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", align: "center", status: "No series" }) }) })) : (jsx("div", { className: S.seriesTableWrapper, children: jsx(PageXScroll, { size: "md", fullWidth: true, innerClassName: S.seriesTableContainer, scrollbarClassName: S.seriesScrollbar, children: jsxs(Table, { withBackground: true, withPaddings: true, className: S.seriesTable, children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { className: S.seriesColSeries, children: "Driver name" }), jsx(TableHead, { children: "Importance" }), jsx(TableHead, { children: "Lag" })] }) }), jsx(TableBody, { children: tableSeriesRows.map(row => {
+                                        const dataKey = toForecastDataKey(row.id);
+                                        const hidden = hiddenSeries.has(dataKey);
+                                        return (jsxs(TableRow, { className: cn(hidden && S.rowHidden), onClick: () => toggleSeries(row.id), children: [jsx(TableCell, { children: jsxs("span", { className: S.seriesLabel, children: [jsx("span", { className: S.colorSwatch, style: {
+                                                                    backgroundColor: row.color,
+                                                                } }), row.name ?? String(row.id)] }) }), jsx(TableCell, { children: formatSeriesImportance(row.importance) }), jsx(TableCell, { children: row.lag ?? '—' })] }, row.id));
+                                    }) })] }) }) })) })] }));
+}
+
+export { DriversComparisonChart };

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.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)}}.DriversComparisonChart_root__GLnlF{display:flex;flex-direction:column;gap:var(--p-4);width:100%}.DriversComparisonChart_chartShell__0AzAz{position:relative;width:100%}.DriversComparisonChart_chartShellLoading__wTLod .DriversComparisonChart_chartSlot__WKe6N{opacity:.3;pointer-events:none}.DriversComparisonChart_chartShellLoading__wTLod .recharts-line-dots{display:none}.DriversComparisonChart_chartSlot__WKe6N{width:100%}.DriversComparisonChart_loadingLayer__HlEmA{inset:0;pointer-events:none;position:absolute;z-index:10}.DriversComparisonChart_loadingMessage__Li3S7{color:var(--foreground);display:block;left:0;position:absolute;text-align:center;top:calc(50% - 4em);width:100%;z-index:1}.DriversComparisonChart_loadingText__0y3Ms{backdrop-filter:blur(10px);border-radius:var(--p-4);box-shadow:0 0 0 2px var(--page-color);color:var(--foreground);font-size:16px;font-weight:500;padding:0 var(--p-3)}.DriversComparisonChart_chartWithOverlay__SMToK{position:relative;width:100%}.DriversComparisonChart_chartInteractiveLayer__0aquh{transition:opacity .2s ease-out;width:100%}.DriversComparisonChart_chartInteractiveDimmed__us1dv{opacity:.3;pointer-events:none}.DriversComparisonChart_chartInteractiveDimmed__us1dv .recharts-line-dots{display:none}.DriversComparisonChart_chartEmptyOverlay__eXqzk{align-items:center;display:flex;inset:0;justify-content:center;padding:var(--p-4);pointer-events:none;position:absolute;z-index:6}.DriversComparisonChart_chartEmptyBlurb__Tjy9E{max-width:42rem;padding:0 var(--p-3)}.DriversComparisonChart_seriesEmptyWrap__RyRs5{display:flex;justify-content:center;padding:var(--p-8) var(--p-4)}.DriversComparisonChart_seriesSection__yrf4I{width:100%}.DriversComparisonChart_seriesTableWrapper__oredC{margin:0 calc(var(--page-x-padding)*-1);position:relative}.DriversComparisonChart_seriesTableContainer__dhfXK{overflow-x:auto;position:relative;width:100%}.DriversComparisonChart_seriesScrollbar__2jgk6{bottom:calc(var(--p-7)*-1 + 2px)!important}.DriversComparisonChart_seriesTable__NybPR{max-width:100%;table-layout:auto;width:100%}.DriversComparisonChart_seriesTable__NybPR tr{cursor:pointer;position:relative}.DriversComparisonChart_seriesTable__NybPR td:not(:first-child),.DriversComparisonChart_seriesTable__NybPR th:not(:first-child){text-align:right}.DriversComparisonChart_seriesColSeries__--0mj{text-align:left;vertical-align:middle}.DriversComparisonChart_rowHidden__Fwhna{opacity:.4}.DriversComparisonChart_colorSwatch__o3ZVr{border-radius:2px;display:inline-flex;flex-shrink:0;height:10px;margin-right:var(--p-2);width:10px}.DriversComparisonChart_seriesLabel__Aidof{display:-webkit-box;-webkit-line-clamp:3;max-width:60vw;min-width:0;padding:var(--p-2) 0;-webkit-box-orient:vertical;white-space:break-spaces}.DriversComparisonChart_chartContainer__1eM-O{margin-left:calc(var(--page-x-padding)*-1 + 26px);max-width:calc(100% + 60px);transition:opacity .3s ease-out;width:calc(100% + 60px)}.DriversComparisonChart_chartContainer__1eM-O .recharts-yAxis-tick-labels{display:none}@media (max-width:768px){.DriversComparisonChart_chartContainer__1eM-O{margin-left:calc(var(--page-x-padding)*-1 + 10px);width:calc(100% + 30px)}}";
+var S = {"root":"DriversComparisonChart_root__GLnlF","chartShell":"DriversComparisonChart_chartShell__0AzAz","chartShellLoading":"DriversComparisonChart_chartShellLoading__wTLod","chartSlot":"DriversComparisonChart_chartSlot__WKe6N","loadingLayer":"DriversComparisonChart_loadingLayer__HlEmA","loadingMessage":"DriversComparisonChart_loadingMessage__Li3S7","loadingText":"DriversComparisonChart_loadingText__0y3Ms","chartWithOverlay":"DriversComparisonChart_chartWithOverlay__SMToK","chartInteractiveLayer":"DriversComparisonChart_chartInteractiveLayer__0aquh","chartInteractiveDimmed":"DriversComparisonChart_chartInteractiveDimmed__us1dv","chartEmptyOverlay":"DriversComparisonChart_chartEmptyOverlay__eXqzk","chartEmptyBlurb":"DriversComparisonChart_chartEmptyBlurb__Tjy9E","seriesEmptyWrap":"DriversComparisonChart_seriesEmptyWrap__RyRs5","seriesSection":"DriversComparisonChart_seriesSection__yrf4I","seriesTableWrapper":"DriversComparisonChart_seriesTableWrapper__oredC","seriesTableContainer":"DriversComparisonChart_seriesTableContainer__dhfXK","seriesScrollbar":"DriversComparisonChart_seriesScrollbar__2jgk6","seriesTable":"DriversComparisonChart_seriesTable__NybPR","seriesColSeries":"DriversComparisonChart_seriesColSeries__--0mj","rowHidden":"DriversComparisonChart_rowHidden__Fwhna","colorSwatch":"DriversComparisonChart_colorSwatch__o3ZVr","seriesLabel":"DriversComparisonChart_seriesLabel__Aidof","chartContainer":"DriversComparisonChart_chartContainer__1eM-O"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js

@@ -0,0 +1,159 @@
+import { normalizeToMonthStart, getPreviousMonth, getNextMonth } from '../../../utils/chartConnectionPoint.js';
+
+const DRIVER_FORECAST_ID_BASE = 8_000_000;
+const INITIAL_VISIBLE_SERIES_COUNT = 3;
+/** Months of historical context before the earliest forecast month (inclusive). */
+const DRIVER_COMPARISON_CHART_LEAD_MONTHS = 6;
+/** Ignore leading months where drivers are numerically zero (API often fills 0; lines look empty until real signal). */
+const DRIVER_FORECAST_NONZERO_EPS = 1e-9;
+function formatSeriesImportance(value) {
+    if (value === null)
+        return '—';
+    return `${value.toFixed(1)}%`;
+}
+function mergeBacktestsChartData(payload) {
+    if (!payload?.target?.normalized_series)
+        return [];
+    const norm = (d) => normalizeToMonthStart(d);
+    const map = new Map();
+    const targetSeries = payload.target.normalized_series;
+    Object.entries(targetSeries).forEach(([dateStr, val]) => {
+        if (val === null || val === undefined)
+            return;
+        const k = norm(dateStr);
+        const existing = map.get(k) ?? { date: k };
+        existing.historical = val;
+        map.set(k, existing);
+    });
+    if (payload.drivers?.length) {
+        const sorted = [...payload.drivers]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+        sorted.forEach((driver, idx) => {
+            const fid = DRIVER_FORECAST_ID_BASE + idx;
+            const series = driver.normalized_series;
+            Object.entries(series).forEach(([dateStr, val]) => {
+                if (val === null || val === undefined)
+                    return;
+                const k = norm(dateStr);
+                const existing = map.get(k) ?? { date: k };
+                existing[`forecast_${fid}`] = val;
+                map.set(k, existing);
+            });
+        });
+    }
+    return Array.from(map.values()).sort((a, b) => a.date.localeCompare(b.date));
+}
+/** While drivers comparison is not loaded: dataset historical only. After load: normalized historical from target.normalized_series (see mergeBacktestsChartData) replaces it. */
+function mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, backtestsMerged) {
+    if (backtestsMerged.length === 0) {
+        if (datasetHistorical.length === 0)
+            return [];
+        return datasetHistorical
+            .map(p => {
+            const k = normalizeToMonthStart(p.date);
+            const histVal = p.historical;
+            return {
+                date: k,
+                ...(typeof histVal === 'number' ? { historical: histVal } : {}),
+            };
+        })
+            .sort((a, b) => a.date.localeCompare(b.date));
+    }
+    return backtestsMerged;
+}
+/** Lower-median of ISO month strings (YYYY-MM-01 sorts lexicographically). */
+function medianSortedIsoMonth(months) {
+    const s = [...months].sort((a, b) => a.localeCompare(b));
+    return s[Math.floor((s.length - 1) / 2)];
+}
+/**
+ * For each driver, first month with materially non-zero value; anchor = median of those months.
+ * (Min is too early with outliers; max matched logs where one driver started 2017-12 while most started 2015-01.)
+ */
+function getZoomAnchorMonthFromDriverMaterialStarts(points, forecastIds) {
+    const perDriverFirstMaterial = [];
+    for (const id of forecastIds) {
+        let minForId = null;
+        for (const p of points) {
+            const v = p[`forecast_${id}`];
+            if (typeof v !== 'number' ||
+                !Number.isFinite(v) ||
+                Math.abs(v) <= DRIVER_FORECAST_NONZERO_EPS) {
+                continue;
+            }
+            const d = normalizeToMonthStart(p.date);
+            if (minForId === null || d.localeCompare(minForId) < 0)
+                minForId = d;
+        }
+        if (minForId === null) {
+            return { anchor: null, perDriverFirstMaterial };
+        }
+        perDriverFirstMaterial.push(minForId);
+    }
+    const anchor = medianSortedIsoMonth(perDriverFirstMaterial);
+    return { anchor, perDriverFirstMaterial };
+}
+function subtractMonthsFromMonthStart(date, count) {
+    let result = date;
+    for (let i = 0; i < count; i++) {
+        result = getPreviousMonth(result);
+    }
+    return result;
+}
+/**
+ * Backtests payload often starts at the same month for target + drivers, so xMin falls
+ * in a range with no rows. Prepend historical-only months from raw dataset series
+ * (scaled to the first normalized point) so the lead-in shows the target line alone.
+ */
+function prependHistoricalLeadFromDataset(points, datasetHistorical, xMin) {
+    if (points.length === 0)
+        return points;
+    const firstMonth = normalizeToMonthStart(points[0].date);
+    if (xMin.localeCompare(firstMonth) >= 0)
+        return points;
+    const rawByMonth = new Map();
+    for (const p of datasetHistorical) {
+        const k = normalizeToMonthStart(p.date);
+        const v = p.historical;
+        if (typeof v === 'number' && Number.isFinite(v))
+            rawByMonth.set(k, v);
+    }
+    const histFirst = points[0].historical;
+    const rawFirst = rawByMonth.get(firstMonth);
+    if (typeof histFirst !== 'number' ||
+        !Number.isFinite(histFirst) ||
+        typeof rawFirst !== 'number' ||
+        !Number.isFinite(rawFirst) ||
+        Math.abs(rawFirst) <= 1e-15) {
+        return points;
+    }
+    const lead = [];
+    let m = xMin;
+    while (m.localeCompare(firstMonth) < 0) {
+        const rawM = rawByMonth.get(m);
+        if (typeof rawM === 'number' && Number.isFinite(rawM)) {
+            lead.push({
+                date: m,
+                historical: histFirst * (rawM / rawFirst),
+            });
+        }
+        m = getNextMonth(m);
+    }
+    return [...lead, ...points];
+}
+function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds) {
+    if (mergedWithHistorical.length === 0)
+        return mergedWithHistorical;
+    if (forecastIds.length === 0)
+        return mergedWithHistorical;
+    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
+    if (anchorMonth === null)
+        return mergedWithHistorical;
+    const xMin = subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
+    const withLead = prependHistoricalLeadFromDataset(mergedWithHistorical, datasetHistorical, xMin);
+    return withLead.filter(p => normalizeToMonthStart(p.date) >= xMin);
+}
+
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, prependHistoricalLeadFromDataset, subtractMonthsFromMonthStart };

package/dist/esm/index.js

@@ -104,6 +104,8 @@ export { DriverMap } from './components/widgets/DriverMap/DriverMap.js';
 export { getCategoryIcon } from './components/widgets/DriverMap/driverCategoryIcon.js';
 export { getDriverImportance, getHighestImportanceDriver } from './components/widgets/DriverMap/driverMapSelection.js';
 export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage } from './components/widgets/DriverMap/driverMapGeography.js';
+export { DriversComparisonChart } from './components/widgets/DriversComparisonChart/DriversComparisonChart.js';
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData } from './components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js';
 export { SybilionAppHeader } from './components/widgets/SybilionAppHeader/SybilionAppHeader.js';
 export { SybilionAuthLayout } from './components/widgets/SybilionAuthLayout/SybilionAuthLayout.js';
 export { SybilionAuthHeadline } from './components/widgets/SybilionAuthLayout/SybilionAuthHeadline.js';

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.d.ts

@@ -1,7 +1,15 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+export type ChatEmptyStateContext = {
+    submitPreset: (preset: ChatPreset) => void | Promise<void>;
+};
 export interface ChatEmptyStateProps {
     icon?: React.ReactNode;
     title?: string;
     description?: string;
-    /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+    /** Extra block below description (resolved before render in `ChatEmptyState`). */
     additionalContent?: React.ReactNode;
 }
+/** Passed to `ChatSheet` / `useChatPanelChromeModel`; function form resolved before render. */
+export interface ChatEmptyStateConfig extends Omit<ChatEmptyStateProps, 'additionalContent'> {
+    additionalContent?: React.ReactNode | ((ctx: ChatEmptyStateContext) => React.ReactNode);
+}

package/dist/esm/types/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.d.ts

@@ -1,7 +1,7 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
-import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
+import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
 export type UseChatPanelChromeModelInput = {
     /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
     embedAsPage: boolean;
@@ -16,7 +16,7 @@ export type UseChatPanelChromeModelInput = {
     /** Renders `[CHART]` tokens in assistant messages. */
     renderMessageChart?: () => React.ReactNode;
     /** Forwarded to `ChatChrome` when the thread is empty. */
-    emptyState?: ChatEmptyStateProps;
+    emptyState?: ChatEmptyStateConfig;
     /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
     allowedAttachments?: readonly string[];
     /** When true, PDF drops are accepted and parsed to plain text. */

package/dist/esm/types/src/components/ui/Chat/index.d.ts

@@ -12,6 +12,7 @@ export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } fro
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
+export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
 export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/dist/esm/types/src/components/widgets/DriversComparisonChart/DriversComparisonChart.d.ts

@@ -0,0 +1,18 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+export type DriversComparisonChartProps = {
+    payload: BacktestsComponentPayload | null;
+    datasetHistorical?: ChartDataPoint[];
+    loading?: boolean;
+    chartLoading?: boolean;
+    statusHint?: string | null;
+    statusTone?: 'destructive' | 'muted';
+    runAnalysisHint?: boolean;
+    timeRange?: string;
+    onTimeRangeChange?: (range: string) => void;
+    isDarkTheme?: boolean;
+    className?: string;
+    /** Resets visible series when this key changes (e.g. selected analysis id). */
+    seriesInitKey?: string;
+};
+export declare function DriversComparisonChart({ payload, datasetHistorical, loading, chartLoading, statusHint, statusTone, runAnalysisHint, timeRange: timeRangeProp, onTimeRangeChange, isDarkTheme, className, seriesInitKey, }: DriversComparisonChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.d.ts

@@ -0,0 +1,26 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+export declare const DRIVER_FORECAST_ID_BASE = 8000000;
+export declare const INITIAL_VISIBLE_SERIES_COUNT = 3;
+/** Months of historical context before the earliest forecast month (inclusive). */
+export declare const DRIVER_COMPARISON_CHART_LEAD_MONTHS = 6;
+export declare function formatSeriesImportance(value: number | null): string;
+export declare function mergeBacktestsChartData(payload: BacktestsComponentPayload | null): ChartDataPoint[];
+/** While drivers comparison is not loaded: dataset historical only. After load: normalized historical from target.normalized_series (see mergeBacktestsChartData) replaces it. */
+export declare function mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical: ChartDataPoint[], backtestsMerged: ChartDataPoint[]): ChartDataPoint[];
+/**
+ * For each driver, first month with materially non-zero value; anchor = median of those months.
+ * (Min is too early with outliers; max matched logs where one driver started 2017-12 while most started 2015-01.)
+ */
+export declare function getZoomAnchorMonthFromDriverMaterialStarts(points: ChartDataPoint[], forecastIds: number[]): {
+    anchor: string | null;
+    perDriverFirstMaterial: string[];
+};
+export declare function subtractMonthsFromMonthStart(date: string, count: number): string;
+/**
+ * Backtests payload often starts at the same month for target + drivers, so xMin falls
+ * in a range with no rows. Prepend historical-only months from raw dataset series
+ * (scaled to the first normalized point) so the lead-in shows the target line alone.
+ */
+export declare function prependHistoricalLeadFromDataset(points: ChartDataPoint[], datasetHistorical: ChartDataPoint[], xMin: string): ChartDataPoint[];
+export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[]): ChartDataPoint[];

package/dist/esm/types/src/components/widgets/DriversComparisonChart/index.d.ts

@@ -0,0 +1,2 @@
+export { DriversComparisonChart, type DriversComparisonChartProps, } from './DriversComparisonChart';
+export { buildDriversComparisonChartData, DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, formatSeriesImportance, INITIAL_VISIBLE_SERIES_COUNT, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, } from './driversComparisonChart.helpers';

package/dist/esm/types/src/docs/pages/DriversComparisonChartPage.d.ts

@@ -0,0 +1 @@
+export default function DriversComparisonChartPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -68,6 +68,7 @@ export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
 export * from './components/widgets/DriverCard';
 export * from './components/widgets/DriverMap';
+export * from './components/widgets/DriversComparisonChart';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/dist/esm/utils/chartConnectionPoint.js

@@ -101,5 +101,13 @@ function getPreviousMonth(date) {
     d.setMonth(d.getMonth() - 1);
     return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
 }
+/**
+ * Get the next month date (first day of next month)
+ */
+function getNextMonth(date) {
+    const d = new Date(date);
+    d.setMonth(d.getMonth() + 1);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`;
+}
 
-export { ensureChartForecastBridge, findLastValidHistoricalChartPoint, getPreviousMonth, normalizeToMonthStart };
+export { ensureChartForecastBridge, findLastValidHistoricalChartPoint, getNextMonth, getPreviousMonth, normalizeToMonthStart };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.ts

@@ -1,7 +1,23 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+
+export type ChatEmptyStateContext = {
+  submitPreset: (preset: ChatPreset) => void | Promise<void>;
+};
+
 export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
   description?: string;
-  /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+  /** Extra block below description (resolved before render in `ChatEmptyState`). */
   additionalContent?: React.ReactNode;
 }
+
+/** Passed to `ChatSheet` / `useChatPanelChromeModel`; function form resolved before render. */
+export interface ChatEmptyStateConfig extends Omit<
+  ChatEmptyStateProps,
+  'additionalContent'
+> {
+  additionalContent?:
+    | React.ReactNode
+    | ((ctx: ChatEmptyStateContext) => React.ReactNode);
+}

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -45,6 +45,7 @@ import { useSidebar } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
+import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 
 export type UseChatPanelChromeModelInput = {
@@ -61,7 +62,7 @@ export type UseChatPanelChromeModelInput = {
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
   /** Forwarded to `ChatChrome` when the thread is empty. */
-  emptyState?: ChatEmptyStateProps;
+  emptyState?: ChatEmptyStateConfig;
   /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
   allowedAttachments?: readonly string[];
   /** When true, PDF drops are accepted and parsed to plain text. */
@@ -615,7 +616,7 @@ export function useChatPanelChromeModel({
     ],
   );
 
-  const submitPreset = async (preset: ChatPreset) => {
+  const submitPreset = useCallback(async (preset: ChatPreset) => {
     const script = preset.script;
     const scriptGraph = isPresetScriptGraph(script);
     const hasLinearScript = Array.isArray(script) && script.length > 0;
@@ -705,7 +706,25 @@ export function useChatPanelChromeModel({
     } finally {
       setLocalUiBusy(false);
     }
-  };
+  }, [
+    currentChatId,
+    endLocalDemoFlow,
+    handlePromptSubmit,
+    addMessage,
+    presetsWithFreeform,
+  ]);
+
+  const resolvedEmptyState = useMemo((): ChatEmptyStateProps | undefined => {
+    if (!emptyState) return undefined;
+    const { additionalContent, ...rest } = emptyState;
+    return {
+      ...rest,
+      additionalContent:
+        typeof additionalContent === 'function'
+          ? additionalContent({ submitPreset })
+          : additionalContent,
+    };
+  }, [emptyState, submitPreset]);
 
   const activeScript = currentChatId
     ? scriptByChatId[currentChatId]
@@ -1017,7 +1036,7 @@ export function useChatPanelChromeModel({
     onPromptSubmit: handlePromptSubmit,
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
-    emptyState,
+    emptyState: resolvedEmptyState,
     allowedAttachments,
     allowPdfAttachments,
     onAttachmentsDropped,

package/src/components/ui/Chat/index.ts

@@ -25,6 +25,11 @@ export type {
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
+export type {
+  ChatEmptyStateConfig,
+  ChatEmptyStateContext,
+  ChatEmptyStateProps,
+} from './ChatEmptyState/ChatEmptyState.types';
 export type {
   Chat as ChatType,
   ChatAttachmentDropItem,