@sybilion/uilib 1.3.2 → 1.3.3

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

@@ -6,7 +6,7 @@ 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 { getForecastColor, resolveQuantileBandFillForForecastLine } from '../../ChartAreaInteractive/ChartLines.js';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
 import { ensureChartForecastBridge } from '../../../../utils/chartConnectionPoint.js';
 import { createChart, LineSeries, LineType, LineStyle } from 'lightweight-charts';
@@ -14,6 +14,21 @@ import S from './LightweightForecastChart.styl.js';
 import { buildLightweightChartOptions, buildHistoricalLineData, buildForecastLineData, buildQuantileBandCustomData, findNearestChartRow } from './lightweightForecastChart.helpers.js';
 import { QuantileBandPaneView } from './quantileBandCustomSeries.js';
 
+function forecastIndexForQuantileBand(band, forecastData) {
+    if (!forecastData.length)
+        return 0;
+    if (band.forecastSeriesId != null) {
+        const idx = forecastData.findIndex(f => f.id === band.forecastSeriesId);
+        if (idx !== -1)
+            return idx;
+    }
+    return 0;
+}
+function quantileBandFillForConfig(band, forecastData) {
+    const fi = forecastIndexForQuantileBand(band, forecastData);
+    const lineColor = forecastData[fi]?.color?.toString() ?? getForecastColor(fi);
+    return resolveQuantileBandFillForForecastLine(lineColor, fi);
+}
 function clampTooltipTranslate(args) {
     const { coordinate, viewW, viewH, tooltipWidth: tw, tooltipHeight: th, offset, edgeMargin, } = args;
     const minX = edgeMargin;
@@ -93,10 +108,10 @@ function LightweightForecastChart(props) {
                 color: f.color?.toString() ?? getForecastColor(index),
             };
         });
-        quantileBands?.forEach((band, index) => {
+        quantileBands?.forEach(band => {
             base[band.key] = {
                 label: band.name,
-                color: band.color ?? getForecastQuantileBandColor(index),
+                color: quantileBandFillForConfig(band, forecastData),
             };
         });
         return base;
@@ -200,8 +215,8 @@ function LightweightForecastChart(props) {
             }),
         });
         const bands = new Map();
