@agg-build/ui 2.1.1 → 2.1.3

package/dist/events.js

@@ -74,6 +74,7 @@ __export(events_exports, {
   formatProbabilityCents: () => formatProbabilityCents,
   mergeVenueOutcomeOrderbooks: () => mergeVenueOutcomeOrderbooks,
   orderbookRowLimitDefault: () => orderbookRowLimitDefault,
+  resolveEventDetailsSyncKey: () => resolveEventDetailsSyncKey,
   resolveOrderBookRows: () => resolveOrderBookRows,
   resolveUnifiedOrderBookEntries: () => resolveUnifiedOrderBookEntries,
   useCenterOrderbookSpread: () => useCenterOrderbookSpread
@@ -5491,6 +5492,62 @@ var VenueLogo = ({
 };
 VenueLogo.displayName = "VenueLogo";
 
+// src/events/shared/format-sports-event-time.ts
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_timezone = __toESM(require("dayjs/plugin/timezone"));
+var import_utc = __toESM(require("dayjs/plugin/utc"));
+import_dayjs2.default.extend(import_utc.default);
+import_dayjs2.default.extend(import_timezone.default);
+var SPORTS_EVENT_TIMEZONE = "America/New_York";
+var SPORTS_EVENT_TIME_FORMAT = "MMM D, h:mm A";
+var formatSportsEventTimeEt = (value) => {
+  const resolvedValue = value.trim();
+  if (!resolvedValue) return null;
+  const parsedValue = import_dayjs2.default.utc(resolvedValue);
+  if (!parsedValue.isValid()) return null;
+  return `${parsedValue.tz(SPORTS_EVENT_TIMEZONE).format(SPORTS_EVENT_TIME_FORMAT)} ET`;
+};
+
+// src/events/shared/format-event-title.ts
+var SPORT_CATEGORY_TOKENS = /* @__PURE__ */ new Set(["sport", "sports"]);
+var normalizeCategoryToken = (value) => {
+  if (typeof value !== "string") return null;
+  const normalizedValue = value.trim().toLowerCase();
+  if (!normalizedValue) return null;
+  return normalizedValue;
+};
+var isSportCategoryToken = (value) => {
+  const normalizedValue = normalizeCategoryToken(value);
+  if (!normalizedValue) return false;
+  return SPORT_CATEGORY_TOKENS.has(normalizedValue);
+};
+var isSportEvent = (categories, structureType) => {
+  var _a;
+  if (isSportCategoryToken(structureType)) return true;
+  return (_a = categories == null ? void 0 : categories.some((categoryEntry) => {
+    var _a2, _b, _c, _d;
+    return isSportCategoryToken(categoryEntry.id) || isSportCategoryToken((_a2 = categoryEntry.category) == null ? void 0 : _a2.id) || isSportCategoryToken((_b = categoryEntry.category) == null ? void 0 : _b.name) || isSportCategoryToken((_c = categoryEntry.category) == null ? void 0 : _c.displayName) || isSportCategoryToken((_d = categoryEntry.category) == null ? void 0 : _d.parentId);
+  })) != null ? _a : false;
+};
+var formatEventTitleWithDateSuffix = ({
+  title: title2,
+  categories,
+  structureType,
+  gameStartTime,
+  endDate
+}) => {
+  const resolvedTitle = title2.trim();
+  if (!resolvedTitle) return resolvedTitle;
+  if (!isSportEvent(categories, structureType)) return resolvedTitle;
+  const dateSource = gameStartTime != null ? gameStartTime : endDate;
+  if (!dateSource) return resolvedTitle;
+  const formattedDate = formatSportsEventTimeEt(dateSource);
+  if (!formattedDate) return resolvedTitle;
+  const suffix = ` - ${formattedDate}`;
+  if (resolvedTitle.endsWith(suffix)) return resolvedTitle;
+  return `${resolvedTitle}${suffix}`;
+};
+
 // src/events/item/event-list-item.utils.ts
 var import_hooks25 = require("@agg-build/hooks");
 
@@ -5709,18 +5766,9 @@ var selectPrimaryVenueMarket = (venueMarkets) => {
     return bVolume - aVolume;
   })[0];
 };
-var getVenueSummary = (venueMarkets, options) => {
+var getVenueSummary = (venueMarkets) => {
   const normalizedVenueMarkets = normalizeVenueMarketCluster(venueMarkets);
-  const tradableVenues = options == null ? void 0 : options.tradableVenues;
-  const isVenueTradable = (venue) => {
-    if (tradableVenues == null) return true;
-    return tradableVenues.has(venue);
-  };
-  const uniqueVenues = Array.from(
-    new Set(
-      normalizedVenueMarkets.filter((market) => isVenueTradable(market.venue)).map((market) => market.venue)
-    )
-  );
+  const uniqueVenues = Array.from(new Set(normalizedVenueMarkets.map((market) => market.venue)));
   return {
     marketCount: normalizedVenueMarkets.length,
     venueCount: uniqueVenues.length,
@@ -6147,7 +6195,7 @@ var Select = ({
             disabled: item.disabled,
             className: cn(
               "agg-select-item",
-              "relative flex w-full items-center gap-3 rounded-[6px] px-5 py-3 text-left text-agg-sm leading-agg-5 outline-none",
+              "relative flex w-full items-center gap-3 rounded-[6px] pl-3 pr-5 py-3 text-left text-agg-sm leading-agg-5 outline-none",
               "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
               isSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
               item.disabled && "cursor-not-allowed opacity-60",
@@ -6332,13 +6380,20 @@ var resolveStateMessageHasAction = ({ onAction }) => {
 
 // src/primitives/state-message/index.tsx
 var import_jsx_runtime116 = require("react/jsx-runtime");
-var StateMessage = ({
-  icon,
-  title: title2,
-  description,
-  onAction,
-  classNames
-}) => {
+var StateMessage = (_a) => {
+  var _b = _a, {
+    icon,
+    title: title2,
+    description,
+    onAction,
+    classNames
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "title",
+    "description",
+    "onAction",
+    "classNames"
+  ]);
   const labels = (0, import_hooks28.useLabels)();
   const hasAction = resolveStateMessageHasAction({ onAction });
   const resolvedIcon = (0, import_react6.cloneElement)(icon, {
@@ -6347,7 +6402,7 @@ var StateMessage = ({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
     "div",
-    {
+    __spreadProps(__spreadValues({}, rest), {
       className: cn(
         "agg-state-message",
         "flex min-h-[240px] w-full flex-col items-center justify-center px-5 py-10 text-center md:px-10",
@@ -6406,7 +6461,7 @@ var StateMessage = ({
           ]
         }
       )
-    }
+    })
   );
 };
 StateMessage.displayName = "StateMessage";
@@ -7250,7 +7305,7 @@ var normalizeEventListItemV2Comparison = ({
     return __spreadProps(__spreadValues({}, row), {
       prices
     });
-  });
+  }).filter((row) => row.prices.length === 0 || row.prices.some((price) => price.price > 0));
   const matchedVenues = collectMatchedVenues(rows);
   return {
     rows,
@@ -7371,7 +7426,13 @@ var EventListItemContent = ({
   const config = (0, import_hooks31.useSdkUiConfig)();
   const labels = (0, import_hooks31.useLabels)();
   const allVenueMarkets = (0, import_react10.useMemo)(() => event.venueMarkets, [event.venueMarkets]);
-  const resolvedTitle = event.title;
+  const resolvedTitle = formatEventTitleWithDateSuffix({
+    title: event.title,
+    categories: event.categories,
+    structureType: event.structureType,
+    gameStartTime: event.gameStartTime,
+    endDate: event.endDate
+  });
   const resolvedImage = event.image;
   const visibleVenueLogos = (0, import_react10.useMemo)(() => {
     var _a2;
@@ -7397,8 +7458,10 @@ var EventListItemContent = ({
   } = (0, import_hooks31.useVenueMarkets)({
     venueEventId: event.id,
     enabled: shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled,
-    sortBy: "yesPrice",
-    sortDir: "desc",
+    // List/tile surface: axis/dates sort by volume so the scroll tail matches
+    // the volume-sorted top-3 (the detail page omits context and keeps the
+    // structured threshold/date order).
+    context: "list",
     status: marketStatus
   });
   const resolvedOutcomeMarkets = (0, import_react10.useMemo)(() => {
@@ -7984,10 +8047,10 @@ var import_hooks33 = require("@agg-build/hooks");
 
 // src/events/market-details/market-details.utils.ts
 var import_sdk12 = require("@agg-build/sdk");
-var import_dayjs3 = __toESM(require("dayjs"));
+var import_dayjs4 = __toESM(require("dayjs"));
 
 // src/events/item-details/event-list-item-details.utils.ts
-var import_dayjs2 = __toESM(require("dayjs"));
+var import_dayjs3 = __toESM(require("dayjs"));
 var compareOutcomeSelectorLabels = (leftLabel, rightLabel) => {
   const leftSemanticLabel = toSemanticLabel(leftLabel);
   const rightSemanticLabel = toSemanticLabel(rightLabel);
@@ -8000,8 +8063,8 @@ var compareOutcomeSelectorLabels = (leftLabel, rightLabel) => {
   if (leftBinaryOrder != null && rightBinaryOrder != null) {
     return leftBinaryOrder - rightBinaryOrder;
   }
-  const leftDate = isDateLikeLabel(leftLabel) ? (0, import_dayjs2.default)(leftLabel).valueOf() : null;
-  const rightDate = isDateLikeLabel(rightLabel) ? (0, import_dayjs2.default)(rightLabel).valueOf() : null;
+  const leftDate = isDateLikeLabel(leftLabel) ? (0, import_dayjs3.default)(leftLabel).valueOf() : null;
+  const rightDate = isDateLikeLabel(rightLabel) ? (0, import_dayjs3.default)(rightLabel).valueOf() : null;
   if (leftDate != null && rightDate != null && leftDate !== rightDate) {
     return leftDate - rightDate;
   }
@@ -8042,7 +8105,7 @@ var toSemanticLabel = (value) => {
 };
 var isDateLikeLabel = (value) => {
   if (!value.trim()) return false;
-  return (0, import_dayjs2.default)(value).isValid();
+  return (0, import_dayjs3.default)(value).isValid();
 };
 var matchOutcomeByLabel = (outcome, selectedOutcomeLabel) => {
   const normalizedSelectedLabel = normalizeLabel(selectedOutcomeLabel);
@@ -8410,6 +8473,42 @@ var resolveDisplayOutcomeLabels = (labels) => {
     (label2) => labels.some((value) => normalizeLabel2(value) === normalizeLabel2(label2))
   );
 };
+var TRAILING_LINE_VALUE_PATTERN = /^(.*?)(\s+[+-]?\d+(?:\.\d+)?)$/;
+var resolveLineOutcomeDisplayParts = (label2, title2) => {
+  var _a, _b;
+  const sourceText = (title2 == null ? void 0 : title2.trim()) || label2.trim();
+  const match = TRAILING_LINE_VALUE_PATTERN.exec(sourceText);
+  if (!match) {
+    return {
+      title: (title2 == null ? void 0 : title2.trim()) || null,
+      lineLabel: null
+    };
+  }
+  const baseTitle = ((_a = match[1]) == null ? void 0 : _a.trim()) || null;
+  const lineLabel = ((_b = match[2]) == null ? void 0 : _b.trim()) || null;
+  return {
+    title: baseTitle,
+    lineLabel
+  };
+};
+var formatScopedLineValue = (value) => {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+};
+var resolveScopedMarketLineLabel = ({
+  outcomeIndex,
+  scopedMarket
+}) => {
+  var _a;
+  const lineValue = scopedMarket == null ? void 0 : scopedMarket.lineValue;
+  if (lineValue == null) return null;
+  const sportsMarketType = normalizeLabel2((_a = scopedMarket == null ? void 0 : scopedMarket.sportsMarketType) != null ? _a : "");
+  if (sportsMarketType === "spread") {
+    const directionalLineValue = outcomeIndex === 0 ? lineValue : lineValue * -1;
+    const prefix = directionalLineValue > 0 ? "+" : "";
+    return `${prefix}${formatScopedLineValue(directionalLineValue)}`;
+  }
+  return formatScopedLineValue(lineValue);
+};
 var resolveMarketDetailsOutcomeLabels = (venueMarkets) => {
   var _a;
   const primaryMarket = selectPrimaryVenueMarket(venueMarkets);
@@ -8462,12 +8561,12 @@ var resolveScopedSelectedOutcome = ({
         outcomeLabel: matchingOutcome.label
       };
     }
-    if (suppressFallbackWhenSelectedOutcomeOutOfScope) {
-      return {
-        outcomeId: null,
-        outcomeLabel: void 0
-      };
-    }
+  }
+  if (suppressFallbackWhenSelectedOutcomeOutOfScope) {
+    return {
+      outcomeId: null,
+      outcomeLabel: void 0
+    };
   }
   const outcomeLabels = resolveDisplayOutcomeLabels(
     resolveMarketDetailsOutcomeLabels(venueMarkets).map((outcome) => outcome.label)
@@ -8505,28 +8604,36 @@ var resolveOutcomeTone = (label2, index) => {
   }
   return index === 0 ? "positive" : "negative";
 };
-var resolveHeaderOutcomeItems = (venueMarkets, scopedMarket) => {
+var resolveHeaderOutcomeItems = (venueMarkets, scopedMarket, variant) => {
   const outcomes = resolveMarketDetailsOutcomeLabels(venueMarkets);
   const labels = resolveDisplayOutcomeLabels(outcomes.map((outcome) => outcome.label));
   const probabilityByLabel = resolveAverageProbabilityByLabel(venueMarkets, labels);
-  return labels.slice(0, 2).map((label2, index) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  return labels.map((label2, index) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const scopedOutcome = (_a = scopedMarket == null ? void 0 : scopedMarket.venueMarketOutcomes) == null ? void 0 : _a.find(
       (outcome) => normalizeLabel2(outcome.label) === normalizeLabel2(label2)
     );
     const scopedTitle = ((_b = scopedOutcome == null ? void 0 : scopedOutcome.title) == null ? void 0 : _b.trim()) || null;
     const fallbackTitle = (_d = (_c = outcomes.find((outcome) => normalizeLabel2(outcome.label) === normalizeLabel2(label2))) == null ? void 0 : _c.title) != null ? _d : null;
-    const title2 = scopedOutcome ? scopedTitle : fallbackTitle;
+    const resolvedTitle = scopedOutcome ? scopedTitle : fallbackTitle;
+    const lineDisplayParts = variant === "line" ? resolveLineOutcomeDisplayParts(label2, resolvedTitle) : { title: resolvedTitle, lineLabel: null };
+    const fallbackLineLabel = variant === "line" ? resolveScopedMarketLineLabel({
+      outcomeIndex: index,
+      scopedMarket
+    }) : null;
+    const sportsMarketType = normalizeLabel2((_e = scopedMarket == null ? void 0 : scopedMarket.sportsMarketType) != null ? _e : "");
     const fallbackOutcomeByVenue = resolveOutcomesByVenue(venueMarkets, label2)[0];
-    const outcomeId = (_f = (_e = scopedOutcome == null ? void 0 : scopedOutcome.id) != null ? _e : fallbackOutcomeByVenue == null ? void 0 : fallbackOutcomeByVenue.outcome.id) != null ? _f : "";
-    const venue = (_j = (_i = (_g = scopedMarket == null ? void 0 : scopedMarket.venue) != null ? _g : fallbackOutcomeByVenue == null ? void 0 : fallbackOutcomeByVenue.venue) != null ? _i : (_h = venueMarkets[0]) == null ? void 0 : _h.venue) != null ? _j : "polymarket";
+    const outcomeId = (_g = (_f = scopedOutcome == null ? void 0 : scopedOutcome.id) != null ? _f : fallbackOutcomeByVenue == null ? void 0 : fallbackOutcomeByVenue.outcome.id) != null ? _g : "";
+    const venue = (_k = (_j = (_h = scopedMarket == null ? void 0 : scopedMarket.venue) != null ? _h : fallbackOutcomeByVenue == null ? void 0 : fallbackOutcomeByVenue.venue) != null ? _j : (_i = venueMarkets[0]) == null ? void 0 : _i.venue) != null ? _k : "polymarket";
     return {
-      title: title2,
+      title: lineDisplayParts.title,
       id: outcomeId,
       venue,
       label: label2,
+      lineLabel: sportsMarketType === "total" ? fallbackLineLabel != null ? fallbackLineLabel : lineDisplayParts.lineLabel : (_l = lineDisplayParts.lineLabel) != null ? _l : fallbackLineLabel,
       probability: probabilityByLabel.get(label2),
-      tone: resolveOutcomeTone(label2, index)
+      tone: resolveOutcomeTone(label2, index),
+      variant
     };
   });
 };
@@ -8534,10 +8641,9 @@ var resolveSubtitle = ({
   venueMarkets,
   volume,
   formatCompactCurrency,
-  labels,
-  tradableVenues
+  labels
 }) => {
-  const { venueCount } = getVenueSummary(venueMarkets, { tradableVenues });
+  const { venueCount } = getVenueSummary(venueMarkets);
   const parts = [
     `${venueCount} ${venueCount === 1 ? labels.marketDetails.meta.venueSingular : labels.marketDetails.meta.venuePlural}`
   ];
@@ -8556,19 +8662,19 @@ var resolveOtherTabRows = (market, labels) => {
   if (market.creationDate) {
     rows.push({
       label: labels.marketDetails.meta.created,
-      value: (0, import_dayjs3.default)(market.creationDate).format("MMM D, YYYY")
+      value: (0, import_dayjs4.default)(market.creationDate).format("MMM D, YYYY")
     });
   }
   if (market.startDate) {
     rows.push({
       label: labels.marketDetails.meta.opens,
-      value: (0, import_dayjs3.default)(market.startDate).format("MMM D, YYYY")
+      value: (0, import_dayjs4.default)(market.startDate).format("MMM D, YYYY")
     });
   }
   if (market.endDate) {
     rows.push({
       label: labels.marketDetails.meta.closes,
-      value: (0, import_dayjs3.default)(market.endDate).format("MMM D, YYYY")
+      value: (0, import_dayjs4.default)(market.endDate).format("MMM D, YYYY")
     });
   }
   if (rows.length === 1) {
@@ -8585,8 +8691,7 @@ var buildMarketDetailsModel = ({
   title: title2,
   image,
   formatCompactCurrency,
-  labels,
-  tradableVenues
+  labels
 }) => {
   var _a, _b, _c, _d;
   const market = resolveMarketFromVenueMarkets(venueMarkets, marketId);
@@ -8601,8 +8706,7 @@ var buildMarketDetailsModel = ({
     venueMarkets: market.venueMarkets,
     volume: resolvedVolume,
     formatCompactCurrency,
-    labels,
-    tradableVenues
+    labels
   });
   const outcomeLabels = resolveDisplayOutcomeLabels(
     resolveMarketDetailsOutcomeLabels(market.venueMarkets).map((outcome) => outcome.label)
@@ -9653,7 +9757,7 @@ var import_react14 = require("react");
 
 // src/trading/utils.ts
 var import_hooks37 = require("@agg-build/hooks");
-var import_dayjs4 = __toESM(require("dayjs"));
+var import_dayjs5 = __toESM(require("dayjs"));
 var defaultLabels = (0, import_hooks37.resolveAggUiLabels)("en-US");
 var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
@@ -9695,7 +9799,6 @@ var normalizeSettlementForCompare = (input) => {
 };
 var dedupeSettlementSources = (sources) => {
   const order = ["eventDescription", "marketDescription", "primaryRules"];
-  const seen = /* @__PURE__ */ new Set();
   const result = [];
   for (const key of order) {
     const value = sources[key];
@@ -9704,11 +9807,13 @@ var dedupeSettlementSources = (sources) => {
     if (!trimmed) continue;
     const fingerprint = normalizeSettlementForCompare(trimmed);
     if (!fingerprint) continue;
-    if (seen.has(fingerprint)) continue;
-    seen.add(fingerprint);
-    result.push({ key, content: trimmed });
+    if (result.some((block) => block.fingerprint.includes(fingerprint))) continue;
+    for (let i = result.length - 1; i >= 0; i -= 1) {
+      if (fingerprint.includes(result[i].fingerprint)) result.splice(i, 1);
+    }
+    result.push({ key, content: trimmed, fingerprint });
   }
-  return result;
+  return result.map(({ key, content }) => ({ key, content }));
 };
 
 // src/trading/settlement/settlement-text-renderer.tsx
@@ -10504,11 +10609,20 @@ var EventListItemDetailsContent = ({
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
   }, [config, event.volume, labels.eventItemDetails.volumeSuffix, venueMarkets]);
+  const resolvedTitle = (0, import_react16.useMemo)(() => {
+    return formatEventTitleWithDateSuffix({
+      title: event.title,
+      categories: event.categories,
+      structureType: event.structureType,
+      gameStartTime: event.gameStartTime,
+      endDate: event.endDate
+    });
+  }, [event.categories, event.gameStartTime, event.endDate, event.structureType, event.title]);
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
     Card,
     {
       className: cn("group/agg-event-details", detailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       onClick: () => {
         onClick == null ? void 0 : onClick(event);
       },
@@ -10543,7 +10657,7 @@ var EventListItemDetailsContent = ({
                       "truncate text-wrap wrap-break-word line-clamp-2",
                       classNames == null ? void 0 : classNames.title
                     ),
-                    children: event.title
+                    children: resolvedTitle
                   }
                 ),
                 venueMarkets.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
@@ -10765,8 +10879,8 @@ var EventListItemDetails = (props) => {
 EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
-var import_hooks42 = require("@agg-build/hooks");
-var import_react19 = require("react");
+var import_hooks43 = require("@agg-build/hooks");
+var import_react20 = require("react");
 
 // src/events/orderbook/index.tsx
 var import_hooks41 = require("@agg-build/hooks");
@@ -11241,37 +11355,71 @@ var Orderbook = ({
 };
 Orderbook.displayName = "Orderbook";
 
-// src/events/shared/display-outcome-venue.ts
+// src/events/shared/select-best-outcome.ts
 var normalizeOutcomeLabel3 = (label2) => {
   return typeof label2 === "string" ? label2.trim().toLowerCase() : "";
 };
-var getDisplayOutcomeVenue = ({
-  outcomeId,
-  outcomeLabel,
-  selection,
-  bestMidpointVenue,
-  bestVenueByOutcomeId,
-  bestPriceVenuesByOutcomeId,
-  fallbackVenue
-}) => {
-  var _a;
-  if (selection && outcomeId) {
-    const sideVenues = bestPriceVenuesByOutcomeId == null ? void 0 : bestPriceVenuesByOutcomeId.get(outcomeId);
-    if (selection === "buy" && (sideVenues == null ? void 0 : sideVenues.bestAskVenue)) return sideVenues.bestAskVenue;
-    if (selection === "sell" && (sideVenues == null ? void 0 : sideVenues.bestBidVenue)) return sideVenues.bestBidVenue;
+var selectBestOutcomeCandidate = (args) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { outcomeId, selection } = args;
+  if (!outcomeId) return void 0;
+  const resolveVenueMarketId = (venue) => {
+    var _a2, _b2;
+    return venue ? (_b2 = (_a2 = args.venueMarketIdByVenue) == null ? void 0 : _a2.get(venue)) != null ? _b2 : void 0 : void 0;
+  };
+  const make = (price, venue, source, updatedAt) => ({
+    price,
+    venue: venue != null ? venue : void 0,
+    venueMarketId: resolveVenueMarketId(venue != null ? venue : void 0),
+    outcomeId,
+    source,
+    updatedAt: updatedAt != null ? updatedAt : void 0
+  });
+  if (selection === "buy" || selection === "sell") {
+    const wsSidePrice = selection === "buy" ? (_a = args.live) == null ? void 0 : _a.bestAsk : (_b = args.live) == null ? void 0 : _b.bestBid;
+    const wsSideVenue = selection === "buy" ? (_c = args.live) == null ? void 0 : _c.bestAskVenue : (_d = args.live) == null ? void 0 : _d.bestBidVenue;
+    if (wsSidePrice != null) {
+      return make(wsSidePrice, wsSideVenue, "ws", (_e = args.live) == null ? void 0 : _e.updatedAt);
+    }
+    const restSidePrice = selection === "buy" ? (_f = args.restBest) == null ? void 0 : _f.bestAsk : (_g = args.restBest) == null ? void 0 : _g.bestBid;
+    const restSideVenue = selection === "buy" ? (_h = args.restBestVenues) == null ? void 0 : _h.bestAskVenue : (_i = args.restBestVenues) == null ? void 0 : _i.bestBidVenue;
+    if (restSidePrice != null) {
+      return make(restSidePrice, restSideVenue, "rest-best", void 0);
+    }
+  }
+  if (((_j = args.live) == null ? void 0 : _j.midpoint) != null) {
+    return make(args.live.midpoint, args.live.midpointVenue, "ws", args.live.updatedAt);
   }
-  if (normalizeOutcomeLabel3(outcomeLabel) === "yes" && bestMidpointVenue) {
-    return bestMidpointVenue;
+  if (normalizeOutcomeLabel3(args.outcomeLabel) === "yes" && args.bestMidpoint != null && args.bestMidpointVenue) {
+    return make(args.bestMidpoint, args.bestMidpointVenue, "rest-midpoint", void 0);
   }
-  const bestVenue = outcomeId ? bestVenueByOutcomeId == null ? void 0 : bestVenueByOutcomeId.get(outcomeId) : void 0;
-  return (_a = bestVenue != null ? bestVenue : fallbackVenue) != null ? _a : void 0;
+  if (args.restMidpoint != null) {
+    return make(args.restMidpoint, args.restMidpointVenue, "rest-midpoint", void 0);
+  }
+  if (args.staticPrice != null) {
+    return make(args.staticPrice, args.staticVenue, "static", void 0);
+  }
+  return void 0;
+};
+var buildVenueMarketIdByVenue = (venueMarkets) => {
+  var _a;
+  const map = /* @__PURE__ */ new Map();
+  if (!(venueMarkets == null ? void 0 : venueMarkets.length)) return map;
+  const visit = (vm) => {
+    if (vm.venue && vm.id && !map.has(vm.venue)) map.set(vm.venue, vm.id);
+  };
+  for (const vm of venueMarkets) {
+    visit(vm);
+    for (const sibling of (_a = vm.matchedVenueMarkets) != null ? _a : []) visit(sibling);
+  }
+  return map;
 };
 
 // src/events/shared/event-trading-state.utils.ts
-var import_dayjs5 = __toESM(require("dayjs"));
+var import_dayjs6 = __toESM(require("dayjs"));
 var formatTradingStateDate = (value) => {
-  if (!(0, import_dayjs5.default)(value).isValid()) return value;
-  return (0, import_dayjs5.default)(value).format("MMM D, YYYY");
+  if (!(0, import_dayjs6.default)(value).isValid()) return value;
+  return (0, import_dayjs6.default)(value).format("MMM D, YYYY");
 };
 var resolveTradingStateTimestampLabel = (labels, state) => {
   if (state.kind === "resolved" && state.resolvesAt) {
@@ -11375,14 +11523,17 @@ var marketDetailsOutcomeButtonToneClasses = {
 };
 var getMarketDetailsOutcomeButtonClassNames = ({
   enableAnimations,
+  enforceFixedWidth,
   isSelected,
-  tone
+  tone,
+  variant
 }) => {
   const toneClasses = marketDetailsOutcomeButtonToneClasses[tone];
+  const widthClassName = variant === "line" ? "w-[200px]" : variant === "outcome" ? "w-[160px]" : "w-[140px]";
   return {
     root: cn(
-      "w-[140px]",
-      "flex h-9 shrink-0 cursor-pointer select-none items-center justify-center gap-2 rounded-agg-full border px-5 py-1.5 text-left shadow-none",
+      enforceFixedWidth ? widthClassName : "w-[140px]",
+      "flex h-9 shrink-0 cursor-pointer select-none items-center justify-center gap-2 rounded-agg-full border px-4 py-1.5 text-left shadow-none",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary",
       "disabled:cursor-not-allowed disabled:opacity-60",
       getMotionClassName(
@@ -11398,6 +11549,7 @@ var getMarketDetailsOutcomeButtonClassNames = ({
 var MarketDetailsOutcomeButton = ({
   ariaControls,
   enableAnimations,
+  enforceFixedWidth,
   isSelected,
   item,
   onSelect
@@ -11405,10 +11557,14 @@ var MarketDetailsOutcomeButton = ({
   var _a;
   const classNames = getMarketDetailsOutcomeButtonClassNames({
     enableAnimations,
+    enforceFixedWidth,
     isSelected,
-    tone: item.tone
+    tone: item.tone,
+    variant: item.variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+  const itemLabel = (_a = item.title) != null ? _a : item.label;
+  const isLineVariant = item.variant === "line";
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
     "button",
     {
       type: "button",
@@ -11418,181 +11574,517 @@ var MarketDetailsOutcomeButton = ({
       "aria-controls": ariaControls,
       "aria-selected": isSelected,
       tabIndex: isSelected ? 0 : -1,
-      className: cn(classNames.root, "flex-1 md:flex-auto", "gap-1!"),
+      className: cn(
+        classNames.root,
+        "overflow-hidden",
+        enforceFixedWidth ? "flex-none" : "flex-1 md:flex-auto"
+      ),
       onClick: () => onSelect(item.label),
-      children: [
+      children: isLineVariant ? /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex min-w-0 max-w-full items-center justify-center gap-1.5 overflow-hidden", children: [
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex flex-row items-center gap-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-            Typography,
-            {
-              as: "span",
-              variant: isSelected ? "body-strong" : "body",
-              className: cn("whitespace-nowrap truncate", classNames.text),
-              children: (_a = item.title) != null ? _a : item.label
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-            Typography,
-            {
-              as: "span",
-              variant: isSelected ? "body-strong" : "body",
-              className: cn(classNames.text),
-              children: formatProbabilityCents(item.probability)
-            }
-          )
-        ] })
-      ]
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("min-w-0 truncate whitespace-nowrap text-center", classNames.text),
+            children: itemLabel
+          }
+        ),
+        item.lineLabel ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("shrink-0 whitespace-nowrap", classNames.text),
+            children: item.lineLabel
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("shrink-0 whitespace-nowrap", classNames.text),
+            children: formatProbabilityCents(item.probability)
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "inline-flex max-w-full items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("truncate whitespace-nowrap text-center", classNames.text),
+            children: itemLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("shrink-0 whitespace-nowrap", classNames.text),
+            children: formatProbabilityCents(item.probability)
+          }
+        )
+      ] })
     }
   );
 };
 MarketDetailsOutcomeButton.displayName = "MarketDetailsOutcomeButton";
 
-// src/events/market-details/index.tsx
+// src/events/market-details/market-details-graph-panel.tsx
+var import_hooks42 = require("@agg-build/hooks");
+var import_react19 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var MarketDetailsUnavailableState = ({
-  ariaLabel,
-  classNames
-}) => {
-  const labels = (0, import_hooks42.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-    Card,
-    {
-      className: cn(
-        "group/agg-market-card agg-market-card-unavailable",
-        marketDetailsBaseCardClassName,
-        classNames == null ? void 0 : classNames.root
-      ),
-      role: "status",
-      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
-      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
-      ] })
-    }
-  );
-};
-var MarketDetailsNotFoundState = ({
-  ariaLabel: _ariaLabel,
-  classNames: _classNames
-}) => {
-  const labels = (0, import_hooks42.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-    StateMessage,
-    {
-      title: labels.marketDetails.notFoundTitle,
-      description: labels.marketDetails.notFoundDescription,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(SearchEmptyIcon, {}),
-      classNames: { root: "min-h-[280px] md:min-h-[320px]" }
-    }
-  );
-};
-var MarketDetailsContent = ({
+var MarketDetailsGraphPanel = ({
   venueMarkets,
-  marketId,
-  title: title2,
-  image,
-  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
-  onOpenChange,
-  defaultTab,
-  defaultOutcomeLabel,
-  orderBookDepth = orderBookRowLimitDefault,
-  ariaLabel,
-  classNames,
-  otherContent,
-  onOutcomeSelect,
+  selectedOutcomeLabel,
+  selectedOutcomeId,
+  livePrices,
+  wsLivePrices,
+  headerOutcomeItems,
+  isResolvedMarket,
+  isOutcomeSelectionLocked,
+  volume,
   live,
-  midpointsFallback,
-  midpointsFallbackVenues,
-  suppressOutcomeFallbackSelection,
-  midpointsResult
+  classNames
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c;
   const config = (0, import_hooks42.useSdkUiConfig)();
   const {
-    features: { enableAnimations },
-    formatting: { formatPercent },
+    formatting: { formatPercent, formatCompactCurrency },
     general: { theme }
   } = config;
   const isDarkTheme = theme === "dark";
   const labels = (0, import_hooks42.useLabels)();
-  const tradingContext = (0, import_hooks42.useEventTradingContext)();
-  const detailsContentId = (0, import_react19.useId)();
-  const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
-  const wsLivePrices = (0, import_hooks42.useLiveOutcomePrices)(venueMarkets);
-  const wsBestPrices = (0, import_hooks42.useLiveBestPrices)(venueMarkets);
-  const resolvedMarket = (0, import_react19.useMemo)(() => {
-    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
-  }, [venueMarkets, marketId]);
-  const scopedResolvedMarket = (0, import_react19.useMemo)(() => {
-    var _a2, _b2;
-    if (!resolvedMarket) return null;
-    return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
-  }, [resolvedMarket]);
-  const isResolvedMarket = (0, import_hooks42.resolveMarketTradingState)(scopedResolvedMarket).kind === "resolved";
-  const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
-    prices: /* @__PURE__ */ new Map(),
-    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
-    venueByOutcomeId: /* @__PURE__ */ new Map(),
-    bestPrices: /* @__PURE__ */ new Map(),
-    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
-    isLoading: false,
-    bestMidpoint: void 0,
-    bestMidpointVenue: void 0
-  };
-  const clusterMidpoints = (_b = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _b : clusterMidpointResult.prices;
-  const clusterBestMidpointsByOutcomeId = clusterMidpoints;
-  const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
-  const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
-  const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
-  const clusterBestPricesRest = clusterMidpointResult.bestPrices;
-  const clusterBestPrices = (0, import_react19.useMemo)(
-    () => (0, import_hooks42.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
-    [clusterBestPricesRest, wsBestPrices]
-  );
-  const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
-  const clusterMidpointMarkets = (0, import_react19.useMemo)(() => {
-    var _a2;
-    if (!resolvedMarket) return [];
-    return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
-  }, [resolvedMarket]);
-  const tradableVenues = (0, import_react19.useMemo)(() => {
-    var _a2;
-    if (clusterMidpointMarkets.length === 0) return null;
-    if (clusterMidpoints.size === 0) return null;
-    const set = /* @__PURE__ */ new Set();
-    for (const market of clusterMidpointMarkets) {
-      for (const outcome of (_a2 = market.venueMarketOutcomes) != null ? _a2 : []) {
-        if (clusterMidpoints.has(outcome.id)) {
-          set.add(market.venue);
-          break;
-        }
-      }
-    }
-    return set;
-  }, [clusterMidpointMarkets, clusterMidpoints]);
-  const model = (0, import_react19.useMemo)(() => {
-    return buildMarketDetailsModel({
-      venueMarkets,
-      marketId,
-      title: title2,
-      image,
-      formatCompactCurrency: config.formatting.formatCompactCurrency,
-      labels,
-      tradableVenues
+  const selectedTimeRange = config.chart.selectedChartTimeRange;
+  const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
+  const [chartRangeOverride, setChartRangeOverride] = (0, import_react19.useState)(null);
+  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
+  const [selectedChartType, setSelectedChartType] = (0, import_react19.useState)("line");
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react19.useState)(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react19.useState)(selectedOutcomeLabel);
+  const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
+  const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
+  const chartOutcomesByVenue = (0, import_react19.useMemo)(() => {
+    return resolveChartVenueOutcomes({
+      eligibleVenueOutcomes: collectEligibleVenueOutcomes({
+        venueMarkets,
+        selectedOutcomeLabel: resolvedChartOutcomeLabel,
+        selectedOutcomeId: chartSelectedOutcomeId
+      }),
+      livePrices
     });
-  }, [
-    config.formatting.formatCompactCurrency,
-    venueMarkets,
-    image,
-    labels,
-    marketId,
-    title2,
-    tradableVenues
-  ]);
-  const livePrices = (0, import_react19.useMemo)(() => {
-    const merged = /* @__PURE__ */ new Map();
-    if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
+  }, [livePrices, venueMarkets, resolvedChartOutcomeLabel, chartSelectedOutcomeId]);
+  const rollingWindow = (0, import_hooks42.useRollingChartWindow)({ range: effectiveChartTimeRange });
+  const chartPrimaryOutcomeId = (_b = (_a = chartOutcomesByVenue[0]) == null ? void 0 : _a.outcome.id) != null ? _b : null;
+  const chartVenueOutcomeIds = (0, import_react19.useMemo)(() => {
+    return chartOutcomesByVenue.map((item) => item.outcome.id);
+  }, [chartOutcomesByVenue]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = (0, import_hooks42.useMarketChart)({
+    marketId: chartPrimaryOutcomeId,
+    venueMarketIds: chartVenueOutcomeIds,
+    interval: rollingWindow.interval,
+    startTs: rollingWindow.startTs * 1e3,
+    endTs: rollingWindow.endTs * 1e3,
+    // The panel only mounts when the chart is actually visible, so enable as
+    // soon as we have an outcome to chart.
+    enabled: !!chartPrimaryOutcomeId,
+    live,
+    refetchIntervalMs: rollingWindow.refetchIntervalMs,
+    // Stable cache key per user-selected range so tab/page revisits hit cache
+    // instead of refetching on every bucket-boundary rollover.
+    rangeKey: rollingWindow.range
+  });
+  const hasAutoFallenBackRangeRef = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
+    hasAutoFallenBackRangeRef.current = false;
+    setChartRangeOverride(null);
+  }, [chartPrimaryOutcomeId]);
+  (0, import_react19.useEffect)(() => {
+    if (!shouldAutoFallbackToAllRange({
+      chartData: marketChartData,
+      isLoading: isMarketChartLoading,
+      error: marketChartError,
+      currentRange: effectiveChartTimeRange,
+      hasAlreadyFallenBack: hasAutoFallenBackRangeRef.current,
+      domainStartTs: rollingWindow.startTs
+    })) {
+      return;
+    }
+    hasAutoFallenBackRangeRef.current = true;
+    setChartRangeOverride("ALL");
+  }, [
+    marketChartData,
+    isMarketChartLoading,
+    marketChartError,
+    effectiveChartTimeRange,
+    rollingWindow.startTs
+  ]);
+  const chartAvailableOutcomesByVenue = (0, import_react19.useMemo)(() => {
+    return filterChartVenueOutcomesByRenderableVenues({
+      chartData: marketChartData,
+      venueOutcomes: chartOutcomesByVenue
+    });
+  }, [chartOutcomesByVenue, marketChartData]);
+  const graphSeries = (0, import_react19.useMemo)(() => {
+    var _a2, _b2, _c2, _d;
+    const baseColor = resolveSeriesColor(
+      (_d = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d : "polymarket",
+      0,
+      isDarkTheme
+    );
+    const domainStartTs = rollingWindow.startTs;
+    return resolveMarketChartDisplaySeries({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    }).map((seriesItem) => {
+      return {
+        id: `${resolvedChartOutcomeLabel != null ? resolvedChartOutcomeLabel : "graph"}-${seriesItem.venue}-${chartPrimaryOutcomeId != null ? chartPrimaryOutcomeId : "chart"}`,
+        venue: selectedGraphVenue != null ? selectedGraphVenue : seriesItem.venue,
+        color: seriesItem.venue === "aggregate" ? baseColor : resolveSeriesColor(seriesItem.venue, 0, isDarkTheme),
+        // Constrain to the rolling [nowSec - rangeSeconds, …] domain so stale
+        // bars don't bleed in across a range shrink or long mount.
+        points: seriesItem.points.filter((point) => point.time >= domainStartTs)
+      };
+    });
+  }, [
+    isDarkTheme,
+    chartPrimaryOutcomeId,
+    marketChartData,
+    rollingWindow.startTs,
+    selectedGraphVenue,
+    resolvedChartOutcomeLabel,
+    chartAvailableOutcomesByVenue,
+    chartOutcomesByVenue
+  ]);
+  const graphLiveState = (0, import_react19.useMemo)(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
+  const hasChartError = !!marketChartError;
+  (0, import_react19.useEffect)(() => {
+    if (!selectedGraphVenue) {
+      return;
+    }
+    if (chartAvailableOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
+      return;
+    }
+    setSelectedGraphVenue(null);
+  }, [selectedGraphVenue, chartAvailableOutcomesByVenue]);
+  const handleGraphVenueToggle = (venue) => {
+    setSelectedGraphVenue((currentVenue) => {
+      if (currentVenue === venue) return null;
+      return venue;
+    });
+  };
+  const handleRetryMarketChart = () => {
+    void refetchMarketChart();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: cn("agg-price-chart flex flex-col gap-5 p-5", classNames == null ? void 0 : classNames.graph), children: [
+    hasChartError ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      StateMessage,
+      {
+        title: labels.marketDetails.chartUnavailableTitle,
+        description: labels.marketDetails.chartUnavailableDescription,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(WarningIcon, {}),
+        onAction: handleRetryMarketChart,
+        classNames: { root: "min-h-[248px] px-5 py-10 md:min-h-[272px]" }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      LineChart,
+      {
+        series: graphSeries,
+        height: 260,
+        isLoading: isMarketChartLoading,
+        chartType: selectedChartType,
+        liveCandle: selectedChartType === "candlestick" ? (_c = graphLiveState.liveCandle) != null ? _c : void 0 : void 0,
+        lineValue: graphLiveState.lineValue,
+        classNames: { root: "agg-chart-region w-full" },
+        showSeriesControls: chartAvailableOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
+        renderSeriesControls: () => {
+          var _a2, _b2, _c2, _d;
+          return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
+              var _a3;
+              const probability = formatProbabilityPercent(
+                (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
+                formatPercent
+              );
+              const isActiveVenue = selectedGraphVenue === item.venue;
+              return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `${item.venue} ${probability}`,
+                  "aria-pressed": isActiveVenue,
+                  className: cn(
+                    "agg-market-venue",
+                    "cursor-pointer",
+                    "inline-flex items-center gap-2 rounded-agg-full border px-4 py-2",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary-hover",
+                    isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
+                  ),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleGraphVenueToggle(item.venue);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                  ]
+                },
+                `${item.market.id}-${item.outcome.id}`
+              );
+            }) }),
+            !isOutcomeSelectionLocked ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              SwitchButton,
+              {
+                ariaLabel: labels.marketDetails.outcomeSelectorAria,
+                className: "agg-outcome-switch w-full shrink-0 md:w-fit",
+                value: (_d = (_c2 = (_a2 = headerOutcomeItems.find(
+                  (outcome) => outcome.label === resolvedChartOutcomeLabel
+                )) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = headerOutcomeItems[0]) == null ? void 0 : _b2.id) != null ? _d : "",
+                onValueChange: (outcomeId) => {
+                  const outcome = headerOutcomeItems.find(
+                    (headerOutcomeItem) => headerOutcomeItem.id === outcomeId
+                  );
+                  if (!outcome) return;
+                  setChartOutcomeLabel(outcome.label);
+                },
+                options: headerOutcomeItems.map((outcome) => {
+                  var _a3, _b3;
+                  const price = outcome.probability;
+                  return {
+                    value: outcome.id,
+                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price)}`,
+                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`
+                  };
+                })
+              }
+            ) : null
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "div",
+      {
+        className: cn(
+          "agg-chart-footer",
+          "flex flex-row justify-between gap-2 text-agg-sm leading-agg-5 text-agg-muted-foreground md:flex-row md:items-center md:justify-between",
+          classNames == null ? void 0 : classNames.footer
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: typeof volume !== "number" ? labels.marketDetails.volumeUnavailable : volume > 0 ? `${formatCompactCurrency(volume)} ${labels.marketDetails.meta.volumeSuffix}` : "" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              ChartTypeSwitch,
+              {
+                className: "agg-chart-type-switch shrink-0",
+                value: selectedChartType,
+                onValueChange: setSelectedChartType
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
+            import_hooks42.CHART_TIME_RANGES.map((timeRange) => {
+              const isActive = effectiveChartTimeRange === timeRange;
+              const isDisabled = isResolvedMarket && timeRange !== "ALL";
+              return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                "button",
+                {
+                  type: "button",
+                  disabled: isDisabled,
+                  className: cn(
+                    "agg-chart-time-range-trigger",
+                    "cursor-pointer text-agg-sm leading-agg-5",
+                    isDisabled && "cursor-not-allowed opacity-50",
+                    isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
+                  ),
+                  "aria-pressed": isActive,
+                  "aria-disabled": isDisabled,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (isDisabled) return;
+                    setChartRangeOverride(null);
+                    setSelectedTimeRange(timeRange);
+                  },
+                  children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
+                },
+                timeRange
+              );
+            })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+MarketDetailsGraphPanel.displayName = "MarketDetailsGraphPanel";
+
+// src/events/market-details/index.tsx
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var MarketDetailsUnavailableState = ({
+  marketId,
+  ariaLabel,
+  classNames
+}) => {
+  const labels = (0, import_hooks43.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    Card,
+    {
+      "data-market-id": marketId || void 0,
+      className: cn(
+        "group/agg-market-card agg-market-card-unavailable",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
+      children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      ] })
+    }
+  );
+};
+var MarketDetailsNotFoundState = ({
+  marketId,
+  ariaLabel: _ariaLabel,
+  classNames: _classNames
+}) => {
+  const labels = (0, import_hooks43.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    StateMessage,
+    {
+      "data-market-id": marketId || void 0,
+      title: labels.marketDetails.notFoundTitle,
+      description: labels.marketDetails.notFoundDescription,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(SearchEmptyIcon, {}),
+      classNames: { root: "min-h-[280px] md:min-h-[320px]" }
+    }
+  );
+};
+var MarketDetailsContent = ({
+  venueMarkets,
+  marketId,
+  title: title2,
+  image,
+  isOpened: controlledIsOpened = marketDetailsDefaultIsOpened,
+  onOpenChange,
+  defaultTab,
+  defaultOutcomeLabel,
+  orderBookDepth = orderBookRowLimitDefault,
+  ariaLabel,
+  classNames,
+  otherContent,
+  headerAccessory,
+  compactHeader = false,
+  subtitleOverride,
+  headerOutcomeVariant,
+  headerOutcomeItemsOverride,
+  onOutcomeSelect,
+  live,
+  midpointsFallback,
+  midpointsFallbackVenues,
+  suppressOutcomeFallbackSelection,
+  midpointsResult
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const config = (0, import_hooks43.useSdkUiConfig)();
+  const {
+    features: { enableAnimations },
+    formatting: { formatPercent }
+  } = config;
+  const labels = (0, import_hooks43.useLabels)();
+  const tradingContext = (0, import_hooks43.useEventTradingContext)();
+  const detailsContentId = (0, import_react20.useId)();
+  const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
+  const resolvedMarket = (0, import_react20.useMemo)(() => {
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
+  const clusterVenueMarkets = resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets;
+  const wsLivePrices = (0, import_hooks43.useLiveOutcomePrices)(clusterVenueMarkets);
+  const wsBestPrices = (0, import_hooks43.useLiveBestPrices)(clusterVenueMarkets);
+  const wsBestCandidates = (0, import_hooks43.useLiveBestPriceCandidates)(clusterVenueMarkets);
+  const scopedResolvedMarket = (0, import_react20.useMemo)(() => {
+    var _a2, _b2;
+    if (!resolvedMarket) return null;
+    return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
+  }, [resolvedMarket]);
+  const isResolvedMarket = (0, import_hooks43.resolveMarketTradingState)(scopedResolvedMarket).kind === "resolved";
+  (0, import_hooks43.useEventOrderbookData)(
+    isResolvedMarket ? [] : resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets,
+    (_b = scopedResolvedMarket == null ? void 0 : scopedResolvedMarket.id) != null ? _b : null
+  );
+  const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
+    prices: /* @__PURE__ */ new Map(),
+    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
+    venueByOutcomeId: /* @__PURE__ */ new Map(),
+    bestPrices: /* @__PURE__ */ new Map(),
+    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
+    isLoading: false,
+    bestMidpoint: void 0,
+    bestMidpointVenue: void 0
+  };
+  const clusterMidpoints = (_c = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _c : clusterMidpointResult.prices;
+  const clusterBestMidpointsByOutcomeId = clusterMidpoints;
+  const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
+  const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
+  const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
+  const clusterBestPricesRest = clusterMidpointResult.bestPrices;
+  const clusterBestPrices = (0, import_react20.useMemo)(
+    () => (0, import_hooks43.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
+    [clusterBestPricesRest, wsBestPrices]
+  );
+  const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
+  const clusterMidpointMarkets = (0, import_react20.useMemo)(() => {
+    var _a2;
+    if (!resolvedMarket) return [];
+    return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
+  }, [resolvedMarket]);
+  const tradableVenues = (0, import_react20.useMemo)(() => {
+    var _a2;
+    if (clusterMidpointMarkets.length === 0) return null;
+    const set = /* @__PURE__ */ new Set();
+    for (const market of clusterMidpointMarkets) {
+      for (const outcome of (_a2 = market.venueMarketOutcomes) != null ? _a2 : []) {
+        if (clusterMidpoints.has(outcome.id)) {
+          set.add(market.venue);
+          break;
+        }
+      }
+    }
+    if (set.size === 0) return null;
+    return set;
+  }, [clusterMidpointMarkets, clusterMidpoints]);
+  const model = (0, import_react20.useMemo)(() => {
+    return buildMarketDetailsModel({
+      venueMarkets,
+      marketId,
+      title: title2,
+      image,
+      formatCompactCurrency: config.formatting.formatCompactCurrency,
+      labels
+    });
+  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title2]);
+  const livePrices = (0, import_react20.useMemo)(() => {
+    const merged = /* @__PURE__ */ new Map();
+    if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
         merged.set(outcomeId, price);
       }
@@ -11605,37 +12097,32 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = (0, import_react19.useMemo)(() => {
+  const scopedMarketForCard = (0, import_react20.useMemo)(() => {
     var _a2;
     if (!model) return null;
     return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
   }, [model]);
-  const marketTradingState = (0, import_react19.useMemo)(() => {
-    return (0, import_hooks42.resolveMarketTradingState)(scopedMarketForCard);
+  const marketTradingState = (0, import_react20.useMemo)(() => {
+    return (0, import_hooks43.resolveMarketTradingState)(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = (0, import_react19.useMemo)(() => {
+  const marketDetailsTabs = (0, import_react20.useMemo)(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = (0, import_react19.useState)(
+  const [selectedTab, setSelectedTab] = (0, import_react20.useState)(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = (0, import_react19.useState)(controlledIsOpened);
-  (0, import_react19.useEffect)(() => {
+  const [isOpened, setIsOpened] = (0, import_react20.useState)(controlledIsOpened);
+  (0, import_react20.useEffect)(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
-  const selectedTimeRange = config.chart.selectedChartTimeRange;
-  const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
-  const [chartRangeOverride, setChartRangeOverride] = (0, import_react19.useState)(null);
-  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = (0, import_react19.useState)("line");
-  const scopedSelectedOutcomeState = (0, import_react19.useMemo)(() => {
+  const scopedSelectedOutcomeState = (0, import_react20.useMemo)(() => {
     if (!model) {
       return {
         outcomeId: null,
@@ -11655,17 +12142,9 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedOutcomeId
   ]);
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
-  const selectedOutcomeLabel = (_c = scopedSelectedOutcomeState.outcomeLabel) != null ? _c : null;
+  const selectedOutcomeLabel = (_d = scopedSelectedOutcomeState.outcomeLabel) != null ? _d : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react19.useState)(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react19.useState)(selectedOutcomeLabel);
-  (0, import_react19.useEffect)(() => {
-    if (!isOpened) return;
-    if (selectedOutcomeLabel) {
-      setChartOutcomeLabel(selectedOutcomeLabel);
-    }
-  }, [isOpened]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -11689,31 +12168,38 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
-  const headerOutcomeItems = (0, import_react19.useMemo)(() => {
+  const venueMarketIdByVenue = (0, import_react20.useMemo)(
+    () => buildVenueMarketIdByVenue(model == null ? void 0 : model.market.venueMarkets),
+    [model]
+  );
+  const headerOutcomeItems = (0, import_react20.useMemo)(() => {
     if (!model) return [];
-    const items = resolveHeaderOutcomeItems(model.market.venueMarkets, scopedMarketForCard);
+    if (headerOutcomeItemsOverride) return headerOutcomeItemsOverride;
+    const items = resolveHeaderOutcomeItems(
+      model.market.venueMarkets,
+      scopedMarketForCard,
+      headerOutcomeVariant
+    );
     return items.map((item) => {
       var _a2;
       const fallbackPrice = midpointsFallback == null ? void 0 : midpointsFallback.get(item.id);
-      const bestVenue = getDisplayOutcomeVenue({
+      const candidate = selectBestOutcomeCandidate({
         outcomeId: item.id,
         outcomeLabel: item.label,
         selection: tradeSide,
-        bestMidpointVenue: clusterBestMidpointVenue,
-        bestVenueByOutcomeId: clusterVenueByOutcomeId,
-        bestPriceVenuesByOutcomeId: clusterBestPriceVenuesByOutcomeId,
-        fallbackVenue: midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id)
-      });
-      const outcomeBestPrice = getDisplayOutcomePrice({
-        outcomeId: item.id,
-        outcomeLabel: item.label,
-        selection: tradeSide,
-        bestPrices: clusterBestPrices,
+        live: wsBestCandidates.get(item.id),
+        restBest: clusterBestPricesRest.get(item.id),
+        restBestVenues: clusterBestPriceVenuesByOutcomeId.get(item.id),
+        restMidpoint: clusterBestMidpointsByOutcomeId.get(item.id),
+        restMidpointVenue: clusterVenueByOutcomeId.get(item.id),
         bestMidpoint: clusterBestMidpoint,
-        bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
-        livePrices: wsLivePrices,
-        fallbackPrice
+        bestMidpointVenue: clusterBestMidpointVenue,
+        staticPrice: fallbackPrice,
+        staticVenue: midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id),
+        venueMarketIdByVenue
       });
+      const bestVenue = candidate == null ? void 0 : candidate.venue;
+      const outcomeBestPrice = candidate == null ? void 0 : candidate.price;
       if (isResolvedMarket) {
         const isWinningOutcome = item.id === ((_a2 = marketTradingState.winningOutcome) == null ? void 0 : _a2.id);
         return __spreadValues(__spreadProps(__spreadValues({}, item), {
@@ -11731,19 +12217,22 @@ var MarketDetailsContent = ({
     clusterBestMidpoint,
     clusterBestMidpointVenue,
     clusterBestMidpointsByOutcomeId,
-    clusterBestPrices,
+    clusterBestPricesRest,
     clusterBestPriceVenuesByOutcomeId,
+    headerOutcomeItemsOverride,
     model,
     scopedMarketForCard,
+    headerOutcomeVariant,
     clusterVenueByOutcomeId,
     isResolvedMarket,
-    (_d = marketTradingState.winningOutcome) == null ? void 0 : _d.id,
+    (_e = marketTradingState.winningOutcome) == null ? void 0 : _e.id,
     midpointsFallback,
     midpointsFallbackVenues,
     tradeSide,
-    wsLivePrices
+    venueMarketIdByVenue,
+    wsBestCandidates
   ]);
-  const headlineProbability = (0, import_react19.useMemo)(() => {
+  const headlineProbability = (0, import_react20.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
     if (isResolvedMarket) {
@@ -11768,7 +12257,7 @@ var MarketDetailsContent = ({
       fallbackPrice: (_c2 = midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)) != null ? _c2 : displayOutcome.price
     });
     if (referencePrice != null) return referencePrice;
-    return (_d2 = (0, import_hooks42.findLivePriceById)(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
+    return (_d2 = (0, import_hooks43.findLivePriceById)(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
   }, [
     clusterBestMidpoint,
     clusterBestMidpointsByOutcomeId,
@@ -11779,7 +12268,7 @@ var MarketDetailsContent = ({
     midpointsFallback,
     wsLivePrices
   ]);
-  const selectedOutcomesByVenue = (0, import_react19.useMemo)(() => {
+  const selectedOutcomesByVenue = (0, import_react20.useMemo)(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -11791,74 +12280,10 @@ var MarketDetailsContent = ({
       selectedOutcomeId
     });
   }, [model, selectedOutcomeLabel, selectedOutcomeId]);
-  const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
-  const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
-  const chartOutcomesByVenue = (0, import_react19.useMemo)(() => {
-    if (!model) return [];
-    return resolveChartVenueOutcomes({
-      eligibleVenueOutcomes: collectEligibleVenueOutcomes({
-        venueMarkets: model.market.venueMarkets,
-        selectedOutcomeLabel: resolvedChartOutcomeLabel,
-        selectedOutcomeId: chartSelectedOutcomeId
-      }),
-      livePrices
-    });
-  }, [livePrices, model, resolvedChartOutcomeLabel, chartSelectedOutcomeId]);
-  const chartEnabled = isOpened && effectiveSelectedTab === "graph";
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
-  const rollingWindow = (0, import_hooks42.useRollingChartWindow)({ range: effectiveChartTimeRange });
-  const primaryVenueMarketId = (_f = (_e = selectedOutcomesByVenue[0]) == null ? void 0 : _e.market.id) != null ? _f : null;
-  const primaryOutcomeId = (_h = (_g = selectedOutcomesByVenue[0]) == null ? void 0 : _g.outcome.id) != null ? _h : null;
-  const chartPrimaryOutcomeId = (_j = (_i = chartOutcomesByVenue[0]) == null ? void 0 : _i.outcome.id) != null ? _j : null;
-  const chartVenueOutcomeIds = (0, import_react19.useMemo)(() => {
-    return chartOutcomesByVenue.map((item) => item.outcome.id);
-  }, [chartOutcomesByVenue]);
-  const {
-    data: marketChartData,
-    isLoading: isMarketChartLoading,
-    error: marketChartError,
-    refetch: refetchMarketChart
-  } = (0, import_hooks42.useMarketChart)({
-    marketId: chartPrimaryOutcomeId,
-    venueMarketIds: chartVenueOutcomeIds,
-    interval: rollingWindow.interval,
-    startTs: rollingWindow.startTs * 1e3,
-    endTs: rollingWindow.endTs * 1e3,
-    enabled: chartEnabled && !!chartPrimaryOutcomeId,
-    live,
-    refetchIntervalMs: rollingWindow.refetchIntervalMs,
-    // Stable cache key per user-selected range so tab/page revisits hit cache
-    // instead of refetching on every bucket-boundary rollover.
-    rangeKey: rollingWindow.range
-  });
-  const hasAutoFallenBackRangeRef = (0, import_react19.useRef)(false);
-  (0, import_react19.useEffect)(() => {
-    hasAutoFallenBackRangeRef.current = false;
-    setChartRangeOverride(null);
-  }, [chartPrimaryOutcomeId]);
-  (0, import_react19.useEffect)(() => {
-    if (!shouldAutoFallbackToAllRange({
-      chartData: marketChartData,
-      isLoading: isMarketChartLoading,
-      error: marketChartError,
-      currentRange: effectiveChartTimeRange,
-      hasAlreadyFallenBack: hasAutoFallenBackRangeRef.current,
-      // Ignore stale bars outside the rolling window — see comment on the
-      // matching effect in event-list-item-details.
-      domainStartTs: rollingWindow.startTs
-    })) {
-      return;
-    }
-    hasAutoFallenBackRangeRef.current = true;
-    setChartRangeOverride("ALL");
-  }, [
-    marketChartData,
-    isMarketChartLoading,
-    marketChartError,
-    effectiveChartTimeRange,
-    rollingWindow.startTs
-  ]);
-  const marketOrderbookResult = (0, import_hooks42.useMarketOrderbook)({
+  const primaryVenueMarketId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.market.id) != null ? _g : null;
+  const primaryOutcomeId = (_i = (_h = selectedOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  const marketOrderbookResult = (0, import_hooks43.useMarketOrderbook)({
     marketId: primaryVenueMarketId,
     enabled: orderBookEnabled && !!primaryVenueMarketId,
     venueOutcomes: selectedOutcomesByVenue.map((item) => ({
@@ -11867,14 +12292,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = (0, import_react19.useMemo)(() => {
+  const marketOrderbookDataById = (0, import_react20.useMemo)(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = (0, import_react19.useMemo)(() => {
+  const aggregatedOrderbookRows = (0, import_react20.useMemo)(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -11882,7 +12307,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = (0, import_react19.useMemo)(() => {
+  const unifiedEntries = (0, import_react20.useMemo)(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -11890,7 +12315,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = (0, import_react19.useMemo)(() => {
+  const orderbookSnapshotKey = (0, import_react20.useMemo)(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -11898,52 +12323,7 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = (0, import_react19.useMemo)(() => {
-    return filterChartVenueOutcomesByRenderableVenues({
-      chartData: marketChartData,
-      venueOutcomes: chartOutcomesByVenue
-    });
-  }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = (0, import_react19.useMemo)(() => {
-    var _a2, _b2, _c2, _d2;
-    const baseColor = resolveSeriesColor(
-      (_d2 = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d2 : "polymarket",
-      0,
-      isDarkTheme
-    );
-    const domainStartTs = rollingWindow.startTs;
-    return resolveMarketChartDisplaySeries({
-      chartData: marketChartData,
-      selectedVenue: selectedGraphVenue,
-      transformProbability: (value) => value
-    }).map((seriesItem) => {
-      return {
-        id: `${resolvedChartOutcomeLabel != null ? resolvedChartOutcomeLabel : "graph"}-${seriesItem.venue}-${chartPrimaryOutcomeId != null ? chartPrimaryOutcomeId : "chart"}`,
-        venue: selectedGraphVenue != null ? selectedGraphVenue : seriesItem.venue,
-        color: seriesItem.venue === "aggregate" ? baseColor : resolveSeriesColor(seriesItem.venue, 0, isDarkTheme),
-        // Constrain to the rolling [nowSec - rangeSeconds, …] domain so stale
-        // bars don't bleed in across a range shrink or long mount.
-        points: seriesItem.points.filter((point) => point.time >= domainStartTs)
-      };
-    });
-  }, [
-    isDarkTheme,
-    chartPrimaryOutcomeId,
-    marketChartData,
-    rollingWindow.startTs,
-    selectedGraphVenue,
-    resolvedChartOutcomeLabel,
-    chartAvailableOutcomesByVenue,
-    chartOutcomesByVenue
-  ]);
-  const graphLiveState = (0, import_react19.useMemo)(() => {
-    return resolveMarketChartLiveState({
-      chartData: marketChartData,
-      selectedVenue: selectedGraphVenue,
-      transformProbability: (value) => value
-    });
-  }, [marketChartData, selectedGraphVenue]);
-  const otherRows = (0, import_react19.useMemo)(() => {
+  const otherRows = (0, import_react20.useMemo)(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -11953,7 +12333,6 @@ var MarketDetailsContent = ({
   const isSnapshotUnavailableError = typeof orderBookError === "object" && orderBookError != null && "message" in orderBookError && typeof orderBookError.message === "string" && /^snapshot unavailable for\s+\S+/i.test(orderBookError.message);
   const orderBookErrorDescription = isSnapshotUnavailableError ? labels.marketDetails.orderBookUnavailableDescription : typeof orderBookError === "object" && orderBookError != null && "message" in orderBookError && typeof orderBookError.message === "string" && orderBookError.message.trim().length > 0 ? orderBookError.message : labels.marketDetails.orderBookUnavailableDescription;
   const hasNoOrderBook = isOrderBookNotFound && !isMarketResolved || !isOrderBookLoading && !hasOrderBookError && (selectedOutcomesByVenue.length === 0 || aggregatedOrderbookRows.hasNoOrderBook);
-  const hasChartError = !!marketChartError;
   const selectHeaderOutcome = ({
     item,
     shouldNotifyOutcomeSelect = false
@@ -11961,7 +12340,7 @@ var MarketDetailsContent = ({
     var _a2, _b2;
     if (isOutcomeSelectionLocked) return;
     if (item == null ? void 0 : item.id) {
-      const targetMarket = (_a2 = model == null ? void 0 : model.market.venueMarkets.find(
+      const targetMarket = (_a2 = venueMarkets.find(
         (venueMarket) => venueMarket.venueMarketOutcomes.some((outcome) => outcome.id === item.id)
       )) != null ? _a2 : null;
       if ((targetMarket == null ? void 0 : targetMarket.id) && targetMarket.id !== (tradingContext == null ? void 0 : tradingContext.selectedMarketId)) {
@@ -12003,23 +12382,14 @@ var MarketDetailsContent = ({
     if (!marketId) return;
     onOpenChange == null ? void 0 : onOpenChange(marketId);
   };
-  const handleGraphVenueToggle = (venue) => {
-    setSelectedGraphVenue((currentVenue) => {
-      if (currentVenue === venue) return null;
-      return venue;
-    });
-  };
   const handleRetryOrderBook = () => {
     void refetchOrderBook();
   };
-  const handleRetryMarketChart = () => {
-    void refetchMarketChart();
-  };
   const orderbookState = marketTradingState.isTradingDisabled ? {
     kind: "disabled",
     title: marketStatePresentation.title,
     description: marketStatePresentation.description,
-    icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { name: marketStatePresentation.iconName, className: "h-5 w-5", "aria-hidden": "true" })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: marketStatePresentation.iconName, className: "h-5 w-5", "aria-hidden": "true" })
   } : isOrderBookLoading ? { kind: "loading" } : hasOrderBookError ? {
     kind: "error",
     title: labels.marketDetails.orderBookUnavailableTitle,
@@ -12034,22 +12404,27 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  (0, import_react19.useEffect)(() => {
-    if (!selectedGraphVenue) {
-      return;
-    }
-    if (chartAvailableOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
-      return;
-    }
-    setSelectedGraphVenue(null);
-  }, [selectedGraphVenue, chartAvailableOutcomesByVenue]);
   if (marketId && !resolvedMarket) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(MarketDetailsNotFoundState, { ariaLabel, classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      MarketDetailsNotFoundState,
+      {
+        marketId,
+        ariaLabel,
+        classNames
+      }
+    );
   }
   if (!model) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(MarketDetailsUnavailableState, { ariaLabel, classNames });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      MarketDetailsUnavailableState,
+      {
+        marketId,
+        ariaLabel,
+        classNames
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
     Card,
     {
       className: cn(
@@ -12060,9 +12435,10 @@ var MarketDetailsContent = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
           "div",
           {
+            "data-market-id": marketId || void 0,
             className: cn(
               "agg-market-card-header",
               "flex flex-col items-stretch gap-3 px-5 py-3 md:flex-row md:flex-nowrap md:items-center md:justify-between",
@@ -12070,7 +12446,7 @@ var MarketDetailsContent = ({
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                 "button",
                 {
                   className: cn(
@@ -12084,17 +12460,17 @@ var MarketDetailsContent = ({
                   "aria-controls": detailsContentId,
                   "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
+                      !compactHeader ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                         RemoteImage,
                         {
-                          src: (0, import_hooks42.optimizedImageUrl)(model.image, 60),
+                          src: (0, import_hooks43.optimizedImageUrl)(model.image, 60),
                           alt: "",
                           className: "agg-market-image size-12 rounded-agg-lg object-cover md:size-[60px]"
                         }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex min-w-24 flex-col", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { content: model.title, side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                      ) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex min-w-24 flex-col", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { content: model.title, side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           Typography,
                           {
                             as: "h3",
@@ -12103,16 +12479,16 @@ var MarketDetailsContent = ({
                             children: model.title
                           }
                         ) }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                           Typography,
                           {
                             variant: "label",
                             className: "agg-market-meta truncate text-agg-muted-foreground",
-                            children: model.subtitle
+                            children: subtitleOverride != null ? subtitleOverride : model.subtitle
                           }
                         ) }),
-                        marketTradingState.isTradingDisabled && marketTradingState.kind !== "resolved" && !isUpcomingMarket ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "mt-2 flex flex-wrap items-center gap-2 justify-center md:justify-start", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+                        marketTradingState.isTradingDisabled && marketTradingState.kind !== "resolved" && !isUpcomingMarket ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "mt-2 flex flex-wrap items-center gap-2 justify-center md:justify-start", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                             "span",
                             {
                               className: cn(
@@ -12120,7 +12496,7 @@ var MarketDetailsContent = ({
                                 resolveTradingStateBadgeClassName(marketTradingState.kind)
                               ),
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                                   Icon,
                                   {
                                     name: marketStatePresentation.iconName,
@@ -12128,20 +12504,20 @@ var MarketDetailsContent = ({
                                     className: "h-3.5 w-3.5"
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: marketStatePresentation.badgeLabel })
+                                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { children: marketStatePresentation.badgeLabel })
                               ]
                             }
                           ),
-                          marketStatePresentation.timestampLabel ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.timestampLabel }) : null,
-                          marketStatePresentation.winningOutcomeLabel ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.winningOutcomeLabel }) : null
+                          marketStatePresentation.timestampLabel ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.timestampLabel }) : null,
+                          marketStatePresentation.winningOutcomeLabel ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.winningOutcomeLabel }) : null
                         ] }) : null
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { as: "div", variant: "heading", className: "agg-market-headline shrink-0", children: formatProbabilityPercent(headlineProbability, formatPercent) })
+                    !compactHeader ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { as: "div", variant: "heading", className: "agg-market-headline shrink-0", children: formatProbabilityPercent(headlineProbability, formatPercent) }) : null
                   ]
                 }
               ),
-              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -12154,7 +12530,7 @@ var MarketDetailsContent = ({
                     "border-transparent bg-agg-secondary-hover"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                       Icon,
                       {
                         name: marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "check-circle" : "cross-circle",
@@ -12165,10 +12541,10 @@ var MarketDetailsContent = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
                   ]
                 }
-              ) }) : isUpcomingMarket ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+              ) }) : isUpcomingMarket ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -12177,7 +12553,7 @@ var MarketDetailsContent = ({
                     resolveTradingStateBadgeClassName(marketTradingState.kind)
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                       Icon,
                       {
                         name: marketStatePresentation.iconName,
@@ -12186,10 +12562,10 @@ var MarketDetailsContent = ({
                         "aria-hidden": "true"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: marketStatePresentation.badgeLabel })
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { children: marketStatePresentation.badgeLabel })
                   ]
                 }
-              ) }) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                 "div",
                 {
                   className: "agg-outcomes flex w-full flex-wrap gap-2 md:w-auto md:shrink-0 md:flex-nowrap",
@@ -12198,9 +12574,10 @@ var MarketDetailsContent = ({
                   onKeyDown: (eventToHandle) => handleOutcomeKeyDown(eventToHandle),
                   children: headerOutcomeItems.map((item) => {
                     const isActiveOutcome = item.id === selectedOutcomeId;
-                    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                       MarketDetailsOutcomeButton,
                       {
+                        enforceFixedWidth: headerOutcomeVariant != null,
                         item,
                         isSelected: isActiveOutcome,
                         enableAnimations: config.features.enableAnimations,
@@ -12224,7 +12601,8 @@ var MarketDetailsContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        headerAccessory ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "agg-market-card-accessory border-t border-agg-separator", children: headerAccessory }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           "div",
           {
             id: detailsContentId,
@@ -12238,9 +12616,9 @@ var MarketDetailsContent = ({
               isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
             ),
             "aria-hidden": !isOpened,
-            children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -12254,8 +12632,8 @@ var MarketDetailsContent = ({
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    !isResolvedMarket ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    !isResolvedMarket ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                         Tabs,
                         {
                           ariaLabel: labels.marketDetails.tabsAria,
@@ -12266,10 +12644,10 @@ var MarketDetailsContent = ({
                           className: "agg-market-tabs w-full px-5"
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "h-px w-full bg-agg-separator" })
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "h-px w-full bg-agg-separator" })
                     ] }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: cn("agg-market-card-body p-0", classNames == null ? void 0 : classNames.content), children: [
-                      effectiveSelectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: cn("agg-market-card-body p-0", classNames == null ? void 0 : classNames.content), children: [
+                      effectiveSelectedTab === "order-book" ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                         OrderbookWithStates,
                         {
                           state: orderbookState,
@@ -12295,159 +12673,29 @@ var MarketDetailsContent = ({
                           wrapperClassName: classNames == null ? void 0 : classNames.orderBook
                         }
                       ) : null,
-                      effectiveSelectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: cn("agg-price-chart flex flex-col gap-5 p-5", classNames == null ? void 0 : classNames.graph), children: [
-                        hasChartError ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                          StateMessage,
-                          {
-                            title: labels.marketDetails.chartUnavailableTitle,
-                            description: labels.marketDetails.chartUnavailableDescription,
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(WarningIcon, {}),
-                            onAction: handleRetryMarketChart,
-                            classNames: { root: "min-h-[248px] px-5 py-10 md:min-h-[272px]" }
-                          }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                          LineChart,
-                          {
-                            series: graphSeries,
-                            height: 260,
-                            isLoading: isMarketChartLoading,
-                            chartType: selectedChartType,
-                            liveCandle: selectedChartType === "candlestick" ? (_k = graphLiveState.liveCandle) != null ? _k : void 0 : void 0,
-                            lineValue: graphLiveState.lineValue,
-                            classNames: { root: "agg-chart-region w-full" },
-                            showSeriesControls: chartAvailableOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
-                            renderSeriesControls: () => {
-                              var _a2, _b2, _c2, _d2;
-                              return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
-                                  var _a3;
-                                  const probability = formatProbabilityPercent(
-                                    (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
-                                    formatPercent
-                                  );
-                                  const isActiveVenue = selectedGraphVenue === item.venue;
-                                  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      "aria-label": `${item.venue} ${probability}`,
-                                      "aria-pressed": isActiveVenue,
-                                      className: cn(
-                                        "agg-market-venue",
-                                        "cursor-pointer",
-                                        "inline-flex items-center gap-2 rounded-agg-full border px-4 py-2",
-                                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary-hover",
-                                        isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
-                                      ),
-                                      onClick: (e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        handleGraphVenueToggle(item.venue);
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
-                                      ]
-                                    },
-                                    `${item.market.id}-${item.outcome.id}`
-                                  );
-                                }) }),
-                                !isOutcomeSelectionLocked ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                                  SwitchButton,
-                                  {
-                                    ariaLabel: labels.marketDetails.outcomeSelectorAria,
-                                    className: "agg-outcome-switch w-full shrink-0 md:w-fit",
-                                    value: (_d2 = (_c2 = (_a2 = headerOutcomeItems.find(
-                                      (outcome) => outcome.label === resolvedChartOutcomeLabel
-                                    )) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = headerOutcomeItems[0]) == null ? void 0 : _b2.id) != null ? _d2 : "",
-                                    onValueChange: (outcomeId) => {
-                                      const outcome = headerOutcomeItems.find(
-                                        (headerOutcomeItem) => headerOutcomeItem.id === outcomeId
-                                      );
-                                      if (!outcome) return;
-                                      setChartOutcomeLabel(outcome.label);
-                                    },
-                                    options: headerOutcomeItems.map((outcome) => {
-                                      var _a3, _b3;
-                                      const price = outcome.probability;
-                                      return {
-                                        value: outcome.id,
-                                        label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price)}`,
-                                        ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`
-                                      };
-                                    })
-                                  }
-                                ) : null
-                              ] });
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-                          "div",
-                          {
-                            className: cn(
-                              "agg-chart-footer",
-                              "flex flex-row justify-between gap-2 text-agg-sm leading-agg-5 text-agg-muted-foreground md:flex-row md:items-center md:justify-between",
-                              classNames == null ? void 0 : classNames.footer
-                            ),
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { children: typeof model.market.volume !== "number" ? labels.marketDetails.volumeUnavailable : model.market.volume > 0 ? `${config.formatting.formatCompactCurrency(model.market.volume)} ${labels.marketDetails.meta.volumeSuffix}` : "" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                                  ChartTypeSwitch,
-                                  {
-                                    className: "agg-chart-type-switch shrink-0",
-                                    value: selectedChartType,
-                                    onValueChange: setSelectedChartType
-                                  }
-                                ),
-                                /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                                  "span",
-                                  {
-                                    "aria-hidden": "true",
-                                    className: "hidden h-4 w-px bg-agg-separator md:block"
-                                  }
-                                ),
-                                import_hooks42.CHART_TIME_RANGES.map((timeRange) => {
-                                  const isActive = effectiveChartTimeRange === timeRange;
-                                  const isDisabled = isResolvedMarket && timeRange !== "ALL";
-                                  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      disabled: isDisabled,
-                                      className: cn(
-                                        "agg-chart-time-range-trigger",
-                                        "cursor-pointer text-agg-sm leading-agg-5",
-                                        isDisabled && "cursor-not-allowed opacity-50",
-                                        isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
-                                      ),
-                                      "aria-pressed": isActive,
-                                      "aria-disabled": isDisabled,
-                                      onClick: (e) => {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        if (isDisabled) return;
-                                        setChartRangeOverride(null);
-                                        setSelectedTimeRange(timeRange);
-                                      },
-                                      children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
-                                    },
-                                    timeRange
-                                  );
-                                })
-                              ] })
-                            ]
-                          }
-                        )
-                      ] }) : null,
-                      effectiveSelectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-market-meta flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "agg-market-meta-list grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+                      isOpened && effectiveSelectedTab === "graph" ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                        MarketDetailsGraphPanel,
+                        {
+                          venueMarkets: model.market.venueMarkets,
+                          selectedOutcomeLabel,
+                          selectedOutcomeId,
+                          livePrices,
+                          wsLivePrices,
+                          headerOutcomeItems,
+                          isResolvedMarket,
+                          isOutcomeSelectionLocked,
+                          volume: model.market.volume,
+                          live,
+                          classNames: { graph: classNames == null ? void 0 : classNames.graph, footer: classNames == null ? void 0 : classNames.footer }
+                        }
+                      ) : null,
+                      effectiveSelectedTab === "other" ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "agg-market-meta flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "agg-market-meta-list grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
                         "div",
                         {
                           className: "agg-market-meta-row flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
                         row.label
@@ -12465,9 +12713,9 @@ var MarketDetailsContent = ({
 };
 var MarketDetails = (_a) => {
   var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
-  const labels = (0, import_hooks42.useLabels)();
+  const labels = (0, import_hooks43.useLabels)();
   if (props.isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       Skeleton,
       {
         view: "market-details-minified",
@@ -12477,7 +12725,7 @@ var MarketDetails = (_a) => {
     );
   }
   if ("venueMarkets" in props && props.venueMarkets) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened,
@@ -12489,7 +12737,7 @@ var MarketDetails = (_a) => {
     );
   }
   const { classNames: fallbackClassNames } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(MarketDetailsUnavailableState, { classNames: fallbackClassNames });
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MarketDetailsUnavailableState, { classNames: fallbackClassNames });
 };
 MarketDetails.displayName = "MarketDetails";
 var AFFIRMATIVE_WINNER_LABELS = /* @__PURE__ */ new Set(["yes", "up", "buy", "long", "true"]);
@@ -12520,13 +12768,13 @@ var resolveIsResolvedEvent = (sourceMarkets, eventTradingState) => {
     return eventTradingState.kind === "resolved";
   }
   if (sourceMarkets.length === 0) return false;
-  return sourceMarkets.every((market) => (0, import_hooks42.resolveMarketTradingState)(market).kind === "resolved");
+  return sourceMarkets.every((market) => (0, import_hooks43.resolveMarketTradingState)(market).kind === "resolved");
 };
 var resolveResolvedWinnerMarketId = (sourceMarkets, eventTradingState) => {
   var _a, _b, _c, _d, _e;
   const preferredMarket = (_a = eventTradingState == null ? void 0 : eventTradingState.primaryMarket) != null ? _a : null;
   if (preferredMarket && sourceMarkets.some((market) => market.id === preferredMarket.id)) {
-    if ((0, import_hooks42.resolveMarketTradingState)(preferredMarket).kind === "resolved") {
+    if ((0, import_hooks43.resolveMarketTradingState)(preferredMarket).kind === "resolved") {
       return preferredMarket.id;
     }
   }
@@ -12546,24 +12794,25 @@ var MarketDetailsList = ({
   midpointsResult
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks42.useLabels)();
-  const tradingContext = (0, import_hooks42.useEventTradingContext)();
+  const labels = (0, import_hooks43.useLabels)();
+  const tradingContext = (0, import_hooks43.useEventTradingContext)();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = (0, import_react19.useState)(null);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react19.useState)(false);
+  const [expandedMarketId, setExpandedMarketId] = (0, import_react20.useState)(null);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react20.useState)(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
     isLoading,
     error
-  } = (0, import_hooks42.useVenueMarkets)({
+  } = (0, import_hooks43.useVenueMarkets)({
     venueEventId: resolvedEventId,
     enabled: !providedMarkets && !!resolvedEventId,
-    status: import_hooks42.MarketStatus.open,
-    sortBy: "yesPrice",
-    sortDir: "desc"
+    status: import_hooks43.MarketStatus.open
+    // No explicit sortBy: event-scoped /venue-markets sorts by the event's
+    // type-aware order (structureOrderBy), matching the home-card top-3 and the
+    // markets-under-an-event ordering. Passing sortBy here would override it.
   });
-  const sourceMarkets = (0, import_react19.useMemo)(() => {
+  const sourceMarkets = (0, import_react20.useMemo)(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -12571,10 +12820,10 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = (0, import_react19.useMemo)(() => {
+  const isResolvedEvent = (0, import_react20.useMemo)(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = (0, import_react19.useMemo)(() => {
+  const groupedMarkets = (0, import_react20.useMemo)(() => {
     if (sourceMarkets.length === 0) {
       return {
         primary: [],
@@ -12596,7 +12845,7 @@ var MarketDetailsList = ({
     const resolved = [];
     const closed = [];
     sourceMarkets.forEach((market) => {
-      const marketStateKind = (0, import_hooks42.resolveMarketTradingState)(market).kind;
+      const marketStateKind = (0, import_hooks43.resolveMarketTradingState)(market).kind;
       if (marketStateKind === "resolved") {
         resolved.push(market);
         return;
@@ -12614,21 +12863,21 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = (0, import_react19.useMemo)(() => {
+  const visibleResolvedMarkets = (0, import_react20.useMemo)(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = (0, import_react19.useMemo)(() => {
+  const displayedMarkets = (0, import_react20.useMemo)(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const midpointEligibleMarkets = (0, import_react19.useMemo)(() => {
+  const midpointEligibleMarkets = (0, import_react20.useMemo)(() => {
     return displayedMarkets.filter(
-      (market) => (0, import_hooks42.resolveMarketTradingState)(market).kind !== "resolved"
+      (market) => (0, import_hooks43.resolveMarketTradingState)(market).kind !== "resolved"
     );
   }, [displayedMarkets]);
-  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks42.useViewportMidpoints)(midpointEligibleMarkets);
-  (0, import_react19.useEffect)(() => {
+  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks43.useViewportMidpoints)(midpointEligibleMarkets);
+  (0, import_react20.useEffect)(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -12637,7 +12886,7 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -12646,7 +12895,7 @@ var MarketDetailsList = ({
       return;
     }
     const fallbackSelectableMarket = displayedMarkets.find(
-      (market) => !(0, import_hooks42.resolveMarketTradingState)(market).isTradingDisabled
+      (market) => !(0, import_hooks43.resolveMarketTradingState)(market).isTradingDisabled
     );
     if (!fallbackSelectableMarket) {
       return;
@@ -12654,7 +12903,7 @@ var MarketDetailsList = ({
     if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
     setExpandedMarketId(null);
@@ -12668,11 +12917,11 @@ var MarketDetailsList = ({
     setExpandedMarketId(marketId);
     onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(marketId);
     if (marketId === selectedMarketId) return;
-    if ((0, import_hooks42.resolveMarketTradingState)(market).isTradingDisabled) return;
+    if ((0, import_hooks43.resolveMarketTradingState)(market).isTradingDisabled) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(market.id, market);
   };
   if (!hasPrefetchedMarkets && isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       Skeleton,
       {
         view: "market-details-minified",
@@ -12682,29 +12931,29 @@ var MarketDetailsList = ({
     );
   }
   if (!hasPrefetchedMarkets && error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       StateMessage,
       {
         title: labels.marketDetails.unavailableTitle,
         description: labels.marketDetails.unavailableDescription,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(SearchEmptyIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(SearchEmptyIcon, {}),
         classNames: { root: "min-h-[280px] md:min-h-[320px]" }
       }
     );
   }
   if (displayedMarkets.length === 0 && !shouldShowResolvedToggle) {
     const hasSourceMarkets = sourceMarkets.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       StateMessage,
       {
         title: hasSourceMarkets ? isResolvedEvent ? labels.markets.emptyResolved : labels.markets.emptyNoOpen : labels.marketDetails.notFoundTitle,
         description: hasSourceMarkets ? void 0 : labels.marketDetails.notFoundDescription,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(SearchEmptyIcon, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(SearchEmptyIcon, {}),
         classNames: { root: "min-h-[280px] md:min-h-[320px]" }
       }
     );
   }
-  const renderMarketCard = (market) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  const renderMarketCard = (market) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     MarketDetails,
     {
       marketId: market.id,
@@ -12731,9 +12980,9 @@ var MarketDetailsList = ({
       midpointsResult
     }
   ) }, market.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
     groupedMarkets.primary.map((market) => renderMarketCard(market)),
-    shouldShowResolvedToggle ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    shouldShowResolvedToggle ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       Button,
       {
         variant: "tertiary",
@@ -12743,7 +12992,7 @@ var MarketDetailsList = ({
           setAreResolvedMarketsVisible((isVisible) => !isVisible);
         },
         "aria-expanded": areResolvedMarketsVisible,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           Icon,
           {
             name: areResolvedMarketsVisible ? "chevron-up" : "chevron-down",
@@ -12761,14 +13010,14 @@ var MarketDetailsList = ({
 MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
-var import_hooks44 = require("@agg-build/hooks");
+var import_hooks45 = require("@agg-build/hooks");
 var import_sdk14 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/events/list/category-sidebar.tsx
-var import_react20 = require("react");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var rowBase = cn(
   "flex min-h-11 w-full items-center gap-3 rounded-[6px] px-3 py-3",
   "text-left text-agg-sm font-agg-normal leading-agg-5",
@@ -12790,7 +13039,7 @@ var CategorySidebar = ({
   onToggleCategory
 }) => {
   const isDrilledIn = categoryPath.length > 0;
-  const sortedBaseChildren = (0, import_react20.useMemo)(() => {
+  const sortedBaseChildren = (0, import_react21.useMemo)(() => {
     var _a;
     if (!baseCategoryId) return [];
     const children = [...(_a = childrenByParentId.get(baseCategoryId)) != null ? _a : []];
@@ -12810,7 +13059,7 @@ var CategorySidebar = ({
   }) => {
     var _a, _b;
     const hasKnownChildren = ((_b = (_a = childrenByParentId.get(entry.id)) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "button",
       {
         type: "button",
@@ -12818,8 +13067,8 @@ var CategorySidebar = ({
         className: isSelected ? selectedRowClassName : idleRowClassName,
         onClick,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
             Icon,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -12827,7 +13076,7 @@ var CategorySidebar = ({
               color: "currentColor",
               className: "shrink-0 text-agg-muted-foreground"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
         ]
       },
       entry.id
@@ -12845,27 +13094,27 @@ var CategorySidebar = ({
     const hasKnownChildren = childCategories.length > 0;
     const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
     const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full flex-col", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex w-full flex-col", children: [
       renderRow({
         entry,
         isExpanded,
         isSelected,
         onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         "div",
         {
           className: cn(
             "grid transition-[grid-template-rows] duration-150 ease-in-out motion-reduce:transition-none",
             isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
         }
       )
     ] }, category.id);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "button",
       {
         type: "button",
@@ -12873,8 +13122,8 @@ var CategorySidebar = ({
         className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
         onClick: onSelectAll,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
         ]
       }
     ),
@@ -12884,8 +13133,8 @@ var CategorySidebar = ({
 CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
-var import_hooks43 = require("@agg-build/hooks");
-var import_react21 = require("react");
+var import_hooks44 = require("@agg-build/hooks");
+var import_react22 = require("react");
 
 // src/events/list/event-list.constants.ts
 var import_sdk13 = require("@agg-build/sdk");
@@ -12952,16 +13201,16 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Icon,
     {
       name: tab.iconName,
@@ -12971,14 +13220,14 @@ var renderTabIcon = (tab, isActive) => {
   );
 };
 var useEventListTabs = (tabs) => {
-  const labels = (0, import_hooks43.useLabels)();
-  const { disabledVenues } = (0, import_hooks43.useAppConfig)();
-  const { isLocationBlocked } = (0, import_hooks43.useGeoBlock)();
-  return (0, import_react21.useMemo)(() => {
+  const labels = (0, import_hooks44.useLabels)();
+  const { disabledVenues } = (0, import_hooks44.useAppConfig)();
+  const { isLocationBlocked } = (0, import_hooks44.useGeoBlock)();
+  return (0, import_react22.useMemo)(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
-      const availabilityState = (0, import_hooks43.getVenueAvailabilityState)({
+      const availabilityState = (0, import_hooks44.getVenueAvailabilityState)({
         venueId: tab.venueLogo,
         disabledVenues,
         isLocationBlocked
@@ -13003,13 +13252,13 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const fallbackTab = resolvedTabs.find((tab) => !tab.disabled);
     if (!fallbackTab) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
     onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = (0, import_react21.useMemo)(() => {
+  const items = (0, import_react22.useMemo)(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -13021,7 +13270,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Tabs,
     {
       ariaLabel,
@@ -13036,7 +13285,7 @@ var EventListTabs = ({
 EventListTabs.displayName = "EventListTabs";
 
 // src/events/list/index.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -13074,45 +13323,45 @@ var EventList = ({
   stateRef
 }) => {
   var _a, _b, _c, _d, _e;
-  const labels = (0, import_hooks44.useLabels)();
-  const { disabledVenues } = (0, import_hooks44.useAppConfig)();
+  const labels = (0, import_hooks45.useLabels)();
+  const { disabledVenues } = (0, import_hooks45.useAppConfig)();
   const {
-    features: { enableVenueEventDiscoveryFilters }
-  } = (0, import_hooks44.useSdkUiConfig)();
+    features: { enableVenueEventDiscoveryFilters, showSportsMarkets }
+  } = (0, import_hooks45.useSdkUiConfig)();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = (0, import_react22.useMemo)(
-    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks44.getVisibleVenueIdsByConfig)(import_sdk14.VENUES, disabledVenues),
+  const visibleVenues = (0, import_react23.useMemo)(
+    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks45.getVisibleVenueIdsByConfig)(import_sdk14.VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = (0, import_react22.useState)(
+  const [activeTabValue, setActiveTabValue] = (0, import_react23.useState)(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const [selectedSort, setSelectedSort] = (0, import_react22.useState)("volume24hr");
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react22.useState)(false);
-  const [categoryPath, setCategoryPath] = (0, import_react22.useState)([]);
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react22.useState)(() => /* @__PURE__ */ new Set());
-  const sortItems = (0, import_react22.useMemo)(() => {
+  const [selectedSort, setSelectedSort] = (0, import_react23.useState)("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react23.useState)(false);
+  const [categoryPath, setCategoryPath] = (0, import_react23.useState)([]);
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react23.useState)(() => /* @__PURE__ */ new Set());
+  const sortItems = (0, import_react23.useMemo)(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -13122,20 +13371,20 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!isDiscoveryFiltersEnabled) return;
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [baseCategoryId, isDiscoveryFiltersEnabled]);
-  const { categories: topLevelCategories } = (0, import_hooks44.useCategories)({
+  const { categories: topLevelCategories } = (0, import_hooks45.useCategories)({
     queryKeyScope: "event-list-top-categories",
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = (0, import_react22.useMemo)(() => {
+  const sortedTopLevelCategories = (0, import_react23.useMemo)(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = (0, import_react22.useMemo)(() => {
+  const baseCategoryChildPrefetchIds = (0, import_react23.useMemo)(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...sortedTopLevelCategories.map((category) => category.id),
@@ -13143,13 +13392,13 @@ var EventList = ({
       ])
     );
   }, [categoryPath, sortedTopLevelCategories]);
-  const { childrenByParentId: baseChildrenByParentId } = (0, import_hooks44.useCategoryChildren)({
+  const { childrenByParentId: baseChildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = (0, import_react22.useMemo)(() => {
+  const visibleChildPrefetchIds = (0, import_react23.useMemo)(() => {
     var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
     if (baseCategoryId) {
@@ -13164,13 +13413,13 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
-  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks44.useCategoryChildren)({
+  const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = (0, import_react22.useMemo)(() => {
+  const visibleGrandchildPrefetchIds = (0, import_react23.useMemo)(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -13180,13 +13429,13 @@ var EventList = ({
     }
     return Array.from(ids);
   }, [categoryPath, visibleChildrenByParentId]);
-  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks44.useCategoryChildren)({
+  const { childrenByParentId: visibleGrandchildrenByParentId } = (0, import_hooks45.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = (0, import_react22.useMemo)(() => {
+  const childrenByParentId = (0, import_react23.useMemo)(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
@@ -13194,33 +13443,33 @@ var EventList = ({
     ]);
   }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
   const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && baseCategoryId !== null && (((_e = (_d = childrenByParentId.get(baseCategoryId)) == null ? void 0 : _d.length) != null ? _e : 0) > 0 || categoryPath.length > 0);
-  const baseCategoryEventCount = (0, import_react22.useMemo)(() => {
+  const baseCategoryEventCount = (0, import_react23.useMemo)(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
   }, [baseCategoryId, sortedTopLevelCategories]);
-  const resolvedCategoryIds = (0, import_react22.useMemo)(() => {
+  const resolvedCategoryIds = (0, import_react23.useMemo)(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
     return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
   }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = (0, import_react22.useMemo)(() => {
+  const sortQueryParams = (0, import_react23.useMemo)(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = (0, import_react22.useMemo)(() => {
+  const activeTab = (0, import_react23.useMemo)(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = (0, import_react22.useMemo)(() => {
+  const venues = (0, import_react23.useMemo)(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = (0, import_react22.useMemo)(() => {
+  const matchStatus = (0, import_react23.useMemo)(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = (0, import_react22.useMemo)(() => {
+  const resolvedMaxVisibleItems = (0, import_react23.useMemo)(() => {
     if (!Number.isFinite(maxVisibleItems)) return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const endDateFrom = (0, import_react22.useMemo)(() => {
+  const endDateFrom = (0, import_react23.useMemo)(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -13236,34 +13485,38 @@ var EventList = ({
     isFetchingNextPage,
     isPlaceholderData,
     loadedPageCount
-  } = (0, import_hooks44.useVenueEvents)({
+  } = (0, import_hooks45.useVenueEvents)({
     queryKeyScope: "event-list",
     venues,
     search,
     categoryIds: resolvedCategoryIds,
     matchStatus,
     limit: requestLimit,
-    status: [import_hooks44.MarketStatus.open],
+    status: [import_hooks45.MarketStatus.open],
     sortBy: sortQueryParams.sortBy,
     sortDir: sortQueryParams.sortDir,
     endDateFrom,
+    // Fold same-venue companion events into one tile per game when the sports
+    // markets experience is enabled (the sports event-detail view loads the
+    // folded companions via aggKey). Gated on the same flag as that view.
+    grouped: showSportsMarkets,
     initialPages: initialLoadedPageCount
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = (0, import_react22.useMemo)(() => {
+  const filteredEvents = (0, import_react23.useMemo)(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = (0, import_react22.useMemo)(() => {
+  const groupedEvents = (0, import_react23.useMemo)(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = (0, import_react22.useMemo)(() => {
+  const orderedEvents = (0, import_react23.useMemo)(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = (0, import_react22.useMemo)(() => {
+  const tileEvents = (0, import_react23.useMemo)(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -13271,8 +13524,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const loadMoreRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -13323,7 +13576,7 @@ var EventList = ({
     onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       Skeleton,
       {
         view: "event-list",
@@ -13332,8 +13585,8 @@ var EventList = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
       "header",
       {
         className: cn(
@@ -13342,9 +13595,9 @@ var EventList = ({
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
               EventListTabs,
               {
                 ariaLabel: labels.eventList.tabsAria(title2),
@@ -13354,7 +13607,7 @@ var EventList = ({
                 overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -13370,8 +13623,8 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         EventListTabs,
         {
           ariaLabel: labels.eventList.tabsAria(title2),
@@ -13381,7 +13634,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -13392,23 +13645,23 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         "button",
         {
           type: "button",
           className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] border-2 border-agg-primary bg-agg-secondary text-agg-foreground cursor-pointer",
           "aria-label": labels.eventList.subcategoriesOpenAria,
           onClick: () => setIsSubcategoriesModalOpen(true),
-          children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "agg-sidebar max-h-[calc(100vh-19rem)] overflow-y-auto rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "agg-sidebar max-h-[calc(100vh-19rem)] overflow-y-auto rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             CategorySidebar,
             {
               baseCategoryId,
@@ -13421,7 +13674,7 @@ var EventList = ({
               onToggleCategory: handleToggleSubcategory
             }
           ) }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
             "div",
             {
               className: cn(
@@ -13432,7 +13685,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                   EventListItem,
                   {
                     event,
@@ -13443,11 +13696,11 @@ var EventList = ({
                     onMarketClick,
                     getMarketHref,
                     href: getEventHref == null ? void 0 : getEventHref(event),
-                    marketStatus: import_hooks44.MarketStatus.open
+                    marketStatus: import_hooks45.MarketStatus.open
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                   EventListItem,
                   {
                     isLoading: true,
@@ -13457,20 +13710,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                isError ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -13479,7 +13732,7 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       Modal.Container,
       {
         classNames: {
@@ -13488,20 +13741,20 @@ var EventList = ({
           content: "items-end p-0 pointer-events-none",
           container: "w-full max-w-none border-0 bg-transparent shadow-none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
               Dialog2.Close,
               {
                 className: "flex cursor-pointer items-center justify-center rounded-full p-1 text-agg-muted-foreground hover:bg-agg-secondary-hover",
                 "aria-label": labels.common.close,
-                children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(CloseIcon, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(CloseIcon, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
             CategorySidebar,
             {
               baseCategoryId,
@@ -13517,7 +13770,7 @@ var EventList = ({
         ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";
@@ -13537,6 +13790,7 @@ EventList.displayName = "EventList";
   formatProbabilityCents,
   mergeVenueOutcomeOrderbooks,
   orderbookRowLimitDefault,
+  resolveEventDetailsSyncKey,
   resolveOrderBookRows,
   resolveUnifiedOrderBookEntries,
   useCenterOrderbookSpread