@sybilion/uilib 1.3.53 → 1.3.54

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

@@ -24,12 +24,12 @@ function CardDescription({ className, ...props }) {
 function CardAction({ className, ...props }) {
     return (jsx("div", { "data-slot": "card-action", className: cn(S.action, className), ...props }));
 }
-function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, ...props }) {
-    const contentRef = useRef(null);
+function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, yScrollbarClassName, ...props }) {
+    const scrollInnerRef = useRef(null);
     const contentDiv = (jsx("div", { "data-slot": "card-content", className: cn(className, centered && S.centered, fullHeight && S.fullHeight), ...props, children: children }));
     useEffect(() => {
         if (!noScroll && autoScrollBottom) {
-            const inner = contentRef.current?.firstChild;
+            const inner = scrollInnerRef.current;
             if (!inner)
                 return;
             if (inner.scrollHeight > SCROLL_OFFSET) {
@@ -46,9 +46,9 @@ function CardContent({ className, centered, fullHeight, noScroll, children, auto
     }, [noScroll, autoScrollBottom]);
     if (noScroll)
         return contentDiv;
-    return (
-    // @ts-ignore
-    jsx(Scroll, { y: true, autoHide: true, fadeSize: "m", className: S.scroll, ref: contentRef, children: contentDiv }));
+    return (jsx(Scroll, { y: true, autoHide: true, fadeSize: "m", className: S.scroll, yScrollbarClassName: yScrollbarClassName, onInnerRef: el => {
+            scrollInnerRef.current = el;
+        }, children: contentDiv }));
 }
 function CardFooter({ className, ...props }) {
     return (jsx("div", { "data-slot": "card-footer", className: cn(S.footer, className), ...props }));

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

@@ -7,7 +7,7 @@ import { APP_MODAL_ID } from '../../../constants/appMount.js';
 import { XIcon } from '@phosphor-icons/react';
 import S from './Dialog.styl.js';
 
-function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, footer, footerClassName, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
+function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, contentScrollbarClassName, footer, footerClassName, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
     const [isMounted, setIsMounted] = useState(false);
     const [modalContainer, setModalContainer] = useState(null);
     const [isAnimating, setIsAnimating] = useState(false);
@@ -123,7 +123,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.footer, 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, yScrollbarClassName: contentScrollbarClassName, 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 &&

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

@@ -7,10 +7,10 @@ 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 { InfoIcon } from 'lucide-react';
 import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
 import '../../ui/Page/pageContext.js';
-import '../../ui/Tooltip/Tooltip.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/Tooltip/Tooltip.js';
 import '../../ui/Page/PageHeader/PageHeader.styl.js';
 import '../../ui/Page/PageEmptyCanvas/PageEmptyCanvas.styl.js';
 import '../../ui/Page/PageContent/PageContent.styl.js';
@@ -24,7 +24,7 @@ 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 { Table, TableHeader, TableRow, TableHead, TableCellValue, 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';
@@ -127,7 +127,7 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
     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 => {
+                                                : 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: jsxs(TableCellValue, { children: ["Importance", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "How much this driver contributes to price movements in the forecast model. Higher = stronger influence. Reflects relative weight of each driver, scored from 0% to 100%." })] })] }) }), jsx(TableHead, { children: jsxs(TableCellValue, { children: ["Lag", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "Lag shows how far ahead this driver predicts price movement. A range (e.g. 9\u201312 months) means the predictive signal is strongest somewhere in that window \u2014 not at a single fixed point." })] })] }) })] }) }), 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: {

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

@@ -6,6 +6,6 @@ declare function CardHeader({ className, icon, iconWithBackground, textsClassNam
 declare function CardTitle({ className, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare function CardAction({ className, ...props }: CardActionProps): import("react/jsx-runtime").JSX.Element;
-declare function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, yScrollbarClassName, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
 declare function CardFooter({ className, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
 export { Card, LinkCard, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

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

@@ -24,6 +24,7 @@ export interface CardContentProps extends React.ComponentProps<'div'> {
     fullHeight?: boolean;
     noScroll?: boolean;
     autoScrollBottom?: boolean;
+    yScrollbarClassName?: string;
 }
 export interface CardFooterProps extends React.ComponentProps<'div'> {
 }

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

@@ -1,3 +1,3 @@
 import type { DialogProps } from './Dialog.types';
-export declare function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, footer, footerClassName, footerAlignment, size, className, noScroll, maxHeight, autoScrollBottom, width, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, contentScrollbarClassName, footer, footerClassName, footerAlignment, size, className, noScroll, maxHeight, autoScrollBottom, width, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export { default as DialogStyles } from './Dialog.styl';

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

@@ -14,6 +14,7 @@ export interface DialogProps {
     icon?: ReactNode;
     content?: ReactNode;
     contentClassName?: string;
+    contentScrollbarClassName?: string;
     footer?: ReactNode;
     footerClassName?: string;
     footerAlignment?: 'left' | 'center' | 'right' | 'between';

package/package.json

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

package/src/components/ui/Card/Card.tsx

@@ -129,9 +129,10 @@ function CardContent({
   noScroll,
   children,
   autoScrollBottom,
+  yScrollbarClassName,
   ...props
 }: CardContentProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
+  const scrollInnerRef = useRef<HTMLDivElement | null>(null);
 
   const contentDiv = (
     <div
@@ -149,7 +150,7 @@ function CardContent({
 
   useEffect(() => {
     if (!noScroll && autoScrollBottom) {
-      const inner = contentRef.current?.firstChild as HTMLDivElement;
+      const inner = scrollInnerRef.current;
 
       if (!inner) return;
 
@@ -170,8 +171,16 @@ function CardContent({
   if (noScroll) return contentDiv;
 
   return (
-    // @ts-ignore
-    <Scroll y autoHide fadeSize="m" className={S.scroll} ref={contentRef}>
+    <Scroll
+      y
+      autoHide
+      fadeSize="m"
+      className={S.scroll}
+      yScrollbarClassName={yScrollbarClassName}
+      onInnerRef={el => {
+        scrollInnerRef.current = el;
+      }}
+    >
       {contentDiv}
     </Scroll>
   );

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

@@ -30,6 +30,7 @@ export interface CardContentProps extends React.ComponentProps<'div'> {
   fullHeight?: boolean;
   noScroll?: boolean;
   autoScrollBottom?: boolean;
+  yScrollbarClassName?: string;
 }
 
 export interface CardFooterProps extends React.ComponentProps<'div'> {}

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

@@ -31,6 +31,7 @@ export function Dialog({
   icon,
   content,
   contentClassName,
+  contentScrollbarClassName,
   footer,
   footerClassName,
   footerAlignment = 'center',
@@ -215,6 +216,7 @@ export function Dialog({
         {content && (
           <CardContent
             className={contentClassName}
+            yScrollbarClassName={contentScrollbarClassName}
             noScroll={noScroll}
             autoScrollBottom={autoScrollBottom}
           >

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

@@ -15,6 +15,7 @@ export interface DialogProps {
   icon?: ReactNode;
   content?: ReactNode;
   contentClassName?: string;
+  contentScrollbarClassName?: string;
   footer?: ReactNode;
   footerClassName?: string;
   footerAlignment?: 'left' | 'center' | 'right' | 'between';

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.tsx

@@ -13,13 +13,20 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableCellValue,
   TableHead,
   TableHeader,
   TableRow,
 } from '#uilib/components/ui/Table';
 import { TextShimmer } from '#uilib/components/ui/TextShimmer/TextShimmer';
 import { TIME_RANGES } from '#uilib/components/ui/TimeRangeControls/TimeRangeControls.constants';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#uilib/components/ui/Tooltip';
 import type { BacktestsComponentPayload } from '@sybilion/platform-sdk';
+import { InfoIcon } from 'lucide-react';
 
 import S from './DriversComparisonChart.styl';
 import {
@@ -282,8 +289,42 @@ export function DriversComparisonChart({
                     <TableHead className={S.seriesColSeries}>
                       Driver name
                     </TableHead>
-                    <TableHead>Importance</TableHead>
-                    <TableHead>Lag</TableHead>
+                    <TableHead>
+                      <TableCellValue>
+                        Importance
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span>
+                              <InfoIcon size={16} style={{ cursor: 'help' }} />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" maxWidth={300}>
+                            How much this driver contributes to price movements
+                            in the forecast model. Higher = stronger influence.
+                            Reflects relative weight of each driver, scored from
+                            0% to 100%.
+                          </TooltipContent>
+                        </Tooltip>
+                      </TableCellValue>
+                    </TableHead>
+                    <TableHead>
+                      <TableCellValue>
+                        Lag
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span>
+                              <InfoIcon size={16} style={{ cursor: 'help' }} />
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent side="top" maxWidth={300}>
+                            Lag shows how far ahead this driver predicts price
+                            movement. A range (e.g. 9–12 months) means the
+                            predictive signal is strongest somewhere in that
+                            window — not at a single fixed point.
+                          </TooltipContent>
+                        </Tooltip>
+                      </TableCellValue>
+                    </TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>