@agg-market/ui 0.0.3 → 0.0.4

package/dist/{chunk-4NK2FNAG.mjs → chunk-ZHKMDK5M.mjs}

@@ -8,46 +8,47 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-XDAEEJYR.mjs";
+} from "./chunk-P23GR7NX.mjs";
 import {
   normalizeProbability,
   resolveEventListItemEvent,
   resolveTileImage,
   resolveTileTitle,
+  resolveVenueLabel,
   selectPrimaryVenueMarket
-} from "./chunk-PAQ542ER.mjs";
+} from "./chunk-GHB3GOCW.mjs";
 import {
   Badge
-} from "./chunk-MG243DSX.mjs";
+} from "./chunk-AEMAY3MR.mjs";
 import {
   Skeleton,
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges
-} from "./chunk-NFYS557L.mjs";
+} from "./chunk-JH5VMNDL.mjs";
 import {
   VenueLogo
-} from "./chunk-LY6474C4.mjs";
+} from "./chunk-BLSHXIAH.mjs";
 import {
   Button
-} from "./chunk-J6L5BLKX.mjs";
+} from "./chunk-PGSPYQOW.mjs";
 import {
   Typography
-} from "./chunk-DQ6XFBYJ.mjs";
+} from "./chunk-DYEWXEEY.mjs";
 import {
   Card
-} from "./chunk-YUIZZ6XE.mjs";
+} from "./chunk-3O4U3E5I.mjs";
 import {
   LineChart
-} from "./chunk-FACIYUNK.mjs";
+} from "./chunk-VC7LTPQD.mjs";
 import {
   SwitchButton
-} from "./chunk-TTOR7JCT.mjs";
+} from "./chunk-JRS2M5GY.mjs";
 import {
   __objRest,
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-GC3QIIH7.mjs";
+} from "./chunk-GJ4U5NCE.mjs";
 
 // src/events/item-details/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -85,12 +86,30 @@ var EventListItemDetailsUnavailableState = ({
     }
   );
 };
+var probabilityModeOrder = ["yes", "no"];
+var clampProbability = (value) => {
+  if (value < 0)
+    return 0;
+  if (value > 1)
+    return 1;
+  return value;
+};
+var resolveAverageProbability = (values) => {
+  const validValues = values.filter((value) => value != null);
+  if (validValues.length === 0)
+    return void 0;
+  return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
+};
+var resolveOutcomeCandidateIds = (market, outcome) => {
+  var _a;
+  return [outcome.id, (_a = outcome.externalIdentifier) != null ? _a : void 0, market.externalIdentifier].filter(
+    (value) => typeof value === "string" && value.trim().length > 0
+  );
+};
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
-  outcomeLabels,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
-  probabilityByLabel,
   switchLabels,
   isDateOutcomeMarket,
   classNames,
