@sybilion/uilib 1.2.26 → 1.3.0

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

@@ -6,23 +6,19 @@ import 'recharts';
 import '../../../Chart/Chart.context.js';
 import '../../../Chart/Chart.styl.js';
 import { useDebounceCallback } from '../../../../../hooks/useDebounceCallback.js';
-import useElemDrag from '../../../../../hooks/useDragElem.js';
 import { ChevronsLeftRight } from 'lucide-react';
 import S from '../../ChartAreaInteractive.styl.js';
 import { useChartYRange } from '../useChartYRange.js';
 import S$1 from './PinOverlay.styl.js';
 
-function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange, className, }) {
+function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange: _onPreviewMonthChange, className, }) {
     const { chartData } = baseChartProps;
     const chartRef = useRef(null);
     const pinRef = useRef(null);
     const pinPlaceholderRef = useRef(null);
     const pinContainerRef = useRef(null);
-    const [isDraggingPin, setIsDraggingPin] = useState(false);
-    const [isPinAnimating, setIsPinAnimating] = useState(true);
     const [isPinHovered, setIsPinHovered] = useState(false);
     const pinPosRef = useRef(0);
-    const containerRectRef = useRef(null);
     const currPinMonthRef = useRef(pinMonth);
     const debouncedOnPinMonthChange = useDebounceCallback((...args) => onPinMonthChange?.(args[0]), 500, [onPinMonthChange]);
     const { yMin, yMax } = useChartYRange({
@@ -38,7 +34,6 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             pinPlaceholderRef.current.style.left = `${position}%`;
         }
     };
-    // Get full month and year for pin position to send to parent component
     const getPinMonthAndYear = (position) => {
         if (!chartData.length)
             return null;
@@ -54,18 +49,15 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             return `${month} ${year}`;
         }
     };
-    // Handle chart click to move pin to specific position
     const snapPinToPosition = (eventX, needMonthUpdate = true, immediateMonthUpdate = false) => {
         if (!pinContainerRef.current || !chartData.length)
             return;
         const pinContainerRect = pinContainerRef.current.getBoundingClientRect();
         const effectiveLeft = pinContainerRect.left;
         const effectiveWidth = pinContainerRect.width;
-        // Calculate relative position within plotted area
         const relativeX = eventX - effectiveLeft;
         const rawPercentage = effectiveWidth > 0 ? (relativeX / effectiveWidth) * 100 : 0;
         const percentage = Math.max(0, Math.min(100, isNaN(rawPercentage) ? 0 : rawPercentage));
-        // Snap to nearest data point
         const totalPoints = chartData.length;
         if (totalPoints > 1) {
             const nearestIndex = Math.round((percentage / 100) * (totalPoints - 1));
@@ -73,13 +65,11 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             const snappedPercentage = (clampedIndex / (totalPoints - 1)) * 100;
             setPinPosition(isNaN(snappedPercentage) ? 0 : snappedPercentage);
             if (needMonthUpdate) {
-                // Update news for all months (historical and forecast)
                 const monthAndYear = getPinMonthAndYear();
                 if (monthAndYear) {
                     const isNewMonth = monthAndYear !== currPinMonthRef.current;
                     if (isNewMonth)
                         currPinMonthRef.current = monthAndYear;
-                    // When immediate (e.g. dragEnd), always notify parent so showFutureOutlook is correct
                     if (immediateMonthUpdate) {
                         onPinMonthChange?.(monthAndYear);
                     }
@@ -90,11 +80,9 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             }
         }
     };
-    // Update pin position when pinMonth prop changes
     useEffect(() => {
         if (!pinMonth || !chartData.length)
             return;
-        // Find the data point index for the given month
         const dataPointIndex = chartData.findIndex(point => {
             const date = new Date(point.date);
             const month = date.toLocaleDateString('en-US', { month: 'short' });
@@ -109,57 +97,16 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             currPinMonthRef.current = pinMonth;
         }
     }, [pinMonth, chartData]);
-    useElemDrag({
-        elem: [chartRef],
-        onDragStart: () => {
-            setIsDraggingPin(true);
-            containerRectRef.current =
-                pinContainerRef.current?.getBoundingClientRect() || null;
-        },
-        onDrag: (delta) => {
-            if (pinRef.current) {
-                const containerRect = containerRectRef.current;
-                if (!containerRect)
-                    return;
-                const pinCurrentLeft = (pinPosRef.current / 100) * containerRect.width;
-                const leftLimit = -pinCurrentLeft;
-                const rightLimit = containerRect.width - pinCurrentLeft;
-                const clampedDeltaX = Math.max(leftLimit, Math.min(rightLimit, delta.x));
-                setIsPinAnimating(false);
-                pinRef.current.style.transform = `translateX(${clampedDeltaX}px)`;
-                // Calculate preview month based on current drag position
-                if (onPreviewMonthChange && chartData.length > 0) {
-                    const newPositionPixels = pinCurrentLeft + clampedDeltaX;
-                    const newPercentage = (newPositionPixels / containerRect.width) * 100;
-                    const clampedPercentage = Math.max(0, Math.min(100, newPercentage));
-                    const previewMonth = getPinMonthAndYear(clampedPercentage);
-                    if (previewMonth) {
-                        onPreviewMonthChange(previewMonth);
-                    }
-                }
-            }
-        },
-        onDragEnd: (e) => {
-            setIsDraggingPin(false);
-            setTimeout(() => setIsPinAnimating(true), 200);
-            if (pinRef.current)
-                pinRef.current.style.transform = '';
-            // Snap first so onPinMonthChange runs before we clear preview (avoids showFutureOutlook fallback)
-            snapPinToPosition(e.clientX, true, true);
-            if (onPreviewMonthChange) {
-                onPreviewMonthChange(undefined);
-            }
-        },
-    });
-    const onPointerDown = (e) => {
-        if (e.target.tagName !== 'svg')
+    const onChartClick = (e) => {
+        if (e.button !== 0)
+            return;
+        const target = e.target;
+        if (!target.closest?.('svg'))
             return;
         snapPinToPosition(e.clientX, true, false);
     };
     const overlay = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.overlay, S$1.pinContainer), ref: pinContainerRef, children: jsx("div", { className: S$1.pinLineBase, style: { left: `${pinPosRef.current}%` }, ref: pinRef, children: jsx("div", { className: S$1.pinButton, "aria-label": "News pin", title: `Current month: ${getPinMonthAndYear() || 'Loading...'}`, children: jsx(ChevronsLeftRight, { className: S$1.pinIcon, "aria-hidden": "true" }) }) }) }), jsx("div", { className: S$1.pinPlaceholder, style: { left: `${pinPosRef.current}%` }, ref: pinPlaceholderRef, onPointerEnter: () => setIsPinHovered(true), onPointerLeave: () => setIsPinHovered(false) })] }));