-        quantileBands?.forEach((band, index) => {
-            const fill = band.color ?? getForecastQuantileBandColor(index);
+        quantileBands?.forEach(band => {
+            const fill = quantileBandFillForConfig(band, forecastData);
             const view = new QuantileBandPaneView({
                 fill,
                 stroke: band.strokeWidth ? fill : undefined,
@@ -297,7 +312,7 @@ function LightweightForecastChart(props) {
                     payload: row,
                 });
             });
-            bandsCfg?.forEach((band, index) => {
+            bandsCfg?.forEach(band => {
                 if (hid.has(band.key))
                     return;
                 const tuple = row[band.key];
@@ -305,7 +320,7 @@ function LightweightForecastChart(props) {
                     tuple.length === 2 &&
                     typeof tuple[0] === 'number' &&
                     typeof tuple[1] === 'number') {
-                    const color = band.color ?? getForecastQuantileBandColor(index);
+                    const color = quantileBandFillForConfig(band, forecastsList);
                     payload.push({
                         type: 'line',
                         name: band.name,
@@ -366,11 +381,11 @@ function LightweightForecastChart(props) {
         for (const [key, api] of model.forecasts.entries()) {
             api.setData(buildForecastLineData(bridgedChartData, key));
         }
-        quantileBands?.forEach((band, index) => {
+        quantileBands?.forEach(band => {
             const entry = model.bands.get(band.key);
             if (!entry)
                 return;
-            const fill = band.color ?? getForecastQuantileBandColor(index);
+            const fill = quantileBandFillForConfig(band, forecastData);
             entry.view.updateStyle({
                 fill,
                 stroke: band.strokeWidth ? fill : undefined,
@@ -382,7 +397,7 @@ function LightweightForecastChart(props) {
             entry.api.setData(buildQuantileBandCustomData(bridgedChartData, band.key));
         });
         scheduleFitTimeScale(model.chart);
-    }, [bridgedChartData, quantileBands]);
+    }, [bridgedChartData, quantileBands, forecastData]);
     // Visibility toggles
     useEffect(() => {
         const model = modelRef.current;

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

@@ -17,6 +17,11 @@ const FORECAST_COLORS_MAP = {
 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]];
+/** Same tint logic as intervals/threshold overlays: band fill follows forecast line hex when known. */
+function resolveQuantileBandFillForForecastLine(lineColor, forecastIndex) {
+    const mapped = FORECAST_COLORS_MAP[lineColor];
+    return mapped ?? getForecastQuantileBandColor(forecastIndex);
+}
 // 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';
@@ -78,4 +83,4 @@ const ChartLines = memo(({ chartData, forecastData, hiddenSeries, isDarkTheme, s
 });
 ChartLines.displayName = 'ChartLines';
 
-export { ChartLines, FORECAST_COLORS_MAP, FORECAST_LINE_COLORS, getForecastColor, getForecastQuantileBandColor };
+export { ChartLines, FORECAST_COLORS_MAP, FORECAST_LINE_COLORS, getForecastColor, getForecastQuantileBandColor, resolveQuantileBandFillForForecastLine };

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { DEFAULT_QUANTILE_BAND_COLOR } from '../../Chart/components/QuantileBands.js';
-import { FORECAST_LINE_COLORS, FORECAST_COLORS_MAP, getForecastQuantileBandColor } from '../ChartLines.js';
+import { FORECAST_LINE_COLORS, resolveQuantileBandFillForForecastLine } from '../ChartLines.js';
 
 const DEFAULT_FORECAST_COLORS = {
     lineColor: DEFAULT_QUANTILE_BAND_COLOR,
@@ -20,9 +20,7 @@ function useForecastColor(selectedForecast, forecastData) {
         const forecastItem = forecastData[forecastIndex];
         const lineColor = forecastItem.color ||
             FORECAST_LINE_COLORS[forecastIndex % FORECAST_LINE_COLORS.length];
-        const quantileBandColor = forecastItem.color
-            ? FORECAST_COLORS_MAP[forecastItem.color]
-            : getForecastQuantileBandColor(forecastIndex);
+        const quantileBandColor = resolveQuantileBandFillForForecastLine(lineColor, forecastIndex);
         return {
             lineColor,
             quantileBandColor,

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

@@ -0,0 +1,30 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect, useCallback } from 'react';
+import { Button } from '../Button/Button.js';
+import { Dialog } from '../Dialog/Dialog.js';
+
+function Confirm({ children, open, onOpenChange, onConfirm, onCancel, title = 'Confirm', confirmLabel = 'Confirm', cancelLabel = 'Cancel', trigger, disabled, confirmVariant = 'default', }) {
+    const closedByConfirmRef = useRef(false);
+    useEffect(() => {
+        if (open) {
+            closedByConfirmRef.current = false;
+        }
+    }, [open]);
+    const handleOpenChange = useCallback((next) => {
+        if (!next) {
+            if (!closedByConfirmRef.current) {
+                onCancel?.();
+            }
+            closedByConfirmRef.current = false;
+        }
+        onOpenChange(next);
+    }, [onCancel, onOpenChange]);
+    const handleConfirm = () => {
+        closedByConfirmRef.current = true;
+        onConfirm();
+        handleOpenChange(false);
+    };
+    return (jsx(Dialog, { open: open, onOpenChange: handleOpenChange, disabled: disabled, trigger: trigger, title: title, width: "min(fit-content, calc(100vw - var(--p-4)))", content: children, footerAlignment: "between", footer: jsxs(Fragment, { children: [jsx(Button, { type: "button", variant: "outline", onClick: () => handleOpenChange(false), children: cancelLabel }), jsx(Button, { type: "button", variant: confirmVariant, onClick: handleConfirm, children: confirmLabel })] }) }));
+}
+
+export { Confirm };

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

@@ -118,7 +118,7 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
                     maxHeight: maxHeight
                         ? `min(${maxHeight}, calc(100% - var(--p-4)))`
                         : null,
-                }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle })), !disableCloseButton && (jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(XIcon, { size: 16 }) })), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: cn(S[`align-${footerAlignment}`], footerClassName), children: footer }))] })] }));
+                }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle })), !disableCloseButton && (jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(XIcon, { size: 16 }) })), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: cn(S.footer, S[`align-${footerAlignment}`], footerClassName), children: footer }))] })] }));
     const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
     return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && createPortal(dialogContent, document.body)] }));
 }

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

