@agg-build/ui 2.1.2 → 2.1.4

package/dist/{chunk-JJDYOBVG.mjs → chunk-TBZWRUFB.mjs}

@@ -22,7 +22,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-5RBHMMY3.mjs";
+} from "./chunk-R2YNZJZ3.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -73,7 +73,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-TBD3N4T4.mjs";
+} from "./chunk-VP76G6PN.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -233,7 +233,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,
@@ -359,8 +359,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 = useMemo(() => {
@@ -387,8 +386,10 @@ var EventListItemContent = ({
   } = 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 = useMemo(() => {
@@ -2509,17 +2510,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__ */ jsxs4(
     Card,
     {
@@ -3253,7 +3246,6 @@ OrderbookWithStates.displayName = "OrderbookWithStates";
 
 // src/events/market-details/index.tsx
 import {
-  CHART_TIME_RANGES as CHART_TIME_RANGES2,
   findLivePriceById,
   MarketStatus,
   mergeBestPricesPreferringLive as mergeBestPricesPreferringLive2,
@@ -3261,18 +3253,16 @@ import {
   resolveMarketTradingState,
   useEventTradingContext as useEventTradingContext2,
   useEventOrderbookData as useEventOrderbookData2,
-  useLabels as useLabels6,
+  useLabels as useLabels7,
   useLiveBestPrices as useLiveBestPrices2,
   useLiveBestPriceCandidates,
   useLiveOutcomePrices as useLiveOutcomePrices2,
-  useMarketChart as useMarketChart2,
   useMarketOrderbook,
-  useRollingChartWindow as useRollingChartWindow2,
-  useSdkUiConfig as useSdkUiConfig3,
+  useSdkUiConfig as useSdkUiConfig4,
   useVenueMarkets as useVenueMarkets2,
   useViewportMidpoints
 } from "@agg-build/hooks";
-import { useEffect as useEffect4, useId, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useId, useMemo as useMemo7, useState as useState5 } from "react";
 
 // src/events/shared/select-best-outcome.ts
 var normalizeOutcomeLabel2 = (label) => {
@@ -3356,14 +3346,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(
@@ -3379,6 +3372,7 @@ var getMarketDetailsOutcomeButtonClassNames = ({
 var MarketDetailsOutcomeButton = ({
   ariaControls,
   enableAnimations,
+  enforceFixedWidth,
   isSelected,
   item,
   onSelect
@@ -3386,10 +3380,14 @@ var MarketDetailsOutcomeButton = ({
   var _a;
   const classNames = getMarketDetailsOutcomeButtonClassNames({
     enableAnimations,
+    enforceFixedWidth,
     isSelected,
-    tone: item.tone
+    tone: item.tone,
+    variant: item.variant
   });
-  return /* @__PURE__ */ jsxs6(
+  const itemLabel = (_a = item.title) != null ? _a : item.label;
+  const isLineVariant = item.variant === "line";
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -3399,46 +3397,386 @@ 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__ */ jsxs6("div", { className: "flex min-w-0 max-w-full items-center justify-center gap-1.5 overflow-hidden", children: [
         /* @__PURE__ */ jsx8(VenueLogo, { venue: item.venue, size: "small" }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex flex-row items-center gap-1 min-w-0", children: [
-          /* @__PURE__ */ jsx8(
-            Typography,
-            {
-              as: "span",
-              variant: isSelected ? "body-strong" : "body",
-              className: cn("whitespace-nowrap truncate", classNames.text),
-              children: (_a = item.title) != null ? _a : item.label
-            }
-          ),
-          /* @__PURE__ */ jsx8(
-            Typography,
-            {
-              as: "span",
-              variant: isSelected ? "body-strong" : "body",
-              className: cn(classNames.text),
-              children: formatProbabilityCents(item.probability)
-            }
-          )
-        ] })
-      ]
+        /* @__PURE__ */ jsx8(
+          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__ */ jsx8(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("shrink-0 whitespace-nowrap", classNames.text),
+            children: item.lineLabel
+          }
+        ) : null,
+        /* @__PURE__ */ jsx8(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("shrink-0 whitespace-nowrap", classNames.text),
+            children: formatProbabilityCents(item.probability)
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs6("div", { className: "inline-flex max-w-full items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ jsx8(VenueLogo, { venue: item.venue, size: "small" }),
+        /* @__PURE__ */ jsx8(
+          Typography,
+          {
+            as: "span",
+            variant: isSelected ? "body-strong" : "body",
+            className: cn("truncate whitespace-nowrap text-center", classNames.text),
+            children: itemLabel
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          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/market-details-graph-panel.tsx
+import {
+  CHART_TIME_RANGES as CHART_TIME_RANGES2,
+  useLabels as useLabels6,
+  useMarketChart as useMarketChart2,
+  useRollingChartWindow as useRollingChartWindow2,
+  useSdkUiConfig as useSdkUiConfig3
+} from "@agg-build/hooks";
+import { useEffect as useEffect4, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var MarketDetailsGraphPanel = ({
+  venueMarkets,
+  selectedOutcomeLabel,
+  selectedOutcomeId,
+  livePrices,
+  wsLivePrices,
+  headerOutcomeItems,
+  isResolvedMarket,
+  isOutcomeSelectionLocked,
+  volume,
+  live,
+  classNames
+}) => {
+  var _a, _b, _c;
+  const config = useSdkUiConfig3();
+  const {
+    formatting: { formatPercent, formatCompactCurrency },
+    general: { theme }
+  } = config;
+  const isDarkTheme = theme === "dark";
+  const labels = useLabels6();
+  const selectedTimeRange = config.chart.selectedChartTimeRange;
+  const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
+  const [chartRangeOverride, setChartRangeOverride] = useState4(null);
+  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
+  const [selectedChartType, setSelectedChartType] = useState4("line");
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
+  const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
+  const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
+  const chartOutcomesByVenue = useMemo6(() => {
+    return resolveChartVenueOutcomes({
+      eligibleVenueOutcomes: collectEligibleVenueOutcomes({
+        venueMarkets,
+        selectedOutcomeLabel: resolvedChartOutcomeLabel,
+        selectedOutcomeId: chartSelectedOutcomeId
+      }),
+      livePrices
+    });
+  }, [livePrices, venueMarkets, resolvedChartOutcomeLabel, chartSelectedOutcomeId]);
+  const rollingWindow = useRollingChartWindow2({ range: effectiveChartTimeRange });
+  const chartPrimaryOutcomeId = (_b = (_a = chartOutcomesByVenue[0]) == null ? void 0 : _a.outcome.id) != null ? _b : null;
+  const chartVenueOutcomeIds = useMemo6(() => {
+    return chartOutcomesByVenue.map((item) => item.outcome.id);
+  }, [chartOutcomesByVenue]);
+  const {
+    data: marketChartData,
+    isLoading: isMarketChartLoading,
+    error: marketChartError,
+    refetch: refetchMarketChart
+  } = useMarketChart2({
+    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 = useRef5(false);
+  useEffect4(() => {
+    hasAutoFallenBackRangeRef.current = false;
+    setChartRangeOverride(null);
+  }, [chartPrimaryOutcomeId]);
+  useEffect4(() => {
+    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 = useMemo6(() => {
+    return filterChartVenueOutcomesByRenderableVenues({
+      chartData: marketChartData,
+      venueOutcomes: chartOutcomesByVenue
+    });
+  }, [chartOutcomesByVenue, marketChartData]);
+  const graphSeries = useMemo6(() => {
+    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 = useMemo6(() => {
+    return resolveMarketChartLiveState({
+      chartData: marketChartData,
+      selectedVenue: selectedGraphVenue,
+      transformProbability: (value) => value
+    });
+  }, [marketChartData, selectedGraphVenue]);
+  const hasChartError = !!marketChartError;
+  useEffect4(() => {
+    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__ */ jsxs7("div", { className: cn("agg-price-chart flex flex-col gap-5 p-5", classNames == null ? void 0 : classNames.graph), children: [
+    hasChartError ? /* @__PURE__ */ jsx9(
+      StateMessage,
+      {
+        title: labels.marketDetails.chartUnavailableTitle,
+        description: labels.marketDetails.chartUnavailableDescription,
+        icon: /* @__PURE__ */ jsx9(WarningIcon, {}),
+        onAction: handleRetryMarketChart,
+        classNames: { root: "min-h-[248px] px-5 py-10 md:min-h-[272px]" }
+      }
+    ) : /* @__PURE__ */ jsx9(
+      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__ */ jsxs7("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
+            /* @__PURE__ */ jsx9("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__ */ jsxs7(
+                "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__ */ jsx9(VenueLogo, { venue: item.venue, size: "small" }),
+                    /* @__PURE__ */ jsx9("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
+                  ]
+                },
+                `${item.market.id}-${item.outcome.id}`
+              );
+            }) }),
+            !isOutcomeSelectionLocked ? /* @__PURE__ */ jsx9(
+              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__ */ jsxs7(
+      "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__ */ jsx9("span", { children: typeof volume !== "number" ? labels.marketDetails.volumeUnavailable : volume > 0 ? `${formatCompactCurrency(volume)} ${labels.marketDetails.meta.volumeSuffix}` : "" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
+            /* @__PURE__ */ jsx9(
+              ChartTypeSwitch,
+              {
+                className: "agg-chart-type-switch shrink-0",
+                value: selectedChartType,
+                onValueChange: setSelectedChartType
+              }
+            ),
+            /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
+            CHART_TIME_RANGES2.map((timeRange) => {
+              const isActive = effectiveChartTimeRange === timeRange;
+              const isDisabled = isResolvedMarket && timeRange !== "ALL";
+              return /* @__PURE__ */ jsx9(
+                "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
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var MarketDetailsUnavailableState = ({
+  marketId,
   ariaLabel,
   classNames
 }) => {
-  const labels = useLabels6();
-  return /* @__PURE__ */ jsx9(
+  const labels = useLabels7();
+  return /* @__PURE__ */ jsx10(
     Card,
     {
+      "data-market-id": marketId || void 0,
       className: cn(
         "group/agg-market-card agg-market-card-unavailable",
         marketDetailsBaseCardClassName,
@@ -3446,24 +3784,26 @@ var MarketDetailsUnavailableState = ({
       ),
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
-      children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ jsx9(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
+      children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1 p-5", children: [
+        /* @__PURE__ */ jsx10(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx10(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
 };
 var MarketDetailsNotFoundState = ({
+  marketId,
   ariaLabel: _ariaLabel,
   classNames: _classNames
 }) => {
-  const labels = useLabels6();
-  return /* @__PURE__ */ jsx9(
+  const labels = useLabels7();
+  return /* @__PURE__ */ jsx10(
     StateMessage,
     {
+      "data-market-id": marketId || void 0,
       title: labels.marketDetails.notFoundTitle,
       description: labels.marketDetails.notFoundDescription,
-      icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+      icon: /* @__PURE__ */ jsx10(SearchEmptyIcon, {}),
       classNames: { root: "min-h-[280px] md:min-h-[320px]" }
     }
   );
@@ -3481,6 +3821,11 @@ var MarketDetailsContent = ({
   ariaLabel,
   classNames,
   otherContent,
+  headerAccessory,
+  compactHeader = false,
+  subtitleOverride,
+  headerOutcomeVariant,
+  headerOutcomeItemsOverride,
   onOutcomeSelect,
   live,
   midpointsFallback,
@@ -3488,25 +3833,24 @@ var MarketDetailsContent = ({
   suppressOutcomeFallbackSelection,
   midpointsResult
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-  const config = useSdkUiConfig3();
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const config = useSdkUiConfig4();
   const {
     features: { enableAnimations },
-    formatting: { formatPercent },
-    general: { theme }
+    formatting: { formatPercent }
   } = config;
-  const isDarkTheme = theme === "dark";
-  const labels = useLabels6();
+  const labels = useLabels7();
   const tradingContext = useEventTradingContext2();
   const detailsContentId = useId();
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
-  const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
-  const wsBestPrices = useLiveBestPrices2(venueMarkets);
-  const wsBestCandidates = useLiveBestPriceCandidates(venueMarkets);
-  const resolvedMarket = useMemo6(() => {
+  const resolvedMarket = useMemo7(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const scopedResolvedMarket = useMemo6(() => {
+  const clusterVenueMarkets = resolvedMarket == null ? void 0 : resolvedMarket.venueMarkets;
+  const wsLivePrices = useLiveOutcomePrices2(clusterVenueMarkets);
+  const wsBestPrices = useLiveBestPrices2(clusterVenueMarkets);
+  const wsBestCandidates = useLiveBestPriceCandidates(clusterVenueMarkets);
+  const scopedResolvedMarket = useMemo7(() => {
     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;
@@ -3532,20 +3876,19 @@ var MarketDetailsContent = ({
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
   const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
-  const clusterBestPrices = useMemo6(
+  const clusterBestPrices = useMemo7(
     () => mergeBestPricesPreferringLive2(clusterBestPricesRest, wsBestPrices),
     [clusterBestPricesRest, wsBestPrices]
   );
   const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
-  const clusterMidpointMarkets = useMemo6(() => {
+  const clusterMidpointMarkets = useMemo7(() => {
     var _a2;
     if (!resolvedMarket) return [];
     return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
   }, [resolvedMarket]);
-  const tradableVenues = useMemo6(() => {
+  const tradableVenues = useMemo7(() => {
     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 : []) {
@@ -3555,28 +3898,20 @@ var MarketDetailsContent = ({
         }
       }
     }
+    if (set.size === 0) return null;
     return set;
   }, [clusterMidpointMarkets, clusterMidpoints]);
-  const model = useMemo6(() => {
+  const model = useMemo7(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
       title,
       image,
       formatCompactCurrency: config.formatting.formatCompactCurrency,
-      labels,
-      tradableVenues
+      labels
     });
-  }, [
-    config.formatting.formatCompactCurrency,
-    venueMarkets,
-    image,
-    labels,
-    marketId,
-    title,
-    tradableVenues
-  ]);
-  const livePrices = useMemo6(() => {
+  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
+  const livePrices = useMemo7(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
@@ -3591,37 +3926,32 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = useMemo6(() => {
+  const scopedMarketForCard = useMemo7(() => {
     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 = useMemo6(() => {
+  const marketTradingState = useMemo7(() => {
     return resolveMarketTradingState(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = useMemo6(() => {
+  const marketDetailsTabs = useMemo7(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = useState4(
+  const [selectedTab, setSelectedTab] = useState5(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = useState4(controlledIsOpened);
-  useEffect4(() => {
+  const [isOpened, setIsOpened] = useState5(controlledIsOpened);
+  useEffect5(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  useEffect4(() => {
+  useEffect5(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
-  const selectedTimeRange = config.chart.selectedChartTimeRange;
-  const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
-  const [chartRangeOverride, setChartRangeOverride] = useState4(null);
-  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = useState4("line");
-  const scopedSelectedOutcomeState = useMemo6(() => {
+  const scopedSelectedOutcomeState = useMemo7(() => {
     if (!model) {
       return {
         outcomeId: null,
@@ -3643,15 +3973,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] = useState4(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
-  useEffect4(() => {
-    if (!isOpened) return;
-    if (selectedOutcomeLabel) {
-      setChartOutcomeLabel(selectedOutcomeLabel);
-    }
-  }, [isOpened]);
-  useEffect4(() => {
+  useEffect5(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -3675,13 +3997,18 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
-  const venueMarketIdByVenue = useMemo6(
+  const venueMarketIdByVenue = useMemo7(
     () => buildVenueMarketIdByVenue(model == null ? void 0 : model.market.venueMarkets),
     [model]
   );
-  const headerOutcomeItems = useMemo6(() => {
+  const headerOutcomeItems = useMemo7(() => {
     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);
@@ -3721,8 +4048,10 @@ var MarketDetailsContent = ({
     clusterBestMidpointsByOutcomeId,
     clusterBestPricesRest,
     clusterBestPriceVenuesByOutcomeId,
+    headerOutcomeItemsOverride,
     model,
     scopedMarketForCard,
+    headerOutcomeVariant,
     clusterVenueByOutcomeId,
     isResolvedMarket,
     (_e = marketTradingState.winningOutcome) == null ? void 0 : _e.id,
@@ -3732,7 +4061,7 @@ var MarketDetailsContent = ({
     venueMarketIdByVenue,
     wsBestCandidates
   ]);
-  const headlineProbability = useMemo6(() => {
+  const headlineProbability = useMemo7(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
     if (isResolvedMarket) {
@@ -3768,7 +4097,7 @@ var MarketDetailsContent = ({
     midpointsFallback,
     wsLivePrices
   ]);
-  const selectedOutcomesByVenue = useMemo6(() => {
+  const selectedOutcomesByVenue = useMemo7(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -3780,73 +4109,9 @@ var MarketDetailsContent = ({
       selectedOutcomeId
     });
   }, [model, selectedOutcomeLabel, selectedOutcomeId]);
-  const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
-  const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
-  const chartOutcomesByVenue = useMemo6(() => {
-    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 = useRollingChartWindow2({ 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 = useMemo6(() => {
-    return chartOutcomesByVenue.map((item) => item.outcome.id);
-  }, [chartOutcomesByVenue]);
-  const {
-    data: marketChartData,
-    isLoading: isMarketChartLoading,
-    error: marketChartError,
-    refetch: refetchMarketChart
-  } = useMarketChart2({
-    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 = useRef5(false);
-  useEffect4(() => {
-    hasAutoFallenBackRangeRef.current = false;
-    setChartRangeOverride(null);
-  }, [chartPrimaryOutcomeId]);
-  useEffect4(() => {
-    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 = useMarketOrderbook({
     marketId: primaryVenueMarketId,
     enabled: orderBookEnabled && !!primaryVenueMarketId,
@@ -3856,14 +4121,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = useMemo6(() => {
+  const marketOrderbookDataById = useMemo7(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = useMemo6(() => {
+  const aggregatedOrderbookRows = useMemo7(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -3871,7 +4136,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = useMemo6(() => {
+  const unifiedEntries = useMemo7(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -3879,7 +4144,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = useMemo6(() => {
+  const orderbookSnapshotKey = useMemo7(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -3887,52 +4152,7 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = useMemo6(() => {
-    return filterChartVenueOutcomesByRenderableVenues({
-      chartData: marketChartData,
-      venueOutcomes: chartOutcomesByVenue
-    });
-  }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = useMemo6(() => {
-    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 = useMemo6(() => {
-    return resolveMarketChartLiveState({
-      chartData: marketChartData,
-      selectedVenue: selectedGraphVenue,
-      transformProbability: (value) => value
-    });
-  }, [marketChartData, selectedGraphVenue]);
-  const otherRows = useMemo6(() => {
+  const otherRows = useMemo7(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -3942,7 +4162,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
@@ -3950,7 +4169,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)) {
@@ -3992,23 +4211,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__ */ jsx9(Icon, { name: marketStatePresentation.iconName, className: "h-5 w-5", "aria-hidden": "true" })
+    icon: /* @__PURE__ */ jsx10(Icon, { name: marketStatePresentation.iconName, className: "h-5 w-5", "aria-hidden": "true" })
   } : isOrderBookLoading ? { kind: "loading" } : hasOrderBookError ? {
     kind: "error",
     title: labels.marketDetails.orderBookUnavailableTitle,
@@ -4023,22 +4233,27 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  useEffect4(() => {
-    if (!selectedGraphVenue) {
-      return;
-    }
-    if (chartAvailableOutcomesByVenue.some((item) => item.venue === selectedGraphVenue)) {
-      return;
-    }
-    setSelectedGraphVenue(null);
-  }, [selectedGraphVenue, chartAvailableOutcomesByVenue]);
   if (marketId && !resolvedMarket) {
-    return /* @__PURE__ */ jsx9(MarketDetailsNotFoundState, { ariaLabel, classNames });
+    return /* @__PURE__ */ jsx10(
+      MarketDetailsNotFoundState,
+      {
+        marketId,
+        ariaLabel,
+        classNames
+      }
+    );
   }
   if (!model) {
-    return /* @__PURE__ */ jsx9(MarketDetailsUnavailableState, { ariaLabel, classNames });
+    return /* @__PURE__ */ jsx10(
+      MarketDetailsUnavailableState,
+      {
+        marketId,
+        ariaLabel,
+        classNames
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     Card,
     {
       className: cn(
@@ -4049,9 +4264,10 @@ var MarketDetailsContent = ({
         classNames == null ? void 0 : classNames.root
       ),
       children: [
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8(
           "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",
@@ -4059,7 +4275,7 @@ var MarketDetailsContent = ({
               classNames == null ? void 0 : classNames.header
             ),
             children: [
-              /* @__PURE__ */ jsxs7(
+              /* @__PURE__ */ jsxs8(
                 "button",
                 {
                   className: cn(
@@ -4073,17 +4289,17 @@ var MarketDetailsContent = ({
                   "aria-controls": detailsContentId,
                   "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
-                      /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsxs8("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
+                      !compactHeader ? /* @__PURE__ */ jsx10(
                         RemoteImage,
                         {
                           src: optimizedImageUrl3(model.image, 60),
                           alt: "",
                           className: "agg-market-image size-12 rounded-agg-lg object-cover md:size-[60px]"
                         }
-                      ),
-                      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-24 flex-col", children: [
-                        /* @__PURE__ */ jsx9(Tooltip, { content: model.title, side: "top", children: /* @__PURE__ */ jsx9("div", { className: "min-w-0", children: /* @__PURE__ */ jsx9(
+                      ) : null,
+                      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-24 flex-col", children: [
+                        /* @__PURE__ */ jsx10(Tooltip, { content: model.title, side: "top", children: /* @__PURE__ */ jsx10("div", { className: "min-w-0", children: /* @__PURE__ */ jsx10(
                           Typography,
                           {
                             as: "h3",
@@ -4092,16 +4308,16 @@ var MarketDetailsContent = ({
                             children: model.title
                           }
                         ) }) }),
-                        /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx9(
+                        /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx10(
                           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__ */ jsxs7("div", { className: "mt-2 flex flex-wrap items-center gap-2 justify-center md:justify-start", children: [
-                          /* @__PURE__ */ jsxs7(
+                        marketTradingState.isTradingDisabled && marketTradingState.kind !== "resolved" && !isUpcomingMarket ? /* @__PURE__ */ jsxs8("div", { className: "mt-2 flex flex-wrap items-center gap-2 justify-center md:justify-start", children: [
+                          /* @__PURE__ */ jsxs8(
                             "span",
                             {
                               className: cn(
@@ -4109,7 +4325,7 @@ var MarketDetailsContent = ({
                                 resolveTradingStateBadgeClassName(marketTradingState.kind)
                               ),
                               children: [
-                                /* @__PURE__ */ jsx9(
+                                /* @__PURE__ */ jsx10(
                                   Icon,
                                   {
                                     name: marketStatePresentation.iconName,
@@ -4117,20 +4333,20 @@ var MarketDetailsContent = ({
                                     className: "h-3.5 w-3.5"
                                   }
                                 ),
-                                /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
+                                /* @__PURE__ */ jsx10("span", { children: marketStatePresentation.badgeLabel })
                               ]
                             }
                           ),
-                          marketStatePresentation.timestampLabel ? /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.timestampLabel }) : null,
-                          marketStatePresentation.winningOutcomeLabel ? /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.winningOutcomeLabel }) : null
+                          marketStatePresentation.timestampLabel ? /* @__PURE__ */ jsx10(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.timestampLabel }) : null,
+                          marketStatePresentation.winningOutcomeLabel ? /* @__PURE__ */ jsx10(Typography, { variant: "label", className: "text-agg-muted-foreground", children: marketStatePresentation.winningOutcomeLabel }) : null
                         ] }) : null
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsx9(Typography, { as: "div", variant: "heading", className: "agg-market-headline shrink-0", children: formatProbabilityPercent(headlineProbability, formatPercent) })
+                    !compactHeader ? /* @__PURE__ */ jsx10(Typography, { as: "div", variant: "heading", className: "agg-market-headline shrink-0", children: formatProbabilityPercent(headlineProbability, formatPercent) }) : null
                   ]
                 }
               ),
-              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ jsx9("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ jsxs7(
+              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ jsx10("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ jsxs8(
                 "span",
                 {
                   className: cn(
@@ -4143,7 +4359,7 @@ var MarketDetailsContent = ({
                     "border-transparent bg-agg-secondary-hover"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10(
                       Icon,
                       {
                         name: marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "check-circle" : "cross-circle",
@@ -4154,10 +4370,10 @@ var MarketDetailsContent = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx9(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
+                    /* @__PURE__ */ jsx10(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
                   ]
                 }
-              ) }) : isUpcomingMarket ? /* @__PURE__ */ jsx9("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ jsxs7(
+              ) }) : isUpcomingMarket ? /* @__PURE__ */ jsx10("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ jsxs8(
                 "span",
                 {
                   className: cn(
@@ -4166,7 +4382,7 @@ var MarketDetailsContent = ({
                     resolveTradingStateBadgeClassName(marketTradingState.kind)
                   ),
                   children: [
-                    /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsx10(
                       Icon,
                       {
                         name: marketStatePresentation.iconName,
@@ -4175,10 +4391,10 @@ var MarketDetailsContent = ({
                         "aria-hidden": "true"
                       }
                     ),
-                    /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
+                    /* @__PURE__ */ jsx10("span", { children: marketStatePresentation.badgeLabel })
                   ]
                 }
-              ) }) : /* @__PURE__ */ jsx9(
+              ) }) : /* @__PURE__ */ jsx10(
                 "div",
                 {
                   className: "agg-outcomes flex w-full flex-wrap gap-2 md:w-auto md:shrink-0 md:flex-nowrap",
@@ -4187,9 +4403,10 @@ var MarketDetailsContent = ({
                   onKeyDown: (eventToHandle) => handleOutcomeKeyDown(eventToHandle),
                   children: headerOutcomeItems.map((item) => {
                     const isActiveOutcome = item.id === selectedOutcomeId;
-                    return /* @__PURE__ */ jsx9(
+                    return /* @__PURE__ */ jsx10(
                       MarketDetailsOutcomeButton,
                       {
+                        enforceFixedWidth: headerOutcomeVariant != null,
                         item,
                         isSelected: isActiveOutcome,
                         enableAnimations: config.features.enableAnimations,
@@ -4213,7 +4430,8 @@ var MarketDetailsContent = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx9(
+        headerAccessory ? /* @__PURE__ */ jsx10("div", { className: "agg-market-card-accessory border-t border-agg-separator", children: headerAccessory }) : null,
+        /* @__PURE__ */ jsx10(
           "div",
           {
             id: detailsContentId,
@@ -4227,9 +4445,9 @@ var MarketDetailsContent = ({
               isOpened ? "grid-rows-[1fr] opacity-100" : "pointer-events-none grid-rows-[0fr] opacity-0"
             ),
             "aria-hidden": !isOpened,
-            children: /* @__PURE__ */ jsxs7("div", { className: "min-h-0", children: [
-              /* @__PURE__ */ jsx9("div", { className: "h-px w-full bg-agg-separator" }),
-              /* @__PURE__ */ jsxs7(
+            children: /* @__PURE__ */ jsxs8("div", { className: "min-h-0", children: [
+              /* @__PURE__ */ jsx10("div", { className: "h-px w-full bg-agg-separator" }),
+              /* @__PURE__ */ jsxs8(
                 "div",
                 {
                   className: cn(
@@ -4243,8 +4461,8 @@ var MarketDetailsContent = ({
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    !isResolvedMarket ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                      /* @__PURE__ */ jsx9("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx9(
+                    !isResolvedMarket ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+                      /* @__PURE__ */ jsx10("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx10(
                         Tabs,
                         {
                           ariaLabel: labels.marketDetails.tabsAria,
@@ -4255,10 +4473,10 @@ var MarketDetailsContent = ({
                           className: "agg-market-tabs w-full px-5"
                         }
                       ) }),
-                      /* @__PURE__ */ jsx9("div", { className: "h-px w-full bg-agg-separator" })
+                      /* @__PURE__ */ jsx10("div", { className: "h-px w-full bg-agg-separator" })
                     ] }) : null,
-                    /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-card-body p-0", classNames == null ? void 0 : classNames.content), children: [
-                      effectiveSelectedTab === "order-book" ? /* @__PURE__ */ jsx9(
+                    /* @__PURE__ */ jsxs8("div", { className: cn("agg-market-card-body p-0", classNames == null ? void 0 : classNames.content), children: [
+                      effectiveSelectedTab === "order-book" ? /* @__PURE__ */ jsx10(
                         OrderbookWithStates,
                         {
                           state: orderbookState,
@@ -4284,159 +4502,29 @@ var MarketDetailsContent = ({
                           wrapperClassName: classNames == null ? void 0 : classNames.orderBook
                         }
                       ) : null,
-                      effectiveSelectedTab === "graph" ? /* @__PURE__ */ jsxs7("div", { className: cn("agg-price-chart flex flex-col gap-5 p-5", classNames == null ? void 0 : classNames.graph), children: [
-                        hasChartError ? /* @__PURE__ */ jsx9(
-                          StateMessage,
-                          {
-                            title: labels.marketDetails.chartUnavailableTitle,
-                            description: labels.marketDetails.chartUnavailableDescription,
-                            icon: /* @__PURE__ */ jsx9(WarningIcon, {}),
-                            onAction: handleRetryMarketChart,
-                            classNames: { root: "min-h-[248px] px-5 py-10 md:min-h-[272px]" }
-                          }
-                        ) : /* @__PURE__ */ jsx9(
-                          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__ */ jsxs7("div", { className: "agg-chart-toolbar w-full flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
-                                /* @__PURE__ */ jsx9("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__ */ jsxs7(
-                                    "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__ */ jsx9(VenueLogo, { venue: item.venue, size: "small" }),
-                                        /* @__PURE__ */ jsx9("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
-                                      ]
-                                    },
-                                    `${item.market.id}-${item.outcome.id}`
-                                  );
-                                }) }),
-                                !isOutcomeSelectionLocked ? /* @__PURE__ */ jsx9(
-                                  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__ */ jsxs7(
-                          "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__ */ jsx9("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__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-3 md:gap-4", children: [
-                                /* @__PURE__ */ jsx9(
-                                  ChartTypeSwitch,
-                                  {
-                                    className: "agg-chart-type-switch shrink-0",
-                                    value: selectedChartType,
-                                    onValueChange: setSelectedChartType
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx9(
-                                  "span",
-                                  {
-                                    "aria-hidden": "true",
-                                    className: "hidden h-4 w-px bg-agg-separator md:block"
-                                  }
-                                ),
-                                CHART_TIME_RANGES2.map((timeRange) => {
-                                  const isActive = effectiveChartTimeRange === timeRange;
-                                  const isDisabled = isResolvedMarket && timeRange !== "ALL";
-                                  return /* @__PURE__ */ jsx9(
-                                    "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__ */ jsx9("div", { className: "agg-market-meta flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx9("div", { className: "agg-market-meta-list grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs7(
+                      isOpened && effectiveSelectedTab === "graph" ? /* @__PURE__ */ jsx10(
+                        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__ */ jsx10("div", { className: "agg-market-meta flex flex-col gap-4", children: otherContent != null ? otherContent : /* @__PURE__ */ jsx10("div", { className: "agg-market-meta-list grid grid-cols-1 gap-3", children: otherRows.map((row) => /* @__PURE__ */ jsxs8(
                         "div",
                         {
                           className: "agg-market-meta-row flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsx9(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
-                            /* @__PURE__ */ jsx9(Typography, { variant: "body", className: "text-right", children: row.value })
+                            /* @__PURE__ */ jsx10(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
+                            /* @__PURE__ */ jsx10(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },
                         row.label
@@ -4454,9 +4542,9 @@ var MarketDetailsContent = ({
 };
 var MarketDetails = (_a) => {
   var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
-  const labels = useLabels6();
+  const labels = useLabels7();
   if (props.isLoading) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       Skeleton,
       {
         view: "market-details-minified",
@@ -4466,7 +4554,7 @@ var MarketDetails = (_a) => {
     );
   }
   if ("venueMarkets" in props && props.venueMarkets) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       MarketDetailsContent,
       __spreadProps(__spreadValues({}, props), {
         isOpened,
@@ -4478,7 +4566,7 @@ var MarketDetails = (_a) => {
     );
   }
   const { classNames: fallbackClassNames } = props;
-  return /* @__PURE__ */ jsx9(MarketDetailsUnavailableState, { classNames: fallbackClassNames });
+  return /* @__PURE__ */ jsx10(MarketDetailsUnavailableState, { classNames: fallbackClassNames });
 };
 MarketDetails.displayName = "MarketDetails";
 var AFFIRMATIVE_WINNER_LABELS = /* @__PURE__ */ new Set(["yes", "up", "buy", "long", "true"]);
@@ -4535,11 +4623,11 @@ var MarketDetailsList = ({
   midpointsResult
 }) => {
   var _a, _b;
-  const labels = useLabels6();
+  const labels = useLabels7();
   const tradingContext = useEventTradingContext2();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = useState4(null);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState4(false);
+  const [expandedMarketId, setExpandedMarketId] = useState5(null);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState5(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
@@ -4548,11 +4636,12 @@ var MarketDetailsList = ({
   } = useVenueMarkets2({
     venueEventId: resolvedEventId,
     enabled: !providedMarkets && !!resolvedEventId,
-    status: MarketStatus.open,
-    sortBy: "yesPrice",
-    sortDir: "desc"
+    status: 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 = useMemo6(() => {
+  const sourceMarkets = useMemo7(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -4560,10 +4649,10 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = useMemo6(() => {
+  const isResolvedEvent = useMemo7(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = useMemo6(() => {
+  const groupedMarkets = useMemo7(() => {
     if (sourceMarkets.length === 0) {
       return {
         primary: [],
@@ -4603,21 +4692,21 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = useMemo6(() => {
+  const visibleResolvedMarkets = useMemo7(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = useMemo6(() => {
+  const displayedMarkets = useMemo7(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const midpointEligibleMarkets = useMemo6(() => {
+  const midpointEligibleMarkets = useMemo7(() => {
     return displayedMarkets.filter(
       (market) => resolveMarketTradingState(market).kind !== "resolved"
     );
   }, [displayedMarkets]);
   const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(midpointEligibleMarkets);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -4626,7 +4715,7 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -4643,7 +4732,7 @@ var MarketDetailsList = ({
     if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
     setExpandedMarketId(null);
@@ -4661,7 +4750,7 @@ var MarketDetailsList = ({
     tradingContext == null ? void 0 : tradingContext.selectMarket(market.id, market);
   };
   if (!hasPrefetchedMarkets && isLoading) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       Skeleton,
       {
         view: "market-details-minified",
@@ -4671,29 +4760,29 @@ var MarketDetailsList = ({
     );
   }
   if (!hasPrefetchedMarkets && error) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       StateMessage,
       {
         title: labels.marketDetails.unavailableTitle,
         description: labels.marketDetails.unavailableDescription,
-        icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+        icon: /* @__PURE__ */ jsx10(SearchEmptyIcon, {}),
         classNames: { root: "min-h-[280px] md:min-h-[320px]" }
       }
     );
   }
   if (displayedMarkets.length === 0 && !shouldShowResolvedToggle) {
     const hasSourceMarkets = sourceMarkets.length > 0;
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       StateMessage,
       {
         title: hasSourceMarkets ? isResolvedEvent ? labels.markets.emptyResolved : labels.markets.emptyNoOpen : labels.marketDetails.notFoundTitle,
         description: hasSourceMarkets ? void 0 : labels.marketDetails.notFoundDescription,
-        icon: /* @__PURE__ */ jsx9(SearchEmptyIcon, {}),
+        icon: /* @__PURE__ */ jsx10(SearchEmptyIcon, {}),
         classNames: { root: "min-h-[280px] md:min-h-[320px]" }
       }
     );
   }
-  const renderMarketCard = (market) => /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
+  const renderMarketCard = (market) => /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(
     MarketDetails,
     {
       marketId: market.id,
@@ -4720,9 +4809,9 @@ var MarketDetailsList = ({
       midpointsResult
     }
   ) }, market.id);
-  return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
+  return /* @__PURE__ */ jsxs8("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__ */ jsx9(
+    shouldShowResolvedToggle ? /* @__PURE__ */ jsx10(
       Button,
       {
         variant: "tertiary",
@@ -4732,7 +4821,7 @@ var MarketDetailsList = ({
           setAreResolvedMarketsVisible((isVisible) => !isVisible);
         },
         "aria-expanded": areResolvedMarketsVisible,
-        suffix: /* @__PURE__ */ jsx9(
+        suffix: /* @__PURE__ */ jsx10(
           Icon,
           {
             name: areResolvedMarketsVisible ? "chevron-up" : "chevron-down",
@@ -4756,17 +4845,17 @@ import {
   useAppConfig as useAppConfig2,
   useCategories,
   useCategoryChildren,
-  useLabels as useLabels8,
-  useSdkUiConfig as useSdkUiConfig4,
+  useLabels as useLabels9,
+  useSdkUiConfig as useSdkUiConfig5,
   useVenueEvents
 } from "@agg-build/hooks";
 import { VENUES } from "@agg-build/sdk";
 import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect as useEffect6, useMemo as useMemo9, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo10, useRef as useRef7, useState as useState7 } from "react";
 
 // src/events/list/category-sidebar.tsx
-import { useMemo as useMemo7 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useMemo as useMemo8 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "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",
@@ -4788,7 +4877,7 @@ var CategorySidebar = ({
   onToggleCategory
 }) => {
   const isDrilledIn = categoryPath.length > 0;
-  const sortedBaseChildren = useMemo7(() => {
+  const sortedBaseChildren = useMemo8(() => {
     var _a;
     if (!baseCategoryId) return [];
     const children = [...(_a = childrenByParentId.get(baseCategoryId)) != null ? _a : []];
@@ -4808,7 +4897,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__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -4816,8 +4905,8 @@ var CategorySidebar = ({
         className: isSelected ? selectedRowClassName : idleRowClassName,
         onClick,
         children: [
-          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ jsx11(
             Icon,
             {
               name: isExpanded ? "chevron-up" : "chevron-down",
@@ -4825,7 +4914,7 @@ var CategorySidebar = ({
               color: "currentColor",
               className: "shrink-0 text-agg-muted-foreground"
             }
-          ) : /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+          ) : /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
         ]
       },
       entry.id
@@ -4843,27 +4932,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__ */ jsxs8("div", { className: "flex w-full flex-col", children: [
+    return /* @__PURE__ */ jsxs9("div", { className: "flex w-full flex-col", children: [
       renderRow({
         entry,
         isExpanded,
         isSelected,
         onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
       }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "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__ */ jsx10("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
+          children: /* @__PURE__ */ jsx11("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx11("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__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -4871,8 +4960,8 @@ var CategorySidebar = ({
         className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
         onClick: onSelectAll,
         children: [
-          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
-          /* @__PURE__ */ jsx10("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
         ]
       }
     ),
@@ -4882,8 +4971,8 @@ var CategorySidebar = ({
 CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
-import { getVenueAvailabilityState, useAppConfig, useGeoBlock, useLabels as useLabels7 } from "@agg-build/hooks";
-import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo8, useRef as useRef6, useState as useState5 } from "react";
+import { getVenueAvailabilityState, useAppConfig, useGeoBlock, useLabels as useLabels8 } from "@agg-build/hooks";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo9, useRef as useRef6, useState as useState6 } from "react";
 
 // src/events/list/event-list.constants.ts
 import { MatchStatus, Venue as Venue2 } from "@agg-build/sdk";
@@ -4950,16 +5039,16 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ jsx11(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ jsx12(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ jsx11(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ jsx12(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Icon,
     {
       name: tab.iconName,
@@ -4969,10 +5058,10 @@ var renderTabIcon = (tab, isActive) => {
   );
 };
 var useEventListTabs = (tabs) => {
-  const labels = useLabels7();
+  const labels = useLabels8();
   const { disabledVenues } = useAppConfig();
   const { isLocationBlocked } = useGeoBlock();
-  return useMemo8(() => {
+  return useMemo9(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
@@ -5001,13 +5090,13 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  useEffect5(() => {
+  useEffect6(() => {
     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 = useMemo8(() => {
+  const items = useMemo9(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -5019,7 +5108,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Tabs,
     {
       ariaLabel,
@@ -5036,7 +5125,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
   const headerRef = useRef6(null);
   const titleRef = useRef6(null);
   const requiredTabsWidthRef = useRef6(0);
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState5(false);
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState6(false);
   const updateTabsOverflowBehavior = useCallback3(() => {
     var _a;
     if (typeof window === "undefined") return;
@@ -5074,10 +5163,10 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
   }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
-  useEffect5(() => {
+  useEffect6(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       updateTabsOverflowBehavior();
@@ -5087,7 +5176,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateTabsOverflowBehavior]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (typeof ResizeObserver === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -5105,7 +5194,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
 };
 
 // src/events/list/index.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -5143,45 +5232,45 @@ var EventList = ({
   stateRef
 }) => {
   var _a, _b, _c, _d, _e;
-  const labels = useLabels8();
+  const labels = useLabels9();
   const { disabledVenues } = useAppConfig2();
   const {
-    features: { enableVenueEventDiscoveryFilters }
-  } = useSdkUiConfig4();
+    features: { enableVenueEventDiscoveryFilters, showSportsMarkets }
+  } = useSdkUiConfig5();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = useMemo9(
+  const visibleVenues = useMemo10(
     () => disabledVenues.length === 0 ? void 0 : getVisibleVenueIdsByConfig(VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = useState6(
+  const [activeTabValue, setActiveTabValue] = useState7(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const [selectedSort, setSelectedSort] = useState6("volume24hr");
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState6(false);
-  const [categoryPath, setCategoryPath] = useState6([]);
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = useState6(() => /* @__PURE__ */ new Set());
-  const sortItems = useMemo9(() => {
+  const [selectedSort, setSelectedSort] = useState7("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState7(false);
+  const [categoryPath, setCategoryPath] = useState7([]);
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = useState7(() => /* @__PURE__ */ new Set());
+  const sortItems = useMemo10(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx13(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx13(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx13(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ jsx12(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ jsx13(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -5191,7 +5280,7 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isDiscoveryFiltersEnabled) return;
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
@@ -5201,10 +5290,10 @@ var EventList = ({
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = useMemo9(() => {
+  const sortedTopLevelCategories = useMemo10(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = useMemo9(() => {
+  const baseCategoryChildPrefetchIds = useMemo10(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...sortedTopLevelCategories.map((category) => category.id),
@@ -5218,7 +5307,7 @@ var EventList = ({
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = useMemo9(() => {
+  const visibleChildPrefetchIds = useMemo10(() => {
     var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
     if (baseCategoryId) {
@@ -5239,7 +5328,7 @@ var EventList = ({
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = useMemo9(() => {
+  const visibleGrandchildPrefetchIds = useMemo10(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -5255,7 +5344,7 @@ var EventList = ({
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = useMemo9(() => {
+  const childrenByParentId = useMemo10(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
@@ -5263,33 +5352,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 = useMemo9(() => {
+  const baseCategoryEventCount = useMemo10(() => {
     var _a2, _b2;
     return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
   }, [baseCategoryId, sortedTopLevelCategories]);
-  const resolvedCategoryIds = useMemo9(() => {
+  const resolvedCategoryIds = useMemo10(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
     return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
   }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = useMemo9(() => {
+  const sortQueryParams = useMemo10(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = useMemo9(() => {
+  const activeTab = useMemo10(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = useMemo9(() => {
+  const venues = useMemo10(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = useMemo9(() => {
+  const matchStatus = useMemo10(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = useMemo9(() => {
+  const resolvedMaxVisibleItems = useMemo10(() => {
     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 = useMemo9(() => {
+  const endDateFrom = useMemo10(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -5316,23 +5405,27 @@ var EventList = ({
     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
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = useMemo9(() => {
+  const filteredEvents = useMemo10(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = useMemo9(() => {
+  const groupedEvents = useMemo10(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = useMemo9(() => {
+  const orderedEvents = useMemo10(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = useMemo9(() => {
+  const tileEvents = useMemo10(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -5341,7 +5434,7 @@ var EventList = ({
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
   const loadMoreRef = useRef7(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -5392,7 +5485,7 @@ var EventList = ({
     onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Skeleton,
       {
         view: "event-list",
@@ -5401,8 +5494,8 @@ var EventList = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs9("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ jsxs10(
       "header",
       {
         className: cn(
@@ -5411,9 +5504,9 @@ var EventList = ({
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx12("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx12(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
-          /* @__PURE__ */ jsxs9("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx13(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
+          /* @__PURE__ */ jsxs10("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx13(
               EventListTabs,
               {
                 ariaLabel: labels.eventList.tabsAria(title),
@@ -5423,7 +5516,7 @@ var EventList = ({
                 overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -5439,8 +5532,8 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs10("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ jsx13(
         EventListTabs,
         {
           ariaLabel: labels.eventList.tabsAria(title),
@@ -5450,7 +5543,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -5461,23 +5554,23 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx13(
         "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__ */ jsx12(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ jsx13(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ jsx12("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__ */ jsx12(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx13("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ jsx13("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__ */ jsx13(
             CategorySidebar,
             {
               baseCategoryId,
@@ -5490,7 +5583,7 @@ var EventList = ({
               onToggleCategory: handleToggleSubcategory
             }
           ) }) }) : null,
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               className: cn(
@@ -5501,7 +5594,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                tileEvents.map((event) => /* @__PURE__ */ jsx12(
+                tileEvents.map((event) => /* @__PURE__ */ jsx13(
                   EventListItem,
                   {
                     event,
@@ -5516,7 +5609,7 @@ var EventList = ({
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx12(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx13(
                   EventListItem,
                   {
                     isLoading: true,
@@ -5526,20 +5619,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ jsx12("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx12(
+                shouldRenderEmptyState ? /* @__PURE__ */ jsx13("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx13(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ jsx12(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ jsx13(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ jsx12("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx12(
+                isError ? /* @__PURE__ */ jsx13("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx13(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ jsx12(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ jsx13(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -5548,7 +5641,7 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx12(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsx12(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx13(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsx13(
       Modal.Container,
       {
         classNames: {
@@ -5557,20 +5650,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__ */ jsxs9("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
-            /* @__PURE__ */ jsx12(Dialog.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
-            /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsxs10("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ jsx13("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsx13(Dialog.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ jsx13(
               Dialog.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__ */ jsx12(CloseIcon, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx13(CloseIcon, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ jsx13(
             CategorySidebar,
             {
               baseCategoryId,
@@ -5586,7 +5679,7 @@ var EventList = ({
         ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx12("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx13("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";
@@ -5599,6 +5692,7 @@ export {
   collectEligibleVenueOutcomeIds,
   mergeVenueOutcomeOrderbooks,
   SettlementSummary,
+  resolveEventDetailsSyncKey,
   EventListItemDetails,
   orderbookRowLimitDefault,
   useCenterOrderbookSpread,