-    return (jsx("div", { className: cn(className, S$1.root, isDraggingPin && S$1.pinDragging, isPinAnimating && S$1.pinAnimating, isPinHovered && S$1.pinHovered), onPointerDown: onPointerDown, 
-        // onClick={e => snapPinToPosition(e.clientX)}
-        ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
+    return (jsx("div", { className: cn(className, S$1.root, S$1.pinAnimating, isPinHovered && S$1.pinHovered), onClick: onChartClick, ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
 }
 
 export { PinOverlay };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background-alpha-700)}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:grab;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinButton__cnV1K{transition:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:grab;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
-var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinDragging":"PinOverlay_pinDragging__gu3xp","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
+var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:pointer;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:pointer;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
+var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/ThresholdsOverlay/ThresholdsOverlay.hooks.js

@@ -70,6 +70,7 @@ function useThresholdButton({ lineRef, overlayContainerRef, initialValue, minVal
         onValueChangeThrottled(clampedValue);
     }, [clientYToValue, valueToPercent, minValue, maxValue]);
     const handleDragStart = useCallback((e) => {
+        e.stopPropagation();
         initialValueRef.current = initialValue;
         startYRef.current = e.clientY;
         setIsDragging(true);

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

@@ -15,11 +15,9 @@ function useChartYRange({ baseChartProps, chartData, disableRescaleWhenQuantileC
             Object.entries(point).forEach(([key, value]) => {
                 if (key === 'date')
                     return;
-                // When selectedForecastId is provided, scale only from selected forecast + its quantile band
-                // (exclude historical, other forecasts, and other forecasts' quantile values)
+                // When selectedForecastId is provided, scale from historical + selected forecast + its
+                // quantile band (exclude other forecasts and their quantile values only).
                 if (forecastId !== undefined) {
-                    if (key === 'historical')
-                        return;
                     if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
                         return;
                     // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles

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

@@ -5,9 +5,14 @@ import { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup.js';
 import { TIME_RANGES } from './TimeRangeControls.constants.js';
 import S from './TimeRangeControls.styl.js';
 
-const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: timeRange, onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
+function toggleValueForTimeRange(timeRange) {
+    return TIME_RANGES.includes(timeRange)
+        ? timeRange
+        : '';
+}
+const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: toggleValueForTimeRange(timeRange), onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
 TimeRangeControls.displayName = 'TimeRangeControls';
-const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: timeRange, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
+const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: toggleValueForTimeRange(timeRange) || undefined, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
 TimeRangeSelect.displayName = 'TimeRangeSelect';
 
 export { TimeRangeControls, TimeRangeSelect };

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './WorldMap.styl.js';
+import mapBgUrl from './map.svg.js';
+
+function WorldMap({ className }) {
+    const src = mapBgUrl;
+    return (jsx("img", { alt: "", className: cn(S.worldMap, className), decoding: "async", draggable: false, src: src }));
+}
+
+export { WorldMap };

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

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".WorldMap_worldMap__XTiex{aspect-ratio:623.2/341.276;display:block;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}";
+var S = {"worldMap":"WorldMap_worldMap__XTiex"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { CoffeeIcon, TrendUpIcon, TrendDownIcon } from '@phosphor-icons/react';
+import { Badge } from '../../ui/Badge/Badge.js';
+import { Card, CardContent } from '../../ui/Card/Card.js';
+import { LabelWithId } from '../../ui/LabelWithId/LabelWithId.js';
+import { Skeleton } from '../../ui/Skeleton/Skeleton.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/Tooltip/Tooltip.js';
+import { getCategoryIcon } from '../DriverMap/driverCategoryIcon.js';
+import S from './DriverCard.styl.js';
+import { DriverPerformanceChart } from './DriverPerformanceChart.js';
+
+function DriverCard({ selectedDriver, isLoading, inQueue = false, driverSelector, }) {
+    const importanceDisplay = useMemo(() => {
+        if (!selectedDriver)
+            return '';
+        let importance = 0;
+        if (selectedDriver.rawImportance &&
+            typeof selectedDriver.rawImportance === 'object') {
+            const importanceObj = selectedDriver.rawImportance;
+            if (importanceObj.overall && typeof importanceObj.overall === 'object') {
+                const overall = importanceObj.overall;
+                if (typeof overall.mean === 'number') {
+                    importance = Math.round(overall.mean);
+                }
+            }
+        }
+        return importance > 0
+            ? `${importance}%`
+            : `${selectedDriver.importance.toFixed(1)}%`;
+    }, [selectedDriver]);
+    const regionDisplay = React__default.useMemo(() => {
+        if (!selectedDriver)
+            return '';
+        // Check for src_region and tgt_region properties first
+        const driver = selectedDriver;
+        const srcRegion = driver.src_region;
+        const tgtRegion = driver.tgt_region;
+        const srcName = srcRegion?.name;
+        const tgtName = tgtRegion?.name;
+        // If both src_region and tgt_region have valid names
+        if (srcName && tgtName) {
+            // If source and target are the same, just show one
+            if (srcName === tgtName) {
+                return srcName;
+            }
+            return `${srcName} → ${tgtName}`;
+        }
+        // If only src_region has a valid name
+        if (srcName) {
+            if (srcName === 'World') {
+                return 'World';
+            }
+            return `${srcName} → World`;
+        }
+        // If only tgt_region has a valid name
+        if (tgtName) {
+            if (tgtName === 'World') {
+                return 'World';
+            }
+            return `World → ${tgtName}`;
+        }
+        if (selectedDriver.region.length === 1)
+            return selectedDriver.region[0];
+        if (selectedDriver.region.length > 1) {
+            return (selectedDriver.region
+                // .filter(region => region !== 'World')
+                .join(' → '));
+        }
+        // Fallback to "World" when no region information is available
+        return 'World';
+    }, [selectedDriver]);
+    if (inQueue) {
+        return (jsx(Card, { className: S.root, children: jsx(CardContent, { centered: true, fullHeight: true, noScroll: true, children: jsxs("div", { className: S.queueMessage, children: [jsx(CoffeeIcon, { size: 24, weight: "regular" }), jsxs("div", { children: [jsx("p", { children: "Retrieving drivers data." }), jsx("p", { children: "This may take a while." })] })] }) }) }));
+    }
+    if (isLoading) {
+        return (jsx(Card, { className: S.root, children: jsx(CardContent, { noScroll: true, children: jsxs("div", { className: S.skeletonContainer, children: [jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.w75}` }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hm} ${S.w50}` }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.w33}` }), jsxs("div", { className: S.skeletonGroup, children: [jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.wFull}` }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.w75}` }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.w50}` })] }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hl} ${S.wFull}` }), jsxs("div", { className: S.skeletonGroup, children: [jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.wFull}` }), jsx(Skeleton, { className: `${S.skeletonItem} ${S.hs} ${S.w75}` })] })] }) }) }));
+    }
+    if (!selectedDriver) {
+        return (jsx(Card, { className: S.root, children: jsx(CardContent, { centered: true, fullHeight: true, noScroll: true, children: jsx("span", { className: S.noDriverSelected, children: "No driver selected" }) }) }));
+    }
+    const { id, name, category, direction, lag, summary } = selectedDriver;
+    const directionText = direction > 0 ? 'Positive' : 'Negative';
+    const DirectionIcon = direction > 0 ? TrendUpIcon : TrendDownIcon;
+    const nameElem = (jsx("h4", { className: `${S.driverTitle} ${S.truncated}`, children: name }));
+    return (jsx(Card, { className: S.root, paddingSize: "l", children: jsx(CardContent, { noScroll: true, children: jsxs("div", { className: S.cardContent, children: [jsx("div", { className: S.driverHeader, children: jsxs("div", { className: S.headerContent, children: [jsxs("div", { className: S.topHeader, children: [jsxs("p", { className: S.categoryInfo, children: [jsx("span", { className: S.categoryIcon, children: getCategoryIcon(category) }), jsx("span", { className: S.categoryText, children: category })] }), driverSelector] }), name.length > 60 ? (jsxs(Tooltip, { children: [jsx(LabelWithId, { id: id, label: jsx(TooltipTrigger, { asChild: true, children: nameElem }) }), jsx(TooltipContent, { side: "left", className: S.tooltipContent, children: jsx("div", { className: S.tooltipTitle, children: name }) })] })) : (jsx(LabelWithId, { id: id, label: nameElem })), jsx("p", { className: S.regionDisplay, children: regionDisplay })] }) }), jsx("div", { className: S.metricsSection, children: jsx("div", { className: S.importanceScore, children: importanceDisplay }) }), jsxs("div", { className: S.directionLagSection, children: [jsxs(Badge, { variant: direction > 0 ? 'green' : 'red', className: S.directionBadge, children: [jsx(DirectionIcon, { className: S.trendIcon }), directionText, " correlation"] }), jsxs("span", { className: S.lagInfo, children: ["Lag: ", lag] })] }), jsx(DriverPerformanceChart, { driver: selectedDriver }), jsx("p", { className: S.description, children: summary ?? '' })] }) }) }));
+}
+
+export { DriverCard };

