@agg-build/ui 2.1.2 → 2.1.4

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,8 +5492,23 @@ var VenueLogo = ({
 };
 VenueLogo.displayName = "VenueLogo";
 
-// src/events/shared/format-event-title.ts
+// 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;
@@ -5513,28 +5529,19 @@ var isSportEvent = (categories, structureType) => {
     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 formatEventDateSuffix = (value, locale) => {
-  if (!(0, import_dayjs2.default)(value).isValid()) return null;
-  return new Intl.DateTimeFormat(locale, {
-    month: "long",
-    day: "numeric",
-    timeZone: "UTC"
-  }).format(new Date(value));
-};
 var formatEventTitleWithDateSuffix = ({
   title: title2,
   categories,
   structureType,
   gameStartTime,
-  endDate,
-  locale = "en-US"
+  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 = formatEventDateSuffix(dateSource, locale);
+  const formattedDate = formatSportsEventTimeEt(dateSource);
   if (!formattedDate) return resolvedTitle;
   const suffix = ` - ${formattedDate}`;
   if (resolvedTitle.endsWith(suffix)) return resolvedTitle;
@@ -5759,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,
@@ -6382,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, {
@@ -6397,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",
@@ -6456,7 +6461,7 @@ var StateMessage = ({
           ]
         }
       )
-    }
+    })
   );
 };
 StateMessage.displayName = "StateMessage";
@@ -7300,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,
@@ -7426,8 +7431,7 @@ var EventListItemContent = ({
     categories: event.categories,
     structureType: event.structureType,
     gameStartTime: event.gameStartTime,
-    endDate: event.endDate,
-    locale: config.general.locale
+    endDate: event.endDate
   });
   const resolvedImage = event.image;
   const visibleVenueLogos = (0, import_react10.useMemo)(() => {
@@ -7454,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)(() => {
@@ -8467,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);
@@ -8519,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)
@@ -8562,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
     };
   });
 };
