@agg-market/ui 9.0.0 → 11.0.0

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

@@ -20,14 +20,24 @@ import {
   detailsBaseCardClassName,
   eventListItemDetailsTimeRanges,
   fallbackLineColors,
+  formatCountLabel,
   getMarketDetailsTabs,
   getMotionClassName,
+  getVenueSummary,
   lineColorByVenue,
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
+  normalizeProbability,
   orderBookRowLimitDefault,
-  toDate
-} from "./chunk-3G7C6WEC.mjs";
+  resolveEventListItemEvent,
+  resolveOutcomeTitle,
+  resolveTileImage,
+  resolveTileTitle,
+  resolveVenueLabel,
+  resolveVisibleOutcomes,
+  selectPrimaryVenueMarket,
+  sortOutcomes
+} from "./chunk-IUJXJEDQ.mjs";
 
 // src/events/item/index.tsx
 import dayjs from "dayjs";
@@ -49,142 +59,6 @@ var isErrorWithStatus = (error, status) => {
   return getErrorStatus(error) === status;
 };
 
-// src/events/item/event-list-item.utils.ts
-var resolveEventListItemEvent = (fetchedEvent) => {
-  if (!fetchedEvent)
-    return void 0;
-  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0)
-    return void 0;
-  return fetchedEvent;
-};
-var normalizeProbability = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value))
-    return void 0;
-  if (value < 0)
-    return 0;
-  if (value > 1)
-    return 1;
-  return value;
-};
-var hasDateLabel = (outcome) => {
-  return !!toDate(outcome.label);
-};
-var sortOutcomes = (outcomes) => {
-  if (outcomes.length <= 1)
-    return outcomes;
-  const now = Date.now();
-  if (outcomes.some(hasDateLabel)) {
-    return [...outcomes].sort((a, b) => {
-      var _a, _b, _c, _d;
-      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
-      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
-      return Math.abs(aDate - now) - Math.abs(bDate - now);
-    });
-  }
-  return [...outcomes].sort((a, b) => {
-    var _a, _b;
-    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
-    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
-    return bPrice - aPrice;
-  });
-};
-var compareVisibleOutcomeRows = (left, right) => {
-  var _a, _b;
-  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
-  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
-  if (leftDate && rightDate) {
-    return leftDate.getTime() - rightDate.getTime();
-  }
-  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
-  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
-  return rightProbability - leftProbability;
-};
-var shouldReplaceVisibleOutcome = (current, next) => {
-  var _a, _b;
-  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
-  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
-  if (currentVolume !== nextVolume) {
-    return nextVolume > currentVolume;
-  }
-  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
-  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
-  return nextProbability > currentProbability;
-};
-var resolveVisibleOutcomes = (venueMarkets, maxOutcomes) => {
-  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
-  venueMarkets.forEach((market) => {
-    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
-      const title = resolveOutcomeTitle(outcome);
-      const normalizedTitle = title.trim().toLowerCase();
-      const nextVisibleOutcome = {
-        venue: market.venue,
-        market,
-        outcome,
-        title
-      };
-      const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
-      if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
-        visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
-      }
-    });
-  });
-  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, maxOutcomes));
-};
-var resolveOutcomeTitle = (outcome) => {
-  if (outcome.title && outcome.title.trim())
-    return outcome.title;
-  return outcome.label;
-};
-var selectPrimaryVenueMarket = (venueMarkets) => {
-  if (venueMarkets.length === 0)
-    return void 0;
-  if (venueMarkets.length === 1)
-    return venueMarkets[0];
-  return [...venueMarkets].sort((a, b) => {
-    const aVolume = typeof a.volume === "number" ? a.volume : -1;
-    const bVolume = typeof b.volume === "number" ? b.volume : -1;
-    return bVolume - aVolume;
-  })[0];
-};
-var resolveTileTitle = (event, primaryVenueMarket, titleOverride) => {
-  if (typeof titleOverride === "string" && titleOverride.trim()) {
-    return titleOverride;
-  }
-  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.question) === "string" && primaryVenueMarket.question.trim()) {
-    return primaryVenueMarket.question;
-  }
-  return event.title;
-};
-var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
-  if (typeof imageOverride === "string" && imageOverride.trim()) {
-    return imageOverride;
-  }
-  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
-    return primaryVenueMarket.image;
-  }
-  if (typeof event.image === "string" && event.image.trim()) {
-    return event.image;
-  }
-  return void 0;
-};
-var formatCountLabel = (count, singular, plural) => {
-  return `${count} ${count === 1 ? singular : plural}`;
-};
-var getVenueSummary = (venueMarkets) => {
-  const uniqueVenues = Array.from(new Set(venueMarkets.map((market) => market.venue)));
-  return {
-    marketCount: venueMarkets.length,
-    venueCount: uniqueVenues.length,
-    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
-  };
-};
-var resolveVenueLabel = (venue, venueInfo, labels) => {
-  var _a, _b;
-  if (!venue)
-    return labels.eventItem.venueSingular;
-  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
-};
-
 // src/events/item/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var EventListItemLoadingState = ({