package/dist/esm/components/widgets/DriverCard/DriverCard.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)}}.DriverCard_root__Kr5Xz{height:auto;min-height:500px;width:100%}@media (min-width:640px){.DriverCard_root__Kr5Xz{min-height:25rem}}@media (min-width:768px){.DriverCard_root__Kr5Xz{min-height:31.25rem}}.DriverCard_cardContent__zB8UV{display:flex;flex-direction:column;gap:.5rem}.DriverCard_noDriverSelected__-mVm-{color:var(--muted-foreground)}.DriverCard_driverHeader__0aeJ-{align-items:flex-start;display:flex;flex-direction:column;gap:.75rem;padding-bottom:.25rem}.DriverCard_headerContent__YNqtK{display:flex;flex-direction:column;flex-grow:1;gap:.5rem;width:100%}.DriverCard_topHeader__sUDUc{align-items:center;display:flex;justify-content:space-between;margin-top:-12px;min-height:36px}.DriverCard_categoryInfo__8Dhqn{align-items:center;color:var(--muted-foreground);display:flex;font-size:.75rem;gap:.25rem}.DriverCard_categoryIcon__lSIM8{color:var(--muted-foreground);height:.75rem;width:.75rem}.DriverCard_categoryText__DuifF{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-transform:lowercase}.DriverCard_categoryText__DuifF:first-letter{text-transform:uppercase}.DriverCard_driverTitle__tYQO1{color:var(--foreground);font-size:1.1rem;font-weight:500;line-height:1.4;-webkit-user-select:text;-moz-user-select:text;user-select:text}.DriverCard_driverTitle__tYQO1.DriverCard_truncated__RIn6f{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:help;overflow:hidden}.DriverCard_regionDisplay__QYVWx{color:var(--muted-foreground);font-size:.75rem}.DriverCard_metricsSection__uZViQ{margin-bottom:.5rem;text-align:left}.DriverCard_importanceScore__RGh5Y{align-items:center;color:var(--foreground);display:flex;font-size:2.25rem;font-weight:400;height:auto;line-height:1;-webkit-user-select:text;-moz-user-select:text;user-select:text}.DriverCard_directionLagSection__Mh-ep{align-items:center;display:flex;justify-content:space-between}.DriverCard_directionBadge__7EAHe{align-items:center;display:flex;gap:.5rem}.DriverCard_trendIcon__GtkDe{height:.75rem;width:.75rem}.DriverCard_lagInfo__enbxl{color:var(--muted-foreground);font-size:.75rem}.DriverCard_description__fNR4e{font-size:.875rem;line-height:1.625;-webkit-user-select:text;-moz-user-select:text;user-select:text}.DriverCard_skeletonContainer__AE9MP{display:flex;flex-direction:column;gap:1rem}.DriverCard_skeletonGroup__lQXls{display:flex;flex-direction:column;gap:.5rem}.DriverCard_skeletonItem__pmx4S.DriverCard_hxs__taJow{height:.75rem}.DriverCard_skeletonItem__pmx4S.DriverCard_hs__PlDPB{height:1rem}.DriverCard_skeletonItem__pmx4S.DriverCard_hm__oFwUK{height:2rem}.DriverCard_skeletonItem__pmx4S.DriverCard_hl__McKZn{height:8rem}.DriverCard_skeletonItem__pmx4S.DriverCard_w33__cI-vq{width:33.333333%}.DriverCard_skeletonItem__pmx4S.DriverCard_w50__DcUSo{width:50%}.DriverCard_skeletonItem__pmx4S.DriverCard_w75__To5oR{width:75%}.DriverCard_skeletonItem__pmx4S.DriverCard_w80__y8wQl{width:80%}.DriverCard_skeletonItem__pmx4S.DriverCard_wFull__TnaxF{width:100%}.DriverCard_tooltipContent__F6DUH{font-size:.75rem;max-width:20rem}.DriverCard_tooltipTitle__NieWB{font-family:var(--font-family-body);font-weight:400}.DriverCard_queueMessage__4hQxI{align-items:center;color:var(--muted-foreground);display:flex;flex-direction:column;font-size:.875rem;gap:var(--p-4);line-height:1.5;padding:var(--p-8) var(--p-4);text-align:center}.DriverCard_queueMessage__4hQxI svg{color:var(--muted-foreground);flex-shrink:0;opacity:.8}";
+var S = {"root":"DriverCard_root__Kr5Xz","cardContent":"DriverCard_cardContent__zB8UV","noDriverSelected":"DriverCard_noDriverSelected__-mVm-","driverHeader":"DriverCard_driverHeader__0aeJ-","headerContent":"DriverCard_headerContent__YNqtK","topHeader":"DriverCard_topHeader__sUDUc","categoryInfo":"DriverCard_categoryInfo__8Dhqn","categoryIcon":"DriverCard_categoryIcon__lSIM8","categoryText":"DriverCard_categoryText__DuifF","driverTitle":"DriverCard_driverTitle__tYQO1","truncated":"DriverCard_truncated__RIn6f","regionDisplay":"DriverCard_regionDisplay__QYVWx","metricsSection":"DriverCard_metricsSection__uZViQ","importanceScore":"DriverCard_importanceScore__RGh5Y","directionLagSection":"DriverCard_directionLagSection__Mh-ep","directionBadge":"DriverCard_directionBadge__7EAHe","trendIcon":"DriverCard_trendIcon__GtkDe","lagInfo":"DriverCard_lagInfo__enbxl","description":"DriverCard_description__fNR4e","skeletonContainer":"DriverCard_skeletonContainer__AE9MP","skeletonGroup":"DriverCard_skeletonGroup__lQXls","skeletonItem":"DriverCard_skeletonItem__pmx4S","hxs":"DriverCard_hxs__taJow","hs":"DriverCard_hs__PlDPB","hm":"DriverCard_hm__oFwUK","hl":"DriverCard_hl__McKZn","w33":"DriverCard_w33__cI-vq","w50":"DriverCard_w50__DcUSo","w75":"DriverCard_w75__To5oR","w80":"DriverCard_w80__y8wQl","wFull":"DriverCard_wFull__TnaxF","tooltipContent":"DriverCard_tooltipContent__F6DUH","tooltipTitle":"DriverCard_tooltipTitle__NieWB","queueMessage":"DriverCard_queueMessage__4hQxI"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/widgets/DriverCard/DriverPerformanceChart.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from 'recharts';
+import '../../ui/Chart/components/BaseChartWrapper.js';
+import { ChartContainer } from '../../ui/Chart/components/ChartContainer.js';
+import '../../ui/Chart/Chart.context.js';
+import '../../ui/Chart/Chart.styl.js';
+import '../../ui/AnalysisLineIcon/AnalysisLineIcon.styl.js';
+import '@radix-ui/react-slot';
+import '../../ui/Badge/Badge.styl.js';
+import '../../ui/LabelWithId/LabelWithId.styl.js';
+import '@radix-ui/react-select';
+import 'lucide-react';
+import '../../ui/Select/Select.styl.js';
+import '../../ui/TextShimmer/TextShimmer.js';
+import '@phosphor-icons/react';
+import '../../ui/AnalysesSelector/AnalysesSelector.styl.js';
+import '../../ui/Chart/components/CustomChartLegend/CustomChartLegend.styl.js';
+import { ChartEmptyState } from '../../ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
+import S from './DriverPerformanceChart.styl.js';
+import { generateDriverChartData } from './driverPerformanceChartData.js';
+
+const driverChartConfig = {
+    value: {
+        label: 'Performance',
+        color: 'var(--primary)',
+    },
+};
+function DriverPerformanceChart({ driver, }) {
+    const precision = useMemo(() => {
+        if (!driver.normalized_series)
+            return 7;
+        const values = Object.values(driver.normalized_series).filter((v) => typeof v === 'number' && v !== null);
+        if (values.length === 0)
+            return 7;
+        const absoluteValues = values.map(Math.abs).filter(v => v > 0);
+        if (absoluteValues.length === 0)
+            return 7;
+        const minAbs = Math.min(...absoluteValues);
+        if (minAbs < 0.0001)
+            return 7;
+        if (minAbs < 0.001)
+            return 6;
+        if (minAbs < 0.01)
+            return 5;
+        if (minAbs < 0.1)
+            return 4;
+        if (minAbs < 1)
+            return 3;
+        return 2;
+    }, [driver.normalized_series]);
+    const chartData = useMemo(() => generateDriverChartData(driver, precision), [driver, precision]);
+    const noSeriesData = useMemo(() => {
+        if (!driver.normalized_series)
+            return false;
+        return Object.values(driver.normalized_series).every(value => value === null);
+    }, [driver.normalized_series]);
+    const renderTooltipContent = ({ active, payload, }) => {
+        if (active && payload?.length) {
+            const dataPoint = payload[0];
+            const row = dataPoint?.payload;
+            const date = row?.date;
+            const value = dataPoint?.value;
+            return (jsxs("div", { className: S.chartTooltip, children: [jsx("div", { className: S.tooltipDate, children: date instanceof Date
+                            ? date.toLocaleDateString('en-US', {
+                                month: 'long',
+                                year: 'numeric',
+                            })
+                            : 'Unknown Date' }), jsxs("div", { className: S.tooltipPerformance, children: ["Performance:", ' ', typeof value === 'number'
+                                ? value.toFixed(precision)
+                                : String(value ?? '')] })] }));
+        }
+        return null;
+    };
+    return (jsxs("div", { className: S.driverChartContainer, children: [jsx(ChartContainer, { config: driverChartConfig, className: cn(S.chartContainer, noSeriesData && S.chartContainerDisabled), children: jsxs(LineChart, { data: chartData, margin: { left: 8, right: 8, top: 8, bottom: -20 }, children: [jsx(CartesianGrid, { vertical: false }), jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tick: false, tickMargin: 0, minTickGap: 0 }), jsx(YAxis, { tickLine: false, axisLine: false, tick: false, tickMargin: 0, minTickGap: 0, width: 0, domain: ['dataMin', 'dataMax'] }), jsx(Tooltip, { cursor: false, content: renderTooltipContent }), jsx(Line, { dataKey: "value", type: "natural", stroke: "var(--color-value)" })] }) }), noSeriesData && (jsx(ChartEmptyState, { variant: "inline", align: "center", status: "No series data", className: S.noDataMessage }))] }));
+}
+
+export { DriverPerformanceChart };

