@sybilion/uilib 1.2.24 → 1.3.0

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/DriverIcon/DriverIcon.constants.json.js

@@ -0,0 +1,6 @@
+var FADE_DURATION = 300;
+var constants = {
+	FADE_DURATION: FADE_DURATION
+};
+
+export { FADE_DURATION, constants as default };

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Badge } from '../../../ui/Badge/Badge.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../../ui/Tooltip/Tooltip.js';
+import { getCategoryIcon } from '../driverCategoryIcon.js';
+import S from './DriverIcon.styl.js';
+
+const BADGE_SIZES = {
+    s: 's',
+    m: 'm',
+    l: 'l',
+};
+function DriverIcon({ driver, size, isSelected, onClick, isVisible, isLoading = false, }) {
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, className: cn(S.root, S[`size-${size}`], isSelected && S.selected, isVisible ? S.visible : S.hidden, isLoading && S.loadingHidden), children: jsx("button", { type: "button", onClick: onClick, style: {
+                        left: `${driver.coordinates.x}%`,
+                        top: `${driver.coordinates.y}%`,
+                        zIndex: isSelected ? 2 : '',
+                    }, children: jsx(Badge, { className: S.badge, children: jsx("div", { className: S.icon, children: getCategoryIcon(driver.category) }) }) }) }), jsx(TooltipContent, { side: "top", className: S.tooltipContent, children: jsxs("div", { className: S.tooltipSpacing, children: [jsxs("div", { className: S.tooltipCategory, children: [jsx("span", { className: S.tooltipCategoryIcon, children: getCategoryIcon(driver.category) }), jsx("span", { className: S.tooltipCategoryText, children: driver.category })] }), jsx("div", { className: S.tooltipName, children: driver.name })] }) })] }));
+}
+
+export { BADGE_SIZES, DriverIcon };