@@ -238,7 +112,6 @@ var EventListItemContent = ({
   event,
   title,
   image,
-  showVenueLogo = true,
   maxOutcomes = 2,
   classNames,
   venueInfo,
@@ -268,22 +141,22 @@ var EventListItemContent = ({
     return Array.from(new Set(allVenueMarkets.map((market) => market.venue))).slice(0, 4);
   }, [allVenueMarkets]);
   const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
-  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
+  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
   const handleKeyDown = (eventToHandle) => {
     if (!onClick)
       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) => {
     if (value == null)
       return null;
-    if (Math.abs(value) < config.arbitrageThreshold)
+    if (Math.abs(value) < config.market.arbitrageThreshold)
       return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", "text-agg-success"), children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "label-strong", className: "text-agg-success", children: config.formatting.formatPercent(value) }),
       /* @__PURE__ */ jsx(
         Icon,
         {
@@ -301,7 +174,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: [
@@ -354,8 +227,8 @@ var EventListItemContent = ({
                   showBadge ? /* @__PURE__ */ jsx(
                     Badge,
                     {
-                      text: config.formatPercent(probability),
-                      prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }) : void 0,
+                      text: config.formatting.formatPercent(probability),
+                      prefix: /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "small" }),
                       size: "large",
                       classNames: {
                         root: cn(
@@ -388,7 +261,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 +269,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 +344,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 +413,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 +444,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 +528,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 +535,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 +691,25 @@ 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 {
+    features: { enableLiveUpdates }
+  } = useSdkUiConfig2();
   const [selectedVenue, setSelectedVenue] = useState(null);
   const [activeProbabilityMode, setActiveProbabilityMode] = useState("yes");
   const probabilityModeConfigs = useMemo3(() => {
@@ -834,105 +778,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 +880,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 +903,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 +922,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 +939,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 +987,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.chart.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 +1044,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 +1067,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 +1088,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}`;
+    return `${config.formatting.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 +1140,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 +1163,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,16 +1199,16 @@ var EventListItemDetailsContent = ({
         /* @__PURE__ */ jsx3(
           EventListItemDetailsGraphSection,
           {
-            venueMarkets,
-            canonicalMarketId: event.id,
+            selectedOutcome,
+            selectedMarket,
+            venueMarkets: filteredVenueMarkets,
             selectedOutcomeLabel,
             onSelectedOutcomeLabelChange: setSelectedOutcomeLabel,
             switchLabels,
             isDateOutcomeMarket,
             classNames,
-            showVenueLogo,
             venueInfo,
-            formatPercent: config.formatPercent,
+            formatPercent: config.formatting.formatPercent,
             selectedTimeRange,
             selectedChartType
           }
@@ -1306,7 +1232,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 +1254,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 +1306,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 +1339,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 +1375,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 +1410,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) => {
@@ -1491,6 +1424,21 @@ var resolveDisplayOutcomeLabels = (labels) => {
     (label) => labels.some((value) => normalizeLabel2(value) === normalizeLabel2(label))
   );
 };
+var resolveMarketDetailsOutcomeLabels = (venueMarkets) => {
+  var _a;
+  const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
+  const initialLabels = ((_a = primaryMarket == null ? void 0 : primaryMarket.venueMarketOutcomes) != null ? _a : []).map((outcome) => outcome.label.trim()).filter(Boolean);
+  const labels = new Set(initialLabels);
+  venueMarkets.forEach((market) => {
+    sortOutcomes(market.venueMarketOutcomes).forEach((outcome) => {
+      const label = outcome.label.trim();
+      if (!label)
+        return;
+      labels.add(label);
+    });
+  });
+  return [...labels];
+};
 var resolveInitialOutcomeLabel = (labels, defaultOutcomeLabel) => {
   var _a;
   if (labels.length === 0)
@@ -1542,7 +1490,7 @@ var resolveOutcomeTone = (label, index) => {
   return index === 0 ? "positive" : "negative";
 };
 var resolveHeaderOutcomeItems = (venueMarkets, defaultOutcomeLabel) => {
-  const labels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(venueMarkets));
+  const labels = resolveDisplayOutcomeLabels(resolveMarketDetailsOutcomeLabels(venueMarkets));
   const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
   return labels.slice(0, 2).map((label, index) => {
     var _a;
@@ -1550,7 +1498,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,30 +1590,32 @@ 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,
     formatCompactCurrency,
     labels
   });
-  const outcomeLabels = resolveDisplayOutcomeLabels(resolveOutcomeLabels(market.venueMarkets));
+  const outcomeLabels = resolveDisplayOutcomeLabels(
+    resolveMarketDetailsOutcomeLabels(market.venueMarkets)
+  );
   const probabilityByLabel = resolveAverageProbabilityByLabel(market.venueMarkets, outcomeLabels);
   return {
     market,
@@ -1794,7 +1745,7 @@ var getOutcomeButtonClassName = ({
   const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
   const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
   return cn(
-    "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
+    "h-auto flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
     getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
     isActive ? activeStateClassName : defaultStateClassName,
     "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",
@@ -1803,63 +1754,67 @@ var getOutcomeButtonClassName = ({
   );
 };
 var MarketDetailsContent = ({
-  event,
+  venueMarkets,
   marketId,
   title,
   image,
-  isOpened: defaultIsOpened = marketDetailsDefaultIsOpened,
+  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
   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,
+      formatCompactCurrency: config.formatting.formatCompactCurrency,
       labels
     });
-  }, [config.formatCompactCurrency, event, image, labels, marketId, title]);
+  }, [config.formatting.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]);
   const [selectedTab, setSelectedTab] = useState2(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = useState2(defaultIsOpened);
+  const [isOpened, setIsOpened] = useState2(controlledIsOpened);
   useEffect2(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  const [selectedTimeRange, setSelectedTimeRange] = useState2(defaultTimeRange);
+  useEffect2(() => {
+    setIsOpened(controlledIsOpened);
+  }, [controlledIsOpened]);
+  const resolvedDefaultTimeRange = (_a = defaultTimeRange != null ? defaultTimeRange : config.chart.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 +1841,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: 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: orderBookData,
+    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 +1913,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 +1957,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,19 +1971,17 @@ 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 (!marketId)
+      return;
+    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();
-    setIsOpened((prev) => {
-      const next = !prev;
-      onOpenChange == null ? void 0 : onOpenChange(next);
-      return next;
-    });
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
+    onOpenChange == null ? void 0 : onOpenChange(marketId);
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -2058,7 +1991,10 @@ var MarketDetailsContent = ({
     });
   };
   const handleRetryOrderBook = () => {
-    void Promise.all(orderBookResults.map((result) => result.refetch()));
+    void refetchOrderBook();
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
   };
   useEffect2(() => {
     if (!selectedGraphVenue) {
@@ -2089,7 +2025,7 @@ var MarketDetailsContent = ({
           {
             className: cn(
               "cursor-pointer disabled:cursor-default",
-              "flex flex-wrap flex-row items-center justify-between gap-3 px-5 py-4",
+              "flex flex-nowrap flex-row items-center justify-between gap-3 px-5 py-4",
               isOpened && "pb-3",
               classNames == null ? void 0 : classNames.header
             ),
@@ -2101,7 +2037,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-0 flex-1 items-center gap-3 md:gap-4", children: [
                 model.image ? /* @__PURE__ */ jsx4(
                   RemoteImage,
                   {
@@ -2115,62 +2051,64 @@ var MarketDetailsContent = ({
                   /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx4(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx4(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
-              /* @__PURE__ */ jsx4(
-                "div",
-                {
-                  className: "flex gap-2",
-                  role: "tablist",
-                  "aria-label": labels.marketDetails.marketOutcomesAria,
-                  tabIndex: 0,
-                  onKeyDown: (e) => handleOutcomeKeyDown(e),
-                  children: headerOutcomeItems.map((item) => {
-                    const isPositive = item.tone === "positive";
-                    const isActiveOutcome = item.label === selectedOutcomeLabel;
-                    return /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        role: "tab",
-                        "aria-selected": isActiveOutcome,
-                        tabIndex: isActiveOutcome ? 0 : -1,
-                        className: getOutcomeButtonClassName({
-                          enableAnimations: config.enableAnimations,
-                          isPositive,
-                          isActive: isActiveOutcome
-                        }),
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setSelectedOutcomeLabel(item.label);
+              /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx4(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: "flex shrink-0 gap-2",
+                    role: "tablist",
+                    "aria-label": labels.marketDetails.marketOutcomesAria,
+                    tabIndex: 0,
+                    onKeyDown: (e) => handleOutcomeKeyDown(e),
+                    children: headerOutcomeItems.map((item) => {
+                      const isPositive = item.tone === "positive";
+                      const isActiveOutcome = item.label === selectedOutcomeLabel;
+                      return /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          type: "button",
+                          role: "tab",
+                          "aria-selected": isActiveOutcome,
+                          tabIndex: isActiveOutcome ? 0 : -1,
+                          className: getOutcomeButtonClassName({
+                            enableAnimations: config.features.enableAnimations,
+                            isPositive,
+                            isActive: isActiveOutcome
+                          }),
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setSelectedOutcomeLabel(item.label);
+                          },
+                          children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx4(
+                              VenueLogo,
+                              {
+                                venue: item.venue,
+                                size: "small",
+                                color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                              }
+                            ),
+                            /* @__PURE__ */ jsx4(
+                              Typography,
+                              {
+                                variant: isActiveOutcome ? "body-strong" : "body",
+                                className: cn(
+                                  "text-agg-base leading-agg-6",
+                                  isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                                ),
+                                children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                              }
+                            )
+                          ] })
                         },
-                        children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
-                          /* @__PURE__ */ jsx4(
-                            VenueLogo,
-                            {
-                              venue: isPositive ? "polymarket" : "probable",
-                              size: "small",
-                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
-                            }
-                          ),
-                          /* @__PURE__ */ jsx4(
-                            Typography,
-                            {
-                              variant: isActiveOutcome ? "body-strong" : "body",
-                              className: cn(
-                                "text-agg-base leading-agg-6",
-                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
-                              ),
-                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
-                            }
-                          )
-                        ] })
-                      },
-                      item.label
-                    );
-                  })
-                }
-              )
+                        item.label
+                      );
+                    })
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -2180,7 +2118,10 @@ var MarketDetailsContent = ({
             id: detailsContentId,
             className: cn(
               "grid overflow-hidden",
-              getMotionClassName(config.enableAnimations, "transition-all duration-500 ease-in-out"),
+              getMotionClassName(
+                config.features.enableAnimations,
+                "transition-all duration-500 ease-in-out"
+              ),
               isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
             ),
             "aria-hidden": !isOpened,
@@ -2191,12 +2132,12 @@ var MarketDetailsContent = ({
                 {
                   className: cn(
                     getMotionClassName(
-                      config.enableAnimations,
+                      config.features.enableAnimations,
                       "transition-all duration-500 ease-in-out"
                     ),
                     isOpened ? cn(
                       "translate-y-0 opacity-100",
-                      getMotionClassName(config.enableAnimations, "delay-100")
+                      getMotionClassName(config.features.enableAnimations, "delay-100")
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
@@ -2238,8 +2179,8 @@ var MarketDetailsContent = ({
                           {
                             rows: askRows,
                             title: labels.marketDetails.asks,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         ),
@@ -2248,20 +2189,33 @@ var MarketDetailsContent = ({
                           {
                             rows: bidRows,
                             title: labels.marketDetails.bids,
-                            formatNumber: config.formatNumber,
-                            formatCurrency: config.formatCurrency,
+                            formatNumber: config.formatting.formatNumber,
+                            formatCurrency: config.formatting.formatCurrency,
                             visibleRows: orderBookDepth
                           }
                         )
                       ] }) }) : 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: () => {
@@ -2319,7 +2273,7 @@ var MarketDetailsContent = ({
                               classNames == null ? void 0 : classNames.footer
                             ),
                             children: [
-                              /* @__PURE__ */ jsx4("span", { children: typeof model.market.volume === "number" ? `${config.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
+                              /* @__PURE__ */ jsx4("span", { children: typeof model.market.volume === "number" ? `${config.formatting.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : labels.marketDetails.volumeUnavailable }),
                               /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
                                 /* @__PURE__ */ jsx4(
                                   ChartTypeSwitch,
@@ -2384,79 +2338,117 @@ var MarketDetailsContent = ({
     }
   );
 };
-var MarketDetails = (props) => {
-  var _a, _b;
-  const [uncontrolledIsOpened, setUncontrolledIsOpened] = useState2(
-    (_a = props.defaultIsOpened) != null ? _a : marketDetailsDefaultIsOpened
-  );
-  useEffect2(() => {
-    if (typeof props.isOpened !== "boolean")
-      return;
-    setUncontrolledIsOpened(props.isOpened);
-  }, [props.isOpened]);
-  const resolvedIsOpened = typeof props.isOpened === "boolean" ? props.isOpened : uncontrolledIsOpened;
-  const handleOpenChange = (nextIsOpened) => {
-    var _a2;
-    if (typeof props.isOpened !== "boolean") {
-      setUncontrolledIsOpened(nextIsOpened);
-    }
-    (_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
-  });
+var MarketDetails = (_a) => {
+  var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
   if (props.isLoading) {
     return /* @__PURE__ */ jsx4(
       MarketDetailsLoadingState,
       {
-        isOpened: resolvedIsOpened,
+        isOpened,
         ariaLabel: props.ariaLabel,
         classNames: props.classNames
       }
     );
   }
-  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
+        isOpened,
+        onOpenChange: props.onOpenChange,
+        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) => {
+  var _a, _b;
+  if (!markets.length)
+    return null;
+  return (_b = (_a = markets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var MarketDetailsList = ({
+  eventId,
+  onExpandedMarketChange,
+  defaultTab,
+  defaultTimeRange,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels4();
+  const resolvedEventId = eventId || "";
+  const { markets, isLoading, error } = useVenueMarkets({
+    venueEventId: resolvedEventId,
+    enabled: !!resolvedEventId
+  });
+  const [expandedMarketId, setExpandedMarketId] = useState2(
+    () => resolveInitialExpandedId(markets)
+  );
+  useEffect2(() => {
+    setExpandedMarketId((current) => {
+      if (current && markets.some((m) => m.id === current))
+        return current;
+      return resolveInitialExpandedId(markets);
+    });
+  }, [markets]);
+  const handleToggle = (marketId) => {
+    if (marketId === expandedMarketId) {
+      onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(null);
+      setExpandedMarketId(null);
+      return;
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
+    setExpandedMarketId(marketId);
+  };
+  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,
+    {
+      marketId: market.id,
+      venueMarkets: [market],
+      isOpened: expandedMarketId === market.id,
+      onOpenChange: (marketId) => {
+        handleToggle(marketId);
+      },
+      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";
@@ -2465,8 +2457,12 @@ import { useVenueEvents, useLabels as useLabels5 } from "@agg-market/hooks";
 // src/events/list/event-list.constants.ts
 var POLYMARKET_VENUE = "polymarket";
 var KALSHI_VENUE = "kalshi";
+var OPINION_VENUE = "opinion";
+var PROBABLE_VENUE = "probable";
 var POLYMARKET_VENUE_LOGO = "polymarket";
 var KALSHI_VENUE_LOGO = "kalshi";
+var OPINION_VENUE_LOGO = "opinion";
+var PROBABLE_VENUE_LOGO = "probable";
 var getDefaultEventListTabs = (labels) => {
   return [
     {
@@ -2485,6 +2481,18 @@ var getDefaultEventListTabs = (labels) => {
       label: labels.venues.kalshi,
       venueLogo: KALSHI_VENUE_LOGO,
       venues: [KALSHI_VENUE]
+    },
+    {
+      value: "opinion",
+      label: labels.venues.opinion,
+      venueLogo: OPINION_VENUE_LOGO,
+      venues: [OPINION_VENUE]
+    },
+    {
+      value: "probable",
+      label: labels.venues.probable,
+      venueLogo: PROBABLE_VENUE_LOGO,
+      venues: [PROBABLE_VENUE]
     }
   ];
 };
@@ -2503,7 +2511,7 @@ var resolveTabVenus = (tab) => {
     return void 0;
   if (tab.venues && tab.venues.length > 0)
     return tab.venues;
-  if (tab.value === "polymarket" || tab.value === "kalshi") {
+  if (tab.value === "polymarket" || tab.value === "kalshi" || tab.value === "opinion" || tab.value === "probable") {
     return [tab.value];
   }
   return void 0;
@@ -2555,11 +2563,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();
@@ -2584,6 +2592,7 @@ var EventList = ({
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
   const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useVenueEvents({
+    queryKeyScope: "event-list",
     venues,
     search,
     categoryIds,
@@ -2714,10 +2723,10 @@ var EventList = ({
         EventListItem,
         {
           event,
-          showVenueLogo,
           classNames: {
             root: "w-full min-w-0 max-w-none"
-          }
+          },
+          onClick
         },
         event.id
       )),
@@ -2731,13 +2740,12 @@ var EventList = ({
         },
         `loading-${index}`
       )),
-      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx5(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx5(
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx5(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none p-0! border-none! bg-transparent!", children: /* @__PURE__ */ jsx5(
         StateMessage,
         {
           ariaLabel: labels.eventList.emptyAria,
           title: labels.eventList.emptyTitle,
-          description: labels.eventList.emptyDescription,
-          className: "min-h-[320px]"
+          description: labels.eventList.emptyDescription
         }
       ) }) : null,
       isError ? /* @__PURE__ */ jsx5(
@@ -2759,5 +2767,8 @@ export {
   EventListItem,
   EventListItemDetails,
   MarketDetails,
+  MarketDetailsList,
+  getDefaultEventListTabs,
+  resolveTabVenus,
   EventList
 };