package/dist/esm/components/widgets/DriverCard/DriverPerformanceChart.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".DriverPerformanceChart_driverChartContainer__27xZ-{position:relative;width:100%}.DriverPerformanceChart_driverChartContainer__27xZ- svg{overflow:visible}.DriverPerformanceChart_chartContainer__--rGL{height:214px;margin-left:-.5rem;padding:var(--p-4) 0;width:100%}.DriverPerformanceChart_chartContainerDisabled__ndtPZ{opacity:.1}.DriverPerformanceChart_noDataMessage__RO3u1{color:var(--foreground);font-size:.875rem;font-weight:500;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:10}.DriverPerformanceChart_chartTooltip__cpaQw{background-color:var(--popover);border:1px solid var(--border);border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);padding:.75rem}.DriverPerformanceChart_tooltipDate__B2aeP{color:var(--popover-foreground);font-size:.875rem;font-weight:500}.DriverPerformanceChart_tooltipPerformance__3hfgE{color:var(--muted-foreground);font-size:.875rem}";
+var S = {"driverChartContainer":"DriverPerformanceChart_driverChartContainer__27xZ-","chartContainer":"DriverPerformanceChart_chartContainer__--rGL","chartContainerDisabled":"DriverPerformanceChart_chartContainerDisabled__ndtPZ","noDataMessage":"DriverPerformanceChart_noDataMessage__RO3u1","chartTooltip":"DriverPerformanceChart_chartTooltip__cpaQw","tooltipDate":"DriverPerformanceChart_tooltipDate__B2aeP","tooltipPerformance":"DriverPerformanceChart_tooltipPerformance__3hfgE"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/widgets/DriverCard/driverPerformanceChartData.js

@@ -0,0 +1,50 @@
+/** Last non-null points from `normalized_series`, or deterministic fallback sample. */
+function generateDriverChartData(driver, precision = 7) {
+    if (driver.normalized_series) {
+        const entries = Object.entries(driver.normalized_series);
+        const seriesData = entries
+            .filter(([, value]) => value !== null)
+            .map(([date, value]) => {
+            let parsedDate;
+            try {
+                const dateStr = date.toString();
+                if (dateStr.includes('-')) {
+                    parsedDate = new Date(`${dateStr}T00:00:00`);
+                }
+                else {
+                    parsedDate = new Date(dateStr);
+                }
+                if (Number.isNaN(parsedDate.getTime())) {
+                    return null;
+                }
+            }
+            catch {
+                return null;
+            }
+            const numericValue = parseFloat(value.toFixed(precision));
+            return {
+                date: parsedDate,
+                value: numericValue,
+            };
+        })
+            .filter((item) => item !== null)
+            .sort((a, b) => a.date.getTime() - b.date.getTime())
+            .slice(-24);
+        if (seriesData.length > 0) {
+            return seriesData;
+        }
+    }
+    const data = [];
+    const baseValue = driver.importance / 100;
+    for (let i = 0; i < 12; i++) {
+        const randomVariation = (Math.random() - 0.5) * 0.2;
+        const value = Math.max(0, Math.min(1, baseValue + randomVariation));
+        data.push({
+            date: new Date(2023, i, 1),
+            value: parseFloat(value.toFixed(precision)),
+        });
+    }
+    return data;
+}
+
+export { generateDriverChartData };

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

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { WorldMap } from '../../ui/WorldMap/WorldMap.js';
 import useEvent from '../../../hooks/useEvent.js';
 import { Shimmer } from '@homecode/ui';
 import { DriverIcon } from './DriverIcon/DriverIcon.js';
 import constants from './DriverIcon/DriverIcon.constants.json.js';
 import { findMostSpecificRegion, getDriverCoordinates, hasValidCoords, calculateBadgeSizes } from './DriverMap.helpers.js';
 import S from './DriverMap.styl.js';
-import { MapBackground } from './MapBackground/MapBackground.js';
 import { getHighestImportanceDriver } from './driverMapSelection.js';
 
 const delay = (ms) => new Promise(r => setTimeout(r, ms));
@@ -113,7 +113,7 @@ function DriverMap({ drivers, isLoading, setSelectedDriver, selectedDriver, }) {
         callback: handleKeyDown,
         isCapture: true,
     });