package/dist/esm/components/widgets/DriverMap/DriverIcon/DriverIcon.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)}}.DriverIcon_root__LJkZV{cursor:pointer;outline:none;position:absolute;transform:translateX(-50%) translateY(-50%)}.DriverIcon_root__LJkZV:hover{transition:transform .3s ease-out}.DriverIcon_root__LJkZV:focus{outline:none}.DriverIcon_badge__gV6XC,.DriverIcon_loadingHidden__fm2N0{opacity:0;pointer-events:none}.DriverIcon_badge__gV6XC{padding:.25rem;transform:translateY(10px);transition:all .3s ease-out}.DriverIcon_badge__gV6XC svg{height:20px;width:20px}.DriverIcon_size-s__5oC0V,.DriverIcon_size-s__5oC0V .DriverIcon_badge__gV6XC{border-radius:10px;height:2rem;width:2rem}.DriverIcon_size-m__HoK4J,.DriverIcon_size-m__HoK4J .DriverIcon_badge__gV6XC{border-radius:12px;height:2.5rem;width:2.5rem}.DriverIcon_size-l__6solM,.DriverIcon_size-l__6solM .DriverIcon_badge__gV6XC{border-radius:14px;height:3rem;width:3rem}.DriverIcon_visible__HVfIl .DriverIcon_badge__gV6XC{opacity:1;transform:translateY(0);transition:.3s ease-out;transition-property:opacity,transform}.DriverIcon_visible__HVfIl .DriverIcon_badge__gV6XC span{transition:box-shadow 0s ease-out .1s}.DriverIcon_root__LJkZV:first-child .DriverIcon_badge__gV6XC{transition-delay:30ms}.DriverIcon_visible__HVfIl:first-child .DriverIcon_badge__gV6XC{transition-delay:60ms}.DriverIcon_hidden__udGUf:first-child .DriverIcon_badge__gV6XC{transition-duration:.27s}.DriverIcon_root__LJkZV:nth-child(2) .DriverIcon_badge__gV6XC{transition-delay:60ms}.DriverIcon_visible__HVfIl:nth-child(2) .DriverIcon_badge__gV6XC{transition-delay:.12s}.DriverIcon_hidden__udGUf:nth-child(2) .DriverIcon_badge__gV6XC{transition-duration:.24s}.DriverIcon_root__LJkZV:nth-child(3) .DriverIcon_badge__gV6XC{transition-delay:90ms}.DriverIcon_visible__HVfIl:nth-child(3) .DriverIcon_badge__gV6XC{transition-delay:.18s}.DriverIcon_hidden__udGUf:nth-child(3) .DriverIcon_badge__gV6XC{transition-duration:.21s}.DriverIcon_root__LJkZV:nth-child(4) .DriverIcon_badge__gV6XC{transition-delay:.12s}.DriverIcon_visible__HVfIl:nth-child(4) .DriverIcon_badge__gV6XC{transition-delay:.24s}.DriverIcon_hidden__udGUf:nth-child(4) .DriverIcon_badge__gV6XC{transition-duration:.18s}.DriverIcon_root__LJkZV:nth-child(5) .DriverIcon_badge__gV6XC{transition-delay:.15s}.DriverIcon_visible__HVfIl:nth-child(5) .DriverIcon_badge__gV6XC{transition-delay:.3s}.DriverIcon_hidden__udGUf:nth-child(5) .DriverIcon_badge__gV6XC{transition-duration:.15s}.DriverIcon_root__LJkZV:nth-child(6) .DriverIcon_badge__gV6XC{transition-delay:.18s}.DriverIcon_visible__HVfIl:nth-child(6) .DriverIcon_badge__gV6XC{transition-delay:.36s}.DriverIcon_hidden__udGUf:nth-child(6) .DriverIcon_badge__gV6XC{transition-duration:.12s}.DriverIcon_root__LJkZV:hover{z-index:10}.DriverIcon_root__LJkZV:hover .DriverIcon_badge__gV6XC{box-shadow:0 0 0 1px var(--background);transform:scale(1.1);transition-delay:0ms;transition-duration:.2s}.DriverIcon_selected__-yaRV .DriverIcon_badge__gV6XC,.DriverIcon_selected__-yaRV:hover .DriverIcon_badge__gV6XC{box-shadow:inset 0 0 0 3px var(--sb-cyan-400);transform:scale(1.1)}.dark .DriverIcon_selected__-yaRV .DriverIcon_badge__gV6XC,.dark .DriverIcon_selected__-yaRV:hover .DriverIcon_badge__gV6XC{box-shadow:inset 0 0 0 2px var(--sb-cyan-500)}.DriverIcon_root__LJkZV:not(.DriverIcon_selected__-yaRV):hover .DriverIcon_icon__1XnNP{transform:scale(1.05)}.DriverIcon_tooltipContent__a5p3p{background-color:var(--popover);border:1px solid var(--border);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:var(--popover-foreground);font-family:var(--font-family-body);font-size:.75rem;max-width:20rem}.DriverIcon_tooltipCategory__k036X{align-items:center;color:var(--muted-foreground);display:flex;gap:.25rem}.DriverIcon_tooltipCategoryIcon__CKac6{color:var(--muted-foreground);height:.75rem;width:.75rem}.DriverIcon_tooltipCategoryText__YaHvf{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.DriverIcon_tooltipName__3YJCB{font-weight:400}.DriverIcon_tooltipSpacing__p2MvJ{display:flex;flex-direction:column;gap:.25rem}";
+var S = {"root":"DriverIcon_root__LJkZV","loadingHidden":"DriverIcon_loadingHidden__fm2N0","badge":"DriverIcon_badge__gV6XC","size-s":"DriverIcon_size-s__5oC0V","size-m":"DriverIcon_size-m__HoK4J","size-l":"DriverIcon_size-l__6solM","visible":"DriverIcon_visible__HVfIl","hidden":"DriverIcon_hidden__udGUf","selected":"DriverIcon_selected__-yaRV","icon":"DriverIcon_icon__1XnNP","tooltipContent":"DriverIcon_tooltipContent__a5p3p","tooltipCategory":"DriverIcon_tooltipCategory__k036X","tooltipCategoryIcon":"DriverIcon_tooltipCategoryIcon__CKac6","tooltipCategoryText":"DriverIcon_tooltipCategoryText__YaHvf","tooltipName":"DriverIcon_tooltipName__3YJCB","tooltipSpacing":"DriverIcon_tooltipSpacing__p2MvJ"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,107 @@
+import { BADGE_SIZES } from './DriverIcon/DriverIcon.js';
+import { geographicToSVG, svgToPercentage, getResponsiveCoordinates } from './driverMapGeography.js';
+import { getDriverImportance } from './driverMapSelection.js';
+
+// Calculate badge sizes for all drivers based on their importance
+const calculateBadgeSizes = (drivers) => {
+    if (drivers.length === 0)
+        return {};
+    const importanceValues = drivers
+        .map(getDriverImportance)
+        .filter((val) => typeof val === 'number' && !isNaN(val) && val >= 0);
+    if (importanceValues.length === 0) {
+        return drivers.reduce((acc, driver) => {
+            acc[driver.id] = BADGE_SIZES.s;
+            return acc;
+        }, {});
+    }
+    const min = Math.min(...importanceValues);
+    const max = Math.max(...importanceValues);
+    const range = max - min;
+    if (range === 0) {
+        return drivers.reduce((acc, driver) => {
+            acc[driver.id] = BADGE_SIZES.s;
+            return acc;
+        }, {});
+    }
+    return drivers.reduce((acc, driver) => {
+        const importance = getDriverImportance(driver);
+        if (typeof importance !== 'number' ||
+            isNaN(importance) ||
+            importance < 0) {
+            acc[driver.id] = BADGE_SIZES.s;
+            return acc;
+        }
+        const normalized = (importance - min) / range;
+        acc[driver.id] =
+            normalized >= 0.66
+                ? BADGE_SIZES.l
+                : normalized >= 0.33
+                    ? BADGE_SIZES.m
+                    : BADGE_SIZES.s;
+        return acc;
+    }, {});
+};
+const hasValidCoords = (coords) => {
+    return (coords?.x != null &&
+        coords?.y != null &&
+        typeof coords.x === 'number' &&
+        typeof coords.y === 'number' &&
+        !isNaN(coords.x) &&
+        !isNaN(coords.y) &&
+        Math.abs(coords.x) > 0 &&
+        Math.abs(coords.y) > 0);
+};
+const findMostSpecificRegion = (driver) => {
+    if (driver.region?.length > 0) {
+        return {
+            name: driver.region[driver.region.length - 1],
+            coordinates: null,
+        };
+    }
+    const srcName = driver.src_region?.name;
+    const tgtName = driver.tgt_region?.name;
+    const srcCoords = driver.src_region?.coordinates;
+    const tgtCoords = driver.tgt_region?.coordinates;
+    const srcIsNonWorld = srcName && srcName !== 'World' && hasValidCoords(srcCoords);
+    const tgtIsNonWorld = tgtName && tgtName !== 'World' && hasValidCoords(tgtCoords);
+    if (tgtIsNonWorld) {
+        return {
+            name: tgtName,
+            coordinates: tgtCoords,
+        };
+    }
+    if (srcIsNonWorld) {
+        return {
+            name: srcName,
+            coordinates: srcCoords,
+        };
+    }
+    return { name: null, coordinates: null };
+};
+const getDriverCoordinates = (driver, specificRegion, existingDrivers = []) => {
+    if (!specificRegion.name || specificRegion.name === 'World') {
+        return driver.coordinates;
+    }
+    if (specificRegion.coordinates) {
+        const isLatLng = Math.abs(specificRegion.coordinates.x) <= 180 &&
+            Math.abs(specificRegion.coordinates.y) <= 90;
+        if (isLatLng) {
+            const svgCoords = geographicToSVG(specificRegion.coordinates.y, specificRegion.coordinates.x);
+            const percentageCoords = svgToPercentage(svgCoords.x, svgCoords.y);
+            return {
+                x: Math.min(95, Math.max(5, percentageCoords.x)),
+                y: Math.min(95, Math.max(5, percentageCoords.y)),
+                continent: driver.coordinates?.continent || 'Global',
+            };
+        }
+        return {
+            x: specificRegion.coordinates.x,
+            y: specificRegion.coordinates.y,
+            continent: driver.coordinates?.continent || 'Global',
+        };
+    }
+    return getResponsiveCoordinates(specificRegion.name, existingDrivers);
+};
+
+export { calculateBadgeSizes, findMostSpecificRegion, getDriverCoordinates, hasValidCoords };

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

@@ -0,0 +1,129 @@
+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 { getHighestImportanceDriver } from './driverMapSelection.js';
+
+const delay = (ms) => new Promise(r => setTimeout(r, ms));
+const transitionDelay = () => delay(constants.FADE_DURATION);
+function DriverMap({ drivers, isLoading, setSelectedDriver, selectedDriver, }) {
+    const visibleDriversRef = useRef([]);
+    const [showingDrivers, setShowingDrivers] = useState(drivers);
+    const [badgeSizes, setBadgeSizes] = useState({});
+    const [isVisible, setIsVisible] = useState(false);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const makeTransition = async (nextDrivers) => {
+        const hadDrivers = showingDrivers.length > 0;
+        setIsTransitioning(true);
+        if (hadDrivers) {
+            setIsVisible(false);
+            await transitionDelay();
+        }
+        if (nextDrivers.length > 0) {
+            setShowingDrivers(nextDrivers);
+            setIsVisible(false);
+            const sizes = calculateBadgeSizes(nextDrivers);
+            setBadgeSizes(sizes);
+            await delay(30);
+            setIsVisible(true);
+            await transitionDelay();
+        }
+        else {
+            setShowingDrivers([]);
+            setBadgeSizes({});
+            setIsVisible(false);
+        }
+        setIsTransitioning(false);
+    };
+    const [worldDrivers, otherDrivers] = useMemo(() => {
+        const visibleDrivers = [];
+        const worldDriversList = [];
+        drivers.forEach(driver => {
+            let importance = driver.importance || 0;
+            if (importance === 0) {
+                const mean = driver?.rawImportance?.overall?.mean;
+                if (typeof mean === 'number') {
+                    importance = Math.abs(mean) * 100;
+                }
+            }
+            const specificRegion = findMostSpecificRegion(driver);
+            const isEmptyRegion = driver.region?.length === 0;
+            const isWorldRegion = specificRegion.name === 'World' ||
+                driver.region?.slice(-1)[0] === 'World';
+            const coordinates = getDriverCoordinates(driver, specificRegion, visibleDrivers);
+            const driverToAdd = {
+                ...driver,
+                coordinates,
+            };
+            const shouldGoToWorldDrivers = isWorldRegion ||
+                !hasValidCoords(driverToAdd.coordinates) ||
+                (isEmptyRegion && !specificRegion.name);
+            if (shouldGoToWorldDrivers && importance >= 0) {
+                worldDriversList.push(driver);
+            }
+            else if (hasValidCoords(driverToAdd.coordinates) && importance >= 0) {
+                visibleDrivers.push(driverToAdd);
+            }
+        });
+        return [
+            worldDriversList.sort((a, b) => b.importance - a.importance),
+            visibleDrivers,
+        ];
+    }, [drivers]);
+    useEffect(() => {
+        void makeTransition(drivers);
+        if (drivers.length > 0) {
+            const idx = getHighestImportanceDriver(drivers);
+            if (idx !== null && idx >= 0) {
+                setSelectedDriver(drivers[idx]);
+            }
+        }
+    }, [drivers]);
+    useEffect(() => {
+        visibleDriversRef.current = otherDrivers;
+    }, [otherDrivers]);
+    const handleKeyDown = useCallback((e) => {
+        const items = visibleDriversRef.current;
+        if (!selectedDriver || items.length === 0 || e.metaKey || e.ctrlKey)
+            return;
+        const stop = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const currIndex = items.findIndex(d => d.id === selectedDriver.id);
+        if (e.key === 'ArrowLeft') {
+            const prevIndex = currIndex > 0 ? currIndex - 1 : items.length - 1;
+            setSelectedDriver(items[prevIndex]);
+            stop();
+        }
+        else if (e.key === 'ArrowRight') {
+            const nextIndex = currIndex < items.length - 1 ? currIndex + 1 : 0;
+            setSelectedDriver(items[nextIndex]);
+            stop();
+        }
+    }, [selectedDriver, setSelectedDriver]);
+    useEvent({
+        event: 'keydown',
+        callback: handleKeyDown,
+        isCapture: true,
+    });
+    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 || {
+                            x: 0,
+                            y: 0,
+                            continent: 'Global',
+                        },
+                    };
+                    return (jsx(DriverIcon, { isLoading: isLoading, isVisible: isVisible, driver: driverWithCoords, size: badgeSizes[driver.id] || 's', isSelected: selectedDriver?.id === driver.id, onClick: () => setSelectedDriver(driver) }, driver.id));
+                }) })] }));
+}
+
+export { DriverMap };

package/dist/esm/components/widgets/DriverMap/DriverMap.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)}}.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 };