@@ -100,65 +119,89 @@ var EventListItemDetailsGraphSection = ({
   selectedTimeRange
 }) => {
   const labels = useLabels();
-  const isLocalOutcomeSelection = !isDateOutcomeMarket && outcomeLabels.length === 2;
-  const [internalSelectedOutcomeLabel, setInternalSelectedOutcomeLabel] = useState(selectedOutcomeLabel);
-  const [selectedBinaryOutcome, setSelectedBinaryOutcome] = useState("Yes");
-  useEffect(() => {
-    setInternalSelectedOutcomeLabel(selectedOutcomeLabel);
-  }, [selectedOutcomeLabel]);
-  const resolvedSelectedOutcomeLabel = isLocalOutcomeSelection ? internalSelectedOutcomeLabel : selectedOutcomeLabel;
-  const selectedOutcomesByVenue = useMemo(() => {
-    return resolveOutcomesByVenue(venueMarkets, resolvedSelectedOutcomeLabel);
-  }, [resolvedSelectedOutcomeLabel, venueMarkets]);
-  const segmentedDisplayItems = useMemo(() => {
-    var _a;
+  const [selectedVenue, setSelectedVenue] = useState(null);
+  const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
+  const probabilityModeConfigs = useMemo(() => {
     if (isDateOutcomeMarket) {
-      const selectedOutcomeAverageProbability = (_a = probabilityByLabel.get(resolvedSelectedOutcomeLabel)) != null ? _a : 0;
-      const noProbability = Math.max(0, 1 - selectedOutcomeAverageProbability);
-      return [
-        {
-          label: labels.eventItemDetails.yes,
-          display: `${labels.eventItemDetails.yes} ${formatPercent(selectedOutcomeAverageProbability)}`,
-          isActive: selectedBinaryOutcome === "Yes",
-          onSelect: () => setSelectedBinaryOutcome("Yes")
-        },
-        {
-          label: labels.eventItemDetails.no,
-          display: `${labels.eventItemDetails.no} ${formatPercent(noProbability)}`,
-          isActive: selectedBinaryOutcome === "No",
-          onSelect: () => setSelectedBinaryOutcome("No")
-        }
-      ];
-    }
-    return switchLabels.map((label) => {
-      const probability = probabilityByLabel.get(label);
-      const probabilitySuffix = probability == null ? "" : ` ${formatPercent(probability)}`;
       return {
-        label,
-        display: `${label}${probabilitySuffix}`,
-        isActive: resolvedSelectedOutcomeLabel === label,
-        onSelect: () => {
-          if (isLocalOutcomeSelection) {
-            setInternalSelectedOutcomeLabel(label);
-            return;
-          }
-          onSelectedOutcomeLabelChange(label);
+        yes: {
+          switchLabel: switchLabels[0],
+          sourceOutcomeLabel: selectedOutcomeLabel,
+          transformProbability: (value) => value
+        },
+        no: {
+          switchLabel: switchLabels[1],
+          sourceOutcomeLabel: selectedOutcomeLabel,
+          transformProbability: (value) => 1 - value
         }
       };
-    });
+    }
+    return {
+      yes: {
+        switchLabel: switchLabels[0],
+        sourceOutcomeLabel: switchLabels[0],
+        transformProbability: (value) => value
+      },
+      no: {
+        switchLabel: switchLabels[1],
+        sourceOutcomeLabel: switchLabels[1],
+        transformProbability: (value) => value
+      }
+    };
+  }, [isDateOutcomeMarket, selectedOutcomeLabel, switchLabels]);
+  const selectedOutcomesByMode = useMemo(() => {
+    return {
+      yes: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.yes.sourceOutcomeLabel),
+      no: resolveOutcomesByVenue(venueMarkets, probabilityModeConfigs.no.sourceOutcomeLabel)
+    };
   }, [
-    formatPercent,
-    isDateOutcomeMarket,
-    isLocalOutcomeSelection,
-    onSelectedOutcomeLabelChange,
-    probabilityByLabel,
-    resolvedSelectedOutcomeLabel,
-    selectedBinaryOutcome,
-    switchLabels
+    probabilityModeConfigs.no.sourceOutcomeLabel,
+    probabilityModeConfigs.yes.sourceOutcomeLabel,
+    venueMarkets
   ]);
+  useEffect(() => {
+    if (isDateOutcomeMarket) {
+      return;
+    }
+    const nextMode = selectedOutcomeLabel === probabilityModeConfigs.no.sourceOutcomeLabel ? "no" : "yes";
+    setActiveProbabilityMode(nextMode);
+  }, [isDateOutcomeMarket, probabilityModeConfigs.no.sourceOutcomeLabel, selectedOutcomeLabel]);
+  const normalizedVenueDataByMode = useMemo(() => {
+    const buildModeData = (mode) => {
+      const modeConfig = probabilityModeConfigs[mode];
+      return selectedOutcomesByMode[mode].map((outcomeByVenue, index) => {
+        const rawProbability = normalizeProbability(outcomeByVenue.outcome.price);
+        const transformedProbability = rawProbability == null ? void 0 : clampProbability(modeConfig.transformProbability(rawProbability));
+        return {
+          venue: outcomeByVenue.venue,
+          venueLabel: resolveVenueLabel(outcomeByVenue.venue, venueInfo, labels),
+          market: outcomeByVenue.market,
+          outcome: outcomeByVenue.outcome,
+          probability: transformedProbability,
+          color: resolveSeriesColor(outcomeByVenue.venue, index)
+        };
+      });
+    };
+    return {
+      yes: buildModeData("yes"),
+      no: buildModeData("no")
+    };
+  }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
+  const allOutcomesForHistory = useMemo(() => {
+    const outcomeByModeAndId = /* @__PURE__ */ new Map();
+    probabilityModeOrder.forEach((mode) => {
+      selectedOutcomesByMode[mode].forEach((outcomeByVenue) => {
+        outcomeByModeAndId.set(
+          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
+          outcomeByVenue
+        );
+      });
+    });
+    return [...outcomeByModeAndId.values()];
+  }, [selectedOutcomesByMode]);
   const priceHistoryGroups = useMemo(() => {
-    return buildPriceHistoryGroups(selectedOutcomesByVenue);
-  }, [selectedOutcomesByVenue]);
+    return buildPriceHistoryGroups(allOutcomesForHistory);
+  }, [allOutcomesForHistory]);
   const timeWindow = useMemo(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
@@ -167,35 +210,114 @@ var EventListItemDetailsGraphSection = ({
   }, timeWindow), {
     enabled: priceHistoryGroups.length > 0
   }));
