@agg-build/ui 1.2.10 → 1.2.12

package/dist/{chunk-5MTIBPDY.mjs → chunk-4WBQTUPW.mjs}

@@ -4,8 +4,8 @@ import {
   buildMarketDetailsModel,
   formatProbabilityCents,
   formatProbabilityPercent,
+  getDisplayOutcomePrice,
   getFirstSettlementParagraph,
-  getTimeWindowByRange,
   resolveHeaderOutcomeItems,
   resolveInitialOutcomeLabel,
   resolveInitialTab,
@@ -15,25 +15,28 @@ import {
   resolveMarketFromVenueMarkets,
   resolveOtherTabRows,
   resolveOutcomesByVenue,
+  resolveScopedSelectedOutcome,
   resolveSeriesColor,
   resolveTradingStateBadgeClassName,
   resolveTradingStatePresentation,
   resolveUnifiedOrderBookEntries,
+  selectOutcomePrice,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-5PSAIGOT.mjs";
+} from "./chunk-IBOE7DRY.mjs";
 import {
   AutocompleteSelect,
   Badge,
   Button,
   Card,
-  DEFAULT_EVENTS_LIMIT,
   Icon,
   LineChart,
   MOBILE_TABS_MEDIA_QUERY,
   MarketDetailsOderbookSkeleton,
+  Modal,
   RemoteImage,
   SearchEmptyIcon,
+  Select,
   Skeleton,
   StateMessage,
   SwitchButton,
@@ -46,7 +49,6 @@ import {
   __spreadProps,
   __spreadValues,
   baseCardClassName,
-  buildSpreadByVenueMarketId,
   cn,
   dedupeVenueMarketsById,
   detailsBaseCardClassName,
@@ -54,17 +56,14 @@ import {
   formatCountLabel,
   formatMarketProbabilityPercent,
   formatPriceGapPercent,
-  getDefaultEventListTabs,
   getMarketDetailsTabs,
   getMotionClassName,
-  isYesLabel,
   mapEventToEventListItemEvent,
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
   normalizeProbability,
   normalizeVenueMarketCluster,
   orderBookRowLimitDefault,
-  resolveBestMidpointForMarket,
   resolveDisplayVolume,
   resolveEventListItemEvent,
   resolveOutcomeTitle,
@@ -73,14 +72,16 @@ import {
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-QFW5NDJ6.mjs";
+} from "./chunk-X3KCFWXN.mjs";
 
 // src/events/item/index.tsx
 import {
   computePriceGaps,
   optimizedImageUrl,
   sortVenues,
+  useEventTradingContext as useEventTradingContext2,
   useLabels,
+  useMidpoints,
   useSdkUiConfig,
   useVenueEvent,
   useVenueMarketMidpoints,
@@ -98,6 +99,32 @@ var isErrorWithStatus = (error, status) => {
   return getErrorStatus(error) === status;
 };
 
+// src/events/shared/display-outcome-venue.ts
+var normalizeOutcomeLabel = (label) => {
+  return typeof label === "string" ? label.trim().toLowerCase() : "";
+};
+var getDisplayOutcomeVenue = ({
+  outcomeId,
+  outcomeLabel,
+  selection,
+  bestMidpointVenue,
+  bestVenueByOutcomeId,
+  bestPriceVenuesByOutcomeId,
+  fallbackVenue
+}) => {
+  var _a;
+  if (selection && outcomeId) {
+    const sideVenues = bestPriceVenuesByOutcomeId == null ? void 0 : bestPriceVenuesByOutcomeId.get(outcomeId);
+    if (selection === "buy" && (sideVenues == null ? void 0 : sideVenues.bestAskVenue)) return sideVenues.bestAskVenue;
+    if (selection === "sell" && (sideVenues == null ? void 0 : sideVenues.bestBidVenue)) return sideVenues.bestBidVenue;
+  }
+  if (normalizeOutcomeLabel(outcomeLabel) === "yes" && bestMidpointVenue) {
+    return bestMidpointVenue;
+  }
+  const bestVenue = outcomeId ? bestVenueByOutcomeId == null ? void 0 : bestVenueByOutcomeId.get(outcomeId) : void 0;
+  return (_a = bestVenue != null ? bestVenue : fallbackVenue) != null ? _a : void 0;
+};
+
 // src/events/item/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var EventListItemLoadingState = ({
@@ -159,7 +186,6 @@ var EventListItemNotFoundState = ({
   );
 };
 var OUTCOMES_SCROLL_LOAD_THRESHOLD_PX = 16;
-var isNoLabel = (label) => label.trim().toLowerCase() === "no";
 var MARKET_ID_QUERY_PARAM = "marketId";
 var OUTCOME_ID_QUERY_PARAM = "outcomeId";
 var resolveMarketHrefFromEventHref = (eventHref, marketId, outcomeId) => {
@@ -182,18 +208,20 @@ var EventListItemContent = ({
   onMarketClick,
   getMarketHref,
   href,
-  ariaLabel
+  ariaLabel,
+  marketStatus
 }) => {
+  var _a;
   const config = useSdkUiConfig();
   const labels = useLabels();
-  const allVenueMarkets = useMemo(() => {
-    return dedupeVenueMarketsById(event.venueMarkets);
-  }, [event.venueMarkets]);
+  const tradingContext = useEventTradingContext2();
+  const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
+  const allVenueMarkets = useMemo(() => event.venueMarkets, [event.venueMarkets]);
   const resolvedTitle = event.title;
   const resolvedImage = event.image;
   const visibleVenueLogos = useMemo(() => {
-    var _a;
-    return sortVenues(Array.from(new Set(((_a = event.venues) != null ? _a : []).map((venue) => venue))));
+    var _a2;
+    return sortVenues(Array.from(new Set(((_a2 = event.venues) != null ? _a2 : []).map((venue) => venue))));
   }, [event.venues]);
   const resolvedMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount) ? Math.max(0, Math.floor(event.marketCount)) : allVenueMarkets.length;
   const resolvedVenueCount = typeof event.venueCount === "number" && Number.isFinite(event.venueCount) ? Math.max(0, Math.floor(event.venueCount)) : visibleVenueLogos.length;
@@ -216,18 +244,19 @@ var EventListItemContent = ({
     venueEventId: event.id,
     enabled: shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled,
     sortBy: "yesPrice",
-    sortDir: "desc"
+    sortDir: "desc",
+    status: marketStatus
   });
   const resolvedOutcomeMarkets = useMemo(() => {
     if (!isLazyMarketsQueryEnabled || lazyLoadedMarkets.length === 0) return allVenueMarkets;
     return dedupeVenueMarketsById([...allVenueMarkets, ...lazyLoadedMarkets]);
   }, [allVenueMarkets, isLazyMarketsQueryEnabled, lazyLoadedMarkets]);
   const midpointVenueMarketIds = useMemo(() => {
-    var _a;
+    var _a2;
     const ids = [];
     for (const market of resolvedOutcomeMarkets) {
       ids.push(market.id);
-      for (const sibling of (_a = market.matchedVenueMarkets) != null ? _a : []) {
+      for (const sibling of (_a2 = market.matchedVenueMarkets) != null ? _a2 : []) {
         ids.push(sibling.id);
       }
     }
@@ -235,17 +264,19 @@ var EventListItemContent = ({
   }, [resolvedOutcomeMarkets]);
   const {
     midpointsByVenueMarketId,
-    midpointRows,
     isLoading: isLoadingMidpoints,
     isFetching: isFetchingMidpoints
   } = useVenueMarketMidpoints({
     venueMarketIds: midpointVenueMarketIds,
     enabled: midpointVenueMarketIds.length > 0
   });
-  const spreadByVenueMarketId = useMemo(
-    () => buildSpreadByVenueMarketId(midpointRows),
-    [midpointRows]
-  );
+  const {
+    prices: displayMidpointsByOutcomeId,
+    venueByOutcomeId: displayMidpointVenueByOutcomeId,
+    bestPrices: displayBestPricesByOutcomeId,
+    bestPriceVenuesByOutcomeId: displayBestPriceVenuesByOutcomeId,
+    isLoading: isDisplayMidpointsLoading
+  } = useMidpoints(resolvedOutcomeMarkets);
   const gapsByVenueMarketId = useMemo(
     () => computePriceGaps({
       markets: resolvedOutcomeMarkets,
@@ -253,7 +284,7 @@ var EventListItemContent = ({
     }),
     [resolvedOutcomeMarkets, midpointsByVenueMarketId]
   );
-  const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints;
+  const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints || isDisplayMidpointsLoading;
   const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && (!isLazyMarketsQueryEnabled || isLoadingLazyMarkets || isFetchingNextLazyMarketsPage || hasNextLazyMarketsPage);
   const resolvedVolume = resolveDisplayVolume(event.volume, allVenueMarkets);
   const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
@@ -366,7 +397,7 @@ var EventListItemContent = ({
     );
   };
   const renderOutcomePriceBadge = (probability, venue, shouldRenderLoadingSkeleton, market, outcome) => {
-    var _a;
+    var _a2;
     if (shouldRenderLoadingSkeleton) {
       return /* @__PURE__ */ jsx(
         "div",
@@ -379,7 +410,7 @@ var EventListItemContent = ({
       );
     }
     if (typeof probability !== "number") return null;
-    const marketHref = (_a = getMarketHref == null ? void 0 : getMarketHref(event, market, outcome)) != null ? _a : resolveMarketHrefFromEventHref(href, market.id, outcome.id);
+    const marketHref = (_a2 = getMarketHref == null ? void 0 : getMarketHref(event, market, outcome)) != null ? _a2 : resolveMarketHrefFromEventHref(href, market.id, outcome.id);
     const isInteractive = Boolean(onMarketClick || marketHref);
     return /* @__PURE__ */ jsx(
       Badge,
@@ -460,39 +491,26 @@ var EventListItemContent = ({
             ),
             onScroll: handleOutcomesScroll,
             children: [
-              resolvedOutcomeMarkets.length === 1 ? (() => {
-                var _a;
+              resolvedMarketCount === 1 && resolvedOutcomeMarkets.length === 1 ? (() => {
                 const market = resolvedOutcomeMarkets[0];
-                const bestMidpoint = resolveBestMidpointForMarket(
-                  market,
-                  midpointsByVenueMarketId,
-                  spreadByVenueMarketId
-                );
-                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
-                const bestVenue = (_a = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _a : market.venue;
-                const hasYesOutcome = market.venueMarketOutcomes.some(
-                  (item) => isYesLabel(item.label)
-                );
-                const hasNoOutcome = market.venueMarketOutcomes.some((item) => isNoLabel(item.label));
-                const shouldUseMidpoint = hasYesOutcome && hasNoOutcome;
                 return sortOutcomes(market.venueMarketOutcomes).map((outcome) => {
-                  const probability = (() => {
-                    if (!shouldUseMidpoint) {
-                      return normalizeProbability(outcome.price);
-                    }
-                    if (marketMidpoint == null) {
-                      if (isMidpointQueryInFlight) return void 0;
-                      return normalizeProbability(outcome.price);
-                    }
-                    if (isYesLabel(outcome.label)) {
-                      return marketMidpoint;
-                    }
-                    if (isNoLabel(outcome.label)) {
-                      return normalizeProbability(1 - marketMidpoint);
-                    }
-                    return normalizeProbability(outcome.price);
-                  })();
-                  const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
+                  var _a2;
+                  const resolvedDisplayPrice = selectOutcomePrice({
+                    outcomeId: outcome.id,
+                    selection: tradeSide,
+                    bestPrices: displayBestPricesByOutcomeId,
+                    bestMidpointsByOutcomeId: displayMidpointsByOutcomeId
+                  });
+                  const midpointProbability = resolvedDisplayPrice;
+                  const probability = midpointProbability != null ? normalizeProbability(midpointProbability) : isMidpointQueryInFlight ? void 0 : normalizeProbability(outcome.price);
+                  const displayVenue = (_a2 = getDisplayOutcomeVenue({
+                    outcomeId: outcome.id,
+                    selection: tradeSide,
+                    bestVenueByOutcomeId: displayMidpointVenueByOutcomeId,
+                    bestPriceVenuesByOutcomeId: displayBestPriceVenuesByOutcomeId,
+                    fallbackVenue: market.venue
+                  })) != null ? _a2 : market.venue;
+                  const shouldRenderMidpointSkeleton = midpointProbability == null && isMidpointQueryInFlight;
                   const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
                   const _priceGapPct = gapsByVenueMarketId.get(market.id);
                   return /* @__PURE__ */ jsxs(
@@ -516,7 +534,7 @@ var EventListItemContent = ({
                           renderArbitrage(arbitragePercent),
                           renderOutcomePriceBadge(
                             probability,
-                            bestVenue,
+                            displayVenue,
                             shouldRenderMidpointSkeleton,
                             market,
                             outcome
@@ -528,21 +546,27 @@ var EventListItemContent = ({
                   );
                 });
               })() : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
-                var _a, _b, _c;
+                var _a2, _b, _c;
                 const yesOutcome = resolveYesOutcome(market);
                 const displayOutcome = yesOutcome != null ? yesOutcome : (_b = market.venueMarketOutcomes) == null ? void 0 : _b.reduce(
                   (acc, o) => o.price > acc.price ? o : acc,
-                  (_a = market.venueMarketOutcomes) == null ? void 0 : _a[0]
-                );
-                const bestMidpoint = resolveBestMidpointForMarket(
-                  market,
-                  midpointsByVenueMarketId,
-                  spreadByVenueMarketId
+                  (_a2 = market.venueMarketOutcomes) == null ? void 0 : _a2[0]
                 );
-                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
-                const bestVenue = (_c = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _c : market.venue;
-                const probability = marketMidpoint != null ? marketMidpoint : isMidpointQueryInFlight ? void 0 : normalizeProbability(displayOutcome == null ? void 0 : displayOutcome.price);
-                const shouldRenderMidpointSkeleton = marketMidpoint == null && isMidpointQueryInFlight;
+                const midpointProbability = displayOutcome != null ? selectOutcomePrice({
+                  outcomeId: displayOutcome.id,
+                  selection: tradeSide,
+                  bestPrices: displayBestPricesByOutcomeId,
+                  bestMidpointsByOutcomeId: displayMidpointsByOutcomeId
+                }) : void 0;
+                const bestVenue = (_c = displayOutcome != null ? getDisplayOutcomeVenue({
+                  outcomeId: displayOutcome.id,
+                  selection: tradeSide,
+                  bestVenueByOutcomeId: displayMidpointVenueByOutcomeId,
+                  bestPriceVenuesByOutcomeId: displayBestPriceVenuesByOutcomeId,
+                  fallbackVenue: market.venue
+                }) : void 0) != null ? _c : market.venue;
+                const probability = midpointProbability != null ? normalizeProbability(midpointProbability) : isMidpointQueryInFlight ? void 0 : normalizeProbability(displayOutcome == null ? void 0 : displayOutcome.price);
+                const shouldRenderMidpointSkeleton = midpointProbability == null && isMidpointQueryInFlight;
                 const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[market.id];
                 const outcomeTitle = market.question;
                 const _priceGapPct = gapsByVenueMarketId.get(market.id);
@@ -720,12 +744,12 @@ var fromScaled = (value, precision) => {
 var toPriceKey = (price) => {
   return String(toScaled(price, PRICE_PRECISION));
 };
-var normalizeOutcomeLabel = (value) => {
+var normalizeOutcomeLabel2 = (value) => {
   if (typeof value !== "string") return "";
   return value.trim().toLowerCase().replace(/[_-]+/g, " ").replace(/[^\p{L}\p{N}\s]/gu, " ").replace(/\s+/g, " ");
 };
 var toSemanticOutcomeLabel = (value) => {
-  const normalizedValue = normalizeOutcomeLabel(value);
+  const normalizedValue = normalizeOutcomeLabel2(value);
   if (!normalizedValue) return "";
   if (POSITIVE_OUTCOME_KEYS.has(normalizedValue)) return "yes";
   if (NEGATIVE_OUTCOME_KEYS.has(normalizedValue)) return "no";
@@ -739,10 +763,10 @@ var getOutcomeLabelCandidates = (outcome) => {
   );
 };
 var matchesSelectedOutcomeLabel = (outcome, selectedOutcomeLabel) => {
-  const normalizedSelectedLabel = normalizeOutcomeLabel(selectedOutcomeLabel);
+  const normalizedSelectedLabel = normalizeOutcomeLabel2(selectedOutcomeLabel);
   const semanticSelectedLabel = toSemanticOutcomeLabel(selectedOutcomeLabel);
   return getOutcomeLabelCandidates(outcome).some((candidate) => {
-    const normalizedCandidate = normalizeOutcomeLabel(candidate);
+    const normalizedCandidate = normalizeOutcomeLabel2(candidate);
     if (!normalizedCandidate) return false;
     return normalizedCandidate === normalizedSelectedLabel || toSemanticOutcomeLabel(candidate) === semanticSelectedLabel;
   });
@@ -882,21 +906,78 @@ var accumulateSideLevels = ({
 };
 var collectEligibleVenueOutcomes = ({
   venueMarkets,
-  selectedOutcomeLabel
+  selectedOutcomeLabel,
+  selectedOutcomeId
 }) => {
-  var _a;
+  var _a, _b, _c;
   if (!selectedOutcomeLabel) return [];
   const semanticLabel = toSemanticOutcomeLabel(selectedOutcomeLabel);
   const seenMarketIds = /* @__PURE__ */ new Set();
   const seenOutcomeIds = /* @__PURE__ */ new Set();
   const result = [];
+  if (selectedOutcomeId) {
+    for (const market of venueMarkets) {
+      const outcome = market.venueMarketOutcomes.find((o) => o.id === selectedOutcomeId);
+      if (!outcome) continue;
+      const refs = (_a = outcome.matchedVenueMarketOutcomes) != null ? _a : [];
+      if (refs.length > 0) {
+        seenMarketIds.add(market.id);
+        seenOutcomeIds.add(outcome.id);
+        result.push({
+          venue: market.venue,
+          market,
+          outcome,
+          outcomeId: outcome.id,
+          semanticLabel
+        });
+        for (const ref of refs) {
+          if (seenMarketIds.has(ref.venueMarketId)) continue;
+          const sibling = venueMarkets.find((m) => m.id === ref.venueMarketId);
+          if (!sibling) continue;
+          const siblingOutcome = sibling.venueMarketOutcomes.find(
+            (o) => o.id === ref.venueMarketOutcomeId
+          );
+          if (!siblingOutcome || seenOutcomeIds.has(siblingOutcome.id)) continue;
+          seenMarketIds.add(sibling.id);
+          seenOutcomeIds.add(siblingOutcome.id);
+          result.push({
+            venue: sibling.venue,
+            market: sibling,
+            outcome: siblingOutcome,
+            outcomeId: siblingOutcome.id,
+            semanticLabel
+          });
+        }
+        return result;
+      }
+      const hasOtherMarketWithRefs = venueMarkets.some((m) => {
+        var _a2, _b2;
+        if (m.id === market.id) return false;
+        const o = sortOutcomes(m.venueMarketOutcomes).find(
+          (o2) => matchesSelectedOutcomeLabel(o2, selectedOutcomeLabel)
+        );
+        return ((_b2 = (_a2 = o == null ? void 0 : o.matchedVenueMarketOutcomes) == null ? void 0 : _a2.length) != null ? _b2 : 0) > 0;
+      });
+      if (hasOtherMarketWithRefs) {
+        result.push({
+          venue: market.venue,
+          market,
+          outcome,
+          outcomeId: outcome.id,
+          semanticLabel
+        });
+        return result;
+      }
+      break;
+    }
+  }
   for (const market of venueMarkets) {
     if (seenMarketIds.has(market.id)) continue;
     const parentOutcome = sortOutcomes(market.venueMarketOutcomes).find(
       (outcome) => matchesSelectedOutcomeLabel(outcome, selectedOutcomeLabel)
     );
     if (!parentOutcome) continue;
-    const refs = (_a = parentOutcome.matchedVenueMarketOutcomes) != null ? _a : [];
+    const refs = (_b = parentOutcome.matchedVenueMarketOutcomes) != null ? _b : [];
     if (refs.length === 0) continue;
     seenMarketIds.add(market.id);
     seenOutcomeIds.add(parentOutcome.id);
@@ -933,6 +1014,13 @@ var collectEligibleVenueOutcomes = ({
       (outcome) => matchesSelectedOutcomeLabel(outcome, selectedOutcomeLabel)
     );
     if (!matchedOutcome || seenOutcomeIds.has(matchedOutcome.id)) continue;
+    const candidateRefs = (_c = matchedOutcome.matchedVenueMarketOutcomes) != null ? _c : [];
+    if (candidateRefs.length > 0) {
+      const sharesAnchor = candidateRefs.some(
+        (ref) => seenOutcomeIds.has(ref.venueMarketOutcomeId)
+      );
+      if (!sharesAnchor) continue;
+    }
     seenMarketIds.add(market.id);
     seenOutcomeIds.add(matchedOutcome.id);
     result.push({
@@ -947,11 +1035,14 @@ var collectEligibleVenueOutcomes = ({
 };
 var collectEligibleVenueOutcomeIds = ({
   venueMarkets,
-  selectedOutcomeLabel
+  selectedOutcomeLabel,
+  selectedOutcomeId
 }) => {
-  return collectEligibleVenueOutcomes({ venueMarkets, selectedOutcomeLabel }).map(
-    (eligibleOutcome) => eligibleOutcome.outcomeId
-  );
+  return collectEligibleVenueOutcomes({
+    venueMarkets,
+    selectedOutcomeLabel,
+    selectedOutcomeId
+  }).map((eligibleOutcome) => eligibleOutcome.outcomeId);
 };
 var mergeVenueOutcomeOrderbooks = ({
   eligibleOutcomes,
@@ -1058,14 +1149,15 @@ SettlementSummary.displayName = "SettlementSummary";
 // src/events/item-details/index.tsx
 import {
   CHART_TIME_RANGES,
+  mergeBestPricesPreferringLive,
   optimizedImageUrl as optimizedImageUrl2,
   resolveEventTradingState,
-  timeRangeToInterval,
   useEventOrderbookData,
   useLabels as useLabels5,
+  useLiveBestPrices,
   useLiveOutcomePrices,
   useMarketChart,
-  useMidpoints,
+  useRollingChartWindow,
   useSdkUiConfig as useSdkUiConfig2,
   useVenueEvent as useVenueEvent2
 } from "@agg-build/hooks";
@@ -1179,6 +1271,35 @@ var ChartTypeSwitch = ({
 };
 ChartTypeSwitch.displayName = "ChartTypeSwitch";
 
+// src/events/shared/chart-auto-fallback.ts
+var isMarketChartEmpty = (data, options = {}) => {
+  if (!data) return true;
+  const minTime = options.minTimeSec;
+  return !Object.values(data.venues).some((venue) => {
+    const hasInWindowCandle = minTime != null ? venue.candles.some((candle) => candle.time >= minTime) : venue.candles.length > 0;
+    if (hasInWindowCandle) return true;
+    const live = venue.liveCandle;
+    if (live == null) return false;
+    if (minTime != null && live.time < minTime) return false;
+    return true;
+  });
+};
+var shouldAutoFallbackToAllRange = ({
+  chartData,
+  isLoading,
+  error,
+  currentRange,
+  hasAlreadyFallenBack,
+  domainStartTs
+}) => {
+  if (hasAlreadyFallenBack) return false;
+  if (currentRange === "ALL") return false;
+  if (error != null) return false;
+  if (isLoading) return false;
+  if (!chartData) return false;
+  return isMarketChartEmpty(chartData, { minTimeSec: domainStartTs });
+};
+
 // src/events/shared/chart-venue-selection.ts
 import { sortVenues as sortVenues2 } from "@agg-build/hooks";
 var resolveChartVenueOutcomes = ({
@@ -1835,12 +1956,17 @@ var EventListItemDetailsGraphSection = ({
   classNames,
   selectedChartType,
   venueMarkets,
+  selectedMarketId,
   livePrices,
   wsLivePrices,
   restMidpoints,
-  live
+  bestMidpoint,
+  bestPrices,
+  live,
+  rangeOverride,
+  onRangeOverrideChange
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
   const [selectedGraphVenue, setSelectedGraphVenue] = useState3(null);
@@ -1861,24 +1987,33 @@ var EventListItemDetailsGraphSection = ({
     general: { theme }
   } = useSdkUiConfig2();
   const isDarkTheme = theme === "dark";
-  const timeWindow = useMemo5(() => {
-    return getTimeWindowByRange(selectedChartTimeRange);
-  }, [selectedChartTimeRange]);
+  const effectiveChartTimeRange = rangeOverride != null ? rangeOverride : selectedChartTimeRange;
+  const rollingWindow = useRollingChartWindow({ range: effectiveChartTimeRange });
   const availableMarkets = useMemo5(() => {
+    var _a2, _b2, _c2, _d2;
     if (venueMarkets.length === 0) return [];
-    return normalizeVenueMarketCluster(venueMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarketId);
-  }, [tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
-  const resolvedChartOutcomeLabel = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : null;
+    const resolvedSelectedMarketId = (_d2 = (_c2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a2 : selectedMarketId) != null ? _c2 : (_b2 = venueMarkets[0]) == null ? void 0 : _b2.id) != null ? _d2 : null;
+    return normalizeVenueMarketCluster(venueMarkets, resolvedSelectedMarketId);
+  }, [selectedMarketId, tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
+  const fallbackOutcomeLabel = useMemo5(() => {
+    var _a2, _b2, _c2, _d2, _e2;
+    const fallbackMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
+    if (!fallbackMarket) return null;
+    return (_e2 = (_d2 = (_c2 = sortOutcomeSelectorOutcomes(fallbackMarket.venueMarketOutcomes)[0]) == null ? void 0 : _c2.label) == null ? void 0 : _d2.trim()) != null ? _e2 : null;
+  }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
+  const resolvedChartOutcomeLabel = (_h = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : fallbackOutcomeLabel) != null ? _h : null;
+  const chartScopedOutcomeId = ((_i = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _i.id) && ((_j = tradingContext.selectedOutcome.label) == null ? void 0 : _j.trim()) === resolvedChartOutcomeLabel ? tradingContext.selectedOutcome.id : null;
   const availableVenueOutcomes = useMemo5(() => {
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
         venueMarkets: availableMarkets,
-        selectedOutcomeLabel: resolvedChartOutcomeLabel
+        selectedOutcomeLabel: resolvedChartOutcomeLabel,
+        selectedOutcomeId: chartScopedOutcomeId
       }),
       livePrices
     });
-  }, [availableMarkets, livePrices, resolvedChartOutcomeLabel]);
-  const chartPrimaryOutcomeId = (_i = (_h = availableVenueOutcomes[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  }, [availableMarkets, livePrices, resolvedChartOutcomeLabel, chartScopedOutcomeId]);
+  const chartPrimaryOutcomeId = (_l = (_k = availableVenueOutcomes[0]) == null ? void 0 : _k.outcome.id) != null ? _l : null;
   const {
     data: scopedMarketChartData,
     isLoading: isScopedMarketChartLoading,
@@ -1887,17 +2022,56 @@ var EventListItemDetailsGraphSection = ({
   } = useMarketChart({
     marketId: chartPrimaryOutcomeId,
     venueMarketIds: availableVenueOutcomes.map((item) => item.outcome.id),
-    interval: timeRangeToInterval(selectedChartTimeRange),
-    startTs: timeWindow.startTs * 1e3,
-    endTs: timeWindow.endTs * 1e3,
+    interval: rollingWindow.interval,
+    startTs: rollingWindow.startTs * 1e3,
+    endTs: rollingWindow.endTs * 1e3,
     enabled: availableVenueOutcomes.length > 0,
-    live
+    live,
+    refetchIntervalMs: rollingWindow.refetchIntervalMs,
+    // Stable cache key per user-selected range so revisits hit cache instead
+    // of refetching every time the bucket boundary advances.
+    rangeKey: rollingWindow.range
   });
+  const hasAutoFallenBackRangeRef = useRef2(false);
+  useEffect2(() => {
+    hasAutoFallenBackRangeRef.current = false;
+  }, [chartPrimaryOutcomeId]);
+  useEffect2(() => {
+    if (!shouldAutoFallbackToAllRange({
+      chartData: scopedMarketChartData,
+      isLoading: isScopedMarketChartLoading,
+      error: scopedMarketChartError,
+      currentRange: effectiveChartTimeRange,
+      hasAlreadyFallenBack: hasAutoFallenBackRangeRef.current,
+      // Ignore stale "courtesy" bars the API returns outside the
+      // rolling window (e.g. a market that last traded 11h ago — its
+      // last bar is in `candles` but our visible 1H window can't show
+      // it, so for fallback purposes it doesn't count as data).
+      domainStartTs: rollingWindow.startTs
+    })) {
+      return;
+    }
+    hasAutoFallenBackRangeRef.current = true;
+    onRangeOverrideChange("ALL");
+  }, [
+    scopedMarketChartData,
+    isScopedMarketChartLoading,
+    scopedMarketChartError,
+    effectiveChartTimeRange,
+    onRangeOverrideChange,
+    rollingWindow.startTs
+  ]);
   const selectedMarketOutcomes = useMemo5(() => {
     var _a2, _b2;
     const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!selectedMarket) return [];
-    return sortOutcomeSelectorOutcomes(selectedMarket.venueMarketOutcomes);
+    return sortOutcomeSelectorOutcomes(selectedMarket.venueMarketOutcomes).map((outcome) => {
+      var _a3;
+      return __spreadProps(__spreadValues({}, outcome), {
+        label: outcome.label,
+        title: (_a3 = outcome.title) != null ? _a3 : null
+      });
+    });
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
   const resolvedVenueChartSeries = useMemo5(() => {
     return resolveMarketChartVenueSeries({
@@ -1924,11 +2098,12 @@ var EventListItemDetailsGraphSection = ({
   }, [availableVenueOutcomes, chartAvailableVenueOutcomes, tradingContext == null ? void 0 : tradingContext.selectedVenue]);
   const activeGraphVenue = selectedChartType === "candlestick" ? selectedGraphVenue != null ? selectedGraphVenue : defaultCandlestickVenue : selectedGraphVenue;
   const visibleChartSeries = useMemo5(() => {
-    if (!activeGraphVenue) {
-      return resolvedVenueChartSeries;
-    }
-    return resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue);
-  }, [activeGraphVenue, resolvedVenueChartSeries]);
+    const venueFiltered = activeGraphVenue ? resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue) : resolvedVenueChartSeries;
+    const domainStartTs = rollingWindow.startTs;
+    return venueFiltered.map((seriesItem) => __spreadProps(__spreadValues({}, seriesItem), {
+      points: seriesItem.points.filter((point) => point.time >= domainStartTs)
+    }));
+  }, [activeGraphVenue, resolvedVenueChartSeries, rollingWindow.startTs]);
   const chartLiveState = useMemo5(() => {
     return resolveMarketChartLiveState({
       chartData: scopedMarketChartData,
@@ -1968,7 +2143,7 @@ var EventListItemDetailsGraphSection = ({
       height: 300,
       isLoading: isScopedMarketChartLoading,
       chartType: selectedChartType,
-      liveCandle: selectedChartType === "candlestick" ? (_j = chartLiveState.liveCandle) != null ? _j : void 0 : void 0,
+      liveCandle: selectedChartType === "candlestick" ? (_m = chartLiveState.liveCandle) != null ? _m : void 0 : void 0,
       lineValue: chartLiveState.lineValue,
       showSeriesControls: selectedMarketOutcomes.length > 0,
       renderSeriesControls: ({ handleSeriesChange }) => {
@@ -2057,12 +2232,21 @@ var EventListItemDetailsGraphSection = ({
                     tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
                   },
                   options: selectedMarketOutcomes.map((outcome) => {
-                    var _a3, _b3;
-                    const price = (_b3 = (_a3 = restMidpoints.get(outcome.id)) != null ? _a3 : livePrices.get(outcome.id)) != null ? _b3 : outcome.price;
+                    var _a3, _b3, _c3;
+                    const price = getDisplayOutcomePrice({
+                      outcomeId: outcome.id,
+                      outcomeLabel: outcome.label,
+                      selection: (_a3 = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a3 : "buy",
+                      bestPrices,
+                      bestMidpoint,
+                      bestMidpointsByOutcomeId: restMidpoints,
+                      livePrices,
+                      fallbackPrice: outcome.price
+                    });
                     return {
                       value: outcome.id,
-                      label: `${outcome.label} ${formatProbabilityCents(price)}`,
-                      ariaLabel: `${outcome.label} ${formatProbabilityCents(price)}`
+                      label: `${(_b3 = outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`,
+                      ariaLabel: `${(_c3 = outcome.title) != null ? _c3 : outcome.label} ${formatProbabilityCents(price)}`
                     };
                   })
                 }
@@ -2083,12 +2267,17 @@ var EventListItemDetailsContent = ({
   detailsStats,
   eventTradingState,
   ariaLabel,
-  onClick
+  onClick,
+  midpointsResult
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const [selectedChartType, setSelectedChartType] = useState3("line");
   const lastAppliedEventSyncKeyRef = useRef2(null);
   const lastAppliedDefaultRef = useRef2(null);
+  const [chartRangeOverride, setChartRangeOverride] = useState3(null);
+  useEffect2(() => {
+    setChartRangeOverride(null);
+  }, [event.id]);
   const config = useSdkUiConfig2();
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
@@ -2103,18 +2292,24 @@ var EventListItemDetailsContent = ({
     scopedSelectedMarketId
   );
   const wsLivePrices = useLiveOutcomePrices(resolvedEventTradingState.displayMarkets);
-  const midpointsClusterMarkets = useMemo5(() => {
-    if (resolvedEventTradingState.isTradingDisabled) return [];
-    return normalizeVenueMarketCluster(
-      resolvedEventTradingState.displayMarkets,
-      scopedSelectedMarketId
-    );
-  }, [
-    resolvedEventTradingState.displayMarkets,
-    resolvedEventTradingState.isTradingDisabled,
-    scopedSelectedMarketId
-  ]);
-  const { prices: restMidpoints } = useMidpoints(midpointsClusterMarkets);
+  const wsBestPrices = useLiveBestPrices(resolvedEventTradingState.displayMarkets);
+  const resolvedMidpointsResult = midpointsResult != null ? midpointsResult : {
+    prices: /* @__PURE__ */ new Map(),
+    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
+    venueByOutcomeId: /* @__PURE__ */ new Map(),
+    bestPrices: /* @__PURE__ */ new Map(),
+    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
+    isLoading: false,
+    bestMidpoint: void 0,
+    bestMidpointVenue: void 0
+  };
+  const restMidpoints = (_b = resolvedMidpointsResult.bestMidpointsByOutcomeId) != null ? _b : resolvedMidpointsResult.prices;
+  const bestMidpoint = resolvedMidpointsResult.bestMidpoint;
+  const restBestPrices = resolvedMidpointsResult.bestPrices;
+  const bestPrices = useMemo5(
+    () => mergeBestPricesPreferringLive(restBestPrices, wsBestPrices),
+    [restBestPrices, wsBestPrices]
+  );
   const livePrices = useMemo5(() => {
     if (!restMidpoints.size) return wsLivePrices;
     if (!wsLivePrices.size) return restMidpoints;
@@ -2223,7 +2418,7 @@ var EventListItemDetailsContent = ({
                   {
                     className: classNames == null ? void 0 : classNames.headerPills,
                     options: marketOptions,
-                    selectedValue: (_b = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _b : "",
+                    selectedValue: (_c = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _c : "",
                     onChange: (marketId) => {
                       tradingContext == null ? void 0 : tradingContext.selectMarket(marketId);
                     }
@@ -2274,10 +2469,15 @@ var EventListItemDetailsContent = ({
               selectedChartType,
               venueInfo,
               venueMarkets,
+              selectedMarketId: (_d = scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id) != null ? _d : null,
               livePrices,
               wsLivePrices,
               restMidpoints,
-              live: false
+              bestMidpoint,
+              bestPrices,
+              live: false,
+              rangeOverride: chartRangeOverride,
+              onRangeOverrideChange: setChartRangeOverride
             }
           ),
           /* @__PURE__ */ jsxs4(
@@ -2307,7 +2507,8 @@ var EventListItemDetailsContent = ({
                       ),
                       /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "hidden h-4 w-px bg-agg-separator md:block" }),
                       CHART_TIME_RANGES.map((timeRange) => {
-                        const isActive = timeRange === config.chart.selectedChartTimeRange;
+                        const effectiveRange = chartRangeOverride != null ? chartRangeOverride : config.chart.selectedChartTimeRange;
+                        const isActive = timeRange === effectiveRange;
                         return /* @__PURE__ */ jsx5(
                           Button,
                           {
@@ -2324,6 +2525,7 @@ var EventListItemDetailsContent = ({
                             onClick: (e) => {
                               e.stopPropagation();
                               e.preventDefault();
+                              setChartRangeOverride(null);
                               config.chart.setSelectedChartTimeRange(timeRange);
                             },
                             children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
@@ -2459,30 +2661,23 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasAutoCenteredRef = useRef3(false);
   const hasUserScrolledRef = useRef3(false);
   const animationFrameRef = useRef3(null);
   const retryCountRef = useRef3(0);
   const resetKey = marketId != null ? marketId : "";
+  const cancelPendingFrame = useCallback2(() => {
+    if (animationFrameRef.current === null) return;
+    window.cancelAnimationFrame(animationFrameRef.current);
+    animationFrameRef.current = null;
+  }, []);
   useLayoutEffect2(() => {
-    const cancelPendingFrame = () => {
-      if (animationFrameRef.current === null) return;
-      window.cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
-    };
-    hasAutoCenteredRef.current = false;
     hasUserScrolledRef.current = false;
     retryCountRef.current = 0;
     cancelPendingFrame();
-  }, [resetKey]);
+  }, [cancelPendingFrame, resetKey]);
   useLayoutEffect2(() => {
     const container = containerRef.current;
     if (!container) return;
-    const cancelPendingFrame = () => {
-      if (animationFrameRef.current === null) return;
-      window.cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
-    };
     const handleUserScrollIntent = () => {
       hasUserScrolledRef.current = true;
       cancelPendingFrame();
@@ -2502,93 +2697,81 @@ var useCenterOrderbookSpread = ({
       container.removeEventListener("keydown", handleKeyDown);
       cancelPendingFrame();
     };
-  }, [containerRef]);
+  }, [cancelPendingFrame, containerRef]);
   useLayoutEffect2(() => {
     if (!enabled) return;
-    if (hasAutoCenteredRef.current || hasUserScrolledRef.current) return;
     let isCancelled = false;
-    let resizeObserver = null;
-    const cancelPendingFrame = () => {
-      if (animationFrameRef.current === null) return;
-      window.cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = null;
-    };
-    const disconnectResizeObserver = () => {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      resizeObserver = null;
-    };
-    const scheduleMeasurement = () => {
-      cancelPendingFrame();
-      animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
-    };
-    const setupResizeObserverFallback = () => {
-      if (resizeObserver) return;
-      const container = containerRef.current;
-      if (!container) return;
-      resizeObserver = new ResizeObserver(() => {
-        if (isCancelled || hasAutoCenteredRef.current || hasUserScrolledRef.current) {
-          disconnectResizeObserver();
-          return;
-        }
-        if (container.clientHeight <= 0) return;
-        disconnectResizeObserver();
-        retryCountRef.current = 0;
-        scheduleMeasurement();
-      });
-      resizeObserver.observe(container);
-    };
-    const scheduleRetry = () => {
-      if (isCancelled || hasUserScrolledRef.current || hasAutoCenteredRef.current) return;
-      if (retryCountRef.current >= maxAutoCenterAttempts) {
-        setupResizeObserverFallback();
-        return;
-      }
-      retryCountRef.current += 1;
-      scheduleMeasurement();
-    };
     const measureAndCenter = () => {
-      if (isCancelled) return;
-      const container = containerRef.current;
+      animationFrameRef.current = null;
+      if (isCancelled || hasUserScrolledRef.current) return;
+      const container2 = containerRef.current;
       const spread = spreadRef.current;
-      if (!container || !spread) {
+      if (!container2 || !spread) {
         scheduleRetry();
         return;
       }
-      const containerHeight = container.clientHeight;
+      const containerHeight = container2.clientHeight;
       if (containerHeight <= 0) {
         scheduleRetry();
         return;
       }
-      const containerRect = container.getBoundingClientRect();
+      const containerRect = container2.getBoundingClientRect();
       const spreadRect = spread.getBoundingClientRect();
       if (containerRect.height <= 0 || spreadRect.height <= 0) {
         scheduleRetry();
         return;
       }
-      const spreadOffsetTop = container.scrollTop + (spreadRect.top - containerRect.top);
-      const maxScrollTop = Math.max(0, container.scrollHeight - containerHeight);
+      const spreadOffsetTop = container2.scrollTop + (spreadRect.top - containerRect.top);
+      const maxScrollTop = Math.max(0, container2.scrollHeight - containerHeight);
       if (maxScrollTop === 0) {
         retryCountRef.current = 0;
-        animationFrameRef.current = null;
         return;
       }
       const targetScrollTop = Math.max(
         0,
         Math.min(maxScrollTop, spreadOffsetTop - containerHeight / 2 + spreadRect.height / 2)
       );
-      container.scrollTo({ top: targetScrollTop, behavior: "auto" });
-      hasAutoCenteredRef.current = true;
+      container2.scrollTop = targetScrollTop;
       retryCountRef.current = 0;
-      animationFrameRef.current = null;
-      disconnectResizeObserver();
     };
+    const scheduleMeasurement = () => {
+      if (isCancelled || hasUserScrolledRef.current) return;
+      if (animationFrameRef.current !== null) return;
+      animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
+    };
+    const scheduleRetry = () => {
+      if (isCancelled || hasUserScrolledRef.current) return;
+      if (retryCountRef.current >= maxAutoCenterAttempts) return;
+      retryCountRef.current += 1;
+      if (animationFrameRef.current !== null) return;
+      animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
+    };
+    const container = containerRef.current;
+    let resizeObserver = null;
+    let mutationObserver = null;
+    if (container) {
+      resizeObserver = new ResizeObserver(() => {
+        if (isCancelled || hasUserScrolledRef.current) return;
+        retryCountRef.current = 0;
+        scheduleMeasurement();
+      });
+      resizeObserver.observe(container);
+      mutationObserver = new MutationObserver(() => {
+        if (isCancelled || hasUserScrolledRef.current) return;
+        retryCountRef.current = 0;
+        scheduleMeasurement();
+      });
+      mutationObserver.observe(container, { childList: true, subtree: true });
+    }
+    retryCountRef.current = 0;
     scheduleMeasurement();
     return () => {
       isCancelled = true;
       cancelPendingFrame();
-      disconnectResizeObserver();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
     };
-  }, [containerRef, enabled, resetKey, rowCount, spreadRef]);
+  }, [cancelPendingFrame, containerRef, enabled, resetKey, rowCount, spreadRef]);
   const recenter = useCallback2(() => {
     const container = containerRef.current;
     const spread = spreadRef.current;
@@ -2924,15 +3107,16 @@ import {
   CHART_TIME_RANGES as CHART_TIME_RANGES2,
   findLivePriceById,
   MarketStatus,
+  mergeBestPricesPreferringLive as mergeBestPricesPreferringLive2,
   optimizedImageUrl as optimizedImageUrl3,
   resolveMarketTradingState,
-  timeRangeToInterval as timeRangeToInterval2,
-  useEventTradingContext as useEventTradingContext2,
+  useEventTradingContext as useEventTradingContext3,
   useLabels as useLabels6,
+  useLiveBestPrices as useLiveBestPrices2,
   useLiveOutcomePrices as useLiveOutcomePrices2,
   useMarketChart as useMarketChart2,
   useMarketOrderbook,
-  useMidpoints as useMidpoints2,
+  useRollingChartWindow as useRollingChartWindow2,
   useSdkUiConfig as useSdkUiConfig3,
   useVenueMarkets as useVenueMarkets2,
   useViewportMidpoints
@@ -2945,17 +3129,17 @@ var marketDetailsOutcomeButtonToneClasses = {
   positive: {
     activeSurface: "bg-agg-success/15",
     border: "border-agg-success/50",
-    defaultSurface: "bg-agg-success/5",
-    hoverSurface: "hover:bg-agg-success/10",
-    pressedSurface: "active:bg-agg-success/15",
+    defaultSurface: "bg-agg-secondary-hover",
+    hoverSurface: "hover:bg-agg-tertiary",
+    pressedSurface: "active:bg-agg-success/10",
     text: "text-agg-success!"
   },
   negative: {
     activeSurface: "bg-agg-error/15",
     border: "border-agg-error/50",
-    defaultSurface: "bg-agg-error/5",
-    hoverSurface: "hover:bg-agg-error/10",
-    pressedSurface: "active:bg-agg-error/15",
+    defaultSurface: "bg-agg-secondary-hover",
+    hoverSurface: "hover:bg-agg-tertiary",
+    pressedSurface: "active:bg-agg-error/10",
     text: "text-agg-error!"
   }
 };
@@ -2988,6 +3172,7 @@ var MarketDetailsOutcomeButton = ({
   item,
   onSelect
 }) => {
+  var _a;
   const classNames = getMarketDetailsOutcomeButtonClassNames({
     enableAnimations,
     isSelected,
@@ -3014,7 +3199,7 @@ var MarketDetailsOutcomeButton = ({
               as: "span",
               variant: isSelected ? "body-strong" : "body",
               className: cn("whitespace-nowrap truncate", classNames.text),
-              children: item.title
+              children: (_a = item.title) != null ? _a : item.label
             }
           ),
           /* @__PURE__ */ jsx8(
@@ -3035,21 +3220,6 @@ MarketDetailsOutcomeButton.displayName = "MarketDetailsOutcomeButton";
 
 // src/events/market-details/index.tsx
 import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var MarketDetailsLoadingState = ({
-  isOpened = marketDetailsDefaultIsOpened,
-  ariaLabel,
-  classNames
-}) => {
-  const labels = useLabels6();
-  return /* @__PURE__ */ jsx9(
-    Skeleton,
-    {
-      view: isOpened ? "market-details-detailed" : "market-details-minified",
-      className: classNames == null ? void 0 : classNames.root,
-      ariaLabel: ariaLabel != null ? ariaLabel : labels.marketDetails.loading
-    }
-  );
-};
 var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
@@ -3103,9 +3273,11 @@ var MarketDetailsContent = ({
   onOutcomeSelect,
   live,
   midpointsFallback,
-  midpointsFallbackVenues
+  midpointsFallbackVenues,
+  suppressOutcomeFallbackSelection,
+  midpointsResult
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const config = useSdkUiConfig3();
   const {
     features: { enableAnimations },
@@ -3114,9 +3286,61 @@ var MarketDetailsContent = ({
   } = config;
   const isDarkTheme = theme === "dark";
   const labels = useLabels6();
-  const tradingContext = useEventTradingContext2();
+  const tradingContext = useEventTradingContext3();
   const detailsContentId = useId();
+  const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
+  const wsBestPrices = useLiveBestPrices2(venueMarkets);
+  const resolvedMarket = useMemo6(() => {
+    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
+  }, [venueMarkets, marketId]);
+  const scopedResolvedMarket = useMemo6(() => {
+    var _a2, _b2;
+    if (!resolvedMarket) return null;
+    return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
+  }, [resolvedMarket]);
+  const isResolvedMarket = resolveMarketTradingState(scopedResolvedMarket).kind === "resolved";
+  const clusterMidpointResult = midpointsResult != null ? midpointsResult : {
+    prices: /* @__PURE__ */ new Map(),
+    bestMidpointsByOutcomeId: /* @__PURE__ */ new Map(),
+    venueByOutcomeId: /* @__PURE__ */ new Map(),
+    bestPrices: /* @__PURE__ */ new Map(),
+    bestPriceVenuesByOutcomeId: /* @__PURE__ */ new Map(),
+    isLoading: false,
+    bestMidpoint: void 0,
+    bestMidpointVenue: void 0
+  };
+  const clusterMidpoints = (_b = clusterMidpointResult.bestMidpointsByOutcomeId) != null ? _b : clusterMidpointResult.prices;
+  const clusterBestMidpointsByOutcomeId = clusterMidpoints;
+  const clusterVenueByOutcomeId = clusterMidpointResult.venueByOutcomeId;
+  const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
+  const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
+  const clusterBestPricesRest = clusterMidpointResult.bestPrices;
+  const clusterBestPrices = useMemo6(
+    () => mergeBestPricesPreferringLive2(clusterBestPricesRest, wsBestPrices),
+    [clusterBestPricesRest, wsBestPrices]
+  );
+  const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
+  const clusterMidpointMarkets = useMemo6(() => {
+    var _a2;
+    if (!resolvedMarket) return [];
+    return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
+  }, [resolvedMarket]);
+  const tradableVenues = useMemo6(() => {
+    var _a2;
+    if (clusterMidpointMarkets.length === 0) return null;
+    if (clusterMidpoints.size === 0) return null;
+    const set = /* @__PURE__ */ new Set();
+    for (const market of clusterMidpointMarkets) {
+      for (const outcome of (_a2 = market.venueMarketOutcomes) != null ? _a2 : []) {
+        if (clusterMidpoints.has(outcome.id)) {
+          set.add(market.venue);
+          break;
+        }
+      }
+    }
+    return set;
+  }, [clusterMidpointMarkets, clusterMidpoints]);
   const model = useMemo6(() => {
     return buildMarketDetailsModel({
       venueMarkets,
@@ -3124,17 +3348,18 @@ var MarketDetailsContent = ({
       title,
       image,
       formatCompactCurrency: config.formatting.formatCompactCurrency,
-      labels
+      labels,
+      tradableVenues
     });
-  }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
-  const resolvedMarket = useMemo6(() => {
-    return resolveMarketFromVenueMarkets(venueMarkets, marketId);
-  }, [venueMarkets, marketId]);
-  const clusterMidpointMarkets = useMemo6(() => {
-    if (!controlledIsOpened || !resolvedMarket) return [];
-    return resolvedMarket.venueMarkets;
-  }, [controlledIsOpened, resolvedMarket]);
-  const { prices: clusterMidpoints, venueByOutcomeId: clusterVenueByOutcomeId } = useMidpoints2(clusterMidpointMarkets);
+  }, [
+    config.formatting.formatCompactCurrency,
+    venueMarkets,
+    image,
+    labels,
+    marketId,
+    title,
+    tradableVenues
+  ]);
   const livePrices = useMemo6(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
@@ -3158,7 +3383,6 @@ var MarketDetailsContent = ({
   const marketTradingState = useMemo6(() => {
     return resolveMarketTradingState(scopedMarketForCard);
   }, [scopedMarketForCard]);
-  const isResolvedMarket = marketTradingState.kind === "resolved";
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
@@ -3178,11 +3402,30 @@ var MarketDetailsContent = ({
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
-  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : selectedTimeRange;
+  const [chartRangeOverride, setChartRangeOverride] = useState4(null);
+  const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
   const [selectedChartType, setSelectedChartType] = useState4("line");
-  const scopedSelectedOutcome = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) != null ? _a : null;
-  const selectedOutcomeId = (_b = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.id) != null ? _b : null;
-  const selectedOutcomeLabel = (_c = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.label) != null ? _c : null;
+  const scopedSelectedOutcomeState = useMemo6(() => {
+    if (!model) {
+      return {
+        outcomeId: null,
+        outcomeLabel: void 0
+      };
+    }
+    return resolveScopedSelectedOutcome({
+      venueMarkets: model.market.venueMarkets,
+      selectedOutcomeId: tradingContext == null ? void 0 : tradingContext.selectedOutcomeId,
+      defaultOutcomeLabel,
+      suppressFallbackWhenSelectedOutcomeOutOfScope: suppressOutcomeFallbackSelection
+    });
+  }, [
+    defaultOutcomeLabel,
+    model,
+    suppressOutcomeFallbackSelection,
+    tradingContext == null ? void 0 : tradingContext.selectedOutcomeId
+  ]);
+  const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
+  const selectedOutcomeLabel = (_c = scopedSelectedOutcomeState.outcomeLabel) != null ? _c : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
   const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
   const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
@@ -3196,6 +3439,9 @@ var MarketDetailsContent = ({
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
+    if ((tradingContext == null ? void 0 : tradingContext.selectedMarketId) && tradingContext.selectedMarketId !== model.market.id) {
+      return;
+    }
     if (selectedOutcomeId) return;
     const initialLabel = resolveInitialOutcomeLabel(model.outcomeLabels, defaultOutcomeLabel);
     if (!initialLabel) return;
@@ -3210,71 +3456,130 @@ var MarketDetailsContent = ({
     isOutcomeSelectionLocked,
     model,
     selectedOutcomeId,
+    tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
   const headerOutcomeItems = useMemo6(() => {
     if (!model) return [];
-    const items = resolveHeaderOutcomeItems(model.market.venueMarkets);
+    const items = resolveHeaderOutcomeItems(model.market.venueMarkets, scopedMarketForCard);
     return items.map((item) => {
-      const clusterPrice = clusterMidpoints.get(item.id);
-      if (clusterPrice != null) {
-        const bestVenue = clusterVenueByOutcomeId.get(item.id);
-        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: clusterPrice }), bestVenue ? { venue: bestVenue } : {});
-      }
+      var _a2;
       const fallbackPrice = midpointsFallback == null ? void 0 : midpointsFallback.get(item.id);
-      if (fallbackPrice != null) {
-        const bestVenue = midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id);
-        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: fallbackPrice }), bestVenue ? { venue: bestVenue } : {});
+      const bestVenue = getDisplayOutcomeVenue({
+        outcomeId: item.id,
+        outcomeLabel: item.label,
+        selection: tradeSide,
+        bestMidpointVenue: clusterBestMidpointVenue,
+        bestVenueByOutcomeId: clusterVenueByOutcomeId,
+        bestPriceVenuesByOutcomeId: clusterBestPriceVenuesByOutcomeId,
+        fallbackVenue: midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id)
+      });
+      const outcomeBestPrice = getDisplayOutcomePrice({
+        outcomeId: item.id,
+        outcomeLabel: item.label,
+        selection: tradeSide,
+        bestPrices: clusterBestPrices,
+        bestMidpoint: clusterBestMidpoint,
+        bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
+        livePrices: wsLivePrices,
+        fallbackPrice
+      });
+      if (isResolvedMarket) {
+        const isWinningOutcome = item.id === ((_a2 = marketTradingState.winningOutcome) == null ? void 0 : _a2.id);
+        return __spreadValues(__spreadProps(__spreadValues({}, item), {
+          probability: isWinningOutcome ? 1 : 0
+        }), bestVenue ? { venue: bestVenue } : {});
       }
-      const wsPrice = findLivePriceById(wsLivePrices, item.id);
-      return wsPrice != null ? __spreadProps(__spreadValues({}, item), { probability: wsPrice }) : item;
+      if (outcomeBestPrice != null) {
+        return __spreadValues(__spreadProps(__spreadValues({}, item), {
+          probability: outcomeBestPrice
+        }), bestVenue ? { venue: bestVenue } : {});
+      }
+      return item;
     });
   }, [
+    clusterBestMidpoint,
+    clusterBestMidpointVenue,
+    clusterBestMidpointsByOutcomeId,
+    clusterBestPrices,
+    clusterBestPriceVenuesByOutcomeId,
     model,
-    clusterMidpoints,
+    scopedMarketForCard,
     clusterVenueByOutcomeId,
+    isResolvedMarket,
+    (_d = marketTradingState.winningOutcome) == null ? void 0 : _d.id,
     midpointsFallback,
     midpointsFallbackVenues,
+    tradeSide,
     wsLivePrices
   ]);
   const headlineProbability = useMemo6(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
+    if (isResolvedMarket) {
+      const yesOutcome2 = resolveYesOutcome(scopedMarketForCard);
+      if (!yesOutcome2) return void 0;
+      return yesOutcome2.winner === true ? 1 : 0;
+    }
     const yesOutcome = resolveYesOutcome(scopedMarketForCard);
     const displayOutcome = yesOutcome != null ? yesOutcome : (_b2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _b2.reduce(
       (acc, outcome) => outcome.price > acc.price ? outcome : acc,
       (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0]
     );
-    const restPrice = (_c2 = clusterMidpoints.get(displayOutcome.id)) != null ? _c2 : midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id);
-    if (restPrice != null) return restPrice;
+    if (displayOutcome == null) return void 0;
+    const referencePrice = getDisplayOutcomePrice({
+      outcomeId: displayOutcome.id,
+      outcomeLabel: displayOutcome.label,
+      selection: "buy",
+      bestPrices: clusterBestPrices,
+      bestMidpoint: clusterBestMidpoint,
+      bestMidpointsByOutcomeId: clusterBestMidpointsByOutcomeId,
+      livePrices: wsLivePrices,
+      fallbackPrice: (_c2 = midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id)) != null ? _c2 : displayOutcome.price
+    });
+    if (referencePrice != null) return referencePrice;
     return (_d2 = findLivePriceById(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
-  }, [model, scopedMarketForCard, clusterMidpoints, midpointsFallback, wsLivePrices]);
+  }, [
+    clusterBestMidpoint,
+    clusterBestMidpointsByOutcomeId,
+    clusterBestPrices,
+    model,
+    scopedMarketForCard,
+    isResolvedMarket,
+    midpointsFallback,
+    wsLivePrices
+  ]);
   const selectedOutcomesByVenue = useMemo6(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
-      selectedOutcomeLabel
+      selectedOutcomeLabel,
+      // Critical for inversely-framed binaries: pass the exact outcome id so
+      // collectEligibleVenueOutcomes pins to the user's chosen semantic side
+      // instead of falling through to label-matching across other markets
+      // (which surfaces opposite-side outcomes for kalshi per-team No-side).
+      selectedOutcomeId
     });
-  }, [model, selectedOutcomeLabel]);
+  }, [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
+        selectedOutcomeLabel: resolvedChartOutcomeLabel,
+        selectedOutcomeId: chartSelectedOutcomeId
       }),
       livePrices
     });
-  }, [livePrices, model, resolvedChartOutcomeLabel]);
+  }, [livePrices, model, resolvedChartOutcomeLabel, chartSelectedOutcomeId]);
   const chartEnabled = isOpened && effectiveSelectedTab === "graph";
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
-  const timeWindow = useMemo6(() => {
-    return getTimeWindowByRange(effectiveChartTimeRange);
-  }, [effectiveChartTimeRange]);
-  const primaryVenueMarketId = (_e = (_d = selectedOutcomesByVenue[0]) == null ? void 0 : _d.market.id) != null ? _e : null;
-  const primaryOutcomeId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.outcome.id) != null ? _g : null;
-  const chartPrimaryOutcomeId = (_i = (_h = chartOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
+  const rollingWindow = useRollingChartWindow2({ range: effectiveChartTimeRange });
+  const primaryVenueMarketId = (_f = (_e = selectedOutcomesByVenue[0]) == null ? void 0 : _e.market.id) != null ? _f : null;
+  const primaryOutcomeId = (_h = (_g = selectedOutcomesByVenue[0]) == null ? void 0 : _g.outcome.id) != null ? _h : null;
+  const chartPrimaryOutcomeId = (_j = (_i = chartOutcomesByVenue[0]) == null ? void 0 : _i.outcome.id) != null ? _j : null;
   const chartVenueOutcomeIds = useMemo6(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
@@ -3286,12 +3591,43 @@ var MarketDetailsContent = ({
   } = useMarketChart2({
     marketId: chartPrimaryOutcomeId,
     venueMarketIds: chartVenueOutcomeIds,
-    interval: timeRangeToInterval2(effectiveChartTimeRange),
-    startTs: timeWindow.startTs * 1e3,
-    endTs: timeWindow.endTs * 1e3,
+    interval: rollingWindow.interval,
+    startTs: rollingWindow.startTs * 1e3,
+    endTs: rollingWindow.endTs * 1e3,
     enabled: chartEnabled && !!chartPrimaryOutcomeId,
-    live
+    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,
@@ -3345,6 +3681,7 @@ var MarketDetailsContent = ({
       0,
       isDarkTheme
     );
+    const domainStartTs = rollingWindow.startTs;
     return resolveMarketChartDisplaySeries({
       chartData: marketChartData,
       selectedVenue: selectedGraphVenue,
@@ -3354,13 +3691,16 @@ var MarketDetailsContent = ({
         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),
-        points: seriesItem.points
+        // 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,
@@ -3388,11 +3728,19 @@ var MarketDetailsContent = ({
     item,
     shouldNotifyOutcomeSelect = false
   }) => {
+    var _a2, _b2;
     if (isOutcomeSelectionLocked) return;
     if (item == null ? void 0 : item.id) {
-      tradingContext == null ? void 0 : tradingContext.selectOutcome(item.id);
+      const targetMarket = (_a2 = model == null ? void 0 : model.market.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)) {
+        tradingContext == null ? void 0 : tradingContext.selectMarketAndOutcome(targetMarket.id, item.id);
+      } else {
+        tradingContext == null ? void 0 : tradingContext.selectOutcome(item.id);
+      }
       if (shouldNotifyOutcomeSelect && model) {
-        onOutcomeSelect == null ? void 0 : onOutcomeSelect({ marketId: model.market.id, outcomeId: item.id });
+        onOutcomeSelect == null ? void 0 : onOutcomeSelect({ marketId: (_b2 = targetMarket == null ? void 0 : targetMarket.id) != null ? _b2 : model.market.id, outcomeId: item.id });
       }
     }
   };
@@ -3487,26 +3835,24 @@ var MarketDetailsContent = ({
           {
             className: cn(
               "agg-market-card-header",
-              "cursor-pointer",
               "flex flex-col items-stretch gap-3 px-5 py-3 md:flex-row md:flex-nowrap md:items-center md:justify-between",
               isOpened && "pb-3",
               classNames == null ? void 0 : classNames.header
             ),
-            onClick: handleToggleExpanded,
             children: [
               /* @__PURE__ */ jsxs7(
                 "button",
                 {
-                  type: "button",
                   className: cn(
                     "agg-market-card-summary",
                     "flex min-w-0 w-full items-center justify-between gap-4 text-left md:flex-1",
                     "cursor-pointer rounded-agg-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
                   ),
+                  type: "button",
+                  onClick: handleToggleExpanded,
                   "aria-expanded": isOpened,
                   "aria-controls": detailsContentId,
                   "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-                  onClick: handleToggleExpanded,
                   children: [
                     /* @__PURE__ */ jsxs7("div", { className: "agg-market-summary flex min-w-24 flex-1 items-center gap-3 md:gap-4", children: [
                       /* @__PURE__ */ jsx9(
@@ -3535,7 +3881,7 @@ var MarketDetailsContent = ({
                             children: model.subtitle
                           }
                         ) }),
-                        marketTradingState.isTradingDisabled && marketTradingState.kind !== "resolved" && !isUpcomingMarket ? /* @__PURE__ */ jsxs7("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+                        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(
                             "span",
                             {
@@ -3565,75 +3911,60 @@ var MarketDetailsContent = ({
                   ]
                 }
               ),
-              marketTradingState.kind === "resolved" && marketTradingState.winningOutcome ? /* @__PURE__ */ jsx9(
-                "div",
+              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(
+                "span",
                 {
-                  className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0",
-                  onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsxs7(
-                    "span",
-                    {
-                      className: cn(
-                        "w-full md:w-auto md:min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
-                        "border px-5 py-1.5 text-agg-sm font-agg-bold",
-                        getMotionClassName(
-                          enableAnimations,
-                          "transition-[background-color,border-color,color] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"
-                        ),
-                        "border-transparent bg-agg-secondary-hover"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx9(
-                          Icon,
-                          {
-                            name: marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "check-circle" : "cross-circle",
-                            size: "small",
-                            className: cn(
-                              "h-4 w-4",
-                              marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "text-agg-success" : "text-agg-error"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx9(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
-                      ]
-                    }
-                  )
+                  className: cn(
+                    "w-full md:w-auto md:min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
+                    "border px-5 py-1.5 text-agg-sm font-agg-bold",
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[background-color,border-color,color] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                    ),
+                    "border-transparent bg-agg-secondary-hover"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx9(
+                      Icon,
+                      {
+                        name: marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "check-circle" : "cross-circle",
+                        size: "small",
+                        className: cn(
+                          "h-4 w-4",
+                          marketTradingState.winningOutcome.label.trim().toLowerCase() === "yes" ? "text-agg-success" : "text-agg-error"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9(Typography, { variant: "body", children: labels.eventMarketPage.resolvedOutcome(marketTradingState.winningOutcome.label) })
+                  ]
                 }
-              ) : isUpcomingMarket ? /* @__PURE__ */ jsx9(
-                "div",
+              ) }) : isUpcomingMarket ? /* @__PURE__ */ jsx9("div", { className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0", children: /* @__PURE__ */ jsxs7(
+                "span",
                 {
-                  className: "agg-outcomes flex w-full items-center justify-end md:w-auto md:shrink-0",
-                  onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsxs7(
-                    "span",
-                    {
-                      className: cn(
-                        "min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
-                        "border px-5 py-1.5 text-agg-xs font-agg-bold uppercase tracking-[0.08em]",
-                        resolveTradingStateBadgeClassName(marketTradingState.kind)
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx9(
-                          Icon,
-                          {
-                            name: marketStatePresentation.iconName,
-                            size: "small",
-                            className: "h-3.5 w-3.5",
-                            "aria-hidden": "true"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
-                      ]
-                    }
-                  )
+                  className: cn(
+                    "min-w-35 inline-flex h-9 items-center justify-center gap-2 rounded-agg-full",
+                    "border px-5 py-1.5 text-agg-xs font-agg-bold uppercase tracking-[0.08em]",
+                    resolveTradingStateBadgeClassName(marketTradingState.kind)
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx9(
+                      Icon,
+                      {
+                        name: marketStatePresentation.iconName,
+                        size: "small",
+                        className: "h-3.5 w-3.5",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9("span", { children: marketStatePresentation.badgeLabel })
+                  ]
                 }
-              ) : /* @__PURE__ */ jsx9(
+              ) }) : /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "agg-outcomes flex w-full flex-wrap gap-2 md:w-auto md:shrink-0 md:flex-nowrap",
                   role: "tablist",
                   "aria-label": labels.marketDetails.marketOutcomesAria,
-                  onClick: (e) => e.stopPropagation(),
                   onKeyDown: (eventToHandle) => handleOutcomeKeyDown(eventToHandle),
                   children: headerOutcomeItems.map((item) => {
                     const isActiveOutcome = item.id === selectedOutcomeId;
@@ -3751,7 +4082,7 @@ var MarketDetailsContent = ({
                             height: 260,
                             isLoading: isMarketChartLoading,
                             chartType: selectedChartType,
-                            liveCandle: selectedChartType === "candlestick" ? (_j = graphLiveState.liveCandle) != null ? _j : void 0 : void 0,
+                            liveCandle: selectedChartType === "candlestick" ? (_k = graphLiveState.liveCandle) != null ? _k : void 0 : void 0,
                             lineValue: graphLiveState.lineValue,
                             classNames: { root: "agg-chart-region w-full" },
                             showSeriesControls: chartAvailableOutcomesByVenue.length > 0 || headerOutcomeItems.length > 0,
@@ -3807,12 +4138,12 @@ var MarketDetailsContent = ({
                                       setChartOutcomeLabel(outcome.label);
                                     },
                                     options: headerOutcomeItems.map((outcome) => {
+                                      var _a3, _b3;
                                       const price = outcome.probability;
-                                      const outcomeLabel = `${outcome.label} ${formatProbabilityCents(price)}`;
                                       return {
                                         value: outcome.id,
-                                        label: outcomeLabel,
-                                        ariaLabel: outcomeLabel
+                                        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)}`
                                       };
                                     })
                                   }
@@ -3867,6 +4198,7 @@ var MarketDetailsContent = ({
                                         e.preventDefault();
                                         e.stopPropagation();
                                         if (isDisabled) return;
+                                        setChartRangeOverride(null);
                                         setSelectedTimeRange(timeRange);
                                       },
                                       children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
@@ -3903,8 +4235,16 @@ var MarketDetailsContent = ({
 };
 var MarketDetails = (_a) => {
   var _b = _a, { isOpened } = _b, props = __objRest(_b, ["isOpened"]);
+  const labels = useLabels6();
   if (props.isLoading) {
-    return /* @__PURE__ */ jsx9(MarketDetailsLoadingState, { isOpened, classNames: props.classNames });
+    return /* @__PURE__ */ jsx9(
+      Skeleton,
+      {
+        view: "market-details-minified",
+        className: cn("agg-market-list-item"),
+        ariaLabel: labels.marketDetails.loading
+      }
+    );
   }
   if ("venueMarkets" in props && props.venueMarkets) {
     return /* @__PURE__ */ jsx9(
@@ -3969,16 +4309,17 @@ var MarketDetailsList = ({
   onClick,
   onOutcomeSelect,
   onExpandedMarketChange,
+  autoSelectFallbackMarket = true,
   defaultTab,
   classNames,
-  live
+  live,
+  midpointsResult
 }) => {
   var _a, _b;
   const labels = useLabels6();
-  const tradingContext = useEventTradingContext2();
+  const tradingContext = useEventTradingContext3();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = useState4(selectedMarketId);
-  const previousSelectedMarketIdRef = useRef5(selectedMarketId);
+  const [expandedMarketId, setExpandedMarketId] = useState4(null);
   const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState4(false);
   const resolvedEventId = eventId || "";
   const {
@@ -4052,7 +4393,12 @@ var MarketDetailsList = ({
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(displayedMarkets);
+  const midpointEligibleMarkets = useMemo6(() => {
+    return displayedMarkets.filter(
+      (market) => resolveMarketTradingState(market).kind !== "resolved"
+    );
+  }, [displayedMarkets]);
+  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(midpointEligibleMarkets);
   useEffect4(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
@@ -4062,13 +4408,6 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  useEffect4(() => {
-    if (previousSelectedMarketIdRef.current === selectedMarketId) return;
-    previousSelectedMarketIdRef.current = selectedMarketId;
-    if (!selectedMarketId) return;
-    if (!displayedMarkets.some((market) => market.id === selectedMarketId)) return;
-    setExpandedMarketId(selectedMarketId);
-  }, [displayedMarkets, selectedMarketId]);
   useEffect4(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
@@ -4083,21 +4422,14 @@ var MarketDetailsList = ({
     if (!fallbackSelectableMarket) {
       return;
     }
-    if (!expandedMarketId) {
-      setExpandedMarketId(fallbackSelectableMarket.id);
-    }
+    if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
-  }, [displayedMarkets, expandedMarketId, selectedMarketId, sourceMarkets, tradingContext]);
+  }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
   useEffect4(() => {
-    var _a2, _b2;
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
-    if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
-      setExpandedMarketId(selectedMarketId);
-      return;
-    }
-    setExpandedMarketId((_b2 = (_a2 = displayedMarkets[0]) == null ? void 0 : _a2.id) != null ? _b2 : null);
-  }, [displayedMarkets, expandedMarketId, selectedMarketId]);
+    setExpandedMarketId(null);
+  }, [displayedMarkets, expandedMarketId]);
   const handleToggle = (marketId, market) => {
     if (marketId === expandedMarketId) {
       setExpandedMarketId(null);
@@ -4111,22 +4443,14 @@ var MarketDetailsList = ({
     tradingContext == null ? void 0 : tradingContext.selectMarket(market.id, market);
   };
   if (!hasPrefetchedMarkets && isLoading) {
-    return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
-      /* @__PURE__ */ jsx9(
-        MarketDetailsLoadingState,
-        {
-          isOpened: true,
-          classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) }
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        MarketDetailsLoadingState,
-        {
-          isOpened: false,
-          classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) }
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx9(
+      Skeleton,
+      {
+        view: "market-details-minified",
+        className: cn("agg-market-list-item"),
+        ariaLabel: labels.marketDetails.loading
+      }
+    );
   }
   if (!hasPrefetchedMarkets && error) {
     return /* @__PURE__ */ jsx9(
@@ -4157,17 +4481,25 @@ var MarketDetailsList = ({
       marketId: market.id,
       venueMarkets: sourceMarkets,
       isOpened: expandedMarketId === market.id,
+      suppressOutcomeFallbackSelection: market.id !== selectedMarketId,
       onOpenChange: (marketId) => {
         onClick == null ? void 0 : onClick(market);
         handleToggle(marketId, market);
       },
-      onOutcomeSelect,
+      onOutcomeSelect: (selection) => {
+        if (selection.marketId !== expandedMarketId) {
+          setExpandedMarketId(selection.marketId);
+          onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(selection.marketId);
+        }
+        onOutcomeSelect == null ? void 0 : onOutcomeSelect(selection);
+      },
       defaultTab,
       ariaLabel: market.question,
       classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) },
       live,
       midpointsFallback,
-      midpointsFallbackVenues
+      midpointsFallbackVenues,
+      midpointsResult
     }
   ) }, market.id);
   return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
@@ -4177,7 +4509,7 @@ var MarketDetailsList = ({
       {
         variant: "tertiary",
         size: "small",
-        className: "agg-market-view-resolved-toggle self-start",
+        className: "agg-market-view-resolved-toggle self-start my-2",
         onClick: () => {
           setAreResolvedMarketsVisible((isVisible) => !isVisible);
         },
@@ -4200,13 +4532,87 @@ var MarketDetailsList = ({
 MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
-import { MarketStatus as MarketStatus2, useAppConfig as useAppConfig2, useLabels as useLabels8, useVenueEvents } from "@agg-build/hooks";
+import {
+  MarketStatus as MarketStatus2,
+  useAppConfig as useAppConfig2,
+  useCategories,
+  useLabels as useLabels8,
+  useSdkUiConfig as useSdkUiConfig4,
+  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 useMemo8, useRef as useRef7, useState as useState6 } from "react";
 
 // src/events/list/event-list-tabs.tsx
 import { useAppConfig, useLabels as useLabels7 } from "@agg-build/hooks";
 import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6, useState as useState5 } from "react";
+
+// src/events/list/event-list.constants.ts
+import { MatchStatus, Venue as Venue2 } from "@agg-build/sdk";
+var DEFAULT_EVENTS_LIMIT = 50;
+var getDefaultEventListTabs = (labels) => {
+  return [
+    {
+      value: "matched",
+      label: labels.eventList.matchedTab,
+      iconName: "circle-overlap",
+      matchStatus: [MatchStatus.matched, MatchStatus.verified]
+    },
+    {
+      value: "all",
+      label: labels.eventList.allTab,
+      iconName: "apps"
+    },
+    {
+      value: Venue2.polymarket,
+      label: labels.venues.polymarket,
+      venueLogo: Venue2.polymarket,
+      venues: [Venue2.polymarket]
+    },
+    {
+      value: Venue2.kalshi,
+      label: labels.venues.kalshi,
+      venueLogo: Venue2.kalshi,
+      venues: [Venue2.kalshi]
+    },
+    {
+      value: Venue2.limitless,
+      label: labels.venues.limitless,
+      venueLogo: Venue2.limitless,
+      venues: [Venue2.limitless]
+    },
+    {
+      value: Venue2.predict,
+      label: labels.venues.predict,
+      venueLogo: Venue2.predict,
+      venues: [Venue2.predict]
+    },
+    {
+      value: Venue2.hyperliquid,
+      label: labels.venues.hyperliquid,
+      venueLogo: Venue2.hyperliquid,
+      venues: [Venue2.hyperliquid]
+      // isComingSoon: true,
+    },
+    {
+      value: Venue2.myriad,
+      label: labels.venues.myriad,
+      venueLogo: Venue2.myriad,
+      venues: [Venue2.myriad]
+      // isComingSoon: true,
+    },
+    {
+      value: Venue2.opinion,
+      label: labels.venues.opinion,
+      venueLogo: Venue2.opinion,
+      venues: [Venue2.opinion],
+      isComingSoon: true
+    }
+  ];
+};
+
+// src/events/list/event-list-tabs.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
@@ -4274,12 +4680,13 @@ var EventListTabs = ({
   );
 };
 EventListTabs.displayName = "EventListTabs";
-var useEventListTabsHeaderOverflow = (recomputeOn) => {
+var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
   const headerRef = useRef6(null);
   const titleRef = useRef6(null);
   const requiredTabsWidthRef = useRef6(0);
   const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState5(false);
   const updateTabsOverflowBehavior = useCallback3(() => {
+    var _a;
     if (typeof window === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4292,6 +4699,16 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
       setShouldUseSelectOverflow(true);
       return;
     }
+    const minTabsInlineWidthForSelect = options == null ? void 0 : options.minTabsInlineWidthForSelect;
+    if (typeof minTabsInlineWidthForSelect === "number" && availableTabsWidth < minTabsInlineWidthForSelect) {
+      setShouldUseSelectOverflow(true);
+      return;
+    }
+    const preferSelectOnOverflow = (_a = options == null ? void 0 : options.preferSelectOnOverflow) != null ? _a : true;
+    if (!preferSelectOnOverflow) {
+      setShouldUseSelectOverflow(false);
+      return;
+    }
     const tabListElement = headerElement.querySelector(".agg-tab-list");
     if (tabListElement) {
       const currentRequiredWidth = tabListElement.scrollWidth;
@@ -4304,7 +4721,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
     }
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
-  }, []);
+  }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
   useEffect5(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
@@ -4336,7 +4753,25 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
 };
 
 // src/events/list/index.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var SORT_ICON_BY_VALUE = {
+  volume24hr: "sort-volume-24hr",
+  topArbitrage: "sort-top-arbitrage",
+  volume: "sort-volume",
+  endDate: "sort-end-date"
+};
+var resolveSortQueryParams = (value) => {
+  if (value === "volume") {
+    return { sortBy: "volume", sortDir: "desc" };
+  }
+  if (value === "endDate") {
+    return { sortBy: "endDate", sortDir: "asc" };
+  }
+  if (value === "topArbitrage") {
+    return {};
+  }
+  return { sortBy: "volume24hr", sortDir: "desc" };
+};
 var EventList = ({
   title,
   limit = DEFAULT_EVENTS_LIMIT,
@@ -4351,9 +4786,13 @@ var EventList = ({
   initialLoadedPageCount,
   stateRef
 }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const labels = useLabels8();
   const { disabledVenues } = useAppConfig2();
+  const {
+    features: { enableVenueEventDiscoveryFilters }
+  } = useSdkUiConfig4();
+  const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
   const visibleVenues = useMemo8(
     () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
@@ -4364,7 +4803,90 @@ var EventList = ({
   const [activeTabValue, setActiveTabValue] = useState6(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs);
+  const [selectedSort, setSelectedSort] = useState6("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState6(false);
+  const [selectedParentCategoryId, setSelectedParentCategoryId] = useState6(null);
+  const [selectedSubcategoryId, setSelectedSubcategoryId] = useState6(null);
+  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
+  const sortItems = useMemo8(() => {
+    return [
+      {
+        value: "volume24hr",
+        label: labels.eventList.sortBy24hVolume,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+      },
+      {
+        value: "topArbitrage",
+        label: labels.eventList.sortByTopArbitrage,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" }),
+        disabled: true,
+        hidden: true
+      },
+      {
+        value: "volume",
+        label: labels.eventList.sortByTotalVolume,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+      },
+      {
+        value: "endDate",
+        label: labels.eventList.sortByEndingSoon,
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+      }
+    ];
+  }, [
+    labels.eventList.sortBy24hVolume,
+    labels.eventList.sortByEndingSoon,
+    labels.eventList.sortByTopArbitrage,
+    labels.eventList.sortByTotalVolume
+  ]);
+  const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
+  useEffect6(() => {
+    if (!isDiscoveryFiltersEnabled) return;
+    setSelectedParentCategoryId(baseCategoryId);
+    setSelectedSubcategoryId(null);
+  }, [baseCategoryId, isDiscoveryFiltersEnabled]);
+  const { categories: topLevelCategories } = useCategories({
+    queryKeyScope: "event-list-top-categories",
+    enabled: isDiscoveryFiltersEnabled,
+    limit: 100
+  });
+  const { categories: subcategories } = useCategories({
+    queryKeyScope: "event-list-subcategories",
+    enabled: isDiscoveryFiltersEnabled && Boolean(baseCategoryId),
+    parentId: baseCategoryId,
+    limit: 100
+  });
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && Boolean(baseCategoryId) && subcategories.length > 0;
+  console.log({
+    enableVenueEventDiscoveryFilters,
+    shouldRenderSubcategoryFilters,
+    isDiscoveryFiltersEnabled,
+    baseCategoryId,
+    subcategories
+  });
+  const totalTopLevelEventCount = useMemo8(() => {
+    return topLevelCategories.reduce((accumulator, category) => {
+      var _a2;
+      return accumulator + ((_a2 = category.eventCount) != null ? _a2 : 0);
+    }, 0);
+  }, [topLevelCategories]);
+  const selectedParentEventCount = useMemo8(() => {
+    var _a2;
+    if (!baseCategoryId) return totalTopLevelEventCount;
+    const selectedParentCategory = topLevelCategories.find(
+      (category) => category.id === baseCategoryId
+    );
+    return (_a2 = selectedParentCategory == null ? void 0 : selectedParentCategory.eventCount) != null ? _a2 : totalTopLevelEventCount;
+  }, [baseCategoryId, topLevelCategories, totalTopLevelEventCount]);
+  const resolvedCategoryIds = useMemo8(() => {
+    if (!isDiscoveryFiltersEnabled) return categoryIds;
+    if (selectedSubcategoryId) return [selectedSubcategoryId];
+    if (selectedParentCategoryId) return [selectedParentCategoryId];
+    return categoryIds;
+  }, [categoryIds, isDiscoveryFiltersEnabled, selectedParentCategoryId, selectedSubcategoryId]);
+  const sortQueryParams = useMemo8(() => {
+    return resolveSortQueryParams(selectedSort);
+  }, [selectedSort]);
   const activeTab = useMemo8(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
@@ -4396,23 +4918,19 @@ var EventList = ({
     isFetchingNextPage,
     isPlaceholderData,
     loadedPageCount
-  } = useVenueEvents(__spreadProps(__spreadValues({
+  } = useVenueEvents({
     queryKeyScope: "event-list",
     venues,
     search,
-    categoryIds,
+    categoryIds: resolvedCategoryIds,
     matchStatus,
     limit: requestLimit,
     status: [MarketStatus2.open],
-    sortBy: "volume24hr",
-    sortDir: "desc",
-    endDateFrom
-  }, !search ? {
-    minYesPrice: 0.03,
-    maxYesPrice: 0.97
-  } : {}), {
+    sortBy: sortQueryParams.sortBy,
+    sortDir: sortQueryParams.sortDir,
+    endDateFrom,
     initialPages: initialLoadedPageCount
-  }));
+  });
   useEffect6(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
@@ -4461,6 +4979,54 @@ var EventList = ({
   const gridClassName = cn(
     "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4"
   );
+  const isAllSubcategoriesSelected = shouldRenderSubcategoryFilters && !selectedSubcategoryId;
+  const handleSelectAllCategories = () => {
+    setSelectedParentCategoryId(baseCategoryId);
+    setSelectedSubcategoryId(null);
+    setIsSubcategoriesModalOpen(false);
+  };
+  const handleSelectSubcategory = (subcategoryId) => {
+    setSelectedSubcategoryId(subcategoryId);
+    setIsSubcategoriesModalOpen(false);
+  };
+  const subcategoriesListContent = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex w-full items-center justify-between rounded-[6px] px-3 py-3 text-left text-agg-sm leading-agg-5",
+          isAllSubcategoriesSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground"
+        ),
+        onClick: handleSelectAllCategories,
+        children: [
+          /* @__PURE__ */ jsx11("span", { children: labels.eventList.subcategoriesAll }),
+          /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: selectedParentEventCount })
+        ]
+      }
+    ),
+    subcategories.map((subcategory) => {
+      var _a2;
+      const isSubcategorySelected = selectedSubcategoryId === subcategory.id;
+      return /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "flex w-full items-center justify-between rounded-[6px] px-3 py-3 text-left text-agg-sm leading-agg-5",
+            "cursor-pointer",
+            isSubcategorySelected ? "bg-agg-secondary-hover font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-foreground"
+          ),
+          onClick: () => handleSelectSubcategory(subcategory.id),
+          children: [
+            /* @__PURE__ */ jsx11("span", { className: "truncate first-letter:uppercase", children: subcategory.name }),
+            /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: (_a2 = subcategory.eventCount) != null ? _a2 : 0 })
+          ]
+        },
+        subcategory.id
+      );
+    })
+  ] });
   if (shouldRenderLoadingState) {
     return /* @__PURE__ */ jsx11(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
   }
@@ -4476,61 +5042,144 @@ var EventList = ({
         ),
         children: [
           /* @__PURE__ */ jsx11("div", { ref: titleRef, className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ jsx11(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title }) }),
-          /* @__PURE__ */ jsx11(
-            EventListTabs,
-            {
-              ariaLabel: labels.eventList.tabsAria(title),
-              className: "agg-event-list-tabs min-w-0 max-w-full",
-              activeTab: activeTabValue,
-              onTabChange: setActiveTabValue,
-              overflowBehavior: shouldUseSelectOverflow ? "select" : void 0
-            }
-          )
+          /* @__PURE__ */ jsxs8("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ jsx11(
+              EventListTabs,
+              {
+                ariaLabel: labels.eventList.tabsAria(title),
+                className: cn(
+                  "agg-event-list-tabs w-fit max-w-full flex-1",
+                  shouldUseSelectOverflow ? "min-w-[220px]" : "min-w-[400px]"
+                ),
+                activeTab: activeTabValue,
+                onTabChange: setActiveTabValue,
+                overflowBehavior: shouldUseSelectOverflow ? "select" : "scroll"
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              Select,
+              {
+                ariaLabel: labels.eventList.sortByLabel,
+                className: "min-w-[160px] w-auto! shrink-0 min-h-10.5",
+                value: selectedSort,
+                onChange: setSelectedSort,
+                items: sortItems,
+                contentClassName: "py-2"
+              }
+            )
+          ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: cn("agg-event-list-grid", isPlaceholderData && "opacity-60", gridClassName), children: [
-      tileEvents.map((event) => /* @__PURE__ */ jsx11(
-        EventListItem,
-        {
-          event,
-          classNames: {
-            root: "agg-event-list-item w-full min-w-0 max-w-none"
-          },
-          onEventClick,
-          onMarketClick,
-          getMarketHref,
-          href: getEventHref == null ? void 0 : getEventHref(event)
-        },
-        event.id
-      )),
-      shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
-        EventListItem,
+    /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-2 md:hidden", children: [
+      /* @__PURE__ */ jsx11(
+        EventListTabs,
         {
-          isLoading: true,
-          classNames: {
-            root: "agg-event-list-item w-full min-w-0 max-w-none"
-          }
-        },
-        `loading-${index}`
-      )) : null,
-      shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
-        StateMessage,
+          ariaLabel: labels.eventList.tabsAria(title),
+          className: "agg-event-list-tabs min-w-0 flex-1",
+          activeTab: activeTabValue,
+          onTabChange: setActiveTabValue,
+          overflowBehavior: "select"
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Select,
         {
-          title: labels.eventList.emptyTitle,
-          description: labels.eventList.emptyDescription,
-          icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+          ariaLabel: labels.eventList.sortByLabel,
+          className: "min-w-0 flex-1 md:min-w-[144px]",
+          value: selectedSort,
+          onChange: setSelectedSort,
+          items: sortItems,
+          contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
-      ) }) : null,
-      isError ? /* @__PURE__ */ jsx11(
-        StateMessage,
+      ),
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(
+        "button",
         {
-          title: labels.eventList.errorTitle,
-          description: labels.eventList.errorDescription,
-          icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+          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__ */ jsx11(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
+        children: [
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11("aside", { className: "hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: subcategoriesListContent }) }) : null,
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: cn(
+                "agg-event-list-grid",
+                "w-full",
+                isPlaceholderData && "opacity-60",
+                gridClassName
+              ),
+              children: [
+                tileEvents.map((event) => /* @__PURE__ */ jsx11(
+                  EventListItem,
+                  {
+                    event,
+                    classNames: {
+                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                    },
+                    onEventClick,
+                    onMarketClick,
+                    getMarketHref,
+                    href: getEventHref == null ? void 0 : getEventHref(event),
+                    marketStatus: MarketStatus2.open
+                  },
+                  event.id
+                )),
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx11(
+                  EventListItem,
+                  {
+                    isLoading: true,
+                    classNames: {
+                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                    }
+                  },
+                  `loading-${index}`
+                )) : null,
+                shouldRenderEmptyState ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                  StateMessage,
+                  {
+                    title: labels.eventList.emptyTitle,
+                    description: labels.eventList.emptyDescription,
+                    icon: /* @__PURE__ */ jsx11(Icon, { name: "search-empty" })
+                  }
+                ) }) : null,
+                isError ? /* @__PURE__ */ jsx11("div", { className: "col-span-full w-full", children: /* @__PURE__ */ jsx11(
+                  StateMessage,
+                  {
+                    title: labels.eventList.errorTitle,
+                    description: labels.eventList.errorDescription,
+                    icon: /* @__PURE__ */ jsx11(Icon, { name: "warning" })
+                  }
+                ) }) : null
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ jsx11(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ jsxs8(
+      Modal.Container,
+      {
+        classNames: {
+          content: "items-end p-0",
+          container: "w-full max-w-none border-0 bg-transparent shadow-none"
+        },
+        children: [
+          /* @__PURE__ */ jsx11(Dialog.Title, { className: "sr-only", children: labels.eventList.subcategoriesLabel }),
+          /* @__PURE__ */ jsx11("div", { className: "w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-1", children: subcategoriesListContent }) })
+        ]
+      }
+    ) }) : null,
     shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx11("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
@@ -4550,6 +5199,7 @@ export {
   Orderbook,
   MarketDetails,
   MarketDetailsList,
+  DEFAULT_EVENTS_LIMIT,
   useEventListTabs,
   EventListTabs,
   useEventListTabsHeaderOverflow,