-    return (jsxs("div", { className: cn(S.root, isTransitioning && S.inTransition), children: [jsxs("div", { className: S.mapInner, children: [jsx(MapBackground, {}), isLoading && jsx(Shimmer, { className: S.shimmerOverlay, size: "l" }), otherDrivers.map(driver => (jsx(DriverIcon, { isLoading: isLoading, isVisible: isVisible, driver: driver, size: badgeSizes[driver.id] || 's', isSelected: selectedDriver?.id === driver.id, onClick: () => setSelectedDriver(driver) }, driver.id)))] }), jsx("div", { className: S.worldDrivers, children: worldDrivers.map(driver => {
+    return (jsxs("div", { className: cn(S.root, isTransitioning && S.inTransition), children: [jsxs("div", { className: S.mapInner, children: [jsx(WorldMap, { className: S.mapWorld }), isLoading && jsx(Shimmer, { className: S.shimmerOverlay, size: "l" }), otherDrivers.map(driver => (jsx(DriverIcon, { isLoading: isLoading, isVisible: isVisible, driver: driver, size: badgeSizes[driver.id] || 's', isSelected: selectedDriver?.id === driver.id, onClick: () => setSelectedDriver(driver) }, driver.id)))] }), jsx("div", { className: S.worldDrivers, children: worldDrivers.map(driver => {
                     const driverWithCoords = {
                         ...driver,
                         coordinates: driver.coordinates || {

package/dist/esm/components/widgets/DriverMap/DriverMap.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)}}.DriverMap_root__JszhG{aspect-ratio:623.2/341.276;max-width:100%;overflow:hidden;padding:0;position:relative;width:100%}@media (min-width:768px){.DriverMap_root__JszhG{flex:1;height:35rem;width:-moz-fit-content;width:fit-content}}.DriverMap_mapInner__E7rZR{aspect-ratio:623.2/341.276;border-radius:var(--p-4);margin:0 auto;max-height:100%;max-width:100%;overflow:hidden;position:relative}.DriverMap_shimmerOverlay__UH2qz{z-index:20}.DriverMap_inTransition__lvYwJ{pointer-events:none}.DriverMap_worldDrivers__sZOIW{align-items:center;bottom:0;display:flex;gap:.5rem;padding:.5rem;position:absolute}.DriverMap_worldDrivers__sZOIW button{position:static!important;transform:none!important}.DriverMap_worldDrivers__sZOIW button>span{opacity:1!important;transform:none!important}";
-var S = {"root":"DriverMap_root__JszhG","mapInner":"DriverMap_mapInner__E7rZR","shimmerOverlay":"DriverMap_shimmerOverlay__UH2qz","inTransition":"DriverMap_inTransition__lvYwJ","worldDrivers":"DriverMap_worldDrivers__sZOIW"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.DriverMap_root__JszhG{aspect-ratio:623.2/341.276;max-width:100%;overflow:hidden;padding:0;position:relative;width:100%}@media (min-width:768px){.DriverMap_root__JszhG{flex:1;height:35rem;width:-moz-fit-content;width:fit-content}}.DriverMap_mapInner__E7rZR{aspect-ratio:623.2/341.276;border-radius:var(--p-4);margin:0 auto;max-height:100%;max-width:100%;overflow:hidden;position:relative}.DriverMap_mapWorld__vmPp-{box-sizing:border-box;inset:0;position:absolute}.DriverMap_shimmerOverlay__UH2qz{z-index:20}.DriverMap_inTransition__lvYwJ{pointer-events:none}.DriverMap_worldDrivers__sZOIW{align-items:center;bottom:0;display:flex;gap:.5rem;padding:.5rem;position:absolute}.DriverMap_worldDrivers__sZOIW button{position:static!important;transform:none!important}.DriverMap_worldDrivers__sZOIW button>span{opacity:1!important;transform:none!important}";
+var S = {"root":"DriverMap_root__JszhG","mapInner":"DriverMap_mapInner__E7rZR","mapWorld":"DriverMap_mapWorld__vmPp-","shimmerOverlay":"DriverMap_shimmerOverlay__UH2qz","inTransition":"DriverMap_inTransition__lvYwJ","worldDrivers":"DriverMap_worldDrivers__sZOIW"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/index.js

@@ -81,6 +81,7 @@ export { Toggle } from './components/ui/Toggle/Toggle.js';
 export { ToggleGroup, ToggleGroupItem } from './components/ui/ToggleGroup/ToggleGroup.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/Tooltip/Tooltip.js';
 export { VimeoEmbed } from './components/ui/VimeoEmbed/VimeoEmbed.js';
+export { WorldMap } from './components/ui/WorldMap/WorldMap.js';
 export { WorkspaceAppSwitcher } from './components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.js';
 export { WORKSPACE_APP_SLUG_BASE_PATH } from './components/ui/WorkspaceAppSwitcher/workspaceApp.types.js';
 export { WORKSPACE_APPS_LS_KEY } from './components/ui/WorkspaceAppSwitcher/workspaceAppsConstants.js';
@@ -89,12 +90,11 @@ export { WORKSPACE_APP_ICONS, isWorkspaceAppIconKey } from './components/ui/Work
 export { findWorkspaceAppByPathname, workspaceAppSlugPath } from './components/ui/WorkspaceAppSwitcher/workspaceAppPaths.js';
 export { SidebarDatasetsItemsGrouped } from './components/widgets/SidebarDatasetsItemsGrouped/SidebarDatasetsItemsGrouped.js';
 export { groupSidebarDatasets } from './components/widgets/SidebarDatasetsItemsGrouped/groupSidebarDatasets.js';
+export { DriverCard } from './components/widgets/DriverCard/DriverCard.js';
 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 { MapBackground } from './components/widgets/DriverMap/MapBackground/MapBackground.js';
-export { LoadingSpinner } from './components/widgets/DriverMap/LoadingSpinner/LoadingSpinner.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';
@@ -103,6 +103,7 @@ export { SignInPage } from './components/widgets/SignInPage/SignInPage.js';
 export { ChartTooltipItem } from './components/ui/Chart/components/ChartTooltipItem.js';
 export { ChartLegendItem } from './components/ui/Chart/components/ChartLegendItem.js';
 export { CustomChartLegend } from './components/ui/Chart/components/CustomChartLegend/CustomChartLegend.js';
+export { ChartEmptyState } from './components/ui/Chart/components/ChartEmptyState/ChartEmptyState.js';
 export { ChartContainer, ChartStyle } from './components/ui/Chart/components/ChartContainer.js';
 export { ChartTooltipContent } from './components/ui/Chart/components/ChartTooltipContent.js';
 export { ChartLegendContent } from './components/ui/Chart/components/ChartLegendContent.js';

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

@@ -10,3 +10,4 @@ export { ChartTooltipItem } from './components/ChartTooltipItem';
 export { ChartLegendItem } from './components/ChartLegendItem';
 export { CustomChartLegend } from './components/CustomChartLegend/CustomChartLegend';
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, BaseChartWrapper, };
+export { ChartEmptyState, type ChartEmptyStateProps, type ChartEmptyStatusTone, } from './components/ChartEmptyState/ChartEmptyState';

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

@@ -1,8 +1,9 @@
 import { ComponentProps, ReactNode } from 'react';
-import { ChartConfig, ChartContainer } from '#uilib/components/ui/Chart/Chart';
 import type { QuantileBandConfig } from '#uilib/components/ui/Chart/chartForecastVisualization.types';
 import { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import type { ChartConfig } from '../Chart.types';
+import { ChartContainer } from './ChartContainer';
 import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
 export interface BaseChartWrapperProps {
     renderId?: string;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type ChartEmptyStatusTone = 'muted' | 'destructive';
+export interface ChartEmptyStateProps {
+    className?: string;
+    /** Primary guidance (muted). */
+    hint?: ReactNode;
+    /** Status / technical detail. */
+    status?: ReactNode;
+    statusTone?: ChartEmptyStatusTone;
+    /** `panel`: chart-sized block with light fill. `inline`: text only (e.g. above chart). */
+    variant?: 'panel' | 'inline';
+    align?: 'center' | 'start';
+}
+export declare function ChartEmptyState({ className, hint, status, statusTone, variant, align, }: ChartEmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+/**
+ * Shared Recharts plot / margin math (DOM-agnostic except measurement entry points).
+ * Keeps BaseChartWrapper tooltip clamp and ChartAreaInteractive brush in sync.
+ */
+export type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const DEFAULT_CHART_MARGIN: ChartMargin;
+export declare function resolveChartMargin(margin: Partial<ChartMargin> | undefined): ChartMargin;
+/** Plot box inside `.recharts-wrapper` (Recharts cartesian convention). */
+export declare function getPlotViewBox(wrapper: HTMLElement, m: ChartMargin): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type PlotRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Plot area in `host` local px: prefer painted `.recharts-cartesian-grid`, else
+ * last `.recharts-wrapper` + margins. One `hostRect` read; grid/wrapper rects as needed.
+ */
+export declare function measureHostRelativePlotRect(host: HTMLElement, margin: ChartMargin): PlotRect | null;