-  const chartSeries = useMemo(() => {
-    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length))
-      return [];
-    return priceHistoryData.map((history, index) => {
-      var _a, _b;
-      const matchingOutcomeByVenue = (_a = selectedOutcomesByVenue.find((item) => {
-        return item.outcome.id === history.marketId || item.outcome.externalIdentifier === history.marketId || item.market.externalIdentifier === history.marketId;
-      })) != null ? _a : selectedOutcomesByVenue.find((item) => item.venue === history.venue);
-      const color = resolveSeriesColor((_b = matchingOutcomeByVenue == null ? void 0 : matchingOutcomeByVenue.venue) != null ? _b : history.venue, index);
+  const priceHistoryByVenue = useMemo(() => {
+    const historyByVenue = /* @__PURE__ */ new Map();
+    if (!(priceHistoryData == null ? void 0 : priceHistoryData.length)) {
+      return historyByVenue;
+    }
+    priceHistoryData.forEach((historyItem) => {
+      const venue = historyItem.venue;
+      const venueHistory = historyByVenue.get(venue);
+      if (venueHistory) {
+        venueHistory.push(historyItem);
+        return;
+      }
+      historyByVenue.set(venue, [historyItem]);
+    });
+    return historyByVenue;
+  }, [priceHistoryData]);
+  const chartSeriesByMode = useMemo(() => {
+    const buildSeries = (mode) => {
+      const modeConfig = probabilityModeConfigs[mode];
+      const chartSeries = [];
+      normalizedVenueDataByMode[mode].forEach((venueData) => {
+        var _a;
+        const venueHistory = priceHistoryByVenue.get(venueData.venue);
+        if (!(venueHistory == null ? void 0 : venueHistory.length))
+          return;
+        const candidateIds = resolveOutcomeCandidateIds(venueData.market, venueData.outcome);
+        const matchingHistory = (_a = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a : venueHistory.length === 1 ? venueHistory[0] : void 0;
+        if (!matchingHistory)
+          return;
+        const points = matchingHistory.points.map((point) => {
+          const probability = normalizeProbability(point.price);
+          if (probability == null || !Number.isFinite(point.timestamp))
+            return null;
+          return {
+            time: point.timestamp,
+            value: clampProbability(modeConfig.transformProbability(probability)) * 100
+          };
+        }).filter((point) => point != null);
+        if (points.length === 0)
+          return;
+        chartSeries.push({
+          id: `${mode}-${venueData.venue}-${matchingHistory.marketId}`,
+          venue: venueData.venue,
+          color: venueData.color,
+          points,
+          lineWidth: 2,
+          lineStyle: "solid"
+        });
+      });
+      return chartSeries;
+    };
+    return {
+      yes: buildSeries("yes"),
+      no: buildSeries("no")
+    };
+  }, [normalizedVenueDataByMode, priceHistoryByVenue, probabilityModeConfigs]);
+  const visibleChartSeries = useMemo(() => {
+    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    if (!selectedVenue)
+      return modeSeries;
+    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+  const segmentedDisplayItems = useMemo(() => {
+    return probabilityModeOrder.map((mode) => {
+      const averageProbability = resolveAverageProbability(
+        normalizedVenueDataByMode[mode].map((venueData) => venueData.probability)
+      );
+      const suffix = averageProbability == null ? "" : ` ${formatPercent(averageProbability)}`;
+      const switchLabel = probabilityModeConfigs[mode].switchLabel;
       return {
-        id: `${history.venue}-${history.marketId}-${index}`,
-        color,
-        points: history.points.map((point) => ({
-          time: point.timestamp,
-          value: point.price * 100
-        }))
+        mode,
+        display: `${switchLabel}${suffix}`
       };
-    }).filter((seriesItem) => seriesItem.points.length > 0);
-  }, [priceHistoryData, selectedOutcomesByVenue]);
+    });
+  }, [formatPercent, normalizedVenueDataByMode, probabilityModeConfigs]);
+  const activeModeVenueData = normalizedVenueDataByMode[activeProbabilityMode];
+  useEffect(() => {
+    if (!selectedVenue) {
+      return;
+    }
+    if (activeModeVenueData.some((item) => item.venue === selectedVenue)) {
+      return;
+    }
+    setSelectedVenue(null);
+  }, [activeModeVenueData, selectedVenue]);
+  const handleProbabilityModeChange = (nextMode) => {
+    setActiveProbabilityMode(nextMode);
+    if (isDateOutcomeMarket) {
+      return;
+    }
+    onSelectedOutcomeLabelChange(probabilityModeConfigs[nextMode].sourceOutcomeLabel);
+  };
+  const handleVenueToggle = (venue) => {
+    setSelectedVenue((currentSelectedVenue) => {
+      if (currentSelectedVenue === venue)
+        return null;
+      return venue;
+    });
+  };
   return /* @__PURE__ */ jsx(
     LineChart,
     {
       classNames: { root: classNames == null ? void 0 : classNames.chart },
-      series: chartSeries,
+      series: visibleChartSeries,
       height: 300,
       isLoading: isPriceHistoryLoading,
-      showSeriesControls: selectedOutcomesByVenue.length > 0 || segmentedDisplayItems.length > 0,
+      showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
       renderSeriesControls: () => {
-        var _a, _b, _c, _d;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -208,28 +330,43 @@ var EventListItemDetailsGraphSection = ({
                     "flex min-w-0 gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
                     classNames == null ? void 0 : classNames.outcomeBadges
                   ),
-                  children: selectedOutcomesByVenue.map((outcomeByVenue) => {
-                    var _a2;
-                    const probability = normalizeProbability(outcomeByVenue.outcome.price);
-                    const text = probability == null ? "-" : formatPercent(probability);
+                  children: activeModeVenueData.map((venueData) => {
+                    var _a;
+                    const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
+                    const isActiveVenue = selectedVenue === venueData.venue;
                     return /* @__PURE__ */ jsx(
-                      Badge,
+                      "button",
                       {
-                        text,
-                        size: "l",
-                        prefix: showVenueLogo ? /* @__PURE__ */ jsx(
-                          VenueLogo,
+                        type: "button",
+                        "aria-label": `${venueData.venueLabel} ${text}`,
+                        "aria-pressed": isActiveVenue,
+                        className: cn(
+                          "rounded-agg-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover"
+                        ),
+                        onClick: () => handleVenueToggle(venueData.venue),
+                        children: /* @__PURE__ */ jsx(
+                          Badge,
                           {
-                            venue: outcomeByVenue.venue,
-                            size: "s",
-                            title: (_a2 = venueInfo == null ? void 0 : venueInfo[outcomeByVenue.venue]) == null ? void 0 : _a2.label
+                            text,
+                            size: "l",
+                            prefix: showVenueLogo ? /* @__PURE__ */ jsx(
+                              VenueLogo,
+                              {
+                                venue: venueData.venue,
+                                size: "s",
+                                title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
+                              }
+                            ) : void 0,
+                            classNames: {
+                              root: cn(
+                                "h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6",
+                                isActiveVenue ? "border-agg-primary bg-agg-secondary font-agg-bold" : "border-transparent bg-agg-secondary-hover font-agg-normal"
+                              )
+                            }
                           }
-                        ) : void 0,
-                        classNames: {
-                          root: "h-9 shrink-0 bg-agg-secondary-hover px-4 text-agg-base leading-agg-6"
-                        }
+                        )
                       },
-                      `${outcomeByVenue.market.id}-${outcomeByVenue.outcome.id}`
+                      `${activeProbabilityMode}-${venueData.market.id}-${venueData.outcome.id}`
                     );
                   })
                 }
@@ -239,13 +376,10 @@ var EventListItemDetailsGraphSection = ({
                 {
                   ariaLabel: labels.eventItemDetails.outcomeSelectorAria,
                   className: cn("w-full md:w-fit", classNames == null ? void 0 : classNames.segmentedControl),
-                  value: (_d = (_c = (_a = segmentedDisplayItems.find((item) => item.isActive)) == null ? void 0 : _a.label) != null ? _c : (_b = segmentedDisplayItems[0]) == null ? void 0 : _b.label) != null ? _d : "",
-                  onValueChange: (nextValue) => {
-                    var _a2;
-                    (_a2 = segmentedDisplayItems.find((item) => item.label === nextValue)) == null ? void 0 : _a2.onSelect();
-                  },
+                  value: activeProbabilityMode,
+                  onValueChange: handleProbabilityModeChange,
                   options: segmentedDisplayItems.map((segmentedItem) => ({
-                    value: segmentedItem.label,
+                    value: segmentedItem.mode,
                     label: segmentedItem.display,
                     ariaLabel: segmentedItem.display
                   }))
@@ -365,7 +499,7 @@ var EventListItemDetailsContent = ({
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 md:gap-4", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3 md:gap-4 ", classNames == null ? void 0 : classNames.header), children: [
           resolvedImage ? /* @__PURE__ */ jsx(
             "img",
             {
@@ -380,7 +514,7 @@ var EventListItemDetailsContent = ({
               {
                 variant: "value",
                 className: cn(
-                  "min-w-0 text-agg-base font-agg-bold leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:text-agg-2xl md:leading-agg-8 md:[display:block] md:truncate md:whitespace-nowrap",
+                  "min-w-0 text-agg-base font-agg-bold! leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:text-agg-2xl md:leading-agg-8 md:block md:truncate md:whitespace-nowrap",
                   classNames == null ? void 0 : classNames.title
                 ),
                 children: resolvedTitle
@@ -452,10 +586,8 @@ var EventListItemDetailsContent = ({
           EventListItemDetailsGraphSection,
           {
             venueMarkets,
-            outcomeLabels,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
-            probabilityByLabel,
             switchLabels,
             isDateOutcomeMarket,
             classNames,

package/dist/{chunk-C4OI72SM.mjs → chunk-ZVBVGWSP.mjs}

@@ -3,6 +3,7 @@ var iconSizeClasses = {
   xxs: "h-2 w-2",
   xs: "h-3 w-3",
   s: "h-4 w-4",
+  ms: "h-5 w-5",
   m: "h-6 w-6",
   l: "h-8 w-8",
   xl: "h-10 w-10",