@agg-market/ui 9.0.0 → 10.0.0

package/dist/{chunk-6CRY27SQ.mjs → chunk-GYOCLZGH.mjs}

@@ -27,7 +27,7 @@ import {
   marketDetailsDefaultIsOpened,
   orderBookRowLimitDefault,
   toDate
-} from "./chunk-3G7C6WEC.mjs";
+} from "./chunk-XP7DREIX.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";
@@ -238,7 +238,6 @@ var EventListItemContent = ({
   event,
   title,
   image,
-  showVenueLogo = true,
   maxOutcomes = 2,
   classNames,
   venueInfo,
@@ -274,7 +273,7 @@ var EventListItemContent = ({
       return;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) === "Enter" || (eventToHandle == null ? void 0 : eventToHandle.key) === " ") {
       eventToHandle == null ? void 0 : eventToHandle.preventDefault();
-      onClick();
+      onClick == null ? void 0 : onClick(event);
     }
   };
   const renderArbitrage = (value) => {
@@ -301,7 +300,7 @@ var EventListItemContent = ({
       className: cn(baseCardClassName, onClick && "cursor-pointer", classNames == null ? void 0 : classNames.root),
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
-      onClick,
+      onClick: () => onClick == null ? void 0 : onClick(event),
       onKeyDown: handleKeyDown,
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       children: [
@@ -355,7 +354,7 @@ var EventListItemContent = ({
                     Badge,
                     {
                       text: config.formatPercent(probability),
-                      prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      prefix: /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }),
                       size: "large",
                       classNames: {
                         root: cn(
@@ -388,7 +387,7 @@ var EventListItemContent = ({
                 ) }),
                 /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
                 singleVenue ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
-                  showVenueLogo ? /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(
                     VenueLogo,
                     {
                       venue: singleVenue,
@@ -396,14 +395,14 @@ var EventListItemContent = ({
                       isMonochromatic: true,
                       className: "text-agg-muted-foreground!"
                     }
-                  ) : null,
+                  ),
                   /* @__PURE__ */ jsx("span", { children: venueLabel })
                 ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
                   venueCount,
                   labels.eventItem.venueSingular,
                   labels.eventItem.venuePlural
                 ) }),
-                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
+                !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
                   VenueLogo,
                   {
                     venue,
@@ -471,7 +470,13 @@ EventListItem.displayName = "EventListItem";
 
 // src/events/item-details/index.tsx
 import { useEffect, useMemo as useMemo3, useState } from "react";
-import { useLabels as useLabels3, usePriceHistory, useSdkUiConfig as useSdkUiConfig2, useVenueEvent as useVenueEvent2 } from "@agg-market/hooks";
+import {
+  useLabels as useLabels3,
+  useMarketChart,
+  useSdkUiConfig as useSdkUiConfig2,
+  useVenueEvent as useVenueEvent2,
+  timeRangeToInterval
+} from "@agg-market/hooks";
 
 // src/primitives/chart/chart-type-switch.tsx
 import { useLabels as useLabels2 } from "@agg-market/hooks";
@@ -534,7 +539,9 @@ var ChartTypeSwitch = ({
               "transition-colors duration-200 ease-in-out",
               isActive ? "text-agg-foreground" : "text-agg-muted-foreground"
             ),
-            onClick: () => {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
               if (isActive) {
                 return;
               }
@@ -563,14 +570,9 @@ var isDateLikeLabel = (value) => {
     return false;
   return dayjs2(value).isValid();
 };
-var formatDateLabel = (value) => {
-  if (!isDateLikeLabel(value))
-    return value;
-  return dayjs2(value).format("MMM D, YYYY");
-};
-var getDefaultSelectedTimeRange = (value) => {
+var getDefaultSelectedTimeRange = (value, fallback = "1D") => {
   if (!value)
-    return "1M";
+    return fallback;
   return value;
 };
 var getTimeWindowByRange = (range) => {
@@ -652,24 +654,6 @@ var resolveOutcomesByVenue = (venueMarkets, selectedOutcomeLabel) => {
     };
   }).filter((item) => item != null);
 };
-var buildPriceHistoryGroups = (selectedOutcomes, fallbackMarketId) => {
-  const marketIdByVenue = /* @__PURE__ */ new Map();
-  selectedOutcomes.forEach(({ venue, market }) => {
-    var _a, _b;
-    const marketWithCanonicalId = market;
-    const canonicalMarketId = (_a = marketWithCanonicalId.marketId) != null ? _a : fallbackMarketId;
-    if (!canonicalMarketId)
-      return;
-    if (!marketIdByVenue.has(venue)) {
-      marketIdByVenue.set(venue, /* @__PURE__ */ new Set());
-    }
-    (_b = marketIdByVenue.get(venue)) == null ? void 0 : _b.add(canonicalMarketId);
-  });
-  return [...marketIdByVenue.entries()].map(([venue, marketIds]) => ({
-    venue,
-    venueMarketOutcomeIds: [...marketIds]
-  })).filter((group) => group.venueMarketOutcomeIds.length > 0);
-};
 var resolveSeriesColor = (venue, index) => {
   var _a;
   const colorFromVenue = lineColorByVenue[venue];
@@ -677,6 +661,98 @@ var resolveSeriesColor = (venue, index) => {
     return colorFromVenue;
   return (_a = fallbackLineColors[index % fallbackLineColors.length]) != null ? _a : "#2e5cff";
 };
+var toNonEmptyString = (value) => {
+  if (typeof value !== "string")
+    return void 0;
+  const trimmedValue = value.trim();
+  return trimmedValue ? trimmedValue : void 0;
+};
+var resolveCanonicalMarketId = (venueMarkets, fallbackMarketId) => {
+  var _a;
+  const uniqueMarketIds = Array.from(
+    new Set(venueMarkets.map((market) => toNonEmptyString(market.marketId)).filter(Boolean))
+  );
+  if (uniqueMarketIds.length === 1) {
+    return uniqueMarketIds[0];
+  }
+  return (_a = toNonEmptyString(fallbackMarketId)) != null ? _a : uniqueMarketIds[0];
+};
+var toChartDisplayValue = (value, transformProbability) => {
+  if (value == null || !Number.isFinite(value))
+    return void 0;
+  return transformProbability(value) * 100;
+};
+var marketChartCandleToLineChartPoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const open = (_a = toChartDisplayValue(candle.open, transformProbability)) != null ? _a : 0;
+  const high = (_b = toChartDisplayValue(candle.high, transformProbability)) != null ? _b : open;
+  const low = (_c = toChartDisplayValue(candle.low, transformProbability)) != null ? _c : open;
+  const close = (_d = toChartDisplayValue(candle.close, transformProbability)) != null ? _d : open;
+  return {
+    time: candle.time,
+    value: close,
+    open,
+    high,
+    low,
+    close
+  };
+};
+var marketChartCandleToScaledCandlePoint = (candle, transformProbability) => {
+  var _a, _b, _c, _d;
+  const point = marketChartCandleToLineChartPoint(candle, transformProbability);
+  return {
+    time: point.time,
+    open: (_a = point.open) != null ? _a : point.value,
+    high: (_b = point.high) != null ? _b : point.value,
+    low: (_c = point.low) != null ? _c : point.value,
+    close: (_d = point.close) != null ? _d : point.value,
+    v: candle.volume
+  };
+};
+var resolveMarketChartVenueSeries = ({
+  chartData,
+  transformProbability
+}) => {
+  if (!chartData)
+    return [];
+  return Object.entries(chartData.venues).map(([venue, venueData]) => ({
+    venue,
+    points: venueData.candles.map(
+      (candle) => marketChartCandleToLineChartPoint(candle, transformProbability)
+    )
+  })).filter((item) => item.points.length > 0);
+};
+var resolveMarketChartLiveState = ({
+  chartData,
+  selectedVenue,
+  transformProbability
+}) => {
+  var _a, _b;
+  if (!chartData) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const venueEntries = selectedVenue ? Object.entries(chartData.venues).filter(([venue]) => venue === selectedVenue) : Object.entries(chartData.venues);
+  if (venueEntries.length === 0) {
+    return {
+      liveCandle: null,
+      lineValue: void 0,
+      live: false
+    };
+  }
+  const singleVenueView = selectedVenue != null || venueEntries.length === 1;
+  const liveCandleEntry = singleVenueView ? venueEntries.find(([, venueData]) => venueData.liveCandle != null) : null;
+  const primaryLineValue = (_b = (_a = venueEntries[0]) == null ? void 0 : _a[1]) == null ? void 0 : _b.lineValue;
+  const lineValue = primaryLineValue != null ? toChartDisplayValue(primaryLineValue, transformProbability) : void 0;
+  return {
+    liveCandle: (liveCandleEntry == null ? void 0 : liveCandleEntry[1].liveCandle) ? marketChartCandleToScaledCandlePoint(liveCandleEntry[1].liveCandle, transformProbability) : null,
+    lineValue,
+    live: liveCandleEntry != null
+  };
+};
 
 // src/events/item-details/index.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -741,31 +817,23 @@ var resolveAverageProbability = (values) => {
     return void 0;
   return validValues.reduce((sum, value) => sum + value, 0) / validValues.length;
 };
-var resolveOutcomeCandidateIds = (market, outcome) => {
-  var _a, _b;
-  const marketWithCanonicalId = market;
-  return [
-    outcome.id,
-    (_a = outcome.externalIdentifier) != null ? _a : void 0,
-    market.externalIdentifier,
-    (_b = marketWithCanonicalId.marketId) != null ? _b : void 0
-  ].filter((value) => typeof value === "string" && value.trim().length > 0);
-};
 var EventListItemDetailsGraphSection = ({
   venueMarkets,
-  canonicalMarketId,
   selectedOutcomeLabel,
   onSelectedOutcomeLabelChange,
   switchLabels,
   isDateOutcomeMarket,
   classNames,
-  showVenueLogo,
   venueInfo,
   formatPercent,
   selectedTimeRange,
-  selectedChartType
+  selectedChartType,
+  selectedOutcome: _selectedOutcome,
+  selectedMarket
 }) => {
+  var _a, _b;
   const labels = useLabels3();
+  const { enableLiveUpdates } = useSdkUiConfig2();
   const [selectedVenue, setSelectedVenue] = useState(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
   const probabilityModeConfigs = useMemo3(() => {
@@ -834,105 +902,71 @@ var EventListItemDetailsGraphSection = ({
       no: buildModeData("no")
     };
   }, [labels, probabilityModeConfigs, selectedOutcomesByMode, venueInfo]);
-  const allOutcomesForHistory = useMemo3(() => {
-    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 = useMemo3(() => {
-    return buildPriceHistoryGroups(allOutcomesForHistory, canonicalMarketId);
-  }, [allOutcomesForHistory, canonicalMarketId]);
   const timeWindow = useMemo3(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
+  const activeOutcomes = selectedOutcomesByMode[activeProbabilityMode];
+  const activeCanonicalMarketId = useMemo3(() => {
+    return resolveCanonicalMarketId(activeOutcomes.map((item) => item.market));
+  }, [activeOutcomes]);
+  const venueMarketIds = useMemo3(() => {
+    return activeOutcomes.map((item) => item.market.id);
+  }, [activeOutcomes]);
   const {
-    data: priceHistoryData,
-    isLoading: isPriceHistoryLoading,
-    error: priceHistoryError,
-    results: priceHistoryResults
-  } = usePriceHistory(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: priceHistoryGroups.length > 0
-  }));
-  const priceHistoryByVenue = useMemo3(() => {
-    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 = useMemo3(() => {
-    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;
-          const open = normalizeProbability(point.open);
-          const high = normalizeProbability(point.high);
-          const low = normalizeProbability(point.low);
-          const close = normalizeProbability(point.close);
-          const transformedPoint = {
-            time: point.timestamp,
-            value: clampProbability(modeConfig.transformProbability(probability)) * 100,
-            open: open == null ? void 0 : clampProbability(modeConfig.transformProbability(open)) * 100,
-            high: high == null ? void 0 : clampProbability(modeConfig.transformProbability(high)) * 100,
-            low: low == null ? void 0 : clampProbability(modeConfig.transformProbability(low)) * 100,
-            close: close == null ? void 0 : clampProbability(modeConfig.transformProbability(close)) * 100
-          };
-          return transformedPoint;
-        }).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]);
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = useMarketChart({
+    marketId: (_a = selectedMarket == null ? void 0 : selectedMarket.id) != null ? _a : null,
+    venueMarketIds,
+    interval: timeRangeToInterval(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: !!(selectedMarket == null ? void 0 : selectedMarket.id),
+    live: enableLiveUpdates
+  });
   const visibleChartSeries = useMemo3(() => {
-    const modeSeries = chartSeriesByMode[activeProbabilityMode];
+    const transformProbability = probabilityModeConfigs[activeProbabilityMode].transformProbability;
+    const colorByVenue = new Map(
+      normalizedVenueDataByMode[activeProbabilityMode].map((venueData) => [
+        venueData.venue,
+        venueData.color
+      ])
+    );
+    const series = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${activeProbabilityMode}-${resolvedVenue}-${activeCanonicalMarketId != null ? activeCanonicalMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points,
+        lineWidth: 2,
+        lineStyle: "solid"
+      };
+    });
     if (!selectedVenue)
-      return modeSeries;
-    return modeSeries.filter((seriesItem) => seriesItem.venue === selectedVenue);
-  }, [activeProbabilityMode, chartSeriesByMode, selectedVenue]);
+      return series;
+    return series.filter((seriesItem) => seriesItem.venue === selectedVenue);
+  }, [
+    activeCanonicalMarketId,
+    activeProbabilityMode,
+    marketChartData,
+    normalizedVenueDataByMode,
+    probabilityModeConfigs,
+    selectedVenue
+  ]);
+  const chartLiveState = useMemo3(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue,
+      transformProbability: probabilityModeConfigs[activeProbabilityMode].transformProbability
+    });
+  }, [activeProbabilityMode, marketChartData, probabilityModeConfigs, selectedVenue]);
   const segmentedDisplayItems = useMemo3(() => {
     return probabilityModeOrder.map((mode) => {
       const averageProbability = resolveAverageProbability(
@@ -970,31 +1004,22 @@ var EventListItemDetailsGraphSection = ({
       return venue;
     });
   };
-  const handleRetryPriceHistory = () => {
-    void Promise.all(priceHistoryResults.map((result) => result.refetch()));
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
-  if (priceHistoryError) {
-    return /* @__PURE__ */ jsx3(
-      "div",
+  if (marketChartError) {
+    return /* @__PURE__ */ jsx3("div", { className: cn("w-full", classNames == null ? void 0 : classNames.chart), children: /* @__PURE__ */ jsx3(
+      StateMessage,
       {
-        className: cn(
-          "w-full rounded-agg-xl border border-agg-separator bg-agg-secondary",
-          classNames == null ? void 0 : classNames.chart
-        ),
-        children: /* @__PURE__ */ jsx3(
-          StateMessage,
-          {
-            ariaLabel: labels.eventItemDetails.chartUnavailableAria,
-            tone: "warning",
-            title: labels.eventItemDetails.chartUnavailableTitle,
-            description: labels.eventItemDetails.chartUnavailableDescription,
-            actionLabel: labels.common.retry,
-            onAction: handleRetryPriceHistory,
-            className: "min-h-[300px] px-5 py-10 md:px-10"
-          }
-        )
+        tone: "warning",
+        ariaLabel: labels.eventItemDetails.chartUnavailableAria,
+        title: labels.eventItemDetails.chartUnavailableTitle,
+        description: labels.eventItemDetails.chartUnavailableDescription,
+        actionLabel: labels.common.retry,
+        onAction: handleRetryMarketChart,
+        className: "min-h-[300px] px-5 py-10 md:px-10"
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsx3(
     LineChart,
@@ -1002,8 +1027,10 @@ var EventListItemDetailsGraphSection = ({
       classNames: { root: classNames == null ? void 0 : classNames.chart },
       series: visibleChartSeries,
       height: 300,
-      isLoading: isPriceHistoryLoading,
+      isLoading: isMarketChartLoading,
       chartType: selectedChartType,
+      liveCandle: selectedChartType === "candlestick" ? (_b = chartLiveState.liveCandle) != null ? _b : void 0 : void 0,
+      lineValue: chartLiveState.lineValue,
       showSeriesControls: activeModeVenueData.length > 0 || segmentedDisplayItems.length > 0,
       renderSeriesControls: () => {
         return /* @__PURE__ */ jsxs2(
@@ -1019,7 +1046,7 @@ var EventListItemDetailsGraphSection = ({
                     classNames == null ? void 0 : classNames.outcomeBadges
                   ),
                   children: activeModeVenueData.map((venueData) => {
-                    var _a;
+                    var _a2;
                     const text = venueData.probability == null ? "-" : formatPercent(venueData.probability);
                     const isActiveVenue = selectedVenue === venueData.venue;
                     return /* @__PURE__ */ jsx3(
@@ -1036,14 +1063,14 @@ var EventListItemDetailsGraphSection = ({
                           {
                             text,
                             size: "large",
-                            prefix: showVenueLogo ? /* @__PURE__ */ jsx3(
+                            prefix: /* @__PURE__ */ jsx3(
                               VenueLogo,
                               {
                                 venue: venueData.venue,
                                 size: "small",
-                                title: (_a = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a.label
+                                title: (_a2 = venueInfo == null ? void 0 : venueInfo[venueData.venue]) == null ? void 0 : _a2.label
                               }
-                            ) : void 0,
+                            ),
                             classNames: {
                               root: cn("h-9 shrink-0 border-2 px-4 text-agg-base leading-agg-6")
                             },
@@ -1084,45 +1111,55 @@ var EventListItemDetailsGraphSection = ({
 };
 var EventListItemDetailsContent = ({
   event,
-  title,
-  image,
-  showVenueLogo = true,
   classNames,
   venueInfo,
   detailsStats,
   ariaLabel,
-  defaultTimeRange
+  defaultTimeRange,
+  onClick
 }) => {
+  var _a;
   const config = useSdkUiConfig2();
   const labels = useLabels3();
   const venueMarkets = useMemo3(() => {
-    var _a;
-    return (_a = event.venueMarkets) != null ? _a : [];
+    var _a2;
+    return (_a2 = event.venueMarkets) != null ? _a2 : [];
   }, [event.venueMarkets]);
+  const [selectedMarket, setSelectedMarket] = useState(venueMarkets[0]);
+  const [selectedOutcome] = useState(
+    (_a = selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes.find(
+      (outcome) => outcome.winner
+    )) != null ? _a : selectedMarket == null ? void 0 : selectedMarket.venueMarketOutcomes[0]
+  );
   const primaryVenueMarket = useMemo3(() => {
     return selectPrimaryVenueMarket(venueMarkets);
   }, [venueMarkets]);
+  const filteredVenueMarkets = useMemo3(() => {
+    if (!selectedMarket)
+      return venueMarkets;
+    return venueMarkets.filter(
+      (vm) => vm.question === (selectedMarket == null ? void 0 : selectedMarket.question)
+    );
+  }, [venueMarkets, selectedMarket]);
   const outcomeLabels = useMemo3(() => {
-    return resolveOutcomeLabels(venueMarkets);
-  }, [venueMarkets]);
+    return resolveOutcomeLabels(filteredVenueMarkets);
+  }, [filteredVenueMarkets]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState(() => {
     return resolveDefaultOutcomeLabel(outcomeLabels);
   });
+  const configTimeRange = config.defaultChartTimeRange;
   const [selectedTimeRange, setSelectedTimeRange] = useState(() => {
-    return getDefaultSelectedTimeRange(defaultTimeRange);
+    return getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange);
   });
   const [selectedChartType, setSelectedChartType] = useState("line");
   useEffect(() => {
-    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange));
-  }, [defaultTimeRange]);
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+    setSelectedTimeRange(getDefaultSelectedTimeRange(defaultTimeRange, configTimeRange));
+  }, [defaultTimeRange, configTimeRange]);
   const isDateOutcomeMarket = outcomeLabels.length > 2 && outcomeLabels.every(isDateLikeLabel);
-  const outcomeSelectorLabels = outcomeLabels;
   const probabilityByLabel = useMemo3(() => {
     return new Map(
       outcomeLabels.map((label) => {
-        const outcomesByVenue = resolveOutcomesByVenue(venueMarkets, label);
+        const outcomesByVenue = resolveOutcomesByVenue(filteredVenueMarkets, label);
         const probabilities = outcomesByVenue.map((item) => normalizeProbability(item.outcome.price)).filter((value) => value != null);
         if (probabilities.length === 0) {
           return [label, void 0];
@@ -1131,13 +1168,13 @@ var EventListItemDetailsContent = ({
         return [label, averageProbability];
       })
     );
-  }, [outcomeLabels, venueMarkets]);
+  }, [outcomeLabels, filteredVenueMarkets]);
   const mainOutcomeLabel = useMemo3(() => {
     if (outcomeLabels.length === 0)
       return void 0;
     return [...outcomeLabels].sort((left, right) => {
-      var _a, _b;
-      const leftProbability = (_a = probabilityByLabel.get(left)) != null ? _a : -1;
+      var _a2, _b;
+      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
       const rightProbability = (_b = probabilityByLabel.get(right)) != null ? _b : -1;
       return rightProbability - leftProbability;
     })[0];
@@ -1154,17 +1191,17 @@ var EventListItemDetailsContent = ({
     setSelectedOutcomeLabel(fallbackOutcomeLabel);
   }, [isDateOutcomeMarket, mainOutcomeLabel, outcomeLabels, selectedOutcomeLabel]);
   const switchLabels = useMemo3(() => {
-    var _a, _b;
+    var _a2, _b;
     if (isDateOutcomeMarket) {
       return [labels.eventItemDetails.yes, labels.eventItemDetails.no];
     }
     const sortedOutcomeLabels = [...outcomeLabels].sort((left, right) => {
-      var _a2, _b2;
-      const leftProbability = (_a2 = probabilityByLabel.get(left)) != null ? _a2 : -1;
+      var _a3, _b2;
+      const leftProbability = (_a3 = probabilityByLabel.get(left)) != null ? _a3 : -1;
       const rightProbability = (_b2 = probabilityByLabel.get(right)) != null ? _b2 : -1;
       return rightProbability - leftProbability;
     });
-    const firstLabel = (_a = sortedOutcomeLabels[0]) != null ? _a : labels.eventItemDetails.yes;
+    const firstLabel = (_a2 = sortedOutcomeLabels[0]) != null ? _a2 : labels.eventItemDetails.yes;
     const secondLabel = (_b = sortedOutcomeLabels.find((label) => label !== firstLabel)) != null ? _b : firstLabel;
     return [firstLabel, secondLabel];
   }, [
@@ -1175,34 +1212,44 @@ var EventListItemDetailsContent = ({
     probabilityByLabel
   ]);
   const volumeLabel = useMemo3(() => {
-    var _a;
-    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+    var _a2;
+    const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a2 = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a2 : void 0;
     if (typeof resolvedVolume !== "number")
       return "";
     return `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume]);
   if (!primaryVenueMarket || !selectedOutcomeLabel) {
-    return /* @__PURE__ */ jsx3(EventListItemDetailsUnavailableState, { classNames, ariaLabel });
+    return /* @__PURE__ */ jsx3(
+      EventListItemDetailsUnavailableState,
+      {
+        classNames,
+        ariaLabel: ariaLabel != null ? ariaLabel : event.title
+      }
+    );
   }
   return /* @__PURE__ */ jsxs2(
     Card,
     {
       className: cn(detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      onClick: () => {
+        onClick == null ? void 0 : onClick(event);
+      },
       children: [
         /* @__PURE__ */ jsxs2(
           "div",
           {
             className: cn(
               "flex flex-row gap-3 md:gap-4",
-              "items-center justify-start",
+              venueMarkets.length > 1 ? "items-start" : "items-center",
+              "justify-start",
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              resolvedImage ? /* @__PURE__ */ jsx3(
+              event.image ? /* @__PURE__ */ jsx3(
                 RemoteImage,
                 {
-                  src: resolvedImage,
+                  src: event.image,
                   alt: "",
                   className: "size-10 rounded-agg-lg object-cover md:size-[60px]"
                 }
@@ -1217,19 +1264,18 @@ var EventListItemDetailsContent = ({
                       "truncate text-wrap wrap-break-word line-clamp-2",
                       classNames == null ? void 0 : classNames.title
                     ),
-                    children: resolvedTitle
+                    children: event.title
                   }
                 ),
-                outcomeSelectorLabels.length > 2 ? /* @__PURE__ */ jsx3(
+                venueMarkets.length > 1 ? /* @__PURE__ */ jsx3(
                   "div",
                   {
                     className: cn(
-                      "flex items-center gap-2 overflow-x-auto pb-1 md:flex-wrap md:overflow-visible md:pb-0",
+                      "flex flex-row flex-nowrap items-center gap-2 overflow-x-auto pb-1 md:pb-0",
                       classNames == null ? void 0 : classNames.headerPills
                     ),
-                    children: outcomeSelectorLabels.map((outcomeSelectorLabel) => {
-                      const isActive = outcomeSelectorLabel === selectedOutcomeLabel;
-                      const displayLabel = isDateLikeLabel(outcomeSelectorLabel) ? formatDateLabel(outcomeSelectorLabel) : outcomeSelectorLabel;
+                    children: venueMarkets.map((venueMarket) => {
+                      const isActive = (selectedMarket == null ? void 0 : selectedMarket.id) === venueMarket.id;
                       return /* @__PURE__ */ jsx3(
                         Button,
                         {
@@ -1241,10 +1287,14 @@ var EventListItemDetailsContent = ({
                             "border-2",
                             isActive ? "border-agg-primary bg-agg-secondary text-agg-foreground font-agg-bold" : "border-transparent bg-agg-secondary-hover text-agg-foreground font-agg-normal"
                           ),
-                          onClick: () => setSelectedOutcomeLabel(outcomeSelectorLabel),
-                          children: displayLabel
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setSelectedMarket(venueMarket);
+                          },
+                          children: venueMarket.question
                         },
-                        outcomeSelectorLabel
+                        venueMarket.id
                       );
                     })
                   }
@@ -1273,14 +1323,14 @@ var EventListItemDetailsContent = ({
         /* @__PURE__ */ jsx3(
           EventListItemDetailsGraphSection,
           {
-            venueMarkets,
-            canonicalMarketId: event.id,
+            selectedOutcome,
+            selectedMarket,
+            venueMarkets: filteredVenueMarkets,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
             isDateOutcomeMarket,
             classNames,
-            showVenueLogo,
             venueInfo,
             formatPercent: config.formatPercent,
             selectedTimeRange,
@@ -1306,7 +1356,11 @@ var EventListItemDetailsContent = ({
                     isActive ? "font-agg-bold! text-agg-foreground!" : "font-agg-normal! text-agg-muted-foreground!"
                   ),
                   "aria-pressed": isActive,
-                  onClick: () => setSelectedTimeRange(timeRange),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setSelectedTimeRange(timeRange);
+                  },
                   children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                 },
                 timeRange
@@ -1324,19 +1378,20 @@ var EventListItemDetailsByEventId = (_a) => {
   } = _b, rest = __objRest(_b, [
     "eventId"
   ]);
+  const resolvedEventId = eventId != null ? eventId : "";
   const {
     event: fetchedEvent,
     error,
     isError,
     isLoading
   } = useVenueEvent2({
-    eventId: eventId != null ? eventId : "",
-    enabled: !!eventId
+    eventId: resolvedEventId,
+    enabled: !!resolvedEventId
   });
   const resolvedEvent = useMemo3(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
-  if (!eventId) {
+  if (!resolvedEventId) {
     return /* @__PURE__ */ jsx3(
       EventListItemDetailsUnavailableState,
       {
@@ -1375,26 +1430,22 @@ var EventListItemDetails = (props) => {
   }
   if ("eventId" in props && typeof props.eventId === "string") {
     const {
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     } = props;
     const byEventIdProps = {
       eventId: props.eventId,
       isLoading: false,
-      title: titleOverride,
-      image: imageOverride,
-      showVenueLogo: showVenueLogoOverride,
       classNames,
       venueInfo,
       detailsStats,
       ariaLabel: ariaLabelOverride,
-      defaultTimeRange: defaultTimeRangeOverride
+      defaultTimeRange: defaultTimeRangeOverride,
+      onClick
     };
     return /* @__PURE__ */ jsx3(EventListItemDetailsByEventId, __spreadValues({}, byEventIdProps));
   }
@@ -1412,10 +1463,11 @@ EventListItemDetails.displayName = "EventListItemDetails";
 import { useEffect as useEffect2, useId, useMemo as useMemo4, useState as useState2 } from "react";
 import {
   useLabels as useLabels4,
-  useOrderBook,
-  usePriceHistory as usePriceHistory2,
+  useMarketChart as useMarketChart2,
+  useMarketOrderbook,
+  useVenueMarkets,
   useSdkUiConfig as useSdkUiConfig3,
-  useVenueEvent as useVenueEvent3
+  timeRangeToInterval as timeRangeToInterval2
 } from "@agg-market/hooks";
 
 // src/events/market-details/market-details.utils.ts
@@ -1447,24 +1499,29 @@ var resolveInitialTab = (defaultTab) => {
     return parsedTab.data;
   return "order-book";
 };
-var resolveMarket = (event, marketId) => {
-  var _a, _b, _c, _d, _e;
-  if (!event.venueMarkets || event.venueMarkets.length === 0)
+var resolveMarketFromVenueMarkets = (venueMarkets, marketId) => {
+  var _a, _b;
+  if (!venueMarkets || venueMarkets.length === 0)
     return void 0;
   if (!marketId) {
+    const primary = selectPrimaryVenueMarket(venueMarkets);
+    const totalVolume2 = venueMarkets.reduce((sum, vm) => {
+      return sum + (typeof vm.volume === "number" ? vm.volume : 0);
+    }, 0);
     return {
-      id: event.id,
-      venueMarkets: event.venueMarkets,
-      volume: event.volume,
-      status: event.status,
-      startDate: event.startDate,
-      endDate: event.endDate,
-      creationDate: event.creationDate,
-      question: event.title
+      id: (_a = primary == null ? void 0 : primary.id) != null ? _a : venueMarkets[0].id,
+      venueMarkets,
+      volume: totalVolume2 || (primary == null ? void 0 : primary.volume),
+      status: primary == null ? void 0 : primary.status,
+      startDate: primary == null ? void 0 : primary.startDate,
+      endDate: primary == null ? void 0 : primary.endDate,
+      creationDate: primary == null ? void 0 : primary.creationDate,
+      question: (_b = primary == null ? void 0 : primary.question) != null ? _b : venueMarkets[0].question
     };
   }
-  const venueMarkets = event.venueMarkets;
-  const matchedVenueMarket = venueMarkets.find((vm) => vm.id === marketId);
+  const matchedVenueMarket = venueMarkets.find(
+    (vm) => vm.id === marketId || vm.externalIdentifier === marketId
+  );
   if (!matchedVenueMarket)
     return void 0;
   const siblingVenueMarkets = venueMarkets.filter(
@@ -1477,11 +1534,11 @@ var resolveMarket = (event, marketId) => {
     id: matchedVenueMarket.id,
     venueMarkets: siblingVenueMarkets,
     volume: totalVolume || matchedVenueMarket.volume,
-    status: (_a = matchedVenueMarket.status) != null ? _a : event.status,
-    startDate: (_b = matchedVenueMarket.startDate) != null ? _b : event.startDate,
-    endDate: (_c = matchedVenueMarket.endDate) != null ? _c : event.endDate,
-    creationDate: (_d = matchedVenueMarket.creationDate) != null ? _d : event.creationDate,
-    question: (_e = matchedVenueMarket.question) != null ? _e : event.title
+    status: matchedVenueMarket.status,
+    startDate: matchedVenueMarket.startDate,
+    endDate: matchedVenueMarket.endDate,
+    creationDate: matchedVenueMarket.creationDate,
+    question: matchedVenueMarket.question
   };
 };
 var resolveDisplayOutcomeLabels = (labels) => {
@@ -1550,7 +1607,8 @@ var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
       label,
       probability: probabilityByLabel.get(label),
       tone: resolveOutcomeTone(label, index),
-      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : "")
+      isDefault: normalizeLabel2(label) === normalizeLabel2((_a = defaultOutcomeLabel != null ? defaultOutcomeLabel : labels[0]) != null ? _a : ""),
+      venue: venueMarkets[0].venue
     };
   });
 };
@@ -1641,23 +1699,23 @@ var resolveOtherTabRows = (market, labels) => {
   return rows;
 };
 var buildMarketDetailsModel = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
   formatCompactCurrency,
   labels
 }) => {
-  var _a;
-  const market = resolveMarket(event, marketId);
+  var _a, _b;
+  const market = resolveMarketFromVenueMarkets(venueMarkets, marketId);
   if (!market)
     return void 0;
   const primaryVenueMarket = selectPrimaryVenueMarket(market.venueMarkets);
   if (!primaryVenueMarket)
     return void 0;
-  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
-  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
-  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_a = primaryVenueMarket.volume) != null ? _a : void 0;
+  const resolvedTitle = (title == null ? void 0 : title.trim()) || primaryVenueMarket.question || market.question;
+  const resolvedImage = (_a = typeof image === "string" && image.trim() ? image : void 0) != null ? _a : typeof primaryVenueMarket.image === "string" && primaryVenueMarket.image.trim() ? primaryVenueMarket.image : void 0;
+  const resolvedVolume = typeof market.volume === "number" ? market.volume : (_b = primaryVenueMarket.volume) != null ? _b : void 0;
   const subtitle = resolveSubtitle({
     venueMarkets: market.venueMarkets,
     volume: resolvedVolume,
@@ -1803,7 +1861,7 @@ var getOutcomeButtonClassName = ({
   );
 };
 var MarketDetailsContent = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
@@ -1811,29 +1869,29 @@ var MarketDetailsContent = ({
   onOpenChange,
   defaultTab,
   defaultOutcomeLabel,
-  defaultTimeRange = "1M",
+  defaultTimeRange,
   orderBookDepth = orderBookRowLimitDefault,
   ariaLabel,
   classNames,
-  otherContent,
-  liveUpdate = false
+  otherContent
 }) => {
+  var _a, _b, _c, _d;
   const config = useSdkUiConfig3();
   const labels = useLabels4();
   const detailsContentId = useId();
   const model = useMemo4(() => {
     return buildMarketDetailsModel({
-      event,
+      venueMarkets,
       marketId,
       title,
       image,
       formatCompactCurrency: config.formatCompactCurrency,
       labels
     });
-  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  }, [config.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
   const resolvedMarket = useMemo4(() => {
-    return resolveMarket(event, marketId);
-  }, [event, marketId]);
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
   const marketDetailsTabs = useMemo4(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
@@ -1844,22 +1902,23 @@ var MarketDetailsContent = ({
   useEffect2(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  const [selectedTimeRange, setSelectedTimeRange] = useState2(defaultTimeRange);
+  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.defaultChartTimeRange) != null ? _a : "1D";
+  const [selectedTimeRange, setSelectedTimeRange] = useState2(resolvedDefaultTimeRange);
   const [selectedChartType, setSelectedChartType] = useState2("line");
   useEffect2(() => {
-    setSelectedTimeRange(defaultTimeRange);
-  }, [defaultTimeRange]);
+    setSelectedTimeRange(resolvedDefaultTimeRange);
+  }, [resolvedDefaultTimeRange]);
   const [selectedOutcomeLabel, setSelectedOutcomeLabel] = useState2(
     () => {
-      var _a;
-      return resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel);
+      var _a2;
+      return resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel);
     }
   );
   const [selectedGraphVenue, setSelectedGraphVenue] = useState2(null);
   useEffect2(() => {
-    var _a;
+    var _a2;
     setSelectedOutcomeLabel(
-      resolveInitialOutcomeLabel((_a = model == null ? void 0 : model.outcomeLabels) != null ? _a : [], defaultOutcomeLabel)
+      resolveInitialOutcomeLabel((_a2 = model == null ? void 0 : model.outcomeLabels) != null ? _a2 : [], defaultOutcomeLabel)
     );
   }, [defaultOutcomeLabel, model == null ? void 0 : model.outcomeLabels]);
   const headerOutcomeItems = useMemo4(() => {
@@ -1886,52 +1945,66 @@ var MarketDetailsContent = ({
     return outcomesByLabelMap;
   }, [headerOutcomeItems, model]);
   const selectedOutcomesByVenue = useMemo4(() => {
-    var _a;
+    var _a2;
     if (!selectedOutcomeLabel)
       return [];
-    return (_a = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    return (_a2 = outcomesByLabel.get(selectedOutcomeLabel)) != null ? _a2 : [];
   }, [outcomesByLabel, selectedOutcomeLabel]);
+  const chartEnabled = isOpened && selectedTab === "graph";
+  const orderBookEnabled = isOpened && selectedTab === "order-book";
   const timeWindow = useMemo4(() => {
     return getTimeWindowByRange(selectedTimeRange);
   }, [selectedTimeRange]);
-  const graphOutcomes = useMemo4(() => {
-    const uniqueOutcomesByVenueAndId = /* @__PURE__ */ new Map();
-    outcomesByLabel.forEach((outcomes) => {
-      outcomes.forEach((outcomeByVenue) => {
-        uniqueOutcomesByVenueAndId.set(
-          `${outcomeByVenue.venue}:${outcomeByVenue.outcome.id}`,
-          outcomeByVenue
-        );
-      });
-    });
-    return [...uniqueOutcomesByVenueAndId.values()];
-  }, [outcomesByLabel]);
-  const canonicalMarketIdForHistory = model == null ? void 0 : model.market.id;
-  const priceHistoryGroups = useMemo4(() => {
-    return buildPriceHistoryGroups(graphOutcomes, canonicalMarketIdForHistory);
-  }, [canonicalMarketIdForHistory, graphOutcomes]);
-  const { data: priceHistoryData, isLoading: isPriceHistoryLoading } = usePriceHistory2(__spreadProps(__spreadValues({
-    groups: priceHistoryGroups
-  }, timeWindow), {
-    enabled: isOpened && selectedTab === "graph" && priceHistoryGroups.length > 0
-  }));
-  const orderBookInputs = useMemo4(() => {
-    return selectedOutcomesByVenue.map(({ market, outcome }) => ({
-      market,
-      outcome,
-      liveUpdate
-    }));
-  }, [selectedOutcomesByVenue, liveUpdate]);
+  const primaryVenueMarketId = (_c = (_b = selectedOutcomesByVenue[0]) == null ? void 0 : _b.market.id) != null ? _c : null;
+  const venueMarketIds = useMemo4(() => {
+    return selectedOutcomesByVenue.map((item) => item.market.id);
+  }, [selectedOutcomesByVenue]);
   const {
-    data: orderBookData,
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = useMarketChart2({
+    marketId: primaryVenueMarketId,
+    venueMarketIds,
+    interval: timeRangeToInterval2(selectedTimeRange),
+    startTs: timeWindow.startTs * 1e3,
+    endTs: timeWindow.endTs * 1e3,
+    enabled: chartEnabled && !!primaryVenueMarketId
+  });
+  const {
+    data: marketOrderbookData,
     isLoading: isOrderBookLoading,
     error: orderBookError,
-    results: orderBookResults
-  } = useOrderBook({
-    orderbooks: orderBookInputs,
-    enabled: isOpened && selectedTab === "order-book" && orderBookInputs.length > 0,
-    canonicalMarketId: liveUpdate ? canonicalMarketIdForHistory : void 0
+    refetch: refetchOrderBook
+  } = useMarketOrderbook({
+    marketId: primaryVenueMarketId,
+    enabled: orderBookEnabled && !!primaryVenueMarketId,
+    venueOutcomes: selectedOutcomesByVenue.map((item) => ({
+      venue: item.market.venue,
+      venueMarketOutcomeId: item.outcome.id
+    }))
   });
+  const orderBookData = useMemo4(() => {
+    if (!marketOrderbookData)
+      return void 0;
+    const results = selectedOutcomesByVenue.flatMap(({ market, outcome }) => {
+      const venueOrderbook = marketOrderbookData.venueOrderbooks[market.venue];
+      if (!venueOrderbook)
+        return [];
+      return [
+        {
+          market,
+          outcome,
+          orderbook: {
+            bids: venueOrderbook.bids,
+            asks: venueOrderbook.asks
+          }
+        }
+      ];
+    });
+    return results.length === selectedOutcomesByVenue.length ? results : void 0;
+  }, [marketOrderbookData, selectedOutcomesByVenue]);
   const askRows = useMemo4(() => {
     return resolveOrderBookRows({
       data: orderBookData,
@@ -1944,78 +2017,43 @@ var MarketDetailsContent = ({
       side: "bids"
     });
   }, [orderBookData]);
-  const priceHistoryByVenue = useMemo4(() => {
-    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 graphSeriesByOutcomeLabel = useMemo4(() => {
-    const seriesByOutcomeLabel = /* @__PURE__ */ new Map();
-    const resolveOutcomeCandidateIds2 = (outcomeByVenue) => {
-      var _a, _b;
-      const marketWithCanonicalId = outcomeByVenue.market;
-      return [
-        outcomeByVenue.outcome.id,
-        (_a = outcomeByVenue.outcome.externalIdentifier) != null ? _a : void 0,
-        outcomeByVenue.market.externalIdentifier,
-        (_b = marketWithCanonicalId.marketId) != null ? _b : void 0,
-        canonicalMarketIdForHistory
-      ].filter((value) => typeof value === "string" && value.trim().length > 0);
-    };
-    headerOutcomeItems.forEach((headerOutcomeItem) => {
-      var _a;
-      const outcomes = (_a = outcomesByLabel.get(headerOutcomeItem.label)) != null ? _a : [];
-      const graphSeries2 = [];
-      outcomes.forEach((outcomeByVenue, index) => {
-        var _a2;
-        const venueHistory = priceHistoryByVenue.get(outcomeByVenue.venue);
-        if (!(venueHistory == null ? void 0 : venueHistory.length))
-          return;
-        const candidateIds = resolveOutcomeCandidateIds2(outcomeByVenue);
-        const matchingHistory = (_a2 = venueHistory.find((historyItem) => candidateIds.includes(historyItem.marketId))) != null ? _a2 : venueHistory.length === 1 ? venueHistory[0] : void 0;
-        if (!matchingHistory)
-          return;
-        const points = matchingHistory.points.map((point) => ({
-          time: point.timestamp,
-          value: point.price * 100,
-          open: point.open == null ? void 0 : point.open * 100,
-          high: point.high == null ? void 0 : point.high * 100,
-          low: point.low == null ? void 0 : point.low * 100,
-          close: point.close == null ? void 0 : point.close * 100
-        })).filter((point) => Number.isFinite(point.time) && Number.isFinite(point.value));
-        if (points.length === 0)
-          return;
-        graphSeries2.push({
-          id: `${headerOutcomeItem.label}-${outcomeByVenue.venue}-${matchingHistory.marketId}`,
-          venue: outcomeByVenue.venue,
-          color: resolveSeriesColor(outcomeByVenue.venue, index),
-          points
-        });
-      });
-      seriesByOutcomeLabel.set(headerOutcomeItem.label, graphSeries2);
-    });
-    return seriesByOutcomeLabel;
-  }, [canonicalMarketIdForHistory, headerOutcomeItems, outcomesByLabel, priceHistoryByVenue]);
   const graphSeries = useMemo4(() => {
-    var _a;
-    if (!selectedOutcomeLabel)
-      return [];
-    const seriesForOutcomeLabel = (_a = graphSeriesByOutcomeLabel.get(selectedOutcomeLabel)) != null ? _a : [];
+    const colorByVenue = new Map(
+      selectedOutcomesByVenue.map((item, index) => [
+        item.venue,
+        resolveSeriesColor(item.venue, index)
+      ])
+    );
+    const seriesForOutcomeLabel = resolveMarketChartVenueSeries({
+      chartData: marketChartData,
+      transformProbability: (value) => value
+    }).map((seriesItem) => {
+      var _a2;
+      const resolvedVenue = seriesItem.venue;
+      return {
+        id: `${selectedOutcomeLabel != null ? selectedOutcomeLabel : "graph"}-${resolvedVenue}-${primaryVenueMarketId != null ? primaryVenueMarketId : "chart"}`,
+        venue: resolvedVenue,
+        color: (_a2 = colorByVenue.get(resolvedVenue)) != null ? _a2 : resolveSeriesColor(resolvedVenue, 0),
+        points: seriesItem.points
+      };
+    });
     if (!selectedGraphVenue)
       return seriesForOutcomeLabel;
     return seriesForOutcomeLabel.filter((seriesItem) => seriesItem.venue === selectedGraphVenue);
-  }, [graphSeriesByOutcomeLabel, selectedGraphVenue, selectedOutcomeLabel]);
+  }, [
+    primaryVenueMarketId,
+    marketChartData,
+    selectedGraphVenue,
+    selectedOutcomeLabel,
+    selectedOutcomesByVenue
+  ]);
+  const graphLiveState = useMemo4(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
   const otherRows = useMemo4(() => {
     if (!model)
       return [];
@@ -2023,9 +2061,10 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const isOrderBookNotFound = orderBookError && typeof orderBookError === "object" && "status" in orderBookError && orderBookError.status === 404;
   const hasOrderBookError = !!orderBookError && !isOrderBookNotFound;
-  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (orderBookInputs.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasNoOrderBook = isOrderBookNotFound || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || askRows.length === 0 && bidRows.length === 0);
+  const hasChartError = !!marketChartError;
   const handleOutcomeKeyDown = (eventToHandle) => {
-    var _a;
+    var _a2;
     if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
@@ -2036,14 +2075,14 @@ var MarketDetailsContent = ({
     });
     const direction = eventToHandle.key === "ArrowRight" ? 1 : -1;
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
-    setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
+    setSelectedOutcomeLabel((_a2 = headerOutcomeItems[nextIndex]) == null ? void 0 : _a2.label);
   };
-  const handleToggleExpanded = (event2) => {
-    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+  const handleToggleExpanded = (event) => {
+    if (event && "key" in event && (event == null ? void 0 : event.key) !== "Enter" && (event == null ? void 0 : event.key) !== " ") {
       return;
     }
-    event2 == null ? void 0 : event2.preventDefault();
-    event2 == null ? void 0 : event2.stopPropagation();
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
     setIsOpened((prev) => {
       const next = !prev;
       onOpenChange == null ? void 0 : onOpenChange(next);
@@ -2058,7 +2097,10 @@ var MarketDetailsContent = ({
     });
   };
   const handleRetryOrderBook = () => {
-    void Promise.all(orderBookResults.map((result) => result.refetch()));
+    void refetchOrderBook();
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
   useEffect2(() => {
     if (!selectedGraphVenue) {
@@ -2101,7 +2143,7 @@ var MarketDetailsContent = ({
             onClick: handleToggleExpanded,
             onKeyDown: handleToggleExpanded,
             children: [
-              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 items-center gap-3 md:gap-4", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex min-w-52 max-w-3/4 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ jsx4(
                   RemoteImage,
                   {
@@ -2148,7 +2190,7 @@ var MarketDetailsContent = ({
                           /* @__PURE__ */ jsx4(
                             VenueLogo,
                             {
-                              venue: isPositive ? "polymarket" : "probable",
+                              venue: "polymarket",
                               size: "small",
                               color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
                             }
@@ -2255,13 +2297,26 @@ var MarketDetailsContent = ({
                         )
                       ] }) }) : null,
                       selectedTab === "graph" ? /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-5", classNames == null ? void 0 : classNames.graph), children: [
-                        /* @__PURE__ */ jsx4(
+                        hasChartError ? /* @__PURE__ */ jsx4(
+                          StateMessage,
+                          {
+                            ariaLabel: labels.marketDetails.chartUnavailableAria,
+                            tone: "warning",
+                            title: labels.marketDetails.chartUnavailableTitle,
+                            description: labels.marketDetails.chartUnavailableDescription,
+                            actionLabel: labels.common.retry,
+                            onAction: handleRetryMarketChart,
+                            className: "min-h-[248px] px-5 py-10 md:min-h-[272px]"
+                          }
+                        ) : /* @__PURE__ */ jsx4(
                           LineChart,
                           {
                             series: graphSeries,
                             height: 260,
-                            isLoading: isPriceHistoryLoading,
+                            isLoading: isMarketChartLoading,
                             chartType: selectedChartType,
+                            liveCandle: selectedChartType === "candlestick" ? (_d = graphLiveState.liveCandle) != null ? _d : void 0 : void 0,
+                            lineValue: graphLiveState.lineValue,
                             classNames: { root: "w-full" },
                             showSeriesControls: selectedOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
                             renderSeriesControls: () => {
@@ -2385,7 +2440,7 @@ var MarketDetailsContent = ({
   );
 };
 var MarketDetails = (props) => {
-  var _a, _b;
+  var _a;
   const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState2(
     (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
   );
@@ -2402,15 +2457,6 @@ var MarketDetails = (props) => {
     }
     (_a2 = props.onOpenChange) == null ? void 0 : _a2.call(props, nextIsOpened);
   };
-  const hasEventProp = "event" in props && !!props.event;
-  const {
-    event: fetchedEvent,
-    error: eventError,
-    isLoading: isFetchingEvent
-  } = useVenueEvent3({
-    eventId: hasEventProp ? "" : (_b = props.eventId) != null ? _b : "",
-    enabled: !props.isLoading && !hasEventProp && !!props.eventId
-  });
   if (props.isLoading) {
     return /* @__PURE__ */ jsx4(
       MarketDetailsLoadingState,
@@ -2421,42 +2467,115 @@ var MarketDetails = (props) => {
       }
     );
   }
-  if ("event" in props && props.event) {
+  if ("venueMarkets" in props && props.venueMarkets) {
     return /* @__PURE__ */ jsx4(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened: resolvedIsOpened,
         onOpenChange: handleOpenChange,
-        event: props.event
+        venueMarkets: props.venueMarkets
       })
     );
   }
-  if (isFetchingEvent) {
-    return /* @__PURE__ */ jsx4(
-      MarketDetailsLoadingState,
+  const { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames } = props;
+  return /* @__PURE__ */ jsx4(MarketDetailsUnavailableState, { ariaLabel: fallbackAriaLabel, classNames: fallbackClassNames });
+};
+MarketDetails.displayName = "MarketDetails";
+var resolveInitialExpandedId = (markets, defaultId) => {
+  var _a, _b;
+  if (!markets.length)
+    return null;
+  if (defaultId) {
+    const match = markets.find((m) => m.id === defaultId);
+    if (match)
+      return match.id;
+  }
+  return (_b = (_a = markets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var MarketDetailsList = ({
+  eventId,
+  expandedMarketId,
+  defaultExpandedMarketId,
+  onExpandedMarketChange,
+  defaultTab,
+  defaultTimeRange,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels4();
+  const resolvedEventId = eventId || "";
+  const { markets, isLoading, error } = useVenueMarkets({
+    venueEventId: resolvedEventId,
+    enabled: !!resolvedEventId
+  });
+  const [internalExpandedId, setInternalExpandedId] = useState2(
+    () => resolveInitialExpandedId(markets, defaultExpandedMarketId)
+  );
+  useEffect2(() => {
+    if (typeof expandedMarketId !== "undefined")
+      return;
+    setInternalExpandedId((current) => {
+      if (current && markets.some((m) => m.id === current))
+        return current;
+      return resolveInitialExpandedId(markets, defaultExpandedMarketId);
+    });
+  }, [defaultExpandedMarketId, expandedMarketId, markets]);
+  useEffect2(() => {
+    if (typeof expandedMarketId === "undefined")
+      return;
+    setInternalExpandedId(expandedMarketId);
+  }, [expandedMarketId]);
+  const resolvedExpandedId = typeof expandedMarketId === "undefined" ? internalExpandedId : expandedMarketId;
+  const handleToggle = (marketId, isOpened) => {
+    const next = isOpened ? marketId : null;
+    if (typeof expandedMarketId === "undefined") {
+      setInternalExpandedId(next);
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(next);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsx4(MarketDetailsLoadingState, { isOpened: true, classNames: { root: classNames == null ? void 0 : classNames.item } }),
+      /* @__PURE__ */ jsx4(MarketDetailsLoadingState, { isOpened: false, classNames: { root: classNames == null ? void 0 : classNames.item } })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx4(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx4(
+      StateMessage,
       {
-        isOpened: resolvedIsOpened,
-        ariaLabel: props.ariaLabel,
-        classNames: props.classNames
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+        title: labels.marketDetails.unavailableTitle,
+        description: labels.marketDetails.unavailableDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
       }
-    );
+    ) });
   }
-  if (!fetchedEvent) {
-    if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ jsx4(MarketDetailsNotFoundState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
-    }
-    return /* @__PURE__ */ jsx4(MarketDetailsUnavailableState, { ariaLabel: props.ariaLabel, classNames: props.classNames });
+  if (markets.length === 0) {
+    return /* @__PURE__ */ jsx4(Card, { className: cn(marketDetailsBaseCardClassName, "p-0", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx4(
+      StateMessage,
+      {
+        ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.notFoundAria,
+        title: labels.marketDetails.notFoundTitle,
+        description: labels.marketDetails.notFoundDescription,
+        className: "min-h-[280px] md:min-h-[320px]"
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx4(
-    MarketDetailsContent,
-    __spreadProps(__spreadValues({}, props), {
-      isOpened: resolvedIsOpened,
-      onOpenChange: handleOpenChange,
-      event: fetchedEvent
-    })
-  );
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel, children: markets.map((market) => /* @__PURE__ */ jsx4(
+    MarketDetails,
+    {
+      venueMarkets: [market],
+      isOpened: resolvedExpandedId === market.id,
+      onOpenChange: (nextIsOpened) => handleToggle(market.id, nextIsOpened),
+      defaultTab,
+      defaultTimeRange,
+      ariaLabel: market.question,
+      classNames: { root: classNames == null ? void 0 : classNames.item }
+    },
+    market.id
+  )) });
 };
-MarketDetails.displayName = "MarketDetails";
+MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
 import { useCallback, useEffect as useEffect3, useMemo as useMemo5, useRef, useState as useState3 } from "react";
@@ -2555,11 +2674,11 @@ var estimateTabsWidth = (items) => {
 var EventList = ({
   title,
   maxItemsPerRow = 3,
-  limit = 3,
+  limit = 9,
   maxVisibleItems,
-  showVenueLogo = true,
   search,
-  categoryIds
+  categoryIds,
+  onClick
 }) => {
   var _a, _b;
   const labels = useLabels5();
@@ -2714,10 +2833,10 @@ var EventList = ({
         EventListItem,
         {
           event,
-          showVenueLogo,
           classNames: {
             root: "w-full min-w-0 max-w-none"
-          }
+          },
+          onClick
         },
         event.id
       )),
@@ -2759,5 +2878,6 @@ export {
   EventListItem,
   EventListItemDetails,
   MarketDetails,
+  MarketDetailsList,
   EventList
 };