@@ -1,7 +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)}}.Dialog_dialogOverlay__DE-Lj{backdrop-filter:blur(4px);background-color:var(--background-alpha-700);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialog_dialogOverlay__DE-Lj.Dialog_isOpen__KU869{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_fadeIn__bMYrw;animation-timing-function:ease-out;opacity:1}.Dialog_dialogContent__9aiOO{border-radius:20px;box-shadow:0 0 0 1px var(--border),0 10px 15px -3px var(--border),0 4px 6px -2px var(--border);display:flex;left:50%;max-height:calc(100% - var(--p-4));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%) scale(.95);transition:all .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.dark .Dialog_dialogContent__9aiOO{box-shadow:0 0 0 1px var(--border),0 10px 15px -3px oklch(0 0 0),0 4px 6px -2px oklch(0 0 0)}.Dialog_dialogContent__9aiOO.Dialog_isOpen__KU869{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_dialogIn__pAese;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialog_dialogContent__9aiOO.Dialog_isClosed__iUpMZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_dialogOut__U2hfZ;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:768px){.Dialog_dialogContent__9aiOO{max-width:calc(100% - var(--p-4));width:calc(100% - var(--p-4))}}.Dialog_size-wide__TgCOo{max-width:calc(100% - var(--p-4))}@media (min-width:768px){.Dialog_size-wide__TgCOo{max-width:80rem}}.Dialog_dialogDescription__vcdnx{color:var(--muted-foreground);font-size:.875rem}.Dialog_dialogClose__v3o4O{align-items:center;background-color:transparent;border:none;border-radius:.125rem;cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.7;outline:none;position:absolute;right:var(--p-2);top:var(--p-2);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialog_dialogClose__v3o4O:hover{opacity:1;transform:scale(1.1)}.Dialog_dialogClose__v3o4O:focus-visible{box-shadow:0 0 0 2px var(--ring)}.Dialog_dialogClose__v3o4O:disabled{pointer-events:none}.Dialog_dialogContent__9aiOO [data-slot=card-footer]{width:100%}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-left__ml-lG{justify-content:flex-start}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-center__3bzlB{justify-content:center}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-right__uV3uE{justify-content:flex-end}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-between__AFcCs{justify-content:space-between}@keyframes Dialog_fadeIn__bMYrw{0%{opacity:0}to{opacity:1}}@keyframes Dialog_fadeOut__gOjrp{0%{opacity:1}to{opacity:0}}@keyframes Dialog_dialogIn__pAese{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialog_dialogOut__U2hfZ{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
-var S = {"dialogOverlay":"Dialog_dialogOverlay__DE-Lj","isOpen":"Dialog_isOpen__KU869","fadeIn":"Dialog_fadeIn__bMYrw","dialogContent":"Dialog_dialogContent__9aiOO","dialogIn":"Dialog_dialogIn__pAese","isClosed":"Dialog_isClosed__iUpMZ","dialogOut":"Dialog_dialogOut__U2hfZ","size-wide":"Dialog_size-wide__TgCOo","dialogDescription":"Dialog_dialogDescription__vcdnx","dialogClose":"Dialog_dialogClose__v3o4O","align-left":"Dialog_align-left__ml-lG","align-center":"Dialog_align-center__3bzlB","align-right":"Dialog_align-right__uV3uE","align-between":"Dialog_align-between__AFcCs","fadeOut":"Dialog_fadeOut__gOjrp"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Dialog_dialogOverlay__DE-Lj{backdrop-filter:blur(4px);background-color:var(--background-alpha-700);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialog_dialogOverlay__DE-Lj.Dialog_isOpen__KU869{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_fadeIn__bMYrw;animation-timing-function:ease-out;opacity:1}.Dialog_dialogContent__9aiOO{border-radius:20px;box-shadow:0 0 0 1px var(--border),0 10px 15px -3px var(--border),0 4px 6px -2px var(--border);display:flex;left:50%;max-height:calc(100% - var(--p-4));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%) scale(.95);transition:all .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.dark .Dialog_dialogContent__9aiOO{box-shadow:0 0 0 1px var(--border),0 10px 15px -3px oklch(0 0 0),0 4px 6px -2px oklch(0 0 0)}.Dialog_dialogContent__9aiOO.Dialog_isOpen__KU869{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_dialogIn__pAese;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialog_dialogContent__9aiOO.Dialog_isClosed__iUpMZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialog_dialogOut__U2hfZ;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:768px){.Dialog_dialogContent__9aiOO{max-width:calc(100% - var(--p-4));width:calc(100% - var(--p-4))}}.Dialog_size-wide__TgCOo{max-width:calc(100% - var(--p-4))}@media (min-width:768px){.Dialog_size-wide__TgCOo{max-width:80rem}}.Dialog_dialogDescription__vcdnx{color:var(--muted-foreground);font-size:.875rem}.Dialog_dialogClose__v3o4O{align-items:center;background-color:transparent;border:none;border-radius:.125rem;cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.7;outline:none;position:absolute;right:var(--p-2);top:var(--p-2);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialog_dialogClose__v3o4O:hover{opacity:1;transform:scale(1.1)}.Dialog_dialogClose__v3o4O:focus-visible{box-shadow:0 0 0 2px var(--ring)}.Dialog_dialogClose__v3o4O:disabled{pointer-events:none}.Dialog_dialogContent__9aiOO [data-slot=card-footer]{width:100%}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-left__ml-lG{justify-content:flex-start}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-center__3bzlB{justify-content:center}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-right__uV3uE{justify-content:flex-end}.Dialog_dialogContent__9aiOO [data-slot=card-footer].Dialog_align-between__AFcCs{justify-content:space-between}.Dialog_footer__7U5vn button:not(:last-child){margin-right:var(--p-2)}@keyframes Dialog_fadeIn__bMYrw{0%{opacity:0}to{opacity:1}}@keyframes Dialog_fadeOut__gOjrp{0%{opacity:1}to{opacity:0}}@keyframes Dialog_dialogIn__pAese{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialog_dialogOut__U2hfZ{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
+var S = {"dialogOverlay":"Dialog_dialogOverlay__DE-Lj","isOpen":"Dialog_isOpen__KU869","fadeIn":"Dialog_fadeIn__bMYrw","dialogContent":"Dialog_dialogContent__9aiOO","dialogIn":"Dialog_dialogIn__pAese","isClosed":"Dialog_isClosed__iUpMZ","dialogOut":"Dialog_dialogOut__U2hfZ","size-wide":"Dialog_size-wide__TgCOo","dialogDescription":"Dialog_dialogDescription__vcdnx","dialogClose":"Dialog_dialogClose__v3o4O","align-left":"Dialog_align-left__ml-lG","align-center":"Dialog_align-center__3bzlB","align-right":"Dialog_align-right__uV3uE","align-between":"Dialog_align-between__AFcCs","footer":"Dialog_footer__7U5vn","fadeOut":"Dialog_fadeOut__gOjrp"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/index.js

@@ -28,6 +28,7 @@ export { ChatPresets } from './components/ui/Chat/ChatPresets/ChatPresets.js';
 export { MessageRole } from './components/ui/Chat/Chat.types.js';
 export { CsvIcon } from './components/icons/CsvIcon/CsvIcon.js';
 export { Checkbox } from './components/ui/Checkbox/Checkbox.js';
+export { Confirm } from './components/ui/Confirm/Confirm.js';
 export { Dialog } from './components/ui/Dialog/Dialog.js';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './components/ui/Drawer/Drawer.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/DropdownMenu/DropdownMenu.js';

package/dist/esm/types/src/components/ui/Chart/chartForecastVisualization.types.d.ts

@@ -72,6 +72,8 @@ export interface ForecastVisualizationRow {
 }
 export interface QuantileBandConfig {
     key: string;
+    /** When set, band fill follows this forecast series line color (LW chart). */
+    forecastSeriesId?: number;
     quantiles: [string, string];
     opacity: number;
     color?: string;

package/dist/esm/types/src/components/ui/ChartAreaInteractive/ChartLines.d.ts

@@ -32,6 +32,8 @@ export declare const FORECAST_COLORS_MAP: {
 export declare const FORECAST_LINE_COLORS: string[];
 export declare const getForecastColor: (index: number) => string;
 export declare const getForecastQuantileBandColor: (index: number) => any;
+/** Same tint logic as intervals/threshold overlays: band fill follows forecast line hex when known. */
+export declare function resolveQuantileBandFillForForecastLine(lineColor: string, forecastIndex: number): string;
 export declare const ChartLines: import("react").MemoExoticComponent<({ chartData, forecastData, hiddenSeries, isDarkTheme, shouldAnimate, historicalLineColor, showLegend, forecastLineStyle, disableHistoricalAnimation, }: {
     chartData: ChartDataPoint[];
     forecastData?: ForecastItemData[];

package/dist/esm/types/src/components/ui/Confirm/Confirm.d.ts

@@ -0,0 +1,2 @@
+import type { ConfirmProps } from './Confirm.types';
+export declare function Confirm({ children, open, onOpenChange, onConfirm, onCancel, title, confirmLabel, cancelLabel, trigger, disabled, confirmVariant, }: ConfirmProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Confirm/Confirm.types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { ButtonVariant } from '#uilib/components/ui/Button/Button.types';
+export interface ConfirmProps {
+    children: ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    title?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    trigger?: ReactNode;
+    disabled?: boolean;
+    confirmVariant?: Extract<ButtonVariant, 'default' | 'destructive'>;
+}

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

@@ -0,0 +1,2 @@
+export { Confirm } from './Confirm';
+export type { ConfirmProps } from './Confirm.types';

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

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

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

@@ -17,6 +17,7 @@ export * from './components/ui/Chart';
 export * from './components/ui/ChartAreaInteractive';
 export * from './components/ui/Chat';
 export * from './components/ui/Checkbox';
+export * from './components/ui/Confirm';
 export * from './components/ui/Dialog';
 export * from './components/ui/Drawer';
 export * from './components/ui/DropdownMenu';

package/package.json

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

package/src/components/ui/Chart/chartForecastVisualization.types.ts

@@ -78,6 +78,8 @@ export interface ForecastVisualizationRow {
 
 export interface QuantileBandConfig {
   key: string;
+  /** When set, band fill follows this forecast series line color (LW chart). */
+  forecastSeriesId?: number;
   quantiles: [string, string];
   opacity: number;
   color?: string;

package/src/components/ui/Chart/lightweight/LightweightForecastChart.tsx

@@ -19,7 +19,7 @@ import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/C
 import {
   ForecastItemData,
   getForecastColor,
-  getForecastQuantileBandColor,
+  resolveQuantileBandFillForForecastLine,
 } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { Skeleton } from '#uilib/components/ui/Skeleton';
 import { ensureChartForecastBridge } from '#uilib/utils/chartConnectionPoint';
@@ -55,6 +55,27 @@ type TooltipRow = {
   dataKey?: string;
 };
 
+function forecastIndexForQuantileBand(
+  band: QuantileBandConfig,
+  forecastData: ForecastItemData[],
+): number {
+  if (!forecastData.length) return 0;
+  if (band.forecastSeriesId != null) {
+    const idx = forecastData.findIndex(f => f.id === band.forecastSeriesId);
+    if (idx !== -1) return idx;
+  }
+  return 0;
+}
+
+function quantileBandFillForConfig(
+  band: QuantileBandConfig,
+  forecastData: ForecastItemData[],
+): string {
+  const fi = forecastIndexForQuantileBand(band, forecastData);
+  const lineColor = forecastData[fi]?.color?.toString() ?? getForecastColor(fi);
+  return resolveQuantileBandFillForForecastLine(lineColor, fi);
+}
+
 function clampTooltipTranslate(args: {
   coordinate: { x: number; y: number };
   viewW: number;
@@ -218,10 +239,10 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
       };
     });
 
-    quantileBands?.forEach((band, index) => {
+    quantileBands?.forEach(band => {
       base[band.key] = {
         label: band.name,
-        color: band.color ?? getForecastQuantileBandColor(index),
+        color: quantileBandFillForConfig(band, forecastData),
       };
     });
 
@@ -353,8 +374,8 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
       { api: ISeriesApi<'Custom'>; view: QuantileBandPaneView }
     >();
 
-    quantileBands?.forEach((band, index) => {
-      const fill = band.color ?? getForecastQuantileBandColor(index);
+    quantileBands?.forEach(band => {
+      const fill = quantileBandFillForConfig(band, forecastData);
       const view = new QuantileBandPaneView({
         fill,
         stroke: band.strokeWidth ? fill : undefined,
@@ -460,7 +481,7 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
         });
       });
 
-      bandsCfg?.forEach((band, index) => {
+      bandsCfg?.forEach(band => {
         if (hid.has(band.key)) return;
         const tuple = row[band.key];
         if (
@@ -469,7 +490,7 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
           typeof tuple[0] === 'number' &&
           typeof tuple[1] === 'number'
         ) {
-          const color = band.color ?? getForecastQuantileBandColor(index);
+          const color = quantileBandFillForConfig(band, forecastsList);
           payload.push({
             type: 'line',
             name: band.name,
@@ -539,10 +560,10 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
       api.setData(buildForecastLineData(bridgedChartData, key));
     }
 
-    quantileBands?.forEach((band, index) => {
+    quantileBands?.forEach(band => {
       const entry = model.bands.get(band.key);
       if (!entry) return;
-      const fill = band.color ?? getForecastQuantileBandColor(index);
+      const fill = quantileBandFillForConfig(band, forecastData);
       entry.view.updateStyle({
         fill,
         stroke: band.strokeWidth ? fill : undefined,
@@ -557,7 +578,7 @@ export function LightweightForecastChart(props: LightweightForecastChartProps) {
     });
 
     scheduleFitTimeScale(model.chart);
-  }, [bridgedChartData, quantileBands]);
+  }, [bridgedChartData, quantileBands, forecastData]);
 
   // Visibility toggles
   useEffect(() => {

package/src/components/ui/ChartAreaInteractive/ChartLines.tsx

@@ -52,6 +52,16 @@ export const getForecastQuantileBandColor = (index: number) =>
     FORECAST_LINE_COLORS[index % FORECAST_LINE_COLORS.length]
   ];
 
+/** Same tint logic as intervals/threshold overlays: band fill follows forecast line hex when known. */
+export function resolveQuantileBandFillForForecastLine(
+  lineColor: string,
+  forecastIndex: number,
+): string {
+  const mapped =
+    FORECAST_COLORS_MAP[lineColor as keyof typeof FORECAST_COLORS_MAP];
+  return mapped ?? getForecastQuantileBandColor(forecastIndex);
+}
+
 // Memoized component for chart lines - only re-renders when data/analyses/hiddenSeries change
 export const ChartLines = memo(
   ({

package/src/components/ui/ChartAreaInteractive/overlays/useForecastColor.ts

@@ -4,10 +4,9 @@ import { DEFAULT_QUANTILE_BAND_COLOR } from '#uilib/components/ui/Chart/componen
 
 import { Analysis } from '../ChartAreaInteractive.types';
 import {
-  FORECAST_COLORS_MAP,
   FORECAST_LINE_COLORS,
   ForecastItemData,
-  getForecastQuantileBandColor,
+  resolveQuantileBandFillForForecastLine,
 } from '../ChartLines';
 
 const DEFAULT_FORECAST_COLORS = {
@@ -37,9 +36,10 @@ export function useForecastColor(
       forecastItem.color ||
       FORECAST_LINE_COLORS[forecastIndex % FORECAST_LINE_COLORS.length];
 
-    const quantileBandColor = forecastItem.color
-      ? FORECAST_COLORS_MAP[forecastItem.color]
-      : getForecastQuantileBandColor(forecastIndex);
+    const quantileBandColor = resolveQuantileBandFillForForecastLine(
+      lineColor,
+      forecastIndex,
+    );
 
     return {
       lineColor,

package/src/components/ui/Confirm/Confirm.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+import { Dialog } from '#uilib/components/ui/Dialog';
+
+import type { ConfirmProps } from './Confirm.types';
+
+export function Confirm({
+  children,
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+  title = 'Confirm',
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  trigger,
+  disabled,
+  confirmVariant = 'default',
+}: ConfirmProps) {
+  const closedByConfirmRef = useRef(false);
+
+  useEffect(() => {
+    if (open) {
+      closedByConfirmRef.current = false;
+    }
+  }, [open]);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next) {
+        if (!closedByConfirmRef.current) {
+          onCancel?.();
+        }
+        closedByConfirmRef.current = false;
+      }
+      onOpenChange(next);
+    },
+    [onCancel, onOpenChange],
+  );
+
+  const handleConfirm = () => {
+    closedByConfirmRef.current = true;
+    onConfirm();
+    handleOpenChange(false);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={handleOpenChange}
+      disabled={disabled}
+      trigger={trigger}
+      title={title}
+      width="min(fit-content, calc(100vw - var(--p-4)))"
+      content={children}
+      footerAlignment="between"
+      footer={
+        <>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant={confirmVariant}
+            onClick={handleConfirm}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    />
+  );
+}

package/src/components/ui/Confirm/Confirm.types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+import type { ButtonVariant } from '#uilib/components/ui/Button/Button.types';
+
+export interface ConfirmProps {
+  children: ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  onCancel?: () => void;
+  title?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  trigger?: ReactNode;
+  disabled?: boolean;
+  confirmVariant?: Extract<ButtonVariant, 'default' | 'destructive'>;
+}

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

@@ -0,0 +1,3 @@
+export { Confirm } from './Confirm';
+
+export type { ConfirmProps } from './Confirm.types';

package/src/components/ui/Dialog/Dialog.styl

@@ -143,3 +143,6 @@
     justify-content flex-end
   &.align-between
     justify-content space-between
+
+.footer button:not(:last-child)
+  margin-right var(--p-2)

package/src/components/ui/Dialog/Dialog.styl.d.ts

@@ -13,6 +13,7 @@ interface CssExports {
   'dialogOverlay': string;
   'fadeIn': string;
   'fadeOut': string;
+  'footer': string;
   'isClosed': string;
   'isOpen': string;
   'size-wide': string;

package/src/components/ui/Dialog/Dialog.tsx

@@ -210,7 +210,11 @@ export function Dialog({
 
         {footer && (
           <CardFooter
-            className={cn(S[`align-${footerAlignment}`], footerClassName)}
+            className={cn(
+              S.footer,
+              S[`align-${footerAlignment}`],
+              footerClassName,
+            )}
           >
             {footer}
           </CardFooter>

package/src/docs/config/webpack.config.js

@@ -52,6 +52,28 @@ export default (env, argv) => {
     alias.theme = themeStyl;
   }
 
+  const docsHtmlMinify = isDev
+    ? false
+    : {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      };
+
+  const docsHtmlPluginBase = {
+    lang: 'en',
+    baseUrl: publicPath,
+    template: `${paths.assets}/index.html`,
+    minify: docsHtmlMinify,
+  };
+
   const config = {
     entry: [paths.docs],
     output: {
@@ -193,24 +215,13 @@ export default (env, argv) => {
       }),
 
       new HtmlWebpackPlugin({
-        lang: 'en',
-        baseUrl: publicPath,
+        ...docsHtmlPluginBase,
         filename: 'index.html',
-        template: `${paths.assets}/index.html`,
-        minify: isDev
-          ? false
-          : {
-              removeComments: true,
-              collapseWhitespace: true,
-              removeRedundantAttributes: true,
-              useShortDoctype: true,
-              removeEmptyAttributes: true,
-              removeStyleLinkTypeAttributes: true,
-              keepClosingSlash: true,
-              minifyJS: true,
-              minifyCSS: true,
-              minifyURLs: true,
-            },
+      }),
+      /** GitHub Pages serves this for missing paths; same shell as index.html so SPA routes work. */
+      new HtmlWebpackPlugin({
+        ...docsHtmlPluginBase,
+        filename: '404.html',
       }),
       existsSync(logoSvgPath) &&
         new FaviconWebpackPlugin({

package/src/docs/pages/ConfirmPage.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+import { Confirm } from '#uilib/components/ui/Confirm';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function ConfirmPage() {
+  const [openDefault, setOpenDefault] = useState(false);
+  const [openDestructive, setOpenDestructive] = useState(false);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Confirm' }]}
+        title="Confirm"
+        subheader="Confirmation dialog built on Dialog with primary and cancel actions."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 'var(--p-4)',
+            alignItems: 'center',
+          }}
+        >
+          <Confirm
+            open={openDefault}
+            onOpenChange={setOpenDefault}
+            trigger={<Button type="button">Open confirm</Button>}
+            title="Discard changes?"
+            confirmLabel="Discard"
+            cancelLabel="Keep editing"
+            onConfirm={() => setOpenDefault(false)}
+          >
+            You have unsaved changes. They will be lost if you continue.
+          </Confirm>
+
+          <Confirm
+            open={openDestructive}
+            onOpenChange={setOpenDestructive}
+            trigger={
+              <Button type="button" variant="destructive">
+                Delete item
+              </Button>
+            }
+            title="Delete item?"
+            confirmLabel="Delete"
+            cancelLabel="Cancel"
+            confirmVariant="destructive"
+            onConfirm={() => setOpenDestructive(false)}
+          >
+            This action cannot be undone.
+          </Confirm>
+        </div>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LightweightChartPage.tsx

@@ -85,7 +85,6 @@ const DEMO_QUANTILE_BANDS: QuantileBandConfig[] = [
     opacity: 0.35,
     name: 'P10–P90',
     type: 'monotone',
-    color: 'rgba(100,190,220,0.35)',
     strokeWidth: 0,
   },
   {
@@ -94,7 +93,6 @@ const DEMO_QUANTILE_BANDS: QuantileBandConfig[] = [
     opacity: 0.45,
     name: 'P25–P75',
     type: 'monotone',
-    color: 'rgba(65,165,238,0.45)',
     strokeWidth: 0,
   },
 ];

package/src/docs/registry.ts

@@ -121,6 +121,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Overlays',
     load: () => import('./pages/DialogPage'),
   },
+  {
+    slug: 'confirm',
+    title: 'Confirm',
+    section: 'Overlays',
+    load: () => import('./pages/ConfirmPage'),
+  },
   {
     slug: 'driver-map',
     title: 'DriverMap & DriverCard',

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './components/ui/Chart';
 export * from './components/ui/ChartAreaInteractive';
 export * from './components/ui/Chat';
 export * from './components/ui/Checkbox';
+export * from './components/ui/Confirm';
 export * from './components/ui/Dialog';
 export * from './components/ui/Drawer';
 export * from './components/ui/DropdownMenu';