@agg-build/ui 1.2.12 → 1.3.0

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

@@ -20,10 +20,9 @@ import {
   resolveTradingStateBadgeClassName,
   resolveTradingStatePresentation,
   resolveUnifiedOrderBookEntries,
-  selectOutcomePrice,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-IBOE7DRY.mjs";
+} from "./chunk-UFC7L74C.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -48,12 +47,10 @@ import {
   __objRest,
   __spreadProps,
   __spreadValues,
-  baseCardClassName,
   cn,
   dedupeVenueMarketsById,
   detailsBaseCardClassName,
   filterEventsByTabValue,
-  formatCountLabel,
   formatMarketProbabilityPercent,
   formatPriceGapPercent,
   getMarketDetailsTabs,
@@ -64,22 +61,24 @@ import {
   normalizeProbability,
   normalizeVenueMarketCluster,
   orderBookRowLimitDefault,
+  resolveCategoryIdsFromPath,
   resolveDisplayVolume,
   resolveEventListItemEvent,
   resolveOutcomeTitle,
   resolveTabVenus,
+  resolveVenueLabel,
   resolveYesOutcome,
+  sortCategoriesForNavigation,
+  sortMarketsByVolumeDesc,
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-X3KCFWXN.mjs";
+} from "./chunk-QUZWA34R.mjs";
 
 // src/events/item/index.tsx
 import {
-  computePriceGaps,
   optimizedImageUrl,
   sortVenues,
-  useEventTradingContext as useEventTradingContext2,
   useLabels,
   useMidpoints,
   useSdkUiConfig,
@@ -99,34 +98,155 @@ 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() : "";
+// src/events/item/event-list-item-v2.utils.ts
+var isNonEmptyString = (value) => {
+  return typeof value === "string" && value.trim().length > 0;
 };
-var getDisplayOutcomeVenue = ({
-  outcomeId,
-  outcomeLabel,
-  selection,
-  bestMidpointVenue,
-  bestVenueByOutcomeId,
-  bestPriceVenuesByOutcomeId,
-  fallbackVenue
-}) => {
+var getOutcomeSortPrice = (outcome) => {
   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;
+  return (_a = normalizeProbability(outcome.price)) != null ? _a : -1;
+};
+var MAX_VISIBLE_OUTCOME_PRICE_PILLS = 3;
+var resolveDisplayOutcome = (market) => {
+  var _a;
+  return (_a = resolveYesOutcome(market)) != null ? _a : [...market.venueMarketOutcomes].sort((left, right) => {
+    return getOutcomeSortPrice(right) - getOutcomeSortPrice(left);
+  })[0];
+};
+var resolveOutcomeRows = ({
+  venueMarkets,
+  marketCount
+}) => {
+  if (venueMarkets.length === 0) return [];
+  if (marketCount === 1 && venueMarkets.length === 1) {
+    const [market] = venueMarkets;
+    return sortOutcomes(market.venueMarketOutcomes).map((outcome) => ({
+      id: outcome.id,
+      label: resolveOutcomeTitle(outcome),
+      market,
+      outcome
+    }));
   }
-  if (normalizeOutcomeLabel(outcomeLabel) === "yes" && bestMidpointVenue) {
-    return bestMidpointVenue;
+  return sortMarketsByYesOddsDesc(venueMarkets).map((market) => {
+    const outcome = resolveDisplayOutcome(market);
+    if (!outcome) return void 0;
+    return {
+      id: market.id,
+      label: isNonEmptyString(market.question) ? market.question : resolveOutcomeTitle(outcome),
+      market,
+      outcome
+    };
+  }).filter((row) => row != null);
+};
+var collectOutcomePrices = (market, outcome, priceByOutcomeId) => {
+  var _a, _b, _c;
+  const prices = [];
+  const seenOutcomeKeys = /* @__PURE__ */ new Set();
+  const addPrice = (priceMarket, priceOutcome) => {
+    var _a2;
+    if (!priceMarket || !priceOutcome) return;
+    const resolvedPrice = (_a2 = priceByOutcomeId == null ? void 0 : priceByOutcomeId.get(priceOutcome.id)) != null ? _a2 : priceOutcome.price;
+    const normalizedPrice = normalizeProbability(resolvedPrice);
+    if (normalizedPrice == null) return;
+    const key = `${priceMarket.id}:${priceOutcome.id}`;
+    if (seenOutcomeKeys.has(key)) return;
+    seenOutcomeKeys.add(key);
+    prices.push({
+      venue: priceMarket.venue,
+      market: priceMarket,
+      outcome: priceOutcome,
+      price: normalizedPrice,
+      isBest: false
+    });
+  };
+  addPrice(market, outcome);
+  for (const matchedOutcomeRef of (_a = outcome.matchedVenueMarketOutcomes) != null ? _a : []) {
+    const matchedMarket = (_b = market.matchedVenueMarkets) == null ? void 0 : _b.find((candidate) => {
+      return candidate.id === matchedOutcomeRef.venueMarketId;
+    });
+    const matchedOutcome = (_c = matchedMarket == null ? void 0 : matchedMarket.venueMarketOutcomes) == null ? void 0 : _c.find((candidate) => {
+      return candidate.id === matchedOutcomeRef.venueMarketOutcomeId;
+    });
+    addPrice(matchedMarket, matchedOutcome);
   }
-  const bestVenue = outcomeId ? bestVenueByOutcomeId == null ? void 0 : bestVenueByOutcomeId.get(outcomeId) : void 0;
-  return (_a = bestVenue != null ? bestVenue : fallbackVenue) != null ? _a : void 0;
+  if (prices.length === 0) return [];
+  const bestPriceByVenue = /* @__PURE__ */ new Map();
+  for (const price of prices) {
+    const existing = bestPriceByVenue.get(price.venue);
+    if (!existing || price.price < existing.price) {
+      bestPriceByVenue.set(price.venue, price);
+    }
+  }
+  const dedupedPrices = Array.from(bestPriceByVenue.values());
+  const sortedPricesByBestOdds = [...dedupedPrices].sort((left, right) => {
+    return left.price - right.price;
+  });
+  const bestPrice = sortedPricesByBestOdds[0];
+  if (!bestPrice) return [];
+  const visiblePrices = [
+    sortedPricesByBestOdds.at(-1),
+    sortedPricesByBestOdds[1],
+    bestPrice
+  ].reduce((accumulator, price) => {
+    if (!price) return accumulator;
+    const isDuplicate = accumulator.some((candidate) => {
+      return candidate.market.id === price.market.id && candidate.outcome.id === price.outcome.id;
+    });
+    if (isDuplicate) return accumulator;
+    accumulator.push(price);
+    return accumulator;
+  }, []);
+  return visiblePrices.slice(0, MAX_VISIBLE_OUTCOME_PRICE_PILLS).map((price) => __spreadProps(__spreadValues({}, price), {
+    isBest: price.market.id === bestPrice.market.id && price.outcome.id === bestPrice.outcome.id
+  }));
+};
+var collectMatchedVenues = (rows) => {
+  const venues = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    if (row.prices.length < 2) continue;
+    for (const price of row.prices) {
+      venues.add(price.venue);
+    }
+  }
+  return Array.from(venues);
+};
+var computePriceGapsFromComparisonRows = (rows) => {
+  const gapsByVenueMarketId = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    if (row.prices.length < 2) continue;
+    const prices = row.prices.map((price) => price.price);
+    const minPrice = Math.min(...prices);
+    const maxPrice = Math.max(...prices);
+    if (minPrice <= 0 || maxPrice <= minPrice) continue;
+    gapsByVenueMarketId.set(row.market.id, (maxPrice - minPrice) * 100);
+  }
+  return gapsByVenueMarketId;
+};
+var normalizeEventListItemV2Comparison = ({
+  venueMarkets,
+  marketCount,
+  priceByOutcomeId
+}) => {
+  const outcomeRows = resolveOutcomeRows({ venueMarkets, marketCount });
+  const rows = outcomeRows.map((row) => {
+    const prices = collectOutcomePrices(row.market, row.outcome, priceByOutcomeId);
+    return __spreadProps(__spreadValues({}, row), {
+      prices
+    });
+  });
+  const matchedVenues = collectMatchedVenues(rows);
+  return {
+    rows,
+    matchedVenues,
+    hasVenueCompetition: matchedVenues.length > 1
+  };
 };
 
+// src/events/item/event-list-item.constants.ts
+var baseCardClassName = "gap-3 overflow-hidden p-4 w-full";
+
 // src/events/item/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var EventListItemLoadingState = ({
   classNames,
   ariaLabel
@@ -188,6 +308,25 @@ var EventListItemNotFoundState = ({
 var OUTCOMES_SCROLL_LOAD_THRESHOLD_PX = 16;
 var MARKET_ID_QUERY_PARAM = "marketId";
 var OUTCOME_ID_QUERY_PARAM = "outcomeId";
+var buildOutcomeMidpointsByOutcomeId = (midpointRows) => {
+  const outcomeMidpointsByOutcomeId = /* @__PURE__ */ new Map();
+  const addOutcomeMidpoints = (value) => {
+    var _a, _b;
+    if (!value || typeof value !== "object") return;
+    const row = value;
+    for (const outcome of (_a = row.outcomes) != null ? _a : []) {
+      if (outcome.midpoint == null) continue;
+      outcomeMidpointsByOutcomeId.set(outcome.venueMarketOutcomeId, outcome.midpoint);
+    }
+    for (const matchedRow of (_b = row.matched) != null ? _b : []) {
+      addOutcomeMidpoints(matchedRow);
+    }
+  };
+  for (const row of midpointRows) {
+    addOutcomeMidpoints(row);
+  }
+  return outcomeMidpointsByOutcomeId;
+};
 var resolveMarketHrefFromEventHref = (eventHref, marketId, outcomeId) => {
   if (!eventHref) return void 0;
   if (typeof window === "undefined") return void 0;
@@ -214,8 +353,6 @@ var EventListItemContent = ({
   var _a;
   const config = useSdkUiConfig();
   const labels = useLabels();
-  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;
@@ -262,32 +399,42 @@ var EventListItemContent = ({
     }
     return [...new Set(ids)];
   }, [resolvedOutcomeMarkets]);
-  const {
-    midpointsByVenueMarketId,
-    isLoading: isLoadingMidpoints,
-    isFetching: isFetchingMidpoints
-  } = useVenueMarketMidpoints({
+  const { midpointRows, isLoading: isVenueMarketMidpointsLoading } = useVenueMarketMidpoints({
     venueMarketIds: midpointVenueMarketIds,
     enabled: midpointVenueMarketIds.length > 0
   });
-  const {
-    prices: displayMidpointsByOutcomeId,
-    venueByOutcomeId: displayMidpointVenueByOutcomeId,
-    bestPrices: displayBestPricesByOutcomeId,
-    bestPriceVenuesByOutcomeId: displayBestPriceVenuesByOutcomeId,
-    isLoading: isDisplayMidpointsLoading
-  } = useMidpoints(resolvedOutcomeMarkets);
-  const gapsByVenueMarketId = useMemo(
-    () => computePriceGaps({
-      markets: resolvedOutcomeMarkets,
-      midpointsByVenueMarketId
-    }),
-    [resolvedOutcomeMarkets, midpointsByVenueMarketId]
-  );
-  const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints || isDisplayMidpointsLoading;
+  const { prices: displayMidpointsByOutcomeId, isLoading: isOutcomeMidpointsLoading } = useMidpoints(resolvedOutcomeMarkets);
+  const isAwaitingMidpoints = isOutcomeMidpointsLoading || midpointVenueMarketIds.length > 0 && isVenueMarketMidpointsLoading;
+  const displayPriceByOutcomeId = useMemo(() => {
+    const priceByOutcomeId = new Map(displayMidpointsByOutcomeId);
+    for (const [outcomeId, price] of buildOutcomeMidpointsByOutcomeId(midpointRows)) {
+      priceByOutcomeId.set(outcomeId, price);
+    }
+    return priceByOutcomeId;
+  }, [displayMidpointsByOutcomeId, midpointRows]);
+  const comparison = useMemo(() => {
+    return normalizeEventListItemV2Comparison({
+      venueMarkets: resolvedOutcomeMarkets,
+      marketCount: resolvedMarketCount,
+      priceByOutcomeId: displayPriceByOutcomeId
+    });
+  }, [displayPriceByOutcomeId, resolvedMarketCount, resolvedOutcomeMarkets]);
+  const gapsByVenueMarketId = useMemo(() => {
+    return computePriceGapsFromComparisonRows(comparison.rows);
+  }, [comparison.rows]);
   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}` : "";
+  const resolvedVolume = (_a = resolveDisplayVolume(event.volume, allVenueMarkets)) != null ? _a : 0;
+  const volumeLabel = `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}`;
+  const orderedFooterVenues = useMemo(() => {
+    const venues = visibleVenueLogos.length > 0 ? visibleVenueLogos : comparison.matchedVenues.length > 0 ? comparison.matchedVenues : event.venue ? [event.venue] : [];
+    return Array.from(new Set(venues));
+  }, [comparison.matchedVenues, event.venue, visibleVenueLogos]);
+  const shouldShowMatchedVenueSummary = resolvedVenueCount > 1 || orderedFooterVenues.length > 1;
+  const visibleFooterVenues = shouldShowMatchedVenueSummary ? orderedFooterVenues : orderedFooterVenues.slice(0, 1);
+  const singleFooterVenue = shouldShowMatchedVenueSummary ? void 0 : visibleFooterVenues[0];
+  const matchedCountLabel = labels.eventItem.matchedCount(
+    Math.max(resolvedVenueCount, visibleFooterVenues.length)
+  );
   const shouldUseNativeLinkNavigation = (eventToHandle) => {
     return eventToHandle.metaKey || eventToHandle.ctrlKey || eventToHandle.shiftKey || eventToHandle.altKey || eventToHandle.button === 1;
   };
@@ -378,62 +525,116 @@ var EventListItemContent = ({
       )
     ] });
   };
-  const _renderPriceGapPill = (value) => {
+  const renderPriceStripSkeleton = (count) => {
+    const safeCount = Math.max(1, Math.min(count || 1, 3));
+    const collapsedCount = safeCount - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      Array.from({ length: collapsedCount }).map((_, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "agg-outcome-price-loading agg-outcome-price-loading-collapsed",
+            "h-[30px] w-[30px] shrink-0 rounded-agg-full bg-agg-separator animate-pulse",
+            index > 0 && "-ml-3"
+          )
+        },
+        `agg-outcome-price-loading-collapsed-${index}`
+      )),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "agg-outcome-price-loading agg-outcome-price-loading-best",
+            "ml-1.5 h-[30px] w-[68px] shrink-0 rounded-agg-full bg-agg-separator animate-pulse"
+          )
+        }
+      )
+    ] });
+  };
+  const renderPriceGapPill = (value) => {
+    if (!config.features.enablePriceGap) return null;
+    if (isAwaitingMidpoints) return null;
     const formattedPriceGap = formatPriceGapPercent(value);
     if (!formattedPriceGap) return null;
     return /* @__PURE__ */ jsxs(
-      "div",
+      "span",
       {
         className: cn(
           "agg-price-gap-pill",
-          "inline-flex shrink-0 items-center gap-1 rounded-agg-sm border border-agg-success/50 px-2 py-0.5",
-          "bg-agg-success/10"
+          "inline-flex max-w-[52px] shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap",
+          "text-agg-2xs font-agg-bold leading-agg-14 text-agg-success",
+          "opacity-100 transition-all duration-200 ease-out",
+          "group-hover/agg-event-card:mr-0 group-hover/agg-event-card:max-w-0 group-hover/agg-event-card:opacity-0"
         ),
+        title: labels.eventItem.priceGap,
+        "aria-label": `${formattedPriceGap} ${labels.eventItem.priceGap}`,
         children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "overline", className: "text-agg-success", children: formattedPriceGap }),
-          /* @__PURE__ */ jsx(Typography, { variant: "overline", className: "text-agg-success uppercase", children: labels.eventItem.priceGap })
+          /* @__PURE__ */ jsx(
+            "i",
+            {
+              "aria-hidden": "true",
+              className: "fi-rr-arrow-down inline-flex size-3! shrink-0 items-center justify-center text-agg-xs text-agg-success"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: formattedPriceGap })
         ]
       }
     );
   };
-  const renderOutcomePriceBadge = (probability, venue, shouldRenderLoadingSkeleton, market, outcome) => {
+  const renderComparisonPriceBadge = (row, price, priceIndex) => {
     var _a2;
-    if (shouldRenderLoadingSkeleton) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: cn(
-            "agg-outcome-price-loading bg-agg-separator animate-pulse h-8 w-[100px] rounded-agg-full"
-          )
-        }
-      );
-    }
-    if (typeof probability !== "number") return null;
-    const marketHref = (_a2 = getMarketHref == null ? void 0 : getMarketHref(event, market, outcome)) != null ? _a2 : resolveMarketHrefFromEventHref(href, market.id, outcome.id);
+    const marketHref = (_a2 = getMarketHref == null ? void 0 : getMarketHref(event, row.market, row.outcome)) != null ? _a2 : resolveMarketHrefFromEventHref(href, row.market.id, row.outcome.id);
     const isInteractive = Boolean(onMarketClick || marketHref);
+    const hasVenueCompetition = row.prices.length > 1;
+    const isHighlightedBestPrice = hasVenueCompetition && price.isBest;
+    const shouldCollapsePriceText = hasVenueCompetition && !isHighlightedBestPrice;
     return /* @__PURE__ */ jsx(
       Badge,
       {
-        text: formatMarketProbabilityPercent(probability, config.formatting.formatPercent),
-        prefix: /* @__PURE__ */ jsx(VenueLogo, { venue, size: "small" }),
+        text: formatMarketProbabilityPercent(price.price, config.formatting.formatPercent),
+        prefix: /* @__PURE__ */ jsx(
+          VenueLogo,
+          {
+            venue: price.venue,
+            size: "small",
+            isMonochromatic: !isHighlightedBestPrice,
+            className: cn(!isHighlightedBestPrice && "text-agg-muted-foreground!")
+          }
+        ),
         size: "small",
         classNames: {
           root: cn(
             "agg-outcome-price",
-            "h-8 min-w-25 justify-center px-4 text-agg-base leading-agg-6",
+            "h-[30px] justify-center overflow-hidden px-0 text-agg-sm leading-agg-5",
+            "shrink-0 p-0! transition-all duration-300 ease-out",
+            isHighlightedBestPrice ? "agg-outcome-price-best ml-2 w-[68px] min-w-[68px] shadow-none" : cn(
+              "bg-agg-secondary-hover hover:bg-agg-tertiary",
+              hasVenueCompetition ? "agg-outcome-price-collapsed relative box-border w-[30px] min-w-[30px] group-hover/agg-event-card:w-[68px] group-hover/agg-event-card:min-w-[68px] group-hover/agg-event-card:gap-1" : "w-[68px] min-w-[68px]",
+              hasVenueCompetition && priceIndex > 0 && "-ml-3 group-hover/agg-event-card:ml-2"
+            ),
             isInteractive && "cursor-pointer",
             classNames == null ? void 0 : classNames.badge
           ),
-          text: "text-agg-foreground"
+          prefix: cn(
+            "flex shrink-0 items-center justify-center [&>svg]:size-3.5",
+            shouldCollapsePriceText && "pointer-events-none absolute inset-0 transition-[opacity] duration-300 ease-in group-hover/agg-event-card:pointer-events-auto group-hover/agg-event-card:static group-hover/agg-event-card:inset-auto"
+          ),
+          text: cn(
+            "transition-[max-width,opacity] duration-300 ease-in",
+            price.isBest ? "text-agg-foreground" : "text-agg-muted-foreground",
+            shouldCollapsePriceText && "max-w-0 overflow-hidden! opacity-0 group-hover/agg-event-card:max-w-[40px] group-hover/agg-event-card:opacity-100"
+          )
         },
         onClick: isInteractive ? (eventToHandle) => {
-          handleOutcomeBadgeClick(eventToHandle, market, outcome, marketHref);
+          handleOutcomeBadgeClick(eventToHandle, row.market, row.outcome, marketHref);
         } : void 0,
         onAuxClick: isInteractive ? (eventToHandle) => {
-          handleOutcomeBadgeClick(eventToHandle, market, outcome, marketHref);
+          handleOutcomeBadgeClick(eventToHandle, row.market, row.outcome, marketHref);
         } : void 0
-      }
+      },
+      `${price.market.id}:${price.outcome.id}`
     );
   };
   return /* @__PURE__ */ jsxs(
@@ -453,153 +654,72 @@ var EventListItemContent = ({
       "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
       withGradient: true,
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("agg-event-card-header min-h-12 flex items-center gap-3", classNames == null ? void 0 : classNames.header),
-            children: [
-              /* @__PURE__ */ jsx(
-                RemoteImage,
-                {
-                  src: optimizedImageUrl(resolvedImage, 40),
-                  alt: "",
-                  className: cn("agg-event-image h-10 w-10 rounded-agg-lg object-cover")
-                }
+        /* @__PURE__ */ jsxs("div", { className: cn("agg-event-card-header flex h-12 items-center gap-4", classNames == null ? void 0 : classNames.header), children: [
+          /* @__PURE__ */ jsx(
+            RemoteImage,
+            {
+              src: optimizedImageUrl(resolvedImage, 40),
+              alt: "",
+              classNames: {
+                root: "agg-event-image h-10 w-10 shrink-0 rounded-agg-lg object-cover",
+                image: "transition-transform duration-300 group-hover/agg-event-card:scale-110"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body-strong",
+              className: cn(
+                "agg-event-title",
+                "min-w-0 flex-1 text-agg-base font-agg-bold leading-agg-6",
+                "truncate text-wrap wrap-break-word line-clamp-2",
+                classNames == null ? void 0 : classNames.title
               ),
-              /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "body-strong",
-                  className: cn(
-                    "agg-event-title",
-                    "min-w-0 text-agg-base font-agg-bold leading-agg-6 ",
-                    "truncate text-wrap wrap-break-word line-clamp-2",
-                    classNames == null ? void 0 : classNames.title
-                  ),
-                  children: resolvedTitle
-                }
-              )
-            ]
-          }
-        ),
+              children: resolvedTitle
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "agg-outcomes flex flex-col gap-3 max-h-20 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+              "agg-outcomes flex max-h-[76px] flex-col gap-4 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               classNames == null ? void 0 : classNames.outcomes
             ),
             onScroll: handleOutcomesScroll,
             children: [
-              resolvedMarketCount === 1 && resolvedOutcomeMarkets.length === 1 ? (() => {
-                const market = resolvedOutcomeMarkets[0];
-                return sortOutcomes(market.venueMarketOutcomes).map((outcome) => {
-                  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(
-                    "div",
-                    {
-                      className: cn(
-                        "agg-outcome-row",
-                        "flex flex-row gap-3 w-full items-center justify-between",
-                        classNames == null ? void 0 : classNames.outcomeRow
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
-                          Typography,
-                          {
-                            variant: "body",
-                            className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
-                            children: resolveOutcomeTitle(outcome)
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
-                          renderArbitrage(arbitragePercent),
-                          renderOutcomePriceBadge(
-                            probability,
-                            displayVenue,
-                            shouldRenderMidpointSkeleton,
-                            market,
-                            outcome
-                          )
-                        ] })
-                      ]
-                    },
-                    outcome.id
-                  );
-                });
-              })() : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
-                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,
-                  (_a2 = market.venueMarketOutcomes) == null ? void 0 : _a2[0]
-                );
-                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);
+              comparison.rows.map((row) => {
+                var _a2;
+                const arbitragePercent = (_a2 = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.outcome.id]) != null ? _a2 : arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.market.id];
+                const priceGapPercent = gapsByVenueMarketId.get(row.market.id);
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
                       "agg-outcome-row",
-                      "flex flex-row gap-3 w-full items-center justify-between",
+                      "flex h-10 w-full flex-row items-center justify-between gap-3",
                       classNames == null ? void 0 : classNames.outcomeRow
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-1 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
                         Typography,
                         {
                           variant: "body",
-                          className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
-                          children: outcomeTitle
+                          className: "agg-outcome-label min-w-0 truncate text-agg-xs leading-agg-5 md:text-agg-base md:leading-agg-6",
+                          children: row.label
                         }
                       ) }),
-                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex shrink-0 flex-row items-center justify-end gap-2", children: [
                         renderArbitrage(arbitragePercent),
-                        renderOutcomePriceBadge(
-                          probability,
-                          bestVenue,
-                          shouldRenderMidpointSkeleton,
-                          market,
-                          displayOutcome
-                        )
+                        renderPriceGapPill(priceGapPercent),
+                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-price-strip relative flex shrink-0 items-center justify-end", children: isAwaitingMidpoints ? renderPriceStripSkeleton(row.prices.length) : row.prices.map(
+                          (price, priceIndex) => renderComparisonPriceBadge(row, price, priceIndex)
+                        ) })
                       ] })
                     ]
                   },
-                  `${market.id}`
+                  row.id
                 );
               }),
               shouldRenderLoadingOutcomeRow ? /* @__PURE__ */ jsxs("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
@@ -626,7 +746,7 @@ var EventListItemContent = ({
           {
             className: cn(
               "agg-event-card-footer",
-              "flex items-center justify-between gap-2",
+              "flex items-center justify-between gap-5",
               "text-agg-muted-foreground",
               classNames == null ? void 0 : classNames.footer
             ),
@@ -635,41 +755,43 @@ var EventListItemContent = ({
                 "div",
                 {
                   className: cn(
-                    "agg-event-meta flex items-center gap-1 text-agg-sm leading-agg-5 truncate"
+                    "agg-event-meta flex min-w-0 flex-1 items-center gap-2 text-agg-sm leading-agg-5 truncate"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
-                      resolvedMarketCount,
-                      labels.eventItem.marketSingular,
-                      labels.eventItem.marketPlural
-                    ) }),
-                    /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
-                    /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
-                      resolvedVenueCount,
-                      labels.eventItem.venueSingular,
-                      labels.eventItem.venuePlural
-                    ) }),
-                    visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "agg-event-venues flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(
+                    shouldShowMatchedVenueSummary ? /* @__PURE__ */ jsx("span", { className: "agg-event-matched-badge rounded-agg-full bg-agg-primary/10 px-2 py-[3px] text-agg-2xs font-agg-bold uppercase leading-agg-14 text-agg-primary", children: matchedCountLabel }) : null,
+                    singleFooterVenue ? /* @__PURE__ */ jsxs("span", { className: "agg-event-single-venue flex min-w-0 items-center gap-1 overflow-hidden", children: [
+                      /* @__PURE__ */ jsx(
+                        VenueLogo,
+                        {
+                          venue: singleFooterVenue,
+                          size: "small",
+                          isMonochromatic: true,
+                          className: "text-agg-muted-foreground! size-[14px]!"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: resolveVenueLabel(singleFooterVenue, void 0, labels) })
+                    ] }) : null,
+                    shouldShowMatchedVenueSummary && visibleFooterVenues.length > 0 ? /* @__PURE__ */ jsx("span", { className: "agg-event-venues flex items-center gap-1 overflow-hidden", children: visibleFooterVenues.map((venue) => /* @__PURE__ */ jsx(
                       VenueLogo,
                       {
                         venue,
                         size: "small",
                         isMonochromatic: true,
-                        className: "text-agg-muted-foreground! size-[14px]!"
+                        className: "text-agg-muted-foreground! size-3.5!"
                       },
                       venue
                     )) }) : null
                   ]
                 }
               ),
-              volumeLabel ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 Typography,
                 {
                   variant: "label",
-                  className: "agg-event-volume max-w-16 sm:max-w-20 min-w-12 sm:min-w-14 truncate whitespace-pre text-agg-sm text-agg-muted-foreground line-clamp-1",
+                  className: "agg-event-volume min-w-fit shrink-0 truncate whitespace-pre text-agg-sm text-agg-muted-foreground line-clamp-1",
                   children: volumeLabel
                 }
-              ) : null
+              )
             ]
           }
         )
@@ -723,6 +845,10 @@ var EventListItem = (props) => {
   return /* @__PURE__ */ jsx(EventListItemByEventId, __spreadValues({}, props));
 };
 EventListItem.displayName = "EventListItem";
+var EventListItemV2 = (props) => {
+  return /* @__PURE__ */ jsx(EventListItem, __spreadValues({}, props));
+};
+EventListItemV2.displayName = "EventListItemV2";
 
 // src/events/market-details/orderbook-aggregation.ts
 import {
@@ -744,12 +870,12 @@ var fromScaled = (value, precision) => {
 var toPriceKey = (price) => {
   return String(toScaled(price, PRICE_PRECISION));
 };
-var normalizeOutcomeLabel2 = (value) => {
+var normalizeOutcomeLabel = (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 = normalizeOutcomeLabel2(value);
+  const normalizedValue = normalizeOutcomeLabel(value);
   if (!normalizedValue) return "";
   if (POSITIVE_OUTCOME_KEYS.has(normalizedValue)) return "yes";
   if (NEGATIVE_OUTCOME_KEYS.has(normalizedValue)) return "no";
@@ -763,10 +889,10 @@ var getOutcomeLabelCandidates = (outcome) => {
   );
 };
 var matchesSelectedOutcomeLabel = (outcome, selectedOutcomeLabel) => {
-  const normalizedSelectedLabel = normalizeOutcomeLabel2(selectedOutcomeLabel);
+  const normalizedSelectedLabel = normalizeOutcomeLabel(selectedOutcomeLabel);
   const semanticSelectedLabel = toSemanticOutcomeLabel(selectedOutcomeLabel);
   return getOutcomeLabelCandidates(outcome).some((candidate) => {
-    const normalizedCandidate = normalizeOutcomeLabel2(candidate);
+    const normalizedCandidate = normalizeOutcomeLabel(candidate);
     if (!normalizedCandidate) return false;
     return normalizedCandidate === normalizedSelectedLabel || toSemanticOutcomeLabel(candidate) === semanticSelectedLabel;
   });
@@ -2358,7 +2484,7 @@ var EventListItemDetailsContent = ({
     () => resolvedEventTradingState.displayMarkets,
     [resolvedEventTradingState.displayMarkets]
   );
-  const sortedVenueMarkets = useMemo5(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
+  const sortedVenueMarkets = useMemo5(() => sortMarketsByVolumeDesc(venueMarkets), [venueMarkets]);
   const marketOptions = useMemo5(
     () => sortedVenueMarkets.map((vm) => ({
       value: vm.id,
@@ -3110,7 +3236,7 @@ import {
   mergeBestPricesPreferringLive as mergeBestPricesPreferringLive2,
   optimizedImageUrl as optimizedImageUrl3,
   resolveMarketTradingState,
-  useEventTradingContext as useEventTradingContext3,
+  useEventTradingContext as useEventTradingContext2,
   useLabels as useLabels6,
   useLiveBestPrices as useLiveBestPrices2,
   useLiveOutcomePrices as useLiveOutcomePrices2,
@@ -3123,6 +3249,32 @@ import {
 } from "@agg-build/hooks";
 import { useEffect as useEffect4, useId, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
 
+// src/events/shared/display-outcome-venue.ts
+var normalizeOutcomeLabel2 = (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 (normalizeOutcomeLabel2(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/market-details/market-details-outcome-button.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var marketDetailsOutcomeButtonToneClasses = {
@@ -3219,7 +3371,7 @@ var MarketDetailsOutcomeButton = ({
 MarketDetailsOutcomeButton.displayName = "MarketDetailsOutcomeButton";
 
 // src/events/market-details/index.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var MarketDetailsUnavailableState = ({
   ariaLabel,
   classNames
@@ -3286,7 +3438,7 @@ var MarketDetailsContent = ({
   } = config;
   const isDarkTheme = theme === "dark";
   const labels = useLabels6();
-  const tradingContext = useEventTradingContext3();
+  const tradingContext = useEventTradingContext2();
   const detailsContentId = useId();
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
@@ -4024,7 +4176,7 @@ var MarketDetailsContent = ({
                     ) : "translate-y-5 opacity-0"
                   ),
                   children: [
-                    !isResolvedMarket ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+                    !isResolvedMarket ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
                       /* @__PURE__ */ jsx9("div", { className: cn("block", classNames == null ? void 0 : classNames.tabs), children: /* @__PURE__ */ jsx9(
                         Tabs,
                         {
@@ -4317,7 +4469,7 @@ var MarketDetailsList = ({
 }) => {
   var _a, _b;
   const labels = useLabels6();
-  const tradingContext = useEventTradingContext3();
+  const tradingContext = useEventTradingContext2();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
   const [expandedMarketId, setExpandedMarketId] = useState4(null);
   const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState4(false);
@@ -4345,7 +4497,7 @@ var MarketDetailsList = ({
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
   const groupedMarkets = useMemo6(() => {
-    const sortedMarkets = sortMarketsByYesOddsDesc(sourceMarkets);
+    const sortedMarkets = sortMarketsByVolumeDesc(sourceMarkets);
     if (sortedMarkets.length === 0) {
       return {
         primary: [],
@@ -4534,8 +4686,10 @@ MarketDetailsList.displayName = "MarketDetailsList";
 // src/events/list/index.tsx
 import {
   MarketStatus as MarketStatus2,
+  getVisibleVenueIdsByConfig,
   useAppConfig as useAppConfig2,
   useCategories,
+  useCategoryChildren,
   useLabels as useLabels8,
   useSdkUiConfig as useSdkUiConfig4,
   useVenueEvents
@@ -4545,7 +4699,7 @@ 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 { getVenueAvailabilityState, useAppConfig, useGeoBlock, 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
@@ -4615,6 +4769,9 @@ var getDefaultEventListTabs = (labels) => {
 // src/events/list/event-list-tabs.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
+  if (tab.iconName === "warning-filled") {
+    return /* @__PURE__ */ jsx10(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+  }
   if (tab.venueLogo) {
     return /* @__PURE__ */ jsx10(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
@@ -4631,15 +4788,26 @@ var renderTabIcon = (tab, isActive) => {
 var useEventListTabs = (tabs) => {
   const labels = useLabels7();
   const { disabledVenues } = useAppConfig();
+  const { isLocationBlocked } = useGeoBlock();
   return useMemo7(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
-    if (disabledVenues.length === 0) return baseTabs;
-    const disabled = new Set(disabledVenues);
-    return baseTabs.filter((tab) => {
-      if (!tab.venueLogo) return true;
-      return !disabled.has(tab.venueLogo);
+    return baseTabs.flatMap((tab) => {
+      if (!tab.venueLogo) return [tab];
+      const availabilityState = getVenueAvailabilityState({
+        venueId: tab.venueLogo,
+        disabledVenues,
+        isLocationBlocked
+      });
+      if (availabilityState === "hidden") return [];
+      return [
+        __spreadProps(__spreadValues({}, tab), {
+          disabled: tab.disabled || availabilityState === "geoblocked",
+          label: availabilityState === "geoblocked" ? `${tab.label} (${labels.trading.venueUnavailableInRegion})` : tab.label,
+          iconName: availabilityState === "geoblocked" ? "warning-filled" : tab.iconName
+        })
+      ];
     });
-  }, [tabs, labels, disabledVenues]);
+  }, [tabs, labels, disabledVenues, isLocationBlocked]);
 };
 var EventListTabs = ({
   tabs,
@@ -4651,9 +4819,10 @@ var EventListTabs = ({
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
   useEffect5(() => {
-    if (resolvedTabs.length === 0) return;
-    if (resolvedTabs.some((tab) => tab.value === activeTab)) return;
-    onTabChange(resolvedTabs[0].value);
+    const fallbackTab = resolvedTabs.find((tab) => !tab.disabled);
+    if (!fallbackTab) return;
+    if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
+    onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
   const items = useMemo7(() => {
     return resolvedTabs.map((tab) => {
@@ -4753,7 +4922,20 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
 };
 
 // src/events/list/index.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var subcategoryMenuRowClassName = cn(
+  "flex min-h-11 w-full items-center justify-between rounded-[6px] px-3 py-3",
+  "text-left text-agg-sm font-agg-normal leading-agg-5",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-1 focus-visible:ring-offset-agg-secondary"
+);
+var subcategoryMenuIdleRowClassName = cn(
+  subcategoryMenuRowClassName,
+  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
+);
+var subcategoryMenuSelectedRowClassName = cn(
+  subcategoryMenuRowClassName,
+  "cursor-pointer bg-agg-primary/10 text-agg-primary"
+);
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -4768,7 +4950,10 @@ var resolveSortQueryParams = (value) => {
     return { sortBy: "endDate", sortDir: "asc" };
   }
   if (value === "topArbitrage") {
-    return {};
+    return {
+      sortBy: "arbReturn",
+      sortDir: "desc"
+    };
   }
   return { sortBy: "volume24hr", sortDir: "desc" };
 };
@@ -4778,6 +4963,7 @@ var EventList = ({
   maxVisibleItems,
   search,
   categoryIds,
+  onCategoryRootChange,
   onEventClick,
   onMarketClick,
   getMarketHref,
@@ -4795,9 +4981,7 @@ var EventList = ({
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
   const visibleVenues = useMemo8(
-    () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
-      (v) => !disabledVenues.includes(v)
-    ),
+    () => disabledVenues.length === 0 ? void 0 : getVisibleVenueIdsByConfig(VENUES, disabledVenues),
     [disabledVenues]
   );
   const [activeTabValue, setActiveTabValue] = useState6(
@@ -4805,8 +4989,8 @@ var EventList = ({
   );
   const [selectedSort, setSelectedSort] = useState6("volume24hr");
   const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = useState6(false);
-  const [selectedParentCategoryId, setSelectedParentCategoryId] = useState6(null);
-  const [selectedSubcategoryId, setSelectedSubcategoryId] = useState6(null);
+  const [categoryPath, setCategoryPath] = useState6([]);
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = useState6(() => /* @__PURE__ */ new Set());
   const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
   const sortItems = useMemo8(() => {
     return [
@@ -4818,9 +5002,7 @@ var EventList = ({
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" }),
-        disabled: true,
-        hidden: true
+        icon: /* @__PURE__ */ jsx11(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
@@ -4842,48 +5024,86 @@ var EventList = ({
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
   useEffect6(() => {
     if (!isDiscoveryFiltersEnabled) return;
-    setSelectedParentCategoryId(baseCategoryId);
-    setSelectedSubcategoryId(null);
+    if (!baseCategoryId) {
+      setCategoryPath([]);
+      setCollapsedCategoryIds(/* @__PURE__ */ new Set());
+      return;
+    }
+    setCategoryPath([{ id: baseCategoryId, label: baseCategoryId, eventCount: 0 }]);
+    setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [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,
+  const sortedTopLevelCategories = useMemo8(() => {
+    return sortCategoriesForNavigation(topLevelCategories);
+  }, [topLevelCategories]);
+  const baseCategoryChildPrefetchIds = useMemo8(() => {
+    return Array.from(
+      /* @__PURE__ */ new Set([
+        ...sortedTopLevelCategories.map((category) => category.id),
+        ...categoryPath.map((category) => category.id)
+      ])
+    );
+  }, [categoryPath, sortedTopLevelCategories]);
+  const { childrenByParentId: baseChildrenByParentId } = useCategoryChildren({
+    queryKeyScope: "event-list-category-children",
+    enabled: isDiscoveryFiltersEnabled,
+    parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && Boolean(baseCategoryId) && subcategories.length > 0;
-  console.log({
-    enableVenueEventDiscoveryFilters,
-    shouldRenderSubcategoryFilters,
-    isDiscoveryFiltersEnabled,
-    baseCategoryId,
-    subcategories
+  const visibleChildPrefetchIds = useMemo8(() => {
+    var _a2;
+    const ids = /* @__PURE__ */ new Set();
+    for (const expandedCategory of categoryPath) {
+      for (const childCategory of (_a2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _a2 : []) {
+        ids.add(childCategory.id);
+      }
+    }
+    return Array.from(ids);
+  }, [baseChildrenByParentId, categoryPath]);
+  const { childrenByParentId: visibleChildrenByParentId } = useCategoryChildren({
+    queryKeyScope: "event-list-category-children",
+    enabled: isDiscoveryFiltersEnabled,
+    parentIds: visibleChildPrefetchIds,
+    limit: 100
+  });
+  const visibleGrandchildPrefetchIds = useMemo8(() => {
+    var _a2;
+    const ids = /* @__PURE__ */ new Set();
+    for (const expandedCategory of categoryPath) {
+      for (const childCategory of (_a2 = visibleChildrenByParentId.get(expandedCategory.id)) != null ? _a2 : []) {
+        ids.add(childCategory.id);
+      }
+    }
+    return Array.from(ids);
+  }, [categoryPath, visibleChildrenByParentId]);
+  const { childrenByParentId: visibleGrandchildrenByParentId } = useCategoryChildren({
+    queryKeyScope: "event-list-category-children",
+    enabled: isDiscoveryFiltersEnabled,
+    parentIds: visibleGrandchildPrefetchIds,
+    limit: 100
   });
+  const childrenByParentId = useMemo8(() => {
+    return new Map([
+      ...baseChildrenByParentId,
+      ...visibleChildrenByParentId,
+      ...visibleGrandchildrenByParentId
+    ]);
+  }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && (sortedTopLevelCategories.length > 0 || categoryPath.length > 0);
   const totalTopLevelEventCount = useMemo8(() => {
-    return topLevelCategories.reduce((accumulator, category) => {
+    return sortedTopLevelCategories.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]);
+  }, [sortedTopLevelCategories]);
   const resolvedCategoryIds = useMemo8(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
-    if (selectedSubcategoryId) return [selectedSubcategoryId];
-    if (selectedParentCategoryId) return [selectedParentCategoryId];
-    return categoryIds;
-  }, [categoryIds, isDiscoveryFiltersEnabled, selectedParentCategoryId, selectedSubcategoryId]);
+    return resolveCategoryIdsFromPath(categoryPath, void 0);
+  }, [categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
   const sortQueryParams = useMemo8(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
@@ -4979,58 +5199,121 @@ 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 isDrilledIn = categoryPath.length > 0;
   const handleSelectAllCategories = () => {
-    setSelectedParentCategoryId(baseCategoryId);
-    setSelectedSubcategoryId(null);
+    setCategoryPath([]);
+    setCollapsedCategoryIds(/* @__PURE__ */ new Set());
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(void 0);
     setIsSubcategoriesModalOpen(false);
   };
-  const handleSelectSubcategory = (subcategoryId) => {
-    setSelectedSubcategoryId(subcategoryId);
-    setIsSubcategoriesModalOpen(false);
+  const handleToggleSubcategory = ({
+    entry,
+    depth,
+    hasKnownChildren,
+    isExpanded,
+    isSelected
+  }) => {
+    var _a2;
+    setCategoryPath((prev) => [...prev.slice(0, depth), entry]);
+    setCollapsedCategoryIds((prev) => {
+      const next = new Set(prev);
+      if (hasKnownChildren && isExpanded && isSelected) {
+        next.add(entry.id);
+        return next;
+      }
+      next.delete(entry.id);
+      return next;
+    });
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(depth === 0 ? entry.id : (_a2 = categoryPath[0]) == null ? void 0 : _a2.id);
+  };
+  const renderSubcategoryTreeRow = ({
+    entry,
+    isExpanded,
+    isSelected,
+    onClick
+  }) => {
+    var _a2, _b2;
+    const hasKnownChildren = ((_b2 = (_a2 = childrenByParentId.get(entry.id)) == null ? void 0 : _a2.length) != null ? _b2 : 0) > 0;
+    return /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        "aria-current": isSelected ? "true" : void 0,
+        className: isSelected ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ jsx11(
+            Icon,
+            {
+              name: isExpanded ? "chevron-up" : "chevron-down",
+              size: "small",
+              color: "currentColor",
+              className: "shrink-0 text-agg-muted-foreground"
+            }
+          ) : /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+        ]
+      },
+      entry.id
+    );
   };
-  const subcategoriesListContent = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  const renderSubcategoryBranch = (category, depth) => {
+    var _a2, _b2, _c2, _d, _e;
+    const label = (_a2 = category.displayName) != null ? _a2 : category.name;
+    const entry = {
+      id: category.id,
+      label,
+      eventCount: (_b2 = category.eventCount) != null ? _b2 : 0
+    };
+    const childCategories = (_c2 = childrenByParentId.get(category.id)) != null ? _c2 : [];
+    const hasKnownChildren = childCategories.length > 0;
+    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
+    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
+    return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-1", children: [
+      renderSubcategoryTreeRow({
+        entry,
+        isExpanded,
+        isSelected,
+        onClick: () => handleToggleSubcategory({
+          entry,
+          depth,
+          hasKnownChildren,
+          isExpanded,
+          isSelected
+        })
+      }),
+      isExpanded ? /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-col gap-1 pl-4", children: childCategories.map(
+        (childCategory) => renderSubcategoryBranch(childCategory, depth + 1)
+      ) }) : null
+    ] }, category.id);
+  };
+  const subcategoriesListContent = /* @__PURE__ */ jsxs8(Fragment3, { 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"
-        ),
+        "aria-current": !isDrilledIn ? "true" : void 0,
+        className: !isDrilledIn ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
         onClick: handleSelectAllCategories,
         children: [
-          /* @__PURE__ */ jsx11("span", { children: labels.eventList.subcategoriesAll }),
-          /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: selectedParentEventCount })
+          /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate", children: labels.eventList.subcategoriesAll }),
+          /* @__PURE__ */ jsx11("span", { className: "text-agg-muted-foreground", children: totalTopLevelEventCount })
         ]
       }
     ),
-    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
-      );
-    })
+    sortedTopLevelCategories.map((category) => renderSubcategoryBranch(category, 0))
   ] });
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ jsx11(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+    return /* @__PURE__ */ jsx11(
+      Skeleton,
+      {
+        view: "event-list",
+        ariaLabel: labels.eventList.loading(title),
+        withSidebar: isDiscoveryFiltersEnabled
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs8("section", { className: "agg-event-list flex w-full flex-col gap-5", children: [
+  return /* @__PURE__ */ jsxs8("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
     /* @__PURE__ */ jsxs8(
       "header",
       {
@@ -5060,18 +5343,19 @@ var EventList = ({
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
-                className: "min-w-[160px] w-auto! shrink-0 min-h-10.5",
+                className: "min-w-[200px] w-auto! shrink-0 min-h-10.5",
                 value: selectedSort,
                 onChange: setSelectedSort,
                 items: sortItems,
-                contentClassName: "py-2"
+                contentClassName: "py-2",
+                triggerClassName: "rounded-agg-lg!"
               }
             )
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-2 md:hidden", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
       /* @__PURE__ */ jsx11(
         EventListTabs,
         {
@@ -5115,6 +5399,7 @@ var EventList = ({
             {
               className: cn(
                 "agg-event-list-grid",
+                "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] md:grid-cols-[repeat(auto-fill,minmax(360px,1fr))] gap-4",
                 "w-full",
                 isPlaceholderData && "opacity-60",
                 gridClassName
@@ -5125,7 +5410,7 @@ var EventList = ({
                   {
                     event,
                     classNames: {
-                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                      root: "agg-event-list-item w-full min-w-0! max-w-none justify-between!"
                     },
                     onEventClick,
                     onMarketClick,
@@ -5140,7 +5425,7 @@ var EventList = ({
                   {
                     isLoading: true,
                     classNames: {
-                      root: "agg-event-list-item w-full min-w-0 max-w-none"
+                      root: "agg-event-list-item w-full min-w-0! max-w-none justify-between!"
                     }
                   },
                   `loading-${index}`
@@ -5188,6 +5473,7 @@ EventList.displayName = "EventList";
 export {
   isErrorWithStatus,
   EventListItem,
+  EventListItemV2,
   collectEligibleVenueOutcomes,
   collectEligibleVenueOutcomeIds,
   mergeVenueOutcomeOrderbooks,