@@ -8591,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}`
   ];
@@ -8642,8 +8691,7 @@ var buildMarketDetailsModel = ({
   title: title2,
   image,
   formatCompactCurrency,
-  labels,
-  tradableVenues
+  labels
 }) => {
   var _a, _b, _c, _d;
   const market = resolveMarketFromVenueMarkets(venueMarkets, marketId);
@@ -8658,8 +8706,7 @@ var buildMarketDetailsModel = ({
     venueMarkets: market.venueMarkets,
     volume: resolvedVolume,
     formatCompactCurrency,
-    labels,
-    tradableVenues
+    labels
   });
   const outcomeLabels = resolveDisplayOutcomeLabels(
     resolveMarketDetailsOutcomeLabels(market.venueMarkets).map((outcome) => outcome.label)
@@ -9752,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];
@@ -9761,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
@@ -10567,17 +10615,9 @@ var EventListItemDetailsContent = ({
       categories: event.categories,
       structureType: event.structureType,
       gameStartTime: event.gameStartTime,
-      endDate: event.endDate,
-      locale: config.general.locale
+      endDate: event.endDate
     });
-  }, [
-    config.general.locale,
-    event.categories,
-    event.gameStartTime,
-    event.endDate,
-    event.structureType,
-    event.title
-  ]);
+  }, [event.categories, event.gameStartTime, event.endDate, event.structureType, event.title]);
   return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
     Card,
     {
@@ -10839,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");
@@ -11483,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(
@@ -11506,6 +11549,7 @@ var getMarketDetailsOutcomeButtonClassNames = ({
 var MarketDetailsOutcomeButton = ({
   ariaControls,
   enableAnimations,
+  enforceFixedWidth,
   isSelected,
   item,
   onSelect
@@ -11513,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",
@@ -11526,46 +11574,380 @@ 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 MarketDetailsGraphPanel = ({
+  venueMarkets,
+  selectedOutcomeLabel,
+  selectedOutcomeId,
+  livePrices,
+  wsLivePrices,
+  headerOutcomeItems,
+  isResolvedMarket,
+  isOutcomeSelectionLocked,
+  volume,
+  live,
+  classNames
+}) => {
+  var _a, _b, _c;
+  const config = (0, import_hooks42.useSdkUiConfig)();
+  const {
+    formatting: { formatPercent, formatCompactCurrency },
+    general: { theme }
+  } = config;
+  const isDarkTheme = theme === "dark";
+  const labels = (0, import_hooks42.useLabels)();
+  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
+    });
+  }, [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_hooks42.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  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,
@@ -11573,24 +11955,26 @@ var MarketDetailsUnavailableState = ({
       ),
       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 })
+      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_hooks42.useLabels)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  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_runtime129.jsx)(SearchEmptyIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(SearchEmptyIcon, {}),
       classNames: { root: "min-h-[280px] md:min-h-[320px]" }
     }
   );
@@ -11608,6 +11992,11 @@ var MarketDetailsContent = ({
   ariaLabel,
   classNames,
   otherContent,
+  headerAccessory,
+  compactHeader = false,
+  subtitleOverride,
+  headerOutcomeVariant,
+  headerOutcomeItemsOverride,
   onOutcomeSelect,
   live,
   midpointsFallback,
@@ -11615,31 +12004,30 @@ var MarketDetailsContent = ({
   suppressOutcomeFallbackSelection,
   midpointsResult
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-  const config = (0, import_hooks42.useSdkUiConfig)();
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const config = (0, import_hooks43.useSdkUiConfig)();
   const {
     features: { enableAnimations },
-    formatting: { formatPercent },
-    general: { theme }
+    formatting: { formatPercent }
   } = config;
-  const isDarkTheme = theme === "dark";
-  const labels = (0, import_hooks42.useLabels)();
-  const tradingContext = (0, import_hooks42.useEventTradingContext)();
-  const detailsContentId = (0, import_react19.useId)();
+  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 wsLivePrices = (0, import_hooks42.useLiveOutcomePrices)(venueMarkets);
-  const wsBestPrices = (0, import_hooks42.useLiveBestPrices)(venueMarkets);
-  const wsBestCandidates = (0, import_hooks42.useLiveBestPriceCandidates)(venueMarkets);
-  const resolvedMarket = (0, import_react19.useMemo)(() => {
+  const resolvedMarket = (0, import_react20.useMemo)(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const scopedResolvedMarket = (0, import_react19.useMemo)(() => {
+  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_hooks42.resolveMarketTradingState)(scopedResolvedMarket).kind === "resolved";
-  (0, import_hooks42.useEventOrderbookData)(
+  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
   );
@@ -11659,20 +12047,19 @@ var MarketDetailsContent = ({
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
   const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
-  const clusterBestPrices = (0, import_react19.useMemo)(
-    () => (0, import_hooks42.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
+  const clusterBestPrices = (0, import_react20.useMemo)(
+    () => (0, import_hooks43.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
     [clusterBestPricesRest, wsBestPrices]
   );
   const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
-  const clusterMidpointMarkets = (0, import_react19.useMemo)(() => {
+  const clusterMidpointMarkets = (0, import_react20.useMemo)(() => {
     var _a2;
     if (!resolvedMarket) return [];
     return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
   }, [resolvedMarket]);
-  const tradableVenues = (0, import_react19.useMemo)(() => {
+  const tradableVenues = (0, import_react20.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 : []) {
@@ -11682,28 +12069,20 @@ var MarketDetailsContent = ({
         }
       }
     }
+    if (set.size === 0) return null;
     return set;
   }, [clusterMidpointMarkets, clusterMidpoints]);
-  const model = (0, import_react19.useMemo)(() => {
+  const model = (0, import_react20.useMemo)(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
       title: title2,
       image,
       formatCompactCurrency: config.formatting.formatCompactCurrency,
-      labels,
-      tradableVenues
+      labels
     });
-  }, [
-    config.formatting.formatCompactCurrency,
-    venueMarkets,
-    image,
-    labels,
-    marketId,
-    title2,
-    tradableVenues
-  ]);
-  const livePrices = (0, import_react19.useMemo)(() => {
+  }, [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) {
@@ -11718,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,
@@ -11770,15 +12144,7 @@ var MarketDetailsContent = ({
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
   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;
@@ -11802,13 +12168,18 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
-  const venueMarketIdByVenue = (0, import_react19.useMemo)(
+  const venueMarketIdByVenue = (0, import_react20.useMemo)(
     () => buildVenueMarketIdByVenue(model == null ? void 0 : model.market.venueMarkets),
     [model]
   );
-  const headerOutcomeItems = (0, import_react19.useMemo)(() => {
+  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);
@@ -11848,8 +12219,10 @@ var MarketDetailsContent = ({
     clusterBestMidpointsByOutcomeId,
     clusterBestPricesRest,
     clusterBestPriceVenuesByOutcomeId,
+    headerOutcomeItemsOverride,
     model,
     scopedMarketForCard,
+    headerOutcomeVariant,
     clusterVenueByOutcomeId,
     isResolvedMarket,
     (_e = marketTradingState.winningOutcome) == null ? void 0 : _e.id,
@@ -11859,7 +12232,7 @@ var MarketDetailsContent = ({
     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) {
@@ -11884,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,
@@ -11895,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,
@@ -11907,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 = (_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 chartPrimaryOutcomeId = (_k = (_j = chartOutcomesByVenue[0]) == null ? void 0 : _j.outcome.id) != null ? _k : 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 marketOrderbookResult = (0, import_hooks43.useMarketOrderbook)({
     marketId: primaryVenueMarketId,
     enabled: orderBookEnabled && !!primaryVenueMarketId,
     venueOutcomes: selectedOutcomesByVenue.map((item) => ({
@@ -11983,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
@@ -11998,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,
@@ -12006,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;
@@ -12014,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]);
@@ -12069,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
@@ -12077,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)) {
@@ -12119,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,
@@ -12150,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(
@@ -12176,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",
@@ -12186,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(
@@ -12200,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",
@@ -12219,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(
@@ -12236,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,
@@ -12244,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(
@@ -12270,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",
@@ -12281,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(
@@ -12293,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,
@@ -12302,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",
@@ -12314,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,
@@ -12340,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,
@@ -12354,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(
@@ -12370,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,
@@ -12382,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,
@@ -12411,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" ? (_l = graphLiveState.liveCandle) != null ? _l : 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
@@ -12581,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",
@@ -12593,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,
@@ -12605,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"]);
@@ -12636,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;
     }
   }
@@ -12662,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);
@@ -12687,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: [],
@@ -12712,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;
@@ -12730,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;
@@ -12753,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;
@@ -12762,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;
@@ -12770,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);
@@ -12784,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",
@@ -12798,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,
@@ -12847,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",
@@ -12859,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",
@@ -12877,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",
@@ -12906,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 : []];
@@ -12926,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",
@@ -12934,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",
@@ -12943,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
@@ -12961,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",
@@ -12989,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 })
         ]
       }
     ),
@@ -13000,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");
@@ -13068,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,
@@ -13087,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
@@ -13119,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 {
@@ -13137,7 +13270,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Tabs,
     {
       ariaLabel,
@@ -13152,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",
@@ -13190,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" })
       }
     ];
   }, [
@@ -13238,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),
@@ -13259,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) {
@@ -13280,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) {
@@ -13296,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,
@@ -13310,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();
@@ -13352,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);
@@ -13387,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;
@@ -13439,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",
@@ -13448,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(
@@ -13458,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),
@@ -13470,7 +13607,7 @@ var EventList = ({
                 overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -13486,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),
@@ -13497,7 +13634,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -13508,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,
@@ -13537,7 +13674,7 @@ var EventList = ({
               onToggleCategory: handleToggleSubcategory
             }
           ) }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
             "div",
             {
               className: cn(
@@ -13548,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,
@@ -13559,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,
@@ -13573,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
               ]
@@ -13595,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: {
@@ -13604,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,
@@ -13633,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";
@@ -13653,6 +13790,7 @@ EventList.displayName = "EventList";
   formatProbabilityCents,
   mergeVenueOutcomeOrderbooks,
   orderbookRowLimitDefault,
+  resolveEventDetailsSyncKey,
   resolveOrderBookRows,
   resolveUnifiedOrderBookEntries,
   useCenterOrderbookSpread